/**
 * tarbut-forms-fields.css
 *
 * Tweaks layered on top of intl-tel-input's stock CSS plus Google Places
 * autocomplete dropdown z-index. Loaded via Field_Enhancements.php after
 * intlTelInput.min.css.
 */

/* Override the library's flag/globe sprite paths because in some browsers
 * CSS custom properties referencing url() resolve relative to the *use*
 * stylesheet rather than the *definition* stylesheet. The library's
 * `:root { --iti-path-flags-1x: url("../img/flags.webp") }` resolves
 * correctly only when consumed inside intlTelInput.min.css. When OUR CSS
 * file (one directory level different) consumes the same variable, the URL
 * gets re-resolved relative to our file and 404s.
 *
 * We re-declare the vars with paths relative to THIS file (one level up
 * from `assets/css/` → `assets/vendor/intl-tel-input/img/`).
 */
:root {
	--iti-path-flags-1x: url( "../vendor/intl-tel-input/img/flags.webp" );
	--iti-path-flags-2x: url( "../vendor/intl-tel-input/img/flags@2x.webp" );
	--iti-path-globe-1x: url( "../vendor/intl-tel-input/img/globe.webp" );
	--iti-path-globe-2x: url( "../vendor/intl-tel-input/img/globe@2x.webp" );
}

/* -----------------------------------------------------------------------
 * intl-tel-input — match dooble's input styling
 *
 * IMPORTANT: wpforms-compat.css contains a global reset
 *   div.wpforms-container-full * {
 *     background:none; border:0 none; height:auto; position:static;
 *     width:auto; padding:0; box-shadow:none; ...
 *   }
 * which clobbers nearly every visual rule the library sets on its child
 * elements (flag background image, country-container absolute positioning,
 * arrow borders, dropdown box-shadow, etc.). We re-apply the library's
 * defaults below with higher specificity so the wpforms reset doesn't win.
 *
 * The `div.wpforms-container-full .iti X` selector beats the wpforms
 * `div.wpforms-container-full *` reset in specificity (more class tokens).
 * ----------------------------------------------------------------------- */

/* Restore the library's container positioning. */
div.wpforms-container-full .iti,
.tarbut-form .iti {
	position: relative !important;
	display: inline-block;
	width: 100%;
}

div.wpforms-container-full .iti .iti__country-container,
.tarbut-form .iti .iti__country-container {
	position: absolute !important;
	top: 0 !important;
	bottom: 0 !important;
	height: auto;
	padding: var( --iti-border-width, 1px ) !important;
	/* Lift above the sibling input. The library's default z-index:1 on
	 * .iti__selected-country isn't enough because the input has
	 * position:relative + z-index:0 (creating its own stacking context),
	 * so we anchor the elevation on the .iti__country-container instead. */
	z-index: 2 !important;
}

/* The input. wpforms-compat caps `.wpforms-field-medium` at max-width:60%
 * which leaves a huge gap between the input and the .iti container's
 * left edge — pushing the flag dropdown outside the input. Reset to 100%
 * for tel inputs the library has wrapped, since the .iti container
 * already constrains the visual width. */
.tarbut-form .iti input.iti__tel-input,
.wpforms-container .iti input.iti__tel-input,
div.wpforms-container-full .iti input.iti__tel-input {
	width: 100%;
	max-width: 100% !important;
	box-sizing: border-box;
	display: block;
}

/* Match prod's .iti width — constrained to wpforms-field-medium 60% so the
 * field doesn't visually dwarf the others. The input inside fills 100% of
 * this constrained container. */
div.wpforms-container-full .iti,
.wpforms-container .iti {
	max-width: 60%;
}

/* Mobile: drop max-width to 100% (matches wpforms-compat's responsive
 * breakpoint). */
@media (max-width: 600px) {
	div.wpforms-container-full .iti,
	.wpforms-container .iti {
		max-width: 100%;
	}
}

/* Selected country button — flex layout for flag + dial code + arrow. */
div.wpforms-container-full .iti .iti__selected-country,
.tarbut-form .iti .iti__selected-country {
	display: flex !important;
	align-items: center;
	height: 100% !important;
	background: 0 0;
	border: 0;
	margin: 0;
	padding: 0 !important;
	font-family: inherit;
	font-size: inherit;
	color: inherit;
}

div.wpforms-container-full .iti .iti__selected-country-primary,
.tarbut-form .iti .iti__selected-country-primary {
	display: flex !important;
	align-items: center;
	height: 100% !important;
	padding: 0 var( --iti-arrow-padding, 6px ) 0 var( --iti-spacer-horizontal, 8px ) !important;
}

/* Flag sprite background — wpforms reset wipes `background:none` (the
 * shorthand resets ALL sub-properties including background-position) on
 * every child. Restore each piece of the library's flag sprite styling. */
div.wpforms-container-full .iti .iti__flag,
.tarbut-form .iti .iti__flag {
	width: var( --iti-flag-width, 16px ) !important;
	height: var( --iti-flag-height, 12px ) !important;
	background-image: var( --iti-path-flags-1x ) !important;
	background-repeat: no-repeat !important;
	background-position: var( --iti-flag-offset, 100px ) 0 !important;
	background-size: var( --iti-flag-sprite-width, 3904px ) var( --iti-flag-sprite-height, 12px ) !important;
	border-radius: 1px;
	box-shadow: 0 0 1px 0 #888 !important;
}

@media only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and (min-resolution: 192dpi) {
	div.wpforms-container-full .iti .iti__flag,
	.tarbut-form .iti .iti__flag {
		background-image: var( --iti-path-flags-2x ) !important;
	}
}

/* Arrow icon (CSS triangle made of borders — wpforms reset wipes border:0). */
div.wpforms-container-full .iti .iti__arrow,
.tarbut-form .iti .iti__arrow {
	margin-left: var( --iti-arrow-padding, 6px );
	width: 0;
	height: 0;
	border-left: var( --iti-triangle-border, 3px ) solid transparent !important;
	border-right: var( --iti-triangle-border, 3px ) solid transparent !important;
	border-top: var( --iti-arrow-height, 4px ) solid var( --iti-arrow-color, #555 ) !important;
}

/* Dial code text. */
div.wpforms-container-full .iti .iti__selected-dial-code,
.tarbut-form .iti .iti__selected-dial-code {
	color: inherit;
	font-size: inherit;
}

/* Dropdown content — needs absolute positioning, box-shadow, border. */
div.wpforms-container-full .iti--inline-dropdown .iti__dropdown-content,
.tarbut-form .iti--inline-dropdown .iti__dropdown-content {
	position: absolute !important;
	z-index: 100000 !important;
	margin-top: 3px;
	border: var( --iti-border-width, 1px ) solid var( --iti-border-color, #ccc ) !important;
	box-shadow: 1px 1px 4px rgba( 0, 0, 0, 0.2 ) !important;
	background-color: var( --iti-dropdown-bg, white );
	width: auto;
}

div.wpforms-container-full .iti .iti__country-list,
.tarbut-form .iti .iti__country-list {
	max-height: 185px;
	list-style: none;
	padding: 0 !important;
	margin: 0 !important;
	overflow-y: auto;
}

div.wpforms-container-full .iti .iti__country,
.tarbut-form .iti .iti__country {
	display: flex !important;
	align-items: center;
	padding: 8px var( --iti-spacer-horizontal, 8px ) !important;
}

div.wpforms-container-full .iti .iti__country-name,
.tarbut-form .iti .iti__country-name {
	margin-right: var( --iti-spacer-horizontal, 8px );
}

/* Search input inside dropdown. */
div.wpforms-container-full .iti .iti__search-input,
.tarbut-form .iti .iti__search-input {
	width: 100%;
	padding-left: 30px !important;
	padding-right: 28px !important;
}

/* Dropdown above any other form chrome (popups/modals included). */
.iti__country-list {
	z-index: 100000 !important;
}

/* -----------------------------------------------------------------------
 * RTL — anchor flag dropdown to the RIGHT of the input (intl-tel-input is
 * LTR-first; in our Hebrew forms the layout flips and the flag should sit
 * on the right with separateDialCode).
 *
 * intl-tel-input v25 already handles dir="rtl" reasonably, but our form
 * containers don't always carry dir, so target by html[dir="rtl"] /
 * .tarbut-form direction explicitly.
 * ----------------------------------------------------------------------- */

/* In RTL we anchor the flag to the visual LEFT of the input (per user
 * preference 2026-04-26). The library's stock RTL behavior puts the
 * country-container at right:0; override to left:0 so the flag/dial-code
 * appears at the LEFT edge regardless of text direction. The library v25
 * only flips via the `dir="rtl"` attribute on the .iti element — the page
 * itself sets `direction: rtl` via CSS only, so the JS in
 * tarbut-forms-fields.js sets `dir="rtl"` on the .iti at init time. */
.iti[dir="rtl"] .iti__country-container,
div.wpforms-container-full .iti[dir="rtl"] .iti__country-container {
	right: auto !important;
	left: 0 !important;
}

/* In RTL with the flag at left:0, the input needs left-padding (to clear
 * the flag) and zero right-padding. The JS surfaces the library-applied
 * padding amount via the --tf-iti-flag-padding CSS variable. */
.iti[dir="rtl"] input.iti__tel-input,
div.wpforms-container-full .iti[dir="rtl"] input.iti__tel-input {
	padding-right: 0 !important;
	padding-left: var(--tf-iti-flag-padding, 56px) !important;
}

/* Ensure dial-code / phone-number text matches input font-size — the
 * library defaults to inheriting, but specificity wars with wpforms-compat
 * can leave the dial-code stuck at a smaller size. */
.iti .iti__selected-dial-code,
div.wpforms-container-full .iti .iti__selected-dial-code,
.tarbut-form .iti .iti__selected-dial-code {
	font-size: inherit !important;
	font-family: inherit !important;
	color: inherit !important;
}

/* Position the country-list dropdown contents in RTL. */
.iti[dir="rtl"] .iti__country-list,
.iti[dir="rtl"] .iti__country {
	direction: rtl;
	text-align: right;
}

/* In RTL the iti__country list items need their flag/name swapped sides. */
.iti[dir="rtl"] .iti__country .iti__flag {
	margin-right: 0;
	margin-left: var( --iti-spacer-horizontal, 8px );
}

/* -----------------------------------------------------------------------
 * Google Places autocomplete — z-index above popup/modal forms
 * ----------------------------------------------------------------------- */

.pac-container {
	/* dooble's yBox popup uses z-index in the 9000s — beat it. */
	z-index: 100001 !important;
}

/* RTL: align dropdown items right. */
html[dir="rtl"] .pac-container .pac-item,
html[dir="rtl"] .pac-container .pac-item-query {
	text-align: right;
	direction: rtl;
}