/* SPDX-License-Identifier: LicenseRef-TigerHosting-Proprietary
 * Copyright (c) 2026 WebTigers. Tiger™, TigerHosting™ and WebTigers™ are trademarks of WebTigers.
 *
 * intl-tel-input theming for the order funnel — make the registrant phone widget MODE-AWARE by mapping
 * the library's own CSS variables (and the few surfaces it hardcodes) onto the live Bootstrap tokens, so
 * the country dropdown is legible in both light and dark. No hardcoded colors, no inline styles.
 *
 * The dropdown is appended to <body> (not inside the funnel container), so the --iti-* overrides live on
 * :root — CSS variables inherit from :root down to the body-appended dropdown, and the --bs-* tokens are
 * already redefined per mode by the theme (data-bs-theme). Loaded after the vendored intlTelInput.css so
 * these win. */

/* Fill the grid column like a normal form control (the widget defaults to inline-block, which left the
 * phone detached from / misaligned with the Country select sharing its row). */
.iti { width: 100%; }

:root {
    --iti-dropdown-bg:    var(--bs-body-bg);
    --iti-border-color:   var(--bs-border-color);
    --iti-dialcode-color: var(--bs-secondary-color);
    --iti-arrow-color:    var(--bs-secondary-color);
    --iti-hover-color:    var(--bs-secondary-bg);
}

/* Inherit the body font so the widget matches the form (not a larger/other face). */
.iti,
.iti__dropdown-content,
.iti__search-input,
.iti__country { font-size: inherit; font-family: inherit; }

/* Country list + the selected flag/code: the library doesn't expose these as vars, so bind them to the
 * mode-aware text tokens (the washed-out names were inheriting the dark-theme light text onto a white bg). */
.iti__dropdown-content   { color: var(--bs-body-color); }
.iti__country-name       { color: var(--bs-body-color); }
.iti__dial-code          { color: var(--bs-secondary-color); }
.iti__country.iti__highlight { background-color: var(--bs-secondary-bg); }
.iti__selected-dial-code { color: var(--bs-body-color); }

/* Search box at the top of the dropdown. */
.iti__search-input {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    border-bottom: 1px solid var(--bs-border-color);
}
.iti__search-input::placeholder { color: var(--bs-secondary-color); opacity: 1; }