/* Bully Club: blocco di iscrizione con il modulo fidelity Pienissimo (iframe, id 67).
   Usato in /bully-club/ e nella home (#iscriviti).

   Il modulo è cross-origin: il suo CSS non si tocca. Lo mostriamo statico:
   - l'iframe è alto 1900px (più del documento del modulo in ogni stato), con scrolling="no",
     quindi non scorre mai al suo interno;
   - la finestra .cf__win ritaglia: 36px in alto (selettore lingua IT) e 19px per lato
     (resta un bordo di 12px dello sfondo del modulo intorno alla card bianca);
   - l'altezza della finestra dipende dalla larghezza del box (container query) ed è
     misurata sul modulo vero: fine della card bianca + 48px (sotto la card restano 48px
     di sfondo, margine per il font di Android che può andare a capo una o due righe in più).
     Larghezza interna iframe = box + 32px.
   Misure del 01/10/2026 sera, fidelity 67 con "Nascondi logo" acceso: la card parte a 64px,
   finisce a 1264 (box 262-285), 1240 (286), 1216 (294), 1203 (314), 1179 (350), 1155 (402),
   1131 (428-540). Il pulsante resta disattivato finché i dati non sono validi: nessun avviso
   allunga la card prima dell'invio. Se il modulo cambia in Pienissimo, rimisurare. */

.cf {
  --cf-giallo: var(--giallo, #ffd400);
  --cf-blu: var(--blu, #1b2a6b);
  --cf-blu-scuro: var(--blu-scuro, #0f1840);
  --cf-rosso: var(--rosso, #e21d2b);
  --cf-crema: var(--crema, #fdfaf1);
  --cf-display: var(--font-display, 'Space Grotesk', system-ui, sans-serif);
  --cf-modulo-bg: #e3eaf1; /* sfondo del modulo Pienissimo */
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "intro" "box" "extra";
  gap: 28px;
  max-width: 1100px;
  margin: 0 auto;
  text-align: left;
  color: var(--cf-crema);
}
.cf__intro { grid-area: intro; max-width: 560px; margin: 0 auto; width: 100%; }
.cf__box { grid-area: box; container: cf / inline-size; width: 100%; max-width: 540px; margin: 0 auto; }
.cf__extra { grid-area: extra; max-width: 560px; margin: 0 auto; width: 100%; }

/* Testi */
.cf__kicker { display: inline-block; background: var(--cf-giallo); color: var(--cf-blu-scuro); font-family: var(--cf-display); font-weight: 700; font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; padding: 7px 14px; border-radius: 999px; margin: 0 0 16px; }
.cf__title { font-family: var(--cf-display); font-weight: 700; color: #fff; font-size: clamp(30px, 6vw, 44px); line-height: 1.02; letter-spacing: -.02em; margin: 0 0 12px; }
.cf__title span { color: var(--cf-giallo); }
.cf__lead { font-size: 17px; line-height: 1.55; color: var(--cf-crema); margin: 0 0 22px; }
.cf__steps { list-style: none; margin: 0 0 18px; padding: 0; counter-reset: cf; display: grid; gap: 12px; }
.cf__steps li { counter-increment: cf; position: relative; padding: 2px 0 0 50px; min-height: 36px; font-size: 16.5px; line-height: 1.45; color: var(--cf-crema); }
.cf__steps li::before { content: counter(cf); position: absolute; left: 0; top: 0; width: 36px; height: 36px; border-radius: 50%; background: var(--cf-giallo); color: var(--cf-blu-scuro); font-family: var(--cf-display); font-weight: 700; font-size: 18px; line-height: 36px; text-align: center; box-shadow: 0 3px 0 var(--cf-rosso); }
.cf__steps b, .cf__lead b { color: var(--cf-giallo); font-weight: 700; }
.cf__punti { margin: 0; background: var(--cf-giallo); color: var(--cf-blu-scuro); border-radius: 16px; padding: 14px 18px; font-size: 16px; line-height: 1.45; box-shadow: 0 5px 0 var(--cf-rosso); }
.cf__punti b { font-family: var(--cf-display); font-weight: 700; }

/* Cornice del modulo */
.cf__card { border: 3px solid var(--cf-giallo); border-radius: 24px; overflow: hidden; background: var(--cf-modulo-bg); box-shadow: 0 8px 0 var(--cf-rosso), 0 26px 50px rgba(0,0,0,.45); }
.cf__bar { background: var(--cf-giallo); color: var(--cf-blu-scuro); font-family: var(--cf-display); font-weight: 700; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; text-align: center; padding: 11px 14px 12px; }
.cf__win { position: relative; overflow: hidden; height: 1276px; background: var(--cf-modulo-bg); }
.cf__frame { display: block; border: 0; margin: -36px 0 0 -19px; width: calc(100% + 38px); height: 1900px; background: var(--cf-modulo-bg); }
@container cf (min-width: 286px) { .cf__win { height: 1252px; } }
@container cf (min-width: 294px) { .cf__win { height: 1228px; } }
@container cf (min-width: 314px) { .cf__win { height: 1215px; } }
@container cf (min-width: 350px) { .cf__win { height: 1191px; } }
@container cf (min-width: 402px) { .cf__win { height: 1167px; } }
@container cf (min-width: 428px) { .cf__win { height: 1143px; } }

/* Caricamento: velo blu con spinner giallo finché il modulo non è pronto */
.cf__win::after { content: ""; position: absolute; inset: 0; background: var(--cf-blu); z-index: 2; pointer-events: none; transition: opacity .5s ease; }
.cf__win::before { content: ""; position: absolute; top: 140px; left: 50%; width: 36px; height: 36px; margin-left: -18px; border: 4px solid rgba(255,212,0,.25); border-top-color: var(--cf-giallo); border-radius: 50%; z-index: 3; animation: cfspin .8s linear infinite; transition: opacity .5s ease; }
.cf__win.ready::after, .cf__win.ready::before { opacity: 0; }
@keyframes cfspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .cf__win::before { animation-duration: 2.4s; } }

.cf__legal { font-size: 13px; line-height: 1.5; color: #c9cfe6; margin: 18px 4px 0; text-align: center; }
.cf__legal a, .cf__alt a { color: var(--cf-giallo); text-decoration: underline; text-underline-offset: 2px; }
.cf__alt { font-size: 15px; color: var(--cf-crema); margin: 8px 4px 0; text-align: center; }
.cf__alt a { font-weight: 600; }

.cf__cassa { background: rgba(255,255,255,.07); border: 2px solid rgba(255,212,0,.45); border-radius: 18px; padding: 16px 18px; font-size: 15.5px; line-height: 1.55; color: var(--cf-crema); margin: 0; }
.cf__cassa b { color: var(--cf-giallo); }

/* Variante pannello (home, dentro la sezione blu) */
.cf--panel { background: var(--cf-blu-scuro); border-radius: 28px; padding: 28px 16px 30px; }

@media (max-width: 420px) {
  .cf--panel { padding: 24px 12px 26px; border-radius: 22px; }
  .cf__lead { font-size: 16.5px; }
}

/* Desktop: testo a sinistra, modulo a destra */
@media (min-width: 980px) {
  .cf { grid-template-columns: minmax(0, 1fr) 540px; grid-template-rows: auto 1fr; grid-template-areas: "intro box" "extra box"; column-gap: 56px; row-gap: 26px; align-items: start; }
  .cf__intro, .cf__extra { margin: 0; max-width: 480px; }
  .cf__intro { padding-top: 12px; }
  .cf--panel { padding: 48px 48px 48px; }
}