/* ==========================================================================
   checkout - стили страницы.

   Собрано из source/tajiro скриптом tools/port-tajiro.mjs. Править здесь
   бессмысленно: следующий прогон затрёт. Правка идёт в src/css/.
   ========================================================================== */

/* ========================= HEADER STYLES ========================= */
/* Переопределения шапки для этой страницы. Общая шапка живёт в style.css
   в корне темы. */
/* ========================= /HEADER STYLES ======================== */

/* ========================= PAGE STYLES =========================== */
/* ---------------------------------------------------------------
   css/shared/forms.css
   --------------------------------------------------------------- */
/* ==========================================================================
   tajiro — поля ввода

   В системе их не было вовсе: на лендингах формы нет, и по всему проекту
   про них написано ровно одно правило — «button, input, select, textarea
   { font: inherit }» в базе. Страницы входа и оплаты — первые, где поля
   появились, поэтому файл общий с самого начала.

   Собрано из токенов, ничего нового не заведено: поверхность --c-surface,
   кромка --c-line, скругление --r-card (6px — шкала мелких карточек, у
   кнопок своё, 4), фокус зелёным, как у :focus-visible в базе.
   ========================================================================== */

.fld { display: block; }

.fld + .fld { margin-top: 14px; }

/* Подпись над полем — прописными в разрядку, теми же значениями, что у
   подписей показателей. Постоянная, а не плейсхолдер: плейсхолдер исчезает
   на первом же введённом символе, и человек перестаёт видеть, что вводит. */
.fld__label {
    display: block;
    margin-bottom: 7px;
    font-size: 11px;
    font-weight: 700;
    line-height: 15px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--c-text-muted);
}

.fld__input,
.fld__select {
    width: 100%;
    height: 52px;
    padding-inline: 16px;
    border: 1px solid var(--c-line);
    border-radius: var(--r-card);
    background: var(--c-surface);
    font-size: 16px;
    line-height: 24px;
    color: var(--c-text);
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.fld__input::placeholder { color: var(--c-text-muted); }

/* Многострочное поле. Высота не фиксирована, её задаёт rows в разметке, —
   поэтому здесь снимается высота одной строки и возвращаются вертикальные
   поля, которых у однострочного поля нет: там текст держит по центру сама
   высота коробки.

   Тянуть разрешено только вниз: вбок растягивание ломает колонку, а в
   раскладке из двух долей ещё и наезжает на соседнюю. */
.fld__area {
    height: auto;
    min-height: 132px;
    padding-block: 13px;
    resize: vertical;
}

/* Фокус: кромка зеленеет и вокруг неё мягкое кольцо. Обводку браузера
   снимаем только потому, что рисуем свою — и только на самих полях. */
.fld__input:focus,
.fld__select:focus {
    outline: none;
    border-color: var(--c-green);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-green) 16%, transparent);
}

/* Селект: свою стрелку рисуем сами, потому что системная в разных
   браузерах разного размера и цвета. */
.fld__select {
    appearance: none;
    padding-right: 42px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 5'%3E%3Cpath d='M0.536 0.625H7.464L4 4.375L0.536 0.625Z' fill='%236b645a'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 8px 5px;
    cursor: pointer;
}

/* --- Раскрытый список -----------------------------------------------------
   Закрытое поле своё целиком, а раскрытый список до недавних пор рисовала
   система: серое меню Windows, окно выбора на телефоне, и CSS туда почти не
   доставал. Настраиваемый селект — appearance: base-select, Chrome и Edge
   с 135-й версии — отдаёт список в CSS и при этом остаётся обычным
   <select>: клавиатура, скринридер, отправка формы и js/checkout/market.js
   работают как раньше, разметку трогать не пришлось.

   Где его нет — Safari, Firefox, любой браузер на iPhone, — блок целиком
   пропускается, и там остаётся системный список, как было.

   Материал списка — тот же, что у панелей шапки: глухое стекло, кромка
   градиентом в прозрачной границе и «плавающая» тень, см. .nav-panel в
   header.css. Выбранный пункт — как вариант валюты в шапке: зелёный тинт,
   зелёный текст в полный вес. */
@supports (appearance: base-select) {
    .fld__select,
    .fld__select::picker(select) {
        appearance: base-select;
    }

  /* Стрелка переезжает из фона в ::picker-icon: фон повернуть нельзя, а
     значок можно — у открытого списка она смотрит остриём вверх. Встаёт он
     туда же, где лежала фоновая стрелка, — в правое поле, в 16px от кромки.
     В строку его не ставим: правое поле страницы подгоняют под фоновую
     стрелку сами (см. .ch .fld__select в 00-checkout.css), и значок в строке
     уехал бы вслед за полем к середине. */
    .fld__select {
        position: relative;
        display: flex;
        align-items: center;
        background-image: none;
    }

    .fld__select::picker-icon {
        content: "";
        position: absolute;
        inset-block: 0;
        right: 16px;
        width: 8px;
        height: 5px;
        margin-block: auto;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 5'%3E%3Cpath d='M0.536 0.625H7.464L4 4.375L0.536 0.625Z' fill='%236b645a'/%3E%3C/svg%3E") no-repeat center / 8px 5px;
        transition: rotate 0.18s ease;
    }

    .fld__select:open::picker-icon { rotate: 180deg; }

  /* Пока список открыт, фокус стоит на пункте внутри него, и :focus у
     самого поля гаснет. Кольцо держим по :open — иначе поле теряло бы
     подсветку ровно тогда, когда с ним работают. */
    .fld__select:open {
        border-color: var(--c-green);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-green) 16%, transparent);
    }

  /* Сам список. Ширина и место — браузерные: не уже поля и под ним, а если
     внизу тесно — над ним. Поэтому зазор задан с обеих сторон: он нужен и
     при развороте вверх. */
    .fld__select::picker(select) {
        margin-block: 6px;
        padding: 6px;
        border: 1.5px solid transparent;
        border-radius: var(--r-card);
        background-color: transparent;
        background-image: var(--glass-bg-solid), var(--glass-edge);
        background-origin: padding-box, padding-box, border-box;
        background-clip: padding-box, padding-box, border-box;
        box-shadow: var(--glass-shadow-float);

        opacity: 0;
        transform: translateY(-6px);
      /* display и overlay переключаются скачком, но в конце перехода: без
         allow-discrete список пропадал бы сразу, не доиграв уход. */
        transition:
            opacity 0.18s ease,
            transform 0.18s ease,
            display 0.18s allow-discrete,
            overlay 0.18s allow-discrete;
    }

    .fld__select:open::picker(select) {
        opacity: 1;
        transform: none;
    }

    @starting-style {
        .fld__select:open::picker(select) {
            opacity: 0;
            transform: translateY(-6px);
        }
    }

  /* Пункт. Высота 44 — цель касания пальцем. Кегль и левый край текста —
     как в поле (кромка 1.5 + отступ списка 6 + пункта 10 ≈ 1 + 16 у поля):
     выбранное переезжает из списка в поле, не прыгая ни в размере, ни
     вбок. */
    .fld__select option {
        gap: 12px;
        padding: 10px;
        border-radius: var(--r-btn);
        font-size: 16px;
        line-height: 24px;
        color: var(--c-text-strong);
        cursor: pointer;
        transition: background-color 0.18s ease, color 0.18s ease;
    }

    .fld__select option:hover {
        background: color-mix(in srgb, var(--c-text) 4%, transparent);
    }

  /* Фокус с клавиатуры — общей золотой обводкой из base.css, только внутрь
     пункта: снаружи её срезал бы край прокручиваемого списка. */
    .fld__select option:focus-visible { outline-offset: -2px; }

    .fld__select option:checked {
        background: color-mix(in srgb, var(--c-green) 10%, transparent);
        color: var(--c-green-text);
        font-weight: 700;
    }

  /* Галочка у выбранного — справа, та же, что в списке преимуществ наверху
     страницы: цвет не остаётся единственным признаком выбора. */
    .fld__select option::checkmark {
        order: 1;
        content: "";
        width: 16px;
        height: 16px;
        margin-inline-start: auto;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M13.333 4 6 11.333 2.667 8' stroke='%233d8f63' stroke-width='1.667' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 16px 16px;
    }

  /* Движение по просьбе системы гасит base.css — правилом на *, ::before и
     ::after. Список и стрелка — отдельные псевдоэлементы и под него не
     попадают, поэтому здесь их гасим сами. */
    @media (prefers-reduced-motion: reduce) {
        .fld__select::picker-icon,
        .fld__select::picker(select) { transition: none; }
    }
}

/* Ряд «код страны + телефон»: узкий селект и поле на остаток. */
.fld__row {
    display: grid;
    grid-template-columns: 108px minmax(0, 1fr);
    gap: 10px;
}

/* --- Флажок согласия ------------------------------------------------------
   Родной чекбокс спрятан, но остаётся рабочим: клавиатура, фокус и чтение
   скринридером идут по нему. Квадрат рисует ::before у подписи. */
.chk {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    cursor: pointer;
    font-size: 13px;
    line-height: 20px;
    color: var(--c-text-body);
}

.chk + .chk { margin-top: 12px; }

.chk__box {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.chk__mark {
    width: 20px;
    height: 20px;
    margin-top: 1px;
    border: 1px solid var(--c-line);
    border-radius: 5px;
    background: var(--c-surface);
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.chk__box:checked + .chk__mark {
    border-color: var(--c-green);
    background:
      url("../images/icons/check-green.svg") center / 12px no-repeat,
      var(--c-green-mist);
}

.chk__box:focus-visible + .chk__mark {
    outline: 2px solid var(--c-gold);
    outline-offset: 2px;
}

.chk a { color: var(--c-green-text); }

/* --- Кнопка во всю ширину ------------------------------------------------- */
.btn--block {
    display: flex;
    width: 100%;
}

/* ---------------------------------------------------------------
   css/checkout/00-checkout.css
   --------------------------------------------------------------- */
/* ==========================================================================
   tajiro — Оплата

   Одна узкая колонка, как в прототипе: счёт, поля, платёж, согласия.
   Оформление системное — токены, типографика и кнопки из базы, поля из
   css/shared/forms.css.

   ШАПКИ И ПОДВАЛА НЕТ, только знак и строка копирайта внизу. Это страница
   оплаты: любая навигация здесь уводит человека с неё, а привести его
   обратно нечем.

   ПОРЯДОК БЛОКОВ — из прототипа и на телефоне тот же: счёт стоит ВЫШЕ
   полей. Сначала видно, что сегодня не списывают ничего, и только потом
   просят вводить данные.
   ========================================================================== */

/* Ширина взята с чекаута-образца: 700 точек СОДЕРЖИМОГО. Считать надо
   именно содержимое: у образца колонка 700 без полей, а у нас поля есть —
   на телефоне 20, с 601 по 24. Поэтому максимум задан с их запасом, и
   строка внутри выходит те же 700, что там.

   Первый заход был 700 на всю колонку вместе с полями, и содержимое
   получалось 652 — страница выходила уже образца на полсотни точек. */
.ch {
    max-width: calc(700px + 40px);
    margin-inline: auto;
    padding: 24px 20px 40px;
}

body { background: var(--c-bg); }

/* Знак и заголовок по центру — как на чекауте образца. Колонка узкая, и
   выключка влево оставляла обоих висеть у её края. */
.ch__top {
    margin-bottom: 28px;
    text-align: center;
}

/* Заголовок ступенью ниже секционного: рядом с ним нет ни номера, ни
   надзаголовка, и держать он должен не секцию, а одну колонку. */
.ch__title {
  /* НЕ БОЛЬШЕ ДВУХ СТРОК на телефоне (правило сайта). Заголовок длинный, и до 430 он шёл в три-четыре строки.
     Кегль растёт с колонкой (ширина экрана минус поля 40) и упирается в
     прежний; 0.068 — отношение кегля к колонке, при котором заголовок ровно
     встаёт в две строки, с запасом 3 %. Проверено в эмуляции телефона на
     320–600 (17.09.2026). Интерлиньяж и разрядка — долями кегля. */
    font-size: min(28px, calc((100vw - 40px) * 0.068));
    line-height: 1.286;
    letter-spacing: -0.027em;
    text-align: center;
    text-wrap: balance;
}

/* Акцент — только цветом, без курсива (см. .h1 em в core/base.css): у
   Almarai синтетический наклон заходил в пробел, «trial of» слипалось. */
.ch__title em {
    font-style: normal;
    color: var(--c-green-text);
}

/* Кегли на этом экране на ступень крупнее, чем на лендинге: здесь не
   читают, а проверяют — что списывают, сколько и когда. Мелкая серая
   строка под названием позиции и приписки под счётом на телефоне
   разбирались с трудом, а это ровно те строки, из-за которых человек и
   останавливается. Подписи прописными и пилюля предложения остались как
   были: они метят разделы, а не несут смысл.

*/
/* --- Строки с галочками ------------------------------------------------------
   Один компонент на три места: обещание под заголовком, приписки под
   счётом и всё, что читается списком выгод. -------------------------------- */
.ch__perks { margin-top: 18px; }

.ch__perk {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 16px;
    line-height: 25px;
    color: var(--c-text-body);
}

.ch__perk + .ch__perk { margin-top: 8px; }

.ch__check {
    flex: none;
    margin-top: 4px;
}

.ch__market { margin-top: 24px; }

/* --- Счёт --------------------------------------------------------------------
   Плашка на песочном тинте, а не белая: в прототипе счёт тоже выделен
   заливкой, и это единственный блок страницы, который должен читаться
   отдельным объектом. Белым он слился бы с полями ниже. -------------------- */
.ch__order {
    margin-top: 26px;
    padding: 20px;
    border-radius: 18px;
    background: var(--c-bg-alt);
    box-shadow: inset 0 0 0 1px var(--c-line-soft);
}

/* Пилюля предложения — та же мятная заливка, что у меток на лендинге */
.ch__offer {
    display: inline-block;
    margin-bottom: 16px;
    padding: 5px 12px;
    border-radius: var(--r-pill);
    background: var(--c-green-mist);
    font-size: 11px;
    font-weight: 700;
    line-height: 15px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--c-green-text);
}

.ch__line {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding-block: 12px;
}

.ch__line + .ch__line { border-top: 1px solid var(--c-line-soft); }

.ch__line-name {
    font-size: 16px;
    font-weight: 700;
    line-height: 23px;
    color: var(--c-text);
}

.ch__line-note {
    margin-top: 2px;
    font-size: 14px;
    line-height: 21px;
    color: var(--c-text-muted);
}

.ch__hl { font-weight: 700; color: var(--c-green-text); }

/* Значения строк — дисплейным, как все числа проекта. Зелёным: в каждой
   строке стоит ноль, и зелёный здесь не украшение, а сам довод. */
.ch__line-val {
    flex: none;
    font-family: var(--f-display);
    font-size: 18px;
    font-weight: 600;
    line-height: 24px;
    letter-spacing: -0.3px;
    color: var(--c-green-text);
    white-space: nowrap;
}

/* Копейки мельче и тише: «AED 0.00» читается как ноль, а не как сумма из
   четырёх знаков. */
.ch__dec {
    font-size: 0.72em;
    opacity: 0.6;
}

.ch__today {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-top: 6px;
    padding-top: 16px;
    border-top: 1px solid var(--c-line);
}

.ch__today-label {
    font-size: 16px;
    font-weight: 700;
    color: var(--c-text);
}

.ch__today-sum {
    font-family: var(--f-display);
    font-size: 29px;
    font-weight: 600;
    line-height: 33px;
    letter-spacing: -0.6px;
    color: var(--c-green-text);
    white-space: nowrap;
}

.ch__after { margin-top: 16px; }

.ch__after .ch__perk {
    font-size: 14px;
    line-height: 22px;
    color: var(--c-text-muted);
}

/* --- Подписи разделов --------------------------------------------------------
   Прописными в разрядку, как надзаголовки секций лендинга, только без
   штриха: штрих там метит секцию, а здесь это части одной формы. -------- */
.ch__label {
    margin-top: 32px;
    margin-bottom: 14px;
    font-size: 12px;
    font-weight: 700;
    line-height: 16px;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    color: var(--c-text-muted);
}

.ch__label--pay { margin-top: 34px; }

/* --- Платёж ------------------------------------------------------------------ */
/* --- Кнопка Google Pay --------------------------------------------------------
   Собрана по виду настоящей, а не по нашей кнопочной шкале: чёрный фон,
   белая подпись и лок-ап «G Pay» — цветная G плюс слово Pay. Наши токены
   тут не работают, и это осознанно: кнопку способа оплаты узнают в лицо,
   а перекрашенную в кремово-зелёное не узнают вовсе.

   Скругление 6, как у мелких карточек системы: это единственное, чем она
   всё же садится на страницу. Высота общая с полями — 52. */
.ch__wallet {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 52px;
    padding-inline: 20px;
    border: 0;
    border-radius: var(--r-card);
    background: #000000;
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.1px;
    cursor: pointer;
    transition: background-color 0.18s ease;
}

.ch__wallet:hover { background: #1c1c1c; }

.ch__wallet-text { color: #ffffff; }

/* Лок-ап: знак и слово стоят вплотную, как в оригинале */
.ch__gpay {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Знак чуть выше базовой линии: у круглой G оптический центр выше
   геометрического, и вровень с текстом она кажется просевшей. */
.ch__gpay-g {
    flex: none;
    margin-top: -1px;
}

/* Слово Pay — дисплейным: Outfit геометрический и ближе всех к шрифту
   оригинального лок-апа из того, что вшито в проект. */
.ch__gpay-word {
    font-family: var(--f-display);
    font-size: 19px;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: -0.4px;
    color: #ffffff;
}

/* Вес выписан явно. У <b> по умолчанию font-weight: bolder — это НЕ «жирный»,
   а «на ступень жирнее родителя»: внутри кнопки на 700 он превращался в 900,
   а такого начертания у Almarai нет, и браузер жирнил его сам. Синтетика
   рядом с настоящими 700 и 800 видна сразу. */
.ch__wallet b { font-weight: 800; }

/* --- Способы оплаты ----------------------------------------------------------
   Подпись слева, знаки справа — раскладка прототипа. На телефоне ряд
   переносится, поэтому и подпись, и знаки прижаты к своим краям, а не
   растянуты по ширине. */
.ch__pays {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 20px;
}

.ch__pays-label {
    font-size: 13px;
    color: var(--c-text-muted);
}

/* На телефоне подпись уходит на свою строку, а знаки встают во всю
   ширину и расходятся по краям: иначе ряд кончался за полсотни пикселей
   до правого края и висел рваным краем под подписью.

   Шире 601 знаки прижимаются вправо — там они делят строку с подписью. */
/* ЗНАКИ ОПЛАТЫ ВСЕГДА В ОДНУ СТРОКУ.

   Их пять по 52 точки, между ними по шесть — ряду нужно 284. На экране в
   320 точек полоса выходит 280, и пятый знак сваливался вниз один: ряд
   платёжных марок с одинокой «tabby» под ним читается как ошибка вёрстки,
   а не как перенос.

   Переносить запрещено, вместо этого знаки ужимаются: ширина у них теперь
   не жёсткая, а доля свободного места с потолком в прежние 52. На 320 это
   даёт по 51 — глазом не отличить, а ряд цел. */
.ch__marks {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    width: 100%;
    gap: 6px;
}

/* Плашка под знак — ОДНОГО размера для всех, как у платёжных бейджей на
   настоящих чекаутах. Знаки внутри разной пропорции, и выравнивать их по
   высоте нельзя: у Visa 3:1, у Mastercard 1.3:1, у AMEX квадрат. По общей
   высоте словесные знаки распухают, по общей ширине — тают значки.

   Поэтому ровняем по оптическому весу: словесные знаки упираются в ширину
   плашки, значки — в высоту. Так каждый занимает примерно одну площадь, и
   ряд читается ровным. */
.ch__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  /* Ширина остаётся жёсткой — 52, как было, — и добавлено только право
     ужиматься, когда полоса уже суммы. Это и нужно: на широком экране
     знаки прежние, на узком телефоне садятся до 51 и ряд не рвётся.

     Ширину пробовал заменить на flex-basis — нельзя. Полоса .ch__marks
     сама шириной по содержимому, а её содержимое при basis считается по
     картинке внутри знака, не по заданным 52: полоса схлопывалась до 217,
     и знаки садились до 39 уже на десктопе.

     min-width: 0 обязателен: без него флекс-элемент не ужимается меньше
     своего содержимого, и запрет переноса выдавил бы ряд за край. */
    width: 52px;
    min-width: 0;
    height: 28px;
    border: 1px solid var(--c-line-soft);
    border-radius: 5px;
    background: var(--c-surface);
}

.ch__mark-img {
    display: block;
    max-width: 100%;
    object-fit: contain;
}

/* Словесные: Visa, mada, Tabby — держим по ширине */
.ch__mark-img--word {
    width: 40px;
    height: auto;
    max-height: 16px;
}

/* Значки: Mastercard — держим по высоте. 20px, а не 18: при общей высоте
   со словесными знаками он занимал заметно меньшую площадь и в ряду
   читался мельче соседей. */
.ch__mark-img--sign {
    width: auto;
    height: 20px;
}

/* Окно в полосе знаков. Полоса образца — 306×30, шесть знаков по ~47px;
   AMEX начинается на 104-м пикселе. Уменьшаем полосу до 20px высоты
   (коэффициент 20/30) и сдвигаем так, чтобы в окне остался только он:
   104 × 0.667 = 69.3. Остальные знаки полосы выходят за окно и не видны.

   Так вырезать проще и точнее, чем резать файл: при замене полосы
   меняются два числа, а не картинка. */
.ch__mark-crop {
    display: block;
    width: 31px;
    height: 20px;
    background: url("../images/checkout/cards.webp") -69.3px 0 / 204px 20px no-repeat;
}

/* У Tabby знак нарисован currentColor — цвет задаём мы. Тёмный
   нейтральный, тот же, что у надписи в знаке mada: иначе он один в ряду
   красился бы по-своему. */
.ch__mark--tabby { color: #27292d; }

/* --- Поля карты ---------------------------------------------------------------
   РАЗМЕРЫ И СТРУКТУРА СНЯТЫ С ОБРАЗЦА, оформление своё.

   С образца: четыре поля, каждое 60 точек высотой, между ними 20; нижние
   два стоят рядом и делят ширину пополам, зазор между ними те же 20. Весь
   блок выходит 240 в высоту — как там.

   Своё: цвета, скругления, начертание.

   ПОМЕТКИ «ЗАГЛУШКА» ЗДЕСЬ БОЛЬШЕ НЕТ — снята по прямой правке. Рамки с
   меткой «Stripe Elements» тоже. Из этого следует ровно одно, и это надо
   знать тому, кто возьмёт страницу дальше: на вид блок неотличим от
   рабочей формы карты, а полей на самом деле нет. Пока Stripe не
   подключён, страницу нельзя показывать никому, кто может принять её за
   настоящую оплату и начать вводить номер: он никуда не уйдёт.

   Подключение описано в заметке внизу pages/checkout.html. */
/* --- Поля почты и телефона ------------------------------------------------
   Приведены к карточным: те же 60 в высоту, тот же отступ 16 и тот же кегль.
   До этого они оставались прежними, 52 и 16, и на одной странице стояли два
   разных набора полей - это читалось как недоделка, а не как замысел.

   Правила живут ЗДЕСЬ и прижаты к .ch намеренно: сами классы описаны в
   shared/forms.css, а его подключает ещё и страница входа, где поля должны
   остаться прежними.
   -------------------------------------------------------------------------- */
/* Кегль 16, а не 15, как у образца. Две причины, обе не про вкус. Первая:
   на этом экране весь текст поднят на ступень, и поле, в которое вводят,
   не может быть мельче строк, которые рядом просто читают. Вторая: Safari
   на телефоне приближает страницу при фокусе на поле с кеглем меньше 16 —
   и обратно уже не отъезжает. Высота 60 и отступ 16 остаются карточными. */
.ch .fld__input,
.ch .fld__select {
    height: 60px;
    padding-inline: 16px;
    font-size: 16px;
    line-height: 23px;
}

/* Своя стрелка селекта нарисована фоном - отодвигаем вместе с отступом. */
.ch .fld__select {
    padding-right: 42px;
    background-position: right 16px center;
}

/* Подписи над полями формы сняты: у образца их нет, подсказка стоит внутри
   поля. Прячем по-зрячему, но оставляем экранному диктору - без подписи поле
   осталось бы безымянным. Выбор страны стоит ВНЕ формы и подпись сохраняет:
   такого поля у образца нет вовсе, а без неё список читается как «ОАЭ» без
   объяснения, при чём он здесь. */
.ch__form .fld__label {
    position: absolute;
    overflow: hidden;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Код страны и номер - одна коробка, как в образце. */
/* Колонка кода тянется с шириной колонки, без медиазапросов и без скачка
   на 600/601: на телефоне 96 (на «+971» со стрелкой хватает), с ~555 px
   колонки — прежние 155 с образца. На жёстких 155 полю номера на 320–375
   не хватало места, и подсказку «Your phone (optional)» срезало. */
.ch__form .fld__row {
    grid-template-columns: clamp(96px, 28%, 155px) minmax(0, 1fr);
    gap: 0;
}

.ch__form .fld__row .fld__select { border-radius: var(--r-card) 0 0 var(--r-card); }

/* Номер наезжает на код ровно на толщину кромки: иначе на стыке вышла бы
   двойная линия в два пикселя. */
.ch__form .fld__row .fld__input {
    margin-left: -1px;
    padding-right: 12px;               /* правый отступ только режет подсказку */
    border-radius: 0 var(--r-card) var(--r-card) 0;
}

/* В фокусе поднимаем соседа над кромкой, чтобы зелёная рамка не оказалась
   перерезанной чужой серой линией. */
.ch__form .fld__row .fld__select:focus,
.ch__form .fld__row .fld__input:focus {
    position: relative;
    z-index: 1;
}

.ch__stripe { margin-top: 16px; }

/* Высота и зазор — с образца: 60 и 20. */
.ch__fake {
    display: flex;
    align-items: center;
    height: 60px;
    padding: 0 16px;
    border: 1px solid var(--c-line-soft);
    border-radius: var(--r-card);
    background: var(--c-surface);
    font-size: 16px;
    line-height: 23px;
    color: var(--c-text-muted);
}

.ch__fake + .ch__fake { margin-top: 20px; }

/* Нижняя пара делит ширину пополам с тем же зазором в 20 — как в образце,
   где при ширине 700 каждое поле выходит 340. */
.ch__fake-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 20px;
}

.ch__fake-row .ch__fake + .ch__fake { margin-top: 0; }

.ch__safe {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 18px;
    font-size: 14px;
    line-height: 21px;
    color: var(--c-text-muted);
}

.ch__safe b { color: var(--c-text); }

/* Замок по строке, а не по её коробке. Файл 26×26, рисунок занимает в нём
   почти всё поле, поэтому при высоте 20px (высота строки) он выходил
   заметно крупнее самих букв: у текста в 13px прописные всего девять
   пикселей. 14px даёт рисунок примерно в рост прописных.

   Отступ сверху 2px, а не 3 — геометрическая середина строки здесь не
   работает. Во-первых, у строки сверху и снизу поровну межстрочного
   интервала, но буквы в ней сидят выше середины коробки: низ занимают
   выносные, которых в этой фразе почти нет. Во-вторых, у самого замка
   масса внизу — дужка тонкая, корпус сплошной, — и по геометрии он
   кажется просевшим. Пиксель вверх снимает оба.

   Центрируем по ПЕРВОЙ строке, а не по всему абзацу: на телефоне он в две
   строки, и центрирование по нему увело бы замок в середину. */
.ch__lock {
    flex: none;
    height: 14px;
    width: auto;
    margin-top: 2px;
}

.ch__pay {
    justify-content: center;
    margin-top: 22px;
    height: 56px;
    font-size: 16px;
}

/* Подсказка под кнопкой. Видна, пока согласия не отмечены; скрывает её
   js/checkout/consent.js атрибутом hidden. */
.ch__gate {
    margin-top: 12px;
    font-size: 14px;
    line-height: 21px;
    text-align: center;
    color: var(--c-gold);
}

/* Выключенная кнопка: серая и не нажимается. Приём образца — там она тоже
   ждёт согласия и до него не притворяется рабочей. */
.ch__pay:disabled {
    background: var(--c-line);
    color: var(--c-text-muted);
    cursor: not-allowed;
    box-shadow: none;
}

.ch__consents { margin-top: 16px; }

/* Согласия на ступень крупнее общих 13: здесь цена, дата списания и
   авто-продление — строки, ради которых человек останавливается. Как
   .ch__gate и .ch__safe — 14. */
.ch .chk {
    font-size: 14px;
    line-height: 21px;
}

/* Дату конца пробного периода не рвём: «6 / October» читается как
   ошибка. Она короткая (~100 px) и на 320 помещается в строку. */
.ch [data-date] { white-space: nowrap; }

/* --- Подвал страницы --------------------------------------------------------- */
.ch__foot {
    margin-top: 30px;
    padding-top: 22px;
    border-top: 1px solid var(--c-line-soft);
}

/* Подвал по центру: под ним ничего нет, и выключка влево оставляла
   строки висеть у края колонки. Знак и текст центрируются одним блоком,
   поэтому иконка едет вместе со строкой, а не стоит отдельно слева. */
/* Печать SSL — файл образца, один в один. Раньше здесь была строка текста
   с иконкой: печать узнаётся как печать, а набранная словами — нет. */
.ch__ssl {
    display: block;
    height: 38px;
    width: auto;
    margin-inline: auto;
}

.ch__copy {
    margin-top: 14px;
    font-size: 13px;
    text-align: center;
    color: var(--c-text-muted);
}


/* --- Адаптив ------------------------------------------------------------------
   Колонка остаётся одна на всех ширинах. Двух колонок у оплаты нет
   намеренно: счёт сбоку читается справкой, а он здесь главный довод —
   «сегодня с вас не спишут ничего», — и стоять должен в потоке чтения. */
@media (min-width: 601px) {
  .ch {
    max-width: calc(700px + 48px);
    padding: 32px 24px 56px;
  }

  .ch__marks {
    width: auto;
    justify-content: flex-end;
  }

  .ch__title { font-size: 32px; line-height: 40px; letter-spacing: -0.9px; }
  .ch__order { padding: 24px; }
  .ch__today-sum { font-size: 32px; line-height: 36px; }
}

@media (min-width: 901px) {
  .ch { padding: 44px 24px 72px; }

  /* Обещания в ряд, как у образца: три коротких строки столбиком съедали
     экран перед счётом, а счёт здесь главный довод. Ряд — только с 901:
     трём пунктам в строку нужно ~585 px колонки, а на 601–650 её 538–590,
     и флекс рвал каждый пункт на две строки. До 901 столбик, как на
     телефоне, без скачка на 600/601. */
  .ch__perks {
    display: flex;
    justify-content: space-between;
    gap: 16px;
  }

  .ch__perk + .ch__perk { margin-top: 0; }
  .ch__perk { font-size: 15px; }
  .ch__title { font-size: 36px; line-height: 44px; letter-spacing: -1px; }
}

/* ---------------------------------------------------------------
   tools/wp/checkout-form.css
   --------------------------------------------------------------- */
/* ==========================================================================
   Оплата: то, что относится к Stripe, и только это.

   Дописывается портом в конец pages/checkout/css/style.css.

   Размеров здесь НЕТ. Коробки полей описаны в источнике
   (src/css/checkout/00-checkout.css, классы .ch__stripe, .ch__fake,
   .ch__fake-row), и разметка порта пользуется теми же классами. В прототипе
   текст в этих коробках нарисован, здесь его рисует Stripe внутри iframe -
   меняется начинка, а не оформление.

   Остаётся ровно то, чего у нарисованного блока быть не могло:

     · состояния, которые Stripe вешает классами на коробку (фокус, ошибка);
     · подсказка на время, пока iframe ещё не смонтирован;
     · место под кнопку кошелька;
     · строка отказа под полями.
   ========================================================================== */

.ch__card-field .StripeElement,
.ch__card-field > div {
  width: 100%;
}

/* Подсказка на время загрузки. Текст трёх карточных полей рисует Stripe, а
   его iframe появляется не сразу - до этого коробки стояли бы пустыми, хотя
   соседние поля свои подсказки уже показывают. Класс .StripeElement ставит
   сам Stripe при монтировании, поэтому «ещё не смонтирован» читается как его
   отсутствие. Кегль и цвет наследуются от .ch__fake, подмена проходит без
   скачка. */
.ch__card-field:not(.StripeElement)::before {
  content: attr(data-placeholder);
}

/* Фокус и ошибку Stripe помечает своими классами на той же коробке, у поля
   с именем есть :focus. Оба состояния ведут себя одинаково: кромка зеленеет,
   вокруг мягкое кольцо. */
.ch__card-field.StripeElement--focus,
.ch__card-name:focus {
  outline: none;
  border-color: var(--c-green);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-green) 16%, transparent);
}

.ch__card-field.StripeElement--invalid {
  border-color: #b4342b;
}

/* Имя на карте - единственное настоящее поле ввода в блоке: соседи это div и
   p, которые тянутся на всю ширину сами, а input держит свою по умолчанию
   (около двадцати знаков). В источнике этого правила нет и быть не могло -
   там на этом месте нарисованный абзац. Здесь же ему нужны и сбросы, и свой
   цвет текста, иначе он остался бы приглушённым, как подсказка соседей. */
.ch__card-name {
  width: 100%;
  appearance: none;
  font-family: inherit;
  color: var(--c-text);
}

.ch__card-name::placeholder {
  color: var(--c-text-muted);
}

/* Отказ показываем под полями и тем же красным, что и невалидная кромка. */
.ch__card-error {
  margin-top: 10px;
  font-size: 13px;
  line-height: 20px;
  color: #b4342b;
}

/* Кошелёк: контейнер под родную кнопку Apple Pay или Google Pay. Скрыт,
   пока Stripe не сказал, что способ на устройстве доступен. */
.ch__wallet-mount {
  margin-bottom: 14px;
}

.ch__wallet-mount[hidden] {
  display: none;
}
/* ========================= /PAGE STYLES ========================== */

/* ========================= FOOTER STYLES ========================= */
/* Переопределения подвала для этой страницы. */
/* ========================= /FOOTER STYLES ======================== */