/* =============================================================================
   COMBOBOX — campo digitabile con suggerimenti a tendina (v2)
   Caricato dal checkout (tpl/checkout.html) e da ogni template che usa
   assets/js/combobox.js: campi nazione (select[data-cbx="nazione"]) e comune
   (input[data-cbx="comune"]).

   Origine: la "PARTE 1 — BASE" del combobox.css del negozio di riferimento,
   ricolorata con i token v2 (oro al focus, carta per la riga evidenziata).
   La "PARTE 2" non serve: conviveva con un tema Bootstrap che qui non c'e'.
   I token stanno su :root con valori espliciti (non var(--gold)): la tendina
   viene agganciata a <body>, che non ha la classe .v2 dei token.
   ========================================================================== */

/* Le variabili stanno su :root e NON su .cbx. Non e' indifferente: la tendina
   viene agganciata a <body>, fuori dal wrapper, per sfuggire ai ritagli
   overflow:hidden dei contenitori. Dichiarate sul wrapper non verrebbero ereditate dal
   pannello, che resterebbe senza sfondo ne' bordo — cioe' illeggibile sopra il
   contenuto della pagina. */
:root {
    --cbx-bordo:        rgba(28, 27, 23, .2);
    --cbx-bordo-attivo: #aa964b;   /* oro v2 */
    --cbx-testo:        #1c1b17;
    --cbx-testo-tenue:  #57544c;   /* --text-soft: contrasto AA su bianco */
    --cbx-sfondo:       #fff;
    --cbx-evidenza:     #f4f2ed;   /* --paper: riga sotto il cursore */
    --cbx-errore:       #b3261e;
    --cbx-raggio:       .5rem;
    --cbx-ombra:        0 1px 2px rgba(28, 27, 23, .06), 0 12px 30px rgba(28, 27, 23, .16);
}

.cbx {
    position: relative;
    display: block;
}

/* Il controllo nativo resta nel DOM — porta name/value/required e tutti i
   listener gia' scritti altrove — ma esce dal flusso visivo. Si usa la tecnica
   "clip" e NON display:none / visibility:hidden: un campo required nascosto in
   quei due modi non e' focalizzabile, e il browser rifiuta l'invio del form con
   "An invalid form control is not focusable" senza dire altro all'utente. */
.cbx__native {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* -- Campo digitabile ------------------------------------------------------ */

.cbx__input {
    width: 100%;
    font-size: inherit;      /* segue i campi accanto */
    line-height: 1.4;
    color: var(--cbx-testo);
    background: var(--cbx-sfondo);
    border: 1px solid var(--cbx-bordo);
    border-radius: var(--cbx-raggio);
    padding: .75rem 2.75rem .75rem .9rem;   /* spazio a destra per la freccia */
    appearance: none;
}

.cbx__input::placeholder { color: var(--cbx-testo-tenue); opacity: 1; }

/* 16px e' la soglia sotto la quale iOS ingrandisce da solo la pagina quando si
   entra nel campo, e da li' non torna indietro: l'utente si ritrova il modulo
   fuori scala a meta' compilazione. Si impone solo dove il problema esiste
   davvero, cioe' sui puntatori grossolani (dita): su desktop il campo resta
   della stessa misura di quelli accanto. */
@media (pointer: coarse) {
    .cbx__input { font-size: 16px; }
}

.cbx__input:focus {
    outline: none;
    border-color: var(--cbx-bordo-attivo);
    box-shadow: 0 0 0 3px rgba(170, 150, 75, .2);
}

/* -- Freccia / pulsante di apertura ---------------------------------------- */

.cbx__toggle {
    position: absolute;
    top: 0;
    right: 0;
    /* Area di tocco piena altezza e larga 44px: linea guida Apple. Il glifo
       resta piccolo, ma il bersaglio no. */
    width: 44px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: none;
    color: var(--cbx-testo-tenue);
    cursor: pointer;
}

.cbx__toggle::before {
    content: "";
    width: 9px;
    height: 9px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform .15s ease;
}

.cbx.is-open .cbx__toggle::before {
    transform: translateY(2px) rotate(-135deg);
}

.cbx__toggle:focus-visible {
    outline: 2px solid var(--cbx-bordo-attivo);
    outline-offset: -4px;
    border-radius: var(--cbx-raggio);
}

/* Il campo libero (comuni) non ha una lista chiusa da sfogliare: la freccia
   prometterebbe un elenco che non c'e' finche' non si digita. */
.cbx--libero .cbx__toggle { display: none; }
.cbx--libero .cbx__input { padding-right: .9rem; }

/* -- Tendina ---------------------------------------------------------------
   position: fixed, non absolute, e collocata via JS: un elemento fixed non
   viene ritagliato dagli antenati con overflow:hidden (i riquadri del
   checkout lo hanno), quindi la tendina resta leggibile anche sull'ultimo
   campo in fondo alla pagina. */

.cbx__list {
    position: fixed;
    z-index: 1250;          /* sopra l'header fisso (1000) e la barra utente (1200), sotto i modali (1300) */
    margin: 0;
    padding: 4px;
    list-style: none;
    max-height: 280px;
    overflow-y: auto;
    overscroll-behavior: contain;   /* lo scroll non "sfonda" sulla pagina */
    -webkit-overflow-scrolling: touch;
    background: var(--cbx-sfondo);
    border: 1px solid var(--cbx-bordo);
    border-radius: var(--cbx-raggio);
    box-shadow: var(--cbx-ombra);
}

.cbx__list[hidden] { display: none; }

.cbx__opt {
    display: flex;
    align-items: baseline;
    gap: 8px;
    /* 44px di altezza effettiva: le voci sono adiacenti e si sbaglia bersaglio
       con facilita' sul touch. */
    min-height: 44px;
    padding: 10px 12px;
    border-radius: 4px;
    font-size: 15px;
    line-height: 1.3;
    color: var(--cbx-testo);
    cursor: pointer;
}

/* Una sola classe per mouse e tastiera: la riga "corrente" e' sempre la stessa,
   cosi' non si vedono mai due righe evidenziate insieme. */
.cbx__opt.is-active { background: var(--cbx-evidenza); }

.cbx__opt[aria-selected="true"] { font-weight: 600; }

/* Il nome della voce, in un unico elemento flex: il `gap` della riga deve
   separare il nome dalla sigla, non spezzare il nome stesso attorno al <mark>. */
.cbx__testo {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* La porzione di testo che corrisponde a quanto digitato. <mark> ha uno sfondo
   giallo di default: qui non serve, la corrispondenza si segnala col grassetto. */
.cbx__opt mark {
    background: none;
    color: inherit;
    font-weight: 700;
    padding: 0;
}

.cbx__hint {
    margin-left: auto;
    padding-left: 8px;
    font-size: 13px;
    color: var(--cbx-testo-tenue);
    white-space: nowrap;
}

.cbx__msg {
    padding: 12px;
    font-size: 14px;
    color: var(--cbx-testo-tenue);
}

/* -- Errore ---------------------------------------------------------------- */

.cbx.is-error .cbx__input {
    border-color: var(--cbx-errore);
    outline-color: var(--cbx-errore);
}

.cbx__error {
    display: none;
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.35;
    color: var(--cbx-errore);
}

.cbx.is-error .cbx__error { display: block; }

/* -- Preferenze utente ----------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .cbx__toggle::before { transition: none; }
}

@media (prefers-contrast: more) {
    :root { --cbx-bordo: #000; --cbx-testo-tenue: #000; }
    .cbx__opt.is-active { outline: 2px solid currentColor; outline-offset: -2px; }
}

/* Il campo eredita la classe del controllo originale (di norma .form-input):
   lo spazio per la freccia e l'aspetto non devono essere sovrascritti dalle
   regole dei campi della pagina, piu' specifiche di .cbx__input. */
.cbx .cbx__input.form-input {
    height: auto;
    padding-right: 2.75rem;
    background-image: none;
}

.cbx.cbx--libero .cbx__input.form-input {
    padding-right: .9rem;
}

/* Il controllo nativo nascosto ha di solito anche la classe dei campi della
   pagina (.form-input), le cui regole (larghezza 100%, padding) sono piu'
   specifiche e lo riallargherebbero: fuori schermo non si vede, ma a 360px
   allarga la pagina. Per un elemento "solo per lo screen reader" !important
   e' la scelta giusta: non deve mai poter tornare visibile. */
.cbx__native {
    width: 1px !important;
    height: 1px !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: -1px !important;
    border: 0 !important;
}