/* =========================================================
   Searchable dial-code dropdown - the phone field used by every form on the
   site (includes/phone-field.php, assets/js/dialbox.js).

   Loaded by the component itself, once per page, so it works on pages that
   do not share a stylesheet (the wizard, the ordinary forms, the landing
   page in its own folder).

   Colours read the registration wizard's tokens where they exist, so inside
   .rw the field keeps the wizard's palette, and fall back to the main site's
   values everywhere else. The native <select> stays in the DOM as the value
   that posts; the toggle replaces it on screen once the script has run.
   ========================================================= */

.phone-field {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.phone-field > input[type="tel"] {
    flex: 1 1 auto;
    min-width: 0;
}

/* Script off: the plain <select> is still usable, just not searchable. */
.phone-field > select.phone-field__code {
    flex: 0 0 140px;
    min-width: 0;
}

.dialbox {
    position: relative;
    flex: 0 0 112px;
    display: flex;
}

.dialbox .dialbox__native {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.dialbox__toggle {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    text-align: left;
    cursor: pointer;
}

/* The toggle wears whichever input class its form uses, so it takes that
   class's colour: a fixed one would be dark-on-dark inside .contact-form,
   whose .form-control is translucent white on oxford. */
.dialbox__toggle b { font-weight: 600; color: inherit; }
.dialbox__toggle i { font-size: .75rem; color: currentColor; opacity: .6; }

.dialbox__toggle:focus-visible {
    outline: 2px solid var(--rw-primary, #9A694E);
    outline-offset: 1px;
}

.dialbox__panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 1080;                 /* above a Bootstrap modal's 1055 */
    width: 20rem;
    max-width: 78vw;
    padding: 10px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid var(--rw-line, #DDD7CB);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .14);
}

.dialbox__search {
    width: 100%;
    margin-bottom: 8px;
    padding: .55rem .75rem;
    font: inherit;
    font-size: .92rem;
    color: var(--rw-ink, #26303B);
    background: #fff;
    border: 1px solid var(--rw-line, #DDD7CB);
    border-radius: 8px;
}

.dialbox__search:focus {
    outline: none;
    border-color: var(--rw-primary, #9A694E);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--rw-primary, #9A694E) 15%, transparent);
}

.dialbox__list {
    max-height: 15rem;
    overflow-y: auto;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dialbox__item {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: .5rem .6rem;
    border-radius: 8px;
    font-size: .92rem;
    color: var(--rw-ink, #26303B);
    cursor: pointer;
}

.dialbox__item b { flex: 0 0 3.6rem; font-weight: 700; color: var(--rw-primary, #9A694E); }
.dialbox__item span { flex: 1 1 auto; }

.dialbox__item:hover,
.dialbox__item.is-active {
    background: color-mix(in srgb, var(--rw-primary, #9A694E) 9%, #fff);
}

.phone-field__error {
    margin: 6px 0 0;
    font-size: .82rem;
    color: #C62828;
}

/* A dark form surface: the error line has to carry its own colour, because
   style.css sets `p { color: var(--text-body) }` with --text-body black. */
.phone-field__error:empty { display: none; }

@media (max-width: 420px) {
    .dialbox { flex-basis: 96px; }
    .dialbox__panel { width: calc(100vw - 48px); }
}