/* ═══════════════════════════════════════════════════════════════════════════
   Noleggio — sito

   I COLORI sono un "template" da personalizzare: ogni sito imposta le
   variabili pubbliche --noleggio-* (per esempio su :root, nel tema); qui
   sotto quelle interne --nol-* le prendono, coi colori di partenza:
     --noleggio-azione (+ -scuro, -chiaro)   azioni e scelte fatte: Cerca,
                                              Continua, giorni scelti, card
                                              e caselle selezionate (verde)
     --noleggio-marchio (+ -scuro, -chiaro)  il colore del marchio: link,
                                              pulsanti secondari, etichette
                                              (rosso)
     --noleggio-occupato                      giorni già prenotati (rosso)
     --noleggio-cornice                       cornice della ricerca (giallo)
   ═══════════════════════════════════════════════════════════════════════════ */

.nol-pagina,
.nol-ricerca,
.nol-sedi,
.nol-flotta-blocco,
.nol-sospese,
.nol-account {
    --nol-azione: var(--noleggio-azione, #008009);
    --nol-azione-scuro: var(--noleggio-azione-scuro, #006607);
    --nol-azione-chiaro: var(--noleggio-azione-chiaro, #f0fdf4);
    --nol-marchio: var(--noleggio-marchio, #b91c1c);
    --nol-marchio-scuro: var(--noleggio-marchio-scuro, #991b1b);
    --nol-marchio-chiaro: var(--noleggio-marchio-chiaro, #fef2f2);
    --nol-occupato: var(--noleggio-occupato, #b91c1c);
    /* Nome di prima, per chi l'ha usato: il colore del marchio */
    --nol-accento: var(--noleggio-marchio, #b91c1c);
    --nol-accento-scuro: var(--noleggio-marchio-scuro, #991b1b);
    --nol-bordo: #e5e7eb;
    --nol-testo: #1f2937;
    --nol-tenue: #6b7280;
}

.nol-pagina {
    --nol-sfondo: #f9fafb;
    --nol-promo: #b91c1c;
    --nol-promo-sfondo: #fef2f2;

    padding: 32px 16px 64px;
    background: var(--nol-sfondo);
    color: var(--nol-testo);
}

/* Larga come il contenuto dell'intestazione del tema (.container: larghezza
   del tema meno 1rem per lato), così pagine e blocchi del noleggio si
   allineano al logo e al menu anche se nel tema la larghezza cambia */
.nol-contenitore { max-width: calc(var(--container-max-width, 1280px) - 2rem); margin: 0 auto; }
.nol-titolo { font-size: 28px; font-weight: 700; margin: 0 0 20px; }

/* ── Ricerca (stile Rentalcars) ───────────────────────────────────────────
   Una cornice colorata (--nol-cornice) con dentro i campi bianchi affiancati:
   luogo, data e ora di ritiro, data e ora di riconsegna, "Cerca". Colori
   regolabili dal blocco del page builder con le variabili qui sotto. */
.nol-ricerca {
    /* Anche fuori dalla pagina /noleggio (nel blocco) ha i suoi colori (sopra) */
    --nol-cornice: var(--noleggio-cornice, #febb02);
    --nol-cerca: var(--noleggio-azione, #008009);
    --nol-cerca-scuro: var(--noleggio-azione-scuro, #006607);
    --nol-sotto-testo: #1f2937;
    position: relative;
    color: #1a1a1a;
}
.nol-ricerca--scuro { --nol-sotto-testo: #fff; }

.nol-ricerca-riga {
    display: grid;
    grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.25fr) minmax(0, .85fr) minmax(0, 1.25fr) minmax(0, .85fr) auto;
    gap: 4px;
    padding: 4px;
    border-radius: 8px;
    background: var(--nol-cornice);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
}
.nol-ricerca-riga.is-altrove {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.6fr) minmax(0, 1.15fr) minmax(0, .8fr) minmax(0, 1.15fr) minmax(0, .8fr) auto;
}
.nol-ricerca-riga [hidden] { display: none; }

/* Un campo: icona a sinistra, etichetta piccola sopra, valore sotto */
.nol-f {
    position: relative;
    min-width: 0;
    height: 56px;
    border-radius: 4px;
    background: #fff;
}
.nol-f-etichetta {
    position: absolute;
    top: 8px;
    left: 44px;
    right: 8px;
    font-size: 12px;
    line-height: 1.2;
    color: #595959;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}
.nol-f-campo,
.nol-f-apri {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 24px 28px 6px 44px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: #1a1a1a;
    font: inherit;
    font-size: 15px;
    line-height: 1.3;
    text-align: left;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}
.nol-f-apri { position: absolute; inset: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 8px; }
.nol-f-campo:focus-visible,
.nol-f-apri:focus-visible { outline: 2px solid var(--nol-azione); outline-offset: -2px; }
.nol-f select.nol-f-campo {
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23595959' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center;
    text-overflow: ellipsis;
}
.nol-f-ora select.nol-f-campo { padding-right: 22px; background-position: right 6px center; }
.nol-f input[type="date"].nol-f-campo { padding-right: 8px; }

/* Le icone, disegnate con un'immagine SVG (niente file in più) */
.nol-f-icona {
    position: absolute;
    top: 50%;
    left: 12px;
    width: 22px;
    height: 22px;
    margin-top: -11px;
    background: no-repeat center / 22px 22px;
    pointer-events: none;
}
.nol-f-icona--luogo { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1a1a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M20 20l-4.8-4.8'/%3E%3C/svg%3E"); }
.nol-f-icona--data { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1a1a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4.5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 9.5h18M8 2.5v4M16 2.5v4'/%3E%3C/svg%3E"); }
.nol-f-icona--ora { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1a1a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }

.nol-ricerca-cerca {
    min-width: 110px;
    height: 56px;
    padding: 0 24px;
    border: 0;
    border-radius: 4px;
    background: var(--nol-cerca);
    color: #fff;
    font: inherit;
    font-size: 17px;
    font-weight: 700;
    cursor: pointer;
}
.nol-ricerca-cerca:hover { background: var(--nol-cerca-scuro); filter: brightness(.95); }

.nol-ricerca-sotto { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 12px; }
/* "Riconsegna in un'altra sede" e l'avviso delle date spostate: stessa
   pillola, con un fondo scuro velato che le rende leggibili sulla foto */
.nol-pillola,
.nol-ricerca-nota {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 6px;
    background: rgb(0 0 0 / 43%);
    color: var(--nol-sotto-testo);
    font-size: 14px;
    font-weight: 500;
}
.nol-pillola { cursor: pointer; }
.nol-ricerca:not(.nol-ricerca--scuro) .nol-pillola,
.nol-ricerca:not(.nol-ricerca--scuro) .nol-ricerca-nota { background: #fff; border: 1px solid var(--nol-bordo, #e5e7eb); }
.nol-pillola input { width: 18px; height: 18px; margin: 0; accent-color: var(--nol-azione); }
.nol-ricerca-nota { margin: 0; font-weight: 600; }
.nol-ricerca-nota[hidden] { display: none; }

/* Il secondo "Cerca", dopo le caselle: solo quando il modulo va su più righe */
.nol-ricerca-cerca--sotto { display: none; }
.nol-ricerca--stretta .nol-ricerca-riga .nol-ricerca-cerca { display: none; }
.nol-ricerca--stretta .nol-ricerca-cerca--sotto { display: block; width: 100%; margin-top: 12px; }
@media (max-width: 1023px) {
    .nol-ricerca-riga .nol-ricerca-cerca { display: none; }
    .nol-ricerca-cerca--sotto { display: block; width: 100%; margin-top: 12px; }
}

/* Risultati sul telefono: la ricerca fatta chiusa in un riassunto con "Modifica" */
.nol-riassunto-ricerca {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border: 3px solid #febb02;
    border-radius: 8px;
    background: #fff;
}
.nol-riassunto-ricerca[hidden] { display: none; }
.nol-riassunto-testo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nol-riassunto-testo strong { font-size: 15px; overflow-wrap: anywhere; }
.nol-riassunto-testo span { font-size: 13px; color: var(--nol-tenue, #6b7280); text-transform: capitalize; }
.nol-riassunto-modifica {
    flex: none;
    padding: 8px 14px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #fff;
    color: var(--nol-testo, #1f2937);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
@media (max-width: 759px) {
    .nol-ricerca-box.is-chiusa { display: none; }
}
@media (min-width: 760px) {
    .nol-riassunto-ricerca { display: none !important; }
}

/* Tablet: luogo su una riga, date e ore sotto, "Cerca" a tutta larghezza */
@media (max-width: 1023px) {
    .nol-ricerca-riga,
    .nol-ricerca-riga.is-altrove { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .nol-f-sede { grid-column: span 4; }
    .nol-ricerca-riga.is-altrove .nol-f-sede { grid-column: span 2; }
    .nol-ricerca-cerca { grid-column: 1 / -1; }
}
/* Telefono: come Rentalcars, data e ora affiancate */
@media (max-width: 639px) {
    .nol-ricerca-riga,
    .nol-ricerca-riga.is-altrove { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .nol-f-sede,
    .nol-ricerca-riga.is-altrove .nol-f-sede { grid-column: 1 / -1; }
}

/* ── Blocco "Ricerca noleggio" del page builder (hero con la foto) ─────── */
.nol-hero {
    position: relative;
    display: flex;
    align-items: center;
    padding: 48px 16px 40px;
    background: var(--nol-hero-sfondo, #1f2937);
    color: #fff;
}
.nol-hero--media { min-height: 60vh; }
.nol-hero--alta { min-height: 88vh; }
/* La foto sta in un livello a parte: il blocco non taglia il calendario */
.nol-hero-foto { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.nol-hero-foto img { width: 100%; height: 100%; object-fit: cover; }
.nol-hero-foto::after {
    content: "";
    position: absolute;
    inset: 0;
    background: #000;
    opacity: var(--nol-hero-oscura, .35);
}
.nol-hero-contenuto { position: relative; z-index: 1; width: 100%; max-width: calc(var(--container-max-width, 1280px) - 2rem); margin: 0 auto; }
.nol-hero-titolo { margin: 0 0 12px; font-size: clamp(28px, 4.2vw, 48px); line-height: 1.12; font-weight: 800; color: #fff; }
.nol-hero-sotto { margin: 0 0 12px; font-size: clamp(16px, 1.8vw, 20px); color: rgba(255, 255, 255, .95); }
.nol-hero-punti { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0 0 24px; padding: 0; list-style: none; }
.nol-hero-punti li {
    position: relative;
    padding-left: 26px;
    font-size: clamp(15px, 1.5vw, 18px);
    color: #fff;
}
.nol-hero-punti li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 18px;
    height: 18px;
    margin-top: -9px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E") no-repeat center / contain;
}
@media (max-width: 639px) {
    .nol-hero { padding: 28px 16px 28px; }
    .nol-hero--media, .nol-hero--alta { min-height: 0; }
}

/* ── Il calendario ────────────────────────────────────────────────────────── */
.nol-cal[hidden] { display: none; }
.nol-cal {
    position: absolute;
    z-index: 60;
    top: 64px;
    left: 0;
    width: min(740px, 100%);
    color: var(--nol-testo, #1f2937);
}
.nol-cal-pannello {
    position: relative;
    padding: 18px 20px 16px;
    border: 1px solid var(--nol-bordo);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 18px 48px rgba(15, 23, 42, .18);
}
.nol-cal-testa { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.nol-cal-titolo { margin: 0; font-size: 17px; font-weight: 700; }
.nol-cal-chiudi {
    width: 36px; height: 36px; border: 0; border-radius: 50%;
    background: #f3f4f6; color: var(--nol-testo); font-size: 22px; line-height: 1; cursor: pointer;
}
.nol-cal-riepilogo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0 4px; }
.nol-cal-scheda {
    display: flex; flex-direction: column; align-items: flex-start;
    min-width: 150px; padding: 8px 14px;
    border: 1px solid #d1d5db; border-radius: 10px; background: #fff;
    font: inherit; cursor: pointer; text-align: left;
}
.nol-cal-scheda.is-attiva { border-color: var(--nol-azione); box-shadow: 0 0 0 2px var(--nol-azione) inset; }
.nol-cal-scheda-etichetta { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--nol-tenue); }
.nol-cal-scheda-data { font-size: 15px; font-weight: 600; }
.nol-cal-durata { margin-left: auto; font-size: 14px; font-weight: 600; color: var(--nol-azione-scuro); }
.nol-cal-nav { display: flex; justify-content: space-between; margin: 8px 0 -34px; position: relative; z-index: 1; pointer-events: none; }
.nol-cal-freccia {
    pointer-events: auto;
    width: 34px; height: 34px; border: 1px solid var(--nol-bordo); border-radius: 50%;
    background: #fff; font-size: 20px; line-height: 1; cursor: pointer;
}
.nol-cal-freccia:disabled { opacity: .3; cursor: default; }
.nol-cal-mesi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.nol-cal-mese-titolo { height: 34px; line-height: 34px; text-align: center; font-weight: 700; text-transform: capitalize; }
.nol-cal-settimana,
.nol-cal-griglia { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.nol-cal-settimana span { padding: 6px 0; text-align: center; font-size: 12px; color: var(--nol-tenue); text-transform: capitalize; }
.nol-cal-giorno {
    position: relative;
    height: 42px;
    margin: 1px 0;
    border: 0;
    background: transparent;
    color: var(--nol-testo);
    font: inherit;
    font-size: 14px;
    cursor: pointer;
}
.nol-cal-giorno:hover:not([aria-disabled="true"]) { background: #eef2ff; border-radius: 50%; }
.nol-cal-giorno:focus-visible { outline: 2px solid var(--nol-azione); outline-offset: -2px; border-radius: 50%; }
.nol-cal-giorno[aria-disabled="true"] { color: #c0c4cc; cursor: default; }
.nol-cal-giorno.is-spento { text-decoration: line-through; }
.nol-cal-giorno.is-oggi::after {
    content: ""; position: absolute; left: 50%; bottom: 5px;
    width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: currentColor;
}
.nol-cal-giorno.is-intervallo { background: #dcfce7; border-radius: 0; color: var(--nol-azione-scuro); }
.nol-cal-giorno.is-inizio,
.nol-cal-giorno.is-fine { background: var(--nol-azione); color: #fff; border-radius: 50%; font-weight: 700; }
.nol-cal-piede {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--nol-bordo);
}
.nol-cal-legenda { font-size: 13px; color: var(--nol-tenue); }
.nol-cal-legenda-spento { color: #c0c4cc; text-decoration: line-through; }
.nol-cal-attesa {
    display: none;
    position: absolute; top: 16px; left: 50%; transform: translateX(-50%);
    padding: 4px 12px; border-radius: 999px; background: #111827; color: #fff; font-size: 12px;
}
.nol-cal.is-caricamento .nol-cal-attesa { display: block; }

/* Telefono: a tutto schermo, un mese alla volta */
@media (max-width: 759px) {
    .nol-cal { position: fixed; inset: 0; left: 0; top: 0; width: auto; }
    .nol-cal-pannello {
        height: 100%;
        display: flex;
        flex-direction: column;
        border-radius: 0;
        padding: 14px 16px calc(12px + env(safe-area-inset-bottom));
        overflow-y: auto;
    }
    .nol-cal-mesi { grid-template-columns: minmax(0, 1fr); flex: 1 0 auto; }
    .nol-cal-giorno { height: 46px; }
    .nol-cal-piede { position: sticky; bottom: 0; background: #fff; }
    .nol-cal-scheda { flex: 1 1 0; min-width: 0; }
    .nol-cal-durata { width: 100%; margin-left: 0; }
    html.nol-cal-aperto,
    html.nol-cal-aperto body { overflow: hidden; }
}

.nol-bottone {
    padding: 11px 22px;
    border: 0;
    border-radius: 8px;
    background: var(--nol-azione);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}
.nol-bottone:hover { background: var(--nol-azione-scuro); }
/* Il pulsante che manda avanti (Scegli, Continua, Prenota, Mandami il link):
   verde come "Cerca" */
.nol-bottone--azione { background: var(--nol-azione, #008009); }
.nol-bottone--azione:hover { background: var(--nol-azione-scuro, #006607); }
.nol-bottone-link { display: inline-block; text-decoration: none; text-align: center; }
.nol-bottone:disabled { opacity: .5; cursor: not-allowed; }

/* ── Messaggi ─────────────────────────────────────────────────────────────── */
.nol-avviso {
    margin-top: 20px;
    padding: 14px 18px;
    border: 1px solid #fde68a;
    border-radius: 10px;
    background: #fffbeb;
    color: #92400e;
}
.nol-avviso ul { margin: 6px 0 0 18px; }
.nol-avviso .nol-correzione { margin-top: 12px; }
/* Nessuna auto: la prima data utile, con il pulsante per cercarla */
.nol-prima-data p { margin: 0 0 8px; }
.nol-prima-data .nol-bottone { margin-top: 4px; }
.nol-conteggio { margin: 24px 0 12px; color: var(--nol-tenue); }

/* ── Filtri sopra i risultati (noleggio-filtri.js) ─────────────────────────
   In orizzontale: gruppi con l'etichetta e le "pillole" da accendere. Sul
   telefono ogni gruppo è una riga che scorre di lato. */
.nol-filtri[hidden],
.nol-filtri-azzera[hidden],
.nol-avviso[hidden],
.nol-griglia > .nol-auto[hidden],
.nol-griglia.is-schede > .nol-auto[hidden] { display: none; }
.nol-filtri {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 22px;
    margin: 0 0 16px;
    padding: 12px 14px;
    border: 1px solid var(--nol-bordo);
    border-radius: 12px;
    background: #fff;
}
.nol-filtri-gruppo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.nol-filtri-etichetta { font-size: 13px; font-weight: 700; color: var(--nol-tenue); text-transform: uppercase; letter-spacing: .03em; }
.nol-chip {
    /* relative: il testo nascosto per i lettori di schermo (assoluto) resta
       dentro la pillola e la riga che scorre, invece di allargare la pagina */
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border: 1px solid #d1d5db;
    border-radius: 999px;
    background: #fff;
    color: var(--nol-testo);
    font: inherit;
    font-size: 14px;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
}
.nol-chip:hover { border-color: var(--nol-azione); }
.nol-chip:focus-visible { outline: 2px solid var(--nol-azione); outline-offset: 2px; }
.nol-chip[aria-pressed="true"] { border-color: var(--nol-azione); background: var(--nol-azione); color: #fff; }
.nol-chip-n { font-size: 12px; opacity: .7; }
.nol-filtri-azzera {
    margin-left: auto;
    padding: 6px 4px;
    border: 0;
    background: none;
    color: var(--nol-accento);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}
.nol-filtri-azzera-link { padding: 0; border: 0; background: none; font: inherit; cursor: pointer; }
@media (max-width: 639px) {
    /* nowrap: in colonna con "wrap" ogni riga prendeva la larghezza della
       pillola più lunga e la pagina scorreva di lato (4+ scelte in un gruppo) */
    .nol-filtri { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 10px; padding: 12px; }
    .nol-filtri-gruppo { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
    .nol-filtri-gruppo::-webkit-scrollbar { display: none; }
    .nol-filtri-etichetta { flex: none; min-width: 92px; }
    .nol-filtri-azzera { margin-left: 0; align-self: flex-start; }
}

/* ── Risultati ────────────────────────────────────────────────────────────── */
.nol-griglia { display: grid; gap: 16px; }

.nol-auto {
    display: grid;
    grid-template-columns: 220px 1fr 200px;
    gap: 16px;
    align-items: center;
    padding: 16px;
    border: 1px solid var(--nol-bordo);
    border-radius: 14px;
    background: #fff;
}
/* Sugli schermi grandi la foto dell'elenco cresce col contenitore */
@media (min-width: 1100px) {
    .nol-auto { grid-template-columns: 300px 1fr 220px; }
}
@media (max-width: 800px) {
    .nol-auto { grid-template-columns: 1fr; }
}

.nol-auto-foto {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 10;
    border-radius: 10px;
    /* Bianca: le foto delle auto sono quasi tutte su fondo bianco (con il
       grigio si vedeva il rettangolo della foto); grigia solo senza foto */
    background: #fff;
    overflow: hidden;
}
.nol-auto-foto:not(:has(img)) { background: #f3f4f6; }
.nol-auto-foto img { width: 100%; height: 100%; object-fit: contain; }
.nol-auto-senza-foto { color: var(--nol-tenue); font-size: 13px; }

.nol-auto-categoria {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--nol-accento);
}
.nol-auto-nome { margin: 2px 0 8px; font-size: 20px; font-weight: 700; }
.nol-auto-similare { font-size: 13px; font-weight: 400; color: var(--nol-tenue); }
.nol-auto-dati {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 13px;
    color: #374151;
}
.nol-auto-dati li { display: inline-flex; align-items: center; gap: 6px; }
.nol-icona { flex: none; width: 16px; height: 16px; color: var(--nol-tenue); }

.nol-auto-prezzo { text-align: right; display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
@media (max-width: 800px) {
    .nol-auto-prezzo { text-align: left; align-items: flex-start; }
}
.nol-auto-totale { font-size: 26px; font-weight: 800; }
.nol-auto-unita { font-size: 14px; font-weight: 600; color: var(--nol-tenue); }

/* ── Codice sconto nel riepilogo del checkout ─────────────────────────────── */
.nol-conto-righe .is-sconto span:last-child { color: #15803d; font-weight: 600; }
.nol-coupon { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--nol-bordo); }
.nol-coupon label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.nol-coupon-riga { display: flex; gap: 8px; }
.nol-coupon-riga input {
    flex: 1;
    min-width: 0;
    padding: 9px 12px;
    border: 1px solid var(--nol-bordo);
    border-radius: 8px;
    font-size: 15px;
    text-transform: uppercase;
}
.nol-coupon-riga .nol-bottone { padding: 9px 14px; font-size: 14px; }
.nol-coupon-ok { margin: 6px 0 0; font-size: 13px; color: #15803d; }

/* Costo in più del metodo di pagamento (contanti) */
.nol-metodo-costo { font-weight: 600; color: #b45309; white-space: nowrap; }
/* La riga del costo resta nascosta finché non si sceglie quel metodo (li ha display:flex) */
.nol-conto-righe li[hidden],
.nol-conto-iva[hidden] { display: none; }
.nol-auto-giorno { font-size: 13px; color: var(--nol-tenue); }
.nol-auto-ultima { font-size: 12px; font-weight: 600; color: #b45309; }
.nol-auto-prezzo .nol-bottone { margin-top: 6px; }

/* Promo in evidenza (Noleggio → Stagioni e promo): sconto sulla foto, frase
   sotto i dati, prezzo pieno barrato sopra quello scontato */
.nol-auto-sconto {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--nol-promo);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.3;
}
.nol-auto-promo {
    margin: 10px 0 0;
    padding: 6px 10px;
    border-radius: 8px;
    background: var(--nol-promo-sfondo);
    color: var(--nol-promo);
    font-size: 13px;
    font-weight: 600;
}
.nol-auto-pieno { font-size: 14px; color: var(--nol-tenue); }
.nol-auto.is-promo .nol-auto-totale { color: var(--nol-promo); }

/* Solo per chi legge con lo screen reader */
.nol-nascosto {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Griglia (Configurazione → Sito → "A griglia"): schede affiancate, il
   prezzo sempre in fondo alla scheda. Sul telefono una sotto l'altra. */
/* 320 px: col contenitore largo (1248) restano 3 schede per riga, con le foto
   più grandi (a 300 diventavano 4, più piccole) */
.nol-griglia.is-schede { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.nol-griglia.is-schede .nol-auto { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
.nol-griglia.is-schede .nol-auto-corpo { min-width: 0; }
.nol-griglia.is-schede .nol-auto-prezzo {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--nol-bordo);
    text-align: left;
    align-items: flex-start;
}
.nol-griglia.is-schede .nol-auto-prezzo .nol-bottone { align-self: stretch; }
/* Flotta: solo "Vedi disponibilità" (senza prezzo, niente linea sopra) */
.nol-griglia.is-schede .nol-auto-prezzo--solo-link { border-top: 0; padding-top: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   Scheda del veicolo
   ═══════════════════════════════════════════════════════════════════════════ */
.nol-link { color: var(--nol-accento); font-weight: 600; text-decoration: underline; }
.nol-nota { display: block; font-size: 13px; color: var(--nol-tenue); }
.nol-sottotitolo { font-size: 18px; font-weight: 700; margin: 0 0 8px; padding: 0; }

.nol-bottone-secondario { background: #fff; color: var(--nol-marchio); border: 1px solid var(--nol-marchio); }
.nol-bottone-secondario:hover { background: var(--nol-marchio-chiaro); }

/* ── Il viaggio scelto ────────────────────────────────────────────────────── */
.nol-viaggio {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 28px;
    padding: 14px 18px;
    border: 1px solid var(--nol-bordo);
    border-radius: 14px;
    background: #fff;
}
.nol-viaggio-tratto { display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.nol-viaggio-etichetta { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--nol-tenue); }
.nol-viaggio-durata { font-weight: 700; }
.nol-viaggio .nol-link { margin-left: auto; }
.nol-indietro { display: inline-block; margin: 14px 0 0; font-size: 14px; color: var(--nol-tenue); }

/* ── Impaginazione: scelte a sinistra, conto a destra ─────────────────────── */
.nol-scheda {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 24px;
    align-items: start;
    margin-top: 16px;
}
@media (max-width: 900px) {
    .nol-scheda { grid-template-columns: minmax(0, 1fr); }
}
.nol-scheda-principale { display: flex; flex-direction: column; gap: 20px; min-width: 0; }

/* Con le date (scelta di copertura ed extra): tutta la larghezza, il conto
   in fondo. Sul computer foto a sinistra, dati e "Da sapere" a destra */
.nol-scheda--pieno { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 901px) {
    .nol-scheda--pieno .nol-scheda-principale {
        display: grid;
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
        grid-template-areas:
            "testa testa"
            "galleria dati"
            "galleria condizioni"
            "descrizione descrizione"
            "scelte scelte";
        gap: 20px 24px;
        align-items: start;
    }
    .nol-scheda--pieno .nol-scheda-testa { grid-area: testa; }
    .nol-scheda--pieno .nol-galleria { grid-area: galleria; }
    .nol-scheda--pieno .nol-scheda-dati { grid-area: dati; margin: 0; }
    .nol-scheda--pieno .nol-condizioni { grid-area: condizioni; }
    .nol-scheda--pieno .nol-scheda-descrizione { grid-area: descrizione; }
    .nol-scheda--pieno .nol-scelte { grid-area: scelte; }
}
.nol-scheda-nome { margin: 2px 0 0; }

/* ── Galleria ─────────────────────────────────────────────────────────────── */
.nol-galleria-grande {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 9;
    border-radius: 14px;
    background: #fff;
    border: 1px solid var(--nol-bordo);
    overflow: hidden;
}
.nol-galleria-grande img { width: 100%; height: 100%; object-fit: contain; }
.nol-galleria-miniature { display: flex; gap: 8px; margin-top: 8px; overflow-x: auto; }
.nol-miniatura {
    flex: 0 0 84px;
    height: 56px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    overflow: hidden;
}
.nol-miniatura img { width: 100%; height: 100%; object-fit: cover; }
.nol-miniatura.is-attiva { border-color: var(--nol-azione); }

/* ── Dati e condizioni ────────────────────────────────────────────────────── */
.nol-scheda-dati li {
    padding: 4px 10px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--nol-bordo);
}
.nol-scheda-dati .nol-icona-img { flex: none; width: 16px; height: 16px; object-fit: contain; }
.nol-scheda-dati .nol-icona-emoji { flex: none; font-size: 14px; line-height: 1; }
/* Descrizione e "Da sapere" in un riquadro bianco: sul fondo grigio si leggono */
.nol-scheda-descrizione,
.nol-condizioni {
    padding: 18px 20px;
    border: 1px solid var(--nol-bordo);
    border-radius: 12px;
    background: #fff;
    color: var(--nol-testo);
}
.nol-scheda-descrizione { line-height: 1.6; }
.nol-condizioni ul { margin: 0; padding: 0; list-style: none; line-height: 1.7; font-size: 14px; }
.nol-condizioni li { position: relative; padding-left: 26px; }
.nol-condizioni li + li { margin-top: 2px; }
/* spunta verde disegnata col bordo */
.nol-condizioni li::before {
    content: "";
    position: absolute;
    left: 6px;
    top: .42em;
    width: 6px;
    height: 11px;
    border: solid var(--nol-azione, #008009);
    border-width: 0 2.5px 2.5px 0;
    transform: rotate(45deg);
}

/* ── Coperture ────────────────────────────────────────────────────────────── */
.nol-blocco { margin: 0; padding: 0; border: 0; min-width: 0; }
.nol-blocco + .nol-blocco { margin-top: 20px; }
.nol-coperture { display: grid; gap: 10px; margin-top: 10px; }
.nol-copertura {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 12px;
    align-items: start;
    padding: 14px 16px;
    border: 2px solid var(--nol-bordo);
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
}
.nol-copertura:has(input:checked) { border-color: var(--nol-azione); background: var(--nol-azione-chiaro); }
.nol-copertura input { margin-top: 4px; }
.nol-copertura-corpo { display: flex; flex-direction: column; gap: 4px; }
.nol-copertura-nome { font-weight: 700; }
.nol-copertura-franchigie { font-size: 13px; }
.nol-copertura-voci { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.nol-voce-si::before { content: '✓ '; color: #15803d; font-weight: 700; }
.nol-voce-no::before { content: '✗ '; color: #b91c1c; font-weight: 700; }
.nol-copertura-prezzo { text-align: right; font-weight: 700; white-space: nowrap; }
.nol-copertura-prezzo small { display: block; font-size: 12px; font-weight: 400; color: var(--nol-tenue); }
@media (max-width: 560px) {
    .nol-copertura { grid-template-columns: auto minmax(0, 1fr); }
    .nol-copertura-prezzo { grid-column: 2; text-align: left; }
}

/* Le coperture della scheda in card affiancate: prezzo al giorno in alto,
   la scelta segnata col colore delle azioni e la spunta tonda */
.nol-coperture--schede { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; align-items: stretch; }
.nol-coperture--schede .nol-copertura {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 18px 16px 16px;
}
.nol-coperture--schede .nol-copertura input {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 24px;
    height: 24px;
    margin: 0;
    border: 2px solid #cbd5e1;
    border-radius: 50%;
    background: #fff;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}
.nol-coperture--schede .nol-copertura input:checked {
    border-color: var(--nol-azione);
    background: var(--nol-azione) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.nol-coperture--schede .nol-copertura input:focus-visible { outline: 2px solid var(--nol-azione); outline-offset: 2px; }
.nol-coperture--schede .nol-copertura:has(input:checked) { border-color: var(--nol-azione); background: var(--nol-azione-chiaro); }
.nol-coperture--schede .nol-copertura:has(input:checked) .nol-copertura-nome { color: var(--nol-azione-scuro); }
.nol-coperture--schede .nol-copertura-prezzo { order: -1; padding-right: 34px; text-align: left; white-space: normal; font-weight: 400; }
.nol-coperture--schede .nol-copertura-prezzo strong { font-size: 26px; font-weight: 800; line-height: 1.1; }
.nol-coperture--schede .nol-copertura-giorno { font-size: 13px; color: var(--nol-tenue); }
.nol-coperture--schede .nol-copertura-prezzo small { margin-top: 2px; }
.nol-coperture--schede .nol-copertura-nome { font-size: 17px; }

/* ── Extra ────────────────────────────────────────────────────────────────── */
.nol-extra-elenco { display: grid; gap: 10px; margin-top: 10px; }
.nol-extra {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border: 1px solid var(--nol-bordo);
    border-radius: 12px;
    background: #fff;
}
.nol-extra-corpo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nol-extra-nome { font-weight: 600; }
/* Icona disegnata o immagine caricata accanto al nome (dalla 1.2.505) */
.nol-extra-nome .nol-icona, .nol-extra-nome .nol-extra-img { display: inline-block; width: 22px; height: 22px; vertical-align: -6px; object-fit: contain; }
.nol-extra-scelta { flex: 0 0 auto; font-size: 14px; }
.nol-extra-obbligatorio { font-size: 13px; font-weight: 600; color: var(--nol-tenue); }
.nol-spunta { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.nol-quantita { display: flex; align-items: center; gap: 8px; }
.nol-quantita input { width: 64px; padding: 6px 8px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 15px; }
/* Tendina delle scelte di un extra (es. pacchetto km, dalla 1.2.470) */
.nol-opzioni { display: block; }
.nol-opzioni select { max-width: 100%; padding: 8px 32px 8px 10px; border: 1px solid #d1d5db; border-radius: 8px; background-color: #fff; font: inherit; font-size: 15px; }
@media (max-width: 640px) {
    /* Sul telefono la tendina va sotto il testo, larga quanto la riga */
    .nol-extra:has(.nol-opzioni) { flex-wrap: wrap; }
    .nol-extra:has(.nol-opzioni) .nol-extra-scelta { flex: 1 1 100%; }
    .nol-opzioni select { width: 100%; }
}

.nol-scelte [data-nol-aggiorna] { margin-top: 16px; }

/* ── Il conto ─────────────────────────────────────────────────────────────── */
.nol-conto {
    position: sticky;
    top: calc(var(--nol-testa, 0px) + 16px); /* --nol-testa: altezza dell'header fisso, da noleggio-scheda.js */
    padding: 18px;
    border: 1px solid var(--nol-bordo);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .04);
}
@media (max-width: 900px) {
    .nol-conto { position: static; }
}
/* ── Riepilogo del checkout (prenota.twig): foto e dati dell'auto, ritiro e
   riconsegna affiancati, la copertura che si apre ───────────────────────── */
.nol-rie-auto { display: flex; gap: 12px; align-items: center; margin: 4px 0 14px; }
.nol-rie-foto { flex: none; width: 112px; height: 74px; object-fit: contain; border-radius: 10px; background: #fff; }
.nol-rie-testa { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nol-rie-nome { font-size: 17px; font-weight: 800; line-height: 1.2; }
.nol-rie-sotto { font-size: 13px; color: var(--nol-tenue); }
.nol-rie-icone { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; padding: 0; list-style: none; }
.nol-rie-icone li {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 3px 7px; border-radius: 8px;
    background: #fff4dc; color: #1f2937; font-size: 12px; font-weight: 700;
}
.nol-rie-icone .nol-icona { width: 14px; height: 14px; }
.nol-rie-viaggio {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0 0 12px; padding: 12px 0; border-top: 1px solid var(--nol-bordo); border-bottom: 1px solid var(--nol-bordo);
}
.nol-rie-tratto { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-right: 10px; font-size: 13px; color: var(--nol-tenue); }
.nol-rie-tratto + .nol-rie-tratto { padding: 0 0 0 12px; border-left: 1px solid var(--nol-bordo); }
.nol-rie-tratto strong { font-size: 14px; color: var(--nol-testo); text-transform: capitalize; }
.nol-rie-etichetta { font-size: 12px; font-weight: 700; color: var(--nol-testo); }
.nol-rie-sede { overflow-wrap: anywhere; }
.nol-rie-eta { margin: -4px 0 12px; font-size: 13px; color: var(--nol-tenue); }
.nol-conto-righe li.nol-rie-polizza { display: block; padding: 0; }
.nol-rie-polizza details { margin: 4px 0; border-radius: 10px; background: #f3f4f6; }
.nol-rie-polizza summary {
    display: flex; justify-content: space-between; gap: 12px; align-items: center;
    padding: 9px 12px; font-weight: 600; cursor: pointer; list-style: none;
}
.nol-rie-polizza summary::-webkit-details-marker { display: none; }
.nol-rie-polizza-nome::before {
    content: ""; display: inline-block; width: 7px; height: 7px; margin: 0 8px 2px 0;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .15s;
}
.nol-rie-polizza details[open] .nol-rie-polizza-nome::before { transform: rotate(45deg); }
.nol-rie-polizza summary:focus-visible { outline: 2px solid var(--nol-azione); outline-offset: -2px; border-radius: 10px; }
.nol-rie-polizza-dettagli { display: flex; flex-direction: column; gap: 6px; padding: 0 12px 12px; }
.nol-rie-polizza-dettagli p { margin: 0; }
@media (min-width: 901px) {
    .nol-scheda--prenota { grid-template-columns: minmax(0, 1fr) 360px; }
}
/* Sul telefono il riepilogo viene prima del form: si vede subito cosa si prenota */
@media (max-width: 900px) {
    .nol-scheda--prenota .nol-conto { order: -1; }
}

.nol-conto.is-in-calcolo .nol-conto-righe,
.nol-conto.is-in-calcolo .nol-conto-totale { opacity: .5; transition: opacity .15s; }
.nol-conto-righe { margin: 0; padding: 0; list-style: none; font-size: 14px; }
.nol-conto-righe li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px dashed var(--nol-bordo); }
.nol-conto-totale { display: flex; justify-content: space-between; align-items: baseline; margin: 12px 0; font-size: 16px; }
.nol-conto-totale strong { font-size: 26px; font-weight: 800; }
/* "di cui IVA 22%: € …" sotto il totale (prezzi IVA inclusa) */
.nol-conto-iva { margin: -8px 0 12px; text-align: right; font-size: 12px; color: #6b7280; }
.nol-conto-iva:empty { display: none; }
.nol-conto-errore { margin: 0 0 10px; font-size: 13px; color: #b91c1c; }
.nol-conto-avanti { display: block; box-sizing: border-box; width: 100%; margin: 8px 0; text-align: center; text-decoration: none; }

/* Il conto in fondo alla scheda: sul computer le righe a sinistra, totale e
   "Continua" a destra */
.nol-scheda--pieno .nol-conto { position: static; }
@media (min-width: 901px) {
    .nol-scheda--pieno .nol-conto:has(.nol-conto-fine) {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 340px;
        column-gap: 40px;
        align-items: start;
        padding: 22px 24px;
    }
    .nol-scheda--pieno .nol-conto:has(.nol-conto-fine) > .nol-sottotitolo { grid-column: 1 / -1; }
    .nol-scheda--pieno .nol-conto-fine .nol-conto-totale { margin-top: 0; }
}


/* ── Proposta di una copertura migliore ───────────────────────────────────── */
.nol-upsell {
    width: min(520px, calc(100vw - 32px));
    padding: 0;
    border: 0;
    border-radius: 16px;
    color: var(--nol-testo, #1f2937);
    box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
}
.nol-upsell::backdrop { background: rgba(17, 24, 39, .55); }
.nol-upsell-dentro { padding: 24px; }
.nol-upsell-titolo { margin: 4px 0 16px; font-size: 22px; font-weight: 800; }
.nol-upsell-confronto { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 560px) {
    .nol-upsell-confronto { grid-template-columns: 1fr; }
}
.nol-upsell-voce {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
}
.nol-upsell-voce.is-proposta { border: 2px solid var(--nol-azione, #008009); background: var(--nol-azione-chiaro, #f0fdf4); }
.nol-upsell-prezzo { margin: 16px 0; font-size: 15px; }
.nol-upsell-prezzo strong { font-size: 18px; }
.nol-upsell-azioni { display: flex; flex-wrap: wrap; gap: 10px; }
.nol-upsell-azioni .nol-bottone { flex: 1 1 200px; }
/* "No grazie": discreto, il colore resta alla scelta proposta */
.nol-upsell .nol-bottone-secondario { color: var(--nol-testo, #1f2937); border-color: #d1d5db; }
.nol-upsell .nol-bottone-secondario:hover { background: #f9fafb; }

/* ═══════════════════════════════════════════════════════════════════════════
   Prenotazione (checkout) e prenotazione ricevuta
   ═══════════════════════════════════════════════════════════════════════════ */
.nol-prenota-titolo { margin-top: 8px; }
.nol-prenota { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.nol-riquadro {
    padding: 18px;
    border: 1px solid var(--nol-bordo);
    border-radius: 14px;
    background: #fff;
}
fieldset.nol-riquadro { margin: 0; }
.nol-riquadro .nol-sottotitolo { float: left; width: 100%; margin-bottom: 10px; }
.nol-riquadro .nol-sottotitolo + * { clear: both; }

.nol-griglia-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; margin-top: 10px; }
@media (max-width: 560px) {
    .nol-griglia-form { grid-template-columns: minmax(0, 1fr); }
}
.nol-campo-form { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.nol-campo-form label { font-size: 13px; font-weight: 600; color: #374151; }
/* Il formato delle date da scrivere, accanto all'etichetta */
.nol-campo-formato { font-weight: 400; color: var(--nol-tenue); }
.nol-campo-form input,
.nol-campo-form select,
.nol-campo-form textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #fff;
    font-size: 15px;
    font-family: inherit;
}
.nol-campo-form.is-errore input,
.nol-campo-form.is-errore select { border-color: #dc2626; }
.nol-errore-campo { display: block; font-size: 13px; color: #b91c1c; }
.nol-riquadro.is-errore { border-color: #dc2626; }
.nol-metodi { display: grid; gap: 10px; }

.nol-trappola { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.nol-conferma-prenota { display: flex; flex-direction: column; gap: 10px; }
/* Checkout: le caselle (patente, privacy) e i link della stessa misura del resto */
.nol-prenota .nol-spunta { align-items: flex-start; font-size: 14px; }
.nol-prenota .nol-spunta input { margin-top: 3px; flex: 0 0 auto; }
.nol-rie > .nol-link { display: inline-block; margin-top: 6px; font-size: 14px; }
/* L'icona del metodo di pagamento, accanto al nome */
.nol-metodi .nol-copertura-nome .nol-icona { width: 20px; height: 20px; margin: 0 8px 0 0; vertical-align: -5px; color: var(--nol-tenue); }
.nol-metodi .nol-copertura:has(input:checked) .nol-copertura-nome .nol-icona { color: var(--nol-azione); }
/* I passi della prenotazione (sopra scheda e checkout) */
.nol-passi--prenota { margin: 0 0 14px; }
.nol-conferma-prenota .nol-spunta { align-items: flex-start; font-size: 14px; }
.nol-conferma-prenota .nol-spunta input { margin-top: 3px; flex: 0 0 auto; }
.nol-spunta.is-errore { color: #b91c1c; }
.nol-fornitore { margin: 0; font-size: 14px; color: #374151; }
.nol-bottone-grande { padding: 14px 22px; font-size: 17px; }

.nol-riepilogo { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0 0 12px; font-size: 14px; }
.nol-riepilogo dt { font-weight: 600; color: var(--nol-tenue); }
.nol-riepilogo dd { margin: 0; }

/* ── Prenotazione ricevuta ────────────────────────────────────────────────── */
.nol-contenitore-stretto { max-width: 720px; display: flex; flex-direction: column; gap: 16px; }
.nol-esito {
    padding: 22px;
    border-radius: 14px;
    border: 1px solid #bbf7d0;
    background: #f0fdf4;
}
.nol-esito.is-bozza { border-color: #fde68a; background: #fffbeb; }
.nol-esito .nol-titolo { margin-bottom: 8px; }
/* Un'email lunga va a capo invece di uscire dal riquadro (telefono) */
.nol-esito strong, .nol-nota strong { overflow-wrap: anywhere; }
.nol-esito p { margin: 4px 0; }
.nol-esito-numero { font-size: 15px; }
.nol-esito-link { text-align: center; }

/* Coordinate del bonifico: si copiano, quindi in carattere a spaziatura fissa */
.nol-bonifico { border-color: var(--nol-bordo); background: #f9fafb; }
.nol-codice { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .02em; word-break: break-all; }

/* ── Checkout: privato / azienda ─────────────────────────────────────────── */
.nol-tipi { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.nol-tipo {
    flex: 1 1 180px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    border: 2px solid var(--nol-bordo);
    border-radius: 12px;
    background: #fff;
    font-weight: 600;
    cursor: pointer;
}
.nol-tipo:has(input:checked) { border-color: var(--nol-azione); background: var(--nol-azione-chiaro); }
/* I dati per la fattura si vedono solo con "Azienda": niente JS */
.nol-azienda { display: none; }
.nol-prenota:has(input[name="tipo_cliente"][value="azienda"]:checked) .nol-azienda { display: block; }
/* Il campo di Google Places (web component) occupa tutta la larghezza */
.nol-prenota .co-pac-widget { width: 100%; }
/* Azienda estera: SDI, PEC, codice fiscale e provincia non servono */
.nol-azienda.is-estero .nol-solo-italia { display: none; }

/* ── Check-in online (pagina della prenotazione) ─────────────────────────── */
.nol-checkin.is-fatto { border-color: #bbf7d0; }
.nol-checkin-ok { margin: 0 0 8px; padding: 10px 12px; border-radius: 8px; background: #f0fdf4; color: #166534; font-size: 14px; }
/* Un guidatore per riga: nome a sinistra, stato a destra, si apre al clic */
.nol-checkin-dettagli { border-top: 1px solid #e5e7eb; }
.nol-checkin-dettagli > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    color: var(--nol-marchio, #b91c1c);
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}
.nol-checkin-dettagli > summary::-webkit-details-marker { display: none; }
.nol-checkin-chi { min-width: 0; overflow-wrap: anywhere; }
.nol-checkin-chi::before { content: "▸"; display: inline-block; width: 1.1em; }
.nol-checkin-dettagli[open] .nol-checkin-chi::before { content: "▾"; }
.nol-checkin-stato {
    flex-shrink: 0;
    padding: 2px 10px;
    border-radius: 999px;
    background: #fef3c7;
    color: #92400e;
    font-size: 12px;
    font-weight: 600;
}
.nol-checkin-dettagli.is-fatto .nol-checkin-stato { background: #dcfce7; color: #166534; }
.nol-checkin-dettagli[open] > summary { margin-bottom: 8px; }
.nol-checkin-dettagli > form { padding-bottom: 16px; }

/* Foto di patente e documento, sotto i dati di ogni guidatore salvato */
.nol-documenti { margin: 4px 0 16px; padding: 14px; border-radius: 10px; background: #f8fafc; border: 1px solid #e5e7eb; }
.nol-documenti .nol-sottotitolo { font-size: 1rem; margin: 0 0 4px; }
.nol-documenti-elenco { list-style: none; margin: 10px 0; padding: 0; }
.nol-documenti-elenco li {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 12px;
    padding: 6px 0;
    border-bottom: 1px dashed #e5e7eb;
    font-size: 14px;
}
.nol-documenti-elenco li > span:first-child { flex: 1 1 140px; min-width: 0; }
.nol-documento-stato { font-size: 12px; font-weight: 600; color: #92400e; }
.nol-documenti-elenco li.is-caricata .nol-documento-stato { color: #166534; }
.nol-documento-togli { margin: 0; }
.nol-documento-togli button { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-size: 13px; }
.nol-documenti-form input[type="file"] { width: 100%; max-width: 100%; font-size: 14px; }
.nol-documenti-form .nol-bottone { margin-top: 8px; }
.nol-documenti-form .nol-bottone:disabled { opacity: .6; cursor: wait; }
.nol-documenti-dopo { margin: 0 0 16px; }

/* ── Contratto: leggerlo e firmarlo online ─────────────────────────────── */
.nol-contratto.is-firmato { border-color: #bbf7d0; }
/* "Leggi il contratto" / "Scarica il contratto firmato": un link con il
   padding del pulsante, se resta in linea copre la riga di testo sopra */
.nol-contratto > a.nol-bottone { display: inline-block; margin-top: 10px; text-decoration: none; }
.nol-firma { margin-top: 16px; padding-top: 12px; border-top: 1px solid #e5e7eb; display: grid; gap: 10px; }
.nol-firma .nol-sottotitolo { font-size: 1rem; margin: 0; }
.nol-firma .nol-spunta { align-items: flex-start; font-size: 14px; }
.nol-firma .nol-spunta input { margin-top: 3px; flex: 0 0 auto; }
.nol-firma .nol-spunta.is-errore span { color: #b91c1c; }
/* Il testo da approvare, così come esce nel contratto */
.nol-firma-testo {
    max-height: 180px;
    overflow: auto;
    padding: 10px 12px;
    border-radius: 8px;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    font-size: 13px;
    line-height: 1.5;
    color: #374151;
}
.nol-firma-etichetta { display: block; font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.nol-firma-riquadro { position: relative; }
.nol-firma-riquadro canvas {
    display: block;
    width: 100%;
    height: 180px;
    border: 2px dashed #cbd5e1;
    border-radius: 10px;
    background: #fff;
    touch-action: none; /* il dito disegna, non fa scorrere la pagina */
    cursor: crosshair;
}
.nol-campo-form.is-errore .nol-firma-riquadro canvas { border-color: #fca5a5; }
.nol-firma-suggerimento {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    font-size: 14px;
    pointer-events: none;
}
.nol-firma-suggerimento[hidden] { display: none; }
.nol-firma-cancella { background: none; border: 0; padding: 4px 0; cursor: pointer; font: inherit; font-size: 13px; }
.nol-firma-motivo { margin-top: 12px; }
.nol-bottone:disabled { opacity: .6; cursor: wait; }

/* ── I miei noleggi ─────────────────────────────────────────────────────── */
.nol-miei-modulo { display: grid; gap: 12px; margin-top: 12px; }
.nol-miei-elenco { list-style: none; margin: 8px 0 20px; padding: 0; display: grid; gap: 12px; }
.nol-miei-voce { padding: 14px 16px; border: 1px solid #e5e7eb; border-radius: 12px; background: #fff; }
.nol-miei-voce.is-annullata,
.nol-miei-voce.is-no_show { opacity: .7; }
.nol-miei-testa { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.nol-miei-testa strong { min-width: 0; overflow-wrap: anywhere; }
.nol-miei-stato { flex-shrink: 0; padding: 2px 10px; border-radius: 999px; background: #eef2ff; color: #3730a3; font-size: 12px; font-weight: 600; }
.nol-miei-voce.is-confermata .nol-miei-stato { background: #dcfce7; color: #166534; }
.nol-miei-voce.is-annullata .nol-miei-stato,
.nol-miei-voce.is-no_show .nol-miei-stato { background: #fee2e2; color: #991b1b; }
.nol-miei-dafare { margin: 8px 0 0; font-size: 13px; color: #92400e; }
.nol-miei-azioni { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.nol-checkin .nol-blocco + .nol-blocco { margin-top: 16px; }
.nol-checkin .co-pac-widget { width: 100%; }

/* ── Pagamento online ──────────────────────────────────────────────────── */
.nol-pagamento.is-attesa { border-color: #fcd34d; background: #fffbeb; }
.nol-pagamento-esito { margin: 8px 0 12px; padding: 10px 12px; border-radius: 10px; font-size: 14px; background: #eef2ff; color: #3730a3; }
.nol-pagamento-esito.is-pagato,
.nol-pagamento-esito.is-metodo { background: #dcfce7; color: #166534; }
.nol-pagamento-esito.is-rifiutato,
.nol-pagamento-esito.is-scaduto,
.nol-pagamento-esito.is-errore { background: #fee2e2; color: #991b1b; }
.nol-pagamento-esito.is-cambiato,
.nol-pagamento-esito.is-rimborso,
.nol-pagamento-esito.is-in_verifica { background: #fef3c7; color: #92400e; }
.nol-pagamento-importo { margin: 8px 0; font-size: 18px; }
.nol-pagamento-importo .nol-nota { margin-top: 2px; }
.nol-pagamento-scelte { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 8px; }
.nol-pagamento-scelte .nol-bottone { flex: 1 1 200px; }
.nol-pagamento-altro { margin-top: 14px; font-size: 14px; }
.nol-pagamento-altro summary { cursor: pointer; color: var(--nol-marchio); font-weight: 600; }
.nol-pagamento-altro form { display: grid; gap: 8px; margin-top: 10px; }

/* ── Check-in a passi: 1 i tuoi dati · 2 foto · 3 firma ─────────────────── */
.nol-passi { display: flex; gap: 8px; list-style: none; margin: 4px 0 16px; padding: 0; }
.nol-passo {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 10px;
    background: #f3f4f6;
    color: var(--nol-tenue, #6b7280);
    font-size: 14px;
    font-weight: 600;
}
.nol-passo > a { display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; color: inherit; text-decoration: none; }
.nol-passo > a:hover .nol-passo-nome { text-decoration: underline; }
.nol-passo-num {
    flex: none;
    width: 26px;
    height: 26px;
    box-sizing: border-box;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid var(--nol-bordo, #e5e7eb);
    font-size: 13px;
    font-weight: 700;
}
.nol-passo-nome { min-width: 0; overflow-wrap: anywhere; line-height: 1.2; }
.nol-passo.is-fatto { background: #ecfdf5; color: #166534; }
.nol-passo.is-fatto .nol-passo-num { background: #16a34a; border-color: #16a34a; color: #fff; }
.nol-passo.is-attivo { background: var(--nol-azione, #008009); color: #fff; }
.nol-passo.is-attivo .nol-passo-num { background: #fff; border-color: #fff; color: var(--nol-azione, #008009); }
@media (max-width: 480px) {
    .nol-passo { flex-direction: column; justify-content: center; padding: 8px 4px; font-size: 12px; text-align: center; }
    .nol-passo > a { flex-direction: column; }
}
.nol-passi-avanti { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }
.nol-checkin-foto .nol-sottotitolo { font-size: 1rem; margin: 12px 0 6px; }

/* ── Luogo di nascita: suggerimenti dei comuni (noleggio-comune.js) ─────── */
.nol-comune-campo { position: relative; }
.nol-comune-lista {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 30;
    margin: 2px 0 0;
    padding: 4px 0;
    list-style: none;
    max-height: 240px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--nol-bordo, #e5e7eb);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .12);
}
.nol-comune-lista button {
    display: block;
    width: 100%;
    padding: 8px 12px;
    border: 0;
    background: none;
    color: var(--nol-testo, #1f2937);
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.nol-comune-lista button:hover,
.nol-comune-lista button.is-attivo { background: var(--nol-azione-chiaro, #f0fdf4); }
.nol-comune-lista small { color: var(--nol-tenue, #6b7280); }

/* ── Check-in: patente e documento letti con l'AI (noleggio-lettura.js) ──── */
.nol-lettura {
    margin: 0 0 16px;
    padding: 14px 16px;
    border: 1px dashed var(--nol-azione, #008009);
    border-radius: 10px;
    background: #f8fafc;
}
.nol-lettura > * + * { margin-top: 8px; }
.nol-lettura-titolo { margin: 0; font-weight: 700; color: #111827; }
.nol-lettura-scegli { position: relative; display: inline-block; }
.nol-lettura-scegli input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
}
.nol-lettura-scegli:focus-within { outline: 2px solid var(--nol-azione, #008009); outline-offset: 2px; }
.nol-lettura-scegli:has(input:disabled) { opacity: .6; cursor: progress; }
.nol-lettura [data-nol-lettura-esito]:empty { display: none; }
.nol-lettura-privacy { font-size: 12px; }
.nol-campo-form.is-letto input,
.nol-campo-form.is-letto select { border-color: #16a34a; background: #f0fdf4; }
.nol-campo-form.is-letto .co-pac-widget { outline: 2px solid #16a34a; outline-offset: -1px; border-radius: 8px; }

/* ── Scheda vista dalla flotta: "Quando è libera" ───────────────────────────
   Il calendario solo da guardare (disegnato dal server, niente JS): i giorni
   già prenotati in rosso pieno (come il vecchio sito con Vik). Sullo schermo grande i mesi affiancati; sul telefono
   uno alla volta, scorrendo di lato. Sotto, il modulo di ricerca (stretto). */
.nol-disp { margin: 8px 0; scroll-margin-top: 90px; }
.nol-disp > .nol-nota { margin: 4px 0 14px; }
.nol-vis-mesi {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 20px 24px;
    padding: 16px;
    border: 1px solid var(--nol-bordo);
    border-radius: 16px;
    background: #fff;
}
.nol-vis-titolo { margin-bottom: 6px; text-align: center; font-weight: 700; text-transform: capitalize; }
.nol-vis-settimana,
.nol-vis-griglia { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.nol-vis-settimana span { padding: 4px 0; text-align: center; font-size: 12px; color: var(--nol-tenue); }
.nol-vis-giorno {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    margin: 1px;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1;
}
.nol-vis-giorno.is-libero { color: var(--nol-testo); }
/* Già prenotata: rosso pieno, si vede subito che quel giorno non si può scegliere */
.nol-vis-giorno.is-occupato { background: var(--nol-occupato, #b91c1c); color: #fff; font-weight: 700; }
.nol-vis-giorno.is-passato { color: #d1d5db; }
.nol-vis-giorno.is-oggi { font-weight: 800; }
.nol-vis-giorno.is-oggi::after {
    content: ""; position: absolute; left: 50%; bottom: 4px;
    width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: currentColor;
}
.nol-vis-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nol-vis-legenda { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 10px 0 0; font-size: 13px; color: var(--nol-tenue); }
.nol-vis-voce { display: inline-flex; align-items: center; gap: 6px; margin-right: 10px; color: var(--nol-testo); }
.nol-vis-punto { flex: none; width: 14px; height: 14px; border-radius: 50%; }
.nol-vis-punto.is-libero { background: #fff; border: 1px solid #9ca3af; }
.nol-vis-punto.is-occupato { background: var(--nol-occupato, #b91c1c); }
.nol-vis-scorri { display: none; margin-left: auto; }
.nol-vis-cerca { margin: 24px 0 10px; font-size: 18px; font-weight: 700; scroll-margin-top: 90px; }
@media (max-width: 759px) {
    .nol-vis-mesi {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: 100%;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        overscroll-behavior-x: contain;
        padding: 12px;
    }
    .nol-vis-mese { scroll-snap-align: start; }
    .nol-vis-giorno { height: 40px; }
    .nol-vis-scorri { display: inline; }
}

/* Il modulo di ricerca dentro una colonna (scheda): i campi su due righe
   anche sullo schermo grande, come sul tablet */
@media (min-width: 640px) {
    .nol-ricerca--stretta .nol-ricerca-riga,
    .nol-ricerca--stretta .nol-ricerca-riga.is-altrove { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .nol-ricerca--stretta .nol-f-sede { grid-column: span 4; }
    .nol-ricerca--stretta .nol-ricerca-riga.is-altrove .nol-f-sede { grid-column: span 2; }
    .nol-ricerca--stretta .nol-ricerca-cerca { grid-column: 1 / -1; }
}

/* ── La flotta (/noleggio/flotta) ─────────────────────────────────────────
   Dalla 1.2.469 come il mockup: testata con occhiello, titolo e tre punti,
   pastiglie delle categorie col numero di auto, gruppi con titolo,
   descrizione e "Scopri…", card .nol-auto--flotta (più giù). */
.nol-flotta-testa {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 24px 48px;
    align-items: end;
    margin: 4px 0 28px;
}
@media (max-width: 960px) {
    .nol-flotta-testa { grid-template-columns: minmax(0, 1fr); }
}
.nol-flotta-occhiello {
    margin: 0 0 10px;
    color: var(--nol-marchio);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .3em;
    text-transform: uppercase;
}
.nol-flotta-titolo {
    margin: 0;
    padding: 0;
    color: var(--nol-testo);
    font-size: clamp(2rem, 4.2vw, 3.4rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -.02em;
}
.nol-flotta-sotto { margin: 12px 0 0; max-width: 60em; color: #4b5563; font-size: clamp(1rem, 1.4vw, 1.2rem); }
.nol-flotta-punti { display: flex; margin: 0; padding: 0; list-style: none; }
.nol-flotta-punti li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 150px;
    padding: 0 16px;
    color: #4b5563;
    font-size: 15px;
    line-height: 1.3;
    text-align: center;
}
.nol-flotta-punti li + li { border-left: 1px solid var(--nol-bordo); }
.nol-flotta-punti .nol-icona { width: 34px; height: 34px; color: var(--nol-testo); stroke-width: 1.5; }
@media (max-width: 960px) {
    .nol-flotta-punti li:first-child { padding-left: 0; }
}
@media (max-width: 640px) {
    .nol-flotta-punti li { flex: 1 1 0; width: auto; padding: 0 8px; font-size: 13px; }
    .nol-flotta-punti .nol-icona { width: 28px; height: 28px; }
}

.nol-flotta-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: 0 0 32px; }
.nol-flotta-filtri { display: flex; flex-wrap: wrap; gap: 12px; }
.nol-flotta-pastiglia {
    display: inline-flex;
    align-items: center;
    padding: 12px 24px;
    border: 1px solid var(--nol-bordo);
    border-radius: 999px;
    background: #fff;
    color: var(--nol-testo);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}
.nol-flotta-pastiglia:hover { border-color: var(--nol-marchio); color: var(--nol-marchio); }
.nol-flotta-pastiglia.is-attiva { border-color: var(--nol-marchio); background: var(--nol-marchio); color: #fff; }
.nol-flotta-linea { flex: 1 1 40px; height: 1px; background: var(--nol-bordo); }
.nol-flotta-conta { margin: 0; color: #4b5563; font-size: 15px; white-space: nowrap; }
.nol-flotta-filtro { display: flex; align-items: center; gap: 8px; margin: 0; }
/* "Mostra" nascosto dallo script (la sede si applica appena scelta): prima
   .nol-bottone-secondario lo teneva visibile */
.nol-flotta-filtro [hidden] { display: none; }
.nol-flotta-filtro label { display: inline-flex; color: var(--nol-tenue); }
.nol-flotta-filtro label .nol-icona { width: 20px; height: 20px; }
.nol-flotta-filtro select {
    min-width: 0;
    max-width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--nol-bordo, #d1d5db);
    border-radius: 999px;
    background: #fff;
    font: inherit;
    font-size: 15px;
}
@media (max-width: 640px) {
    /* Le pastiglie in una riga che scorre di lato (dentro la pagina) */
    .nol-flotta-filtri { flex-wrap: nowrap; width: calc(100% + 32px); margin: 0 -16px; padding: 0 16px 4px; overflow-x: auto; scrollbar-width: none; }
    .nol-flotta-filtri::-webkit-scrollbar { display: none; }
    .nol-flotta-pastiglia { flex: none; padding: 10px 18px; }
    .nol-flotta-linea { display: none; }
}

.nol-flotta-gruppo { margin: 0 0 44px; scroll-margin-top: 90px; }
.nol-flotta-gruppo[hidden] { display: none; }
.nol-flotta-gruppo-testa { display: flex; align-items: flex-end; gap: 12px 24px; margin: 0 0 20px; }
/* La riga sottile fra la descrizione e "Scopri…" */
.nol-flotta-gruppo-testa::after {
    content: "";
    order: 1;
    flex: 1 1 40px;
    align-self: flex-end;
    height: 1px;
    margin-bottom: 9px;
    background: var(--nol-bordo);
}
.nol-flotta-gruppo-testi { flex: 0 1 auto; min-width: 0; }
.nol-flotta-gruppo-titolo { margin: 0; padding: 0; font-size: clamp(1.4rem, 2.4vw, 2rem); font-weight: 800; line-height: 1.2; }
.nol-flotta-gruppo-titolo span { color: var(--nol-tenue); font-size: .6em; font-weight: 400; white-space: nowrap; }
.nol-flotta-gruppo-sotto {
    display: -webkit-box;
    margin: 6px 0 0;
    overflow: hidden;
    color: #4b5563;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.nol-flotta-scopri {
    order: 2;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--nol-marchio);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.nol-flotta-scopri:hover { color: var(--nol-marchio-scuro); text-decoration: underline; }
.nol-flotta-scopri .nol-icona,
.nol-auto-dettagli .nol-icona { color: currentColor; transition: transform .15s ease; }
.nol-flotta-scopri:hover .nol-icona,
.nol-auto-dettagli:hover .nol-icona { transform: translateX(3px); }
@media (max-width: 640px) {
    .nol-flotta-gruppo-testa { flex-wrap: wrap; }
    .nol-flotta-gruppo-testa::after { display: none; }
}
.nol-flotta-griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 20px; }

/* La card della flotta (pagina e blocco Flotta) */
.nol-auto.nol-auto--flotta {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 12px;
    border: 1px solid #eef0f3;
    border-radius: 16px;
    box-shadow: 0 6px 20px -12px rgba(15, 23, 42, .25);
    transition: box-shadow .2s ease, transform .2s ease;
}
.nol-auto.nol-auto--flotta:hover { box-shadow: 0 14px 34px -16px rgba(15, 23, 42, .35); transform: translateY(-2px); }
.nol-auto--flotta .nol-auto-foto { border-radius: 12px; background: linear-gradient(180deg, #fff 0%, #f5f6f8 100%); }
.nol-auto--flotta .nol-auto-foto img { padding: 34px 14px 6px; }
.nol-auto-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 1;
    max-width: calc(100% - 150px);
    overflow: hidden;
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--nol-marchio-chiaro);
    color: var(--nol-marchio);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}
.nol-auto-evidenza {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    max-width: 120px;
    color: #4b5563;
    font-size: 12px;
    line-height: 1.3;
}
.nol-auto-evidenza .nol-icona { width: 22px; height: 22px; color: var(--nol-testo); }
/* Nei risultati della ricerca (dalla 1.2.477) la foto riempie il riquadro:
   pastiglia bianca in alto a destra, come lo sconto a sinistra */
.nol-auto:not(.nol-auto--flotta) .nol-auto-evidenza {
    top: 10px;
    right: 10px;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    max-width: calc(100% - 96px);
    padding: 4px 11px 4px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 1px 4px rgba(15, 23, 42, .14);
    color: var(--nol-testo);
    font-weight: 600;
}
.nol-auto:not(.nol-auto--flotta) .nol-auto-evidenza .nol-icona { flex: none; width: 17px; height: 17px; }
.nol-auto:not(.nol-auto--flotta) .nol-auto-evidenza > span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.nol-auto--flotta .nol-auto-corpo { flex: 1 1 auto; padding: 14px 8px 0; }
.nol-auto--flotta .nol-auto-nome { margin: 0 0 12px; font-size: 22px; font-weight: 800; }
.nol-auto--flotta .nol-auto-dati { gap: 10px 22px; color: #4b5563; font-size: 15px; }
.nol-auto--flotta .nol-auto-dati .nol-icona { width: 18px; height: 18px; }
.nol-auto-azioni {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    /* Nella card stretta "Dettagli veicolo" va sotto il pulsante: al centro */
    justify-content: center;
    gap: 12px 18px;
    margin: 16px 8px 4px;
    padding-top: 16px;
    border-top: 1px solid var(--nol-bordo);
}
.nol-auto-azioni .nol-bottone {
    display: inline-flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 13px 20px;
    font-size: 16px;
    white-space: nowrap;
}
.nol-auto-azioni .nol-bottone .nol-icona { width: 18px; height: 18px; color: #fff; }
.nol-auto-dettagli {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #4b5563;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}
.nol-auto-dettagli:hover { color: var(--nol-marchio); }
@media (prefers-reduced-motion: reduce) {
    .nol-auto.nol-auto--flotta, .nol-flotta-pastiglia { transition: none; }
    .nol-auto.nol-auto--flotta:hover { transform: none; }
}

/* ── Pagina della prenotazione: azioni (Aggiungi al calendario…) ────────── */
.nol-azioni-pren { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 4px; }
.nol-bottone-secondario {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border: 1px solid var(--nol-bordo);
    border-radius: 8px;
    background: #fff;
    color: var(--nol-testo);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}
.nol-bottone-secondario:hover { border-color: var(--nol-marchio); color: var(--nol-marchio); }
.nol-bottone-secondario .nol-icona { width: 18px; height: 18px; flex: none; }
.nol-fattura-nota { margin: 6px 0 0; }

/* ── Annullare dalla pagina della prenotazione ───────────────────────────── */
.nol-annullo-dettagli { margin-top: 10px; border-top: 1px solid var(--nol-bordo); }
.nol-annullo-dettagli > summary { padding: 12px 0 4px; color: #b91c1c; font-weight: 700; cursor: pointer; }
.nol-annullo-form { display: grid; gap: 12px; padding: 8px 0 4px; }
.nol-annullo-conferma { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.4; }
.nol-annullo-conferma input { flex: none; width: 20px; height: 20px; margin-top: 1px; }
.nol-bottone--pericolo { background: #b91c1c; }
.nol-bottone--pericolo:hover { background: #991b1b; }

/* ── Prenotazioni online sospese (noleggio/_sospese.twig) ──────────────────
   Il messaggio del noleggiatore e i telefoni delle sedi, al posto di ricerca
   e checkout; --card dentro il blocco con la foto (fondo scuro). */
.nol-sospese {
    margin: 20px 0;
    padding: 18px 20px;
    border: 1px solid var(--nol-bordo);
    border-left: 5px solid var(--nol-marchio);
    border-radius: 12px;
    background: #fff;
    color: var(--nol-testo);
}
.nol-sospese--card { margin: 16px 0 0; box-shadow: 0 10px 30px rgba(15, 23, 42, .18); }
.nol-sospese-titolo { margin: 0 0 6px; font-size: 18px; font-weight: 800; }
.nol-sospese-testo { margin: 0; line-height: 1.5; white-space: pre-line; }
.nol-sospese-sedi { display: grid; gap: 10px; margin: 14px 0 0; padding: 0; list-style: none; }
.nol-sospese-sedi li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; }
.nol-sospese-sede { font-weight: 700; }
.nol-sospese-sedi .nol-sede-bottone { flex: 0 1 auto; }

/* ── Avvisi "nuovo noleggio" (noleggio-avvisi.js): solo prenotazioni vere ──
   Sulla pagina dei risultati, in basso a sinistra, per pochi secondi; sul
   telefono a tutta larghezza. La bandiera è quella di intl-tel-input (16×12,
   ingrandita): niente emoji, che su Windows diventano due lettere. */
.nol-avvisi[hidden] { display: none; }
.nol-avvisi {
    position: fixed;
    z-index: 50;
    left: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom));
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 360px;
    padding: 10px 10px 10px 12px;
    border: 1px solid var(--nol-bordo, #e5e7eb);
    border-radius: 12px;
    background: #fff;
    color: var(--nol-testo, #1f2937);
    box-shadow: 0 10px 30px rgba(15, 23, 42, .16);
    font-size: 14px;
    line-height: 1.35;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .25s ease, transform .25s ease;
}
.nol-avvisi.is-visibile { opacity: 1; transform: none; }
.nol-avvisi-icona {
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #dcfce7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315803d' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") no-repeat center / 16px 16px;
}
.nol-avvisi-testo { margin: 0; min-width: 0; }
.nol-avvisi-titolo { display: block; margin-bottom: 1px; }
.nol-avvisi-messaggio { display: block; }
.nol-avvisi-bandiera {
    display: inline-block;
    width: 20px;
    height: 15px;
    margin: 0 2px;
    vertical-align: -2px;
    overflow: hidden;
}
.nol-avvisi-bandiera .iti__flag {
    display: block;
    transform: scale(1.25);
    transform-origin: 0 0;
}
.nol-avvisi-quando { display: block; margin-top: 2px; font-size: 12px; color: var(--nol-tenue, #6b7280); }
.nol-avvisi-chiudi {
    flex: none;
    align-self: flex-start;
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--nol-tenue, #6b7280);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}
.nol-avvisi-chiudi:hover { background: #f3f4f6; }
@media (max-width: 639px) {
    .nol-avvisi { left: 12px; right: 12px; max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
    .nol-avvisi { transition: none; transform: none; }
}

/* ── Blocco "Le nostre sedi" (page builder) ───────────────────────────────
   Una card per sede: indirizzo, telefono, orari, "Prenota qui" e
   "Indicazioni". Fuori dalla pagina /noleggio: i colori dalle variabili. */
.nol-sedi,
.nol-flotta-blocco { padding: 40px 16px; color: var(--nol-testo); }
/* Blocco "La nostra flotta": le card della pagina Flotta e il link a tutte */
.nol-flotta-blocco-tutte { display: flex; justify-content: center; margin: 20px 0 0; }
.nol-flotta-blocco-tutte .nol-sede-bottone { flex: 0 1 auto; padding: 11px 22px; }
.nol-sedi-dentro { max-width: calc(var(--container-max-width, 1280px) - 2rem); margin: 0 auto; }
.nol-sedi-titolo { margin: 0 0 6px; font-size: clamp(22px, 2.6vw, 30px); font-weight: 800; }
.nol-sedi-sotto { margin: 0 0 18px; color: var(--nol-tenue); }
.nol-sedi-griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.nol-sede {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 18px;
    border: 1px solid var(--nol-bordo);
    border-radius: 14px;
    background: #fff;
}
.nol-sede-nome { margin: 0 0 2px; font-size: 18px; font-weight: 800; }
.nol-sede-riga { display: flex; gap: 8px; margin: 0; font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.nol-sede-riga a { color: inherit; }
.nol-sede-nota { margin: 0; font-size: 13px; font-weight: 600; color: var(--nol-tenue); }
/* Le icone, disegnate con un'immagine SVG (come quelle della ricerca) */
.nol-sede-icona { flex: none; width: 18px; height: 18px; margin-top: 1px; background: no-repeat center / 18px 18px; }
.nol-sede-icona--luogo { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11.5a7 7 0 0 1 14 0C19 14.8 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E"); }
.nol-sede-icona--telefono { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2'/%3E%3C/svg%3E"); }
.nol-sede-icona--orari { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
.nol-sede-azioni { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 6px; }
.nol-sede-bottone {
    flex: 1 1 auto;
    padding: 9px 14px;
    border: 1px solid var(--nol-marchio);
    border-radius: 8px;
    background: #fff;
    color: var(--nol-marchio);
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
}
.nol-sede-bottone:hover { background: var(--nol-marchio-chiaro); }
.nol-sede-bottone--azione { border-color: var(--nol-azione); background: var(--nol-azione); color: #fff; }
.nol-sede-bottone--azione:hover { background: var(--nol-azione-scuro); }
/* Card per riga scelte nel blocco (Sedi, Flotta; senza scelta = automatico,
   le regole sopra). Dal telefono una sotto l'altra, dal tablet al massimo
   due, dal computer quante scelte. Due classi: battono .nol-griglia.is-schede */
.nol-righe.nol-per-riga-1,
.nol-righe.nol-per-riga-2,
.nol-righe.nol-per-riga-3,
.nol-righe.nol-per-riga-4 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) {
    .nol-righe.nol-per-riga-2,
    .nol-righe.nol-per-riga-3,
    .nol-righe.nol-per-riga-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
    .nol-righe.nol-per-riga-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .nol-righe.nol-per-riga-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}