/********************************************
 * TESSERA — Tema Natalizio (verde scuro + oro)
 ********************************************/

/* reset minimale (come il tuo) */
* { box-sizing: border-box; }

/* Sfondo pagina */
body.tessera{
  background:
    radial-gradient(1200px 800px at 120% -10%, rgba(141, 5, 219, 0.582), transparent 60%),
    radial-gradient(900px 600px at -10% 10%, rgba(40, 19, 59, 0.582), transparent 60%),
    radial-gradient(2000px 1200px at 50% -400px, rgba(33, 13, 43, 0.582), transparent 60%),
    #21152b;
  color:#f3f7f5;
  font-family: Montserrat, sans-serif;
  line-height:1.5;
  padding:0;
  min-height:100vh;
  position:relative;
  overflow-x:hidden;
}

/* Pannello centrale */
.container{
  max-width:600px;
  margin: clamp(3rem, 8vh, 5rem) auto 3rem;
  position:relative;
  z-index:1;
  padding: clamp(1.5rem, 4vw, 2rem) 1rem 2.5rem;
  border-radius:18px;
    background:
    radial-gradient(1200px 800px at 120% -10%, rgba(212, 5, 219, 0.582), transparent 60%),
    radial-gradient(900px 600px at -10% 10%, rgba(40, 19, 59, 0.582), transparent 60%),
    radial-gradient(2000px 1200px at 50% -400px, rgba(33, 13, 43, 0.582), transparent 60%),
    #21152b;
  border:1px solid rgba(243,247,245,.10);
  box-shadow: 0 22px 60px rgba(0,0,0,.35);
}

/* se mantieni #hero-video nell'HTML, lo nascondiamo */
#hero-video{ display:none !important; }

.container > *:not(#hero-video){ position:relative; z-index:2; }

/* Titolo */
h1{
  text-align:center;
  margin-bottom: 1.6rem;
  font-weight:800;
  color:#f0c76b; /* oro */
  text-shadow: 0 0 14px rgba(240,199,107,.35);
}

/* -------------------- FORM -------------------- */
form{ display:grid; gap:1rem; }

/* Etichette */
label{
  display:block;
  font-size:.95rem;
  margin-top:.25rem;
  color:#f0c76b; /* oro */
  font-weight:800;
}

/* Campi */
input[type="text"],
input[type="date"],
input[type="email"],
input[type="tel"]{
  width:100%;
  padding:.95rem 1rem;
  background: #1b2f28; /* scuro */
  border:1px solid rgba(243,247,245,.14);
  border-radius:14px;
  color:#f3f7f5;
  outline:none;
  transition:border-color .2s, box-shadow .2s, background .2s;
}
input::placeholder{ color: color-mix(in oklab, #c7d3cf 72%, transparent); }

input:focus{
  border-color: color-mix(in oklab, #f0c76b 55%, transparent);
  box-shadow: 0 0 0 4px color-mix(in oklab, #f0c76b 25%, transparent);
  background:#20372f;
}

/* Checkbox in linea */
.checkbox{
  display:flex; align-items:center; gap:.6rem; font-size:.92rem; color:#c7d3cf;
}
.checkbox input{
  width:auto; transform:scale(1.1);
  accent-color:#f0c76b; /* spunta dorata (browser moderni) */
}

/* -------------------- FIRMA -------------------- */
/* Contenitore firma (unificato) */
.signature-container{
  width:100%;
  max-width:680px;
  margin: 8px 0 16px;
  border:1px solid rgba(243,247,245,.14);
  border-radius:14px;
  overflow:visible;
  background: transparent;
}

/* Etichetta firma */
.signature-label{
  display:block;
  margin-bottom:6px;
  color:#f0c76b;
  font-weight:800;
}

/* Box canvas */
.signature-box{
  background:#fff;                 /* canvas bianco per inchiostro scuro */
  border:2px solid #f0c76b;
  border-radius:10px;
  padding:10px;
  overflow:hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

/* Canvas */
#signature-pad{
  display:block;
  width:100%;
  height:220px;                    /* coerente con JS */
  background:#fff;
  touch-action:none;               /* evita scroll durante la firma su mobile */
  cursor:crosshair;
}

/* Azioni sotto il canvas */
.signature-actions{
  display:flex;
  justify-content:flex-end;
  margin-top:8px;
}

/* Bottone "cancella firma" dorato */
.btn-clear-signature{
  appearance:none; border:none; outline:none;
  padding:8px 14px; border-radius:999px;
  background: linear-gradient(180deg, #f6d58d, #e1b860);
  color:#10130f; font-weight:800; cursor:pointer;
  box-shadow: 0 6px 0 0 #b99443, 0 10px 30px rgba(0,0,0,.25);
  transition: transform .06s, filter .2s, box-shadow .2s;
}
.btn-clear-signature:hover{ transform:translateY(-1px); filter:brightness(1.05); box-shadow:0 7px 0 0 #b99443, 0 18px 50px rgba(0,0,0,.35) }
.btn-clear-signature:active{ transform:none; box-shadow:0 5px 0 0 #b99443, 0 10px 30px rgba(0,0,0,.25) }

/* -------------------- SUBMIT -------------------- */
.btn{
  margin-top:.5rem;
  padding:.9rem 1.15rem;
  background: linear-gradient(180deg, #f6d58d, #e1b860); /* oro */
  color:#10130f; border:none; border-radius:999px;
  font-weight:800; cursor:pointer;
  box-shadow: 0 6px 0 0 #b99443, 0 10px 30px rgba(0,0,0,.35);
  transition: transform .06s, filter .2s, box-shadow .2s;
}
.btn:hover{ transform:translateY(-1px); filter:brightness(1.05); box-shadow:0 7px 0 0 #b99443, 0 20px 50px rgba(0,0,0,.45) }
.btn:active{ transform:none; box-shadow:0 5px 0 0 #b99443, 0 10px 30px rgba(0,0,0,.35) }

/* -------------------- ALERT -------------------- */
.alert{
  padding:.9rem 1rem;
  border-radius:12px;
  margin-bottom:1rem;
  font-weight:800;
  display:none;                    /* di default nascosto, mostrato via JS */
  border:1px solid transparent;
}
.alert.success{
  background: rgba(34,197,94,.15);      /* verde */
  color: #b9f6ca;
  border-color: rgba(34,197,94,.35);
}
.alert.error{
  background: rgba(239,68,68,.15);      /* rosso */
  color: #fecaca;
  border-color: rgba(239,68,68,.35);
}

/* Immagini fluide (come tuo) */
img{ max-width:100%; height:auto; display:block; }

/* (Opzionale) neve “appoggiata” sul pannello, se usi .snowy in HTML */
.container.snowy{ position:relative; }
.container.snowy::after{
  content:""; position:absolute; left:-4px; right:-4px; top:-8px; height:18px; z-index:2; pointer-events:none;
  background:
    radial-gradient(12px 8px at 8px 10px, #fff, transparent 70%),
    radial-gradient(16px 10px at 40px 9px, #fff, transparent 70%),
    radial-gradient(14px 8px at 78px 11px, #fff, transparent 70%),
    radial-gradient(14px 8px at 120px 10px, #fff, transparent 70%),
    radial-gradient(16px 10px at 160px 9px, #fff, transparent 70%),
    linear-gradient(#fff, #fff);
  background-repeat:repeat-x;
  background-size:180px 18px,180px 18px,180px 18px,180px 18px,180px 18px,100% 10px;
  background-position:0 0,36px 1px,72px -1px,108px 2px,144px 0,0 8px;
  border-top-left-radius:14px; border-top-right-radius:14px;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.25));
}