/**
 * Hooma Phone Input - Premium Design & CSS Variables System
 */

/* 1. Base Variables & Geometry (Light Mode Defaults on :root) */
:root {
	--phone-height: 42px;
	--phone-radius: 8px;
	--phone-padding: 0 14px;
	--phone-flag-size: 20px;
	--phone-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	--phone-font-size: 14px;
	--phone-line-height: 1.5;
	--phone-z-index: 999999;

	/* Default Base Palette (Light Mode) */
	--phone-bg: #ffffff;
	--phone-text-color: #0f172a;
	--phone-placeholder-color: #919191;
	--phone-border-color: #e4e4e4;
	--phone-border: 1px solid var(--phone-border-color);
	--phone-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);

	--phone-focus-border: rgb(145, 145, 145);
	--phone-focus-ring: 0 0 0 3px rgba(99, 102, 241, 0.15);
	--phone-divider-color: #e2e8f0;

	--phone-dropdown-bg: #ffffff;
	--phone-dropdown-text: #0f172a;
	--phone-dropdown-border: #e2e8f0;
	--phone-dropdown-radius: 10px;
	--phone-dropdown-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
	--phone-dropdown-hover: rgb(0 0 0 / 4%);
	--phone-dropdown-active: #e2e8f0;
	--phone-search-bg: #f8fafc;
	--phone-search-border: #cbd5e1;
	--phone-search-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");

	/* Validation States (Universal) */
	--phone-valid-border: #10b981;
	--phone-valid-ring: 0 0 0 3px rgba(16, 185, 129, 0.15);
	--phone-invalid-border: #ef4444;
	--phone-invalid-ring: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

/* 2. Light Theme Overrides (Explicit Light) */
.iti[data-theme="light"],
[data-phone-theme="light"] .iti,
[data-theme="light"] .iti {
	--phone-bg: #ffffff;
	--phone-text-color: #4e4e4e;
	--phone-placeholder-color: #919191;
	--phone-border-color: #e4e4e4;
	--phone-border: 1px solid var(--phone-border-color);
	--phone-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);

	--phone-focus-border: rgb(145, 145, 145);
	--phone-focus-ring: 0 0 0 3px rgba(99, 102, 241, 0.15);
	--phone-divider-color: #e2e8f0;

	--phone-dropdown-bg: #ffffff;
	--phone-dropdown-text: #0f172a;
	--phone-dropdown-border: #e2e8f0;
	--phone-dropdown-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
	--phone-dropdown-hover: rgb(0 0 0 / 4%);
	--phone-dropdown-active: #e2e8f0;
	--phone-search-bg: #f8fafc;
	--phone-search-border: #cbd5e1;
	--phone-search-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
}

/* 3. Dark Theme Overrides (Explicit Dark & Dark Container Ancestor) */
.iti[data-theme="dark"],
[data-phone-theme="dark"] .iti,
.dark .iti,
[data-theme="dark"] .iti {
	--phone-bg: #0f172a;
	--phone-text-color: #f8fafc;
	--phone-placeholder-color: #919191;
	--phone-border-color: #334155;
	--phone-border: 1px solid var(--phone-border-color);
	--phone-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3);

	--phone-focus-border: #818cf8;
	--phone-focus-ring: 0 0 0 3px rgba(129, 140, 248, 0.25);
	--phone-divider-color: #334155;

	--phone-dropdown-bg: #1e293b;
	--phone-dropdown-text: #f8fafc;
	--phone-dropdown-border: #334155;
	--phone-dropdown-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5);
	--phone-dropdown-hover: #334155;
	--phone-dropdown-active: #475569;
	--phone-search-bg: #0f172a;
	--phone-search-border: #475569;
	--phone-search-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
}

/* 4. Auto Mode: Prefers Dark Scheme ONLY when theme is 'auto' AND container is in dark mode */
@media (prefers-color-scheme: dark) {
	.iti[data-theme="auto"],
	[data-phone-theme="auto"] .iti {
		--phone-bg: #0f172a;
		--phone-text-color: #f8fafc;
		--phone-placeholder-color: #919191;
		--phone-border-color: #334155;
		--phone-border: 1px solid var(--phone-border-color);
		--phone-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3);

		--phone-focus-border: #818cf8;
		--phone-focus-ring: 0 0 0 3px rgba(129, 140, 248, 0.25);
		--phone-divider-color: #334155;

		--phone-dropdown-bg: #1e293b;
		--phone-dropdown-text: #f8fafc;
		--phone-dropdown-border: #334155;
		--phone-dropdown-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5);
		--phone-dropdown-hover: #334155;
		--phone-dropdown-active: #475569;
		--phone-search-bg: #0f172a;
		--phone-search-border: #475569;
		--phone-search-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
	}
}

/* 5. Base Container Override */
.iti {
	display: inline-flex !important;
	position: relative;
	width: 100%;
	font-family: var(--phone-font-family);
	box-sizing: border-box;
}

.iti--allow-dropdown {
	width: 100%;
}

/* Input Field Base Layout (Always Active) */
.iti input[type="tel"],
.iti input.phone-input {
	box-sizing: border-box !important;
}

/* Visual Input Styling (Only Active when custom styles are NOT disabled) */
.iti:not(.iti--no-custom-styles) input[type="tel"],
.iti:not(.iti--no-custom-styles) input.phone-input {
	display: block;
	width: 100% !important;
	height: var(--phone-height, 42px);
	line-height: normal;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	padding-right: 14px !important;
	padding-left: 14px !important;
	font-size: var(--phone-font-size, 14px);
	font-family: var(--phone-font-family);
	color: var(--phone-text-color);
	background-color: var(--phone-bg);
	border: var(--phone-border);
	border-radius: var(--phone-radius);
	box-shadow: var(--phone-shadow);
	outline: none;
	transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.2s ease, color 0.2s ease;
}

.iti:not(.iti--no-custom-styles) input[type="tel"]::placeholder,
.iti:not(.iti--no-custom-styles) input.phone-input::placeholder {
	color: var(--phone-placeholder-color);
	opacity: 1;
}

/* Focus State for Unified Control */
.iti:not(.iti--no-custom-styles) input[type="tel"]:focus,
.iti:not(.iti--no-custom-styles) input.phone-input:focus {
	box-shadow: var(--phone-focus-ring);
}

/* Flag & Dial Code Container */
.iti__country-container {
	padding: 0 !important;
	top: 0 !important;
	bottom: 0 !important;
	right: auto !important;
}

.iti__selected-country-primary,
.iti__selected-country-primary:hover {
	background-color: transparent !important;
}

.iti__selected-country {
	height: calc(100% - 2px) !important;
	padding: 0 12px 0 8px !important;
	border-top-left-radius: inherit;
	border-bottom-left-radius: inherit;
	background-color: transparent !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 4px !important;
	margin: 1px !important;
	cursor: pointer !important;
	position: relative !important;
	transition: background-color 0.2s ease-in-out !important;
}

.iti__selected-country:hover,
.iti__selected-country:focus,
.iti__selected-country[aria-expanded="true"] {
	background-color: var(--phone-dropdown-hover) !important;
}

.iti__selected-country::after {
	content: "" !important;
	position: absolute !important;
	right: 0 !important;
	top: 20% !important;
	bottom: 20% !important;
	width: 1px !important;
	background-color: var(--phone-divider-color) !important;
}

.iti__selected-dial-code {
	font-weight: 500 !important;
	font-size: 13px !important;
	color: var(--phone-text-color) !important;
	margin-left: 0 !important;
}

.iti__arrow {
	display: inline-block !important;
	width: 0 !important;
	height: 0 !important;
	border-left: 4px solid transparent !important;
	border-right: 4px solid transparent !important;
	border-top: 4px solid var(--phone-text-color) !important;
	border-bottom: none !important;
	margin-left: 4px !important;
	opacity: 0.7 !important;
	transition: transform 0.2s ease !important;
}

.iti__arrow--up,
.iti__selected-country[aria-expanded="true"] .iti__arrow {
	border-top: 4px solid var(--phone-text-color) !important;
	border-bottom: none !important;
	transform: rotate(180deg) !important;
}

.iti__hide,
.iti__dropdown-content .iti__hide,
.iti__country-list li.iti__hide,
.iti__country-list li[hidden],
.iti__country-list li[style*="display: none"] {
	display: none !important;
	visibility: hidden !important;
	opacity: 0 !important;
	height: 0 !important;
	min-height: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	border: none !important;
	overflow: hidden !important;
}

/* Dropdown Menu Styling (Explicit Background & Text Alignment) */
.iti__dropdown-content {
	position: absolute !important;
	z-index: var(--phone-z-index) !important;
	margin-top: 6px !important;
	background-color: var(--phone-dropdown-bg) !important;
	border: 1px solid var(--phone-dropdown-border) !important;
	box-shadow: var(--phone-dropdown-shadow) !important;
	overflow: hidden !important;
	color: var(--phone-dropdown-text) !important;
	width: 320px !important;
	max-width: 90vw !important;
}

.iti__search,
.iti__search-input-wrapper {
	position: relative !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}

.iti__search-input {
	display: block !important;
	width: 100% !important;
	padding: 10px 14px 10px 34px !important;
	background-color: var(--phone-search-bg) !important;
	background-image: var(--phone-search-icon) !important;
	background-repeat: no-repeat !important;
	background-position: 10px center !important;
	background-size: 16px 16px !important;
	border: none !important;
	border-bottom: 1px solid var(--phone-dropdown-border) !important;
	font-size: 13px !important;
	color: var(--phone-dropdown-text) !important;
	outline: none !important;
	box-sizing: border-box !important;
}

.iti__search-icon {
	color: var(--phone-placeholder-color) !important;
	opacity: 0.8 !important;
}

.iti__search-input::placeholder {
	color: var(--phone-placeholder-color) !important;
	opacity: 0.8 !important;
}

.iti__country-list {
	max-height: 220px !important;
	overflow-y: auto !important;
	list-style: none !important;
	margin: 0 !important;
	padding: 6px 0 !important;
	background-color: var(--phone-dropdown-bg) !important;
	color: var(--phone-dropdown-text) !important;
	scrollbar-width: thin !important;
	scrollbar-color: var(--phone-border-color) transparent !important;
}

.iti__country-list::-webkit-scrollbar {
	width: 6px;
}

.iti__country-list::-webkit-scrollbar-thumb {
	background-color: var(--phone-border-color);
	border-radius: 3px;
}

.iti__country {
	padding: 8px 14px !important;
	font-size: 13px !important;
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	cursor: pointer !important;
	background-color: var(--phone-dropdown-bg) !important;
	color: var(--phone-dropdown-text) !important;
	transition: background-color 0.15s ease, color 0.15s ease !important;
}

.iti__country.iti__hide,
.iti__country[hidden],
.iti__country[style*="display: none"] {
	display: none !important;
}

.iti__country:hover,
.iti__country.iti__highlight {
	background-color: var(--phone-dropdown-hover) !important;
	color: var(--phone-dropdown-text) !important;
}

.iti__country.iti__active {
	background-color: var(--phone-dropdown-active) !important;
	color: var(--phone-dropdown-text) !important;
	font-weight: 600 !important;
}

.iti__country-name {
	flex-grow: 1 !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	color: var(--phone-dropdown-text) !important;
}

.iti__dial-code {
	color: var(--phone-placeholder-color) !important;
	font-size: 12px !important;
}

/* Validation Styling */
.iti.is-valid input[type="tel"],
input[type="tel"].is-valid {
	border-bottom-color: var(--phone-valid-border) !important;
}

.iti.is-invalid input[type="tel"],
input[type="tel"].is-invalid {
	border-bottom-color: var(--phone-invalid-border) !important;
}

.iti.is-invalid input[type="tel"]:focus,
input[type="tel"]:focus {
	border-color: var(--phone-focus-border) !important;
}

/* Integration with Contact Form 7 */
.wpcf7-form-control-wrap {
	display: block !important;
	position: relative !important;
	width: 100% !important;
}

.wpcf7-form-control-wrap .iti {
	width: 100% !important;
}

.wpcf7-form-control-wrap .wpcf7-not-valid-tip {
	margin-top: 4px !important;
	font-size: 12px !important;
	color: var(--phone-invalid-border, #ef4444) !important;
	display: block !important;
}