/* ----------------------------------------------------------------
   buy/buy.css ,  styling local to the simulated checkout flow.
   Layered on top of tokens.css + site.css; nothing in here is
   needed elsewhere on the site.
----------------------------------------------------------------- */

/* Sticky progress strip showing where they are in the funnel ------- */
.flow-steps {
  background: var(--color-white);
  border-bottom: 1px solid var(--color-ink-100);
  position: sticky;
  top: 0;
  z-index: 30;
}
.flow-steps__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 14px var(--space-5);
  display: flex;
  gap: var(--space-3);
  align-items: center;
  flex-wrap: wrap;
  font-family: var(--font-body);
  font-size: var(--fs-12);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink-500);
}
.flow-steps__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.flow-steps__num {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--color-ink-100);
  color: var(--color-ink-500);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}
.flow-steps__item.is-done .flow-steps__num {
  background: var(--color-blue-400);
  color: var(--color-white);
}
.flow-steps__item.is-current .flow-steps__num {
  background: var(--color-blue-900);
  color: var(--color-white);
}
.flow-steps__item.is-current { color: var(--color-blue-900); font-weight: 700; }
.flow-steps__sep { color: var(--color-ink-100); }

/* Big "select" cards used on step 1 license-picker --------------- */
.pick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4);
}
.pick-card {
  position: relative;
  background: var(--color-white);
  border: 2px solid var(--color-ink-100);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.pick-card:hover { border-color: var(--color-blue-400); transform: translateY(-2px); }
.pick-card input { position: absolute; opacity: 0; pointer-events: none; }
.pick-card__check {
  position: absolute; top: 14px; right: 14px;
  width: 22px; height: 22px;
  border: 2px solid var(--color-ink-100);
  border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; color: transparent;
  transition: background .2s, border-color .2s, color .2s;
}
.pick-card input:checked ~ .pick-card__check {
  background: var(--color-blue-900);
  border-color: var(--color-blue-900);
  color: var(--color-white);
}
.pick-card:has(input:checked) {
  border-color: var(--color-blue-900);
  box-shadow: 0 0 0 4px rgba(15, 76, 135, .08);
}
.pick-card__icon {
  width: 44px; height: 44px;
  border-radius: 10px;
  background: var(--color-blue-50);
  color: var(--color-blue-900);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: var(--fs-18); font-weight: 700;
  margin-bottom: var(--space-3);
}
.pick-card h3 { margin: 0 0 6px; font-size: var(--fs-20); }
.pick-card p { margin: 0; color: var(--color-ink-700); font-size: var(--fs-14); }
.pick-card.is-disabled { opacity: .55; cursor: not-allowed; }
.pick-card.is-disabled:hover { transform: none; border-color: var(--color-ink-100); }

/* Step 2 catalog ------------------------------------------------- */
.active-filters {
  background: var(--color-blue-50);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.active-filters__chips { display: flex; gap: 8px; flex-wrap: wrap; }
.active-filters__chip {
  background: var(--color-white);
  border: 1px solid var(--color-blue-400);
  color: var(--color-blue-900);
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-12);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Course row, list style with credit badges on the right -------- */
.course-row {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-4);
  background: var(--color-white);
  border: 1px solid var(--color-ink-100);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
}
.course-row:hover { border-color: var(--color-blue-400); }
.course-row__title { margin: 0 0 4px; font-size: var(--fs-18); font-family: var(--font-body); font-weight: 700; color: var(--color-ink-900); }
.course-row__meta { color: var(--color-ink-500); font-size: var(--fs-12); }
.course-row__credits { display: flex; gap: 6px; flex-wrap: wrap; }
.credit-badge {
  font-family: var(--font-body);
  font-size: var(--fs-12);
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.credit-badge--ins  { background: rgba(15, 76, 135, .1);  color: var(--color-blue-900); }
.credit-badge--cfp  { background: rgba(229, 132, 105, .15); color: var(--color-coral-600); }
.credit-badge--dual {
  background: linear-gradient(90deg, rgba(15,76,135,.12), rgba(229,132,105,.18));
  color: var(--color-blue-900);
}
.credit-badge--muted { background: var(--color-ink-50); color: var(--color-ink-500); }
.course-row__price { font-family: var(--font-display); font-size: var(--fs-20); color: var(--color-ink-900); }

/* Floating cart drawer (sticky bottom on courses/cart pages) ----- */
.cart-strip {
  position: sticky;
  bottom: 0;
  background: var(--color-blue-900);
  color: var(--color-white);
  padding: var(--space-4) var(--space-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  box-shadow: 0 -6px 18px rgba(15, 76, 135, .15);
  z-index: 25;
}
.cart-strip__totals { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.cart-strip__total {
  font-family: var(--font-body);
  font-size: var(--fs-14);
  display: flex; flex-direction: column;
}
.cart-strip__total strong {
  font-family: var(--font-display);
  font-size: var(--fs-20);
  letter-spacing: 0.04em;
  color: var(--color-white);
}
.cart-strip__total span {
  font-size: var(--fs-12);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: .8;
}

/* Cart-page progress meters per license ------------------------- */
.credit-meter {
  background: var(--color-white);
  border: 1px solid var(--color-ink-100);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  margin-bottom: var(--space-3);
}
.credit-meter__top {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: var(--space-3); gap: var(--space-3);
}
.credit-meter h4 { margin: 0; font-size: var(--fs-18); }
.credit-meter__count {
  font-family: var(--font-display);
  font-size: var(--fs-20);
  color: var(--color-blue-900);
}
.credit-meter__count.is-complete { color: #197a3a; }
.credit-meter__bar {
  background: var(--color-ink-50);
  border-radius: var(--radius-pill);
  height: 14px;
  overflow: hidden;
  position: relative;
}
.credit-meter__fill {
  background: var(--color-blue-400);
  height: 100%;
  border-radius: var(--radius-pill);
  transition: width .4s ease;
}
.credit-meter__fill.is-complete { background: #2d9c52; }
.credit-meter__hint {
  margin-top: 8px;
  font-size: var(--fs-12);
  color: var(--color-ink-500);
}

/* Two-column checkout layout ----------------------------------- */
.checkout-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--space-6);
}
@media (max-width: 768px) { .checkout-grid { grid-template-columns: 1fr; } }
.checkout-grid form label { display: block; margin-bottom: var(--space-3); font-weight: 600; font-size: var(--fs-14); }
.checkout-grid form input, .checkout-grid form select {
  display: block; width: 100%; padding: 12px 14px;
  border: 1px solid var(--color-ink-100);
  border-radius: var(--radius-sm);
  font-family: inherit; font-size: var(--fs-16);
  margin-top: 6px;
}
.checkout-grid form input:focus, .checkout-grid form select:focus {
  outline: 2px solid var(--color-blue-400); outline-offset: 1px;
}
.checkout-grid .fieldgroup-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3);
}
.summary-card {
  background: var(--color-white);
  border: 1px solid var(--color-ink-100);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  position: sticky; top: 96px;
}
.summary-card h3 { margin: 0 0 var(--space-3); font-size: var(--fs-20); }
.summary-card__line {
  display: flex; justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px dashed var(--color-ink-100);
  font-size: var(--fs-14);
}
.summary-card__total {
  display: flex; justify-content: space-between;
  padding-top: var(--space-3);
  font-family: var(--font-display);
  font-size: var(--fs-32);
  color: var(--color-blue-900);
}

/* Confirmation page ------------------------------------------- */
.success-hero {
  background: linear-gradient(135deg, var(--color-blue-900), var(--color-blue-400));
  color: var(--color-white);
  padding: var(--space-7) var(--space-5);
  border-radius: var(--radius-lg);
  text-align: center;
}
.success-hero h1 { color: var(--color-white); margin: 0 0 var(--space-3); }
.success-hero p { color: rgba(255,255,255,.9); }
.filed-list { list-style: none; padding: 0; margin: var(--space-5) 0 0; display: grid; gap: var(--space-3); }
.filed-list li {
  background: rgba(255,255,255,.1);
  padding: 14px 18px;
  border-radius: var(--radius-md);
  display: flex; gap: 12px; align-items: center;
}
.filed-list li::before { content: "✓"; color: #7ee0a0; font-weight: 700; }

/* Button variants used only inside the flow ------------------ */
.btn--sm {
  padding: 8px 14px;
  font-size: var(--fs-12);
  letter-spacing: 0.06em;
}
.btn--coral {
  background: var(--color-coral-500);
  color: var(--color-white);
  border-color: var(--color-coral-500);
}
.btn--coral:hover {
  background: var(--color-coral-600);
  border-color: var(--color-coral-600);
  color: var(--color-white);
}

/* LearnWorlds note callouts (small, non-distracting) --------- */
.lw-note {
  background: #fff8ec;
  border: 1px dashed #d4a346;
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-top: var(--space-5);
  font-size: var(--fs-14);
  color: #6a4a13;
}
.lw-note strong { color: #6a4a13; }
.lw-note summary { cursor: pointer; font-weight: 700; }
.lw-note[open] summary { margin-bottom: var(--space-3); }

/* =========================================================
   High-fidelity checkout form
   ========================================================= */

/* Section card wrapping each fieldset (Account / Payment) */
.form-card {
  background: var(--color-white);
  border: 1px solid var(--color-ink-100);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin-bottom: var(--space-5);
  box-shadow: 0 2px 8px rgba(15, 76, 135, 0.04);
}
.form-card__head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-ink-50);
}
.form-card__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--color-blue-50);
  color: var(--color-blue-900);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.form-card__icon--coral {
  background: rgba(229, 132, 105, 0.12);
  color: var(--color-coral-600);
}
.form-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-24);
  color: var(--color-blue-900);
  letter-spacing: 0.01em;
}
.form-card__sub {
  margin: 2px 0 0;
  font-size: var(--fs-13);
  color: var(--color-ink-500);
}
.form-card__num {
  margin-left: auto;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-12);
  color: var(--color-ink-500);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Field, replaces the bare <label> + <input> pair */
.field { margin-bottom: var(--space-4); }
.field:last-child { margin-bottom: 0; }
.field__label {
  display: block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-12);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink-500);
  margin: 0 0 6px;
}
.field__label--row {
  display: flex; justify-content: space-between; align-items: baseline;
}
.field__hint {
  font-size: var(--fs-12);
  font-weight: 500;
  color: var(--color-ink-500);
  text-transform: none;
  letter-spacing: 0;
}
.field__input {
  display: block;
  width: 100%;
  padding: 14px 16px;
  border: 1.5px solid var(--color-ink-100);
  border-radius: var(--radius-md);
  background: var(--color-white);
  font-family: var(--font-body);
  font-size: var(--fs-16);
  font-weight: 500;
  color: var(--color-ink-900);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  box-sizing: border-box;
}
.field__input::placeholder { color: var(--color-ink-300); font-weight: 400; }
.field__input:hover { border-color: var(--color-blue-400); }
.field__input:focus {
  outline: none;
  border-color: var(--color-blue-900);
  box-shadow: 0 0 0 4px rgba(15, 76, 135, 0.1);
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.field__wrap { position: relative; }
.field__affix {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink-300);
  pointer-events: none;
  transition: color 0.15s ease;
}
.field__input:focus + .field__affix { color: var(--color-blue-900); }
.field__wrap--icon .field__input { padding-left: 44px; }
.field__icon-left {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-ink-300);
  pointer-events: none;
}

.form-card__signin-row {
  font-size: var(--fs-14);
  color: var(--color-ink-700);
  background: var(--color-blue-50);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  margin-bottom: var(--space-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

/* ---------- Order summary upgrade ---------- */
.summary-card {
  /* Drop the sticky behavior from the base rule so the trust card below
     doesn't slide behind the summary as the user scrolls. */
  position: static;
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  box-shadow: 0 2px 8px rgba(15, 76, 135, 0.04);
}
.summary-card h3 {
  font-family: var(--font-display);
  font-size: var(--fs-24);
  color: var(--color-blue-900);
  margin: 0 0 var(--space-4);
}
.summary-card__line {
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-ink-50);
  font-size: var(--fs-14);
  color: var(--color-ink-900);
}
.summary-card__line:first-of-type { padding-top: 0; }
.summary-card__line span:first-child {
  color: var(--color-ink-700);
  padding-right: 12px;
  flex: 1;
}
.summary-card__line span:last-child {
  font-weight: 700;
  white-space: nowrap;
}
.summary-card__subtotal {
  display: flex;
  justify-content: space-between;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-ink-100);
  font-size: var(--fs-14);
  color: var(--color-ink-700);
}
.summary-card__subtotal span:last-child { font-weight: 700; color: var(--color-ink-900); }
.summary-card__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: none;
  padding-top: var(--space-4);
  border-top: 0;
  font-family: var(--font-display);
  font-size: 32px;
  color: var(--color-blue-900);
  letter-spacing: 0.01em;
}
.summary-card__total span:first-child {
  font-family: var(--font-body);
  font-size: var(--fs-14);
  font-weight: 700;
  color: var(--color-ink-700);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.summary-card__cta {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: var(--space-4);
  padding: 16px 20px;
  font-size: var(--fs-16);
}
.summary-card__cta svg {
  width: 16px; height: 16px;
  flex-shrink: 0;
}
.summary-card__trust {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-ink-50);
  display: grid;
  gap: 10px;
  font-size: var(--fs-12);
  color: var(--color-ink-500);
}
.summary-card__trust-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.summary-card__trust-row svg {
  flex-shrink: 0;
  color: var(--color-blue-400);
}

/* Right-rail extra trust card */
.trust-card {
  margin-top: var(--space-4);
  background: var(--color-blue-50);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: var(--fs-13);
  color: var(--color-blue-900);
}
.trust-card svg {
  flex-shrink: 0;
  color: var(--color-blue-900);
  margin-top: 1px;
}
.trust-card strong { display: block; margin-bottom: 2px; }

/* Signed-in banner, overrides earlier checkout-local styles with brand polish */
.signedin-banner {
  background: var(--color-blue-50);
  border: 1px solid var(--color-blue-100);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  margin-bottom: var(--space-5);
  display: flex;
  align-items: center;
  gap: 14px;
}
.signedin-banner__avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--color-blue-900); color: var(--color-white);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-body); font-weight: 700; font-size: 13px;
  letter-spacing: 0.05em; flex-shrink: 0;
}
.signedin-banner strong {
  display: block;
  font-size: var(--fs-16);
  color: var(--color-blue-900);
}
.signedin-banner span {
  font-size: var(--fs-13);
  color: var(--color-ink-700);
}

/* ---------- Clickable flow steps (backwards-navigation) ---------- */
.flow-steps__item--link {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  border-radius: var(--radius-pill);
  padding: 4px 8px;
  margin: -4px -8px;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.flow-steps__item--link:hover,
.flow-steps__item--link:focus-visible {
  background: var(--color-blue-50);
  color: var(--color-blue-900);
  outline: none;
}
.flow-steps__item--link:hover .flow-steps__num,
.flow-steps__item--link:focus-visible .flow-steps__num {
  background: var(--color-blue-900);
  color: var(--color-white);
}