/* =============================================================
   SISA Sicilia — skin per il portale Sorrisi Card (sisasicilia.promoshops.it)

   Foglio AGGIUNTIVO: va caricato DOPO tutti i CSS del portale
   (colore.css, custom2.css, ...). Allinea al sito sisasiciliaspa.it
   testata, menu, piede, fascia "Benvenuto", card della home, bottoni e
   font. Valori 1:1 dal design system del sito.
   Il piede a colonne richiede anche il blocco footer-snippet.html.

   Font: inter-latin.woff2 va messo NELLA STESSA CARTELLA di questo file
   (servito dal portale stesso: nessuna chiamata a servizi esterni).
   ============================================================= */

@font-face {
  font-family: 'Inter';
  src: url('inter-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --sisa-green-500: #1FAF6F;  /* verde brand (superfici, accenti) */
  --sisa-green-700: #117A47;  /* verde testo/CTA, contrasto AA su bianco */
  --sisa-green-800: #0D6539;
  --sisa-bg-soft:   #EDEDED;
  --sisa-bg-card:   #F4F4F4;
  --sisa-line-soft: #E8E8E8;
  --sisa-ink:       #2F2F2F;
  --sisa-ink-muted: #6E6E6E;
  --sisa-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ---------- Font ---------- */
body {
  font-family: var(--sisa-font);
  color: var(--sisa-ink);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6,
.btn, input, select, textarea, button {
  font-family: var(--sisa-font);
}

/* =============================================================
   TESTATA — bianca e pulita (niente sfondo a trama, niente ombra)
   ============================================================= */
.header .bottom {
  background: #fff;
  box-shadow: none;
}
.header .bottom .container > div:first-child {
  padding: 18px 0;
}
.header .bottom img[src*="logo"] {
  display: block;
  width: auto;
  height: 60px;
}

/* ---------- Menu: barra grigio chiaro, voci Title Case ---------- */
nav.navigation {
  background: var(--sisa-bg-card);
  border-top: 1px solid var(--sisa-line-soft);
  box-shadow: none;
}
.main-menu > li > a {
  padding: 18px 28px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.55;
  color: var(--sisa-ink);
  text-transform: capitalize;
  transition: background-color .15s ease, color .15s ease;
}
.main-menu > li:first-child > a {
  padding-left: 0;
}
.main-menu > li:hover > a,
.main-menu > li > a:hover {
  color: var(--sisa-green-700);
  background: none;
  font-weight: 600;
}
/* Voce attiva = blocco verde pieno, come sul sito */
.main-menu > li > a.active,
.main-menu > li:hover > a.active {
  background: var(--sisa-green-500);
  color: #fff;
  font-weight: 600;
  padding-left: 28px;
}
.main-menu > li > a.active:hover {
  background: var(--sisa-green-700);
}
/* "Esci": il portale lo forza a #118229 con !important inline */
.main-menu > li > a.login {
  color: var(--sisa-green-700) !important;
}
.main-menu > li > a.login:hover {
  color: var(--sisa-green-800) !important;
}
/* Sottomenu: bordo superiore nel nostro verde al posto del lime */
.main-menu li ul {
  border-top-color: var(--sisa-green-500);
}
.main-menu li ul li:hover > a {
  background-color: var(--sisa-green-500);
}
.main-menu > li > a:focus-visible,
.header a:focus-visible {
  outline: 2px solid var(--sisa-green-700);
  outline-offset: 2px;
}

/* Menu mobile del portale (nome utente / area personale / esci) */
.menu-mobile a {
  color: var(--sisa-green-700);
  text-decoration: none;
  text-transform: capitalize;
  font-weight: 600;
}
/* Pulsante "Menu" (sotto i 979px): era lime squadrato */
@media only screen and (max-width: 979px) {
  .main-menu-button {
    background-color: var(--sisa-green-500) !important;
    border-radius: 999px;
    font-weight: 700;
    padding: 12px 22px;
  }
  .main-menu-button:hover,
  .main-menu-button:focus,
  .main-menu-button:active {
    background-color: var(--sisa-green-700) !important;
  }
}
@media (max-width: 767px) {
  .header .bottom .container {
    padding-bottom: 0;
  }
  .header .bottom .container > div:first-child {
    padding: 14px 0;
  }
  .header .bottom img[src*="logo"] {
    height: 52px;
  }
}

/* ---------- Link nel contenuto: dal lime al verde del sito ---------- */
a {
  color: var(--sisa-green-700);
}
a:hover,
a:focus {
  color: var(--sisa-green-800);
}

/* =============================================================
   PIEDE — replica del footer del sito (blocco HTML footer-snippet.html,
   inserito subito prima di .credits) + riga finale .credits del portale
   ============================================================= */
.sisa-footer {
  background: var(--sisa-bg-soft);
  border-top: 1px solid var(--sisa-line-soft);
  padding: 56px 0 0;
  margin-top: 40px;
  color: var(--sisa-ink);
  font-size: 14px;
  line-height: 1.55;
}
.sisa-footer .sf-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr;
  gap: 36px;
}
.sisa-footer .sf-logo img {
  display: block;
  width: auto;
  height: 56px;
}
.sisa-footer .sf-addr {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.55;
  font-style: normal;
  color: var(--sisa-ink);
}
.sisa-footer .sf-addr-link {
  color: var(--sisa-ink);
  font-weight: 600;
}
.sisa-footer .sf-heading {
  margin: 0 0 14px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  color: #1A1A1A;
  text-transform: none;
}
.sisa-footer .sf-heading-spaced {
  margin-top: 28px;
}
.sisa-footer .sf-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.sisa-footer .sf-list li {
  padding: 4px 0;
  font-size: 14px;
}
.sisa-footer a {
  color: var(--sisa-ink);
  text-decoration: none;
  transition: color .15s ease;
}
.sisa-footer .sf-list a:hover,
.sisa-footer .sf-addr-link:hover {
  color: var(--sisa-green-500);
}
.sisa-footer .sf-socials {
  display: flex;
  gap: 12px;
}
.sisa-footer .sf-socials a {
  display: inline-flex;
  color: var(--sisa-green-500);
}
.sisa-footer .sf-socials a:hover {
  color: var(--sisa-green-700);
}
.sisa-footer .sf-help {
  display: inline-block;
  padding: 4px 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--sisa-green-500);
}
.sisa-footer .sf-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}
.sisa-footer .sf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--sisa-green-500);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color .15s ease;
}
.sisa-footer .sf-btn:hover,
.sisa-footer .sf-btn:focus {
  background: var(--sisa-green-700);
  color: #fff;
}
.sisa-footer a:focus-visible {
  outline: 2px solid var(--sisa-green-700);
  outline-offset: 2px;
}
@media (max-width: 767px) {
  .sisa-footer {
    padding-top: 32px;
  }
  .sisa-footer .sf-grid {
    grid-template-columns: 1fr 1fr;
    gap: 20px 24px;
  }
}

/* Riga finale (copyright PromoShops + link legali: restano i loro, sono
   loro i titolari dei dati). Se c'è il blocco sopra, prosegue la stessa
   fascia grigia con un filetto, come la riga in fondo al footer del sito. */
.credits {
  background: var(--sisa-bg-soft);
  border-top: 1px solid var(--sisa-line-soft);
  padding: 20px 0;
  color: var(--sisa-ink-muted);
  font-size: 12px;
  line-height: 1.6;
}
/* Col blocco sopra: niente filetto a tutta pagina, il filetto sta sulla
   riga di testo (largo quanto il contenuto), come nel footer del sito */
.sisa-footer {
  padding-bottom: 40px;
}
.sisa-footer + .credits {
  border-top: 0;
  padding-top: 0;
}
.sisa-footer + .credits .span8 {
  border-top: 1px solid var(--sisa-line-soft);
  padding-top: 20px;
}
/* La colonna Bootstrap (span8) stringeva la riga e mandava a capo i link */
.credits .span8 {
  width: auto;
  float: none;
}
.credits strong {
  font-weight: 600;
}
.credits a {
  color: var(--sisa-ink-muted);
}
.credits a:hover {
  color: var(--sisa-green-500);
}

/* =============================================================
   BOTTONI — pill, niente gradienti/ombre Bootstrap 2.
   Hover: cambio di tono, mai spostamenti o ombre.
   ============================================================= */
.btn {
  border-radius: 999px;
  border: 0;
  background-image: none;
  text-shadow: none;
  box-shadow: none;
  font-weight: 700;
  letter-spacing: .02em;
  padding: 10px 22px;
  transition: background-color .15s ease, color .15s ease;
}
/* btn-alizarin (rosso, es. "Cerca") → CTA verde: nel sistema SISA
   le azioni primarie sono sempre verdi, il rosso è solo del logotipo */
.btn-primary,
.btn-searchhome,
.btn-alizarin {
  background-color: var(--sisa-green-700);
  color: #fff;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-searchhome:hover,
.btn-alizarin:hover,
.btn-alizarin:focus,
.btn-alizarin:active {
  background-color: var(--sisa-green-800);
  color: #fff;
}
.btn:focus-visible {
  outline: 2px solid var(--sisa-green-700);
  outline-offset: 3px;
}

/* =============================================================
   FASCIA "BENVENUTO / I TUOI PUNTI" (.span12a)
   Righe verticali come l'originale (sf_span12a.jpg, lime 19px/19px),
   rifatte nei due verdi più scuri della palette: sul lime il testo
   bianco non reggeva. Presente su home, estratto conto, profilo, contatti.
   ============================================================= */
.span12a {
  background-color: var(--sisa-green-500);
  background-image: repeating-linear-gradient(
    90deg,
    #1FAF6F 0 19px,
    #1AA064 19px 38px   /* a metà tra green-500 e green-600: bicolore tenue come l'originale */
  );
  border-radius: 16px;
}
/* "I TUOI PUNTI" è verde scuro inline (color:#063): illeggibile sulle righe */
.span12a h3,
.span12a h3 strong {
  color: #fff !important;
}
/* Saldo punti: ombra nera inline pesante → ombra leggera per la leggibilità */
.span12a h1 {
  color: #fff;
  text-shadow: 0 2px 6px rgba(0, 0, 0, .25) !important;
}
/* Foto: via la cornice tratteggiata del portale */
.img-rounded,
.span12a img {
  border: 0;
  border-radius: 10px;
}
/* Bottoni sulla fascia colorata: pillola bianca, testo verde */
.span12a .btn.btn-primary {
  background-color: #fff;
  color: var(--sisa-green-700);
}
.span12a .btn.btn-primary:hover,
.span12a .btn.btn-primary:focus {
  background-color: #E6F6EE;
  color: var(--sisa-green-800);
}
.span12a .btn:focus-visible {
  outline-color: #fff;
}

/* =============================================================
   CARD DELLA HOME (Reclamo punti / Buoni spesa / Fidelity card)
   Da blocchi verde pieno a card bianche piatte, come quelle del sito:
   niente ombra, angoli morbidi, titolo scuro, bottoni verdi standard.
   ============================================================= */
.box.highlight {
  background: #fff;
  box-shadow: none;
  border-radius: 16px;
  padding: 24px;
}
.box.highlight .hgroup.title {
  margin: 0;
  padding: 0;
  background: none;
  border-bottom: 0;
}
/* I titoli arrivano in MAIUSCOLO nell'HTML: li portiamo in sentence case */
.box.highlight .hgroup.title h3 {
  color: #1A1A1A;
  font-size: 20px !important;
  font-weight: 700;
  line-height: 1.3;
  text-transform: lowercase;
}
.box.highlight .hgroup.title h3::first-letter {
  text-transform: uppercase;
}
.box.highlight .box-content.highlight {
  background: transparent;
  color: var(--sisa-ink);
  margin: 16px 0 0;
  padding: 0;
}
.box.highlight .box-content.highlight img:not([alt*="Disponibile"]) {
  border-radius: 10px;
}
.box.highlight .box-content.highlight h3 {
  color: #1A1A1A;
  font-size: 18px;
  font-weight: 700;
}
.box.highlight .box-content.highlight h6 {
  color: var(--sisa-ink-muted);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  margin: 0 0 6px;
}
/* Mobile: card impilate con uno stacco, e senza l'altezza minima di 400px
   che il portale impone (serve solo ad allinearle affiancate su desktop) */
@media (max-width: 767px) {
  .box.highlight {
    margin-bottom: 16px;
  }
  .box .box-content.highlight {
    min-height: 0 !important;
  }
}