/**
 * Avada Forms telephone field enhancement overrides.
 * Works with intl-tel-input for flags and validation.
 * These rules fix theme conflicts so the country list appears as a dropdown, not inline.
 */
.xpv-phone-error {
	display: block;
	color: #d10000;
	font-size: 0.9em;
	margin-top: 4px;
}

/* Wrapper: full width and positioning context for dropdown */
.iti {
	display: block;
	width: 100%;
	position: relative;
}

.iti input[type="tel"],
.iti input[type="text"] {
	width: 100%;
}

/* Flag container: visible and positioned on the left (or right for RTL) */
.iti .iti__flag-container {
	display: block !important;
	position: absolute !important;
	top: 0 !important;
	bottom: 0 !important;
	right: 0 !important;
	z-index: 999 !important;
	padding: 1px !important;
	visibility: visible !important;
}

/* Selected flag: visible clickable area */
.iti .iti__selected-flag {
	display: flex !important;
	align-items: center !important;
	height: 100% !important;
	padding: 0 6px 0 8px !important;
	cursor: pointer !important;
	position: relative !important;
	z-index: 1 !important;
	visibility: visible !important;
}

/* Flag icon itself */
.iti .iti__flag {
	display: inline-block !important;
	width: 20px !important;
	height: 15px !important;
	visibility: visible !important;
}

/* Dropdown arrow */
.iti .iti__arrow {
	display: inline-block !important;
	margin-left: 6px !important;
	width: 0 !important;
	height: 0 !important;
	border-left: 3px solid transparent !important;
	border-right: 3px solid transparent !important;
	border-top: 4px solid #555 !important;
	visibility: visible !important;
}

/* When dropdown is open, arrow points up */
.iti .iti__arrow.iti__arrow--up {
	border-top: none !important;
	border-bottom: 4px solid #555 !important;
}

/* For allow-dropdown mode: flag container on left */
.iti.iti--allow-dropdown .iti__flag-container,
.iti.iti--separate-dial-code .iti__flag-container {
	right: auto !important;
	left: 0 !important;
}

/* Input padding to make room for flag on left */
.iti.iti--allow-dropdown input[type="tel"],
.iti.iti--allow-dropdown input[type="text"],
.iti.iti--separate-dial-code input[type="tel"],
.iti.iti--separate-dial-code input[type="text"] {
	padding-left: 52px !important;
	padding-right: 6px !important;
}

/* Hide country list by default (theme/Avada often override .iti__hide) */
.iti .iti__country-list.iti__hide {
	display: none !important;
	visibility: hidden !important;
}

/* Country list: overlay dropdown below the field, not inline above it */
.iti .iti__country-list {
	display: none;
	position: absolute !important;
	left: 0 !important;
	top: 100% !important;
	z-index: 1060 !important;
	list-style: none !important;
	margin: 0 0 0 -1px !important;
	padding: 0 !important;
	min-width: 260px;
	max-height: 200px;
	overflow-y: auto;
	background: #fff !important;
	border: 1px solid #ccc !important;
	box-shadow: 1px 4px 8px rgba(0, 0, 0, 0.15) !important;
	-webkit-overflow-scrolling: touch;
}

/* Show list only when plugin removes iti__hide (dropdown open) */
.iti .iti__country-list:not(.iti__hide) {
	display: block !important;
	visibility: visible !important;
}

/* Dropup variant when there's no space below */
.iti .iti__country-list.iti__country-list--dropup {
	top: auto !important;
	bottom: 100% !important;
	margin-bottom: -1px !important;
}

/* Single country row */
.iti .iti__country {
	display: flex !important;
	align-items: center;
	padding: 6px 10px;
	cursor: pointer;
	outline: none;
}
.iti .iti__country:hover,
.iti .iti__country.iti__highlight {
	background-color: rgba(0, 0, 0, 0.05) !important;
}
.iti .iti__dial-code {
	color: #999;
	margin-left: 4px;
}

/* Optional: match Avada input height */
.fusion-form-form-wrapper .iti input[type="tel"],
.avada-form-form-wrapper .iti input[type="tel"] {
	box-sizing: border-box;
}