/*
 * Phone Field with Country Code for Elementor — stylesheet.
 *
 * Principles:
 *  - Minimal. Let the theme / Elementor style the input itself.
 *  - Cache-safe. Avoid background sprites for anything the user always sees.
 *    Per-flag backgrounds are set inline by the JS; CSS stripped by
 *    WP-Rocket's "Remove Unused CSS" would still leave the flag working.
 *  - Render above Elementor popups. Dropdown z-index is higher than popup backdrop.
 */

/*
 * Disable the library's sprite background entirely.
 *
 * intl-tel-input v27 paints every .iti__flag from a webp sprite pointed at
 * by --iti-path-flags-1x/2x (default "../img/flags.webp" relative to the
 * library CSS). Two problems with that approach:
 *   1. Cache plugins (WP-Rocket "Remove Unused CSS", LiteSpeed CSS minifier)
 *      aggressively strip the offset rules that drive the sprite, so every
 *      flag ends up showing the same country — the root cause of the
 *      reference plugin's #1 support complaint.
 *   2. Sprite-layout mismatches between library versions cause the visible
 *      portion to land on the wrong flag.
 *
 * We kill the sprite background here with !important. country-code.js then
 * paints each .iti__flag element with its own per-country SVG inline — and
 * inline styles cannot be CSS-pruned by any cache plugin.
 */
.iti__flag {
	background-image: none !important;
	background-size: contain !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
	box-shadow: none !important;
}

/* Marker is a config-only element, never displayed. */
.pfcc-marker {
	display: none !important;
}

/* Keep the library wrapper filling the Elementor form field. */
.elementor-field-type-tel .iti {
	display: block;
	width: 100%;
}

.elementor-field-type-tel .iti__tel-input,
.elementor-field-type-tel .iti input[type="tel"] {
	width: 100%;
	box-sizing: border-box;
}

/* Dropdown must float above Elementor popup backdrops (z-index: 9999). */
.iti__country-list,
.iti__dropdown-content {
	z-index: 10001 !important;
}

/* ── Search Input Styling ──────────────────────────────────────────── */
.iti__search-input {
	padding: 10px 45px 10px 45px !important; /* Space for both icons */
	font-size: 14px;
	border: 1px solid #ddd !important;
	border-radius: 4px;
	outline: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
	width: 100% !important;
	box-sizing: border-box !important;
}

.iti__search-input:focus {
	border-color: #6c63ff !important;
	box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.1) !important;
}

.iti__search-input::placeholder {
	color: #999;
	opacity: 1;
}

/* Search wrapper padding */
.iti__search-input-wrapper {
	padding: 8px;
	background: #f9f9f9;
	border-bottom: 1px solid #e5e5e5 !important;
	position: relative;
}

/* Search icon positioning */
.iti__search-icon {
	position: absolute !important;
	left: 18px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	pointer-events: none;
	z-index: 1;
}

.iti__search-icon-svg {
	display: block;
	stroke: #666;
	stroke-width: 2;
}

/* Clear button styling */
.iti__search-clear {
	position: absolute !important;
	right: 18px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	opacity: 0.6;
	transition: opacity 0.2s ease, background-color 0.2s ease;
	padding: 4px !important;
	border-radius: 3px;
}

.iti__search-clear:hover {
	opacity: 1;
	background: rgba(0, 0, 0, 0.05) !important;
}

.iti__search-clear.iti__hide {
	display: none !important;
}

/* ── Country List Item Styling ─────────────────────────────────────── */
.iti__country {
	padding: 12px 16px !important;
	cursor: pointer;
	transition: background-color 0.15s ease;
	border-left: 0 !important; /* Remove colored border */
	display: flex;
	align-items: center;
	gap: 12px;
}

.iti__country:hover,
.iti__country.iti__highlight {
	background-color: #f5f5f5 !important; /* Light gray hover */
}

.iti__country:active {
	background-color: #ebebeb !important;
}

/* Country name text */
.iti__country-name {
	font-size: 14px;
	color: #333;
	flex: 1;
}

/* Dial code styling */
.iti__dial-code {
	color: #999;
	font-size: 14px;
	margin-left: auto;
}

/* Selected country checkmark */
.iti__country-check {
	color: #666 !important;
	opacity: 0.8;
}

/* Flag in country list */
.iti__country .iti__flag {
	flex-shrink: 0;
	margin-right: 0 !important;
}

/* ── Dropdown Container ────────────────────────────────────────────── */
.iti__dropdown-content {
	border-radius: 6px !important;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
	border: 1px solid #e0e0e0 !important;
	overflow: hidden;
}

.iti__country-list {
	max-height: 200px !important;
	scrollbar-width: thin;
	scrollbar-color: #ccc #f5f5f5;
}

/* Webkit scrollbar styling */
.iti__country-list::-webkit-scrollbar {
	width: 8px;
}

.iti__country-list::-webkit-scrollbar-track {
	background: #f5f5f5;
}

.iti__country-list::-webkit-scrollbar-thumb {
	background: #ccc;
	border-radius: 4px;
}

.iti__country-list::-webkit-scrollbar-thumb:hover {
	background: #999;
}

/* ── Selected Country Button ───────────────────────────────────────── */
.iti__selected-country {
	padding: 0 !important;
	transition: background-color 0.2s ease;
	border: none !important;
	background: transparent !important;
}

.iti__selected-country:hover {
	background-color: rgba(0, 0, 0, 0.03) !important;
}

.iti__selected-country:focus {
	outline: 2px solid #6c63ff;
	outline-offset: -2px;
}

/* Ensure flag has proper size */
.iti__flag {
	width: 20px !important;
	height: 15px !important;
	flex-shrink: 0;
}

/* ── No Results Message ────────────────────────────────────────────── */
.iti__no-results {
	padding: 20px !important;
	color: #999;
	font-size: 14px;
}

/* Inline error message shown beneath the input. */
.pfcc-error {
	display: none;
	margin-top: 6px;
	padding: 8px 12px;
	font-size: 0.875em;
	line-height: 1.4;
	color: #c0392b;
	background: #fef5f5;
	border-left: 3px solid #c0392b;
	border-radius: 4px;
	animation: pfcc-error-slide 0.3s ease;
}

@keyframes pfcc-error-slide {
	from {
		opacity: 0;
		transform: translateY(-5px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.pfcc-error.pfcc-error--visible {
	display: block;
}

/*
 * Ensure the flag area has a reasonable size regardless of theme overrides.
 * Inline styles from JS set the actual background-image; these rules just
 * guarantee the box the image paints into is visible.
 */
.iti__selected-flag,
.iti__selected-country,
.iti--separate-dial-code .iti__selected-flag {
	min-width: auto;
}

/* Prevent text overlap in main input */
.iti__tel-input::placeholder {
	color: #999;
	opacity: 1;
}

/* Override any theme styles that might interfere */
.iti input[type="tel"],
.iti input[type="text"] {
	padding-left: 95px !important;
}

.iti--separate-dial-code input[type="tel"],
.iti--separate-dial-code input[type="text"] {
	padding-left: 95px !important;
}

/* Ensure the input text starts after the prefix area */
.elementor-field-type-tel .iti__tel-input,
.elementor-field-type-tel .iti input[type="tel"] {
	width: 100%;
	box-sizing: border-box;
}

/* Arrow spacing */
.iti__arrow {
	margin-left: 6px !important;
}

/* ── Input Field Integration ───────────────────────────────────────── */
/* Base input styling */
.iti__tel-input {
	font-size: 14px;
	line-height: 1.5;
	box-sizing: border-box !important;
	padding-left: 95px !important; /* Unified padding for all cases */
}

/* When dial code is shown separately NEXT to the flag (not in input text) */
.iti--separate-dial-code .iti__tel-input {
	padding-left: 95px !important;
}

/* The dial code display next to flag */
.iti .iti__selected-dial-code {
	margin-left: 4px;
	padding-right: 4px;
	padding-bottom: 0px;
	font-size: 14px;
	color: #333;
	font-weight: 500;
	transition: color 0.2s ease;
}

.iti .iti__selected-dial-code:hover {
	color: var(--e-global-color-primary, #4a4a4a); /* Use Elementor primary color or fallback */
}

/* Flag container positioning */
.iti__country-container {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	padding: 1px;
}

/* Selected country button - contains flag + dial code */
.iti__selected-country-primary {
	padding: 0 8px 0 8px !important;
	display: flex;
	align-items: center;
	gap: 0;
	height: 100%;
}

/* Ensure proper spacing between flag and dial code */
.iti__selected-country .iti__flag {
	margin-right: 0 !important;
}

/* ── Arrow Indicator ───────────────────────────────────────────────── */
.iti__arrow {
	border-color: #666 !important;
	transition: transform 0.2s ease;
}

.iti__selected-country:hover .iti__arrow {
	border-color: #333 !important;
}

/* ── Responsive Adjustments ────────────────────────────────────────── */
@media (max-width: 768px) {
	.iti__country-list {
		max-height: 180px !important;
	}
	
	.iti__search-input {
		font-size: 16px !important; /* Prevent zoom on iOS */
	}
}

/* ── Focus States ──────────────────────────────────────────────────── */
.iti__tel-input:focus {
	outline: none;
	border-color: #6c63ff !important;
	box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.1) !important;
}

/* ── Loading State ─────────────────────────────────────────────────── */
.iti__loading {
	opacity: 0.6;
}

/* ── Accessibility ─────────────────────────────────────────────────── */
.iti__a11y-text {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}