/**
 * EDC Directory V3 — Isolated Stylesheet
 *
 * Self-contained stylesheet for body.dv3-page. Scope: body.dv3-page.
 *
 * Aesthetic: clinical light surfaces by default; `.dv3-page--dark` is a
 * night-clinical palette (sage/teal on ink surfaces). Photo-led cards,
 * one calm grid, no floating rails, no inherited Tailwind utilities.
 *
 * Tokens reset under body.dv3-page so other pages stay untouched.
 */

/* ============================================================================
   1. TOKENS + RESET (scoped to body.dv3-page only)
   ============================================================================ */

body.dv3-page {
  color-scheme: light;
  --dv3-bg: #FAFBFC;
  --dv3-bg-soft: #F4F7FB;
  --dv3-surface: #FFFFFF;
  --dv3-surface-soft: #F8FAFC;
  --dv3-rim: rgba(15, 23, 42, 0.08);
  --dv3-rim-strong: rgba(15, 23, 42, 0.14);
  --dv3-text: #0F172A;
  --dv3-text-soft: #334155;
  --dv3-text-muted: #64748B;
  --dv3-text-faint: #94A3B8;

  --dv3-teal: #0AA89D;
  --dv3-teal-deep: #028090;
  --dv3-teal-bright: #14C4B7;
  --dv3-teal-soft: #E6F7F5;
  --dv3-gold: #F59E0B;
  --dv3-gold-bright: #FBBF24;
  --dv3-coral: #FF6B6B;
  --dv3-emerald: #10B981;
  --dv3-emerald-deep: #047857;

  --dv3-shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.04);
  --dv3-shadow-md: 0 6px 18px rgba(15, 23, 42, 0.07);
  --dv3-shadow-lg: 0 14px 36px rgba(15, 23, 42, 0.10);
  --dv3-shadow-cta: 0 8px 22px rgba(10, 168, 157, 0.28);

  --dv3-radius-sm: 0.5rem;
  --dv3-radius-md: 0.75rem;
  --dv3-radius-lg: 1rem;
  --dv3-radius-xl: 1.25rem;
  --dv3-radius-pill: 999px;

  --dv3-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans Arabic", sans-serif;

  background: var(--dv3-bg) !important;
  color: var(--dv3-text);
  font-family: var(--dv3-font);
  font-feature-settings: "tnum" 1;
}

/* ---------------------------------------------------------------------------
   1b. DARK THEME (body.dv3-page.dv3-page--dark) — token overrides + surfaces
   that use hardcoded light-only colors in section 3+.
   --------------------------------------------------------------------------- */

body.dv3-page.dv3-page--dark {
  color-scheme: dark;
  --dv3-bg: #070b12;
  --dv3-bg-soft: #0c1220;
  --dv3-surface: #111827;
  --dv3-surface-soft: #151f33;
  --dv3-rim: rgba(148, 163, 184, 0.14);
  --dv3-rim-strong: rgba(148, 163, 184, 0.26);
  --dv3-text: #f1f5f9;
  --dv3-text-soft: #cbd5e1;
  --dv3-text-muted: #94a3b8;
  --dv3-text-faint: #64748b;

  --dv3-teal: #2dd4bf;
  --dv3-teal-deep: #14b8a6;
  --dv3-teal-bright: #5eead4;
  --dv3-teal-soft: rgba(45, 212, 191, 0.14);

  --dv3-gold: #fbbf24;
  --dv3-gold-bright: #fde68a;
  --dv3-coral: #fb7185;
  --dv3-emerald: #34d399;
  --dv3-emerald-deep: #6ee7b7;

  --dv3-shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.4);
  --dv3-shadow-md: 0 10px 28px rgba(0, 0, 0, 0.5);
  --dv3-shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.58);
  --dv3-shadow-cta: 0 10px 32px rgba(20, 184, 166, 0.38);
}

body.dv3-page.dv3-page--dark .dv3-hero {
  background:
    radial-gradient(ellipse 80% 70% at 50% 0%, rgba(45, 212, 191, 0.16) 0%, transparent 58%),
    radial-gradient(ellipse 60% 50% at 100% 100%, rgba(251, 191, 36, 0.09) 0%, transparent 62%),
    linear-gradient(180deg, #141c2e 0%, #0b101c 100%);
  border-color: var(--dv3-rim-strong);
  box-shadow: var(--dv3-shadow-md);
}

body.dv3-page.dv3-page--dark .dv3-hero__eyebrow {
  background: rgba(45, 212, 191, 0.12);
  border-color: rgba(45, 212, 191, 0.45);
  color: var(--dv3-teal-bright);
}

body.dv3-page.dv3-page--dark .dv3-hero__cta--ghost:hover {
  background: rgba(45, 212, 191, 0.1);
  border-color: rgba(45, 212, 191, 0.5);
  color: var(--dv3-teal-bright);
}

body.dv3-page.dv3-page--dark .dv3-chip:hover {
  background: rgba(45, 212, 191, 0.1);
  border-color: rgba(45, 212, 191, 0.45);
  color: var(--dv3-teal-bright);
}

body.dv3-page.dv3-page--dark .dv3-chip--area.is-active {
  border-color: #d97706;
  color: #0f172a;
}

body.dv3-page.dv3-page--dark .dv3-chip--area.dv3-chip--empty:not(.is-active) {
  opacity: 0.4;
  color: rgba(148, 163, 184, 0.75);
  border-color: rgba(71, 85, 105, 0.45);
}

body.dv3-page.dv3-page--dark .dv3-chip--area.dv3-chip--empty:not(.is-active):hover {
  background: rgba(15, 23, 42, 0.5);
  border-color: rgba(71, 85, 105, 0.55);
  color: rgba(148, 163, 184, 0.85);
}

body.dv3-page.dv3-page--dark .dv3-sort-pill:hover {
  background: rgba(45, 212, 191, 0.1);
  color: var(--dv3-teal-bright);
}

body.dv3-page.dv3-page--dark .dv3-card:hover {
  border-color: rgba(45, 212, 191, 0.42);
}

body.dv3-page.dv3-page--dark .dv3-card--premium {
  background:
    linear-gradient(165deg, rgba(45, 212, 191, 0.09) 0%, transparent 38%),
    var(--dv3-surface);
}

body.dv3-page.dv3-page--dark .dv3-scene--cool {
  background: linear-gradient(135deg, #0d2f2c 0%, #132a4a 55%, #1a1740 100%);
  color: #7dd3fc;
}

body.dv3-page.dv3-page--dark .dv3-scene--warm {
  background: linear-gradient(135deg, #3a2810 0%, #422006 55%, #451a03 100%);
  color: #fcd34d;
}

body.dv3-page.dv3-page--dark .dv3-scene--rose {
  background: linear-gradient(135deg, #3b1530 0%, #3f0d24 55%, #2a0a1f 100%);
  color: #fda4af;
}

body.dv3-page.dv3-page--dark .dv3-card__avatar {
  background: var(--dv3-surface-soft);
  color: var(--dv3-text);
  border-color: var(--dv3-rim-strong);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.45);
}

body.dv3-page.dv3-page--dark .dv3-card__rating-pill,
body.dv3-page.dv3-page--dark .dv3-card__fav {
  background: rgba(15, 23, 42, 0.72);
  border-color: rgba(148, 163, 184, 0.28);
  color: var(--dv3-text);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}

body.dv3-page.dv3-page--dark .dv3-card__fav[aria-pressed="true"] {
  background: var(--dv3-coral);
  color: #0b1220;
  border-color: var(--dv3-coral);
}

body.dv3-page.dv3-page--dark .dv3-card__trust-pill--verified {
  background: rgba(52, 211, 153, 0.14);
  color: var(--dv3-emerald-deep);
  border-color: rgba(52, 211, 153, 0.35);
}

body.dv3-page.dv3-page--dark .dv3-card__trust-pill--unclaimed {
  background: rgba(251, 191, 36, 0.12);
  color: #fcd34d;
  border-color: rgba(251, 191, 36, 0.35);
}

body.dv3-page.dv3-page--dark .dv3-card__trust-pill--score {
  background: var(--dv3-bg-soft);
  color: var(--dv3-text-soft);
}

body.dv3-page.dv3-page--dark .dv3-card__claim {
  background: rgba(251, 191, 36, 0.1);
  border-color: rgba(251, 191, 36, 0.38);
  color: #fde68a;
}

body.dv3-page.dv3-page--dark .dv3-card__claim:hover {
  background: rgba(251, 191, 36, 0.16);
  color: #fffbeb;
}

body.dv3-page.dv3-page--dark .dv3-nearest__head {
  background: linear-gradient(135deg, rgba(45, 212, 191, 0.12) 0%, rgba(251, 191, 36, 0.08) 100%);
  border-color: rgba(45, 212, 191, 0.32);
}

body.dv3-page.dv3-page--dark .dv3-pagination a:hover {
  background: rgba(45, 212, 191, 0.1);
  border-color: rgba(45, 212, 191, 0.45);
  color: var(--dv3-teal-bright);
}

body.dv3-page * {
  box-sizing: border-box;
}

/* Wipe inherited dark theme bleed from site-wide stylesheets */
body.dv3-page .dv3-app {
  background: var(--dv3-bg);
  color: var(--dv3-text);
  min-height: 100vh;
}

body.dv3-page .dv3-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================================
   2. PAGE LAYOUT
   ============================================================================ */

body.dv3-page .dv3-app {
  max-width: 1280px;
  margin: 0 auto;
  padding: 1rem 1rem 4rem;
}

@media (min-width: 768px) {
  body.dv3-page .dv3-app {
    padding: 1.5rem 1.5rem 4rem;
  }
}

@media (min-width: 1024px) {
  body.dv3-page .dv3-app {
    padding: 2rem 2rem 5rem;
  }
}

/* ============================================================================
   3. SLIM TOP BAR (consult CTA + lang)
   ============================================================================ */

body.dv3-page .dv3-topbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

body.dv3-page [dir="rtl"] .dv3-topbar,
html[dir="rtl"] body.dv3-page .dv3-topbar {
  justify-content: flex-start;
}

body.dv3-page .dv3-topbar a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 40px;
  padding: 0.5rem 1rem;
  border-radius: var(--dv3-radius-pill);
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

body.dv3-page .dv3-topbar a:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
}

body.dv3-page .dv3-topbar__consult {
  background: linear-gradient(90deg, #34d399, #059669);
  color: #fff;
  box-shadow: 0 8px 22px rgba(16, 185, 129, 0.28);
}

body.dv3-page .dv3-topbar__lang,
body.dv3-page .dv3-topbar__theme {
  background: var(--dv3-surface);
  color: var(--dv3-text);
  border: 1px solid var(--dv3-rim-strong);
}

/* ============================================================================
   4. HERO
   ============================================================================ */

body.dv3-page .dv3-hero {
  position: relative;
  overflow: hidden;
  margin-bottom: 1.5rem;
  padding: 2.25rem 1.25rem 2rem;
  border-radius: var(--dv3-radius-xl);
  background:
    radial-gradient(ellipse 80% 70% at 50% 0%, rgba(10, 168, 157, 0.10) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 100% 100%, rgba(245, 158, 11, 0.06) 0%, transparent 65%),
    linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
  border: 1px solid var(--dv3-rim);
  box-shadow: var(--dv3-shadow-md);
  text-align: center;
}

@media (min-width: 768px) {
  body.dv3-page .dv3-hero {
    padding: 3rem 2rem 2.25rem;
    margin-bottom: 2rem;
  }
}

body.dv3-page .dv3-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

body.dv3-page .dv3-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0.4rem 1rem;
  border-radius: var(--dv3-radius-pill);
  background: var(--dv3-teal-soft);
  border: 1px solid rgba(10, 168, 157, 0.35);
  color: var(--dv3-teal-deep);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

html[dir="rtl"] body.dv3-page .dv3-hero__eyebrow {
  letter-spacing: 0.04em;
  text-transform: none;
  font-size: 0.78rem;
}

body.dv3-page .dv3-hero__pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--dv3-teal);
  box-shadow: 0 0 8px rgba(10, 168, 157, 0.7);
  animation: dv3Pulse 2.2s ease-in-out infinite;
}

@keyframes dv3Pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(0.85); opacity: 0.55; }
}

body.dv3-page .dv3-hero__title {
  margin: 0;
  font-size: clamp(1.75rem, 6vw, 3.25rem);
  font-weight: 900;
  letter-spacing: -0.025em;
  line-height: 1.08;
  color: var(--dv3-text);
  max-width: 20ch;
}

html[dir="rtl"] body.dv3-page .dv3-hero__title {
  max-width: 22ch;
}

body.dv3-page .dv3-hero__stat {
  margin: 0;
  font-size: 1rem;
  color: var(--dv3-text-soft);
  line-height: 1.55;
  max-width: 60ch;
}

@media (min-width: 768px) {
  body.dv3-page .dv3-hero__stat {
    font-size: 1.1rem;
  }
}

/* Search bar */
body.dv3-page .dv3-hero__search {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  max-width: 600px;
  margin-top: 0.5rem;
  padding: 0.5rem;
  background: var(--dv3-surface);
  border: 1px solid var(--dv3-rim-strong);
  border-radius: var(--dv3-radius-lg);
  box-shadow: var(--dv3-shadow-sm);
  flex-wrap: wrap;
}

body.dv3-page .dv3-hero__search-label {
  display: inline-flex;
  align-items: center;
  padding-inline-start: 0.5rem;
  color: var(--dv3-text-muted);
}

body.dv3-page .dv3-hero__search-icon {
  display: block;
}

body.dv3-page .dv3-hero__search-input {
  flex: 1 1 200px;
  min-width: 0;
  min-height: 44px;
  padding: 0 0.75rem;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 1rem;
  color: var(--dv3-text);
  outline: none;
}

body.dv3-page .dv3-hero__search-input::placeholder {
  color: var(--dv3-text-muted);
}

body.dv3-page .dv3-hero__search-input:focus {
  outline: 2px solid var(--dv3-teal);
  outline-offset: 2px;
  border-radius: var(--dv3-radius-sm);
}

body.dv3-page .dv3-hero__search-submit {
  min-height: 44px;
  padding: 0.55rem 1.2rem;
  border: 0;
  border-radius: var(--dv3-radius-md);
  background: linear-gradient(135deg, var(--dv3-teal-deep) 0%, var(--dv3-teal) 100%);
  color: #FFFFFF;
  font-weight: 800;
  font-size: 0.95rem;
  cursor: pointer;
  box-shadow: var(--dv3-shadow-cta);
  transition: transform 0.18s ease, filter 0.18s ease;
}

body.dv3-page .dv3-hero__search-submit:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
}

body.dv3-page .dv3-hero__search-submit:focus-visible {
  outline: 2px solid var(--dv3-teal);
  outline-offset: 3px;
}

/* Hero action row (Free consult + Near me) */
body.dv3-page .dv3-hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 0.4rem;
}

body.dv3-page .dv3-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  padding: 0.5rem 1.1rem;
  border-radius: var(--dv3-radius-pill);
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
  border: 1px solid transparent;
  cursor: pointer;
  font-family: inherit;
}

body.dv3-page .dv3-hero__cta--primary {
  background: linear-gradient(135deg, #34d399, #059669);
  color: #FFFFFF;
  border: 0;
  box-shadow: 0 8px 22px rgba(16, 185, 129, 0.26);
}

body.dv3-page .dv3-hero__cta--primary:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
}

body.dv3-page .dv3-hero__cta--ghost {
  background: var(--dv3-surface);
  border-color: var(--dv3-rim-strong);
  color: var(--dv3-text);
}

body.dv3-page .dv3-hero__cta--ghost:hover {
  background: var(--dv3-teal-soft);
  border-color: rgba(10, 168, 157, 0.45);
  color: var(--dv3-teal-deep);
}

/* ── Photo-backed hero overrides (compact + human) ── */
body.dv3-page .dv3-hero--photo {
  padding: 1.5rem 1rem 1.25rem;
  margin-bottom: 1rem;
  isolation: isolate;
  background:
    /* warm soft wash on top of the photo */
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.78) 0%,
      rgba(255, 255, 255, 0.88) 55%,
      rgba(248, 250, 252, 0.96) 100%),
    var(--dv3-hero-img) center/cover no-repeat,
    #F8FAFC;
}

@media (min-width: 768px) {
  body.dv3-page .dv3-hero--photo {
    padding: 2rem 1.75rem 1.5rem;
    margin-bottom: 1.25rem;
  }
}

/* Photo grain layer — softens the AI look, adds depth */
body.dv3-page .dv3-hero--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(10, 168, 157, 0.08), transparent 65%),
    radial-gradient(ellipse 50% 40% at 90% 100%, rgba(245, 158, 11, 0.07), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* Shrink hero internals when in photo mode */
body.dv3-page .dv3-hero--photo .dv3-hero__inner {
  gap: 0.65rem;
}

body.dv3-page .dv3-hero--photo .dv3-hero__title {
  font-size: clamp(1.35rem, 4.6vw, 2.25rem);
  letter-spacing: -0.015em;
  line-height: 1.15;
  max-width: 28ch;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}

body.dv3-page .dv3-hero--photo .dv3-hero__stat {
  font-size: 0.88rem;
  line-height: 1.45;
}

@media (min-width: 768px) {
  body.dv3-page .dv3-hero--photo .dv3-hero__stat {
    font-size: 0.95rem;
  }
}

body.dv3-page .dv3-hero--photo .dv3-hero__search {
  margin-top: 0.25rem;
  padding: 0.35rem;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

body.dv3-page .dv3-hero--photo .dv3-hero__actions {
  margin-top: 0.15rem;
}

body.dv3-page .dv3-hero--photo .dv3-hero__cta {
  min-height: 38px;
  padding: 0.4rem 0.95rem;
  font-size: 0.83rem;
}

/* ── Quick-link chips (single inline row) ── */
body.dv3-page .dv3-quick {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.35rem 0.5rem;
  margin-top: 0.55rem;
  max-width: 100%;
}

body.dv3-page .dv3-quick__label {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--dv3-text-muted);
  letter-spacing: 0.01em;
}

body.dv3-page .dv3-quick__chip {
  display: inline-flex;
  align-items: center;
  padding: 0.28rem 0.7rem;
  border-radius: var(--dv3-radius-pill);
  border: 1px solid var(--dv3-rim-strong);
  background: rgba(255, 255, 255, 0.85);
  color: var(--dv3-text-soft);
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
  line-height: 1.2;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

body.dv3-page .dv3-quick__chip:hover {
  background: var(--dv3-teal-soft);
  border-color: rgba(10, 168, 157, 0.45);
  color: var(--dv3-teal-deep);
}

body.dv3-page .dv3-quick__chip.is-active {
  background: var(--dv3-teal);
  border-color: var(--dv3-teal-deep);
  color: #fff;
}

/* ── Dark theme: warm, human, not "AI default" ── */
@media (prefers-color-scheme: dark) {
  body.dv3-page .dv3-hero--photo {
    background:
      linear-gradient(180deg,
        rgba(15, 23, 32, 0.62) 0%,
        rgba(15, 23, 32, 0.78) 60%,
        rgba(11, 17, 25, 0.92) 100%),
      var(--dv3-hero-img) center/cover no-repeat,
      #0B1119;
    border-color: rgba(255, 255, 255, 0.06);
  }
  body.dv3-page .dv3-hero--photo::before {
    background:
      radial-gradient(ellipse 70% 50% at 50% 0%, rgba(10, 168, 157, 0.18), transparent 65%),
      radial-gradient(ellipse 50% 40% at 90% 100%, rgba(245, 158, 11, 0.12), transparent 70%);
  }
  body.dv3-page .dv3-hero--photo .dv3-hero__title {
    color: #F5F7FA;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55);
  }
  body.dv3-page .dv3-hero--photo .dv3-hero__stat {
    color: rgba(229, 231, 235, 0.85);
  }
  body.dv3-page .dv3-hero--photo .dv3-hero__search {
    background: rgba(20, 28, 38, 0.85);
    border-color: rgba(255, 255, 255, 0.1);
  }
  body.dv3-page .dv3-quick__chip {
    background: rgba(20, 28, 38, 0.7);
    border-color: rgba(255, 255, 255, 0.12);
    color: rgba(229, 231, 235, 0.9);
  }
  body.dv3-page .dv3-quick__chip:hover {
    background: rgba(10, 168, 157, 0.18);
    border-color: rgba(45, 212, 191, 0.5);
    color: #5EEAD4;
  }
  body.dv3-page .dv3-quick__label {
    color: rgba(229, 231, 235, 0.7);
  }
}

/* Same dark treatment when site uses explicit dark class */
html.dark body.dv3-page .dv3-hero--photo,
[data-theme="dark"] body.dv3-page .dv3-hero--photo {
  background:
    linear-gradient(180deg,
      rgba(15, 23, 32, 0.62) 0%,
      rgba(15, 23, 32, 0.78) 60%,
      rgba(11, 17, 25, 0.92) 100%),
    var(--dv3-hero-img) center/cover no-repeat,
    #0B1119;
  border-color: rgba(255, 255, 255, 0.06);
}
html.dark body.dv3-page .dv3-hero--photo .dv3-hero__title,
[data-theme="dark"] body.dv3-page .dv3-hero--photo .dv3-hero__title {
  color: #F5F7FA;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55);
}
html.dark body.dv3-page .dv3-hero--photo .dv3-hero__search,
[data-theme="dark"] body.dv3-page .dv3-hero--photo .dv3-hero__search {
  background: rgba(20, 28, 38, 0.85);
  border-color: rgba(255, 255, 255, 0.1);
}
html.dark body.dv3-page .dv3-quick__chip,
[data-theme="dark"] body.dv3-page .dv3-quick__chip {
  background: rgba(20, 28, 38, 0.7);
  border-color: rgba(255, 255, 255, 0.12);
  color: rgba(229, 231, 235, 0.9);
}

/* ============================================================================
   5. CHIPS (governorate + area)
   ============================================================================ */

body.dv3-page .dv3-chips {
  margin: 0 0 1rem;
}

body.dv3-page .dv3-chips__label {
  margin: 0 0 0.5rem;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dv3-text-muted);
}

html[dir="rtl"] body.dv3-page .dv3-chips__label {
  letter-spacing: 0.04em;
  text-transform: none;
  font-size: 0.78rem;
}

body.dv3-page .dv3-chips__row {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

body.dv3-page .dv3-chip {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0.4rem 0.95rem;
  border-radius: var(--dv3-radius-pill);
  background: var(--dv3-surface);
  border: 1px solid var(--dv3-rim-strong);
  color: var(--dv3-text-soft);
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

body.dv3-page .dv3-chip:hover {
  background: var(--dv3-teal-soft);
  border-color: rgba(10, 168, 157, 0.4);
  color: var(--dv3-teal-deep);
  transform: translateY(-1px);
}

body.dv3-page .dv3-chip.is-active {
  background: var(--dv3-teal);
  border-color: var(--dv3-teal-deep);
  color: #FFFFFF;
  box-shadow: 0 4px 12px rgba(10, 168, 157, 0.28);
}

body.dv3-page .dv3-chip--area.is-active {
  background: var(--dv3-gold);
  border-color: #B45309;
  color: #1A0B06;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.28);
}

/* No hybrid listings in this area (still a crawlable link; muted for scanability). */
body.dv3-page .dv3-chip--area.dv3-chip--empty:not(.is-active) {
  opacity: 0.42;
  color: var(--dv3-text-muted);
  border-color: rgba(100, 116, 139, 0.35);
  cursor: help;
}

body.dv3-page .dv3-chip--area.dv3-chip--empty:not(.is-active):hover {
  background: var(--dv3-surface);
  border-color: rgba(100, 116, 139, 0.45);
  color: var(--dv3-text-muted);
  transform: none;
}

/* ============================================================================
   6. FILTER STRIP (sort pills)
   ============================================================================ */

body.dv3-page .dv3-filter-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin: 1.5rem 0 1rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--dv3-rim);
  background: var(--dv3-surface);
  border-radius: var(--dv3-radius-lg);
  box-shadow: var(--dv3-shadow-sm);
}

body.dv3-page .dv3-filter-strip__label {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--dv3-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

html[dir="rtl"] body.dv3-page .dv3-filter-strip__label {
  letter-spacing: 0.02em;
  text-transform: none;
}

body.dv3-page .dv3-filter-strip__row {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

body.dv3-page .dv3-sort-pill {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0.35rem 0.95rem;
  border-radius: var(--dv3-radius-pill);
  background: var(--dv3-bg-soft);
  border: 1px solid transparent;
  color: var(--dv3-text-soft);
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

body.dv3-page .dv3-sort-pill:hover {
  background: var(--dv3-teal-soft);
  color: var(--dv3-teal-deep);
}

body.dv3-page .dv3-sort-pill.is-active {
  background: var(--dv3-teal);
  border-color: var(--dv3-teal-deep);
  color: #FFFFFF;
}

/* ============================================================================
   7. MAP SHELL (collapsible)
   ============================================================================ */

body.dv3-page .dv3-map {
  margin: 0 0 1.5rem;
  border: 1px solid var(--dv3-rim);
  background: var(--dv3-surface);
  border-radius: var(--dv3-radius-lg);
  box-shadow: var(--dv3-shadow-sm);
}

body.dv3-page .dv3-map__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.85rem 1.1rem;
  cursor: pointer;
  list-style: none;
  font-weight: 800;
  color: var(--dv3-text);
}

body.dv3-page .dv3-map__summary::-webkit-details-marker {
  display: none;
}

body.dv3-page .dv3-map__title {
  font-size: 0.95rem;
}

body.dv3-page .dv3-map__count {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--dv3-text-muted);
}

body.dv3-page .dv3-map[open] .dv3-map__summary {
  border-bottom: 1px solid var(--dv3-rim);
}

body.dv3-page .dv3-map__body {
  padding: 0.85rem 1.1rem 1.1rem;
}

body.dv3-page .dv3-map__note {
  margin: 0 0 0.75rem;
  color: var(--dv3-text-muted);
  font-size: 0.8rem;
}

body.dv3-page .dv3-map__cta-wrap {
  margin: 0 0 0.85rem;
  padding: 0.65rem 0.75rem;
  border-radius: var(--dv3-radius-md);
  background: rgba(15, 23, 42, 0.06);
  border: 1px solid rgba(15, 23, 42, 0.08);
  font-size: 0.82rem;
  line-height: 1.45;
}

body.dv3-page .dv3-map__cta-lead {
  display: block;
  margin: 0 0 0.5rem;
  color: var(--dv3-text-muted);
}

body.dv3-page .dv3-map__cta-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.82rem;
  text-decoration: none;
  color: #fff;
  background: linear-gradient(135deg, #0d9488, #0f766e);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12);
}

body.dv3-page .dv3-map__cta-link:hover,
body.dv3-page .dv3-map__cta-link:focus-visible {
  filter: brightness(1.05);
  outline: 2px solid rgba(13, 148, 136, 0.45);
  outline-offset: 2px;
}

body.dv3-page .dv3-map__canvas {
  height: 280px;
  border-radius: var(--dv3-radius-md);
  background: var(--dv3-bg-soft);
  border: 1px solid var(--dv3-rim);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--dv3-text-muted);
  font-size: 0.85rem;
}

body.dv3-page .dv3-map__canvas:not(:empty)::before {
  content: none;
}

/* Google Maps InfoWindow (pin click) */
body.dv3-page .dv3-map-infowindow {
  max-width: 280px;
  padding: 0.15rem 0.1rem 0.35rem;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color: #0f172a;
  line-height: 1.4;
  text-align: start;
}

body.dv3-page .dv3-map-infowindow__name {
  font-weight: 800;
  font-size: 0.95rem;
  margin: 0 0 0.35rem;
  letter-spacing: -0.01em;
}

body.dv3-page .dv3-map-infowindow__addr {
  font-size: 0.82rem;
  color: #334155;
  margin: 0 0 0.45rem;
  white-space: pre-wrap;
  word-break: break-word;
}

body.dv3-page .dv3-map-infowindow__meta {
  font-size: 0.8rem;
  color: #0d9488;
  font-weight: 600;
  margin: 0 0 0.5rem;
}

body.dv3-page .dv3-map-infowindow__link {
  display: inline-block;
  margin-top: 0.15rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: #0d9488;
  text-decoration: underline;
  text-underline-offset: 2px;
}

body.dv3-page .dv3-map-infowindow__link--secondary {
  color: #0369a1;
}

body.dv3-page .dv3-map-infowindow__cta {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  margin-top: 0.55rem;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 800;
  text-decoration: none;
  color: #fff;
  background: linear-gradient(135deg, #0d9488, #0f766e);
  border: 1px solid rgba(255, 255, 255, 0.12);
  line-height: 1.25;
  max-width: 100%;
  box-sizing: border-box;
}

body.dv3-page .dv3-map-infowindow__cta:hover,
body.dv3-page .dv3-map-infowindow__cta:focus-visible {
  filter: brightness(1.05);
  outline: 2px solid rgba(13, 148, 136, 0.45);
  outline-offset: 2px;
}

/* ============================================================================
   8. LISTINGS HEADER
   ============================================================================ */

body.dv3-page .dv3-listings-head {
  margin: 1rem 0 1rem;
}

body.dv3-page .dv3-listings-head__title {
  margin: 0 0 0.3rem;
  font-size: clamp(1.4rem, 3.2vw, 2rem);
  font-weight: 900;
  color: var(--dv3-text);
  letter-spacing: -0.02em;
  line-height: 1.15;
}

body.dv3-page .dv3-listings-head__sub {
  margin: 0;
  color: var(--dv3-text-muted);
  font-size: 0.85rem;
}

/* ============================================================================
   9. CARD GRID
   ============================================================================ */

body.dv3-page .dv3-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* minmax(0, 1fr) prevents a long claim line / label from setting a huge
     min-content width and breaking equal columns (narrow card + two wide). */
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  /* Stretch row height to the tallest card so CTAs line up; `.dv3-card__media`
     stays a fixed flex-basis so photos/placeholders never absorb extra height. */
  align-items: stretch;
}

@media (min-width: 640px) {
  body.dv3-page .dv3-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.15rem;
  }
}

@media (min-width: 1024px) {
  body.dv3-page .dv3-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
  }
}

body.dv3-page .dv3-card-wrap {
  display: flex;
  width: 100%;
  min-width: 0;
  min-height: 0;
  height: 100%;
}

/* ============================================================================
   10. CARD
   ============================================================================ */

body.dv3-page .dv3-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  background: var(--dv3-surface);
  border: 1px solid var(--dv3-rim);
  border-radius: var(--dv3-radius-xl);
  overflow: hidden;
  box-shadow: var(--dv3-shadow-sm);
  transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.22s ease, border-color 0.22s ease;
  /* Intentionally NO `content-visibility: auto` here: with `contain-intrinsic-size`
     the browser can defer measuring card subtrees and then relayout minutes later
     (scroll/resize/font swap), which produced sudden vertical "stretch" jumps. */
}

body.dv3-page .dv3-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--dv3-shadow-lg);
  border-color: rgba(10, 168, 157, 0.28);
}

body.dv3-page .dv3-card--premium {
  border-color: rgba(10, 168, 157, 0.32);
  background:
    linear-gradient(165deg, rgba(10, 168, 157, 0.05) 0%, transparent 35%),
    var(--dv3-surface);
}

body.dv3-page .dv3-card--external {
  border-color: rgba(245, 158, 11, 0.22);
}

/* ----- Media (photo or placeholder scene) ----- */
body.dv3-page .dv3-card__media {
  position: relative;
  width: 100%;
  /* Hard lock at 168px regardless of card height. Without `flex: 0 0 168px`
     the media's `flex-shrink: 1` default lets the row-stretching cascade
     resize it on some browsers, which makes the placeholder pattern look
     "overstretched". */
  flex: 0 0 168px;
  height: 168px;
  min-height: 168px;
  max-height: 168px;
  overflow: hidden;
  background: var(--dv3-bg-soft);
}

body.dv3-page .dv3-card__photo,
body.dv3-page .dv3-card__vibe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

body.dv3-page .dv3-card__vibe {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
}

body.dv3-page .dv3-card.is-vibe-playing .dv3-card__vibe {
  opacity: 1;
}

body.dv3-page .dv3-card.is-vibe-playing .dv3-card__photo {
  opacity: 0;
}

/* Placeholder cards: scene gradient + dental crown SVG pattern + centered initial */
body.dv3-page .dv3-card__media--placeholder .dv3-card__scene {
  position: absolute;
  inset: 0;
  display: block;
  background-image:
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='currentColor' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round' opacity='0.18'%3E%3Cpath d='M28 12c-3 0-5 2-5 5 0 3 2 4 2 8 0 3-1 5-1 10 0 2 1 4 4 4s4-2 4-4c0-5-1-7-1-10 0-4 2-5 2-8 0-3-2-5-5-5z'/%3E%3Cpath d='M14 36c0-2 2-3 4-3M42 36c0-2-2-3-4-3'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat;
  background-position: center;
  pointer-events: none;
}

body.dv3-page .dv3-scene--cool {
  background: linear-gradient(135deg, #E6F7F5 0%, #F4F7FB 60%, #EFF6FF 100%);
  color: var(--dv3-teal-deep);
}

body.dv3-page .dv3-scene--warm {
  background: linear-gradient(135deg, #FFF4E6 0%, #FFF8F1 60%, #FFEDDB 100%);
  color: #B45309;
}

body.dv3-page .dv3-scene--rose {
  background: linear-gradient(135deg, #FFE9EC 0%, #FFF3F5 60%, #FBE9F2 100%);
  color: #BE185D;
}

body.dv3-page .dv3-card__avatar {
  position: absolute;
  inset-block-end: 12px;
  inset-inline-start: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #FFFFFF;
  color: var(--dv3-text);
  font-size: 1.5rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  border: 3px solid #FFFFFF;
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.16);
}

/* ----- Overlays ----- */
body.dv3-page .dv3-card__rating-pill {
  position: absolute;
  top: 0.75rem;
  inset-inline-end: 0.75rem;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.32rem 0.7rem;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--dv3-rim);
  border-radius: var(--dv3-radius-pill);
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--dv3-text);
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.08);
}

body.dv3-page .dv3-card__rating-pill svg {
  color: var(--dv3-gold);
}

body.dv3-page .dv3-card__rating-pill span {
  color: var(--dv3-text-muted);
  font-weight: 700;
  font-size: 0.74rem;
}

body.dv3-page .dv3-card__fav {
  position: absolute;
  top: 0.75rem;
  inset-inline-start: 0.75rem;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--dv3-rim);
  border-radius: 50%;
  color: var(--dv3-coral);
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.08);
  cursor: pointer;
  transition: background 0.18s ease, transform 0.18s ease, color 0.18s ease;
}

body.dv3-page .dv3-card__fav:hover {
  transform: scale(1.05);
}

body.dv3-page .dv3-card__fav[aria-pressed="true"] {
  background: var(--dv3-coral);
  color: #FFFFFF;
  border-color: var(--dv3-coral);
}

body.dv3-page .dv3-card__elite {
  position: absolute;
  top: 0.75rem;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: linear-gradient(135deg, var(--dv3-teal) 0%, var(--dv3-teal-bright) 100%);
  color: #FFFFFF;
  border-radius: 50%;
  box-shadow: 0 4px 10px rgba(10, 168, 157, 0.35);
}

html[dir="rtl"] body.dv3-page .dv3-card__elite {
  transform: translateX(50%);
}

/* ----- Body ----- */
body.dv3-page .dv3-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 1rem 1.1rem 1.1rem;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
}

body.dv3-page .dv3-card__name {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--dv3-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (min-width: 1024px) {
  body.dv3-page .dv3-card__name {
    font-size: 1.1rem;
  }
}

body.dv3-page .dv3-card__specialty {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--dv3-teal-deep);
}

body.dv3-page .dv3-card__location {
  margin: 0;
  display: inline-flex;
  align-items: flex-start;
  gap: 0.4rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--dv3-text-soft);
  line-height: 1.4;
}

body.dv3-page .dv3-card__location svg {
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--dv3-teal);
}

body.dv3-page .dv3-card__location span {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}

body.dv3-page .dv3-card__chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

body.dv3-page .dv3-card__chip {
  display: inline-flex;
  align-items: center;
  padding: 0.22rem 0.6rem;
  border-radius: var(--dv3-radius-sm);
  background: var(--dv3-teal-soft);
  border: 1px solid rgba(10, 168, 157, 0.32);
  color: var(--dv3-teal-deep);
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

html[dir="rtl"] body.dv3-page .dv3-card__chip {
  text-transform: none;
  letter-spacing: 0;
}

body.dv3-page .dv3-card__trust {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

body.dv3-page .dv3-card__trust-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.22rem 0.65rem;
  border-radius: var(--dv3-radius-pill);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

body.dv3-page .dv3-card__trust-pill--verified {
  background: rgba(16, 185, 129, 0.12);
  color: var(--dv3-emerald-deep);
  border: 1px solid rgba(16, 185, 129, 0.32);
}

body.dv3-page .dv3-card__trust-pill--verified svg {
  color: var(--dv3-emerald);
}

body.dv3-page .dv3-card__trust-pill--verified-soft {
  background: var(--dv3-teal-soft);
  color: var(--dv3-teal-deep);
  border: 1px solid rgba(10, 168, 157, 0.32);
}

body.dv3-page .dv3-card__trust-pill--unclaimed {
  background: rgba(245, 158, 11, 0.12);
  color: #92400E;
  border: 1px solid rgba(245, 158, 11, 0.32);
}

body.dv3-page .dv3-card__trust-pill--score {
  background: var(--dv3-bg-soft);
  color: var(--dv3-text-soft);
  border: 1px solid var(--dv3-rim);
}

/* ----- Actions ----- */
body.dv3-page .dv3-card__actions {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

body.dv3-page .dv3-card__primary {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  min-height: 52px;
  padding: 0.65rem 0.85rem;
  border-radius: var(--dv3-radius-md);
  background: linear-gradient(135deg, var(--dv3-teal-deep) 0%, var(--dv3-teal) 100%);
  color: #FFFFFF;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  box-shadow: var(--dv3-shadow-cta);
  transition: transform 0.18s ease, filter 0.18s ease, box-shadow 0.18s ease;
}

body.dv3-page .dv3-card__primary:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
}

body.dv3-page .dv3-card__primary:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: 3px;
}

body.dv3-page .dv3-card__primary-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--dv3-radius-sm);
  background: rgba(255, 255, 255, 0.2);
  color: #FFFFFF;
  flex-shrink: 0;
}

body.dv3-page .dv3-card__primary-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1 1 auto;
  min-width: 0;
}

html[dir="rtl"] body.dv3-page .dv3-card__primary-text {
  align-items: flex-end;
}

body.dv3-page .dv3-card__primary-label {
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1.15;
}

body.dv3-page .dv3-card__primary-sub {
  font-size: 0.68rem;
  font-weight: 600;
  opacity: 0.92;
  margin-top: 0.12rem;
}

body.dv3-page .dv3-card__primary-arrow {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.18s ease;
}

html[dir="rtl"] body.dv3-page .dv3-card__primary-arrow svg {
  transform: scaleX(-1);
}

body.dv3-page .dv3-card__primary:hover .dv3-card__primary-arrow {
  transform: translateX(3px);
}

html[dir="rtl"] body.dv3-page .dv3-card__primary:hover .dv3-card__primary-arrow {
  transform: translateX(-3px);
}

/* Quick actions: always 4 columns (Call / WhatsApp / Map / Details); PHP emits
   `.dv3-card__quick-placeholder` when an action is unavailable so widths match. */
body.dv3-page .dv3-card__quick {
  display: grid;
  width: 100%;
  min-width: 0;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.4rem;
}

body.dv3-page .dv3-card__quick-placeholder {
  min-height: 46px;
  min-width: 0;
  border-radius: var(--dv3-radius-md);
  border: 1px solid transparent;
  background: transparent;
  pointer-events: none;
}

body.dv3-page .dv3-card__quick-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  min-height: 46px;
  min-width: 0;
  padding: 0.4rem 0.2rem;
  border-radius: var(--dv3-radius-md);
  background: var(--dv3-bg-soft);
  border: 1px solid var(--dv3-rim);
  color: var(--dv3-text-soft);
  font-size: 0.66rem;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

body.dv3-page .dv3-card__quick-btn:hover {
  background: var(--dv3-teal-soft);
  border-color: rgba(10, 168, 157, 0.4);
  color: var(--dv3-teal-deep);
  transform: translateY(-1px);
}

body.dv3-page .dv3-card__quick-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

body.dv3-page .dv3-card__quick-btn span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}

body.dv3-page .dv3-card__quick-btn--call svg { color: var(--dv3-teal); }
body.dv3-page .dv3-card__quick-btn--wa svg { color: #25D366; }
body.dv3-page .dv3-card__quick-btn--maps svg { color: var(--dv3-gold); }
body.dv3-page .dv3-card__quick-btn--profile svg { color: var(--dv3-text-muted); }

body.dv3-page .dv3-card__claim {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 0.5rem;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 44px;
  padding: 0.4rem 0.85rem;
  border-radius: var(--dv3-radius-md);
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.32);
  color: #92400E;
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.18s ease, color 0.18s ease;
}

body.dv3-page .dv3-card__claim svg {
  color: var(--dv3-gold);
  flex-shrink: 0;
  margin-top: 0.12rem;
}

body.dv3-page .dv3-card__claim span {
  flex: 1 1 auto;
  min-width: 0;
  white-space: normal;
  line-height: 1.35;
}

body.dv3-page .dv3-card__claim:hover {
  background: rgba(245, 158, 11, 0.18);
  color: #78350F;
}

/* ============================================================================
   11. NEAREST FALLBACK + EMPTY STATE
   ============================================================================ */

body.dv3-page .dv3-nearest {
  margin-top: 2rem;
}

body.dv3-page .dv3-nearest__head {
  margin-bottom: 1rem;
  padding: 1.1rem 1.25rem;
  background: linear-gradient(135deg, rgba(10, 168, 157, 0.08) 0%, rgba(245, 158, 11, 0.05) 100%);
  border: 1px solid rgba(10, 168, 157, 0.22);
  border-radius: var(--dv3-radius-lg);
}

body.dv3-page .dv3-nearest__title {
  margin: 0 0 0.35rem;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--dv3-text);
}

body.dv3-page .dv3-nearest__sub {
  margin: 0;
  color: var(--dv3-text-soft);
  font-size: 0.88rem;
  line-height: 1.5;
}

body.dv3-page .dv3-empty {
  text-align: center;
  padding: 2.5rem 1.5rem;
  margin: 1rem 0;
  background: var(--dv3-surface);
  border: 1px solid var(--dv3-rim);
  border-radius: var(--dv3-radius-lg);
}

body.dv3-page .dv3-empty__title {
  margin: 0 0 0.5rem;
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--dv3-text);
}

body.dv3-page .dv3-empty__body {
  margin: 0 0 1.25rem;
  color: var(--dv3-text-soft);
  font-size: 0.95rem;
}

body.dv3-page .dv3-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 46px;
  padding: 0.55rem 1.3rem;
  border-radius: var(--dv3-radius-pill);
  font-size: 0.92rem;
  font-weight: 800;
  text-decoration: none;
  transition: transform 0.18s ease, filter 0.18s ease;
}

body.dv3-page .dv3-cta--primary {
  background: linear-gradient(135deg, var(--dv3-teal-deep) 0%, var(--dv3-teal) 100%);
  color: #FFFFFF;
  box-shadow: var(--dv3-shadow-cta);
}

body.dv3-page .dv3-cta--primary:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
}

/* ============================================================================
   12. PAGINATION
   ============================================================================ */

body.dv3-page .dv3-pagination {
  margin: 2rem 0 1rem;
  display: flex;
  justify-content: center;
}

body.dv3-page .dv3-pagination a,
body.dv3-page .dv3-pagination span {
  background: var(--dv3-surface);
  color: var(--dv3-text);
  border: 1px solid var(--dv3-rim-strong);
  border-radius: var(--dv3-radius-md);
}

body.dv3-page .dv3-pagination a:hover {
  background: var(--dv3-teal-soft);
  border-color: rgba(10, 168, 157, 0.45);
  color: var(--dv3-teal-deep);
}

body.dv3-page .dv3-pagination [aria-current],
body.dv3-page .dv3-pagination .is-current,
body.dv3-page .dv3-pagination .current {
  background: var(--dv3-teal);
  border-color: var(--dv3-teal-deep);
  color: #FFFFFF !important;
}

/* ============================================================================
   13. SEO + FAQ
   ============================================================================ */

body.dv3-page .dv3-seo {
  margin: 2rem 0;
  padding: 1.5rem;
  background: var(--dv3-surface);
  border: 1px solid var(--dv3-rim);
  border-radius: var(--dv3-radius-lg);
  box-shadow: var(--dv3-shadow-sm);
}

@media (min-width: 768px) {
  body.dv3-page .dv3-seo {
    padding: 1.85rem;
  }
}

body.dv3-page .dv3-seo__title {
  margin: 0 0 0.65rem;
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  font-weight: 800;
  color: var(--dv3-text);
  letter-spacing: -0.015em;
}

body.dv3-page .dv3-seo__body {
  margin: 0 0 0.75rem;
  color: var(--dv3-text-soft);
  font-size: 0.94rem;
  line-height: 1.65;
}

body.dv3-page .dv3-seo__body:last-child {
  margin-bottom: 0;
}

body.dv3-page .dv3-faq {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

body.dv3-page .dv3-faq__q {
  margin: 0 0 0.3rem;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--dv3-text);
}

body.dv3-page .dv3-faq__a {
  margin: 0;
  color: var(--dv3-text-soft);
  font-size: 0.9rem;
  line-height: 1.55;
}

/* ============================================================================
   14. MOBILE TWEAKS
   ============================================================================ */

@media (max-width: 639px) {
  body.dv3-page .dv3-hero__search {
    padding: 0.45rem;
  }

  body.dv3-page .dv3-hero__search-input {
    flex: 1 1 100%;
  }

  body.dv3-page .dv3-hero__search-submit {
    flex: 1 1 100%;
  }

  body.dv3-page .dv3-card__media {
    flex: 0 0 140px;
    height: 140px;
    min-height: 140px;
    max-height: 140px;
  }

  body.dv3-page .dv3-card__quick {
    gap: 0.35rem;
  }
}

@media (max-width: 380px) {
  body.dv3-page .dv3-card__quick {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ============================================================================
   15. CLINIC PROFILE (public /clinic/{slug} via clinic_page.php)
   ============================================================================ */

body.dv3-page .dv3-clinic-app .dv3-clinic-hero .dv3-hero__inner {
  max-width: 920px;
}

body.dv3-page .dv3-clinic-app .dv3-hero__title {
  max-width: 28ch;
}

html[dir="rtl"] body.dv3-page .dv3-clinic-app .dv3-hero__title {
  max-width: 32ch;
}

body.dv3-page .dv3-clinic-meta {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  width: 100%;
  max-width: 720px;
  margin-top: 0.35rem;
}

@media (min-width: 768px) {
  body.dv3-page .dv3-clinic-meta {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

body.dv3-page .dv3-clinic-meta__tile {
  margin: 0;
  padding: 1rem 1.05rem;
  border-radius: var(--dv3-radius-lg);
  border: 1px solid var(--dv3-rim);
  background: var(--dv3-surface);
  box-shadow: var(--dv3-shadow-sm);
  text-align: start;
}

body.dv3-page .dv3-clinic-meta__k {
  margin: 0 0 0.35rem;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dv3-text-muted);
}

html[dir="rtl"] body.dv3-page .dv3-clinic-meta__k {
  letter-spacing: 0.04em;
  text-transform: none;
  font-size: 0.74rem;
}

body.dv3-page .dv3-clinic-meta__v {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--dv3-text);
  line-height: 1.35;
}

body.dv3-page .dv3-clinic-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.55rem;
  margin-top: 0.35rem;
  width: 100%;
  max-width: 720px;
}

body.dv3-page .dv3-clinic-actions--secondary {
  margin-top: 0.85rem;
}

body.dv3-page .dv3-clinic-address {
  margin: 0;
  max-width: 62ch;
  font-size: 0.92rem;
  color: var(--dv3-text-soft);
  line-height: 1.55;
}

body.dv3-page .dv3-clinic-dentist-grid {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
}

@media (min-width: 768px) {
  body.dv3-page .dv3-clinic-dentist-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

body.dv3-page .dv3-clinic-dentist {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  padding: 1rem 1.05rem;
  border-radius: var(--dv3-radius-lg);
  border: 1px solid var(--dv3-rim);
  background: var(--dv3-surface-soft);
}

body.dv3-page .dv3-clinic-dentist__media {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: var(--dv3-radius-md);
  overflow: hidden;
  border: 1px solid var(--dv3-rim-strong);
  background: var(--dv3-surface);
  display: grid;
  place-items: center;
}

body.dv3-page .dv3-clinic-dentist__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

body.dv3-page .dv3-clinic-dentist__ph {
  font-size: 1.25rem;
  font-weight: 900;
  color: var(--dv3-teal-deep);
}

body.dv3-page .dv3-clinic-dentist__body {
  min-width: 0;
  flex: 1 1 auto;
}

body.dv3-page .dv3-clinic-dentist__name {
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
  color: var(--dv3-text);
}

body.dv3-page .dv3-clinic-dentist__spec {
  margin: 0.25rem 0 0;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--dv3-teal-deep);
}

body.dv3-page.dv3-page--dark .dv3-clinic-dentist__spec {
  color: var(--dv3-teal-bright);
}

body.dv3-page .dv3-clinic-dentist__hint {
  margin: 0.35rem 0 0;
  font-size: 0.78rem;
  color: var(--dv3-text-muted);
}

body.dv3-page .dv3-clinic-dentist__link {
  display: inline-flex;
  align-items: center;
  margin-top: 0.65rem;
  min-height: 44px;
  padding: 0.45rem 1rem;
  border-radius: var(--dv3-radius-pill);
  font-size: 0.82rem;
  font-weight: 800;
  text-decoration: none;
  border: 1px solid rgba(10, 168, 157, 0.45);
  background: var(--dv3-teal-soft);
  color: var(--dv3-teal-deep);
  transition: transform 0.18s ease, filter 0.18s ease, background 0.18s ease;
}

body.dv3-page .dv3-clinic-dentist__link:hover {
  transform: translateY(-1px);
  filter: brightness(1.02);
}

body.dv3-page.dv3-page--dark .dv3-clinic-dentist__link {
  border-color: rgba(45, 212, 191, 0.45);
  color: var(--dv3-teal-bright);
}

body.dv3-page .dv3-clinic-nav {
  margin: 0.35rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

body.dv3-page .dv3-clinic-nav--tight {
  margin-top: 0.65rem;
}

/* ============================================================================
   16. REDUCED MOTION
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
  body.dv3-page .dv3-card,
  body.dv3-page .dv3-card__primary,
  body.dv3-page .dv3-card__quick-btn,
  body.dv3-page .dv3-chip,
  body.dv3-page .dv3-hero__cta,
  body.dv3-page .dv3-hero__search-submit,
  body.dv3-page .dv3-clinic-dentist__link {
    transition: none !important;
  }
  body.dv3-page .dv3-hero__pulse {
    animation: none !important;
  }
  body.dv3-page * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================================
   PAGINATION — override leaky Tailwind arbitrary-value classes
   ============================================================================ */

body.dv3-page .dv3-pagination {
  margin: 1.25rem 0 2rem;
  width: 100%;
  display: flex;
  justify-content: center;
}

body.dv3-page .dv3-pagination .edc-pagination {
  width: 100%;
  max-width: 720px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

body.dv3-page .dv3-pagination .edc-pagination__summary {
  margin: 0;
  width: 100%;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--dv3-text-soft);
}

body.dv3-page .dv3-pagination > nav > div {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
}

/* All page buttons — uniform pill */
body.dv3-page .dv3-pagination .edc-pagination__num,
body.dv3-page .dv3-pagination .edc-pagination__current,
body.dv3-page .dv3-pagination .edc-pagination__prev,
body.dv3-page .dv3-pagination .edc-pagination__next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  height: 40px;
  min-width: 40px;
  padding: 0 0.75rem;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  border: 1px solid var(--dv3-rim-strong);
  background: var(--dv3-surface);
  color: var(--dv3-text);
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
  box-sizing: border-box;
}

body.dv3-page .dv3-pagination .edc-pagination__num:hover,
body.dv3-page .dv3-pagination .edc-pagination__prev:hover,
body.dv3-page .dv3-pagination .edc-pagination__next:hover {
  background: var(--dv3-teal-soft);
  border-color: rgba(10, 168, 157, 0.5);
  color: var(--dv3-teal-deep);
}

body.dv3-page .dv3-pagination .edc-pagination__current {
  background: linear-gradient(135deg, var(--dv3-teal-deep) 0%, var(--dv3-teal) 100%);
  border-color: var(--dv3-teal-deep);
  color: #fff;
  box-shadow: 0 4px 12px rgba(10, 168, 157, 0.28);
}

body.dv3-page .dv3-pagination .edc-pagination__prev,
body.dv3-page .dv3-pagination .edc-pagination__next {
  padding: 0 1rem;
}

body.dv3-page .dv3-pagination > nav > div > span[aria-hidden] {
  color: var(--dv3-text-muted);
  padding: 0 0.25rem;
  font-weight: 700;
  align-self: center;
}

/* Mobile: tighter, smaller buttons, smart truncation visible */
@media (max-width: 480px) {
  body.dv3-page .dv3-pagination {
    margin: 1rem 0 1.5rem;
  }
  body.dv3-page .dv3-pagination > nav > div {
    gap: 0.3rem;
  }
  body.dv3-page .dv3-pagination .edc-pagination__num,
  body.dv3-page .dv3-pagination .edc-pagination__current {
    min-height: 36px;
    height: 36px;
    min-width: 36px;
    padding: 0 0.4rem;
    font-size: 0.82rem;
    border-radius: 9px;
  }
  body.dv3-page .dv3-pagination .edc-pagination__prev,
  body.dv3-page .dv3-pagination .edc-pagination__next {
    min-height: 36px;
    height: 36px;
    padding: 0 0.7rem;
    font-size: 0.82rem;
  }
  body.dv3-page .dv3-pagination .edc-pagination__summary {
    font-size: 0.78rem;
  }
}

/* Dark theme */
@media (prefers-color-scheme: dark) {
  body.dv3-page .dv3-pagination .edc-pagination__num,
  body.dv3-page .dv3-pagination .edc-pagination__prev,
  body.dv3-page .dv3-pagination .edc-pagination__next {
    background: rgba(20, 28, 38, 0.7);
    border-color: rgba(255, 255, 255, 0.12);
    color: rgba(229, 231, 235, 0.92);
  }
  body.dv3-page .dv3-pagination .edc-pagination__num:hover,
  body.dv3-page .dv3-pagination .edc-pagination__prev:hover,
  body.dv3-page .dv3-pagination .edc-pagination__next:hover {
    background: rgba(10, 168, 157, 0.18);
    border-color: rgba(45, 212, 191, 0.5);
    color: #5EEAD4;
  }
  body.dv3-page .dv3-pagination .edc-pagination__summary {
    color: rgba(229, 231, 235, 0.75);
  }
  body.dv3-page .dv3-pagination > nav > div > span[aria-hidden] {
    color: rgba(229, 231, 235, 0.5);
  }
}

html.dark body.dv3-page .dv3-pagination .edc-pagination__num,
html.dark body.dv3-page .dv3-pagination .edc-pagination__prev,
html.dark body.dv3-page .dv3-pagination .edc-pagination__next,
[data-theme="dark"] body.dv3-page .dv3-pagination .edc-pagination__num,
[data-theme="dark"] body.dv3-page .dv3-pagination .edc-pagination__prev,
[data-theme="dark"] body.dv3-page .dv3-pagination .edc-pagination__next {
  background: rgba(20, 28, 38, 0.7);
  border-color: rgba(255, 255, 255, 0.12);
  color: rgba(229, 231, 235, 0.92);
}
html.dark body.dv3-page .dv3-pagination .edc-pagination__summary,
[data-theme="dark"] body.dv3-page .dv3-pagination .edc-pagination__summary {
  color: rgba(229, 231, 235, 0.75);
}

/* ============================================================================
   CLINIC PAGE — humanized hero + EDC-first contact panel
   ============================================================================ */

/* Compact the clinic hero a touch vs directory hero */
body.dv3-page .dv3-clinic-hero .dv3-hero__title {
  font-size: clamp(1.25rem, 4.2vw, 2rem);
  max-width: 30ch;
  line-height: 1.2;
  color: #fff;
  text-shadow: 0 1px 8px rgba(0,0,0,0.55), 0 2px 24px rgba(0,0,0,0.35);
}

body.dv3-page .dv3-clinic-address {
  margin: 0.15rem 0 0;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--dv3-text-soft);
  text-align: center;
  max-width: 56ch;
  line-height: 1.5;
}

/* Meta tiles — softer, with light frosted-glass over the photo */
body.dv3-page .dv3-clinic-hero .dv3-clinic-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
  width: 100%;
  max-width: 560px;
  margin-top: 0.4rem;
}

body.dv3-page .dv3-clinic-meta__tile {
  padding: 0.65rem 0.6rem;
  border-radius: var(--dv3-radius-md);
  border: 1px solid rgba(255,255,255,0.35);
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  text-align: center;
}

body.dv3-page .dv3-clinic-meta__k {
  margin: 0 0 0.2rem;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.75);
}

html[dir="rtl"] body.dv3-page .dv3-clinic-meta__k {
  letter-spacing: 0.02em;
  text-transform: none;
  font-size: 0.7rem;
}

body.dv3-page .dv3-clinic-meta__v {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.25;
}

@media (max-width: 480px) {
  body.dv3-page .dv3-clinic-meta__k {
    font-size: 0.6rem;
  }
  body.dv3-page .dv3-clinic-meta__v {
    font-size: 0.78rem;
  }
  body.dv3-page .dv3-clinic-meta__tile {
    padding: 0.5rem 0.4rem;
  }
}

/* ── EDC-first contact panel (warm card around the primary CTAs) ── */
body.dv3-page .dv3-clinic-edcpanel {
  width: 100%;
  max-width: 560px;
  margin-top: 0.85rem;
  padding: 0.85rem 0.9rem 0.95rem;
  border-radius: var(--dv3-radius-lg);
  border: 1px solid rgba(10, 168, 157, 0.35);
  background:
    linear-gradient(135deg, rgba(10, 168, 157, 0.10) 0%, rgba(245, 158, 11, 0.06) 100%),
    rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 6px 22px rgba(10, 168, 157, 0.10);
  text-align: center;
}

body.dv3-page .dv3-clinic-edcpanel__line {
  margin: 0 0 0.6rem;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--dv3-teal-deep);
  line-height: 1.45;
}

body.dv3-page .dv3-clinic-edcpanel .dv3-clinic-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin: 0;
}

/* WhatsApp CTA — green, not teal, so it reads as WhatsApp */
body.dv3-page .dv3-clinic-cta--wa {
  background: linear-gradient(135deg, #25D366 0%, #128C7E 100%) !important;
  border: 0;
  color: #fff;
  box-shadow: 0 8px 22px rgba(18, 140, 126, 0.30);
}
body.dv3-page .dv3-clinic-cta--wa:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}

/* EDC consult CTA stays brand teal */
body.dv3-page .dv3-clinic-cta--consult {
  background: linear-gradient(135deg, var(--dv3-teal-deep) 0%, var(--dv3-teal) 100%) !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: 0 8px 22px rgba(10, 168, 157, 0.28);
}

/* Secondary row: smaller, ghost, low-emphasis */
body.dv3-page .dv3-clinic-actions--secondary {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
  margin-top: 0.65rem;
}

body.dv3-page .dv3-clinic-actions--secondary .dv3-hero__cta {
  min-height: 34px;
  padding: 0.3rem 0.85rem;
  font-size: 0.78rem;
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid var(--dv3-rim);
  color: var(--dv3-text-soft);
  font-weight: 600;
}

body.dv3-page .dv3-clinic-actions--secondary .dv3-hero__cta:hover {
  background: rgba(255, 255, 255, 0.95);
  color: var(--dv3-text);
}

/* ── Dark mode: warm, photographic ── */
@media (prefers-color-scheme: dark) {
  body.dv3-page .dv3-clinic-address {
    color: rgba(229, 231, 235, 0.85);
  }
  body.dv3-page .dv3-clinic-meta__tile {
    background: rgba(20, 28, 38, 0.72);
    border-color: rgba(255, 255, 255, 0.10);
  }
  body.dv3-page .dv3-clinic-meta__k {
    color: rgba(229, 231, 235, 0.65);
  }
  body.dv3-page .dv3-clinic-meta__v {
    color: #F5F7FA;
  }
  body.dv3-page .dv3-clinic-edcpanel {
    background:
      linear-gradient(135deg, rgba(45, 212, 191, 0.16) 0%, rgba(245, 158, 11, 0.10) 100%),
      rgba(15, 23, 32, 0.78);
    border-color: rgba(45, 212, 191, 0.35);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
  }
  body.dv3-page .dv3-clinic-edcpanel__line {
    color: #5EEAD4;
  }
  body.dv3-page .dv3-clinic-actions--secondary .dv3-hero__cta {
    background: rgba(20, 28, 38, 0.55);
    border-color: rgba(255, 255, 255, 0.10);
    color: rgba(229, 231, 235, 0.78);
  }
  body.dv3-page .dv3-clinic-actions--secondary .dv3-hero__cta:hover {
    background: rgba(20, 28, 38, 0.85);
    color: #F5F7FA;
  }
}

html.dark body.dv3-page .dv3-clinic-meta__tile,
[data-theme="dark"] body.dv3-page .dv3-clinic-meta__tile,
body.dv3-page--dark .dv3-clinic-meta__tile {
  background: rgba(20, 28, 38, 0.72);
  border-color: rgba(255, 255, 255, 0.10);
}
html.dark body.dv3-page .dv3-clinic-meta__k,
[data-theme="dark"] body.dv3-page .dv3-clinic-meta__k,
body.dv3-page--dark .dv3-clinic-meta__k {
  color: rgba(229, 231, 235, 0.65);
}
html.dark body.dv3-page .dv3-clinic-meta__v,
[data-theme="dark"] body.dv3-page .dv3-clinic-meta__v,
body.dv3-page--dark .dv3-clinic-meta__v {
  color: #F5F7FA;
}
html.dark body.dv3-page .dv3-clinic-edcpanel,
[data-theme="dark"] body.dv3-page .dv3-clinic-edcpanel,
body.dv3-page--dark .dv3-clinic-edcpanel {
  background:
    linear-gradient(135deg, rgba(45, 212, 191, 0.16) 0%, rgba(245, 158, 11, 0.10) 100%),
    rgba(15, 23, 32, 0.78);
  border-color: rgba(45, 212, 191, 0.35);
}
html.dark body.dv3-page .dv3-clinic-edcpanel__line,
[data-theme="dark"] body.dv3-page .dv3-clinic-edcpanel__line,
body.dv3-page--dark .dv3-clinic-edcpanel__line {
  color: #5EEAD4;
}
html.dark body.dv3-page .dv3-clinic-actions--secondary .dv3-hero__cta,
[data-theme="dark"] body.dv3-page .dv3-clinic-actions--secondary .dv3-hero__cta,
body.dv3-page--dark .dv3-clinic-actions--secondary .dv3-hero__cta {
  background: rgba(20, 28, 38, 0.55);
  border-color: rgba(255, 255, 255, 0.10);
  color: rgba(229, 231, 235, 0.78);
}
html.dark body.dv3-page .dv3-clinic-address,
[data-theme="dark"] body.dv3-page .dv3-clinic-address,
body.dv3-page--dark .dv3-clinic-address {
  color: rgba(229, 231, 235, 0.85);
}

/* ============================================================================
   CLINIC PAGE — refinements (24/7 badge, headline, bullets, light-mode polish)
   ============================================================================ */

/* Clinic hero — organic scrim: photo dominates, dark vignette at bottom for readability */
body.dv3-page .dv3-clinic-hero.dv3-hero--photo {
  background:
    linear-gradient(180deg,
      rgba(0, 0, 0, 0.08) 0%,
      rgba(0, 0, 0, 0.22) 55%,
      rgba(0, 0, 0, 0.52) 100%),
    var(--dv3-hero-img) center/cover no-repeat,
    #1a2a2a;
}

/* Text must be white over the dark scrim */
body.dv3-page .dv3-clinic-hero.dv3-hero--photo .dv3-hero__title,
body.dv3-page .dv3-clinic-hero.dv3-hero--photo .dv3-hero__subtitle,
body.dv3-page .dv3-clinic-hero.dv3-hero--photo .dv3-badge-label {
  color: #fff;
  text-shadow: 0 1px 8px rgba(0,0,0,0.55), 0 2px 24px rgba(0,0,0,0.35);
}

/* EDC panel — richer card */
body.dv3-page .dv3-clinic-edcpanel {
  position: relative;
  padding-top: 1.6rem; /* room for the 24/7 badge */
}

/* Floating 24/7 badge */
body.dv3-page .dv3-clinic-edcpanel__badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.32rem 0.75rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #0aa89d 0%, #14b8a6 100%);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: 0 6px 14px rgba(10, 168, 157, 0.35);
  white-space: nowrap;
}

html[dir="rtl"] body.dv3-page .dv3-clinic-edcpanel__badge {
  letter-spacing: 0.01em;
  text-transform: none;
  font-size: 0.75rem;
}

body.dv3-page .dv3-clinic-edcpanel__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.85);
  animation: dv3EdcPulse 1.8s ease-in-out infinite;
}

@keyframes dv3EdcPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.85); opacity: 1; }
  50%      { box-shadow: 0 0 0 6px rgba(255, 255, 255, 0); opacity: 0.7; }
}

body.dv3-page .dv3-clinic-edcpanel__head {
  margin: 0 0 0.3rem;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--dv3-text);
  line-height: 1.3;
  letter-spacing: -0.005em;
}

@media (min-width: 480px) {
  body.dv3-page .dv3-clinic-edcpanel__head {
    font-size: 1.15rem;
  }
}

body.dv3-page .dv3-clinic-edcpanel__line {
  /* override earlier color to keep contrast over the warm wash */
  color: var(--dv3-text-soft);
  font-weight: 500;
  font-size: 0.86rem;
}

body.dv3-page .dv3-clinic-edcpanel__bullets {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem 0.85rem;
  margin: 0.15rem 0 0.75rem;
  padding: 0;
  list-style: none;
}

body.dv3-page .dv3-clinic-edcpanel__bullets li {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--dv3-teal-deep);
}

body.dv3-page .dv3-clinic-edcpanel__bullets svg {
  flex-shrink: 0;
  color: #10b981;
  background: rgba(16, 185, 129, 0.14);
  border-radius: 50%;
  padding: 2px;
  width: 16px;
  height: 16px;
}

/* Mobile: tighten the panel */
@media (max-width: 480px) {
  body.dv3-page .dv3-clinic-edcpanel {
    padding: 1.45rem 0.7rem 0.85rem;
  }
  body.dv3-page .dv3-clinic-edcpanel__head {
    font-size: 0.95rem;
  }
  body.dv3-page .dv3-clinic-edcpanel__line {
    font-size: 0.8rem;
  }
  body.dv3-page .dv3-clinic-edcpanel__bullets li {
    font-size: 0.72rem;
  }
  body.dv3-page .dv3-clinic-edcpanel__badge {
    font-size: 0.65rem;
    padding: 0.28rem 0.65rem;
  }
}

/* Dark-mode adjustments for the new bits */
@media (prefers-color-scheme: dark) {
  body.dv3-page .dv3-clinic-edcpanel__head {
    color: #F5F7FA;
  }
  body.dv3-page .dv3-clinic-edcpanel__line {
    color: rgba(229, 231, 235, 0.82);
  }
  body.dv3-page .dv3-clinic-edcpanel__bullets li {
    color: #5EEAD4;
  }
  body.dv3-page .dv3-clinic-edcpanel__bullets svg {
    color: #34d399;
    background: rgba(16, 185, 129, 0.18);
  }
}

html.dark body.dv3-page .dv3-clinic-edcpanel__head,
[data-theme="dark"] body.dv3-page .dv3-clinic-edcpanel__head,
body.dv3-page--dark .dv3-clinic-edcpanel__head {
  color: #F5F7FA;
}
html.dark body.dv3-page .dv3-clinic-edcpanel__line,
[data-theme="dark"] body.dv3-page .dv3-clinic-edcpanel__line,
body.dv3-page--dark .dv3-clinic-edcpanel__line {
  color: rgba(229, 231, 235, 0.82);
}
html.dark body.dv3-page .dv3-clinic-edcpanel__bullets li,
[data-theme="dark"] body.dv3-page .dv3-clinic-edcpanel__bullets li,
body.dv3-page--dark .dv3-clinic-edcpanel__bullets li {
  color: #5EEAD4;
}
html.dark body.dv3-page .dv3-clinic-edcpanel__bullets svg,
[data-theme="dark"] body.dv3-page .dv3-clinic-edcpanel__bullets svg,
body.dv3-page--dark .dv3-clinic-edcpanel__bullets svg {
  color: #34d399;
  background: rgba(16, 185, 129, 0.18);
}

/* Light-mode explicit lock (in case .dv3-page--light or no dark class) — ensures
   page renders crisp light even if dark cookie is unset and OS is dark */
body.dv3-page--light .dv3-clinic-edcpanel,
html.light body.dv3-page .dv3-clinic-edcpanel,
[data-theme="light"] body.dv3-page .dv3-clinic-edcpanel {
  background:
    linear-gradient(135deg, rgba(10, 168, 157, 0.10) 0%, rgba(245, 158, 11, 0.06) 100%),
    rgba(255, 255, 255, 0.92);
  border-color: rgba(10, 168, 157, 0.35);
}
body.dv3-page--light .dv3-clinic-edcpanel__head,
html.light body.dv3-page .dv3-clinic-edcpanel__head,
[data-theme="light"] body.dv3-page .dv3-clinic-edcpanel__head {
  color: #0f172a;
}
body.dv3-page--light .dv3-clinic-edcpanel__line,
html.light body.dv3-page .dv3-clinic-edcpanel__line,
[data-theme="light"] body.dv3-page .dv3-clinic-edcpanel__line {
  color: #475569;
}
body.dv3-page--light .dv3-clinic-meta__tile,
html.light body.dv3-page .dv3-clinic-meta__tile,
[data-theme="light"] body.dv3-page .dv3-clinic-meta__tile {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(15, 23, 42, 0.10);
}

/* ============================================================================
   DIRECTORY HERO — EDC promise ribbon (24/7 + free reservation + no كشف)
   ============================================================================ */

body.dv3-page .dv3-promise {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 0.4rem;
  width: 100%;
  max-width: 720px;
  margin: 0.4rem 0 0.1rem;
}

body.dv3-page .dv3-promise__item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  border: 1px solid rgba(10, 168, 157, 0.32);
  background:
    linear-gradient(135deg, rgba(10, 168, 157, 0.10) 0%, rgba(245, 158, 11, 0.08) 100%),
    rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--dv3-teal-deep);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(10, 168, 157, 0.08);
}

body.dv3-page .dv3-promise__icon {
  font-size: 1rem;
  line-height: 1;
}

body.dv3-page .dv3-promise__label {
  font-weight: 700;
  letter-spacing: -0.005em;
}

/* Mobile: stack as wrap-friendly chips; allow wrapping inside long labels */
@media (max-width: 540px) {
  body.dv3-page .dv3-promise {
    gap: 0.3rem;
  }
  body.dv3-page .dv3-promise__item {
    padding: 0.32rem 0.6rem;
    font-size: 0.72rem;
    white-space: normal; /* let "No diagnosis fee — pay for treatment only" wrap */
    text-align: start;
  }
  body.dv3-page .dv3-promise__icon {
    font-size: 0.9rem;
  }
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  body.dv3-page .dv3-promise__item {
    background:
      linear-gradient(135deg, rgba(45, 212, 191, 0.16) 0%, rgba(245, 158, 11, 0.10) 100%),
      rgba(15, 23, 32, 0.78);
    border-color: rgba(45, 212, 191, 0.35);
    color: #5EEAD4;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
  }
}

html.dark body.dv3-page .dv3-promise__item,
[data-theme="dark"] body.dv3-page .dv3-promise__item,
body.dv3-page--dark .dv3-promise__item {
  background:
    linear-gradient(135deg, rgba(45, 212, 191, 0.16) 0%, rgba(245, 158, 11, 0.10) 100%),
    rgba(15, 23, 32, 0.78);
  border-color: rgba(45, 212, 191, 0.35);
  color: #5EEAD4;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

/* Light mode explicit lock */
body.dv3-page--light .dv3-promise__item,
html.light body.dv3-page .dv3-promise__item,
[data-theme="light"] body.dv3-page .dv3-promise__item {
  background:
    linear-gradient(135deg, rgba(10, 168, 157, 0.10) 0%, rgba(245, 158, 11, 0.08) 100%),
    rgba(255, 255, 255, 0.92);
  border-color: rgba(10, 168, 157, 0.32);
  color: var(--dv3-teal-deep);
}