/* radiodetali.by — стили сайта (вынесены из шаблонов 2026-09-24). */

/* Дизайн-система "Технологичная светлая" (выбрана оператором 2026-09-23 из
   3 черновиков-направлений) — переопределяем утилитарные классы Bootstrap,
   а не только :root, потому что CDN-сборка Bootstrap 5.3 запекает цвет в
   --bs-btn-bg и т.п. на уровне самого класса, а не читает --bs-primary
   динамически (Sass-переменная, не CSS var). */
:root {
    --brand-primary: #0B5FA8; --brand-primary-hover: #084A85;
    --brand-bg: #F6F8FB; --brand-surface: #FFFFFF; --brand-text: #0F172A;
    --brand-text-secondary: #64748B; --brand-border: #E2E8F0; --brand-accent-soft: #E8F1FA;
}
body { background: var(--brand-bg); color: var(--brand-text); font-family: 'Manrope', system-ui, sans-serif; }
h1, h2, h3, h4, h5, h6 { font-weight: 800; letter-spacing: -.3px; }

.btn-primary {
    --bs-btn-bg: var(--brand-primary); --bs-btn-border-color: var(--brand-primary);
    --bs-btn-hover-bg: var(--brand-primary-hover); --bs-btn-hover-border-color: var(--brand-primary-hover);
    --bs-btn-active-bg: var(--brand-primary-hover); --bs-btn-active-border-color: var(--brand-primary-hover);
    --bs-btn-disabled-bg: var(--brand-primary); --bs-btn-disabled-border-color: var(--brand-primary);
}
.btn-outline-primary {
    --bs-btn-color: var(--brand-primary); --bs-btn-border-color: var(--brand-primary);
    --bs-btn-hover-bg: var(--brand-primary); --bs-btn-hover-border-color: var(--brand-primary);
    --bs-btn-active-bg: var(--brand-primary); --bs-btn-active-border-color: var(--brand-primary);
}
.text-primary { color: var(--brand-primary) !important; }
.bg-primary { background-color: var(--brand-primary) !important; }
.text-secondary { color: var(--brand-text-secondary) !important; }
a { color: var(--brand-primary); }
a:hover { color: var(--brand-primary-hover); }

.btn { border-radius: 10px; font-weight: 700; }
.card { border-radius: 16px; border-color: var(--brand-border); }
.form-control, .form-select { border-radius: 10px; border-color: var(--brand-border); }
.form-control:focus, .form-select:focus { border-color: var(--brand-primary); box-shadow: 0 0 0 .2rem var(--brand-accent-soft); }
.input-group .form-control:first-child { border-top-left-radius: 10px; border-bottom-left-radius: 10px; }
.header-search-mode { flex: 0 0 auto; width: auto; max-width: 11rem; background-color: var(--brand-bg); font-weight: 600; font-size: .9rem; }
.input-group .header-search-mode:first-child { border-top-left-radius: 10px; border-bottom-left-radius: 10px; }
.badge.rounded-pill { --bs-badge-color: #fff; }
.dropdown-menu { border-radius: 12px; border-color: var(--brand-border); }
.alert { border-radius: 12px; }

.product-card { transition: box-shadow .15s ease; }
.product-card:hover { box-shadow: 0 .25rem .75rem rgba(15,23,42,.08); }
.price { font-weight: 800; color: var(--brand-primary); }

.header-action {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 10px; background: var(--brand-bg);
    color: var(--brand-text); text-decoration: none; position: relative;
}
.header-action:hover { background: var(--brand-accent-soft); color: var(--brand-primary); }

/* Раскладка хэдера (Каталог/логотип/поиск/иконки) — своя вёрстка, а не
   Bootstrap-утилиты w-md-auto/w-lg-auto: у CDN-сборки 5.3 НЕТ responsive-
   вариантов w-* (только голый .w-100/.w-auto), поэтому такие классы молча
   не действовали и .w-100!important держался на всех брейкпоинтах разом —
   это и ломало раскладку (см. разбор бага 2026-09-23). */
.header-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.header-row__catalog { order: 1; }
.header-row__logo { order: 2; }
.header-row__search { order: 3; width: 100%; min-width: 0; }
.header-row__actions { order: 4; width: 100%; display: flex; justify-content: center; gap: .375rem; }
@media (min-width: 992px) {
    .header-row { flex-wrap: nowrap; gap: 1rem; }
    .header-row__logo { order: 1; }
    .header-row__catalog { order: 2; }
    .header-row__search { order: 3; width: auto; flex-grow: 1; }
    .header-row__actions { order: 4; width: auto; margin-left: auto; gap: .5rem; }
}

footer { background: #0F172A; color: #94A3B8; }
footer a { color: #CBD5E1; }
footer a:hover { color: #fff; }

/* Описание товара из админки (HTML из RichEditor), см. App\\Support\\SafeHtml. */
.product-description { line-height: 1.6; }
.product-description p { margin-bottom: .75rem; }
.product-description ul, .product-description ol { padding-left: 1.4rem; margin-bottom: .75rem; }
.product-description h2, .product-description h3, .product-description h4 { font-size: 1.05rem; margin: 1rem 0 .5rem; }
.product-description table { width: 100%; margin-bottom: 1rem; border-collapse: collapse; }
.product-description th, .product-description td { border: 1px solid var(--brand-border, #dee2e6); padding: .35rem .5rem; }
.product-description img { max-width: 100%; height: auto; }