/* ==========================================================================
   1. STILI GLOBALI E DESKTOP (Default)
   ========================================================================== */

/* Leggibilità testi Desktop */
p, li {
    font-size: 18px !important;
    line-height: 1.6 !important;
    color: #333 !important;
}

/* --- FAB AUDIO (VERSIONE SVG GARANTITA) --- */
#audio-fab-container {
    position: fixed !important;
    bottom: 25px !important;
    left: 25px !important;
    width: 60px !important;
    height: 60px !important;
    z-index: 9999999 !important;
    display: block !important;
}

#audio-fab {
    width: 60px !important;
    height: 60px !important;
    background-color: #d4af37 !important;
    border-radius: 50% !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

/* Iniettiamo l'SVG direttamente nel Before */
#audio-fab i::before {
    content: "" !important;
    display: block !important;
    width: 30px !important;
    height: 30px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z'/%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* Classe dinamica per lo stato "Muto" (se vuoi gestirlo via JS) */
#audio-fab.is-muted i::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z'/%3E%3C/svg%3E") !important;
}
#audio-tooltip {
    position: absolute;
    left: 70px; /* Posizionato a destra del pulsante */
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(255, 255, 255, 0.9);
    color: #d4af37; /* Oro come il pulsante */
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 14px !important;
    font-weight: bold;
    white-space: nowrap;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    pointer-events: none;
    display: none; /* Nascosto di default, gestito da JS */
    border: 1px solid #d4af37;
}

/* Una piccola freccina che punta al pulsante */
#audio-tooltip::after {
    content: "";
    position: absolute;
    left: -10px;
    top: 50%;
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent white transparent transparent;
}

/* --- FORM RSVP DESKTOP --- */
.elementor-widget-text-editor .deg-rsvp-wrapper-custom {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    margin: 0 auto !important;
}

.elementor-widget-text-editor .deg-form-grid-custom {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    width: 100% !important;
}

.elementor-widget-text-editor .deg-input-group-custom {
    width: calc(50% - 15px) !important;
    display: flex !important;
    flex-direction: column !important;
    margin-bottom: 20px !important;
}

.elementor-widget-text-editor .deg-full-width-custom {
    width: 100% !important;
}

/* --- ESTETICA CAMPI --- */
.elementor-widget-text-editor .deg-input-field-custom,
.elementor-widget-text-editor .deg-textarea-custom {
    padding: 12px !important;
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.elementor-widget-text-editor .deg-submit-button-custom {
    width: 100% !important;
    background-color: #d4af37 !important;
    color: white !important;
    padding: 15px !important;
    font-weight: bold !important;
    border: none !important;
    cursor: pointer !important;
    border-radius: 4px !important;
}

#countdown-hero p {
    font-size: 48px !important; /* Dimensione aumentata per l'impatto */
    line-height: 1.4 !important;
    font-weight: 500 !important;
    text-align: center !important;
    margin-bottom: 20px !important;
    color: #faf4f4 !important; /* O il colore che preferisci */
}

/* Adattamento per Mobile (essenziale visto che l'Hero è la prima cosa che si vede) */
@media screen and (max-width: 768px) {
    #countdown-hero p {
        font-size: 40px !important;
        padding: 0 15px !important; /* Evita che il testo tocchi i bordi dello schermo */
    }
}
#perche27 {
    text-align: justify;
    hyphens: auto; /* Aiuta a spezzare le parole lunghe su mobile */
    line-height: 1.5;
}
/* Rimuove i bullet e allinea */
#paymentul {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    #iban-container {
        display: flex !important;
        flex-direction: column !important; /* Mette IBAN, Bottone e Nome uno sopra l'altro */
        align-items: center !important;
        width: 100% !important;
        gap: 10px !important;
    }

    #iban-text {
        word-break: break-all !important; /* Spezza l'IBAN per non farlo uscire dal bordo */
        font-size: 14px !important;
        background: #f0f0f0;
        padding: 8px;
        border-radius: 5px;
        display: block !important;
        max-width: 90% !important;
    }

    #intestatario {
        display: block !important;
        text-align: center !important;
        margin-top: 5px !important;
        font-style: italic;
    }
#copy-iban-btn {
    background-color: #d4af37 !important; /* Oro */
    color: white !important;
    border: none;
    padding: 5px 12px;
    border-radius: 15px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 5px;
}

#copy-iban-btn:hover {
    background-color: #bfa030 !important;
    transform: scale(1.05);
}

/* Feedback visivo quando copiato */
#copy-iban-btn.copied {
    background-color: #28a745 !important; /* Verde successo */
}

/* Container per centrare tutto il blocco */
#paymentul {
    list-style: none !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 15px; /* Spazio tra IBAN e Pulsante PayPal */
}

/* Stile Pulsante PayPal Classico */
.paypal-button {
    background-color: #0070ba !important; /* Blu PayPal */
    color: #ffffff !important;
    padding: 10px 30px !important;
    border-radius: 25px !important; /* Forma a pillola tipica di PayPal */
    font-family: "Helvetica", "Arial", sans-serif !important;
    font-weight: bold !important;
    font-size: 16px !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
    transition: background-color 0.3s ease, transform 0.2s ease !important;
}

.paypal-button:hover {
    background-color: #005ea6 !important; /* Blu più scuro al passaggio */
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15) !important;
}

.paypal-button i {
    font-size: 18px !important;
}
/* Disabilita interazioni strane sui link mappe se il tema prova a metterci un overlay */
.wpo-event-text a {
    pointer-events: auto !important;
    cursor: pointer !important;
    text-decoration: underline !important;
}
/* Rimuove effetti cursore del tema sui link mappe */
.wpo-event-text a, 
.popup-gmaps {
    cursor: pointer !important;
    pointer-events: auto !important;
}

/* Nasconde forzatamente eventuali overlay di Magnific Popup se dovessero apparire vuoti */
.mfp-bg, .mfp-wrap {
    display: none !important;
}
.custom-countdown-container {
    text-align: center;
    padding: 20px;
    background: transparent;
}

.countdown-title {
    font-size: 24px !important;
    margin-bottom: 5px !important;
}

.wedding-date-text {
    font-size: 18px !important;
    color: #666;
    margin-bottom: 20px !important;
}

#new-clock {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.clock-box {
    background: #fdfdfd;
    border: 1px solid #eee;
    padding: 10px;
    border-radius: 10px;
    min-width: 70px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.clock-box span {
    display: block;
    font-size: 28px;
    font-weight: bold;
    color: #d4af37; /* Oro */
}

.clock-box label {
    font-size: 12px;
    text-transform: uppercase;
    color: #999;
}
nav.trp-language-switcher.trp-floating-switcher {
    left: 50% !important;
    right: auto !important; /* Annulla il 10vw originale */
    transform: translateX(-50%) !important;
    bottom: 10px !important; /* Lo solleva leggermente dal bordo inferiore */
    z-index: 999998 !important; /* Un livello sotto il pulsante audio per sicurezza */
}
.gestione-invitati-container {
    padding: 20px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.table-responsive {
    overflow-x: auto; /* Fondamentale per il mobile */
}

#tabella-invitati {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

#tabella-invitati th, #tabella-invitati td {
    padding: 12px;
    border-bottom: 1px solid #eee;
    text-align: left;
}

#tabella-invitati thead {
    background-color: #d4af37; /* Oro del tuo tema */
    color: white;
}

.lato-sposo { color: #143852; font-weight: bold; }
.lato-sposa { color: #d4af37; font-weight: bold; }

.cella-note {
    max-width: 200px;
    font-style: italic;
    font-size: 12px;
    color: #666;
}

#tabella-invitati tr:hover {
    background-color: #f9f9f9;
}
/* Applichiamo lo stile azzurro chiaro come da immagine */
.wpo-event-item {
    background-color: #f0f7fd !important;
    border: 1px solid #d1e3f1 !important;
    border-radius: 8px !important;
    padding: 25px !important;
    text-align: center !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05) !important;
}

/* Pulizia della lista */
.wpo-event-text ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.wpo-event-text li {
    margin-bottom: 15px !important;
    font-size: 16px !important;
    color: #444 !important;
}

/* --- FORZATURA A CAPO LOCATION (TRUCCO AVANZATO) --- */

/* 1. Rendiamo invisibile il testo originale del secondo <li> (Santuario... / Hotel...) */
.wpo-event-text li:nth-child(2) {
    font-size: 0 !important; /* Nasconde il testo originale */
    line-height: 0 !important;
}

/* 2. Ricostruiamo il testo per il Santuario di San Gennaro */
.col:nth-child(1) .wpo-event-text li:nth-child(2)::before {
    content: "Santuario di San Gennaro"; /* Nome della location */
    display: block !important;
    font-size: 18px !important;
    font-weight: bold !important;
    color: #143852 !important;
    line-height: 1.4 !important;
    margin-bottom: 5px !important;
}

.col:nth-child(1) .wpo-event-text li:nth-child(2)::after {
    content: "Via S. Gennaro Agnano, 8, 80078 Pozzuoli NA"; /* Indirizzo */
    display: block !important;
    font-size: 15px !important;
    color: #444 !important;
    line-height: 1.4 !important;
}

/* 3. Ricostruiamo il testo per l'Hotel Gli Dei */
.col:nth-child(2) .wpo-event-text li:nth-child(2)::before {
    content: "Hotel Gli Dei"; /* Nome della location */
    display: block !important;
    font-size: 18px !important;
    font-weight: bold !important;
    color: #143852 !important;
    line-height: 1.4 !important;
    margin-bottom: 5px !important;
}

.col:nth-child(2) .wpo-event-text li:nth-child(2)::after {
    content: "Via Coste D'Agnano, 21, 80078 Pozzuoli NA"; /* Indirizzo */
    display: block !important;
    font-size: 15px !important;
    color: #444 !important;
    line-height: 1.4 !important;
}

/* --- REGOLE EXTRA PER IL LOOK AZZURRO --- */
.wpo-event-item {
    background-color: #f0f7fd !important;
    border: 2px solid #ffffff !important;
    outline: 1px solid #d1e3f1 !important;
    padding: 30px !important;
    border-radius: 4px !important;
}
/* --- ALLINEAMENTO PERFETTO BOX EVENTI --- */

/* Forza l'altezza dei titoli affinché i divisori siano sempre allineati */
.wpo-event-text h2 {
    min-height: 70px !important; /* Spazio sufficiente per 2 righe */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 5px !important;
}

/* Allineamento dei contenitori principali */
.wpo-event-item {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important; /* Fa sì che i box abbiano la stessa altezza se in una riga flex */
    background-color: #f0f7fd !important;
    padding: 30px 20px !important;
}

/* Gestione degli spazi interni per bilanciare i contenuti */
.wpo-event-text li:nth-child(1) {
    margin-top: 10px !important;
    font-weight: 500 !important;
}

/* Padding specifico per compensare i nomi delle location */
/* Aumentiamo il padding del box Hotel Gli Dei per allinearlo visivamente alla Chiesa */
.col:nth-child(2) .wpo-event-text li:nth-child(2)::before {
    padding-top: 4px !important; /* Piccolo aggiustamento per bilanciare il testo */
}
/* Allineamento specifico per i link tramite i nuovi ID */
#link-mappa-cerimonia {
    display: inline-block !important;
    margin-top: 20px !important;
}

#link-mappa-ricevimento {
    display: inline-block !important;
    /* Se "Il Ricevimento" occupa due righe, qui diamo meno margine per pareggiare */
    margin-top: 43px !important; 
}

/* Stile per l'indirizzo con il <br> iniettato da JS */
.wpo-event-text li {
    line-height: 1.4 !important;
    margin-bottom: 10px !important;
}

/* Rende i titoli coerenti */
.wpo-event-text h2 {
    font-size: 24px !important;
    text-transform: uppercase !important;
}

/* Rende la riga dei box coerente su desktop */
@media screen and (min-width: 992px) {
    .row {
        display: flex !important;
        align-items: stretch !important; /* Forza i box alla stessa altezza totale */
    }
}
/* ==========================================================================
   2. MEDIA QUERY MOBILE (SOLO SOTTO 480PX)
   ========================================================================== */

/* Fix per Mobile */
@media screen and (max-width: 480px) {
    #new-clock {
        gap: 8px;
    }
    .clock-box {
        min-width: 60px;
        padding: 5px;
    }
}

/* ==========================================================================
   2. MEDIA QUERY MOBILE (SOLO SOTTO 768PX)
   ========================================================================== */
@media screen and (max-width: 768px) {

    /* FORZA INCOLONNAMENTO FORM */
    .elementor-widget-text-editor .deg-form-grid-custom {
        display: block !important;
    }

    .elementor-widget-text-editor .deg-input-group-custom,
    .elementor-widget-text-editor .deg-full-width-custom {
        width: 100% !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
        display: block !important;
    }

    /* FIX TESTI PICCOLI MOBILE */
    p, li {
        font-size: 20px !important; /* Leggermente più grande per mobile */
    }

    /* FIX TITOLI SEZIONI (Controlla se l'ID in Elementor è corretto) */
    #container-invito, 
    #container-invito{
        font-size: 20px !important; /* 40px era troppo grande, usciva dallo schermo */
    }
    /* 1. Elimina margini eccessivi dal contenitore della data */
    #countdown-hero {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding-top: 10px !important;
        padding-bottom: 0 !important;
    }

    /* 2. Compattiamo il nuovo countdown per farlo stare vicino alla data */
    .custom-countdown-container {
        padding-top: 0 !important;
        margin-top: -10px !important; /* "Tira su" il contatore verso la data */
    }

    /* 3. Se esiste ancora il vecchio spazio del widget del tema, lo azzeriamo */
    .wpo-hero-slider, .wedding-announcement {
        display: none !important; /* Nasconde definitivamente i residui del tema */
    }
    .elementor-1425 .elementor-element.elementor-element-f90f566 {
        padding: 0px 0px 0px 0px;
    }
    audio-fab-container {
        bottom: 80px !important; /* Lo alziamo per non coprire il selettore lingua */
        left: 15px !important;   /* Lo avviciniamo un po' al bordo */
    }

    /* Sistemazione del fumetto "Con l'audio è meglio però!" */
    #audio-tooltip {
        left: 0 !important;
        top: -45px !important; /* Sposta il fumetto SOPRA il pulsante invece che a lato */
        transform: none !important;
        font-size: 12px !important;
        padding: 5px 10px !important;
    }

    /* Modifica della freccina del fumetto per puntare in basso verso il tasto */
    #audio-tooltip::after {
        left: 20px !important;
        top: 100% !important;
        border-color: white transparent transparent transparent !important;
    }
    nav.trp-language-switcher.trp-floating-switcher {
        bottom: 15px !important; /* Più spazio su mobile per non intralciare le gesture */
        --switcher-width: 120px; /* Possiamo allargarlo leggermente per il tocco */
    }
    /* Nascondiamo l'ottava colonna (Note) nell'header */
    #tabella-invitati th:nth-child(8), 
    .nascondi-mobile {
        display: none !important;
    }

    /* Opzionale: riduciamo il padding su mobile per guadagnare spazio */
    #tabella-invitati td, #tabella-invitati th {
        padding: 8px 4px !important;
        font-size: 12px !important;
    }
    .row {
        flex-direction: column !important;
        align-items: center !important;
    }
    .wpo-event-item {
        width: 100% !important;
        margin-bottom: 20px !important;
    }
/* Resettiamo le altezze fisse che causano gli accavallamenti */
    .wpo-event-text, 
    .wpo-event-text h2,
    .wpo-event-item {
        min-height: auto !important;
        height: auto !important;
        display: block !important;
    }

    /* Sistemiamo lo spazio tra gli elementi della lista */
    .wpo-event-text ul {
        display: block !important;
        margin-top: 20px !important;
    }

    .wpo-event-text li {
        font-size: 16px !important;
        margin-bottom: 20px !important;
        line-height: 1.5 !important;
        display: block !important;
    }

    /* Resettiamo i margini dei link che avevamo differenziato per ID */
    #link-mappa-cerimonia, 
    #link-mappa-ricevimento {
        margin-top: 15px !important;
        display: block !important;
        font-size: 18px !important; /* Più grande per il touch su mobile */
    }

    /* Gestione dei nomi location iniettati da JS */
    .loc-name {
        font-weight: bold !important;
        display: inline-block;
        margin-bottom: 5px;
    }
    
    .loc-addr {
        display: inline-block;
        color: #666;
    }
}

/* ==========================================================================
   3. ANIMAZIONI E UTILITY (In fondo per non rompere il resto)
   ========================================================================== */
.audio-playing-anim {
    animation: pulse-gold-fab 2s infinite;
}

@keyframes pulse-gold-fab {
    0% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.7); }
    70% { box-shadow: 0 0 0 15px rgba(212, 175, 55, 0); }
    100% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0); }
}

/* Tooltip e Layout (Mantenuti dal tuo originale) */
.verticallayout { display: flex; flex-direction: column; align-items: flex-start; }
.horizontallayout { display: flex; box-sizing: border-box; }