/* ══════════════════════════════════════════
   LIGHT THEME OVERRIDES
══════════════════════════════════════════ */

:root[data-theme="light"] {
  /* Core darks -> Lights */
  --dark-950: #fbfbfa;
  --dark-900: #f4f3ef;
  --dark-850: #eceae3;
  --dark-800: #e2dfd4;
  --dark-750: #d6d1c4;
  --dark-700: #c9c3b4;
  --dark-600: #b0aa99;
  --dark-500: #959080;


  /* Shift Gold Palette for visibility and radiance on light */
  --gold-100: #fdf3cb;
  --gold-200: #d98c08;
  --gold-300: #ba7700;
  --gold-400: #9e6300;
  --gold-500: #7d4a00;

  /* Text colors: high-contrast, crisp and bright */
  --text-primary: #12100a;
  --text-secondary: #383120;
  --text-muted: #5c533c;

  /* Borders */
  --border-gold: rgba(186,119,0,0.35);
  --border-subtle: rgba(186,119,0,0.18);
}

/* ── Specific Hardcoded Overrides ── */

:root[data-theme="light"] body { background: var(--dark-950); }

/* ═══════════════════════════════════════════════════════════════
   3D EFFECT: LUXURY FLOATING HEADER, ACTIONS & RATES TICKER (LIGHT)
   ═══════════════════════════════════════════════════════════════ */
:root[data-theme="light"] .header {
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(24px) saturate(1.8) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.8) !important;
  border-bottom: 1.5px solid rgba(186, 119, 0, 0.28) !important;
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.05),
    0 1px 3px rgba(186, 119, 0, 0.08),
    inset 0 1px 0 #ffffff,
    inset 0 -1.5px 0 rgba(186, 119, 0, 0.12) !important;
  transition: all 0.3s ease !important;
}

:root[data-theme="light"] .header.scrolled {
  background: rgba(255, 255, 255, 0.98) !important;
  border-bottom-color: rgba(186, 119, 0, 0.42) !important;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.09),
    0 2px 6px rgba(186, 119, 0, 0.14),
    inset 0 1px 0 #ffffff,
    inset 0 -1.5px 0 rgba(186, 119, 0, 0.22) !important;
}

:root[data-theme="light"] .brand-icon {
  background: linear-gradient(145deg, #ffffff 0%, #fefcf6 55%, #f6edd7 100%) !important;
  border: 1.5px solid rgba(186, 119, 0, 0.45) !important;
  border-radius: 12px !important;
  box-shadow:
    0 3px 8px rgba(0, 0, 0, 0.07),
    0 1px 3px rgba(186, 119, 0, 0.2),
    inset 0 1px 1px #ffffff,
    inset 0 -2px 0 rgba(186, 119, 0, 0.25) !important;
  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

:root[data-theme="light"] .brand:hover .brand-icon {
  transform: translateY(-2px) scale(1.06) !important;
  border-color: #d4a017 !important;
  box-shadow:
    0 6px 18px rgba(186, 119, 0, 0.35),
    0 0 12px rgba(212, 160, 23, 0.25),
    inset 0 1px 1px #ffffff,
    inset 0 -2px 0 rgba(186, 119, 0, 0.35) !important;
}

:root[data-theme="light"] .brand-logo-img {
  filter: drop-shadow(0 2px 4px rgba(186, 119, 0, 0.3)) !important;
}

:root[data-theme="light"] .header-inner {
  max-width: 1320px !important;
  padding: 0 18px !important;
  gap: 12px !important;
}

:root[data-theme="light"] .brand {
  gap: 10px !important;
  flex-shrink: 0 !important;
}
:root[data-theme="light"] .brand-name {
  white-space: nowrap !important;
}
:root[data-theme="light"] .brand-tagline {
  white-space: nowrap !important;
}

:root[data-theme="light"] .header-nav {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  flex-shrink: 1 !important;
}

:root[data-theme="light"] .header-nav a {
  color: #5c533c !important;
  font-weight: 650 !important;
  font-size: 0.82rem !important;
  padding: 5px 9px !important;
  border-radius: 16px !important;
  border: 1px solid transparent !important;
  transition: all 0.22s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
  display: inline-flex !important;
  align-items: center !important;
  white-space: nowrap !important;
  letter-spacing: -0.01em !important;
  line-height: 1.2 !important;
}

:root[data-theme="light"] .header-nav a:hover {
  color: #12100a !important;
  background: linear-gradient(180deg, #ffffff 0%, #faf6ec 100%) !important;
  border-color: rgba(186, 119, 0, 0.3) !important;
  box-shadow:
    0 3px 8px rgba(0, 0, 0, 0.06),
    0 1px 2px rgba(186, 119, 0, 0.15),
    inset 0 1px 1px #ffffff,
    inset 0 -1.5px 0 rgba(186, 119, 0, 0.18) !important;
  transform: translateY(-1.5px) !important;
}

@media (max-width: 1220px) and (min-width: 993px) {
  :root[data-theme="light"] .header-nav {
    gap: 2px !important;
  }
  :root[data-theme="light"] .header-nav a {
    padding: 5px 6px !important;
    font-size: 0.77rem !important;
  }
  :root[data-theme="light"] .header-actions {
    gap: 4px !important;
  }
  :root[data-theme="light"] #header-book-btn {
    padding: 7px 12px !important;
    font-size: 0.78rem !important;
  }
}

:root[data-theme="light"] .header-icon-btn,
:root[data-theme="light"] .theme-toggle {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  background: linear-gradient(145deg, #ffffff 0%, #fdfcf9 55%, #f4ece0 100%) !important;
  border: 1.5px solid rgba(186, 119, 0, 0.32) !important;
  box-shadow:
    0 3px 6px rgba(0, 0, 0, 0.06),
    0 1px 2px rgba(186, 119, 0, 0.14),
    inset 0 1.5px 1px #ffffff,
    inset 0 -2px 0 rgba(186, 119, 0, 0.2) !important;
  transition: all 0.25s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

:root[data-theme="light"] .header-wa-btn {
  color: #059669 !important;
}

:root[data-theme="light"] .header-wa-btn:hover {
  background: linear-gradient(145deg, #25d366 0%, #10b981 100%) !important;
  border-color: #059669 !important;
  color: #ffffff !important;
  box-shadow:
    0 4px 14px rgba(16, 185, 129, 0.45),
    inset 0 1.5px 1px rgba(255, 255, 255, 0.6),
    inset 0 -2px 0 rgba(4, 120, 87, 0.7) !important;
  transform: translateY(-2px) scale(1.08) !important;
}

:root[data-theme="light"] .header-insta-btn {
  color: #b45309 !important;
}

:root[data-theme="light"] .header-insta-btn:hover {
  background: linear-gradient(145deg, #f59e0b 0%, #e11d48 50%, #9333ea 100%) !important;
  border-color: #e11d48 !important;
  color: #ffffff !important;
  box-shadow:
    0 4px 14px rgba(225, 29, 72, 0.45),
    inset 0 1.5px 1px rgba(255, 255, 255, 0.6),
    inset 0 -2px 0 rgba(147, 51, 234, 0.7) !important;
  transform: translateY(-2px) scale(1.08) !important;
}

:root[data-theme="light"] .theme-toggle {
  color: #b45309 !important;
}

:root[data-theme="light"] .theme-toggle:hover {
  background: linear-gradient(145deg, #fffbeb 0%, #fef3c7 100%) !important;
  border-color: rgba(186, 119, 0, 0.5) !important;
  color: #92400e !important;
  box-shadow:
    0 4px 14px rgba(186, 119, 0, 0.3),
    inset 0 1.5px 1px #ffffff,
    inset 0 -2px 0 rgba(186, 119, 0, 0.3) !important;
  transform: translateY(-2px) scale(1.08) rotate(15deg) !important;
}

:root[data-theme="light"] .header-icon-btn:active,
:root[data-theme="light"] .theme-toggle:active {
  transform: translateY(1px) scale(0.96) !important;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.15),
    inset 0 2px 4px rgba(0, 0, 0, 0.18) !important;
}

:root[data-theme="light"] #header-book-btn {
  background: linear-gradient(180deg, #fae59a 0%, #e6ab23 35%, #ca8a08 75%, #a16207 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.65) !important;
  border-radius: 12px !important;
  padding: 10px 22px !important;
  font-weight: 750 !important;
  font-size: 0.85rem !important;
  color: #1a1100 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) !important;
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.1),
    0 6px 18px rgba(186, 119, 0, 0.35),
    inset 0 1.5px 1.5px rgba(255, 255, 255, 0.85),
    inset 0 -3px 0 rgba(138, 92, 4, 0.65) !important;
  transition: all 0.25s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
  animation: btn-gold-3d-pulse-light 3s ease-in-out infinite !important;
}

:root[data-theme="light"] #header-book-btn:hover {
  transform: translateY(-2px) !important;
  filter: brightness(1.05) !important;
  box-shadow:
    0 4px 8px rgba(0, 0, 0, 0.12),
    0 10px 26px rgba(212, 160, 23, 0.55),
    inset 0 2px 2px rgba(255, 255, 255, 0.95),
    inset 0 -3px 0 rgba(138, 92, 4, 0.75) !important;
}

:root[data-theme="light"] #header-book-btn:active {
  transform: translateY(1px) !important;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.2),
    inset 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

@keyframes btn-gold-3d-pulse-light {
  0%, 100% {
    box-shadow:
      0 2px 4px rgba(0, 0, 0, 0.1),
      0 6px 18px rgba(186, 119, 0, 0.35),
      inset 0 1.5px 1.5px rgba(255, 255, 255, 0.85),
      inset 0 -3px 0 rgba(138, 92, 4, 0.65);
  }
  50% {
    box-shadow:
      0 3px 6px rgba(0, 0, 0, 0.12),
      0 8px 25px rgba(212, 160, 23, 0.52),
      0 0 0 3px rgba(212, 160, 23, 0.16),
      inset 0 1.5px 1.5px rgba(255, 255, 255, 0.95),
      inset 0 -3px 0 rgba(138, 92, 4, 0.75);
  }
}

:root[data-theme="light"] .rates-ticker {
  background: linear-gradient(180deg, #ffffff 0%, #faf8f2 50%, #f1ebdb 100%) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.95) !important;
  border-bottom: 1.5px solid rgba(186, 119, 0, 0.35) !important;
  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.05),
    inset 0 2px 3px rgba(255, 255, 255, 0.9),
    inset 0 -2px 3px rgba(186, 119, 0, 0.1) !important;
  height: 38px !important;
}

:root[data-theme="light"] .rt-inner {
  color: #4b4430 !important;
  font-weight: 550 !important;
}

:root[data-theme="light"] .rt-inner strong {
  color: #92400e !important;
  font-weight: 750 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}

:root[data-theme="light"] .rt-label {
  background: linear-gradient(180deg, #ff5e57 0%, #e74c3c 60%, #c0392b 100%) !important;
  box-shadow:
    0 2px 6px rgba(231, 76, 60, 0.4),
    inset 0 1px 1px rgba(255, 255, 255, 0.65),
    inset 0 -1.5px 0 rgba(0, 0, 0, 0.25) !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3) !important;
  letter-spacing: 0.08em !important;
}

:root[data-theme="light"] .tsep {
  color: #d97706 !important;
  filter: drop-shadow(0 1px 1px rgba(186, 119, 0, 0.3)) !important;
}

:root[data-theme="light"] .modal-overlay { background: rgba(0,0,0,0.5); }

:root[data-theme="light"] .hero-bg-grid {
  background-image:
    linear-gradient(rgba(0,0,0,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.04) 1px, transparent 1px);
}

:root[data-theme="light"] .vault-3d-wrap {
  background: radial-gradient(circle at 50% 50%, rgba(254, 252, 245, 0.98) 0%, rgba(245, 239, 224, 0.98) 65%, #f0e6ce 100%);
  border-top: 1px solid rgba(186, 119, 0, 0.22);
  border-bottom: 1px solid rgba(186, 119, 0, 0.28);
  box-shadow: 0 20px 60px rgba(186, 119, 0, 0.12);
}
:root[data-theme="light"] .vault-3d-glow-backdrop {
  background: radial-gradient(circle, rgba(217, 140, 8, 0.20) 0%, rgba(217, 140, 8, 0.05) 55%, transparent 75%);
}
:root[data-theme="light"] .vault-3d-badge {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(186, 119, 0, 0.32);
  color: #78350f;
  box-shadow: 0 4px 16px rgba(186, 119, 0, 0.14);
}
:root[data-theme="light"] .hero-gallery-wrap {
  background: #110e08;
  border-top-color: rgba(186, 119, 0, 0.35);
  border-bottom-color: rgba(186, 119, 0, 0.4);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.16), 0 0 25px rgba(217, 140, 8, 0.12);
}
:root[data-theme="light"] .gallery-arrow-btn {
  background: rgba(255, 255, 255, 0.88);
  color: #1a160f;
  border-color: rgba(186, 119, 0, 0.35);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
:root[data-theme="light"] .gallery-arrow-btn:hover {
  background: var(--gold-400);
  color: #1a160f;
  border-color: var(--gold-500);
}
:root[data-theme="light"] .gallery-dots {
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(180, 83, 9, 0.35);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.1);
  padding: 4px 10px;
  border-radius: 14px;
  gap: 6px;
}
:root[data-theme="light"] .g-dot {
  background: rgba(180, 83, 9, 0.35);
  border: none;
  width: 18px;
  height: 4px;
  border-radius: 2px;
}
:root[data-theme="light"] .g-dot:hover {
  background: rgba(180, 83, 9, 0.75);
}
:root[data-theme="light"] .g-dot.active {
  width: 28px;
  background: linear-gradient(90deg, #b45309, #d97706, #f59e0b) !important;
  box-shadow: 0 1px 6px rgba(180, 83, 9, 0.5) !important;
  border: none !important;
}
:root[data-theme="light"] .g-dot.g-dot-vault {
  border: 1px solid rgba(180, 83, 9, 0.55) !important;
}
:root[data-theme="light"] .g-dot.g-dot-vault.active {
  width: 30px;
  background: linear-gradient(90deg, #b45309 0%, #0284c7 100%) !important;
  box-shadow: 0 1px 8px rgba(2, 132, 199, 0.6) !important;
}
:root[data-theme="light"] .slide-tag {
  background: rgba(255, 255, 255, 0.94) !important;
  color: #78350f !important;
  border-color: rgba(186, 119, 0, 0.45) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12) !important;
}
:root[data-theme="light"] .gallery-slide-vault {
  background: radial-gradient(circle at 50% 50%, rgba(254, 252, 245, 0.98) 0%, rgba(245, 239, 224, 0.98) 65%, #f0e6ce 100%) !important;
}
:root[data-theme="light"] .gallery-slide-vault .slide-text {
  color: #1a140b !important;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75) !important;
  font-weight: 600 !important;
}
:root[data-theme="light"] .vault-3d-container .vault-3d-badge {
  background: rgba(255, 255, 255, 0.94) !important;
  border-color: rgba(186, 119, 0, 0.35) !important;
  color: #78350f !important;
}

:root[data-theme="light"] .services-section {
  background: linear-gradient(180deg, var(--dark-900) 0%, var(--dark-850) 100%);
}
:root[data-theme="light"] .cc-section {
  background: linear-gradient(180deg, var(--dark-850) 0%, var(--dark-900) 100%);
}

:root[data-theme="light"] .ai .msg-bubble { background: var(--dark-900); }

:root[data-theme="light"] .form-group input[type="date"]::-webkit-calendar-picker-indicator {
  filter: none;
}

:root[data-theme="light"] .btn-outline-gold {
  background: transparent;
}
:root[data-theme="light"] .btn-outline-gold:hover {
  background: rgba(212,160,23,0.15) !important;
}

/* ── Theme Toggle Button Styles ── */
.theme-toggle {
  background: var(--dark-800);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  cursor: pointer;
  transition: 0.2s var(--ease);
}
.theme-toggle:hover {
  background: rgba(212,160,23,0.1);
  border-color: var(--border-gold);
}


/* Light Mode: 4 Service Overview Cards & Unified Typography */
:root[data-theme="light"] .services-section {
  background: linear-gradient(180deg, #f8f7f4 0%, #f1efe8 100%) !important;
}
:root[data-theme="light"] .services-section .section-title {
  color: #12100a !important;
  -webkit-text-fill-color: #12100a !important;
  font-weight: 750 !important;
  letter-spacing: -0.02em !important;
}
:root[data-theme="light"] .services-section .section-sub {
  color: #4a4231 !important;
  font-size: 1.02rem !important;
}

/* ═══════════════════════════════════════════════════════════════
   PREMIUM 3D EFFECT FOR FINANCIAL SERVICE BOXES (LIGHT THEME)
   ═══════════════════════════════════════════════════════════════ */
:root[data-theme="light"] .services-section {
  padding: 22px 0 28px !important;
  scroll-margin-top: calc(var(--header-h) + 38px) !important;
}

:root[data-theme="light"] .services-section .section-inner {
  max-width: 1280px !important;
  padding: 0 24px !important;
}

:root[data-theme="light"] .services-section .section-label {
  margin-bottom: 5px !important;
  font-size: 0.68rem !important;
}

:root[data-theme="light"] .services-section .section-title {
  font-size: clamp(1.45rem, 2.4vw, 2.05rem) !important;
  margin-bottom: 6px !important;
  line-height: 1.22 !important;
}

:root[data-theme="light"] .services-section .section-sub {
  font-size: 0.90rem !important;
  margin-bottom: 18px !important;
  line-height: 1.45 !important;
}

:root[data-theme="light"] .services-grid {
  perspective: 1200px !important;
  gap: 16px !important;
  margin-top: 0 !important;
}

:root[data-theme="light"] .svc-card {
  background: linear-gradient(172deg, #ffffff 0%, #fdfcf9 55%, #f6f1e6 100%) !important;
  border: 1px solid rgba(186, 119, 0, 0.30) !important;
  border-radius: 18px !important;
  padding: 20px 18px 18px !important;
  min-height: 295px !important;
  color: var(--text-primary) !important;
  transform-style: preserve-3d !important;
  transition: transform 0.38s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.38s cubic-bezier(0.165, 0.84, 0.44, 1), border-color 0.3s ease !important;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.04),
    0 6px 18px -2px rgba(186, 119, 0, 0.08),
    0 18px 36px -6px rgba(0, 0, 0, 0.09),
    inset 0 1.5px 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -4px 0 0 rgba(186, 119, 0, 0.14) !important;
}

:root[data-theme="light"] .svc-card::before {
  height: 4px !important;
  border-radius: 18px 18px 0 0 !important;
}

:root[data-theme="light"] .svc-card:hover {
  transform: translateY(-7px) scale(1.02);
}

:root[data-theme="light"] .svc-card-buy:hover,
:root[data-theme="light"] .svc-card-gold:hover {
  border-color: rgba(186, 119, 0, 0.75) !important;
  box-shadow:
    0 4px 10px rgba(0, 0, 0, 0.06),
    0 24px 50px -8px rgba(0, 0, 0, 0.14),
    0 14px 32px -4px rgba(212, 160, 23, 0.38),
    inset 0 1.5px 1px #ffffff,
    inset 0 -4.5px 0 rgba(186, 119, 0, 0.22) !important;
}

:root[data-theme="light"] .svc-card-fx:hover {
  border-color: rgba(20, 90, 50, 0.75) !important;
  box-shadow:
    0 4px 10px rgba(0, 0, 0, 0.06),
    0 24px 50px -8px rgba(0, 0, 0, 0.14),
    0 14px 32px -4px rgba(46, 204, 113, 0.35),
    inset 0 1.5px 1px #ffffff,
    inset 0 -4.5px 0 rgba(20, 90, 50, 0.22) !important;
}

:root[data-theme="light"] .svc-card-cc:hover {
  border-color: rgba(27, 79, 114, 0.75) !important;
  box-shadow:
    0 4px 10px rgba(0, 0, 0, 0.06),
    0 24px 50px -8px rgba(0, 0, 0, 0.14),
    0 14px 32px -4px rgba(52, 152, 219, 0.35),
    inset 0 1.5px 1px #ffffff,
    inset 0 -4.5px 0 rgba(27, 79, 114, 0.22) !important;
}

:root[data-theme="light"] .svc-card-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 12px !important;
  width: 100% !important;
}

/* 3D Floating Icon Medallion */
:root[data-theme="light"] .svc-card-icon {
  width: 46px !important;
  height: 46px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.55rem !important;
  margin-bottom: 0 !important;
  border-radius: 13px !important;
  background: linear-gradient(145deg, #ffffff, #f2ece0) !important;
  border: 1px solid rgba(186, 119, 0, 0.25) !important;
  box-shadow:
    0 2px 5px rgba(0, 0, 0, 0.05),
    0 6px 14px rgba(186, 119, 0, 0.10),
    inset 0 1.5px 1px rgba(255, 255, 255, 0.95),
    inset 0 -2.5px 0 rgba(186, 119, 0, 0.16) !important;
  transition: transform 0.35s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.35s ease !important;
}

:root[data-theme="light"] .svc-card:hover .svc-card-icon {
  transform: translateZ(16px) translateY(-3px) scale(1.08) !important;
  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.12),
    0 2px 6px rgba(186, 119, 0, 0.20),
    inset 0 1.5px 1px rgba(255, 255, 255, 1),
    inset 0 -2.5px 0 rgba(186, 119, 0, 0.22) !important;
}

/* Unified Professional Headings across all 4 cards */
:root[data-theme="light"] .svc-card h3 {
  font-family: var(--font-sans) !important;
  font-size: 1.12rem !important;
  font-weight: 750 !important;
  color: #12100a !important;
  -webkit-text-fill-color: #12100a !important;
  letter-spacing: -0.018em !important;
  line-height: 1.25 !important;
  margin-bottom: 6px !important;
}

/* Card Descriptions */
:root[data-theme="light"] .svc-card p {
  color: #443c2c !important;
  font-size: 0.82rem !important;
  line-height: 1.5 !important;
  margin-bottom: 12px !important;
  flex: 1 !important;
}

/* 3D Inset Well for Stats */
:root[data-theme="light"] .svc-card-stats {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 6px !important;
  margin: 0 0 12px 0 !important;
  padding: 9px 8px !important;
  border-radius: 11px !important;
  background: rgba(186, 119, 0, 0.04) !important;
  border: 1px solid rgba(186, 119, 0, 0.18) !important;
  border-top: 1px solid rgba(186, 119, 0, 0.18) !important;
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.04),
    0 1px 0 rgba(255, 255, 255, 0.95) !important;
}

:root[data-theme="light"] .svc-stat span {
  color: #5c533c !important;
  font-size: 0.66rem !important;
  font-weight: 650 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
}

/* High-Contrast Stat Values */
:root[data-theme="light"] .svc-stat-val {
  font-family: var(--font-sans) !important;
  font-size: 1.12rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.2 !important;
}
:root[data-theme="light"] .svc-card-buy .svc-stat-val,
:root[data-theme="light"] .svc-card-gold .svc-stat-val {
  color: #854d0e !important; /* Deep rich bullion amber */
}
:root[data-theme="light"] .svc-card-fx .svc-stat-val {
  color: #145a32 !important; /* High contrast forest green */
}
:root[data-theme="light"] .svc-card-cc .svc-stat-val {
  color: #1b4f72 !important; /* High contrast executive navy */
}

/* High-Contrast 3D Badges */
:root[data-theme="light"] .svc-card-badge {
  font-weight: 700 !important;
  padding: 4px 11px !important;
  font-size: 0.68rem !important;
  margin-bottom: 0 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
}
:root[data-theme="light"] .svc-card-buy .svc-card-badge,
:root[data-theme="light"] .svc-card-gold .svc-card-badge {
  background: rgba(186, 119, 0, 0.10) !important;
  color: #854d0e !important;
  border: 1px solid rgba(186, 119, 0, 0.32) !important;
}
:root[data-theme="light"] .svc-card-fx .svc-card-badge {
  background: rgba(20, 90, 50, 0.10) !important;
  color: #145a32 !important;
  border: 1px solid rgba(20, 90, 50, 0.32) !important;
}
:root[data-theme="light"] .svc-card-cc .svc-card-badge {
  background: rgba(27, 79, 114, 0.10) !important;
  color: #1b4f72 !important;
  border: 1px solid rgba(27, 79, 114, 0.32) !important;
}

/* 3D Tactile CTA Buttons */
:root[data-theme="light"] .svc-cta {
  display: block !important;
  text-align: center !important;
  padding: 10px 14px !important;
  border-radius: 11px !important;
  font-size: 0.78rem !important;
  font-weight: 750 !important;
  text-decoration: none !important;
  transition: all 0.22s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
  margin-top: auto !important;
  box-shadow:
    0 3px 8px rgba(0, 0, 0, 0.06),
    inset 0 1px 1px rgba(255, 255, 255, 0.6),
    inset 0 -2.5px 0 rgba(0, 0, 0, 0.12) !important;
}

:root[data-theme="light"] .svc-cta:hover {
  transform: translateY(-2px) !important;
}

:root[data-theme="light"] .svc-cta:active {
  transform: translateY(1px) !important;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.1),
    inset 0 2px 4px rgba(0, 0, 0, 0.15) !important;
}

:root[data-theme="light"] .svc-card-buy .svc-cta,
:root[data-theme="light"] .svc-card-gold .svc-cta {
  background: rgba(186, 119, 0, 0.09) !important;
  border: 1px solid rgba(186, 119, 0, 0.35) !important;
  color: #854d0e !important;
}
:root[data-theme="light"] .svc-card-buy .svc-cta:hover,
:root[data-theme="light"] .svc-card-gold .svc-cta:hover {
  background: #854d0e !important;
  color: #ffffff !important;
  border-color: #854d0e !important;
  box-shadow:
    0 6px 16px rgba(133, 77, 14, 0.35),
    inset 0 1px 1px rgba(255, 255, 255, 0.6) !important;
}
:root[data-theme="light"] .svc-card-fx .svc-cta {
  background: rgba(20, 90, 50, 0.09) !important;
  border: 1px solid rgba(20, 90, 50, 0.35) !important;
  color: #145a32 !important;
}
:root[data-theme="light"] .svc-card-fx .svc-cta:hover {
  background: #145a32 !important;
  color: #ffffff !important;
  border-color: #145a32 !important;
  box-shadow:
    0 6px 16px rgba(20, 90, 50, 0.35),
    inset 0 1px 1px rgba(255, 255, 255, 0.6) !important;
}
:root[data-theme="light"] .svc-card-cc .svc-cta {
  background: rgba(27, 79, 114, 0.09) !important;
  border: 1px solid rgba(27, 79, 114, 0.35) !important;
  color: #1b4f72 !important;
}
:root[data-theme="light"] .svc-card-cc .svc-cta:hover {
  background: #1b4f72 !important;
  color: #ffffff !important;
  border-color: #1b4f72 !important;
  box-shadow:
    0 6px 16px rgba(27, 79, 114, 0.35),
    inset 0 1px 1px rgba(255, 255, 255, 0.6) !important;
}

:root[data-theme="light"] .frt-buy { color: #1e8449 !important; }
:root[data-theme="light"] .hc-notify-success,
:root[data-theme="light"] .cwh-status { color: #1e8449 !important; }

:root[data-theme="light"] .hero-trust .sep,
:root[data-theme="light"] .tsep { color: var(--gold-400) !important; }

:root[data-theme="light"] .mobile-nav {
  background: rgba(251, 251, 250, 0.98);
  border-bottom-color: var(--border-gold);
}
:root[data-theme="light"] .section-label {
  color: var(--gold-300);
}
:root[data-theme="light"] .gold-text,
:root[data-theme="light"] .brand-name,
:root[data-theme="light"] .modal-title {
  background: linear-gradient(135deg, var(--gold-200) 0%, var(--gold-400) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
:root[data-theme="light"] .section-title {
  background: linear-gradient(135deg, var(--text-primary) 0%, var(--gold-300) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

:root[data-theme="light"] .form-group input.is-invalid,
:root[data-theme="light"] .form-group select.is-invalid,
:root[data-theme="light"] .form-group textarea.is-invalid {
  border-color: #dc2626 !important;
  background-color: rgba(220, 38, 38, 0.04) !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.16) !important;
}
:root[data-theme="light"] .form-check.is-invalid {
  background: rgba(220, 38, 38, 0.06);
  border-color: rgba(220, 38, 38, 0.25);
}
:root[data-theme="light"] .form-check.is-invalid label {
  color: #b91c1c !important;
}

:root[data-theme="light"] .cp-quick-bar {
  background: rgba(0, 0, 0, 0.03);
  border-bottom-color: var(--border-subtle);
}
:root[data-theme="light"] .cp-quick-btn {
  background: #ffffff;
  border-color: rgba(186, 119, 0, 0.28);
  color: var(--text-primary);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
:root[data-theme="light"] .cp-quick-btn:hover {
  background: rgba(217, 140, 8, 0.12);
  border-color: var(--gold-300);
  color: var(--gold-400);
  box-shadow: 0 2px 6px rgba(186, 119, 0, 0.18);
}

/* Light theme overrides for new luxury components */
:root[data-theme="light"] .market-chart-card {
  background: #ffffff;
  border-color: rgba(186, 119, 0, 0.25);
  box-shadow: 0 16px 40px rgba(186, 119, 0, 0.08);
}
:root[data-theme="light"] .mcc-controls {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}
@media (min-width: 860px) {
  :root[data-theme="light"] .mcc-controls {
    flex-wrap: nowrap !important;
  }
}
:root[data-theme="light"] .mcc-metal-btns,
:root[data-theme="light"] .mcc-tf-btns,
:root[data-theme="light"] .mcc-view-btns {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  background: #f4f1e8 !important;
  border: 1px solid rgba(186, 119, 0, 0.22) !important;
  border-radius: 20px !important;
  padding: 3px !important;
  height: 34px !important;
  box-sizing: border-box !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}
:root[data-theme="light"] .mcc-metal-btn,
:root[data-theme="light"] .mcc-tf-btn,
:root[data-theme="light"] .mcc-view-btn {
  color: #5c533c !important;
  padding: 5px 12px !important;
  font-size: 0.73rem !important;
  font-weight: 600 !important;
  border-radius: 16px !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1.2 !important;
  transition: 0.2s ease !important;
}
:root[data-theme="light"] .mcc-metal-btn:hover,
:root[data-theme="light"] .mcc-tf-btn:hover,
:root[data-theme="light"] .mcc-view-btn:hover {
  color: #1a1100 !important;
}
:root[data-theme="light"] .mcc-metal-btn.active,
:root[data-theme="light"] .mcc-tf-btn.active {
  background: linear-gradient(135deg, #f9e295 0%, #d4a017 60%, #b8860b 100%) !important;
  color: #1a1100 !important;
  box-shadow: 0 2px 6px rgba(186, 119, 0, 0.25) !important;
}
:root[data-theme="light"] .mcc-view-btn.active {
  background: linear-gradient(135deg, #f39c12 0%, #d4a017 60%, #b8860b 100%) !important;
  color: #1a1100 !important;
  box-shadow: 0 2px 6px rgba(186, 119, 0, 0.25) !important;
}
:root[data-theme="light"] #mcc-btn-cyber.active {
  background: linear-gradient(135deg, #0284c7, #0891b2) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 10px rgba(8, 145, 178, 0.45) !important;
}
:root[data-theme="light"] .mcc-dd-pill {
  background: #ffffff !important;
  border-color: rgba(2, 132, 199, 0.4) !important;
  color: #0369a1 !important;
  box-shadow: 0 2px 10px rgba(2, 132, 199, 0.15) !important;
}
:root[data-theme="light"] .mcc-graph-tag {
  color: #92400e !important;
  background: rgba(186, 119, 0, 0.08) !important;
  border-color: rgba(186, 119, 0, 0.25) !important;
}
:root[data-theme="light"] #mcc-cyber-tag {
  color: #0369a1 !important;
  background: rgba(2, 132, 199, 0.08) !important;
  border-color: rgba(2, 132, 199, 0.25) !important;
}
:root[data-theme="light"] .mcc-cyber-wrap {
  background: #090b12 !important;
  border: 1px solid rgba(2, 132, 199, 0.35) !important;
  box-shadow: 0 10px 30px rgba(2, 132, 199, 0.12) !important;
}
:root[data-theme="light"] .mcc-cyber-tooltip {
  background: rgba(10, 14, 24, 0.96) !important;
  color: #ffffff !important;
  border-color: #38bdf8 !important;
}
:root[data-theme="light"] .mcc-badge-3d {
  background: rgba(186, 119, 0, 0.1);
  border-color: rgba(186, 119, 0, 0.3);
  color: var(--gold-400);
}
:root[data-theme="light"] .mcc-3d-hint {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(186, 119, 0, 0.25);
  color: #5c533c;
}
:root[data-theme="light"] .mcc-tooltip {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(186, 119, 0, 0.4);
  color: #1a1710;
  box-shadow: 0 8px 24px rgba(186, 119, 0, 0.16);
}
:root[data-theme="light"] .mcc-range-bar {
  background: #e8e4d8;
}

/* ═══════════════════════════════════════════════════════════════
   ALIGNED LUXURY DIVIDERS & 3D TABS (LIGHT THEME)
   ═══════════════════════════════════════════════════════════════ */
.section-gold-divider {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(186, 119, 0, 0.35) 50%, transparent 100%);
  margin: 38px auto 26px;
}

.section-full-divider {
  width: 100%;
  max-width: 1200px;
  height: 1px;
  margin: 0 auto;
  background: linear-gradient(90deg, transparent 0%, rgba(186, 119, 0, 0.35) 50%, transparent 100%);
}

:root[data-theme="light"] .karat-matrix-wrap {
  border-top: none !important;
  padding-top: 6px !important;
}

:root[data-theme="light"] .gold-tabs-wrap {
  display: flex !important;
  justify-content: flex-start !important;
  margin: 20px 0 24px !important;
}

:root[data-theme="light"] .gold-tabs {
  display: inline-flex !important;
  gap: 6px !important;
  background: rgba(186, 119, 0, 0.08) !important;
  border: 1px solid rgba(186, 119, 0, 0.22) !important;
  border-radius: 14px !important;
  padding: 4px !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.04) !important;
  border-bottom: 1px solid rgba(186, 119, 0, 0.22) !important;
}

:root[data-theme="light"] .gtab {
  padding: 10px 22px !important;
  border-radius: 10px !important;
  font-size: 0.84rem !important;
  font-weight: 700 !important;
  border: 1px solid transparent !important;
  cursor: pointer !important;
  color: #5c533c !important;
  background: transparent !important;
  font-family: var(--font-sans) !important;
  transition: all 0.25s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

:root[data-theme="light"] .gtab:hover {
  color: #12100a !important;
  background: rgba(186, 119, 0, 0.08) !important;
}

:root[data-theme="light"] .gtab.active {
  color: #12100a !important;
  background: linear-gradient(135deg, #ffffff 0%, #fdfbf7 100%) !important;
  border-color: rgba(186, 119, 0, 0.35) !important;
  box-shadow:
    0 4px 12px rgba(186, 119, 0, 0.15),
    inset 0 1px 1px #ffffff,
    inset 0 -2px 0 rgba(186, 119, 0, 0.12) !important;
  transform: translateY(-1px) !important;
}

/* ═══════════════════════════════════════════════════════════════
   3D EFFECT 1: GOLD & FOREX CALCULATOR BOXES
   ═══════════════════════════════════════════════════════════════ */
:root[data-theme="light"] .gold-calculator,
:root[data-theme="light"] .forex-calc {
  background: linear-gradient(172deg, #ffffff 0%, #fdfcf9 55%, #f6f1e6 100%) !important;
  border: 1px solid rgba(186, 119, 0, 0.30) !important;
  border-radius: 20px !important;
  transform-style: preserve-3d !important;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.04),
    0 8px 24px -2px rgba(186, 119, 0, 0.08),
    0 22px 45px -6px rgba(0, 0, 0, 0.09),
    inset 0 1.5px 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -4px 0 0 rgba(186, 119, 0, 0.14) !important;
  transition: transform 0.35s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.35s ease !important;
}

:root[data-theme="light"] .gold-calculator:hover,
:root[data-theme="light"] .forex-calc:hover {
  transform: translateY(-6px) scale(1.01) !important;
  box-shadow:
    0 4px 10px rgba(0, 0, 0, 0.06),
    0 24px 50px -8px rgba(0, 0, 0, 0.14),
    0 14px 32px -4px rgba(212, 160, 23, 0.35),
    inset 0 1.5px 1px #ffffff,
    inset 0 -4.5px 0 rgba(186, 119, 0, 0.22) !important;
}

:root[data-theme="light"] .calc-title {
  color: #12100a !important;
  font-weight: 750 !important;
  letter-spacing: -0.01em !important;
}

:root[data-theme="light"] .calc-group input,
:root[data-theme="light"] .calc-group select {
  background: #fbf9f4 !important;
  border: 1px solid rgba(186, 119, 0, 0.25) !important;
  border-radius: 12px !important;
  color: #12100a !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.04), 0 1px 0 #ffffff !important;
  font-weight: 600 !important;
}

:root[data-theme="light"] .calc-group input:focus,
:root[data-theme="light"] .calc-group select:focus {
  border-color: #b45309 !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.04), 0 0 0 3px rgba(186, 119, 0, 0.15) !important;
}

:root[data-theme="light"] .calc-result {
  background: rgba(186, 119, 0, 0.05) !important;
  border: 1px solid rgba(186, 119, 0, 0.22) !important;
  border-radius: 14px !important;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.04), 0 1px 0 #ffffff !important;
}

:root[data-theme="light"] .cr-highlight {
  color: #854d0e !important;
  font-size: 1.25rem !important;
  font-weight: 800 !important;
}

:root[data-theme="light"] .gf-icon {
  width: 38px !important;
  height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 12px !important;
  background: linear-gradient(145deg, #ffffff, #f2ece0) !important;
  border: 1px solid rgba(186, 119, 0, 0.25) !important;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05), inset 0 1px 1px #fff, inset 0 -2px 0 rgba(186,119,0,0.14) !important;
  font-size: 1.15rem !important;
  transition: transform 0.25s ease !important;
}

:root[data-theme="light"] .gf:hover .gf-icon {
  transform: translateY(-3px) scale(1.08) !important;
  box-shadow: 0 6px 14px rgba(186,119,0,0.2), inset 0 1px 1px #fff !important;
}

/* ═══════════════════════════════════════════════════════════════
   3D EFFECT 2: 4 KARAT CERTIFICATION BOXES (IMAGE 2)
   ═══════════════════════════════════════════════════════════════ */
:root[data-theme="light"] .karat-cards-grid {
  perspective: 1200px !important;
}

:root[data-theme="light"] .karat-card {
  background: linear-gradient(172deg, #ffffff 0%, #fdfcf9 55%, #f6f1e6 100%) !important;
  border: 1px solid rgba(186, 119, 0, 0.30) !important;
  border-radius: 20px !important;
  color: var(--text-primary) !important;
  transform-style: preserve-3d !important;
  transition: transform 0.35s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.35s cubic-bezier(0.165, 0.84, 0.44, 1), border-color 0.3s ease !important;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.04),
    0 6px 18px -2px rgba(186, 119, 0, 0.08),
    0 18px 36px -6px rgba(0, 0, 0, 0.09),
    inset 0 1.5px 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -4px 0 0 rgba(186, 119, 0, 0.14) !important;
}

:root[data-theme="light"] .karat-card:hover {
  transform: translateY(-8px) scale(1.02) !important;
  border-color: rgba(186, 119, 0, 0.75) !important;
  box-shadow:
    0 4px 10px rgba(0, 0, 0, 0.06),
    0 24px 50px -8px rgba(0, 0, 0, 0.14),
    0 14px 32px -4px rgba(212, 160, 23, 0.38),
    inset 0 1.5px 1px #ffffff,
    inset 0 -4.5px 0 rgba(186, 119, 0, 0.22) !important;
}

:root[data-theme="light"] .karat-card.featured-karat {
  background: linear-gradient(172deg, #fffdf8 0%, #fdf8ed 50%, #f7ecd2 100%) !important;
  border: 2px solid rgba(212, 160, 23, 0.75) !important;
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.06),
    0 12px 28px -4px rgba(212, 160, 23, 0.18),
    0 24px 48px -8px rgba(0, 0, 0, 0.12),
    inset 0 1.5px 1px #ffffff,
    inset 0 -4.5px 0 rgba(212, 160, 23, 0.28) !important;
}

:root[data-theme="light"] .karat-card.featured-karat:hover {
  transform: translateY(-10px) scale(1.025) !important;
  border-color: #d97706 !important;
  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.08),
    0 30px 60px -10px rgba(0, 0, 0, 0.16),
    0 18px 40px -4px rgba(245, 158, 11, 0.50),
    inset 0 1.5px 1px #ffffff,
    inset 0 -5px 0 rgba(212, 160, 23, 0.35) !important;
}

:root[data-theme="light"] .kc-badge {
  background: rgba(186, 119, 0, 0.10) !important;
  color: #854d0e !important;
  border: 1px solid rgba(186, 119, 0, 0.25) !important;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,0.6) !important;
  font-weight: 750 !important;
}

:root[data-theme="light"] .kc-badge.popular {
  background: linear-gradient(135deg, var(--gold-400), var(--gold-600)) !important;
  color: #ffffff !important;
  box-shadow: 0 3px 8px rgba(186, 119, 0, 0.35), inset 0 1px 0 rgba(255,255,255,0.4) !important;
}

:root[data-theme="light"] .kc-karat {
  font-family: var(--font-serif) !important;
  font-size: 1.55rem !important;
  font-weight: 750 !important;
  color: #854d0e !important;
  letter-spacing: -0.015em !important;
}

:root[data-theme="light"] .kc-hallmark {
  background: rgba(186, 119, 0, 0.05) !important;
  border: 1px solid rgba(186, 119, 0, 0.18) !important;
  border-radius: 8px !important;
  padding: 4px 8px !important;
  color: #5c533c !important;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.03) !important;
}

:root[data-theme="light"] .kc-features span {
  background: rgba(186, 119, 0, 0.04) !important;
  border: 1px solid rgba(186, 119, 0, 0.15) !important;
  border-radius: 8px !important;
  padding: 4px 8px !important;
  color: #443c2c !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.03) !important;
}

/* ═══════════════════════════════════════════════════════════════
   3D EFFECT 3: FOREX TABLE & CONVERTER (IMAGE 3)
   ═══════════════════════════════════════════════════════════════ */
:root[data-theme="light"] .forex-rates-table {
  background: linear-gradient(172deg, #ffffff 0%, #fdfcf9 55%, #f6f1e6 100%) !important;
  border: 1px solid rgba(20, 90, 50, 0.30) !important;
  border-radius: 20px !important;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.04),
    0 8px 24px -2px rgba(20, 90, 50, 0.08),
    0 22px 45px -6px rgba(0, 0, 0, 0.09),
    inset 0 1.5px 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -4px 0 0 rgba(20, 90, 50, 0.14) !important;
  overflow: hidden !important;
}

:root[data-theme="light"] .frt-header {
  background: linear-gradient(180deg, #f7fbf8 0%, #edf5ef 100%) !important;
  border-bottom: 1px solid rgba(20, 90, 50, 0.20) !important;
  color: #145a32 !important;
}

:root[data-theme="light"] .frt-row {
  border-bottom: 1px solid rgba(20, 90, 50, 0.07) !important;
  transition: background 0.2s ease, transform 0.2s ease !important;
}

:root[data-theme="light"] .frt-row:hover {
  background: rgba(46, 204, 113, 0.06) !important;
}

:root[data-theme="light"] .frt-buy {
  color: #145a32 !important;
  font-weight: 750 !important;
}

:root[data-theme="light"] .frt-sell {
  color: #991b1b !important;
  font-weight: 750 !important;
}

:root[data-theme="light"] .frt-flag {
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.12)) !important;
}

/* ═══════════════════════════════════════════════════════════════
   3D EFFECT 4: CREDIT CARD FEE CARDS & CARDS TRAY (IMAGE 4)
   ═══════════════════════════════════════════════════════════════ */
:root[data-theme="light"] .cc-fee-cards {
  perspective: 1200px !important;
}

:root[data-theme="light"] .cc-fee-card {
  background: linear-gradient(172deg, #ffffff 0%, #fdfcf9 55%, #f6f1e6 100%) !important;
  border: 1px solid rgba(27, 79, 114, 0.30) !important;
  border-radius: 20px !important;
  transform-style: preserve-3d !important;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.04),
    0 6px 18px -2px rgba(27, 79, 114, 0.08),
    0 18px 36px -6px rgba(0, 0, 0, 0.09),
    inset 0 1.5px 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -4px 0 0 rgba(27, 79, 114, 0.14) !important;
  transition: transform 0.35s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.35s ease !important;
}

:root[data-theme="light"] .cc-fee-card:hover {
  transform: translateY(-8px) scale(1.025) !important;
  border-color: rgba(27, 79, 114, 0.75) !important;
  box-shadow:
    0 4px 10px rgba(0, 0, 0, 0.06),
    0 24px 50px -8px rgba(0, 0, 0, 0.14),
    0 14px 32px -4px rgba(52, 152, 219, 0.35),
    inset 0 1.5px 1px #ffffff,
    inset 0 -4.5px 0 rgba(27, 79, 114, 0.22) !important;
}

:root[data-theme="light"] .cc-fee-card.featured-fee {
  background: linear-gradient(172deg, #fffdf8 0%, #fdf8ed 50%, #f7ecd2 100%) !important;
  border: 2px solid rgba(212, 160, 23, 0.75) !important;
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.06),
    0 12px 28px -4px rgba(212, 160, 23, 0.18),
    0 24px 48px -8px rgba(0, 0, 0, 0.12),
    inset 0 1.5px 1px #ffffff,
    inset 0 -4.5px 0 rgba(212, 160, 23, 0.28) !important;
}

:root[data-theme="light"] .cc-fee-card.featured-fee:hover {
  border-color: #d97706 !important;
  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.08),
    0 30px 60px -10px rgba(0, 0, 0, 0.16),
    0 18px 40px -4px rgba(245, 158, 11, 0.50),
    inset 0 1.5px 1px #ffffff,
    inset 0 -5px 0 rgba(212, 160, 23, 0.35) !important;
}

:root[data-theme="light"] .ccf-fee {
  font-family: var(--font-serif) !important;
  color: #854d0e !important;
  font-size: 2.3rem !important;
  font-weight: 800 !important;
  filter: drop-shadow(0 2px 4px rgba(186, 119, 0, 0.15)) !important;
}

:root[data-theme="light"] .cc-cards-supported {
  background: linear-gradient(172deg, #ffffff 0%, #fdfcf9 55%, #f6f1e6 100%) !important;
  border: 1px solid rgba(186, 119, 0, 0.25) !important;
  border-radius: 18px !important;
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.04),
    0 12px 28px -4px rgba(0, 0, 0, 0.07),
    inset 0 1.5px 1px #ffffff,
    inset 0 -3.5px 0 rgba(186, 119, 0, 0.12) !important;
}

:root[data-theme="light"] .ccs-logo {
  background: linear-gradient(145deg, #ffffff, #ede7db) !important;
  border: 1px solid rgba(186, 119, 0, 0.28) !important;
  border-radius: 10px !important;
  box-shadow: 0 3px 6px rgba(0,0,0,0.06), inset 0 1px 1px #fff, inset 0 -2px 0 rgba(186,119,0,0.14) !important;
  color: #1a1710 !important;
  font-weight: 800 !important;
  padding: 8px 16px !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

:root[data-theme="light"] .ccs-logo:hover {
  transform: translateY(-3px) scale(1.06) !important;
  box-shadow: 0 6px 14px rgba(0,0,0,0.12), inset 0 1px 1px #fff !important;
}

:root[data-theme="light"] .cc-step-num {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #fde047 0%, #d97706 100%) !important;
  color: #1a1100 !important;
  font-weight: 800 !important;
  font-size: 0.85rem !important;
  box-shadow: 0 4px 10px rgba(186, 119, 0, 0.35), inset 0 1.5px 1px #ffffff, inset 0 -2.5px 0 rgba(0,0,0,0.2) !important;
}

:root[data-theme="light"] .bis-seal-banner {
  background: linear-gradient(90deg, rgba(217, 140, 8, 0.12) 0%, rgba(217, 140, 8, 0.04) 100%);
  border-color: rgba(186, 119, 0, 0.35);
}
:root[data-theme="light"] .faq-section {
  background: #f6f5f0;
}
:root[data-theme="light"] .faq-item {
  background: #ffffff;
  border-color: rgba(186, 119, 0, 0.2);
}
:root[data-theme="light"] .faq-item.active {
  border-color: var(--gold-300);
  box-shadow: 0 4px 16px rgba(186, 119, 0, 0.1);
}
:root[data-theme="light"] .btn-print-slip {
  background: #ffffff;
  border-color: rgba(186, 119, 0, 0.3);
  color: var(--gold-400);
}
:root[data-theme="light"] .stats-bar {
  background: linear-gradient(90deg, rgba(217, 140, 8, 0.1) 0%, rgba(217, 140, 8, 0.04) 50%, rgba(217, 140, 8, 0.1) 100%);
  border-color: rgba(186, 119, 0, 0.25);
}

:root[data-theme="light"] .footer-heading {
  font-family: var(--font-sans) !important;
  color: #b45309 !important;
  font-weight: 700 !important;
}