/* ══════════════════════════════════════════════════════════
   dr.ps Feed — Facebook-inspired 3-column layout (RTL)
   Scope: only on body.feed-page (avoids clobbering classic pages)
══════════════════════════════════════════════════════════ */
body.feed-page {
    /* Medical palette derived from dr.ps logo (navy + orange + white) */
    --fd-primary:   #1E40AF;  /* medical navy — trust, authority */
    --fd-primary-d: #1E3A8A;  /* deeper navy for hover */
    --fd-primary-l: #DBEAFE;  /* very light blue tint for backgrounds */
    --fd-accent:    #EA580C;  /* brand orange — warmth, CTAs */
    --fd-accent-d:  #C2410C;
    --fd-accent-l:  #FFEDD5;
    --fd-teal:      #0891B2;  /* clinical teal — "online", live status */
    --fd-teal-l:    #CFFAFE;
    --fd-success:   #059669;  /* genuine success only (used sparingly) */
    --fd-danger:    #DC2626;  /* emergencies, errors, urgent */
    --fd-text:      #0F172A;  /* slate-900 */
    --fd-text-2:    #475569;  /* slate-600 */
    --fd-border:    #E2E8F0;  /* slate-200 */
    --fd-surface:   #ffffff;
    --fd-bg:        #F1F5F9;  /* slate-100 — clean hospital backdrop */
    --fd-hover:     #EFF6FF;  /* blue-50 */
    --fd-shadow:    0 1px 2px rgba(30,64,175,.06);
    --fd-shadow-h:  0 4px 14px rgba(30,64,175,.12);
    --fd-topbar-h:  56px;
    --fd-radius:    12px;

    background: var(--fd-bg);
    font-family: 'Cairo', 'Tajawal', system-ui, sans-serif;
    color: var(--fd-text);
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* ── Always hide the OLD classic site header when our shell is active ── */
body.feed-page > header.fixed-top,
body.feed-page > .backmask {
    display: none !important;
}

/* ── Reset legacy <main> padding ──
   style-rtl.css applies `padding-top: 110px` to <main> to compensate for
   the old 110px-tall header. Our new sticky topbar (56px) is in flow, so
   that compensation creates a giant empty gap below the header. Zero it out. */
body.feed-page main {
    padding-top: 0 !important;
}

/* ── Hide footer ONLY on the actual feed home page ── */
body.feed-page.fd-is-feed > footer.hide-print {
    display: none !important;
}

/* ── WhatsApp FAB — smaller, calm, never overlaps the bottom-nav ── */
body.feed-page .whatsapp.hide-print {
    width: 44px !important;
    height: 44px !important;
    bottom: 24px !important;
    inset-inline-end: 16px !important;
    inset-inline-start: auto !important;
    left: auto !important;
    right: 16px;
    font-size: 18px !important;
    box-shadow: var(--ds-sh-md);
    opacity: .92;
    z-index: var(--ds-z-fab);
}
body.feed-page .whatsapp.hide-print:hover { opacity: 1; }
@media (max-width: 768px) {
    body.feed-page .whatsapp.hide-print {
        bottom: 72px !important;        /* clear the 56px bottom-nav + 16px gap */
        width: 40px !important;
        height: 40px !important;
    }
}

/* ── Hide WhatsApp FAB inside operational dashboards
   (reduces visual clutter for staff working under time pressure) ── */
body.feed-page[data-page-context="dashboard"] .whatsapp.hide-print,
body.feed-page[data-page-context="dashboard"] footer.hide-print {
    display: none !important;
}

/* ── Shell layout for non-feed pages ────────────────────────────
   The topbar is sticky (in flow), so we just need a bit of bottom
   padding on mobile to clear the bottom-nav. We DO NOT add max-width
   here — dashboards use their own container-fluid grid and would
   break if we constrained them. Simple text pages can opt in via
   <div class="fd-shell-narrow"> instead. */
body.feed-page:not(.fd-is-feed) {
    padding-top: 0 !important;
}
@media (max-width: 768px) {
    body.feed-page:not(.fd-is-feed) > .fd-shell-content {
        padding-bottom: 70px; /* clear the bottom-nav */
    }
}

/* Opt-in narrow container for simple text/form pages
   (login, signup, privacy, terms, etc.) */
.fd-shell-narrow {
    max-width: 720px;
    margin: 20px auto;
    background: var(--fd-surface);
    border-radius: var(--fd-radius);
    box-shadow: var(--fd-shadow);
    padding: 24px;
}
@media (max-width: 768px) {
    .fd-shell-narrow { margin: 10px; padding: 16px; }
}

/* ══════════════════════════════════════════════════════════
   Legacy color normalization
   ─────────────────────────────────
   Many existing pages hard-coded the old "pharmacy green"
   palette inline. We can't touch their content per the brief,
   so we map the most common offenders to the medical palette
   when they appear inside our shell. Conservative scope:
   only background-color / color on elements that aren't
   explicit framework components.
══════════════════════════════════════════════════════════ */
body.feed-page .btn-success,
body.feed-page .bg-success {
    background-color: var(--fd-primary) !important;
    border-color: var(--fd-primary) !important;
}
body.feed-page .text-success { color: var(--fd-primary) !important; }
body.feed-page a.text-success:hover { color: var(--fd-primary-d) !important; }

/* Old hero gradient backgrounds → medical navy gradient */
body.feed-page [style*="linear-gradient"][style*="064e3b"],
body.feed-page [style*="linear-gradient"][style*="065f46"],
body.feed-page [style*="linear-gradient"][style*="047857"] {
    background: linear-gradient(135deg, #1E3A8A, #1E40AF, #0891B2) !important;
}

/* Common "old primary green" button-like elements */
body.feed-page [style*="background:#0EA968"],
body.feed-page [style*="background: #0EA968"],
body.feed-page [style*="background-color:#0EA968"],
body.feed-page [style*="background-color: #0EA968"] {
    background-color: var(--fd-primary) !important;
}
body.feed-page [style*="color:#0EA968"],
body.feed-page [style*="color: #0EA968"] { color: var(--fd-primary) !important; }
body.feed-page [style*="color:#047857"],
body.feed-page [style*="color: #047857"] { color: var(--fd-primary-d) !important; }

/* Extend coverage for hero/banner gradients commonly written in pages */
body.feed-page section[style*="064e3b"],
body.feed-page section[style*="065f46"],
body.feed-page section[style*="047857"],
body.feed-page section[style*="059669"],
body.feed-page section[style*="0EA968"],
body.feed-page div[style*="background"][style*="064e3b"],
body.feed-page div[style*="background"][style*="065f46"],
body.feed-page div[style*="background"][style*="047857"],
body.feed-page div[style*="background"][style*="059669"],
body.feed-page div[style*="background"][style*="0EA968"],
body.feed-page div[style*="background"][style*="0ea968"],
body.feed-page div[style*="background"][style*="10b981"],
body.feed-page div[style*="background"][style*="16a34a"],
body.feed-page div[style*="background"][style*="22c55e"] {
    background: linear-gradient(135deg, #1E3A8A 0%, #1E40AF 50%, #0891B2 100%) !important;
}

/* Common standalone green text/icons → navy */
body.feed-page [style*="color:#059669"],
body.feed-page [style*="color: #059669"],
body.feed-page [style*="color:#10b981"],
body.feed-page [style*="color: #10b981"],
body.feed-page [style*="color:#16a34a"],
body.feed-page [style*="color: #16a34a"],
body.feed-page [style*="color:#22c55e"],
body.feed-page [style*="color: #22c55e"] { color: var(--fd-primary) !important; }

/* Whatsapp & WA-themed buttons keep their brand green
   (they are NOT part of our palette — they're WhatsApp brand).
   The overrides above are specific to known palette hex codes only. */

[data-theme="dark"] body.feed-page,
body.feed-page[data-theme="dark"] {
    --fd-text:    #e4e6eb;
    --fd-text-2:  #b0b3b8;
    --fd-border:  #3a3b3c;
    --fd-surface: #242526;
    --fd-bg:      #18191a;
    --fd-hover:   #3a3b3c;
}

/* ══════════════════════════════════════════════════════════
   Topbar — sticky
══════════════════════════════════════════════════════════ */
.fd-topbar {
    position: sticky;
    top: 0;
    z-index: 1000;
    /* +safe-area-inset-top so the bar clears the notch/Dynamic Island in
       standalone PWA mode; resolves to 0 in normal browser & on desktop */
    height: calc(var(--fd-topbar-h) + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
    background: var(--fd-surface);
    border-bottom: 1px solid var(--fd-border);
    box-shadow: var(--fd-shadow);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding-inline: 16px;
    gap: 8px;
}

.fd-topbar-left,
.fd-topbar-center,
.fd-topbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.fd-topbar-right { justify-content: flex-start; }
.fd-topbar-left  { justify-content: flex-end; }

.fd-logo {
    display: flex; align-items: center; gap: 8px;
    text-decoration: none; color: inherit;
}
.fd-logo img { width: 40px; height: 40px; border-radius: 50%; object-fit: contain; background: #fff; }
.fd-logo-text {
    font-size: 14px; font-weight: 800; color: var(--fd-primary);
    line-height: 1.1;
}
.fd-logo-text small { display: block; font-size: 10px; color: var(--fd-text-2); font-weight: 500; }

/* ── Search ── */
.fd-search {
    position: relative;
    width: 100%; max-width: 420px;
}
.fd-search-input-wrap {
    position: relative;
    display: flex; align-items: center;
    background: var(--fd-bg); border-radius: 50px;
    padding: 0 6px 0 16px; height: 40px;
}
.fd-search-input-wrap > i { color: var(--fd-text-2); margin-inline-end: 8px; }
.fd-search input {
    flex: 1; background: transparent; border: 0; outline: 0;
    font-size: 14px; color: var(--fd-text);
    font-family: inherit;
    min-width: 0;
}
.fd-search input::placeholder { color: var(--fd-text-2); }

.fd-filter-btn {
    width: 32px; height: 32px; border-radius: 50%;
    border: 0; background: transparent;
    color: var(--fd-text-2); cursor: pointer;
    font-size: 14px;
    display: flex; align-items: center; justify-content: center;
    transition: background var(--ds-t-fast), color var(--ds-t-fast);
    flex-shrink: 0;
    font-family: inherit;
}
.fd-filter-btn:hover {
    background: var(--fd-surface);
    color: var(--fd-primary);
}

.fd-search-suggest {
    position: absolute;
    inset-inline-start: 0;
    inset-inline-end: 0;
    top: calc(100% + 6px);
    background: var(--fd-surface);
    border-radius: var(--fd-radius);
    box-shadow: var(--fd-shadow-h);
    max-height: 70vh;
    overflow-y: auto;
    padding: 6px 0;
    display: none;
    z-index: 1100;
}
.fd-search-suggest.open { display: block; }

.fd-suggest-group-label {
    padding: 8px 14px 4px;
    font-size: 11px; font-weight: 700; color: var(--fd-text-2);
    text-transform: uppercase; letter-spacing: .5px;
}
.fd-suggest-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px;
    text-decoration: none; color: var(--fd-text);
    cursor: pointer;
    transition: background .15s;
}
.fd-suggest-item:hover,
.fd-suggest-item.active { background: var(--fd-hover); }
.fd-suggest-item-ic {
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--fd-primary-l); color: var(--fd-primary);
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; flex-shrink: 0;
}
.fd-suggest-item-body { flex: 1; min-width: 0; }
.fd-suggest-item-title { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fd-suggest-item-meta  { font-size: 11px; color: var(--fd-text-2); }
.fd-suggest-empty { padding: 14px; text-align: center; color: var(--fd-text-2); font-size: 13px; }

/* ── Nav pills (desktop) ── */
.fd-nav {
    display: flex; align-items: center; gap: 6px;
}
.fd-nav-item {
    padding: 0 30px; height: 48px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 8px;
    color: var(--fd-text-2);
    text-decoration: none;
    font-size: 20px;
    position: relative;
    transition: background .15s;
}
.fd-nav-item:hover { background: var(--fd-hover); color: var(--fd-text); }
.fd-nav-item.active { color: var(--fd-primary); }
.fd-nav-item .fd-badge {
    position: absolute; top: 4px; inset-inline-end: 18px;
    background: #e41e3f; color: #fff;
    font-size: 10px; font-weight: 700; line-height: 1.5;
    border-radius: 100px; padding: 0 5px;
    min-width: 16px; height: 16px;
    display: flex; align-items: center; justify-content: center;
}
.fd-nav-item.active::after {
    content: ''; position: absolute; bottom: -2px; inset-inline: 12px; height: 3px;
    background: var(--fd-primary); border-radius: 2px;
}

/* ── Topbar action icons (notif, msgs, account) ── */
.fd-icon-btn {
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--fd-bg);
    border: 0;
    display: flex; align-items: center; justify-content: center;
    color: var(--fd-text); cursor: pointer;
    position: relative;
    text-decoration: none;
    transition: background .15s;
}
.fd-icon-btn:hover { background: var(--fd-hover); }

/* ══ Guest auth buttons — login (ghost) + signup (gradient pill) ══ */
.fd-auth { display: flex; align-items: center; gap: 8px; }
.fd-auth-btn {
    display: inline-flex; align-items: center; gap: 7px;
    height: 40px; padding: 0 18px; border-radius: 100px;
    font-size: 13.5px; font-weight: 800; font-family: inherit;
    text-decoration: none; white-space: nowrap; line-height: 1;
    transition: transform .15s ease, box-shadow .18s ease, background .18s, border-color .18s, color .18s, filter .18s;
    -webkit-tap-highlight-color: transparent;
}
.fd-auth-btn i { font-size: 14px; }
/* Login — refined outline/ghost */
.fd-auth-login {
    color: var(--fd-primary);
    background: var(--fd-surface);
    border: 1.5px solid var(--fd-border);
}
.fd-auth-login:hover {
    border-color: var(--fd-primary);
    background: var(--fd-primary-l);
    color: var(--fd-primary-d);
}
/* Signup — gradient pill with a soft brand glow */
.fd-auth-signup {
    color: #fff;
    background: linear-gradient(135deg, var(--fd-primary) 0%, var(--fd-primary-d) 60%, #16276b 100%);
    border: 1.5px solid transparent;
    box-shadow: 0 4px 14px rgba(30,64,175,.30);
}
.fd-auth-signup:hover {
    color: #fff;
    box-shadow: 0 7px 20px rgba(30,64,175,.42);
    transform: translateY(-1px);
    filter: brightness(1.06);
}
.fd-auth-signup:active { transform: translateY(0); box-shadow: 0 3px 10px rgba(30,64,175,.30); }
/* Compact on phones: login becomes icon-only so both fit the narrow bar */
@media (max-width: 768px) {
    .fd-auth { gap: 6px; }
    .fd-auth-btn { height: 38px; padding: 0 14px; font-size: 12.5px; }
    .fd-auth-login { width: 38px; padding: 0; justify-content: center; }
    .fd-auth-login span { display: none; }
}
.fd-icon-btn .fd-badge {
    position: absolute; top: -2px; inset-inline-end: -2px;
    background: #e41e3f; color: #fff;
    font-size: 11px; font-weight: 700;
    border-radius: 100px; padding: 2px 6px;
    min-width: 18px; height: 18px;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid var(--fd-surface);
}

/* ── Account dropdown ── */
.fd-account { position: relative; }
.fd-account-btn { padding: 0; overflow: hidden; }
.fd-account-btn img,
.fd-account-btn .fd-avatar-fallback {
    width: 40px; height: 40px; border-radius: 50%; object-fit: cover;
    background: var(--fd-primary-l); color: var(--fd-primary);
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; font-weight: 800;
}

.fd-dropdown {
    position: absolute;
    inset-inline-end: 0; top: calc(100% + 8px);
    width: 320px;
    background: var(--fd-surface);
    border-radius: var(--fd-radius);
    box-shadow: var(--fd-shadow-h);
    padding: 8px;
    display: none;
    z-index: 1100;
}
.fd-dropdown.open { display: block; }
.fd-dropdown-header {
    padding: 10px; display: flex; align-items: center; gap: 12px;
    border-radius: 8px; background: var(--fd-bg);
    margin-bottom: 8px;
}
.fd-dropdown-header .fd-avatar-fallback,
.fd-dropdown-header img {
    width: 48px; height: 48px; border-radius: 50%; object-fit: cover;
    background: var(--fd-primary-l); color: var(--fd-primary);
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; font-weight: 800;
}
.fd-dropdown-header .name { font-size: 15px; font-weight: 700; }
.fd-dropdown-header .sub { font-size: 12px; color: var(--fd-text-2); }

.fd-dropdown-item {
    display: flex; align-items: center; gap: 12px;
    padding: 10px; border-radius: 8px;
    color: var(--fd-text); text-decoration: none;
    font-size: 14px;
    transition: background .15s;
    border: 0; background: transparent; width: 100%; cursor: pointer;
    font-family: inherit;
}
.fd-dropdown-item:hover { background: var(--fd-hover); }
.fd-dropdown-item i { width: 24px; text-align: center; color: var(--fd-text-2); }

.fd-dropdown-divider {
    height: 1px; background: var(--fd-border); margin: 6px -8px;
}

/* ── Notifications dropdown ── */
.fd-notif-dropdown {
    width: 360px; max-height: 70vh; overflow-y: auto;
}
.fd-notif-dropdown h4 {
    font-size: 18px; font-weight: 700; margin: 8px 10px 12px;
}
.fd-notif-empty {
    padding: 30px 16px; text-align: center; color: var(--fd-text-2); font-size: 14px;
}
.fd-notif-item {
    display: flex; gap: 12px; padding: 10px;
    border-radius: 8px;
    text-decoration: none; color: var(--fd-text);
    transition: background .15s;
}
.fd-notif-item:hover { background: var(--fd-hover); }
.fd-notif-item.unread { background: var(--fd-primary-l); }
.fd-notif-item.unread:hover { background: #C7DBFB; }
.fd-notif-ic {
    width: 44px; height: 44px; border-radius: 50%;
    background: var(--fd-bg); color: var(--fd-text-2);
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; flex-shrink: 0;
}
.fd-notif-body { flex: 1; min-width: 0; }
.fd-notif-content { font-size: 14px; line-height: 1.5; }
.fd-notif-time { font-size: 12px; color: var(--fd-primary); margin-top: 4px; }

/* ══════════════════════════════════════════════════════════
   Notifications panel — Facebook style (tabs + avatars + grouping)
══════════════════════════════════════════════════════════ */
.fd-notif-dropdown {
    width: 380px; max-width: calc(100vw - 24px);
    padding: 0; max-height: 80vh; overflow: hidden;
}
/* Open state uses a flex column (sticky head/tabs, scrolling list, fixed footer).
   Placed after `.fd-dropdown.open{display:block}` so this wins by source order. */
.fd-notif-dropdown.open { display: flex; flex-direction: column; }
.fd-ntf-head {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 16px 8px; flex-shrink: 0;
}
.fd-ntf-head h4 { font-size: 20px; font-weight: 800; margin: 0; flex: 1; }
.fd-ntf-seeall {
    font-size: 13px; font-weight: 700; color: var(--fd-primary);
    text-decoration: none; white-space: nowrap;
}
.fd-ntf-seeall:hover { text-decoration: underline; }

.fd-ntf-tabs {
    display: flex; gap: 8px; padding: 4px 16px 10px;
    border-bottom: 1px solid var(--fd-border); flex-shrink: 0;
}
.fd-ntf-tab {
    border: 0; cursor: pointer; font-family: inherit;
    background: var(--fd-bg, #eef2f7); color: var(--fd-text-2, #65676b);
    font-size: 13.5px; font-weight: 700;
    padding: 7px 16px; border-radius: 100px; transition: .15s;
}
.fd-ntf-tab:hover { background: var(--fd-hover, #e4e6eb); }
.fd-ntf-tab.active { background: var(--fd-primary-l, #e7f0ff); color: var(--fd-primary, #1877f2); }

.fd-ntf-list { overflow-y: auto; flex: 1; padding: 6px; min-height: 80px; }
.fd-ntf-sec {
    font-size: 15px; font-weight: 800; color: var(--fd-text, #050505);
    padding: 10px 10px 4px;
}

.fd-ntf-item {
    display: flex; align-items: center; gap: 12px;
    padding: 9px 10px; border-radius: 10px;
    text-decoration: none; color: var(--fd-text, #050505);
    transition: background .15s; position: relative;
}
.fd-ntf-item:hover { background: var(--fd-hover, #f2f2f2); }

/* منطقة الرابط القابلة للنقر داخل عنصر الإشعار (تترك مكاناً لأزرار الإجراءات) */
.fd-ntf-link {
    flex: 1; min-width: 0;
    display: flex; align-items: center; gap: 12px;
    text-decoration: none; color: inherit;
}

/* أزرار «تمت القراءة» و«حذف» بجانب كل إشعار */
.fd-ntf-actions {
    display: flex; align-items: center; gap: 5px; flex-shrink: 0;
    opacity: .55; transition: opacity .15s;
}
.fd-ntf-item:hover .fd-ntf-actions { opacity: 1; }
.fd-ntf-act {
    width: 30px; height: 30px; border-radius: 50%;
    border: none; cursor: pointer; padding: 0;
    background: var(--fd-bg, #e4e6eb); color: var(--fd-text-2, #65676b);
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; transition: background .15s, color .15s;
}
.fd-ntf-read:hover { background: #e6f4ea; color: #1f9d55; }
.fd-ntf-del:hover  { background: #fde8e8; color: #e02424; }

.fd-ntf-av { position: relative; flex-shrink: 0; width: 56px; height: 56px; }
.fd-ntf-img,
.fd-ntf-fallback {
    width: 56px; height: 56px; border-radius: 50%;
    object-fit: cover; background: var(--fd-bg, #e4e6eb);
    display: flex; align-items: center; justify-content: center;
}
.fd-ntf-fallback { color: #fff; font-size: 22px; }
.fd-ntf-badge {
    position: absolute; bottom: -2px; inset-inline-start: -2px;
    width: 24px; height: 24px; border-radius: 50%;
    border: 2px solid var(--fd-surface, #fff);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 11px;
}
/* Color variants for the small type badge + icon fallback */
.ntf-blue   { background: #1877f2; }
.ntf-green  { background: #16a34a; }
.ntf-amber  { background: #f59e0b; }
.ntf-red    { background: #e41e3f; }
.ntf-purple { background: #8b5cf6; }
.ntf-gray   { background: #8a8d91; }

.fd-ntf-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.fd-ntf-text {
    font-size: 14px; line-height: 1.45; color: var(--fd-text, #050505);
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.fd-ntf-item.unread .fd-ntf-text { font-weight: 600; }
.fd-ntf-time { font-size: 12.5px; font-weight: 700; color: var(--fd-primary, #1877f2); }

.fd-ntf-dot {
    width: 12px; height: 12px; border-radius: 50%;
    background: var(--fd-primary, #1877f2); flex-shrink: 0;
}

.fd-ntf-foot {
    flex-shrink: 0; border-top: 1px solid var(--fd-border, #e4e6eb); padding: 8px;
}
.fd-ntf-readall {
    width: 100%; border: 0; cursor: pointer; font-family: inherit;
    background: none; color: var(--fd-primary, #1877f2);
    font-size: 13.5px; font-weight: 700; padding: 9px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center; gap: 7px;
    transition: background .15s;
}
.fd-ntf-readall:hover { background: var(--fd-hover, #f2f2f2); }

.fd-notif-empty i { font-size: 40px; display: block; margin-bottom: 12px; opacity: .5; }
.fd-notif-empty p { margin: 0; }

@media (max-width: 480px) {
    .fd-notif-dropdown { width: calc(100vw - 16px); }
}

/* ══════════════════════════════════════════════════════════
   Main 3-column layout
══════════════════════════════════════════════════════════ */
.fd-layout {
    display: grid;
    grid-template-columns: 280px 1fr 320px;
    gap: 16px;
    max-width: 1400px;
    margin: 0 auto;
    padding: 16px;
    align-items: start;
}

.fd-rail {
    position: sticky;
    top: calc(var(--fd-topbar-h) + 16px);
    max-height: calc(100vh - var(--fd-topbar-h) - 24px);
    overflow-y: auto;
    padding-inline-end: 4px;
}
.fd-rail::-webkit-scrollbar { width: 6px; }
.fd-rail::-webkit-scrollbar-thumb { background: transparent; border-radius: 3px; }
.fd-rail:hover::-webkit-scrollbar-thumb { background: #bbb; }

.fd-main { min-width: 0; }

/* ══════════════════════════════════════════════════════════
   Cards (shared)
══════════════════════════════════════════════════════════ */
.fd-card {
    background: var(--fd-surface);
    border-radius: var(--fd-radius);
    box-shadow: var(--fd-shadow);
    margin-bottom: 16px;
    overflow: hidden;
}
.fd-card-header {
    padding: 12px 16px;
    display: flex; align-items: center; gap: 10px;
    border-bottom: 1px solid var(--fd-border);
}
.fd-card-header h3 {
    font-size: 15px; font-weight: 700; margin: 0; flex: 1;
}
.fd-card-header .fd-card-link {
    font-size: 13px; color: var(--fd-primary); text-decoration: none; font-weight: 600;
}
.fd-card-body { padding: 16px; }

/* ── User card (left rail) ── */
.fd-user-card { padding: 14px; }
.fd-user-card .row1 {
    display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
    text-decoration: none; color: inherit;
}
.fd-user-card .av {
    width: 44px; height: 44px; border-radius: 50%;
    background: var(--fd-primary-l); color: var(--fd-primary);
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; font-weight: 800;
    overflow: hidden;
}
.fd-user-card .av img { width: 100%; height: 100%; object-fit: cover; }
.fd-user-card .name { font-size: 15px; font-weight: 700; }
.fd-user-card .meta { font-size: 12px; color: var(--fd-text-2); }

/* ── Left rail nav items ── */
.fd-rail-nav { padding: 4px; }
.fd-rail-nav .item {
    display: flex; align-items: center; gap: 12px;
    padding: 10px; border-radius: 8px;
    color: var(--fd-text); text-decoration: none;
    font-size: 14px; font-weight: 600;
    transition: background .15s;
}
.fd-rail-nav .item:hover { background: var(--fd-hover); }
.fd-rail-nav .item i {
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--fd-primary-l); color: var(--fd-primary);
    display: flex; align-items: center; justify-content: center;
    font-size: 15px;
}
.fd-rail-nav .item .badge-count {
    margin-inline-start: auto;
    background: var(--fd-primary); color: #fff;
    font-size: 11px; font-weight: 700;
    border-radius: 100px; padding: 2px 8px;
}

/* ── Quick actions strip (legacy, kept for any references) ── */
.fd-quick {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 12px;
}
.fd-quick a {
    display: flex; flex-direction: column; align-items: center;
    gap: 6px; padding: 12px;
    background: var(--fd-bg); border-radius: var(--ds-r-md);
    color: var(--fd-text); text-decoration: none;
    font-size: var(--ds-fs-sm); font-weight: var(--ds-fw-bold);
    text-align: center;
    transition: transform var(--ds-t-fast), background var(--ds-t-fast);
}
.fd-quick a:hover { background: var(--fd-primary-l); transform: translateY(-2px); color: var(--fd-primary); }
.fd-quick a i {
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--fd-primary); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px;
}
.fd-quick a.urgent i { background: var(--fd-danger); }

/* ══════════════════════════════════════════════════════════
   HERO ACTIONS — the dominant element on the feed.
   One primary CTA (book) + two secondary CTAs in a sub-row.
══════════════════════════════════════════════════════════ */
.fd-hero-actions {
    background: linear-gradient(135deg, #FAFBFF 0%, #EFF6FF 100%);
    border-radius: var(--ds-r-lg);
    padding: var(--ds-space-5);
    margin-bottom: var(--ds-space-4);
    border: 1px solid var(--fd-primary-l);
}
.fd-hero-title {
    font-size: var(--ds-fs-lg);
    font-weight: var(--ds-fw-heavy);
    color: var(--fd-primary);
    margin: 0 0 var(--ds-space-4);
    display: flex; align-items: center; gap: var(--ds-space-2);
}
.fd-hero-title::before {
    content: '';
    width: 4px; height: 18px;
    background: var(--fd-primary);
    border-radius: 2px;
}

.fd-hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
        "primary primary"
        "second1 second2";
    gap: var(--ds-space-3);
}

.fd-hero-card {
    display: flex; align-items: center; gap: var(--ds-space-3);
    padding: var(--ds-space-4);
    border-radius: var(--ds-r-md);
    text-decoration: none;
    transition: transform var(--ds-t-fast), box-shadow var(--ds-t-fast);
    position: relative;
    min-height: 80px;
}
.fd-hero-card:hover { transform: translateY(-2px); box-shadow: var(--ds-sh-md); }

.fd-hero-primary {
    grid-area: primary;
    background: linear-gradient(135deg, var(--fd-primary) 0%, var(--fd-primary-d) 100%);
    color: #fff;
    box-shadow: 0 6px 18px rgba(30, 64, 175, .25);
    min-height: 92px;
}
.fd-hero-primary:hover { color: #fff; box-shadow: 0 10px 28px rgba(30, 64, 175, .35); }
.fd-hero-primary .fd-hero-ic {
    background: rgba(255,255,255,.18);
    backdrop-filter: blur(4px);
    color: #fff;
}
.fd-hero-primary h3 { color: #fff; font-size: var(--ds-fs-xl); }
.fd-hero-primary p  { color: rgba(255,255,255,.85); font-size: var(--ds-fs-sm); }

.fd-hero-secondary {
    grid-area: auto;
    background: var(--fd-surface);
    color: var(--fd-text);
    border: 1px solid var(--fd-border);
}
.fd-hero-secondary .fd-hero-ic {
    background: var(--fd-primary-l);
    color: var(--fd-primary);
}
.fd-hero-secondary h3 { color: var(--fd-text); }
.fd-hero-secondary p  { color: var(--fd-text-2); }

.fd-hero-urgent .fd-hero-ic {
    background: #FEE2E2;
    color: var(--fd-danger);
}
.fd-hero-urgent:hover h3 { color: var(--fd-danger); }

.fd-hero-ic {
    width: 52px; height: 52px;
    border-radius: var(--ds-r-md);
    display: flex; align-items: center; justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}

.fd-hero-body { flex: 1; min-width: 0; }
.fd-hero-body h3 {
    margin: 0 0 var(--ds-space-1);
    font-size: var(--ds-fs-md);
    font-weight: var(--ds-fw-heavy);
    line-height: var(--ds-lh-tight);
}
.fd-hero-body p {
    margin: 0;
    font-size: var(--ds-fs-xs);
    line-height: var(--ds-lh-base);
}

.fd-hero-arrow {
    font-size: 18px;
    opacity: .7;
    transition: transform var(--ds-t-fast), opacity var(--ds-t-fast);
}
.fd-hero-primary:hover .fd-hero-arrow {
    opacity: 1;
    transform: translateX(-4px);
}

@media (max-width: 480px) {
    .fd-hero-grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            "primary"
            "second1"
            "second2";
    }
    .fd-hero-card { min-height: 72px; }
    .fd-hero-primary { min-height: 84px; }
}

/* ── Stories bar (health campaigns) — calm, single-family ── */
.fd-stories {
    display: flex; gap: var(--ds-space-2);
    padding: var(--ds-space-3);
    overflow-x: auto;
    scrollbar-width: none;
}
.fd-stories::-webkit-scrollbar { display: none; }
.fd-story {
    flex-shrink: 0;
    width: 132px; height: 180px;
    border-radius: var(--ds-r-md);
    background-size: cover; background-position: center;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    color: #fff; text-decoration: none;
    box-shadow: var(--ds-sh-sm);
    transition: transform var(--ds-t-fast), box-shadow var(--ds-t-fast);
}
.fd-story:hover {
    transform: translateY(-2px);
    color: #fff;
    box-shadow: var(--ds-sh-md);
}
.fd-story::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(15,23,42,.85) 0%, rgba(15,23,42,.1) 55%, transparent 100%);
}
.fd-story-title {
    position: absolute;
    inset-inline-start: 10px; inset-inline-end: 10px; bottom: 10px;
    font-size: var(--ds-fs-sm); font-weight: var(--ds-fw-bold);
    line-height: var(--ds-lh-tight);
    z-index: 2;
}
.fd-story-tag {
    position: absolute; top: 10px; inset-inline-start: 10px;
    background: rgba(255,255,255,.95); color: var(--fd-primary);
    font-size: 10px; font-weight: var(--ds-fw-heavy);
    padding: 3px 10px; border-radius: var(--ds-r-pill);
    z-index: 2;
    backdrop-filter: blur(8px);
}

/* ── Featured-doctor story variant (طبيب مميّز → booking) ── */
.fd-story-doctor .fd-story-title {
    display: flex; flex-direction: column; gap: 3px;
}
.fd-story-doctor .fd-story-sub {
    font-size: var(--ds-fs-xs); font-weight: var(--ds-fw-medium);
    opacity: .88;
}
.fd-story-doctor .fd-story-cta {
    display: inline-flex; align-items: center; gap: 4px;
    align-self: flex-start; margin-top: 5px;
    background: var(--fd-primary, #0EA968); color: #fff;
    font-size: 10px; font-weight: var(--ds-fw-heavy);
    padding: 3px 10px; border-radius: var(--ds-r-pill);
}

/* ══════════════════════════════════════════════════════════
   Feed cards
══════════════════════════════════════════════════════════ */
.fd-feed-card {
    background: var(--fd-surface);
    border-radius: var(--fd-radius);
    box-shadow: var(--fd-shadow);
    margin-bottom: 16px;
    overflow: hidden;
}

/* Doctor recommendation card */
.fd-doc-card-head {
    padding: 12px 16px;
    display: flex; align-items: center; gap: 10px;
}
.fd-doc-card-tag {
    font-size: 11px; font-weight: 800; letter-spacing: .5px;
    color: var(--fd-primary);
    background: var(--fd-primary-l);
    padding: 4px 10px; border-radius: 100px;
}
.fd-doc-card-tag.nearby   { color: var(--fd-teal);   background: var(--fd-teal-l); }
.fd-doc-card-tag.upcoming { color: var(--fd-accent); background: var(--fd-accent-l); }
.fd-doc-card-tag.featured { color: #B45309;          background: #FEF3C7; }
.fd-doc-card-tag.post     { color: var(--fd-primary); background: var(--fd-primary-l); }

.fd-doc-card-body {
    padding: 16px;
    display: flex; gap: 14px;
}
.fd-doc-av {
    width: 80px; height: 80px;
    border-radius: 50%; overflow: hidden;
    background: var(--fd-primary-l); color: var(--fd-primary);
    display: flex; align-items: center; justify-content: center;
    font-size: 30px; flex-shrink: 0;
}
.fd-doc-av img { width: 100%; height: 100%; object-fit: cover; }
.fd-doc-info { flex: 1; min-width: 0; }
.fd-doc-info h3 {
    font-size: 17px; font-weight: 800; margin: 0 0 4px;
}
.fd-doc-info h3 a { color: inherit; text-decoration: none; }
.fd-doc-info h3 a:hover { color: var(--fd-primary); }
.fd-doc-cat {
    display: inline-block;
    font-size: 12px; color: var(--fd-text-2);
    margin-bottom: 6px;
}
.fd-doc-meta {
    display: flex; flex-wrap: wrap; gap: 10px;
    font-size: 12px; color: var(--fd-text-2);
}
.fd-doc-meta span { display: inline-flex; align-items: center; gap: 4px; }
.fd-doc-meta i { font-size: 11px; }
.fd-doc-rating { color: #D97706 !important; font-weight: 700; }

.fd-doc-actions {
    padding: 12px 16px;
    border-top: 1px solid var(--fd-border);
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 4px;
}
.fd-msg-doctor-btn {
    border: 0; background: transparent;
    color: var(--fd-text-2); font-size: 13px; font-weight: 700;
    padding: 8px; border-radius: 6px; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    font-family: inherit; transition: background .15s;
}
.fd-msg-doctor-btn:hover { background: var(--fd-hover); color: var(--fd-primary); }
.fd-doc-actions button,
.fd-doc-actions a {
    border: 0; background: transparent;
    color: var(--fd-text-2); font-size: 13px; font-weight: 700;
    padding: 8px;
    border-radius: 6px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    text-decoration: none;
    transition: background .15s;
    font-family: inherit;
}
.fd-doc-actions button:hover,
.fd-doc-actions a:hover { background: var(--fd-hover); }
.fd-doc-actions .primary {
    background: var(--fd-primary); color: #fff;
}
.fd-doc-actions .primary:hover { background: var(--fd-primary-d); }
.fd-doc-actions .fav.is-fav { color: #e41e3f; }
.fd-doc-actions .fav.is-fav i { font-weight: 900; }

/* Reservation reminder card */
.fd-res-card {
    background: linear-gradient(135deg, var(--fd-accent-l) 0%, #FED7AA 100%);
    border-radius: var(--fd-radius);
    padding: 14px 16px;
    margin-bottom: 16px;
    display: flex; align-items: center; gap: 14px;
    border-inline-start: 4px solid var(--fd-accent);
}
.fd-res-card .ic {
    width: 52px; height: 52px; border-radius: 50%;
    background: #fff; color: var(--fd-accent);
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; flex-shrink: 0;
    box-shadow: 0 2px 4px rgba(234,88,12,.15);
}
.fd-res-card .body { flex: 1; min-width: 0; }
.fd-res-card .body h4 { font-size: 14px; font-weight: 700; margin: 0 0 4px; color: #7C2D12; }
.fd-res-card .body p { font-size: 12px; margin: 0; color: #9A3412; }
.fd-res-card a.go {
    background: var(--fd-accent); color: #fff;
    padding: 8px 14px; border-radius: 8px;
    font-size: 12px; font-weight: 700;
    text-decoration: none;
    flex-shrink: 0;
}
.fd-res-card a.go:hover { background: var(--fd-accent-d); color: #fff; }

/* Clinic card */
.fd-clinic-card .fd-doc-card-body {
    flex-direction: column;
}
.fd-clinic-card .fd-doc-av {
    width: 100%; height: 140px; border-radius: 8px;
}

/* ══════════════════════════════════════════════════════════
   Skeleton loading
══════════════════════════════════════════════════════════ */
.fd-skel {
    background: var(--fd-surface);
    border-radius: var(--fd-radius);
    padding: 16px;
    margin-bottom: 16px;
    box-shadow: var(--fd-shadow);
}
.fd-skel-row { display: flex; gap: 14px; align-items: center; margin-bottom: 12px; }
.fd-skel-circle {
    width: 80px; height: 80px; border-radius: 50%;
    background: linear-gradient(90deg, #f0f0f0 0%, #e0e0e0 50%, #f0f0f0 100%);
    background-size: 200% 100%;
    animation: fdShimmer 1.4s infinite;
}
.fd-skel-line {
    height: 12px; border-radius: 6px;
    background: linear-gradient(90deg, #f0f0f0 0%, #e0e0e0 50%, #f0f0f0 100%);
    background-size: 200% 100%;
    animation: fdShimmer 1.4s infinite;
    margin-bottom: 8px;
}
.fd-skel-line.w-60 { width: 60%; }
.fd-skel-line.w-40 { width: 40%; }
.fd-skel-line.w-80 { width: 80%; }
.fd-skel-block {
    height: 36px; border-radius: 6px;
    background: linear-gradient(90deg, #f0f0f0 0%, #e0e0e0 50%, #f0f0f0 100%);
    background-size: 200% 100%;
    animation: fdShimmer 1.4s infinite;
    margin-top: 10px;
}
@keyframes fdShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ══════════════════════════════════════════════════════════
   Right rail
══════════════════════════════════════════════════════════ */
.fd-online-list { padding: 4px; }
.fd-online-item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px; border-radius: 8px;
    text-decoration: none; color: var(--fd-text);
    transition: background .15s;
}
.fd-online-item:hover { background: var(--fd-hover); }
.fd-online-av {
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--fd-primary-l); color: var(--fd-primary);
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 700;
    position: relative; overflow: visible;
}
.fd-online-av img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.fd-online-av .dot {
    position: absolute; bottom: 0; inset-inline-end: 0;
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--fd-teal); border: 2px solid var(--fd-surface);
    box-shadow: 0 0 0 2px rgba(8,145,178,.2);
}
.fd-online-body { flex: 1; min-width: 0; }
.fd-online-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fd-online-cat  { font-size: 11px; color: var(--fd-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Specialty chips in right rail */
.fd-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px; }
.fd-chip {
    background: var(--fd-bg); color: var(--fd-text);
    padding: 6px 12px; border-radius: 100px;
    font-size: 12px; font-weight: 600;
    text-decoration: none;
    transition: background .15s;
}
.fd-chip:hover { background: var(--fd-primary-l); color: var(--fd-primary); }

/* ══════════════════════════════════════════════════════════
   Sentinel + end-of-feed
══════════════════════════════════════════════════════════ */
.fd-end {
    text-align: center; padding: 30px 12px;
    color: var(--fd-text-2); font-size: 13px;
}
.fd-load-error {
    background: #fee2e2; color: #991b1b;
    padding: 10px 14px; border-radius: 8px;
    margin: 0 0 12px; font-size: 13px; font-weight: 600;
    display: flex; align-items: center; justify-content: space-between;
}
.fd-load-error button {
    background: #991b1b; color: #fff; border: 0;
    padding: 4px 12px; border-radius: 6px; font-size: 12px; font-weight: 700;
    cursor: pointer; font-family: inherit;
}

/* ══════════════════════════════════════════════════════════
   Bottom nav (mobile)
══════════════════════════════════════════════════════════ */
.fd-bottom-nav {
    display: none;
    position: fixed;
    inset-inline: 0; bottom: 0;
    background: var(--fd-surface);
    border-top: 1px solid var(--fd-border);
    z-index: 999;
    box-shadow: 0 -2px 8px rgba(0,0,0,.06);
    /* iPhone notch/home-indicator: fill the unsafe bottom area with surface */
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
.fd-bottom-nav-inner {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    height: 56px;
}
.fd-bottom-nav a {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-decoration: none; color: var(--fd-text-2);
    font-size: 10px; font-weight: 600;
    gap: 2px;
    position: relative;
}
.fd-bottom-nav a i { font-size: 18px; }
.fd-bottom-nav a.active { color: var(--fd-primary); }
.fd-bottom-nav a .fd-badge {
    position: absolute; top: 6px; inset-inline-end: calc(50% - 20px);
    background: #e41e3f; color: #fff;
    font-size: 9px; font-weight: 700;
    border-radius: 100px; padding: 1px 5px;
    min-width: 14px; line-height: 1.3;
    text-align: center;
}

/* ══════════════════════════════════════════════════════════
   Geolocation prompt
══════════════════════════════════════════════════════════ */
.fd-geo-prompt {
    background: linear-gradient(135deg, var(--fd-teal-l) 0%, #A5F3FC 100%);
    border-radius: var(--fd-radius);
    padding: 14px 16px;
    margin-bottom: 16px;
    display: flex; align-items: center; gap: 12px;
    border-inline-start: 4px solid var(--fd-teal);
}
.fd-geo-prompt i { font-size: 24px; color: var(--fd-teal); }
.fd-geo-prompt .text { flex: 1; font-size: 13px; color: #155E75; }
.fd-geo-prompt .text strong { display: block; margin-bottom: 2px; }
.fd-geo-prompt button {
    background: var(--fd-teal); color: #fff; border: 0;
    padding: 8px 14px; border-radius: 8px;
    font-size: 12px; font-weight: 700; cursor: pointer;
    font-family: inherit;
}
.fd-geo-prompt .dismiss {
    background: transparent; color: #155E75;
    font-size: 18px; padding: 0 6px;
}

/* ══════════════════════════════════════════════════════════
   Responsive
══════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
    .fd-layout {
        grid-template-columns: 1fr 320px;
        padding: 12px;
    }
    .fd-rail.fd-left { display: none; }
}
@media (max-width: 900px) {
    .fd-nav { display: none; }
    .fd-topbar-center { display: none; }
}
@media (max-width: 768px) {
    .fd-layout {
        grid-template-columns: 1fr;
        padding: 8px;
        /* room for bottom nav + iPhone home-indicator */
        padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    }
    .fd-rail { display: none; }
    .fd-bottom-nav { display: block; }
    .fd-search { max-width: none; }
    .fd-search-input-wrap { height: 36px; }
    .fd-topbar { grid-template-columns: auto 1fr auto; padding: 0 10px; }
    .fd-logo-text { display: none; }
    .fd-topbar-right { gap: 4px; }
    .fd-icon-btn { width: 36px; height: 36px; font-size: 14px; }
    .fd-quick { grid-template-columns: repeat(3, 1fr); }
}

/* ══════════════════════════════════════════════════════════
   HOME PAGE — standardised on mobile: the topbar (search + actions)
   stays at the TOP like every other page, and the dedicated
   bottom-nav handles bottom navigation. (The old design relocated
   the topbar to the bottom on the home feed; reverted for a
   consistent, conventional header position.)
══════════════════════════════════════════════════════════ */

/* Kebab "more" button stays hidden — its links live in the account dropdown */
.fd-more { display: none; }

@media (max-width: 576px) {
    .fd-doc-card-body { flex-direction: column; align-items: center; text-align: center; }
    .fd-doc-meta { justify-content: center; }
    .fd-doc-actions { grid-template-columns: 1fr 1fr; }
    .fd-doc-actions .primary { grid-column: 1 / -1; }
    .fd-res-card { flex-wrap: wrap; }
    .fd-res-card a.go { width: 100%; text-align: center; }
}

/* ══════════════════════════════════════════════════════════
   Mobile touch & tap optimizations (≤768px) — app-like feel
══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* Remove the grey iOS/Android tap flash; faster taps (no 300ms delay) */
    body.feed-page a,
    body.feed-page button,
    body.feed-page .fd-feed-card,
    body.feed-page .fd-icon-btn {
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }
    /* Doctor-card action buttons meet the 44px minimum touch target */
    .fd-doc-actions a,
    .fd-doc-actions button { min-height: 44px; }
    /* Press feedback — card scales slightly when tapped */
    .fd-feed-card { transition: transform .15s ease, box-shadow .15s ease; }
    .fd-feed-card:active { transform: scale(.985); }
    .fd-doc-actions .primary:active,
    .fd-bottom-nav a:active { transform: scale(.96); }
}

/* Accessibility focus states */
.fd-icon-btn:focus-visible,
.fd-nav-item:focus-visible,
.fd-suggest-item:focus-visible,
.fd-dropdown-item:focus-visible,
.fd-doc-actions button:focus-visible,
.fd-doc-actions a:focus-visible {
    outline: 2px solid var(--fd-primary);
    outline-offset: 2px;
}

/* Hide built-in scrollbar in suggest list */
.fd-search-suggest::-webkit-scrollbar { width: 6px; }
.fd-search-suggest::-webkit-scrollbar-thumb { background: #ccc; border-radius: 3px; }

/* ══════════════════════════════════════════════════════════
   PHASE 2 — Posts, Follow, Conversations
══════════════════════════════════════════════════════════ */

/* ── Composer ── */
.fd-composer { padding: var(--ds-space-3); }
.fd-composer-trigger {
    display: flex; align-items: center; gap: var(--ds-space-3);
    padding: var(--ds-space-2) var(--ds-space-4); border-radius: var(--ds-r-pill);
    background: var(--fd-bg); cursor: pointer;
    color: var(--fd-text-2); font-size: var(--ds-fs-base);
    transition: background var(--ds-t-fast);
    min-height: 44px;  /* accessibility: touch target */
}
.fd-composer-trigger:hover { background: var(--fd-hover); }

/* ── Facebook-style composer: top row + pill + quick actions ── */
.fd-composer-top { display: flex; align-items: center; gap: var(--ds-space-3); }
.fd-composer-pill {
    flex: 1; text-align: start;
    padding: 0 18px; height: 42px; border-radius: var(--ds-r-pill);
    background: var(--fd-bg); border: 0; cursor: pointer;
    color: var(--fd-text-2); font-size: 15px; font-family: inherit;
    transition: background var(--ds-t-fast);
}
.fd-composer-pill:hover { background: var(--fd-hover); }
.fd-composer-quick {
    display: flex; align-items: center; gap: 4px;
    margin-top: 10px; padding-top: 10px;
    border-top: 1px solid var(--fd-border);
}
.fd-cq {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 9px 6px; border: 0; border-radius: 10px;
    background: transparent; cursor: pointer;
    color: var(--fd-text-2); font-size: 13.5px; font-weight: 700; font-family: inherit;
    transition: background var(--ds-t-fast);
    min-height: 44px;
}
.fd-cq:hover { background: var(--fd-hover); }
.fd-cq i { font-size: 18px; }
/* When the composer is expanded, hide the FB-style entry rows */
.fd-composer.composing .fd-composer-top,
.fd-composer.composing .fd-composer-quick { display: none; }
@media (max-width: 480px) { .fd-cq span { display: none; } }
.fd-composer-av {
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--fd-primary-l); color: var(--fd-primary);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden; font-size: 16px; flex-shrink: 0;
}
.fd-composer-av img { width: 100%; height: 100%; object-fit: cover; }

.fd-composer-body { padding-top: 12px; }
.fd-composer-type {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px;
}
.fd-composer-type label { cursor: pointer; }
.fd-composer-type input { display: none; }
.fd-composer-type span {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    padding: 10px; border: 2px solid var(--fd-border);
    border-radius: 8px; font-size: 13px; font-weight: 600;
    color: var(--fd-text-2); transition: all .15s;
}
.fd-composer-type input:checked + span {
    border-color: var(--fd-primary); color: var(--fd-primary);
    background: var(--fd-primary-l);
}
.fd-composer-input,
.fd-composer-text {
    width: 100%; padding: 10px 12px;
    border: 1px solid var(--fd-border); border-radius: 8px;
    font-family: inherit; font-size: 14px; margin-bottom: 8px;
    color: var(--fd-text); background: var(--fd-surface);
    resize: vertical;
}
.fd-composer-input:focus,
.fd-composer-text:focus { outline: 2px solid var(--fd-primary); outline-offset: -1px; }
.fd-composer-foot {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.fd-composer-image {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px; background: var(--fd-bg); border-radius: 8px;
    cursor: pointer; font-size: 13px; font-weight: 600; color: var(--fd-text-2);
}
.fd-composer-image:hover { background: var(--fd-hover); color: var(--fd-primary); }
.fd-composer-imgname { font-size: 12px; color: var(--fd-text-2); flex: 1; min-width: 0;
                       overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fd-composer-actions { margin-inline-start: auto; display: flex; gap: 8px; }
.fd-composer-actions button {
    padding: 8px 18px; border: 0; border-radius: 8px;
    font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
}
.fd-composer-actions .cancel { background: var(--fd-bg); color: var(--fd-text); }
.fd-composer-actions .cancel:hover { background: var(--fd-hover); }
.fd-composer-actions .submit { background: var(--fd-primary); color: #fff; }
.fd-composer-actions .submit:hover { background: var(--fd-primary-d); }
.fd-composer-actions .submit:disabled { opacity: .5; cursor: not-allowed; }
.fd-composer-msg { margin-top: 10px; font-size: 13px; }
.fd-composer-msg.error   { color: var(--fd-danger); }
.fd-composer-msg.success { color: var(--fd-success); }

/* ── Post card ── */
.fd-post-card { /* inherits fd-feed-card */ }
.fd-post-head {
    padding: 12px 16px;
    display: flex; align-items: center; gap: 10px;
}
.fd-post-author { display: flex; gap: 10px; flex: 1; text-decoration: none; color: inherit; min-width: 0; }
.fd-post-av {
    width: 44px; height: 44px; border-radius: 50%;
    background: var(--fd-primary-l); color: var(--fd-primary);
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; overflow: hidden; flex-shrink: 0;
}
.fd-post-av img { width: 100%; height: 100%; object-fit: cover; }
.fd-post-name {
    font-size: 14px; font-weight: 700;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fd-post-meta {
    display: flex; align-items: center; gap: 4px;
    font-size: 12px; color: var(--fd-text-2);
    margin-top: 2px; flex-wrap: wrap;
}
.fd-post-type {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px var(--ds-space-2); border-radius: var(--ds-r-pill);
    font-size: var(--ds-fs-xs); font-weight: var(--ds-fw-bold);
    letter-spacing: .2px;
}
/* Calm chips — single hue per type, low saturation */
.fd-post-type-tip        { color: var(--fd-primary);   background: var(--fd-primary-l); }
.fd-post-type-article    { color: var(--fd-teal);      background: var(--fd-teal-l); }
.fd-post-type-announce   { color: var(--fd-accent);    background: var(--fd-accent-l); }
.fd-post-type-question   { color: #7c3aed;             background: #ede9fe; }
.fd-post-type-experience { color: #0d9488;             background: #ccfbf1; }
.fd-post-delete {
    width: 36px; height: 36px; border-radius: 50%;
    border: 0; background: transparent; color: var(--fd-text-2);
    cursor: pointer; transition: background .15s;
}
.fd-post-delete:hover { background: #FEE2E2; color: var(--fd-danger); }

.fd-post-body { padding: 0 16px 12px; }
.fd-post-title {
    font-size: 17px; font-weight: 800; line-height: 1.4;
    margin: 0 0 8px; color: var(--fd-text);
}
.fd-post-text {
    font-size: 14px; line-height: 1.8; color: var(--fd-text);
    word-break: break-word;
}
.fd-post-image {
    width: 100%; max-height: 480px; object-fit: cover;
    border-radius: 8px; margin-top: 12px;
}
.fd-post-link {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: 10px; padding: 8px 12px;
    background: var(--fd-primary-l); color: var(--fd-primary);
    border-radius: 8px; font-size: 13px; font-weight: 600;
    text-decoration: none;
}
.fd-post-link:hover { background: #BFDBFE; color: var(--fd-primary-d); }

.fd-post-stats {
    padding: 8px 16px;
    display: flex; gap: 14px;
    font-size: 12px; color: var(--fd-text-2);
    border-top: 1px solid var(--fd-border);
}

.fd-post-actions {
    padding: 6px;
    /* auto-fit so 3, 4 or 5 actions (now incl. comment) wrap gracefully */
    display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 4px;
    border-top: 1px solid var(--fd-border);
}
.fd-post-actions button,
.fd-post-actions a {
    border: 0; background: transparent; cursor: pointer;
    padding: 10px; border-radius: 8px;
    font-family: inherit; font-size: 13px; font-weight: 700;
    color: var(--fd-text-2); text-decoration: none;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    transition: background .15s;
}
.fd-post-actions button:hover,
.fd-post-actions a:hover { background: var(--fd-hover); }
.fd-post-like-btn.active   { color: var(--fd-primary); }
.fd-post-save-btn.active   { color: var(--fd-accent); }
.fd-post-book-btn          { color: var(--fd-primary) !important; }

/* count badge on the comment action button */
.fd-post-comment-btn .fd-cm-count {
    font-size: 11px; font-weight: 800; color: var(--fd-primary);
    background: var(--fd-hover); border-radius: 10px; padding: 1px 7px; line-height: 1.6;
}

/* ══════════════════════════════════════════════════════════
   Post comments — any logged-in user can comment
══════════════════════════════════════════════════════════ */
.fd-post-comments {
    border-top: 1px solid var(--fd-border);
    padding: 12px 14px 14px;
    background: var(--fd-bg, #fff);
}
.fd-cm-form { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.fd-cm-av {
    width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; overflow: hidden;
    background: var(--fd-hover); display: flex; align-items: center; justify-content: center;
    color: var(--fd-text-2); font-size: 15px;
}
.fd-cm-av img { width: 100%; height: 100%; object-fit: cover; }
.fd-cm-input {
    flex: 1; min-width: 0; border: 1.5px solid var(--fd-border); border-radius: 22px;
    padding: 9px 16px; font-family: inherit; font-size: 13.5px; color: var(--fd-text);
    background: var(--fd-hover); outline: none; transition: border-color .15s, background .15s;
}
.fd-cm-input:focus { border-color: var(--fd-primary); background: #fff; }
.fd-cm-send {
    flex-shrink: 0; width: 38px; height: 38px; border: 0; border-radius: 50%; cursor: pointer;
    background: var(--fd-primary); color: #fff; font-size: 14px;
    display: flex; align-items: center; justify-content: center; transition: opacity .15s;
}
.fd-cm-send:hover { opacity: .9; }
.fd-cm-send:disabled { opacity: .5; cursor: default; }
.fd-cm-send i { transform: scaleX(-1); } /* point the plane toward the (RTL) input */

.fd-cm-login {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 11px; border-radius: 12px; margin-bottom: 10px;
    background: var(--fd-hover); color: var(--fd-primary);
    font-size: 13px; font-weight: 700; text-decoration: none;
}
.fd-cm-login:hover { text-decoration: underline; }

.fd-cm-list { display: flex; flex-direction: column; gap: 10px; }
.fd-cm-loading, .fd-cm-empty {
    font-size: 12.5px; color: var(--fd-text-2); text-align: center; padding: 6px 0;
}
.fd-cm-item { display: flex; align-items: flex-start; gap: 8px; }
.fd-cm-bubble {
    flex: 1; min-width: 0; background: var(--fd-hover);
    border-radius: 14px; padding: 8px 12px; position: relative;
}
.fd-cm-head { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; flex-wrap: wrap; }
.fd-cm-head b { font-size: 12.5px; font-weight: 800; color: var(--fd-text); }
.fd-cm-dr {
    font-size: 10px; font-weight: 700; color: var(--fd-primary);
    background: rgba(29,78,216,.1); border-radius: 6px; padding: 1px 6px;
}
.fd-cm-time { font-size: 11px; color: var(--fd-text-2); }
.fd-cm-body { font-size: 13px; color: var(--fd-text); line-height: 1.6; word-break: break-word; }
.fd-cm-del {
    margin-inline-start: auto; border: 0; background: transparent; cursor: pointer;
    color: var(--fd-text-2); font-size: 12px; padding: 2px 4px; border-radius: 6px;
}
.fd-cm-del:hover { color: #dc2626; background: rgba(220,38,38,.08); }

/* ── Follow button on doctor cards ── */
.fd-follow-btn {
    border: 0; padding: 8px 16px; border-radius: 8px;
    background: var(--fd-primary); color: #fff;
    font-family: inherit; font-size: 12px; font-weight: 700;
    cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
    transition: background .15s;
}
.fd-follow-btn:hover { background: var(--fd-primary-d); }
.fd-follow-btn.following {
    background: var(--fd-bg); color: var(--fd-text);
    border: 1px solid var(--fd-border);
}
.fd-follow-btn.following:hover { background: #FEE2E2; color: var(--fd-danger); border-color: #FCA5A5; }
.fd-follow-btn.following:hover .followed-lbl { display: none; }
.fd-follow-btn.following:hover .unfollow-lbl { display: inline; }
.fd-follow-btn.following .unfollow-lbl { display: none; }

/* ── Conversation list page ── */
.fd-conv-wrap {
    max-width: var(--ds-container-base); margin: 0 auto;
    padding: var(--ds-space-4);
    display: grid; grid-template-columns: 340px 1fr;
    gap: var(--ds-space-4);
    min-height: calc(100vh - var(--fd-topbar-h) - 32px);
}
.fd-conv-list, .fd-conv-pane {
    background: var(--fd-surface);
    border-radius: var(--ds-r-md);
    box-shadow: var(--ds-sh-sm);
    border: 1px solid var(--fd-border);
    overflow: hidden;
    display: flex; flex-direction: column;
}
.fd-conv-list-head {
    padding: var(--ds-space-4);
    border-bottom: 1px solid var(--fd-border);
}
.fd-conv-list-head h2 {
    font-size: var(--ds-fs-lg);
    font-weight: var(--ds-fw-heavy);
    margin: 0;
    display: flex; align-items: center; gap: var(--ds-space-2);
}
.fd-conv-list-head h2 i { color: var(--fd-primary); }
.fd-conv-items { overflow-y: auto; flex: 1; }
.fd-conv-item {
    display: flex; gap: 12px; padding: 12px 14px;
    border-bottom: 1px solid var(--fd-border);
    text-decoration: none; color: inherit;
    transition: background .15s;
}
.fd-conv-item:hover { background: var(--fd-hover); }
.fd-conv-item.active { background: var(--fd-primary-l); }
.fd-conv-item.unread .fd-conv-name { font-weight: 800; }
.fd-conv-item.unread .fd-conv-preview { color: var(--fd-text); font-weight: 600; }
.fd-conv-av {
    width: 48px; height: 48px; border-radius: 50%;
    background: var(--fd-primary-l); color: var(--fd-primary);
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; overflow: hidden; flex-shrink: 0;
}
.fd-conv-av img { width: 100%; height: 100%; object-fit: cover; }
.fd-conv-body { flex: 1; min-width: 0; }
.fd-conv-name { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fd-conv-preview {
    font-size: 12px; color: var(--fd-text-2);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fd-conv-time {
    font-size: 11px; color: var(--fd-text-2);
    flex-shrink: 0; align-self: flex-start; padding-top: 4px;
}
.fd-conv-badge {
    background: var(--fd-accent); color: #fff;
    font-size: 10px; font-weight: 800;
    border-radius: 100px; padding: 2px 8px;
    align-self: center;
}

/* Chat pane */
.fd-conv-pane-head {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px; border-bottom: 1px solid var(--fd-border);
}
.fd-conv-pane-head .name { font-size: 15px; font-weight: 700; }
.fd-conv-pane-head .sub { font-size: 12px; color: var(--fd-text-2); }
.fd-msg-stream {
    flex: 1; overflow-y: auto; padding: 16px;
    display: flex; flex-direction: column; gap: 8px;
    background: var(--fd-bg);
}
.fd-msg {
    max-width: 72%;
    padding: var(--ds-space-2) var(--ds-space-3);
    border-radius: var(--ds-r-lg);
    font-size: var(--ds-fs-base);
    line-height: var(--ds-lh-base);
    word-break: break-word;
}
.fd-msg-out {
    background: var(--fd-primary); color: #fff;
    align-self: flex-end;
    border-end-end-radius: var(--ds-r-xs);
    box-shadow: 0 1px 3px rgba(30, 64, 175, .15);
}
.fd-msg-in {
    background: var(--fd-surface); color: var(--fd-text);
    align-self: flex-start;
    border-end-start-radius: var(--ds-r-xs);
    border: 1px solid var(--fd-border);
}
.fd-msg-time {
    font-size: 10px; opacity: .7; margin-top: 4px; display: block;
}
.fd-msg-form {
    display: flex; gap: 8px; padding: 12px 14px;
    border-top: 1px solid var(--fd-border);
    background: var(--fd-surface);
}
.fd-msg-form textarea {
    flex: 1; padding: 10px 14px;
    background: var(--fd-bg); border: 0; border-radius: 20px;
    font-family: inherit; font-size: 14px; color: var(--fd-text);
    resize: none; max-height: 100px;
    outline: 0;
}
.fd-msg-form button {
    width: 42px; height: 42px; border-radius: 50%;
    border: 0; background: var(--fd-primary); color: #fff;
    cursor: pointer; font-size: 16px;
    align-self: flex-end;
}
.fd-msg-form button:hover { background: var(--fd-primary-d); }
.fd-msg-form button:disabled { opacity: .5; cursor: not-allowed; }

.fd-conv-empty {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    color: var(--fd-text-2); font-size: 14px; gap: 10px;
    padding: 30px; text-align: center;
}
.fd-conv-empty i { font-size: 48px; color: var(--fd-border); }

@media (max-width: 768px) {
    .fd-conv-wrap {
        grid-template-columns: 1fr;
        padding: 0;
        padding-bottom: 60px;
    }
    .fd-conv-pane { display: none; }
    .fd-conv-wrap.fd-pane-open .fd-conv-list { display: none; }
    .fd-conv-wrap.fd-pane-open .fd-conv-pane { display: flex; }
}

/* ── Floating chat widget (from feed.blade) ── */
.fd-chat-pop {
    position: fixed;
    bottom: 20px; inset-inline-end: 20px;
    width: 340px; max-height: 480px;
    background: var(--fd-surface);
    border-radius: var(--fd-radius);
    box-shadow: 0 10px 30px rgba(0,0,0,.18);
    display: none; flex-direction: column;
    z-index: 1050;
    overflow: hidden;
}
.fd-chat-pop.open { display: flex; }
.fd-chat-pop .fd-msg-stream { max-height: 320px; }
.fd-chat-pop .fd-conv-pane-head .close {
    border: 0; background: transparent; color: var(--fd-text-2);
    cursor: pointer; font-size: 18px; padding: 0 8px;
    margin-inline-start: auto;
}
@media (max-width: 768px) {
    .fd-chat-pop {
        inset-inline-end: 8px; inset-inline-start: 8px;
        width: auto; bottom: 70px;
    }
}

/* ══════════════════════════════════════════════════════════
   FILTER DRAWER (slides in from the inline-end side)
══════════════════════════════════════════════════════════ */
.fd-filter-backdrop {
    position: fixed; inset: 0;
    background: rgba(15, 23, 42, .45);
    z-index: var(--ds-z-modal);
    opacity: 0; pointer-events: none;
    transition: opacity var(--ds-t-base);
}
.fd-filter-backdrop.open {
    opacity: 1; pointer-events: auto;
}

.fd-filter-drawer {
    position: fixed;
    top: 0; bottom: 0;
    inset-inline-end: 0;     /* anchor to the start of reading (right in RTL) */
    width: 380px; max-width: 92vw;
    background: var(--fd-surface);
    z-index: calc(var(--ds-z-modal) + 1);
    box-shadow: var(--ds-sh-lg);
    transform: translateX(100%);   /* hidden off-screen to the right */
    transition: transform var(--ds-t-base), visibility 0s linear var(--ds-t-base);
    display: flex; flex-direction: column;
    visibility: hidden;
    pointer-events: none;
}
/* LTR override — for non-RTL pages, slide from the LEFT instead. */
html:not([lang="ar"]):not([dir="rtl"]) body:not([dir="rtl"]) .fd-filter-drawer {
    inset-inline-end: auto;
    inset-inline-start: 0;
    transform: translateX(-100%);
}
.fd-filter-drawer.open {
    transform: translateX(0) !important;
    visibility: visible;
    pointer-events: auto;
    transition: transform var(--ds-t-base), visibility 0s linear;
}

.fd-filter-head {
    display: flex; align-items: center; gap: var(--ds-space-2);
    padding: var(--ds-space-4) var(--ds-space-5);
    border-bottom: 1px solid var(--fd-border);
}
.fd-filter-head h2 {
    flex: 1;
    margin: 0;
    font-size: var(--ds-fs-lg);
    font-weight: var(--ds-fw-heavy);
    display: flex; align-items: center; gap: var(--ds-space-2);
}
.fd-filter-head h2 i { color: var(--fd-primary); font-size: 16px; }

.fd-filter-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--ds-space-5);
    display: flex; flex-direction: column;
    gap: var(--ds-space-5);
}

.fd-filter-group label {
    display: block;
    font-size: var(--ds-fs-sm);
    font-weight: var(--ds-fw-bold);
    color: var(--fd-text);
    margin-bottom: var(--ds-space-2);
}
.fd-filter-group select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--fd-border);
    border-radius: var(--ds-r-sm);
    font-family: inherit;
    font-size: var(--ds-fs-base);
    background: var(--fd-surface);
    color: var(--fd-text);
}
.fd-filter-group select:focus {
    outline: 2px solid var(--fd-primary);
    outline-offset: -1px;
}

.fd-filter-pills {
    display: flex; flex-wrap: wrap; gap: var(--ds-space-2);
}
.fd-pill {
    cursor: pointer;
}
.fd-pill input { display: none; }
.fd-pill span {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 8px 14px;
    background: var(--fd-bg);
    border: 1.5px solid transparent;
    border-radius: var(--ds-r-pill);
    font-size: var(--ds-fs-sm);
    font-weight: var(--ds-fw-medium);
    color: var(--fd-text-2);
    transition: all var(--ds-t-fast);
}
.fd-pill:hover span { background: var(--fd-hover); }
.fd-pill input:checked + span {
    background: var(--fd-primary);
    color: #fff;
    border-color: var(--fd-primary-d);
    font-weight: var(--ds-fw-bold);
}

.fd-filter-checks {
    display: flex; flex-direction: column; gap: var(--ds-space-2);
}
.fd-check {
    display: flex; align-items: center; gap: var(--ds-space-2);
    padding: 8px;
    border-radius: var(--ds-r-sm);
    cursor: pointer;
    transition: background var(--ds-t-fast);
}
.fd-check:hover { background: var(--fd-hover); }
.fd-check input {
    width: 18px; height: 18px;
    accent-color: var(--fd-primary);
}
.fd-check span {
    font-size: var(--ds-fs-base);
    color: var(--fd-text);
}

.fd-filter-foot {
    padding: var(--ds-space-3) var(--ds-space-5);
    border-top: 1px solid var(--fd-border);
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: var(--ds-space-2);
    background: var(--fd-surface);
}

.fd-btn {
    border: 0;
    padding: 12px var(--ds-space-4);
    border-radius: var(--ds-r-md);
    font-family: inherit;
    font-size: var(--ds-fs-base);
    font-weight: var(--ds-fw-bold);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    transition: all var(--ds-t-fast);
}
.fd-btn-primary {
    background: var(--fd-primary);
    color: #fff;
}
.fd-btn-primary:hover { background: var(--fd-primary-d); }
.fd-btn-ghost {
    background: var(--fd-bg);
    color: var(--fd-text);
}
.fd-btn-ghost:hover { background: var(--fd-hover); }

/* Range slider — minimal medical look */
input[type="range"] {
    accent-color: var(--fd-primary);
}

/* ══════════════════════════════════════════════════════════
   HOW-IT-WORKS panel (visitor-only) — calm step list
══════════════════════════════════════════════════════════ */
.fd-howto-list {
    list-style: none;
    margin: 0; padding: var(--ds-space-3) var(--ds-space-4);
    display: flex; flex-direction: column;
    gap: var(--ds-space-3);
}
.fd-howto-list li {
    display: flex; align-items: flex-start; gap: var(--ds-space-3);
}
.fd-howto-num {
    flex-shrink: 0;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--fd-primary-l);
    color: var(--fd-primary);
    font-weight: var(--ds-fw-heavy);
    font-size: var(--ds-fs-base);
    display: flex; align-items: center; justify-content: center;
}
.fd-howto-list li > div { flex: 1; min-width: 0; }
.fd-howto-list strong {
    display: block;
    font-size: var(--ds-fs-base);
    font-weight: var(--ds-fw-bold);
    color: var(--fd-text);
    line-height: var(--ds-lh-tight);
}
.fd-howto-list small {
    display: block;
    font-size: var(--ds-fs-xs);
    color: var(--fd-text-2);
    margin-top: 2px;
}
.fd-howto-cta {
    padding: var(--ds-space-3) var(--ds-space-4) var(--ds-space-4);
    border-top: 1px solid var(--fd-border);
}
.fd-howto-cta a {
    display: flex; align-items: center; justify-content: center;
    gap: 6px;
    padding: 10px;
    background: var(--fd-primary);
    color: #fff;
    border-radius: var(--ds-r-sm);
    text-decoration: none;
    font-size: var(--ds-fs-sm);
    font-weight: var(--ds-fw-bold);
    transition: background var(--ds-t-fast);
}
.fd-howto-cta a:hover { background: var(--fd-primary-d); color: #fff; }

/* ══════════════════════════════════════════════════════════
   MOBILE REFINEMENTS (≤480px)
   ─────────────────────────────
   - All tap targets ≥44px (accessibility guideline)
   - Reduced paddings to maximize content
   - Slightly larger base text for legibility on small screens
══════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
    body.feed-page { font-size: var(--ds-fs-base); }

    /* Topbar tighter on tiny screens */
    .fd-topbar {
        height: 52px;
        padding: 0 8px;
        gap: 4px;
    }
    .fd-logo img { width: 36px; height: 36px; }
    .fd-search-input-wrap {
        height: 38px;
        padding: 0 4px 0 12px;
    }
    .fd-search input { font-size: var(--ds-fs-base); }
    .fd-icon-btn {
        width: 40px; height: 40px;  /* ≥44 visual incl. surroundings */
        font-size: 14px;
    }

    /* Cards — keep generous breathing room but compact paddings */
    .fd-card,
    .fd-feed-card,
    .fd-post-card { border-radius: var(--ds-r-md); }
    .fd-card-header { padding: 12px 14px; }
    .fd-card-header h3 { font-size: var(--ds-fs-base); }

    /* Layout: reclaim screen edge-to-edge */
    .fd-layout {
        padding: 6px 6px 76px;
        gap: 8px;
    }

    /* Doctor card: stacked layout, full-width primary CTA */
    .fd-doc-card-body { padding: 14px; gap: 10px; }
    .fd-doc-av { width: 64px; height: 64px; font-size: 24px; }
    .fd-doc-info h3 { font-size: var(--ds-fs-base); }
    .fd-doc-actions {
        grid-template-columns: 1fr 1fr;
        padding: 8px 10px 10px;
        gap: 6px;
    }
    .fd-doc-actions .primary { grid-column: 1 / -1; padding: 12px; font-size: var(--ds-fs-base); }
    .fd-doc-actions button,
    .fd-doc-actions a { min-height: 40px; }

    /* Post card */
    .fd-post-body { padding: 0 14px 12px; }
    .fd-post-text { font-size: var(--ds-fs-base); line-height: var(--ds-lh-loose); }
    .fd-post-actions { grid-template-columns: 1fr 1fr; }
    .fd-post-actions > * { min-height: 40px; }
    .fd-post-book-btn { grid-column: 1 / -1; }

    /* Stories — let them peek so the user knows there's more */
    .fd-story { width: 116px; height: 168px; }
    .fd-story-title { font-size: var(--ds-fs-xs); }

    /* Bottom nav — bigger taps */
    .fd-bottom-nav-inner { height: 60px; }
    .fd-bottom-nav a { font-size: 10.5px; gap: 3px; }
    .fd-bottom-nav a i { font-size: 19px; }

    /* Filter drawer: full-screen on phones */
    .fd-filter-drawer { width: 100vw; max-width: 100vw; }
}

/* ══════════════════════════════════════════════════════════
   DASHBOARD KPI STRIP — at-a-glance KPIs at the top of /dashboard
══════════════════════════════════════════════════════════ */
.dkpi-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--ds-space-3);
    margin-bottom: var(--ds-space-4);
}
.dkpi-card {
    background: var(--fd-surface);
    border-radius: var(--ds-r-md);
    padding: var(--ds-space-4);
    text-decoration: none;
    color: var(--fd-text);
    box-shadow: var(--ds-sh-sm);
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    grid-template-areas:
        "icon body"
        "meta meta";
    column-gap: var(--ds-space-3);
    row-gap: var(--ds-space-2);
    border: 1px solid var(--fd-border);
    transition: transform var(--ds-t-fast), box-shadow var(--ds-t-fast);
    position: relative;
}
.dkpi-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--ds-sh-md);
    color: var(--fd-text);
}
.dkpi-ic {
    grid-area: icon;
    width: 44px; height: 44px;
    border-radius: var(--ds-r-sm);
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}
.dkpi-body {
    grid-area: body;
    display: flex; flex-direction: column;
    justify-content: center;
    min-width: 0;
}
.dkpi-val {
    font-size: var(--ds-fs-2xl);
    font-weight: var(--ds-fw-heavy);
    line-height: 1;
    color: var(--fd-text);
}
.dkpi-lbl {
    font-size: var(--ds-fs-sm);
    color: var(--fd-text-2);
    margin-top: 4px;
    font-weight: var(--ds-fw-medium);
}
.dkpi-meta {
    grid-area: meta;
    font-size: var(--ds-fs-xs);
    color: var(--fd-text-2);
    border-top: 1px dashed var(--fd-border);
    padding-top: var(--ds-space-2);
}

/* Color variants — calm by default, signal only when meaningful */
.dkpi-primary .dkpi-ic { background: var(--fd-primary-l); color: var(--fd-primary); }
.dkpi-info    .dkpi-ic { background: var(--fd-teal-l);    color: var(--fd-teal); }
.dkpi-calm    .dkpi-ic { background: #ECFDF5;             color: var(--fd-success); }
.dkpi-warn    .dkpi-ic { background: #FEF3C7;             color: #B45309; }
.dkpi-warn    { border-color: #FCD34D; }

@media (max-width: 768px) {
    .dkpi-strip { grid-template-columns: 1fr; gap: var(--ds-space-2); }
}
@media (max-width: 480px) {
    .dkpi-card {
        padding: var(--ds-space-3);
        grid-template-areas: "icon body meta";
        grid-template-columns: auto 1fr auto;
        grid-template-rows: 1fr;
    }
    .dkpi-ic { width: 40px; height: 40px; font-size: 16px; }
    .dkpi-val { font-size: var(--ds-fs-xl); }
    .dkpi-meta { border: 0; padding: 0; align-self: center; text-align: end; }
}

/* (dash-tabs styles removed 2026-05-26.) */

/* ══════════════════════════════════════════════════════════
   DASHBOARD SECTION REFINEMENTS
   ─────────────────────────────
   Soft-touch overrides that bring the legacy .cl-card markup
   in line with the unified design tokens, without changing
   any blade content.
══════════════════════════════════════════════════════════ */
body.feed-page[data-page-context="dashboard"] .cl-card {
    border-radius: var(--ds-r-md);
    box-shadow: var(--ds-sh-sm);
    border: 1px solid var(--fd-border);
    margin-bottom: var(--ds-space-4);
}
body.feed-page[data-page-context="dashboard"] .cl-card-hd {
    padding: var(--ds-space-3) var(--ds-space-4);
    border-bottom: 1px solid var(--fd-border);
}
body.feed-page[data-page-context="dashboard"] .cl-card-hd h3 {
    font-size: var(--ds-fs-md);
    font-weight: var(--ds-fw-heavy);
    color: var(--fd-text);
}
body.feed-page[data-page-context="dashboard"] .cl-card-hd h3 .hic {
    width: 32px; height: 32px;
    border-radius: var(--ds-r-sm);
    font-size: 13px;
}
body.feed-page[data-page-context="dashboard"] .cl-card-body {
    padding: var(--ds-space-4);
}

/* Workflow bar — calmer header, larger tap target on the toggle */
body.feed-page[data-page-context="dashboard"] .wkflow-wrap {
    border-radius: var(--ds-r-md);
    border-width: 1px;
    box-shadow: var(--ds-sh-sm);
    padding: var(--ds-space-3) var(--ds-space-4);
}
body.feed-page[data-page-context="dashboard"] .wkflow-head {
    padding: var(--ds-space-2) 0 !important;
    margin: 0 !important;
}

/* db-wrap — give breathing room around the new KPI strip */
body.feed-page[data-page-context="dashboard"] .db-wrap {
    padding-top: var(--ds-space-4);
    background: var(--fd-bg) !important;   /* match feed bg, no white sheet */
}

/* ══════════════════════════════════════════════════════════
   DASHBOARD — match the /feed visual language
   ─────────────────────────────────────────────
   Targets: workflow bar rainbow, 6 different .hic colors,
   loud step backgrounds. Replace with unified medical calm.
══════════════════════════════════════════════════════════ */

/* Workflow bar — remove the rainbow stripe + soften everything */
body.feed-page[data-page-context="dashboard"] .wkflow-wrap {
    background: linear-gradient(135deg, var(--fd-primary-l) 0%, #F0F9FF 100%) !important;
    border: 1px solid var(--fd-primary-l) !important;
}
body.feed-page[data-page-context="dashboard"] .wkflow-wrap::before {
    background: linear-gradient(90deg, var(--fd-primary) 0%, var(--fd-teal) 100%) !important;
    height: 2px !important;
}
body.feed-page[data-page-context="dashboard"] .wkflow-head-ic {
    background: linear-gradient(135deg, var(--fd-primary) 0%, var(--fd-primary-d) 100%) !important;
    box-shadow: none !important;
}
/* Step pills — all share one calm navy chrome; icon inside differentiates */
body.feed-page[data-page-context="dashboard"] [class*="wkflow-st-"] {
    --wk:    var(--fd-primary) !important;
    --wk-bg: var(--fd-primary-l) !important;
}

/* Section headers — unify ALL .hic icon backgrounds to navy.
   The icon glyph itself (different per section) keeps the distinction.
   Use very high specificity to override inline style="background:#xxxx" */
body.feed-page[data-page-context="dashboard"] .cl-card-hd h3 .hic[style],
body.feed-page[data-page-context="dashboard"] .dr-strip-hd h3 .hic[style] {
    background: var(--fd-primary-l) !important;
    color: var(--fd-primary) !important;
    box-shadow: none !important;
}

/* Section card — feed-card feel: hover lift, subtle border */
body.feed-page[data-page-context="dashboard"] .cl-card {
    transition: transform var(--ds-t-fast), box-shadow var(--ds-t-fast);
}
body.feed-page[data-page-context="dashboard"] .cl-card:hover {
    box-shadow: var(--ds-sh-md);
}

/* Spacing the tabs further from KPI */
body.feed-page[data-page-context="dashboard"] .dash-tabs {
    margin-top: var(--ds-space-2);
}

/* db-wrap min-height removal — let footer breathe naturally */
body.feed-page[data-page-context="dashboard"] .db-wrap {
    min-height: auto !important;
}

/* The bootstrap col wrappers around the sidebar+main — let our wrapper take over */
body.feed-page[data-page-context="dashboard"] .col-12.col-lg-9 {
    padding: 0 var(--ds-space-3) !important;
}

/* Make patient/booking cards inside sections inherit the calm token style */
body.feed-page[data-page-context="dashboard"] .cx-card,
body.feed-page[data-page-context="dashboard"] .res-ov,
body.feed-page[data-page-context="dashboard"] .svc-btn {
    border-radius: var(--ds-r-sm) !important;
    transition: transform var(--ds-t-fast), box-shadow var(--ds-t-fast) !important;
}
body.feed-page[data-page-context="dashboard"] .cx-card:hover,
body.feed-page[data-page-context="dashboard"] .svc-btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--ds-sh-sm);
}

/* The promotion section keeps its accent identity but tamer */
body.feed-page[data-page-context="dashboard"] #dash-marketing + .cl-card .cl-card-hd h3 .hic[style] {
    background: var(--fd-accent-l) !important;
    color: var(--fd-accent) !important;
}

/* Mobile: dashboard pads breathe */
@media (max-width: 768px) {
    body.feed-page[data-page-context="dashboard"] .db-wrap {
        padding-top: var(--ds-space-3);
        padding-inline: var(--ds-space-2);
    }
}

/* ══════════════════════════════════════════════════════════
   DASHBOARD SIDEBAR → match home's left-rail visual language
   ─────────────────────────────────────────────
   Targets .sb-item / .sb-ic / .sb-section-hd inside the doctor
   sidebar. Restyles to fd-rail-nav card-like items: rounded
   circular icons, unified navy palette, subtle hover.
══════════════════════════════════════════════════════════ */
body.feed-page[data-page-context="dashboard"] .sb-sticky {
    gap: var(--ds-space-3) !important;
    padding-inline-end: 4px !important;
}

/* Wrap each section (header + items) in a card-like container */
body.feed-page[data-page-context="dashboard"] .sb-section-hd {
    padding: var(--ds-space-3) var(--ds-space-3) var(--ds-space-2) !important;
    background: var(--fd-surface) !important;
    border: 1px solid var(--fd-border) !important;
    border-bottom: 0 !important;
    border-radius: var(--ds-r-md) var(--ds-r-md) 0 0 !important;
    margin: 0 !important;
}
body.feed-page[data-page-context="dashboard"] .sb-section-hd + .sb-item,
body.feed-page[data-page-context="dashboard"] .sb-section-hd + .sb-item ~ .sb-item {
    background-color: var(--fd-surface) !important;
    border-inline: 1px solid var(--fd-border) !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 10px var(--ds-space-3) !important;
}
/* Close the card visually at the LAST item of a group — done with a
   pseudo-element of the section header instead, since we cannot
   "select the last sibling before next section header". Use a thin
   container alternative: round the bottom of every item; visual
   stacking handled by removing bottom border between adjacent items. */

/* Soften the section title */
body.feed-page[data-page-context="dashboard"] .sb-section-title {
    color: var(--fd-text-2) !important;
    font-size: var(--ds-fs-xs) !important;
    font-weight: var(--ds-fw-heavy) !important;
    letter-spacing: .5px;
    text-transform: uppercase;
}
body.feed-page[data-page-context="dashboard"] .sb-section-hd-dot {
    width: 5px !important; height: 5px !important;
    background: var(--fd-primary) !important;
    border-radius: 50% !important;
}

/* Icons → fd-rail-nav style (circle + navy-light bg + navy glyph) */
body.feed-page[data-page-context="dashboard"] .sb-ic {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: var(--fd-primary-l) !important;
    background-image: none !important;
    color: var(--fd-primary) !important;
    box-shadow: none !important;
    font-size: 12px !important;
}
body.feed-page[data-page-context="dashboard"] .sb-item:hover .sb-ic {
    transform: none !important;
    background: var(--fd-primary) !important;
    color: #fff !important;
}

/* Items: calmer hover + active state */
body.feed-page[data-page-context="dashboard"] .sb-item {
    padding: 10px var(--ds-space-3) !important;
    color: var(--fd-text) !important;
    background: transparent !important;
    transition: background var(--ds-t-fast), color var(--ds-t-fast) !important;
}
body.feed-page[data-page-context="dashboard"] .sb-item:hover {
    background: var(--fd-hover) !important;
    color: var(--fd-primary) !important;
}
body.feed-page[data-page-context="dashboard"] .sb-item.active {
    background: var(--fd-primary-l) !important;
    color: var(--fd-primary) !important;
}
body.feed-page[data-page-context="dashboard"] .sb-item.active .sb-ic {
    background: var(--fd-primary) !important;
    color: #fff !important;
}
body.feed-page[data-page-context="dashboard"] .sb-item.active::after {
    background: var(--fd-primary) !important;
    width: 3px !important;
}
body.feed-page[data-page-context="dashboard"] .sb-lbl {
    font-size: var(--ds-fs-sm) !important;
    font-weight: var(--ds-fw-medium) !important;
}
body.feed-page[data-page-context="dashboard"] .sb-arrow {
    color: var(--fd-border) !important;
}
body.feed-page[data-page-context="dashboard"] .sb-item:hover .sb-arrow,
body.feed-page[data-page-context="dashboard"] .sb-item.active .sb-arrow {
    color: var(--fd-primary) !important;
}

/* ══════════════════════════════════════════════════════════
   DASHBOARD LEFT RAIL (new) — mirrors home's right-rail
══════════════════════════════════════════════════════════ */
.dlr-col {
    padding: 20px 4px 20px 8px;
}
.dlr-sticky {
    /* Sticky removed: every item must be visible without inner scrolling.
       The whole column scrolls with the page. */
    display: flex; flex-direction: column;
    gap: var(--ds-space-3);
    padding-inline-end: 4px;
}

/* Hide left rail on smaller screens (dashboard stays usable) */
@media (max-width: 1199px) {
    .dlr-col { display: none !important; }
}

/* ══════════════════════════════════════════════════════════
   DASHBOARD GRID OVERRIDE — exactly match home /feed dimensions
   ─────────────────────────────────────────────
   Mirrors .fd-layout from the home page:
     - max-width: 1400px
     - 3 columns: 280px (start rail) + 1fr (main) + 320px (end rail)
     - gap: 16px, padding: 16px
   Bootstrap col classes stay intact so narrow viewports degrade
   gracefully (the grid only applies at ≥1200px).
══════════════════════════════════════════════════════════ */
@media (min-width: 1200px) {
    /* Center the container at the same max-width as the home feed */
    body.feed-page[data-page-context="dashboard"] section > .container-fluid {
        max-width: 1400px;
        margin: 0 auto;
        padding: 0;
    }
    body.feed-page[data-page-context="dashboard"] section > .container-fluid > .row {
        display: grid !important;
        grid-template-columns: 280px minmax(0, 1fr) 320px;
        gap: var(--ds-space-4);
        margin: 0 !important;
        padding: var(--ds-space-4);
        align-items: start;
    }
    /* Strip bootstrap's % widths so the grid takes over —
       handles ALL Bootstrap col variants: col-, col-sm-, col-md-, col-lg-, col-xl- */
    body.feed-page[data-page-context="dashboard"] section > .container-fluid > .row > [class*="col-"] {
        flex: unset !important;
        max-width: unset !important;
        width: auto !important;
        min-width: 0 !important;
        padding-inline: 0 !important;
    }
    /* Inner db-wrap should not double-pad — the grid already pads */
    body.feed-page[data-page-context="dashboard"] .db-wrap {
        padding: 0 !important;
    }
    /* Reset inline padding on any center column variant */
    body.feed-page[data-page-context="dashboard"] section > .container-fluid > .row > [class*="col-"][style*="padding"] {
        padding: 0 !important;
    }
}

/* ──────────────────────────────────────────────────────────
   Unify section widths inside the dashboard center column.
   The legacy `.dash-grid` split the column into 1fr + 260px,
   making clinic-card / doctor-strip / patients-section appear
   half-width vs the full-width workflow bar above. Now that
   .dash-side content has been relocated to dlr-col, collapse
   the grid so .dash-mid takes the full column width.
────────────────────────────────────────────────────────── */
body.feed-page[data-page-context="dashboard"] .dash-grid {
    display: block !important;
    grid-template-columns: none !important;
    gap: 0 !important;
}
body.feed-page[data-page-context="dashboard"] .dash-mid,
body.feed-page[data-page-context="dashboard"] .dash-side {
    width: 100% !important;
    max-width: none !important;
}
/* Hide the now-empty .dash-side (its content was moved to dlr-col) */
body.feed-page[data-page-context="dashboard"] .dash-side {
    display: none !important;
}

/* ──────────────────────────────────────────────────────────
   items-right (patient-facing widget column: video ads + top
   rated doctors) is irrelevant inside the clinic dashboard,
   and visually clashes with the new dlr-col. Hide on /dashboard/*.
   The widget still appears on public pages (/, /doctors...).
────────────────────────────────────────────────────────── */
body.feed-page[data-page-context="dashboard"] .ir-wrap,
body.feed-page[data-page-context="dashboard"] .col-lg-3:has(> .ir-wrap),
body.feed-page[data-page-context="dashboard"] .col-lg-3.d-none.d-lg-block:not(.sb-col):not(.hide-print) {
    display: none !important;
}

/* Same treatment for the legacy `.promo-col` on /dashboard/ads —
   replaced by the new dlr-col left rail. */
body.feed-page[data-page-context="dashboard"] .promo-col,
body.feed-page[data-page-context="dashboard"] .col-lg-3:has(> .promo-sticky),
body.feed-page[data-page-context="dashboard"] .promo-sticky {
    display: none !important;
}

/* ══════════════════════════════════════════════════════════
   /dashboard/reservations — calm color pass
   ─────────────────────────────────────────────
   Replaces the page's loud legacy palette (#1d4ed8 blue,
   #7c3aed purple, deep pinks) with the unified medical
   navy used by the sidebar nav. Semantic status colors
   (green=complete, red=cancelled, amber=waiting) are kept.
══════════════════════════════════════════════════════════ */

/* Card chrome — soften shadows, unify borders/radii */
body.feed-page[data-page-context="dashboard"] .ri-overview,
body.feed-page[data-page-context="dashboard"] .ri-res-card {
    border-radius: var(--ds-r-md) !important;
    box-shadow: var(--ds-sh-sm) !important;
    border: 1px solid var(--fd-border) !important;
}
body.feed-page[data-page-context="dashboard"] .ri-overview-hd {
    background: var(--fd-surface);
    border-bottom: 1px solid var(--fd-border) !important;
    padding: 14px 18px !important;
}
body.feed-page[data-page-context="dashboard"] .ri-overview-hd h2 {
    color: var(--fd-text) !important;
    font-size: var(--ds-fs-md) !important;
    font-weight: var(--ds-fw-heavy) !important;
}

/* Quick buttons (.ri-qbtn) — navy hover/active instead of mixed colors */
body.feed-page[data-page-context="dashboard"] .ri-qbtn {
    --qclr: var(--fd-primary);
    transition: all var(--ds-t-fast);
}
body.feed-page[data-page-context="dashboard"] .ri-qbtn:hover {
    background: var(--fd-primary-l) !important;
    border-color: var(--fd-primary) !important;
    color: var(--fd-primary) !important;
}
body.feed-page[data-page-context="dashboard"] .ri-qbtn.active {
    background: var(--fd-primary) !important;
    color: #fff !important;
    border-color: var(--fd-primary-d) !important;
}

/* Report button — calm secondary navy */
body.feed-page[data-page-context="dashboard"] .ri-report-btn {
    border-radius: var(--ds-r-sm) !important;
    border-color: var(--fd-border) !important;
    color: var(--fd-text-2) !important;
    background: var(--fd-surface) !important;
}
body.feed-page[data-page-context="dashboard"] .ri-report-btn:hover {
    background: var(--fd-primary) !important;
    color: #fff !important;
    border-color: var(--fd-primary) !important;
}

/* Status filter chips/stat boxes — soften loud colored fills.
   Bring everything to the same soft navy-tinted surface;
   the icon glyph + label keep status meaning. */
body.feed-page[data-page-context="dashboard"] .ri-overview .res-ov-stat,
body.feed-page[data-page-context="dashboard"] .ri-overview button[onclick*="toggle"] {
    background: var(--fd-surface) !important;
    border: 1px solid var(--fd-border) !important;
    border-radius: var(--ds-r-sm) !important;
    transition: background var(--ds-t-fast), border-color var(--ds-t-fast) !important;
}
body.feed-page[data-page-context="dashboard"] .ri-overview .res-ov-stat:hover,
body.feed-page[data-page-context="dashboard"] .ri-overview button[onclick*="toggle"]:hover {
    background: var(--fd-hover) !important;
    border-color: var(--fd-primary-l) !important;
}

/* Status badges/icons inside the page — soften saturated backgrounds
   without removing their semantic hue. */
body.feed-page[data-page-context="dashboard"] [style*="background:#1d4ed8"]:not(.dlr-ic) {
    background: var(--fd-primary-l) !important;
    color: var(--fd-primary) !important;
}
body.feed-page[data-page-context="dashboard"] [style*="background:#7c3aed"],
body.feed-page[data-page-context="dashboard"] [style*="background: #7c3aed"] {
    background: var(--fd-primary-l) !important;
    color: var(--fd-primary) !important;
}
body.feed-page[data-page-context="dashboard"] [style*="background:#be185d"],
body.feed-page[data-page-context="dashboard"] [style*="background:#9d174d"] {
    background: var(--fd-primary-l) !important;
    color: var(--fd-primary) !important;
}

/* Common foreground colors → navy */
body.feed-page[data-page-context="dashboard"] [style*="color:#1d4ed8"] {
    color: var(--fd-primary) !important;
}
body.feed-page[data-page-context="dashboard"] [style*="color:#7c3aed"],
body.feed-page[data-page-context="dashboard"] [style*="color: #7c3aed"] {
    color: var(--fd-primary) !important;
}

/* Keep semantic colors intact but with softer presentation.
   We do NOT override: #059669 (success), #dc2626 (danger),
   #d97706 (warning), #0891b2 (teal accent). */

/* dlr-col styling at the wider 280px — comfortable spacing */
.dlr-col .fd-card-header { padding: 12px 14px; gap: 8px; }
.dlr-col .fd-card-header h3 { font-size: var(--ds-fs-sm); }
.dlr-col .dlr-item { padding: 9px var(--ds-space-3); gap: var(--ds-space-2); font-size: var(--ds-fs-sm); }
.dlr-col .dlr-ic { width: 30px; height: 30px; font-size: 12px; }
.dlr-col .fd-online-item { padding: 8px var(--ds-space-2); gap: var(--ds-space-2); }
.dlr-col .fd-online-av { width: 32px; height: 32px; }
.dlr-col .fd-online-name { font-size: 12.5px; }
.dlr-col .fd-online-cat { font-size: 11px; }
.dlr-col .fd-chips { padding: 10px; gap: 5px; }
.dlr-col .fd-chip { font-size: 11px; padding: 5px 10px; }
.dlr-col .dlr-badge { font-size: 9px; padding: 2px 7px; }

/* ══════════════════════════════════════════════════════════
   dlr-list-card — sidebar-style item lists in the dashboard
   left rail (matches the existing nav sidebar visual language)
══════════════════════════════════════════════════════════ */
.dlr-list-card .fd-card-header {
    padding: var(--ds-space-3) var(--ds-space-3);
    gap: var(--ds-space-2);
}
.dlr-list-card .fd-card-header h3 {
    font-size: var(--ds-fs-sm);
    font-weight: var(--ds-fw-heavy);
    margin: 0;
}
.dlr-hd-ic {
    width: 26px; height: 26px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px;
    flex-shrink: 0;
}

.dlr-list {
    display: flex; flex-direction: column;
    padding: 4px;
}
.dlr-item {
    display: flex; align-items: center; gap: var(--ds-space-2);
    padding: 9px var(--ds-space-3);
    border-radius: var(--ds-r-sm);
    text-decoration: none;
    color: var(--fd-text);
    font-size: var(--ds-fs-sm);
    font-weight: var(--ds-fw-medium);
    transition: background var(--ds-t-fast), color var(--ds-t-fast);
}
.dlr-item:hover {
    background: var(--fd-hover);
    color: var(--fd-primary);
    cursor: pointer;
}
.dlr-ic {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--fd-primary-l);
    color: var(--fd-primary);
    display: flex; align-items: center; justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
    transition: background var(--ds-t-fast), color var(--ds-t-fast);
}
.dlr-item:hover .dlr-ic {
    background: var(--fd-primary);
    color: #fff;
}
.dlr-lbl {
    flex: 1; min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dlr-chev {
    font-size: 10px;
    color: var(--fd-border);
    flex-shrink: 0;
    transition: color var(--ds-t-fast), transform var(--ds-t-fast);
}
.dlr-item:hover .dlr-chev {
    color: var(--fd-primary);
    transform: translateX(-2px);
}
.dlr-badge {
    font-size: 9px;
    font-weight: var(--ds-fw-heavy);
    padding: 2px 7px;
    border-radius: var(--ds-r-pill);
    margin-inline-start: auto;
    flex-shrink: 0;
}
.dlr-badge.act { background: #DCFCE7; color: var(--fd-success); }
.dlr-badge.new { background: var(--fd-primary-l); color: var(--fd-primary); }

/* ── Hide the original center service/promotion grids ───
   They are now rendered as item lists inside dlr-col.
   Targets the two .cl-card blocks that contain .svc-grid-2.
   We use :has() (CSS4) — safe on modern browsers.
   Fallback: an explicit class added in markup would also work.    */
body.feed-page[data-page-context="dashboard"] .cl-card:has(.svc-grid-2) {
    display: none !important;
}
/* For older browsers without :has() support, also hide via class hook */
body.feed-page[data-page-context="dashboard"] .cl-card.svc-section {
    display: none !important;
}

/* ══════════════════════════════════════════════════════════
   MENTION DROPDOWN (composer @autocomplete)
══════════════════════════════════════════════════════════ */
.fd-mention-dd {
    position: absolute;
    top: 100%; inset-inline-start: 0; inset-inline-end: 0;
    margin-top: 4px;
    background: var(--fd-surface);
    border: 1px solid var(--fd-border);
    border-radius: var(--ds-r-sm);
    box-shadow: var(--ds-sh-md);
    z-index: var(--ds-z-dropdown);
    max-height: 240px;
    overflow-y: auto;
}
.fd-mention-item {
    display: flex; align-items: center; gap: var(--ds-space-2);
    padding: 8px var(--ds-space-3);
    cursor: pointer;
    transition: background var(--ds-t-fast);
}
.fd-mention-item:hover,
.fd-mention-item.active {
    background: var(--fd-primary-l);
}
.fd-mention-item-av {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--fd-primary-l);
    color: var(--fd-primary);
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700;
    overflow: hidden;
    flex-shrink: 0;
}
.fd-mention-item-av img { width: 100%; height: 100%; object-fit: cover; }
.fd-mention-item-name { font-size: var(--ds-fs-sm); font-weight: var(--ds-fw-bold); color: var(--fd-text); }

/* ══════════════════════════════════════════════════════════
   REACTION PICKER + DISPLAY
══════════════════════════════════════════════════════════ */
.fd-rxn-wrap {
    position: relative;
    display: inline-block;
}
.fd-rxn-picker {
    position: absolute;
    bottom: calc(100% + 6px); inset-inline-start: 50%;
    transform: translateX(50%);
    background: var(--fd-surface);
    border: 1px solid var(--fd-border);
    border-radius: var(--ds-r-pill);
    box-shadow: var(--ds-sh-md);
    padding: 6px;
    display: flex; gap: 2px;
    opacity: 0; pointer-events: none;
    transition: opacity var(--ds-t-fast), transform var(--ds-t-fast);
    z-index: var(--ds-z-dropdown);
    white-space: nowrap;
}
.fd-rxn-wrap:hover .fd-rxn-picker,
.fd-rxn-wrap.open .fd-rxn-picker {
    opacity: 1; pointer-events: auto;
}
.fd-rxn-pick {
    width: 36px; height: 36px;
    background: transparent; border: 0;
    font-size: 22px; cursor: pointer;
    border-radius: 50%;
    transition: transform var(--ds-t-fast), background var(--ds-t-fast);
    display: inline-flex; align-items: center; justify-content: center;
}
.fd-rxn-pick:hover {
    transform: scale(1.35) translateY(-4px);
    background: var(--fd-hover);
}

.fd-rxn-summary {
    padding: 6px 16px;
    display: flex; align-items: center; gap: 6px;
    border-top: 1px solid var(--fd-border);
    font-size: var(--ds-fs-xs);
    color: var(--fd-text-2);
}
.fd-rxn-summary-emojis {
    display: inline-flex;
    align-items: center;
    margin-inline-end: 4px;
}
.fd-rxn-summary-emojis span {
    background: var(--fd-surface);
    border: 1px solid var(--fd-border);
    width: 18px; height: 18px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px;
    margin-inline-start: -4px;
}
.fd-rxn-summary-emojis span:first-child { margin-inline-start: 0; }

/* Override the legacy like-btn label to reflect chosen reaction */
.fd-post-like-btn.rxn-love   { color: #E11D48 !important; }
.fd-post-like-btn.rxn-haha,
.fd-post-like-btn.rxn-wow,
.fd-post-like-btn.rxn-sad    { color: #D97706 !important; }
.fd-post-like-btn.rxn-angry  { color: var(--fd-danger) !important; }
.fd-post-like-btn .rxn-emoji { font-size: 16px; margin-inline-end: 4px; }

/* ══════════════════════════════════════════════════════════
   POST MEDIA (image + video player)
══════════════════════════════════════════════════════════ */
.fd-post-video {
    width: 100%;
    max-height: 480px;
    border-radius: var(--ds-r-sm);
    margin-top: var(--ds-space-3);
    background: #000;
    object-fit: cover;
    cursor: pointer;
}
.fd-post-image {
    cursor: zoom-in;  /* hints lightbox */
}

/* ══════════════════════════════════════════════════════════
   MEDIA LIGHTBOX (click image/video → full screen)
══════════════════════════════════════════════════════════ */
.fd-lb-backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.88);
    z-index: var(--ds-z-modal);
    display: none;
    align-items: center; justify-content: center;
    padding: 20px;
}
.fd-lb-backdrop.open { display: flex; }
.fd-lb-content {
    max-width: 90vw; max-height: 90vh;
    position: relative;
}
.fd-lb-content img,
.fd-lb-content video {
    max-width: 100%; max-height: 90vh;
    border-radius: var(--ds-r-md);
    display: block;
}
.fd-lb-close {
    position: absolute; top: -40px; inset-inline-end: 0;
    background: rgba(255,255,255,.15); color: #fff;
    border: 0; width: 36px; height: 36px;
    border-radius: 50%; cursor: pointer; font-size: 18px;
    font-family: inherit;
}
.fd-lb-close:hover { background: rgba(255,255,255,.3); }
.fd-lb-link {
    position: absolute; bottom: -40px; inset-inline-end: 0;
    color: #fff; text-decoration: none; font-size: 13px;
    font-weight: 600; opacity: .85;
}
.fd-lb-link:hover { color: #fff; opacity: 1; }

/* ══════════════════════════════════════════════════════════
   MENTION RENDERING + INTERNAL LINK
══════════════════════════════════════════════════════════ */
.fd-mention-link {
    color: var(--fd-primary);
    font-weight: var(--ds-fw-bold);
    text-decoration: none;
    background: var(--fd-primary-l);
    padding: 1px 6px;
    border-radius: 4px;
}
.fd-mention-link:hover { background: var(--fd-primary); color: #fff; }

/* "Pending review" banner on top of the user's own pending posts */
.fd-post-status-banner {
    background: #FEF3C7;
    color: #9A3412;
    padding: 6px 12px;
    font-size: var(--ds-fs-xs);
    font-weight: var(--ds-fw-bold);
    text-align: center;
    border-bottom: 1px solid #FCD34D;
}
.fd-post-status-banner.rejected {
    background: #FEE2E2;
    color: #991B1B;
    border-bottom-color: #FCA5A5;
}

/* Very small phones (iPhone SE, 360px) — strip more padding */
@media (max-width: 360px) {
    .fd-layout { padding: 4px 4px 76px; gap: 6px; }
    .fd-doc-av { width: 56px; height: 56px; }
    .fd-hero-card { padding: 14px; gap: 10px; }
    .fd-hero-ic { width: 44px; height: 44px; font-size: 18px; }
}