/* BoostronixX — lead form enhancements (project-core).
 *
 * Two jobs:
 *   1. Make intl-tel-input sit correctly inside the theme's floating-label
 *      fields (.field on contact-us, .bxfld in the popup + blog modal).
 *   2. Style the per-field inline validation messages.
 *
 * Lives in the plugin (not the theme's input.css) because that file is
 * regenerated by build_css.py and hand edits there would be overwritten.
 *
 * Checked against intl-tel-input v29.1.2: wrapper is .iti, the flag/dial-code
 * button lives in .iti__country-container (absolute, full height) wrapping
 * .iti__country-selector, and the country search box is an <input type=search>
 * rendered INSIDE the same field wrapper — which is what makes the theme's
 * `.field input` rules bleed into it.
 */

/* ---------------------------------------------------------------
 * 1. intl-tel-input inside a floating-label field
 *
 * The theme floats its label with `input:not(:placeholder-shown) ~ label`,
 * a sibling selector. intl-tel-input wraps the input in `<div class="iti">`,
 * which breaks that relationship — and the library sets its own placeholder
 * (a per-country example number), so `:placeholder-shown` would be false on
 * an empty field anyway. So the label is pinned to its floated position and
 * stays at the field's normal left edge, like every other label on the form.
 * ------------------------------------------------------------- */

/* .iti defaults to inline-block; the fields are full-width. */
.bx-iti-field .iti {
	display: block;
	width: 100%;
}

/* The grey block behind the flag is the library's hover state on the country
 * button — and it also fires while the dropdown itself is hovered, so it stays
 * lit the whole time the list is open. Removed; the pointer cursor is enough
 * affordance. Only this button is touched: the highlight on the country LIST
 * rows uses the same --iti-hover-color and must keep working, which is why the
 * variable itself is left alone.
 *
 * NOTE: do NOT "fix" a stray background by setting --iti-country-selector-bg.
 * Despite the name, .iti__country-selector is the DROPDOWN PANEL (it holds the
 * search box and the country list), not the flag button — blanking it makes
 * the panel transparent and the form behind it shows through. */
.bx-iti-field .iti__selected-country-primary,
.bx-iti-field .iti__selected-country-primary:hover {
	background-color: transparent !important;
}

/* Popup + blog modal: pin the label to the same floated state the theme uses
 * for a filled .bxfld. (On .field the JS reuses the theme's own `float`
 * class, so no equivalent block is needed there.)
 *
 * The #hpPop / #bpModal prefixes are REQUIRED, not decoration: the theme's
 * resting rule is `#hpPop .bxfld label` — an ID, so specificity (1,1,1). A
 * plain `.bxfld.bx-iti-field > label` is only (0,2,1) and loses, which left
 * the label sitting on top of the flag and dial code. */
#hpPop .bxfld.bx-iti-field > label,
#bpModal .bxfld.bx-iti-field > label {
	top: .32rem;
	font-size: .62rem;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--accent, #fa5539);
	font-weight: 600;
}

/* The country button is absolutely positioned over the full field height, but
 * the input's text sits lower because of the floating-label top padding.
 * These offsets re-centre the flag + dial code on the text itself, and keep
 * the button clear of the label above it. */
.field.bx-iti-field .iti__country-container {
	padding-top: .95rem; /* .field padding is 1.5rem top / .55rem bottom */
}

.bxfld.bx-iti-field .iti__country-container {
	padding-top: .7rem; /* .bxfld padding is 1.1rem top / .4rem bottom */
}

/* The country dropdown renders INSIDE the .field / .bxfld wrapper, and the
 * theme styles every <input> in there (1rem radius, 1.5rem top padding, white
 * fill, accent focus ring). The search box is an <input type="search">, so it
 * inherited all of it and rendered as a big outlined box with the magnifier
 * sitting on top of the placeholder. The theme's selectors are more specific
 * than the library's, so this reset is deliberately !important — it undoes
 * foreign CSS rather than competing with it. The horizontal padding is
 * restored to the library's own calc so the text clears the search and clear
 * icons (--iti-spacer-horizontal 10px, --iti-globe-icon-size 17px,
 * --iti-clear-icon-size 15px). */
.iti input.iti__search-input,
.iti input.iti__search-input:focus {
	width: 100%;
	border: 0 !important;
	border-radius: 3px !important;
	padding-top: 8px !important;
	padding-bottom: 8px !important;
	padding-left: calc(var(--iti-spacer-horizontal) + var(--iti-globe-icon-size) + var(--iti-spacer-horizontal)) !important;
	padding-right: calc(var(--iti-spacer-horizontal) + var(--iti-clear-icon-size) + var(--iti-spacer-horizontal)) !important;
	background: #fff !important;
	box-shadow: none !important;
	font-family: inherit;
	font-size: .9rem !important;
	min-height: 0 !important;
}

/* ---------------------------------------------------------------
 * 1b. "Service needed" select in the lead popup
 *
 * The theme only styles `#hpPop .bxfld input, #hpPop .bxfld textarea` — there
 * was no select in the popup until the service field was added — so the box,
 * the floated label and the chevron are set up here to match the popup's other
 * fields exactly. Same ID-specificity caveat as above: the theme's resting
 * label rule is `#hpPop .bxfld label` at (1,1,1), so the floated override
 * needs the ID too.
 * ------------------------------------------------------------- */
#hpPop .bxfld select {
	width: 100%;
	border: 1px solid var(--color-line, #e6e1da);
	border-radius: .85rem;
	padding: 1.1rem 2.2rem .4rem .9rem;
	background: #fff;
	outline: none;
	font-family: inherit;
	font-size: .9rem;
	color: var(--ink, #0a0a0a);
	transition: border-color .2s ease, box-shadow .2s ease;
	appearance: none;
}

#hpPop .bxfld select:focus {
	border-color: var(--accent, #fa5539);
	box-shadow: 0 0 0 4px rgba(250, 85, 57, .12);
}

/* Permanently floated label, matching a filled .bxfld. */
#hpPop .bxfld.float > label {
	top: .32rem;
	font-size: .62rem;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--accent, #fa5539);
	font-weight: 600;
}

#hpPop .bxfld .chev {
	position: absolute;
	right: .9rem;
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
	color: #8a8276;
}

/* ---------------------------------------------------------------
 * 2. Inline per-field validation messages
 * ------------------------------------------------------------- */
.bx-field-error {
	display: block;
	margin-top: .4rem;
	font-size: .75rem;
	font-weight: 500;
	line-height: 1.4;
	color: var(--accent, #fa5539);
}

/* Red outline on the offending control. */
.bx-invalid input,
.bx-invalid select,
.bx-invalid textarea,
input.bx-invalid,
select.bx-invalid,
textarea.bx-invalid {
	border-color: var(--accent, #fa5539) !important;
}

/* ...but never on the country-search box inside the dropdown. */
.bx-iti-field .iti input.iti__search-input {
	border-color: transparent !important;
}

/* The consent checkbox is a bare <label>, not a .field wrapper. */
.bx-invalid-check {
	color: var(--accent, #fa5539);
}