/* =============================================================================
   UV Brite Beam+ — checkout/upsell reskin layer
   Loaded AFTER next-core.css. Overrides the template's design tokens to the
   UV Brite design system (navy/teal, Roboto, green CTA) so the funnel matches
   the landing page. Token names mirror next-core.css custom properties.
   ========================================================================== */

/* Self-hosted brand fonts (latin variable woff2, from the design system) */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('/beam/funnel/fonts/Roboto-latin-variable.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/beam/funnel/fonts/Inter-latin-variable.woff2') format('woff2');
}

:root {
  /* --- Brand palette → UV Brite (navy #113263 / teal #4dacc1) --- */
  --brand--color--primary: #4dacc1;            /* teal accent */
  --brand--color--primary-dark: #113263;       /* navy */
  --brand--color--primary-light: #e3f3f7;      /* teal tint */
  --brand--color--primary-lighter: #f4f7fa;    /* surface-alt */
  --brand--color--accent: #113263;
  --brand--color--accent-foreground: #ffffff;
  --brand--color--rating-star: #4dacc1;
  --brand--color--foreground: #0e2939;         /* text-primary */
  --brand--color--text-secondary: #4a5568;
  --brand--color--surface: #f4f7fa;
  --brand--color--complementary-1: #f4f7fa;
  --brand--color--border: rgba(14, 41, 57, 0.16);

  /* CTAs use the LP green for cross-page brand consistency */
  --brand--color--cta-primary: #00ac05;
  --component--color--outline: #113263;        /* selected card / focus ring = navy */

  /* State greens aligned to the LP success green */
  --system-colors--success: #00ac05;
  --system-colors--success-medium: #00ba05;

  /* --- Typography → Roboto primary, Inter secondary (matches the LP) --- */
  --font-family--primary: 'Roboto', system-ui, -apple-system, sans-serif;
  --font-family--heading: 'Roboto', system-ui, -apple-system, sans-serif;
  --font-family--secondary: 'Inter', sans-serif;

  /* --- Radii → cards/inputs 8px (LP card radius), buttons pill (LP CTA) --- */
  --radius-size--base: 8px;
  --radius-size--buttons: 1000px;
}

/* Pill CTAs, uppercase + black weight to echo the LP's CLAIM DEAL buttons */
.button {
  border-radius: 1000px;
  background-color: var(--brand--color--cta-primary);
  font-weight: 900;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.button:hover { filter: brightness(1.05); }

/* CTA text ≥18.66px bold so white-on-green meets WCAG AA for large text (3.0:1).
   Keeps the LP brand green (#00ac05) rather than darkening it. */
.button .button_content,
.button .button_content > div,
.button .submit-button__main-text { font-size: 1.1875rem; line-height: 1.15; }

/* Final checkout CTA ships gold in the template — unify to the LP green so the
   whole funnel uses one CTA color. Higher specificity than next-core's .button.cc-gold. */
.button.cc-gold,
button.cc-gold {
  background-color: var(--brand--color--cta-primary);
  color: #ffffff;
}
.button.cc-gold * { color: #ffffff; }

/* Brand-consistent header logo sizing (UV Brite mark is wide, ~120x33) */
.brand-logo { max-height: 34px; width: auto; object-fit: contain; }

/* Announcement / urgency bar → navy, matching the LP flash bar */
.announcement__block { background-color: var(--brand--color--primary-dark); }
.announcement__text { color: #ffffff; }

/* Active funnel step → navy (teal-on-white fails AA at this small size) */
.upsell-header-bar__step--active .upsell-header-bar__step-label { color: var(--brand--color--primary-dark); }
.color-primary { color: var(--brand--color--primary-dark) !important; }

/* Promo banner/timer render in shadow DOM and paint their bar with
   var(--brand--color--primary); teal there gives white-on-teal (~2.6:1, fails AA).
   Custom properties inherit across the shadow boundary, so scope a navy override
   to just these elements — the rest of the page keeps teal accents. */
promo-banner,
promo-timer { --brand--color--primary: var(--brand--color--primary-dark); }

/* Upsell hero band → navy. The template/teal gives white-on-teal ≈2.6:1 (fails
   WCAG AA); navy is 12.6:1 and matches the LP flash bar. */
.section.upsell-header { background-color: var(--brand--color--primary-dark); }
.upsell-header__title,
.upsell-header__offer,
.upsell-header__suboffer { color: #ffffff; }

/* -------- Variant swatches ---------------------------------------------------
   The SDK only auto-fills swatch backgrounds for CSS-keyword color names, so
   branded names (Nordic Blue, Glacier White, Cyan…) render as the grey #ccc
   fallback. Map each live variant name to its real product color. Targets both
   the dropdown toggle (os-dropdown[value]) and the open menu (os-dropdown-item[value]).
   Covers checkout + all upsells (same os-dropdown variant UI). */
os-dropdown[value="Nordic Blue"] .os-card__variant-dropdown-toggle .os-card__option-swatch,
os-dropdown-item[value="Nordic Blue"] .os-card__option-swatch { background: #44576b !important; }
os-dropdown[value="Glacier White"] .os-card__variant-dropdown-toggle .os-card__option-swatch,
os-dropdown-item[value="Glacier White"] .os-card__option-swatch { background: #d8ccb0 !important; } /* product is a warm cream/beige, not white */
os-dropdown[value="Black"] .os-card__variant-dropdown-toggle .os-card__option-swatch,
os-dropdown-item[value="Black"] .os-card__option-swatch { background: #232629 !important; }
os-dropdown[value="Cyan"] .os-card__variant-dropdown-toggle .os-card__option-swatch,
os-dropdown-item[value="Cyan"] .os-card__option-swatch { background: #36c0d1 !important; }
/* Spec-name fallbacks in case any package surfaces these instead */
os-dropdown[value="Blue"] .os-card__variant-dropdown-toggle .os-card__option-swatch,
os-dropdown-item[value="Blue"] .os-card__option-swatch { background: #2f3a56 !important; }
os-dropdown[value="Beige"] .os-card__variant-dropdown-toggle .os-card__option-swatch,
os-dropdown-item[value="Beige"] .os-card__option-swatch { background: #d8cdb6 !important; }
/* Keep light swatches visible on white */
.os-card__option-swatch { border: 1px solid rgba(14, 41, 57, 0.18); }

/* -------- Upsell variant slots — Groovz pattern -------------------------------
   Each unit row: [#n] [product thumbnail] [full-width color dropdown].
   Replaces the template's 2-col grid; the color selector spans remaining width. */
.beam-slot {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
}
.beam-slot + .beam-slot { margin-top: 0.5rem; }
.beam-slot .os-card__variant-number {
  flex: 0 0 2.5rem;
  width: 2.5rem;
  height: 2.5rem;
}
.beam-slot__thumb {
  flex: 0 0 2.75rem;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--brand--color--border);
  border-radius: 0.375rem;
  overflow: hidden;
  background: var(--brand--color--surface);
  display: flex;
  align-items: center;
  justify-content: center;
}
.beam-slot__thumb img { width: 100%; height: 100%; object-fit: contain; }
/* The selector cell is a next-core grid that only gives the dropdown part of the
   row; override to block and force the whole dropdown chain to fill the width. */
.beam-slot__select { flex: 1 1 auto; min-width: 0; display: block !important; }
.beam-slot__select > *,
.beam-slot__select .next-slot-variant-field,
.beam-slot__select .os-card__variant-dropdown-wrapper,
.beam-slot__select os-dropdown,
.beam-slot__select .os-card__variant-dropdown-toggle,
.beam-slot__select .os-card__variant-dropdown-menu-v2,
.beam-slot__select select { width: 100% !important; }

/* =============================================================================
   Parcelis Shipping Protection — opt-out toggle under the checkout button.
   Default ON; toggling OFF reveals the WITH/NO coverage benefits table.
   ========================================================================== */
.parcelis-wrap {
  background: var(--surface-card, #fff);
  border: 1px solid var(--border-default);
  border-radius: 12px;
  padding: 16px 18px;
  margin: 16px 0 4px;
  box-shadow: var(--shadow-card, 0 4px 6px rgba(0,0,0,.06));
}
.parcelis-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  cursor: pointer;
}
.parcelis-title { margin: 0; font-weight: 700; font-size: 15px; color: var(--brand--color--foreground, #0e2939); }
.parcelis-subtitle { margin: 4px 0 0; font-size: 13px; color: var(--brand--color--text-secondary, #4a5568); }

/* Pill switch */
.parcelis-toggle {
  position: relative; flex: 0 0 auto;
  width: 60px; height: 28px; border-radius: 999px;
  background: var(--brand--color--primary-dark, #113263);
  display: inline-flex; align-items: center; padding: 3px;
  transition: background .2s ease;
}
.parcelis-toggle__knob {
  width: 22px; height: 22px; border-radius: 50%; background: #fff;
  margin-left: auto; transition: margin .2s ease; box-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.parcelis-toggle__label {
  position: absolute; left: 10px; color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .03em;
}
.parcelis-wrap.is-off .parcelis-toggle { background: #9aa3ad; }
.parcelis-wrap.is-off .parcelis-toggle__knob { margin-left: 0; }
.parcelis-wrap.is-off .parcelis-toggle__label { left: auto; right: 10px; }

/* Benefits table — hidden until OFF */
.parcelis-body { display: none; }
.parcelis-wrap.is-off .parcelis-body { display: block; }
.parcelis-table { width: 100%; border-collapse: collapse; margin-top: 14px; }
.parcelis-th { font-size: 12px; font-weight: 800; color: var(--brand--color--foreground, #0e2939); text-align: left; padding: 9px 8px; background: var(--surface-alt, #f4f7fa); line-height: 1.2; }
.parcelis-th--center { text-align: center; }
.parcelis-td { font-size: 13px; padding: 11px 8px; border-top: 1px solid var(--border-default); color: var(--brand--color--foreground, #0e2939); line-height: 1.25; }
.parcelis-td--check { text-align: center; color: #00ac05; font-weight: 800; font-size: 16px; }
.parcelis-td--cross { text-align: center; color: #c51a00; font-weight: 800; }
.parcelis-td strong { color: var(--brand--color--primary-dark, #113263); }

/* Upsell card offer headline (moved out of the navy header for stronger conversion focus) */
.oc-head { margin: 0; line-height: 1.15; }
.oc-name { font-weight: 800; }
.oc-price { color: #e23838; font-weight: 800; white-space: nowrap; }
.oc-sub { margin: 0 0 8px; font-size: 16px; line-height: 1.4; color: var(--brand--color--text-secondary, #4a5568); }
.oc-sub strong { color: var(--brand--color--foreground, #0e2939); }

/* =============================================================================
   Carried over from the landing page (lp001): signature conversion motion.
   ========================================================================== */
/* Lightning-flash urgency glow on the announcement / DO NOT CLOSE bar */
@keyframes beam-flash {
  0%, 100% { text-shadow: 0 0 14px #ffde67; filter: none; }
  10% { text-shadow: 0 0 8px rgba(255,200,0,.95), 0 0 20px rgba(255,160,0,.6); filter: brightness(1.35); }
  20% { text-shadow: 0 0 14px #ffde67; filter: none; }
  30% { text-shadow: 0 0 12px rgba(255,200,0,1), 0 0 30px rgba(255,160,0,.7); filter: brightness(1.5); }
  40% { text-shadow: 0 0 14px #ffde67; filter: none; }
}
.announcement__text { animation: beam-flash 3s ease-in-out infinite; }

/* Green CTA pulse + outward ring halo (matches the LP CLAIM DEAL buttons) */
@keyframes beam-cta-scale { 0%,100% { transform: scale(1); } 50% { transform: scale(1.02); } }
@keyframes beam-cta-ring { 0% { box-shadow: 0 0 0 0 rgba(0,172,5,.5); } 70% { box-shadow: 0 0 0 14px rgba(0,172,5,0); } 100% { box-shadow: 0 0 0 14px rgba(0,172,5,0); } }
.beam-pulse { position: relative; animation: beam-cta-scale 2.2s ease-in-out infinite; }
.beam-pulse::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; animation: beam-cta-ring 2.2s ease-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .announcement__text, .beam-pulse, .beam-pulse::after { animation: none; }
  .beam-pulse { transform: none; }
}
.oc-sub .oc-save { color: #e23838; }

/* Full-red eyebrow variant + keep the Offer/% heading on one line + red "% OFF" */
.oc-sub.oc-sub--red { color: #e23838; font-weight: 700; }
.oc-sub.oc-sub--red strong { color: #e23838; }
.upsell-offer__price-heading { flex-wrap: nowrap; white-space: nowrap; }
.off-red { color: #e23838 !important; }

/* Bullet list is content-sized at desktop (only ~370px), causing wraps.
   Force it to fill the card column so bullets sit on one line. */
.upsell-offer__bullets, .bullet_inner-one { width: 100%; }

/* Brand yellow 5-star graphic (replaces the green Trustpilot-style boxes in the trust line) */
.stars-5-img { height: 18px; width: 92px; flex: 0 0 auto; display: block; }

/* Gallery thumbnails: template greyscales inactive slides — keep them in full color */
.swiper-slide, .swiper-slide.is-thumb { filter: none !important; }

/* Mobile: shrink the "DO NOT CLOSE" announcement text by 2px (14 → 12) */
@media (max-width: 479px) {
  .announcement__text { font-size: 12px !important; }
}

/* "Wait!…" header band: even out top/bottom padding on tablet & mobile.
   (Desktop keeps the 16/96 + -96px card-overlap; on smaller screens that left
   more navy below the text than above — neutralize the overlap and go symmetric.) */
@media (max-width: 991px) {
  .section.upsell-header { padding-top: 22px !important; padding-bottom: 22px !important; }
  .upsell-box { margin-top: 0 !important; padding-top: 0 !important; }
}

/* Right-column product hero (.heading-box.hide-tablet-down) — keep the rating row
   (stars + trust line) on one line, like the template's mobile heading-box. */
@media (min-width: 992px) {
  .checkout-layout__right .heading-box .review_component-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
  }
  .checkout-layout__right .heading-box .sub-head-text { margin-top: 2px; }
}

/* Checkout feature row — drop the grey tile behind each icon and enlarge the
   glyphs so they read as standalone marks (template ships a 50px surface tile). */
.icons-grids .icon-img {
  background-color: transparent;
  border-radius: 0;
  width: auto;
  height: auto;
}
.icons-grids .icon-img svg {
  width: 40px;
  height: 40px;
}