/* ============================================================================
   CHECKOUT — the purchase modals. Behaviour is checkout.js.

   Source: `Purchase/Checkout process`, FE Client file HrxSPGo2hxOHYdCkLPPnMu,
   section 47890:269127 — `Order options` (47890:268048 / 47890:269128),
   `Order summary` (47890:269022) and `Purchase successful` (33200:401954).
   The Stripe page is stripe.css.

   TOKEN RESOLUTION. This section is on the legacy `✅ …` library, like §32 —
   FE Client CLAUDE.md F1: zero Tokens Template bindings. So every value below
   is resolved by MEANING, not copied. The frame's own styles, and what they
   become here:

     | Frame style                     | Hex     | Token                     |
     |---------------------------------|---------|---------------------------|
     | ✅ General/White                | #FFFFFF | `surface/raised`          |
     | ✅ Text & Icons/Headlines       | #262626 | `content/headline`        |
     | ✅ Text & Icons/Primary         | #595959 | `content/primary`         |
     | ✅ Text & Icons/Marginal        | #8C8C8C | `content/secondary`       |
     | ✅ Elements/Borders & Dividers  | #E8E8E8 | `border/default`          |
     | ✅ Elements/Border Button       | #D9D9D9 | `border/default`          |
     | ✅ Action/BigHeart/Primary      | #4211A0 | `solid/brand/default`     |
     | ✅ Alert/Success/Primary        | #509E2A | `content/success`         |
     | ✅ Alert/Success/Secondary 10%  | #EBFEE0 | `soft/success/default`    |
     | ✅ Tags/Purple/Secondary+Primary| #F9F0FF/#120338 | neutral — see below |

   `#4211A0` is the BigHeart seed and root CLAUDE.md non-negotiable 4 — the
   whole point of binding it to `solid/brand/default` is that this checkout
   must not become the seventh frozen instance of it.

   The Tag/Entity purple pair is FE Client CLAUDE.md §12 F4. card.js already
   renders every entity tag neutral so all six content objects agree; this
   reuses `.tag--entity` rather than reintroducing the raw pair.

   Type maps to the app's own scale: Headlines/H1 30/38 → heading/xl,
   Headlines/H3 20/1.4 → heading/sm, Headlines/H4 16/24 → label/lg,
   Text M 14/22 → body/md, Input Label 12/20 → body/xs.

   TODO(tokens): every bare px is a SIZE — DESIGN.md §12.4.
   ========================================================================== */

/* The comp's modal is 640 wide; `Modal / Default`'s own padding token is 24,
   which modal.css already applies. */
.checkout {
  /* TODO(tokens): size not built. 640 is the frame's width. */
  max-inline-size: 640px;
}

/* `Purchase successful` is drawn at 680. */
.checkout--success {
  max-inline-size: 680px;
}

.checkout__content {
  /* The Wrapper's own 24 padding comes from modal.css. */
  display: block;
}

/* `Modal / Checkout / Video` — the three sections, 16 apart. */
.co-object {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* --- Checkout / Header — 47890:268348 ------------------------------------ */
.co-header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
}

.co-header__thumb {
  flex: none;
  /* TODO(tokens): size not built. 128 wide at the frame's 16:9. */
  inline-size: 128px;
  block-size: 72px;
  object-fit: cover;
  border-radius: var(--shape-radius-chip);
  background: var(--color-surface-media);
}

.co-header__body {
  flex: 1 1 auto;
  min-inline-size: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3xs);
}

/* Headlines/H3 — 20/1.4 Medium, `content/headline`. */
.co-header__title {
  margin: 0;
  color: var(--color-content-headline);
  font-family: var(--font-family-text);
  font-size: var(--font-heading-sm-size);
  line-height: var(--font-heading-sm-line-height);
  font-weight: var(--font-weight-medium);
}

/* --- Sections and rows --------------------------------------------------- */
.co-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* Headlines/H4 - Medium — 16/24. */
.co-section__title {
  margin: 0;
  color: var(--color-content-headline);
  font-family: var(--font-family-text);
  font-size: var(--font-label-lg-size);
  line-height: var(--font-label-lg-line-height);
  font-weight: var(--font-weight-medium);
}

.co-rows {
  display: flex;
  flex-direction: column;
}

/* `Row / Default` — a 20px leading glyph, 16 gap, 8 block padding. */
.co-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  padding-block: var(--space-xs);
}

.co-row .icon {
  /* Optical: lines the glyph up with the first line's cap height. */
  margin-block-start: var(--space-3xs);
  color: var(--color-content-primary);
}

/* Text M - Medium — 14/22. The address row is three lines in one row, which
   is how the frame draws it. */
.co-row__content {
  min-inline-size: 0;
  display: flex;
  flex-direction: column;
  color: var(--color-content-headline);
  font-family: var(--font-family-text);
  font-size: var(--font-body-md-size);
  line-height: var(--font-body-md-line-height);
  font-weight: var(--font-weight-medium);
}

/* --- p/contact form — 26090:559829 --------------------------------------- */
.co-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* Two-up where the frame pairs them: name, then street + apartment. */
.co-form__pair {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: 1fr;
}

@media (min-width: 480px) {
  /* TODO(tokens): breakpoints not built — DESIGN.md §12.4. Below this the
     pairs stack, because two of the DS's own inputs no longer fit. */
  .co-form__pair {
    grid-template-columns: 1fr 1fr;
  }
}

/* The "Update information also in my profile" row sits clear of the form. */
.co-update {
  margin-block-start: var(--space-2xs);
}

/* --- Purchase successful — 33200:401954 --------------------------------- */
.co-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xl);
  text-align: center;
  /* The frame's Wrapper is 16, plus its Body's own 16 bottom. */
  padding-block: var(--space-2xl);
}

/* The 104px disc: `soft/success/default` behind a `content/success` tick.
   Both channels, per DESIGN.md §4.4 — and the glyph is the `_fill` weight,
   so the state is never carried by colour alone. */
.co-success__artwork {
  display: flex;
  align-items: center;
  justify-content: center;
  /* TODO(tokens): size not built. 104 = the frame's 40px glyph + 32 padding. */
  inline-size: 104px;
  block-size: 104px;
  /* Non-negotiable 7 — the circle in this system is `shape-radius-avatar`. */
  border-radius: var(--shape-radius-avatar);
  background: var(--color-soft-success-default);
  color: var(--color-content-success);
}

.co-success__artwork .icon {
  /* TODO(tokens): size not built. The frame's 40px glyph. */
  inline-size: 40px;
  block-size: 40px;
}

.co-success__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

/* Headlines/H1 — 30/38 Bold. */
.co-success__title {
  margin: 0;
  color: var(--color-content-headline);
  font-family: var(--font-family-display);
  font-size: var(--font-heading-xl-size);
  line-height: var(--font-heading-xl-line-height);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--font-letter-spacing-heading);
}

/* Text M - Regular — 14/22, with the frame's two bold runs. */
.co-success__text {
  margin: 0;
  /* TODO(tokens): size not built. A measure, not a box. */
  max-inline-size: 56ch;
  color: var(--color-content-primary);
  font-family: var(--font-family-text);
  font-size: var(--font-body-md-size);
  line-height: var(--font-body-md-line-height);
}

.co-success__text strong {
  color: var(--color-content-headline);
  font-weight: var(--font-weight-bold);
}

/* `display` on a class outranks the UA's `[hidden] { display: none }` — the
   trap button.css documents for `.btn[hidden]`. The "Update information"
   row is hidden whenever the profile address is in use. */
.co-update[hidden],
.co-row[hidden],
.co-section[hidden] {
  display: none;
}