/* ============================================================
   Phi Mine — Public Site Dark Theme  v2.0
   Premium dark healthcare aesthetic: deep navy, teal accents,
   glassmorphism cards. Loaded after styles.css on every page.
   ============================================================ */

/* ── 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:      #0C0F1D;        /* used for card/box BGs → dark */
  --color-border:     rgba(255,255,255,0.09);
  --color-bg-blue:    #0A0C1A;
  --color-bg-mint:    rgba(45,212,191,0.08);
  --color-teal:       #2DD4BF;
  --color-blue:       #60A5FA;
  --color-amber:      #FBB84B;
  --font-sans:        'DM Sans', 'Inter', system-ui, sans-serif;
  --font-display:     'DM Sans', 'Inter', system-ui, sans-serif;
}

/* ── Base — force dark on every surface ─────────────────── */
html,
body {
  background: #07090F !important;
  color: #E2E8F0 !important;
}

/* ALL sections / layout wrappers default to dark */
main, section, .section, .section--alt, .section--light,
.content-wrap, .page-wrap, .container-fluid {
  background: #07090F !important;
}

/* Accent section variants */
.section--blue, .bg-blue, .section--alt { background: #0A0C1A !important; }
.section--mint, .bg-mint              { background: rgba(45,212,191,0.04) !important; }
.section--navy, .bg-navy              { background: #0C0F1D !important; }
.section--dark, .bg-dark              { background: #07090F !important; }

/* ── Typography — ensure all text is readable ────────────── */
h1, h2, h3, h4, h5, h6 { color: #F1F5F9 !important; }
p                        { color: rgba(226,232,240,0.78); }
li                       { color: rgba(226,232,240,0.75); }
strong                   { color: #F1F5F9; }
.text-muted,
.text-secondary,
.text-grey  { 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; }

/* ── Navigation ──────────────────────────────────────────── */
.site-header {
  background: rgba(7,9,15,0.95) !important;
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.site-header.nav--scrolled {
  box-shadow: 0 2px 32px rgba(0,0,0,0.5) !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 20px 60px rgba(0,0,0,0.6) !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;
}
.nav-mobile-panel h3,
.nav-mobile-panel p { color: #E2E8F0 !important; }
.nav-burger span { background: #E2E8F0 !important; }

/* ── Language picker ─────────────────────────────────────── */
.lang-picker__btn {
  background: rgba(255,255,255,0.08) !important;
  color: #E2E8F0 !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
}
.lang-picker__btn:hover { background: rgba(255,255,255,0.13) !important; }
.lang-picker__code { color: #E2E8F0 !important; }
.lang-picker__panel {
  background: #0C0F1D !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6) !important;
}
.lang-picker__option { color: rgba(226,232,240,0.78) !important; }
.lang-picker__option:hover {
  background: rgba(255,255,255,0.07) !important;
  color: #E2E8F0 !important;
}
.lang-picker__option--active { color: #2DD4BF !important; }
.lang-picker__group-label    { color: rgba(226,232,240,0.35) !important; }
.lang-picker__btn .fi, .lang-picker__flag {
  border-radius: 2px;
  flex-shrink: 0;
}
.footer-lang-picker__btn {
  background: rgba(255,255,255,0.07) !important;
  color: #E2E8F0 !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.22) !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.4) !important;
}
.btn-navy {
  background: rgba(255,255,255,0.09) !important;
  color: #E2E8F0 !important;
}
.btn-navy:hover { background: rgba(255,255,255,0.15) !important; }

/* ── Hero (homepage) ─────────────────────────────────────── */
.hero {
  background: linear-gradient(135deg, #07090F 0%, #0A0C1A 60%, #0D1040 100%) !important;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  top: -120px; right: -120px;
  width: 560px; height: 560px;
  background: radial-gradient(circle, rgba(139,92,246,0.22) 0%, rgba(99,102,241,0.08) 50%, transparent 70%);
  pointer-events: none;
}
.hero::after {
  content: '';
  position: absolute;
  bottom: -80px; left: 8%;
  width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(45,212,191,0.12) 0%, transparent 65%);
  pointer-events: none;
}
/* Hero text — must use !important to beat .hero-headline { color: var(--color-navy) } */
.hero-headline,
h1.hero-headline,
#hero-heading,
.hero-content h1,
.hero-content h2 { color: #F1F5F9 !important; text-shadow: none !important; }
.hero-subheadline,
.hero-content p  { color: rgba(226,232,240,0.75) !important; }
.hero-login-hint { color: rgba(226,232,240,0.5) !important; }
.hero-login-link { color: #2DD4BF !important; }
.hero-trust      { color: rgba(226,232,240,0.45) !important; }
.hero-card {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}
.hero-card-item  { color: rgba(226,232,240,0.82) !important; }
.hero-check-icon { color: #2DD4BF !important; }
.hero-visual, .hero-image, .hero-img, .hero-right { opacity: 1; }

/* ── Page hero (find-doctors etc) ───────────────────────── */
.page-hero {
  background: linear-gradient(135deg, #0A0C1A 0%, #0D1B3E 100%) !important;
}
.page-hero h1,
.page-hero h2,
.page-hero h3 { color: #F1F5F9 !important; }
.page-hero p  { color: rgba(226,232,240,0.78) !important; }

/* ── Find Doctors / Clinics search page ─────────────────── */
.search-section {
  background: #07090F !important;
}
.search-bar {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 4px 32px rgba(0,0,0,0.4) !important;
}
.search-input {
  background: rgba(255,255,255,0.07) !important;
  border-color: rgba(255,255,255,0.12) !important;
  color: #E2E8F0 !important;
}
.search-input:focus {
  background: rgba(255,255,255,0.1) !important;
  border-color: #2DD4BF !important;
}
.search-input::placeholder { color: rgba(226,232,240,0.4) !important; }
.search-input-wrap svg     { color: rgba(226,232,240,0.4) !important; }
.results-layout, .results-main { background: #07090F !important; }
.results-count  { color: rgba(226,232,240,0.55) !important; }
.results-sidebar .card { background: rgba(255,255,255,0.05) !important; }

/* Doctor cards in listing */
.doctor-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;
  color: #E2E8F0 !important;
}
.doctor-card:hover {
  border-color: rgba(45,212,191,0.35) !important;
  box-shadow: 0 8px 40px rgba(0,0,0,0.35) !important;
  transform: translateY(-2px);
}
.doctor-card-name a { color: #F1F5F9 !important; text-decoration: none; }
.doctor-card-name a:hover { color: #2DD4BF !important; }
.doctor-card-spec  { color: rgba(226,232,240,0.6) !important; }
.doctor-card-meta  { color: rgba(226,232,240,0.5) !important; }
.doctor-card-meta span { color: rgba(226,232,240,0.55) !important; }
.doctor-card-actions a { color: #2DD4BF !important; }
.doctor-avatar {
  background: rgba(45,212,191,0.14) !important;
  color: #2DD4BF !important;
}
.doctor-rating { color: #FBB84B !important; }
.accepting-badge {
  background: rgba(52,211,153,0.15) !important;
  color: #34D399 !important;
}

/* Clinic cards */
.clinic-card {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.09) !important;
  backdrop-filter: blur(10px) !important;
  color: #E2E8F0 !important;
}
.clinic-card:hover {
  border-color: rgba(45,212,191,0.35) !important;
  box-shadow: 0 8px 40px rgba(0,0,0,0.35) !important;
}
.clinic-name a { color: #F1F5F9 !important; }
.clinic-avatar { background: rgba(45,212,191,0.14) !important; color: #2DD4BF !important; }

/* Filter sidebar */
.filter-sidebar,
.results-sidebar {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 12px;
  padding: 16px;
}
.filter-sidebar h3,
.filter-sidebar label { color: #E2E8F0 !important; }
.filter-group-title    { color: rgba(226,232,240,0.6) !important; }

/* ── General cards & content blocks ─────────────────────── */
.card,
.feature-card,
.pricing-card,
.spec-card,
.step-card,
.trust-card,
.info-card,
.how-card,
.benefit-card,
.service-card,
.why-card,
.team-card,
.review-card,
.stat-card,
.news-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;
  color: #E2E8F0 !important;
}
.card:hover, .feature-card:hover, .spec-card:hover, .step-card:hover {
  border-color: rgba(45,212,191,0.3) !important;
  box-shadow: 0 8px 40px rgba(0,0,0,0.3) !important;
}
.card h2, .card h3, .card h4,
.feature-card h2, .feature-card h3,
.step-card h2, .step-card h3 { color: #F1F5F9 !important; }
.card p, .feature-card p { color: rgba(226,232,240,0.72) !important; }

/* Section headings */
.section-header h2, .section-header h3,
.section-title, .section-headline,
.feature-title, .step-title,
.pricing-name, .pricing-headline { color: #F1F5F9 !important; }
.section-header p,
.section-subtitle { color: rgba(226,232,240,0.65) !important; }

/* ── Features grid ───────────────────────────────────────── */
.features-grid .feature-icon,
.step-icon { color: #2DD4BF !important; background: rgba(45,212,191,0.12) !important; }
.feature-name, .step-name { color: #F1F5F9 !important; }
.feature-desc, .step-desc { color: rgba(226,232,240,0.7) !important; }

/* ── Pricing ─────────────────────────────────────────────── */
.plan-card {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  color: #E2E8F0 !important;
}
.plan-card h2, .plan-card h3, .plan-name { color: #F1F5F9 !important; }
.plan-price, .pricing-price { color: #F1F5F9 !important; }
.plan-period, .pricing-period { color: rgba(226,232,240,0.5) !important; }
.plan-feature, .pricing-feature { color: rgba(226,232,240,0.75) !important; }
.plan-card--featured,
.pricing-card--featured {
  background: rgba(45,212,191,0.08) !important;
  border-color: rgba(45,212,191,0.35) !important;
  box-shadow: 0 0 40px rgba(45,212,191,0.12) !important;
}
.plan-badge { background: #2DD4BF !important; color: #07090F !important; }
.pfaq { background: #07090F !important; }
.ptab { background: transparent !important; color: rgba(226,232,240,0.55) !important; border-color: rgba(255,255,255,0.12) !important; }
.ptab.active {
  background: rgba(255,255,255,0.08) !important;
  color: #E2E8F0 !important;
  box-shadow: 0 -2px 0 #2DD4BF inset !important;
}

/* ── Auth / Login page ───────────────────────────────────── */
.auth-page {
  background: #07090F !important;
  position: relative;
}
.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(24px) !important;
  -webkit-backdrop-filter: blur(24px) !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-sub, .auth-subtitle { color: rgba(226,232,240,0.65) !important; }
.auth-provider-top { background: rgba(255,255,255,0.04) !important; border-color: rgba(255,255,255,0.08) !important; }
.auth-provider-top__label { color: rgba(226,232,240,0.55) !important; }
.auth-provider-top__links a { color: #60A5FA !important; }
.auth-divider { color: rgba(226,232,240,0.35) !important; }
.auth-divider::before,
.auth-divider::after { background: rgba(255,255,255,0.1) !important; }
.auth-signup-row { color: rgba(226,232,240,0.6) !important; }
.auth-signup-row a { color: #2DD4BF !important; }
.form-label { color: #E2E8F0 !important; }
.form-label-link { color: #60A5FA !important; }
.form-control {
  background: rgba(255,255,255,0.07) !important;
  border-color: rgba(255,255,255,0.12) !important;
  color: #E2E8F0 !important;
}
.form-control:focus {
  background: rgba(255,255,255,0.1) !important;
  border-color: #2DD4BF !important;
  box-shadow: 0 0 0 3px rgba(45,212,191,0.2) !important;
}
.form-control::placeholder { color: rgba(226,232,240,0.35) !important; }
.form-check { color: rgba(226,232,240,0.75) !important; }
.alert-error   { background: rgba(248,113,113,0.12) !important; color: #FCA5A5 !important; border-color: rgba(248,113,113,0.25) !important; }
.alert-success { background: rgba(52,211,153,0.12) !important;  color: #6EE7B7 !important; border-color: rgba(52,211,153,0.25) !important; }
.alert-info    { background: rgba(96,165,250,0.12) !important;  color: #93C5FD !important; border-color: rgba(96,165,250,0.25) !important; }

/* ── Forms (all public pages) ────────────────────────────── */
input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="file"]),
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.38) !important; }
select option { background: #0C0F1D; color: #E2E8F0; }
label { color: #E2E8F0 !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; }

/* ── Badges / pills ──────────────────────────────────────── */
.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; }
.badge--green  { background: rgba(52,211,153,0.15) !important; color: #34D399 !important; }
.badge--red    { background: rgba(248,113,113,0.15) !important; color: #F87171 !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; }

/* ── Tables on public pages ──────────────────────────────── */
table { color: #E2E8F0 !important; border-color: rgba(255,255,255,0.08) !important; }
thead th { background: rgba(255,255,255,0.05) !important; color: rgba(226,232,240,0.6) !important; border-color: rgba(255,255,255,0.08) !important; }
tbody td { border-color: rgba(255,255,255,0.06) !important; color: #E2E8F0 !important; }
tbody tr:hover td { background: rgba(255,255,255,0.04) !important; }

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

/* ── Blog / articles ─────────────────────────────────────── */
.blog-card, .article-card { background: rgba(255,255,255,0.05) !important; border: 1px solid rgba(255,255,255,0.09) !important; }
.blog-card h2, .blog-card h3, .article-card h2, .article-card h3 { color: #F1F5F9 !important; }
.blog-card p, .article-card p { color: rgba(226,232,240,0.7) !important; }

/* ── Inline-style overrides (hardcoded bg colors) ────────── */
[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; }
[style*="color:#64748b"],
[style*="color:#64748B"],
[style*="color:#6b7280"] { color: rgba(226,232,240,0.55) !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); }