/* ──────────────────────────────────────────────────────────────────────────
   WunderCool — Arctic Clip checkout brand skin
   First pass, approximated from the Figma checkout screenshots (desk 2009:113 /
   mob 2009:482). Exact hex/spacing to be confirmed against Figma tokens.
   Layered on top of next-core.css; loaded last via checkout.html frontmatter.
   ────────────────────────────────────────────────────────────────────────── */
:root {
  --wc-navy: #1f2a6e;
  --wc-navy-dark: #16205a;
  --wc-yellow: #ffc629;
  --wc-yellow-dark: #f0b800;
  --wc-green: #16b47f;
  --wc-green-bg: #e7f7f0;
  --wc-blue-wash: #eef1fb;
  --wc-ink: #1b1b2b;
  --wc-muted: #5c5c6e;
  --wc-line: #e3e6ef;

  /* Whole page → Inter (loaded in base.html). Overrides next-core system-ui stack
     for body + headings across all breakpoints (this file loads last). */
  --_text---font-family--primary:
    "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
  --_text---font-family--heading:
    "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
  --_text---font-family--secondary:
    "Inter", system-ui, -apple-system, sans-serif;
}

/* Form controls don't inherit font-family by default — force Inter too */
input,
select,
textarea,
button {
  font-family:
    "Inter",
    system-ui,
    -apple-system,
    sans-serif;
}

/* Brand headings → navy */
.section-checkout .display-md,
.section-checkout .display-lg,
.section-checkout h1,
.section-checkout h2,
.form-section__title,
.checkout-header__brand + * {
  color: var(--wc-navy);
}

/* Primary CTA → yellow w/ navy text */
.submit-button {
  background: var(--wc-yellow) !important;
  border: none !important;
}
.submit-button:hover {
  background: var(--wc-yellow-dark) !important;
}
.submit-button__main-text,
.submit-button__subtext {
  color: var(--wc-navy-dark) !important;
}
.submit-button__main-text {
  font-weight: 800;
  letter-spacing: 0.02em;
}

/* Selected bundle card → navy accent + light wash */
.os-card.next-selected,
.os-card[class*="next-selected"] {
  border-color: var(--wc-navy) !important;
  background: var(--wc-blue-wash) !important;
}
/* Bundle card radio — empty gray ring (unselected) → solid navy circle
   with a white center dot (selected). Figma. */
.os-card .radio-style-1 {
  box-sizing: border-box !important;
  width: 20px !important;
  height: 20px !important;
  border-radius: 50% !important;
  border: 2px solid #c9ced8 !important;
  background: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
}
.os-card .radio-style-1 .radio-inner {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: transparent !important;
}
.os-card.next-selected .radio-style-1,
.os-card[class*="next-selected"] .radio-style-1 {
  background: var(--wc-navy) !important;
  border-color: var(--wc-navy) !important;
}
.os-card.next-selected .radio-style-1 .radio-inner,
.os-card[class*="next-selected"] .radio-style-1 .radio-inner {
  background: #fff !important;
}

/* Voucher discount badge — shown inside bundle cards when a coupon is active */
.voucher-badge {
  color: var(--wc-green);
  font-size: 1rem;
  font-weight: 700;
}

/* Payment method radio — same radio-style-1 pattern as bundle cards */
.payment-method .radio-style-1 {
  box-sizing: border-box !important;
  width: 20px !important;
  height: 20px !important;
  border-radius: 50% !important;
  border: 2px solid #c9ced8 !important;
  background: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
}
.payment-method .radio-style-1 .radio-inner {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: transparent !important;
}
.payment-method.next-selected .radio-style-1 {
  background: #1a1a1a !important;
  border-color: #1a1a1a !important;
}
.payment-method.next-selected .radio-style-1 .radio-inner {
  background: #fff !important;
}

/* Deal badges + savings → green */
.os-card__label--pill-primary,
.os-card__label--pill-secondary,
.os-card__title-badge.pb--bestseller {
  background: var(--wc-green) !important;
  color: #fff !important;
}
/* "Best Deal" pill → blue (Figma). Most Popular stays green above. */
.os-card__label-2.os-card__label--bestdeal {
  background: #298fbd !important;
  color: #fff !important;
}

/* Most Popular / Best Deal badges moved INTO the pricing column, top, in normal
   flow (not absolutely positioned). */
.os-card__pricing:has(.os-card__label--inline) {
  justify-content: flex-start !important;
  gap: 0.35rem;
}
.os-card__label-2.os-card__label--inline {
  position: static !important;
  inset: auto !important;
  align-self: flex-end;
  width: max-content;
  height: auto;
  border-radius: 4px !important;
  padding: 4px;
  margin: 0;
  gap: 4px;
}

/* Footer — centered stack, white bg, pipe-separated links (Figma) */
.footer_section {
  background: #fff !important;
  border-top: 1px solid var(--wc-line);
}
.footer_copy-info {
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

.footer_link-wrapper {
  gap: 0.75rem !important;
}
.footer_link-wrapper .footer_legal-link:not(:last-child)::after {
  content: "|";
  margin-left: 0.75rem;
  color: var(--wc-line);
}

/* Credit Card header — "and more…" after the card icons (Figma) */
.payment-method__more {
  align-self: center;
  margin-left: 6px;
  font-size: 0.75rem;
  color: var(--wc-muted);
}

/* Bottom trust-bar payment logos — 7 marks in a row (Figma) */
.wc-pay-flags {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.wc-pay-flags img {
  height: 30px;
  width: auto;
}

/* Shipping Protection bump (Parcelis-style): toggle banner + comparison table.
   State driven by SDK toggle classes on .parcelis-card (.next-in-cart = ON). */
.parcelis-card {
  border: 1px solid var(--wc-line);
  border-radius: 12px;
  background: #fff;
  padding: 14px 16px;
  margin: 0 0 12px;
  cursor: pointer;
}
.parcelis-card.next-in-cart {
  border-color: var(--wc-navy);
}
.parcelis-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.parcelis-title {
  margin: 0;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--wc-ink);
}
.parcelis-subtitle {
  margin: 2px 0 0;
  font-size: 0.8rem;
  color: var(--wc-muted);
}
/* Toggle pill */
.parcelis-toggle {
  position: relative;
  flex: 0 0 auto;
  width: 64px;
  height: 28px;
  border-radius: 999px;
  background: #c9ced8;
  transition: background 0.2s ease;
}
.parcelis-card.next-in-cart .parcelis-toggle {
  background: var(--wc-navy);
}
.parcelis-toggle__knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  transition: left 0.2s ease;
}
.parcelis-card.next-in-cart .parcelis-toggle__knob {
  left: 39px;
}
.parcelis-toggle__label {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.7rem;
  font-weight: 700;
}
.parcelis-toggle__label--off {
  right: 9px;
  color: #5c5c6e;
}
.parcelis-toggle__label--on {
  left: 9px;
  color: #fff;
  display: none;
}
.parcelis-card.next-in-cart .parcelis-toggle__label--off {
  display: none;
}
.parcelis-card.next-in-cart .parcelis-toggle__label--on {
  display: inline;
}
/* Comparison table — visible when OFF (not in cart), hidden when ON */
.parcelis-body {
  margin-top: 14px;
}
.parcelis-card.next-in-cart .parcelis-body {
  display: none;
}
.parcelis-table {
  width: 100%;
  border-collapse: collapse;
}
.parcelis-th {
  text-align: left;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--wc-muted);
  padding: 0 8px 8px;
  vertical-align: bottom;
}
.parcelis-th--center {
  text-align: center;
}
.parcelis-tr {
  border-top: 1px solid var(--wc-line);
}
.parcelis-td {
  padding: 10px 8px;
  font-size: 0.85rem;
  color: var(--wc-ink);
  vertical-align: middle;
}
.parcelis-td--check,
.parcelis-td--cross {
  text-align: center;
  font-weight: 700;
}
.parcelis-td--check {
  color: var(--wc-navy);
}
.parcelis-td--cross {
  color: #c0c4cc;
}
.parcelis-logo-inline {
  height: 14px;
  width: auto;
  vertical-align: middle;
}

/* Header brand logo (WunderCool wordmark) */
/* .checkout-header__brand .brand-logo {
  max-height: 34px;
  width: auto;
} */

/* Protection (order bump) — navy card matching the Figma "Arctic Clip Protection" */
.wc-protection {
  margin: 8px 0 4px;
}
.wc-protection__title {
  color: var(--wc-navy);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.25;
  margin: 0 0 6px;
}
.wc-protection__sub {
  font-size: 16px;
  color: var(--wc-navy);
  margin: 0 0 14px;
}
[data-component="prepurchase-upsell"] .bump-card {
  border: 2px solid var(--wc-line);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}
[data-component="prepurchase-upsell"] .bump-card[class*="next-active"],
[data-component="prepurchase-upsell"] .bump-card.next-selected {
  border-color: var(--wc-navy);
}
[data-component="prepurchase-upsell"] .bump__header-left {
  background: var(--wc-blue-wash);
}
.bump__checkbox .checkbox__icon {
  background: var(--wc-navy);
  color: #fff;
  border-radius: 4px;
}
.bump__price-sale,
.bump__price-total {
  color: var(--wc-navy);
  font-weight: 800;
}

/* Promo-applied / reservation strip (Figma green bar) */
.wc-promo-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--wc-green-bg);
  border: 1px solid #bfe8d7;
  color: var(--wc-navy-dark);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 0.85rem;
  margin: 12px 0;
}
.wc-promo-bar__badge {
  color: var(--wc-green);
  font-weight: 800;
  letter-spacing: 0.04em;
}

/* ── Order Summary (cart-summary01) → Figma: heading + divider, item thumbnails,
      navy text, green savings on a pale band, shipping/tax note. ───────────── */
.order-summary__title.checkout {
  color: var(--wc-navy);
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--wc-line);
}
/* Item names + Total → navy. Per-unit "/ea" lines keep .text-muted gray (child rule wins). */
.cart-item__title,
.checkout__line-item__final-price,
.order-totals__label--total,
.order-totals__value--total,
.summary-total__coin {
  font-weight: 700;
  font-size: 16px;
  line-height: 100%;
}
/* Total Savings → green (overrides next-core red #e44613) */
.order-totals__value.ts-lg.tw-600.cc-disc {
  color: var(--wc-green) !important;
}
/* Savings band → pale cream (Figma) */
.os-cart-summary-row--discount.order-totals__section--inset {
  background: #fdf8e7 !important;
}
/* Shipping & tax deferred note */
.order-totals__note {
  font-weight: 400;
  font-size: 12px;
  line-height: 167%;
  color: #1f1f76;
}

@media (max-width: 767px) {
  .wc-protection__title {
    font-size: 18px;
  }
  .wc-protection__sub {
    font-size: 14px;
  }
  .submit-button__main-text {
    font-size: 18px;
    text-wrap: balance;
  }
  .parcelis-card {
    margin-bottom: 0;
  }
  .wc-pay-flags img {
    height: 25px;
    width: auto;
  }
}
.divider_25 {
  border: 1px solid #dedede;
  width: 100%;
  height: 1px;
}