/* =====================================================================
 * BlaBlaPrice dark theme (html[data-theme="dark"], set by js/bbp-theme.js).
 * The legacy theme hard-codes colours everywhere, so text and borders are
 * reset broadly with !important and the few accents are restored after.
 * Palette follows claude.ai dark: warm greys, light primary buttons.
 * ===================================================================== */
html[data-theme="dark"] {
    color-scheme: dark;
    --d-canvas: #262624;
    --d-panel: #1f1e1d;
    --d-surface: #30302e;
    --d-raised: #3a3936;
    --d-line: #3e3d3a;
    --d-text: #ececea;
    --d-muted: #a3a29d;
    --d-btn: #ececea;
    --d-btn-text: #1f1e1d;
    --bbp-line: var(--d-line);
    --bbp-tile: var(--d-raised);
}

/* ---------- canvas and panels ---------- */
html[data-theme="dark"],
html[data-theme="dark"] body,
html[data-theme="dark"] main,
html[data-theme="dark"] #main,
html[data-theme="dark"] aside,
html[data-theme="dark"] #aside-right,
html[data-theme="dark"] .popup-container.wide,
html[data-theme="dark"] .popup-container.wide .request-head,
html[data-theme="dark"] .popup-container.wide .request-body,
html[data-theme="dark"] .popup-container.wide .tabs-block,
html[data-theme="dark"] .popup-container.wide .tab-answer,
html[data-theme="dark"] .popup-container.wide .tab-spam,
html[data-theme="dark"] .popup-container.wide .tab-share,
html[data-theme="dark"] .popup-container.wide .request-foot,
html[data-theme="dark"] section.faq,
html[data-theme="dark"] .bbp-example { background-color: var(--d-canvas) !important; }

html[data-theme="dark"] #aside-left,
html[data-theme="dark"] aside:first-of-type,
html[data-theme="dark"] aside .wrap { background-color: var(--d-panel) !important; }

/* ---------- text and lines ---------- */
html[data-theme="dark"] body,
html[data-theme="dark"] body * { color: var(--d-text) !important; border-color: var(--d-line) !important; }
html[data-theme="dark"] body *::placeholder { color: #7d7c78 !important; }

/* muted text */
html[data-theme="dark"] :is(.date, .from, .bbp-subtitle, .bbp-field-hint, .bbp-no-reviews, .bbp-muted, .bbp-price-cur,
    .bbp-composer-hint, .bbp-chip-label, .request-info, .bbp-crumbs, .bbp-crumbs *, .item-accordeon .content, .item-accordeon .content *,
    .blabla-comment .text::before, .bbp-old-price, .bbp-empty p) { color: var(--d-muted) !important; }
html[data-theme="dark"] .blabla-comment .text::before { color: var(--d-muted) !important; }

/* ---------- surfaces (cards, fields, menus, popups) ---------- */
html[data-theme="dark"] :is(.header-search, .bbp-card, .bbp-plan, .request.open-popup, .popup-container, .drop, .drop-menu .drop,
    .item-accordeon, .accordeon-settings .item-accordeon, .share-button, .link-btn, .autocomplete, .nav-menu, .header-menu-content,
    .bbp-price-chip, input, textarea, select, .input, .bbp-auth, .bbp-empty, .blabla-comment .text) { background-color: var(--d-surface) !important; }
html[data-theme="dark"] .popup-container.wide .blabla-comment .text,
html[data-theme="dark"] .bbp-home .blabla-comment .text,
html[data-theme="dark"] .request.open-popup .blabla-comment .text,
html[data-theme="dark"] #main > .center > .blabla-comment .text { background-color: transparent !important; }
html[data-theme="dark"] .popup-container.wide .tab-answer .input-group.bbp-steps::before { background: var(--d-surface) !important; border-color: var(--d-line) !important; }
html[data-theme="dark"] .popup-container.wide .tab-answer .input-group.bbp-steps input.input,
html[data-theme="dark"] .popup-container.wide .tab-answer .input-group.bbp-steps textarea.input { background: transparent !important; }

/* raised: tiles, quiet buttons, hovers, own bubble */
html[data-theme="dark"] :is(.bbp-tile, .menu-button, .close-popup-all, .popup-button:not(.blue),
    .drop-menu .drop a:hover, .request-body .text-right .message .inner, .request-body .text-right .message .inner.inner,
    .request-body .request-info, .bbp-av-none) { background-color: var(--d-raised) !important; }
html[data-theme="dark"] .request-body :not(.text-right) > .message .inner { background: transparent !important; }

/* primary (ink) buttons become light, like claude.ai dark */
html[data-theme="dark"] :is(.popup-button.blue, .menu-button.green, .menu-button.blue, .bbp-btn-primary, .bbp-card-cta, .bbp-new-request,
    .drop-menu.active > a, .popup-container.wide .tab-answer .input-group.bbp-steps.bbp-ready:not(.bbp-step-comment) .bbp-add-comment,
    .popup-container.wide .tab-answer .input-group.bbp-steps.bbp-step-comment.bbp-has-comment .popup-send, .popup-send.blue:not(.no-active)) {
    background-color: var(--d-btn) !important;
    color: var(--d-btn-text) !important;
}
html[data-theme="dark"] :is(.popup-button.blue, .menu-button.green, .bbp-btn-primary, .bbp-card-cta, .drop-menu.active > a, .bbp-add-comment) * { color: var(--d-btn-text) !important; }
html[data-theme="dark"] .popup-send svg,
html[data-theme="dark"] .bbp-add-comment svg { fill: var(--d-btn-text) !important; }
html[data-theme="dark"] .drop-menu > a { background: var(--d-surface) !important; }

/* ---------- accents kept ---------- */
html[data-theme="dark"] .drop-menu .drop a.js-spam { color: #f08a75 !important; }
html[data-theme="dark"] .drop-menu .drop a::before { background-color: #bdbcb7 !important; }
html[data-theme="dark"] .drop-menu .drop a.js-spam::before { background-color: #f08a75 !important; }
html[data-theme="dark"] .bbp-status-offers,
html[data-theme="dark"] .bbp-status-offers *,
html[data-theme="dark"] .bbp-head-status.bbp-status-offers { color: #8fb4ec !important; }
html[data-theme="dark"] .request .request-body .request-info.bbp-status-offers,
html[data-theme="dark"] .bbp-badge { background: #1f2d44 !important; color: #8fb4ec !important; }
html[data-theme="dark"] .bbp-head-status.bbp-status-wait,
html[data-theme="dark"] .request .request-body .request-info.bbp-status-wait { color: #d9b44a !important; }
html[data-theme="dark"] .request .request-body .request-info.bbp-status-wait { background: var(--d-raised) !important; }
html[data-theme="dark"] .count { color: #fff !important; }
html[data-theme="dark"] .bbp-av,
html[data-theme="dark"] .bbp-av * { color: #fff !important; }
html[data-theme="dark"] .alert-danger { background: #3d2320 !important; color: #f4b3a8 !important; }
html[data-theme="dark"] .search-highlight,
html[data-theme="dark"] .autocomplete strong { background: #5a4a1a !important; }

/* ---------- icons and logos ---------- */
html[data-theme="dark"] img[src*="logo-black"],
html[data-theme="dark"] .logo img,
html[data-theme="dark"] .blabla-comment::before { filter: invert(1) brightness(1.1); }
html[data-theme="dark"] svg:not([fill="none"]):not(.bbp-keep) { fill: currentColor; }
html[data-theme="dark"] .bbp-empty svg,
html[data-theme="dark"] .bbp-icon { color: var(--d-muted) !important; }

/* ---------- shadows are too heavy on dark ---------- */
html[data-theme="dark"] :is(.bbp-card, .bbp-plan, .request.open-popup, .drop, .popup-container, .header-search) { box-shadow: 0 1px 0 rgba(0, 0, 0, .25) !important; }
html[data-theme="dark"] .popup-wrapper,
html[data-theme="dark"] .popup-bg { background-color: rgba(0, 0, 0, .6) !important; }

/* ---------- the toggle itself ---------- */
.bbp-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin-right: 6px;
    padding: 0;
    color: #3d4247;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 50%;
    cursor: pointer;
    transition: background .2s;
}
.bbp-theme-toggle:hover { background: rgba(31, 35, 38, .06); }
.bbp-theme-toggle svg { width: 18px; height: 18px; fill: none !important; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bbp-theme-toggle .bbp-moon { display: block; }
.bbp-theme-toggle .bbp-sun { display: none; }
html[data-theme="dark"] .bbp-theme-toggle .bbp-moon { display: none; }
html[data-theme="dark"] .bbp-theme-toggle .bbp-sun { display: block; }
html[data-theme="dark"] .bbp-theme-toggle:hover { background: rgba(255, 255, 255, .08) !important; }
.bbp-theme-toggle.bbp-floating {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 50;
    background: #fff;
    border-color: var(--bbp-line);
    box-shadow: 0 2px 10px rgba(31, 35, 38, .12);
}
html[data-theme="dark"] .bbp-theme-toggle.bbp-floating { background: var(--d-surface) !important; }

/* ---------- second pass: what the first pass missed ---------- */
html[data-theme="dark"] header#header,
html[data-theme="dark"] .popup-container.wide .request-head,
html[data-theme="dark"] .popup-container.wide .request-body,
html[data-theme="dark"] .request-body.request-main,
html[data-theme="dark"] .page-contact,
html[data-theme="dark"] ul.accordeon { background-color: var(--d-canvas) !important; }
/* wallpaper pattern behind the page is too loud on dark */
html[data-theme="dark"] main::before,
html[data-theme="dark"] #main::before { opacity: .05 !important; filter: invert(1); }
/* left menu: active item, filter buttons, checkboxes */
html[data-theme="dark"] :is(a.link.active, .link-btn, a.active, a.filter-button, .is-best, .checkbox, .radio) { background-color: var(--d-raised) !important; }
/* select arrow icon */
html[data-theme="dark"] select.input { background-image: none !important; }
/* close (x) buttons */
html[data-theme="dark"] .close-popup-all,
html[data-theme="dark"] .close-popup { background-color: var(--d-raised) !important; }
html[data-theme="dark"] .close-popup-all svg,
html[data-theme="dark"] .close-popup svg { fill: var(--d-text) !important; stroke: var(--d-text); }
html[data-theme="dark"] .close-popup-all svg use,
html[data-theme="dark"] .close-popup svg use { fill: var(--d-text) !important; }
/* the toggle sits in the header row right before the share block */
.head-main > .bbp-theme-toggle { flex: none; align-self: center; margin-left: auto; }

/* cabinet request cards: header and body inside the card were still white */
html[data-theme="dark"] .request.open-popup,
html[data-theme="dark"] .request.open-popup .request-head,
html[data-theme="dark"] .request.open-popup .request-body,
html[data-theme="dark"] .request.open-popup .request-body_inner { background-color: var(--d-surface) !important; }
/* own bubble inside a card: one step lighter than the card */
html[data-theme="dark"] .request.open-popup .text-right .message .inner { background-color: #454440 !important; }
/* the card's BlaBlaPrice logo */
html[data-theme="dark"] .request.open-popup .blabla-comment::before { filter: invert(1) brightness(1.1); }

/* logo discs: the logo is inverted, so the disc behind it must stay transparent (otherwise it inverts to white) */
html[data-theme="dark"] .blabla-comment::before,
html[data-theme="dark"] .blabla-comment:before { background-color: transparent !important; box-shadow: none !important; }
/* wrapper around the share button */
html[data-theme="dark"] .head-social { background-color: transparent !important; box-shadow: none !important; }
/* card outline: the light theme pins it with !important */
html[data-theme="dark"] .request.open-popup,
html[data-theme="dark"] .bbp-card,
html[data-theme="dark"] .bbp-plan { border-color: var(--d-line) !important; }
/* composer fields stay transparent on the card */
html[data-theme="dark"] .popup-container.wide .tab-answer .input-group.bbp-steps input.input,
html[data-theme="dark"] .popup-container.wide .tab-answer .input-group.bbp-steps textarea.input { background-color: transparent !important; }
/* the generated rules target these fields by id, which outranks classes */
html[data-theme="dark"] .popup-container.wide #offer-price,
html[data-theme="dark"] .popup-container.wide #offer-comment { background-color: transparent !important; }

/* empty states: no box, line art in dark tones (its light tile and dark stroke are SVG attributes) */
html[data-theme="dark"] .bbp-empty { background-color: var(--d-surface) !important; border: 1px solid var(--d-line) !important; box-shadow: none !important; }
html[data-theme="dark"] .bbp-empty-art { stroke: #8f8e89; fill: none !important; }
html[data-theme="dark"] .bbp-empty-art [fill] { fill: var(--d-raised) !important; }
/* icons that only draw lines must keep an empty fill */
html[data-theme="dark"] svg[fill="none"],
html[data-theme="dark"] svg[fill="none"] *:not([fill]) { fill: none !important; }

/* header share dropdown (legacy background: var(--gray)) and its buttons */
html[data-theme="dark"] .head-social .wrap,
html[data-theme="dark"] .share-chat.wrap { background-color: var(--d-surface) !important; border: 1px solid var(--d-line) !important; box-shadow: 0 8px 24px rgba(0, 0, 0, .35) !important; }
html[data-theme="dark"] .share-chat p { color: var(--d-muted) !important; }
html[data-theme="dark"] .share-chat .share-button { background-color: var(--d-raised) !important; color: var(--d-text) !important; }
html[data-theme="dark"] .share-chat .share-button * { color: var(--d-text) !important; }
html[data-theme="dark"] .share-chat .share-button:hover { background-color: #45443f !important; }
/* next to the seller's "Фільтри" button */
.bbp-theme-toggle.bbp-next-to-filter { margin-left: auto; margin-right: 8px; align-self: center; }
html[data-theme="dark"] .bbp-item.bbp-item-static:hover { background-color: transparent !important; }

/* ---------- right FAQ panel ---------- */
html[data-theme="dark"] #aside-right .item-accordeon,
html[data-theme="dark"] #aside-right li { border-color: #33322f !important; }
html[data-theme="dark"] #aside-right .wrap,
html[data-theme="dark"] #aside-right section.faq { background-color: transparent !important; }
html[data-theme="dark"] #aside-right .inner-accordeon { color: var(--d-muted) !important; }
html[data-theme="dark"] #aside-right .btn-accordeon svg { fill: #8f8e89 !important; }

/* ---------- icons: legacy fills were dark grey; lift them to a soft light grey ---------- */
html[data-theme="dark"] svg:not([fill="none"]):not(.bbp-keep):not(.bbp-empty-art),
html[data-theme="dark"] svg:not([fill="none"]):not(.bbp-keep):not(.bbp-empty-art) use { fill: #c9c8c3 !important; }
html[data-theme="dark"] .bbp-icon,
html[data-theme="dark"] .bbp-tile svg { color: #c9c8c3 !important; stroke: #c9c8c3; opacity: 1 !important; }
html[data-theme="dark"] aside svg,
html[data-theme="dark"] .accordeon-settings svg { opacity: 1 !important; }
/* keep coloured and inverse icons as they are */
html[data-theme="dark"] .drop-menu .drop a.js-spam svg,
html[data-theme="dark"] .bbp-status-icon svg { fill: #f08a75 !important; }
html[data-theme="dark"] :is(.popup-button.blue, .menu-button.green, .bbp-btn-primary, .popup-send, .bbp-add-comment) svg,
html[data-theme="dark"] :is(.popup-button.blue, .menu-button.green, .bbp-btn-primary, .popup-send, .bbp-add-comment) svg use { fill: var(--d-btn-text) !important; }
html[data-theme="dark"] .bbp-theme-toggle svg { fill: none !important; }

/* hover tint only on rows that are links (kept out of the grouped rule above, whose :is() specificity is too high) */
html[data-theme="dark"] a.bbp-item:hover,
html[data-theme="dark"] .bbp-item.menu-button:hover,
html[data-theme="dark"] .bbp-subcat:hover { background-color: var(--d-raised) !important; }

/* left sidebar menu in dark: visible active item and hover */
html[data-theme="dark"] aside a.link { background-color: transparent !important; }
html[data-theme="dark"] aside a.link:not(.active):hover { background-color: rgba(255, 255, 255, .06) !important; }
html[data-theme="dark"] aside a.link.active { background-color: #45443f !important; box-shadow: none !important; }
html[data-theme="dark"] aside a.link.active,
html[data-theme="dark"] aside a.link.active * { color: #fff !important; }
html[data-theme="dark"] aside a.link.active svg,
html[data-theme="dark"] aside a.link.active svg use { fill: #fff !important; }
/* hover must stay clearly weaker than the active item */
html[data-theme="dark"] aside a.link:not(.active):hover { background-color: rgba(255, 255, 255, .035) !important; }
html[data-theme="dark"] aside a.link.active { background-color: #4d4c47 !important; font-weight: 600; }
html[data-theme="dark"] .bbp-filter-count { color: #8fb4ec !important; background: #1f2d44 !important; }
html[data-theme="dark"] .seller-filter .item-accordeon.bbp-has-selected { border-color: #34507a !important; }
/* button icons in dark: same colour as the button label */
html[data-theme="dark"] .popup-button.blue svg,
html[data-theme="dark"] .popup-button.blue svg use { fill: var(--d-btn-text) !important; stroke: none !important; }
html[data-theme="dark"] .popup-button:not(.blue) svg,
html[data-theme="dark"] .popup-button:not(.blue) svg use { fill: var(--d-text) !important; stroke: none !important; }
html[data-theme="dark"] .popup-button.gray:hover { background-color: #45443f !important; }
/* seller filter groups: quiet outline instead of a bright one */
html[data-theme="dark"] .seller-filter .accordeon > .item-accordeon { border-color: var(--d-line) !important; background-color: var(--d-surface) !important; }
/* icons in primary buttons: beat the generic dark icon rule (it has three :not() parts) */
html[data-theme="dark"] .popup-button.blue svg:not(.a):not(.b):not(.c),
html[data-theme="dark"] .popup-button.blue svg:not(.a):not(.b):not(.c) use { fill: var(--d-btn-text) !important; }
html[data-theme="dark"] .popup-button:not(.blue) svg:not(.a):not(.b):not(.c),
html[data-theme="dark"] .popup-button:not(.blue) svg:not(.a):not(.b):not(.c) use { fill: var(--d-text) !important; }
html[data-theme="dark"] .count { background: #346cbc !important; color: #fff !important; }
/* groups with ticked options keep their blue outline (must outrank the quiet-outline rule above) */
html[data-theme="dark"] .seller-filter .accordeon > .item-accordeon.bbp-has-selected { border-color: #4a78c0 !important; }
html[data-theme="dark"] .head-social .wrap.share-chat .share-button.twitter::before { background: #ececea; }
html[data-theme="dark"] .head-social .wrap.share-chat .share-button { background-color: var(--d-raised) !important; }
html[data-theme="dark"] .head-social .wrap.share-chat .share-button { border-color: var(--d-line) !important; }
html[data-theme="dark"] .head-social .wrap.share-chat .share-button:hover { background-color: #45443f !important; }
.bbp-toggle-slot { display: block; width: 0; height: 0; }
html[data-theme="dark"] .bbp-slide { background-color: var(--d-surface) !important; }
html[data-theme="dark"] .bbp-slide-bubble { background-color: #45443f !important; }
html[data-theme="dark"] .bbp-slide-offers li.is-best { background-color: #1f2d44 !important; border-color: #34507a !important; }
html[data-theme="dark"] .bbp-slide-price em { color: #8fb4ec !important; }
html[data-theme="dark"] .bbp-slider-dots button { background: #55544f; }
html[data-theme="dark"] .bbp-slider-dots button.is-active { background: var(--d-text); }
html[data-theme="dark"] .bbp-slider-arrow:hover { background-color: var(--d-raised) !important; }
html[data-theme="dark"] .bbp-slide-offers .bbp-av, html[data-theme="dark"] .bbp-slide-offers .bbp-av * { color: #fff !important; }
html[data-theme="dark"] :is(.menu-button.green, .menu-button.blue, .bbp-btn-primary) svg:not(.a):not(.b):not(.c),
html[data-theme="dark"] :is(.menu-button.green, .menu-button.blue, .bbp-btn-primary) svg:not(.a):not(.b):not(.c) use { fill: var(--d-btn-text) !important; }
html[data-theme="dark"] .bbp-slider-dots button { background-color: #55544f !important; }
html[data-theme="dark"] .bbp-slider-dots button.is-active { background-color: var(--d-text) !important; }
html[data-theme="dark"] .bbp-composer { background-color: var(--d-surface) !important; border-color: var(--d-line) !important; }
html[data-theme="dark"] .bbp-chip { background-color: var(--d-raised) !important; }
html[data-theme="dark"] .bbp-chip:hover { background-color: #45443f !important; }
html[data-theme="dark"] .bbp-chip select,
html[data-theme="dark"] .bbp-chip input,
html[data-theme="dark"] .bbp-req2 .bbp-composer-text { background-color: transparent !important; }
html[data-theme="dark"] .bbp-chip select option { background: var(--d-surface); color: var(--d-text); }
html[data-theme="dark"] .bbp-suggest-chip { border-color: #55544f !important; }
html[data-theme="dark"] .bbp-suggest-chip:hover { background-color: var(--d-raised) !important; }
html[data-theme="dark"] .popup-container.wide .tab-answer .popup-send[data-tip]::after { background: var(--d-text); color: var(--d-btn-text); }