:root {
    --color-primary:       #ea202e;
    --color-primary-dark:  #8b1520;
    --color-primary-light: #fbd4d6;
    --color-accent:        #0a4d8c;
    --color-text-light:    #ffffff;
    --color-text-dark:     #1a1a1a;

    --aqua-navbar-height: 72px;
    --aqua-navbar-bg-start: rgba(44, 45, 46, 0.6);
    --aqua-navbar-bg: rgba(44, 45, 46, 0.9);
}


/* ---------- Шапка (Bootstrap Navbar) ---------- */
/* Прилипает к верху страницы */
.aqua-navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    background: var(--aqua-navbar-bg);
    padding-top: 14px;
    padding-bottom: 14px;
    transition: background-color 0.3s ease;
}

@media (max-width: 991px) {
    .aqua-navbar {
        padding-top: 4px;
        padding-bottom: 4px;
    }
}

/* На главной стартует полупрозрачной, фон проявляется при скролле */
body.is-home .aqua-navbar {
    background: var(--aqua-navbar-bg-start);
}

body.is-home .aqua-navbar.scrolled {
    background: var(--aqua-navbar-bg);
}

/* На внутренних страницах резервируем место под фиксированную шапку */
body:not(.is-home) {
    padding-top: var(--aqua-navbar-height);
}

.aqua-navbar .navbar-brand {
    margin-right: 0;
    padding: 0;
}

@media (min-width: 1400px) {
    .aqua-navbar .navbar-brand {
        min-width: 387px;
    }
}


/* ---------- Логотип и название бренда ---------- */
.brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.brand-logo {
    display: block;
    width: 42px;
    height: 42px;
}

.brand-text {
    font-family: Lato, Tahoma, sans-serif;
    font-weight: 700;
    font-size: 20px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--color-text-light);
    line-height: 1;
}

/* Компактный бренд на мобильных — освобождает место под телефон */
@media (max-width: 991px) {
    .brand-logo {
        width: 32px;
        height: 32px;
    }
    .brand-text {
        font-size: 14px;
        letter-spacing: 1px;
    }
}

@media (max-width: 374px) {
    .brand-text {
        display: none; /* на самых узких — оставляем только лого */
    }
}


/* ---------- Телефон в мобильной шапке (видна на <992px) ---------- */
.navbar-mobile-phone {
    align-items: center;
    gap: 8px;
    margin-right: 12px;
    color: var(--color-text-light);
    text-decoration: none;
    font-family: Lato, Tahoma, sans-serif;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.5px;
    white-space: nowrap;
    line-height: 1;
}

.navbar-mobile-phone:hover,
.navbar-mobile-phone:focus {
    color: var(--color-primary);
}

.navbar-mobile-phone-icon {
    color: var(--color-primary);
    font-size: 14px;
}

@media (max-width: 480px) {
    .navbar-mobile-phone {
        font-size: 12px;
        gap: 6px;
        margin-right: 8px;
    }
}


/* ---------- Контакты в центре шапки (телефон + адрес, только на десктопе) ---------- */
.navbar-contacts {
    align-items: center;
    gap: 32px;
    flex-grow: 1;
    justify-content: center;
    font-size: 14px;
    line-height: 1.3;
}

@media (min-width: 1199px) and (max-width: 1299px) {
    .navbar-contacts {
        gap: 12px;
    }
}

.navbar-contact {
    display: flex;
    align-items: center;
    gap: 10px;
    color: inherit;
    text-decoration: none;
}

.navbar-contact-icon {
    font-size: 18px;
    color: var(--color-primary);
}

.navbar-contact-text {
    font-size: 18px;
    font-weight: 400;
    white-space: nowrap;
    letter-spacing: 2px;
}


/* ---------- Кнопка-гамбургер (вид и размеры сохранены) ---------- */
.rd-navbar-toggle {
    display: inline-block;
    position: relative;
    width: 48px;
    height: 48px;
    padding: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
    outline: 0;
}

.rd-navbar-toggle:focus,
.rd-navbar-toggle:focus-visible {
    outline: 0;
    box-shadow: none;
}

.rd-navbar-toggle > span {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 24px;
    height: 2px;
    background: var(--color-primary);
    transform: translate(-50%, -50%);
    transition: background 0.2s ease;
}

.rd-navbar-toggle > span::before,
.rd-navbar-toggle > span::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--color-primary);
    transition: transform 0.25s ease;
}

.rd-navbar-toggle > span::before { top: -8px; }
.rd-navbar-toggle > span::after  { top:  8px; }

.rd-navbar-toggle[aria-expanded="true"] > span {
    background: transparent;
}
.rd-navbar-toggle[aria-expanded="true"] > span::before {
    transform: translateY(8px) rotate(45deg);
}
.rd-navbar-toggle[aria-expanded="true"] > span::after {
    transform: translateY(-8px) rotate(-45deg);
}


/* ---------- Ссылки меню ---------- */
.aqua-navbar .navbar-nav {
    gap: 18px;
}

.aqua-navbar .nav-link {
    color: var(--color-text-light);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 14px;
    padding: 8px 4px;
    transition: color 0.2s ease;
}

.aqua-navbar .nav-link:hover,
.aqua-navbar .nav-link:focus {
    color: var(--color-primary);
}

.aqua-navbar .nav-link.active {
    color: var(--color-primary);
}


/* ---------- Offcanvas (выдвижная панель справа) ---------- */
.aqua-offcanvas {
    --bs-offcanvas-width: 320px;
    background-color: #1a1a1a;
    color: var(--color-text-light);
}

.aqua-offcanvas .offcanvas-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.aqua-offcanvas .offcanvas-title {
    color: var(--color-text-light);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 400;
    font-size: 16px;
}

.aqua-offcanvas .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

.aqua-offcanvas .navbar-nav {
    gap: 8px;
}

.aqua-offcanvas .nav-link {
    color: var(--color-text-light);
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.aqua-offcanvas .nav-link:last-child {
    border-bottom: none;
}

/* ---------- Контакты внутри offcanvas (мобильная версия) ---------- */
.offcanvas-contacts {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 15px;
}

.offcanvas-social {
    display: flex;
    gap: 12px;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.offcanvas-social .navbar-social-icon {
    width: 30px;
    height: 30px;
}

.offcanvas-contact {
    display: flex;
    align-items: center;
    gap: 10px;
    color: inherit;
    text-decoration: none;
}

.offcanvas-contact-icon {
    font-size: 16px;
    color: var(--color-primary);
    min-width: 18px;
    text-align: center;
}


/* ---------- На десктопе (>= xl): offcanvas превращается в инлайн-блок ---------- */
@media (min-width: 1200px) {
    .aqua-navbar .offcanvas {
        flex-grow: 0 !important;
    }

    .aqua-offcanvas .navbar-nav {
        flex-direction: row;
        gap: 24px;
    }

    .aqua-offcanvas .nav-link {
        padding: 8px 4px;
        border-bottom: 0;
    }
}


/* ---------- Hero-слайдер: мобильная адаптация (вертикальная компоновка) ---------- */
@media (max-width: 991px) {
    .swiper-slider .swiper-slide {
        /* Слайд занимает высоту экрана минус шапка, но тянется по контенту если текста много */
        min-height: calc(100vh - 60px);
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
    }

    .swiper-slider .swiper-slide-caption {
        /* Центрируем контент вертикально, оставляем место под фиксированную шапку */
        display: flex;
        align-items: center;
        min-height: calc(100vh - 60px);
        padding: 60px 16px;
    }

    .swiper-slider .swiper-slide-caption .container {
        width: 100%;
    }

    .swiper-slider .swiper-slide .h1 {
        font-size: 38px;
        line-height: 1.15;
        margin-bottom: 18px;
    }

    .swiper-slider .swiper-slide p {
        font-size: 18px;
        line-height: 1.55;
    }

    /* На мобильном стрелки лишние — свайп и точки хватает */
    .swiper-slider .swiper-button-prev,
    .swiper-slider .swiper-button-next {
        display: none;
    }
}

@media (max-width: 575px) {
    .swiper-slider .swiper-slide .h1 {
        font-size: 38px;
    }

    .swiper-slider .swiper-slide p {
        font-size: 18px;
    }

    .swiper-slider .swiper-slide-caption {
        padding: 60px 16px;
    }
}


/* ---------- Яндекс-карта на странице контактов ---------- */
.map-wrap {
    margin-bottom: 20px;
    position: relative; /* нужно для абсолютного псевдо-слоя .lock */
}

.yandex-map {
    width: 100%;
    height: 400px;
    border: 0;
    border-radius: 4px;
    display: block;
}

/* На мобильных карта накрывается прозрачным слоем, чтобы беспрепятственно
   прокручивать страницу. Тап по карте → JS добавляет .unlock → слой исчезает. */
@media (max-width: 991px) {
    .map-wrap.lock::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 5;
        background: transparent;
        cursor: pointer;
    }
    .map-wrap.lock.unlock::after {
        display: none;
    }
}


/* ---------- Иконки мессенджеров в подвале ---------- */
.footer-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.footer-social-icon {
    display: block;
    width: 50px;
    height: 50px;
}

@media (max-width: 767px) {
    .footer-social-icon {
        width: 30px;
        height: 30px;
    }
}

.navbar-social-list {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.navbar-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.navbar-social-icon {
    display: block;
    width: 30px;
    height: 30px;
}

@media (max-width: 767px) {
    .navbar-social-icon {
        width: 20px;
        height: 20px;
    }
}


@media (min-width: 1200px) {
    .button-ujarak {
        min-width: 180px;
    }
}

h1, .heading-1,
h2, .heading-2,
h3, .heading-3,
h4, .heading-4,
h5, .heading-5,
h6, .heading-6 {
    letter-spacing: 0;
}


/* ---------- Отключение прелоудера ---------- */
/* Скрываем сам элемент прелоудера (HTML-разметка остаётся в MODX-чанке,
   но визуально не показывается). JS в script.js всё ещё навешивает классы
   на `.preloader`, но это безвредно, т.к. элемент скрыт. */
.preloader {
    display: none !important;
}

/* Страхуемся: контент страницы должен быть виден сразу,
   без ожидания класса .fadeIn от page-transition. */
.page {
    opacity: 1 !important;
    visibility: visible !important;
}


/* ---------- Прелоудер слайдера ---------- */
/* Реализован чисто на CSS-псевдоэлементах, чтобы оверлей появлялся
   с первого кадра рендера — до того как успеет отработать любой JS.
   Без этого был бы FOUC: сначала виден сырой HTML слайдов и текстов,
   потом JS накладывает оверлей, потом Swiper переанимирует caption'ы.
   JS только добавляет класс .aqua-slider-ready после загрузки фоновой
   картинки первого слайда (см. script.js, конец файла). */
.swiper-slider {
    position: relative;
}

.swiper-slide:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.65);
    /*background-image: linear-gradient(transparent 50%, rgba(0,0,0,.5) 50%),  linear-gradient(90deg, transparent 50%, rgba(0,0,0,.5) 50%);*/
    /*background-size: 4px 4px;*/
    z-index: 9;
    /*opacity: 0.75;*/
    transition: opacity 0.4s ease;
}

.swiper-slide-caption {
    z-index: 10;
}

.swiper-slide-caption .h1 {
    font-weight: 300;
}

/* Тёмный оверлей поверх слайдера — рендерится сразу, до JS */
.swiper-slider::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 100;
    background: #1a1a1a;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

/* Спиннер по центру оверлея */
.swiper-slider::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 56px;
    height: 56px;
    margin: -28px 0 0 -28px;
    z-index: 101;
    border: 4px solid rgba(255, 255, 255, 0.15);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: aqua-slider-spin 0.9s linear infinite;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* До готовности прячем содержимое слайдера, чтобы не мелькало
   до инициализации Swiper (тексты, кнопки, фоны слайдов).
   visibility: hidden сохраняет layout, поэтому Swiper корректно
   снимает размеры при init. */
.swiper-slider:not(.aqua-slider-ready) .swiper-wrapper {
    visibility: hidden;
}

/* После загрузки скрываем оверлей и спиннер */
.swiper-slider.aqua-slider-ready::before,
.swiper-slider.aqua-slider-ready::after {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

@keyframes aqua-slider-spin {
    to { transform: rotate(360deg); }
}


/* ---------- Юридические документы (Согласие/Политика/Положение) ---------- */
/* Тёмная гамма в стиле остального сайта + читаемая типографика.
   Везде стоит !important и/или повышенная специфичность, чтобы перебить
   дефолтные стили темы (большие h1/h2/h3/h4 капсом). */

body .legal-doc {
    color: rgba(255, 255, 255, 0.85);
}

/* === Главный заголовок документа === */
body .legal-doc h1,
body .legal-doc h1.h2 {
    font-size: 28px !important;
    line-height: 1.25 !important;
    font-weight: 400 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    color: #ffffff !important;
    margin: 0 0 2rem 0 !important;
}

@media (min-width: 768px) {
    body .legal-doc h1,
    body .legal-doc h1.h2 {
        font-size: 34px !important;
    }
}

body .legal-doc h1 .fw-black {
    font-weight: 900 !important;
}

/* === Заголовки разделов (h4) === */
body .legal-doc h4 {
    font-size: 18px !important;
    line-height: 1.4 !important;
    font-weight: 700 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    color: #ffffff !important;
    margin: 2.5rem 0 0.75rem 0 !important;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Первый h4 — без верхней разделительной линии */
body .legal-doc > .container > .row > [class*="col-"] > h4:first-of-type {
    border-top: 0;
    padding-top: 0;
    margin-top: 1rem !important;
}

/* === Параграфы и списки === */
body .legal-doc p,
body .legal-doc li {
    color: rgba(255, 255, 255, 0.78) !important;
    line-height: 1.65 !important;
    font-size: 15px !important;
}

body .legal-doc p {
    margin-bottom: 1rem;
}

body .legal-doc ul {
    list-style: disc outside !important;
    padding-left: 1.5rem !important;
    margin: 0 0 1.25rem 0 !important;
}

body .legal-doc ul li {
    margin-bottom: 0.4rem;
    list-style: disc outside !important;
}

body .legal-doc b,
body .legal-doc strong {
    color: #ffffff;
    font-weight: 700;
}

/* === Ссылки внутри документа === */
body .legal-doc a {
    color: var(--color-primary) !important;
    text-decoration: underline;
    text-underline-offset: 3px;
}

body .legal-doc a:hover {
    color: #ff6b75 !important;
}

/* === Подзаголовок-метаданные (организация, дата, утвердил) === */
.legal-doc-meta {
    color: rgba(255, 255, 255, 0.5) !important;
    font-size: 14px;
    line-height: 1.6;
}

.legal-doc-meta a {
    color: inherit !important;
}


/* ---------- Подвал: блок ссылок на юр. документы ---------- */
.footer-legal {
    font-size: 12px;
    line-height: 1.6;
    opacity: 0.7;
    margin-top: 0.5rem;
}

.footer-legal a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.footer-legal a:hover {
    opacity: 1;
}

.footer-legal-sep {
    margin: 0 0.5em;
    opacity: 0.6;
}

.short-card {
    position: relative;
    max-width: 640px;
    margin: 0 auto;
}

/* ---------- Пометка «необязательно» возле label ---------- */
.form-label-optional {
    font-weight: 400;
    font-size: 0.85em;
    color: rgba(255, 255, 255, 0.5);
    margin-left: 4px;
    text-transform: none;
    letter-spacing: 0;
}


/* ---------- Поля формы как затемнённые «островки» ---------- */
/* Каждое поле — слегка тёмный блок, отделённый от общего фона страницы.
   Применяется только на тёмных секциях (.bg-default, .bg-gray-900). */
.bg-default .rd-mailform .form-input,
.bg-gray-900 .rd-mailform .form-input {
    background: rgba(0, 0, 0, 0.22) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 6px !important;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.bg-default .rd-mailform .form-input:hover,
.bg-gray-900 .rd-mailform .form-input:hover {
    background: rgba(0, 0, 0, 0.28) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

.bg-default .rd-mailform .form-input:focus,
.bg-gray-900 .rd-mailform .form-input:focus {
    background: rgba(0, 0, 0, 0.32) !important;
    border-color: rgba(234, 32, 46, 0.55) !important;
    box-shadow: 0 0 0 3px rgba(234, 32, 46, 0.12) !important;
    outline: none !important;
}

/* Textarea — чуть больше воздуха внутри */
.bg-default .rd-mailform textarea.form-input,
.bg-gray-900 .rd-mailform textarea.form-input {
    min-height: 120px;
    resize: vertical;
}


/* ---------- Подсказка формата под полем формы ---------- */
.form-hint {
    display: block;
    margin-top: 6px;
    margin-left: 2px;
    font-size: 12px;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.45);
    letter-spacing: 0.5px;
}


/* ---------- Чекбокс согласия в форме контактов ---------- */
.form-consent {
    margin-top: 0.5rem;
    position: relative;
}

/* Чекбокс согласия валидируется нативным HTML5 (required + setCustomValidity).
   Любые сообщения от RD Mailform для этого блока скрываем — они мешают
   и пишут «Текстовое поле…», что для чекбокса бессмысленно. */
.form-consent .form-validation {
    display: none !important;
}

/* === Ссылка-телефон в подсказке формы (text-warning) === */
.form-call-link {
    color: inherit;             /* наследует цвет текста (text-warning) */
    text-decoration: underline;
    text-underline-offset: 3px;
    font-weight: 700;
    white-space: nowrap;
    transition: color 0.15s ease;
}

.form-call-link:hover,
.form-call-link:focus {
    color: var(--color-primary);
}


/* === Сообщение об ошибке для чекбокса согласия === */
.form-consent-error {
    display: none;
    margin-top: 6px;
    margin-left: 28px;          /* выравниваем по тексту, не по чекбоксу */
    color: var(--color-primary);
    font-size: 12px;
    line-height: 1.4;
    font-weight: 600;
}

.form-consent.has-error .form-consent-error {
    display: block;
    animation: form-field-shake 0.35s ease-in-out;
}

/* === Подсветка невалидных полей === */
/* Текстовые поля — красная рамка + лёгкое свечение */
.form-wrap.has-error .form-input {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px rgba(234, 32, 46, 0.18) !important;
    animation: form-field-shake 0.35s ease-in-out;
}

/* Чекбокс согласия — обводка outline'ом */
.form-consent.has-error .form-consent-input {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(234, 32, 46, 0.18);
    border-radius: 2px;
}

/* Лёгкая встряска для привлечения внимания */
@keyframes form-field-shake {
    0%, 100% { transform: translateX(0); }
    20%      { transform: translateX(-4px); }
    40%      { transform: translateX(4px); }
    60%      { transform: translateX(-3px); }
    80%      { transform: translateX(3px); }
}

@media (prefers-reduced-motion: reduce) {
    .form-consent.has-error .form-consent-error,
    .form-wrap.has-error .form-input {
        animation: none;
    }
}

.form-consent-label {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    cursor: pointer;
    font-size: 13px;
    line-height: 1.5;
    text-align: left;
    color: inherit;
}

.form-consent-input {
    margin-top: 0.25rem;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    accent-color: var(--color-primary);
}

.form-consent a {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.rd-mailform .form-text .text-primary {
    font-weight: 300;
    font-size: 15px;
    padding: 0.25rem 0.5rem;
    background-color: rgba(234, 32, 46, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    margin-bottom: 0.5rem;
    line-height: 20px;
}

.rd-mailform .form-text .text-warning {
    font-weight: 300;
    font-size: 13px;
    padding: 0.25rem 0.5rem;
    background-color: rgba(255, 193, 7, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    margin-bottom: 1rem;
    line-height: 20px;
}

@media (max-width: 767px) {
    .rd-mailform .form-text .text-primary {
        font-size: 19px;
    }
}

@media (max-width: 767px) {
    .rd-mailform .form-text .text-warning {
        font-size: 15px;
    }
}