/* 2026-07-08 REL_93 -- /all-qna Patient Q&A listing page-unique glue (.qna-*). Shared pieces (di-pagehead/di-tag/di-lead/di-pager/di-empty/
   di-faq/di-btn/di-sec/di-wrap) come from di-system.css; this file only styles the Ask-CTA banner + the text-only question card + FAQ spacing.
   Tokens only (no hardcoded colour/radius) -> inherits di-system automatically. */

/* ---- Ask-a-question CTA banner (internal link, charter #15) ---- */
.qna-ask {
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  background:var(--tint); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:18px 20px; margin-bottom:22px;
}
.qna-ask__txt { display:flex; flex-direction:column; gap:2px; min-width:0; }
.qna-ask__h { font-size:16px; font-weight:800; color:var(--ink); }
.qna-ask__sub { font-size:13.5px; color:var(--ink2); line-height:1.4; }

/* ---- question card list (text-only, no image) ---- */
.qna-list { display:flex; flex-direction:column; gap:14px; }
.qna-card {
  position:relative;   /* 2026-07-30 (QA -- mobile tap-target) -- anchor for the stretched title link below */
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-sm);
  padding:18px 20px; transition:border-color .14s, box-shadow .14s;
}
.qna-card:hover { border-color:var(--sky); box-shadow:var(--sh); }
.qna-card__title { font-size:17px; font-weight:700; line-height:1.35; margin:0 0 6px; }
.qna-card__title a { color:var(--ink); text-decoration:none; }
.qna-card__title a:hover { color:var(--blue); }
/* 2026-07-30 (QA -- mobile tap-target): the WHOLE card is clickable via the title link stretched over it (the ~22px title
   text alone was a small phone tap target). The "Read answer" link sits above the overlay so it keeps its own hover/focus. */
.qna-card__title a::after { content:""; position:absolute; inset:0; z-index:1; }
.qna-card__snip {
  margin:0 0 12px; font-size:14px; color:var(--ink2); line-height:1.5;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.qna-card__foot { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.qna-card__meta { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; color:var(--green-ink); }
.qna-card__meta svg { width:15px; height:15px; flex:0 0 15px; }
.qna-card__more { position:relative; z-index:2; display:inline-flex; align-items:center; min-height:44px; font-size:13px; font-weight:700; color:var(--blue); text-decoration:none; padding:0 6px; margin:0 -6px; }   /* 44px tap target (QA/css L); z-index:2 keeps it above the whole-card stretched link */
.qna-card__more:hover { text-decoration:underline; }
/* keyboard focus ring (di-system blue), matching the shared di-* focus-visible convention */
.qna-card__title a:focus-visible, .qna-card__more:focus-visible { outline:2px solid var(--blue); outline-offset:3px; border-radius:6px; }

/* ---- FAQ wrap (reuses di-faq) ---- */
.qna-faqwrap { margin-top:34px; }
.qna-faqwrap > h2 { font-size:clamp(19px,2.4vw,23px); font-weight:800; color:var(--ink); margin:0 0 14px; }

@media (max-width:560px) {
  .qna-ask { flex-direction:column; align-items:stretch; }
  .qna-ask .di-btn { width:100%; }
  .qna-card { padding:16px; }
}

/* ============================================================
   2026-07-09 REL_94 -- /qna/{slug} DETAIL page-unique glue (.qna-d*). Question header + doctor-answer cards + helpful vote + related sidebar.
   Tokens only (inherits di-system light-only). Shared di-sec/di-wrap/di-tag/di-btn/di-empty/di-prose/_DiBreadcrumb come from di-system.
   ============================================================ */
.qna-d__grid { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:26px; align-items:start; }
.qna-d__main { min-width:0; }

/* ---- question header ---- */
.qna-d__q { background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-sm); padding:22px 24px; }
.qna-d__title { font-size:clamp(21px,2.7vw,27px); font-weight:800; line-height:1.28; color:var(--ink); margin:10px 0 10px; }
.qna-d__qmeta { display:flex; align-items:center; flex-wrap:wrap; gap:8px; font-size:13px; font-weight:600; color:var(--muted); }
.qna-d__dot { width:4px; height:4px; border-radius:50%; background:var(--muted); display:inline-block; }
.qna-d__qtext { margin:14px 0 0; font-size:15.5px; line-height:1.6; color:var(--ink2); white-space:pre-line; overflow-wrap:anywhere; }

/* ---- answers ---- */
.qna-d__ansh { font-size:clamp(17px,2.1vw,20px); font-weight:800; color:var(--ink); margin:30px 0 14px; }
.qna-d__answers { display:flex; flex-direction:column; gap:16px; }
.qna-d__ans { background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-sm); padding:20px 22px; }

/* 2026-07-28 QA -- top-align: with the region now on its own line the docmeta can be 3 lines (name / specs / region), so center-align floated the avatar; flex-start keeps the avatar level with the name. */
.qna-d__doc { display:flex; align-items:flex-start; gap:13px; flex-wrap:wrap; }
.qna-d__avatar { position:relative; flex:0 0 52px; width:52px; height:52px; border-radius:50%; overflow:hidden; background:var(--tint); border:1px solid var(--line); }
.qna-d__avatar img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; }   /* photo covers the initials beneath; on img error the JS removes it -> initials show */
.qna-d__ini { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:800; color:var(--blue); letter-spacing:.5px; }
.qna-d__docmeta { min-width:0; flex:1 1 auto; }
.qna-d__docname { display:flex; align-items:center; gap:6px; font-size:16px; font-weight:700; color:var(--ink); min-width:0; }
.qna-d__docname a { color:var(--ink); text-decoration:none; min-width:0; overflow-wrap:anywhere; }
.qna-d__docname a:hover { color:var(--blue); }
.qna-d__verified { display:inline-flex; color:var(--green-ink); }
.qna-d__verified svg { width:16px; height:16px; }
.qna-d__tags { display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin-top:6px; }
/* 2026-08-05 QA -- specialities were plain-text .di-tag (transparent, no border/padding) so multiple specs on one card
   ran together and weren't differentiated (same fix as the org/clinic doctor-card). Give each spec a bounded pill;
   overflow-wrap:anywhere so a long unbroken speciality still wraps inside its chip instead of overflowing the card. */
.qna-d__tags .di-tag { margin-bottom:0; padding:4px 10px; background:var(--tint); border:1px solid var(--line); border-radius:var(--pill,999px); letter-spacing:.04em; overflow-wrap:anywhere; }
/* 2026-07-28 QA -- region/city on its OWN line below the specialities (was in .qna-d__tags next to the spec tags -> speciality vs region not differentiated). Pin icon + muted text. */
.qna-d__region { display:flex; align-items:center; gap:5px; margin-top:5px; font-size:12.5px; font-weight:600; color:var(--muted); min-width:0; }
.qna-d__region svg { width:14px; height:14px; flex:0 0 auto; }
.qna-d__region span { min-width:0; overflow-wrap:anywhere; }
.qna-d__consult { margin-left:auto; }

/* 2026-07-28 QA -- QnA answer/question long text: extra-safety wrap so an unbroken token (URL / long word) never overflows the card (on top of the shared body overflow-wrap:break-word). */
.qna-d__anstext { margin:14px 0 0; font-size:15px; line-height:1.65; color:var(--ink2); white-space:pre-line; overflow-wrap:anywhere; }

.qna-d__ansfoot { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:16px; padding-top:14px; border-top:1px solid var(--line); }
.qna-d__ansage { font-size:12.5px; font-weight:600; color:var(--muted); }
.qna-d__vote { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.qna-d__votelabel { font-size:13px; font-weight:600; color:var(--ink2); }
.qna-d__votebtn { display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 14px; font-size:13px; font-weight:700; color:var(--ink2); background:var(--white); border:1px solid var(--line); border-radius:var(--pill,999px); cursor:pointer; transition:border-color .14s, color .14s, background .14s; }
.qna-d__votebtn svg { width:15px; height:15px; }
.qna-d__votebtn:hover { border-color:var(--sky); color:var(--ink); }
.qna-d__votebtn--up.qna-d__votebtn--on { color:var(--green-ink); border-color:var(--green-ink); background:var(--tint); }
.qna-d__votebtn--down.qna-d__votebtn--on { color:var(--danger); border-color:var(--danger); background:var(--danger-tint); }
.qna-d__votebtn[disabled] { opacity:.55; cursor:default; }

/* ---- sidebar ---- */
/* 2026-08-05 QA -- min-width:0 lets this grid item shrink: a Related-question with a long UNBROKEN string (e.g. an email
   "amanmishra6131+987988465654@gmail.com…") gave the sidebar a huge min-content, so the grid track grew, the page went past the
   900px breakpoint, the mobile single-column rule never applied, and the WHOLE page blew out to ~946px (zoomed-out on phones). */
.qna-d__side { position:sticky; top:88px; display:flex; flex-direction:column; gap:18px; min-width:0; }
.qna-d__ask { display:flex; flex-direction:column; gap:8px; background:var(--tint); border:1px solid var(--line); border-radius:var(--r-lg); padding:18px 20px; }
.qna-d__askh { font-size:15.5px; font-weight:800; color:var(--ink); }
.qna-d__asksub { font-size:13px; color:var(--ink2); line-height:1.45; margin-bottom:4px; }
.qna-d__related { background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-sm); padding:16px 18px; }
.qna-d__relh { font-size:15px; font-weight:800; color:var(--ink); margin:0 0 8px; }
.qna-d__rellist { list-style:none; margin:0; padding:0; }
.qna-d__rellist li { border-top:1px solid var(--line); }
.qna-d__rellist li:first-child { border-top:0; }
.qna-d__rellist a { display:flex; flex-direction:column; justify-content:center; min-height:44px; padding:11px 0; text-decoration:none; }
.qna-d__reltitle { display:block; font-size:14px; font-weight:700; line-height:1.35; color:var(--ink); overflow-wrap:anywhere; }  /* 2026-08-05 QA -- break long unbroken related-question titles (email/URL) inside the sidebar */
.qna-d__rellist a:hover .qna-d__reltitle { color:var(--blue); }
.qna-d__relsnip { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin-top:3px; font-size:12.5px; color:var(--muted); line-height:1.45; }
.qna-d__back { display:inline-flex; align-items:center; min-height:44px; font-size:13.5px; font-weight:700; color:var(--blue); text-decoration:none; }
.qna-d__back:hover { text-decoration:underline; }

/* keyboard focus (shared di-* blue ring convention) */
.qna-d__docname a:focus-visible, .qna-d__consult:focus-visible, .qna-d__votebtn:focus-visible, .qna-d__rellist a:focus-visible, .qna-d__back:focus-visible { outline:2px solid var(--blue); outline-offset:3px; border-radius:6px; }

@media (max-width:900px) {
  .qna-d__grid { grid-template-columns:1fr; gap:22px; }
  .qna-d__side { position:static; }
}
@media (max-width:560px) {
  .qna-d__q, .qna-d__ans { padding:16px; }
  .qna-d__consult { margin-left:0; width:100%; justify-content:center; }
  .qna-d__ansfoot { align-items:flex-start; }
  .qna-d__vote { width:100%; }
}

/* vote error toast (di-qnadetail.js) */
.qna-d__toast { position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(10px); max-width:calc(100vw - 32px); background:var(--ink); color:var(--white); font-size:13.5px; font-weight:600; padding:11px 18px; border-radius:var(--r-lg); box-shadow:var(--sh-sm); opacity:0; pointer-events:none; transition:opacity .18s, transform .18s; z-index:60; }
.qna-d__toast.is-show { opacity:1; transform:translateX(-50%) translateY(0); }
.qna-d__toast[data-ok="0"] { background:var(--danger); }

/* ---- inline OTP guest-auth modal (di-qnadetail.js; reuses the shared /GuestBooking/SendOtp + /VerifyOtp endpoints) ---- */
.qna-otp { position:fixed; inset:0; z-index:80; display:flex; align-items:center; justify-content:center; padding:20px; }
.qna-otp[hidden] { display:none; }
.qna-otp__backdrop { position:absolute; inset:0; background:color-mix(in srgb, var(--ink) 55%, transparent); }
.qna-otp__card { position:relative; width:100%; max-width:440px; max-height:calc(100vh - 40px); overflow:auto; background:var(--white); border-radius:var(--r-lg); box-shadow:0 24px 60px color-mix(in srgb, var(--ink) 26%, transparent); padding:26px 26px 22px; }
.qna-otp__x { position:absolute; top:8px; right:10px; width:44px; height:44px; border:0; background:transparent; font-size:26px; line-height:1; color:var(--muted); cursor:pointer; border-radius:8px; }
.qna-otp__x:hover { color:var(--ink); background:var(--tint); }
.qna-otp__title { font-size:19px; font-weight:800; color:var(--ink); margin:2px 0 6px; }
.qna-otp__sub { font-size:13.5px; color:var(--ink2); line-height:1.5; margin:0 0 16px; }
.qna-otp__row { display:flex; gap:12px; }
.qna-otp__fld { display:flex; flex-direction:column; gap:5px; flex:1 1 auto; min-width:0; margin-bottom:13px; font-size:12.5px; font-weight:600; color:var(--ink2); }
.qna-otp__fld input { height:46px; border:1.5px solid var(--line); border-radius:12px; padding:0 14px; font-size:15px; font-family:inherit; color:var(--ink); background:var(--white); transition:border-color .14s; }
.qna-otp__fld input:focus { outline:none; border-color:var(--blue); }
.qna-otp__phone { display:flex; align-items:center; border:1.5px solid var(--line); border-radius:12px; overflow:hidden; transition:border-color .14s; }
.qna-otp__phone:focus-within { border-color:var(--blue); }
.qna-otp__cc { flex:0 0 auto; padding:0 12px; height:46px; display:flex; align-items:center; font-size:14px; font-weight:700; color:var(--ink2); background:var(--tint); border-right:1.5px solid var(--line); }
.qna-otp__phone input { flex:1 1 auto; min-width:0; height:46px; border:0; padding:0 14px; font-size:15px; font-family:inherit; color:var(--ink); }
.qna-otp__phone input:focus { outline:none; }
.qna-otp__code { letter-spacing:6px; text-align:center; font-weight:700; }
.qna-otp__err { margin:0 0 12px; font-size:13px; font-weight:600; color:var(--danger); }
.qna-otp .di-btn--block { margin-top:4px; }
.qna-otp__link { border:0; background:transparent; padding:0; color:var(--blue); font-size:13px; font-weight:700; font-family:inherit; cursor:pointer; }
.qna-otp__link:hover { text-decoration:underline; }
.qna-otp__resend { display:block; margin:12px auto 0; min-height:44px; }
.qna-otp__resend:disabled { color:var(--muted); cursor:default; }
.qna-otp__trust { display:flex; align-items:flex-start; gap:7px; margin:14px 0 0; font-size:12px; color:var(--muted); line-height:1.45; }
.qna-otp__trust svg { width:15px; height:15px; flex:0 0 15px; margin-top:1px; color:var(--green-ink); }
.qna-otp__x:focus-visible, .qna-otp__link:focus-visible, .qna-otp__fld input:focus-visible, .qna-otp__phone input:focus-visible { outline:2px solid var(--blue); outline-offset:2px; }
@media (max-width:480px) { .qna-otp__row { flex-direction:column; gap:0; } .qna-otp__card { padding:22px 18px 18px; } }
.qna-noscroll { overflow:hidden; }   /* scroll-lock while the OTP modal is open */