/* ==============================
   CSS VARIABLES (both modes)
   ============================== */
:root {
  --bg:        #ffffff;
  --bg-2:      #f0f8ff;
  --bg-3:      #e8f4fd;
  --ham:       #374151;
  --nav-bg:    rgba(255,255,255,0.98);
  --nav-shadow:0 4px 20px rgba(3,105,161,0.1);
  --mob-bg:    rgba(255,255,255,0.99);
  --glass-bg:  #ffffff;
  --glass-bdr: rgba(3,105,161,0.15);
}

[data-theme="dark"] {
  --bg:        #020b18;
  --bg-2:      #041020;
  --bg-3:      #071830;
  --ham:       #ffffff;
  --nav-bg:    rgba(2,11,24,0.97);
  --nav-shadow:0 4px 30px rgba(0,0,0,0.4);
  --mob-bg:    rgba(4,16,32,0.99);
  --glass-bg:  rgba(255,255,255,0.03);
  --glass-bdr: rgba(56,189,248,0.12);
}

/* ==============================
   SHARED (both modes)
   ============================== */
.nav-bg {
  background: var(--nav-bg) !important;
  box-shadow: var(--nav-shadow) !important;
}
.glass {
  background: var(--glass-bg) !important;
  border-color: var(--glass-bdr) !important;
}
#mob-menu  { background: var(--mob-bg) !important; }
#hb1, #hb2, #hb3 { background: var(--ham) !important; }

/* Toggle button */
#theme-toggle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(3,105,161,0.3);
  background: rgba(3,105,161,0.1);
  color: #0369a1;
  cursor: pointer;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
  flex-shrink: 0;
}
[data-theme="dark"] #theme-toggle {
  border-color: rgba(56,189,248,0.3);
  background: rgba(56,189,248,0.08);
  color: #38bdf8;
}
#theme-toggle:hover { transform: scale(1.1); }

/* ==============================
   LIGHT MODE ONLY — everything below
   only applies when data-theme="light"
   ============================== */

/* Body */
[data-theme="light"] body {
  background: #ffffff !important;
  color: #1e2a4a !important;
}

/* Section backgrounds */
[data-theme="light"] #home {
  background:
    radial-gradient(ellipse at 0% 50%,rgba(3,105,161,0.1) 0%,transparent 55%),
    radial-gradient(ellipse at 100% 20%,rgba(6,182,212,0.07) 0%,transparent 50%),
    linear-gradient(160deg,#f0f8ff 0%,#e8f4fd 50%,#f0f8ff 100%) !important;
}
[data-theme="light"] #md-intro    { background: #f0f8ff !important; }
[data-theme="light"] #about       { background: #ffffff !important; }
[data-theme="light"] #services    { background: #f0f8ff !important; }
[data-theme="light"] #treatment   { background: #ffffff !important; }
[data-theme="light"] #equipment   { background: #f0f8ff !important; }
[data-theme="light"] #why-us {
  background:
    radial-gradient(ellipse at 0% 50%,rgba(3,105,161,0.08) 0%,transparent 55%),
    linear-gradient(160deg,#f0f8ff,#e8f4fd) !important;
}
[data-theme="light"] #faq         { background: #ffffff !important; }
[data-theme="light"] #contact     { background: #f0f8ff !important; }
[data-theme="light"] #testimonials{ background: #e8f4fd !important; }

/* Footer */
[data-theme="light"] footer {
  background: linear-gradient(160deg,#0369a1,#0284c7,#041e3a) !important;
  border-top: none !important;
}
[data-theme="light"] footer * { color: #ffffff !important; }
[data-theme="light"] footer div[style*="Fraunces"] {
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: #1e2a4a !important;
  color: #1e2a4a !important;
}

/* Stats strip */
[data-theme="light"] .stats-strip {
  background: linear-gradient(135deg,#0369a1,#0284c7,#06b6d4) !important;
}
[data-theme="light"] .stats-strip * { color: #ffffff !important; }

/* Top bar */
[data-theme="light"] .topbar {
  background: linear-gradient(90deg,#0369a1,#0284c7) !important;
}
[data-theme="light"] .topbar * { color: #ffffff !important; }

/* Grid lines */
[data-theme="light"] .grid-bg {
  background-image:
    linear-gradient(rgba(3,105,161,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(3,105,161,0.06) 1px, transparent 1px) !important;
}

/* All text dark */
[data-theme="light"] p,
[data-theme="light"] span,
[data-theme="light"] div,
[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] h4,
[data-theme="light"] li {
  color: #1e2a4a;
}

/* Inline rgba(255,255,255...) text */
[data-theme="light"] p[style*="rgba(255,255,255"],
[data-theme="light"] span[style*="rgba(255,255,255"],
[data-theme="light"] div[style*="rgba(255,255,255"] {
  color: rgba(30,42,74,0.65) !important;
}

/* Keep gradient text working */
[data-theme="light"] .text-blue-grad {
  background: linear-gradient(135deg,#38bdf8,#06b6d4,#67e8f9) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* Nav logo gradient */
[data-theme="light"] div[style*="linear-gradient(135deg,#38bdf8,#fff)"] {
  background: linear-gradient(135deg,#0369a1,#06b6d4) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* Sec tag */
[data-theme="light"] .sec-tag { color: #0369a1 !important; }

/* Nav links */
[data-theme="light"] .nav-bg a[class*="text-white"] { color: #4b5563 !important; }

/* Glass card headings */
[data-theme="light"] .glass h3,
[data-theme="light"] .glass h4 { color: #1e2a4a !important; }

/* FAQ */
[data-theme="light"] .faq-toggle span { color: #1e2a4a !important; }

/* Keep white text on colored bg elements */
[data-theme="light"] .btn-cyan,
[data-theme="light"] .btn-main,
[data-theme="light"] .cross-bg * { color: #ffffff !important; }

/* btn-outline */
[data-theme="light"] .btn-outline {
  color: #1e2a4a !important;
  border-color: rgba(30,42,74,0.35) !important;
}
[data-theme="light"] .btn-outline:hover {
  color: #0369a1 !important;
  border-color: #0369a1 !important;
}

/* CTA white button */
[data-theme="light"] a[style*="background:#fff"] {
  color: #0369a1 !important;
}
[data-theme="light"] a[style*="background:#fff"]:hover {
  color: #0369a1 !important;
  background: #f0f9ff !important;
}

/* Scrollbar */
[data-theme="light"] ::-webkit-scrollbar-track { background: #ffffff; }

/* Stats strip — labels black in light mode */
[data-theme="light"] .stats-strip .text-white\/40 {
  color: rgba(19, 17, 17, 0.8) !important;
}

/* Footer — Quick Links & Business Hours headings black */
[data-theme="light"] footer .sec-tag {
  color: #000 !important;
}

/* Stats numbers and labels */
[data-theme="light"] .stats-strip div,
[data-theme="light"] .stats-strip span {
  color: #000 !important;
}

/* Contact info links — black in light mode */
[data-theme="light"] #contact a[href^="tel"],
[data-theme="light"] #contact a[href^="mailto"] {
  color: #1e2a4a !important;
}

[data-theme="light"] section[style*="041020"],
[data-theme="light"] section[style*="071830"],
[data-theme="light"] section[style*="020b18"] {
  background: #f0f8ff !important;
}

[data-theme="light"] .glass-red a[href^="tel"] {
  color: #1e2a4a !important;
}

/* Book appointment form — inputs, labels, text dark in light mode */
[data-theme="light"] .form-input {
  background: #ffffff !important;
  border-color: rgba(3,105,161,0.25) !important;
  color: #1e2a4a !important;
}
[data-theme="light"] .form-input::placeholder { color: rgba(30,42,74,0.4) !important; }
[data-theme="light"] select.form-input option { background: #ffffff !important; color: #1e2a4a !important; }
[data-theme="light"] .form-label { color: rgba(30,42,74,0.6) !important; }
[data-theme="light"] .form-input:focus { border-color: rgba(3,105,161,0.5) !important; }

/* Sidebar contact links dark in light mode */
[data-theme="light"] .info-card a[href^="tel"],
[data-theme="light"] .info-card a[href^="mailto"] {
  color: #1e2a4a !important;
}


/* Gallery hero section background */
[data-theme="light"] .gallery-hero {
  background:
    radial-gradient(ellipse at 20% 60%,rgba(3,105,161,0.1) 0%,transparent 55%),
    radial-gradient(ellipse at 80% 20%,rgba(6,182,212,0.07) 0%,transparent 50%),
    linear-gradient(160deg,#f0f8ff 0%,#e8f4fd 40%,#f0f8ff 100%) !important;
}
[data-theme="light"] .gallery-hero::before {
  background-image:
    linear-gradient(rgba(3,105,161,0.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(3,105,161,0.06) 1px,transparent 1px) !important;
}

/* Gallery hero text */
[data-theme="light"] .gallery-hero p,
[data-theme="light"] .gallery-hero span,
[data-theme="light"] .gallery-hero div { color: #1e2a4a !important; }
[data-theme="light"] .gallery-hero h1 { color: #1e2a4a; }
[data-theme="light"] .scroll-indicator { border-color: rgba(3,105,161,0.3) !important; }

/* Filter buttons */
[data-theme="light"] .filter-btn {
  background: #ffffff !important;
  border-color: rgba(3,105,161,0.2) !important;
  color: #000 !important;
}
[data-theme="light"] .filter-btn:hover { color: #000 !important; }
[data-theme="light"] .filter-btn.active { color: #000 !important; }

/* Facility showcase section */
[data-theme="light"] section[style*="041020"] .facility-card div,
[data-theme="light"] section[style*="041020"] .facility-card p,
[data-theme="light"] section[style*="071830"] .facility-card div,
[data-theme="light"] section[style*="071830"] .facility-card p { color: #ffffff !important; }

/* Video section text */
[data-theme="light"] .video-card div,
[data-theme="light"] .video-card span { color: #ffffff !important; }


[data-theme="light"] .filter-tab:not(.active) {
  color: #000 !important;
  background: #ffffff !important;
  border-color: rgba(3,105,161,0.2) !important;
}
[data-theme="light"] .filter-tab.active {
  color: #000 !important;
}


[data-theme="light"] .social-link i {
  color: #000 !important;
}
[data-theme="light"] .social-link {
  background: #ffffff !important;
  border-color: rgba(3,105,161,0.2) !important;
}

/* Hero badge "World Class Medical Care" text */
[data-theme="light"] .hero-bg .inline-flex span {
  color: #000000 !important;
  font-weight: 700 !important;
}
/* "Emergency / Call Us" label */
[data-theme="light"] div[style*="rgba(255,255,255,0.4)"] {
  color: #000000 !important;
}

/* Emergency phone number */
[data-theme="light"] a[href^="tel"] {
  color: #000000 !important;
}

[data-theme="light"] #about .fade-left div[style*="bottom:-45px"] *,
[data-theme="light"] #about .fade-left div[style*="bottom:-45px"] {
  color: #1e2a4a !important;
}