/* 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-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;
    resize: vertical;
    overflow-y: auto; /* Questo è il div che "comanda" lo sticky */
    min-height: 15rem;
    max-height: 80vh;
    max-width: 99%;
    padding: 0 1px ;
    border: 1px solid #333;
}

.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: white; /* 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;
}

/* 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;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none;     /* IE 10 e successivi */
    user-select: none;         /* Standard */
}



/* 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: #999;
}
.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%);
}



/* --- 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) */
.status-occupied {
    background-color: #ff4d4d7f;
    box-shadow: 0 0 3px rgba(255, 77, 77, 0.5);
}

/* 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: #e8f61d28; /* Azzurrino tenue */
}
.day-cell.cell-almostfull {
    background-color: #f68a1d58; /* Azzurrino tenue */
}
.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) 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) 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 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.02);
    --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.05); /* 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: 80vh;
    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"] {
    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;
}

.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 {
    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: 14px;
    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;
}

/* ========== 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.1);

}
.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 */
}



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



/* 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;
        resize: vertical;
    }



#calendario-garda-matrix::after {
    content: "";
    position: sticky;
    float: right;
    bottom: 0;
    right: 0;
    margin-top: -10px; /* Lo "tira su" sopra le celle */
    margin-right: 0px;
    width: 10px;
    height: 10px;
    cursor: nwse-resize;
    background: linear-gradient(135deg,
        transparent 45%,
        #000 45%, #000 55%,
        #fff 55%, #fff 65%,
        #000 65%, #000 75%,
        #fff 75%, #fff 85%,
        #000 85%, #000 95%,
        transparent 95%);
    z-index: 999 !important;
    pointer-events: all;
}

#calendario-garda-matrixxx {
    width: 80%;
    padding-left: 5px;
    padding-right: 15px; /* Più spazio a destra per la maniglia */
    /* box-sizing: border-box; */ /* Essenziale per non far allargare il div */
    margin: 10px !important;
}

.container-mesi-scrollxx {
    width: 240px ;
    margin: 5px ;
}



.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;
    }

}/* end media */