/* --- Stili per il Loading Screen --- */
#loader-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #1a1a1aff; /* Sfondo nero come richiesto */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999; /* Assicura che sia sopra tutto il resto */
    transition: opacity 0.7s ease, visibility 0.7s ease; /* Transizione più morbida */
}

/* Regola per nascondere immediatamente il loader se l'html ha la classe 'loader-hidden' */
html.loader-hidden #loader-wrapper {
    opacity: 0;
    visibility: hidden;
    transition: none; /* Nessuna transizione quando è nascosto di default */
}

.loader-logo {
    width: 100px;
    height: auto;
    animation: wobble 1.8s ease-in-out infinite, reveal-bottom-to-top 1s ease-out forwards;
    filter: invert(1); /* Rende il logo nero bianco */
    clip-path: inset(100% 0 0 0); /* Inizialmente nascosto dal basso */
}

/* Nuova animazione "wobble" (oscillante) */
@keyframes wobble {
  0%, 100% { transform: translateX(0%) rotate(0deg); }
  15% { transform: translateX(-15%) rotate(-5deg); }
  30% { transform: translateX(10%) rotate(3deg); }
  45% { transform: translateX(-10%) rotate(-3deg); }
  60% { transform: translateX(5%) rotate(2deg); }
  75% { transform: translateX(-2%) rotate(-1deg); }
}

/* Nuova animazione per rivelare il logo dal basso verso l'alto */
@keyframes reveal-bottom-to-top {
    0% {
        clip-path: inset(100% 0 0 0); /* Completamente nascosto dal basso */
    }
    100% {
        clip-path: inset(0 0 0 0); /* Completamente visibile */
    }
}

html {
    scroll-behavior: smooth; /* Abilita lo scorrimento fluido */
}

/* --- Animazioni Personalizzate per il Cambio Pagina (View Transitions) --- */

/* Definiamo le nuove animazioni di scorrimento */
@keyframes slide-to-left {
    from { transform: translateX(0); }
    to { transform: translateX(-30%); opacity: 0; }
}

@keyframes slide-from-right {
    from { transform: translateX(30%); opacity: 0; }
    to { transform: translateX(0); }
}

/* Applichiamo le animazioni al cambio pagina */
::view-transition-old(root) {
    animation: 400ms cubic-bezier(0.4, 0, 1, 1) both slide-to-left;
}
::view-transition-new(root) {
    animation: 400ms cubic-bezier(0, 0, 0.2, 1) both slide-from-right;
}

/* Stili generali per resettare margini e padding */
body {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: "Red Hat Display", sans-serif;
    background-color: #f3f0ce;
}

/* Classe per nascondere elementi visivamente ma mantenerli accessibili per screen reader e SEO */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --- Keyframes per l'animazione dello sfondo --- */
@keyframes scrollBackground {
    from { background-position-x: 0; }
    to { background-position-x: -1920px; } /* Scorrimento verso sinistra */
}

/* Sfondo sfocato per le pagine interne */
.inner-page-bg::before {
    content: '';
    position: fixed; /* Fissa lo sfondo durante lo scroll */
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-image: url('../images/backlanding.webp');
    background-color: #f3f0ce;
    background-size: cover;
    background-position: center center;
    filter: blur(10px); /* Effetto sfocatura */
    z-index: -1; /* Mette lo sfondo dietro a tutto */
    animation: scrollBackground 60s linear infinite;
    display: none;
}

/* --- Stili per la Landing Page --- */
.landing-container {
    display: flex; /* Attiva Flexbox per un allineamento facile */
    flex-direction: column; /* Dispone gli elementi in colonna (verticalmente) */
    justify-content: center; /* Centra verticalmente */
    align-items: center; /* Centra orizzontalmente */
    height: 100vh; /* Occupa il 100% dell'altezza dello schermo */
    text-align: center;
    padding: 20px; /* Aggiunge un po' di spazio sui lati */
    position: relative; /* Necessario per z-index */
    z-index: 10; /* Assicura che il contenuto sia sopra gli asset animati */
    box-sizing: border-box; /* Assicura che il padding non aumenti la dimensione totale */
    
    /* Stili per lo sfondo animato */
    background-image: url('../images/backlanding.webp');
    background-color: #1a1a1a;
    background-size: cover;
    background-position: center center;
    background-repeat: repeat-x;
    animation: scrollBackground 60s linear infinite;
}

/* Override per la Home Page con nuovi asset */
.home-page .landing-container {
    background-image: none; /* Rimuove l'immagine di sfondo precedente */
    background-color: #1a1a1a; /* Mantiene il colore di sfondo scuro */
    background-color: transparent; /* Rende trasparente il container per mostrare gli asset sotto */
    animation: none; /* Rimuove l'animazione di sfondo precedente */
    pointer-events: none; /* Permette ai click di passare agli asset sottostanti */
}

/* Imposta lo sfondo scuro direttamente sul body per la home page */
body.home-page {
    background-color: #1a1a1a;
    background-color: #f3f0ce;
}

/* Inverte i colori del logo nella home page per renderlo visibile su sfondo scuro */
.home-page .logo {
    filter: invert(1);
    filter: none;
}

.glass-container {
    background: rgba(244, 190, 190, 0.066); /* Sfondo semi-trasparente */
    backdrop-filter: blur(4px); /* Effetto sfocatura */
    -webkit-backdrop-filter: blur(12px); /* Supporto per Safari */
    border-radius: 30px; /* Angoli arrotondati */
    border: 1px solid rgba(255, 255, 255, 0.18); /* Bordo sottile e traslucido */
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1); /* Ombra leggera */
    padding: 30px 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: auto; /* Riabilita i click per i bottoni e il contenuto */
}

/* Animazione bagliore a impulso per il logo */
@keyframes logo-glow-pulse {
    0%, 85% {
        filter: drop-shadow(0 0 0 rgba(255, 4, 3, 0));
    }
    92% {
        filter: drop-shadow(0 0 15px rgba(255, 4, 3, 0.6));
    }
    100% {
        filter: drop-shadow(0 0 0 rgba(255, 4, 3, 0));
    }
}

.logo {
    max-width: 180px; /* Imposta una larghezza massima per il logo */
    height: auto; /* Mantiene le proporzioni */
    animation: logo-glow-pulse 8s infinite ease-in-out; /* Bagliore ogni 8 secondi */
}

.claim {
    color: #333; /* Colore nero/scuro */
    font-size: 12px; /* Dimensione ridotta */
    font-weight: 500;
    margin: 15px 0 30px 0; /* Margine sopra e sotto il claim */
    text-transform: uppercase;
    letter-spacing: 1px;
}

.button-container {
    display: flex;
    flex-direction: column; /* Assicura che i bottoni rimangano in colonna */
    gap: 15px; /* Aggiunge spazio tra i bottoni */
}

.btn {
    display: block;
    display: flex; /* Usa Flexbox per l'allineamento */
    justify-content: center; /* Centra orizzontalmente il contenuto */
    align-items: center; /* Centra verticalmente il contenuto */
    padding: 12px 25px;
    min-width: 200px;
    background-color: #f3f0ce;
    color: #ff0403; /* Testo rosso */
    text-decoration: none; /* Rimuove la sottolineatura dei link */
    border-radius: 8px; /* Angoli arrotondati */
    border: 2px solid #ff0403; /* Bordo rosso */
    font-size: 18px;
    font-family: "Red Hat Display", sans-serif; /* Forza il font corretto anche sui bottoni */
    font-weight: 700; /* Testo più in grassetto per leggibilità */
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease; /* Transizione per l'hover */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08); /* Ombra leggera per profondità */
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease; /* Transizione per l'hover */
    text-align: center; /* Centra il testo all'interno del bottone */
    cursor: pointer; /* Assicura che il cursore sia corretto anche per i tag <button> */
}

.btn:hover {
    background-color: #ff0403; /* Sfondo rosso al passaggio */
    color: #f3f0ce; /* Testo chiaro al passaggio */
    transform: scale(1.05); /* Ingrandisce leggermente il bottone */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.12); /* Ombra più pronunciata al passaggio */
}

/* Stile specifico per il bottone "Il Salotto" nella homepage */
.btn.btn-salotto {
    color: #5b5bffff;
    border-color: #5b5bffff;
}

.btn.btn-salotto:hover {
    background-color: #5b5bffff;
    color: #f3f0ce;
}

/* Stile specifico per il bottone "Il Brunch" nella homepage */
.btn#brunch-btn, .btn#brunch-btn:hover {
    background-color: #487a7bff;
    color: #f3f0ce;
}

/* Stile specifico per il bottone "Cooking Experience" nella homepage */
.btn#cooking-btn {
    color: #e67e22ff;
    border-color: #e67e22ff;
    /* Forza la data ad andare a capo e stare sotto "Shai Cooking" */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    white-space: nowrap; /* Impedisce al testo di andare a capo */
}

.btn#cooking-btn:hover {
    background-color: #e67e22ff;
    color: #f3f0ce;
}

/* Stile specifico per il bottone "Transatlantica" nella homepage */
.btn#transatlantica-btn {
    color: #28220bff;
    border-color: #e4a04eff;
}

.btn#transatlantica-btn:hover {
    background-color: #e4a04eff;
    border-color: #e4a04eff;
    color: #f3f0ce;
}

/* Stile specifico per il bottone "Fela! Meets SUNNYFOOD" nella homepage */
.btn[href="transatlantica.html"] {
    color: #28220bff;
    border-color: #e4a04eff;
}

.btn[href="transatlantica.html"]:hover {
    background-color: #006a68ff; /* Nuovo colore hover richiesto */
    border-color: #006a68ff;
    color: #f3f0ce;
}

/* Stile specifico per il bottone di prenotazione nel pop-up promo */
.btn.btn-promo-booking {
    border-color: #019e51ff;
    color: #019e51ff;
    margin-top: 15px;
}

/* Stile specifico per il bottone di prenotazione nel pop-up promo */
.btn.btn-promo-booking:hover {
    background-color: #019e51ff; /* Sfondo verde al passaggio */
    color: #f3f0ce; /* Testo crema al passaggio */
}

/* Gestione testo bottone per mobile/desktop */
.btn .mobile-text {
    display: none;
}


/* --- Stili per il Music Player --- */
#music-player-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin: 30px auto; /* Centra verticalmente e aggiunge margine sopra e sotto */
    margin-top: 30px;
    gap: 20px; /* Aumentato lo spazio per una migliore leggibilità */
    margin: 0; /* Rimosso il margine */
    padding: 10px 20px;
    background: #f3f0ce; /* Colore panna */
    border-radius: 100px; /* Forma a pillola */
    border: none; /* Bordo rosso per coerenza */
    width: auto;
    max-width: 350px; /* Aumentata larghezza per il testo */
    width: 100%;
    max-width: none; /* Rimosso il limite di larghezza */
    box-sizing: border-box; /* Assicura che padding e bordo non alterino la larghezza totale */
    position: relative; /* Necessario per z-index */
    z-index: 100; /* Assicura che sia sopra gli asset animati */
}

.player-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0 5px 0 0; /* Aggiunto spazio a destra */
    width: 30px;
    height: 30px;
    color: #ff0403; /* Colore rosso */
}

.player-btn svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
    transition: transform 0.2s ease;
}

.player-btn:hover {
    transform: scale(1.1);
}

#track-info {
    flex-grow: 1;
    text-align: left;
    color: #ff0403;
    overflow: hidden;
    white-space: nowrap;
    font-size: 14px;
}

.track-title {
    font-weight: 700;
    /* Rimuoviamo text-overflow e overflow per permettere l'animazione */
}

/* Stile per l'animazione di scorrimento (marquee) */
.track-title.scrolling span {
    /* Sposta il testo a destra del contenitore per iniziare l'animazione fuori schermo */
    transform: translateX(100%);
    animation: scroll-text 15s linear infinite;
    display: inline-block; /* Necessario per applicare la trasformazione */
    white-space: nowrap; /* Impedisce al testo di andare a capo */
}

@keyframes scroll-text {
    0% {
        transform: translateX(100%); /* Parte da destra */
    }
    100% {
        transform: translateX(-100%); /* Si sposta completamente a sinistra */
    }
}

.track-title:not(.scrolling) {
    text-overflow: ellipsis; /* Applica i puntini solo se non sta scorrendo */
    overflow: hidden; /* Nasconde il testo in eccesso solo se non sta scorrendo */
}

.track-artist {
    font-size: 12px;
    opacity: 0.8;
    text-overflow: ellipsis;
    overflow: hidden;
}
.volume-control {
    display: flex;
    align-items: center;
    gap: 8px;
}

.volume-icon {
    width: 22px;
    height: 22px;
    fill: #ff0403; /* Colore rosso */
    opacity: 1;
}

#volume-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100px;
    height: 4px;
    background: rgba(255, 4, 3, 0.3); /* Sfondo rosso traslucido */
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}

/* --- Stili per le Pagine Interne (menu, eventi, etc.) --- */
.page-container {
    padding: 40px;
    max-width: 800px;
    margin: 40px auto;
    background-color: #f3f0ce;
    position: relative; /* Necessario per z-index */
    z-index: 10; /* Assicura che il contenuto sia sopra gli asset animati */
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    margin-top: 60px; /* 
    margin-top: 60px;
}
.inner-page-bg .page-container {
    background: transparent; /* Rimuoviamo lo sfondo dal contenitore principale */
    backdrop-filter: none;
    border: none;
    box-shadow: none;
}

.page-container h1 {
    color: #ff0403;
    background-color: #f3f0ce; /* Aggiungiamo lo sfondo al box del titolo */
    padding: 20px;

    /* Sostituzione del bordo con la cornice personalizzata rossa */
    border-style: solid;
    border-width: 25px;
    border-image-source: url('../images/custom-pattern-red.svg');
    border-image-slice: 30;
    border-image-repeat: round;

    margin-bottom: 20px;
    font-size: 36px; /* Aumentata la dimensione del testo */
    text-transform: uppercase; /* Testo tutto maiuscolo */
    font-weight: 900; /* Imposta il font in grassetto "heavy" */
    text-align: center; /* Centra il titolo principale */
}

.back-link {
    display: block; /* Lo trasforma in un blocco per poterlo centrare */
    width: fit-content; /* La sua larghezza si adatta al testo */
    margin: 30px auto 0 auto; /* Margine sopra e centrato orizzontalmente */
    color: #ff0403;
    text-decoration: none;
    font-weight: bold;
}

.back-link:hover {
    text-decoration: underline;
}

/* --- Stile per il bottone "Torna su" --- */
.back-to-top-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: rgba(255, 4, 3, 0.7); /* Rosso semi-trasparente */
    color: #f3f0ce;
    width: 45px;
    height: 45px;
    line-height: 45px;
    text-align: center;
    border-radius: 50%;
    text-decoration: none;
    font-size: 24px;
    z-index: 1000;
    opacity: 0; /* Nascosto di default */
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.back-to-top-btn.show {
    opacity: 1;
    visibility: visible;
}

.back-to-top-btn:hover {
    background-color: rgba(255, 4, 3, 1); /* Rosso pieno al passaggio */
}

/* --- Stili per il Footer --- */
.site-footer {
    background-color: #ff0403;
    color: #f3f0ce;
    padding: 25px 40px; /* Padding ottimizzato */
    font-size: 14px;
    line-height: 1.6;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 30px; /* Spazio tra le colonne */
    position: relative; /* Necessario per z-index */
    z-index: 100; /* Assicura che sia sopra gli asset animati */
}

.footer-left, .footer-right {
    text-align: left;
}

.footer-right {
    text-align: right;
}

.site-footer p {
    margin: 0 0 5px 0; /* Margine solo in basso */
}

.site-footer a {
    color: inherit; /* Eredita il colore del testo dal footer */
    text-decoration: none; /* Rimuove la sottolineatura di default */
}

.site-footer a:hover {
    text-decoration: underline; /* Aggiunge la sottolineatura al passaggio del mouse */
}

/* === Media Queries per il Responsive Design === */
@media (max-width: 767px) {
    .site-footer {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 20px 15px;
        font-size: 12px; /* Riduci la dimensione del font */
    }
    .site-footer p {
        margin: 0 0 3px 0; /* Riduci il margine tra i paragrafi */
    }
    .footer-left, .footer-right {
        text-align: center;
    }
}

@media (max-width: 600px) {
    /* Landing Page */
    .logo {
        max-width: 150px;
        margin-bottom: 0;
    }

    .button-container {
        align-items: center; /* Forza il centraggio dei bottoni */
        width: 90%; /* Occupa il 90% della larghezza dello schermo */
    }

    .btn {
        min-width: auto; /* Rimuove la larghezza minima fissa per adattarsi al container */
        width: 100%; /* Occupa tutta la larghezza del suo contenitore */
        box-sizing: border-box; /* Assicura che padding e bordo non alterino la larghezza totale */
    }

    /* Riduci la dimensione del font per il bottone dell'evento su mobile */
    #promo-event-btn {
        font-size: 16px;
    }

    /* Nasconde il testo desktop e mostra quello mobile nel bottone */
    .btn .desktop-text {
        display: none;
    }

    .btn .mobile-text {
        display: inline;
    }

    /* Riduci la dimensione del sottotitolo nei bottoni su mobile */
    .btn small {
        font-size: 14px;
        font-weight: 500;
    }

    /* Per il bottone Shai Cooking, la data deve rimanere sulla stessa riga */
    .btn#cooking-btn small {
        margin-left: 5px; /* Aggiunge un piccolo spazio tra "Shai Cooking" e la data */
    }

    /* Pagine Interne (Menu, Eventi) */
    .page-container {
        margin-top: 50;
        margin-right: 0;
        margin-bottom: 0;
        padding: 25px; /* Mantiene un po' di padding interno */
        border-radius: 0; /* Niente angoli arrotondati per un look a schermo intero */
        box-shadow: none; /* Rimuove l'ombra, più pulito su mobile */
    }

    /* Calendario su mobile: rende le celle più quadrate */
    .day-cell {
        aspect-ratio: auto;
        height: auto; /* L'altezza si adatterà per mantenere il rapporto */
    }
}

/* --- Stili per i bottoni di navigazione rapida nel menu --- */
.jump-links {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 40px;
    flex-wrap: wrap; /* Manda a capo i bottoni su schermi piccoli */
}

.jump-btn {
    padding: 10px 20px;
    background-color: transparent;
    color: #ff0403;
    border: 2px solid #ff0403;
    border-radius: 8px;
    text-decoration: none;
    font-family: "Red Hat Display", sans-serif; /* Assicura l'uso del font desiderato */
    font-size: 16px; /* Imposta una dimensione esplicita per coerenza con altri elementi di navigazione */
    font-weight: 700;
    transition: background-color 0.3s, color 0.3s;
}

.jump-btn:hover {
    background-color: #ff0403;
    color: #f3f0ce;
}

/* Stile specifico per il bottone dell'evento promozionale */
#promo-event-btn {
    color: #019e51ff;
    border-color: #019e51ff;
}

#promo-event-btn:hover {
    background-color: #019e51ff;
    color: #f3f0ce;
}

/* --- Stili per la Pagina Menu --- */
.menu-category {
    margin-bottom: 60px;
}

.category-title {
    background-color: #f3f0ce; /* Colore di sfondo come i bottoni */
    color: #ff0403; /* Colore testo come i bottoni */
    border: 5px solid #ff0403; /* Bordo come i bottoni */
    padding: 10px 20px;
    border-radius: 8px;
    text-align: center;
    font-size: 32px;
    margin-bottom: 40px;
    text-transform: uppercase;
    font-weight: 700; /* Grassetto come i bottoni */
}

.category-footnote {
    font-style: italic;
    font-size: 15px;
    color: #ff0403;
    text-align: left;
}

.menu-section {
    margin-bottom: 40px;
}

.menu-section-header {
    padding-bottom: 10px;
    border-bottom: 2px solid #eee;
    margin-bottom: 25px;
}

.menu-section h3 {
    font-family: "Red Hat Display", sans-serif;
    font-size: 28px;
    font-weight: bold;
    color: #ff0403;
    margin: 0; /* Rimuoviamo il margine per avvicinarlo al sottotitolo */
}

.menu-item {
    margin-bottom: 25px;
}

.menu-item-header {
    position: relative; /* Necessario per il posizionamento dello pseudo-elemento */
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 8px;
}

.menu-item-header::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 4px; /* Allineamento verticale dei puntini */
    border-bottom: 2px dotted #ccc;
    z-index: 1; /* Mette la linea dietro al testo */
}

.menu-item-header h4 {
    margin: 0;
    font-size: 20px;
    color: #ff0403;
    position: relative;
    z-index: 2;
    background-color: #f3f0ce;
    padding-right: 10px; /* Spazio tra testo e puntini */
}

.price {
    font-size: 18px;
    font-weight: bold;
    color: #ff0403;
    white-space: nowrap;
    position: relative;
    z-index: 2;
    background-color: #f3f0ce;
    padding-left: 10px; /* Spazio tra puntini e prezzo */
}

.description {
    margin: 0;
    font-size: 16px;
    color: #ff0403;
    font-style: italic;
}

.allergen-icon {
    display: inline-block;
    width: 22px;
    height: 22px;
    line-height: 22px; /* Centra il numero verticalmente */
    text-align: center;
    border-radius: 50%; /* Rende il box un cerchio */
    background-color: #ff0403;
    color: #f3f0ce;
    font-size: 13px;
    font-weight: 700;
    margin-left: 4px;
    vertical-align: middle; /* Allinea le icone con il testo */
    font-style: normal; /* Rimuove l'italic ereditato */
}

.menu-footnotes {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #ddd;
    font-size: 14px;
    color: #ff0403;
}

/* Stili per prodotti esauriti nel menu */
.menu-item.sold-out {
    opacity: 0.6; /* Rende il prodotto semi-trasparente */
}

.menu-item.sold-out .price {
    text-decoration: line-through; /* Barra il prezzo */
    opacity: 0.7;
}

.sold-out-badge {
    background-color: #ff0403;
    color: #f3f0ce;
    font-size: 0.7em;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 8px;
    vertical-align: middle;
    font-weight: 700;
    display: inline-block;
}

/* --- Stili per la Pagina Eventi --- */
.event-card {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.05); /* Sfondo leggermente traslucido */
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 25px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.event-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.1);
}

.event-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #ff0403;
    color: #f3f0ce; /* Colore testo che riprende lo sfondo della card menu */
    border-radius: 8px;
    padding: 10px 15px;
    margin-right: 20px;
    font-weight: bold;
    text-align: center;
    flex-shrink: 0; /* Evita che la data si rimpicciolisca */
}

.event-date .weekday {
    font-size: 14px;
    text-transform: uppercase;
}

.event-date .day {
    color: #ff0403;
    font-size: 28px;
    line-height: 1;
}

.event-date .month {
    color: #ff0403;
    font-size: 14px;
    text-transform: uppercase;
}

.event-details h3 {
    margin: 0 0 8px 0;
    color: #ff0403;
    font-size: 22px;
}

.event-details h2 {
    margin: 0 0 8px 0;
    color: #ff0403;
    font-size: 19px;
}

.event-details p {
    font-size: medium;
    margin: 0;
    color: #ff0403;
    font-style: normal; /* Rimuove l'italic delle descrizioni del menu */
}

.event-details .event-time {
    margin-top: 10px; /* Aggiunge un po' di spazio sopra l'orario */
    font-weight: 700; /* Rende il testo in grassetto */
}

.event-placeholder {
    text-align: center;
    padding: 40px 20px;
    margin-bottom: 25px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.event-placeholder p {
    color: #ff0403;
    font-size: 18px;
    margin-bottom: 20px;
}

.event-card.closing-day {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.1);
}

.event-card.closing-day h3 {
    color: #888;
}

/* --- Stili per il Calendario Interattivo --- */
.calendar-container {
    background: #f3f0ce; /* Sfondo chiaro per il box del calendario */
    border-radius: 12px;
    padding: 25px;
    position: relative; /* Necessario per z-index */
    z-index: 10; /* Assicura che il calendario sia sopra gli asset animati */
    border: 3px solid #ff0403;
}

.calendar-container:not(.active) {
    display: none;
}

.calendar-header {
    display: none; /* Nasconde il titolo del mese dentro il calendario */
}

.calendar-header h2 {
    color: #ff0403;
    font-size: 28px;
    text-transform: uppercase;
    margin: 0;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
}

.weekday-header {
    text-align: center;
    font-weight: 700;
    color: #ff0403;
    padding-bottom: 10px;
    font-size: 14px;
}

.day-cell {
    position: relative;
    height: 90px;
    background-color: #f3f0ce;
    border: 1px solid #ff0403;
    border-radius: 10px;
    padding: 8px;
    font-size: 16px;
    font-weight: 700;
    color: #aaa;
    transition: background-color 0.3s, transform 0.2s;
}

.day-cell.in-month {
    color: #ff0403;
}

.day-cell.has-event {
    background-color: rgba(255, 4, 3, 0.1);
    cursor: pointer;
    color: #ff0403;    
}

.day-cell.has-event::after {
    content: '';
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 6px;
    background-color: #ff0403;
    border-radius: 50%;
}

.day-cell.has-event:hover {
    background-color: rgba(255, 4, 3, 0.2);
    transform: scale(1.05);
}

.day-cell.closing-day {
    background-color: rgba(0, 0, 0, 0.08);
    color: #999;
    cursor: default;
}

.day-cell.closing-day:hover {
    transform: none;
    background-color: rgba(0, 0, 0, 0.08);
}

.day-cell .event-marker {
    display: none;
}

.day-cell .event-details-content {
    display: none; /* Nascosto di default */
}

#event-display-area {
    margin-top: 30px;
    padding: 25px;
    background: #f3f0ce; /* Sfondo uguale alla pagina */
    border: 2px solid #ff0403;
    border-radius: 12px;
    display: none; /* Nascosto finché non si clicca un evento */
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

#event-display-area.visible {
    display: block;
}

#event-display-area h3 {
    margin: 0 0 10px 0;
    color: #ff0403;
    font-size: 24px;
}

#event-display-area p {
    margin: 4px 0;
    color: #ff0403; /* Testo rosso per coerenza */
    font-size: 16px;
}

#event-display-area .event-time {
    margin-top: 15px;
    font-weight: 700;
    color: #ff0403; /* Testo rosso per coerenza */
}

/* Stile per la card quando mostra un giorno di chiusura */
#event-display-area.is-closing-day * {
    color: #999; /* Grigio, come il testo nella cella del calendario */
}


.calendar-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
    gap: 20px;
    background-color: #f3f0ce; /* Sfondo chiaro per il box di navigazione */
    padding: 20px;
    border-radius: 8px;
    position: relative; /* Necessario per z-index */
    z-index: 10; /* Assicura che la navigazione sia sopra gli asset animati */
    border: 3px solid #ff0403; /* Bordo rosso e più visibile */
}

.nav-arrow {
    background: transparent;
    border: 2px solid #ff0403;
    color: #ff0403;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
}

.nav-arrow:hover:not(:disabled) {
    background-color: #ff0403;
    color: #f3f0ce;
}

.nav-arrow:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

#current-month-display {
    font-family: "Red Hat Display", sans-serif;
    font-size: 36px; /* Aumentata la dimensione del testo */
    font-weight: 700;
    color: #ff0403;
    text-transform: uppercase;
}

/* --- Stili per l'animazione degli asset --- */
#animation-container {
    position: fixed;
    top: -10%; /* Estende il contenitore sopra lo schermo per evitare tagli in alto */
    left: 0;
    width: 100%;
    height: 120%; /* Aumenta l'altezza per estendere il fondo oltre lo schermo */
    pointer-events: none; /* Permette di cliccare attraverso il contenitore */
    overflow: hidden;
    z-index: 0; /* Lo mettiamo a un livello base, gli asset avranno z-index positivo o negativo */
    perspective: 1000px; /* Aggiunge profondità 3D per le rotazioni */
}

.animated-asset {
    position: absolute;
    display: block;
    will-change: transform, opacity; /* Ottimizzazione per le performance */
    image-rendering: -webkit-optimize-contrast; /* Per browser Webkit */
    image-rendering: crisp-edges; /* Standard moderno */
    pointer-events: auto; /* Rende gli asset cliccabili */
}

/* --- Stili per la Navbar --- */
.site-header-nav {
    background-color: #f3f0ce;
    border-bottom: 3px solid #ff0403;
    padding: 10px 20px; /* Ridotto padding per mobile */
    position: sticky;
    top: 0;
    z-index: 100;
    z-index: 1001; /* Aumentato per stare sopra il popup */
    width: 100%;
    box-sizing: border-box;
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

.nav-logo {
    /* Assegna un nome univoco per la transizione del logo tra le pagine */
    view-transition-name: main-logo;
    contain: layout; /* Ottimizzazione per le performance */
}

.nav-logo img {
    height: 45px; /* Altezza del logo */
    width: auto;
}

.main-nav a {
    color: #ff0403;
    text-decoration: none;
    font-weight: 700;
    font-size: 16px;
    margin-left: 20px; /* Cambiata transizione per l'opacità */
    transition: opacity 0.3s; /* Cambiata transizione per l'opacità */
}

.main-nav a:hover,
.main-nav a.active { /* Rimuoviamo la sottolineatura e usiamo l'opacità per l'effetto */
    opacity: 0.7;
}

/* --- Stili per Hamburger Menu (Mobile) --- */
.hamburger-menu {
    display: none; /* Nascosto su desktop */
    background: none; /* Sopra la navbar */
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 101; /* Sopra la navbar */
}

.hamburger-line {
    display: block;
    width: 25px;
    height: 3px;
    background-color: #ff0403;
    margin: 5px 0;
    transition: transform 0.3s, opacity 0.3s;
}

@media (min-width: 768px) {
    .site-header-nav {
        padding: 10px 40px;
    }
    .main-nav a {
        font-size: 18px;
        margin-left: 30px;
    }
}

@media (max-width: 767px) {
    .site-header-nav {
        padding-top: 5px;
        padding-bottom: 5px;
    }
    .nav-logo img {
        height: 35px;
    }
    .hamburger-menu {
        display: block;
    }
    .main-nav {
        position: fixed; top: 0; left: 0; width: 100%; height: 100vh;
        background-color: #f3f0ce;
        display: flex; flex-direction: column; justify-content: center; align-items: center;
        gap: 30px;
        transform: translateX(100%);
        transition: transform 0.3s ease-in-out;
    }
    .main-nav.nav-open { transform: translateX(0); }
    .main-nav a { margin-left: 0; font-size: 24px; }
    .nav-open .hamburger-line:nth-child(1) { transform: translateY(8px) rotate(45deg); }

    /* Colori specifici per il menu mobile per garantire la leggibilità */
    .main-nav.nav-open a {
        color: #ff0403; /* Rosso Fela! di default */
    }
    .brunch-page .main-nav.nav-open a {
        color: #487a7bff; /* Colore Brunch */
    }
    .salotto-page .main-nav.nav-open a {
        color: #5b5bffff; /* Colore Salotto */
    }
    .svg-flyer-page .main-nav.nav-open a {
        color: #ff0403; /* Colore nero per contrasto su sfondo crema */
    }

    .nav-open .hamburger-line:nth-child(2) { opacity: 0; }
    .nav-open .hamburger-line:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
}

/* --- Keyframes per le traiettorie degli asset --- */
@keyframes fall {
    0% { transform: translate(-20vw, -150vh) rotate(0deg); }
    50% { transform: translate(10vw, 0vh) rotate(180deg); }
    100% { transform: translate(-10vw, 150vh) rotate(360deg); }
}
@keyframes rise {
    0% { transform: translate(20vw, 150vh) rotate(0deg); }
    50% { transform: translate(-10vw, 0vh) rotate(-180deg); }
    100% { transform: translate(10vw, -150vh) rotate(-360deg); }
}
@keyframes float-left-to-right {
    0% { transform: translate(-150vw, 20vh) rotate(0deg); }
    50% { transform: translate(0vw, -20vh) rotate(180deg); }
    100% { transform: translate(150vw, 20vh) rotate(360deg); }
}
@keyframes float-right-to-left {
    0% { transform: translate(150vw, -20vh) rotate(0deg); }
    50% { transform: translate(0vw, 20vh) rotate(-180deg); }
    100% { transform: translate(-150vw, -20vh) rotate(-360deg); }
}
@keyframes fall-zigzag {
    0% { transform: translate(0vw, -150vh) rotate(0deg); }
    25% { transform: translate(30vw, -75vh) rotate(90deg); }
    50% { transform: translate(-30vw, 0vh) rotate(180deg); }
    75% { transform: translate(30vw, 75vh) rotate(270deg); }
    100% { transform: translate(0vw, 150vh) rotate(360deg); }
}
@keyframes float-curve {
    0% { transform: translate(-150vw, -50vh) rotate(0deg); }
    25% { transform: translate(-75vw, 50vh) rotate(90deg); }
    50% { transform: translate(0vw, -50vh) rotate(180deg); }
    75% { transform: translate(75vw, 50vh) rotate(270deg); }
    100% { transform: translate(150vw, -50vh) rotate(360deg); }
}

/* --- Keyframes per l'animazione di sfondo "subtle-drift" --- */
@keyframes subtle-drift {
    0% { transform: translate(0, 0) scale(1.1); }
    25% { transform: translate(-15px, 25px) scale(1.1); }
    50% { transform: translate(30px, -12px) scale(1.1); }
    75% { transform: translate(6px, 30px) scale(1.1); }
    100% { transform: translate(0, 0) scale(1.1); }
}

/* --- Keyframes per l'animazione di pulsazione della sfocatura --- */
@keyframes pulse-blur {
    0% { filter: blur(4px); }
    50% { filter: blur(8px); }
    100% { filter: blur(4px); }
}

/* --- Stili per il Pop-up Promozionale --- */
.promo-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.promo-popup-overlay.visible {
    opacity: 1;
    visibility: visible;
}
.promo-popup-content {
    background-color: #f3f0ce;
    color: #487a7bff; /* Colore del testo brunch */
    padding: 30px;
    border-radius: 12px;

    /* Sostituzione del bordo con la cornice SVG personalizzata */
    border-style: solid;
    border-width: 15px;
    border-image-source: url('../images/custom-pattern-brunch.svg'); /* Cornice brunch */
    border-image-slice: 30;
    border-image-repeat: round;
    text-align: center; /* Centra il testo all'interno del pop-up */
    max-width: 90%;
    width: 450px;
    position: relative;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2);

    /* Stato iniziale per l'animazione di entrata */
    transform: scale(0.9);
    opacity: 0;
    /* Applica la transizione per l'animazione */
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease-out;
}

/* Quando l'overlay è visibile, il contenuto si anima */
.promo-popup-overlay.visible .promo-popup-content {
    transform: scale(1);
    opacity: 1;
}

.promo-popup-content h3 {
    margin: 0 0 15px 0;
    font-size: 28px;
    font-weight: 700; 
}
/* Nuovo stile per il titolo dell'evento */
.promo-popup-content h4.promo-event-title {
    font-size: 22px;
    font-weight: 900;
    margin: 10px 0 5px 0;
    color: #487a7bff; /* Colore brunch */
}

.promo-popup-content p {
    margin: 0 0 20px 0;
    font-size: 18px;
}

.promo-popup-close {
    position: absolute;
    top: 10px;
    right: 15px;
    background: none;
    border: none;
    font-size: 28px;
    color: #487a7bff; /* Colore brunch */
    cursor: pointer;
    line-height: 1;
}

/* Nuovo stile per il bottone nel pop-up del brunch */
.btn.btn-brunch-popup {
    color: #487a7bff;
    border-color: #487a7bff;
}
.btn.btn-brunch-popup:hover {
    background-color: #487a7bff;
    color: #f3f0ce;
}

/* --- Stili per il bottone di prenotazione nella pagina Brunch --- */
.brunch-booking-container {
    /* Rende il contenitore largo quanto il titolo h1, allineandolo perfettamente */
    margin: -10px auto 40px auto; /* Margine negativo sopra e centrato */
}

.btn.btn-brunch-booking {
    display: block; /* Occupa tutta la larghezza del suo contenitore */
    width: 100%; /* Assicura che occupi il 100% della larghezza */
    box-sizing: border-box; /* Il padding e il bordo non aumentano la larghezza totale */
    text-align: center; /* Centra il testo all'interno del bottone */
    color: #487a7bff;
    border-color: #487a7bff;
}

.btn.btn-brunch-booking:hover {
    background-color: #487a7bff;
    color: #f3f0ce;
}

.promo-menu-list {
    list-style: none;
    padding: 0;
    margin: 20px 0;
    text-align: left;
}

.promo-menu-list li {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* Allinea all'inizio se il testo va a capo */
    margin-bottom: 15px;
    gap: 15px; /* Spazio tra piatto e prezzo */
}

.promo-dish {
    flex-grow: 1;
    font-size: 16px;
}

.promo-price {
    font-weight: 700;
    white-space: nowrap; /* Evita che il prezzo vada a capo */
    font-size: 16px;
}

@media (max-width: 600px) {
    .promo-popup-content {
        padding: 20px 15px;
        width: 95%;
    }
    .promo-popup-content h3 {
        font-size: 22px;
    }
    .promo-popup-content h4.promo-event-title { /* Aggiornato per il nuovo nome classe */
        font-size: 18px;
    }
    .promo-popup-content p {
        font-size: 16px;
        margin-bottom: 15px;
    }
    /* Rende più piccolo il sottotitolo "Percorso gastronomico..." solo su mobile */
    .promo-popup-content .promo-event-title + p {
        font-size: 14px;
        margin-bottom: 20px;
    }
}

/* --- Stili per il Pop-up del Brunch --- */
.brunch-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.brunch-popup-overlay.visible {
    opacity: 1;
    visibility: visible;
}

.brunch-popup-content {
    background-color: #f3f0ce;
    color: #ff0403;
    padding: 30px;
    border-radius: 12px;
    border: 3px solid #ff0403;
    text-align: center;
    max-width: 90%;
    width: 450px;
    position: relative;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}

.brunch-popup-content p {
    margin: 0;
    font-size: 18px;
    line-height: 1.5;
}

.brunch-popup-content a {
    color: #ff0403;
    font-weight: 700;
}

.brunch-popup-close {
    position: absolute;
    top: 10px;
    right: 15px;
    background: none;
    border: none;
    font-size: 28px;
    color: #ff0403;
    cursor: pointer;
    line-height: 1;
}

.nav-link-inactive {
    opacity: 0.4;
    cursor: not-allowed;
}

/* --- Stili per la Pagina "Il Brunch di Fela" --- */
.brunch-page .site-header-nav {
    border-bottom-color: #487a7bff;
}

.brunch-page .main-nav a {
    color: #487a7bff;
}

.brunch-page .hamburger-line {
    background-color: #487a7bff;
}

.brunch-page h1,
.brunch-page .category-title {
    color: #487a7bff;
    border-color: #487a7bff;
}

/* Usa la cornice SVG personalizzata con il colore del brunch */
.brunch-page h1 {
    border-style: solid; /* Assicura che il bordo sia visibile */
    border-width: 25px; /* Imposta la larghezza della cornice */
    border-image-source: url('../images/custom-pattern-brunch.svg');
    border-image-slice: 30;
    border-image-repeat: round;
}

.brunch-page .menu-item-header h4,
.brunch-page .price,
.brunch-page .description {
    color: #487a7bff;
}

.brunch-page .site-footer {
    background-color: #487a7bff;
    color: #f3f0ce;
}

.brunch-page .site-footer a {
    color: #f3f0ce;
}

/* Colore specifico per il bottone "Torna su" nella pagina brunch */
.brunch-page .back-to-top-btn {
    background-color: rgba(72, 122, 123, 0.7); /* Colore brunch semi-trasparente */
}

.brunch-page .back-to-top-btn:hover {
    background-color: #487a7bff; /* Colore brunch pieno al passaggio */
}

/* Stile unificato per i bottoni di prenotazione delle pagine speciali (Brunch, Cooking) */
.btn.btn-brunch-booking,
.btn.btn-cooking-booking {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
}

/* Stile specifico per il bottone prenotazione Cooking Experience */
.btn.btn-cooking-booking {
    color: #e67e22ff;
    border-color: #e67e22ff;
}
.btn.btn-cooking-booking:hover {
    background-color: #e67e22ff;
    color: #f3f0ce;
}

/* --- Stili per la Pagina "Cooking Experience" --- */
.cooking-experience-page .site-header-nav {
    border-bottom-color: #e67e22ff; /* Nuovo colore Cooking */
}

.cooking-experience-page .main-nav a {
    color: #e67e22ff; /* Nuovo colore Cooking */
}

.cooking-experience-page .hamburger-line {
    background-color: #e67e22ff; /* Nuovo colore Cooking */
}

.cooking-experience-page h1,
.cooking-experience-page .category-title {
    color: #e67e22ff; /* Nuovo colore Cooking */
    border-color: #e67e22ff; /* Nuovo colore Cooking */
}

.cooking-experience-page h1 {
    border-image-source: url('../images/costum-pattern-cooking.svg'); /* Nuova cornice */
}

.cooking-experience-page .menu-item-header h4,
.cooking-experience-page .price,
.cooking-experience-page .description {
    color: #e67e22ff; /* Nuovo colore Cooking */
}

/* Colore specifico per il bottone "Torna su" */
.cooking-experience-page .back-to-top-btn {
    background-color: rgba(230, 126, 34, 0.7); /* Colore cooking semi-trasparente */
}
.cooking-experience-page .back-to-top-btn:hover {
    background-color: #e67e22ff; /* Colore cooking pieno */
}



/* --- Stili per la Pagina "Il Salotto di Fela" --- */
.salotto-container {
    background-color: #f3f0ce;
}

.salotto-container h1 {
    color: #5b5bffff;
    background-color: #f3f0ce;
    /* Applica la cornice personalizzata blu */
    border-image-source: url('../images/custom-pattern-blue.svg');
    border-image-slice: 30;
}

.salotto-container h1 .salotto-subtitle {
    display: block;
    font-size: 16px;
    font-weight: 400; /* Stile più leggero */
    font-style: italic; /* Stile corsivo */
    text-transform: none; /* Rimuove il maiuscolo ereditato */
    margin-top: 15px;
    line-height: 1.5;
}

.salotto-intro {
    color: #5b5bffff;
    line-height: 1.4; /* Leggermente ridotto per compattare le due righe */
    text-align: center;
    max-width: 700px;
    margin: 0 auto 40px auto;
}

.salotto-intro .intro-main {
    display: block;
    font-size: 24px; /* Leggermente più piccolo */
    font-weight: 700; /* Meno pesante */
    text-transform: uppercase;
}

.salotto-intro .intro-sub {
    display: block;
    font-size: 18px; /* Più piccolo */
    font-weight: 400; /* Leggero */
    font-style: normal; /* Rimosso il corsivo */
    margin-top: 5px;
}

.video-container {
    position: relative;
    padding-bottom: 56.25%; /* Proporzioni 16:9 */
    height: 0;
    overflow: hidden;
    max-width: 100%;
    border: 3px solid #5b5bffff;
    border-radius: 8px;
}
/* Modifica per nascondere la barra del titolo di YouTube */
.video-container #youtube-player {
    position: absolute;
    /* Rendiamo l'iframe più alto del contenitore per nascondere le barre sopra e sotto */
    top: -60px; 
    left: 0;
    width: 100%;
    height: calc(100% + 120px);
}

.video-container iframe {
    width: 100%;
    height: 100%;
}

/* --- Stili specifici per la Navbar nella pagina Salotto --- */
.salotto-page .site-header-nav {
    border-bottom-color: #5b5bffff;
}

.salotto-page .main-nav a {
    color: #5b5bffff;
}

.salotto-page .hamburger-line {
    background-color: #5b5bffff;
}

/* --- Stili specifici per il Footer nella pagina Salotto --- */
.salotto-page .site-footer {
    background-color: #5b5bffff; /* Blu per lo sfondo del footer */
    color: #f3f0ce; /* Testo chiaro */
}

.salotto-page .site-footer a {
    color: inherit; /* Eredita il colore del testo dal footer (#f3f0ce) */
}

/* --- Stili per la lista episodi nella pagina Salotto --- */
.episode-list-container {
    margin-top: 50px;
    border-top: 2px solid #5b5bffff;
    padding-top: 30px;
}

.episode-list-container h2 {
    color: #5b5bffff;
    text-align: center;
    font-size: 28px;
    margin-bottom: 30px;
    text-transform: uppercase;
}

.episode-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.episode-card {
    display: flex;
    align-items: center;
    flex-wrap: wrap; /* Permette alla descrizione di andare a capo */
    background-color: rgba(255, 255, 255, 0.2);
    border: 2px solid #5b5bffff;
    border-radius: 8px;
    padding: 15px 20px;
    transition: background-color 0.3s ease;
}

.episode-card:hover {
    background-color: rgba(91, 91, 255, 0.1);
    transform: scale(1.02);
}

.episode-card.active {
    background-color: rgba(91, 91, 255, 0.2);
    border-width: 3px;
}

.episode-card.not-playable:hover {
    transform: none;
    cursor: default;
}

.episode-play-btn,
.episode-expand-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px; /* Aggiunge un po' di area cliccabile */
}
.episode-shrink {

}

.episode-play-btn svg,
.episode-expand-btn svg {
    width: 24px;
    height: 24px;
    fill: #5b5bffff;
    transition: transform 0.3s ease;
}

.episode-play-btn:hover svg,
.episode-expand-btn:hover svg {
    transform: scale(1.2);
}

.episode-expand-btn .arrow-icon {
    transition: transform 0.4s ease;
}

.episode-card.expanded .episode-expand-btn .arrow-icon {
    transform: rotate(180deg);
}

.episode-text-content {
    flex: 1; /* Occupa lo spazio tra i due bottoni */
    padding: 0 15px;
}

.episode-text-content p {
    /* Stili per la descrizione a comparsa */
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-out, margin-top 0.5s ease-out;
    margin: 0;
    width: 100%; /* Occupa tutta la larghezza della card */
}

.episode-card.expanded .episode-text-content p {
    max-height: 1000px; /* Un valore alto per permettere l'espansione completa */
    margin-top: 15px;
}

.episode-text-content h4, .episode-text-content p {
    color: #5b5bffff;
}

/* --- Wrapper per video e controlli custom --- */
.player-wrapper {
    margin-bottom: 20px;
    position: relative;
}

/* Stile per la copertina della puntata */
#episode-artwork {
    width: 100%;
    height: auto;
    border-radius: 8px;
    border: 3px solid #5b5bffff;
    display: block;
    margin-bottom: 20px; /* Spazio tra immagine e controlli */
}

#soundcloud-player {
    display: none; /* Nasconde il player di SoundCloud */
}

/* Nasconde i nostri controlli custom quando il video è in fullscreen */
.player-wrapper:fullscreen .progress-wrapper {
    display: none;
}

/* --- Stili per i dettagli dell'episodio corrente --- */
#current-episode-details {
    padding: 20px 0;
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
}

#current-episode-title {
    color: #5b5bffff;
    font-size: 22px;
    margin: 0 0 10px 0;
}

#current-episode-description {
    color: #5b5bffff;
    font-size: 16px;
    line-height: 1.5;
    margin: 0;
}

#play-pause-custom-btn {
    background-color: transparent;
    border: 2px solid #5b5bffff;
    color: #5b5bffff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s, color 0.3s;
}

#play-pause-custom-btn:hover {
    background-color: #5b5bffff;
    color: #f3f0ce;
}

#play-pause-custom-btn svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

/* --- Wrapper per la barra di avanzamento e il tempo --- */
.progress-wrapper {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 15px;
}

.time-display {
    color: #5b5bffff;
    font-size: 14px;
    font-weight: 500;
    min-width: 45px; /* Larghezza fissa per evitare scatti */
    text-align: center;
}

/* --- Stili per la barra di avanzamento personalizzata --- */
.progress-bar-container {
    width: 100%;
    height: 10px;
    background-color: rgba(91, 91, 255, 0.2);
    cursor: pointer;
    position: relative;
    border-radius: 5px;
}

.progress-bar-filled {
    width: 0%;
    height: 100%;
    background-color: #5b5bffff;
    border-radius: 5px;
    transition: width 0.1s linear; /* Transizione fluida */
}

.progress-bar-thumb {
    position: absolute;
    top: 50%;
    left: 0%; /* La posizione verrà aggiornata da JS */
    width: 18px;
    height: 18px;
    background-color: #f3f0ce;
    border: 2px solid #5b5bffff;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none; /* Non interferisce con il click sulla barra */
    transition: left 0.1s linear;
}

.progress-bar-container:hover .progress-bar-thumb {
    transform: translate(-50%, -50%) scale(1.1);
}

/* Stile unificato per i bottoni tondi del player (Play/Pausa e Fullscreen) */
#play-pause-custom-btn,
.player-control-btn {
    background-color: transparent;
    border: 2px solid #5b5bffff;
    color: #5b5bffff;
    width: 40px; /* Larghezza fissa */
    height: 40px; /* Altezza fissa */
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s, color 0.3s;
    flex-shrink: 0; /* Impedisce al bottone di rimpicciolirsi */
}

#play-pause-custom-btn:hover,
.player-control-btn:hover {
    background-color: #5b5bffff;
    color: #f3f0ce;
}

#play-pause-custom-btn svg, .player-control-btn svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

/* Rimosso: Nasconde temporaneamente le puntate dalla seconda in poi */
/* .episode-list .episode-card:not(:first-child) {
    display: none;
} */

/* --- Stili per il Tooltip su "Dalida" --- */
.tooltip-trigger {
    position: relative;
    cursor: help;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-decoration-color: #5b5bffff;
}
 
/* --- Stili per il Modale di Dalida --- */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 3000;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.modal-overlay.visible {
    visibility: visible;
    opacity: 1;
}

.modal-box {
    background-color: #5b5bffff;
    color: #f3f0ce;
    padding: 25px;
    border-radius: 12px;
    max-width: 90%;
    width: 400px;
    position: relative;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
    transform: scale(0.95);
    transition: transform 0.3s ease;
}

.modal-overlay.visible .modal-box {
    transform: scale(1);
}

.modal-box h3 {
    margin: 0 0 15px 0;
    font-size: 24px;
}

.modal-close-btn {
    position: absolute;
    top: 5px;
    right: 15px;
    background: none;
    border: none;
    font-size: 32px;
    color: #f3f0ce;
    cursor: pointer;
}
 
/* --- Stili per la Pagina Flyer SVG "Transatlantica" --- */
.svg-flyer-page {
    position: relative; /* Necessario per lo z-index dello pseudo-elemento */
    z-index: 1;
}

.svg-flyer-page::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../images/back-transa.jpg');
    background-size: cover;
    background-position: center center;
    filter: blur(4px); /* Aggiunto effetto di sfocatura */
    z-index: -1;
    /* Combina l'animazione di movimento con quella di pulsazione della sfocatura */
    animation: subtle-drift 15s ease-in-out infinite, pulse-blur 10s ease-in-out infinite;
    will-change: transform, filter; /* Ottimizzazione per entrambe le animazioni */
}

/* --- Stili per la Navbar nella pagina Flyer SVG --- */
.svg-flyer-page .site-header-nav {
    background-color: transparent;
    border-bottom-color: #f3f0ce;
}

.svg-flyer-page .main-nav a {
    color: #f3f0ce;
}

.svg-flyer-page .hamburger-line {
    background-color: #f3f0ce;
}

/* Aggiunta per ricolorare il logo SVG nella pagina Transatlantica */
.svg-flyer-page .nav-logo img {
    /* Applica un filtro per trasformare il rosso (#ff0403) in crema (#f3f0ce) */
    filter: brightness(0) saturate(100%) invert(93%) sepia(13%) saturate(233%) hue-rotate(359deg) brightness(105%) contrast(94%);
}

/* Stili specifici per il Footer nella pagina Flyer SVG */
.svg-flyer-page .site-footer {
    background-color: #f3f0ce; /* Sfondo crema */
    color: #1a1a1aff; /* Testo scuro per contrasto */
}

.svg-flyer-page .site-footer a {
    color: #1a1a1aff; /* Link scuri per contrasto */
}

.svg-flyer-page .page-container {
    background-color: transparent;
    box-shadow: none;
}



.svg-flyer-container {
    /* Rimosso position: relative e padding per consentire il centraggio a schermo intero */
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - 150px); /* Calcola l'altezza per centrare, considerando header e footer */
    padding: 40px 0;
    /* Calcola l'altezza per centrare, considerando header (61px) e footer (115px) */
    min-height: calc(100vh - 176px); 
    padding: 20px 20px; /* Aggiunto padding laterale per mobile */
    box-sizing: border-box;
}

.svg-content {
    width: 100%; /* Occupa tutta la larghezza del page-container */
    max-width: 800px; /* Mantiene la larghezza massima delle altre pagine */
    width: 100%;
    max-width: 750px; /* Ridotta la larghezza massima per rimpicciolire l'SVG */
    height: auto; 
    /* Aggiunge un'ombra per staccare il flyer dallo sfondo */
    filter: drop-shadow(0px 5px 15px rgba(0, 0, 0, 0.5));
    position: relative; /* Necessario per z-index */
    z-index: 2; /* Assicura che il contenuto sia sopra lo sfondo */
}

/* Stile per il bottone di chiusura/ritorno */
.flyer-back-link {
    /* Rimosso perché la navigazione è gestita dalla navbar */
    display: none;
}

/* --- Stili per il bottone di prenotazione nella pagina Transatlantica --- */
.book-table-button-container {
    display: flex;
    justify-content: center;
    padding: 40px 40px 0px 40px; /* Spaziatura aggiornata per la nuova posizione */
    padding: 80px 40px 0px 40px; /* Aumentata la spaziatura superiore per abbassare il bottone */
    position: relative;
    z-index: 5; /* Assicura che sia sopra lo sfondo ma sotto la navbar/footer se necessario */
}

.progress-and-play-wrapper {
    display: flex;
    align-items: center; /* Allinea verticalmente al centro gli elementi */
    gap: 10px; /* Aggiunge un po' di spazio tra il pulsante e la barra */
    gap: 15px; /* Aumentato lo spazio tra pulsante e barra */
    flex-grow: 1; /* Permette al wrapper di occupare lo spazio disponibile */
    margin: 0 10px; /* Aggiunge un margine laterale per "stringere" la barra */
}

/* Potrebbe essere necessario regolare la larghezza della barra di avanzamento */
.progress-and-play-wrapper .progress-bar-container {
    flex-grow: 1; /* La barra di avanzamento occupa lo spazio rimanente */
}

.book-table-btn {
    /* Stile che riprende i bottoni della homepage */
    background-color: #f3f0ce; /* Sfondo crema */
    color: #1a1a1aff; /* Testo nero per contrasto */
    border: 2px solid #1a1a1aff; /* Bordo nero */
    background-color: #f3f0ce; /* Sfondo color panna */
    color: #006a68ff; /* Testo del nuovo colore richiesto */
    border: 2px solid #006a68ff; /* Bordo dello stesso colore del testo */
    min-width: 200px; /* Larghezza minima per coerenza */
    font-size: 18px;
    font-weight: 700;
}

.btn-table-btn:hover {
    background-color: #e4a04eff; /* Colore arancione/ocra al passaggio del mouse */
    color: #1a1a1aff; /* Mantiene il testo nero */
    border-color: #e4a04eff; /* Anche il bordo cambia colore */
    background-color: #006a68ff; /* Colore di sfondo al passaggio del mouse */
    color: #f3f0ce; /* Testo color panna per contrasto */
    border-color: #006a68ff; /* Il bordo mantiene il colore */
    transform: scale(1.05); /* Mantiene l'effetto di ingrandimento */
}

/* Animazione per gli asset della Home Page (sinistra verso destra) */
@keyframes moveLeftToRight {
    from {
        transform: translateX(-150vw) rotate(180deg);
    }
    to {
        transform: translateX(250vw) rotate(360deg);
    }
}

/* --- Tooltip Installazione iOS --- */
#ios-install-tooltip {
    position: fixed;
    bottom: 30px; /* Posizionato sopra la barra inferiore di Safari */
    left: 50%;
    /* Stato iniziale: centrato orizzontalmente, spostato in basso di 20px, invisibile */
    transform: translateX(-50%) translateY(20px);
    background-color: #f3f0ce;
    color: #1a1a1a;
    border: 3px solid #ff0403;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.4);
    z-index: 10000; /* Sopra a tutto */
    text-align: center;
    width: 85%;
    max-width: 320px;
    
    /* Transizioni fluide per entrata e uscita */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0.5s;
    font-family: "Red Hat Display", sans-serif;
}

#ios-install-tooltip.visible {
    /* Stato visibile: opaco, posizione originale */
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* --- Stili Navbar per la Homepage --- */
.home-page .site-header-nav {
    background-color: transparent;
    border-bottom: none;
}

/* Rimosso filtro per mantenere il logo rosso su sfondo crema */
.home-page .nav-logo img {
    filter: none;
}

.home-page .notification-bell-btn {
    color: #ff0403;
}

/* Nasconde l'hamburger menu solo nella homepage */
.home-page .hamburger-menu {
    display: none;
}

/* --- Stili per il pulsante Notifiche nella Navbar --- */
.notification-bell-btn {
    background: none;
    border: none;
    color: #ff0403;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.3s ease, transform 0.2s ease;
    margin-left: 15px; /* Spazio dagli altri link del menu */
}

.notification-bell-btn:hover {
    transform: scale(1.1);
}

/* Colori specifici per pagina */
.salotto-page .notification-bell-btn {
    color: #5b5bffff;
}
.brunch-page .notification-bell-btn {
    color: #487a7bff;
}
.svg-flyer-page .notification-bell-btn {
    color: #f3f0ce;
}

@media (max-width: 767px) {
    /* Sulla homepage in versione mobile, la navbar non deve essere un overlay a scomparsa */
    .home-page .main-nav {
        position: static;
        transform: none;
        height: auto;
        width: auto;
        background-color: transparent;
        flex-direction: row;
        gap: 0;
    }
    .notification-bell-btn {
        margin-left: 0;
        /* Nel menu hamburger, la campanella sarà un elemento come gli altri */
    }
}

/* --- Custom Notification Toast (Sostituisce gli alert nativi) --- */
.custom-notification {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(-150%); /* Parte nascosto in alto */
    background-color: #f3f0ce;
    color: #ff0403;
    border: 4px solid #ff0403; /* Bordo più spesso */
    padding: 20px 30px;
    border-radius: 16px; /* Arrotondamento più morbido */
    font-family: "Red Hat Display", sans-serif;
    font-weight: 900; /* Font Heavy come i titoli */
    font-size: 18px;
    text-transform: uppercase; /* Testo maiuscolo stile Fela */
    box-shadow: 0 10px 30px rgba(0,0,0,0.25); /* Ombra più decisa */
    z-index: 10005; /* Sopra a tutto */
    opacity: 0;
    visibility: hidden;
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.5s ease, visibility 0.5s;
    text-align: center;
    width: auto;
    max-width: 90%;
    min-width: 320px;
}

.custom-notification.show {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(80px); /* Scende sotto la navbar */
}

/* Stile per il contenuto interno (icona + testo) */
.notification-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

/* =========================================
   --- STILI PER LA PAGINA ADMIN ---
   ========================================= */

/* Override per allargare il contenitore nella pagina admin */
.admin-page .page-container {
    max-width: 1600px; /* Molto più largo per accomodare la tabella */
    width: 95%;
    padding: 30px 20px;
}

/* Wrapper specifico per la pagina admin (sovrascrive prenotazione.css) */
.admin-page .booking-wrapper {
    max-width: 1200px;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 20px;
    padding: 0;
}

/* Stile a card per le sezioni */
.admin-card {
    background-color: #f3f0ce;
    border-radius: 8px;
    padding: 25px 30px;
    margin-bottom: 30px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.07);
    overflow: hidden;
    /* overflow: hidden; Rimosso per evitare che tagli ombre o contenuti */
    border: 2px solid #ff0403; /* Bordo rosso per coerenza */
}

/* Assicura che gli input non sbordino */
.admin-card input, .admin-card textarea, .admin-card select {
    box-sizing: border-box;
}

.admin-card h2 {
    margin-top: 0;
    margin-bottom: 20px;
    border-bottom: 1px solid #ff0403;
    padding-bottom: 15px;
    color: #ff0403;
}

/* Stili unificati per i form dentro le admin cards */
.admin-card .form-group input,
.admin-card .form-group select,
.admin-card .form-group textarea {
    width: 100%;
    padding: 12px;
    border: 2px solid #ff0403;
    border-radius: 8px;
    background-color: #fdfdfd;
    font-family: "Red Hat Display", sans-serif;
    font-size: 16px;
    color: #333;
    box-sizing: border-box;
    transition: box-shadow 0.2s ease-in-out;
}

.admin-card .form-group input:focus,
.admin-card .form-group select:focus,
.admin-card .form-group textarea:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 4, 3, 0.3);
}

/* Stili per i badge di stato */
.status {
    padding: 4px 8px;
    border-radius: 12px;
    color: #fff;
    font-weight: bold;
    font-size: 0.9em;
    white-space: nowrap;
}
.status-open { background-color: #28a745; } /* Verde */
.status-closed { background-color: #dc3545; } /* Rosso */

/* Pulsanti di azione nelle tabelle */
.action-btn {
    cursor: pointer;
    padding: 6px 12px;
    border: none;
    border-radius: 5px;
    color: #fff;
    font-weight: 500;
    font-size: 14px;
    transition: opacity 0.2s ease, transform 0.1s ease;
    margin-left: 5px;
}
.action-btn:hover {
    opacity: 0.9;
    transform: scale(1.05);
}
.btn-close { background-color: #dc3545; }
.btn-open { background-color: #28a745; }
.btn-delete { background-color: #dc3545; } /* Rosso più scuro per eliminare */
.btn-edit { background-color: #ffc107; color: #000; } /* Giallo per modifica */

/* Stile per bottoni secondari (es. Annulla) */
.btn.btn-secondary {
    background-color: transparent;
    color: #6c757d;
    border-color: #6c757d;
}
.btn.btn-secondary:hover {
    background-color: #6c757d;
    color: white;
}

/* Tabelle Admin */
.admin-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
}

.admin-table th, .admin-table td {
    padding: 12px 15px;
    border: 1px solid #ddd;
    text-align: left;
    font-size: 14px;
    color: #333;
}

.admin-table th {
    background-color: #ff0403;
    color: #f3f0ce;
    font-weight: 700;
    text-transform: uppercase;
}

.admin-table tbody tr:hover { background-color: #f9f9f9; }
.admin-table tbody tr:nth-child(even) { background-color: #fcfcfc; }

/* Allineamenti specifici colonne */
.admin-table th:last-child, .admin-table td:last-child { text-align: right; }
.admin-table th:nth-child(5), .admin-table td:nth-child(5),
.admin-table th:nth-child(6), .admin-table td:nth-child(6) { text-align: center; }

/* Form Creazione Eventi */
#add-special-event-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px 25px;
    align-items: end;
}

#add-special-event-form .form-group:first-child,
#add-special-event-form .max-guests-group,
#add-special-event-form .shifts-group {
    grid-column: 1 / -1;
}

#add-special-event-form .btn-submit {
    grid-column: 1 / -1;
    justify-self: center;
    width: auto;
    min-width: 200px;
}

/* Gruppo Turni */
.shifts-group { display: flex; flex-direction: column; }
.shifts-inputs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}
.shift-row { display: flex; gap: 5px; align-items: center; }
.shift-row input[type="number"] { width: 80px; }

/* Form Login Admin */
.admin-login-form {
    max-width: 400px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* --- RESPONSIVE ADMIN (Mobile) --- */
@media (max-width: 768px) {
    .admin-page .booking-wrapper { padding: 0 10px; }
    .admin-page .booking-wrapper > h1 {
        box-sizing: border-box;
        width: 100%;
        padding: 14px;
        border-width: 16px;
        font-size: clamp(24px, 7.5vw, 30px);
        line-height: 1.1;
        overflow-wrap: anywhere;
        word-break: normal;
    }
    .admin-card { padding: 15px; }

    /* Form diventa a colonna singola */
    #add-special-event-form { grid-template-columns: 1fr; }
    .shifts-inputs { grid-template-columns: 1fr; }

    /* Trasformazione Tabelle in Card */
    .admin-table, .admin-table thead, .admin-table tbody, 
    .admin-table th, .admin-table td, .admin-table tr {
        display: block;
    }

    .admin-table thead { display: none; } /* Nasconde intestazioni */

    .admin-table tr {
        margin-bottom: 20px;
        border: 2px solid #ff0403;
        border-radius: 8px;
        background-color: #fff;
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }

    .admin-table td {
        border: none;
        border-bottom: 1px solid #eee;
        padding: 12px 15px;
        display: flex;
        justify-content: space-between; /* Allinea etichetta e valore */
        align-items: center;
        text-align: right;
        min-height: auto;
    }

    .admin-table td:last-child {
        border-bottom: none;
        justify-content: flex-end;
        padding-top: 15px;
        padding-bottom: 15px;
        gap: 10px;
    }

    /* Etichetta generata via CSS usando data-label */
    .admin-table td::before {
        content: attr(data-label);
        position: static;
        width: auto;
        text-align: left;
        font-weight: 700;
        color: #ff0403;
        transform: none;
        padding-right: 15px;
        flex-shrink: 0;
        max-width: 40%;
    }

    /* Gestione del testo lungo nelle celle (es. email, note) */
    .admin-table td .cell-value {
        text-align: right;
        word-break: break-word;
        max-width: 60%;
    }
    
    /* Nasconde etichetta per la riga azioni */
    .admin-table td[data-label="Azione"]::before,
    .admin-table td[data-label="Azioni"]::before {
        display: none;
    }
    
    .admin-table td[data-label="Azione"],
    .admin-table td[data-label="Azioni"] {
        justify-content: center; /* Centra i bottoni */
    }
}

/* --- Stili per il Popup Cidre (Temporaneo) --- */
#cidre-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
#cidre-popup.visible {
    opacity: 1;
    visibility: visible;
}
#cidre-popup .popup-box {
    background-color: #f3f0ce;
    color: #8d5fd3ff;
    padding: 30px;
    border-radius: 12px;
    border: 3px solid #8d5fd3ff;
    text-align: center;
    max-width: 90%;
    width: 400px;
    position: relative;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}
#cidre-popup h3 {
    font-size: 24px;
    margin-top: 0;
    margin-bottom: 15px;
    text-transform: uppercase;
    font-weight: 700;
}
#cidre-popup p {
    font-size: 18px;
    margin: 8px 0;
    line-height: 1.4;
}
#cidre-popup .price {
    font-weight: 700;
    font-size: 24px;
    margin-top: 20px;
    color: #8d5fd3ff;
}
#cidre-popup .popup-close-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    background: none;
    border: none;
    font-size: 32px;
    color: #8d5fd3ff;
    cursor: pointer;
    line-height: 1;
}