/* =========================================================
   EUTOPIIIA — Contacts (B/N + red/green states)
   Markup: contacts.html (contact-form/contact-frame/ff/…)
   ========================================================= */

/* --- Token monocromatici --- */
:root{
  --c-text:   #f2f2f2;
  --c-muted:  #bdbdbd;
  --c-card:   rgba(255, 255, 255, 0.06);     /* glass grigio dentro la card */
  --c-stroke: rgba(255, 255, 255, 0.12);
  --c-shadow: 0 10px 40px rgba(0,0,0,.35);

  --c-focus:  #e5e5e5;                   /* focus neutro grigio */
  --c-red:    #ff3b30;                   /* error */
  --c-green:  #ffffff;                   /* success/valid */
  --r-lg: 22px;
  --r-md: 14px;
}

/* --- Pagina: sfondo nero pieno, gap ridotto sotto topbar --- */
.contact-form{
  padding: clamp(1.2rem, 3vw, 2rem) 0 0;
  background:#000;
  color: var(--c-text);
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

/* --- Card centrale “glass” --- */
.contact-frame{
  width: min(92%, 1060px);
  margin: 0 auto clamp(3rem, 6vw, 5rem);
  background: var(--c-card);
  backdrop-filter: blur(12px);
  border: 1px solid var(--c-stroke);
  border-radius: var(--r-lg);
  box-shadow: var(--c-shadow);
  padding: clamp(1.25rem, 2.5vw, 2rem);
}

/* --- Head --- */
.c-head{ text-align:center; margin:.3rem 0 1.25rem; }
.c-head h1{
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(2.2rem, 5vw, 3.3rem);
  letter-spacing: .04em;
  text-transform: uppercase;
  margin: 0 0 .25rem;
  color:#fff;
}
.c-head .muted{ color:var(--c-muted); font-size:.98rem; max-width:720px; margin:0 auto; }

/* --- Griglia --- */
.form-grid-2{ display:grid; gap: clamp(1rem, 2vw, 1.5rem); }
@media (min-width: 880px){ .form-grid-2{ grid-template-columns: 0.9fr 1.1fr; } }
.col-left, .col-right{ display:grid; gap:1rem; }

/* --- Field wrapper + inputs (floating label) --- */
.ff{ position:relative; display:grid; gap:.35rem; }

.ff input,
.ff textarea{
  appearance:none;
  width:100%;
  padding: 1rem 1rem .95rem;
  border-radius: var(--r-md);
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  color: var(--c-text);
  outline: none;
  transition: border-color .25s, box-shadow .25s, background .25s;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
  caret-color: #fff;
  font: 600 15px/1.35 var(--font-body, Inter, system-ui, sans-serif);
}
.ff textarea{ min-height:140px; resize:vertical; }

/* label fluttuante */
.ff label{
  position:absolute; left:10px; top:10px;
  padding:0 6px;
  color:var(--c-muted);
  font:600 13px/1 var(--font-body, Inter, system-ui, sans-serif);
  letter-spacing:.02em;
  background:transparent;
  transform-origin:left top;
  transition: transform .18s, color .18s, background .18s, top .18s;
  pointer-events:none;
}
/* nascondi placeholder per usare :placeholder-shown */
.ff input::placeholder, .ff textarea::placeholder{ color:transparent; }

/* focus neutro (grigio) */
.ff input:focus, .ff textarea:focus{
  border-color: var(--c-focus);
  box-shadow:
    0 0 0 6px rgba(229,229,229,.10),
    0 0 0 1px rgba(229,229,229,.55) inset;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
}

/* attiva label su focus o con valore */
.ff input:focus + label,
.ff input:not(:placeholder-shown) + label,
.ff textarea:focus + label,
.ff textarea:not(:placeholder-shown) + label{
  top:-8px;
  transform: translateY(-2px) scale(.92);
  background: rgba(0,0,0,.85);
  color:#fff;
  border-radius:6px;
}

/* stati: errore rosso / valido verde (quando fuori focus) */
.ff.is-error input, .ff.is-error textarea{
  border-color: var(--c-red) !important;
  box-shadow: 0 0 0 6px rgba(255,59,48,.12), 0 0 0 1px rgba(255,59,48,.55) inset !important;
}
.ff input:valid:not(:focus), .ff textarea:valid:not(:focus){
  border-color: var(--c-green);
}

/* messaggi errore sotto i campi */
.field-error{
  display:block;
  color: var(--c-red);
  font-size:.82rem;
  margin-top:.35rem;
}

/* --- Checkbox consenso: testo a sinistra accanto al box + errore sotto --- */
.consent-row{ margin-top:.75rem; }

.consent-ck{
  display:grid;
  grid-template-columns: 22px 1fr;  /* [checkbox] [testo] */
  align-items:center;
  gap:10px;
  text-align:left;
  color:var(--c-muted);
}
/* input reale nascosto: clic su label */
.consent-ck input{ position:absolute; opacity:0; pointer-events:none; }

/* box visivo */
.consent-ck .ck{
  width:22px; height:22px; border-radius:6px;
  border:1px solid var(--c-stroke);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  display:grid; place-items:center;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
/* focus/checked */
.consent-ck input:focus + .ck{
  box-shadow: 0 0 0 6px rgba(229,229,229,.12);
  border-color: var(--c-focus);
}
.consent-ck input:checked + .ck{
  border-color: var(--c-green);
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
}
.consent-ck input:checked + .ck::after{
  content:""; width:10px; height:10px; border-radius:2px; background: var(--c-green);
}

/* testo accanto al box (span finale nel tuo markup) */
.consent-ck > span:last-child{
  display:block;
  line-height:1.35;
  color:var(--c-muted);
}
.consent-ck a{ color:#fff; text-decoration:underline; }

/* errore rosso sotto (indentato come il testo) */
.consent-error{
  display:block;
  color: var(--c-red);
  font-size:.82rem;
  margin-top:.35rem;
  margin-left: calc(22px + 10px);
}

/* --- Pulsante: B/N puro --- */
.btn-cosmos{
  display:inline-block; width:100%;
  padding:14px 18px;
  border-radius:999px;
  border:1px solid #fff;
  background:#fff; color:#000;
  font:800 14px/1 var(--font-body, Inter, system-ui, sans-serif);
  letter-spacing:.08em; text-transform:uppercase;
  cursor:pointer; transition: all .25s ease;
}
.btn-cosmos:hover{ background:#ffffff; color:#fff; border-color:#fff; }
.btn-cosmos:active{ transform: translateY(1px); }

/* --- Accessibilità focus visibile (coerente B/N) --- */
.ff input:focus-visible, .ff textarea:focus-visible{
  outline:2px solid transparent;
  box-shadow: 0 0 0 8px rgba(229,229,229,.14), 0 0 0 1px rgba(229,229,229,.55) inset;
}

/* --- Link dentro la card --- */
.contact-frame a{ color:#fff; text-decoration: underline; }
.contact-frame a:hover{ opacity:.85; }

/* --- Footer pagina contatti (scuro) --- */
.page-contacts .site-footer{ background:#000; }

/* --- HEADER: fix dropdown SOLO su contacts --- */
.page-contacts .euto-topbar__row { position: relative; }
.page-contacts .euto-hgroup      { position: relative; }
.page-contacts .euto-menu{
  position:absolute; top:100%; left:50%;
  transform: translateX(-50%);
  margin-top:6px; z-index:4000; min-width:220px;
}
@media (min-width:768px){
  .page-contacts .euto-menu{ transform: translateX(-50%); }
}
/* ===== CONSENSO (contacts) — box bianco + pallino nero, mobile-ready ===== */

/* dimensioni responsive */
:root { --ck-size-contacts: 22px; --ck-gap-contacts: 10px; }
@media (max-width: 480px){
  :root { --ck-size-contacts: 28px; --ck-gap-contacts: 12px; }
}

/* griglia: usa le variabili (override della regola esistente) */
.consent-ck{
  grid-template-columns: var(--ck-size-contacts) 1fr;
  gap: var(--ck-gap-contacts);
  -webkit-tap-highlight-color: transparent;
}

/* input nativo invisibile ma focusable (posizionamento touch) */
.consent-ck input{
  position: absolute; left: 0; top: 0;
  width: var(--ck-size-contacts); height: var(--ck-size-contacts);
  margin: 0; opacity: 0;
  touch-action: manipulation;
}

/* box visivo: bianco sempre */
.consent-ck .ck{
  width: var(--ck-size-contacts); height: var(--ck-size-contacts);
  border-radius: calc(var(--ck-size-contacts) * .33);
  border: 2px solid #fff;
  background: #fff;                /* <-- bianco anche da non selezionato */
  position: relative;
  display: inline-block;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

/* focus accessibile */
.consent-ck input:focus-visible + .ck{
  box-shadow: 0 0 0 3px rgba(255,255,255,.35);
}

/* stato attivo (tap) */
.consent-ck input:active + .ck{ filter: brightness(.97); }

/* checked: resta bianco ma compare un pallino nero centrale */
.consent-ck .ck::after{
  content: "";
  position: absolute;
  width: calc(var(--ck-size-contacts) * .45);
  height: calc(var(--ck-size-contacts) * .45);
  border-radius: 50%;
  background: #ececec;                /* pallino nero */
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: transform .15s ease;
  pointer-events: none;
}
.consent-ck input:checked + .ck::after{
  transform: translate(-50%, -50%) scale(1);
}

/* testo a destra (leggermente più grande su mobile per evitare zoom iOS) */
.consent-ck > span:last-child{ font-size: 16px; color: var(--c-muted); }

/* messaggio d'errore allineato */
.consent-error{
  margin-left: calc(var(--ck-size-contacts) + var(--ck-gap-contacts));
}

/* errore: bordo rosso (facoltativo, se nel JS metti aria-invalid) */
.consent-ck input[aria-invalid="true"] + .ck{
  border-color:#ff3b30 !important;
  box-shadow:0 0 0 2px rgba(255,59,48,.20) !important;
}