/* ============================================================================
   Programma di affiliazione — pagina pubblica
   ============================================================================
   Si appoggia a about.css per l'impianto (.story-hero, .story-eyebrow,
   .story-h2, .story-body, .home-section). Qui stanno solo i pezzi che non
   esistevano: i numeri, i passi, le domande, il riquadro della richiesta.

   Nessun colore scritto a mano: tutto da variabili, cosi' la pagina segue il
   tema come il resto del sito invece di diventare l'unica che non lo fa.
   ========================================================================== */

/* ── Titoli: misurati, non da copertina ──────────────────────────────────────
   about.css dimensiona .story-title per una pagina narrativa, dove il titolo
   e' l'immagine. Qui il titolo e' un'intestazione di documento: la stessa
   scala farebbe sembrare una pagina di condizioni commerciali l'annuncio di un
   lancio. Si riduce il corpo e si toglie il corsivo enfatico. */
.aff .aff-title    { font-size: clamp(30px, 5vw, 46px); line-height: 1.12;
                     letter-spacing: -.015em; }
.aff .story-lead   { max-width: 62ch; margin-left: auto; margin-right: auto; }
.aff .aff-h2       { font-size: clamp(21px, 3vw, 28px); }

/* ── Invito sotto l'hero ─────────────────────────────────────────────────── */
.aff-hero-cta      { margin-top: 28px; display: flex; flex-direction: column;
                     align-items: center; gap: 10px; }
.aff-hero-note     { font-size: 12.5px; color: var(--ink40); }

/* ── I numeri ────────────────────────────────────────────────────────────── */
.aff-numbers       { display: grid; gap: 18px; margin-top: 30px;
                     grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.aff-num           { padding: 22px 20px; border-radius: 14px;
                     background: var(--bg2); border: 1px solid var(--ink08); }
.aff-num__v        { font-size: 34px; font-weight: 700; line-height: 1.05;
                     color: var(--gold); letter-spacing: -.02em; }
.aff-num__l        { margin-top: 6px; font-size: 13px; font-weight: 600;
                     color: var(--ink); }
.aff-num__b        { margin: 8px 0 0; font-size: 12.5px; line-height: 1.6;
                     color: var(--ink60); }

/* ── Come funziona, in tre passaggi ───────────────────────────────────────
   Tre schede affiancate, non l'elenco numerato di .aff-steps piu' sotto:
   quello descrive la procedura, questo il meccanismo, e due elenchi identici
   sulla stessa pagina sembrerebbero la stessa cosa scritta due volte.
   Stessa griglia di .aff-numbers, cosi' le due sezioni in alto respirano
   allo stesso modo e su telefono si impilano insieme. */
.aff-how           { list-style: none; margin: 30px 0 0; padding: 0;
                     display: grid; gap: 18px;
                     grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.aff-how__card     { padding: 22px 20px; border-radius: 14px;
                     background: var(--bg2); border: 1px solid var(--ink08); }
.aff-how__n        { display: flex; align-items: center; justify-content: center;
                     width: 30px; height: 30px; border-radius: 50%;
                     font-size: 13.5px; font-weight: 700; color: var(--gold);
                     background: var(--gold-bg, rgba(181,144,58,.12));
                     border: 1px solid var(--ink08); }
.aff-how__t        { margin: 13px 0 6px; font-size: 15px; font-weight: 600;
                     color: var(--ink); }
.aff-how__b        { margin: 0; font-size: 13px; line-height: 1.65;
                     color: var(--ink60); }

/* ── Lo schema del percorso ───────────────────────────────────────────────
   L'illustrazione ha un fondo chiaro e il tema predefinito del sito e' scuro
   e caldo: appoggiata nuda sulla pagina sarebbe una lastra fredda che ci
   cade dentro. Il bordo sottile e gli angoli arrotondati la chiudono in una
   forma voluta, la stessa delle altre schede (.aff-doc, .aff-num), e il
   risultato regge anche a tema chiaro senza una riga in piu'.

   display:block sull'immagine toglie i tre pixel di spazio che il browser
   lascia sotto un elemento in linea, e che qui si vedrebbero come una fuga
   fra l'immagine e il suo bordo. */
.aff-flow          { margin: 30px 0 0; }
.aff-flow__box     { border-radius: 14px; border: 1px solid var(--ink08);
                     overflow: hidden; }
.aff-flow__box img { display: block; width: 100%; height: auto; }
.aff-flow__cap     { margin: 11px 2px 0; font-size: 12.5px; line-height: 1.6;
                     color: var(--ink40); text-align: center; }

/* ── I passi ─────────────────────────────────────────────────────────────── */
.aff-steps         { list-style: none; margin: 30px 0 0; padding: 0;
                     display: flex; flex-direction: column; gap: 20px; }
.aff-step          { display: flex; gap: 16px; align-items: flex-start; }
.aff-step__n       { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%;
                     display: flex; align-items: center; justify-content: center;
                     font-size: 14px; font-weight: 700;
                     color: var(--gold); background: var(--gold-bg, rgba(181,144,58,.12));
                     border: 1px solid var(--ink08); }
.aff-step__t       { margin: 4px 0 4px; font-size: 15.5px; font-weight: 600; }
.aff-step__b       { margin: 0; font-size: 13.5px; line-height: 1.65; color: var(--ink60); }

/* ── Nota fiscale: visibile, ma non urlata ───────────────────────────────── */
.aff-fiscal        { font-size: 12.5px !important; color: var(--ink40) !important;
                     border-left: 2px solid var(--ink08); padding-left: 14px; }

/* ── Domande ─────────────────────────────────────────────────────────────── */
.aff-faq           { margin-top: 26px; display: flex; flex-direction: column; gap: 10px; }
.aff-faq__item     { border: 1px solid var(--ink08); border-radius: 12px;
                     background: var(--bg2); overflow: hidden; }
.aff-faq__item > summary {
                     cursor: pointer; padding: 15px 18px; font-size: 14.5px;
                     font-weight: 600; list-style: none; }
.aff-faq__item > summary::-webkit-details-marker { display: none; }
.aff-faq__item > summary::after {
                     content: '+'; float: right; color: var(--gold);
                     font-weight: 400; font-size: 18px; line-height: 1; }
.aff-faq__item[open] > summary::after { content: '\2212'; }
.aff-faq__item > p { margin: 0; padding: 0 18px 16px; font-size: 13.5px;
                     line-height: 1.7; color: var(--ink60); }

/* ── Riquadro della richiesta ────────────────────────────────────────────── */
.aff-box           { padding: 28px; border-radius: 16px; background: var(--bg2);
                     border: 1px solid var(--ink08); }
.aff-box--ok       { border-left: 3px solid var(--ok, #5fa86a); }
.aff-box--wait     { border-left: 3px solid var(--amber, #d6a13a); }
.aff-box--quiet    { border-left: 3px solid var(--ink08); }
.aff-box__t        { margin: 0 0 8px; font-size: 19px; font-weight: 600; }
.aff-box__b        { margin: 0; font-size: 14px; line-height: 1.7; color: var(--ink60); }
.aff-box__actions  { margin-top: 20px; display: flex; gap: 10px; flex-wrap: wrap; }
.aff-box__link     { display: inline-block; margin-top: 14px; padding: 9px 14px;
                     border-radius: 9px; background: var(--bg); font-size: 13px;
                     color: var(--gold); word-break: break-all; }

/* ── Form ────────────────────────────────────────────────────────────────── */
.aff-form          { margin-top: 22px; display: flex; flex-direction: column; gap: 18px; }
.aff-field         { display: block; }
.aff-field__l      { display: block; margin-bottom: 6px; font-size: 13px;
                     font-weight: 600; color: var(--ink); }
.aff-field__h      { display: block; margin-top: 5px; font-size: 11.5px; color: var(--ink40); }
.aff-field .form-input { width: 100%; }
.aff-field textarea.form-input { resize: vertical; min-height: 96px; }

.aff-err           { display: block; margin-top: 5px; font-size: 11.5px;
                     color: var(--error, #c83c3c); }
.aff-err--box      { margin: 16px 0 0; padding: 11px 14px; border-radius: 9px;
                     background: var(--terra-bg); font-size: 13px; }
.form-input.is-error { border-color: var(--error, #c83c3c); }

.aff-form__terms   { margin: 0; font-size: 12px; line-height: 1.6; color: var(--ink40); }
.aff-form__terms a { color: var(--gold); }

/* ── Schermi stretti ─────────────────────────────────────────────────────── */
@media (max-width: 560px) {
  .aff-num__v  { font-size: 29px; }
  .aff-box     { padding: 22px 18px; }
  .aff-step    { gap: 13px; }
  /* ── PERCHE' SU TELEFONO SCORRE ────────────────────────────────────────
     A tutta larghezza su una colonna di ~350px lo schema sarebbe alto 181px,
     e le diciture piu' piccole ("Applied automatically via your link",
     "FROM SAME USER") diventano illeggibili.

     Di solito non sarebbe un problema: si allarga con due dita. Qui no — il
     layout dichiara `user-scalable=no, maximum-scale=1.0`
     (views/layout/base.php), quindi su telefono NON esiste alcun modo di
     ingrandire. Senza questo blocco quella parte del disegno sarebbe
     semplicemente perduta per chi arriva dal telefono, che su questa pagina
     e' la maggioranza.

     300px di altezza: lo schema diventa largo ~580 e scorre per davvero,
     con le scritte a una misura leggibile. Il bordo sta sulla CORNICE e non
     sull'immagine, altrimenti scorrerebbe via insieme a lei e il lato destro
     resterebbe scoperto. La scheda tagliata sul bordo destro e' l'indizio
     che c'e' altro da vedere. */
  .aff-flow__box     { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .aff-flow__box img { width: auto; height: 300px; max-width: none; }
  .aff-flow__cap     { text-align: left; }
}

/* ════════════════════════════════════════════════════════════════════════════
   PANNELLO DELL'AFFILIATO
   ════════════════════════════════════════════════════════════════════════════ */

.aff-dash              { padding: 36px 0 72px; }
.aff-dash__head        { display: flex; flex-wrap: wrap; gap: 16px; align-items: center;
                         justify-content: space-between; margin-bottom: 26px; }
.aff-dash__title       { font-size: 25px; font-weight: 600; margin: 0; }

/* ── Link, con il pulsante di copia ──────────────────────────────────────── */
.aff-linkbox           { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
                         padding: 10px 14px; border-radius: 11px;
                         background: var(--bg2); border: 1px solid var(--ink08); }
.aff-linkbox__l        { font-size: 11px; color: var(--ink40); text-transform: uppercase;
                         letter-spacing: .08em; }
.aff-linkbox__v        { font-size: 13.5px; color: var(--gold); word-break: break-all; }

/* ── I numeri in testa ───────────────────────────────────────────────────── */
.aff-kpis              { display: grid; gap: 12px; margin-bottom: 22px;
                         grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); }
.aff-kpi               { padding: 16px 18px; border-radius: 12px;
                         background: var(--bg2); border: 1px solid var(--ink08); }
.aff-kpi__v            { font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.aff-kpi__l            { margin-top: 3px; font-size: 11.5px; color: var(--ink40); }

/* ── Riquadri ────────────────────────────────────────────────────────────── */
.aff-card              { padding: 22px; margin-bottom: 18px; border-radius: 14px;
                         background: var(--bg2); border: 1px solid var(--ink08); }
.aff-card__head        { display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px; }
.aff-card__t           { margin: 0; font-size: 16px; font-weight: 600; }
.aff-card__t3          { margin: 26px 0 12px; font-size: 13.5px; font-weight: 600; color: var(--ink60); }
.aff-card__sub         { margin-left: auto; font-size: 11.5px; color: var(--ink40); }
.aff-empty             { margin: 0; font-size: 13px; color: var(--ink40); }
.aff-note              { margin: 14px 0 0; font-size: 11.5px; line-height: 1.6; color: var(--ink40); }

/* ── Grafico delle visite ─────────────────────────────────────────────────
   Barre in CSS puro: trenta valori non giustificano una libreria da 60 KB, e
   una libreria caricata da CDN sarebbe anche bloccata dalla CSP del sito. */
.aff-chart             { display: flex; align-items: flex-end; gap: 3px; height: 128px;
                         padding-top: 8px; }
.aff-chart__col        { flex: 1 1 0; height: 100%; display: flex; align-items: flex-end; }
.aff-chart__bar        { width: 100%; border-radius: 3px 3px 0 0;
                         background: var(--gold); opacity: .78;
                         transition: opacity .15s linear; }
.aff-chart__col:hover .aff-chart__bar { opacity: 1; }

/* ── Prelievo ────────────────────────────────────────────────────────────── */
.aff-payout            { display: flex; flex-wrap: wrap; gap: 20px; align-items: center;
                         justify-content: space-between; padding: 16px 18px;
                         border-radius: 11px; background: var(--bg); }
.aff-payout__l         { font-size: 11.5px; color: var(--ink40); }
.aff-payout__v         { font-size: 25px; font-weight: 700; color: var(--gold); line-height: 1.2; }
.aff-payout__min       { font-size: 11px; color: var(--ink40); margin-top: 2px; }
.aff-method            { margin-top: 4px; }
.aff-grid              { display: grid; gap: 14px; margin-bottom: 14px;
                         grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

/* ── Tabelle ─────────────────────────────────────────────────────────────── */
.aff-tablewrap         { overflow-x: auto; }
.aff-table             { width: 100%; border-collapse: collapse; font-size: 12.5px;
                         min-width: 520px; }
.aff-table th          { text-align: left; font-size: 10.5px; font-weight: 600;
                         color: var(--ink40); text-transform: uppercase;
                         letter-spacing: .06em; padding: 0 10px 8px 0; white-space: nowrap; }
.aff-table td          { padding: 10px 10px 10px 0; border-top: 1px solid var(--ink08);
                         white-space: nowrap; }
.aff-table .num        { text-align: right; }
.aff-table tr.is-reversed td { opacity: .45; text-decoration: line-through; }

/* ── Stati ───────────────────────────────────────────────────────────────── */
.aff-st                { display: inline-block; padding: 2px 9px; border-radius: 99px;
                         font-size: 10.5px; font-weight: 600; white-space: nowrap;
                         background: var(--ink08); color: var(--ink60); }
.aff-st--approved,
.aff-st--sent          { background: rgba(95,168,106,.14); color: #5fa86a; }
.aff-st--paid          { background: rgba(181,144,58,.16); color: var(--gold); }
.aff-st--reversed,
.aff-st--failed,
.aff-st--cancelled     { background: rgba(200,60,60,.13); color: #c83c3c; }

@media (max-width: 560px) {
  .aff-dash__title { font-size: 21px; }
  .aff-kpi__v      { font-size: 19px; }
  .aff-card        { padding: 18px 15px; }
  .aff-chart       { height: 96px; }
}

/* ── Restrizioni ──────────────────────────────────────────────────────────── */
.aff-restr__intro  { margin-bottom: 22px !important; }
.aff-restr         { list-style: none; margin: 0; padding: 0;
                     display: flex; flex-direction: column; gap: 1px; }
.aff-restr li      { position: relative; padding: 14px 18px 14px 40px;
                     background: var(--bg2); font-size: 13.5px; line-height: 1.65;
                     color: var(--ink60); }
.aff-restr li:first-child { border-radius: 11px 11px 0 0; }
.aff-restr li:last-child  { border-radius: 0 0 11px 11px; }
/* Il segno di divieto e' disegnato con i bordi: nessuna icona da caricare e
   nessun carattere emoji, che cambia faccia su ogni sistema operativo. */
.aff-restr li::before {
                     content: ''; position: absolute; left: 17px; top: 18px;
                     width: 11px; height: 11px; border-radius: 50%;
                     border: 1.5px solid var(--error, #c83c3c); opacity: .65; }
.aff-restr li::after {
                     content: ''; position: absolute; left: 19.5px; top: 23px;
                     width: 9px; height: 1.5px; background: var(--error, #c83c3c);
                     transform: rotate(-45deg); transform-origin: center; opacity: .65; }

/* ── Documentazione e contatti ────────────────────────────────────────────── */
.aff-docs          { display: grid; gap: 14px; margin-top: 24px;
                     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.aff-doc           { display: block; padding: 20px 22px; border-radius: 13px;
                     background: var(--bg2); border: 1px solid var(--ink08);
                     text-decoration: none; transition: border-color .15s linear; }
.aff-doc:hover     { border-color: var(--gold); }
.aff-doc__t        { display: block; font-size: 14.5px; font-weight: 600;
                     color: var(--gold); margin-bottom: 6px; }
.aff-doc__t::after { content: ' →'; }
.aff-doc__b        { display: block; font-size: 12.5px; line-height: 1.6; color: var(--ink60); }