/*
========================================================================
  CHIESE EVANGELICHE ITALIA - MOBILE & TABLET OVERRIDE STYLES
  Versione Finale con Pulsante Accedi Visibile e Breakpoint Multipli
========================================================================
*/


/* 
========================================================================
  REGOLE GLOBALI (Fuori dalle Media Query)
========================================================================
*/

/*
  SOLUZIONE B (Alternativa): Se vuoi mostrare l'immagine sopra il testo.
  Commenta la regola sopra e decommenta questa:

  #tabs .tab-pane .row {
    flex-direction: column-reverse;
  }
  #tabs .tab-pane img {
    width: 100%;
    max-width: 300px; 
    margin: 0 auto 25px auto; 
    display: block;
    border-radius: 8px;
  }
*/


/* BLINDA LO SCHERMO ED EVITA LA FASCIA BIANCA LATERALE (SCROLL ORIZZONTALE) */
html, body {
  max-width: 100vw !important;
  overflow-x: hidden !important;
}

/* FIX MARGINI NEGATIVI BOOTSTRAP SU MOBILE */
.row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* 
========================================================================
BREAKPOINT: TABLET E INFERIORI (fino a 991.98px)
========================================================================
*/

@media (max-width: 991.98px) {

    /* FIX GLOBALI E BLOCCO SCROLL */
    html, body { max-width: 100vw !important; overflow-x: hidden !important; }
    .row { margin-left: 0 !important; margin-right: 0 !important; }
    html.mobile-nav-active, body.mobile-nav-active { overflow: hidden !important; height: 100vh !important; }

    [data-aos] {
        opacity: 1 !important; transform: none !important;
        visibility: visible !important; transition: none !important;
        animation: none !important; pointer-events: auto !important; 
    }

    /* HEADER FISSO */
    body { padding-top: 65px !important; } 

    #header.header {
        position: fixed !important;
        top: 0 !important; left: 0 !important; right: 0 !important;
        width: 100% !important; height: 65px !important;
        z-index: 99999 !important;
        background-color: #001900 !important; /* COLORE VERDE SCURO BLINDATO */
        border-bottom: 2px solid #D8C40A !important;
    }

    /* CONTENITORE HEADER (Sintassi Webkit) */
    #header > .container-fluid.container-xl {
        padding-left: 12px !important; padding-right: 12px !important; 
        display: -webkit-box !important; display: -webkit-flex !important; display: flex !important;
        -webkit-box-pack: justify !important; -webkit-justify-content: space-between !important; justify-content: space-between !important;
        -webkit-box-align: center !important; -webkit-align-items: center !important; align-items: center !important;
        height: 100% !important;
    }

    /* LOGO (Senza clamp moderno) */
    #header a.logo {
        -webkit-flex: 0 1 auto !important; flex: 0 1 auto !important; 
        min-width: 0; margin-right: 10px; overflow: hidden; 
    }
    #header a.logo .sitename {
        font-size: 16px !important; /* Misura fissa sicura */
        line-height: 1.1 !important; margin: 0 !important; color: #ffffff !important; 
    }
    #header a.logo .sitename .second-line {
        display: block !important; padding-left: 20px !important; font-size: inherit !important;  
    }

    /* CONTENITORE BOTTONI DESTRA (Sintassi Webkit corazzata) */
    #header .header-right-actions {
        display: -webkit-box !important; display: -webkit-flex !important; display: flex !important;
        -webkit-box-align: center !important; -webkit-align-items: center !important; align-items: center !important;
        -webkit-box-pack: end !important; -webkit-justify-content: flex-end !important; justify-content: flex-end !important;
        margin-top: 0 !important; gap: 15px !important;
    }

    #header .welcome-bar, .navmenu ul { display: none !important; }

    /* TASTI AZIONE (Avatar e Accedi) */
    #header .btn-auth-action, #header .mobile-header-avatar {
        -webkit-box-ordinal-group: 2 !important; -webkit-order: 1 !important; order: 1 !important; 
        margin: 0 !important; padding: 0 12px !important;
        display: -webkit-inline-box !important; display: -webkit-inline-flex !important; display: inline-flex !important; 
        -webkit-box-align: center !important; -webkit-align-items: center !important; align-items: center !important;
        height: 40px !important; font-size: 14px !important;
        background-color: #D8C40A !important; color: #001900 !important; 
        border-radius: 8px !important; border: none !important; text-decoration: none !important;
    }

    /* NASCONDIAMO FORZATAMENTE IL TASTO "ESCI" SULL'HEADER MOBILE */
    #header .btn-auth-action.esci-desktop {
        display: none !important;
    }

    /* TASTO HAMBURGER */
    #header .mobile-nav-toggle {
        -webkit-box-ordinal-group: 3 !important; -webkit-order: 2 !important; order: 2 !important; 
        margin: 0 !important; padding: 0 !important; width: 40px !important; height: 40px !important;
        display: -webkit-box !important; display: -webkit-flex !important; display: flex !important; 
        -webkit-box-align: center !important; -webkit-align-items: center !important; align-items: center !important; 
        -webkit-box-pack: center !important; -webkit-justify-content: center !important; justify-content: center !important;
        background-color: #D8C40A !important; border-radius: 8px !important; border: none !important;
        box-shadow: 0 2px 5px rgba(0,0,0,0.2) !important; color: #001900 !important; font-size: 26px !important;
        z-index: 10000 !important; cursor: pointer !important; pointer-events: auto !important;
    }
    #header .mobile-nav-toggle::before, #header .mobile-nav-toggle::after { display: none !important; content: none !important; }
    
    #header .mobile-nav-toggle i {
        display: -webkit-box !important; display: -webkit-flex !important; display: flex !important; 
        -webkit-box-align: center !important; -webkit-align-items: center !important; align-items: center !important; 
        -webkit-box-pack: center !important; -webkit-justify-content: center !important; justify-content: center !important;
        width: 100%; height: 100%; line-height: 1 !important; pointer-events: none !important; 
    }
    #header .mobile-nav-toggle i.bi-x { font-size: 36px !important; }

    /* ==========================================================
       MENU APERTO
       ========================================================== */
    body.mobile-nav-active #header .navmenu ul {
        display: block !important; position: fixed !important; 
        top: 65px !important; right: 15px !important; left: auto !important;
        width: 220px !important; max-width: 90vw !important; 
        max-height: calc(100dvh - 80px) !important; 
        overflow-y: auto !important; overflow-x: hidden !important; 
        background-color: #001900 !important; padding: 15px !important;
        box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important; 
        border: 1px solid #D8C40A !important; border-radius: 12px !important; 
        margin: 0 !important; z-index: 999999 !important;
    }
    body.mobile-nav-active #header .navmenu ul a {
        padding: 8px 15px !important; margin-bottom: 5px !important; 
        text-align: right !important; display: block !important; 
        font-size: 14px !important; font-weight: 500 !important;
        color: #ffffff !important; border: 1px solid rgba(216,196,10,0.2); 
        border-radius: 6px !important; text-decoration: none !important;
    }
    body.mobile-nav-active #header .navmenu ul a.active {
        color: #D8C40A !important; border-color: #D8C40A !important;
        background-color: rgba(216, 196, 10, 0.1) !important; font-weight: bold !important;
    }
    body.mobile-nav-active #header .navmenu > ul > li.dropdown > a { position: relative; margin-bottom: 0 !important; }
    body.mobile-nav-active #header .navmenu ul .toggle-dropdown {
        position: absolute !important; left: 15px !important; top: 50% !important; transform: translateY(-50%);
        width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;
        background-color: #D8C40A; color: #001900; border-radius: 50%; font-size: 14px; z-index: 10;
    }
    body.mobile-nav-active #header .navmenu ul .dropdown ul {
        display: block !important; position: relative !important; max-height: 0 !important;
        overflow: hidden !important; padding: 0 !important; margin: 0 !important; opacity: 0 !important;
        background-color: transparent !important; border: none !important; 
        transition: max-height .35s ease, opacity .2s ease !important;
    }
    body.mobile-nav-active #header .navmenu ul .dropdown ul.dropdown-active {
        max-height: 800px !important; margin-top: 5px !important; margin-bottom: 5px !important;
        padding-top: 5px !important; opacity: 1 !important;
    }
    body.mobile-nav-active #header .navmenu ul .dropdown ul a {
        font-size: 13px !important; padding-right: 25px !important; margin: 0 0 2px 0 !important; 
        border: none !important; border-radius: 0 !important;
    }
    body.mobile-nav-active #header .navmenu ul .dropdown ul li:hover > a { color: #D8C40A !important; }
    body.mobile-nav-active #header .navmenu ul a.menu-simple-logout { border-color: #D8C40A !important; margin-top: 15px !important; color: #D8C40A !important; }
    body.mobile-nav-active #header .navmenu ul::-webkit-scrollbar { width: 6px !important; }
    body.mobile-nav-active #header .navmenu ul::-webkit-scrollbar-track { background: rgba(0, 25, 0, 0.4) !important; border-radius: 10px !important; }
    body.mobile-nav-active #header .navmenu ul::-webkit-scrollbar-thumb { background-color: #D8C40A !important; border-radius: 10px !important; }

    /* ==========================================================
       PAGINA HOME
       ========================================================== */
    body.index-page #hero.hero.section {
        position: relative !important; overflow: hidden !important; background-color: #000000 !important;
        padding-top: 50px !important; padding-bottom: 50px !important; min-height: 100vh !important;
        display: flex; align-items: flex-start !important; 
    }
    body.index-page #hero.hero.section::before {
        content: "" !important; position: absolute !important;
        top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.65) !important; z-index: 2 !important; 
    }
    body.index-page .hero-bg-picture {
        position: absolute !important; top: 0; left: 0; right: 0; bottom: 0;
        width: 100% !important; height: 100% !important; z-index: 1 !important; 
    }
    body.index-page .hero-bg-picture img {
        width: 100% !important; height: 100% !important;
        object-fit: contain !important; object-position: center !important;
    }
    body.index-page #hero .container { position: relative !important; z-index: 5 !important; text-align: left; }
    body.index-page #hero .col-lg-6 { width: 100% !important; padding-left: 15px; padding-right: 15px; }
    body.index-page #hero h2 { font-size: 26px; line-height: 1.3; }
    body.index-page #hero .btn-get-started { position: relative !important; z-index: 10 !important; pointer-events: auto !important; }
    
    body.index-page #ricerca { position: relative !important; z-index: 10 !important; background-color: #001900 !important; padding-top: 40px !important; padding-bottom: 40px !important; }
    body.index-page #ricerca .service-item { padding: 20px 15px !important; flex-direction: column; align-items: flex-start; text-align: left; }
    body.index-page #ricerca .service-item p { display: none !important; }

    /* ==========================================================
       PAGINA RICERCA
       ========================================================== */
    body.ricerca-page section#ricerca, body.ricerca-page section#hero.section_ricerca, body.ricerca-page .ricerca-bg {
        background-color: #001900 !important; background-image: none !important;
    }
    body.ricerca-page section#ricerca { padding-bottom: 0 !important; margin-bottom: 0 !important; }
    body.ricerca-page section#hero.section_ricerca { padding-top: 15px !important; }
    body.ricerca-page section#ricerca .section-title h2 { font-size: 1.8rem !important; margin-bottom: 10px !important; }
    body.ricerca-page section#ricerca .section-title p { font-size: 14px !important; }
    body.ricerca-page .col-lg-3, body.ricerca-page .col-md-3 { display: none !important; }
    body.ricerca-page .col-lg-6, body.ricerca-page .col-md-6, body.ricerca-page .col-12 {
        width: 100% !important; padding-left: 0; padding-right: 0;
    }
    body.ricerca-page .search-box-container { padding: 10px !important; border-radius: 14px; display: flex; flex-direction: column; }
    body.ricerca-page .search-box-container #results { order: 2; }
    body.ricerca-page .search-box-container #globalResultsMapContainer { order: 3; }
    body.ricerca-page #searchTabs.nav-tabs { flex-wrap: nowrap !important; overflow-x: auto; gap: 8px; scrollbar-width: none; }
    body.ricerca-page #searchTabs.nav-tabs::-webkit-scrollbar { display: none; }
    body.ricerca-page #searchTabs .nav-item { flex-shrink: 0; }
    body.ricerca-page #searchTabs .nav-link { white-space: nowrap; padding: 10px 12px; border-radius: 10px; }
    body.ricerca-page .container_search_common_item .form-select, body.ricerca-page .container_search_common_item .form-control, body.ricerca-page .container_search_common_item button[type="submit"] { width: 100% !important; }

  /* Accordion Risultati (Mobile) */
  body.ricerca-page #resultsAccordion .accordion-header {
      display: grid !important;
      grid-template-columns: 1fr auto; 
      grid-template-rows: auto auto;   
      gap: 8px 10px;
      align-items: center;
      padding: 0 5px 0 0 !important;
  }

  body.ricerca-page #resultsAccordion .accordion-button {
      grid-column: 1 / 2; grid-row: 1 / 3;
      width: auto !important; flex: 1 1 auto !important;
      padding-right: 2.5rem; 
      font-size: 14px; line-height: 1.15;
  }

  body.ricerca-page #resultsAccordion .church-name-text {
      display: -webkit-box;
      -webkit-line-clamp: 2; line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden; white-space: normal;
  }

  body.ricerca-page #resultsAccordion .btn-gold-map {
      grid-column: 2 / 3; grid-row: 1 / 3;
      align-self: center; justify-self: end;
      font-size: 12px; padding: 6px 10px; border-radius: 999px;
      margin: 0 6px 0 auto;
  }

  body.ricerca-page #resultsAccordion .status-badge-bottom {
      grid-column: 1 / 2; grid-row: 2;
      position: relative !important;
      width: fit-content !important;
      font-size: 10px; padding: 3px 8px; border-radius: 999px;
  }


  /* ==========================================================
     RICERCA - MOBILE/TABLET
     Fix UX: in vista MAPPA nascondi i filtri e fai vedere la mappa
     ========================================================== */

  /* 1) In vista "MAPPA" (body.mobile-map-view viene gestita dal tuo JS)
        nascondo completamente i filtri: così lo scroll non finisce sui controlli */
  body.ricerca-page.mobile-map-view #resultsHeader .filters-block {
    display: none !important;
  }

  /* Compatta header risultati in vista MAPPA per far entrare subito la mappa nel viewport */
  body.ricerca-page.mobile-map-view #resultsHeader {
    margin-bottom: .5rem !important;
  }

  body.ricerca-page.mobile-map-view .search-title-container {
    margin-bottom: .5rem !important;
    padding: 10px !important;
  }

  body.ricerca-page.mobile-map-view #searchTypeHeader {
    font-size: 1.35rem !important;   /* più adatto a tablet/phone */
    letter-spacing: 1px !important;
  }

  /* Avvicina la mappa al toggle (il mt-4 del container altrimenti spinge giù) */
  body.ricerca-page.mobile-map-view #globalResultsMapContainer {
    margin-top: .5rem !important;
  }

  /* Mappa più “tablet friendly” (override degli inline style height:400px) */
  body.ricerca-page.mobile-map-view #globalResultsMap {
    height: 62vh !important;
    min-height: 320px !important;
    max-height: 520px !important;
  }


  /* ==========================================================
     TOGGLE Mobile "Mappa / Lista"
     - ordine: Mappa a sinistra, Lista a destra
     - colori: attivo oro + testo #001900; non attivo verde scuro + testo oro
     ========================================================== */

  body.ricerca-page #mobileViewToggle .btn-group {
    display: flex !important;
    width: 100%;
  }

  /* 2) Ordine visivo dei pulsanti (senza toccare l’HTML/JS) */
  body.ricerca-page #mobileViewToggle .btn[data-view="map"]  { order: 1; }
  body.ricerca-page #mobileViewToggle .btn[data-view="list"] { order: 2; }

  /* 3) Stato NON selezionato */
  body.ricerca-page #mobileViewToggle .btn.btn-outline-gold {
    flex: 1 1 50% !important;
    background-color: #000f00 !important; /* verde più scuro di #001900 */
    color: #E0CD00 !important;            /* testo dorato */
    border: 2px solid #E0CD00 !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    letter-spacing: .5px;
  }

  /* Hover/focus (rimuove l’effetto "celestino" e lo rende dorato) */
  body.ricerca-page #mobileViewToggle .btn.btn-outline-gold:focus,
  body.ricerca-page #mobileViewToggle .btn.btn-outline-gold:focus-visible {
    box-shadow: 0 0 0 .2rem rgba(224, 205, 0, 0.28) !important;
    outline: 0 !important;
  }

  body.ricerca-page #mobileViewToggle .btn.btn-outline-gold:hover {
    background-color: #001200 !important;
    color: #E0CD00 !important;
    border-color: #E0CD00 !important;
  }

  /* 4) Stato SELEZIONATO */
  body.ricerca-page #mobileViewToggle .btn.btn-outline-gold.active,
  body.ricerca-page #mobileViewToggle .btn.btn-outline-gold:active,
  body.ricerca-page #mobileViewToggle .btn.btn-outline-gold.show {
    background-color: #E0CD00 !important;
    color: #001900 !important; /* testo verdone richiesto */
    border-color: #E0CD00 !important;
    box-shadow: none !important;
  }

  /* Bottone MAPPA: solo icona, resta a destra */
  body.ricerca-page #resultsAccordion .btn-gold-map{
    font-size: 0 !important;          /* nasconde il testo "MAPPA" */
    padding: 8px 12px !important;
    min-width: 44px !important;       /* target touch */
    border-radius: 999px !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
  }

  body.ricerca-page #resultsAccordion .btn-gold-map i{
    font-size: 16px !important;       /* dimensione icona */
    margin: 0 !important;
  }
  
  body.ricerca-page #resultsAccordion .accordion-button{
    position: relative !important;
    padding-right: 28px !important; /* spazio per la freccia */
  }

  body.ricerca-page #resultsAccordion .accordion-button::after{
    position: absolute !important;
    right: -2px !important;          /* avvicina al bordo destro (verso MAPPA) */
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin-left: 0 !important;
  }
  
  /* titolo (accordion-button) SOLO in riga 1: non deve sovrapporsi al badge */
  body.ricerca-page #resultsAccordion .accordion-button{
    grid-row: 1 !important;
    align-self: start !important;
    padding-top: 12px !important;
    padding-bottom: 6px !important;
  }

  /* testo chiesa leggermente più in alto */
  body.ricerca-page #resultsAccordion .church-name-text{
    transform: translateY(-2px) !important;
  }

  /* badge in riga 2, separato dal titolo */
  body.ricerca-page #resultsAccordion .status-badge-bottom{
    grid-row: 2 !important;
    margin-top: -2px !important;
  }

  /* mappa a destra su entrambe le righe */
  body.ricerca-page #resultsAccordion .btn-gold-map{
    grid-row: 1 / 3 !important;
  }

  body.ricerca-page #resultsAccordion .accordion-header.show-title-tooltip::after{
    content: attr(data-full-title);
    position: absolute;
    left: 12px;
    right: 12px;
    top: -8px;
    transform: translateY(-100%);
    z-index: 50;

    background: rgba(0, 15, 0, 0.96);
    border: 1px solid rgba(224, 205, 0, 0.55);
    color: #E0CD00;
    padding: 10px 12px;
    border-radius: 10px;

    font-size: 13px;
    font-weight: 700;
    letter-spacing: .2px;
    line-height: 1.2;

    box-shadow: 0 10px 25px rgba(0,0,0,.55);
  }

  body.ricerca-page #resultsAccordion .accordion-header.show-title-tooltip::before{
    content: "";
    position: absolute;
    top: -8px;
    left: 34px;
    width: 12px;
    height: 12px;
    transform: rotate(45deg);
    background: rgba(0, 15, 0, 0.96);
    border-left: 1px solid rgba(224, 205, 0, 0.55);
    border-top: 1px solid rgba(224, 205, 0, 0.55);
    z-index: 51;
  }

  /* Permette al tooltip di uscire dai box senza essere tagliato */
  body.ricerca-page .search-box-container,
  body.ricerca-page #results,
  body.ricerca-page #resultsAccordion,
  body.ricerca-page #resultsAccordion .accordion-item,
  body.ricerca-page #resultsAccordion .accordion-header {
    overflow: visible !important;
  }

  /* Z-index “forte” quando il tooltip è attivo */
  body.ricerca-page #resultsAccordion .accordion-header {
    position: relative !important; /* necessario per z-index + pseudo-elementi */
    z-index: 1;
  }

  body.ricerca-page #resultsAccordion .accordion-header.show-title-tooltip {
    z-index: 9999 !important;
  }

  body.ricerca-page #resultsAccordion .accordion-header.show-title-tooltip::after,
  body.ricerca-page #resultsAccordion .accordion-header.show-title-tooltip::before {
    z-index: 10000 !important;
  }

    /* Riduce lo spazio tra testo (colonna 1) e bottone mappa (colonna 2) */
  body.ricerca-page #resultsAccordion .accordion-header {
    gap: 6px 6px !important; /* prima era 8px 10px */
  }

  /* Freccia ancora più a destra (verso mappa) */
  body.ricerca-page #resultsAccordion .accordion-button::after {
    right: -12px !important;  /* aumenta se vuoi ancora più a destra: -14 / -16 */
  }

  /* opzionale: riduci anche il margine del bottone mappa */
  body.ricerca-page #resultsAccordion .btn-gold-map {
    margin-right: 2px !important;
  }

  /* Disattiva eventuale tooltip "interno" precedente */
  body.ricerca-page #resultsAccordion .accordion-header.show-title-tooltip .accordion-button::before{
    content: "" !important;
    display: none !important;
  }

  /* Tooltip esterno sovrapposto all'item */
  body.ricerca-page #resultsAccordion .accordion-header{
    position: relative !important;
  }

  body.ricerca-page #resultsAccordion .accordion-header.show-title-tooltip::after{
    content: attr(data-full-title);
    position: absolute !important;

    top: 50% !important;
    transform: translateY(-50%) !important;

    left: 12px !important;

    /* spazio riservato a freccia + zona destra */
    right: 54px !important;

    z-index: 9999 !important;
    pointer-events: none !important;

    background: rgba(0, 15, 0, 0.96) !important;
    border: 1px solid rgba(224, 205, 0, 0.60) !important;
    color: #E0CD00 !important;

    padding: 10px 12px !important;
    border-radius: 10px !important;

    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;

    /* fallback multi-line senza proprietà webkit */
    display: block !important;
    overflow: hidden !important;
    max-height: 2.3em !important; /* ~2 righe (1.15 * 2) */
  }

  /* assicurati che l'header abbia un'altezza prevedibile */
  body.ricerca-page #resultsAccordion .accordion-header{
    min-height: 62px !important;
    align-items: center !important;
  }

  /* bottone: deve riempire l’altezza della cella per centrare bene l’after */
  body.ricerca-page #resultsAccordion .accordion-button{
    height: 100% !important;
    align-self: stretch !important;
    display: flex !important;
    align-items: center !important;
    position: relative !important;
  }

  /* freccia: centrata Y e spinta verso destra */
  body.ricerca-page #resultsAccordion .accordion-button::after{
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;

    /* spingi verso destra: valori tipici -12/-14/-16.
       ATTENZIONE: se vai troppo, rischi overlap col bottone mappa. */
    right: -16px !important;

    margin-left: 0 !important;
  }
  body.ricerca-page #resultsAccordion .accordion-header.show-title-tooltip::after{
    /* più grande */
    font-size: 15px !important;
    padding: 12px 14px !important;
    border-radius: 12px !important;
    line-height: 1.2 !important;

    /* larghezza “dinamica”: si adatta al testo, ma non supera un massimo */
    right: auto !important; /* importante: disattiva la larghezza “full” */
    max-width: calc(100% - 12px - 64px) !important;
    /* 12px = left, 64px = spazio riservato a freccia/zona destra (aumenta se serve) */

    /* opzionale: se vuoi anche più righe */
    max-height: 3.6em !important; /* ~3 righe con line-height 1.2 */
  }

    /* assicurati che il riferimento sia il bottone */
  body.ricerca-page #resultsAccordion .accordion-button{
    position: relative !important;
  }

  /* stato chiuso */
  body.ricerca-page #resultsAccordion .accordion-button.collapsed::after{
    position: absolute !important;
    top: 50% !important;
    right: -16px !important;           /* il tuo offset verso destra */
    margin: 0 !important;
    transform: translateY(-50%) rotate(0deg) !important;
  }

  /* stato aperto */
  body.ricerca-page #resultsAccordion .accordion-button:not(.collapsed)::after{
    position: absolute !important;
    top: 50% !important;
    right: -16px !important;
    margin: 0 !important;
    transform: translateY(-50%) rotate(-180deg) !important;
  }
  
    body.ricerca-page #resultsAccordion .accordion-header{
    align-items: stretch !important;
  }
  body.ricerca-page #resultsAccordion .accordion-button{
    align-self: stretch !important;
    display: flex !important;
    align-items: center !important;
  }

  body.ricerca-page #resultsAccordion .accordion-header.show-title-tooltip::after{
  white-space: normal !important;
  overflow: hidden !important;

  line-height: 1.2 !important;
  max-height: 4.8em !important; /* 4 righe */

}

/* ==========================================================
   CEI / RICERCA - Mobile & Tablet UX (<= 991.98px)
   Da incollare in FONDO a mobile-overrides.css
   ========================================================== */

  /* ---------- MAP VIEW: mostra (quasi) solo mappa + toggle ---------- */
  body.ricerca-page.mobile-map-view #resultsHeader .search-title-container,
  body.ricerca-page.mobile-map-view #resultsHeader .filters-block {
    display: none !important;
  }

  body.ricerca-page.mobile-map-view #resultsHeader {
    margin-bottom: 0.5rem !important;
  }

  /* Toggle sempre accessibile mentre scorri la mappa */
  body.ricerca-page #mobileViewToggle {
    position: sticky;
    top: 72px;              /* se il tuo header fisso è più alto/basso, regola questo valore */
    z-index: 1050;
    background: #001900;
    padding-top: 6px;
    padding-bottom: 6px;
  }

  body.ricerca-page.mobile-map-view #globalResultsMapContainer {
    margin-top: 0.5rem !important; /* riduce l'effetto mt-4 */
  }

  body.ricerca-page.mobile-map-view #globalResultsMap {
    height: 70vh !important;
    min-height: 320px !important;
    max-height: 620px !important;
  }

  /* ---------- Toggle MAPPA/LISTA: colori tema ---------- */
  body.ricerca-page #mobileViewToggle .btn-group {
    width: 100%;
    display: flex;
  }

  body.ricerca-page #mobileViewToggle .btn {
    flex: 1 1 50%;
    font-weight: 800 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  /* non selezionato */
  body.ricerca-page #mobileViewToggle .btn.btn-outline-gold:not(.active) {
    background-color: #000f00 !important; /* verde più scuro di #001900 */
    color: #E0CD00 !important;
    border: 2px solid #E0CD00 !important;
  }

  /* selezionato */
  body.ricerca-page #mobileViewToggle .btn.btn-outline-gold.active {
    background-color: #E0CD00 !important;
    color: #001900 !important;
    border-color: #E0CD00 !important;
    box-shadow: none !important;
  }

  body.ricerca-page #mobileViewToggle .btn:focus,
  body.ricerca-page #mobileViewToggle .btn:focus-visible {
    outline: 0 !important;
    box-shadow: 0 0 0 0.2rem rgba(224, 205, 0, 0.28) !important;
  }

  /* ---------- Accordion header: layout stabile + freccia centrata ---------- */
  body.ricerca-page #resultsAccordion .accordion-header {
    display: flex !important;               /* forza flex (evita i side-effect del grid) */
    align-items: stretch !important;
    gap: 6px !important;
    padding-right: 6px !important;
    min-height: 66px !important;
    overflow: visible !important;           /* per tooltip overlay */
  }

  body.ricerca-page #resultsAccordion .accordion-button {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    height: 100% !important;
    align-self: stretch !important;

    /* spazio sotto per badge + spazio a destra per freccia */
    padding: 12px 2.25rem 28px 14px !important;

    position: relative !important;
    display: flex !important;
    align-items: flex-start !important;     /* testo leggermente più “in alto” */
    overflow: visible !important;
  }

  /* Freccia: assoluta e centrata verticalmente sull'ITEM */
  body.ricerca-page #resultsAccordion .accordion-button::after {
    position: absolute !important;
    right: 6px !important;
    top: 50% !important;
    margin: 0 !important;
    transform: translateY(-50%) rotate(0deg) !important;
  }

  body.ricerca-page #resultsAccordion .accordion-button:not(.collapsed)::after {
    transform: translateY(-50%) rotate(-180deg) !important;
  }

  /* Titolo chiesa: 2 righe senza -webkit-line-clamp */
  body.ricerca-page #resultsAccordion .church-name-text {
    display: block !important;
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;

    line-height: 1.15 !important;
    max-height: 2.3em !important; /* ~2 righe */
    padding-right: 6px !important;
  }

  /* Bottone MAPPA: solo icona, a destra */
  body.ricerca-page #resultsAccordion .btn-gold-map {
    margin-left: 6px !important;
    margin-right: 2px !important;

    font-size: 0 !important;          /* nasconde “MAPPA” */
    padding: 0 !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
  }

  body.ricerca-page #resultsAccordion .btn-gold-map i {
    font-size: 18px !important;
    margin: 0 !important;
  }

  /* Badge: fuori dal flow per non “alzare” visivamente la freccia */
  body.ricerca-page #resultsAccordion .status-badge-bottom {
    position: absolute !important;
    left: 14px !important;
    bottom: 8px !important;
    transform: none !important;

    z-index: 2 !important;
    white-space: nowrap !important;
    max-width: calc(100% - 14px - 60px) !important; /* lascia spazio a freccia + mappa */
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* ---------- Tooltip mobile (overlay multi-line, tema) ---------- */
  body.ricerca-page #resultsAccordion .accordion-item,
  body.ricerca-page #resultsAccordion .accordion-header {
    overflow: visible !important;
  }

  body.ricerca-page #resultsAccordion .accordion-header.show-title-tooltip {
    z-index: 9999 !important;
    position: relative !important;
  }

  body.ricerca-page #resultsAccordion .accordion-header.show-title-tooltip::after {
    content: attr(data-full-title);
    position: absolute !important;
    left: 12px !important;
    right: 72px !important;                /* spazio riservato a freccia + bottone mappa */
    top: 50% !important;
    transform: translateY(-50%) !important;

    pointer-events: none !important;
    z-index: 10000 !important;

    background: rgba(0, 25, 0, 0.96) !important;
    border: 1px solid rgba(224, 205, 0, 0.65) !important;
    color: #E0CD00 !important;

    padding: 10px 12px !important;
    border-radius: 10px !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.55) !important;

    white-space: normal !important;
    line-height: 1.2 !important;

    /* multi-line “vera”: nessun clamp webkit */
    max-height: 40vh !important;
    overflow: auto !important;
  }

  body.ricerca-page #resultsAccordion .accordion-header.show-title-tooltip::before {
    content: "";
    position: absolute;
    left: 24px;
    top: 50%;
    width: 12px;
    height: 12px;
    transform: translateY(-50%) rotate(45deg);
    background: rgba(0, 25, 0, 0.96);
    border-left: 1px solid rgba(224, 205, 0, 0.65);
    border-bottom: 1px solid rgba(224, 205, 0, 0.65);
    z-index: 10001;
    pointer-events: none;
  }

    /* Spazio reale (compatibile Android 8): usa margin, NON gap */
  body.ricerca-page #resultsAccordion .btn-gold-map{
    margin-left: 12px !important;   /* crea spazio tra freccia e cerchio */
  }

  /* Freccia un po’ più a sinistra (dentro al bottone) */
  body.ricerca-page #resultsAccordion .accordion-button::after{
    right: 18px !important;
  }

  /* Centro PERFETTO dell’icona nel cerchio (no baseline/line-height issues) */
  body.ricerca-page #resultsAccordion .btn-gold-map{
    position: relative !important;
  }

  body.ricerca-page #resultsAccordion .btn-gold-map i{
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    line-height: 1 !important;
  }

  
	  /* ==========================================================
	   CEI - Hint temporaneo post-scroll (Mobile/Tablet)
	   ========================================================== */
	/* Hint overlay sulla MAPPA (iniettato dentro #globalResultsMap) */
	body.ricerca-page #globalResultsMap{
	  position: relative; /* sicurezza: contesto per l'absolute */
	}

	body.ricerca-page #globalResultsMap .cei-mobile-scroll-hint{
	  position: absolute;
	  left: 50%;
	  bottom: 14px;
	  transform: translate(-50%, 10px);
	  opacity: 0;

	  max-width: min(92%, 560px);
	  width: max-content;

	  background: rgba(0, 25, 0, 0.92);
	  color: #fff;
	  border: 1px solid rgba(224, 205, 0, 0.70);
	  box-shadow: 0 12px 28px rgba(0,0,0,.55);

	  border-radius: 12px;
	  padding: 10px 12px;

	  z-index: 2000;       /* sopra tiles/marker */
	  pointer-events: none;/* non blocca tap/drag sulla mappa */
	  transition: opacity .35s ease, transform .35s ease;
	}

	body.ricerca-page #globalResultsMap .cei-mobile-scroll-hint strong{
	  color: #E0CD00;
	}

	body.ricerca-page #globalResultsMap .cei-mobile-scroll-hint.is-visible{
	  opacity: 1;
	  transform: translate(-50%, 0);
	}

	body.ricerca-page #globalResultsMap .cei-mobile-scroll-hint.is-hidden{
	  opacity: 0;
	  transform: translate(-50%, 10px);
	}
   /* Evita scroll X della pagina */
  body#dettagliochiesa-page { overflow-x: hidden !important; }

/* =======================================================
   EVENTI ORGANIZZATI (MOBILE) - FIX ANDROID 8 / FLEXBOX
   2 colonne: DATA | TITOLO - Riga fissa, niente gap
   ======================================================= */

body#dettagliochiesa-page #appointments table.custom-table,
body#dettagliochiesa-page #appointments table.custom-table thead,
body#dettagliochiesa-page #appointments table.custom-table tbody,
body#dettagliochiesa-page #appointments table.custom-table tr,
body#dettagliochiesa-page #appointments table.custom-table th,
body#dettagliochiesa-page #appointments table.custom-table td {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Nascondo le colonne inutili: 1(icona header), 3(tipologia), 5(immagine) e il body descrittivo */
body#dettagliochiesa-page #appointments table.custom-table th:nth-child(1),
body#dettagliochiesa-page #appointments table.custom-table th:nth-child(3),
body#dettagliochiesa-page #appointments table.custom-table th:nth-child(5),
body#dettagliochiesa-page #appointments table.custom-table td:nth-child(3),
body#dettagliochiesa-page #appointments table.custom-table td:nth-child(5),
body#dettagliochiesa-page #appointments table.custom-table tr.accordion-content {
  display: none !important;
}

/* SETUP FLEXBOX PER RIGHE (Sia Header che Body) */
body#dettagliochiesa-page #appointments table.custom-table thead tr,
body#dettagliochiesa-page #appointments table.custom-table tbody tr.accordion-trigger {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  
  /* PADDING IDENTICO per Header e Body. 48px a destra servono a far spazio al pulsante "i" */
  padding: 12px 48px 12px 12px !important; 
  position: relative !important;
  
  margin: 0 !important;
  border-bottom: 2px solid #E0CD00 !important;
}

/* Colore sfondo Header e Body */
body#dettagliochiesa-page #appointments table.custom-table thead tr { background-color: #000C00 !important; }
body#dettagliochiesa-page #appointments table.custom-table tbody tr.accordion-trigger { background-color: #799275 !important; }

/* COLONNA DATA (th 4, td 4) - Centrata */
body#dettagliochiesa-page #appointments table.custom-table th:nth-child(4),
body#dettagliochiesa-page #appointments table.custom-table td:nth-child(4) {
  display: block !important;
  order: 1 !important;
  flex: 0 0 85px !important; 
  margin: 0 !important; /* Tolto il margine qui... */
  padding: 0 !important;
  text-align: center !important; /* <--- MODIFICATO: ora è centrato */
  
  font-size: 13px !important;
  white-space: nowrap !important;
  border: none !important;
}


/* COLONNA TITOLO (th 2, td 2) - Padding iniziale aggiunto */
body#dettagliochiesa-page #appointments table.custom-table th:nth-child(2),
body#dettagliochiesa-page #appointments table.custom-table td:nth-child(2) {
  display: block !important;
  order: 2 !important;
  flex: 1 1 auto !important; 
  min-width: 0 !important; 
  
  /* <--- MODIFICATO: aggiunto padding a sinistra di 12px */
  padding: 0 0 0 12px !important; 
  text-align: left !important;
  
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 13px !important;
  border: none !important;
}

/* Colori Testi */
body#dettagliochiesa-page #appointments table.custom-table thead th { color: #E0CD00 !important; }
body#dettagliochiesa-page #appointments table.custom-table tbody td { color: #212529 !important; }

/* SETUP PULSANTE "i" AL POSTO DELLA CHEVRON */
body#dettagliochiesa-page #appointments table.custom-table tbody tr.accordion-trigger > td:nth-child(1) {
  display: flex !important;
  position: absolute !important;
  right: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  
  width: 28px !important;
  height: 28px !important;
  align-items: center !important;
  justify-content: center !important;
  
  background: #E0CD00 !important;
  border: 2px solid #001900 !important;
  border-radius: 50% !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: 0 2px 5px rgba(0,0,0,0.4) !important;
}

body#dettagliochiesa-page #appointments table.custom-table tbody tr.accordion-trigger > td:nth-child(1) .expand-icon {
  display: none !important;
}

body#dettagliochiesa-page #appointments table.custom-table tbody tr.accordion-trigger > td:nth-child(1)::before {
  content: "i";
  color: #001900;
  font-weight: 900;
  font-size: 16px;
  font-family: sans-serif;
  line-height: 1;
}

/* =======================================================
   OVERLAY DETTAGLI EVENTO (Design Verde scuro e Oro)
   ======================================================= */
body#dettagliochiesa-page #ceiEventOverlay {
  --cei-header-offset: 72px;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 2050;
  display: none;
  background: rgba(0, 0, 0, 0.75);
  padding: 16px;
  padding-top: calc(var(--cei-header-offset) + 16px);
  box-sizing: border-box;
}

body#dettagliochiesa-page #ceiEventOverlay.is-open {
  display: flex;
  align-items: flex-start; /* Centrato in alto, per prevenire tagli su schermi bassi */
  justify-content: center;
}

/* Limito l'altezza massima per forzare lo scroll interno */
body#dettagliochiesa-page #ceiEventOverlay .cei-event-panel {
  width: 100%;
  max-width: 400px;
  background: #283929; 
  border: 2px solid #D8C40A; 
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.6);
  
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* <-- MODIFICATO: altezza dinamica che rispetta l'header fisso + margini */
  max-height: calc(100vh - var(--cei-header-offset) - 32px); 
}


body#dettagliochiesa-page #ceiEventOverlay .cei-event-close {
  background: #001900;
  color: #E0CD00;
  border: none;
  border-bottom: 1px solid #D8C40A;
  padding: 12px 16px;
  text-align: right;
  font-weight: bold;
  font-size: 14px;
}

body#dettagliochiesa-page #ceiEventOverlay .cei-event-img {
  width: 100%;
  max-height: 180px;
  object-fit: cover; /* Meglio di contain per l'estetica, a meno di grafiche con testo */
  display: none; /* gestito via JS */
  border-bottom: 2px solid #D8C40A;
}

/* Il bottone e l'immagine NON devono schiacciarsi */
body#dettagliochiesa-page #ceiEventOverlay .cei-event-close,
body#dettagliochiesa-page #ceiEventOverlay .cei-event-img {
  flex-shrink: 0 !important; 
}

/* Il corpo del testo occupa lo spazio rimanente e scrolla */
body#dettagliochiesa-page #ceiEventOverlay .cei-event-panel__body {
  padding: 16px;
  flex: 1 1 auto !important;
  overflow-y: auto !important; /* <-- MODIFICATO: abilita lo scroll interno */
  color: #FFFFFF;
}

body#dettagliochiesa-page #ceiEventOverlay .cei-label {
  color: #D8C40A;
  font-weight: bold;
  font-size: 12px;
  text-transform: uppercase;
  margin-top: 14px;
  margin-bottom: 4px;
}

body#dettagliochiesa-page #ceiEventOverlay .cei-label:first-child { margin-top: 0; }

body#dettagliochiesa-page #ceiEventOverlay .cei-value {
  font-size: 14px;
  line-height: 1.4;
}

/* NUOVA CLASSE: blocca lo scroll del body quando l'overlay è aperto */
body#dettagliochiesa-page.cei-no-scroll {
  overflow: hidden !important;
}
  
/* =====================================================
 REGISTRAZIONE – RESPONSIVE FIX
 Scoped: body.registrazione-page
===================================================== */

/* ==========================================
 SEZIONI COLLASSABILI – VERSIONE DEFINITIVA
========================================== */

body.registrazione-page .section-toggle {
  display: flex;                 /* Torna a occupare tutta la larghezza */
  justify-content: space-between;
  align-items: center;
  width: 100%;
  cursor: pointer;
  padding-right: 15px;           /* Spazio interno, non bordo estremo */
}

body.registrazione-page .section-toggle::after {
  content: "";
  width: 10px;
  height: 10px;
  border-right: 2px solid #D8C40A;
  border-bottom: 2px solid #D8C40A;
  transform: rotate(45deg);
  transition: transform 0.3s ease;
}

body.registrazione-page .section-toggle:not(.collapsed)::after {
  transform: rotate(-135deg);
}
}

/* =========================
 TABLET (768px–991px)
========================= */
@media (max-width: 991.98px) {

body.registrazione-page .registrazione-box {
  padding: 30px 25px;
}

body.registrazione-page #hero {
  padding: 30px 0 30px 0 !important;
}

body.registrazione-page .section-title h2 {
  font-size: 26px !important;
  letter-spacing: 1px !important;
}

/* Riduciamo padding inferiore hero */
body.registrazione-page #hero {
  padding-bottom: 15px !important;
}

/* Riduciamo spazio sotto il blocco titolo */
body.registrazione-page .section-title {
  padding-bottom: 5px !important;
}

/* Riduciamo spazio sopra il box */
body.registrazione-page .registrazione-box {
  margin-top: 10px;
}

body.registrazione-page #registrazioneForm {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important; /* padding già gestito dal box */
  border: none !important;
  box-shadow: none !important;
  background-color: transparent !important;
}
}


/* =========================
 MOBILE (<= 767px)
========================= */
@media (max-width: 767.98px) {

/* Ripristiniamo un minimo di gutter laterale
   perché il container è stato azzerato globalmente */
body.registrazione-page .container {
  padding-left: 15px !important;
  padding-right: 15px !important;
}

body.registrazione-page .registrazione-box {
  padding: 25px 20px;
  border-radius: 12px;
}

body.registrazione-page .section-title h2 {
  font-size: 22px !important;
}

body.registrazione-page .section-title p {
  font-size: 0.95rem;
}

/* Titoli sezioni */
body.registrazione-page #registrazioneForm h4 {
  font-size: 1rem;
  letter-spacing: 0.5px;
  margin-bottom: 18px;
}

/* Checkbox allineate a sinistra per UX migliore */
body.registrazione-page .privacy-wrapper {
  justify-content: flex-start !important;
  align-items: flex-start !important;
}

body.registrazione-page .custom-privacy-label {
  font-size: 0.9rem !important;
  line-height: 1.4;
}

/* Bottone full width */
body.registrazione-page .btn-registra {
  width: 100%;
  padding: 12px 20px;
}

body.registrazione-page #registrazioneForm h4 {
  position: sticky;
  top: 0;
  background: #002b00;
  padding-top: 10px;
  z-index: 5;
}

body.registrazione-page .collapse-mobile {
  display: none;
}


/* ==========================================
 OTTIMIZZAZIONE SPAZIO LATERALE MOBILE
========================================== */
/* Riduciamo padding box */
body.registrazione-page .registrazione-box {
  padding-left: 15px;
  padding-right: 15px;
}

/* Riduciamo gutter colonne interne */
body.registrazione-page .registrazione-box .row {
  --bs-gutter-x: 10px;
}
}


/* =========================
 MOBILE SMALL (<= 480px)
========================= */
@media (max-width: 480px) {

body.registrazione-page .registrazione-box {
  padding: 20px 15px;
}

body.registrazione-page .section-title h2 {
  font-size: 20px !important;
}

body.registrazione-page .section-title p {
  font-size: 0.9rem;
}

/* Labels più compatte */
body.registrazione-page .form-label {
  font-size: 0.75rem;
}

/* Input leggermente più compatti */
body.registrazione-page .form-control,
body.registrazione-page .form-select {
  padding: 10px 12px;
  font-size: 0.9rem;
}

/* Riduciamo leggermente altezza barra password */
body.registrazione-page #password-strength-bar {
  height: 3px;
}

}

/* =====================================================
 LOGIN PAGE – MOBILE RESPONSIVE OVERRIDE
 File: mobile-override.css
 Scoped: body.login-page
 ===================================================== */


/* =====================================================
 TABLET (768px – 991px)
 ===================================================== */
@media (max-width: 991.98px) {

body.login-page main.main {
  /* Evita centratura forzata quando lo spazio è ridotto */
  align-items: flex-start;
  padding-top: 40px;
}

body.login-page .login-card {
  max-width: 460px;
  padding: 32px;
}

body.login-page .login-title-section {
  padding-top: 30px;
}

body.login-page .login-title-section .section-title h2 {
  font-size: 28px;
  letter-spacing: 1.5px;
}
}


/* =====================================================
 MOBILE (481px – 767px)
 ===================================================== */
@media (max-width: 767.98px) {

body.login-page main.main {
  align-items: flex-start;
  padding-top: 30px;
  padding-bottom: 30px;
}

/* Riduciamo padding container Bootstrap */
body.login-page main.main .container {
  padding-left: 20px;
  padding-right: 20px;
}

body.login-page .login-card {
  padding: 28px;
  border-radius: 14px;
}

body.login-page .login-title-section {
  padding-top: 20px;
}

body.login-page .login-title-section .section-title h2 {
  font-size: 24px;
  letter-spacing: 1px;
}

body.login-page .login-title-section .section-title p {
  font-size: 1rem;
  margin-top: 12px;
}

body.login-page .btn-gold-login {
  padding: 14px;
  font-size: 0.95rem;
}

body.login-page .login-footer-links {
  font-size: 0.85rem;
}
}


/* =====================================================
 MOBILE SMALL (<= 480px)
 ===================================================== */
@media (max-width: 480px) {

body.login-page main.main {
  align-items: flex-start;
  padding-top: 20px;
  padding-bottom: 25px;
}

body.login-page main.main .container {
  padding-left: 16px;
  padding-right: 16px;
}

body.login-page .login-card {
  padding: 22px;
  border-radius: 12px;
}

body.login-page .login-title-section {
  padding-top: 10px;
}

body.login-page .login-title-section .section-title h2 {
  font-size: 20px;
  letter-spacing: 0.5px;
  padding-bottom: 15px;
}

body.login-page .login-title-section .section-title h2:after {
  width: 40px;
  height: 2px;
}

body.login-page .login-title-section .section-title p {
  font-size: 0.95rem;
}

body.login-page .form-control {
  padding: 10px 12px;
  font-size: 0.95rem;
}

body.login-page .btn-gold-login {
  margin-top: 15px;
}

body.login-page .login-footer-links {
  margin-top: 20px;
}

body.login-page .alert {
  font-size: 0.85rem;
}
}

/* =====================================================
 APPUNTAMENTI – FIX SPAZI LATERALI + FONT SCALE
 Scoped
 ===================================================== */

body.appuntamenti-page section#hero {
  padding: 20px 0 40px 0 !important;
}


/* ================================
 TABLET <= 991px
 ================================ */
@media (max-width: 991.98px) {

body.appuntamenti-page #hero {
  padding: 25px 0 50px 0;
}

body.appuntamenti-page .search-box-container {
  padding: 22px;
}

body.appuntamenti-page .chiesa-title {
  font-size: 1.6rem;
}

body.appuntamenti-page .calendar-heading {
  font-size: 1.3rem;
}

  body.appuntamenti-page #appuntamentiForm {
    width: 85%;
}

}


/* ================================
 MOBILE <= 767px
 ================================ */
@media (max-width: 767.98px) {

/* 🔥 Riduce padding container bootstrap SOLO in questa pagina */
body.appuntamenti-page #hero > .container {
  padding-left: 10px;
  padding-right: 10px;
}

/* Riduce padding box */
body.appuntamenti-page .search-box-container {
  padding: 18px;
}

/* Riduce font gerarchia */
body.appuntamenti-page .appuntamenti-header h2 {
  font-size: 24px;
  letter-spacing: 1px;
}

body.appuntamenti-page .chiesa-title {
  font-size: 1.4rem;
}

body.appuntamenti-page .calendar-heading {
  font-size: 1.15rem;
}

/* Tabella meno ariosa */
body.appuntamenti-page .custom-table th,
body.appuntamenti-page .custom-table td {
  padding: 14px 10px;
  font-size: 0.92rem;
}

/* Riduce gutter verticale form */
body.appuntamenti-page #appuntamentiForm .row.g-4 {
  --bs-gutter-y: 0.8rem;
}

 body.appuntamenti-page section#hero {
    padding: 10px 0 30px 0 !important;
}

body.appuntamenti-page #appuntamentiForm {
    width: 100%;
    margin: 0;
}
}

/* =====================================================
 AFFINAMENTO COLONNA AZIONI – ADATTAMENTO PROGRESSIVO
 ===================================================== */


/* ---------- FASE 1: tablet piccoli (<=576px) ---------- */
@media (max-width: 576px) {

/* Riduce padding celle */
body.appuntamenti-page .custom-table td:last-child,
body.appuntamenti-page .custom-table th:last-child {
    padding-left: 6px;
    padding-right: 6px;
}

/* Riduce dimensione bottoni */
body.appuntamenti-page .btn-icon {
    width: 32px;
    height: 32px;
    font-size: 0.85rem;
}

/* Mantiene layout orizzontale forzato */
body.appuntamenti-page .centered-content {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
}


/* ================================
 MOBILE SMALL <= 480px
 ================================ */
@media (max-width: 480px) {

/* 🔥 Elimina quasi del tutto spazio laterale */
body.appuntamenti-page #hero > .container {
  padding-left: 6px;
  padding-right: 6px;
}

body.appuntamenti-page .search-box-container {
  padding: 14px;
  border-radius: 12px;
}

/* Header compatto */
body.appuntamenti-page .appuntamenti-header {
  padding-top: 20px;
  padding-bottom: 5px;
}

body.appuntamenti-page .appuntamenti-header h2 {
  font-size: 20px;
}

body.appuntamenti-page .chiesa-title {
  font-size: 1.2rem;
}

body.appuntamenti-page .calendar-heading {
  font-size: 1rem;
}

/* Tabella più compatta */
body.appuntamenti-page .custom-table th,
body.appuntamenti-page .custom-table td {
  padding: 10px 6px;
  font-size: 0.82rem;
}

/* Icone azione più piccole */
body.appuntamenti-page .btn-icon {
  width: 30px;
  height: 30px;
}

body.appuntamenti-page section#hero {
    padding: 5px 0 20px 0 !important;
}
  
body.appuntamenti-page #appuntamentiForm {
    width: 100%;
    margin: 0;
    padding: 14px;
}

  /* Ora diventano verticali in modo controllato */
body.appuntamenti-page .centered-content {
    flex-direction: column;
    gap: 5px;
}

/* Ulteriore riduzione icone */
body.appuntamenti-page .btn-icon {
    width: 28px;
    height: 28px;
    font-size: 0.75rem;
}

}

/* =====================================================
 FIX VISIVO COLONNA AZIONI (480px – 580px)
 ===================================================== */

@media (min-width: 480px) and (max-width: 580px) {

/* Aggiunge aria laterale controllata */
body.appuntamenti-page .custom-table td:last-child,
body.appuntamenti-page .custom-table th:last-child {
    padding-left: 10px;
    padding-right: 10px;
}

/* Evita effetto "colonna incorniciata" */
body.appuntamenti-page .custom-table td:last-child {
    background-clip: padding-box;
}

/* Riduce leggermente contrasto icone */
body.appuntamenti-page .btn-icon {
    border-color: rgba(224,205,0,0.7);
}

}

/* =====================================================
 EVENTI PAGE – VERSIONE SEMPLIFICATA
 ===================================================== */

/* =====================================================
 BASE (Desktop default ≥992px)
 ===================================================== */

body.eventi-page #hero .container {
max-width: 100%;
}

body.eventi-page .table-container {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}

body.eventi-page .custom-table {
width: 100%;
}

body.eventi-page .custom-table td:last-child {
white-space: nowrap;
}

/* =====================================================
 TABLET (≤991px)
 ===================================================== */

@media (max-width: 991.98px) {

body.eventi-page #eventiChiesaForm {
  width: 100%;
  margin: 0;
}

body.eventi-page .search-box-container {
  padding: 20px 15px;
}

body.eventi-page .custom-table th,
body.eventi-page .custom-table td {
  padding: 10px 8px;
}

body.eventi-page .btn-icon {
  width: 36px;
  height: 36px;
}

/* Tipologia leggermente compressa */
body.eventi-page .custom-table th:nth-child(3),
body.eventi-page .custom-table td:nth-child(3) {
  max-width: 110px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
}

/* =====================================================
 MOBILE (≤767px)
 ===================================================== */

@media (max-width: 767.98px) {

body.eventi-page .container {
  padding-left: 10px;
  padding-right: 10px;
}

body.eventi-page .search-box-container {
  padding: 15px 10px;
}

body.eventi-page #nuovoEventoBtn {
  width: 100%;
}

/* Nasconde tipologia */
body.eventi-page .custom-table th:nth-child(3),
body.eventi-page .custom-table td:nth-child(3) {
  display: none;
}

/* Riduzione generale */
body.eventi-page .custom-table th,
body.eventi-page .custom-table td {
  padding: 8px 6px;
  font-size: 0.8rem;
}

body.eventi-page .image-container {
  width: 50px;
  height: 35px;
}

body.eventi-page .btn-icon {
  width: 30px;
  height: 30px;
  font-size: 0.8rem;
}

/* Accordion mobile */
body.eventi-page .accordion-content {
  display: none;
}

body.eventi-page .accordion-trigger.expanded + .accordion-content {
  display: table-row;
}

/* Rimuove eventuale linea finale */
body.eventi-page .custom-table tbody tr:last-child td {
  border-bottom: none;
}

body.eventi-page .custom-table {
  border-collapse: collapse;
}
}

/* =====================================================
 SMALL MOBILE (≤480px)
 ===================================================== */

@media (max-width: 480px) {

body.eventi-page .eventi-header-section h2 {
  font-size: 24px;
}

body.eventi-page .chiesa-title {
  font-size: 1.3rem;
}

body.eventi-page .custom-table th,
body.eventi-page .custom-table td {
  padding: 6px 4px;
  font-size: 0.75rem;
}

body.eventi-page .image-container {
  width: 40px;
  height: 30px;
}

body.eventi-page .btn-icon {
  width: 26px;
  height: 26px;
  font-size: 0.7rem;
}
}

/* =====================================================
 EVENTI – Transizione fluida 767 → 992
 ===================================================== */

@media (min-width: 768px) and (max-width: 991.98px) {

body.eventi-page #eventiChiesaForm {
  width: clamp(75%, 85vw, 90%);
  margin: 0 auto;
}

}

/* ======================================================
 EVENTI PROVINCIALI – LAYOUT FIX
 Nessuna colonna nascosta
 Nessun impatto su eventi_chiesa
====================================================== */


/* Allinea comportamento a eventi_page */
body.eventi-page.eventi-provinciali #hero .container {
max-width: 100%;
}


/* Wrapper scroll coerente */
body.eventi-page.eventi-provinciali .table-responsive {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}


/* Ridistribuzione colonne */
body.eventi-page.eventi-provinciali 
#tabellaEventiProvinciali {
width: 100%;
table-layout: auto;   /* fondamentale */
}


/* Provincia compatta ma visibile */
body.eventi-page.eventi-provinciali 
#tabellaEventiProvinciali th:nth-child(5),
body.eventi-page.eventi-provinciali 
#tabellaEventiProvinciali td:nth-child(5) {
white-space: nowrap;
max-width: 140px;
overflow: hidden;
text-overflow: ellipsis;
}


/* ======================================================
 TABLET (≤991px)
====================================================== */

@media (max-width: 991.98px) {

body.eventi-page.eventi-provinciali .search-box-container {
  padding: 20px 15px;
}

body.eventi-page.eventi-provinciali 
#tabellaEventiProvinciali th,
body.eventi-page.eventi-provinciali 
#tabellaEventiProvinciali td {
  padding: 10px 8px;
}
}


/* ======================================================
 MOBILE (≤767.98px)
====================================================== */

@media (max-width: 767.98px) {

/* Riduce spazio laterale reale */
body.eventi-page.eventi-provinciali .container {
  padding-left: 10px;
  padding-right: 10px;
}

body.eventi-page.eventi-provinciali .search-box-container {
  padding: 15px 10px;
}

/* Compattazione coerente con eventi_page */
body.eventi-page.eventi-provinciali 
#tabellaEventiProvinciali th,
body.eventi-page.eventi-provinciali 
#tabellaEventiProvinciali td {
  padding: 8px 6px;
  font-size: 0.8rem;
}

/* Ellipsis solo su Evento e Chiesa */
body.eventi-page.eventi-provinciali 
#tabellaEventiProvinciali td:nth-child(3),
body.eventi-page.eventi-provinciali 
#tabellaEventiProvinciali td:nth-child(6) {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Accordion allineato */
body.eventi-page.eventi-provinciali .inner-description {
  margin: 0 8px 8px 8px;
  padding: 12px;
}

body.eventi-page.eventi-provinciali 
#tabellaEventiProvinciali {
  border-collapse: collapse;
}

body.eventi-page.eventi-provinciali 
#tabellaEventiProvinciali tbody tr:last-child td {
  border-bottom: none;
}
}


/* ======================================================
 SMALL MOBILE (≤480px)
====================================================== */

@media (max-width: 480px) {

body.eventi-page.eventi-provinciali .eventi-header-section h2 {
  font-size: 24px;
}

body.eventi-page.eventi-provinciali 
#tabellaEventiProvinciali th,
body.eventi-page.eventi-provinciali 
#tabellaEventiProvinciali td {
  padding: 6px 4px;
  font-size: 0.75rem;
}

body.eventi-page.eventi-provinciali .image-container {
  width: 40px;
  height: 30px;
}
}

/* ======================================================
 EVENTI PROVINCIALI – NASCONDE SOLO TIPOLOGIA (SEMPRE)
 Colonna 4
====================================================== */

body.eventi-page.eventi-provinciali 
#tabellaEventiProvinciali th:nth-child(4),
body.eventi-page.eventi-provinciali 
#tabellaEventiProvinciali td:nth-child(4) {
display: none;
}

/* ======================================================
 EVENTI PROVINCIALI – FIX WIDTH FORM MOBILE
 Riduce spazio laterale causato da width:70%
====================================================== */

/* ======================================================
 EVENTI PROVINCIALI – WIDTH FORM RESPONSIVE
 Nessun impatto su altri form
====================================================== */

/* Tablet */
@media (max-width: 991.98px) and (min-width: 768px) {

body.eventi-page.eventi-provinciali #eventiProvincialiForm {
  width: 90%;
  margin: 0 auto;
}

}

/* Mobile */
@media (max-width: 767.98px) {

body.eventi-page.eventi-provinciali #eventiProvincialiForm {
  width: 100%;
  margin: 0;
  padding: 15px 12px;
}

}

/* Assicura che Evento NON venga mai nascosta */
@media (max-width: 767.98px) {
body.eventi-page.eventi-provinciali 
#tabellaEventiProvinciali th:nth-child(3),
body.eventi-page.eventi-provinciali 
#tabellaEventiProvinciali td:nth-child(3) {
  display: table-cell;
}
}

@media (max-width: 767.98px) {

/* Chiesa compatta */
body.eventi-page.eventi-provinciali 
#tabellaEventiProvinciali th:nth-child(6),
body.eventi-page.eventi-provinciali 
#tabellaEventiProvinciali td:nth-child(6) {
  max-width: 90px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

}

@media (max-width: 480px) {

body.eventi-page.eventi-provinciali 
#tabellaEventiProvinciali th:nth-child(5),
body.eventi-page.eventi-provinciali 
#tabellaEventiProvinciali td:nth-child(5) {
  display: none;
}

}

@media (max-width: 767.98px) {

body.eventi-page.eventi-provinciali #eventiProvincialiForm {
  width: 90%;
  margin: 0 auto;
  padding: 15px 12px;
}

}

/* ======================================================
 EVENTI REGIONALI – RESPONSIVE OVERRIDE
 Nessun impatto su eventi_chiesa o eventi_provinciali
====================================================== */


/* Allinea comportamento container come provinciali */
body.eventi-page.eventi-regionali #hero .container {
max-width: 100%;
}


/* Wrapper scroll coerente */
body.eventi-page.eventi-regionali .table-responsive {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}


/* Tabella più fluida su mobile */
body.eventi-page.eventi-regionali 
#tabellaEventiRegionali {
width: 100%;
table-layout: auto;
}



/* ======================================================
 TABLET (768px – 991.98px)
====================================================== */

@media (max-width: 991.98px) and (min-width: 768px) {

/* Form width 80% */
body.eventi-page.eventi-regionali #eventiRegionaliForm {
  width: 80%;
  margin: 0 auto;
}

body.eventi-page.eventi-regionali .search-box-container {
  padding: 22px 18px;
}

body.eventi-page.eventi-regionali 
#tabellaEventiRegionali th,
body.eventi-page.eventi-regionali 
#tabellaEventiRegionali td {
  padding: 10px 8px;
}

body.eventi-page.eventi-regionali #risultatiHeader h3 {
  font-size: 1.4rem;
}
}



/* ======================================================
 MOBILE (≤767.98px)
====================================================== */

@media (max-width: 767.98px) {

/* Riduce padding container reale */
body.eventi-page.eventi-regionali .container {
  padding-left: 10px;
  padding-right: 10px;
}

/* Form width 90% */
body.eventi-page.eventi-regionali #eventiRegionaliForm {
  width: 90%;
  margin: 0 auto;
}

body.eventi-page.eventi-regionali .search-box-container {
  padding: 15px 12px;
}

/* Compattazione tabella */
body.eventi-page.eventi-regionali 
#tabellaEventiRegionali th,
body.eventi-page.eventi-regionali 
#tabellaEventiRegionali td {
  padding: 8px 6px;
  font-size: 0.82rem;
}

/* Chiesa compressa ma visibile */
body.eventi-page.eventi-regionali 
#tabellaEventiRegionali th:nth-child(6),
body.eventi-page.eventi-regionali 
#tabellaEventiRegionali td:nth-child(6) {
  max-width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Evento sempre visibile */
body.eventi-page.eventi-regionali 
#tabellaEventiRegionali th:nth-child(3),
body.eventi-page.eventi-regionali 
#tabellaEventiRegionali td:nth-child(3) {
  display: table-cell;
}

/* Header dinamico proporzionato */
body.eventi-page.eventi-regionali #risultatiHeader h3 {
  font-size: 1.15rem;
}

body.eventi-page.eventi-regionali .risultati-count {
  display: block;
  margin-left: 0;
  margin-top: 4px;
  font-size: 0.8rem;
}

/* Accordion spacing coerente */
body.eventi-page.eventi-regionali .inner-description {
  margin: 0 8px 8px 8px;
  padding: 12px;
}

body.eventi-page.eventi-regionali 
#tabellaEventiRegionali {
  border-collapse: collapse;
}

body.eventi-page.eventi-regionali 
#tabellaEventiRegionali tbody tr:last-child td {
  border-bottom: none;
}

}



/* ======================================================
 SMALL MOBILE (≤480px)
====================================================== */

@media (max-width: 480px) {

body.eventi-page.eventi-regionali .eventi-header-section h2 {
  font-size: 24px;
}

body.eventi-page.eventi-regionali 
#tabellaEventiRegionali th,
body.eventi-page.eventi-regionali 
#tabellaEventiRegionali td {
  padding: 6px 4px;
  font-size: 0.75rem;
}

/* Ulteriore compressione Chiesa */
body.eventi-page.eventi-regionali 
#tabellaEventiRegionali th:nth-child(6),
body.eventi-page.eventi-regionali 
#tabellaEventiRegionali td:nth-child(6) {
  max-width: 80px;
}
}

body.eventi-page.eventi-regionali 
#eventiRegionaliForm select.form-select option {
background-color: #001900;
color: #ffffff;
}

.eventi-page .eventi-header-section .container{
  padding-left: 12px !important;
  padding-right: 12px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

body.eventi-provinciali section#hero > .container,
body.eventi-regionali section#hero > .container ,
body.eventi-nazionali section#hero > .container{
padding-top: 0 !important;
}

/* ======================================================
 EVENTI NAZIONALI – RESPONSIVE OVERRIDE (CLEAN)
 Scope sicuro: solo body.eventi-page.eventi-nazionali
====================================================== */

/* Wrapper scroll coerente */
body.eventi-page.eventi-nazionali .table-responsive {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}

/* ======================================================
 DESKTOP STRETTO (992px – 1220px)
 Fix: data su 1 riga + meno margini esterni
====================================================== */
@media (min-width: 992px) and (max-width: 1220px) {

body.eventi-page.eventi-nazionali #hero > .container {
  padding-left: 12px;
  padding-right: 12px;
  max-width: 100%;
}

body.eventi-page.eventi-nazionali #hero .row {
  --bs-gutter-x: 1rem;
}

body.eventi-page.eventi-nazionali #eventiNazionaliForm {
  width: 85%;
  margin: 0 auto;
}

/* Colonna TOGGLE stabile */
body.eventi-page.eventi-nazionali #tabellaEventiNazionali th:nth-child(1),
body.eventi-page.eventi-nazionali #tabellaEventiNazionali td:nth-child(1) {
  width: 44px !important;
  min-width: 44px;
  max-width: 44px;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
}

/* Colonna DATA: fissa e no-wrap */
body.eventi-page.eventi-nazionali #tabellaEventiNazionali th:nth-child(2),
body.eventi-page.eventi-nazionali #tabellaEventiNazionali td:nth-child(2) {
  width: 140px !important;
  min-width: 140px;
  max-width: 140px;
  white-space: nowrap;
  overflow: hidden;

  /* annulla word-wrap globale dei td */
  overflow-wrap: normal;
  word-break: normal;

  padding-right: 8px;
}

/* Stacco minimo titolo */
body.eventi-page.eventi-nazionali #tabellaEventiNazionali th:nth-child(3),
body.eventi-page.eventi-nazionali #tabellaEventiNazionali td:nth-child(3) {
  padding-left: 12px;
}
}


/* ======================================================
 TABLET (768px – 991.98px)
 Form 80% + padding ottimizzati + data no-wrap
====================================================== */
@media (min-width: 768px) and (max-width: 991.98px) {

body.eventi-page.eventi-nazionali #hero {
  padding: 32px 0 70px 0;
}

body.eventi-page.eventi-nazionali #hero > .container {
  padding-left: 12px;
  padding-right: 12px;
  max-width: 100%;
}

body.eventi-page.eventi-nazionali #hero .row {
  --bs-gutter-x: 1rem;
}

body.eventi-page.eventi-nazionali #eventiNazionaliForm {
  width: 80%;
  margin: 0 auto;
}

body.eventi-page.eventi-nazionali #eventiNazionaliForm.search-box-container {
  padding: 22px 18px;
}

body.eventi-page.eventi-nazionali #risultatiHeader h3 {
  font-size: 1.4rem;
}

body.eventi-page.eventi-nazionali #tabellaEventiNazionali th,
body.eventi-page.eventi-nazionali #tabellaEventiNazionali td {
  padding: 10px 8px;
  font-size: 0.9rem;
  white-space: nowrap;
}

/* Data su 1 riga anche in tablet */
body.eventi-page.eventi-nazionali #tabellaEventiNazionali th:nth-child(2),
body.eventi-page.eventi-nazionali #tabellaEventiNazionali td:nth-child(2) {
  width: 128px !important;
  min-width: 128px;
  max-width: 128px;
  overflow: hidden;
  overflow-wrap: normal;
  word-break: normal;
}
}


/* ======================================================
 MOBILE GENERALE (≤767.98px)
 Header in colonna + padding ridotti + tabella compatta
====================================================== */
@media (max-width: 767.98px) {

body.eventi-page.eventi-nazionali #hero {
  padding: 28px 0 60px 0;
}

body.eventi-page.eventi-nazionali #hero > .container {
  padding-left: 10px;
  padding-right: 10px;
  max-width: 100%;
}

body.eventi-page.eventi-nazionali #hero .row {
  --bs-gutter-x: 0.75rem;
}

body.eventi-page.eventi-nazionali #eventiNazionaliForm {
  width: 90%;
  margin: 0 auto;
}

body.eventi-page.eventi-nazionali #eventiNazionaliForm.search-box-container {
  padding: 15px 12px;
}

body.eventi-page.eventi-nazionali
#eventiNazionaliForm .card.container-eventi > .card-body.card-body-no-border {
  padding: 0;
}

body.eventi-page.eventi-nazionali .gold-divider {
  margin: 24px 0;
}

body.eventi-page.eventi-nazionali #risultatiHeader {
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

body.eventi-page.eventi-nazionali #risultatiHeader h3 {
  font-size: 1.15rem;
}

body.eventi-page.eventi-nazionali .risultati-count {
  display: block;
  margin-left: 0;
  margin-top: 4px;
  font-size: 0.8rem;
}

body.eventi-page.eventi-nazionali #perPageSelectWrapper {
  width: 100%;
  justify-content: space-between;
}

body.eventi-page.eventi-nazionali #tabellaEventiNazionali th,
body.eventi-page.eventi-nazionali #tabellaEventiNazionali td {
  padding: 8px 6px;
  font-size: 0.82rem;
  white-space: nowrap;
}

/* Ellipsis chiesa (senza nascondere) */
body.eventi-page.eventi-nazionali #tabellaEventiNazionali th:nth-child(4),
body.eventi-page.eventi-nazionali #tabellaEventiNazionali td:nth-child(4) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.eventi-page.eventi-nazionali .inner-description {
  margin: 0 8px 8px 8px;
  padding: 12px;
}

body.eventi-page.eventi-nazionali #paginationControls {
  flex-wrap: wrap;
}
}


/* ======================================================
 RANGE CRITICO (481px – 771px)
 - Toggle fisso (no overlap)
 - Data fissa
 - Titolo fisso
 - Chiesa proporzionale (clamp)
====================================================== */
@media (max-width: 771px) and (min-width: 481px) {

body.eventi-page.eventi-nazionali #eventiNazionaliForm {
  width: 100%;
  margin: 0 auto;
}

body.eventi-page.eventi-nazionali #eventiNazionaliForm.search-box-container {
  padding: 14px 12px;
}

/* Toggle (freccia) fisso */
body.eventi-page.eventi-nazionali #tabellaEventiNazionali th:nth-child(1),
body.eventi-page.eventi-nazionali #tabellaEventiNazionali td:nth-child(1) {
  width: 44px !important;
  min-width: 44px;
  max-width: 44px;
  padding-left: 4px;
  padding-right: 4px;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
}

body.eventi-page.eventi-nazionali #tabellaEventiNazionali td:nth-child(1) .expand-icon {
  font-size: 1.15rem;
  line-height: 1;
  display: inline-block;
}

/* Data fissa */
body.eventi-page.eventi-nazionali #tabellaEventiNazionali th:nth-child(2),
body.eventi-page.eventi-nazionali #tabellaEventiNazionali td:nth-child(2) {
  width: 112px !important;
  min-width: 112px;
  max-width: 112px;
  white-space: nowrap;
  overflow: hidden;
  overflow-wrap: normal;
  word-break: normal;
  padding-right: 8px;
}

/* Titolo fisso + stacco */
body.eventi-page.eventi-nazionali #tabellaEventiNazionali th:nth-child(3),
body.eventi-page.eventi-nazionali #tabellaEventiNazionali td:nth-child(3) {
  width: 200px !important;
  min-width: 200px;
  max-width: 200px;
  padding-left: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Chiesa proporzionale */
body.eventi-page.eventi-nazionali #tabellaEventiNazionali th:nth-child(4),
body.eventi-page.eventi-nazionali #tabellaEventiNazionali td:nth-child(4) {
  width: clamp(80px, 18vw, 140px) !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Comune controllato */
body.eventi-page.eventi-nazionali #tabellaEventiNazionali th:nth-child(5),
body.eventi-page.eventi-nazionali #tabellaEventiNazionali td:nth-child(5) {
  width: 130px !important;
}
}


/* ======================================================
 SMALL MOBILE (≤480px)
 - Data min ridotta
 - Toggle fisso più compatto
 - Chiesa visibile ma molto compressa
====================================================== */
@media (max-width: 480px) {

body.eventi-page.eventi-nazionali .eventi-header-section h2 {
  font-size: 24px;
}

body.eventi-page.eventi-nazionali #hero > .container {
  padding-left: 8px;
  padding-right: 8px;
  max-width: 100%;
}

body.eventi-page.eventi-nazionali #eventiNazionaliForm {
  width: 96%;
  margin: 0 auto;
}

body.eventi-page.eventi-nazionali #eventiNazionaliForm.search-box-container {
  padding: 12px 10px;
}

body.eventi-page.eventi-nazionali #tabellaEventiNazionali th,
body.eventi-page.eventi-nazionali #tabellaEventiNazionali td {
  padding: 6px 4px;
  font-size: 0.75rem;
}

/* Assicura che "Chiesa Organizzatrice" non venga nascosta da vecchie regole */
body.eventi-page.eventi-nazionali #tabellaEventiNazionali th:nth-child(4),
body.eventi-page.eventi-nazionali #tabellaEventiNazionali td:nth-child(4) {
  display: table-cell;
}

/* Toggle */
body.eventi-page.eventi-nazionali #tabellaEventiNazionali th:nth-child(1),
body.eventi-page.eventi-nazionali #tabellaEventiNazionali td:nth-child(1) {
  width: 40px !important;
  min-width: 40px;
  max-width: 40px;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
}

body.eventi-page.eventi-nazionali #tabellaEventiNazionali td:nth-child(1) .expand-icon {
  font-size: 1.1rem;
  line-height: 1;
}

/* DATA: min ridotta sotto 480 */
body.eventi-page.eventi-nazionali #tabellaEventiNazionali th:nth-child(2),
body.eventi-page.eventi-nazionali #tabellaEventiNazionali td:nth-child(2) {
  width: 88px !important;
  min-width: 88px;
  max-width: 88px;
  white-space: nowrap;
  overflow: hidden;
  overflow-wrap: normal;
  word-break: normal;
}

/* Titolo: mantiene priorità visiva (non richiesto fisso sotto 480, ma resta controllato) */
body.eventi-page.eventi-nazionali #tabellaEventiNazionali th:nth-child(3),
body.eventi-page.eventi-nazionali #tabellaEventiNazionali td:nth-child(3) {
  width: clamp(150px, 44vw, 180px) !important;
  min-width: 150px;
  padding-left: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Chiesa: molto compressa */
body.eventi-page.eventi-nazionali #tabellaEventiNazionali th:nth-child(4),
body.eventi-page.eventi-nazionali #tabellaEventiNazionali td:nth-child(4) {
  width: clamp(60px, 18vw, 95px) !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Comune: compatto */
body.eventi-page.eventi-nazionali #tabellaEventiNazionali th:nth-child(5),
body.eventi-page.eventi-nazionali #tabellaEventiNazionali td:nth-child(5) {
  width: 115px !important;
}
}

/* ======================================================
 EVENTI NAZIONALI – ACCORDION CARD READABILITY (≤771px)
 Mantiene layout ordinato stile “wide”: immagine a sx + testo a dx
====================================================== */

@media (max-width: 771px) {

/* Card interna: più spazio utile, meno “cornice” */
body.eventi-page.eventi-nazionali .inner-description {
  margin: 0 8px 10px 8px;
  padding: 12px;
}

body.eventi-page.eventi-nazionali .accordion-internal-header {
  font-size: 0.95rem;
  letter-spacing: 1px;
  line-height: 1.2;
  flex-wrap: wrap;       /* evita compressioni strane */
  gap: 6px;
}

body.eventi-page.eventi-nazionali .accordion-divider {
  margin: 10px 0;
}

/* Override del comportamento “a colonna”: layout più ordinato */
body.eventi-page.eventi-nazionali .accordion-body-flex {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr);
  column-gap: 12px;
  row-gap: 10px;
  align-items: start;
}

body.eventi-page.eventi-nazionali .image-container {
  width: 60px;
  height: 42px;
  flex: 0 0 auto;        /* non “stira” */
  align-self: start;
}

body.eventi-page.eventi-nazionali .accordion-text-wrapper {
  min-width: 0;          /* fondamentale in grid per evitare overflow */
  font-size: 0.85rem;
  line-height: 1.35;
  white-space: pre-line; /* conserva formattazione testo esistente */
  overflow-wrap: anywhere;
  word-break: break-word;
}
}


/* ======================================================
 EVENTI NAZIONALI – ACCORDION ULTRA COMPACT (≤480px)
====================================================== */
@media (max-width: 480px) {

body.eventi-page.eventi-nazionali .inner-description {
  margin: 0 6px 8px 6px;
  padding: 10px;
}

body.eventi-page.eventi-nazionali .accordion-body-flex {
  grid-template-columns: 52px minmax(0, 1fr);
  column-gap: 10px;
  row-gap: 8px;
}

body.eventi-page.eventi-nazionali .image-container {
  width: 52px;
  height: 36px;
}

body.eventi-page.eventi-nazionali .accordion-internal-header {
  font-size: 0.9rem;
  letter-spacing: 0.8px;
}

body.eventi-page.eventi-nazionali .accordion-text-wrapper {
  font-size: 0.82rem;
  line-height: 1.3;
}
}

/* ======================================================
 EVENTI NAZIONALI – Accordion: titolo sempre a sinistra (992–1200)
====================================================== */
@media (min-width: 992px) and (max-width: 1200px) {

body.eventi-page.eventi-nazionali .description-container,
body.eventi-page.eventi-nazionali .inner-description {
  text-align: left;
}

body.eventi-page.eventi-nazionali .accordion-internal-header {
  justify-content: flex-start; /* header è display:flex nel tuo CSS */
  text-align: left;
}

/* Copre eventuali elementi testuali dentro l’header (span/strong/small ecc.) */
body.eventi-page.eventi-nazionali .accordion-internal-header > * {
  text-align: left;
}
}

/* ======================================================
 EVENTI NAZIONALI – Toggle: applica solo alle righe trigger
 Evita di centrare l'intero contenuto dell'accordion (colspan)
====================================================== */

/* Header colonna toggle */
body.eventi-page.eventi-nazionali
#tabellaEventiNazionali thead th:nth-child(1) {
width: 44px !important;
min-width: 44px;
max-width: 44px;
text-align: center;
}

/* SOLO righe cliccabili (accordion-trigger) */
body.eventi-page.eventi-nazionali
#tabellaEventiNazionali tbody tr.accordion-trigger td:nth-child(1) {
width: 44px !important;
min-width: 44px;
max-width: 44px;
padding-left: 4px;
padding-right: 4px;
text-align: center;
overflow: hidden;
white-space: nowrap;
}

/* L'accordion content deve rimanere "normale" */
body.eventi-page.eventi-nazionali
#tabellaEventiNazionali tbody tr.accordion-content td {
text-align: left;
overflow: visible;
white-space: normal;
}

/* ======================================================
 EVENTI NAZIONALI – Accordion: testo dettagli sempre leggibile (wrap)
 - Neutralizza nowrap della tabella solo dentro accordion-content
 - 481–771: immagine a fianco + testo che va a capo
 - ≤480: testo sotto immagine
====================================================== */

/* 1) Il td dell'accordion NON deve ereditare il nowrap della tabella */
@media (max-width: 771px) {
body.eventi-page.eventi-nazionali
#tabellaEventiNazionali tbody tr.accordion-content td {
  white-space: normal;     /* override di .custom-table td { white-space: nowrap; } */
  overflow: visible;       /* il contenuto interno deve poter fluire */
  text-overflow: unset;
}

/* Wrapping robusto per tutto il contenuto testuale dell'accordion */
body.eventi-page.eventi-nazionali
#tabellaEventiNazionali tbody tr.accordion-content .accordion-text-wrapper {
  min-width: 0;            /* fondamentale con grid/flex per evitare clipping */
  width: 100%;
  white-space: pre-wrap;   /* preserva a-capo e permette wrap */
  overflow-wrap: anywhere; /* spezza anche parole lunghe/URL */
  word-break: break-word;
}
}

/* 2) 481–771: layout ordinato tipo “wide” (immagine a sinistra, testo a destra) */
@media (max-width: 771px) and (min-width: 481px) {
body.eventi-page.eventi-nazionali .accordion-body-flex {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr);
  column-gap: 12px;
  row-gap: 10px;
  align-items: start;
}

body.eventi-page.eventi-nazionali .image-container {
  width: 60px;
  height: 42px;
  align-self: start;
}
}

/* 3) ≤480: più leggibile impilando (testo sotto immagine) */
@media (max-width: 480px) {
body.eventi-page.eventi-nazionali .accordion-body-flex {
  display: block;          /* stack verticale */
}

body.eventi-page.eventi-nazionali .image-container {
  width: 100%;
  max-width: 220px;        /* evita immagine troppo grande */
  height: auto;
  aspect-ratio: 16 / 10;
  margin-bottom: 10px;
}

body.eventi-page.eventi-nazionali .image-clickable {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
}

/* ======================================================
 EVENTI NAZIONALI – ACCORDION: testo non troncato + layout leggibile
 - reset nowrap SOLO dentro accordion-content
 - 481–771: immagine a sx + testo a dx (wrap)
 - ≤480: immagine sopra + testo sotto
====================================================== */

/* 1) L’accordion NON deve ereditare il nowrap della tabella */
body.eventi-page.eventi-nazionali
#tabellaEventiNazionali tbody tr.accordion-content td {
white-space: normal;     /* override del nowrap applicato ai td su mobile */
overflow: visible;       /* evita clipping indesiderato sul td */
text-overflow: unset;
text-align: left;        /* coerente con impilamento */
}

/* 2) Wrapping robusto del testo descrizione */
body.eventi-page.eventi-nazionali
#tabellaEventiNazionali tbody tr.accordion-content .accordion-text-wrapper {
min-width: 0;            /* fondamentale in flex/grid per evitare clipping */
max-width: 100%;
white-space: pre-wrap;   /* consente a-capo e preserva newline */
overflow-wrap: anywhere; /* spezza anche parole lunghe */
word-break: break-word;
}

/* 3) 481–771: mantieni “ordine” come sopra 771 (immagine a fianco) */
@media (max-width: 771px) and (min-width: 481px) {

body.eventi-page.eventi-nazionali .accordion-body-flex {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr);
  column-gap: 12px;
  row-gap: 10px;
  align-items: start;
}

body.eventi-page.eventi-nazionali .image-container {
  width: 60px;
  height: 42px;
  flex: 0 0 auto;
  align-self: start;
}

/* un filo più compatto per dare aria al testo */
body.eventi-page.eventi-nazionali .inner-description {
  margin: 0 8px 10px 8px;
  padding: 12px;
}
}

/* 4) ≤480: massima leggibilità -> testo sotto immagine */
@media (max-width: 480px) {

body.eventi-page.eventi-nazionali .accordion-body-flex {
  display: block; /* stack verticale */
}

body.eventi-page.eventi-nazionali .image-container {
  width: 100%;
  max-width: 240px;
  height: auto;
  aspect-ratio: 16 / 10;
  margin-bottom: 10px;
}

body.eventi-page.eventi-nazionali .image-clickable {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.eventi-page.eventi-nazionali .inner-description {
  margin: 0 6px 8px 6px;
  padding: 10px;
}
}

/* ======================================================
 EVENTI NAZIONALI – ACCORDION: evita taglio testo dopo resize (≤771px)
 Override del max-height inline impostato dal JS quando il testo reflowa
====================================================== */

@media (max-width: 771px) {

/* Quando una riga è espansa, l'accordion-content è la riga subito dopo */
body.eventi-page.eventi-nazionali
#tabellaEventiNazionali tbody tr.accordion-trigger.expanded + tr.accordion-content
.description-container {
  max-height: 5000px !important; /* sufficiente per contenuti lunghi dopo wrap */
}
}

/* Ulteriore margine su small mobile */
@media (max-width: 480px) {
body.eventi-page.eventi-nazionali
#tabellaEventiNazionali tbody tr.accordion-trigger.expanded + tr.accordion-content
.description-container {
  max-height: 8000px !important;
}
}

/* ======================================================
 EVENTI NAZIONALI – Accordion text: niente tagli su schermi stretti
 - Forza wrapping reale sul testo descrizione
 - Quando aperto, evita clipping del container
====================================================== */

@media (max-width: 771px) {

/* Neutralizza il nowrap della tabella SOLO nel contenuto accordion */
body.eventi-page.eventi-nazionali
#tabellaEventiNazionali tbody tr.accordion-content td,
body.eventi-page.eventi-nazionali
#tabellaEventiNazionali tbody tr.accordion-content td * {
  white-space: normal;
}

/* Forza wrap sul testo descrizione (anche se arrivano NBSP/strings lunghe) */
body.eventi-page.eventi-nazionali
#tabellaEventiNazionali tbody tr.accordion-content .accordion-text-wrapper {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;

  /* Modifiche per non spezzare le parole */
      white-space: normal; 
      overflow-wrap: break-word;
      word-break: normal;
      hyphens: none;
}

/* Quando l’accordion è aperto: niente clipping */
body.eventi-page.eventi-nazionali
#tabellaEventiNazionali tbody tr.accordion-trigger.expanded + tr.accordion-content
.description-container {
  overflow: visible;
  max-height: 8000px !important; /* evita tagli dopo resize/reflow */
}
}

/* ======================================================
 EVENTI NAZIONALI – Accordion: niente tagli dopo resize + wrap leggibile
 Causa: max-height inline del JS (es. 153px) non si aggiorna al reflow
====================================================== */

@media (max-width: 771px) {

/* L’accordion-content non deve ereditare nowrap della tabella */
body.eventi-page.eventi-nazionali
#tabellaEventiNazionali tbody tr.accordion-content td {
  white-space: normal;
  text-align: left;
}

/* Testo: va a capo senza spezzare parole salvo casi “estremi” */
body.eventi-page.eventi-nazionali
#tabellaEventiNazionali tbody tr.accordion-content .accordion-text-wrapper {
  display: block;
  min-width: 0;
  max-width: 100%;

  white-space: pre-line;
  overflow-wrap: break-word; /* spezza solo se una parola è troppo lunga */
  word-break: normal;
  hyphens: auto;
}

/* FIX CLIPPING: quando è aperto (max-height inline > 0), aumenta max-height */
body.eventi-page.eventi-nazionali
#tabellaEventiNazionali tbody tr.accordion-content .description-container[style]:not([style^="max-height: 0"]) {
  max-height: 8000px !important; /* deve vincere sull’inline del JS */
}

/* Se il JS usa la classe .expanded sul trigger, copriamo anche quel caso */
body.eventi-page.eventi-nazionali
#tabellaEventiNazionali tbody tr.accordion-trigger.expanded + tr.accordion-content
.description-container {
  max-height: 8000px !important;
}
}

/* Extra safety su schermi molto piccoli */
@media (max-width: 480px) {
body.eventi-page.eventi-nazionali
#tabellaEventiNazionali tbody tr.accordion-content .description-container[style]:not([style^="max-height: 0"]) {
  max-height: 12000px !important;
}
}

/* ======================================================
 EVENTI NAZIONALI – Accordion: no clipping + wrap corretto su resize
====================================================== */
@media (max-width: 771px) {

/* 1) Nel contenuto accordion niente nowrap ereditato dalla tabella */
body.eventi-page.eventi-nazionali
#tabellaEventiNazionali tbody tr.accordion-content td {
  white-space: normal !important;
  text-align: left;
}

/* 2) Testo descrizione: va a capo (non spezza parole a metà, salvo emergenze) */
body.eventi-page.eventi-nazionali
#tabellaEventiNazionali tbody tr.accordion-content .accordion-text-wrapper {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;

  white-space: normal !important;
  overflow-wrap: break-word; /* spezza SOLO se una parola è troppo lunga */
  word-break: normal;
  hyphens: none;
}

/* 3) FIX: quando aperto, non usare un max-height “vecchio” (inline dal JS) */
body.eventi-page.eventi-nazionali
#tabellaEventiNazionali tbody tr.accordion-trigger.expanded + tr.accordion-content
.description-container {
  max-height: none !important;   /* elimina il limite -> niente tagli */
}

/* Fallback se per qualche motivo .expanded non viene applicata:
   (aperto = max-height inline diverso da 0) */
body.eventi-page.eventi-nazionali
#tabellaEventiNazionali tbody tr.accordion-content .description-container[style*="max-height"]
:not([style*="max-height:0"]):not([style*="max-height: 0"]) {
  max-height: none !important;
}
}

/* ==========================================================
 SCHEDA PROFILO UTENTE NEL MENU MOBILE
 ========================================================== */
 @media (max-width: 991.98px) {
  
  /* Box principale del profilo dentro l'hamburger */
  .mobile-profile-card {
      background-color: rgba(216, 196, 10, 0.08) !important; /* Sfondo giallino trasparente per staccare */
      border: 1px solid rgba(216, 196, 10, 0.3) !important;
      border-radius: 8px !important;
      padding: 15px !important;
      margin-bottom: 15px !important;
      text-align: left !important; /* Allineamento a sinistra per distinguersi dai link del menu */
  }

  /* Icona utente */
  .profile-icon-mobile {
      font-size: 28px;
      color: #D8C40A;
      margin-right: 10px;
  }

  /* Nome utente */
  .user-name-mobile {
      font-size: 16px;
      line-height: 1.2;
  }

  /* Contenitore dei badge */
  .mobile-profile-card .mobile-badges {
      flex-wrap: wrap; /* Se ci sono troppi badge, vanno a capo */
  }

  /* Pulsante "Gestione Profilo" specifico per il mobile */
  .mobile-nav-active .navmenu ul .mobile-profile-card a.btn-profilo-mobile {
      display: block !important;
      text-align: center !important;
      background-color: #D8C40A !important;
      color: #001900 !important; /* Testo scuro su fondo giallo */
      font-weight: bold !important;
      padding: 10px !important;
      border-radius: 6px !important;
      margin: 0 !important;
      border: none !important;
  }

  /* Effetto hover sul pulsante profilo mobile */
  .mobile-nav-active .navmenu ul .mobile-profile-card a.btn-profilo-mobile:hover {
      background-color: #f0dd40 !important;
  }
}

/* ==========================================================================
 OVERRIDE MOBILE/TABLET PER INDEX-PAGE (Max-width: 991px)
 ========================================================================== */

@media (max-width: 991px) {

  /* ---------------------------------------------------
     1. SPLASH SCREEN (#betaSplashScreen)
     --------------------------------------------------- */
  /* Trasforma gli elementi in una griglia 2x2 per non schiacciarli */
  .index-page #betaSplashScreen .features-grid-splash {
      display: grid !important;
      grid-template-columns: repeat(2, 1fr) !important;
      gap: 12px;
      margin-bottom: 20px;
  }
  
  /* Ottimizza le dimensioni dei testi interni alla griglia */
  .index-page #betaSplashScreen .f-item {
      font-size: 0.85rem;
      text-align: center;
      padding: 5px;
  }

  /* Ridimensiona leggermente i testi della modale */
  .index-page #betaSplashScreen .welcome-static-title {
      font-size: 1.3rem;
  }
  .index-page #betaSplashScreen .welcome-username {
      font-size: 1.8rem;
  }
  
  .index-page #betaSplashScreen .btn-gold-splash {
      font-size: 0.9rem;
      padding: 10px;
  }

  /* ---------------------------------------------------
     2. NEWS TICKER
     --------------------------------------------------- */
  /* Nasconde completamente la barra scorrevole per recuperare spazio */
  .index-page .news-ticker {
      display: none !important;
  }

    /* ---------------------------------------------------
     3. HERO SECTION (#hero)
     --------------------------------------------------- */
  /* Annulla il 55% forzato dal CSS principale e centra tutto */
  .index-page #hero .col-lg-6 {
      width: 100% !important;       /* FORZA AL 100% */
      flex: 0 0 100% !important;    /* FORZA AL 100% */
      max-width: 100% !important;   /* FORZA AL 100% */
      
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-left: 15px !important;
      padding-right: 15px !important;
  }
  
  /* Adatta il titolo */
  .index-page #hero h2 {
      font-size: 2rem;
      line-height: 1.3;
      margin-bottom: 15px;
  }

  /* Gestione del paragrafo (Visivamente "ristretto" ma leggibile) */
  .index-page #hero p {
      max-width: 85%; 
      margin: 0 auto 20px auto !important;
      font-size: 1rem;
  }

  /* Centra il pulsante e ne riduce l'ingombro visivo */
  .index-page #hero .d-flex {
      justify-content: center !important;
      width: 100%;
  }
  
  .index-page #hero .btn-get-started {
      padding: 8px 25px;
      font-size: 15px;
  }

  /* ---------------------------------------------------
     4. SEZIONE TABS (Layout Definitivo: Griglia Bottoni/Immagine)
     --------------------------------------------------- */
  /* La Griglia Principale */
  .index-page #tabs .container {
      display: grid !important;
      /* Usiamo 'fr' (frazioni). Il lato sx prende 1.3 spazi, il dx 1 spazio. Super elastico! */
      grid-template-columns: 1.3fr 1fr; 
      grid-template-rows: auto auto;
      gap: 15px; /* Lo spazio centrale che ti piace */
      align-items: stretch !important; /* Forza l'altezza identica */
      padding-right: 15px !important; /* RIPRISTINA LO SPAZIO DESTRO! */
  }

  .index-page #tabs .container::after { display: none !important; }

  /* -- QUADRANTE 1: I BOTTONI -- */
  .index-page #tabs .nav-tabs {
      grid-column: 1 / 2;
      grid-row: 1 / 2;
      display: flex !important;
      flex-direction: column !important;
      justify-content: space-between !important; 
      gap: 8px !important;
      border-bottom: none;
      margin: 0 !important;
      padding: 0 !important;
      height: 100% !important; 
  }

  .index-page #tabs .nav-tabs .nav-item {
      width: 100% !important;
      margin: 0 !important;
  }

  .index-page #tabs .nav-tabs .nav-link {
      width: 100%;
      height: 100%; 
      display: flex;
      justify-content: flex-start;
      align-items: center;
      padding: 10px 12px !important;
      border-radius: 8px !important;
      text-align: left;
  }

  .index-page #tabs .nav-tabs .nav-link h4 {
      font-size: 0.95rem !important;
      margin: 0 0 0 10px !important;
      line-height: 1.2;
  }

  .index-page #tabs .nav-tabs .nav-link i {
      font-size: 1.2rem !important;
      margin: 0 !important;
  }

  /* -- MAGIA CSS: SCIOGLIAMO I CONTENITORI -- */
  .index-page #tabs .tab-content,
  .index-page #tabs .tab-pane.active, 
  .index-page #tabs .tab-pane.active > .row {
      display: contents !important; 
  }

  .index-page #tabs .tab-pane:not(.active) {
      display: none !important;
  }

  /* -- QUADRANTE 2: IL CONTENITORE DELL'IMMAGINE -- */
  .index-page #tabs .tab-pane.active > .row > div:nth-child(2) {
      grid-column: 2 / 3;
      grid-row: 1 / 2;
      display: block !important;
      width: 100% !important;
      height: 100% !important; 
      padding: 0 !important; 
  }

  /* -- L'IMMAGINE (Correzione Altezza e Spazio) -- */
  .index-page #tabs .tab-pane.active > .row > div:nth-child(2) img {
      display: block !important; /* RISOLVE IL PROBLEMA DELL'ALTEZZA SFALSATA DEI 4 PIXEL */
      width: 100% !important;
      height: 100% !important;      
      object-fit: cover !important; 
      object-position: center;      
      border-radius: 12px;
      box-shadow: 0 5px 15px rgba(0,0,0,0.4);
      margin: 0 !important;
  }

  /* -- QUADRANTE 3: IL TESTO SOTTOSTANTE -- */
  .index-page #tabs .tab-pane.active > .row > div:nth-child(1) {
      grid-column: 1 / 3; 
      grid-row: 2 / 3;
      margin-top: 15px;
  }

  .index-page #tabs .tab-pane h3 {
      font-size: 1.25rem !important;
      line-height: 1.2 !important;
      margin-bottom: 12px !important;
  }

  .index-page #tabs .tab-pane p,
  .index-page #tabs .tab-pane .fst-italic {
      font-size: 0.95rem !important;
      line-height: 1.45 !important;
      margin-bottom: 10px !important;
      text-align: left !important;
  }

  .index-page #tabs .tab-pane ul {
      padding-left: 0 !important;
      margin-bottom: 15px !important;
  }
  
  .index-page #tabs .tab-pane ul li {
      font-size: 0.95rem !important;
      line-height: 1.4 !important;
      margin-bottom: 8px !important;
      display: flex;
      align-items: flex-start;
  }
  
  .index-page #tabs .tab-pane ul li i {
      margin-right: 8px !important;
      font-size: 1.1rem !important;
      margin-top: 2px !important;
  }
  /* ---------------------------------------------------
     5. SPAZIATURE E CARD (#ricerca)
     --------------------------------------------------- */
  /* Riduce il padding verticale generico delle sezioni su mobile */
  .index-page .section {
      padding: 40px 0 !important;
  }

  /* Riduce lo spazio vuoto (gap) tra una card e l'altra (sovrascrive il .gy-4 di Bootstrap) */
  .index-page #ricerca .row.gy-4 {
      --bs-gutter-y: 15px; 
  }

  /* TRASFORMAZIONE CARD: Da enormi blocchi verticali a snelle card orizzontali */
  .index-page #ricerca .service-item {
      flex-direction: row;     /* Icona a sx, testo a dx */
      align-items: center;     /* Centra verticalmente */
      text-align: left;        /* Allinea il testo a sinistra */
      padding: 12px 15px;      /* Padding drasticamente ridotto */
      min-height: auto;
  }

  /* Rimpicciolisce l'icona e le ridà il margine a destra */
  .index-page #ricerca .service-item .icon {
      width: 45px;
      height: 45px;
      font-size: 20px;
      margin-bottom: 0;        /* Rimuove il margine inferiore */
      margin-right: 15px;      /* Spazio tra icona e testo */
      flex-shrink: 0;          /* Evita che l'icona si schiacci */
  }

  /* Ottimizza le dimensioni dei testi interni per il mobile */
  .index-page #ricerca .service-item .title {
      font-size: 1rem;         /* Titolo più compatto */
      margin-bottom: 2px;      /* Avvicina il titolo alla descrizione */
  }
  
  .index-page #ricerca .service-item .description {
      font-size: 0.8rem;       /* Descrizione più piccola */
      line-height: 1.3;
      margin: 0;
      display: block;
  }

  /* Ridimensiona i pulsanti all'interno della modale eventi */
  .index-page #sceltaEventiModal .btn-search-gold {
      font-size: 0.9rem;
      padding: 10px;
  }

/* ---------------------------------------------------
     6. SEZIONE CHI SIAMO (#about)
     --------------------------------------------------- */
  /* Riduciamo lo spazio enorme (gy-5) tra il testo e l'accordion sottostante */
  .index-page #about .row.gy-5 {
      --bs-gutter-y: 20px; 
  }

  /* Ottimizza il titolo: più proporzionato allo schermo mobile */
  .index-page #about .content h3 {
      font-size: 1.4rem;       /* Riduce la grandezza */
      line-height: 1.3;
      margin-bottom: 15px;     /* Dà spazio prima del testo */
  }

  /* Ottimizza il paragrafo: leggibilità e respiro */
  .index-page #about .content p {
      font-size: 0.95rem;
      line-height: 1.65;       /* FONDAMENTALE: Aumenta lo spazio tra le righe */
      color: #b0c4b0;          /* Usa il verdino/grigio del tema invece del bianco puro per non stancare gli occhi */
      text-align: left;        /* Allineamento a sinistra (più facile da leggere su mobile rispetto al giustificato) */
  }

}

/* ==========================================================================
 FOOTER MOBILE & TABLET OVERRIDES
 Progetto: CHIESE EVANGELICHE ITALIA
 ========================================================================== */

/* --------------------------------------------------------------------------
 REGOLE COMUNI PER ENTRAMBI (Max-width: 991px)
 (Reset di allineamenti, ordine elementi e nascondimento Logo)
 -------------------------------------------------------------------------- */
@media (max-width: 991px) {
  
  /* Setup Griglia Flex */
  #footer .row {
      display: flex !important;
      flex-wrap: wrap !important;
  }

  /* Ordine dei blocchi nella riga */
  #footer .footer-links:nth-of-type(2) { order: 1; } /* Link Utili */
  #footer .footer-links:nth-of-type(3) { order: 2; } /* Servizi */
  #footer .footer-newsletter { order: 3; }
  #footer .footer-about { order: 4; } /* Contatti in fondo */

  /* Nascondi il Logo */
  #footer .logo { display: none !important; }

  /* Allineamenti generali a Sinistra per le liste */
  #footer .footer-links h4 { text-align: left !important; padding-bottom: 12px !important; }
  #footer .footer-links ul { align-items: flex-start !important; margin: 0 !important; }
  #footer .footer-links ul li { justify-content: flex-start !important; padding: 6px 0 !important; }

  /* Allineamenti generali Newsletter */
  #footer .footer-newsletter h4, 
  #footer .footer-newsletter p { text-align: left !important; padding-left: 0 !important; }
  
  /* Contatti in fondo (100% larghezza) */
  #footer .footer-about { width: 100% !important; margin-top: 20px !important; }
  #footer .footer-contact p { text-align: left !important; display: block !important; margin-bottom: 8px !important; }
  #footer .footer-contact span { margin-left: 5px !important; word-break: break-word; }
  #footer .social-links { justify-content: flex-start !important; }

  /* Pulizia Spaziature HTML */
  #footer .footer-top { padding-bottom: 0 !important; }
  #footer .copyright { padding-top: 0 !important; border-top: none !important; }
}


/* --------------------------------------------------------------------------
 SCENARIO 1: TABLET (Da 481px a 991px)
 Layout: 3 Colonne affiancate (Link, Servizi, Newsletter)
 -------------------------------------------------------------------------- */
@media (min-width: 481px) and (max-width: 991px) {
  
  /* Assegnazione larghezze: 30% ai link, 40% alla newsletter */
  #footer .footer-links:nth-of-type(2) { width: 30% !important; flex: 0 0 30% !important; padding-left: 15px !important; }
  #footer .footer-links:nth-of-type(3) { width: 30% !important; flex: 0 0 30% !important; padding-left: 10px !important; }
  #footer .footer-newsletter { width: 40% !important; flex: 0 0 40% !important; padding-left: 15px !important; padding-right: 15px !important; }

  /* Incolonniamo il form Newsletter altrimenti il 40% è troppo stretto */
  #footer .newsletter-group {
      flex-direction: column !important;
      background: transparent !important;
      gap: 10px;
  }
  #footer #newsletterEmail, #footer #newsletterSubmit { width: 100% !important; border-radius: 4px !important; }
  #footer #newsletterEmail { background: #ffffff !important; text-align: left !important; padding: 10px 15px !important; }
}


/* --------------------------------------------------------------------------
 SCENARIO 2: SMARTPHONE (Fino a 480px)
 Layout: 2 Colonne (Link/Servizi) + Newsletter a capo
 -------------------------------------------------------------------------- */
@media (max-width: 480px) {

  /* Link Utili (50%) - QUI APPLICHIAMO IL PADDING 30PX INIZIALE */
  #footer .footer-links:nth-of-type(2) {
      width: 50% !important;
      flex: 0 0 50% !important;
      padding-left: 30px !important; /* Sposta il gruppo di link a destra */
      margin-bottom: 25px !important;
  }

  /* Servizi (50%) - Scorre accanto ai Link Utili */
  #footer .footer-links:nth-of-type(3) {
      width: 50% !important;
      flex: 0 0 50% !important;
      padding-left: 10px !important; /* Normale distanza dalla colonna 1 */
      margin-bottom: 25px !important;
  }

  /* Newsletter a capo (100%) - QUI APPLICHIAMO IL PADDING 30PX INIZIALE */
  #footer .footer-newsletter {
      width: 100% !important;
      flex: 0 0 100% !important;
      padding-left: 30px !important; /* Allineato ai Link Utili */
      padding-right: 30px !important; /* Evita che input sbatta sul lato destro */
      margin-bottom: 25px !important;
  }

  /* Impiliamo l'input e il bottone per occupare in modo pulito lo spazio */
  #footer .newsletter-group {
      flex-direction: column !important;
      background: transparent !important;
      gap: 10px;
      width: 100% !important;
  }
  #footer #newsletterEmail, 
  #footer #newsletterSubmit {
      width: 100% !important;
      border-radius: 4px !important;
  }
  #footer #newsletterEmail {
      background: #ffffff !important;
      text-align: left !important;
      padding: 12px 15px !important;
  }

  /* Anche i Contatti e i Social ereditano i 30px per creare una linea retta perfetta */
  #footer .footer-about {
      padding-left: 30px !important;
  }

}

/* ==========================================================
 FIX SPLASH SCREEN (SOLO PER DISPOSITIVI MOBILE E TABLET)
 ========================================================== */
@media (max-width: 991.98px) {

.modal-overlay-splash {
  position: fixed !important;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 15px !important;
  box-sizing: border-box;
  width: 100% !important; /* Previene lo slittamento a destra */
  z-index: 100000;
}

.modal-container-splash {
  width: 100%;
  max-width: 400px; /* Non lo fa allargare troppo sui tablet */
  max-height: 90vh !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

/* 3. Il "Cuore" della modale si schiaccia o scorre */
.modal-body-splash {
  overflow-y: auto !important; /* Se lo schermo è troppo piccolo, scorre col dito! */
  flex-shrink: 1 !important; /* Permette alla modale di comprimersi elasticamente */
  padding-bottom: 10px !important;
}
}

/* ==========================================================
4. EXTRA: Compressione automatica per schermi bassi (es. Honor 7A)
========================================================== */
@media (max-height: 650px) {
  .modal-header-splash { padding-top: 15px !important; padding-bottom: 10px !important; }
  .logo-img-splash { max-height: 50px !important; } /* Rimpicciolisce il logo */
  .promo-card { padding: 10px !important; margin-bottom: 0 !important; }
  .features-grid-splash { gap: 5px !important; }
  .f-item { font-size: 13px !important; margin-bottom: 5px !important; }
  .btn-gold-splash { padding: 8px 20px !important; font-size: 14px !important; }
  .modal-footer-splash { padding-bottom: 15px !important; }
}

/* HONOR 7A FIX: Sotto i 400px rimuove completamente il rientro */
@media (max-width: 400px) {
    #header a.logo .sitename .second-line {
        padding-left: 0 !important;
        text-align: left !important;
    }
}