/*
 * SBM Form: the international phone field.
 *
 * The box the visitor types in is the form's own .sbmf-input, so it needs
 * nothing here. This file dresses what the phone library adds around it — the
 * country button inside the box and the list of countries — in the form's look.
 *
 * That look arrives as variables, set by assets/phone.js from the input as the
 * page really drew it (so a theme's own input rules count too):
 *
 *   --sbmf-pop-bg      what is behind the input's text
 *   --sbmf-pop-text    the input's text color
 *   --sbmf-pop-border  the input's border color
 *   --sbmf-pop-radius  the input's corner radius
 *   --sbmf-pop-accent  the form's accent
 *
 * The flags are pictures and stay as they are.
 */
.sbmf-iti {
    --sbmf-pop-tint: color-mix(in srgb, var(--sbmf-pop-accent, var(--sbmf-accent, #2563eb)) 14%, transparent);
    --iti-country-selector-bg: var(--sbmf-pop-bg, #fff);
    --iti-border-color: var(--sbmf-pop-border, color-mix(in srgb, currentColor 30%, transparent));
    --iti-hover-color: var(--sbmf-pop-tint);
    --iti-icon-color: currentColor;
    --iti-spacer-horizontal: .75rem;
}
.sbmf .sbmf-iti {
    display: block;
    width: 100%;
}

/* The country button sits on the input, so it takes the input's text color and corners. */
.sbmf-iti .iti__selected-country {
    color: var(--sbmf-pop-text, inherit);
    cursor: pointer;
}
.sbmf-iti .iti__selected-country-primary {
    border-start-start-radius: calc(var(--sbmf-pop-radius, 6px) - 1px);
    border-end-start-radius: calc(var(--sbmf-pop-radius, 6px) - 1px);
}
.sbmf-iti .iti__selected-country:focus-visible {
    outline: 2px solid var(--sbmf-pop-accent, var(--sbmf-accent, #2563eb));
    outline-offset: -2px;
    border-radius: var(--sbmf-pop-radius, 6px);
}
.sbmf-iti .iti__arrow { opacity: .7; }

/* The list of countries: a panel in the input's colors. */
.sbmf-iti .iti__country-selector {
    overflow: hidden;
    font-size: .9375em;
    line-height: 1.4;
    text-align: start;
    color: var(--sbmf-pop-text, inherit);
    border-radius: min(var(--sbmf-pop-radius, 6px), 12px);
    box-shadow: 0 8px 24px rgb(0 0 0 / .16);
}
.sbmf-iti.iti--inline-country-selector:not(.iti--detached-country-selector) .iti__country-selector { margin-top: 4px; }
.sbmf-iti .iti__country-list { scrollbar-width: thin; }
.sbmf-iti .iti__country { padding-block: .5rem; }
.sbmf-iti .iti__dial-code { opacity: .65; }

/*
 * The search box is one more of the form's inputs, and looks like them. Only
 * its side padding is held here, against any theme, so the icons inside it
 * never sit on the text.
 */
.sbmf-iti .iti__search-input-wrapper { padding: .5rem; }
.sbmf-iti .iti__search-input.sbmf-input {
    min-height: 2.5rem;
    margin: 0;
    border-width: 1px;
    border-radius: min(var(--sbmf-pop-radius, 6px), 12px);
    padding-inline-start: 2.375rem !important;
    padding-inline-end: 2.25rem !important;
}
.sbmf-iti .iti__search-input.sbmf-input:focus { outline-offset: -2px; }
.sbmf-iti .iti__search-icon { inset-inline-start: 1.25rem; left: auto; right: auto; opacity: .6; }
.sbmf-iti .iti__search-clear { inset-inline-end: .875rem; left: auto; right: auto; color: inherit; }

/*
 * Over the whole page, on a phone. The panel is outside the form there, so the
 * form's variables are handed on for the search box to read.
 */
.sbmf-iti.iti--detached-country-selector {
    --sbmf-input-bg: var(--sbmf-pop-bg);
    --sbmf-input-text: var(--sbmf-pop-text);
    --sbmf-input-border: var(--sbmf-pop-border);
    --sbmf-radius: var(--sbmf-pop-radius);
    --sbmf-accent: var(--sbmf-pop-accent, #2563eb);
    color: var(--sbmf-pop-text, inherit);
}
.sbmf-iti.iti--fullscreen-popup .iti__country-selector { font-size: 1rem; }