/* =========================================================
   cart.css — Kit/Cart Drawer + Checkout Modal (premium)
   Stacking: backdrop(9000) < drawer(10000) < modal(12000)
   ========================================================= */

/* =========================================================
   TOKENS
   ========================================================= */
:root{
  --cart-bg:#ffffff;
  --cart-fg:#0e1320;
  --cart-fg-muted:rgba(0,0,0,.65);
  --cart-border:#e9edf2;

  /* Match site “Buy Now” */
  --cart-accent:#0a1f44;
  --cart-accent-press:#091a36;

  --cart-shadow:-16px 0 40px rgba(0,0,0,.20);
  --cart-radius:16px;
  --cart-pad:14px;
  --row-pad:10px 14px;
  --btn-radius:12px;
  --focus:0 0 0 3px rgba(10,31,68,.18);

  /* Header chip (always black-on-white) */
  --chip-fg:#000;
  --chip-border:#000;

  /* Dynamic sizes */
  --vh: 1vh;              /* visual viewport height unit */
  --kb: 0px;              /* keyboard overlap height */
  --hdr: 56px;            /* trust header fixed height (desktop) */
  --hdr-offset: 0px;      /* extra cushion under notch (desktop = 0) */
}

@media (max-width:600px){
  :root{
    --hdr: 60px;          /* slightly taller header on phones */
    --hdr-offset: 0px;    /* we nudge the whole overlay instead */
  }
}

@media (prefers-color-scheme: dark){
  :root{
    --cart-bg:#161618;
    --cart-fg:#f3f3f3;
    --cart-fg-muted:rgba(255,255,255,.75);
    --cart-border:#2a2a2f;
    --cart-accent:#9ab8ff;
    --cart-accent-press:#7fa1f0;
    --cart-shadow:-16px 0 40px rgba(0,0,0,.55);
    --chip-fg:#000;
    --chip-border:#000;
  }
}

@media (prefers-reduced-motion: reduce){
  #kit-drawer,#kit-backdrop,.modal{ transition:none!important; }
}

/* =========================================================
   HEADER CART BADGE
   ========================================================= */
.cart-icon.kit-trigger{ position:relative; display:inline-flex; align-items:center; gap:8px; }
.cart-icon.kit-trigger .cart-count{
  position:absolute; top:-6px; right:-8px; min-width:18px; height:18px; padding:0 6px;
  border-radius:9px; line-height:18px; font-size:11px; font-weight:700; text-align:center;
  color:#fff; background:var(--cart-accent);
}
.cart-icon.kit-trigger svg{ display:block; }

/* =========================================================
   BACKDROP
   ========================================================= */
#kit-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.35);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .18s ease, visibility .18s ease;
  z-index:9000;
}
#kit-backdrop.show{ opacity:1; visibility:visible; pointer-events:auto; }

/* =========================================================
   CART DRAWER
   ========================================================= */
#kit-drawer{
  position:fixed; top:0; bottom:0; right:-360px;
  width:320px; max-width:88vw;
  background:var(--cart-bg); color:var(--cart-fg);
  border-left:1px solid var(--cart-border);
  box-shadow:var(--cart-shadow);
  transition:right .22s ease;
  z-index:10000;
  display:flex; flex-direction:column;
}
#kit-drawer.open{ right:0; }
#kit-drawer[aria-hidden="true"]{ visibility:visible; }

/* Drawer header */
#kit-drawer .kit-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:var(--cart-pad);
  border-bottom:1px solid var(--cart-border);
}
#kit-drawer .kit-header h3{ margin:0; font-size:1.05rem; font-weight:700; }
#kit-drawer .kit-close{
  border:0; background:transparent; color:var(--cart-fg-muted);
  font-size:22px; line-height:1; padding:6px 8px; border-radius:8px; cursor:pointer;
}
#kit-drawer .kit-close:hover{ color:var(--cart-fg); }
#kit-drawer .kit-close:focus-visible{ outline:none; box-shadow:var(--focus); }

/* Drawer items */
#kit-drawer .kit-items{
  overflow:auto; -webkit-overflow-scrolling:touch;
  padding:6px 0; display:flex; flex-direction:column; gap:0;
}
#kit-drawer .cart-row{
  display:grid; grid-template-columns:1fr auto auto;
  align-items:center; gap:10px; padding:var(--row-pad);
  border-bottom:1px solid var(--cart-border);
}
#kit-drawer .cart-row .name{ font-weight:600; font-size:.96rem; }
#kit-drawer .cart-row .qty{
  display:inline-flex; align-items:center; gap:6px;
  border:1px solid var(--cart-border); border-radius:10px; padding:2px;
}
#kit-drawer .cart-row .qty button{
  min-width:28px; height:28px; border:0; border-radius:8px;
  background:#f2f4f7; color:#000; font-weight:700; line-height:1; cursor:pointer;
}
@media (prefers-color-scheme: dark){
  #kit-drawer .cart-row .qty button{ background:#232327; color:#fff; }
}
#kit-drawer .cart-row .qty button:focus-visible{ outline:none; box-shadow:var(--focus); }
#kit-drawer .cart-row .qty span{ display:inline-block; min-width:20px; text-align:center; font-variant-numeric:tabular-nums; }
#kit-drawer .cart-row .remove{
  border:0; background:transparent; color:var(--cart-fg-muted);
  padding:6px 8px; border-radius:8px; cursor:pointer;
}
#kit-drawer .cart-row .remove:hover{ color:var(--cart-fg); }
#kit-drawer .cart-row .remove:focus-visible{ outline:none; box-shadow:var(--focus); }

/* Drawer footer */
#kit-drawer .muted{ color:var(--cart-fg-muted); font-size:.95rem; }
#kit-drawer .kit-footer{ margin-top:auto; border-top:1px solid var(--cart-border); padding:12px; display:grid; gap:10px; }
#kit-drawer .kit-total{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:4px 2px; }
#kit-drawer .kit-total span{ color:var(--cart-fg-muted); font-size:.92rem; }
#kit-drawer .kit-total strong{ font-size:1.05rem; font-weight:700; }
#kit-drawer .kit-checkout{
  width:100%; appearance:none; border:0; border-radius:12px;
  padding:12px 14px; font-weight:700; font-size:1rem; color:#fff;
  background:var(--cart-accent); cursor:pointer;
  transition:transform .02s ease, background-color .12s ease, filter .12s ease;
}
#kit-drawer .kit-checkout:hover{ filter:brightness(.98); }
#kit-drawer .kit-checkout:active{ transform:translateY(1px); background:var(--cart-accent-press); }
#kit-drawer .kit-checkout:focus-visible{ outline:none; box-shadow:var(--focus); }

@media (min-width:960px){ #kit-drawer{ width:360px; } }

/* Drawer scrollbar polish */
#kit-drawer .kit-items::-webkit-scrollbar{ width:10px; }
#kit-drawer .kit-items::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.12); border-radius:8px; }
@media (prefers-color-scheme: dark){
  #kit-drawer .kit-items::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.12); }
}

/* =========================================================
   CHECKOUT MODAL
   ========================================================= */

/* Lock page behind modal */
html.modal-open, html.modal-open body{ overflow:hidden; height:100%; -webkit-overflow-scrolling:auto; }

/* Overlay */
#checkout-modal.modal{
  position:fixed !important; inset:0 !important;
  display:none; align-items:center !important; justify-content:center !important;
  background:rgba(12,18,28,.55) !important;
  backdrop-filter:saturate(115%) blur(6px);
  -webkit-backdrop-filter:saturate(115%) blur(6px);
  z-index:12000 !important;
}
#checkout-modal.modal.show,
#checkout-modal.modal.open,
#checkout-modal.modal:not(.hidden){ display:flex !important; }

/* Clamp widths and sizing */
#checkout-modal .modal-panel,
#checkout-modal .modal-panel *{
  box-sizing:border-box !important;
  max-width:100% !important;
}

/* Panel — desktop modal feel; mobile full-screen below */
#checkout-modal .modal-panel{
  position:relative;
  width:min(600px, 92vw);
  background:#fff; color:var(--cart-fg);
  border-radius:18px; overflow:hidden;
  box-shadow:0 28px 80px rgba(0,0,0,.24), 0 2px 12px rgba(0,0,0,.10);
  display:flex; flex-direction:column;
  max-height:min(92dvh, 820px);
}

/* =========================
   BRAND LOGO (top of modal)
   ========================= */
.modal-logo {
  text-align: center;
  padding: 10px 0 6px;
  border-bottom: 1px solid rgba(0,0,0,0.05);
}
.modal-logo img {
  max-height: 36px;    /* desktop/tablet */
  max-width: 160px;
  width: auto;
  height: auto;
  object-fit: contain;
}
@media (max-width: 600px) {
  .modal-logo { padding: 6px 0 2px; }
  .modal-logo img {
    max-height: 38px;  /* phones */
    max-width: 120px;
  }
}

/* Force center for the brand logo in the modal (Chrome + Safari) */
#checkout-modal .modal-logo{
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  text-align:center !important;   /* belt-and-suspenders */
}
#checkout-modal .modal-logo img{
  display:block !important;
  margin-inline:auto !important;
}

/* ---------- Sticky trust header ---------- */
#checkout-modal .trust-header{
  position: sticky;
  top: calc(env(safe-area-inset-top, 0px) + var(--hdr-offset));
  z-index: 10;

  height: var(--hdr);
  padding: 0 16px;                   /* vertical centering via fixed height */
  padding-right: 56px;               /* clear the close button */
  display:flex; align-items:center; gap:12px;
  background:#fafbfc;
  border-bottom:1px solid #eef1f4;
  flex-wrap:nowrap; white-space:nowrap; overflow:hidden;
  margin-bottom: 4px;
}

/* Chip LEFT */
#checkout-modal .trust-header .order-chip{
  order: 1;
  margin-left: 0;
  margin-right: 8px;
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; border:1px solid #e3e7ee; border-radius:999px;
  font-weight:700; font-size:15px;
}
/* “Secure checkout” RIGHT */
#checkout-modal .trust-header .left{
  order: 2;
  margin-left: auto;                 /* push to right */
  min-width:0; display:flex; align-items:center; gap:2px;
  font-weight:800; color:#0a1f44; overflow:hidden; text-overflow:ellipsis;
  letter-spacing:.2px; font-size:15px;
}
#checkout-modal .trust-header .left .badge{ font-weight:600; color:#6a7487; font-size:12.5px; }

/* Chip lock to black-on-white */
#checkout-modal .trust-header,
#checkout-modal .trust-header .order-chip{ color-scheme:light; }
#checkout-modal .trust-header .order-chip{
  color:var(--chip-fg) !important; border-color:var(--chip-border) !important; background:#fff;
}

/* Close button centered to header height */
.modal-close{
  position:absolute;
  right:10px;
  top: calc(env(safe-area-inset-top, 0px) + var(--hdr-offset) + (var(--hdr) - 32px)/2);
  width:32px; height:32px;
  display:grid; place-items:center; border-radius:999px;
  border:1px solid #e5e7eb; background:#fff; color:#111;
  box-shadow:0 1px 2px rgba(0,0,0,.06); z-index:11;
  transition:background .12s ease, box-shadow .12s ease, transform .06s ease;
}
.modal-close:hover{ background:#f6f7fb; box-shadow:0 4px 10px rgba(0,0,0,.08); }
.modal-close:active{ transform:translateY(1px); }

/* Order summary (header chip replaces it) */
#checkout-modal .order-summary{ display:none !important; }

/* ---------- Single scroller; inputs never slide under header ---------- */
#checkout-modal .modal-body{
  flex:1 1 auto;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  scroll-padding-top: calc(var(--hdr) + var(--hdr-offset) + 10px);
  scroll-padding-bottom: 100px;
  padding-bottom: calc(16px + var(--kb) + env(safe-area-inset-bottom, 0px));
}

/* Sections (no nested scrollers) */
#checkout-modal #step-methods,
#checkout-modal #step1,
#checkout-modal #step-billing,
#checkout-modal #step2{
  padding:14px 16px;
  overflow:visible;
}

/* Inputs / selects / textareas */
#checkout-modal input[type="text"],
#checkout-modal input[type="email"],
#checkout-modal input[type="tel"],
#checkout-modal input[placeholder],
#checkout-modal select,
#checkout-modal textarea{
  width:100%; height:52px;
  padding:12px 14px; margin:0 0 12px 0;
  border:2px solid #000; border-radius:12px;
  background:#fff; color:#0e1320; font-size:16.5px; line-height:1.25;
  letter-spacing:.2px;
  scroll-margin-top: calc(var(--hdr) + var(--hdr-offset) + 12px);
}
#checkout-modal input::placeholder, #checkout-modal textarea::placeholder{ color:#4a4a4a; opacity:1; font-weight:600; }
#checkout-modal input:focus, #checkout-modal select:focus, #checkout-modal textarea:focus{
  outline:none; border-color:#000; box-shadow:0 0 0 3px rgba(0,0,0,.08);
}
#checkout-modal input.invalid{ border-color:#e11d48; }

/* Stripe corners match */
#payment-element, .StripeElement{ border-radius:12px !important; }

/* Inline error */
#checkout-modal .error{ color:#b00020; font-size:.95rem; margin-top:6px; }

/* Sticky footer CTA (single rule; spacing handled here) */
#checkout-modal .modal-footer{
  position:sticky; bottom:0; z-index:9;
  padding:12px 16px; border-top:1px solid #eef0f2; background:#fff;
  display:grid; gap:14px;
}
#step-billing .modal-footer{ gap:16px; }  /* a touch more */

/* Buttons */
#checkout-modal .pay-button,
#checkout-modal .continue,
#checkout-modal .continue-btn,
#checkout-modal button[type="submit"],
#checkout-modal #continue,
#checkout-modal #pay{
  width:100%; border:0; border-radius:14px; padding:16px;
  font-weight:800; font-size:16px; color:#fff; cursor:pointer;
  background:var(--cart-accent); box-shadow:0 12px 28px rgba(10,31,68,.25);
  transition:transform .02s ease, filter .12s ease, background .12s ease;
}
#checkout-modal #continue.disabled-look, #checkout-modal #pay:disabled{ opacity:.55; box-shadow:none; cursor:default; }
#checkout-modal #continue:active, #checkout-modal #pay:active{ transform:translateY(1px); background:var(--cart-accent-press); }

/* Trust line under buttons — default desktop spacing */
#checkout-modal .tiny-trust{
  margin-top:4px;
  text-align:center; color:#5d667a; font-size:.92rem;
}

/* Hide Stripe Link prompt if it appears */
#checkout-modal .LinkAuthenticationElement,
#checkout-modal [data-testid="link-authentication"]{ display:none!important; }

/* =========================================================
   MOBILE (≤600px): FULL-PAGE FEEL + SAFE-AREA NUDGE
   ========================================================= */
@media (max-width:600px){
  /* Make the overlay look like a full page, not a dimmed modal */
  #checkout-modal.modal{
    align-items:stretch !important;
    justify-content:stretch !important;
    background: var(--cart-bg) !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }

  /* Nudge the whole overlay down so iOS bars don’t clip the trust header */
  #checkout-modal{
    padding-top: calc(env(safe-area-inset-top, 0px) + 1px) !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  }

  #checkout-modal .modal-panel{
    width:100%;
    border-radius:0; box-shadow:none;
    height:auto;
    min-height: calc((var(--vh, 1svh) * 100)
                  - (env(safe-area-inset-top,0px) + 1px)
                  - env(safe-area-inset-bottom,0px));
    margin:0;
  }
  @supports (height:100svh){
    #checkout-modal .modal-panel{
      min-height: calc(100svh
                    - (env(safe-area-inset-top,0px) + 1px)
                    - env(safe-area-inset-bottom,0px));
    }
  }

  /* Header sticks to top of the sheet content */
  #checkout-modal .trust-header{ top: 0 !important; }
  /* Keep close button neatly inside the header */
  #checkout-modal .modal-close{ top: 8px !important; }

  /* Section padding */
  #checkout-modal #step-methods,
  #checkout-modal #step1,
  #checkout-modal #step-billing,
  #checkout-modal #step2{ padding:12px 14px; }

  /* Footer padding with safe area (tighter) */
  #checkout-modal .modal-footer{
    gap:10px;
    padding:8px 14px env(safe-area-inset-bottom,0px);
  }

  /* Bring SSL/Stripe line tight under button */
  #checkout-modal .tiny-trust{ margin-top:0; }

  /* Lift last field above sticky footer by shrinking body padding-bottom */
  #checkout-modal .modal-body{
    padding-bottom: calc(8px + var(--kb) + env(safe-area-inset-bottom, 0px));
  }
}

/* Ultra-small screens (avoid iOS zoom by keeping ≥16px) */
@media (max-width:380px){
  #checkout-modal #step-methods,
  #checkout-modal #step1,
  #checkout-modal #step-billing,
  #checkout-modal #step2{ padding:10px 12px; }
  #checkout-modal input[type], #checkout-modal select{ height:46px; font-size:16px; padding:10px 12px; }
}

/* =========================================================
   KEYBOARD-AWARE UX (CSS-only with :has; JS class also supported)
   ========================================================= */
@media (max-width:768px){
  #checkout-modal .modal-body section:has(:focus-within) .modal-footer{
    opacity:0; pointer-events:none; height:0; padding:0; margin:0; border:0; overflow:hidden; position:static;
  }
  #checkout-modal.keyboard-open #step1 .modal-footer,
  #checkout-modal.keyboard-open #step-billing .modal-footer{
    opacity:0; pointer-events:none; height:0; padding:0; margin:0; border:0; overflow:hidden; position:static;
  }
  #checkout-modal .modal-body section:has(:focus-within) .tiny-trust,
  #checkout-modal.keyboard-open #step1 .tiny-trust,
  #checkout-modal.keyboard-open #step-billing .tiny-trust{ display:none; }
}

/* =========================================================
   SMALL PLATFORM POLISH & LEGACY FALLBACKS
   ========================================================= */
button,.buy-now,.add-kit,.add-to-kit,.pay-button{ -webkit-appearance:none; appearance:none; border-radius:12px; }
body,.modal,#kit-drawer,button,input{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
.kit-items{ overflow-y:auto; -webkit-overflow-scrolling:touch; }
.kit-footer{ padding-bottom:calc(1rem + env(safe-area-inset-bottom,0px)); }

/* Legacy fallback (no dvh support) */
@supports not (height:100dvh){
  .checkout-panel{ max-height:90vh; display:flex; flex-direction:column; }
  .checkout-body{ flex:1 1 auto; overflow-y:auto; min-height:0; }
}

/* =========================================================
   SHIPPING METHOD CARDS (single column everywhere)
   ========================================================= */
#shipping-methods{
  margin-top: 8px;
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr; /* always stacked for clarity */
  border:0; padding:0;
}
#shipping-methods .ship-legend{ margin:0 0 10px; }

#shipping-methods .ship-option{
  display: block;
  position: relative;
  padding: 14px 14px 14px 44px; /* room for custom radio */
  border: 2px solid var(--cart-border);
  border-radius: 14px;
  background: #fff;
  color: var(--cart-fg);
  font-weight: 600;
  line-height: 1.35;
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
  transition: border-color .12s ease, box-shadow .12s ease, transform .02s ease;
  cursor: pointer;
}
#shipping-methods .ship-option:hover{
  border-color:#dbe2ea; box-shadow:0 4px 14px rgba(0,0,0,.06);
}
#shipping-methods .ship-option:active{ transform: translateY(1px); }

/* hide native radio, keep accessible */
#shipping-methods .ship-option input[type="radio"]{
  position: absolute; left: 12px; top: 50%;
  transform: translateY(-50%);
  width: 20px; height: 20px; margin: 0; opacity: 0;
}
/* custom radio */
#shipping-methods .ship-option::before{
  content: ""; position: absolute; left:12px; top:50%;
  transform: translateY(-50%); width:20px; height:20px; border-radius:50%;
  border:2px solid #c9d2de; background:#fff;
}
/* checked */
#shipping-methods .ship-option:has(input[type="radio"]:checked){
  border-color: var(--cart-accent);
  box-shadow: 0 0 0 3px rgba(10,31,68,.10);
}
#shipping-methods .ship-option:has(input[type="radio"]:checked)::before{
  border-color: var(--cart-accent);
  box-shadow: inset 0 0 0 5px var(--cart-accent);
}
#shipping-methods .ship-option small{
  display:block; font-weight:500; color:var(--cart-fg-muted); margin-top:4px;
}

/* Desktop readability bump for the cards */
@media (min-width: 900px){
  #shipping-methods .ship-option{
    padding: 16px 16px 16px 48px;
    font-size: 1rem;
  }
}

/* =========================================================
   PAYMENT STEP SPACING (buttons not crowded)
   ========================================================= */
#checkout-modal #step2 .payment-card{ margin-bottom:16px; }
#checkout-modal #step2 .modal-footer{ padding-top:8px; }

/* ===== Brand-lock the checkout in iOS Dark Mode (scope: modal only) ===== */
@media (prefers-color-scheme: dark){
  /* Keep the UA in light mode and reset our tokens to the light palette */
  #checkout-modal{
    color-scheme: light;

    /* override dark-mode tokens just for the modal */
    --cart-bg:#ffffff;
    --cart-fg:#0e1320;
    --cart-fg-muted:rgba(0,0,0,.65);
    --cart-border:#e9edf2;

    --cart-accent:#0a1f44;
    --cart-accent-press:#091a36;

    --chip-fg:#000;
    --chip-border:#000;
  }

  /* Panel + header/footer surfaces stay white, text stays dark */
  #checkout-modal .modal-panel,
  #checkout-modal .trust-header,
  #checkout-modal .modal-footer{
    background:#fff !important;
    color:var(--cart-fg) !important;
    border-color:#eef1f4 !important;
  }

  /* Inputs stay crisp black-on-white with bold placeholders */
  #checkout-modal input[type="text"],
  #checkout-modal input[type="email"],
  #checkout-modal input[type="tel"],
  #checkout-modal input[placeholder],
  #checkout-modal select,
  #checkout-modal textarea{
    background:#fff !important;
    color:#0e1320 !important;
    border-color:#000 !important;
  }
  #checkout-modal input::placeholder,
  #checkout-modal textarea::placeholder{ color:#4a4a4a !important; opacity:1 !important; }

  /* Primary CTAs keep brand navy + white text */
  #checkout-modal .pay-button,
  #checkout-modal .continue,
  #checkout-modal .continue-btn,
  #checkout-modal button[type="submit"],
  #checkout-modal #continue,
  #checkout-modal #pay{
    background:var(--cart-accent) !important;
    color:#fff !important;
  }
  #checkout-modal #continue:active,
  #checkout-modal #pay:active{
    background:var(--cart-accent-press) !important;
  }
  #checkout-modal #continue.disabled-look,
  #checkout-modal #pay:disabled{ opacity:.55 !important; }

  /* Shipping cards + chip stay light-themed */
  #shipping-methods .ship-option{
    background:#fff !important;
    color:var(--cart-fg) !important;
    border-color:var(--cart-border) !important;
  }
  #checkout-modal .trust-header .order-chip{
    background:#fff !important;
    color:var(--chip-fg) !important;
    border-color:var(--chip-border) !important;
  }

  /* Close button stays light */
  #checkout-modal .modal-close{
    background:#fff !important; color:#111 !important; border-color:#e5e7eb !important;
  }

  /* Stripe Payment Element (iframe) – hint light UI */
  #checkout-modal iframe[src*="js.stripe.com"]{
    color-scheme: light !important;
    background:#fff !important;
  }
}