/* Contacts Page Styles */

/* Используем те же базовые стили что и catalog */
.contacts-main-section {
    background-color: #fff;
    border-radius: 20px;
    padding: 0 clamp(20px, calc(20px + (100 - 20) * ((100vw - 991px) / (1920 - 991))), 100px);
    /* Специальные отступы сверху для контактов: 73px/137px/175px */
    padding-top: clamp(73px, calc(73px + (137 - 73) * ((100vw - 576px) / (991 - 576))), 137px);
    padding-bottom: clamp(20px, calc(20px + (40 - 20) * ((100vw - 991px) / (1920 - 991))), 40px);
}

/* Десктопный отступ 175px */
@media (min-width: 992px) {
    .contacts-main-section {
        padding-top: 175px;
    }
}

.contacts-content {
    padding: 0;
}

/* Заголовок страницы контактов */
.contacts-page-title {
    font-family: "Vetrino", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: clamp(40px, calc(40px + (90 - 40) * ((100vw - 576px) / (1920 - 576))), 90px);
    leading-trim: CAP_HEIGHT;
    line-height: 88%;
    letter-spacing: 0%;
    text-transform: uppercase;
    color: #353331;
    margin: 0 0 clamp(40px, calc(40px + (60 - 40) * ((100vw - 991px) / (1920 - 991))), 60px) 0;
    text-align: left;
}

.contacts-blocks {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.contacts-block {
    flex: 1;
}

.contacts-block-right {
    background-image: url('../images/Gradient.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 10px;
    padding: clamp(30px, calc(30px + (50 - 30) * ((100vw - 991px) / (1920 - 991))), 50px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    height: -webkit-fill-available;
}

.contacts-block-left {
    background-color: #F5F5F5;
    background-image: url('../images/ContLeft.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 10px;
    border: 1px solid #9C9B9A4D;
    padding: clamp(30px, calc(30px + (50 - 30) * ((100vw - 991px) / (1920 - 991))), 50px);
    height: -webkit-fill-available;
}

/* Стили для Яндекс.Карт */
.yandex-map-container {
    width: 100%;
    height: clamp(221px, calc(221px + (732 - 221) * ((100vw - 576px) / (1920 - 576))), 732px);
    border-radius: 10px;
    overflow: hidden;
}

.yandex-map, #map {
    width: 100%;
    height: 100%;
}

.contacts-block-left {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 25px; /* Минимальный промежуток между блоками */
}

/* Блоки внутри левого блока */
.contacts-info-block {
    flex: 0 0 auto;
}

.contacts-form-block {
    flex: 0 0 auto;
    max-width: 650px;
}

/* Стили для формы в правом столбце */
.contacts-block-right .contacts-form-block {
    max-width: 100%;
}

/* Убираем старый заголовок из блока контактов */
.contacts-info-block .catalog-title {
    display: none;
}

/* Заголовок в блоке контактной информации */
.contacts-info-title {
    font-family: "Commissioner", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: clamp(32px, calc(32px + (44 - 32) * ((100vw - 576px) / (1920 - 576))), 44px);
    leading-trim: NONE;
    line-height: 80%;
    letter-spacing: -3%;
    color: #353331;
    margin: 0;
    text-align: left;
}

/* Подзаголовок "Контакты в ОАЭ" */
.contacts-subtitle-uae {
    font-family: "Commissioner", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: clamp(22px, calc(22px + (34 - 22) * ((100vw - 576px) / (1920 - 576))), 34px);
    leading-trim: CAP_HEIGHT;
    line-height: 100%;
    letter-spacing: -4%;
    color: #353331;
    margin: 60px 0 0 0;
    text-align: left;
}

/* Контактная информация ОАЭ */
.contacts-uae-info {
    margin-top: clamp(20px, calc(20px + (30 - 20) * ((100vw - 991px) / (1920 - 991))), 30px);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(20px, calc(20px + (25 - 20) * ((100vw - 991px) / (1920 - 991))), 25px) clamp(15px, calc(15px + (25 - 15) * ((100vw - 991px) / (1920 - 991))), 25px);
}

.contact-uae-item {
    display: flex;
    flex-direction: column;
    gap: clamp(8px, calc(8px + (12 - 8) * ((100vw - 991px) / (1920 - 991))), 12px);
}

/* Лейблы контактов ОАЭ */
.contact-uae-label {
    font-family: "Commissioner", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: clamp(16px, calc(16px + (18 - 16) * ((100vw - 991px) / (1920 - 991))), 18px);
    leading-trim: CAP_HEIGHT;
    line-height: 100%;
    letter-spacing: -4%;
    color: #353331;
}

/* Значения контактов ОАЭ */
.contact-uae-value {
    display: flex;
    align-items: center;
    gap: 8px;
}

.contact-uae-link {
    font-family: "Commissioner", sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: clamp(18px, calc(18px + (22 - 18) * ((100vw - 991px) / (1920 - 991))), 22px);
    leading-trim: CAP_HEIGHT;
    line-height: 100%;
    letter-spacing: -4%;
    color: #353331;
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.contact-uae-link:hover {
    opacity: 0.7;
}

.contacts-subtitle {
    font-family: "Commissioner", sans-serif;
    font-weight: 600;
    font-size: clamp(24px, calc(24px + (32 - 24) * ((100vw - 991px) / (1920 - 991))), 32px);
    line-height: 100%;
    letter-spacing: -3%;
    color: #353331;
    margin: 0 0 clamp(20px, calc(20px + (30 - 20) * ((100vw - 991px) / (1920 - 991))), 30px) 0;
}

/* Специальные стили для заголовка формы */
.contacts-subtitle-form {
    font-family: "Commissioner", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: clamp(32px, calc(32px + (44 - 32) * ((100vw - 576px) / (1920 - 576))), 44px);
    leading-trim: NONE;
    line-height: 80%;
    letter-spacing: -3%;
    color: #353331;
}

/* Заголовок формы в правом столбце на фоне градиента */
.contacts-block-right .contacts-subtitle-form {
    color: #FFFFFF;
}

/* Стили для формы в правом столбце на фоне градиента */
.contacts-block-right .contact-form-component {
    background-color: transparent;
    padding: 0;
}

/* Стили для инпутов в форме на фоне градиента */
.contacts-block-right .contact-form-input {
    border: 1px solid #35333133;
    background-color: #FFFFFF1A;
    backdrop-filter: blur(10px);
    color: #FFFFFF;
}

.contacts-block-right .contact-form-input::placeholder {
    color: #FFFFFFB3;
}

.contacts-block-right .contact-form-input:focus {
    border-color: #FFFFFF;
    outline: none;
}

/* Стили для чекбокса в форме на фоне градиента */
.contacts-block-right .contact-form-checkbox {
    border-color: #FFFFFF;
    background-color: #FFFFFF1A;
    backdrop-filter: blur(10px);
}

.contacts-block-right .contact-form-checkbox:checked {
    background-color: #FFFFFF;
    border-color: #FFFFFF;
}

.contacts-block-right .contact-form-checkbox:checked::after {
    color: #353331;
}

/* Стили для лейбла чекбокса в форме на фоне градиента */
.contacts-block-right .contact-form-checkbox-label {
    color: #FFFFFF;
}

.contacts-block-right .contact-form-checkbox-label .contact-form-underline-text {
    color: #FFFFFF;
}

/* Стили для кнопки в форме на фоне градиента */
.contacts-block-right .contact-form-submit-btn {
    background-color: #FFFFFF;
    color: #353331;
}

.contacts-block-right .contact-form-submit-btn:hover {
    background-color: #F5F5F5;
}

.contacts-block-right .contact-form-submit-btn .contact-form-btn-icon-wrap {
    background-color: #353331;
}




/* Сетка контактов */
.contacts-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(20px, calc(20px + (25 - 20) * ((100vw - 991px) / (1920 - 991))), 25px) clamp(15px, calc(15px + (25 - 15) * ((100vw - 991px) / (1920 - 991))), 25px);
    margin-top: 30px;
}

.contact-grid-item {
    display: flex;
    flex-direction: column;
    gap: clamp(8px, calc(8px + (12 - 8) * ((100vw - 991px) / (1920 - 991))), 12px);
}

/* Лейблы контактов */
.contact-grid-label {
    font-family: "Commissioner", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: clamp(16px, calc(16px + (18 - 16) * ((100vw - 991px) / (1920 - 991))), 18px);
    leading-trim: CAP_HEIGHT;
    line-height: 100%;
    letter-spacing: -4%;
    color: #353331;
}

/* Значения контактов */
.contact-grid-value {
    display: flex;
    align-items: center;
    gap: 8px;
}

.contact-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.contact-grid-link,
.contact-grid-text {
    font-family: "Commissioner", sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: clamp(18px, calc(18px + (22 - 18) * ((100vw - 991px) / (1920 - 991))), 22px);
    leading-trim: CAP_HEIGHT;
    line-height: 100%;
    letter-spacing: -4%;
    color: #353331;
}

.contact-grid-link {
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.contact-grid-link:hover {
    opacity: 0.7;
}

/* Форма теперь в отдельном компоненте contact-form.css */

/* Отдельный адрес для планшета */
.contact-address-separate {
    display: none; /* Скрыт по умолчанию */
    flex-direction: column;
    gap: clamp(8px, calc(8px + (12 - 8) * ((100vw - 991px) / (1920 - 991))), 12px);
    margin-top: clamp(20px, calc(20px + (30 - 20) * ((100vw - 576px) / (991 - 576))), 30px);
}

/* Форма для мобайла/планшета */
.contacts-form-mobile {
    display: none; /* Скрыта по умолчанию */
    margin-top: clamp(30px, calc(30px + (40 - 30) * ((100vw - 576px) / (991 - 576))), 40px);
}

/* Адаптивность - планшет и мобильные */
@media (max-width: 991px) {
    .contacts-blocks {
        flex-direction: column;
        gap: clamp(30px, calc(30px + (40 - 30) * ((100vw - 576px) / (991 - 576))), 40px);
    }
    
    .contacts-block-left {
        min-height: auto;
        gap: clamp(40px, calc(40px + (60 - 40) * ((100vw - 576px) / (991 - 576))), 60px);
        width: 100%; /* На всю ширину на планшете */
    }
    
    /* Инфоблок на всю ширину на планшете */
    .contacts-info-block {
        width: 100%;
    }
    
    /* Скрываем адрес в гриде на планшете */
    .contact-grid-item-address {
        display: none;
    }
    
    /* Показываем отдельный адрес на планшете */
    .contact-address-separate {
        display: flex;
        margin-top: 47px;
    }
    
    /* Скрываем десктопную форму на планшете */
    .contacts-form-desktop {
        display: none;
    }
    
    /* Показываем мобильную форму на планшете */
    .contacts-form-mobile {
        display: block;
        background-image: url('../images/Gradient.webp');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        border-radius: 10px;
        padding: 30px;
        margin-top: 30px;
    }
    
    /* Стили для заголовка формы на планшете */
    .contacts-form-mobile .contacts-subtitle-form {
        color: #FFFFFF;
    }
    
    /* Стили для формы на планшете */
    .contacts-form-mobile .contact-form-component {
        background-color: transparent;
        padding: 0;
    }
    
    /* Стили для инпутов в форме на планшете */
    .contacts-form-mobile .contact-form-input {
        border: 1px solid #35333133;
        background-color: #FFFFFF1A;
        backdrop-filter: blur(10px);
        color: #FFFFFF;
    }
    
    .contacts-form-mobile .contact-form-input::placeholder {
        color: #FFFFFFB3;
    }
    
    .contacts-form-mobile .contact-form-input:focus {
        border-color: #FFFFFF;
        outline: none;
    }
    
    /* Стили для чекбокса в форме на планшете */
    .contacts-form-mobile .contact-form-checkbox {
        border-color: #FFFFFF;
        background-color: #FFFFFF1A;
        backdrop-filter: blur(10px);
    }
    
    .contacts-form-mobile .contact-form-checkbox:checked {
        background-color: #FFFFFF;
        border-color: #FFFFFF;
    }
    
    .contacts-form-mobile .contact-form-checkbox:checked::after {
        color: #353331;
    }
    
    /* Стили для лейбла чекбокса в форме на планшете */
    .contacts-form-mobile .contact-form-checkbox-label {
        color: #FFFFFF;
    }
    
    .contacts-form-mobile .contact-form-checkbox-label .contact-form-underline-text {
        color: #FFFFFF;
    }
    
    /* Стили для кнопки в форме на планшете */
    .contacts-form-mobile .contact-form-submit-btn {
        background-color: #FFFFFF;
        color: #353331;
    }
    
    .contacts-form-mobile .contact-form-submit-btn:hover {
        background-color: #F5F5F5;
    }
    
    .contacts-form-mobile .contact-form-submit-btn .contact-form-btn-icon-wrap {
        background-color: #353331;
    }
    
    /* Скрываем правый блок на планшете */
    .contacts-block-right {
        display: none;
    }
    
    /* Карта на планшете */
    .yandex-map-container {
        height: 477px;
        width: 100%;
    }
    
    .contacts-block-right {
        width: 100%; /* На всю ширину на планшете */
        padding: 30px;
    }
    
    .contacts-block-left {
        padding: 30px;
    }
    
    /* Планшетные стили для гридов */
    .contacts-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 столбца на планшете */
    }
    
    .contacts-uae-info {
        grid-template-columns: repeat(2, 1fr); /* 2 столбца на планшете для ОАЭ */
    }

}

@media (max-width: 575px) {
    .contacts-content {
        padding-top: 0; /* Убираем верхний паддинг на мобайле */
    }
    
    /* Мобильные стили для заголовка страницы */
    .contacts-page-title {
        font-size: 40px;
        margin-bottom: 30px;
    }
    
    /* Мобильные стили для подзаголовка "Контакты в ОАЭ" */
    .contacts-subtitle-uae {
        font-weight: 500;
        font-style: normal;
        font-size: 22px;
        margin-top: 40px;
    }
    .contacts-blocks {
        gap: 25px; /* Мобильный gap между блоками */
    }
    .contacts-block-left {
        gap: 40px; /* Мобильный gap между info и form блоками */
        width: 100%; /* На всю ширину на мобайле */
    }
    
    /* Инфоблок на всю ширину на мобайле */
    .contacts-info-block {
        width: 100%;
    }
    /* Мобильные стили для заголовка формы */
    .contacts-subtitle-form {
        font-size: 32px; /* Мобильный размер */
    }
    .contacts-grid {
        margin-top: 40px; /* Мобильный отступ от заголовка */
        gap: 20px 15px;
        grid-template-columns: 1fr; /* Один столбик на мобайле */
    }
    
    .contacts-uae-info {
        grid-template-columns: 1fr; /* Один столбик на мобайле */
        gap: 20px 15px;
    }
    /* Мобильные размеры шрифтов для лейблов */
    .contact-grid-label {
        font-size: 16px;
    }
    /* Мобильные размеры шрифтов для значений */
    .contact-grid-link,
    .contact-grid-text {
        font-size: 18px;
    }
    /* Скрываем отдельный адрес на мобайле, показываем в гриде */
    .contact-address-separate {
        display: none;
        margin-top: 50px; /* Если будет показан */
    }
    .contact-grid-item-address {
        display: flex;
    }
    /* Скрываем десктопную форму на мобайле */
    .contacts-form-desktop {
        display: none;
    }
    /* Показываем мобильную форму на мобайле */
    .contacts-form-mobile {
        display: block;
        background-image: url('../images/Gradient.webp');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        border-radius: 10px;
        padding: 20px;
        margin-top: 25px;
    }
    
    /* Стили для заголовка мобильной формы */
    .contacts-form-mobile .contacts-subtitle-form {
        color: #FFFFFF;
    }
    
    /* Стили для мобильной формы */
    .contacts-form-mobile .contact-form-component {
        background-color: transparent;
        padding: 0;
    }
    
    /* Стили для инпутов в мобильной форме */
    .contacts-form-mobile .contact-form-input {
        border: 1px solid #35333133;
        background-color: #FFFFFF1A;
        backdrop-filter: blur(10px);
        color: #FFFFFF;
    }
    
    .contacts-form-mobile .contact-form-input::placeholder {
        color: #FFFFFFB3;
    }
    
    .contacts-form-mobile .contact-form-input:focus {
        border-color: #FFFFFF;
        outline: none;
    }
    
    /* Стили для чекбокса в мобильной форме */
    .contacts-form-mobile .contact-form-checkbox {
        border-color: #FFFFFF;
        background-color: #FFFFFF1A;
        backdrop-filter: blur(10px);
    }
    
    .contacts-form-mobile .contact-form-checkbox:checked {
        background-color: #FFFFFF;
        border-color: #FFFFFF;
    }
    
    .contacts-form-mobile .contact-form-checkbox:checked::after {
        color: #353331;
    }
    
    /* Стили для лейбла чекбокса в мобильной форме */
    .contacts-form-mobile .contact-form-checkbox-label {
        color: #FFFFFF;
    }
    
    .contacts-form-mobile .contact-form-checkbox-label .contact-form-underline-text {
        color: #FFFFFF;
    }
    
    /* Стили для кнопки в мобильной форме */
    .contacts-form-mobile .contact-form-submit-btn {
        background-color: #FFFFFF;
        color: #353331;
    }
    
    .contacts-form-mobile .contact-form-submit-btn:hover {
        background-color: #F5F5F5;
    }
    
    .contacts-form-mobile .contact-form-submit-btn .contact-form-btn-icon-wrap {
        background-color: #353331;
    }
    /* Карта на мобайле */
    .yandex-map-container {
        height: 221px;
        width: 100%;
    }
    
    .contacts-block-right {
        display: none; /* Скрываем правый блок на мобилке */
    }
    
    .contacts-block-left {
        padding: 20px;
    }
}