/** * Витрина бонусов в стиле STARKS. * * Модуль consolting.bonus рисует свои блоки скупо и на CSS-переменных — * ровно чтобы тема магазина задала им свой вид, не трогая файлы модуля * (их перезапишет обновление). Здесь мы это и делаем. * * ПОЧЕМУ КАЖДЫЙ СЕЛЕКТОР НАЧИНАЕТСЯ С .sw. Свой CSS модуль подключает * обработчиком OnEpilog — то есть ПОЗЖЕ наших в шапке. При равной * специфичности побеждает тот, кто идёт последним, и блок в корзине * оставался зелёным, хотя правила темы «были». Класс .sw висит на * (см. header.php обеих витрин): он поднимает специфичность и снимает * зависимость от порядка подключения. Переменные по той же причине * объявлены на :root.sw, а не на :root. * * Правила безвредны на страницах без бонусов: там просто нет этих классов. */ :root.sw { /* Высота контролов строки фильтра: одно значение на селект, даты и кнопку. Замер 18.09.2026 показал расхождение 42/44/42 px — select, input[type=date] и button считают высоту по-разному, поэтому задаём её жёстко, а не min-height. */ --cbonus-control: 44px; /* Радиус контролов — тоже одним значением: селект, поля и кнопка обязаны скругляться одинаково, иначе строка фильтра выглядит собранной из разных наборов (замечание заказчика 18.09.2026). */ --cbonus-control-radius: var(--sw-r); --cbonus-accent: var(--sw-accent); --cbonus-bg: var(--sw-surface); --cbonus-border: var(--sw-line-soft); --cbonus-muted: var(--sw-hint); --cbonus-radius: var(--sw-r-lg); --cbonus-gap: var(--sw-s-3); } /* ---------- Блок модуля (корзина, оформление) ---------- Стоит среди карточек корзины и обязан читаться как такая же карточка: тот же радиус, та же рамка, тот же фон. Текст выравниваем по центру по вертикали — в блоке одна строка, и прижатая к верху она выглядела случайной. */ .sw .cbonus-block { display: flex; flex-direction: column; justify-content: center; min-height: 52px; box-sizing: border-box; margin: var(--sw-s-2) 0; padding: var(--sw-s-3) var(--sw-s-4); border: 1px solid var(--sw-line-soft); border-radius: var(--sw-r-lg); background: var(--sw-surface); font-size: 13.5px; line-height: 1.45; color: var(--sw-fg-2); } .sw .cbonus-block__title { margin-bottom: var(--sw-s-2); color: var(--sw-fg); font-size: 14.5px; font-weight: 700; } .sw .cbonus-block__row { color: var(--sw-fg-2); } .sw .cbonus-block__row b, .sw .cbonus-block b { color: var(--sw-fg); font-weight: 650; font-variant-numeric: tabular-nums; } .sw .cbonus-block__note { color: var(--sw-hint); font-size: 12px; } /* Ссылки внутри блоков модуля — акцентом темы: браузер красит их синим, и они читались как чужеродные. */ .sw .cbonus-block a, .sw .cbonus-account-widget a, .sw .cbonus-history a { color: var(--sw-accent); } /* ---------- Кнопки ---------- */ .sw .cbonus-block__button, .sw .cbonus-form button, .sw .cbonus-form input[type="submit"] { box-sizing: border-box; height: var(--cbonus-control); line-height: 1; padding: 0 18px; border: 0; border-radius: var(--cbonus-control-radius); background: var(--sw-accent); color: var(--sw-accent-ink); font: inherit; font-size: 14px; font-weight: 650; cursor: pointer; } .sw .cbonus-block__button:hover, .sw .cbonus-form button:hover { filter: brightness(1.05); } .sw .cbonus-block__link { background: none; border: 0; padding: 0; color: var(--sw-accent); font: inherit; font-size: 13px; cursor: pointer; } /* ---------- Поля ввода и фильтр ---------- Раскладку строки фильтра (сетка, переносы) задаёт сам модуль. Тема отвечает за размеры: одна высота у селекта, дат и кнопки — иначе строка выглядит сломанной, как было на первом скриншоте кабинета. */ .sw .cbonus-block__input, .sw .cbonus-form input, .sw .cbonus-form select, .sw .cbonus-form__field { box-sizing: border-box; height: var(--cbonus-control); line-height: 1; padding: 0 var(--sw-s-3); border: 1px solid var(--sw-line); border-radius: var(--cbonus-control-radius); background: var(--sw-bg); color: var(--sw-fg); font: inherit; font-size: 14px; } .sw .cbonus-block__input:focus, .sw .cbonus-form input:focus, .sw .cbonus-form select:focus { outline: none; border-color: var(--sw-accent); } .sw .cbonus-form { gap: var(--sw-s-2); margin-bottom: var(--sw-s-3); } .sw .cbonus-form__caption { color: var(--sw-hint); font-size: 12px; line-height: 1.3; height: auto; padding: 0; border: 0; background: none; } /* Дата в Safari и Chrome тянет ширину под свой внутренний формат и не даёт сжаться: без этого ячейка сетки перестаёт быть управляемой. */ .sw .cbonus-form input[type="date"] { min-width: 0; max-width: 100%; -webkit-appearance: none; appearance: none; } /* ---------- Карточки кабинета ---------- Цифра баланса — обычным цветом текста: акцент на сайте занят целевым действием («Оформить»), и зелёные числа читались как чужой блок. */ .sw .cbonus-account { display: flex; flex-wrap: wrap; gap: var(--sw-gap); } .sw .cbonus-card { flex: 1 1 200px; padding: var(--sw-s-4); border: 1px solid var(--sw-line-soft); border-radius: var(--sw-r-lg); background: var(--sw-surface); } .sw .cbonus-card__label { color: var(--sw-hint); font-size: 13px; } .sw .cbonus-card__value { margin-top: 4px; color: var(--sw-fg); font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; } .sw .cbonus-card__hint { color: var(--sw-hint); font-size: 12px; } /* ---------- Журнал операций ---------- */ .sw .cbonus-table { font-size: 13.5px; } .sw .cbonus-table th, .sw .cbonus-table td { padding: 10px 8px; border-bottom: 1px solid var(--sw-line-soft); } .sw .cbonus-table th { color: var(--sw-hint); font-weight: 600; font-size: 12.5px; } .sw .cbonus-table td { color: var(--sw-fg-2); } .sw .cbonus-amount--plus { color: var(--sw-ok); font-weight: 650; } .sw .cbonus-amount--minus { color: var(--sw-fg); font-weight: 650; } .sw .cbonus-empty { color: var(--sw-hint); font-size: 13.5px; } .sw .cbonus-error { color: var(--sw-danger, #b03030); font-size: 13px; } /* ---------- Согласие ---------- */ .sw .cbonus-block__consent, .sw .cbonus-account__consent { font-size: 13px; color: var(--sw-fg-2); } .sw .cbonus-account__consent-at { color: var(--sw-hint); font-size: 12px; } /* В кабинете панель уже даёт рамку и фон — второй рамки внутри не нужно. */ .sw .sw-lkx__panel > .cbonus-account-widget > .cbonus-block, .sw .sw-lkx__panel > .cbonus-block { min-height: 0; margin: 0; padding: 0; border: 0; background: none; } /* Страховка от расхождений: любой контрол внутри витрины бонусов скругляется одинаково, кто бы его ни нарисовал — компонент модуля или наш шаблон. */ .sw .cbonus-form select, .sw .cbonus-form input, .sw .cbonus-form button, .sw .cbonus-block select, .sw .cbonus-block input, .sw .cbonus-block button, .sw .cbonus-account-widget select, .sw .cbonus-account-widget input, .sw .cbonus-account-widget button, .sw .cbonus-history select, .sw .cbonus-history input, .sw .cbonus-history button { border-radius: var(--cbonus-control-radius); }