/*
 * PHONE FIELD OF THE BOOKING FORM (intl-tel-input widget)
 *
 * The full Events Manager stylesheet is excluded in the Events Manager CSS settings, so only the
 * styles the phone field needs are loaded here. The widget's own stylesheet is enqueued from the
 * plugin (includes/inc-custom-event-manager.php) - this file only carries the adjustments that
 * Events Manager puts around it (see includes/css/partials/_phone.scss of the plugin).
 */

/* form fields are full width blocks */
.em-booking-form-details .iti {
	display: block !important;
}

/* the theme gives every input in the form a thick border and padding - not the search box inside the country dropdown */
.em-booking-form-details .iti input.iti__search-input {
	width: 100% !important;
	margin: 0 !important;
	border: none !important;
	padding: 5px 5px 5px 30px !important;
	font-size: 14px;
}

/* country selector trigger, keep it plain inside the input */
.em-booking-form-details .iti .iti__country-container button.iti__selected-country[type="button"] {
	display: flex !important;
	align-items: center !important;
	height: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	font: inherit !important;
	color: inherit !important;
	cursor: pointer !important;
}

/* invalid number - class toggled by the Events Manager phone JS */
.em-booking-form-details .iti.invalid-number input[type="tel"] {
	border-color: darkred !important;
}

/* inline error message created by the Events Manager phone JS */
.em-booking-form-details .em-inline-error {
	margin: 10px 0;
	color: darkred;
}