/* =========================
   Цветовая схема
========================= */
:root {
    --brand: #E33C26;
    --brand-hover: #C83220;

    --text: #171717;
    --text-muted: #707070;

    --background: #F7F7F7;

    --surface: #FFFFFF;
    --surface-muted: #EFEFEF;
    --surface-dark: #E33C26;

    --text-on-dark: #FFFFFF;
    --text-muted-on-dark: rgba(255, 255, 255, .72);

    --border: #DEDEDE;
    --border-dark: rgba(255, 255, 255, .22);

    --input-background: #F2F2F2;
    --input-focus: rgba(227, 60, 38, .14);

    --image-blend: #303030;

    --badge-background: #F8E3DF;
    --badge-text: #E33C26;

    --header-height: 104px;
}


/* =========================
   Основные настройки
========================= */

body {
    font-family: "Mulish", sans-serif;
    color: var(--text);
    background-color: var(--background);
}

.fs-13 {
    font-size: 13px;
}

.fs-14 {
    font-size: 14px;
}


/* =========================
   Header и навигация
========================= */

.site-header {
    background-color: var(--background);
}

.site-header .navbar {
    background-color: var(--surface) !important;
}

.navbar-brand,
.navbar-brand:hover,
.navbar-brand:focus {
    color: var(--text);
}

.nav-link {
    color: var(--text);
}

.nav-link:hover,
.nav-link:focus {
    color: var(--brand);
}

.header-phone {
    color: var(--text);
}

.header-phone:hover {
    color: var(--brand);
}
.offcanvas {
    background-color: var(--surface);
}

/* =========================
   Текст и ссылки
========================= */

.muted-text {
    color: var(--text-muted);
}

.contacts-phone {
    color: var(--text);
}

.contacts-phone:hover {
    color: var(--brand);
}

.contacts-email,
.default-link {
    color: var(--brand);
}

.contacts-email:hover,
.default-link:hover {
    color: var(--brand-hover);
}


/* =========================
   Карточки и секции
========================= */

.section-muted,
.service-card {
    background-color: var(--surface-muted);
    color: var(--text);
}

.section-dark,
.bg-dark {
    background-color: var(--surface-dark) !important;
    color: var(--text-on-dark);
}

.text-white {
    color: var(--text-on-dark) !important;
}

.text-white-50 {
    color: var(--text-muted-on-dark) !important;
}

.dark-border-top {
    border-top: 1px solid var(--border-dark);
}

.border-secondary {
    border-color: var(--border-dark) !important;
}


/* =========================
   Badge
========================= */

.badge-brand {
    background-color: var(--badge-background);
    color: var(--badge-text);
}


/* =========================
   Изображения с blend
========================= */

.image-blend {
    background: linear-gradient(100.48deg, #000000 0%, var(--image-blend) 100%);
    overflow: hidden;
}

.image-blend img {
    mix-blend-mode: lighten;
}


/* =========================
   Кнопки
========================= */

.btn-dark {
    background-color: var(--surface-dark);
    border-color: var(--surface-dark);
    color: var(--text-on-dark);
}

.btn-dark:hover,
.btn-dark:focus {
    background-color: var(--brand);
    border-color: var(--brand);
    color: var(--text-on-dark);
}


/* =========================
   Формы
========================= */

.form-control {
    background-color: var(--input-background);
    border-color: var(--border);
    color: var(--text);
}

.form-control::placeholder {
    color: var(--text-muted);
    opacity: 1;
}

.form-control:focus {
    background-color: var(--input-background);
    border-color: var(--brand);
    color: var(--text);
    box-shadow: 0 0 0 .25rem var(--input-focus);
}


/* =========================
   Таблицы
========================= */

.table {
    --bs-table-color: var(--text);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--border);
    --bs-table-accent-bg: transparent;
    --bs-table-striped-color: var(--text);
    --bs-table-striped-bg: transparent;
    --bs-table-hover-color: var(--text);
    --bs-table-hover-bg: transparent;

    color: var(--text);
    background-color: transparent;
}

.table > :not(caption) > * > * {
    color: var(--text);
    background-color: transparent;
    border-color: var(--border);
}

.table th {
    color: var(--text);
}

.table td {
    color: var(--text);
}

.table-responsive {
    -webkit-overflow-scrolling: touch;
}


/* =========================
   Legal tabs
========================= */

.legal-tab {
    color: var(--text);
}

.legal-tab:hover,
.legal-tab:focus {
    color: var(--brand);
}

.legal-tab.active {
    background-color: var(--surface-dark) !important;
    color: var(--text-on-dark) !important;
}


/* =========================
   Cookie banner
========================= */

.cookie-banner {
    position: fixed;
    left: 1.5rem;
    bottom: 1.5rem;
    width: 360px;
    max-width: calc(100% - 3rem);
    z-index: 1080;

    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);

    transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
}

.cookie-banner .bg-white {
    background-color: var(--surface) !important;
}

.cookie-banner-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.cookie-banner-hidden {
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    pointer-events: none;
}


/* =========================
   Мобильная версия
========================= */

@media (max-width: 575.98px) {
    .cookie-banner {
        left: 1rem;
        bottom: 1rem;
        width: calc(100% - 2rem);
        max-width: none;
    }
}