/* ==========================================================================
   STORMO-CHECKOUT.CSS — kit di componenti per il checkout consensi-v3
   Goose Media Lab · Stormo Design System (espressione "carta")
   --------------------------------------------------------------------------
   Solo classi prefissate st-*. Solo token --st-* (nessun valore letterale).
   Due registri (DESIGN.md §3): SUPERFICI (radius-surface, bordo, MAI ombra)
   e CONTROLLI (radius-control/pill, bordo-control). Ombre solo su elementi
   flottanti (dialog). Focus solo :focus-visible con --st-ring.
   ========================================================================== */

@layer st.components {

  /* ---------- 0. FONT SELF-HOSTED (variabili, font-display: swap) --------- */
  @font-face {
    font-family: "Fraunces";
    src: url("fonts/fraunces-var.woff2") format("woff2-variations"),
         url("fonts/fraunces-var.woff2") format("woff2");
    font-weight: 300 900;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: "Onest";
    src: url("fonts/onest-var.woff2") format("woff2-variations"),
         url("fonts/onest-var.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
  }

  /* ---------- 1. RESET MINIMO E BASE DI PAGINA ---------------------------- */
  *, *::before, *::after { box-sizing: border-box; }

  [hidden] { display: none !important; }

  html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: auto;
  }
  @media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
  }

  body {
    margin: 0;
    min-height: 100dvh;
    background: var(--st-bg-canvas);
    color: var(--st-fg);
    font-family: var(--st-brand-font-sans, var(--st-font-sans));
    font-size: var(--st-text-md);
    line-height: var(--st-leading-body);
    font-variant-numeric: tabular-nums;
  }

  h1, h2, h3, h4 {
    font-family: var(--st-brand-font-display, var(--st-font-display));
    font-weight: 500;
    font-variation-settings: "SOFT" 50;
    letter-spacing: var(--st-tracking-tight);
    line-height: var(--st-leading-tight);
    margin: 0 0 var(--st-space-3);
    color: var(--st-fg);
  }

  p { margin: 0 0 var(--st-space-3); }
  ul, ol { margin: 0 0 var(--st-space-3); padding-inline-start: 1.25em; }

  a { color: var(--st-fg-link); }

  fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
  legend { padding: 0; width: 100%; }
  button { font: inherit; color: inherit; }
  input, select, textarea { font: inherit; color: inherit; }

  /* Skip-link (2.4.1 Bypass Blocks): visibile solo al focus */
  .st-skip-link {
    position: absolute;
    top: var(--st-space-2);
    left: var(--st-space-2);
    z-index: var(--st-z-toast);
    padding: var(--st-space-2) var(--st-space-4);
    background: var(--st-bg-surface);
    color: var(--st-fg);
    border: var(--st-border-w) solid var(--st-border-control);
    border-radius: var(--st-radius-control);
    text-decoration: none;
    transform: translateY(-200%);
    transition: transform calc(var(--st-dur-1) * var(--st-motion-scale)) var(--st-ease-out);
  }
  .st-skip-link:focus-visible {
    transform: translateY(0);
    box-shadow: var(--st-ring);
    outline: none;
  }

  /* Focus visibile ovunque — mai outline: none senza sostituto */
  :focus-visible {
    outline: none;
    box-shadow: var(--st-ring);
    border-radius: var(--st-radius-xs);
  }

  /* ---------- 2. OCCHIELLO (firma Stormo) --------------------------------- */
  .st-eyebrow {
    display: block;
    margin: 0 0 var(--st-space-2);
    font-family: var(--st-brand-font-sans, var(--st-font-sans));
    font-size: var(--st-text-xs);
    font-weight: 600;
    letter-spacing: var(--st-tracking-eyebrow);
    text-transform: uppercase;
    color: var(--st-fg-muted);
  }

  /* ---------- 3. PAGE ------------------------------------------------------ */
  .st-page {
    max-width: var(--st-container-lg);
    margin-inline: auto;
    padding-inline: var(--st-space-4);
  }
  @media (min-width: 640px) {
    .st-page { padding-inline: var(--st-space-6); }
  }

  /* ---------- 4. CARD (superficie) ----------------------------------------- */
  .st-card {
    background: var(--st-bg-surface);
    border: var(--st-border-w) solid var(--st-border);
    border-radius: var(--st-radius-surface);
    padding: var(--st-card-p);
  }

  /* ---------- 5. STEPPER (solo visuale) ------------------------------------ */
  .st-stepper {
    padding-block: var(--st-space-4);
  }
  .st-stepper__list {
    list-style: none;
    display: flex;
    gap: var(--st-space-2);
    margin: 0;
    padding: 0;
  }
  .st-stepper__item {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: var(--st-space-2);
    padding: var(--st-space-2) var(--st-space-3);
    border-radius: var(--st-radius-control);
    font-size: var(--st-text-sm);
    color: var(--st-fg-muted);
    background: transparent;
  }
  .st-stepper__num {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: var(--st-radius-pill);
    border: var(--st-border-w-strong) solid var(--st-border-control);
    font-size: var(--st-text-xs);
    font-weight: 700;
  }
  .st-stepper__item[aria-current="step"] {
    background: var(--st-primary-soft);
    color: var(--st-primary-soft-fg);
    font-weight: 600;
  }
  .st-stepper__item[aria-current="step"] .st-stepper__num {
    border-color: var(--st-primary);
    background: var(--st-primary);
    color: var(--st-primary-fg);
  }
  .st-stepper__item.is-complete .st-stepper__num {
    border-color: var(--st-success);
    background: var(--st-success);
    color: var(--st-on-success);
  }
  @media (max-width: 639px) {
    .st-stepper__label { display: none; }
  }

  /* ---------- 6. FIELD (controllo) ----------------------------------------- */
  .st-field {
    display: block;
    margin-block-end: var(--st-space-5);
  }
  .st-field > label {
    display: block;
    font-weight: 600;
    margin-block-end: var(--st-space-1);
  }
  .st-field input,
  .st-field select {
    display: block;
    width: 100%;
    min-height: var(--st-control-h-lg);
    padding-inline: var(--st-control-px);
    background: var(--st-bg-surface);
    color: var(--st-fg);
    border: var(--st-border-w) solid var(--st-border-control);
    border-radius: var(--st-radius-control);
    transition: border-color calc(var(--st-dur-1) * var(--st-motion-scale)) var(--st-ease-out);
  }
  .st-field input:disabled,
  .st-field select:disabled {
    background: var(--st-bg-muted);
    color: var(--st-fg-muted);
    cursor: not-allowed;
  }
  .st-help {
    display: block;
    margin-block-start: var(--st-space-1);
    font-size: var(--st-text-sm);
    color: var(--st-fg-muted);
  }
  .st-help--warning {
    color: var(--st-warning-fg);
  }
  .st-inline-hint {
    display: inline;
    font-weight: 400;
    font-size: var(--st-text-sm);
    color: var(--st-fg-muted);
  }
  .st-field-error input,
  .st-field-error select {
    border-color: var(--st-danger);
    border-width: var(--st-border-w-strong);
  }
  .st-field-error > label { color: var(--st-danger-fg); }
  .st-field__error {
    display: flex;
    align-items: flex-start;
    gap: var(--st-space-2);
    margin-block-start: var(--st-space-1);
    font-size: var(--st-text-sm);
    font-weight: 600;
    color: var(--st-danger-fg);
  }
  .st-field-row {
    display: grid;
    gap: var(--st-space-4);
    grid-template-columns: 1fr;
  }
  @media (min-width: 480px) {
    .st-field-row--2 { grid-template-columns: 1fr 1fr; }
    .st-field-row--cap-citta-prov { grid-template-columns: 6rem 1fr 5rem; }
  }

  /* ---------- 7. CHECKBOX (consenso) ---------------------------------------- */
  .st-checkbox {
    display: block;
    background: var(--st-bg-surface);
    border: var(--st-border-w) solid var(--st-border);
    border-radius: var(--st-radius-surface);
    margin-block-start: var(--st-space-4);
  }
  .st-checkbox__row {
    display: grid;
    grid-template-columns: 24px 1fr;
    gap: var(--st-space-3);
    align-items: start;
    min-height: 44px;
    padding: var(--st-space-3) var(--st-space-4);
    cursor: pointer;
  }
  .st-checkbox input[type="checkbox"] {
    width: 24px;
    height: 24px;
    margin: 0;
    margin-block-start: 2px;
    accent-color: var(--st-primary);
    flex: 0 0 auto;
  }
  .st-checkbox__text {
    color: var(--st-fg);
    line-height: var(--st-leading-body);
  }
  .st-checkbox__leggi {
    background: none;
    border: 0;
    padding: 0;
    margin-inline-start: var(--st-space-1);
    color: var(--st-fg-link);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    font-weight: 600;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .st-checkbox__error {
    margin: 0 var(--st-space-4) var(--st-space-3);
  }
  .st-checkbox--invalid {
    border-color: var(--st-danger);
    border-width: var(--st-border-w-strong);
  }
  .st-checkbox__consequence {
    margin: 0 var(--st-space-4) var(--st-space-3);
    padding-inline-start: var(--st-space-3);
    border-inline-start: var(--st-border-w-strong) solid var(--st-border);
    font-size: var(--st-text-sm);
    color: var(--st-fg);
  }

  /* ---------- 8. BUTTON (controllo, pillola) --------------------------------- */
  .st-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--st-space-2);
    min-height: var(--st-control-h-lg);
    padding-inline: var(--st-space-6);
    border-radius: var(--st-radius-pill);
    border: var(--st-border-w) solid transparent;
    font-weight: 600;
    font-size: var(--st-text-md);
    cursor: pointer;
    text-decoration: none;
    transition: background-color calc(var(--st-dur-1) * var(--st-motion-scale)) var(--st-ease-out);
  }
  .st-btn:disabled { cursor: not-allowed; opacity: 0.7; }

  .st-btn-primary {
    background: var(--st-primary);
    color: var(--st-primary-fg);
    width: 100%;
  }
  .st-btn-primary:hover:not(:disabled) { background: var(--st-primary-hover); }
  .st-btn-primary:active:not(:disabled) { background: var(--st-primary-active); }

  .st-btn-secondary {
    background: var(--st-bg-surface);
    color: var(--st-fg);
    border-color: var(--st-border-control);
  }
  .st-btn-secondary:hover:not(:disabled) { background: var(--st-bg-muted); }

  /* ---------- 9. ALERT ------------------------------------------------------- */
  .st-alert {
    display: flex;
    gap: var(--st-space-3);
    padding: var(--st-space-4);
    border-radius: var(--st-radius-surface);
    border: var(--st-border-w) solid var(--st-border);
    font-size: var(--st-text-sm);
  }
  .st-alert p { margin: 0; }
  .st-alert p + p { margin-block-start: var(--st-space-2); }
  .st-alert-info {
    background: var(--st-info-soft);
    color: var(--st-info-fg);
    border-color: transparent;
  }
  .st-alert-warning {
    background: var(--st-warning-soft);
    color: var(--st-warning-fg);
    border-color: transparent;
  }
  .st-alert-danger {
    background: var(--st-danger-soft);
    color: var(--st-danger-fg);
    border-color: transparent;
  }

  /* ---------- 10. DIALOG (flottante, ombra ammessa) --------------------------- */
  .st-dialog {
    padding: 0;
    border: 0;
    border-radius: var(--st-radius-surface);
    background: var(--st-bg-surface);
    color: var(--st-fg);
    box-shadow: var(--st-shadow-overlay);
    max-width: var(--st-measure);
    width: min(var(--st-measure), calc(100vw - var(--st-space-8)));
    max-height: 80vh;
  }
  .st-dialog::backdrop {
    background: var(--st-bg-overlay);
  }
  .st-dialog__header {
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--st-space-3);
    padding: var(--st-space-4) var(--st-space-5);
    background: var(--st-bg-surface);
    border-bottom: var(--st-border-w) solid var(--st-border);
  }
  .st-dialog__header h2 { margin: 0; font-size: var(--st-text-lg); }
  .st-dialog__close {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    display: inline-grid;
    place-items: center;
    background: none;
    border: var(--st-border-w) solid transparent;
    border-radius: var(--st-radius-pill);
    font-size: var(--st-text-xl);
    line-height: 1;
    cursor: pointer;
    color: var(--st-fg-muted);
  }
  .st-dialog__close:hover { background: var(--st-bg-muted); color: var(--st-fg); }
  .st-dialog__body {
    padding: var(--st-space-5);
    overflow-y: auto;
    max-height: calc(80vh - 4.5rem);
    line-height: var(--st-leading-body);
  }
  .st-dialog__body :first-child { margin-block-start: 0; }

  /* ---------- 11. SUMMARY ----------------------------------------------------- */
  .st-summary { }
  .st-summary__title {
    font-size: var(--st-text-lg);
  }
  .st-summary__coach {
    color: var(--st-fg-muted);
    font-size: var(--st-text-sm);
    margin-block-end: var(--st-space-4);
  }
  .st-summary__price {
    display: flex;
    align-items: baseline;
    gap: var(--st-space-2);
    padding-block: var(--st-space-3);
    border-block-start: var(--st-border-w) solid var(--st-border);
  }
  .st-summary__price strong {
    font-size: var(--st-text-2xl);
    font-family: var(--st-brand-font-display, var(--st-font-display));
  }
  .st-summary__iva {
    color: var(--st-fg);
    font-size: var(--st-text-sm);
    margin-block-end: var(--st-space-5);
  }
  @media (min-width: 900px) {
    .st-summary--sticky {
      position: sticky;
      top: var(--st-space-6);
    }
  }

  /* ---------- 12. INTERRUPT (blocco minorenni) -------------------------------- */
  .st-interrupt {
    min-height: 60vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: var(--st-space-4);
    padding: var(--st-space-8) var(--st-space-4);
    max-width: var(--st-measure);
    margin-inline: auto;
  }
  .st-interrupt__icon {
    font-size: var(--st-text-4xl);
    line-height: 1;
  }
  .st-interrupt__title {
    font-size: var(--st-text-2xl);
  }
  .st-interrupt__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--st-space-3);
    margin-block-start: var(--st-space-2);
  }

  /* ---------- 13. SPINNER (anello) --------------------------------------------- */
  .st-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 3px solid var(--st-primary-fg);
    border-top-color: transparent;
    opacity: 0.85;
    animation: st-spin calc(var(--st-dur-4) * 2) linear infinite;
    flex: 0 0 auto;
  }
  @keyframes st-spin {
    to { transform: rotate(360deg); }
  }
  @media (prefers-reduced-motion: reduce) {
    .st-spinner {
      animation: none;
      border-top-color: var(--st-primary-fg);
      opacity: 0.5;
    }
  }

  /* ---------- 14. SKELETON (catalogo) ------------------------------------------ */
  .st-skeleton {
    display: block;
    border-radius: var(--st-radius-surface);
    background: linear-gradient(
      90deg,
      var(--st-bg-muted) 25%,
      var(--st-bg-sunken) 37%,
      var(--st-bg-muted) 63%
    );
    background-size: 400% 100%;
    animation: st-skeleton-wave calc(var(--st-dur-4) * 4) ease-in-out infinite;
    min-height: 12rem;
  }
  @keyframes st-skeleton-wave {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
  }
  @media (prefers-reduced-motion: reduce) {
    .st-skeleton { animation: none; background: var(--st-bg-muted); }
  }
}