/**
 * Shared enquiry form (CF7, patterns/contact.php): theming for the self-hosted intl-tel-input
 * phone flags (assets/vendor/intl-tel-input, wired by assets/js/os-contact-form.js) to match the
 * dark .os-phone field, the honeypot field (inc/cf7-validations/cf7-validations.php) kept
 * off-screen rather than display:none so simple scrapers still fill it, and the live phone
 * error the JS shows. Loaded only on pages that have the form — os_interactive_styles() in
 * functions.php matches the os-contact class every os/contact-derived pattern carries.
 */

.os-phone {
	--iti-icon-color: #9a9a9a;
	--iti-flag-width: 20px;
	--iti-spacer-horizontal: 14px;
	--iti-country-selector-bg: var( --wp--preset--color--ink );
	--iti-hover-color: rgb( 255 255 255 / 0.08 );
	--iti-border-color: rgb( 255 255 255 / 0.12 );
}
/* The field box is drawn on .iti, not on .os-phone (os-theme.css): CF7's "Please fill out this
   field." tip and the live .os-phone__error both land inside .os-phone (CF7's wrap is
   display:contents), and as items of the 48px flex row they sat on top of the number. With
   .os-phone a plain block, they drop below the box like every other field's tip. Scoped to
   :has(.iti) so the old placeholder form still baked into some pages keeps its own box. */
.os-phone:has(.iti),
.os-phone:has(.iti):focus-within {
	display: block;
	height: auto;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
}
.os-phone .iti {
	display: flex;
	align-items: center;
	box-sizing: border-box;
	width: 100%;
	height: 48px;
	padding-right: 16px;
	border: 1px solid rgb( 255 255 255 / 0.08 );
	border-radius: 8px;
	background: rgb( 255 255 255 / 0.1 );
	transition: border-color var( --os-fast ) var( --os-ease ), background-color var( --os-fast ) var( --os-ease );
}
.os-phone .iti:focus-within { border-color: var( --wp--preset--color--sky ); background: rgb( 255 255 255 / 0.13 ); }
.os-phone .iti:has( input.wpcf7-not-valid, input.os-input--invalid ) { border-color: #ff6b6b; }
/* Other fields' tips are items of the .os-field column (8px gap + their 6px margin): match it. */
.os-phone:has(.iti) :is(.wpcf7-not-valid-tip, .os-phone__error) { margin-top: 14px; }
.os-phone .iti__country-container { border-right: 1px solid #000; }
/* intl-tel-input measures *this button's* rendered width via JS (not the container around it,
   confirmed with a CDP inspection of the live DOM — the container's own padding was being
   measured correctly for layout but had zero effect on the figure used to set the tel input's
   padding-left) and sets the tel input's padding-left inline to match it — so this button's own
   right padding is what actually separates "+91" from the typed/placeholder text. The vendor
   default instead relies on .iti__selected-country-primary's 7px right padding plus
   .iti__selected-dial-code's own 4px margin-left adding up to a gap — replaced with one explicit
   gap for the arrow-to-dial-code spacing, and padding-right here for the dial-code-to-input gap. */
.os-phone .iti__selected-country {
	gap: 8px;
	padding-right: 14px;
	color: #e0e0e0;
	font: 500 14px var( --wp--preset--font-family--body );
}
.os-phone .iti__selected-country-primary { padding: 0 0 0 14px; }
.os-phone .iti__selected-dial-code { margin-left: 0; color: #e0e0e0; }

/* The dropdown panel itself: a floating dark card, not touching the field, with the site's own
   "deep" shadow (same one the mega menu panel uses over a dark header) instead of intl-tel-input's
   own near-invisible default box-shadow. */
.os-phone .iti__country-selector {
	margin-top: 8px;
	border-radius: 10px;
	box-shadow: var( --wp--preset--shadow--deep );
	overflow: hidden;
}
.os-phone .iti__search-input-wrapper { padding: 14px 16px; }
/* The vendor CSS sets padding-left: inherit on this input specifically so it can reserve room
   for the search icon — meaning it inherits whatever padding-left the wrapper above has, not
   the icon's actual width. Our wrapper's own 16px padding (for the outer gap) was winning that
   inheritance and leaving nowhere near enough room, so the icon sat on top of the placeholder.
   Setting it explicitly here overrides the inherit. */
.os-phone .iti__search-input {
	height: 40px;
	padding-left: 40px;
	padding-right: 16px;
	border-radius: 8px;
	background: rgb( 255 255 255 / 0.08 );
	border: 1px solid rgb( 255 255 255 / 0.14 );
	color: var( --wp--preset--color--white );
	font: 500 14px var( --wp--preset--font-family--body );
}
/* left is relative to .iti__search-input-wrapper (the nearest positioned ancestor), not to the
   input it visually sits inside — the wrapper's own 16px padding means the input's rendered box
   only starts at 16px, so a left value under that puts the icon outside/overlapping the input's
   left border instead of inset within it (confirmed with a CDP inspection of the live DOM: icon
   at 12px landed 4px to the left of the input box it's meant to sit inside). 28px = the 16px
   wrapper padding the input box starts at, plus 12px of inset from the input's own border. */
.os-phone .iti__search-icon { left: 28px; }
.os-phone .iti__search-input::placeholder { color: #8a8a8a; }
/* intl-tel-input locks the dropdown's height inline, measured on a hidden copy appended to
   <body> — outside .os-phone, so with the vendor's 185px list instead of ours (219px in all). The
   bottom of our 272px list was clipped, and the selected country is scrolled to exactly there:
   United States was hidden on open. The list keeps a fixed height instead, so searching still
   doesn't make the dropdown jump (the reason for the lock). */
.os-phone .iti__country-selector { height: auto !important; }
.os-phone .iti__country-list {
	height: 272px;
	max-height: 272px;
	padding: 8px;
	scrollbar-width: thin;
	scrollbar-color: rgb( 255 255 255 / 0.25 ) transparent;
}
.os-phone .iti__country-list::-webkit-scrollbar { width: 8px; }
.os-phone .iti__country-list::-webkit-scrollbar-track { background: transparent; }
.os-phone .iti__country-list::-webkit-scrollbar-thumb {
	background: rgb( 255 255 255 / 0.2 );
	border-radius: 8px;
}
.os-phone .iti__country-list::-webkit-scrollbar-thumb:hover { background: rgb( 255 255 255 / 0.32 ); }
/* Each row as its own inset, rounded "pill" (margin on the <li> itself — consistent with the
   site's rounded-card language) instead of a flat edge-to-edge highlight bar. */
.os-phone .iti__country {
	margin: 2px 0;
	padding: 11px 12px;
	border-radius: 8px;
	font: 400 14px/1.3 var( --wp--preset--font-family--body );
	color: rgb( 255 255 255 / 0.9 );
}
.os-phone .iti__country:hover,
.os-phone .iti__country.iti__highlight { background: rgb( 255 255 255 / 0.08 ); }
.os-phone .iti__country-name { padding-right: 4px; }
.os-phone .iti__divider { border-bottom-color: rgb( 255 255 255 / 0.12 ); margin: 4px 4px 8px; padding-bottom: 8px; }

/* Live phone validation (assets/js/os-contact-form.js), same red as CF7's own .wpcf7-not-valid-tip. */
.os-phone__error { display: block; margin-top: 6px; font-size: 13px; font-weight: 500; color: #ff6b6b; }
.os-phone__error:empty { display: none; }
.os-field input.os-input--invalid,
.os-field input.os-input--invalid:focus { border-color: #ff6b6b; }

/* Honeypot: off-screen, not display:none, so simple scrapers still fill it in. */
.os-hp-field {
	position: absolute;
	left: -9999px;
	top: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}