/* ═══════════════════════════════════════════════════════════════
   MADHAVI NETRALAYA — THEME (light / dark + system via data-theme)
   Load after style.css; overrides inline :root via higher specificity.
═══════════════════════════════════════════════════════════════ */

html {
  color-scheme: light;
  --surface: #ffffff;
  --surface-elevated: #ffffff;
  --surface-muted: #f7fafa;
  --surface-card: #ffffff;
  --text-primary: #0f1f1f;
  --text-secondary: #4a5c5c;
  --text-muted: #7a9090;
  --header-bg: #ffffff;
  --footer-bg: #0f1f1f;
  --input-bg: #ffffff;
  --input-border: rgba(0, 122, 122, 0.22);
  --overlay: rgba(15, 31, 31, 0.55);
}

html[data-theme='dark'] {
  color-scheme: dark;
  --white: #141f1f;
  --off-white: #0c1414;
  --ink: #e6f0f0;
  --mid: #a8bcbc;
  --muted: #7a9494;
  --border: rgba(0, 200, 200, 0.2);
  --teal-pale: rgba(0, 160, 160, 0.14);
  --teal-glow: rgba(0, 200, 200, 0.1);
  --gold-pale: rgba(184, 150, 78, 0.12);
  --teal: #00b8b8;
  --teal-mid: #00d4d4;
  --teal-dark: #041414;
  --shadow-sm: 0 2px 16px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 8px 40px rgba(0, 0, 0, 0.45);
  --shadow-teal: 0 8px 32px rgba(0, 180, 180, 0.12);
  --surface: #0c1414;
  --surface-elevated: #141f1f;
  --surface-muted: #101a1a;
  --surface-card: #141f1f;
  --text-primary: #e6f0f0;
  --text-secondary: #a8bcbc;
  --text-muted: #7a9494;
  --header-bg: #141f1f;
  --footer-bg: #060c0c;
  --input-bg: #1a2626;
  --input-border: rgba(0, 200, 200, 0.25);
  --overlay: rgba(0, 0, 0, 0.65);
}

html[data-theme='light'] {
  color-scheme: light;
  --white: #ffffff;
  --off-white: #f7fafa;
  --ink: #0f1f1f;
  --mid: #4a5c5c;
  --muted: #7a9090;
  --border: rgba(0, 122, 122, 0.14);
  --teal-pale: #e8f4f4;
  --teal-glow: rgba(0, 122, 122, 0.12);
  --gold-pale: #fdf6ec;
  --teal: #007a7a;
  --teal-mid: #005f5f;
  --teal-dark: #003d3d;
  --shadow-sm: 0 2px 16px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 8px 40px rgba(0, 0, 0, 0.1);
  --shadow-teal: 0 8px 32px rgba(0, 122, 122, 0.2);
  --surface: #ffffff;
  --surface-elevated: #ffffff;
  --surface-muted: #f7fafa;
  --surface-card: #ffffff;
  --text-primary: #0f1f1f;
  --text-secondary: #4a5c5c;
  --text-muted: #7a9090;
  --header-bg: #ffffff;
  --footer-bg: #0f1f1f;
  --input-bg: #ffffff;
  --input-border: rgba(0, 122, 122, 0.22);
  --overlay: rgba(15, 31, 31, 0.55);
}

body {
  background: var(--surface);
  color: var(--ink);
}

/* ── Theme toggle button ─────────────────────────────────────── */
.mn-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 999px;
  border: 1.5px solid rgba(0, 122, 122, 0.28);
  background: #e8f4f4;
  color: #003d3d;
  cursor: pointer;
  flex-shrink: 0;
  line-height: 0;
  vertical-align: middle;
  transition:
    background 0.18s,
    border-color 0.18s,
    color 0.18s,
    transform 0.15s,
    box-shadow 0.18s;
}

html[data-theme='dark'] .mn-theme-toggle {
  background: rgba(0, 200, 200, 0.14);
  border-color: rgba(0, 220, 220, 0.45);
  color: #e8f8f8;
  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.35);
}

.mn-theme-toggle:hover {
  transform: translateY(-1px);
}

html[data-theme='light'] .mn-theme-toggle:hover {
  background: #d4ecec;
  border-color: rgba(0, 122, 122, 0.45);
}

html[data-theme='dark'] .mn-theme-toggle:hover {
  background: rgba(0, 220, 220, 0.22);
  border-color: rgba(0, 240, 240, 0.55);
}

.mn-theme-toggle:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

.mn-theme-toggle svg {
  width: 18px;
  height: 18px;
  display: block;
  flex-shrink: 0;
  pointer-events: none;
  transition: transform 0.25s ease;
}

.mn-theme-toggle .mn-theme-icon-moon {
  fill: currentColor;
}

.mn-theme-toggle .mn-theme-icon-sun {
  fill: none !important;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mn-theme-toggle--dark svg {
  transform: rotate(-12deg);
}

.mn-theme-toggle .mn-theme-icon-sun,
.mn-theme-toggle .mn-theme-icon-moon {
  display: none;
}

.mn-theme-toggle:not(.mn-theme-toggle--dark) .mn-theme-icon-moon {
  display: block;
}

.mn-theme-toggle.mn-theme-toggle--dark .mn-theme-icon-sun {
  display: block;
}

.header-actions .mn-theme-toggle,
.mn-mobile-header-tools .mn-theme-toggle {
  align-self: center;
}

.mn-mobile-header-tools .mn-theme-toggle {
  width: 38px;
  height: 38px;
}

/* ── Header / nav ──────────────────────────────────────────── */
html[data-theme='dark'] .promise-strip,
html[data-theme='dark'] .mn-social-proof,
html[data-theme='dark'] .home-faq {
  background: var(--surface-muted) !important;
}

html[data-theme='dark'] .site-header {
  background: var(--header-bg) !important;
  border-bottom-color: var(--border) !important;
  box-shadow: 0 1px 20px rgba(0, 0, 0, 0.35) !important;
  color: var(--ink);
}

html[data-theme='dark'] .util-bar {
  background: var(--teal-dark) !important;
}

html[data-theme='dark'] .section-title,
html[data-theme='dark'] .section-lead,
html[data-theme='dark'] .why-title,
html[data-theme='dark'] .why-body,
html[data-theme='dark'] .spec-title,
html[data-theme='dark'] .spec-desc,
html[data-theme='dark'] .mn-faq-title,
html[data-theme='dark'] .mn-faq-lead {
  color: inherit;
}

html[data-theme='dark'] .mn-faq-item summary,
html[data-theme='dark'] .mn-faq-item .mn-faq-a {
  color: var(--text-secondary);
}

html[data-theme='dark'] .mn-faq-item summary {
  color: var(--text-primary);
}

html[data-theme='dark'] .site-footer,
html[data-theme='dark'] footer {
  background: var(--footer-bg) !important;
}
html[data-theme='dark'] .nav-link,
html[data-theme='dark'] .nav-item > .nav-link {
  color: var(--text-secondary) !important;
}

html[data-theme='dark'] .nav-link:hover,
html[data-theme='dark'] .nav-item:hover .nav-link,
html[data-theme='dark'] .nav-link.active {
  background: var(--teal-pale);
  color: var(--teal) !important;
}
html[data-theme='dark'] .dropdown {
  background: var(--surface-elevated) !important;
  border-color: var(--border) !important;
  box-shadow: var(--shadow-md) !important;
}
html[data-theme='dark'] .dropdown a:hover {
  background: var(--teal-pale) !important;
}
html[data-theme='dark'] .mn-lang-seg {
  background: rgba(0, 200, 200, 0.1);
  border-color: rgba(0, 200, 200, 0.28);
}

html[data-theme='dark'] .mn-lang-opt {
  color: rgba(232, 248, 248, 0.75);
}

html[data-theme='dark'] body.lang-hi .mn-lang-opt[data-lang-target='hi'],
html[data-theme='dark'] body:not(.lang-hi) .mn-lang-opt[data-lang-target='en'] {
  background: rgba(255, 255, 255, 0.95);
  color: #003d3d;
}

/* Homepage hero — keep dark canvas (var(--ink) flips light in dark theme) */
html[data-theme='dark'] .hero {
  background: linear-gradient(135deg, #041414 0%, #0f1f1f 52%, #0a2828 100%) !important;
}

html[data-theme='dark'] .hero-headline,
html[data-theme='dark'] .hero-headline strong {
  color: #e6f0f0 !important;
}

html[data-theme='dark'] .hero-sub {
  color: rgba(255, 255, 255, 0.62) !important;
}

html[data-theme='dark'] .stat-label {
  color: rgba(255, 255, 255, 0.48) !important;
}

html[data-theme='dark'] .btn-hero-ghost {
  color: rgba(255, 255, 255, 0.78) !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
}

html[data-theme='dark'] .hero-stats {
  border-top-color: rgba(255, 255, 255, 0.1) !important;
}

html[data-theme='dark'] .hero-stat {
  border-right-color: rgba(255, 255, 255, 0.1) !important;
}
html[data-theme='dark'] .breadcrumb {
  background: var(--surface-muted) !important;
  border-bottom-color: var(--border) !important;
}

/* ── Cards & sections (homepage + about) ───────────────────── */
html[data-theme='dark'] .why-card,
html[data-theme='dark'] .spec-card,
html[data-theme='dark'] .tech-card,
html[data-theme='dark'] .doctor-card,
html[data-theme='dark'] .dr-card,
html[data-theme='dark'] .feed-card,
html[data-theme='dark'] .faq-item,
html[data-theme='dark'] .tl-card,
html[data-theme='dark'] .doctor-profile-aside-card,
html[data-theme='dark'] .booking-card,
html[data-theme='dark'] .policy-card,
html[data-theme='dark'] .contact-card,
html[data-theme='dark'] .mn-announcement-card,
html[data-theme='dark'] .swiper-slide .ann-card,
html[data-theme='dark'] [class*='-card']:not(.mf-card):not(.pp-pill):not(.chip) {
  background: var(--surface-card) !important;
  border-color: var(--border) !important;
}

html[data-theme='dark'] .why-section,
html[data-theme='dark'] .spec-section,
html[data-theme='dark'] .tech-section,
html[data-theme='dark'] .doctors-section,
html[data-theme='dark'] .story-section,
html[data-theme='dark'] .tech-overview,
html[data-theme='dark'] .doctors-section,
html[data-theme='dark'] .doctor-profile-hero,
html[data-theme='dark'] .page-content,
html[data-theme='dark'] .legal-body {
  background: var(--surface-muted) !important;
}

html[data-theme='dark'] .mn-media-hub,
html[data-theme='dark'] .promise-strip {
  background: var(--surface) !important;
}

html[data-theme='dark'] .section-title,
html[data-theme='dark'] .st,
html[data-theme='dark'] .dc-name,
html[data-theme='dark'] .dr-name,
html[data-theme='dark'] h1,
html[data-theme='dark'] h2,
html[data-theme='dark'] h3 {
  color: var(--ink);
}

html[data-theme='dark'] .section-lead,
html[data-theme='dark'] .sl,
html[data-theme='dark'] .why-body,
html[data-theme='dark'] .dr-bio,
html[data-theme='dark'] .dc-bio,
html[data-theme='dark'] p {
  color: var(--mid);
}

/* Hardcoded white backgrounds in inline page CSS */
html[data-theme='dark'] .site-header,
html[data-theme='dark'] body {
  background: var(--surface);
}

html[data-theme='dark'] .why-card,
html[data-theme='dark'] .spec-inner,
html[data-theme='dark'] .tech-item,
html[data-theme='dark'] .doctor-card,
html[data-theme='dark'] .manifesto-card,
html[data-theme='dark'] .faq-section,
html[data-theme='dark'] .home-faq {
  background-color: var(--surface-card) !important;
}

html[data-theme='dark'] section[style*='background:white'],
html[data-theme='dark'] section[style*='background: white'],
html[data-theme='dark'] div[style*='background:white'],
html[data-theme='dark'] div[style*='background: white'] {
  background: var(--surface-card) !important;
}

/* Specialty page light sections */
html[data-theme='dark'] .content-section,
html[data-theme='dark'] .info-section,
html[data-theme='dark'] .process-section,
html[data-theme='dark'] .lens-section,
html[data-theme='dark'] .compare-section,
html[data-theme='dark'] .faq-section,
html[data-theme='dark'] .tech-section-light {
  background: var(--surface-muted) !important;
}

html[data-theme='dark'] .step-card,
html[data-theme='dark'] .lens-card,
html[data-theme='dark'] .compare-col,
html[data-theme='dark'] .faq-item,
html[data-theme='dark'] .info-box {
  background: var(--surface-card) !important;
  border-color: var(--border) !important;
}

/* Forms */
html[data-theme='dark'] input,
html[data-theme='dark'] select,
html[data-theme='dark'] textarea {
  background: var(--input-bg);
  color: var(--ink);
  border-color: var(--input-border);
}
html[data-theme='dark'] input::placeholder,
html[data-theme='dark'] textarea::placeholder {
  color: var(--muted);
}

/* Mobile nav drawer */
html[data-theme='dark'] #mobile-nav,
html[data-theme='dark'] .mobile-nav-panel {
  background: var(--surface-elevated) !important;
  color: var(--ink);
}
html[data-theme='dark'] .mobile-nav-panel a {
  color: var(--mid);
  border-color: var(--border);
}
html[data-theme='dark'] .mobile-nav-panel a:hover,
html[data-theme='dark'] .mobile-nav-panel a.active {
  background: var(--teal-pale);
  color: var(--teal);
}

/* Chat widget */
html[data-theme='dark'] #mn-chat-widget {
  background: var(--surface-elevated) !important;
  border-color: var(--border) !important;
  box-shadow: 0 16px 64px rgba(0, 0, 0, 0.5) !important;
}
html[data-theme='dark'] .mn-messages {
  background: var(--surface-muted) !important;
}
html[data-theme='dark'] .mn-msg-bot {
  background: var(--surface-card) !important;
  color: var(--ink) !important;
}
html[data-theme='dark'] .mn-input {
  background: var(--input-bg) !important;
  color: var(--ink) !important;
  border-color: var(--input-border) !important;
}
html[data-theme='dark'] .mn-char-count {
  color: var(--muted) !important;
}

/* Logo — slight brighten on dark */
html[data-theme='dark'] .site-logo-img {
  filter: brightness(1.05);
}

/* Scroll-to-top */
html[data-theme='dark'] .mn-to-top {
  background: var(--surface-elevated);
  color: var(--teal);
  border-color: var(--border);
}

/* Booking inline widget */
html[data-theme='dark'] .booking-embed-wrap,
html[data-theme='dark'] .zoho-embed-wrap {
  background: var(--surface-raised, #152828);
  border-color: rgba(0, 180, 180, 0.18);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}

html[data-theme='dark'] .booking-embed-loading {
  background: linear-gradient(180deg, rgba(0, 122, 122, 0.12) 0%, var(--surface-raised, #152828) 55%);
  color: rgba(255, 255, 255, 0.65);
}

html[data-theme='dark'] .booking-embed-error {
  background: rgba(192, 57, 43, 0.12);
  border-color: rgba(192, 57, 43, 0.35);
  color: #f5b7b1;
}

html[data-theme='dark'] .booking-page-fallback {
  color: rgba(255, 255, 255, 0.5);
}

html[data-theme='dark'] .booking-page-fallback a {
  color: #7ee0e0;
}

html[data-theme='dark'] .booking-page {
  background: var(--surface-base, #0a1515);
}

html[data-theme='dark'] .booking-page h1 {
  color: var(--text-primary, #f0fafa);
}

html[data-theme='dark'] .booking-page-lead {
  color: rgba(255, 255, 255, 0.62);
}

/* Swiper announcements */
html[data-theme='dark'] .mn-pub-card {
  background: var(--surface-muted) !important;
  border-color: var(--border) !important;
}
html[data-theme='dark'] .mn-pub-card:hover {
  background: var(--surface-card) !important;
}
html[data-theme='dark'] .feed-card-pubmed-footer {
  background: var(--surface-card) !important;
}

/* Doctor profile */
html[data-theme='dark'] .doctor-profile-spec-list a {
  background: var(--surface-card);
  border-color: var(--border);
}
html[data-theme='dark'] .doctor-profile-quote {
  background: var(--gold-pale);
  border-left-color: var(--gold);
}

/* Legal / policy pages */
html[data-theme='dark'] .legal-body {
  background: var(--surface) !important;
}
html[data-theme='dark'] .legal-hero {
  background: linear-gradient(135deg, var(--teal-dark), var(--teal-mid)) !important;
}
html[data-theme='dark'] .site-header.legal-header,
html[data-theme='dark'] header.site-header {
  background: var(--header-bg) !important;
}
html[data-theme='dark'] .highlight-box,
html[data-theme='dark'] .info {
  background: var(--teal-pale) !important;
}
html[data-theme='dark'] .highlight-box p,
html[data-theme='dark'] .info p {
  color: var(--teal) !important;
}

/* Minimal legal header — theme toggle inline */
.legal-header-tools {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
@media (max-width: 767px) {
  .legal-hero {
    padding: 40px 20px 32px !important;
  }
  .legal-body {
    padding: 40px 20px 64px !important;
  }
  .site-header {
    padding: 0 16px !important;
  }
}

/* Specialty pages — doctor / process cards */
html[data-theme='dark'] .dr-section {
  background: var(--surface-muted) !important;
}
html[data-theme='dark'] .dr-card,
html[data-theme='dark'] .dr-photo-panel {
  background: var(--surface-card) !important;
  border-color: var(--border) !important;
}

/* ── Specialty page heroes (cataract, glaucoma, retina, etc.) ──
   Inline CSS uses var(--ink) for .page-hero bg and ::after fade — in dark
   theme --ink becomes a light text colour, which breaks contrast and the
   image edge gradient. Keep heroes theme-aware with fixed canvas colours. */

html[data-theme='light'] .page-hero {
  background: linear-gradient(180deg, #f7fafa 0%, #eef6f6 100%) !important;
}

html[data-theme='light'] .page-hero .hero-headline,
html[data-theme='light'] .page-hero .hero-headline strong {
  color: var(--ink) !important;
}

html[data-theme='light'] .page-hero .hero-headline em {
  color: var(--muted) !important;
}

html[data-theme='light'] .page-hero .hero-sub {
  color: var(--mid) !important;
}

html[data-theme='light'] .page-hero .btn-ghost {
  color: var(--teal-mid) !important;
  border-color: rgba(0, 95, 95, 0.35) !important;
}

html[data-theme='light'] .page-hero .btn-ghost:hover {
  color: var(--teal-dark) !important;
  border-color: var(--teal) !important;
}

html[data-theme='light'] .page-hero .chip {
  background: rgba(0, 122, 122, 0.08) !important;
  border-color: rgba(0, 122, 122, 0.16) !important;
  color: var(--mid) !important;
}

html[data-theme='light'] .page-hero .hero-right::after {
  background: linear-gradient(to right, #f0f8f8, transparent) !important;
  width: 48px !important;
}

html[data-theme='dark'] .page-hero {
  background: linear-gradient(135deg, #041414 0%, #0f1f1f 52%, #0a2828 100%) !important;
}

html[data-theme='dark'] .page-hero .hero-left {
  background: transparent;
}

html[data-theme='dark'] .page-hero .hero-headline,
html[data-theme='dark'] .page-hero .hero-headline strong {
  color: #e6f0f0 !important;
}

html[data-theme='dark'] .page-hero .hero-headline em {
  color: rgba(255, 255, 255, 0.45) !important;
}

html[data-theme='dark'] .page-hero .hero-sub {
  color: rgba(255, 255, 255, 0.62) !important;
}

html[data-theme='dark'] .page-hero .btn-ghost {
  color: rgba(255, 255, 255, 0.78) !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
}

html[data-theme='dark'] .page-hero .chip {
  background: rgba(255, 255, 255, 0.07) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: rgba(255, 255, 255, 0.65) !important;
}

html[data-theme='dark'] .page-hero .hero-right::after {
  background: linear-gradient(to right, #0f1f1f, transparent) !important;
  width: 48px !important;
}

/* Dry eye banner — keep teal gradient in both themes */
html[data-theme='light'] .page-banner {
  background: linear-gradient(135deg, #003d3d 0%, #005f5f 60%, #007a7a 100%) !important;
}

html[data-theme='dark'] .cta-section {
  /* keep gradient CTAs readable */
  background: linear-gradient(135deg, var(--teal-dark), var(--teal-mid)) !important;
}

/* Swiper / announcement slider */
html[data-theme='dark'] .swiper-pagination-bullet {
  background: var(--muted);
}
html[data-theme='dark'] .swiper-pagination-bullet-active {
  background: var(--teal);
}

/* Feedback form */
html[data-theme='dark'] .feedback-form,
html[data-theme='dark'] .form-section {
  background: var(--surface-card) !important;
}

/* 404 */
html[data-theme='dark'] .error-page {
  background: var(--surface) !important;
  color: var(--ink);
}

@media (prefers-reduced-motion: reduce) {
  .mn-theme-toggle svg {
    transition: none;
  }
}