/* ao_cal_book.css  VERSIONE UNIFICATA 23 04 26 */

/* Forza Tema Chiaro */
:root { color-scheme: light; }body { background: #ffffff !important; color: #000000 !important; font-family: sans-serif; }
:root {
    --calendar-border-color: #b4b4b4;
    --serpent: #737f987b;
    --serpent-ends: rgba(2, 104, 217, 0.49);
    --serpent-selected: #5c7fb0b3;
    --serpent-handle: rgba(255, 255, 255, 0.7);
    --btn-prenotazione: #1D4ED8;
    --btn-preventivo: #E5E7EB;
    --buk-header: #d9dfd8ec;
    /* --serpent-selected:  #e8831e;
    btn prenotazione #1565C0 / #1D4ED8
    verde x il pagamento #2E7D32 / #16A34A*/
}

@media (max-width: 768px) {
    :root {
        color-scheme: dark; /* Diciamo al browser che sappiamo di essere al buio */
        --calendar-border-color: rgb(133, 223, 236) !important;
        --serpent: #00eeff !important;
        --serpent-selected: #00aeff !important;
        --serpent-handle: rgb(255, 247, 0) !important;
    }
    .day-cell {
        color: inherit;
    }
}



.container-sandbox {
    font-size: 0.8rem;
}
/* --- NUOVO CALENDARIO COMPATTO --- */
#calendar-wrapper, .calendar-wrapper {
    max-width: 1000px;
    margin: 0.5rem auto;
    position: relative;
    font-size: 1.2rem;
}
/* Contenitore principale (la finestra con lo scroll) */
#calendario-garda-matrix {
    position: relative;
    height: 35rem;
    font-size: 2rem;
    overflow-y: auto;
    min-height: 15rem;
    max-height: 80vh;
    max-width: 99%;
    padding: 0 1px ;
    border: 1px solid #333;
    box-sizing: border-box;
}

.calendar-sticky-header {
    position: -webkit-sticky; /* Per Safari */
    position: sticky;
    top: 0;           /* Si ancora al TOP del div #calendario-garda-matrix */
    z-index: 100;     /* Sta sopra i nomi dei mesi che scorrono */
    background: rgb(151, 233, 242); /* Fondamentale: altrimenti vedi i mesi in trasparenza sotto l'header */
    width: 100%;
    border-bottom: 2px solid #5386ad;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Opzionale: dà profondità mentre i mesi passano sotto */
}


/* Assicurati che la week-header nell'header usi la stessa grid dei mesi */
.calendar-sticky-header .week-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    background: rgb(151, 233, 242);
}

/* Titolo del Mese (es. GENNAIO 2026) */
.mese-titolo {
    text-align: center;
    font-size: 1.1rem;
    margin: 20px 0 10px 0;
    color: #2c3e50;
    font-weight: bold;
    position: relative;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.cal-maniglia {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    opacity: 0.35;
    cursor: grab;
    touch-action: none;
    -webkit-user-drag: none;
    user-select: none;
}
.cal-maniglia:active { cursor: grabbing; opacity: 0.6; }
.cal-maniglia-l { left: calc(100% / 14 - 14px); }
.cal-maniglia-r { right: calc(100% / 14 - 14px); }



/* Header Giorni (Lun, Mar...) */
.week-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    margin-bottom: 4px;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none;     /* IE 10 e successivi */
    user-select: none;         /* Standard */
}

.weekday-name {
    text-align: center;
    font-size: 0.9rem;
    /* font-weight: bold; */
    color: #4e4e4e;
}
.calendar-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0;
    width: 100%;
    /* Rimuoviamo i bordi dal contenitore, li gestiscono le celle */
    border: none;
}

.day-cell, .cell-empty {
    /* Ogni cella ha il suo perimetro completo */
    @media (min-width: 768px) { border: 1px solid var(--calendar-border-color);}
    /* border: 1px solid var(--calendar-border-color); */
    /* Sovrapponiamo i bordi adiacenti per non farli diventare da 2px */
    margin-right: -1px;
    margin-bottom: -1px;
    padding-bottom: 2px;
    height: fit-content;
    background: #fff;
    /* min-height: 5rem; */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* box-sizing: border-box; */
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none;     /* IE 10 e successivi */
    user-select: none;         /* Standard */
}

.cell-empty {
    background: #fafafa;
    border-bottom: none;
    border-right: none;
}
/* Numero del giorno */
.day-number {
    font-size: 1rem;
    /* font-weight: 600; */
    /* margin-bottom: 2px; */
}

/* Giorno disabilitato: passato o sotto preavviso */
/* Impedisce la selezione del testo nei giorni disabilitati */
.day-cell.day-disabled {
    background-color: #f8f9fa !important;
    color: #cccccc !important;
    cursor: default;
    pointer-events: none; /* Impedisce il click */
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none;     /* IE 10 e successivi */
    user-select: none;         /* Standard */
}


/* Opacizziamo gli indicatori sSD nei giorni non prenotabili */
.day-disabled .apt-indicators {
    opacity: 0.2;
    filter: grayscale(100%);
}
.day-disabled .apt-bars {
    opacity: 0.35;
    filter: grayscale(60%);
}



/* --- Indicatori sSD --- */
/* .apt-indicators {
    display: flex;
    gap: 3px;
    font-size: 0.5rem;
    font-weight: bold;
    position: relative;
    margin: 0;
    z-index: 1;
} */

/* Contenitore dei pallini */
.apt-indicators {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 5px;
}


.apt-indicator { color: #69997db2; } /* Verde */
.apt-occupied { color: #e74d3c7d; text-decoration: line-through; } /* Rosso */

/* Il "pallotto" base */
.apt-status-dot {
    width: 7px;
    height: 7px;
    aspect-ratio: 1 / 1;
    border-radius: 50%; /* Lo rende perfettamente tondo */
    display: inline-block;
    border: 1px solid rgba(0,0,0,0.1);
    position: relative; /* Necessario per posizionare la X */

}





.status-admin::before,
.status-admin::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 250% !important; /* Più lunga del diametro per coprire la diagonale */
    height: 1px; /* Spessore esatto 1px */

    background-color: #000; /* Nero netto */
    pointer-events: none;
}
.status-admin::before {
    transform: translate(-50%, -50%) rotate(-45deg);
}
.status-admin::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}


/* Nasconde i prezzi nel calendario del Sandbox ma li lascia nel codice */
.day-prices {
    display: none ;
}
 /* i prezzi dei 3 apt forse solo admin PREZZI */
/* .day-prices {
    display: flex;
    justify-content: space-around;
    font-size: 12px;
    color: #033951;
    margin-top: 2px;
    font-family: monospace;
}
.price-min {
    flex: 1;
    text-align: center;
} */



/* Colore: Occupato (Rosso) — nascosto nel calendario pubblico per non confondere
   chi vede rosso e pensa "tutto occupato" anche se altri apt sono liberi.
   Originale: background-color: #ff4d4d7f; box-shadow: 0 0 3px rgba(255, 77, 77, 0.5);
   La dash ripristina con override nel suo CSS interno (dopo l'inclusione di questo file). */
.status-occupied:not(.status-external) {
    display: none;
}
/* closedext: mantiene la lancetta (status-external::before) ma senza pallino rosso */
.status-external.status-occupied {
    background-color: transparent;
    box-shadow: none;
}

/* Colore: Libero (Verde) */
/* .status-free {
    background-color: #2d6e487f;
    box-shadow: 0 0 3px rgba(46, 204, 113, 0.5);
} */


/* Colore: Chiusura Esterna Automatica (Rosso pulsante) */
/* ClosedExt: Pallino rosso sfumato + lancetta statica + apostrofo */
.status-external {
    /* background-color: #ff4d4d7f; */
    opacity: 0.85;
    /* width: 10px; */
    /* height: 10px; */
}

/* Lancetta statica a ore 13 (circa 60° in senso orario dal top) */
.status-external::before {
    content: '';
    opacity: 0.5;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1px;
    height: 6px;
    background: #000;
    transform-origin: bottom center;
    transform: translate(-50%, -100%) rotate(35deg);  /* Statica a 60° */
}





/* --- Stato Selezione (Serpente) --- */




.taglio-diagonale {
    /* Il gradiente usa le due variabili impostate da JS */
    background: linear-gradient(135deg, var(--color-prev) 50%, var(--color-curr) 50%) !important;
}
/* Sfondi per la Heatmap - Sincronizzati con il Javascript */
.day-cell.cell-free {
    background-color: #ffffff ;
}
.day-cell.cell-partial {
    background-color: #ffffff; /* era #e8f61d28 giallino (2 apt liberi) */
}
.day-cell.cell-almostfull {
    background-color: #ffffff; /* era #f68a1d58 arancione (1 apt libero) */
}
.day-cell.cell-full {
    color: black;
    background-color: #b311115c ; /* Grigio chiaro neutro */
}
/* Fix per il testo quando la cella è grigia (opzionale) */
.day-cell.cell-full .day-number {
    color: #214551b7;
}

/* 1. Regole comuni per tutto il corpo del serpente (Celle piene e Mezze celle) */
.day-cell.selected-start,
.day-cell.selected-end,
.day-cell.selected-range {
    /* Di base togliamo i laterali per far scorrere il colore */
opacity: 0.9;
}

/* 2. Mezza cella a DESTRA (Inizio/Coda) */
.day-cell.selected-start {
    /* background-color: transparent ; */
    background-image: linear-gradient(to right, transparent 50%, var(--serpent-ends) 50%);
}

/* 3. Mezza cella a SINISTRA (Fine/Testa) */
.day-cell.selected-end {
    /* background-color: transparent !important; */
    background-image: linear-gradient(to left, transparent 50%, var(--serpent-ends) 50%);
    /* Ripristiniamo il bordo destro per chiudere la cella verso l'esterno */
}

/* 4. Celle in mezzo (Pieno) */
.day-cell.selected-range {
    background-color: var(--serpent);
    background-image: none !important;
}



/* 6. Fix per il numero del giorno (deve stare sopra il colore) */
.day-cell .day-number {
    position: relative !important;
    z-index: 10 !important;
}



.selected-start,
.selected-end {
    position: relative; /* Necessario per posizionare le maniglie ::before e ::after */
}



/* Maniglia di INIZIO (Coda) */
.selected-start::before,
.selected-end::after {
    content: '';
    position: absolute;
    top: 20%;
    bottom: 20%;
    width: 4px;
    /* background: rgba(255, 255, 255, 0.7); */
    background: var(--serpent-handle);
    border-radius: 2px;
    left: 54% !important; /* Allineata al bordo della mezza cella destra */
    z-index: 30;
    animation: pulse-handle 2.5s infinite ease-in-out;
}

/* Maniglia di FINE (Testa) */
.selected-end::after {
    left: 40% !important; /* Allineata al bordo della mezza cella sinistra */
    z-index: 30;
}





.selected-range { cursor: grab; }
.selected-range:active { cursor: grabbing; }
.selected-start, .selected-end { cursor: ew-resize; }


#booking-info-bar {
    background: #fff;
    border-top: 1px solid #ddd;
    padding: 15px;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
}


.apt-status {
    font-size: 0.9rem;
    margin-bottom: 4px;
}
#info-dates { /* vedi apt-row */
    margin: 0 0 8px 0;
    font-size: 1.6rem;
    color: #11181f;
}

#info-details {
    overflow-anchor: none;
}

#info-details p {
    margin: 0;
    color: #7f8c8d;
    font-size: 0.9rem;
}


.btn-dynprenota  {
    box-shadow: 0 0 3px rgba(98, 161, 116, 0.5);
      /* cursor : pointer; */
    text-decoration:  none;
    font-weight:  'bold';
    background-color:  #48af606e ;
    font-size: 1.1em;
    color : #000000;
    padding : 16px 16px;
    border-radius : 5px;
    display : inline-block;
    font-size: 1.2rem;
    @media (max-width: 768px)
        {font-size: 0.9rem;
         Padding : 0.4rem;}
    font-weight: 500;
    margin-top: 1rem;
    transition: background-color 0.3s ease, transform 0.2s ease;
    white-space: normal;
    word-wrap: break-word;

}
.btn-dynprenota:hover {
    color:aliceblue;
    filter: brightness(1.12);
    transform: scale(1.01);
    --trans-time: 0.3s;
    transition: filter var(--trans-time) ease,
        transform var(--trans-time) ease,
        box-shadow var(--trans-time) ease,
        background-color var(--trans-time) ease, /* Aggiungila se cambi lo sfondo */
        color var(--trans-time) ease; /* Aggiungila se cambi il colore del testo */

    background-color:  #18772ed8 ;
    box-shadow: 0 0 25px 8px rgba(116, 165, 129, 0.7);
    cursor: pointer;

}

#btn-prenota {
    display: none; /* Appare via JS Blu pieno: #1565C0 / #1D4ED8*/
    margin-top: 15px;
    width: auto;
    min-width: 30vw;
    font-size: 1.2rem;
    padding: 12px;
    /* background: var(--btn-prenotazione); */
    background:  var(--btn-prenotazione);
    color: white;
    border: none;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.2s;
    margin: 15px auto 0 auto; /* Centra orizzontalmente e mantiene il margine top di 15px */
}
#btn-prenota.mostra {
    display: block;
}

#btn-prenota:hover {
    background: var(--btn-prenotazione);


}
#btn-prenota.disabled {
    background: #cccccc !important;
    cursor: not-allowed;
    opacity: 0.6;
    pointer-events: none; /* Impedisce il click anche se è un <div> o <a> */
}



/* Stile per il bottone in modalità "Aggiorna"  #F59E0B / #F97316*/
#btn-prenota.update-mode {
    background: #F59E0B !important;
    color:darkblue;
    font-size: 1.2rem;
}

.extra-btn-prenota{
    display: inline-block;
   margin-left: 10px;
   font-size: 0.9rem;
   font-style: normal;
   font-weight: 400;
   color: dimgray;
}

@media (max-width: 768px) {
    #btn-prenota {
    min-width: 30vw;
    font-size: 0.8rem;
    padding: 12px;
    /* background: var(--btn-prenotazione); */
    background:  var(--btn-prenotazione);
    color: white;
    font-weight: bold;
    margin: 15px auto 0 auto; /* Centra orizzontalmente e mantiene il margine top di 15px */
    }
#btn-prenota.update-mode {
    font-size: 1rem;
}
.extra-btn-prenota{
   font-size: 0.8rem;
}
}



.apt-price-label {
    font-size: 0.9rem;
    font-style: normal;
    font-weight: 400;
    color: rgb(66, 72, 86);
}

/* Contenitore della riga */
.apt-row {
    white-space: nowrap;
    display: block; /* Fondamentale per far stringere la sottolineatura */
    padding-bottom: 2px;
    width: 100%;
    align-items: baseline;
    text-wrap: pretty;
    text-align: left;
    font-size: 1rem;
    /* overflow-x: hidden; */
}

/* Sottolineatura dinamica solo quando selezionato .selected-apt .apt-row { */


/* Se è un suggerimento (arancio), cambiamo il colore del bordo */
/* .selected-apt.warning .apt-row {    border-bottom-color: #f39c12;} */


/* Nome dell'appartamento */
.apt-name {
    font-size: 1.1rem;
    font-weight: bold;
}

/* Stato base (Libero, Occupato, Cambia date) */
.apt-status {
    /* font-size: 0.95rem; */
    font-size: 1rem;
    font-weight: bold;
    font-weight: lighter;
    line-height: 0.2rem;
}

/* Varianti di colore per lo stato */
.status-free {
    color: #000904;
    background-color: #309c5d6f;
    text-decoration: underline;
    }
.status-busy { color: #7c292088; text-decoration: line-through; }
.status-suggest {
    color: #1b1203;
    font-size: 1rem;

}

/* Il suggerimento tra parentesi */
.apt-hint {
    color: #030d07;
    font-size: 0.95rem;
    font-weight: lighter;
}

.apt-ad-text {
    /* display: block; */
    font-size: 0.95em;
    font-style: italic;
    margin-bottom: 4px;
}

/* Sottolinea il nome quando la radio è checked *//* font-size: 1.2rem; */
input[type="radio"]:checked + label.apt-evidenzia {
    text-decoration: underline;
     font-size: 1.2em;
     color:green;
   text-shadow: 0 0 8px rgba(37, 211, 78, 0.6);

}

/* Applica queste regole di base alle celle */
.day-cell {
    /* Impedisce il menu contestuale (F12/Copia) e la selezione del testo */
    -webkit-touch-callout: none;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none;     /* IE 10 e successivi */
    user-select: none;         /* Standard */
    /* FONDAMENTALE: pan-y permette lo scroll verticale nativo,
       ma lascia a JS la gestione dei movimenti orizzontali */
    touch-action: pan-y;
    touch-action: auto;
}

/* Feedback visivo: il serpente si "illumina" quando lo agganci col Long Press o Drag */



/* STATO ATTIVO: BODY SNAKE */
.serpente-attivo .day-cell.selected-range {
    background-color:var(--serpent-selected) !important; /* Viola scuro deciso */
    color: white !important;
}

/* Qui scurisci il background-image (se usi gradienti per le mezze lune) */
/* .serpente-attivo .day-cell.selected-start,
.serpente-attivo .day-cell.selected-end {
    background-color: #5c7fb0 ;
} */

.serpente-attivo .day-cell.selected-start { /* coda SX */
     background-image: linear-gradient(to left,var(--serpent-selected)  50%, transparent 50%);
      /* background-color: #5c7fb0 ; */
}
.serpente-attivo .day-cell.selected-end { /* testa DX */
    background-image: linear-gradient(to right,var(--serpent-selected) 50%, transparent 50%);
}

/* Maniglie: le facciamo diventare bianco brillante quando "afferrate" */
.serpente-attivo .selected-start::before,
.serpente-attivo .selected-end::after {
    /* background: #ffffff !important; */
    width: 5px; /* Le ingrandiamo di 1px per farle sentire "sotto il dito" */
    transition: all 0.2s;
    animation: pulse-handle 1.5s infinite ease-in-out;
}
@keyframes pulse-handle {
    0% { transform: scaleY(1); opacity: 0.8; }
    50% { transform: scaleY(1.2); opacity: 1; }
    100% { transform: scaleY(1); opacity: 0.8; }
}


/* *** Il receptionist ***  */
.sugg-date {
    color: rgb(6, 43, 72);
    text-decoration: none;
    cursor: pointer;
    font-weight: 500;
    display: inline-block;
    font-size: calc(1em + 0.0203rem);
    background-color: rgb(171 206 244 / 79%);
    /* Padding ridotto al minimo: sopra/sotto quasi zero */
    padding: 0px 5px;
    margin: 0 1px;
    border-radius: 4px;
    border: 1px solid rgba(1, 73, 150, 0.2);
    /* Forziamo l'altezza del testo per non gonfiare il bottone */
    line-height: 1.5;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    /* Correzione millimetrica per allinearlo al testo circostante */
    vertical-align: middle;
    position: relative;
    top: -1px;
}

.sugg-date:hover {
    color: #ffffff;
    background-color: #014996;
    border-color: #014996;
    text-decoration: none;
    transform: scale(1.02); /* Rimosso translateY per evitare sbalzi con l'allineamento middle */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Contenitore dei micro-dati in alto nella cella */
.adm-rules-container {
    display: flex;
    justify-content: space-between;
    width: 100%;
    position: absolute;
    top: 2px;
    left: 0;
    padding: 0 5px;
    box-sizing: border-box;
    pointer-events: none; /* Fondamentale: non blocca il click sulla cella */
    z-index: 10;
    font-family: sans-serif;
}

/* Stile comune per Preavviso e MinStay */
.adm-info-preavviso,
.adm-info-minstay {
    font-size: 0.85rem;
    color: #1b1b1b;
    font-weight: 300;
    opacity: 0.8;
}

/* Stile specifico per le icone (orologio e luna) */
.adm-icon {
    font-size: 0.75rem;
    margin-left: 1px;
    vertical-align: baseline;
}

/* Esempio di personalizzazione rapida: */
/* Se vuoi il MinStay un po' più visibile in futuro, ti basta de-commentare qui: */
/* .adm-info-minstay {
    color: #0275d8;
    opacity: 1;
}
*/

/* ********** SEZIONE INSERIMENTO DATI EXTRA */
/* ********** SEZIONE INSERIMENTO DATI EXTRA */

#guest-booking-container,
#guest-booking-container *,
#guest-booking-container *::before,
#guest-booking-container *::after {
    box-sizing: border-box;
}

/* Contenitore principale Guest Modal */
#guest-booking-container {
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    color: #333;
    line-height: 1.5;
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

/* ========== MODAL E OVERLAY ========== */
#booking-modal-guest {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 95%;
    max-width: 500px;
    height: 95vh;
    background: white;
    z-index: 9000;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    border-radius: 12px;
    overflow: hidden;
    overscroll-behavior: contain; /* Stop refresh */
    -webkit-overflow-scrolling: touch; /* Scroll fluido iOS */
}

#booking-modal-content {
    flex: 1;
    overflow-y: auto; /* Permette scroll interno */
    overscroll-behavior: contain; /* Stop refresh */
    -webkit-overflow-scrolling: touch; /* Scroll fluido iOS */
}

#booking-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 1010;
}

/* ========== HEADER FISSO ========== */
.booking-header {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
    background: #c5caccec;
    background: var(--buk-header);
    position: sticky;
    top: 0;
    z-index: 100;
    flex-shrink: 0;
}

.back-btn {
    padding: 0;
    border: none;
    background: none;
    color: #666;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.9rem;
}

/* ========== BLOCCHI CONTENUTO ========== */
.booking-section {
    padding: 20px 15px;
    border-bottom: 8px solid #f9f9f9;
}

.booking-main-content {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 15px;
}

.booking-section-summary {
    width: 100%;
}

.section-title {
    font-weight: bold;
    font-size: 1rem;
    margin-bottom: 10px;
    display: block;
}

.micro-text {
    font-size: 0.75rem;
    color: #777;
    margin-top: 4px;
    display: block;
    line-height: 1.2;
}

.extra-completa {
    font-weight: 700;
    font-size: 1.1rem;
    margin-top: 5px;
    padding-left: 1rem;
}

/* ========== INPUT E FORM ========== */
.input-field {
    background-color: white;
    color: black;
    width: 100%;
    padding: 10px;
    margin-bottom: 8px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 0.9rem;
    box-sizing: border-box;
}

#guest-booking-container input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
    width: 20px;
    height: 20px;
    border: 2px solid #ccc;
    border-radius: 4px;
    background-color: white;
    color: black;
    cursor: pointer;
    display: grid;
    place-content: center;
    transition: all 0.2s ease-in-out;
    accent-color: gray;
}

/* ========== CONTROLLI OSPITI ========== */
.ospiti-selector {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 10px;
}

.btn-counter {
    width: 20px;
    height: 20px;
    color: black;
    border-radius: 50%;
    border: 1px solid #333;
    background: white;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.btn-counter:disabled {
    color: #aaa;
    border-color: #ccc;
    background: #f0f0f0;
    cursor: not-allowed;
}

.ospiti-btn {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    border: 1px solid #333;
    background: white;
    font-size: 1.2rem;
    cursor: pointer;
}

.display-val {
    font-size: 1rem;
    font-weight: bold;
    min-width: 15px;
    text-align: center;
}

/* ========== CHECKBOX EXTRA ========== */
.extra-item {
     -webkit-appearance: none;
    appearance: none;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid #eee;
    border-radius: 8px;
    background-color: whitesmoke;
}

/* ========== FOOTER STICKY E CTA ========== */
.booking-footer {
    position: sticky;
    bottom: 0;
    margin-top: auto;
    padding: 15px;
    background: var(--buk-header);
    box-shadow: 0 -5px 15px rgba(0,0,0,0.05);
    z-index: 10;
    border-top: 1px solid #f4f4f4;
}

.cta-button {
    width: 100%;
    padding: 15px;
    background: var(--btn-prenotazione);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-weight: bold;
    font-size: 1.2rem;
    cursor: pointer;
}

/* ========== SEZIONE PREVENTIVO E RIEPILOGO ========== */
.riepilogo-prezzi {
    background: #fff;
    padding: 15px;
    border-radius: 12px;
    border: 1px solid #eee;
    margin-top: 10px;
    font-family: sans-serif;
    line-height: 1.4;
    color: #333;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    font-size: 13px;
}

.riepilogo-row {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: flex-start;
}

.riepilogo-row span:first-child {
    flex: 1; /* permette di andare a capo */
    text-align: left; /* allineamento a sx */
}

.riepilogo-row strong {
    white-space: nowrap; /* prezzo non va a capo */
}

.riepilogo-header {
    border-bottom: 2px solid #f4f4f4;
    padding-bottom: 8px;
    margin-bottom: 12px;
}

/* ========== BOX SCONTO (VERDE) ========== */
.box-sconto {
    margin-top: 15px;
    background: #f8f9fa;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #eee;
    transition: all 0.3s ease;
}

/* Layout grid per box sconto */
.box-sconto > div {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
    align-items: flex-start;
}

.box-sconto input[type="radio"] {
    grid-row: 1;
    margin-top: 5px;
}

.box-sconto > div > div:first-of-type {
    grid-column: 2; /* contenuto principale a dx del radio */
}

/* Stella e dettagli tornano a sx sotto tutto */
.box-sconto > div > div:last-of-type {
    grid-column: 1 / -1;
    margin-left: 0;
}

.riga-totale {
    font-size: 15px;
    font-weight: 600;
    color: #666;
    margin-bottom: 2px;
}

.riga-immediato {
    color: #27ae60;
    font-weight: bold;
    font-size: 16px;
}

.prezzo-scontato {
    font-weight: bold;
    font-size: 0.9rem;
    display: inline;
    color: #061a0e;
}

.prezzo-grande {
    font-size: 17px;
}

.testo-risparmio {
    color: #1c7c44;
    font-size: 1.1rem;
    font-weight: bold;
    margin-top: 2px;
    display: block;
}

.riga-risparmio {
    color: #27ae60;
    font-size: 0.9rem;
    font-weight: bold;
    margin-top: 2px;
}

.testo-invecedi {
    font-size: 0.9rem;
    font-weight: normal;
    color: rgba(36, 50, 44, 0.546);
    display: inline;
}

/* ========== BOX CAPARRA (BLU) ========== */
.box-caparra {
    margin-top: 15px;
    border: 1px solid #d5e6f7;
    padding: 12px;
    border-radius: 8px;
    background-color: #f0f7ff;
    transition: all 0.3s ease;
}

/* Layout grid per box caparra */
.box-caparra > div {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
    align-items: flex-start;
}

.box-caparra input[type="radio"] {
    grid-row: 1;
    margin-top: 5px;
}

.box-caparra > div > div:first-of-type {
    grid-column: 2; /* contenuto principale a dx del radio */
}

/* Dettagli caparra tornano a sx sotto tutto */
.caparra-details {
    grid-column: 1 / -1;
    margin-top: 8px;
    margin-left: 0;
    padding-left: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 14px;
}

.riga-caparra-ora {
    font-size: 0.95em;
}

/* Titolo caparra che va a dx del radio */
.caparra-title {
    grid-column: 2;
    font-weight: bold;
    margin-bottom: 8px;
}

/* Note/stellina che tornano sotto a tutta larghezza */
.opzione-nota {
    grid-column: 1 / -1;
    font-size: 15px;
    color: #2e7d32;
    font-style: italic;
    margin-top: 4px;
}



body.modal-open {
    overscroll-behavior: none;
}



/* ========== OPZIONI PAGAMENTO ========== */
.opzioni-pagamento {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 15px;
}

/* ========== LOGICA SWITCH (Quando la checkbox caparra è attiva) ========== */
.is-caparra-active .riga-immediato,
.is-caparra-active .riga-risparmio {
    display: none !important;
}

.is-caparra-active .box-caparra {
    border-color: #004085;
    background-color: #e6f2ff;
}

.is-caparra-active .riga-caparra-ora {
    font-size: 16px;
    color: #004085;
}


/* sezione primo bottone vai a prenotazione subito sotto animazione */
.scopri-di-piu {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    z-index: 10;
}
.scroll-link {
    transition: all 0.3s ease; /* Rende l'effetto fluido e non a scatto */
}
.scroll-link:hover {
    background-color: transparent;
    transform: scale(1.05);

}
.scroll-link:hover span {
    color:green;
    text-shadow: 0 0 25px rgba(37, 211, 78, 0.597); /* Bagliore esterno */
}

.scroll-link {
    text-decoration: none;
    color: rgb(21, 42, 67); /* Cambia in base al colore della tua immagine */
    font-family: sans-serif;
    font-size: 14px;
    letter-spacing: 1px;
    text-transform: uppercase;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-shadow: 0px 2px 4px rgba(0,0,0,0.5); /* Per leggere bene su sfondo chiaro */
}



/* CHECKBOX SFONDO BIANCO SU MOBILE */
/* input[type="checkbox"] {
    accent-color: #1e5aa0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 1em;
    height: 1em;
    border: 2px solid #888;
    border-radius: 3px;
    background-color: #fff !important;
    cursor: pointer;
    position: relative;
}
input[type="checkbox"]:checked {
    background-color: #1e5aa0;
    border-color: #1e5aa0;
}
input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 3px;
    top: 0px;
    width: 0.3em;
    height: 0.55em;
    border: 2px solid #fff;
    border-top: none;
    border-left: none;
    transform: rotate(45deg);
} */

/* Checkbox: sfondo bianco forzato — su mobile Safari/Chrome il rendering nativo ignora background-color,
   quindi usiamo appearance:none e ridisegniamo manualmente */
input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    width: 1.1em;
    height: 1.1em;
    border: 1.5px solid #888;
    border-radius: 3px;
    background-color: #fff !important;
    vertical-align: middle;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    transition: background-color 0.15s, border-color 0.15s;
}
input[type="checkbox"]:checked {
    background-color: #1a73e8 !important;
    border-color: #1a73e8;
}
input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0.3em;
    height: 0.55em;
    border: 2px solid #fff;
    border-top: none;
    border-left: none;
    transform: translate(-50%, -60%) rotate(45deg);
}

/* RADIOBOX */
    input[type="radio"] {
        -webkit-appearance: none !important;
        -moz-appearance: none;
        appearance: none !important;
        width: 16px;
        height: 16px;
        border: 2px solid #888;
        border-radius: 50%;
        background-color: #fff !important;
        cursor: pointer;
        position: relative;
        flex-shrink: 0;
    }
    input[type="radio"]:checked {
        border-color: #1e5aa0;
    }
    input[type="radio"]:checked::after {
        content: '';
        position: absolute;
        left: 3px;
        top: 3px;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background-color: #1e5aa0;
    }





/* L'iconcina del mouse animata */
.mouse-icon {
    width: 26px;
    height: 40px;
    border: 2px solid rgb(51, 80, 120);
    border-radius: 15px;
    position: relative;
}

.wheel {
    width: 4px;
    height: 8px;
    background: rgb(45, 87, 122);
    border-radius: 2px;
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    animation: scroll-wheel 2.5s infinite;
}
/* end sezione primo bottone vai a prenotazione subito sotto animazione */

@keyframes scroll-wheel {
    0% { opacity: 1; top: 6px; }
    100% { opacity: 0; top: 20px; }
}



/* MENU */
.sync-dd-separator {
    border: none;
    border-top: 1px solid #ccc;
    margin: 4px 8px;
}

/************************* BOTTONE PROCEDI SOTTO CALENDARIO */

.btn-procedi-cal {
    display: none;
    margin: 8px auto 4px;
    padding: 7px 22px;
    background: #1D4ED8;
    color: #fff;
    font-size: 0.95rem;
    font-weight: 600;
    border: 2px solid #1D4ED8;
    border-radius: 999px;
    cursor: pointer;
    letter-spacing: 0.01em;
    animation: procedi-pulse 2s ease-in-out infinite;
    transition: background 0.2s, color 0.2s;
}
.btn-procedi-cal:hover {
    background: #fff;
    color: #1D4ED8;
}
@keyframes procedi-pulse {
    0%, 100% { box-shadow: 0 2px 8px rgba(29,78,216,0.25); }
    50%       { box-shadow: 0 4px 16px rgba(29,78,216,0.50); }
}

/************************* REGOLE CHAT SARA IN MODALE */

@keyframes sara-alive {
    0%, 100% {
        transform: translateX(-70%) translateY(0) scale(1);
        filter: drop-shadow(0px 4px 6px rgba(0,0,0,0.25)) brightness(1);
    }
    50% {
        transform: translateX(-76%) translateY(-1px) scale(1.03);
        filter: drop-shadow(2px 6px 10px rgba(0,0,0,0.35)) brightness(1.08);
    }
}

@keyframes bolla-pulsa {
    0%, 70%, 100% { opacity: 0; transform: translateX(-50%) translateY(4px) scale(0.9); }
    20%, 50%      { opacity: 1; transform: translateX(-50%) translateY(0) scale(1.08); }
}

@keyframes sara-parla {
    0%, 100% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
}

@keyframes sara-parla-glow {
    0%, 100% { filter: drop-shadow(0 0 3px rgba(0, 122, 255, 0.6)) drop-shadow(0 0 1px #007AFF); }
    50%       { filter: drop-shadow(0 0 4px rgba(0, 122, 255, 0.65))   drop-shadow(0 0 4px #007AFF); }
}

.sara-bolla {
    position: absolute;
    bottom: 2.5em;
    left: 70%;
    transform: translateX(-50%);
    background: #4a7fbf;
    color: #fff;
    padding: 3px 8px;
    border-radius: 10px;
    font-size: 10px;
    white-space: nowrap;
    pointer-events: none;
    animation: bolla-pulsa 8s ease-in-out 1 forwards;
}

#sara-fumetto {
    margin: 0 14px 10px;
    background: #fff;
    border: 0.5px solid #ccc;
    border-radius: 4px 12px 12px 12px;
    padding: 10px 12px;
    display: none;
    flex-direction: column;
    gap: 8px;
    font-family: inherit;
    position: sticky;
    top: 60px;
    z-index: 99;
}

#sara-fumetto-testo {
    font-size: 12px;
    color: #333;
    line-height: 1.5;
    min-height: 18px;
    max-height: 140px;
    overflow-y: auto;
}

#sara-fumetto-input {
    flex: 1;
    font-size: 12px;
    padding: 5px 8px;
    border-radius: 6px;
    border: 0.5px solid #ccc;
    outline: none;
    background: #f8f8f8;
    color: #333;
}

#sara-fumetto-send {
    font-size: 12px;
    padding: 5px 10px;
    border-radius: 6px;
    border: 0.5px solid #ccc;
    background: #e6f1fb;
    color: #185fa5;
    cursor: pointer;
}

#sara-fumetto-loading {
    font-size: 11px;
    color: #888;
    display: none;
}

#sara-fumetto-avatar {
    position: relative;
}

#sara-fumetto-avatar img {
    transition: filter 0.2s ease;
}

#sara-fumetto-avatar.parlando img {
    animation: sara-parla-glow 1.5s ease-in-out infinite;
}

#sara-fumetto-avatar.sara-intro img {
    animation: sara-parla-glow 2s ease-in-out 2;
}


/* end ********** SEZIONE INSERIMENTO DATI EXTRA */

@media (max-width: 768px) {


.testo-risparmio {
    font-size: 0.9rem;
}
.riga-risparmio {
    font-size: 0.8rem;
}
.testo-invecedi {
font-size: 0.85rem;
}
.prezzo-scontato {
    font-size: 0.8rem;
}

.cta-button {
    border-radius: 8px;
    font-weight: bold;
    font-size: 0.9rem;
    padding: 8px;
}

/* Mantieni il layout grid anche su mobile */
    .box-sconto > div,
    .box-caparra > div {
        gap: 8px; /* Gap leggermente ridotto per mobile */
    }

    /* Riduci padding box su mobile */
    .box-sconto,
    .box-caparra {
        padding: 10px;
    }

    .riepilogo-row {
        gap: 12px; /* Gap ridotto su mobile */
    }

    #map-target-container iframe,
    #googlemap-wrapper{
    height: 200px !important;

    }
    #googlemap-wrapper{
    width: 90%;
    }

    #calendario-garda-matrix {
        height: 18rem;
        font-size: 1rem;
        position: relative;
        overflow: auto;
    }






.mese-titolo {
        font-size: 0.8rem;
        }
    .weekday-name {
        font-size: 0.7rem;
        }

    .day-number {
        font-size: 0.7rem;
        font-weight: 500;
        }
    #info-dates {
        font-size: 0.8rem;
        }
    .apt-name {
        font-size: 0.8rem;
        font-weight: bold;
    }
    .apt-hint {
        font-size: 0.85rem;
        font-weight: lighter;
        }

/* Suggerimento date - più grande */
.apt-hint-dates {
    color: #030d07;
    font-size: 0.95rem; /* o 1rem se vuoi ancora più grande */
    font-weight: lighter;
}

    .apt-status {
        font-size: 0.9rem;
        text-align: left;
    }
    /* Il "pallotto" base */
    .apt-status-dot {
        width: 5px;
        height: 5px;
    }
    .adm-info-preavviso,
    .adm-info-minstay {
    font-size: 0.90rem;
    opacity: 0.8;
    }
    /* Stile specifico per le icone (orologio e luna) */
    .adm-icon {
        font-size: 0.55rem;
    }
    .apt-bar-row {
        font-size: 0.90rem;
    }

}/* end media */

.pill-price {
    font-size: 0.65rem;
    opacity: 0.7;
    font-weight: normal;
    pointer-events: none;
}
@keyframes _shake-cal-kf {
    0%,100% { transform: translateX(0); }
    20%      { transform: translateX(-6px); }
    40%      { transform: translateX(6px); }
    60%      { transform: translateX(-4px); }
    80%      { transform: translateX(4px); }
}
._shake-cal { animation: _shake-cal-kf 0.4s ease; }

#calendario-garda-matrix-wrap {
    display: flex;
    flex-direction: column;
    max-width: 99%;
}

#calendario-garda-resize {
    width: 100%;
    max-width: 99%;
    height: 22px;
    background: #e8e8e8;
    border: 1px solid #ccc;
    border-top: 2px solid #bbb;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: ns-resize;
    touch-action: none;
    flex-shrink: 0;
    user-select: none;
    color: #888;
    font-size: 14px;
    letter-spacing: 3px;
}

/* salva-prev pulse — 3 lampeggi discreti al primo MOD2 della sessione */
@keyframes salvaPrevPulse {
    0%   { background: transparent; box-shadow: none; transform: scale(1); }
    40%  { background: rgba(24,95,165,0.08); box-shadow: 0 0 14px rgba(24,95,165,0.28); transform: scale(1.01); }
    100% { background: transparent; box-shadow: none; transform: scale(1); }
}
.salva-prev-pulse {
    animation: salvaPrevPulse 2s ease-in-out 3;
    border-radius: 6px;
}

/* §CAL-GRIGLIA — barre orizzontali per apt (CAL_GRIGLIA=true) */
/* Cerca §CAL-GRIGLIA per trovare questo blocco */
.apt-bars {
    width: 100%;
    align-self: stretch;
    padding: 0 2px;
    box-sizing: border-box;
}
.apt-bar-row {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 20px;
    margin: 1px 0;
    border-radius: 2px;
    padding: 0 3px;
    box-sizing: border-box;
    overflow: hidden;
    font-size: 0.85rem;
    color: #222;
    line-height: 1;
    transition: height 0.15s;
}
/* §QUARTI — nei giorni di check-out/check-in la riga non è colorata per intero.
   La quota di colore NON è simmetrica fra i due pubblici (vedi
   memory/project_barre_apt_gradiente_checkinout.md): il JS imposta `width` inline
   caso per caso (cliente 25/25, albergatore check-in 75/check-out 25, turnover
   50/50 senza verde in mezzo) — il 25% qui sotto è solo il fallback di default,
   quasi sempre sovrascritto dall'inline.
   In assoluto per non spostare il testo della barra. Lo spigolo tondo sta dove il
   colore incontra il bianco, mai sul lato che tocca la cella vicina. */
.apt-bar-q {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 25%;
    /* niente pointer-events:none — il tooltip deve sapere su quale quarto si trova il
       mouse, per mostrare chi esce (quarto sinistro) invece di chi entra */
}
.apt-bar-q-esce  { left: 0;  border-radius: 0 10px 10px 0; }
.apt-bar-q-entra { right: 0; border-radius: 10px 0 0 10px; }
/* i quarti sono in assoluto e coprirebbero prezzo/preavviso/minstay (flex-item non
   posizionati): il testo va rialzato sopra di loro, altrimenti sparisce nelle celle
   di check-in/check-out.
   pointer-events:none è indispensabile: gli span coprono quasi tutta la riga, e se
   ricevessero il mouse il tooltip non saprebbe più su quale quarto si trova (mostrava
   sempre chi entra, tranne nei pochi pixel liberi fra un numero e l'altro). */
.apt-bar-row > span { position: relative; z-index: 1; pointer-events: none; }
/* il "libero" non è un quarto: riempie lo spazio che avanza nella cella.
   Stondato SOLO dal lato dove incontra un colore dentro la cella; dal lato del bordo
   resta dritto, perché lì la disponibilità prosegue nel giorno adiacente (il 20 col
   verde a destra che continua sul 21, il 22 col verde a sinistra che viene dal 21). */
.apt-bar-q-free  { width: auto; border-radius: 0; }
.apt-bar-q-esce.apt-bar-q-free  { border-radius: 0 10px 10px 0; }
.apt-bar-q-entra.apt-bar-q-free { border-radius: 10px 0 0 10px; }
/* usate solo dal ramo vista utente, che stonda il verde dal lato dove tocca un blocco */
.apt-bar-q-free.q-tondo-sx { border-top-left-radius: 10px;  border-bottom-left-radius: 10px; }
.apt-bar-q-free.q-tondo-dx { border-top-right-radius: 10px; border-bottom-right-radius: 10px; }

/* §APT-BAR-LABEL — nome apt sulla prima cella visibile di ogni riga settimana (solo utente) */
.cal-griglia-utente .apt-bar-label {
    position: absolute;
    left: 0; right: 0;
    font-size: 0.6rem;
    font-weight: 600;
    color: rgba(0,0,0,0.7);
    text-shadow: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
    line-height: 1;
}
/* Vista utente: apt attivo vivido, altri molto sbiaditi — stessa altezza */
#calendario-garda-matrix.cal-griglia-utente.cal-apt-standard  .apt-bar-row:not([data-apt="standard"]),
#calendario-garda-matrix.cal-griglia-utente.cal-apt-superior  .apt-bar-row:not([data-apt="superior"]),
#calendario-garda-matrix.cal-griglia-utente.cal-apt-deluxe    .apt-bar-row:not([data-apt="deluxe"]) {
    opacity: 0.3;
}
#calendario-garda-matrix.cal-griglia-utente.cal-apt-standard  .apt-bar-row[data-apt="standard"],
#calendario-garda-matrix.cal-griglia-utente.cal-apt-superior  .apt-bar-row[data-apt="superior"],
#calendario-garda-matrix.cal-griglia-utente.cal-apt-deluxe    .apt-bar-row[data-apt="deluxe"] {
    filter: saturate(2.2) brightness(0.88);
    opacity: 1 !important;
}

/* §CAL-GRIGLIA-SERPENTE — gap tra settimane */
#calendario-garda-matrix.cal-griglia-serpente .calendar-row {
    row-gap: 8px;
}

/* §CAL-GRIGLIA-SERPENTE — serpente solo sulla riga .day-number quando CAL_GRIGLIA attivo */
#calendario-garda-matrix.cal-griglia-serpente .day-cell.selected-start,
#calendario-garda-matrix.cal-griglia-serpente .day-cell.selected-end,
#calendario-garda-matrix.cal-griglia-serpente .day-cell.selected-range {
    background-color: transparent !important;
    background-image: none !important;
    opacity: 1;
    cursor: default;
}
/* nasconde le maniglie ::before/::after sulla .day-cell — le ricreiamo su .day-number */
#calendario-garda-matrix.cal-griglia-serpente .day-cell.selected-start::before {
    content: none !important;
}
#calendario-garda-matrix.cal-griglia-serpente .day-cell.selected-end::after {
    width: 0 !important;
    opacity: 0 !important;
    animation: none !important;
}
/* cursori solo sulla riga .day-number */
#calendario-garda-matrix.cal-griglia-serpente .day-cell.selected-range .day-number { cursor: grab; }
#calendario-garda-matrix.cal-griglia-serpente .day-cell.selected-range:active .day-number { cursor: grabbing; }
#calendario-garda-matrix.cal-griglia-serpente .day-cell.selected-start .day-number,
#calendario-garda-matrix.cal-griglia-serpente .day-cell.selected-end .day-number { cursor: ew-resize; }
/* .day-number occupa tutta la larghezza della riga e diventa anchor per le maniglie */
#calendario-garda-matrix.cal-griglia-serpente .day-number {
    display: block;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
    position: relative;
}
/* maniglie su .day-number (start=coda, end=testa) */
#calendario-garda-matrix.cal-griglia-serpente .day-cell.selected-start .day-number::before,
#calendario-garda-matrix.cal-griglia-serpente .day-cell.selected-end .day-number::after {
    content: '';
    position: absolute;
    top: 20%;
    bottom: 20%;
    width: 4px;
    background: var(--serpent-handle);
    border-radius: 2px;
    left: 54%;
    z-index: 30;
    animation: pulse-handle 2.5s infinite ease-in-out;
}
#calendario-garda-matrix.cal-griglia-serpente .day-cell.selected-end .day-number::after {
    left: 40%;
}
#calendario-garda-matrix.cal-griglia-serpente .day-cell.selected-range .day-number {
    background-color: var(--serpent);
    border-radius: 0;
}
#calendario-garda-matrix.cal-griglia-serpente .day-cell.selected-start .day-number {
    background-image: linear-gradient(to right, transparent 50%, var(--serpent-ends) 50%);
    border-radius: 50% 0 0 50%;
}
#calendario-garda-matrix.cal-griglia-serpente .day-cell.selected-end .day-number {
    background-image: linear-gradient(to left, transparent 50%, var(--serpent-ends) 50%);
    border-radius: 0 50% 50% 0;
}
/* Stato attivo (serpente-attivo) */
#calendario-garda-matrix.cal-griglia-serpente.serpente-attivo .day-cell.selected-range .day-number {
    background-color: var(--serpent-selected) !important;
    color: white !important;
}
#calendario-garda-matrix.cal-griglia-serpente.serpente-attivo .day-cell.selected-start .day-number {
    background-image: linear-gradient(to left, var(--serpent-selected) 50%, transparent 50%);
    border-radius: 50% 0 0 50%;
}
#calendario-garda-matrix.cal-griglia-serpente.serpente-attivo .day-cell.selected-end .day-number {
    background-image: linear-gradient(to right, var(--serpent-selected) 50%, transparent 50%);
    border-radius: 0 50% 50% 0;
}
/* overlay sulle barre apt — segue la forma del serpente */
:root { --griglia-overlay: rgba(0,0,0,0.15); }
/* range e start usano ::after (::before di start è annullato) */
#calendario-garda-matrix.cal-griglia-serpente .day-cell.selected-range::after,
#calendario-garda-matrix.cal-griglia-serpente .day-cell.selected-start::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
    z-index: 5;
}
#calendario-garda-matrix.cal-griglia-serpente .day-cell.selected-range::after {
    background: var(--griglia-overlay);
}
#calendario-garda-matrix.cal-griglia-serpente .day-cell.selected-start::after {
    background: linear-gradient(to right, transparent 50%, var(--griglia-overlay) 50%);
}
/* end usa ::before (::after è occupato dalla maniglia originale) */
#calendario-garda-matrix.cal-griglia-serpente .day-cell.selected-end::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(to right, var(--griglia-overlay) 50%, transparent 50%);
    pointer-events: none;
    z-index: 5;
}
/* stato attivo: stesse direzioni del normale, non invertite */
#calendario-garda-matrix.cal-griglia-serpente.serpente-attivo .day-cell.selected-start::after {
    background: linear-gradient(to right, transparent 50%, var(--griglia-overlay) 50%);
}
#calendario-garda-matrix.cal-griglia-serpente.serpente-attivo .day-cell.selected-end::before {
    background: linear-gradient(to right, var(--griglia-overlay) 50%, transparent 50%);
}