/* ============================================================
   MaiMedic — Public Site Dark Theme
   Matches the patient portal dark aesthetic.
   Loaded via includes/header.php after styles.css.
   ============================================================ */

/* ── CSS variable overrides ──────────────────────────────── */
:root {
  --color-navy:       #E2E8F0;
  --color-body:       #E2E8F0;
  --color-muted:      rgba(226,232,240,0.55);
  --color-surface:    rgba(255,255,255,0.06);
  --color-white:      #07090F;
  --color-border:     rgba(255,255,255,0.09);
  --color-bg-blue:    #0A0C1A;
  --color-bg-mint:    rgba(45,212,191,0.08);
  --font-sans:        'DM Sans', 'Inter', system-ui, sans-serif;
  --font-display:     'DM Sans', 'Inter', system-ui, sans-serif;

  /* Keep brand accent colours the same */
  --color-teal:       #2DD4BF;
  --color-blue:       #60A5FA;
  --color-amber:      #FBB84B;
}

/* ── Base ────────────────────────────────────────────────── */
body {
  background: #07090F;
  color: #E2E8F0;
}

/* ── Navigation ──────────────────────────────────────────── */
.site-header {
  background: rgba(10,12,26,0.92) !important;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.site-header.nav--scrolled {
  box-shadow: 0 2px 32px rgba(0,0,0,0.4) !important;
}
.nav-logo__klar   { color: #E2E8F0 !important; }
.nav-logo__health { color: #2DD4BF !important; }
.nav-anchor {
  color: rgba(226,232,240,0.75) !important;
}
.nav-anchor:hover,
.nav-anchor:focus-visible {
  color: #E2E8F0 !important;
  background: rgba(255,255,255,0.06) !important;
}
.nav-anchor.nav-anchor--active,
.nav-anchor[aria-current="page"] {
  color: #2DD4BF !important;
}
.nav-drop-panel {
  background: #0C0F1D !important;
  border: 1px solid rgba(255,255,255,0.09) !important;
  box-shadow: 0 16px 48px rgba(0,0,0,0.5) !important;
}
.nav-drop-item {
  color: rgba(226,232,240,0.75) !important;
}
.nav-drop-item:hover {
  background: rgba(255,255,255,0.06) !important;
  color: #E2E8F0 !important;
}
.nav-mobile-panel {
  background: #0C0F1D !important;
  border-color: rgba(255,255,255,0.09) !important;
}

/* ── Language picker (public site) ───────────────────────── */
.lang-picker__btn {
  background: rgba(255,255,255,0.07) !important;
  color: #E2E8F0 !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
}
.lang-picker__btn:hover { background: rgba(255,255,255,0.12) !important; }
.lang-picker__panel {
  background: #0C0F1D !important;
  border: 1px solid rgba(255,255,255,0.09) !important;
  box-shadow: 0 16px 48px rgba(0,0,0,0.5) !important;
}
.lang-picker__option {
  color: rgba(226,232,240,0.75) !important;
}
.lang-picker__option:hover { background: rgba(255,255,255,0.06) !important; color: #E2E8F0 !important; }
.lang-picker__option--active { color: #2DD4BF !important; }
.lang-picker__group-label { color: rgba(226,232,240,0.35) !important; }

/* ── Buttons ─────────────────────────────────────────────── */
.btn-primary,
.btn-cta {
  background: #2DD4BF !important;
  color: #07090F !important;
  border-color: #2DD4BF !important;
}
.btn-primary:hover, .btn-cta:hover {
  background: #5EEAD4 !important;
  border-color: #5EEAD4 !important;
}
.btn-outline,
.btn-secondary {
  background: transparent !important;
  border-color: rgba(255,255,255,0.2) !important;
  color: #E2E8F0 !important;
}
.btn-outline:hover, .btn-secondary:hover {
  background: rgba(255,255,255,0.08) !important;
  border-color: rgba(255,255,255,0.35) !important;
}
.btn-navy {
  background: rgba(255,255,255,0.08) !important;
  color: #E2E8F0 !important;
}
.btn-navy:hover { background: rgba(255,255,255,0.14) !important; }

/* ── Hero section ────────────────────────────────────────── */
.hero {
  background: #0A0C1A !important;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  top: -100px; right: -100px;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(139,92,246,0.2) 0%, rgba(99,102,241,0.08) 50%, transparent 70%);
  pointer-events: none;
}
.hero::after {
  content: '';
  position: absolute;
  bottom: -80px; left: 10%;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(45,212,191,0.1) 0%, transparent 65%);
  pointer-events: none;
}
.hero-headline { color: #F1F5F9 !important; }
.hero-subheadline { color: rgba(226,232,240,0.7) !important; }
.hero-login-hint { color: rgba(226,232,240,0.55) !important; }
.hero-login-link { color: #2DD4BF !important; }
.hero-card {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.09) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}
.hero-card-item { color: rgba(226,232,240,0.8) !important; }
.hero-trust { color: rgba(226,232,240,0.45) !important; }

/* ── Content sections ────────────────────────────────────── */
section,
.section,
.content-section {
  background: transparent;
}
.section--light,
.section--bg,
.bg-surface,
[style*="background:var(--color-surface)"],
[style*="background-color:var(--color-surface)"] {
  background: rgba(255,255,255,0.03) !important;
}
.section--blue,
.bg-blue { background: rgba(96,165,250,0.08) !important; }
.section--mint,
.bg-mint { background: rgba(45,212,191,0.06) !important; }
.section--navy,
.bg-navy { background: #0C0F1D !important; }

/* ── Cards ───────────────────────────────────────────────── */
.card,
.feature-card,
.pricing-card,
.doctor-card,
.clinic-card,
.spec-card,
.step-card,
.trust-card,
.info-card,
.how-card,
.benefit-card {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.09) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}
.card:hover,
.feature-card:hover,
.pricing-card:hover,
.doctor-card:hover {
  border-color: rgba(45,212,191,0.3) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3) !important;
}

/* ── Typography ──────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 { color: #F1F5F9; }
p, li { color: rgba(226,232,240,0.75); }
.text-muted,
.text-secondary { color: rgba(226,232,240,0.5) !important; }
a:not([class]) { color: #2DD4BF; }
a:not([class]):hover { color: #5EEAD4; }
.section-label,
.eyebrow,
.label-text { color: #2DD4BF !important; }

/* ── Forms (find doctors etc) ────────────────────────────── */
input[type="text"],
input[type="email"],
input[type="search"],
input[type="tel"],
input[type="url"],
select,
textarea {
  background: rgba(255,255,255,0.07) !important;
  border-color: rgba(255,255,255,0.13) !important;
  color: #E2E8F0 !important;
}
input::placeholder,
textarea::placeholder { color: rgba(226,232,240,0.4) !important; }
input:focus,
select:focus,
textarea:focus {
  border-color: #2DD4BF !important;
  box-shadow: 0 0 0 3px rgba(45,212,191,0.2) !important;
  outline: none;
}
label { color: #E2E8F0 !important; }

/* ── Auth / Login page ───────────────────────────────────── */
.auth-page {
  background: #07090F !important;
  position: relative;
  overflow: hidden;
}
.auth-page::before {
  content: '';
  position: fixed;
  top: -120px; right: -120px;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(139,92,246,0.2) 0%, rgba(99,102,241,0.08) 50%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.auth-page::after {
  content: '';
  position: fixed;
  bottom: -80px; left: 5%;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(45,212,191,0.1) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}
.auth-wrap { position: relative; z-index: 1; }
.auth-card {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  box-shadow: 0 24px 80px rgba(0,0,0,0.5) !important;
}
.auth-logo .logo-klar  { color: #E2E8F0 !important; }
.auth-logo .logo-health { color: #2DD4BF !important; }
.auth-title  { color: #F1F5F9 !important; }
.auth-subtitle { color: rgba(226,232,240,0.6) !important; }

/* ── Footer ─────────────────────────────────────────────── */
.site-footer,
footer {
  background: #0A0C1A !important;
  border-top: 1px solid rgba(255,255,255,0.07) !important;
  color: rgba(226,232,240,0.6) !important;
}
.footer-logo-klar   { color: #E2E8F0 !important; }
.footer-logo-health { color: #2DD4BF !important; }
.footer-link,
.footer-nav a {
  color: rgba(226,232,240,0.55) !important;
}
.footer-link:hover,
.footer-nav a:hover { color: #2DD4BF !important; }
.footer-section-title,
.footer-col-title { color: #E2E8F0 !important; }
.footer-copyright { color: rgba(226,232,240,0.35) !important; }
.footer-lang-picker__btn {
  background: rgba(255,255,255,0.07) !important;
  color: #E2E8F0 !important;
}

/* ── Badges / pills on public pages ──────────────────────── */
.badge,
.tag,
.pill {
  background: rgba(255,255,255,0.08) !important;
  color: rgba(226,232,240,0.8) !important;
}
.badge--teal,
.tag--teal { background: rgba(45,212,191,0.15) !important; color: #2DD4BF !important; }
.badge--blue { background: rgba(96,165,250,0.15) !important; color: #60A5FA !important; }

/* ── Doctor / clinic cards ───────────────────────────────── */
.doctor-avatar,
.clinic-avatar { background: rgba(45,212,191,0.12) !important; color: #2DD4BF !important; }
.doctor-name,
.clinic-name   { color: #F1F5F9 !important; }
.doctor-spec,
.clinic-city   { color: rgba(226,232,240,0.6) !important; }

/* ── Pricing ─────────────────────────────────────────────── */
.pricing-card--featured {
  background: rgba(45,212,191,0.08) !important;
  border-color: rgba(45,212,191,0.3) !important;
}
.pricing-price { color: #F1F5F9 !important; }
.pricing-feature { color: rgba(226,232,240,0.7) !important; }

/* ── Dividers ────────────────────────────────────────────── */
hr { border-color: rgba(255,255,255,0.07) !important; }

/* ── Blog / article ──────────────────────────────────────── */
.blog-card,
.article-card { color: rgba(226,232,240,0.75) !important; }
.blog-card h2, .blog-card h3 { color: #F1F5F9 !important; }

/* ── Alerts on public pages ──────────────────────────────── */
.alert,
.notice { background: rgba(96,165,250,0.1) !important; border-color: rgba(96,165,250,0.2) !important; color: #BAE6FD !important; }
.alert--success { background: rgba(52,211,153,0.1) !important; border-color: rgba(52,211,153,0.2) !important; color: #A7F3D0 !important; }
.alert--error   { background: rgba(248,113,113,0.1) !important; border-color: rgba(248,113,113,0.2) !important; color: #FECACA !important; }
.alert--warning { background: rgba(251,184,75,0.1) !important;  border-color: rgba(251,184,75,0.2) !important;  color: #FDE68A !important; }

/* ── Inline styles common on public pages ────────────────── */
[style*="background:#fff"],
[style*="background: #fff"],
[style*="background:#ffffff"],
[style*="background:#FFFFFF"],
[style*="background-color:#fff"],
[style*="background-color: #fff"] {
  background: rgba(255,255,255,0.05) !important;
}
[style*="background:#f8fafc"],
[style*="background:#F8FAFC"],
[style*="background:#f1f5f9"],
[style*="background:#F1F5F9"] {
  background: rgba(255,255,255,0.03) !important;
}
[style*="color:#0D2340"],
[style*="color:#0d2340"],
[style*="color:#1A2840"],
[style*="color:#334155"],
[style*="color:#374151"] {
  color: #E2E8F0 !important;
}

/* ── Scrollbar ───────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.25); }

/* ── Direct hero text overrides (specificity fix) ─────── */
.hero-headline,
h1.hero-headline,
#hero-heading {
  color: #F1F5F9 !important;
  text-shadow: none !important;
}
.hero-subheadline { color: rgba(226,232,240,0.72) !important; }
.hero-login-hint  { color: rgba(226,232,240,0.5) !important; }

/* ── Reveal hero image / right side ────────────────────── */
.hero-visual,
.hero-image,
.hero-img,
.hero-right { opacity: 1; }

/* ── Hide code label, show only emoji flag ─────────────── */
.lang-picker__code { display: none !important; }
.footer-lang-picker__code { display: none !important; }
.lang-picker__flag { font-size: 1.2rem; line-height: 1; }

/* ── Section headings across all pages ──────────────────── */
.section-title,
.section-headline,
.feature-title,
.step-title,
.pricing-name,
.pricing-headline { color: #F1F5F9 !important; }

/* ── Nav logo text ──────────────────────────────────────── */
.nav-logo__klar  { color: #E2E8F0 !important; }
.nav-logo__health { color: #2DD4BF !important; }