/* =============================================================================
   COMBOBOX — campo digitabile con suggerimenti a tendina
   Creato il 2026-08-03 per sostituire i <select> nazione e per suggerire i
   comuni negli indirizzi.

   COME cart.css e checkout.css, il file e' diviso in due parti e la divisione
   NON e' cosmetica:

   PARTE 1 — BASE. Il componente in quanto tale. Non sa nulla di questo sito:
             si appoggia solo alle variabili --cbx-* dichiarate qui sotto.
             Portabile in un progetto vanilla cosi' com'e'.

   PARTE 2 — ADATTAMENTI AL TEMA. Regole che esistono SOLO per convivere col
             tema di questo sito (RD Navbar) e coi due impianti di form gia'
             presenti (.form-wrap con label flottante, e il checkout a <p>).
             In un progetto nuovo non servono: NON vanno esportate.
   ========================================================================== */


/* =============================================================================
   PARTE 1 — BASE (portabile)
   ========================================================================== */

/* 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 del tema. Dichiarate sul wrapper non verrebbero ereditate dal
   pannello, che resterebbe senza sfondo ne' bordo — cioe' illeggibile sopra il
   contenuto della pagina. */
:root {
    --cbx-bordo:        #d5d5d5;
    --cbx-bordo-attivo: #2f4f4f;
    --cbx-testo:        #333;
    --cbx-testo-tenue:  #767676;   /* contrasto 4.54:1 su bianco: passa AA */
    --cbx-sfondo:       #fff;
    --cbx-evidenza:     #f0f4f4;   /* riga sotto il cursore */
    --cbx-errore:       #c0392b;
    --cbx-raggio:       6px;
    --cbx-ombra:        0 6px 20px rgba(0, 0, 0, .14);
}

.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: 12px 40px 12px 14px;   /* 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: 2px solid var(--cbx-bordo-attivo);
    outline-offset: -1px;
    border-color: var(--cbx-bordo-attivo);
}

/* -- 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: 14px; }

/* -- Tendina ---------------------------------------------------------------
   position: fixed, non absolute, e collocata via JS. Non e' un vezzo: in questo
   sito `div.page` ha overflow:hidden, che ritaglia i discendenti assoluti — lo
   stesso ostacolo che aveva gia' impedito a position:sticky di funzionare nel
   carrello. Un elemento fixed non viene ritagliato, quindi la tendina resta
   leggibile anche sull'ultimo campo in fondo alla pagina. */

.cbx__list {
    position: fixed;
    z-index: 1200;          /* sopra la navbar del tema, che sta a 1000 */
    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, e il tema gli assegna anche un colore proprio: qui non
   serve ne' l'uno ne' l'altro, 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; }
}


/* =============================================================================
   PARTE 2 — ADATTAMENTI AL TEMA (NON esportare)
   ========================================================================== */

/* [ANTI-TEMA] .form-wrap del tema posiziona una <label> in assoluto sopra il
   campo e la fa scorrere via al focus (LabelFadeOutForm.js). Sul combobox la
   label resterebbe stampata sopra il testo digitato, perche' quello script non
   conosce il nostro input. Il markup di partenza (.form-wrap-select) non ha
   label flottante, quindi qui basta garantire che il wrapper non erediti il
   posizionamento del select sostituito. */
.form-wrap .cbx,
.form-wrap-select .cbx { margin: 0; }

/* [ANTI-TEMA] style.css impone a .form-input un'altezza fissa e un
   border-radius diverso su alcune viste; il combobox deve restare coerente coi
   campi accanto, quindi eredita da .form-input invece di imporsi. */
.cbx .form-input.cbx__input {
    height: auto;
    min-height: 48px;
}

/* [ANTI-TEMA] Nel checkout i campi stanno dentro <p> con margini verticali
   propri: il wrapper non deve aggiungerne altri. */
.guestdata .cbx,
.checkout__form .cbx { margin: 0; }

/* [ANTI-TEMA] Il tema colora i <select> con una freccia di sfondo in
   background-image: sul nostro input diventerebbe una seconda freccia accanto
   a quella vera. */
.cbx__input { background-image: none; }
