:root {
    --primary: #1e293b;
    --accent: #475569;
    --holiday: #ef4444; 
    --bg: #ffffff;      
    --card-bg: #f1f5f9; 
}

/* BLOCCO ANTI-DARK MODE */
@media (prefers-color-scheme: dark) {
    :root {
        --primary: #1e293b !important;
        --accent: #475569 !important;
        --bg: #ffffff !important;
        --card-bg: #f1f5f9 !important;
    }
    body { background: var(--bg) !important; color: var(--primary) !important; }
    .calendar-controls, .calendar-grid, #bookingForm, input, textarea, .slot, .privacy-box {
        background: var(--card-bg) !important; 
        color: var(--primary) !important; 
    }
}

body { margin: 0; font-family: 'Inter', sans-serif; background: var(--bg); color: var(--primary); font-size: 0.95rem; }

/* Contenitore allineato alla larghezza della sezione Joomla sottostante */
.container { width: 100%; max-width: 1180px; margin: 0 auto; padding: 20px; box-sizing: border-box; }
h1 {
    margin: 8px 0 26px;
    text-align: center;
    font-family: Inter, "Segoe UI", Arial, sans-serif;
    font-size: clamp(2rem, 4vw, 3.35rem);
    font-weight: 850;
    line-height: 1.08;
    letter-spacing: -2px;
    color: #172033;
}

/* COMPATTATO: Controlli del calendario */
.calendar-controls { 
    display: flex; justify-content: space-between; align-items: center; 
    margin-bottom: 10px; background: var(--card-bg); padding: 10px 20px; 
    border-radius: 0; border: 1px solid #e2e8f0; 
}
.nav-buttons { display: flex; gap: 6px; }
.nav-buttons button { 
    width: 38px; height: 38px; border-radius: 0; border: 1px solid #e2e8f0; 
    background: #ffffff; cursor: pointer; display: flex; align-items: center; justify-content: center;
    color: var(--accent); transition: all 0.2s ease;
}

/* COMPATTATO: Griglia del calendario */
.calendar-grid { 
    display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; 
    background: var(--card-bg); padding: 12px; border-radius: 0; border: 1px solid #e2e8f0; 
}
.day-name { text-align: center; font-size: 0.7rem; font-weight: 800; color: #64748b; text-transform: uppercase; padding-bottom: 5px; }

/* RIDOTTO: Altezza celle (da 70px a 55px) */
.calendar-day { 
    height: 55px; display: flex; flex-direction: column; align-items: center; justify-content: center; 
    border-radius: 0 !important; background: var(--accent); color: #ffffff !important; 
    cursor: pointer; font-weight: 700; transition: 0.2s; border: 1px solid #334155;
    position: relative; font-size: 0.9rem;
}
.calendar-day.selected { background: #1e293b !important; color: white !important; border: 2px solid #000; }
.calendar-day.past { background: #cbd5e1 !important; color: #64748b !important; cursor: not-allowed; opacity: 0.6; }

.calendar-day.is-holiday, .calendar-day.is-sunday, .calendar-day.is-full-booked { 
    background: #fff5f5 !important; color: var(--holiday) !important; border: 2px solid var(--holiday) !important; 
}
.holiday-name { 
    opacity: 0; 
    transition: opacity 0.2s ease;
    font-size: 0.5rem; font-weight: 800; text-transform: uppercase; text-align: center; margin-top: 3px; 
}
.calendar-day:hover .holiday-name { opacity: 1; }

/* COMPATTATO: Form di prenotazione */
#bookingForm { background: var(--card-bg); padding: 20px 25px; border-radius: 0; border: 1px solid #e2e8f0; margin-top: 20px; }
.slots-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; margin-bottom: 20px; }
.slot { padding: 10px; border: 2px solid #e2e8f0; border-radius: 0; cursor: pointer; text-align: center; font-weight: 700; background: #fff; font-size: 0.85rem; }
.slot:has(input:checked) { background: var(--accent); color: white; border-color: var(--accent); }
.slot input { display: none; }

.slot.full, .slot.disabled, .slot:has(input[disabled]) { 
    background: var(--holiday) !important; 
    color: white !important; 
    border-color: var(--holiday) !important; 
    cursor: not-allowed; 
}

.input-main-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
input { width: 100%; padding: 12px; border: 1px solid #e2e8f0; border-radius: 0; background: #ffffff; box-sizing: border-box; font-size: 0.9rem; }
.notes-field { grid-column: span 2; }
.notes-field label { display: block; margin-bottom: 7px; font-size: 0.82rem; font-weight: 800; color: #334155; }
.notes-field label span { font-weight: 500; color: #64748b; }
.notes-field textarea { width: 100%; padding: 12px; border: 1px solid #e2e8f0; border-radius: 0; background: #ffffff; color: var(--primary); box-sizing: border-box; font: inherit; line-height: 1.45; resize: vertical; min-height: 96px; }
.notes-field textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

.privacy-box { 
    grid-column: span 2; display: flex; align-items: flex-start; gap: 8px; 
    padding: 12px; background: #ffffff; border-radius: 0; border: 1px solid #e2e8f0;
    font-size: 0.8rem; color: #475569; line-height: 1.3;
}
.privacy-box input { width: auto; margin-top: 3px; }

.btn-submit { grid-column: span 2; padding: 15px; background: var(--accent); color: white; border: none; border-radius: 0; font-weight: 800; cursor: pointer; font-size: 1rem; }
.btn-submit:hover { background: #1e293b; }

@media (max-width: 768px) {
    .container { padding: 10px; }
    .calendar-grid { grid-template-columns: repeat(7, 1fr); gap: 4px; padding: 8px; }
    .calendar-day { height: 50px; font-size: 0.85rem; }
    .day-name { font-size: 0.6rem; }
    .input-main-grid { grid-template-columns: 1fr; }
    .notes-field, .privacy-box, .btn-submit { grid-column: span 1; }
    .calendar-controls { flex-direction: column; gap: 8px; }
}