/* 2026-06-27 REL_86 -- Doctor Profile (flagship) page stylesheet. External (the app CSP style-src 'self' forbids inline styles). Built on the di-system tokens (var(--blue) #0f50a0) + Inter/Jakarta; page-prefixed BEM .dp-*. Loaded via the _DiMain Styles section. */
:root{
  --p-blue:#0f50a0; --p-blue-d:#0b3d7d; --p-blue-2:#1a6fd0; --p-sky:#eaf2fd; --p-sky-2:#dcebfb;
  --p-ink:#0c1726; --p-ink2:#5b6b82; --p-ink3:#66717f; /* 2026-07-28 QA: was #8a98ad (2.92:1, fails WCAG AA on the 11-12.5px caption/label text); #66717f = ~4.7:1 AA-safe muted. */
  --p-bg:#f5f8fc; --p-card:#ffffff; --p-line:#e9eef5; --p-line2:#eef3f9;
  --p-gold:#f6a609; --p-green:#146c30; --p-green-bg:#e9f7ef; /* 2026-07-28 QA: green was #16a34a (slot-count TEXT 2.92-3.29:1, fails AA on white+sky-tint); #146c30 = AA-safe on BOTH white (~5.2:1) AND the .dp-sky selected-day tint #eaf2fd (~4.8:1); dots/accent-bars just render a touch darker (harmless). */
  --p-teal:#0e7490; --p-teal-bg:#e6f6fa; --p-teal-line:#bfe6ef; /* video-consult mode (distinct from in-clinic blue) */
  --p-amber:#b46a00; --p-amber-bg:#fff5e6; --p-amber-line:#ffe0ad; /* "request" (non-instant) action */
  --p-danger:#c0392b; /* 2026-07-03 -- semantic form-error red (state colour, not a brand colour) */
  --p-r:22px; --p-r2:16px; --p-r3:12px;
  --p-sh:0 1px 2px rgba(13,38,76,.04), 0 18px 40px -20px rgba(13,38,76,.16);
  --p-sh-2:0 1px 2px rgba(13,38,76,.05), 0 10px 24px -14px rgba(13,38,76,.18);
  --p-sh-lift:0 2px 4px rgba(13,38,76,.05), 0 30px 60px -28px rgba(13,38,76,.30);
}
*{box-sizing:border-box}
body.dp{margin:0;background:var(--p-bg);color:var(--p-ink);font-family:Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased;line-height:1.55}
/* 2026-07-27 QA -- long UNBROKEN tokens (a long clinic/institution name, registration no., pasted string, long email/URL) used to
   overflow their box and get CLIPPED by the card's overflow:hidden instead of wrapping. Nothing in this file set overflow-wrap, so
   every text element sat at the CSS default (normal = break at spaces only). .dp is the profile card root (id=dp-card, class "dp dp-wrap"
   -- the body carries di-wide, NOT dp, so this must sit on .dp not body.dp) and overflow-wrap IS inherited, so this one rule fixes every
   field. break-word (not anywhere) => breaks a long token only as a last resort WITHOUT changing intrinsic min-content sizing, so the
   flex/grid layout is unaffected; white-space:nowrap chips are unaffected too. */
.dp{overflow-wrap:break-word}
.dp h1,.dp h2,.dp h3,.dp h4{font-family:Jakarta,Inter,sans-serif;margin:0;line-height:1.16;letter-spacing:-.022em;font-weight:800;color:var(--p-ink)}
.dp a{text-decoration:none}
.dp a:not(.dp-btn){color:inherit}   /* 2026-07-01 -- links inherit, but .dp-btn anchors keep their own colour (white on --pri, blue on --ghost) */
.dp img{display:block}
.dp-wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.dp-svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;flex:0 0 auto}

/* ---- top nav ---- */
.dp-top{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.86);backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--p-line)}
.dp-top .dp-wrap{display:flex;align-items:center;justify-content:space-between;height:66px}
.dp-logo{display:flex;align-items:center;gap:10px;font-family:Jakarta;font-weight:800;font-size:21px}
.dp-logo i{width:32px;height:32px;border-radius:10px;background:linear-gradient(140deg,var(--p-blue-2),var(--p-blue-d));display:grid;place-items:center;color:#fff;font-style:normal}
.dp-nav{display:flex;gap:28px;font-size:14.5px;font-weight:500;color:var(--p-ink2)}
.dp-nav a{transition:color .15s}.dp-nav a:hover{color:var(--p-blue)}

/* ---- buttons ---- */
.dp-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:Jakarta,Inter;font-weight:700;font-size:15px;border:none;cursor:pointer;border-radius:999px;padding:13px 24px;transition:.18s;white-space:nowrap;letter-spacing:-.01em}
.dp-btn--pri{background:linear-gradient(135deg,var(--p-blue-2),var(--p-blue));color:#fff;box-shadow:0 10px 22px -10px rgba(15,80,160,.7)}
.dp-btn--pri:hover{transform:translateY(-2px);box-shadow:0 16px 30px -12px rgba(15,80,160,.75)}
.dp-btn--ghost{background:#fff;color:var(--p-blue);border:1.5px solid var(--p-line)}
.dp-btn--ghost:hover{border-color:var(--p-blue)}
.dp-btn--lg{padding:16px 26px;font-size:16px}
.dp-btn--block{width:100%}
.dp-btn--white{background:#fff;color:var(--p-blue)}
.dp-btn--white:hover{transform:translateY(-2px)}

/* ---- breadcrumb ---- */
/* 2026-07-27 QA -- breadcrumb is now the SHARED _DiBreadcrumb (.di-crumbs) for visual consistency with blog/city/clinic (was a bespoke .dp-bc).
   This page is body.di-wide (so .di-wrap = 1440) but the profile CONTENT sits in .dp-wrap (1180); pin the breadcrumb's inner container to the
   profile width + padding so the trail lines up with the card below it. di-doctor-profile.css loads only on this page, so this stays scoped. */
body.di-wide .di-crumbs .di-wrap{max-width:1180px;padding:0 24px}

/* ---- HERO ---- */
/* ===== premium hero: deep-blue gradient signature (LOCKED identity) + white action bar ===== */
.dp-hero{position:relative;margin-top:0;border:1px solid var(--p-line);border-radius:26px;box-shadow:var(--p-sh-lift);overflow:hidden;background:var(--p-card);min-width:0}/* 2026-07-03 hero = top card of col1 (.dp-colmain flex child) */
.dp-hero__top{position:relative;display:flex;gap:22px;align-items:center;padding:24px 28px 22px;background:linear-gradient(118deg,#0c3675 0%,#123f8c 46%,#1a5aa3 100%)}/* 2026-07-03 tightened density (Practo-calibrated) */
.dp-hero__glow{position:absolute;right:-90px;top:-150px;width:440px;height:440px;border-radius:50%;background:radial-gradient(circle,rgba(130,180,255,.30),transparent 62%);pointer-events:none;z-index:0}
.dp-photo{position:relative;flex:0 0 auto;z-index:1}
.dp-photo img{width:118px;height:142px;object-fit:cover;border-radius:16px;border:3px solid rgba(255,255,255,.92);box-shadow:0 22px 44px -18px rgba(3,15,40,.7)}
.dp-photo__ring{position:absolute;inset:-9px;border-radius:26px;border:1.5px solid rgba(255,255,255,.26)}
.dp-photo__on{position:absolute;left:9px;bottom:9px;display:inline-flex;align-items:center;gap:6px;background:#fff;color:var(--p-green);font-size:11.5px;font-weight:700;padding:5px 9px;border-radius:999px;box-shadow:0 6px 16px -6px rgba(0,0,0,.4)}
.dp-photo__on i{width:7px;height:7px;border-radius:50%;background:var(--p-green);display:block}
.dp-hd{flex:1;min-width:0;position:relative;z-index:1;color:#fff}
.dp-hero__top .dp-hd__name{font-size:25px;line-height:1.15;letter-spacing:-.02em;color:#fff;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.dp-verif{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.3);border-radius:999px;padding:5px 11px;font-size:12px;font-weight:700;font-family:Inter}
.dp-verif svg{width:13px;height:13px;stroke:#daffe9;stroke-width:2.8}
.dp-hd__spec{color:#a9cbf4;font-weight:700;font-size:14px;margin:6px 0 3px;font-family:Jakarta}
.dp-hd__deg{color:rgba(255,255,255,.68);font-size:13.5px}
.dp-hd__row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px}
.dp-chip{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.2);color:#e8f1fd;font-size:13px;font-weight:600;padding:7px 13px;border-radius:999px}
.dp-chip svg{width:14px;height:14px;stroke:currentColor;stroke-width:2;fill:none;flex:0 0 auto}
.dp-chip b{color:#fff;font-family:Jakarta;font-weight:800}
.dp-chip--star svg{fill:var(--p-gold);stroke:none}
.dp-hero__top .dp-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.dp-hero__top .dp-act{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);color:#fff;font-size:13px;font-weight:600;font-family:Inter;padding:9px 13px;border-radius:11px;cursor:pointer;transition:.15s}
.dp-hero__top .dp-act:hover{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.4)}
.dp-hero__top .dp-act svg{width:16px;height:16px;stroke:#fff;stroke-width:2;fill:none}
.dp-hero__top .dp-act.on{background:#fff;color:var(--p-blue);border-color:#fff}
.dp-hero__top .dp-act.on svg{stroke:var(--p-blue);fill:var(--p-blue)}
/* white action bar (stats top-accent + CTA) */
.dp-hero__bar{display:flex;align-items:center;gap:18px;padding:14px 28px;background:var(--p-card);flex-wrap:wrap}
.dp-stats{display:grid;grid-template-columns:repeat(4,minmax(82px,1fr));gap:11px;flex:1 1 300px;min-width:260px;margin:0}
.dp-stat{position:relative;background:var(--p-bg);border:1px solid var(--p-line);border-radius:var(--p-r3);padding:11px 10px 9px;text-align:center;overflow:hidden}
.dp-stat::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--p-blue-2)}
.dp-stat:nth-child(2)::before{background:var(--p-green)}
.dp-stat:nth-child(3)::before{background:#14b8a6}
.dp-stat:nth-child(4)::before{background:var(--p-gold)}
.dp-stat b{display:block;font-family:Jakarta;font-size:18px;color:var(--p-ink);letter-spacing:-.02em}
.dp-stat span{font-size:11.5px;color:var(--p-ink2)}
.dp-hero__cta{display:flex;gap:12px;flex:0 0 auto;flex-wrap:wrap}

/* ---- layout grid ---- */
/* 2026-07-03 REL_86 -- 2 independent columns: col1 (.dp-colmain)=hero+main, col2 (.dp-colside 416px)=booking+secondary. ALL non-sticky -> normal scroll, no overlap. col2 416px fits 4 time-chips/row. */
.dp-grid{display:grid;grid-template-columns:1fr 416px;column-gap:22px;align-items:start;margin-top:18px;padding-bottom:44px}
.dp-colmain{grid-column:1;display:flex;flex-direction:column;gap:16px;min-width:0}
.dp-colside{grid-column:2;display:flex;flex-direction:column;gap:16px;min-width:0}
.dp-stack{display:flex;flex-direction:column;gap:16px;min-width:0}/* flex child of colmain; min-width:0 so nested slot strip scrolls instead of overflowing */

/* ---- card + section ---- */
.dp-card{background:var(--p-card);border:1px solid var(--p-line);border-radius:var(--p-r);box-shadow:var(--p-sh-2);padding:20px}
.dp-sh{display:flex;align-items:center;gap:10px;margin-bottom:13px}
.dp-sh i{width:32px;height:32px;border-radius:9px;background:var(--p-sky);display:grid;place-items:center;flex:0 0 auto}
.dp-sh i svg{width:17px;height:17px;stroke:var(--p-blue);stroke-width:2}
.dp-sh h2{font-size:16.5px}
.dp-sh span{margin-left:auto;font-size:12.5px;color:var(--p-ink3);font-weight:600}
.dp-p{color:#3c4d66;font-size:14px;line-height:1.55;margin:0}
.dp-note{display:flex;gap:9px;align-items:flex-start;margin-top:14px;background:var(--p-sky);border:1px solid var(--p-sky-2);border-radius:var(--p-r3);padding:12px 14px;font-size:13px;color:#33557e}
.dp-note svg{width:17px;height:17px;stroke:var(--p-blue);stroke-width:2;margin-top:1px}

/* services pills */
.dp-pills{display:flex;flex-wrap:wrap;gap:10px}
.dp-pill{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--p-line);border-radius:10px;padding:9px 13px;font-size:13px;font-weight:600;color:#34455d;transition:.15s}
.dp-pill:hover{border-color:var(--p-blue);color:var(--p-blue);transform:translateY(-1px)}
.dp-pill svg{width:16px;height:16px;stroke:var(--p-blue);stroke-width:2.4}

/* timeline (education / experience) */
.dp-tl{position:relative;padding-left:42px}
.dp-tl::before{content:"";position:absolute;left:18px;top:6px;bottom:6px;width:2px;background:var(--p-line2)}
.dp-tl__i{position:relative;padding:0 0 20px}
.dp-tl__i:last-child{padding-bottom:0}
.dp-tl__i>i{position:absolute;left:-42px;top:-1px;width:37px;height:37px;border-radius:10px;background:#fff;border:1.5px solid var(--p-line);display:grid;place-items:center;color:var(--p-blue)}
.dp-tl__i>i svg{width:18px;height:18px;stroke:var(--p-blue);stroke-width:2}
.dp-tl__i b{display:block;font-family:Jakarta;font-size:15px;font-weight:700}
.dp-tl__i span{font-size:13.5px;color:var(--p-ink2)}
.dp-tl__i em{font-size:12.5px;color:var(--p-ink3);font-style:normal}

/* 2026-07-02 REL_86 -- booking = ONE card; multi-clinic switch = Practo "Change clinic": selected clinic's info stays visible + a compact trigger opens a rich menu (name + fee + area per clinic). */
.dp-bk__panel{display:none}
.dp-bk__panel.on{display:block}
.dp-bk__change{display:inline-flex;align-items:center;gap:3px;margin-left:8px;padding:2px 2px;border:0;background:none;font-family:Jakarta;font-size:12.5px;font-weight:700;color:var(--p-blue);cursor:pointer}
.dp-bk__change svg{width:14px;height:14px;stroke:currentColor;stroke-width:2.4;fill:none;transition:transform .15s}
.dp-bk__change[aria-expanded="true"] svg{transform:rotate(180deg)}
.dp-bk__change:hover{color:var(--p-blue-d)}
.dp-bk__change:focus-visible{outline:2px solid var(--p-blue);outline-offset:2px;border-radius:4px}
.dp-bk__menu{margin-top:10px;border:1px solid var(--p-line);border-radius:var(--p-r3);overflow:hidden;background:var(--p-card);box-shadow:var(--p-sh-2)}
.dp-bk__menu[hidden]{display:none}
.dp-bk__mitem{display:grid;grid-template-columns:1fr auto;gap:2px 10px;width:100%;text-align:left;padding:11px 14px;border:0;border-top:1px solid var(--p-line2);background:var(--p-card);cursor:pointer;transition:background .12s}
.dp-bk__mitem:first-child{border-top:0}
.dp-bk__mitem:hover{background:var(--p-bg)}
.dp-bk__mitem.on{background:var(--p-sky)}
.dp-bk__mitem:focus-visible{outline:2px solid var(--p-blue);outline-offset:-2px}
.dp-bk__mname{grid-column:1;font-family:Jakarta;font-size:14px;font-weight:700;line-height:1.2;color:var(--p-ink)}
.dp-bk__mfee{grid-column:2;font-family:Jakarta;font-size:14px;font-weight:800;color:var(--p-ink);white-space:nowrap}
.dp-bk__msub{grid-column:1/3;font-size:12px;color:var(--p-ink2)}

/* clinic rows */
.dp-clinic{display:flex;gap:15px;padding:15px;border:1px solid var(--p-line);border-radius:var(--p-r2);transition:.15s}
.dp-clinic:hover{border-color:var(--p-sky-2);box-shadow:var(--p-sh-2)}
.dp-clinic+.dp-clinic{margin-top:12px}
.dp-clinic__img{width:92px;height:92px;border-radius:12px;object-fit:cover;flex:0 0 auto;align-self:flex-start} /* main clinic photo only (scoped so gallery thumbs keep their 54px) */
.dp-clinic b{font-family:Jakarta;font-size:15.5px}
.dp-clinic small{color:var(--p-ink2);font-size:13px;display:block;margin:3px 0 6px}
.dp-fee{color:var(--p-blue);font-weight:800;font-family:Jakarta}
.dp-tag{display:inline-block;background:var(--p-sky);color:var(--p-blue);font-size:11px;font-weight:700;padding:3px 8px;border-radius:6px;margin-left:6px;vertical-align:middle}
/* 2026-07-01 REL_86 (gap-fix) -- clinic profile link + multi-photo gallery, review reply, Q&A permalink, photo lightbox */
.dp-clinic__link{color:var(--p-blue);font-weight:inherit;text-decoration:none}
.dp-clinic__link:hover{text-decoration:underline}
.dp-clinic__img{cursor:zoom-in}
.dp-clinic__gal{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px}
.dp-clinic__thumb{width:54px;height:54px;border-radius:9px;object-fit:cover;border:1px solid var(--p-line);cursor:zoom-in;transition:.15s}
.dp-clinic__thumb:hover{border-color:var(--p-blue);transform:translateY(-1px)}
.dp-rev__reply{margin:10px 0 0 14px;padding:11px 14px;background:var(--p-sky);border-left:3px solid var(--p-blue);border-radius:0 10px 10px 0}
.dp-rev__reply b{display:block;font-family:Jakarta;font-size:13px;color:var(--p-blue);margin-bottom:3px}
.dp-rev__reply p{margin:0;color:#3c4d66;font-size:13.5px}
.dp-qa__link{color:inherit;text-decoration:none}
.dp-qa__link:hover{color:var(--p-blue);text-decoration:underline}
.dp-lb{position:fixed;inset:0;z-index:1000;display:none;align-items:center;justify-content:center;background:rgba(9,18,33,.86);padding:24px}
.dp-lb.on{display:flex}
.dp-lb__img{max-width:92vw;max-height:88vh;border-radius:12px;box-shadow:0 30px 80px -20px rgba(0,0,0,.7);object-fit:contain}
.dp-lb__x{position:absolute;top:18px;right:22px;width:44px;height:44px;border-radius:50%;border:none;background:rgba(255,255,255,.14);color:#fff;font-size:26px;line-height:1;cursor:pointer;transition:.15s}
.dp-lb__x:hover{background:rgba(255,255,255,.28)}
/* 2026-07-01 REL_86 -- per-clinic booking section: name/fee row, availability, consult-mode pills, action buttons, other-locations, sidebar scroll-CTA */
.dp-clinic__body{flex:1;min-width:0}
.dp-clinic__row{display:flex;gap:12px;align-items:flex-start}
.dp-clinic__name{font-family:Jakarta;font-size:15.5px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.dp-clinic__fee{margin-left:auto;text-align:right;flex:0 0 auto}
.dp-clinic__fee b{display:block;font-size:16px;color:var(--p-blue);font-weight:800;font-family:Jakarta}
.dp-clinic__fee span{font-size:11px;color:var(--p-ink2)}
.dp-clinic__avail{display:flex;align-items:center;gap:8px;font-size:13px;margin-top:11px;color:var(--p-ink2)}
.dp-clinic__avail b{color:var(--p-ink)}
.dp-clinic__avail .dp-dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto;background:var(--p-ink3)}
.dp-clinic__avail.is-open .dp-dot{background:var(--p-green)}
.dp-clinic__avail.is-req .dp-dot{background:var(--p-gold)}
.dp-clinic__modes{display:flex;gap:8px;flex-wrap:wrap;margin-top:11px}
.dp-mode{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;padding:5px 11px;border-radius:20px;border:1px solid}
.dp-mode svg{width:14px;height:14px;stroke-width:2;fill:none}
.dp-mode--clinic{background:var(--p-sky);color:var(--p-blue);border-color:var(--p-sky-2)}
.dp-mode--clinic svg{stroke:var(--p-blue)}
.dp-mode--video{background:var(--p-teal-bg);color:var(--p-teal);border-color:var(--p-teal-line)}
.dp-mode--video svg{stroke:var(--p-teal)}
.dp-clinic__act{display:flex;gap:9px;flex-wrap:wrap;margin-top:14px}
.dp-clinic__act .dp-btn{font-size:13.5px;padding:9px 16px}
.dp-btn--req{background:var(--p-amber-bg);color:var(--p-amber);border:1.5px solid var(--p-amber-line)}
.dp-btn--req:hover{border-color:var(--p-gold)}
.dp-btn--chat{background:#fff;color:var(--p-blue);border:1.5px solid var(--p-line)}
.dp-btn--chat:hover{border-color:var(--p-blue)}
.dp-btn--chat svg{width:16px;height:16px;stroke:currentColor;stroke-width:2;fill:none}
.dp-others{display:flex;gap:10px;align-items:flex-start;margin-top:16px;padding:13px 15px;background:var(--p-bg);border:1px solid var(--p-line);border-radius:var(--p-r3);font-size:12.5px;color:var(--p-ink3)}
.dp-others svg{width:16px;height:16px;stroke:var(--p-ink3);stroke-width:2;fill:none;flex:0 0 auto;margin-top:1px}
.dp-others b{color:var(--p-ink2)}
/* 2026-07-02 REL_86 -- main-column clinic "View clinic details" link (booking moved to the sticky rail; replaces the old .dp-side-cta jump button) */
.dp-clinic__dir{display:inline-flex;align-items:center;gap:4px;font-family:Jakarta;font-size:13px;font-weight:700;color:var(--p-blue)}
.dp-clinic__dir svg{width:15px;height:15px;stroke:currentColor;stroke-width:2.2;fill:none}
.dp-clinic__dir:hover{color:var(--p-blue-d)}
/* 2026-07-03 REL_86 -- per-clinic vertical action column (In-clinic / Video consult / Chat), right-aligned (Practo-style) */
.dp-clinic__acts{display:flex;flex-direction:column;gap:8px;flex:0 0 auto;align-self:center;width:154px}
.dp-clinic__acts .dp-btn{width:100%;min-height:44px;font-size:13px;padding:10px 14px;justify-content:center;gap:7px}/* 44px min tap target */
.dp-clinic__acts .dp-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;flex:0 0 auto}
.dp-clinic__acts .dp-btn--pri{box-shadow:0 6px 14px -8px rgba(15,80,160,.55)}
.dp-btn--vid{background:var(--p-teal-bg);color:var(--p-teal);border:1.5px solid var(--p-teal-line)}/* 2026-07-03 -- video-consult semantic colour = teal (consistent with .dp-mode--video), not blue */
.dp-btn--vid:hover{background:var(--p-teal-bg);border-color:var(--p-teal)}/* 2026-07-06 -- keep the AA-passing teal text/bg pair on hover (only darken the border); teal-on-teal-line was ~4.0:1 */
/* 2026-07-03 REL_86 -- branded keyboard-focus ring on page buttons (matches the .dp-slots__mode/day picker controls; the new per-clinic CTAs had only the UA default) */
.dp-btn:focus-visible{outline:2px solid var(--p-blue);outline-offset:2px}
/* 2026-07-28 QA (UI#4 focus-ring drift): these controls fell back to the UA-default ring instead of the page's branded ring. .dp-act sits on the DARK hero -> white ring for 3:1 contrast; the rest are on light bg -> --p-blue. */
.dp-hero__top .dp-act:focus-visible{outline:2px solid #fff;outline-offset:2px;border-radius:11px}
.dp-sim:focus-visible,.dp-star:focus-visible,.dp-loadmore:focus-visible,.dp-showmore:focus-visible,.dp-clinic__thumb:focus-visible,.dp-modal__x:focus-visible,.dp-lb__x:focus-visible,.dp-otp__link:focus-visible,.dp-otp__resend:focus-visible,.dp-sharemenu a:focus-visible,.dp-sharemenu button:focus-visible{outline:2px solid var(--p-blue);outline-offset:2px;border-radius:8px}
/* 2026-07-02 REL_86 -- de-congestion: grouped-section sub-blocks (Expertise/Credentials), "At a glance" facts, compact side news, sidebar related-links, book-button icons */
.dp-sub{margin-top:18px}
.dp-sub:first-of-type{margin-top:6px}
.dp-sub__t{font-size:12px;font-weight:800;color:var(--p-ink2);text-transform:uppercase;letter-spacing:.04em;margin-bottom:9px}
.dp-clinic__act .dp-btn{font-size:14px;padding:12px 20px}
.dp-clinic__act .dp-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;flex:0 0 auto}
.dp-facts{list-style:none;margin:0;padding:0}
.dp-facts li{display:flex;gap:10px;padding:9px 0;border-top:1px solid var(--p-line);font-size:13px}
.dp-facts li:first-child{border-top:none;padding-top:0}
.dp-facts__k{color:var(--p-ink2);min-width:104px;flex:0 0 auto}
.dp-facts__v{color:var(--p-ink);font-weight:600}
.dp-newsi{display:block;padding:10px 0;border-top:1px solid var(--p-line);text-decoration:none}
.dp-newsi:first-of-type{border-top:none;padding-top:2px}
.dp-newsi b{display:block;font-family:Jakarta;font-size:13.5px;color:var(--p-ink);line-height:1.35}
.dp-newsi span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:12.5px;color:var(--p-ink2);margin-top:2px}
.dp-newsi:hover b{color:var(--p-blue)}
.dp-sidelinks{display:flex;flex-wrap:wrap;gap:7px}
.dp-sidelinks a{font-size:12px;color:var(--p-ink-soft);background:var(--p-bg);border:1px solid var(--p-line);border-radius:8px;padding:5px 10px;text-decoration:none;transition:.15s}
.dp-sidelinks a:hover{border-color:var(--p-blue);color:var(--p-blue)}
/* 2026-07-02 REL_86 -- inline slot picker (server-computed slots): mode toggle + date strip + time chips */
.dp-slots{margin-top:16px;background:var(--p-bg);border:1px solid var(--p-line);border-radius:var(--p-r2);padding:16px 18px;min-width:0}
.dp-slots__load,.dp-slots__empty{font-size:13px;color:var(--p-ink2);padding:6px 0}
.dp-slots__hd{display:flex;align-items:center;gap:10px;font-size:13.5px;margin-bottom:12px}
.dp-slots__hd b{font-family:Jakarta}
.dp-slots__today{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;color:var(--p-green);background:var(--p-green-bg);padding:3px 9px;border-radius:20px}
.dp-slots__today i{width:6px;height:6px;border-radius:50%;background:var(--p-green)}
/* 2026-07-02 REL_86 -- consultation-mode = a prominent, labelled segmented control (icons + full-width), placed right under the clinic header (per-clinic modes -> logically after the clinic, before the dates). */
.dp-slots__modewrap{margin-bottom:14px}
.dp-slots__modelbl{display:block;margin-bottom:7px;font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--p-ink3)}
.dp-slots__modes{display:flex;gap:4px;background:var(--p-bg);padding:4px;border:1px solid var(--p-line);border-radius:12px}
.dp-slots__mode{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;border:none;background:transparent;padding:10px 12px;border-radius:9px;font-family:Jakarta;font-weight:700;font-size:13.5px;color:var(--p-ink2);cursor:pointer;min-height:44px;transition:background .15s,color .15s,box-shadow .15s}
.dp-slots__mode svg{width:16px;height:16px;stroke:currentColor;stroke-width:2;fill:none;flex:0 0 auto}
.dp-slots__mode:hover{color:var(--p-ink)}
.dp-slots__mode.on{background:var(--p-card);color:var(--p-blue);box-shadow:var(--p-sh-2)}
.dp-slots__mode:focus-visible{outline:2px solid var(--p-blue);outline-offset:2px}
/* 2026-07-02 REL_86 -- date SLIDER: prev/next arrows flank a scroll strip whose native scrollbar is HIDDEN (users slide via the arrows, not a scrollbar). */
.dp-slots__nav{display:flex;align-items:center;gap:6px;margin-bottom:14px}
.dp-slots__arrow{flex:0 0 auto;width:30px;height:30px;border-radius:50%;border:1.5px solid var(--p-line);background:var(--p-card);color:var(--p-blue);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.15s}
.dp-slots__arrow svg{width:16px;height:16px;stroke:currentColor;stroke-width:2.4;fill:none}
.dp-slots__arrow:hover{border-color:var(--p-blue);background:var(--p-sky)}
.dp-slots__arrow:focus-visible{outline:2px solid var(--p-blue);outline-offset:2px}
.dp-slots__strip{position:relative;flex:1;min-width:0;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}/* 2026-07-27 QA -- dropped scroll-behavior:smooth: render() rebuilds the whole box on every date click, so the strip is a NEW element at scrollLeft 0; with CSS-smooth the re-center (scrollLeft=) animated from the far-LEFT every time -> a wrong-direction slide when picking an EARLIER date (25->24). Now that re-center is INSTANT; the prev/next arrows still animate because scrollBy passes behavior:'smooth' explicitly. position:relative so active-day offsetLeft is strip-relative (JS scroll-centering); scrollbar hidden -> slider arrows drive it */
.dp-slots__strip::-webkit-scrollbar{display:none}
.dp-slots__day{flex:0 0 auto;min-width:62px;border:1.5px solid var(--p-line);border-radius:12px;background:#fff;padding:8px 6px;cursor:pointer;text-align:center;transition:.15s}
.dp-slots__day span{display:block;font-size:11px;color:var(--p-ink2);text-transform:uppercase;letter-spacing:.03em}
.dp-slots__day b{display:block;font-family:Jakarta;font-size:17px;color:var(--p-ink);margin:1px 0}
.dp-slots__day em{display:block;font-size:10.5px;color:var(--p-green);font-style:normal;font-weight:700}
.dp-slots__day:hover{border-color:var(--p-blue)}
.dp-slots__day.on{border-color:var(--p-blue);background:var(--p-sky);box-shadow:var(--p-sh-2)}
/* 2026-07-02 REL_86 -- grouped no-slot RANGE pill (Practo/legacy parity): one muted dashed cell for a run of empty days; click jumps to the next available day */
.dp-slots__gap{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:8px 12px;border:1.5px dashed var(--p-line);border-radius:12px;background:var(--p-bg);cursor:pointer;text-align:center;transition:.15s}
.dp-slots__gap b{font-family:Jakarta;font-size:12px;font-weight:700;color:var(--p-ink2);white-space:nowrap}
.dp-slots__gap em{font-style:normal;font-size:10.5px;color:var(--p-ink3)}
.dp-slots__gap:hover{border-color:var(--p-blue-2);background:var(--p-sky)}
.dp-slots__gap:focus-visible{outline:2px solid var(--p-blue);outline-offset:2px}
/* 2026-07-02 REL_86 -- time-chips area: FIXED height + vertical scroll (Practo-style) so the card stays compact and the picker controls (clinic/mode/date-slider) stay put; chips laid out 4-per-row. */
.dp-slots__body{max-height:280px;overflow-y:auto;margin:2px -6px 0 0;padding-right:6px;scrollbar-width:thin;scrollbar-color:var(--p-line) transparent}
.dp-slots__body::-webkit-scrollbar{width:6px}
.dp-slots__body::-webkit-scrollbar-thumb{background:var(--p-line);border-radius:6px}
.dp-slots__grp{margin-bottom:13px}
.dp-slots__gl{display:block;font-size:11.5px;font-weight:800;color:var(--p-ink2);text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px}
.dp-slots__chips{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
/* 2026-07-28 QA: on phones the 4-col chip grid + nowrap "11:45 am" needed ~300px but the booking card is ~275px, so `.dp-book2{overflow:hidden}` CLIPPED the 4th chip's time. Drop to 3-col on phones -> every time-chip renders in full. */
@media (max-width:440px){.dp-slots__chips{grid-template-columns:repeat(3,1fr)}}
.dp-slots__chip{border:1.5px solid var(--p-sky-2);background:var(--p-sky);color:var(--p-blue);border-radius:9px;padding:10px 8px;font-size:12.5px;font-weight:700;cursor:pointer;transition:.15s;min-height:44px;text-align:center;white-space:nowrap}
.dp-slots__chip:hover{background:var(--p-blue);color:#fff;border-color:var(--p-blue)}
/* 2026-07-02 REL_86 -- brand-matched focus ring on the slot picker controls (was relying on the UA default) */
.dp-slots__chip:focus-visible,.dp-slots__day:focus-visible,.dp-slots__mode:focus-visible{outline:2px solid var(--p-blue);outline-offset:2px}
/* the JS replaces the SSR fallback mode-buttons with the slot picker -> hide them. Explicit [hidden] rule (specificity 0,2,1) beats the .dp-clinic__act .dp-btn display (recurring UA-[hidden] cascade fix). */
.dp-clinic__act .dp-btn[hidden]{display:none}

/* rating summary */
.dp-rate{display:flex;gap:24px;align-items:center;background:linear-gradient(120deg,var(--p-blue),var(--p-blue-d));border-radius:var(--p-r2);padding:22px 26px;color:#fff}
.dp-rate__n{text-align:center}
.dp-rate__n b{font-family:Jakarta;font-size:46px;line-height:1;display:block}
.dp-rate__n .dp-stars{color:#ffd470;margin-top:5px}
.dp-rate__n .dp-stars svg{width:14px;height:14px}
.dp-rate__b{flex:1;font-size:14px}
.dp-bar{display:flex;align-items:center;gap:10px;margin-top:7px;font-size:13px}
.dp-bar i{flex:1;height:6px;border-radius:3px;background:rgba(255,255,255,.22);overflow:hidden;display:block}
.dp-bar i u{display:block;height:100%;background:#fff;border-radius:3px}
.dp-bar .w96{width:96%}.dp-bar .w94{width:94%}.dp-bar .w90{width:90%}
/* review */
.dp-rev{padding:18px 0;border-top:1px solid var(--p-line)}
.dp-rev__top{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.dp-av{width:42px;height:42px;border-radius:50%;background:linear-gradient(140deg,var(--p-blue-2),var(--p-blue-d));color:#fff;display:grid;place-items:center;font-weight:800;font-family:Jakarta;flex:0 0 auto}
.dp-rev b{font-family:Jakarta;font-size:14.5px}
.dp-rev small{color:var(--p-ink3);font-size:12.5px}
.dp-rev .dp-stars{font-size:12px}.dp-rev .dp-stars svg{width:13px;height:13px}
.dp-rev p{margin:0;color:#3c4d66;font-size:14px}

/* ---- booking: sticky right-rail "Pick a time slot" card (Practo-style) ---- */
/* 2026-07-02 REL_86 -- sticky offset uses the shared --sticky-top token; the card is capped to the viewport and scrolls internally (Practo-style) so it never exceeds the screen and pins cleanly on long pages. scroll-margin-top keeps the hero anchor clear of the sticky header. */
/* 2026-07-02 REL_86 -- booking = col2, sticky (stays visible for conversions), capped to the viewport so a tall slot list scrolls INSIDE the card only (Practo-style); most cards fit with no scroll. Nothing else in col2 -> no overlap. */
/* 2026-07-02 REL_86 -- booking = col2, sticky, COMPACT: the card no longer grows with the slot count; instead the time-chips area (.dp-slots__body) is fixed-height + scrolls (Practo-style), so the picker controls (clinic/mode/date-slider) stay visible and the card fits the viewport. */
/* 2026-07-03 REL_86 -- booking = top card of col2 (.dp-colside), NON-sticky (Naveen). Slot-chips area (.dp-slots__body) scrolls internally so the card stays compact. */
.dp-book2{padding:0;overflow:hidden;min-width:0;scroll-margin-top:calc(var(--sticky-top) + 12px)}
.dp-book2__hd{display:flex;align-items:center;gap:9px;padding:15px 18px;background:var(--p-sky);border-bottom:1px solid var(--p-line)}
.dp-book2__hd svg{width:18px;height:18px;stroke:var(--p-blue);stroke-width:2;fill:none;flex:0 0 auto}
.dp-book2__hd h2{margin:0;font-family:Jakarta;font-size:16px;font-weight:800;color:var(--p-ink)}
.dp-book2__none{padding:16px 18px;margin:0;color:var(--p-ink2);font-size:13px}
.dp-book2 .dp-bk__cl{position:relative}
.dp-book2 .dp-bk__panel{padding:14px 18px 18px}
/* 2026-07-02 REL_86 -- header row: clinic name (left) + fee (right); no redundant mode label above the name */
.dp-book2__head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.dp-book2__fee{font-family:Jakarta;font-size:16px;font-weight:800;color:var(--p-ink);white-space:nowrap;flex:0 0 auto}
.dp-book2__fee em{font-size:11px;font-weight:600;font-style:normal;color:var(--p-ink3);margin-left:3px}
.dp-book2__name{flex:1;min-width:0;font-family:Jakarta;font-size:16.5px;font-weight:700;line-height:1.25;color:var(--p-ink)}
.dp-book2__name a{color:inherit}
.dp-book2__name a:hover{color:var(--p-blue)}
.dp-book2__meta{display:flex;align-items:center;gap:7px;margin-top:6px;font-size:12.5px;color:var(--p-ink2)}
.dp-book2__meta.is-open .dp-dot{background:var(--p-green)}
.dp-book2__meta.is-req .dp-dot{background:var(--p-amber)}
.dp-book2 .dp-clinic__act{margin-top:12px}
.dp-book2 .dp-slots{background:none;border:0;border-radius:0;padding:0;margin-top:14px}/* flush inside the rail card -- the card IS the container, no card-in-card */
/* 2026-07-03 REL_86 -- Practo-style "focus mode": a per-clinic booking button dims the WHOLE page (full-viewport overlay) and spotlights the col2 slot card so total attention lands on picking a slot. CSP-safe (class toggle only, zero inline style); token-driven dim via color-mix (no raw hex). Dismiss = click the dim / Escape. z-index 60 sits above the sticky header (.dp-top z-50); the focused card lifts to 61. */
.dp-spotlight{position:fixed;inset:0;z-index:60;background:color-mix(in srgb,var(--p-ink) 62%,transparent);opacity:0;visibility:hidden;cursor:pointer;transition:opacity .24s ease,visibility 0s linear .24s}
.dp-spotlight.is-on{opacity:1;visibility:visible;transition:opacity .24s ease}
.dp-book2.is-focus{position:relative;z-index:61;box-shadow:var(--p-sh-lift)}/* bright card lifts above the dim (no transform -> no overflow/containing-block risk) */
.dp-book2.is-focus:focus-visible{outline:none}/* the whole card is the spotlight; suppress the -1 tabindex ring */
@media (prefers-reduced-motion:reduce){.dp-spotlight,.dp-spotlight.is-on{transition:none}}
/* 2026-07-03 REL_86 -- inline guest OTP popup: a not-logged-in visitor verifies their mobile HERE (one OTP) instead of being bounced to the full login page. CSP-safe (class/attr toggled, zero inline style); token-driven; mobile-first. */
.dp-otp{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;padding:18px}
.dp-otp[hidden]{display:none}
.dp-otp__backdrop{position:absolute;inset:0;background:color-mix(in srgb,var(--p-ink) 60%,transparent);cursor:pointer}
.dp-otp__card{position:relative;z-index:1;width:100%;max-width:400px;max-height:calc(100vh - 36px);overflow-y:auto;background:var(--p-card);border:1px solid var(--p-line);border-radius:var(--p-r);box-shadow:var(--p-sh-lift);padding:26px 24px 24px;animation:dp-otp-in .2s ease}
@keyframes dp-otp-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.dp-otp__x{position:absolute;top:10px;right:10px;width:44px;height:44px;border:none;background:var(--p-bg);border-radius:10px;color:var(--p-ink2);font-size:20px;line-height:1;cursor:pointer;transition:.15s}/* 44x44 tap target (parity with .dp-modal__x) */
.dp-otp__x:hover{background:var(--p-sky);color:var(--p-blue)}
.dp-otp__title{font-family:Jakarta;font-size:19px;font-weight:800;color:var(--p-ink);margin:0 0 6px;padding-right:28px}
.dp-otp__sub{font-size:13.5px;color:var(--p-ink2);line-height:1.55;margin:0 0 16px}
.dp-otp__row{display:flex;gap:10px}
.dp-otp__fld{display:block;margin-bottom:13px;flex:1;min-width:0}
.dp-otp__fld>span{display:block;font-size:12.5px;font-weight:600;color:var(--p-ink2);margin-bottom:5px}
.dp-otp__fld input{width:100%;height:46px;border:1.5px solid var(--p-line);border-radius:11px;padding:0 13px;font-size:14.5px;font-family:Inter;color:var(--p-ink);background:var(--p-card);transition:.15s}
.dp-otp__fld input:focus{outline:none;border-color:var(--p-blue);box-shadow:0 0 0 3px color-mix(in srgb,var(--p-blue) 14%,transparent)}
.dp-otp__phone{display:flex;align-items:stretch;border:1.5px solid var(--p-line);border-radius:11px;overflow:hidden;transition:.15s}
.dp-otp__phone:focus-within{border-color:var(--p-blue);box-shadow:0 0 0 3px color-mix(in srgb,var(--p-blue) 14%,transparent)}
.dp-otp__cc{display:flex;align-items:center;padding:0 12px;background:var(--p-bg);font-size:14px;font-weight:600;color:var(--p-ink2);border-right:1px solid var(--p-line)}
.dp-otp__phone input{flex:1;min-width:0;height:46px;border:none;padding:0 13px;font-size:15px;letter-spacing:.02em;color:var(--p-ink);background:var(--p-card)}
.dp-otp__phone input:focus{outline:none;box-shadow:none}
.dp-otp__code{text-align:center;letter-spacing:.5em;font-size:20px;font-weight:700;font-family:Jakarta}
.dp-otp__err{color:var(--p-danger);font-size:12.5px;margin:0 0 12px;font-weight:500}
.dp-otp__err[hidden]{display:none}
.dp-otp .dp-btn--block{width:100%;margin-top:4px}
.dp-otp__link{background:none;border:none;color:var(--p-blue);font-family:Jakarta;font-weight:700;font-size:13px;cursor:pointer;padding:0}
.dp-otp__link:hover{text-decoration:underline}
.dp-otp__resend{display:block;margin:13px auto 0}
.dp-otp__resend:disabled{color:var(--p-ink3);cursor:default;text-decoration:none}
.dp-otp__trust{display:flex;align-items:center;gap:7px;margin-top:15px;padding-top:14px;border-top:1px solid var(--p-line);font-size:11.5px;color:var(--p-ink3)}
.dp-otp__trust svg{width:14px;height:14px;stroke:var(--p-green);stroke-width:2;fill:none;flex:0 0 auto}
@media (prefers-reduced-motion:reduce){.dp-otp__card{animation:none}}

/* ---- sidebar ---- */
/* 2026-07-02 REL_86 -- secondary cards now sit in col1 BELOW the main content (booking is sticky alone in col2). Wide column -> 2-up grid so they don't look sparse. */
.dp-side{display:flex;flex-direction:column;gap:18px}/* 2026-07-03 secondary cards now in col2 (.dp-colside) below the booking -> single-column stack (narrow 416px col) */
/* 2026-07-02 REL_86 -- REMOVED orphaned legacy sidebar-booking-widget CSS (.dp-book* / .dp-next* / .dp-seg* / .dp-daylbl* / old .dp-slots grid / .dp-slot* / .dp-trust*):
   the widget was replaced by the per-clinic booking + inline .dp-slots__* picker, and the old .dp-slots{display:grid} was COLLIDING with the new picker mount. Confirmed absent from markup + JS. */
/* side cards */
.dp-mini{background:var(--p-card);border:1px solid var(--p-line);border-radius:var(--p-r);box-shadow:var(--p-sh-2);padding:20px}
.dp-mini h3{font-size:15.5px;margin-bottom:14px}
.dp-sim{display:flex;gap:12px;align-items:center;padding:10px 0}
.dp-sim+.dp-sim{border-top:1px solid var(--p-line)}
.dp-sim img{width:50px;height:50px;border-radius:13px;object-fit:cover}
.dp-sim b{font-family:Jakarta;font-size:14px;display:block}
.dp-sim small{color:var(--p-ink2);font-size:12.5px}
.dp-sim .dp-fee{font-size:13.5px;margin-left:auto}

.dp-foot{text-align:center;color:var(--p-ink3);font-size:13px;padding:34px 0 40px}

@media(max-width:980px){
  /* 2026-07-30 (Naveen Enh2+Enh5) -- single column: un-wrap ALL wrappers (colmain, colside, stack, side) via display:contents so EVERY card orders independently. Mobile flow: hero -> About -> booking -> Clinics -> Expertise -> At a glance -> (Credentials/Reviews/Q&A/FAQ) -> (Similar/Related). Desktop (>980) 2-column layout untouched. Compound selectors (higher specificity) win over the .dp-card/.dp-mini defaults. */
  .dp-grid{grid-template-columns:minmax(0,1fr);row-gap:16px}
  .dp-colmain,.dp-colside,.dp-stack,.dp-side{display:contents}
  /* display:contents drops the wrappers' min-width:0, so the cards are now direct grid items -> give THEM min-width:0 (+ minmax(0,1fr) column) so a wide token/timing/slot-strip can't stretch the single column past the viewport. */
  .dp-card,.dp-mini{min-width:0}
  .dp-hero{order:1}
  .dp-card.dp-sec--about{order:2}
  .dp-card.dp-book2{order:3;overflow:hidden}
  #dp-clinics{order:4}
  .dp-card.dp-sec--exp{order:5}
  .dp-mini.dp-mini--facts{order:6}
  .dp-card{order:7}
  .dp-mini{order:8}
  .dp-slots__body{max-height:none;overflow:visible}/* mobile card full-height -> show all slots, no nested scroll */
  .dp-nav{display:none}.dp-hero__top{flex-direction:column;text-align:center;align-items:center}
  .dp-hd__name,.dp-hd__row,.dp-hero__top .dp-actions{justify-content:center}
  .dp-hero__bar{flex-direction:column;align-items:stretch;gap:16px}.dp-stats{grid-template-columns:repeat(2,1fr);flex:0 0 auto}.dp-hero__cta{flex-direction:column}.dp-hero__cta .dp-btn{width:100%}
  /* 2026-07-06 QA BUG-1: in the column .dp-hero__bar, .dp-stats' flex:1 1 300px made the 300px flex-basis a HEIGHT -> stat cards stretched to ~300px. flex:0 0 auto -> natural (content) height. */
}

/* ---- REL_86 extra sections (Q&A / FAQ / languages / internal-links / insurance) ---- */
.dp-qa{padding:16px 0;border-top:1px solid var(--p-line)}
.dp-qa:first-of-type{border-top:none;padding-top:0}
.dp-qa__q{display:flex;gap:10px;font-family:Jakarta;font-weight:700;font-size:15px;color:var(--p-ink)}
.dp-qa__q i{color:var(--p-blue);font-style:normal;flex:0 0 auto}
.dp-qa__a{display:flex;gap:10px;margin-top:8px;color:#3c4d66;font-size:14px;line-height:1.6}
.dp-qa__a i{color:var(--p-green);font-style:normal;font-weight:800;flex:0 0 auto}
.dp-faq{border:1px solid var(--p-line);border-radius:var(--p-r3);padding:15px 17px;margin-bottom:10px}
.dp-faq summary{font-family:Jakarta;font-weight:700;font-size:14.5px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:10px;color:var(--p-ink)}
.dp-faq summary::-webkit-details-marker{display:none}
.dp-faq summary svg{width:18px;height:18px;stroke:var(--p-blue);stroke-width:2;transition:.2s;flex:0 0 auto}
.dp-faq[open] summary svg{transform:rotate(180deg)}
.dp-faq p{margin:11px 0 0;color:#3c4d66;font-size:14px;line-height:1.65}
.dp-langs{display:flex;flex-wrap:wrap;gap:8px}
.dp-lang{background:var(--p-sky);color:#33557e;border-radius:8px;padding:7px 13px;font-size:13.5px;font-weight:600}
.dp-links{display:grid;grid-template-columns:1fr 1fr;gap:8px 18px}
.dp-links a{display:flex;align-items:center;gap:8px;color:#34455d;font-size:13.5px;padding:6px 0;transition:.15s}
.dp-links a:hover{color:var(--p-blue)}
.dp-links a svg{width:14px;height:14px;stroke:var(--p-blue);stroke-width:2;flex:0 0 auto}
.dp-ins{display:flex;flex-wrap:wrap;gap:8px}
.dp-ins span{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--p-line);border-radius:9px;padding:8px 12px;font-size:13.5px;font-weight:600;color:#34455d}
.dp-ins svg{width:15px;height:15px;stroke:var(--p-green);stroke-width:2.4}
@media(max-width:560px){
  .dp-links{grid-template-columns:1fr}

  /* 2026-07-30 (Naveen Enh6) -- compact hero on phones so the 4 stat cards sit within the first screen (was ~675px). Smaller photo + icon-only Save/Share + tighter spacing/padding. */
  .dp-hero__top{gap:11px;padding:18px 20px 14px}
  .dp-photo img{width:94px;height:112px}
  .dp-photo__ring{inset:-6px}
  .dp-hero__top .dp-hd__name{font-size:21px}
  .dp-hero__top .dp-hd__spec{font-size:14px}
  .dp-hero__top .dp-actions{gap:10px;margin-top:10px}
  .dp-hero__top .dp-act{padding:0;width:42px;height:42px;justify-content:center;gap:0}
  .dp-hero__top .dp-act .dp-act__t{display:none}/* icon-only; aria-label keeps the accessible name */
  .dp-hero__bar{padding:13px 18px}

  /* 2026-07-30 (Naveen Enh1) -- more breathing room between the 4 stat cards */
  .dp-stats{gap:14px}

  /* 2026-07-30 (Naveen Enh3) -- clinic card mobile: photo on top; fee on its own line (was float-right & cramped); consult buttons FULL-WIDTH stacked (clear tap targets, no odd 2+1 wrap). */
  .dp-clinic{flex-direction:column}
  .dp-clinic__img{width:100%;height:150px}
  .dp-clinic__row{flex-direction:column;align-items:flex-start;gap:6px}
  .dp-clinic__fee{margin-left:0;text-align:left;display:flex;align-items:baseline;gap:6px}
  .dp-clinic__fee b{display:inline}
  .dp-clinic__act .dp-btn--pri,.dp-clinic__act .dp-btn--req{flex:1 1 auto;justify-content:center}
  .dp-clinic__acts{width:100%;flex-direction:column;gap:8px}
  .dp-clinic__acts .dp-btn{width:100%;flex:none}

  /* 2026-07-30 (Naveen Enh4) -- "Ask a question" CTA stacks on phones (was space-between row -> button squeezed) */
  .dp-askcta{flex-direction:column;align-items:stretch;gap:12px}
  .dp-askcta .dp-btn{width:100%}
}
.dp-mt{margin-top:16px}


/* ---- REL_86 credential rows (licenses/certs/memberships/awards/recognitions) ---- */
.dp-cred{display:flex;gap:13px;padding:13px 0;border-top:1px solid var(--p-line)}
.dp-cred:first-of-type{border-top:none;padding-top:2px}
.dp-cred>i{width:38px;height:38px;border-radius:11px;background:var(--p-sky);display:grid;place-items:center;flex:0 0 auto;color:var(--p-blue)}
.dp-cred>i svg{width:19px;height:19px;stroke:var(--p-blue);stroke-width:2}
.dp-cred b{display:block;font-family:Jakarta;font-size:14.5px;color:var(--p-ink)}
.dp-cred span{font-size:13px;color:var(--p-ink2)}
.dp-clinic small{display:block}
/* ---- REL_86 Pass1 interactive UI ---- */
.dp-actions{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.dp-act{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1.5px solid var(--p-line);color:#34455d;border-radius:999px;padding:9px 16px;font-size:13.5px;font-weight:700;font-family:Jakarta;cursor:pointer;min-height:40px;transition:.15s}
.dp-act:hover{border-color:var(--p-blue);color:var(--p-blue)}
.dp-act svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2}
.dp-act.on{color:#e23b4e;border-color:#f3c0c7;background:#fef2f3}
.dp-act.on svg{fill:#e23b4e;stroke:#e23b4e}
.dp-sharewrap{position:relative}
.dp-sharemenu{position:absolute;top:46px;left:0;z-index:20;background:#fff;border:1px solid var(--p-line);border-radius:14px;box-shadow:var(--p-sh);padding:8px;min-width:172px}
.dp-sharemenu a,.dp-sharemenu button{display:flex;align-items:center;gap:10px;width:100%;padding:9px 11px;border:none;background:transparent;font:inherit;font-size:13.5px;color:#34455d;border-radius:9px;cursor:pointer;text-align:left}
.dp-sharemenu a:hover,.dp-sharemenu button:hover{background:var(--p-sky);color:var(--p-blue)}
.dp-clamp{display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.dp-showmore{background:none;border:none;color:var(--p-blue);font-family:Jakarta;font-weight:700;font-size:13.5px;cursor:pointer;padding:8px 0 0}
.dp-loadmore{display:block;margin:16px auto 0;background:#fff;border:1.5px solid var(--p-line);color:var(--p-blue);font-family:Jakarta;font-weight:700;font-size:14px;border-radius:999px;padding:11px 22px;min-height:44px;cursor:pointer;transition:.15s}
.dp-loadmore:hover{border-color:var(--p-blue);background:var(--p-sky)}
.dp-loadmore:disabled{opacity:.6;cursor:default}
.dp-askcta{display:flex;align-items:center;justify-content:space-between;gap:14px;background:var(--p-sky);border:1px solid var(--p-sky-2);border-radius:var(--p-r2);padding:16px 18px;margin-top:14px}
.dp-askcta b{font-family:Jakarta;font-size:15px;display:block}.dp-askcta small{color:var(--p-ink2);font-size:13px}
.dp-toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,16px);background:var(--p-ink);color:#fff;padding:13px 20px;border-radius:12px;font-size:14px;font-weight:600;box-shadow:var(--p-sh-lift);z-index:90;opacity:0;transition:.3s;max-width:90vw}
.dp-toast.on{opacity:1;transform:translate(-50%,0)}
/* ---- REL_86 Pass2 review modal + star rating ---- */
.dp-noscroll{overflow:hidden}
.dp-modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px}
.dp-modal__bg{position:absolute;inset:0;background:rgba(12,23,38,.5)}
.dp-modal__box{position:relative;background:#fff;border-radius:var(--p-r);box-shadow:var(--p-sh-lift);padding:28px;max-width:440px;width:100%;z-index:1}
.dp-modal__box h3{font-size:21px}
.dp-modal__sub{color:var(--p-ink2);font-size:13.5px;margin:6px 0 18px}
.dp-modal__x{position:absolute;top:12px;right:16px;background:none;border:none;font-size:26px;line-height:1;color:var(--p-ink3);cursor:pointer;width:34px;height:34px}
.dp-rating{display:flex;gap:6px;margin-bottom:16px}
.dp-star{background:none;border:none;cursor:pointer;padding:3px}
.dp-star svg{width:34px;height:34px;fill:#e4e9f0;stroke:none;transition:.12s}
.dp-star.on svg,.dp-star.hov svg{fill:var(--p-gold)}
.dp-revtext{width:100%;border:1.5px solid var(--p-line);border-radius:12px;padding:13px;font:inherit;font-size:14px;resize:vertical;min-height:96px;color:var(--p-ink)}
.dp-revtext:focus{outline:none;border-color:var(--p-blue)}
.dp-revfoot{display:flex;justify-content:space-between;align-items:center;margin:8px 0 14px;font-size:12.5px}
.dp-revcount{color:var(--p-ink3)}
.dp-rev-err{color:#e23b4e;font-weight:600}
.dp-rev-write{margin-bottom:14px;width:auto}
.dp-rev-empty{margin:4px 0 0;padding:16px 0;border-top:1px solid var(--p-line);color:var(--p-ink2);font-size:13.5px;line-height:1.55}/* 2026-07-03 -- zero-review empty state (the Write-a-review CTA still shows above) */
/* ---- REL_86 review-fixes: tokenize colors + >=44px touch targets ---- */
:root{--p-fav:#e23b4e;--p-fav-bg:#fef2f3;--p-fav-line:#f3c0c7;--p-star-empty:#e4e9f0;--p-ink-soft:#34455d}
.dp-act{min-height:44px;color:var(--p-ink-soft)}
.dp-act.on{color:var(--p-fav);border-color:var(--p-fav-line);background:var(--p-fav-bg)}
.dp-act.on svg{fill:var(--p-fav);stroke:var(--p-fav)}
.dp-star{min-height:44px;display:inline-flex;align-items:center}
.dp-star svg{fill:var(--p-star-empty)}
.dp-star.on svg,.dp-star.hov svg{fill:var(--p-gold)}
.dp-rev-err{color:var(--p-fav)}
.dp-modal__x{width:44px;height:44px}
.dp-pill{color:var(--p-ink-soft)}
.dp-sharemenu a,.dp-sharemenu button{color:var(--p-ink-soft)}
/* CRITICAL fix -- .dp-modal display:grid beats UA [hidden]; re-assert (3rd time this cascade bug -- see .di-btn[hidden]/.di-auth__row[hidden]) */
.dp-modal[hidden]{display:none}

/* 2026-07-27 QA -- flex text holders: the card-wide overflow-wrap:break-word (on .dp) wraps normal text, but a FLEX ITEM won't
   shrink below its content's min-content width, so a long unbroken token still overflowed here: .dp-hd__name (display:flex, the
   name h1 + Verified badge) and .dp-pill (display:inline-flex, icon + label). overflow-wrap:anywhere DOES fold the break into the
   min-content size, letting the flex item shrink and the token break. min-width:0 lets a long pill shrink within its flex-wrap row.
   Scoped to these two flex elements only -- kept OFF the card-wide rule so global intrinsic sizing is untouched. Placed last so it
   wins source-order over the earlier .dp-pill declarations. */
.dp-hd__name,.dp-pill{overflow-wrap:anywhere}
.dp-pill{min-width:0}