/* lv-phone-intl.css — Liva design-system skin for intl-tel-input (international phone picker).
 *
 * Part 1 of the customer-phone project (HQ urgent): every phone field accepts every country's
 * number via a flag + searchable dial-code picker, with per-country validation. This file makes
 * the vendored intl-tel-input (common/css/vendor-intltelinput.css) match the Liva Design System:
 * the SAME tokens the storefront forms use (--lv-*), light + dark, LTR + RTL (logical properties).
 *
 * ⛔ No new brand values. Only the ruled tokens (border #E1E9EF, primary #0089CF / strong #006FA7,
 * surfaces, radius-md 10px, focus ring, danger). The wrapped <input> keeps its own .form-control /
 * .tx-input / .custinput skin — intl-tel-input only adds the country chrome, which this file themes. */

/* The plugin wraps the field; make the wrapper fill the grid cell like the bare input did. */
.iti { display: block; width: 100%; }
.iti > input[type="tel"],
.iti > input.form-control { width: 100%; }

/* Selected-country button (flag + dial code at the inline-start of the field). */
.iti__selected-country {
	border-start-start-radius: var(--lv-radius-md, 10px);
	border-end-start-radius: var(--lv-radius-md, 10px);
}
.iti__selected-country-primary { padding-inline: 10px 6px; }
.iti__selected-country:hover,
.iti--allow-dropdown .iti__selected-country:hover { background-color: var(--lv-surface-2, #F4F6F9); }
.iti__selected-dial-code { color: var(--lv-muted, #5B6B77); font-weight: 600; }
.iti__arrow { border-top-color: var(--lv-muted, #5B6B77); }
.iti__arrow--up { border-bottom-color: var(--lv-muted, #5B6B77); }

/* Keyboard focus on the country button uses the brand focus ring. */
.iti__selected-country:focus-visible,
.iti__selected-country-primary:focus-visible { outline: none; box-shadow: var(--lv-focus-ring, 0 0 0 3px rgba(0,137,207,.35)); border-radius: var(--lv-radius-md, 10px); }

/* The country dropdown panel — a Liva card surface. */
.iti__dropdown-content {
	background: var(--lv-bg, #FFFFFF);
	border: 1px solid var(--lv-border, #E1E9EF);
	border-radius: var(--lv-radius-md, 10px);
	box-shadow: var(--lv-shadow-brand-md, 0 8px 24px rgba(0,0,0,.12));
	color: var(--lv-primary-text, #16242f);
	overflow: hidden;
}

/* The search box inside the dropdown — matches a Liva field. */
.iti__search-input {
	border: 0;
	border-bottom: 1px solid var(--lv-border, #E1E9EF);
	padding: 10px 12px;
	font: inherit;
	color: inherit;
	background: var(--lv-bg, #FFFFFF);
}
.iti__search-input:focus { outline: none; box-shadow: inset 0 -2px 0 0 var(--lv-primary, #0089CF); }

/* Country rows. */
.iti__country { padding: 8px 12px; }
.iti__country.iti__highlight { background-color: var(--lv-surface-2, #F4F6F9); }
.iti__country-name { color: var(--lv-primary-text, #16242f); }
.iti__dial-code { color: var(--lv-muted, #5B6B77); }

/* Invalid state: when lv-phone-intl.js marks the field, tint the whole control like .input-error. */
.iti.lv-iti-invalid > input { border-color: var(--lv-danger, #C8402F) !important; }
.iti.lv-iti-invalid .iti__selected-country { border-color: var(--lv-danger, #C8402F); }

/* ── Dark mode: the --lv-* tokens are already re-defined under [data-theme="dark"], so most of the
 *    above follows automatically. These fix the few plugin defaults that hard-code a light value. */
[data-theme="dark"] .iti__dropdown-content { background: var(--lv-surface, #10212c); }
[data-theme="dark"] .iti__search-input { background: var(--lv-surface, #10212c); }
[data-theme="dark"] .iti__selected-country:hover,
[data-theme="dark"] .iti--allow-dropdown .iti__selected-country:hover,
[data-theme="dark"] .iti__country.iti__highlight { background-color: var(--lv-surface-2, #16303d); }

/* ── RTL (Arabic, built right-to-left): the plugin positions the country button with physical left.
 *    We only need to confirm the flag sits at the inline-start; logical radii above handle the rest. */
[dir="rtl"] .iti__selected-country-primary { padding-inline: 10px 6px; }