/* =========================================================================
   checkout.css
   GoldBridge — split-layout pre-checkout page.
   Left: order summary (42%) with ambient blobs.
   Right: customer form (58%).
   Mobile (≤768px): stacks; left panel collapses to plans + total only.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Shell
   ------------------------------------------------------------------------- */
.co-body {
  background: var(--bg);
  margin: 0;
  min-height: 100vh;
}

.co-app {
  display: flex;
  align-items: stretch;
  min-height: 100vh;
}

@media (min-width: 769px) {
  .co-app    { height: 100vh; }
  .co-summary,
  .co-pane   { overflow-y: auto; }
}

/* -------------------------------------------------------------------------
   Left panel — order summary
   ------------------------------------------------------------------------- */
.co-summary {
  position: relative;
  overflow: hidden;
  width: 42%;
  flex-shrink: 0;
  background: #0D0D15;
  border-right: 1px solid rgba(224, 183, 62, 0.10);
  padding: clamp(28px, 4vw, 56px);
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 4vw, 44px);
}

/* Direct children stack above the ambient blob layer */
.co-summary > * { position: relative; z-index: 1; }

/* -------------------------------------------------------------------------
   Ambient blobs (decorative, same style as the home hero)
   ------------------------------------------------------------------------- */
.co-summary__blobs {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.co-blob {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
}

.co-blob--1 {
  top: -10%;
  left: -20%;
  width: 400px;
  height: 400px;
  background: var(--gold);
  opacity: 0.06;
  filter: blur(100px);
  animation: blobDrift1 28s ease-in-out infinite;
}

.co-blob--2 {
  bottom: -10%;
  right: -10%;
  width: 300px;
  height: 300px;
  background: var(--copper);
  opacity: 0.05;
  filter: blur(80px);
  animation: blobDrift2 34s ease-in-out infinite;
}

@keyframes blobDrift1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(40px, 30px) scale(1.04); }
  66%      { transform: translate(-20px, 50px) scale(0.97); }
}

@keyframes blobDrift2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  40%      { transform: translate(-50px, 20px) scale(1.06); }
  70%      { transform: translate(30px, -30px) scale(0.95); }
}

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

/* -------------------------------------------------------------------------
   Logo · Back link
   ------------------------------------------------------------------------- */
.co-summary__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.co-logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--gold);
  text-decoration: none;
}

.co-logo__mark {
  width: 22px;
  height: 18px;
}

.co-logo__word {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 22px;
  letter-spacing: 0.01em;
  color: var(--text);
  line-height: 1;
}

.co-back {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--muted);
  text-decoration: none;
  transition: color 200ms ease;
}
.co-back:hover { color: var(--gold); }

.co-summary__body {
  display: flex;
  flex-direction: column;
  gap: 22px;
  flex: 1;
}

/* -------------------------------------------------------------------------
   "Your Order" eyebrow — rhymes with the right panel's .co-eyebrow.
   Same gold dot signature so the two panels speak the same language.
   ------------------------------------------------------------------------- */
.co-summary__eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  line-height: 1;
}

.co-summary__eyebrow::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  margin-right: 8px;
  vertical-align: middle;
}

/* -------------------------------------------------------------------------
   Mobile-only summary toggle (compact header with plan + total + chevron).
   Hidden on desktop. Tap on mobile expands/collapses .co-summary__body.
   ------------------------------------------------------------------------- */
.co-summary__toggle {
  display: none;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--radius);
  font: inherit;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  transition: background 180ms ease, border-color 180ms ease;
}

.co-summary__toggle:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(224, 183, 62, 0.3);
}

.co-summary__toggle-text {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
}

.co-summary__toggle-plan {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 17px;
  color: var(--text);
}

.co-summary__toggle-price {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--gold-light);
}

.co-summary__toggle-chev {
  width: 14px;
  height: 14px;
  color: var(--muted);
  transition: transform 220ms var(--ease-out);
}

.co-summary__toggle[aria-expanded="true"] .co-summary__toggle-chev {
  transform: rotate(180deg);
}

/* -------------------------------------------------------------------------
   Plan picker (stacked cards)
   ------------------------------------------------------------------------- */
.co-plans {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.co-plan {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  /* Slightly more elevated than before — non-selected state used to disappear
     into the dark panel and read as "disabled". This makes both options
     feel selectable. */
  background: rgba(255, 255, 255, 0.025);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-left: 3px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  text-align: left;
  color: var(--text);
  font: inherit;
  transition:
    border-color 200ms ease,
    background    200ms ease,
    color         200ms ease;
}

.co-plan:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(224, 183, 62, 0.4);
}

.co-plan.is-selected {
  border: 1px solid rgba(224, 183, 62, 0.5);
  border-left: 3px solid var(--gold);
  background: rgba(224, 183, 62, 0.06);
  color: var(--text);
}

.co-plan__name {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.15;
  color: inherit;
}

.co-plan__price {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--muted);
  white-space: nowrap;
}

.co-plan.is-selected .co-plan__price {
  color: var(--gold);
}

/* -------------------------------------------------------------------------
   Order details (line items)
   ------------------------------------------------------------------------- */
.co-details {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.co-detail {
  display: grid;
  grid-template-columns: 14px 1fr;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.co-detail__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  width: 14px;
  height: 14px;
}

.co-detail__check svg {
  width: 12px;
  height: 12px;
  display: block;
}

/* -------------------------------------------------------------------------
   Divider · Total · Trust
   ------------------------------------------------------------------------- */
.co-divider {
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  margin: 4px 0;
}

.co-total {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

.co-total__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  padding-bottom: 6px;
}

.co-total__amount {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  line-height: 1;
}

.co-total__currency {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.3em;
  color: var(--gold);
  opacity: 0.7;
  line-height: 1;
}

.co-total__value {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(40px, 4.5vw, 48px);
  line-height: 0.95;
  color: var(--gold-light);
  letter-spacing: -0.015em;
  display: inline-block;
}

/* Quick "land" flash when the value changes via plan toggle. */
.co-total__value.is-flash {
  animation: coTotalFlash 360ms var(--ease-out);
}

@keyframes coTotalFlash {
  0%   { opacity: 0.3; transform: translateY(-2px); }
  60%  { opacity: 1;   transform: translateY(0); }
  100% { opacity: 1;   transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .co-total__value.is-flash { animation: none; }
}

.co-total__note {
  margin: 8px 0 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--muted);
}

/* -------------------------------------------------------------------------
   Accepted payment methods — icon + label chips, no separator dots needed
   since flex gap does the spacing. "Pay with" prefix sets the context in
   smaller mono uppercase, then each method shows a tiny SVG + name.
   ------------------------------------------------------------------------- */
.co-summary__pay {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin: 4px 0 0;
}

.co-pay-method__lead {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0.55;
  margin-right: 2px;
}

.co-pay-method {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.co-pay-method__icon {
  width: 12px;
  height: 12px;
  color: var(--gold);
  opacity: 0.75;
  flex-shrink: 0;
  display: block;
}

/* Crypto gets a touch more presence — it's the differentiator for Lifetime. */
.co-pay-method__icon--accent { opacity: 0.95; }

.co-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 18px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.co-trust__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--muted);
}

.co-trust__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
  color: var(--gold);
  opacity: 0.75;
  flex-shrink: 0;
}

.co-trust__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* -------------------------------------------------------------------------
   Right panel — form
   ------------------------------------------------------------------------- */
.co-pane {
  width: 58%;
  flex: 1;
  background: var(--bg);
  padding: clamp(40px, 6vw, 96px) clamp(24px, 4vw, 72px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.co-pane__inner {
  width: 100%;
  max-width: 480px;
}

/* Progress chip — orients the user inside a multi-step purchase flow.
   1: pricing/landing · 2: this checkout · 3: Whop payment. */
.co-step {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  margin-bottom: 24px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

.co-step::before {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--gold);
  flex-shrink: 0;
}

.co-eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
}

.co-eyebrow::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  margin-right: 8px;
  vertical-align: middle;
}

.co-title {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(36px, 4vw, 52px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--text);
  margin: 0 0 48px;
}

/* -------------------------------------------------------------------------
   Form
   ------------------------------------------------------------------------- */
.co-form {
  display: flex;
  flex-direction: column;
}

/* Form section heading — "Contact" / "Delivery". Splits the form into two
   mental beats: who you are, then where the EA goes. */
.co-form__section {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--muted);
}

.co-form__section-icon {
  width: 12px;
  height: 12px;
  color: var(--gold);
  opacity: 0.7;
  flex-shrink: 0;
}

/* Second section gets top breathing room — visual break between Contact and
   Delivery without needing a heavier divider. */
.co-form__section + * { margin-top: 0; }
.co-form > .co-form__section:not(:first-of-type) {
  margin-top: 12px;
}

.co-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
}

@media (max-width: 520px) {
  .co-row { grid-template-columns: 1fr; gap: 0; }
  .co-row .co-field { margin-bottom: 24px; }
  .co-row .co-field:last-child { margin-bottom: 24px; }
}

.co-field {
  display: block;
  margin-bottom: 24px;
  min-width: 0;
}

.co-row .co-field { margin-bottom: 0; }

.co-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}

.co-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--radius);
  padding: 14px 16px;
  font-family: var(--font-sans);
  font-size: 16px; /* 16px minimum — anything smaller triggers iOS Safari auto-zoom on focus */
  color: var(--text);
  transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.co-input::placeholder { color: var(--muted); opacity: 0.5; }

.co-input:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
}

.co-input:focus,
.co-input:focus-visible {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(224, 183, 62, 0.08);
  outline: none;
}

.co-help {
  display: block;
  margin-top: 8px;
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
  opacity: 0.75;
}

/* -------------------------------------------------------------------------
   Inline summary above CTA — re-anchors price at the moment of decision.
   Especially important on mobile, where the order summary is collapsed
   above and otherwise out of view by the time the user reaches the button.
   ------------------------------------------------------------------------- */
.co-summary-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 16px;
  margin: 8px 0 16px;
  background: rgba(224, 183, 62, 0.04);
  border: 1px solid rgba(224, 183, 62, 0.18);
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--muted);
  line-height: 1.4;
}

.co-summary-line strong {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 18px;
  color: var(--gold-light);
  line-height: 1;
}

.co-summary-line__sep {
  color: var(--muted);
  opacity: 0.5;
}

/* -------------------------------------------------------------------------
   Submit + Security note
   ------------------------------------------------------------------------- */
.co-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: var(--gold);
  color: #07070C;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.02em;
  padding: 16px 24px;
  border: 1px solid var(--gold);
  border-radius: var(--radius);
  cursor: pointer;
  margin-top: 8px;
  transition: background 200ms ease, border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}

.co-submit:hover {
  background: var(--gold-light);
  border-color: var(--gold-light);
  transform: translateY(-1px);
  box-shadow: 0 12px 30px rgba(224, 183, 62, 0.25);
}

.co-submit:active {
  transform: translateY(0);
}

.co-submit:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(224, 183, 62, 0.35);
}

.co-submit:disabled,
.co-submit.is-loading {
  background: rgba(224, 183, 62, 0.55);
  border-color: rgba(224, 183, 62, 0.55);
  color: rgba(7, 7, 12, 0.7);
  cursor: progress;
  transform: none;
  box-shadow: none;
  pointer-events: none;
}

.co-submit__spinner {
  display: none;
  width: 14px;
  height: 14px;
  margin-right: 10px;
  border: 1.5px solid rgba(7, 7, 12, 0.25);
  border-top-color: rgba(7, 7, 12, 0.85);
  border-radius: 50%;
  animation: coSpin 700ms linear infinite;
}

.co-submit.is-loading .co-submit__spinner {
  display: inline-block;
}

@keyframes coSpin {
  to { transform: rotate(360deg); }
}

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

.co-secure {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 14px 0 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--muted);
  text-align: center;
  line-height: 1.5;
}

.co-secure__icon {
  width: 12px;
  height: 12px;
  color: var(--muted);
  flex-shrink: 0;
}

/* -------------------------------------------------------------------------
   Mobile — Stripe-style compact summary at top (collapsed by default),
   form right below for immediate input access.
   ------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .co-app {
    flex-direction: column;
    height: auto;
  }

  .co-summary,
  .co-pane {
    width: 100%;
    overflow: visible;
  }

  .co-summary {
    padding: 18px 22px 14px;
    gap: 12px;
    border-right: 0;
    border-bottom: 1px solid rgba(224, 183, 62, 0.10);
  }

  /* Hide the desktop header (logo + back link) — they're redundant with the
     compact toggle row and the user just came from the site. */
  .co-summary__head,
  .co-details,
  .co-divider {
    display: none;
  }

  /* Reveal the mobile toggle. */
  .co-summary__toggle { display: flex; }

  /* When collapsed, the body is fully hidden — user goes straight to form. */
  .co-summary__body.is-collapsed {
    max-height: 0;
    opacity: 0;
    margin-top: -12px; /* eat the parent gap so collapsed state is truly flat */
    overflow: hidden;
    pointer-events: none;
    transition:
      max-height 280ms var(--ease-out),
      opacity    180ms var(--ease-out),
      margin     280ms var(--ease-out);
  }

  .co-summary__body {
    gap: 16px;
    max-height: 1200px;
    opacity: 1;
    overflow: hidden;
    transition:
      max-height 360ms var(--ease-out),
      opacity    240ms var(--ease-out) 80ms;
  }

  /* The "Your Order" eyebrow inside the body is redundant on mobile — the
     toggle button above already labels this region. */
  .co-summary__eyebrow { display: none; }

  .co-plan { padding: 12px 14px; }
  .co-plan__name { font-size: 16px; }
  .co-plan__price { font-size: 11px; }

  .co-total {
    align-items: baseline;
  }

  .co-total__value { font-size: 32px; }
  .co-total__currency { font-size: 8px; }

  .co-total__note {
    margin-top: 4px;
    font-size: 10px;
  }

  .co-summary__pay { gap: 4px 10px; }
  .co-pay-method { font-size: 9px; gap: 4px; }
  .co-pay-method__icon { width: 11px; height: 11px; }
  .co-pay-method__lead { font-size: 8px; letter-spacing: 0.2em; }

  .co-trust {
    padding-top: 14px;
    gap: 10px 14px;
  }

  .co-trust__item { font-size: 9px; }

  .co-pane {
    padding: 28px 22px 56px;
    align-items: flex-start;
  }

  /* Step chip slightly smaller + tighter on mobile. */
  .co-step {
    margin-bottom: 18px;
    padding: 5px 10px;
    font-size: 9px;
    letter-spacing: 0.16em;
  }

  /* Inline summary above CTA: a bit more breathing room on mobile since
     it's the only persistent price reminder once the user scrolls past
     the collapsed summary. */
  .co-summary-line {
    padding: 12px 14px;
    font-size: 13px;
  }
  .co-summary-line strong { font-size: 17px; }
}