/* =========================================================
   Care Navigator — main.css (clean, modern, SaaS-grade)
   Consolidated + updated:
   - Neat header/nav layout (no haphazard wrap)
   - Light-blue header/footer background (can tweak)
   - No yellow underline
   - No “masking” of button names on hover
   - Active page nav pill support
   - Medications page: NEW two-block layout support
   - Medications page: FULL-WIDTH search card above both blocks
   ========================================================= */

/* ---------- Reset ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }

/* ---------- RTL Support for Arabic ---------- */
html[dir="rtl"] {
  direction: rtl;
  text-align: right;
}

html[dir="rtl"] body {
  direction: rtl;
}

/* Adjust flexbox for RTL */
html[dir="rtl"] .site-nav,
html[dir="rtl"] .site-header__inner,
html[dir="rtl"] .footer-nav {
  flex-direction: row-reverse;
}

/* Adjust margins and paddings for RTL */
html[dir="rtl"] .site-brand {
  flex-direction: row-reverse;
}

html[dir="rtl"] .brand-pill__mark {
  margin-left: 0;
  margin-right: 8px;
}

html[dir="rtl"] .lang-menu {
  left: auto;
  right: 0;
}

html[dir="rtl"] .lang-icon {
  margin-left: 0;
  margin-right: 4px;
}

/* Grid layouts for RTL */
html[dir="rtl"] .med-two-col {
  grid-template-columns: 60% 40%;
}

/* ---------- Landing page: hero + cards ---------- */
.container.narrow{ max-width: 980px; }

.page-hero{ padding: 64px 0; }
.hero-gradient{ background: linear-gradient(180deg, var(--header-bg-2) 0%, var(--header-bg-1) 100%); }

.hero-title{ font-size: 2.2rem; line-height:1.05; font-weight:800; color: #07263b; margin-bottom:8px; }
.hero-subtitle{ font-size:1.05rem; color: var(--muted); margin-bottom:14px; max-width:66ch; }
.hero-description{ font-size:1rem; color: var(--muted); margin-top:8px; }
.hero-cta{ display:flex; gap:12px; margin-top:18px; flex-wrap:wrap; }
.btn-lg{ padding: 12px 18px; font-size: 1rem; border-radius: 10px; }

.hero-card{ margin-top:40px; background: linear-gradient(135deg, #f4f9ff 0%, #eef3fb 100%); }
.tools-grid{ margin-top:32px; }

.card-feature{ display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; padding:8px; border-radius:10px; transition: transform 200ms ease, box-shadow 200ms ease; }
.card-feature .card-icon{ font-size:22px; height:44px; width:44px; display:flex; align-items:center; justify-content:center; border-radius:10px; background: linear-gradient(180deg,#ffffff,#f7fbff); box-shadow: var(--shadow); transition: transform 200ms ease, box-shadow 200ms ease; }
.card-feature h3{ margin:0; font-size:0.96rem; }
.card-feature p{ color:var(--muted); font-size:0.9rem; margin:0; }
.card-badge{ margin-top:6px; background:#eef6ff; color:var(--primary); padding:3px 6px; border-radius:8px; font-size:0.74rem; font-weight:600; }

/* Hover / micro-interactions for cards */
.card-feature:hover{ transform: translateY(-4px) scale(1.005); box-shadow: var(--shadow-lg); }
.card-feature:active{ transform: translateY(-1px) scale(0.999); }
.card-feature:hover .card-icon{ transform: translateY(-2px) scale(1.02); box-shadow: 0 6px 16px rgba(0,0,0,0.07); }
.card-feature .card-icon svg{ transition: transform 220ms ease; }

/* Compact buttons inside tool cards */
.card-feature .btn, .card-feature .btn-primary{ padding:6px 10px; font-size:0.92rem; }

.steps-grid{ display:grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap:16px; margin-top:20px; }
.step-card{ background:var(--surface); padding:18px; border-radius:10px; text-align:center; box-shadow:var(--shadow); }
.step-number{ width:36px; height:36px; border-radius:50%; background:var(--primary); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-weight:700; margin:0 auto 8px; }

.how-it-works ul li{ transition: transform 160ms ease, box-shadow 160ms ease; }
.how-it-works ul li:hover{ transform: translateY(-6px); box-shadow: var(--shadow-lg); }

@media (max-width:800px){
  .hero-title{ font-size:1.6rem; }
  .hero-subtitle{ font-size:0.98rem; }
}

/* ---------- Theme ---------- */
:root{
  --bg: #f6f8fb;
  --surface: #ffffff;
  --surface-2: #fbfcff;

  --text: #123247;
  --muted: #6c757d;

  --primary: #1e6091;
  --primary-hover: #144e75;

  --border: rgba(0,0,0,0.10);
  --shadow: 0 2px 10px rgba(0,0,0,0.05);
  --shadow-lg: 0 10px 30px rgba(0,0,0,0.08);

  --danger-bg: #e6f7f5; /* light teal for healthcare-friendly alerts */
  --danger-text: #045d56; /* darker teal for readable text */
  --warn-bg: #f7e119ea;
  --info-bg: #e7f1ff;
  --ok-bg: #e7f7ea;

  --radius: 12px;
  --ring: 0 0 0 4px rgba(30, 96, 145, 0.12);

  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* New: header/footer theme (light blue default) */
  --header-bg-1: #e7f1ff;
  --header-bg-2: #f4f9ff;

  /* New: nav pill */
  --nav-pill-bg: rgba(30,96,145,0.10);
  --nav-pill-border: rgba(30,96,145,0.18);
}

/* ---------- Theme variants (apply by adding class to <body>) ---------- */
/* Usage: <body class="theme-warm"> or "theme-neutral" or "theme-dark" */
.theme-warm{
  --primary: #c2410c;
  --primary-hover: #9a3412;
  --header-bg-1: #fff6e5;
  --header-bg-2: #fff7ed;
  --bg: #fff9f5;
  --text: #2b1f16;
  --muted: #786a60;
}
.theme-neutral{
  /* slightly muted, default-like */
  --primary: #1e6091;
  --primary-hover: #144e75;
  --header-bg-1: #f4f6f8;
  --header-bg-2: #f9fbfd;
  --bg: #f6f8fb;
  --text: #123247;
  --muted: #6c757d;
}
.theme-dark{
  --bg: #0b1220;
  --surface: #0f1724;
  --surface-2: #0b1224;
  --text: #e6eef8;
  --muted: #97a6b2;
  --primary: #3b82f6;
  --primary-hover: #60a5fa;
  --header-bg-1: #071127;
  --header-bg-2: #071127;
  --border: rgba(255,255,255,0.06);
  --shadow: 0 4px 18px rgba(0,0,0,0.35);
  --shadow-lg: 0 14px 50px rgba(0,0,0,0.45);
}

/* If you want ORANGE instead, uncomment these:
:root{
  --header-bg-1: #fff6e5;
  --header-bg-2: #ffffff;
  --nav-pill-bg: rgba(255, 140, 0, 0.12);
  --nav-pill-border: rgba(255, 140, 0, 0.22);
}
*/

body{
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
}

/* Improve font rendering across platforms */
html, body{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------- Layout ---------- */
.container{
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 16px;
}

hr{
  margin: 28px 0;
  border: none;
  border-top: 1px solid var(--border);
}

/* ---------- Typography ---------- */
h1{ font-size: 2rem; margin: 12px 0 10px; color: #0a3d62; letter-spacing: -0.02em; }
h2{ font-size: 1.4rem; margin: 18px 0 10px; color: #1e6091; }
h3{ font-size: 1.1rem; margin: 12px 0 8px; color: #0a3d62; }
p{ margin-bottom: 12px; }

.muted{ color: var(--muted); }
.small{ font-size: 0.88rem; }

a{ color: var(--primary); }
a:hover{ color: var(--primary-hover); }

/* ---------- Buttons ---------- */
.btn, button{
  background: var(--primary);
  color: #fff;
  border: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 10px;
  padding: 10px 16px;
  font-size: 1rem;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.04);
  transition: transform 140ms ease, box-shadow 140ms ease, background-color 140ms ease, opacity 140ms ease;
}
.btn:hover, button:hover{
  background: var(--primary-hover);
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(0,0,0,0.08);
}
.btn:active, button:active{
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.btn:disabled, button:disabled{ opacity: 0.6; cursor: not-allowed; }

.btn-secondary{
  background: #eef3fb;
  color: #0a3d62;
  border: 1px solid rgba(0,0,0,0.08);
}
.btn-secondary:hover{ background: #e5edf8; }

.btn-muted{
  background: #f3f6fb;
  color: #0a3d62;
  border: 1px solid rgba(0,0,0,0.08);
}
.btn-muted:hover{ background: #eaf0fa; }

/* Focus */
.btn:focus-visible, button:focus-visible,
a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline: 3px solid rgba(30, 96, 145, 0.20);
  outline-offset: 2px;
}

/* ---------- Forms ---------- */
input[type="text"],
input[type="email"],
input[type="password"],
select,
textarea{
  width: 100%;
  padding: 10px 12px;
  margin: 8px 0 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  font-size: 1rem;
  background: var(--surface);
  transition: box-shadow 140ms ease, border-color 140ms ease;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
textarea{ resize: vertical; }

input:focus, select:focus, textarea:focus{
  outline: none;
  box-shadow: var(--ring);
  border-color: rgba(30,96,145,0.40);
}

label{
  display: block;
  margin-top: 10px;
  font-weight: 600;
  color: #0a3d62;
}

/* Consistent input class used across templates */
.input,
input.input, textarea.input, select.input{
  font-family: var(--font-sans);
  font-size: 0.98rem;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,0.08);
  background: var(--surface);
  color: var(--text);
  width: 100%;
  box-shadow: none;
}
.input:focus{ box-shadow: var(--ring); border-color: rgba(30,96,145,0.28); }

/* Contact form specific layout helpers */
.form-stack{ display:flex; flex-direction:column; gap:12px; }
.two-col{ grid-template-columns: 1fr 1fr; gap:12px; }
.contact-form .form-actions{ display:flex; gap:12px; align-items:center; margin-top:6px; flex-wrap:wrap; }
.contact-form .form-actions .btn{ padding:8px 12px; }

/* Banner variant for danger/important */
.banner--danger{ background: var(--danger-bg); color: var(--danger-text); border-color: rgba(4,93,86,0.18); font-weight:700; }

/* ---------- Cards / Blocks ---------- */
.card, .admin-card, .doc-card{
  background: var(--surface);
  padding: 16px;
  border-radius: var(--radius);
  border: 1px solid rgba(0,0,0,0.03);
  box-shadow: var(--shadow-lg);
  margin-bottom: 12px;
  transition: box-shadow 140ms ease, transform 140ms ease;
}
.admin-card:hover{
  box-shadow: 0 14px 34px rgba(0,0,0,0.08);
}

.admin-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin: 8px 0 12px;
}

/* ---------- Header / Nav (NEAT + STABLE) ---------- */
.site-header{
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, var(--header-bg-1) 0%, var(--header-bg-2) 100%);
  backdrop-filter: saturate(1.1) blur(6px);
}

.site-header__inner{
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 16px;
  padding: 10px 0;
}

/* Brand */
.site-brand{
  display:flex;
  align-items:center;
  gap:14px;
  min-width: 260px;
  flex-shrink: 0;
}

/* Brand pill: symbol + name */
.brand-pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color: #0a3d62;
  line-height:1;
}
.brand-pill__mark{
  height: 46px;
  width: auto;
  display:block;
}
.brand-pill__text{
  font-weight: 800;
  font-size: 1.22rem;
  letter-spacing: 0.2px;
  line-height: 1;
  white-space: nowrap;
}
.site-brand__tagline{
  opacity: 0.78;
  font-size: 0.92rem;
  line-height: 1.2;
  margin-top: 2px;
  white-space: nowrap;
}

/* Nav: clean one-line layout on desktop, wraps gracefully on mobile */
.site-nav{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:2px;
  flex-wrap: wrap;
  padding: 0;
}

/* Nav link: uniform clean styling */
.nav-link{
  text-decoration:none;
  color: #64748b;
  font-weight: 500;
  font-size: 14px;
  padding: 6px 10px;
  border-radius: 6px;
  transition: all 140ms ease;
  border: 1px solid transparent;
  white-space: nowrap;
}
.nav-link:hover{
  background: #f1f5f9;
  color: #1e293b;
  border-color: #e2e8f0;
}

/* Divider */
.nav-divider{
  width: 1px;
  height: 20px;
  background: #e2e8f0;
  display:inline-block;
  margin: 0 2px;
}

/* Toggle (if you have JS to open/close) */
.nav-toggle{
  display:none;
  background: transparent;
  border: 1px solid #e2e8f0;
  color: var(--text);
  padding: 6px 10px;
  border-radius: 6px;
  transition: all 140ms ease;
  font-weight: 600;
  cursor: pointer;
  font-size: 14px;
}
.nav-toggle:hover{
  background: #f1f5f9;
  border-color: #cbd5e1;
}

/* ---------- Active Page Nav Pill ---------- */
.nav-link.is-active,
.nav-link[aria-current="page"]{
  background: #3b82f6;
  border: 1px solid #2563eb;
  box-shadow: 0 2px 8px rgba(59,130,246,0.16);
  color: white;
  font-weight: 600;
}
.nav-link.is-active:hover,
.nav-link[aria-current="page"]:hover{
  background: #2563eb;
  border-color: #1d4ed8;
  box-shadow: 0 4px 12px rgba(37,99,235,0.2);
}

/* Logout button styling - match nav links */
.nav-logout .btn{
  color: #64748b;
  font-weight: 500;
  font-size: 14px;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: transparent;
  transition: all 140ms ease;
  white-space: nowrap;
}
.nav-logout .btn:hover{
  background: #f1f5f9;
  color: #1e293b;
  border-color: #e2e8f0;
}

/* Sign up button styling */
.btn-primary{
  background: #3b82f6;
  color: white;
  border: 1px solid #2563eb;
  padding: 6px 10px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 14px;
  transition: all 140ms ease;
  white-space: nowrap;
}
.btn-primary:hover{
  background: #2563eb;
  border-color: #1d4ed8;
  box-shadow: 0 2px 8px rgba(59,130,246,0.16);
}

/* ---------- Language Selector ---------- */
/* ---------- Language Selector (Responsive) ---------- */
.lang-selector {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
}

.lang-toggle {
  background: transparent;
  border: 1px solid #e2e8f0;
  color: #64748b;
  padding: 6px 10px;
  border-radius: 6px;
  font-weight: 500;
  font-size: 13px;
  cursor: pointer;
  transition: all 140ms ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  white-space: nowrap;
  height: 32px;
  min-width: 50px;
  flex-shrink: 0;
}

.lang-toggle:hover {
  background: #f1f5f9;
  color: #1e293b;
  border-color: #cbd5e1;
}

.lang-toggle:active {
  background: #e8f0f9;
}

.lang-code {
  font-weight: 600;
  min-width: 22px;
  text-align: center;
  display: inline-block;
}

.lang-icon {
  width: 18px;
  height: 18px;
  font-size: 10px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  background: rgba(30,96,145,0.06);
  color: var(--primary);
  transition: transform 140ms ease, background 140ms ease, color 140ms ease;
}

.lang-toggle[aria-expanded="true"] .lang-icon {
  transform: rotate(180deg);
}

.lang-toggle:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}

.lang-menu {
  position: absolute; /* position relative to .lang-selector for reliability */
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
  min-width: 160px;
  display: none;
  flex-direction: column;
  z-index: 1001;
  top: calc(100% + 8px);
  left: 0;
}

.lang-menu[role="listbox"] {
  display: none;
}

.lang-selector.active .lang-menu[role="listbox"] {
  display: flex;
}

.lang-option {
  background: transparent;
  border: none;
  color: #64748b;
  padding: 10px 14px;
  text-align: left;
  cursor: pointer;
  font-size: 13px;
  transition: all 100ms ease;
  white-space: nowrap;
  font-weight: 500;
}

.lang-option:first-child {
  border-radius: 5px 5px 0 0;
}

.lang-option:last-child {
  border-radius: 0 0 5px 5px;
}

.lang-option:hover {
  background: #f1f5f9;
  color: #1e293b;
}

.lang-option:active {
  background: #e8eef5;
}

.lang-option[aria-selected="true"] {
  background: #e0e7ff;
  color: #3b82f6;
  font-weight: 600;
}

.lang-option[aria-selected="true"]:hover {
  background: #dbeafe;
}

/* ---------- Hero ---------- */
.page-hero{ padding: 18px 0 6px; }
.page-title{ margin: 10px 0 4px; }
.page-subtitle{ margin: 0 0 10px; max-width: 860px; color: var(--muted); }

/* ---------- Footer ---------- */
.site-footer{
  margin-top: 24px;
  padding: 18px 0;
  border-top: 1px solid var(--border);
  background: linear-gradient(180deg, var(--header-bg-2) 0%, var(--header-bg-1) 100%);
}

/* Footer layout (keeps it neat) */
.footer-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:nowrap;
  white-space:nowrap;
}

.footer-nav{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:nowrap;
  white-space:nowrap;
}

.footer-inner p{
  margin:0;
  white-space:nowrap;
}

@media (max-width: 520px){
  .footer-inner,
  .footer-nav,
  .footer-inner p{
    font-size: 0.82rem;
  }
}

/* ---------- Banners ---------- */
.banner{
  padding: 12px;
  margin: 10px 0;
  border-radius: 12px;
  font-weight: 650;
  border: 1px solid var(--border);
}
.banner--trial{
  background: var(--warn-bg);
  color: #856404;
  border-color: rgba(133,100,4,0.25);
}

/* Emergency banners */
#emergencyAlert, #triageEmergencyAlert{
  display:none;
  background: var(--danger-bg);
  color: var(--danger-text);
  border: 1px solid rgba(4,93,86,0.20);
  padding: 12px;
  margin-top: 12px;
  border-radius: 12px;
  font-weight: 750;
}

/* ---------- UX States (thinking / error) ---------- */
.state-row{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-top:10px;
  min-height: 26px;
}

.state-pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 8px 10px;
  border-radius: 999px;
  font-size: 0.92rem;
  border: 1px solid rgba(0,0,0,0.08);
  background: rgba(0,0,0,0.03);
  color: var(--muted);
}

.spinner{
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 2px solid rgba(0,0,0,0.15);
  border-top-color: rgba(30, 96, 145, 0.9);
  animation: spin 900ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.error-box{
  margin-top:12px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(176,0,32,0.18);
  background: rgba(255,229,229,0.65);
  color: #7a0016;
  font-weight: 650;
}

/* ---------- Chat / Triage answer styling ---------- */
#answer, #triage_answer{
  background: var(--surface);
  padding: 14px;
  border-radius: 12px;
  margin-top: 12px;
  box-shadow: var(--shadow);
}

/* ---------- Voice / audio ---------- */
audio{
  margin-top: 15px;
  width: 100%;
  max-width: 460px;
}

/* ---------- Chat layout: split columns ---------- */
.chat-split{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items:start;
}
@media (max-width: 900px){
  .chat-split{ grid-template-columns: 1fr; }
}

/* ---------- Responsive behavior ---------- */
@media (max-width: 980px){
  .site-header__inner{
    grid-template-columns: 1fr;
    align-items: start;
  }

  .site-nav{
    justify-content: flex-start;
    padding-top: 8px;
    border-top: 1px solid rgba(0,0,0,0.06);
  }
}

@media (max-width: 760px){
  .nav-toggle{ display:inline-flex; }

  .site-nav{
    width: 100%;
    display:none;
    margin-top: 10px;
  }
  .site-nav.is-open{ display:flex; }

  .site-brand__tagline{ white-space: normal; }
  .brand-pill__mark{ height: 38px; }
  .brand-pill__text{ font-size: 1.08rem; }

  /* Language selector on mobile: stack nicely */
  .lang-selector {
    display: inline-flex;
    flex-shrink: 0;
  }

  .lang-toggle {
    padding: 4px 6px;
    font-size: 11px;
    height: 28px;
    min-width: 40px;
    gap: 2px;
  }
  
  .lang-code {
    min-width: 16px;
    font-size: 10px;
    font-weight: 700;
  }

  .lang-icon {
    font-size: 8px;
  }

  .lang-menu {
    right: auto;
    left: 0;
    min-width: 130px;
  }
  
  .lang-option {
    padding: 7px 10px;
    font-size: 11px;
  }
}

@media (max-width: 980px) {
  .lang-toggle {
    padding: 6px 8px;
    font-size: 12px;
    height: 30px;
    min-width: 45px;
  }
  
  .lang-code {
    min-width: 18px;
    font-size: 12px;
  }

  .lang-menu {
    min-width: 140px;
  }
  
  .lang-option {
    padding: 8px 10px;
    font-size: 12px;
  }
}

@media (max-width: 600px){
  h1{ font-size: 1.65rem; }
  .btn, button{ width: 100%; }
  
  .lang-toggle {
    padding: 4px 5px;
    font-size: 10px;
    height: 26px;
    min-width: 36px;
    gap: 1px;
  }
  
  .lang-code {
    min-width: 14px;
    font-size: 9px;
  }

  .lang-icon {
    font-size: 7px;
  }

  .lang-menu {
    min-width: 120px;
    right: -10px;
  }
  
  .lang-option {
    padding: 6px 8px;
    font-size: 10px;
  }
}

/* ---------- Enhanced Hero Section ---------- */
.page-hero{
  padding: 32px 0 18px;
}

.hero-gradient{
  background: linear-gradient(135deg, #e7f1ff 0%, #f4f9ff 50%, #ffffff 100%);
  border-bottom: 1px solid rgba(30,96,145,0.08);
}

.hero-title{
  font-size: 2.4rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: 14px;
  background: linear-gradient(135deg, #0a3d62 0%, #1e6091 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-subtitle{
  font-size: 1.1rem;
  color: #0a3d62;
  margin-bottom: 16px;
  max-width: 860px;
  font-weight: 500;
}

.hero-description{
  color: #6c757d;
  font-size: 1rem;
  max-width: 820px;
  margin-top: 14px;
  line-height: 1.7;
}

.hero-cta{
  margin-top: 24px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.btn-lg{
  padding: 12px 24px;
  font-size: 1.05rem;
  font-weight: 600;
  border-radius: 12px;
}

.btn-block{
  width: 100%;
  justify-content: center;
}

/* ---------- Tool Cards ---------- */
.card-feature{
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all 240ms cubic-bezier(0.23, 1, 0.320, 1);
  border: 1px solid rgba(30,96,145,0.06);
  min-height: 280px;
}

.card-feature::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #1e6091 0%, #4a90e2 100%);
  opacity: 0;
  transition: opacity 240ms ease;
}

.card-feature:hover{
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(30,96,145,0.15);
  border-color: rgba(30,96,145,0.12);
}

.card-feature:hover::before{
  opacity: 1;
}

.card-icon{
  font-size: 3rem;
  margin-bottom: 12px;
  display: inline-block;
}

.card-badge{
  display: inline-block;
  margin-top: auto;
  padding: 6px 12px;
  background: rgba(30,96,145,0.06);
  color: #0a3d62;
  font-size: 0.82rem;
  font-weight: 600;
  border-radius: 8px;
  margin-top: 14px;
  width: fit-content;
}

.card-chat::before{ background: linear-gradient(90deg, #4a90e2 0%, #357abd 100%); }
.card-symptoms::before{ background: linear-gradient(90deg, #e74c3c 0%, #c0392b 100%); }
.card-triage::before{ background: linear-gradient(90deg, #f39c12 0%, #d68910 100%); }
.card-documents::before{ background: linear-gradient(90deg, #27ae60 0%, #1e8449 100%); }
.card-medications::before{ background: linear-gradient(90deg, #8e44ad 0%, #6c3483 100%); }

/* ---------- Steps Grid (How it works) ---------- */
.steps-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin: 20px 0;
}

.step-card{
  text-align: center;
  padding: 18px;
  background: rgba(255,255,255,0.5);
  border-radius: 12px;
  border: 1px solid rgba(30,96,145,0.08);
  transition: all 200ms ease;
}

.step-card:hover{
  background: rgba(255,255,255,0.8);
  transform: translateY(-4px);
}

.step-number{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: linear-gradient(135deg, #1e6091 0%, #4a90e2 100%);
  color: white;
  border-radius: 50%;
  font-weight: 800;
  font-size: 1.2rem;
  margin-bottom: 12px;
}

.step-card h4{
  margin: 10px 0 8px;
  color: #0a3d62;
  font-size: 1.05rem;
}

.how-it-works{
  border: 1px solid rgba(30,96,145,0.10);
  box-shadow: 0 8px 24px rgba(30,96,145,0.08);
}

.banner--success{
  background: #e7f7ea;
  color: #22863a;
  border: 1px solid rgba(34,134,58,0.20);
}

/* =========================================================
   Medications page styles (scoped)
   ========================================================= */

.med-page{
  --bg-start:#f7f9fc;
  --bg-end:#e9f3ff;
  --accent:#4f46e5;
  --accent-2:#06b6d4;
  --card-bg: rgba(255,255,255,0.85);
  --muted:#6b7280;
  --glass-border: rgba(255,255,255,0.6);
  --shadow: 0 10px 30px rgba(16,24,40,0.08);
  --radius:10px;
  --gap:12px;
}

.med-page .med-container{
  max-width:1200px;
  margin:0 auto;
  width:calc(100% - 32px);
  padding:0 8px;
}

.med-page .btn svg, .med-page .btn img{width:18px;height:18px}
.med-page .scan-box video, .med-page .scan-box canvas{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:8px}

/* FIXED: removed invalid selector (.med-page body > .med-container) */
body .med-container{display:block}

.med-page #medList{display:flex;flex-direction:column;gap:8px}
.med-page .med-item{display:flex;align-items:center;justify-content:space-between;padding:8px;border-radius:8px;background:rgba(255,255,255,0.6);border:1px solid rgba(15,23,42,0.03);font-size:13px}
.med-page .med-item .meta{color:var(--muted);font-size:12px}
.med-page .med-item .actions{display:flex;gap:8px;align-items:center}

.med-page #prefsStatus{transition:opacity .4s ease;opacity:1}
.med-page .prefs-hidden{opacity:0}

.med-page .two-col{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.med-page .two-col.align-end{align-items:end}
.med-page .two-col .small{display:block;margin-bottom:6px}
.med-page .two-col .input{width:100%}

.med-page .med-hero{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  background: linear-gradient(135deg, rgba(79,70,229,0.12), rgba(6,182,212,0.06));
  border-radius:calc(var(--radius) - 2px);
  box-shadow:0 8px 20px rgba(16,24,40,0.06);
  border: 1px solid rgba(15,23,42,0.04);
}

.med-page .top-cards{display:none}

.med-page .med-tools{display:flex;gap:8px;align-items:center}
.med-page .med-tools .btn{padding:6px 8px}

.med-page .med-hero-inner{display:flex;flex-direction:column}
.med-page .med-title{font-size:18px;margin:0;color:var(--accent);letter-spacing:-0.2px}
.med-page .med-sub{margin:4px 0 0;color:var(--muted);font-size:13px}
.med-page .med-cta .btn{margin-left:6px;padding:8px 10px}

.med-page .med-controls{
  display:flex;
  gap:12px;
  align-items:center;
  margin-top:12px;
  flex-wrap:wrap;
}

.med-page .search-wrap{
  display:flex;
  gap:8px;
  flex:1 1 520px;
}

.med-page .input{
  padding:10px 12px;
  border-radius:8px;
  border:1px solid rgba(15,23,42,0.06);
  background:#fff;
  box-shadow:0 1px 4px rgba(2,6,23,0.03);
  font-size:13px;
}

.med-page .search-input{flex:1}
.med-page .med-select{width:220px}

.med-page .med-grid{display:grid;grid-template-columns: 1fr;gap:var(--gap);align-self:start}

/* ---------- Card style inside med page ---------- */
.med-page .card{
  background:var(--card-bg);
  border-radius:10px;
  padding:10px 12px;
  border:1px solid rgba(15,23,42,0.06);
  box-shadow:0 2px 8px rgba(0,0,0,0.08);
  transition:transform .14s ease,box-shadow .14s,border-color .14s;
}
.med-page .card:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,0.12);border-color:rgba(15,23,42,0.1)}
.med-page .card.small{padding:10px;margin-bottom:8px}
.med-page .med-right-block .card{
  background:linear-gradient(135deg, rgba(99,102,241,0.02), rgba(168,85,247,0.02));
  border:1px solid rgba(99,102,241,0.1);
}
.med-page .med-right-block .card:hover{
  border-color:rgba(99,102,241,0.15);
  background:linear-gradient(135deg, rgba(99,102,241,0.04), rgba(168,85,247,0.04));
}

.med-page .med-card{display:flex;flex-direction:column;gap:8px}
.med-page .med-card .meta{font-size:12px;font-weight:700;color:#0f172a;text-transform:uppercase;letter-spacing:0.5px;margin-bottom:2px}
.med-page .med-card .name{font-weight:600;color:#0b1220}

/* ---------- Buttons inside med page ---------- */
.med-page .btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:8px;
  border:none;
  cursor:pointer;
  font-weight:600;
  font-size:13px;
  background:transparent;
}
.med-page .btn.primary{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:white;box-shadow:0 4px 16px rgba(79,70,229,0.16);border:1px solid rgba(99,102,241,0.3);font-weight:700;transition:all .16s ease}
.med-page .btn.primary:hover{box-shadow:0 8px 24px rgba(79,70,229,0.24);transform:translateY(-1px)}
.med-page .btn.primary:active{transform:translateY(0);box-shadow:0 2px 8px rgba(79,70,229,0.12)}
.med-page .btn.ghost{border:1px solid rgba(15,23,42,0.06);background:transparent;color:var(--accent)}
.med-page .btn.icon{background:#fff;border:1px solid rgba(2,6,23,0.04);padding:6px 8px}

/* Save preferences button styling */
#savePrefsBtn{background:linear-gradient(90deg, #6366f1, #8b5cf6);color:white;border:1px solid rgba(99,102,241,0.3);box-shadow:0 4px 12px rgba(99,102,241,0.14);transition:all .16s ease}
#savePrefsBtn:hover{background:linear-gradient(90deg, #4f46e5, #7c3aed);box-shadow:0 6px 16px rgba(99,102,241,0.2);transform:translateY(-1px)}
#savePrefsBtn:active{transform:translateY(0);box-shadow:0 2px 8px rgba(99,102,241,0.12)}

.med-page .input:focus{outline:none;box-shadow:0 10px 30px rgba(99,102,241,0.12);border-color:rgba(99,102,241,0.35)}
.med-page .btn:active{transform:translateY(1px)}

.med-page .kv{display:flex;justify-content:space-between;font-size:13px;color:var(--muted)}

.med-page .fade-in{animation:fadeIn .36s ease both}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.med-page .scan-box{
  border-radius:8px;
  padding:8px;
  border:1px dashed rgba(15,23,42,0.06);
  background:linear-gradient(180deg,rgba(255,255,255,0.95),rgba(255,255,255,0.85));
}

.med-page .pulse{animation:pulseGlow 2.6s infinite}
@keyframes pulseGlow{
  0%{box-shadow:0 6px 20px rgba(79,70,229,0.12)}
  50%{box-shadow:0 18px 40px rgba(79,70,229,0.16)}
  100%{box-shadow:0 6px 20px rgba(79,70,229,0.12)}
}

/* =========================================================
   Medications — Full-width search card ABOVE both blocks (COMPACT)
   Requires HTML class: .med-search-full
   ========================================================= */

/* Keep this card snug */
.med-page .med-search-full{
  margin-top: 8px;
}

/* Override ONLY this card padding (avoid affecting other cards) */
.med-page .med-search-full.card{
  padding: 10px 12px;
  margin-bottom: 10px;
}

/* tighter internals */
.med-page .med-search-full .med-card{
  gap: 6px;
}

.med-page .med-search-full .meta{
  font-size: 12px;
  line-height: 1.2;
  margin: 0;
}

/* row layout */
.med-page .med-search-full .search-wrap{
  display:flex;
  gap:8px;
  align-items:center;
  flex: 1;
}

/* compact inputs */
.med-page .med-search-full .input{
  padding: 8px 10px;
  margin: 0;
  font-size: 13px;
  line-height: 1.2;
  min-height: 34px;
}

.med-page .med-search-full .search-input{
  flex: 1;
  min-width: 0;
}

.med-page .med-search-full .med-select{
  flex: 1;
  min-width: 120px;
  min-height: 34px;
}

/* =========================================================
   Medications — Two Block Layout (NEW)
   Left: medication entry/details
   Right: reminders/tips/prefs/tracking
   Works with: .med-two-blocks, .med-left, .med-right-block
   ========================================================= */

.med-page .med-two-blocks{
  display: grid;
  grid-template-columns: minmax(460px, 1fr) 420px;
  gap: 16px;
  align-items: start;
  width: 100%;
  margin-top: 12px;
}

.med-page .med-left{
  min-width: 0;
}

.med-page .med-right-block{
  min-width: 0;
  position: sticky;
  top: 20px;
  align-self: start;
}

.med-page .med-right-block .card{
  margin-top: 8px;
}
.med-page .med-right-block .card:first-child{
  margin-top: 0;
}

/* Mobile/tablet: stack blocks and remove sticky */
@media (max-width: 980px){
  .med-page .med-two-blocks{
    grid-template-columns: 1fr;
  }
  .med-page .med-right-block{
    position: static;
    top: auto;
  }

  /* make search stack nicely */
  .med-page .med-search-full .search-wrap{
    flex-direction: column;
    align-items: stretch;
  }
  .med-page .med-search-full .med-select{
    width: 100%;
  }

  /* keep hero responsive */
  .med-page .med-hero{flex-direction:column;align-items:flex-start}
  .med-page .med-controls{flex-direction:column;align-items:stretch}
  .med-page .search-wrap{flex-direction:column}
  .med-page .top-cards{flex-direction:column}
  .med-page .med-select{width:100%}
  .med-page .med-cta{width:100%;display:flex;justify-content:flex-end}
}