/**
 * AMEPRES Tools V2 — Bestelltunnel, Downloadbereich und Zustandsseiten.
 *
 * Ergänzt design-tokens.css, base.css, components.css und landing.css.
 * Enthält Checkout, Zahlung, Bestätigung, Downloadlisten, Zustandsseiten
 * und den Dialog für die Rechtstexte.
 *
 * Grundsatz: Die Formularfelder behalten ihre Namen und ihr Verhalten aus V1;
 * hier wird ausschließlich ihre Darstellung gesetzt.
 *
 * @since FS2 v0.51.6
 */

@layer at2-commerce {
  /* ------------------------------------------------------------ Rahmen */
  .at2-checkout-section {
    padding-block: clamp(2.5rem, 6vw, 5rem);
  }

  .at2-checkout-narrow {
    max-width: 46rem;
  }

  .at2-checkout-head {
    margin-bottom: var(--at2-space-8);
  }

  .at2-checkout-head .at2-heading {
    margin-block: var(--at2-space-3) var(--at2-space-4);
  }

  .at2-checkout-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(19rem, 0.65fr);
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: start;
  }

  /* Formular links, Zusammenfassung rechts – im Dokument steht die
     Zusammenfassung zuerst, damit sie auf schmalen Geräten oben erscheint. */
  .at2-checkout-form { order: 1; }
  .at2-checkout-summary { order: 2; position: sticky; top: 6.5rem; }

  .at2-checkout-summary-card { display: grid; gap: var(--at2-space-3); }
  .at2-checkout-summary-note { color: var(--at2-text-dim); font-size: var(--at2-step--1); }

  .at2-checkout-lines,
  .at2-payment-lines,
  .at2-checkout-meta {
    display: grid;
    gap: var(--at2-space-2);
    margin: 0;
  }

  .at2-checkout-lines > div,
  .at2-payment-lines > div,
  .at2-checkout-meta > div {
    display: flex;
    flex-wrap: wrap;
    gap: var(--at2-space-3);
    justify-content: space-between;
    align-items: baseline;
  }

  .at2-checkout-lines dt,
  .at2-payment-lines dt,
  .at2-checkout-meta dt {
    color: var(--at2-text-dim);
    font-size: var(--at2-step--1);
  }

  .at2-checkout-lines dd,
  .at2-payment-lines dd,
  .at2-checkout-meta dd {
    margin: 0;
    color: var(--at2-text);
    text-align: right;
  }

  .at2-checkout-total {
    margin-top: var(--at2-space-3);
    padding-top: var(--at2-space-3);
    border-top: 1px solid var(--at2-line-strong);
  }

  .at2-checkout-total dt,
  .at2-checkout-total dd {
    color: var(--at2-text);
    font-size: var(--at2-step-1);
    font-weight: 750;
  }

  .at2-checkout-tax-note {
    color: var(--at2-text-dim);
    font-size: var(--at2-step--1);
  }

  .at2-checkout-confirm {
    display: grid;
    gap: var(--at2-space-4);
    margin-top: var(--at2-space-8);
    padding-top: var(--at2-space-6);
    border-top: 1px solid var(--at2-line-strong);
  }

  .at2-checkout-foot {
    margin-top: var(--at2-space-8);
    color: var(--at2-text-dim);
    font-size: var(--at2-step--1);
    text-align: center;
  }

  .at2-checkout-foot-actions {
    margin-top: var(--at2-space-8);
    align-items: center;
  }

  /* --------------------------------------------------------- Formulare */
  .at2-checkout-form .at2-field,
  .at2-lp-section .at2-field {
    margin-bottom: var(--at2-space-6);
  }

  .at2-field > label {
    color: var(--at2-text);
    font-size: var(--at2-step--1);
    font-weight: 700;
  }

  .at2-field :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
    width: 100%;
    min-height: 3.15rem;
    padding: 0.78rem 0.95rem;
    border: 1px solid var(--at2-line);
    border-radius: var(--at2-radius-sm);
    background: rgba(5, 11, 16, 0.72);
    color: var(--at2-text);
    caret-color: var(--at2-primary);
  }

  .at2-field textarea { min-height: 8rem; resize: vertical; }

  .at2-field :where(input, select, textarea):focus {
    outline: none;
    border-color: var(--at2-primary);
    box-shadow: 0 0 0 4px rgba(66, 212, 229, 0.12);
  }

  .at2-field :where(input, select, textarea)[aria-invalid="true"] {
    border-color: var(--at2-danger);
    box-shadow: 0 0 0 3px rgba(255, 126, 137, 0.11);
  }

  .at2-field-hint { margin: 0; color: var(--at2-text-dim); font-size: var(--at2-step--1); }
  .at2-field-error { margin: 0; color: var(--at2-danger); font-size: var(--at2-step--1); font-weight: 650; }

  .at2-fieldset {
    margin: 0 0 var(--at2-space-6);
    padding: var(--at2-space-6) 0 0;
    border: 0;
    border-top: 1px solid var(--at2-line-strong);
  }

  .at2-fieldset legend {
    padding: 0;
    color: var(--at2-text);
    font-size: var(--at2-step-0);
    font-weight: 750;
  }

  .at2-field--check { margin-bottom: var(--at2-space-5); }

  .at2-check {
    display: grid;
    grid-template-columns: 1.35rem minmax(0, 1fr);
    gap: var(--at2-space-3);
    align-items: start;
    color: var(--at2-text-soft);
    font-weight: 400;
    cursor: pointer;
  }

  .at2-check input {
    width: 1.35rem;
    height: 1.35rem;
    margin: 0.15rem 0 0;
    accent-color: var(--at2-primary);
  }

  .at2-check a { color: var(--at2-primary); }

  .at2-button--block { width: 100%; }

  /* ---------------------------------------------------------- Zahlung */
  .at2-payment-card { display: grid; gap: var(--at2-space-5); margin-bottom: var(--at2-space-6); }

  .at2-mono { font-family: var(--at2-font-mono); letter-spacing: 0.03em; }

  .at2-payment-reference {
    padding: var(--at2-space-4);
    border: 1px solid var(--at2-line-warm);
    border-radius: var(--at2-radius-sm);
    background: rgba(242, 160, 102, 0.08);
  }

  .at2-payment-reference dd { text-align: left; }

  .at2-payment-reference-note {
    display: block;
    margin-top: var(--at2-space-2);
    color: var(--at2-accent);
    font-size: var(--at2-step--1);
  }

  /* Stripe-Element auf dunklem Grund */
  #payment-element { margin-bottom: var(--at2-space-5); }

  /* ------------------------------------------------------- Zustände */
  .at2-state {
    padding: clamp(1.75rem, 4vw, 3rem);
    border: 1px solid var(--at2-line);
    border-left: 3px solid var(--at2-line-strong);
    border-radius: var(--at2-radius-lg);
    background: linear-gradient(150deg, var(--at2-surface), rgba(7, 17, 25, 0.9));
  }

  .at2-state .at2-heading { margin-block: var(--at2-space-3) var(--at2-space-4); }
  .at2-state--success { border-left-color: var(--at2-success); }
  .at2-state--info    { border-left-color: var(--at2-primary); }
  .at2-state--warning { border-left-color: var(--at2-warning); }
  .at2-state--error   { border-left-color: var(--at2-danger); }

  .at2-progress {
    height: 4px;
    margin-top: var(--at2-space-6);
    overflow: hidden;
    border-radius: 2px;
    background: var(--at2-line);
  }

  .at2-progress span {
    display: block;
    width: 30%;
    height: 100%;
    border-radius: 2px;
    background: var(--at2-primary);
    animation: at2-progress-pulse 2s ease-in-out infinite;
  }

  @keyframes at2-progress-pulse {
    0%, 100% { width: 20%; margin-left: 0; }
    50%      { width: 60%; margin-left: 40%; }
  }

  .at2-order-item { display: grid; gap: var(--at2-space-4); margin-top: var(--at2-space-6); }

  .at2-license { display: grid; gap: var(--at2-space-2); }
  .at2-license span { color: var(--at2-text-dim); font-size: var(--at2-step--1); }

  .at2-license code {
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--at2-line-strong);
    border-radius: var(--at2-radius-sm);
    background: var(--at2-ink-950);
    color: var(--at2-text);
    font-size: var(--at2-step-0);
    overflow-wrap: anywhere;
  }

  /* -------------------------------------------------------- Downloads */
  .at2-download-groups { display: grid; gap: var(--at2-space-6); }
  .at2-download-group { display: grid; gap: var(--at2-space-4); }

  .at2-download-group__head {
    display: flex;
    flex-wrap: wrap;
    gap: var(--at2-space-3);
    align-items: center;
    padding-bottom: var(--at2-space-4);
    border-bottom: 1px solid var(--at2-line);
  }

  .at2-download-group__date {
    margin-left: auto;
    color: var(--at2-text-dim);
    font-size: var(--at2-step--1);
  }

  .at2-download-list { display: grid; gap: var(--at2-space-3); margin: 0; padding: 0; list-style: none; }

  .at2-download-item {
    display: flex;
    flex-wrap: wrap;
    gap: var(--at2-space-4);
    justify-content: space-between;
    align-items: center;
    padding: var(--at2-space-4);
    border: 1px solid var(--at2-line);
    border-radius: var(--at2-radius-sm);
  }

  .at2-download-item__text { display: grid; gap: var(--at2-space-2); min-width: 0; }
  .at2-download-item__meta { color: var(--at2-text-dim); font-size: var(--at2-step--1); }

  .at2-product-facts { margin-top: var(--at2-space-8); }

  /* ------------------------------------------------------- Rechtsdialog */
  .at2-modal { position: fixed; z-index: 200; inset: 0; display: none; }
  .at2-modal.is-open { display: block; }
  body.at2-modal-open { position: fixed; width: 100%; overflow: hidden; }

  .at2-modal__overlay { position: absolute; inset: 0; background: rgba(3, 8, 12, 0.72); }

  .at2-modal__panel {
    position: relative;
    width: min(46rem, calc(100% - 2 * var(--at2-gutter)));
    max-height: min(80vh, 48rem);
    margin: 8vh auto 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--at2-line-strong);
    border-radius: var(--at2-radius-lg);
    background: var(--at2-ink-900);
    box-shadow: var(--at2-shadow-lg);
  }

  .at2-modal__header {
    display: flex;
    gap: var(--at2-space-4);
    justify-content: space-between;
    align-items: center;
    padding: var(--at2-space-5);
    border-bottom: 1px solid var(--at2-line);
  }

  .at2-modal__title { margin: 0; font-size: var(--at2-step-1); }

  .at2-modal__close {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid var(--at2-line);
    border-radius: var(--at2-radius-pill);
    background: transparent;
    color: var(--at2-text);
    cursor: pointer;
  }

  .at2-modal__body { padding: var(--at2-space-6); overflow-y: auto; overflow-x: hidden; }
  .at2-modal__loader { color: var(--at2-text-dim); }

  /* Der Dialog laedt ganze Rechtsseiten nach. Ohne eigene Stufen greifen dort die
     Schriftgroessen der Seitenebene: die Ueberschrift kam mit 77,6 px in einen 719 px
     breiten Rahmen und lief 170 px waagerecht heraus (BUG-013).
     @since FS2 v0.51.8 */
  .at2-modal__body :where(h1, h2, h3, h4) {
    margin: 1.6em 0 0.6em;
    color: var(--at2-text);
    line-height: var(--at2-leading-heading);
    letter-spacing: var(--at2-tracking-tight);
    text-wrap: balance;
  }
  .at2-modal__body :where(h1, h2) { font-size: var(--at2-step-1); }
  .at2-modal__body :where(h3, h4) { font-size: var(--at2-step-0); }
  .at2-modal__body :where(h1, h2, h3, h4):first-child { margin-top: 0; }

  .at2-modal__body,
  .at2-modal__body :where(p, li, td, th, dd, dt, a, strong, em, span) {
    overflow-wrap: anywhere;
  }

  /* Die nachgeladenen Rechtsseiten bringen ihre eigene Seitenhuelle mit.
     Im Dialog wird daraus schlichter Fliesstext. */
  .at2-modal__body :where(.at2-section, .at2-container, .fs-article) {
    display: block;
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
  }
  .at2-modal__body :where(.at2-header, .at2-footer, .at2-breadcrumbs, .fs-print-btn) {
    display: none;
  }

  /* ------------------------------------------------------------ Schmal */
  @media (max-width: 62rem) {
    .at2-checkout-grid { grid-template-columns: minmax(0, 1fr); }
    .at2-checkout-summary { position: static; order: 0; }
    .at2-checkout-form { order: 1; }
  }

  @media (max-width: 48rem) {
    .at2-download-item { align-items: stretch; flex-direction: column; }
    .at2-download-item .at2-button { width: 100%; }
    .at2-download-group__date { margin-left: 0; }
    .at2-modal__panel { margin-top: 4vh; max-height: 88vh; }
  }

  @media print {
    .at2-modal { display: none !important; }
  }

  /* ------------------------------------------------- Support und Widerruf */
  .at2-support-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(18rem, 0.75fr);
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: start;
  }

  .at2-support-form { display: grid; gap: var(--at2-space-4); }
  .at2-support-side { display: grid; gap: var(--at2-space-5); }

  .at2-legal-note {
    margin-top: var(--at2-space-8);
    color: var(--at2-text-soft);
    font-size: var(--at2-step--1);
  }

  .at2-legal-note p { margin-block: var(--at2-space-3) 0; }

  @media (max-width: 62rem) {
    .at2-support-grid { grid-template-columns: minmax(0, 1fr); }
  }
}