/* Mister Sfuso Fedeltà: pagina del programma, area cliente, voce di menu.
   Usa i colori e i caratteri del tema Mister Sfuso; se il tema cambia,
   restano dei valori di riserva simili. */

.msf-pagina, .msf-account, .msf-bacheca, .msf-invito, .foot__fedelta {
  --msf-ink: var(--ink, #182838);
  --msf-ink-soft: var(--ink-soft, #2C3F52);
  --msf-mute: var(--ink-mute, #5E7185);
  --msf-petrol: var(--petrol, #007078);
  --msf-petrol-dark: var(--petrol-dark, #005A61);
  --msf-petrol-soft: var(--petrol-soft, #E3EFEF);
  --msf-base: var(--base, #F4F6F5);
  --msf-surface: var(--surface, #fff);
  --msf-sunk: var(--surface-sunk, #EDF1F0);
  --msf-line: var(--line, #DCE3E1);
  --msf-line-strong: var(--line-strong, #C3CECB);
  --msf-ok: var(--ok, #2F7D53);
  --msf-sale: var(--sale, #B4383A);
  --msf-titolo: var(--font-titolo, Georgia, serif);
  --msf-r: var(--r-lg, 10px);
  --msf-r-sm: var(--r-md, 6px);
}

.msf-pagina :is(ul, ol), .msf-account :is(ul, ol) { list-style: none; margin: 0; padding: 0; }
.msf-pagina li, .msf-account li, .msf-pagina li + li, .msf-account li + li { margin: 0; line-height: inherit; }
.msf-pagina h2, .msf-account h2 { margin: 0; }
.msf-gemma { display: inline-block; flex: none; vertical-align: middle; }

/* ---- Bottoni ---- */
.msf-bottone {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 20px; border: 1px solid var(--msf-petrol); border-radius: 999px;
  background: var(--msf-petrol); color: #fff; font: inherit; font-size: .875rem; font-weight: 500;
  line-height: 1.2; text-decoration: none; cursor: pointer;
  transition: background .14s, color .14s, border-color .14s;
}
.msf-bottone:hover { background: var(--msf-petrol-dark); border-color: var(--msf-petrol-dark); color: #fff; }
.msf-bottone[disabled] { background: var(--msf-sunk); border-color: var(--msf-line); color: var(--msf-mute); cursor: default; }
.msf-bottone--grande { padding: 16px 30px; font-size: 1rem; }
.msf-bottone--vuoto { background: transparent; color: inherit; border-color: currentColor; }
.msf-bottone--vuoto:hover { background: rgba(255,255,255,.1); border-color: currentColor; color: inherit; }
.msf-bottone--piccolo { padding: 8px 16px; font-size: .8125rem; margin-top: auto; align-self: flex-start; }

/* ---- La fidelity card ---- */
.msf-carta {
  --msf-colore: #6FB4D8;
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between;
  aspect-ratio: 1.586; width: 100%; max-width: 420px; padding: 22px 24px;
  border-radius: 14px; color: #fff;
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,.045) 0 1px, transparent 1px 9px),
    linear-gradient(135deg, var(--msf-ink) 0%, var(--msf-ink) 55%, color-mix(in srgb, var(--msf-colore) 45%, var(--msf-ink)) 100%);
  box-shadow: 0 2px 6px rgba(24,40,56,.12), 0 24px 44px -22px rgba(24,40,56,.55);
}
.msf-carta::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}
.msf-carta__simbolo {
  position: absolute; right: -6%; bottom: -14%; width: 46%; height: auto;
  color: #fff; opacity: .15; transform: rotate(-16deg); pointer-events: none;
}
.msf-carta > *:not(.msf-carta__simbolo) { position: relative; z-index: 1; }
.msf-carta__alto, .msf-carta__basso { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.msf-carta__marchio { font-family: var(--msf-titolo); font-size: 1.125rem; letter-spacing: -.01em; }
.msf-carta__tipo { font-size: .6875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .7; }
.msf-carta__centro { display: flex; align-items: center; gap: 14px; }
.msf-carta__livello { font-family: var(--msf-titolo); font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.1rem); font-weight: 400; letter-spacing: -.02em; line-height: 1; }
.msf-carta__livello--nessuno { font-size: 1.125rem; opacity: .85; }
.msf-carta__basso { font-size: .8125rem; opacity: .92; }
.msf-carta__basso b { font-size: 1.25rem; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---- Pagina pubblica ---- */
.msf-pagina { display: grid; gap: clamp(56px, 7vw, 96px); color: var(--msf-ink); }
.msf-pagina p { margin: 0; }

.msf-apertura {
  display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: clamp(28px, 5vw, 72px);
  padding: clamp(32px, 5vw, 72px); border-radius: var(--msf-r);
  background: var(--msf-ink); color: #fff;
}
.msf-occhiello { display: inline-flex; align-items: center; gap: 10px; font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.72); }
.msf-apertura__titolo {
  margin: 18px 0 0; font-family: var(--msf-titolo); font-weight: 400;
  font-size: clamp(2.3rem, 1.4rem + 3.4vw, 4rem); line-height: 1.04; letter-spacing: -.025em; color: #fff;
}
.msf-apertura__sotto { margin-top: 18px !important; max-width: 46ch; font-size: 1.125rem; line-height: 1.6; color: rgba(255,255,255,.78); }
.msf-apertura__bottoni { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.msf-apertura .msf-bottone:not(.msf-bottone--vuoto) { background: #fff; border-color: #fff; color: var(--msf-ink); }
.msf-apertura .msf-bottone:not(.msf-bottone--vuoto):hover { background: rgba(255,255,255,.88); }
.msf-apertura__visivo { display: flex; justify-content: center; }
.msf-apertura__visivo img { width: 100%; max-width: 480px; height: auto; border-radius: 14px; }
.msf-apertura .msf-carta { transform: rotate(-4deg); }

.msf-blocco { text-align: center; }
.msf-blocco > h2, .msf-amici h2 {
  font-family: var(--msf-titolo); font-weight: 400; font-size: clamp(1.9rem, 1.3rem + 2.2vw, 2.75rem);
  line-height: 1.1; letter-spacing: -.02em; color: var(--msf-ink);
}
.msf-blocco__sotto { max-width: 56ch; margin: 12px auto 0 !important; color: var(--msf-mute); font-size: 1.0625rem; line-height: 1.6; }

/* I tre passi */
.msf-passi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px !important; counter-reset: none; }
.msf-passo {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 34px 26px 30px; border: 1px solid var(--msf-line); border-radius: var(--msf-r);
  background: var(--msf-surface); text-align: center;
}
.msf-passo__n { position: absolute; top: 14px; left: 18px; font-size: .75rem; font-weight: 700; letter-spacing: .08em; color: var(--msf-mute); font-variant-numeric: tabular-nums; }
.msf-passo__icona { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: var(--msf-petrol-soft); color: var(--msf-petrol); }
.msf-passo__icona svg { width: 28px; height: 28px; }
.msf-passo__t { margin-top: 6px; font-size: 1.125rem; font-weight: 600; color: var(--msf-ink); }
.msf-passo__s { color: var(--msf-mute); line-height: 1.55; }
.msf-passo__regola { margin-top: 6px; padding: 8px 16px; border-radius: 999px; background: var(--msf-ink); color: #fff; font-size: .9375rem; font-weight: 700; }

/* Livelli */
.msf-livelli { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 20px; margin-top: 40px !important; }
.msf-livello {
  --msf-colore: #6FB4D8;
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 32px 22px 28px; border: 1px solid var(--msf-line); border-top: 4px solid var(--msf-colore);
  border-radius: var(--msf-r); background: var(--msf-surface); text-align: center;
}
.msf-livello .msf-gemma { margin-bottom: 6px; filter: drop-shadow(0 6px 10px color-mix(in srgb, var(--msf-colore) 35%, transparent)); }
.msf-livello__nome { font-family: var(--msf-titolo); font-size: 1.625rem; line-height: 1.1; letter-spacing: -.015em; color: var(--msf-ink); }
.msf-livello__testo { color: var(--msf-mute); font-size: .9375rem; line-height: 1.5; }
.msf-livello__tuo, .msf-livello__mancano {
  margin-top: 8px; padding: 5px 12px; border-radius: 999px; font-size: .75rem; font-weight: 700; letter-spacing: .04em;
}
.msf-livello__tuo { background: var(--msf-colore); color: #fff; }
.msf-livello__mancano { background: var(--msf-sunk); color: var(--msf-ink-soft); }
.msf-livello.is-mio { box-shadow: 0 0 0 2px var(--msf-colore); border-color: transparent; border-top-color: var(--msf-colore); }
.msf-livello.is-raggiunto:not(.is-mio)::after {
  content: ""; position: absolute; top: 14px; right: 14px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--msf-ok) url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / 13px no-repeat;
}

/* Come guadagnare */
.msf-modi { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; margin-top: 40px !important; text-align: left; }
.msf-modo {
  display: flex; flex-direction: column; gap: 8px; min-height: 100%;
  padding: 28px 26px; border-radius: var(--msf-r); background: var(--msf-sunk);
}
.msf-modo__icona { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 6px; border-radius: 12px; background: var(--msf-surface); color: var(--msf-petrol); }
.msf-modo__icona svg { width: 24px; height: 24px; }
.msf-modo b { font-size: 1.125rem; font-weight: 600; color: var(--msf-ink); }
.msf-modo > span:not(.msf-modo__icona) { color: var(--msf-ink-soft); line-height: 1.5; margin-bottom: 14px; }

/* Premi: coupon a forma di biglietto */
.msf-premi { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; margin-top: 36px !important; }
.msf-premio {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 24px 14px 20px; border: 1.5px dashed var(--msf-line-strong); border-radius: var(--msf-r);
  background: var(--msf-surface); text-align: center;
}
.msf-premio::before, .msf-premio::after {
  content: ""; position: absolute; top: 50%; width: 16px; height: 16px; margin-top: -8px; border-radius: 50%;
  background: var(--msf-base); border: 1.5px dashed var(--msf-line-strong);
}
.msf-premio::before { left: -9px; clip-path: inset(0 0 0 50%); }
.msf-premio::after { right: -9px; clip-path: inset(0 50% 0 0); }
.msf-premio__etichetta { font-size: .6875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--msf-mute); }
.msf-premio__sconto { font-family: var(--msf-titolo); font-size: 2.25rem; line-height: 1.05; letter-spacing: -.02em; color: var(--msf-petrol); }
.msf-premio__punti { font-size: .9375rem; font-weight: 600; color: var(--msf-ink); }
.msf-premio form { margin-top: 12px; width: 100%; }
.msf-premio form .msf-bottone { width: 100%; padding-inline: 10px; }
.msf-premio.is-disponibile { border-style: solid; border-color: var(--msf-petrol); }
.msf-premio.is-disponibile::before, .msf-premio.is-disponibile::after { border-style: solid; border-color: var(--msf-petrol); }

/* Codice amico */
.msf-amici {
  display: grid; grid-template-columns: 1fr; gap: clamp(24px, 4vw, 56px); align-items: center;
  padding: clamp(32px, 5vw, 64px); border-radius: var(--msf-r); background: var(--msf-petrol); color: #fff;
}
.msf-amici--foto { grid-template-columns: 1.1fr .9fr; }
.msf-amici h2 { color: #fff; }
.msf-amici__testo p { margin-top: 16px !important; max-width: 60ch; font-size: 1.0625rem; line-height: 1.65; color: rgba(255,255,255,.88); }
.msf-amici__foto img { width: 100%; height: auto; border-radius: var(--msf-r); }

.msf-codice { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; }
.msf-codice code {
  padding: 12px 18px; border: 1.5px dashed var(--msf-petrol); border-radius: var(--msf-r-sm);
  background: var(--msf-surface); color: var(--msf-ink); font-family: inherit; font-size: 1.125rem; font-weight: 700; letter-spacing: .08em;
}
.msf-codice--scuro code { border-color: rgba(255,255,255,.6); background: rgba(255,255,255,.08); color: #fff; }
.msf-copia, .msf-whatsapp {
  display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; border-radius: 999px;
  border: 1px solid var(--msf-line-strong); background: var(--msf-surface); color: var(--msf-ink);
  font: inherit; font-size: .8125rem; font-weight: 500; text-decoration: none; cursor: pointer;
}
.msf-copia:hover { border-color: var(--msf-ink); }
.msf-copia.is-copiato { border-color: var(--msf-ok); color: var(--msf-ok); }
.msf-codice--scuro .msf-copia { background: #fff; border-color: #fff; }
.msf-whatsapp { background: #1E9E57; border-color: #1E9E57; color: #fff; }
.msf-whatsapp:hover { background: #178248; color: #fff; }

/* ---- Area cliente ---- */
.msf-account { display: grid; gap: 40px; color: var(--msf-ink); }
.msf-account p { margin: 0; }
.msf-account > .msf-carta { max-width: 400px; }
.msf-progresso { display: grid; gap: 12px; }
.msf-progresso__testo { font-size: 1.0625rem; }
.msf-progresso__nota { color: var(--msf-mute); font-size: .875rem; }
.msf-barra { height: 10px; border-radius: 999px; background: var(--msf-sunk); overflow: hidden; }
.msf-barra span { display: block; height: 100%; border-radius: inherit; background: var(--msf-petrol); transition: width .5s; }
.msf-account .msf-livelli { margin-top: 12px !important; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; }
.msf-account .msf-livello { padding: 24px 16px 20px; }
.msf-account .msf-livello__nome { font-size: 1.375rem; }

.msf-sezione { display: grid; gap: 10px; padding-top: 32px; border-top: 1px solid var(--msf-line); }
.woocommerce .msf-account h2 { margin: 0; }
.msf-account .msf-sezione h2 { font-family: var(--msf-titolo); font-weight: 400; font-size: 1.625rem; letter-spacing: -.015em; }
.msf-sezione__sotto { color: var(--msf-mute); line-height: 1.55; }
.msf-sezione__nota { color: var(--msf-ok); font-weight: 500; font-size: .9375rem; }
.msf-account .msf-premi { margin-top: 10px !important; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.msf-account .msf-premio::before, .msf-account .msf-premio::after { background: var(--msf-base); }

.msf-coupon { display: grid; gap: 10px; }
.msf-coupon__voce {
  display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 14px;
  padding: 14px 16px; border: 1px solid var(--msf-line); border-radius: var(--msf-r-sm); background: var(--msf-surface);
}
.msf-coupon__sconto { font-family: var(--msf-titolo); font-size: 1.5rem; color: var(--msf-petrol); min-width: 3.2em; }
.msf-coupon__codice { font-family: inherit; font-weight: 700; letter-spacing: .06em; background: none; padding: 0; }
.msf-coupon__stato { font-size: .8125rem; color: var(--msf-mute); }
.msf-coupon__voce.is-usato, .msf-coupon__voce.is-scaduto { opacity: .55; }
.msf-coupon__voce.is-usato .msf-coupon__codice, .msf-coupon__voce.is-scaduto .msf-coupon__codice { text-decoration: line-through; }

.msf-compleanno { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-top: 6px; }
.msf-compleanno label { display: grid; gap: 4px; font-size: .8125rem; color: var(--msf-mute); }
.msf-compleanno select {
  min-width: 120px; padding: 10px 14px; border: 1px solid var(--msf-line-strong); border-radius: var(--msf-r-sm);
  background: var(--msf-surface); color: var(--msf-ink); font: inherit; font-size: .9375rem;
}

.msf-account table.msf-movimenti { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.msf-account table.msf-movimenti td { padding: 12px 8px; border: 0; border-bottom: 1px solid var(--msf-line); vertical-align: top; text-align: left; background: none; }
.msf-movimenti td span { display: block; color: var(--msf-mute); font-size: .8125rem; }
.msf-account table.msf-movimenti .msf-movimenti__data { width: 7.5em; color: var(--msf-mute); white-space: nowrap; }
.msf-account table.msf-movimenti .msf-movimenti__punti { text-align: right; font-weight: 700; color: var(--msf-ok); white-space: nowrap; font-variant-numeric: tabular-nums; }
.msf-account table.msf-movimenti .msf-movimenti__punti.is-meno { color: var(--msf-sale); }
.msf-regole a { font-size: .9375rem; }

/* Riquadro nella bacheca dell'account */
.msf-bacheca {
  --msf-colore: #6FB4D8;
  display: flex; align-items: center; gap: 16px; margin-bottom: 28px; padding: 18px 20px;
  border: 1px solid var(--msf-line); border-left: 4px solid var(--msf-colore); border-radius: var(--msf-r-sm);
  background: var(--msf-surface); color: var(--msf-ink); text-decoration: none;
}
.msf-bacheca:hover { border-color: var(--msf-ink); border-left-color: var(--msf-colore); color: var(--msf-ink); }
.msf-bacheca__testo { display: grid; gap: 2px; flex: 1; }
.msf-bacheca__testo b { font-weight: 600; }
.msf-bacheca__testo span { color: var(--msf-mute); font-size: .875rem; }
.msf-bacheca__vai { font-size: 1.25rem; color: var(--msf-petrol); }

.msf-ancora { display: block; scroll-margin-top: 160px; }
.msf-invito { margin-top: 14px; padding: 12px 14px; border-radius: var(--msf-r-sm); background: var(--msf-petrol-soft); color: var(--msf-petrol-dark); font-size: .875rem; }

/* La gemma della voce di menu sta in fedelta-voce.css, scritta in ogni pagina. */

/* ---- Schermi medi e piccoli ---- */
@media (max-width: 900px) {
  .msf-apertura, .msf-amici--foto { grid-template-columns: 1fr; }
  .msf-apertura__visivo { order: -1; }
  .msf-apertura .msf-carta { max-width: 360px; transform: rotate(-3deg); }
  .msf-passi { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto !important; }
}
@media (max-width: 600px) {
  .msf-apertura { padding: 28px 20px 32px; margin-inline: calc(var(--gutter, 20px) * -1); border-radius: 0; }
  .msf-apertura__bottoni .msf-bottone { width: 100%; }
  .msf-amici { margin-inline: calc(var(--gutter, 20px) * -1); border-radius: 0; padding: 36px 20px; }
  .msf-carta { padding: 16px 18px; }
  .msf-carta__livello { font-size: 1.5rem; }
  .msf-premi { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .msf-account .msf-premi { grid-template-columns: repeat(2, 1fr); }
  .msf-premio { padding: 20px 10px 16px; }
  .msf-premi--vetrina .msf-premio:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .msf-premio__sconto { font-size: 1.875rem; }
  .msf-coupon__voce { grid-template-columns: auto 1fr; row-gap: 6px; }
  .msf-coupon__stato { grid-column: 1 / -1; }
  .msf-coupon__voce .msf-copia { grid-column: 1 / -1; justify-content: center; }
  .msf-codice code { width: 100%; text-align: center; }
  .msf-codice .msf-copia, .msf-codice .msf-whatsapp { flex: 1 1 auto; justify-content: center; }
  .msf-account .msf-livelli { grid-template-columns: 1fr; }
  .msf-account .msf-livello { flex-direction: row; flex-wrap: wrap; text-align: left; padding: 16px; column-gap: 14px; }
  .msf-account .msf-livello .msf-gemma { margin: 0; width: 38px; height: 38px; }
  .msf-account .msf-livello__nome { font-size: 1.25rem; }
  .msf-account .msf-livello__testo { flex-basis: 100%; }
  .msf-account .msf-livello__tuo, .msf-account .msf-livello__mancano { margin-top: 0; margin-left: auto; }
}