/* ============================================================
   MXPracto Doctor Listing + Detail - Token-based, Practo-accurate
   Uses var(--mx-*) tokens, Inter font, 8px radius, flat shadows
   ============================================================ */

:root {
  --mx-white-a06: color-mix(in srgb, var(--mx-white) 6%, transparent);
  --mx-white-a07: color-mix(in srgb, var(--mx-white) 7%, transparent);
  --mx-white-a08: color-mix(in srgb, var(--mx-white) 8%, transparent);
  --mx-white-a22: color-mix(in srgb, var(--mx-white) 22%, transparent);
  --mx-white-a85: color-mix(in srgb, var(--mx-white) 85%, transparent);
  --mx-white-a95: color-mix(in srgb, var(--mx-white) 95%, transparent);
}

.mx-doc-page {
  font-family: var(--mx-font);
  color: var(--mx-ink);
  background: var(--mx-surface-alt);
  min-height: 60vh;
}

/* ===== Page-level search bar — compact solid-primary page header ===== */
.mx-doc-searchbar {
  background: var(--mx-primary);
  color: var(--mx-white);
  border-bottom: 1px solid color-mix(in srgb, var(--mx-primary-dark) 60%, var(--mx-ink) 40%);
  padding: 28px 0 32px;
}
.mx-doc-searchbar-inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 20px;
  text-align: center;
}
.mx-doc-searchbar-title { margin-bottom: 14px; }
.mx-doc-searchbar-title h1 {
  color: var(--mx-white);
  font-family: var(--mx-font);
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 4px;
  letter-spacing: -0.02em;
}
.mx-doc-searchbar-form {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--mx-white);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--mx-radius-pill);
  padding: 6px 6px 6px 20px;
  box-shadow: var(--mx-shadow-cta);
  transition: border-color var(--mx-transition), box-shadow var(--mx-transition);
}
.mx-doc-searchbar-form:focus-within { border-color: var(--mx-white); box-shadow: var(--mx-shadow-cta-hover); }
.mx-doc-searchbar-field {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  min-width: 0;
}
.mx-doc-searchbar-field i { color: var(--mx-ink-muted); font-size: var(--mx-text-lg); }
.mx-doc-searchbar-field input {
  flex: 1 1 auto;
  border: none;
  outline: none;
  font-family: var(--mx-font);
  font-size: var(--mx-text-base);
  color: var(--mx-ink);
  background: transparent;
  min-width: 0;
  padding: 6px 0;
}
.mx-doc-searchbar-field input::placeholder { color: var(--mx-ink-muted); }
.mx-doc-searchbar-vline {
  width: 1px; height: 24px; background: var(--mx-border); flex: 0 0 auto;
}
.mx-doc-searchbar-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mx-font);
  font-weight: 700;
  font-size: var(--mx-text-base);
  color: var(--mx-white);
  background: var(--mx-primary-dark);
  border: none;
  border-radius: var(--mx-radius-pill);
  padding: 11px 26px;
  cursor: pointer;
  transition: background var(--mx-transition);
  box-shadow: var(--mx-shadow-cta);
}
.mx-doc-searchbar-btn:hover { background: var(--mx-primary-darker); }

.mx-doc-rhead-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 20px 0;
}

.mx-doc-hero {
  position: relative;
  background: var(--mx-primary);
  color: var(--mx-white);
  padding: 28px 0 32px;
  border-bottom: 1px solid color-mix(in srgb, var(--mx-primary-dark) 60%, var(--mx-ink) 40%);
  overflow: hidden;
}
.mx-doc-hero::after { display: none; }
.mx-doc-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0 auto;
  padding: 0 20px;
  text-align: center;
}
.mx-doc-hero h1 {
  font-size: 24px;
  font-weight: 700;
  color: var(--mx-white);
  margin: 0 0 8px;
  letter-spacing: -0.025em;
  text-shadow: 0 2px 12px rgba(0,0,0,0.18);
}
.mx-doc-hero h2 {
  font-size: 18px;
  font-weight: 500;
  color: var(--mx-white);
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
.mx-doc-hero p {
  font-size: 13px;
  font-weight: 400;
  color: var(--mx-white-a85);
  margin: 0 0 24px;
}
.mx-doc-hero-eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--mx-white-a10);
  border: 1px solid var(--mx-white-a20);
  color: var(--mx-white);
  font-family: var(--mx-font);
  font-size: var(--mx-text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 7px 14px;
  border-radius: var(--mx-radius-pill);
  margin-bottom: 18px;
  backdrop-filter: blur(4px);
}
.mx-doc-hero-eyebrow i{ color: var(--mx-primary-light); font-size: 11px; }
.mx-doc-hero-trust{
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  gap: 32px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--mx-white-a20);
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
.mx-doc-hero-trust-item{ text-align: center; }
.mx-doc-hero-trust-num{ font-size: var(--mx-text-xl); font-weight: 800; color: var(--mx-white); line-height: 1; }
.mx-doc-hero-trust-label{ font-size: var(--mx-text-sm); color: rgba(255,255,255,0.8); margin-top: 4px; }
.mx-doc-hero-trust-divider{ width: 1px; height: 32px; background: rgba(255,255,255,0.18); }
.mx-doc-hero-glow{
  position: absolute;
  width: 480px; height: 480px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--mx-primary) 6%, var(--mx-surface-alt));
  pointer-events: none;
  z-index: 0;
  filter: blur(40px);
}
.mx-doc-hero-glow--1{ top: -180px; left: -100px; }
.mx-doc-hero-glow--2{ bottom: -160px; right: -120px; background: color-mix(in srgb, var(--mx-primary) 6%, var(--mx-surface-alt)); }

.mx-doc-hero-bar {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--mx-white);
  border-radius: var(--mx-radius-pill);
  padding: 6px 6px 6px 20px;
  box-shadow: 0 0 0 4px rgba(255,255,255,0.12), 0 18px 48px rgba(0,0,0,0.28), 0 4px 14px rgba(20,190,240,0.18);
  transition: box-shadow var(--mx-transition);
}
.mx-doc-hero-bar:focus-within {
  box-shadow: 0 0 0 5px rgba(255,255,255,0.18), 0 22px 56px rgba(0,0,0,0.32), 0 6px 18px rgba(20,190,240,0.28);
}
.mx-doc-hero-field {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  min-width: 0;
}
.mx-doc-hero-field i { color: var(--mx-ink-muted); font-size: var(--mx-text-lg); }
.mx-doc-hero-field input {
  flex: 1 1 auto;
  border: none;
  outline: none;
  font-family: var(--mx-font);
  font-size: var(--mx-text-base);
  color: var(--mx-ink);
  background: transparent;
  min-width: 0;
}
.mx-doc-hero-field input::placeholder { color: var(--mx-ink-muted); }
.mx-doc-hero-vline { width: 1px; height: 28px; background: var(--mx-border); flex: 0 0 auto; }
.mx-doc-hero-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mx-font);
  font-weight: 700;
  font-size: var(--mx-text-base);
  color: var(--mx-white);
  background: var(--mx-primary-darker);
  border: none;
  border-radius: var(--mx-radius-pill);
  padding: 12px 32px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(20,190,240,0.45);
  transition: background var(--mx-transition), box-shadow var(--mx-transition), transform var(--mx-transition);
}
.mx-doc-hero-btn:hover {
  background: color-mix(in srgb, var(--mx-primary-darker) 85%, var(--mx-ink) 15%);
  box-shadow: 0 6px 18px rgba(20,190,240,0.55);
}

.mx-doc-layout {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 20px 32px;
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 32px;
  align-items: start;
}

.mx-doc-aside {
  position: sticky;
  top: 84px;
  background: var(--mx-surface);
  border: 1px solid var(--mx-border);
  border-radius: var(--mx-radius-lg);
  padding: 22px 20px;
  box-shadow: var(--mx-shadow-sm);
}
.mx-doc-aside-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 16px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--mx-border-light);
}
.mx-doc-aside-head h3 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--mx-text-lg);
  font-weight: 700;
  color: var(--mx-ink);
  margin: 0;
  letter-spacing: -0.01em;
}
.mx-doc-aside-head h3 i { color: var(--mx-primary); font-size: 15px; }
.mx-doc-aside-clear {
  font-family: var(--mx-font);
  font-size: var(--mx-text-sm);
  font-weight: 600;
  color: var(--mx-primary);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--mx-radius-sm);
  transition: color var(--mx-transition), background var(--mx-transition);
}
.mx-doc-aside-clear:hover { color: var(--mx-primary-dark); background: var(--mx-primary-surface); }

.mx-doc-aside-promo{
  margin-top: 18px;
  padding: 22px 20px;
  border-radius: var(--mx-radius-lg);
  background: color-mix(in srgb, var(--mx-primary) 6%, var(--mx-surface-alt));
  border: 1px solid var(--mx-primary-glow);
  text-align: center;
}
.mx-doc-aside-promo-ico{
  width: 52px; height: 52px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: var(--mx-primary);
  color: var(--mx-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  box-shadow: 0 4px 12px rgba(20,190,240,0.35);
}
.mx-doc-aside-promo h4{
  font-family: var(--mx-font);
  font-size: 15px;
  font-weight: 700;
  color: var(--mx-ink);
  margin: 0 0 6px;
}
.mx-doc-aside-promo p{
  font-family: var(--mx-font);
  font-size: 13px;
  color: var(--mx-ink-muted);
  line-height: 1.5;
  margin: 0;
}

.mx-doc-filter { padding: 18px 0; border-bottom: 1px solid var(--mx-border-light); }
.mx-doc-filter:last-child { border-bottom: none; padding-bottom: 4px; }
.mx-doc-filter-title {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--mx-text-xs);
  font-weight: 700;
  color: var(--mx-ink);
  margin: 0 0 14px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.mx-doc-filter-title i { color: var(--mx-primary); font-size: 12px; }
.mx-doc-filter-options { display: flex; flex-direction: column; gap: 11px; }
.mx-doc-filter-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--mx-text-sm);
  color: var(--mx-ink-soft);
  cursor: pointer;
  user-select: none;
  transition: color var(--mx-transition);
}
.mx-doc-filter-opt:hover { color: var(--mx-primary-dark); }
.mx-doc-filter-opt input {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  cursor: pointer;
  flex: 0 0 auto;
  border: 1.5px solid var(--mx-gray-300);
  background: var(--mx-surface);
  position: relative;
  transition: border-color var(--mx-transition), background var(--mx-transition);
}
.mx-doc-filter-opt input[type="checkbox"] { border-radius: 5px; }
.mx-doc-filter-opt input[type="radio"] { border-radius: 50%; }
.mx-doc-filter-opt input:hover { border-color: var(--mx-primary); }
.mx-doc-filter-opt input:checked {
  background: var(--mx-primary);
  border-color: var(--mx-primary);
}
.mx-doc-filter-opt input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid var(--mx-white);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.mx-doc-filter-opt input[type="radio"]:checked::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--mx-white);
}
.mx-doc-sort-wrap { position: relative; }
.mx-doc-sort-wrap select {
  font-family: var(--mx-font);
  font-size: var(--mx-text-sm);
  font-weight: 500;
  color: var(--mx-ink-soft);
  border: 1px solid var(--mx-border);
  border-radius: var(--mx-radius-sm);
  padding: 8px 30px 8px 12px;
  background: var(--mx-surface);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.mx-doc-sort-wrap::after {
  content: '';
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--mx-ink-muted);
  pointer-events: none;
}

.mx-doc-main { min-width: 0; }
.mx-doc-rhead {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 20px;
  padding-bottom: 16px;
  gap: 12px;
  border-bottom: 1px solid var(--mx-border-light);
}
.mx-doc-rhead-left h2 { font-size: var(--mx-text-2xl); font-weight: 800; color: var(--mx-ink); margin: 0 0 4px; letter-spacing: -0.02em; }
.mx-doc-rhead-left p { font-size: var(--mx-text-sm); color: var(--mx-ink-muted); margin: 0; }
.mx-doc-rhead-right { display: flex; align-items: center; gap: 8px; }
.mx-doc-sort-label { font-size: var(--mx-text-sm); color: var(--mx-ink-muted); font-weight: 500; }
.mx-doc-list { display: flex; flex-direction: column; gap: 16px; }

.mx-dcard {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 20px;
  background: var(--mx-surface);
  border: 1px solid var(--mx-border);
  border-radius: var(--mx-radius-lg);
  padding: 24px 24px 24px 26px;
  box-shadow: var(--mx-shadow-xs);
  transition: box-shadow var(--mx-transition), border-color var(--mx-transition), transform var(--mx-transition);
  overflow: hidden;
}
.mx-dcard::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--mx-primary);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform var(--mx-transition-slow);
}
.mx-dcard:hover {
  box-shadow: var(--mx-shadow-lg);
  border-color: var(--mx-gray-200);
}
.mx-dcard:hover::before { transform: scaleY(1); }

.mx-dcard-left {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 92px;
}
.mx-dcard-photo-wrap {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: var(--mx-radius-pill);
  overflow: hidden;
  background: var(--mx-primary-surface);
  border: 2px solid var(--mx-surface);
  box-shadow: 0 0 0 1px var(--mx-border), var(--mx-shadow-sm);
}
.mx-dcard-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mx-dcard-photo-fallback {
  display: none;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 28px;
  color: var(--mx-primary);
}
.mx-dcard-photo-wrap.is-placeholder .mx-dcard-photo-fallback { display: flex; }
.mx-dcard-verified {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  font-weight: 700;
  color: var(--mx-primary-dark);
  background: var(--mx-primary-surface);
  padding: 3px 8px;
  border-radius: var(--mx-radius-pill);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.mx-dcard-verified i { font-size: 9px; color: var(--mx-primary); }

.mx-dcard-body { flex: 1 1 auto; min-width: 0; padding-right: 8px; }
.mx-dcard-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 4px;
}
.mx-dcard-name {
  font-family: var(--mx-font);
  font-size: var(--mx-text-xl);
  font-weight: 700;
  color: var(--mx-ink);
  text-decoration: none;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.mx-dcard-name:hover { color: var(--mx-primary-dark); }
.mx-dcard-fav {
  cursor: pointer;
  font-size: var(--mx-text-xl);
  color: var(--mx-gray-300);
  padding: 2px;
  flex-shrink: 0;
  transition: color var(--mx-transition);
}
.mx-dcard-fav:hover { color: var(--mx-primary); }
.mx-dcard-fav.is-fav { color: var(--mx-primary); }

.mx-dcard-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--mx-primary);
  font-size: 16px;
  flex: 0 0 auto;
}
.mx-dcard-viewlink {
  font-family: var(--mx-font);
  font-size: var(--mx-text-sm);
  font-weight: 600;
  color: var(--mx-primary);
  text-decoration: none;
  text-align: center;
}
.mx-dcard-viewlink:hover { color: var(--mx-primary-dark); text-decoration: underline; }
.mx-dcard-clinic { font-weight: 600; color: var(--mx-ink); }

.mx-dcard-spec {
  font-family: var(--mx-font);
  font-size: var(--mx-text-base);
  font-weight: 600;
  color: var(--mx-primary-dark);
  margin: 0 0 6px;
}
.mx-dcard-modes { display: flex; gap: 6px; margin-bottom: 8px; }
.mx-dcard-mode { display: inline-flex; align-items: center; gap: 4px; font-family: var(--mx-font); font-size: 13px; font-weight: 600; padding: 3px 8px; border-radius: 6px; }
.mx-dcard-mode i { font-size: 10px; }
.mx-dcard-mode--clinic { background: var(--mx-primary-surface); color: color-mix(in srgb, var(--mx-primary-darker) 88%, var(--mx-ink) 12%); }
.mx-dcard-mode--video { background: var(--mx-success-surface); color: color-mix(in srgb, var(--mx-success) 58%, var(--mx-ink) 42%); }
.mx-dcard-exp {
  font-family: var(--mx-font);
  font-size: var(--mx-text-sm);
  color: var(--mx-ink-muted);
  margin: 0 0 10px;
  font-weight: 500;
}
.mx-dcard-exp-no { font-weight: 700; color: var(--mx-ink); }
.mx-dcard-divider { height: 1px; background: var(--mx-border-light); margin: 10px 0; }

.mx-dcard-meta {
  font-family: var(--mx-font);
  font-size: var(--mx-text-sm);
  color: var(--mx-ink-soft);
  margin: 3px 0;
  display: flex;
  align-items: flex-start;
  gap: 6px;
  line-height: 1.4;
}
.mx-dcard-meta i { color: var(--mx-ink-muted); margin-top: 2px; flex: 0 0 auto; }
.mx-dcard-locations { color: var(--mx-ink-soft); }
.mx-dcard-locations-more { color: var(--mx-primary); font-weight: 600; margin-left: 2px; white-space: nowrap; }
.mx-dcard-rating-row { display: flex; align-items: center; gap: 12px; margin-top: 10px; flex-wrap: wrap; }

.mx-dcard-score {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--mx-success);
  color: var(--mx-white);
  font-weight: 700;
  font-size: var(--mx-text-sm);
  padding: 4px 9px;
  border-radius: var(--mx-radius-sm);
  box-shadow: var(--mx-shadow-xs);
}
.mx-dcard-score i { font-size: 11px; }
.mx-dcard-stories {
  font-size: var(--mx-text-sm);
  color: var(--mx-ink-muted);
  font-weight: 500;
}
.mx-dcard-fee-small {
  font-size: var(--mx-text-sm);
  color: var(--mx-ink-muted);
  margin: 8px 0 0;
}

.mx-dcard-actions {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 8px;
  width: 180px;
  border-left: 1px solid var(--mx-border-light);
  padding-left: 20px;
}
.mx-dcard-fee-block { text-align: center; padding-bottom: 4px; border-bottom: 1px dashed var(--mx-border-light); margin-bottom: 4px; }
.mx-dcard-avail {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  background: var(--mx-success-surface); color: var(--mx-success);
  font-weight: 600; font-size: 13px; padding: 4px 10px;
  border-radius: var(--mx-radius-pill); margin-bottom: 8px;
}
.mx-dcard-fee-big {
  font-family: var(--mx-font);
  font-size: 20px;
  font-weight: 800;
  color: var(--mx-ink);
  margin: 0;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.mx-dcard-fee-cap {
  font-size: var(--mx-text-xs);
  color: var(--mx-ink-muted);
  font-weight: 500;
}

.mx-btn-book {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--mx-font);
  font-weight: 700;
  font-size: 14px;
  color: var(--mx-white);
  background: var(--mx-primary-darker);
  border: none;
  border-radius: var(--mx-radius-pill);
  padding: 11px 16px;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(20,190,240,0.30);
  transition: all var(--mx-transition);
  letter-spacing: -0.01em;
}
.mx-btn-book:hover {
  background: color-mix(in srgb, var(--mx-primary-darker) 85%, var(--mx-ink) 15%);
  box-shadow: 0 8px 18px rgba(20,190,240,0.45);
}
.mx-btn-book--primary {
  background: var(--mx-primary-darker);
  color: var(--mx-white);
}
.mx-btn-book--secondary {
  background: var(--mx-white);
  color: color-mix(in srgb, var(--mx-primary-darker) 88%, var(--mx-ink) 12%);
  border: 1.5px solid var(--mx-primary-darker);
  box-shadow: none;
  padding: 10px 16px;
}
.mx-btn-book--secondary:hover {
  background: var(--mx-primary-surface);
  color: var(--mx-primary-dark);
  box-shadow: 0 4px 10px rgba(20,190,240,0.20);
}

.mx-btn-contact {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--mx-font);
  font-weight: 600;
  font-size: var(--mx-text-base);
  color: var(--mx-success);
  background: var(--mx-surface);
  border: 1px solid var(--mx-success);
  border-radius: var(--mx-radius-sm);
  padding: 10px 16px;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--mx-transition), border-color var(--mx-transition);
}
.mx-btn-contact:hover { background: var(--mx-success-surface); }

.mx-btn-view {
  font-family: var(--mx-font);
  font-size: var(--mx-text-sm);
  font-weight: 600;
  color: var(--mx-primary);
  text-decoration: none;
  text-align: center;
  padding: 4px 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.mx-btn-view i { font-size: 10px; margin-left: 2px; }
.mx-btn-view:hover { text-decoration: underline; }

.mx-dcard-slots { margin-top: 4px; }
.mx-slot-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--mx-text-xs);
  font-weight: 700;
  color: var(--mx-success);
  background: var(--mx-success-surface);
  padding: 5px 11px;
  border-radius: var(--mx-radius-pill);
  border: 1px solid color-mix(in srgb, var(--mx-success) 18%, transparent);
}
.mx-slot-pill::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mx-success);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--mx-success) 25%, transparent);
}

.mx-doc-empty { text-align: center; padding: 60px 20px; }
.mx-doc-empty i { font-size: 48px; color: var(--mx-gray-300); margin-bottom: 12px; }
.mx-doc-empty p { font-family: var(--mx-font); font-size: var(--mx-text-base); color: var(--mx-ink-muted); }

.mx-doc-more { text-align: center; padding: 28px 0 8px; }
.mx-doc-more button {
  font-family: var(--mx-font);
  font-weight: 600;
  font-size: var(--mx-text-base);
  color: color-mix(in srgb, var(--mx-primary-darker) 88%, var(--mx-ink) 12%);
  background: var(--mx-surface);
  border: 1px solid var(--mx-primary-darker);
  border-radius: var(--mx-radius-pill);
  padding: 10px 36px;
  cursor: pointer;
  transition: background var(--mx-transition), color var(--mx-transition);
}
.mx-doc-more button:hover { background: var(--mx-primary-surface); }

@media (max-width: 980px) {
  .mx-doc-layout { grid-template-columns: 1fr; }
  .mx-doc-aside { position: static; top: auto; }
  .mx-dcard { flex-wrap: wrap; }
  .mx-dcard-left { flex-direction: row; width: auto; flex: 1 1 100%; }
  .mx-dcard-actions { flex: 1 1 100%; flex-direction: row; flex-wrap: wrap; width: auto; border-left: none; padding-left: 0; }
  .mx-dcard-actions > * { flex: 1 1 auto; }
  .mx-dcard-fee-block { display: none; }
}
@media (max-width: 640px) {
  .mx-doc-hero-bar { flex-direction: column; border-radius: var(--mx-radius); padding: 10px; }
  .mx-doc-hero-vline { display: none; }
  .mx-doc-hero-btn { width: 100%; }
}

/* ============================================================
   PHARMACY LISTING - Clean card grid
   ============================================================ */
.mx-ph-page {
  font-family: var(--mx-font);
}
/* Body sections constrained (hero stays full-bleed via .mx-ph-top) */
.mx-ph-cats, .mx-ph-layout, .mx-ph-grid {
  width: 100%;
  max-width: 1240px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
}
.mx-ph-cats-inner, .mx-ph-top-inner, .mx-ph-layout-inner {
  max-width: 100%;
}

.mx-ph-head {
  text-align: center;
  margin-bottom: var(--mx-space-8);
}
.mx-ph-title {
  font-family: var(--mx-font);
  font-size: var(--mx-text-3xl);
  font-weight: 700;
  color: var(--mx-ink);
  margin: 0 0 var(--mx-space-2);
}
.mx-ph-desc {
  font-family: var(--mx-font);
  font-size: var(--mx-text-lg);
  color: var(--mx-ink-muted);
  margin: 0 0 var(--mx-space-6);
}

.mx-ph-search {
  display: flex;
  align-items: center;
  max-width: 560px;
  margin: 0 auto;
  border: 1px solid var(--mx-border);
  border-radius: var(--mx-radius-pill);
  background: var(--mx-white);
  overflow: hidden;
}
.mx-ph-search-icon {
  padding: 0 var(--mx-space-3);
  color: var(--mx-ink-muted);
  font-size: var(--mx-text-base);
}
.mx-ph-search-input {
  flex: 1;
  border: none;
  outline: none;
  padding: var(--mx-space-3) 0;
  font-family: var(--mx-font);
  font-size: var(--mx-text-base);
  color: var(--mx-ink);
  background: transparent;
}
.mx-ph-search-input::placeholder {
  color: var(--mx-gray-400);
}
.mx-ph-search-btn {
  padding: var(--mx-space-3) var(--mx-space-5);
  background: var(--mx-primary);
  color: var(--mx-white);
  border: none;
  border-radius: var(--mx-radius-pill);
  font-family: var(--mx-font);
  font-size: var(--mx-text-base);
  font-weight: 600;
  cursor: pointer;
  margin: var(--mx-space-1);
  transition: background var(--mx-transition);
}
.mx-ph-search-btn:hover {
  background: var(--mx-primary-dark);
}

.mx-ph-count {
  font-family: var(--mx-font);
  font-size: var(--mx-text-base);
  font-weight: 600;
  color: var(--mx-ink-soft);
  margin-bottom: var(--mx-space-5);
}

.mx-ph-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--mx-space-5);
}

.mx-phcard {
  background: var(--mx-white);
  border: 1px solid var(--mx-border);
  border-radius: var(--mx-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color var(--mx-transition);
}
.mx-phcard:hover {
  border-color: var(--mx-gray-300);
}

.mx-phcard-img-wrap {
  width: 100%;
  height: 160px;
  background: var(--mx-surface-alt);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mx-phcard-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mx-phcard-body {
  padding: var(--mx-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--mx-space-1);
  flex: 1 1 auto;
}
.mx-phcard-name {
  font-family: var(--mx-font);
  font-size: var(--mx-text-lg);
  font-weight: 700;
  color: var(--mx-ink);
  text-decoration: none;
  line-height: 1.3;
  margin: 0;
}
.mx-phcard-name:hover {
  color: var(--mx-primary);
}
.mx-phcard-meta {
  font-family: var(--mx-font);
  font-size: var(--mx-text-sm);
  color: var(--mx-ink-muted);
  margin: 0;
  line-height: 1.5;
}
.mx-phcard-meta i {
  color: var(--mx-ink-muted);
  margin-right: var(--mx-space-1);
}
.mx-phcard-loc {
  font-family: var(--mx-font);
  font-size: var(--mx-text-sm);
  color: var(--mx-ink-muted);
  margin: var(--mx-space-1) 0 0;
  line-height: 1.5;
}
.mx-phcard-loc i {
  color: var(--mx-ink-muted);
  margin-right: var(--mx-space-1);
}

.mx-phcard-actions {
  padding: 0 var(--mx-space-4) var(--mx-space-4);
}
.mx-phcard-btn {
  display: block;
  width: 100%;
  text-align: center;
  padding: var(--mx-space-3) var(--mx-space-4);
  background: var(--mx-primary);
  color: var(--mx-white);
  border: none;
  border-radius: var(--mx-radius-sm);
  font-family: var(--mx-font);
  font-size: var(--mx-text-base);
  font-weight: 600;
  text-decoration: none;
  transition: background var(--mx-transition);
}
.mx-phcard-btn:hover {
  background: var(--mx-primary-dark);
}

.mx-ph-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: var(--mx-space-10) var(--mx-space-5);
}
.mx-ph-empty i {
  font-size: 48px;
  color: var(--mx-border);
  margin-bottom: var(--mx-space-3);
}
.mx-ph-empty p {
  font-family: var(--mx-font);
  font-size: var(--mx-text-lg);
  color: var(--mx-ink-muted);
}

.mx-ph-more {
  text-align: center;
  margin-top: var(--mx-space-8);
}
.mx-ph-more button {
  padding: var(--mx-space-3) var(--mx-space-6);
  background: var(--mx-white);
  color: var(--mx-primary);
  border: 1px solid var(--mx-primary);
  border-radius: var(--mx-radius-sm);
  font-family: var(--mx-font);
  font-size: var(--mx-text-base);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--mx-transition), color var(--mx-transition);
}
.mx-ph-more button:hover {
  background: var(--mx-primary);
  color: var(--mx-white);
}

/* ============================================================
   LAB LISTING (shares pharmacy card structure)
   ============================================================ */
.mx-lbcard {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: var(--mx-space-5);
  border: 1px solid var(--mx-border);
  border-radius: var(--mx-radius-lg);
  background: var(--mx-surface);
  align-items: flex-start;
  position: relative;
  box-shadow: var(--mx-shadow);
  transition: border-color var(--mx-transition), box-shadow var(--mx-transition), transform var(--mx-transition);
}
.mx-lbcard:hover { border-color: var(--mx-primary); box-shadow: var(--mx-shadow-lg);  }
.mx-lbcard-photo {
  flex: 0 0 80px;
  width: 80px;
  height: 80px;
  border-radius: var(--mx-radius-lg);
  object-fit: cover;
  background: var(--mx-surface-hover);
  border: 1px solid var(--mx-border);
  box-shadow: var(--mx-shadow-xs);
}
@media (min-width: 1024px) {
  .mx-lbcard-photo { width: 96px; height: 96px; flex-basis: 96px; }
}
.mx-lbcard-body {
  flex: 1 1 0%;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.mx-lbcard-name {
  font-family: var(--mx-font);
  font-size: var(--mx-text-lg); font-weight: 600;
  color: var(--mx-ink);
  text-decoration: none;
  line-height: 1.3;
  margin: 0 0 4px;
}
.mx-lbcard-name:hover { color: var(--mx-ink); text-decoration: none; }
.mx-lbcard-meta {
  font-family: var(--mx-font);
  font-size: var(--mx-text-sm);
  color: var(--mx-ink-soft);
  margin: 4px 0 0;
  line-height: 1.5;
}
.mx-lbcard-meta i { color: var(--mx-ink-muted); margin-right: 3px; }
.mx-lbcard-loc {
  font-family: var(--mx-font);
  font-size: var(--mx-text-sm);
  color: var(--mx-ink-muted);
  margin: 4px 0 0;
  line-height: 1.5;
}
.mx-lbcard-loc i { color: var(--mx-ink-muted); margin-right: 3px; }
.mx-lbcard-price-row { display: flex; align-items: baseline; gap: 8px; margin-top: 6px; }
.mx-lbcard-price { font-family: var(--mx-font); font-size: var(--mx-text-lg); font-weight: 700; color: var(--mx-ink); }
.mx-lbcard-mrp { font-family: var(--mx-font); font-size: var(--mx-text-sm); color: var(--mx-ink-muted); text-decoration: line-through; }
.mx-lbcard-off { font-family: var(--mx-font); font-size: var(--mx-text-xs); font-weight: 700; color: var(--mx-danger); background: var(--mx-danger-surface); padding: 2px 8px; border-radius: var(--mx-radius-pill); }
.mx-lbcard-foot{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--mx-border);
}
.mx-lbcard-foot-chip{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: var(--mx-radius-pill);
  background: var(--mx-primary-surface);
  color: var(--mx-primary-dark);
  font-family: var(--mx-font);
  font-size: 11px;
  font-weight: 600;
}
.mx-lbcard-foot-chip i{
  font-size: 10px;
  color: var(--mx-primary);
}

/* ===== POPULAR HEALTH PACKAGES ===== */
.mx-lb-packages{
  background: var(--mx-surface-alt);
  padding: 64px 20px;
  margin-top: 48px;
}
.mx-lb-packages-inner{
  max-width: 1140px;
  margin: 0 auto;
  text-align: center;
}
.mx-lb-packages-eyebrow{
  display: inline-block;
  font-family: var(--mx-font);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--mx-primary-darker) 88%, var(--mx-ink) 12%);
  background: var(--mx-primary-surface);
  padding: 5px 12px;
  border-radius: var(--mx-radius-pill);
  margin-bottom: 14px;
}
.mx-lb-packages-title{
  font-family: var(--mx-font);
  font-size: 28px;
  font-weight: 700;
  color: var(--mx-ink);
  margin: 0 0 8px;
}
.mx-lb-packages-sub{
  font-family: var(--mx-font);
  font-size: 15px;
  color: var(--mx-ink-soft);
  margin: 0 0 40px;
}
.mx-lb-packages-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  text-align: left;
}
.mx-lb-pkg{
  position: relative;
  display: block;
  background: var(--mx-surface);
  border: 1px solid var(--mx-border);
  border-radius: var(--mx-radius-lg);
  padding: 22px 20px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
  box-shadow: var(--mx-shadow-xs);
}
.mx-lb-pkg:hover{
  border-color: var(--mx-primary);
  box-shadow: var(--mx-shadow-lg);
}
.mx-lb-pkg-tag{
  display: inline-block;
  font-family: var(--mx-font);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mx-white);
  background: var(--mx-primary);
  padding: 4px 10px;
  border-radius: var(--mx-radius-pill);
  margin-bottom: 12px;
}
.mx-lb-pkg h4{
  font-family: var(--mx-font);
  font-size: 17px;
  font-weight: 700;
  color: var(--mx-ink);
  margin: 0 0 6px;
  line-height: 1.3;
}
.mx-lb-pkg-desc{
  font-family: var(--mx-font);
  font-size: 13px;
  color: var(--mx-ink-muted);
  margin: 0 0 18px;
}
.mx-lb-pkg-foot{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  border-top: 1px dashed var(--mx-border);
}
.mx-lb-pkg-price{
  font-family: var(--mx-font);
  font-size: 20px;
  font-weight: 800;
  color: var(--mx-ink);
}
.mx-lb-pkg-cta{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mx-font);
  font-size: 13px;
  font-weight: 700;
  color: var(--mx-primary);
}
.mx-lb-pkg:hover .mx-lb-pkg-cta{ gap: 10px; }

@media (max-width: 900px) {
  .mx-lb-packages-grid{ grid-template-columns: repeat(2, 1fr); }
}

.mx-lbcard-actions {
  flex: 0 0 150px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 2px;
  margin-left: auto;
}
@media (max-width: 700px) {
  .mx-lbcard-actions { flex: 1 1 100%; flex-direction: row; margin-left: 0; }
  .mx-lbcard-actions > * { flex: 1; }
}
.mx-lb-empty {
  text-align: center;
  padding: 60px 20px;
}
.mx-lb-empty i { font-size: 48px; color: var(--mx-border); margin-bottom: 12px; }
.mx-lb-empty p { font-family: var(--mx-font-sans); font-size: 15px; color: var(--mx-ink-muted); }
/* ============================================================
   OFFER CARDS
   ============================================================ */
.mx-offer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}
.mx-offer-card {
  background: var(--mx-surface);
  border: 1px solid var(--mx-border);
  border-radius: 8px;
  overflow: hidden;
  transition: box-shadow 0.2s, transform 0.2s;
}
.mx-offer-card:hover {
  box-shadow: var(--mx-shadow-xs);
  border-color: var(--mx-border);
}
.mx-offer-img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  background: var(--mx-border-light);
}
.mx-offer-body {
  padding: 18px;
}
.mx-offer-title {
  font-family: var(--mx-font-sans);
  font-size: 16px;
  font-weight: 600;
  color: var(--mx-ink);
  margin: 0 0 6px;
}
.mx-offer-discount {
  font-family: var(--mx-font-sans);
  font-size: 22px;
  font-weight: 700;
  color: var(--mx-primary);
  margin: 0 0 2px;
}
.mx-offer-discount-type {
  font-size: 13px;
  font-weight: 400;
  color: var(--mx-ink-muted);
}
.mx-offer-desc {
  font-family: var(--mx-font-sans);
  font-size: 13px;
  color: var(--mx-ink-muted);
  line-height: 1.5;
  margin: 8px 0 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mx-offer-code-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 2px dashed var(--mx-primary);
  background: var(--mx-primary-surface);
  border-radius: 6px;
  padding: 8px 14px;
  margin: 12px 0;
}
.mx-offer-code-label {
  font-family: var(--mx-font-sans);
  font-size: 12px;
  color: var(--mx-ink-muted);
}
.mx-offer-code {
  font-family: var(--mx-font-sans);
  font-size: 15px;
  font-weight: 700;
  color: var(--mx-primary);
  letter-spacing: 0.05em;
}
.mx-offer-expiry {
  font-family: var(--mx-font-sans);
  font-size: 13px;
  color: var(--mx-ink-muted);
  margin: 8px 0 0;
}
.mx-offer-expiry span { color: var(--mx-danger); font-weight: 600; }
/* ============================================================
   BLOG CARDS
   ============================================================ */
.mx-blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
}
/* Blog body container — matches the standard page body (1240px, minor padding) */
.disBlog {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 16px 20px 40px;
  box-sizing: border-box;
}
.disBlog .mx-seo-listhead,
.mx-doc-page > .mx-seo-listhead {
  max-width: 1240px;
  width: 100%;
  margin: 0 auto;
  padding: 16px 20px 0;
  box-sizing: border-box;
}
.mx-blog-card {
  background: var(--mx-surface);
  border: 1px solid var(--mx-border);
  border-radius: 8px;
  overflow: hidden;
  text-decoration: none;
  transition: box-shadow 0.2s, transform 0.2s;
  display: flex;
  flex-direction: column;
}
.mx-blog-card:hover {
  box-shadow: var(--mx-shadow-xs);
  border-color: var(--mx-border);
}
.mx-blog-img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  background: var(--mx-border-light);
}
.mx-blog-body {
  padding: 18px;
  flex: 1;
}
.mx-blog-title {
  font-family: var(--mx-font-sans);
  font-size: 16px;
  font-weight: 600;
  color: var(--mx-ink);
  margin: 0 0 8px;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mx-blog-excerpt {
  font-family: var(--mx-font-sans);
  font-size: 13px;
  color: var(--mx-ink-muted);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
}
.mx-blog-read {
  font-family: var(--mx-font-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--mx-primary);
  margin-top: 12px;
}
/* Pagination */
.mx-pagination {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 32px 0;
  flex-wrap: wrap;
}
.mx-pagination a {
  padding: 8px 14px;
  border: 1px solid var(--mx-border);
  border-radius: 6px;
  font-family: var(--mx-font-sans);
  font-size: 14px;
  color: var(--mx-ink-soft);
  text-decoration: none;
  transition: all 0.15s;
}
.mx-pagination a:hover { border-color: var(--mx-primary); color: var(--mx-primary); }
.mx-pagination .active span,
.mx-pagination .active {
  background: var(--mx-primary);
  color: var(--mx-surface);
  border-color: var(--mx-primary);
  padding: 8px 14px;
  border-radius: 6px;
  font-family: var(--mx-font-sans);
  font-size: 14px;
}
/* ============================================================
   SPECIALITIES PAGE - Premium Grid
   ============================================================ */
.mx-spec-hero {
  position: relative;
  background: var(--mx-primary);
  color: var(--mx-white);
  padding: 28px 0 32px;
  border-bottom: 1px solid color-mix(in srgb, var(--mx-primary-dark) 60%, var(--mx-ink) 40%);
  text-align: center;
  overflow: hidden;
}
.mx-spec-hero::after { display: none; }
.mx-spec-hero-inner { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; padding: 0 20px; }

/* ===== Compact solid-primary page-top header ===== */
.mx-spec-top {
  background: var(--mx-primary);
  color: var(--mx-white);
  border-bottom: 1px solid color-mix(in srgb, var(--mx-primary-dark) 60%, var(--mx-ink) 40%);
  padding: 28px 0 32px;
}
.mx-spec-top-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}
.mx-spec-top-title {
  font-family: var(--mx-font-sans);
  font-size: 24px;
  font-weight: 700;
  color: var(--mx-white);
  margin: 0 0 4px;
  letter-spacing: -0.02em;
}
.mx-spec-top-sub {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.92);
  margin: 0;
  max-width: 720px;
}
.mx-spec-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--mx-white-a10);
  border: 1px solid var(--mx-white-a20);
  color: var(--mx-white);
  font-family: var(--mx-font-sans);
  font-size: var(--mx-text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 7px 14px;
  border-radius: var(--mx-radius-pill);
  margin-bottom: 18px;
  backdrop-filter: blur(4px);
}
.mx-spec-eyebrow i { color: var(--mx-primary-light); font-size: 11px; }
.mx-spec-title {
  font-family: var(--mx-font-sans);
  font-weight: 800; font-size: 36px; line-height: 1.15;
  color: var(--mx-white); letter-spacing: -0.025em;
  margin: 0 0 10px;
  text-shadow: 0 2px 12px rgba(0,0,0,0.18);
}
.mx-spec-title span { color: var(--mx-primary-light); }
.mx-spec-sub {
  font-family: var(--mx-font-sans);
  font-size: var(--mx-text-lg);
  color: var(--mx-white-a85);
  margin: 0; max-width: 580px; margin-left:auto; margin-right:auto;
  line-height: 1.5;
}
.mx-spec-trust {
  display: flex;
  justify-content: center;
  gap: 32px;
  margin-top: 32px;
  flex-wrap: wrap;
}
.mx-spec-trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--mx-white-a85);
  font-family: var(--mx-font-sans);
}
.mx-spec-trust-item strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--mx-white);
  line-height: 1.2;
}
.mx-spec-trust-item small {
  display: block;
  font-size: 12px;
  color: var(--mx-white-a60);
  margin-top: 2px;
}
.mx-spec-trust-ico {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--mx-white-a10);
  border: 1px solid var(--mx-white-a20);
  display: flex; align-items: center; justify-content: center;
  color: var(--mx-primary-light);
  font-size: 15px;
  flex-shrink: 0;
}
.mx-spec-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 22px;
}
.mx-spec-card {
  background: var(--mx-surface);
  border: 1px solid var(--mx-border-light);
  border-radius: 18px;
  padding: 30px 20px 22px;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), box-shadow 0.3s, border-color 0.3s;
  cursor: pointer;
  animation: mxSpecIn 0.5s cubic-bezier(0.16,1,0.3,1) both;
  text-decoration: none;
  display: block;
  color: inherit;
}
@keyframes mxSpecIn { from{opacity:0;transform:translateY(20px);} to{opacity:1;transform:translateY(0);} }
.mx-spec-card::before {
  content: '';
  position: absolute; top:0; left:0; right:0; height: 80px;
  background: var(--mx-surface);
  opacity: 0; transition: opacity 0.3s;
}
.mx-spec-card:hover {
  border-color: var(--mx-primary);
  box-shadow: var(--mx-shadow-xs);
}
.mx-spec-card:hover::before { opacity: 1; }
.mx-spec-icon-ring {
  width: 84px; height: 84px; margin: 0 auto 16px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--mx-primary-surface);
  border: 2px solid var(--mx-primary-glow);
  transition: transform 0.35s cubic-bezier(0.16,1,0.3,1), border-color 0.3s;
  position: relative; z-index: 1;
}
.mx-spec-card:hover .mx-spec-icon-ring {
  transform: scale(1.08);
  border-color: var(--mx-primary-glow);
}
.mx-spec-icon-ring img {
  width: 48px; height: 48px; object-fit: contain;
}
.mx-spec-name {
  font-family: var(--mx-font-sans);
  font-weight: 700; font-size: 16px; color: var(--mx-ink);
  margin: 0 0 6px; position: relative; z-index: 1;
  transition: color 0.2s;
}
.mx-spec-card:hover .mx-spec-name { color: var(--mx-primary); }
.mx-spec-count {
  font-family: var(--mx-font-sans);
  font-size: 13px; color: var(--mx-ink-muted); margin: 0 0 16px;
}
.mx-spec-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mx-font-sans); font-size: 13px; font-weight: 600;
  color: color-mix(in srgb, var(--mx-primary-darker) 88%, var(--mx-ink) 12%); text-decoration: none;
  padding: 8px 18px; border-radius: 100px;
  border: 1.5px solid var(--mx-primary-light);
  background: var(--mx-primary-surface);
  transition: all 0.25s;
  cursor: pointer; position: relative; z-index: 1;
}
.mx-spec-btn i { transition: transform 0.25s; }
.mx-spec-btn:hover { gap: 10px; }
.mx-spec-btn:hover i { transform: translateX(3px); }
.mx-spec-empty {
  text-align: center; padding: 60px 20px; color: var(--mx-ink-muted);
  font-family: var(--mx-font-sans); font-size: 16px;
}
.mx-spec-empty-ico{
  display: block;
  font-size: 48px;
  color: var(--mx-border);
  margin-bottom: 16px;
}
.mx-spec-more-arrow{ margin-left: 8px; }
.mx-spec-list{ padding-top: 48px; padding-bottom: 64px; }
.mx-spec-more { text-align: center; margin-top: 40px; }
.mx-spec-more-btn {
  display: inline-block; padding: 14px 36px;
  font-family: var(--mx-font-sans); font-size: 15px; font-weight: 700;
  color: var(--mx-surface); background: var(--mx-primary);
  border: none; border-radius: 12px; cursor: pointer; text-decoration: none;
  transition: background 0.2s;
}
.mx-spec-more-btn:hover { background: var(--mx-primary-dark); }
/* OTP styles moved to auth_mx.css (single source of truth) */
.mx-cart-page { max-width:1100px; margin:0 auto; padding:40px 0; }
.mx-cart-layout { display:flex; gap:24px; flex-wrap:wrap; }
.mx-cart-items { flex:1 1 65%; }
.mx-cart-summary { flex:1 1 30%; }
.mx-cart-card {
  background:var(--mx-surface); border:1px solid var(--mx-border-light); border-radius:16px;
  padding:20px; margin-bottom:12px; display:flex; align-items:center; gap:16px;
  transition:box-shadow .25s, border-color .25s;
}
.mx-cart-card:hover { box-shadow:var(--mx-shadow-xs); border-color:var(--mx-border); }
.mx-cart-card img { width:64px; height:64px; border-radius:12px; object-fit:cover; }
.mx-cart-card-info { flex:1; }
.mx-cart-card-name { font-family:var(--mx-font-sans); font-size:15px; font-weight:600; color:var(--mx-ink); margin:0 0 4px; }
.mx-cart-card-price { font-family:var(--mx-font-sans); font-size:14px; color:var(--mx-ink-muted); }
.mx-cart-qty { display:flex; align-items:center; gap:0; }
.mx-cart-qty button {
  width:32px; height:32px; border:1.5px solid var(--mx-border); background:var(--mx-surface-alt);
  font-size:18px; color:var(--mx-ink-soft); cursor:pointer; transition:all .2s;
}
.mx-cart-qty button:first-child { border-radius:8px 0 0 8px; }
.mx-cart-qty button:last-child { border-radius:0 8px 8px 0; }
.mx-cart-qty button:hover { background:var(--mx-primary); color:var(--mx-surface); border-color:var(--mx-primary); }
.mx-cart-qty input {
  width:40px; height:32px; border:1.5px solid var(--mx-border); border-left:none; border-right:none;
  text-align:center; font-family:var(--mx-font-sans); font-weight:600; font-size:14px; color:var(--mx-ink); background:var(--mx-surface);
}
.mx-cart-remove {
  width:36px; height:36px; border:none; background:transparent; cursor:pointer;
  color:var(--mx-ink-muted); border-radius:50%; transition:all .2s; display:flex; align-items:center; justify-content:center;
}
.mx-cart-remove:hover { background:var(--mx-danger-surface); color:var(--mx-danger); }
.mx-cart-sum-card {
  background:var(--mx-surface); border:1px solid var(--mx-border-light); border-radius:16px; padding:28px;
  position:sticky; top:20px;
}
.mx-cart-sum-title { font-family:var(--mx-font-sans); font-size:20px; font-weight:700; color:var(--mx-ink); margin:0 0 20px; }
.mx-cart-sum-row { display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--mx-surface-alt); }
.mx-cart-sum-row:last-child { border-bottom:none; }
.mx-cart-sum-label { font-family:var(--mx-font-sans); font-size:14px; color:var(--mx-ink-muted); }
.mx-cart-sum-val { font-family:var(--mx-font-sans); font-size:14px; font-weight:600; color:var(--mx-ink); }
.mx-cart-checkout {
  display:block; width:100%; padding:14px; margin-top:16px;
  background:var(--mx-primary); color:var(--mx-surface); border:none; border-radius:12px;
  font-family:var(--mx-font-sans); font-size:16px; font-weight:700; text-align:center; text-decoration:none;
  transition: background .2s;
}
.mx-cart-checkout:hover { background: var(--mx-primary-dark); }
.mx-seo-hero {
  background: var(--mx-primary);
  padding:64px 0; text-align:center; position:relative; overflow:hidden;
}
.mx-seo-hero::before {
  content:''; position:absolute; width:400px; height:400px; border-radius:50%;
  background:var(--mx-white-a06); top:-180px; right:-120px;
}
.mx-seo-hero h1 {
  font-family:var(--mx-font-sans); font-size:38px; font-weight:800; color:var(--mx-surface);
  margin:0 0 10px; position:relative; z-index:1;
}
.mx-seo-hero p {
  font-family:var(--mx-font-sans); font-size:17px; color:var(--mx-white-a85);
  margin:0; position:relative; z-index:1;
}
.mx-seo-chips { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:32px; }
.mx-seo-chip {
  display:inline-block; padding:8px 16px; border-radius:100px;
  background:var(--mx-primary-surface); border:1px solid var(--mx-primary-glow);
  font-family:var(--mx-font-sans); font-size:13px; font-weight:600; color:var(--mx-primary);
  text-decoration:none; transition:all .25s;
}
.mx-seo-chip:hover { background:var(--mx-primary); color:var(--mx-surface);  }
.mx-seo-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:20px; }
.mx-seo-card {
  background:var(--mx-surface); border:1px solid var(--mx-border-light); border-radius:16px; padding:24px;
  display:flex; gap:14px; align-items:flex-start;
  transition:transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s, border-color .3s;
}
.mx-seo-card:hover {  box-shadow:var(--mx-shadow-xs); border-color:var(--mx-border); }
.mx-seo-card img { width:56px; height:56px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.mx-seo-card-body { flex:1; }
.mx-seo-card h5 { font-family:var(--mx-font-sans); font-size:16px; font-weight:700; color:var(--mx-ink); margin:0 0 4px; }
.mx-seo-card .spec { font-family:var(--mx-font-sans); font-size:13px; color:color-mix(in srgb, var(--mx-primary-darker) 88%, var(--mx-ink) 12%); margin:0 0 6px; }
.mx-seo-card .exp { font-family:var(--mx-font-sans); font-size:13px; color:var(--mx-ink-soft); margin:0 0 12px; }
.mx-seo-card a {
  display:inline-flex; align-items:center; gap:5px; padding:8px 16px; border-radius:100px;
  background:var(--mx-primary-surface); color:color-mix(in srgb, var(--mx-primary-darker) 88%, var(--mx-ink) 12%); text-decoration:none;
  font-family:var(--mx-font-sans); font-size:13px; font-weight:600; transition:all .25s;
}
.mx-seo-card a:hover { background:var(--mx-primary-darker); color:var(--mx-surface); }
.mx-seo-empty { text-align:center; padding:60px 20px; color:var(--mx-ink-muted); font-family:var(--mx-font-sans); font-size:16px; }
/* ============================================================
   APPOINTMENT BOOKING - Practo-aligned (MX tokens only)
   ============================================================ */
.BookingPage { max-width: 1000px; margin: 0 auto; padding: 40px 20px; }
.BookingTitle { font-family: var(--mx-font); font-size: var(--mx-text-2xl); font-weight: 700; color: var(--mx-ink); margin: 0 0 24px; }
.BookingCard { background: var(--mx-surface); border: 1px solid var(--mx-border); border-radius: var(--mx-radius-lg); overflow: hidden; }
.BookingModeSelector { display: flex; gap: 16px; padding: 20px 24px; }
.BookingModeOpt { flex: 1; cursor: pointer; }
.BookingModeOpt input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.BookingModeCard { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 20px 16px; border: 2px solid var(--mx-border); border-radius: 12px; text-align: center; transition: border-color .2s ease, background .2s ease; }
.BookingModeCard i { font-size: 28px; color: var(--mx-gray-400); transition: color .2s ease; }
.BookingModeLabel { font-family: var(--mx-font); font-size: 15px; font-weight: 700; color: var(--mx-ink); }
.BookingModeDesc { font-family: var(--mx-font); font-size: 12px; color: var(--mx-ink-muted); }
.BookingModeOpt input[type="radio"]:checked + .BookingModeCard { border-color: var(--mx-primary); background: var(--mx-primary-surface); }
.BookingModeOpt input[type="radio"]:checked + .BookingModeCard i { color: var(--mx-primary); }
.BookingSteps { display: flex; justify-content: center; align-items: center; padding: 32px 0 24px; gap: 0; position: relative; }
.BookingProgress { position: absolute; top: 48px; left: 15%; right: 15%; height: 4px; background: var(--mx-border); border-radius: var(--mx-radius-pill); }
.BookingProgressBar { position: absolute; top: 0; left: 0; height: 100%; background: var(--mx-primary); border-radius: var(--mx-radius-pill); transition: width .5s cubic-bezier(.16,1,.3,1); width: 0%; }
.BookingCircle { width: 44px; height: 44px; border-radius: 50%; background: var(--mx-surface); border: 3px solid var(--mx-border); display: flex; align-items: center; justify-content: center; font-family: var(--mx-font); font-weight: 700; font-size: var(--mx-text-lg); color: var(--mx-gray-400); z-index: 2; transition: all .35s; flex-shrink: 0; }
.BookingCircle.BkActive { border-color: var(--mx-primary); background: var(--mx-primary); color: var(--mx-white); }
.BookingCircle + .BookingCircle { margin-left: auto; }
.BookingStep { padding: 0 32px 32px; }
.BookingStep h2 { font-family: var(--mx-font); font-size: var(--mx-text-xl); font-weight: 700; color: var(--mx-ink); margin: 0 0 20px; }
.BookingLabel { font-family: var(--mx-font); font-size: var(--mx-text-sm); font-weight: 600; color: var(--mx-ink-soft); display: block; margin-bottom: 8px; }
.BookingField { font-family: var(--mx-font); font-size: var(--mx-text-lg); color: var(--mx-ink); width: 100%; padding: 12px 14px; border: 1px solid var(--mx-border); border-radius: var(--mx-radius); background: var(--mx-surface-alt); outline: none; transition: border-color .25s, box-shadow .25s, background .25s; box-sizing: border-box; }
.BookingField:focus { border-color: var(--mx-primary); background: var(--mx-surface); box-shadow: var(--mx-shadow-focus); }
.BookingField::placeholder { color: var(--mx-gray-400); }
select.BookingField { cursor: pointer; }
/* Buttons — solid primary, no gradient (Practo pattern) */
.BookingBtn { font-family: var(--mx-font); font-size: var(--mx-text-lg); font-weight: 600; padding: 13px 32px; border: none; border-radius: var(--mx-radius); cursor: pointer; transition: background .2s, box-shadow .25s, opacity .2s; }
.BookingBtn:disabled { opacity: .5; cursor: not-allowed; }
.BookingBtnPrimary { background: var(--mx-primary); color: var(--mx-white); }
.BookingBtnPrimary:not(:disabled):hover { background: var(--mx-primary-dark); }
.BookingBtnGhost { background: var(--mx-surface); border: 1px solid var(--mx-border); color: var(--mx-ink-muted); }
.BookingBtnGhost:not(:disabled):hover { border-color: var(--mx-primary); color: var(--mx-primary); }
/* Payment / clinic selector boxes */
.BookingPaymentBox { border: 1px solid var(--mx-border); border-radius: var(--mx-radius); padding: 16px; cursor: pointer; text-align: center; transition: all .25s; background: var(--mx-surface-alt); }
.BookingPaymentBox:hover { border-color: var(--mx-primary); background: var(--mx-surface); }
.BookingPaymentBox.activePayment { border-color: var(--mx-primary); background: var(--mx-primary-surface); box-shadow: 0 0 0 3px var(--mx-primary-glow); }
.BookingPaymentBox img { margin: 0 auto 8px; display: block; }
.BookingPaymentBox p { font-family: var(--mx-font); font-size: var(--mx-text-sm); font-weight: 600; color: var(--mx-ink-soft); margin: 0; }
/* Sticky summary card — RIGHT column */
.BookingSummaryCard { background: var(--mx-surface-alt); border: 1px solid var(--mx-border); border-radius: var(--mx-radius-lg); padding: 24px; }
.BookingSummaryCard img { border-radius: 50%; border: 3px solid var(--mx-primary-surface); }
.BookingSummaryRow { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--mx-border); }
.BookingSummaryRow:last-child { border-bottom: none; }
.BookingSummaryLabel { font-family: var(--mx-font); font-size: var(--mx-text-base); color: var(--mx-ink-muted); }
.BookingSummaryVal { font-family: var(--mx-font); font-size: var(--mx-text-base); font-weight: 700; color: var(--mx-ink); }
.BookingSummaryVal.primary { color: var(--mx-primary); }
.BookingNav { display: flex; justify-content: space-between; margin-top: 20px; padding: 0 4px; }
/* Time-slot pills (Practo grid) */
.timeSlotRow .time { font-family: var(--mx-font); font-size: var(--mx-text-sm); color: var(--mx-ink-soft); border: 1px solid var(--mx-border); border-radius: var(--mx-radius); padding: 6px 12px; margin: 4px; display: inline-block; text-decoration: none; transition: border-color .2s, color .2s, background .2s; }
.timeSlotRow .time:hover { border-color: var(--mx-primary); color: var(--mx-primary); }
.timeSlotRow .time.activeTimeslots { border-color: var(--mx-primary); background: var(--mx-primary); color: var(--mx-white); }
/* Make the summary column sticky on large screens (Practo pattern) */
@media (min-width: 1024px) { .BookingStep .lg\:sticky, .BookingSummaryCard { position: sticky; top: 80px; } }
/* Upload drop-zone */
.drop-zone { border: 2px dashed var(--mx-gray-300); border-radius: var(--mx-radius); padding: 20px; text-align: center; transition: all .25s; cursor: pointer; background: var(--mx-surface-alt); }
.drop-zone:hover { border-color: var(--mx-primary); background: var(--mx-primary-surface); }
/* ============================================================
   SHARED UTILITIES
   ============================================================ */
/* ============================================================
   SHARED UTILITIES
   ============================================================ */
.mx-container { max-width:1200px; margin:0 auto; padding:0 20px; box-sizing:border-box; }
/* ============================================================
   MXPracto — PHARMACY DETAIL (mxPhd-*) + MEDICINE DETAIL (mxMed-*)
   Premium Practo-class design tokens & animations.
   Appended section — self-contained, no global conflicts.
   ============================================================ */
/* ---- Shared premium tokens ---- */
.mxPhd-page, .mxMed-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px 60px;
  font-family: var(--mx-font);
  color: var(--mx-ink);
  -webkit-font-smoothing: antialiased;
}
/* ---- Keyframe animations ---- */
@keyframes mxPhdFadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes mxPhdFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes mxPhdPop {
  0%   { transform: scale(0.96); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
/* ---- Pharmacy hero ---- */
.mxPhd-page { padding-top: 24px; }
.mxPhd-hero {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--mx-shadow-sm);
  margin-bottom: 20px;
  animation: mxPhdFadeUp 0.6s ease both;
}
.mxPhd-hero-bg {
  position: absolute; inset: 0;
  background: var(--mx-primary);
}
.mxPhd-hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background: var(--mx-primary);
}
.mxPhd-hero-inner {
  position: relative;
  display: flex; align-items: center; gap: 28px;
  padding: 34px 36px;
  flex-wrap: wrap;
}
.mxPhd-hero-logo {
  width: 116px; height: 116px;
  border-radius: 24px;
  background: var(--mx-surface);
  padding: 8px;
  box-shadow: var(--mx-shadow-xs);
  flex-shrink: 0;
  animation: mxPhdPop 0.7s ease 0.1s both;
}
.mxPhd-hero-logo img { width: 100%; height: 100%; object-fit: cover; border-radius: 18px; }
.mxPhd-hero-main { flex: 1; min-width: 260px; }
.mxPhd-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--mx-white-a22);
  color: var(--mx-surface);
  font-size: 12px; font-weight: 600;
  padding: 5px 12px; border-radius: 999px;
  margin-bottom: 8px;
}
.mxPhd-title {
  font-size: 30px; font-weight: 800; color: var(--mx-surface);
  letter-spacing: -0.02em; margin: 0 0 8px;
  text-shadow: 0 2px 12px color-mix(in srgb, var(--mx-ink) 18%, transparent);
}
.mxPhd-meta { display: flex; align-items: center; gap: 10px; color: var(--mx-surface); font-size: 14px; font-weight: 500; margin-bottom: 6px; }
.mxPhd-meta i { color: var(--mx-surface); }
.mxPhd-rating {
  background: var(--mx-white-a22);
  padding: 3px 10px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 5px;
}
.mxPhd-rating i { color: var(--mx-warning); }
.mxPhd-dot { opacity: 0.7; }
.mxPhd-address { color: var(--mx-surface); font-size: 14px; margin: 0; opacity: 0.95; display: flex; align-items: center; gap: 7px; }
.mxPhd-hero-actions { display: flex; gap: 10px; flex-shrink: 0; }
.mxPhd-action-btn {
  width: 48px; height: 48px; border-radius: 14px;
  background: var(--mx-white-a95); color: var(--mx-primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  box-shadow: var(--mx-shadow-xs);
  transition: transform 0.22s ease, background 0.22s ease;
}
.mxPhd-action-btn:hover {  background: var(--mx-surface); }
/* ---- Pharmacy contact bar ---- */
.mxPhd-contact-bar {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  background: var(--mx-surface);
  border: 1px solid var(--mx-border);
  border-radius: 16px;
  padding: 16px 22px;
  margin-bottom: 24px;
  box-shadow: var(--mx-shadow-xs);
  animation: mxPhdFadeUp 0.6s ease 0.08s both;
}
.mxPhd-contact-item {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 500; color: var(--mx-muted);
  text-decoration: none;
}
.mxPhd-contact-item i { color: var(--mx-primary); font-size: 15px; }
.mxPhd-contact-item:hover { color: var(--mx-primary); }
.mxPhd-browse-cta {
  margin-left: auto;
  background: var(--mx-primary); color: var(--mx-surface);
  padding: 11px 22px; border-radius: 12px;
  font-weight: 600; font-size: 14px;
  display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none;
  box-shadow: var(--mx-shadow-xs);
  transition: background 0.22s ease;
}
.mxPhd-browse-cta:hover { background: var(--mx-primary-dark); }
/* ---- Pharmacy body layout ---- */
.mxPhd-body {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 24px;
  align-items: start;
}
@media (max-width: 900px) { .mxPhd-body { grid-template-columns: 1fr; } }
.mxPhd-overview, .mxPhd-hours-card {
  background: var(--mx-surface);
  border: 1px solid var(--mx-border);
  border-radius: 16px;
  padding: 28px;
  box-shadow: var(--mx-shadow-xs);
  animation: mxPhdFadeUp 0.6s ease 0.12s both;
}
.mxPhd-hours-card { animation-delay: 0.18s; }
.mxPhd-section-title {
  display: flex; align-items: center; gap: 9px;
  font-size: var(--mx-text-xl); font-weight: 600; color: var(--mx-ink);
  margin: 0 0 18px;
}
.mxPhd-section-title i { color: var(--mx-primary); font-size: 17px; }
.mxPhd-overview-text { color: var(--mx-muted); font-size: 15px; line-height: 1.75; }
/* ---- Pharmacy hours ---- */
.mxPhd-today {
  background: var(--mx-success-surface);
  border: 1px solid var(--mx-success-surface);
  border-radius: 12px; padding: 14px 16px; margin-bottom: 16px;
}
.mxPhd-today-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.mxPhd-today-label { color: var(--mx-success); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; }
.mxPhd-today-day { color: var(--mx-ink); font-weight: 600; font-size: 14px; margin-left: 6px; }
.mxPhd-open-badge { background: var(--mx-success); color: var(--mx-surface); font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 999px; }
.mxPhd-today-times { display: flex; flex-direction: column; gap: 2px; }
.mxPhd-today-times span { color: var(--mx-muted); font-size: 13px; }
.mxPhd-week { display: flex; flex-direction: column; }
.mxPhd-day-row, .mxPhd-day-row-extra {
  display: flex; justify-content: space-between; align-items: center;
  padding: 9px 4px;
  border-bottom: 1px solid var(--mx-surface-alt);
  font-size: 13px;
}
.mxPhd-day-row-extra { justify-content: flex-end; padding-top: 2px; padding-bottom: 4px; border-bottom: 1px solid var(--mx-surface-alt); }
.mxPhd-day-row:last-child { border-bottom: 0; }
.mxPhd-day-name { font-weight: 600; color: var(--mx-ink); }
.mxPhd-day-time { color: var(--mx-muted); }
.mxPhd-day-row.is-closed .mxPhd-day-time,
.mxPhd-day-row-extra.is-closed .mxPhd-day-time { color: var(--mx-danger); font-weight: 600; }
/* ============================================================
   MEDICINE DETAIL (mxMed-*)
   ============================================================ */
.mxMed-page { padding-top: 24px; }
.mxMed-hero {
  display: grid;
  grid-template-columns: 440px 1fr;
  gap: 36px;
  background: var(--mx-surface);
  border: 1px solid var(--mx-border);
  border-radius: var(--mx-radius);
  padding: 32px;
  margin-bottom: 28px;
}
@media (max-width: 900px) { .mxMed-hero { grid-template-columns: 1fr; padding: 22px; gap: 24px; } }
.mxMed-gallery { position: relative; }
.mxMed-img-zoom {
  border-radius: var(--mx-radius);
  overflow: hidden;
  background: var(--mx-surface-alt);
  border: 1px solid var(--mx-border);
  cursor: zoom-in;
}
.mxMed-img-zoom img {
  width: 100%; height: 360px; object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(0.2,0.8,0.2,1);
}
.mxMed-img-zoom:hover img { transform: none; }
.mxMed-stock-pill {
  position: absolute; bottom: 12px; left: 12px;
  background: var(--mx-white-a95);
  color: var(--mx-primary);
  font-size: 12px; font-weight: 600;
  padding: 6px 12px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 6px;
}
.mxMed-info { display: flex; flex-direction: column; }
.mxMed-cat-badge {
  display: inline-flex; align-items: center; gap: 6px; width: fit-content;
  background: var(--mx-primary-surface); color: var(--mx-primary);
  font-size: 12px; font-weight: 600;
  padding: 5px 12px; border-radius: 999px; margin-bottom: 12px;
}
.mxMed-title { font-size: var(--mx-text-3xl); font-weight: 600; color: var(--mx-ink); letter-spacing: -0.02em; margin: 0 0 10px; }
.mxMed-rating-row { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.mxMed-stars i { color: var(--mx-warning); font-size: var(--mx-text-base); }
.mxMed-reviews { color: var(--mx-ink-muted); font-size: var(--mx-text-sm); font-weight: 500; }
.mxMed-price-block { display: flex; align-items: baseline; gap: 8px; margin-bottom: 16px; }
.mxMed-price { font-size: var(--mx-text-3xl); font-weight: 700; color: var(--mx-ink); }
.mxMed-price-unit { color: var(--mx-ink-muted); font-size: var(--mx-text-base); font-weight: 500; }
.mxMed-desc { color: var(--mx-muted); font-size: 15px; line-height: 1.7; margin: 0 0 22px; }
.mxMed-buy-row {
  display: flex; align-items: flex-end; gap: 24px; flex-wrap: wrap;
  padding-top: 18px; border-top: 1px solid var(--mx-border);
}
.mxMed-qty { display: flex; flex-direction: column; gap: 8px; }
.mxMed-qty-label { font-size: 13px; font-weight: 600; color: var(--mx-ink); margin: 0; }
.mxMed-qty-stepper { display: inline-flex; align-items: center; border: 1px solid var(--mx-border); border-radius: 12px; overflow: hidden; }
.mxMed-qty-btn {
  width: 44px; height: 44px; border: 0; background: var(--mx-surface);
  color: var(--mx-ink); cursor: pointer; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s ease, color 0.2s ease;
}
.mxMed-qty-btn:hover { background: var(--mx-primary); color: var(--mx-surface); }
.mxMed-qty-input { width: 58px; height: 44px; border: 0; text-align: center; font-weight: 700; color: var(--mx-ink); background: var(--mx-surface); outline: none; font-size: 15px; -moz-appearance: textfield; }
.mxMed-qty-input::-webkit-outer-spin-button, .mxMed-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.mxMed-cart-cta {
  flex: 1; min-width: 200px;
  background: var(--mx-primary); color: var(--mx-white);
  padding: 12px 24px; border-radius: var(--mx-radius-sm);
  font-weight: 500; font-size: var(--mx-text-lg);
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  text-decoration: none;
  transition: background var(--mx-transition);
}
.mxMed-cart-cta:hover { background: var(--mx-primary-dark); }
/* ---- Medicine details / meta ---- */
.mxMed-details {
  background: var(--mx-surface);
  border: 1px solid var(--mx-border);
  border-radius: var(--mx-radius);
  padding: 32px;
}
.mxMed-section-title { display: flex; align-items: center; gap: 9px; font-size: var(--mx-text-xl); font-weight: 600; color: var(--mx-ink); margin: 0 0 20px; }
.mxMed-section-title i { color: var(--mx-primary); }
.mxMed-how { margin-bottom: 26px; }
.mxMed-subtitle { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; color: var(--mx-ink); margin: 0 0 8px; }
.mxMed-subtitle i { color: var(--mx-primary); }
.mxMed-how-text { color: var(--mx-muted); font-size: 15px; line-height: 1.75; }
.mxMed-meta-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (max-width: 700px) { .mxMed-meta-grid { grid-template-columns: 1fr; } }
.mxMed-meta-card {
  background: var(--mx-surface);
  border: 1px solid var(--mx-border);
  border-left: 3px solid var(--mx-primary);
  border-radius: var(--mx-radius);
  padding: 18px 20px;
  transition: border-color var(--mx-transition);
}
.mxMed-meta-card:hover { border-color: var(--mx-primary); }
.mxMed-meta-title { display: flex; align-items: center; gap: 7px; font-size: 15px; font-weight: 700; color: var(--mx-ink); margin: 0 0 6px; }
.mxMed-meta-title i { color: var(--mx-primary); font-size: 13px; }
.mxMed-meta-desc { color: var(--mx-muted); font-size: 14px; line-height: 1.7; }
.mxMed-meta-empty { grid-column: 1 / -1; text-align: center; padding: 40px 20px; color: var(--mx-muted); background: var(--mx-surface); border-radius: var(--mx-radius); border: 1px dashed var(--mx-border); }
.mxMed-meta-empty i { font-size: 28px; color: var(--mx-primary); margin-bottom: 10px; }
.mxMed-meta-empty h4 { font-size: 15px; font-weight: 600; margin: 0; }
/* ============================================================
   MXPracto Doctor Detail Page — mxDet-* scope
   Premium Practo-class design tokens & components
   Self-contained, no conflicts with global styles.
   Appended to listing_mx.css.
   ============================================================ */
/* ---- Color tokens (detail scope) ---- */
:root {
  --mxDet-primary: var(--mx-primary);
  --mxDet-primary-dark: var(--mx-primary-darker);
  --mxDet-ink: var(--mx-ink);
  --mxDet-muted: var(--mx-ink-muted);
  --mxDet-surface: var(--mx-surface-alt);
  --mxDet-border: var(--mx-border);
  --mxDet-radius: 16px;
  --mxDet-shadow-sm: var(--mx-shadow-xs);
  --mxDet-shadow-md: var(--mx-shadow-sm);
  --mxDet-shadow-lg: var(--mx-shadow-sm);
  --mxDet-ease: cubic-bezier(.22,.61,.36,1);
}
/* ---- Page wrapper ---- */
.mxDetPage {
  font-family: var(--mx-font-sans);
  color: var(--mxDet-ink);
  padding: 0 0 64px;
}
/* ---- Hero ---- */
.mxDetHero {
  position: relative;
  overflow: hidden;
  padding: 48px 0 40px;
  margin-bottom: 24px;
}
.mxDetHeroBg {
  position: absolute;
  inset: 0;
  background: var(--mx-primary-surface);
  z-index: 0;
}
.mxDetHeroWrap {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}
/* ---- Avatar ---- */
.mxDetAvatar {
  position: relative;
  flex-shrink: 0;
  width: 132px;
  height: 132px;
}
.mxDetAvatar img {
  width: 132px;
  height: 132px;
  border-radius: 50%;
  object-fit: cover;
  border: 5px solid var(--mx-surface);
  box-shadow: var(--mxDet-shadow-lg);
  display: block;
}
.mxDetAvatarRing {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 2px dashed var(--mx-primary-glow);
  animation: mxDetSpin 18s linear infinite;
}
/* ---- Identity ---- */
.mxDetIdentity { flex: 1; min-width: 240px; }
.mxDetNameRow { display: flex; align-items: center; gap: 10px; }
.mxDetName {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--mxDet-ink);
  margin: 0;
  line-height: 1.15;
}
.mxDetVerified { color: var(--mxDet-primary); font-size: 20px; }
.mxDetSpecialty {
  font-size: 17px;
  font-weight: 600;
  color: var(--mxDet-primary);
  margin: 4px 0 12px;
}
.mxDetRatingRow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mxDetRatingPill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--mx-primary);
  color: var(--mx-surface);
  font-size: 14px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 999px;
  box-shadow: var(--mx-shadow-xs);
}
.mxDetRatingPill i { font-size: 12px; }
.mxDetReviewsCount { font-size: 14px; color: var(--mxDet-muted); font-weight: 500; }
.mxDetDot { color: var(--mxDet-border); font-weight: 700; }
.mxDetFeeInline { font-size: 14px; color: var(--mxDet-ink); font-weight: 600; }
.mxDetTags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.mxDetTag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--mx-surface);
  border: 1px solid var(--mxDet-border);
  color: var(--mxDet-ink);
  font-size: 13px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 999px;
  box-shadow: var(--mxDet-shadow-sm);
}
.mxDetTag img { width: 16px; height: 16px; }
/* ---- Hero CTA cluster ---- */
.mxDetHeroCta {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
  min-width: 200px;
}
.mxDetBtnPrimary, .mxDetBtnSuccess {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  padding: 14px 24px;
  border-radius: 12px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: transform .25s var(--mxDet-ease), box-shadow .25s var(--mxDet-ease);
}
.mxDetBtnPrimary {
  background: var(--mx-primary);
  color: var(--mx-surface);
}
.mxDetBtnPrimary:hover { background: var(--mx-primary-dark); }
.mxDetBtnSuccess {
  background: var(--mx-success);
  color: var(--mx-surface);
}
.mxDetBtnSuccess:hover { filter: brightness(0.92); }
.mxDetQuickActions { display: flex; gap: 8px; justify-content: center; }
.mxDetIconBtn {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  border: 1.5px solid var(--mxDet-border);
  background: var(--mx-surface);
  color: var(--mxDet-primary);
  font-size: 15px;
  text-decoration: none;
  transition: all .25s var(--mxDet-ease);
}
.mxDetIconBtn:hover {
  border-color: var(--mxDet-primary);
  background: var(--mx-primary-surface);
  box-shadow: var(--mxDet-shadow-md);
}
/* ---- Hospital info bar ---- */
.mxDetHospBar {
  display: flex;
  align-items: stretch;
  gap: 0;
  background: var(--mx-surface);
  border: 1px solid var(--mxDet-border);
  border-radius: var(--mxDet-radius);
  box-shadow: var(--mxDet-shadow-sm);
  padding: 18px 24px;
  margin-bottom: 24px;
}
.mxDetHospItem {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.mxDetHospItem > i {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--mx-primary-surface);
  color: var(--mxDet-primary);
  font-size: 16px;
}
.mxDetHospItem > div { display: flex; flex-direction: column; min-width: 0; }
.mxDetHospLabel { font-size: 12px; color: var(--mxDet-muted); font-weight: 500; }
.mxDetHospValue { font-size: 14px; color: var(--mxDet-ink); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mxDetHospDivider { width: 1px; background: var(--mxDet-border); margin: 0 20px; }
/* ---- Info grid (slots + hours) ---- */
.mxDetInfoGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 24px;
}
/* ---- Card shell ---- */
.mxDetCard {
  background: var(--mx-surface);
  border: 1px solid var(--mxDet-border);
  border-radius: var(--mxDet-radius);
  box-shadow: var(--mxDet-shadow-sm);
  padding: 24px;
  margin-bottom: 24px;
  transition: box-shadow .3s var(--mxDet-ease), transform .3s var(--mxDet-ease);
}
.mxDetCard:hover { box-shadow: var(--mxDet-shadow-lg); }
.mxDetCardHead { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.mxDetCardIcon {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--mx-primary);
  color: var(--mx-surface);
  font-size: 15px;
}
.mxDetCardTitle {
  font-size: 19px;
  font-weight: 700;
  color: var(--mxDet-ink);
  margin: 0;
  letter-spacing: -0.01em;
}
/* ---- Slot blocks ---- */
.mxDetSlotBlock {
  background: var(--mxDet-surface);
  border: 1px solid var(--mxDet-border);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
}
.mxDetSlotBlock:last-child { margin-bottom: 0; }
.mxDetSlotBlockTitle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--mxDet-ink);
  margin: 0 0 12px;
}
.mxDetSlotBlockTitle i { color: var(--mxDet-primary); }
.mxDetSlotList {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-height: 180px;
  overflow-y: auto;
  padding-right: 4px;
}
.mxDetSlot {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--mxDet-primary-dark);
  background: var(--mx-surface);
  border: 1.5px solid var(--mxDet-border);
  border-radius: 8px;
  text-decoration: none;
  cursor: pointer;
  transition: all .2s var(--mxDet-ease);
}
.mxDetSlot:hover {
  background: var(--mxDet-primary);
  border-color: var(--mxDet-primary);
  color: var(--mx-surface);
  box-shadow: var(--mx-shadow-xs);
}
.mxDetSlotEmpty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 16px;
  color: var(--mxDet-muted);
  font-size: 13px;
  font-weight: 500;
  text-align: center;
}
.mxDetSlotEmpty i { font-size: 22px; color: var(--mx-border); }
/* ---- Business hours: today highlight ---- */
.mxDetToday {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
  border: 1px solid var(--mxDet-border);
}
.mxDetToday.is-open { background: var(--mx-success-surface); border-color: var(--mx-success-surface); }
.mxDetToday.is-closed { background: var(--mx-danger-surface); border-color: var(--mx-danger-surface); }
.mxDetTodayLeft { display: flex; flex-direction: column; gap: 4px; }
.mxDetTodayLabel { font-size: 12px; font-weight: 600; color: var(--mxDet-primary); text-transform: uppercase; letter-spacing: .04em; }
.mxDetTodayDate { font-size: 15px; font-weight: 700; color: var(--mxDet-ink); }
.mxDetTodayTimes { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.mxDetTodayTimes span { font-size: 13px; color: var(--mxDet-muted); }
.mxDetStatusPill {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.mxDetStatusPill.mxDetOpen { background: var(--mx-success); color: var(--mx-surface); }
.mxDetStatusPill.mxDetClosed { background: var(--mx-danger); color: var(--mx-surface); }
/* ---- Weekly schedule ---- */
.mxDetWeekList { display: flex; flex-direction: column; }
.mxDetWeekRow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 11px 0;
  border-bottom: 1px solid var(--mxDet-border);
}
.mxDetWeekRow:last-child { border-bottom: none; }
.mxDetWeekDay { font-size: 14px; font-weight: 600; color: var(--mxDet-ink); }
.mxDetWeekTimes { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.mxDetWeekTimes span { font-size: 13px; color: var(--mxDet-muted); }
.mxDetClosedText { color: var(--mx-danger) !important; font-weight: 600 !important; }
/* ---- Overview ---- */
.mxDetOverview {
  font-size: 15px;
  line-height: 1.75;
  color: var(--mx-ink-soft);
}
/* ---- Timeline (education / certificate) ---- */
.mxDetTimeline { display: flex; flex-direction: column; gap: 4px; }
.mxDetTimelineItem {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 14px;
  border-radius: 12px;
  transition: background .25s var(--mxDet-ease), transform .25s var(--mxDet-ease);
}
.mxDetTimelineItem:hover { background: var(--mxDet-surface); transform: translateX(4px); }
.mxDetTimelineIcon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--mx-surface);
  border: 1px solid var(--mxDet-border);
  border-radius: 12px;
  box-shadow: var(--mxDet-shadow-sm);
}
.mxDetTimelineIcon img { width: 28px; height: 28px; }
.mxDetTimelineBody { flex: 1; }
.mxDetTimelineTitle { font-size: 16px; font-weight: 700; color: var(--mxDet-ink); margin: 0 0 4px; }
.mxDetTimelineSub { font-size: 14px; font-weight: 600; color: var(--mxDet-primary); margin: 0 0 6px; }
.mxDetTimelineMeta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--mxDet-muted);
}
/* ---- Locations ---- */
.mxDetLocations { display: flex; flex-direction: column; gap: 20px; }
.mxDetLocation {
  padding-bottom: 20px;
  border-bottom: 1px solid var(--mxDet-border);
}
.mxDetLocation:last-child { border-bottom: none; padding-bottom: 0; }
.mxDetLocationHead { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.mxDetLocationName { font-size: 17px; font-weight: 700; color: var(--mxDet-ink); margin: 0; }
.mxDetLocationFacility { font-size: 13px; color: var(--mxDet-muted); }
.mxDetLocationAddr {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--mx-ink-soft);
  margin: 0 0 12px;
}
.mxDetLocationAddr i { color: var(--mxDet-primary); }
.mxDetDirections {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--mxDet-primary);
  text-decoration: none;
  padding: 8px 14px;
  border: 1.5px solid var(--mxDet-border);
  border-radius: 10px;
  background: var(--mxDet-surface);
  transition: all .25s var(--mxDet-ease);
}
.mxDetDirections:hover {
  border-color: var(--mxDet-primary);
  background: var(--mx-primary-surface);
  box-shadow: var(--mxDet-shadow-md);
}
.mxDetGallery { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.mxDetGalleryItem { display: block; }
.mxDetGalleryItem img {
  width: 72px;
  height: 72px;
  border-radius: 10px;
  object-fit: cover;
  border: 1px solid var(--mxDet-border);
  transition: all .3s var(--mxDet-ease);
}
.mxDetGalleryItem:hover img { opacity: .85; transform: scale(1.06); }
/* ---- Reviews ---- */
.mxDetReview {
  display: flex;
  gap: 32px;
  align-items: center;
  background: var(--mx-warning-surface);
  border: 1px solid var(--mx-warning-surface);
  border-radius: 14px;
  padding: 24px;
  margin-bottom: 24px;
}
.mxDetReviewScore { text-align: center; flex-shrink: 0; }
.mxDetReviewScoreNum { display: block; font-size: 48px; font-weight: 800; color: var(--mx-warning-dark); line-height: 1; }
.mxDetReviewStars { display: flex; justify-content: center; gap: 2px; margin: 8px 0; }
.mxDetReviewStars i { font-size: 15px; }
.mxDetReviewStars.sm i { font-size: 13px; }
.mxDetReviewStars i.on { color: var(--mx-warning); }
.mxDetReviewStars i.off { color: var(--mx-border); }
.mxDetReviewBased { font-size: 12px; color: var(--mxDet-muted); }
.mxDetReviewBars { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.mxDetReviewBarRow { display: flex; align-items: center; gap: 10px; }
.mxDetReviewBarLabel { display: inline-flex; align-items: center; gap: 3px; width: 38px; font-size: 13px; font-weight: 600; color: var(--mxDet-muted); }
.mxDetReviewBarLabel i { color: var(--mx-warning); font-size: 11px; }
.mxDetReviewBarTrack {
  flex: 1;
  height: 8px;
  background: var(--mx-warning);
  border-radius: 999px;
  overflow: hidden;
}
.mxDetReviewBarFill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--mx-warning);
  animation: mxDetBarGrow 1.2s var(--mxDet-ease) forwards;
}
.mxDetReviewBarPct { width: 36px; text-align: right; font-size: 12px; font-weight: 600; color: var(--mxDet-muted); }
/* ---- Individual review items ---- */
.mxDetReviewList {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 420px;
  overflow-y: auto;
  padding-right: 6px;
}
.mxDetReviewItem {
  display: flex;
  gap: 14px;
  padding: 18px 4px;
  border-bottom: 1px solid var(--mxDet-border);
  transition: background .25s var(--mxDet-ease);
}
.mxDetReviewItem:last-child { border-bottom: none; }
.mxDetReviewItem:hover { background: var(--mxDet-surface); border-radius: 10px; }
.mxDetReviewAvatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid var(--mxDet-border);
}
.mxDetReviewBody { flex: 1; min-width: 0; }
.mxDetReviewTop { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 4px; }
.mxDetReviewName { font-size: 15px; font-weight: 700; color: var(--mxDet-ink); margin: 0; }
.mxDetReviewDate { font-size: 12px; color: var(--mxDet-muted); white-space: nowrap; }
.mxDetReviewStars.sm { justify-content: flex-start; margin-bottom: 6px; }
.mxDetReviewText { font-size: 14px; line-height: 1.6; color: var(--mx-ink-soft); margin: 0; }
.mxDetReviewPaginate { margin-top: 20px; }
.mxDetReviewPaginate .pagination { justify-content: center; }
/* ---- Keyframe animations ---- */
.mxDetFadeIn { animation: mxDetFadeIn .7s var(--mxDet-ease) both; }
.mxDetSlideUp { animation: mxDetSlideUp .7s var(--mxDet-ease) both; }
@keyframes mxDetFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes mxDetSlideUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes mxDetBarGrow {
  from { width: 0; }
  to { width: var(--w); }
}
@keyframes mxDetSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
/* ---- Responsive ---- */
@media (max-width: 900px) {
  .mxDetInfoGrid { grid-template-columns: 1fr; }
  .mxDetReview { flex-direction: column; gap: 20px; text-align: center; }
  .mxDetReviewBars { width: 100%; }
}
@media (max-width: 640px) {
  .mxDetHero { padding: 32px 0 28px; }
  .mxDetHeroWrap { flex-direction: column; text-align: center; align-items: center; }
  .mxDetNameRow { justify-content: center; }
  .mxDetRatingRow { justify-content: center; }
  .mxDetTags { justify-content: center; }
  .mxDetName { font-size: 24px; }
  .mxDetHospBar { flex-direction: column; gap: 14px; }
  .mxDetHospDivider { display: none; }
  .mxDetHospItem { width: 100%; }
  .mxDetCard { padding: 18px; }
  .mxDetReviewScoreNum { font-size: 38px; }
}
/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .mxDetFadeIn, .mxDetSlideUp, .mxDetAvatarRing, .mxDetReviewBarFill { animation: none !important; }
  .mxDetCard, .mxDetSlot, .mxDetIconBtn, .mxDetTimelineItem, .mxDetDirections { transition: none !important; }
}
/* ============================================================
   PREMIUM POLISH — Static pages, Blog, Pharmacy, Medicine grid
   Self-contained classes: mxStatic-*, mxBlg-*, mxMedGrid-*, mxPhProd-*
   Depends on design tokens from components_mx.css (--mx-*)
   ============================================================ */
/* ---- Keyframe Animations ---- */
@keyframes mxFadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes mxFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes mxSlideRight {
  from { opacity: 0; transform: translateX(-24px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes mxFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-18px) rotate(3deg); }
}
@keyframes mxFloatSlow {
  0%, 100% { transform: translateY(0) translateX(0); }
  33%      { transform: translateY(-22px) translateX(10px); }
  66%      { transform: translateY(10px) translateX(-12px); }
}
@keyframes mxPulse {
  0%, 100% { transform: scale(1); opacity: 0.6; }
  50%      { transform: scale(1.08); opacity: 0.9; }
}
@keyframes mxShimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
@keyframes mxUnderlineGrow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
.mx-anim-up { animation: mxFadeUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) both; }
.mx-anim-d1 { animation-delay: 0.12s; }
.mx-anim-d2 { animation-delay: 0.24s; }
/* ============================================================
   mxStatic-* — About & Privacy premium pages
   ============================================================ */
.mxStatic-hero {
  position: relative;
  overflow: hidden;
  background: var(--mx-primary-surface);
  padding: 90px 20px 70px;
  text-align: center;
}
.mxStatic-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--mx-primary-surface);
  pointer-events: none;
}
.mxStatic-hero-inner { position: relative; z-index: 2; max-width: 760px; margin: 0 auto; }
.mxStatic-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--mx-primary-glow);
  color: var(--mx-primary-darker);
  font-family: var(--mx-font-sans);
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
  padding: 7px 16px; border-radius: 999px;
  margin-bottom: 20px;
}
.mxStatic-eyebrow i { font-size: 12px; }
.mxStatic-hero h1 {
  font-family: var(--mx-font-sans);
  font-weight: 800;
  font-size: clamp(34px, 5vw, 50px);
  color: var(--mx-white);
  letter-spacing: -0.025em;
  line-height: 1.08;
  margin: 0 0 16px;
}
.mxStatic-hero p {
  font-family: var(--mx-font-sans);
  font-size: 17px;
  color: var(--mx-ink-muted);
  line-height: 1.6;
  margin: 0 auto;
  max-width: 600px;
}
/* Floating orbs */
.mxStatic-orb {
  position: absolute;
  border-radius: 50%;
  opacity: 0.10;
  pointer-events: none;
  z-index: 1;
}
.mxStatic-orb-1 {
  width: 220px; height: 220px;
  top: -60px; left: 4%;
  background: var(--mx-primary);
  animation: mxFloat 9s ease-in-out infinite;
}
.mxStatic-orb-2 {
  width: 300px; height: 300px;
  bottom: -90px; right: 2%;
  background: var(--mx-primary-light);
  animation: mxFloatSlow 14s ease-in-out infinite;
}
.mxStatic-orb-3 {
  width: 140px; height: 140px;
  top: 40%; right: 18%;
  background: var(--mx-primary);
  animation: mxPulse 7s ease-in-out infinite;
}
/* Content card */
.mxStatic-body { padding: 56px 0 80px; }
.mxStatic-card {
  background: var(--mx-surface);
  border: 1px solid var(--mx-border);
  border-radius: 20px;
  padding: 48px;
  box-shadow: var(--mx-shadow-sm);
  max-width: 860px;
  margin: 0 auto;
}
@media (max-width: 640px) {
  .mxStatic-card { padding: 28px 20px; border-radius: 14px; }
  .mxStatic-hero { padding: 60px 16px 48px; }
}

/* ---- Static-card forms (contact etc.) ---- */
.mxStatic-card form { display: flex; flex-direction: column; gap: 18px; }
.mxStatic-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  max-width: 1080px;
  margin: 0 auto;
}
@media (max-width: 900px) {
  .mxStatic-grid { grid-template-columns: 1fr; }
}
/* Contact: map + facts strip */
.mxStatic-map-wrap {
  margin-top: 32px;
}
.mxStatic-map-wrap h2 {
  font-size: 18px;
  font-weight: 700;
  color: var(--mx-ink);
  margin: 0 0 12px;
  letter-spacing: -0.01em;
}
.mxStatic-map-wrap iframe {
  display: block;
  width: 100%;
  height: 340px;
  border: 1px solid var(--mx-border);
  border-radius: var(--mx-radius-lg);
  background: var(--mx-surface-alt);
}
.mxStatic-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 32px;
}
.mxStatic-fact {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 20px;
  background: var(--mx-surface);
  border: 1px solid var(--mx-border);
  border-radius: var(--mx-radius-lg);
}
.mxStatic-fact i {
  font-size: 18px;
  color: var(--mx-primary);
  margin-bottom: 6px;
}
.mxStatic-fact strong {
  font-size: 14px;
  font-weight: 700;
  color: var(--mx-ink);
}
.mxStatic-fact span {
  font-size: 13px;
  color: var(--mx-ink-muted);
}
@media (max-width: 720px) {
  .mxStatic-facts { grid-template-columns: 1fr; }
  .mxStatic-map-wrap iframe { height: 240px; }
}
/* Contact aside rows: icon chip + text */
.mxStatic-card aside p {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 16px;
}
.mxStatic-card aside p i {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--mx-primary-surface);
  color: var(--mx-primary-darker);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}
.mxStatic-card aside p a {
  color: var(--mx-primary-darker);
  text-decoration: none;
  font-weight: 600;
}
.mxStatic-card aside p a:hover { text-decoration: underline; }

.mx-form-row { display: flex; flex-direction: column; gap: 7px; }
.mx-form-row label {
  font-size: var(--mx-text-sm, 14px);
  font-weight: 600;
  color: var(--mx-ink);
}
.mx-form-row input,
.mx-form-row textarea {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--mx-font-sans);
  font-size: var(--mx-text-sm, 14px);
  color: var(--mx-ink);
  background: var(--mx-surface);
  border: 1px solid var(--mx-border);
  border-radius: 10px;
  padding: 12px 14px;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.mx-form-row input::placeholder,
.mx-form-row textarea::placeholder { color: var(--mx-ink-muted); }
.mx-form-row input:focus,
.mx-form-row textarea:focus {
  outline: none;
  border-color: var(--mx-primary);
  box-shadow: 0 0 0 3px var(--mx-primary-glow, rgba(49,109,255,0.15));
}
.mx-form-err {
  color: var(--mx-danger-dark, #cc0000);
  font-size: var(--mx-text-xs, 13px);
  font-weight: 500;
}

/* Section-aware styling for rendered {!! !!} HTML */
.mxStatic-card h1, .mxStatic-card h2, .mxStatic-card h3,
.mxStatic-card h4, .mxStatic-card h5, .mxStatic-card h6 {
  font-family: var(--mx-font-sans);
  color: var(--mx-ink);
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 36px 0 14px;
  line-height: 1.25;
}
.mxStatic-card h1:first-child,
.mxStatic-card h2:first-child,
.mxStatic-card h3:first-child { margin-top: 0; }
.mxStatic-card h2 {
  font-size: 26px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--mx-border);
  position: relative;
}
.mxStatic-card h2::after {
  content: '';
  position: absolute;
  left: 0; bottom: -2px;
  width: 60px; height: 2px;
  background: var(--mx-primary);
  animation: mxUnderlineGrow 0.8s 0.2s cubic-bezier(0.16,1,0.3,1) both;
}
.mxStatic-card h3 { font-size: 21px; color: var(--mx-primary-darker); }
.mxStatic-card h4 { font-size: 18px; }
.mxStatic-card p {
  font-family: var(--mx-font-sans);
  font-size: 16px;
  color: var(--mx-ink-soft);
  line-height: 1.8;
  margin: 0 0 16px;
}
.mxStatic-card ul, .mxStatic-card ol {
  margin: 0 0 20px;
  padding-left: 22px;
}
.mxStatic-card li {
  font-family: var(--mx-font-sans);
  font-size: 16px;
  color: var(--mx-ink-soft);
  line-height: 1.8;
  margin-bottom: 8px;
  position: relative;
}
.mxStatic-card ul { list-style: none; padding-left: 6px; }
.mxStatic-card ul li { padding-left: 26px; }
.mxStatic-card ul li::before {
  content: '\f00c';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  color: var(--mx-primary);
  position: absolute;
  left: 0; top: 2px;
  font-size: 13px;
}
.mxStatic-card a {
  color: var(--mx-primary-darker);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--mx-primary-darker) 30%, transparent);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.2s;
}
.mxStatic-card a:hover { text-decoration-color: var(--mx-primary-darker); }
.mxStatic-card strong, .mxStatic-card b { color: var(--mx-ink); font-weight: 700; }
.mxStatic-card blockquote {
  border-left: 4px solid var(--mx-primary);
  background: var(--mx-surface-alt);
  padding: 16px 22px;
  margin: 20px 0;
  border-radius: 0 12px 12px 0;
  font-style: italic;
  color: var(--mx-ink-soft);
}
.mxStatic-card img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  margin: 20px 0;
}
.mxStatic-card table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-family: var(--mx-font-sans);
}
.mxStatic-card th, .mxStatic-card td {
  border: 1px solid var(--mx-border);
  padding: 12px 16px;
  text-align: left;
  font-size: 14px;
}
.mxStatic-card th { background: var(--mx-surface-alt); font-weight: 700; color: var(--mx-ink); }
.mxStatic-card hr {
  border: none;
  height: 1px;
  background: var(--mx-border);
  margin: 32px 0;
}
.mxStatic-card code {
  background: var(--mx-surface-alt);
  color: var(--mx-primary-darker);
  padding: 2px 7px;
  border-radius: 5px;
  font-family: var(--mx-font-mono);
  font-size: 0.9em;
}
/* ============================================================
   mxBlg-* — Blog single (magazine) + blog grid cards
   ============================================================ */
.mxBlg-article { padding: 0 0 80px; }
.mxBlg-head {
  text-align: center;
  max-width: 820px;
  margin: 0 auto;
  padding: 56px 20px 32px;
}
.mxBlg-category {
  display: inline-block;
  background: var(--mx-primary-glow);
  color: var(--mx-primary-darker);
  font-family: var(--mx-font-sans);
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 6px 14px; border-radius: 999px;
  margin-bottom: 20px;
}
.mxBlg-title {
  font-family: var(--mx-font-sans);
  font-weight: 800;
  font-size: clamp(30px, 4.5vw, 46px);
  color: var(--mx-ink);
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin: 0 0 20px;
}
.mxBlg-meta {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--mx-font-sans);
  font-size: 14px;
  color: var(--mx-ink-soft);
}
.mxBlg-meta .mxBlg-meta-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--mx-border); }
.mxBlg-meta i { color: var(--mx-primary); margin-right: 5px; }
.mxBlg-hero-wrap {
  display: flex; justify-content: center;
  margin: 8px 0 40px;
}
.mxBlg-hero-img {
  width: 100%; max-width: 900px;
  height: auto;
  max-height: 560px;
  object-fit: cover;
  border-radius: 20px;
  box-shadow: var(--mx-shadow-md);
}
.mxBlg-body {
  max-width: 720px;
  margin: 0 auto;
  font-family: var(--mx-font-sans);
  color: var(--mx-ink-soft);
  font-size: 18px;
  line-height: 1.85;
}
.mxBlg-body p { margin: 0 0 22px; }
.mxBlg-body h2, .mxBlg-body h3, .mxBlg-body h4 {
  color: var(--mx-ink); font-weight: 700;
  letter-spacing: -0.015em;
  margin: 38px 0 14px; line-height: 1.3;
}
.mxBlg-body h2 { font-size: 28px; }
.mxBlg-body h3 { font-size: 23px; color: var(--mx-primary-darker); }
.mxBlg-body img { max-width: 100%; height: auto; border-radius: 14px; margin: 24px 0; }
.mxBlg-body a { color: var(--mx-primary-darker); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.mxBlg-body ul, .mxBlg-body ol { padding-left: 24px; margin: 0 0 22px; }
.mxBlg-body li { margin-bottom: 10px; line-height: 1.8; }
.mxBlg-body blockquote {
  border-left: 4px solid var(--mx-primary);
  background: var(--mx-surface-alt);
  padding: 18px 24px;
  margin: 24px 0;
  border-radius: 0 12px 12px 0;
  font-style: italic; color: var(--mx-ink-soft); font-size: 17px;
}
.mxBlg-body strong, .mxBlg-body b { color: var(--mx-ink); font-weight: 700; }
.mxBlg-body code {
  background: var(--mx-surface-alt); color: var(--mx-primary-darker);
  padding: 2px 7px; border-radius: 5px;
  font-family: var(--mx-font-mono); font-size: 0.9em;
}
/* ---- Blog grid cards (display_blogs) ---- */
.mxBlg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 28px;
  margin-bottom: 60px;
}
.mxBlg-card {
  display: flex; flex-direction: column;
  background: var(--mx-surface);
  border: 1px solid var(--mx-border);
  border-radius: 18px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--mx-shadow-xs);
  transition: transform 0.35s cubic-bezier(0.16,1,0.3,1),
              box-shadow 0.35s cubic-bezier(0.16,1,0.3,1),
              border-color 0.35s ease;
}
.mxBlg-card:hover {
  box-shadow: var(--mx-shadow-xs);
  border-color: var(--mx-border);
}
.mxBlg-card-imgwrap {
  position: relative;
  width: 100%;
  height: 200px;
  overflow: hidden;
  background: var(--mx-surface-alt);
}
.mxBlg-card-img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.16,1,0.3,1);
}
.mxBlg-card:hover .mxBlg-card-img { transform: scale(1.06); }
.mxBlg-card-body {
  padding: 22px 22px 24px;
  display: flex; flex-direction: column;
  flex: 1;
}
.mxBlg-pill {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--mx-primary-glow);
  color: var(--mx-primary-darker);
  font-family: var(--mx-font-sans);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 999px;
  margin-bottom: 12px;
}
.mxBlg-pill i { font-size: 10px; }
.mxBlg-card-title {
  font-family: var(--mx-font-sans);
  font-size: 18px; font-weight: 700;
  color: var(--mx-ink);
  letter-spacing: -0.01em;
  line-height: 1.35;
  margin: 0 0 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.25s;
}
.mxBlg-card:hover .mxBlg-card-title { color: var(--mx-primary-darker); }
.mxBlg-card-excerpt {
  font-family: var(--mx-font-sans);
  font-size: 14px;
  color: var(--mx-ink-muted);
  line-height: 1.6;
  margin: 0 0 16px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}
.mxBlg-card-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 14px;
  border-top: 1px solid var(--mx-surface-alt);
  font-family: var(--mx-font-sans);
  font-size: 13px;
  color: var(--mx-ink-muted);
}
.mxBlg-readtime {
  display: inline-flex; align-items: center; gap: 6px;
}
.mxBlg-readtime i { color: var(--mx-primary); }
.mxBlg-readmore {
  color: var(--mx-primary); font-weight: 600;
  display: inline-flex; align-items: center; gap: 5px;
  transition: gap 0.25s;
}
.mxBlg-card:hover .mxBlg-readmore { gap: 9px; }
/* ============================================================
   mxMedGrid-* — Medicine product cards (display_medicine)
   ============================================================ */
.mxMedGrid-card {
  display: flex; flex-direction: column;
  background: var(--mx-surface);
  border: 1px solid var(--mx-border);
  border-radius: var(--mx-radius-lg);
  overflow: hidden;
  margin-bottom: 0;
  box-shadow: var(--mx-shadow);
  transition: border-color var(--mx-transition), box-shadow var(--mx-transition), transform var(--mx-transition);
}
.mxMedGrid-card:hover {
  border-color: var(--mx-primary);
  box-shadow: var(--mx-shadow-lg);
}
.mxMedGrid-imgwrap {
  position: relative;
  width: 100%;
  height: 190px;
  overflow: hidden;
  background: var(--mx-surface-alt);
  display: flex; align-items: center; justify-content: center;
}
.mxMedGrid-img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 18px;
  transition: transform 0.5s cubic-bezier(0.16,1,0.3,1);
}
.mxMedGrid-card:hover .mxMedGrid-img { transform: scale(1.06); }
.mxMedGrid-badge {
  position: absolute; top: 12px; left: 12px;
  background: var(--mx-success-surface);
  color: var(--mx-success);
  font-family: var(--mx-font);
  font-size: var(--mx-text-xs); font-weight: 700;
  padding: 4px 10px; border-radius: var(--mx-radius-pill);
  display: inline-flex; align-items: center; gap: 5px;
}
.mxMedGrid-body {
  padding: 18px 18px 20px;
  display: flex; flex-direction: column;
  flex: 1;
}
.mxMedGrid-name {
  font-family: var(--mx-font);
  font-size: var(--mx-text-lg); font-weight: 600;
  color: var(--mx-ink);
  line-height: 1.35;
  margin: 0 0 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color var(--mx-transition);
}
.mxMedGrid-card:hover .mxMedGrid-name { color: var(--mx-ink); }
.mxMedGrid-strength {
  font-family: var(--mx-font);
  font-size: var(--mx-text-sm); font-weight: 400;
  color: var(--mx-ink-muted);
  margin: 0 0 12px;
}
.mxMedGrid-foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: auto; padding-top: 12px;
}
.mxMedGrid-price {
  font-family: var(--mx-font);
  font-size: var(--mx-text-lg); font-weight: 700;
  color: var(--mx-ink);
  letter-spacing: -0.01em;
}
.mxMedGrid-price small {
  font-size: var(--mx-text-sm); font-weight: 500;
  color: var(--mx-ink-muted); margin-left: 2px;
}
.mxMedGrid-pricewrap { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; }
.mxMedGrid-mrp {
  font-family: var(--mx-font);
  font-size: var(--mx-text-sm);
  font-weight: 500;
  color: var(--mx-ink-muted);
  text-decoration: line-through;
}
.mxMedGrid-off {
  display: inline-flex;
  align-items: center;
  font-family: var(--mx-font);
  font-size: var(--mx-text-xs);
  font-weight: 700;
  color: var(--mx-danger);
  background: var(--mx-danger-surface);
  padding: 2px 8px;
  border-radius: var(--mx-radius-pill);
  margin-left: 6px;
}
.mxMedGrid-disc {
  position: absolute; top: 12px; right: 12px;
  background: var(--mx-danger);
  color: var(--mx-white);
  font-family: var(--mx-font);
  font-size: var(--mx-text-xs); font-weight: 700;
  padding: 4px 10px; border-radius: var(--mx-radius-pill);
  box-shadow: 0 2px 8px rgba(232,56,59,0.3);
}
.mxMedGrid-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font-family: var(--mx-font);
  font-size: var(--mx-text-base); font-weight: 600;
  padding: 10px 20px;
  border-radius: var(--mx-radius-pill);
  border: none;
  background: var(--mx-primary);
  color: var(--mx-white);
  text-decoration: none;
  box-shadow: 0 3px 10px rgba(20,190,240,0.32);
  transition: box-shadow var(--mx-transition), transform 120ms ease;
}
.mxMedGrid-btn:hover {
  box-shadow: 0 5px 16px rgba(20,190,240,0.45);
  color: var(--mx-white);
}
.mxMedGrid-btn i { font-size: var(--mx-text-xs); }
/* ============================================================
   mxPhProd-* — Pharmacy storefront (pharmacy_product)
   ============================================================ */
.mxPhProd-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px 16px 24px;
}
.mxPhProd-head {
  margin-bottom: 28px;
  animation: mxFadeUp 0.6s cubic-bezier(0.16,1,0.3,1) both;
}
.mxPhProd-head h1 {
  font-family: var(--mx-font-sans);
  font-size: clamp(26px, 3.5vw, 34px);
  font-weight: 800;
  color: var(--mx-ink);
  letter-spacing: -0.02em;
  margin: 0 0 6px;
}
.mxPhProd-head p {
  font-family: var(--mx-font-sans);
  font-size: 15px;
  color: var(--mx-ink-muted);
  margin: 0;
  display: inline-flex; align-items: center; gap: 8px;
}
.mxPhProd-head p i { color: var(--mx-primary); }
.mxPhProd-layout {
  display: flex; gap: 28px;
  align-items: flex-start;
}
.mxPhProd-sidebar {
  flex: 0 0 280px;
  background: var(--mx-surface);
  border: 1px solid var(--mx-border);
  border-radius: 16px;
  padding: 22px;
  box-shadow: var(--mx-shadow-xs);
  position: sticky;
  top: 20px;
}
.mxPhProd-main {
  flex: 1 1 0%;
  min-width: 0;
}
.mxPhProd-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 20px;
}
.mxPhProd-search {
  position: relative;
  margin-bottom: 22px;
}
.mxPhProd-search input {
  width: 100%;
  font-family: var(--mx-font-sans);
  font-size: 14px;
  color: var(--mx-ink);
  background: var(--mx-surface-alt);
  border: 1.5px solid var(--mx-border);
  border-radius: 12px;
  padding: 13px 48px 13px 42px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
  box-sizing: border-box;
}
.mxPhProd-search input::placeholder { color: var(--mx-ink-muted); }
.mxPhProd-search input:focus {
  border-color: var(--mx-primary);
  background: var(--mx-surface);
  box-shadow: 0 0 0 4px var(--mx-primary-glow);
}
.mxPhProd-search-icon {
  position: absolute;
  left: 16px; top: 50%;
  transform: translateY(-50%);
  color: var(--mx-ink-muted);
  font-size: 14px;
  pointer-events: none;
}
.mxPhProd-search-btn {
  position: absolute;
  right: 6px; top: 50%;
  transform: translateY(-50%);
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border: none;
  background: var(--mx-primary);
  color: var(--mx-surface);
  border-radius: 9px;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}
.mxPhProd-search-btn:hover {
  transform: translateY(-50%) scale(1.05);
  box-shadow: var(--mx-shadow-xs);
}
.mxPhProd-filter-title {
  font-family: var(--mx-font-sans);
  font-size: 13px; font-weight: 700;
  color: var(--mx-ink);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--mx-surface-alt);
  display: flex; align-items: center; gap: 8px;
}
.mxPhProd-filter-title i { color: var(--mx-primary); }
.mxPhProd-cat {
  display: flex; align-items: center;
  padding: 9px 4px;
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.2s;
}
.mxPhProd-cat:hover { background: var(--mx-surface-alt); }
.mxPhProd-cat input[type="checkbox"] {
  width: 17px; height: 17px;
  accent-color: var(--mx-primary);
  cursor: pointer;
  margin-right: 11px;
}
.mxPhProd-cat label {
  font-family: var(--mx-font-sans);
  font-size: 14px;
  color: var(--mx-ink-soft);
  cursor: pointer;
  flex: 1;
  transition: color 0.2s;
}
.mxPhProd-cat:hover label { color: var(--mx-ink); }
.mxPhProd-cat input:checked + label { color: var(--mx-primary-darker); font-weight: 600; }
.mxPhProd-empty {
  text-align: center;
  padding: 80px 20px;
  font-family: var(--mx-font-sans);
  color: var(--mx-ink-muted);
}
.mxPhProd-empty i {
  font-size: 48px;
  color: var(--mx-border);
  margin-bottom: 16px;
  display: block;
}
.mxPhProd-empty p { font-size: 16px; margin: 0; }
.mxPhProd-more {
  display: flex; justify-content: center;
  padding: 32px 0 80px;
}
.mxPhProd-more button {
  font-family: var(--mx-font-sans);
  font-size: 14px; font-weight: 700;
  color: var(--mx-primary);
  background: var(--mx-surface);
  border: 1.5px solid var(--mx-primary);
  padding: 13px 34px;
  border-radius: 12px;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  transition: all 0.25s;
}
.mxPhProd-more button:hover {
  background: var(--mx-primary);
  color: var(--mx-surface);
  box-shadow: var(--mx-shadow-xs);
}
@media (max-width: 900px) {
  .mxPhProd-layout { flex-direction: column; }
  .mxPhProd-sidebar { flex: none; width: 100%; position: static; }
}
/* ============================================================
   mxDet Layout — Two-column + Sticky booking sidebar + Tabs
   ============================================================ */
/* Two-column wrapper */
.mxDetLayoutWrap {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 24px;
  align-items: start;
  padding: 0 20px 40px;
  max-width: 1200px;
  margin: 0 auto;
}
/* Left main column */
.mxDetMainCol {
  min-width: 0;
}
/* Remove mx-container from sections inside layout (they're already constrained) */
.mxDetMainCol .mx-container {
  max-width: 100% !important;
  padding: 0 !important;
}
/* Tab navigation */
.mxDetTabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--mxDet-border, var(--mx-border));
  margin-bottom: 20px;
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--mx-surface);
  border-radius: 12px 12px 0 0;
  padding: 0 8px;
  overflow-x: auto;
}
.mxDetTab {
  background: none;
  border: none;
  padding: 14px 20px;
  font-family: var(--mx-font-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--mxDet-muted, var(--mx-ink-muted));
  cursor: pointer;
  position: relative;
  transition: color 0.2s;
  white-space: nowrap;
}
.mxDetTab:hover { color: var(--mxDet-primary, var(--mx-primary)); }
.mxDetTab.active { color: var(--mxDet-primary, var(--mx-primary)); }
.mxDetTab.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--mxDet-primary, var(--mx-primary));
  border-radius: 3px 3px 0 0;
  animation: mxUnderlineGrow 0.3s ease;
}
/* Tab panels */
.mxDetTabPanel {
  display: none;
}
.mxDetTabPanel.active {
  display: block;
  animation: mxFadeIn 0.4s ease;
}
.mxDetTabFade {
  animation: mxFadeIn 0.35s ease;
}
/* Sticky booking sidebar */
.mxDetAside {
  position: sticky;
  top: 20px;
}
.mxDetBookCard {
  background: var(--mx-surface);
  border: 1px solid var(--mx-border);
  border-radius: 16px;
  padding: 24px;
  box-shadow: var(--mx-shadow-xs);
}
.mxDetBookFee {
  text-align: center;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--mx-border);
}
.mxDetBookFeeLabel {
  display: block;
  font-size: 12px;
  color: var(--mx-ink-muted);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}
.mxDetBookFeeAmt {
  font-size: 32px;
  font-weight: 800;
  color: var(--mx-primary);
  font-family: var(--mx-font-sans);
}
.mxDetBookClinic {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--mx-border);
}
.mxDetBookClinicName {
  font-size: 16px;
  font-weight: 700;
  color: var(--mx-ink);
  margin: 0 0 8px;
  font-family: var(--mx-font-sans);
}
.mxDetBookClinicAddr {
  font-size: 13px;
  color: var(--mx-ink-muted);
  line-height: 1.5;
  margin: 0 0 10px;
}
.mxDetBookClinicAddr i {
  color: var(--mx-primary);
  margin-right: 6px;
}
.mxDetBookDirections {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--mx-primary);
  text-decoration: none;
  transition: opacity 0.2s;
}
.mxDetBookDirections:hover { opacity: 0.8; }
.mxDetBookDirections i { margin-right: 6px; }
.mxDetBookSlots {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--mx-border);
}
.mxDetBookSlotsTitle {
  font-size: 13px;
  font-weight: 600;
  color: var(--mx-ink);
  margin: 0 0 10px;
}
.mxDetBookSlotList {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.mxDetBookSlot {
  font-size: 12px;
  font-weight: 600;
  color: var(--mx-primary);
  background: var(--mx-primary-surface);
  padding: 5px 10px;
  border-radius: 6px;
  border: 1px solid var(--mx-primary-surface);
}
.mxDetBookSlotEmpty {
  font-size: 13px;
  color: var(--mx-ink-muted);
  margin: 0;
}
.mxDetBookBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px 20px;
  background: var(--mx-primary);
  color: var(--mx-surface);
  font-size: 15px;
  font-weight: 700;
  font-family: var(--mx-font-sans);
  text-decoration: none;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  transition: transform 0.15s, background 0.2s;
  margin-bottom: 10px;
}
.mxDetBookBtn:hover {
  background: var(--mx-primary-dark);
}
.mxDetBookBtnVideo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 20px;
  background: var(--mx-surface);
  color: var(--mx-primary);
  font-size: 14px;
  font-weight: 600;
  font-family: var(--mx-font-sans);
  text-decoration: none;
  border-radius: 10px;
  border: 2px solid var(--mx-primary);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  margin-bottom: 16px;
}
.mxDetBookBtnVideo:hover {
  background: var(--mx-primary);
  color: var(--mx-surface);
}
.mxDetBookQuick {
  display: flex;
  justify-content: center;
  gap: 10px;
}
.mxDetBookQuick .mxDetIconBtn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 2px solid var(--mx-border);
  color: var(--mx-primary);
  text-decoration: none;
  transition: border-color 0.2s, background 0.2s;
}
.mxDetBookQuick .mxDetIconBtn:hover {
  border-color: var(--mx-primary);
  background: var(--mx-primary-surface);
}
/* Responsive: tablet */
@media (max-width: 1024px) {
  .mxDetLayoutWrap {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .mxDetAside {
    position: static;
    order: -1;
  }
}
/* Responsive: mobile */
@media (max-width: 640px) {
  .mxDetLayoutWrap {
    padding: 0 12px 24px;
  }
  .mxDetTabs {
    padding: 0 4px;
  }
  .mxDetTab {
    padding: 12px 14px;
    font-size: 13px;
  }
  .mxDetBookCard {
    padding: 16px;
  }
  .mxDetBookFeeAmt {
    font-size: 26px;
  }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .mxDetTabPanel.active,
  .mxDetTabFade,
  .mxDetTab.active::after {
    animation: none !important;
  }
}.mx-doc-filter{border-bottom:1px solid var(--mx-border-light);padding:16px 0}
.mx-doc-filter:first-of-type{padding-top:0}
.mx-doc-filter-title{font-family:var(--mx-font-sans);font-size:var(--mx-text-sm);font-weight:600;color:var(--mx-ink);margin:0 0 10px}
.mx-doc-filter-options{display:flex;flex-direction:column;gap:8px}
.mx-doc-filter-opt{display:flex;align-items:center;gap:8px;font-family:var(--mx-font-sans);font-size:var(--mx-text-sm);color:var(--mx-ink-soft);cursor:pointer}
.mx-doc-filter-opt input{width:16px;height:16px;accent-color:var(--mx-primary);cursor:pointer}
.mx-doc-filter-opt:hover{color:var(--mx-ink)}
.mx-doc-aside-clear{font-family:var(--mx-font-sans);font-size:var(--mx-text-sm);font-weight:600;color:var(--mx-primary);background:none;border:none;cursor:pointer;padding:0}
.mx-doc-aside-clear:hover{text-decoration:underline;color:var(--mx-primary-dark)}
.mx-doc-list{display:flex;flex-direction:column;gap:16px}
.mxDocPage{font-family:var(--mx-font-sans);color:var(--mx-ink);padding:0 0 72px;background:var(--mx-surface-alt)}
.mxDocCrumb{font-size:var(--mx-text-sm);color:var(--mx-ink-muted);padding:14px 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.mxDocCrumb a{color:var(--mx-primary);text-decoration:none;font-weight:500}
.mxDocCrumb a:hover{text-decoration:underline}
.mxDocCrumb span.sep{color:var(--mx-gray-300);font-size:11px}
.mxDocCrumb span.cur{color:var(--mx-ink);font-weight:600}
.mxDocHero{background:var(--mx-surface);border:1px solid var(--mx-border);border-radius:var(--mx-radius);padding:24px 28px;margin:14px 0 20px}
.mxDocHeroWrap{display:flex;gap:20px;align-items:flex-start}
.mxDocAvatar{flex:0 0 auto;position:relative;width:80px;height:80px;border-radius:50%;background:var(--mx-primary-surface);display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0}
.mxDocAvatarIcon{color:var(--mx-primary);font-size:30px}
.mxDocAvatar img{position:absolute;inset:0;width:80px;height:80px;border-radius:50%;object-fit:cover;border:1px solid var(--mx-border);display:block;background:var(--mx-primary-surface)}
.mxDocIdentity{flex:1 1 auto;min-width:0}
.mxDocName{font-size:20px;font-weight:600;line-height:1.2;color:var(--mx-ink);margin:0 0 4px;letter-spacing:-0.01em}
.mxDocSpecialty{font-size:14px;font-weight:500;color:var(--mx-ink-muted);margin:0 0 10px}
.mxDocMetaLine{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:var(--mx-text-sm);color:var(--mx-ink-soft);margin:0 0 8px}
.mxDocMetaLine i{color:var(--mx-ink-muted);font-size:13px}
.mxDocLocName{font-weight:600;color:var(--mx-ink)}
.mxDocRatingRow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.mxDocRatingPill{display:inline-flex;align-items:center;gap:4px;background:var(--mx-success);color:var(--mx-surface);font-weight:700;padding:3px 8px;border-radius:var(--mx-radius-sm);font-size:var(--mx-text-sm)}
.mxDocRatingPill i{font-size:10px}
.mxDocReviewsCount{font-size:var(--mx-text-sm);color:var(--mx-ink-muted);font-weight:500}
.mxDocDot{color:var(--mx-ink-muted)}
.mxDocFeeInline{font-size:var(--mx-text-sm);color:var(--mx-ink);font-weight:600}
.mxDocTags{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.mxDocTag{display:inline-flex;align-items:center;gap:6px;background:var(--mx-surface-alt);border:1px solid var(--mx-border);color:var(--mx-ink-soft);font-size:var(--mx-text-xs);font-weight:600;padding:5px 10px;border-radius:var(--mx-radius-pill)}
.mxDocTag img{width:16px;height:16px;border-radius:4px;object-fit:cover}
.mxDocActionbar{display:none;gap:10px;background:var(--mx-surface);border:1px solid var(--mx-border);border-radius:var(--mx-radius);padding:10px;margin-bottom:20px;flex-wrap:wrap}
.mxDocActionbar>a{flex:1 1 auto;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--mx-font-sans);font-weight:600;font-size:var(--mx-text-base);padding:11px 16px;border-radius:6px;border:1px solid transparent;text-decoration:none;cursor:pointer;white-space:nowrap}
.mxDocActBook{background:var(--mx-primary);color:var(--mx-surface)}
.mxDocActBook:hover{background:var(--mx-primary-dark);color:var(--mx-surface)}
.mxDocActVideo{background:var(--mx-success);color:var(--mx-surface)}
.mxDocActVideo:hover{background:var(--mx-success-dark);color:var(--mx-surface)}
.mxDocActChat{background:var(--mx-surface);color:var(--mx-primary);border-color:var(--mx-primary)}
.mxDocActChat:hover{background:var(--mx-primary-surface)}
.mxDocLayoutWrap{display:grid;grid-template-columns:1fr 360px;gap:24px;align-items:start}
.mxDocMainCol{min-width:0}
.mxDocTabs{display:flex;gap:0;background:var(--mx-surface);border:1px solid var(--mx-border);border-bottom:1px solid var(--mx-border);border-radius:var(--mx-radius) var(--mx-radius) 0 0;padding:0;margin-bottom:0;overflow-x:auto}
.mxDocTab{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;padding:14px 20px;font-family:var(--mx-font-sans);font-size:var(--mx-text-base);font-weight:600;color:var(--mx-ink-muted);border:none;border-bottom:2px solid transparent;background:transparent;cursor:pointer;white-space:nowrap;margin-bottom:-1px}
.mxDocTab:hover{color:var(--mx-ink)}
.mxDocTab.active{color:var(--mx-primary);border-bottom-color:var(--mx-primary)}
.mxDocTabCount{font-size:var(--mx-text-xs);color:var(--mx-ink-muted);font-weight:500}
.mxDocTabPanels{background:transparent;margin-top:0}
.mxDocTabPanel{display:none}
.mxDocTabPanel.active{display:block;animation:mxDocFade 300ms ease}
@keyframes mxDocFade{from{opacity:0}to{opacity:1}}
.mxDocCard{background:var(--mx-surface);border:1px solid var(--mx-border);border-radius:var(--mx-radius);padding:24px;margin-bottom:16px}
.mxDocCardHead{margin-bottom:14px}
.mxDocCardTitle{font-size:18px;font-weight:600;color:var(--mx-ink);margin:0;letter-spacing:-0.01em}
.mxDocSectionIntro{font-size:14px;line-height:1.6;max-width:65ch;color:var(--mx-ink-soft);margin:0}
.mxDocSpecTags{display:flex;flex-wrap:wrap;gap:8px}
.mxDocSpecTag{display:inline-flex;align-items:center;font-size:var(--mx-text-sm);font-weight:500;padding:6px 14px;border-radius:var(--mx-radius-pill);background:var(--mx-primary-surface);color:var(--mx-primary-dark)}
.mxDocEduList{display:flex;flex-direction:column;gap:0;border-left:2px solid var(--mx-border);margin-left:6px;padding-left:0}
.mxDocEduItem{display:flex;gap:14px;align-items:flex-start;padding:14px 0;position:relative}
.mxDocEduItem:first-child{padding-top:0}
.mxDocEduItem:last-child{padding-bottom:0}
.mxDocEduItem::before{content:"";position:absolute;left:-7px;top:18px;width:12px;height:12px;border-radius:50%;background:var(--mx-primary);border:2px solid var(--mx-surface);box-shadow:0 0 0 1px var(--mx-border)}
.mxDocEduItem:first-child::before{top:4px}
.mxDocEduYear{flex:0 0 auto;font-weight:700;color:var(--mx-primary-dark);font-size:14px;min-width:60px}
.mxDocEduBody{flex:1 1 auto;min-width:0}
.mxDocEduDeg{font-weight:600;color:var(--mx-ink);font-size:var(--mx-text-base);margin:0 0 2px}
.mxDocEduCollege{font-size:var(--mx-text-sm);color:var(--mx-ink-muted);margin:0}
.mxDocRegList{display:flex;flex-direction:column;gap:8px;font-size:var(--mx-text-sm);color:var(--mx-ink-soft)}
.mxDocRegList p{margin:0}
.mxDocLocations{display:grid;grid-template-columns:1fr;gap:14px}
.mxDocLocation{border:1px solid var(--mx-border);border-radius:var(--mx-radius);padding:18px}
.mxDocLocationName{font-size:var(--mx-text-lg);font-weight:600;color:var(--mx-ink);margin:0 0 6px}
.mxDocLocationAddr{font-size:var(--mx-text-sm);color:var(--mx-ink-muted);margin:0 0 10px;display:flex;align-items:flex-start;gap:6px}
.mxDocDirections{display:inline-flex;align-items:center;gap:6px;font-size:var(--mx-text-sm);font-weight:600;color:var(--mx-primary);text-decoration:none}
.mxDocDirections:hover{text-decoration:underline}
.mxDocGallery{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.mxDocGalleryItem{display:block;width:96px;height:96px;border-radius:var(--mx-radius-sm);overflow:hidden;border:1px solid var(--mx-border)}
.mxDocGalleryItem img{width:100%;height:100%;object-fit:cover}
.mxDocEmpty{padding:24px;text-align:center;color:var(--mx-ink-muted);font-size:var(--mx-text-sm)}
.mxDocReview{display:flex;gap:32px;align-items:center;flex-wrap:wrap;padding-bottom:20px;border-bottom:1px solid var(--mx-border-light);margin-bottom:20px}
.mxDocReviewScore{display:flex;flex-direction:column;align-items:center;gap:6px;flex:0 0 auto}
.mxDocReviewScoreNum{font-size:44px;font-weight:700;color:var(--mx-ink);line-height:1}
.mxDocReviewStars{display:inline-flex;gap:2px}
.mxDocReviewStars i{color:var(--mx-gray-300);font-size:16px}
.mxDocReviewStars i.on{color:var(--mx-warning)}
.mxDocReviewStars.sm i{font-size:13px}
.mxDocReviewBased{font-size:var(--mx-text-xs);color:var(--mx-ink-muted);font-weight:500}
.mxDocRecommend{font-size:var(--mx-text-sm);font-weight:600;color:var(--mx-success);margin-top:2px}
.mxDocReviewBars{flex:1 1 240px;display:flex;flex-direction:column;gap:7px;min-width:220px}
.mxDocReviewBarRow{display:flex;align-items:center;gap:10px}
.mxDocReviewBarLabel{display:inline-flex;align-items:center;gap:3px;font-size:var(--mx-text-xs);font-weight:600;color:var(--mx-ink-muted);flex:0 0 44px}
.mxDocReviewBarLabel i{color:var(--mx-warning);font-size:10px}
.mxDocReviewBarTrack{flex:1 1 auto;height:8px;background:var(--mx-gray-100);border-radius:var(--mx-radius-pill);overflow:hidden}
.mxDocReviewBarFill{display:block;height:100%;width:var(--w,0%);background:var(--mx-warning);border-radius:var(--mx-radius-pill)}
.mxDocReviewBarPct{font-size:var(--mx-text-xs);font-weight:600;color:var(--mx-ink-muted);flex:0 0 36px;text-align:right}
.mxDocReviewList{display:flex;flex-direction:column;gap:14px}
.mxDocReviewItem{display:flex;gap:14px;padding:16px;border:1px solid var(--mx-border);border-radius:var(--mx-radius);background:var(--mx-surface)}
.mxDocReviewAvatar{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:0 0 auto;border:1px solid var(--mx-border)}
.mxDocReviewBody{flex:1 1 auto;min-width:0}
.mxDocReviewTop{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:4px}
.mxDocReviewName{font-size:var(--mx-text-base);font-weight:600;color:var(--mx-ink);margin:0}
.mxDocReviewDate{font-size:var(--mx-text-xs);color:var(--mx-ink-muted)}
.mxDocReviewText{font-size:var(--mx-text-sm);color:var(--mx-ink-soft);line-height:1.6;margin:6px 0 0}
.mxDocReviewPaginate{margin-top:20px;display:flex;justify-content:center}
.mxDocReviewPaginate .page-link{color:var(--mx-primary);border-radius:var(--mx-radius-sm)!important;border:1px solid var(--mx-border);padding:8px 13px}
.mxDocReviewPaginate .page-item.active .page-link{background:var(--mx-primary);border-color:var(--mx-primary)}
.mxDocAside{position:sticky;top:84px}
.mxDocBookCard{background:var(--mx-surface);border:1px solid var(--mx-border);border-radius:var(--mx-radius);padding:22px}
.mxDocBookFee{padding-bottom:16px;border-bottom:1px solid var(--mx-border-light);margin-bottom:16px}
.mxDocBookFeeAmt{font-size:var(--mx-text-2xl);font-weight:700;color:var(--mx-ink);display:block}
.mxDocBookFeeLabel{font-size:var(--mx-text-xs);color:var(--mx-ink-muted);font-weight:500}
.mxDocBookAvail{display:inline-flex;align-items:center;gap:6px;font-size:var(--mx-text-sm);font-weight:600;color:var(--mx-success);margin-bottom:12px}
.mxDocBookAvail i{font-size:11px}
.mxDocBookClinic{padding:12px 0;border-bottom:1px solid var(--mx-border-light)}
.mxDocBookClinicName{font-size:var(--mx-text-base);font-weight:600;color:var(--mx-ink);margin:0 0 4px}
.mxDocBookClinicAddr{font-size:var(--mx-text-xs);color:var(--mx-ink-muted);margin:0 0 6px;display:flex;align-items:flex-start;gap:5px}
.mxDocBookDirections{display:inline-flex;align-items:center;gap:5px;font-size:var(--mx-text-xs);font-weight:600;color:var(--mx-primary);text-decoration:none}
.mxDocBookDirections:hover{text-decoration:underline}
.mxDocBookSlots{padding:14px 0;border-bottom:1px solid var(--mx-border-light);margin-bottom:14px}
.mxDocBookSlotsTitle{font-size:var(--mx-text-sm);font-weight:600;color:var(--mx-ink);margin:0 0 10px}
.mxDocBookSlotList{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.mxDocBookSlot{font-size:var(--mx-text-xs);font-weight:600;padding:8px 6px;border:1px solid var(--mx-primary);border-radius:6px;color:var(--mx-primary);background:var(--mx-primary-surface);text-align:center;cursor:pointer}
.mxDocBookSlot:hover{background:var(--mx-primary);color:var(--mx-surface)}
.mxDocBookSlotEmpty{font-size:var(--mx-text-xs);color:var(--mx-ink-muted);margin:0}
.mxDocBookBtn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;background:var(--mx-primary);color:var(--mx-surface);font-family:var(--mx-font-sans);font-weight:600;font-size:var(--mx-text-base);padding:12px;border-radius:6px;border:none;cursor:pointer;text-decoration:none;margin-bottom:8px}
.mxDocBookBtn:hover{background:var(--mx-primary-dark);color:var(--mx-surface)}
.mxDocBookBtnVideo{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;background:var(--mx-surface);color:var(--mx-primary);font-family:var(--mx-font-sans);font-weight:600;font-size:var(--mx-text-base);padding:12px;border-radius:6px;border:1px solid var(--mx-primary);cursor:pointer;text-decoration:none;margin-bottom:14px}
.mxDocBookBtnVideo:hover{background:var(--mx-primary-surface)}
.mxDocBookQuick{display:flex;gap:8px;justify-content:center}
.mxDocIconBtn{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:6px;border:1px solid var(--mx-border);background:var(--mx-surface);color:var(--mx-primary);font-size:15px;cursor:pointer;text-decoration:none}
.mxDocIconBtn:hover{border-color:var(--mx-primary);background:var(--mx-primary-surface)}
@media(max-width:980px){.mxDocLayoutWrap{grid-template-columns:1fr}.mxDocAside{position:static;top:auto}.mxDocActionbar{display:flex}}
@media(max-width:640px){.mxDocHero{padding:20px}.mxDocHeroWrap{flex-direction:column;align-items:center;text-align:center}.mxDocRatingRow,.mxDocTags{justify-content:center}}
/* Animation utility — pairs with @keyframes mxDocFade above */
.mxDocFade{animation:mxDocFade 300ms ease}

/* ===== MEDICINE CART / PRODUCT (used by display_medicine + medicine_detail) ===== */
.mxMedProductImg {
  width: 100%; max-height: 200px; object-fit: contain;
  border-radius: var(--mx-radius);
}
.mxMedQtyLabel {
  font-family: var(--mx-font-sans); font-size: 14px; font-weight: 600;
  color: var(--mx-ink); margin: 0 0 8px;
}
.mxMed-add-cart-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 10px 20px;
  background: var(--mx-primary); color: var(--mx-white);
  border: none; border-radius: var(--mx-radius);
  font-family: var(--mx-font-sans); font-size: 14px; font-weight: 600;
  cursor: pointer; transition: background var(--mx-transition);
}
.mxMed-add-cart-btn:hover { background: var(--mx-primary-dark); }
.mxMed-add-cart-label { pointer-events: none; }
.mxMed-view-cart-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 10px 20px;
  background: var(--mx-success); color: var(--mx-white);
  border: none; border-radius: var(--mx-radius);
  font-family: var(--mx-font-sans); font-size: 14px; font-weight: 600;
  cursor: pointer; transition: background var(--mx-transition);
}
.mxMed-view-cart-btn:hover { background: var(--mx-success-dark); }

/* ============================================================
   PHARMACY HERO + LAYOUT + CARDS (appended to listing_mx.css)
   ============================================================ */

/* Override earlier grid so pharmacy cards stack as full-width rows */
.mx-ph-page .mx-ph-grid{
  display: flex;
  flex-direction: column;
  gap: 0;
}
/* Force horizontal row layout (overrides earlier column card) */
.mx-ph-page .mx-phcard{
  flex-direction: row;
  align-items: center;
  transition: box-shadow 200ms ease, transform 200ms ease, border-color 200ms ease;
}
.mx-ph-page .mx-phcard:hover{
  box-shadow: var(--mx-shadow-lg);
  border-color: var(--mx-primary-light);
}
.mx-ph-page .mx-phcard-img-wrap{
  height: auto;
  width: 120px;
  flex: 0 0 120px;
}
.mx-ph-page .mx-phcard-photo{
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: var(--mx-radius);
}

/* ===== New page-top header (compact solid-primary) ===== */
.mx-ph-top {
  background: var(--mx-primary);
  color: var(--mx-white);
  border-bottom: 1px solid color-mix(in srgb, var(--mx-primary-dark) 60%, var(--mx-ink) 40%);
  padding: 28px 0 32px;
  text-align: center;
}
.mx-ph-top-inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 20px;
}
.mx-ph-top-text { margin-bottom: 14px; }
.mx-ph-top-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255,255,255,0.18);
  color: var(--mx-white);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: var(--mx-radius-pill);
  margin-bottom: 10px;
}
.mx-ph-top-text h1 {
  font-family: var(--mx-font);
  font-size: 24px;
  font-weight: 700;
  color: var(--mx-white);
  margin: 0 0 4px;
  letter-spacing: -0.02em;
}
.mx-ph-top-text p {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.92);
  margin: 0;
}
.mx-ph-top-bar {
  display: flex;
  align-items: center;
  max-width: 560px;
  margin: 14px auto 0;
  background: var(--mx-white);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--mx-radius-pill);
  overflow: hidden;
  padding: 4px 4px 4px 8px;
  box-shadow: var(--mx-shadow-cta);
  transition: box-shadow var(--mx-transition), border-color var(--mx-transition);
}
.mx-ph-top-bar:focus-within { border-color: var(--mx-primary); box-shadow: 0 4px 16px rgba(20,190,240,0.20); }
.mx-ph-top-ico {
  padding: 0 12px 0 14px;
  color: var(--mx-ink-muted);
  font-size: 16px;
}
.mx-ph-top-input {
  flex: 1;
  border: none;
  outline: none;
  padding: 10px 0;
  font-family: var(--mx-font);
  font-size: 15px;
  color: var(--mx-ink);
  background: transparent;
}
.mx-ph-top-input::placeholder { color: var(--mx-ink-muted); }
.mx-ph-top-btn {
  flex: 0 0 auto;
  padding: 10px 22px;
  background: var(--mx-primary-darker);
  color: var(--mx-white);
  border: none;
  font-family: var(--mx-font);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  border-radius: var(--mx-radius-pill);
  transition: background var(--mx-transition);
}
.mx-ph-top-btn:hover { background: color-mix(in srgb, var(--mx-primary-darker) 85%, var(--mx-ink) 15%); }

/* ===== Labs page top ===== */
.mx-lb-top {
  background: var(--mx-primary);
  color: var(--mx-white);
  border-bottom: 1px solid color-mix(in srgb, var(--mx-primary-dark) 60%, var(--mx-ink) 40%);
  padding: 28px 0 32px;
  text-align: center;
}
.mx-lb-top-inner { max-width: 760px; margin: 0 auto; padding: 0 20px; }
.mx-lb-top-text { margin-bottom: 14px; }
.mx-lb-top-text h1 {
  font-family: var(--mx-font);
  font-size: 24px;
  font-weight: 700;
  color: var(--mx-white);
  margin: 0 0 4px;
  letter-spacing: -0.02em;
}
.mx-lb-top-text p {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.92);
  margin: 0;
}
.mx-lb-top-bar {
  display: flex; align-items: center;
  background: var(--mx-white);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--mx-radius-pill);
  overflow: hidden;
  padding: 4px 4px 4px 8px;
  box-shadow: var(--mx-shadow-cta);
  transition: box-shadow var(--mx-transition), border-color var(--mx-transition);
}
.mx-lb-top-bar:focus-within { border-color: var(--mx-white); box-shadow: var(--mx-shadow-cta-hover); }
.mx-lb-top-ico { padding: 0 12px 0 14px; color: var(--mx-ink-muted); font-size: 16px; }
.mx-lb-top-input {
  flex: 1; border: none; outline: none; padding: 10px 0;
  font-family: var(--mx-font); font-size: 15px;
  color: var(--mx-ink); background: transparent;
}
.mx-lb-top-input::placeholder { color: var(--mx-ink-muted); }
.mx-lb-top-btn {
  flex: 0 0 auto; padding: 10px 22px;
  background: var(--mx-primary-darker); color: var(--mx-white);
  border: none; font-family: var(--mx-font);
  font-weight: 600; font-size: 14px;
  cursor: pointer; border-radius: var(--mx-radius-pill);
  transition: background var(--mx-transition);
}
.mx-lb-top-btn:hover { background: color-mix(in srgb, var(--mx-primary-darker) 85%, var(--mx-ink) 15%); }

.mx-ph-hero{
  position: relative;
  background: var(--mx-primary);
  padding: 28px 20px 32px;
  text-align: center;
  overflow: hidden;
  border-bottom: 1px solid color-mix(in srgb, var(--mx-primary-dark) 60%, var(--mx-ink) 40%);
}
.mx-ph-hero-inner{ position: relative; z-index: 1; max-width: 680px; margin: 0 auto; }
.mx-ph-hero-eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--mx-white-a10);
  border: 1px solid var(--mx-white-a20);
  color: var(--mx-white);
  font-family: var(--mx-font);
  font-size: var(--mx-text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 7px 14px;
  border-radius: var(--mx-radius-pill);
  margin-bottom: 18px;
  backdrop-filter: blur(4px);
}
.mx-ph-hero-eyebrow i{ color: var(--mx-primary-light); font-size: 11px; }
.mx-ph-hero-title{
  font-family: var(--mx-font);
  font-size: 40px;
  font-weight: 800;
  color: var(--mx-white);
  margin: 0 0 var(--mx-space-3);
  letter-spacing: -0.025em;
  line-height: 1.15;
  text-wrap: balance;
}
.mx-ph-hero-sub{
  font-family: var(--mx-font);
  font-size: var(--mx-text-xl);
  color: rgba(255,255,255,0.9);
  margin: 0 0 var(--mx-space-8);
  line-height: 1.5;
  text-wrap: pretty;
}
.mx-ph-hero-bar{
  display: flex;
  align-items: center;
  background: var(--mx-white);
  border-radius: var(--mx-radius-pill);
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0,0,0,0.18);
  padding: 6px 6px 6px 8px;
}
.mx-ph-hero-ico{
  padding: 0 var(--mx-space-3) 0 var(--mx-space-4);
  color: var(--mx-primary);
  font-size: var(--mx-text-lg);
}
.mx-ph-hero-input{
  flex: 1;
  border: none;
  outline: none;
  padding: var(--mx-space-3) 0;
  font-family: var(--mx-font);
  font-size: var(--mx-text-base);
  color: var(--mx-ink);
  background: transparent;
}
.mx-ph-hero-input::placeholder { color: var(--mx-ink-muted); }
.mx-ph-hero-btn{
  flex: 0 0 auto;
  padding: var(--mx-space-3) var(--mx-space-6);
  background: var(--mx-primary);
  color: var(--mx-white);
  border: none;
  font-family: var(--mx-font);
  font-weight: 600;
  font-size: var(--mx-text-base);
  cursor: pointer;
  border-radius: var(--mx-radius-pill);
  box-shadow: 0 4px 14px rgba(20,190,240,0.4);
  transition: background var(--mx-transition), box-shadow var(--mx-transition), transform 120ms ease;
}
.mx-ph-hero-btn:hover{ box-shadow: 0 6px 18px rgba(20,190,240,0.5);  }
.mx-ph-hero-btn:active{ transform: translateY(0); }

/* pharmacy two-column layout */
.mx-ph-layout{
  display: flex;
  gap: var(--mx-space-6);
  align-items: flex-start;
  margin-top: var(--mx-space-8);
}
.mx-ph-aside{
  flex: 0 0 240px;
  position: sticky;
  top: 90px;
}
.mx-ph-main{ flex: 1; min-width: 0; }
.mx-ph-rhead{ margin-bottom: var(--mx-space-5); }
.mx-ph-rhead h2{
  font-family: var(--mx-font);
  font-size: var(--mx-text-xl);
  font-weight: 700;
  color: var(--mx-ink);
  margin: 0;
}
.mx-ph-rhead p{
  font-family: var(--mx-font);
  font-size: var(--mx-text-sm);
  color: var(--mx-ink-soft);
  margin: 4px 0 0;
}
.mx-ph-countnum{ color: var(--mx-primary); }

/* pharmacy card (horizontal row, Practo-style) */
.mx-phcard{
  display: flex;
  align-items: center;
  gap: var(--mx-space-5);
  background: var(--mx-surface);
  border: 1px solid var(--mx-border);
  border-radius: var(--mx-radius-lg);
  padding: var(--mx-space-5);
  margin-bottom: var(--mx-space-4);
  box-shadow: var(--mx-shadow);
  transition: border-color var(--mx-transition), box-shadow var(--mx-transition), transform var(--mx-transition);
}
.mx-phcard:hover{
  border-color: var(--mx-primary);
  box-shadow: var(--mx-shadow-lg);
}
.mx-phcard-img-wrap{
  flex: 0 0 88px;
  position: relative;
}
.mx-phcard-photo{
  width: 88px;
  height: 88px;
  object-fit: cover;
  border-radius: var(--mx-radius-lg);
  background: var(--mx-surface-alt);
  box-shadow: var(--mx-shadow-xs);
}
.mx-phcard-pill{
  position: absolute;
  top: 6px; left: 6px;
  background: var(--mx-success);
  color: var(--mx-white);
  font-size: var(--mx-text-xs);
  font-weight: 600;
  padding: 3px 8px;
  border-radius: var(--mx-radius-pill);
}

.mx-phcard-body{ flex: 1; min-width: 0; }
.mx-phcard-name{
  display: block;
  font-family: var(--mx-font);
  font-size: var(--mx-text-lg);
  font-weight: 700;
  color: var(--mx-ink);
  text-decoration: none;
  margin-bottom: 4px;
}
.mx-phcard-name:hover{ color: var(--mx-primary); }
.mx-phcard-meta{
  font-family: var(--mx-font);
  font-size: var(--mx-text-sm);
  color: var(--mx-ink-muted);
  margin: 2px 0;
}
.mx-phcard-meta i{ color: var(--mx-ink-muted); margin-right: 4px; }
.mx-phcard-loc{
  font-family: var(--mx-font);
  font-size: var(--mx-text-sm);
  color: var(--mx-ink-muted);
  margin: 2px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mx-phcard-loc i{ color: var(--mx-ink-muted); margin-right: 4px; }
.mx-phcard-actions{
  flex: 0 0 150px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mx-phcard-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: var(--mx-space-3) var(--mx-space-4);
  background: var(--mx-primary);
  color: var(--mx-white);
  font-family: var(--mx-font);
  font-size: var(--mx-text-sm);
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--mx-radius);
  transition: background var(--mx-transition);
}
.mx-phcard-btn{ border-radius: var(--mx-radius-pill); box-shadow: 0 3px 10px rgba(20,190,240,0.3); transition: box-shadow var(--mx-transition), transform 120ms ease; }
.mx-phcard-btn:hover{ box-shadow: 0 5px 14px rgba(20,190,240,0.4);  }

@media (max-width: 760px){
  .mx-ph-layout{ flex-direction: column; }
  .mx-ph-aside{ position: static; flex: 1 1 auto; }
  .mx-ph-main{ width: 100%; max-width: 100%; }
  .mx-phcard{ flex-direction: column; align-items: flex-start; max-width: 100%; }
  .mx-phcard-body{ min-width: 0; max-width: 100%; }
  .mx-phcard-loc{ max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .mx-phcard-actions{ flex: 1 1 100%; width: 100%; max-width: 100%; flex-direction: row; }
  .mx-phcard-actions > *{ flex: 1; min-width: 0; }
  .mx-ph-hero-bar{ flex-wrap: wrap; }
  .mx-ph-hero-btn{ flex: 1 1 100%; margin-top: 8px; }
}

/* ============================================================
   PHARMACY SIDEBAR + FILTER (mx-ph-aside-card, mx-filter-*)
   Premium filter card with icons, teal active state, hover bg.
   ============================================================ */
.mx-ph-aside-card{
  background: var(--mx-surface);
  border: 1px solid var(--mx-border);
  border-radius: var(--mx-radius-lg);
  padding: var(--mx-space-5) var(--mx-space-5) var(--mx-space-4);
  box-shadow: var(--mx-shadow-sm);
}
.mx-ph-aside-title{
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mx-font);
  font-size: var(--mx-text-base);
  font-weight: 700;
  color: var(--mx-ink);
  margin: 0 0 var(--mx-space-3);
  padding-bottom: var(--mx-space-3);
  border-bottom: 1px solid var(--mx-border-light);
}
.mx-ph-aside-title i{ color: var(--mx-primary); font-size: var(--mx-text-sm); }
.mx-filter-toggle{
  display: none;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px;
  margin-bottom: var(--mx-space-3);
  background: var(--mx-surface);
  border: 1px solid var(--mx-border);
  border-radius: var(--mx-radius);
  font-family: var(--mx-font);
  font-size: var(--mx-text-base);
  font-weight: 600;
  color: var(--mx-ink-soft);
  cursor: pointer;
}
.mx-filter-sect{ padding: var(--mx-space-2) 0; }
.mx-filter-label{
  font-family: var(--mx-font);
  font-size: var(--mx-text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--mx-ink-muted);
  margin: 0 0 var(--mx-space-3);
}
.mx-filter-opt{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 10px;
  margin: 0 -6px 4px;
  border-radius: var(--mx-radius);
  cursor: pointer;
  transition: background var(--mx-transition);
  font-family: var(--mx-font);
}
.mx-filter-opt:hover{ background: var(--mx-surface-hover); }
.mx-filter-opt input{
  width: 16px; height: 16px;
  accent-color: var(--mx-primary);
  cursor: pointer;
  flex: 0 0 auto;
}
.mx-filter-opt-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: var(--mx-radius-sm);
  background: var(--mx-primary-surface);
  color: var(--mx-primary);
  font-size: var(--mx-text-sm);
  flex: 0 0 auto;
  transition: background var(--mx-transition), color var(--mx-transition);
}
.mx-filter-opt-text{
  font-size: var(--mx-text-sm);
  font-weight: 600;
  color: var(--mx-ink-soft);
  transition: color var(--mx-transition);
}
.mx-filter-opt:has(input:checked){
  background: var(--mx-primary-surface);
}
.mx-filter-opt:has(input:checked) .mx-filter-opt-icon{
  background: var(--mx-primary);
  color: var(--mx-white);
}
.mx-filter-opt:has(input:checked) .mx-filter-opt-text{ color: var(--mx-primary-darker); }
@media (max-width: 760px){
  .mx-filter-toggle{ display: inline-flex; }
}

/* ===== PHARMACY HERO TRUST BADGES ===== */
.mx-ph-hero-trust{
  display: flex;
  justify-content: center;
  gap: 32px;
  margin-top: 28px;
  flex-wrap: wrap;
}
.mx-ph-hero-trust-item{
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--mx-white-a60);
  font-family: var(--mx-font);
  font-size: 13px;
  font-weight: 500;
}
.mx-ph-hero-trust-item i{
  font-size: 16px;
  color: var(--mx-primary-light);
}

/* ===== PHARMACY CARD ENHANCEMENTS ===== */
.mx-phcard-header{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.mx-phcard-badge{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--mx-success-surface);
  color: var(--mx-success-dark);
  font-family: var(--mx-font);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: var(--mx-radius-pill);
  flex-shrink: 0;
}
.mx-phcard-badge i{ font-size: 10px; }
.mx-phcard-details{
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.mx-phcard-foot{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--mx-border);
}
.mx-phcard-foot-chip{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: var(--mx-radius-pill);
  background: var(--mx-primary-surface);
  color: var(--mx-primary-dark);
  font-family: var(--mx-font);
  font-size: 11px;
  font-weight: 600;
}
.mx-phcard-foot-chip i{
  font-size: 10px;
  color: var(--mx-primary);
}

/* ===== HOW IT WORKS SECTION ===== */
.mx-ph-how{
  background: var(--mx-surface-alt);
  padding: 64px 20px;
  margin-top: 48px;
}
.mx-ph-how-inner{
  max-width: 1140px;
  margin: 0 auto;
  text-align: center;
}
.mx-ph-how-title{
  font-family: var(--mx-font);
  font-size: 28px;
  font-weight: 700;
  color: var(--mx-ink);
  margin: 0 0 8px;
}
.mx-ph-how-sub{
  font-family: var(--mx-font);
  font-size: 15px;
  color: var(--mx-ink-soft);
  margin: 0 0 40px;
}
.mx-ph-how-eyebrow{
  display: inline-block;
  font-family: var(--mx-font);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--mx-primary-darker) 88%, var(--mx-ink) 12%);
  background: var(--mx-primary-surface);
  padding: 5px 12px;
  border-radius: var(--mx-radius-pill);
  margin-bottom: 14px;
}
.mx-ph-hero-glow{
  position: absolute;
  width: 480px; height: 480px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--mx-primary) 6%, var(--mx-surface-alt));
  pointer-events: none;
  z-index: 0;
  filter: blur(40px);
}
.mx-ph-hero-glow--1{ top: -180px; left: -100px; }
.mx-ph-hero-glow--2{ bottom: -160px; right: -120px; background: color-mix(in srgb, var(--mx-primary) 6%, var(--mx-surface-alt)); }
.mx-ph-aside-promo-btn{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mx-font);
  font-size: 13px;
  font-weight: 700;
  color: var(--mx-primary);
  text-decoration: none;
  padding: 8px 16px;
  border-radius: var(--mx-radius-pill);
  background: var(--mx-surface);
  border: 1.5px solid var(--mx-primary-glow);
  transition: all 0.2s;
}
.mx-ph-aside-promo-btn:hover{
  background: var(--mx-primary);
  color: var(--mx-white);
  gap: 10px;
}
.mx-ph-how-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.mx-ph-how-step{
  text-align: center;
}
.mx-ph-how-icon{
  width: 72px;
  height: 72px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--mx-primary-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: var(--mx-primary);
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.mx-ph-how-step:hover .mx-ph-how-icon{
  transform: scale(1.08);
  box-shadow: 0 4px 16px var(--mx-primary-glow);
}
.mx-ph-how-step h4{
  font-family: var(--mx-font);
  font-size: 16px;
  font-weight: 700;
  color: var(--mx-ink);
  margin: 0 0 6px;
}
.mx-ph-how-step p{
  font-family: var(--mx-font);
  font-size: 13px;
  color: var(--mx-ink-muted);
  line-height: 1.5;
  margin: 0;
}
@media (max-width: 768px){
  .mx-ph-how-grid{ grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .mx-ph-hero-trust{ gap: 16px; }
}
/* ============================================================
   HEALTH FEED — chip strip, sidebar, badge overlay, related
   ============================================================ */
.mx-feed-chipwrap {
  background: var(--mx-surface);
  border-bottom: 1px solid var(--mx-border);
  position: sticky;
  top: 60px;
  z-index: 50;
}
.mx-feed-chipstrip {
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--mx-border) transparent;
  -webkit-overflow-scrolling: touch;
}
.mx-feed-chipstrip::-webkit-scrollbar { height: 6px; }
.mx-feed-chipstrip::-webkit-scrollbar-track { background: transparent; }
.mx-feed-chipstrip::-webkit-scrollbar-thumb { background: var(--mx-border); border-radius: 3px; }
.mx-feed-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  font-family: var(--mx-font-sans);
  font-size: var(--mx-text-sm);
  font-weight: 600;
  color: var(--mx-ink-soft);
  background: var(--mx-surface-alt);
  border: 1px solid var(--mx-border);
  border-radius: var(--mx-radius-pill);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--mx-transition), color var(--mx-transition), border-color var(--mx-transition), transform var(--mx-transition);
}
.mx-feed-chip i { color: var(--mx-primary); font-size: 11px; }
.mx-feed-chip:hover {
  background: var(--mx-primary-surface);
  border-color: var(--mx-primary-glow);
  color: var(--mx-primary-darker);
}
.mx-feed-chip.is-active {
  background: var(--mx-primary-darker);
  border-color: var(--mx-primary-darker);
  color: var(--mx-surface);
  box-shadow: 0 4px 10px rgba(20,190,240,0.25);
}
.mx-feed-chip.is-active i { color: var(--mx-surface); }

.mx-feed-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 32px;
  align-items: start;
}
.mx-feed-sidebar { display: flex; flex-direction: column; gap: 20px; position: sticky; top: 130px; }
.mx-feed-side-card {
  background: var(--mx-surface);
  border: 1px solid var(--mx-border);
  border-radius: var(--mx-radius-lg);
  padding: 22px 22px 18px;
}
.mx-feed-side-card h3 {
  font-family: var(--mx-font-sans);
  font-size: 15px;
  font-weight: 700;
  color: var(--mx-ink);
  margin: 0 0 14px;
  display: flex; align-items: center; gap: 8px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--mx-border-light);
}
.mx-feed-side-card h3 i { color: var(--mx-primary); font-size: 13px; }
.mx-feed-mini {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 0;
  border-bottom: 1px solid var(--mx-border-light);
  text-decoration: none;
  transition: background var(--mx-transition);
}
.mx-feed-mini:last-child { border-bottom: none; padding-bottom: 4px; }
.mx-feed-mini:hover .mx-feed-mini-title { color: var(--mx-primary-darker); }
.mx-feed-mini-title {
  font-family: var(--mx-font-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--mx-ink);
  line-height: 1.4;
  transition: color var(--mx-transition);
}
.mx-feed-mini-meta {
  display: flex; gap: 12px;
  font-family: var(--mx-font-sans);
  font-size: 12px;
  color: var(--mx-ink-muted);
}
.mx-feed-mini-meta span { display: inline-flex; align-items: center; gap: 4px; }
.mx-feed-mini-meta i { color: var(--mx-primary); font-size: 11px; }

.mx-feed-side-promo {
  text-align: center;
  background: var(--mx-primary-surface);
  border-color: var(--mx-primary-glow);
}
.mx-feed-side-promo-ico {
  display: inline-flex;
  width: 52px; height: 52px;
  align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--mx-surface);
  color: var(--mx-primary);
  font-size: 22px;
  margin-bottom: 12px;
  border: 2px solid var(--mx-primary-glow);
}
.mx-feed-side-promo h3 {
  justify-content: center;
  border-bottom: none;
  padding-bottom: 0;
  font-size: 16px;
}
.mx-feed-side-promo p {
  font-family: var(--mx-font-sans);
  font-size: 13px;
  color: var(--mx-ink-soft);
  line-height: 1.5;
  margin: 6px 0 14px;
}
.mx-feed-side-promo-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: var(--mx-primary);
  color: var(--mx-surface);
  border-radius: var(--mx-radius-pill);
  text-decoration: none;
  font-family: var(--mx-font-sans);
  font-size: 13px;
  font-weight: 700;
  transition: background var(--mx-transition), transform var(--mx-transition), box-shadow var(--mx-transition);
}
.mx-feed-side-promo-btn:hover {
  background: var(--mx-primary-dark);
  box-shadow: 0 6px 14px rgba(20,190,240,0.30);
}
.mx-feed-side-promo-btn i { font-size: 11px; transition: transform var(--mx-transition); }
.mx-feed-side-promo-btn:hover i { transform: translateX(3px); }

/* Blog card image wrapper + badge overlay + author row */
.mx-blog-imgwrap {
  position: relative;
  width: 100%;
  height: 180px;
  overflow: hidden;
  background: var(--mx-border-light);
}
.mx-blog-imgwrap .mx-blog-img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.16,1,0.3,1);
}
.mx-blog-card:hover .mx-blog-imgwrap .mx-blog-img { transform: scale(1.06); }

.mx-feed-badge {
  position: absolute;
  top: 12px; left: 12px;
  background: var(--mx-surface);
  color: color-mix(in srgb, var(--mx-primary-darker) 88%, var(--mx-ink) 12%);
  font-family: var(--mx-font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: var(--mx-radius-pill);
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  z-index: 2;
}
.mx-feed-meta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--mx-font-sans);
  font-size: 12px;
  color: var(--mx-ink-muted);
}
.mx-feed-meta i { color: var(--mx-primary); font-size: 11px; }

.mx-blog-author {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--mx-border-light);
}
.mx-blog-author-name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mx-font-sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--mx-ink-soft);
}
.mx-blog-author-name i { color: var(--mx-primary); font-size: 11px; }

/* Single-article reading container */
.mxBlg-content {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 20px;
}
.mxBlg-excerpt {
  font-family: var(--mx-font-sans);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.7;
  color: var(--mx-ink-soft);
  margin: 0 0 32px;
  padding: 18px 22px;
  background: var(--mx-primary-surface);
  border-left: 4px solid var(--mx-primary);
  border-radius: var(--mx-radius);
}
.mxBlg-body {
  font-family: var(--mx-font-sans);
  font-size: 17px;
  line-height: 1.8;
  color: var(--mx-ink);
}

/* Related articles container + title */
.mxBlg-related {
  background: var(--mx-surface-alt);
  padding: 56px 0 72px;
  border-top: 1px solid var(--mx-border-light);
}
.mxBlg-related-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}
.mxBlg-related-title {
  font-family: var(--mx-font-sans);
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 800;
  color: var(--mx-ink);
  letter-spacing: -0.02em;
  margin: 0 0 28px;
  position: relative;
  padding-left: 16px;
}
.mxBlg-related-title::before {
  content: '';
  position: absolute;
  left: 0; top: 6px;
  width: 5px; height: calc(100% - 12px);
  background: var(--mx-primary);
  border-radius: 3px;
}

/* Article tag pills + action bar refinements */
.mxBlg-category {
  text-decoration: none;
  transition: background var(--mx-transition), color var(--mx-transition);
}
.mxBlg-category:hover {
  background: var(--mx-primary);
  color: var(--mx-surface);
}

/* Mobile responsive for chip strip and feed layout */
@media (max-width: 1024px) {
  .mx-feed-layout { grid-template-columns: 1fr 280px; gap: 24px; }
}
@media (max-width: 768px) {
  .mx-feed-chipwrap { top: 0; }
  .mx-feed-layout { grid-template-columns: 1fr; }
  .mx-feed-sidebar { position: static; }
  .mx-blog-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .mxBlg-head { padding: 36px 16px 24px; }
  .mxBlg-content { padding: 0 16px; }
  .mxBlg-related-inner { padding: 0 16px; }
}
@media (max-width: 520px) {
  .mx-blog-grid { grid-template-columns: 1fr; gap: 16px; }
  .mx-feed-chipstrip { padding: 12px 16px; }
}

/* ============================================================
   PREMIUM POLISH — Pharmacy + Labs hero, trust badges, cards
   (appended; uses var(--mx-*) tokens, Inter font)
   ============================================================ */

/* ===== Centered hero text + eyebrow ===== */
.mx-ph-top-text, .mx-lb-top-text {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 18px;
}
.mx-ph-top-eyebrow, .mx-lb-top-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  margin-bottom: 14px;
  background: var(--mx-primary-surface);
  color: color-mix(in srgb, var(--mx-primary-darker) 88%, var(--mx-ink) 12%);
  border-radius: var(--mx-radius-pill);
  font-family: var(--mx-font);
  font-size: var(--mx-text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.mx-ph-top-eyebrow i, .mx-lb-top-eyebrow i { font-size: 11px; }
.mx-ph-top-text h1, .mx-lb-top-text h1 {
  font-size: clamp(28px, 3.4vw, 38px) !important;
  margin: 0 0 8px !important;
}
.mx-ph-top-text p, .mx-lb-top-text p { font-size: 15px !important; }

/* ===== Centered search bar ===== */
#searchForm.mx-ph-top-bar, #searchForm.mx-lb-top-bar {
  max-width: 680px;
  margin: 0 auto;
}

/* ===== Trust badges row (pharmacy + labs) ===== */
.mx-ph-trust, .mx-lb-trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  max-width: 760px;
  margin: 22px auto 0;
}
.mx-ph-trust-item, .mx-lb-trust-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--mx-surface);
  border: 1px solid var(--mx-border);
  border-radius: var(--mx-radius-pill);
  box-shadow: var(--mx-shadow-xs);
  transition: border-color var(--mx-transition), box-shadow var(--mx-transition), transform var(--mx-transition);
}
.mx-ph-trust-item:hover, .mx-lb-trust-item:hover {
  border-color: var(--mx-primary-glow);
  box-shadow: var(--mx-shadow-sm);
}
.mx-ph-trust-ico, .mx-lb-trust-ico {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--mx-primary-surface);
  color: var(--mx-primary);
  font-size: 15px;
}
.mx-ph-trust-text, .mx-lb-trust-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.mx-ph-trust-text strong, .mx-lb-trust-text strong {
  font-family: var(--mx-font);
  font-size: var(--mx-text-sm);
  font-weight: 700;
  color: var(--mx-ink);
}
.mx-ph-trust-text span, .mx-lb-trust-text span {
  font-family: var(--mx-font);
  font-size: var(--mx-text-xs);
  color: var(--mx-ink-soft);
}

/* Reach Ads — sponsored doctor card */
.mx-dcard--sponsored {
  position: relative;
  border: 1px solid var(--mx-primary-glow);
  box-shadow: 0 0 0 1px rgba(44, 183, 223, 0.08), 0 8px 24px rgba(44, 183, 223, 0.12);
  background: var(--mx-primary-surface);
}

.mx-dcard--sponsored .mx-dcard-name {
  color: var(--mx-brand);
}

.mx-dcard-sponsored-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--mx-white);
  background: var(--mx-brand);
  border-radius: 999px;
  text-transform: uppercase;
  z-index: 2;
  box-shadow: 0 2px 8px rgba(44, 183, 223, 0.35);
}

.mx-dcard-sponsored-badge i {
  font-size: 10px;
}
/* ============================================================
   POLISH LAYER v2 - Practo-accurate visual refinements
   Additive only. No Blade/markup changes. Wins via cascade.
   ============================================================ */

/* ===== LAYOUT + TYPOGRAPHY TIGHTENING ===== */
.mx-doc-page {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Crisper results header */
.mx-doc-rhead {
  margin-bottom: 16px;
  padding-bottom: 18px;
}
.mx-doc-rhead-left h2 {
  font-weight: 800;
  letter-spacing: -0.025em;
}

/* ===== FILTER SIDEBAR POLISH ===== */
.mx-doc-aside {
  border-radius: 16px;
  padding: 20px 18px;
  box-shadow: 0 1px 3px rgba(15,23,42,0.04), 0 1px 2px rgba(15,23,42,0.03);
}

.mx-doc-aside-head {
  padding-bottom: 18px;
}
.mx-doc-aside-head h3 {
  font-size: var(--mx-text-base);
  letter-spacing: -0.01em;
}

/* Section dividers - lighter, more breathing room */
.mx-doc-filter {
  padding: 20px 0;
}
.mx-doc-filter:first-of-type { padding-top: 6px; }

/* Filter titles - refined caps */
.mx-doc-filter-title {
  letter-spacing: 0.08em;
  margin-bottom: 10px;
}

/* Filter options - better touch targets */
.mx-doc-filter-options {
  gap: 8px;
}
.mx-doc-filter-opt {
  padding: 2px 0;
  line-height: 1.35;
}
.mx-doc-filter-opt:hover { color: var(--mx-primary); }

/* Custom checkbox/radio polish */
.mx-doc-filter-opt input {
  width: 18px;
  height: 18px;
  border-width: 1.5px;
}
.mx-doc-filter-opt input[type="checkbox"]:checked::after {
  left: 5px;
  top: 1px;
}

/* Sort select in sidebar - crisper */
.mx-doc-sort-wrap select,
.mx-doc-sort-wrap-select {
  font-weight: 500;
}

/* Aside promo card - softer */
.mx-doc-aside-promo {
  margin-top: 22px;
  padding: 24px 20px;
  border-radius: 14px;
}

/* ===== DOCTOR CARD POLISH ===== */
.mx-doc-list {
  gap: 12px;
}

/* D3 fix (Batch B): unify .mx-dcard resting shadow to public-card spec
   (0 4px 34px rgba(206,206,206,.25)). Hover keeps a deeper layered shadow. */
.mx-dcard {
  padding: 16px 20px;
  border-radius: 14px;
  box-shadow: var(--mx-shadow-soft, 0 4px 34px rgba(206,206,206,.25));
}
.mx-dcard:hover {
  box-shadow: 0 8px 24px rgba(15,23,42,0.08), 0 2px 8px rgba(15,23,42,0.05);
  border-color: var(--mx-gray-200);
}
.mx-dcard::before {
  border-radius: 0 3px 3px 0;
}

/* Photo - slightly larger, crisp ring */
.mx-dcard-left {
  width: 96px;
  gap: 12px;
}
.mx-dcard-photo-wrap {
  width: 80px;
  height: 80px;
  border-width: 3px;
}

/* Name - refined weight */
.mx-dcard-name {
  font-weight: 700;
  letter-spacing: -0.015em;
}

/* Spec line */
.mx-dcard-spec {
  margin-bottom: 7px;
}

/* Experience line */
.mx-dcard-exp {
  margin-bottom: 4px;
}

/* Divider - lighter */
.mx-dcard-divider {
  margin: 12px 0;
}

/* Clinic/meta lines */
.mx-dcard-meta {
  line-height: 1.45;
}

/* Rating row */
.mx-dcard-rating-row {
  margin-top: 12px;
}

/* Actions column - cleaner separation */
.mx-dcard-actions {
  width: 180px;
  padding-left: 24px;
}

/* Fee block */
.mx-dcard-fee-big {
  font-size: 20px;
}

/* Book buttons - refined */
.mx-btn-book {
  border-radius: 10px;
  padding: 11px 14px;
}
.mx-btn-book--secondary {
  padding: 9.5px 14px;
}

/* Verified badge - refined */
.mx-dcard-verified {
  letter-spacing: 0.08em;
}

/* View profile link */
.mx-dcard-viewlink {
  letter-spacing: -0.005em;
}

/* ===== PHARMACY CARD POLISH ===== */
.mx-ph-grid {
  gap: 20px;
}

.mx-phcard {
  border-radius: 14px;
  transition: box-shadow 200ms ease, transform 200ms ease, border-color 200ms ease;
}
.mx-phcard:hover {
  box-shadow: 0 8px 24px rgba(15,23,42,0.08), 0 2px 8px rgba(15,23,42,0.05);
  border-color: var(--mx-gray-200);
}

.mx-phcard-img-wrap {
  height: 168px;
}
.mx-phcard-body {
  padding: 18px 18px 14px;
  gap: 6px;
}
.mx-phcard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 2px;
}
.mx-phcard-name {
  letter-spacing: -0.015em;
}
.mx-phcard-badge {
  flex-shrink: 0;
}
.mx-phcard-actions {
  padding: 0 18px 18px;
}
.mx-phcard-btn {
  border-radius: 10px;
  padding: 12px 16px;
  transition: background var(--mx-transition), box-shadow var(--mx-transition), transform var(--mx-transition);
}
.mx-phcard-btn:hover {
  box-shadow: 0 4px 12px rgba(20,190,240,0.30);
}

/* ===== PHARMACY FOOT CHIPS ===== */
.mx-phcard-foot {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px dashed var(--mx-border);
}
.mx-phcard-foot-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: var(--mx-radius-pill);
  background: var(--mx-primary-surface);
  color: var(--mx-primary-dark);
  font-family: var(--mx-font);
  font-size: 11px;
  font-weight: 600;
}
.mx-phcard-foot-chip i {
  font-size: 10px;
  color: var(--mx-primary);
}

/* ===== LAB CARD POLISH ===== */
/* D3 fix (Batch B): .mx-lbcard resting shadow → public-card spec. */
.mx-lbcard {
  padding: 22px;
  border-radius: 14px;
  box-shadow: var(--mx-shadow-soft, 0 4px 34px rgba(206,206,206,.25));
}
.mx-lbcard:hover {
  box-shadow: 0 8px 24px rgba(15,23,42,0.08), 0 2px 8px rgba(15,23,42,0.05);
}

.mx-lbcard-photo {
  border-radius: 12px;
}
.mx-lbcard-name {
  font-weight: 700;
  letter-spacing: -0.015em;
}
.mx-lbcard-name:hover {
  color: var(--mx-primary);
}

/* Lab actions */
.mx-lbcard-actions {
  flex: 0 0 auto;
  align-self: center;
}
.mx-lbcard-actions .mx-btn-book {
  border-radius: 10px;
}

/* ===== PHARMACY TOP HERO POLISH ===== */
.mx-ph-top-text h1,
.mx-lb-top-text h1 {
  letter-spacing: -0.03em;
}

.mx-ph-top-eyebrow,
.mx-lb-top-eyebrow {
  letter-spacing: 0.08em;
}

/* Search bar - refined focus */
#searchForm.mx-ph-top-bar:focus-within,
#searchForm.mx-lb-top-bar:focus-within {
  box-shadow: 0 0 0 4px var(--mx-primary-glow), 0 8px 24px rgba(15,23,42,0.08);
}

/* ===== PHARMACY FILTER ASIDE POLISH ===== */
.mx-ph-aside-card {
  border-radius: 14px;
}
.mx-filter-sect {
  padding: 16px 0;
  border-bottom: 1px solid var(--mx-border-light);
}
.mx-filter-sect:last-of-type { border-bottom: none; }
.mx-filter-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--mx-ink);
  margin: 0 0 14px;
}
.mx-filter-opt {
  padding: 3px 0;
}

/* ===== EMPTY STATES POLISH ===== */
.mx-doc-empty,
.mx-ph-empty,
.mx-lb-empty {
  padding: 72px 20px;
  text-align: center;
}
.mx-doc-empty i,
.mx-ph-empty i,
.mx-lb-empty i {
  font-size: 52px;
  color: var(--mx-gray-200);
  margin-bottom: 16px;
  display: block;
}
.mx-doc-empty p,
.mx-ph-empty p,
.mx-lb-empty p {
  font-family: var(--mx-font);
  font-size: var(--mx-text-lg);
  color: var(--mx-ink-muted);
  margin: 0;
}

/* ===== VIEW MORE BUTTON POLISH ===== */
.mx-doc-more,
.mx-ph-more {
  margin-top: 36px;
}
.mx-doc-more button,
.mx-ph-more button {
  border-radius: 10px;
  padding: 12px 36px;
  font-weight: 600;
  transition: background var(--mx-transition), color var(--mx-transition), box-shadow var(--mx-transition), transform var(--mx-transition);
}
.mx-doc-more button:hover,
.mx-ph-more button:hover {
  box-shadow: 0 4px 12px rgba(20,190,240,0.25);
}

/* ===== HOW IT WORKS + PACKAGES POLISH ===== */
.mx-ph-how-grid {
  gap: 24px;
}
.mx-ph-how-step {
  padding: 28px 20px;
  border-radius: 14px;
  background: var(--mx-surface);
  border: 1px solid var(--mx-border-light);
  transition: box-shadow 200ms ease, transform 200ms ease;
}
.mx-ph-how-step:hover {
  box-shadow: 0 8px 24px rgba(15,23,42,0.06);
}

.mx-lb-pkg {
  padding: 24px 20px;
  border-radius: 14px;
  transition: box-shadow 200ms ease, transform 200ms ease;
}
.mx-lb-pkg:hover {
  box-shadow: 0 12px 28px rgba(15,23,42,0.10);
}

/* ===== POLISH LAYER END ===== */

/* ============================================================
   LISTING REFINEMENT LAYER
   Flattens heavy shadows, removes hover lifts, clean Practo look.
   Additive only. No markup changes.
   ============================================================ */

/* ===== DOCTOR CARDS ===== */

/* Flatten the card: flat shadow, light border, no transform */
.mx-dcard {
  box-shadow: var(--mx-shadow-sm);
  transform: none;
}
.mx-dcard:hover {
  box-shadow: var(--mx-shadow-md);
  border-color: var(--mx-gray-200);
  transform: none;
}
/* Remove the animated accent bar */
.mx-dcard::before { display: none; }
.mx-dcard:hover::before { display: none; }

/* Sponsored card - flat accent, no glow */
.mx-dcard--sponsored {
  background: var(--mx-surface);
}

/* ===== PHARMACY CARDS ===== */
.mx-phcard {
  box-shadow: var(--mx-shadow-sm);
  transform: none;
  transition: box-shadow var(--mx-transition), border-color var(--mx-transition);
}
.mx-phcard:hover {
  box-shadow: var(--mx-shadow-md);
  border-color: var(--mx-gray-200);
  transform: none;
}

/* ===== LAB CARDS ===== */
.mx-lbcard {
  box-shadow: var(--mx-shadow-sm);
  transform: none;
  transition: box-shadow var(--mx-transition), border-color var(--mx-transition);
}
.mx-lbcard:hover {
  box-shadow: var(--mx-shadow-md);
  border-color: var(--mx-gray-200);
  transform: none;
}

/* ===== HOW-IT-WORKS STEPS (Pharmacy) ===== */
.mx-ph-how-step {
  box-shadow: var(--mx-shadow-xs);
  transform: none;
}
.mx-ph-how-step:hover {
  box-shadow: var(--mx-shadow-sm);
  transform: none;
}

/* ===== LAB PACKAGES ===== */
.mx-lb-pkg {
  box-shadow: var(--mx-shadow-xs);
  transform: none;
}
.mx-lb-pkg:hover {
  box-shadow: var(--mx-shadow-sm);
  transform: none;
}

/* ===== BOOK BUTTONS - flatten gradients ===== */
.mx-btn-book {
  background: var(--mx-primary-darker);
  transform: none;
}
.mx-btn-book:hover {
  background: color-mix(in srgb, var(--mx-primary-darker) 85%, var(--mx-ink) 15%);
  box-shadow: var(--mx-shadow-primary);
  transform: none;
}
.mx-btn-book--primary {
  background: var(--mx-primary-darker);
}
.mx-btn-book--secondary:hover {
  box-shadow: none;
  transform: none;
}

/* ===== FILTER SIDEBAR - flatten ===== */
.mx-doc-aside {
  box-shadow: var(--mx-shadow-xs);
}
.mx-ph-aside-card {
  box-shadow: var(--mx-shadow-xs);
}

/* ===== CARD-INTERNAL BUTTONS - flatten transforms ===== */
.mx-phcard-btn:hover {
  transform: none;
  box-shadow: var(--mx-shadow-primary);
}
.mx-ph-hero-btn:hover {
  transform: none;
}
.mx-ph-aside-promo-btn:hover {
  gap: 6px;
}

/* ===== SEO CHIPS AND CARDS - flatten ===== */
.mx-seo-chip:hover { transform: none; }
.mx-seo-card:hover { transform: none; }

/* ===== LISTING REFINEMENT END ===== */
/* mx card polish v3 - pharmacy + lab refinement */

/* PHARMACY CARD - premium elevation */
.mx-phcard {
  border-radius: var(--mx-radius-lg);
  box-shadow: var(--mx-shadow-sm);
  transition: transform var(--mx-transition), box-shadow var(--mx-transition), border-color var(--mx-transition);
}
.mx-phcard:hover {
  box-shadow: var(--mx-shadow-lg);
  border-color: var(--mx-primary);
}
.mx-phcard-img-wrap {
  position: relative;
  overflow: hidden;
}
.mx-phcard-photo {
  transition: transform var(--mx-transition-slow);
}
.mx-phcard:hover .mx-phcard-photo {
  transform: scale(1.05);
}
.mx-phcard-pill {
  position: absolute;
  top: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(8px);
  color: var(--mx-primary-dark);
  font-size: var(--mx-text-xs);
  font-weight: 700;
  padding: 6px 12px;
  border-radius: var(--mx-radius-pill);
  box-shadow: var(--mx-shadow-sm);
}
.mx-phcard-body {
  padding: 18px 20px 16px;
}
.mx-phcard-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
}
.mx-phcard-name {
  font-family: var(--mx-font);
  font-size: var(--mx-text-lg);
  font-weight: 700;
  color: var(--mx-ink);
  text-decoration: none;
  letter-spacing: -0.01em;
  line-height: 1.3;
  flex: 1;
}
.mx-phcard-name:hover { color: var(--mx-primary-dark); text-decoration: none; }
.mx-phcard-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--mx-success-surface);
  color: var(--mx-success-dark);
  font-size: var(--mx-text-xs);
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--mx-radius-pill);
  white-space: nowrap;
}
.mx-phcard-details {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}
.mx-phcard-meta {
  font-family: var(--mx-font);
  font-size: var(--mx-text-sm);
  color: var(--mx-ink-soft);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.mx-phcard-meta i { color: var(--mx-ink-muted); width: 14px; text-align: center; }
.mx-phcard-loc {
  font-family: var(--mx-font);
  font-size: var(--mx-text-sm);
  color: var(--mx-ink-muted);
  margin: 0 0 12px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  line-height: 1.4;
}
.mx-phcard-loc i { color: var(--mx-primary); margin-top: 2px; }
.mx-phcard-foot {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 12px;
  border-top: 1px solid var(--mx-border-light);
}
.mx-phcard-foot-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--mx-primary-surface);
  color: var(--mx-primary-dark);
  font-size: var(--mx-text-xs);
  font-weight: 600;
  padding: 5px 10px;
  border-radius: var(--mx-radius-pill);
}
.mx-phcard-foot-chip i { font-size: 10px; }
.mx-phcard-actions { padding: 0 20px 20px; }
.mx-phcard-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  background: var(--mx-primary);
  color: var(--mx-white);
  font-family: var(--mx-font);
  font-size: var(--mx-text-sm);
  font-weight: 700;
  padding: 12px;
  border-radius: var(--mx-radius);
  text-decoration: none;
  transition: background var(--mx-transition), box-shadow var(--mx-transition);
}
.mx-phcard-btn:hover {
  background: var(--mx-primary-dark);
  color: var(--mx-white);
  text-decoration: none;
  box-shadow: var(--mx-shadow-primary);
}

/* LAB CARD - premium refinement */
.mx-lbcard {
  border-radius: var(--mx-radius-lg);
  box-shadow: var(--mx-shadow-sm);
  border: 1px solid var(--mx-border-light);
  transition: transform var(--mx-transition), box-shadow var(--mx-transition), border-color var(--mx-transition);
  padding: 20px;
}
.mx-lbcard:hover {
  box-shadow: var(--mx-shadow-lg);
  border-color: var(--mx-primary);
}
.mx-lbcard-photo-wrap {
  position: relative;
  flex: 0 0 88px;
}
.mx-lbcard-photo {
  width: 88px;
  height: 88px;
  border-radius: var(--mx-radius);
  object-fit: cover;
  box-shadow: var(--mx-shadow-sm);
}
.mx-lbcard-tag {
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--mx-primary);
  color: var(--mx-white);
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: var(--mx-radius-pill);
  white-space: nowrap;
  box-shadow: var(--mx-shadow-sm);
}
.mx-lbcard-body { padding-left: 4px; }
.mx-lbcard-name {
  font-family: var(--mx-font);
  font-size: var(--mx-text-lg);
  font-weight: 700;
  color: var(--mx-ink);
  text-decoration: none;
  letter-spacing: -0.01em;
  line-height: 1.3;
  display: block;
  margin-bottom: 6px;
}
.mx-lbcard-name:hover { color: var(--mx-primary-dark); text-decoration: none; }
.mx-lbcard-meta {
  font-family: var(--mx-font);
  font-size: var(--mx-text-sm);
  color: var(--mx-ink-soft);
  margin: 0 0 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.mx-lbcard-meta i { color: var(--mx-ink-muted); }
.mx-lbcard-loc {
  font-family: var(--mx-font);
  font-size: var(--mx-text-sm);
  color: var(--mx-ink-muted);
  margin: 0 0 6px;
  display: flex;
  align-items: flex-start;
  gap: 6px;
  line-height: 1.4;
}
.mx-lbcard-loc i { color: var(--mx-primary); margin-top: 2px; }
.mx-lbcard-foot {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 10px 0;
}
.mx-lbcard-foot-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--mx-primary-surface);
  color: var(--mx-primary-dark);
  font-family: var(--mx-font);
  font-size: var(--mx-text-xs);
  font-weight: 600;
  padding: 5px 10px;
  border-radius: var(--mx-radius-pill);
}
.mx-lbcard-foot-chip i { font-size: 10px; }
.mx-lbcard-price-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--mx-border-light);
}
.mx-lbcard-price {
  font-family: var(--mx-font);
  font-size: var(--mx-text-xl);
  font-weight: 800;
  color: var(--mx-ink);
  letter-spacing: -0.01em;
}
.mx-lbcard-mrp {
  font-family: var(--mx-font);
  font-size: var(--mx-text-sm);
  color: var(--mx-ink-muted);
  text-decoration: line-through;
}
.mx-lbcard-off {
  font-family: var(--mx-font);
  font-size: var(--mx-text-xs);
  font-weight: 700;
  color: var(--mx-danger);
  background: var(--mx-danger-surface);
  padding: 3px 8px;
  border-radius: var(--mx-radius-pill);
}
.mx-lbcard-actions {
  flex: 0 0 auto;
  align-self: center;
}
.mx-btn-book {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--mx-primary);
  color: var(--mx-white);
  font-family: var(--mx-font);
  font-size: var(--mx-text-sm);
  font-weight: 700;
  padding: 12px 28px;
  border-radius: var(--mx-radius);
  text-decoration: none;
  transition: background var(--mx-transition), box-shadow var(--mx-transition), transform var(--mx-transition);
}
.mx-btn-book--primary:hover {
  background: var(--mx-primary-dark);
  color: var(--mx-white);
  text-decoration: none;
  box-shadow: var(--mx-shadow-primary);
}
.mx-btn-book:active { transform: translateY(0) scale(0.97); }
@media (max-width: 640px) {
  .mx-lbcard-actions { flex: 1 1 100%; }
  .mx-btn-book { width: 100%; }
}
/* ============================================================
   HEALTH FEED PAGE POLISH (mxhf-*)
   ============================================================ */
.mxhf-hero{background:var(--mx-primary);padding:64px 20px 56px;text-align:center;color:var(--mx-white);position:relative;overflow:hidden;box-shadow:var(--mx-shadow-cta)}
.mxhf-hero:before{content:"";position:absolute;inset:0;background:transparent;pointer-events:none}
.mxhf-hero-inner{max-width:720px;margin:0 auto;position:relative;z-index:1}
.mxhf-eyebrow{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,0.16);color:var(--mx-white);font-size:12px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;padding:6px 14px;border-radius:100px;margin-bottom:18px;backdrop-filter:blur(4px)}
.mxhf-eyebrow i{font-size:11px}
.mxhf-hero h1{font-family:Outfit,sans-serif;font-size:clamp(32px,4vw,46px);font-weight:800;margin:0 0 12px;letter-spacing:-0.02em;line-height:1.1}
.mxhf-hero p{font-size:17px;line-height:1.5;margin:0 0 28px;opacity:0.92}
.mxhf-search{display:flex;align-items:center;gap:0;background:var(--mx-white);border-radius:100px;padding:6px 6px 6px 22px;box-shadow:0 12px 40px rgba(0,0,0,0.18);max-width:580px;margin:0 auto}
.mxhf-search-ico{color:var(--mx-ink-muted);font-size:16px}
.mxhf-search-input{flex:1;border:none;outline:none;font-size:15px;padding:14px 12px;background:transparent;font-family:Outfit,sans-serif;color:var(--mx-ink)}
.mxhf-search-input::placeholder{color:var(--mx-ink-muted)}
.mxhf-search-btn{border:none;background:var(--mx-primary);color:var(--mx-white);font-family:Outfit,sans-serif;font-size:14px;font-weight:700;padding:12px 26px;border-radius:100px;cursor:pointer;transition:background 0.2s,transform 0.15s}
.mxhf-search-btn:hover{background:var(--mx-primary-darker);}

/* Featured hero article card */
.mxhf-feature{display:grid;grid-template-columns:340px 1fr;background:var(--mx-white);border:1px solid var(--mx-border);border-radius:16px;overflow:hidden;text-decoration:none;margin-bottom:32px;transition:box-shadow 0.25s,transform 0.25s}
.mxhf-feature:hover{box-shadow:0 14px 40px rgba(20,190,240,0.14);border-color:var(--mx-primary-light)}
.mxhf-feature-media{position:relative;height:100%;min-height:240px;overflow:hidden;background:var(--mx-surface-alt)}
.mxhf-feature-media img{width:100%;height:100%;object-fit:cover;transition:transform 0.5s cubic-bezier(0.16,1,0.3,1)}
.mxhf-feature:hover .mxhf-feature-media img{transform:scale(1.04)}
.mxhf-feature-badge{position:absolute;top:14px;left:14px;background:rgba(255,255,255,0.95);color:color-mix(in srgb, var(--mx-primary-darker) 88%, var(--mx-ink) 12%);font-size:11px;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;padding:5px 12px;border-radius:100px;box-shadow:0 2px 8px rgba(0,0,0,0.12)}
.mxhf-feature-body{padding:28px 30px;display:flex;flex-direction:column;justify-content:center}
.mxhf-feature-label{display:inline-flex;align-items:center;gap:6px;color:color-mix(in srgb, var(--mx-warning-dark) 70%, var(--mx-ink) 30%);font-size:12px;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;margin-bottom:10px}
.mxhf-feature-label i{font-size:11px}
.mxhf-feature-body h2{font-family:Outfit,sans-serif;font-size:clamp(22px,2.2vw,28px);font-weight:800;color:var(--mx-ink);margin:0 0 10px;line-height:1.25;letter-spacing:-0.01em}
.mxhf-feature-body p{font-size:15px;line-height:1.6;color:var(--mx-ink-soft);margin:0 0 18px}
.mxhf-feature-foot{display:flex;align-items:center;gap:18px;padding-top:14px;border-top:1px solid var(--mx-surface-alt)}
.mxhf-author{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--mx-ink-soft)}
.mxhf-author i{color:var(--mx-primary);font-size:12px}
.mxhf-foot-meta{display:inline-flex;align-items:center;gap:5px;font-size:13px;color:var(--mx-ink-muted)}
.mxhf-foot-meta i{color:var(--mx-primary);font-size:12px}

/* Grid section header */
.mxhf-grid-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:20px}
.mxhf-grid-head h3{font-family:Outfit,sans-serif;font-size:20px;font-weight:800;color:var(--mx-ink);margin:0;letter-spacing:-0.01em}
.mxhf-grid-head span{font-size:13px;color:var(--mx-ink-soft);font-weight:500}

/* Blog grid refinement */
.mxhf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:22px}
.mxhf-grid .mx-blog-card{border-radius:12px;border:1px solid var(--mx-border);overflow:hidden}
.mxhf-grid .mx-blog-card:hover{box-shadow:0 10px 30px rgba(20,190,240,0.12);border-color:var(--mx-primary-light)}
.mxhf-grid .mx-blog-imgwrap{height:170px}
.mxhf-grid .mx-blog-body{padding:16px 18px 18px}
.mxhf-grid .mx-blog-title{font-size:15px;font-weight:700;margin-bottom:6px;line-height:1.35}
.mxhf-grid .mx-blog-excerpt{font-size:13px;line-height:1.5}

/* Newsletter sidebar card */
.mxhf-newsletter{text-align:center;background:var(--mx-warning-surface);border-color:var(--mx-warning-surface)}
.mxhf-newsletter-ico{display:inline-flex;width:48px;height:48px;align-items:center;justify-content:center;border-radius:50%;background:var(--mx-white);color:var(--mx-warning);font-size:20px;margin-bottom:10px;border:2px solid var(--mx-warning-surface)}
.mxhf-newsletter h3{justify-content:center;border-bottom:none;padding-bottom:0;font-size:15px;color:var(--mx-warning-dark)}
.mxhf-newsletter p{font-size:13px;color:var(--mx-ink-muted);line-height:1.5;margin:6px 0 14px}
.mxhf-newsletter-btn{display:inline-flex;align-items:center;gap:6px;padding:10px 22px;background:var(--mx-primary-darker);color:var(--mx-white);border-radius:100px;text-decoration:none;font-family:Outfit,sans-serif;font-size:13px;font-weight:700;transition:background 0.2s,transform 0.15s}
.mxhf-newsletter-btn:hover{background:color-mix(in srgb, var(--mx-primary-darker) 85%, var(--mx-ink) 15%);}

/* Responsive */
@media (max-width:768px){
  .mxhf-hero{padding:44px 16px 36px}
  .mxhf-hero h1{font-size:28px}
  .mxhf-hero p{font-size:15px}
  .mxhf-search{flex-direction:row;max-width:100%;padding:5px}
  .mxhf-feature{grid-template-columns:1fr}
  .mxhf-feature-media{min-height:180px}
  .mxhf-feature-body{padding:20px}
  .mxhf-feature-body h2{font-size:20px}
  .mxhf-grid{grid-template-columns:1fr;gap:16px}
  .mxhf-grid-head h3{font-size:18px}
}

/* ============================================================
   DOCCURE ROW TREATMENT (replaces old flat-list lock)
   Doctor listings stay row-based (1px dividers) but gain the
   Doccure hover lift + 12px radius per /tmp/mxdesign/71 spec.
   ============================================================ */
.mx-doc-list .mx-dcard,
.mx-dcard {
  background: var(--mx-surface) !important;
  border: none !important;
  border-bottom: 1px solid var(--mx-border) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  padding: 20px !important;
  margin-bottom: 10px !important;
  transform: none !important;
  transition: transform 250ms ease, box-shadow 250ms ease, border-color 250ms ease !important;
}
.mx-dcard:hover {
  background: var(--mx-surface) !important;
  box-shadow: 0 8px 22px rgba(15,23,42,0.09), 0 16px 40px rgba(15,23,42,0.06) !important;
  border-color: var(--mx-border) !important;
  transform: translateY(-3px) !important;
}
.mx-dcard:last-child {
  border-bottom: 1px solid var(--mx-border) !important;
}

/* ============================================================
   POLISH LAYER v3 — About & Specialities (brand: #199FD9)
   Appended to listing_mx.css. Flat, no gradients, no shadows.
   ============================================================ */

/* ---- ABOUT/CONTACT: compact solid-primary page-header bar ---- */
.mxStatic-hero {
  background: var(--mx-primary) !important;
  color: var(--mx-white) !important;
  padding: 28px 20px 32px !important;
  border-bottom: 1px solid color-mix(in srgb, var(--mx-primary-dark) 60%, var(--mx-ink) 40%);
}
.mxStatic-hero::before { display: none !important; }
.mxStatic-orb { display: none !important; }
.mxStatic-eyebrow {
  background: rgba(255,255,255,0.18);
  color: var(--mx-white);
  border: 1px solid rgba(255,255,255,0.28);
}
.mxStatic-hero h1 {
  color: var(--mx-white);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0 0 6px;
  background: none;
  -webkit-text-fill-color: var(--mx-white);
}
.mxStatic-hero p {
  color: rgba(255,255,255,0.92);
  font-size: 13px;
  margin: 0 0 14px;
}

/* ---- ABOUT: hero buttons (flat) ---- */
.mxStatic-hero-cta .mxHome-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px; border-radius: var(--mx-radius-pill);
  font-family: var(--mx-font-sans); font-weight: 600; font-size: 14px;
  text-decoration: none; border: 1px solid transparent;
  transition: background var(--mx-transition), color var(--mx-transition), border-color var(--mx-transition);
}
.mxStatic-hero-cta .mxHome-btn-primary {
  background: var(--mx-white);
  color: var(--mx-primary-darker);
  border-color: var(--mx-white);
  box-shadow: 0 4px 14px rgba(0,0,0,0.12);
}
.mxStatic-hero-cta .mxHome-btn-primary:hover {
  background: var(--mx-surface-alt);
  border-color: var(--mx-surface-alt);
}
.mxStatic-hero-cta .mxHome-btn-ghost {
  background: var(--mx-white);
  color: var(--mx-primary-darker);
  border-color: var(--mx-border);
}
.mxStatic-hero-cta .mxHome-btn-ghost:hover {
  background: var(--mx-surface-alt);
  border-color: var(--mx-gray-300);
}

/* ---- ABOUT: body section spacing ---- */
.mxStatic-body { padding: 60px 0 80px !important; }
.mxStatic-card {
  background: var(--mx-white) !important;
  border: 1px solid var(--mx-border) !important;
  border-radius: var(--mx-radius-lg) !important;
  box-shadow: none !important;
  padding: 36px 40px !important;
  margin: 0 0 60px !important;
}
.mxStatic-card:last-of-type { margin-bottom: 0; }
.mxStatic-card h2 {
  font-family: var(--mx-font-sans);
  font-size: var(--mx-text-2xl);
  font-weight: 700;
  color: var(--mx-ink);
  margin: 0 0 16px;
  letter-spacing: -0.01em;
}
.mxStatic-card p {
  font-family: var(--mx-font-sans);
  font-size: var(--mx-text-base);
  color: var(--mx-ink-soft);
  line-height: 1.7;
  margin: 0 0 14px;
}
.mxStatic-card p:last-child { margin-bottom: 0; }

/* ---- ABOUT: stats strip (flat) ---- */
.mxStatic-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 0 0 60px !important;
}
.mxStatic-stat {
  background: var(--mx-white) !important;
  border: 1px solid var(--mx-border) !important;
  border-radius: var(--mx-radius-lg) !important;
  padding: 28px 16px !important;
  text-align: center;
  box-shadow: none !important;
  transition: none;
}
.mxStatic-stat:hover { transform: none !important; }
.mxStatic-stat strong {
  display: block;
  font-family: var(--mx-font-sans);
  font-size: var(--mx-text-3xl);
  font-weight: 700;
  color: var(--mx-primary);
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}
.mxStatic-stat span {
  font-family: var(--mx-font-sans);
  font-size: var(--mx-text-sm);
  color: var(--mx-ink-muted);
  font-weight: 500;
}

/* ---- ABOUT: why grid (flat cards, brand-tinted icons) ---- */
.mxStatic-why-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin: 0 0 60px !important;
}
.mxStatic-why-card {
  background: var(--mx-white) !important;
  border: 1px solid var(--mx-border) !important;
  border-radius: var(--mx-radius-lg) !important;
  padding: 32px 28px !important;
  box-shadow: none !important;
  transition: border-color var(--mx-transition);
}
.mxStatic-why-card:hover {
  transform: none !important;
  box-shadow: none !important;
  border-color: var(--mx-primary) !important;
}
.mxStatic-why-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  border-radius: var(--mx-radius-lg);
  background: var(--mx-primary-surface);
  color: var(--mx-primary) !important;
  font-size: 20px;
  margin-bottom: 18px;
  box-shadow: none !important;
}
.mxStatic-why-card h3 {
  font-family: var(--mx-font-sans);
  font-size: var(--mx-text-lg);
  font-weight: 700;
  color: var(--mx-ink);
  margin: 0 0 8px;
}
.mxStatic-why-card p {
  font-family: var(--mx-font-sans);
  font-size: var(--mx-text-base);
  color: var(--mx-ink-muted);
  line-height: 1.65;
  margin: 0;
}

@media (max-width: 900px) {
  .mxStatic-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mxStatic-why-grid { grid-template-columns: 1fr; }
  .mxStatic-card { padding: 28px 24px !important; }
}

/* ---- ABOUT: footer CTA (flat brand band, no gradient) ---- */
.mxStatic-cta {
  background: var(--mx-primary-surface) !important;
  border: 1px solid var(--mx-primary-glow);
  border-radius: var(--mx-radius-xl) !important;
  padding: 48px 32px !important;
  text-align: center;
  color: var(--mx-ink) !important;
  margin: 0 !important;
  box-shadow: none !important;
}
.mxStatic-cta h2 {
  font-family: var(--mx-font-sans);
  font-size: var(--mx-text-3xl);
  font-weight: 700;
  color: var(--mx-ink);
  margin: 0 0 12px;
  letter-spacing: -0.02em;
  background: none;
  -webkit-text-fill-color: var(--mx-ink);
}
.mxStatic-cta p {
  font-family: var(--mx-font-sans);
  font-size: var(--mx-text-lg);
  color: var(--mx-ink-soft);
  max-width: 560px;
  margin: 0 auto 24px;
  line-height: 1.6;
  opacity: 1;
}
.mxStatic-cta-actions .mxHome-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 24px;
  border-radius: var(--mx-radius-pill);
  font-family: var(--mx-font-sans); font-weight: 600; font-size: 14px;
  text-decoration: none; border: 1px solid transparent;
  transition: background var(--mx-transition), color var(--mx-transition), border-color var(--mx-transition);
}
.mxStatic-cta-actions .mxHome-btn-primary {
  background: var(--mx-primary);
  color: var(--mx-white);
  border-color: var(--mx-primary);
}
.mxStatic-cta-actions .mxHome-btn-primary:hover { background: var(--mx-primary-dark); border-color: var(--mx-primary-dark); }
.mxStatic-cta-actions .mxHome-btn-ghost {
  background: var(--mx-white);
  color: var(--mx-primary-darker);
  border-color: var(--mx-border);
}
.mxStatic-cta-actions .mxHome-btn-ghost:hover { background: var(--mx-surface-alt); }

/* ============================================================
   SPECIALITIES — flat grid, 1px borders, no shadows
   ============================================================ */
.mx-spec-top {
  background: var(--mx-primary);
  border-bottom: 1px solid color-mix(in srgb, var(--mx-primary-dark) 60%, var(--mx-ink) 40%);
  padding: 28px 0 32px;
}
.mx-spec-top-title {
  font-family: var(--mx-font-sans);
  font-size: 24px;
  font-weight: 700;
  color: var(--mx-white);
  letter-spacing: -0.02em;
  margin: 0 0 10px;
}
.mx-spec-top-sub {
  font-family: var(--mx-font-sans);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.92);
  max-width: 640px;
  margin: 0;
  line-height: 1.5;
}
.mx-spec-list { padding-top: 60px; padding-bottom: 80px; }

/* Grid + flat tiles */
.mx-spec-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}
.mx-spec-card {
  background: var(--mx-white) !important;
  border: 1px solid var(--mx-border) !important;
  border-radius: var(--mx-radius-lg) !important;
  padding: 28px 20px 22px !important;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: border-color var(--mx-transition);
  cursor: pointer;
  text-decoration: none;
  display: block;
  color: inherit;
  box-shadow: none !important;
  transform: none !important;
  animation: none !important;
}
.mx-spec-card::before { display: none !important; }
.mx-spec-card:hover {
  border-color: var(--mx-primary) !important;
  box-shadow: none !important;
  transform: none !important;
}
.mx-spec-icon-ring {
  width: 72px; height: 72px; margin: 0 auto 14px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--mx-surface-alt);
  border: 1px solid var(--mx-border);
  transition: none;
}
.mx-spec-card:hover .mx-spec-icon-ring {
  transform: none;
  border-color: var(--mx-border);
}
.mx-spec-icon-ring img {
  width: 40px; height: 40px; object-fit: contain;
}
.mx-spec-name {
  font-family: var(--mx-font-sans);
  font-weight: 700; font-size: var(--mx-text-lg);
  color: var(--mx-ink);
  margin: 0 0 6px;
  transition: color var(--mx-transition);
}
.mx-spec-card:hover .mx-spec-name { color: var(--mx-ink); }
.mx-spec-count {
  font-family: var(--mx-font-sans);
  font-size: var(--mx-text-sm);
  color: var(--mx-ink-muted);
  margin: 0 0 16px;
}
.mx-spec-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mx-font-sans);
  font-size: var(--mx-text-sm);
  font-weight: 600;
  color: color-mix(in srgb, var(--mx-primary-darker) 88%, var(--mx-ink) 12%);
  text-decoration: none;
  padding: 7px 16px;
  border-radius: var(--mx-radius-pill);
  border: 1px solid var(--mx-border);
  background: var(--mx-white);
  transition: background var(--mx-transition), border-color var(--mx-transition);
  cursor: pointer;
}
.mx-spec-btn:hover {
  background: var(--mx-surface-alt);
  border-color: var(--mx-gray-300);
  gap: 6px;
}
.mx-spec-btn:hover i { transform: none; }
.mx-spec-btn i { transition: none; }

/* Flat load-more + empty state */
.mx-spec-more { text-align: center; margin-top: 48px; }
.mx-spec-more-btn {
  display: inline-block;
  padding: 13px 34px;
  font-family: var(--mx-font-sans);
  font-size: var(--mx-text-base);
  font-weight: 600;
  color: var(--mx-primary-darker);
  background: var(--mx-white);
  border: 1px solid var(--mx-border);
  border-radius: var(--mx-radius-pill);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--mx-transition), border-color var(--mx-transition);
}
.mx-spec-more-btn:hover {
  background: var(--mx-surface-alt);
  border-color: var(--mx-gray-300);
}
.mx-spec-more-arrow { margin-left: 8px; }
.mx-spec-empty {
  text-align: center;
  padding: 80px 20px;
  color: var(--mx-ink-muted);
  font-family: var(--mx-font-sans);
  font-size: var(--mx-text-lg);
}
.mx-spec-empty-ico {
  display: block;
  font-size: 48px;
  color: var(--mx-gray-300);
  margin-bottom: 16px;
}

@media (max-width: 720px) {
  .mx-spec-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .mx-spec-top { padding: 36px 0 28px; }
  .mx-spec-top-title { font-size: var(--mx-text-2xl); }
  .mx-spec-top-sub { font-size: var(--mx-text-base); }
}
@media (max-width: 440px) {
  .mx-spec-grid { grid-template-columns: 1fr; }
}

/* END POLISH LAYER v3 */

/* ============================================================
   PHARMACY + LAB ROW TREATMENT (replaces old flat-list lock)
   Rows stay divider-based but gain the Doccure hover lift.
   ============================================================ */
.mx-phcard,
.mx-lbcard {
  background: var(--mx-surface) !important;
  border: none !important;
  border-bottom: 1px solid var(--mx-border) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  transform: none !important;
  padding: 20px !important;
  margin-bottom: 10px !important;
  transition: transform 250ms ease, box-shadow 250ms ease, border-color 250ms ease !important;
}
.mx-phcard:hover,
.mx-lbcard:hover {
  background: var(--mx-surface) !important;
  box-shadow: 0 8px 22px rgba(15,23,42,0.09) !important;
  transform: translateY(-3px) !important;
}
.mx-phcard:last-child,
.mx-lbcard:last-child {
  border-bottom: 1px solid var(--mx-border) !important;
}


/* ============================================================
   LISTING REFINEMENT LAYER
   Flattens heavy shadows, removes hover lifts, clean Practo look.
   Additive only. No markup changes.
   ============================================================ */

/* ===== DOCTOR CARDS ===== */

/* Flatten the card: flat shadow, light border, no transform */
.mx-dcard {
  box-shadow: var(--mx-shadow-sm);
  transform: none;
}
.mx-dcard:hover {
  box-shadow: var(--mx-shadow-md);
  border-color: var(--mx-gray-200);
  transform: none;
}
/* Remove the animated accent bar */
.mx-dcard::before { display: none; }
.mx-dcard:hover::before { display: none; }

/* Sponsored card - flat accent, no glow */
.mx-dcard--sponsored {
  background: var(--mx-surface);
}

/* ===== PHARMACY CARDS ===== */
.mx-phcard {
  box-shadow: var(--mx-shadow-sm);
  transform: none;
  transition: box-shadow var(--mx-transition), border-color var(--mx-transition);
}
.mx-phcard:hover {
  box-shadow: var(--mx-shadow-md);
  border-color: var(--mx-gray-200);
  transform: none;
}

/* ===== LAB CARDS ===== */
.mx-lbcard {
  box-shadow: var(--mx-shadow-sm);
  transform: none;
  transition: box-shadow var(--mx-transition), border-color var(--mx-transition);
}
.mx-lbcard:hover {
  box-shadow: var(--mx-shadow-md);
  border-color: var(--mx-gray-200);
  transform: none;
}

/* ===== HOW-IT-WORKS STEPS (Pharmacy) ===== */
.mx-ph-how-step {
  box-shadow: var(--mx-shadow-xs);
  transform: none;
}
.mx-ph-how-step:hover {
  box-shadow: var(--mx-shadow-sm);
  transform: none;
}

/* ===== LAB PACKAGES ===== */
.mx-lb-pkg {
  box-shadow: var(--mx-shadow-xs);
  transform: none;
}
.mx-lb-pkg:hover {
  box-shadow: var(--mx-shadow-sm);
  transform: none;
}

/* ===== BOOK BUTTONS - flatten gradients ===== */
.mx-btn-book {
  background: var(--mx-primary-darker);
  transform: none;
}
.mx-btn-book:hover {
  background: color-mix(in srgb, var(--mx-primary-darker) 85%, var(--mx-ink) 15%);
  box-shadow: var(--mx-shadow-primary);
  transform: none;
}
.mx-btn-book--primary {
  background: var(--mx-primary-darker);
}
.mx-btn-book--secondary:hover {
  box-shadow: none;
  transform: none;
}

/* ===== FILTER SIDEBAR - flatten ===== */
.mx-doc-aside {
  box-shadow: var(--mx-shadow-xs);
}
.mx-ph-aside-card {
  box-shadow: var(--mx-shadow-xs);
}

/* ===== CARD-INTERNAL BUTTONS - flatten transforms ===== */
.mx-phcard-btn:hover {
  transform: none;
  box-shadow: var(--mx-shadow-primary);
}
.mx-ph-hero-btn:hover {
  transform: none;
}
.mx-ph-aside-promo-btn:hover {
  gap: 6px;
}

/* ===== SEO CHIPS AND CARDS - flatten ===== */
.mx-seo-chip:hover { transform: none; }
.mx-seo-card:hover { transform: none; }

/* ===== LISTING REFINEMENT END ===== */
/* mx card polish v3 - pharmacy + lab refinement */

/* PHARMACY CARD - premium elevation */
.mx-phcard {
  border-radius: var(--mx-radius-lg);
  box-shadow: var(--mx-shadow-sm);
  transition: transform var(--mx-transition), box-shadow var(--mx-transition), border-color var(--mx-transition);
}
.mx-phcard:hover {
  box-shadow: var(--mx-shadow-lg);
  border-color: var(--mx-primary);
}
.mx-phcard-img-wrap {
  position: relative;
  overflow: hidden;
}
.mx-phcard-photo {
  transition: transform var(--mx-transition-slow);
}
.mx-phcard:hover .mx-phcard-photo {
  transform: scale(1.05);
}
.mx-phcard-pill {
  position: absolute;
  top: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(8px);
  color: var(--mx-primary-dark);
  font-size: var(--mx-text-xs);
  font-weight: 700;
  padding: 6px 12px;
  border-radius: var(--mx-radius-pill);
  box-shadow: var(--mx-shadow-sm);
}
.mx-phcard-body {
  padding: 18px 20px 16px;
}
.mx-phcard-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
}
.mx-phcard-name {
  font-family: var(--mx-font);
  font-size: var(--mx-text-lg);
  font-weight: 700;
  color: var(--mx-ink);
  text-decoration: none;
  letter-spacing: -0.01em;
  line-height: 1.3;
  flex: 1;
}
.mx-phcard-name:hover { color: var(--mx-primary-dark); text-decoration: none; }
.mx-phcard-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--mx-success-surface);
  color: var(--mx-success-dark);
  font-size: var(--mx-text-xs);
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--mx-radius-pill);
  white-space: nowrap;
}
.mx-phcard-details {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}
.mx-phcard-meta {
  font-family: var(--mx-font);
  font-size: var(--mx-text-sm);
  color: var(--mx-ink-soft);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.mx-phcard-meta i { color: var(--mx-ink-muted); width: 14px; text-align: center; }
.mx-phcard-loc {
  font-family: var(--mx-font);
  font-size: var(--mx-text-sm);
  color: var(--mx-ink-muted);
  margin: 0 0 12px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  line-height: 1.4;
}
.mx-phcard-loc i { color: var(--mx-primary); margin-top: 2px; }
.mx-phcard-foot {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 12px;
  border-top: 1px solid var(--mx-border-light);
}
.mx-phcard-foot-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--mx-primary-surface);
  color: var(--mx-primary-dark);
  font-size: var(--mx-text-xs);
  font-weight: 600;
  padding: 5px 10px;
  border-radius: var(--mx-radius-pill);
}
.mx-phcard-foot-chip i { font-size: 10px; }
.mx-phcard-actions { padding: 0 20px 20px; }
.mx-phcard-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  background: var(--mx-primary);
  color: var(--mx-white);
  font-family: var(--mx-font);
  font-size: var(--mx-text-sm);
  font-weight: 700;
  padding: 12px;
  border-radius: var(--mx-radius);
  text-decoration: none;
  transition: background var(--mx-transition), box-shadow var(--mx-transition);
}
.mx-phcard-btn:hover {
  background: var(--mx-primary-dark);
  color: var(--mx-white);
  text-decoration: none;
  box-shadow: var(--mx-shadow-primary);
}

/* LAB CARD - premium refinement */
.mx-lbcard {
  border-radius: var(--mx-radius-lg);
  box-shadow: var(--mx-shadow-sm);
  border: 1px solid var(--mx-border-light);
  transition: transform var(--mx-transition), box-shadow var(--mx-transition), border-color var(--mx-transition);
  padding: 20px;
}
.mx-lbcard:hover {
  box-shadow: var(--mx-shadow-lg);
  border-color: var(--mx-primary);
}
.mx-lbcard-photo-wrap {
  position: relative;
  flex: 0 0 88px;
}
.mx-lbcard-photo {
  width: 88px;
  height: 88px;
  border-radius: var(--mx-radius);
  object-fit: cover;
  box-shadow: var(--mx-shadow-sm);
}
.mx-lbcard-tag {
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--mx-primary);
  color: var(--mx-white);
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: var(--mx-radius-pill);
  white-space: nowrap;
  box-shadow: var(--mx-shadow-sm);
}
.mx-lbcard-body { padding-left: 4px; }
.mx-lbcard-name {
  font-family: var(--mx-font);
  font-size: var(--mx-text-lg);
  font-weight: 700;
  color: var(--mx-ink);
  text-decoration: none;
  letter-spacing: -0.01em;
  line-height: 1.3;
  display: block;
  margin-bottom: 6px;
}
.mx-lbcard-name:hover { color: var(--mx-primary-dark); text-decoration: none; }
.mx-lbcard-meta {
  font-family: var(--mx-font);
  font-size: var(--mx-text-sm);
  color: var(--mx-ink-soft);
  margin: 0 0 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.mx-lbcard-meta i { color: var(--mx-ink-muted); }
.mx-lbcard-loc {
  font-family: var(--mx-font);
  font-size: var(--mx-text-sm);
  color: var(--mx-ink-muted);
  margin: 0 0 6px;
  display: flex;
  align-items: flex-start;
  gap: 6px;
  line-height: 1.4;
}
.mx-lbcard-loc i { color: var(--mx-primary); margin-top: 2px; }
.mx-lbcard-foot {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 10px 0;
}
.mx-lbcard-foot-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--mx-primary-surface);
  color: var(--mx-primary-dark);
  font-family: var(--mx-font);
  font-size: var(--mx-text-xs);
  font-weight: 600;
  padding: 5px 10px;
  border-radius: var(--mx-radius-pill);
}
.mx-lbcard-foot-chip i { font-size: 10px; }
.mx-lbcard-price-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--mx-border-light);
}
.mx-lbcard-price {
  font-family: var(--mx-font);
  font-size: var(--mx-text-xl);
  font-weight: 800;
  color: var(--mx-ink);
  letter-spacing: -0.01em;
}
.mx-lbcard-mrp {
  font-family: var(--mx-font);
  font-size: var(--mx-text-sm);
  color: var(--mx-ink-muted);
  text-decoration: line-through;
}
.mx-lbcard-off {
  font-family: var(--mx-font);
  font-size: var(--mx-text-xs);
  font-weight: 700;
  color: var(--mx-danger);
  background: var(--mx-danger-surface);
  padding: 3px 8px;
  border-radius: var(--mx-radius-pill);
}
.mx-lbcard-actions {
  flex: 0 0 auto;
  align-self: center;
}
.mx-btn-book {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--mx-primary);
  color: var(--mx-white);
  font-family: var(--mx-font);
  font-size: var(--mx-text-sm);
  font-weight: 700;
  padding: 12px 28px;
  border-radius: var(--mx-radius);
  text-decoration: none;
  transition: background var(--mx-transition), box-shadow var(--mx-transition), transform var(--mx-transition);
}
.mx-btn-book--primary:hover {
  background: var(--mx-primary-dark);
  color: var(--mx-white);
  text-decoration: none;
  box-shadow: var(--mx-shadow-primary);
}
.mx-btn-book:active { transform: translateY(0) scale(0.97); }
@media (max-width: 640px) {
  .mx-lbcard-actions { flex: 1 1 100%; }
  .mx-btn-book { width: 100%; }
}
/* ============================================================
   HEALTH FEED PAGE POLISH (mxhf-*)
   ============================================================ */
.mxhf-hero{background:var(--mx-primary);padding:64px 20px 56px;text-align:center;color:var(--mx-white);position:relative;overflow:hidden;box-shadow:var(--mx-shadow-cta)}
.mxhf-hero:before{content:"";position:absolute;inset:0;background:transparent;pointer-events:none}
.mxhf-hero-inner{max-width:720px;margin:0 auto;position:relative;z-index:1}
.mxhf-eyebrow{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,0.16);color:var(--mx-white);font-size:12px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;padding:6px 14px;border-radius:100px;margin-bottom:18px;backdrop-filter:blur(4px)}
.mxhf-eyebrow i{font-size:11px}
.mxhf-hero h1{font-family:Outfit,sans-serif;font-size:clamp(32px,4vw,46px);font-weight:800;margin:0 0 12px;letter-spacing:-0.02em;line-height:1.1}
.mxhf-hero p{font-size:17px;line-height:1.5;margin:0 0 28px;opacity:0.92}
.mxhf-search{display:flex;align-items:center;gap:0;background:var(--mx-white);border-radius:100px;padding:6px 6px 6px 22px;box-shadow:0 12px 40px rgba(0,0,0,0.18);max-width:580px;margin:0 auto}
.mxhf-search-ico{color:var(--mx-ink-muted);font-size:16px}
.mxhf-search-input{flex:1;border:none;outline:none;font-size:15px;padding:14px 12px;background:transparent;font-family:Outfit,sans-serif;color:var(--mx-ink)}
.mxhf-search-input::placeholder{color:var(--mx-ink-muted)}
.mxhf-search-btn{border:none;background:var(--mx-primary);color:var(--mx-white);font-family:Outfit,sans-serif;font-size:14px;font-weight:700;padding:12px 26px;border-radius:100px;cursor:pointer;transition:background 0.2s,transform 0.15s}
.mxhf-search-btn:hover{background:var(--mx-primary-dark);}

/* Featured hero article card */
.mxhf-feature{display:grid;grid-template-columns:340px 1fr;background:var(--mx-white);border:1px solid var(--mx-border);border-radius:16px;overflow:hidden;text-decoration:none;margin-bottom:32px;transition:box-shadow 0.25s,transform 0.25s}
.mxhf-feature:hover{box-shadow:0 14px 40px rgba(44,183,223,0.14);border-color:var(--mx-primary-light)}
.mxhf-feature-media{position:relative;height:100%;min-height:240px;overflow:hidden;background:var(--mx-surface-alt)}
.mxhf-feature-media img{width:100%;height:100%;object-fit:cover;transition:transform 0.5s cubic-bezier(0.16,1,0.3,1)}
.mxhf-feature:hover .mxhf-feature-media img{transform:scale(1.04)}
.mxhf-feature-badge{position:absolute;top:14px;left:14px;background:rgba(255,255,255,0.95);color:color-mix(in srgb, var(--mx-primary-darker) 88%, var(--mx-ink) 12%);font-size:11px;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;padding:5px 12px;border-radius:100px;box-shadow:0 2px 8px rgba(0,0,0,0.12)}
.mxhf-feature-body{padding:28px 30px;display:flex;flex-direction:column;justify-content:center}
.mxhf-feature-label{display:inline-flex;align-items:center;gap:6px;color:color-mix(in srgb, var(--mx-warning-dark) 70%, var(--mx-ink) 30%);font-size:12px;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;margin-bottom:10px}
.mxhf-feature-label i{font-size:11px}
.mxhf-feature-body h2{font-family:Outfit,sans-serif;font-size:clamp(22px,2.2vw,28px);font-weight:800;color:var(--mx-ink);margin:0 0 10px;line-height:1.25;letter-spacing:-0.01em}
.mxhf-feature-body p{font-size:15px;line-height:1.6;color:var(--mx-ink-soft);margin:0 0 18px}
.mxhf-feature-foot{display:flex;align-items:center;gap:18px;padding-top:14px;border-top:1px solid var(--mx-surface-alt)}
.mxhf-author{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--mx-ink-soft)}
.mxhf-author i{color:var(--mx-primary);font-size:12px}
.mxhf-foot-meta{display:inline-flex;align-items:center;gap:5px;font-size:13px;color:var(--mx-ink-muted)}
.mxhf-foot-meta i{color:var(--mx-primary);font-size:12px}

/* Grid section header */
.mxhf-grid-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:20px}
.mxhf-grid-head h3{font-family:Outfit,sans-serif;font-size:20px;font-weight:800;color:var(--mx-ink);margin:0;letter-spacing:-0.01em}
.mxhf-grid-head span{font-size:13px;color:var(--mx-ink-soft);font-weight:500}

/* Blog grid refinement */
.mxhf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:22px}
.mxhf-grid .mx-blog-card{border-radius:12px;border:1px solid var(--mx-border);overflow:hidden}
.mxhf-grid .mx-blog-card:hover{box-shadow:0 10px 30px rgba(44,183,223,0.12);border-color:var(--mx-primary-light)}
.mxhf-grid .mx-blog-imgwrap{height:170px}
.mxhf-grid .mx-blog-body{padding:16px 18px 18px}
.mxhf-grid .mx-blog-title{font-size:15px;font-weight:700;margin-bottom:6px;line-height:1.35}
.mxhf-grid .mx-blog-excerpt{font-size:13px;line-height:1.5}

/* Newsletter sidebar card */
.mxhf-newsletter{text-align:center;background:var(--mx-warning-surface);border-color:var(--mx-warning-surface)}
.mxhf-newsletter-ico{display:inline-flex;width:48px;height:48px;align-items:center;justify-content:center;border-radius:50%;background:var(--mx-white);color:var(--mx-warning);font-size:20px;margin-bottom:10px;border:2px solid var(--mx-warning-surface)}
.mxhf-newsletter h3{justify-content:center;border-bottom:none;padding-bottom:0;font-size:15px;color:var(--mx-warning-dark)}
.mxhf-newsletter p{font-size:13px;color:var(--mx-ink-muted);line-height:1.5;margin:6px 0 14px}
.mxhf-newsletter-btn{display:inline-flex;align-items:center;gap:6px;padding:10px 22px;background:var(--mx-primary-darker);color:var(--mx-white);border-radius:100px;text-decoration:none;font-family:Outfit,sans-serif;font-size:13px;font-weight:700;transition:background 0.2s,transform 0.15s}
.mxhf-newsletter-btn:hover{background:color-mix(in srgb, var(--mx-primary-darker) 85%, var(--mx-ink) 15%);}

/* Responsive */
@media (max-width:768px){
  .mxhf-hero.mxhf-hero{padding:44px 16px 36px !important}
  .mxhf-hero h1{font-size:28px}
  .mxhf-hero p{font-size:15px}
  .mxhf-search{height:44px;max-width:100%}
  .mxhf-feature.mxhf-feature{grid-template-columns:1fr;margin-bottom:24px}
  .mxhf-feature-media{min-height:200px}
  .mxhf-feature-body{padding:20px}
  .mxhf-feature-body h2{font-size:20px}
  .mxhf-grid{grid-template-columns:1fr;gap:16px}
  .mxhf-grid-head h3{font-size:18px}
  .mx-doc-page{padding:24px 16px 48px}
}
@media (max-width:520px){
  .mxhf-grid{grid-template-columns:1fr}
  .mxhf-search-btn{padding:0 16px;font-size:13px}
}

/* ===== POLISH LAYER v9 - HEALTH FEED WOW END ===== */


/* POLISH LAYER v10 - PHARMACY/LABS WOW */
/* Appended additive layer for premium Practo-class polish. */
/* Additive only. No existing rules modified. */
/* Tokens: brand #28328c, primary #2cb7df, success #0F7244. */

/* 1. PHARMACY + LAB CARDS - flat row, no shadow */
.mx-phcard.mx-phcard, .mx-lbcard.mx-lbcard {background: var(--mx-surface) !important; border: 1px solid var(--mx-border) !important; border-radius: 8px !important; padding: 16px 20px !important; box-shadow: none !important; display: flex !important; align-items: flex-start !important; gap: 16px !important; margin: 0 0 12px !important; transition: border-color 200ms cubic-bezier(0.4,0,0.2,1) !important;}
.mx-phcard.mx-phcard:hover, .mx-lbcard.mx-lbcard:hover {border-color: var(--mx-gray-300) !important; box-shadow: none !important; transform: none !important;}
.mx-ph-grid {display: flex !important; flex-direction: column !important; gap: 0 !important;}
/* Pharmacy logo/image: 64px square, 1px border */
.mx-phcard-img-wrap {width: 64px !important; height: 64px !important; flex: 0 0 64px !important; position: relative !important; background: var(--mx-surface-alt) !important; border: 1px solid var(--mx-border) !important; border-radius: 6px !important; overflow: hidden !important; margin: 0 !important;}
.mx-phcard-photo {width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: 6px !important; display: block !important;}
.mx-phcard-pill {display: none !important;}
/* Lab logo/image: 64px square, 1px border */
.mx-lbcard-photo-wrap {width: 64px !important; height: 64px !important; flex: 0 0 64px !important; background: var(--mx-surface-alt) !important; border: 1px solid var(--mx-border) !important; border-radius: 6px !important; overflow: hidden !important; margin: 0 !important;}
.mx-lbcard-photo {width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: 6px !important; display: block !important;}
.mx-lbcard-tag {display: none !important;}
/* Card body + brand-color name with hover underline */
.mx-phcard-body, .mx-lbcard-body {flex: 1 1 auto !important; min-width: 0 !important; padding: 0 !important;}
.mx-phcard-header {display: flex !important; align-items: center !important; gap: 8px !important; flex-wrap: wrap !important; margin-bottom: 4px !important;}
.mx-phcard-name, .mx-lbcard-name {font-family: var(--mx-font-sans) !important; font-size: 17px !important; font-weight: 600 !important; color: var(--mx-brand) !important; text-decoration: none !important; line-height: 1.3 !important; letter-spacing: -0.01em !important; margin: 0 !important; transition: color 200ms !important;}
.mx-phcard-name:hover, .mx-lbcard-name:hover {color: var(--mx-brand-dark) !important; text-decoration: underline !important;}
.mx-phcard-badge {display: inline-flex !important; align-items: center !important; gap: 4px !important; background: var(--mx-success) !important; color: var(--mx-white) !important; font-size: 13px !important; font-weight: 600 !important; padding: 2px 8px !important; border-radius: 4px !important; line-height: 1.4 !important;}
.mx-phcard-badge i {font-size: 11px !important;}
/* Meta + address: 13px ink-muted */
.mx-phcard-meta, .mx-lbcard-meta {font-family: var(--mx-font-sans) !important; font-size: 13px !important; color: var(--mx-ink-muted) !important; margin: 2px 0 !important; line-height: 1.4 !important; display: flex !important; align-items: center !important; gap: 6px !important;}
.mx-phcard-meta i, .mx-lbcard-meta i {font-size: 11px !important; color: var(--mx-gray-400) !important; margin: 0 !important;}
.mx-phcard-loc, .mx-lbcard-loc {font-family: var(--mx-font-sans) !important; font-size: 13px !important; color: var(--mx-ink-muted) !important; margin: 2px 0 !important; line-height: 1.4 !important; display: flex !important; align-items: center !important; gap: 6px !important;}
.mx-phcard-loc i, .mx-lbcard-loc i {font-size: 11px !important; color: var(--mx-gray-400) !important; margin: 0 !important;}
.mx-phcard-foot, .mx-lbcard-foot {display: flex !important; gap: 8px !important; flex-wrap: wrap !important; margin-top: 8px !important; padding-top: 8px !important; border-top: 1px dashed var(--mx-border) !important;}
.mx-phcard-foot-chip, .mx-lbcard-foot-chip {display: inline-flex !important; align-items: center !important; gap: 5px !important; padding: 3px 9px !important; border-radius: var(--mx-radius-pill) !important; background: var(--mx-primary-surface) !important; color: var(--mx-primary-dark) !important; font-family: var(--mx-font-sans) !important; font-size: 13px !important; font-weight: 600 !important;}
/* Actions: solid flat button, no gradient, hover darkens */
.mx-phcard-actions, .mx-lbcard-actions {flex: 0 0 160px !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 8px !important; padding-left: 16px !important; border-left: 1px solid var(--mx-border) !important;}
.mx-phcard-btn, .mx-lbcard-actions .mx-btn-book--primary {display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; width: 100% !important; background: var(--mx-primary-darker) !important; color: var(--mx-white) !important; font-family: var(--mx-font-sans) !important; font-size: 14px !important; font-weight: 600 !important; padding: 8px 16px !important; border-radius: 4px !important; border: 1px solid var(--mx-primary-darker) !important; text-decoration: none !important; cursor: pointer !important; box-shadow: none !important; background-image: none !important; transform: none !important; transition: background 200ms !important;}
.mx-phcard-btn:hover, .mx-lbcard-actions .mx-btn-book--primary:hover {background: color-mix(in srgb, var(--mx-primary-darker) 85%, var(--mx-ink) 15%) !important; border-color: color-mix(in srgb, var(--mx-primary-darker) 85%, var(--mx-ink) 15%) !important; color: var(--mx-white) !important; box-shadow: none !important; background-image: none !important; transform: none !important;}
.mx-lbcard-price-row {margin-top: 8px !important; gap: 8px !important;}
.mx-lbcard-price {font-size: 14px !important; font-weight: 700 !important; color: var(--mx-ink) !important;}
.mx-lbcard-mrp {font-size: 13px !important; color: var(--mx-ink-muted) !important;}
.mx-lbcard-off {font-size: 13px !important; font-weight: 700 !important; color: var(--mx-danger) !important; background: var(--mx-danger-surface) !important; padding: 2px 8px !important; border-radius: var(--mx-radius-pill) !important;}
/* 3. SEARCH/FILTER BAR — compact solid-primary */
.mx-ph-top, .mx-lb-top {background: var(--mx-primary) !important; border-bottom: 1px solid color-mix(in srgb, var(--mx-primary-dark) 60%, var(--mx-ink) 40%) !important; box-shadow: none !important; padding: 28px 0 32px !important;}
.mx-ph-top-bar, .mx-lb-top-bar {background: var(--mx-white) !important; border: 1px solid rgba(255, 255, 255, 0.4) !important; border-radius: var(--mx-radius-pill) !important; box-shadow: var(--mx-shadow-cta) !important; height: 48px !important; padding: 4px 4px 4px 8px !important;}
.mx-ph-top-bar:focus-within, .mx-lb-top-bar:focus-within {border-color: var(--mx-white) !important; box-shadow: var(--mx-shadow-cta-hover) !important;}
.mx-ph-top-input, .mx-lb-top-input {height: 40px !important; font-size: 14px !important; color: var(--mx-ink) !important; background: transparent !important;}
.mx-ph-top-input::placeholder, .mx-lb-top-input::placeholder {color: var(--mx-gray-500, #64748b) !important;}
.mx-ph-top-btn, .mx-lb-top-btn {height: 40px !important; padding: 0 22px !important; background: var(--mx-primary-dark) !important; color: var(--mx-white) !important; font-family: var(--mx-font-sans) !important; font-weight: 700 !important; font-size: 14px !important; border-radius: var(--mx-radius-pill) !important; border: none !important; cursor: pointer !important; background-image: none !important; transition: background 200ms !important; box-shadow: none !important;}
.mx-ph-top-btn:hover, .mx-lb-top-btn:hover {background: var(--mx-primary-darker) !important; background-image: none !important;}
.mx-ph-top-ico, .mx-lb-top-ico {color: var(--mx-ink-muted, #475569) !important; font-size: 16px !important; padding: 0 12px 0 14px !important;}
/* Hero text - white text on solid primary */
.mx-ph-top-text, .mx-lb-top-text {text-align: center !important; margin-bottom: 14px !important; color: var(--mx-white) !important;}
.mx-ph-top-text h1, .mx-lb-top-text h1 {font-family: var(--mx-font-sans) !important; font-size: 24px !important; font-weight: 700 !important; color: var(--mx-white) !important; letter-spacing: -0.02em !important; margin: 0 0 6px !important; line-height: 1.2 !important;}
.mx-ph-top-text p, .mx-lb-top-text p {font-family: var(--mx-font-sans) !important; font-size: 13px !important; color: rgba(255, 255, 255, 0.92) !important; margin: 0 !important;}
.mx-ph-top-eyebrow, .mx-lb-top-eyebrow {display: inline-flex !important; align-items: center !important; gap: 6px !important; font-family: var(--mx-font-sans) !important; font-size: 12px !important; font-weight: 700 !important; color: var(--mx-white) !important; background: rgba(255,255,255,0.18) !important; padding: 5px 12px !important; border-radius: var(--mx-radius-pill) !important; margin-bottom: 10px !important;}
.mx-ph-top-eyebrow i, .mx-lb-top-eyebrow i {color: var(--mx-white) !important; font-size: 13px !important;}
.mx-ph-trust {display: flex !important; justify-content: center !important; gap: 12px !important; flex-wrap: wrap !important; margin-top: 18px !important; max-width: 760px !important; margin-left: auto !important; margin-right: auto !important;}
.mx-ph-trust-item, .mx-lb-trust-item {display: flex !important; align-items: center !important; gap: 10px !important; padding: 8px 14px !important; background: rgba(255,255,255,0.14) !important; border: 1px solid rgba(255,255,255,0.22) !important; border-radius: var(--mx-radius-pill) !important; box-shadow: none !important;}
.mx-ph-trust-ico, .mx-lb-trust-ico {width: 32px !important; height: 32px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; background: rgba(255,255,255,0.22) !important; color: var(--mx-white) !important; border-radius: 8px !important; font-size: 15px !important;}
.mx-ph-trust-text strong, .mx-lb-trust-text strong {display: block !important; font-family: var(--mx-font-sans) !important; font-size: 13px !important; font-weight: 700 !important; color: var(--mx-white) !important;}
.mx-ph-trust-text span, .mx-lb-trust-text span {font-family: var(--mx-font-sans) !important; font-size: 13px !important; color: rgba(255,255,255,0.85) !important;}
/* Results section header - 24px brand-aligned */
.mx-ph-rhead h2 {font-family: var(--mx-font-sans) !important; font-size: 20px !important; font-weight: 700 !important; color: var(--mx-ink) !important; margin: 0 !important; letter-spacing: -0.01em !important;}
.mx-ph-rhead p {font-family: var(--mx-font-sans) !important; font-size: 13px !important; color: var(--mx-ink-soft) !important; margin: 4px 0 0 !important;}
.mx-ph-countnum {color: var(--mx-primary) !important; font-weight: 700 !important;}
.mx-ph-rhead-sort {display: inline-flex !important; align-items: center !important; gap: 6px !important; font-family: var(--mx-font-sans) !important; font-size: 13px !important; color: var(--mx-ink-muted) !important; padding: 6px 10px !important; border: 1px solid var(--mx-border) !important; border-radius: 6px !important; background: var(--mx-surface) !important;}
.mx-ph-rhead-sort i {color: var(--mx-gray-400) !important;}
/* Sidebar filter card - flat white, 1px border */
.mx-ph-aside-card {background: var(--mx-surface) !important; border: 1px solid var(--mx-border) !important; border-radius: 8px !important; box-shadow: none !important; padding: 16px !important;}
.mx-ph-aside-title {font-family: var(--mx-font-sans) !important; font-size: 13px !important; font-weight: 700 !important; color: var(--mx-ink) !important; text-transform: uppercase !important; letter-spacing: 0.04em !important; padding-bottom: 10px !important; border-bottom: 1px solid var(--mx-border-light) !important; margin: 0 0 10px !important;}
.mx-ph-aside-title i {color: var(--mx-primary) !important; font-size: 13px !important;}
.mx-filter-label {font-family: var(--mx-font-sans) !important; font-size: 13px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.04em !important; color: var(--mx-ink-muted) !important; margin: 0 0 8px !important;}
.mx-filter-opt {display: flex !important; align-items: center !important; gap: 10px !important; padding: 8px 8px !important; margin: 0 -4px 2px !important; border-radius: 6px !important; font-family: var(--mx-font-sans) !important; font-size: 14px !important; color: var(--mx-ink-soft) !important; cursor: pointer !important; transition: color 200ms, background 200ms !important;}
.mx-filter-opt:hover {color: var(--mx-primary-dark) !important; background: var(--mx-surface-hover) !important;}
.mx-filter-opt input {width: 16px !important; height: 16px !important; accent-color: var(--mx-primary) !important; cursor: pointer !important;}
/* Sidebar promo card */
.mx-ph-aside-promo {background: var(--mx-primary-surface) !important; border: 1px solid var(--mx-primary-glow) !important; border-radius: 8px !important; padding: 16px !important; margin-top: 16px !important; text-align: left !important;}
.mx-ph-aside-promo-ico {width: 40px !important; height: 40px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; background: var(--mx-white) !important; color: var(--mx-primary) !important; border-radius: 8px !important; font-size: 18px !important; margin-bottom: 10px !important;}
.mx-ph-aside-promo h4 {font-family: var(--mx-font-sans) !important; font-size: 14px !important; font-weight: 700 !important; color: var(--mx-ink) !important; margin: 0 0 4px !important;}
.mx-ph-aside-promo p {font-family: var(--mx-font-sans) !important; font-size: 13px !important; color: var(--mx-ink-soft) !important; margin: 0 0 10px !important;}
.mx-ph-aside-promo-btn {display: inline-flex !important; align-items: center !important; gap: 6px !important; font-family: var(--mx-font-sans) !important; font-size: 13px !important; font-weight: 700 !important; color: var(--mx-primary-darker) !important; text-decoration: none !important;}
.mx-ph-upload-cta {text-align: center !important; margin-top: 20px !important;}
.mx-ph-upload-btn {display: inline-flex !important; flex-direction: column !important; align-items: center !important; gap: 2px !important; background: var(--mx-surface) !important; color: var(--mx-primary-dark) !important; padding: 14px 32px !important; border: 1px solid var(--mx-border) !important; border-radius: var(--mx-radius-pill) !important; font-weight: 700 !important; text-decoration: none !important; box-shadow: none !important; transition: border-color 200ms !important;}
.mx-ph-upload-btn:hover {border-color: var(--mx-primary) !important; box-shadow: none !important;}
/* 4. EMPTY STATES - centered, 16px ink-muted, subtle icon */
.mx-ph-empty {text-align: center !important; padding: 60px 20px !important; color: var(--mx-ink-muted) !important; background: var(--mx-surface) !important; border: 1px dashed var(--mx-border) !important; border-radius: 8px !important; margin: 0 !important;}
.mx-ph-empty i {font-size: 36px !important; color: var(--mx-gray-400) !important; margin-bottom: 12px !important; display: block !important;}
.mx-ph-empty p {font-family: var(--mx-font-sans) !important; font-size: 16px !important; color: var(--mx-ink-muted) !important; margin: 0 !important;}
.mx-ph-more {text-align: center !important; margin-top: 20px !important;}
.mx-ph-more button {display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; background: var(--mx-surface) !important; color: var(--mx-primary-dark) !important; border: 1px solid var(--mx-primary) !important; font-family: var(--mx-font-sans) !important; font-size: 14px !important; font-weight: 600 !important; padding: 10px 24px !important; border-radius: 6px !important; cursor: pointer !important; background-image: none !important; box-shadow: none !important; transition: background 200ms, color 200ms !important;}
.mx-ph-more button:hover {background: var(--mx-primary) !important; color: var(--mx-white) !important;}
/* Mobile: stack action column, no left divider */
@media (max-width: 760px) {.mx-phcard.mx-phcard, .mx-lbcard.mx-lbcard { padding: 14px !important; gap: 12px !important; } .mx-phcard-actions, .mx-lbcard-actions { flex: 1 1 100% !important; padding-left: 0 !important; border-left: 0 !important; margin-top: 4px !important; flex-direction: row !important; } .mx-phcard-actions > *, .mx-lbcard-actions > * { flex: 1 !important; } .mx-ph-layout { flex-direction: column !important; } .mx-ph-aside { position: static !important; flex: 1 1 auto !important; }}

/* ===== POLISH LAYER v10 END ===== */

/* ============================================================
   POLISH LAYER v8 - DOCTOR LISTING PREMIUM (reconstructed)
   Compact, scannable, Practo-class density.
   ============================================================ */

/* 1. SEARCH BAR HEADER */
.mx-doc-rhead {
  background: var(--mx-surface);
  border-bottom: 1px solid var(--mx-border);
  padding: 28px 20px 32px;
}
.mx-doc-searchbar {
  background: var(--mx-primary);
  color: var(--mx-white);
  border-bottom: 1px solid color-mix(in srgb, var(--mx-primary-dark) 60%, var(--mx-ink) 40%);
}
.mx-doc-searchbar:focus {
  outline: none;
  border-color: var(--mx-primary);
  box-shadow: 0 0 0 3px rgba(44, 183, 223, 0.30);
}

/* 2. DOCTOR CARD */
.mx-dcard {
  padding: 16px 20px;
  border-bottom: 1px solid var(--mx-border);
  box-shadow: none;
}
.mx-dcard:hover {
  box-shadow: none;
  background: var(--mx-surface);
}
.mx-dcard-photo {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 1px solid var(--mx-border);
  object-fit: cover;
}
.mx-dcard-name {
  font-size: 17px;
  font-weight: 500;
  color: var(--mx-brand);
  text-decoration: none;
}
.mx-dcard-name:hover {
  text-decoration: underline;
}
.mx-dcard-spec, .mx-dcard-loc {
  font-size: 13px;
  color: var(--mx-ink-muted);
}
.mx-dcard-score {
  background: var(--mx-success);
  color: var(--mx-white);
  font-size: 13px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.mx-dcard-fee-big {
  font-size: 14px;
  font-weight: 600;
  color: var(--mx-ink);
}

/* 3. BUTTONS */
.mx-dcard-btn-primary, .mx-dcard-actions .btn-primary {
  background: var(--mx-primary);
  color: var(--mx-white);
  border-radius: 4px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  border: none;
  background-image: none;
  transition: background 180ms ease;
}
.mx-dcard-btn-primary:hover, .mx-dcard-actions .btn-primary:hover {
  background: var(--mx-primary-dark);
  background-image: none;
}
.mx-dcard-btn-secondary, .mx-dcard-actions .btn-outline {
  background: var(--mx-surface);
  color: var(--mx-ink);
  border: 1px solid var(--mx-border);
  border-radius: 4px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
}

/* 4. FILTER SIDEBAR */
.mx-doc-filter-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--mx-ink);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}
.mx-doc-filter-options {
  padding: 0;
}
.mx-doc-filter-options label, .mx-doc-filter-opt {
  padding: 6px 0;
  font-size: 14px;
  color: var(--mx-ink-soft);
}

/* 5. SPACING */
.mx-doc-list {
  gap: 0;
}
.mx-doc-aside {
  padding: 20px;
}

/* ===== END POLISH LAYER v8 ===== */
/* ============================================================
   POLISH LAYER v13 - IMPECCABLE FEED/AUTH
   Editorial health feed + refined auth card surfaces.
   Depends on: tokens.css + listing_mx.css base layers.
   Uses ONLY var(--mx-*) tokens per design system.
   ============================================================ */

/* ---------- HEALTH FEED: Practo editorial top ---------- */
/* Compact solid-primary page-header bar (matches doctor/pharmacy/lab/spec pages). */
.mxhf-top {
  background: var(--mx-primary);
  color: var(--mx-white);
  border-bottom: 1px solid color-mix(in srgb, var(--mx-primary-dark) 60%, var(--mx-ink) 40%);
  padding: 28px 20px 32px;
  text-align: center;
}
.mxhf-top-inner {
  max-width: 720px;
  margin: 0 auto;
}
.mxhf-top-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255,255,255,0.18);
  color: var(--mx-white);
  font-family: var(--mx-font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: var(--mx-radius-pill);
  margin-bottom: 18px;
}
.mxhf-top-eyebrow i { font-size: 11px; }
.mxhf-top h1 {
  font-family: var(--mx-font-sans);
  font-size: 24px;
  font-weight: 700;
  color: var(--mx-white);
  margin: 0 0 6px;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.mxhf-top p {
  font-family: var(--mx-font-sans);
  font-size: 16px;
  line-height: 1.55;
  color: rgba(255,255,255,0.92);
  margin: 0 auto 28px;
  max-width: 560px;
}

/* ---------- HEALTH FEED: centered search pill (flat, 1px border) ---------- */
.mxhf-top-search {
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--mx-surface);
  border: 1px solid var(--mx-border);
  border-radius: var(--mx-radius-pill);
  padding: 6px 6px 6px 22px;
  box-shadow: var(--mx-shadow-xs);
  max-width: 580px;
  margin: 0 auto;
  transition: border-color var(--mx-transition), box-shadow var(--mx-transition);
}
.mxhf-top-search:focus-within {
  border-color: var(--mx-primary);
  box-shadow: var(--mx-shadow-focus);
}
.mxhf-top-search-ico {
  color: var(--mx-ink-muted);
  font-size: 16px;
  flex-shrink: 0;
}
.mxhf-top-search-input {
  flex: 1;
  border: none;
  outline: none;
  font-family: var(--mx-font-sans);
  font-size: 15px;
  padding: 12px 12px;
  background: transparent;
  color: var(--mx-ink);
  min-width: 0;
}
.mxhf-top-search-input::placeholder { color: var(--mx-ink-muted); }
.mxhf-top-search-btn {
  border: none;
  background: var(--mx-primary-darker);
  color: var(--mx-surface);
  font-family: var(--mx-font-sans);
  font-size: 14px;
  font-weight: 700;
  padding: 12px 26px;
  border-radius: var(--mx-radius-pill);
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--mx-transition);
}
.mxhf-top-search-btn:hover { background: color-mix(in srgb, var(--mx-primary-darker) 85%, var(--mx-ink) 15%); }

/* ---------- HEALTH FEED: hide old gradient hero if it ever renders ---------- */
.mxhf-hero,
.mxhf-hero-inner,
.mxhf-hero:before,
.mxhf-eyebrow,
.mxhf-search,
.mxhf-search-ico,
.mxhf-search-input,
.mxhf-search-btn { display: none !important; }
/* ---------- HEALTH FEED: page container ---------- */
.mx-doc-page .mx-feed-layout {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px 60px;
  grid-template-columns: 1fr 320px;
  gap: 36px;
}

/* ---------- HEALTH FEED: featured editorial card ---------- */
.mxhf-feature {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  background: var(--mx-surface);
  border: 1px solid var(--mx-border);
  border-radius: var(--mx-radius-lg);
  overflow: hidden;
  text-decoration: none;
  margin-bottom: 40px;
  transition: box-shadow var(--mx-transition), border-color var(--mx-transition);
}
.mxhf-feature:hover {
  box-shadow: 0 10px 30px rgba(16, 24, 40, 0.08);
  border-color: var(--mx-primary-glow, #c8eefb);
}
.mxhf-feature-media {
  position: relative;
  min-height: 320px;
  overflow: hidden;
  background: var(--mx-surface-alt);
}
.mxhf-feature-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.mxhf-feature:hover .mxhf-feature-media img { transform: scale(1.04); }
.mxhf-feature-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  background: var(--mx-surface);
  color: color-mix(in srgb, var(--mx-primary-darker) 88%, var(--mx-ink) 12%);
  font-family: var(--mx-font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: var(--mx-radius-pill);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
}
.mxhf-feature-body {
  padding: 36px 36px 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.mxhf-feature-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: color-mix(in srgb, var(--mx-primary-darker) 88%, var(--mx-ink) 12%);
  font-family: var(--mx-font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.mxhf-feature-label i { font-size: 11px; }
.mxhf-feature-body h2 {
  font-family: var(--mx-font-sans);
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 700;
  color: var(--mx-ink);
  margin: 0 0 12px;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.mxhf-feature-body p {
  font-family: var(--mx-font-sans);
  font-size: 15px;
  line-height: 1.6;
  color: var(--mx-ink-muted);
  margin: 0 0 20px;
}
.mxhf-feature-foot {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--mx-border);
}
.mxhf-author {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mx-font-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--mx-ink);
}
.mxhf-author i { color: var(--mx-primary); font-size: 12px; }
.mxhf-foot-meta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--mx-font-sans);
  font-size: 13px;
  color: var(--mx-ink-muted);
}
.mxhf-foot-meta i { color: var(--mx-primary); font-size: 12px; }
/* ---------- HEALTH FEED: section heading ---------- */
.mxhf-grid-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 8px 0 22px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--mx-border);
}
.mxhf-grid-head h3 {
  font-family: var(--mx-font-sans);
  font-size: 24px;
  font-weight: 700;
  color: var(--mx-ink);
  margin: 0;
  letter-spacing: -0.01em;
}
.mxhf-grid-head span {
  font-family: var(--mx-font-sans);
  font-size: 13px;
  color: var(--mx-ink-soft);
  font-weight: 500;
}

/* ---------- HEALTH FEED: article grid (3 columns, editorial) ---------- */
.mxhf-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.mxhf-grid .mx-blog-card {
  border-radius: var(--mx-radius-lg);
  border: 1px solid var(--mx-border);
  overflow: hidden;
  background: var(--mx-surface);
  transition: box-shadow var(--mx-transition), border-color var(--mx-transition), transform var(--mx-transition);
}
.mxhf-grid .mx-blog-card:hover {
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.08);
  border-color: var(--mx-primary-glow, #c8eefb);
}
.mxhf-grid .mx-blog-imgwrap {
  height: 180px;
  position: relative;
  overflow: hidden;
}
.mxhf-grid .mx-blog-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.mxhf-grid .mx-blog-card:hover .mx-blog-img { transform: scale(1.06); }
.mxhf-grid .mx-blog-body { padding: 18px 20px 20px; }

/* Category tag: primary-surface bg, primary-dark text */
.mxhf-grid .mx-feed-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--mx-primary-surface);
  color: color-mix(in srgb, var(--mx-primary-darker) 88%, var(--mx-ink) 12%);
  font-family: var(--mx-font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--mx-radius-pill);
  box-shadow: none;
  z-index: 2;
}

.mxhf-grid .mx-blog-title {
  font-family: var(--mx-font-sans);
  font-size: 18px;
  font-weight: 600;
  color: var(--mx-ink);
  margin: 0 0 8px;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mxhf-grid .mx-blog-card:hover .mx-blog-title { color: var(--mx-primary-dark); }
.mxhf-grid .mx-blog-excerpt {
  font-family: var(--mx-font-sans);
  font-size: 14px;
  color: var(--mx-ink-muted);
  line-height: 1.55;
  margin: 0 0 14px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mxhf-grid .mx-blog-author {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--mx-border-light, var(--mx-border));
}
.mxhf-grid .mx-blog-author-name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mx-font-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--mx-ink);
}
.mxhf-grid .mx-blog-author-name i { color: var(--mx-primary); font-size: 11px; }
.mxhf-grid .mx-feed-meta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--mx-font-sans);
  font-size: 13px;
  color: var(--mx-ink-muted);
}
.mxhf-grid .mx-feed-meta i { color: var(--mx-primary); font-size: 11px; }
/* ---------- HEALTH FEED: sidebar refinement ---------- */
.mx-feed-side-card {
  background: var(--mx-surface);
  border: 1px solid var(--mx-border);
  border-radius: var(--mx-radius-lg);
  padding: 22px 22px 18px;
}
.mx-feed-side-card h3 {
  font-family: var(--mx-font-sans);
  font-size: 15px;
  font-weight: 700;
  color: var(--mx-ink);
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--mx-border);
}
.mx-feed-side-card h3 i { color: var(--mx-primary); font-size: 13px; }
.mx-feed-mini {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 0;
  border-bottom: 1px solid var(--mx-border);
  text-decoration: none;
}
.mx-feed-mini:last-child { border-bottom: none; padding-bottom: 4px; }
.mx-feed-mini:hover .mx-feed-mini-title { color: var(--mx-primary-dark); }
.mx-feed-mini-title {
  font-family: var(--mx-font-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--mx-ink);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color var(--mx-transition);
}
.mx-feed-mini-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--mx-font-sans);
  font-size: 12px;
  color: var(--mx-ink-muted);
}
.mx-feed-mini-meta span { display: inline-flex; align-items: center; gap: 4px; }
.mx-feed-mini-meta i { color: var(--mx-primary); font-size: 11px; }

/* Sidebar promo card: solid surface tint, no gradient */
.mx-feed-side-promo {
  text-align: center;
  background: var(--mx-primary-surface);
  border-color: var(--mx-primary-glow, #c8eefb);
}
.mx-feed-side-promo-ico {
  display: inline-flex;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--mx-surface);
  color: var(--mx-primary);
  font-size: 20px;
  margin-bottom: 12px;
  border: 1px solid var(--mx-primary-glow, #c8eefb);
}
.mx-feed-side-promo h3 {
  justify-content: center;
  border-bottom: none;
  padding-bottom: 0;
  font-size: 16px;
  color: var(--mx-ink);
}
.mx-feed-side-promo p {
  font-family: var(--mx-font-sans);
  font-size: 13px;
  color: var(--mx-ink-soft);
  line-height: 1.5;
  margin: 6px 0 14px;
}
.mx-feed-side-promo-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  background: var(--mx-primary);
  color: var(--mx-surface);
  border-radius: var(--mx-radius-pill);
  text-decoration: none;
  font-family: var(--mx-font-sans);
  font-size: 13px;
  font-weight: 700;
  transition: background var(--mx-transition);
}
.mx-feed-side-promo-btn:hover { background: var(--mx-primary-dark); }
.mx-feed-side-promo-btn i { font-size: 11px; transition: transform var(--mx-transition); }
.mx-feed-side-promo-btn:hover i { transform: translateX(3px); }

/* Newsletter card: solid warm surface tint, no gradient */
.mxhf-newsletter {
  text-align: center;
  background: var(--mx-warning-surface, #fef3c7);
  border-color: var(--mx-warning-surface);
}
.mxhf-newsletter-ico {
  display: inline-flex;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--mx-surface);
  color: var(--mx-warning, #b45309);
  font-size: 20px;
  margin-bottom: 10px;
  border: 1px solid var(--mx-warning-surface);
}
.mxhf-newsletter h3 {
  justify-content: center;
  border-bottom: none;
  padding-bottom: 0;
  font-size: 15px;
  color: var(--mx-ink);
}
.mxhf-newsletter p {
  font-family: var(--mx-font-sans);
  font-size: 13px;
  color: var(--mx-ink-soft);
  line-height: 1.5;
  margin: 6px 0 14px;
}
.mxhf-newsletter-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 20px;
  background: var(--mx-primary);
  color: var(--mx-surface);
  border-radius: var(--mx-radius-pill);
  text-decoration: none;
  font-family: var(--mx-font-sans);
  font-size: 13px;
  font-weight: 700;
  transition: background var(--mx-transition);
}
.mxhf-newsletter-btn:hover { background: var(--mx-primary-dark); }
/* ---------- HEALTH FEED: empty state ---------- */
.mx-lb-empty {
  text-align: center;
  padding: 60px 20px;
  background: var(--mx-surface);
  border: 1px solid var(--mx-border);
  border-radius: var(--mx-radius-lg);
  color: var(--mx-ink-muted);
}
.mx-lb-empty i {
  font-size: 40px;
  color: var(--mx-ink-muted);
  margin-bottom: 14px;
  display: block;
}
.mx-lb-empty p {
  font-family: var(--mx-font-sans);
  font-size: 14px;
  margin: 0;
}

/* ---------- HEALTH FEED: pagination refinement ---------- */
.mx-pagination {
  margin-top: 32px;
  display: flex;
  justify-content: center;
}
.mx-pagination .pagination {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--mx-surface);
  border: 1px solid var(--mx-border);
  border-radius: var(--mx-radius);
  padding: 4px;
}
.mx-pagination .page-item:first-child .page-link,
.mx-pagination .page-item:last-child .page-link { border-radius: 0; }
.mx-pagination .page-link {
  font-family: var(--mx-font-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--mx-ink);
  padding: 8px 14px;
  border: none;
  border-radius: 4px;
  transition: background var(--mx-transition), color var(--mx-transition);
}
.mx-pagination .page-link:hover {
  background: var(--mx-primary-surface);
  color: var(--mx-primary-dark);
}
.mx-pagination .active .page-link,
.mx-pagination .page-item.active .page-link {
  background: var(--mx-primary);
  color: var(--mx-surface);
}
.mx-pagination .disabled .page-link {
  color: var(--mx-ink-muted);
  opacity: 0.6;
}

/* ---------- HEALTH FEED: chip strip refinement ---------- */
.mx-feed-chipwrap {
  background: var(--mx-surface);
  border-bottom: 1px solid var(--mx-border);
  position: sticky;
  top: 60px;
  z-index: 40;
}
.mx-feed-chipstrip {
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.mx-feed-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  font-family: var(--mx-font-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--mx-ink);
  background: var(--mx-surface-alt);
  border: 1px solid var(--mx-border);
  border-radius: var(--mx-radius-pill);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--mx-transition), color var(--mx-transition), border-color var(--mx-transition);
}
.mx-feed-chip:hover {
  background: var(--mx-primary-surface);
  border-color: var(--mx-primary-glow, #c8eefb);
  color: var(--mx-primary-dark);
}
.mx-feed-chip.is-active {
  background: var(--mx-primary-darker);
  border-color: var(--mx-primary-darker);
  color: var(--mx-surface);
}
.mx-feed-chip.is-active i { color: var(--mx-surface); }

/* ---------- HEALTH FEED: responsive ---------- */
@media (max-width: 980px) {
  .mx-doc-page .mx-feed-layout {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 32px 16px 48px;
  }
  .mx-feed-sidebar { position: static; }
}
@media (max-width: 820px) {
  .mxhf-feature {
    grid-template-columns: 1fr;
    margin-bottom: 32px;
  }
  .mxhf-feature-media { min-height: 220px; }
  .mxhf-feature-body { padding: 24px; }
  .mxhf-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
@media (max-width: 560px) {
  .mxhf-top { padding: 40px 16px 32px; }
  .mxhf-top h1 { font-size: 28px; }
  .mxhf-top p { font-size: 15px; }
  .mxhf-grid { grid-template-columns: 1fr; gap: 18px; }
  .mxhf-grid-head h3 { font-size: 20px; }
  .mx-feed-chipstrip { padding: 12px 16px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .mxhf-feature,
  .mxhf-feature-media img,
  .mx-blog-card,
  .mx-blog-img,
  .mx-feed-chip,
  .mx-feed-side-promo-btn,
  .mxhf-newsletter-btn {
    transition: none;
  }
  .mxhf-feature:hover .mxhf-feature-media img,
  .mx-blog-card:hover .mx-blog-img { transform: none; }
}

/* ===== POLISH LAYER v13 - IMPECCABLE FEED/AUTH END ===== */
/* ============================================================
   POLISH LAYER v11 - IMPECCABLE LISTING
   Goal: 100% Practo.com design fidelity for /show-doctors.
   Enforces THE FLAT-LIST RULE from DESIGN.md:
   - Flat horizontal doctor rows, NOT cards
   - 80px square avatar (6px radius) on left, info right
   - 1px border-bottom as the ONLY separator
   - NO card shadow / NO card background / NO card border-radius
   - Sidebar filters (240px) + main results (1fr)
   - ~5 doctors visible above the fold on desktop
   Additive layer; no markup contract changes.
   ============================================================ */

/* ============================================================
   1. PAGE + LAYOUT GRID (240px sidebar + 1fr results)
   ============================================================ */
.mx-doc-page {
  background: var(--mx-surface-alt);
}
.mx-doc-layout {
  grid-template-columns: 240px 1fr;
  gap: 28px;
  padding: 16px 20px 32px;
  max-width: 1240px;
}
.mx-doc-main {
  min-width: 0;
}
.mx-doc-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--mx-surface);
  border: 1px solid var(--mx-border);
  border-radius: 8px;
  overflow: hidden;
}

/* ============================================================
   2. STICKY RESULTS HEADER (white, 1px bottom border)
   ============================================================ */
.mx-doc-rhead-wrap {
  position: sticky;
  top: 81px; /* stick just below the 81px navbar so it never paints over the searchbar above */
  z-index: 30;
  background: var(--mx-surface);
  border-bottom: 1px solid var(--mx-border);
  box-shadow: none;
}
.mx-doc-rhead {
  max-width: 1240px;
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  background: transparent;
  border-bottom: none;
}
.mx-doc-rhead-left h2 {
  font-size: 18px;
  font-weight: 700;
  color: var(--mx-ink);
  margin: 0 0 2px;
  letter-spacing: -0.01em;
}
.mx-doc-rhead-left p {
  font-size: 13px;
  color: var(--mx-ink-soft);
  margin: 0;
}
.mx-doc-sort-wrap select {
  appearance: none;
  background: var(--mx-surface);
  border: 1px solid var(--mx-border);
  border-radius: 4px;
  padding: 8px 32px 8px 12px;
  font-family: var(--mx-font);
  font-size: 13px;
  font-weight: 500;
  color: var(--mx-ink);
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%2375757A' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}

/* ============================================================
   3. SIDEBAR FILTERS (240px, flat, divider-separated)
   ============================================================ */
.mx-doc-aside {
  background: var(--mx-surface);
  border: 1px solid var(--mx-border);
  border-radius: 8px;
  padding: 16px 18px;
  box-shadow: none;
  position: sticky;
  top: 76px;
  max-height: calc(100vh - 90px);
  overflow-y: auto;
}
.mx-doc-aside-head {
  padding-bottom: 12px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--mx-border);
}
.mx-doc-aside-head h3 {
  font-size: 15px;
  font-weight: 700;
  color: var(--mx-ink);
  margin: 0;
}
.mx-doc-aside-head h3 i {
  color: var(--mx-primary);
  font-size: 13px;
}
.mx-doc-aside-clear {
  font-size: 13px;
  font-weight: 600;
  color: var(--mx-primary);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.mx-doc-aside-clear:hover {
  color: var(--mx-primary-dark);
  background: none;
  text-decoration: underline;
}
.mx-doc-filter {
  padding: 14px 0;
  border-bottom: 1px solid var(--mx-border-light);
}
.mx-doc-filter:last-child {
  border-bottom: none;
  padding-bottom: 4px;
}
.mx-doc-filter-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--mx-ink);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 10px;
}
.mx-doc-filter-title i {
  color: var(--mx-primary);
  font-size: 12px;
}
.mx-doc-filter-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mx-doc-filter-opt {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  color: var(--mx-ink-soft);
  cursor: pointer;
  padding: 2px 0;
}
.mx-doc-filter-opt:hover {
  color: var(--mx-primary-dark);
}
.mx-doc-filter-opt input {
  width: 15px;
  height: 15px;
  accent-color: var(--mx-primary);
  cursor: pointer;
}
/* ============================================================
   4. DOCTOR ROW (THE FLAT-LIST SIGNATURE COMPONENT)
   ============================================================ */
.mx-dcard {
  display: grid;
  grid-template-columns: 96px 1fr 220px;
  gap: 20px;
  align-items: flex-start;
  padding: 20px 20px;
  margin: 0;
  background: var(--mx-surface);
  border: none;
  border-bottom: 1px solid var(--mx-border);
  border-radius: 0;
  box-shadow: none;
  position: relative;
  transition: background 160ms ease;
}
.mx-dcard:last-child {
  border-bottom: none;
}
.mx-dcard:hover {
  background: var(--mx-surface-hover);
  box-shadow: none;
  transform: none;
}
.mx-dcard::before {
  display: none;
}
.mx-dcard:hover::before {
  display: none;
}
.mx-dcard--sponsored {
  background: var(--mx-warning-surface);
}
/* ============================================================
   4a. AVATAR COLUMN (80px square, 6px radius)
   ============================================================ */
.mx-dcard-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 96px;
  flex: 0 0 96px;
}
.mx-dcard-photo-wrap {
  position: relative;
  width: 80px;
  height: 80px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--mx-surface-alt);
  border: 1px solid var(--mx-border);
  box-shadow: none;
}
.mx-dcard-photo {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 6px;
  display: block;
  border: none;
}
.mx-dcard-photo-fallback {
  display: none;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  color: var(--mx-ink-muted);
}
.mx-dcard-photo-wrap.is-placeholder .mx-dcard-photo-fallback {
  display: flex;
}
.mx-dcard-verified {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--mx-success);
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: var(--mx-success-surface);
  padding: 2px 6px;
  border-radius: 999px;
}
.mx-dcard-verified i {
  font-size: 9px;
  color: var(--mx-success);
}
.mx-dcard-viewlink {
  font-size: 12px;
  font-weight: 600;
  color: var(--mx-primary);
  text-decoration: none;
  text-align: center;
  width: 100%;
}
.mx-dcard-viewlink:hover {
  color: var(--mx-primary-dark);
  text-decoration: underline;
}
/* ============================================================
   4b. INFO COLUMN (name, speciality, meta row, clinic)
   ============================================================ */
.mx-dcard-body {
  flex: 1 1 auto;
  min-width: 0;
  padding-right: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mx-dcard-top {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.mx-dcard-name {
  font-family: var(--mx-font);
  font-size: 19px;
  font-weight: 400;
  color: var(--mx-primary);
  text-decoration: none;
  line-height: 1.25;
  margin: 0;
}
.mx-dcard-name:hover {
  color: var(--mx-primary-dark);
  text-decoration: underline;
}
.mx-dcard-check {
  color: var(--mx-primary);
  font-size: 14px;
  display: inline-flex;
  align-items: center;
}
.mx-dcard-fav {
  margin-left: auto;
  cursor: pointer;
  color: var(--mx-ink-muted);
  font-size: 16px;
  padding: 4px;
}
.mx-dcard-fav:hover {
  color: var(--mx-primary);
}
.mx-dcard-fav.is-fav {
  color: var(--mx-primary);
}
.mx-dcard-spec {
  font-size: 14px;
  font-weight: 400;
  color: var(--mx-ink-soft);
  margin: 0;
  line-height: 1.4;
}
.mx-dcard-exp {
  font-size: 13px;
  color: var(--mx-ink-muted);
  margin: 2px 0 0;
}
.mx-dcard-exp-no {
  font-weight: 700;
  color: var(--mx-ink);
}
.mx-dcard-divider {
  display: none;
}
.mx-dcard-clinic {
  font-size: 13px;
  color: var(--mx-ink-muted);
  margin: 4px 0 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.mx-dcard-clinic i {
  color: var(--mx-ink-muted);
  font-size: 11px;
}
/* ============================================================
   4c. META ROW (rating badge, exp, location, stories inline)
   ============================================================ */
.mx-dcard-metarow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}
.mx-dcard-score {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--mx-success);
  color: var(--mx-white);
  font-size: 12px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  line-height: 1.3;
}
.mx-dcard-score i {
  font-size: 10px;
}
.mx-dcard-stories {
  font-size: 12px;
  color: var(--mx-ink-muted);
}
.mx-dcard-meta-dot {
  font-size: 12px;
  color: var(--mx-ink-muted);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.mx-dcard-meta-dot i {
  font-size: 11px;
  color: var(--mx-ink-muted);
}
.mx-dcard-locations {
  color: var(--mx-ink-muted);
}
.mx-dcard-locations-more {
  color: var(--mx-primary);
  font-weight: 600;
  margin-left: 2px;
}
/* ============================================================
   5. ACTIONS COLUMN (fee + Book Appointment + View Profile)
   ============================================================ */
.mx-dcard-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding-left: 16px;
  border-left: 1px solid var(--mx-border);
  min-width: 200px;
}
.mx-dcard-fee-block {
  text-align: left;
  padding-bottom: 6px;
  border-bottom: 1px dashed var(--mx-border);
  margin-bottom: 2px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.mx-dcard-avail {
  font-size: 11px;
  font-weight: 600;
  color: var(--mx-success);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-transform: none;
}
.mx-dcard-avail i {
  font-size: 10px;
}
.mx-dcard-fee-big {
  font-size: 18px;
  font-weight: 700;
  color: var(--mx-ink);
  margin: 2px 0 0;
  line-height: 1.1;
}
.mx-dcard-fee-cap {
  font-size: 11px;
  color: var(--mx-ink-muted);
}
.mx-btn-book {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--mx-font);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border-radius: 4px;
  padding: 9px 14px;
  line-height: 1.2;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
}
.mx-btn-book i {
  font-size: 12px;
}
.mx-btn-book--primary {
  background: var(--mx-primary);
  color: var(--mx-white);
  border: 1px solid var(--mx-primary);
}
.mx-btn-book--primary:hover {
  background: var(--mx-primary-dark);
  border-color: var(--mx-primary-dark);
  color: var(--mx-white);
}
.mx-btn-book--ghost {
  background: var(--mx-surface);
  color: var(--mx-primary);
  border: 1px solid var(--mx-primary);
}
.mx-btn-book--ghost:hover {
  background: var(--mx-primary-surface);
  color: var(--mx-primary-dark);
  border-color: var(--mx-primary-dark);
}
/* ============================================================
   6. SEARCH BAR (compact, white, 1px border)
   ============================================================ */
.mx-doc-searchbar {
  position: relative; /* stacking context — paints above sticky .mx-doc-rhead-wrap during scroll */
  z-index: 40;        /* > rhead-wrap's 30, < navbar's 1000 */
  height: auto;       /* override the abandoned line-6739 height:44px rule that was squashing the section */
  min-height: 0;
  background: var(--mx-primary);
  color: var(--mx-white);
  border-bottom: 1px solid color-mix(in srgb, var(--mx-primary-dark) 60%, var(--mx-ink) 40%);
  padding: 28px 20px 32px;
}
.mx-doc-searchbar-inner {
  max-width: 1240px;
  margin: 0 auto;
}
.mx-doc-searchbar-title {
  margin-bottom: 12px;
}
.mx-doc-searchbar-title h1 {
  font-size: 24px;
  font-weight: 700;
  color: var(--mx-white);
  margin: 0;
  letter-spacing: -0.02em;
}
.mx-doc-searchbar-form {
  background: var(--mx-white);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--mx-radius-pill);
  box-shadow: var(--mx-shadow-cta);
  box-shadow: none;
  padding: 0;
  display: flex;
  align-items: stretch;
  height: 44px;
  max-width: 760px;
}
.mx-doc-searchbar-form:focus-within {
  border-color: var(--mx-primary);
  box-shadow: 0 0 0 3px rgba(44, 183, 223, 0.18);
}
.mx-doc-searchbar-field {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
}
.mx-doc-searchbar-field i {
  color: var(--mx-ink-muted);
  font-size: 14px;
}
.mx-doc-searchbar-field input {
  flex: 1 1 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--mx-font);
  font-size: 14px;
  color: var(--mx-ink);
  padding: 0;
  height: 100%;
}
.mx-doc-searchbar-field input::placeholder {
  color: var(--mx-ink-muted);
}
.mx-doc-searchbar-vline {
  width: 1px;
  background: var(--mx-border);
  flex: 0 0 1px;
  align-self: center;
  height: 22px;
}
.mx-doc-searchbar-btn {
  background: var(--mx-primary);
  color: var(--mx-white);
  border: none;
  border-radius: 0 5px 5px 0;
  padding: 0 24px;
  font-family: var(--mx-font);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  height: 100%;
  align-self: stretch;
  transition: background 160ms ease;
}
.mx-doc-searchbar-btn:hover {
  background: var(--mx-primary-dark);
}
/* ============================================================
   7. SPONSORED BADGE + EMPTY STATE
   ============================================================ */
.mx-dcard-sponsored-badge {
  position: absolute;
  top: 10px;
  right: 14px;
  font-size: 10px;
  font-weight: 600;
  color: var(--mx-warning-dark);
  background: var(--mx-warning-surface);
  padding: 2px 8px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  letter-spacing: 0.03em;
}
.mx-dcard-sponsored-badge i {
  font-size: 9px;
}
.mx-doc-empty {
  text-align: center;
  padding: 80px 20px;
  background: var(--mx-surface);
}
.mx-doc-empty i {
  font-size: 42px;
  color: var(--mx-ink-muted);
  margin-bottom: 12px;
  opacity: 0.4;
}
.mx-doc-empty p {
  font-size: 14px;
  color: var(--mx-ink-muted);
}

/* ============================================================
   8. VIEW MORE
   ============================================================ */
.mx-doc-more {
  text-align: center;
  padding: 24px 0 4px;
}
.mx-doc-more button {
  font-family: var(--mx-font);
  font-size: 14px;
  font-weight: 600;
  color: color-mix(in srgb, var(--mx-primary-darker) 88%, var(--mx-ink) 12%);
  background: var(--mx-surface);
  border: 1px solid var(--mx-primary-darker);
  border-radius: 4px;
  padding: 10px 28px;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}
.mx-doc-more button:hover {
  background: var(--mx-primary-surface);
}

/* ============================================================
   9. RESPONSIVE (single-column under 980px)
   ============================================================ */
@media (max-width: 980px) {
  .mx-doc-layout {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .mx-doc-aside {
    position: static;
    max-height: none;
  }
  .mx-dcard {
    grid-template-columns: 80px 1fr;
    gap: 14px;
    padding: 16px 14px;
  }
  .mx-dcard-actions {
    grid-column: 1 / -1;
    flex-direction: row;
    flex-wrap: wrap;
    border-left: none;
    border-top: 1px dashed var(--mx-border);
    padding-left: 0;
    padding-top: 12px;
    margin-top: 4px;
    align-items: center;
    gap: 12px;
  }
  .mx-dcard-fee-block {
    flex: 1 1 100%;
    border-bottom: none;
    padding-bottom: 0;
  }
  .mx-btn-book {
    flex: 1 1 140px;
    width: auto;
  }
  .mx-dcard-sponsored-badge {
    top: 6px;
    right: 8px;
  }
}

@media (max-width: 560px) {
  .mx-doc-rhead {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .mx-dcard-left {
    width: 72px;
    flex: 0 0 72px;
  }
  .mx-dcard-photo-wrap,
  .mx-dcard-photo {
    width: 72px;
    height: 72px;
  }
  .mx-dcard-name {
    font-size: 17px;
  }
  .mx-doc-searchbar-form {
    flex-wrap: wrap;
    height: auto;
  }
  .mx-doc-searchbar-field {
    flex: 1 1 100%;
    padding: 10px 14px;
  }
  .mx-doc-searchbar-vline {
    display: none;
  }
  .mx-doc-searchbar-btn {
    flex: 1 1 100%;
    border-radius: 0 0 5px 5px;
    padding: 12px;
  }
}

/* ===== END POLISH LAYER v11 - IMPECCABLE LISTING ===== */

/* POLISH LAYER v12 - IMPECCABLE PHARMACY/LABS */
/* Appended additive layer for Practo-class pharmacy & lab listing fidelity. */
/* Additive only. No existing rules modified. */
/* Tokens: brand #28328c, primary #2cb7df, success #0F7244, ink #414146. */

/* ============================================================
   1. PHARMACY + LAB CARDS — Practo flat-row, 1px dividers
   ============================================================ */
.mx-phcard.mx-phcard, .mx-lbcard.mx-lbcard {
  background: var(--mx-surface) !important;
  border: none !important;
  border-bottom: 1px solid var(--mx-border) !important;
  border-radius: 0 !important;
  padding: 24px 0 !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 20px !important;
  margin: 0 !important;
  transition: background 180ms ease !important;
}
.mx-phcard.mx-phcard:hover, .mx-lbcard.mx-lbcard:hover {
  background: var(--mx-surface-alt) !important;
  border-color: var(--mx-border) !important;
  box-shadow: none !important;
  transform: none !important;
}
.mx-ph-grid, .dispLabs {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}

/* Pharmacy logo: 72px square, 1px border, 6px radius */
.mx-phcard-img-wrap {
  width: 72px !important;
  height: 72px !important;
  flex: 0 0 72px !important;
  position: relative !important;
  background: var(--mx-surface-alt) !important;
  border: 1px solid var(--mx-border) !important;
  border-radius: var(--mx-radius-sm) !important;
  overflow: hidden !important;
  margin: 0 !important;
  display: block !important;
  text-decoration: none !important;
}
.mx-phcard-photo {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: var(--mx-radius-sm) !important;
  display: block !important;
}
.mx-phcard-pill { display: none !important; }

/* Lab logo: 72px square, 1px border, 6px radius */
.mx-lbcard-photo-wrap {
  width: 72px !important;
  height: 72px !important;
  flex: 0 0 72px !important;
  background: var(--mx-surface-alt) !important;
  border: 1px solid var(--mx-border) !important;
  border-radius: var(--mx-radius-sm) !important;
  overflow: hidden !important;
  margin: 0 !important;
  display: block !important;
  text-decoration: none !important;
}
.mx-lbcard-photo {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: var(--mx-radius-sm) !important;
  display: block !important;
}
.mx-lbcard-tag { display: none !important; }

/* Card body: name + verified badge + tags + meta + location */
.mx-phcard-body, .mx-lbcard-body {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  padding: 0 !important;
}
.mx-phcard-header, .mx-lbcard-header {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  margin-bottom: 6px !important;
}
.mx-phcard-name, .mx-lbcard-name {
  font-family: var(--mx-font) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  color: var(--mx-ink) !important;
  text-decoration: none !important;
  line-height: 1.3 !important;
  letter-spacing: -0.01em !important;
  margin: 0 !important;
  transition: color 180ms !important;
}
.mx-phcard-name:hover, .mx-lbcard-name:hover {
  color: color-mix(in srgb, var(--mx-primary-darker) 88%, var(--mx-ink) 12%) !important;
  text-decoration: underline !important;
}

/* Verified badge: green check + label (Practo-class) */
.mx-phcard-verified, .mx-lbcard-verified {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-family: var(--mx-font) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--mx-success) !important;
  line-height: 1.4 !important;
}
.mx-phcard-verified i, .mx-lbcard-verified i { font-size: 13px !important; }
.mx-phcard-badge, .mx-lbcard-badge { display: none !important; }

/* Inline tag chips: meta info before address */
.mx-phcard-tags, .mx-lbcard-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin-bottom: 8px !important;
}
.mx-phcard-tag, .mx-lbcard-tag {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 3px 9px !important;
  font-family: var(--mx-font) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--mx-ink-muted) !important;
  background: var(--mx-surface-alt) !important;
  border: 1px solid var(--mx-border) !important;
  border-radius: var(--mx-radius-pill) !important;
  line-height: 1.4 !important;
}
.mx-phcard-tag i, .mx-lbcard-tag i { font-size: 11px !important; color: var(--mx-primary) !important; }

/* Meta rows + location — muted ink, 14px floor */
.mx-phcard-details, .mx-lbcard-meta {
  font-family: var(--mx-font) !important;
  font-size: 14px !important;
  color: var(--mx-ink-muted) !important;
  margin: 0 0 4px !important;
  line-height: 1.5 !important;
}
.mx-phcard-meta {
  font-family: var(--mx-font) !important;
  font-size: 14px !important;
  color: var(--mx-ink-muted) !important;
  margin: 0 0 4px !important;
  line-height: 1.5 !important;
}
.mx-phcard-meta i, .mx-lbcard-meta i {
  color: var(--mx-primary) !important;
  font-size: 13px !important;
  margin-right: 4px !important;
}
.mx-phcard-loc, .mx-lbcard-loc {
  font-family: var(--mx-font) !important;
  font-size: 14px !important;
  color: var(--mx-ink) !important;
  margin: 4px 0 0 !important;
  line-height: 1.5 !important;
}
.mx-phcard-loc i, .mx-lbcard-loc i {
  color: var(--mx-primary) !important;
  font-size: 13px !important;
  margin-right: 4px !important;
}

/* Hide old foot chips now that we have inline tags */
.mx-phcard-foot, .mx-lbcard-foot { display: none !important; }

/* ============================================================
   2. CARD ACTIONS — Practo primary + ghost button stack
   ============================================================ */
.mx-phcard-actions, .mx-lbcard-actions {
  flex: 0 0 180px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 8px !important;
  padding: 4px 0 4px 24px !important;
  border-left: 1px solid var(--mx-border) !important;
  margin: 0 !important;
}
/* D2 fix (Batch B): align .mx-phcard-btn-primary + .mx-lbcard-btn-primary
   with the primary CTA spec — gradient (--mx-gradient), 9999px radius,
   44px height. Replaces the flat --mx-primary-darker fill so the
   "Browse Products" CTA in /all-pharmacies matches /show-doctors. */
.mx-phcard-btn-primary, .mx-lbcard-btn-primary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  min-height: 44px !important;
  padding: 12px 24px !important;
  background: var(--mx-gradient) !important;
  color: var(--mx-white) !important;
  font-family: var(--mx-font) !important;
  font-size: 14px !important;
  font-weight: var(--mx-font-weight-semibold, 600) !important;
  text-decoration: none !important;
  border: none !important;
  border-radius: var(--mx-radius-pill, 9999px) !important;
  cursor: pointer !important;
  box-shadow: 0 4px 14px rgba(2,191,255,.3) !important;
  transition: background 180ms, box-shadow 180ms !important;
}
.mx-phcard-btn-primary:hover, .mx-lbcard-btn-primary:hover,
.mx-phcard-btn-primary:focus-visible, .mx-lbcard-btn-primary:focus-visible {
  background: var(--mx-gradient-hover) !important;
  box-shadow: 0 6px 18px rgba(2,191,255,.4) !important;
  color: var(--mx-white) !important;
  transform: none !important;
}
.mx-phcard-btn-ghost, .mx-lbcard-btn-ghost {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 9px 16px !important;
  background: var(--mx-surface) !important;
  color: color-mix(in srgb, var(--mx-primary-darker) 88%, var(--mx-ink) 12%) !important;
  font-family: var(--mx-font) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  border: 1px solid var(--mx-primary-darker) !important;
  border-radius: var(--mx-radius-sm) !important;
  cursor: pointer !important;
  transition: background 180ms, color 180ms !important;
}
.mx-phcard-btn-ghost:hover, .mx-lbcard-btn-ghost:hover {
  background: var(--mx-primary-surface) !important;
  color: var(--mx-primary-darker) !important;
}

/* Hide old single CTA buttons */
.mx-phcard .mx-phcard-btn:not(.mx-phcard-btn-primary):not(.mx-phcard-btn-ghost),
.mx-lbcard .mx-btn-book:not(.mx-lbcard-btn-primary):not(.mx-lbcard-btn-ghost) { display: none !important; }

/* ============================================================
   3. LAB PRICE ROW — clean Practo-class pricing
   ============================================================ */
.mx-lbcard-price-row {
  display: flex !important;
  align-items: baseline !important;
  gap: 8px !important;
  margin-top: 8px !important;
}
.mx-lbcard-price {
  font-family: var(--mx-font) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--mx-ink) !important;
  line-height: 1.2 !important;
}
.mx-lbcard-mrp {
  font-family: var(--mx-font) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: var(--mx-ink-muted) !important;
  text-decoration: line-through !important;
}
.mx-lbcard-off {
  font-family: var(--mx-font) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--mx-success) !important;
}

/* ============================================================
   4. TRUST BADGES — Practo-class with green check for verified
   ============================================================ */
.mx-ph-trust-ico, .mx-lb-trust-ico {
  flex: 0 0 40px !important;
  width: 40px !important;
  height: 40px !important;
  background: var(--mx-success-surface) !important;
  color: var(--mx-success) !important;
}
.mx-ph-trust-text strong, .mx-lb-trust-text strong {
  font-size: 14px !important;
  color: var(--mx-ink) !important;
}

/* ============================================================
   5. POPULAR CATEGORIES GRID (pharmacy) — flat cards, 12px radius
   ============================================================ */
.mx-ph-cats {
  padding: 60px 0 !important;
  background: var(--mx-surface) !important;
}
.mx-ph-cats-inner {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
}
.mx-ph-cats-head {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  margin-bottom: 28px !important;
  gap: 16px !important;
}
.mx-ph-cats-head-text { flex: 1 1 auto !important; }
.mx-ph-cats-eyebrow {
  display: inline-block !important;
  font-family: var(--mx-font) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: color-mix(in srgb, var(--mx-primary-darker) 88%, var(--mx-ink) 12%) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  margin-bottom: 6px !important;
}
.mx-ph-cats-title {
  font-family: var(--mx-font) !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  color: var(--mx-ink) !important;
  margin: 0 0 4px !important;
  line-height: 1.3 !important;
}
.mx-ph-cats-sub {
  font-family: var(--mx-font) !important;
  font-size: 14px !important;
  color: var(--mx-ink-muted) !important;
  margin: 0 !important;
}
.mx-ph-cats-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 16px !important;
}
.mx-ph-cat {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 16px !important;
  background: var(--mx-surface) !important;
  border: 1px solid var(--mx-border) !important;
  border-radius: var(--mx-radius-card) !important;
  text-decoration: none !important;
  box-shadow: none !important;
  transition: border-color 180ms, box-shadow 180ms !important;
}
.mx-ph-cat:hover {
  border-color: var(--mx-primary) !important;
  box-shadow: 0 2px 8px rgba(44, 183, 223, 0.10) !important;
}
.mx-ph-cat-ico {
  flex: 0 0 44px !important;
  width: 44px !important;
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--mx-primary-surface) !important;
  color: var(--mx-primary-dark) !important;
  border-radius: var(--mx-radius-sm) !important;
  font-size: 18px !important;
}
.mx-ph-cat-text {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
}
.mx-ph-cat-text strong {
  font-family: var(--mx-font) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--mx-ink) !important;
  line-height: 1.3 !important;
  margin-bottom: 2px !important;
}
.mx-ph-cat-text span {
  font-family: var(--mx-font) !important;
  font-size: 13px !important;
  color: var(--mx-ink-muted) !important;
  line-height: 1.4 !important;
}

/* ============================================================
   6. HOW IT WORKS (labs) — 3-step flat section
   ============================================================ */
.mx-lb-how {
  padding: 60px 0 !important;
  background: var(--mx-surface-alt) !important;
}
.mx-lb-how-inner {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
}
.mx-lb-how-head {
  text-align: center !important;
  margin-bottom: 36px !important;
}
.mx-lb-how-head-text { max-width: 640px !important; margin: 0 auto !important; }
.mx-lb-how-eyebrow {
  display: inline-block !important;
  font-family: var(--mx-font) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: color-mix(in srgb, var(--mx-primary-darker) 88%, var(--mx-ink) 12%) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  margin-bottom: 6px !important;
}
.mx-lb-how-title {
  font-family: var(--mx-font) !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  color: var(--mx-ink) !important;
  margin: 0 0 6px !important;
  line-height: 1.3 !important;
}
.mx-lb-how-sub {
  font-family: var(--mx-font) !important;
  font-size: 14px !important;
  color: var(--mx-ink-soft) !important;
  margin: 0 !important;
}
.mx-lb-how-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
}
.mx-lb-how-step {
  position: relative !important;
  padding: 28px 24px !important;
  background: var(--mx-surface) !important;
  border: 1px solid var(--mx-border) !important;
  border-radius: var(--mx-radius-card) !important;
  text-align: center !important;
  box-shadow: none !important;
  transition: border-color 180ms !important;
}
.mx-lb-how-step:hover { border-color: var(--mx-primary) !important; }
.mx-lb-how-num {
  position: absolute !important;
  top: 16px !important;
  right: 20px !important;
  font-family: var(--mx-font) !important;
  font-size: 36px !important;
  font-weight: 800 !important;
  color: var(--mx-surface-hover) !important;
  line-height: 1 !important;
}
.mx-lb-how-icon {
  width: 56px !important;
  height: 56px !important;
  margin: 0 auto 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--mx-primary-surface) !important;
  color: var(--mx-primary-dark) !important;
  border-radius: var(--mx-radius-pill) !important;
  font-size: 22px !important;
}
.mx-lb-how-step h4 {
  font-family: var(--mx-font) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--mx-ink) !important;
  margin: 0 0 6px !important;
}
.mx-lb-how-step p {
  font-family: var(--mx-font) !important;
  font-size: 14px !important;
  color: var(--mx-ink-muted) !important;
  margin: 0 !important;
  line-height: 1.5 !important;
}

/* ============================================================
   7. LISTING HEAD + EMPTY STATES — clean Practo row head
   ============================================================ */
.mx-ph-rhead h2, .mx-doc-rhead h2 {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--mx-ink) !important;
}
.mx-ph-rhead p, .mx-doc-rhead p {
  font-size: 14px !important;
  color: var(--mx-ink-soft) !important;
}
.mx-ph-rhead-sort, .mx-doc-rhead-sort {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 7px 12px !important;
  background: var(--mx-surface) !important;
  border: 1px solid var(--mx-border) !important;
  border-radius: var(--mx-radius-sm) !important;
  font-family: var(--mx-font) !important;
  font-size: 13px !important;
  color: var(--mx-ink) !important;
}
.mx-ph-rhead-sort i, .mx-doc-rhead-sort i { color: var(--mx-primary) !important; }
.mx-doc-rhead-sort select {
  border: none !important;
  background: transparent !important;
  font-family: var(--mx-font) !important;
  font-size: 13px !important;
  color: var(--mx-ink) !important;
  outline: none !important;
  cursor: pointer !important;
}

/* Empty states */
.mx-ph-empty, .mx-lb-empty {
  text-align: center !important;
  padding: 64px 24px !important;
  background: var(--mx-surface) !important;
  border: 1px dashed var(--mx-border) !important;
  border-radius: var(--mx-radius-card) !important;
}
.mx-ph-empty i, .mx-lb-empty i {
  font-size: 40px !important;
  color: var(--mx-gray-400) !important;
  margin-bottom: 14px !important;
  display: block !important;
}
.mx-ph-empty p, .mx-lb-empty p {
  font-family: var(--mx-font) !important;
  font-size: 15px !important;
  color: var(--mx-ink-muted) !important;
  margin: 0 !important;
}

/* View More button */
.mx-ph-more button, .mx-doc-more button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 10px 28px !important;
  background: var(--mx-surface) !important;
  color: color-mix(in srgb, var(--mx-primary-darker) 88%, var(--mx-ink) 12%) !important;
  border: 1px solid var(--mx-primary-darker) !important;
  font-family: var(--mx-font) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  border-radius: var(--mx-radius-sm) !important;
  cursor: pointer !important;
  background-image: none !important;
  box-shadow: none !important;
  transition: background 180ms, color 180ms !important;
}
.mx-ph-more button:hover, .mx-doc-more button:hover {
  background: var(--mx-primary-surface) !important;
}

/* ============================================================
   8. LAB PACKAGES — flat cards with Practo pricing pattern
   ============================================================ */
.mx-lb-pkg {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 20px !important;
  background: var(--mx-surface) !important;
  border: 1px solid var(--mx-border) !important;
  border-radius: var(--mx-radius-card) !important;
  text-decoration: none !important;
  box-shadow: none !important;
  transition: border-color 180ms, box-shadow 180ms !important;
}
.mx-lb-pkg:hover {
  border-color: var(--mx-primary) !important;
  box-shadow: 0 2px 8px rgba(44, 183, 223, 0.10) !important;
}
.mx-lb-pkg-tag {
  align-self: flex-start !important;
  display: inline-block !important;
  padding: 3px 10px !important;
  margin-bottom: 12px !important;
  background: var(--mx-primary-surface) !important;
  color: color-mix(in srgb, var(--mx-primary-darker) 88%, var(--mx-ink) 12%) !important;
  font-family: var(--mx-font) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  border-radius: var(--mx-radius-pill) !important;
}
.mx-lb-pkg h4 {
  font-family: var(--mx-font) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--mx-ink) !important;
  margin: 0 0 4px !important;
}
.mx-lb-pkg-desc {
  font-family: var(--mx-font) !important;
  font-size: 13px !important;
  color: var(--mx-ink-muted) !important;
  margin: 0 0 16px !important;
}
.mx-lb-pkg-foot {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-top: auto !important;
  padding-top: 12px !important;
  border-top: 1px solid var(--mx-border) !important;
}
.mx-lb-pkg-price {
  font-family: var(--mx-font) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--mx-ink) !important;
}
.mx-lb-pkg-cta {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-family: var(--mx-font) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: color-mix(in srgb, var(--mx-primary-darker) 88%, var(--mx-ink) 12%) !important;
}

/* ============================================================
   9. ASIDE FILTER SIDEBAR — flat Practo-class refinement panel
   ============================================================ */
.mx-ph-aside-card, .mx-doc-aside {
  background: var(--mx-surface) !important;
  border: 1px solid var(--mx-border) !important;
  border-radius: var(--mx-radius-card) !important;
  padding: 20px !important;
  box-shadow: none !important;
}
.mx-ph-aside-title, .mx-doc-aside-head h3 {
  font-family: var(--mx-font) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--mx-ink) !important;
  margin: 0 0 14px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid var(--mx-border) !important;
}
.mx-ph-aside-title i, .mx-doc-aside-head h3 i {
  color: var(--mx-primary) !important;
  margin-right: 6px !important;
}
.mx-filter-sect, .mx-doc-filter {
  padding-bottom: 14px !important;
  margin-bottom: 14px !important;
  border-bottom: 1px solid var(--mx-border-light) !important;
}
.mx-filter-sect:last-child, .mx-doc-filter:last-child {
  border-bottom: none !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
.mx-filter-label, .mx-doc-filter-title {
  font-family: var(--mx-font) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--mx-ink) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  margin: 0 0 10px !important;
}
.mx-filter-label i, .mx-doc-filter-title i { color: var(--mx-primary) !important; margin-right: 4px !important; }
.mx-filter-opt, .mx-doc-filter-opt {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 0 !important;
  font-family: var(--mx-font) !important;
  font-size: 14px !important;
  color: var(--mx-ink) !important;
  cursor: pointer !important;
}
.mx-filter-opt input, .mx-doc-filter-opt input {
  width: 16px !important;
  height: 16px !important;
  accent-color: var(--mx-primary) !important;
  cursor: pointer !important;
}
.mx-filter-opt-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  height: 24px !important;
  background: var(--mx-primary-surface) !important;
  color: var(--mx-primary) !important;
  border-radius: var(--mx-radius-sm) !important;
  font-size: 11px !important;
}
.mx-filter-opt-text { flex: 1 !important; }
.mx-filter-range {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-top: 6px !important;
}
.mx-filter-range-input {
  flex: 1 !important;
  accent-color: var(--mx-primary) !important;
  cursor: pointer !important;
}
.mx-filter-range-val {
  font-family: var(--mx-font) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: color-mix(in srgb, var(--mx-primary-darker) 88%, var(--mx-ink) 12%) !important;
  min-width: 60px !important;
  text-align: right !important;
}
.mx-ph-aside-promo, .mx-doc-aside-promo {
  margin-top: 16px !important;
  padding: 18px !important;
  background: var(--mx-primary-surface) !important;
  border-radius: var(--mx-radius-card) !important;
  text-align: center !important;
}
.mx-ph-aside-promo-ico, .mx-doc-aside-promo-ico {
  width: 44px !important;
  height: 44px !important;
  margin: 0 auto 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--mx-surface) !important;
  color: var(--mx-primary-dark) !important;
  border-radius: var(--mx-radius-pill) !important;
  font-size: 18px !important;
}
.mx-ph-aside-promo h4, .mx-doc-aside-promo h4 {
  font-family: var(--mx-font) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--mx-ink) !important;
  margin: 0 0 6px !important;
}
.mx-ph-aside-promo p, .mx-doc-aside-promo p {
  font-family: var(--mx-font) !important;
  font-size: 13px !important;
  color: var(--mx-ink-soft) !important;
  margin: 0 0 12px !important;
}
.mx-ph-aside-promo-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 16px !important;
  background: var(--mx-primary-darker) !important;
  color: var(--mx-white) !important;
  font-family: var(--mx-font) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  border-radius: var(--mx-radius-sm) !important;
  background-image: none !important;
  box-shadow: none !important;
  transition: background 180ms !important;
}
.mx-ph-aside-promo-btn:hover { background: var(--mx-primary-dark) !important; }

/* ============================================================
   10. RESPONSIVE — flat-list mobile stack
   ============================================================ */
@media (max-width: 980px) {
  .mx-ph-cats-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .mx-lb-how-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 760px) {
  .mx-phcard.mx-phcard, .mx-lbcard.mx-lbcard {
    flex-wrap: wrap !important;
    padding: 18px 0 !important;
    gap: 14px !important;
  }
  .mx-phcard-body, .mx-lbcard-body { flex: 1 1 100% !important; order: 2 !important; }
  .mx-phcard-actions, .mx-lbcard-actions {
    flex: 1 1 100% !important;
    flex-direction: row !important;
    padding: 14px 0 0 !important;
    border-left: none !important;
    border-top: 1px solid var(--mx-border) !important;
    margin-top: 4px !important;
    order: 3 !important;
  }
  .mx-phcard-actions > *, .mx-lbcard-actions > * { flex: 1 !important; }
  .mx-phcard-img-wrap, .mx-lbcard-photo-wrap {
    width: 64px !important;
    height: 64px !important;
    flex: 0 0 64px !important;
  }
  .mx-ph-layout, .mx-doc-layout { flex-direction: column !important; }
  .mx-ph-aside, .mx-doc-aside {
    position: static !important;
    flex: 1 1 auto !important;
    width: 100% !important;
  }
  .mx-ph-cats-grid, .mx-lb-how-grid, .mx-lb-packages-grid { grid-template-columns: 1fr !important; }
  .mx-ph-cats { padding: 40px 0 !important; }
  .mx-lb-how { padding: 40px 0 !important; }
  .mx-ph-cats-head, .mx-lb-packages-head { flex-direction: column !important; align-items: flex-start !important; }
}

/* ===== POLISH LAYER v12 - IMPECCABLE PHARMACY/LABS END ===== */

/* ============================================================
   DEPTH POLISH v1 - BRILLIANT — HEALTH FEED
   Premium two-layer shadows for featured/grid/sidebar.
   Respects prefers-reduced-motion.
   ============================================================ */

/* ---------- FEATURED ARTICLE CARD: lg at rest, 2xl on hover with lift ---------- */
.mxhf-feature {
  box-shadow: var(--mx-shadow-lg) !important;
  transition: box-shadow 320ms cubic-bezier(0.16, 1, 0.3, 1),
              border-color 320ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 320ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.mxhf-feature:hover {
  box-shadow: var(--mx-shadow-2xl) !important;
}

/* ---------- ARTICLE GRID CARDS: md at rest, xl on hover with lift ---------- */
.mxhf-grid .mx-blog-card {
  box-shadow: var(--mx-shadow-md) !important;
  transition: box-shadow 300ms cubic-bezier(0.16, 1, 0.3, 1),
              border-color 300ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 300ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.mxhf-grid .mx-blog-card:hover {
  box-shadow: var(--mx-shadow-xl) !important;
}

/* ---------- CATEGORY TAGS: xs ambient ---------- */
.mx-blog-card .mx-blog-cat,
.mxhf-feature .mx-blog-cat {
  box-shadow: var(--mx-shadow-xs) !important;
}

/* ---------- SIDEBAR CARDS: md ambient ---------- */
.mx-feed-side-card,
.mx-feed-side-promo {
  box-shadow: var(--mx-shadow-md) !important;
  transition: box-shadow 300ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* ---------- HEALTH FEED search form: lg at rest, xl on focus ---------- */
.mxhf-top-search {
  box-shadow: var(--mx-shadow-md) !important;
  transition: box-shadow 280ms cubic-bezier(0.16, 1, 0.3, 1),
              border-color 280ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.mxhf-top-search:focus-within {
  box-shadow: var(--mx-shadow-focus), var(--mx-shadow-lg) !important;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .mxhf-feature,
  .mxhf-grid .mx-blog-card,
  .mx-feed-side-card,
  .mx-feed-side-promo,
  .mxhf-top-search {
    transition: none !important;
  }
  .mxhf-feature:hover,
  .mxhf-grid .mx-blog-card:hover {
    transform: none !important;
  }
}

/* ===== DEPTH POLISH v1 - BRILLIANT — HEALTH FEED END ===== */
/* ============================================================
   DEPTH POLISH v1 - BRILLIANT PHARMACY/LABS
   Two-layer premium shadows + ease-out-expo transforms.
   Strict: no shadows on flat listing rows (DESIGN.md flat-list rule).
   ============================================================ */

/* 1. HERO SEARCH BAR — floating, premium feel */
.mx-ph-top-bar,
.mx-lb-top-bar {
  box-shadow: var(--mx-shadow-lg) !important;
  transition: box-shadow 300ms cubic-bezier(0.16, 1, 0.3, 1),
              border-color 300ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.mx-ph-top-bar:focus-within,
.mx-lb-top-bar:focus-within {
  box-shadow: var(--mx-shadow-xl) !important;
}

/* 2. TRUST BADGES — subtle lift + ring */
.mx-ph-trust-item,
.mx-lb-trust-item {
  box-shadow: var(--mx-shadow-sm), var(--mx-shadow-ring) !important;
  transition: box-shadow 280ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 280ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.mx-ph-trust-item:hover,
.mx-lb-trust-item:hover {
  box-shadow: var(--mx-shadow-md), var(--mx-shadow-ring) !important;
}

/* 3. POPULAR CATEGORY / HEALTH PACKAGE CARDS — signature lift */
.mx-ph-cat,
.mx-lb-pkg {
  box-shadow: var(--mx-shadow-md) !important;
  transition: box-shadow 320ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 320ms cubic-bezier(0.16, 1, 0.3, 1),
              border-color 320ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.mx-ph-cat:hover,
.mx-lb-pkg:hover {
  box-shadow: var(--mx-shadow-xl) !important;
}

/* 4. HOW IT WORKS STEPS — quiet depth */
.mx-ph-how-step,
.mx-lb-how-step {
  box-shadow: var(--mx-shadow-sm) !important;
  transition: box-shadow 280ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 280ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.mx-ph-how-step:hover,
.mx-lb-how-step:hover {
  box-shadow: var(--mx-shadow-md) !important;
}

/* 5. PRIMARY CTA BUTTONS — brand-tinted glow */
.mx-ph-top-btn,
.mx-lb-top-btn,
.mx-ph-upload-btn,
.mx-ph-aside-promo-btn {
  box-shadow: var(--mx-shadow-primary) !important;
  transition: box-shadow 280ms cubic-bezier(0.16, 1, 0.3, 1),
              background 220ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 280ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.mx-ph-top-btn:hover,
.mx-lb-top-btn:hover,
.mx-ph-upload-btn:hover,
.mx-ph-aside-promo-btn:hover {
  box-shadow: var(--mx-shadow-primary-lg) !important;
}

/* 6. SECONDARY / GHOST BUTTONS — quiet restraint */
.mx-seeall,
.mx-doc-aside-clear,
.mx-filter-toggle {
  box-shadow: var(--mx-shadow-sm) !important;
  transition: box-shadow 260ms cubic-bezier(0.16, 1, 0.3, 1),
              color 220ms cubic-bezier(0.16, 1, 0.3, 1),
              border-color 260ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.mx-seeall:hover,
.mx-doc-aside-clear:hover,
.mx-filter-toggle:hover {
  box-shadow: var(--mx-shadow-md) !important;
}

/* 7. FILTER SIDEBAR — subtle panel */
.mx-ph-aside-card,
.mx-ph-aside-promo,
.mx-doc-aside,
.mx-doc-aside-promo {
  box-shadow: var(--mx-shadow-sm) !important;
}

/* 8. SEARCH / FILTER HEADER — depth when sticky */
.mx-doc-rhead-wrap,
.mx-doc-rhead {
  box-shadow: var(--mx-shadow-sm) !important;
}

/* 9. SPONSORED / PACKAGE TAG BADGES — barely-there depth */
.mx-lb-pkg-tag,
.mx-sponsored,
.mx-ph-trust-ico,
.mx-lb-trust-ico,
.mx-ph-cat-ico,
.mx-lb-how-icon {
  box-shadow: var(--mx-shadow-xs) !important;
}

/* 10. PAGINATION — active page gets brand glow */
.mx-pagination .active,
.mx-pagination .active span {
  box-shadow: var(--mx-shadow-primary) !important;
}

/* ============================================================
   Reduced motion — disable transforms, keep colors
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .mx-ph-top-bar,
  .mx-lb-top-bar,
  .mx-ph-trust-item,
  .mx-lb-trust-item,
  .mx-ph-cat,
  .mx-lb-pkg,
  .mx-ph-how-step,
  .mx-lb-how-step,
  .mx-ph-top-btn,
  .mx-lb-top-btn,
  .mx-ph-upload-btn,
  .mx-ph-aside-promo-btn,
  .mx-seeall,
  .mx-doc-aside-clear,
  .mx-filter-toggle {
    transform: none !important;
    transition: box-shadow 200ms linear !important;
  }
}

/* ===== DEPTH POLISH v1 - BRILLIANT PHARMACY/LABS END ===== */

/* ===== Booking Confirmation Page ===== */
.mxConfirm-wrap{max-width:680px;margin:0 auto;padding:48px 20px 64px}
.mxConfirm-card{background:var(--mx-surface);border:1px solid var(--mx-border);border-radius:var(--mx-radius-xl);padding:48px 40px;text-align:center;box-shadow:var(--mx-shadow-sm)}
.mxConfirm-check{width:80px;height:80px;border-radius:50%;background:var(--mx-success-surface);display:flex;align-items:center;justify-content:center;margin:0 auto 24px}
.mxConfirm-check i{font-size:40px;color:var(--mx-success)}
.mxConfirm-title{font-family:var(--mx-font);font-size:28px;font-weight:800;color:var(--mx-ink-deep);margin:0 0 8px;letter-spacing:-.02em}
.mxConfirm-sub{font-family:var(--mx-font);font-size:15px;color:var(--mx-ink-muted);margin:0 0 32px;line-height:1.5}
.mxConfirm-detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;padding:24px;background:var(--mx-surface-alt);border-radius:var(--mx-radius-lg);margin-bottom:32px;text-align:left}
.mxConfirm-detail{display:flex;flex-direction:column;gap:4px}
.mxConfirm-detail-label{font-family:var(--mx-font);font-size:12px;font-weight:600;color:var(--mx-ink-muted);text-transform:uppercase;letter-spacing:.04em}
.mxConfirm-detail-value{font-family:var(--mx-font);font-size:16px;font-weight:700;color:var(--mx-ink-deep)}
.mxConfirm-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
@media(max-width:600px){.mxConfirm-card{padding:32px 20px}.mxConfirm-detail-grid{grid-template-columns:1fr}}

/* =====================================================================
   W2A PUBLIC-SURFACE ALIGNMENT LAYER (appended by Wave 2A worker)
   Purpose: harmonize legacy page-scoped button classes with the W1
   mx-btn contract WITHOUT removing them (they carry page-scoped variants
   and some are bound by JS). Token-only — no hardcoded hex/px.
   Markup now pairs legacy class + mx-btn variant; this layer keeps
   legacy metrics aligned to W1 tokens where they diverge.
   ===================================================================== */

/* --- report_test (lab_test_mx.css owns base; align metrics) --- */
.mxRep-btn-primary.mx-btn, .mxRep-btn-ghost.mx-btn {
  font-size: var(--mx-text-base);
  font-weight: var(--mx-font-weight-semibold);
  border-radius: var(--mx-radius-btn);
  padding: 10px 18px;
  box-shadow: none;
  transition: background var(--mx-duration-base) var(--mx-ease-standard),
              color var(--mx-duration-base) var(--mx-ease-standard),
              box-shadow var(--mx-duration-base) var(--mx-ease-standard);
}
.mxRep-btn-primary.mx-btn:hover { box-shadow: var(--mx-shadow-primary); }
.mxRep-btn-ghost.mx-btn { border: 1px solid var(--mx-border); background: var(--mx-surface); color: var(--mx-ink); }
.mxRep-btn-ghost.mx-btn:hover { background: var(--mx-surface-hover); border-color: var(--mx-primary); color: var(--mx-primary-dark); }
.mxRep-btn-ghost.mx-btn:disabled { opacity: .45; cursor: not-allowed; }

/* --- prescription_status --- */
.mx-ps-btn-primary.mx-btn, .mx-ps-btn-outline.mx-btn, .mx-ps-btn-danger.mx-btn {
  font-size: var(--mx-text-base);
  font-weight: var(--mx-font-weight-semibold);
  border-radius: var(--mx-radius-btn);
  padding: 10px 18px;
}

/* --- about page CTAs (scoped hero colors intentional; align metrics only) --- */
.mxHome-btn.mx-btn {
  font-size: var(--mx-text-base);
  font-weight: var(--mx-font-weight-semibold);
  border-radius: var(--mx-radius-btn);
  padding: 10px 18px;
  display: inline-flex;
  align-items: center;
  gap: var(--mx-space-2);
  transition: background var(--mx-duration-base) var(--mx-ease-standard),
              color var(--mx-duration-base) var(--mx-ease-standard);
}

/* --- listing cards: pharmacy / labs / doctors --- */
.mx-phcard-btn-primary.mx-btn, .mx-phcard-btn-ghost.mx-btn,
.mx-lbcard-btn-primary.mx-btn, .mx-lbcard-btn-ghost.mx-btn {
  font-size: var(--mx-text-base);
  font-weight: var(--mx-font-weight-semibold);
  border-radius: var(--mx-radius-btn);
  padding: 10px 18px;
}
.mx-btn-book.mx-btn { border-radius: var(--mx-radius-btn); }
.mx-btn-book.mx-btn-book--ghost.mx-btn-secondary { background: var(--mx-surface); color: var(--mx-ink); border: 1px solid var(--mx-border); }

/* --- booking flows (appointment_booking + billing_detail) --- */
/* BookingBtn tokens already W1-aligned; pair-rule keeps shape when mx-btn
   coexists (mx-btn display:inline-flex + BookingBtn padding coexist fine).
   w-full + mx-btn: ensure full-width payment buttons stay block-level. */
.BookingBtn.mx-btn { border-radius: var(--mx-radius-btn); }
.w-full.mx-btn { width: 100%; }

/* --- lab review form (repaired W2A) --- */
.mx-lbreview .mx-input { border-radius: var(--mx-radius-input); }

/* ============================================================
   PASS B PUBLIC REFINEMENT LAYER (Pass B worker — ledger P1-2/P1-3/P1-6/P1-7/P2/P3)
   Design-only overrides; all legacy selectors kept, hooks untouched.
   ============================================================ */

/* --- S3: machine-data mono utility (token-based) --- */
.mx-mono {
  font-family: var(--mx-font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

/* ============================================================
   ARCHETYPE 1 — PHARMACY LIST: horizontal identity rows
   (identity left | service facts center | actions right)
   Differentiates from doctor rows (no fee rail) and lab rows (no price rail).
   ============================================================ */
.mx-phcard {
  flex-direction: row;
  align-items: stretch;
  flex-wrap: wrap;
  border-radius: var(--mx-radius-lg);
  padding: var(--mx-space-4);
  gap: var(--mx-space-4);
}
.mx-phcard-img-wrap {
  width: 116px;
  height: 116px;
  flex: 0 0 116px;
  border-radius: var(--mx-radius);
  overflow: hidden;
  background: var(--mx-surface-alt);
  border: 1px solid var(--mx-border-light);
}
.mx-phcard-body {
  flex: 1 1 240px;
  min-width: 0;
  padding: 0;
  gap: 2px;
  justify-content: center;
}
.mx-phcard-header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.mx-phcard-name { font-size: var(--mx-text-lg); }
.mx-phcard-verified {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--mx-text-xs); font-weight: 700;
  color: var(--mx-success); background: var(--mx-success-surface);
  border-radius: var(--mx-radius-pill); padding: 3px 10px;
}
.mx-phcard-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 8px; }
.mx-phcard-tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--mx-text-xs); font-weight: 600;
  color: var(--mx-ink-muted); background: var(--mx-surface-alt);
  border: 1px solid var(--mx-border-light);
  border-radius: var(--mx-radius-pill); padding: 3px 10px;
}
.mx-phcard-tag i { font-size: 10px; color: var(--mx-primary); }
.mx-phcard-details { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.mx-phcard-meta { font-size: var(--mx-text-sm); }
.mx-phcard-loc { margin-top: 2px; }
.mx-phcard-actions {
  flex: 0 0 168px;
  display: flex; flex-direction: column; justify-content: center; gap: 8px;
  padding: 0; margin: 0;
  border-left: 1px solid var(--mx-border-light);
  padding-left: var(--mx-space-4);
}
.mx-phcard-actions > a { width: 100%; text-align: center; }
@media (max-width: 860px) {
  .mx-phcard { flex-direction: column; }
  .mx-phcard-img-wrap { width: 100%; height: 150px; flex-basis: auto; }
  .mx-phcard-actions {
    flex-direction: row; border-left: 0; padding-left: 0;
    border-top: 1px solid var(--mx-border-light); padding-top: var(--mx-space-3);
  }
}

/* ============================================================
   ARCHETYPE 2 — LAB LIST: catalog rows with price rail
   (photo | test identity + logistics | price block | actions)
   ============================================================ */
.mx-lbcard {
  display: grid;
  grid-template-columns: 84px minmax(0,1fr) auto auto;
  gap: var(--mx-space-4);
  align-items: center;
  border-radius: var(--mx-radius-lg);
  padding: var(--mx-space-4) var(--mx-space-5);
}
.mx-lbcard-photo-wrap { display: block; width: 84px; height: 84px; }
.mx-lbcard-photo { width: 84px; height: 84px; border-radius: var(--mx-radius); }
.mx-lbcard-body { min-width: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; justify-content: center; }
.mx-lbcard-header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mx-lbcard-name { font-size: var(--mx-text-lg); }
.mx-lbcard-verified {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--mx-text-xs); font-weight: 700;
  color: var(--mx-success); background: var(--mx-success-surface);
  border-radius: var(--mx-radius-pill); padding: 3px 10px;
}
.mx-lbcard-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 5px 0 6px; }
.mx-lbcard-tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--mx-text-xs); font-weight: 600;
  color: var(--mx-ink-muted); background: var(--mx-surface-alt);
  border: 1px solid var(--mx-border-light);
  border-radius: var(--mx-radius-pill); padding: 3px 10px;
}
.mx-lbcard-tag i { font-size: 10px; color: var(--mx-primary); }
.mx-lbcard-price-row {
  margin: 4px 0 0; flex-direction: column; align-items: flex-end; gap: 2px;
}
.mx-lbcard-price { font-family: var(--mx-font-mono); font-variant-numeric: tabular-nums; font-size: var(--mx-text-xl); }
.mx-lbcard-mrp { font-size: var(--mx-text-xs); }
.mx-lbcard-actions {
  display: flex; flex-direction: column; justify-content: center; gap: 8px;
  margin: 0; padding: 0; border-left: 1px solid var(--mx-border-light);
  padding-left: var(--mx-space-4);
}
@media (max-width: 980px) {
  .mx-lbcard { grid-template-columns: 72px minmax(0,1fr); }
  .mx-lbcard-photo-wrap, .mx-lbcard-photo { width: 72px; height: 72px; }
  .mx-lbcard-price-row {
    grid-column: 2; flex-direction: row; align-items: baseline; gap: 8px;
    border-top: 1px dashed var(--mx-border-light); padding-top: 8px; margin-top: 6px;
  }
  .mx-lbcard-actions {
    grid-column: 1 / -1; flex-direction: row; border-left: 0; padding-left: 0;
    border-top: 1px solid var(--mx-border-light); padding-top: var(--mx-space-3);
  }
  .mx-lbcard-actions > a { flex: 1; }
}

/* ============================================================
   ARCHETYPE 3 — BLOGS: featured article + supporting grid
   ============================================================ */
.mx-blog-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; }
.mx-blog-card { border-radius: var(--mx-radius-lg); }
.mx-blog-card:first-child { grid-column: 1 / -1; }
.mx-blog-card:first-child .mx-blog-img { height: 320px; }
.mx-blog-card:first-child .mx-blog-title { font-size: 22px; font-weight: 700; line-height: 1.3; }
.mx-blog-card:first-child .mx-blog-excerpt { font-size: 15px; -webkit-line-clamp: 3; }
.mx-blog-card:first-child .mx-blog-body { padding: 22px 26px 24px; }

/* result counts in headers (S9) */
.mx-doc-rhead-left h2 .mx-countnum,
.mx-ph-rhead-text h2 .mx-ph-countnum { font-variant-numeric: tabular-nums; }

/* ============================================================
   SEO LANDINGS (P1-6) — distinct registers per landing type
   speciality = calm catalog (flat surface, ink hero, left-aligned)
   city = directory feel (bordered hero, chip-first)
   ============================================================ */
.mx-seo-hero {
  background: var(--mx-surface-alt);
  padding: 56px 0 44px;
  text-align: left;
  border-bottom: 1px solid var(--mx-border-light);
}
.mx-seo-hero::before { display: none; }
.mx-seo-hero h1 { font-size: 34px; color: var(--mx-ink); letter-spacing: -0.015em; text-align: left; }
.mx-seo-hero p { color: var(--mx-ink-soft); font-size: 16px; text-align: left; }
.mx-seo-grid { grid-template-columns: 1fr; gap: 0; }
.mx-seo-card {
  background: var(--mx-surface);
  border: 0;
  border-bottom: 1px solid var(--mx-border-light);
  border-radius: 0;
  padding: 20px 8px;
  gap: 18px;
  align-items: center;
  transition: background var(--mx-transition);
}
.mx-seo-card:hover { background: var(--mx-surface-alt); border-color: var(--mx-border-light); box-shadow: none; }
.mx-seo-card img { width: 64px; height: 64px; }
.mx-seo-card-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mx-seo-card h5 { font-size: 17px; margin: 0; }
.mx-seo-card .spec { font-size: 14px; color: color-mix(in srgb, var(--mx-primary-darker) 88%, var(--mx-ink) 12%); margin: 0; }
.mx-seo-card .exp { font-size: 13px; margin: 0; }
.mx-seo-card .mx-seo-card-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; width: 100%;
}
.mx-seo-card a { margin: 0; flex-shrink: 0; }
.mx-seo-empty {
  border: 1px dashed var(--mx-border); border-radius: var(--mx-radius-lg);
  background: var(--mx-surface); padding: 48px 24px;
}

/* city landing keeps chips but calmer */
.mx-seo-chips { gap: 8px; }
.mx-seo-chip {
  background: var(--mx-surface); border: 1px solid var(--mx-border);
  color: var(--mx-ink); font-weight: 600;
}
.mx-seo-chip:hover { background: var(--mx-primary); color: var(--mx-white); border-color: var(--mx-primary); }

/* ============================================================
   OFFERS (P2-4) — mono copyable codes, restrained accents
   ============================================================ */
.mx-offer-card { border-radius: var(--mx-radius-lg); }
.mx-offer-code {
  font-family: var(--mx-font-mono); font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.mx-offer-code-box { border-width: 1px; border-style: dashed; border-radius: var(--mx-radius); }
.mx-offer-code-label { text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }
/* P2-5 extends here: discount figure is display-size text — must meet
   3:1 large-text minimum. --mx-primary is 2.35:1, so use AA-safe link ink. */
.mx-offer-discount {
  color: color-mix(in srgb, var(--mx-primary-darker) 88%, var(--mx-ink) 12%);
}
/* P2-5: code chip legibility — --mx-primary on --mx-primary-surface is
   2.12:1. Use the AA-safe link ink; label to soft ink. */
.mx-offer-code {
  color: color-mix(in srgb, var(--mx-primary-darker) 88%, var(--mx-ink) 12%);
}
.mx-offer-code-label { color: var(--mx-ink-soft); }
/* ============================================================
   GLOBAL AA CONTRAST (P2-5 follow-up; every screen's A11y row)
   The dominant .mx-dcard-name rule (weight 400, --mx-primary)
   measures 2.35:1 on white. Re-anchor to ink at 700 for a real
   typographic anchor point; link-ink only on hover.
   ============================================================ */
.mx-doc-list .mx-dcard-name {
  color: var(--mx-ink);
  font-weight: 700;
}
.mx-doc-list .mx-dcard-name:hover {
  color: color-mix(in srgb, var(--mx-primary-darker) 88%, var(--mx-ink) 12%);
  text-decoration: none;
}
/* ------------------------------------------------------------
   Global nav + footer AA remediation (systemic: appears on every
   public screen's A11y row). patient_mx.css loads after this sheet,
   so each override uses #mxNavbar descendant specificity.
   - .mx-navbar-link / .mx-mobile-link: --mx-primary = 2.35:1 / 2.12:1
   - footer newsletter title/sub on dark = 2.35/2.07:1 → white ink
   (V2: the #mxNavbar .mx-nav-signup flat-fill rules were removed —
   dead, superseded by the shell gradient pill in ui_mx.css s11.)
   ------------------------------------------------------------ */
#mxNavbar .mx-navbar-link { color: var(--mx-ink-soft); }
#mxNavbar .mx-navbar-link:hover,
#mxNavbar .mx-navbar-link.active {
  color: color-mix(in srgb, var(--mx-primary-darker) 88%, var(--mx-ink) 12%);
}
#mxNavbar .mx-mobile-link { color: var(--mx-ink-soft); }
#mxNavbar .mx-mobile-link:hover,
#mxNavbar .mx-mobile-link.active {
  color: color-mix(in srgb, var(--mx-primary-darker) 88%, var(--mx-ink) 12%);
}
/* footer newsletter + copy on dark backgrounds */
/* the newsletter banner bg is --mx-primary (light blue) — white title
   measures 2.35:1. Anchor the banner on primary-darker (white 4.76:1). */
.mx-footer-newsletter-banner.mx-footer-newsletter-banner { background: var(--mx-primary-darker); }
.mx-footer-newsletter-banner.mx-footer-newsletter-banner::before { background: rgba(255,255,255,0.12); }
.mx-footer-newsletter-banner.mx-footer-newsletter-banner::after { background: rgba(255,255,255,0.08); }
.mx-footer-news-title.mx-footer-news-title { color: var(--mx-white); }
.mx-footer-news-sub.mx-footer-news-sub { color: color-mix(in srgb, var(--mx-white) 92%, var(--mx-brand) 8%); }
.mx-footer-copy.mx-footer-copy { color: color-mix(in srgb, var(--mx-white) 88%, var(--mx-brand) 12%); }
/* ------------------------------------------------------------
   PRIMARY BUTTON AA (systemic): white-on---mx-primary buttons
   measure 2.35:1 (13-14px text needs 4.5). Re-anchor filled
   buttons on --mx-primary-darker (white = 4.76:1). Ghost/outline
   variants get the AA-safe link ink. Covers: hero
   search CTAs, Book/View buttons, offer View More, listing CTAs.
   (V2: nav signup entry removed — dead, gradient pill supersedes.)
   ------------------------------------------------------------ */
.mx-doc-searchbar-btn,
.mx-doc-aside-clear,
.mx-dcard-viewlink,
.mx-btn-book,
.mx-lb-top-btn,
.mx-ph-top-btn,
.mx-ph-aside-promo-btn,
.mx-lbcard-btn-primary,
.mx-lbcard-btn-ghost,
#more-offer {
  background: var(--mx-primary-darker);
  color: var(--mx-white);
  border-color: var(--mx-primary-darker);
}
.mx-doc-aside-clear { background: transparent; color: var(--mx-primary-darker); }
.mx-dcard-viewlink { background: transparent; color: color-mix(in srgb, var(--mx-primary-darker) 88%, var(--mx-ink) 12%); }
.mx-lbcard-btn-ghost { background: transparent; color: color-mix(in srgb, var(--mx-primary-darker) 88%, var(--mx-ink) 12%); border: 1px solid var(--mx-primary-darker); }
.mx-doc-aside-clear:hover { background: var(--mx-primary-surface); color: var(--mx-primary-darker); }
.mx-doc-searchbar-btn:hover,
.mx-btn-book:hover,
.mx-lb-top-btn:hover,
.mx-ph-top-btn:hover,
.mx-lbcard-btn-primary:hover,
#more-offer:hover {
  background: color-mix(in srgb, var(--mx-primary-darker) 85%, var(--mx-ink) 15%);
  color: var(--mx-white);
}

/* user_dashboard_mx.css loads after this sheet and re-asserts
   .mx-btn-primary gradients (white on --mx-primary = 2.35:1).
   Composite-class selectors out-specify it without touching that
   shared sheet. */
.mx-btn-book.mx-btn-primary,
.mx-btn-book.mx-btn-book--primary {
  background: var(--mx-primary-darker) !important;
  color: var(--mx-white) !important;
  border-color: var(--mx-primary-darker) !important;
  box-shadow: none !important;
}
.mx-btn-book.mx-btn-primary:hover,
.mx-btn-book.mx-btn-book--primary:hover {
  background: color-mix(in srgb, var(--mx-primary-darker) 85%, var(--mx-ink) 15%) !important;
  border-color: color-mix(in srgb, var(--mx-primary-darker) 85%, var(--mx-ink) 15%) !important;
  color: var(--mx-white) !important;
}
.mx-btn-book.mx-btn-secondary,
.mx-btn-book.mx-btn-book--ghost {
  background: var(--mx-surface) !important;
  color: color-mix(in srgb, var(--mx-primary-darker) 88%, var(--mx-ink) 12%) !important;
  border: 1px solid var(--mx-primary-darker) !important;
}
.mx-btn-book.mx-btn-secondary:hover,
.mx-btn-book.mx-btn-book--ghost:hover {
  background: var(--mx-primary-surface) !important;
  color: var(--mx-primary-darker) !important;
}
/* doctor_compare Book chips: bare .mx-btn.mx-btn-primary loses bg to a
   later sheet — re-anchor with composite specificity. */
.mx-dc-doc-head .mx-btn.mx-btn-primary {
  background: var(--mx-primary-darker);
  color: var(--mx-white);
  border-color: var(--mx-primary-darker);
}
/* doctor_compare crumbs + sub copy: AA (wave_j4 shared sheet — additive
   override from listing_mx). */
.mx-dc-page .mx-dc-crumb a { color: color-mix(in srgb, var(--mx-primary-darker) 88%, var(--mx-ink) 12%); }
.mx-dc-page .mx-dc-crumb { color: var(--mx-ink-soft); }
.mx-dc-page .mx-dc-head p { color: var(--mx-ink-soft); }
/* home (home_mx.css loads after this sheet on / only): AA-safe CTAs
   and section copy via composite specificity. */
a.mxHome-intro-btn.mxHome-intro-btn,
button.mxHome-intro-btn.mxHome-intro-btn {
  background: var(--mx-primary-darker);
  border-color: var(--mx-primary-darker);
  color: var(--mx-white);
}
a.mxHome-intro-btn.mxHome-intro-btn:hover,
button.mxHome-intro-btn.mxHome-intro-btn:hover {
  background: color-mix(in srgb, var(--mx-primary-darker) 85%, var(--mx-ink) 15%);
}
.mxHome-see-all.mxHome-see-all {
  color: color-mix(in srgb, var(--mx-primary-darker) 88%, var(--mx-ink) 12%);
}
/* discover CTAs are <span> inside <a> cards — bare class wins over home_mx */
.mxHome-discover-cta.mxHome-discover-cta {
  color: color-mix(in srgb, var(--mx-primary-darker) 88%, var(--mx-ink) 12%);
}
/* article chip + byline: --mx-primary on white = 2.35:1 */
.mxHome-article-tag.mxHome-article-tag {
  color: color-mix(in srgb, var(--mx-primary-darker) 88%, var(--mx-ink) 12%);
}
.mxHome-article-author.mxHome-article-author {
  color: color-mix(in srgb, var(--mx-primary-darker) 88%, var(--mx-ink) 12%);
}
.mxHome-section-desc.mxHome-section-desc { color: var(--mx-ink-soft); }
.mxHome-dcard-spec.mxHome-dcard-spec { color: color-mix(in srgb, var(--mx-primary-darker) 88%, var(--mx-ink) 12%); }
.mxHome-dcard-book.mxHome-dcard-book { color: color-mix(in srgb, var(--mx-primary-darker) 88%, var(--mx-ink) 12%); }
.mxHome-dcard-book.mxHome-dcard-book:hover { color: var(--mx-primary-darker); }

/* ============================================================
   ALL-SPECIALITIES + HEALTH_FEED AA finish
   - spec-top-sub: a later rule resolves to ink-muted (4.38:1) — pin ink-soft
   - spec-btn: mixed fill computes to light blue on primary-surface (2.9:1) —
     anchor on primary-darker fill with white text
   - feed side-promo + newsletter: white on --mx-warning / light fills fail
   ============================================================ */
.mx-spec-top-sub.mx-spec-top-sub { color: var(--mx-white); }
.mx-spec-btn.mx-spec-btn {
  background: var(--mx-primary);
  border-color: var(--mx-primary);
  color: var(--mx-white);
  box-shadow: var(--mx-shadow-cta);
}
.mx-spec-btn.mx-spec-btn:hover {
  background: var(--mx-primary-dark);
  border-color: var(--mx-primary-dark);
  color: var(--mx-white);
  box-shadow: var(--mx-shadow-cta-hover);
}
.mx-feed-side-promo-btn.mx-feed-side-promo-btn {
  background: var(--mx-primary-darker);
  color: var(--mx-white);
  border-color: var(--mx-primary-darker);
}
.mx-feed-side-promo-btn.mx-feed-side-promo-btn:hover {
  background: color-mix(in srgb, var(--mx-primary-darker) 85%, var(--mx-ink) 15%);
}
.mxhf-newsletter-btn.mxhf-newsletter-btn {
  background: var(--mx-primary-darker);
  color: var(--mx-white);
  border-color: var(--mx-primary-darker);
}
.mxhf-newsletter-btn.mxhf-newsletter-btn:hover {
  background: color-mix(in srgb, var(--mx-primary-darker) 85%, var(--mx-ink) 15%);
}

/* ============================================================
   DOCTOR COMPARE (P1-7) — sticky row labels on mobile
   ============================================================ */
@media (max-width: 680px) {
  .mx-dc-grid { padding: 12px; }
  .mx-dc-rowlabel {
    position: sticky; left: 0;
    background: var(--mx-surface);
    z-index: 2;
    border-top: 1px solid var(--mx-border-light);
  }
  .mx-dc-grid { position: relative; }
  .mx-dc-cell { border-top: 1px solid var(--mx-border-light); }
}

/* ============================================================
   REPORT TEST (P1-3) — clinical register: mono machine data,
   solid low-saturation status fills (no pastel marketing chips)
   ============================================================ */
.mxRep-page .mx-mono,
.mxRep-summary-total-val,
.mxRep-summary-total-val .currency-symbol,
.mxRep-summary-total-val .amount {
  font-family: var(--mx-font-mono);
  font-variant-numeric: tabular-nums;
}
.mxRep-summary-total-val .amount { font-size: 30px; font-weight: 700; color: var(--mx-ink); }
.mxRep-summary-total-val .currency-symbol { font-size: 16px; color: var(--mx-ink-muted); font-weight: 600; }
.timing.timeslots {
  font-family: var(--mx-font-mono); font-variant-numeric: tabular-nums;
  min-width: 44px;
}

/* ============================================================
   LISTING HEADER COUNTS + GREEN UNIFICATION (S9, P2-13)
   ============================================================ */
.mx-phcard-verified, .mx-lbcard-verified, .mx-dcard-verified { color: var(--mx-success); background: var(--mx-success-surface); }

/* reduced-motion safety for new hover states */
@media (prefers-reduced-motion: reduce) {
  .mx-seo-card, .mx-phcard, .mx-lbcard { transition: none !important; }
}

/* --- Pass B: pharmacy row-card supporting selectors --- */
.mx-phcard-img-link { display: block; width: 100%; height: 100%; }
.mx-phcard-header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mx-phcard-img-link:hover .mx-phcard-photo { opacity: 0.92; }
/* --- Pass B: labs grid container becomes stacked rows --- */
.dispLabs { display: flex; flex-direction: column; gap: var(--mx-space-4); }
/* --- Pass B: pharmacy grid stacked rows --- */
.mx-ph-grid { display: flex; flex-direction: column; gap: var(--mx-space-4); grid-template-columns: none; }
/* --- Pass B: seo card row layout helper --- */
@media (min-width: 641px) {
  .mx-seo-card { align-items: center; }
  .mx-seo-card .mx-seo-card-row { display: flex; align-items: center; justify-content: space-between; }
}
/* doctor cards: strengthen type steps (S2) */
.mx-dcard-name { font-size: 18px; }
.mx-dcard-spec { font-size: 14px; }
.mx-dcard-fee-big { font-family: var(--mx-font-mono); font-variant-numeric: tabular-nums; }

/* --- Pass B: labs price block column --- */
.mx-lbcard-price-block {
  display: flex; flex-direction: column; align-items: flex-end; justify-content: center;
  min-width: 130px;
}

/* --- Pass B: SEO landing headers --- */
.mx-seo-hero-eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--mx-primary-darker) 88%, var(--mx-ink) 12%); background: var(--mx-primary-surface);
  border-radius: var(--mx-radius-pill); padding: 5px 12px; margin-bottom: 14px;
}
.mx-seo-hero--city {
  background: var(--mx-white);
  border: 1px solid var(--mx-border-light);
  border-radius: var(--mx-radius-lg);
  margin: 32px 24px 0;
  padding: 44px 32px;
}
.mx-seo-listhead {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin: 0 0 16px;
}
.mx-seo-listhead h2 { font-family: var(--mx-font-sans); font-size: 18px; font-weight: 700; color: var(--mx-ink); margin: 0; }
.mx-seo-listhead-count { font-size: 14px; color: var(--mx-ink-soft); font-variant-numeric: tabular-nums; }
.mx-seo-listhead-link {
  font-family: var(--mx-font-sans); font-size: 14px; font-weight: 600;
  color: color-mix(in srgb, var(--mx-primary-darker) 88%, var(--mx-ink) 12%); text-decoration: none; display: inline-flex; align-items: center; gap: 6px;
}
.mx-seo-listhead-link:hover { color: var(--mx-primary-darker); }
@media (max-width: 640px) {
  .mx-seo-hero { padding: 40px 20px 32px; }
  .mx-seo-hero h1 { font-size: 27px; }
  .mx-seo-hero--city { margin: 20px 16px 0; padding: 32px 20px; }
  .mx-seo-card { padding: 16px 4px; gap: 12px; }
  .mx-seo-card img { width: 52px; height: 52px; }
}

/* ============================================================
   DOCTOR COMPARE (P1-7) — mobile: row labels stay visible
   (kept in listing_mx.css layer; wave_j4_mx.css carries the base)
   ============================================================ */
@media (max-width: 680px) {
  .mx-dc-page .mx-dc-grid { padding: 12px; }
  .mx-dc-page .mx-dc-rowlabel {
    position: sticky;
    top: 64px;
    z-index: 3;
    background: var(--mx-surface);
    border-top: 1px solid var(--mx-border);
    font-size: var(--mx-text-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    color: var(--mx-ink-muted);
    padding: 14px 8px 10px;
  }
  .mx-dc-page .mx-dc-doc-head { border-radius: var(--mx-radius); }
  .mx-dc-page .mx-dc-cell { font-size: var(--mx-text-base); padding: 14px 8px; }
}

/* ============================================================
   CHECKOUT / BILLING DETAIL (S3) — money in tabular mono
   ============================================================ */
.BookingSummaryVal {
  font-family: var(--mx-font-mono);
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   A11Y (S8) — inline text links get >=32px effective touch height on mobile
   ============================================================ */
@media (max-width: 768px) {
  .mx-dc-crumb a,
  .mx-seeall,
  .mx-seo-listhead-link {
    display: inline-flex;
    align-items: center;
    padding: 6px 4px;
    margin: -6px -4px;
  }
}
/* ============================================================
   ARTICLE LINK CONTRAST (P2-5) — text links meet AA 4.5:1
   --mx-primary is 2.35:1 on white; --mx-primary-darker 4.76:1 on
   white but 4.47:1 on tinted surfaces. Mix 12% ink into the darker
   token for a palette-sanctioned AA-safe link ink.
   Also: body measure 720px ≈ 75ch at 17px — over the 65ch comfort.
   640px ≈ 65ch. H2 step already 28/17 = 1.65x.
   ============================================================ */
.mxBlg-body { max-width: 640px; }
.mxBlg-tags { max-width: 640px; }
.mxBlg-body img { max-width: 100%; }
.mxBlg-readmore,
.mxBlg-tag,
.mxBlg-category {
  color: color-mix(in srgb, var(--mx-primary-darker) 88%, var(--mx-ink) 12%);
}
.mxBlg-tag {
  display: inline-flex;
  align-items: center;
  background: var(--mx-surface-alt);
  border: 1px solid var(--mx-border-light);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: var(--mx-text-sm);
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.mxBlg-tag:hover {
  border-color: var(--mx-primary);
  background: var(--mx-primary-surface);
  text-decoration: none;
}
.mxBlg-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  max-width: 720px;
  margin: 0 auto 32px;
}
.mxBlg-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1px solid var(--mx-border);
  border-radius: 999px;
  background: var(--mx-surface);
  color: var(--mx-ink-soft);
  font-family: var(--mx-font-sans);
  font-size: var(--mx-text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.mxBlg-action-btn:hover {
  border-color: var(--mx-primary);
  color: color-mix(in srgb, var(--mx-primary-darker) 88%, var(--mx-ink) 12%);
}
.mxBlg-action-btn i { font-size: 14px; }
.mxBlg-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  padding-top: 8px;
}
.mxBlg-action-label { margin-left: 2px; }

/* ============================================================
   DOCCURE CHARACTER LAYER (public listing surfaces) — v w3.dc1
   Tokens-only (no raw hex). Uses landed Doccure tokens:
   --mx-gradient/--mx-gradient-hover, --mx-secondary-dark,
   --mx-orange-dark, --mx-brand family.
   Covers: doctor listing cards, pharmacy/lab cards, pagination,
   sort bar, empty states, doctor detail hero CTA.
   ============================================================ */

/* ---- Doctor cards: friendlier hover lift + 12px radius feel ---- */
.mx-dcard {
  border-radius: 12px;
  transition: transform 250ms ease, box-shadow 250ms ease, border-color 250ms ease;
}
.mx-dcard:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 22px rgba(15,23,42,0.09), 0 16px 40px rgba(15,23,42,0.06);
}

/* ---- Verified badge: tinted success surface with dark ink (AA) ---- */
.mx-dcard-verified {
  background: var(--mx-success-surface);
  color: var(--mx-success-dark);
}
.mx-dcard-verified i { color: var(--mx-success-dark); }
.mx-dcard-check { color: var(--mx-success-dark); }

/* ---- Fee: Doccure orange (AA text pair) ---- */
.mx-dcard-fee-big { color: var(--mx-orange-dark, var(--mx-warning-dark)); }
.mxDocStatPill .mxDocStatNum { color: inherit; }
.mxDocHeroFeeAmt, .mxDocBookFeeAmt, .mxDocFeeAmt { color: var(--mx-orange-dark, var(--mx-warning-dark)); }

/* ---- Book CTA: gradient fill (beats the flat-override layers above by
        source order; composite selectors kept for the !important wars
        with user_dashboard_mx.css) ---- */
.mx-btn-book.mx-btn-primary,
.mx-btn-book.mx-btn-book--primary,
a.mx-btn-book.mx-btn-primary,
.mxDocActBook,
.mxDocBookBtn {
  background: var(--mx-gradient) !important;
  color: var(--mx-white) !important;
  border-color: transparent !important;
  box-shadow: 0 2px 8px var(--mx-primary-glow) !important;
}
.mx-btn-book.mx-btn-primary:hover,
.mx-btn-book.mx-btn-book--primary:hover,
a.mx-btn-book.mx-btn-primary:hover,
.mxDocActBook:hover,
.mxDocBookBtn:hover {
  background: var(--mx-gradient-hover) !important;
  color: var(--mx-white) !important;
  box-shadow: 0 4px 14px var(--mx-primary-glow) !important;
}

/* ---- Ghost/secondary buttons: brand-outline feel ---- */
.mx-btn-book.mx-btn-secondary,
.mx-btn-book.mx-btn-book--ghost {
  background: var(--mx-surface) !important;
  color: var(--mx-brand, var(--mx-primary-dark)) !important;
  border: 1px solid var(--mx-brand, var(--mx-primary-dark)) !important;
}
.mx-btn-book.mx-btn-secondary:hover,
.mx-btn-book.mx-btn-book--ghost:hover {
  background: var(--mx-brand-surface, var(--mx-primary-surface)) !important;
  color: var(--mx-brand, var(--mx-primary-dark)) !important;
}

/* ---- Pharmacy / lab cards: hover lift ---- */
.mx-phcard, .mx-lbcard {
  transition: transform 250ms ease, box-shadow 250ms ease, border-color 250ms ease;
}
.mx-phcard:hover, .mx-lbcard:hover {
  transform: translateY(-3px);
}

/* ---- Pagination: brand-blue active ---- */
.mx-pagination .page-link:hover {
  background: var(--mx-brand-surface, var(--mx-primary-surface));
  color: var(--mx-brand, var(--mx-primary-dark));
}
.mx-pagination .active .page-link,
.mx-pagination .page-item.active .page-link {
  background: var(--mx-brand, var(--mx-primary));
  border-color: var(--mx-brand, var(--mx-primary));
  color: var(--mx-white);
}

/* ---- Sort bar: brand focus ---- */
.mx-doc-sort-wrap select:focus {
  border-color: var(--mx-brand, var(--mx-primary));
  box-shadow: 0 0 0 3px var(--mx-brand-glow, var(--mx-primary-glow));
  outline: none;
}

/* ---- Eyebrow labels: Doccure tinted chip, AA dark ink ---- */
.mx-ph-top-eyebrow, .mx-lb-top-eyebrow,
.mx-ph-cats-eyebrow, .mx-lb-how-eyebrow, .mx-lb-packages-eyebrow,
.mxhf-top-eyebrow, .mx-ph-how-eyebrow {
  background: var(--mx-secondary-surface);
  color: var(--mx-secondary-dark);
}

/* ---- Empty states: brand icon chips ---- */
.mx-doc-empty i, .mx-ph-empty i, .mx-lb-empty i {
  color: var(--mx-brand, var(--mx-primary));
  background: var(--mx-brand-surface, var(--mx-primary-surface));
  width: 84px;
  height: 84px;
  line-height: 84px;
  border-radius: 50%;
}

/* ---- Doctor detail hero: subtle brand presence ---- */
.mxDocHero {
  background:
    color-mix(in srgb, var(--mx-primary) 4%, var(--mx-surface)),
    var(--mx-surface);
}
.mxDocVerified { background: var(--mx-success-surface); color: var(--mx-success-dark); border-color: color-mix(in srgb, var(--mx-success) 26%, transparent); }
.mxDocVerified i { color: var(--mx-success-dark); }

/* ---- SEO landing heroes (speciality/city/doctor): brand presence ---- */
.mx-seo-top {
  background:
    color-mix(in srgb, var(--mx-primary) 4%, var(--mx-surface-alt)),
    var(--mx-surface-alt);
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .mx-dcard, .mx-phcard, .mx-lbcard { transition: none !important; transform: none !important; }
}


/* ============================================================
   DOCCURE V2 PUBLIC CHARACTER LAYER v2 (Worker B) — v=dc2
   Listing surfaces: find_doctor, pharmacy, lab, surgery-assist,
   doctor_detail. 10px cards + 0 4px 34px rgba(206,206,206,.25)
   diffuse shadow, 44px pill gradient CTAs, 42px section titles.
   ============================================================ */

/* ---- Doctor / pharmacy / lab listing cards: 10px + diffuse ---- */
.mx-doc-page .mx-dcard,
.mx-doc-list .mx-dcard,
.mx-ph-page .mx-dcard,
.mx-lb-page .mx-dcard,
.mx-doc-page .mx-phcard,
.mx-ph-page .mx-phcard,
.mx-doc-page .mx-lbcard,
.mx-lb-page .mx-lbcard,
.mx-doc-page .mx-sa-doc-card,
.mx-sa-page .mx-sa-doc-card,
.mx-doc-page .mx-dc-doc-card {
  border-radius: 10px !important;
  box-shadow: var(--mx-shadow-soft, 0 4px 34px rgba(206,206,206,.25)) !important;
  transition: transform 250ms ease, box-shadow 250ms ease, border-color 250ms ease;
}
.mx-doc-page .mx-dcard:hover,
.mx-ph-page .mx-phcard:hover,
.mx-lb-page .mx-lbcard:hover,
.mx-sa-page .mx-sa-doc-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 44px rgba(206,206,206,.4) !important;
}

/* ---- ALL primary CTAs on public listing surfaces -> 44px pill gradient ---- */
.mx-btn-book,
.mx-doc-searchbar-btn,
.mx-lb-top-btn,
.mx-ph-top-btn,
.mx-lbcard-btn-primary,
.mx-ph-aside-promo-btn,
.mxDocActBook,
.mxDocBookBtn,
#more-offer {
  border-radius: var(--mx-radius-pill, 9999px) !important;
  padding: 10px 24px !important;
  font-weight: 500;
}
.mx-btn-book.mx-btn-primary,
.mx-btn-book.mx-btn-book--primary,
a.mx-btn-book.mx-btn-primary,
.mx-doc-searchbar-btn,
.mx-lb-top-btn,
.mx-ph-top-btn,
.mx-lbcard-btn-primary,
.mxDocActBook,
.mxDocBookBtn,
#more-offer {
  background: var(--mx-primary) !important;
  color: var(--mx-white) !important;
  border: 0 !important;
  box-shadow: var(--mx-shadow-cta) !important;
}
.mx-btn-book.mx-btn-primary:hover,
.mx-btn-book.mx-btn-book--primary:hover,
a.mx-btn-book.mx-btn-primary:hover,
.mx-doc-searchbar-btn:hover,
.mx-lb-top-btn:hover,
.mx-ph-top-btn:hover,
.mx-lbcard-btn-primary:hover,
.mxDocActBook:hover,
.mxDocBookBtn:hover,
#more-offer:hover {
  background: var(--mx-primary-dark) !important;
  color: var(--mx-white) !important;
  box-shadow: 0 6px 18px rgba(2,191,255,.32) !important;
}
.mx-btn-book.mx-btn-secondary,
.mx-btn-book.mx-btn-book--ghost,
.mx-lbcard-btn-ghost,
.mx-dcard-viewlink {
  border-radius: var(--mx-radius-pill, 9999px) !important;
}


/* ---- Section titles on listing surfaces: 42px / 700 ---- */
.mx-doc-page .mx-doc-searchbar-title h1,
.mx-ph-page .mx-ph-top-text h1,
.mx-lb-top .mx-lb-top-text h1,
.mx-sa-page .mx-sa-hero-text h1,
.mx-sa-page .mx-section-title,
.mx-sa-cats .mx-sa-cats-title {
  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.02em !important;
  color: var(--mx-white) !important;
}
.mx-sc-page .mx-sc-chips-title {
  font-size: var(--mx-title-xl, 42px) !important;
  font-weight: 700 !important;
  line-height: 1.18 !important;
}
@media (max-width: 900px) {
  .mx-doc-page .mx-doc-searchbar-title h1,
  .mx-ph-page .mx-ph-top-text h1,
  .mx-lb-top .mx-lb-top-text h1,
  .mx-sa-page .mx-sa-hero-text h1,
  .mx-sa-page .mx-section-title,
  .mx-sa-cats .mx-sa-cats-title,
  .mx-sc-page .mx-sc-chips-title { font-size: 24px !important; }
}
@media (max-width: 560px) {
  .mx-doc-page .mx-doc-searchbar-title h1,
  .mx-ph-page .mx-ph-top-text h1,
  .mx-lb-top .mx-lb-top-text h1,
  .mx-sa-page .mx-sa-hero-text h1,
  .mx-sa-page .mx-section-title,
  .mx-sa-cats .mx-sa-cats-title,
  .mx-sc-page .mx-sc-chips-title { font-size: 25px !important; }
}

/* ---- Surgery-assist category tiles: card treatment ---- */
.mx-sa-cat-card {
  border-radius: 10px;
  box-shadow: var(--mx-shadow-soft, 0 4px 34px rgba(206,206,206,.25));
  transition: transform 250ms ease, box-shadow 250ms ease, border-color 250ms ease;
}
.mx-sa-cat-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 44px rgba(206,206,206,.4);
}

/* ---- Doctor detail hero: soft diffuse elevation ---- */
.mxDocHero {
  border-radius: 10px;
  box-shadow: var(--mx-shadow-soft, 0 4px 34px rgba(206,206,206,.25));
}

/* ---- Find-doctor search bar pill ---- */
.mx-doc-searchbar-form {
  border-radius: var(--mx-radius-pill, 9999px);
}
.mx-doc-searchbar-btn { padding: 10px 30px !important; }
/* ============================================================
   LISTINGS V2.1 STRUCTURE LAYER — v=v21list (LISTINGS scope)
   Reference-measured listing anatomy (doccure list-card):
   - full-width ROW cards (1296px @1440), radius 10px,
     diffuse shadow 0 4px 34px rgba(206,206,206,.25),
     card-body padding 40px desktop / 20px <=900px
   - filter sidebar 306px sticky, widget shadow
   - sort/result bar as its own card
   - pill pagination + pill View More
   - empty state as centered card w/ icon chip
   ============================================================ */

/* ---- 1. FIND-DOCTOR layout: 306px sidebar + row cards ---- */
.mx-doc-layout {
  grid-template-columns: 306px minmax(0, 1fr);
  gap: 24px;
  padding: 16px 20px 32px;
}
@media (min-width: 1441px) {
  .mx-doc-layout { grid-template-columns: 306px minmax(0, 1fr); }
}

/* Sidebar anatomy: one sticky widget column, card radius 10, widget shadow */
.mx-doc-aside {
  border-radius: 10px;
  padding: 20px;
  box-shadow: var(--mx-shadow-widget, 0 7.5px 17.5px rgba(0,0,0,.05));
  border: 1px solid var(--mx-border-light, #e2e8f0);
}
.mx-doc-aside + .mx-doc-aside,
.mx-doc-aside + aside,
aside.mx-doc-aside ~ .mx-doc-filter {
  margin-top: 16px;
}
.mx-doc-filter + .mx-doc-filter { margin-top: 20px; }
.mx-doc-filter-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--mx-ink, #0f172a);
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 10px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--mx-border-light, #e2e8f0);
}
.mx-doc-filter-title i { color: var(--mx-primary, #316dff); font-size: 13px; }
.mx-doc-filter-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--mx-ink-soft, #475569);
  padding: 7px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease;
}
.mx-doc-filter-opt:hover {
  background: var(--mx-primary-surface, #eef4ff);
  color: var(--mx-primary-dark, #2557cc);
}
.mx-doc-filter-opt input { accent-color: var(--mx-primary, #316dff); }

/* Doctor row card: reference structure — 40px body, avatar 96px round */
.mx-doc-list .mx-dcard,
.mx-dcard {
  flex-direction: row;
  align-items: stretch;
  gap: 24px;
  padding: 40px;
  border-radius: 10px;
  border: 1px solid var(--mx-border-light, #e2e8f0);
  box-shadow: var(--mx-shadow-soft, 0 4px 34px rgba(206,206,206,.25));
}
.mx-dcard + .mx-dcard { margin-top: 16px; }
.mx-dcard-left { width: 128px; gap: 12px; }
.mx-dcard-photo-wrap {
  width: 96px;
  height: 96px;
  border-radius: 9999px;
}
.mx-dcard-verified {
  margin-top: 4px;
  font-size: 11px;
  letter-spacing: 0.02em;
}
.mx-dcard-viewlink { font-size: 13px; }

/* ---- 2. SORT / RESULT BAR as its own card ---- */
.mx-doc-rhead,
.mx-ph-rhead,
.mx-lb-rhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  background: var(--mx-surface, #fff);
  border: 1px solid var(--mx-border-light, #e2e8f0);
  border-radius: 10px;
  padding: 16px 24px;
  margin-bottom: 16px;
  box-shadow: var(--mx-shadow-widget, 0 7.5px 17.5px rgba(0,0,0,.05));
}
.mx-doc-rhead-left h2,
.mx-doc-rhead-text h2,
.mx-ph-rhead-text h2,
.mx-lb-rhead-text h2 {
  font-size: 18px;
  font-weight: 600;
  color: var(--mx-ink, #0f172a);
  margin: 0 0 2px;
  letter-spacing: -0.01em;
}
.mx-doc-rhead-left p,
.mx-doc-rhead-text p,
.mx-ph-rhead-text p,
.mx-lb-rhead-text p {
  font-size: 13px;
  color: var(--mx-ink-muted, #64748b);
  margin: 0;
}
.mx-doc-rhead-sort,
.mx-ph-rhead-sort,
.mx-lb-rhead-sort {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--mx-ink-soft, #475569);
  background: var(--mx-surface-alt, #f8fafc);
  border: 1px solid var(--mx-border-light, #e2e8f0);
  border-radius: var(--mx-radius-pill, 9999px);
  padding: 8px 16px;
  cursor: pointer;
}
.mx-doc-rhead-sort i,
.mx-ph-rhead-sort i,
.mx-lb-rhead-sort i { color: var(--mx-primary, #316dff); font-size: 12px; }
.mx-doc-sort-wrap-select,
.mx-ph-rhead-sort select,
.mx-lb-rhead-sort select {
  border: 1px solid var(--mx-border-light, #e2e8f0);
  border-radius: var(--mx-radius-pill, 9999px);
  padding: 8px 14px;
  font-size: 14px;
  background: var(--mx-surface, #fff);
  color: var(--mx-ink, #0f172a);
}
.mx-doc-sort-wrap-select:focus,
.mx-ph-rhead-sort select:focus,
.mx-lb-rhead-sort select:focus {
  outline: none;
  border-color: var(--mx-primary, #316dff);
  box-shadow: 0 0 0 3px rgba(49,109,255,.15);
}

/* ---- 3. PAGINATION: pill pages + pill View More ---- */
.mx-doc-more > button,
.mx-ph-more > button,
.mx-lb-more > button,
.mx-spec-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 24px auto 8px;
  padding: 12px 32px;
  border-radius: var(--mx-radius-pill, 9999px);
  background: var(--mx-primary);
  color: var(--mx-white, #fff);
  font-size: 15px;
  font-weight: 500;
  border: 0;
  box-shadow: var(--mx-shadow-cta);
  cursor: pointer;
  transition: background 200ms ease, box-shadow 200ms ease;
}
.mx-doc-more > button:hover,
.mx-ph-more > button:hover,
.mx-lb-more > button:hover,
.mx-spec-more-btn:hover {
  background: var(--mx-primary-dark);
  box-shadow: 0 6px 18px rgba(2,191,255,.32);
}
.mx-doc-more,
.mx-ph-more,
.mx-lb-more,
.mx-spec-more { text-align: center; display: block; }

/* ---- 4. EMPTY STATES: centered card + icon chip ---- */
.mx-empty-state,
.mx-doc-empty-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
  background: var(--mx-surface, #fff);
  border: 1px solid var(--mx-border-light, #e2e8f0);
  border-radius: 10px;
  box-shadow: var(--mx-shadow-widget, 0 7.5px 17.5px rgba(0,0,0,.05));
  padding: 56px 32px;
  margin: 0;
}
.mx-empty-state > i {
  width: 72px;
  height: 72px;
  line-height: 72px;
  border-radius: 50%;
  font-size: 26px;
  color: var(--mx-primary, #316dff);
  background: var(--mx-primary-surface, #eef4ff);
  margin-bottom: 10px;
}
.mx-empty-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--mx-ink, #0f172a);
  margin: 0;
}
.mx-empty-text {
  font-size: 14px;
  color: var(--mx-ink-muted, #64748b);
  margin: 0 0 12px;
  max-width: 420px;
}
.mx-empty-actions .mx-btn {
  border-radius: var(--mx-radius-pill, 9999px);
}

/* ---- 5. PHARMACY + LAB grids: stacked row cards @40px ---- */
.mx-ph-grid,
.mx-lb-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.mx-phcard.mx-phcard,
.mx-lbcard.mx-lbcard {
  border-radius: 10px !important;
  border: 1px solid var(--mx-border-light, #e2e8f0) !important;
  box-shadow: var(--mx-shadow-soft, 0 4px 34px rgba(206,206,206,.25)) !important;
  padding: 24px 40px !important;
  align-items: center !important;
}
.mx-phcard.mx-phcard:hover,
.mx-lbcard.mx-lbcard:hover {
  box-shadow: 0 8px 44px rgba(206,206,206,.4) !important;
  border-color: var(--mx-border, #cbd5e1) !important;
  transform: none !important;
}
/* Pharmacy/lab logo: 80px round (row-card anatomy) */
.mx-phcard-img-wrap,
.mx-lbcard-photo-wrap {
  width: 80px !important;
  height: 80px !important;
  flex: 0 0 80px !important;
  border-radius: 9999px !important;
}
.mx-phcard-photo,
.mx-lbcard-photo { border-radius: 9999px !important; }
/* Row-card action buttons stay pill */
.mx-phcard-btn-primary,
.mx-phcard-btn-ghost,
.mx-lbcard-btn-primary,
.mx-lbcard-btn-ghost {
  border-radius: var(--mx-radius-pill, 9999px) !important;
}

/* ---- 6. PHARMACY + LAB filter asides: 306px widget anatomy ---- */
.mx-ph-layout,
.mx-lb-layout {
  display: grid;
  grid-template-columns: 306px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
.mx-ph-aside,
.mx-lb-aside {
  position: sticky;
  top: 84px;
}
.mx-ph-aside-card,
.mx-lb-aside-card {
  border-radius: 10px;
  border: 1px solid var(--mx-border-light, #e2e8f0);
  padding: 20px;
  box-shadow: var(--mx-shadow-widget, 0 7.5px 17.5px rgba(0,0,0,.05));
}
.mx-ph-aside-title,
.mx-lb-aside-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--mx-ink, #0f172a);
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 10px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--mx-border-light, #e2e8f0);
}
.mx-ph-aside-title i,
.mx-lb-aside-title i { color: var(--mx-primary, #316dff); font-size: 13px; }
.mx-filter-sect + .mx-filter-sect { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--mx-border-light, #e2e8f0); }
.mx-filter-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--mx-ink, #0f172a);
  margin: 0 0 8px;
}
.mx-filter-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--mx-ink-soft, #475569);
  padding: 7px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 150ms ease;
}
.mx-filter-opt:hover { background: var(--mx-primary-surface, #eef4ff); }
.mx-filter-opt input { accent-color: var(--mx-primary, #316dff); }
.mx-ph-aside-promo,
.mx-lb-aside-promo {
  margin-top: 16px;
  border-radius: 10px;
  box-shadow: var(--mx-shadow-widget, 0 7.5px 17.5px rgba(0,0,0,.05));
}

/* ---- 7. DETAIL SURFACES: hero + widget column + sticky booking ---- */
/* Pharmacy detail hero: card radius 10 + diffuse, logo round 96px */
.mxPhd-hero {
  border-radius: 10px;
  box-shadow: var(--mx-shadow-soft, 0 4px 34px rgba(206,206,206,.25));
}
.mxPhd-hero-logo {
  width: 96px;
  height: 96px;
  border-radius: 9999px;
  overflow: hidden;
}
.mxPhd-hero-logo img { width: 100%; height: 100%; object-fit: cover; }
.mxPhd-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 306px;
  gap: 24px;
  align-items: start;
}
.mxPhd-overview,
.mxPhd-hours-card {
  border-radius: 10px;
  border: 1px solid var(--mx-border-light, #e2e8f0);
  box-shadow: var(--mx-shadow-widget, 0 7.5px 17.5px rgba(0,0,0,.05));
  padding: 24px;
}
.mxPhd-hours-card { position: sticky; top: 84px; }
.mxPhd-section-title {
  font-size: 18px;
  font-weight: 600;
}
@media (max-width: 900px) {
  .mxPhd-hours-card { position: static; }
}

/* Lab detail (report_test): widget-card steps, pill primary */
.mxRep-page .mxRep-step-title { font-size: 20px; font-weight: 600; }
.mxRep-btn-primary,
#paybtn,
.mxRep-pay-grid input[type="button"] {
  border-radius: var(--mx-radius-pill, 9999px) !important;
}

/* Doctor detail: sticky booking widget shadow + tab bar card */
.mxDocBookCard {
  border-radius: 10px;
  border: 1px solid var(--mx-border-light, #e2e8f0);
  box-shadow: var(--mx-shadow-widget, 0 7.5px 17.5px rgba(0,0,0,.05));
}
.mxDocTabs {
  border-radius: 10px 10px 0 0;
}
.mxDocBookSlot {
  border-radius: var(--mx-radius-pill, 9999px);
}
.mxDocBookSlot.mxDocBookSlotSelected,
.mxDocBookSlot.selected {
  background: var(--mx-primary);
  color: var(--mx-white, #fff);
  border-color: transparent;
}

/* ---- 8. ALL-SPECIALITIES: grid density 4up @1440, tile anatomy ---- */
.mx-spec-grid {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
}
.mx-spec-card {
  border-radius: 10px;
  border: 1px solid var(--mx-border-light, #e2e8f0);
  box-shadow: var(--mx-shadow-widget, 0 7.5px 17.5px rgba(0,0,0,.05));
  padding: 24px 16px;
  transition: transform 250ms ease, box-shadow 250ms ease;
}
.mx-spec-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--mx-shadow-soft, 0 4px 34px rgba(206,206,206,.25));
}
.mx-spec-icon-ring {
  width: 56px;
  height: 56px;
  border-radius: 9999px;
}
.mx-spec-icon-ring img { width: 28px; height: 28px; }
.mx-spec-btn {
  border-radius: var(--mx-radius-pill, 9999px);
}

/* ---- 9. SURGERY-ASSIST: doc grid density + row anatomy ---- */
.mx-sa-doc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
}
.mx-sa-doc-card {
  border-radius: 10px;
  border: 1px solid var(--mx-border-light, #e2e8f0);
  box-shadow: var(--mx-shadow-widget, 0 7.5px 17.5px rgba(0,0,0,.05));
  padding: 24px 16px;
}
.mx-sa-doc-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--mx-shadow-soft, 0 4px 34px rgba(206,206,206,.25));
}
.mx-sa-doc-avatar {
  width: 80px;
  height: 80px;
  border-radius: 9999px;
  object-fit: cover;
}

/* ---- 10. RESPONSIVE: <=900 sidebar stacks above, cards compact ---- */
@media (max-width: 900px) {
  .mx-doc-layout,
  .mx-ph-layout,
  .mx-lb-layout { grid-template-columns: 1fr; }
  .mx-doc-aside,
  .mx-ph-aside,
  .mx-lb-aside { position: static; }
  .mx-dcard { padding: 20px; gap: 16px; flex-wrap: wrap; }
  .mx-dcard-left { width: auto; flex-direction: row; align-items: center; }
  .mx-dcard-photo-wrap { width: 72px; height: 72px; }
  .mx-phcard.mx-phcard,
  .mx-lbcard.mx-lbcard { padding: 16px 20px !important; }
  .mx-phcard-actions,
  .mx-lbcard-actions { flex: 1 1 100% !important; border-left: 0 !important; padding-left: 0 !important; flex-direction: row !important; }
  .mx-phcard-img-wrap,
  .mx-lbcard-photo-wrap { width: 64px !important; height: 64px !important; flex: 0 0 64px !important; }
  .mx-doc-rhead,
  .mx-ph-rhead,
  .mx-lb-rhead { padding: 12px 16px; }
}

@media (max-width: 560px) {
  .mx-dcard { padding: 16px; }
  .mx-spec-grid,
  .mx-sa-doc-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .mx-spec-card,
  .mx-sa-doc-card { padding: 16px 10px; }
  .mx-spec-icon-ring,
  .mx-sa-doc-avatar { width: 48px; height: 48px; }
  .mx-empty-state,
  .mx-doc-empty-panel { padding: 40px 20px; }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .mx-dcard,
  .mx-spec-card,
  .mx-sa-doc-card,
  .mx-phcard,
  .mx-lbcard { transition: none !important; }
  .mx-dcard:hover,
  .mx-spec-card:hover,
  .mx-sa-doc-card:hover { transform: none !important; }
}
/* ==== END LISTINGS V2.1 STRUCTURE LAYER ==== */

/* ============================================================
   LISTINGS V2.1 ENFORCEMENT PATCH — beats blade inline <style>
   layers that load after this file (equal specificity loses),
   so key structural targets are pinned with !important.
   ============================================================ */

/* Row-card anatomy: radius 10 + 40px body @desktop */
.mx-doc-page .mx-doc-list .mx-dcard {
  padding: 40px !important;
  border-radius: 10px !important;
  border: 1px solid var(--mx-border-light, #e2e8f0) !important;
}
.mx-doc-aside.mx-doc-aside {
  border-radius: 10px !important;
  border: 1px solid var(--mx-border-light, #e2e8f0) !important;
  box-shadow: var(--mx-shadow-widget, 0 7.5px 17.5px rgba(0,0,0,.05)) !important;
}

/* Sort bar card */
.mx-doc-page .mx-doc-rhead {
  border-radius: 10px !important;
  border: 1px solid var(--mx-border-light, #e2e8f0) !important;
  box-shadow: var(--mx-shadow-widget, 0 7.5px 17.5px rgba(0,0,0,.05)) !important;
}

/* View More / Load More: gradient pill */
.mx-doc-page .mx-doc-more > button,
.mx-ph-page .mx-ph-more > button,
.mx-spec-page .mx-spec-more-btn,
.mx-spec-more .mx-spec-more-btn,
div.mx-spec-more > a.mx-spec-more-btn {
  border-radius: var(--mx-radius-pill, 9999px) !important;
  background: var(--mx-primary) !important;
  color: var(--mx-white, #fff) !important;
  border: 0 !important;
  box-shadow: var(--mx-shadow-cta) !important;
  font-weight: 500 !important;
}

/* Doctor detail hero + booking widget */
.mxDocPage .mxDocHero,
body .mxDocHero {
  border-radius: 10px !important;
  border: 1px solid var(--mx-border-light, #e2e8f0) !important;
  box-shadow: var(--mx-shadow-soft, 0 4px 34px rgba(206,206,206,.25)) !important;
}
.mxDocPage .mxDocBookCard {
  border-radius: 10px !important;
  border: 1px solid var(--mx-border-light, #e2e8f0) !important;
  box-shadow: var(--mx-shadow-widget, 0 7.5px 17.5px rgba(0,0,0,.05)) !important;
}
.mxDocPage .mxDocTabs { border-radius: 10px 10px 0 0 !important; }

/* Specialities tiles: radius 10, ring 56 round */
.mx-spec-list .mx-spec-card,
body .mx-spec-card {
  border-radius: 10px !important;
  border: 1px solid var(--mx-border-light, #e2e8f0) !important;
  box-shadow: var(--mx-shadow-widget, 0 7.5px 17.5px rgba(0,0,0,.05)) !important;
}
.mx-spec-card .mx-spec-icon-ring {
  width: 56px !important;
  height: 56px !important;
  border-radius: 9999px !important;
  background: var(--mx-primary-surface, #eef4ff) !important;
}
.mx-spec-card .mx-spec-icon-ring img { width: 28px !important; height: 28px !important; }
.mx-spec-card .mx-spec-btn { border-radius: var(--mx-radius-pill, 9999px) !important; }

/* Surgery-assist tiles + doctor cards */
.mx-sa-page .mx-sa-cat-card {
  border-radius: 10px !important;
  border: 1px solid var(--mx-border-light, #e2e8f0) !important;
  box-shadow: var(--mx-shadow-widget, 0 7.5px 17.5px rgba(0,0,0,.05)) !important;
}
.mx-sa-page .mx-sa-doc-card {
  border-radius: 10px !important;
  border: 1px solid var(--mx-border-light, #e2e8f0) !important;
  box-shadow: var(--mx-shadow-widget, 0 7.5px 17.5px rgba(0,0,0,.05)) !important;
}
.mx-sa-doc-card .mx-sa-doc-avatar {
  width: 80px !important;
  height: 80px !important;
  border-radius: 9999px !important;
}

/* Responsive re-pins (must come after the !important pins above) */
@media (max-width: 900px) {
  .mx-doc-page .mx-doc-list .mx-dcard { padding: 20px !important; }
}
@media (max-width: 560px) {
  .mx-doc-page .mx-doc-list .mx-dcard { padding: 16px !important; }
  .mx-spec-card .mx-spec-icon-ring { width: 48px !important; height: 48px !important; }
  .mx-sa-doc-card .mx-sa-doc-avatar { width: 64px !important; height: 64px !important; }
}
/* ==== END V2.1 ENFORCEMENT PATCH ==== */

/* ============================================================
   LISTINGS V2.1 PATCH 2 — mobile card anatomy fixes
   The v11 layer sets grid-template-columns on a flex card at
   <=980px, collapsing the avatar column (w=2). Restore flex
   sizing so the 72px avatar renders on mobile.
   ============================================================ */
@media (max-width: 980px) {
  .mx-doc-page .mx-doc-list .mx-dcard {
    display: flex !important;
    grid-template-columns: none !important;
    flex-wrap: wrap !important;
    gap: 14px !important;
  }
  .mx-doc-page .mx-dcard-left {
    flex: 0 0 auto !important;
    width: auto !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
  }
  .mx-doc-page .mx-dcard-photo-wrap {
    width: 72px !important;
    height: 72px !important;
    flex: 0 0 72px !important;
    border-radius: 9999px !important;
  }
  .mx-doc-page .mx-dcard-photo {
    width: 100% !important;
    height: 100% !important;
    border-radius: 9999px !important;
  }
}

/* Pharmacy filter aside: pin radius 10 (inline style beats file otherwise) */
.mx-ph-page .mx-ph-aside-card,
body .mx-ph-aside-card {
  border-radius: 10px !important;
  border: 1px solid var(--mx-border-light, #e2e8f0) !important;
  box-shadow: var(--mx-shadow-widget, 0 7.5px 17.5px rgba(0,0,0,.05)) !important;
}

/* Doctor avatar on detail: 120px desktop / 96 mobile is fine; keep round */
.mxDocPage .mxDocAvatar,
.mxDocPage .mxDocAvatar img {
  border-radius: 9999px !important;
}
/* ==== END V2.1 PATCH 2 ==== */