/* ==================================================================
   Registrazione cliente
   Riusa i token di shared.css e l'impianto di login.css; qui c'e' solo
   cio' che serve a un modulo lungo, che il login non ha.
   ================================================================== */

.reg-wrap {
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 32px 16px 64px;
  /* ⚠ Trasparente, non grigio: lo sfondo lo mette `login.css` con la foto
     dell'atrio, e un fondo pieno qui la coprirebbe per intero. Era
     `var(--bg)` da quando questa pagina esisteva. */
  background: transparent;
}

.reg-card {
  width: 100%;
  max-width: 52rem;
  background: var(--white, var(--white));
  border-radius: var(--radius, 8px); /* era 10px hardcoded */
  overflow: hidden;
  box-shadow: var(--shadow, 0 8px 32px rgba(0, 0, 0, .12)); /* era un'ombra diversa da .login-card, stesso componente */
}

.reg-body { padding: 26px 28px 30px; }

.reg-intro {
  margin: 0 0 22px;
  font-size: .93rem;
  color: var(--muted, #57697d);
  line-height: 1.55;
}

/* Il modulo e' lungo: i gruppi aiutano a capire cosa si sta compilando. */
fieldset {
  border: 1px solid var(--border, #d6dee6);
  border-radius: 8px;
  padding: 16px 18px 20px;
  margin: 0 0 20px;
}

legend {
  padding: 0 8px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brand);
}

/* Il blocco dei dati facoltativi nella pagina d'invito (16/09/2026):
   chiuso, discreto, ma visibilmente apribile. Non deve sembrare una
   sezione obbligatoria richiusa per pigrizia: e' un'offerta. */
.dati-facoltativi {
  border: 1px dashed var(--border, #d6dee6);
  border-radius: 8px;
  padding: 10px 14px;
  margin: 0 0 18px;
}
.dati-facoltativi summary {
  cursor: pointer;
  font-size: .9rem;
  font-weight: 600;
  color: var(--brand, #1c4f8f);
}
.dati-facoltativi[open] summary { margin-bottom: 10px; }

/* La nota sotto il titolo di un gruppo di campi: dice PERCHE' si chiedono
   quei dati, e va letta prima di compilarli (16/09/2026, i dati minimi
   nella pagina d'invito). */
.gruppo-nota {
  margin: -4px 0 14px;
  font-size: .82rem;
  line-height: 1.5;
  color: var(--muted, #667);
}

/* Due colonne su schermi comodi, una sola quando lo spazio manca. */
.reg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 14px 18px;
}

.campo { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.campo-largo { grid-column: 1 / -1; }

.campo > span {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--mid, var(--mid));
}

.campo input,
.campo select {
  width: 100%;
  padding: 9px 11px;
  border: 1.5px solid var(--border, #d6dee6);
  border-radius: 6px;
  font-size: .92rem;
  font-family: inherit;
  color: var(--text, #18212e);
  background: var(--white, var(--white));
  outline: none;
  transition: border-color .18s ease, box-shadow .18s ease;
}

.campo input:focus,
.campo select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(43, 92, 138, .10);
}

.campo small {
  font-size: .76rem;
  color: var(--muted, var(--muted));
  line-height: 1.4;
}

/* L'asterisco distingue gli obbligatori a colpo d'occhio. */
.obb { color: var(--brand); font-weight: 700; }

/* login.css mostra l'errore solo quando ha del testo: qui arriva dal
   server e la pagina si ricarica, quindi va reso visibile subito. */
.login-error.visibile { display: block; margin-bottom: 18px; }

.reg-ok { text-align: center; padding: 18px 6px 8px; }
.reg-ok h2 { margin: 0 0 10px; font-size: 1.2rem; color: var(--mid, var(--mid)); }
.reg-ok p  { margin: 0 0 16px; color: var(--muted, #57697d); line-height: 1.6; }

/* «Cos'e' Ferrari Project Studio»: tre righe, prima di chiedere qualcosa.
   Sta SOPRA il modulo e si legge come testo, non come un avviso: niente
   riquadro, niente bordo — un riquadro direbbe «attenzione», e qui si sta
   raccontando, non avvertendo. */
.cos-e {
  /* ⚠ Lo stacco SOPRA non e' decorativo: senza, la prima riga si attaccava
     al paragrafo di benvenuto e le due cose si leggevano come una sola. */
  margin: 16px 0 22px;
  font-size: .9rem;
  line-height: 1.6;
  color: var(--muted, #57697d);
}
/* ⚠ IL RIENTRO AI LATI VALE SOLO SU `registrazione.php`.
   Le due pagine mettono questo blocco in due posti diversi: su
   `invito.php` sta dentro `.login-body`, che il suo margine ce l'ha gia';
   su `registrazione.php` e' figlio DIRETTO di `.reg-card` e non ne aveva
   nessuno — il testo toccava il bordo della scheda mentre tutto il resto
   stava rientrato di 28px. Su una finestra stretta si legge come testo
   TAGLIATO, ed e' cosi' che l'ha visto Paolo (08/09/2026).

   ⚠ Il selettore e' `>` per questo: una regola su `.cos-e` e basta avrebbe
   sommato il rientro all'altro, spostando il blocco dell'invito di 64px e
   disallineandolo dal modulo sotto. Un difetto scambiato con un altro.

   Il valore e' quello di `.reg-body`, e cambia insieme a lui. */
.reg-card > .cos-e { padding-left: 28px; padding-right: 28px; }

.cos-e p { margin: 0 0 9px; }
.cos-e p:last-child { margin-bottom: 0; }
/* La prima riga porta il nome del prodotto: un filo piu' scura, cosi'
   l'occhio parte da li' senza bisogno di grassetti. */
.cos-e p:first-child { color: var(--mid, #34495e); }

/* «Sei stato invitato... scegli come vuoi entrare»: l'istruzione pratica,
   staccata dal racconto e appoggiata al modulo che segue. */
.invito-come {
  margin: 0 0 4px;
  padding-top: 14px;
  border-top: 1px solid var(--line, #e2e8ef);
  font-size: .9rem;
  line-height: 1.55;
}

/* Il riassunto dell'informativa: quattro righe, quindici secondi.
   Riquadro leggero e non allarmante — chi si iscrive non dev'essere
   spaventato da un blocco legale, e infatti il testo intero sta altrove. */
.informativa-breve {
  margin: 18px 0 10px;
  padding: 12px 14px;
  border: 1px solid var(--line, #e2e8ef);
  border-radius: 8px;
  background: rgba(0, 0, 0, .015);
  font-size: .82rem;
  line-height: 1.55;
  color: var(--muted, #57697d);
}
.informativa-breve p  { margin: 0 0 6px; font-weight: 600; }
.informativa-breve ul { margin: 0; padding-left: 17px; }
.informativa-breve li { margin-bottom: 3px; }

/* La dichiarazione in fondo alla pagina dell'informativa, per chi era gia'
   dentro prima che questa cosa esistesse. */
.informativa-dichiara {
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid var(--line, #e2e8ef);
}
.informativa-dichiara .btn-login { margin-top: 4px; }

/* La presa visione dell'informativa privacy.
   La casella e il testo su una riga sola, e il testo NON allineato al
   centro della casella ma in alto: su due righe una casella verticalmente
   centrata sembra staccata dalla frase che dovrebbe spuntare. */
.campo-consenso {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 4px 0 18px;
  font-size: .86rem;
  line-height: 1.5;
  color: var(--muted, #57697d);
  cursor: pointer;
}
.campo-consenso input[type="checkbox"] {
  /* Un pelo piu' grande del predefinito: e' l'unico controllo della pagina
     che si preme con un dito e non si compila con la tastiera. */
  width: 17px;
  height: 17px;
  margin: 1px 0 0;
  flex: 0 0 auto;
  accent-color: var(--brand);
  cursor: pointer;
}
.campo-consenso a { color: var(--brand); }

/* La pagina dell'informativa. Testo lungo da leggere, non da compilare:
   riga piu' corta e respiro fra i paragrafi. */
.informativa { line-height: 1.65; }
.informativa h2 {
  margin: 26px 0 8px;
  font-size: 1.02rem;
  color: var(--mid, #34495e);
}
.informativa h2:first-of-type { margin-top: 6px; }
.informativa p { margin: 0 0 12px; color: var(--muted, #57697d); }
.informativa a { color: var(--brand); }
.informativa ul {
  margin: 0 0 12px;
  padding-left: 18px;
  color: var(--muted, #57697d);
}
.informativa li { margin-bottom: 5px; }
.informativa-avviso {
  margin: 0 0 16px;
  padding: 9px 12px;
  border-left: 3px solid var(--brand);
  background: rgba(0, 0, 0, .03);
  font-size: .84rem;
}
.informativa-versione {
  font-size: .78rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted, #8a99a8);
}
.informativa-torna { margin-top: 26px; }

/* 600px come admin.css: stesso livello "mobile" della cornice
   applicativa, prima ogni foglio sceglieva la propria soglia (era 560px). */
@media (max-width: 600px) {
  .reg-body { padding: 20px 16px 24px; }
  .reg-card > .cos-e { padding-left: 16px; padding-right: 16px; }
  fieldset  { padding: 12px 12px 16px; }
}

/* ── «Altri recapiti», chiuso ────────────────────────────────────────────
 *
 * ⚠ Deve sembrare UN'OFFERTA, non un riquadro da compilare: chi arriva qui
 * ha appena finito i sei campi che servono, e la riga deve leggersi come
 * «se vuoi, c'e' dell'altro» — non come un ottavo passo. Percio' niente
 * cornice piena e niente titolo in grassetto come i `<legend>`: e' meno
 * importante di quelli, e si deve vedere che lo e'.
 */
.reg-altri {
  margin: 4px 0 18px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--white);
}

.reg-altri > summary {
  padding: 11px 14px;
  font-size: .88rem;
  color: var(--brand);
  cursor: pointer;
  /* Il triangolino resta quello del browser: e' il segno che tutti
     riconoscono come «qui sotto c'e' dell'altro». */
  list-style-position: inside;
}

.reg-altri > summary:hover { color: var(--brand-h); }

/* Il rientro interno arriva solo da aperto: da chiuso non serve, e uno
   spazio sotto una riga chiusa sembrerebbe un riquadro vuoto. */
.reg-altri[open] > .reg-grid { padding: 2px 14px 16px; }

/* Aperto, si stacca dalla riga che lo apre. */
.reg-altri[open] > summary { border-bottom: 1px solid var(--border); }