@charset "UTF-8";

/* Importiamo il Montserrat da Google Fonts (pesi da 100 a 900) */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900&display=swap');

/* =========================================
   1. VARIABILI GLOBALI (Desktop & Colori)
   ========================================= */
:root {
    /* I tuoi colori base */
    --base1: #006297;
    --base2: #00acbb;
	--bg: #ebebeb;
	--bg2: #f3f3f3;
    
    /* Colore base del testo e dello sfondo */
    --text-color: #333333; 
    --bg-color: #ffffff;   

    /* ==== NUOVO: Famiglia di Font ==== */
    --main-font: 'Montserrat', sans-serif;

    /* Dimensioni Tipografiche Desktop */
    --font-size-body: 16px; 
    
    /* Proporzioni Titoli (Desktop) */
    --h1-size: 2.5rem;  
    --h2-size: 2rem;    
    --h3-size: 1.75rem; 
    --h4-size: 1.5rem;  
    --h5-size: 1.25rem; 
    --h6-size: 1rem;    
}

/* =========================================
   2. VARIABILI PER MOBILE
   ========================================= */
@media (max-width: 768px) {
    :root {
        --h1-size: 2rem;    
        --h2-size: 1.75rem; 
        --h3-size: 1.5rem;  
        --h4-size: 1.25rem; 
        --h5-size: 1.125rem;
        --h6-size: 1rem;    
    }
}

/* =========================================
   3. APPLICAZIONE DELLE VARIABILI
   ========================================= */
body {
    font-family: var(--main-font); /* <-- Applica il Montserrat a tutto il sito! */
    color: var(--text-color);
    background-color: var(--bg-color);
    font-size: var(--font-size-body);
    line-height: 1.6; 
}

/* Applichiamo le dimensioni ai titoli */
h1 { font-size: var(--h1-size); }
h2 { font-size: var(--h2-size); }
h3 { font-size: var(--h3-size); }
h4 { font-size: var(--h4-size); }
h5 { font-size: var(--h5-size); }
h6 { font-size: var(--h6-size); }

/* =========================================
   VARIE
   ========================================= */
   
html.error-page body {background-color: white !important;}
html.error-page .error-code {
  font-family:  var(--main-font) !important;
  color: var(--base1) !important;
}
html.error-page .error-message {
color: white !important;
}
.sppb-btn-default {
  color: #010101;
  background-color: var(--bg) !important;
  border-color: var(--base1) !important;
}
.sppb-btn-default:hover {
  color: #010101;
  background-color: white !important;
  border-color:  var(--base2) !important;
}
body .sppb-btn.sppb-btn-primary, body .sppb-btn.btn-primary, body .btn.sppb-btn-primary, body .btn.btn-primary {
  border: 1px solid var(--base1) !important;
  background-color: white !important;
}
body .sppb-btn.sppb-btn-primary:hover, body .sppb-btn.sppb-btn-primary:focus, body .sppb-btn.sppb-btn-primary:active, body .sppb-btn.btn-primary:hover, body .sppb-btn.btn-primary:focus, body .sppb-btn.btn-primary:active, body .btn.sppb-btn-primary:hover, body .btn.sppb-btn-primary:focus, body .btn.sppb-btn-primary:active, body .btn.btn-primary:hover, body .btn.btn-primary:focus, body .btn.btn-primary:active {
  background-color: var(--base1) !important;
  border-color: white !important;
	color:white !important;
}

.offcanvas-menu {
  background-color: var(--bg) !important;
}
.offcanvas-menu .logo-image {
  filter: none !important;
}



/* =========================================
   4. STILI SPECIFICI (Classi personalizzate)
   ========================================= */

/* Stile per il titolo H1 all'interno del contenitore claim-home */
.claim-home h1 {
    border-bottom: 1px solid #ffffff; /* Crea la linea bianca spessa 1 pixel */
    padding-bottom: 10px !important;             /* Allontana la linea dal testo di 10px */
    margin-bottom: 10px !important;              /* Crea spazio (30px) sotto la linea */
}

/* =========================================
   5. STILI SPECIFICI (Classi personalizzate) PER HEADER
   ========================================= */

#sp-header.celestia-header.header-sticky {
  background-color: #FFFFFF !important;
}
.burger-icon > span {background-color: var(--base1) !important;}
#sp-header.celestia-header .modal-menu-left {
	background-image: url("../images/modal-menu.webp");
    background-position: top center; 
}
#sp-header.celestia-header .modal-menu-right {background-color: var(--bg)}

@media (max-width: 575px) {
  #sp-header {
    height: 100px !important;
  }
}


.sp-page-title .sp-page-title-heading {
  color: var(--base1);
  font-family: var(--main-font) !important;
  font-weight: 700;
}

@media (max-width: 991px) {
  .sp-page-title .sp-page-title-heading {
    font-size: 60px;
    font-style: normal;
  }
}

.sp-page-title .sp-page-title-sub-heading {
	color: white;
	font-family: var(--main-font) !important;
	background-color: var(--base1);
	padding: 5px 10px;
	font-weight: 700 !important;
}
.sp-page-title {background-position-y: -180px;}
@media (max-width: 1560px) {.sp-page-title {background-position-y: -170px;}}
@media (max-width: 767px) {.sp-page-title {background-position-x: center;}}


/* =========================================
   6. STILI SPECIFICI (Classi personalizzate) PER IUBENDA
   ========================================= */

#iub-legalDoc div, #iub-legalDoc p  {
  font-size: 1rem !important;
}
#iub-legalDoc {border-top-color: var(--base1) !important;}


/* =========================================
   7. STILI SPECIFICI PER LA CHECKLIST
   ========================================= */
.checklist-container {
    background-color: var(--bg); /* Usa il tuo sfondo grigio chiaro */
    padding: 30px;
    border-radius: 8px;
    margin-bottom: 40px;
}
.checklist-intro {
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 2px solid var(--base2);
}
.checklist-section h3 {
    color: var(--base1);
    margin-top: 40px;
    margin-bottom: 20px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
}
.question-block {
    margin-bottom: 25px;
    background: #ffffff;
    padding: 20px;
    border-radius: 6px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.question-block p {
    font-weight: 600;
    margin-bottom: 15px;
    font-size: 1.05rem;
}
/* Stile per i pulsanti da 1 a 5 */
.rating-options {
    display: flex;
    gap: 9px;
    flex-wrap: wrap; /* Permette di andare a capo su schermi piccolissimi */
}



.rating-options label {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 45px;
    height: 45px;
    background-color: #e0e0e0;
    color: #333;
    border-radius: 50%;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.3s ease;
}
.rating-options input[type="radio"] {
    display: none; /* Nascondiamo il pallino standard del browser */
}
/* Colore quando il numero viene selezionato */
.rating-options input[type="radio"]:checked + label {
    background-color: var(--base1);
    color: #ffffff;
    transform: scale(1.1); /* Ingrandisce leggermente il pulsante selezionato */
}
/* Bottone Calcola */
.btn-calcola {
    background-color: var(--base2);
    color: #fff;
    padding: 15px 30px;
    border: none;
    border-radius: 5px;
    font-size: 1.2rem;
    font-weight: bold;
    cursor: pointer;
    margin-top: 30px;
    font-family: var(--main-font);
    transition: background-color 0.3s ease;
    width: 100%; /* Occupa tutta la larghezza per massima visibilità */
}
.btn-calcola:hover {
    background-color: var(--base1);
}
/* Box Risultato */
#risultato-box {
    margin-top: 40px;
    padding: 25px;
    background-color: #ffffff;
    border: 2px solid var(--base2);
    border-radius: 8px;
    text-align: center;
    display: none; /* Nascosto all'inizio */
}
#risultato-box h4 {
    color: var(--base1);
    font-size: 1.8rem;
    margin-bottom: 15px;
}
#testo-legenda {
    font-size: 1.1rem;
    font-weight: 500;
}

/* =========================================
   8. STILI PER IL BOTTONE DI STAMPA E LAYOUT CARTA
   ========================================= */

/* Stile per il nuovo bottone di stampa */
.btn-stampa {
    background-color: var(--base1);
    color: #fff;
    padding: 12px 25px;
    border: none;
    border-radius: 5px;
    font-size: 1.1rem;
    cursor: pointer;
    margin-top: 20px;
    font-family: var(--main-font);
    transition: background-color 0.3s ease;
}
.btn-stampa:hover {
    background-color: var(--base2);
}

/* Regole speciali che si attivano SOLO quando l'utente stampa la pagina */
@media print {
    /* Nascondiamo i bottoni per non stamparli sul foglio */
    .btn-calcola, .btn-stampa { 
        display: none !important; 
    }
    /* Togliamo lo sfondo grigio e le ombre per risparmiare inchiostro */
    body, .checklist-container { 
        background-color: white !important; 
    }
    .question-block {
        box-shadow: none !important;
        border: 1px solid #ddd;
    }
    /* Nascondiamo l'header e il footer del sito (se necessario, regola questi selettori) */
    #sp-header, #sp-footer {
        display: none !important;
    }
}

/* =========================================
   9. STILE PER IL MESSAGGIO FINALE (Call to Action)
   ========================================= */
.messaggio-finale {
    margin-top: 30px;
    margin-bottom: 25px;
    padding: 20px;
    background-color: var(--bg); /* Usa il grigio chiaro del tuo tema */
    border-left: 4px solid var(--base1); /* Barra laterale colorata per dare enfasi */
    text-align: left;
    border-radius: 4px;
}
.messaggio-finale h5 {
    color: var(--base1);
    font-size: 1.3rem;
    margin-bottom: 10px;
}
.messaggio-finale p {
    font-size: 1.05rem;
    line-height: 1.5;
    margin-bottom: 10px;
}

/* =========================================
   10. STILI PER LA RICERCA STRUTTURE (Solo in pagina sc-list)
   ========================================= */

body.sc-list .bpv-search-container {
    background-color: var(--bg);
    padding: 30px;
    border-radius: 8px;
    margin-bottom: 40px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

body.sc-list .bpv-search-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

@media (max-width: 768px) {
    body.sc-list .bpv-search-grid { grid-template-columns: 1fr; }
}

body.sc-list .bpv-search-box label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--base1);
}

body.sc-list .bpv-search-box input {
    width: 100%;
    box-sizing: border-box; /* Il trucco per non far sovrapporre i campi! */
    padding: 12px 15px;     /* Ora il padding interno funziona senza sfasare la griglia */
    border: 1px solid #ccc;
    border-radius: 4px;
    font-family: var(--main-font);
    font-size: 1rem;
}

body.sc-list .bpv-search-box input:focus {
    border-color: var(--base2);
    outline: none;
    box-shadow: 0 0 5px rgba(0, 172, 187, 0.3);
}

body.sc-list #btnResetSearch {
    background-color: #666;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-family: var(--main-font);
    transition: background 0.3s;
}
body.sc-list #btnResetSearch:hover { background-color: #333; }


/* =========================================
   11. STILI PER LE CARD DEI RISULTATI (Override su Page Builder)
   ========================================= */

/* Impostazione generale della scheda */
body.sc-list .sppb-dynamic-content-collection__item {
    width: 100% !important; 
    box-sizing: border-box;
    background-color: #fff;
    border: 1px solid #eaeaea;
    border-left: 5px solid var(--base2);
    border-radius: 6px;
    padding: 25px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    /* Ho rimosso il display: block !important; da qui! */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

body.sc-list .sppb-dynamic-content-collection__item:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.1);
}

/* Stile della Denominazione (Grande e in Base1) */
body.sc-list .sc-denominazione {
    color: var(--base1) !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    margin-bottom: 10px !important;
    line-height: 1.3;
}

/* L'etichetta "Indirizzo:" SOLO dentro le card delle strutture */
body.sc-list .sppb-dynamic-content-collection__item .addon-root-heading .sppb-addon-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 5px;
    margin-top: 15px;
}

/* ==============================================================
   LA MAGIA ANTI-PAGEBUILDER: FORZIAMO L'ALLINEAMENTO ORIZZONTALE 
   ============================================================== */

/* 1. Diciamo ai wrapper esterni di questi 4 campi di diventare piccoli (inline-block) */
body.sc-list .sppb-addon-wrapper:has(.sc-indirizzo),
body.sc-list .sppb-addon-wrapper:has(.sc-cap),
body.sc-list .sppb-addon-wrapper:has(.sc-comune),
body.sc-list .sppb-addon-wrapper:has(.sc-provincia) {
    display: inline-block !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    clear: none !important;
    vertical-align: baseline !important;
}

/* 2. Disattiviamo il "clearfix" interno di Page Builder che manda a capo */
body.sc-list .clearfix:has(.sc-indirizzo),
body.sc-list .clearfix:has(.sc-cap),
body.sc-list .clearfix:has(.sc-comune),
body.sc-list .clearfix:has(.sc-provincia) {
    display: inline-block !important;
    width: auto !important;
    clear: none !important;
}

/* Uccidiamo l'effetto ombra del clearfix che genera righe vuote */
body.sc-list .clearfix:has(.sc-indirizzo)::after,
body.sc-list .clearfix:has(.sc-cap)::after,
body.sc-list .clearfix:has(.sc-comune)::after,
body.sc-list .clearfix:has(.sc-provincia)::after {
    display: none !important;
    content: none !important;
}

/* 3. Formattiamo i testi finali allineati a sinistra l'uno all'altro */
body.sc-list .sc-indirizzo, 
body.sc-list .sc-cap, 
body.sc-list .sc-comune, 
body.sc-list .sc-provincia {
    display: inline !important; /* Inline per comportarsi come una frase unica */
    color: #555 !important;
    font-size: 1.1rem !important;
    margin: 0 4px 0 0 !important; /* Piccolo spazietto tra una parola e l'altra */
    padding: 0 !important;
}

/* Aggiungiamo le virgole e le parentesi in automatico */
body.sc-list .sc-indirizzo::after, 
body.sc-list .sc-comune::after { content: ","; }
body.sc-list .sc-provincia::before { content: "("; }
body.sc-list .sc-provincia::after { content: ")"; }

/* La regione resta a capo (blocco standard) e in corsivo */
body.sc-list .sc-regione { 
    display: block !important;
    margin-top: 5px !important; 
    font-style: italic; 
    color: #888 !important; 
}

/* =========================================
   12. FORZA SOTTOMENU OFFCANVAS SEMPRE APERTI (Helix Ultimate Fix)
   ========================================= */

/* Sblocca l'altezza e l'overflow usati per l'animazione a fisarmonica */
.offcanvas-menu ul li ul,
.offcanvas-menu ul.nav-child,
.offcanvas-menu ul.menu-child,
.offcanvas-inner ul li ul {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    max-height: none !important;  /* Uccide il blocco dell'altezza di Helix */
    overflow: visible !important; /* Permette al testo di uscire e farsi vedere */
    transform: none !important;   /* Disattiva eventuali animazioni di scorrimento */
    margin-top: 10px !important;
    padding-left: 15px !important;
    border-left: 1px solid rgba(150, 150, 150, 0.3) !important; /* Bordino guida */
}

/* Nasconde l'icona di "toggle" (il + o la freccia a discesa) */
.offcanvas-menu .menu-toggler,
.offcanvas-inner .menu-toggler {
    display: none !important;
}

/* Assicura che i link principali con sottovoci restino cliccabili e impaginati bene */
.offcanvas-menu .sp-has-child > a,
.offcanvas-menu .sp-has-child > span {
    pointer-events: auto !important;
    padding-bottom: 5px !important;
}

/* =========================================
   13. REGOLE PER LA STAMPA DELLA CHECKLIST (Fix Impaginazione)
   ========================================= */

@media print {
    /* 1. Impostazioni del foglio A4 con margini ridotti */
    @page {
        size: A4 portrait;
        margin: 1cm 1.5cm;
    }

    /* 2. MAGIA: Spegniamo FISICAMENTE tutto ciò che NON è la checklist o un suo contenitore padre.
       Questo elimina gli spazi vuoti giganti! */
    body *:not(:has(.checklist-container)):not(.checklist-container):not(.checklist-container *) {
        display: none !important;
    }

    /* 3. Ripristiniamo l'impaginazione naturale per permettere lo scorrimento su più fogli */
    html, body, body *:has(.checklist-container) {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        min-height: auto !important;
        max-height: none !important; /* Fondamentale per non tagliare i fogli */
        overflow: visible !important;
        position: static !important; /* Riporta la checklist nel normale flusso della pagina */
        background: transparent !important;
        box-shadow: none !important;
    }

    /* 4. Assicuriamoci che la checklist prenda tutto lo spazio */
    .checklist-container {
        display: block !important;
        width: 100% !important;
        padding-top: 20px !important;
    }

    /* 5. Inseriamo il Logo BPV (usando max-width invece di scale, che in stampa è più sicuro) */
    .checklist-container::before {
        content: url('/images/grafica/loghi/bpv-logo.webp');
        display: block;
        text-align: center;
        margin: 0 auto 30px auto;
        max-width: 250px; /* Così controlli perfettamente la grandezza */
    }

    /* 6. Regole anti-taglio (non tagliare le domande a metà tra due fogli) */
    .question-block {
        page-break-inside: avoid;
        break-inside: avoid;
        margin-bottom: 12px;
    }
    
    h3 {
        page-break-after: avoid;
        break-after: avoid;
        margin-top: 25px;
    }

    /* 7. Nascondiamo esplicitamente bottoni e i widget ostinati come Iubenda */
    .btn-calcola,
    .btn-stampa,
    #iubenda-cs-banner,
    .iubenda-cs-preferences-link,
    #iubenda-iframe,
    div[class^="iubenda"] {
        display: none !important;
    }
}