/* ============================================================
   checkout.css
   Course checkout flow — a single dialog with three steps:
     1. auth      → Sign in or continue as guest (intent toggle)
     2. payment   → Checkout (order summary + payment + billing)
     3. confirmed → Order Confirmed (success)
   Styled with SLB semantic tokens (sharp corners, blue-600 actions,
   SLB Sans). Triggered by any [data-checkout-trigger]; behavior in
   scripts/checkout.js. Vanilla CSS, no dependencies.
   ============================================================ */

/* ----------------------------------------------------------
   The dialog shell — overlay, scrim, dialog, header, close, body —
   is now the reusable .modal component in components.css, driven by
   scripts/modal.js. The markup uses .modal* classes. Everything
   below is checkout-specific content that sits inside .modal__body.
   ---------------------------------------------------------- */
.co-step[hidden] { display: none; }

/* Stacked blocks within a step get consistent rhythm */
.co-stack { display: flex; flex-direction: column; gap: var(--space-8); }

/* ----------------------------------------------------------
   Auth step — two-row course summary card (title + price row,
   meta row below). Bordered so it reads as a discrete object.
   ---------------------------------------------------------- */
.co-course-card {
  display: flex;
  align-items: stretch;
  margin-bottom: var(--space-8);
  border: 1px solid var(--border-default);
  background: var(--surface-page);
  overflow: hidden;
}
/* Course thumbnail flush against the left edge, stretching the full card
   height. Mirrors the image-forward home course-card pattern. Hidden if
   no image is set (checkout.js toggles [hidden] based on the trigger's
   data-course-image; the body padding adjusts so the card still reads
   balanced without an image). */
.co-course-card__media {
  flex: 0 0 80px;
  width: 80px;
  height: auto;
  align-self: stretch;
  object-fit: cover;
  display: block;
}
.co-course-card__media[hidden] { display: none; }
.co-course-card__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  /* Internal padding for the text block. Image stays flush to the card
     edge; the right/top/bottom padding gives the text breathing room. */
  padding: var(--space-4) var(--space-6);
}
.co-course-card:has(.co-course-card__media:not([hidden])) .co-course-card__body {
  padding-left: var(--space-4);
}
.co-course-card__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
}
.co-course-card__title {
  font-size: var(--text-md);
  line-height: var(--leading-base);
  font-weight: var(--font-medium);
  color: var(--text-primary);
  min-width: 0;
}
.co-course-card__price {
  flex: none;
  font-size: var(--text-md);
  font-weight: var(--font-bold);
  color: var(--text-primary);
}
.co-course-card__meta {
  grid-area: meta;
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  color: var(--text-secondary);
}

/* ----------------------------------------------------------
   Intent tabs — "I'm new" / "I have an account".
   Uses the same underline + color treatment as the home page
   .fc-tabs / .fc-tab pattern (book weight, text-md, 3px blue-600
   underline) so checkout reads as a continuation of the brand.
   ---------------------------------------------------------- */
.co-tabs {
  display: flex;
  justify-content: center;
  gap: 0 var(--space-6);
  margin-bottom: var(--space-6);
  border-bottom: 1px solid var(--border-subtle);
}
.co-tab {
  flex: 0 0 auto;
  border: 0;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  padding: 0 0 var(--space-4);
  background: transparent;
  color: var(--gray-800);
  font-family: inherit;
  font-size: var(--text-md);
  line-height: 1.3;
  font-weight: var(--font-book);
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}
.co-tab:hover { color: var(--blue-600); }
.co-tab:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.co-tab.is-active {
  color: var(--blue-600);
  border-bottom-color: var(--blue-600);
}

/* Only the selected path is visible */
.co-panel[hidden] { display: none; }

/* ----------------------------------------------------------
   Form fields
   ---------------------------------------------------------- */
.co-field { display: block; }
.co-field__label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  color: var(--text-primary);
}
.co-input {
  width: 100%;
  height: var(--size-lg);
  padding: 0 var(--space-4);
  border: 1px solid var(--border-default);
  border-radius: 0;
  background: var(--surface-page);
  font-size: var(--text-sm);
  font-weight: var(--font-book);
  color: var(--text-primary);
  transition: border-color var(--duration-fast) var(--ease-out);
}
.co-input::placeholder { color: var(--text-muted); font-weight: var(--font-book); }
.co-input:hover { border-color: var(--border-strong); }
.co-input:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* Leading-icon inputs (email, password, card) */
.co-input-wrap { position: relative; }
.co-input-wrap .co-input { padding-left: var(--space-10); }
.co-input-icon {
  position: absolute;
  left: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--icon-lg);
  color: var(--text-muted);
  pointer-events: none;
}

/* Two-column field row */
.co-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

/* ----------------------------------------------------------
   Inline helper text + label row (label + inline link)
   ---------------------------------------------------------- */
.co-field__help {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  color: var(--text-secondary);
}
.co-field__labelrow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-2);
}
.co-field__labelrow .co-field__label { margin-bottom: 0; }
.co-field__link {
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  color: var(--text-link);
}
.co-field__link:hover { color: var(--text-link-hover); text-decoration: underline; }

/* ----------------------------------------------------------
   Section titles (Payment / Billing Information)
   ---------------------------------------------------------- */
.co-section-title {
  font-size: var(--text-base);
  line-height: var(--leading-base);
  font-weight: var(--font-bold);
  margin-bottom: var(--space-4);
}
.co-section + .co-section { margin-top: var(--space-8); }

/* ----------------------------------------------------------
   Order summary / details box
   ---------------------------------------------------------- */
.co-summary {
  padding: var(--space-4);
  background: var(--surface-subtle);
  border: 1px solid var(--border-subtle);
}
.co-summary__title {
  font-size: var(--text-base);
  font-weight: var(--font-bold);
  margin-bottom: var(--space-2);
}
.co-summary__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-2) 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.co-summary__row-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-0_5);
  min-width: 0;
}
.co-summary__row-title { color: var(--text-primary); }
.co-summary__row-meta {
  font-size: var(--text-xs);
  color: var(--text-muted);
}
.co-summary__row + .co-summary__total { border-top: 1px solid var(--border-default); }
.co-summary__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding-top: var(--space-3);
  font-weight: var(--font-bold);
  color: var(--text-primary);
}
.co-summary__total .co-summary__amount {
  font-size: var(--text-base);
  color: var(--text-link);
}

/* ----------------------------------------------------------
   Success step
   ---------------------------------------------------------- */
.co-success { text-align: center; }
.co-success__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  margin: var(--space-2) auto var(--space-6);
  border-radius: var(--radius-full);
  /* On-brand confirmation: SLB blue family, not the generic green
     status-success palette. Pale blue surface, primary-blue glyph. */
  background: var(--blue-100);
  border: 1px solid var(--blue-100);
  color: var(--blue-600);
}
.co-success__icon .ms { font-size: var(--icon-3xl); font-variation-settings: 'wght' 600; }
.co-success__sub {
  margin-top: var(--space-2);
  font-size: var(--text-base);
  color: var(--text-secondary);
}
.co-success__sub strong { color: var(--text-primary); font-weight: var(--font-bold); }
.co-success .co-summary { text-align: left; margin: var(--space-8) 0; }

/* Secondary action — "Download receipt" reads as a link, not a button */
.co-success__receipt {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  color: var(--text-link);
}
.co-success__receipt:hover { color: var(--text-link-hover); text-decoration: underline; }
.co-success__receipt .ms { font-size: var(--icon-lg); }

/* ----------------------------------------------------------
   Checkout action row spacing
   (.btn--block is a button-family modifier — it lives in components.css
   alongside .btn--lg/.btn--primary/etc.)
   ---------------------------------------------------------- */
.co-actions { margin-top: var(--space-6); }

/* Step 2 (payment) — pin the Complete-purchase CTA to the bottom of the
   scrolling modal so it stays in reach while the user fills the form.
   The negative margins escape .modal__body's padding so the sticky bar
   spans the full dialog width and sits flush against the bottom edge;
   the inner padding matches the body padding so the button sits where
   the user expects. */
.co-step[data-co-step="payment"] .co-actions {
  position: sticky;
  bottom: 0;
  margin-top: var(--space-8);
  margin-left: calc(-1 * var(--space-6));
  margin-right: calc(-1 * var(--space-6));
  margin-bottom: calc(-1 * var(--space-8));
  padding: var(--space-4) var(--space-6) var(--space-6);
  background: var(--surface-page);
  border-top: 1px solid var(--border-subtle);
  z-index: 1;
}
@media (min-width: 480px) {
  .co-step[data-co-step="payment"] .co-actions {
    margin-left: calc(-1 * var(--space-8));
    margin-right: calc(-1 * var(--space-8));
    padding: var(--space-4) var(--space-8) var(--space-6);
  }
}