/*
 * Elementor Form Spam Shield - front-end styles.
 *
 * Elementor and most themes style every form control and every <button> inside
 * a form, which would otherwise turn intl-tel-input's country selector into a
 * bordered box sitting on top of the field's placeholder. The selectors below
 * are deliberately specific, and marked !important, so they win against the
 * Elementor kit without the site having to add custom CSS.
 */

/*
 * Let the intl-tel-input wrapper behave like the input it replaced.
 *
 * position must be relative and must win: it is the containing block for the
 * country button. Without it the button falls out of the field and lands
 * underneath, on top of the error message.
 */
.elementor-form .elementor-field-group .iti,
.elementor-form .iti {
	display: block !important;
	position: relative !important;
	width: 100%;
}

.elementor-form .elementor-field-group .iti input.iti__tel-input,
.elementor-form .iti input.iti__tel-input {
	box-sizing: border-box !important;
	width: 100% !important;
}

/*
 * Reserve room for the country button. ITI sets this inline, which any
 * `padding: ... !important` in the site kit would silently override.
 */
.elementor-form .elementor-field-group .iti--has-country-selector input.iti__tel-input,
.elementor-form .iti--has-country-selector input.iti__tel-input {
	padding-left: 52px !important;
}

.elementor-form .elementor-field-group .iti--has-country-selector.iti--show-flags input.iti__tel-input,
.elementor-form .iti--has-country-selector.iti--show-flags input.iti__tel-input {
	padding-left: 58px !important;
}

/*
 * The selector is a plain control, not one of the form's buttons, and it has to
 * stay pinned inside the field. Without an explicit position it drops into the
 * normal flow and lands underneath the input.
 */
.elementor-form .iti__country-container {
	border: 0 !important;
	bottom: 0 !important;
	box-shadow: none !important;
	display: flex !important;
	height: auto !important;
	left: 0 !important;
	margin: 0 !important;
	padding: 1px !important;
	position: absolute !important;
	right: auto !important;
	top: 0 !important;
	width: auto !important;
	z-index: 3;
}

.elementor-form .iti__country-container button.iti__selected-country,
.elementor-form .iti__selected-country,
.elementor-form .iti__selected-country-primary {
	background: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	color: inherit !important;
	filter: none !important;
	font-size: inherit !important;
	height: 100% !important;
	letter-spacing: normal !important;
	line-height: 1 !important;
	margin: 0 !important;
	min-height: 0 !important;
	min-width: 0 !important;
	outline: none !important;
	padding: 0 !important;
	text-transform: none !important;
	transform: none !important;
	width: auto !important;
}

.elementor-form .iti__country-container button.iti__selected-country {
	align-items: center !important;
	cursor: pointer !important;
	display: flex !important;
	padding: 0 6px 0 10px !important;
}

/*
 * Geometry the library's own stylesheet normally provides. Repeated here so a
 * CSS optimiser that drops or defers intlTelInput.min.css cannot leave the
 * country button stranded below the field.
 */
.elementor-form .iti__selected-country-primary {
	align-items: center !important;
	display: flex !important;
	gap: 6px !important;
}

.elementor-form .iti__arrow {
	flex: 0 0 auto;
}

.elementor-form .iti__country-container button.iti__selected-country:hover,
.elementor-form .iti__country-container button.iti__selected-country:focus {
	background: none !important;
	color: inherit !important;
}

/* Elementor's kit typography can leak into the dropdown; keep it readable. */
.elementor-form .iti__country-list,
.elementor-form .iti__search-input {
	color: #1e1e1e;
	font-size: 14px;
	letter-spacing: normal;
	line-height: 1.4;
	text-align: left;
	text-transform: none;
}

.elementor-form .iti__country-list {
	background: #fff;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
	max-width: min(100vw - 32px, 360px);
}

.elementor-form .iti__country {
	padding: 8px 10px;
}

.elementor-form .iti__search-input {
	box-sizing: border-box !important;
	width: 100% !important;
}

/* Popups and modals stack above the default dropdown layer. */
.elementor-popup-modal .iti__country-container,
.elementor-popup-modal .iti__country-list {
	z-index: 10000;
}

.elementor-form .ppl-efss-error {
	color: #d63638;
	display: block;
	font-size: 0.85em;
	line-height: 1.4;
	margin-top: 6px;
	width: 100%;
}