:root {
    --primary-color: #0C3C26;
    --secondary-color: #588157;
    --accent-color: #A3B18A;
    --background-light: #f5f5f5;
    --text-color: #333333;
    --text-muted: #777777;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--background-light);
    color: var(--text-color);
    line-height: 1.7;
    margin: 0;
}

h1, h2, h3 {
    color: var(--primary-color);
    font-weight: 700;
}

a {
    color: var(--secondary-color);
    text-decoration: none;
    transition: color 0.3s;
}

a:hover {
    color: var(--accent-color);
}

.btn-primary {
    background-color: var(--primary-color);
    border: none;
    color: #fff;
    padding: 1rem 2rem;
    border-radius: 0.5rem;
    font-weight: 600;
    transition: background 0.3s;
}

.btn-primary:hover {
    background-color: var(--secondary-color);
}

header.jumbotron {
    background-image: url('../immagini/paesaggio_bg.jpg');
    background-size: cover;
    background-position: center;
    color: #fff;
    text-align: center;
    padding: 10rem 2rem;
    position: relative; /* Rendi il jumbotron un contenitore per il posizionamento assoluto */
}

.headerlogo {
    position: absolute;
    left: -10px;
    top: 20px;
    z-index: 3;
}

.headerlogo img {
    width: 180px;
    height: auto;
    display: block;
}

.languageselector {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
}

.language-button {
    display: inline-block;
    margin-left: 10px;
    padding: 5px 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    text-decoration: none;
    color: #333;
    font-size: 0.9em;
    background-color: rgba(255, 255, 255, 0.7); /* Aggiungi uno sfondo semi-trasparente per leggibilità */
}

.language-button:hover {
    background-color: rgba(255, 255, 255, 0.9);
}

header.jumbotron::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1; /* Assicura che sia sotto il contenuto principale */
}

header.jumbotron .container {
    position: relative; /* Necessario per mettere il testo sopra l'overlay */
    z-index: 2;
}


.section {
    padding: 6rem 2rem;
}


.photo-carousel {
    position: relative; /* Necessario per il posizionamento assoluto delle frecce */
    padding: 0 30px; /* Aggiunge spazio ai lati per le frecce */
}

.slick-prev,
.slick-next {
    font-size: 0;
    line-height: 0;
    position: absolute;
    top: 50%;
    display: block;
    width: 30px; /* Aumenta l'area cliccabile se necessario */
    height: 30px; /* Aumenta l'area cliccabile se necessario */
    padding: 0;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    cursor: pointer;
    color: transparent;
    border: none;
    outline: none;
    background: transparent;
    z-index: 1;
}

.slick-prev {
    left: -30px; /* Sposta la freccia a sinistra dell'immagine */
}

.slick-next {
    right: -30px; /* Sposta la freccia a destra dell'immagine */
}

.slick-prev:before,
.slick-next:before {
    font-family: 'slick', serif;
    font-size: 30px; /* Regola la dimensione dell'icona */
    line-height: 1;
    opacity: .75;
    color: var(--primary-color); /* Usa la variabile CSS */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.slick-prev:hover:before,
.slick-next:hover:before {
    opacity: 1;
}

.photo-carousel img {
    width: 100%;
    border-radius: 1rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s;
}

.photo-carousel img:hover {
    transform: scale(1.03);
}

.slick-dots {
    display: flex;
    justify-content: center; /* Centra gli elementi figli orizzontalmente */
    align-items: center; /* Opzionale: centra verticalmente se necessario */
    list-style: none; /* Rimuove i punti elenco predefiniti */
    padding: 0;
    margin: 0; /* Rimuove i margini predefiniti */
}

.slick-dots li {
    margin: 0 10px; /* Aggiunge un po' di spazio tra i pallini */
}

/* Il resto del tuo CSS per i pallini rimane invariato */
.slick-dots li button {
    font-size: 0;
    line-height: 0;
    display: block;
    outline: none;
    width: 20px;
    height: 20px;
    padding: 5px;
    cursor: pointer;
    color: transparent;
    border: 0;
    background: transparent;
}

.slick-dots li button:before {
    font-family: 'slick', serif;
    font-size: 10px;
    line-height: 20px;
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    content: '•';
    text-align: center;
    color: var(--primary-color);
    opacity: 0.60;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.slick-dots li.slick-active button:before {
    opacity: 1;
}

ul li::before {
    content: none;
}

footer {
    background: var(--primary-color);
    color: #fff;
    text-align: center;
    padding: 3rem 1rem;
    margin-top: 5rem;
}


 .video-container {
     position: relative;
     padding-bottom: 56.25%; /* Proporzioni 16:9 (altezza / larghezza * 100) */
     height: 0;
     overflow: hidden;
     max-width: 100%;
     background: #000; /* Colore di sfondo opzionale */
     display: flex; /* Utilizza Flexbox per centrare */
     justify-content: center; /* Centra orizzontalmente */
     align-items: center; /* Centra verticalmente */
 }

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0; /* Assicura che non ci siano bordi */
    object-fit: cover;
}

.video-container-mp4 {
    position: relative; /* Utile per posizionare elementi figli in modo assoluto (es. controlli custom) */
    width: 100%;       /* Il contenitore occuperà la larghezza disponibile del suo genitore */
    max-width: 800px;  /* Imposta una larghezza massima per il contenitore del video (puoi cambiarla) */
    margin: 20px auto; /* Centra il contenitore orizzontalmente nella pagina e aggiunge 20px di margine sopra e sotto.
                           Questo sostituisce il padding che avevi, se era inteso per dare spazio *attorno* al video. */
    
    aspect-ratio: 16 / 9; /* FORZA IL CONTENITORE AD AVERE UN RAPPORTO D'ASPETTO 16:9 */
    background: #000;    /* Colore di sfondo del contenitore (visibile se il video non carica o ha letterbox) */
    overflow: hidden;    /* Nasconde eventuali parti del video che potrebbero sbordare (utile con object-fit: cover) */
}

/* Stile per l'elemento <video> che si presume sia un figlio diretto di .video-container-mp4 */
.video-container-mp4 video {
    width: 100%;       /* Il video occupa l'intera larghezza del .video-container-mp4 */
    height: 100%;      /* Il video occupa l'intera altezza del .video-container-mp4 */
    display: block;    /* Rimuove eventuale spazio extra che alcuni browser aggiungono sotto gli elementi inline/inline-block */
    object-fit: cover; /* Definisce come il video deve adattarsi al suo contenitore 16:9:
                           - 'cover': Riempie l'intero spazio 16:9, mantenendo l'aspect ratio del video. Se l'aspect ratio
                                      del video sorgente è diverso da 16:9, alcune parti del video potrebbero essere tagliate.
                           - 'contain': Mostra l'intero video, mantenendo l'aspect ratio. Se l'aspect ratio del video
                                        sorgente è diverso da 16:9, verranno aggiunte delle barre nere (letterboxing/pillarboxing).
                           Scegli quello che preferisci. Se il tuo video è già in 16:9, entrambi daranno risultati simili. */
}

ul {
    list-style: none;
    padding-left: 0;
}

.greencheckbox::before {
    content: '\2713';
    color: green; /* Ho cambiato il colore in verde come suggerito dal nome della classe */
    font-weight: bold;
    display: inline-block;
    width: 1.5em;
    margin-left: -1em;
}


.calendar {
    border: 1px solid #e0e0e0;
    border-radius: 0.75rem; /* Utilizzo di rem per dimensioni basate sulla root font-size */
    padding: 1.25rem; /* Utilizzo di rem per dimensioni responsabili */
    background-color: #f9f9f9; /* Leggermente più chiaro del fafafa */
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.05); /* Aggiunta di una leggera ombra */
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.3125rem; /* Utilizzo di rem */
}

.calendar-header {
    font-weight: 600; /* Peso del font numerico, più moderno */
    text-align: center;
    background-color: #e9ecef; /* Tonalità di grigio più moderna */
    padding: 0.5rem 0; /* Utilizzo di rem */
    border-radius: 0.375rem; /* Utilizzo di rem */
    color: #495057; /* Colore del testo più standard */
}

.calendar-cell {
    display: flex; /* Utilizzo di flexbox per centrare il contenuto */
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0.625rem 0; /* Utilizzo di rem */
    border-radius: 0.375rem; /* Utilizzo di rem */
    background-color: #ffffff;
    transition: transform 0.2s ease-in-out; /* Transizione più fluida */
    cursor: pointer; /* Indica che la cella è interattiva (anche se non lo è ancora) */
}

.calendar-cell.available {
    background-color: #e6ffe6; /* Tonalità di verde più moderna */
    color: var(--primary-color); /* Verde più vivace */
}

.calendar-cell.occupied {
    background-color: #ffe6e6; /* Tonalità di rosso più moderna */
    color: #dc3545; /* Rosso più vivace */
}

.calendar-cell.empty {
    background-color: transparent;
    pointer-events: none;
}

.calendar-cell:hover {
    transform: scale(1.1); /* Aumento leggermente maggiore sull'hover */
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1); /* Leggera ombra sull'hover */
}

.color-square {
    display: inline-block;
    width: 12px;  /* O la dimensione che preferisci */
    height: 12px; /* O la dimensione che preferisci */
    margin-right: 5px;
    vertical-align: middle;
    border: 1px solid #ccc; /* Opzionale */
}

.color-square.green {
    background-color: #e6ffe6;
}

.color-square.red {
    background-color: #ffe6e6;
}