/*
 * Анкета перед приёмом (kink.su/anketa).
 *
 * Файл подключается ТОЛЬКО со страницы анкеты (см. anketa/index.php). В
 * /local/templates/main/css/ его класть нельзя: оттуда app.php грузит все
 * стили на каждую страницу сайта.
 *
 * Цвета берём переменными сайта (--color__*, объявлены в css/atoms.css), чтобы
 * анкета жила в общей палитре и переключалась вместе с версией для слабовидящих.
 */

.anketa {
    max-width: 46rem;
    margin: 0 auto;
    padding: 2rem 0 6rem;
    /* Запас сверху при прокрутке к новому вопросу: без него анкета прилипала к
       самому краю окна и линию прогресса срезало. */
    scroll-margin-top: 1.5rem;
}

.anketa__ekran {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.anketa__zagolovok {
    margin: 0;
}

.anketa__lid {
    margin: 0;
    max-width: 38rem;
    font-size: 1.0625rem;
    line-height: 1.6;
}

/* Первый экран читают дольше всех и часто с телефона в руках у пожилого
   человека - там текст крупнее обычного. */
.anketa__lid.--krupno {
    font-size: 1.25rem;
    line-height: 1.55;
}

/* ------------------------------------------------------------- прогресс */

/*
 * 🔴 01.09.2026, третий заход. Прогресс был объявлен закреплённым (sticky), но
 * на боевой странице не прилипал: у сайта тег <main> имеет overflow: hidden, а
 * это ОТКЛЮЧАЕТ прилипание у всего, что внутри. На отдельной пробной странице
 * такого предка не было - там всё работало, и поломка не воспроизводилась.
 *
 * Возвращаем прокрутку внутри <main> только на этой странице: файл подключается
 * лишь со страницы анкеты, так что остальному сайту правило не достанется.
 * Горизонтального выезда здесь быть не может - анкета узкая, шире экрана в ней
 * ничего нет.
 */
main {
    overflow: visible;
}

/*
 * Прогресс закреплён вверху экрана.
 *
 * Андрей писал об этом трижды: «сдвигает экран - не видно индикатора». Сначала
 * чинил прокрутку, потом сделал полосу липкой, и лишь на копии боевой страницы
 * стало видно, что липкость гасит чужой overflow.
 */
.anketa__progress {
    position: sticky;
    /* Не к нулю, а под шапку сайта: при прокрутке она закрепляется сверху и
       накрывала полосу. Высоту измеряет скрипт и кладёт в переменную -
       на телефоне и на большом экране меню разное. */
    top: var(--anketa-shapka, 0px);
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    /* Поля с отрицательным отступом: полоса тянется во всю ширину анкеты, а
       фон закрывает уезжающий под неё текст. */
    margin: 0 -1rem;
    padding: .875rem 1rem;
    background: var(--color__white, #fff);
    box-shadow: 0 6px 12px -8px rgba(0, 18, 32, .25);
}

.anketa__progress-polosa {
    height: .625rem;
    border-radius: .3125rem;
    background: var(--color__gray-3, #E7EAF1);
    overflow: hidden;
}

.anketa__progress-zapolnenie {
    height: 100%;
    border-radius: .3125rem;
    background: linear-gradient(90deg, var(--color__fill-1, #3c7b8f), var(--color__fill-2, #0897B4));
    transition: width .3s ease;
}

.anketa__progress-podpis {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    font-size: 1rem;
}

/* Название блока - то, о чём сейчас спрашивают. Читается первым. */
.anketa__progress-blok {
    font-weight: 600;
    color: var(--color__text-1, #001220);
}

/* Счётчик внутри блока - спокойнее, он второстепенный. */
.anketa__progress-schyot {
    flex: 0 0 auto;
    font-size: .9375rem;
    color: var(--color__text-2, #223E4E);
}

/* -------------------------------------------------------------- вопросы */

.anketa__vopros {
    margin: 0;
}

.anketa__podskazka {
    color: var(--color__text-2, #223E4E);
    font-size: .9375rem;
    line-height: 1.5;
    max-width: 38rem;
}

.anketa__pole {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

/* «Выберите один вариант» / «Можно выбрать несколько»: по виду кружка и галочки
   это понимает не каждый, поэтому написано словами. */
.anketa__kak-vybirat {
    margin-bottom: -.5rem;
    font-size: .875rem;
    color: var(--color__text-2, #223E4E);
}

.anketa__podpis-polya {
    font-weight: 600;
}

.anketa__vvod {
    width: 100%;
    padding: .875rem 1rem;
    font: inherit;
    font-size: 1.0625rem;
    color: var(--color__text-1, #001220);
    background: var(--color__white, #fff);
    border: 1px solid var(--color__border, #EAEAEA);
    border-radius: .5rem;
    resize: vertical;
}

.anketa__vvod:focus {
    outline: none;
    border-color: var(--color__fill-1, #3c7b8f);
    box-shadow: 0 0 0 3px rgba(60, 123, 143, .18);
}

/* ------------------------------------------------------------- варианты */

.anketa__varianty {
    display: flex;
    flex-direction: column;
    gap: .625rem;
}

/*
 * Настоящие radio и checkbox, а не «кнопки» из div: так вариант выбирается с
 * клавиатуры и правильно читается голосовыми программами. Прятать их совсем
 * нельзя - на них держится фокус, поэтому только уменьшаем.
 */
.anketa__variant {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    /* Крупная область нажатия: анкету заполняют пожилые люди с телефона. */
    min-height: 3.25rem;
    padding: .875rem 1rem;
    background: var(--color__white, #fff);
    border: 1px solid var(--color__border, #EAEAEA);
    border-radius: .5rem;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}

.anketa__variant:hover {
    border-color: var(--color__fill-1, #3c7b8f);
    background: var(--color__gray-1, #effafc);
}

.anketa__variant:has(.anketa__variant-vybor:checked) {
    border-color: var(--color__fill-1, #3c7b8f);
    background: var(--color__gray-1, #effafc);
    box-shadow: inset 0 0 0 1px var(--color__fill-1, #3c7b8f);
}

.anketa__variant:focus-within {
    box-shadow: 0 0 0 3px rgba(60, 123, 143, .18);
}

.anketa__variant-vybor {
    flex: 0 0 auto;
    width: 1.25rem;
    height: 1.25rem;
    margin: .125rem 0 0;
    accent-color: var(--color__fill-1, #3c7b8f);
}

.anketa__variant-tekst {
    font-size: 1.0625rem;
    line-height: 1.4;
}

.anketa__varianty.--uzkie .anketa__variant {
    min-height: 2.75rem;
    padding: .625rem 1rem;
}

.anketa__svoy-otvet {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin-top: .25rem;
}

.anketa__svoy-otvet-podpis {
    font-size: .9375rem;
    color: var(--color__text-2, #223E4E);
}

/* --------------------------------------------------- телефон и страна */

/*
 * intlTelInput оборачивает поле в свой контейнер. По умолчанию он ужимается по
 * содержимому - растягиваем на всю ширину, иначе поле телефона окажется вдвое
 * уже остальных и форма поедет.
 */
.anketa__pole .iti {
    width: 100%;
}

.anketa__pole .iti__flag-container {
    border-right: 1px solid var(--color__border, #EAEAEA);
}

/* Выпадающий список стран должен быть виден целиком и не тонуть под шапкой. */
.anketa__pole .iti__country-list {
    max-height: 15rem;
    z-index: 5;
}

/* --------------------------------------------------- экран контактов */

/*
 * Телефон и почта - пара, их удобно заполнять рядом. На узком экране всё
 * встаёт в столбик само: сетка с auto-fit, без отдельного условия.
 */
.anketa__ekran.--kontakty .anketa__pole {
    max-width: 30rem;
}

@media (min-width: 48rem) {
    .anketa__kontakty-para {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
        max-width: 44rem;
    }

    .anketa__kontakty-para .anketa__pole {
        max-width: none;
    }
}

/* ------------------------------------------------------------- согласие */

.anketa__soglasie {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .5rem 0;
    cursor: pointer;
}

.anketa__soglasie-galochka {
    flex: 0 0 auto;
    width: 1.25rem;
    height: 1.25rem;
    margin: .125rem 0 0;
    accent-color: var(--color__fill-1, #3c7b8f);
}

.anketa__soglasie-tekst {
    font-size: .9375rem;
    line-height: 1.5;
    color: var(--color__text-2, #223E4E);
}

/* -------------------------------------------------------------- кнопки */

.anketa__knopki {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin-top: .5rem;
}

.anketa__knopka {
    min-height: 3.25rem;
    padding: 0 2rem;
    font: inherit;
    font-size: 1.0625rem;
    border-radius: .5rem;
    border: 1px solid transparent;
    cursor: pointer;
}

.anketa__knopka.--glavnaya {
    color: var(--color__white, #fff);
    background: var(--color__fill-1, #3c7b8f);
}

.anketa__knopka.--glavnaya:hover {
    background: var(--color__fill-1-h, #0897B4);
}

.anketa__knopka.--glavnaya[disabled] {
    opacity: .6;
    cursor: default;
}

.anketa__knopka.--nazad {
    color: var(--color__text-2, #223E4E);
    background: transparent;
    border-color: var(--color__border, #EAEAEA);
}

.anketa__knopka.--nazad:hover {
    border-color: var(--color__text-2, #223E4E);
}

.anketa__propustit {
    flex-basis: 100%;
    font-size: .875rem;
    color: var(--color__text-2, #223E4E);
}

/* -------------------------------------------------------------- ошибки */

.anketa__oshibka:empty {
    display: none;
}

.anketa__oshibka {
    padding: .75rem 1rem;
    font-size: .9375rem;
    line-height: 1.5;
    color: #7a2f1c;
    background: #fdf1ee;
    border: 1px solid #f3d4cb;
    border-radius: .5rem;
}

/* --------------------------------------------------- стартовый экран */

.anketa__svyaz {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--color__border, #EAEAEA);
}

.anketa__svyaz-podpis {
    margin-bottom: 1rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color__text-1, #001220);
}

/*
 * Каналы связи. Три равные плитки в ряд, на телефоне - в столбик.
 * Это запасной путь для человека, у которого анкета не пошла: он должен
 * увидеть его сразу, поэтому плитки крупные, с полем для пальца, а не
 * строчка мелких ссылок.
 */
.anketa__svyaz-ryad {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: .75rem;
}

.anketa__kanal {
    display: flex;
    align-items: center;
    gap: .875rem;
    /* 4rem - крупная цель для пальца: анкету заполняют пожилые люди. */
    min-height: 4rem;
    padding: .875rem 1rem;
    color: var(--color__text-1, #001220);
    text-decoration: none;
    background: var(--color__white, #fff);
    border: 1px solid var(--color__border, #EAEAEA);
    border-radius: .75rem;
    box-shadow: 0 1px 2px rgba(0, 18, 32, .04);
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.anketa__kanal:hover {
    border-color: var(--color__fill-1, #3c7b8f);
    box-shadow: 0 6px 16px rgba(60, 123, 143, .16);
    transform: translateY(-2px);
}

.anketa__kanal:focus-visible {
    outline: 3px solid var(--color__fill-1, #3c7b8f);
    outline-offset: 2px;
}

.anketa__kanal:active {
    transform: translateY(0);
}

/* Значок одного размера у всех каналов, чем бы он ни был нарисован. */
.anketa__kanal-znak {
    flex: 0 0 auto;
    width: 2.5rem;
    height: 2.5rem;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.anketa__kanal-text {
    display: flex;
    flex-direction: column;
    gap: .125rem;
    min-width: 0;
}

.anketa__kanal-poyasnenie {
    font-size: .875rem;
    line-height: 1.3;
    color: var(--color__text-2, #223E4E);
    overflow-wrap: anywhere;
}

/* МАКС - фирменный значок из шаблона (тот же, что в шапке сайта).
   Max_Icon.svg рядом не годится: это чёрная трассированная картинка. */
.anketa__kanal-znak.--maks {
    background-image: url("../img/Max_Icon.webp");
    border-radius: .5rem;
}

/* Telegram - в своём фирменном синем: мессенджеры узнают по цвету, и
   перекрашивать их в палитру сайта значит делать ряд менее понятным. */
.anketa__kanal-znak.--telegram {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg width='28' height='28' viewBox='0 0 28 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='28' height='28' rx='14' fill='%232AABEE'/%3E%3Cpath d='M20.7 8.3 6.6 13.4c-.6.2-.6.7 0 .9l3.6 1.1 1.4 4.2c.2.5.5.6.8.2l2-2 3.7 2.7c.5.4.9.2 1-.4l2.3-10.7c.1-.6-.3-.9-.7-.7zm-2.1 2.5-6.5 5.8-.3 2.6-1.2-3.8z' fill='white'/%3E%3C/svg%3E");
}

.anketa__kanal-znak.--pochta {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg width='28' height='28' viewBox='0 0 28 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='28' height='28' rx='14' fill='%233c7b8f'/%3E%3Cpath d='M7.5 10.5h13v7h-13z' stroke='white' stroke-width='1.4' stroke-linejoin='round'/%3E%3Cpath d='M7.5 11l6.5 4.5L20.5 11' stroke='white' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.anketa__kanal-podpis {
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--color__text-1, #001220);
}

/* ------------------------------------------- что почитать в ожидании */

.anketa__chtenie {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: .75rem;
    margin-top: .5rem;
}

.anketa__kartochka {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    padding: 1rem 1.125rem;
    color: var(--color__text-1, #001220);
    text-decoration: none;
    background: var(--color__gray-1, #effafc);
    border: 1px solid transparent;
    border-radius: .5rem;
    transition: border-color .15s ease, transform .15s ease;
}

.anketa__kartochka:hover {
    border-color: var(--color__fill-1, #3c7b8f);
    transform: translateY(-1px);
}

.anketa__kartochka-zagolovok {
    font-weight: 600;
    color: var(--color__fill-1, #3c7b8f);
}

.anketa__kartochka-opisanie {
    font-size: .9375rem;
    line-height: 1.4;
    color: var(--color__text-2, #223E4E);
}

/* ------------------------------------------------- ловушка для ботов */

/*
 * Поле видит только робот. Прятать через display:none нельзя - часть ботов
 * такие поля пропускает; поэтому убираем его с глаз, но оставляем в разметке.
 */
.anketa__lovushka {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.anketa__bez-skripta {
    padding: 1rem;
    background: var(--color__fill-4, #F5F5F9);
    border-radius: .5rem;
}

/* ------------------------------------------------------------ телефон */

@media (max-width: 768px) {

    .anketa {
        padding: 1rem 0 4rem;
    }

    .anketa__knopki {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .anketa__knopka {
        width: 100%;
    }

    .anketa__propustit {
        text-align: center;
    }
}