/* ============================================================
   Bisyor.uz dark theme v2 — heavier overrides for legacy CSS.
   Builds on dark-mode.css; addresses text/button/input/border
   complaints by targeting the specific hardcoded colour values
   that appeared in style.css (catalog of #fff, #d9e3f3, #8d9aaf,
   #1c1c1c, etc. across 1200+ rules).
   ============================================================ */

/* ─── Palette tokens (re-defined here so this file is self-contained
       if loaded standalone). Mirrors dark-mode.css v1. ─────────────── */
[data-theme="dark"] {
    --bz-bg:        #0f172a;
    --bz-surface:   #1e293b;
    --bz-surface-2: #273548;
    --bz-surface-3: #334155;
    --bz-border:    #334155;
    --bz-border-2:  #475569;
    --bz-text:      #e2e8f0;
    --bz-text-2:    #94a3b8;
    --bz-text-3:    #64748b;
    --bz-accent:    #3b82f6;
    --bz-accent-2:  #60a5fa;
    --bz-success:   #22c55e;
    --bz-danger:    #ef4444;
    --bz-warning:   #f59e0b;
}

/* ─── BLANKET text rules ─────────────────────────────────────
   Most legacy text colours are #1c1c1c / #000 / #6a7990 / #8d9aaf.
   Override these specifically rather than `* { color: ... }` (which
   would wreck branded headings). ─────────────────────────────── */
[data-theme="dark"] body,
[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3,
[data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6,
[data-theme="dark"] p,  [data-theme="dark"] li, [data-theme="dark"] dd,
[data-theme="dark"] span, [data-theme="dark"] td, [data-theme="dark"] th,
[data-theme="dark"] label, [data-theme="dark"] dt, [data-theme="dark"] dl,
[data-theme="dark"] em,  [data-theme="dark"] strong, [data-theme="dark"] b,
[data-theme="dark"] i:not(.fa):not(.fas):not(.far):not(.fab)  { color: inherit; }

[data-theme="dark"] body { color: var(--bz-text); }

/* Common "muted text" wrappers used across the site */
[data-theme="dark"] .text-muted,
[data-theme="dark"] .form-text,
[data-theme="dark"] small,
[data-theme="dark"] .small { color: var(--bz-text-2) !important; }

[data-theme="dark"] a { color: var(--bz-accent-2); }
[data-theme="dark"] a:hover { color: var(--bz-accent); }

/* ─── Bootstrap card / panel ─────────────────────────────── */
[data-theme="dark"] .card,
[data-theme="dark"] .alert,
[data-theme="dark"] .list-group-item {
    background: var(--bz-surface) !important;
    color: var(--bz-text) !important;
    border-color: var(--bz-border) !important;
}

/* ─── Forms — inputs, selects, textareas (Bootstrap + native) ── */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] .custom-select,
[data-theme="dark"] .input-group-text,
[data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea {
    background-color: var(--bz-surface-2) !important;
    color: var(--bz-text) !important;
    border-color: var(--bz-border-2) !important;
}
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus,
[data-theme="dark"] input:focus, [data-theme="dark"] textarea:focus, [data-theme="dark"] select:focus {
    background-color: var(--bz-surface-2) !important;
    color: var(--bz-text) !important;
    border-color: var(--bz-accent) !important;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.18) !important;
    outline: 0 !important;
}
[data-theme="dark"] .form-control::placeholder,
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder { color: var(--bz-text-3) !important; opacity: 1; }
[data-theme="dark"] .input-group .input-group-text { background: var(--bz-surface-3) !important; color: var(--bz-text-2) !important; }

/* checkbox / radio borders */
[data-theme="dark"] input[type="checkbox"], [data-theme="dark"] input[type="radio"] {
    accent-color: var(--bz-accent);
}

/* ─── Buttons ─────────────────────────────────────────────── */
[data-theme="dark"] .btn { color: var(--bz-text); }
[data-theme="dark"] .btn-primary,
[data-theme="dark"] .btn-info,
[data-theme="dark"] .btn-success { color: #fff !important; }
[data-theme="dark"] .btn-secondary,
[data-theme="dark"] .btn-light,
[data-theme="dark"] .btn-outline-secondary {
    background: var(--bz-surface-2) !important;
    color: var(--bz-text) !important;
    border-color: var(--bz-border-2) !important;
}
[data-theme="dark"] .btn-secondary:hover,
[data-theme="dark"] .btn-light:hover {
    background: var(--bz-surface-3) !important;
    color: var(--bz-text) !important;
}
[data-theme="dark"] .btn-link { color: var(--bz-accent-2) !important; }
[data-theme="dark"] .btn-default {
    background: var(--bz-surface-2) !important;
    color: var(--bz-text) !important;
    border-color: var(--bz-border-2) !important;
}

/* "more_know" / "more_know.lets" — the site's primary CTA family */
[data-theme="dark"] .more_know,
[data-theme="dark"] .btn-success__border {
    background: var(--bz-surface-2) !important;
    color: var(--bz-text) !important;
    border-color: var(--bz-border-2) !important;
}
[data-theme="dark"] .more_know.blue,
[data-theme="dark"] .more_know.add,
[data-theme="dark"] .op_ma {
    background: var(--bz-accent) !important;
    color: #fff !important;
    border-color: var(--bz-accent) !important;
}
[data-theme="dark"] .more_know:hover { background: var(--bz-surface-3) !important; color: var(--bz-text) !important; }
[data-theme="dark"] .more_know.blue:hover { background: var(--bz-accent-2) !important; color: #fff !important; }

/* ─── Specific legacy text colour map ────────────────────── */
[data-theme="dark"] [style*="color: #1c1c1c"],
[data-theme="dark"] [style*="color:#1c1c1c"],
[data-theme="dark"] [style*="color: #000"],
[data-theme="dark"] [style*="color:#000"],
[data-theme="dark"] [style*="color:#0f172a"] { color: var(--bz-text) !important; }

[data-theme="dark"] [style*="color:#6a7990"],
[data-theme="dark"] [style*="color: #6a7990"],
[data-theme="dark"] [style*="color:#8d9aaf"],
[data-theme="dark"] [style*="color: #8d9aaf"],
[data-theme="dark"] [style*="color:#566073"] { color: var(--bz-text-2) !important; }

/* Background overrides for inline-white blocks */
[data-theme="dark"] [style*="background: #fff"],
[data-theme="dark"] [style*="background:#fff"],
[data-theme="dark"] [style*="background-color: #fff"],
[data-theme="dark"] [style*="background-color:#fff"],
[data-theme="dark"] [style*="background: #ffffff"],
[data-theme="dark"] [style*="background:#ffffff"] {
    background-color: var(--bz-surface) !important;
}
[data-theme="dark"] [style*="background: #f8fafc"],
[data-theme="dark"] [style*="background:#f8fafc"],
[data-theme="dark"] [style*="background: #f1f5f9"],
[data-theme="dark"] [style*="background:#f1f5f9"],
[data-theme="dark"] [style*="background: #f8f9fa"],
[data-theme="dark"] [style*="background:#f8f9fa"] { background-color: var(--bz-surface-2) !important; }

/* Inline border colour overrides — most common legacy hairlines */
[data-theme="dark"] [style*="border: 1px solid #d9e3f3"],
[data-theme="dark"] [style*="border:1px solid #d9e3f3"],
[data-theme="dark"] [style*="border: 1px solid #e7ecf2"],
[data-theme="dark"] [style*="border:1px solid #e7ecf2"],
[data-theme="dark"] [style*="border: 1px solid #e5e7eb"],
[data-theme="dark"] [style*="border:1px solid #e5e7eb"],
[data-theme="dark"] [style*="border: 1px solid #eef2f7"],
[data-theme="dark"] [style*="border:1px solid #eef2f7"],
[data-theme="dark"] [style*="border: 1px solid #f1f3f5"],
[data-theme="dark"] [style*="border:1px solid #f1f3f5"],
[data-theme="dark"] [style*="border: 1px solid #e9ecef"],
[data-theme="dark"] [style*="border:1px solid #e9ecef"],
[data-theme="dark"] [style*="border: 1px solid #ced4da"],
[data-theme="dark"] [style*="border:1px solid #ced4da"],
[data-theme="dark"] [style*="border: 1px solid #cbd5e1"],
[data-theme="dark"] [style*="border:1px solid #cbd5e1"],
[data-theme="dark"] [style*="border: 1px solid #e2e8f0"],
[data-theme="dark"] [style*="border:1px solid #e2e8f0"] {
    border-color: var(--bz-border) !important;
}

/* ─── Categories sidebar / tree ──────────────────────────── */
[data-theme="dark"] .filtr_l, [data-theme="dark"] .filtr_r, [data-theme="dark"] .filter_l,
[data-theme="dark"] .left_filter, [data-theme="dark"] .filter_form,
[data-theme="dark"] .filter_block, [data-theme="dark"] .left_categories,
[data-theme="dark"] .ul_categs_li, [data-theme="dark"] .categs_l, [data-theme="dark"] .categs_l li a {
    background: var(--bz-surface) !important;
    color: var(--bz-text) !important;
    border-color: var(--bz-border) !important;
}

/* ─── Search & filter inputs ─────────────────────────────── */
[data-theme="dark"] .selectric, [data-theme="dark"] .selectric .label,
[data-theme="dark"] .selectric-items,
[data-theme="dark"] .selectric-items li {
    background: var(--bz-surface-2) !important;
    color: var(--bz-text) !important;
    border-color: var(--bz-border) !important;
}
[data-theme="dark"] .selectric .button:before { border-top-color: var(--bz-text-2) !important; }
[data-theme="dark"] .selectric-items li:hover { background: var(--bz-surface-3) !important; }

/* ─── Item view page ─────────────────────────────────────── */
[data-theme="dark"] .item_view_main, [data-theme="dark"] .item_view_left,
[data-theme="dark"] .item_view_right, [data-theme="dark"] .item_caractr,
[data-theme="dark"] .characteristics_main, [data-theme="dark"] .user_view,
[data-theme="dark"] .item-detail-card, [data-theme="dark"] .description_view {
    background: var(--bz-surface) !important;
    border-color: var(--bz-border) !important;
    color: var(--bz-text);
}

/* ─── Profile / cabinet pages ────────────────────────────── */
[data-theme="dark"] .cabinet, [data-theme="dark"] .c_cabinet,
[data-theme="dark"] .right_set, [data-theme="dark"] .tab_top_cabinet,
[data-theme="dark"] .score_main, [data-theme="dark"] .score_main_top {
    background: transparent !important;
    color: var(--bz-text) !important;
}
[data-theme="dark"] .tab_top_cabinet a {
    color: var(--bz-text-2) !important;
}
[data-theme="dark"] .tab_top_cabinet a.active,
[data-theme="dark"] .tab_top_cabinet a:hover { color: var(--bz-accent-2) !important; }

/* ─── Breadcrumb + nav links ─────────────────────────────── */
[data-theme="dark"] .my_nav .breadcrumb,
[data-theme="dark"] .breadcrumb { background: transparent !important; }
[data-theme="dark"] .my_nav a, [data-theme="dark"] .breadcrumb-item a { color: var(--bz-text-2); }
[data-theme="dark"] .my_nav .active, [data-theme="dark"] .breadcrumb-item.active { color: var(--bz-text); }

/* ─── Bg utility classes (Bootstrap) ─────────────────────── */
[data-theme="dark"] .bg-white, [data-theme="dark"] .bg-light {
    background-color: var(--bz-surface) !important;
    color: var(--bz-text);
}
[data-theme="dark"] .text-dark, [data-theme="dark"] .text-body { color: var(--bz-text) !important; }
[data-theme="dark"] .text-secondary { color: var(--bz-text-2) !important; }

/* ─── Tables (data-heavy admin / CRM views) ──────────────── */
[data-theme="dark"] .table, [data-theme="dark"] .table-striped > tbody > tr,
[data-theme="dark"] .table thead th, [data-theme="dark"] .table tbody td {
    color: var(--bz-text);
    border-color: var(--bz-border) !important;
}
[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) { background: rgba(255,255,255,0.03); }
[data-theme="dark"] .table-hover tbody tr:hover { background: var(--bz-surface-2) !important; }

/* ─── Pagination (Bootstrap built-in) ────────────────────── */
[data-theme="dark"] .page-item .page-link {
    background: var(--bz-surface) !important;
    color: var(--bz-text) !important;
    border-color: var(--bz-border) !important;
}
[data-theme="dark"] .page-item.active .page-link {
    background: var(--bz-accent) !important;
    color: #fff !important;
    border-color: var(--bz-accent) !important;
}
[data-theme="dark"] .page-item.disabled .page-link {
    background: var(--bz-bg) !important; color: var(--bz-text-3) !important;
}

/* ─── Item card stats footer + meta ──────────────────────── */
[data-theme="dark"] .description_oct,
[data-theme="dark"] .description_oct p { color: var(--bz-text-2) !important; }
[data-theme="dark"] .description_oct b { color: var(--bz-text) !important; }

/* ─── Empty-state cards ──────────────────────────────────── */
[data-theme="dark"] .bz-shops-empty {
    background: var(--bz-surface) !important;
    border-color: var(--bz-border-2) !important;
}
[data-theme="dark"] .bz-shops-empty h3 { color: var(--bz-text); }
[data-theme="dark"] .bz-shops-empty p { color: var(--bz-text-2); }

/* ─── Modals & fancybox ──────────────────────────────────── */
[data-theme="dark"] .fancybox-bg { background: rgba(0,0,0,0.78); }
[data-theme="dark"] .modal-content,
[data-theme="dark"] .fancybox-content,
[data-theme="dark"] .ui-dialog,
[data-theme="dark"] .swal2-modal {
    background: var(--bz-surface) !important;
    color: var(--bz-text) !important;
    border-color: var(--bz-border) !important;
}

/* ─── Code / pre tags ────────────────────────────────────── */
[data-theme="dark"] code, [data-theme="dark"] pre {
    background: var(--bz-surface-2) !important;
    color: var(--bz-warning) !important;
    border-color: var(--bz-border) !important;
}

/* ─── Misc edge cases ────────────────────────────────────── */
[data-theme="dark"] hr { border-top-color: var(--bz-border) !important; }
[data-theme="dark"] .divider, [data-theme="dark"] .separator { background: var(--bz-border) !important; }

/* Highlight rows in cabinet bulk select */
[data-theme="dark"] .bz-bulk-row.is-selected {
    background: rgba(59,130,246,0.10) !important;
    box-shadow: inset 0 0 0 2px var(--bz-accent) !important;
}

/* CRM sidebar soon-pills */
[data-theme="dark"] .cabinet_left ul .bz-soon-pill {
    background: var(--bz-surface-3) !important;
    color: var(--bz-text-2) !important;
}

/* Status pills (active / inactive / blocked) */
[data-theme="dark"] .bz-shop-status.ok  { background: rgba(34,197,94,0.18) !important; color: #4ade80 !important; }
[data-theme="dark"] .bz-shop-status.off { background: rgba(234,88,12,0.18)  !important; color: #fb923c !important; }

/* Form labels */
[data-theme="dark"] label, [data-theme="dark"] .form-label { color: var(--bz-text); }
[data-theme="dark"] .form-label small, [data-theme="dark"] label small { color: var(--bz-text-2) !important; }

/* Disabled state */
[data-theme="dark"] .disabled, [data-theme="dark"] [disabled],
[data-theme="dark"] .btn:disabled { opacity: 0.55; }

/* ─── Item view page (estate_*, estete_*, gr_product, etc.) ─── */
[data-theme="dark"] .estate,
[data-theme="dark"] .estate_main,
[data-theme="dark"] .estate_main_left,
[data-theme="dark"] .estate_main_right,
[data-theme="dark"] .estete_swiper,
[data-theme="dark"] .estete_swiper_left,
[data-theme="dark"] .estete_swiper_right,
[data-theme="dark"] .est_user,
[data-theme="dark"] .description_estete,
[data-theme="dark"] .gr_product,
[data-theme="dark"] .afert_block,
[data-theme="dark"] .item_address_class,
[data-theme="dark"] .item_map_view,
[data-theme="dark"] .top_item_comment,
[data-theme="dark"] .category_bod,
[data-theme="dark"] .category_bod_main {
    background: var(--bz-surface) !important;
    border-color: var(--bz-border) !important;
    color: var(--bz-text) !important;
}

[data-theme="dark"] .estate h1,
[data-theme="dark"] .estate_main h1,
[data-theme="dark"] .estate_main_left h1,
[data-theme="dark"] .description_estete h2,
[data-theme="dark"] .description_estete h3 { color: var(--bz-text) !important; }

[data-theme="dark"] .swip_op,
[data-theme="dark"] .swip_date_estate,
[data-theme="dark"] .description_estete p,
[data-theme="dark"] .description_estete span,
[data-theme="dark"] .est_user p,
[data-theme="dark"] .est_user span,
[data-theme="dark"] .ftr_copyright,
[data-theme="dark"] .info_cpy { color: var(--bz-text-2) !important; }

/* Characteristics list (key:value rows) */
[data-theme="dark"] .description_estete dl,
[data-theme="dark"] .description_estete dt,
[data-theme="dark"] .description_estete dd,
[data-theme="dark"] .description_estete li,
[data-theme="dark"] .gr_product li {
    color: var(--bz-text) !important;
    border-color: var(--bz-border) !important;
    background: transparent !important;
}
[data-theme="dark"] .description_estete dt,
[data-theme="dark"] .description_estete li:nth-child(odd) { color: var(--bz-text-2) !important; }

/* Map / location preview block */
[data-theme="dark"] .item_map_view, [data-theme="dark"] .map_address {
    background: var(--bz-surface) !important;
}
[data-theme="dark"] .item_address_class { color: var(--bz-text-2) !important; }

/* Bottom action toolbar (share, report, similar) */
[data-theme="dark"] .btn_est_right, [data-theme="dark"] .add_ads, [data-theme="dark"] .add_oby,
[data-theme="dark"] .all_ads_author {
    background: var(--bz-surface) !important;
    color: var(--bz-text) !important;
    border-color: var(--bz-border) !important;
}

/* Similar listings strip (last_prod_swiper) */
[data-theme="dark"] .last_prod_swiper { background: transparent !important; }

/* User info card (seller block) */
[data-theme="dark"] .est_user, [data-theme="dark"] .est_user .adr {
    background: var(--bz-surface) !important;
    border-color: var(--bz-border) !important;
    color: var(--bz-text);
}
[data-theme="dark"] .est_user .adr { color: var(--bz-text-2) !important; }
[data-theme="dark"] .est_user .blue_text { color: var(--bz-accent-2) !important; }

/* ============================================================
   Dark-mode v3 — sweeping section overrides for the home page
   + every other public surface. Legacy style.css sets explicit
   background: #fff on dozens of section classes that weren't
   covered by v1/v2 — list extracted by grepping the homepage
   for class names + cross-checking style.css for bg rules.
   ============================================================ */

/* Section-level surfaces (full-width strips on home / categories) */
[data-theme="dark"] section.property,
[data-theme="dark"] section.premium_ads_section,
[data-theme="dark"] section.last_ads,
[data-theme="dark"] section.new_collection_reclams,
[data-theme="dark"] section.shops_list_footer,
[data-theme="dark"] section.most_popular_brands,
[data-theme="dark"] section.phones,
[data-theme="dark"] section.marks,
[data-theme="dark"] section.cabinet,
[data-theme="dark"] section.magazin_section,
[data-theme="dark"] section.help_section,
[data-theme="dark"] section.blog_section {
    background: var(--bz-bg) !important;
    color: var(--bz-text) !important;
}

/* Home hero / banner area */
/* NOTE: .capital_right is a featured-image card — its <img> sits
   at z-index:-1 inside the same box, so painting a surface on the
   wrapper hides the image. Excluded from the bg rule below. */
[data-theme="dark"] .capital_left,
[data-theme="dark"] .capital_left_top,
[data-theme="dark"] .capital_left_bottom,
[data-theme="dark"] .capital_right_h,
[data-theme="dark"] .a_capital_left_top_h,
[data-theme="dark"] .inner_a,
[data-theme="dark"] .inner_new_a_h {
    background: var(--bz-surface) !important;
    color: var(--bz-text) !important;
    border-color: var(--bz-border) !important;
}

/* Card-list rails (premium swiper, latest, lasts_main, etc.) */
[data-theme="dark"] .lasts_main,
[data-theme="dark"] .premium_swiper,
[data-theme="dark"] .last_prod_swiper,
[data-theme="dark"] .gr_product {
    background: transparent !important;
}

/* Hero left-side card titles, mob header etc. */
[data-theme="dark"] .mob_header,
[data-theme="dark"] .hr_title,
[data-theme="dark"] .pre_top,
[data-theme="dark"] .pre_btns {
    background: var(--bz-surface) !important;
    color: var(--bz-text) !important;
    border-color: var(--bz-border) !important;
}

/* Region/location dropdown + categories popup */
[data-theme="dark"] .location_drop_body,
[data-theme="dark"] .dropdown_popup_body,
[data-theme="dark"] .select_region,
[data-theme="dark"] form.search_form_header,
[data-theme="dark"] .all_categories_btn,
[data-theme="dark"] .category_bod,
[data-theme="dark"] .category_bod_main {
    background: var(--bz-surface) !important;
    color: var(--bz-text) !important;
    border-color: var(--bz-border) !important;
}

/* category_hovered overlay on body */
[data-theme="dark"] body.category_hovered .category_bod {
    background: var(--bz-surface) !important;
}

/* Form / search inputs in header */
[data-theme="dark"] .search_form_header input,
[data-theme="dark"] .form_ftr input,
[data-theme="dark"] .form input { background: var(--bz-surface-2) !important; color: var(--bz-text) !important; border-color: var(--bz-border-2) !important; }

/* Login / register button */
[data-theme="dark"] .enter_site,
[data-theme="dark"] .language { color: var(--bz-text) !important; }

/* Footer dark-mode tightening */
[data-theme="dark"] .form_ftr, [data-theme="dark"] .ftr_ul, [data-theme="dark"] .ftr_ul_h,
[data-theme="dark"] .pay_cpy, [data-theme="dark"] .info_cpy, [data-theme="dark"] .phone_cpy,
[data-theme="dark"] .ftr_bottom_under {
    background: var(--bz-surface) !important;
    color: var(--bz-text-2) !important;
    border-color: var(--bz-border) !important;
}
[data-theme="dark"] .ftr_ul a, [data-theme="dark"] .logo_ftr a { color: var(--bz-text) !important; }
[data-theme="dark"] .ftr_copyright, [data-theme="dark"] .ftr_bottom_under p { color: var(--bz-text-2) !important; }

/* Catch-all: any block with EXPLICIT background: #fff via style.css */
[data-theme="dark"] .container, [data-theme="dark"] main {
    background: transparent !important;
}

/* Header dropdowns / popovers */
[data-theme="dark"] .popover, [data-theme="dark"] .tooltip-inner {
    background: var(--bz-surface) !important;
    color: var(--bz-text) !important;
    border-color: var(--bz-border) !important;
}

/* Premium service badge ribbons on cards — keep coloured but darken bg base */
[data-theme="dark"] .premium { box-shadow: 0 2px 6px rgba(0,0,0,.35) !important; }

/* "favoruites_product" heart button on cards — needs visible chrome */
[data-theme="dark"] .favoruites_product,
[data-theme="dark"] .favoruites_product_no_active {
    background-color: rgba(15,23,42,0.72) !important;
}

/* Theme-toggle on dark surfaces */
[data-theme="dark"] .bz-theme-toggle { color: var(--bz-text); }
[data-theme="dark"] .bz-theme-toggle svg { stroke: var(--bz-text); fill: currentColor; }

/* ============================================================
   Dark-mode v4 — exhaustive sweep of every .* selector in
   style.css that sets background: #fff. Pulled from a grep
   so we don't have to play whack-a-mole one block at a time.
   ============================================================ */
[data-theme="dark"] .ad_photos_main label,
[data-theme="dark"] .bren_mag_left,
[data-theme="dark"] .btm_cl a.cans,
[data-theme="dark"] .btn_est_right,
[data-theme="dark"] .chat_main,
[data-theme="dark"] .chat_right_item.lefted p,
[data-theme="dark"] .cl .clones,
[data-theme="dark"] .description_estete,
[data-theme="dark"] .development_item,
[data-theme="dark"] .estate_main,
[data-theme="dark"] .estate_main .comments,
[data-theme="dark"] .estete_swiper,
[data-theme="dark"] .est_user,
[data-theme="dark"] .help_tab,
[data-theme="dark"] .in_data label,
[data-theme="dark"] .likes a,
[data-theme="dark"] .niked .form-control,
[data-theme="dark"] .online_user,
[data-theme="dark"] .place_main,
[data-theme="dark"] .place_tab a,
[data-theme="dark"] .pre_file_right label,
[data-theme="dark"] .qled,
[data-theme="dark"] .radio_mag label,
[data-theme="dark"] .reg_comment,
[data-theme="dark"] .score_main,
[data-theme="dark"] .self_kom textarea,
[data-theme="dark"] .serv_ariel,
[data-theme="dark"] .services_main,
[data-theme="dark"] .setting_c,
[data-theme="dark"] .success_none_form,
[data-theme="dark"] .table_estete,
[data-theme="dark"] .tab_top_cabinet,
[data-theme="dark"] .tra_link,
[data-theme="dark"] .sub-menu a,
[data-theme="dark"] .sub_filter a,
[data-theme="dark"] .main-menu > li > a {
    background: var(--bz-surface) !important;
    color: var(--bz-text) !important;
    border-color: var(--bz-border) !important;
}

/* Brutal catch-all for any direct child of .container that style.css
   explicitly painted white. Targets common wrapper patterns without
   touching .container itself (already transparent above). */
[data-theme="dark"] .container > section,
[data-theme="dark"] .container > .row,
[data-theme="dark"] .container > div { background: transparent !important; }

/* And the most common cards-with-white-bg fallback — body white wrappers */
[data-theme="dark"] [class"_main"]:not(.btn):not(.swiper-slide):not(.product_text),
[data-theme="dark"] [class"_body"]:not(.btn) {
    background: var(--bz-surface) !important;
    color: var(--bz-text);
    border-color: var(--bz-border) !important;
}

/* Active product card text needs full contrast */
[data-theme="dark"] .product_text * { color: inherit; }
[data-theme="dark"] .product_text { color: var(--bz-text); }

/* Drop white bg on any inline-styled DIV without an image */
[data-theme="dark"] div[style*="background-color: white"],
[data-theme="dark"] div[style*="background:white"],
[data-theme="dark"] div[style*="background: white"] { background-color: var(--bz-surface) !important; }

/* ============================================================
   v5: CRITICAL FIX — v2 overwrote the original v1 rules; the
   <header>, .hdr_top, .hdr_bottom selectors got lost. Re-add
   them now with html-prefixed selectors so specificity wins
   against any legacy 'header { background:#fff }' rule.
   ============================================================ */
html[data-theme="dark"] header,
html[data-theme="dark"] .hdr_top,
html[data-theme="dark"] .hdr_bottom,
html[data-theme="dark"] .hdr_bottom_main,
html[data-theme="dark"] .hdr_top_main,
html[data-theme="dark"] .hdr_top_left,
html[data-theme="dark"] .hdr_top_right,
html[data-theme="dark"] .hdr_bottom_main_left,
html[data-theme="dark"] .hdr_bottom_main_right,
html[data-theme="dark"] .hdr_bottom_main_center {
    background-color: var(--bz-surface) !important;
    color: var(--bz-text) !important;
    border-color: var(--bz-border) !important;
}

html[data-theme="dark"] footer,
html[data-theme="dark"] footer.help_footer,
html[data-theme="dark"] #footerId {
    background-color: var(--bz-surface) !important;
    color: var(--bz-text) !important;
    border-color: var(--bz-border) !important;
}

/* Footer subscribe area + columns */
html[data-theme="dark"] .wortern,
html[data-theme="dark"] .form_ftr,
html[data-theme="dark"] .ftr_ul,
html[data-theme="dark"] .ftr_ul_h3,
html[data-theme="dark"] .ftr_ul a,
html[data-theme="dark"] .ftr_bottom_under,
html[data-theme="dark"] .ftr_copyright,
html[data-theme="dark"] .logo_ftr,
html[data-theme="dark"] .phone_cpy,
html[data-theme="dark"] .info_cpy,
html[data-theme="dark"] .pay_cpy {
    background-color: transparent !important;
    color: var(--bz-text) !important;
}
html[data-theme="dark"] .ftr_ul_h3 { color: var(--bz-text) !important; font-weight: 700; }
html[data-theme="dark"] .ftr_ul a, html[data-theme="dark"] .ftr_copyright span,
html[data-theme="dark"] .ftr_bottom_under span, html[data-theme="dark"] .ftr_bottom_under p { color: var(--bz-text-2) !important; }
html[data-theme="dark"] .ftr_ul a:hover { color: var(--bz-accent-2) !important; }

/* Header nav text */
html[data-theme="dark"] .hdr_top_right a,
html[data-theme="dark"] .hdr_top_right a span,
html[data-theme="dark"] .hdr_top_left,
html[data-theme="dark"] .hdr_top_left a,
html[data-theme="dark"] .hdr_top_left span,
html[data-theme="dark"] .language a,
html[data-theme="dark"] .select_region span { color: var(--bz-text) !important; }

/* Header search bar / inputs */
html[data-theme="dark"] .hdr_bottom .form,
html[data-theme="dark"] .hdr_bottom form,
html[data-theme="dark"] .hdr_bottom input,
html[data-theme="dark"] .search_form_header {
    background-color: var(--bz-surface-2) !important;
    color: var(--bz-text) !important;
    border-color: var(--bz-border-2) !important;
}

/* The Bisyor logo + Add ad button row */
html[data-theme="dark"] .logo, html[data-theme="dark"] .logo a { color: var(--bz-text) !important; }

/* Add-ad green CTA stays green; just verify chrome */
html[data-theme="dark"] .add_ads, html[data-theme="dark"] .add_oby { color: #fff !important; }

/* ============================================================
   v6: contact-author block + theme-toggle icon visibility fix
   ============================================================ */

/* Contact-author / message form block on item-view page.
   Classes used by contact.blade.php: .robita_estete (wrapper),
   .vacant_form.niked (form), .top_item_comment (seller chip). */
html[data-theme="dark"] .robita_estete,
html[data-theme="dark"] .vacant_form,
html[data-theme="dark"] .vacant_form.niked,
html[data-theme="dark"] .top_item_comment,
html[data-theme="dark"] .robita_estete .form-group,
html[data-theme="dark"] .robita_estete .col-lg-8,
html[data-theme="dark"] .robita_estete .col-lg-4 {
    background-color: var(--bz-surface) !important;
    color: var(--bz-text) !important;
    border-color: var(--bz-border) !important;
}
html[data-theme="dark"] .robita_estete h5,
html[data-theme="dark"] .robita_estete h6 { color: var(--bz-text) !important; }
html[data-theme="dark"] .top_item_comment .text h5,
html[data-theme="dark"] .top_item_comment .text .on_of,
html[data-theme="dark"] .top_item_comment .text .onlines { color: var(--bz-text-2) !important; }
html[data-theme="dark"] .vacant_form textarea,
html[data-theme="dark"] .vacant_form input {
    background-color: var(--bz-surface-2) !important;
    color: var(--bz-text) !important;
    border-color: var(--bz-border-2) !important;
}

/* ─── Theme-toggle icon visibility (lost in v2 overwrite) ──── */
.bz-theme-toggle { position: relative; }
.bz-theme-toggle .bz-icon-moon { display: none !important; }
.bz-theme-toggle .bz-icon-sun  { display: block !important; }
html[data-theme="dark"] .bz-theme-toggle .bz-icon-sun  { display: none  !important; }
html[data-theme="dark"] .bz-theme-toggle .bz-icon-moon { display: block !important; }

/* Make the toggle button less aggressive — soft pill shape, transparent bg */
.bz-theme-toggle {
    width: 36px; height: 36px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid transparent;
    background: transparent;
    color: var(--bz-text-2, #6a7990);
    transition: background .15s, color .15s, border-color .15s;
}
.bz-theme-toggle:hover { background: rgba(15,23,42,.06); color: #0f172a; }
html[data-theme="dark"] .bz-theme-toggle { color: var(--bz-text-2); border-color: transparent; }
html[data-theme="dark"] .bz-theme-toggle:hover {
    background: rgba(148,163,184,.12);
    color: var(--bz-text);
    border-color: var(--bz-border);
}
.bz-theme-toggle svg { width: 18px; height: 18px; }

/* ============================================================
   v7: Listing-card polish — clearer borders, surface contrast,
   text colour hierarchy. Cards were blending into the page bg
   because their border-color used the same hex as the bg.
   ============================================================ */
html[data-theme="dark"] .product_mains {
    background: var(--bz-surface) !important;
    border: 1px solid var(--bz-border) !important;
    border-radius: 10px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
html[data-theme="dark"] .product_mains:hover {
    border-color: var(--bz-border-2) !important;
    box-shadow: 0 6px 18px rgba(0,0,0,.35);
}

/* Card body padding — uses background-inherit, not white */
html[data-theme="dark"] .product_mains .product_text,
html[data-theme="dark"] .product_mains .product_item {
    background: transparent !important;
    color: var(--bz-text) !important;
    border: 0 !important;
}

/* Category chip (cyan/blue label above title) */
html[data-theme="dark"] .product_text > span,
html[data-theme="dark"] .product_mains .product_text span:first-child {
    color: var(--bz-accent-2) !important;
}

/* Title — strong white */
html[data-theme="dark"] .product_text_h4,
html[data-theme="dark"] .product_text h4,
html[data-theme="dark"] .product_text h4 a {
    color: var(--bz-text) !important;
}

/* Price */
html[data-theme="dark"] .price_product,
html[data-theme="dark"] .price_product b { color: var(--bz-text) !important; font-weight: 700; }
html[data-theme="dark"] .price_product i { color: var(--bz-text-3) !important; }

/* Negotiation / additional info text */
html[data-theme="dark"] .negotiat, html[data-theme="dark"] p.negotiat { color: var(--bz-text-2) !important; }

/* Address row (location with pin icon) */
html[data-theme="dark"] .address_product { color: var(--bz-text-2) !important; }
html[data-theme="dark"] .address_product svg path, html[data-theme="dark"] .address_product svg { opacity: .65; fill: var(--bz-text-2) !important; }

/* Favorite heart button on top-right of cards */
html[data-theme="dark"] .favoruites_product,
html[data-theme="dark"] .favoruites_product_no_active {
    background-color: rgba(15,23,42,.55) !important;
    backdrop-filter: blur(4px);
}
html[data-theme="dark"] .favoruites_product:hover { background-color: rgba(30,41,59,.85) !important; }

/* Service ribbons (Премиум / Закрепление / Срочно) — preserve their
   own brand colours, but add a subtle shadow so they pop on dark cards. */
html[data-theme="dark"] .premium,
html[data-theme="dark"] .fastening,
html[data-theme="dark"] .ups_pre {
    box-shadow: 0 2px 8px rgba(0,0,0,.45) !important;
}

/* ============================================================
   v8: Premium-marked cards override — the 'mark' service stores
   #ffffff as its colour value, which the blade emits as an inline
   style="background-color: #ffffff" on .product_text. Inline
   styles outrank normal CSS rules, so we use attribute selectors
   + !important to force a dark surface even when the inline says
   white. Without this, every premium-marked listing in the feed
   shows a white text block on a dark page.
   ============================================================ */
html[data-theme="dark"] .product_text[style],
html[data-theme="dark"] .product_mains .product_text[style],
html[data-theme="dark"] .product_text[style*="background-color"],
html[data-theme="dark"] .product_text[style*="background:"] {
    background-color: var(--bz-surface) !important;
    background-image: none !important;
}

/* ============================================================
   v9: SEO text block at the bottom of category/gallery/list
   pages — wrapped in <section class="rubrica"> which had a
   hardcoded background: #fff in style.css line 7297. Plus
   the .rubrica_top divider had a hardcoded #d9e3f3 border.
   ============================================================ */
html[data-theme="dark"] section.rubrica,
html[data-theme="dark"] .rubrica {
    background-color: var(--bz-surface) !important;
    color: var(--bz-text) !important;
}
html[data-theme="dark"] section.rubrica .rubrica_top,
html[data-theme="dark"] .rubrica .rubrica_top {
    border-bottom-color: var(--bz-border) !important;
}
html[data-theme="dark"] section.rubrica h1,
html[data-theme="dark"] section.rubrica h2,
html[data-theme="dark"] section.rubrica h3,
html[data-theme="dark"] section.rubrica h4,
html[data-theme="dark"] section.rubrica p,
html[data-theme="dark"] section.rubrica li,
html[data-theme="dark"] section.rubrica strong,
html[data-theme="dark"] section.rubrica ul li a span,
html[data-theme="dark"] section.rubrica .no-ul p,
html[data-theme="dark"] section.rubrica .no-ul strong { color: var(--bz-text) !important; }
html[data-theme="dark"] section.rubrica .no-ul, html[data-theme="dark"] section.rubrica .container.no-ul { background: transparent !important; }
html[data-theme="dark"] section.rubrica a { color: var(--bz-accent-2) !important; }
html[data-theme="dark"] section.rubrica a:hover { color: var(--bz-accent) !important; }
html[data-theme="dark"] .rubrica_top a { color: var(--bz-text-2) !important; }
html[data-theme="dark"] .rubrica_top a:hover { color: var(--bz-text) !important; }

/* ============================================================
   v10: Three open issues at once —
   1) AI listing-create wizard (/profile/obyavlenie/create)
   2) Filter dropdown (Цена / Не важно / Только с фото etc)
   3) Profile items-list cards still showing legacy white bg
   ============================================================ */

/* ─── 1) AI wizard (.bz-ai-*) ─────────────────────────────── */
html[data-theme="dark"] .bz-ai-wizard {
    background: var(--bz-surface) !important;
    color: var(--bz-text) !important;
    box-shadow: 0 4px 18px -4px rgba(0,0,0,.45) !important;
}
html[data-theme="dark"] .bz-ai-intake h1,
html[data-theme="dark"] .bz-ai-photo-text { color: var(--bz-text) !important; }
html[data-theme="dark"] .bz-ai-photo-hint { color: var(--bz-text-2) !important; }
html[data-theme="dark"] .bz-ai-photo-uploader {
    background: var(--bz-surface-2) !important;
    border-color: var(--bz-border-2) !important;
}
html[data-theme="dark"] .bz-ai-photo-uploader:hover {
    border-color: var(--bz-accent) !important;
    background: rgba(99,102,241,.10) !important;
}
html[data-theme="dark"] .bz-ai-progress-num {
    background: var(--bz-surface-3) !important;
    color: var(--bz-text-2) !important;
}
html[data-theme="dark"] .bz-ai-progress-step.is-active .bz-ai-progress-num { background: var(--bz-accent) !important; color: #fff !important; }
html[data-theme="dark"] .bz-ai-progress-step.is-done .bz-ai-progress-num { background: var(--bz-success) !important; color: #fff !important; }
html[data-theme="dark"] .bz-ai-progress-lbl { color: var(--bz-text-2) !important; }
html[data-theme="dark"] .bz-ai-progress-step.is-active .bz-ai-progress-lbl { color: var(--bz-text) !important; }
html[data-theme="dark"] .bz-ai-progress-line { background: var(--bz-border) !important; }
html[data-theme="dark"] .bz-ai-thumb { background: var(--bz-surface-2) !important; }

/* AI wizard text input ("Что продаёте?") */
html[data-theme="dark"] .bz-ai-input,
html[data-theme="dark"] .bz-ai-intake input,
html[data-theme="dark"] .bz-ai-intake textarea,
html[data-theme="dark"] .bz-ai-wizard input,
html[data-theme="dark"] .bz-ai-wizard textarea {
    background: var(--bz-surface-2) !important;
    color: var(--bz-text) !important;
    border-color: var(--bz-border-2) !important;
}

/* AI wizard buttons */
html[data-theme="dark"] .bz-ai-cta, html[data-theme="dark"] .bz-ai-btn { color: #fff !important; }
html[data-theme="dark"] .bz-ai-link, html[data-theme="dark"] .bz-ai-secondary { color: var(--bz-accent-2) !important; }

/* ─── 2) Search & filter form ─────────────────────────────── */
/* Filter form blends with the page; only popups/dropdowns keep a surface. */
html[data-theme="dark"] .filtered_recket,
html[data-theme="dark"] .sorted_recket,
html[data-theme="dark"] .filter_rubrica,
html[data-theme="dark"] .agre_rocket,
html[data-theme="dark"] .agree_ser,
html[data-theme="dark"] .sort,
html[data-theme="dark"] .filter-items,
html[data-theme="dark"] .filter-button,
html[data-theme="dark"] .niked,
html[data-theme="dark"] .niked > div {
    background-color: transparent !important;
    color: var(--bz-text) !important;
    border-color: transparent !important;
    box-shadow: none !important;
}
/* Trigger is transparent so the "Самые новые" link doesnt
   look like a chip; only the popup body is a surface card. */
html[data-theme="dark"] .dropdown_popup {
    background-color: transparent !important;
    color: var(--bz-text) !important;
}
html[data-theme="dark"] .dropdown_popup_body {
    background-color: var(--bz-surface) !important;
    color: var(--bz-text) !important;
    border-color: var(--bz-border) !important;
}
html[data-theme="dark"] .filtered_recket label,
html[data-theme="dark"] .filtered_recket .sort > span,
html[data-theme="dark"] .filtered_recket .sort > a,
html[data-theme="dark"] .agree_ser label,
html[data-theme="dark"] .agree_ser span { color: var(--bz-text) !important; }
html[data-theme="dark"] .filtered_recket input,
html[data-theme="dark"] .filtered_recket select,
html[data-theme="dark"] .sort input, html[data-theme="dark"] .sort select {
    background: var(--bz-surface-2) !important;
    color: var(--bz-text) !important;
    border-color: var(--bz-border-2) !important;
}

/* ─── 3) Profile items-list cards — they use "product_horizontal oct_blocks"
       which I had earlier styled but apparently still inherits a white bg.
       Force surface bg with the most specific possible selector. ─────── */
html[data-theme="dark"] .product_mains.product_horizontal,
html[data-theme="dark"] .product_mains.product_horizontal.oct_blocks,
html[data-theme="dark"] .product_mains.product_horizontal .product_text,
html[data-theme="dark"] .product_mains.product_horizontal.oct_blocks .product_text {
    background: var(--bz-surface) !important;
    color: var(--bz-text) !important;
    border-color: var(--bz-border) !important;
}
html[data-theme="dark"] .product_horizontal h4,
html[data-theme="dark"] .product_horizontal h4 a,
html[data-theme="dark"] .product_horizontal .title_oct h4,
html[data-theme="dark"] .product_horizontal .title_oct h4 a { color: var(--bz-text) !important; }
html[data-theme="dark"] .product_horizontal .tops_oct span,
html[data-theme="dark"] .product_horizontal .tops_oct b,
html[data-theme="dark"] .product_horizontal .description_oct p,
html[data-theme="dark"] .product_horizontal .description_oct b,
html[data-theme="dark"] .bz-cat-chip,
html[data-theme="dark"] .bz-pub-date { color: var(--bz-text-2) !important; }
html[data-theme="dark"] .product_horizontal .bz-cat-chip { background: rgba(59,130,246,.18) !important; color: var(--bz-accent-2) !important; }
html[data-theme="dark"] .product_horizontal .bz-btn-ghost {
    background: var(--bz-surface-2) !important;
    color: var(--bz-text) !important;
    border-color: var(--bz-border) !important;
}
html[data-theme="dark"] .product_horizontal .bz-btn-ghost:hover {
    background: var(--bz-surface) !important;
    color: var(--bz-accent-2) !important;
    border-color: var(--bz-accent) !important;
}
/* letter2.svg is a black PNG-style icon — invert it for dark bg */
html[data-theme="dark"] .product_horizontal .bz-btn-ghost img[src*="letter2"],
html[data-theme="dark"] .bz-btn-ghost img[alt="letter2"] { filter: invert(.9) brightness(1.4); }
html[data-theme="dark"] .product_horizontal .bz-btn-primary {
    background: var(--bz-accent) !important;
    color: #fff !important;
    border-color: var(--bz-accent) !important;
}

/* Premium-paid items border match — use the same border as regular cards
   (avoid the gold/yellow inline border the premium service applies). */
html[data-theme="dark"] .product_mains.product_horizontal[style*="border"],
html[data-theme="dark"] .product_mains[style*="border"] {
    border: 1px solid var(--bz-border) !important;
}

/* Profile cabinet wrapper page bg */
html[data-theme="dark"] .cabinet, html[data-theme="dark"] section.cabinet,
html[data-theme="dark"] .c_cabinet { background: transparent !important; }
html[data-theme="dark"] .cabinet .my_nav a { color: var(--bz-text-2) !important; }
html[data-theme="dark"] .cabinet .my_nav .breadcrumb-item.active { color: var(--bz-text) !important; }

/* Tab strip on profile items-list (Активные / На проверке / Неактивные / ...) */
html[data-theme="dark"] .tab_top_cabinet,
html[data-theme="dark"] .nav.tab_top_cabinet,
html[data-theme="dark"] .tab_top_cabinet .nav-link {
    background: transparent !important;
    color: var(--bz-text-2) !important;
    border-color: var(--bz-border) !important;
}
html[data-theme="dark"] .tab_top_cabinet .nav-link.active,
html[data-theme="dark"] .tab_top_cabinet a.active { color: var(--bz-accent-2) !important; border-bottom-color: var(--bz-accent) !important; }

/* Search filter row above the list */
html[data-theme="dark"] .score_main_top, html[data-theme="dark"] .right_set,
html[data-theme="dark"] .form-inline, html[data-theme="dark"] .input-group {
    background: var(--bz-surface) !important;
    color: var(--bz-text) !important;
    border-color: var(--bz-border) !important;
}

/* ============================================================
   v11: Sidebar + static pages (About / Vacancy / Contact /
   Terms / Advertising / etc). All these use .vacant_form.niked
   or section.contact_sec with white bg via style.css.
   ============================================================ */

/* ─── Profile sidebar — comprehensive ─────────────────────── */
html[data-theme="dark"] .cabinet_left {
    background: var(--bz-surface) !important;
    border-color: var(--bz-border) !important;
    color: var(--bz-text) !important;
    border-radius: 10px;
}
html[data-theme="dark"] .cabinet_left .top_li {
    background: transparent !important;
    border-bottom: 1px solid var(--bz-border) !important;
}
html[data-theme="dark"] .cabinet_left .top_li a,
html[data-theme="dark"] .cabinet_left .top_li p,
html[data-theme="dark"] .cabinet_left .top_li .user-online-status,
html[data-theme="dark"] .cabinet_left .top_li small { color: var(--bz-text) !important; }
html[data-theme="dark"] .cabinet_left .top_li small { color: var(--bz-text-2) !important; }

html[data-theme="dark"] .cabinet_left ul li a,
html[data-theme="dark"] .cabinet_left ul li a span {
    color: var(--bz-text) !important;
}
html[data-theme="dark"] .cabinet_left ul li a:hover {
    background: var(--bz-surface-2) !important;
    color: var(--bz-accent-2) !important;
}
html[data-theme="dark"] .cabinet_left ul li a:hover span { color: var(--bz-accent-2) !important; }
html[data-theme="dark"] .cabinet_left ul li a.active,
html[data-theme="dark"] .cabinet_left ul li a.active span {
    color: var(--bz-accent-2) !important;
    background: rgba(59,130,246,.12) !important;
}
html[data-theme="dark"] .cabinet_left ul li a svg,
html[data-theme="dark"] .cabinet_left ul li a svg path,
html[data-theme="dark"] .cabinet_left ul li a svg g path { fill: var(--bz-text-2) !important; }
html[data-theme="dark"] .cabinet_left ul li a.active svg,
html[data-theme="dark"] .cabinet_left ul li a.active svg path,
html[data-theme="dark"] .cabinet_left ul li a.active svg g path,
html[data-theme="dark"] .cabinet_left ul li a:hover svg path,
html[data-theme="dark"] .cabinet_left ul li a:hover svg g path { fill: var(--bz-accent) !important; }

/* Sidebar dividers */
html[data-theme="dark"] .cabinet_left ul .hrt {
    background: var(--bz-border) !important;
    margin: 8px 14px;
}

/* Section labels (ОБЪЯВЛЕНИЯ / ИЗБРАННЫЕ / BISYOR PRO / СЧЕТ / НАСТРОЙКИ) */
html[data-theme="dark"] .cabinet_left ul .bz-section-label {
    color: var(--bz-text-3) !important;
    background: transparent !important;
}

/* Badges next to sidebar items (PRO, view-balance count) */
html[data-theme="dark"] .cabinet_left ul li a span[style*="background"] {
    background: var(--bz-accent) !important;
    color: #fff !important;
}

/* Avatar online dot */
html[data-theme="dark"] .cabinet_left .top_li a.user-online-status:after { box-shadow: 0 0 0 2px var(--bz-surface) !important; }

/* ─── Static pages (about, contact, vacancy, terms, advertising) ── */
html[data-theme="dark"] section.contact_sec,
html[data-theme="dark"] section.servives_sec,
html[data-theme="dark"] section.services_sec,
html[data-theme="dark"] section.help_section,
html[data-theme="dark"] section.terms_section,
html[data-theme="dark"] section.advert_section { background: var(--bz-bg) !important; }

html[data-theme="dark"] .vacant_form,
html[data-theme="dark"] .vacant_form.niked,
html[data-theme="dark"] form.vacant_form,
html[data-theme="dark"] form.vacant_form.niked,
html[data-theme="dark"] .niked,
html[data-theme="dark"] .services_main,
html[data-theme="dark"] .terms_main,
html[data-theme="dark"] .help_main,
html[data-theme="dark"] .advertising_main {
    background-color: var(--bz-surface) !important;
    color: var(--bz-text) !important;
    border-color: var(--bz-border) !important;
}
html[data-theme="dark"] .vacant_form h1,
html[data-theme="dark"] .vacant_form h2,
html[data-theme="dark"] .vacant_form h3,
html[data-theme="dark"] .vacant_form h4,
html[data-theme="dark"] .vacant_form p,
html[data-theme="dark"] .vacant_form ul li,
html[data-theme="dark"] .vacant_form strong,
html[data-theme="dark"] .vacant_form b,
html[data-theme="dark"] .services_main h1,
html[data-theme="dark"] .services_main h2,
html[data-theme="dark"] .services_main p,
html[data-theme="dark"] .terms_main *,
html[data-theme="dark"] .help_main * { color: var(--bz-text) !important; }

html[data-theme="dark"] .vacant_form small,
html[data-theme="dark"] .vacant_form small p,
html[data-theme="dark"] .vacant_form .date,
html[data-theme="dark"] .vacant_form .muted { color: var(--bz-text-2) !important; }

html[data-theme="dark"] .vacant_form a,
html[data-theme="dark"] .services_main a,
html[data-theme="dark"] .terms_main a { color: var(--bz-accent-2) !important; }
html[data-theme="dark"] .vacant_form a:hover { color: var(--bz-accent) !important; }

/* ============================================================
   v12: Help center (/help, /help/{slug}) — own dedicated
   classes (.helping, .helping_header, .help_tab*, .tab-content
   etc.) that style.css paints white. Add overrides.
   ============================================================ */
html[data-theme="dark"] section.helping,
html[data-theme="dark"] .helping,
html[data-theme="dark"] .helping_header,
html[data-theme="dark"] .help_center,
html[data-theme="dark"] .help_footer,
html[data-theme="dark"] .help_tab,
html[data-theme="dark"] .help_tab_left,
html[data-theme="dark"] .tab_bottom_help,
html[data-theme="dark"] .tel_help,
html[data-theme="dark"] .help_lang_switch {
    background-color: var(--bz-surface) !important;
    color: var(--bz-text) !important;
    border-color: var(--bz-border) !important;
}

html[data-theme="dark"] .helping h1,
html[data-theme="dark"] .helping h2,
html[data-theme="dark"] .helping h3,
html[data-theme="dark"] .helping h4,
html[data-theme="dark"] .helping_header h1,
html[data-theme="dark"] .help_tab h3, html[data-theme="dark"] .help_tab h4,
html[data-theme="dark"] .help_center h1 { color: var(--bz-text) !important; }
html[data-theme="dark"] .helping p,
html[data-theme="dark"] .help_tab p,
html[data-theme="dark"] .tab-content p,
html[data-theme="dark"] .tab-pane p,
html[data-theme="dark"] .helping small { color: var(--bz-text) !important; }
html[data-theme="dark"] .helping .small,
html[data-theme="dark"] .helping .muted,
html[data-theme="dark"] .helping .text-muted { color: var(--bz-text-2) !important; }

html[data-theme="dark"] .helping a,
html[data-theme="dark"] .help_tab a,
html[data-theme="dark"] .tab-content a { color: var(--bz-accent-2) !important; }
html[data-theme="dark"] .helping a:hover { color: var(--bz-accent) !important; }

/* Tab navigation (categories on left) */
html[data-theme="dark"] .help_tab_left ul li a,
html[data-theme="dark"] .nav-tabs .nav-link {
    color: var(--bz-text-2) !important;
    background: transparent !important;
    border-color: var(--bz-border) !important;
}
html[data-theme="dark"] .help_tab_left ul li a.active,
html[data-theme="dark"] .help_tab_left ul li a:hover,
html[data-theme="dark"] .nav-tabs .nav-link.active {
    color: var(--bz-accent-2) !important;
    background: var(--bz-surface-2) !important;
    border-color: var(--bz-border) !important;
}

/* Right content panel */
html[data-theme="dark"] .tab-content,
html[data-theme="dark"] .tab-pane {
    background: var(--bz-surface) !important;
    color: var(--bz-text) !important;
}

/* Search input in helping_header */
html[data-theme="dark"] .helping_header .search_form_header,
html[data-theme="dark"] .helping_header form.search_form_header,
html[data-theme="dark"] .helping_header input {
    background: var(--bz-surface-2) !important;
    color: var(--bz-text) !important;
    border-color: var(--bz-border-2) !important;
}

/* "Useful / Not useful" voting + similar UI in single help article */
html[data-theme="dark"] .helping .usefull,
html[data-theme="dark"] .helping .usefull a,
html[data-theme="dark"] .helping .like,
html[data-theme="dark"] .helping .dislike {
    background: var(--bz-surface-2) !important;
    color: var(--bz-text) !important;
    border-color: var(--bz-border-2) !important;
}

/* Phone-help block at bottom of help page */
html[data-theme="dark"] .tel_help, html[data-theme="dark"] .tel_help * { color: var(--bz-text) !important; }
html[data-theme="dark"] .tel_help a, html[data-theme="dark"] .tel_help b { color: var(--bz-accent-2) !important; }

/* ============================================================
   v13: Shops list cards (/shops/list) — .bz-shop-card. They
   inherit a hardcoded background:#fff from pagination_list.blade
   inline <style>. Override with html[data-theme="dark"] prefix.
   ============================================================ */
html[data-theme="dark"] .bz-shops-grid { background: transparent !important; }
html[data-theme="dark"] .bz-shop-card {
    background: var(--bz-surface) !important;
    border-color: var(--bz-border) !important;
    color: var(--bz-text) !important;
}
html[data-theme="dark"] .bz-shop-card:hover {
    border-color: var(--bz-accent) !important;
    box-shadow: 0 10px 28px rgba(0,0,0,.45) !important;
}
html[data-theme="dark"] .bz-shop-card-name,
html[data-theme="dark"] .bz-shop-card-name a { color: var(--bz-text) !important; }
html[data-theme="dark"] .bz-shop-card-cat { color: var(--bz-accent-2) !important; }
html[data-theme="dark"] .bz-shop-card-desc,
html[data-theme="dark"] .bz-shop-card-meta,
html[data-theme="dark"] .bz-shop-card-meta-row,
html[data-theme="dark"] .bz-shop-card-meta-row span { color: var(--bz-text-2) !important; }
html[data-theme="dark"] .bz-shop-card-meta-row svg { opacity: .6; }
html[data-theme="dark"] .bz-shop-card-logo {
    background: var(--bz-surface-2) !important;
    border-color: var(--bz-border) !important;
}
html[data-theme="dark"] .bz-shop-card-count {
    background: var(--bz-surface-2) !important;
    border-color: var(--bz-border) !important;
    color: var(--bz-text-2) !important;
}
/* Pill badges (Verified, Premium, Fix) keep their brand bg but
   ensure white text remains visible */
html[data-theme="dark"] .bz-shop-pill { box-shadow: 0 2px 6px rgba(0,0,0,.4); }

/* Sort / view-switch chrome above the grid */
html[data-theme="dark"] .ad_toggle_link,
html[data-theme="dark"] .ad_toggle_link a,
html[data-theme="dark"] .sort_btn,
html[data-theme="dark"] .ad_toggle_link span { color: var(--bz-text-2) !important; }
html[data-theme="dark"] .ad_toggle_link a.active,
html[data-theme="dark"] .ad_toggle_link a:hover { color: var(--bz-text) !important; }

/* Pagination at the bottom (.bz-shops-pager already defined in v1
   but lost in overwrite) */
html[data-theme="dark"] .bz-shops-pager .bz-pg-link {
    background: var(--bz-surface) !important;
    color: var(--bz-text-2) !important;
    border-color: var(--bz-border) !important;
}
html[data-theme="dark"] .bz-shops-pager .bz-pg-link.is-active {
    background: var(--bz-accent) !important;
    color: #fff !important;
    border-color: var(--bz-accent) !important;
}
html[data-theme="dark"] .bz-shops-pager .bz-pg-link.is-disabled {
    background: var(--bz-surface-2) !important;
    color: var(--bz-text-3) !important;
}
html[data-theme="dark"] .bz-shops-pager .bz-pg-summary { color: var(--bz-text-2) !important; }
html[data-theme="dark"] .bz-shops-pager .bz-pg-ellipsis { color: var(--bz-text-3) !important; }

/* Sidebar with categories on /shops/list */
html[data-theme="dark"] .categories_inner,
html[data-theme="dark"] .left_categories,
html[data-theme="dark"] .shops_left_filter,
html[data-theme="dark"] .filter_l {
    background: var(--bz-surface) !important;
    border-color: var(--bz-border) !important;
    color: var(--bz-text) !important;
}
html[data-theme="dark"] .categories_inner a,
html[data-theme="dark"] .left_categories a,
html[data-theme="dark"] .filter_l a { color: var(--bz-text) !important; }
html[data-theme="dark"] .categories_inner a.active,
html[data-theme="dark"] .categories_inner a:hover { color: var(--bz-accent-2) !important; background: var(--bz-surface-2) !important; }

/* ============================================================
   v14: Premium cards (.border_premium) had a cream tint
   (#FDF9EE) applied to .product_item — pretty in light mode,
   but in dark mode it reads as a bright off-white frame around
   the photo. Replace with the standard card surface.
   ============================================================ */
html[data-theme="dark"] .border_premium a.product_item,
html[data-theme="dark"] .border_premium .product_item,
html[data-theme="dark"] .border_premium .product_text,
html[data-theme="dark"] .border_premium {
    background-color: var(--bz-surface) !important;
    border-color: var(--bz-border) !important;
    color: var(--bz-text) !important;
}

/* Premium cards have a slightly thicker / coloured border in
   some places — normalise to the same hairline as regular cards
   so the row reads as uniform. */
html[data-theme="dark"] .product_mains.border_premium {
    border: 1px solid var(--bz-border) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
html[data-theme="dark"] .product_mains.border_premium:hover {
    border-color: var(--bz-border-2) !important;
    box-shadow: 0 6px 18px rgba(0,0,0,.4);
}

/* The Premium badge ribbon: keep its pink brand colour, but
   nudge text to white so it stays readable on dark surfaces. */
html[data-theme="dark"] .premium, html[data-theme="dark"] .premium img + span,
html[data-theme="dark"] .premium_item_border, html[data-theme="dark"] .premium_item_border span {
    color: #fff !important;
}

/* ============================================================
   v15: Top-categories slider (.property) — labels were a hard
   azure / link-blue which screamed on the dark bg. Soften to
   --bz-text and let the colourful icons carry the visual weight.
   Also dim the icons slightly so the colored circles don't feel
   neon against the dark page.
   ============================================================ */
html[data-theme="dark"] section.property a,
html[data-theme="dark"] section.property a p {
    color: var(--bz-text) !important;
    font-weight: 500;
}
html[data-theme="dark"] section.property a:hover,
html[data-theme="dark"] section.property a:hover p {
    color: var(--bz-accent-2) !important;
    font-weight: 700;
}

/* Tone down the cheerful pastel circles so they don't burn the eye */
html[data-theme="dark"] section.property a img {
    filter: brightness(.9) saturate(.85);
    transition: filter .15s ease;
}
html[data-theme="dark"] section.property a:hover img {
    filter: brightness(1) saturate(1);
}

/* Swiper navigation arrows — fix their colour for dark bg */
html[data-theme="dark"] section.property .swiper-button-next svg path,
html[data-theme="dark"] section.property .swiper-button-prev svg path { fill: var(--bz-text-2) !important; }
html[data-theme="dark"] section.property .btn_swiper {
    background: var(--bz-surface) !important;
    border: 1px solid var(--bz-border) !important;
    border-radius: 50%;
}
html[data-theme="dark"] section.property .btn_swiper:hover { border-color: var(--bz-border-2) !important; }

/* Same treatment for any other home-page colored icon strip */
html[data-theme="dark"] .swiper-slide a img,
html[data-theme="dark"] section.most_popular_brands .swiper-slide {
    /* leave brand logo bgs alone — only soften pastel category circles */
}

/* ============================================================
   v16: Item view right rail — price (.price_est) and address
   (.adr .address_product) were hardcoded to #000 in style.css,
   so 'Договорная' / 'Ташкент, Чиланзар' rendered pitch black
   on the dark surface and was almost unreadable.
   ============================================================ */
html[data-theme="dark"] .price_est,
html[data-theme="dark"] .price_est *,
html[data-theme="dark"] .price_est p,
html[data-theme="dark"] .price_est p b,
html[data-theme="dark"] .price_est .price,
html[data-theme="dark"] .price_est span { color: var(--bz-text) !important; }

html[data-theme="dark"] .price_est p { border-bottom-color: var(--bz-border) !important; }

/* The .adr address text was forced #000 — make it match the
   muted secondary text colour used elsewhere on the card. */
html[data-theme="dark"] .adr,
html[data-theme="dark"] .adr .address_product,
html[data-theme="dark"] .adr .address_product a,
html[data-theme="dark"] .adr .address_product span { color: var(--bz-text) !important; }

/* Dividers in the right rail also use #d9e3f3 hardcoded borders */
html[data-theme="dark"] .number_ads_est,
html[data-theme="dark"] .swip_date_estate { border-color: var(--bz-border) !important; }

/* The "Цена:" / "Адрес:" / "Просмотр:" small labels — give them
   the proper muted shade so the section reads as label + value. */
html[data-theme="dark"] .estete_swiper_right span.swip_op,
html[data-theme="dark"] .estete_swiper_right .swip_op,
html[data-theme="dark"] .estete_swiper_right .number_ads_est span {
    color: var(--bz-text-2) !important;
}

/* The blue-styled address / sub-strings (.swip_date_estate's date
   was rendering cyan — same accent everywhere on the right rail).
   Replace with normal text for the date and accent ONLY for links. */
html[data-theme="dark"] .swip_date_estate {
    background: transparent !important;
    color: var(--bz-text) !important;
}

/* "Рекламировать" CTA at the bottom — keep orange brand colour */
html[data-theme="dark"] .btn_est_right .btn,
html[data-theme="dark"] .btn_est_right a.btn { color: #fff !important; }

/* Social-share icons row stays as-is (each has its own brand colour) */
html[data-theme="dark"] .estete_swiper_right .social a,
html[data-theme="dark"] .estete_swiper_right .share a img { opacity: .95; }

/* ============================================================
   v17: Blog widget on home (.capital_* + .info_cap) — already
   partly dark, but link colours on sub-articles read as harsh
   cyan, the date strip needs a muted gray, and the section
   header buttons ("Все объявления" / "Все материалы") need
   chrome that fits dark.
   ============================================================ */

/* Section header + "see all" links */
html[data-theme="dark"] .pre_top .title,
html[data-theme="dark"] section.new_collection_reclams .pre_top .title { color: var(--bz-text) !important; }
/* "Все материалы" / "Посмотреть все" — plain underlined link, not a chip */
html[data-theme="dark"] .pre_top > a,
html[data-theme="dark"] .pre_top_h_a,
html[data-theme="dark"] .pre_top .pre_btns a {
    color: var(--bz-accent-2) !important;
    background: transparent !important;
    border: 0 !important;
    text-decoration: underline;
}
html[data-theme="dark"] .pre_top > a:hover,
html[data-theme="dark"] .pre_top_h_a:hover { color: var(--bz-accent) !important; }
/* btn-success__border keeps a subtle pill on dark */
html[data-theme="dark"] a.btn-success__border {
    color: var(--bz-text) !important;
    background: var(--bz-surface-2) !important;
    border-color: var(--bz-border) !important;
}
html[data-theme="dark"] a.btn-success__border:hover { background: var(--bz-surface) !important; color: var(--bz-accent-2) !important; }

/* Left card: featured + sub-articles row */
html[data-theme="dark"] .capital_left { background: var(--bz-surface) !important; border-color: var(--bz-border) !important; }
html[data-theme="dark"] .capital_left_top,
html[data-theme="dark"] .capital_left_bottom { background: transparent !important; }
html[data-theme="dark"] .a_capital_left_top_h3 { color: var(--bz-text) !important; }
html[data-theme="dark"] .capital_left .inner_a_h3,
html[data-theme="dark"] .capital_left .inner_a a,
html[data-theme="dark"] .capital_left a { color: var(--bz-accent-2) !important; }
html[data-theme="dark"] .capital_left .inner_a a:hover { color: var(--bz-accent) !important; }
html[data-theme="dark"] .capital_left .date,
html[data-theme="dark"] .capital_left .inner_new_a_h .date,
html[data-theme="dark"] .capital_left p,
html[data-theme="dark"] .capital_left .inner_a p { color: var(--bz-text-2) !important; }
html[data-theme="dark"] .capital_left h3,
html[data-theme="dark"] .capital_left .inner_new_a_h h3,
html[data-theme="dark"] .capital_left .inner_a_h3 a { color: var(--bz-text) !important; }

/* Right card (large hero post) */
html[data-theme="dark"] .capital_right { background: transparent !important; border: 0 !important; }
html[data-theme="dark"] .capital_right_h2,
html[data-theme="dark"] .capital_right h2,
html[data-theme="dark"] .capital_right h3 { color: #fff !important; text-shadow: 0 2px 8px rgba(0,0,0,.6); }
html[data-theme="dark"] .capital_right p,
html[data-theme="dark"] .capital_right .description { color: rgba(255,255,255,.85) !important; }

/* "БЛОГИ" / category badge — keep orange-pink brand colour */
html[data-theme="dark"] .capital_right .over,
html[data-theme="dark"] .over { color: #fff !important; }

/* Chat + eye counter at the bottom of right card */
html[data-theme="dark"] .info_cap,
html[data-theme="dark"] .info_cap span,
html[data-theme="dark"] .info_cap svg,
html[data-theme="dark"] .info_cap path { color: rgba(255,255,255,.85) !important; fill: rgba(255,255,255,.85) !important; }

/* Date pills (12.06.2024 style on sub-articles) */
html[data-theme="dark"] .inner_a .date,
html[data-theme="dark"] .capital_left_top .date { color: var(--bz-text-2) !important; background: transparent !important; }

/* Sub-article thumbnails are wrapped in <a> with an image — make
   sure hover still highlights the title text only, not the image. */
html[data-theme="dark"] .capital_left .inner_a:hover .inner_a_h3 a { color: var(--bz-accent-2) !important; }

/* ============================================================
   v18: Item view — characteristics table (.table_estete) and
   description (.description_estete) — both had hardcoded
   background:#fff + border:#d9e3f3 + cells inheriting black text
   that disappeared on the dark surface.
   ============================================================ */
html[data-theme="dark"] .table_estete,
html[data-theme="dark"] .description_estete {
    background: var(--bz-surface) !important;
    border-color: var(--bz-border) !important;
    color: var(--bz-text) !important;
}
html[data-theme="dark"] .table_estete table,
html[data-theme="dark"] .table_estete table tr,
html[data-theme="dark"] .table_estete table tr td,
html[data-theme="dark"] .table_estete table tr td:nth-child(2) {
    background: transparent !important;
    color: var(--bz-text) !important;
}
/* Label column (Количество комнат: / Меблирована: / etc) — keep
   muted to maintain key:value visual hierarchy. */
html[data-theme="dark"] .table_estete table tr td:nth-child(odd) {
    color: var(--bz-text-2) !important;
}

html[data-theme="dark"] .description_estete h4,
html[data-theme="dark"] .description_estete h3,
html[data-theme="dark"] .description_estete h2,
html[data-theme="dark"] .description_estete p,
html[data-theme="dark"] .description_estete li,
html[data-theme="dark"] .description_estete strong,
html[data-theme="dark"] .description_estete b,
html[data-theme="dark"] .description_estete span { color: var(--bz-text) !important; }

html[data-theme="dark"] .description_estete a { color: var(--bz-accent-2) !important; }
html[data-theme="dark"] .description_estete a:hover { color: var(--bz-accent) !important; }

/* "На карте" pill — was orange/cream on light, must remain
   visible but match dark surface */
html[data-theme="dark"] .estete_swiper_right .btn_swiper_right a,
html[data-theme="dark"] a[class*="map"]:not(.btn) {
    color: var(--bz-accent-2) !important;
}

/* Item-detail right column inner dividers — kill the white
   border-bottom that was leaking across cards. */
html[data-theme="dark"] .swip_date_estate,
html[data-theme="dark"] .price_est p,
html[data-theme="dark"] .adr,
html[data-theme="dark"] .swip_op { border-color: var(--bz-border) !important; }

/* ============================================================
   v19: CRITICAL — set body background. Earlier rules only set
   color, leaving the legacy 'body { background:#F8FAFB }' (off-
   white) winning. That's why pages with little content (create
   ad, login, etc.) bled an off-white tint between header and
   the dark card.
   ============================================================ */
html[data-theme="dark"], html[data-theme="dark"] body {
    background-color: var(--bz-bg) !important;
    color: var(--bz-text) !important;
}

/* Same for .place_main (classic create-ad form wrapper) */
html[data-theme="dark"] .place_main {
    background: var(--bz-surface) !important;
    border-color: var(--bz-border) !important;
    color: var(--bz-text) !important;
}
html[data-theme="dark"] .place_main h1,
html[data-theme="dark"] .place_main h2,
html[data-theme="dark"] .place_main h3,
html[data-theme="dark"] .place_main label,
html[data-theme="dark"] .place_main p { color: var(--bz-text) !important; }

/* ============================================================
   v20: Categories mega-menu (.category_bod / .left_head_nav /
   .inner_a) — style.css set both .main-menu > li > a and
   .sub-menu a to color:#000, plus .sub-menu a to bg #fff.
   In dark mode that became invisible-on-dark. Override.
   ============================================================ */
html[data-theme="dark"] .category_bod,
html[data-theme="dark"] .category_bod_main,
html[data-theme="dark"] .my_cag {
    background: var(--bz-surface) !important;
    border-color: var(--bz-border) !important;
}

/* Left side: category list with chevron */
html[data-theme="dark"] .left_head_nav > li,
html[data-theme="dark"] .left_head_nav > li > a {
    color: var(--bz-text) !important;
    background: transparent !important;
    border-color: var(--bz-border) !important;
}
html[data-theme="dark"] .left_head_nav > li > a:hover,
html[data-theme="dark"] .left_head_nav > li.active > a,
html[data-theme="dark"] .left_head_nav > li > a.first_top_menu_item {
    background: var(--bz-surface-2) !important;
    color: var(--bz-accent-2) !important;
}

/* Right side: subcategory columns */
html[data-theme="dark"] .inner_a, html[data-theme="dark"] .inner_new_a_h4 {
    background: transparent !important;
}
html[data-theme="dark"] .inner_a a,
html[data-theme="dark"] .inner_new_a_h4 a,
html[data-theme="dark"] .inner_a li a,
html[data-theme="dark"] .inner_a ul li a { color: var(--bz-text) !important; }
html[data-theme="dark"] .inner_a a:hover, html[data-theme="dark"] .inner_a ul li a:hover { color: var(--bz-accent-2) !important; }
html[data-theme="dark"] .inner_new_a_h4 a { font-weight: 700; color: var(--bz-text) !important; }

/* Generic Bootstrap/legacy menu fallback */
html[data-theme="dark"] .main-menu, html[data-theme="dark"] .main-menu > li,
html[data-theme="dark"] .sub-menu, html[data-theme="dark"] .sub-menu li {
    background: var(--bz-surface) !important;
    color: var(--bz-text) !important;
    border-color: var(--bz-border) !important;
}
html[data-theme="dark"] .main-menu > li > a,
html[data-theme="dark"] .sub-menu a,
html[data-theme="dark"] .sub-menu li a {
    color: var(--bz-text) !important;
    background: transparent !important;
}
html[data-theme="dark"] .main-menu > li:hover > a,
html[data-theme="dark"] .sub-menu > li > a:hover {
    background: var(--bz-surface-2) !important;
    color: var(--bz-accent-2) !important;
}

/* Chevron arrows in left category list */
html[data-theme="dark"] .left_head_nav > li > a::after,
html[data-theme="dark"] .left_head_nav > li > a span::after { border-color: var(--bz-text-2) !important; color: var(--bz-text-2) !important; }

/* ============================================================
   v21: Blog article view page — .qled hero card was white
   with white text (title invisible). Plus the body
   .blog_text and comments section needed dark surface.
   ============================================================ */
html[data-theme="dark"] section.inner_blog { background: transparent !important; }

html[data-theme="dark"] .qled {
    background: var(--bz-surface) !important;
    border-color: var(--bz-border) !important;
    color: var(--bz-text) !important;
}
html[data-theme="dark"] .qled h1,
html[data-theme="dark"] .qled h2,
html[data-theme="dark"] .qled > p,
html[data-theme="dark"] .qled .lead,
html[data-theme="dark"] .qled .subtitle { color: var(--bz-text) !important; }
html[data-theme="dark"] .qled p { color: var(--bz-text-2) !important; }

/* Favorite + share buttons on hero */
html[data-theme="dark"] .qled_share .favoruites_product,
html[data-theme="dark"] .qled_share a {
    background: var(--bz-surface-2) !important;
    border-color: var(--bz-border-2) !important;
    color: var(--bz-text-2) !important;
}
html[data-theme="dark"] .qled_share .favoruites_product:hover,
html[data-theme="dark"] .qled_share a:hover { border-color: var(--bz-accent) !important; color: var(--bz-accent-2) !important; }

/* Category pill (БЛОГИ) — keep brand orange but slightly dim */
html[data-theme="dark"] .overasy {
    background: rgba(255,136,27,.18) !important;
    color: #ff9f47 !important;
}

/* Author / date / view count strip */
html[data-theme="dark"] .user_blog,
html[data-theme="dark"] .user_blog * { color: var(--bz-text-2) !important; }
html[data-theme="dark"] .user_blog .name,
html[data-theme="dark"] .user_blog span:first-child,
html[data-theme="dark"] .user_blog b { color: var(--bz-text) !important; }
html[data-theme="dark"] .user_blog time.dat { color: var(--bz-text-2) !important; }

/* Article body */
html[data-theme="dark"] .blog_text,
html[data-theme="dark"] .blog_text *:not(a):not(code):not(pre) { color: var(--bz-text) !important; }
html[data-theme="dark"] .blog_text h1,
html[data-theme="dark"] .blog_text h2,
html[data-theme="dark"] .blog_text h3,
html[data-theme="dark"] .blog_text h4 { color: var(--bz-text) !important; }
html[data-theme="dark"] .blog_text p,
html[data-theme="dark"] .blog_text li { color: var(--bz-text) !important; }
html[data-theme="dark"] .blog_text strong, html[data-theme="dark"] .blog_text b { color: var(--bz-text) !important; }
html[data-theme="dark"] .blog_text a { color: var(--bz-accent-2) !important; }
html[data-theme="dark"] .blog_text a:hover { color: var(--bz-accent) !important; }
html[data-theme="dark"] .blog_text blockquote {
    background: var(--bz-surface) !important;
    border-left-color: var(--bz-accent) !important;
    color: var(--bz-text-2) !important;
}
html[data-theme="dark"] .blog_text img { opacity: .92; }

/* Comments area at the bottom */
html[data-theme="dark"] .inner_blog .comments,
html[data-theme="dark"] .inner_blog .item_comment,
html[data-theme="dark"] .item_comment .top_item_comment {
    background: var(--bz-surface) !important;
    border-color: var(--bz-border) !important;
    color: var(--bz-text) !important;
}

/* Suggested-articles / sub-blog widgets at the bottom */
html[data-theme="dark"] .sub_blogs, html[data-theme="dark"] .sub_blog_item {
    background: var(--bz-surface) !important;
    border-color: var(--bz-border) !important;
    color: var(--bz-text) !important;
}
html[data-theme="dark"] .sub_blog_item h3,
html[data-theme="dark"] .sub_blog_item h4,
html[data-theme="dark"] .sub_blog_item a { color: var(--bz-text) !important; }
html[data-theme="dark"] .sub_blog_item a:hover { color: var(--bz-accent-2) !important; }
html[data-theme="dark"] .sub_blog_item p { color: var(--bz-text-2) !important; }

/* ============================================================
   v22: Seller-card buttons on item view (.all_ads_author /
   #phone_main) — style.css set bg #fff + text #8d9aaf which
   in dark mode became a glaringly white pill on the dark card.
   ============================================================ */
html[data-theme="dark"] a.all_ads_author,
html[data-theme="dark"] a#phone_main {
    background: var(--bz-surface-2) !important;
    color: var(--bz-text) !important;
    border-color: var(--bz-border-2) !important;
}
html[data-theme="dark"] a.all_ads_author:hover,
html[data-theme="dark"] a#phone_main:hover {
    background: var(--bz-surface-3) !important;
    color: var(--bz-accent-2) !important;
    border-color: var(--bz-accent) !important;
}

/* Pinned variant (rarely used) */
html[data-theme="dark"] a.all_ads_author.bg-success.text-white.fixed {
    background: var(--bz-success) !important;
    color: #fff !important;
}

/* The seller info card itself + status tag */
html[data-theme="dark"] .est_user, html[data-theme="dark"] .est_user > * {
    background: var(--bz-surface) !important;
    color: var(--bz-text) !important;
    border-color: var(--bz-border) !important;
}
html[data-theme="dark"] .est_user .top_item_comment { background: transparent !important; border: 0 !important; }
html[data-theme="dark"] .est_user h5,
html[data-theme="dark"] .est_user .text h5 { color: var(--bz-text) !important; }
html[data-theme="dark"] .est_user .on_of, html[data-theme="dark"] .est_user .text .on_of { color: var(--bz-text-2) !important; }
html[data-theme="dark"] .est_user .onlines { color: var(--bz-success) !important; }
html[data-theme="dark"] .est_user .part,
html[data-theme="dark"] .est_user p.part,
html[data-theme="dark"] .est_user .bz-member-since { color: var(--bz-text-2) !important; }
html[data-theme="dark"] .est_user .part svg path { fill: var(--bz-text-2) !important; }
html[data-theme="dark"] .est_user .part .bz-member-since {
    background: var(--bz-surface-2) !important;
    color: var(--bz-text-2) !important;
    border-color: var(--bz-border) !important;
}

/* ============================================================
   v23: Item-view right rail — view counter (Просмотр: N) and
   social share row. Eye-icon was a raster PNG that doesn't tint
   with currentColor, and the share row pills sat on a slightly
   different shade than the rest of the column.
   ============================================================ */

/* "Просмотр:" label — already styled in v16 as muted, just
   make sure the count value pops. */
html[data-theme="dark"] .estete_swiper_right .view_count,
html[data-theme="dark"] .estete_swiper_right .swip_main p {
    color: var(--bz-text) !important;
}

/* The eye glyph is a background-image on a <p>. Tint it via a
   filter so it matches the muted secondary text. */
html[data-theme="dark"] .estete_swiper_right p[style*="eye2.svg"],
html[data-theme="dark"] .estete_swiper_right p[style*="eye"] {
    filter: invert(.85) hue-rotate(180deg);
}

/* Yandex Share widget — the icons themselves are inside an iframe
   so we can't touch their colours. Give the wrapper a comfortable
   gap from the surrounding column and add a small backdrop so the
   icons don't float on bare dark. */
html[data-theme="dark"] .bz-share-row {
    padding: 8px 0;
    border-top: 1px solid var(--bz-border) !important;
    margin-top: 12px !important;
}

/* Manual Facebook button (we render this one ourselves because
   Yandex Share dropped FB) */
html[data-theme="dark"] .bz-share-fb {
    color: var(--bz-text-2) !important;
    transition: color .15s;
}
html[data-theme="dark"] .bz-share-fb:hover { color: #1877f2 !important; }

/* The bottom "Рекламировать" CTA already orange — make sure the
   row above (share + view) sits clean against it */
html[data-theme="dark"] .btn_est_right { margin-top: 12px !important; }

/* ============================================================
   v24: Phone-reveal CTA on the seller card (.bz-phone-cta)
   was rendering its number text in a cream/orange tone in dark
   mode (legacy 'a' link colour bleeding through, or the JS
   inline <style> being beaten by a CSS-specificity battle).
   Force pure white text + no decoration with very high
   specificity that wins regardless of the JS style block.
   ============================================================ */
html[data-theme="dark"] a.more_know.blue.bz-phone-cta,
html[data-theme="dark"] a.more_know.blue.bz-phone-cta:hover,
html[data-theme="dark"] a.more_know.blue.bz-phone-cta:focus,
html[data-theme="dark"] a.more_know.blue.bz-phone-cta:active,
html[data-theme="dark"] a.more_know.blue.bz-phone-cta:visited,
html[data-theme="dark"] a.more_know.blue.bz-phone-cta * {
    color: #ffffff !important;
    text-decoration: none !important;
    fill: #ffffff !important;
}
html[data-theme="dark"] a.more_know.blue.bz-phone-cta .bz-phone-text {
    color: #ffffff !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    opacity: 1 !important;
}
html[data-theme="dark"] a.more_know.blue.bz-phone-cta svg,
html[data-theme="dark"] a.more_know.blue.bz-phone-cta svg path {
    stroke: #ffffff !important;
    fill: #ffffff !important;
}

/* ============================================================
   v25: Theme-toggle hover state — was rendering as a cream
   pill because legacy '.hdr_top_right a' rules + button base
   styles bled through. Force a soft gray circle on hover
   with no inherited bg/colour.
   ============================================================ */
html[data-theme="dark"] .bz-theme-toggle,
.bz-theme-toggle {
    -webkit-appearance: none !important;
    appearance: none !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 50% !important;
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: inherit !important;
    cursor: pointer !important;
    margin-left: 8px !important;
    transition: background .15s, color .15s, border-color .15s !important;
}
.bz-theme-toggle:hover {
    background: rgba(15,23,42,.08) !important;
    color: #0f172a !important;
}
html[data-theme="dark"] .bz-theme-toggle:hover {
    background: rgba(148,163,184,.14) !important;
    color: var(--bz-text) !important;
    border-color: transparent !important;
}
.bz-theme-toggle svg { width: 18px !important; height: 18px !important; display: block !important; }
.bz-theme-toggle:focus, .bz-theme-toggle:active { outline: 0 !important; box-shadow: 0 0 0 2px rgba(99,102,241,.35) !important; }

/* ============================================================
   v26: Header icons + Bisyor logo + 'Все категории' trigger
   ============================================================ */

/* Logo text — the SVG "Bisyor" wordmark must stay readable on
   the dark surface header. The logo image itself is a coloured
   bitmap so we can't tint it, but ensure the surrounding link
   colour is light. */
html[data-theme="dark"] .logo,
html[data-theme="dark"] .logo a,
html[data-theme="dark"] .logo span,
html[data-theme="dark"] .hdr_bottom_main_left .logo { color: var(--bz-text) !important; }
html[data-theme="dark"] .logo img { filter: brightness(1.1); }

/* "Все категории" trigger pill (4-dot grid icon + label) */
html[data-theme="dark"] .all_categories_btn,
html[data-theme="dark"] a.all_categories_btn,
html[data-theme="dark"] .hdr_bottom .all_categories_btn {
    background: var(--bz-surface-2) !important;
    color: var(--bz-text) !important;
    border-color: var(--bz-border) !important;
}
html[data-theme="dark"] .all_categories_btn svg path,
html[data-theme="dark"] .all_categories_btn svg g path,
html[data-theme="dark"] .all_categories_btn img { fill: var(--bz-text-2) !important; }
html[data-theme="dark"] .all_categories_btn:hover { background: var(--bz-surface-3) !important; color: var(--bz-accent-2) !important; }
html[data-theme="dark"] .all_categories_btn:hover svg path { fill: var(--bz-accent-2) !important; }

/* Search icon (magnifier) inside search form */
html[data-theme="dark"] .hdr_bottom .search_form_header svg,
html[data-theme="dark"] .hdr_bottom .search_form_header svg path,
html[data-theme="dark"] .hdr_bottom form svg path,
html[data-theme="dark"] .search_form_header button svg path { fill: var(--bz-text-2) !important; stroke: var(--bz-text-2) !important; }

/* Location pin (navigation.svg) — make it tint via filter so it
   matches the muted secondary text. PNG/SVG asset can't be
   recoloured directly via fill if it's an <img>. */
html[data-theme="dark"] .select_region img,
html[data-theme="dark"] .hdr_top_main img[src*="navigation"] {
    filter: invert(.78) sepia(0) saturate(0) brightness(1.1);
}

/* Top nav icons (Объявления / Магазины / Услуги / Блог / Помощь) */
html[data-theme="dark"] .hdr_top_right a svg,
html[data-theme="dark"] .hdr_top_right a svg path,
html[data-theme="dark"] .hdr_top_right a svg g path { fill: var(--bz-text-2) !important; }
html[data-theme="dark"] .hdr_top_right a { color: var(--bz-text) !important; }
html[data-theme="dark"] .hdr_top_right a:hover svg path,
html[data-theme="dark"] .hdr_top_right a:hover svg g path { fill: var(--bz-accent-2) !important; }
html[data-theme="dark"] .hdr_top_right a:hover { color: var(--bz-accent-2) !important; }
html[data-theme="dark"] .hdr_top_right a:hover span { color: var(--bz-accent-2) !important; }

/* "Добавить объявление" green CTA — keep brand green */
html[data-theme="dark"] .hdr_bottom_main_right a,
html[data-theme="dark"] .add_ads, html[data-theme="dark"] .add_oby { color: #fff !important; }

/* User avatar + name area on the right */
html[data-theme="dark"] .hdr_user_block, html[data-theme="dark"] .user_login_main { color: var(--bz-text) !important; }
html[data-theme="dark"] .hdr_user_block a, html[data-theme="dark"] .user_login_main a { color: var(--bz-text) !important; }

/* ============================================================
   v27: User-avatar dropdown menu (.us_drop) — hover state set
   bg #f7f9fd (off-white) + color #000 (black) in style.css
   line 573. That painted the active item as a glowing white
   pill in the dark dropdown.
   ============================================================ */
html[data-theme="dark"] .us_drop .dropdown_popup_body,
html[data-theme="dark"] .dropdown_popup.us_drop .dropdown_popup_body {
    background: var(--bz-surface) !important;
    border: 1px solid var(--bz-border) !important;
    box-shadow: 0 4px 18px rgba(0,0,0,.45) !important;
    border-radius: 10px;
}

html[data-theme="dark"] .us_drop ul li a,
html[data-theme="dark"] .us_drop ul li a span {
    color: var(--bz-text) !important;
}
html[data-theme="dark"] .us_drop ul li a svg,
html[data-theme="dark"] .us_drop ul li a svg path,
html[data-theme="dark"] .us_drop ul li a svg g path { fill: var(--bz-text-2) !important; color: var(--bz-text-2) !important; }

/* HOVER state — replace the cream/white pill with a subtle dark tint */
html[data-theme="dark"] .us_drop ul li a:hover {
    background-color: var(--bz-surface-2) !important;
    color: var(--bz-accent-2) !important;
}
html[data-theme="dark"] .us_drop ul li a:hover span { color: var(--bz-accent-2) !important; }
html[data-theme="dark"] .us_drop ul li a:hover svg path,
html[data-theme="dark"] .us_drop ul li a:hover svg g path { fill: var(--bz-accent-2) !important; }

/* Kill the legacy black underline animation on hover (looks weird
   in dark mode where we already use a bg tint to indicate hover). */
html[data-theme="dark"] .us_drop ul li a span:after {
    border-bottom-color: var(--bz-accent-2) !important;
}

/* Dividers (li.hrt) between groups */
html[data-theme="dark"] .us_drop ul li.hrt {
    background: var(--bz-border) !important;
    height: 1px;
    margin: 6px 14px;
}

/* The opener pill (avatar + name) */
html[data-theme="dark"] .us_drop a.enter_site { color: var(--bz-text) !important; }
html[data-theme="dark"] .us_drop a.enter_site span { color: var(--bz-text) !important; }

/* ============================================================
   v28: 'Все категории' trigger pill — v26 used --bz-surface-2
   which produced a glaring darker oval that didn't match the
   header chrome. Drop it to transparent with a subtle border
   only, so the pill reads as a regular toggle on the header.
   ============================================================ */
html[data-theme="dark"] .all_categories_btn,
html[data-theme="dark"] a.all_categories_btn,
html[data-theme="dark"] .hdr_bottom .all_categories_btn {
    background: transparent !important;
    color: var(--bz-text) !important;
    border: 1px solid var(--bz-border) !important;
    border-radius: 30px !important;
    padding: 8px 18px;
    transition: background .15s, border-color .15s, color .15s;
}
html[data-theme="dark"] .all_categories_btn:hover {
    background: var(--bz-surface-2) !important;
    border-color: var(--bz-border-2) !important;
    color: var(--bz-accent-2) !important;
}
html[data-theme="dark"] .all_categories_btn svg path,
html[data-theme="dark"] .all_categories_btn svg g path,
html[data-theme="dark"] .all_categories_btn img {
    fill: var(--bz-text-2) !important;
    opacity: .85;
}
html[data-theme="dark"] .all_categories_btn:hover svg path,
html[data-theme="dark"] .all_categories_btn:hover svg g path { fill: var(--bz-accent-2) !important; opacity: 1; }

/* ============================================================
   v29: Drop the border on "Все категории" trigger — user
   said it's noise.
   ============================================================ */
html[data-theme="dark"] .all_categories_btn,
html[data-theme="dark"] a.all_categories_btn,
html[data-theme="dark"] .hdr_bottom .all_categories_btn {
    border: 0 !important;
    background: transparent !important;
}
html[data-theme="dark"] .all_categories_btn:hover {
    background: var(--bz-surface-2) !important;
    border: 0 !important;
}

/* ============================================================
   v30: Header SVG icons are rendered as <img src=".svg">, not
   inline <svg>, so CSS fill doesn't tint them. Flip via filter.
   ============================================================ */
html[data-theme="dark"] .all_categories_btn img,
html[data-theme="dark"] .search_form_header button img,
html[data-theme="dark"] .hdr_bottom_main img[src*="category_icon"],
html[data-theme="dark"] .hdr_bottom_main img[src*="search.svg"] {
    filter: invert(.78) brightness(1.2) !important;
}
html[data-theme="dark"] .all_categories_btn:hover img,
html[data-theme="dark"] .search_form_header button:hover img {
    filter: invert(.62) sepia(1) saturate(4) hue-rotate(200deg) brightness(1.2) !important;
}

/* ============================================================
   v31: /profile/referrals + /profile/bills-list + replenish.
   Each page has its own .bz-ref-* / .bz-ops-* / classic
   .score_main wrappers that style.css paints white.
   ============================================================ */

/* ─── Referrals page ─────────────────────────────────────── */
html[data-theme="dark"] .bz-ref-wrap,
html[data-theme="dark"] .bz-ref-hero,
html[data-theme="dark"] .bz-ref-balance,
html[data-theme="dark"] .bz-ref-link,
html[data-theme="dark"] .bz-ref-kpi,
html[data-theme="dark"] .bz-ref-card {
    background: var(--bz-surface) !important;
    color: var(--bz-text) !important;
    border-color: var(--bz-border) !important;
}
html[data-theme="dark"] .bz-ref-hero { background: linear-gradient(135deg, #1e3a8a 0%, #1e293b 80%) !important; }
html[data-theme="dark"] .bz-ref-balance-lab, html[data-theme="dark"] .bz-ref-balance-sub,
html[data-theme="dark"] .bz-ref-sub, html[data-theme="dark"] .bz-ref-lab { color: var(--bz-text-2) !important; }
html[data-theme="dark"] .bz-ref-balance-num, html[data-theme="dark"] .bz-ref-num { color: var(--bz-text) !important; }
html[data-theme="dark"] .bz-ref-num.green { color: #4ade80 !important; }
html[data-theme="dark"] .bz-ref-num.purple { color: #c084fc !important; }
html[data-theme="dark"] .bz-ref-link-row input,
html[data-theme="dark"] .bz-ref-link input {
    background: var(--bz-surface-2) !important;
    color: var(--bz-text) !important;
    border-color: var(--bz-border-2) !important;
}
html[data-theme="dark"] .bz-ref-copy {
    background: var(--bz-accent) !important;
    color: #fff !important;
    border: 0 !important;
}
html[data-theme="dark"] .bz-ref-share-btn {
    color: #fff !important;
    /* brand bgs (telegram/whatsapp) kept */
}

/* Referrals table (if any) */
html[data-theme="dark"] .bz-ref-table,
html[data-theme="dark"] .bz-ref-table th,
html[data-theme="dark"] .bz-ref-table td {
    background: var(--bz-surface) !important;
    color: var(--bz-text) !important;
    border-color: var(--bz-border) !important;
}

/* ─── Bills list ─────────────────────────────────────────── */
html[data-theme="dark"] .bz-ops-page,
html[data-theme="dark"] .bz-ops-hero,
html[data-theme="dark"] .bz-ops-kpi,
html[data-theme="dark"] .bz-ops-kpi-card,
html[data-theme="dark"] .bz-ops-list,
html[data-theme="dark"] .bz-ops-row,
html[data-theme="dark"] .bz-ops-empty,
html[data-theme="dark"] .bz-ops-pager {
    background: var(--bz-surface) !important;
    border-color: var(--bz-border) !important;
    color: var(--bz-text) !important;
}
html[data-theme="dark"] .bz-ops-hero { background: linear-gradient(135deg, #134e4a 0%, #1e293b 80%) !important; }
html[data-theme="dark"] .bz-ops-row { border-bottom: 1px solid var(--bz-border) !important; }
html[data-theme="dark"] .bz-ops-row:hover { background: var(--bz-surface-2) !important; }
html[data-theme="dark"] .bz-ops-mid,
html[data-theme="dark"] .bz-ops-mid .title,
html[data-theme="dark"] .bz-ops-mid .desc { color: var(--bz-text) !important; }
html[data-theme="dark"] .bz-ops-mid .meta,
html[data-theme="dark"] .bz-ops-mid .date { color: var(--bz-text-2) !important; }
html[data-theme="dark"] .bz-ops-right .amt { color: var(--bz-text) !important; }
html[data-theme="dark"] .bz-ops-right .amt.in { color: #4ade80 !important; }
html[data-theme="dark"] .bz-ops-right .amt.out { color: #f87171 !important; }
html[data-theme="dark"] .bz-ops-right .id { color: var(--bz-text-3) !important; }
html[data-theme="dark"] .bz-ops-icon {
    background: var(--bz-surface-2) !important;
    border-color: var(--bz-border) !important;
    color: var(--bz-text-2) !important;
}
html[data-theme="dark"] .bz-ops-icon.in  { background: rgba(74,222,128,.12) !important; color: #4ade80 !important; }
html[data-theme="dark"] .bz-ops-icon.out { background: rgba(248,113,113,.12) !important; color: #f87171 !important; }
html[data-theme="dark"] .bz-ops-kpi-card {
    background: var(--bz-surface) !important;
    border: 1px solid var(--bz-border) !important;
}
html[data-theme="dark"] .bz-ops-kpi-card .lab { color: var(--bz-text-2) !important; }
html[data-theme="dark"] .bz-ops-kpi-card .val { color: var(--bz-text) !important; }

/* ─── Replenish page (legacy .score_main / .op_marc) ───────── */
html[data-theme="dark"] .op_marc,
html[data-theme="dark"] .my_ind_e,
html[data-theme="dark"] .score_main {
    background: var(--bz-surface) !important;
    border: 1px solid var(--bz-border) !important;
    border-radius: 12px;
    color: var(--bz-text) !important;
}
html[data-theme="dark"] .op_marc a.insco,
html[data-theme="dark"] .op_marc h2 { color: var(--bz-text) !important; }
html[data-theme="dark"] .op_marc .radio_mag,
html[data-theme="dark"] .op_marc .innermag,
html[data-theme="dark"] .op_marc .niked,
html[data-theme="dark"] .op_marc .form-group { background: transparent !important; color: var(--bz-text) !important; }
html[data-theme="dark"] .op_marc input,
html[data-theme="dark"] .op_marc .much_fund input {
    background: var(--bz-surface-2) !important;
    color: var(--bz-text) !important;
    border-color: var(--bz-border-2) !important;
}
html[data-theme="dark"] .op_marc label { color: var(--bz-text) !important; }
html[data-theme="dark"] .op_marc .radio_mag label::before,
html[data-theme="dark"] .op_marc .innermag label::before {
    background: var(--bz-surface-2) !important;
    border-color: var(--bz-border-2) !important;
}

/* Replenish: "Mojhno tax" sm hint, tooltips */
html[data-theme="dark"] .op_marc small,
html[data-theme="dark"] .op_marc .help-block { color: var(--bz-text-2) !important; }

/* ─── Blogs list page (v32) ─────────────────────────────────
   /blogs/list — section headings invisible (default black text
   in dark bg), right "top-3" widget had #fff background, and
   the bottom grid of post cards (.product_item.width_blogs)
   used the white card surface. */
[data-theme="dark"] .blog_main .title,
[data-theme="dark"] .blog_section .title,
[data-theme="dark"] .blogs_product .title,
[data-theme="dark"] .pre_top.blog_tit { color: var(--bz-text) !important; }
[data-theme="dark"] .pre_top.blog_tit { border-color: var(--bz-border) !important; }
[data-theme="dark"] .pre_top.blog_tit a { color: var(--bz-accent-2) !important; }

/* Featured (hero) blog card */
[data-theme="dark"] .first_blog_link,
[data-theme="dark"] .first_blog_link.shadow_bc {
    background: var(--bz-surface) !important;
    border-color: var(--bz-border) !important;
    color: var(--bz-text) !important;
    box-shadow: none !important;
}
[data-theme="dark"] .first_blog_link * { color: var(--bz-text); }
[data-theme="dark"] .first_blog_link .info_cap,
[data-theme="dark"] .first_blog_link .date_blog,
[data-theme="dark"] .first_blog_link .user_blog,
[data-theme="dark"] .first_blog_link .eye_bl { color: var(--bz-text-2) !important; }

/* Right rail top-3 widget */
[data-theme="dark"] .blog_right,
[data-theme="dark"] .capital_right.blog_left,
[data-theme="dark"] .capital_right.blog_left.shadow_bc {
    background: var(--bz-surface) !important;
    border-color: var(--bz-border) !important;
    box-shadow: none !important;
    color: var(--bz-text) !important;
}
[data-theme="dark"] .blog_right a,
[data-theme="dark"] .blog_right p,
[data-theme="dark"] .blog_right span,
[data-theme="dark"] .blog_right h1,
[data-theme="dark"] .blog_right h2,
[data-theme="dark"] .blog_right h3,
[data-theme="dark"] .blog_right h4 { color: var(--bz-text) !important; }
[data-theme="dark"] .blog_right .date_blog,
[data-theme="dark"] .blog_right .user_blog,
[data-theme="dark"] .blog_right .eye_bl { color: var(--bz-text-2) !important; }
/* .span_blogs is just a flex row inside the card body, NOT a
   chip — keep it transparent so it doesn't paint a coloured
   bar across the card header. */
[data-theme="dark"] .blog_right .span_blogs,
[data-theme="dark"] .span_blogs { background: transparent !important; }
[data-theme="dark"] .span_blogs > span,
[data-theme="dark"] .blog_right .span_blogs > span { color: var(--bz-text-2) !important; }
[data-theme="dark"] .arch,
[data-theme="dark"] .asy,
[data-theme="dark"] .overasy { color: var(--bz-text-2) !important; }
[data-theme="dark"] .arch { border-color: var(--bz-border) !important; }

/* Card grid (bottom) */
[data-theme="dark"] .product_item.width_blogs,
[data-theme="dark"] .blogs_product .product_item {
    background: var(--bz-surface) !important;
    border-color: var(--bz-border) !important;
    box-shadow: none !important;
}
[data-theme="dark"] .product_item.width_blogs .product_text,
[data-theme="dark"] .blogs_product .product_text {
    background: var(--bz-surface) !important;
    color: var(--bz-text) !important;
}
[data-theme="dark"] .product_item.width_blogs .product_text *,
[data-theme="dark"] .blogs_product .product_text * { color: var(--bz-text); }
[data-theme="dark"] .product_item.width_blogs .product_text .info_cap,
[data-theme="dark"] .product_item.width_blogs .product_text .user_blog,
[data-theme="dark"] .product_item.width_blogs .product_text .eye_bl,
[data-theme="dark"] .product_item.width_blogs .product_text p { color: var(--bz-text-2) !important; }

/* Top filter tabs (Все / Категории) */
[data-theme="dark"] .blobg_ul.nav,
[data-theme="dark"] .blobg_ul.nav a,
[data-theme="dark"] .blobg_ul.nav .nav-link { color: var(--bz-text-2) !important; }
[data-theme="dark"] .blobg_ul.nav .nav-link.active,
[data-theme="dark"] .blobg_ul.nav a.active { color: var(--bz-accent-2) !important; background: transparent !important; }

/* Eye/comment SVG icons that were dark on dark */
[data-theme="dark"] .eye_bl svg,
[data-theme="dark"] .eye_bl svg path { fill: var(--bz-text-2) !important; }

/* ─── Blog card polish (v32.1) ─────────────────────────────
   Make .product_item.width_blogs feel like the other site
   cards: clean rounded border, no shadow, padded body, and
   make sure the meta row sits flush with the title. */
[data-theme="dark"] .product_item.width_blogs,
[data-theme="dark"] .blogs_product .product_item {
    border-radius: 12px;
    overflow: hidden;
}
[data-theme="dark"] .product_item.width_blogs .product_text {
    padding: 14px 16px 16px !important;
}
[data-theme="dark"] .product_item.width_blogs .span_blogs {
    margin-bottom: 8px;
    padding: 0 !important;
}
[data-theme="dark"] .product_item.width_blogs .span_blogs > span {
    font-size: 13px; font-weight: 600;
}
[data-theme="dark"] .product_item.width_blogs:hover {
    box-shadow: 0 6px 16px rgba(0,0,0,.35) !important;
    border-color: #475569 !important;
}

/* ─── Blog list — kill light-blue legacy border (v32.2) ────
   Root cause: legacy `.product_text { border: 1px solid #d9e3f3 }`
   bled into dark mode as a visible white-ish outline on each
   blog card. Reset border to match the surface. */
[data-theme="dark"] .product_text { border-color: var(--bz-border) !important; }
[data-theme="dark"] .product_item.width_blogs .product_text,
[data-theme="dark"] .blogs_product .product_text {
    border: 0 !important;
}
[data-theme="dark"] .product_item.width_blogs {
    border: 1px solid var(--bz-border) !important;
}

/* ─── Blog view comments (v33) ────────────────────────────
   Legacy: .self_kom uses #f8fafb (light) and .top_item_comment
   inside it has white card surface; comment headings/texts are
   hardcoded #000. Override for dark mode. */
[data-theme="dark"] .comments { border-top-color: var(--bz-border) !important; }
[data-theme="dark"] .comments h3 { color: var(--bz-text) !important; }
[data-theme="dark"] .item_comment p,
[data-theme="dark"] .top_item_comment h5,
[data-theme="dark"] .top_item_comment p,
[data-theme="dark"] .top_item_comment span { color: var(--bz-text) !important; }
[data-theme="dark"] .on_of { color: var(--bz-text-2) !important; }
[data-theme="dark"] .on_of.onlines { color: var(--bz-success) !important; }

[data-theme="dark"] .self_kom {
    background: var(--bz-surface) !important;
    border: 1px solid var(--bz-border) !important;
    border-radius: 12px !important;
}
[data-theme="dark"] .self_kom .top_item_comment {
    background: var(--bz-surface-2) !important;
    border-radius: 10px !important;
    padding: 12px 14px !important;
    margin-bottom: 12px !important;
}
[data-theme="dark"] .self_kom textarea {
    background: var(--bz-surface-2) !important;
    border-color: var(--bz-border) !important;
    color: var(--bz-text) !important;
    border-radius: 10px !important;
}
[data-theme="dark"] .self_kom textarea::placeholder { color: var(--bz-text-3) !important; }
[data-theme="dark"] .self_kom .more_know.blue {
    background: var(--bz-accent) !important;
    color: #fff !important;
    border: 0 !important;
}

/* Reply UI bits */
[data-theme="dark"] .answer_letter,
[data-theme="dark"] .inrepl {
    background: var(--bz-surface-2) !important;
    border-color: var(--bz-border) !important;
    color: var(--bz-text) !important;
}
[data-theme="dark"] .answer_letter_name,
[data-theme="dark"] .answer_letter_some { color: var(--bz-text-2) !important; }
[data-theme="dark"] .repl,
[data-theme="dark"] .repl_tog,
[data-theme="dark"] .like,
[data-theme="dark"] .dislike { color: var(--bz-text-2) !important; }
[data-theme="dark"] .repl:hover,
[data-theme="dark"] .repl_tog:hover { color: var(--bz-accent-2) !important; }

/* ─── Advertising page (v34) ──────────────────────────────
   /advertising — hero/benefit have dark overlays so white text
   is fine; numbers section + tariff cards + form + partners
   inherit page bg and need fixes. */

/* Section bg surfaces — none have explicit bg so they show
   the dark body, which is correct; main fixes are TEXT colors
   and the pastel tariff cards. */
[data-theme="dark"] section.advert_numbers,
[data-theme="dark"] section.partners { color: var(--bz-text); }
[data-theme="dark"] section.advert_numbers h3,
[data-theme="dark"] section.partners h3,
[data-theme="dark"] .effect_part p { color: var(--bz-text) !important; }
[data-theme="dark"] .effect_part p { color: var(--bz-text-2) !important; }

/* Tariff colour bands — pert1/2/3 stay vivid but a touch brighter
   for legibility on dark bg. */
[data-theme="dark"] .pert1 { color: #60a5fa !important; }
[data-theme="dark"] .pert2 { color: #f87171 !important; }
[data-theme="dark"] .pert3 { color: #34d399 !important; }

/* Tariff cards (ite1..ite4 had pastel cream/green/red/blue bg
   with black text — text vanishes against the dark body if cards
   keep light pastels). Keep the colour signal via a subtle tint
   border + low-opacity bg, and bring text up to --bz-text. */
[data-theme="dark"] .plane_tarifs_advert_item {
    color: var(--bz-text) !important;
}
[data-theme="dark"] .plane_tarifs_advert_item span { color: var(--bz-text) !important; }
[data-theme="dark"] .plane_tarifs_advert_item u { color: var(--bz-text-3) !important; }
[data-theme="dark"] .plane_tarifs_advert_item b { color: var(--bz-text) !important; }

[data-theme="dark"] .ite1 { background-color: rgba(251,242,214,.10) !important; box-shadow: inset 0 0 0 1px rgba(251,242,214,.25); }
[data-theme="dark"] .ite2 { background-color: rgba(52,211,153,.12)  !important; box-shadow: inset 0 0 0 1px rgba(52,211,153,.30); }
[data-theme="dark"] .ite3 { background-color: rgba(248,113,113,.12) !important; box-shadow: inset 0 0 0 1px rgba(248,113,113,.30); }
[data-theme="dark"] .ite4 { background-color: rgba(96,165,250,.12)  !important; box-shadow: inset 0 0 0 1px rgba(96,165,250,.30); }

/* Hero plan_link button — was white pill with grey text → too bright */
[data-theme="dark"] section.advertise a.plan_link {
    background: rgba(255,255,255,.92) !important;
    color: #0f172a !important;
    border-color: transparent !important;
}
[data-theme="dark"] section.advertise a.plan_link:hover { background: #fff !important; color: #000 !important; }

/* Video promo block */
[data-theme="dark"] .video_advert,
[data-theme="dark"] .video_advert_left,
[data-theme="dark"] .video_advert_right { color: var(--bz-text); }
[data-theme="dark"] .video_advert_left h2,
[data-theme="dark"] .video_advert_right h2,
[data-theme="dark"] .video_advert h2,
[data-theme="dark"] .video_advert h3 { color: var(--bz-text) !important; }
[data-theme="dark"] .video_advert p,
[data-theme="dark"] .vid_share { color: var(--bz-text-2) !important; }
[data-theme="dark"] .linh_vid { color: var(--bz-text) !important; }
[data-theme="dark"] .linh_vid li,
[data-theme="dark"] .linh_vid p,
[data-theme="dark"] .linh_vid span { color: var(--bz-text-2) !important; }

/* Partners section logos / titles */
[data-theme="dark"] section.partners h3,
[data-theme="dark"] .partner_adv h2,
[data-theme="dark"] .partner_adv p { color: var(--bz-text) !important; }
[data-theme="dark"] section.partners img {
    filter: brightness(.95) contrast(.95);
    background: #fff;
    border-radius: 50%;
}

/* Form block (benefit_adv has a dark photo overlay already, but
   the select + button inside are legacy-styled white). */
[data-theme="dark"] section.benefit_adv .js-select2 + .select2-container .select2-selection,
[data-theme="dark"] section.benefit_adv select,
[data-theme="dark"] section.benefit_adv .form-control {
    background: rgba(255,255,255,.08) !important;
    color: var(--bz-text) !important;
    border-color: rgba(255,255,255,.18) !important;
}
[data-theme="dark"] section.benefit_adv button.more_know.blue {
    background: var(--bz-accent) !important;
    color: #fff !important;
}

/* Sub-section paddings unaffected. */

/* ─── /obyavlenie/list cards (v35) ─────────────────────────
   Bug: .product_horizontal .product_item { background: #fff }
   leaked through for NON-premium ads — dark-mode override only
   covered .product_horizontal wrapper, not the inner item, so
   the white card surface and (with serviceMarked inline style)
   the cream/yellow tints were still visible. */
[data-theme="dark"] .product_horizontal .product_item,
[data-theme="dark"] .product_horizontal .product_item .product_text {
    background: var(--bz-surface) !important;
    color: var(--bz-text) !important;
    border-color: var(--bz-border) !important;
}
[data-theme="dark"] .product_horizontal .product_item .product_text h4,
[data-theme="dark"] .product_horizontal .product_item .product_text h4 a,
[data-theme="dark"] .product_horizontal .product_item .price_product b { color: var(--bz-text) !important; }
[data-theme="dark"] .product_horizontal .product_item .product_text .address_product,
[data-theme="dark"] .product_horizontal .product_item .product_text .negotiat,
[data-theme="dark"] .product_horizontal .product_item .elt_date,
[data-theme="dark"] .product_horizontal .product_item .elt_title span { color: var(--bz-text-2) !important; }

/* serviceMarked ads inject inline style="background-color:#xxx".
   Already overridden via .product_text[style] block — broaden to
   include the horizontal variant. */
[data-theme="dark"] .product_horizontal .product_item .product_text[style],
[data-theme="dark"] .product_horizontal .product_item .product_text[style*="background"] {
    background: var(--bz-surface) !important;
}

/* h1 .title.last_ret was inheriting black on dark bg */
[data-theme="dark"] h1.title,
[data-theme="dark"] .title.last_ret,
[data-theme="dark"] h1.title.last_ret,
[data-theme="dark"] h2.title,
[data-theme="dark"] h3.title { color: var(--bz-text) !important; }

/* Sub-filter chips at top of /obyavlenie/list/<cat> */
[data-theme="dark"] .sub_filter,
[data-theme="dark"] .sub_filter * { color: var(--bz-text) !important; }
[data-theme="dark"] .sub_filter a,
[data-theme="dark"] .rubrica a { color: var(--bz-text-2) !important; }
[data-theme="dark"] .sub_filter a.active,
[data-theme="dark"] .sub_filter a:hover,
[data-theme="dark"] .rubrica a:hover { color: var(--bz-accent-2) !important; }

/* Naved title / breadcrumbs above results */
[data-theme="dark"] .naved_tit,
[data-theme="dark"] .hr_title,
[data-theme="dark"] .rubrica_top,
[data-theme="dark"] .rubrica_top_links { color: var(--bz-text) !important; }

/* ─── Blog list cards — transparent surface (v36) ─────────
   User: the card surface clashed with the page background
   making a "strip" effect. Drop the surface tint + border so
   each card blends seamlessly into the page; image still
   anchors the card visually. */
[data-theme="dark"] .product_item.width_blogs,
[data-theme="dark"] .blogs_product .product_item {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}
[data-theme="dark"] .product_item.width_blogs .product_text,
[data-theme="dark"] .blogs_product .product_text {
    background: transparent !important;
    border: 0 !important;
    padding: 12px 4px 4px !important;
}
[data-theme="dark"] .product_item.width_blogs:hover {
    box-shadow: none !important;
    border: 0 !important;
}
[data-theme="dark"] .product_item.width_blogs img,
[data-theme="dark"] .blogs_product .product_item img {
    border-radius: 12px;
}

/* ─── Homepage featured blog card image (v37) ──────────────
   .capital_right has <img> with z-index:-1 + dark gradient
   overlay on the wrapper. Make sure no parent paints an
   opaque surface over the image. */
[data-theme="dark"] .capital_right,
[data-theme="dark"] a.capital_right { background: transparent !important; }
[data-theme="dark"] .capital_right > img { z-index: 0 !important; }
[data-theme="dark"] .capital_right .over,
[data-theme="dark"] .capital_right .capital_right_h2,
[data-theme="dark"] .capital_right h2,
[data-theme="dark"] .capital_right p,
[data-theme="dark"] .capital_right .info_cap { position: relative; z-index: 2; }
/* Reinforce the legacy gradient overlay so text stays legible */
[data-theme="dark"] .capital_right::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%);
    pointer-events: none;
    z-index: 1;
}

/* ─── Site-map page (v38) ─────────────────────────────────
   /site-map — h1 + category headings + link list were all
   inheriting black (.main_map_site_item li a { color: #000 }). */
[data-theme="dark"] section.map_site h1,
[data-theme="dark"] .main_map_site_item h4 { color: var(--bz-text) !important; }
[data-theme="dark"] .main_map_site_item li a { color: var(--bz-text-2) !important; }
[data-theme="dark"] .main_map_site_item li a:hover { color: var(--bz-accent-2) !important; }
/* Category icons — most are dark glyphs on transparent → invisible */
[data-theme="dark"] .main_map_site_item img { filter: invert(.78) brightness(1.15); }

/* ─── Vacancy page (v39) ──────────────────────────────────
   /vacancy — hero overlay text is fine, but vacan_ma subtitle,
   h2, and development_item tiles (white bg + black text) all
   need dark-mode versions. */
[data-theme="dark"] section.vacan_ma h3,
[data-theme="dark"] section.vacan_ma h2 { color: var(--bz-text) !important; }
[data-theme="dark"] section.vacan_ma h3 { color: var(--bz-text-2) !important; }
[data-theme="dark"] section.vacan_ma h3::after { border-bottom-color: var(--bz-border) !important; }

[data-theme="dark"] .development_item {
    background: var(--bz-surface) !important;
    border-color: var(--bz-border) !important;
}
[data-theme="dark"] .development_item a { color: var(--bz-text) !important; }
[data-theme="dark"] .development_item a:hover { color: var(--bz-accent-2) !important; }
[data-theme="dark"] .development_item p,
[data-theme="dark"] .development_item span { color: var(--bz-text-2) !important; }

/* ─── Bootstrap modal titles + close X (v40) ───────────────
   Modal surfaces were already darkened (v1) but the title <h5>
   and inner <b> were still inheriting #000, and the inline
   close-X SVG path has fill="black" hardcoded. */
[data-theme="dark"] .modal-title,
[data-theme="dark"] .modal-title b,
[data-theme="dark"] .modal-header h5 { color: var(--bz-text) !important; }
[data-theme="dark"] .modal-body p,
[data-theme="dark"] .modal-body label,
[data-theme="dark"] .modal-body .form-group label { color: var(--bz-text) !important; }
[data-theme="dark"] .modal-body textarea,
[data-theme="dark"] .modal-body .form-control {
    background: var(--bz-surface-2) !important;
    color: var(--bz-text) !important;
    border-color: var(--bz-border) !important;
}
[data-theme="dark"] .modal-footer .more_know.lets {
    background: var(--bz-surface-2) !important;
    color: var(--bz-text) !important;
    border-color: var(--bz-border) !important;
}
[data-theme="dark"] .modal-footer .more_know.blue {
    background: var(--bz-accent) !important;
    color: #fff !important;
}

/* Close X (inline SVG had fill="black") */
[data-theme="dark"] .closes svg path,
[data-theme="dark"] .modal-header .closes svg path,
[data-theme="dark"] .modal-header button.close,
[data-theme="dark"] .modal-header .close { color: var(--bz-text) !important; fill: var(--bz-text) !important; }
[data-theme="dark"] .closes svg rect { fill: var(--bz-text) !important; fill-opacity: .8 !important; }

/* ─── Description meta-footer hr (v41) ────────────────────
   Inline style hardcodes `border-top: 1px solid #f1f5f9` which
   looks white against the dark page bg. Restore the muted
   border + muted text. */
[data-theme="dark"] .bz-item-meta-footer { border-top-color: var(--bz-border) !important; }
[data-theme="dark"] .bz-item-meta-footer,
[data-theme="dark"] .bz-item-meta-footer .bz-meta-id,
[data-theme="dark"] .bz-item-meta-footer b { color: var(--bz-text-3) !important; }
[data-theme="dark"] .bz-meta-claim { color: var(--bz-text-3) !important; }
[data-theme="dark"] .bz-meta-claim:hover { color: #f87171 !important; }

/* ─── Promote ad — services page (v42) ────────────────────
   /profile/obyavlenie/items/service/* — packet cards are white
   with black text; pay-summary uses a light-blue gradient that
   doesnt belong in dark mode; section titles inherit #0f172a. */

/* Page heading + sub */
[data-theme="dark"] .op_ma h1,
[data-theme="dark"] .op_ma .insco,
[data-theme="dark"] .place_main h1,
[data-theme="dark"] .place_main h2,
[data-theme="dark"] .place_main h3,
[data-theme="dark"] .place_main h4 { color: var(--bz-text) !important; }
[data-theme="dark"] .bz-pkg-h4 { color: var(--bz-text) !important; }
[data-theme="dark"] .bz-pkg-sub { color: var(--bz-text-3) !important; }

/* Packet cards */
[data-theme="dark"] .bz-pkg-card {
    background: var(--bz-surface) !important;
    border-color: var(--bz-border) !important;
    color: var(--bz-text) !important;
}
[data-theme="dark"] .bz-pkg-card:hover {
    border-color: #f59e0b !important;
    box-shadow: 0 4px 12px rgba(245,158,11,.18) !important;
}
[data-theme="dark"] .bz-pkg-radio:checked + .bz-pkg-card {
    background: rgba(59,108,255,.12) !important;
    border-color: #60a5fa !important;
    box-shadow: 0 0 0 3px rgba(96,165,250,.20) !important;
}
[data-theme="dark"] .bz-pkg-card-name { color: var(--bz-text) !important; }
[data-theme="dark"] .bz-pkg-card-price { color: #fbbf24 !important; }
[data-theme="dark"] .bz-pkg-card-price span { color: var(--bz-text-3) !important; }
[data-theme="dark"] .bz-pkg-card-views { color: var(--bz-text-2) !important; }
[data-theme="dark"] .bz-pkg-card-views svg path { fill: var(--bz-text-2); }
[data-theme="dark"] .bz-pkg-card-discount {
    background: rgba(245,158,11,.18) !important;
    color: #fbbf24 !important;
}

/* Classic-services accordion summary */
[data-theme="dark"] .bz-classic-acc,
[data-theme="dark"] .bz-classic-acc summary {
    color: var(--bz-text) !important;
}
[data-theme="dark"] .bz-classic-acc summary { background: var(--bz-surface) !important; border: 1px solid var(--bz-border) !important; border-radius: 10px !important; }

/* Pay summary card — replace light-blue gradient with dark surface */
[data-theme="dark"] .bz-pay-summary {
    background: var(--bz-surface) !important;
    border-color: var(--bz-border) !important;
    box-shadow: none !important;
}
[data-theme="dark"] .bz-pay-summary-label { color: var(--bz-text-2) !important; }
[data-theme="dark"] .bz-pay-summary-value { color: var(--bz-text) !important; }
[data-theme="dark"] .bz-pay-summary-value span { color: var(--bz-text-3) !important; }
[data-theme="dark"] .bz-pay-section-title { color: var(--bz-text) !important; }

/* Pay method icons + labels */
[data-theme="dark"] .bz-pay-mag .bz-pay-ico { background: var(--bz-surface-2) !important; }
[data-theme="dark"] .bz-pay-mag .bz-pay-ico.bz-pay-logo { background: #fff !important; border-color: var(--bz-border) !important; }
[data-theme="dark"] .bz-pay-mag .bz-pay-name { color: var(--bz-text) !important; }
[data-theme="dark"] .bz-pay-mag .bz-pay-sub { color: var(--bz-text-3) !important; }

/* ─── Home blog widget — featured top image (v43) ─────────
   .capital_left_top has <img z-index:-1>; in dark mode the
   parent .capital_left paints var(--bz-surface) which the
   negative-z img drops behind. Give the child its own stacking
   context so the image stays clipped inside the card. */
[data-theme="dark"] a.capital_left_top,
[data-theme="dark"] .capital_left_top { isolation: isolate; background: transparent !important; }
[data-theme="dark"] a.capital_left_top > img { z-index: 0 !important; }
[data-theme="dark"] a.capital_left_top * { z-index: 1; }
/* Reinforce gradient so white title stays readable */
[data-theme="dark"] a.capital_left_top::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.7) 100%);
    z-index: 0; pointer-events: none;
}

/* ─── Shop page (v44) ──────────────────────────────────────
   /shops/<slug> — section.marks .rest_top_left and .tabs_rest
   are hardcoded #FFFFFF; tab text colors are #6A7990 / #000. */
[data-theme="dark"] section.marks .rest_top_left,
[data-theme="dark"] section.marks .tabs_rest {
    background: var(--bz-surface) !important;
    border-color: var(--bz-border) !important;
    color: var(--bz-text) !important;
}
[data-theme="dark"] section.marks .rest_top_left .apple_btn {
    background: var(--bz-surface) !important;
    border-color: var(--bz-border) !important;
}
[data-theme="dark"] section.marks .rest_top_left h1,
[data-theme="dark"] section.marks .rest_top_left .about_apples h1,
[data-theme="dark"] section.marks .rest_top_left .about_apples * { color: var(--bz-text) !important; }
[data-theme="dark"] section.marks .rest_top_left .raiting_brend a,
[data-theme="dark"] section.marks .rest_top_left .about_raiting_block_item p,
[data-theme="dark"] section.marks .rest_top_left .about_raiting_block_item p b { color: var(--bz-text-2) !important; }
[data-theme="dark"] section.marks .rest_top_left .about_raiting_block_item p b { color: var(--bz-text) !important; }

/* Tabs */
[data-theme="dark"] section.marks .tabs_rest ul.link_tab li a { color: var(--bz-text-2) !important; }
[data-theme="dark"] section.marks .tabs_rest ul.link_tab li a.active,
[data-theme="dark"] section.marks .tabs_rest ul.link_tab li a:hover { color: var(--bz-text) !important; }
[data-theme="dark"] section.marks .tabs_rest ul.link_social { border-color: var(--bz-border) !important; }

/* "Оценка" ghost button & "Подписаться" stays */
[data-theme="dark"] section.marks .review_btn.more_know:not(.blue) {
    background: var(--bz-surface-2) !important;
    color: var(--bz-text) !important;
    border-color: var(--bz-border) !important;
}

/* Working hours / phone row labels */
[data-theme="dark"] section.marks .rest_top_left b,
[data-theme="dark"] section.marks .rest_top_left span,
[data-theme="dark"] section.marks .rest_top_left a { color: var(--bz-text) !important; }
[data-theme="dark"] section.marks .rest_top_left a[href^="tel:"],
[data-theme="dark"] section.marks .rest_top_left a[href*="phone"] { color: var(--bz-accent-2) !important; }

/* ─── Dynprop filter selects (v45) ────────────────────────
   /obyavlenie/list/<cat> dynprop dropdowns (Цена, Тип кузова…)
   are styled by .filter-element > span (white bg + dark text). */
[data-theme="dark"] .filter-element > span {
    background-color: transparent !important;
    border-color: var(--bz-border) !important;
    color: var(--bz-text-2) !important;
}
[data-theme="dark"] .filter-element > span:hover { border-color: var(--bz-accent-2) !important; }
[data-theme="dark"] .filter-element > span div { color: var(--bz-accent-2) !important; }
[data-theme="dark"] .filter-title-text { color: var(--bz-text) !important; }
/* Caret arrow icon — invert so it's visible on dark */
[data-theme="dark"] .filter-element > span::after { filter: invert(.82) brightness(1.1); }

/* Popup dropdown body */
[data-theme="dark"] .filter-element-popup {
    background-color: var(--bz-surface) !important;
    border: 1px solid var(--bz-border) !important;
    box-shadow: 0 10px 24px rgba(0,0,0,.5) !important;
    color: var(--bz-text) !important;
}
[data-theme="dark"] .filter-element-popup label,
[data-theme="dark"] .filter-element-popup span,
[data-theme="dark"] .filter-element-popup p { color: var(--bz-text) !important; }
[data-theme="dark"] .filter-element-popup input[type="text"],
[data-theme="dark"] .filter-element-popup input[type="number"],
[data-theme="dark"] .filter-element-popup select {
    background: var(--bz-surface-2) !important;
    border-color: var(--bz-border) !important;
    color: var(--bz-text) !important;
}

/* ─── Filter form — force fully transparent (v46) ──────────
   User reported a visible darker panel around the filter row.
   Strengthen the override: kill any inherited surface, border,
   radius and shadow on the form + immediate wrappers. */
[data-theme="dark"] form.filtered_recket,
[data-theme="dark"] form.filtered_recket.niked,
[data-theme="dark"] .sorted_recket,
[data-theme="dark"] .sorted_recket.filter_rubrica,
[data-theme="dark"] .filter_rubrica,
[data-theme="dark"] .agre_rocket,
[data-theme="dark"] .sort,
[data-theme="dark"] .filter-items,
[data-theme="dark"] .filter-button,
[data-theme="dark"] .niked,
[data-theme="dark"] .niked > div,
[data-theme="dark"] .niked > form {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

/* form-group inside .niked legacy renders a robita_select.png
   background-image — kill it. */
[data-theme="dark"] form.filtered_recket .form-group {
    background-image: none !important;
    background: transparent !important;
}

/* hr divider above the filter form */
[data-theme="dark"] .hr_title {
    border-color: var(--bz-border) !important;
    background: transparent !important;
}

/* ─── Profile items-list (v47) ─────────────────────────────
   /profile/items-list — three light surfaces leak through:
   .tab_top_cabinet (tabs strip), search form (.bg-white)
   and .bz-select-all-row. Card and bulk-bar are already OK. */
[data-theme="dark"] .tab_top_cabinet {
    background: var(--bz-surface) !important;
    border-color: var(--bz-border) !important;
}
[data-theme="dark"] .tab_top_cabinet li a,
[data-theme="dark"] .tab_top_cabinet li a span { color: var(--bz-text-2) !important; }
[data-theme="dark"] .tab_top_cabinet li a.show,
[data-theme="dark"] .tab_top_cabinet li a.show span,
[data-theme="dark"] .tab_top_cabinet li a.active,
[data-theme="dark"] .tab_top_cabinet li a:hover { color: var(--bz-text) !important; }

/* Search panel uses Bootstrap utility .bg-white */
[data-theme="dark"] .c_cabinet .bg-white,
[data-theme="dark"] .cabinet .bg-white {
    background-color: var(--bz-surface) !important;
    border-color: var(--bz-border) !important;
    color: var(--bz-text) !important;
}
[data-theme="dark"] .c_cabinet .bg-white .form-control,
[data-theme="dark"] .c_cabinet .bg-white input,
[data-theme="dark"] .c_cabinet .bg-white select {
    background: var(--bz-surface-2) !important;
    color: var(--bz-text) !important;
    border-color: var(--bz-border) !important;
}

/* "Выбрать все" row */
[data-theme="dark"] .bz-select-all-row {
    background: var(--bz-surface) !important;
    border-color: var(--bz-border) !important;
}
[data-theme="dark"] .bz-select-all-text { color: var(--bz-text) !important; }
[data-theme="dark"] .bz-select-all-text em { color: var(--bz-text-3) !important; }
[data-theme="dark"] .bz-select-all-mark {
    background: var(--bz-surface-2) !important;
    border-color: var(--bz-border) !important;
}
[data-theme="dark"] .bz-select-all:hover .bz-select-all-mark { border-color: var(--bz-accent-2) !important; }
[data-theme="dark"] .bz-select-all-input:checked + .bz-select-all-mark,
[data-theme="dark"] .bz-select-all-input:indeterminate + .bz-select-all-mark {
    background-color: var(--bz-accent) !important;
    border-color: var(--bz-accent) !important;
}

/* ─── Profile items-list — remaining surfaces (v48) ────────
   1) Select2 trigger ("Недвижимость" picker) → dark surface
   2) Bulk-action bar (`1 выбрано  ...`) → dark surface
*/

/* Select2 single dropdown trigger inside cabinet */
[data-theme="dark"] .c_cabinet .select2-container--default .select2-selection--single,
[data-theme="dark"] .cabinet .select2-container--default .select2-selection--single,
[data-theme="dark"] .c_cabinet .select2-selection,
[data-theme="dark"] .cabinet .select2-selection {
    background: var(--bz-surface-2) !important;
    border-color: var(--bz-border) !important;
    color: var(--bz-text) !important;
}
[data-theme="dark"] .c_cabinet .select2-selection__rendered,
[data-theme="dark"] .cabinet .select2-selection__rendered { color: var(--bz-text) !important; }
[data-theme="dark"] .c_cabinet .select2-selection__placeholder,
[data-theme="dark"] .cabinet .select2-selection__placeholder { color: var(--bz-text-3) !important; }
[data-theme="dark"] .c_cabinet .select2-selection__arrow b,
[data-theme="dark"] .cabinet .select2-selection__arrow b { border-top-color: var(--bz-text-2) !important; }

/* Select2 dropdown popup (when opened) */
[data-theme="dark"] .select2-container--default .select2-dropdown,
[data-theme="dark"] .select2-dropdown {
    background: var(--bz-surface) !important;
    border-color: var(--bz-border) !important;
    color: var(--bz-text) !important;
}
[data-theme="dark"] .select2-container--default .select2-results__option,
[data-theme="dark"] .select2-results__option { color: var(--bz-text) !important; }
[data-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected],
[data-theme="dark"] .select2-results__option--highlighted {
    background: var(--bz-accent) !important;
    color: #fff !important;
}
[data-theme="dark"] .select2-search--dropdown .select2-search__field {
    background: var(--bz-surface-2) !important;
    color: var(--bz-text) !important;
    border-color: var(--bz-border) !important;
}

/* Bulk action bar */
[data-theme="dark"] .bz-bulk-bar {
    background: var(--bz-surface) !important;
    border-color: var(--bz-accent) !important;
    box-shadow: 0 4px 14px rgba(59,130,246,.18) !important;
}
[data-theme="dark"] .bz-bulk-info { color: var(--bz-text) !important; }
[data-theme="dark"] .bz-bulk-info #bz-bulk-count { color: var(--bz-accent-2) !important; }
[data-theme="dark"] .bz-bulk-clear { color: var(--bz-text-2) !important; }
[data-theme="dark"] .bz-bulk-clear:hover { color: var(--bz-accent-2) !important; }

/* ─── Profile card "Сообщения" button (v49) ────────────────
   Legacy `.flexis.btns a.more_know.lets { color:#000 !important }`
   beat the prior override on specificity. Match the legacy
   selector explicitly so dark mode wins. */
html[data-theme="dark"] .flexis.btns a.more_know.lets,
html[data-theme="dark"] .flexis.btns a.more_know.lets.bz-btn-ghost {
    background: var(--bz-surface-2) !important;
    color: var(--bz-text) !important;
    border: 1px solid var(--bz-border) !important;
}
html[data-theme="dark"] .flexis.btns a.more_know.lets:hover {
    background: var(--bz-surface) !important;
    color: var(--bz-accent-2) !important;
    border-color: var(--bz-accent) !important;
}
html[data-theme="dark"] .flexis.btns a.more_know.lets img[alt="letter2"],
html[data-theme="dark"] .flexis.btns a.more_know.lets img[src*="letter2"] { filter: invert(.9) brightness(1.4); }

/* ─── /pro (Bisyor Pro) page (v50) ─────────────────────────
   Pricing page is fully white in light mode; convert every
   surface, text, tier-tag and pill for dark mode. */

[data-theme="dark"] .bz-pro-wrap {
    background: var(--bz-bg) !important;
}
[data-theme="dark"] .bz-pro-badge {
    background: rgba(96,165,250,.15) !important;
    color: var(--bz-accent-2) !important;
}
[data-theme="dark"] .bz-pro-h1 { color: var(--bz-text) !important; }
[data-theme="dark"] .bz-pro-sub { color: var(--bz-text-2) !important; }

/* Pricing cards */
[data-theme="dark"] .bz-pro-card {
    background: var(--bz-surface) !important;
    border-color: var(--bz-border) !important;
}
[data-theme="dark"] .bz-pro-card:hover { box-shadow: 0 12px 28px rgba(0,0,0,.45) !important; }
[data-theme="dark"] .bz-pro-card.popular {
    border-color: var(--bz-accent) !important;
    box-shadow: 0 12px 32px rgba(59,130,246,.25) !important;
}
[data-theme="dark"] .bz-pro-tier-name { color: var(--bz-text) !important; }
[data-theme="dark"] .bz-pro-tier-tag.standard { background: var(--bz-surface-2) !important; color: var(--bz-text-2) !important; }
[data-theme="dark"] .bz-pro-tier-tag.gold     { background: rgba(239,108,0,.18) !important; color: #fbbf24 !important; }
[data-theme="dark"] .bz-pro-tier-tag.platinum { background: rgba(106,27,154,.25) !important; color: #c084fc !important; }
[data-theme="dark"] .bz-pro-tier-tag.diamond  { background: linear-gradient(135deg, rgba(96,165,250,.20), rgba(192,132,252,.20)) !important; color: var(--bz-accent-2) !important; }

[data-theme="dark"] .bz-pro-price { color: var(--bz-accent-2) !important; }
[data-theme="dark"] .bz-pro-price small { color: var(--bz-text-3) !important; }
[data-theme="dark"] .bz-pro-card.popular .bz-pro-price { color: var(--bz-accent) !important; }

[data-theme="dark"] .bz-pro-feat-list {
    color: var(--bz-text) !important;
    border-top-color: var(--bz-border) !important;
}
[data-theme="dark"] .bz-pro-feat-list li svg { color: var(--bz-accent-2) !important; }
[data-theme="dark"] .bz-pro-feat-list li.muted { color: var(--bz-text-3) !important; }
[data-theme="dark"] .bz-pro-feat-list li.muted svg { color: var(--bz-text-3) !important; opacity: .4; }
[data-theme="dark"] .bz-pro-feat-list li b { color: var(--bz-text) !important; }

/* Buy CTA */
[data-theme="dark"] .bz-pro-buy {
    background: var(--bz-accent) !important;
    color: #fff !important;
}
[data-theme="dark"] .bz-pro-buy:hover { background: #2563eb !important; }

/* Features grid (bottom) */
[data-theme="dark"] .bz-feat {
    background: var(--bz-surface) !important;
    border-color: var(--bz-border) !important;
}
[data-theme="dark"] .bz-feat:hover { box-shadow: 0 10px 26px rgba(0,0,0,.4) !important; }
[data-theme="dark"] .bz-feat-icon {
    background: rgba(96,165,250,.15) !important;
    color: var(--bz-accent-2) !important;
}
[data-theme="dark"] .bz-feat-title { color: var(--bz-text) !important; }
[data-theme="dark"] .bz-feat-desc  { color: var(--bz-text-2) !important; }

/* Extras card */
[data-theme="dark"] .bz-pro-extras {
    background: var(--bz-surface) !important;
    border-color: var(--bz-border) !important;
    color: var(--bz-text) !important;
}
[data-theme="dark"] .bz-pro-extras h2,
[data-theme="dark"] .bz-pro-extras h3,
[data-theme="dark"] .bz-pro-extras p { color: var(--bz-text) !important; }

/* Active subscription banner */
[data-theme="dark"] .bz-pro-active {
    background: rgba(34,197,94,.18) !important;
    color: #4ade80 !important;
    border: 1px solid rgba(34,197,94,.4) !important;
}

/* ─── /packages page (v51) ─────────────────────────────────
   Tier-list page (similar to /pro), but uses .bz-pkg-* /
   .bz-why-* / .bz-how-* class families. */
[data-theme="dark"] .bz-pkg-wrap { background: var(--bz-bg) !important; }
[data-theme="dark"] .bz-pkg-h1 { color: var(--bz-text) !important; }
[data-theme="dark"] .bz-pkg-sub { color: var(--bz-text-2) !important; }

[data-theme="dark"] .bz-pkg-balance {
    background: var(--bz-surface) !important;
    border-color: var(--bz-border) !important;
    color: var(--bz-text) !important;
}
[data-theme="dark"] .bz-pkg-balance b { color: var(--bz-accent-2) !important; }

[data-theme="dark"] .bz-why-h2 { color: var(--bz-text) !important; }
[data-theme="dark"] .bz-why-card {
    background: var(--bz-surface) !important;
    border-color: var(--bz-border) !important;
}
[data-theme="dark"] .bz-why-num { color: var(--bz-accent-2) !important; }
[data-theme="dark"] .bz-why-lab { color: var(--bz-text-2) !important; }

/* Pricing cards (.bz-pkg-card is shared name — scope to wrap to
   avoid colliding with services page chip cards) */
[data-theme="dark"] .bz-pkg-wrap .bz-pkg-card {
    background: var(--bz-surface) !important;
    border-color: var(--bz-border) !important;
}
[data-theme="dark"] .bz-pkg-wrap .bz-pkg-card.discounted {
    border-color: var(--bz-accent) !important;
    box-shadow: 0 8px 24px rgba(59,130,246,.20) !important;
}
[data-theme="dark"] .bz-pkg-disc {
    background: var(--bz-accent) !important;
    color: #fff !important;
}
[data-theme="dark"] .bz-pkg-name { color: var(--bz-text) !important; }
[data-theme="dark"] .bz-pkg-views { color: var(--bz-accent-2) !important; }
[data-theme="dark"] .bz-pkg-views-lab { color: var(--bz-text-2) !important; }
[data-theme="dark"] .bz-pkg-price { color: var(--bz-text) !important; }
[data-theme="dark"] .bz-pkg-buy {
    background: var(--bz-accent) !important;
    color: #fff !important;
}
[data-theme="dark"] .bz-pkg-buy:hover { background: #2563eb !important; }

[data-theme="dark"] .bz-pkg-how-h2 { color: var(--bz-text) !important; }
[data-theme="dark"] .bz-how-step {
    background: var(--bz-surface) !important;
    border-color: var(--bz-border) !important;
    color: var(--bz-text) !important;
}
[data-theme="dark"] .bz-how-step h4 { color: var(--bz-text) !important; }
[data-theme="dark"] .bz-how-step p { color: var(--bz-text-2) !important; }

/* ─── /profile/view-balance page (v51) ────────────────────
   Big dashboard page — hero, KPIs, chart, table, cross-sell. */
[data-theme="dark"] .bz-bal-wrap { background: var(--bz-bg) !important; }
[data-theme="dark"] .bz-bal-head h1 { color: var(--bz-text) !important; }
[data-theme="dark"] .bz-bal-head p  { color: var(--bz-text-2) !important; }

/* Outer .bz-bal-hero is just a max-width spacer — no surface.
   Only the inner card gets the painted background + border. */
[data-theme="dark"] .bz-bal-hero {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}
[data-theme="dark"] .bz-bal-hero-inner {
    background: var(--bz-surface) !important;
    border-color: var(--bz-border) !important;
    color: var(--bz-text) !important;
}
/* Cabinet wrappers behind the hero need to be transparent so the
   page bg shows through (was painting a secondary surface tint). */
[data-theme="dark"] section.cabinet,
[data-theme="dark"] section.cabinet > .container,
[data-theme="dark"] section.cabinet .col-xl-9,
[data-theme="dark"] section.cabinet .col-md-8,
[data-theme="dark"] section.cabinet .row,
[data-theme="dark"] .bz-bal-wrap > .container {
    background: transparent !important;
}
[data-theme="dark"] .bz-bal-hero-num { color: var(--bz-text) !important; }
[data-theme="dark"] .bz-bal-hero-lab { color: var(--bz-text-3) !important; }
[data-theme="dark"] .bz-bal-hero-sub { color: var(--bz-text-2) !important; }
[data-theme="dark"] .bz-bal-hero-cta {
    background: var(--bz-accent) !important;
    color: #fff !important;
}
[data-theme="dark"] .bz-bal-hero-cta:hover { background: #2563eb !important; }
[data-theme="dark"] .bz-bal-hero-cta.alt {
    background: transparent !important;
    color: var(--bz-text) !important;
    border-color: var(--bz-border) !important;
}
[data-theme="dark"] .bz-bal-hero-cta.alt:hover { background: var(--bz-surface-2) !important; color: var(--bz-text) !important; }

[data-theme="dark"] .bz-bal-hero-mini {
    background: var(--bz-surface-2) !important;
    border-color: var(--bz-border) !important;
}
[data-theme="dark"] .bz-bal-hero-mini-lab { color: var(--bz-text-3) !important; }
[data-theme="dark"] .bz-bal-hero-mini-num { color: var(--bz-text) !important; }

/* Period switcher */
[data-theme="dark"] .bz-bal-period a.off {
    background: var(--bz-surface) !important;
    color: var(--bz-text-2) !important;
    border-color: var(--bz-border) !important;
}
[data-theme="dark"] .bz-bal-period a.on {
    background: var(--bz-accent) !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(59,130,246,.35) !important;
}

/* KPI cards */
[data-theme="dark"] .bz-kpi-card {
    background: var(--bz-surface) !important;
    border-color: var(--bz-border) !important;
}
[data-theme="dark"] .bz-kpi-card:hover { border-color: var(--bz-accent) !important; box-shadow: 0 4px 16px rgba(59,130,246,.18) !important; }
[data-theme="dark"] .bz-kpi-lab { color: var(--bz-text-3) !important; }
[data-theme="dark"] .bz-kpi-num { color: var(--bz-text) !important; }
[data-theme="dark"] .bz-kpi-num.green  { color: #4ade80 !important; }
[data-theme="dark"] .bz-kpi-num.amber  { color: #fbbf24 !important; }
[data-theme="dark"] .bz-kpi-num.purple { color: #c084fc !important; }
[data-theme="dark"] .bz-kpi-sub { color: var(--bz-text-2) !important; }

/* Chart */
[data-theme="dark"] .bz-bal-chart {
    background: var(--bz-surface) !important;
    border-color: var(--bz-border) !important;
}
[data-theme="dark"] .bz-bal-chart h3 { color: var(--bz-text) !important; }
[data-theme="dark"] .bz-bal-chart p  { color: var(--bz-text-2) !important; }
[data-theme="dark"] .bz-bal-bar.zero { background: var(--bz-surface-2) !important; }
[data-theme="dark"] .bz-bal-axis { color: var(--bz-text-3) !important; }

/* Two-up + tables */
[data-theme="dark"] .bz-bal-card {
    background: var(--bz-surface) !important;
    border-color: var(--bz-border) !important;
}
[data-theme="dark"] .bz-bal-card h3 { color: var(--bz-text) !important; }
[data-theme="dark"] .bz-bal-table th {
    color: var(--bz-text-3) !important;
    border-bottom-color: var(--bz-border) !important;
}
[data-theme="dark"] .bz-bal-table td {
    color: var(--bz-text) !important;
    border-bottom-color: var(--bz-border) !important;
}
[data-theme="dark"] .bz-bal-progress > div { color: var(--bz-text) !important; }
[data-theme="dark"] .bz-bal-progress .bar { background: var(--bz-surface-2) !important; }
[data-theme="dark"] .bz-bal-progress .bar > div.depleted { background: var(--bz-text-3) !important; }
[data-theme="dark"] .bz-bal-pkg-name { color: var(--bz-text) !important; }
[data-theme="dark"] .bz-bal-pkg-name.welcome { color: #f472b6 !important; }
[data-theme="dark"] .bz-bal-free {
    color: #4ade80 !important;
    background: rgba(34,197,94,.18) !important;
}

/* Cross-sell banner */
[data-theme="dark"] .bz-bal-cross {
    background: var(--bz-surface) !important;
    border-color: var(--bz-border) !important;
}
[data-theme="dark"] .bz-bal-cross-text h4 { color: var(--bz-text) !important; }
[data-theme="dark"] .bz-bal-cross-text p  { color: var(--bz-text-2) !important; }
[data-theme="dark"] .bz-bal-cross a {
    background: var(--bz-accent) !important;
    color: #fff !important;
}

/* Inline style overrides — table cells with hardcoded #6a7990 / #1c1c1c */
[data-theme="dark"] .bz-bal-card td[style*="color:#6a7990"],
[data-theme="dark"] .bz-bal-card td[style*="color: #6a7990"] { color: var(--bz-text-2) !important; }
[data-theme="dark"] .bz-bal-card span[style*="color:#8d9aaf"],
[data-theme="dark"] .bz-bal-card div[style*="color:#8d9aaf"] { color: var(--bz-text-3) !important; }
[data-theme="dark"] .bz-bal-card a[style*="color:#1c1c1c"] { color: var(--bz-text) !important; }
[data-theme="dark"] .bz-bal-card img[style*="background:#f0f3f8"] { background: var(--bz-surface-2) !important; }

/* ─── /view-balance — icon colours (v52) ──────────────────
   Header h1 has inline svg with fill="currentColor"; ensure
   currentColor on its parent is light. Also any rogue
   fill="#1c1c1c" / fill="black" inside the balance page must
   be remapped. */
[data-theme="dark"] .bz-bal-head h1,
[data-theme="dark"] .bz-bal-head h1 svg,
[data-theme="dark"] .bz-bal-head h1 svg path { color: var(--bz-text) !important; fill: var(--bz-text) !important; }
[data-theme="dark"] .bz-bal-wrap svg[fill="currentColor"] path,
[data-theme="dark"] .bz-bal-wrap svg path[fill="currentColor"] { fill: currentColor !important; }
/* Force every plain SVG inside the page to inherit currentColor */
[data-theme="dark"] .bz-bal-wrap svg path[fill="black"],
[data-theme="dark"] .bz-bal-wrap svg path[fill="#000"],
[data-theme="dark"] .bz-bal-wrap svg path[fill="#000000"],
[data-theme="dark"] .bz-bal-wrap svg path[fill="#1c1c1c"] { fill: currentColor !important; }
[data-theme="dark"] .bz-bal-hero-cta svg,
[data-theme="dark"] .bz-bal-hero-cta svg path { fill: currentColor !important; }

/* ─── /view-balance — numbers + icons (v53) ────────────────
   Inline styles hardcode color:#1c1c1c on numbers (mini-num,
   kpi-num, table cells, etc.) and many SVGs use fill="black".
   Aggressive blanket override scoped to .bz-bal-wrap. */
[data-theme="dark"] .bz-bal-wrap,
[data-theme="dark"] .bz-bal-wrap * { color: inherit; }

/* Force every text-bearing element inside the balance page that
   inline-styles a dark colour to use bright text instead. */
[data-theme="dark"] .bz-bal-wrap [style*="color:#1c1c1c"],
[data-theme="dark"] .bz-bal-wrap [style*="color: #1c1c1c"],
[data-theme="dark"] .bz-bal-wrap [style*="color:#000"],
[data-theme="dark"] .bz-bal-wrap [style*="color:#212529"] { color: var(--bz-text) !important; }
[data-theme="dark"] .bz-bal-wrap [style*="color:#6a7990"],
[data-theme="dark"] .bz-bal-wrap [style*="color: #6a7990"],
[data-theme="dark"] .bz-bal-wrap [style*="color:#566073"] { color: var(--bz-text-2) !important; }
[data-theme="dark"] .bz-bal-wrap [style*="color:#8d9aaf"] { color: var(--bz-text-3) !important; }

/* All inner cards/mini panels with hardcoded #fff bg */
[data-theme="dark"] .bz-bal-wrap [style*="background:#fff"],
[data-theme="dark"] .bz-bal-wrap [style*="background:#ffffff"],
[data-theme="dark"] .bz-bal-wrap [style*="background: #fff"],
[data-theme="dark"] .bz-bal-wrap [style*="background: #ffffff"] { background: var(--bz-surface-2) !important; }
[data-theme="dark"] .bz-bal-wrap [style*="background:#f7f9fd"],
[data-theme="dark"] .bz-bal-wrap [style*="background:#e8f5e9"] { background: var(--bz-surface-2) !important; }

/* SVG icons — remap hardcoded fill="black", fill="#000" etc. */
[data-theme="dark"] .bz-bal-wrap svg[fill="black"],
[data-theme="dark"] .bz-bal-wrap svg path[fill="black"],
[data-theme="dark"] .bz-bal-wrap svg path[fill="#000"],
[data-theme="dark"] .bz-bal-wrap svg path[fill="#000000"],
[data-theme="dark"] .bz-bal-wrap svg path[fill="#1c1c1c"] { fill: var(--bz-text) !important; }
[data-theme="dark"] .bz-bal-wrap svg path[stroke="black"],
[data-theme="dark"] .bz-bal-wrap svg path[stroke="#000"],
[data-theme="dark"] .bz-bal-wrap svg path[stroke="#1c1c1c"] { stroke: var(--bz-text) !important; }
/* Default any other SVG to currentColor so they pick up parent text */
[data-theme="dark"] .bz-bal-wrap svg { color: inherit; }
[data-theme="dark"] .bz-bal-wrap svg path[fill="currentColor"] { fill: currentColor !important; }

/* Specifically: numbers inside the inner card */
[data-theme="dark"] .bz-bal-hero-num,
[data-theme="dark"] .bz-bal-hero-mini-num,
[data-theme="dark"] .bz-kpi-num { color: var(--bz-text) !important; }

/* ─── /help — Help center (v54) ───────────────────────────
   Dedicated help layout. Surfaces & text remap. */

/* Help header strip */
[data-theme="dark"] .helping_header,
[data-theme="dark"] .help_center {
    background: var(--bz-surface) !important;
    border-color: var(--bz-border) !important;
    color: var(--bz-text) !important;
}
[data-theme="dark"] .helping_header h1,
[data-theme="dark"] .helping_header h2 { color: var(--bz-text) !important; }
[data-theme="dark"] .helping_header p,
[data-theme="dark"] .help_center p { color: var(--bz-text-2) !important; }

[data-theme="dark"] .help_lang_switch a,
[data-theme="dark"] .help_lang_switch span { color: var(--bz-text-2) !important; }
[data-theme="dark"] .help_lang_switch a.active,
[data-theme="dark"] .help_lang_switch a:hover { color: var(--bz-text) !important; }

/* Search bar */
/* Scope to /help only — main header search uses the same class. */
[data-theme="dark"] .helping_header form.search_form_header,
[data-theme="dark"] .help_center form.search_form_header {
    background: var(--bz-surface-2) !important;
    border-color: var(--bz-border) !important;
}
[data-theme="dark"] .helping_header form.search_form_header input,
[data-theme="dark"] .help_center form.search_form_header input {
    background: transparent !important;
    color: var(--bz-text) !important;
}
[data-theme="dark"] .helping_header form.search_form_header input::placeholder,
[data-theme="dark"] .help_center form.search_form_header input::placeholder { color: var(--bz-text-3) !important; }
[data-theme="dark"] .helping_header form.search_form_header button,
[data-theme="dark"] .help_center form.search_form_header button {
    background: var(--bz-accent) !important;
    color: #fff !important;
}

/* Tabs layout */
[data-theme="dark"] section.helping,
[data-theme="dark"] .help_tab {
    background: var(--bz-bg) !important;
    color: var(--bz-text) !important;
}
[data-theme="dark"] .help_tab_left {
    background: var(--bz-surface) !important;
    border-color: var(--bz-border) !important;
}
[data-theme="dark"] .help_tab_left ul li a { color: var(--bz-text-2) !important; }
[data-theme="dark"] .help_tab_left ul li a:hover,
[data-theme="dark"] .help_tab_left ul li a.active {
    color: var(--bz-text) !important;
    background: var(--bz-surface-2) !important;
}

/* Tab content (.for_business / general articles) */
[data-theme="dark"] .help_tab .tab-content,
[data-theme="dark"] .tab_bottom_help,
[data-theme="dark"] .for_business {
    background: var(--bz-surface) !important;
    border-color: var(--bz-border) !important;
    color: var(--bz-text) !important;
}
[data-theme="dark"] .for_business h3,
[data-theme="dark"] .for_business h5,
[data-theme="dark"] .for_business h4 { color: var(--bz-text) !important; }
[data-theme="dark"] .for_business p { color: var(--bz-text-2) !important; }
[data-theme="dark"] .for_business ul li a {
    color: var(--bz-text-2) !important;
    background: transparent !important;
}
[data-theme="dark"] .for_business ul li a.active,
[data-theme="dark"] .for_business ul li a:hover {
    color: var(--bz-accent-2) !important;
    background: var(--bz-surface-2) !important;
}

/* Contact buttons */
[data-theme="dark"] a.tel_help,
[data-theme="dark"] a.support_services {
    background: var(--bz-surface-2) !important;
    color: var(--bz-text) !important;
    border-color: var(--bz-border) !important;
}
[data-theme="dark"] a.tel_help:hover,
[data-theme="dark"] a.support_services:hover {
    background: var(--bz-surface) !important;
    color: var(--bz-accent-2) !important;
    border-color: var(--bz-accent) !important;
}

/* .in_hat — header strip inside content */
[data-theme="dark"] .in_hat {
    background: var(--bz-surface-2) !important;
    border-color: var(--bz-border) !important;
    color: var(--bz-text) !important;
}

/* Help footer */
[data-theme="dark"] .help_footer {
    background: var(--bz-surface) !important;
    border-color: var(--bz-border) !important;
    color: var(--bz-text-2) !important;
}
[data-theme="dark"] .help_footer a { color: var(--bz-text) !important; }
[data-theme="dark"] .help_footer a:hover { color: var(--bz-accent-2) !important; }

/* Help article view (help-in / help-one-item) */
[data-theme="dark"] .helping h1,
[data-theme="dark"] .helping h2,
[data-theme="dark"] .helping h3,
[data-theme="dark"] .helping h4 { color: var(--bz-text) !important; }
[data-theme="dark"] .helping p,
[data-theme="dark"] .helping li,
[data-theme="dark"] .helping span,
[data-theme="dark"] .helping div { color: var(--bz-text) !important; }
[data-theme="dark"] .helping a { color: var(--bz-accent-2) !important; }
[data-theme="dark"] .helping a:hover { color: var(--bz-accent) !important; }
[data-theme="dark"] .helping img { filter: brightness(.95); }