/* ===========================================================
    SFONDO E LAYOUT GENERALE
=========================================================== */
body {
    background: #ffffff !important;/* Sfondo principale BIANCO */
       margin: 0;
    /*font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;*/
}
body {
    background: radial-gradient(circle at top, #1e293b, #020617);
    color: #ffffff;
    min-height: 100vh;
    margin: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.card.bg-gradient {
    background: linear-gradient(135deg, rgba(15,23,42,0.95), rgba(30,64,175,0.85));
    backdrop-filter: blur(18px);
    color: #ffffff;
}

.card {
    border-radius: 1.5rem;
}

.card-header {
    padding: 1rem 1.5rem;
}

.card-body {
    padding: 1.25rem 1.5rem;
}

#box-dettagli p,
#box-dettagli h6,
#box-dettagli small,
#card-stagionale label,
#card-stagionale h5,
#card-stagionale p,
#card-stagionale small {
    color: #ffffff;
}

#card-stagionale input.form-control {
    color: #000;
    background-color: #f9fafb;
}


/* ===========================================================
    STILE MAPPA (INTEGRATO DA mappa.html)
=========================================================== */


svg#mappa {
    width: 90%;
    height: auto;
    background: #ffffff;
    display: block;
}

/* transizioni generali poligoni */
polygon {
    transition: fill 0.2s ease-in-out, opacity 0.2s ease-in-out, filter 0.2s ease, stroke 0.2s ease;
    cursor: pointer;
}

/* Colori originali della mappa */
.cls-1 { fill: lightgreen; stroke: #000; stroke-miterlimit: 10; stroke-width: 0.5; }
.stag2 { fill: LightSeaGreen; stroke: #000; stroke-miterlimit: 10; }
.stag1 { fill: lightgray; stroke: #000; stroke-miterlimit: 10; stroke-width: 0.0; }

.grande { fill: darkorange; }
.lago { fill: aqua; }

/* strutture/appartamenti */
.app { fill: #f9ec06; stroke: #000; }
.cls-3 { fill:#3fa9f5; opacity:.57; }
.cls-6 { fill:#cbd5e1; }
.cls-7 { fill:#94a3b8; }

/* -----------------------------------------------------------
    HOVER E INTERAZIONI
------------------------------------------------------------ */

/* Nessun ingrandimento, solo glow blu */
polygon[data-nome]:hover {
    filter: drop-shadow(0 0 8px rgba(59,130,246,0.9));
}

/* Hover rosso (preso dalla tua mappa originale) */
polygon:hover {
    stroke: red;
    stroke-width: 1px;
}

/* Piazzole stagionali: devono restare cliccabili */
.stag1 {
    cursor: pointer !important;
}

/* Effetto oro sulle standard libere */
.cls-1:hover {
    fill: #FFD700 !important;
    opacity: .8;
}

/* Se occupata (stile tipo VikBooking) */
.vbsm-busy-shape,
.cls-1.vbsm-busy-shape {
    fill: #faf7f7 !important;
    opacity: .9;
    stroke: black;
    stroke-width: .5px;
}

/* Hover su occupata = non cliccabile per prenotare (ma noi lo usiamo solo per info) */
.cls-1.vbsm-busy-shape:hover {
    cursor: not-allowed;
}


/* ===========================================================
    TESTI SULLA MAPPA (NUMERI PIAZZOLE)
=========================================================== */

text { 
    pointer-events: none;
}

.number-label {
    font: 700 12px/1 "Arial Rounded MT Bold", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
    fill: #000;
    text-anchor: middle;
    dominant-baseline: middle;
    paint-order: stroke;
    stroke: #fff;
    stroke-width: 2px;
}

.Ngrande {
    text-align: center;
    font-size: 8.5rem;
    font-weight: 700;
    text-shadow: 15px 15px 30px rgba(0,0,0,.2);
}


/* ===========================================================
    PANNELLO LATERALE DETTAGLI PRENOTAZIONE
=========================================================== */

/* --- STILI GLOBALI E PANNELLO LATERALE (TEMA SCURO) --- */
#side-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: 0; 
    height: 100%;
    
    /* CORREZIONE: Padding zero quando chiuso */
    padding: 0; 
    
    background-color: rgba(0, 0, 0, 0.9);
    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.8);
    /* CORREZIONE: Aggiunto padding alla transizione */
    transition: width 0.3s ease-in-out, padding 0.3s ease-in-out; 
    
    overflow-x: hidden; 
    /* CORREZIONE: Permette lo scroll verticale */
    overflow-y: auto; 
    
    z-index: 1000;
    color: white; 
}

#side-panel.open {
    width: 350px; 
    padding: 20px; 
}

.side-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #666;
    margin-bottom: 15px;
    padding-bottom: 10px;
}

.side-panel-header h2, .side-panel-header div {
    color: white; 
}

#side-panel-close {
    background: none;
    border: none;
    font-size: 2em;
    cursor: pointer;
    line-height: 1;
    color: white;
}

/* --- STILI DATI VIKBOOKING (ALLINEAMENTO A SINISTRA) --- */
.side-panel-body dl {
    display: block; 
    margin: 0;
    padding: 0;
    border: none; 
    background-color: transparent; 
}

/* FIX: MARGINE SUPERIORE TITOLO SEZIONE DATI AZZERATO */
.side-panel-body h3:first-child {
     margin-top: 0;
}

.side-panel-body h3 {
     color: white;
     margin-top: 20px;
}

.side-panel-body dt {
    font-weight: bold;
    padding: 5px 0 0 0; 
    margin-top: 5px; 
    border-bottom: none;
    text-align: left; 
    color: #ccc;
    text-transform: uppercase;
}

/* FIX SPAZIATURA INIZIALE DT */
.side-panel-body dl dt:first-of-type {
    margin-top: 0 !important;
}

.side-panel-body dd {
    display: block; 
    margin-left: 0;
    padding: 0 0 5px 15px; 
    border-bottom: 1px dashed #444; 
    font-weight: 600; 
    text-align: left; 
    margin-bottom: 0;
    color: white; 
}

.side-panel-body dd:last-of-type {
     border-bottom: none;
}

/* STILE PER ALLINEARE OSPITI SULLA STESSA RIGA */
#sp-occupancy {
    display: flex;
    justify-content: space-between; 
    padding: 0 0 5px 0 !important; 
    border-bottom: 1px dashed #444;
    margin-left: 15px;
}

#sp-occupancy div {
    white-space: nowrap; 
    font-size: 0.9em; 
}

/*========================================
        --- STILI MAPPA SVG --- 
 =========================================*/
        .checkout-today-shape {
            fill: white !important;
            stroke: red !important; 
            stroke-width: 4px !important;
            /* Per portare in primo piano su poligoni fratelli */
            transform: translateZ(1px); 
            position: relative; 
            z-index: 10000;
            cursor: pointer;
        }