/* ============================================================================
   CLUB DEL VICO — tasto 🎁, invito e pannello del cliente (vedi club.js)
   Usa i colori del menu (style.css → :root).
   ========================================================================== */

/* --- il tasto in alto a sinistra (la lingua sta a destra) --- */
.club-pill{
  position:fixed; top:max(12px, env(safe-area-inset-top)); left:14px; z-index:90;
  display:flex; align-items:center; gap:6px;
  font-family:var(--font-head); letter-spacing:.06em; font-size:.9rem; font-weight:500;
  color:var(--cream);
  background:rgba(26,18,16,.72); border:1px solid rgba(230,178,74,.45); border-radius:999px;
  padding:8px 13px; cursor:pointer;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.club-pill:hover{ border-color:var(--gold); }
.club-pill-ico{ font-size:1.05rem; line-height:1; }
.club-pill-dot{
  position:absolute; top:-2px; right:-2px; width:12px; height:12px; border-radius:50%;
  background:var(--basil); border:2px solid var(--bg); box-shadow:0 0 0 3px rgba(134,182,74,.25);
}
html[dir="rtl"] .club-pill{ left:auto; right:14px; }
/* sparisce quando è aperto un piatto, un foglio d'ordine o il pannello stesso */
body:has(.overlay.open) .club-pill,
body:has(.ord-foglio.aperto) .club-pill,
body:has(.ord-stato.aperto) .club-pill,
html.club-aperto .club-pill{ display:none; }

/* --- bottoni --- */
.club-btn{
  display:block; width:100%; min-height:50px; margin-top:10px;
  border-radius:14px; border:0; cursor:pointer;
  font-family:var(--font-body); font-size:1rem; font-weight:600;
}
.club-btn:disabled{ opacity:.6; }
.club-btn-oro{ background:linear-gradient(135deg, var(--gold), #c58f2b); color:#2a1a08; box-shadow:0 8px 24px rgba(230,178,74,.28); }
.club-btn-vuoto{ background:transparent; color:var(--cream); border:1px solid var(--line); }

/* --- l'invito (una volta sola) --- */
.club-invito{
  position:fixed; inset:0; z-index:110; background:rgba(10,6,4,0);
  display:flex; align-items:flex-end; justify-content:center;
  transition:background .3s ease;
}
.club-invito.aperto{ background:rgba(10,6,4,.62); }
.club-invito-box{
  width:100%; max-width:440px; text-align:center;
  background:linear-gradient(180deg, var(--bg-3), var(--bg-2));
  border:1px solid rgba(230,178,74,.45); border-bottom:0; border-radius:24px 24px 0 0;
  padding:24px 20px calc(18px + env(safe-area-inset-bottom));
  transform:translateY(100%); transition:transform .35s cubic-bezier(.2,.9,.3,1);
}
.club-invito.aperto .club-invito-box{ transform:none; }
.club-invito-ico{ font-size:2.6rem; line-height:1; }
.club-invito h2{ font-family:var(--font-display); color:var(--gold-soft); font-size:1.5rem; margin:8px 0 4px; }
.club-invito-sub{ color:var(--muted); font-size:.92rem; margin:0 0 6px; }
.club-invito-dopo{ color:var(--muted); font-size:.78rem; margin:12px 0 0; opacity:.8; }

/* --- i vantaggi --- */
.club-vantaggi{ list-style:none; margin:14px 0 6px; padding:0; text-align:start; }
.club-vantaggi li{
  display:flex; gap:12px; align-items:center; padding:10px 12px; margin:8px 0;
  background:rgba(0,0,0,.22); border:1px solid var(--line); border-radius:14px; font-size:.95rem;
}
.club-vantaggi li > span{ font-size:1.6rem; line-height:1; flex:0 0 auto; }
.club-vantaggi b{ color:var(--gold); }
.club-vantaggi small{ display:block; color:var(--muted); font-size:.8rem; }

/* --- il pannello a tutto schermo --- */
html.club-aperto, html.club-aperto body{ overflow:hidden; }
.club-pannello{
  position:fixed; inset:0; z-index:105; overflow-y:auto; -webkit-overflow-scrolling:touch;
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(230,178,74,.16), transparent 60%),
    var(--bg);
  padding:calc(18px + env(safe-area-inset-top)) 16px calc(30px + env(safe-area-inset-bottom));
  display:none; touch-action:pan-y;
}
.club-pannello.aperto{ display:block; animation:club-sale .25s ease-out; }
@keyframes club-sale{ from{ opacity:0; transform:translateY(20px); } to{ opacity:1; transform:none; } }
.club-corpo{ max-width:460px; margin:0 auto; }
.club-chiudi{
  position:fixed; top:calc(10px + env(safe-area-inset-top)); right:12px; z-index:2;
  width:42px; height:42px; border-radius:50%; cursor:pointer;
  background:rgba(26,18,16,.8); border:1px solid var(--line); color:var(--cream); font-size:1.1rem;
}
html[dir="rtl"] .club-chiudi{ right:auto; left:12px; }
.club-demo{
  text-align:center; font-size:.75rem; font-weight:600; letter-spacing:.08em; color:#2a1a08;
  background:var(--gold); border-radius:999px; padding:4px 10px; margin:0 auto 8px; width:max-content;
}
.club-attesa{ text-align:center; color:var(--muted); padding:40px 0 10px; }
.club-testa{ text-align:center; padding:14px 0 4px; }
.club-ico{ font-size:3rem; line-height:1; }
.club-testa h2{ font-family:var(--font-display); color:var(--gold-soft); font-size:1.7rem; margin:10px 0 6px; }
.club-testa p{ color:var(--muted); margin:0; line-height:1.5; }
.club-avviso{ background:rgba(230,178,74,.12); border:1px solid var(--line); border-radius:12px; padding:10px 12px; font-size:.88rem; color:var(--gold-soft); }
.club-niente{ text-align:center; color:var(--muted); margin:16px 0; line-height:1.5; }

/* --- il modulo --- */
.club-form{ margin-top:10px; }
.club-campo{ display:block; margin:12px 0; }
.club-campo > span{ display:block; font-size:.82rem; color:var(--muted); margin-bottom:5px; }
.club-campo input{
  width:100%; min-height:50px; padding:12px 14px; border-radius:12px;
  background:rgba(0,0,0,.3); border:1px solid var(--line); color:var(--cream);
  font-family:var(--font-body); font-size:16px;  /* 16px: l'iPhone non ingrandisce la pagina */
  outline:none; -webkit-appearance:none; appearance:none;
}
.club-campo input[type=date]{ min-height:50px; color-scheme:dark; }
.club-campo input:focus{ border-color:var(--gold); }
.club-campo small{ display:block; font-size:.78rem; color:var(--muted); margin-top:5px; opacity:.85; }
.club-check{ display:flex; gap:10px; align-items:flex-start; margin:12px 0; font-size:.9rem; line-height:1.45; cursor:pointer; }
.club-check input{ width:22px; height:22px; flex:0 0 auto; margin:1px 0 0; accent-color:var(--gold); }
.club-check a{ color:var(--gold); }
.club-errore{ background:rgba(209,59,47,.16); color:#ffb0a8; border-radius:12px; padding:10px 12px; font-size:.9rem; margin:12px 0 0; }

.club-informativa{ margin:18px 0 6px; font-size:.82rem; color:var(--muted); line-height:1.5; }
.club-informativa summary{ cursor:pointer; color:var(--gold-soft); padding:6px 0; }
.club-informativa p{ margin:8px 0; }

/* --- le schede --- */
.club-scheda{
  background:linear-gradient(160deg, rgba(64,42,34,.55), rgba(36,24,22,.7));
  border:1px solid var(--line); border-radius:18px; padding:14px; margin:14px 0;
}
.club-scheda h3{ font-family:var(--font-display); color:var(--gold-soft); font-size:1.1rem; margin:0 0 6px; }
.club-scheda p{ color:var(--muted); margin:0; font-size:.9rem; line-height:1.5; }
.club-compleanno{ display:flex; gap:12px; align-items:center; }
.club-compleanno > span{ font-size:1.8rem; }
.club-compleanno div{ font-size:.9rem; color:var(--muted); }
.club-compleanno b{ color:var(--cream); }
.club-casa-altro{ margin-top:10px !important; color:var(--cream) !important; }

/* --- il premio con il suo QR --- */
.club-premio{
  margin:16px 0; padding:16px; border-radius:20px; text-align:center;
  background:linear-gradient(160deg, #3a2410, #20140d); border:2px solid var(--gold);
  box-shadow:0 14px 34px rgba(0,0,0,.45);
}
.club-premio-testa{ display:flex; gap:12px; align-items:center; text-align:start; }
.club-premio-emo{ font-size:2.2rem; line-height:1; }
.club-premio-testa b{ display:block; color:var(--gold); font-size:1.1rem; }
.club-premio-testa small{ color:var(--muted); font-size:.82rem; }
.club-premio-stato{ margin:12px 0 10px; font-weight:600; color:var(--cream); }
.club-qr{
  display:block; width:min(62vw, 220px); aspect-ratio:1; margin:0 auto; padding:12px;
  background:#fff; border:0; border-radius:16px; cursor:zoom-in;
}
.club-qr svg{ width:100%; height:100%; display:block; }
.club-codice{ font-family:var(--font-head); letter-spacing:.2em; font-size:1.15rem; margin-top:10px; color:var(--cream); }
.club-premio-quando{ color:var(--muted); font-size:.82rem; margin:8px 0 0; }
.club-premio-come{ color:var(--gold-soft); font-size:.8rem; margin:6px 0 0; opacity:.85; }
.club-premio.st-valido{ border-color:var(--basil); box-shadow:0 0 0 4px rgba(134,182,74,.18), 0 14px 34px rgba(0,0,0,.45); }
.club-premio.st-valido .club-premio-stato{ color:#c7e59b; }
.club-premio.st-presto .club-qr, .club-premio.st-oggi_no .club-qr{ opacity:.85; }

.club-usati{ list-style:none; margin:0; padding:0; }
.club-usati li{ display:flex; gap:10px; align-items:center; padding:8px 0; border-bottom:1px solid var(--line); opacity:.75; font-size:.9rem; }
.club-usati li:last-child{ border-bottom:0; }
.club-usati small{ display:block; color:var(--muted); font-size:.78rem; }

/* --- interruttore offerte --- */
.club-riga{ display:flex; gap:12px; align-items:center; justify-content:space-between; cursor:pointer; }
.club-riga small{ display:block; color:var(--muted); font-size:.8rem; font-weight:400; }
.club-switch{ position:relative; width:52px; height:30px; flex:0 0 auto; }
.club-switch input{ opacity:0; width:0; height:0; position:absolute; }
.club-switch i{ position:absolute; inset:0; border-radius:99px; background:rgba(255,255,255,.14); transition:background .2s; }
.club-switch i::after{ content:""; position:absolute; top:3px; left:3px; width:24px; height:24px; border-radius:50%; background:var(--cream); transition:transform .2s; }
.club-switch input:checked + i{ background:var(--basil); }
.club-switch input:checked + i::after{ transform:translateX(22px); }

.club-esci{
  display:block; margin:18px auto 0; background:none; border:0; cursor:pointer;
  color:#ff9b90; font-size:.85rem; text-decoration:underline; text-underline-offset:3px;
}

/* --- QR a tutto schermo, bianco, per la fotocamera --- */
.club-qr-pieno{
  position:fixed; inset:0; z-index:130; background:#fff; color:#1a1210;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
  padding:24px; text-align:center; cursor:zoom-out;
}
.club-qr-pieno-qr{ width:min(84vw, 62vh); }
.club-qr-pieno-qr svg{ width:100%; height:auto; display:block; }
.club-qr-pieno p{ font-weight:700; font-size:1.2rem; margin:6px 0 0; }
.club-qr-pieno b{ font-family:var(--font-head); letter-spacing:.2em; font-size:1.4rem; }
.club-qr-pieno small{ color:#7a6a5c; line-height:1.5; }

/* --- festa all'iscrizione --- */
.club-coriandoli{ position:fixed; inset:0; z-index:140; pointer-events:none; overflow:hidden; }
.club-coriandoli i{ position:absolute; top:-12px; width:9px; height:9px; border-radius:2px; animation:club-cade linear forwards; }
@keyframes club-cade{ to{ transform:translateY(105vh) rotate(540deg); opacity:.2; } }

@media (prefers-reduced-motion:reduce){
  .club-pannello.aperto, .club-invito-box{ animation:none; transition:none; }
}

/* --- fase 2: avvisi, email, ritrova tessera --- */
.club-link{
  display:block; margin:14px auto 0; background:none; border:0; cursor:pointer; padding:6px;
  color:var(--gold-soft); font-family:var(--font-body); font-size:.9rem; text-decoration:underline; text-underline-offset:3px;
}
.club-nota{ color:var(--muted); font-size:.85rem; line-height:1.5; text-align:center; margin:14px 0 0; }
.club-scheda .club-nota{ text-align:start; }
.club-avvisi-on{ color:#c7e59b !important; font-weight:600; }
.club-avvisi .club-link{ margin:6px 0 0; padding:0; font-size:.82rem; color:var(--muted); }
.club-toast{
  position:fixed; left:50%; bottom:calc(26px + env(safe-area-inset-bottom)); z-index:150; max-width:88%;
  transform:translate(-50%, 20px); opacity:0; transition:opacity .3s ease, transform .3s ease;
  background:rgba(26,18,16,.97); color:var(--cream); border:1px solid rgba(230,178,74,.45); border-radius:12px;
  padding:12px 16px; font-size:.92rem; text-align:center; box-shadow:0 12px 30px rgba(0,0,0,.55);
}
.club-toast.on{ opacity:1; transform:translate(-50%, 0); }