/* ============================================================
   BuyMoreCards — Shared Theme (Apple-esque, elevated)
   Loaded AFTER each page's inline <style>, so the token
   overrides below cascade site-wide and FIX accessibility
   without editing 8 separate :root blocks.
   Keeps the existing look: white surfaces, the #0071E3 blue,
   Inter body + Syne display, soft shadows, pill buttons.
   Adds: spacing scale, type scale, standardized buttons
   (44px targets, focus-visible, loading), accessible badges,
   refined inputs/cards, motion tokens.
   ============================================================ */

:root {
  /* ---- keep existing brand tokens (re-declared so every page agrees) ---- */
  --blue: #0071E3;
  --blue-hover: #0077ED;
  --blue-soft: #E8F1FD;
  --bg: #FFFFFF;
  --bg-alt: #F5F5F7;
  --text: #1D1D1F;
  --text-secondary: #6E6E73;     /* 5.1:1 — ok */

  /* ---- ACCESSIBILITY FIXES (override the failing values) ---- */
  --text-muted: #76767B;          /* was #A1A1A6 (2.6:1 ❌) → 4.5:1 ✅ */
  --success: #248A3D;             /* was #34C759 (2.2:1 as text ❌) → AA on white text */
  --success-soft: #E7F5EC;
  --error: #D70015;              /* was #FF3B30 (3.5:1) → 5.4:1 ✅ */
  --error-soft: #FCE8E9;
  --warning: #9A6700;            /* new — accessible amber (4.9:1) */
  --warning-soft: #FBF1DD;

  --border: #D2D2D7;
  --border-light: #E8E8ED;

  /* ---- elevation (kept subtle, Apple-esque) ---- */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 12px 28px rgba(0,0,0,0.12);
  --shadow-focus: 0 0 0 4px rgba(0,113,227,0.30);

  /* ---- radius (kept; Apple uses pills for primary buttons) ---- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-full: 999px;

  /* ---- TYPOGRAPHY ---- */
  --font-display: 'Syne', system-ui, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* type scale (1.25) — adopt gradually; safe to reference anywhere */
  --text-xs: 0.75rem;  --text-sm: 0.875rem; --text-base: 1rem;
  --text-lg: 1.125rem; --text-xl: 1.375rem; --text-2xl: 1.75rem;
  --text-3xl: 2.25rem; --text-4xl: 3rem;
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 800;
  --lh-tight: 1.1; --lh-snug: 1.3; --lh-normal: 1.5; --lh-relaxed: 1.65;
  --tracking-tight: -0.02em;

  /* ---- SPACING (4px base — new) ---- */
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.5rem;  --space-6: 2rem;   --space-7: 2.5rem;  --space-8: 3rem;
  --space-10: 4rem;   --space-12: 6rem;

  /* ---- MOTION ---- */
  --duration-fast: 120ms; --duration: 200ms; --duration-slow: 320ms;
  --ease-standard: cubic-bezier(0.2,0,0,1);
}
@media (prefers-reduced-motion: reduce){
  :root{ --duration-fast:0ms; --duration:0ms; --duration-slow:0ms; }
}

/* ============================================================
   Standardized Button  — model:  .btn + intent + size + state
   (does not fight existing .btn rules; these come later in the
   cascade and only add focus/loading/min-height/intents)
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
  min-height:44px;                       /* fix: old ≈41px tap target */
  padding:12px 26px; border:1px solid transparent;
  border-radius:var(--radius-full);
  font-family:var(--font-body); font-size:15px; font-weight:var(--fw-semibold);
  line-height:1; text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:background var(--duration) var(--ease-standard),
             color var(--duration) var(--ease-standard),
             border-color var(--duration) var(--ease-standard),
             transform var(--duration-fast) var(--ease-standard);
}
.btn:active{ transform:translateY(1px); }
.btn:focus-visible{ outline:none; box-shadow:var(--shadow-focus); }

.btn-primary{ background:var(--blue); color:#fff; border-color:var(--blue); }
.btn-primary:hover{ background:var(--blue-hover); }
.btn-secondary{ background:var(--bg-alt); color:var(--text); border-color:var(--border-light); }
.btn-secondary:hover{ background:var(--border-light); }
.btn-ghost{ background:transparent; color:var(--blue); border-color:transparent; }
.btn-ghost:hover{ background:var(--blue-soft); }
.btn-danger{ background:var(--error); color:#fff; border-color:var(--error); }
.btn-danger:hover{ filter:brightness(0.92); }
.btn-success{ background:var(--success); color:#fff; border-color:var(--success); }
.btn-success:hover{ filter:brightness(0.94); }

.btn-sm{ min-height:36px; padding:8px 16px; font-size:var(--text-sm); }
.btn-lg{ min-height:52px; padding:16px 34px; font-size:var(--text-lg); }
.btn-block{ display:flex; width:100%; }

.btn:disabled,.btn[aria-disabled="true"],.btn.is-disabled{ opacity:.5; cursor:not-allowed; pointer-events:none; }

/* loading state (new) — markup: <button class="btn btn-primary is-loading" aria-busy="true"><span class="btn-label">…</span></button> */
.btn.is-loading{ position:relative; color:transparent!important; pointer-events:none; }
.btn.is-loading .btn-label{ visibility:hidden; }
.btn.is-loading::after{
  content:""; position:absolute; width:1.05em; height:1.05em;
  border:2px solid #fff; border-top-color:transparent; border-radius:50%;
  animation:bmc-spin .7s linear infinite;
}
.btn-secondary.is-loading::after,.btn-ghost.is-loading::after{ border-color:var(--blue); border-top-color:transparent; }
@keyframes bmc-spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .btn.is-loading::after{ animation-duration:1.6s; } }

/* ============================================================
   Accessible badge — color + TEXT (never color alone)
   ============================================================ */
.badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:3px 10px; border-radius:var(--radius-full);
  font-size:var(--text-xs); font-weight:var(--fw-semibold); line-height:1.4;
  border:1px solid transparent;
}
.badge::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; flex:0 0 auto; }
.badge-success{ background:var(--success-soft); color:#1B6E31; border-color:#BFE6CB; }
.badge-warning{ background:var(--warning-soft); color:var(--warning); border-color:#EAD9AE; }
.badge-error{   background:var(--error-soft);   color:#B00010; border-color:#F3C9CD; }
.badge-info{    background:var(--blue-soft);     color:#0059B3; border-color:#C7E0FB; }
.badge-neutral{ background:var(--bg-alt);        color:var(--text-secondary); border-color:var(--border-light); }

/* ============================================================
   Inputs — consistent accessible focus ring
   ============================================================ */
.field, .input, input[type="text"], input[type="email"], input[type="password"],
input[type="search"], input[type="tel"], input[type="number"], textarea, select{
  font-family:var(--font-body);
}
.field:focus-visible, .input:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:none; border-color:var(--blue); box-shadow:var(--shadow-focus);
}

/* ============================================================
   Small utilities used by the redesigned sections
   ============================================================ */
.trust-bar{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:var(--space-2) var(--space-5); margin-top:var(--space-5);
  color:var(--text-secondary); font-size:var(--text-sm); font-weight:var(--fw-medium); }
.trust-bar .dot{ width:4px; height:4px; border-radius:50%; background:var(--border); }
.trust-bar strong{ color:var(--text); font-weight:var(--fw-bold); }

.eyebrow{ text-transform:uppercase; letter-spacing:var(--tracking-wide,0.06em);
  font-size:var(--text-xs); font-weight:var(--fw-bold); color:var(--blue); }

.empty-state{ text-align:center; padding:var(--space-8) var(--space-4); color:var(--text-secondary); }
.empty-state h4{ font-family:var(--font-display); color:var(--text); margin:0 0 var(--space-2); }

.visually-hidden{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* respect reduced motion for any transform/opacity intro animations site-wide */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; }
}

/* ---- index hero refinements (redesign) ---- */
.hero .eyebrow{ display:inline-block; margin-bottom:var(--space-3); }
.hero h1{ letter-spacing:var(--tracking-tight); }   /* fix: was fixed -2.5px on fluid type */
.hero-reassure{ margin-top:var(--space-3); color:var(--text-muted); font-size:var(--text-sm); font-weight:var(--fw-medium); }
.hero .trust-bar{ margin-top:var(--space-6); }

/* ---- global Apple-esque polish (safe, non-breaking) ---- */
body{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible{ outline:none; box-shadow:var(--shadow-focus); border-radius:var(--radius-sm); }
::selection{ background:var(--blue-soft); color:var(--text); }

/* ---- order page: featured "sample price" items (public price teaser) ---- */
.featured-flag{ display:inline-block; background:var(--success-soft); color:#1B6E31; border:1px solid #BFE6CB;
  font-size:11px; font-weight:700; padding:1px 8px; border-radius:var(--radius-full); margin-left:4px; }
.featured-deal{ box-shadow:inset 3px 0 0 var(--success); }
body.bmc-unlocked .featured-flag{ display:none; }  /* approved buyers see real prices, not a "sample" label */

/* ---- order page: sold-out items (shown in top/newest section as social proof) ---- */
.item-row.sold-out{ opacity:.6; }
.item-row.sold-out .qty-control, .item-row.sold-out .item-subtotal,
.item-row.sold-out .item-prices, .item-row.sold-out .item-price-mobile{ display:none; }
.item-stock.sold{ color:var(--error); font-weight:700; text-transform:uppercase; letter-spacing:.04em; }

/* ---- order page: allocation process strip + source footnote ---- */
.bmc-process{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; padding:12px 16px; margin:12px 0 4px;
  background:var(--bg-alt); border:1px solid var(--border-light); border-radius:var(--radius-md);
  font-size:var(--text-sm); font-weight:var(--fw-semibold); color:var(--text); }
.bmc-process .bmc-step{ display:inline-flex; align-items:center; gap:6px; }
.bmc-process .bmc-step-n{ display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px;
  border-radius:50%; background:var(--blue); color:#fff; font-size:11px; font-weight:700; flex:0 0 auto; }
.bmc-process .bmc-arrow{ color:var(--text-muted); }
.bmc-process .bmc-note{ margin-left:auto; color:var(--success); font-weight:700; }
.bmc-source-note{ text-align:center; color:var(--text-secondary); font-size:var(--text-sm); margin:18px 0 4px; }
.bmc-source-note a{ color:var(--blue); font-weight:600; text-decoration:none; }
@media (max-width:560px){ .bmc-process .bmc-note{ margin-left:0; width:100%; } }

/* ============================================================
   Order hero: "Secure your next allocation" + 5-step stepper
   (on-theme: white base, blue accents)
   ============================================================ */
.alloc-hero{ max-width:940px; margin:0 auto; text-align:center; }
.alloc-eyebrow{ display:inline-block; text-transform:uppercase; letter-spacing:.09em;
  font-size:var(--text-xs); font-weight:800; color:var(--blue); margin-bottom:10px; }
.alloc-hero h1{ font-family:var(--font-display); letter-spacing:var(--tracking-tight); line-height:var(--lh-tight); }
.alloc-hero .hero-tagline{ max-width:620px; margin:12px auto 0; color:var(--text-secondary); line-height:var(--lh-relaxed); }

.alloc-steps{ display:flex; align-items:flex-start; justify-content:center;
  margin:30px auto 6px; max-width:880px; }
.alloc-step{ position:relative; flex:1 1 0; display:flex; flex-direction:column; align-items:center; gap:10px; padding:0 4px; }
.alloc-step:not(:last-child)::after{ content:""; position:absolute; top:28px; left:50%; width:100%; height:2px;
  background:var(--border-light); z-index:0; }
.alloc-chip{ position:relative; z-index:1; width:58px; height:58px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--blue-soft); color:var(--blue); border:1px solid #CFE2FB; }
.alloc-chip svg{ width:26px; height:26px; }
.alloc-num{ position:absolute; top:-7px; right:-7px; width:21px; height:21px; border-radius:50%;
  background:var(--blue); color:#fff; font-size:11px; font-weight:800;
  display:flex; align-items:center; justify-content:center; border:2px solid var(--bg); z-index:2; }
.alloc-label{ font-size:var(--text-sm); font-weight:600; color:var(--text); line-height:1.3; max-width:130px; }
.alloc-cta{ margin-top:22px; }
.alloc-reassure{ margin-top:10px; color:var(--success); font-weight:700; font-size:var(--text-sm); }

@media (max-width:640px){
  .alloc-steps{ flex-direction:column; align-items:stretch; gap:18px; max-width:340px; }
  .alloc-step{ flex-direction:row; align-items:center; gap:14px; text-align:left; padding:0; }
  .alloc-step:not(:last-child)::after{ top:58px; left:28px; width:2px; height:18px; }
  .alloc-label{ max-width:none; }
}

/* alloc stepper: title + description rows (overrides single-label style) */
.alloc-step{ gap:6px; }
.alloc-title{ font-size:13px; font-weight:800; letter-spacing:.03em; text-transform:uppercase; color:var(--blue); margin-top:4px; line-height:1.2; }
.alloc-step .alloc-label{ font-size:12px; color:var(--text-secondary); font-weight:500; max-width:122px; line-height:1.35; }
.alloc-custom{ margin-top:14px; color:var(--text-secondary); font-size:var(--text-sm); }
.alloc-custom a{ color:var(--blue); font-weight:700; text-decoration:none; }

/* alloc hero: subhead confidence line + dual CTA + steps label */
.alloc-confidence{ margin:14px 0 0; font-weight:700; font-size:var(--text-base); color:var(--text); }
.alloc-cta-row{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:22px; }
.alloc-cta-row .btn{ gap:8px; }
.alloc-cta-row .btn svg{ width:18px; height:18px; flex:0 0 auto; }
.alloc-steps-label{ display:block; text-transform:uppercase; letter-spacing:.08em; font-size:12px; font-weight:800; color:var(--text-muted); margin-top:34px; }
.alloc-steps{ margin-top:16px; }

/* hide the apply/request CTA once a user is signed in (they only need Browse) */
body.bmc-signedin .alloc-apply{ display:none; }

/* ---- order page: sticky cart summary bar (slides up when items added) ---- */
.cart-bar{ position:fixed; left:0; right:0; bottom:0; z-index:90; background:var(--bg);
  border-top:1px solid var(--border-light); box-shadow:0 -4px 16px rgba(0,0,0,.08);
  transform:translateY(110%); transition:transform var(--duration-slow) var(--ease-standard); }
.cart-bar.visible{ transform:translateY(0); }
.cart-bar-inner{ max-width:1100px; margin:0 auto; display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:12px 20px; flex-wrap:wrap; }
.cart-bar-stats{ display:flex; align-items:center; gap:10px 18px; flex-wrap:wrap; font-size:var(--text-sm); color:var(--text); }
.cart-bar-stats strong{ font-weight:800; }
.cart-bar-save{ color:var(--success); font-weight:700; }
.cart-bar-sep{ width:1px; height:16px; background:var(--border); }
.cart-bar-btn{ background:var(--blue); border-color:var(--blue); }
@media(max-width:560px){ .cart-bar-inner{ justify-content:center; gap:8px 14px; } .cart-bar-btn{ width:100%; } }