/* ==========================================================================
   spot_dark.css — тёмная тема сайта (docs/redesign/DARK_MODE.md).
   Подключается последним в склейке head.tpl ТОЛЬКО при флаге uni_settings.spot_dark_mode = 1.
   Цвета редизайна уже на токенах (тёмные значения — в spot_ui.css); здесь:
     1) переключатель «Тема» и логотип для тёмного фона (работают в обеих темах);
     2) перекрытия легаси движка (styles.css, bootstrap, старые окна и формы), которые рисуют жёсткие #fff / #000.
   Все правила темы — под html.spot-dm[data-theme="dark"] (тема выбрана явно или «системная» при тёмной системе:
   атрибут ставит скрипт head.tpl до отрисовки). styles.css и bootstrap не правятся. Фото объявлений не затемняются.
   ========================================================================== */

/* ---- переключатель «Тема: системная / светлая / тёмная» (лист «Язык и валюта», меню телефона) ---- */
.spot-th-seg {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    padding: 4px;
    border-radius: 14px;
    background: var(--spot-field);
}
.spot-th-opt {
    min-width: 0;
    height: 44px;
    padding: 0 6px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--spot-mut);
    font-family: var(--spot-font);
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}
.spot-th-opt[aria-pressed="true"] {
    background: var(--spot-surface);
    color: var(--spot-ink);
    font-weight: 700;
    box-shadow: 0 1px 3px rgba(20, 22, 26, .10);
}
.spot-th-opt:focus-visible { outline: 2px solid var(--spot-focus); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
    .spot-lc-th .spot-th-opt { height: 38px; padding: 0 2px; font-size: 13px; }
}
.spot-menu .spot-menu-theme {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 52px;
    padding: 8px 16px 0 12px;
    color: var(--spot-ink);
    font-family: var(--spot-font);
    font-size: 16px;
    line-height: 21px;
    font-weight: 600;
}
.spot-menu .spot-menu-th { margin: 8px 16px 12px 12px; }
.spot-menu .spot-menu-lc .spot-lc-btn.spot-menu-row::after { display: block; }

/* ---- логотип: на тёмном фоне — светлая надпись «auto» (templates/images/spot_logo_dark.svg) ---- */
.spot-logo-dk { display: none !important; }

/* ======================= тёмная тема ======================= */
html.spot-dm[data-theme="dark"] :is(.h-logo, .spot-ft-logo) img:not(.spot-logo-dk) { display: none !important; }
html.spot-dm[data-theme="dark"] :is(.h-logo, .spot-ft-logo) img.spot-logo-dk { display: block !important; }

html.spot-dm[data-theme="dark"] .spot-th-opt[aria-pressed="true"],
html.spot-dm[data-theme="dark"] .spot-lc-seg .spot-lc-cur[aria-pressed="true"],
html.spot-dm[data-theme="dark"] .spot-lc-seg .spot-lc-cur.selected-button {
    background: #3A3F47;
    box-shadow: none;
}

/* локальные токены компонентов (объявлены на элементах, а не на :root) */
html.spot-dm[data-theme="dark"] .spot-card,
html.spot-dm[data-theme="dark"] .spot-list-card { --spot-card-divider: var(--spot-line); --spot-card-ring: #8A4A32; }
html.spot-dm[data-theme="dark"] .spot-cat { --spot-cat-chip-x: #5B616B; }

/* ---- основа легаси: фон страницы и текст ---- */
html.spot-dm[data-theme="dark"],
html.spot-dm[data-theme="dark"] body { background-color: var(--spot-bg); color: var(--spot-ink); }

/* ---- легаси движка (styles.css / bootstrap) ----
   Ворота :where(html.spot-dm[data-theme="dark"]) не добавляют специфичности: правило ниже весит как правило styles.css
   (один класс) и выигрывает только потому, что стоит позже; оформление редизайна с более точными селекторами не перебивается. */
:where(html.spot-dm[data-theme="dark"]) .header-wow-mobile-top,
:where(html.spot-dm[data-theme="dark"]) .header-wow-mobile-sticky,
:where(html.spot-dm[data-theme="dark"]) .header-wow-mobile-category,
:where(html.spot-dm[data-theme="dark"]) .header-wow-sticky,
:where(html.spot-dm[data-theme="dark"]) .header-wow-sticky-container,
:where(html.spot-dm[data-theme="dark"]) .header-wow-sticky-mobile,
:where(html.spot-dm[data-theme="dark"]) .top-toolbar,
:where(html.spot-dm[data-theme="dark"]) .footer-bg,
:where(html.spot-dm[data-theme="dark"]) .mobile-fixed-menu-content-bg-white,
:where(html.spot-dm[data-theme="dark"]) .tab-content,
:where(html.spot-dm[data-theme="dark"]) .bg-container-shadow,
:where(html.spot-dm[data-theme="dark"]) .item-grid,
:where(html.spot-dm[data-theme="dark"]) .item-grid-plug,
:where(html.spot-dm[data-theme="dark"]) .ads-blog-articles > div,
:where(html.spot-dm[data-theme="dark"]) .ads-services-tariffs,
:where(html.spot-dm[data-theme="dark"]) .ads-services-tariffs_free,
:where(html.spot-dm[data-theme="dark"]) .catalog-filters-top,
:where(html.spot-dm[data-theme="dark"]) .catalog-filters-top-more-filters-items,
:where(html.spot-dm[data-theme="dark"]) .catalog-action-options,
:where(html.spot-dm[data-theme="dark"]) .catalog-button-city-option,
:where(html.spot-dm[data-theme="dark"]) .mobile-filter,
:where(html.spot-dm[data-theme="dark"]) .filters_base,
:where(html.spot-dm[data-theme="dark"]) .map-search-sidebar,
:where(html.spot-dm[data-theme="dark"]) .sidebar-cart,
:where(html.spot-dm[data-theme="dark"]) .ads-create-main-data,
:where(html.spot-dm[data-theme="dark"]) .ads-update-category-list,
:where(html.spot-dm[data-theme="dark"]) .share_expert-calc,
:where(html.spot-dm[data-theme="dark"]) .country_price,
:where(html.spot-dm[data-theme="dark"]) .country_price_set,
:where(html.spot-dm[data-theme="dark"]) .module-chat,
:where(html.spot-dm[data-theme="dark"]) .module-chat-dialog-header,
:where(html.spot-dm[data-theme="dark"]) .shop-block-control-button,
:where(html.spot-dm[data-theme="dark"]) .floating-menu-box,
:where(html.spot-dm[data-theme="dark"]) .floating-menu-ad,
:where(html.spot-dm[data-theme="dark"]) .header-big-menu,
:where(html.spot-dm[data-theme="dark"]) .header-big-category-menu-right,
:where(html.spot-dm[data-theme="dark"]) .block-cookies,
:where(html.spot-dm[data-theme="dark"]) .card,
:where(html.spot-dm[data-theme="dark"]) .bg-white,
:where(html.spot-dm[data-theme="dark"]) .bg-light {
    background-color: var(--spot-surface);
    color: var(--spot-ink);
    border-color: var(--spot-line);
}
:where(html.spot-dm[data-theme="dark"]) .mobile-fixed-menu,
:where(html.spot-dm[data-theme="dark"]) .user-mobile-menu {
    background-color: var(--spot-bg);
    color: var(--spot-ink);
}
/* окна, выпадающие списки и подсказки движка */
:where(html.spot-dm[data-theme="dark"]) .modal-custom,
:where(html.spot-dm[data-theme="dark"]) .modal-custom .modal-custom-close,
:where(html.spot-dm[data-theme="dark"]) .modal-service-bg,
:where(html.spot-dm[data-theme="dark"]) .modal-content,
:where(html.spot-dm[data-theme="dark"]) .dropdown-menu,
:where(html.spot-dm[data-theme="dark"]) .toolbar-dropdown-box,
:where(html.spot-dm[data-theme="dark"]) .uni-dropdown-content,
:where(html.spot-dm[data-theme="dark"]) .uni-select-list,
:where(html.spot-dm[data-theme="dark"]) .main-search-results,
:where(html.spot-dm[data-theme="dark"]) .custom-results,
:where(html.spot-dm[data-theme="dark"]) .chat-options-list,
:where(html.spot-dm[data-theme="dark"]) .user-list-ad-info-menu-list,
:where(html.spot-dm[data-theme="dark"]) .modal-search-geo-results,
:where(html.spot-dm[data-theme="dark"]) .sticky-search-control-geo-area,
:where(html.spot-dm[data-theme="dark"]) .sticky-search-geo-area-list,
:where(html.spot-dm[data-theme="dark"]) .input-phone-format-list,
:where(html.spot-dm[data-theme="dark"]) .qr_code-box {
    background-color: var(--spot-surface);
    color: var(--spot-ink);
    border-color: var(--spot-line);
}
:where(html.spot-dm[data-theme="dark"]) .uni-dropdown-content a,
:where(html.spot-dm[data-theme="dark"]) .uni-dropdown-content span,
:where(html.spot-dm[data-theme="dark"]) .main-search-results a,
:where(html.spot-dm[data-theme="dark"]) .main-search-results > span,
:where(html.spot-dm[data-theme="dark"]) .uni-select-list label,
:where(html.spot-dm[data-theme="dark"]) .dropdown-item { color: var(--spot-ink); }
:where(html.spot-dm[data-theme="dark"]) .uni-dropdown-content a:hover,
:where(html.spot-dm[data-theme="dark"]) .uni-dropdown-content span:hover,
:where(html.spot-dm[data-theme="dark"]) .uni-select-list label:hover,
:where(html.spot-dm[data-theme="dark"]) .dropdown-item:hover { background-color: var(--spot-field); color: var(--spot-ink); }
/* поля ввода движка и bootstrap */
:where(html.spot-dm[data-theme="dark"]) .form-control,
:where(html.spot-dm[data-theme="dark"]) .textarea-custom,
:where(html.spot-dm[data-theme="dark"]) .input-style2-custom,
:where(html.spot-dm[data-theme="dark"]) .filter-input > div,
:where(html.spot-dm[data-theme="dark"]) .header-wow-mobile-sticky-search input[type='text'],
:where(html.spot-dm[data-theme="dark"]) .uni-select-list-search input,
:where(html.spot-dm[data-theme="dark"]) .catalog-list-options-search input,
:where(html.spot-dm[data-theme="dark"]) .auth-block .input-style2-custom {
    background-color: var(--spot-field);
    color: var(--spot-ink);
    border-color: var(--spot-field-border);
}
:where(html.spot-dm[data-theme="dark"]) .form-control::placeholder,
:where(html.spot-dm[data-theme="dark"]) .textarea-custom::placeholder,
:where(html.spot-dm[data-theme="dark"]) input::placeholder,
:where(html.spot-dm[data-theme="dark"]) textarea::placeholder { color: var(--spot-mut); opacity: 1; }
:where(html.spot-dm[data-theme="dark"]) .form-control:focus { background-color: var(--spot-field); color: var(--spot-ink); }
/* автозаполнение браузера: без жёлто-белой плашки на тёмном поле */
html.spot-dm[data-theme="dark"] input:-webkit-autofill,
html.spot-dm[data-theme="dark"] input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--spot-ink);
    box-shadow: 0 0 0 1000px var(--spot-field) inset;
    caret-color: var(--spot-ink);
}
/* кнопки движка «светлая/белая» */
:where(html.spot-dm[data-theme="dark"]) .btn-color-light,
:where(html.spot-dm[data-theme="dark"]) .btn-color-white,
:where(html.spot-dm[data-theme="dark"]) .btn-white,
:where(html.spot-dm[data-theme="dark"]) .btn-color-transparent,
:where(html.spot-dm[data-theme="dark"]) .color-light,
:where(html.spot-dm[data-theme="dark"]) .color-white,
:where(html.spot-dm[data-theme="dark"]) .btn-color-blue-light {
    background-color: var(--spot-field);
    color: var(--spot-ink);
    border-color: var(--spot-line);
}
/* тексты движка с жёстким #000 / #333 */
:where(html.spot-dm[data-theme="dark"]) :is(.h1title, .h1title a, .item-grid-info a, .item-grid-price-now, .item-list-title, .item-list-price-now,
    .ads-create-main-category-name, .create-list-categories a, .catalog-subcategory a, .catalog-list-category a, .cities-list a,
    .blog-category-list a, .article-item-content-title, .main-category-list-name, .dropdown-box-list-link a, .card-user-link-logout,
    .label-count-number, .box-info, .calc_inf, .checkbox span, .link-remind, .auth-phone, .create-info) { color: var(--spot-ink); }
:where(html.spot-dm[data-theme="dark"]) :is(h1, h2, h3, h4, h5, h6) { color: inherit; }
:where(html.spot-dm[data-theme="dark"]) :is(hr, .table td, .table th) { border-color: var(--spot-line); }
:where(html.spot-dm[data-theme="dark"]) .table { color: var(--spot-ink); }
/* аватар-заглушки (светлый круг под картинкой) */
:where(html.spot-dm[data-theme="dark"]) :is(.board-view-user-avatar, .mini-avatar-img) { background-color: var(--spot-field); }
/* переключатель (checkbox-google) в форме подачи/правки: дорожка светло-серая → тёмная */
html.spot-dm[data-theme="dark"] .checkbox-google .checkbox-google-switch { background: #4B515A; }
html.spot-dm[data-theme="dark"] .checkbox-google input[type=checkbox]:checked + .checkbox-google-switch { background: var(--spot-green); }

/* ---- редизайн: места с собственными светлыми значениями ---- */
html.spot-dm[data-theme="dark"] .spot-ch { --spot-ch-me: #2B3550; }

/* выбранный сегмент: в светлой — белый на сером, в тёмной — светлее дорожки (как в нативных переключателях), иначе выбор «проваливается» */
html.spot-dm[data-theme="dark"] .spot-auth .auth-block-tabs > [data-tab].active,
html.spot-dm[data-theme="dark"] .spot-cab .user-menu-tab.spot-cab-seg > div.active,
html.spot-dm[data-theme="dark"] .spot-cab .spot-cab-segradio input[type="radio"]:checked + label,
html.spot-dm[data-theme="dark"] .spot-cab-segradio input:checked + label,
html.spot-dm[data-theme="dark"] .spot-cab-own .spot-cab-main > .user-menu-tab:not(.spot-cab-seg) > div.active,
html.spot-dm[data-theme="dark"] .spot-ch-tabs button[aria-selected="true"],
html.spot-dm[data-theme="dark"] .spot-dh-geo-pop .sticky-search-geo-list .item-city-country.active,
html.spot-dm[data-theme="dark"] .spot-dh-geo-pop .sticky-search-geo-list .item-city-country[aria-pressed="true"],
html.spot-dm[data-theme="dark"] .spot-fav-seg-btn.is-on,
html.spot-dm[data-theme="dark"] .spot-subs-seg-btn.profile-subscriptions-ad-period.active,
html.spot-dm[data-theme="dark"] .spot-cat-view .catalog-ad-view.active .spot-cat-view__in,
html.spot-dm[data-theme="dark"] .spot-pb-curb.is-on,
html.spot-dm[data-theme="dark"] .spot-flt .spot-flt-seg .spot-flt-seg-btn[aria-pressed="true"],
html.spot-dm[data-theme="dark"] .spot-flt .spot-flt-period .custom-control-input:checked + .custom-control-label,
html.spot-dm[data-theme="dark"] .spot-sl-shop-page .shop-list-pages a.active {
    background: #3A3F47;
    box-shadow: none;
}
/* кнопка Telegram: фон --spot-focus в тёмной теме светло-синий (для обводки фокуса), белый текст на нём не читается — прежний синий */
html.spot-dm[data-theme="dark"] .spot-ad-page .spot-ad-exp-tg,
html.spot-dm[data-theme="dark"] .spot-cab-share-btn--tg { background: #1D5FD1; }

/* логотипы марок — тёмные монохромные картинки: в тёмной теме на светлой круглой плашке (картинки не перекрашиваем) */
html.spot-dm[data-theme="dark"] .spot-cat-brand:not(.spot-cat-brand--all) .spot-cat-brand__logo { background: #E9ECEF; }
html.spot-dm[data-theme="dark"] .spot-brand-logo { width: 48px; height: 48px; margin: -4px 0; border-radius: 50%; background: #E9ECEF; }
html.spot-dm[data-theme="dark"] .spot-brand-logo img { max-width: 34px; max-height: 34px; }

/* ---- найдено axe (color-contrast) в тёмной теме ---- */
/* ссылки движка #007bff (bootstrap) → светло-синий фокуса */
:where(html.spot-dm[data-theme="dark"]) :is(.ad-view-card-user-link-profile, .board-view-user-right > a, .board-view-user > a, .board-view-user-mobile > a) { color: var(--spot-focus); }
:where(html.spot-dm[data-theme="dark"]) .board-view-user-date { color: var(--spot-mut); }
html.spot-dm[data-theme="dark"] .btn-custom-mini.btn-color-light { background-color: var(--spot-field); color: var(--spot-ink); }
/* хлебные крошки движка: текущая страница rgba(57,57,57,.5), разделитель #131318 */
html.spot-dm[data-theme="dark"] .breadcrumb li > span { color: var(--spot-mut); }
html.spot-dm[data-theme="dark"] .breadcrumb-item + .breadcrumb-item::before { color: var(--spot-mut); }
/* «Больше объявлений» и подобные — цвет задан прямо в разметке (style="color:#000") */
html.spot-dm[data-theme="dark"] :is([style*="color:#000"], [style*="color: #000"], [style*="color:black"], [style*="color: black"]) { color: var(--spot-ink) !important; }
/* статус «Активно» в кабинете: белый на #1b8f4b — 4.1:1 (так и в светлой); в тёмной — фирменный зелёный, 5.9:1 */
html.spot-dm[data-theme="dark"] .spot-cab-st--green { background: var(--spot-green); color: #fff; }

/* ---- старые страницы в белом списке (блог, автосалоны, города) ---- */
/* .btn-color-light в styles.css — color: black !important; перекрыть можно только так же */
html.spot-dm[data-theme="dark"] .btn-color-light { background-color: var(--spot-field); color: var(--spot-ink) !important; }
:where(html.spot-dm[data-theme="dark"]) :is(.shop-category-list, .blog-category-list) { background-color: var(--spot-surface); }
:where(html.spot-dm[data-theme="dark"]) :is(.shop-category-list a, .blog-category-list a, .shop-item-card-name) { color: var(--spot-ink); }
:where(html.spot-dm[data-theme="dark"]) :is(.shop-category-list a:hover, .shop-category-list a.active, .blog-category-list a:hover, .blog-category-list a.active) { color: var(--spot-focus); }
:where(html.spot-dm[data-theme="dark"]) .cities-search-input input { background-color: var(--spot-field); color: var(--spot-ink); border-color: var(--spot-field-border); }
/* иконки шапки движка: .toolbar-link #1C1C1C, .toolbar-link-title-icon #001a34 (поделиться, категории блога на телефоне) */
:where(html.spot-dm[data-theme="dark"]) :is(.toolbar-link, .toolbar-link-title-icon) { color: var(--spot-ink); }

/* светло-серые подложки движка (#F7F8FA, #F2F3F5 …) — тёмные поверхности; низкая специфичность, оформленное редизайном не трогается */
:where(html.spot-dm[data-theme="dark"]) :is(.ajax-container-similar, .bg-gray, .gray-select, .footer-list-cities, .feedback-answers-questions) { background-color: var(--spot-bg); color: var(--spot-ink); }
:where(html.spot-dm[data-theme="dark"]) :is(.ad-view-card-user, .ads-item-user-card, .ads-create-input, .article-item, .auth-block, .auth-block-right,
    .board-view-sidebar, .share_expert-box, .item-list, .item-list-order, .user-list-ad-item, .user-review-item, .user-bg-container,
    .user-balance-payment > div, .user-balance-summa > div, .user-balance-variant-list > div, .user-tariff-box-item, .user-tariff-box-item-gray,
    .user-tariff-package-box-item, .profile-statistics-user-item, .page-menu-list, .page-base__box, .ref-block-link, .settings-tariff-sidebar-calc,
    .module-chat-dialog-footer, .module-chat-dialog-header-block-1, .module-comments-content, .order-messages-from, .order-messages-to,
    .shop-item-card-list, .shop-list-pages a, .shop-page-control span, .uni-select, .custom-selectpicker, .sidebar-filter, .search-popular,
    .info-text, .box-info, .create-info, .dialog-content-msg, .header-wow-sticky-auth, .header-wow-mobile-view-info, .filters-button,
    .balance-input-amount, .input-phone-format-box, .main-search-shop input, .header-wow-sticky-search input[type='text'], .table-borderless thead) {
    background-color: var(--spot-surface);
    color: var(--spot-ink);
    border-color: var(--spot-line);
}
:where(html.spot-dm[data-theme="dark"]) :is(.item-grid-img, .ads-view-photo-bg-gray, .dialog-content-circle-img) { background-color: var(--spot-field); }
/* jQuery UI (календарь, слайдер цены) */
:where(html.spot-dm[data-theme="dark"]) :is(.ui-widget.ui-widget-content, .ui-widget-header, .ui-state-default) { background: var(--spot-surface); color: var(--spot-ink); border-color: var(--spot-line); }
/* полосы прокрутки движка (*::-webkit-scrollbar #F7F8FA) */
html.spot-dm[data-theme="dark"] ::-webkit-scrollbar { background-color: var(--spot-bg); }
html.spot-dm[data-theme="dark"] ::-webkit-scrollbar-thumb { background-color: #3A3F47; }

/* светлые окна движка в тёмной теме: свои поля и полосы прокрутки — светлые */
html.spot-dm[data-theme="dark"] :is(.modal-custom, .modal-service-bg) { color-scheme: light; }

/* окно услуг движка (Services_list.tpl на странице объявления): тексты #000 внутри */
:where(html.spot-dm[data-theme="dark"]) .modal-service-bg :is(.serv_desc_box, .serv_desc_box *, p, strong, h1, h2, h3, h4, h5, label) { color: inherit; }
:where(html.spot-dm[data-theme="dark"]) .modal-custom :is(h1, h2, h3, h4, h5, p, label) { color: inherit; }
/* поля: только для чтения (ссылка «Поделиться») и textarea без оформления (жалоба) */
:where(html.spot-dm[data-theme="dark"]) :is(.form-control:disabled, .form-control[readonly]) { background-color: var(--spot-field); color: var(--spot-ink); }
:where(html.spot-dm[data-theme="dark"]) .modal-custom textarea { background-color: var(--spot-field); color: var(--spot-ink); border-color: var(--spot-field-border); }
/* .color-light в styles.css — color: black !important */
html.spot-dm[data-theme="dark"] .color-light { color: var(--spot-ink) !important; }
html.spot-dm[data-theme="dark"] .spot-ad-page .modal-complaint-form .textarea-custom-actions .btn-custom-mini { color: #fff !important; }

/* ссылки без своего оформления: bootstrap a { color: #007bff } — 4,1:1 на тёмном; та же специфичность, позже — выигрывает только у bootstrap */
:where(html.spot-dm[data-theme="dark"]) a { color: var(--spot-focus); }
:where(html.spot-dm[data-theme="dark"]) a:hover { color: #9CC3FF; }
/* пробег (filter.css): поле и кнопка «км/мили» с жёсткими #FFF/#000 */
:where(html.spot-dm[data-theme="dark"]) .filter_km_box { background: var(--spot-surface); border-color: var(--spot-field-border); }
:where(html.spot-dm[data-theme="dark"]) .filter_km_btn { background: var(--spot-field); color: var(--spot-ink); border-color: var(--spot-field-border); }
html.spot-dm[data-theme="dark"] .filter_km_box input { color: var(--spot-ink); }
/* прод (release-2026-10-07-4): мягкая подсказка к e-mail из чёрного списка (styles.css — жёсткий #8a5a00) — токен предупреждения */
:where(html.spot-dm[data-theme="dark"]) .spot_email_hint { color: var(--spot-amber); }