/* Dejavù Inviti Privati — stile pagina invito
   I colori arrivano da variabili CSS impostate per-evento nel template:
   --di-accent, --di-gold, --di-bg, --di-text */

.dejavu-invito-body{
  margin:0; padding:0;
  background:
    radial-gradient(60% 50% at 15% 0%, color-mix(in srgb, var(--di-accent) 16%, transparent), transparent 60%),
    radial-gradient(50% 40% at 100% 10%, color-mix(in srgb, var(--di-gold) 10%, transparent), transparent 60%),
    var(--di-bg);
  color:var(--di-text);
  font-family:'Manrope', sans-serif;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
.dejavu-invito-body *{ box-sizing:border-box; }

.dejavu-invito{
  --di-muted: color-mix(in srgb, var(--di-text) 55%, var(--di-bg));
  --di-line: color-mix(in srgb, var(--di-text) 14%, transparent);
  --di-card: color-mix(in srgb, var(--di-text) 6%, var(--di-bg));
  --di-bg-2: color-mix(in srgb, var(--di-text) 4%, var(--di-bg));
  max-width:520px;
  margin:0 auto;
  padding-bottom:80px;
}

/* ---- Hero con immagine evento ---- */
.di-hero{
  position:relative;
  height:230px;
  background-size:cover;
  background-position:center;
  border-radius:0 0 24px 24px;
  margin-bottom:26px;
}
.di-hero-overlay{
  position:absolute; inset:0;
  border-radius:0 0 24px 24px;
  background:linear-gradient(180deg, color-mix(in srgb, var(--di-bg) 30%, transparent) 0%, color-mix(in srgb, var(--di-bg) 85%, transparent) 100%);
}
.di-brand-on-hero{
  position:absolute; top:22px; left:20px; right:20px;
}

.di-content{ padding:0 20px; }

.di-brand{ display:flex; align-items:baseline; justify-content:space-between; padding:28px 20px 0; margin-bottom:30px; }
.di-brand-on-hero.di-brand{ padding:0; margin:0; }
.di-brand-name{ font-family:'Unbounded', sans-serif; font-weight:900; font-size:22px; letter-spacing:0.02em; color:var(--di-text); }
.di-brand-tag{ font-family:'Space Mono', monospace; font-size:11px; color:var(--di-muted); letter-spacing:0.08em; }
.di-brand-on-hero .di-brand-tag{ color:color-mix(in srgb, var(--di-text) 80%, transparent); }

.di-eyebrow{ font-family:'Space Mono', monospace; font-size:12px; color:var(--di-accent); letter-spacing:0.14em; margin-bottom:10px; text-transform:uppercase; }
.di-title{ font-family:'Unbounded', sans-serif; font-weight:800; font-size:clamp(30px, 8vw, 42px); line-height:1.05; margin:0 0 16px; color:var(--di-text); }
.di-subline{ color:var(--di-muted); font-size:15px; line-height:1.5; margin-bottom:30px; max-width:40ch; }

.di-ticket{ position:relative; background:var(--di-card); border:1px solid var(--di-line); border-radius:18px; padding:26px 22px 22px; margin-bottom:34px; overflow:hidden; }
.di-ticket::before{ content:""; position:absolute; left:0; right:0; top:132px; height:0; border-top:2px dashed color-mix(in srgb, var(--di-text) 22%, transparent); }
.di-ticket-row{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:16px; gap:14px; }
.di-ticket-label{ font-family:'Space Mono', monospace; font-size:10px; color:var(--di-muted); letter-spacing:0.12em; text-transform:uppercase; margin-bottom:4px; }
.di-ticket-value{ font-family:'Unbounded', sans-serif; font-weight:600; font-size:16px; color:var(--di-text); }
.di-ticket-value.big{ font-size:19px; }
.di-ticket-stamp{ font-family:'Space Mono', monospace; font-size:11px; color:var(--di-gold); border:1px solid color-mix(in srgb, var(--di-gold) 60%, var(--di-bg)); border-radius:20px; padding:5px 12px; letter-spacing:0.08em; white-space:nowrap; transition:all .25s ease; }
.di-ticket-stamp.confirmed{ color:var(--di-bg); background:var(--di-gold); border-color:var(--di-gold); }
.di-ticket-stamp.declined{ color:var(--di-accent); border-color:var(--di-accent); }
.di-ticket-lower{ padding-top:34px; display:flex; justify-content:space-between; align-items:center; gap:14px; }
.di-ticket-guest{ font-family:'Unbounded', sans-serif; font-weight:600; font-size:17px; min-height:22px; color:var(--di-text); }
.di-ticket-guest.placeholder{ color:var(--di-muted); font-weight:400; font-size:15px; font-family:'Manrope',sans-serif; font-style:italic; }
.di-ticket-code{ font-family:'Space Mono', monospace; font-size:11px; color:var(--di-muted); letter-spacing:0.06em; }

.di-details{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:34px; }
.di-detail{ background:var(--di-bg-2); border:1px solid var(--di-line); border-radius:12px; padding:14px; }
.di-detail-label{ font-family:'Space Mono', monospace; font-size:10px; color:var(--di-muted); letter-spacing:0.1em; text-transform:uppercase; margin-bottom:6px; }
.di-detail-value{ font-size:14px; font-weight:600; color:var(--di-text); }

.di-section-title{ font-family:'Unbounded', sans-serif; font-weight:600; font-size:15px; color:var(--di-gold); letter-spacing:0.02em; margin-bottom:18px; display:flex; align-items:center; gap:10px; }
.di-section-title::after{ content:""; flex:1; height:1px; background:var(--di-line); }

.dejavu-invito label{ display:block; font-size:12px; color:var(--di-muted); margin:16px 0 6px; letter-spacing:0.02em; }
.dejavu-invito input[type=text], .dejavu-invito input[type=tel], .dejavu-invito textarea{
  width:100%; background:var(--di-bg-2); border:1px solid var(--di-line); color:var(--di-text);
  border-radius:10px; padding:13px 14px; font-family:'Manrope', sans-serif; font-size:15px; outline:none;
  transition:border-color .15s ease;
}
.dejavu-invito input:focus, .dejavu-invito textarea:focus{ border-color:var(--di-accent); }
.dejavu-invito textarea{ resize:vertical; min-height:70px; }

.di-radio-group{ display:flex; gap:10px; margin-top:4px; }
.di-radio-pill{ flex:1; text-align:center; padding:12px 10px; border-radius:10px; border:1px solid var(--di-line); background:var(--di-bg-2); font-size:14px; font-weight:600; cursor:pointer; transition:all .15s ease; color:var(--di-text); }
.di-radio-pill.active-yes{ background:var(--di-gold); border-color:var(--di-gold); color:var(--di-bg); }
.di-radio-pill.active-no{ background:transparent; border-color:var(--di-accent); color:var(--di-accent); }

.di-stepper{ display:flex; align-items:center; gap:16px; background:var(--di-bg-2); border:1px solid var(--di-line); border-radius:10px; padding:8px 14px; width:fit-content; margin-top:4px; }
.di-stepper button{ width:30px; height:30px; border-radius:8px; border:1px solid var(--di-line); background:transparent; color:var(--di-text); font-size:18px; cursor:pointer; line-height:1; }
.di-stepper span{ font-family:'Unbounded', sans-serif; font-weight:600; min-width:20px; text-align:center; color:var(--di-text); }

.di-submit-btn{ width:100%; margin-top:28px; padding:16px; border:none; border-radius:12px; background:var(--di-accent); color:#fff; font-family:'Unbounded', sans-serif; font-weight:600; font-size:15px; letter-spacing:0.02em; cursor:pointer; transition:transform .1s ease, opacity .15s ease; }
.di-submit-btn:active{ transform:scale(0.98); }
.di-submit-btn:disabled{ opacity:0.4; cursor:not-allowed; }

.di-error{ color:var(--di-accent); font-size:13px; margin-top:12px; }

.di-confirm-box{ display:none; text-align:center; padding:30px 20px; background:var(--di-bg-2); border:1px solid color-mix(in srgb, var(--di-gold) 60%, var(--di-bg)); border-radius:16px; }
.di-confirm-box.show{ display:block; }
.di-big-check{ font-family:'Unbounded', sans-serif; font-weight:800; font-size:19px; color:var(--di-gold); margin-bottom:8px; }
.di-confirm-box p{ color:var(--di-muted); font-size:14px; line-height:1.5; margin:0; }

.di-form-card.hide{ display:none; }

/* ---- Pagina "invito non valido" ---- */
.di-invalid{
  max-width:420px; margin:0 auto; padding:80px 24px; text-align:center;
}
.di-invalid .di-brand-name{ margin-bottom:40px; }
.di-invalid h1{ font-family:'Unbounded', sans-serif; font-weight:800; font-size:24px; color:var(--di-text); }
.di-invalid p{ color:color-mix(in srgb, var(--di-text) 55%, var(--di-bg)); font-size:14px; line-height:1.6; }

@media (prefers-reduced-motion: reduce) {
  .dejavu-invito-body * { transition:none !important; }
}