/* ===== VakilNet supplementary styles (beyond the original static pages) ===== */

/* Admin layout */
.admin-body { padding-bottom: 0 !important; background: #f1f5f9; min-height: 100vh; overflow-x: hidden; }
.admin-layout { display: flex; min-height: 100vh; }

.admin-sidebar {
    width: 260px; background: var(--dark-gradient, linear-gradient(135deg,#0f172a,#1e293b));
    color: #fff; position: fixed; top: 0; right: 0; bottom: 0; z-index: 1050;
    display: flex; flex-direction: column; transition: transform .3s ease, width .25s ease;
}
[dir="ltr"] .admin-sidebar { right: auto; left: 0; }

.sidebar-header {
    display: flex; align-items: center; gap: .75rem; padding: 1.25rem 1.25rem;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.sidebar-brand-icon {
    width: 42px; height: 42px; border-radius: .75rem; background: var(--primary-gradient);
    display: flex; align-items: center; justify-content: center; font-size: 1.3rem; flex-shrink: 0;
}
.sidebar-brand-text strong { display: block; font-size: 1.05rem; }
.sidebar-brand-text small { color: rgba(255,255,255,.6); font-size: .75rem; }
.sidebar-close { margin-inline-start: auto; background: none; border: none; color: #fff; font-size: 1.2rem; }

.sidebar-nav { flex: 1; overflow-y: auto; padding: .75rem; }.sidebar-section-title {
    font-size: .7rem; color: rgba(255,255,255,.45); text-transform: uppercase;
    letter-spacing: 1px; padding: 1rem .75rem .4rem; font-weight: 700;
}.sidebar-link {
    display: flex; align-items: center; gap: .75rem; color: rgba(255,255,255,.75);
    padding: .65rem .75rem; border-radius: .6rem; margin-bottom: .15rem; font-size: .9rem;
    transition: all .25s ease;
}
.sidebar-link:hover { background: rgba(255,255,255,.08); color: #fff; }
.sidebar-link.active { background: var(--primary-gradient); color: #fff; box-shadow: 0 4px 12px rgba(102,126,234,.35); }
.sidebar-link i { font-size: 1.1rem; width: 22px; text-align: center; }
.sidebar-badge {
    margin-inline-start: auto; background: var(--warning-gradient); color: #fff; font-size: .7rem;
    padding: .1rem .5rem; border-radius: 2rem; font-weight: 700;
}
.sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 1040; }
.sidebar-overlay.show { display: block; }

/* Public footer version tag */
.footer-version {
    margin-inline-start: .6rem; font-size: .72rem; opacity: .65;
    letter-spacing: .3px;
}

/* Sidebar version badge (bottom of the rail) */
.sidebar-version {
    display: flex; align-items: center; gap: .45rem;
    padding: .8rem 1.25rem; border-top: 1px solid rgba(255,255,255,.08);
    color: rgba(255,255,255,.45); font-size: .72rem; flex-shrink: 0;
}
.sidebar-version i { font-size: .8rem; }
html.sidebar-collapsed .sidebar-version { justify-content: center; padding: .8rem .4rem; }
html.sidebar-collapsed .sidebar-version span { display: none; }

.admin-main { flex: 1; min-width: 0; margin-inline-start: 260px; display: flex; flex-direction: column; min-height: 100vh; transition: margin-inline-start .25s ease; }
.admin-topbar {
    background: #fff; display: flex; justify-content: space-between; align-items: center;
    padding: .6rem 1.25rem; box-shadow: 0 1px 8px rgba(0,0,0,.06); position: sticky; top: 0; z-index: 1000;
    gap: .5rem; min-height: 56px;
}
.topbar-right { display: flex; align-items: center; gap: .4rem; flex: 1; min-width: 0; }
.topbar-left  { display: flex; align-items: center; gap: .35rem; flex-shrink: 0; }
/* RTL dropdown menus flip to the left edge */
.topbar-left .dropdown-menu-end { left: 0 !important; right: auto !important; }
[dir="rtl"] .topbar-left .dropdown-menu-end { left: 0 !important; right: auto !important; }

/* ---- Search pill ---- */
.topbar-search {
    display: flex; align-items: center; gap: .5rem; background: var(--bg-light, #f8fafc);
    border: 1px solid transparent; border-radius: 2rem; padding: .35rem .9rem;
    width: 260px; max-width: 260px; transition: border-color .2s, box-shadow .2s;
}
.topbar-search:focus-within { border-color: var(--primary, #667eea); box-shadow: 0 0 0 3px rgba(102,126,234,.12); }
.topbar-search input { border: none; background: transparent; outline: none; width: 100%; font-family: inherit; font-size: .85rem; }
.topbar-search i { color: var(--text-muted, #94a3b8); font-size: .95rem; }

/* ---- Icon buttons ---- */
.topbar-icon-btn {
    background: none; border: none; width: 38px; height: 38px; border-radius: .7rem;
    display: flex; align-items: center; justify-content: center; font-size: 1.1rem;
    color: var(--text-muted, #64748b); transition: all .15s ease; flex-shrink: 0; cursor: pointer;
    position: relative;
}
/* dropdown-toggle variants (language, currency, bell) show text */
.topbar-icon-btn.dropdown-toggle { width: auto; padding: 0 .55rem; gap: .25rem; }
.topbar-icon-btn:hover { background: var(--bg-light, #f1f5f9); color: var(--primary, #667eea); }
.topbar-icon-btn:active { transform: scale(.94); }

/* ---- Notification badge ---- */
.topbar-icon-btn .notif-badge {
    position: absolute; top: 3px; right: 2px;
    min-width: 16px; height: 16px;
    background: #ef4444; color: #fff; border-radius: 1rem;
    font-size: .6rem; font-weight: 700; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    padding: 0 3px; border: 2px solid #fff;
}
[dir="ltr"] .topbar-icon-btn .notif-badge { right: auto; left: 2px; }

/* ---- Profile chip ---- */
.topbar-profile {
    display: flex; align-items: center; gap: .5rem; background: var(--bg-light, #f8fafc);
    border: 1px solid transparent; border-radius: 2rem; padding: .25rem .55rem .25rem .9rem;
    color: var(--text-dark); transition: all .15s ease; font-family: inherit; cursor: pointer;
    white-space: nowrap; flex-shrink: 0;
}
.topbar-profile:hover, .topbar-profile[aria-expanded="true"] {
    background: #eef2ff; border-color: rgba(102,126,234,.18);
}
.topbar-profile img {
    width: 34px; height: 34px; border-radius: 50%; object-fit: cover;
    border: 2px solid #fff; box-shadow: 0 1px 6px rgba(0,0,0,.1); flex-shrink: 0;
}
.topbar-profile-info {
    display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2;
    min-width: 0; max-width: 130px;
}
.topbar-profile-info strong { font-size: .82rem; color: var(--text-dark); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; }
.topbar-profile-info small { font-size: .68rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; }
.topbar-profile-caret { font-size: .65rem; color: var(--text-muted); flex-shrink: 0; transition: transform .2s; }
.topbar-profile.dropdown-toggle::after { display: none; }
.topbar-profile[aria-expanded="true"] .topbar-profile-caret { transform: rotate(180deg); }

/* ---- Notification dropdown menu ---- */
.notif-menu { border: 1px solid var(--bs-border-color, #e2e8f0); border-radius: .75rem; }
.notif-scroll { scrollbar-width: thin; }
.notif-scroll::-webkit-scrollbar { width: 4px; }
.notif-scroll::-webkit-scrollbar-thumb { background: var(--bs-border-color, #cbd5e1); border-radius: 4px; }

/* ---- Responsive ---- */
@media (max-width: 991.98px) {
    .topbar-profile-info, .topbar-profile-caret { display: none; }
    .topbar-profile { padding: .2rem; border-radius: 50%; }
    .topbar-icon-btn { width: 36px; height: 36px; font-size: 1rem; }
    .topbar-left { gap: .25rem; }
    .admin-topbar { padding: .5rem 1rem; }
}
@media (max-width: 575.98px) {
    .topbar-search { display: none; }
    .topbar-profile-info, .topbar-profile-caret { display: none; }
    .topbar-profile { padding: .2rem; border-radius: 50%; }
    .topbar-left { min-width: 0; gap: .2rem; }
    .admin-topbar { padding: .4rem .75rem; }
}
.admin-content { padding: 1.5rem; }

/* Dashed card (create-role card) — overrides border-0 */
.border-dashed { border: 2px dashed #cbd5e1 !important; }

/* Stat cards */
.stat-card {
    background: #fff; border-radius: 1rem; padding: 1.25rem; box-shadow: 0 4px 18px rgba(0,0,0,.05);
    height: 100%; transition: all .3s ease;
}
.stat-card:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0,0,0,.09); }
.stat-card-header { display: flex; justify-content: space-between; align-items: center; font-size: .85rem; color: var(--text-muted); font-weight: 600; }
.stat-icon {
    width: 42px; height: 42px; border-radius: .75rem; color: #fff; font-size: 1.15rem;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.stat-value { font-size: 1.6rem; font-weight: 800; margin: .75rem 0 .25rem; color: var(--text-dark, #1e293b); }

/* Quick actions */
.quick-action-card {
    background: #fff; border-radius: 1rem; padding: 1.25rem; box-shadow: 0 4px 18px rgba(0,0,0,.05);
    text-align: center; transition: all .3s ease; height: 100%; display: block; color: var(--text-dark);
}
.quick-action-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,.1); color: inherit; }
.quick-action-icon {
    width: 52px; height: 52px; border-radius: 1rem; color: #fff; font-size: 1.4rem;
    display: flex; align-items: center; justify-content: center; margin: 0 auto .75rem;
}
.quick-action-title { font-weight: 700; font-size: .9rem; }
.quick-action-desc { font-size: .75rem; color: var(--text-muted); }

/* Activity feed */
.activity-list { display: flex; flex-direction: column; gap: 1rem; }
.activity-item { display: flex; gap: .75rem; align-items: flex-start; }
.activity-icon {
    width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center;
    justify-content: center; color: #fff; font-size: 1rem; flex-shrink: 0;
}
.activity-icon.primary { background: linear-gradient(135deg,#667eea,#764ba2); }
.activity-icon.success { background: linear-gradient(135deg,#11998e,#38ef7d); }
.activity-icon.info { background: linear-gradient(135deg,#4facfe,#00f2fe); }
.activity-icon.warning { background: linear-gradient(135deg,#f59e0b,#ef4444); }
.activity-icon.danger { background: linear-gradient(135deg,#ef4444,#dc2626); }
.activity-icon.purple { background: linear-gradient(135deg,#a855f7,#ec4899); }
.activity-title { font-weight: 700; font-size: .88rem; }
.activity-desc { font-size: .8rem; color: var(--text-muted); }
.activity-time { font-size: .72rem; color: #94a3b8; }

/* Status dot */
.status-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: currentColor; margin-inline-end: .3rem; }

/* Profile page */
.profile-wrapper { min-height: 60vh; }

/* Questions tab — best (accepted) answer highlight */
.answer-item {
    padding: .9rem 1rem;
    border: 1px solid #f1f5f9;
    border-radius: .85rem;
    margin-bottom: .9rem;
    background: #fff;
    transition: all .25s ease;
}
.answer-item:hover { border-color: #e2e8f0; box-shadow: 0 6px 18px rgba(0,0,0,.05); }
.answer-item.answer-accepted {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border-color: #fde68a;
    box-shadow: 0 4px 16px rgba(245,158,11,.14);
}
.badge-answer-best {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    background: var(--gold-gradient, linear-gradient(135deg,#fbbf24,#f59e0b));
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    padding: .25rem .7rem;
    border-radius: 2rem;
    box-shadow: 0 2px 8px rgba(245,158,11,.35);
    white-space: nowrap;
}
.profile-header { color: #fff; padding: 4.5rem 0 5rem; position: relative; overflow: hidden; }
.profile-header::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(circle at 20% 50%, rgba(255,255,255,.12) 0%, transparent 50%);
}
.profile-header .container { position: relative; z-index: 1; }

/* Action bar — moved onto the top corner of the gradient header.
   The bar is a direct child of .profile-header (position: relative), so it
   floats at the header's top corner; inset-inline-end keeps it on the far
   side from the avatar column in both RTL (left) and LTR (right). */
.profile-actions-header {
    position: absolute;
    top: 1.25rem;
    inset-inline-end: 1.25rem;
    z-index: 3;
    max-width: calc(100% - 2.5rem);
    justify-content: flex-end;
}
.profile-actions-header .btn {
    border-radius: 2rem;
    font-weight: 600;
    padding: .45rem 1.05rem;
    border: 1px solid rgba(255,255,255,.45);
    background: rgba(255,255,255,.14);
    color: #fff;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 4px 14px rgba(0,0,0,.12);
    font-size: .85rem;
    transition: all .25s ease;
    white-space: nowrap;
}
.profile-actions-header .btn:hover {
    background: #fff;
    color: var(--primary);
    border-color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,.18);
}
/* the register CTA keeps a solid white look so it stands out as primary */
.profile-actions-header .btn-register {
    background: #fff;
    color: var(--primary);
    border-color: #fff;
    box-shadow: 0 4px 18px rgba(0,0,0,.18);
}
.profile-actions-header .btn-register:hover {
    background: rgba(255,255,255,.85);
    color: var(--secondary);
}
.profile-actions-header .btn-follow.following {
    background: rgba(255,255,255,.22);
    border-color: rgba(255,255,255,.6);
}
.profile-actions-header .btn-outline-danger {
    color: #fff;
    border-color: rgba(255,255,255,.4);
    background: rgba(239,68,68,.18);
}
.profile-actions-header .btn-outline-danger:hover {
    background: var(--danger-gradient, #dc2626);
    border-color: transparent;
    color: #fff;
}

@media (max-width: 575.98px) {
    .profile-actions-header {
        position: static;
        justify-content: center;
        margin-bottom: 1.25rem;
    }
    .profile-header { padding: 2.75rem 0 4.5rem; }
}

.profile-tabs { border-bottom: 2px solid #f1f5f9; }
.profile-tabs .nav-link { font-weight: 600; color: var(--text-muted); border: none; padding: .75rem 1.25rem; }
.profile-tabs .nav-link.active { color: var(--primary); border-bottom: 3px solid var(--primary); background: transparent; }
.profile-actions .btn { border-radius: .75rem; font-weight: 600; }

/* QA page */
.qa-hero { color: #fff; padding: 3rem 0; position: relative; overflow: hidden; }
.qa-hero::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(circle at 80% 20%, rgba(255,255,255,.12) 0%, transparent 50%);
}
.qa-hero-content { position: relative; z-index: 1; }
.qa-hero-title { font-size: 2.2rem; font-weight: 800; }
.qa-stat-value { font-size: 1.6rem; font-weight: 800; }
.qa-stat-label { font-size: .8rem; opacity: .85; }
.qa-filter-tabs .nav-link { color: var(--text-muted); font-weight: 600; }
.qa-filter-tabs .nav-link.active { background: linear-gradient(135deg,#0d9488,#0f766e); color: #fff; }
.qa-answer-box { border-right: 4px solid #14b8a6; }
[dir="ltr"] .qa-answer-box { border-right: none; border-left: 4px solid #14b8a6; }

/* Search page */
.search-hero { background: var(--primary-gradient); color: #fff; padding: 3.5rem 0; }
.search-hero-title { font-size: 2.2rem; font-weight: 800; }
.search-box {
    background: #fff; border-radius: 1rem; padding: .5rem; display: flex; gap: .5rem;
    flex-wrap: wrap; box-shadow: 0 20px 60px rgba(0,0,0,.2); max-width: 720px; margin: 1.5rem auto 0;
}
.filter-sidebar { background: #fff; border-radius: 1rem; padding: 1.25rem; box-shadow: 0 4px 18px rgba(0,0,0,.05); }
.filter-title { font-weight: 700; }
.btn-filter-reset { color: var(--primary); font-size: .85rem; font-weight: 600; }
.filter-group { padding: 1rem 0; border-bottom: 1px solid #f1f5f9; }
.filter-group-title { font-weight: 700; font-size: .88rem; margin-bottom: .6rem; }
.range-values { display: flex; justify-content: space-between; font-size: .78rem; color: var(--text-muted); margin-top: .35rem; }
.btn-filter-apply { background: var(--primary-gradient); color: #fff; border: none; padding: .7rem; border-radius: .75rem; font-weight: 600; margin-top: 1rem; }
.results-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem; flex-wrap: wrap; gap: .75rem; }
.results-count { font-weight: 600; color: var(--text-muted); }
.sort-select { border: 2px solid #e2e8f0; border-radius: .6rem; padding: .4rem .8rem; font-family: inherit; font-size: .88rem; }
.lawyer-card-content { padding: .9rem 1.25rem; }
.lawyer-price { background: var(--bg-light); border-radius: .75rem; padding: .6rem .9rem; }
.price-label { font-size: .8rem; color: var(--text-muted); }
.price-value { font-weight: 800; color: var(--primary); }
.price-currency { font-size: .7rem; color: var(--text-muted); font-weight: 500; }
.btn-contact {
    background: rgba(102,126,234,.1); color: var(--primary); border: none; border-radius: .5rem;
    padding: .5rem .8rem; font-size: .9rem;
}
.btn-contact:hover { background: var(--primary); color: #fff; }
.mobile-filter-btn {
    position: fixed; bottom: 90px; left: 1.25rem; z-index: 1030; width: 52px; height: 52px;
    border-radius: 50%; border: none; background: var(--primary-gradient); color: #fff; font-size: 1.3rem;
    box-shadow: 0 8px 24px rgba(102,126,234,.4);
}

/* Role toggle on register */
.role-toggle .btn { padding: .6rem; font-weight: 600; }
.role-toggle .btn-check:checked + .btn { background: var(--primary-gradient); border-color: transparent; color: #fff; }

/* Auth page tweaks */
.auth-page { min-height: 100vh; }

/* Breaking ticker */
.breaking-ticker .badge { animation: blink 1.2s infinite; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }

/* Pagination */
.pagination-wrapper { display: flex; justify-content: center; margin-top: 1.5rem; }
.page-link { color: var(--primary); }
.page-item.active .page-link { background: var(--primary-gradient); border-color: transparent; color: #fff; }

/* Sidebar groups: in expanded mode the group toggle is hidden and the
   child links render inline (unchanged). In collapsed mode the children are
   hidden and the toggle icon is shown; hovering it opens a flyout submenu. */
.sidebar-group { position: relative; }
.sidebar-group-toggle { display: none; }

/* Collapsed sidebar (wide screens) — icon-only rail.
   Class lives on <html> (documentElement), rendered server-side from the user
   profile so the state follows the admin across devices (no FOUC needed). */
@media (min-width: 992px) {
    html.sidebar-collapsed .admin-sidebar { width: 76px; }
    html.sidebar-collapsed .admin-main { margin-inline-start: 76px; }
    html.sidebar-collapsed .sidebar-header { justify-content: center; padding: 1.25rem .5rem; }
    html.sidebar-collapsed .sidebar-brand-text,
    html.sidebar-collapsed .sidebar-section-title,
    html.sidebar-collapsed .sidebar-link span,
    html.sidebar-collapsed .sidebar-link .sidebar-badge { display: none; }
    html.sidebar-collapsed .sidebar-nav { padding: .75rem .4rem; }
    html.sidebar-collapsed .sidebar-link { justify-content: center; gap: 0; padding: .65rem; }
    html.sidebar-collapsed .sidebar-link i { font-size: 1.15rem; width: auto; }

    /* groups: children off the rail, group toggle becomes the rail icon */
    html.sidebar-collapsed .sidebar-link-child { display: none; }
    html.sidebar-collapsed .sidebar-group-toggle {
        display: flex;
        cursor: pointer;
        position: relative;
    }
    html.sidebar-collapsed .sidebar-group-toggle:hover { background: rgba(255,255,255,.12); }
}

/* Flyout submenu (collapsed mode) — absolutely positioned popover */
.sidebar-flyout {
    display: none;
    position: fixed;
    z-index: 1060;
    min-width: 200px;
    max-width: 240px;
    padding: .5rem;
    border-radius: .9rem;
    background: #fff;
    border: 1px solid rgba(226,232,240,.9);
    box-shadow: 0 14px 44px rgba(15,23,42,.18);
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity .18s ease, transform .18s ease;
}
.sidebar-flyout.show { display: block; opacity: 1; transform: translateY(0); }
.sidebar-flyout-head {
    display: flex; align-items: center; gap: .5rem;
    font-size: .75rem; font-weight: 700; color: var(--text-muted, #64748b);
    padding: .35rem .6rem .5rem; text-transform: uppercase; letter-spacing: .5px;
    border-bottom: 1px solid #f1f5f9; margin-bottom: .35rem;
}
.sidebar-flyout-link {
    display: flex; align-items: center; gap: .65rem;
    color: var(--text-dark, #1e293b); padding: .55rem .6rem;
    border-radius: .6rem; font-size: .9rem; text-decoration: none;
    transition: all .18s ease;
}
.sidebar-flyout-link i { font-size: 1rem; width: 20px; text-align: center; color: var(--primary, #667eea); }
.sidebar-flyout-link:hover { background: rgba(102,126,234,.1); color: var(--primary, #667eea); }
.sidebar-flyout-link.active { background: var(--primary-gradient); color: #fff; }
.sidebar-flyout-link.active i { color: #fff; }

[dir="ltr"] .sidebar-flyout-head { text-transform: uppercase; }

/* Responsive admin */
@media (max-width: 991.98px) {
    .admin-sidebar { transform: translateX(100%); }
    [dir="ltr"] .admin-sidebar { transform: translateX(-100%); }
    .admin-sidebar.show { transform: translateX(0); }
    .admin-main { margin-inline-start: 0; }
}

/* Role switcher in the users table — full width on small screens */
.role-switcher { width: 130px; }
@media (max-width: 575.98px) {
    .role-switcher { width: 100%; min-width: 120px; }
}

/* Mobile-friendly admin tables & forms */
@media (max-width: 575.98px) {
    .admin-content { padding: 1rem; }
    .table-responsive { -webkit-overflow-scrolling: touch; }
    .admin-table { font-size: .85rem; }
    /* let action cells wrap instead of forcing one long row */
    .admin-table td .d-flex.gap-1 { flex-wrap: wrap; row-gap: .35rem; }
    .stat-card { padding: 1rem; }
    .stat-value { font-size: 1.4rem; }
    /* wider tap targets on touch screens */
    .admin-table .btn-sm { min-width: 34px; }
}

/* Tablet polish (768–992px) */
@media (min-width: 576px) and (max-width: 991.98px) {
    .admin-content { padding: 1.25rem; }
}

/* ===== Small-screen navbar compaction (found by the layout-regression script) =====
   At 360px the public + user-panel navbar right cluster (theme toggle + currency
   + language + auth buttons) overflows the viewport. On very small screens we
   shrink the brand, tighten gaps and paddings, drop the chevrons, and hide the
   secondary currency switcher so everything fits on one row. */
@media (max-width: 420px) {
    .main-navbar .navbar-brand { font-size: 1.1rem; }
    .main-navbar .d-flex.align-items-center.gap-2 { gap: .4rem !important; }
    .main-navbar .btn-register,
    .main-navbar .btn-login { padding: .42rem .7rem; font-size: .82rem; }
    .main-navbar .lang-btn { padding: .4rem .55rem; gap: .35rem; }
    .main-navbar .lang-btn .bi-chevron-down { display: none; }
    .main-navbar .lang-flag { font-size: .9rem; }
    /* currency switcher is secondary — hide it on phones so lang + auth fit */
    .main-navbar .lang-switcher:has(#currencyBtn) { display: none; }
    /* user-panel / public profile button: keep the name on one short line */
    .main-navbar .dropdown > .btn-register { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .82rem; padding: .42rem .65rem; }
}

/* ===== Public theme toggle button ===== */
.theme-toggle-btn {
    width: 40px;
    height: 40px;
    border-radius: .6rem;
    border: 2px solid var(--primary);
    color: var(--primary);
    background: rgba(102, 126, 234, 0.08);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    cursor: pointer;
    transition: var(--transition);
    flex-shrink: 0;
}
.theme-toggle-btn:hover { background: var(--primary); color: #fff; transform: translateY(-1px); }

/* ===== Mobile bottom nav: active indicator + notification badge ===== */
.mobile-bottom-nav .nav-item { position: relative; }
.mobile-bottom-nav .nav-item.active i { color: var(--primary); }
.mobile-bottom-nav .nav-item.active span { color: var(--primary); }
.mobile-bottom-nav .nav-badge {
    position: absolute;
    top: 2px;
    inset-inline-end: calc(50% - 22px);
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 50%;
    background: #ef4444;
    color: #fff;
    font-size: .6rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    box-shadow: 0 0 0 2px #fff;
    z-index: 2;
}
[data-bs-theme="dark"] .mobile-bottom-nav .nav-badge { box-shadow: 0 0 0 2px #1e293b; }

/* ===== Mobile card layout for user / lawyer lists ===== */
.list-card-mobile {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: .9rem;
    padding: .9rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .04);
    margin-bottom: .75rem;
    display: flex;
    flex-direction: column;
    gap: .65rem;
}
[data-bs-theme="dark"] .list-card-mobile {
    background: #1e293b;
    border-color: #334155;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .3);
}
.list-card-mobile .list-card-top {
    display: flex;
    align-items: center;
    gap: .65rem;
}
.list-card-mobile .list-card-actions {
    display: flex;
    gap: .35rem;
    flex-wrap: wrap;
    align-items: center;
}
.list-card-mobile .list-card-actions form { margin: 0; }
.list-card-mobile .list-card-actions .btn-sm { min-width: 34px; }

/* ===== Filter drawer close button ===== */
.filter-drawer-close {
    position: absolute;
    top: .75rem;
    inset-inline-start: .75rem;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    background: var(--bg-light);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    cursor: pointer;
    z-index: 2;
    transition: var(--transition);
}
.filter-drawer-close:hover { background: var(--primary); color: #fff; }
[data-bs-theme="dark"] .filter-drawer-close { background: #334155; color: #cbd5e1; }

/* ---- clickable content cards (news/blog/post-lawyers) ---- */
.news-card-link, .card-link-wrap { display: block; height: 100%; color: inherit; }
.news-card-link:hover .news-card,
.card-link-wrap:hover .card { transform: translateY(-5px); box-shadow: 0 15px 40px rgba(0,0,0,.12); }
.news-card-link .news-title, .card-link-wrap .fw-bold { transition: color var(--transition); }
.news-card-link:hover .news-title, .card-link-wrap:hover .fw-bold { color: var(--primary); }
[data-bs-theme="dark"] .news-card-link, [data-bs-theme="dark"] .card-link-wrap { color: inherit; }

/* Stretched-link cards (blog): the whole card is clickable through the
   title's stretched-link, without nesting anchors inside the card. The
   card must be positioned so the stretched ::after covers it entirely,
   and inner tag badges are lifted above it so they stay clickable. */
.news-card { position: relative; }
.news-card .news-title a { color: inherit; text-decoration: none; }
.news-card:hover .news-title a { color: var(--primary); }

/* ---- VIP badge on lawyer search cards ---- */
.search-page .vip-badge { top: .5rem; right: .5rem; font-size: .68rem; padding: .28rem .6rem; }
[dir="ltr"] .search-page .vip-badge { right: auto; left: .5rem; }

/* ---- Share buttons (news/post/lawyer-post detail) ----
   One component (.share-rail) used at every breakpoint: a single horizontal
   row of share buttons under the article. Each platform gets its brand
   color on hover (class = .share-<platform>). */
.share-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
    background: #f1f5f9; color: #334155; border: 1px solid #e2e8f0;
    font-size: 1.05rem; text-decoration: none; cursor: pointer;
    transition: all .2s ease; position: relative;
}
.share-btn:hover { transform: translateY(-2px) scale(1.05); color: #fff; border-color: transparent; box-shadow: 0 6px 16px rgba(15,23,42,.18); }
[data-bs-theme="dark"] .share-btn { background: #1e293b; color: #cbd5e1; border-color: #334155; }
[data-bs-theme="dark"] .share-btn:hover { color: #fff; }

/* platform brand colors (hover) */
.share-tg:hover { background: #229ed9; box-shadow: 0 6px 16px rgba(34,158,217,.35); }
.share-wa:hover { background: #25d366; box-shadow: 0 6px 16px rgba(37,211,102,.35); }
.share-ig:hover { background: linear-gradient(45deg, #f09433, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888); box-shadow: 0 6px 16px rgba(220,39,67,.35); }
.share-x:hover { background: #0f1419; box-shadow: 0 6px 16px rgba(15,20,25,.35); }
.share-fb:hover { background: #1877f2; box-shadow: 0 6px 16px rgba(24,119,242,.35); }
.share-li:hover { background: #0a66c2; box-shadow: 0 6px 16px rgba(10,102,194,.35); }
.share-mail:hover { background: linear-gradient(135deg, #64748b, #334155); box-shadow: 0 6px 16px rgba(51,65,85,.3); }
.share-copy:hover, .share-copy.copied { background: linear-gradient(135deg, #10b981, #059669); box-shadow: 0 6px 16px rgba(16,185,129,.35); }

/* ===== Share row (article detail pages) ===== */
.share-rail {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: .5rem;
    padding: .75rem 1rem;
    margin-top: 1.5rem;
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 1rem;
    box-shadow: 0 4px 16px rgba(15, 23, 42, .06);
}
.share-rail .share-rail-label {
    font-size: .85rem;
    font-weight: 600;
    color: var(--text-muted, #64748b);
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-inline-end: .35rem;
    white-space: nowrap;
}
.share-rail .share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--border, #e2e8f0);
    background: var(--surface, #fff);
    color: var(--text-dark, #334155);
    text-decoration: none;
    transition: all .2s ease;
}
.share-rail .share-btn:hover {
    transform: translateY(-2px);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 6px 16px rgba(15, 23, 42, .16);
}
/* keep the platform brand glow visible inside the rail (the rail hover
   rule above must not set its own box-shadow or it would win by
   specificity and blank out the per-platform colored shadows) */
.share-rail .share-tg:hover { box-shadow: 0 6px 16px rgba(34,158,217,.4); }
.share-rail .share-wa:hover { box-shadow: 0 6px 16px rgba(37,211,102,.4); }
.share-rail .share-ig:hover { box-shadow: 0 6px 16px rgba(220,39,67,.4); }
.share-rail .share-x:hover { box-shadow: 0 6px 16px rgba(15,20,25,.4); }
.share-rail .share-fb:hover { box-shadow: 0 6px 16px rgba(24,119,242,.4); }
.share-rail .share-li:hover { box-shadow: 0 6px 16px rgba(10,102,194,.4); }
.share-rail .share-mail:hover { box-shadow: 0 6px 16px rgba(51,65,85,.35); }
.share-rail .share-copy:hover, .share-rail .share-copy.copied { background: linear-gradient(135deg, #10b981, #059669); box-shadow: 0 6px 16px rgba(16,185,129,.4); }

/* dark mode */
[data-bs-theme="dark"] .share-rail { background: #1e293b; border-color: #334155; box-shadow: 0 4px 16px rgba(0,0,0,.4); }
[data-bs-theme="dark"] .share-rail .share-btn { background: #1e293b; color: #cbd5e1; border-color: #334155; }
[data-bs-theme="dark"] .share-rail .share-btn:hover { color: #fff; }

/* ===== Live Open Graph share-card preview (admin SEO section) ===== */
.og-preview-card {
    border: 1px solid var(--border, #e2e8f0);
    border-radius: .9rem;
    overflow: hidden;
    background: var(--surface, #fff);
    max-width: 460px;
    box-shadow: 0 4px 16px rgba(15, 23, 42, .07);
}
.og-preview-image {
    position: relative;
    aspect-ratio: 16 / 9;
    background: linear-gradient(135deg, #eef2ff, #e0e7ff);
    display: flex;
    align-items: center;
    justify-content: center;
}
.og-preview-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.og-preview-image-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
    color: #94a3b8;
    font-size: .78rem;
    text-align: center;
    padding: 1rem;
}
.og-preview-image-empty i { font-size: 1.6rem; color: #a5b4fc; }
.og-preview-body { padding: .8rem .9rem; }
.og-preview-domain {
    font-size: .72rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: .3px;
    direction: ltr;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.og-preview-title {
    font-weight: 700;
    font-size: .95rem;
    color: #1e293b;
    margin-top: .2rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.og-preview-desc {
    font-size: .8rem;
    color: #64748b;
    margin-top: .25rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
[data-bs-theme="dark"] .og-preview-card { background: #1e293b; border-color: #334155; }
[data-bs-theme="dark"] .og-preview-title { color: #e2e8f0; }
[data-bs-theme="dark"] .og-preview-desc { color: #94a3b8; }

/* ===== Google SERP snippet preview (admin SEO assistant) ===== */
.serp-snippet {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: .75rem;
    padding: 1rem 1.1rem;
    max-width: 600px;
    font-family: Arial, sans-serif;
    direction: ltr;
    text-align: left;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.serp-topline {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: .78rem;
    color: #202124;
    margin-bottom: .1rem;
}
.serp-favicon {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #e8eaed;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .7rem;
    color: #5f6368;
    flex-shrink: 0;
}
.serp-site { font-weight: 500; }
.serp-caret { color: #70757a; }
.serp-breadcrumb { color: #70757a; }
.serp-url {
    font-size: .72rem;
    color: #006621;
    margin-bottom: .3rem;
    word-break: break-all;
}
.serp-title {
    font-size: 1.05rem;
    color: #1a0dab;
    line-height: 1.3;
    cursor: pointer;
    margin-bottom: .2rem;
    text-decoration: none;
}
.serp-title:hover { text-decoration: underline; }
.serp-desc {
    font-size: .8rem;
    color: #4d5156;
    line-height: 1.45;
    word-break: break-word;
}
[data-bs-theme="dark"] .serp-snippet { background: #0f172a; border-color: #334155; box-shadow: none; }
[data-bs-theme="dark"] .serp-topline { color: #e5e7eb; }
[data-bs-theme="dark"] .serp-favicon { background: #1e293b; color: #94a3b8; }
[data-bs-theme="dark"] .serp-url { color: #4ade80; }
[data-bs-theme="dark"] .serp-title { color: #93c5fd; }
[data-bs-theme="dark"] .serp-desc { color: #cbd5e1; }

/* ===== Message thread view (user & lawyer panels) ===== */
.msg-thread { transition: background .15s ease; }
.msg-thread-head { cursor: pointer; }
.msg-thread-head:hover { background: rgba(99,102,241,.04); }
.msg-thread-caret { transition: transform .2s ease; }
.msg-thread[aria-expanded="true"] .msg-thread-caret,
.msg-thread-head[aria-expanded="true"] + .collapse .msg-thread-caret,
.collapse.show ~ .msg-thread-caret { transform: rotate(180deg); }
.msg-thread-body { background: var(--surface, #f8fafc); border: 1px solid var(--border, #e2e8f0); }
.msg-bubble { max-width: 85%; padding: .5rem .8rem; border-radius: .9rem; }
.msg-bubble-me { background: linear-gradient(135deg,#667eea,#764ba2); color: #fff; border-bottom-left-radius: .25rem; }
.msg-bubble-me small { color: rgba(255,255,255,.8) !important; }
.msg-bubble-other { background: #fff; border: 1px solid var(--border, #e2e8f0); border-bottom-right-radius: .25rem; }
[data-bs-theme="dark"] .msg-thread-body { background: #1e293b; border-color: #334155; }
[data-bs-theme="dark"] .msg-bubble-other { background: #1e293b; border-color: #334155; color: #e2e8f0; }

/* ===== City autocomplete (search forms) ===== */
.city-autocomplete { position: relative; flex: 1; display: flex; align-items: center; }
.city-autocomplete input[type="text"] {
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    padding: .6rem 0;
    font-size: .95rem;
    color: var(--text-dark, #1e293b);
}
.city-autocomplete .city-autocomplete-clear {
    border: none; background: none; color: var(--text-muted, #94a3b8);
    font-size: 1.1rem; line-height: 1; padding: 0 .35rem; cursor: pointer;
}
.city-autocomplete-list {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    left: 0;
    z-index: 1050;
    max-height: 280px;
    overflow-y: auto;
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: .75rem;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .14);
    padding: .35rem;
    list-style: none;
    margin: 0;
}
.city-autocomplete-item {
    padding: .55rem .8rem;
    border-radius: .5rem;
    cursor: pointer;
    font-size: .9rem;
    color: var(--text-dark, #1e293b);
    transition: background .12s ease;
}
.city-autocomplete-item:hover,
.city-autocomplete-item.active { background: rgba(99, 102, 241, .1); color: #4f46e5; }
.search-hero .city-autocomplete-list, .qa-hero .city-autocomplete-list,
.hero-section .city-autocomplete-list, .search-box .city-autocomplete-list {
    background: #fff;
    color: #1e293b;
}
.search-box .city-autocomplete input[type="text"] { color: var(--text-dark, #1e293b); }
[data-bs-theme="dark"] .city-autocomplete input[type="text"] { color: #e2e8f0; }
[data-bs-theme="dark"] .city-autocomplete-list { background: #1e293b; border-color: #334155; }
[data-bs-theme="dark"] .city-autocomplete-item { color: #e2e8f0; }
[data-bs-theme="dark"] .city-autocomplete-item:hover,
[data-bs-theme="dark"] .city-autocomplete-item.active { background: rgba(99,102,241,.25); color: #c7d2fe; }

/* ===== City autocomplete: one-click geolocation suggestion ===== */
.city-ac-suggest {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    left: 0;
    z-index: 1052;
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .4rem .65rem;
    background: linear-gradient(135deg, #eef2ff, #e0e7ff);
    border: 1px solid #c7d2fe;
    border-radius: .7rem;
    font-size: .82rem;
    color: #3730a3;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .14);
    white-space: nowrap;
}
.city-ac-suggest i { color: #6366f1; font-size: .95rem; flex-shrink: 0; }
.city-ac-suggest-text {
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.city-ac-suggest strong { font-weight: 700; }
.city-ac-suggest-pick {
    margin-inline-start: auto;
    border: none;
    background: var(--primary-gradient, linear-gradient(135deg, #667eea, #764ba2));
    color: #fff;
    font-size: .74rem;
    font-weight: 700;
    padding: .28rem .7rem;
    border-radius: 2rem;
    cursor: pointer;
    font-family: inherit;
    flex-shrink: 0;
    transition: transform .15s ease, filter .15s ease;
}
.city-ac-suggest-pick:hover { transform: translateY(-1px); filter: brightness(1.06); }
.city-ac-suggest-close {
    border: none;
    background: none;
    color: #94a3b8;
    font-size: 1.05rem;
    line-height: 1;
    padding: 0 .15rem;
    cursor: pointer;
    flex-shrink: 0;
}
.city-ac-suggest-close:hover { color: #64748b; }
/* when the chip is visible the dropdown opens below it */
.city-autocomplete.has-suggest .city-autocomplete-list { top: calc(100% + 48px); }

/* keep the chip readable on the tinted hero backgrounds */
.hero-section .city-ac-suggest,
.search-hero .city-ac-suggest,
.qa-hero .city-ac-suggest {
    background: #fff;
    color: #1e293b;
    border-color: #e2e8f0;
}
.hero-section .city-ac-suggest i,
.search-hero .city-ac-suggest i,
.qa-hero .city-ac-suggest i { color: #667eea; }

[data-bs-theme="dark"] .city-ac-suggest {
    background: #1e293b;
    border-color: #4f46e5;
    color: #c7d2fe;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .4);
}
[data-bs-theme="dark"] .city-ac-suggest i { color: #818cf8; }
[data-bs-theme="dark"] .city-ac-suggest-close { color: #64748b; }
[data-bs-theme="dark"] .city-ac-suggest-close:hover { color: #cbd5e1; }

/* OSM attribution — shown while the location suggestion chip is visible */
.city-ac-credit {
    position: absolute;
    top: calc(100% + 40px);
    inset-inline-end: .3rem;
    font-size: .62rem;
    color: var(--text-muted, #94a3b8);
    text-decoration: none;
    line-height: 1;
    z-index: 1052;
    background: rgba(255, 255, 255, .7);
    border-radius: 2rem;
    padding: .1rem .4rem;
}
.city-ac-credit:hover { color: var(--primary, #667eea); text-decoration: underline; }
[data-bs-theme="dark"] .city-ac-credit { background: rgba(30, 41, 59, .7); }

/* ===== CAPTCHA widget (login / register) ===== */
.captcha-row {
    display: flex;
    align-items: stretch;
    gap: .5rem;
}
.captcha-img-wrap {
    position: relative;
    flex: 0 0 auto;
    line-height: 0;
    border-radius: 10px;
    overflow: hidden;
}
.captcha-img {
    width: 160px;
    height: 50px;
    border-radius: 10px;
    border: 1px solid rgba(31, 58, 95, .18);
    background: #f8f5ee;
    display: block;
    object-fit: cover;
}
.captcha-refresh {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 10px;
    background: rgba(31, 58, 95, .6);
    color: #fff;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity .2s ease;
}
.captcha-img-wrap:hover .captcha-refresh { opacity: 1; }
.captcha-refresh:active { transform: rotate(180deg); }
[data-bs-theme="dark"] .captcha-img { background: #1e293b; border-color: rgba(148, 163, 184, .3); }

/* ===== Verify-pending page ===== */
.verify-icon {
    width: 74px;
    height: 74px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1f3a5f, #2c5f8a);
    color: #fff;
    font-size: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 24px rgba(31, 58, 95, .25);
}
.verify-email-box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    background: #f8f5ee;
    border: 1px dashed rgba(31, 58, 95, .3);
    border-radius: 12px;
    padding: .7rem 1rem;
    font-weight: bold;
    color: #1f3a5f;
    margin-bottom: 1rem;
}
.verify-info {
    background: rgba(31, 58, 95, .06);
    border-radius: 12px;
    padding: .9rem 1rem;
    font-size: .9rem;
    margin-bottom: .5rem;
}
.resend-timer { color: #8a5a2b; }
.resend-msg { min-height: 1.2em; }
[data-bs-theme="dark"] .verify-email-box { background: #1e293b; border-color: rgba(148, 163, 184, .35); color: #e2e8f0; }
[data-bs-theme="dark"] .verify-info { background: rgba(148, 163, 184, .12); }


/* ---- Loading skeleton placeholders ---- */
.skeleton {
    background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
    border-radius: .5rem;
    min-height: 1rem;
}
.skeleton-text { height: 1rem; margin-bottom: .5rem; }
.skeleton-text-sm { height: .75rem; width: 60%; margin-bottom: .5rem; }
.skeleton-title { height: 1.5rem; width: 70%; margin-bottom: .75rem; }
.skeleton-avatar { width: 60px; height: 60px; border-radius: 50%; }
.skeleton-card {
    background: var(--bg-card, #fff);
    border: 1px solid #e2e8f0;
    border-radius: .75rem;
    padding: 1.25rem;
    margin-bottom: 1rem;
}
.skeleton-badge { display: inline-block; width: 80px; height: 1.5rem; border-radius: 1rem; }

[data-theme="dark"] .skeleton,
.dark .skeleton {
    background: linear-gradient(90deg, #1e293b 25%, #334155 50%, #1e293b 75%);
    background-size: 200% 100%;
}
[data-theme="dark"] .skeleton-card,
.dark .skeleton-card {
    background: #1e293b;
    border-color: #334155;
}

@keyframes skeleton-shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.skeleton-hide { display: none; }


/* ---- Floating Toast Notifications ---- */
.toast-container {
    position: fixed;
    top: 1.25rem;
    right: 1.25rem;
    z-index: 10900;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    pointer-events: none;
    max-width: 400px;
    width: calc(100vw - 2.5rem);
}
.toast-floating {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    background: var(--bs-body-bg, #fff);
    color: var(--bs-body-color, #212529);
    box-shadow: 0 8px 32px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.08);
    border: 1px solid var(--bs-border-color, #dee2e6);
    pointer-events: auto;
    animation: toastSlideIn .35s cubic-bezier(.16,1,.3,1);
    overflow: hidden;
    position: relative;
    backdrop-filter: blur(12px);
}
.toast-floating.removing {
    animation: toastSlideOut .3s ease-in forwards;
}
.toast-floating-icon {
    font-size: 1.2rem;
    flex-shrink: 0;
    line-height: 1;
}
.toast-floating-body {
    flex: 1;
    font-size: .88rem;
    font-weight: 500;
    line-height: 1.4;
}
.toast-floating-close {
    background: none;
    border: none;
    color: var(--bs-secondary-color, #6c757d);
    cursor: pointer;
    padding: 0.15rem;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, color .15s;
    flex-shrink: 0;
}
.toast-floating-close:hover {
    background: var(--bs-tertiary-bg, #f8f9fa);
    color: var(--bs-body-color, #212529);
}
.toast-floating-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    border-radius: 0 0 12px 12px;
    animation: toastProgress 4s linear forwards;
}
/* Category colors */
.toast-floating--success .toast-floating-icon { color: #10b981; }
.toast-floating--success .toast-floating-progress { background: #10b981; }
.toast-floating--danger .toast-floating-icon { color: #ef4444; }
.toast-floating--danger .toast-floating-progress { background: #ef4444; }
.toast-floating--warning .toast-floating-icon { color: #f59e0b; }
.toast-floating--warning .toast-floating-progress { background: #f59e0b; }
.toast-floating--info .toast-floating-icon { color: #3b82f6; }
.toast-floating--info .toast-floating-progress { background: #3b82f6; }
/* Dark mode */
[data-bs-theme="dark"] .toast-floating {
    background: rgba(30,41,59,.92);
    border-color: rgba(148,163,184,.15);
    color: #e2e8f0;
    box-shadow: 0 8px 32px rgba(0,0,0,.35);
}
[data-bs-theme="dark"] .toast-floating-close:hover {
    background: rgba(148,163,184,.15);
    color: #e2e8f0;
}
@keyframes toastSlideIn {
    from { opacity: 0; transform: translateX(60px) scale(.95); }
    to { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes toastSlideOut {
    from { opacity: 1; transform: translateX(0) scale(1); }
    to { opacity: 0; transform: translateX(80px) scale(.9); }
}
@keyframes toastProgress {
    from { width: 100%; }
    to { width: 0%; }
}
@media (max-width: 575.98px) {
    .toast-container {
        top: auto;
        bottom: 4.5rem;
        right: 0.75rem;
        left: 0.75rem;
        max-width: none;
        width: auto;
    }
}

/* ===== Article Body — rich HTML rendering for blog posts ===== */
.article-body {
    font-size: 1.05rem;
    line-height: 2;
    color: #334155;
}
.article-body h1, .article-body h2, .article-body h3, .article-body h4 {
    color: #1e293b;
    font-weight: 700;
    margin-top: 2rem;
    margin-bottom: 1rem;
}
.article-body h1 { font-size: 1.6rem; }
.article-body h2 { font-size: 1.35rem; border-bottom: 2px solid #e2e8f0; padding-bottom: 6px; }
.article-body h3 { font-size: 1.15rem; }
.article-body h4 { font-size: 1.05rem; }
.article-body p { margin-bottom: 1rem; }
.article-body ul, .article-body ol {
    padding-right: 1.5rem;
    padding-left: 0;
    margin-bottom: 1.2rem;
}
.article-body li { margin-bottom: 0.4rem; }
.article-body strong { color: #1e293b; }
.article-body a { color: #2563eb; text-decoration: underline; text-underline-offset: 2px; }
.article-body a:hover { color: #1d4ed8; }
.article-body blockquote {
    border-right: 4px solid #6366f1;
    background: #f8fafc;
    padding: 1rem 1.5rem;
    margin: 1.5rem 0;
    border-radius: 0 8px 8px 0;
    font-style: italic;
    color: #475569;
}
.article-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
    font-size: 0.95rem;
}
.article-body th, .article-body td {
    border: 1px solid #e2e8f0;
    padding: 0.6rem 0.8rem;
    text-align: right;
}
.article-body th { background: #f1f5f9; font-weight: 600; color: #1e293b; }
.article-body details {
    margin-bottom: 0.5rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 1rem;
}
.article-body details[open] { border-color: #6366f1; }
.article-body summary {
    cursor: pointer;
    font-weight: 600;
    color: #1e293b;
    padding: 0.25rem 0;
}
.article-body details p { margin-top: 0.5rem; color: #475569; }
.article-body img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 1rem 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.article-body .callout-box {
    padding: 1rem 1.5rem;
    margin: 1.5rem 0;
    border-radius: 0 8px 8px 0;
}
.article-body .article-intro {
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
}
/* RTL support for article body */
.article-body[dir="rtl"],
.article-body[dir="rtl"] ul, .article-body[dir="rtl"] ol {
    padding-right: 1.5rem;
    padding-left: 0;
    text-align: right;
}
.article-body[dir="rtl"] blockquote {
    border-right: 4px solid #6366f1;
    border-left: none;
    border-radius: 0 8px 8px 0;
}
/* Print-friendly article */
@media print {
    .article-body { font-size: 12pt; line-height: 1.6; color: #000; }
    .article-body h2 { border-bottom: 1px solid #000; }
    .article-body a { color: #000; text-decoration: none; }
    .article-body a::after { content: " (" attr(href) ")"; font-size: 0.8em; color: #666; }
    .article-body .callout-box { border: 1px solid #ccc; background: #f9f9f9; }
    .article-body details { border: 1px solid #ccc; }
    .article-body details[open] summary { color: #000; }
}

/* ===== Lawyer panel: sidebar layout ===== */
.panel-shell {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    max-width: 1500px;
    margin-inline: auto;
    padding: 1.5rem clamp(0.9rem, 2.4vw, 2rem) 4.5rem;
}
.panel-main { flex: 1; min-width: 0; }

/* ---- sidebar (off-canvas on < lg, static column on lg+) ---- */
.panel-sidebar { width: 280px; flex: 0 0 280px; z-index: 1046; }
.panel-sidebar-backdrop {
    display: none;
}
.panel-sidebar-inner {
    background: #fff;
    border: 1px solid #e7ecf4;
    border-radius: 1.1rem;
    box-shadow: 0 12px 34px rgba(15, 23, 42, .07);
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    max-height: 100%;
    scrollbar-width: thin;
}
.panel-sidebar-header { display: none; }

/* profile summary */
.panel-profile {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: 1.15rem 1rem 1rem;
    background: linear-gradient(135deg, rgba(102,126,234,.09), rgba(118,75,162,.07));
    border-bottom: 1px dashed #e2e8f0;
    color: inherit;
    text-decoration: none;
    transition: background .2s;
}
.panel-profile:hover { background: linear-gradient(135deg, rgba(102,126,234,.15), rgba(118,75,162,.11)); }
.panel-avatar { position: relative; flex-shrink: 0; }
.panel-avatar img {
    width: 56px; height: 56px; border-radius: 50%;
    object-fit: cover; border: 3px solid #fff; box-shadow: 0 4px 12px rgba(15,23,42,.15);
}
.panel-vip-badge {
    position: absolute; bottom: -2px; inset-inline-end: -2px;
    width: 22px; height: 22px; border-radius: 50%;
    background: linear-gradient(135deg,#f6ad55,#dd6b20);
    color: #fff; font-size: .7rem;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid #fff;
}
.panel-profile-info { min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.panel-profile-info strong { font-size: .95rem; color: var(--text-dark, #0f172a); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.panel-profile-info small { color: #64748b; font-size: .75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.panel-rating { color: #b45309; font-size: .72rem; font-weight: 700; display: inline-flex; align-items: center; gap: .2rem; }
.panel-rating i { color: #f59e0b; }

/* menu */
.panel-menu { flex: 1; overflow-y: auto; padding: .6rem .7rem .7rem; }
.panel-menu-section {
    font-size: .66rem; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
    color: #94a3b8; padding: 1rem .6rem .35rem; display: flex; align-items: center; gap: .4rem;
}
.panel-menu-section::after { content: ''; flex: 1; height: 1px; background: #eef1f6; }
.panel-menu-item {
    display: flex; align-items: center; gap: .7rem;
    padding: .55rem .65rem; border-radius: .65rem;
    color: #475569; font-weight: 500; font-size: .88rem;
    text-decoration: none; margin-bottom: .1rem; position: relative;
    transition: background .18s, color .18s;
}
.panel-menu-item i { font-size: 1.02rem; width: 22px; text-align: center; color: #64748b; transition: color .18s; }
.panel-menu-item:hover { background: #f1f5f9; color: #0f172a; }
.panel-menu-item:hover i { color: var(--primary, #667eea); }
.panel-menu-item.active {
    background: linear-gradient(135deg, rgba(102,126,234,.16), rgba(118,75,162,.10));
    color: #4338ca; font-weight: 700;
}
.panel-menu-item.active i { color: var(--primary, #667eea); }
.panel-menu-item.active::before {
    content: ''; position: absolute; inset-block: .4rem; inset-inline-start: 0;
    width: 3.5px; border-radius: 2rem; background: linear-gradient(180deg,#667eea,#764ba2);
}
.panel-menu-badge {
    margin-inline-start: auto; background: linear-gradient(135deg,#f6ad55,#dd6b20);
    color: #fff; font-size: .68rem; padding: .05rem .45rem; border-radius: 2rem; font-weight: 700;
}
.panel-sidebar-footer {
    padding: .6rem .7rem .8rem; border-top: 1px dashed #e2e8f0;
    display: flex; flex-direction: column; gap: .1rem;
}
.panel-menu-item-muted { font-weight: 500; }
.panel-menu-item-danger { color: #dc2626; }
.panel-menu-item-danger i { color: #dc2626; }
.panel-menu-item-danger:hover { background: rgba(220,38,38,.08); color: #b91c1c; }

/* static sidebar on lg+ */
@media (min-width: 992px) {
    .panel-sidebar {
        position: sticky;
        top: 78px;
        height: fit-content;
        max-height: calc(100vh - 92px);
    }
    .panel-sidebar-inner { max-height: calc(100vh - 92px); }
}

/* mobile burger button inside panel navbar */
.panel-menu-toggle {
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #334155;
    width: 40px;
    height: 40px;
    border-radius: .6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
}
.panel-menu-toggle:hover { background: #f1f5f9; color: #0f172a; }
[data-bs-theme="dark"] .panel-menu-toggle { background: #1e293b; border-color: #334155; color: #cbd5e1; }
[data-bs-theme="dark"] .panel-menu-toggle:hover { background: #334155; color: #fff; }

/* off-canvas sidebar below lg */
@media (max-width: 991.98px) {
    .panel-shell { display: block; padding-top: 1.15rem; }
    .panel-sidebar {
        position: fixed;
        inset-block: 0;
        inset-inline-start: 0;
        width: 290px;
        max-width: 86vw;
        transform: translateX(-108%);
        transition: transform .28s ease;
        box-shadow: none;
    }
    [dir="rtl"] .panel-sidebar { transform: translateX(108%); }
    .panel-sidebar.open { transform: translateX(0) !important; box-shadow: 0 0 60px rgba(2, 6, 23, .35); }
    .panel-sidebar-inner { height: 100%; border-radius: 0 1.1rem 1.1rem 0; }
    [dir="rtl"] .panel-sidebar-inner { border-radius: 1.1rem 0 0 1.1rem; }
    .panel-sidebar-header {
        display: flex; justify-content: flex-end; padding: .5rem;
    }
    .panel-close {
        background: #f1f5f9; border: none; color: #475569;
        width: 34px; height: 34px; border-radius: .6rem; font-size: 1rem;
        display: inline-flex; align-items: center; justify-content: center;
    }
    .panel-close:hover { background: #e2e8f0; color: #0f172a; }
    .panel-sidebar-backdrop.show {
        display: block; position: fixed; inset: 0; z-index: 1045;
        background: rgba(15, 23, 42, .55); backdrop-filter: blur(2px);
    }
    .panel-sidebar { z-index: 1046; }
}