/* ==========================================================================
   Scuola Edile Modena — Verifica attestati
   Pagina di servizio: modulo di verifica con esito positivo/negativo.
   Dipende da css/design-system.css per token, header, footer, Badge, Card,
   IconTile, SectionHeading e Button.

   Sorgente: progetto Claude Design "Scuola Edile sito riporto"
     sito/pagine/VerificaAttestati.dc.html
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Componente Input del design system
   Portato da _ds_bundle.js (components/core/Input.jsx). Terza pagina che ne ha
   bisogno dopo CPT e Registrazione: al merge va promosso una volta sola in
   design-system.css, che qui resta identico su tutti i branch.
   -------------------------------------------------------------------------- */
.se-input { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.se-input__label { font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--navy); }
.se-input__wrap { position: relative; display: flex; align-items: center; }
.se-input__field {
  width: 100%;
  padding: 12px 16px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-light);
  background: var(--white);
  color: var(--navy);
  outline: none;
  transition: border-color var(--transition-smooth);
}
.se-input__field:focus { border-color: var(--terracotta); }

/* --------------------------------------------------------------------------
   2. Sezione e decorazioni
   -------------------------------------------------------------------------- */
.va-section { position: relative; padding: 64px 0 80px; overflow: hidden; }

/* Due aloni sfocati, l'unica decorazione ammessa dal design system */
.va-blob {
  position: absolute;
  width: 384px; height: 384px;
  border-radius: 50%;
  filter: blur(64px);
  pointer-events: none;
}
.va-blob--navy { top: 80px; right: -80px; opacity: 0.2; background: var(--navy); }
.va-blob--terra { bottom: -80px; left: -80px; opacity: 0.3; background: var(--terracotta); }

.va-shell {
  position: relative;
  z-index: 10;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 clamp(20px, 3vw, 32px);
}
.va-head {
  max-width: 896px;
  margin: 0 auto 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
.va-col { max-width: 768px; margin: 0 auto; }

/* --------------------------------------------------------------------------
   3. Avviso "Importante"
   -------------------------------------------------------------------------- */
.va-warning {
  display: flex;
  gap: 16px;
  padding: 24px;
  margin-bottom: 32px;
  border-radius: var(--radius-lg);
  background: var(--destructive-surface);
  border-left: 4px solid var(--destructive);
  box-shadow: var(--shadow-subtle);
}
.va-warning > .se-icon { flex-shrink: 0; margin-top: 2px; color: var(--destructive); }
.va-warning h3 {
  margin: 0 0 8px;
  font-family: var(--font-heading);
  font-size: var(--text-body-md);
  font-weight: var(--fw-bold);
  color: var(--destructive);
}
.va-warning p { margin: 0 0 8px; font-size: var(--text-sm); line-height: var(--lh-body); color: var(--text-dark); }
.va-warning p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   4. Modulo di verifica
   -------------------------------------------------------------------------- */
.va-card { padding: 48px; }
.va-form { display: flex; flex-direction: column; gap: 24px; }

/* Il design definisce @keyframes se-spin ma non lo applica a nulla: senza
   questa regola l'icona del pulsante resterebbe ferma durante la verifica. */
@keyframes se-spin { to { transform: rotate(360deg); } }
.va-spinning { animation: se-spin 1s linear infinite; transform-origin: 50% 50%; }

/* --------------------------------------------------------------------------
   5. Esiti
   -------------------------------------------------------------------------- */
.va-result {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-top: 24px;
  padding: 24px;
  border-radius: var(--radius-lg);
}
.va-result[hidden] { display: none; }
.va-result > .se-icon { flex-shrink: 0; }
.va-result h4 {
  margin: 0 0 4px;
  font-family: var(--font-heading);
  font-size: var(--text-body-md);
  font-weight: var(--fw-bold);
}
.va-result p { margin: 0; font-size: var(--text-sm); color: var(--text-medium); }

.va-result--ok {
  background: rgba(5, 150, 105, 0.06);
  border: 2px solid var(--success-strong);
}
.va-result--ok > .se-icon,
.va-result--ok h4 { color: var(--success); }

.va-result--ko {
  background: var(--destructive-surface);
  border: 2px solid var(--destructive);
}
.va-result--ko > .se-icon,
.va-result--ko h4 { color: var(--destructive); }

/* --------------------------------------------------------------------------
   6. Riquadro di aiuto
   -------------------------------------------------------------------------- */
.va-help {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-top: 32px;
  padding: 32px;
  border-radius: var(--radius-xl);
  background: var(--tint-navy);
  border: 1px solid var(--border-light);
}
.va-help h3 {
  margin: 0 0 8px;
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  color: var(--navy);
}
.va-help p { margin: 0 0 12px; font-size: var(--text-sm); line-height: var(--lh-body); color: var(--text-medium); }

/* --------------------------------------------------------------------------
   7. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .va-section { padding: 40px 0 64px; }
  .va-card { padding: 28px; }
  .va-help { padding: 24px; }
}

@media (max-width: 640px) {
  .va-card { padding: 20px; }
  .va-warning { padding: 16px; }
  .va-help { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .va-spinning { animation: none; }
}