/* ============================================================
   DARK THEME — GLOBAL COLOR SYSTEM
   ============================================================ */

html[data-theme="dark"] {
  --color-text: #e8f0ff;
  --color-text-muted: #9aa7b8;
  --color-surface: rgba(20,25,32,0.75);
  --color-surface-strong: rgba(20,25,32,0.92);
  --color-border: rgba(255,255,255,0.12);
  --color-accent: #1fb5a8;
  --menu-hover-bg: #2d3642;
  --theme-background: linear-gradient(135deg, #0f141a, #1b2430);
}


/* ============================================================
   DARK THEME — GLOBAL SURFACES
   ============================================================ */

html[data-theme="dark"] body .surface,
html[data-theme="dark"] body .panel,
html[data-theme="dark"] body .module,
html[data-theme="dark"] body .box {
  background: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-text);
}


/* ============================================================
   DARK THEME — GLOBAL BUTTONS
   ============================================================ */

html[data-theme="dark"] button,
html[data-theme="dark"] .btn {
  background: #1a1f27;
  color: #e8f0ff;
  border: 1px solid #3a4452;
  box-shadow: 0 3px 8px rgba(0,0,0,0.45);
}

html[data-theme="dark"] button:hover,
html[data-theme="dark"] .btn:hover {
  background: #2d3642;
  color: #00d0ff;
  box-shadow: 0 5px 14px rgba(0,0,0,0.6);
}

html[data-theme="dark"] .beautybutton {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.12);
}

html[data-theme="dark"] .beautybutton:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.25);
  box-shadow:
    0 4px 14px rgba(0,0,0,0.45),
    inset 0 0 14px rgba(255,255,255,0.12);
}

html[data-theme="dark"] .beautybutton {
  border-color: rgba(100,180,255,0.45);
  box-shadow:
    inset 0 0 5px rgba(100,180,255,0.35),
    0 0 8px rgba(100,180,255,0.25);
}

html[data-theme="dark"] .beautybutton:hover {
  border-color: rgba(150,210,255,0.65);
  box-shadow:
    inset 0 0 7px rgba(150,210,255,0.45),
    0 0 12px rgba(150,210,255,0.35);
}

html[data-theme="dark"] .banner--shop .category-links a {
  border-color: rgba(100,180,255,0.45);
  background: rgba(255,255,255,0.04);
  color: #ffffff;
}

html[data-theme="dark"] .banner--shop .category-links a:hover {
  border-color: rgba(150,210,255,0.65);
  background: rgba(255,255,255,0.08);
  box-shadow:
    inset 0 0 7px rgba(150,210,255,0.45),
    0 0 12px rgba(150,210,255,0.35);
}

html[data-theme="dark"] .banner--shop .category-links a {
  border-color: rgba(100,180,255,0.45) !important;
  background: rgba(255,255,255,0.04) !important;
  color: #ffffff !important;
}

/* ============================================================
   DARK THEME — MENUS (Top / Sidebar)
   ============================================================ */

html[data-theme="dark"] .mod-menu a {
  color: #e8f0ff;
}

html[data-theme="dark"] .mod-menu a:hover {
  color: #00d0ff;
}

html[data-theme="dark"] .sidebar-left .mod-menu .nav-item > a,
html[data-theme="dark"] .sidebar-right .mod-menu .nav-item > a {
  background: #1a1f27;
  border: 1px solid #3a4452;
  color: #e8f0ff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.35);
}

html[data-theme="dark"] .sidebar-left .mod-menu .nav-item > a:hover,
html[data-theme="dark"] .sidebar-right .mod-menu .nav-item > a:hover {
  background: #2693b8;
  color: #ffffff;
  box-shadow: 0 4px 10px rgba(0,0,0,0.45);
}


/* ============================================================
   DARK THEME — DIVISION TOPBARS
   ============================================================ */

/* Meet Marco */
html[data-theme="dark"] body.meetmarco-division .meetmarco-topbar {
  background: linear-gradient(to bottom, #2a0000, #7a0000);
}

/* GoShopping */
html[data-theme="dark"] body.goshopping-division .goshopping-topbar {
  background: linear-gradient(to bottom, #1f1f1f, #5a5a5a);
}

/* Bookings */
html[data-theme="dark"] body.bookings-division .bookings-topbar {
  background: linear-gradient(to bottom, #0a1a33, #1f3d7a);
}

/* SymbioSoft */
html[data-theme="dark"] .symbio-topbar {
  background: linear-gradient(to bottom, #1a1a1a, #00334d);
}


/* ============================================================
   DARK THEME — DIVISION HERO BUTTONS
   (Meet Marco / Shop / Bookings share the same system)
   ============================================================ */

html[data-theme="dark"] .division-btn,
html[data-theme="dark"] .category-links a,
html[data-theme="dark"] .goshopping-links a,
html[data-theme="dark"] .booking-btn,
html[data-theme="dark"] .booking-nav-btn {
  background: #1a1f27;
  color: #e8f0ff;
  border: 1px solid #3a4452;
  box-shadow: 0 3px 8px rgba(0,0,0,0.45);
}

html[data-theme="dark"] .division-btn:hover,
html[data-theme="dark"] .category-links a:hover,
html[data-theme="dark"] .goshopping-links a:hover,
html[data-theme="dark"] .booking-btn:hover,
html[data-theme="dark"] .booking-nav-btn:hover {
  background: #2d3642;
  color: #00d0ff;
  box-shadow: 0 5px 14px rgba(0,0,0,0.6);
}


/* ============================================================
   DARK THEME — FOOTER
   ============================================================ */

html[data-theme="dark"] .footer-block h4,
html[data-theme="dark"] .footer-block h5 {
  color: #e8f0ff;
  border-bottom-color: rgba(255,255,255,0.35);
}

html[data-theme="dark"] .footer-btn:not(.meetmarco-btn):not(.goshopping-btn):not(.bookings-btn):not(.software-btn) {
  background: rgba(255,255,255,0.10);
  color: #ffffff;
  border-color: rgba(255,255,255,0.25);
}

html[data-theme="dark"] .footer-bottom p {
  color: #ffffff;
  background: rgba(0,0,0,0.25);
}


/* ============================================================
   DARK THEME — DIVISION FOOTER SEPARATORS
   ============================================================ */

html[data-theme="dark"] .footer-shop .footer-bottom {
  border-top-color: #80bcaa;
}

html[data-theme="dark"] .footer-bookings .footer-bottom {
  border-top-color: #2c5890;
}

html[data-theme="dark"] .footer-meetmarco .footer-bottom {
  border-top-color: #d68f8f;
}


/* ============================================================
   DARK THEME — MISC FIXES
   ============================================================ */

html[data-theme="dark"] .spoken-text-inner {
  color: #ffffff;
}

html[data-theme="dark"] .tour-badge {
  filter: brightness(0.85);
}

/* ============================================================
   DARK THEME — FIX BUTTON BACKGROUND/BORDER + ADD GLOW
   ============================================================ */

html[data-theme="dark"] .neon-switcher .mode-btn {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

html[data-theme="dark"] .neon-switcher .mode-btn:hover,
html[data-theme="dark"] .neon-switcher .mode-btn:focus {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  color: #1fb5a8;
  text-shadow: 0 0 6px rgba(31,181,168,0.6);
}