/* ============================================================
   MXPracto - Premium Patient Experience
   Navbar, dashboard hero, stat cards, sidebar, footer
   ============================================================ */

/* Footer overlay alphas (white-on-dark) — derived from --mx-white */
:root {
  --mx-white-a05: color-mix(in srgb, var(--mx-white) 5%, transparent);
  --mx-white-a06: color-mix(in srgb, var(--mx-white) 6%, transparent);
  --mx-white-a08: color-mix(in srgb, var(--mx-white) 8%, transparent);
  --mx-white-a10: color-mix(in srgb, var(--mx-white) 10%, transparent);
  --mx-white-a15: color-mix(in srgb, var(--mx-white) 15%, transparent);
  --mx-white-a35: color-mix(in srgb, var(--mx-white) 35%, transparent);
  --mx-white-a50: color-mix(in srgb, var(--mx-white) 50%, transparent);
  --mx-white-a60: color-mix(in srgb, var(--mx-white) 60%, transparent);
  --mx-white-a95: color-mix(in srgb, var(--mx-white) 95%, transparent);
}

/* ===== TOP UTILITY BAR — pure dark, 24/7 support, better spacing ===== */
.mx-topbar {
  background: var(--mx-ink);
  color: var(--mx-white-a80);
  font-size: 13px;
  line-height: 1;
}
.mx-topbar-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.mx-topbar-left,
.mx-topbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
}
.mx-topbar-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: color-mix(in srgb, var(--mx-primary) 18%, transparent);
  color: var(--mx-primary-light);
  padding: 4px 10px;
  border-radius: var(--mx-radius-pill);
  font-family: var(--mx-font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.mx-topbar-pill i { font-size: 11px; }
.mx-topbar-phone {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mx-font-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--mx-white);
  text-decoration: none;
  transition: color 180ms ease;
}
.mx-topbar-phone i { font-size: 11px; color: var(--mx-primary-light); }
.mx-topbar-phone:hover { color: var(--mx-primary-light); }
.mx-topbar-link {
  font-family: var(--mx-font-sans);
  font-size: 13px;
  font-weight: 400;
  color: rgba(255,255,255,0.82);
  text-decoration: none;
  padding: 4px 2px;
  transition: color 180ms ease;
}
.mx-topbar-link:hover { color: var(--mx-primary-light); }
.mx-topbar-sep {
  color: rgba(255,255,255,0.22);
  font-size: 12px;
}
@media (max-width: 768px) {
  .mx-topbar-pill span, .mx-topbar-phone span { display: inline; }
  .mx-topbar-sep-mid,
  .mx-topbar-left .mx-topbar-link:nth-child(n+5),
  .mx-topbar-left .mx-topbar-sep:nth-child(n+4) { display: none; }
}
@media (max-width: 560px) {
  .mx-topbar-right { display: none; }
  .mx-topbar-inner { justify-content: center; }
}

/* ===== STICKY NAVBAR — Practo-minimal: white, subtle 1px bottom border ===== */
.mx-navbar {
  position: sticky; top: 0; z-index: 1000;
  background: var(--mx-white);
  border-bottom: 1px solid transparent;
  transition: border-color 280ms ease;
}
.mx-navbar.scrolled {
  background: var(--mx-white);
  border-bottom: 1px solid var(--mx-border);
}
.mx-navbar.navbar-scrolled { background: var(--mx-white); border-bottom: 1px solid var(--mx-border); }
.mx-navbar-inner {
  max-width: 1200px; margin: 0 auto; padding: 0 20px;
  display: flex; align-items: center; gap: 24px; height: 68px;
}
/* Practo pattern: the nav list flex-grows so it centers between the logo (left)
   and the actions (right). Logo and actions are fixed/auto width. */
.mx-navbar-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; }
.mx-navbar-brand:hover { opacity: 0.85; }
.mx-navbar-brand img { height: 40px; width: auto; }
.mx-navbar-nav { display: flex; align-items: center; justify-content: center; flex: 1 1 auto; gap: 4px; list-style: none; margin: 0; padding: 0; }
.mx-navbar-link {
  font-family: var(--mx-font-sans); font-size: var(--mx-text-base); font-weight: 500;
  color: var(--mx-ink-soft); text-decoration: none;
  padding: 8px 13px; border-radius: var(--mx-radius-sm);
  transition: color 180ms ease;
  display: inline-flex; align-items: center; gap: 6px;
  position: relative;
}
.mx-navbar-link::after {
  content: ''; position: absolute; left: 13px; right: 13px; bottom: 2px;
  height: 2px; background: var(--mx-primary); border-radius: 2px;
  transform: scaleX(0); transform-origin: left center;
  transition: transform 260ms cubic-bezier(0.4, 0, 0.2, 1);
}
.mx-navbar-link:hover { color: var(--mx-primary); }
.mx-navbar-link:hover::after { transform: scaleX(1); }
.mx-navbar-link.active { color: var(--mx-primary); font-weight: 600; }
.mx-navbar-link.active::after { transform: scaleX(1); }
.mx-navbar-link i { font-size: 13px; }
@media (min-width: 769px) { .mx-navbar-link i { display: none; } }
.mx-navbar-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
/* Cart */
.mx-nav-cart {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--mx-radius-sm);
  color: var(--mx-ink-muted); text-decoration: none;
  transition: background 180ms ease, color 180ms ease;
}
.mx-nav-cart:hover { background: var(--mx-surface-alt); color: var(--mx-primary); }
.mx-nav-cart i { font-size: 18px; }
.mx-nav-cart-badge {
  position: absolute; top: 4px; right: 4px; min-width: 18px; height: 18px; padding: 0 5px;
  background: var(--mx-primary); color: var(--mx-white); border-radius: var(--mx-radius-pill);
  font-size: 10px; font-weight: 700; font-family: var(--mx-font-sans);
  display: flex; align-items: center; justify-content: center; border: 2px solid var(--mx-white);
  animation: mx-badge-pulse 2.4s ease-in-out infinite;
}
@keyframes mx-badge-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(44, 183, 223, 0.45); }
  50% { box-shadow: 0 0 0 6px rgba(44, 183, 223, 0); }
}
/* Location selector */
/* W3 dedupe: chip base now comes from ui_mx.css .mx-nav-providers/.mx-nav-location;
   only location-specific accents kept here. */
.mx-nav-location i { font-size: 13px; }
.mx-nav-location > i:first-child { color: var(--mx-primary); }
.mx-nav-location-caret { font-size: 10px !important; color: var(--mx-ink-muted); transition: transform 200ms ease; }
.mx-nav-location.open .mx-nav-location-caret { transform: rotate(180deg); }
.mx-nav-location-text { max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mx-location-wrap { position: relative; }
.mx-location-dropdown {
  position: absolute; top: 100%; right: 0; margin-top: 8px;
  background: var(--mx-surface); border: 1px solid var(--mx-border);
  border-radius: var(--mx-radius-card); box-shadow: var(--mx-shadow-md);
  min-width: 220px; overflow: hidden; z-index: 1100;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity 200ms ease, transform 200ms ease, visibility 200ms ease;
}
.mx-location-dropdown.open { opacity: 1; visibility: visible; transform: translateY(0); }
.mx-location-search { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--mx-border); }
.mx-location-search i { color: var(--mx-ink-muted); font-size: 13px; }
.mx-location-search input { border: none; outline: none; font-family: var(--mx-font-sans); font-size: 13px; color: var(--mx-ink); width: 100%; background: transparent; }
.mx-location-list { max-height: 240px; overflow-y: auto; }
.mx-location-item { display: block; padding: 10px 14px; font-family: var(--mx-font-sans); font-size: 14px; color: var(--mx-ink-soft); text-decoration: none; transition: background 150ms ease, color 150ms ease; }
.mx-location-item:hover { background: var(--mx-surface-alt); color: var(--mx-primary); }
@media (max-width: 768px) { .mx-nav-location-text { display: none; } .mx-nav-location { padding: 8px; } }
/* Language */
.mx-lang-dropdown.open { opacity: 1; visibility: visible; transform: translateY(0); }
/* User avatar dropdown */
.mx-nav-user-wrap { position: relative; }
.mx-nav-user {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 10px 4px 4px; border-radius: var(--mx-radius-pill);
  cursor: pointer; transition: background 180ms ease; border: none; background: transparent;
}
.mx-nav-user:hover { background: var(--mx-surface-alt); }
.mx-nav-user img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; border: 2px solid var(--mx-primary-surface); }
.mx-nav-user-name { font-family: var(--mx-font-sans); font-size: 14px; font-weight: 600; color: var(--mx-ink); }
.mx-nav-user i { font-size: 12px; color: var(--mx-ink-muted); }
.mx-user-dropdown {
  position: absolute; top: 100%; right: 0; margin-top: 8px;
  background: var(--mx-surface); border: 1px solid var(--mx-border);
  border-radius: var(--mx-radius-card); box-shadow: var(--mx-shadow-md);
  min-width: 220px; overflow: hidden; z-index: 1100;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity 200ms ease, transform 200ms ease, visibility 200ms ease;
}
.mx-user-dropdown.open { opacity: 1; visibility: visible; transform: translateY(0); }
.mx-user-dropdown-header { padding: 16px 18px; border-bottom: 1px solid var(--mx-border); display: flex; align-items: center; gap: 12px; }
.mx-user-dropdown-header img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.mx-user-dropdown-header-name { font-family: var(--mx-font-sans); font-size: 15px; font-weight: 700; color: var(--mx-ink); margin: 0; line-height: 1.2; }
.mx-user-dropdown-header-email { font-family: var(--mx-font-sans); font-size: 13px; color: var(--mx-ink-muted); margin: 2px 0 0; }
.mx-user-dropdown-link {
  display: flex; align-items: center; gap: 10px; padding: 11px 18px; text-decoration: none;
  font-family: var(--mx-font-sans); font-size: 14px; font-weight: 500; color: var(--mx-ink-muted);
  transition: background 150ms ease, color 150ms ease;
}
.mx-user-dropdown-link:hover { background: var(--mx-surface-alt); color: var(--mx-primary); }
.mx-user-dropdown-link i { width: 18px; text-align: center; font-size: 14px; }
.mx-user-dropdown-divider { height: 1px; background: var(--mx-border); margin: 4px 0; }
/* Sign-in — solid turquoise primary */
.mx-nav-signin {
  font-family: var(--mx-font-sans); font-size: 14px; font-weight: 600;
  color: var(--mx-brand);
  background: var(--mx-primary);
  padding: 9px 20px;
  border: none; border-radius: var(--mx-radius-sm);
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(44, 183, 223, 0.32);
  transition: transform 200ms ease, box-shadow 200ms ease, background 200ms ease;
  display: inline-flex; align-items: center; gap: 6px;
}
.mx-nav-signin::before { content: '\f2f6'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 12px; }
.mx-nav-signin:hover { background: var(--mx-primary-dark); box-shadow: 0 4px 14px rgba(44, 183, 223, 0.42); }
.mx-nav-signin:active { transform: translateY(0); }
/* Mobile hamburger — animated morph to X */
.mx-nav-hamburger {
  display: none; width: 40px; height: 40px;
  position: relative; align-items: center; justify-content: center;
  border: none; background: transparent; cursor: pointer;
  transition: transform 250ms ease;
}
.mx-nav-hamburger-line,
.mx-nav-hamburger-line::before,
.mx-nav-hamburger-line::after {
  content: ''; display: block;
  position: absolute; left: 50%; top: 50%;
  width: 22px; height: 2px; margin-left: -11px; margin-top: -1px;
  background: var(--mx-ink); border-radius: 2px;
  transition: transform 260ms cubic-bezier(0.4, 0, 0.2, 1), opacity 180ms ease, background 180ms ease;
}
.mx-nav-hamburger-line::before { transform: translateY(-7px); }
.mx-nav-hamburger-line::after  { transform: translateY(7px); }
.mx-nav-hamburger:hover .mx-nav-hamburger-line,
.mx-nav-hamburger:hover .mx-nav-hamburger-line::before,
.mx-nav-hamburger:hover .mx-nav-hamburger-line::after { background: var(--mx-primary); }
.mx-nav-hamburger.open { transform: none; }
.mx-nav-hamburger.open .mx-nav-hamburger-line { background: transparent; }
.mx-nav-hamburger.open .mx-nav-hamburger-line::before { transform: rotate(45deg); background: var(--mx-primary); }
.mx-nav-hamburger.open .mx-nav-hamburger-line::after  { transform: rotate(-45deg); background: var(--mx-primary); }
.mx-nav-mobile-menu { display: none; padding: 12px 20px; border-top: 1px solid var(--mx-border); max-height: 0; overflow: hidden; transition: max-height 400ms ease, padding 300ms ease; }
.mx-nav-mobile-menu.open { display: block; max-height: 600px; }
.mx-nav-mobile-menu a { display: flex; align-items: center; gap: 14px; padding: 14px 16px; font-family: var(--mx-font-sans); font-size: 16px; font-weight: 500; color: var(--mx-ink-muted); text-decoration: none; border-radius: var(--mx-radius-sm); transform: translateY(8px); opacity: 0; transition: transform 350ms ease, opacity 350ms ease, background 180ms ease, color 180ms ease; position: relative; }
.mx-nav-mobile-menu a i { width: 22px; text-align: center; font-size: 16px; color: var(--mx-ink-muted); transition: color 180ms ease; }
.mx-nav-mobile-menu.open a { transform: translateY(0); opacity: 1; }
.mx-nav-mobile-menu a:nth-child(1) { transition-delay: 50ms; }
.mx-nav-mobile-menu a:nth-child(2) { transition-delay: 100ms; }
.mx-nav-mobile-menu a:nth-child(3) { transition-delay: 150ms; }
.mx-nav-mobile-menu a:nth-child(4) { transition-delay: 200ms; }
.mx-nav-mobile-menu a:nth-child(5) { transition-delay: 250ms; }
.mx-nav-mobile-menu a:nth-child(6) { transition-delay: 300ms; }
.mx-nav-mobile-menu a:hover { background: var(--mx-primary-surface); color: var(--mx-primary); }
.mx-nav-mobile-menu a:hover i { color: var(--mx-primary); }
.mx-nav-mobile-menu a.active { background: var(--mx-primary-surface); color: var(--mx-primary); font-weight: 600; }
.mx-nav-mobile-menu a.active i { color: var(--mx-primary); }
.mx-nav-mobile-menu a.active::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 60%; background: var(--mx-primary); border-radius: 0 3px 3px 0; }
@media (max-width: 768px) {
  .mx-navbar-nav { display: none; }
  .mx-nav-hamburger { display: flex; }
  .mx-nav-user-name, .mx-nav-lang-name { display: none; }
  /* Practo mobile: hamburger LEFT, logo CENTER, avatar RIGHT */
  .mx-navbar-inner { justify-content: space-between; }
  .mx-navbar-brand { flex: 1 1 auto; justify-content: center; }
  .mx-navbar-actions { gap: 4px; }
}
/* ===== DASHBOARD HERO HEADER ===== */
.mx-dash-hero {
  background: var(--mx-surface-alt);
  border-radius: var(--mx-radius-card); padding: 28px 30px; margin-bottom: 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  border: 1px solid var(--mx-border); position: relative; overflow: hidden;
  box-shadow: var(--mx-shadow-xs);
}
.mx-dash-hero::before {
  content: ''; position: absolute; top: -40px; right: -40px; width: 180px; height: 180px;
  background: var(--mx-primary-surface); border-radius: 50%;
}
.mx-dash-hero-content { position: relative; z-index: 1; }
.mx-dash-hero-greeting { font-family: var(--mx-font-sans); font-size: 13px; font-weight: 600; color: var(--mx-primary); text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 4px; }
.mx-dash-hero-name { font-family: var(--mx-font-sans); font-size: 26px; font-weight: 800; color: var(--mx-ink); margin: 0 0 6px; letter-spacing: -0.01em; }
.mx-dash-hero-sub { font-family: var(--mx-font-sans); font-size: 14px; color: var(--mx-ink-muted); margin: 0; line-height: 1.5; }
.mx-dash-hero-actions { display: flex; gap: 10px; position: relative; z-index: 1; }
.mx-dash-hero-btn { font-family: var(--mx-font-sans); font-size: 14px; font-weight: 600; padding: 10px 20px; border-radius: var(--mx-radius-sm); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; transition: all 180ms ease; }
.mx-dash-hero-btn-primary { background: var(--mx-primary); color: var(--mx-surface); box-shadow: 0 4px 14px var(--mx-primary-glow); }
.mx-dash-hero-btn-primary:hover { background: var(--mx-primary-dark); box-shadow: 0 6px 20px var(--mx-primary-glow); }
@media (max-width: 640px) { .mx-dash-hero { flex-direction: column; text-align: center; padding: 22px; } .mx-dash-hero-name { font-size: 22px; } }
/* ===== STAT CARDS ===== */
.mx-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
.mx-stat-card {
  background: var(--mx-surface); border: 1px solid var(--mx-border);
  border-radius: var(--mx-radius-card); padding: 20px;
  display: flex; align-items: center; gap: 16px;
  transition: box-shadow 250ms ease, transform 250ms ease, border-color 250ms ease;
}
.mx-stat-card:hover { box-shadow: var(--mx-shadow-xs); border-color: var(--mx-primary); }
.mx-stat-icon { width: 46px; height: 46px; min-width: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 19px; }
.mx-stat-icon-blue { background: var(--mx-primary-surface); color: var(--mx-primary); }
.mx-stat-icon-green { background: var(--mx-success-surface); color: var(--mx-success); }
.mx-stat-icon-orange { background: var(--mx-warning-surface); color: var(--mx-warning); }
.mx-stat-icon-purple { background: var(--mx-primary-surface); color: var(--mx-primary-dark); }
.mx-stat-info { flex: 1; min-width: 0; }
.mx-stat-value { font-family: var(--mx-font-sans); font-size: 24px; font-weight: 800; color: var(--mx-ink); line-height: 1; margin: 0; }
.mx-stat-label { font-family: var(--mx-font-sans); font-size: 12px; font-weight: 500; color: var(--mx-ink-muted); margin: 4px 0 0; }
@media (max-width: 900px) { .mx-stats-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .mx-stats-grid { grid-template-columns: 1fr; } }
/* ===== DASHBOARD CONTENT PANEL ===== */
.mx-dash-panel { background: var(--mx-surface); border: 1px solid var(--mx-border); border-radius: var(--mx-radius-card); overflow: hidden; }
/* Tab bar */
.mx-dash-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--mx-border); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.mx-dash-tab { padding: 14px 20px; white-space: nowrap; font-family: var(--mx-font-sans); font-size: 14px; font-weight: 600; color: var(--mx-ink-muted); background: transparent; border: none; border-bottom: 3px solid transparent; cursor: pointer; transition: color 180ms ease, border-color 180ms ease; display: inline-flex; align-items: center; gap: 8px; }
.mx-dash-tab:hover { color: var(--mx-ink); }
.mx-dash-tab.active { color: var(--mx-primary); border-bottom-color: var(--mx-primary); }
.mx-dash-tab i { font-size: 14px; }
.mx-dash-tab-badge { background: var(--mx-surface-alt); color: var(--mx-ink-muted); padding: 2px 8px; border-radius: var(--mx-radius-pill); font-size: 11px; font-weight: 700; }
.mx-dash-tab.active .mx-dash-tab-badge { background: var(--mx-primary-surface); color: var(--mx-primary); }
/* Quick action tiles */
.mx-quick-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 24px; }
.mx-quick-action { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 22px 14px; background: var(--mx-surface); border: 1px solid var(--mx-border); border-radius: var(--mx-radius-card); text-decoration: none; transition: all 200ms ease; cursor: pointer; }
.mx-quick-action:hover { border-color: var(--mx-primary); box-shadow: var(--mx-shadow-sm); }
.mx-quick-action-icon { width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; }
.mx-quick-action-label { font-family: var(--mx-font-sans); font-size: 13px; font-weight: 600; color: var(--mx-ink); text-align: center; }
@media (max-width: 768px) { .mx-quick-actions { grid-template-columns: repeat(2, 1fr); } }
/* Empty state for tables */
/* ===== SIDEBAR UPGRADE ===== */
.mx-dash-sidebar-card { background: var(--mx-surface); border: 1px solid var(--mx-border-light); border-radius: var(--mx-radius-card); overflow: hidden; box-shadow: var(--mx-shadow-xs); }
.mx-dash-sidebar-header { padding: 24px 18px 20px; text-align: center; background: var(--mx-primary-surface); border-bottom: 1px solid var(--mx-border); }
.mx-dash-sidebar-avatar { width: 70px; height: 70px; border-radius: 50%; object-fit: cover; border: 3px solid var(--mx-surface); box-shadow: var(--mx-shadow-xs); margin: 0 auto 10px; display: block; }
.mx-dash-sidebar-name { font-family: var(--mx-font-sans); font-size: 16px; font-weight: 700; color: var(--mx-ink); margin: 0; }
.mx-dash-sidebar-email { font-family: var(--mx-font-sans); font-size: 13px; color: var(--mx-ink-muted); margin: 4px 0 0; }
.mx-dash-sidebar-nav { padding: 12px; list-style: none; margin: 0; }
.mx-dash-sidebar-section { font-family: var(--mx-font-sans); font-size: 13px; font-weight: 700; color: var(--mx-ink-muted); text-transform: uppercase; letter-spacing: 0.08em; padding: 16px 14px 6px; }
.mx-dash-sidebar-nav li { margin-bottom: 2px; }
/* ===== FOOTER ===== */
.mx-footer {
  background: var(--mx-brand);
  color: var(--mx-surface);
  margin-top: 60px;
  position: relative;
  border-top: 1px solid rgba(255,255,255,0.06);
}
/* Subtle inner glow to mimic Practo's deep navy footer */
.mx-footer::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.02);
  pointer-events: none;
}
.mx-footer > * { position: relative; z-index: 1; }
/* Newsletter banner (top) */
.mx-footer-newsletter-banner {
  background: var(--mx-primary);
  padding: 28px 0;
  position: relative;
  overflow: hidden;
}
.mx-footer-newsletter-banner::before {
  content: ''; position: absolute; top: -50px; right: -30px; width: 220px; height: 220px;
  background: rgba(255,255,255,0.10); border-radius: 50%;
}
.mx-footer-newsletter-banner::after {
  content: ''; position: absolute; bottom: -60px; left: 10%; width: 140px; height: 140px;
  background: rgba(255,255,255,0.06); border-radius: 50%;
}
.mx-footer-news-row { display: flex; align-items: center; justify-content: space-between; gap: 32px; position: relative; z-index: 1; flex-wrap: wrap; }
.mx-footer-news-copy { flex: 1 1 320px; }
.mx-footer-news-title { font-family: var(--mx-font-sans); font-size: 22px; font-weight: 800; color: var(--mx-surface); margin: 0 0 4px; letter-spacing: -0.01em; display: flex; align-items: center; gap: 10px; }
.mx-footer-news-title i { font-size: 19px; }
.mx-footer-news-sub { font-family: var(--mx-font-sans); font-size: 14px; color: rgba(255,255,255,0.85); margin: 0; line-height: 1.5; }
.mx-footer-news-form { display: flex; gap: 8px; max-width: 440px; flex: 0 1 440px; position: relative; }
.mx-footer-news-input { flex: 1; padding: 13px 18px; border: 1px solid rgba(255,255,255,0.35); border-radius: var(--mx-radius-pill); background: rgba(255,255,255,0.16); color: var(--mx-surface); font-size: 14px; font-family: var(--mx-font-sans); outline: none; transition: border-color 180ms ease, background 180ms ease; backdrop-filter: blur(4px); }
.mx-footer-news-input::placeholder { color: rgba(255,255,255,0.7); }
.mx-footer-news-input:focus { border-color: var(--mx-surface); background: rgba(255,255,255,0.24); }
.mx-footer-news-btn { padding: 13px 22px; background: var(--mx-ink); color: var(--mx-surface); border: none; border-radius: var(--mx-radius-pill); font-weight: 700; font-size: 14px; font-family: var(--mx-font-sans); cursor: pointer; transition: transform 200ms ease, background 180ms ease; white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; }
.mx-footer-news-btn:hover { background: color-mix(in srgb, var(--mx-ink) 85%, var(--mx-white)); }
.mx-footer-news-success { display: none; position: absolute; bottom: -26px; left: 0; font-family: var(--mx-font-sans); font-size: 13px; font-weight: 600; color: var(--mx-surface); }
.mx-footer-inner { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.mx-footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: 48px;
  padding: 56px 0 40px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}
.mx-footer-brand-col { max-width: 320px; }
.mx-footer-brand-text { display: flex; align-items: center; gap: 8px; height: 42px; font-family: var(--mx-font-sans); font-size: 24px; font-weight: 800; color: var(--mx-surface); letter-spacing: -0.02em; }
.mx-footer-brand-text i { color: var(--mx-primary); font-size: 22px; }
.mx-footer-brand-img { height: 42px; margin-bottom: 18px; width: auto; max-width: 200px; object-fit: contain; }
.mx-footer-tagline { font-family: var(--mx-font-sans); font-size: 14px; color: rgba(255,255,255,0.72); line-height: 1.6; margin: 0 0 20px; max-width: 300px; }
.mx-footer-social { display: flex; gap: 10px; flex-wrap: wrap; }
.mx-footer-social a { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.18); color: var(--mx-surface); text-decoration: none; font-size: 15px; transition: background 220ms ease, border-color 220ms ease, transform 220ms ease, color 220ms ease; }
.mx-footer-social a:hover { background: var(--mx-primary); border-color: var(--mx-primary); color: var(--mx-surface); box-shadow: 0 6px 16px rgba(44, 183, 223, 0.35); }
.mx-footer-col-title { font-family: var(--mx-font-sans); font-size: 13px; font-weight: 700; color: var(--mx-surface); text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 18px; position: relative; padding-bottom: 10px; }
.mx-footer-col-title::after { content: ''; position: absolute; left: 0; bottom: 0; width: 26px; height: 2px; background: var(--mx-primary); border-radius: 2px; }
.mx-footer-link { display: block; font-family: var(--mx-font-sans); font-size: 14px; color: rgba(255,255,255,0.72); text-decoration: none; margin-bottom: 10px; transition: color 180ms ease, padding-left 180ms ease; }
.mx-footer-link:hover { color: var(--mx-primary); padding-left: 4px; }
.mx-footer-bottom { padding: 22px 0; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
.mx-footer-copy { font-family: var(--mx-font-sans); font-size: 13px; color: rgba(255,255,255,0.55); }
.mx-footer-pay { display: flex; align-items: center; gap: 14px; }
.mx-footer-pay-item { font-size: 26px; color: rgba(255,255,255,0.65); transition: color 180ms ease, transform 180ms ease; }
.mx-footer-pay-item:hover { color: var(--mx-surface); }
/* App download badges */
.mx-footer-appbadges { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
.mx-footer-appbadge { display: inline-flex; align-items: center; gap: 9px; padding: 8px 14px; background: var(--mx-white-a08); border: 1px solid var(--mx-white-a15); border-radius: var(--mx-radius-sm); text-decoration: none; transition: background 200ms ease, border-color 200ms ease, transform 200ms ease; }
.mx-footer-appbadge:hover { background: var(--mx-white-a15); border-color: var(--mx-primary); }
.mx-footer-appbadge > i { font-size: 22px; color: var(--mx-surface); }
.mx-footer-appbadge-text { display: flex; flex-direction: column; line-height: 1.1; }
.mx-footer-appbadge-sm { font-family: var(--mx-font-sans); font-size: 9px; color: var(--mx-white-a60); letter-spacing: 0.02em; }
.mx-footer-appbadge-lg { font-family: var(--mx-font-sans); font-size: 13px; font-weight: 700; color: var(--mx-surface); }
/* Newsletter */
.mx-footer-newsletter { margin-top: 18px; }
.mx-footer-newsletter p { font-size: 13px; color: var(--mx-white-a50); margin-bottom: 10px; }
.mx-footer-newsletter-form { display: flex; gap: 6px; max-width: 320px; }
.mx-footer-newsletter-input { flex: 1; padding: 10px 14px; border: 1px solid var(--mx-white-a15); border-radius: var(--mx-radius-sm); background: var(--mx-white-a06); color: var(--mx-surface); font-size: 13px; font-family: var(--mx-font-sans); outline: none; transition: border-color 180ms ease, background 180ms ease; }
.mx-footer-newsletter-input::placeholder { color: var(--mx-white-a35); }
.mx-footer-newsletter-input:focus { border-color: var(--mx-primary); background: var(--mx-white-a10); }
.mx-footer-newsletter-btn { padding: 10px 18px; background: var(--mx-primary); color: var(--mx-surface); border: none; border-radius: var(--mx-radius-sm); font-weight: 600; font-size: 13px; font-family: var(--mx-font-sans); cursor: pointer; transition: background 180ms ease; white-space: nowrap; }
.mx-footer-newsletter-btn:hover { background: var(--mx-primary-dark); }
/* Back-to-top */
.mx-back-to-top { position: fixed; bottom: 30px; right: 30px; z-index: 999; width: 44px; height: 44px; border-radius: 50%; background: var(--mx-primary); color: var(--mx-surface); border: none; font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity 250ms ease, transform 250ms ease, visibility 250ms ease, background 180ms ease; box-shadow: var(--mx-shadow-sm); }
.mx-back-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }
.mx-back-to-top:hover { background: var(--mx-primary-dark); }
@media (max-width: 1024px) { .mx-footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; } .mx-footer-grid > .mx-footer-col:nth-child(5) { grid-column: span 2; } }
@media (max-width: 768px) { .mx-footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; } .mx-footer-grid > .mx-footer-col:nth-child(5) { grid-column: auto; } .mx-footer-news-row { flex-direction: column; align-items: flex-start; gap: 18px; } .mx-footer-news-form { width: 100%; max-width: none; } .mx-footer-bottom { flex-direction: column; text-align: center; } .mx-back-to-top { bottom: 20px; right: 20px; width: 40px; height: 40px; } }
@media (max-width: 480px) { .mx-footer-grid { grid-template-columns: 1fr; } }.mxNavbar{position:sticky;top:0;z-index:1000;background:var(--mx-surface);border-bottom:1px solid var(--mx-border)}
.mxHamburger{display:none;width:40px;height:40px;align-items:center;justify-content:center;border:none;background:transparent;cursor:pointer;color:var(--mx-ink);font-size:22px;transition:transform 250ms ease}
.mxHamburger.open{transform:rotate(90deg)}
.mxMobileMenu{display:none;padding:12px 20px;border-top:1px solid var(--mx-border);max-height:0;overflow:hidden;transition:max-height 400ms ease}
.mxMobileMenu.open{display:block;max-height:600px}
.mxMobileMenu a,.mx-mobile-link{display:block;padding:12px 14px;font-family:var(--mx-font-sans);font-size:15px;font-weight:500;color:var(--mx-ink-muted);text-decoration:none;border-radius:var(--mx-radius-sm);transition:background 180ms ease,color 180ms ease}
.mxMobileMenu a:hover,.mx-mobile-link:hover{background:var(--mx-surface-alt);color:var(--mx-primary)}
.mx-mobile-link.active{color:var(--mx-primary);font-weight:600}
.mxUserBtn{display:flex;align-items:center;gap:8px;padding:4px 10px 4px 4px;border-radius:var(--mx-radius-pill);cursor:pointer;border:none;background:transparent;transition:background 180ms ease}
.mxUserBtn:hover{background:var(--mx-surface-alt)}
.mxUserBtn.open{background:var(--mx-surface-alt)}
.mxUserDropdown{position:absolute;top:100%;right:0;margin-top:8px;background:var(--mx-surface);border:1px solid var(--mx-border);border-radius:var(--mx-radius-card);box-shadow:var(--mx-shadow-md);min-width:220px;overflow:hidden;z-index:1100;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity 200ms ease,transform 200ms ease,visibility 200ms ease}
.mxUserDropdown.open{opacity:1;visibility:visible;transform:translateY(0)}
.mx-user-logout{color:var(--mx-danger)}
.mx-user-logout:hover{background:var(--mx-danger-surface);color:var(--mx-danger)}
@media(max-width:768px){.mxHamburger{display:flex}}
/* Auth styles moved to auth_mx.css (single source of truth) */
/* ===== Practo-style navbar additions ===== */
/* .mx-nav-providers chip styling now sourced solely from ui_mx.css (W3 dedupe);
   patient_mx.css duplicate removed to keep one chip spec across shells. */
.mx-nav-providers-wrap { position: relative; }
.mx-nav-providers-caret { font-size: 10px !important; color: var(--mx-ink-muted); transition: transform var(--mx-transition); }
.mx-nav-providers.open .mx-nav-providers-caret { transform: rotate(180deg); }

.mx-providers-dropdown {
  position: absolute; top: calc(100% + 8px); right: 0;
  background: var(--mx-white); border: 1px solid var(--mx-border);
  border-radius: var(--mx-radius-lg); box-shadow: var(--mx-shadow-xl);
  min-width: 280px; padding: 8px; z-index: var(--mx-z-dropdown);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--mx-transition), transform var(--mx-transition), visibility var(--mx-transition);
}
.mx-providers-dropdown.open { opacity: 1; visibility: visible; transform: translateY(0); }
.mx-providers-link {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  text-decoration: none; border-radius: var(--mx-radius);
  transition: background var(--mx-transition);
}
.mx-providers-link:hover { background: var(--mx-surface-alt); }
.mx-providers-link i { font-size: 18px; color: var(--mx-primary); width: 24px; text-align: center; flex-shrink: 0; }
.mx-providers-link strong { display: block; font-size: 14px; font-weight: 600; color: var(--mx-ink); line-height: 1.3; }
.mx-providers-link span { display: block; font-size: 13px; color: var(--mx-ink-muted); line-height: 1.3; }

/* Login text link + Sign Up solid CTA (Practo-style hierarchy) */
.mx-nav-login {
  font-family: var(--mx-font-sans); font-size: 14px; font-weight: 600;
  color: var(--mx-ink-soft); text-decoration: none; padding: 8px 16px;
  border-radius: var(--mx-radius-sm); transition: color var(--mx-transition);
}
.mx-nav-login:hover { color: var(--mx-primary); }
.mx-nav-signup {
  font-family: var(--mx-font-sans); font-size: 14px; font-weight: 600;
  color: var(--mx-white); text-decoration: none; padding: 9px 22px;
  border: none; border-radius: var(--mx-radius-pill); white-space: nowrap;
  background: var(--mx-primary);
  box-shadow: var(--mx-shadow-primary);
  transition: background var(--mx-transition), transform var(--mx-transition);
}
.mx-nav-signup:hover { background: var(--mx-primary-dark); }

.mx-mobile-divider { height: 1px; background: var(--mx-border); margin: 8px 16px; }

@media (max-width: 1024px) {
  .mx-nav-providers-wrap { display: none; }
}


/* ============================================================
   AI SYMPTOM ASSISTANT (symptom-checker, Worker C)
   Token-only; appended per design system. Sections:
   card shell / form fields / severity slider / result states
   ============================================================ */
.mx-sc-ai-section { padding: 24px 0 8px; }
.mx-sc-ai-card {
  background: var(--mx-surface);
  border: 1px solid var(--mx-border-light);
  border-radius: var(--mx-radius-xl);
  box-shadow: var(--mx-elevation-1);
  padding: var(--mx-space-6);
  max-width: 760px;
  margin: 0 auto;
}
.mx-sc-ai-card--upsell { text-align: center; padding: var(--mx-space-8) var(--mx-space-6); }
.mx-sc-ai-head { display: flex; gap: var(--mx-space-4); margin-bottom: var(--mx-space-5); align-items: flex-start; }
.mx-sc-ai-head-icon {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  font-size: 20px;
  color: var(--mx-primary-darker);
  background: var(--mx-primary-surface);
  border: 1px solid var(--mx-primary-glow);
  border-radius: var(--mx-radius-md);
}
.mx-sc-ai-title { margin: 0 0 4px; font-size: var(--mx-text-xl); font-weight: var(--mx-font-weight-bold); color: var(--mx-ink-deep); }
.mx-sc-ai-sub { margin: 0; font-size: var(--mx-text-sm); color: var(--mx-ink-muted); line-height: 1.55; }
.mx-sc-ai-upsell-actions { display: flex; gap: var(--mx-space-3); justify-content: center; flex-wrap: wrap; margin-top: var(--mx-space-4); }

/* Form fields */
.mx-sc-ai-field { margin-bottom: var(--mx-space-4); }
.mx-sc-ai-field label { display: block; font-size: var(--mx-text-sm); font-weight: 600; color: var(--mx-ink); margin-bottom: 6px; }
.mx-sc-req { color: var(--mx-danger); }
.mx-sc-ai-field textarea,
.mx-sc-ai-field input[type="number"],
.mx-sc-ai-field select {
  width: 100%;
  font-family: var(--mx-font);
  font-size: var(--mx-text-sm);
  color: var(--mx-ink);
  background: var(--mx-surface);
  border: 1px solid var(--mx-border);
  border-radius: var(--mx-radius-md);
  padding: 10px 14px;
  transition: border-color var(--mx-transition), box-shadow var(--mx-transition);
}
.mx-sc-ai-field textarea { resize: vertical; min-height: 96px; line-height: 1.5; }
.mx-sc-ai-field textarea:focus,
.mx-sc-ai-field input[type="number"]:focus,
.mx-sc-ai-field select:focus {
  outline: none;
  border-color: var(--mx-primary);
  box-shadow: 0 0 0 3px var(--mx-primary-glow);
}
.mx-sc-ai-hint { margin: 6px 0 0; font-size: var(--mx-text-xs); color: var(--mx-ink-muted); }
.mx-sc-ai-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--mx-space-4); }

/* Severity slider */
.mx-sc-ai-severity-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.mx-sc-ai-severity-head label { margin-bottom: 0; }
.mx-sc-ai-severity-head output {
  font-size: var(--mx-text-sm);
  font-weight: var(--mx-font-weight-bold);
  color: var(--mx-primary-darker);
  background: var(--mx-primary-surface);
  border-radius: var(--mx-radius-sm);
  padding: 2px 10px;
}
.mx-sc-ai-severity input[type="range"] {
  width: 100%;
  height: 6px;
  appearance: none; -webkit-appearance: none;
  background: var(--mx-primary);
  border-radius: var(--mx-radius-pill);
  outline: none;
  margin: 10px 0 6px;
}
.mx-sc-ai-severity input[type="range"]::-webkit-slider-thumb {
  appearance: none; -webkit-appearance: none;
  width: 20px; height: 20px;
  background: var(--mx-surface);
  border: 3px solid var(--mx-primary);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: var(--mx-elevation-1);
}
.mx-sc-ai-severity input[type="range"]::-moz-range-thumb {
  width: 14px; height: 14px;
  background: var(--mx-surface);
  border: 3px solid var(--mx-primary);
  border-radius: 50%;
  cursor: pointer;
}
.mx-sc-ai-severity input[type="range"]:focus-visible { box-shadow: 0 0 0 3px var(--mx-primary-glow); }
.mx-sc-ai-severity-scale { display: flex; justify-content: space-between; font-size: var(--mx-text-xs); color: var(--mx-ink-muted); }

/* Actions row */
.mx-sc-ai-actions { display: flex; align-items: center; gap: var(--mx-space-4); flex-wrap: wrap; margin-top: var(--mx-space-2); }
.mx-sc-ai-note { display: flex; align-items: center; gap: 6px; margin: 0; font-size: var(--mx-text-xs); color: var(--mx-ink-muted); }
.mx-sc-ai-note i { color: var(--mx-primary-dark); }

/* Result panel */
.mx-sc-ai-result { margin-top: var(--mx-space-6); border-top: 1px solid var(--mx-border-light); padding-top: var(--mx-space-5); }
.mx-sc-ai-state-title { margin: 0 0 var(--mx-space-3); font-size: var(--mx-text-lg); font-weight: var(--mx-font-weight-bold); color: var(--mx-ink-deep); }

/* Loading skeleton */
.mx-sc-ai-state--loading .mx-sc-skel-row { display: flex; gap: var(--mx-space-2); margin-bottom: var(--mx-space-3); }
.mx-sc-skel-badge { width: 88px; height: 26px; border-radius: var(--mx-radius-badge); }
.mx-sc-skel-chip { width: 110px; height: 26px; border-radius: var(--mx-radius-pill); }
.mx-sc-skel-chip--short { width: 70px; }
.mx-sc-skel-line { height: 14px; margin-bottom: 10px; }
.mx-sc-skel-line--short { width: 65%; }
.mx-sc-skel-card { height: 132px; border-radius: var(--mx-radius-card); margin-bottom: var(--mx-space-3); }

/* Error state */
.mx-sc-ai-state--error {
  background: var(--mx-danger-surface);
  border: 1px solid color-mix(in srgb, var(--mx-danger) 25%, transparent);
  border-radius: var(--mx-radius-md);
  padding: var(--mx-space-4) var(--mx-space-5);
  display: flex; flex-direction: column; gap: var(--mx-space-3);
}
.mx-sc-ai-error-inner { display: flex; gap: var(--mx-space-3); align-items: flex-start; }
.mx-sc-ai-error-inner > i { color: var(--mx-danger); font-size: 20px; margin-top: 3px; }
.mx-sc-ai-state--error .mx-sc-ai-state-title { color: var(--mx-danger-dark); margin-bottom: 4px; font-size: var(--mx-text-base); }
.mx-sc-ai-error-msg { margin: 0 0 4px; font-size: var(--mx-text-sm); color: var(--mx-ink-soft); }
.mx-sc-ai-error-relogin { margin: 0; font-size: var(--mx-text-sm); color: var(--mx-danger-dark); font-weight: 600; }
.mx-sc-ai-error-relogin a { color: var(--mx-danger-dark); text-decoration: underline; }
.mx-sc-ai-state--error .mx-btn { align-self: flex-start; }

/* Done: triage card */
.mx-sc-ai-triage {
  background: var(--mx-surface);
  border: 1px solid var(--mx-border-light);
  border-radius: var(--mx-radius-card);
  padding: var(--mx-space-5);
}
.mx-sc-ai-triage-head { display: flex; justify-content: space-between; align-items: center; gap: var(--mx-space-3); flex-wrap: wrap; margin-bottom: var(--mx-space-3); }
.mx-sc-ai-summary { margin: 0 0 var(--mx-space-3); font-size: var(--mx-text-sm); line-height: 1.6; color: var(--mx-ink-soft); }
.mx-sc-ai-specialties { display: flex; align-items: center; gap: var(--mx-space-2); flex-wrap: wrap; }
.mx-sc-ai-spec-label { font-size: var(--mx-text-xs); font-weight: 600; color: var(--mx-ink-muted); margin-right: 2px; }

/* Emergency banner */
.mx-sc-ai-emergency {
  display: flex; gap: var(--mx-space-3); align-items: flex-start;
  background: var(--mx-danger-surface);
  border: 1px solid color-mix(in srgb, var(--mx-danger) 35%, transparent);
  border-left: 4px solid var(--mx-danger);
  border-radius: var(--mx-radius-md);
  padding: var(--mx-space-4) var(--mx-space-5);
  margin-top: var(--mx-space-4);
}
.mx-sc-ai-emergency > i { color: var(--mx-danger); font-size: 22px; margin-top: 2px; }
.mx-sc-ai-emergency strong { display: block; color: var(--mx-danger-dark); font-size: var(--mx-text-base); margin-bottom: 2px; }
.mx-sc-ai-emergency p { margin: 0; font-size: var(--mx-text-sm); color: var(--mx-ink-soft); line-height: 1.5; }

/* Done: doctors */
.mx-sc-ai-doctors { margin-top: var(--mx-space-5); }
.mx-sc-ai-doctors-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--mx-space-3); flex-wrap: wrap; margin-bottom: var(--mx-space-3); }
.mx-sc-empty-mini {
  text-align: center; padding: var(--mx-space-6) var(--mx-space-4);
  border: 1px dashed var(--mx-border);
  border-radius: var(--mx-radius-card);
  color: var(--mx-ink-muted);
}
.mx-sc-empty-mini i { font-size: 28px; margin-bottom: 8px; display: block; color: var(--mx-primary-light); }
.mx-sc-empty-mini p { margin: 0 0 var(--mx-space-3); font-size: var(--mx-text-sm); }

/* Manual-flow empty state refinement */
.mx-sc-empty .mx-sc-empty-try { display: flex; align-items: center; gap: var(--mx-space-2); flex-wrap: wrap; justify-content: center; margin: var(--mx-space-3) 0; }
.mx-sc-empty-try-label { font-size: var(--mx-text-xs); font-weight: 600; color: var(--mx-ink-muted); }
.mx-sc-empty .mx-sc-chip { padding: 5px 12px; font-size: var(--mx-text-xs); }
.mx-sc-suggest-strip { padding: 4px 0; }
.mx-sc-suggest-strip p { text-align: center; font-size: var(--mx-text-sm); color: var(--mx-ink-soft); margin: 0 0 var(--mx-space-2); }

@media (max-width: 640px) {
  .mx-sc-ai-card { padding: var(--mx-space-5) var(--mx-space-4); }
  .mx-sc-ai-grid { grid-template-columns: 1fr; }
  .mx-sc-ai-actions { flex-direction: column; align-items: stretch; }
  .mx-sc-ai-note { justify-content: center; }
  .mx-sc-ai-emergency { flex-direction: column; gap: var(--mx-space-2); }
  .mx-sc-ai-card--upsell .mx-sc-ai-upsell-actions { flex-direction: column; align-items: stretch; }
}

/* ============================================================
   DOCCURE CHARACTER LAYER (patient dashboard surfaces) — v5
   Tokens-only (no raw hex), legacy-token fallbacks. Brand-blue
   active states, card hover lift, gradient presence on hero
   header of dashboard + primary CTA accents.
   ============================================================ */

/* ---- Dashboard head: subtle wash band (no gradient) ---- */
.mx-dash-head {
  position: relative;
  background: var(--mx-primary-surface);
  border-radius: var(--mx-radius-card);
  padding: 4px 6px 0;
}
.mx-dash-title { letter-spacing: -0.015em; }

/* ---- Stat cards: lift on hover ---- */
.mx-stat-card {
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}
.mx-stat-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(15,23,42,0.08);
  border-color: var(--mx-brand, var(--mx-primary));
}

/* ---- Tabs: brand-blue active ---- */
.mx-dash-tab.active { color: var(--mx-brand, var(--mx-primary)); border-bottom-color: var(--mx-brand, var(--mx-primary)); }
.mx-dash-tab.active .mx-dash-tab-badge {
  background: var(--mx-brand-surface, var(--mx-primary-surface));
  color: var(--mx-brand, var(--mx-primary-dark));
}

/* ---- Quick action tiles: lift + brand border ---- */
.mx-quick-action { transition: all 220ms ease; }
.mx-quick-action:hover {
  transform: translateY(-3px);
  border-color: var(--mx-brand, var(--mx-primary));
  box-shadow: 0 8px 20px rgba(15,23,42,0.08);
}

/* ---- Sidebar header: brand wash ---- */
.mx-dash-sidebar-header {
  background: var(--mx-primary-surface);
}

/* ---- Dashboard primary CTAs: gradient (composite specificity to beat
        user_dashboard_mx.css shared-sheet re-assertions) ---- */
.mx-dash-page .mx-btn.mx-btn-primary {
  background: var(--mx-gradient);
  color: var(--mx-white);
  border-color: transparent;
}
.mx-dash-page .mx-btn.mx-btn-primary:hover {
  background: var(--mx-gradient-hover);
  color: var(--mx-white);
}

/* ---- Verified badges in green / fee emphasis in orange (patient tables) ---- */
.mx-dash-panel .mx-badge-success {
  background: var(--mx-success-surface);
  color: var(--mx-success-dark);
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .mx-stat-card, .mx-quick-action { transition: none !important; transform: none !important; }
}


/* ============================================================
   DOCCURE V2 PATIENT DASHBOARD LAYER — v=dc2 (Worker B)
   Stat widgets: 10px radius + 0 7.5px 17.5px rgba(0,0,0,.05)
   (dashboard-widget-box measured shadow). Primary CTAs: 44px
   pill + blue-cyan gradient. Section titles 24px/600 slate.
   ============================================================ */

/* ---- Stat widget boxes: Doccure dashboard-widget-box treatment ---- */
.mx-dash-page .mx-stat-card.mx-stat-card,
.mx-dash-page .mx-dash-panel.mx-dash-panel,
.mx-dash-page .mx-quick-action.mx-quick-action {
  border-radius: 10px !important;
  box-shadow: var(--mx-shadow-widget, 0 7.5px 17.5px rgba(0,0,0,.05)) !important;
  transition: transform 250ms ease, box-shadow 250ms ease;
}
.mx-dash-page .mx-stat-card.mx-stat-card:hover,
.mx-dash-page .mx-quick-action.mx-quick-action:hover {
  transform: translateY(-3px);
  box-shadow: 0 10.5px 24px rgba(0,0,0,.07) !important;
}

/* ---- Patient dashboard primary CTAs: 44px pill + gradient ---- */
.mx-dash-page .mx-btn,
.mx-dash-page .mx-btn-primary,
.mx-dash-page button[type="submit"],
.mx-dash-page .mx-quick-action {
  border-radius: var(--mx-radius-pill, 9999px) !important;
}
.mx-dash-page .mx-btn.mx-btn-primary {
  background: var(--mx-primary) !important;
  color: var(--mx-white) !important;
  border-color: transparent !important;
  box-shadow: var(--mx-shadow-cta) !important;
}
.mx-dash-page .mx-btn.mx-btn-primary:hover {
  background: var(--mx-primary-dark) !important;
  box-shadow: var(--mx-shadow-cta-hover) !important;
}

/* ---- Section titles: 24px/600 slate-900 (Doccure dashboard spec) ---- */
.mx-dash-title {
  font-size: 24px;
  font-weight: 600;
  color: var(--mx-ink);
  letter-spacing: -0.01em;
}
.mx-dash-panel h3,
.mx-dash-panel .mx-panel-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--mx-ink);
}

/* ============================================================
   DOCCURE V2.1 PATIENT EXPERIENCE LAYER — v=v2.1 (PATIENT agent)
   Scope: widget cards 10px + 0 7.5px 17.5px rgba(0,0,0,.05),
   24px/600 headings, pill gradient CTAs, tinted stat icon
   chips, light sidebar w/ brand-blue active rail, status
   badges as tinted pills. Symptom-checker: VISUALS ONLY.
   ============================================================ */

/* ---- 1. Widget cards: appointments / consultations / family
        list rows get the same Doccure widget treatment ---- */
.mx-dash-page .mx-ap-item.mx-ap-item,
.mx-dash-page .mx-cs-item.mx-cs-item,
.mx-dash-page .mx-fm-card.mx-fm-card {
  border-radius: 10px !important;
  box-shadow: var(--mx-shadow-widget, 0 7.5px 17.5px rgba(0,0,0,.05)) !important;
  border-color: var(--mx-border-light);
  transition: transform 250ms ease, box-shadow 250ms ease, border-color 250ms ease;
}
.mx-dash-page .mx-ap-item:hover,
.mx-dash-page .mx-cs-item:hover,
.mx-dash-page .mx-fm-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10.5px 24px rgba(0,0,0,.07) !important;
  border-color: var(--mx-brand, var(--mx-primary));
}

/* ---- 2. Stat icon chips: tinted 10px rounded tiles ---- */
.mx-dash-page .mx-stat-icon.mx-stat-icon {
  border-radius: 10px !important;
  background: var(--mx-primary-surface);
  color: var(--mx-primary-dark);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mx-primary) 12%, transparent);
}
.mx-dash-page .mx-stat-icon.mx-stat-icon-blue { background: var(--mx-primary-surface); color: var(--mx-primary-dark); }
.mx-dash-page .mx-stat-icon.mx-stat-icon-green { background: var(--mx-success-surface); color: var(--mx-success-dark); }
.mx-dash-page .mx-stat-icon.mx-stat-icon-orange { background: var(--mx-warning-surface); color: var(--mx-warning-dark); }
.mx-dash-page .mx-stat-icon.mx-stat-icon-purple { background: var(--mx-secondary-surface, var(--mx-primary-surface)); color: var(--mx-secondary-dark, var(--mx-primary-dark)); }

/* ---- 3. Sidebar: light surface + brand-blue active rail ---- */
.mx-dash-page .mx-dash-sidebar-card {
  background: var(--mx-surface);
  border: 1px solid var(--mx-border-light);
  box-shadow: var(--mx-shadow-widget, 0 7.5px 17.5px rgba(0,0,0,.05));
  border-radius: 10px;
  overflow: hidden;
}
.mx-dash-page .mx-nav-active.mx-nav-active {
  position: relative;
  background: var(--mx-primary-surface);
  color: var(--mx-primary-dark);
  box-shadow: none;
}
.mx-dash-page .mx-nav-active::before {
  content: "";
  position: absolute;
  left: 0; top: 6px; bottom: 6px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--mx-primary);
}

/* ---- 4. Status badges: tinted pills (all patient surfaces) ---- */
.mx-dash-page .mx-badge {
  border-radius: var(--mx-radius-pill, 9999px) !important;
  font-weight: 600;
  padding: 4px 11px;
}
.mx-dash-page .mx-badge.no-dot { padding-left: 11px; }

/* ---- 5. Section headings: 24px/600 re-assert (shared sheets
        load after this file on some surfaces) ---- */
.mx-dash-page .mx-dash-title.mx-dash-title {
  font-size: 24px !important;
  font-weight: 600 !important;
  color: var(--mx-ink) !important;
  letter-spacing: -0.01em !important;
}

/* ---- 6. Pill gradient primary CTAs — extend to patient
        surfaces outside .mx-dash-page (symptom-checker etc.) ---- */
.mx-sc-page .mx-btn.mx-btn-primary,
.mx-sc-page .mx-sc-searchbar-btn,
.mx-sc-page .mx-sc-fallback-btn,
.mx-sc-ai-card .mx-btn.mx-btn-primary {
  border-radius: var(--mx-radius-pill, 9999px) !important;
  background: var(--mx-primary) !important;
  color: var(--mx-white) !important;
  border-color: transparent !important;
  box-shadow: var(--mx-shadow-cta) !important;
}
.mx-sc-page .mx-btn.mx-btn-primary:hover,
.mx-sc-page .mx-sc-searchbar-btn:hover,
.mx-sc-page .mx-sc-fallback-btn:hover,
.mx-sc-ai-card .mx-btn.mx-btn-primary:hover {
  background: var(--mx-primary-dark) !important;
  color: var(--mx-white) !important;
  box-shadow: var(--mx-shadow-cta-hover) !important;
}

/* ---- 7. Symptom-checker VISUAL pass (v2.1): chips + result
        cards get widget treatment. AI logic/markup untouched.
        (Fix-batch A: AI card shadow superseded by the public-card
        spec layer in symptom_checker_mx.css v21a — kept in sync
        here so both load orders render the spec value.) ---- */
.mx-sc-page .mx-sc-ai-card,
.mx-sc-page .mx-sc-ai-triage,
.mx-sc-page .mx-sc-ai-card--upsell {
  border-radius: 10px !important;
  box-shadow: var(--mx-shadow-soft, 0 4px 34px rgba(206,206,206,.25)) !important;
}
.mx-sc-page .mx-sc-chip {
  border-radius: var(--mx-radius-pill, 9999px);
  transition: all 180ms ease;
}
.mx-sc-page .mx-sc-chip.is-active {
  background: var(--mx-primary);
  border-color: transparent;
  color: var(--mx-white);
  box-shadow: 0 4px 14px rgba(2,191,255,.28);
}
.mx-sc-page .mx-sc-spec-pill {
  border-radius: var(--mx-radius-pill, 9999px);
}

/* ---- 8. Empty states: centered card treatment ---- */
.mx-dash-page .mx-empty-state,
.mx-sc-page .mx-empty-state {
  border-radius: 10px;
}

/* ---- 9. Mobile (<=640px): compact paddings, no transform
        on touch cards to avoid sticky-hover ---- */
@media (max-width: 640px) {
  .mx-dash-page .mx-ap-item:hover,
  .mx-dash-page .mx-cs-item:hover,
  .mx-dash-page .mx-fm-card:hover,
  .mx-dash-page .mx-quick-action:hover,
  .mx-dash-page .mx-stat-card:hover {
    transform: none;
  }
  .mx-dash-page .mx-nav-active::before { top: 4px; bottom: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .mx-dash-page .mx-ap-item,
  .mx-dash-page .mx-cs-item,
  .mx-dash-page .mx-fm-card { transition: none !important; }
}

/* ============================================================
   V2.1 FIX-BATCH A — 13px text floor (D8), patient-scope
   selectors re-asserted from this later-loading sheet so the
   frozen ui_mx.css / admin_theme.css values are overridden:
   - .mx-providers-link span  (12px -> 13px, footer/nav provider
     micro-copy; ui_mx.css:845 is frozen)
   - .sidebar-menu-header     (10-11px -> 13px, shared admin/
     doctor sidebar; admin_theme.css frozen)
   - .mx-dcard-mode           (11px -> 13px chip on doctor cards;
     listing_mx.css frozen — batch B owns the base rule)
   Note: same-specificity later source order wins without
   !important; !important added where frozen sheets use it.
   ============================================================ */
.mx-providers-link span { font-size: 13px !important; }
.sidebar-menu-header { font-size: 13px !important; }
.mx-dcard-mode { font-size: 13px !important; }

/* ============ END DOCCURE V2.1 PATIENT LAYER ============ */