/* ══════════════════════════════════════════════════════════════════
   AEDICA VISUAL REDESIGN — DESIGN TOKEN SYSTEM
   Apple Design Language · Dual Mode · South African Accent
   Version 2.0
══════════════════════════════════════════════════════════════════ */

/* ── SECTION 1: DESIGN TOKENS (LIGHT MODE) ── */
:root {

  /* ── BRAND CORE ── */
  --brand-primary: #0A84FF;
  --brand-primary-glow: rgba(10, 132, 255, 0.35);
  --brand-primary-subtle: rgba(10, 132, 255, 0.12);
  --brand-accent: #FF9F0A;
  --brand-accent-glow: rgba(255, 159, 10, 0.30);
  --brand-accent-subtle: rgba(255, 159, 10, 0.10);
  --brand-success: #30D158;
  --brand-success-glow: rgba(48, 209, 88, 0.25);
  --brand-success-subtle: rgba(48, 209, 88, 0.10);
  --brand-danger: #FF453A;
  --brand-warning: #FFD60A;

  /* ── LIGHT MODE SURFACES ── */
  --bg-primary: #FFFFFF;
  --bg-secondary: #F5F5F7;
  --bg-tertiary: #EBEBF0;
  --bg-elevated: #FFFFFF;
  --bg-glass: rgba(255, 255, 255, 0.72);
  --bg-glass-heavy: rgba(255, 255, 255, 0.88);
  --bg-overlay: rgba(0, 0, 0, 0.45);
  --bg-input: rgba(120, 120, 128, 0.08);
  --bg-input-focus: rgba(255, 255, 255, 0.95);

  /* ── LIGHT MODE TEXT ── */
  --text-primary: #1D1D1F;
  --text-secondary: #48484A;
  --text-tertiary: #6E6E73;
  --text-quaternary: #8E8E93;
  --text-on-dark: #F5F5F7;
  --text-link: #0A84FF;
  --text-inverse: #FFFFFF;

  /* ── LIGHT MODE BORDERS ── */
  --border-primary: rgba(0, 0, 0, 0.10);
  --border-secondary: rgba(0, 0, 0, 0.06);
  --border-focus: rgba(10, 132, 255, 0.60);
  --border-glass: rgba(255, 255, 255, 0.60);

  /* ── LIGHT MODE SHADOWS ── */
  --shadow-xs: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.05);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.07);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.08);
  --shadow-xl: 0 16px 56px rgba(0,0,0,0.14), 0 8px 24px rgba(0,0,0,0.09);
  --shadow-modal: 0 32px 96px rgba(0,0,0,0.18), 0 8px 32px rgba(0,0,0,0.12);
  --shadow-glow-blue: 0 4px 24px rgba(10,132,255,0.30);
  --shadow-glow-amber: 0 4px 24px rgba(255,159,10,0.30);
  --shadow-glow-green: 0 4px 24px rgba(48,209,88,0.25);

  /* ── RADIUS ── */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-2xl: 36px;
  --radius-pill: 999px;

  /* ── TYPOGRAPHY ── */
  --font-system: -apple-system, BlinkMacSystemFont, "SF Pro Display",
                 "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "SF Mono", "Fira Code", "Cascadia Code", monospace;
  --tracking-tight: -0.03em;
  --tracking-normal: -0.01em;
  --tracking-wide: 0.02em;
  --tracking-wider: 0.06em;

  /* ── TRANSITIONS ── */
  --ease-apple: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --transition-fast: 150ms var(--ease-apple);
  --transition-base: 220ms var(--ease-apple);
  --transition-slow: 350ms var(--ease-apple);

  /* ── BLUR ── */
  --blur-sm: blur(8px);
  --blur-md: blur(16px);
  --blur-lg: blur(24px);
  --blur-xl: blur(40px);

  /* ── GRADIENTS ── */
  --gradient-brand: linear-gradient(135deg, #0A84FF 0%, #0040DD 100%);
  --gradient-accent: linear-gradient(135deg, #FF9F0A 0%, #FF6B00 100%);
  --gradient-hero-light:
    radial-gradient(ellipse at 20% 50%, rgba(10,132,255,0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(255,159,10,0.06) 0%, transparent 45%),
    linear-gradient(180deg, #FFFFFF 0%, #F5F5F7 100%);
  --gradient-card-shine: linear-gradient(135deg,
    rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 100%);
  --gradient-text-hero: linear-gradient(135deg, #1D1D1F 0%, #48484A 100%);

  /* ── LEGACY COMPAT (maps old vars to new tokens) ── */
  --color-primary: #0A84FF;
  --color-secondary: #FF9F0A;
  --blue: #0A84FF;
  --blue-light: rgba(10,132,255,0.10);
  --blue-mid: rgba(10,132,255,0.30);
  --green: #30D158;
  --green-light: rgba(48,209,88,0.10);
  --red: #FF453A;
  --border: rgba(0,0,0,0.10);
  --text: #1D1D1F;
  --text-muted: #6E6E73;
  --color-accent: #0A84FF;
  --bg-off-white: #F5F5F7;
}

/* ══════════════════════════════════════════════════════════════
   SECTION 2: DARK MODE OVERRIDES
   Targeting the actual implementation: html.dark (Tailwind 2.x)
   Plus fallbacks for body.dark-mode and [data-theme="dark"]
══════════════════════════════════════════════════════════════ */

html.dark,
body.dark-mode,
[data-theme="dark"],
.dark-mode {

  /* ── DARK SURFACES ── */
  --bg-primary: #000000;
  --bg-secondary: #0A0A0F;
  --bg-tertiary: #141418;
  --bg-elevated: #1C1C1E;
  --bg-glass: rgba(28, 28, 30, 0.75);
  --bg-glass-heavy: rgba(28, 28, 30, 0.92);
  --bg-overlay: rgba(0, 0, 0, 0.75);
  --bg-input: rgba(255, 255, 255, 0.06);
  --bg-input-focus: rgba(255, 255, 255, 0.09);

  /* ── DARK TEXT ── */
  --text-primary: #F5F5F7;
  --text-secondary: #EBEBF0;
  --text-tertiary: #AEAEB2;
  --text-quaternary: #6E6E73;
  --text-link: #409CFF;
  --text-inverse: #1D1D1F;

  /* ── DARK BORDERS ── */
  --border-primary: rgba(255, 255, 255, 0.10);
  --border-secondary: rgba(255, 255, 255, 0.06);
  --border-focus: rgba(64, 156, 255, 0.70);
  --border-glass: rgba(255, 255, 255, 0.08);

  /* ── DARK SHADOWS ── */
  --shadow-xs: 0 1px 3px rgba(0,0,0,0.40);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.50);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.55);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.60);
  --shadow-xl: 0 16px 56px rgba(0,0,0,0.65);
  --shadow-modal: 0 32px 96px rgba(0,0,0,0.80),
                  0 8px 32px rgba(0,0,0,0.60),
                  inset 0 1px 0 rgba(255,255,255,0.06);
  --shadow-glow-blue: 0 0 32px rgba(10,132,255,0.45),
                      0 4px 16px rgba(10,132,255,0.25);
  --shadow-glow-amber: 0 0 32px rgba(255,159,10,0.40),
                       0 4px 16px rgba(255,159,10,0.20);
  --shadow-glow-green: 0 0 24px rgba(48,209,88,0.35),
                       0 4px 12px rgba(48,209,88,0.20);

  /* ── DARK GRADIENTS ── */
  --gradient-hero-dark:
    radial-gradient(ellipse at 20% 30%, rgba(10,132,255,0.18) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 70%, rgba(255,159,10,0.12) 0%, transparent 50%),
    linear-gradient(180deg, #000000 0%, #0A0A0F 100%);
  --gradient-card-dark: linear-gradient(135deg,
    rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 100%);

  /* ── LEGACY COMPAT DARK ── */
  --color-primary: #409CFF;
  --color-secondary: #FF9F0A;
  --blue: #409CFF;
  --blue-light: rgba(64,156,255,0.12);
  --blue-mid: rgba(64,156,255,0.30);
  --green: #30D158;
  --green-light: rgba(48,209,88,0.12);
  --red: #FF453A;
  --border: rgba(255,255,255,0.10);
  --text: #F5F5F7;
  --text-muted: #AEAEB2;
}

/* ══════════════════════════════════════════════════════════════
   SECTION 3: GLOBAL TYPOGRAPHY
══════════════════════════════════════════════════════════════ */

* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-system);
  /* color intentionally NOT set here */
  letter-spacing: var(--tracking-normal);
}

h1 {
  font-weight: 800;
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
  line-height: 1.08;
}
h2 {
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--text-primary);
  line-height: 1.15;
}
h3 {
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--text-primary);
  line-height: 1.25;
}
h4, h5, h6 {
  font-weight: 600;
  color: var(--text-primary);
}
p {
  color: var(--text-secondary);
  line-height: 1.7;
  letter-spacing: var(--tracking-normal);
}
a {
  color: var(--text-link);
  text-decoration: none;
  transition: opacity var(--transition-fast);
}
a:hover { opacity: 0.75; }

small, .small-text {
  color: var(--text-tertiary);
  font-size: 0.8125rem;
}
strong, b {
  font-weight: 600;
  color: var(--text-primary);
}

/* ══════════════════════════════════════════════════════════════
   SECTION 4: SCROLLBAR
══════════════════════════════════════════════════════════════ */

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border-primary);
  border-radius: var(--radius-pill);
  transition: background var(--transition-fast);
}
::-webkit-scrollbar-thumb:hover { background: var(--text-quaternary); }

/* ══════════════════════════════════════════════════════════════
   SECTION 5: BACKGROUND & BODY SURFACES
══════════════════════════════════════════════════════════════ */

/* ── LIGHT MODE: clean white/off-white background ── */
.bg-mesh-light {
  background-color: #F5F5F7 !important;
  background-image:
    radial-gradient(ellipse at 15% 50%, rgba(10, 132, 255, 0.05) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 20%, rgba(255, 159, 10, 0.04) 0%, transparent 50%) !important;
}

/* ── DARK MODE: deep midnight background ── */
html.dark .bg-mesh-light,
body.dark-mode .bg-mesh-light,
[data-theme="dark"] .bg-mesh-light {
  background-color: #0D1117 !important;
  background-image:
    radial-gradient(ellipse at 15% 50%, rgba(10, 132, 255, 0.18) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 20%, rgba(255, 159, 10, 0.10) 0%, transparent 50%) !important;
}

/* body color handled by Tailwind */
/* ══════════════════════════════════════════════════════════════
   SECTION 6: NAVBAR / HEADER
══════════════════════════════════════════════════════════════ */

header,
.glass-panel,
nav {
  background: var(--bg-glass-heavy) !important;
  backdrop-filter: var(--blur-md) saturate(180%) !important;
  -webkit-backdrop-filter: var(--blur-md) saturate(180%) !important;
  border-bottom: 1px solid var(--border-secondary) !important;
  box-shadow: var(--shadow-sm) !important;
  transition: background var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base) !important;
}

html.dark header,
html.dark .glass-panel,
html.dark nav,
body.dark-mode header,
body.dark-mode .glass-panel {
  background: var(--bg-glass-heavy) !important;
  border-bottom-color: var(--border-secondary) !important;
  box-shadow: var(--shadow-md) !important;
}

/* Logo icon */
.bg-primary.rounded-lg,
.w-8.h-8.bg-primary {
  background: var(--gradient-brand) !important;
  box-shadow: var(--shadow-glow-blue) !important;
  transition: transform var(--transition-base), box-shadow var(--transition-base) !important;
  border-radius: var(--radius-sm) !important;
}
.bg-primary.rounded-lg:hover,
.w-8.h-8.bg-primary:hover {
  box-shadow: var(--shadow-glow-blue), var(--shadow-sm) !important;
}

/* ══════════════════════════════════════════════════════════════
   SECTION 7: BUTTONS
══════════════════════════════════════════════════════════════ */

/* Primary CTA — scoped to buttons and known elements only (NOT body) */
button.bg-primary,
a.bg-primary,
div.bg-primary:not(body):not(html),
span.bg-primary,
#authButton,
#mobilePostJobBtn,
#mobileGetLeadsBtn,
#closePrivacyBottomBtn {
  background: var(--gradient-brand) !important;
  color: white !important;
  border: none !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-sm), var(--shadow-glow-blue) !important;
  transition: all var(--transition-base) !important;
  letter-spacing: var(--tracking-normal) !important;
  font-weight: 600 !important;
}
button.bg-primary:hover,
a.bg-primary:hover,
#authButton:hover,
#mobilePostJobBtn:hover,
#mobileGetLeadsBtn:hover {
  box-shadow: var(--shadow-md), var(--shadow-glow-blue) !important;
  transform: translateY(-1px) !important;
  opacity: 0.95 !important;
}
button.bg-primary:active {
  transform: translateY(0) !important;
  box-shadow: var(--shadow-xs) !important;
}

/* Secondary / amber CTA */
.bg-secondary,
button.bg-secondary,
.hover\:bg-orange-700,
[class*="bg-secondary"]:not(.text-secondary):not(.border-secondary) {
  background: var(--gradient-accent) !important;
  color: white !important;
  border: none !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-sm), var(--shadow-glow-amber) !important;
  transition: all var(--transition-base) !important;
  font-weight: 600 !important;
}
.bg-secondary:hover,
button.bg-secondary:hover {
  box-shadow: var(--shadow-md), var(--shadow-glow-amber) !important;
  transform: translateY(-1px) !important;
}

/* Dark mode logout / dark buttons */
.bg-gray-900.dark\:bg-white,
button.bg-gray-900 {
  background: var(--text-primary) !important;
  color: var(--text-inverse) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-sm) !important;
  transition: all var(--transition-base) !important;
  font-weight: 600 !important;
}
html.dark .bg-gray-900.dark\:bg-white,
html.dark button.bg-gray-900 {
  background: var(--bg-elevated) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-primary) !important;
}

/* Ghost / outline buttons */
button:not(.bg-primary):not(.bg-secondary):not([class*="bg-gray-9"]):not(.bg-black):not(.ts-accept-btn):not(.survey-cta-btn):not(.ts-tab-btn):not([class*="nav-item"]):not(.toggle-track),
.border.border-gray-300,
[class*="border-gray-3"] {
  transition: all var(--transition-base) !important;
  border-radius: var(--radius-md) !important;
}

/* Nav dark mode toggle */
#navDarkModeBtn {
  border-radius: var(--radius-pill) !important;
  background: var(--bg-input) !important;
  border: 1px solid var(--border-primary) !important;
  color: var(--text-tertiary) !important;
  transition: all var(--transition-base) !important;
  box-shadow: var(--shadow-xs) !important;
}
#navDarkModeBtn:hover {
  background: var(--bg-elevated) !important;
  border-color: var(--border-focus) !important;
  color: var(--text-primary) !important;
  box-shadow: var(--shadow-sm), var(--shadow-glow-blue) !important;
  transform: scale(1.05) !important;
}

/* ══════════════════════════════════════════════════════════════
   SECTION 8: CARDS
══════════════════════════════════════════════════════════════ */

/* White cards */
.bg-white {
  background: var(--bg-elevated) !important;
  border-radius: var(--radius-xl) !important;
  transition: background var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base) !important;
}
html.dark .bg-white,
body.dark-mode .bg-white {
  background: var(--bg-elevated) !important;
}

/* Rounded cards with borders */
.rounded-2xl.border,
.rounded-2xl.shadow,
.rounded-2xl.shadow-sm,
.rounded-3xl {
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-sm) !important;
  border-color: var(--border-secondary) !important;
  transition: box-shadow var(--transition-base), transform var(--transition-base) !important;
}

.card-hover:hover,
.hover-lift:hover {
  transform: translateY(-3px) !important;
  box-shadow: var(--shadow-lg) !important;
}

/* Dashboard stat cards */
.border-l-4.border-primary {
  border-left-color: var(--brand-primary) !important;
  box-shadow: var(--shadow-sm), -2px 0 12px rgba(10,132,255,0.15) !important;
}
.border-l-4.border-green-500 {
  border-left-color: var(--brand-success) !important;
  box-shadow: var(--shadow-sm), -2px 0 12px rgba(48,209,88,0.15) !important;
}

/* KYC card */
.card {
  background: var(--bg-elevated) !important;
  border-radius: var(--radius-xl) !important;
  border: 1px solid var(--border-primary) !important;
  box-shadow: var(--shadow-lg) !important;
  transition: box-shadow var(--transition-base) !important;
}
html.dark .card {
  background: var(--bg-elevated) !important;
  border-color: var(--border-primary) !important;
  box-shadow: var(--shadow-xl) !important;
}

/* ══════════════════════════════════════════════════════════════
   SECTION 9: INPUTS & FORMS
══════════════════════════════════════════════════════════════ */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="tel"],
select,
textarea {
  background: var(--bg-input) !important;
  border: 1.5px solid var(--border-primary) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--text-primary) !important;
  font-family: var(--font-system) !important;
  transition: border-color var(--transition-base), box-shadow var(--transition-base), background var(--transition-base) !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="tel"]:focus,
select:focus,
textarea:focus {
  background: var(--bg-input-focus) !important;
  border-color: var(--border-focus) !important;
  box-shadow: 0 0 0 3px var(--brand-primary-subtle) !important;
  outline: none !important;
}

html.dark input[type="text"],
html.dark input[type="email"],
html.dark input[type="password"],
html.dark input[type="number"],
html.dark input[type="date"],
html.dark input[type="tel"],
html.dark select,
html.dark textarea,
body.dark-mode input,
body.dark-mode select,
body.dark-mode textarea {
  background: var(--bg-input) !important;
  border-color: var(--border-primary) !important;
  color: var(--text-primary) !important;
}

html.dark input:focus,
html.dark select:focus,
html.dark textarea:focus {
  background: var(--bg-input-focus) !important;
  border-color: var(--border-focus) !important;
  box-shadow: 0 0 0 3px var(--brand-primary-subtle) !important;
}

/* Placeholder text */
::placeholder {
  color: var(--text-quaternary) !important;
  opacity: 1 !important;
}

/* Disabled inputs */
input:disabled,
input[disabled] {
  background: var(--bg-tertiary) !important;
  color: var(--text-quaternary) !important;
  cursor: not-allowed !important;
  opacity: 0.7 !important;
}

/* ══════════════════════════════════════════════════════════════
   SECTION 10: MODALS & OVERLAYS
══════════════════════════════════════════════════════════════ */

/* Modal backdrops */
.bg-gray-900\/60,
.bg-black\/80,
[class*="backdrop"] {
  background: var(--bg-overlay) !important;
  backdrop-filter: var(--blur-md) !important;
  -webkit-backdrop-filter: var(--blur-md) !important;
}

/* Modal panels */
.rounded-2xl.shadow-2xl,
.rounded-2xl.shadow-xl {
  border-radius: var(--radius-2xl) !important;
  box-shadow: var(--shadow-modal) !important;
  border: 1px solid var(--border-primary) !important;
  background: var(--bg-elevated) !important;
  transition: background var(--transition-base) !important;
}

html.dark .rounded-2xl.shadow-2xl,
html.dark .rounded-2xl.shadow-xl {
  box-shadow: var(--shadow-modal) !important;
  border-color: var(--border-primary) !important;
}

/* Modal headers */
.bg-gray-50.dark\:bg-gray-800\/50,
.bg-gray-50.rounded-t-2xl {
  background: var(--bg-secondary) !important;
  border-bottom: 1px solid var(--border-secondary) !important;
}
html.dark .bg-gray-50.dark\:bg-gray-800\/50,
html.dark .bg-gray-50.rounded-t-2xl {
  background: var(--bg-tertiary) !important;
}

/* ══════════════════════════════════════════════════════════════
   SECTION 11: NAVIGATION SIDEBAR
══════════════════════════════════════════════════════════════ */

#sideNav {
  background: var(--bg-elevated) !important;
  border: 1px solid var(--border-secondary) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-sm) !important;
}
html.dark #sideNav {
  background: var(--bg-elevated) !important;
  border-color: var(--border-primary) !important;
  box-shadow: var(--shadow-md) !important;
}

/* Active nav item */
.nav-item.active-nav {
  background: var(--gradient-brand) !important;
  color: white !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-sm), var(--shadow-glow-blue) !important;
  font-weight: 600 !important;
  transition: all var(--transition-base) !important;
}

/* Inactive nav items */
.nav-item:not(.active-nav) {
  color: var(--text-secondary) !important;
  border-radius: var(--radius-md) !important;
  transition: all var(--transition-base) !important;
}
.nav-item:not(.active-nav):hover {
  background: var(--brand-primary-subtle) !important;
  color: var(--brand-primary) !important;
  transform: translateX(2px) !important;
}
html.dark .nav-item:not(.active-nav) {
  color: var(--text-tertiary) !important;
}
html.dark .nav-item:not(.active-nav):hover {
  color: var(--text-primary) !important;
}

/* ══════════════════════════════════════════════════════════════
   SECTION 12: LOADING & SPINNER
══════════════════════════════════════════════════════════════ */

#globalLoader {
  background: var(--bg-primary) !important;
  transition: opacity 0.5s var(--ease-apple) !important;
}
html.dark #globalLoader {
  background: var(--bg-primary) !important;
}

/* Spinner */
.border-t-primary,
[class*="border-t-primary"] {
  border-top-color: var(--brand-primary) !important;
}
[class*="animate-spin"] {
  border-color: var(--border-primary) !important;
  border-top-color: var(--brand-primary) !important;
  filter: drop-shadow(0 0 8px var(--brand-primary-glow)) !important;
}

/* Loading text */
#globalLoader p {
  color: var(--text-tertiary) !important;
  font-weight: 500 !important;
  letter-spacing: var(--tracking-wide) !important;
}

/* ══════════════════════════════════════════════════════════════
   SECTION 13: BADGES & PILLS
══════════════════════════════════════════════════════════════ */

/* Role badge */
#roleBadge {
  background: var(--gradient-accent) !important;
  color: white !important;
  border-radius: var(--radius-pill) !important;
  box-shadow: var(--shadow-glow-amber) !important;
  font-weight: 700 !important;
  letter-spacing: var(--tracking-wider) !important;
}

/* Green dot badges */
.bg-green-500.rounded-full.animate-pulse {
  background: var(--brand-success) !important;
  box-shadow: 0 0 8px var(--brand-success-glow) !important;
}
.bg-red-500.rounded-full {
  background: var(--brand-danger) !important;
}
.bg-amber-400,
.bg-amber-500 {
  background: var(--brand-accent) !important;
}

/* ── Hover card pill badges (blue) ── */
.bg-blue-50.dark\:bg-blue-900\/30 {
  background: var(--brand-primary-subtle) !important;
}
html.dark .bg-blue-50.dark\:bg-blue-900\/30 {
  background: var(--brand-primary-subtle) !important;
}

.text-primary {
  color: var(--brand-primary) !important;
}
.text-secondary {
  color: var(--brand-accent) !important;
}

/* ══════════════════════════════════════════════════════════════
   SECTION 14: HERO SECTION
══════════════════════════════════════════════════════════════ */

/* Landing hero gradient bg blobs */
main > .absolute.top-0.right-0,
main > .absolute.bottom-0.left-0 {
  opacity: 0.08 !important;
  filter: blur(60px) !important;
}

/* Hero headline gradient text */
.text-transparent.bg-clip-text {
  background: var(--gradient-accent) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* Search form */
#landingSearchForm {
  background: var(--bg-elevated) !important;
  border: 1px solid var(--border-secondary) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-xl) !important;
  transition: transform var(--transition-base), box-shadow var(--transition-base) !important;
}
#landingSearchForm:hover {
  box-shadow: var(--shadow-xl), var(--shadow-glow-blue) !important;
}
html.dark #landingSearchForm {
  background: var(--bg-elevated) !important;
  border-color: var(--border-primary) !important;
  box-shadow: var(--shadow-xl) !important;
}

/* ══════════════════════════════════════════════════════════════
   SECTION 15: HERO CTA CARDS (Index page)
══════════════════════════════════════════════════════════════ */

#ctaCustomer,
#ctaProvider {
  border-radius: var(--radius-xl) !important;
  border: 1px solid var(--border-secondary) !important;
  background: var(--bg-elevated) !important;
  box-shadow: var(--shadow-md) !important;
  transition: all var(--transition-slow) !important;
  overflow: hidden !important;
}
#ctaCustomer:hover,
#ctaProvider:hover {
  box-shadow: var(--shadow-xl) !important;
  border-color: var(--border-focus) !important;
  transform: translateY(-4px) !important;
}
html.dark #ctaCustomer,
html.dark #ctaProvider {
  background: var(--bg-elevated) !important;
  border-color: var(--border-primary) !important;
}

/* CTA card icon boxes */
#ctaCustomer .flex-shrink-0,
#ctaProvider .flex-shrink-0 {
  border-radius: var(--radius-md) !important;
  transition: all var(--transition-base) !important;
}

/* ══════════════════════════════════════════════════════════════
   SECTION 16: FOOTER
══════════════════════════════════════════════════════════════ */

footer,
.footer,
#footer {
  background: var(--bg-secondary) !important;
  border-top: 1px solid var(--border-secondary) !important;
  color: var(--text-tertiary) !important;
  font-size: 0.875rem !important;
}

footer a, .footer a {
  color: var(--text-quaternary) !important;
  transition: color var(--transition-fast) !important;
}
footer a:hover, .footer a:hover {
  color: var(--text-link) !important;
  opacity: 1 !important;
}

html.dark footer,
html.dark .footer,
body.dark-mode footer {
  background: rgba(0, 0, 0, 0.60) !important;
  border-top: 1px solid rgba(255,255,255,0.05) !important;
}

/* ══════════════════════════════════════════════════════════════
   SECTION 17: MOBILE FOOTER
══════════════════════════════════════════════════════════════ */

#mobileFooter {
  background: var(--bg-glass-heavy) !important;
  backdrop-filter: var(--blur-md) !important;
  -webkit-backdrop-filter: var(--blur-md) !important;
  border-top: 1px solid var(--border-secondary) !important;
  box-shadow: 0 -4px 16px rgba(0,0,0,0.08) !important;
}
html.dark #mobileFooter {
  background: var(--bg-glass-heavy) !important;
  border-top-color: var(--border-primary) !important;
  box-shadow: 0 -4px 24px rgba(0,0,0,0.40) !important;
}

/* ══════════════════════════════════════════════════════════════
   SECTION 18: EMAIL VERIFICATION BUBBLE
══════════════════════════════════════════════════════════════ */

/* "Read me" pill */
#verif-pill {
  background: var(--gradient-brand) !important;
  border-radius: var(--radius-pill) !important;
  box-shadow: var(--shadow-glow-blue), 0 0 0 1px rgba(255,255,255,0.1) inset !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  transition: transform var(--transition-base), box-shadow var(--transition-base) !important;
}
#verif-pill:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-lg), var(--shadow-glow-blue) !important;
}

/* Verif card */
#verif-card {
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-lg) !important;
  border: 1px solid var(--border-secondary) !important;
  backdrop-filter: var(--blur-md) !important;
  -webkit-backdrop-filter: var(--blur-md) !important;
}
html.dark #verif-card {
  background: rgba(28, 28, 30, 0.96) !important;
  border-color: rgba(64, 156, 255, 0.30) !important;
  box-shadow: var(--shadow-xl) !important;
}

/* Pulse dot */
.verif-pulse-dot {
  background: var(--brand-warning) !important;
  box-shadow: 0 0 0 0 rgba(255,214,10,0.6) !important;
}

/* ══════════════════════════════════════════════════════════════
   SECTION 19: DISCLAIMER / INFO BANNERS
══════════════════════════════════════════════════════════════ */

.data-disclaimer {
  backdrop-filter: var(--blur-sm) !important;
  -webkit-backdrop-filter: var(--blur-sm) !important;
}

/* Vision disclaimer banner */
#visionDisclaimerBanner {
  background: rgba(10, 132, 255, 0.05) !important;
  border-bottom: 1px solid rgba(10, 132, 255, 0.12) !important;
}
html.dark #visionDisclaimerBanner {
  background: rgba(10, 132, 255, 0.08) !important;
  border-bottom-color: rgba(10, 132, 255, 0.20) !important;
}

/* ══════════════════════════════════════════════════════════════
   SECTION 20: TAILWIND UTILITY OVERRIDES (Dark mode body)
══════════════════════════════════════════════════════════════ */

/* Dark mode surface resets */
html.dark .bg-gray-50,
html.dark .dark\:bg-gray-950 {
  background-color: var(--bg-secondary) !important;
}
html.dark .bg-gray-800,
html.dark .dark\:bg-gray-800 {
  background-color: var(--bg-elevated) !important;
}
html.dark .bg-gray-900,
html.dark .dark\:bg-gray-900 {
  background-color: var(--bg-primary) !important;
}
html.dark .bg-gray-700 {
  background-color: var(--bg-tertiary) !important;
}

/* Dark mode text */
html.dark .text-gray-900,
html.dark .dark\:text-white,
html.dark .dark\:text-gray-50 {
  color: var(--text-primary) !important;
}
html.dark .text-gray-700,
html.dark .text-gray-600,
html.dark .dark\:text-gray-300 {
  color: var(--text-secondary) !important;
}
html.dark .text-gray-500,
html.dark .dark\:text-gray-400 {
  color: var(--text-tertiary) !important;
}
html.dark .text-gray-400 {
  color: var(--text-quaternary) !important;
}

/* Dark mode borders */
html.dark .border-gray-200,
html.dark .border-gray-100,
html.dark .dark\:border-gray-700,
html.dark .dark\:border-gray-600 {
  border-color: var(--border-primary) !important;
}
html.dark .border-gray-800,
html.dark .dark\:border-gray-800 {
  border-color: var(--border-secondary) !important;
}

/* text-gray-* light mode: handled by Tailwind */

/* ══════════════════════════════════════════════════════════════
   SECTION 21: TRUST & STANDARDS SECTION (inline component)
══════════════════════════════════════════════════════════════ */

/* Hero dark card — keep its dramatic dark bg */
.ts-hero {
  background: linear-gradient(135deg, #050508, #0A0A12) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-xl) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
}
.ts-hero::before {
  background:
    radial-gradient(ellipse 60% 80% at 80% 20%, rgba(10,132,255,0.20) 0%, transparent 60%),
    radial-gradient(ellipse 50% 60% at 10% 90%, rgba(255,159,10,0.12) 0%, transparent 50%) !important;
}

/* Tab nav */
.ts-tab-nav {
  background: var(--bg-tertiary) !important;
  border: 1px solid var(--border-secondary) !important;
  border-radius: var(--radius-lg) !important;
}
html.dark .ts-tab-nav {
  background: var(--bg-tertiary) !important;
  border-color: var(--border-primary) !important;
}

.ts-tab-btn { border-radius: var(--radius-md) !important; transition: all var(--transition-base) !important; }
.ts-tab-btn.active {
  background: var(--bg-primary) !important;
  color: var(--text-primary) !important;
  box-shadow: var(--shadow-sm) !important;
}
html.dark .ts-tab-btn.active {
  background: var(--bg-elevated) !important;
  color: var(--text-primary) !important;
  box-shadow: var(--shadow-md) !important;
}

/* TS Cards */
.ts-card {
  background: var(--bg-elevated) !important;
  border: 1px solid var(--border-secondary) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-xs) !important;
}
html.dark .ts-card {
  background: var(--bg-elevated) !important;
  border-color: var(--border-primary) !important;
}

/* ══════════════════════════════════════════════════════════════
   SECTION 22: SURVEY SECTION
══════════════════════════════════════════════════════════════ */

.survey-hero {
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-lg) !important;
}

.survey-why-card {
  background: var(--bg-elevated) !important;
  border: 1px solid var(--border-secondary) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-xs) !important;
  transition: box-shadow var(--transition-base), transform var(--transition-base) !important;
}
.survey-why-card:hover {
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-2px) !important;
}
html.dark .survey-why-card {
  background: var(--bg-elevated) !important;
  border-color: var(--border-primary) !important;
}

.survey-embed-wrap {
  background: var(--bg-elevated) !important;
  border: 1px solid var(--border-secondary) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-md) !important;
}
html.dark .survey-embed-wrap {
  background: var(--bg-elevated) !important;
  border-color: var(--border-primary) !important;
}

/* ══════════════════════════════════════════════════════════════
   SECTION 23: ESCROW & SPECIAL VIEWS
══════════════════════════════════════════════════════════════ */

/* Funding result dark panel */
#fundingResults {
  background: linear-gradient(135deg, var(--bg-elevated), #0D0D12) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-xl) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
}
#monthlyRepayment {
  color: var(--brand-success) !important;
  text-shadow: 0 0 24px var(--brand-success-glow) !important;
}

/* Verification status badges */
#verificationStatus {
  border-radius: var(--radius-md) !important;
  border-width: 1px !important;
}

/* ══════════════════════════════════════════════════════════════
   SECTION 24: KYC PAGE SPECIFIC OVERRIDES
══════════════════════════════════════════════════════════════ */

/* KYC upload zone */
.upload-zone {
  background: var(--bg-secondary) !important;
  border: 2px dashed var(--border-primary) !important;
  border-radius: var(--radius-md) !important;
  transition: all var(--transition-base) !important;
}
.upload-zone:hover {
  border-color: var(--brand-primary) !important;
  background: var(--brand-primary-subtle) !important;
}
.upload-zone.has-file {
  border-color: var(--brand-success) !important;
  background: var(--brand-success-subtle) !important;
}

/* KYC ID type cards */
.id-type-card {
  border: 2px solid var(--border-primary) !important;
  border-radius: var(--radius-md) !important;
  transition: all var(--transition-base) !important;
}
.id-type-card:hover {
  border-color: rgba(10,132,255,0.50) !important;
  background: var(--brand-primary-subtle) !important;
}
.id-type-card.selected {
  border-color: var(--brand-primary) !important;
  background: var(--brand-primary-subtle) !important;
  box-shadow: var(--shadow-glow-blue) !important;
}

/* Progress bar */
.progress-bar-bg {
  background: var(--border-primary) !important;
  border-radius: var(--radius-pill) !important;
}
.progress-bar-fill {
  background: var(--gradient-brand) !important;
  border-radius: var(--radius-pill) !important;
  box-shadow: var(--shadow-glow-blue) !important;
}

/* KYC step tag */
.step-tag {
  background: var(--brand-primary-subtle) !important;
  color: var(--brand-primary) !important;
  border-radius: var(--radius-pill) !important;
}

/* ══════════════════════════════════════════════════════════════
   SECTION 25: SAFETY PAGE OVERRIDES
══════════════════════════════════════════════════════════════ */

/* Safety page header - kept white/clean */
#safetyLogoutBtn {
  border-radius: var(--radius-pill) !important;
  transition: all var(--transition-base) !important;
}

/* Section number circles */
.w-8.h-8.rounded-full.bg-blue-600 {
  background: var(--gradient-brand) !important;
  box-shadow: var(--shadow-glow-blue) !important;
}
.w-8.h-8.rounded-full.bg-black {
  background: var(--text-primary) !important;
}

/* Proceed button when enabled */
#proceedBtn:not(:disabled) {
  background: var(--gradient-brand) !important;
  border-radius: var(--radius-pill) !important;
  box-shadow: var(--shadow-sm), var(--shadow-glow-blue) !important;
  color: white !important;
  transition: all var(--transition-base) !important;
}
#proceedBtn:not(:disabled):hover {
  box-shadow: var(--shadow-md), var(--shadow-glow-blue) !important;
  transform: translateY(-2px) !important;
}
#proceedBtn:disabled {
  background: var(--bg-tertiary) !important;
  color: var(--text-quaternary) !important;
  border-radius: var(--radius-pill) !important;
}

/* ══════════════════════════════════════════════════════════════
   SECTION 26: UPDATE PASSWORD PAGE
══════════════════════════════════════════════════════════════ */

body[class=""] .card,
.max-w-\[420px\] {
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-xl) !important;
  border: 1px solid var(--border-secondary) !important;
}

/* ══════════════════════════════════════════════════════════════
   SECTION 27: CUSTOM TOGGLE SWITCH
══════════════════════════════════════════════════════════════ */

.toggle-track {
  background-color: var(--bg-tertiary) !important;
  border-radius: var(--radius-pill) !important;
  transition: background-color var(--transition-base) !important;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.15) !important;
}
.toggle-input:checked + .toggle-track {
  background-color: var(--brand-success) !important;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.10), var(--shadow-glow-green) !important;
}
.toggle-track::after {
  box-shadow: var(--shadow-sm) !important;
}

/* ══════════════════════════════════════════════════════════════
   SECTION 28: BANNER & ALERT COMPONENTS
══════════════════════════════════════════════════════════════ */

/* Blue info banners */
.bg-blue-50.dark\:bg-blue-900\/20,
.banner.info {
  background: var(--brand-primary-subtle) !important;
  border-color: rgba(10, 132, 255, 0.25) !important;
  color: var(--brand-primary) !important;
  border-radius: var(--radius-md) !important;
}
html.dark .bg-blue-50.dark\:bg-blue-900\/20 {
  background: rgba(10, 132, 255, 0.08) !important;
  border-color: rgba(10, 132, 255, 0.20) !important;
}

/* Amber warning banners */
.banner.warning,
.ts-read-banner {
  background: var(--brand-accent-subtle) !important;
  border-color: rgba(255, 159, 10, 0.30) !important;
  border-radius: var(--radius-md) !important;
}

/* Yellow demo banners */
.banner.demo {
  background: rgba(255, 214, 10, 0.08) !important;
  border-color: rgba(255, 214, 10, 0.30) !important;
  border-radius: var(--radius-md) !important;
}

/* Green success banners */
.banner.preview,
.bg-green-50.dark\:bg-green-900\/20 {
  background: var(--brand-success-subtle) !important;
  border-color: rgba(48, 209, 88, 0.25) !important;
  border-radius: var(--radius-md) !important;
}

/* Yellow verification status */
.bg-yellow-50.dark\:bg-yellow-900\/20 {
  background: rgba(255, 214, 10, 0.08) !important;
  border-radius: var(--radius-md) !important;
}

/* ══════════════════════════════════════════════════════════════
   SECTION 29: HOVER LIFT TRANSITIONS
══════════════════════════════════════════════════════════════ */

.hover-lift {
  transition: transform var(--transition-base), box-shadow var(--transition-base) !important;
}
.hover-lift:hover {
  transform: translateY(-3px) !important;
  box-shadow: var(--shadow-lg) !important;
}

/* ══════════════════════════════════════════════════════════════
   SECTION 30: SELECTION COLOUR
══════════════════════════════════════════════════════════════ */

::selection {
  background: var(--brand-primary-subtle) !important;
  color: var(--brand-primary) !important;
}

/* ══════════════════════════════════════════════════════════════
   SECTION 31: DIVIDERS & HR
══════════════════════════════════════════════════════════════ */

hr,
.divider,
.separator,
.border-b.border-gray-100,
.border-b.border-gray-200,
.border-t.border-gray-100,
.border-t.border-gray-200 {
  border-color: var(--border-secondary) !important;
  transition: border-color var(--transition-base) !important;
}
html.dark hr,
html.dark .border-b.border-gray-100,
html.dark .border-b.border-gray-200,
html.dark .border-t.border-gray-100,
html.dark .border-t.border-gray-200 {
  border-color: var(--border-primary) !important;
}

/* ══════════════════════════════════════════════════════════════
   SECTION 32: FOCUS RING
══════════════════════════════════════════════════════════════ */

.focus\:ring-2:focus,
.focus\:ring-primary:focus {
  --tw-ring-color: var(--brand-primary-subtle) !important;
  --tw-ring-opacity: 1 !important;
  box-shadow: 0 0 0 3px var(--brand-primary-subtle) !important;
}
.focus\:ring-secondary:focus {
  box-shadow: 0 0 0 3px var(--brand-accent-subtle) !important;
}

/* ══════════════════════════════════════════════════════════════
   SECTION 33: QUICK ACTIONS (Dashboard)
══════════════════════════════════════════════════════════════ */

/* Quick action buttons */
#view-overview .bg-gray-50.dark\:bg-gray-700\/50 {
  background: var(--bg-secondary) !important;
  border-color: var(--border-secondary) !important;
  border-radius: var(--radius-md) !important;
  transition: all var(--transition-base) !important;
}
#view-overview .bg-gray-50.dark\:bg-gray-700\/50:hover {
  background: var(--bg-elevated) !important;
  box-shadow: var(--shadow-sm) !important;
}
html.dark #view-overview .bg-gray-50.dark\:bg-gray-700\/50 {
  background: var(--bg-tertiary) !important;
}

/* Activity feed area */
.bg-gray-50.dark\:bg-gray-900\/50 {
  background: var(--bg-secondary) !important;
  border-radius: var(--radius-md) !important;
}
html.dark .bg-gray-50.dark\:bg-gray-900\/50 {
  background: var(--bg-tertiary) !important;
}

/* ══════════════════════════════════════════════════════════════
   SECTION 34: REGISTRATION FORM ROLE TOGGLE
══════════════════════════════════════════════════════════════ */

.role-button-group {
  background: var(--bg-secondary) !important;
  border-radius: var(--radius-md) !important;
  padding: 4px !important;
}
html.dark .role-button-group {
  background: var(--bg-tertiary) !important;
}

/* Active role button */
#roleCustomer.bg-primary,
#roleProvider.bg-primary {
  background: var(--gradient-brand) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: var(--shadow-sm) !important;
}

/* ══════════════════════════════════════════════════════════════
   SECTION 35: CUSTOM ANIMATION — FADE IN UP
══════════════════════════════════════════════════════════════ */

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-enter {
  animation: fadeIn 0.5s var(--ease-out) forwards !important;
}
.animate-delay-1 { animation-delay: 0.1s !important; }
.animate-delay-2 { animation-delay: 0.2s !important; }

/* ══════════════════════════════════════════════════════════════
   SECTION 36: SUPPORT CHAT BTN
══════════════════════════════════════════════════════════════ */

#supportChatBtn {
  border-radius: var(--radius-md) !important;
  border-color: var(--border-primary) !important;
  transition: all var(--transition-base) !important;
}
#supportChatBtn:hover {
  border-color: var(--border-focus) !important;
  background: var(--brand-primary-subtle) !important;
  box-shadow: var(--shadow-glow-blue) !important;
}

/* ══════════════════════════════════════════════════════════════
   SECTION 37: BACK BUTTON
══════════════════════════════════════════════════════════════ */

#backToSearchBtn,
#proPageBackBtn {
  border-radius: var(--radius-md) !important;
  background: var(--bg-secondary) !important;
  color: var(--text-secondary) !important;
  border: 1px solid var(--border-secondary) !important;
  transition: all var(--transition-base) !important;
}
#backToSearchBtn:hover,
#proPageBackBtn:hover {
  background: var(--bg-elevated) !important;
  color: var(--text-primary) !important;
  box-shadow: var(--shadow-sm) !important;
}
html.dark #backToSearchBtn,
html.dark #proPageBackBtn {
  background: var(--bg-tertiary) !important;
  border-color: var(--border-primary) !important;
}

/* ══════════════════════════════════════════════════════════════
   SECTION 38: PORTFOLIO / EMPTY STATES
══════════════════════════════════════════════════════════════ */

/* Dashed border empty state */
.border-2.border-dashed {
  border-color: var(--border-primary) !important;
  border-radius: var(--radius-xl) !important;
  transition: border-color var(--transition-base) !important;
}
.border-2.border-dashed.border-primary\/30 {
  border-color: rgba(10, 132, 255, 0.25) !important;
}
.border-2.border-dashed.border-secondary\/30 {
  border-color: rgba(255, 159, 10, 0.25) !important;
}

/* ══════════════════════════════════════════════════════════════
   SECTION 39: STATUS BADGES IN SYSTEM STATUS
══════════════════════════════════════════════════════════════ */

/* Red "data policy" alert box */
.bg-red-50.dark\:bg-red-900\/20 {
  background: rgba(255, 69, 58, 0.08) !important;
  border-color: rgba(255, 69, 58, 0.20) !important;
  border-radius: var(--radius-md) !important;
}
html.dark .bg-red-50.dark\:bg-red-900\/20 {
  background: rgba(255, 69, 58, 0.10) !important;
}

/* ══════════════════════════════════════════════════════════════
   SECTION 40: MOBILE RESPONSIVE REFINEMENTS
══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .card { border-radius: var(--radius-lg) !important; }
  .rounded-2xl { border-radius: var(--radius-lg) !important; }
  .rounded-3xl { border-radius: var(--radius-xl) !important; }

  button.bg-primary,
  button.bg-secondary {
    border-radius: var(--radius-md) !important;
  }

  /* Prevent zoom on iOS */
  input, select, textarea { font-size: 16px !important; }
}

/* ══════════════════════════════════════════════════════════════
   SECTION 41: LEGACY KYC BANNER COLOURS
   (kyc.html uses its own --blue, --green vars — we overrode those
   in :root, so those inherit automatically now)
══════════════════════════════════════════════════════════════ */

/* KYC mini upload zone */
.mini-upload {
  border: 1.5px dashed var(--border-primary) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--text-tertiary) !important;
  transition: all var(--transition-base) !important;
}
.mini-upload:hover {
  border-color: var(--brand-primary) !important;
  color: var(--brand-primary) !important;
  background: var(--brand-primary-subtle) !important;
}
.mini-upload.has-file {
  border-color: var(--brand-success) !important;
  color: var(--brand-success) !important;
  background: var(--brand-success-subtle) !important;
}

/* KYC doc items */
.doc-item {
  border: 1.5px solid var(--border-secondary) !important;
  border-radius: var(--radius-md) !important;
  transition: box-shadow var(--transition-base) !important;
}
.doc-item.required-doc {
  border-left: 3px solid var(--brand-danger) !important;
}
.doc-item.optional-doc {
  border-left: 3px solid var(--text-quaternary) !important;
}

/* ══════════════════════════════════════════════════════════════
   SECTION 42: CHECKBOX CUSTOM STYLING
══════════════════════════════════════════════════════════════ */

input[type="checkbox"] {
  accent-color: var(--brand-primary) !important;
  border-radius: var(--radius-xs) !important;
}

/* Safety page checkbox wrapper */
.checkbox-wrapper input:checked + div {
  background-color: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
  box-shadow: var(--shadow-glow-blue) !important;
}

/* ══════════════════════════════════════════════════════════════
   SECTION 43: LEGAL PAGE PROSE
══════════════════════════════════════════════════════════════ */

.prose h4 {
  font-weight: 700 !important;
  color: var(--text-primary) !important;
}
.prose p {
  color: var(--text-secondary) !important;
}

/* ══════════════════════════════════════════════════════════════
   SECTION 44: GLASSMORPHIC PANEL (legacy class)
══════════════════════════════════════════════════════════════ */

.glass-panel {
  background: var(--bg-glass-heavy) !important;
  backdrop-filter: var(--blur-md) saturate(180%) !important;
  -webkit-backdrop-filter: var(--blur-md) saturate(180%) !important;
  border: 1px solid var(--border-glass) !important;
  box-shadow: var(--shadow-sm) !important;
}
html.dark .glass-panel {
  background: var(--bg-glass-heavy) !important;
  border-color: var(--border-primary) !important;
}

/* ══════════════════════════════════════════════════════════════
   SECTION 45 — TEXT CONTRAST SYSTEM (CLEAN REWRITE)

   RULES:
   1. We NEVER set body { color } — Tailwind's text-gray-900 handles light mode.
   2. We ONLY target specific surfaces that need explicit override.
   3. Light mode bg-mesh-light is a LIGHT background — hero text must be DARK.
   4. Dark mode bg-mesh-light is a DARK background — hero text needs LIGHT color.
   5. Dark mode surfaces get light text.
══════════════════════════════════════════════════════════════ */

/* ── HERO CONTENT — LIGHT MODE: dark text on light #f3f4f6 background ── */
body.bg-mesh-light > #mainContent > main section.lg\:col-span-7 h1,
body.bg-mesh-light > #mainContent > main section.lg\:col-span-7 p,
body.bg-mesh-light > #mainContent > main section.lg\:col-span-7 div,
body.bg-mesh-light > #mainContent > main section.lg\:col-span-7 span:not(.text-transparent),
/* The badge pill at top of hero */
body.bg-mesh-light > #mainContent > main .inline-flex.items-center.px-3 {
  color: #1D1D1F !important;
}
/* Trust indicators row below search */
body.bg-mesh-light > #mainContent > main .mt-6.flex span {
  color: #48484A !important;
}
/* "For Your Project." subtitle line */
body.bg-mesh-light > #mainContent > main .text-gray-400 {
  color: #6E6E73 !important;
}

/* ── HERO CONTENT — DARK MODE: light text on dark #0D1117 background ── */
html.dark body.bg-mesh-light > #mainContent > main section.lg\:col-span-7 h1,
html.dark body.bg-mesh-light > #mainContent > main section.lg\:col-span-7 p,
html.dark body.bg-mesh-light > #mainContent > main section.lg\:col-span-7 div,
html.dark body.bg-mesh-light > #mainContent > main section.lg\:col-span-7 span:not(.text-transparent),
/* The badge pill at top of hero */
html.dark body.bg-mesh-light > #mainContent > main .inline-flex.items-center.px-3 {
  color: #F5F5F7 !important;
}
/* Trust indicators row below search */
html.dark body.bg-mesh-light > #mainContent > main .mt-6.flex span {
  color: #AEAEB2 !important;
}
/* "For Your Project." subtitle line */
html.dark body.bg-mesh-light > #mainContent > main .text-gray-400 {
  color: #8E8E93 !important;
}

/* ── HEADER NAV TEXT — sits on glass panel, needs dark text ── */
#landingHeader .text-gray-600,
#landingHeader .text-gray-500,
#landingHeader button:not(#authButton):not(#navDarkModeBtn) {
  color: #48484A !important;
}
#landingHeader .text-gray-900,
#landingHeader .font-black {
  color: #1D1D1F !important;
}
html.dark #landingHeader .text-gray-600,
html.dark #landingHeader button:not(#authButton):not(#navDarkModeBtn) {
  color: #AEAEB2 !important;
}
html.dark #landingHeader .font-black,
html.dark #landingHeader .text-gray-900 {
  color: #F5F5F7 !important;
}

/* ── CTA CARDS (#ctaCustomer / #ctaProvider) — white bg, DARK text ── */
#ctaCustomer,
#ctaProvider {
  color: #1D1D1F !important;
}
#ctaCustomer h3,
#ctaProvider h3 {
  color: #1D1D1F !important;
}
#ctaCustomer p,
#ctaProvider p {
  color: #48484A !important;
}
#ctaCustomer .text-gray-500,
#ctaProvider .text-gray-500 {
  color: #6E6E73 !important;
}
html.dark #ctaCustomer,
html.dark #ctaProvider {
  color: #F5F5F7 !important;
}
html.dark #ctaCustomer h3,
html.dark #ctaProvider h3 {
  color: #F5F5F7 !important;
}
html.dark #ctaCustomer p,
html.dark #ctaProvider p {
  color: #AEAEB2 !important;
}
html.dark #ctaCustomer .text-gray-500,
html.dark #ctaProvider .text-gray-500 {
  color: #8E8E93 !important;
}

/* ── SEARCH FORM — white bg, dark text ── */
#landingSearchForm {
  color: #1D1D1F !important;
}
#landingSearchForm input,
#landingSearchForm select {
  color: #1D1D1F !important;
}
html.dark #landingSearchForm {
  color: #F5F5F7 !important;
}
html.dark #landingSearchForm input,
html.dark #landingSearchForm select {
  color: #F5F5F7 !important;
}

/* ── DASHBOARD HEADER ── */
header#landingHeader ~ * #welcomeName,
#welcomeName {
  color: #48484A !important;
}
html.dark #welcomeName {
  color: #AEAEB2 !important;
}

/* ── DASHBOARD SIDEBAR ── */
#sideNav .nav-item:not(.active-nav) {
  color: #48484A !important;
}
#sideNav .nav-item:not(.active-nav):hover {
  color: #0A84FF !important;
}
#sideNav .text-gray-400,
#sideNav [class*="uppercase"][class*="font-bold"] {
  color: #8E8E93 !important;
}
html.dark #sideNav .nav-item:not(.active-nav) {
  color: #AEAEB2 !important;
}
html.dark #sideNav .text-gray-400,
html.dark #sideNav [class*="uppercase"][class*="font-bold"] {
  color: #6E6E73 !important;
}
/* Active nav — always white */
.nav-item.active-nav,
.nav-item.active-nav span,
.nav-item.active-nav i {
  color: #FFFFFF !important;
}

/* ── DASHBOARD VIEW HEADINGS — dark bg, light text ── */
.dashboard-view > h1,
.dashboard-view > div > h1,
#view-overview h1,
#view-job-posting h1,
#view-find-pros h1,
#view-profile h1,
#view-escrow h1,
#view-wallet h1,
#view-metrics h1,
#view-leads-marketplace h1,
#view-business-setup h1,
#view-system-status h1,
#view-my-reviews h1,
#view-portfolio h1,
#view-pro-reviews h1,
#view-community h1,
#view-funding-calculator h1 {
  color: #F5F5F7 !important;
}
.dashboard-view > p,
.dashboard-view > div > p.text-gray-500,
.dashboard-view > div > p.text-gray-400 {
  color: #AEAEB2 !important;
}

/* ── WHITE CARDS INSIDE DASHBOARD ── */
.dashboard-view .bg-white {
  color: #1D1D1F !important;
}
.dashboard-view .bg-white h1,
.dashboard-view .bg-white h2,
.dashboard-view .bg-white h3,
.dashboard-view .bg-white h4 {
  color: #1D1D1F !important;
}
.dashboard-view .bg-white p {
  color: #48484A !important;
}
.dashboard-view .bg-white label {
  color: #6E6E73 !important;
}
.dashboard-view .bg-white .text-gray-400,
.dashboard-view .bg-white .text-gray-500 {
  color: #8E8E93 !important;
}
.dashboard-view .bg-white .text-gray-900 {
  color: #1D1D1F !important;
}
/* Dark mode dashboard white cards */
html.dark .dashboard-view .bg-white {
  color: #F5F5F7 !important;
}
html.dark .dashboard-view .bg-white h1,
html.dark .dashboard-view .bg-white h2,
html.dark .dashboard-view .bg-white h3,
html.dark .dashboard-view .bg-white h4 {
  color: #F5F5F7 !important;
}
html.dark .dashboard-view .bg-white p {
  color: #AEAEB2 !important;
}
html.dark .dashboard-view .bg-white label {
  color: #8E8E93 !important;
}

/* ── MODALS — white panel, ALWAYS dark text ── */
#registrationModal h2,
#registrationModal h3,
#registrationModal label,
#registrationModal p,
#forgotPasswordModal h2,
#forgotPasswordModal label,
#forgotPasswordModal p {
  color: #1D1D1F !important;
}
#registrationModal .text-gray-500,
#registrationModal .text-gray-400,
#forgotPasswordModal .text-gray-600 {
  color: #6E6E73 !important;
}
html.dark #registrationModal h2,
html.dark #forgotPasswordModal h2 {
  color: #F5F5F7 !important;
}
html.dark #registrationModal label,
html.dark #registrationModal p,
html.dark #forgotPasswordModal label,
html.dark #forgotPasswordModal p {
  color: #AEAEB2 !important;
}

/* ── PRIVACY MODAL ── */
#privacyFullModal h3 { color: #1D1D1F !important; }
#privacyFullModal h4 { color: #1D1D1F !important; }
#privacyFullModal p  { color: #48484A !important; }
html.dark #privacyFullModal h3 { color: #F5F5F7 !important; }
html.dark #privacyFullModal h4 { color: #F5F5F7 !important; }
html.dark #privacyFullModal p  { color: #AEAEB2 !important; }

/* ── GUEST MODE SOFT GATE MODAL ── */
/* guest-mode.js injects a modal — target by likely IDs/structure */
#guestSoftGate h1,  #guestSoftGate h2,  #guestSoftGate h3,
#softGateModal h1,  #softGateModal h2,  #softGateModal h3,
[id*="guest"] h1,   [id*="guest"] h2,   [id*="guest"] h3 {
  color: #1D1D1F !important;
}
#guestSoftGate p,  #softGateModal p,  [id*="guest"] p,
#guestSoftGate span, [id*="guest"] span {
  color: #48484A !important;
}
html.dark #guestSoftGate h1, html.dark [id*="guest"] h1,
html.dark #guestSoftGate h2, html.dark [id*="guest"] h2 {
  color: #F5F5F7 !important;
}
html.dark #guestSoftGate p, html.dark [id*="guest"] p {
  color: #AEAEB2 !important;
}

/* ── FORM INPUTS (all pages) ── */
input::placeholder,
select::placeholder,
textarea::placeholder {
  color: #8E8E93 !important;
  opacity: 1 !important;
}

/* ── FOOTER ── */
footer, footer span, footer p { color: #8E8E93 !important; }
footer a { color: #6E6E73 !important; }
footer a:hover { color: #0A84FF !important; }
html.dark footer, html.dark footer span { color: #6E6E73 !important; }

/* ── FIND PROS RESULT CARDS ── */
#prosResults .bg-white h3,
#prosResults .bg-white [class*="font-bold"] {
  color: #1D1D1F !important;
}
#prosResults .bg-white p,
#prosResults .bg-white .text-gray-600,
#prosResults .bg-white .text-gray-500 {
  color: #48484A !important;
}
html.dark #prosResults .bg-white h3,
html.dark #prosResults .bg-white [class*="font-bold"] {
  color: #F5F5F7 !important;
}
html.dark #prosResults .bg-white p,
html.dark #prosResults .bg-white .text-gray-500 {
  color: #AEAEB2 !important;
}

/* ── KYC PAGE (light bg, no dark mesh) ── */
.card h2, .card h3 { color: #1D1D1F !important; }
.card p, .card label { color: #48484A !important; }
.card .text-gray-500 { color: #6E6E73 !important; }

/* ── SAFETY PAGE (white bg) ── */
body:not(.bg-mesh-light) h1,
body:not(.bg-mesh-light) h2,
body:not(.bg-mesh-light) h3 {
  color: #1D1D1F !important;
}
body:not(.bg-mesh-light) p {
  color: #48484A !important;
}

/* ── DARK MODE: DASHBOARD BG SURFACE TEXT ── */
html.dark .bg-gray-800 h1,
html.dark .bg-gray-800 h2,
html.dark .bg-gray-800 h3,
html.dark .dark\:bg-gray-800 h1,
html.dark .dark\:bg-gray-800 h2 {
  color: #F5F5F7 !important;
}
html.dark .bg-gray-800 p,
html.dark .dark\:bg-gray-800 p {
  color: #AEAEB2 !important;
}
html.dark .bg-gray-800 label,
html.dark .dark\:bg-gray-800 label {
  color: #8E8E93 !important;
}
html.dark .text-gray-900,
html.dark .dark\:text-white { color: #F5F5F7 !important; }
html.dark .dark\:text-gray-300 { color: #EBEBF0 !important; }
html.dark .dark\:text-gray-400 { color: #AEAEB2 !important; }
html.dark .text-gray-600 { color: #AEAEB2 !important; }
html.dark .text-gray-500 { color: #8E8E93 !important; }
html.dark .text-gray-400 { color: #6E6E73 !important; }

/* ══════════════════════════════════════════════════════════════
   LIGHT MODE — CTA CARD TEXT VISIBILITY FIX
   Force all text elements inside the two CTA cards to be
   clearly readable on their white card background.
══════════════════════════════════════════════════════════════ */
:root #ctaCustomer,
:root #ctaProvider {
  color: #1D1D1F !important;
}
:root #ctaCustomer h3,
:root #ctaProvider h3 {
  color: #111827 !important;
}
:root #ctaCustomer p,
:root #ctaProvider p {
  color: #374151 !important;
}
:root #ctaCustomer .text-gray-500,
:root #ctaProvider .text-gray-500,
:root #ctaCustomer .text-gray-400,
:root #ctaProvider .text-gray-400 {
  color: #4B5563 !important;
}
:root #ctaCustomer .text-gray-600,
:root #ctaProvider .text-gray-600 {
  color: #374151 !important;
}
/* Dark mode overrides — restore light text on dark card bg */
html.dark #ctaCustomer,
html.dark #ctaProvider {
  color: #F5F5F7 !important;
}
html.dark #ctaCustomer h3,
html.dark #ctaProvider h3 {
  color: #F5F5F7 !important;
}
html.dark #ctaCustomer p,
html.dark #ctaProvider p {
  color: #AEAEB2 !important;
}
html.dark #ctaCustomer .text-gray-500,
html.dark #ctaProvider .text-gray-500,
html.dark #ctaCustomer .text-gray-400,
html.dark #ctaProvider .text-gray-400 {
  color: #8E8E93 !important;
}

/* ══════════════════════════════════════════════════════════════
   VERIFIED BADGE — text visibility fix
   Green pill text becomes invisible in dark mode when text
   colour inherits or gets set to a matching green.
   Force white text on any green-background pill/badge element.
══════════════════════════════════════════════════════════════ */

/* Dark mode: white text on vivid green badge backgrounds */
html.dark [class*="bg-green-4"],
html.dark [class*="bg-green-5"],
html.dark [class*="bg-green-6"] {
  color: #ffffff !important;
}

/* Softer green backgrounds: use bright readable green text */
html.dark [class*="bg-green-1"],
html.dark [class*="bg-green-2"],
html.dark [class*="bg-green-3"] {
  background-color: rgba(34, 197, 94, 0.18) !important;
  color: #86EFAC !important;
}

/* Any child spans/text inside a green-bg badge go white */
html.dark [class*="bg-green"] span,
html.dark [class*="bg-green"] p {
  color: inherit !important;
}

/* Standalone green text outside a badge stays readable */
html.dark .text-green-400 { color: #4ADE80 !important; }
html.dark .text-green-500 { color: #22C55E !important; }
html.dark .text-green-600 { color: #16A34A !important; }