/* MAD PRO — la pagina xmad.it/mad-pro (11 ott 2026). Tutto sotto .mp / mp-:
   la pagina e' cucita dentro Webflow, e il codice di testa del sito ha regole
   con !important sui campi (vedi LEGGIMI-PAGINE-CUCITE.md). Anteprime
   approvate: mad-pro/pagina-invito-anteprima.html e pagina-pubblica-anteprima.html.
   I pesi del font sono quelli VERI (vedi memoria madfont-e-fivo-sans). */
@font-face { font-family:"MadPro"; src:url("/mad/font/MAD-300.woff2") format("woff2"); font-weight:400; font-display:swap; }
@font-face { font-family:"MadPro"; src:url("/mad/font/MAD-400.woff2") format("woff2"); font-weight:500; font-display:swap; }
@font-face { font-family:"MadPro"; src:url("/mad/font/MAD-600.woff2") format("woff2"); font-weight:700; font-display:swap; }
@font-face { font-family:"MadPro"; src:url("/mad/font/MAD-800.woff2") format("woff2"); font-weight:900; font-display:swap; }

html, body { background:#0c0012; }
.mp { --nero:#0c0012; --carta:#1c1526; --riga:#3a2f4a; --grigio:#8a8a99; --viola:#aa00ff; --lime:#ccff00; --bianco:#fff; --sahara:#b5703a;
      --m1:#fff3b0; --m2:#f5c542; --m3:#b8860b;
      max-width:960px; margin:0 auto; padding:28px 16px 72px; color:var(--bianco);
      font-family:"MadPro",Arial,sans-serif; -webkit-font-smoothing:antialiased; text-align:left; }
.mp *, .mp-velo * { box-sizing:border-box; }
/* hidden deve vincere sui display dei nostri blocchi (il modulo e' grid) */
.mp [hidden], .mp-velo [hidden] { display:none !important; }
.mp p, .mp h1, .mp h2, .mp h3, .mp ul { margin:0; padding:0; }
.mp[data-vista="invito"], .mp[data-vista="sbagliato"] { max-width:520px; }
.mp-etichetta { font-size:11px; letter-spacing:3px; text-transform:uppercase; color:#aa00ff; font-weight:700; }
.mp-h1 { font-size:48px; font-weight:900; letter-spacing:1px; line-height:1; margin-top:10px !important; color:#fff; }
.mp-h1 span { color:#aa00ff; }
.mp-h2 { font-size:22px; font-weight:700; line-height:1.25; margin:10px 0 8px !important; color:#fff; }
.mp-tenue { color:var(--grigio); font-size:13px; margin-top:10px !important; }
.mp-sezione { margin-top:36px; }

.mp-chiaro { margin-top:18px; display:grid; gap:10px; }
.mp-chiaro-voce { border:1.5px solid var(--viola); border-radius:14px; padding:14px 16px; background:rgba(170,0,255,.10); }
.mp-chiaro-voce b { display:block; font-size:18px; font-weight:900; letter-spacing:.5px; text-transform:uppercase; }
.mp-chiaro-voce span { display:block; font-size:14px; line-height:1.45; color:#d6d6de; margin-top:4px; }
.mp-vantaggi { list-style:none; margin-top:20px !important; display:grid; gap:10px; }
.mp-vantaggi li { background:var(--carta); border-radius:14px; padding:14px 16px 14px 48px; position:relative; font-size:15px; line-height:1.45; }
.mp-vantaggi li::before { content:""; position:absolute; left:18px; top:50%; width:14px; height:14px; margin-top:-7px; border-radius:50%; background:var(--viola); box-shadow:0 0 12px rgba(170,0,255,.6); }

/* il badge: oro, argento o bronzo */
.mp-badge-zona { margin-top:40px; text-align:center; }
.mp-badge-zona > .mp-etichetta { display:block; margin-bottom:22px; }
.mp-argento { --m1:#ffffff; --m2:#c9cfd8; --m3:#7d8794; }
.mp-bronzo  { --m1:#ffd7b0; --m2:#cd7f32; --m3:#7a4a1c; }
.mp-badge { width:220px; height:220px; margin:0 auto; position:relative; animation:mp-galleggia 4s ease-in-out infinite; }
.mp-anello { position:absolute; inset:0; border-radius:50%; background:conic-gradient(from 200deg, var(--m3), var(--m1), var(--m2), var(--m3), var(--m1), var(--m3)); box-shadow:0 18px 50px rgba(0,0,0,.45); }
.mp-cuore { position:absolute; inset:14px; border-radius:50%; background:radial-gradient(circle at 50% 30%, #2a1f38, #0c0012 70%); display:flex; flex-direction:column; align-items:center; justify-content:center; overflow:hidden; }
/* interlinea propria: quella del sito (20 px) spingeva il "1°" contro il bordo (Dario, 11 ott) */
.mp-cuore > div { line-height:1.05; }
.mp-cuore::after { content:""; position:absolute; top:-60%; left:-60%; width:60%; height:220%; transform:rotate(25deg); background:linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent); animation:mp-luccica 3.6s ease-in-out infinite; }
.mp-pos { font-size:78px; font-weight:900; line-height:.9; background:linear-gradient(180deg, var(--m1), var(--m2) 55%, var(--m3)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.mp-titolo { font-size:12px; letter-spacing:2.5px; font-weight:700; margin-top:8px; color:var(--m1); }
.mp-evento { font-size:15px; font-weight:900; letter-spacing:1px; margin-top:6px; }
.mp-evento span { color:var(--lime); }
.mp-quando { font-size:11px; color:var(--grigio); margin-top:4px; letter-spacing:1px; }
.mp-nastro { position:absolute; bottom:-34px; width:34px; height:58px; background:linear-gradient(var(--m2), var(--m3)); z-index:-1; clip-path:polygon(0 0,100% 0,100% 100%,50% 82%,0 100%); }
.mp-nastro.mp-s { left:62px; transform:rotate(14deg); }
.mp-nastro.mp-d { right:62px; transform:rotate(-14deg); }
.mp-squadra { margin-top:48px; }
.mp-squadra strong { display:block; font-size:22px; font-weight:900; letter-spacing:1px; }
.mp-squadra span { font-size:13px; color:var(--grigio); }
@keyframes mp-galleggia { 50% { transform:translateY(-6px); } }
@keyframes mp-luccica { 0%,55% { left:-60%; } 100% { left:140%; } }
@media (prefers-reduced-motion:reduce) { .mp-badge, .mp-cuore::after { animation:none; } }

/* i 6 posti */
.mp-posti-testo { font-size:15px; line-height:1.6; }
.mp-posti-testo strong { color:var(--viola); }
.mp-posti { display:grid; grid-template-columns:repeat(6,1fr); gap:8px; margin:20px 0 6px; }
.mp-posto { aspect-ratio:1; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:900; font-size:17px; overflow:hidden; }
.mp-posto img { width:100%; height:100%; object-fit:cover; }
.mp-preso { background:var(--viola); color:#fff; }
.mp-libero { border:2px dashed var(--riga); color:var(--riga); font-size:14px; }
.mp-posti-nomi { display:grid; grid-template-columns:repeat(6,1fr); gap:8px; text-align:center; font-size:10px; color:var(--grigio); letter-spacing:.5px; }
.mp-posti-nomi span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mp-contatore { margin-top:14px !important; font-size:13px; color:var(--grigio); text-align:center; }
.mp-contatore b { color:#fff; }
.mp-consumato { margin-top:12px !important; font-size:12px; color:var(--grigio); text-align:center; line-height:1.5; }
.mp-pieno { margin-top:24px; background:var(--carta); border-radius:18px; padding:22px 18px; }
.mp-pieno b { display:block; font-size:18px; font-weight:900; }
.mp-pieno span { display:block; font-size:14px; line-height:1.5; color:#d6d6de; margin-top:6px; }
.mp-pieno a, .mp-spunta a { color:var(--viola); }

/* il modulo */
.mp-modulo { margin-top:24px; background:var(--carta); border-radius:18px; padding:22px 18px; display:grid; gap:16px; }
.mp-modulo label, .mp-campo label { display:block; font-size:12px; letter-spacing:1px; text-transform:uppercase; color:var(--grigio); font-weight:700; margin-bottom:7px; }
.mp-modulo label em { text-transform:none; letter-spacing:0; font-style:normal; font-weight:400; }
.mp input[type=text], .mp input[type=email], .mp input[type=tel], .mp-velo input[type=text], .mp-velo input[type=email] {
  width:100% !important; height:auto !important; background:var(--nero) !important; border:1.5px solid var(--riga) !important; border-radius:12px !important;
  padding:14px !important; color:#fff !important; font:inherit; font-size:16px !important; margin:0 !important; -webkit-appearance:none; appearance:none; }
.mp input:focus, .mp-velo input:focus { outline:none; border-color:var(--viola) !important; }
.mp-coppia { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.mp-aiuto { font-size:12px; color:var(--grigio); margin-top:6px !important; line-height:1.5; }
.mp .mp-codice, .mp-velo .mp-codice { letter-spacing:10px !important; text-align:center; font-size:22px !important; font-weight:700; }
.mp-foto { display:flex; align-items:center; gap:14px; }
.mp-tondo { width:56px; height:56px; border-radius:50%; background:var(--nero); border:1.5px dashed var(--riga); display:flex; align-items:center; justify-content:center; color:var(--grigio); font-size:22px; font-weight:900; flex:none; overflow:hidden; }
.mp-tondo img { width:100%; height:100%; object-fit:cover; }
.mp-modulo .mp-tasto-foto { border:1.5px solid var(--riga); border-radius:999px; padding:10px 16px; font-size:13px; font-weight:700; color:#fff; letter-spacing:0; text-transform:none; margin:0; cursor:pointer; }
.mp-avviso { font-size:12px; color:#ff8a80; margin-top:8px !important; }
.mp-modulo .mp-spunta { display:flex; gap:10px; align-items:flex-start; font-size:13px; line-height:1.5; color:#d6d6de; text-transform:none; letter-spacing:0; font-weight:400; margin:0; }
.mp .mp-spunta input[type=checkbox] { width:20px !important; height:20px !important; accent-color:var(--viola); flex:none; margin:1px 0 0 !important; appearance:auto !important; position:static !important; opacity:1 !important; }
.mp-errore { font-size:13px; color:#ff8a80; line-height:1.5; }
.mp-tasto { background:var(--viola); color:#fff; border:0; border-radius:999px; padding:18px; font:inherit; font-size:16px; font-weight:900; letter-spacing:1px; cursor:pointer; }
.mp-tasto[disabled] { opacity:.6; cursor:wait; }
.mp-largo { width:100%; margin-top:18px; padding:16px; }
.mp-esito { margin-top:24px; background:rgba(170,0,255,.12); border:1.5px solid var(--viola); border-radius:18px; padding:22px 18px; text-align:center; }
.mp-esito b { display:block; font-size:22px; font-weight:900; }
.mp-esito p { font-size:14px; line-height:1.55; color:#d6d6de; margin-top:8px !important; }
.mp-esito .mp-coupon-vero { display:inline-block; margin-top:14px; border:2px dashed #fff; border-radius:12px; padding:12px 18px; font-size:20px; font-weight:900; letter-spacing:2px; background:var(--sahara); }
.mp-esito .mp-tasto { margin-top:18px; padding:14px 22px; }

/* il premio */
.mp-premio { background:var(--sahara); border-radius:20px; padding:30px 22px; text-align:center; margin-top:36px; }
.mp-premio .mp-etichetta { color:#fff; opacity:.9; }
.mp-cifra { font-size:76px; font-weight:900; line-height:1; margin-top:14px !important; }
.mp-cosa { font-size:21px; font-weight:700; margin-top:8px !important; }
.mp-dove { font-size:14px; opacity:.9; margin-top:6px !important; }
.mp-riga { border-top:1px solid rgba(255,255,255,.35); margin:22px 0 16px; }
.mp-coupon { display:inline-block; border:2px dashed rgba(255,255,255,.7); border-radius:12px; padding:12px 18px; font-size:15px; font-weight:700; letter-spacing:2px; }
.mp-nota { font-size:13px; line-height:1.55; margin-top:14px !important; }

/* la pagina pubblica */
.mp-entra-riga { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; background:var(--carta); border-radius:14px; padding:14px 16px; margin-top:22px; }
.mp-entra-riga p { font-size:14px; color:#d6d6de; }
.mp-entra-riga .mp-tasto { padding:12px 22px; font-size:14px; }
.mp-registro-testa { display:flex; align-items:baseline; justify-content:space-between; margin:40px 0 16px; gap:12px; }
.mp-registro-testa .mp-h2 { font-size:24px; margin:0 !important; }
.mp-registro-testa span { font-size:13px; color:var(--grigio); }
.mp-griglia { display:grid; grid-template-columns:repeat(auto-fill, minmax(96px,1fr)); gap:18px 10px; }
.mp-vuoto { grid-column:1/-1; font-size:15px; color:var(--grigio); background:var(--carta); border-radius:14px; padding:18px; }
.mp-pro { background:none; border:0; color:inherit; font:inherit; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:8px; position:relative; padding:0; }
.mp-avatar { width:72px; height:72px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:28px; font-weight:900; background:linear-gradient(140deg,#2a1f38,#14091d); border:2px solid var(--riga); overflow:hidden; color:#fff; }
.mp-avatar img { width:100%; height:100%; object-fit:cover; }
.mp-pro:hover .mp-avatar, .mp-pro:focus-visible .mp-avatar { border-color:var(--viola); box-shadow:0 0 0 3px rgba(170,0,255,.25); }
.mp-medaglie { position:absolute; top:52px; left:calc(50% + 14px); display:flex; }
.mp-mini { width:22px; height:22px; border-radius:50%; font-size:10px; font-weight:900; font-style:normal; display:flex; align-items:center; justify-content:center; color:#0c0012; border:2px solid #0c0012; margin-left:-7px; background:linear-gradient(160deg,var(--m1),var(--m2),var(--m3)); }
.mp-mini.mp-bronzo { color:#fff; }
.mp-nick { font-size:13px; font-weight:700; letter-spacing:.5px; max-width:96px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mp-profilo-mio { display:grid; gap:14px; width:100%; }
.mp-profilo-mio .mp-testa-io { display:flex; align-items:center; gap:14px; }
.mp-profilo-mio .mp-avatar { width:64px; height:64px; font-size:26px; }
.mp-profilo-mio h3 { font-size:22px; font-weight:900; }
.mp-profilo-mio .mp-azioni { display:flex; gap:10px; flex-wrap:wrap; }
.mp-tasto.mp-vuoto-tasto { background:transparent; border:1.5px solid var(--riga); padding:10px 16px; font-size:13px; }
.mp-coupon-mio { background:var(--sahara); border-radius:14px; padding:14px 16px; }
.mp-coupon-mio b { display:block; font-size:22px; font-weight:900; letter-spacing:2px; }
.mp-coupon-mio span { display:block; font-size:13px; margin-top:4px; }

/* i popup */
.mp-velo { position:fixed; inset:0; background:rgba(5,0,10,.78); display:flex; align-items:flex-end; justify-content:center; z-index:2147483000; padding:16px; font-family:"MadPro",Arial,sans-serif; color:#fff; }
.mp-velo[hidden] { display:none; }
@media (min-width:720px) { .mp-velo { align-items:center; } }
.mp-scheda { width:100%; max-width:420px; background:#1c1526; border-radius:22px; padding:26px 20px 22px; position:relative; text-align:center; max-height:86vh; overflow:auto; }
.mp-scheda h3 { font-size:26px; font-weight:900; letter-spacing:1px; margin:12px 0 0; color:#fff; }
.mp-chiudi { position:absolute; top:10px; right:14px; background:none; border:0; color:#8a8a99; font-size:26px; cursor:pointer; }
.mp-scheda .mp-avatar { width:96px; height:96px; font-size:38px; margin:0 auto; }
.mp-quanti { font-size:13px; color:#8a8a99; margin:4px 0 0; }
.mp-achievement { display:flex; align-items:center; gap:14px; text-align:left; background:#0c0012; border-radius:14px; padding:12px 14px; margin-top:12px; }
.mp-medaglia { width:58px; height:58px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center; font-size:22px; font-weight:900; color:#0c0012; background:linear-gradient(160deg,var(--m1,#fff3b0),var(--m2,#f5c542),var(--m3,#b8860b)); }
.mp-medaglia.mp-oro { --m1:#fff3b0; --m2:#f5c542; --m3:#b8860b; }
.mp-medaglia.mp-bronzo { color:#fff; }
.mp-achievement b { display:block; font-size:14px; letter-spacing:1.5px; }
.mp-achievement .mp-ev { font-size:13px; font-weight:900; margin-top:3px; }
.mp-achievement .mp-ev span { color:#ccff00; }
.mp-achievement small { display:block; font-size:12px; color:#8a8a99; margin-top:2px; }
.mp-campo { text-align:left; margin-top:14px; }
.mp-campo label { display:block; font-size:12px; letter-spacing:1px; text-transform:uppercase; color:#8a8a99; font-weight:700; margin-bottom:7px; }
.mp-dimenticato { display:block; margin:14px auto 0; font:inherit; font-size:13px; color:#aa00ff; background:none; border:0; cursor:pointer; }
.mp-nota-accesso { font-size:12px; color:#8a8a99; margin-top:14px; line-height:1.5; }
.mp-velo .mp-errore { margin-top:12px; text-align:left; }

/* la ricerca per nickname, subito sopra la lista (Dario, 11 ott) */
.mp-cerca { margin:0 0 18px; position:relative; }
.mp-cerca::before { content:""; position:absolute; left:16px; top:50%; width:14px; height:14px; margin-top:-9px; border:2px solid var(--grigio); border-radius:50%; }
.mp-cerca::after { content:""; position:absolute; left:29px; top:50%; width:7px; height:2px; margin-top:4px; background:var(--grigio); transform:rotate(45deg); }
.mp .mp-cerca input[type=search] { width:100% !important; background:var(--carta) !important; border:1.5px solid var(--riga) !important; border-radius:999px !important;
  padding:14px 18px 14px 46px !important; color:#fff !important; font:inherit; font-size:16px !important; margin:0 !important; -webkit-appearance:none; appearance:none; }
.mp .mp-cerca input[type=search]:focus { outline:none; border-color:var(--viola) !important; }
.mp-nessuno { font-size:14px; color:var(--grigio); margin:0 0 16px !important; }

/* chi e' entrato: saluto + tasto PROFILO */
.mp-ciao { display:flex; align-items:center; gap:12px; }
.mp-ciao .mp-avatar { width:44px; height:44px; font-size:18px; }
.mp-ciao p b { color:#fff; }

/* il popup del proprio profilo, a sezioni */
.mp-scheda-mia { max-width:460px; }
.mp-cambia-foto { display:inline-block; margin-top:10px; font-size:13px; color:#aa00ff; cursor:pointer; text-decoration:underline; }
.mp-centro { text-align:center; margin-top:6px !important; }
.mp-sez { text-align:left; margin-top:22px; }
.mp-sez h4 { font-size:11px; letter-spacing:3px; text-transform:uppercase; color:#aa00ff; font-weight:700; margin:0 0 10px; }
.mp-premio-mio { background:#b5703a; border-radius:14px; padding:16px; margin-top:10px; text-align:center; }
.mp-premio-mio span { display:block; font-size:14px; font-weight:700; }
.mp-premio-mio b { display:block; font-size:24px; font-weight:900; letter-spacing:2px; margin:10px 0 8px; border:2px dashed rgba(255,255,255,.75); border-radius:12px; padding:10px; user-select:all; }
.mp-premio-mio small { display:block; font-size:12px; opacity:.9; }
.mp-premio-mio button { margin-top:10px; background:#fff; color:#b5703a; border:0; border-radius:999px; padding:9px 16px; font:inherit; font-size:13px; font-weight:900; cursor:pointer; }
.mp-riservato { background:#0c0012; border:1.5px solid #aa00ff; border-radius:14px; padding:14px 16px; margin-top:10px; }
.mp-riservato b { display:block; font-size:16px; font-weight:900; }
.mp-riservato p { font-size:13px; line-height:1.5; color:#d6d6de; margin:6px 0 0; }
.mp-riservato a { display:inline-block; margin-top:10px; background:#aa00ff; color:#fff; border-radius:999px; padding:9px 16px; font-size:13px; font-weight:900; text-decoration:none; }
.mp-esci { margin-top:24px; width:100%; }

/* ── le medaglie grandi anche nei popup (Dario, 11 ott: "i badge li avevi
   fatti proprio belli, usa quelli anche qui"). Stessa medaglia della pagina
   d'invito, in piccolo. I popup stanno fuori da .mp: qui le variabili. */
.mp-velo { --m1:#fff3b0; --m2:#f5c542; --m3:#b8860b; --lime:#ccff00; --grigio:#8a8a99; }
.mp-badges { display:grid; grid-template-columns:repeat(auto-fill, minmax(124px,1fr)); gap:30px 10px; justify-items:center; margin-top:14px; padding-bottom:24px; }
.mp-badge-cella { display:flex; flex-direction:column; align-items:center; gap:30px; }
.mp-badge-cella small { font-size:11px; letter-spacing:1px; color:#8a8a99; text-transform:uppercase; margin-top:-6px; }
.mp-badge.mp-piccolo { width:124px; height:124px; }
.mp-piccolo .mp-cuore { inset:8px; }
.mp-piccolo .mp-pos { font-size:42px; line-height:.85; }
.mp-piccolo .mp-titolo { font-size:7.5px; letter-spacing:1.5px; margin-top:4px; }
.mp-piccolo .mp-evento { font-size:10px; margin-top:3px; }
.mp-piccolo .mp-quando { font-size:7px; letter-spacing:.3px; margin-top:3px; }
/* misurato: con interlinea 1,05 e cifra a 42 px, numero e data stanno a 18 px dal bordo */
.mp-piccolo .mp-nastro { width:20px; height:34px; bottom:-20px; }
.mp-piccolo .mp-nastro.mp-s { left:34px; }
.mp-piccolo .mp-nastro.mp-d { right:34px; }
.mp-piccolo .mp-cuore::after { animation-duration:4.4s; }

/* ── la barra di scorrimento del popup: sottile, viola MAD ── */
.mp-scheda { scrollbar-width:thin; scrollbar-color:#aa00ff transparent; overscroll-behavior:contain; }
.mp-scheda::-webkit-scrollbar { width:6px; }
.mp-scheda::-webkit-scrollbar-track { background:transparent; margin:20px 0; }
.mp-scheda::-webkit-scrollbar-thumb { background:linear-gradient(180deg,#c94dff,#aa00ff 50%,#6a00a0); border-radius:999px; }
.mp-scheda::-webkit-scrollbar-thumb:hover { background:#c94dff; }

/* sotto COPIA IL CODICE, il link al sito dell'evento del premio */
.mp-premio-mio .mp-premio-link { display:block; margin-top:12px; font-size:14px; font-weight:700; color:#fff; text-decoration:underline; text-underline-offset:3px; }