/* Тёмная тема сайта. Класс theme-dark стоит на <html> всегда (см. App.razor);
   светлые цвета остались только в исходных стилях как основа, поверх которой работает тема.

   1. Переменные --sony-* получают тёмные значения — на них построена большая часть стилей,
      и они же наследуются внутрь веб-компонентов (поиск, шапка) с их теневым DOM.
   2. Ниже — правила для мест, где светлый цвет записан прямо в стилях. Белый текст
      на градиентных кнопках не трогаем: на тёмном фоне он остаётся белым. */

html.theme-dark,
html.theme-dark body {
    color-scheme: dark;

    /* Своя палитра темы: фон, три уровня поверхностей, текст. */
    --dark-bg: #0B0C10;
    --dark-surface: #15171E;
    --dark-surface-2: #1D2029;
    --dark-surface-3: #262A35;
    --dark-border: #2C3140;
    --dark-text: #F2F4F8;
    --dark-text-2: #A9B0C0;
    --dark-text-3: #858C9C;
    --dark-selected: #1B2C48;

    --sony-light-gradient: linear-gradient(145deg, #171C2E 0%, #11211F 100%);
    --sony-bg-color: var(--dark-bg);
    --sony-font-color: var(--dark-text);
    --sony-secondary-font-color: #8FB4E6;
    --sony-third-font-color: var(--dark-text-3);
    --sony-accent-color: #4A8CF0;
    --sony-color-01: #34405A;
    --sony-color-02: var(--dark-surface-2);
    --sony-color-03: var(--dark-border);
    --sony-color-05: var(--dark-border);
    --sony-font-link-color: #6FB8FF;
    --sony-loading: var(--dark-text);
    --sony-secondary-color: #E8EAF0;
    --sony-fourth-font-color: #E3E6EE;
    --sony-color-06: #1A1D27;
    --sony-color-07: var(--dark-surface-2);
    --sony-color-08: var(--dark-border);
    --sony-color-09: var(--dark-border);
    --sony-color-10: #20232C;
    --sony-color-11: #1A1D27;
    --sony-color-12: var(--dark-text-2);
    --sony-color-13: #111318;
    --sony-color-15: var(--dark-selected);
    --sony-color-16: rgba(220, 228, 255, 0.6);
    --sony-color-17: var(--dark-border);
    --sony-color-19: var(--dark-text-2);
    --sony-color-20: #3A3F4D;
    --sony-color-21: var(--dark-text-2);
    --sony-color-23: var(--dark-bg);
    --sony-color-24: var(--dark-text-2);
    --sony-color-25: #E6E8EE;
    --sony-color-26: var(--dark-selected);
    --sony-color-27: var(--dark-border);
    --sony-color-28: var(--dark-border);
    --sony-color-29: var(--dark-text-2);
    --sony-color-30: var(--dark-surface-2);
    --sony-color-31: var(--dark-surface-3);
    --sony-color-32: #20232C;
    --sony-color-33: var(--dark-selected);
    --sony-color-34: #24406A;
    --sony-color-35: var(--dark-border);
    --sony-color-36: var(--dark-text-2);
    --sony-color-37: var(--dark-text);
    --sony-color-39: #171A22;
    /* Красные предупреждения: тёмно-красный на чёрном не читается — светлее. */
    --sony-color-40: #FF6B66;
    --sony-color-41: #2A1A1C;
    --sony-color-42: 255, 110, 110;
    --sony-color-43: var(--dark-text-2);

    /* Для веб-компонента поиска: его светлые цвета вынесены в эти переменные. */
    --theme-surface: var(--dark-surface);
    --theme-hover: var(--dark-surface-3);
    --theme-divider: var(--dark-border);

    --sony-background-color: var(--dark-bg);
    --site-shadow: 0 0 16px rgba(0, 0, 0, 0.6);
    --site-sony-color-01: var(--dark-bg);
    --site-sony-color-03: #1A1D27;
    --site-sony-color-04: #20232C;
}

/* ---- Поверхности со светлым фоном, записанным прямо в стилях ---- */

html.theme-dark .controlMenu,
html.theme-dark .controlMenuBottom,
html.theme-dark .loading-card,
html.theme-dark .site-carousel-widget,
html.theme-dark .site-support-button,
html.theme-dark .pc-acc-card,
html.theme-dark .pc-meta,
html.theme-dark .pc-modal,
html.theme-dark .pc-edition,
html.theme-dark .pc-guide,
html.theme-dark .pc-shots-arrow,
html.theme-dark .bonus-cart-chip,
html.theme-dark .main-content,
html.theme-dark .mcart .mcart-items .product-container,
html.theme-dark .mcart .mcart-form,
html.theme-dark .cart-div .cart-items .product-container,
html.theme-dark .cart-div .cart-side,
html.theme-dark .oh-empty,
html.theme-dark .oh-order,
html.theme-dark .bn-ref,
html.theme-dark .bh-tile,
html.theme-dark .bh-empty,
html.theme-dark .bh-item,
html.theme-dark .rent-card,
html.theme-dark .rent-card-stepper,
html.theme-dark .rent-info-pop,
html.theme-dark .order-card-form,
html.theme-dark .filter-dropdown,
html.theme-dark .sort-dropdown,
html.theme-dark .edition-switch,
html.theme-dark .bsb-x {
    background: var(--dark-surface);
    color: var(--dark-text);
}

html.theme-dark .controlMenu .item:hover,
html.theme-dark .filter-item:hover,
html.theme-dark .bsb-x:hover {
    background: var(--dark-surface-3);
}

/* Главная: в светлой теме блоки чередовались — белые со скруглёнными углами на цветной
   подложке. На тёмном фоне от этого оставались только тёмные «уголки» по краям,
   поэтому фон главной однородный, а блоки без собственной подложки и скруглений. */
html.theme-dark .widgets-back {
    background: var(--dark-bg) !important;
}

html.theme-dark .widgets-back > .widget-white > *,
html.theme-dark .widgets-back > .widget-back > * {
    background: transparent !important;
    border-radius: 0 !important;
}

/* Подложки страниц корзины, избранного и мобильной корзины. */
html.theme-dark .background,
html.theme-dark .mcart {
    background: var(--dark-bg);
}

html.theme-dark .pc-acc-card.selected,
html.theme-dark .pc-edition.selected {
    background: var(--dark-selected);
}

html.theme-dark .pc-acc-radio,
html.theme-dark .bonus-cart-switch::after,
html.theme-dark .bonus-cart-range::-webkit-slider-thumb {
    background: var(--dark-surface-3);
}

html.theme-dark .bonus-cart-range::-moz-range-thumb {
    background: var(--dark-surface-3);
}

/* Обрезанное описание растворяется в фон карточки, а не в белый. */
html.theme-dark .pc-desc-text.clamped::after {
    background: linear-gradient(180deg, rgba(11, 12, 16, 0) 0%, var(--dark-bg) 100%);
}

/* Стрелки каруселей и мелкие кнопки на светло-голубой подложке. */
html.theme-dark .carousel-arrow,
html.theme-dark .rent-home-arrow,
html.theme-dark .icon-button-container,
html.theme-dark .bsb-arrow,
html.theme-dark .bsb-field,
html.theme-dark .rounded-input,
html.theme-dark .site-product-price-container,
html.theme-dark .product-image {
    background: var(--dark-surface-2);
    color: var(--dark-text);
}

html.theme-dark .site-product-price-container {
    border-color: var(--dark-surface-2);
}

html.theme-dark .site-product-price-container-selected,
html.theme-dark .rz-blue-block,
html.theme-dark .bsb-all {
    background: var(--dark-selected);
}

html.theme-dark .bsb-all:hover {
    background: #24406A;
}

html.theme-dark .spacer,
html.theme-dark .sort-divider {
    background: var(--dark-border);
}

/* Цветные плашки статусов: тёмная подложка, светлый текст того же оттенка. */
html.theme-dark .oh-pill.done,
html.theme-dark .oh-tag.status-active,
html.theme-dark .bh-sign.plus,
html.theme-dark .rent-status-free {
    background: #16301A;
    color: #6FD35E;
}

html.theme-dark .oh-pill.wait,
html.theme-dark .oh-tag.status-booked,
html.theme-dark .oh-tag.status-waitingrelease {
    background: #33280F;
    color: #F0B64A;
}

html.theme-dark .oh-tag.status-canceled,
html.theme-dark .rent-status-busy {
    background: #361A1C;
    color: #FF8A84;
}

html.theme-dark .kod-pog-info-container-success {
    background: var(--dark-selected);
    color: #8FB8FF;
}

html.theme-dark .kod-pog-info-container-error {
    background: #361A1C;
    color: #FF8A84;
}

html.theme-dark .bsb-field,
html.theme-dark .bsb-x:hover {
    color: var(--dark-text);
}

html.theme-dark .bsb-x {
    color: var(--dark-text-2);
    border-color: var(--dark-border);
}

/* Рамки, которые были светло-серыми. */
html.theme-dark .profile-for-me-block,
html.theme-dark .site-support-button,
html.theme-dark .edition-switch {
    border-color: var(--dark-border);
}

html.theme-dark .controlMenu .cart-box .cart-count,
html.theme-dark .filter-badge {
    border-color: var(--dark-bg);
}

/* Значок ошибки нарисован тёмно-красным (#BE1315) — на тёмном фоне его осветляем. */
html.theme-dark img[src*="ic_error"] {
    filter: brightness(1.9) saturate(1.1);
}

html.theme-dark .loading-text::after {
    color: var(--dark-text-2);
}

/* Светлые цвета, вписанные прямо в разметку (style="..."). */
html.theme-dark [style*="background-color: white"],
html.theme-dark [style*="background-color:white"],
html.theme-dark [style*="background: white"],
html.theme-dark [style*="background-color: #F2F2F6"],
html.theme-dark [style*="background-color: #F0F2F7"] {
    background-color: var(--dark-surface) !important;
}

html.theme-dark [style*="background-color: #E6EFF7"] {
    background-color: var(--dark-bg) !important;
}

html.theme-dark [style*="color: black"],
html.theme-dark [style*="color: #000"] {
    color: var(--dark-text) !important;
}