/* Checkout phone box (intl-tel-input, wwwroot/lib/intl-tel-input).
   Loaded after the library's own CSS, so these win without !important.
   Plain CSS on purpose: site.css is committed Tailwind output and new utility
   classes do nothing (see tw-compat.css). */

/* The library makes its wrapper inline-block; the box should fill its column like
   every other field. */
.iti {
    display: block;
    width: 100%;
}

/* The inputs carry Tailwind's transition-all, so the room the library makes for the
   flag (its left padding) slid in on every page load. Animate only the colours. */
.iti input.iti__tel-input {
    transition-property: color, background-color, border-color, box-shadow;
}

/* Flag + "+1" in the same grey as the other fields' text, with a divider so it reads
   as part of the box and not as something already typed. */
.iti__selected-country {
    border-radius: .75rem 0 0 .75rem;
    border-right: 1px solid #e2e8f0;
    padding-right: .5rem;
}

.iti__selected-dial-code {
    color: #475569;
}

/* Above the sticky header and the pinned Pay bar on phones. */
.iti--detached-country-selector,
.iti--fullscreen-popup {
    z-index: 1000;
}