/* =============================================================================
   ONENESS TAEKWONDO - PRENOTA LA LEZIONE DI PROVA
   =============================================================================
   Fase 4, passo 15. Riscritto sui token.

   RAPPORTO CON GLI ALTRI FOGLI
   Campi, etichette, errori, esito dell'invio, pulsanti, sezioni e apertura di
   pagina arrivano da assets/css/pagine.css. Qui restano la scelta "chi viene",
   le rassicurazioni in cima e il riquadro "cosa succede dopo".

   Sostituisce 120 righe di <style> in linea che dichiaravano una tavolozza
   propria - --pr-blue, --pr-gold, --pr-gray-200 - con valori vicini ma non
   uguali a quelli dei token, e il carattere 'Inter' invece di Barlow.

   Breakpoint: 480 / 768 / 1024, come da tokens.css.
   ============================================================================= */

/* ===========================================================================
   RASSICURAZIONI
   ===========================================================================
   Le tre obiezioni che fermano chi sta per compilare - quanto costa, cosa
   serve, devo pagare adesso - dette PRIMA del primo campo.
   =========================================================================== */

.rassicurazioni {
  list-style: none;
  margin: 0;
  padding: 0;

  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
}

.rassicurazioni li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);

  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
}

.rassicurazioni svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--color-success);
}

/* ===========================================================================
   IMPAGINAZIONE
   ===========================================================================
   Il modulo per primo, "cosa succede dopo" sotto su telefono e a fianco da
   1024px. Chi apre questa pagina ha gia' deciso: il primo campo deve essere
   raggiungibile subito.
   =========================================================================== */

.prenota {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: start;
}

@media (min-width: 1024px) {
  .prenota {
    grid-template-columns: 1.3fr .7fr;
    gap: var(--space-8);
  }
}

.modulo-riquadro {
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

@media (min-width: 768px) {
  .modulo-riquadro { padding: var(--space-6); }
}

/* ===========================================================================
   CHI VIENE
   ===========================================================================
   Due riquadri grandi invece di due pallini: il bersaglio e' l'intero
   riquadro, non un cerchio da 16px. E' la prima domanda del modulo e va
   risposta con un tocco.
   =========================================================================== */

.scelta {
  margin: 0 0 var(--space-5);
  padding: 0;
  border: none;
}

.scelta__domanda {
  padding: 0;
  margin-bottom: var(--space-3);

  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
}

.scelta__opzioni {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.scelta__opzione { display: block; cursor: pointer; }

/* Il pallino non si vede ma resta nel documento: e' lui a ricevere il fuoco e
   a essere annunciato dal lettore di schermo. Nasconderlo con display:none lo
   toglierebbe anche alla tastiera. */
.scelta__opzione input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.scelta__riquadro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  height: 100%;
  padding: var(--space-4) var(--space-3);

  text-align: center;
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);

  transition: border-color var(--duration-fast) var(--ease),
              background var(--duration-fast) var(--ease);
}

.scelta__riquadro svg {
  width: 26px;
  height: 26px;
  color: var(--color-text-muted);
  transition: color var(--duration-fast) var(--ease);
}

.scelta__riquadro strong {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-text);
}

.scelta__riquadro em {
  font-style: normal;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* Selezionata: bordo pieno E fondo colorato. Il solo bordo, su uno schermo al
   sole, non si distingue. */
.scelta__opzione input:checked + .scelta__riquadro {
  border-color: var(--color-primary);
  background: var(--otkd-blue-50);
}

.scelta__opzione input:checked + .scelta__riquadro svg { color: var(--color-primary); }

/* Il fuoco da tastiera e' sul pallino invisibile: l'anello va disegnato sul
   riquadro, altrimenti chi naviga col tabulatore non vede dove si trova. */
.scelta__opzione input:focus-visible + .scelta__riquadro {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

@media (hover: hover) {
  .scelta__riquadro:hover { border-color: var(--color-primary); }
}

/* Campo del genitore: compare sotto la scelta, con un filo che lo lega alla
   domanda da cui dipende. */
.campo-genitore {
  padding: var(--space-4);
  background: var(--otkd-blue-50);
  border-radius: var(--radius);
}

.campo-genitore[hidden] { display: none; }

/* ===========================================================================
   NOTA FINALE
   =========================================================================== */

.modulo-nota-finale {
  margin: var(--space-4) 0 0;
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  color: var(--color-text-muted);
}

.modulo-nota-finale a {
  color: var(--color-primary);
  font-weight: 600;
}

/* ===========================================================================
   COSA SUCCEDE DOPO
   ===========================================================================
   Il modulo precedente finiva con il pulsante e basta: si premeva senza sapere
   se qualcuno avrebbe risposto, quando, e che cosa portare.
   =========================================================================== */

.dopo {
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.dopo__titolo {
  margin: 0 0 var(--space-4);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-text);
}

.dopo__passi {
  list-style: none;
  margin: 0 0 var(--space-5);
  padding: 0;

  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.dopo__passi li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.dopo__numero {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;

  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: 1;

  color: var(--color-on-primary);
  background: var(--color-primary);
  border-radius: var(--radius-full);
}

.dopo__passi strong {
  display: block;
  font-weight: 600;
  color: var(--color-text);
}

.dopo__passi p {
  margin: 2px 0 0;
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  color: var(--color-text-muted);
}

.dopo__contatto {
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.dopo__contatto p {
  margin: 0 0 var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.dopo__contatto .pulsante { width: 100%; }