/* =====================================================
   Общий сброс стилей и базовые настройки шрифтов
   ===================================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Базовый шрифт и цвета страницы */
body {
    font-family: 'Segoe UI', Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #1a1a2e;
    background-color: #f8f9fa;
}

/* Универсальный контейнер для центрирования контента */
.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Атрибут hidden всегда скрывает элемент, даже если задан display: flex */
[hidden] {
    display: none !important;
}

/* Сброс стилей ссылок */
a {
    text-decoration: none;
    color: inherit;
}

/* Сброс стилей списков */
ul,
ol {
    list-style: none;
}

/* Изображения не выходят за рамки родителя */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* =====================================================
   Шапка сайта (Header)
   ===================================================== */
.site-header {
    background-color: #1a1a2e;
    color: #fff;
    padding: 16px 0;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Гибкий контейнер шапки: лого слева, меню справа */
.site-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

/* Стиль логотипа — flexbox чтобы иконка и текст стояли в одну строку */
.logo a {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.4rem;
    font-weight: 700;
    color: #e94560;
    letter-spacing: 0.5px;
}

/* Иконка внутри логотипа — отменяем display:block из общего правила img */
.logo a img {
    display: inline-block;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

/* Горизонтальное меню навигации */
.main-nav ul {
    display: flex;
    gap: 30px;
}

/* Ссылки навигации */
.main-nav a {
    color: #ccc;
    font-size: 0.95rem;
    font-weight: 500;
    padding: 4px 0;
    border-bottom: 2px solid transparent;
    transition: color 0.2s, border-color 0.2s;
}

/* Активная и ховер ссылки меню */
.main-nav a:hover,
.main-nav a.active {
    color: #e94560;
    border-bottom-color: #e94560;
}

/* Кнопка "гамбургер" скрыта на широких экранах */
.mobile-menu-toggle {
    display: none;
    width: 42px;
    height: 38px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
}

/* Линии внутри кнопки "гамбургер" */
.mobile-menu-toggle__bar {
    display: block;
    width: 20px;
    height: 2px;
    background-color: #fff;
    border-radius: 2px;
    transition: transform 0.2s, opacity 0.2s;
}

/* Подсветка кнопки "гамбургер" при наведении */
.mobile-menu-toggle:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.7);
}

/* Видимый фокус кнопки "гамбургер" для клавиатуры */
.mobile-menu-toggle:focus-visible {
    outline: 2px solid #e94560;
    outline-offset: 3px;
}

/* =====================================================
   Кнопки (общие стили)
   ===================================================== */

/* Основная кнопка (красная) */
.btn-primary {
    display: inline-block;
    background-color: #e94560;
    color: #fff;
    padding: 12px 28px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 1rem;
    transition: background-color 0.2s, transform 0.1s;
    margin: 8px 8px 8px 0;
}

.btn-primary:hover {
    background-color: #c73652;
    transform: translateY(-1px);
}

/* Вторичная кнопка (контурная) */
.btn-secondary {
    display: inline-block;
    background-color: transparent;
    color: #e94560;
    padding: 11px 27px;
    border-radius: 6px;
    border: 2px solid #e94560;
    font-weight: 600;
    font-size: 1rem;
    transition: background-color 0.2s, color 0.2s, transform 0.1s;
    margin: 8px 0;
}

.btn-secondary:hover {
    background-color: #e94560;
    color: #fff;
    transform: translateY(-1px);
}

/* =====================================================
   Секция Hero (главный баннер)
   ===================================================== */
.hero {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 60%, #0f3460 100%);
    color: #fff;
    padding: 80px 0;
    text-align: center;
}

/* Контент блока Hero */
.hero-content h1 {
    font-size: 2.4rem;
    font-weight: 800;
    margin-bottom: 20px;
    line-height: 1.2;
}

/* Подзаголовок Hero */
.hero-subtitle {
    font-size: 1.15rem;
    color: #b0b8cc;
    max-width: 600px;
    margin: 0 auto 30px;
}

/* =====================================================
   Секция скриншотов (как это работает)
   ===================================================== */
.screenshots {
    padding: 70px 0;
    background-color: #fff;
    /* Отступ для якорного перехода — компенсирует высоту липкой шапки */
    scroll-margin-top: 64px;
}

/* Заголовок секции */
.screenshots h2 {
    text-align: center;
    font-size: 2rem;
    margin-bottom: 12px;
    color: #1a1a2e;
}

/* Подзаголовок секции */
.section-subtitle {
    text-align: center;
    color: #666;
    font-size: 1rem;
    margin-bottom: 50px;
}

/* Один элемент скриншота: текст + картинка рядом */
.screenshot-item {
    display: flex;
    align-items: center;
    gap: 40px;
    margin-bottom: 60px;
}

/* Перевёрнутый вариант: картинка слева, текст справа */
.screenshot-item.reverse {
    flex-direction: row-reverse;
}

/* Текстовая часть скриншота */
.screenshot-text {
    flex: 1;
}

.screenshot-text h3 {
    font-size: 1.4rem;
    margin-bottom: 12px;
    color: #1a1a2e;
}

.screenshot-text p {
    color: #555;
    font-size: 1rem;
    line-height: 1.7;
}

/* Изображение скриншота */
.screenshot-image {
    flex: 1;
    text-align: center;
}

.screenshot-image img {
    border-radius: 12px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
    margin: 0 auto;
    max-width: 480px;
    width: 100%;
}

/* =====================================================
   Секция преимуществ (Features)
   ===================================================== */
.features {
    padding: 70px 0;
    background-color: #f0f4f8;
}

.features h2 {
    text-align: center;
    font-size: 2rem;
    margin-bottom: 40px;
    color: #1a1a2e;
}

/* Сетка карточек преимуществ */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 24px;
}

/* Карточка преимущества */
.feature-card {
    background-color: #fff;
    border-radius: 12px;
    padding: 30px 24px;
    text-align: center;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
    transition: transform 0.2s, box-shadow 0.2s;
}

.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* Иконка карточки преимущества */
.feature-icon {
    font-size: 2.4rem;
    display: block;
    margin-bottom: 14px;
}

.feature-card h3 {
    font-size: 1.1rem;
    margin-bottom: 8px;
    color: #1a1a2e;
}

.feature-card p {
    font-size: 0.9rem;
    color: #666;
}

/* =====================================================
   Страница Welcome — Hero секция
   ===================================================== */
.welcome-hero {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 60%, #0f3460 100%);
    color: #fff;
    padding: 60px 0;
    text-align: center;
}

.welcome-hero h1 {
    font-size: 2.2rem;
    font-weight: 800;
    margin-bottom: 16px;
    line-height: 1.25;
}

/* =====================================================
   Страница Welcome — Секция баннера
   ===================================================== */
.welcome-banner {
    padding: 60px 0;
    background-color: #fff;
}

.welcome-banner h2 {
    text-align: center;
    font-size: 1.9rem;
    margin-bottom: 12px;
    color: #1a1a2e;
}

/* Обёртка для баннера */
.banner-wrapper {
    margin-top: 30px;
    text-align: center;
}

/* Сам баннер с инструкцией */
.banner-image {
    width: 100%;
    max-width: 900px;
    border-radius: 14px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
    margin: 0 auto;
}

/* =====================================================
   Страница Welcome — Секция шагов
   ===================================================== */
.steps {
    padding: 60px 0;
    background-color: #f0f4f8;
}

.steps h2 {
    text-align: center;
    font-size: 1.9rem;
    margin-bottom: 40px;
    color: #1a1a2e;
}

/* Список шагов */
.steps-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 800px;
    margin: 0 auto;
}

/* Один шаг */
.step-item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    background-color: #fff;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07);
}

/* Номер шага (красный круг) */
.step-number {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    background-color: #e94560;
    color: #fff;
    font-size: 1.2rem;
    font-weight: 700;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Текстовое содержимое шага */
.step-content h3 {
    font-size: 1.1rem;
    margin-bottom: 6px;
    color: #1a1a2e;
}

.step-content p {
    font-size: 0.95rem;
    color: #555;
    line-height: 1.6;
}

.step-content a {
    color: #e94560;
    text-decoration: underline;
}

/* Блок с кнопкой "Подробнее" под списком шагов */
.steps-action {
    text-align: center;
    margin-top: 40px;
}

/* =====================================================
   Секция призыва к действию (CTA)
   ===================================================== */
.cta {
    padding: 70px 0;
    background: linear-gradient(135deg, #0f3460 0%, #16213e 100%);
    color: #fff;
    text-align: center;
}

.cta h2 {
    font-size: 2rem;
    margin-bottom: 14px;
}

.cta p {
    font-size: 1.1rem;
    color: #b0b8cc;
    margin-bottom: 28px;
}

/* =====================================================
   Страница контактов — Hero
   ===================================================== */
.page-hero {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 60%, #0f3460 100%);
    color: #fff;
    padding: 60px 0;
    text-align: center;
}

.page-hero h1 {
    font-size: 2.2rem;
    font-weight: 800;
    margin-bottom: 16px;
}

/* =====================================================
   Страница контактов — Контактные карточки
   ===================================================== */
.contacts-section {
    padding: 60px 0;
    background-color: #fff;
}

.contacts-section h2 {
    text-align: center;
    font-size: 1.9rem;
    margin-bottom: 40px;
    color: #1a1a2e;
}

/* Сетка контактных карточек */
.contacts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
}

/* Контактная карточка */
.contact-card {
    background-color: #f8f9fa;
    border-radius: 14px;
    padding: 32px 24px;
    text-align: center;
    border: 1px solid #e9ecef;
    transition: transform 0.2s, box-shadow 0.2s;
}

.contact-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

/* Иконка контактной карточки */
.contact-icon {
    font-size: 2.8rem;
    margin-bottom: 14px;
}

.contact-card h3 {
    font-size: 1.15rem;
    margin-bottom: 10px;
    color: #1a1a2e;
}

.contact-card p {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 18px;
    line-height: 1.6;
}

/* Ссылка в контактной карточке */
.contact-link {
    display: inline-block;
    color: #e94560;
    font-weight: 600;
    font-size: 0.95rem;
    border-bottom: 2px solid transparent;
    transition: border-color 0.2s;
}

.contact-link:hover {
    border-bottom-color: #e94560;
}

/* =====================================================
   Страница контактов — FAQ
   ===================================================== */
.faq {
    padding: 60px 0;
    background-color: #f0f4f8;
}

.faq h2 {
    text-align: center;
    font-size: 1.9rem;
    margin-bottom: 36px;
    color: #1a1a2e;
}

/* Список вопросов */
.faq-list {
    max-width: 760px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Один элемент FAQ */
.faq-item {
    background-color: #fff;
    border-radius: 10px;
    padding: 20px 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.faq-question {
    font-size: 1rem;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 8px;
}

.faq-answer {
    font-size: 0.95rem;
    color: #555;
    line-height: 1.6;
}

/* =====================================================
   Подвал сайта (Footer)
   ===================================================== */
.site-footer {
    background-color: #1a1a2e;
    color: #888;
    padding: 28px 0;
    text-align: center;
    font-size: 0.9rem;
}

.site-footer p {
    margin-bottom: 8px;
}

.site-footer a {
    color: #aaa;
    transition: color 0.2s;
}

.site-footer a:hover {
    color: #e94560;
}

/* =====================================================
   Юридические страницы: Privacy Policy, Cookie Policy, Terms of Service
   ===================================================== */
/* Основная секция юридического документа задаёт светлый фон и отступы */
.legal-page {
    padding: 60px 0;
    background-color: #fff;
}

/* Карточка юридического документа ограничивает ширину текста для удобного чтения */
.legal-document {
    max-width: 860px;
    margin: 0 auto;
    padding: 40px;
    background-color: #fff;
    border-radius: 14px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
}

/* Главный заголовок юридического документа */
.legal-document h1 {
    font-size: 2.2rem;
    line-height: 1.2;
    margin-bottom: 10px;
    color: #1a1a2e;
}

/* Дата последнего обновления документа */
.legal-updated {
    margin-bottom: 28px;
    color: #666;
    font-size: 0.95rem;
}

/* Заголовки разделов юридического документа */
.legal-document h2 {
    margin-top: 28px;
    margin-bottom: 12px;
    font-size: 1.35rem;
    color: #1a1a2e;
}

/* Обычные абзацы юридического документа */
.legal-document p {
    margin-bottom: 14px;
    color: #444;
    line-height: 1.75;
}

/* Списки юридического документа */
.legal-document ul {
    list-style: disc;
    padding-left: 24px;
    margin: 0 0 18px;
    color: #444;
}

/* Пункты списков юридического документа */
.legal-document li {
    margin-bottom: 8px;
}

/* Ссылки внутри юридического документа */
.legal-document a {
    color: #e94560;
    text-decoration: underline;
}

/* Состояние наведения для ссылок внутри юридического документа */
.legal-document a:hover {
    color: #c73652;
}

/* Кнопка-ссылка внутри юридического документа сохраняет белый текст основной кнопки */
.legal-document .btn-primary {
    color: #fff;
    text-decoration: none;
}

/* При наведении текст кнопки внутри юридического документа остаётся белым */
.legal-document .btn-primary:hover {
    color: #fff;
}

/* =====================================================
   Страница контактов — Сетка из двух карточек
   ===================================================== */

/* Модификатор сетки: ровно две колонки по центру */
.contacts-grid--two {
    grid-template-columns: repeat(2, minmax(260px, 400px));
    justify-content: center;
}

/* =====================================================
   Страница контактов — Секция с формой
   ===================================================== */
.contact-form-section {
    padding: 60px 0;
    background-color: #f0f4f8;
    /* Отступ для якорного перехода — компенсирует высоту липкой шапки */
    scroll-margin-top: 64px;
}

.contact-form-section h2 {
    text-align: center;
    font-size: 1.9rem;
    margin-bottom: 12px;
    color: #1a1a2e;
}

/* Обёртка формы — ограничиваем ширину и центрируем */
.contact-form-wrapper {
    max-width: 680px;
    margin: 0 auto;
    margin-top: 36px;
}

/* Одна группа поле + подпись */
.form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
}

/* Подпись поля формы */
.form-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: #1a1a2e;
    margin-bottom: 6px;
}

/* Звёздочка обязательного поля */
.form-required {
    color: #e94560;
    margin-left: 2px;
}

/* Общий стиль для input, select и textarea */
.form-input {
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid #d1d5db;
    border-radius: 8px;
    font-size: 0.95rem;
    font-family: inherit;
    color: #1a1a2e;
    background-color: #fff;
    transition: border-color 0.2s, box-shadow 0.2s;
    outline: none;
}

/* Выделение поля при фокусе */
.form-input:focus {
    border-color: #e94560;
    box-shadow: 0 0 0 3px rgba(233, 69, 96, 0.15);
}

/* Стиль выпадающего списка select */
.form-select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23888' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
}

/* Стиль текстового поля textarea */
.form-textarea {
    resize: vertical;
    min-height: 120px;
}

/* Счётчик символов под textarea */
.form-char-count {
    font-size: 0.8rem;
    color: #999;
    text-align: right;
    margin-top: 4px;
}

/* Honeypot поле — полностью скрыто от пользователей */
.form-honeypot {
    position: absolute;
    left: -9999px;
    top: -9999px;
    opacity: 0;
    pointer-events: none;
    tab-index: -1;
}

/* Блок кнопки отправки */
.form-submit {
    margin-top: 8px;
}

/* Подпись под кнопкой: поясняет, что поля со звёздочкой обязательны */
.form-note {
    margin-top: 10px;
    font-size: 0.86rem;
    color: #666;
    line-height: 1.5;
}

/* Кнопка отправки — растянуть на всю ширину */
.form-btn {
    width: 100%;
    text-align: center;
    margin: 0;
    padding: 14px;
    font-size: 1rem;
    cursor: pointer;
    border: none;
}

/* Кнопка в состоянии отправки */
.form-btn:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    transform: none;
}

/* Блок с сообщением об успехе */
.form-success {
    display: flex;
    align-items: center;
    gap: 12px;
    background-color: #d1fae5;
    border: 1.5px solid #6ee7b7;
    border-radius: 10px;
    padding: 16px 20px;
    margin-bottom: 24px;
    color: #065f46;
    font-size: 0.95rem;
}

.form-success__icon {
    font-size: 1.4rem;
    flex-shrink: 0;
}

/* Блок с сообщением об ошибке */
.form-error {
    display: flex;
    align-items: center;
    gap: 12px;
    background-color: #fee2e2;
    border: 1.5px solid #fca5a5;
    border-radius: 10px;
    padding: 16px 20px;
    margin-bottom: 24px;
    color: #991b1b;
    font-size: 0.95rem;
}

.form-error__icon {
    font-size: 1.4rem;
    flex-shrink: 0;
}

/* =====================================================
   Страница 404 — сообщение, картинка и кнопка возврата
   ===================================================== */
/* Основная секция 404 занимает центральную часть страницы */
.not-found {
    padding: 70px 0;
    background-color: #fff;
}

/* Контент 404 выравниваем по центру */
.not-found__content {
    text-align: center;
}

/* Заголовок страницы 404 */
.not-found__title {
    font-size: 2.4rem;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 18px;
    color: #1a1a2e;
}

/* Текст под заголовком 404 */
.not-found__text {
    max-width: 620px;
    margin: 0 auto 30px;
    color: #555;
    font-size: 1.1rem;
    line-height: 1.7;
}

/* Обёртка картинки 404 нужна для горизонтального центрирования */
.not-found__image-wrapper {
    display: flex;
    justify-content: center;
    margin: 0 auto 30px;
}

/* Картинка 404: ограничиваем размер и добавляем плавность смены */
.not-found__image {
    width: 100%;
    max-width: 360px;
    border-radius: 16px;
    transition: transform 0.2s ease, filter 0.2s ease;
}

/* При наведении на кнопку немного оживляем картинку */
.not-found__content:has(.not-found__button:hover) .not-found__image,
.not-found__content:has(.not-found__button:focus) .not-found__image {
    transform: translateY(-4px);
    filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.12));
}

/* Кнопка возврата на главную страницу */
.not-found__button {
    min-width: 160px;
    text-align: center;
}

/* =====================================================
   Адаптивность для мобильных устройств (до 768px)
   ===================================================== */
@media (max-width: 768px) {

    /* Скриншоты — вертикальная раскладка */
    .screenshot-item,
    .screenshot-item.reverse {
        flex-direction: column;
    }

    /* Уменьшаем заголовки */
    .hero-content h1,
    .welcome-hero h1,
    .page-hero h1 {
        font-size: 1.6rem;
    }

    /* Меню — горизонтальный скролл если не влезает */
    .main-nav ul {
        gap: 16px;
        flex-wrap: wrap;
        justify-content: center;
    }

    /* Логотип меньше на мобилке */
    .logo a {
        font-size: 1.1rem;
    }

    /* CTA кнопки — в колонку */
    .cta .btn-primary,
    .cta .btn-secondary {
        display: block;
        width: 100%;
        max-width: 280px;
        margin: 8px auto;
        text-align: center;
    }

    /* Карточки контактов — одна колонка на мобилке */
    .contacts-grid--two {
        grid-template-columns: 1fr;
    }

    /* На мобильных уменьшаем отступ в правом блоке шапки */
    .header-right {
        gap: 10px;
    }

    /* На мобильных уменьшаем заголовок и картинку 404 */
    .not-found__title {
        font-size: 1.8rem;
    }

    .not-found__image {
        max-width: 280px;
    }
}

/* =====================================================
   Правый блок шапки: меню + переключатель языка
   ===================================================== */
/* Группируем навигацию и переключатель языка справа в шапке */
.header-right {
    display: flex;
    align-items: center;
    gap: 24px;
}

/* =====================================================
   Переключатель языка в шапке
   ===================================================== */
/* Обёртка переключателя — нужна для позиционирования выпадающего списка */
.lang-switcher {
    position: relative;
    display: inline-block;
}

/* Кнопка, открывающая список языков */
.lang-switcher__toggle {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: #fff;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    font-family: inherit;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.lang-switcher__toggle:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* Стрелка вниз рядом с текущим языком */
.lang-switcher__arrow {
    font-size: 0.7rem;
}

/* Выпадающий список с языками (скрыт по умолчанию) */
.lang-switcher__dropdown {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    background: #1a1a2e;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    padding: 8px 0;
    margin: 0;
    min-width: 170px;
    z-index: 1000;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
    max-height: 340px;
    overflow-y: auto;
}

/* Показываем список, когда переключатель открыт */
.lang-switcher.is-open .lang-switcher__dropdown {
    display: block;
}

/* Ссылка одного языка в списке */
.lang-switcher__dropdown a {
    display: block;
    padding: 8px 16px;
    color: #ccc;
    font-size: 0.9rem;
}

.lang-switcher__dropdown a:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

/* Текущий выбранный язык в списке выделяем цветом */
.lang-switcher__dropdown a.is-current {
    color: #e94560;
    font-weight: 600;
}

/* =====================================================
   Баннер предложения сменить язык (вверху страницы)
   ===================================================== */
/* Баннер появляется сверху, если язык браузера отличается от языка страницы */
.lang-suggest {
    background: #16213e;
    color: #fff;
    padding: 14px 0;
    border-bottom: 2px solid #e94560;
}

/* Внутренний контейнер баннера: текст и кнопки */
.lang-suggest .container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

.lang-suggest__text {
    font-size: 0.95rem;
}

/* Кнопки в баннере предложения языка */
.lang-suggest__btns {
    display: flex;
    gap: 10px;
}

/* Кнопка "перейти" в баннере */
.lang-suggest__accept {
    background: #e94560;
    color: #fff;
    border: none;
    padding: 8px 18px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    font-family: inherit;
}

.lang-suggest__accept:hover {
    background: #c73652;
}

/* Кнопка "остаться" в баннере */
.lang-suggest__decline {
    background: transparent;
    color: #ccc;
    border: 1px solid rgba(255, 255, 255, 0.4);
    padding: 8px 18px;
    border-radius: 6px;
    font-size: 0.9rem;
    cursor: pointer;
    font-family: inherit;
}

.lang-suggest__decline:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
}

/* =====================================================
   Баннер согласия на использование cookie (внизу страницы)
   ===================================================== */
/* Баннер фиксируется внизу экрана, пока пользователь не сделает выбор */
.cookie-consent {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: #1a1a2e;
    color: #ddd;
    padding: 16px 0;
    z-index: 2000;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4);
    border-top: 2px solid #e94560;
}

/* Контейнер баннера cookie: текст слева, кнопки справа */
.cookie-consent .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.cookie-consent__text {
    font-size: 0.9rem;
    max-width: 720px;
}

.cookie-consent__text a {
    color: #e94560;
    text-decoration: underline;
}

/* Группа кнопок в баннере cookie */
.cookie-consent__btns {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

/* Обёртка кнопок и ссылок cookie-баннера ставит ссылки под кнопками */
.cookie-consent__actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    flex-shrink: 0;
}

/* Ссылки на документы под кнопками cookie-баннера */
.cookie-consent__links {
    font-size: 0.82rem;
    color: #aaa;
    text-align: right;
}

/* Сами ссылки на документы в cookie-баннере */
.cookie-consent__links a {
    color: #e94560;
    text-decoration: underline;
}

/* Состояние наведения для ссылок cookie-баннера */
.cookie-consent__links a:hover {
    color: #fff;
}

/* Кнопка "Принять" cookie */
.cookie-consent__accept {
    background: #e94560;
    color: #fff;
    border: none;
    padding: 9px 20px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    font-family: inherit;
}

.cookie-consent__accept:hover {
    background: #c73652;
}

/* Кнопка "Отклонить" cookie */
.cookie-consent__decline {
    background: transparent;
    color: #ccc;
    border: 1px solid rgba(255, 255, 255, 0.4);
    padding: 9px 20px;
    border-radius: 6px;
    font-size: 0.9rem;
    cursor: pointer;
    font-family: inherit;
}

.cookie-consent__decline:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
}

/* На мобильных cookie-баннер выстраивается сверху вниз */
@media (max-width: 768px) {

    /* Контейнер cookie-баннера становится вертикальным на узких экранах */
    .cookie-consent .container {
        flex-direction: column;
        align-items: flex-start;
    }

    /* Кнопки и ссылки cookie-баннера выравниваются по левому краю */
    .cookie-consent__actions {
        align-items: flex-start;
    }

    /* Текст ссылок cookie-баннера выравнивается по левому краю */
    .cookie-consent__links {
        text-align: left;
    }
}

/* =====================================================
   Адаптивное меню "гамбургер" для узких экранов
   ===================================================== */
@media (max-width: 768px) {

    /* Контейнер хедера становится точкой привязки для выпадающего меню */
    body.has-mobile-menu .site-header .container {
        position: relative;
    }

    /* Правая часть хедера держит переключатель языка и кнопку меню справа */
    body.has-mobile-menu .header-right {
        flex: 1;
        justify-content: flex-end;
        flex-wrap: nowrap;
    }

    /* Переключатель языка остаётся перед кнопкой "гамбургер" */
    body.has-mobile-menu .lang-switcher {
        order: 1;
    }

    /* Кнопка "гамбургер" появляется только на узких экранах */
    body.has-mobile-menu .mobile-menu-toggle {
        display: flex;
        order: 2;
        flex-shrink: 0;
    }

    /* Основное меню на узких экранах скрыто до клика по кнопке */
    body.has-mobile-menu .main-nav {
        display: none;
        position: absolute;
        top: calc(100% + 10px);
        left: 20px;
        right: 20px;
        z-index: 1000;
    }

    /* Открытое мобильное меню показывается как выпадающий блок */
    body.has-mobile-menu .site-header.is-mobile-menu-open .main-nav {
        display: block;
    }

    /* Список ссылок в мобильном меню становится вертикальным */
    body.has-mobile-menu .main-nav ul {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 8px;
        background: #16213e;
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 10px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
        max-height: calc(100vh - 90px);
        overflow-y: auto;
    }

    /* Пункты мобильного меню занимают всю ширину выпадающего блока */
    body.has-mobile-menu .main-nav li {
        width: 100%;
    }

    /* Ссылки мобильного меню выглядят как крупные строки для удобного нажатия */
    body.has-mobile-menu .main-nav a {
        display: block;
        padding: 11px 12px;
        color: #fff;
        border-bottom: 0;
        border-radius: 6px;
    }

    /* Активная и наведённая ссылка мобильного меню получают тёмную подсветку */
    body.has-mobile-menu .main-nav a:hover,
    body.has-mobile-menu .main-nav a.active {
        color: #fff;
        background: rgba(233, 69, 96, 0.22);
        border-bottom-color: transparent;
    }

    /* Первая линия кнопки превращается в часть крестика при открытом меню */
    body.has-mobile-menu .site-header.is-mobile-menu-open .mobile-menu-toggle__bar:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    /* Средняя линия кнопки исчезает при открытом меню */
    body.has-mobile-menu .site-header.is-mobile-menu-open .mobile-menu-toggle__bar:nth-child(2) {
        opacity: 0;
    }

    /* Нижняя линия кнопки превращается во вторую часть крестика при открытом меню */
    body.has-mobile-menu .site-header.is-mobile-menu-open .mobile-menu-toggle__bar:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }
}

/* =====================================================
   Поддержка языков с письмом справа налево (арабский)
   ===================================================== */
/* Для арабского переключаем выравнивание выпадающего списка языков */
html[dir="rtl"] .lang-switcher__dropdown {
    right: auto;
    left: 0;
}

/* Для арабского выравниваем текст по правому краю */
html[dir="rtl"] body {
    text-align: right;
}