@font-face {
    font-family: 'HelveticaNeueCyr Roman';
    src: url('../../fonts/helveticaneuecyr_roman.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'HelveticaNeueCyr Thin';
    src: url('../../fonts/helveticaneuecyr_thin.otf') format('opentype');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');

/* Стили для блока "хлебных крошек" */
.breadcrumbs {
    padding: 20px 5%;
    margin-top: 20px;
    font-family: 'HelveticaNeueCyr Roman', Arial, sans-serif;
    font-size: 14px;
}

.breadcrumbs a {
    color: #7A7A7A;
    text-decoration: none;
    transition: color 0.3s ease;
}

.breadcrumbs a:hover {
    color: #333F48;
}

.breadcrumbs span.current {
    color: #333F48;
}

.breadcrumbs .separator {
    margin: 0 5px;
    color: #7A7A7A;
}

.article-badge::after {
    font-family: 'HelveticaNeueCyr Thin', Arial, sans-serif;
}

.article-badge-new::after {
    font-family: 'HelveticaNeueCyr Thin', Arial, sans-serif;
}

.article-badge-hit::after {
    font-family: 'HelveticaNeueCyr Thin', Arial, sans-serif;
}

.contact-block {
    margin-bottom: 20px;
}

/* Стили для секции контактов */
.contacts-section {
    padding: 40px 5%; /* Отступы как у breadcrumbs */
    font-family: 'Roboto', Arial, sans-serif;
    padding-bottom: 50px;
}

.contacts-title {
    font-size: 42px;
    margin-bottom: 30px; /* Отступ под заголовком */
    font-weight: 800 !important;
    color: #333F48;
    font-family: 'Roboto', sans-serif;
}

/* Стили для контактных элементов */
.contact-item {
    display: flex;
    align-items: center; /* Выравнивание по центру по вертикали */
    gap: 10px; /* Отступ между картинкой и текстом */
    margin-bottom: 10px; /* Отступ снизу */
}

.contact-icon {
    width: 14px;
    height: 16px;
}

.contact-text {
    color: #7A7A7A;
    font-family: 'HelveticaNeueCyr Roman', Arial, sans-serif;
    margin-top: 3px;
}

.contact-value {
    margin-top: 10px;  /* Отступ сверху */
    margin-bottom: 10px;  /* Отступ снизу */
    font-family: 'HelveticaNeueCyr Roman', Arial, sans-serif;
    font-size: 16px;
    color: #333F48;
    line-height: 1.4;
}

.divider-line {
    width: 100%; /* Разделитель на всю ширину */
    height: 1px;
    background-color: #D9D9D9;
    margin: 15px 0;
}

/* Стили для социальных сетей */
.social-icons {
    display: flex;
    gap: 20px;
    margin-top: 20px;
    margin-bottom: 20px; /* Отступ снизу */
}

.social-icons img {
    width: 35px !important;  /* Установим фиксированную ширину для иконок */
    height: 35px !important;  /* Установим фиксированную высоту для иконок */
    transition: transform 0.3s ease !important; /* Плавное увеличение при наведении */
    transform-origin: center; /* Плавное увеличение при наведении */
}

.social-icons img:hover {
    transform: scale(1.2) !important;
    filter: brightness(1.1) !important; 
}

.scale-hover {
    display: inline-block !important;
    transition: transform 0.3s ease !important;
    will-change: transform;
}

.scale-hover:hover {
    transform: scale(1.2) !important;
}

.scale-hover:hover img {
    filter: brightness(1.1) !important;
}

/* Разделитель для социальных сетей */
.divider-line {
    width: 50%; /* Разделитель на половину экрана */
    height: 1px;
    background-color: #D9D9D9;
    margin: 20px 0;
}

/* Блок «Где купить» над кнопками */
.contact-item {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

/* Контейнер для кнопок: ДИСТРИБЬЮТОР сверху, OZON под ним */
.buttons-container {
    margin-top: 20px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
}

/* Кнопка ДИСТРИБЬЮТОР — обрезка polygon, цвет и анимация как у OZON */
.custom-button-distributor {
    clip-path: polygon(0 0, 95% 0, 100% 15%, 100% 100%, 0 100%);
    transition: transform 0.3s ease;
}

.custom-button-distributor:hover {
    transform: scale(1.05);
}

/* Кнопка OZON — прежний вид */
.custom-button-ozon {
    clip-path: polygon(0% 0%, 100% 0%, 100% 83%, 95% 100%, 0% 100%, 0% 16%);
    transition: transform 0.3s ease;
}

.custom-button-ozon:hover {
    transform: scale(1.05);
}


/* Изменение для кнопок, чтобы они располагались вертикально */
.custom-button {
    width: 267px;
    height: 58px;
    background-color: #00A9CE;
    color: #FFFFFF;
    border: none;
    font-size: 14px;
    font-family: 'HelveticaNeueCyr Roman', Arial, sans-serif;
    cursor: pointer;
    margin-bottom: 5px;
    transition: transform 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 0;
    margin-right: 0;
    letter-spacing: 1px;
    position: relative;
    overflow: hidden;
    z-index: 1;
    text-align: center;
    text-decoration: none;
}

.custom-button:hover {
    transform: scale(1.1); /* Увеличение кнопки при наведении */
}

.custom-button:focus {
    outline: none;
}

.divider-line {
    width: 40%; /* Разделитель на всю ширину */
    height: 1px;
    background-color: #D9D9D9;
    margin: 20px 0;
}

/* Контейнер для текста, который будет располагаться справа */
.text-block {
    display: flex;
    justify-content: flex-start; /* Выравнивание текста слева */
    flex-direction: column; /* Текст по вертикали */
    margin-left: 50%; /* Сдвиг на половину экрана */
    padding-left: 20px; /* Отступ слева */
}

.text-block p {
    font-family: 'Roboto', sans-serif;
    font-size: 20px; /* Размер шрифта */
    color: #333F48; /* Цвет текста */
    line-height: 1.5; /* Межстрочный интервал */
    margin-top: -70%; /* Поднимет текст вверх */
    font-weight: bold;
}

/* Стили для текста благодарности — только форма на странице контактов */
.contacts-section .thank-you-text p {
    font-family: 'HelveticaNeueCyr Roman', Arial, sans-serif;
    font-size: 14px;
    color: #333F48;
    margin-bottom: 20px;
    padding-left: 51.2%;
    transform: translateY(-3100%);
}

/* Стили для поля ввода темы сообщения */
.contacts-section .theme-container {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    padding-left: 51.2%;
    transform: translateY(-490%);
}

.theme-container label {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    color: #7A7A7A;
    margin-bottom: 10px;
}

.theme-input {
    width: 610px;
    height: 48px;
    background-color: #FFFFFF;
    border: none;
    padding: 10px;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    color: none;
    outline: none;
    clip-path: polygon(3% 0%, 100% 0%, 100% 83%, 100% 100%, 0% 100%, 0% 16%);
}



/* Стили для блока "Текст сообщения" — фиксированный translateY, чтобы при ресайзе textarea поле не уезжало вверх */
.contacts-section .message-container {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    padding-left: 51.2%;
    transform: translateY(-470px);
}

.message-container label {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    color: #7A7A7A;
    margin-bottom: 10px;
}

.message-input {
    width: 610px;
    min-height: 90px;
    height: 90px;
    background-color: #FFFFFF;
    border: none;
    padding: 10px;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    color: none;
    outline: none;
    clip-path: polygon(3% 0%, 100% 0%, 100% 83%, 100% 100%, 0% 100%, 0% 16%);
    resize: none;
    align-self: flex-start;
}

.message-input:focus {
    border: none;
    outline: none;
}

/* Стили для блока "Прикрепить файл" — сразу под полем "Текст сообщения", прижат к правому краю */
.contacts-section .attach-file {
    margin-top: 12px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 610px;
    margin-left: 53%;
    padding-left: 0;
    transform: translateY(-458px);
}

.file-icon {
    width: 16px;
    height: 16px;
    margin-right: 10px;
}

.attach-file span {
    font-family: 'HelveticaNeueCyr Roman', Arial, sans-serif;
    font-size: 14px;
    color: #333F48;
}

.file-input {
    display: none;
}

/* Сделать так, чтобы при клике на иконку с файлом открывался файл */
.attach-file label {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Добавить подчеркивание при наведении на текст "Прикрепить файл" */
.attach-file label:hover span {
    text-decoration: underline;
    text-decoration-color: #00A9CE;
}

/* Блок "Я хочу / не хочу получить ответ": отступ сверху = margin-top ниже */
.contacts-section .response-options {
    display: flex;
    justify-content: flex-start;
    margin-top: 12px;   /* отступ сверху (между "Прикрепить файл" и этим блоком); снизу — у .email-container margin-top: 20px */
    font-family: 'HelveticaNeueCyr Roman', Arial, sans-serif;
    font-size: 14px;
    color: #333F48;
    transform: translateY(-470px);
    gap: 30px;
    padding-left: 51.2%;
}

.response-option {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Квадраты «Я хочу / не хочу получить ответ» — всегда видны */
.response-checkbox {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    flex-shrink: 0;
    background-color: #FAFAFA !important;
    border: 2px solid #D9D9D9 !important;
    position: relative;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    padding: 0;
    box-sizing: border-box;
    border-radius: 0;
    display: block !important;
}

.response-checkbox:checked {
    background-color: #FAFAFA; /* Фон остается белым */
    border-color: #D50032; /* Рамка становится красной */
}

.response-checkbox:checked::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    right: 3px;
    bottom: 3px;
    background-color: #D50032;
    display: block;
    border-radius: 0;
}
.response-option label {
    cursor: pointer;
    font-family: 'HelveticaNeueCyr Roman', Arial, sans-serif;
    font-size: 14px;
    color: #333F48;
}

/* Стили для поля ввода E-mail */
.contacts-section .email-container {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    padding-left: 51.2%;
    transform: translateY(-670%);
}

.email-container label {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    color: #7A7A7A;
    margin-bottom: 10px;
    
}

.email-input {
    width: 610px;
    height: 48px;
    background-color: #FFFFFF;
    border: none;
    padding: 10px;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    color: none;
    outline: none;
    clip-path: polygon(3% 0%, 100% 0%, 100% 83%, 100% 100%, 0% 100%, 0% 16%);

}

.email-input:focus {
    border: none;
    outline: none;
}

/* Стили для блока согласия и кнопки отправки */
.contacts-section .consent-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    padding-left: 51.2%;
    transform: translateY(-900%);
    width: 630px;
}

.consent-option {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Чекбокс согласия — всегда виден */
.consent-checkbox {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    flex-shrink: 0;
    background-color: #FAFAFA !important;
    border: 2px solid #D9D9D9 !important;
    position: relative;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    padding: 0;
    box-sizing: border-box;
    border-radius: 0;
    display: block !important;
}

.consent-checkbox:checked {
    background-color: #FAFAFA;
    border-color: #D50032;
}

.consent-checkbox:checked::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    right: 3px;
    bottom: 3px;
    background-color: #D50032;
    display: block;
    border-radius: 0;
}

.consent-option label {
    font-family: 'HelveticaNeueCyr Roman', Arial, sans-serif;
    font-size: 12px;
    color: #333F48;
    cursor: pointer;
}

/* На странице контактов: ссылка «обработку персональных данных» — цвет #00A9CE */
.contacts-section .consent-option label a,
.contacts-section .consent-container .consent-option label a {
    color: #00A9CE !important;
    text-decoration: none;
}
.contacts-section .consent-option label a:hover,
.contacts-section .consent-container .consent-option label a:hover {
    color: #0090b0 !important;
    text-decoration: underline;
}

.submit-button {
    width: 224px;
    height: 50px;
    background-color: #00A9CE;
    color: #FFFFFF;
    border: none;
    font-family: 'HelveticaNeueCyr Roman', Arial, sans-serif;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    letter-spacing: 1px;
    clip-path: polygon(0 0, 95% 0, 100% 15%, 100% 100%, 0 100%);

}

.submit-button:hover {
    background-color: #00A9CE;
}

/* Стили для карты и футера */
.map-container {
    position: fixed;

    left: 0;
    width: 100%;
    z-index: 10;
}

.map-image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* Добавьте этот код в конец вашего CSS */
.contacts-section {
    position: relative;
    padding-bottom: 0; /* Убираем отступ снизу */
    margin-bottom: -500px; /* "Подтягиваем" последующие элементы вверх */
}

.map-container {
    position: relative;
    z-index: 1; /* Помещаем карту над пустым пространством */
    margin-top: 20px;
}

.site-footer {
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 20;
}

/* Контейнер для основного содержимого */
.main-content {
    height: 100vh;
    overflow-y: auto;
    position: relative;
}

/* Обертка для карты и футера */
.footer-wrapper {
    position: relative;
    z-index: 100;
    margin-top: 150px; /* Отступ от блока согласия */
}

/* Карта */
.map-container {
    width: 100%;
    margin-bottom: 0;
}

/* Футер */
.site-footer {
    position: relative;
    margin-top: 0;
}

/* Дополнительный отступ для секции контактов */
.contacts-section {
    padding-bottom: 100px; /* Оставляет место для карты и футера */
}

/* Стили для попапа */
.popup-overlay {
    display: none; /* Скрыт по умолчанию */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* полупрозрачный фон */
    justify-content: center;
    align-items: center;
    z-index: 9999; /* Попап будет поверх всех элементов */
}


.popup {
    background-color: #ffffff;
    padding: 50px 20px 20px;
    border-radius: 8px;
    width: 300px;
    text-align: center;
    position: relative;
}

.popup-button {
    width: 284px;
    height: 48px;
    background-color: #00A9CE;
    color: white;
    border: none;
    font-family: 'HelveticaNeueCyr Roman', Arial, sans-serif;
    font-size: 14px;
    cursor: pointer;
    margin: 5px 0;
    transition: background-color 0.3s ease;
}

.popup-button:hover {
    background-color: #007b8a; /* Тёмно-синий оттенок при наведении */
}

.close-popup {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 30px;
    color: black;
    background: none;
    border: none;
    cursor: pointer;
    transition: transform 0.2s ease-in-out;
}

.popup-close:hover {
  transform: rotate(30deg) scale(1.2); /* Подрыгивание на 10 градусов */
}


.popup-button:nth-child(2) { /* Первая кнопка после close-popup */
    clip-path: polygon(0 0, 95% 0, 100% 15%, 100% 100%, 0 100%);
}

.popup-button:nth-child(5) { /* Четвертая кнопка после close-popup */
    clip-path: polygon(0% 0%, 100% 0%, 100% 83%, 95% 100%, 0% 100%, 0% 16%);
}

/* Стили для попапа отправки */
.submit-popup-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
    z-index: 10000;
}

.submit-popup {
    background-color: white;
    padding: 40px;
    border-radius: 8px;
    width: 414px;
    max-width: 90%;
    text-align: center;
    position: relative;
}

.close-submit-popup {
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 24px;
    color: #333;
    background: none;
    border: none;
    cursor: pointer;
    line-height: 1;
    padding: 5px;
}

.popup-title {
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
    font-size: 30px;
    color: #333F48;
    margin-top: 20px;
    margin-bottom: 30px;
    line-height: 1.2;
}

.popup-text {
    font-family: 'HelveticaNeueCyr Roman', Arial, sans-serif;
    color: #333F48;
    font-size: 14px;
    margin-bottom: 30px;
    line-height: 1.5;
    text-align: center;
}

.popup-input-container {
    margin-bottom: 20px;
}

.popup-email-input {
    width: 314px;
    height: 48px;
    border: 1px solid #D9D9D9;
    padding: 0 15px;
    font-family: 'HelveticaNeueCyr Roman', Arial, sans-serif;
    font-size: 14px;
    color: #333F48;
    outline: none;
}

.popup-email-input:focus {
    border-color: #00A9CE;
}

.popup-consent {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: 'HelveticaNeueCyr Roman', Arial, sans-serif;
    font-size: 12px;
    color: #333F48;
    margin-bottom: 30px;
}

.popup-consent-checkbox {
    width: 16px;
    height: 16px;
    background-color: #FAFAFA;
    border: 1px solid #D9D9D9;
    position: relative;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    padding: 2px;
    box-sizing: border-box;
    border-radius: 0 !important; /* Строго квадратные */
}

.popup-consent-checkbox:checked {
    background-color: #FAFAFA;
    border-color: #D50032;
}

.popup-consent-checkbox:checked::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    background-color: #D50032;
    display: block;
    border-radius: 0 !important; /* Строго квадратные */
}

.popup-subscribe-button {
    width: 251px;
    height: 50px;
    background-color: #D50032;
    color: #FFFFFF;
    border: none;
    font-family: 'HelveticaNeueCyr Roman', Arial, sans-serif;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    letter-spacing: 1px;
    display: block;
    margin: 0 auto;
    clip-path: polygon(0 0, 95% 0, 100% 15%, 100% 100%, 0 100%);
}

.popup-subscribe-button:hover {
    background-color: #B00028;
}

/* 📱 Мобильная версия - окончательно исправленный код */
@media (max-width: 768px) {

    /* Карта */
    .map-container {
        position: relative;
        margin-top: 10px;
        width: 100% !important;
        max-width: 100vw !important;
        overflow: hidden;
    }

    .map-container img,
    .map-image {
        display: block !important;
        width: 105% !important; /* Еще немного уменьшаем ширину */
        height: auto !important;
        object-fit: cover !important;
        object-position: center !important; /* Центрируем картинку */
        margin-left: -2.5% !important; /* Смещаем влево, чтобы центрировать увеличенную картинку */
    }

    /* Секция контактов */
    .contacts-section {
        padding-bottom: 120px;
        margin-bottom: 0 !important;
        position: relative;
        z-index: 1;
    }

    /* Блок под картой */
    .alternative-fix {
        position: relative;
        margin-top: 0;
        z-index: 2;
    }

    /* Контейнер согласия */
    .consent-container {
        margin-bottom: 30px;
        flex-direction: column;
        gap: 20px;
        align-items: flex-start !important; /* Выравнивание по левому краю */
    }

    /* Стили для формы — на одном уровне по левому краю с «Спасибо за обратную связь» */
    .contacts-section .text-block,
    .contacts-section .thank-you-text,
    .contacts-section .theme-container,
    .contacts-section .message-container,
    .contacts-section .attach-file,
    .contacts-section .response-options,
    .contacts-section .email-container,
    .contacts-section .consent-container {
        margin-left: 0 !important;
        padding-left: 0 !important;
        padding-right: 5% !important;
        transform: none !important;
        width: 90% !important;
        max-width: 100% !important;
        margin-top: 20px;
        box-sizing: border-box;
        text-align: left;
        position: relative !important;
        left: auto !important;
        top: auto !important;
    }

    .contacts-section .text-block {
        margin-top: 24px;
        text-align: left;
        padding: 0 !important;
    }

    .contacts-section .text-block p {
        margin-top: 0;
        font-size: 16px;
        line-height: 1.4;
    }

    .contacts-section .thank-you-text {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        padding: 0 !important;
        margin-top: 20px;
        width: 90% !important;
        box-sizing: border-box;
        text-align: left;
        transform: none !important;
        position: relative !important;
        left: auto !important;
        top: auto !important;
    }

    .contacts-section .thank-you-text p {
        padding-left: 0 !important;
        transform: none !important;
        margin: 0;
    }

    .contacts-section .theme-container label,
    .contacts-section .message-container label {
        font-size: 14px;
        margin-bottom: 8px;
        display: block;
    }

    .theme-input,
    .message-input,
    .email-input {
        width: 100%;
        font-size: 14px;
        padding: 12px;
        border: none !important;
        border-radius: 4px;
        background-color: #FFFFFF !important;
    }

    .theme-input:focus,
    .message-input:focus,
    .email-input:focus {
        border: none !important;
        outline: none !important;
        background-color: #FFFFFF !important;
    }

    .message-input {
        height: 120px;
        resize: none;
    }

    .attach-file {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin: 20px 0;
    }

    .attach-file label {
        display: flex;
        align-items: center;
        gap: 8px;
        cursor: pointer;
        text-align: left;
    }

    .response-options {
        flex-direction: column;
        gap: 12px;
        margin: 20px 0;
    }

    .response-option {
        display: flex;
        align-items: left;
        gap: 8px;
    }

    .contacts-section .consent-option {
        width: 100%;
        display: flex;
        align-items: flex-start;
        gap: 8px;
        justify-content: flex-start;
    }

    .contacts-section .consent-option label {
        font-size: 12px;
        text-align: left;
    }

    .contacts-section .consent-container {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 20px;
    }

    .contacts-section .submit-button {
        width: 100%;
        max-width: 280px;
        margin-top: 12px;
    }
}

/* Горизонтальные телефоны */
@media (max-width: 768px) and (orientation: landscape) {
    /* Выравнивание текста согласия по левому краю, как поля ввода */
    .consent-option {
        justify-content: flex-start !important; /* Выравнивание по левому краю */
        width: 100% !important;
    }
    
    .consent-container {
        align-items: flex-start !important; /* Выравнивание контейнера по левому краю */
        margin-left: 0 !important;
        padding-left: 0 !important;
        padding-right: 5% !important; /* Такой же отступ справа, как у полей ввода */
        width: 90% !important; /* Такая же ширина, как у полей ввода */
    }

    .submit-button {
        width: 100%;
        max-width: 250px;
        height: 50px;
        font-size: 14px;
        margin-top: 20px;
        margin-left: 0 !important;
        margin-right: auto !important; /* Выравнивание по левому краю */
        align-self: flex-start;
    }

    .divider-line {
        width: 90%;
        margin: 25px auto;
    }

    .buttons-container {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin: 20px 5% 20px 0;
        width: 90%;
        align-items: flex-start;
    }

    .custom-button {
        width: 100%;
        max-width: 280px;
        height: 50px;
        font-size: 14px;
        margin: 0;
    }

    /* Футер */
    .site-footer {
        position: relative;
        background: #333F48;
        font-family: 'HelveticaNeueCyr Roman', Arial, sans-serif;
        color: white;
        margin-top: -30px;
    }

    .footer-inner,
    .footer-text,
    .footer-copy,
    .footer-privacy {
        font-family: 'HelveticaNeueCyr Roman', Arial, sans-serif;
    }

    /* 🔽 Адаптация попапа "Заявка принята" */
    .submit-popup {
        width: 90%;
        padding: 20px 16px;
        box-sizing: border-box;
    }

    .popup-title {
        font-size: 24px;
        line-height: 1.3;
        margin-bottom: 20px;
    }

    .popup-text {
        font-size: 14px;
        line-height: 1.4;
        margin-bottom: 20px;
    }

    .popup-email-input {
        width: 100%;
        max-width: 100%;
        font-size: 14px;
        height: 44px;
    }

    .popup-subscribe-button {
        width: 100%;
        max-width: 100%;
        font-size: 14px;
        height: 48px;
        margin-top: 10px;
    }

    .popup-consent {
        flex-direction: column;
        align-items: flex-start;
        font-size: 12px;
        gap: 8px;
        text-align: left;
    }

    .popup-email-input {
        width: 100%;
        max-width: 100%;
        font-size: 14px;
        height: 44px;
        box-sizing: border-box;
        padding: 10px 12px;
        margin: 0 auto;
    }

    .popup-consent {
        flex-direction: row; /* 🔄 расположим чекбокс и текст в ряд */
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
        font-size: 11px; /* 🔽 уменьшаем шрифт для влезания в одну строку */
        text-align: left;
        flex-wrap: nowrap;
        width: 100%;
        box-sizing: border-box;
    }

    .popup-consent label {
        flex: 1;
        font-size: 11px;
        line-height: 1.2;
    }
}

/* 📱 Очень маленькие экраны */
@media (max-width: 480px) {

    .site-footer {
        font-family: 'HelveticaNeueCyr Roman', Arial, sans-serif;
    }

    .contacts-section {
        padding-bottom: 100px;
    }

    .contacts-title {
        font-size: 24px;
    }

    .text-block p {
        font-size: 14px;
    }

    .custom-button {
        height: 45px;
        font-size: 13px;
    }

    .submit-button {
        height: 40px;
        font-size: 13px;
    }

    .consent-container {
        margin-bottom: 50px;
    }

    /* Поля ввода белые без обводки */
    .theme-input,
    .message-input,
    .email-input {
        background-color: #FFFFFF !important;
        border: none !important;
    }

    .theme-input:focus,
    .message-input:focus,
    .email-input:focus {
        border: none !important;
        outline: none !important;
        background-color: #FFFFFF !important;
    }

    /* Карта адаптивная */
    .map-container {
        width: 100% !important;
        max-width: 100vw !important;
        overflow: hidden !important;
    }

    .map-container img,
    .map-image {
        display: block !important;
        width: 105% !important; /* Еще немного уменьшаем ширину */
        height: auto !important;
        object-fit: cover !important;
        object-position: center !important; /* Центрируем картинку */
        margin-left: -2.5% !important; /* Смещаем влево, чтобы центрировать увеличенную картинку */
    }
}

@media (min-width: 1280px) and (max-width: 1536px) {
  .text-block p {
    position: relative;
    margin-top: 0 !important;     /* убираем тот -70% */
    top: -600px;                    /* поднимаем на нужное значение */
    /* или вместо top можно так: transform: translateY(-10px); */
  }
}

@media (min-width: 1280px) and (max-width: 1536px) {
    .thank-you-text,
    .theme-container,
    .message-container,
    .attach-file,
    .response-options,
    .email-container,
    .consent-container {
        position: relative;
        top: -115px;

    }
}

@media (min-width: 1280px) and (max-width: 1536px) {
    .attach-file {
        position: relative;  /* чтобы работал left */
        left: 100px;           /* сдвиг вправо на 20px */
        /* или вместо этого можно margin-left: 20px; */
    }
}

@media (min-width: 1280px) and (max-width: 1536px) {
    .alternative-fix {
        margin-top: -100px; /* уменьшаем верхний отступ */
    }
}

/* Стили для горизонтальных планшетов */
@media (min-width: 768px) and (max-width: 1366px) and (orientation: landscape) {
    .text-block {
        margin-left: 49% !important; /* Сдвигаем еще правее */
        position: absolute !important; /* Абсолютное позиционирование относительно contacts-section */
        width: 50% !important; /* Увеличиваем ширину родителя для большего пространства */
        pointer-events: none !important; /* клики проходят к форме под ним */
    }
    
    .text-block p {
        position: absolute !important;
        bottom: auto !important;
        top: 22% !important; /* Такое же значение, как у thank-you-text */
        left: -6% !important; /* Позиционирование по горизонтали */
        margin-top: 0 !important; /* Убираем отрицательный margin */
        width: 90% !important; /* Увеличиваем ширину для большего количества слов в строке */
        max-width: none !important; /* Убираем ограничение максимальной ширины */
        text-align: left !important; /* Выравнивание по левой стороне */
        white-space: normal !important; /* Нормальный перенос текста */
        word-break: normal !important; /* Нормальный перенос слов */
        z-index: 9999 !important; /* Поверх всех элементов */
        pointer-events: none !important; /* клики проходят к чекбоксам и полям формы */
        font-weight: bold !important; /* Жирный шрифт */
        font-size: 16px !important; /* Уменьшаем размер шрифта */
        transform: translateY(-600px) !important; /* Поднимаем выше на 300px - можно увеличить для большего поднятия */
    }
    
    .contacts-section {
        position: relative !important; /* Для позиционирования дочерних элементов */
    }
    
    .theme-container {
        position: relative !important;
    }
    
    .thank-you-text {
        position: absolute !important; /* Абсолютное позиционирование */
        top: 6% !important; /* Выше — над полем «Тема сообщения» */
        bottom: auto !important;
        left: 51% !important; /* Такое же горизонтальное позиционирование, как у text-block p */
        width: 39% !important; /* Чтобы справа оставалось 10% от экрана */
        max-width: 39% !important;
        box-sizing: border-box !important;
        padding-right: 0 !important;
        display: block !important; /* Убеждаемся, что элемент виден */
        visibility: visible !important; /* Убеждаемся, что элемент виден */
        opacity: 1 !important; /* Убеждаемся, что элемент виден */
        pointer-events: none !important; /* клики проходят к полям формы */
    }
    
    .thank-you-text p {
        position: relative !important; /* Относительное позиционирование внутри thank-you-text */
        left: 0 !important;
        bottom: auto !important;
        top: auto !important;
        padding-left: 0 !important; /* Убираем padding */
        width: auto !important;
        text-align: left !important; /* Выравнивание по левой стороне */

        transform: none !important; /* Убираем transform из базовых стилей */
    }
    
    /* Белый цвет для полей ввода и уменьшение ширины */
    .theme-input,
    .message-input,
    .email-input {
        background-color: #FFFFFF !important; /* Белый цвет */
        width: 80% !important; /* Уменьшаем ширину в процентах */
        max-width: 550px !important; /* Максимальная ширина */
    }
    
    /* Текст согласия - возвращаем исходное состояние */
    .consent-option {
        max-width: 250px !important; /* Ограничиваем ширину текста согласия, как было */
    }
    
    .consent-option label {
        width: auto !important;
        max-width: 100% !important;
    }
    
    /* Кнопка - сдвигаем чуть левее */
    .submit-button {
        width: 180px !important; /* Уменьшаем ширину */
        max-width: 180px !important; /* Ограничиваем максимальную ширину */
        margin-left: 0 !important; /* Сдвигаем влево */
        margin-right: 27.5% !important; /* Увеличиваем отступ справа, чтобы кнопка сдвинулась влево */
    }
    
    /* Блок "Прикрепить файл" — чуть выше, справа от поля «Текст сообщения» */
    .contacts-section .attach-file {
        margin-left: 54% !important;   /* в одну колонку с полями формы */
        padding-left: 0 !important;
        width: 39% !important;         /* 51% + 39% = 90%, справа остаётся 10% */
        max-width: 39% !important;
        box-sizing: border-box !important;
        justify-content: flex-end !important; /* текст и скрепка у правого края поля */
        transform: translateY(-472px) !important; /* чуть выше, чем было (-458px) */
    }
    
    /* Чекбоксы «Я хочу / не хочу получить ответ» — поверх других слоёв, кликабельны */
    .contacts-section .response-options,
    .contacts-section .response-option,
    .contacts-section .response-option label,
    .contacts-section .response-option .response-checkbox {
        position: relative !important;
        z-index: 10 !important;
        pointer-events: auto !important;
    }
}

/* Стили для вертикальных планшетов */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    /* Карта */
    .map-container {
        position: relative;
        margin-top: 10px;
        width: 100% !important;
        max-width: 100vw !important;
        overflow: hidden;
    }

    .map-container img,
    .map-image {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        object-fit: cover !important;
    }

    /* Секция контактов */
    .contacts-section {
        padding-bottom: 120px;
        margin-bottom: 0 !important;
        position: relative;
        z-index: 1;
    }

    /* Блок под картой */
    .alternative-fix {
        position: relative;
        margin-top: 0;
        z-index: 2;
    }

    /* Контейнер согласия */
    .consent-container {
        margin-bottom: 30px;
        flex-direction: column;
        gap: 20px;
        align-items: center;
    }

    /* Стили для формы */
    .text-block,
    .thank-you-text,
    .theme-container,
    .message-container,
    .attach-file,
    .response-options,
    .email-container,
    .consent-container {
        margin-left: 0 !important;
        padding-left: 0 !important;
        padding-right: 5% !important;
        transform: none !important;
        width: 90% !important;
        margin-top: 20px !important;
        box-sizing: border-box !important;
        text-align: left !important;
    }

    .text-block {
        margin-top: 100px !important;
        text-align: left !important;
        padding: 0 !important;
    }

    .text-block p {
        margin-top: 0 !important;
        font-size: 18px !important; /* Увеличенный шрифт для планшета */
        line-height: 1.4 !important;
    }

    .thank-you-text {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        padding: 0 !important;
        margin-top: 20px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        text-align: left !important;
        transform: none !important;
    }

    .thank-you-text p {
        padding-left: 0 !important;
        transform: none !important;
        margin: 0 !important;
        font-size: 16px !important; /* Увеличенный шрифт для планшета */
    }

    .theme-container label,
    .message-container label {
        font-size: 16px !important; /* Увеличенный шрифт для планшета */
        margin-bottom: 8px !important;
        display: block !important;
    }

    .theme-input,
    .message-input,
    .email-input {
        width: 100% !important;
        font-size: 16px !important; /* Увеличенный шрифт для планшета */
        padding: 12px !important;
        border: none !important;
        border-radius: 4px !important;
        background-color: #FFFFFF !important;
        transform: none !important; /* Убираем transform, чтобы поле не уезжало */
        position: relative !important; /* Относительное позиционирование */
        top: auto !important; /* Убираем смещение по вертикали */
        left: auto !important; /* Убираем смещение по горизонтали */
        margin-top: 0 !important; /* Убираем margin-top */
        margin-left: 0 !important; /* Убираем margin-left */
    }

    .theme-input:focus,
    .message-input:focus,
    .email-input:focus {
        border: none !important;
        outline: none !important;
        background-color: #FFFFFF !important;
        transform: none !important; /* Убираем transform при фокусе */
        position: relative !important; /* Сохраняем относительное позиционирование */
        top: auto !important; /* Убираем смещение по вертикали при фокусе */
        left: auto !important; /* Убираем смещение по горизонтали при фокусе */
        margin-top: 0 !important; /* Убираем margin-top при фокусе */
        margin-left: 0 !important; /* Убираем margin-left при фокусе */
    }

    .message-input {
        height: 120px !important;
        resize: none !important;
    }
    
    /* Убираем transform и все смещения у контейнеров полей ввода */
    .theme-container,
    .message-container,
    .email-container {
        transform: none !important;
        position: relative !important;
        top: auto !important; /* Убираем смещение по вертикали */
        left: auto !important; /* Убираем смещение по горизонтали */
        margin-top: 20px !important; /* Оставляем только стандартный margin-top */
        margin-left: 0 !important; /* Убираем margin-left */
        padding-left: 0 !important; /* Убираем padding-left */
    }
    
    /* Дополнительная защита от смещения при любых состояниях */
    .theme-container:focus-within,
    .message-container:focus-within,
    .email-container:focus-within {
        transform: none !important;
        position: relative !important;
        top: auto !important;
        left: auto !important;
    }

    .attach-file {
        display: flex !important;
        justify-content: flex-start !important;
        align-items: center !important;
        margin: 20px 0 !important;
    }

    .attach-file label {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        cursor: pointer !important;
        text-align: left !important;
        font-size: 16px !important; /* Увеличенный шрифт для планшета */
    }

    .response-options {
        flex-direction: column !important;
        gap: 12px !important;
        margin: 20px 0 !important;
    }

    .response-option {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
    }

    .response-option label {
        font-size: 16px !important; /* Увеличенный шрифт для планшета */
    }

    .consent-option {
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        justify-content: flex-start !important; /* Выравнивание по левому краю, как у полей ввода */
    }

    .consent-option label {
        font-size: 14px !important; /* Увеличенный шрифт для планшета */
        text-align: left !important;
    }
    
    .consent-container {
        align-items: flex-start !important; /* Выравнивание контейнера по левому краю */
    }

    .submit-button {
        width: 100% !important;
        max-width: 250px !important;
        height: 50px !important;
        font-size: 16px !important; /* Увеличенный шрифт для планшета */
        margin-top: 20px !important;
        margin-left: 0 !important;
        align-self: flex-start !important;
    }

    /* Футер */
    .site-footer {
        padding: 10px 0 !important; /* Уменьшаем внутренние отступы */
        min-height: auto !important;
        height: auto !important;
    }

    .footer-inner {
        padding: 5px 0 !important; /* Уменьшаем внутренние отступы контейнера */
    }

    .footer-text p {
        font-size: 12px !important; /* Уменьшаем размер шрифта */
        line-height: 1.3 !important; /* Уменьшаем межстрочный интервал */
        margin: 0 !important;
    }

    .footer-icons img {
        width: 25px !important; /* Уменьшаем размер иконок */
        height: auto !important;
    }

    .footer-inner .logo img {
        max-width: 60% !important; /* Уменьшаем размер логотипа */
        height: auto !important;
    }
}

.social-icons {
  position: relative;
  z-index: 10;  /* выше всего, что может мешать */
}

.social-icons a,
.social-icons img {
  pointer-events: auto; /* на всякий случай */
}

.close-popup,
.close-submit-popup {
    transition: transform 0.2s ease-in-out;
    will-change: transform;
    backface-visibility: hidden;
    transform: translateZ(0); /* создаём отдельный слой */
}

.close-popup:hover,
.close-submit-popup:hover {
    transform: rotate(30deg) scale(1.2) translateZ(0);
}