/* Checkout page - a conversion-focused two-column layout: the buyer's
   details, billing and payment on the left, a sticky order summary on the
   right (stacks under the form on small screens). Scoped to .checkout-body
   so nothing here leaks into the console/pricing pages that share
   style.css. The palette below is this page's own, not style.css's. */

.checkout-body {
  --vc-bg: #f6f7fb;
  --vc-surface: #ffffff;
  --vc-border: #e4e7ec;
  --vc-border-strong: #d5d9e2;
  --vc-text: #151923;
  --vc-muted: #667085;
  --vc-label: #344054;
  --vc-primary: #5b5ce2;
  --vc-primary-hover: #4b4cc8;
  --vc-primary-soft: #f8f8ff;
  --vc-tile: #efeefd;
  --vc-panel-soft: #f3f4fe;
  --vc-on-primary: #ffffff;
  --vc-visa: #1a3fa3;
  --vc-mc-red: #eb001b;
  --vc-mc-orange: #f79e1b;
  --vc-amex: #2e77bc;
  --vc-success: #067647;
  --vc-danger: #b42318;
  --vc-radius: 0.313rem;
  --vc-shadow: 0 0.125rem 0.625rem rgba(16, 24, 40, 0.05);

  margin: 0;
  min-height: 100vh;
  background: var(--vc-bg);
  color: var(--vc-text);
  font-family: 'Figtree', sans-serif;
  -webkit-font-smoothing: antialiased;
}
.checkout-body *,
.checkout-body *::before,
.checkout-body *::after { box-sizing: border-box; }

/* ---------- header ---------- */
.checkout-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.875rem 1.75rem;
  background: var(--vc-surface);
  border-bottom: 0.0625rem solid var(--vc-border);
}
.checkout-brand {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-weight: 800;
  font-size: 1rem;
  color: var(--vc-text);
  text-decoration: none;
}

/* ---------- icon tiles + section headers ---------- */
.checkout-icon-tile {
  flex: none;
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 0.875rem;
  background: var(--vc-tile);
  color: var(--vc-primary);
}
.checkout-icon-tile.round { border-radius: 50%; }
.checkout-icon-tile svg { width: 1.5rem; height: 1.5rem; }
.checkout-section-head,
.checkout-summary-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem; }
.checkout-section-head h2,
.checkout-summary-head h2 { margin: 0; }
.checkout-section-sub { margin: 0.125rem 0 0; color: var(--vc-muted); font-size: 0.875rem; line-height: 1.35; }

/* ---------- layout: sticky product/coupon summary left, form right ---------- */
.checkout-wrap {
  width: min(73.75rem, calc(100% - 2.5rem));
  margin: 0 auto;
  padding: 2.625rem 0 4rem;
}
.checkout-layout {
  display: grid;
  grid-template-columns: 23.75rem minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}
/* Thank You step - the Order Summary aside is hidden (its own "Qty 1"/totals are redundant next
   to the confirmation message), so the remaining column no longer needs to share the grid. */
.checkout-layout.checkout-layout-success-only {
  grid-template-columns: minmax(0, 1fr);
}
.checkout-details { min-width: 0; }
.checkout-cart {
  position: sticky;
  top: 1.5rem;
  min-width: 0;
}

/* ---------- form sections ---------- */
.checkout-section {
  background: var(--vc-surface);
  border: 0.0625rem solid var(--vc-border);
  border-radius: var(--vc-radius);
  box-shadow: var(--vc-shadow);
  padding: 1.5rem;
}
.checkout-section + .checkout-section { margin-top: 1rem; }
.checkout-section h2 {
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--vc-text);
}

.checkout-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.checkout-field-gap { margin-top: 0.75rem; }

.checkout-body .field { display: flex; flex-direction: column; gap: 0.375rem; }
.checkout-body .field label {
  color: var(--vc-label);
  font-size: 0.8125rem;
  font-weight: 600;
}
.checkout-body input:not([type='checkbox']):not([type='radio']),
.checkout-body select {
  width: 100%;
  min-width: 0;
  min-height: 1.625rem;
  padding: 0.5rem;
  border: 0.0625rem solid var(--vc-border-strong);
  border-radius: 0.313rem;
  background: #fff;
  color: var(--vc-text);
  font: inherit;
  font-size: 0.875rem;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.checkout-body input:not([type='checkbox']):not([type='radio']):focus,
.checkout-body select:focus {
  border-color: var(--vc-primary);
  box-shadow: 0 0 0 0.1875rem rgba(91, 92, 226, 0.11);
}
.checkout-body input:disabled { background: #f9fafb; color: var(--vc-muted); }

/* An input with a leading icon (email, tax id). */
.checkout-input-icon { position: relative; }
.checkout-input-icon svg {
  position: absolute;
  top: 50%;
  left: 0.8125rem;
  width: 1.125rem;
  height: 1.125rem;
  transform: translateY(-50%);
  color: var(--vc-muted);
  pointer-events: none;
}
.checkout-body .checkout-input-icon input:not([type='checkbox']):not([type='radio']) { padding-left: 2.5rem; }

.checkout-body .error-msg {
  color: var(--vc-danger);
  font-size: 0.8125rem;
  line-height: 1.45;
  margin-top: 0.5rem;
  white-space: pre-wrap;
}
.checkout-body .error-msg:empty { display: none; }
.checkout-body .muted { color: var(--vc-muted); }

/* ---------- sign-in / restored session ---------- */
.checkout-identity-summary {
  margin-bottom: 1rem;
  padding: 0.75rem 0.875rem;
  border: 0.0625rem solid #d1fadf;
  border-radius: 0.5625rem;
  background: #f6fef9;
  color: var(--vc-success);
  font-size: 0.8125rem;
}
.checkout-signin-link { margin: 0.875rem 0 0; color: var(--vc-muted); font-size: 0.8125rem; }
.checkout-unlock-row { margin-top: 0.75rem; }
.checkout-unlock-row .btn { min-height: 2.625rem; padding: 0 1.125rem; }

/* A link that toggles state in place (e.g. "Sign in" / "Continue as guest
   instead") rather than navigating - a real <button>, so there's no href
   to go stale or leave the page. */
.link-btn {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-weight: 650;
  color: var(--vc-primary);
  cursor: pointer;
}
.link-btn:hover { text-decoration: underline; }

/* Header "Sign In" - a quiet secondary button, on-palette. */
.checkout-header button.btn {
  min-height: 2.375rem;
  padding: 0 1rem;
  border: 0.0625rem solid var(--vc-border-strong);
  border-radius: 0.5rem;
  background: #fff;
  color: var(--vc-text);
  font-weight: 600;
  box-shadow: none;
  cursor: pointer;
}
.checkout-header button.btn:hover { border-color: var(--vc-primary); color: var(--vc-primary); background: #fff; box-shadow: none; }

/* ---------- payment ---------- */
/* Segmented "Pay With …" switch: a soft track, the chosen option a white chip. */
.checkout-toggle {
  display: flex;
  gap: 0.375rem;
  margin-bottom: 1.25rem;
  padding: 0.375rem;
  border-radius: 0.625rem;
  background: var(--vc-panel-soft);
}
.checkout-toggle-opt {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  min-height: 2.75rem;
  padding: 0.625rem 0.75rem;
  border: 0.0625rem solid transparent;
  border-radius: 0.5rem;
  background: transparent;
  color: var(--vc-muted);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.checkout-toggle-opt.active {
  border-color: var(--vc-border);
  background: var(--vc-surface);
  color: var(--vc-text);
  box-shadow: var(--vc-shadow);
}

/* Billing Address / Payment Details - two plain sections, one under the other (no tabs). */
.checkout-subheading { margin: 0 0 0.75rem; font-size: 1rem; font-weight: 700; color: var(--vc-text); }
#billingAddressBlock,
#paymentDetailsBlock { margin-bottom: 1.5rem; }
.checkout-address-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.checkout-address-wrapper .field { width: calc(50% - 0.375rem); }
.checkout-address-wrapper .field.wide { width: 100%; }

/* The country dropdown looks like every other field: same text size and
   inset, a chevron of its own instead of the browser's, and the same muted
   placeholder colour until a country is picked. (The chevron is a data URI, so
   its stroke is #667085 - the same value as --vc-muted - written out.) */
.checkout-body select {
  appearance: none;
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.8125rem center;
  background-size: 1.125rem;
}
.checkout-body ::placeholder { color: var(--vc-muted); opacity: 1; }
.checkout-body select:has(option[value='']:checked) { color: var(--vc-muted); }
.checkout-body select option { color: var(--vc-text); }

/* Visually hidden, still read by screen readers. */
.sr-only {
  position: absolute;
  width: 0.0625rem;
  height: 0.0625rem;
  margin: -0.0625rem;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Radio-style dot - shared by the payment toggle and the upsell bumps. */
.checkout-radio-dot {
  flex: 0 0 auto;
  position: relative;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 50%;
  border: 0.125rem solid var(--vc-border-strong);
}
.checkout-toggle-opt.active .checkout-radio-dot,
.checkout-bump.selected .checkout-radio-dot { border-color: var(--vc-primary); }
.checkout-toggle-opt.active .checkout-radio-dot::after,
.checkout-bump.selected .checkout-radio-dot::after {
  content: '';
  position: absolute;
  inset: 0.1875rem;
  border-radius: 50%;
  background: var(--vc-primary);
}

.checkout-method-note {
  margin: 0.75rem 0;
  padding: 0.625rem 0.75rem;
  border: 0.0625rem solid var(--vc-border);
  border-radius: 0.5625rem;
  background: #fafbfc;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--vc-muted);
}

/* A note with a leading icon (the "plan renews automatically" line). */
.checkout-note-icon { display: flex; align-items: center; gap: 0.875rem; background: var(--vc-panel-soft); }
.checkout-note-icon svg { flex: none; width: 1.5rem; height: 1.5rem; color: var(--vc-primary); }
.checkout-note-icon p { margin: 0; }
.checkout-note-icon[hidden] { display: none; }

/* Accepted-card badges in the Payment Method header. */
.checkout-brands { margin-left: auto; display: flex; align-items: center; gap: 0.5rem; }
.checkout-brand-visa { color: var(--vc-visa); font-size: 0.9375rem; font-weight: 800; font-style: italic; letter-spacing: 0.02em; }
.checkout-brand-mc { position: relative; display: block; width: 1.875rem; height: 1.125rem; }
.checkout-brand-mc i { position: absolute; top: 0; width: 1.125rem; height: 1.125rem; border-radius: 50%; }
.checkout-brand-mc i:first-child { left: 0; background: var(--vc-mc-red); }
.checkout-brand-mc i:last-child { right: 0; background: var(--vc-mc-orange); opacity: 0.9; }
.checkout-brand-amex { padding: 0.125rem 0.375rem; border-radius: 0.25rem; background: var(--vc-amex); color: var(--vc-on-primary); font-size: 0.625rem; font-weight: 800; letter-spacing: 0.04em; }

/* Stripe Elements card field - styled to match a text input. */
.checkout-card-element {
  min-height: 2.875rem;
  padding: 0.8125rem 0.75rem;
  border: 0.0625rem solid var(--vc-border-strong);
  border-radius: 0.5rem;
  background: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.checkout-card-element.StripeElement--focus {
  border-color: var(--vc-primary);
  box-shadow: 0 0 0 0.1875rem rgba(91, 92, 226, 0.11);
}
.checkout-card-element.StripeElement--invalid { border-color: var(--vc-danger); }

.checkout-bank-transfer {
  margin-top: 0.75rem;
  padding: 0.875rem 1rem;
  border: 0.0625rem solid var(--vc-border);
  border-radius: 0.5625rem;
  background: #fafbfc;
}
.checkout-bank-transfer p.muted:first-child { margin-top: 0; }
.checkout-bank-transfer .checkout-summary-row { padding: 0.25rem 0; }

.checkout-check {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 1rem;
  color: var(--vc-muted);
  font-size: 0.8125rem;
  line-height: 1.45;
  cursor: pointer;
}
.checkout-check input {
  flex: 0 0 auto;
  width: 1rem;
  min-width: 0;
  height: 1rem;
  padding: 0;
  margin-top: 0.125rem;
  accent-color: var(--vc-primary);
}
.checkout-check a { color: var(--vc-primary); }

.checkout-body .btn.checkout-pay-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  width: 100%;
  min-height: 3.125rem;
  margin-top: 1rem;
  padding: 0 1rem;
  border: 0;
  border-radius: 0.5rem;
  background: var(--vc-primary);
  color: var(--vc-on-primary);
  font-size: 0.9375rem;
  font-weight: 700;
  box-shadow: none;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.05s ease, opacity 0.15s ease;
}
.checkout-body .btn.checkout-pay-btn:hover:not(:disabled) { background: var(--vc-primary-hover); }
.checkout-body .btn.checkout-pay-btn:active:not(:disabled) { transform: translateY(0.0625rem); }
.checkout-body .btn.checkout-pay-btn:disabled { opacity: 0.48; cursor: not-allowed; }

.checkout-body .checkout-pay-btn svg { width: 1.125rem; height: 1.125rem; }
.checkout-secure-note svg { width: 0.875rem; height: 0.875rem; vertical-align: -0.125rem; }

.checkout-secure-note {
  margin: 0.625rem 0 0;
  color: var(--vc-muted);
  font-size: 0.75rem;
  line-height: 1.45;
  text-align: center;
}

/* ---------- order summary ---------- */
.checkout-summary-panel {
  background: var(--vc-surface);
  border: 0.0625rem solid var(--vc-border);
  border-radius: var(--vc-radius);
  box-shadow: var(--vc-shadow);
  padding: 1.5rem;
}
.checkout-summary-title {
  font-size: 1.375rem;
  line-height: 1.3;
  font-weight: 700;
  color: var(--vc-text);
}
.checkout-summary-head { padding-bottom: 1.25rem; border-bottom: 0.0625rem solid var(--vc-border); }

.checkout-preview-item,
.checkout-body .checkout-line-item {
  position: relative;
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr) auto;
  gap: 0.25rem 1rem;
  align-items: center;
  margin: 0;
  padding: 0 0 0.875rem;
  border: 0;
  border-bottom: 0.0625rem solid var(--vc-border);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  text-align: left;
}
.checkout-line-item-price span { color: var(--vc-muted); font-size: 0.875rem; font-weight: 500; }
.checkout-line-meta {
  grid-column: 1 / -1;
  margin: 0.25rem 0 0;
  padding: 0;
  list-style: none;
  color: var(--vc-muted);
  font-size: 0.8125rem;
  line-height: 1.6;
}
.checkout-line-meta li + li::before { content: '•'; margin-right: 0.5rem; }
.checkout-preview-item + .checkout-preview-item,
.checkout-body .checkout-line-item + .checkout-line-item { margin-top: 0.875rem; }

.checkout-line-item-body { min-width: 0; }
.checkout-line-item-name { color: var(--vc-text); font-size: 1.0625rem; font-weight: 700; line-height: 1.35; }
.checkout-line-item .muted,
.checkout-preview-item .muted,
.checkout-line-item-desc { color: var(--vc-muted); font-size: 0.75rem; line-height: 1.45; margin-top: 0.125rem; }
.checkout-line-item-price { color: var(--vc-text); font-size: 1.375rem; font-weight: 700; white-space: nowrap; }
.checkout-line-item-remove {
  position: absolute;
  right: 0;
  bottom: 0.875rem;
  padding: 0.125rem;
  border: 0;
  background: transparent;
  color: #98a2b3;
  font-size: 0.9375rem;
  line-height: 1;
  cursor: pointer;
}
.checkout-line-item-remove:hover { color: var(--vc-danger); }
/* The remove ✕ sits under the price; leave room so they never overlap. */
.checkout-body .checkout-line-item:has(.checkout-line-item-remove) { padding-bottom: 1.875rem; }

.checkout-preview-note { margin: 1rem 0 0; text-align: center; font-size: 0.8125rem; }
#cartPreviewItems:empty + .checkout-preview-note { margin-top: 0; }
.checkout-preview-item:last-child,
.checkout-body .checkout-line-item:last-child { border-bottom: 0; padding-bottom: 0; }

/* Upsell add-ons */
.checkout-bump {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  margin-top: 0.25rem;
  padding: 0.8125rem 0;
  border-top: 0.0625rem solid var(--vc-border);
  cursor: pointer;
}
.checkout-bump input { position: absolute; opacity: 0; width: 0; min-width: 0; height: 0; padding: 0; }
.checkout-bump .checkout-radio-dot { margin-top: 0.0625rem; }
.checkout-bump-title { font-size: 0.8125rem; font-weight: 650; }
.checkout-bump-desc { margin-top: 0.1875rem; color: var(--vc-muted); font-size: 0.75rem; }

.checkout-summary { margin-top: 1.125rem; padding-top: 1.125rem; border-top: 0.0625rem solid var(--vc-border); }
.checkout-summary-row { display: flex; justify-content: space-between; gap: 0.75rem; padding: 0.4375rem 0; font-size: 0.875rem; }
.checkout-summary-total {
  margin-top: 0.375rem;
  padding-top: 0.875rem;
  border-top: 0.0625rem solid var(--vc-border);
  font-size: 0.9375rem;
  font-weight: 700;
}
.checkout-summary-total strong { font-size: 1.25rem; font-weight: 750; }

.checkout-recurring-note { margin-bottom: 0.25rem; padding-bottom: 0.75rem; }
.checkout-recurring-note .checkout-summary-total { margin-top: 0; padding-top: 0; border-top: 0; }
.checkout-due-label { display: inline-flex; align-items: center; gap: 0.5rem; }
.checkout-info-icon { width: 1rem; height: 1rem; color: var(--vc-muted); }
.checkout-due-breakdown { margin: 0; text-align: right; color: var(--vc-muted); font-size: 0.8125rem; }
.checkout-renewal-box {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
  padding: 1rem;
  border-radius: 0.625rem;
  background: var(--vc-panel-soft);
}
.checkout-renewal-icon { flex: none; width: 1.75rem; height: 1.75rem; color: var(--vc-primary); }
.checkout-renewal-box p { margin: 0; font-size: 0.9375rem; line-height: 1.45; }
.checkout-renewal-box .checkout-renewal-sub { margin-top: 0.25rem; color: var(--vc-muted); font-size: 0.8125rem; }
.checkout-renewal-box .checkout-renewal-sub[hidden] { display: none; }

/* Secure checkout / SSL protected / Trusted strip under the summary. */
.checkout-trust {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 1.25rem 0 0;
  padding: 1rem 0;
  list-style: none;
  border-radius: 0.625rem;
  background: var(--vc-panel-soft);
}
.checkout-trust li { display: grid; justify-items: center; gap: 0.25rem; padding: 0 0.75rem; text-align: center; }
.checkout-trust li + li { border-left: 0.0625rem solid var(--vc-border); }
.checkout-trust svg { width: 1.375rem; height: 1.375rem; color: var(--vc-primary); }
.checkout-trust strong { font-size: 0.8125rem; }
.checkout-trust span { color: var(--vc-muted); font-size: 0.75rem; line-height: 1.35; }

.checkout-coupon { display: flex; gap: 0.5rem; align-items: center; padding: 0.625rem 0; }
.checkout-coupon input { flex: 1; min-height: 2.625rem; }
button.btn.secondary#couponApplyBtn {
  min-height: 2.625rem;
  padding: 0 0.875rem;
  border: 0.0625rem solid var(--vc-border-strong);
  border-radius: 0.5rem;
  background: #fff;
  color: var(--vc-text);
  font-weight: 600;
  box-shadow: none;
  cursor: pointer;
}
button.btn.secondary#couponApplyBtn:hover { border-color: var(--vc-primary); color: var(--vc-primary); background: #fff; box-shadow: none; }
.checkout-coupon-applied {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.5rem 0;
  padding: 0.625rem 0.75rem;
  border: 0.0625rem dashed #a6e9c4;
  border-radius: 0.5625rem;
  background: #f6fef9;
  color: var(--vc-success);
  font-weight: 600;
}
.checkout-coupon-status { margin-left: auto; font-size: 0.6875rem; }
.checkout-coupon-remove {
  padding: 0 0.25rem;
  border: 0;
  background: none;
  color: var(--vc-danger);
  font-size: 0.8125rem;
  cursor: pointer;
}

/* ---------- error / success ---------- */
.checkout-error .card {
  padding: 1.75rem;
  border: 0.0625rem solid var(--vc-border);
  border-radius: var(--vc-radius);
  background: #fff;
  box-shadow: var(--vc-shadow);
}
.checkout-success {
  padding: 2.5rem 1.75rem;
  text-align: center;
  background: #fff;
  border: 0.0625rem solid var(--vc-border);
  border-radius: var(--vc-radius);
  box-shadow: var(--vc-shadow);
}
.checkout-success h2 { margin: 0 0 0.5rem; font-size: 1.375rem; }
.checkout-success-icon { margin-bottom: 0.75rem; font-size: 2.5rem; }

.checkout-redirect-note { margin: 1.125rem 0 0; color: var(--vc-muted); font-size: 0.875rem; }
.checkout-redirect-note a { margin-left: 0.375rem; color: var(--vc-primary); font-weight: 650; }

/* ---------- responsive ---------- */
@media (max-width: 53.75rem) {
  .checkout-header { padding: 0.75rem 1rem; }
  .checkout-wrap { width: min(100% - 1.75rem, 42.5rem); padding: 1.5rem 0 2.5rem; }
  .checkout-layout { grid-template-columns: 1fr; gap: 1.25rem; }
  .checkout-cart { position: static; }
  .checkout-summary-panel { padding: 1.25rem; }
}
@media (max-width: 32.5rem) {
  .checkout-wrap { width: calc(100% - 1.25rem); padding-top: 1rem; }
  .checkout-section,
  .checkout-summary-panel { padding: 1.125rem; border-radius: 0.625rem; }
  .checkout-section h2 { font-size: 1.3125rem; }
  .checkout-grid-2 { grid-template-columns: 1fr; }
  .checkout-toggle { flex-direction: column; }
  .checkout-brands { display: none; }
}

/* The "checkout unavailable" card. */
#errorCard { max-width: 30rem; margin: 3.75rem auto; }