/*!
 * gf-intl-phone.css
 *
 * Plugin overrides for intl-tel-input inside Gravity Forms' built-in
 * Phone field, plus a Bootstrap 5.3.x compatibility layer.
 *
 * The intl-tel-input core stylesheet (intlTelInput.css) is enqueued
 * separately; this file only layers fixes on top of it.
 *
 * NOTE ON FLAG SIZE: intl-tel-input v25 flags are a single raster PNG
 * sprite. Each country's flag is positioned by a fixed pixel offset
 * (multiples of 16px) baked into the core CSS. Because of that, the
 * flags CANNOT be enlarged with a CSS transform or by changing only the
 * size variables without the sprite offsets drifting out of alignment
 * (and a transform-based scale visibly BLURS the raster image).
 *
 * We therefore keep flags at their native 16x12 size — which is sharp —
 * and rely on the bundled @2x retina sprite for crispness on HiDPI
 * displays. This is the standard intl-tel-input flag size.
 *
 * Bootstrap version targeted: 5.3.8
 */

/* ------------------------------------------------------------------
 * Flag presentation & clarity
 *
 * intl-tel-input v25 flags are a fixed 16x12 raster sprite — they
 * cannot be enlarged without blurring, and the sprite itself is
 * supplied inline as a data URI by the plugin (see flag-sprites.php),
 * so it is always the correct, full-resolution image.
 *
 * What we CAN do for a cleaner, clearer look — matching how
 * intl-tel-input.com itself presents flags — is refine the framing:
 * a crisp hairline border, a soft shadow so the flag reads as a
 * distinct chip rather than blending into the field, gently rounded
 * corners, and the sharpest possible raster downscaling.
 * --------------------------------------------------------------- */

.iti__flag {
	/* The @2x sprite is downscaled to display size; smooth rendering
	 * (the default) gives the sharpest, cleanest result. crisp-edges /
	 * optimize-contrast would harshly alias a downscaled image, so we
	 * explicitly keep auto. */
	image-rendering: auto;
	/* A clean hairline frame + soft lift, so the flag is a crisp chip. */
	border-radius: 2px;
	box-shadow:
		0 0 0 0.5px rgba( 0, 0, 0, 0.16 ),
		0 1px 1.5px rgba( 0, 0, 0, 0.18 );
}

/* Selected-country flag: a touch more breathing room from the dial
 * code, and vertically centred against the input. */
.iti__selected-country .iti__flag {
	margin-right: 6px;
}

/* Dropdown rows: give each flag clear separation from the country
 * name so the list is easy to scan. */
.iti__country .iti__flag {
	margin-right: 10px;
}

/* ------------------------------------------------------------------
 * Wrapper layout
 * --------------------------------------------------------------- */

.ginput_container_phone .iti {
	display: block;
	width: 100%;
}

.gf-intl-phone-input.iti__tel-input,
.ginput_container_phone .iti__tel-input {
	width: 100%;
	border-radius: var( --bs-border-radius, 0.375rem ) !important;
}

.iti__flag-container {
	box-sizing: content-box;
}

/* ------------------------------------------------------------------
 * Country dropdown — override Bootstrap list-group leakage
 * --------------------------------------------------------------- */

.iti__country-list,
.iti__dropdown-content {
	border: 1px solid var( --bs-border-color, #dee2e6 );
	border-radius: var( --bs-border-radius, 0.375rem );
	background-color: var( --bs-body-bg, #fff );
	color: var( --bs-body-color, #212529 );
	z-index: 1056; /* above Bootstrap modal backdrop (z-index 1055) */
	box-shadow: 0 0.5rem 1rem rgba( 0, 0, 0, 0.15 );
}

.iti__country-list {
	padding: 0.25rem 0;
	margin: 0;
	max-height: 260px;
	overflow-y: auto;
}

/* Comfortable, scannable dropdown rows. */
.iti__country {
	padding: 0.4rem 0.85rem;
	line-height: 1.3;
}

.iti__country.iti__highlight {
	background-color: var( --bs-primary-bg-subtle, #cfe2ff );
}

/* Dial code in the list — muted so the country name leads. */
.iti__country .iti__dial-code {
	color: var( --bs-secondary-color, #6c757d );
}

/* Country search box (v25 countrySearch). */
.iti__search-input {
	padding: 0.5rem 0.75rem;
	border: 0;
	border-bottom: 1px solid var( --bs-border-color, #dee2e6 );
	width: 100%;
}

/* ------------------------------------------------------------------
 * Validity indicator (✓ / ✗)
 *
 * The JS appends <span class="gf-intl-phone-validity"> inside the .iti
 * wrapper and toggles .is-valid-mark / .is-invalid-mark on it.
 * --------------------------------------------------------------- */

.iti.gf-intl-phone-has-validity .iti__tel-input {
	padding-right: 2.5rem; /* room so the mark never overlaps the text */
}

.gf-intl-phone-validity {
	position: absolute;
	top: 50%;
	right: 0.75rem;
	width: 1.15rem;
	height: 1.15rem;
	transform: translateY( -50% );
	pointer-events: none;
	z-index: 3;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	opacity: 0;
	transition: opacity 0.15s ease;
}

.gf-intl-phone-validity.is-valid-mark {
	opacity: 1;
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23198754'%3E%3Cpath d='M13.485 1.929a1 1 0 0 1 .086 1.411l-7 8a1 1 0 0 1-1.49.02l-3-3.2a1 1 0 1 1 1.458-1.368l2.243 2.392 6.282-7.18a1 1 0 0 1 1.411-.085z'/%3E%3C/svg%3E" );
}

.gf-intl-phone-validity.is-invalid-mark {
	opacity: 1;
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23dc3545'%3E%3Cpath d='M3.5 3.5a1 1 0 0 1 1.414 0L8 6.586l3.086-3.086a1 1 0 1 1 1.414 1.414L9.414 8l3.086 3.086a1 1 0 0 1-1.414 1.414L8 9.414l-3.086 3.086A1 1 0 0 1 3.5 11.086L6.586 8 3.5 4.914a1 1 0 0 1 0-1.414z'/%3E%3C/svg%3E" );
}

/* ------------------------------------------------------------------
 * Bootstrap validation states
 * --------------------------------------------------------------- */

.gf-intl-phone-input.is-invalid {
	border-color: var( --bs-danger, #dc3545 );
	background-image: none;
}

.gf-intl-phone-input.is-valid {
	border-color: var( --bs-success, #198754 );
	background-image: none;
}

.gfield_error .gf-intl-phone-input.iti__tel-input {
	border-color: var( --bs-danger, #dc3545 );
}

/* ------------------------------------------------------------------
 * Separate dial code
 * --------------------------------------------------------------- */

.iti--separate-dial-code .iti__selected-dial-code {
	color: var( --bs-body-color, #212529 );
}