/*
 * Окна пожертвования (campaign/_payment_modals.html.twig, реестр AD-109).
 *
 * Свой компонент, а не правка темы: окна свёрстаны заново. Тема описывает их
 * в трёх файлах (styles_modal.css, media.css, main.css), с правилами вида
 * `#payment_modal.modal_holder_box h5`, поэтому всё здесь начинается с
 * SCOPE — `.pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result)`:
 * id и два класса старше любого правила темы, и файл подключён последним.
 *
 * Устройство:
 *  - окно не бывает выше экрана: заголовок и кнопка внизу стоят на месте,
 *    прокручивается только середина (`.pm-body`), если уж не поместилась;
 *  - на телефоне (≤560px) — шторка снизу во всю ширину, на остальном —
 *    карточка по центру;
 *  - четвёртое окно, `#payment_modal_result`, — итог оплаты: ждём банк,
 *    проверяем, получен, не прошёл (состояние — в `data-state`);
 *  - анимации — только в ответ на действие: окно поднимается при открытии,
 *    шаг приезжает справа (вперёд) или слева («Назад»), полоска шагов
 *    дорастает. При «уменьшить движение» в системе их нет.
 *
 * Цвета — темы: коралловый #EB5940, текст #373E5B.
 */

.mfp-payment,
.pm {
    --pm-coral: #EB5940;
    --pm-coral-dark: #D4482F;
    --pm-ink: #373E5B;
    --pm-muted: #6B7086;
    --pm-line: #E2E4EC;
    --pm-field: #F5F6F9;
    --pm-blush: #FDEFEC;
    /* Ошибка темнее и холоднее кораллового: коралловым здесь выбранное и
       фокус, и ошибка того же цвета читалась бы как выбор. */
    --pm-error: #C8322A;
    --pm-error-bg: #FDEDEB;
    --pm-error-ink: #9E2820;
    --pm-ease: cubic-bezier(.2, .8, .2, 1);
}

/* ── Подложка и контейнер Magnific ───────────────────────────────────────── */

.mfp-bg.mfp-payment {
    background: #1F2338;
    opacity: 0;
    transition: opacity .22s ease;
}

.mfp-bg.mfp-payment.mfp-ready {
    opacity: .6;
}

.mfp-bg.mfp-payment.mfp-removing {
    opacity: 0;
}

.mfp-wrap.mfp-payment .mfp-container {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
}

.mfp-wrap.mfp-payment .mfp-container::before {
    display: none;
}

.mfp-wrap.mfp-payment .mfp-content {
    width: auto;
    max-width: 100%;
    vertical-align: initial;
}

/* ── Окно ────────────────────────────────────────────────────────────────── */

.pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    width: 440px;
    max-width: 100%;
    max-height: calc(100vh - 48px);
    max-height: calc(100dvh - 48px);
    margin: 0;
    padding: 0;
    overflow: hidden;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 24px 64px rgba(31, 35, 56, .28);
    color: var(--pm-ink);
    font-family: Roboto, Arial, sans-serif;
    text-align: left;
}

.pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) *,
.pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) *::before,
.pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) *::after {
    box-sizing: border-box;
}

/* Сброс того, что тема задаёт абзацам и заголовкам внутри своих окон. */
.pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) p,
.pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) h5 {
    margin: 0;
    padding: 0;
    color: inherit;
    font-size: inherit;
    line-height: inherit;
    text-align: left;
}

.pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) .pm-form {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    margin: 0;
    padding: 0;
}

.pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) .pm-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 2px 24px 18px;
}

.pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) .pm-foot {
    flex-shrink: 0;
    padding: 14px 24px 20px;
    background: #fff;
    box-shadow: 0 -1px 0 var(--pm-line);
}

/* ── Шапка: «Назад», полоска шагов, крестик ──────────────────────────────── */

.pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) .pm-head {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    min-height: 56px;
    padding: 8px 10px 4px 16px;
}

.pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) .pm-progress {
    grid-column: 2;
    display: flex;
    gap: 6px;
}

.pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) .pm-progress span {
    position: relative;
    width: 28px;
    height: 4px;
    overflow: hidden;
    border-radius: 2px;
    background: var(--pm-line);
}

.pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) .pm-progress span.is-done::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--pm-coral);
    transform-origin: left center;
}

.pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) .pm-back {
    grid-column: 1;
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    height: 40px;
    margin: 0 0 0 -8px;
    padding: 0 10px 0 4px;
    border: 0;
    border-radius: 12px;
    background: none;
    color: var(--pm-muted);
    font: 500 15px/1 Roboto, Arial, sans-serif;
    cursor: pointer;
}

.pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) .pm-back::before {
    content: "";
    width: 22px;
    height: 22px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14.5 6l-6 6 6 6' fill='none' stroke='%236B7086' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 22px no-repeat;
}

.pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) .pm-close {
    grid-column: 3;
    justify-self: end;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6L6 18' fill='none' stroke='%23373E5B' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 20px no-repeat;
    cursor: pointer;
    transition: background-color .15s ease;
}

/* ── Заголовок и сводка ──────────────────────────────────────────────────── */

.pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) .pm-title {
    display: block;
    margin: 2px 0 4px;
    font-size: 22px;
    font-weight: 700;
    line-height: 28px;
    text-wrap: balance;
}

.pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) .pm-subtitle,
.pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) .pm-summary {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: var(--pm-muted);
    font-size: 14px;
    line-height: 19px;
}

.pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) .pm-summary {
    margin-bottom: 18px;
    font-size: 15px;
    line-height: 21px;
}

.pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) .pm-summary b {
    color: var(--pm-ink);
    font-size: 17px;
    font-weight: 700;
    white-space: nowrap;
}

/* ── Группы, подписи, поля ───────────────────────────────────────────────── */

.pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) .pm-group {
    min-width: 0;
    margin: 18px 0 0;
    padding: 0;
    border: 0;
}

.pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) .pm-label,
.pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) .pm-field-label {
    display: block;
    margin: 0 0 8px;
    padding: 0;
    color: var(--pm-muted);
    font-size: 13px;
    font-weight: 500;
    line-height: 16px;
}

.pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) .pm-field-label {
    margin-bottom: 6px;
}

.pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) .pm-field {
    position: relative;
    display: block;
    margin: 0 0 14px;
}

.pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) .pm-field input {
    display: block;
    width: 100%;
    height: 52px;
    margin: 0;
    padding: 0 16px;
    border: 1.5px solid var(--pm-line);
    border-radius: 14px;
    background: var(--pm-field);
    box-shadow: none;
    color: var(--pm-ink);
    /* 16px — меньше iOS при фокусе увеличивает страницу. */
    font: 400 16px/1.2 Roboto, Arial, sans-serif;
    outline: none;
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

.pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) .pm-field input::placeholder {
    color: #9A9EAF;
    opacity: 1;
}

.pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) .pm-field input:focus {
    border-color: var(--pm-coral);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(235, 89, 64, .12);
}

.pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) .pm-field--sum {
    margin: 10px 0 0;
}

.pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) .pm-field--sum input {
    padding-right: 42px;
    font-weight: 500;
}

.pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) .pm-suffix {
    position: absolute;
    top: 50%;
    right: 16px;
    color: var(--pm-muted);
    font-size: 16px;
    font-weight: 500;
    transform: translateY(-50%);
    pointer-events: none;
}

.pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) .pm-hint {
    margin: -6px 2px 14px;
    color: var(--pm-muted);
    font-size: 12.5px;
    line-height: 17px;
}

/* ── Ошибки ──────────────────────────────────────────────────────────────── */

/* Поле с ошибкой: красная рамка — и в фокусе тоже, иначе ошибка исчезала бы
   ровно тогда, когда человек пришёл её поправить. */
.pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) .pm-field.is-invalid input,
.pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) .pm-field.is-invalid input:focus {
    border-color: var(--pm-error);
}

.pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) .pm-field.is-invalid input {
    background: #FFF8F7;
}

.pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) .pm-field.is-invalid input:focus {
    box-shadow: 0 0 0 3px rgba(200, 50, 42, .14);
}

.pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) .pm-error {
    display: flex;
    gap: 6px;
    margin: -6px 2px 14px;
    color: var(--pm-error);
    font-size: 13px;
    font-weight: 500;
    line-height: 18px;
    animation: pm-drop .2s var(--pm-ease);
}

.pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) .pm-error[hidden] {
    display: none;
}

.pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) .pm-error::before {
    content: "";
    flex: 0 0 16px;
    height: 18px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7' fill='%23C8322A'/%3E%3Cpath d='M8 4.3v4.6' stroke='%23fff' stroke-width='1.8' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='11.6' r='1.05' fill='%23fff'/%3E%3C/svg%3E") left center / 15px no-repeat;
}

/* Поле суммы стоит без нижнего отступа — ошибка под ним своя. */
.pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) .pm-field--sum + .pm-error {
    margin: 8px 2px 0;
}

/* Отказ сервера и обрыв сети — над кнопкой. */
.pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) .pm-alert {
    margin: 0 0 12px;
    padding: 10px 14px 10px 40px;
    border-radius: 12px;
    background: var(--pm-error-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7' fill='%23C8322A'/%3E%3Cpath d='M8 4.3v4.6' stroke='%23fff' stroke-width='1.8' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='11.6' r='1.05' fill='%23fff'/%3E%3C/svg%3E") 14px 12px / 17px no-repeat;
    color: var(--pm-error-ink);
    font-size: 14px;
    line-height: 20px;
}

/* Класс ставит скрипт при каждом показе (replayAnimation): блок мог и не
   успеть скрыться между двумя попытками, и тогда сам по себе он бы не мигнул. */
.pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) .pm-alert.pm-in {
    animation: pm-drop .22s var(--pm-ease);
}

.pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) .pm-alert[hidden] {
    display: none;
}

.pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) .pm-alert p + p {
    margin-top: 4px;
}

/* Поле с ошибкой вздрагивает — короткое «нет» головой. Повторяется при
   каждой попытке, чтобы было видно: попытка была и снова не прошла. */
.pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) .pm-shake {
    animation: pm-shake .36s var(--pm-ease);
}

.pm-visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ── Суммы ───────────────────────────────────────────────────────────────── */

.pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) .pm-amounts {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin: 0;
    padding: 0;
}

.pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) .item_cost {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    width: auto;
    height: 52px;
    margin: 0;
    padding: 0 4px;
    border: 1.5px solid var(--pm-line);
    border-radius: 14px;
    background: #fff;
    box-shadow: none;
    color: var(--pm-ink);
    font: 700 18px/1 Roboto, Arial, sans-serif;
    cursor: pointer;
    transition: transform .12s ease, background-color .15s ease, border-color .15s ease, color .15s ease;
    -webkit-tap-highlight-color: transparent;
}

.pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) .item_cost::before,
.pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) .item_cost::after {
    content: none;
}

/* Тема задаёт любому span в плитке 12px и свой цвет — здесь свои. */
.pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) .item_cost .pm-amount {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: 1;
}

.pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) .item_cost .pm-rub {
    color: var(--pm-muted);
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
}

.pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) .item_cost.pm-amount-other {
    font-size: 15px;
    font-weight: 500;
}

.pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) .item_cost:active {
    transform: scale(.96);
}

.pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) .item_cost.active {
    border-color: var(--pm-coral);
    background: var(--pm-coral);
    color: #fff;
}

.pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) .item_cost.active .pm-rub {
    color: rgba(255, 255, 255, .85);
}

/* ── Способы оплаты ──────────────────────────────────────────────────────── */

.pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) .pm-methods {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

/* Обёртка нужна скрипту (`.holder_modal_link a`), сетке — нет. */
.pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) .holder_modal_link {
    display: contents;
}

.pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) .pm-method {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: auto;
    height: auto;
    min-height: 94px;
    margin: 0;
    padding: 12px 6px 10px;
    border: 1.5px solid var(--pm-line);
    border-radius: 14px;
    background: #fff;
    box-shadow: none;
    color: var(--pm-ink);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: transform .12s ease, background-color .15s ease, border-color .15s ease;
    -webkit-tap-highlight-color: transparent;
}

.pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) .pm-method:active {
    transform: scale(.97);
}

.pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) .pm-method.active {
    border-color: var(--pm-coral);
    background: var(--pm-blush);
}

.pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) .pm-method.active::after {
    content: "";
    position: absolute;
    top: 6px;
    right: 6px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--pm-coral) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
    animation: pm-pop .22s var(--pm-ease);
}

.pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) .pm-method-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    margin-bottom: 7px;
}

.pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) .pm-method-logo img {
    display: block;
    max-width: 80px;
    max-height: 28px;
    margin: 0;
    padding: 0;
    /* general.css белит логотип у выбранной кнопки (`brightness(100)`) —
       под прежнюю коралловую заливку. Здесь фон светлый. */
    filter: none;
}

.pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) .pm-method-logo--phone {
    width: 28px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='6' y='2.5' width='12' height='19' rx='2.5' fill='none' stroke='%23373E5B' stroke-width='1.8'/%3E%3Cpath d='M10.5 18.5h3' stroke='%23373E5B' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / 26px no-repeat;
}

.pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) .pm-method-name {
    font-size: 14px;
    font-weight: 600;
    line-height: 17px;
}

.pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) .pm-method-note {
    margin-top: 2px;
    color: var(--pm-muted);
    font-size: 11.5px;
    line-height: 14px;
}

/* ── Комментарий ─────────────────────────────────────────────────────────── */

.pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) .pm-comment {
    margin-top: 14px;
}

.pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) .pm-comment-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 0 -2px;
    padding: 6px 2px;
    border: 0;
    background: none;
    color: var(--pm-coral);
    font: 500 15px/20px Roboto, Arial, sans-serif;
    cursor: pointer;
}

.pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) .pm-comment-toggle::before {
    content: "";
    width: 18px;
    height: 18px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' fill='none' stroke='%23EB5940' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center / 18px no-repeat;
    transition: transform .22s var(--pm-ease);
}

.pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) .pm-comment.is-open .pm-comment-toggle::before {
    transform: rotate(45deg);
}

/* Высота «0fr → 1fr» анимируется без замера в скрипте. Свёрнутое поле
   невидимо и для клавиатуры (`visibility`), иначе Tab уводил бы в него. */
.pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) .pm-collapse {
    display: grid;
    grid-template-rows: 0fr;
    visibility: hidden;
    transition: grid-template-rows .24s var(--pm-ease), visibility 0s .24s;
}

.pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) .pm-comment.is-open .pm-collapse {
    grid-template-rows: 1fr;
    visibility: visible;
    transition: grid-template-rows .24s var(--pm-ease), visibility 0s;
}

/* `overflow: hidden` нужен анимации высоты, но режет и то, что рисуется за
   краем поля, — кольцо фокуса. Отсюда запас по бокам: поле стоит на месте,
   а обрезка проходит дальше кольца. */
.pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) .pm-collapse-inner {
    min-height: 0;
    margin: 0 -4px;
    padding: 0 4px;
    overflow: hidden;
}

.pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) .holder_area {
    position: relative;
    margin: 6px 0 0;
    padding: 0;
}

.pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) .holder_area textarea {
    display: block;
    width: 100%;
    min-height: 84px;
    margin: 0;
    padding: 12px 46px 12px 14px;
    border: 1.5px solid var(--pm-line);
    border-radius: 14px;
    background: var(--pm-field);
    color: var(--pm-ink);
    font: 400 16px/1.4 Roboto, Arial, sans-serif;
    outline: none;
    resize: none;
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

.pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) .holder_area textarea:focus {
    border-color: var(--pm-coral);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(235, 89, 64, .12);
}

.pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) .smile_ic {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: url("/sites/all/themes/life/new_assets/img/icon_smile.png") center / 20px no-repeat;
    cursor: pointer;
}

.pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) .pm-counter {
    display: block;
    margin: 6px 2px 0;
    color: var(--pm-muted);
    font-size: 12px;
    line-height: 16px;
    text-align: right;
}

.pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) .pm-comment .pm-hint {
    margin: 2px 2px 0;
}

/* Выбор смайлов — в потоке под полем, а не поверх: в окне с прокруткой
   всплывающий список обрезался бы краем. */
.pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) .global_list_of_smiles {
    position: static;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(36px, 1fr));
    gap: 2px;
    width: auto;
    height: auto;
    max-height: 124px;
    margin: 8px 0 0;
    padding: 6px;
    overflow-y: auto;
    border: 1.5px solid var(--pm-line);
    border-radius: 14px;
    background: #fff;
    box-shadow: none;
    animation: pm-fade .18s ease;
}

.pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) .global_list_of_smiles .item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: 36px;
    border-radius: 10px;
    font-size: 21px;
    line-height: 1;
    cursor: pointer;
}

/* ── SMS: пояснение ──────────────────────────────────────────────────────── */

.pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) .pm-note {
    margin: 2px 0 0;
    padding: 12px 14px;
    border-radius: 14px;
    background: var(--pm-field);
    color: #4D536B;
    font-size: 13px;
    line-height: 18px;
}

.pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) .pm-note p + p {
    margin-top: 6px;
}

/* ── Кнопка и оферта ─────────────────────────────────────────────────────── */

.pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) .pm-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 54px;
    margin: 0;
    padding: 0 16px;
    border: 0;
    border-radius: 16px;
    background: var(--pm-coral);
    box-shadow: 0 8px 20px rgba(235, 89, 64, .28);
    color: #fff;
    font: 600 16px/54px Roboto, Arial, sans-serif;
    /* Скрипт показывает одну из двух кнопок второго шага через
       `display: block` в атрибуте style — текст тогда держит по центру это. */
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s ease, transform .12s ease, box-shadow .15s ease;
    -webkit-tap-highlight-color: transparent;
}

.pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) .pm-cta:active {
    transform: scale(.985);
    box-shadow: 0 4px 12px rgba(235, 89, 64, .25);
}

/* Пробел перед суммой — в самом тексте, а не отступом: иначе экранная
   читалка произнесёт «Пожертвовать750». `pre` — чтобы он не схлопнулся. */
.pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) .pm-cta-sum {
    font-weight: 500;
    white-space: pre;
}

.pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) .pm-cta-sum:empty {
    display: none;
}

/* Запрос в пути: вместо текста — спиннер. Текст не убирается, а становится
   прозрачным, чтобы кнопка не меняла ширину и читалка не теряла подпись.
   Повторную отправку держит флаг в скрипте; `pointer-events` — второй замок. */
.pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) .pm-cta.is-busy {
    position: relative;
    color: transparent;
    pointer-events: none;
    cursor: progress;
}

.pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) .pm-cta.is-busy::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 22px;
    height: 22px;
    margin: -11px 0 0 -11px;
    border: 2.5px solid rgba(255, 255, 255, .35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: pm-spin .7s linear infinite;
}

/* Второстепенное действие рядом с главным: «Закрыть», «Открыть снова». */
.pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) .pm-cta.pm-cta--ghost {
    border: 1.5px solid var(--pm-line);
    background: #fff;
    box-shadow: none;
    color: var(--pm-ink);
}

.pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) .pm-cta + .pm-cta--ghost {
    margin-top: 10px;
}

/* Только кнопки и ссылки: у полей фокус — коралловая рамка с мягким кольцом,
   и второе кольцо поверх давало толстую двойную обводку. */
.pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) :is(button, a):focus-visible {
    outline: 3px solid rgba(235, 89, 64, .4);
    outline-offset: 2px;
}

.pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) .pm-legal {
    margin: 10px 4px 0;
    color: var(--pm-muted);
    font-size: 11.5px;
    line-height: 15px;
    text-align: center;
}

.pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) .pm-legal a {
    color: var(--pm-coral);
    font-size: inherit;
    line-height: inherit;
    text-decoration: underline;
}

/* ── SMS отправлено ──────────────────────────────────────────────────────── */

.pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) .pm-done {
    display: none;
}

.pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result).pm--done .pm-form {
    display: none;
}

.pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result).pm--done .pm-done {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
}

/* Назад с этого экрана некуда: заявка уже ушла. */
.pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result).pm--done .pm-back {
    visibility: hidden;
}

.pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) .pm-done .pm-body {
    padding-top: 8px;
    text-align: center;
}

.pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) .pm-done :is(p, h5) {
    text-align: center;
}

.pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) .pm-done .pm-title {
    outline: none;
}

.pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) .pm-done-icon {
    display: block;
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: var(--pm-blush) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23EB5940' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8.5A2.5 2.5 0 0 1 8.5 6h15A2.5 2.5 0 0 1 26 8.5v11a2.5 2.5 0 0 1-2.5 2.5H14l-5.5 4.5V22h0A2.5 2.5 0 0 1 6 19.5z'/%3E%3Cpath d='M11 12.5h10M11 16h6'/%3E%3C/svg%3E") center / 32px no-repeat;
}

.pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result).pm--done .pm-done-icon {
    animation: pm-pop .42s .08s var(--pm-ease) both;
}

.pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) .pm-done-text {
    margin-top: 10px;
    font-size: 15px;
    line-height: 22px;
}

.pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) .pm-done-phone {
    white-space: nowrap;
}

.pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) .pm-done .pm-hint {
    margin: 12px 0 0;
}

/* ── Итог оплаты ─────────────────────────────────────────────────────────── */

/* Видно одно состояние — то, что в `data-state` окна. */
.pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) .pm-state {
    display: none;
}

.pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result)[data-state="waiting"] .pm-state--waiting,
.pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result)[data-state="checking"] .pm-state--checking,
.pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result)[data-state="paid"] .pm-state--paid,
.pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result)[data-state="failed"] .pm-state--failed,
.pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result)[data-state="unknown"] .pm-state--unknown {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
}

.pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) .pm-state .pm-body {
    padding-top: 8px;
    text-align: center;
}

.pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) .pm-state :is(p, h5) {
    text-align: center;
}

.pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) .pm-state .pm-title {
    outline: none;
}

.pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) .pm-state .pm-hint {
    margin: 12px 0 0;
}

.pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) .pm-result-icon {
    position: relative;
    display: block;
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: var(--pm-blush) center / 30px no-repeat;
}

/* Появление итога — с «толчком», как галочка выбранного способа. */
.pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) .pm-state:is(.pm-state--paid, .pm-state--failed, .pm-state--unknown) .pm-result-icon {
    animation: pm-pop .42s .08s var(--pm-ease) both;
}

.pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) .pm-result-icon--heart {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20.6s-7.6-4.6-9.3-9.4C1.6 8 3.6 4.6 7 4.6c2.1 0 3.6 1.2 5 3 1.4-1.8 2.9-3 5-3 3.4 0 5.4 3.4 4.3 6.6-1.7 4.8-9.3 9.4-9.3 9.4z' fill='%23EB5940'/%3E%3C/svg%3E");
}

.pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) .pm-result-icon--fail {
    background-color: var(--pm-error-bg);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C8322A' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E");
    background-size: 26px;
}

/* Ждём: кольцо крутится по краю круга. */
.pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) .pm-result-icon--wait::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 3px solid transparent;
    border-top-color: var(--pm-coral);
    border-radius: 50%;
    animation: pm-spin 1s linear infinite;
}

.pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) .pm-result-icon--wait {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EB5940' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6.5' y='2.5' width='11' height='19' rx='2.5'/%3E%3Cpath d='M10.5 18.5h3'/%3E%3C/svg%3E");
    background-size: 28px;
}

.pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) .pm-result-sum {
    font-weight: 700;
}

.pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) .pm-result-to {
    color: var(--pm-muted);
}

/* Строка «Ждём…» под текстом — в окне итога и на экране SMS. */
.pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) .pm-wait-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 18px;
    color: var(--pm-muted);
    font-size: 13.5px;
    line-height: 18px;
}

.pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result).pm--settled .pm-wait-line {
    display: none;
}

.pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) .pm-spinner {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    border: 2px solid var(--pm-line);
    border-top-color: var(--pm-coral);
    border-radius: 50%;
    animation: pm-spin .8s linear infinite;
}

/* Наведение — только там, где оно есть: на телефоне состояние наведения
   «залипает» после касания, и кнопка оставалась тёмной. */
@media (hover: hover) {
    .pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) :is(.pm-back, .pm-close):hover {
        background-color: var(--pm-field);
    }

    .pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) .item_cost:hover {
        border-color: #C9CCD8;
    }

    .pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) .pm-method:hover {
        border-color: #C9CCD8;
    }

    .pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) .smile_ic:hover {
        background-color: var(--pm-line);
    }

    .pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) .global_list_of_smiles .item:hover {
        background: var(--pm-field);
    }

    .pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) .pm-cta:hover {
        background: var(--pm-coral-dark);
        color: #fff;
    }

    .pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) .pm-cta.pm-cta--ghost:hover {
        border-color: #C9CCD8;
        background: var(--pm-field);
        color: var(--pm-ink);
    }
}

/* ── Движение ────────────────────────────────────────────────────────────── */

@keyframes pm-rise {
    from { opacity: 0; transform: translateY(18px) scale(.98); }
    to { opacity: 1; transform: none; }
}

@keyframes pm-sheet {
    from { transform: translateY(100%); }
    to { transform: none; }
}

@keyframes pm-from-right {
    from { opacity: 0; transform: translateX(28px); }
    to { opacity: 1; transform: none; }
}

@keyframes pm-from-left {
    from { opacity: 0; transform: translateX(-28px); }
    to { opacity: 1; transform: none; }
}

@keyframes pm-fill {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

@keyframes pm-pop {
    0% { transform: scale(0); }
    70% { transform: scale(1.15); }
    100% { transform: scale(1); }
}

@keyframes pm-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes pm-spin {
    to { transform: rotate(360deg); }
}

@keyframes pm-drop {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: none; }
}

@keyframes pm-shake {
    0%, 100% { transform: none; }
    20% { transform: translateX(-5px); }
    40% { transform: translateX(4px); }
    60% { transform: translateX(-3px); }
    80% { transform: translateX(2px); }
}

/* Открытие: окно поднимается. Смена шага — без подъёма: меняется только
   содержимое, и оно приезжает с той стороны, куда идём. */
.mfp-payment.mfp-ready .pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result):not([data-dir]) {
    animation: pm-rise .28s var(--pm-ease);
}

.mfp-payment .pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result)[data-dir="forward"] :is(.pm-body, .pm-foot) {
    animation: pm-from-right .26s var(--pm-ease);
}

.mfp-payment .pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result)[data-dir="back"] :is(.pm-body, .pm-foot) {
    animation: pm-from-left .26s var(--pm-ease);
}

/* Вперёд — вторая черта полоски дорастает. */
.mfp-payment .pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result)[data-dir="forward"] .pm-progress span:last-child::after {
    animation: pm-fill .36s .06s var(--pm-ease) both;
}

.mfp-payment.mfp-removing .pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .2s ease, transform .2s ease;
}

/* ── Телефон: шторка снизу ───────────────────────────────────────────────── */

@media (max-width: 560px) {
    .mfp-wrap.mfp-payment .mfp-container {
        align-items: flex-end;
        padding: 0;
    }

    .mfp-wrap.mfp-payment .mfp-content {
        width: 100%;
    }

    .pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) {
        width: 100%;
        max-height: calc(100vh - 12px);
        max-height: calc(100dvh - 12px);
        border-radius: 22px 22px 0 0;
        box-shadow: 0 -8px 32px rgba(31, 35, 56, .2);
    }

    .pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) .pm-head {
        min-height: 52px;
        padding: 6px 6px 2px 12px;
    }

    .pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) .pm-body {
        padding: 0 16px 14px;
    }

    .pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) .pm-foot {
        padding: 10px 16px 14px;
        padding-bottom: max(14px, env(safe-area-inset-bottom));
    }

    .pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) .pm-title {
        font-size: 20px;
        line-height: 26px;
    }

    .pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) .pm-group {
        margin-top: 14px;
    }

    .mfp-payment.mfp-ready .pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result):not([data-dir]) {
        animation: pm-sheet .32s var(--pm-ease);
    }

    .mfp-payment.mfp-removing .pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) {
        opacity: 1;
        transform: translateY(100%);
        transition: transform .22s ease-in;
    }
}

/* Самые узкие телефоны: плитки чуть ниже, чтобы окно влезло в 568px. */
@media (max-width: 360px) {
    .pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) .item_cost {
        height: 48px;
        font-size: 16px;
    }

    .pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) .item_cost.pm-amount-other {
        font-size: 14px;
    }

    .pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) .pm-field--sum input {
        height: 48px;
    }

    .pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) .pm-method {
        min-height: 86px;
        padding: 10px 4px 8px;
    }

    .pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) .pm-method-logo {
        height: 24px;
        margin-bottom: 5px;
    }

    .pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) .pm-method-logo img {
        max-width: 66px;
        max-height: 24px;
    }

    .pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) .pm-method-note {
        font-size: 11px;
    }
}

/* Низкий экран (телефон боком, ноутбук с панелями браузера): поля вокруг
   карточки меньше — места под содержимое больше. */
@media (max-height: 520px) and (min-width: 561px) {
    .mfp-wrap.mfp-payment .mfp-container {
        padding-top: 8px;
        padding-bottom: 8px;
    }

    .pm.pm:is(#payment_modal, #payment_modal_card, #payment_modal_sms, #payment_modal_result) {
        max-height: calc(100vh - 16px);
        max-height: calc(100dvh - 16px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .mfp-payment *,
    .mfp-payment *::before,
    .mfp-payment *::after,
    .mfp-bg.mfp-payment {
        animation: none !important;
        transition: none !important;
    }

    /* Спиннер — не украшение, а «запрос идёт»: без вращения его не отличить
       от зависшей кнопки. Крутится, но медленно. */
    .mfp-payment .pm-spinner,
    .mfp-payment .pm-cta.is-busy::after,
    .mfp-payment .pm-result-icon--wait::after {
        animation: pm-spin 1.6s linear infinite !important;
    }
}