:root {
    /* Brand Colors - Elegant Mediterranean Palette */
    --color-primary: #1a3636;
    --color-primary-dark: #0f2424;
    --color-secondary: #d6bd98;
    --color-accent: #4f6f52;
    --color-accent-dark: #3a5a40;
    --color-success: #2d6a4f;
    --color-danger: #bc4749;
    --color-danger-light: #f8d7da;
    
    /* Backgrounds */
    --color-bg-main: #f8f4e1;
    --color-bg-card: #ffffff;
    --color-bg-muted: #e9edc9;
    
    /* Text */
    --color-text-main: #1a3636;
    --color-text-muted: #606c38;
    --color-text-on-primary: #ffffff;
    
    /* Borders */
    --color-border: #ccd5ae;
}

body { 
    font-family: 'Inter', sans-serif; 
    background-color: var(--color-bg-main);
    color: var(--color-text-main);
}

/* Custom Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--color-bg-muted); }
::-webkit-scrollbar-thumb { background: #ccc; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #999; }

/* Flatpickr Customization */
.flatpickr-calendar { 
    box-shadow: 0 10px 25px rgba(0,0,0,0.1) !important; 
    border: none !important; 
    border-radius: 12px !important;
}

.flatpickr-day.selected, 
.flatpickr-day.startRange, 
.flatpickr-day.endRange, 
.flatpickr-day.selected.inRange, 
.flatpickr-day.startRange.inRange, 
.flatpickr-day.endRange.inRange, 
.flatpickr-day.selected:focus, 
.flatpickr-day.startRange:focus, 
.flatpickr-day.endRange:focus, 
.flatpickr-day.selected:hover, 
.flatpickr-day.startRange:hover, 
.flatpickr-day.endRange:hover, 
.flatpickr-day.prevMonthDay.selected, 
.flatpickr-day.prevMonthDay.startRange, 
.flatpickr-day.prevMonthDay.endRange, 
.flatpickr-day.prevMonthDay.selected.inRange, 
.flatpickr-day.prevMonthDay.startRange.inRange, 
.flatpickr-day.prevMonthDay.endRange.inRange, 
.flatpickr-day.nextMonthDay.selected, 
.flatpickr-day.nextMonthDay.startRange, 
.flatpickr-day.nextMonthDay.endRange, 
.flatpickr-day.nextMonthDay.selected.inRange, 
.flatpickr-day.nextMonthDay.startRange.inRange, 
.flatpickr-day.nextMonthDay.endRange.inRange {
    background: var(--color-accent) !important;
    border-color: var(--color-accent) !important;
}

.flatpickr-months .flatpickr-month {
    background: var(--color-primary) !important;
    color: white !important;
    fill: white !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months {
    background: var(--color-primary) !important;
}

.flatpickr-weekday {
    background: var(--color-primary) !important;
    color: rgba(255,255,255,0.7) !important;
}

/* Gallery Hover */
.gallery-img-hover:hover {
    filter: brightness(0.9);
    transform: scale(1.01);
}


/* --- Compattazione Lista Prenotazioni --- */

/* Riduce l'altezza e i margini della card */
#booking-list > div {
    padding: 10px 14px !important;
    margin-bottom: 6px !important;
    gap: 12px !important;
}

/* Stringe la sezione date (check-in/out) */
.date-badge {
    min-width: 42px !important; /* Molto più stretto */
}

/* Rimpicciolisce i numeri delle date */
.date-badge .text-xl { font-size: 1.1rem !important; line-height: 1 !important; }
.date-badge .text-lg { font-size: 1rem !important; line-height: 1 !important; }

/* Rimpicciolisce le etichette dei mesi */
.date-badge .text-\[9px\] {
    font-size: 8px !important;
    margin-top: 1px;
}

/* Riduce lo spazio del divisore (la freccia →) */
.flex.items-center.gap-2.border-r.border-gray-100.pr-4 {
    padding-right: 8px !important;
    gap: 4px !important;
}

/* Ottimizza il testo dell'ospite */
h3.font-bold {
    font-size: 0.95rem !important;
    margin-bottom: -2px;
}

/* Compattazione prezzi e stati (lato destro) */
.text-right .text-lg {
    font-size: 1.05rem !important;
    line-height: 1.1;
}

.text-right .text-\[10px\] {
    font-size: 8.5px !important;
    letter-spacing: -0.02em;
}

/* --- Restyling Evoluto Date --- */

/* Container principale delle date */
.date-badge-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--color-bg-muted); /* Colore crema/verde chiaro dai tuoi root */
    padding: 8px 4px;
    border-radius: 10px;
    min-width: 55px !important;
    border: 1px solid rgba(0,0,0,0.03);
}

/* Rimuoviamo il vecchio divisore con freccia */
.text-gray-300 { display: none !important; } 

/* Numeri del giorno */
.date-num {
    font-size: 1.2rem !important;
    font-weight: 800 !important;
    line-height: 0.9 !important;
    color: var(--color-primary);
}

/* Mese */
.date-month {
    font-size: 8px !important;
    font-weight: 900 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}

/* Separatore interno sottile */
.date-sep {
    width: 20px;
    height: 1px;
    background-color: var(--color-border);
    margin: 4px 0;
}

/* Stile speciale per il check-out (leggermente più opaco) */
.checkout-sub {
    opacity: 0.6;
}




/* Container per le due date affiancate */
.date-wrapper-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-right: 12px;
    border-right: 1px solid var(--color-border); /* La barra verticale */
    min-width: 90px;
}

/* Stile per il singolo blocco (In o Out) */
.date-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
}

.date-stack .num {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--color-primary);
}

.date-stack .mo {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-top: 2px;
}

/* Separatore testuale opzionale (se vuoi un simbolo tra le date oltre alla barra finale) */
.date-sep-mini {
    color: var(--color-border);
    font-size: 12px;
    font-weight: 300;
}