/* ═══════════════════════════════════════════════════════════
   THEME OVERRIDES — accent color variables + sky-* remapping
   This file is separate from app.css so Tailwind rebuilds
   never wipe these overrides.
═══════════════════════════════════════════════════════════ */

/* ── 0. Surface / text / border variables (dark default — deep navy) ── */
:root {
  --bg-base:     #0a0f1c;
  --bg-section:  #0d1526;
  --bg-elevated: #111a2e;
  --bg-elevated-rgb: 17,26,46;
  --bg-base-rgb: 10,15,28;
  --bg-card:     rgba(255,255,255,0.03);
  --bg-card-sm:  rgba(255,255,255,0.02);
  --bg-card-md:  rgba(255,255,255,0.045);
  --bg-chip:     rgba(255,255,255,0.05);
  --bg-dark-tint: rgba(0,0,0,0.2);
  --text-primary:   #ffffff;
  --text-secondary: #d4d4d8;
  --text-muted:     #a1a1aa;
  --text-faint:     #71717a;
  --border-base:    #223049;
  --border-base-rgb: 34,48,73;
  --border-subtle:  rgba(34,48,73,0.6);
}

/* ── 0b. Remap Tailwind's near-black utility classes to deep navy (dark mode default; light mode below overrides these back) ── */
.bg-black    { background-color: var(--bg-base) !important; }
.bg-zinc-950 { background-color: var(--bg-base) !important; }
.bg-zinc-900 { background-color: var(--bg-elevated) !important; }
.bg-zinc-900\/40 { background-color: rgba(var(--bg-elevated-rgb),0.4) !important; }
.bg-zinc-900\/50 { background-color: rgba(var(--bg-elevated-rgb),0.5) !important; }
.bg-zinc-900\/60 { background-color: rgba(var(--bg-elevated-rgb),0.6) !important; }
.bg-zinc-900\/80 { background-color: rgba(var(--bg-elevated-rgb),0.8) !important; }
.bg-zinc-950\/95 { background-color: rgba(var(--bg-base-rgb),0.95) !important; }
.bg-zinc-950\/85 { background-color: rgba(var(--bg-base-rgb),0.85) !important; }
.border-zinc-800 { border-color: var(--border-base) !important; }
.border-zinc-800\/50 { border-color: var(--border-subtle) !important; }
.border-zinc-800\/60 { border-color: rgba(var(--border-base-rgb),0.6) !important; }
.border-zinc-900 { border-color: var(--bg-elevated) !important; }
[data-mode="light"] {
  --bg-base:     #f8fafc;
  --bg-section:  #f1f5f9;
  --bg-card:     rgba(0,0,0,0.03);
  --bg-card-sm:  rgba(0,0,0,0.02);
  --bg-card-md:  rgba(0,0,0,0.04);
  --bg-chip:     rgba(0,0,0,0.05);
  --bg-dark-tint: rgba(0,0,0,0.03);
  --text-primary:   #09090b;
  --text-secondary: #3f3f46;
  --text-muted:     #52525b;
  --text-faint:     #71717a;
  --border-base:    #e4e4e7;
  --border-subtle:  rgba(228,228,231,0.7);
}

/* ═══════════════════════════════════════════════════════════
   1. ACCENT PALETTES — one block per theme key.
   Add a client palette by copying a block and giving it a new
   [data-theme="<key>"] key, then set Branding:DefaultTheme to
   that key in wwwroot/appsettings.json. No C#/Razor changes.
   Every block must define --accent-300..900 and --accent-rgb
   (the 600 value as "r, g, b" — used by all opacity variants).
═══════════════════════════════════════════════════════════ */

/* Fallback before JS applies data-theme = crimson */
:root {
  --accent-300: #f2929b; --accent-400: #e2586a;
  --accent-500: #cf2d43; --accent-600: #b31e35;
  --accent-700: #8f1729; --accent-900: #530d18;
  --accent-rgb: 179, 30, 53;
  --brand-secondary: #d4a017;
}
[data-theme="crimson"] {
  --accent-300: #f2929b; --accent-400: #e2586a;
  --accent-500: #cf2d43; --accent-600: #b31e35;
  --accent-700: #8f1729; --accent-900: #530d18;
  --accent-rgb: 179, 30, 53;
}
/* PDTF — Sports Instruction Services.
   Palette sampled from the logo: royal blue (the "D"), gold (the "F"), green
   (the "P") and the red lightning bolt. Blue stays the primary so links,
   focus rings and body UI remain predictable; gold and green are emphasis
   colours, and red is reserved for genuine alerts only. */
[data-theme="pdtf"] {
  /* Primary is the logo's GREEN, as a deep jewel emerald rather than a neon
     mint — it has to hold white label text on filled buttons and sit next to
     gold without clashing. Blue is deliberately absent from the accent ramp;
     it read as the GTTF site. */
  --accent-300: #7fe0ac; --accent-400: #3fc77f;
  --accent-500: #16a45c; --accent-600: #0f8547;
  --accent-700: #0b6a39; --accent-900: #063d21;
  --accent-rgb: 15, 133, 71;

  --brand-gold:      #e0a81f;
  --brand-gold-lt:   #f2c85c;
  --brand-green:     #0f8547;
  --brand-green-lt:  #3fc77f;
  --brand-red:       #c8202c;

  /* Kept for any existing consumers of the older names */
  --brand-secondary: #e0a81f;
  --brand-tertiary:  #0f8547;

  /* Emphasis sweep — emerald into gold, the two colours the logo leads with */
  --brand-sweep: linear-gradient(100deg, #16a45c 0%, #3fc77f 34%, #9ad98a 58%, #f2c85c 100%);
}

/* ── Brand emphasis utilities ──────────────────────────────────────────────
   Used by headline <span>s so a heading reads across the logo's colours
   instead of a single flat blue. Falls back to the accent colour on any
   theme that does not define --brand-sweep, so other clients are unaffected. */
.text-brand-sweep {
  background-image: var(--brand-sweep, linear-gradient(90deg, var(--accent-400), var(--accent-300)));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.text-brand-gold  { color: var(--brand-gold,  var(--accent-400)) !important; }
.text-brand-green { color: var(--brand-green, var(--accent-500)) !important; }

/* Thin gold rule used beside eyebrow labels */
.brand-rule-gold {
  background: var(--brand-gold, var(--accent-500)) !important;
}
[data-theme="sky"] {
  --accent-300: #7dd3fc; --accent-400: #38bdf8;
  --accent-500: #0ea5e9; --accent-600: #0284c7;
  --accent-700: #0369a1; --accent-900: #0c4a6e;
  --accent-rgb: 2, 132, 199;
}
[data-theme="emerald"] {
  --accent-300: #6ee7b7; --accent-400: #34d399;
  --accent-500: #10b981; --accent-600: #059669;
  --accent-700: #047857; --accent-900: #064e3b;
  --accent-rgb: 5, 150, 105;
}
[data-theme="violet"] {
  --accent-300: #c4b5fd; --accent-400: #a78bfa;
  --accent-500: #8b5cf6; --accent-600: #7c3aed;
  --accent-700: #6d28d9; --accent-900: #4c1d95;
  --accent-rgb: 124, 58, 237;
}
[data-theme="rose"] {
  --accent-300: #fda4af; --accent-400: #fb7185;
  --accent-500: #f43f5e; --accent-600: #e11d48;
  --accent-700: #be123c; --accent-900: #881337;
  --accent-rgb: 225, 29, 72;
}
[data-theme="amber"] {
  --accent-300: #fcd34d; --accent-400: #fbbf24;
  --accent-500: #f59e0b; --accent-600: #d97706;
  --accent-700: #b45309; --accent-900: #78350f;
  --accent-rgb: 217, 119, 6;
}

/* ── 2. Solid sky-* utility overrides ── */
.text-sky-200  { color: var(--accent-300) !important; }
.text-sky-300  { color: var(--accent-300) !important; }
.text-sky-400  { color: var(--accent-400) !important; }
.text-sky-500  { color: var(--accent-500) !important; }
.text-sky-600  { color: var(--accent-600) !important; }
.bg-sky-300    { background-color: var(--accent-300) !important; }
.bg-sky-400    { background-color: var(--accent-400) !important; }
.bg-sky-500    { background-color: var(--accent-500) !important; }
.bg-sky-600    { background-color: var(--accent-600) !important; }
.bg-sky-700    { background-color: var(--accent-700) !important; }
.bg-sky-800, .bg-sky-900, .bg-sky-950 { background-color: var(--accent-900) !important; }
.border-sky-400 { border-color: var(--accent-400) !important; }
.border-sky-500 { border-color: var(--accent-500) !important; }
.border-sky-600 { border-color: var(--accent-600) !important; }
.border-sky-700 { border-color: var(--accent-700) !important; }
.border-l-sky-500 { border-left-color: var(--accent-500) !important; }
.ring-sky-500  { --tw-ring-color: var(--accent-500) !important; }
.ring-sky-600  { --tw-ring-color: var(--accent-600) !important; }
.via-sky-500   { --tw-gradient-stops: var(--tw-gradient-from), var(--accent-500) var(--tw-gradient-via-position), var(--tw-gradient-to) !important; }
.via-sky-600   { --tw-gradient-stops: var(--tw-gradient-from), var(--accent-600) var(--tw-gradient-via-position), var(--tw-gradient-to) !important; }
.from-sky-500  { --tw-gradient-from: var(--accent-500) !important; }

/* ── 3. Opacity variants — bg ── */
.bg-sky-300\/10,.bg-sky-400\/10,.bg-sky-500\/10,.bg-sky-600\/10 { background-color: rgba(var(--accent-rgb),.10) !important; }
.bg-sky-500\/15,.bg-sky-600\/15 { background-color: rgba(var(--accent-rgb),.15) !important; }
.bg-sky-500\/20,.bg-sky-600\/20 { background-color: rgba(var(--accent-rgb),.20) !important; }
.bg-sky-500\/25,.bg-sky-600\/25 { background-color: rgba(var(--accent-rgb),.25) !important; }
.bg-sky-500\/30,.bg-sky-600\/30 { background-color: rgba(var(--accent-rgb),.30) !important; }
.bg-sky-500\/40,.bg-sky-600\/40 { background-color: rgba(var(--accent-rgb),.40) !important; }
.bg-sky-500\/50,.bg-sky-600\/50 { background-color: rgba(var(--accent-rgb),.50) !important; }
.bg-sky-500\/60,.bg-sky-600\/60 { background-color: rgba(var(--accent-rgb),.60) !important; }
.bg-sky-500\/70,.bg-sky-600\/70 { background-color: rgba(var(--accent-rgb),.70) !important; }
.bg-sky-500\/80,.bg-sky-600\/80 { background-color: rgba(var(--accent-rgb),.80) !important; }
.bg-sky-600\/90 { background-color: rgba(var(--accent-rgb),.90) !important; }
.bg-sky-900\/40 { background-color: rgba(var(--accent-rgb),.12) !important; }
.bg-sky-950\/50 { background-color: rgba(var(--accent-rgb),.08) !important; }

/* ── 4. Opacity variants — border ── */
.border-sky-500\/15,.border-sky-600\/15 { border-color: rgba(var(--accent-rgb),.15) !important; }
.border-sky-500\/18 { border-color: rgba(var(--accent-rgb),.18) !important; }
.border-sky-500\/20,.border-sky-600\/20 { border-color: rgba(var(--accent-rgb),.20) !important; }
.border-sky-500\/25,.border-sky-600\/25 { border-color: rgba(var(--accent-rgb),.25) !important; }
.border-sky-500\/30,.border-sky-600\/30 { border-color: rgba(var(--accent-rgb),.30) !important; }
.border-sky-500\/35 { border-color: rgba(var(--accent-rgb),.35) !important; }
.border-sky-500\/40,.border-sky-600\/40 { border-color: rgba(var(--accent-rgb),.40) !important; }
.border-sky-700\/40 { border-color: rgba(var(--accent-rgb),.30) !important; }
.border-sky-500\/50,.border-sky-600\/50 { border-color: rgba(var(--accent-rgb),.50) !important; }
.border-sky-500\/60 { border-color: rgba(var(--accent-rgb),.60) !important; }

/* ── 5. Opacity variants — text ── */
.text-sky-400\/80 { color: rgba(var(--accent-rgb),.80) !important; }
.text-sky-500\/30 { color: rgba(var(--accent-rgb),.30) !important; }
.text-sky-500\/40 { color: rgba(var(--accent-rgb),.40) !important; }
.text-sky-500\/50 { color: rgba(var(--accent-rgb),.50) !important; }
.text-sky-500\/60 { color: rgba(var(--accent-rgb),.60) !important; }
.text-sky-500\/70 { color: rgba(var(--accent-rgb),.70) !important; }
.text-sky-500\/80 { color: rgba(var(--accent-rgb),.80) !important; }
.text-sky-600\/70 { color: rgba(var(--accent-rgb),.70) !important; }

/* ── 6. Opacity variants — via ── */
.via-sky-500\/18,.via-sky-600\/18 { --tw-gradient-stops: var(--tw-gradient-from), rgba(var(--accent-rgb),.18) var(--tw-gradient-via-position), var(--tw-gradient-to) !important; }
.via-sky-500\/20,.via-sky-600\/20 { --tw-gradient-stops: var(--tw-gradient-from), rgba(var(--accent-rgb),.20) var(--tw-gradient-via-position), var(--tw-gradient-to) !important; }
.via-sky-500\/60 { --tw-gradient-stops: var(--tw-gradient-from), rgba(var(--accent-rgb),.60) var(--tw-gradient-via-position), var(--tw-gradient-to) !important; }
.via-sky-500\/70 { --tw-gradient-stops: var(--tw-gradient-from), rgba(var(--accent-rgb),.70) var(--tw-gradient-via-position), var(--tw-gradient-to) !important; }
.via-sky-600\/50 { --tw-gradient-stops: var(--tw-gradient-from), rgba(var(--accent-rgb),.50) var(--tw-gradient-via-position), var(--tw-gradient-to) !important; }

/* ── 7. hover: variants ── */
.hover\:bg-sky-600:hover  { background-color: var(--accent-600) !important; }
.hover\:bg-sky-700:hover  { background-color: var(--accent-700) !important; }
.hover\:text-sky-400:hover { color: var(--accent-400) !important; }
.hover\:text-sky-500:hover { color: var(--accent-500) !important; }
.hover\:text-sky-600:hover { color: var(--accent-600) !important; }
.hover\:text-sky-300:hover { color: var(--accent-300) !important; }
.hover\:border-sky-500:hover { border-color: var(--accent-500) !important; }
.hover\:border-sky-600:hover { border-color: var(--accent-600) !important; }
.hover\:bg-sky-500\/10:hover,.hover\:bg-sky-600\/10:hover { background-color: rgba(var(--accent-rgb),.10) !important; }
.hover\:bg-sky-500\/20:hover { background-color: rgba(var(--accent-rgb),.20) !important; }
.hover\:border-sky-500\/10:hover { border-color: rgba(var(--accent-rgb),.10) !important; }
.hover\:border-sky-500\/15:hover { border-color: rgba(var(--accent-rgb),.15) !important; }
.hover\:border-sky-500\/20:hover { border-color: rgba(var(--accent-rgb),.20) !important; }
.hover\:border-sky-500\/25:hover { border-color: rgba(var(--accent-rgb),.25) !important; }
.hover\:border-sky-500\/30:hover { border-color: rgba(var(--accent-rgb),.30) !important; }
.hover\:border-sky-500\/40:hover { border-color: rgba(var(--accent-rgb),.40) !important; }
.hover\:border-sky-500\/50:hover { border-color: rgba(var(--accent-rgb),.50) !important; }
.hover\:border-sky-500\/55:hover { border-color: rgba(var(--accent-rgb),.55) !important; }
.hover\:border-sky-600\/60:hover { border-color: rgba(var(--accent-rgb),.60) !important; }
.focus\:border-sky-500:focus,.focus\:border-sky-600:focus { border-color: var(--accent-500) !important; }
.focus\:ring-sky-500:focus { --tw-ring-color: var(--accent-500) !important; }

/* ── 8. group-hover: variants ── */
.group:hover .group-hover\:bg-sky-600  { background-color: var(--accent-600) !important; }
.group:hover .group-hover\:bg-sky-500\/50 { background-color: rgba(var(--accent-rgb),.50) !important; }
.group:hover .group-hover\:bg-sky-500\/60 { background-color: rgba(var(--accent-rgb),.60) !important; }
.group:hover .group-hover\:bg-sky-600\/20 { background-color: rgba(var(--accent-rgb),.20) !important; }
.group:hover .group-hover\:bg-sky-500\/10 { background-color: rgba(var(--accent-rgb),.10) !important; }
.group:hover .group-hover\:text-sky-200 { color: var(--accent-300) !important; }
.group:hover .group-hover\:text-sky-300 { color: var(--accent-300) !important; }
.group:hover .group-hover\:text-sky-400 { color: var(--accent-400) !important; }
.group:hover .group-hover\:text-sky-400\/80 { color: rgba(var(--accent-rgb),.80) !important; }
.group:hover .group-hover\:text-sky-500 { color: var(--accent-500) !important; }
.group:hover .group-hover\:border-sky-500 { border-color: var(--accent-500) !important; }
.group:hover .group-hover\:border-sky-600 { border-color: var(--accent-600) !important; }
.group:hover .group-hover\:border-sky-500\/15 { border-color: rgba(var(--accent-rgb),.15) !important; }
.group:hover .group-hover\:border-sky-500\/20 { border-color: rgba(var(--accent-rgb),.20) !important; }
.group:hover .group-hover\:ring-sky-500\/40 { --tw-ring-color: rgba(var(--accent-rgb),.40) !important; }
.group:hover .group-hover\:ring-sky-600\/60 { --tw-ring-color: rgba(var(--accent-rgb),.60) !important; }
.group:hover .group-hover\:via-sky-500\/70 { --tw-gradient-stops: var(--tw-gradient-from), rgba(var(--accent-rgb),.70) var(--tw-gradient-via-position), var(--tw-gradient-to) !important; }
.group\/row:hover .group-hover\/row\:text-sky-300 { color: var(--accent-300) !important; }
.group\/row:hover .group-hover\/row\:border-sky-400\/60 { border-color: rgba(var(--accent-rgb),.60) !important; }

/* ── 8b. Ring + from-gradient opacity variants ── */
.ring-sky-500\/50 { --tw-ring-color: rgba(var(--accent-rgb),.50) !important; }
.from-sky-500\/50 { --tw-gradient-from: rgba(var(--accent-rgb),.50) !important; }

/* ── 9. @apply-compiled selectors (hardcoded by Tailwind build) ── */
.card-dark:hover  { border-color: rgba(var(--accent-rgb),.40) !important; }
.nav-link-item:hover, .nav-link-item.active { color: var(--accent-500) !important; }
/* Elegant active-nav indicator — thin understated underline */
.nav-link-item { position: relative; padding-bottom: 6px; }
.nav-link-item.active::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1.5px;
  background: var(--accent-500);
  animation: nav-underline-in 0.2s ease-out;
}
@keyframes nav-underline-in {
  from { transform: scaleX(0); opacity: 0; }
  to   { transform: scaleX(1); opacity: 1; }
}
.dropdown-item:hover { border-left-color: var(--accent-600) !important; }
.section-label  { color: var(--accent-500) !important; }
.section-title span { color: var(--accent-600) !important; }
.btn-primary    { background-color: var(--accent-600) !important; }
.btn-primary:hover { background-color: var(--accent-700) !important; }
.btn-outline-blue { border-color: var(--accent-600) !important; color: var(--accent-400) !important; }
.btn-outline-blue:hover { background-color: var(--accent-600) !important; color: #fff !important; }

/* ── 10. Hardcoded rgba glows ── */
.masters-card.masters-card-active .masters-oval {
  border-color: rgba(var(--accent-rgb), .6) !important;
  box-shadow: 0 0 40px rgba(var(--accent-rgb), .25), 0 20px 60px rgba(0,0,0,.6) !important;
}
.team-thumb-active {
  border-color: var(--accent-600) !important;
  box-shadow: 0 8px 20px rgba(var(--accent-rgb), .35) !important;
}
.section-glow-tl { background: radial-gradient(ellipse at top left, rgba(var(--accent-rgb),.12) 0%, transparent 60%) !important; }
.section-glow-br { background: radial-gradient(ellipse at bottom right, rgba(var(--accent-rgb),.10) 0%, transparent 60%) !important; }

/* ── 11. Scrollbar ── */
::-webkit-scrollbar-thumb { background: var(--accent-500) !important; }
::-webkit-scrollbar-thumb:hover { background: var(--accent-400) !important; }

/* ── 12. Preloader + particles ── */
#preloader .spinner-ring { border-top-color: var(--accent-600) !important; }
.particle     { background: var(--accent-400) !important; box-shadow: 0 0 4px var(--accent-400) !important; }
.particle-lg  { background: var(--accent-300) !important; box-shadow: 0 0 8px var(--accent-300), 0 0 16px rgba(var(--accent-rgb),.31) !important; }

/* ═══════════════════════════════════════════════════════════
   LIGHT MODE OVERRIDES  [data-mode="light"]
═══════════════════════════════════════════════════════════ */

/* ── L0. Base page background ── */
[data-mode="light"] html,
[data-mode="light"] body { background-color: var(--bg-base) !important; color: var(--text-primary) !important; }

/* ── L1. Preloader ── */
[data-mode="light"] #preloader { background: var(--bg-base) !important; }
[data-mode="light"] #preloader p { color: #52525b; }

/* ── L2. Navbar — frosted glass ── */
[data-mode="light"] #main-navbar {
  background-color: rgba(255,255,255,0.65) !important;
  border-color: rgba(0,0,0,0.06) !important;
  backdrop-filter: blur(18px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(160%) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.08) !important;
}
[data-mode="light"] #main-navbar.scrolled {
  background-color: rgba(255,255,255,0.82) !important;
  border-color: rgba(0,0,0,0.08) !important;
  backdrop-filter: blur(20px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.10) !important;
}
[data-mode="light"] .nav-link-item { color: #3f3f46 !important; }
[data-mode="light"] .nav-link-item:hover,
[data-mode="light"] .nav-link-item.active { color: var(--accent-600) !important; }
[data-mode="light"] #main-navbar .text-zinc-100 { color: #18181b !important; }
[data-mode="light"] #main-navbar .text-zinc-300 { color: #3f3f46 !important; }
[data-mode="light"] #main-navbar .text-zinc-400 { color: #52525b !important; }

/* ── L2b. Language / theme picker buttons ── */
[data-mode="light"] #lang-picker-desktop > button,
[data-mode="light"] #theme-picker-desktop > button {
  color: #52525b !important;
  border-color: rgba(0,0,0,0.12) !important;
  background-color: transparent !important;
}
[data-mode="light"] #lang-picker-desktop > button:hover,
[data-mode="light"] #lang-picker-desktop > button.bg-zinc-800\/60,
[data-mode="light"] #theme-picker-desktop > button:hover,
[data-mode="light"] #theme-picker-desktop > button.bg-zinc-800\/60 {
  background-color: rgba(0,0,0,0.07) !important;
  border-color: rgba(0,0,0,0.20) !important;
  color: #09090b !important;
}
/* Reset stroke on flag SVGs — prevents the global navbar button svg { stroke } rule from corrupting flag stripes */
[data-mode="light"] #lang-picker-desktop svg { stroke: none !important; }

/* ── L3. Dropdown menus ── */
[data-mode="light"] .bg-zinc-900.border.border-zinc-800 {
  background-color: #ffffff !important;
  border-color: #e4e4e7 !important;
  box-shadow: 0 10px 40px rgba(0,0,0,0.12) !important;
}
[data-mode="light"] .dropdown-item { color: #52525b !important; }
[data-mode="light"] .dropdown-item:hover { background-color: #f4f4f5 !important; color: #09090b !important; }
[data-mode="light"] .dropdown-item.active { background-color: #f4f4f5 !important; color: var(--accent-600) !important; }

/* ── L4. Tailwind bg overrides ── */
[data-mode="light"] .bg-black         { background-color: var(--bg-base) !important; }
[data-mode="light"] .bg-zinc-950      { background-color: var(--bg-section) !important; }
[data-mode="light"] .bg-zinc-900      { background-color: #ffffff !important; }
[data-mode="light"] .bg-zinc-900\/40  { background-color: rgba(255,255,255,0.85) !important; }
[data-mode="light"] .bg-zinc-900\/50  { background-color: rgba(255,255,255,0.95) !important; }

/* Portrait cards (athlete / master list) — targeted shadow only on these */
[data-mode="light"] .portrait-card {
  background-color: #ffffff !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.07), 0 6px 20px rgba(0,0,0,0.05) !important;
}
/* Training Center cards */
[data-mode="light"] .dojang-card {
  background-color: #ffffff !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.07), 0 6px 20px rgba(0,0,0,0.05) !important;
}
[data-mode="light"] .dojang-card .border-zinc-700\/40 { border-color: rgba(228,228,231,0.8) !important; }
[data-mode="light"] .dojang-card .border-zinc-800\/50 { border-color: rgba(228,228,231,0.7) !important; }
[data-mode="light"] .dojang-card .border-t.border-zinc-800\/50 { border-color: rgba(228,228,231,0.6) !important; }
[data-mode="light"] .bg-zinc-900\/60  { background-color: rgba(255,255,255,0.97) !important; }
[data-mode="light"] .bg-zinc-900\/80  { background-color: rgba(255,255,255,0.98) !important; }
[data-mode="light"] .bg-zinc-950\/95  { background-color: rgba(248,250,252,0.97) !important; }
[data-mode="light"] .bg-zinc-800      { background-color: #f4f4f5 !important; }
[data-mode="light"] .bg-zinc-800\/50  { background-color: rgba(244,244,245,0.6) !important; }
[data-mode="light"] .bg-zinc-800\/60  { background-color: rgba(244,244,245,0.7) !important; }
[data-mode="light"] .bg-zinc-800\/80  { background-color: rgba(244,244,245,0.9) !important; }
[data-mode="light"] .bg-zinc-800\/40  { background-color: rgba(244,244,245,0.5) !important; }
[data-mode="light"] .bg-zinc-950\/85  { background-color: rgba(244,244,245,0.85) !important; }

/* ── L5. Tailwind text overrides ── */
[data-mode="light"] .text-white   { color: #09090b !important; }
[data-mode="light"] .text-zinc-100 { color: #18181b !important; }
[data-mode="light"] .text-zinc-200 { color: #27272a !important; }
[data-mode="light"] .text-zinc-300 { color: #3f3f46 !important; }
[data-mode="light"] .text-zinc-400 { color: #52525b !important; }
[data-mode="light"] .text-zinc-500 { color: #71717a !important; }
[data-mode="light"] .text-zinc-600 { color: #71717a !important; }

/* ── L5b. Restore white text on colored backgrounds ── */
[data-mode="light"] .bg-sky-600 .text-white,
[data-mode="light"] .bg-sky-600.text-white,
[data-mode="light"] .bg-sky-500 .text-white,
[data-mode="light"] .bg-sky-500.text-white,
[data-mode="light"] .bg-sky-700 .text-white,
[data-mode="light"] .bg-sky-700.text-white  { color: #ffffff !important; }
/* Counters section (bg-sky-600) — ensure text stays white */
[data-mode="light"] #counterSection .text-white,
[data-mode="light"] #counterSection .text-sky-200 { color: #ffffff !important; }
/* Nav "Join Now" pill (inline accent background) — keep white text/icon in light mode */
[data-mode="light"] .btn-nav-cta,
[data-mode="light"] .btn-nav-cta.text-white { color: #ffffff !important; }
[data-mode="light"] .btn-nav-cta svg { stroke: #ffffff !important; }
/* Dynamic MarkupString headings containing white text in light-bg sections */
[data-mode="light"] .section-headline-white { color: #09090b !important; }
[data-mode="light"] .section-headline-white span { color: var(--accent-600) !important; }

/* ── L6. Tailwind border overrides ── */
[data-mode="light"] .border-zinc-900 { border-color: #f4f4f5 !important; }
[data-mode="light"] .border-zinc-800 { border-color: #e4e4e7 !important; }
[data-mode="light"] .border-zinc-800\/50 { border-color: rgba(228,228,231,0.6) !important; }
[data-mode="light"] .border-zinc-800\/60 { border-color: rgba(228,228,231,0.6) !important; }
[data-mode="light"] .border-zinc-800\/70 { border-color: rgba(228,228,231,0.7) !important; }
[data-mode="light"] .border-zinc-700 { border-color: #d4d4d8 !important; }
[data-mode="light"] .border-zinc-700\/60 { border-color: rgba(212,212,216,0.6) !important; }
[data-mode="light"] .hover\:border-zinc-700:hover { border-color: rgba(var(--accent-rgb),0.4) !important; }
/* Ring offset for image rings sitting on dark card bg */
[data-mode="light"] .ring-offset-zinc-900 { --tw-ring-offset-color: #ffffff !important; }
/* Sticky filter/tab bars — force opaque background + shadow in light mode */
[data-mode="light"] .sticky.bg-zinc-950 {
  background-color: #ffffff !important;
  box-shadow: 0 1px 0 #e4e4e7, 0 2px 10px rgba(0,0,0,0.06) !important;
}
[data-mode="light"] .sticky.bg-zinc-950\/95 {
  background-color: rgba(255,255,255,0.97) !important;
  box-shadow: 0 1px 0 #e4e4e7, 0 2px 10px rgba(0,0,0,0.06) !important;
}
[data-mode="light"] .border-white\/\[0\.04\] { border-color: rgba(0,0,0,0.06) !important; }
[data-mode="light"] .border-white\/\[0\.05\] { border-color: rgba(0,0,0,0.07) !important; }
[data-mode="light"] .border-white\/\[0\.06\] { border-color: rgba(0,0,0,0.08) !important; }
[data-mode="light"] .border-white\/\[0\.07\] { border-color: rgba(0,0,0,0.09) !important; }
[data-mode="light"] .border-white\/\[0\.08\] { border-color: rgba(0,0,0,0.10) !important; }
[data-mode="light"] .border-white\/\[0\.10\] { border-color: rgba(0,0,0,0.12) !important; }

/* ── L7. Opacity text overrides ── */
[data-mode="light"] .text-white\/\[0\.06\] { color: rgba(0,0,0,0.10) !important; }
[data-mode="light"] .text-white\/\[0\.04\] { color: rgba(0,0,0,0.08) !important; }

/* ── L8. Card-dark ── */
[data-mode="light"] .card-dark {
  background-color: #ffffff !important;
  border-color: #e4e4e7 !important;
}
[data-mode="light"] .card-dark:hover { border-color: rgba(var(--accent-rgb),.45) !important; }

/* ── L9. Shadow overrides ── */
[data-mode="light"] .shadow-black\/70 { --tw-shadow-color: rgba(0,0,0,0.15) !important; }

/* ── L-hover. Hover bg/text overrides (dark components used inside light mode) ── */
[data-mode="light"] .hover\:bg-zinc-900:hover { background-color: #ebebec !important; }
[data-mode="light"] .hover\:bg-zinc-800:hover { background-color: #f4f4f5 !important; }
[data-mode="light"] .hover\:text-white:hover   { color: #09090b !important; }

/* ── L10. Mobile menu ── */
[data-mode="light"] .border-t.border-zinc-800 { border-color: #e4e4e7 !important; }
[data-mode="light"] #main-navbar .text-zinc-300.hover\:text-white { color: #3f3f46 !important; }
[data-mode="light"] #main-navbar button svg { stroke: #3f3f46; }
[data-mode="light"] #main-navbar .bg-sky-600 svg { stroke: white !important; }

/* ── L11. Section dividers and watermark text ── */
[data-mode="light"] .opacity-\[0\.02\] { opacity: 0.04 !important; }
[data-mode="light"] .opacity-\[0\.03\] { opacity: 0 !important; }

/* ── L12. Scrollbar ── */
[data-mode="light"] ::-webkit-scrollbar-track { background: #f1f5f9; }

/* ── L13. Section glow (softer on light) ── */
[data-mode="light"] .section-glow-tl { background: radial-gradient(ellipse at top left, rgba(var(--accent-rgb),.08) 0%, transparent 60%) !important; }
[data-mode="light"] .section-glow-br { background: radial-gradient(ellipse at bottom right, rgba(var(--accent-rgb),.06) 0%, transparent 60%) !important; }

/* ── L14. @apply-compiled white text (section-title, btn-primary) ── */
[data-mode="light"] .section-title      { color: #09090b !important; }
[data-mode="light"] .section-title span { color: var(--accent-600) !important; }
/* btn-primary stays white-on-accent */
[data-mode="light"] .btn-primary        { color: #ffffff !important; }
[data-mode="light"] .btn-primary:hover  { color: #ffffff !important; }
/* hover:text-white on the mode toggle button should work in both modes */
[data-mode="light"] #main-navbar .hover\:text-white:hover { color: #09090b !important; }

/* ── L15a. Card info panels with hardcoded dark inline backgrounds ── */
[data-mode="light"] .founder-info-panel {
  background: #ffffff !important;
  border-color: #e4e4e7 !important;
}
[data-mode="light"] .member-info-panel {
  background: #ffffff !important;
  border-color: #e4e4e7 !important;
}
/* Masters portrait card — glass info overlay (sits over photo, lightened) */
[data-mode="light"] .master-info-panel {
  background: rgba(248,250,252,0.88) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-top-color: rgba(0,0,0,0.08) !important;
}
/* Initials placeholder areas — swap dark navy for light blue-gray */
[data-mode="light"] .img-placeholder {
  background: linear-gradient(160deg, #dde6f4 0%, #e8eef8 60%, #edf2fb 100%) !important;
}
[data-mode="light"] .img-placeholder span {
  color: rgba(0,0,0,0.15) !important;
}

/* ── L15. Always-dark hero sections (bg-image + dark overlays — must stay dark) ── */
[data-mode="light"] #bannerSection,
[data-mode="light"] .hero-dark-section {
  background-color: #09090b !important;
}
/* Cancel the bg-zinc-* light overrides inside dark hero sections */
[data-mode="light"] #bannerSection .bg-zinc-950,
[data-mode="light"] .hero-dark-section .bg-zinc-950 { background-color: transparent !important; }
[data-mode="light"] #bannerSection .bg-zinc-900,
[data-mode="light"] .hero-dark-section .bg-zinc-900 { background-color: transparent !important; }
[data-mode="light"] #bannerSection .bg-black,
[data-mode="light"] .hero-dark-section .bg-black    { background-color: transparent !important; }
/* Keep text white inside dark hero sections */
[data-mode="light"] #bannerSection .text-white,
[data-mode="light"] .hero-dark-section .text-white  { color: #ffffff !important; }
[data-mode="light"] #bannerSection .text-zinc-400,
[data-mode="light"] .hero-dark-section .text-zinc-400 { color: #a1a1aa !important; }
[data-mode="light"] #bannerSection .text-zinc-600,
[data-mode="light"] .hero-dark-section .text-zinc-600 { color: #71717a !important; }
[data-mode="light"] #bannerSection .section-title,
[data-mode="light"] .hero-dark-section .section-title { color: #ffffff !important; }
[data-mode="light"] #bannerSection .section-label,
[data-mode="light"] .hero-dark-section .section-label { color: var(--accent-500) !important; }
[data-mode="light"] #bannerSection .border-zinc-800,
[data-mode="light"] .hero-dark-section .border-zinc-800 { border-color: #27272a !important; }

/* ── L16. btn-outline in light mode ── */
[data-mode="light"] .btn-outline {
  border-color: #09090b !important;
  color: #09090b !important;
}
[data-mode="light"] .btn-outline:hover {
  background-color: #09090b !important;
  color: #ffffff !important;
}
/* Restore white outline when inside always-dark hero sections */
[data-mode="light"] #bannerSection .btn-outline,
[data-mode="light"] .hero-dark-section .btn-outline {
  border-color: #ffffff !important;
  color: #ffffff !important;
}
[data-mode="light"] #bannerSection .btn-outline:hover,
[data-mode="light"] .hero-dark-section .btn-outline:hover {
  background-color: #ffffff !important;
  color: #09090b !important;
}

.w-32 {
    width: 10rem;
}

.h-32 {
    height: 10rem;
}

/* ── Photo upload preview box ── */
.photo-preview-box {
  background: linear-gradient(160deg, #0f1f3d 0%, #0a0a0f 100%);
}
[data-mode="light"] .photo-preview-box {
  background: #f1f5f9 !important;
}

/* ── Global image fade-in (hides top-to-bottom progressive scan) ── */
img.img-fade {
  opacity: 0;
  transition: opacity 0.4s ease;
}
img.img-fade.img-loaded {
  opacity: 1;
}

/* ── Who We Are logo — adapt dark logo for light theme ── */
/* invert() flips black→white (removes dark bg), hue-rotate(180deg) corrects colors back */
[data-mode="light"] .pta-who-img img {
  filter: invert(1) hue-rotate(180deg);
}

/* ── Registration Designation Card Selector ── */
.reg-desg-card {
  background: var(--bg-card);
  border-color: var(--border-subtle);
  transition: background 0.12s, border-color 0.12s;
}
.reg-desg-card:not(.reg-desg-disabled):hover {
  background: var(--bg-card-md);
  border-color: var(--border-base);
}
.reg-desg-card.reg-desg-selected {
  background: rgba(var(--accent-rgb), 0.07);
  border-color: rgba(var(--accent-rgb), 0.30);
}
.reg-desg-card.reg-desg-selected:not(.reg-desg-disabled):hover {
  background: rgba(var(--accent-rgb), 0.11);
  border-color: rgba(var(--accent-rgb), 0.45);
}

/* ── Registration Modal — always dark regardless of theme ── */
[data-mode="light"] .modal-always-dark                              { background-color: #09090b !important; color: #ffffff !important; }
[data-mode="light"] .modal-always-dark .bg-zinc-950                { background-color: #09090b !important; }
[data-mode="light"] .modal-always-dark .bg-zinc-900                { background-color: #18181b !important; }
[data-mode="light"] .modal-always-dark .bg-zinc-800                { background-color: #27272a !important; }
[data-mode="light"] .modal-always-dark .bg-zinc-800\/60            { background-color: rgba(39,39,42,0.6) !important; }
[data-mode="light"] .modal-always-dark .text-white                 { color: #ffffff !important; }
[data-mode="light"] .modal-always-dark .text-zinc-100              { color: #f4f4f5 !important; }
[data-mode="light"] .modal-always-dark .text-zinc-200              { color: #e4e4e7 !important; }
[data-mode="light"] .modal-always-dark .text-zinc-300              { color: #d4d4d8 !important; }
[data-mode="light"] .modal-always-dark .text-zinc-400              { color: #a1a1aa !important; }
[data-mode="light"] .modal-always-dark .text-zinc-500              { color: #71717a !important; }
[data-mode="light"] .modal-always-dark .text-zinc-600              { color: #52525b !important; }
[data-mode="light"] .modal-always-dark .border-zinc-800            { border-color: #27272a !important; }
[data-mode="light"] .modal-always-dark .border-zinc-800\/40        { border-color: rgba(39,39,42,0.4) !important; }
[data-mode="light"] .modal-always-dark .border-zinc-700            { border-color: #3f3f46 !important; }
[data-mode="light"] .modal-always-dark .border-red-700\/40         { border-color: rgba(185,28,28,0.4) !important; }
[data-mode="light"] .modal-always-dark .bg-red-900\/20             { background-color: rgba(127,29,29,0.2) !important; }
[data-mode="light"] .modal-always-dark .hover\:bg-zinc-800:hover   { background-color: #27272a !important; }
[data-mode="light"] .modal-always-dark .hover\:bg-zinc-900:hover   { background-color: #18181b !important; }
[data-mode="light"] .modal-always-dark .hover\:text-white:hover    { color: #ffffff !important; }
[data-mode="light"] .modal-always-dark .hover\:border-zinc-600:hover { border-color: #52525b !important; }
[data-mode="light"] .modal-always-dark .hover\:border-zinc-500:hover { border-color: #71717a !important; }
[data-mode="light"] .modal-always-dark .border-t.border-zinc-800   { border-color: #27272a !important; }
[data-mode="light"] .modal-always-dark .border-l.border-zinc-800   { border-color: #27272a !important; }

/* ── Modal slide animations ── */
@keyframes modal-slide-up {
  from { opacity: 0; translate: 0 28px; }
  to   { opacity: 1; translate: 0 0; }
}
@keyframes modal-slide-down {
  from { opacity: 1; translate: 0 0; }
  to   { opacity: 0; translate: 0 28px; }
}
@keyframes modal-backdrop-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes modal-backdrop-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}
.modal-enter   { animation: modal-slide-up      0.22s cubic-bezier(0.16, 1, 0.3, 1) both; }
.modal-leave   { animation: modal-slide-down     0.19s ease-in both; }
.backdrop-enter { animation: modal-backdrop-in  0.20s ease both; }
.backdrop-leave { animation: modal-backdrop-out 0.19s ease both; }

/* ── Force dark theme on modal panel — beats [data-mode="light"] rules via source order ── */
[data-mode="dark"] { background-color: #09090b; color: #ffffff; }
[data-mode="dark"] .text-white                          { color: #ffffff !important; }
[data-mode="dark"] .text-zinc-100                       { color: #f4f4f5 !important; }
[data-mode="dark"] .text-zinc-200                       { color: #e4e4e7 !important; }
[data-mode="dark"] .text-zinc-300                       { color: #d4d4d8 !important; }
[data-mode="dark"] .text-zinc-400                       { color: #a1a1aa !important; }
[data-mode="dark"] .text-zinc-500                       { color: #71717a !important; }
[data-mode="dark"] .text-zinc-600                       { color: #52525b !important; }
[data-mode="dark"] .text-zinc-700                       { color: #3f3f46 !important; }
[data-mode="dark"] .bg-zinc-950                         { background-color: #09090b !important; }
[data-mode="dark"] .bg-zinc-900                         { background-color: #18181b !important; }
[data-mode="dark"] .bg-zinc-800                         { background-color: #27272a !important; }
[data-mode="dark"] .bg-zinc-800\/60                     { background-color: rgba(39,39,42,0.6) !important; }
[data-mode="dark"] .border-zinc-800                     { border-color: #27272a !important; }
[data-mode="dark"] .border-zinc-800\/40                 { border-color: rgba(39,39,42,0.4) !important; }
[data-mode="dark"] .border-zinc-700                     { border-color: #3f3f46 !important; }
[data-mode="dark"] .border-red-700\/40                  { border-color: rgba(185,28,28,0.4) !important; }
[data-mode="dark"] .bg-red-900\/20                      { background-color: rgba(127,29,29,0.2) !important; }
[data-mode="dark"] .sticky.bg-zinc-950                  { background-color: #09090b !important; box-shadow: 0 1px 0 #27272a !important; }
[data-mode="dark"] .hover\:text-white:hover             { color: #ffffff !important; }
[data-mode="dark"] .hover\:bg-zinc-800:hover            { background-color: #27272a !important; }
[data-mode="dark"] .hover\:bg-zinc-900:hover            { background-color: #18181b !important; }
[data-mode="dark"] .hover\:border-zinc-600:hover        { border-color: #52525b !important; }
[data-mode="dark"] .hover\:border-zinc-500:hover        { border-color: #71717a !important; }
[data-mode="dark"] .border-t.border-zinc-800            { border-color: #27272a !important; }
[data-mode="dark"] .border-l.border-zinc-800            { border-color: #27272a !important; }

/* ── L16b. Checkout page ── */
/* Page header strip — add a visible bottom border so it separates from content */
[data-mode="light"] .border-zinc-800\/60 { border-color: rgba(0,0,0,0.09) !important; }
/* Input fields — bg-zinc-950 becomes the section bg (#f1f5f9), ensure text is dark */
[data-mode="light"] input.bg-zinc-950,
[data-mode="light"] textarea.bg-zinc-950 {
  background-color: #ffffff !important;
  color: #09090b !important;
  border-color: #d4d4d8 !important;
}
[data-mode="light"] input.bg-zinc-950::placeholder,
[data-mode="light"] textarea.bg-zinc-950::placeholder { color: #a1a1aa !important; }
/* ── L16b-0. Help Center page ── */
[data-mode="light"] .help-page-bg {
  background: var(--bg-section) !important;
}
[data-mode="light"] .help-page-bg .border-zinc-700 {
  border-color: #d4d4d8 !important;
}
[data-mode="light"] .help-page-bg .text-zinc-300 {
  color: #3f3f46 !important;
}
/* "Returns & Refund" outline button text */
[data-mode="light"] .help-page-bg a.border-zinc-700 {
  color: #3f3f46 !important;
  border-color: #d4d4d8 !important;
}

/* ── L16b-1. Returns & Refund page ── */
[data-mode="light"] .returns-page-bg {
  background: var(--bg-section) !important;
}
/* "Shipping & Help Center" outline button — fix text/border on light bg */
[data-mode="light"] .returns-page-bg .border-zinc-700 {
  border-color: #d4d4d8 !important;
}
[data-mode="light"] .returns-page-bg .text-zinc-300 {
  color: #3f3f46 !important;
}
/* policy-body text in light mode */
[data-mode="light"] .policy-body         { color: #3f3f46 !important; }
[data-mode="light"] .policy-body strong,
[data-mode="light"] .policy-body b       { color: #09090b !important; }
[data-mode="light"] .policy-body h2,
[data-mode="light"] .policy-body h3      { color: #09090b !important; }

/* ── L16b-2. Order Tracking — status badge ── */
/* Dark tinted badges look invisible on light bg — flip to solid light-tint + dark border */
[data-mode="light"] .bg-amber-900\/30   { background-color: rgba(251,191,36,0.12)  !important; }
[data-mode="light"] .text-amber-300     { color: #b45309 !important; }
[data-mode="light"] .border-amber-700\/40 { border-color: rgba(180,83,9,0.35) !important; }

[data-mode="light"] .bg-blue-900\/30    { background-color: rgba(59,130,246,0.10)  !important; }
[data-mode="light"] .text-blue-300      { color: #1d4ed8 !important; }
[data-mode="light"] .border-blue-700\/40 { border-color: rgba(29,78,216,0.30) !important; }

[data-mode="light"] .bg-violet-900\/30  { background-color: rgba(139,92,246,0.10) !important; }
[data-mode="light"] .text-violet-300    { color: #6d28d9 !important; }
[data-mode="light"] .border-violet-700\/40 { border-color: rgba(109,40,217,0.30) !important; }

[data-mode="light"] .bg-cyan-900\/30    { background-color: rgba(6,182,212,0.10)  !important; }
[data-mode="light"] .text-cyan-300      { color: #0e7490 !important; }
[data-mode="light"] .border-cyan-700\/40 { border-color: rgba(14,116,144,0.30) !important; }

[data-mode="light"] .bg-teal-900\/30    { background-color: rgba(20,184,166,0.10) !important; }
[data-mode="light"] .text-teal-300      { color: #0f766e !important; }
[data-mode="light"] .border-teal-700\/40 { border-color: rgba(15,118,110,0.30) !important; }

[data-mode="light"] .bg-emerald-900\/30 { background-color: rgba(52,211,153,0.10) !important; }
[data-mode="light"] .text-emerald-300   { color: #047857 !important; }
[data-mode="light"] .border-emerald-700\/40 { border-color: rgba(4,120,87,0.30) !important; }

[data-mode="light"] .bg-red-900\/30     { background-color: rgba(239,68,68,0.10)  !important; }
[data-mode="light"] .text-red-300       { color: #b91c1c !important; }
[data-mode="light"] .border-red-700\/40 { border-color: rgba(185,28,28,0.30) !important; }

/* ── L16c. Shop Profile page ── */
[data-mode="light"] .profile-input {
  background: #ffffff !important;
  border-color: #d4d4d8 !important;
  color: #09090b !important;
}
[data-mode="light"] .profile-input:focus {
  border-color: #0ea5e9 !important;
  box-shadow: 0 0 0 2px rgba(14,165,233,.15) !important;
}
[data-mode="light"] .profile-label { color: #52525b !important; }
[data-mode="light"] .tab-active    { color: #09090b !important; border-bottom-color: #0ea5e9 !important; }
[data-mode="light"] .tab-inactive  { color: #71717a !important; }

/* Buttons that must always keep white text regardless of mode */
[data-mode="light"] .btn-always-white-text,
[data-mode="light"] .btn-always-white-text .text-white { color: #ffffff !important; }
/* Maya logo box — add a subtle border so it stays visible on the white card */
[data-mode="light"] .maya-logo-box {
  border: 1px solid #e4e4e7 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
}
/* Divider lines inside the order summary */
[data-mode="light"] .border-t.border-zinc-800 { border-color: #e4e4e7 !important; }
/* "Back to Cart" button — hover text should go dark, not white */
[data-mode="light"] .hover\:text-white:hover { color: #09090b !important; }

/* ── L17. e-Shop — hero-dark-section inner element fixes ── */
/* Text colours that L15 doesn't cover */
[data-mode="light"] .hero-dark-section .text-zinc-100  { color: #f4f4f5 !important; }
[data-mode="light"] .hero-dark-section .text-zinc-200  { color: #e4e4e7 !important; }
[data-mode="light"] .hero-dark-section .text-zinc-300  { color: #d4d4d8 !important; }
[data-mode="light"] .hero-dark-section .text-zinc-500  { color: #71717a !important; }
/* Keep search bar, stat chips and card containers dark inside the dark hero */
[data-mode="light"] .hero-dark-section .bg-zinc-900\/80  { background-color: rgba(24,24,27,0.80) !important; }
[data-mode="light"] .hero-dark-section .bg-zinc-900\/90  { background-color: rgba(24,24,27,0.90) !important; }
[data-mode="light"] .hero-dark-section .border-zinc-700  { border-color: #3f3f46 !important; }
[data-mode="light"] .hero-dark-section .border-zinc-700\/60 { border-color: rgba(63,63,70,0.60) !important; }
[data-mode="light"] .hero-dark-section .border-zinc-700\/80 { border-color: rgba(63,63,70,0.80) !important; }

/* ── L18. e-Shop — sidebar / filter widgets ── */
/* bg-zinc-700 (price-slider track) — not covered by L4 */
[data-mode="light"] .bg-zinc-700 { background-color: #d4d4d8 !important; }
/* Custom checkbox box */
[data-mode="light"] .filter-cb .cb-box {
  background: rgba(244,244,245,0.9) !important;
  border-color: rgba(113,113,122,0.5) !important;
}
[data-mode="light"] .filter-cb input[type=checkbox]:checked ~ .cb-box {
  background: #0ea5e9 !important;
  border-color: #38bdf8 !important;
}
[data-mode="light"] .filter-cb .cb-label               { color: #52525b !important; }
[data-mode="light"] .filter-cb input[type=checkbox]:checked ~ .cb-label { color: #09090b !important; }
[data-mode="light"] .filter-cb:hover .cb-label         { color: #09090b !important; }
/* ═══════════════════════════════════════════════════════════════════════════
   PDTF IDENTITY OVERRIDES  —  scoped to [data-theme="pdtf"] only.

   WHY THIS BLOCK EXISTS
   The shared utility layer above funnels every accent (text, border, ring,
   background) into one --accent-* ramp. With a blue ramp the whole site read as
   a single flat blue and was indistinguishable from the GTTF site.

   PDTF's logo is gold + royal blue + green, so the accent is SPLIT by role:
     • text + hairlines → gold      (its signature, and gold on dark reads well)
     • solid fills       → blue      (white label text keeps its contrast;
                                      white-on-gold would fail badly)
     • positive states   → green
   No other theme is affected, and no page markup changes.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Text accents → gold ── */
[data-theme="pdtf"] .text-sky-200 { color: #f9e3ad !important; }
[data-theme="pdtf"] .text-sky-300 { color: var(--brand-gold-lt) !important; }
[data-theme="pdtf"] .text-sky-400 { color: var(--brand-gold) !important; }
[data-theme="pdtf"] .text-sky-500 { color: var(--brand-gold) !important; }
[data-theme="pdtf"] .text-sky-600 { color: #cf9a1d !important; }

/* ── Hairlines & rings → gold, low opacity so they stay quiet ── */
[data-theme="pdtf"] .border-sky-400,
[data-theme="pdtf"] .border-sky-500 { border-color: rgba(224,169,42,.42) !important; }
[data-theme="pdtf"] .border-sky-600,
[data-theme="pdtf"] .border-sky-700 { border-color: rgba(224,169,42,.26) !important; }
[data-theme="pdtf"] .ring-sky-500,
[data-theme="pdtf"] .ring-sky-600 { --tw-ring-color: rgba(224,169,42,.38) !important; }

/* ── Solid fills: emerald, deep enough to hold white label text ── */
[data-theme="pdtf"] .bg-sky-500 { background-color: #16a45c !important; }
[data-theme="pdtf"] .bg-sky-600 { background-color: #0f8547 !important; }
[data-theme="pdtf"] .bg-sky-700 { background-color: #0b6a39 !important; }

/* The wide stats band: emerald depth with a gold hairline, so the most
   prominent block on the page carries the identity without any blue. */
[data-theme="pdtf"] .stats-band,
[data-theme="pdtf"] section.bg-sky-600 {
  background-image: linear-gradient(100deg, #0b6a39 0%, #0f8547 42%, #16a45c 72%, #0f8547 100%) !important;
  border-bottom: 2px solid var(--brand-gold) !important;
}

/* Gold hover for links that were blue-on-blue before */
[data-theme="pdtf"] a:hover .text-sky-400,
[data-theme="pdtf"] a:hover .text-sky-500 { color: var(--brand-gold-lt) !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   HOME HERO PHOTO (PDTF) — all visual tuning for the hero athlete photo.
   Static file: edits here apply on refresh with NO rebuild/restart.

   Values are derived by measuring the client's reference screenshot:
   - photo band contained vertically (visible ~y33-72%), dark above and below
   - photo-region average tone ≈ R36 G39 B42 (moody, not washed out)
   - athletes centred in the panel (source frame: empty top 30%, subjects at
     x 15-45%, y 50-70% — hence the oversize + offset crop below)
   ═══════════════════════════════════════════════════════════════════════════ */
.hero-photo-img {
    position: absolute;
    width: 100%;
    height: 135%;
    top: -26%;
    object-fit: cover;
    object-position: 13% 50%;
    filter: brightness(.98) saturate(1.05);
}

.hero-photo-overlay {
    position: absolute;
    inset: 0;
    background:
        /* left+right edge feathering into the page ground */
        linear-gradient(to right, rgba(9,9,11,.25) 0%, transparent 14%, transparent 55%, rgba(9,9,11,.7) 82%, rgb(9,9,11) 100%),
        /* vertical containment: dark band above and below the athletes */
        linear-gradient(to bottom, rgb(9,9,11) 0%, rgba(9,9,11,.55) 14%, transparent 34%, transparent 70%, rgba(9,9,11,.75) 88%, rgb(9,9,11) 100%),
        /* gentle overall veil to hit the reference's mid-tone level */
        linear-gradient(rgba(9,9,11,.16), rgba(9,9,11,.16));
}

/* ═══════════════════════════════════════════════════════════════════════════
   HOME HERO v2 — EMERALD/BLUE DUOTONE (from the client's reference).
   The reference is NOT a dark page: full-bleed athlete photo under a diagonal
   brand-colour wash — deep emerald over the right (text) side, royal blue
   sweeping the bottom-left with the doboks showing through, photo reading
   naturally only in the upper-left. White headline on green, GOLD emphasis.
   Everything below overrides hero v1 CSS-only, so it tunes live.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Photo goes full-bleed: widen the 48% panel without touching the markup */
#bannerSection div:has(> .hero-photo-img) { width: 100% !important; }

#bannerSection .hero-photo-img {
    height: 100%;
    top: 0;
    /* athletes sit at x 15-45, y 50-70 of the source; this keeps them upper-left */
    object-position: 0% 62%;
    filter: brightness(1.02) saturate(1.12) contrast(1.04);
}

#bannerSection .hero-photo-overlay {
    background:
        /* deep emerald field over the text half */
        linear-gradient(105deg,
            rgba(9,20,15,0) 0%, rgba(9,30,20,.30) 30%,
            rgba(11,58,38,.86) 52%, rgba(8,46,30,.94) 100%),
        /* royal blue sweep from the bottom-left, doboks visible through it */
        linear-gradient(25deg,
            rgba(23,65,138,.88) 0%, rgba(29,78,216,.55) 22%, transparent 46%),
        /* gentle base so the natural photo corner keeps contrast for the nav */
        linear-gradient(rgba(5,10,8,.22), rgba(5,10,8,.22));
}

/* The black-page atmosphere fights the colour fields — pull it back */
#bannerSection .hero-orb-1, #bannerSection .hero-orb-2, #bannerSection .hero-orb-3 { opacity: .22; }
#bannerSection div[style*="blur(150px)"] { opacity: .30; }

/* On a green field, green emphasis vanishes: the reference uses GOLD */
#bannerSection .text-brand-sweep {
    background-image: linear-gradient(100deg, #f5d078 0%, #ecbd4a 55%, #dd9f1c 100%);
}
#bannerSection .section-label { color: #f2c85c !important; }
/* Gild ONLY the divider line — the label now contains text spans too */
#bannerSection .section-label > span:first-child { background: #e0a81f !important; }

/* ── HERO v3: containment pass (overrides v2 values; grid-diff vs reference) ──
   Reference structure: dark top band (nav zone) → emerald as a slanted RIBBON
   through the middle with the text lockup inside it → dark again below on the
   right → royal blue rising from the bottom-left with the doboks showing
   through → athletes in a natural-photo window upper-left. */
#bannerSection .hero-photo-overlay {
    background:
        /* royal blue, bottom-left only */
        linear-gradient(22deg, rgba(23,65,138,.90) 0%, rgba(29,78,216,.60) 24%, transparent 48%),
        /* dark field with a transparent "window" over the athletes (upper-left) */
        radial-gradient(ellipse 36% 32% at 14% 40%, rgba(6,10,8,0) 0%, rgba(6,10,8,.16) 58%, rgba(6,10,8,.62) 100%),
        /* dark nav zone across the top */
        linear-gradient(to bottom, rgba(6,10,8,.60) 0%, rgba(6,10,8,.25) 14%, transparent 26%);
}

/* Emerald ribbon: its own layer so it can be SHAPED, not just graded */
#bannerSection .hero-photo-overlay::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, rgba(12,58,38,.88) 0%, rgba(8,46,30,.95) 100%);
    clip-path: polygon(27% 22%, 100% 14%, 100% 64%, 22% 58%);
}

/* Compress the text block so label → tagline sits INSIDE the ribbon,
   buttons landing just below it on the blue/dark, as in the reference */
#bannerSection h1 { margin-bottom: 1.2rem; }
#bannerSection p.text-zinc-400 { font-size: 1rem; line-height: 1.65; margin-bottom: 1.6rem; }

/* ── HERO v4: boundary calibration from grid-diff vs reference ──
   Ribbon left edge belongs at ~x40 (was bleeding to x22); blue belongs in the
   bottom-left corner only (was flooding right of centre and rising to y35). */
#bannerSection .hero-photo-overlay::before {
    clip-path: polygon(42% 20%, 100% 13%, 100% 63%, 36% 57%);
}
#bannerSection .hero-photo-overlay {
    background:
        linear-gradient(35deg, rgba(23,65,138,.92) 0%, rgba(29,78,216,.62) 18%, transparent 38%),
        radial-gradient(ellipse 36% 32% at 14% 40%, rgba(6,10,8,0) 0%, rgba(6,10,8,.16) 58%, rgba(6,10,8,.62) 100%),
        linear-gradient(to bottom, rgba(6,10,8,.60) 0%, rgba(6,10,8,.25) 14%, transparent 26%);
}