/* ==========================================================================
   LANDING-STILE-MARCHIO — SISTEMACASE (Kit Elementor post-15414)
   Variabili CSS del marchio, font Poppins self-hosted e stili condivisi
   per le 3 landing: /lp/pvc, /lp/cassonetti, /lp/persiane.
   ========================================================================== */

/* 1. FONT POPPINS SELF-HOSTED (400, 600, 700, 800) */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/poppins/poppins-v21-latin-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/static/fonts/poppins/poppins-v21-latin-600.woff2') format('woff2');
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/static/fonts/poppins/poppins-v21-latin-700.woff2') format('woff2');
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/static/fonts/poppins/poppins-v21-latin-800.woff2') format('woff2');
}

/* 2. VARIABILI MARCHIO SISTEMACASE */
:root {
  /* Marchio Elementor (kit post-15414) */
  --sc-blu: #194366;          /* Primario: titoli h1/h2, bordi focus/attivi, link */
  --sc-blu-scuro: #13334D;    /* Sfondo barra fissa mobile, testo su bottoni arancioni */
  --sc-blu-notte: #0A1B29;    /* Variante profonda per contrasti scuri */
  --sc-arancio: #FD823A;      /* Accento: bottoni CTA, badge sconto, pillole attive */
  --sc-arancio-hover: #E0651F;/* Hover bottoni accento */
  --sc-grigio-bg: #F5F6F7;    /* Sfondo pagina e sezioni secondarie */
  --sc-grigio-card: #FFFFFF;  /* Sfondo schede bianche */
  --sc-bordo: #E1E1E1;        /* Bordi card, separatori, input */
  --sc-testo: #13334D;        /* Testo scuro principale */
  --sc-testo-sec: #7A7A7A;    /* Testo secondario e note */
  
  /* Verde semantico ristretto SOLO a indicatori di "OK / ✓ compreso" */
  --sc-ok: #137333;           
  --sc-ok-bg: #E6F4EA;

  /* Geometria bottoni da kit Elementor */
  --sc-radius-btn: 0px;       /* Bottoni squadrati raggio 0 */
  --sc-btn-padding: 15px 32px;/* Padding kit Elementor 15px x 32px */
  --sc-btn-weight: 700;       /* Peso bold 700 (rapporto 5,24:1 WCAG AA con #13334D) */
  --sc-font: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* 3. REGOLE GLOBALI CONDIVISE */
body, button, input, select, textarea {
  font-family: var(--sc-font);
}

h1, h2, h3, h4 {
  font-family: var(--sc-font);
  color: var(--sc-blu);
}

/* 4. CLASSE UNICA PER BOTTONI E PILOLE ARANCIONI (5,24:1 WCAG AA: MAI BIANCO SU ARANCIONE) */
.btn-marchio-cta,
.btn-arancio,
.btn-cta-richiesta,
.btn-submit-lead,
.btn-richiedi-preventivo,
.btn-add-cart-emerald,
.richiesta-pillola.active,
.left-option-pill.active,
.btn-seg.attivo {
  background-color: var(--sc-arancio, #FD823A) !important;
  color: var(--sc-blu-scuro, #13334D) !important;
  font-weight: 700 !important;
  border-radius: 0px !important;
}

/* Presidio su tutti gli elementi interni (span, icone, testo) affinché non restino bianchi */
.btn-marchio-cta *,
.btn-arancio *,
.btn-cta-richiesta *,
.btn-submit-lead *,
.btn-richiedi-preventivo *,
.btn-add-cart-emerald *,
.richiesta-pillola.active *,
.left-option-pill.active *,
.btn-seg.attivo * {
  color: var(--sc-blu-scuro, #13334D) !important;
  font-weight: 700 !important;
}

/* Specifico per i sottotesti delle pillole attive */
.left-option-pill.active .pill-desc {
  color: var(--sc-blu-scuro, #13334D) !important;
  font-weight: 600 !important;
}

.btn-marchio-cta:hover,
.btn-arancio:hover,
.btn-cta-richiesta:hover,
.btn-submit-lead:hover,
.btn-richiedi-preventivo:hover,
.btn-add-cart-emerald:hover {
  background-color: var(--sc-arancio-hover, #E0651F) !important;
  color: var(--sc-blu-scuro, #13334D) !important;
}

/* 5. BARRA PREZZO FISSA INFERIORE (STILE PERSIANE: BIANCO SU BLU SCURO, + IVA PICCOLO, RIGA UNICA, NESSUN RIQUADRO) */
.barra-fissa-scura,
.barra-mobile-fissa {
  background: var(--sc-blu-scuro, #13334D) !important;
}

.barra-mobile-toggle-btn {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  outline: none !important;
  color: inherit !important;
  cursor: pointer;
  display: inline-flex !important;
  align-items: baseline !important;
}

.barra-totale-box {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.barra-totale-valore,
.mobile-prezzo-cifra {
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 5px !important;
  white-space: nowrap !important;
  background: transparent !important;
  border: none !important;
  color: #FFFFFF !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

.barra-totale-valore #barraTotalPrice,
.barra-totale-valore > span:first-child,
.mobile-prezzo-cifra > span:first-child {
  color: #FFFFFF !important;
  font-size: 1.25rem !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}

/* «+ IVA» piccolo, senza alcun riquadro, tutto su una riga */
.barra-totale-valore .tax-badge,
.barra-totale-valore small,
.mobile-prezzo-cifra small {
  display: inline !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  color: #94a3b8 !important;
  white-space: nowrap !important;
  vertical-align: baseline !important;
  letter-spacing: 0 !important;
}

.barra-totale-valore .freccia-toggle {
  color: #a8c7fa !important;
  font-size: 0.75rem !important;
  margin-left: 2px !important;
  display: inline-block !important;
}

