/**
 * Попап «ТОП-10 горячих предложений» на главной. Заменил всплывашку Marquiz.
 * Макеты Figma: ru — node 4888:144905 (860x571, картинка 404px),
 * en — node 4868:141757 (813x504, картинка 357px). Общее: колонка 368px,
 * gap 44, padding-right 44, radius 24; высоту задаёт контент.
 * Внутри — Bitrix-компонент form.result.new/contact.manager, поэтому ниже
 * переопределяются его классы (.fs11_r_gr_inp, .contact_us_fl_r_sub и т.д.).
 */

/* ════════════ Оверлей и коробка ════════════ */
.top10-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 99999;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.top10-modal-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Высота — по содержимому (в макете это ровно 571px), а не фиксированная:
   форма должна помещаться целиком, чтобы до кнопки не приходилось листать.
   max-height + overflow — только страховка для очень низких экранов. */
.top10-modal {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 44px;
    padding-right: 44px;
    max-width: 95vw;
    max-height: 90vh;
    overflow-y: auto;
    background: #fff;
    border-radius: 24px;
    box-sizing: border-box;
    transform: translateY(-20px) scale(0.95);
    transition: transform 0.3s ease;
    scrollbar-width: thin;
    scrollbar-color: #DFDFDF transparent;
}

.top10-modal::-webkit-scrollbar { width: 6px; }
.top10-modal::-webkit-scrollbar-track { background: transparent; }
.top10-modal::-webkit-scrollbar-thumb { background: #DFDFDF; border-radius: 3px; }

.top10-modal-overlay.active .top10-modal { transform: translateY(0) scale(1); }

/* Картинка слева. Подпись на ней вшита в макете, поэтому файл свой на язык
   (ru 404x571, en 357x504) — пропорции одинаковые. Ширину считаем от высоты
   коробки: на ru-макете получается 404px (860 всего), на en — 357px (813). */
.top10-modal__media {
    align-self: stretch;
    overflow: hidden;
    border-radius: 24px 0 0 24px;
}

.top10-modal__media--ru { flex: 0 0 404px; } /* макет 860 = 404 + 44 + 368 + 44 */
.top10-modal__media--en { flex: 0 0 357px; } /* макет 813 = 357 + 44 + 368 + 44 */

/* Кадрируем от левого нижнего угла: подпись на фото вшита именно там, и при
   любом расхождении высоты коробки с макетом она остаётся видимой целиком. */
.top10-modal__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left bottom;
}

.top10-modal__close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.6);
    color: #28ABD8;
    cursor: pointer;
    transition: background 0.2s ease;
    z-index: 2;
}

.top10-modal__close:hover { background: #F4F4F4; }
.top10-modal__close svg { display: block; width: 24px; height: 24px; }

/* ════════════ Правая колонка ════════════ */
/* Своего скролла у колонки нет: форма всегда видна целиком, высоту задаёт она. */
.top10-modal__content {
    flex: 1 1 368px;
    max-width: 368px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    padding: 34px 0;
    box-sizing: border-box;
}

.top10-modal__title {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.48px;
    color: #28ABD8;
    word-break: break-word;
}

.top10-modal__lead,
.top10-modal__desc {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.3;
    color: #4B4B4B;
}

/* ════════════ Форма contact.manager внутри попапа ════════════ */
/* Свои заголовок и описание компонента прячем — в попапе текст из макета. */
.top10-modal .contact_us_fl_r_title,
.top10-modal .contact_us_fl_r_desc { display: none; }

/* В шаблоне порядок: поля → кнопка → чекбокс. В макете чекбокс перед кнопкой. */
.top10-modal form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
}

.top10-modal form .fs11_r_gr {
    order: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.top10-modal form .contact_us_fl_r_privac {
    order: 2;
    margin-top: 12px; /* +12 из gap = 24 по макету */
}

.top10-modal form .contact_us_fl_r_sub { order: 3; }

.top10-modal .fs11_r_gr_inp input {
    width: 100%;
    height: 48px;
    padding: 14px 22px;
    border: 1px solid #F4F4F4;
    border-radius: 40px;
    background: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.3;
    color: #1E1E1E;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s ease;
}

.top10-modal .fs11_r_gr_inp input:focus { border-color: #28ABD8; }
.top10-modal .fs11_r_gr_inp input::placeholder { color: #949494; }

/* В макете попапа три поля: имя, e-mail, телефон. Веб-форма отдаёт ещё
   необязательное «Message» — в попапе его прячем, иначе коробка выше макета
   на ~110px и кадрирование съедает подпись на фотографии.
   Первое правило — фолбэк для браузеров без :has(). */
.top10-modal .fs11_r_gr textarea { display: none !important; }
.top10-modal .fs11_r_gr_inp:has(textarea) { display: none; }

/* Невидимая reCAPTCHA: сам блок нужен для работы, но место занимать не должен. */
.top10-modal .fs11_r_gr_captcha { margin-top: 0; gap: 0; }

.top10-modal .fs11_r_gr_inp_area textarea {
    width: 100%;
    height: 96px !important;
    padding: 14px 22px;
    border: 1px solid #F4F4F4;
    border-radius: 24px;
    background: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    line-height: 1.3;
    color: #1E1E1E;
    outline: none;
    box-sizing: border-box;
}

.top10-modal .fs11_r_gr_inp_area textarea::placeholder { color: #949494; }

/* Телефон: intl-tel-input рисует флаг + код страны слева (см. contact.manager). */
.top10-modal .fs11_r_gr_inp .iti__country-list { z-index: 10000; }

/* Чекбокс согласия */
.top10-modal .contact_us_fl_r_privac label {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0;
    cursor: pointer;
}

.top10-modal .contact_us_fl_r_privac label input[type="checkbox"] {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    margin: 0;
    border: 1px solid #DFDFDF;
    border-radius: 2px;
    accent-color: #28ABD8;
    cursor: pointer;
}

.top10-modal .contact_us_fl_r_privac .txt_pr {
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 300;
    line-height: 1.3;
    color: #1E1E1E;
}

.top10-modal .contact_us_fl_r_privac .txt_pr a {
    color: #1E1E1E;
    text-decoration: underline;
}

.top10-modal .contact_us_fl_r_privac .txt_pr a:hover { color: #28ABD8; }

/* Кнопка отправки */
.top10-modal .contact_us_fl_r_sub input[type="submit"] {
    width: 100%;
    height: 38px;
    padding: 8px 12px;
    border: none;
    border-radius: 99px;
    background: #28ABD8;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    color: #fff;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.2s ease;
}

.top10-modal .contact_us_fl_r_sub input[type="submit"]:hover { background: #2196c7; }

/* Результат отправки: плашки успеха/ошибки рисует сам contact.manager. */
.top10-modal .cm_form_inline_success {
    padding: 24px 20px;
    border-radius: 16px;
}

.top10-modal .cm_form_inline_success h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #1E1E1E;
}

.top10-modal .cm_form_inline_success p {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    color: #4B4B4B;
}

.top10-modal .cm_form_inline_error {
    font-family: 'Montserrat', sans-serif;
    margin: 0;
}

/* ════════════ Адаптив ════════════ */
/* Картинка декоративная — на узких экранах прячем и отдаём всю ширину форме. */
@media (max-width: 900px) {
    .top10-modal {
        gap: 0;
        padding: 34px 24px;
        width: 100%;
        max-width: 460px;
        max-height: 92vh;
    }

    .top10-modal__media { display: none; }

    .top10-modal__content {
        flex: 1 1 auto;
        max-width: none;
        width: 100%;
        padding: 0;
    }
}

@media (max-width: 480px) {
    .top10-modal-overlay { padding: 10px; align-items: flex-start; }
    .top10-modal { padding: 34px 16px 24px; max-height: 96vh; }
    .top10-modal__title { font-size: 20px; }
}

/* Низкие экраны (ноутбуки 768px и меньше по высоте): поджимаем отступы и
   заголовок, чтобы кнопка отправки оставалась видна без прокрутки. */
@media (max-height: 700px) {
    .top10-modal-overlay { padding: 10px; }
    .top10-modal { max-height: 96vh; }

    .top10-modal__content {
        gap: 10px;
        padding: 24px 0;
    }

    .top10-modal__title { font-size: 20px; }

    .top10-modal form { gap: 10px; }
    .top10-modal form .contact_us_fl_r_privac { margin-top: 8px; }
    .top10-modal .fs11_r_gr_inp input { height: 44px; padding: 12px 22px; }
}

@media (max-width: 900px) and (max-height: 700px) {
    .top10-modal { padding: 24px; }
    .top10-modal__content { padding: 0; }
}