/* ==========================================================================
   APP.CSS — layout di pagina del checkout (dev consensi-v3)
   Solo layout: griglia due colonne desktop, singola colonna mobile.
   Componenti e token restano in stormo-checkout.css / stormo-tokens.css.
   ========================================================================== */

@layer st.app {

  .checkout-topbar {
    border-block-end: var(--st-border-w) solid var(--st-border);
    background: var(--st-bg-surface);
  }
  .checkout-topbar__inner {
    padding-block: var(--st-space-4);
  }
  .checkout-topbar__title {
    margin: 0;
    font-size: var(--st-text-lg);
  }

  .checkout-main {
    padding-block: var(--st-space-6) var(--st-space-16);
  }

  .checkout-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--st-space-8);
    align-items: start;
  }
  @media (min-width: 900px) {
    .checkout-layout {
      grid-template-columns: minmax(0, 1fr) minmax(20rem, 24rem);
    }
    /* Su desktop il riepilogo precede visivamente il form nel DOM (per essere
       raggiungibile presto dalla lettura), ma resta a destra: l'ordine
       tabulazione segue il DOM (dati poi riepilogo), coerente con la spec. */
    .checkout-layout__summary { order: 2; }
    .checkout-layout__form { order: 1; }
  }

  .checkout-layout__form > * + * {
    margin-block-start: var(--st-space-8);
  }

  .checkout-section__intro {
    max-width: var(--st-measure);
    color: var(--st-fg-muted);
  }

  .checkout-fruitore {
    border-inline-start: var(--st-border-w-strong) solid var(--st-border);
    padding-inline-start: var(--st-space-4);
    margin-block-start: var(--st-space-5);
  }

  .checkout-submit-area {
    margin-block-start: var(--st-space-6);
  }

  .checkout-submit-status {
    text-align: center;
    min-height: 1.25em;
  }

  /* esito.html */
  .esito-card {
    max-width: var(--st-container-sm);
    margin-inline: auto;
  }
  .esito-verifica__row {
    display: flex;
    align-items: center;
    gap: var(--st-space-3);
  }
}