/*
  REGISTRAZIONE (register.php) — form pubblico multi-profilo (atleta,
  genitore di minori, organico, associato, tifoso). Riusa forms.css per i
  campi, cards.css per i riquadri, modals.css per le due modali (consensi
  legali, conferma atleta temporaneo). Qui vive solo il layout specifico:
  righe di opzione con checkbox, box qualifica organico, box minore, box
  consensi.
*/

.register-wrap {
  max-width: 760px;
  margin: 0 auto;
}

/* register-temp.php: form singolo e più stretto rispetto a register.php */
.register-wrap--narrow {
  max-width: 500px;
}

.register-fieldset__title {
  position: relative;
  text-align: center;
  color: var(--color-text-inverse);
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: var(--text-2xl);
  margin: 0 0 var(--space-5);
}

.register-back-link {
  display: block;
  text-align: center;
  margin-top: var(--space-5);
}

.register-intro {
  margin-bottom: var(--space-6);
  padding: var(--space-5);
  background: rgba(90, 93, 98, 0.8); /* var(--color-gray-600) all'80% */
}

.register-intro p {
  text-align: center;
  font-size: var(--text-sm);
  margin-bottom: var(--space-2);
}

.register-intro hr {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  margin: var(--space-4) 0;
}

.register-intro__lead {
  display: block;
  background: var(--color-brand);
  color: var(--color-text-inverse);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
}

.register-intro__hint {
  font-weight: var(--weight-regular);
  color: rgba(255, 255, 255, 0.8);
  font-size: var(--text-sm);
  text-align: left;
}

.register-intro__hint a {
  color: var(--color-text-inverse);
  text-decoration: underline;
}

/* ===== Griglia di opzione: 5 box rossi su 2 colonne ===== */
.option-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-4);
}

.option-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-brand);
  color: var(--color-text-inverse);
  cursor: pointer;
  transition: background var(--transition-fast), transform var(--transition-fast);
}

.option-row:hover {
  background: var(--color-brand-dark);
  transform: translateY(-2px);
}

.option-row input[type="checkbox"] {
  width: 24px;
  height: 24px;
  min-width: 24px;
  margin-top: 2px;
  accent-color: var(--color-white);
  cursor: pointer;
}

.option-row__title {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-weight: var(--weight-semibold);
  color: var(--color-text-inverse);
}

.option-row__desc {
  margin: var(--space-1) 0 0;
  color: rgba(255, 255, 255, 0.85);
  font-size: var(--text-sm);
}

.option-grid-divider {
  grid-column: 1 / -1;
  border: none;
  border-top: 2px solid var(--color-brand);
  margin: var(--space-2) 0;
}

@media (max-width: 600px) {
  .option-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== Box qualifica organico ===== */
.organico-box {
  margin: var(--space-5) 0;
  padding: var(--space-5);
  background: rgba(90, 93, 98, 0.8); /* var(--color-gray-600) all'80% */
  border-left: 4px solid var(--color-brand-dark);
}

.organico-box .form-label {
  color: var(--color-text-inverse);
}

.organico-box__field {
  margin-top: var(--space-4);
}

.organico-box .form-error {
  display: none;
  margin-top: var(--space-2);
}

/* ===== Fieldset dati anagrafici =====
   position:relative + legend assoluta invece della normale <legend>: di
   default il browser la piazza a cavallo del border-top del fieldset,
   ignorando il padding — con angoli stondati taglia male il testo (fuori
   dal box). Il padding-top extra sul fieldset lascia spazio alla legend
   senza sovrapporsi alla prima riga di campi. */
.register-fieldset {
  position: relative;
  margin-bottom: var(--space-6);
  padding: var(--space-8) var(--space-5) var(--space-5);
  background: rgba(90, 93, 98, 0.8); /* var(--color-gray-600) all'80% */
  border: 1px solid var(--color-brand);
  border-radius: var(--radius-md);
}

.register-fieldset .form-label {
  color: var(--color-text-inverse);
}

.register-fieldset legend {
  position: absolute;
  top: var(--space-4);
  left: var(--space-5);
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--color-text-inverse);
}

.password-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.password-wrap .form-control {
  padding-right: var(--space-7);
}

/* ===== Box consensi (utente principale o singolo minore) =====
   Box bianco "flottante" dentro i pannelli scuri sopra: colore esplicito,
   non deve ereditare il bianco impostato per .form-label sui contenitori. */
.consensi-box {
  margin-top: var(--space-4);
  padding: var(--space-4);
  background: var(--color-white);
  color: var(--color-text);
  border-radius: var(--radius-md);
}

.consensi-box__notice {
  font-size: var(--text-xs);
  color: var(--color-brand);
}

.consent-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

.consent-label .info-icon {
  font-weight: var(--weight-regular);
  font-size: var(--text-xs);
  color: var(--color-brand);
  cursor: pointer;
  text-decoration: underline;
}

.consent-radio-group {
  display: flex;
  gap: var(--space-4);
  margin-bottom: var(--space-3);
  font-weight: var(--weight-regular);
}

.consent-radio-group label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  font-size: var(--text-sm);
}

/* ===== Box minore (dinamico via JS) ===== */
.minore-box {
  margin-bottom: var(--space-5);
  padding: var(--space-5);
  background: rgba(90, 93, 98, 0.8); /* var(--color-gray-600) all'80%, come il fieldset attorno */
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.25);
}

.minore-box .form-label {
  color: var(--color-text-inverse);
}

.minore-box__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-3);
}

.minore-box__header h4 {
  margin: 0;
  color: var(--color-text-inverse);
}

/* ===== Azioni di test/debug (visibili solo per chi lavora sul form) ===== */
.register-debug {
  text-align: center;
  margin: var(--space-5) 0;
}

.register-debug__hint {
  margin-top: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

.register-test-link {
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  cursor: pointer;
  padding: var(--space-1) var(--space-2);
  opacity: 0.12;
  transition: opacity var(--transition-fast);
}

.register-test-link:hover {
  opacity: 0.6;
}

/* ===== Modale conferma atleta temporaneo ===== */
.temp-match-warning {
  font-weight: var(--weight-semibold);
  color: var(--color-warning);
  margin-bottom: var(--space-4);
}

.temp-match-person {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.temp-match-person__photo,
.temp-match-person__photo-placeholder {
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  border-radius: var(--radius-full);
  border: 3px solid var(--color-warning);
  object-fit: cover;
}

.temp-match-person__photo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-gray-200);
}

.temp-match-person__name {
  font-size: var(--text-xl);
  color: var(--color-brand);
  font-weight: var(--weight-bold);
  line-height: 1.2;
}

.temp-match-person__team {
  margin-top: var(--space-1);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-weight: var(--weight-semibold);
}

.temp-match-note {
  margin-bottom: var(--space-5);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* ===== Modale consensi legali (testo lungo) ===== */
.consent-modal-body h4 {
  margin-top: var(--space-4);
  color: var(--color-brand);
}

.consent-modal-body p,
.consent-modal-body li {
  font-size: var(--text-sm);
  color: var(--color-text);
}