/* Оформление заказа — стили страницы (скоуп order-payment.html). Главная и общие файлы заморожены: components.css/tokens.css не трогаем. Наряд «Дизайн-72» (санкция [С] 18.10 20:30): страница переведена на макеты «Заказ v3» от 18.10.2026. Файл состоит из трёх частей: 1) @font-face Inter 600 — глобальный, нужен обеим частям; 2) прежние стили v2 — ЗАПЕРТЫ на экран счёта (#opInvSec). Состояния n18…n22 верстаются этапом 3 наряда, до тех пор экран счёта живёт на прежнем оформлении. На форму заказа эти правила больше не действуют: имена-зацепки JS (.op-field, .op-tariff, …) на элементах остались, но вид им задаёт только блок v3 ниже; 3) блок v3 — перенос стилей эталона (tools/v3css.py) и тонкий слой поверх него для состояний, которые рисует JS. */ /* ——— Inter Semi Bold (600) ——————————————————————————————— Макеты «Заказ v2» (наряд «Дизайн-56/57») требуют Semi Bold у подписей, названий тарифов, способов оплаты, «Итого» и кнопок. В tokens.css (FROZEN) подключены только 400 и 700, поэтому @font-face живёт здесь. Файл — официальный Inter 3.19 (github.com/rsms/inter, релиз v3.19, «Inter Desktop/Inter-SemiBold.otf»), тот же подсет, что у 400/700: те же 437 кодовых точек и те же фичи (kern, calt, ccmp) — сборка `python3 -m fontTools.subset … --layout-features="kern,calt,ccmp" --flavor=woff2`. Лицензия SIL OFL — styles/fonts/LICENSE-Inter.txt (та же, что в релизе, файл совпадает побайтно). */ @font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap; src:url(/styles/fonts/inter-600.woff2) format("woff2")} /* ——— 2) Прежние стили v2, заперты на экран счёта —————————— Снимет этап 3 наряда «Дизайн-72», когда экран счёта (n18…n22) будет свёрстан по новым макетам. Обёртка #opInvSec:is(…) / #opInvSec :is(…) поставлена механически, сами селекторы и значения не менялись. */ /* Оформление заказа — стили страницы (скоуп order-payment.html). Главная и общие файлы заморожены: components.css/tokens.css не трогаем. Значения — замер по SVG и JSON-экспорту Figma «Order 1 Payment — Desktop 1440 / Tablet 768 / Mobile 390». */ /* ——— Шапка оформления заказа: логотип + «Безопасная оплата» ——————— */ #opInvSec:is(.op-secure),#opInvSec :is(.op-secure){display:inline-flex;align-items:center;gap:9px;margin-left:auto; font-size:14px;line-height:17px;color:var(--gray)} #opInvSec:is(.op-secure__icon),#opInvSec :is(.op-secure__icon){flex:0 0 auto;width:11px;height:15px;color:var(--gray)} /* ——— Полотно страницы ——————————————————————————————————— */ /* Отбивка H1 от шапки — по макетам «Заказ v2»: 61,8 / 46,6 / 27,0 от низа шапки (84 / 70 / 62), а не общий --section-y 104/80/56. */ #opInvSec:is(.op__sec),#opInvSec :is(.op__sec){background:var(--bg-soft);padding:61.8px 0 97px} /* Макет «Заказ v2» (наряд «Дизайн-56»): карточка 840 (300…1140 на 1440), на 768 — 704 (32…736), на 390 — 358 (16…374). Поля контейнера на этой странице свои, у .container их шире; --gutter из tokens.css заморожен. */ #opInvSec:is(.op__in),#opInvSec :is(.op__in){max-width:840px;padding-left:0;padding-right:0} /* Коробка 560: в макете строка 1 — «Оформление заказа.» (краска 553,5), серая часть переносится сама, без
(DESIGN_RULES, [С] 12.10). Трекинг −0,0299em снят по пикселям PNG макета (наряд «Дизайн-60», §2): на 56/48/34 px краска строк сходится с макетом в 0,0…0,5 px. */ #opInvSec:is(.op__h1),#opInvSec :is(.op__h1){font-size:56px;line-height:60px;font-weight:700;color:var(--ink); max-width:560px;letter-spacing:-.0299em} /* Отбивка H1 → первая карточка: 40 / 42 / 32 по макетам «Заказ v2» (на 768 общий --gap-head оказался на 12 px меньше макета). */ #opInvSec:is(.op__form),#opInvSec :is(.op__form){display:flex;flex-direction:column;gap:var(--gap);margin-top:var(--gap-head)} /* ——— Карточка-секция формы ——————————————————————————————— */ /* Макеты «Заказ v2»: заголовок карточки в 45,8 от её верха, низ карточки в 43 от последней строки; поля по бокам 48 (контент 744 в 840). */ #opInvSec:is(.op-card),#opInvSec :is(.op-card){background:var(--bg);border-radius:28px;padding:45.8px 48px 43px} #opInvSec:is(.op-card__h),#opInvSec :is(.op-card__h){font-size:28px;line-height:34px;font-weight:700;color:var(--ink)} #opInvSec:is(.op-card__lead),#opInvSec :is(.op-card__lead){margin-top:7px;font-size:var(--fs-body);line-height:var(--lh-body);color:var(--gray-2)} /* ——— 01 · Тарифы —————————————————————————————————————— */ #opInvSec:is(.op-tariffs),#opInvSec :is(.op-tariffs){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:19px} #opInvSec:is(.op-tariff),#opInvSec :is(.op-tariff){display:block;border-radius:20px;background:var(--bg-soft);padding:21px 20px 21px 21px;cursor:pointer} #opInvSec:is(.op-tariff--on),#opInvSec :is(.op-tariff--on){background:var(--blue-tint)} #opInvSec:is(.op-tariff__top),#opInvSec :is(.op-tariff__top){display:flex;align-items:center;gap:10px} #opInvSec:is(.op-tariff__name),#opInvSec :is(.op-tariff__name){font-size:15px;line-height:20px;font-weight:600;color:var(--ink)} #opInvSec:is(.op-tariff__radio),#opInvSec :is(.op-tariff__radio){appearance:none;-webkit-appearance:none;flex:0 0 auto;margin:0 0 0 auto; width:22px;height:22px;border-radius:50%;background:var(--bg); box-shadow:inset 0 0 0 1.5px var(--line-2); display:flex;align-items:center;justify-content:center} /* [С] 14.10 21:03: кольцо выбранного — той же толщины 1.5px, что у серого, точка меньше (7px вместо 8) и центрируется флексом, а не margin. */ #opInvSec:is(.op-tariff__radio:checked),#opInvSec :is(.op-tariff__radio:checked){box-shadow:inset 0 0 0 1.5px var(--blue)} #opInvSec:is(.op-tariff__radio:checked::after),#opInvSec :is(.op-tariff__radio:checked::after){content:"";display:block;width:8px;height:8px; border-radius:50%;background:var(--blue)} #opInvSec:is(.op-tariff__price),#opInvSec :is(.op-tariff__price){display:block;margin-top:4px;font-size:28px;line-height:34px; font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums} #opInvSec:is(.op-tariff--on .op-tariff__price),#opInvSec :is(.op-tariff--on .op-tariff__price){color:var(--blue)} #opInvSec:is(.op-tariff__desc),#opInvSec :is(.op-tariff__desc){display:block;margin-top:8px;font-size:15px;line-height:20px;color:var(--gray)} #opInvSec:is(.op-upsell),#opInvSec :is(.op-upsell){margin-top:16px;font-size:15px;line-height:20px;color:var(--gray)} #opInvSec:is(.op-upsell__link),#opInvSec :is(.op-upsell__link){margin-left:3px;font-size:14px;line-height:20px;vertical-align:baseline} #opInvSec:is(.op-upsell__link::after),#opInvSec :is(.op-upsell__link::after){width:12px;height:10px} /* ——— Поля ввода ———————————————————————————————————————— */ /* Макет «Заказ v2 · 01 Пусто»: два поля по 364 с зазором 16 (348 и 728). */ #opInvSec:is(.op-fields),#opInvSec :is(.op-fields){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px;row-gap:20px;margin-top:23px} #opInvSec:is(.op-field),#opInvSec :is(.op-field){display:flex;flex-direction:column} #opInvSec:is(.op-field__label),#opInvSec :is(.op-field__label){display:flex;align-items:baseline;font-size:15px;line-height:20px;font-weight:600;color:var(--ink)} #opInvSec:is(.op-field__hint),#opInvSec :is(.op-field__hint){margin-left:auto;font-size:15px;line-height:20px;font-weight:400;color:var(--gray)} #opInvSec:is(.op-field__input),#opInvSec :is(.op-field__input){height:56px;margin-top:8px;padding:0 19px;border:0;border-radius:14px; background:var(--bg-soft);font-family:var(--font);font-size:17px;line-height:24px;color:var(--ink)} #opInvSec:is(.op-field__input::placeholder),#opInvSec :is(.op-field__input::placeholder){color:var(--gray-2);opacity:1} #opInvSec:is(.op-field__note),#opInvSec :is(.op-field__note){margin-top:10px;font-size:15px;line-height:20px;color:var(--gray)} /* Фокус поля — как в макете «Заказ v2 · 13»: белая заливка, обводка 2 px #0A5CFF и ореол 3 px #EAF1FF снаружи. */ #opInvSec:is(.op-field__input:focus),#opInvSec :is(.op-field__input:focus){outline:0;background:var(--bg); box-shadow:inset 0 0 0 2px var(--blue),0 0 0 3px var(--blue-tint)} /* ——— 03 · Вопросы ————————————————————————————————————— */ #opInvSec:is(.op-rules),#opInvSec :is(.op-rules){display:flex;flex-wrap:wrap;gap:27px;margin-top:15px;font-size:14px;line-height:20px;color:var(--gray)} #opInvSec:is(.op-rules li),#opInvSec :is(.op-rules li){display:flex;align-items:center;gap:8px} #opInvSec:is(.op-rules .i-check),#opInvSec :is(.op-rules .i-check){width:12px;height:8px} /* ——— Мастер «запроса» (наряд «Дизайн-45», макеты «Вопросы_логика»): вместо пяти свободных вопросов — 3 обязательных + 1 необязательный под-вопрос, из которых собирается одна фраза запроса; запрос можно подтвердить, изменить вручную, пересобрать и — за доплату — добавить второй. Классы новые (компонента такого в components.css нет). */ #opInvSec:is(.op-qz),#opInvSec :is(.op-qz){margin-top:23px} /* Запрос 2+ и «Добавить запрос» — отдельные карточки .op-card ниже, не внутри карточки «По какому вопросу…» (макеты «Вопросы_логика»). */ #opInvSec:is(.op-qzExtra),#opInvSec :is(.op-qzExtra){display:flex;flex-direction:column;gap:20px;margin-top:20px} #opInvSec:is(.op-qzExtra:empty),#opInvSec :is(.op-qzExtra:empty){display:none} #opInvSec:is(.op-qi__head),#opInvSec :is(.op-qi__head){display:flex;align-items:center;gap:10px;margin-bottom:4px} #opInvSec:is(.op-qi__name),#opInvSec :is(.op-qi__name){font-size:var(--fs-title-m);line-height:var(--lh-title-m);font-weight:700;color:var(--ink)} #opInvSec:is(.op-qi__price),#opInvSec :is(.op-qi__price){margin-left:auto;font-size:var(--fs-small);line-height:20px;font-weight:700;color:var(--ink)} #opInvSec:is(.op-qi__chip),#opInvSec :is(.op-qi__chip){font-size:var(--fs-caption);line-height:16px;font-weight:700;color:var(--gray); padding:3px 9px;border-radius:999px;background:var(--bg-soft)} #opInvSec:is(.op-qi__chip--ok),#opInvSec :is(.op-qi__chip--ok){color:var(--op-ok);background:var(--op-ok-soft)} #opInvSec:is(.op-qi__del),#opInvSec :is(.op-qi__del){margin-left:8px;font-size:var(--fs-small);line-height:20px;font-weight:400;color:var(--gray)} #opInvSec:is(.op-qi__del::after),#opInvSec :is(.op-qi__del::after),#opInvSec:is(.op-qz__add::after),#opInvSec :is(.op-qz__add::after){content:none} #opInvSec:is(.op-qi__lead2),#opInvSec :is(.op-qi__lead2){margin-bottom:21px;font-size:var(--fs-body);line-height:var(--lh-body);color:var(--gray)} /* Макеты «Заказ v2 · 06…11»: от низа последнего пояснения до линии 40,25, от линии до заголовка «Предложенный запрос» — 29. */ #opInvSec:is(.op-qi__sep),#opInvSec :is(.op-qi__sep){height:1px;margin-top:40.25px;background:var(--line)} #opInvSec:is(.op-qi__resultHead),#opInvSec :is(.op-qi__resultHead){display:flex;align-items:center;justify-content:space-between;gap:12px; margin-top:29px;margin-bottom:0} #opInvSec:is(.op-qi__resultName),#opInvSec :is(.op-qi__resultName){font-size:var(--fs-body);line-height:var(--lh-body);font-weight:700;color:var(--ink)} /* ——— Вопросы запроса по макету «Заказ v2 · 01 Пусто» ———————— (наряд «Дизайн-57»). Кружков-номеров и «?»-подсказок в макете нет; вопрос — это заголовок 19/28 Semi Bold, пояснение 15/20 под ним, поле во всю ширину карточки и строка примеров. Шаг между вопросами 36 (чип 1211 → заголовок 1254,0 по замеру узлов на 1440). */ #opInvSec:is(.op-sqs),#opInvSec :is(.op-sqs){display:flex;flex-direction:column;gap:36px;margin-top:38px} #opInvSec:is(.op-sq),#opInvSec :is(.op-sq){display:flex;flex-direction:column;align-items:flex-start;position:relative} #opInvSec:is(.op-sq__label),#opInvSec :is(.op-sq__label){font-size:19px;line-height:28px;font-weight:600;color:var(--ink)} #opInvSec:is(.op-sq__desc),#opInvSec :is(.op-sq__desc){margin-top:2px;font-size:15px;line-height:20px;color:var(--gray-2)} #opInvSec:is(.op-sq__input),#opInvSec :is(.op-sq__input){width:100%;margin-top:15px} #opInvSec:is(.op-sq__hint),#opInvSec :is(.op-sq__hint){margin-top:12.25px;font-size:15px;line-height:20px;color:var(--gray-2)} /* Подпись под полем города — в 8,75 от поля; подпись под блоками «Где вы?» (режим «Онлайн») — в 12,25 от блока. Одни и те же значения на трёх ширинах. */ #opInvSec:is(.op-field__input+.op-sq__hint),#opInvSec :is(.op-field__input+.op-sq__hint){margin-top:8.75px} #opInvSec:is(.op-sq__hint--both),#opInvSec :is(.op-sq__hint--both){margin-top:15px} #opInvSec:is(.op-sq .op-field__note),#opInvSec :is(.op-sq .op-field__note){margin-top:11.2px;font-size:15px;line-height:20px;color:var(--gray-2)} #opInvSec:is(.op-sq .op-field__note b),#opInvSec :is(.op-sq .op-field__note b){color:var(--ink)} #opInvSec:is(.op-sq .op-field__err),#opInvSec :is(.op-sq .op-field__err){margin-top:6.7px} /* Ошибка под блоками «Где вы?» — в 8,95 от блока (под полем ввода 6,7), а строка примеров под такой ошибкой — в 8,1 (без ошибки она в 10…12). */ #opInvSec:is(.op-places+.op-field__err),#opInvSec :is(.op-places+.op-field__err){margin-top:8.95px} /* «Где вы?» — два радио-блока 366×134 вместо поля города (макет 01). На 1440/768 плитка-иконка стоит над подписью, на 390 — слева от неё (блок 318×74), как в макете «Mobile 390». */ #opInvSec:is(.op-places),#opInvSec :is(.op-places){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px; width:100%;margin-top:16px} #opInvSec:is(.op-place),#opInvSec :is(.op-place){position:relative;min-height:134px;padding:20px 20px 0 22px;border-radius:20px; background:var(--bg-soft);cursor:pointer} #opInvSec:is(.op-place--on),#opInvSec :is(.op-place--on){background:var(--blue-tint)} #opInvSec:is(.op-place__tile),#opInvSec :is(.op-place__tile){display:flex;align-items:center;justify-content:center; width:36px;height:36px;border-radius:12px;background:var(--bg);color:var(--ink)} #opInvSec:is(.op-place__icon),#opInvSec :is(.op-place__icon){display:block;width:auto;height:auto} #opInvSec:is(.op-place__name),#opInvSec :is(.op-place__name){display:block;margin-top:13px;font-size:15px;line-height:20px; font-weight:600;color:var(--ink)} #opInvSec:is(.op-place--on .op-place__name),#opInvSec :is(.op-place--on .op-place__name){color:var(--blue)} #opInvSec:is(.op-place__desc),#opInvSec :is(.op-place__desc){display:block;margin-top:4px;font-size:15px;line-height:20px;color:var(--gray-2)} #opInvSec:is(.op-place__radio),#opInvSec :is(.op-place__radio){position:absolute;top:22px;right:20px;width:22px;height:22px;border-radius:50%; background:var(--bg);box-shadow:inset 0 0 0 1.5px var(--line-2); display:flex;align-items:center;justify-content:center} #opInvSec:is(.op-place--on .op-place__radio),#opInvSec :is(.op-place--on .op-place__radio){background:var(--blue);box-shadow:none} #opInvSec:is(.op-place--on .op-place__radio::after),#opInvSec :is(.op-place--on .op-place__radio::after){content:"";display:block;width:8px;height:8px; border-radius:50%;background:var(--bg)} #opInvSec:is(.op-place__fieldLabel),#opInvSec :is(.op-place__fieldLabel){display:block;margin-top:16px;font-size:15px;line-height:20px; font-weight:600;color:var(--ink)} #opInvSec:is(.op-place__field),#opInvSec :is(.op-place__field){margin-top:8px} #opInvSec:is(.op-sq--place .op-eg),#opInvSec :is(.op-sq--place .op-eg){margin-top:10px} #opInvSec:is(.op-qi__submit),#opInvSec :is(.op-qi__submit){margin-top:42px;width:100%;height:56px} #opInvSec:is(.op-qi__submitNote),#opInvSec :is(.op-qi__submitNote){margin-top:11.8px;text-align:center;font-size:var(--fs-caption);line-height:18px;color:var(--gray)} #opInvSec:is(.op-qi__submitNote--err),#opInvSec :is(.op-qi__submitNote--err){color:var(--op-red)} #opInvSec:is(.op-qi__assist),#opInvSec :is(.op-qi__assist){margin-top:10px;text-align:center} #opInvSec:is(.op-qi__assist button),#opInvSec :is(.op-qi__assist button){font-size:var(--fs-small);line-height:20px} #opInvSec:is(.op-qi__assistMsg),#opInvSec :is(.op-qi__assistMsg){margin-top:8px;text-align:center;font-size:var(--fs-small);line-height:20px;color:var(--op-red)} #opInvSec:is(.op-qi__submit--busy),#opInvSec :is(.op-qi__submit--busy){display:flex;align-items:center;justify-content:center;gap:10px} #opInvSec:is(.op-qi__submit--busy b),#opInvSec :is(.op-qi__submit--busy b){font-weight:700} #opInvSec:is(.op-qi__busy),#opInvSec :is(.op-qi__busy){margin-top:40.25px;padding-top:29px;border-top:1px solid var(--line)} #opInvSec:is(.op-qi__busy .op-qi__resultHead),#opInvSec :is(.op-qi__busy .op-qi__resultHead){margin-top:0;margin-bottom:0} #opInvSec:is(.op-qi__busy .op-qi__skel),#opInvSec :is(.op-qi__busy .op-qi__skel){margin-top:12px} #opInvSec:is(.op-qi__spin),#opInvSec :is(.op-qi__spin){flex:0 0 auto;width:20px;height:20px;border-radius:50%; border:2.5px solid var(--line-2);border-top-color:var(--blue); animation:op-spin .8s linear infinite} #opInvSec:is(.op-qi__submit--busy .op-qi__spin),#opInvSec :is(.op-qi__submit--busy .op-qi__spin){border-color:rgba(255,255,255,.4);border-top-color:var(--bg)} #opInvSec:is(.op-qi__spin--lg),#opInvSec :is(.op-qi__spin--lg){width:24px;height:24px} @keyframes op-spin{ #opInvSec:is(to),#opInvSec :is(to){transform:rotate(360deg)} } /* Скелетон кадра «06 Составляем» (наряд «Дизайн-62»): блок 744/632/318 × 88 #F5F5F7, внутри ДВЕ полосы 12 px #E8E8ED от левого края +22, первая в 30 от верха, вторая через 14; ширины полос 73,4 % и 49,0 % от блока (одни и те же доли на всех трёх ширинах). Третьей полосы и строки со спиннером «Подбираем формулировку…» в макете нет. */ #opInvSec:is(.op-qi__skel),#opInvSec :is(.op-qi__skel){height:88px;border-radius:14px;background:var(--bg-soft);overflow:hidden} #opInvSec:is(.op-qi__skelBar),#opInvSec :is(.op-qi__skelBar){display:block;height:12px;margin-left:22px;border-radius:6px;background:var(--line)} #opInvSec:is(.op-qi__skelBar--1),#opInvSec :is(.op-qi__skelBar--1){width:73.4%;margin-top:30px} #opInvSec:is(.op-qi__skelBar--2),#opInvSec :is(.op-qi__skelBar--2){width:49%;margin-top:14px} /* «Пара секунд…» стоит ПОД скелетоном, в 8,75 от его низа */ #opInvSec:is(.op-qi__skel+.op-qi__resultLead),#opInvSec :is(.op-qi__skel+.op-qi__resultLead){margin-top:8.75px} #opInvSec:is(.op-qi__ready),#opInvSec :is(.op-qi__ready){display:flex;flex-direction:column;gap:14px} #opInvSec:is(.op-qi__submit),#opInvSec :is(.op-qi__submit){padding:16px 24px;font-size:17px;line-height:24px;font-weight:600} #opInvSec:is(.op-qi__redo),#opInvSec :is(.op-qi__redo){display:flex;align-items:baseline;justify-content:space-between;gap:12px; margin-top:21px;font-size:var(--fs-small);line-height:20px;color:var(--gray)} #opInvSec:is(.op-qi__redo b),#opInvSec :is(.op-qi__redo b){color:var(--blue);font-weight:700;cursor:pointer} #opInvSec:is(.op-qi__textRow),#opInvSec :is(.op-qi__textRow){display:flex;align-items:flex-start;gap:14px;margin-top:14.25px;padding:14px 17px;border-radius:14px;background:var(--op-blue-2)} #opInvSec:is(.op-qi__text),#opInvSec :is(.op-qi__text){flex:1 1 auto;font-size:16px;line-height:24px;font-weight:400;color:var(--ink)} #opInvSec:is(.op-qi__editLink),#opInvSec :is(.op-qi__editLink){flex:0 0 auto;display:inline-flex;align-items:center;gap:6.7px; font-size:var(--fs-small);line-height:20px} #opInvSec:is(.op-qi__editLink::before),#opInvSec :is(.op-qi__editLink::before){content:"";flex:0 0 auto;width:11.9px;height:11.9px;background:currentColor; -webkit-mask:url(/img/icons/edit.svg) no-repeat center/contain; mask:url(/img/icons/edit.svg) no-repeat center/contain} #opInvSec:is(.op-qi__editLink::after),#opInvSec :is(.op-qi__editLink::after){content:none} #opInvSec:is(.op-qi__confirm),#opInvSec :is(.op-qi__confirm){display:flex;align-items:flex-start;gap:10px;margin-top:20px;cursor:pointer} #opInvSec:is(.op-qi__confirmBox),#opInvSec :is(.op-qi__confirmBox){appearance:none;-webkit-appearance:none;flex:0 0 auto;width:22px;height:22px;margin:0; border-radius:6px;background:var(--bg);box-shadow:inset 0 0 0 1.5px var(--line-2)} #opInvSec:is(.op-qi__confirmBox:checked),#opInvSec :is(.op-qi__confirmBox:checked){background:var(--blue);box-shadow:none} #opInvSec:is(.op-qi__confirmBox:checked::after),#opInvSec :is(.op-qi__confirmBox:checked::after){content:"";display:block;width:12px;height:9.6px;margin:6.2px 5px; background:var(--bg);-webkit-mask:url(/img/icons/check.svg) no-repeat center/contain; mask:url(/img/icons/check.svg) no-repeat center/contain} #opInvSec:is(.op-qi__confirmText),#opInvSec :is(.op-qi__confirmText){display:block;font-size:var(--fs-small);line-height:20px;color:var(--ink)} /* Кадр «08 Изменить» (наряд «Дизайн-62»): поле правки — белое, с синей обводкой 2 px (как поле в фокусе), 744/632/318 × 67 (на 390 — 80), текст 19/28 Regular (на 390 17/24), поля 19,2 / 22 (на 390 15,5 / 16). Отбивка от пояснения 14,25, до кнопок 13, кнопки 44 высотой. */ #opInvSec:is(.op-qi__editBox),#opInvSec :is(.op-qi__editBox){display:flex;flex-direction:column;gap:13px;margin-top:14.25px} #opInvSec:is(.op-qi__editInput),#opInvSec :is(.op-qi__editInput){width:100%;min-height:67px;padding:19.2px 22px;border:0;border-radius:14px; background:var(--bg);box-shadow:inset 0 0 0 2px var(--blue); font-family:var(--font);font-size:19px;line-height:28px;font-weight:400; color:var(--ink);resize:vertical} #opInvSec:is(.op-qi__editInput:focus),#opInvSec :is(.op-qi__editInput:focus){outline:0} #opInvSec:is(.op-qi__editBox+.op-qi__confirm),#opInvSec :is(.op-qi__editBox+.op-qi__confirm){margin-top:16.5px} /* Кадр «08 Изменить»: кнопки 91×44 и 98×44 от x 348, зазор 8, поля 20,9; «Отмена» — серая плашка #F5F5F7 с тёмным текстом, не призрак. */ #opInvSec:is(.op-qi__editActions),#opInvSec :is(.op-qi__editActions){display:flex;align-items:center;gap:6.2px} #opInvSec:is(.op-qi__editActions .btn),#opInvSec :is(.op-qi__editActions .btn){flex:0 0 auto;height:44px;padding:12px 20.9px;font-size:var(--fs-small);line-height:20px} #opInvSec:is(.op-qi__editActions .btn--ghost),#opInvSec :is(.op-qi__editActions .btn--ghost){padding:12px 20.9px;background:var(--bg-soft);box-shadow:none;color:var(--ink)} /* Блок «Добавить ещё запрос» — внутри карточки «По каким запросам…» (макеты «Заказ v2 · 07…09»): 744×75 от x 348, обводка 1px #D2D2D7, иконка 36×36, подпись 15/20. Отбивка от строки «Подтверждаю…» 21,5. */ #opInvSec:is(.op-qz__addCard),#opInvSec :is(.op-qz__addCard){display:grid;grid-template-columns:36px minmax(0,1fr) auto; column-gap:13.4px;align-items:center;margin-top:21.5px; padding:14.8px 18.7px 16.2px 18px;border-radius:14px;background:var(--bg); box-shadow:inset 0 0 0 1px var(--line-2)} #opInvSec:is(.op-qz__addIcon),#opInvSec :is(.op-qz__addIcon){grid-column:1;grid-row:1/3;align-self:center;width:36px;height:36px; border-radius:10px;background:var(--op-blue-2);color:var(--blue); display:flex;align-items:center;justify-content:center} #opInvSec:is(.op-qz__addIcon::before),#opInvSec :is(.op-qz__addIcon::before){content:"";width:13.6px;height:13.6px;background:currentColor; -webkit-mask:url(/img/icons/plus.svg) no-repeat center/contain; mask:url(/img/icons/plus.svg) no-repeat center/contain} /* «Запрос 2 удалён» — тёмная плашка внутри карточки «По каким запросам…» (макет «Заказ v2 · 11»): 744/632/318 × 52 от края контента карточки, фон #2C2C2E, поля 19,1 слева и 18,6 справа, отбивка от блока «Добавить ещё запрос» — 21 на всех трёх ширинах. */ /* «Запрос подтверждён. Ниже — контакты и оплата.» (макет «Заказ v2 · 09») */ #opInvSec:is(.op-qz__done),#opInvSec :is(.op-qz__done){margin-top:12.25px;font-size:15px;line-height:20px;color:var(--gray)} #opInvSec:is(.op-qz__done[hidden]),#opInvSec :is(.op-qz__done[hidden]){display:none} #opInvSec:is(.op-qz__undoRow),#opInvSec :is(.op-qz__undoRow){display:flex;align-items:center;justify-content:space-between;gap:12px; margin-top:21px;min-height:52px;padding:16px 18.6px 16px 19.1px;border-radius:14px; background:var(--card-dark-2);color:var(--bg)} #opInvSec:is(.op-qz__undoText),#opInvSec :is(.op-qz__undoText){font-size:var(--fs-small);line-height:20px} #opInvSec:is(.op-qz__undo),#opInvSec :is(.op-qz__undo){font-size:var(--fs-small);line-height:20px;font-weight:600;color:var(--blue-on-dark)} #opInvSec:is(.op-qz__undo::after),#opInvSec :is(.op-qz__undo::after){content:none} #opInvSec:is(.op-qz__add),#opInvSec :is(.op-qz__add){grid-column:2;grid-row:1;justify-self:start; font-size:var(--fs-body);line-height:var(--lh-body);font-weight:700;color:var(--ink)} #opInvSec:is(.op-qz__addPrice),#opInvSec :is(.op-qz__addPrice){grid-column:3;grid-row:1/3;align-self:center; font-size:16px;line-height:22px;font-weight:700;color:var(--ink)} #opInvSec:is(.op-qz__addHint),#opInvSec :is(.op-qz__addHint){grid-column:2;grid-row:2;font-size:15px;line-height:20px;color:var(--gray)} @media (prefers-reduced-motion:reduce){ #opInvSec:is(.op-qi__spin),#opInvSec :is(.op-qi__spin){animation:none;border-top-color:var(--line-2)} } /* ——— 04 · Куда прислать отчёт ————————————————————————————— */ #opInvSec:is(.op-fields--contact),#opInvSec :is(.op-fields--contact){align-items:start} #opInvSec:is(.op-agree),#opInvSec :is(.op-agree){display:flex;align-items:flex-start;gap:13px;margin-top:24px;cursor:pointer} #opInvSec:is(.op-agree--2),#opInvSec :is(.op-agree--2){margin-top:12px} #opInvSec:is(.op-agree__box),#opInvSec :is(.op-agree__box){appearance:none;-webkit-appearance:none;flex:0 0 auto;width:22px;height:22px;margin:0; border-radius:6px;background:var(--bg);box-shadow:inset 0 0 0 1.5px var(--line-2)} #opInvSec:is(.op-agree__box:checked),#opInvSec :is(.op-agree__box:checked){background:var(--blue);box-shadow:none} #opInvSec:is(.op-agree__box:checked::after),#opInvSec :is(.op-agree__box:checked::after){content:"";display:block;width:11px;height:8px;margin:6px 4.5px; background:var(--bg);-webkit-mask:url(/img/icons/check.svg) no-repeat center/contain; mask:url(/img/icons/check.svg) no-repeat center/contain} #opInvSec:is(.op-agree__text),#opInvSec :is(.op-agree__text){font-size:15px;line-height:20px;color:var(--ink)} #opInvSec:is(.op-agree__text a),#opInvSec :is(.op-agree__text a){color:var(--blue)} /* Кнопка в макетах «Заказ v2» — 56, а не общие 60 из components.css; отбивка от «Итого» 42, подпись под кнопкой — 11,4. */ #opInvSec:is(.op-pay),#opInvSec :is(.op-pay){width:100%;height:56px;margin-top:42px;padding-top:0;padding-bottom:0; font-size:17px;line-height:24px;font-weight:600;font-variant-numeric:tabular-nums} #opInvSec:is(.op-note),#opInvSec :is(.op-note){margin-top:11.4px;text-align:center;font-size:var(--fs-caption);line-height:18px;color:var(--gray)} #opInvSec:is(.op-note a),#opInvSec :is(.op-note a){color:var(--blue)} /* ——— Планшет: 768–1023 ————————————————————————————————— */ @media (max-width:1023px){ #opInvSec:is(.op__in),#opInvSec :is(.op__in){max-width:704px} /* перенос как в макете: «Займёт» не влезает в строку 1 (ink строки 482,2 px) */ /* низ секции до подвала: 80 на 768 (2990 → 3070), 97 на 1440 */ #opInvSec:is(.op__sec),#opInvSec :is(.op__sec){padding-top:46.6px;padding-bottom:80px} #opInvSec:is(.op__h1),#opInvSec :is(.op__h1){font-size:48px;line-height:50px;max-width:560px} #opInvSec:is(.op__form),#opInvSec :is(.op__form){margin-top:42.4px} /* Макеты «Заказ v2 … Tablet 768» (наряд «Дизайн-62»): зазор между карточками 24 (550→574, 789→813, 2038,5→2062,5, 2307,5→2331,5), низ карточки 35,5 от последней строки, верх 37,8 до заголовка. */ #opInvSec:is(.op__form),#opInvSec :is(.op__form){gap:24px} #opInvSec:is(.op-card),#opInvSec :is(.op-card){border-radius:24px;padding:37.8px 36px 34.8px} #opInvSec:is(.op-card__lead),#opInvSec :is(.op-card__lead){margin-top:10px} #opInvSec:is(.op-tariffs),#opInvSec :is(.op-tariffs){margin-top:24.2px} /* тариф 310×124 (355…479): поля 18,7 сверху и 20,3 снизу */ #opInvSec:is(.op-tariff),#opInvSec :is(.op-tariff){padding:17.75px 20px 21.25px 21px} #opInvSec:is(.op-tariff__desc),#opInvSec :is(.op-tariff__desc){margin-top:5px} #opInvSec:is(.op-fields),#opInvSec :is(.op-fields){margin-top:22.5px} #opInvSec:is(.op-fields--contact),#opInvSec :is(.op-fields--contact){margin-top:23.8px} } /* ——— Телефон: до 767 ——————————————————————————————————— */ @media (max-width:767px){ /* зазор между карточками 20 (590…610, 879…899, 2393,5…2413,5), низ секции до подвала 58 (3383,5 → 3441,5) */ #opInvSec:is(.op__form),#opInvSec :is(.op__form){gap:20px} #opInvSec:is(.op__sec),#opInvSec :is(.op__sec){padding-top:27px;padding-bottom:58px} #opInvSec:is(.op__h1),#opInvSec :is(.op__h1){font-size:34px;line-height:36px} #opInvSec:is(.op__in),#opInvSec :is(.op__in){max-width:358px} #opInvSec:is(.op-card__h),#opInvSec :is(.op-card__h){font-size:24px;line-height:30px} #opInvSec:is(.op-field__input),#opInvSec :is(.op-field__input){height:52px} /* Макеты «Заказ v2 … Mobile 390» (наряд «Дизайн-62»): поля карточки 24,7 сверху и 21,5 снизу (187…590 у «Что заказываете», 610…879, 899…2393,5), зазор между карточками 20. */ #opInvSec:is(.op-card),#opInvSec :is(.op-card){padding:24.7px 20px 21.5px} /* 390: блок «Добавить ещё запрос» 318×65 от x 36 — подписи в макете нет, заголовок 15/20 по центру блока (узел x 100,4, цена справа до 335,3). */ /* 390: блок «Добавить ещё запрос» 318×65 (2613,5…2678,5) — иконка 36 в 14,5 от верха, подпись в 21,55, цена 17/24 в 20,18 (наряд «Дизайн-62»). */ #opInvSec:is(.op-qz__addCard),#opInvSec :is(.op-qz__addCard){column-gap:9.4px;padding:14.5px 18.7px 14.5px 18px;align-items:start} #opInvSec:is(.op-qz__add),#opInvSec :is(.op-qz__add){margin-top:7.05px} #opInvSec:is(.op-qz__addPrice),#opInvSec :is(.op-qz__addPrice){align-self:start;margin-top:5.7px} #opInvSec:is(.op-qz__addHint),#opInvSec :is(.op-qz__addHint){display:none} #opInvSec:is(.op-card__lead),#opInvSec :is(.op-card__lead){margin-top:8.3px;font-size:15px;line-height:20px} #opInvSec:is(.op-summary dt),#opInvSec :is(.op-summary dt),#opInvSec:is(.op-summary dd),#opInvSec :is(.op-summary dd){font-size:15px;line-height:20px} #opInvSec:is(.op-summary__total dt),#opInvSec :is(.op-summary__total dt),#opInvSec:is(.op-summary__total dd),#opInvSec :is(.op-summary__total dd){font-size:19px;line-height:28px} /* тариф 318×120 (261…381, 393…513): зазор 12, поля 18,75 / 22,35 */ #opInvSec:is(.op-tariffs),#opInvSec :is(.op-tariffs){grid-template-columns:minmax(0,1fr);gap:12px;margin-top:19.3px} #opInvSec:is(.op-tariff),#opInvSec :is(.op-tariff){padding:17.75px 20px 22.35px 21px} #opInvSec:is(.op-tariff__price),#opInvSec :is(.op-tariff__price){margin-top:4.8px} #opInvSec:is(.op-tariff__desc),#opInvSec :is(.op-tariff__desc){margin-top:3.1px} #opInvSec:is(.op-upsell),#opInvSec :is(.op-upsell){margin-top:14.85px} #opInvSec:is(.op__form),#opInvSec :is(.op__form){margin-top:28px} #opInvSec:is(.op-note),#opInvSec :is(.op-note){margin-top:10.7px} #opInvSec:is(.op-fields),#opInvSec :is(.op-fields){grid-template-columns:minmax(0,1fr);row-gap:14.85px;margin-top:17.4px} #opInvSec:is(.op-fields--contact),#opInvSec :is(.op-fields--contact){margin-top:17px;row-gap:16px} #opInvSec:is(.op-rules),#opInvSec :is(.op-rules){flex-direction:column;gap:8px;margin-top:14.2px} #opInvSec:is(.op-qz),#opInvSec :is(.op-qz){gap:18px;margin-top:20px} /* Макет «Заказ v2 · 01 Пусто - Mobile 390»: заголовок вопроса 17/24, шаг между вопросами 34 (чип 2186,5 → заголовок 2225,3 по узлам), чипы 34 высотой, блоки «Где вы?» в одну колонку 318×74 с плиткой 40 слева от подписи. */ #opInvSec:is(.op-sqs),#opInvSec :is(.op-sqs){gap:29.2px;margin-top:31.2px} #opInvSec:is(.op-qi__lead2),#opInvSec :is(.op-qi__lead2){font-size:16px;line-height:22px} #opInvSec:is(.op-sq__label),#opInvSec :is(.op-sq__label){font-size:17px;line-height:24px} #opInvSec:is(.op-sq .op-field__note),#opInvSec :is(.op-sq .op-field__note){margin-top:10px;line-height:20px} #opInvSec:is(.op-sq__input),#opInvSec :is(.op-sq__input){margin-top:16px} /* поле города — тоже .op-sq__input, но отбивка у него своя (7,95) */ #opInvSec:is(.op-place__field),#opInvSec :is(.op-place__field){margin-top:7.95px} #opInvSec:is(.op-places),#opInvSec :is(.op-places){grid-template-columns:minmax(0,1fr);gap:12px;margin-top:16px} #opInvSec:is(.op-place),#opInvSec :is(.op-place){min-height:74px;padding:17px 16px 0 16px; display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:14px; grid-template-rows:18px auto;align-items:start} #opInvSec:is(.op-place__tile),#opInvSec :is(.op-place__tile){grid-row:1 / span 2;width:40px;height:40px} #opInvSec:is(.op-place__name),#opInvSec :is(.op-place__name){margin-top:-2px} #opInvSec:is(.op-place__desc),#opInvSec :is(.op-place__desc){margin-top:2px} #opInvSec:is(.op-place__radio),#opInvSec :is(.op-place__radio){top:26px;right:16px} #opInvSec:is(.op-sq--place .op-eg),#opInvSec :is(.op-sq--place .op-eg){margin-top:12px} #opInvSec:is(.op-qi__submit),#opInvSec :is(.op-qi__submit){margin-top:30.25px} #opInvSec:is(.op-qi__submitNote),#opInvSec :is(.op-qi__submitNote){margin-top:9.8px} #opInvSec:is(.op-agree),#opInvSec :is(.op-agree){margin-top:24.5px} #opInvSec:is(.op-agree--2),#opInvSec :is(.op-agree--2){margin-top:13.5px} /* 390: сводка и кнопка по макету «Заказ v2 · 12 - Mobile 390» */ #opInvSec:is(.op-summary),#opInvSec :is(.op-summary){padding-top:19.5px;gap:7.5px} #opInvSec:is(.op-summary>.op-summary__total),#opInvSec :is(.op-summary>.op-summary__total){margin-top:8.6px} #opInvSec:is(.op-pay),#opInvSec :is(.op-pay){margin-top:30px} #opInvSec:is(.op-secure),#opInvSec :is(.op-secure){font-size:14px} } /* ——— Трекинг Bold / Semi Bold — ЛОКАЛЬНОЕ ИСКЛЮЧЕНИЕ из DESIGN_RULES ——— DESIGN_RULES велит трекинг 0, и на принятой главной 0 сходится. Но в макетах «Заказ v2» (ТЗ [С] 17.10 10:27, pixel perfect «особенно отступы между шрифтами») Bold и Semi Bold нарисованы уже, чем Inter 3.19 в браузере; Regular сходится точно. Решение оркестратора (наряд «Дизайн-59», отчёт order-payment_v18.md §4.1): подобрать трекинг по замеру ТОЛЬКО на этой странице. Значения — линейная регрессия ширины «краски» по длине строки (tools/trackcal.py) на кадрах v01…v05 × 1440/768/390: кегль/вес нужный ls постоянная ошибка замера 28/700 −0.0212 em +2,4 px (антиалиасинг рамок браузера) 24/700 −0.0141 em +2,9 px 19/600 −0.0070 em +2,0 px 17/600 −0.0056 em +2,0 px 15/600 −0.0012 em +1,8 px → 0, в допуске без трекинга 15/400 −0.0003 em +2,0 px → Regular не трогаем Поэтому трекинг стоит только у 28/24 Bold и 19/17 Semi Bold. Regular, подвал (.footer__h) и логотип (принятые компоненты) не затронуты. */ #opInvSec:is(.op-card__h),#opInvSec :is(.op-card__h),#opInvSec:is(.op-tariff__price),#opInvSec :is(.op-tariff__price){letter-spacing:-.0212em} #opInvSec:is(.op-sq__label),#opInvSec :is(.op-sq__label),#opInvSec:is(.op-summary__total dt),#opInvSec :is(.op-summary__total dt),#opInvSec:is(.op-summary__total dd),#opInvSec :is(.op-summary__total dd){letter-spacing:-.007em} #opInvSec:is(.op-pay),#opInvSec :is(.op-pay),#opInvSec:is(.op-qi__submit),#opInvSec :is(.op-qi__submit){letter-spacing:-.0056em} @media (max-width:767px){ #opInvSec:is(.op-card__h),#opInvSec :is(.op-card__h),#opInvSec:is(.op-tariff__price),#opInvSec :is(.op-tariff__price){letter-spacing:-.0141em} #opInvSec:is(.op-sq__label),#opInvSec :is(.op-sq__label){letter-spacing:-.0056em} } /* ——— Кадры «Заказ v2 · 06 Составляем … 10 Запрос 2» (наряд «Дизайн-59») ——— Кегли и начертания — узлы макетов, замер tools/elsweep2.py: текст запроса в плашке 19/28 Regular (было 16/24) «Запрос N» в карточке 2+ 24/30 Bold (было 22/28 из токена) «Добавить ещё запрос» 17/24 Semi Bold на 1440/768, 15/20 на 390 цена «1 499 ₽» у этой карточки 17/24 Semi Bold (было 16/22 Bold) «Изменить» / «Составить заново» 15/20 Semi Bold до подтверждения и Regular после («09», «10») зазор чекбокс → «Подтверждаю…» 14,3 (было 10: текст уходил влево на 4,3) */ #opInvSec:is(.op-qi__text),#opInvSec :is(.op-qi__text){font-size:19px;line-height:28px} /* Плашка запроса: в макете 1440 фон 744×67 от x 348, текст от 371,7 — поля 22 по бокам и 19,5 сверху/снизу (было 14/17). */ #opInvSec:is(.op-qi__textRow),#opInvSec :is(.op-qi__textRow){padding:19.5px 22px} #opInvSec:is(.op-qi__resultName),#opInvSec :is(.op-qi__resultName){font-size:19px;line-height:28px;font-weight:600;letter-spacing:-.007em} #opInvSec:is(.op-qi__resultLead),#opInvSec :is(.op-qi__resultLead){margin-top:.7px;font-size:15px;line-height:20px;color:var(--gray)} /* Ряд ссылок: иконка 11,8 + 11,2 до текста, между ссылками 28,4 от конца текста до иконки refresh, затем 9,1 до «Составить заново». */ #opInvSec:is(.op-qi__links),#opInvSec :is(.op-qi__links){display:flex;align-items:center;gap:26.7px;margin-top:13.6px} #opInvSec:is(.op-qi__redoLink),#opInvSec :is(.op-qi__redoLink){flex:0 0 auto;display:inline-flex;align-items:center;gap:9.1px; font-size:15px;line-height:20px} #opInvSec:is(.op-qi__redoLink::before),#opInvSec :is(.op-qi__redoLink::before){content:"";flex:0 0 auto;width:11.4px;height:12.2px;background:currentColor; -webkit-mask:url(/img/icons/refresh.svg) no-repeat center/contain; mask:url(/img/icons/refresh.svg) no-repeat center/contain} #opInvSec:is(.op-qi__redoLink::after),#opInvSec :is(.op-qi__redoLink::after){content:none} #opInvSec:is(.op-qi__editLink),#opInvSec :is(.op-qi__editLink){gap:11.2px} /* Кадры «09 Подтверждено» и «10 Запрос 2»: после подтверждения ссылки в макете без иконок и от самого левого края карточки («Изменить» x 349,3 против 371,1 в «07»), зазор между ними 26,6. */ #opInvSec:is(.op-qi__editLink--done::before),#opInvSec :is(.op-qi__editLink--done::before),#opInvSec:is(.op-qi__redoLink--done::before),#opInvSec :is(.op-qi__redoLink--done::before){content:none} #opInvSec:is(.op-qi__links:has(.op-qi__editLink--done)),#opInvSec :is(.op-qi__links:has(.op-qi__editLink--done)){gap:26.6px} #opInvSec:is(.op-qi__name),#opInvSec :is(.op-qi__name){font-size:24px;line-height:30px} #opInvSec:is(.op-qz__add),#opInvSec :is(.op-qz__add){font-size:17px;line-height:24px;font-weight:600} #opInvSec:is(.op-qz__addPrice),#opInvSec :is(.op-qz__addPrice){font-size:17px;line-height:24px;font-weight:600} #opInvSec:is(.op-qi__redo b),#opInvSec :is(.op-qi__redo b),#opInvSec:is(.op-qi__editLink),#opInvSec :is(.op-qi__editLink),#opInvSec:is(.op-qi__redoLink),#opInvSec :is(.op-qi__redoLink){font-weight:600} #opInvSec:is(.op-qi__redo--done b),#opInvSec :is(.op-qi__redo--done b),#opInvSec:is(.op-qi__editLink--done),#opInvSec :is(.op-qi__editLink--done),#opInvSec:is(.op-qi__redoLink--done),#opInvSec :is(.op-qi__redoLink--done){font-weight:400} #opInvSec:is(.op-qi__confirm),#opInvSec :is(.op-qi__confirm){gap:12.2px} /* «Готово» / «Отмена» в кадре «08 Изменить» — 15/20 Semi Bold (в components.css у .btn стоит 700, файл заморожен — перебиваем здесь). */ #opInvSec:is(.op-qi__editActions .btn),#opInvSec :is(.op-qi__editActions .btn){font-weight:600} /* «Запрос N» 24 Bold — тот же трекинг, что у заголовков карточек 24 px. */ #opInvSec:is(.op-qi__name),#opInvSec :is(.op-qi__name){letter-spacing:-.0141em} /* Regular от 17 px в макетах тоже уже браузерного: по пикселям PNG «Проверка бренда · запрос 1» 17/400 шире на 2,0, текст запроса 19/400 — на 3,0; обе сходятся при −0,0047em. На 15/400 расхождения нет (0,0 на строке из 49 промежутков), поэтому на 390 трекинг снимается. */ #opInvSec:is(.op-summary dt),#opInvSec :is(.op-summary dt),#opInvSec:is(.op-summary dd),#opInvSec :is(.op-summary dd),#opInvSec:is(.op-qi__text),#opInvSec :is(.op-qi__text){letter-spacing:-.0047em} @media (max-width:767px){ #opInvSec:is(.op-qz__add),#opInvSec :is(.op-qz__add){font-size:15px;line-height:20px} /* на 390 строки сводки 15/400 — трекинг не нужен (замер по PNG) */ #opInvSec:is(.op-summary dt),#opInvSec :is(.op-summary dt),#opInvSec:is(.op-summary dd),#opInvSec :is(.op-summary dd){letter-spacing:0} /* 390: заголовок блока результата 17/24 (узел макета x 37,5 w 193,0). */ #opInvSec:is(.op-qi__resultName),#opInvSec :is(.op-qi__resultName){font-size:17px;line-height:24px;letter-spacing:-.0056em} /* 390: плашка запроса 318×80 от x 36, поля 16, текст 17/24 Regular (узел макета x 52,7 w 199,4 в две строки). */ #opInvSec:is(.op-qi__textRow),#opInvSec :is(.op-qi__textRow){padding:16px} #opInvSec:is(.op-qi__text),#opInvSec :is(.op-qi__text){font-size:17px;line-height:24px} #opInvSec:is(.op-qi__editInput),#opInvSec :is(.op-qi__editInput){min-height:80px;padding:15.5px 16px;font-size:17px;line-height:24px} #opInvSec:is(.op-qz__addCard),#opInvSec :is(.op-qz__addCard){margin-top:24.5px} } /* ====================================================================== Логика оплаты (наряд «Дизайн-37», ТЗ [С] 14.10 19:27). Все новые элементы в исходном состоянии скрыты — геометрия страницы и pixel perfect сверки 1 не меняются. ====================================================================== */ #opInvSec:is(.op),#opInvSec :is(.op){--op-red:#D70015;--op-red-soft:#FDECEC; /* голубая плашка макетов «Заказ v2» — светлее --blue-soft главной */ --op-blue-2:#EAF1FF} /* Скрытые блоки: [hidden] должен побеждать display из базовых правил */ #opInvSec:is(.op-field[hidden]),#opInvSec :is(.op-field[hidden]),#opInvSec:is(.op-card[hidden]),#opInvSec :is(.op-card[hidden]),#opInvSec:is(.op-upsell[hidden]),#opInvSec :is(.op-upsell[hidden]),#opInvSec:is(.op-status[hidden]),#opInvSec :is(.op-status[hidden]),#opInvSec:is(.op-agree[hidden]),#opInvSec :is(.op-agree[hidden]),#opInvSec:is(.op-rules[hidden]),#opInvSec :is(.op-rules[hidden]){display:none} /* ——— Выбор тарифа: карточка целиком кликабельна ————————————————— */ /* [Дизайн-45] Дёргание при смене тарифа на мобильном: только цвет/тень через transition, геометрия (width/height/border/padding) не меняется между .op-tariff и .op-tariff--on — сверено. tabular-nums у цены убирает сдвиг ширины цифр между «4 900» и «19 800»/«14 900». */ #opInvSec:is(.op-tariff),#opInvSec :is(.op-tariff){transition:background-color .15s ease} #opInvSec:is(.op-tariff__price),#opInvSec :is(.op-tariff__price){transition:color .15s ease} #opInvSec:is(.op-tariff:focus-within),#opInvSec :is(.op-tariff:focus-within){outline:2px solid var(--blue);outline-offset:2px} /* ——— Состояние «План с доплатой» ————————————————————————————— */ #opInvSec:is(.op-upsell--on),#opInvSec :is(.op-upsell--on){color:var(--ink)} #opInvSec:is(.op-field--proof),#opInvSec :is(.op-field--proof){margin-top:16px} /* ——— Ошибки валидации ——————————————————————————————————— Красной ЗАЛИВКИ у полей нет (ТЗ [С] 14.10 21:03). Красная ОБВОДКА 1,5 px есть — по макетам v3 (кадры w02, w16, w17: rect 350,5×54,5 stroke #D70015 1,5 внутри блока 352×56; у плиток «Где вас ищут?» и способов оплаты — то же, r18). Решение оркестратора 18.10 по вопросу 1 §9 v28: ТЗ [С] 17.10 10:27 «точно как в SVG_PNG макетах» и макеты [С] 18.10 14:09 новее запрета 14.10. Рисуем внутренней тенью — геометрия поля и вертикаль кадра не меняются, как и в SVG. У чекбокса — только красный контур, без заливки. */ #opInvSec:is(.op-field__err),#opInvSec :is(.op-field__err){display:block;margin-top:8px;font-size:15px; line-height:20px;color:var(--op-red)} #opInvSec:is(.op-field__input[aria-invalid="true"]),#opInvSec :is(.op-field__input[aria-invalid="true"]){box-shadow:inset 0 0 0 1.5px var(--op-red)} #opInvSec:is(.op-sq--place[aria-invalid="true"] .op-place),#opInvSec :is(.op-sq--place[aria-invalid="true"] .op-place),#opInvSec:is(.op-ways--err .op-way__head),#opInvSec :is(.op-ways--err .op-way__head){box-shadow:inset 0 0 0 1.5px var(--op-red)} #opInvSec:is(.op-q .op-field__err),#opInvSec :is(.op-q .op-field__err){grid-column:2;grid-row:3} #opInvSec:is(.op-agree--err .op-agree__box),#opInvSec :is(.op-agree--err .op-agree__box){box-shadow:inset 0 0 0 1.5px var(--op-red);background:var(--bg)} #opInvSec:is(.op-agree__err),#opInvSec :is(.op-agree__err){display:block;margin-top:6px;font-size:var(--fs-caption); line-height:var(--lh-caption);color:var(--op-red)} /* ——— Строка статуса под кнопкой ————————————————————————————— */ #opInvSec:is(.op-status),#opInvSec :is(.op-status){margin-top:14px;text-align:center;font-size:var(--fs-small);line-height:20px;color:var(--gray)} #opInvSec:is(.op-status--err),#opInvSec :is(.op-status--err){color:var(--op-red)} #opInvSec:is(.op-status--demo),#opInvSec :is(.op-status--demo){color:var(--blue-ink);background:var(--blue-tint);border-radius:12px;padding:10px 14px} #opInvSec:is(.op-status--wait),#opInvSec :is(.op-status--wait){color:var(--blue-ink);background:var(--blue-tint);border-radius:12px;padding:10px 14px} #opInvSec:is(.op-status a),#opInvSec :is(.op-status a){color:var(--blue)} /* Лид «Запросы, по которым…» и лид счёта — тёмным (ТЗ [С] 14.10 19:27: светло-серый сливался с фоном). Кегль и высота строки те же — геометрия страницы не меняется. */ @media (prefers-reduced-motion:reduce){ #opInvSec:is(.op-tariff),#opInvSec :is(.op-tariff){transition:none} } /* ====================================================================== v4 · Макеты «Order 1 Payment» / «· Счёт» + ТЗ @Vidya 14.10. Токены-значения ТЗ держим локальными переменными страницы — tokens.css заморожен, новые цвета ошибки/успеха в нём не утверждены. ====================================================================== */ #opInvSec:is(.op),#opInvSec :is(.op){--op-ok:#248A3D;--op-ok-soft:#EAF7EE; --op-soft:cubic-bezier(.32,.72,0,1);--op-std:cubic-bezier(.25,.1,.25,1)} /* ——— 05 · Как оплатить: строки-способы ———————————————————————— */ #opInvSec:is(.op-ways),#opInvSec :is(.op-ways){display:flex;flex-direction:column;gap:12px;margin-top:23.2px} #opInvSec:is(.op-way),#opInvSec :is(.op-way){cursor:pointer} #opInvSec:is(.op-way:focus-visible),#opInvSec :is(.op-way:focus-visible){outline:2px solid var(--blue);outline-offset:2px} /* Макет «Заказ v2»: плитка от 22 (текст от 84 = 22+44+18), правое поле 20. Заливка — у самой строки (744×84, #F5F5F7; выбранная — #EAF1FF), обводки нет; раскрытие «По счёту» лежит ниже, на белом фоне карточки. */ #opInvSec:is(.op-way__head),#opInvSec :is(.op-way__head){display:flex;align-items:center;gap:18px;min-height:84px;padding:0 20px 0 22px; border-radius:18px;background:var(--bg-soft);transition:background .2s var(--op-soft)} #opInvSec:is(.op-way--on .op-way__head),#opInvSec :is(.op-way--on .op-way__head){background:var(--blue-tint)} #opInvSec:is(.op-way--on .op-way__name),#opInvSec :is(.op-way--on .op-way__name){color:var(--blue)} #opInvSec:is(.op-way__tile),#opInvSec :is(.op-way__tile){flex:0 0 auto;display:flex;align-items:center;justify-content:center; width:44px;height:44px;border-radius:12px;background:var(--bg);color:var(--ink); transition:background .2s var(--op-soft),color .2s var(--op-soft)} #opInvSec:is(.op-way--on .op-way__tile),#opInvSec :is(.op-way--on .op-way__tile){color:var(--blue)} #opInvSec:is(.op-way__icon),#opInvSec :is(.op-way__icon){width:22px;height:16px} #opInvSec:is(.op-way__icon--doc),#opInvSec :is(.op-way__icon--doc){width:16px;height:20px} #opInvSec:is(.op-way__text),#opInvSec :is(.op-way__text){display:flex;flex-direction:column;gap:2.2px;min-width:0} #opInvSec:is(.op-way__name),#opInvSec :is(.op-way__name){font-size:15px;line-height:20px;font-weight:600;color:var(--ink)} #opInvSec:is(.op-way__desc),#opInvSec :is(.op-way__desc){font-size:15px;line-height:20px;color:var(--gray)} #opInvSec:is(.op-way__radio),#opInvSec :is(.op-way__radio){flex:0 0 auto;margin-left:auto;display:flex;align-items:center;justify-content:center; width:22px;height:22px;border-radius:50%;background:var(--bg); box-shadow:inset 0 0 0 1.5px var(--line-2);transition:box-shadow .2s var(--op-soft)} #opInvSec:is(.op-way--on .op-way__radio),#opInvSec :is(.op-way--on .op-way__radio){background:var(--blue);box-shadow:none} #opInvSec:is(.op-way__radio::after),#opInvSec :is(.op-way__radio::after){content:"";width:8px;height:8px;border-radius:50%;background:var(--bg); transform:scale(0);transition:transform .2s var(--op-soft)} #opInvSec:is(.op-way--on .op-way__radio::after),#opInvSec :is(.op-way--on .op-way__radio::after){transform:scale(1)} /* ——— Раскрытие «По счёту» ——————————————————————————————— */ #opInvSec:is(.op-bill),#opInvSec :is(.op-bill){display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s var(--op-soft)} #opInvSec:is(.op-way--open .op-bill),#opInvSec :is(.op-way--open .op-bill){grid-template-rows:1fr} #opInvSec:is(.op-bill__in),#opInvSec :is(.op-bill__in){overflow:hidden;opacity:0;transform:translateY(8px); transition:opacity .1s var(--op-std),transform .1s var(--op-std)} #opInvSec:is(.op-way--open .op-bill__in),#opInvSec :is(.op-way--open .op-bill__in){opacity:1;transform:none; transition:opacity .24s var(--op-soft) .06s,transform .24s var(--op-soft) .06s} #opInvSec:is(.op-bill__pad),#opInvSec :is(.op-bill__pad){display:block} /* Макеты «Заказ v2 · 13…15»: содержимое раскрытия — во всю ширину контента карточки (744 / 632 / 318), на белом фоне, без обводки и разделителя. Первая подпись — на 16,5 ниже низа синей строки, плашка и блок реквизитов — на 24. */ #opInvSec:is(.op-bill__state),#opInvSec :is(.op-bill__state){padding:16.5px 0 0;border-top:0;margin-top:0} #opInvSec:is(#opBillPicked),#opInvSec :is(#opBillPicked),#opInvSec:is(#opBillManual),#opInvSec :is(#opBillManual){padding-top:24px} #opInvSec:is(.op-bill__state[hidden]),#opInvSec :is(.op-bill__state[hidden]){display:none} #opInvSec:is(.op-field--search),#opInvSec :is(.op-field--search){position:relative} #opInvSec:is(#op-company-note),#opInvSec :is(#op-company-note){display:block;margin-top:9px} #opInvSec:is(.op-search),#opInvSec :is(.op-search){position:relative;display:flex;flex-direction:column} #opInvSec:is(.op-search__icon),#opInvSec :is(.op-search__icon){position:absolute;left:17px;top:50%;margin-top:-8px;width:16px;height:16px; color:var(--gray-2);pointer-events:none} #opInvSec:is(.op-search__input),#opInvSec :is(.op-search__input){padding-left:43px} #opInvSec:is(.op-search__spin),#opInvSec :is(.op-search__spin){position:absolute;right:17px;top:50%;margin-top:-8px;width:16px;height:16px; border-radius:50%;border:2px solid var(--line-2);border-top-color:var(--blue); animation:op-spin .8s linear infinite} #opInvSec:is(.op-search__spin[hidden]),#opInvSec :is(.op-search__spin[hidden]){display:none} @keyframes op-spin{ #opInvSec:is(to),#opInvSec :is(to){transform:rotate(360deg)} } /* ——— Список подсказок реестра ————————————————————————————— */ #opInvSec:is(.op-sug),#opInvSec :is(.op-sug){margin-top:8px;padding-top:8px;border-radius:14px;background:var(--bg); box-shadow:inset 0 0 0 1px var(--line);overflow:hidden; animation:op-sug-in .18s var(--op-soft)} #opInvSec:is(.op-sug[hidden]),#opInvSec :is(.op-sug[hidden]){display:none} @keyframes op-sug-in{ #opInvSec:is(from),#opInvSec :is(from){opacity:0;transform:translateY(-4px) scale(.98)} #opInvSec:is(to),#opInvSec :is(to){opacity:1;transform:none} } /* Макет «Заказ v2 · 13»: строка 64,4 с полями 12, подсветка — плашка 728 (вставка 8 от краёв панели) со скруглением 12, шаг между строками 2,1. */ #opInvSec:is(.op-sug__i),#opInvSec :is(.op-sug__i){display:block;margin:0 8px;padding:12px 8.8px;border-radius:12px; cursor:pointer;transition:background .1s var(--op-std)} #opInvSec:is(.op-sug__i + .op-sug__i),#opInvSec :is(.op-sug__i + .op-sug__i){margin-top:2.1px} #opInvSec:is(.op-sug__i[aria-selected="true"]),#opInvSec :is(.op-sug__i[aria-selected="true"]),#opInvSec:is(.op-sug__i:hover),#opInvSec :is(.op-sug__i:hover){background:var(--bg-soft)} #opInvSec:is(.op-sug__i--off),#opInvSec :is(.op-sug__i--off){cursor:default;color:var(--gray-2)} #opInvSec:is(.op-sug__i--off:hover),#opInvSec :is(.op-sug__i--off:hover){background:transparent} #opInvSec:is(.op-sug__n),#opInvSec :is(.op-sug__n){display:block;font-size:var(--fs-small);line-height:20px;font-weight:600;color:var(--ink)} #opInvSec:is(.op-sug__i--off .op-sug__n),#opInvSec :is(.op-sug__i--off .op-sug__n){color:var(--gray-2)} #opInvSec:is(.op-sug__m),#opInvSec :is(.op-sug__m){display:block;margin-top:2.4px;font-size:var(--fs-caption);line-height:18px;color:var(--gray)} #opInvSec:is(.op-sug__tag),#opInvSec :is(.op-sug__tag){margin-left:8px;font-size:var(--fs-caption);line-height:18px;font-weight:400;color:var(--gray-2)} #opInvSec:is(.op-sug__man),#opInvSec :is(.op-sug__man){display:block;margin-top:5.9px;padding:13px 16px;border-top:1px solid var(--line); background:transparent;border-left:0;border-right:0;border-bottom:0;width:100%;text-align:left; font-family:var(--font);font-size:var(--fs-caption);line-height:18px;color:var(--gray);cursor:pointer} #opInvSec:is(.op-sug__manGo),#opInvSec :is(.op-sug__manGo){color:var(--blue)} #opInvSec:is(.op-sug__man:hover),#opInvSec :is(.op-sug__man:hover){background:var(--bg-soft)} /* ——— Компания выбрана: блок реквизитов ——————————————————— */ /* Макет «Заказ v2 · 14 Счёт · реквизиты»: 744×205 от x 348, фон #F5F5F7, поля 18, название 17/24 Semi Bold, «Изменить» 15/20 Semi Bold. */ #opInvSec:is(.op-req),#opInvSec :is(.op-req){border-radius:14px;background:var(--bg-soft);padding:17.5px 18px 12px} #opInvSec:is(.op-req__top),#opInvSec :is(.op-req__top){display:flex;align-items:center;gap:9.8px} #opInvSec:is(.op-req__ok),#opInvSec :is(.op-req__ok){flex:0 0 auto;display:flex;align-items:center;justify-content:center; width:20px;height:20px;border-radius:50%;background:var(--blue);color:var(--bg)} #opInvSec:is(.op-req__ok svg),#opInvSec :is(.op-req__ok svg){width:11px;height:8px} #opInvSec:is(.op-req__name),#opInvSec :is(.op-req__name){font-size:17px;line-height:24px;font-weight:600;color:var(--ink)} #opInvSec:is(.op-req__edit),#opInvSec :is(.op-req__edit){margin-left:auto;flex:0 0 auto;background:0;border:0;padding:0 0 0 12px; font-family:var(--font);font-size:var(--fs-small);line-height:20px;font-weight:600; color:var(--blue);cursor:pointer} /* на доске у «Изменить» стрелки нет — гасим ::after из components.css, как уже сделано у ссылок экрана счёта */ #opInvSec:is(.op-req__edit::after),#opInvSec :is(.op-req__edit::after){display:none} #opInvSec:is(.op-req__list),#opInvSec :is(.op-req__list){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12.9px 16px;margin-top:11.3px} #opInvSec:is(.op-req__list > div),#opInvSec :is(.op-req__list > div){min-width:0} #opInvSec:is(.op-req__list > div.op-req__wide),#opInvSec :is(.op-req__list > div.op-req__wide){grid-column:1/-1} #opInvSec:is(.op-req__list dt),#opInvSec :is(.op-req__list dt){font-size:var(--fs-caption);line-height:18px;color:var(--gray)} #opInvSec:is(.op-req__list dd),#opInvSec :is(.op-req__list dd){margin:0;font-size:var(--fs-small);line-height:20px;color:var(--ink);word-break:break-word} #opInvSec:is(.op-bill__note),#opInvSec :is(.op-bill__note){margin-top:8.8px;font-size:var(--fs-small);line-height:20px;color:var(--gray)} /* ——— Ручной ввод ———————————————————————————————————————— */ /* Макет «Заказ v2 · 15 Счёт · вручную»: плашка 744×72, фон #EAF1FF, поля 16, текст 15/20 тёмный (не 13/18 и не синий). */ #opInvSec:is(.op-bill__plate),#opInvSec :is(.op-bill__plate){border-radius:14px;background:var(--blue-tint);padding:16px; font-size:var(--fs-small);line-height:20px;color:var(--ink)} /* Первая фраза плашки в макете — Semi Bold, остальное Regular. */ #opInvSec:is(.op-bill__plateB),#opInvSec :is(.op-bill__plateB){font-weight:600} #opInvSec:is(.op-fields--man),#opInvSec :is(.op-fields--man){margin-top:16.5px;row-gap:15px} #opInvSec:is(.op-fields--man .op-field--wide),#opInvSec :is(.op-fields--man .op-field--wide){grid-column:1/-1} #opInvSec:is(.op-fields--man .op-field--gone),#opInvSec :is(.op-fields--man .op-field--gone){display:none} #opInvSec:is(.op-bill__found),#opInvSec :is(.op-bill__found){margin-top:14px;border-radius:14px;background:var(--bg-soft);padding:12px 16px; font-size:var(--fs-caption);line-height:18px;color:var(--ink)} #opInvSec:is(.op-bill__found[hidden]),#opInvSec :is(.op-bill__found[hidden]){display:none} #opInvSec:is(.op-bill__found button),#opInvSec :is(.op-bill__found button){background:0;border:0;padding:0;margin-left:6px;font-family:var(--font); font-size:var(--fs-caption);line-height:18px;color:var(--blue);cursor:pointer} #opInvSec:is(.op-bill__back),#opInvSec :is(.op-bill__back){display:inline-block;margin-top:9px;background:0;border:0;padding:0; font-family:var(--font);font-size:var(--fs-small);line-height:20px;font-weight:600; color:var(--blue);cursor:pointer} /* в макете у ссылки «← Найти по ИНН в реестре» стрелки справа нет */ #opInvSec:is(.op-bill__back::after),#opInvSec :is(.op-bill__back::after){display:none} /* ——— Согласия, плашка, кнопка ————————————————————————————— */ #opInvSec:is(.op-agrees),#opInvSec :is(.op-agrees){margin-top:24px} #opInvSec:is(.op-agrees .op-agree),#opInvSec :is(.op-agrees .op-agree){margin-top:0} #opInvSec:is(.op-agrees .op-agree--2),#opInvSec :is(.op-agrees .op-agree--2){margin-top:12px} #opInvSec:is(.op-agrees--shake),#opInvSec :is(.op-agrees--shake){animation:op-shake .32s var(--op-std)} @keyframes op-shake{ #opInvSec:is(0%),#opInvSec :is(0%){transform:translateX(0)} #opInvSec:is(20%),#opInvSec :is(20%){transform:translateX(-6px)} #opInvSec:is(40%),#opInvSec :is(40%){transform:translateX(6px)} #opInvSec:is(60%),#opInvSec :is(60%){transform:translateX(-4px)} #opInvSec:is(80%),#opInvSec :is(80%){transform:translateX(4px)} #opInvSec:is(100%),#opInvSec :is(100%){transform:translateX(0)} } #opInvSec:is(.op-agrees__err),#opInvSec :is(.op-agrees__err){margin-top:10px;font-size:var(--fs-caption);line-height:18px;color:var(--op-red)} #opInvSec:is(.op-agrees__err[hidden]),#opInvSec :is(.op-agrees__err[hidden]){display:none} #opInvSec:is(.op-plate),#opInvSec :is(.op-plate){margin-top:20px;border-radius:14px;background:var(--op-red-soft);padding:14px 18px; font-size:var(--fs-caption);line-height:18px;color:var(--op-red)} #opInvSec:is(.op-plate[hidden]),#opInvSec :is(.op-plate[hidden]){display:none} #opInvSec:is(.op-plate a),#opInvSec :is(.op-plate a){color:var(--op-red);text-decoration:underline} /* ——— Итог заказа: тариф + второй запрос (если есть) ———————————— */ /* Макеты «Заказ v2 · 09…15»: линия в 24,5 от низа согласий, строка в 18 от линии, вторая линия в 14, «Итого» в 13 от неё. */ /* Шаг строк сводки 6 (макет «Заказ v2 · 10»: 4241,5 → 4247,5), а до линии перед «Итого» — 14 (наряд «Дизайн-62»). */ #opInvSec:is(.op-summary),#opInvSec :is(.op-summary){margin-top:24.5px;padding-top:18px;border-top:1px solid var(--line); display:flex;flex-direction:column;gap:6px;font-variant-numeric:tabular-nums} #opInvSec:is(.op-summary:empty),#opInvSec :is(.op-summary:empty){display:none;margin-top:0;padding-top:0;border-top:0} #opInvSec:is(.op-summary > div),#opInvSec :is(.op-summary > div){display:flex;align-items:baseline;gap:12px;margin:0} #opInvSec:is(.op-summary dt),#opInvSec :is(.op-summary dt){font-size:17px;line-height:24px;color:var(--gray);margin:0} #opInvSec:is(.op-summary dd),#opInvSec :is(.op-summary dd){margin:0 0 0 auto;font-size:17px;line-height:24px;color:var(--ink)} #opInvSec:is(.op-summary>.op-summary__total),#opInvSec :is(.op-summary>.op-summary__total){margin-top:8.05px} #opInvSec:is(.op-summary__total),#opInvSec :is(.op-summary__total){padding-top:14px;border-top:1px solid var(--line)} #opInvSec:is(.op-summary__total dt),#opInvSec :is(.op-summary__total dt),#opInvSec:is(.op-summary__total dd),#opInvSec :is(.op-summary__total dd){font-size:19px;line-height:28px;font-weight:600;color:var(--ink)} /* Телефон 390: строка сводки 15/20, цена тарифа 24/30 — узлы макета «Заказ v2 · 01 Пусто - Mobile 390» (3156,8 строка 15/20 Regular; 311,8 цена 24/30 Bold). Повторено здесь, потому что блок «Логика оплаты» идёт в файле ПОСЛЕ медиазапроса ≤767 и перебивал его базовыми 17/24. */ @media (max-width:767px){ #opInvSec:is(.op-summary dt),#opInvSec :is(.op-summary dt),#opInvSec:is(.op-summary dd),#opInvSec :is(.op-summary dd){font-size:15px;line-height:20px} #opInvSec:is(.op-summary__total dt),#opInvSec :is(.op-summary__total dt),#opInvSec:is(.op-summary__total dd),#opInvSec :is(.op-summary__total dd){font-size:19px;line-height:28px} #opInvSec:is(.op-tariff__price),#opInvSec :is(.op-tariff__price){font-size:24px;line-height:30px} } /* Плашка «Образец»: в #opBank нет банковских реквизитов, счёт выйдет с плашкой ОБРАЗЕЦ. В макете её нет — показываем только при выборе «По счёту», оформлением повторяем плашку счёта (красная, по центру). До правки [С] 15.10 16:08 текст висел без стилей внизу карточки. */ #opInvSec:is(.op-bill__flag),#opInvSec :is(.op-bill__flag){display:block;width:fit-content;max-width:100%;margin:12px auto 0; border-radius:12px;background:var(--op-red-soft);padding:8px 14px;text-align:center; font-size:var(--fs-caption);line-height:16px;font-weight:700;color:var(--op-red)} #opInvSec:is(.op-bill__flag[hidden]),#opInvSec :is(.op-bill__flag[hidden]){display:none} #opInvSec:is(.op-pay),#opInvSec :is(.op-pay){position:relative;transition:transform .12s var(--op-std),background .15s var(--op-std)} #opInvSec:is(.op-pay:active),#opInvSec :is(.op-pay:active){transform:scale(.98)} /* Неактивная «Оплатить» в макетах v3 всё равно синяя (кадры w01, w02: «btn mt24» #0A5CFF) — решение оркестратора 18.10 по вопросу 2 §9 v28: красим по макету, а неактивность остаётся логикой (aria-disabled, нажатие не отправляет форму, а показывает подсказки). */ #opInvSec:is(.op-pay[aria-disabled="true"]),#opInvSec :is(.op-pay[aria-disabled="true"]){background:var(--blue);color:var(--bg)} #opInvSec:is(.op-pay[aria-busy="true"]),#opInvSec :is(.op-pay[aria-busy="true"]){color:transparent} #opInvSec:is(.op-pay[aria-busy="true"]::after),#opInvSec :is(.op-pay[aria-busy="true"]::after){content:"";position:absolute;left:50%;top:50%; width:20px;height:20px;margin:-10px;border-radius:50%; border:2px solid rgba(255,255,255,.45);border-top-color:#fff;animation:op-spin .8s linear infinite} #opInvSec:is(.op-pay__txt),#opInvSec :is(.op-pay__txt){transition:opacity .15s var(--op-std)} #opInvSec:is(.op-pay--swap .op-pay__txt),#opInvSec :is(.op-pay--swap .op-pay__txt),#opInvSec:is(.op-note--swap),#opInvSec :is(.op-note--swap){opacity:0} #opInvSec:is(.op-note),#opInvSec :is(.op-note){transition:opacity .15s var(--op-std)} /* ====================================================================== Экран «Счёт готов» ====================================================================== */ #opInvSec:is(.op__sec--inv[hidden]),#opInvSec :is(.op__sec--inv[hidden]){display:none} #opInvSec:is(.op__form--gone),#opInvSec :is(.op__form--gone){opacity:0;transform:translateY(-8px);transition:opacity .2s var(--op-std),transform .2s var(--op-std)} #opInvSec:is(.op-inv__in),#opInvSec :is(.op-inv__in){max-width:calc(1200px + var(--gutter)*2)} #opInvSec:is(.op-inv__h1),#opInvSec :is(.op-inv__h1){max-width:1000px} #opInvSec:is(.op-inv__lead),#opInvSec :is(.op-inv__lead){margin-top:20px;max-width:760px;font-size:var(--fs-lead);line-height:var(--lh-lead);color:var(--gray)} @media (min-width:1024px){ #opInvSec:is(.op-inv__lead),#opInvSec :is(.op-inv__lead){margin-top:29px} } #opInvSec:is(.op-inv__grid),#opInvSec :is(.op-inv__grid){display:grid;grid-template-columns:minmax(0,760px) minmax(0,400px); grid-template-areas:"doc pay" "doc next";align-content:start;gap:24px 40px;margin-top:42px} /* 1440: поля карточек по макету — счёт 48, боковые 32 (у форм остаётся 36) */ #opInvSec:is(.op-inv__doc),#opInvSec :is(.op-inv__doc){grid-area:doc;align-self:start;padding:48px} #opInvSec:is(.op-inv__pay),#opInvSec :is(.op-inv__pay){grid-area:pay;padding:32px} #opInvSec:is(.op-inv__next),#opInvSec :is(.op-inv__next){grid-area:next;padding:32px} #opInvSec:is(.op-inv__grid > .op-card),#opInvSec :is(.op-inv__grid > .op-card){animation:op-rise .4s var(--op-soft) both} #opInvSec:is(.op-inv__pay),#opInvSec :is(.op-inv__pay){animation-delay:.06s} #opInvSec:is(.op-inv__next),#opInvSec :is(.op-inv__next){animation-delay:.12s} @keyframes op-rise{ #opInvSec:is(from),#opInvSec :is(from){opacity:0;transform:translateY(16px)} #opInvSec:is(to),#opInvSec :is(to){opacity:1;transform:none} } #opInvSec:is(.op-inv__docTop),#opInvSec :is(.op-inv__docTop){display:flex;align-items:flex-start;gap:16px} #opInvSec:is(.op-inv__docH),#opInvSec :is(.op-inv__docH){font-size:22px;line-height:28px;font-weight:700;color:var(--ink)} #opInvSec:is(.op-inv__docDate),#opInvSec :is(.op-inv__docDate){margin-top:8px;font-size:var(--fs-small);line-height:20px;color:var(--gray)} #opInvSec:is(.op-chip),#opInvSec :is(.op-chip){margin-left:auto;flex:0 0 auto;border-radius:14px;background:var(--blue-tint); padding:6px 13px;font-size:var(--fs-caption);line-height:16px;font-weight:700;color:var(--blue); transition:background .2s var(--op-std),color .2s var(--op-std)} #opInvSec:is(.op-chip--paid),#opInvSec :is(.op-chip--paid){background:var(--op-ok-soft);color:var(--op-ok)} #opInvSec:is(.op-chip--off),#opInvSec :is(.op-chip--off){background:var(--bg-soft);color:var(--gray)} #opInvSec:is(.op-inv__sides),#opInvSec :is(.op-inv__sides){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px; margin-top:25px;padding-top:25px;border-top:1px solid var(--line)} #opInvSec:is(.op-inv__label),#opInvSec :is(.op-inv__label){font-size:var(--fs-caption);line-height:16px;font-weight:700;color:var(--gray); letter-spacing:.04em} #opInvSec:is(.op-inv__who),#opInvSec :is(.op-inv__who){margin-top:8px;font-size:16px;line-height:20px;font-weight:700;color:var(--ink)} #opInvSec:is(.op-inv__row),#opInvSec :is(.op-inv__row){margin-top:7px;font-size:var(--fs-caption);line-height:18px;color:var(--gray)} #opInvSec:is(.op-inv__row + .op-inv__row),#opInvSec :is(.op-inv__row + .op-inv__row){margin-top:4px} #opInvSec:is(.op-inv__bank),#opInvSec :is(.op-inv__bank){margin-top:35px;border-radius:16px;background:var(--bg-soft);padding:21px 24px 27px} #opInvSec:is(.op-inv__bankList),#opInvSec :is(.op-inv__bankList){display:grid;grid-template-columns:minmax(0,170px) minmax(0,1fr);gap:10px 0;margin-top:14px} #opInvSec:is(.op-inv__bankList dt),#opInvSec :is(.op-inv__bankList dt){font-size:var(--fs-caption);line-height:18px;color:var(--gray)} #opInvSec:is(.op-inv__bankList dd),#opInvSec :is(.op-inv__bankList dd){margin:0;font-size:var(--fs-caption);line-height:18px;color:var(--ink);word-break:break-word} #opInvSec:is(.op-inv__tab),#opInvSec :is(.op-inv__tab){width:100%;margin-top:32px;border-collapse:collapse;text-align:left} #opInvSec:is(.op-inv__tab th),#opInvSec :is(.op-inv__tab th){padding:0 0 14px;border-bottom:1px solid var(--line); font-size:var(--fs-caption);line-height:16px;font-weight:700;color:var(--gray)} #opInvSec:is(.op-inv__tab td),#opInvSec :is(.op-inv__tab td){padding:16px 0 18px;font-size:var(--fs-small);line-height:20px;color:var(--ink);vertical-align:top} /* колонки по макету: № 36, Кол-во 120, Цена и Сумма по 100 (одинаково на 1440 и 768) */ #opInvSec:is(.op-inv__tab th:first-child),#opInvSec :is(.op-inv__tab th:first-child),#opInvSec:is(.op-inv__tab td:first-child),#opInvSec :is(.op-inv__tab td:first-child){width:36px} #opInvSec:is(.op-inv__tab th:nth-child(3)),#opInvSec :is(.op-inv__tab th:nth-child(3)),#opInvSec:is(.op-inv__tab td:nth-child(3)),#opInvSec :is(.op-inv__tab td:nth-child(3)){width:120px} #opInvSec:is(.op-inv__tab th:nth-child(4)),#opInvSec :is(.op-inv__tab th:nth-child(4)),#opInvSec:is(.op-inv__tab td:nth-child(4)),#opInvSec :is(.op-inv__tab td:nth-child(4)),#opInvSec:is(.op-inv__tab th:nth-child(5)),#opInvSec :is(.op-inv__tab th:nth-child(5)),#opInvSec:is(.op-inv__tab td:nth-child(5)),#opInvSec :is(.op-inv__tab td:nth-child(5)){width:100px} #opInvSec:is(.op-inv__tab th:nth-child(3)),#opInvSec :is(.op-inv__tab th:nth-child(3)),#opInvSec:is(.op-inv__tab td:nth-child(3)),#opInvSec :is(.op-inv__tab td:nth-child(3)),#opInvSec:is(.op-inv__tab th:nth-child(4)),#opInvSec :is(.op-inv__tab th:nth-child(4)),#opInvSec:is(.op-inv__tab td:nth-child(4)),#opInvSec :is(.op-inv__tab td:nth-child(4)){text-align:right} #opInvSec:is(.op-inv__tab th:last-child),#opInvSec :is(.op-inv__tab th:last-child),#opInvSec:is(.op-inv__tab td:last-child),#opInvSec :is(.op-inv__tab td:last-child){text-align:right} #opInvSec:is(.op-inv__sum),#opInvSec :is(.op-inv__sum){display:flex;flex-direction:column;gap:10px;width:360px;margin:0 0 0 auto;padding-top:22px; border-top:1px solid var(--line)} #opInvSec:is(.op-inv__sum > div),#opInvSec :is(.op-inv__sum > div){display:flex;align-items:baseline;gap:16px} #opInvSec:is(.op-inv__sum dt),#opInvSec :is(.op-inv__sum dt){font-size:var(--fs-caption);line-height:18px;color:var(--gray)} #opInvSec:is(.op-inv__sum dd),#opInvSec :is(.op-inv__sum dd){margin:0 0 0 auto;font-size:var(--fs-small);line-height:20px;color:var(--ink);font-variant-numeric:tabular-nums} #opInvSec:is(.op-inv__sum--big),#opInvSec :is(.op-inv__sum--big){margin-top:4px} #opInvSec:is(.op-inv__sum--big dt),#opInvSec :is(.op-inv__sum--big dt){font-size:16px;line-height:20px;font-weight:700;color:var(--ink)} #opInvSec:is(.op-inv__sum--big dd),#opInvSec :is(.op-inv__sum--big dd){font-size:20px;line-height:26px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums} #opInvSec:is(.op-inv__items),#opInvSec :is(.op-inv__items){display:none} #opInvSec:is(.op-inv__item+.op-inv__item),#opInvSec :is(.op-inv__item+.op-inv__item){border-top:0;padding-top:0} #opInvSec:is(.op-inv__words),#opInvSec :is(.op-inv__words){margin-top:18px;font-size:var(--fs-caption);line-height:18px;color:var(--gray)} #opInvSec:is(.op-inv__purpose),#opInvSec :is(.op-inv__purpose){margin-top:28px;border-radius:14px;background:var(--bg-soft);padding:17px 20px 18px} #opInvSec:is(.op-inv__purposeTop),#opInvSec :is(.op-inv__purposeTop){display:flex;align-items:center;gap:16px} #opInvSec:is(.op-inv__copy),#opInvSec :is(.op-inv__copy){margin-left:auto;gap:9px;background:0;border:0;padding:0;font-family:var(--font); font-size:var(--fs-caption);line-height:18px;color:var(--blue);cursor:pointer} #opInvSec:is(.op-inv__purposeText),#opInvSec :is(.op-inv__purposeText){margin-top:3px;font-size:var(--fs-small);line-height:20px;color:var(--ink)} #opInvSec:is(.op-inv__fine),#opInvSec :is(.op-inv__fine){margin-top:20px;font-size:var(--fs-caption);line-height:18px;color:var(--gray)} #opInvSec:is(.op-inv__payH),#opInvSec :is(.op-inv__payH){font-size:20px;line-height:26px;font-weight:700;color:var(--ink)} #opInvSec:is(.op-inv__payH--m),#opInvSec :is(.op-inv__payH--m){display:none} #opInvSec:is(.op-inv__payLead),#opInvSec :is(.op-inv__payLead){margin-top:7px;font-size:var(--fs-caption);line-height:18px;color:var(--gray)} #opInvSec:is(.op-inv__qrWrap),#opInvSec :is(.op-inv__qrWrap){margin-top:25px;border-radius:16px;background:var(--bg-soft);padding:20px; display:flex;flex-direction:column;align-items:center} /* display:flex выше перебивает [hidden] — QR скрываем на оплаченном и просроченном счёте (ТЗ «Ошибки и пограничные случаи») */ #opInvSec:is(.op-inv__qrWrap[hidden]),#opInvSec :is(.op-inv__qrWrap[hidden]){display:none} #opInvSec:is(.op-inv__qrPad),#opInvSec :is(.op-inv__qrPad){display:flex;align-items:center;justify-content:center;width:232px;height:232px; border-radius:12px;background:var(--bg);animation:op-qr-in .3s var(--op-soft) .18s both} @keyframes op-qr-in{ #opInvSec:is(from),#opInvSec :is(from){opacity:0;transform:scale(.96)} #opInvSec:is(to),#opInvSec :is(to){opacity:1;transform:none} } #opInvSec:is(.op-inv__qr),#opInvSec :is(.op-inv__qr){width:200px;height:200px} #opInvSec:is(.op-inv__qr svg),#opInvSec :is(.op-inv__qr svg){display:block;width:100%;height:100%} #opInvSec:is(.op-inv__qrFall),#opInvSec :is(.op-inv__qrFall){display:flex;align-items:center;justify-content:center;height:100%;padding:0 18px; text-align:center;font-size:var(--fs-caption);line-height:18px;color:var(--gray)} #opInvSec:is(.op-inv__qrHint),#opInvSec :is(.op-inv__qrHint){margin-top:14px;text-align:center;font-size:var(--fs-caption);line-height:18px;color:var(--gray)} #opInvSec:is(.op-inv__payLabel),#opInvSec :is(.op-inv__payLabel){margin-top:20px;font-size:var(--fs-caption);line-height:18px;color:var(--gray)} #opInvSec:is(.op-inv__payAmount),#opInvSec :is(.op-inv__payAmount){margin-top:2px;font-size:32px;line-height:38px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums} #opInvSec:is(.op-inv__btn),#opInvSec :is(.op-inv__btn){display:flex;align-items:center;justify-content:center;gap:11px;width:100%;margin-top:21px; position:relative;transition:transform .12s var(--op-std)} #opInvSec:is(.op-inv__btn:active),#opInvSec :is(.op-inv__btn:active){transform:scale(.98)} #opInvSec:is(.op-inv__btn--sec),#opInvSec :is(.op-inv__btn--sec){margin-top:12px} #opInvSec:is(.op-inv__btn[aria-busy="true"]),#opInvSec :is(.op-inv__btn[aria-busy="true"]){color:transparent} #opInvSec:is(.op-inv__btn[aria-busy="true"]::after),#opInvSec :is(.op-inv__btn[aria-busy="true"]::after){content:"";position:absolute;left:50%;top:50%;width:20px;height:20px; margin:-10px;border-radius:50%;border:2px solid rgba(255,255,255,.45);border-top-color:#fff; animation:op-spin .8s linear infinite} #opInvSec:is(.op-inv__btnIcon),#opInvSec :is(.op-inv__btnIcon){flex:0 0 auto;width:16px;height:17px} #opInvSec:is(.op-inv__send),#opInvSec :is(.op-inv__send){margin-top:16px;overflow:hidden;animation:op-open .25s var(--op-soft)} #opInvSec:is(.op-inv__send[hidden]),#opInvSec :is(.op-inv__send[hidden]){display:none} @keyframes op-open{ #opInvSec:is(from),#opInvSec :is(from){opacity:0;transform:translateY(-6px)} #opInvSec:is(to),#opInvSec :is(to){opacity:1;transform:none} } #opInvSec:is(.op-inv__sent),#opInvSec :is(.op-inv__sent){margin-top:14px;text-align:center;font-size:var(--fs-caption);line-height:18px;color:var(--op-ok)} #opInvSec:is(.op-inv__sent--err),#opInvSec :is(.op-inv__sent--err){color:var(--op-red)} #opInvSec:is(.op-inv__sent[hidden]),#opInvSec :is(.op-inv__sent[hidden]){display:none} #opInvSec:is(.op-inv__copyNote),#opInvSec :is(.op-inv__copyNote){margin-top:22px;text-align:center;font-size:var(--fs-caption);line-height:18px;color:var(--gray)} #opInvSec:is(.op-inv__nextH),#opInvSec :is(.op-inv__nextH){font-size:20px;line-height:26px;font-weight:700;color:var(--ink)} #opInvSec:is(.op-steps),#opInvSec :is(.op-steps){display:flex;flex-direction:column;gap:12px;margin-top:20px;padding:0;list-style:none; counter-reset:none} #opInvSec:is(.op-steps__i),#opInvSec :is(.op-steps__i){position:relative;display:grid;grid-template-columns:28px minmax(0,1fr); column-gap:17px;padding-bottom:14px} #opInvSec:is(.op-steps__i:last-child),#opInvSec :is(.op-steps__i:last-child){padding-bottom:0} #opInvSec:is(.op-steps__i::after),#opInvSec :is(.op-steps__i::after){content:"";position:absolute;left:13px;top:34px;bottom:6px;width:2px;background:var(--line)} #opInvSec:is(.op-steps__i:last-child::after),#opInvSec :is(.op-steps__i:last-child::after){display:none} #opInvSec:is(.op-steps__dot),#opInvSec :is(.op-steps__dot){grid-row:1/3;display:flex;align-items:center;justify-content:center; width:28px;height:28px;border-radius:50%;background:var(--bg-soft); font-size:var(--fs-caption);line-height:1;font-weight:700;color:var(--gray)} #opInvSec:is(.op-steps__i--done .op-steps__dot),#opInvSec :is(.op-steps__i--done .op-steps__dot){background:var(--blue);color:var(--bg)} #opInvSec:is(.op-steps__i--done .op-steps__dot svg),#opInvSec :is(.op-steps__i--done .op-steps__dot svg){width:13px;height:10px} #opInvSec:is(.op-steps__h),#opInvSec :is(.op-steps__h){font-size:var(--fs-small);line-height:20px;font-weight:700;color:var(--ink)} #opInvSec:is(.op-steps__d),#opInvSec :is(.op-steps__d){margin-top:4px;font-size:var(--fs-caption);line-height:18px;color:var(--gray)} #opInvSec:is(.op-inv__links),#opInvSec :is(.op-inv__links){display:flex;flex-wrap:nowrap;justify-content:space-between;gap:12px 24px;margin-top:26px;padding-top:24px; border-top:1px solid var(--line)} /* в макете у этих ссылок стрелки нет — гасим ::after из components.css */ #opInvSec:is(.op-inv__link::after),#opInvSec :is(.op-inv__link::after),#opInvSec:is(.op-inv__copy::after),#opInvSec :is(.op-inv__copy::after){display:none} #opInvSec:is(.op-inv__copyIcon),#opInvSec :is(.op-inv__copyIcon){flex:0 0 auto;width:17px;height:15px} #opInvSec:is(.op-inv__link),#opInvSec :is(.op-inv__link){background:0;border:0;padding:0;font-family:var(--font); font-size:14px;line-height:20px;color:var(--blue);cursor:pointer} /* .link из components.css ставит display:inline-flex и перебивает [hidden] — возвращаем скрытие («Выставить новый счёт», «Оплатить картой» на оплаченном) */ #opInvSec:is(.op-inv__link[hidden]),#opInvSec :is(.op-inv__link[hidden]){display:none} /* ——— Планшет 768–1023 —————————————————————————————————— */ @media (max-width:1023px){ #opInvSec:is(.op-inv__in),#opInvSec :is(.op-inv__in){max-width:calc(var(--container) + var(--gutter)*2)} #opInvSec:is(.op-inv__doc),#opInvSec :is(.op-inv__doc),#opInvSec:is(.op-inv__pay),#opInvSec :is(.op-inv__pay),#opInvSec:is(.op-inv__next),#opInvSec :is(.op-inv__next){padding:32px} #opInvSec:is(.op-inv__grid),#opInvSec :is(.op-inv__grid){grid-template-columns:minmax(0,1fr);grid-template-areas:"pay" "doc" "next"; gap:16px;margin-top:36px} #opInvSec:is(.op-inv__lead),#opInvSec :is(.op-inv__lead){margin-top:22px} #opInvSec:is(.op-inv__copyNote),#opInvSec :is(.op-inv__copyNote){display:none} #opInvSec:is(.op-inv__pay),#opInvSec :is(.op-inv__pay){animation-delay:0s} #opInvSec:is(.op-inv__doc),#opInvSec :is(.op-inv__doc){animation-delay:.06s} /* 768: панель QR двухколоночная — плашка 248 слева, текст 328 справа (макет 424+360) */ #opInvSec:is(.op-inv__pay),#opInvSec :is(.op-inv__pay){display:grid;grid-template-columns:248px minmax(0,328px); column-gap:32px;align-content:start} #opInvSec:is(.op-inv__pay > *),#opInvSec :is(.op-inv__pay > *){grid-column:2} #opInvSec:is(.op-inv__qrWrap),#opInvSec :is(.op-inv__qrWrap){grid-column:1;grid-row:1/span 99;align-self:start; margin-top:0;flex-direction:column;gap:0;width:248px;height:248px;padding:20px} #opInvSec:is(.op-inv__payLabel),#opInvSec :is(.op-inv__payLabel),#opInvSec:is(.op-inv__payAmount),#opInvSec :is(.op-inv__payAmount){text-align:left} #opInvSec:is(.op-inv__payH),#opInvSec :is(.op-inv__payH){margin-top:0} #opInvSec:is(.op-inv__payLead),#opInvSec :is(.op-inv__payLead){margin-top:5px} #opInvSec:is(.op-inv__payLabel),#opInvSec :is(.op-inv__payLabel){margin-top:25px} #opInvSec:is(.op-inv__payAmount),#opInvSec :is(.op-inv__payAmount){font-size:30px;line-height:36px} #opInvSec:is(.op-inv__btn),#opInvSec :is(.op-inv__btn){height:58px;margin-top:20px} #opInvSec:is(.op-inv__btn--sec),#opInvSec :is(.op-inv__btn--sec){margin-top:12px} #opInvSec:is(.op-inv__qrPad),#opInvSec :is(.op-inv__qrPad){width:208px;height:208px;flex:0 0 auto} #opInvSec:is(.op-inv__qr),#opInvSec :is(.op-inv__qr){width:180px;height:180px} /* Макет «Заказ v2 · 01 Пусто - Tablet 768»: блок 632×84, плитка 44 слева 22, текст от 84 — те же числа, что на 1440 (в прежних макетах плитка на 768 была 36). */ #opInvSec:is(.op-way__head),#opInvSec :is(.op-way__head){min-height:84px;padding:0 20px 0 22px} #opInvSec:is(.op-way__tile),#opInvSec :is(.op-way__tile){width:44px;height:44px} } /* ——— Телефон до 767 ———————————————————————————————————— */ @media (max-width:767px){ #opInvSec:is(.op-ways),#opInvSec :is(.op-ways){gap:12px;margin-top:23.3px} #opInvSec:is(.op-way),#opInvSec :is(.op-way){border-radius:16px} /* Макет «Заказ v2 · 01 Пусто - Mobile 390»: блок 318×74, плитка 40 слева 16 и сверху 17, текст от 74 (16 + 40 + 18), подписи 15/20, кружок 22 сверху 26 у правого края 16. */ #opInvSec:is(.op-way__head),#opInvSec :is(.op-way__head){gap:18px;min-height:74px;align-items:flex-start;padding:17px 16px 0} #opInvSec:is(.op-way__text),#opInvSec :is(.op-way__text){gap:2px;margin-top:-2px} /* на 390 подпись «Счёт и закрывающие акты» в макете одна строка (краска 195,4 при колонке 188) — отдаём ей 8 px зазора до радио */ #opInvSec:is(.op-way__radio),#opInvSec :is(.op-way__radio){margin-left:-12px} #opInvSec:is(.op-way__name),#opInvSec :is(.op-way__name){font-size:15px;line-height:20px} #opInvSec:is(.op-way__desc),#opInvSec :is(.op-way__desc){font-size:15px;line-height:20px} #opInvSec:is(.op-way__tile),#opInvSec :is(.op-way__tile){width:40px;height:40px} #opInvSec:is(.op-way__radio),#opInvSec :is(.op-way__radio){align-self:flex-start;margin-top:9px} /* Макеты «Заказ v2 · 13…15 - Mobile 390»: раскрытие во всю ширину контента карточки (318), поля полей ввода 16, лупа от 15; «Изменить» остаётся в строке названия, а столбик реквизитов — в одну колонку. */ #opInvSec:is(.op-field__input),#opInvSec :is(.op-field__input){padding:0 16px} #opInvSec:is(.op-search__icon),#opInvSec :is(.op-search__icon){left:15px} #opInvSec:is(.op-search__input),#opInvSec :is(.op-search__input){padding-left:41.6px} #opInvSec:is(.op-req__list),#opInvSec :is(.op-req__list){grid-template-columns:minmax(0,1fr)} #opInvSec:is(.op-fields--man),#opInvSec :is(.op-fields--man){grid-template-columns:minmax(0,1fr)} #opInvSec:is(.op-agrees),#opInvSec :is(.op-agrees){margin-top:24px} #opInvSec:is(.op-inv__grid),#opInvSec :is(.op-inv__grid){grid-template-areas:"pay" "doc" "next";gap:12px;margin-top:36px} /* 390: текстовая колонка шагов 212 px — как текстовый блок в макете */ #opInvSec:is(.op-steps__d),#opInvSec :is(.op-steps__d){max-width:212px} #opInvSec:is(.op-inv__doc),#opInvSec :is(.op-inv__doc),#opInvSec:is(.op-inv__pay),#opInvSec :is(.op-inv__pay),#opInvSec:is(.op-inv__next),#opInvSec :is(.op-inv__next){padding:19px 20px 20px} #opInvSec:is(.op-inv__lead),#opInvSec :is(.op-inv__lead){margin-top:26px;font-size:var(--fs-body);line-height:var(--lh-body)} /* 390: плашка QR во всю ширину карточки, высота по содержимому (макет 310×280) */ #opInvSec:is(.op-inv__qrWrap),#opInvSec :is(.op-inv__qrWrap){flex-direction:column;order:2;margin-top:20px; width:auto;height:auto;padding:20px} /* 390: номер счёта, дата и чип — столбиком (макет 989/1019/1047) */ #opInvSec:is(.op-inv__docTop),#opInvSec :is(.op-inv__docTop){flex-direction:column;align-items:flex-start;gap:0} #opInvSec:is(.op-chip),#opInvSec :is(.op-chip){margin-left:0;margin-top:12px} #opInvSec:is(.op-inv__docDate),#opInvSec :is(.op-inv__docDate){margin-top:5px} #opInvSec:is(.op-inv__payLabel),#opInvSec :is(.op-inv__payLabel){margin-top:14px} #opInvSec:is(.op-inv__payAmount),#opInvSec :is(.op-inv__payAmount){margin-top:2px} #opInvSec:is(.op-inv__btn),#opInvSec :is(.op-inv__btn){height:56px;margin-top:20px} #opInvSec:is(.op-inv__pay),#opInvSec :is(.op-inv__pay){display:flex;flex-direction:column} #opInvSec:is(.op-inv__payH),#opInvSec :is(.op-inv__payH){order:-3} #opInvSec:is(.op-inv__payH--d),#opInvSec :is(.op-inv__payH--d){display:none} #opInvSec:is(.op-inv__payH--m),#opInvSec :is(.op-inv__payH--m){display:inline} #opInvSec:is(.op-inv__payLead),#opInvSec :is(.op-inv__payLead){display:none} #opInvSec:is(.op-inv__payLabel),#opInvSec :is(.op-inv__payLabel){order:-2} #opInvSec:is(.op-inv__payAmount),#opInvSec :is(.op-inv__payAmount){order:-2} #opInvSec:is(.op-inv__btn),#opInvSec :is(.op-inv__btn){order:-1;margin-top:20px} #opInvSec:is(.op-inv__btn--sec),#opInvSec :is(.op-inv__btn--sec){order:-1} #opInvSec:is(.op-inv__send),#opInvSec :is(.op-inv__send){order:-1} #opInvSec:is(.op-inv__sent),#opInvSec :is(.op-inv__sent){order:-1} #opInvSec:is(.op-inv__copyNote),#opInvSec :is(.op-inv__copyNote){order:3} #opInvSec:is(.op-inv__qrPad),#opInvSec :is(.op-inv__qrPad){width:176px;height:176px} #opInvSec:is(.op-inv__qr),#opInvSec :is(.op-inv__qr){width:152px;height:152px} #opInvSec:is(.op-inv__sides),#opInvSec :is(.op-inv__sides){grid-template-columns:minmax(0,1fr);gap:20px} #opInvSec:is(.op-inv__tab),#opInvSec :is(.op-inv__tab){display:none} /* 390: вместо таблицы — строка(и) услуги между линиями (макет 1790+81); второй запрос — вторая карточка без двойной линии между ними (наряд «Дизайн-46») */ #opInvSec:is(.op-inv__items),#opInvSec :is(.op-inv__items){display:block;margin-top:32px} #opInvSec:is(.op-inv__item),#opInvSec :is(.op-inv__item){padding:16px 0 18px; border-top:1px solid var(--line);border-bottom:1px solid var(--line)} #opInvSec:is(.op-inv__itemName),#opInvSec :is(.op-inv__itemName){font-size:var(--fs-small);line-height:20px;color:var(--ink)} #opInvSec:is(.op-inv__itemRow),#opInvSec :is(.op-inv__itemRow){display:flex;gap:16px;margin-top:6px; font-size:var(--fs-small);line-height:20px;color:var(--gray)} #opInvSec:is(.op-inv__itemRow b),#opInvSec :is(.op-inv__itemRow b){margin-left:auto;font-weight:400;color:var(--ink)} #opInvSec:is(.op-inv__sum),#opInvSec :is(.op-inv__sum){border-top:0;padding-top:21px} /* 390: «Скопировать» уходит под текст назначения (макет 2184,9) */ #opInvSec:is(.op-inv__purpose),#opInvSec :is(.op-inv__purpose){display:flex;flex-direction:column;padding:17px 20px 17px} #opInvSec:is(.op-inv__purposeTop),#opInvSec :is(.op-inv__purposeTop){display:contents} #opInvSec:is(.op-inv__purpose .op-inv__label),#opInvSec :is(.op-inv__purpose .op-inv__label){order:1} #opInvSec:is(.op-inv__purposeText),#opInvSec :is(.op-inv__purposeText){order:2;margin-top:5px} #opInvSec:is(.op-inv__copy),#opInvSec :is(.op-inv__copy){order:3;margin-left:0;margin-top:15px} #opInvSec:is(.op-inv__bank),#opInvSec :is(.op-inv__bank){padding:20px} #opInvSec:is(.op-inv__bankList),#opInvSec :is(.op-inv__bankList){grid-template-columns:minmax(0,1fr);gap:2px 0} #opInvSec:is(.op-inv__bankList dd),#opInvSec :is(.op-inv__bankList dd){margin-bottom:12px} #opInvSec:is(.op-inv__sum),#opInvSec :is(.op-inv__sum){width:auto;margin-left:0} } /* ——— Служебные ссылки в подсказках и плашках ————————————————— */ #opInvSec:is(.op-sug__go),#opInvSec :is(.op-sug__go),#opInvSec:is(.op-tip__go),#opInvSec :is(.op-tip__go){background:0;border:0;padding:0;font-family:var(--font); font-size:inherit;line-height:inherit;color:var(--blue);text-decoration:underline;cursor:pointer} #opInvSec:is(.op-plate .op-sug__go),#opInvSec :is(.op-plate .op-sug__go){color:var(--op-red)} #opInvSec:is(.op-field__tip),#opInvSec :is(.op-field__tip){color:var(--gray)} /* ——— prefers-reduced-motion: только прозрачность ————————————— */ @media (prefers-reduced-motion:reduce){ #opInvSec:is(.op-way),#opInvSec :is(.op-way),#opInvSec:is(.op-way__tile),#opInvSec :is(.op-way__tile),#opInvSec:is(.op-way__radio),#opInvSec :is(.op-way__radio),#opInvSec:is(.op-way__radio::after),#opInvSec :is(.op-way__radio::after),#opInvSec:is(.op-bill),#opInvSec :is(.op-bill),#opInvSec:is(.op-bill__in),#opInvSec :is(.op-bill__in),#opInvSec:is(.op-pay),#opInvSec :is(.op-pay),#opInvSec:is(.op-note),#opInvSec :is(.op-note),#opInvSec:is(.op-pay__txt),#opInvSec :is(.op-pay__txt),#opInvSec:is(.op-chip),#opInvSec :is(.op-chip),#opInvSec:is(.op-inv__btn),#opInvSec :is(.op-inv__btn){transition-duration:.12s!important; transition-property:opacity,background,color,box-shadow!important} #opInvSec:is(.op-agrees--shake),#opInvSec :is(.op-agrees--shake){animation:none} #opInvSec:is(.op-sug),#opInvSec :is(.op-sug),#opInvSec:is(.op-inv__grid > .op-card),#opInvSec :is(.op-inv__grid > .op-card),#opInvSec:is(.op-inv__qrPad),#opInvSec :is(.op-inv__qrPad),#opInvSec:is(.op-inv__send),#opInvSec :is(.op-inv__send){animation-duration:.12s; animation-name:op-fade} @keyframes op-fade{ #opInvSec:is(from),#opInvSec :is(from){opacity:0} #opInvSec:is(to),#opInvSec :is(to){opacity:1} } #opInvSec:is(.op-search__spin),#opInvSec :is(.op-search__spin){animation-duration:1.6s} } /* ——— Чипы-примеры под полем вопроса (макет «Заказ v2 · 01 Пусто», наряд «Дизайн-56», ТЗ [С] 17.10 10:27) —————————————————————— Было: строка-сноска «Например: робот-пылесос…» 13/18 под полем. Стало: подпись «Например:» 15/20 Regular серым и 4 чипа-пилюли 36 высотой — белые, обводка --line-2 (#D2D2D7 в макете), текст 15/20 Regular --ink. Замеры 1440: подпись x 349 (край поля), чип от x 438 (зазор 11,5), поля чипа 17, зазор между чипами 8, отбивка от поля 11. */ /* .op-sq — grid «кружок-номер 28 + поле»; строка примеров идёт во всю ширину (в макете номеров у вопросов нет вовсе и подпись «Например:» стоит ровно у левого края карточки — 349 при поле 348). */ #opInvSec:is(.op-eg),#opInvSec :is(.op-eg){grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center; gap:8px;margin-top:11px} /* Зазор «Например:» → первый чип: в макете 1440 подпись кончается на 426,5, чип начинается с 438 (11,5). Флексовый gap 8 + эта отбивка дают те же 11,5 с поправкой на ширину подписи в браузере. Поля чипа 15,3 вместо 17 по макету: в Figma чип подогнан по «краске» текста, в браузере — по его ширине с боковыми зазорами, и при 17 каждый следующий чип уезжал вправо на ~2 px. С 15,3 коробки чипов совпадают с макетом, максимум по всем 16 чипам — 1,2 px. */ /* Отбивка 4,1 → 2,2 (наряд «Дизайн-59»): после снятия постоянной поправки «краски» по левому краю (−1 px, elsweep2.py) медиана сдвига всех 16 чипов макета 1440/768 оказалась +1,9 px, на 390 — +1,0 px. Со сдвигом ряда весь набор чипов укладывается в ±2 px. */ #opInvSec:is(.op-eg__label),#opInvSec :is(.op-eg__label){margin-right:2.2px;font-size:15px;line-height:20px;color:var(--gray-2)} @media (max-width:767px){ #opInvSec:is(.op-eg__label),#opInvSec :is(.op-eg__label){margin-right:3.1px} } #opInvSec:is(.op-eg__chip),#opInvSec :is(.op-eg__chip){flex:0 0 auto;height:36px;padding:0 15.3px;border:1px solid var(--line-2); border-radius:999px;background:var(--bg);font-family:var(--font); font-size:15px;line-height:20px;color:var(--ink);cursor:pointer; transition:border-color var(--t-hover) var(--ease),background var(--t-hover) var(--ease)} #opInvSec:is(.op-eg__chip:hover),#opInvSec :is(.op-eg__chip:hover){border-color:var(--blue);color:var(--blue)} @media (prefers-reduced-motion:reduce){ #opInvSec:is(.op-eg__chip),#opInvSec :is(.op-eg__chip){transition:none} } /* Макеты «Заказ v2 … Mobile 390»: чип 34 высотой, ряды чипов с зазором 4 (1229…1263 и 1267…1301). Блок стоит ПОСЛЕ базового .op-eg__chip: в медиазапросе выше он перебивался более поздним базовым правилом. */ @media (max-width:767px){ #opInvSec:is(.op-eg),#opInvSec :is(.op-eg){row-gap:4px} #opInvSec:is(.op-eg__chip),#opInvSec :is(.op-eg__chip){height:34px} } /* Строка примеров под ошибкой блока «Где вы?» — в 8,1 от ошибки (без ошибки она стоит в 10…12 от самих блоков). Правило в хвосте файла: в медиазапросе 390 его перебивало более позднее `.op-sq--place .op-eg`. */ #opInvSec:is(.op-places+.op-field__err+.op-eg),#opInvSec :is(.op-places+.op-field__err+.op-eg){margin-top:8.1px} /* ——— Запрос 2 внутри карточки «По каким запросам…» (макет «Заказ v2 · 10», наряд «Дизайн-62») ———————————————————————————————————— Линия в 39 от строки «Подтверждаю…» (390 — 41,5), заголовок «Запрос 2» 24/30 Bold в 31,03 от линии (390 — 27,53), «Удалить» 15/20 Regular у правого края контента, пояснение 17/24 (390 — 15/20) в 10,65 (390 — 12,82), первый вопрос в 35,83 (390 — 31,43), кнопка «Составить запрос 2» в 45,35 от последней подписи (390 — 31,35). */ #opInvSec:is(.op-qi--2 .op-qi__sep),#opInvSec :is(.op-qi--2 .op-qi__sep){margin-top:39px} #opInvSec:is(.op-qi--2 .op-qi__head),#opInvSec :is(.op-qi--2 .op-qi__head){margin-top:31.03px;margin-bottom:0} #opInvSec:is(.op-qi--2 .op-qi__del),#opInvSec :is(.op-qi--2 .op-qi__del){margin-left:auto} #opInvSec:is(.op-qi--2 .op-qi__lead2),#opInvSec :is(.op-qi--2 .op-qi__lead2){margin-top:10.65px;margin-bottom:0} #opInvSec:is(.op-qi--2 .op-sqs),#opInvSec :is(.op-qi--2 .op-sqs){margin-top:35.83px} #opInvSec:is(.op-qi--2 .op-qi__submit),#opInvSec :is(.op-qi--2 .op-qi__submit){margin-top:45.35px} @media (max-width:767px){ #opInvSec:is(.op-qi--2 .op-qi__sep),#opInvSec :is(.op-qi--2 .op-qi__sep){margin-top:41.5px} #opInvSec:is(.op-qi--2 .op-qi__head),#opInvSec :is(.op-qi--2 .op-qi__head){margin-top:27.53px} #opInvSec:is(.op-qi--2 .op-qi__lead2),#opInvSec :is(.op-qi--2 .op-qi__lead2){margin-top:12.82px;font-size:15px;line-height:20px} #opInvSec:is(.op-qi--2 .op-sqs),#opInvSec :is(.op-qi--2 .op-sqs){margin-top:31.43px} #opInvSec:is(.op-qi--2 .op-qi__submit),#opInvSec :is(.op-qi--2 .op-qi__submit){margin-top:31.35px} } /* ═══════════════════════════════════════════════════════════════════ «Заказ v3 · Белая» — каркас кадра w01 (наряд «Дизайн-68», макеты _incoming/2026-10-18_payment_white, [С] 18.10 14:09). Блок в хвосте файла: перебивает раскладку v2, не трогая её правила — кадры v01…v15 остаются собранными как были, пока вёрстка v3 идёт. Значения — из эталона reports/order_flow/w_ref/w01_*.json. ═══════════════════════════════════════════════════════════════════ */ /* Страница белая, карточек-коробок у секций больше нет: разделы идут подряд и отбиваются линиями. */ #opInvSec:is(.op__sec),#opInvSec :is(.op__sec){background:var(--bg);padding:60.4px 0 97px} #opInvSec:is(.op__in),#opInvSec :is(.op__in){max-width:var(--container)} #opInvSec:is(.op__kicker),#opInvSec :is(.op__kicker){font-size:17px;line-height:24px;font-weight:700;color:var(--blue)} #opInvSec:is(.op__h1),#opInvSec :is(.op__h1){margin-top:11.9px;font-size:56px;line-height:60px;max-width:1100px} #opInvSec:is(.op__lead),#opInvSec :is(.op__lead){margin-top:19px;font-size:19px;line-height:28px;color:var(--ink);max-width:660px} /* Две колонки: форма 720 + зазор 80 + карточка заказа 400 = 1200. */ #opInvSec:is(.op__form),#opInvSec :is(.op__form){display:block;margin-top:0} #opInvSec:is(.op__cols),#opInvSec :is(.op__cols){display:grid;grid-template-columns:minmax(0,720px) minmax(0,400px); gap:80px;align-items:start;margin-top:63.3px} #opInvSec:is(.op__main),#opInvSec :is(.op__main){display:flex;flex-direction:column} /* Шаг формы: синий номер, заголовок, сверху линия-разделитель. */ #opInvSec:is(.op-step),#opInvSec :is(.op-step){padding-top:48px;border-top:1px solid var(--line-2)} #opInvSec:is(.op-step:first-child),#opInvSec :is(.op-step:first-child){padding-top:0;border-top:0} #opInvSec:is(.op-step__n),#opInvSec :is(.op-step__n){font-size:17px;line-height:24px;font-weight:700;color:var(--blue)} #opInvSec:is(.op-step__h),#opInvSec :is(.op-step__h){margin-top:11.5px;font-size:32px;line-height:38px;font-weight:700; color:var(--ink);letter-spacing:-.0212em} #opInvSec:is(.op-step__h .muted),#opInvSec :is(.op-step__h .muted){color:var(--gray-2)} /* Низ шага до линии следующего */ #opInvSec:is(.op-step),#opInvSec :is(.op-step){padding-bottom:56px} #opInvSec:is(.op-step:last-child),#opInvSec :is(.op-step:last-child){padding-bottom:0} /* Тариф: к имени/цене/подписи добавился список преимуществ с галочкой. */ #opInvSec:is(.op-tariff__list),#opInvSec :is(.op-tariff__list){display:flex;flex-direction:column;gap:14px;margin-top:24px; padding-top:22px;border-top:1px solid var(--line-2)} #opInvSec:is(.op-tariff__li),#opInvSec :is(.op-tariff__li){position:relative;padding-left:25px;font-size:15px;line-height:22px; color:var(--ink)} #opInvSec:is(.op-tariff__li::before),#opInvSec :is(.op-tariff__li::before){content:"";position:absolute;left:0;top:3px;width:16px;height:16px; background:var(--blue);-webkit-mask:url(/img/icons/check.svg) no-repeat center/11.8px 8.5px; mask:url(/img/icons/check.svg) no-repeat center/11.8px 8.5px} #opInvSec:is(.op-tariff__li--up),#opInvSec :is(.op-tariff__li--up){color:var(--blue);font-weight:700} /* Подпись под меткой поля (в v2 её не было). */ #opInvSec:is(.op-field__sub),#opInvSec :is(.op-field__sub){display:block;margin-top:6px;font-size:17px;line-height:24px;color:var(--ink)} /* Способы оплаты внутри шага 4. */ #opInvSec:is(.op-pay-ways),#opInvSec :is(.op-pay-ways){margin-top:34px} #opInvSec:is(.op-ways__h),#opInvSec :is(.op-ways__h){display:block} /* ——— Карточка «Ваш заказ» ——————————————————————————————— */ #opInvSec:is(.op-sum),#opInvSec :is(.op-sum){background:var(--bg-soft);border-radius:20px;padding:42px 32px 36px} #opInvSec:is(.op-sum__h),#opInvSec :is(.op-sum__h){font-size:24px;line-height:30px;font-weight:700;color:var(--ink)} #opInvSec:is(.op-sum__perks),#opInvSec :is(.op-sum__perks){display:flex;flex-direction:column;gap:18px;margin-top:30px; padding-top:30px;border-top:1px solid var(--line-2);list-style:none} #opInvSec:is(.op-sum__perk),#opInvSec :is(.op-sum__perk){position:relative;padding-left:25px;font-size:15px;line-height:22px;color:var(--ink)} #opInvSec:is(.op-sum__perk::before),#opInvSec :is(.op-sum__perk::before){content:"";position:absolute;left:0;top:3px;width:16px;height:16px; background:var(--blue);-webkit-mask:url(/img/icons/check.svg) no-repeat center/11.8px 8.5px; mask:url(/img/icons/check.svg) no-repeat center/11.8px 8.5px} /* Прилипание — только на десктопе: в кадрах «Скролл ПК 2» и «3» карточка стоит на 32 px от верха окна и дальше не двигается. */ @media (min-width:1024px){ #opInvSec:is(.op-sum),#opInvSec :is(.op-sum){position:sticky;top:32px} } /* ——— Нижняя панель оплаты на мобиле ——————————————————— */ #opInvSec:is(.op-bar),#opInvSec :is(.op-bar){position:fixed;left:0;right:0;bottom:0;z-index:30;display:none; align-items:center;justify-content:space-between;gap:16px;height:93px; padding:0 16px;background:rgba(255,255,255,.94);border-top:1px solid var(--line-2); backdrop-filter:saturate(180%) blur(12px)} #opInvSec:is(.op-bar__sums),#opInvSec :is(.op-bar__sums){display:flex;flex-direction:column;gap:4px} #opInvSec:is(.op-bar__price),#opInvSec :is(.op-bar__price){font-size:20px;line-height:24px;font-weight:700;color:var(--ink)} #opInvSec:is(.op-bar__name),#opInvSec :is(.op-bar__name){font-size:13px;line-height:18px;color:var(--gray)} #opInvSec:is(.op-bar__btn),#opInvSec :is(.op-bar__btn){width:232px;height:50px;padding:0} @media (max-width:1023px){ #opInvSec:is(.op__sec),#opInvSec :is(.op__sec){padding-top:46.4px} #opInvSec:is(.op__in),#opInvSec :is(.op__in){max-width:688px} #opInvSec:is(.op__kicker),#opInvSec :is(.op__kicker){font-size:17px;line-height:24px} #opInvSec:is(.op__h1),#opInvSec :is(.op__h1){margin-top:16.5px;font-size:44px;line-height:48px} #opInvSec:is(.op__lead),#opInvSec :is(.op__lead){margin-top:17px;font-size:19px;line-height:28px} #opInvSec:is(.op__cols),#opInvSec :is(.op__cols){display:block} #opInvSec:is(.op__cols),#opInvSec :is(.op__cols){margin-top:51px} #opInvSec:is(.op-step),#opInvSec :is(.op-step){padding-top:44px;padding-bottom:52px} #opInvSec:is(.op-step__h),#opInvSec :is(.op-step__h){font-size:30px;line-height:36px} #opInvSec:is(.op-sum),#opInvSec :is(.op-sum){margin-top:56px;padding:38px 28px 34px} } @media (max-width:767px){ #opInvSec:is(.op__sec),#opInvSec :is(.op__sec){padding-top:27.3px;padding-bottom:58px} #opInvSec:is(.op__in),#opInvSec :is(.op__in){max-width:350px} #opInvSec:is(.op__kicker),#opInvSec :is(.op__kicker){font-size:15px;line-height:20px} #opInvSec:is(.op__h1),#opInvSec :is(.op__h1){margin-top:14px;font-size:34px;line-height:38px} #opInvSec:is(.op__lead),#opInvSec :is(.op__lead){margin-top:14px;font-size:17px;line-height:24px} #opInvSec:is(.op__cols),#opInvSec :is(.op__cols){margin-top:44px} #opInvSec:is(.op-step),#opInvSec :is(.op-step){padding-top:38px;padding-bottom:46px} #opInvSec:is(.op-step__h),#opInvSec :is(.op-step__h){font-size:26px;line-height:31px} /* У H2 шага 3 в макете 390 своя, более узкая коробка: три строки («Запрос для проверки.» / «Соберём из ваших» / «ответов.»), краска строки 279,4. Модификатор, а не
— DESIGN_RULES п.5. */ #opInvSec:is(.op-step__h--q),#opInvSec :is(.op-step__h--q){max-width:282px} #opInvSec:is(.op-tariff__list),#opInvSec :is(.op-tariff__list){gap:12px;margin-top:20px;padding-top:18px} #opInvSec:is(.op-field__sub),#opInvSec :is(.op-field__sub){font-size:15px;line-height:20px} #opInvSec:is(.op-sum),#opInvSec :is(.op-sum){margin-top:40px;padding:34px 20px 30px;border-radius:18px} #opInvSec:is(.op-sum__h),#opInvSec :is(.op-sum__h){font-size:20px;line-height:26px} #opInvSec:is(.op-bar),#opInvSec :is(.op-bar){display:flex} } /* Тариф v3: карточка белая с обводкой, выбранная — синяя 2 px; зазор 16 (472 → 488 в макете w01@1440). Правила v2 выше не трогаем. */ #opInvSec:is(.op-tariffs),#opInvSec :is(.op-tariffs){gap:16px} #opInvSec:is(.op-tariff),#opInvSec :is(.op-tariff){background:var(--bg);box-shadow:inset 0 0 0 1px var(--line-2)} #opInvSec:is(.op-tariff--on),#opInvSec :is(.op-tariff--on){box-shadow:inset 0 0 0 2px var(--blue)} @media (min-width:1024px){ /* карточка 352×271: имя в 29,8 от верха, имя → цена и цена → подпись по 35,5 */ #opInvSec:is(.op-tariff),#opInvSec :is(.op-tariff){padding:38.1px 20px 21px 21px} #opInvSec:is(.op-tariff__price),#opInvSec :is(.op-tariff__price){margin-top:11.9px} } /* Сводка в карточке «Ваш заказ» (w01@1440): строки 17/24 тёмным, шаг 32,3 (476,2 → 508,5), линия в 24 от последней строки, «Итого» 19/24 Bold в 46,7 после линии. Верхней линии у списка в v3 нет. */ #opInvSec:is(.op-sum .op-summary),#opInvSec :is(.op-sum .op-summary){margin-top:24.5px;padding-top:0;border-top:0;gap:16.1px} #opInvSec:is(.op-sum .op-summary dt),#opInvSec :is(.op-sum .op-summary dt){color:var(--ink)} #opInvSec:is(.op-sum .op-summary>.op-summary__total),#opInvSec :is(.op-sum .op-summary>.op-summary__total){margin-top:26.5px;padding-top:49.4px} #opInvSec:is(.op-tariff__list),#opInvSec :is(.op-tariff__list){padding-top:13.2px} /* Низ шага до линии следующего (w01@1440: последний пункт тарифа 689,2 → линия 812 → «Шаг 2 из 4» 874,5). */ @media (min-width:1024px){ #opInvSec:is(.op-step),#opInvSec :is(.op-step){padding-bottom:25.1px} /* Кнопка в карточке «Ваш заказ»: 750…806 при согласиях выше. */ #opInvSec:is(.op-sum .op-pay),#opInvSec :is(.op-sum .op-pay){margin-top:11px} } @media (min-width:1024px){ /* пункты карточки заказа: кнопка 806 → линия → «Отчёт через…» 860,2 */ #opInvSec:is(.op-sum__perks),#opInvSec :is(.op-sum__perks){margin-top:12px;padding-top:7.6px} /* поля шага: «Расскажите о бизнесе.» 910,1 → «Компания или бренд» 981,8 */ #opInvSec:is(.op-step .op-fields),#opInvSec :is(.op-step .op-fields){margin-top:31.4px} } /* Ряда чипов-примеров под вопросом в макетах v3 нет ни в одном из 22 кадров (проверено по reports/order_flow/w_texts.md): подсказка ушла в строку под меткой и в плейсхолдер. Разметку не трогаем — скрываем. */ #opInvSec:is(.op-eg),#opInvSec :is(.op-eg){display:none} /* ═══════════════════════════════════════════════════════════════════ «Заказ v3 · Белая» — кадр w01, доводка отбивок и типографики (наряд «Дизайн-69», санкции Д-68). Все числа — из эталона reports/order_flow/w_ref/w01_{1440,768,390}.json: кегль, интерлиньяж и вес взяты как есть, отбивки пересчитаны из y узлов через поправку на «тугой bbox» Figma (та же, что в tools/elvert.py). ═══════════════════════════════════════════════════════════════════ */ /* ——— Верх кадра ————————————————————————————————————————— */ #opInvSec:is(.op__h1),#opInvSec :is(.op__h1){margin-top:11.5px} #opInvSec:is(.op__lead),#opInvSec :is(.op__lead){margin-top:20.6px;color:var(--gray)} #opInvSec:is(.op__cols),#opInvSec :is(.op__cols){margin-top:65.2px} /* ——— Шаг: линия сверху 1 px, номер, заголовок ————————————— */ #opInvSec:is(.op-step),#opInvSec :is(.op-step){padding-top:54.8px;padding-bottom:56px} #opInvSec:is(.op-step:first-child),#opInvSec :is(.op-step:first-child){padding-top:0} #opInvSec:is(.op-step:last-child),#opInvSec :is(.op-step:last-child){padding-bottom:0} #opInvSec:is(.op-step__h),#opInvSec :is(.op-step__h){margin-top:11.5px} /* ——— Тариф: карточка 352×271 на 1440 ——————————————————— */ #opInvSec:is(.op-tariffs),#opInvSec :is(.op-tariffs){margin-top:31.7px;gap:16px} #opInvSec:is(.op-tariff),#opInvSec :is(.op-tariff){padding:24px 25px 25.75px 25.5px} #opInvSec:is(.op-tariff__name),#opInvSec :is(.op-tariff__name){font-size:19px;line-height:24px;font-weight:700} #opInvSec:is(.op-tariff__price),#opInvSec :is(.op-tariff__price){margin-top:10.5px;font-size:28px;line-height:34px} #opInvSec:is(.op-tariff__desc),#opInvSec :is(.op-tariff__desc){margin-top:3.8px;font-size:15px;line-height:20px} #opInvSec:is(.op-tariff__list),#opInvSec :is(.op-tariff__list){margin-top:20.75px;padding-top:19.35px;gap:8px} #opInvSec:is(.op-tariff__li),#opInvSec :is(.op-tariff__li){padding-left:24.9px;line-height:22px} #opInvSec:is(.op-tariff__li--up),#opInvSec :is(.op-tariff__li--up){margin-top:6.2px} /* «Уже купили Проверку?» в кадре w01 макета нет — подсказка живёт в пункте тарифа «После Проверки — 14 900 ₽». */ #opInvSec:is(#opUpsell),#opInvSec :is(#opUpsell){display:none} /* ——— Поля: метка 19/24 Bold, подпись 17/24, поле в 12,4 ——————— */ #opInvSec:is(.op-field__label),#opInvSec :is(.op-field__label){font-size:19px;line-height:24px;font-weight:700} #opInvSec:is(.op-field__sub),#opInvSec :is(.op-field__sub){margin-top:2.6px;color:var(--gray)} #opInvSec:is(.op-field__sub+.op-field__input),#opInvSec :is(.op-field__sub+.op-field__input){margin-top:12.4px} #opInvSec:is(.op-step .op-fields),#opInvSec :is(.op-step .op-fields){margin-top:34.8px} /* ——— Шаг 3: вопросы ———————————————————————————————————— */ #opInvSec:is(.op-qz),#opInvSec :is(.op-qz){margin-top:0} #opInvSec:is(.op-sqs),#opInvSec :is(.op-sqs){margin-top:36.3px;gap:32.3px} #opInvSec:is(.op-sq),#opInvSec :is(.op-sq){width:100%} #opInvSec:is(.op-sq__label),#opInvSec :is(.op-sq__label){font-size:19px;line-height:24px;font-weight:700} #opInvSec:is(.op-sq__desc),#opInvSec :is(.op-sq__desc){margin-top:3px;font-size:17px;line-height:24px;color:var(--gray)} #opInvSec:is(.op-sq__input),#opInvSec :is(.op-sq__input){margin-top:12.6px} /* «Где вас ищут?» — два блока 352×88 в ряд: плитка 44 слева, подпись справа, кружок у правого края по центру блока. */ #opInvSec:is(.op-places),#opInvSec :is(.op-places){gap:16px;margin-top:11.8px} #opInvSec:is(.op-place),#opInvSec :is(.op-place){display:flex;align-items:center;gap:17px;min-height:88px; padding:0 21px 0 25px;border-radius:20px} #opInvSec:is(.op-place__tile),#opInvSec :is(.op-place__tile){flex:0 0 auto;width:44px;height:44px;border-radius:14px} #opInvSec:is(.op-place__text),#opInvSec :is(.op-place__text){display:flex;flex-direction:column;min-width:0} #opInvSec:is(.op-place__name),#opInvSec :is(.op-place__name){margin-top:0;font-size:17px;line-height:24px;font-weight:700} #opInvSec:is(.op-place__desc),#opInvSec :is(.op-place__desc){margin-top:3.8px;font-size:15px;line-height:20px} #opInvSec:is(.op-place__radio),#opInvSec :is(.op-place__radio){top:50%;right:21px;margin-top:-11px} #opInvSec:is(.op-sq__hint--both),#opInvSec :is(.op-sq__hint--both){margin-top:23.4px;font-size:17px;line-height:24px;color:var(--gray)} #opInvSec:is(.op-qi__submit),#opInvSec :is(.op-qi__submit){margin-top:32.2px;font-weight:700} #opInvSec:is(.op-qi__submitNote),#opInvSec :is(.op-qi__submitNote){margin-top:13.2px;font-size:15px;line-height:22px} /* Плашка-заготовка запроса: 720×142, фон #F5F5F7 */ #opInvSec:is(.op-qp),#opInvSec :is(.op-qp){display:flex;flex-direction:column;margin-top:32.65px;min-height:142px; padding:28.1px 28.5px 26.6px;border-radius:20px;background:var(--bg-soft)} #opInvSec:is(.op-qp__k),#opInvSec :is(.op-qp__k){font-size:13px;line-height:18px;font-weight:700;color:var(--gray)} #opInvSec:is(.op-qp__t),#opInvSec :is(.op-qp__t){margin-top:9.3px;max-width:430px;font-size:24px;line-height:30px; font-weight:700;color:var(--gray-2)} /* ——— Шаг 4: способы оплаты в ряд, как «Где вас ищут?» ————————— */ #opInvSec:is(.op-pay-ways),#opInvSec :is(.op-pay-ways){margin-top:33.2px} #opInvSec:is(.op-ways),#opInvSec :is(.op-ways){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:10.5px} #opInvSec:is(.op-way__head),#opInvSec :is(.op-way__head){gap:17px;min-height:88px;padding:0 21px 0 25px;border-radius:20px} #opInvSec:is(.op-way__text),#opInvSec :is(.op-way__text){gap:4.9px} #opInvSec:is(.op-way__name),#opInvSec :is(.op-way__name){font-size:17px;line-height:24px;font-weight:700} #opInvSec:is(.op-way__desc),#opInvSec :is(.op-way__desc){font-size:15px;line-height:20px} /* ——— Карточка «Ваш заказ» ——————————————————————————————— */ #opInvSec:is(.op-sum),#opInvSec :is(.op-sum){padding:36.2px 32px 32.2px} #opInvSec:is(.op-sum .op-summary),#opInvSec :is(.op-sum .op-summary){margin-top:23.15px;padding-top:0;border-top:0;gap:8.3px} #opInvSec:is(.op-sum .op-summary dt),#opInvSec :is(.op-sum .op-summary dt),#opInvSec:is(.op-sum .op-summary dd),#opInvSec :is(.op-sum .op-summary dd){font-size:17px;line-height:24px} #opInvSec:is(.op-sum .op-summary>.op-summary__total),#opInvSec :is(.op-sum .op-summary>.op-summary__total){margin-top:24.33px;padding-top:16.8px; border-top:1px solid var(--line)} #opInvSec:is(.op-sum .op-summary__total dt),#opInvSec :is(.op-sum .op-summary__total dt){font-size:19px;line-height:24px;font-weight:700} #opInvSec:is(.op-sum .op-summary__total dd),#opInvSec :is(.op-sum .op-summary__total dd){font-size:40px;line-height:44px;font-weight:400} #opInvSec:is(.op-sum .op-agree),#opInvSec :is(.op-sum .op-agree){margin-top:23.3px} #opInvSec:is(.op-sum .op-agree--2),#opInvSec :is(.op-sum .op-agree--2){margin-top:16px} #opInvSec:is(.op-agree__text),#opInvSec :is(.op-agree__text){line-height:22px} /* Подписи под кнопкой в макете v3 нет — список с галочками идёт сразу. */ #opInvSec:is(.op-note),#opInvSec :is(.op-note){display:none} #opInvSec:is(.op-sum .op-pay),#opInvSec :is(.op-sum .op-pay){margin-top:24.75px} #opInvSec:is(.op-sum__perks),#opInvSec :is(.op-sum__perks){margin-top:24px;padding-top:23.37px;gap:14px} #opInvSec:is(.op-sum__perk),#opInvSec :is(.op-sum__perk){padding-left:27px;font-size:17px;line-height:24px} #opInvSec:is(.op-sum__perk::before),#opInvSec :is(.op-sum__perk::before){top:4.6px} /* ——— Планшет 768 ————————————————————————————————————— */ @media (max-width:1023px){ #opInvSec:is(.op__h1),#opInvSec :is(.op__h1){margin-top:12.3px} #opInvSec:is(.op__lead),#opInvSec :is(.op__lead){margin-top:15.7px} #opInvSec:is(.op__cols),#opInvSec :is(.op__cols){margin-top:48.1px} #opInvSec:is(.op-step),#opInvSec :is(.op-step){padding-top:46.7px;padding-bottom:48px} #opInvSec:is(.op-step__h),#opInvSec :is(.op-step__h){margin-top:10.3px} #opInvSec:is(.op-tariffs),#opInvSec :is(.op-tariffs){margin-top:31.9px} #opInvSec:is(.op-tariff),#opInvSec :is(.op-tariff){padding:23.4px 23px 23.65px 23.5px} #opInvSec:is(.op-tariff__price),#opInvSec :is(.op-tariff__price){margin-top:8.5px} #opInvSec:is(.op-tariff__list),#opInvSec :is(.op-tariff__list){margin-top:18.75px;padding-top:17.35px;gap:8.2px} #opInvSec:is(.op-tariff__li),#opInvSec :is(.op-tariff__li){padding-left:24.6px} #opInvSec:is(.op-step .op-fields),#opInvSec :is(.op-step .op-fields){margin-top:35px} #opInvSec:is(.op-sqs),#opInvSec :is(.op-sqs){margin-top:35.7px;gap:31.1px} #opInvSec:is(.op-sq__desc),#opInvSec :is(.op-sq__desc){margin-top:3.2px} #opInvSec:is(.op-sqs),#opInvSec :is(.op-sqs){gap:32.5px} #opInvSec:is(.op-step .op-fields),#opInvSec :is(.op-step .op-fields){margin-top:36px} #opInvSec:is(.op-pay-ways),#opInvSec :is(.op-pay-ways){margin-top:34.5px} #opInvSec:is(.op-way__text),#opInvSec :is(.op-way__text){gap:4.9px} #opInvSec:is(.op-sqs),#opInvSec :is(.op-sqs){margin-top:37.7px} #opInvSec:is(.op-place__desc),#opInvSec :is(.op-place__desc){margin-top:4.8px} #opInvSec:is(.op-qi__submitNote),#opInvSec :is(.op-qi__submitNote){margin-top:12.9px} #opInvSec:is(.op-place),#opInvSec :is(.op-place),#opInvSec:is(.op-way__head),#opInvSec :is(.op-way__head){min-height:84px;gap:16.5px;padding:0 21px 0 23px} #opInvSec:is(.op-sq__hint--both),#opInvSec :is(.op-sq__hint--both){margin-top:23.4px} #opInvSec:is(.op-qp),#opInvSec :is(.op-qp){margin-top:31.95px;min-height:134px;padding:24.1px 24.5px 22.6px} #opInvSec:is(.op-sum),#opInvSec :is(.op-sum){margin-top:58.4px;padding:32.2px 28px 28.23px} #opInvSec:is(.op-sum .op-summary>.op-summary__total),#opInvSec :is(.op-sum .op-summary>.op-summary__total){padding-top:15.8px} #opInvSec:is(.op-sum .op-summary__total dd),#opInvSec :is(.op-sum .op-summary__total dd){font-size:36px;line-height:40px} #opInvSec:is(.op-sum .op-agree),#opInvSec :is(.op-sum .op-agree){margin-top:23.7px} } /* ——— Телефон 390 ————————————————————————————————————— */ @media (max-width:767px){ #opInvSec:is(.op__h1),#opInvSec :is(.op__h1){margin-top:10.3px} #opInvSec:is(.op__lead),#opInvSec :is(.op__lead){margin-top:13.7px;font-size:17px;line-height:24px} #opInvSec:is(.op__cols),#opInvSec :is(.op__cols){margin-top:48.2px} #opInvSec:is(.op-step),#opInvSec :is(.op-step){padding-top:40.6px;padding-bottom:40px} #opInvSec:is(.op-step__h),#opInvSec :is(.op-step__h){margin-top:7.3px} #opInvSec:is(.op__kicker),#opInvSec :is(.op__kicker){font-size:15px;line-height:20px} #opInvSec:is(.op-step__n),#opInvSec :is(.op-step__n){font-size:15px;line-height:20px} /* тарифы столбиком: 350×203 и 350×239, зазор 12 */ #opInvSec:is(.op-tariffs),#opInvSec :is(.op-tariffs){grid-template-columns:minmax(0,1fr);gap:12px;margin-top:31.9px} #opInvSec:is(.op-tariff),#opInvSec :is(.op-tariff){padding:20.5px 21px 21.5px 21.5px} #opInvSec:is(.op-tariff__name),#opInvSec :is(.op-tariff__name){font-size:17px;line-height:22px} #opInvSec:is(.op-tariff__price),#opInvSec :is(.op-tariff__price){margin-top:5.8px;font-size:26px;line-height:32px} #opInvSec:is(.op-tariff__desc),#opInvSec :is(.op-tariff__desc){margin-top:2px} #opInvSec:is(.op-tariff__list),#opInvSec :is(.op-tariff__list){margin-top:16.75px;padding-top:15.35px;gap:6px} #opInvSec:is(.op-tariff__li),#opInvSec :is(.op-tariff__li){padding-left:25.3px;line-height:20px} #opInvSec:is(.op-tariff__li--up),#opInvSec :is(.op-tariff__li--up){margin-top:8.1px;line-height:22px} /* поля и блоки — по одному в строке */ #opInvSec:is(.op-step .op-fields),#opInvSec :is(.op-step .op-fields){grid-template-columns:minmax(0,1fr);margin-top:27.4px;row-gap:27.3px} #opInvSec:is(.op-field__sub),#opInvSec :is(.op-field__sub){font-size:17px;line-height:22px;margin-top:3px} #opInvSec:is(.op-field__sub+.op-field__input),#opInvSec :is(.op-field__sub+.op-field__input){margin-top:12.2px} #opInvSec:is(.op-sqs),#opInvSec :is(.op-sqs){margin-top:28.4px;gap:26.4px} #opInvSec:is(.op-sq__desc),#opInvSec :is(.op-sq__desc){margin-top:3.1px;font-size:17px;line-height:22px} #opInvSec:is(.op-places),#opInvSec :is(.op-places),#opInvSec:is(.op-ways),#opInvSec :is(.op-ways){grid-template-columns:minmax(0,1fr);gap:12px;margin-top:13.8px} #opInvSec:is(.op-place),#opInvSec :is(.op-place),#opInvSec:is(.op-way__head),#opInvSec :is(.op-way__head){align-items:center;min-height:78px;gap:15.1px; padding:0 17px;border-radius:18px} #opInvSec:is(.op-way__text),#opInvSec :is(.op-way__text){margin-top:0} #opInvSec:is(.op-place__name),#opInvSec :is(.op-place__name){margin-top:0} #opInvSec:is(.op-way__radio),#opInvSec :is(.op-way__radio){align-self:center;margin-top:0;margin-left:auto} #opInvSec:is(.op-place__radio),#opInvSec :is(.op-place__radio){top:50%;right:17px;margin-top:-12px} #opInvSec:is(.op-place__tile),#opInvSec :is(.op-place__tile),#opInvSec:is(.op-way__tile),#opInvSec :is(.op-way__tile){width:40px;height:40px;border-radius:12px} #opInvSec:is(.op-place__name),#opInvSec :is(.op-place__name),#opInvSec:is(.op-way__name),#opInvSec :is(.op-way__name){font-size:17px;line-height:22px} #opInvSec:is(.op-place__desc),#opInvSec :is(.op-place__desc){margin-top:3.1px;line-height:20px} #opInvSec:is(.op-way__desc),#opInvSec :is(.op-way__desc){margin-top:1.1px;line-height:20px} #opInvSec:is(.op-way__text),#opInvSec :is(.op-way__text){gap:1.8px} #opInvSec:is(.op-place__radio),#opInvSec :is(.op-place__radio){right:17px} #opInvSec:is(.op-sq__hint--both),#opInvSec :is(.op-sq__hint--both){margin-top:20.5px;font-size:15px;line-height:20px} #opInvSec:is(.op-qi__submit),#opInvSec :is(.op-qi__submit){margin-top:20.85px} #opInvSec:is(.op-qi__submitNote),#opInvSec :is(.op-qi__submitNote){margin-top:11.2px;font-size:13px;line-height:18px} #opInvSec:is(.op-qp),#opInvSec :is(.op-qp){margin-top:24.9px;min-height:118px;padding:21.2px 20.4px 20.8px} #opInvSec:is(.op-qp__k),#opInvSec :is(.op-qp__k){font-size:12px;line-height:16px} #opInvSec:is(.op-qp__t),#opInvSec :is(.op-qp__t){margin-top:8px;max-width:none;font-size:20px;line-height:26px} #opInvSec:is(.op-pay-ways),#opInvSec :is(.op-pay-ways){margin-top:26.9px} #opInvSec:is(.op-sum),#opInvSec :is(.op-sum){margin-top:40px;padding:23px 20px 24.45px} #opInvSec:is(.op-sum .op-summary),#opInvSec :is(.op-sum .op-summary){margin-top:20.36px} #opInvSec:is(.op-sum .op-summary dt),#opInvSec :is(.op-sum .op-summary dt),#opInvSec:is(.op-sum .op-summary dd),#opInvSec :is(.op-sum .op-summary dd){font-size:17px;line-height:22px} #opInvSec:is(.op-sum .op-summary>.op-summary__total),#opInvSec :is(.op-sum .op-summary>.op-summary__total){margin-top:20.33px;padding-top:11.65px} #opInvSec:is(.op-sum .op-summary__total dt),#opInvSec :is(.op-sum .op-summary__total dt){font-size:17px;line-height:22px} #opInvSec:is(.op-sum .op-summary__total dd),#opInvSec :is(.op-sum .op-summary__total dd){font-size:34px;line-height:40px} #opInvSec:is(.op-sum .op-agree),#opInvSec :is(.op-sum .op-agree){margin-top:24.3px} #opInvSec:is(.op-sum .op-agree--2),#opInvSec :is(.op-sum .op-agree--2){margin-top:13.7px} #opInvSec:is(.op-sum .op-pay),#opInvSec :is(.op-sum .op-pay){margin-top:20.75px} #opInvSec:is(.op-sum__perks),#opInvSec :is(.op-sum__perks){margin-top:20px;padding-top:19.25px;gap:10px} #opInvSec:is(.op-sum__perk),#opInvSec :is(.op-sum__perk){padding-left:26.9px;font-size:15px;line-height:20px} } /* ——— Доводка по горизонтали (elsweep2 w01, наряд «Дизайн-69») ———— */ /* «Безопасная оплата» в шапке: 15/15/13 по эталону, не 14. */ #opInvSec:is(.op-secure),#opInvSec :is(.op-secure){font-size:15px;line-height:18.1px} @media (max-width:767px){ #opInvSec:is(.op-secure),#opInvSec :is(.op-secure){font-size:13px;line-height:15.7px} } /* Трекинг H1 в v3 слабее, чем в v2: краска строки 1067 / 590 / 345,6. */ #opInvSec:is(.op__h1),#opInvSec :is(.op__h1){letter-spacing:-.0232em} /* Пункт «После Проверки — 14 900 ₽» в макете без галочки, от края списка. */ #opInvSec:is(.op-tariff__li--up),#opInvSec :is(.op-tariff__li--up){padding-left:0} #opInvSec:is(.op-tariff__li--up::before),#opInvSec :is(.op-tariff__li--up::before){content:none} /* Названия блоков «Где вас ищут?» и способов оплаты — 17/22, не 17/24. */ #opInvSec:is(.op-place__name),#opInvSec :is(.op-place__name),#opInvSec:is(.op-way__name),#opInvSec :is(.op-way__name){line-height:22px} /* Кнопки в макете v3 — 17/20,6 Bold. */ #opInvSec:is(.op-pay),#opInvSec :is(.op-pay),#opInvSec:is(.op-qi__submit),#opInvSec :is(.op-qi__submit){font-weight:700;line-height:20.6px} /* Надпись «ТАК СПРОСИТ КЛИЕНТ» разрежена: краска 165,7 против 151,4. */ #opInvSec:is(.op-qp__k),#opInvSec :is(.op-qp__k){letter-spacing:.065em} #opInvSec:is(.op-qp__t),#opInvSec :is(.op-qp__t){max-width:470px} @media (max-width:1023px){ /* Ограничения ширины лида и строки «и в городе, и онлайн» на 768 пробовали (600 / 585 — краска макета 591,9 и 579,0): перенос сходится, но обе строки уходят на лишнюю строку и вся вертикаль кадра едет на 28 px. Оставлен естественный перенос — расхождение по ширине краски, см. отчёт. */} @media (min-width:768px) and (max-width:1023px){ #opInvSec:is(.op-place),#opInvSec :is(.op-place),#opInvSec:is(.op-way__head),#opInvSec :is(.op-way__head){gap:15.1px;padding:0 21px} } @media (max-width:767px){ #opInvSec:is(.op-sum__h),#opInvSec :is(.op-sum__h){font-size:22px;line-height:28px} #opInvSec:is(.op-qi__submitNote),#opInvSec :is(.op-qi__submitNote){max-width:255px;margin-left:auto;margin-right:auto} } /* Цены в v3 набраны обычными цифрами, не табличными: краска «4 900 ₽» 107,5 в тарифе и 153,5 в «Итого» (с tabular-nums уже 103,7 и 147,7). */ #opInvSec:is(.op-tariff__price),#opInvSec :is(.op-tariff__price),#opInvSec:is(.op-summary dd),#opInvSec :is(.op-summary dd){font-variant-numeric:normal} /* ——— Кадр w02 «02 Ошибки» (начат, наряд «Дизайн-69») ———————————— Подсказка об ошибке в v3 — с отступом под значок: краска строки от 144,4 при колонке от 120 (и 976,9 при карточке от 952). Сообщение о согласиях — 15/20 в две строки (краска 206,2). */ #opInvSec:is(.op-field__err),#opInvSec :is(.op-field__err),#opInvSec:is(.op-agrees__err),#opInvSec :is(.op-agrees__err){padding-left:23.4px} #opInvSec:is(.op-agrees__err),#opInvSec :is(.op-agrees__err){max-width:240px;font-size:15px;line-height:20px} /* ——— Кадр w02 «02 Ошибки» (наряд «Дизайн-70») ———————————————————— Плашка под кнопкой — не пилюля, а строка 15/20 с отступом под значок, по центру кнопки: краска 990,1 при карточке от 952 и кнопке 336 шириной, отбивка от низа кнопки 9,35 (макет: низ кнопки 872 → краска 885,9). Красная подпись под «Составить запрос» — 15/20 (серая 15/22). */ #opInvSec:is(.op-plate),#opInvSec :is(.op-plate){margin-top:9.35px;border-radius:0;background:none; padding:0 0 0 23.4px;text-align:center;font-size:15px;line-height:20px} #opInvSec:is(.op-qi__submitNote--err),#opInvSec :is(.op-qi__submitNote--err){line-height:20px} /* «Выберите способ оплаты» — под плитками способов: краска 3024,8 при низе плиток 3011 (макет w02). */ #opInvSec:is(.op-ways__err),#opInvSec :is(.op-ways__err){margin-top:9.25px} /* Три красные строки кадра w02 выровнены в макете по-разному: на 768 и 1440 подпись под «Составить запрос» и плашка под «Оплатить» стоят по центру (с тем же отступом под значок), на 390 — по левому краю колонки; а сообщение о согласиях — наоборот, по левому краю везде, кроме 768. Числа — краска макетов w02_{1440,768,390}.json. */ #opInvSec:is(.op-qi__submitNote--err),#opInvSec :is(.op-qi__submitNote--err){padding-left:23.4px} @media (min-width:768px) and (max-width:1023px){ #opInvSec:is(.op-agrees__err),#opInvSec :is(.op-agrees__err){max-width:none;text-align:center} } @media (max-width:767px){ /* на 390 подпись под кнопкой в ошибке — 15/20 и по левому краю (серая на этой ширине 13/18 и по центру), краска 219,1 в две строки */ #opInvSec:is(.op-qi__submitNote--err),#opInvSec :is(.op-qi__submitNote--err){max-width:245px;margin-left:0;margin-right:0; text-align:left;font-size:15px;line-height:20px} /* плашка под «Оплатить» — по левому краю, краска 158,7 в две строки */ #opInvSec:is(.op-plate),#opInvSec :is(.op-plate){max-width:192px;text-align:left} } /* Подсказка под полем вопроса в v3 стоит ниже, чем в v2: краска 1519,9 при пояснении 1419,2 (макет w02, 1440 и 768); на 390 отбивка v2 совпадает. Красная подпись под «Составить запрос» на 390 — в 6,9 от кнопки. */ @media (min-width:768px){ #opInvSec:is(.op-sq .op-field__err),#opInvSec :is(.op-sq .op-field__err){margin-top:10.6px} } @media (max-width:767px){ #opInvSec:is(.op-qi__submitNote--err),#opInvSec :is(.op-qi__submitNote--err){margin-top:6.9px} } /* ——— Кадр w03 «03 Ответы заполнены» (наряд «Дизайн-70») —————————— Кнопка «Составить запрос» до заполнения ответов — серая («btn dis», кадр w01), после — синяя («btn compose», кадр w03). */ #opInvSec:is(.op-qi__submit--off),#opInvSec :is(.op-qi__submit--off){background:var(--line);color:var(--gray-2)} /* Подпись «Город» и пояснение над полем: от низа плиток места до краски подписи 33,1 на 1440/768 и 27,6 на 390 (макет w03). */ #opInvSec:is(.op-place__fieldLabel),#opInvSec :is(.op-place__fieldLabel){margin-top:32px} @media (min-width:768px) and (max-width:1023px){ #opInvSec:is(.op-place__fieldLabel),#opInvSec :is(.op-place__fieldLabel){margin-top:32.5px} } @media (max-width:767px){ #opInvSec:is(.op-place__fieldLabel),#opInvSec :is(.op-place__fieldLabel){margin-top:26.8px} } /* Строка «Работаете и в городе, и онлайн?» в режиме «в городе» идёт сразу за полем города, и её перебивало общее правило отбивки подсказки под полем (8,75). Возвращаем отбивку блока: 23,4 на 1440/768 и 20,5 на 390. */ #opInvSec:is(.op-field__input+.op-sq__hint--both),#opInvSec :is(.op-field__input+.op-sq__hint--both){margin-top:23.4px} @media (max-width:767px){ #opInvSec:is(.op-field__input+.op-sq__hint--both),#opInvSec :is(.op-field__input+.op-sq__hint--both){margin-top:20.5px} } /* ——— Кадр w04 «04 Составляем запрос» (наряд «Дизайн-70») —————————— Полосы-заготовки в плашке запроса: 22 px, r11, #E1E1E6; первая в 13,9 от надписи «ТАК СПРОСИТ КЛИЕНТ», вторая в 12 от первой; ширины 544,5 и 358,6 при колонке 720 (82,1 % и 54,1 % содержимого плашки). */ #opInvSec:is(.op-qp__sk),#opInvSec :is(.op-qp__sk){display:block;height:22px;border-radius:11px;background:var(--line-2)} #opInvSec:is(.op-qp__sk--1),#opInvSec :is(.op-qp__sk--1){margin-top:13.9px;width:82.1%} #opInvSec:is(.op-qp__sk--2),#opInvSec :is(.op-qp__sk--2){margin-top:12px;width:54.1%} @media (max-width:767px){ /* на 390 полосы ниже: 18 px, r9, первая в 14,4 от надписи (макет w04_390) */ #opInvSec:is(.op-qp__sk),#opInvSec :is(.op-qp__sk){height:18px;border-radius:9px} #opInvSec:is(.op-qp__sk--1),#opInvSec :is(.op-qp__sk--1){margin-top:14.4px} } /* Значок ошибки — красный кружок 14 px с восклицательным знаком, слева от первой строки подсказки (макеты w02: рамка 16 у края колонки, краска строки в 23,4 от неё). Отрицательное поле гасит ширину значка, поэтому строка — и выровненная по левому краю, и центрованная — стоит там же, где стояла с одним отступом под значок. */ #opInvSec:is(.op-field__err::before),#opInvSec :is(.op-field__err::before),#opInvSec:is(.op-agrees__err::before),#opInvSec :is(.op-agrees__err::before),#opInvSec:is(.op-plate::before),#opInvSec :is(.op-plate::before),#opInvSec:is(.op-qi__submitNote--err::before),#opInvSec :is(.op-qi__submitNote--err::before){content:"";display:inline-block;width:14px;height:14px; margin-left:-23.4px;margin-right:9.4px;vertical-align:-2.3px; background:url(/img/icons/alert.svg) center/14px 14px no-repeat} /* ——— Кадры w05 «Составляем запрос — кадр 2» и w06 «Запрос готов» (наряд «Дизайн-71») ———————————————————————————————————— Плашка запроса в этих кадрах — уже не заготовка. В w05 в ней печатается текст (24/30 Bold #1D1D1F и синяя каретка 2×28), в w06 стоит готовый запрос в кавычках и ряд ссылок «Изменить» / «Составить заново» — тоже ВНУТРИ плашки, а линии-разделителя, заголовка «Предложенный запрос» и голубой плашки «Заказа v2» в макетах v3 нет. Высота плашки идёт от содержания: 112,5 в w05 и 150 в w06 против 142 у заготовки — поэтому min-height в этих режимах снимается. */ #opInvSec:is(.op-qp--typing),#opInvSec :is(.op-qp--typing),#opInvSec:is(.op-qp--ready),#opInvSec :is(.op-qp--ready){min-height:0} #opInvSec:is(.op-qp .op-qp__q),#opInvSec :is(.op-qp .op-qp__q){margin:9.9px 0 0;font-size:24px;line-height:30px;font-weight:700; color:var(--ink);letter-spacing:-.0103em} #opInvSec:is(.op-qp__typed),#opInvSec :is(.op-qp__typed){display:block} /* Каретка набора: 2×28 #0A5CFF в 2,9 от краски строки, верх по верху строки (макет w05: краска 149,4…482,1, каретка x 485, y 2340…2368). */ #opInvSec:is(.op-qp__typed::after),#opInvSec :is(.op-qp__typed::after){content:"";display:inline-block;width:2px;height:28px; margin-left:2.9px;vertical-align:-4.3px;background:var(--blue); animation:op-caret 1.06s step-end infinite} #opInvSec:is(.op-qp__typed--still::after),#opInvSec :is(.op-qp__typed--still::after){animation:none} @keyframes op-caret{ #opInvSec:is(0%),#opInvSec :is(0%),#opInvSec:is(49%),#opInvSec :is(49%){opacity:1} #opInvSec:is(50%),#opInvSec :is(50%),#opInvSec:is(100%),#opInvSec :is(100%){opacity:0} } @media (prefers-reduced-motion:reduce){ #opInvSec:is(.op-qp__typed::after),#opInvSec :is(.op-qp__typed::after){animation:none} } /* Ряд ссылок в плашке: иконки 14 (глиф 12,4 и 11,5×12), текст в 6,9 и 6,7 от них, между ссылками 28 (макет: краска «Изменить» до 241,6, иконка «Составить заново» от 270,3). Вид один до и после подтверждения. */ #opInvSec:is(.op-qp--ready .op-qi__links),#opInvSec :is(.op-qp--ready .op-qi__links){gap:28px;margin-top:17.7px} #opInvSec:is(.op-qp--ready .op-qi__editLink),#opInvSec :is(.op-qp--ready .op-qi__editLink),#opInvSec:is(.op-qp--ready .op-qi__redoLink),#opInvSec :is(.op-qp--ready .op-qi__redoLink){font-size:15px;line-height:20px;font-weight:700;color:var(--blue)} #opInvSec:is(.op-qp--ready .op-qi__editLink),#opInvSec :is(.op-qp--ready .op-qi__editLink){gap:6.9px} #opInvSec:is(.op-qp--ready .op-qi__redoLink),#opInvSec :is(.op-qp--ready .op-qi__redoLink){gap:6.7px} #opInvSec:is(.op-qp--ready .op-qi__editLink::before),#opInvSec :is(.op-qp--ready .op-qi__editLink::before){width:14px;height:14px; -webkit-mask-size:12.4px 12.4px;mask-size:12.4px 12.4px} #opInvSec:is(.op-qp--ready .op-qi__redoLink::before),#opInvSec :is(.op-qp--ready .op-qi__redoLink::before){width:14px;height:14px; -webkit-mask-size:11.5px 12px;mask-size:11.5px 12px} /* Галочка «Всё верно: …» — 17/24 Regular, отбивка от плашки 31,4, зазор до краски 14,2 (бокс чекбокса 120…142, краска строки 157,5). */ #opInvSec:is(.op-qi__confirm),#opInvSec :is(.op-qi__confirm){margin-top:31.4px;gap:14.2px} #opInvSec:is(.op-qi__confirmBox),#opInvSec :is(.op-qi__confirmBox){margin-top:1.6px} #opInvSec:is(.op-qi__confirmText),#opInvSec :is(.op-qi__confirmText){font-size:17px;line-height:24px} /* Блок «Добавить ещё запрос» в v3: 720×80, пунктир 1 px #D2D2D7 (4 3), r18, без заливки; плитка 40×40 r12 #EAF1FF, подпись 17/22 Bold, пояснение 15/20 тёмным, цена 17/20,6 Bold. */ #opInvSec:is(.op-qz__addCard),#opInvSec :is(.op-qz__addCard){grid-template-columns:40px minmax(0,1fr) auto;column-gap:15.2px; align-items:start;align-content:start;margin-top:24.6px;min-height:80px; padding:17.17px 23.7px 0 24px;border:1px dashed var(--line-2);border-radius:18px; background:none;box-shadow:none} #opInvSec:is(.op-qz__addIcon),#opInvSec :is(.op-qz__addIcon){align-self:start;width:40px;height:40px;margin-top:1.83px;border-radius:12px} #opInvSec:is(.op-qz__addIcon::before),#opInvSec :is(.op-qz__addIcon::before){width:12.8px;height:12.8px} #opInvSec:is(.op-qz__add),#opInvSec :is(.op-qz__add){margin-top:0;font-size:17px;line-height:22px;font-weight:700} #opInvSec:is(.op-qz__addHint),#opInvSec :is(.op-qz__addHint){display:block;margin-top:.38px;font-size:15px;line-height:20px;color:var(--ink)} #opInvSec:is(.op-qz__addPrice),#opInvSec :is(.op-qz__addPrice){align-self:start;margin-top:10.9px; font-size:17px;line-height:20.6px;font-weight:700;color:var(--ink)} @media (max-width:1023px){ #opInvSec:is(.op-qp--ready .op-qi__links),#opInvSec :is(.op-qp--ready .op-qi__links){gap:24px;margin-top:15.7px} #opInvSec:is(.op-qz__addCard),#opInvSec :is(.op-qz__addCard){padding:17.17px 21.7px 0 22px} } @media (max-width:767px){ /* 390: трекинг не нужен (краска «…лечат зу» 282,3 сходится при 0), ограничение ширины держит перенос макета (краска 255,6 в две строки). */ #opInvSec:is(.op-qp .op-qp__q),#opInvSec :is(.op-qp .op-qp__q){margin-top:8.2px;font-size:20px;line-height:26px;letter-spacing:0} #opInvSec:is(.op-qp--ready .op-qi__text),#opInvSec :is(.op-qp--ready .op-qi__text){max-width:270px} #opInvSec:is(.op-qp__typed::after),#opInvSec :is(.op-qp__typed::after){height:24px;vertical-align:-4px} #opInvSec:is(.op-qp--ready .op-qi__links),#opInvSec :is(.op-qp--ready .op-qi__links){gap:22px;margin-top:15.8px} #opInvSec:is(.op-qi__confirm),#opInvSec :is(.op-qi__confirm){margin-top:25.4px;gap:11.6px} #opInvSec:is(.op-qi__confirmBox),#opInvSec :is(.op-qi__confirmBox){width:24px;height:24px;margin-top:0} #opInvSec:is(.op-qi__confirmText),#opInvSec :is(.op-qi__confirmText){font-size:17px;line-height:22px} #opInvSec:is(.op-qz__addCard),#opInvSec :is(.op-qz__addCard){grid-template-columns:36px minmax(0,1fr) auto;column-gap:11.3px; margin-top:20.63px;min-height:68px;padding:12.95px 15.6px 0 16px} #opInvSec:is(.op-qz__addIcon),#opInvSec :is(.op-qz__addIcon){width:36px;height:36px;margin-top:2.05px} #opInvSec:is(.op-qz__add),#opInvSec :is(.op-qz__add){font-size:15px;line-height:20px} #opInvSec:is(.op-qz__addHint),#opInvSec :is(.op-qz__addHint){margin-top:1.27px;font-size:13px;line-height:18px} #opInvSec:is(.op-qz__addPrice),#opInvSec :is(.op-qz__addPrice){margin-top:11.35px;font-size:15px;line-height:18.1px} } @media (max-width:767px){ #opInvSec:is(.op-qi__confirmBox:checked::after),#opInvSec :is(.op-qi__confirmBox:checked::after){margin:7.2px 6px} } /* ——— Кадр w07 «Изменить запрос» (наряд «Дизайн-71») —————————————— Правка идёт внутри той же плашки: белое поле 664×62,5 r12 с синей рамкой 2 px (как у фокуса поля), под ним строка 15/22 и кнопки «Сохранить» (пилюля 136,7×44) и «Отмена» (синяя подпись). Галочки и блока «Добавить ещё запрос» в этом кадре нет. */ #opInvSec:is(.op-qp--edit .op-qi__editInput),#opInvSec :is(.op-qp--edit .op-qi__editInput){display:block;width:100%;min-height:62.5px; margin-top:9.9px;padding:15.8px 18px 16.7px;border:0;border-radius:12px; background:var(--bg);box-shadow:inset 0 0 0 2px var(--blue);resize:none; font-family:var(--font);font-size:24px;line-height:30px;font-weight:700; color:var(--ink);letter-spacing:-.0103em} #opInvSec:is(.op-qp--edit .op-qi__editInput:focus),#opInvSec :is(.op-qp--edit .op-qi__editInput:focus){outline:0} #opInvSec:is(.op-qi__editHint),#opInvSec :is(.op-qi__editHint){margin-top:9.15px;font-size:15px;line-height:22px;color:var(--ink)} #opInvSec:is(.op-qi__editActions),#opInvSec :is(.op-qi__editActions){display:flex;align-items:center;gap:20.9px;margin-top:18.85px} #opInvSec:is(.op-qi__editActions .op-qi__editSave),#opInvSec :is(.op-qi__editActions .op-qi__editSave){min-width:136.7px;height:44px;padding:0 22px; border-radius:22px;font-size:17px;line-height:20.6px;font-weight:700} #opInvSec:is(.op-qi__editCancel),#opInvSec :is(.op-qi__editCancel){font-size:17px;line-height:20.6px;font-weight:700;color:var(--blue)} #opInvSec:is(.op-qi__editCancel::after),#opInvSec :is(.op-qi__editCancel::after){content:none} @media (max-width:767px){ #opInvSec:is(.op-qp--edit .op-qi__editInput),#opInvSec :is(.op-qp--edit .op-qi__editInput){min-height:80px;margin-top:8.8px; padding:13.76px 15.3px 14.24px;font-size:20px;line-height:26px;letter-spacing:0} #opInvSec:is(.op-qi__editHint),#opInvSec :is(.op-qi__editHint){margin-top:7.25px;font-size:15px;line-height:20px} #opInvSec:is(.op-qi__editActions),#opInvSec :is(.op-qi__editActions){margin-top:16.75px} } /* v3:begin — перенос стилей эталона, не править руками: tools/v3css.py */ /* источник: _incoming/2026-10-18_order_page_edits/Страница_Оформить заказ_правки/geowise-order-v3.html */ @media (min-width:1024px){.o3-pg,.o3-pg *{box-sizing:border-box;margin:0;padding:0} .o3-pg{--blue:#0A5CFF;--tint:#EAF1FF;--ink:#1D1D1F;--gray:#6E6E73;--gray2:#A1A1A6;--ph:#86868B;--soft:#F5F5F7;--strong:#E8E8ED;--line:#D2D2D7;--hair:#E8E8ED} .o3-hdr{background:#fff;border-bottom:1px solid var(--hair)} .o3-hdr .o3-in{display:flex;align-items:center;justify-content:space-between} .o3-logo{font-weight:700} .o3-logo span{color:var(--blue)} .o3-safe{display:flex;align-items:center;gap:6px;color:var(--gray)} .o3-eb{color:var(--blue);font-weight:700} .o3-h1,.o3-h2{font-weight:700} .o3-h1 .o3-g,.o3-h2 .o3-g{color:var(--gray2)} .o3-sec{border-top:1px solid var(--hair)} .o3-sec:first-child{border-top:0} .o3-sub{font-weight:700} .o3-opt{position:relative;background:#fff;border:1px solid var(--line)} .o3-opt.o3-on{border:2px solid var(--blue)} .o3-opt .o3-t{font-weight:700} .o3-opt .o3-s{color:var(--gray)} .o3-opt .o3-pr{font-weight:700} .o3-opt .o3-li{display:flex;gap:8px;align-items:center;color:var(--ink)} .o3-opt .o3-ex{color:var(--blue);font-weight:700} .o3-ic{display:flex;align-items:center;justify-content:center;color:var(--ink)} .o3-on .o3-ic{color:var(--blue)} .o3-fl{border:1px solid var(--line);background:#fff;display:flex;flex-direction:column;justify-content:center} .o3-fl .o3-l{color:var(--gray)} .o3-fl.o3-e .o3-l{color:var(--ph)} .o3-fl .o3-v{color:var(--ink)} .o3-help{color:var(--gray)} .o3-help b{color:var(--ink);font-weight:400} .o3-quote{background:var(--soft)} .o3-ov{color:var(--gray);font-weight:700;letter-spacing:.06em;text-transform:uppercase} .o3-q{font-weight:700} .o3-acts{display:flex;color:var(--blue);font-weight:700} .o3-acts span{display:flex;align-items:center;gap:6px} .o3-cb{display:flex;align-items:flex-start} .o3-box{flex:none;border-radius:6px;border:1.5px solid var(--line);background:#fff;display:flex;align-items:center;justify-content:center} .o3-box.o3-on{background:var(--blue);border-color:var(--blue)} .o3-lnk{color:var(--blue)} .o3-add{display:flex;align-items:center;border:1px dashed var(--line)} .o3-add .o3-pi{display:flex;align-items:center;justify-content:center;background:var(--tint);color:var(--blue)} .o3-add .o3-t{font-weight:700} .o3-add .o3-s{color:var(--gray)} .o3-add .o3-p{margin-left:auto;font-weight:700} .o3-sum{background:var(--soft)} .o3-sum .o3-row{display:flex;justify-content:space-between} .o3-sum .o3-k{color:var(--gray)} .o3-sum .o3-div{height:1px;background:var(--line)} .o3-tot{display:flex;justify-content:space-between;align-items:baseline;font-weight:700} .o3-btn{display:flex;align-items:center;justify-content:center;border-radius:999px;background:var(--blue);color:#fff;font-weight:700} .o3-small{color:var(--gray)} .o3-trust div{display:flex;gap:10px;align-items:center} .o3-tgf{position:absolute;border-radius:50%;background:#2AABEE;display:flex;align-items:center;justify-content:center} .o3-tgi{border-radius:50%;background:#2AABEE;display:flex;align-items:center;justify-content:center} .o3-pg{--red:#D70015;--redbg:#FFF2F4} .o3-pg{font-family:Inter,sans-serif;color:var(--ink);background:#fff;-webkit-font-smoothing:antialiased;position:relative} .o3-f.o3-err,.o3-opt.o3-erb{border:1.5px solid var(--red)} .o3-box.o3-erb{border-color:var(--red)} .o3-f.o3-foc{border:2px solid var(--blue)} .o3-er{display:flex;align-items:flex-start;gap:8px;color:var(--red);font-size:15px;line-height:20px;margin-top:10px} .o3-er svg{flex:none;margin-top:2px} .o3-btn.o3-ld{gap:10px} .o3-sk{height:20px;border-radius:10px;background:#E1E1E6;margin-top:14px} .o3-sk+.o3-sk{margin-top:12px} .o3-caret{display:inline-block;width:2px;background:var(--blue);vertical-align:-4px;margin-left:2px} .o3-qlab{display:flex;justify-content:space-between} .o3-ta{background:#fff;border:2px solid var(--blue);border-radius:12px;font-weight:700} .o3-hint{color:var(--ink2)} .o3-eda{display:flex;align-items:center;gap:20px} .o3-btn.o3-sm{height:44px;padding:0 22px;font-size:17px} .o3-btn.o3-bs{background:var(--tint);color:var(--blue);gap:10px} .o3-btn.o3-out{background:#fff;color:var(--blue);border:1px solid var(--blue)} .o3-toast{display:flex;align-items:center;justify-content:space-between;background:#1D1D1F;color:#fff;border-radius:14px} .o3-toast .o3-lnk{color:#7FB0FF;font-weight:700} .o3-pr s{font-size:17px;font-weight:400;color:var(--ph);margin-left:8px;letter-spacing:0;text-decoration:line-through} .o3-ok2{display:flex;gap:8px;align-items:flex-start;color:var(--ink);margin-top:14px;font-size:15px;line-height:22px} .o3-ok2 svg{flex:none;margin-top:3px} .o3-b2{height:44px;border:1px solid var(--blue);color:var(--blue);border-radius:999px;display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:700;margin-top:10px} .o3-fx{height:48px;line-height:44px;border:2px solid var(--blue);border-radius:12px;padding:0 13px;font-size:17px;background:#fff;margin-top:12px;color:var(--ink)} .o3-sug{border:1px solid var(--line);border-radius:14px;background:#fff;margin-top:8px;overflow:hidden} .o3-sug .o3-it{padding:14px 16px;border-top:1px solid var(--hair)} .o3-sug .o3-it:first-child{border-top:0;background:var(--soft)} .o3-sug .o3-t{font-weight:700;font-size:17px;line-height:22px} .o3-sug .o3-s{color:var(--ink2);font-size:15px;line-height:20px;margin-top:2px} .o3-sug .o3-t b{color:var(--blue)} .o3-co{background:var(--soft);border-radius:16px;position:relative} .o3-co .o3-t{font-weight:700} .o3-co .o3-s{color:var(--ink2)} .o3-co .o3-lnk{position:absolute;font-weight:700} .o3-sum .o3-row .o3-neg{color:var(--ink)} .o3-sum .o3-er{justify-content:center;text-align:left} .o3-okic{display:block} .o3-card{border:1px solid var(--line);border-radius:20px} .o3-card .o3-ct{font-weight:700} .o3-card .o3-cs{color:var(--ink2)} .o3-card .o3-rw{display:flex;justify-content:space-between;gap:16px} .o3-card .o3-rw span:first-child{color:var(--ink2)} .o3-card .o3-rw span:last-child{text-align:right} .o3-steps{display:grid} .o3-st{display:flex;gap:16px} .o3-st .o3-n{flex:none;border-radius:50%;background:var(--tint);color:var(--blue);font-weight:700;display:flex;align-items:center;justify-content:center} .o3-st .o3-t{font-weight:700} .o3-st .o3-s{color:var(--ink2)} .o3-inv{background:var(--soft);border-radius:24px} .o3-inv .o3-ct{font-weight:700} .o3-inv .o3-rq{display:grid} .o3-inv .o3-rq div{display:grid} .o3-inv .o3-rq span:first-child{color:var(--gray)} .o3-qr{background:#fff;border:1px solid var(--line);border-radius:24px;text-align:center} .o3-qr .o3-ct{font-weight:700} .o3-qr .o3-cs{color:var(--ink2)} .o3-qr svg{display:block;margin:0 auto} .o3-bar{position:absolute;left:0;right:0;bottom:0;background:#fff;border-top:1px solid var(--hair);padding:12px 16px 30px;display:flex;align-items:center;gap:14px} .o3-bar .o3-p{font-weight:700;font-size:20px;line-height:24px} .o3-bar .o3-k{font-size:13px;line-height:18px;color:var(--gray)} .o3-bar .o3-btn{flex:1;height:50px} .o3-a4{font-family:Inter,sans-serif;color:#1D1D1F;background:#fff;width:794px;padding:56px 64px;position:relative} .o3-a4 .o3-top{display:flex;justify-content:space-between;align-items:flex-start} .o3-a4 .o3-logo{font-size:22px} .o3-a4 .o3-mt{color:#6E6E73;font-size:12px;line-height:17px;text-align:right} .o3-a4 h1{font-size:24px;line-height:30px;font-weight:700;margin-top:40px} .o3-a4 .o3-sub2{font-size:13px;line-height:19px;color:#515154;margin-top:6px} .o3-a4 table{width:100%;border-collapse:collapse;margin-top:24px;font-size:12px;line-height:17px} .o3-a4 td,.o3-a4 th{border:1px solid #1D1D1F;padding:6px 8px;vertical-align:top;text-align:left} .o3-a4 th{font-weight:700;background:#F5F5F7} .o3-a4 .o3-r{text-align:right} .o3-a4 .o3-kv{display:grid;grid-template-columns:150px 1fr;gap:6px 16px;font-size:12px;line-height:17px;margin-top:20px} .o3-a4 .o3-kv span:nth-child(odd){color:#6E6E73} .o3-a4 .o3-tot2{margin-top:14px;font-size:13px;line-height:20px;text-align:right} .o3-a4 .o3-tot2 b{font-weight:700} .o3-a4 .o3-words{margin-top:12px;font-size:13px;line-height:19px} .o3-a4 .o3-sign{display:flex;justify-content:space-between;margin-top:48px;font-size:13px;line-height:19px} .o3-a4 .o3-ln{display:inline-block;width:160px;border-bottom:1px solid #1D1D1F;margin:0 8px;height:14px} .o3-a4 .o3-foot{margin-top:40px;padding-top:14px;border-top:1px solid #D2D2D7;font-size:11px;line-height:16px;color:#6E6E73} .o3-rc{width:360px;margin:32px auto 0;border:1px solid #D2D2D7;border-radius:16px;padding:28px 28px 24px;font-size:13px;line-height:19px} .o3-rc .o3-c{text-align:center} .o3-rc .o3-dl{border-top:1px dashed #A1A1A6;margin:14px 0} .o3-rc .o3-rw{display:flex;justify-content:space-between;gap:12px} .o3-rc .o3-rw span:first-child{color:#515154} .o3-rc .o3-big{font-size:17px;line-height:24px;font-weight:700} .o3-rc svg{display:block;margin:16px auto 0} .o3-hdr .o3-in{width:1200px;margin:0 auto;height:64px} .o3-logo{font-size:24px} .o3-safe{font-size:15px} .o3-wrap{width:1200px;margin:0 auto;padding:80px 0 120px;position:relative} .o3-eb{font-size:17px;line-height:24px;margin-bottom:12px} .o3-h1{font-size:56px;line-height:60px;letter-spacing:-0.02em} .o3-lead{font-size:19px;line-height:28px;color:var(--gray);margin-top:20px;max-width:720px} .o3-cols{display:grid;grid-template-columns:720px 400px;gap:80px;margin-top:64px;align-items:start} .o3-sec{padding:56px 0} .o3-sec:first-child{padding-top:0} .o3-sec .o3-eb{font-size:15px;line-height:20px;margin-bottom:10px} .o3-h2{font-size:32px;line-height:38px;letter-spacing:-0.015em} .o3-grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px} .o3-mt40{margin-top:36px} .o3-mt32{margin-top:32px} .o3-mt24{margin-top:24px} .o3-mt16{margin-top:16px} .o3-mt12{margin-top:12px} .o3-mt8{margin-top:8px} .o3-opt{border-radius:18px;padding:24px} .o3-opt.o3-on{padding:23px} .o3-opt .o3-t{font-size:19px;line-height:24px} .o3-opt .o3-pr{font-size:28px;line-height:34px;margin-top:10px} .o3-opt .o3-s{font-size:15px;line-height:20px;margin-top:4px} .o3-opt .o3-ul{display:grid;gap:8px;margin-top:20px;padding-top:20px;border-top:1px solid var(--hair);font-size:15px;line-height:20px} .o3-opt .o3-ex{font-size:15px;line-height:20px;margin-top:14px} .o3-opt.o3-w{display:flex;align-items:center;gap:16px;padding:20px 24px} .o3-opt.o3-w.o3-on{padding:19px 23px} .o3-ic{width:44px;height:44px;border-radius:12px;background:var(--soft);flex:none} .o3-opt.o3-w .o3-t{font-size:17px;line-height:22px} .o3-fl{height:60px;border-radius:12px;padding:0 16px} .o3-fl .o3-l{font-size:12px;line-height:16px} .o3-fl .o3-v{font-size:17px;line-height:24px} .o3-fl.o3-e .o3-l{font-size:17px;line-height:24px} .o3-help{font-size:13px;line-height:18px;margin-top:8px;padding-left:2px} .o3-sub{font-size:19px;line-height:24px} .o3-note{font-size:15px;line-height:22px;color:var(--gray)} .o3-quote{border-radius:20px;padding:28px 28px 26px} .o3-ov{font-size:13px;line-height:18px} .o3-q{font-size:28px;line-height:34px;letter-spacing:-0.01em;margin-top:10px} .o3-acts{gap:28px;font-size:15px;line-height:20px;margin-top:18px} .o3-cb{gap:14px;font-size:15px;line-height:22px} .o3-box{width:22px;height:22px} .o3-add{border-radius:18px;padding:18px 24px;gap:16px} .o3-add .o3-pi{width:40px;height:40px;border-radius:12px} .o3-add .o3-t{font-size:17px;line-height:22px} .o3-add .o3-s{font-size:15px;line-height:20px} .o3-add .o3-p{font-size:17px} .o3-sum{position:sticky;top:32px;border-radius:24px;padding:36px 32px 32px} .o3-sum .o3-h{font-size:24px;line-height:30px;font-weight:700} .o3-sum .o3-row{font-size:17px;line-height:24px} .o3-tot{font-size:19px;line-height:24px} .o3-tot b{font-size:32px;line-height:38px} .o3-btn{height:56px;font-size:17px} .o3-small{font-size:13px;line-height:18px;text-align:center} .o3-trust{display:grid;gap:12px;font-size:15px;line-height:20px} .o3-tgf{width:56px;height:56px;right:-112px;top:660px} .o3-pg{--ink:#1D1D1F;--ink2:#515154;--gray:#6E6E73;--ph:#86868B} .o3-h1 .o3-g,.o3-h2 .o3-g{color:#86868B} .o3-add .o3-s,.o3-opt .o3-s,.o3-sum .o3-k,.o3-note{color:var(--ink2)} .o3-tot b{letter-spacing:-0.02em} .o3-lead{color:var(--ink2)} .o3-qq{font-weight:700;color:var(--ink);display:flex;justify-content:space-between;align-items:baseline;gap:12px} .o3-qq i{font-style:normal;font-weight:400;color:var(--gray)} .o3-qh{color:var(--ink2)} .o3-f{background:#fff;border:1px solid var(--line);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink)} .o3-f.o3-e{color:var(--ph)} .o3-opt .o3-s{color:var(--ink2)} .o3-opt .o3-li{color:var(--ink)} .o3-note{color:var(--ink2)!important} .o3-cb{color:var(--ink)} .o3-box{border-color:#86868B;background:transparent} .o3-sum .o3-k{color:var(--ink2)} .o3-small{color:var(--gray)} .o3-trust div{color:var(--ink)} .o3-acts{color:var(--blue)} .o3-ex2{color:var(--ink2);margin-top:14px;font-size:15px;line-height:22px} .o3-lnk.o3-lb{font-weight:700;white-space:nowrap} .o3-rd{position:absolute;width:22px;height:22px;border-radius:50%;border:1.5px solid #86868B;top:22px;right:22px} .o3-opt.o3-on .o3-rd{border:0;background:var(--blue);top:21px;right:21px} .o3-opt.o3-on .o3-rd:after{content:"";position:absolute;inset:0;margin:auto;width:8px;height:8px;border-radius:50%;background:#fff} .o3-opt.o3-w .o3-rd{top:0;bottom:0;margin:auto 0;right:20px} .o3-opt.o3-w.o3-on .o3-rd{right:19px} .o3-opt.o3-w{padding-right:56px!important} .o3-opt .o3-t{padding-right:28px} .o3-opt.o3-w .o3-t{padding-right:0} .o3-btn.o3-dis{background:#E8E8ED;color:#86868B} .o3-sumcb{margin-top:24px!important} .o3-sumcb .o3-cb{font-size:15px;line-height:22px} .o3-sec .o3-eb{font-size:17px;line-height:24px;margin-bottom:10px} .o3-lead{font-size:19px;line-height:28px} .o3-qq{font-size:19px;line-height:24px} .o3-qq i{font-size:15px} .o3-qh{font-size:17px;line-height:24px;margin-top:4px} .o3-f{height:56px;line-height:54px;border-radius:12px;padding:0 16px;font-size:17px;margin-top:12px} .o3-qb{margin-top:32px} .o3-qb.o3-first{margin-top:36px} .o3-opt .o3-s{font-size:15px;line-height:20px} .o3-opt .o3-ul{font-size:15px;line-height:22px} .o3-note{font-size:17px;line-height:24px} .o3-cb{gap:14px;font-size:17px;line-height:24px;align-items:flex-start} .o3-box{width:22px;height:22px;border-radius:6px;margin-top:1px} .o3-sumcb .o3-box{margin-top:0} .o3-q{font-size:24px;line-height:30px} .o3-cbs{display:grid;gap:16px;margin-top:32px} .o3-small{font-size:15px;line-height:22px} .o3-sum .o3-row{font-size:17px;line-height:24px} .o3-trust{font-size:17px;line-height:24px;gap:14px} .o3-tot b{font-size:40px;line-height:44px} .o3-f.o3-err{line-height:53px;padding-left:15.5px} .o3-f.o3-foc{line-height:52px;padding-left:15px} .o3-sk{height:22px;border-radius:11px} .o3-caret{height:28px} .o3-ta{font-size:24px;line-height:30px;padding:14px 16px;margin-top:10px} .o3-hint{font-size:15px;line-height:22px;margin-top:10px} .o3-eda{margin-top:18px} .o3-toast{padding:16px 20px;font-size:17px;line-height:22px;margin-top:16px} .o3-co{padding:20px 22px;margin-top:12px} .o3-co .o3-t{font-size:17px;line-height:24px} .o3-co .o3-s{font-size:15px;line-height:22px;margin-top:2px} .o3-co .o3-lnk{top:20px;right:22px;font-size:15px;line-height:24px} .o3-okw{max-width:720px} .o3-okic{margin-bottom:28px} .o3-card{padding:28px} .o3-card .o3-ct{font-size:19px;line-height:24px} .o3-card .o3-cs{font-size:17px;line-height:24px;margin-top:6px} .o3-card .o3-rw{font-size:17px;line-height:24px;margin-top:12px} .o3-steps{gap:24px;margin-top:28px} .o3-st .o3-n{width:40px;height:40px;font-size:17px} .o3-st .o3-t{font-size:19px;line-height:24px;margin-top:8px} .o3-st .o3-s{font-size:17px;line-height:24px;margin-top:4px} .o3-inv{padding:32px} .o3-inv .o3-ct{font-size:24px;line-height:30px} .o3-inv .o3-rq{gap:16px;margin-top:24px} .o3-inv .o3-rq div{grid-template-columns:200px 1fr;gap:16px;font-size:17px;line-height:24px} .o3-qr{padding:32px 28px} .o3-qr .o3-ct{font-size:19px;line-height:24px;margin-top:20px} .o3-qr .o3-cs{font-size:15px;line-height:22px;margin-top:6px} .o3-pr s{margin-left:0!important} .o3-cols{margin-top:20px!important} .o3-sum{padding:28px 28px 28px!important;border-radius:24px} .o3-sum .o3-h{font-size:20px!important;line-height:26px!important} .o3-sum .o3-row{font-size:15px!important;line-height:22px!important} .o3-sum .o3-row.o3-mt24{margin-top:16px!important} .o3-sum .o3-row.o3-mt8{margin-top:2px!important} .o3-sum .o3-div.o3-mt24{margin-top:20px!important} .o3-tot.o3-mt24{margin-top:16px!important} .o3-tot span{font-size:17px} .o3-tot b{font-size:34px!important;line-height:40px!important} .o3-sumcb{margin-top:18px!important;gap:10px!important} .o3-sumcb .o3-cb{font-size:13px!important;line-height:18px!important;gap:10px!important;color:var(--ink2)} .o3-sumcb .o3-box{width:18px!important;height:18px!important;border-radius:5px!important;margin-top:0!important} .o3-sum .o3-btn.o3-mt24{margin-top:20px!important;height:52px} .o3-trust.o3-mt24{margin-top:18px!important} .o3-trust{font-size:13px!important;line-height:18px!important;gap:8px!important;color:var(--ink2)} .o3-trust div{color:var(--ink2)!important;gap:8px!important} .o3-trust svg{width:14px;height:14px} .o3-qh{font-size:15px!important;line-height:22px!important;margin-top:4px!important} .o3-safe{font-size:13px!important} .o3-wrap>.o3-eb{font-size:15px!important;line-height:20px!important;margin-bottom:16px!important} .o3-sec .o3-eb{font-size:15px!important;line-height:20px!important;margin-bottom:8px!important} .o3-h2{font-size:28px!important;line-height:34px!important} .o3-qb{margin-top:28px!important} .o3-qb.o3-first{margin-top:28px!important} .o3-opt .o3-t{font-size:17px!important;line-height:22px!important} .o3-opt .o3-pr{font-size:26px!important;line-height:32px!important;margin-top:6px!important} .o3-opt .o3-s{font-size:13px!important;line-height:18px!important} .o3-opt .o3-ul{font-size:13px!important;line-height:18px!important;gap:6px!important;margin-top:16px!important;padding-top:16px!important} .o3-ex2{font-size:13px!important;line-height:18px!important;margin-top:12px!important} .o3-opt.o3-w .o3-t{font-size:17px!important} .o3-note{font-size:15px!important;line-height:22px!important} .o3-small{font-size:13px!important;line-height:18px!important} .o3-q{font-size:22px!important;line-height:28px!important} .o3-acts{font-size:15px!important} .o3-cbs:not(.o3-sumcb) .o3-cb{font-size:15px!important;line-height:22px!important} .o3-add .o3-t{font-size:17px!important} .o3-add .o3-s{font-size:13px!important;line-height:18px!important} .o3-pg{--ink2:#6E6E73!important} .o3-pg{--ink2:#6E6E73} .o3-opt .o3-li{color:#1D1D1F!important} .o3-sumcb .o3-cb>div:last-child{color:#6E6E73} .o3-h1 .o3-g,.o3-h2 .o3-g{color:#86868B!important} .o3-wrap{padding-top:48px!important} .o3-sec{padding:48px 0!important} .o3-sec:first-child{padding-top:0!important} .o3-qb{margin-top:32px!important} .o3-qb.o3-first{margin-top:28px!important} .o3-cbs:not(.o3-sumcb) .o3-box,.o3-sumcb .o3-box{width:20px!important;height:20px!important;border-radius:6px!important} .o3-sumcb .o3-cb{align-items:flex-start} .o3-sumcb .o3-box{margin-top:-1px!important} .o3-rd{width:20px!important;height:20px!important} .o3-opt .o3-li svg,.o3-trust svg{width:14px!important;height:14px!important} .o3-opt .o3-li{gap:8px!important} .o3-sum .o3-div.o3-mt24{margin-top:20px!important} .o3-cols{margin-top:16px!important} .o3-more{font-size:13px;line-height:18px;color:#6E6E73;margin-top:14px} .o3-more .o3-lnk{font-weight:600} .o3-sec{border-top:0!important} .o3-more2{max-width:352px;margin-top:14px} .o3-more2 .o3-ex2{margin-top:0!important} .o3-hdr{position:sticky;top:0;z-index:20} .o3-hdr .o3-in{width:auto;max-width:1200px} .o3-wrap{width:auto;max-width:1200px} .o3-cols{grid-template-columns:minmax(0,1fr) 400px} .o3-sum{position:sticky;top:149px} .o3-sumcol{align-self:stretch;position:static} @media (max-width:1279px){.o3-hdr .o3-in{margin:0 40px} .o3-wrap{margin:0 40px} .o3-cols{gap:48px} } } @media (min-width:768px) and (max-width:1023px){.o3-pg,.o3-pg *{box-sizing:border-box;margin:0;padding:0} .o3-pg{--blue:#0A5CFF;--tint:#EAF1FF;--ink:#1D1D1F;--gray:#6E6E73;--gray2:#A1A1A6;--ph:#86868B;--soft:#F5F5F7;--strong:#E8E8ED;--line:#D2D2D7;--hair:#E8E8ED} .o3-hdr{background:#fff;border-bottom:1px solid var(--hair)} .o3-hdr .o3-in{display:flex;align-items:center;justify-content:space-between} .o3-logo{font-weight:700} .o3-logo span{color:var(--blue)} .o3-safe{display:flex;align-items:center;gap:6px;color:var(--gray)} .o3-eb{color:var(--blue);font-weight:700} .o3-h1,.o3-h2{font-weight:700} .o3-h1 .o3-g,.o3-h2 .o3-g{color:var(--gray2)} .o3-sec{border-top:1px solid var(--hair)} .o3-sec:first-child{border-top:0} .o3-sub{font-weight:700} .o3-opt{position:relative;background:#fff;border:1px solid var(--line)} .o3-opt.o3-on{border:2px solid var(--blue)} .o3-opt .o3-t{font-weight:700} .o3-opt .o3-s{color:var(--gray)} .o3-opt .o3-pr{font-weight:700} .o3-opt .o3-li{display:flex;gap:8px;align-items:center;color:var(--ink)} .o3-opt .o3-ex{color:var(--blue);font-weight:700} .o3-ic{display:flex;align-items:center;justify-content:center;color:var(--ink)} .o3-on .o3-ic{color:var(--blue)} .o3-fl{border:1px solid var(--line);background:#fff;display:flex;flex-direction:column;justify-content:center} .o3-fl .o3-l{color:var(--gray)} .o3-fl.o3-e .o3-l{color:var(--ph)} .o3-fl .o3-v{color:var(--ink)} .o3-help{color:var(--gray)} .o3-help b{color:var(--ink);font-weight:400} .o3-quote{background:var(--soft)} .o3-ov{color:var(--gray);font-weight:700;letter-spacing:.06em;text-transform:uppercase} .o3-q{font-weight:700} .o3-acts{display:flex;color:var(--blue);font-weight:700} .o3-acts span{display:flex;align-items:center;gap:6px} .o3-cb{display:flex;align-items:flex-start} .o3-box{flex:none;border-radius:6px;border:1.5px solid var(--line);background:#fff;display:flex;align-items:center;justify-content:center} .o3-box.o3-on{background:var(--blue);border-color:var(--blue)} .o3-lnk{color:var(--blue)} .o3-add{display:flex;align-items:center;border:1px dashed var(--line)} .o3-add .o3-pi{display:flex;align-items:center;justify-content:center;background:var(--tint);color:var(--blue)} .o3-add .o3-t{font-weight:700} .o3-add .o3-s{color:var(--gray)} .o3-add .o3-p{margin-left:auto;font-weight:700} .o3-sum{background:var(--soft)} .o3-sum .o3-row{display:flex;justify-content:space-between} .o3-sum .o3-k{color:var(--gray)} .o3-sum .o3-div{height:1px;background:var(--line)} .o3-tot{display:flex;justify-content:space-between;align-items:baseline;font-weight:700} .o3-btn{display:flex;align-items:center;justify-content:center;border-radius:999px;background:var(--blue);color:#fff;font-weight:700} .o3-small{color:var(--gray)} .o3-trust div{display:flex;gap:10px;align-items:center} .o3-tgf{position:absolute;border-radius:50%;background:#2AABEE;display:flex;align-items:center;justify-content:center} .o3-tgi{border-radius:50%;background:#2AABEE;display:flex;align-items:center;justify-content:center} .o3-pg{--red:#D70015;--redbg:#FFF2F4} .o3-pg{font-family:Inter,sans-serif;color:var(--ink);background:#fff;-webkit-font-smoothing:antialiased;position:relative} .o3-f.o3-err,.o3-opt.o3-erb{border:1.5px solid var(--red)} .o3-box.o3-erb{border-color:var(--red)} .o3-f.o3-foc{border:2px solid var(--blue)} .o3-er{display:flex;align-items:flex-start;gap:8px;color:var(--red);font-size:15px;line-height:20px;margin-top:10px} .o3-er svg{flex:none;margin-top:2px} .o3-btn.o3-ld{gap:10px} .o3-sk{height:20px;border-radius:10px;background:#E1E1E6;margin-top:14px} .o3-sk+.o3-sk{margin-top:12px} .o3-caret{display:inline-block;width:2px;background:var(--blue);vertical-align:-4px;margin-left:2px} .o3-qlab{display:flex;justify-content:space-between} .o3-ta{background:#fff;border:2px solid var(--blue);border-radius:12px;font-weight:700} .o3-hint{color:var(--ink2)} .o3-eda{display:flex;align-items:center;gap:20px} .o3-btn.o3-sm{height:44px;padding:0 22px;font-size:17px} .o3-btn.o3-bs{background:var(--tint);color:var(--blue);gap:10px} .o3-btn.o3-out{background:#fff;color:var(--blue);border:1px solid var(--blue)} .o3-toast{display:flex;align-items:center;justify-content:space-between;background:#1D1D1F;color:#fff;border-radius:14px} .o3-toast .o3-lnk{color:#7FB0FF;font-weight:700} .o3-pr s{font-size:17px;font-weight:400;color:var(--ph);margin-left:8px;letter-spacing:0;text-decoration:line-through} .o3-ok2{display:flex;gap:8px;align-items:flex-start;color:var(--ink);margin-top:14px;font-size:15px;line-height:22px} .o3-ok2 svg{flex:none;margin-top:3px} .o3-b2{height:44px;border:1px solid var(--blue);color:var(--blue);border-radius:999px;display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:700;margin-top:10px} .o3-fx{height:48px;line-height:44px;border:2px solid var(--blue);border-radius:12px;padding:0 13px;font-size:17px;background:#fff;margin-top:12px;color:var(--ink)} .o3-sug{border:1px solid var(--line);border-radius:14px;background:#fff;margin-top:8px;overflow:hidden} .o3-sug .o3-it{padding:14px 16px;border-top:1px solid var(--hair)} .o3-sug .o3-it:first-child{border-top:0;background:var(--soft)} .o3-sug .o3-t{font-weight:700;font-size:17px;line-height:22px} .o3-sug .o3-s{color:var(--ink2);font-size:15px;line-height:20px;margin-top:2px} .o3-sug .o3-t b{color:var(--blue)} .o3-co{background:var(--soft);border-radius:16px;position:relative} .o3-co .o3-t{font-weight:700} .o3-co .o3-s{color:var(--ink2)} .o3-co .o3-lnk{position:absolute;font-weight:700} .o3-sum .o3-row .o3-neg{color:var(--ink)} .o3-sum .o3-er{justify-content:center;text-align:left} .o3-okic{display:block} .o3-card{border:1px solid var(--line);border-radius:20px} .o3-card .o3-ct{font-weight:700} .o3-card .o3-cs{color:var(--ink2)} .o3-card .o3-rw{display:flex;justify-content:space-between;gap:16px} .o3-card .o3-rw span:first-child{color:var(--ink2)} .o3-card .o3-rw span:last-child{text-align:right} .o3-steps{display:grid} .o3-st{display:flex;gap:16px} .o3-st .o3-n{flex:none;border-radius:50%;background:var(--tint);color:var(--blue);font-weight:700;display:flex;align-items:center;justify-content:center} .o3-st .o3-t{font-weight:700} .o3-st .o3-s{color:var(--ink2)} .o3-inv{background:var(--soft);border-radius:24px} .o3-inv .o3-ct{font-weight:700} .o3-inv .o3-rq{display:grid} .o3-inv .o3-rq div{display:grid} .o3-inv .o3-rq span:first-child{color:var(--gray)} .o3-qr{background:#fff;border:1px solid var(--line);border-radius:24px;text-align:center} .o3-qr .o3-ct{font-weight:700} .o3-qr .o3-cs{color:var(--ink2)} .o3-qr svg{display:block;margin:0 auto} .o3-bar{position:absolute;left:0;right:0;bottom:0;background:#fff;border-top:1px solid var(--hair);padding:12px 16px 30px;display:flex;align-items:center;gap:14px} .o3-bar .o3-p{font-weight:700;font-size:20px;line-height:24px} .o3-bar .o3-k{font-size:13px;line-height:18px;color:var(--gray)} .o3-bar .o3-btn{flex:1;height:50px} .o3-a4{font-family:Inter,sans-serif;color:#1D1D1F;background:#fff;width:794px;padding:56px 64px;position:relative} .o3-a4 .o3-top{display:flex;justify-content:space-between;align-items:flex-start} .o3-a4 .o3-logo{font-size:22px} .o3-a4 .o3-mt{color:#6E6E73;font-size:12px;line-height:17px;text-align:right} .o3-a4 h1{font-size:24px;line-height:30px;font-weight:700;margin-top:40px} .o3-a4 .o3-sub2{font-size:13px;line-height:19px;color:#515154;margin-top:6px} .o3-a4 table{width:100%;border-collapse:collapse;margin-top:24px;font-size:12px;line-height:17px} .o3-a4 td,.o3-a4 th{border:1px solid #1D1D1F;padding:6px 8px;vertical-align:top;text-align:left} .o3-a4 th{font-weight:700;background:#F5F5F7} .o3-a4 .o3-r{text-align:right} .o3-a4 .o3-kv{display:grid;grid-template-columns:150px 1fr;gap:6px 16px;font-size:12px;line-height:17px;margin-top:20px} .o3-a4 .o3-kv span:nth-child(odd){color:#6E6E73} .o3-a4 .o3-tot2{margin-top:14px;font-size:13px;line-height:20px;text-align:right} .o3-a4 .o3-tot2 b{font-weight:700} .o3-a4 .o3-words{margin-top:12px;font-size:13px;line-height:19px} .o3-a4 .o3-sign{display:flex;justify-content:space-between;margin-top:48px;font-size:13px;line-height:19px} .o3-a4 .o3-ln{display:inline-block;width:160px;border-bottom:1px solid #1D1D1F;margin:0 8px;height:14px} .o3-a4 .o3-foot{margin-top:40px;padding-top:14px;border-top:1px solid #D2D2D7;font-size:11px;line-height:16px;color:#6E6E73} .o3-rc{width:360px;margin:32px auto 0;border:1px solid #D2D2D7;border-radius:16px;padding:28px 28px 24px;font-size:13px;line-height:19px} .o3-rc .o3-c{text-align:center} .o3-rc .o3-dl{border-top:1px dashed #A1A1A6;margin:14px 0} .o3-rc .o3-rw{display:flex;justify-content:space-between;gap:12px} .o3-rc .o3-rw span:first-child{color:#515154} .o3-rc .o3-big{font-size:17px;line-height:24px;font-weight:700} .o3-rc svg{display:block;margin:16px auto 0} .o3-hdr .o3-in{width:1200px;margin:0 auto;height:64px} .o3-logo{font-size:24px} .o3-safe{font-size:15px} .o3-wrap{width:1200px;margin:0 auto;padding:80px 0 120px;position:relative} .o3-eb{font-size:17px;line-height:24px;margin-bottom:12px} .o3-h1{font-size:56px;line-height:60px;letter-spacing:-0.02em} .o3-lead{font-size:19px;line-height:28px;color:var(--gray);margin-top:20px;max-width:720px} .o3-cols{display:grid;grid-template-columns:720px 400px;gap:80px;margin-top:64px;align-items:start} .o3-sec{padding:56px 0} .o3-sec:first-child{padding-top:0} .o3-sec .o3-eb{font-size:15px;line-height:20px;margin-bottom:10px} .o3-h2{font-size:32px;line-height:38px;letter-spacing:-0.015em} .o3-grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px} .o3-mt40{margin-top:36px} .o3-mt32{margin-top:32px} .o3-mt24{margin-top:24px} .o3-mt16{margin-top:16px} .o3-mt12{margin-top:12px} .o3-mt8{margin-top:8px} .o3-opt{border-radius:18px;padding:24px} .o3-opt.o3-on{padding:23px} .o3-opt .o3-t{font-size:19px;line-height:24px} .o3-opt .o3-pr{font-size:28px;line-height:34px;margin-top:10px} .o3-opt .o3-s{font-size:15px;line-height:20px;margin-top:4px} .o3-opt .o3-ul{display:grid;gap:8px;margin-top:20px;padding-top:20px;border-top:1px solid var(--hair);font-size:15px;line-height:20px} .o3-opt .o3-ex{font-size:15px;line-height:20px;margin-top:14px} .o3-opt.o3-w{display:flex;align-items:center;gap:16px;padding:20px 24px} .o3-opt.o3-w.o3-on{padding:19px 23px} .o3-ic{width:44px;height:44px;border-radius:12px;background:var(--soft);flex:none} .o3-opt.o3-w .o3-t{font-size:17px;line-height:22px} .o3-fl{height:60px;border-radius:12px;padding:0 16px} .o3-fl .o3-l{font-size:12px;line-height:16px} .o3-fl .o3-v{font-size:17px;line-height:24px} .o3-fl.o3-e .o3-l{font-size:17px;line-height:24px} .o3-help{font-size:13px;line-height:18px;margin-top:8px;padding-left:2px} .o3-sub{font-size:19px;line-height:24px} .o3-note{font-size:15px;line-height:22px;color:var(--gray)} .o3-quote{border-radius:20px;padding:28px 28px 26px} .o3-ov{font-size:13px;line-height:18px} .o3-q{font-size:28px;line-height:34px;letter-spacing:-0.01em;margin-top:10px} .o3-acts{gap:28px;font-size:15px;line-height:20px;margin-top:18px} .o3-cb{gap:14px;font-size:15px;line-height:22px} .o3-box{width:22px;height:22px} .o3-add{border-radius:18px;padding:18px 24px;gap:16px} .o3-add .o3-pi{width:40px;height:40px;border-radius:12px} .o3-add .o3-t{font-size:17px;line-height:22px} .o3-add .o3-s{font-size:15px;line-height:20px} .o3-add .o3-p{font-size:17px} .o3-sum{position:sticky;top:32px;border-radius:24px;padding:36px 32px 32px} .o3-sum .o3-h{font-size:24px;line-height:30px;font-weight:700} .o3-sum .o3-row{font-size:17px;line-height:24px} .o3-tot{font-size:19px;line-height:24px} .o3-tot b{font-size:32px;line-height:38px} .o3-btn{height:56px;font-size:17px} .o3-small{font-size:13px;line-height:18px;text-align:center} .o3-trust{display:grid;gap:12px;font-size:15px;line-height:20px} .o3-tgf{width:56px;height:56px;right:-112px;top:660px} .o3-hdr .o3-in{width:auto;margin:0;padding:0 40px;height:60px} .o3-logo{font-size:22px} .o3-safe{font-size:15px} .o3-wrap{width:auto;margin:0;padding:56px 40px 80px;position:relative} .o3-eb{font-size:17px;line-height:24px;margin-bottom:12px} .o3-h1{font-size:44px;line-height:48px;letter-spacing:-0.02em} .o3-lead{font-size:19px;line-height:28px;color:var(--gray);margin-top:16px;max-width:620px} .o3-cols{display:block;margin-top:48px} .o3-sec{padding:48px 0} .o3-sec:first-child{padding-top:0} .o3-sec .o3-eb{font-size:15px;line-height:20px;margin-bottom:10px} .o3-h2{font-size:30px;line-height:36px;letter-spacing:-0.015em} .o3-grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px} .o3-mt40{margin-top:36px} .o3-mt32{margin-top:32px} .o3-mt24{margin-top:24px} .o3-mt16{margin-top:16px} .o3-mt12{margin-top:12px} .o3-mt8{margin-top:8px} .o3-opt{border-radius:18px;padding:22px} .o3-opt.o3-on{padding:21px} .o3-opt .o3-t{font-size:19px;line-height:24px} .o3-opt .o3-pr{font-size:28px;line-height:34px;margin-top:8px} .o3-opt .o3-s{font-size:15px;line-height:20px;margin-top:4px} .o3-opt .o3-ul{display:grid;gap:8px;margin-top:18px;padding-top:18px;border-top:1px solid var(--hair);font-size:15px;line-height:20px} .o3-opt.o3-w{display:flex;align-items:center;gap:14px;padding:18px 20px} .o3-opt.o3-w.o3-on{padding:17px 19px} .o3-ic{width:44px;height:44px;border-radius:12px;background:var(--soft);flex:none} .o3-opt.o3-w .o3-t{font-size:17px;line-height:22px} .o3-note{font-size:15px;line-height:22px;color:var(--gray)} .o3-quote{border-radius:20px;padding:24px 24px 22px} .o3-ov{font-size:13px;line-height:18px} .o3-q{font-size:26px;line-height:32px;letter-spacing:-0.01em;margin-top:10px} .o3-acts{gap:24px;font-size:15px;line-height:20px;margin-top:16px} .o3-cb{gap:14px;font-size:15px;line-height:22px} .o3-box{width:22px;height:22px} .o3-add{border-radius:18px;padding:18px 22px;gap:16px} .o3-add .o3-pi{width:40px;height:40px;border-radius:12px} .o3-add .o3-t{font-size:17px;line-height:22px} .o3-add .o3-s{font-size:15px;line-height:20px} .o3-add .o3-p{font-size:17px} .o3-sum{border-radius:24px;padding:32px 28px 28px;margin-top:8px} .o3-sum .o3-h{font-size:24px;line-height:30px;font-weight:700} .o3-sum .o3-row{font-size:17px;line-height:24px} .o3-tot{font-size:19px;line-height:24px} .o3-tot b{font-size:32px;line-height:38px} .o3-btn{height:56px;font-size:17px} .o3-small{font-size:13px;line-height:18px;text-align:center} .o3-trust{display:grid;gap:12px;font-size:15px;line-height:20px} .o3-pg{--ink:#1D1D1F;--ink2:#515154;--gray:#6E6E73;--ph:#86868B} .o3-h1 .o3-g,.o3-h2 .o3-g{color:#86868B} .o3-add .o3-s,.o3-opt .o3-s,.o3-sum .o3-k,.o3-note{color:var(--ink2)} .o3-tot b{letter-spacing:-0.02em} .o3-lead{color:var(--ink2)} .o3-qq{font-weight:700;color:var(--ink);display:flex;justify-content:space-between;align-items:baseline;gap:12px} .o3-qq i{font-style:normal;font-weight:400;color:var(--gray)} .o3-qh{color:var(--ink2)} .o3-f{background:#fff;border:1px solid var(--line);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink)} .o3-f.o3-e{color:var(--ph)} .o3-opt .o3-s{color:var(--ink2)} .o3-opt .o3-li{color:var(--ink)} .o3-note{color:var(--ink2)!important} .o3-cb{color:var(--ink)} .o3-box{border-color:#86868B;background:transparent} .o3-sum .o3-k{color:var(--ink2)} .o3-small{color:var(--gray)} .o3-trust div{color:var(--ink)} .o3-acts{color:var(--blue)} .o3-ex2{color:var(--ink2);margin-top:14px;font-size:15px;line-height:22px} .o3-lnk.o3-lb{font-weight:700;white-space:nowrap} .o3-rd{position:absolute;width:22px;height:22px;border-radius:50%;border:1.5px solid #86868B;top:22px;right:22px} .o3-opt.o3-on .o3-rd{border:0;background:var(--blue);top:21px;right:21px} .o3-opt.o3-on .o3-rd:after{content:"";position:absolute;inset:0;margin:auto;width:8px;height:8px;border-radius:50%;background:#fff} .o3-opt.o3-w .o3-rd{top:0;bottom:0;margin:auto 0;right:20px} .o3-opt.o3-w.o3-on .o3-rd{right:19px} .o3-opt.o3-w{padding-right:56px!important} .o3-opt .o3-t{padding-right:28px} .o3-opt.o3-w .o3-t{padding-right:0} .o3-btn.o3-dis{background:#E8E8ED;color:#86868B} .o3-sumcb{margin-top:24px!important} .o3-sumcb .o3-cb{font-size:15px;line-height:22px} .o3-sec .o3-eb{font-size:17px;line-height:24px;margin-bottom:10px} .o3-lead{font-size:19px;line-height:28px} .o3-qq{font-size:19px;line-height:24px} .o3-qq i{font-size:15px} .o3-qh{font-size:17px;line-height:24px;margin-top:4px} .o3-f{height:56px;line-height:54px;border-radius:12px;padding:0 16px;font-size:17px;margin-top:12px} .o3-qb{margin-top:32px} .o3-qb.o3-first{margin-top:36px} .o3-opt .o3-s{font-size:15px;line-height:20px} .o3-opt .o3-ul{font-size:15px;line-height:22px} .o3-note{font-size:17px;line-height:24px} .o3-cb{gap:14px;font-size:17px;line-height:24px;align-items:flex-start} .o3-box{width:22px;height:22px;border-radius:6px;margin-top:1px} .o3-sumcb .o3-box{margin-top:0} .o3-q{font-size:24px;line-height:30px} .o3-cbs{display:grid;gap:16px;margin-top:32px} .o3-small{font-size:15px;line-height:22px} .o3-sum .o3-row{font-size:17px;line-height:24px} .o3-trust{font-size:17px;line-height:24px;gap:14px} .o3-tot b{font-size:36px;line-height:40px} .o3-f.o3-err{line-height:53px;padding-left:15.5px} .o3-f.o3-foc{line-height:52px;padding-left:15px} .o3-sk{height:22px;border-radius:11px} .o3-caret{height:28px} .o3-ta{font-size:24px;line-height:30px;padding:14px 16px;margin-top:10px} .o3-hint{font-size:15px;line-height:22px;margin-top:10px} .o3-eda{margin-top:18px} .o3-toast{padding:16px 20px;font-size:17px;line-height:22px;margin-top:16px} .o3-co{padding:20px 22px;margin-top:12px} .o3-co .o3-t{font-size:17px;line-height:24px} .o3-co .o3-s{font-size:15px;line-height:22px;margin-top:2px} .o3-co .o3-lnk{top:20px;right:22px;font-size:15px;line-height:24px} .o3-okw{max-width:720px} .o3-okic{margin-bottom:28px} .o3-card{padding:28px} .o3-card .o3-ct{font-size:19px;line-height:24px} .o3-card .o3-cs{font-size:17px;line-height:24px;margin-top:6px} .o3-card .o3-rw{font-size:17px;line-height:24px;margin-top:12px} .o3-steps{gap:24px;margin-top:28px} .o3-st .o3-n{width:40px;height:40px;font-size:17px} .o3-st .o3-t{font-size:19px;line-height:24px;margin-top:8px} .o3-st .o3-s{font-size:17px;line-height:24px;margin-top:4px} .o3-inv{padding:32px} .o3-inv .o3-ct{font-size:24px;line-height:30px} .o3-inv .o3-rq{gap:16px;margin-top:24px} .o3-inv .o3-rq div{grid-template-columns:180px 1fr;gap:16px;font-size:17px;line-height:24px} .o3-qr{padding:32px 28px} .o3-qr .o3-ct{font-size:19px;line-height:24px;margin-top:20px} .o3-qr .o3-cs{font-size:15px;line-height:22px;margin-top:6px} .o3-pr s{margin-left:0!important} .o3-cols{margin-top:20px!important} .o3-sum{padding:28px 28px 28px!important;border-radius:24px} .o3-sum .o3-h{font-size:20px!important;line-height:26px!important} .o3-sum .o3-row{font-size:15px!important;line-height:22px!important} .o3-sum .o3-row.o3-mt24{margin-top:16px!important} .o3-sum .o3-row.o3-mt8{margin-top:2px!important} .o3-sum .o3-div.o3-mt24{margin-top:20px!important} .o3-tot.o3-mt24{margin-top:16px!important} .o3-tot span{font-size:17px} .o3-tot b{font-size:34px!important;line-height:40px!important} .o3-sumcb{margin-top:18px!important;gap:10px!important} .o3-sumcb .o3-cb{font-size:13px!important;line-height:18px!important;gap:10px!important;color:var(--ink2)} .o3-sumcb .o3-box{width:18px!important;height:18px!important;border-radius:5px!important;margin-top:0!important} .o3-sum .o3-btn.o3-mt24{margin-top:20px!important;height:52px} .o3-trust.o3-mt24{margin-top:18px!important} .o3-trust{font-size:13px!important;line-height:18px!important;gap:8px!important;color:var(--ink2)} .o3-trust div{color:var(--ink2)!important;gap:8px!important} .o3-trust svg{width:14px;height:14px} .o3-qh{font-size:15px!important;line-height:22px!important;margin-top:4px!important} .o3-safe{font-size:13px!important} .o3-wrap>.o3-eb{font-size:15px!important;line-height:20px!important;margin-bottom:16px!important} .o3-sec .o3-eb{font-size:15px!important;line-height:20px!important;margin-bottom:8px!important} .o3-h2{font-size:28px!important;line-height:34px!important} .o3-qb{margin-top:28px!important} .o3-qb.o3-first{margin-top:28px!important} .o3-opt .o3-t{font-size:17px!important;line-height:22px!important} .o3-opt .o3-pr{font-size:26px!important;line-height:32px!important;margin-top:6px!important} .o3-opt .o3-s{font-size:13px!important;line-height:18px!important} .o3-opt .o3-ul{font-size:13px!important;line-height:18px!important;gap:6px!important;margin-top:16px!important;padding-top:16px!important} .o3-ex2{font-size:13px!important;line-height:18px!important;margin-top:12px!important} .o3-opt.o3-w .o3-t{font-size:17px!important} .o3-note{font-size:15px!important;line-height:22px!important} .o3-small{font-size:13px!important;line-height:18px!important} .o3-q{font-size:22px!important;line-height:28px!important} .o3-acts{font-size:15px!important} .o3-cbs:not(.o3-sumcb) .o3-cb{font-size:15px!important;line-height:22px!important} .o3-add .o3-t{font-size:17px!important} .o3-add .o3-s{font-size:13px!important;line-height:18px!important} .o3-pg{--ink2:#6E6E73!important} .o3-pg{--ink2:#6E6E73} .o3-opt .o3-li{color:#1D1D1F!important} .o3-sumcb .o3-cb>div:last-child{color:#6E6E73} .o3-h1 .o3-g,.o3-h2 .o3-g{color:#86868B!important} .o3-wrap{padding-top:48px!important} .o3-sec{padding:48px 0!important} .o3-sec:first-child{padding-top:0!important} .o3-qb{margin-top:32px!important} .o3-qb.o3-first{margin-top:28px!important} .o3-cbs:not(.o3-sumcb) .o3-box,.o3-sumcb .o3-box{width:20px!important;height:20px!important;border-radius:6px!important} .o3-sumcb .o3-cb{align-items:flex-start} .o3-sumcb .o3-box{margin-top:-1px!important} .o3-rd{width:20px!important;height:20px!important} .o3-opt .o3-li svg,.o3-trust svg{width:14px!important;height:14px!important} .o3-opt .o3-li{gap:8px!important} .o3-sum .o3-div.o3-mt24{margin-top:20px!important} .o3-cols{margin-top:16px!important} .o3-more{font-size:13px;line-height:18px;color:#6E6E73;margin-top:14px} .o3-more .o3-lnk{font-weight:600} .o3-sec{border-top:0!important} .o3-more2{max-width:352px;margin-top:14px} .o3-more2 .o3-ex2{margin-top:0!important} .o3-hdr{position:sticky;top:0;z-index:20} .o3-sum,.o3-sumcol{position:static!important} } @media (max-width:767px){.o3-pg,.o3-pg *{box-sizing:border-box;margin:0;padding:0} .o3-pg{--blue:#0A5CFF;--tint:#EAF1FF;--ink:#1D1D1F;--gray:#6E6E73;--gray2:#A1A1A6;--ph:#86868B;--soft:#F5F5F7;--strong:#E8E8ED;--line:#D2D2D7;--hair:#E8E8ED} .o3-hdr{background:#fff;border-bottom:1px solid var(--hair)} .o3-hdr .o3-in{display:flex;align-items:center;justify-content:space-between} .o3-logo{font-weight:700} .o3-logo span{color:var(--blue)} .o3-safe{display:flex;align-items:center;gap:6px;color:var(--gray)} .o3-eb{color:var(--blue);font-weight:700} .o3-h1,.o3-h2{font-weight:700} .o3-h1 .o3-g,.o3-h2 .o3-g{color:var(--gray2)} .o3-sec{border-top:1px solid var(--hair)} .o3-sec:first-child{border-top:0} .o3-sub{font-weight:700} .o3-opt{position:relative;background:#fff;border:1px solid var(--line)} .o3-opt.o3-on{border:2px solid var(--blue)} .o3-opt .o3-t{font-weight:700} .o3-opt .o3-s{color:var(--gray)} .o3-opt .o3-pr{font-weight:700} .o3-opt .o3-li{display:flex;gap:8px;align-items:center;color:var(--ink)} .o3-opt .o3-ex{color:var(--blue);font-weight:700} .o3-ic{display:flex;align-items:center;justify-content:center;color:var(--ink)} .o3-on .o3-ic{color:var(--blue)} .o3-fl{border:1px solid var(--line);background:#fff;display:flex;flex-direction:column;justify-content:center} .o3-fl .o3-l{color:var(--gray)} .o3-fl.o3-e .o3-l{color:var(--ph)} .o3-fl .o3-v{color:var(--ink)} .o3-help{color:var(--gray)} .o3-help b{color:var(--ink);font-weight:400} .o3-quote{background:var(--soft)} .o3-ov{color:var(--gray);font-weight:700;letter-spacing:.06em;text-transform:uppercase} .o3-q{font-weight:700} .o3-acts{display:flex;color:var(--blue);font-weight:700} .o3-acts span{display:flex;align-items:center;gap:6px} .o3-cb{display:flex;align-items:flex-start} .o3-box{flex:none;border-radius:6px;border:1.5px solid var(--line);background:#fff;display:flex;align-items:center;justify-content:center} .o3-box.o3-on{background:var(--blue);border-color:var(--blue)} .o3-lnk{color:var(--blue)} .o3-add{display:flex;align-items:center;border:1px dashed var(--line)} .o3-add .o3-pi{display:flex;align-items:center;justify-content:center;background:var(--tint);color:var(--blue)} .o3-add .o3-t{font-weight:700} .o3-add .o3-s{color:var(--gray)} .o3-add .o3-p{margin-left:auto;font-weight:700} .o3-sum{background:var(--soft)} .o3-sum .o3-row{display:flex;justify-content:space-between} .o3-sum .o3-k{color:var(--gray)} .o3-sum .o3-div{height:1px;background:var(--line)} .o3-tot{display:flex;justify-content:space-between;align-items:baseline;font-weight:700} .o3-btn{display:flex;align-items:center;justify-content:center;border-radius:999px;background:var(--blue);color:#fff;font-weight:700} .o3-small{color:var(--gray)} .o3-trust div{display:flex;gap:10px;align-items:center} .o3-tgf{position:absolute;border-radius:50%;background:#2AABEE;display:flex;align-items:center;justify-content:center} .o3-tgi{border-radius:50%;background:#2AABEE;display:flex;align-items:center;justify-content:center} .o3-pg{--red:#D70015;--redbg:#FFF2F4} .o3-pg{font-family:Inter,sans-serif;color:var(--ink);background:#fff;-webkit-font-smoothing:antialiased;position:relative} .o3-f.o3-err,.o3-opt.o3-erb{border:1.5px solid var(--red)} .o3-box.o3-erb{border-color:var(--red)} .o3-f.o3-foc{border:2px solid var(--blue)} .o3-er{display:flex;align-items:flex-start;gap:8px;color:var(--red);font-size:15px;line-height:20px;margin-top:10px} .o3-er svg{flex:none;margin-top:2px} .o3-btn.o3-ld{gap:10px} .o3-sk{height:20px;border-radius:10px;background:#E1E1E6;margin-top:14px} .o3-sk+.o3-sk{margin-top:12px} .o3-caret{display:inline-block;width:2px;background:var(--blue);vertical-align:-4px;margin-left:2px} .o3-qlab{display:flex;justify-content:space-between} .o3-ta{background:#fff;border:2px solid var(--blue);border-radius:12px;font-weight:700} .o3-hint{color:var(--ink2)} .o3-eda{display:flex;align-items:center;gap:20px} .o3-btn.o3-sm{height:44px;padding:0 22px;font-size:17px} .o3-btn.o3-bs{background:var(--tint);color:var(--blue);gap:10px} .o3-btn.o3-out{background:#fff;color:var(--blue);border:1px solid var(--blue)} .o3-toast{display:flex;align-items:center;justify-content:space-between;background:#1D1D1F;color:#fff;border-radius:14px} .o3-toast .o3-lnk{color:#7FB0FF;font-weight:700} .o3-pr s{font-size:17px;font-weight:400;color:var(--ph);margin-left:8px;letter-spacing:0;text-decoration:line-through} .o3-ok2{display:flex;gap:8px;align-items:flex-start;color:var(--ink);margin-top:14px;font-size:15px;line-height:22px} .o3-ok2 svg{flex:none;margin-top:3px} .o3-b2{height:44px;border:1px solid var(--blue);color:var(--blue);border-radius:999px;display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:700;margin-top:10px} .o3-fx{height:48px;line-height:44px;border:2px solid var(--blue);border-radius:12px;padding:0 13px;font-size:17px;background:#fff;margin-top:12px;color:var(--ink)} .o3-sug{border:1px solid var(--line);border-radius:14px;background:#fff;margin-top:8px;overflow:hidden} .o3-sug .o3-it{padding:14px 16px;border-top:1px solid var(--hair)} .o3-sug .o3-it:first-child{border-top:0;background:var(--soft)} .o3-sug .o3-t{font-weight:700;font-size:17px;line-height:22px} .o3-sug .o3-s{color:var(--ink2);font-size:15px;line-height:20px;margin-top:2px} .o3-sug .o3-t b{color:var(--blue)} .o3-co{background:var(--soft);border-radius:16px;position:relative} .o3-co .o3-t{font-weight:700} .o3-co .o3-s{color:var(--ink2)} .o3-co .o3-lnk{position:absolute;font-weight:700} .o3-sum .o3-row .o3-neg{color:var(--ink)} .o3-sum .o3-er{justify-content:center;text-align:left} .o3-okic{display:block} .o3-card{border:1px solid var(--line);border-radius:20px} .o3-card .o3-ct{font-weight:700} .o3-card .o3-cs{color:var(--ink2)} .o3-card .o3-rw{display:flex;justify-content:space-between;gap:16px} .o3-card .o3-rw span:first-child{color:var(--ink2)} .o3-card .o3-rw span:last-child{text-align:right} .o3-steps{display:grid} .o3-st{display:flex;gap:16px} .o3-st .o3-n{flex:none;border-radius:50%;background:var(--tint);color:var(--blue);font-weight:700;display:flex;align-items:center;justify-content:center} .o3-st .o3-t{font-weight:700} .o3-st .o3-s{color:var(--ink2)} .o3-inv{background:var(--soft);border-radius:24px} .o3-inv .o3-ct{font-weight:700} .o3-inv .o3-rq{display:grid} .o3-inv .o3-rq div{display:grid} .o3-inv .o3-rq span:first-child{color:var(--gray)} .o3-qr{background:#fff;border:1px solid var(--line);border-radius:24px;text-align:center} .o3-qr .o3-ct{font-weight:700} .o3-qr .o3-cs{color:var(--ink2)} .o3-qr svg{display:block;margin:0 auto} .o3-bar{position:absolute;left:0;right:0;bottom:0;background:#fff;border-top:1px solid var(--hair);padding:12px 16px 30px;display:flex;align-items:center;gap:14px} .o3-bar .o3-p{font-weight:700;font-size:20px;line-height:24px} .o3-bar .o3-k{font-size:13px;line-height:18px;color:var(--gray)} .o3-bar .o3-btn{flex:1;height:50px} .o3-a4{font-family:Inter,sans-serif;color:#1D1D1F;background:#fff;width:794px;padding:56px 64px;position:relative} .o3-a4 .o3-top{display:flex;justify-content:space-between;align-items:flex-start} .o3-a4 .o3-logo{font-size:22px} .o3-a4 .o3-mt{color:#6E6E73;font-size:12px;line-height:17px;text-align:right} .o3-a4 h1{font-size:24px;line-height:30px;font-weight:700;margin-top:40px} .o3-a4 .o3-sub2{font-size:13px;line-height:19px;color:#515154;margin-top:6px} .o3-a4 table{width:100%;border-collapse:collapse;margin-top:24px;font-size:12px;line-height:17px} .o3-a4 td,.o3-a4 th{border:1px solid #1D1D1F;padding:6px 8px;vertical-align:top;text-align:left} .o3-a4 th{font-weight:700;background:#F5F5F7} .o3-a4 .o3-r{text-align:right} .o3-a4 .o3-kv{display:grid;grid-template-columns:150px 1fr;gap:6px 16px;font-size:12px;line-height:17px;margin-top:20px} .o3-a4 .o3-kv span:nth-child(odd){color:#6E6E73} .o3-a4 .o3-tot2{margin-top:14px;font-size:13px;line-height:20px;text-align:right} .o3-a4 .o3-tot2 b{font-weight:700} .o3-a4 .o3-words{margin-top:12px;font-size:13px;line-height:19px} .o3-a4 .o3-sign{display:flex;justify-content:space-between;margin-top:48px;font-size:13px;line-height:19px} .o3-a4 .o3-ln{display:inline-block;width:160px;border-bottom:1px solid #1D1D1F;margin:0 8px;height:14px} .o3-a4 .o3-foot{margin-top:40px;padding-top:14px;border-top:1px solid #D2D2D7;font-size:11px;line-height:16px;color:#6E6E73} .o3-rc{width:360px;margin:32px auto 0;border:1px solid #D2D2D7;border-radius:16px;padding:28px 28px 24px;font-size:13px;line-height:19px} .o3-rc .o3-c{text-align:center} .o3-rc .o3-dl{border-top:1px dashed #A1A1A6;margin:14px 0} .o3-rc .o3-rw{display:flex;justify-content:space-between;gap:12px} .o3-rc .o3-rw span:first-child{color:#515154} .o3-rc .o3-big{font-size:17px;line-height:24px;font-weight:700} .o3-rc svg{display:block;margin:16px auto 0} .o3-hdr .o3-in{padding:0 16px;height:52px} .o3-logo{font-size:21px} .o3-safe{font-size:13px;gap:5px} .o3-hr{display:flex;align-items:center;gap:12px} .o3-tgi{width:30px;height:30px} .o3-tgi svg{width:16px;height:16px} .o3-wrap{padding:36px 20px 40px;position:relative} .o3-eb{font-size:15px;line-height:20px;margin-bottom:10px} .o3-h1{font-size:34px;line-height:38px;letter-spacing:-0.02em} .o3-lead{font-size:17px;line-height:24px;color:var(--gray);margin-top:14px} .o3-sec{padding:40px 0} .o3-sec:first-of-type{margin-top:8px} .o3-sec .o3-eb{font-size:13px;line-height:18px;margin-bottom:8px} .o3-h2{font-size:26px;line-height:31px;letter-spacing:-0.015em} .o3-grid2{display:grid;gap:12px} .o3-mt40{margin-top:28px} .o3-mt32{margin-top:24px} .o3-mt24{margin-top:20px} .o3-mt16{margin-top:14px} .o3-mt12{margin-top:12px} .o3-mt8{margin-top:8px} .o3-opt{border-radius:18px;padding:20px} .o3-opt.o3-on{padding:19px} .o3-opt .o3-t{font-size:17px;line-height:22px} .o3-opt .o3-pr{font-size:26px;line-height:32px;margin-top:6px} .o3-opt .o3-s{font-size:15px;line-height:20px;margin-top:2px} .o3-opt .o3-ul{display:grid;gap:6px;margin-top:16px;padding-top:16px;border-top:1px solid var(--hair);font-size:15px;line-height:20px} .o3-opt .o3-ex{font-size:15px;line-height:20px;margin-top:12px} .o3-opt.o3-w{display:flex;align-items:center;gap:14px;padding:16px} .o3-opt.o3-w.o3-on{padding:15px} .o3-ic{width:40px;height:40px;border-radius:12px;background:var(--soft);flex:none} .o3-opt.o3-w .o3-t{font-size:17px;line-height:22px} .o3-fl{height:58px;border-radius:12px;padding:0 14px} .o3-fl .o3-l{font-size:12px;line-height:16px} .o3-fl .o3-v{font-size:17px;line-height:24px} .o3-fl.o3-e .o3-l{font-size:17px;line-height:24px} .o3-help{font-size:13px;line-height:18px;margin-top:7px;padding-left:2px} .o3-sub{font-size:17px;line-height:22px} .o3-note{font-size:15px;line-height:20px;color:var(--gray)} .o3-quote{border-radius:18px;padding:22px 20px 20px} .o3-ov{font-size:12px;line-height:16px} .o3-q{font-size:22px;line-height:28px;margin-top:8px} .o3-acts{gap:22px;font-size:15px;line-height:20px;margin-top:16px} .o3-cb{gap:12px;font-size:15px;line-height:20px} .o3-box{width:22px;height:22px} .o3-add{border-radius:18px;padding:14px 16px;gap:12px} .o3-add .o3-pi{width:36px;height:36px;border-radius:10px} .o3-add .o3-t{font-size:15px;line-height:20px} .o3-add .o3-s{font-size:13px;line-height:18px} .o3-add .o3-p{font-size:15px} .o3-sum{border-radius:22px;padding:24px 20px} .o3-sum .o3-h{font-size:22px;line-height:28px;font-weight:700} .o3-sum .o3-row{font-size:15px;line-height:20px} .o3-tot{font-size:17px;line-height:22px} .o3-tot b{font-size:28px;line-height:34px} .o3-btn{height:52px;font-size:17px} .o3-small{font-size:12px;line-height:16px;text-align:center} .o3-trust{display:grid;gap:10px;font-size:13px;line-height:18px} .o3-scr{position:relative;width:390px;height:844px;overflow:hidden} .o3-bar{position:absolute;left:0;right:0;bottom:0;background:rgba(255,255,255,.94);border-top:1px solid var(--hair);padding:12px 16px 30px;display:flex;align-items:center;gap:14px} .o3-bar .o3-p{font-weight:700;font-size:20px;line-height:24px} .o3-bar .o3-k{font-size:13px;line-height:18px;color:var(--gray)} .o3-bar .o3-btn{flex:1;height:50px} .o3-pg{--ink:#1D1D1F;--ink2:#515154;--gray:#6E6E73;--ph:#86868B} .o3-h1 .o3-g,.o3-h2 .o3-g{color:#86868B} .o3-add .o3-s,.o3-opt .o3-s,.o3-sum .o3-k,.o3-note{color:var(--ink2)} .o3-tot b{letter-spacing:-0.02em} .o3-lead{color:var(--ink2)} .o3-qq{font-weight:700;color:var(--ink);display:flex;justify-content:space-between;align-items:baseline;gap:12px} .o3-qq i{font-style:normal;font-weight:400;color:var(--gray)} .o3-qh{color:var(--ink2)} .o3-f{background:#fff;border:1px solid var(--line);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink)} .o3-f.o3-e{color:var(--ph)} .o3-opt .o3-s{color:var(--ink2)} .o3-opt .o3-li{color:var(--ink)} .o3-note{color:var(--ink2)!important} .o3-cb{color:var(--ink)} .o3-box{border-color:#86868B;background:transparent} .o3-sum .o3-k{color:var(--ink2)} .o3-small{color:var(--gray)} .o3-trust div{color:var(--ink)} .o3-acts{color:var(--blue)} .o3-ex2{color:var(--ink2);margin-top:14px;font-size:15px;line-height:22px} .o3-lnk.o3-lb{font-weight:700;white-space:nowrap} .o3-rd{position:absolute;width:22px;height:22px;border-radius:50%;border:1.5px solid #86868B;top:22px;right:22px} .o3-opt.o3-on .o3-rd{border:0;background:var(--blue);top:21px;right:21px} .o3-opt.o3-on .o3-rd:after{content:"";position:absolute;inset:0;margin:auto;width:8px;height:8px;border-radius:50%;background:#fff} .o3-opt.o3-w .o3-rd{top:0;bottom:0;margin:auto 0;right:20px} .o3-opt.o3-w.o3-on .o3-rd{right:19px} .o3-opt.o3-w{padding-right:56px!important} .o3-opt .o3-t{padding-right:28px} .o3-opt.o3-w .o3-t{padding-right:0} .o3-btn.o3-dis{background:#E8E8ED;color:#86868B} .o3-sumcb{margin-top:24px!important} .o3-sumcb .o3-cb{font-size:15px;line-height:22px} .o3-sec .o3-eb{font-size:15px;line-height:20px;margin-bottom:8px} .o3-lead{font-size:17px;line-height:24px} .o3-qq{font-size:19px;line-height:24px} .o3-qq i{font-size:13px} .o3-qh{font-size:17px;line-height:22px;margin-top:4px} .o3-f{height:52px;line-height:50px;border-radius:12px;padding:0 14px;font-size:17px;margin-top:12px} .o3-qb{margin-top:26px} .o3-qb.o3-first{margin-top:28px} .o3-note{font-size:15px;line-height:20px} .o3-cb{gap:12px;font-size:17px;line-height:22px;align-items:flex-start} .o3-box{width:24px;height:24px;border-radius:7px;margin-top:-1px} .o3-cbs{display:grid;gap:14px;margin-top:26px} .o3-small{font-size:13px;line-height:18px} .o3-sum .o3-row{font-size:17px;line-height:22px} .o3-trust{font-size:15px;line-height:20px} .o3-q{font-size:20px;line-height:26px} .o3-rd{width:24px;height:24px;top:18px;right:18px} .o3-opt.o3-on .o3-rd{top:17px;right:17px} .o3-opt.o3-w .o3-rd{right:16px} .o3-opt.o3-w.o3-on .o3-rd{top:0;right:15px} .o3-tot b{font-size:34px;line-height:40px} .o3-f.o3-err{line-height:49px;padding-left:13.5px} .o3-f.o3-foc{line-height:48px;padding-left:13px} .o3-er{font-size:15px;line-height:20px;margin-top:8px} .o3-sk{height:18px;border-radius:9px} .o3-caret{height:24px} .o3-ta{font-size:20px;line-height:26px;padding:12px 14px;margin-top:8px} .o3-hint{font-size:15px;line-height:20px;margin-top:8px} .o3-eda{margin-top:16px} .o3-btn.o3-sm{height:44px} .o3-toast{padding:14px 16px;font-size:15px;line-height:20px;margin-top:14px} .o3-co{padding:16px 18px;margin-top:12px} .o3-co .o3-t{font-size:17px;line-height:22px;padding-right:80px} .o3-co .o3-s{font-size:15px;line-height:20px;margin-top:2px} .o3-co .o3-lnk{top:16px;right:18px;font-size:15px;line-height:22px} .o3-okic{margin-bottom:22px} .o3-card{padding:20px} .o3-card .o3-ct{font-size:17px;line-height:22px} .o3-card .o3-cs{font-size:15px;line-height:22px;margin-top:4px} .o3-card .o3-rw{font-size:15px;line-height:22px;margin-top:10px} .o3-steps{gap:20px;margin-top:22px} .o3-st .o3-n{width:36px;height:36px;font-size:15px} .o3-st .o3-t{font-size:17px;line-height:22px;margin-top:6px} .o3-st .o3-s{font-size:15px;line-height:20px;margin-top:2px} .o3-inv{padding:20px;border-radius:20px} .o3-inv .o3-ct{font-size:20px;line-height:26px} .o3-inv .o3-rq{gap:12px;margin-top:18px} .o3-inv .o3-rq div{gap:2px;font-size:15px;line-height:20px} .o3-qr{padding:24px 20px;margin-top:16px} .o3-qr .o3-ct{font-size:17px;line-height:22px;margin-top:16px} .o3-qr .o3-cs{font-size:15px;line-height:20px;margin-top:4px} .o3-pr s{margin-left:0!important} .o3-sum{padding:22px 20px!important;border-radius:24px} .o3-sum .o3-h{font-size:20px!important;line-height:26px!important} .o3-sum .o3-row{font-size:15px!important;line-height:22px!important} .o3-sum .o3-row.o3-mt24{margin-top:16px!important} .o3-sum .o3-row.o3-mt8{margin-top:2px!important} .o3-sum .o3-div.o3-mt24{margin-top:20px!important} .o3-tot.o3-mt24{margin-top:16px!important} .o3-tot span{font-size:17px} .o3-tot b{font-size:30px!important;line-height:36px!important} .o3-sumcb{margin-top:18px!important;gap:10px!important} .o3-sumcb .o3-cb{font-size:13px!important;line-height:18px!important;gap:10px!important;color:var(--ink2)} .o3-sumcb .o3-box{width:18px!important;height:18px!important;border-radius:5px!important;margin-top:0!important} .o3-sum .o3-btn.o3-mt24{margin-top:20px!important;height:52px} .o3-trust.o3-mt24{margin-top:18px!important} .o3-trust{font-size:13px!important;line-height:18px!important;gap:8px!important;color:var(--ink2)} .o3-trust div{color:var(--ink2)!important;gap:8px!important} .o3-trust svg{width:14px;height:14px} .o3-qh{font-size:15px!important;line-height:20px!important;margin-top:4px!important} .o3-safe{font-size:13px!important} .o3-wrap>.o3-eb{font-size:15px!important;line-height:20px!important;margin-bottom:16px!important} .o3-sec .o3-eb{font-size:15px!important;line-height:20px!important;margin-bottom:8px!important} .o3-h2{font-size:24px!important;line-height:30px!important} .o3-qb{margin-top:24px!important} .o3-qb.o3-first{margin-top:24px!important} .o3-qq{font-size:17px!important;line-height:22px!important} .o3-opt .o3-t{font-size:17px!important;line-height:22px!important} .o3-opt .o3-pr{font-size:24px!important;line-height:32px!important;margin-top:6px!important} .o3-opt .o3-s{font-size:13px!important;line-height:18px!important} .o3-opt .o3-ul{font-size:13px!important;line-height:18px!important;gap:6px!important;margin-top:16px!important;padding-top:16px!important} .o3-ex2{font-size:13px!important;line-height:18px!important;margin-top:12px!important} .o3-opt.o3-w .o3-t{font-size:17px!important} .o3-note{font-size:15px!important;line-height:20px!important} .o3-small{font-size:13px!important;line-height:18px!important} .o3-q{font-size:20px!important;line-height:26px!important} .o3-acts{font-size:15px!important} .o3-cbs:not(.o3-sumcb) .o3-cb{font-size:15px!important;line-height:22px!important} .o3-add .o3-t{font-size:17px!important} .o3-add .o3-s{font-size:13px!important;line-height:18px!important} .o3-pg{--ink2:#6E6E73!important} .o3-pg{--ink2:#6E6E73} .o3-opt .o3-li{color:#1D1D1F!important} .o3-sumcb .o3-cb>div:last-child{color:#6E6E73} .o3-h1 .o3-g,.o3-h2 .o3-g{color:#86868B!important} .o3-wrap{padding-top:28px!important} .o3-sec{padding:40px 0!important} .o3-sec:first-child{padding-top:0!important} .o3-qb{margin-top:24px!important} .o3-qb.o3-first{margin-top:24px!important} .o3-cbs:not(.o3-sumcb) .o3-box,.o3-sumcb .o3-box{width:22px!important;height:22px!important;border-radius:6px!important} .o3-sumcb .o3-cb{align-items:flex-start} .o3-sumcb .o3-box{margin-top:-1px!important} .o3-rd{width:22px!important;height:22px!important} .o3-opt .o3-li svg,.o3-trust svg{width:14px!important;height:14px!important} .o3-opt .o3-li{gap:8px!important} .o3-sum .o3-div.o3-mt24{margin-top:20px!important} .o3-sumcb{gap:14px!important} .o3-sum{margin-top:8px} .o3-more{font-size:13px;line-height:18px;color:#6E6E73;margin-top:12px} .o3-more .o3-lnk{font-weight:600} .o3-grid2:first-of-type .o3-opt{padding:16px 18px!important} .o3-grid2:first-of-type .o3-opt.o3-on{padding:15px 17px!important} .o3-opt .o3-ul{display:none!important} .o3-opt .o3-pr{font-size:22px!important;line-height:28px!important;margin-top:2px!important} .o3-opt .o3-s{margin-top:2px!important} .o3-ex2{margin-top:8px!important} .o3-opt .o3-rd{top:16px!important;right:16px!important} .o3-opt.o3-on .o3-rd{top:15px!important;right:15px!important} .o3-opt.o3-w .o3-rd{top:0!important;bottom:0!important} .o3-sec:first-of-type{margin-top:0!important} .o3-sec{padding:48px 0!important} .o3-sec:first-child{padding-top:0!important} .o3-sec{border-top:0!important} .o3-more2{margin-top:14px} .o3-more2 .o3-ex2{margin-top:0!important} .o3-hdr{position:sticky;top:0;z-index:20} .o3-hdr .o3-in{padding:0 20px!important} .o3-sum,.o3-sumcol{position:static!important} .o3-cols{display:block} .o3-grid2.o3-qb{grid-template-columns:1fr;gap:24px} } /* v3:end */ /* Классы эталона задают display (.o3-ok2 — flex, .o3-acts — flex и т.д.), а значит перебивают hidden из браузерного листа: блок, спрятанный атрибутом, продолжал занимать место (в кадрах n08…n13 это давало лишние 58 px высоты). Возвращаем hidden приоритет — одно правило на все элементы страницы, новых чисел не вводим. */ .o3-pg [hidden]{display:none} /* В эталоне кадра 21 галочка в круге — строчный внутри блока .okic, поэтому под ней остаётся место под строку: 4 px на всех трёх ширинах (замер по эталонам screens/order-payment-n21_*). На странице подключён общий styles/components.css (FROZEN) с `img,svg{display:block}`, который это место съедал, — возвращаем его явной высотой, не трогая FROZEN. */ .o3-pg .o3-okic{padding-bottom:4px} /* Кадр 21: две карточки в ряд и раздел «Что дальше» — отступы из инлайновых стилей узла макета. На планшете и телефоне ряд разваливается по общему правилу .grid2 из того же блока v3. */ .o3-pg .op-paid__cards{margin-top:48px} .o3-pg .op-paid__next{margin-top:56px;border-top:1px solid var(--hair)} @media (min-width:1024px){.o3-pg .op-paid__cards{grid-template-columns:1fr 1fr;max-width:1200px}} /* На телефоне кадр 21 ставит ряд карточек ближе к подзаголовку: 28 px вместо 48, а раздел «Что дальше» — 40 px вместо 56. Оба числа из мобильной разметки узла кадра 21 эталона geowise-order-v3.html (ветка M: `margin-top:28px` у .grid2 и `margin-top:40px` у .sec); на 768 и 1440 эталон оставляет десктопные 48 и 56. */ @media (max-width:767px){ .o3-pg .op-paid__cards{margin-top:28px} .o3-pg .op-paid__next{margin-top:40px} } /* ——— 3б) Слой под живую страницу ———————————————————————————————— Эталон — статические кадры: поля там нарисованы блоками
, переключатели —
/
, кнопки —
. На рабочей странице это настоящие input/button, иначе не было бы ни ввода, ни клавиатуры, ни отправки формы. Здесь — только то, что нужно, чтобы настоящие элементы совпали с эталонными по виду и размеру. Значения — из того же блока v3 выше, новых чисел не вводим. */ /* Настоящие переключатели не видны: их роль играют .o3-rd и .o3-box, но сами input остаются в форме — фокус, клавиатура, form.elements. Галочки согласий и «Всё верно» лежат прозрачным слоем ровно поверх нарисованного квадратика: так по ним можно нажать и мышью, и из проверок (tools/order-flow.js), не подменяя клик по подписи. */ .o3-pg .op-tariff__radio{position:absolute;width:1px;height:1px;margin:0; opacity:0;pointer-events:none} .o3-pg label.o3-cb{position:relative} .o3-pg .op-agree__box, .o3-pg .op-qi__confirmBox{position:absolute;left:0;top:0;margin:0; width:20px;height:20px;opacity:0;cursor:pointer} /* Карточка тарифа —