/* Форма намёка на подарок и превью сообщения. */

.b_hint_form_body {
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-width: 420px;
}

.b_hint_lead {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: #666363;
}

.b_hint_group_title,
.b_hint_field label {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    color: #666363;
}

.b_hint_pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.b_hint_pill {
    margin: 0;
    cursor: pointer;
}

.b_hint_pill input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.b_hint_pill span {
    display: inline-block;
    padding: 9px 20px;
    border: 1px solid #eaeaeb;
    border-radius: 70px;
    background: #eaeaeb;
    font-size: 14px;
    line-height: 1.2;
    color: #222222;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.b_hint_pill input:checked + span {
    border-color: #f45b50;
    background: #f45b50;
    color: #ffffff;
}

.b_hint_pill input:focus-visible + span {
    outline: 2px solid #f45b50;
    outline-offset: 2px;
}

/* Отступы между блоками задаёт gap контейнера, поэтому margin от .b_form_input
   гасим — иначе шаг между полями получается двойным. */
.b_hint_form_body .el_form,
.b_hint_field {
    margin: 0;
}

.b_hint_field input {
    width: 100%;
}

.b_hint_note {
    font-size: 12px;
    line-height: 1.4;
    color: #666363;
}

.b_hint_error {
    padding: 10px 14px;
    border-radius: 8px;
    background: #fdecea;
    font-size: 14px;
    color: #c0392b;
}

/* «Изменить» — такая же кнопка, что и «Отправить», только серая:
   форму и размеры берём у сайтового .btn, меняем лишь цвета. */
.b_hint_modal .b_hint_modal_actions .btn.b_hint_btn_grey {
    border-color: #eaeaeb;
    background: #eaeaeb;
    color: #222222;
}

.b_hint_modal .b_hint_modal_actions .btn.b_hint_btn_grey:hover {
    border-color: #dcdce0;
    background: #dcdce0;
    color: #222222;
}

/* К форме ведут два перехода: ссылка с главной и кнопка на самой странице.
   Оба через якорь #hint-form. Сайтовый js_scroll здесь не годится: он считает
   положение цели через position(), а на этой странице у неё есть позиционированный
   предок — прокрутка не доходила до формы почти на 450px.

   Плавную прокрутку не включаем: со scroll-behavior:smooth переход по якорю
   при загрузке страницы перестаёт срабатывать — анимацию перебивают скрипты
   сайта, и человек остаётся наверху. Мгновенный переход надёжнее. */
#hint-form {
    scroll-margin-top: 100px;
}

@media (max-width: 600px) {
    #hint-form {
        scroll-margin-top: 65px;
    }
}

/* Текст описания механики над формой — 20px (.f_bodybig), и рядом с ним
   форма в 13–14px выглядела мелко. На десктопе подтягиваем её ближе к
   основному тексту; на телефоне размеры оставляем компактными. */
@media (min-width: 601px) {
    .b_hint_lead {
        font-size: 18px;
    }

    .b_hint_group_title,
    .b_hint_field label,
    .b_hint_pill span,
    .b_hint_error,
    .b_hint_form_body input {
        font-size: 16px;
    }

    .b_hint_note {
        font-size: 14px;
    }
}

/* ---------- превью: общая рамка ---------- */

.b_hint_preview_panel,
.js_hint_preview {
    display: flex;
    justify-content: center;
    padding: 4px 0 24px;
}

/* Превью в колонке отцентровано, поэтому и заголовок над ним — по центру,
   а не по левому краю колонки. */
.b_hint_preview_heading,
.b_hint_preview_title {
    text-align: center;
}

.b_hint_preview_title {
    margin-bottom: 15px;
    font-size: 13px;
    color: #666363;
}

/* ---------- превью письма ---------- */

/* Масштаб считает JS от ширины колонки: письмо свёрстано на 600px и должно
   занимать колонку целиком, а не сидеть в ней марочкой. */
.b_hint_mail {
    --hint-mail-scale: 1;
    --hint-mail-width: 630px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 100%;
}

/* Ширину темы держим равной ширине письма — иначе она вылезает за его край. */
.b_hint_mail_subject,
.b_hint_mail_frame_wrap {
    width: calc(var(--hint-mail-width) * var(--hint-mail-scale));
    max-width: 100%;
}

.b_hint_mail_subject {
    padding: 12px 16px;
    border-radius: 8px;
    background: #eaeaeb;
    font-size: 13px;
    line-height: 1.35;
    color: #222222;
}

/* Рамка отрисована в натуральную величину и ужата трансформом, поэтому
   размеры контейнера считает JS — иначе снизу остаётся пустое поле. */
.b_hint_mail_frame_wrap {
    height: calc(900px * var(--hint-mail-scale));
    border: 1px solid #eaeaeb;
    border-radius: 8px;
    overflow: hidden;
}

.b_hint_mail_frame {
    display: block;
    width: var(--hint-mail-width);
    height: 900px;
    border: 0;
    background: #ffffff;
    transform: scale(var(--hint-mail-scale));
    transform-origin: top left;
}

/* ---------- превью СМС ---------- */

.b_hint_sms {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    /* Занимаем всю ширину контейнера, иначе max-width у макета телефона
       считается от блока, ширину которого задаёт сам телефон, и не ограничивает
       ничего: на узких экранах корпус вылезал за края и срезался. */
    width: 100%;
    min-width: 0;
}

/* Пропорции настоящего телефона — 9:19,5. С высотой по содержимому
   макет получался приплюснутым и на телефон не походил. */
.b_hint_phone {
    position: relative;
    width: 300px;
    height: 650px;
    max-width: 100%;
    flex: 0 0 auto;
    border: 10px solid #1c1c1e;
    border-radius: 46px;
    background: #f2f2f7;
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(28, 28, 30, 0.18);
}

/* На узком экране корпус ужимается по ширине, и фиксированная высота
   растянула бы его в лопату — держим пропорции. */
@supports (aspect-ratio: 1) {
    .b_hint_phone {
        height: auto;
        aspect-ratio: 300 / 650;
    }
}

/* Вырез фронтальной камеры. */
.b_hint_phone::before {
    content: "";
    position: absolute;
    top: 9px;
    left: 50%;
    width: 86px;
    height: 24px;
    margin-left: -43px;
    border-radius: 14px;
    background: #1c1c1e;
    z-index: 2;
}

.b_hint_phone_status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 42px;
    padding: 0 20px;
    font-size: 12px;
    font-weight: 600;
    color: #1c1c1e;
}

.b_hint_phone_signal {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 9px;
}

.b_hint_phone_signal i {
    display: block;
    width: 3px;
    border-radius: 1px;
    background: #1c1c1e;
}

.b_hint_phone_signal i:nth-child(1) { height: 4px; }
.b_hint_phone_signal i:nth-child(2) { height: 6px; }
.b_hint_phone_signal i:nth-child(3) { height: 8px; }

.b_hint_phone_battery {
    width: 22px;
    height: 11px;
    border: 1px solid #1c1c1e;
    border-radius: 3px;
    padding: 1px;
}

.b_hint_phone_battery span {
    display: block;
    width: 70%;
    height: 100%;
    border-radius: 1px;
    background: #1c1c1e;
}

.b_hint_phone_header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 4px 0 12px;
    border-bottom: 1px solid #dcdce0;
    background: rgba(249, 249, 249, 0.94);
}

.b_hint_phone_avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #c7c7cc;
}

.b_hint_phone_sender {
    font-size: 12px;
    color: #1c1c1e;
}

.b_hint_phone_body {
    padding: 16px 14px;
}

.b_hint_phone_time {
    margin-bottom: 10px;
    font-size: 10px;
    text-align: center;
    color: #8e8e93;
}

.b_hint_bubble {
    max-width: 88%;
    padding: 10px 14px;
    border-radius: 18px 18px 18px 5px;
    background: #e9e9eb;
    font-size: 14px;
    line-height: 1.35;
    color: #1c1c1e;
    word-break: break-word;
}

.b_hint_bubble_link {
    color: #0a7cff;
    text-decoration: underline;
    cursor: pointer;
}

.b_hint_phone_icons {
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Ниже выреза камеры, чтобы он оставался на виду, как на живом экране. */
.b_hint_shot {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    background: #ffffff;
    overflow: hidden;
}

/* Скриншот занимает экран целиком. При height:auto он не совпадал с
   пропорциями экрана: снизу оставалось поле, а собственная прокрутка блока
   съедала полосой правый край картинки. */
.b_hint_shot img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

/* Поверх скриншота, а не в потоке — иначе картинку пришлось бы прокручивать.
   Внизу, а не вверху: сверху кнопку перекрывал вырез камеры. */
.b_hint_shot_back {
    position: absolute;
    right: 0;
    bottom: 16px;
    left: 0;
    z-index: 1;
    width: -webkit-max-content;
    width: max-content;
    max-width: calc(100% - 32px);
    margin: 0 auto;
    padding: 9px 18px;
    border: 0;
    border-radius: 40px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 4px 14px rgba(28, 28, 30, 0.2);
    font-size: 12px;
    color: #f45b50;
    cursor: pointer;
}

/* ---------- модальное подтверждение ---------- */

.b_hint_modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.b_hint_modal[hidden] {
    display: none;
}

.b_hint_modal_overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(34, 34, 34, 0.6);
}

.b_hint_modal_box {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 18px;
    width: 100%;
    max-width: 460px;
    max-height: 90vh;
    padding: 28px 24px;
    border-radius: 12px;
    background: #ffffff;
    overflow-y: auto;
}

.b_hint_modal_x {
    position: absolute;
    top: 8px;
    right: 12px;
    border: 0;
    background: none;
    font-size: 26px;
    line-height: 1;
    color: #999595;
    cursor: pointer;
}

.b_hint_modal_title {
    font-size: 18px;
    font-weight: 700;
    color: #222222;
    text-align: center;
}

/* Превью письма высокое, и без своей прокрутки оно выталкивает «Отправить»
   за пределы экрана — кнопку приходится искать. Прокручивается само превью,
   кнопки остаются на месте. */
.b_hint_modal .js_hint_preview {
    max-height: 55vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.b_hint_modal_actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
}

body.st_hint_modal_open {
    overflow: hidden;
}

/* Сайтовый .btn — 60px в высоту и по 60px боковых отступов. В модалке на
   телефоне две такие кнопки занимают всю ширину и половину экрана. */
@media (max-width: 600px) {
    .b_hint_modal_actions {
        gap: 8px;
    }

    .b_hint_modal_actions .btn {
        width: auto;
        min-width: 0;
        height: 40px;
        line-height: 38px;
        padding: 0 18px;
        font-size: 13px;
        letter-spacing: 0.4px;
    }
}

@media (max-width: 480px) {
    .b_hint_modal_box {
        padding: 24px 16px;
    }

    /* На телефоне экрана меньше, а письмо то же — отдаём превью больше места,
       чтобы прокручивать приходилось меньше. */
    .b_hint_modal .js_hint_preview {
        max-height: 64vh;
    }
}