/* payment.css - оформление заказа и экран временно недоступной оплаты. */

.payment-page {
  background:
    radial-gradient(circle at 82% 5%, rgba(156,174,142,.13), transparent 28rem),
    var(--bg);
}

.payment-main { min-height: 62svh; }
.payment-shell { width: 100%; max-width: var(--container-wide); margin-inline: auto; padding-inline: var(--gutter); }

.checkout-intro { padding: clamp(.9rem, 2.2vw, 1.45rem) 0 clamp(.7rem, 1.4vw, .95rem); border-bottom: 1px solid var(--line); }
.checkout-intro__inner { text-align: left; }
.checkout-kicker { display: inline-flex; align-items: center; gap: .6rem; color: var(--terra-text); font-size: var(--fs-kicker); font-weight: var(--fw-bold); letter-spacing: .055em; text-transform: uppercase; }
.checkout-kicker::before { content: ""; width: 26px; height: 2px; border-radius: 2px; background: var(--cta); }
.checkout-intro h1 { width: min(100%, 830px); margin-top: .35rem; font-family: var(--serif); font-size: clamp(1.7rem, 3.4vw, 2.5rem); font-weight: 600; line-height: 1.08; letter-spacing: -.018em; }
.checkout-progress { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; width: 100%; gap: 0; margin-top: .8rem; list-style: none; }
.checkout-progress li { display: flex; align-items: center; justify-content: center; gap: .65rem; min-width: 0; color: var(--ink-2); font-size: .84rem; font-weight: var(--fw-semibold); text-align: center; }
.checkout-progress li:first-child { justify-content: flex-start; text-align: left; }
.checkout-progress li:last-child { justify-content: flex-end; text-align: right; }
.checkout-progress__num { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 30px; width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); }
.checkout-progress li.is-complete .checkout-progress__num { border-color: var(--sage); background: var(--sage-bg); color: var(--ok); }
.checkout-progress li.is-active { color: var(--ink); }
.checkout-progress li.is-active .checkout-progress__num { border-color: var(--cta); background: var(--cta); color: var(--cta-ink); }

.payment-unavailable-page .checkout-intro { padding-block: .9rem; }
.payment-unavailable-page .checkout-intro__inner { display: flex; align-items: center; min-height: 44px; }
.payment-unavailable-page .checkout-progress { margin-top: 0; }

.checkout-section { padding: clamp(.75rem, 1.5vw, 1rem) 0 clamp(3rem, 7vw, 6rem); }
.checkout-layout { display: grid; gap: 1.25rem; align-items: start; }
.checkout-card { background: rgba(244,236,224,.88); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow-card); }
.checkout-form-card { padding: clamp(1.25rem, 3.5vw, 2rem); }
.checkout-form { display: grid; gap: 0; }
.checkout-block { padding: 0 0 1.65rem; }
.checkout-block + .checkout-block { padding-top: 1.65rem; border-top: 1px solid var(--line); }
.checkout-block:last-of-type { padding-bottom: 0; }
.checkout-block__head { margin-bottom: 1rem; }
.checkout-block__head h2 { font-family: var(--serif); font-size: clamp(1.45rem, 3vw, 1.9rem); font-weight: 600; }
.checkout-block__head p { margin-top: .4rem; color: var(--ink-2); font-size: var(--fs-small); line-height: 1.55; }
.checkout-email-warning { max-width: 760px; color: var(--err) !important; font-weight: var(--fw-bold); }

.checkout-contact-grid { display: grid; gap: 1rem; }
.checkout-contact-grid .checkout-field + .checkout-field { margin-top: 0; }
.checkout-field { display: grid; align-content: start; gap: .48rem; }
.checkout-field + .checkout-field { margin-top: 1rem; }
.checkout-label { font-size: var(--fs-small); font-weight: var(--fw-semibold); }
.checkout-input,
.checkout-select {
  width: 100%; min-height: var(--cta-h); padding: 0 1rem;
  border: 1.5px solid var(--field-border); border-radius: var(--radius);
  background: var(--karta); color: var(--ink); font-size: 1rem;
}
.checkout-select { appearance: auto; }
.checkout-input::placeholder { color: #8d8375; }
.checkout-input:focus-visible,
.checkout-select:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--focus-offset); border-color: var(--focus-ring); }
.checkout-input[aria-invalid="true"],
.checkout-select[aria-invalid="true"] { border-color: var(--err); }
.checkout-error { min-height: 1.25em; color: var(--err); font-size: .82rem; }
.checkout-error:empty { display: none; }

.payment-methods { display: grid; gap: .75rem; }
.payment-method { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: .55rem .9rem; min-height: 96px; padding: .95rem 1rem; border: 1.5px solid var(--line); border-radius: var(--radius); background: var(--karta); cursor: pointer; transition: border-color calc(150ms * var(--motion)) ease, transform calc(150ms * var(--motion)) ease, box-shadow calc(150ms * var(--motion)) ease; }
.payment-method:hover { border-color: var(--field-border); transform: translateY(-1px); }
.payment-method:has(input:checked) { border-color: var(--teal); box-shadow: 0 0 0 2px rgba(62,110,114,.11); }
.payment-method input { width: 26px; height: 26px; margin-top: 0; accent-color: var(--teal); }
.payment-method__copy { min-width: 0; }
.payment-method__copy strong { display: block; font-size: 1rem; }
.payment-method__copy span { display: block; margin-top: .16rem; color: var(--ink-2); font-size: .82rem; line-height: 1.4; }
.payment-method__logos { display: flex; grid-column: 2; align-items: center; justify-content: flex-start; gap: .45rem; min-width: 58px; margin-top: .1rem; }
.payment-method__logos img { display: block; width: auto; max-height: 26px; object-fit: contain; }
.payment-method__logos--cards { display: grid; grid-template-columns: 46px 42px 34px; gap: .5rem; min-width: 138px; }
.payment-method__logos--cards img { justify-self: center; width: auto; max-width: 100%; max-height: 24px; object-fit: contain; }
.payment-method__logos--cards img:nth-child(1) { width: 46px; }
.payment-method__logos--cards img:nth-child(2) { width: 42px; }
.payment-method__logos--cards img:nth-child(3) { width: 32px; height: 24px; }
.payment-method-error { margin-top: .5rem; }

.checkout-legal-consents { display: grid; gap: .72rem; }
.checkout-legal-consent { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .8rem; align-items: start; padding: .9rem 1rem; border: 1.5px solid var(--line); border-radius: var(--radius); background: var(--karta); cursor: default; transition: border-color calc(150ms * var(--motion)) ease, box-shadow calc(150ms * var(--motion)) ease, background calc(150ms * var(--motion)) ease; }
.checkout-legal-consent:focus-within { outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--focus-offset); }
.checkout-legal-consent:has(input:checked) { border-color: var(--teal); background: rgba(232,239,226,.56); box-shadow: 0 0 0 2px rgba(62,110,114,.08); }
.checkout-legal-consent:has(input[aria-invalid="true"]) { border-color: var(--err); }
.checkout-legal-consent input { flex: 0 0 auto; width: 26px; height: 26px; margin-top: 0; accent-color: var(--teal); cursor: pointer; }
.checkout-legal-consent__copy { min-width: 0; }
.checkout-legal-consent__copy strong { display: block; font-size: .92rem; line-height: 1.4; }
.checkout-legal-consent__copy > span { display: block; margin-top: .22rem; color: var(--ink-2); font-size: .83rem; line-height: 1.5; }
.checkout-legal-consent--optional { background: rgba(255,253,248,.6); }
.checkout-optional-badge { display: inline-flex; align-items: center; min-height: 20px; margin-left: .35rem; padding: 0 .48rem; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-2); font-family: var(--sans); font-size: .65rem; font-weight: var(--fw-semibold); vertical-align: .1em; }
.checkout-legal-error { margin-top: .5rem; }
.checkout-legal-note { position: relative; margin-top: .85rem; padding-left: 1.45rem; color: var(--ink-2); font-size: .8rem; line-height: 1.5; }
.checkout-legal-note::before { content: ""; position: absolute; left: 0; top: .12rem; width: 16px; height: 16px; background: var(--ok); -webkit-mask: url("/assets/icons/shield.fb44654a.svg") center/contain no-repeat; mask: url("/assets/icons/shield.fb44654a.svg") center/contain no-repeat; }

.checkout-submit-wrap { margin-top: 1.65rem; padding-top: 1.65rem; border-top: 1px solid var(--line); }
.checkout-submit { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; width: 100%; }
.checkout-security { display: flex; align-items: flex-start; justify-content: center; gap: .55rem; margin-top: .85rem; color: var(--ink-2); font-size: .8rem; line-height: 1.45; text-align: center; }
.checkout-security::before { content: ""; flex: 0 0 16px; width: 16px; height: 16px; margin-top: .1rem; background: var(--ok); -webkit-mask: url("/assets/icons/lock.e49a4ff9.svg") center/contain no-repeat; mask: url("/assets/icons/lock.e49a4ff9.svg") center/contain no-repeat; }

.order-card { padding: 1.35rem; }
.order-card__eyebrow { color: var(--terra-text); font-size: var(--fs-kicker); font-weight: var(--fw-bold); letter-spacing: .045em; text-transform: uppercase; }
.order-card__top { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: .95rem; align-items: center; margin-top: .8rem; }
.order-card__icon { width: 56px; height: 56px; border-radius: 50%; background: var(--sage-bg); display: grid; place-items: center; overflow: hidden; }
.order-card__icon img { width: 100%; height: 100%; object-fit: contain; }
.order-card__product { color: var(--ink-2); font-size: .82rem; line-height: 1.35; }
.order-card__name { display: block; margin-top: .15rem; font-family: var(--serif); font-size: 1.45rem; font-weight: 600; }
.order-card__price-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-top: 1.25rem; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.order-card__price-row span { color: var(--ink-2); font-size: .88rem; }
.order-card__price-row strong { font-size: 1.42rem; }
.order-card__features { display: grid; gap: .68rem; margin: 1.15rem 0 0; padding: 1.1rem 0 0; border-top: 1px solid var(--line); list-style: none; }
.order-card__features li { position: relative; padding-left: 1.5rem; color: var(--ink-2); font-size: .86rem; line-height: 1.45; }
.order-card__features li::before { content: ""; position: absolute; left: 0; top: .23rem; width: 15px; height: 15px; border-radius: 50%; background: var(--sage-bg); }
.order-card__features li::after { content: ""; position: absolute; left: 3px; top: .39rem; width: 9px; height: 7px; background: var(--ok); -webkit-mask: url("/assets/icons/check.80484cea.svg") center/contain no-repeat; mask: url("/assets/icons/check.80484cea.svg") center/contain no-repeat; }
.order-card__change { display: flex; width: max-content; max-width: 100%; margin-top: 1.5rem; font-size: .86rem; font-weight: var(--fw-semibold); }
.order-trust { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; width: 100%; gap: .32rem; margin-top: .8rem; }
.order-trust span { display: inline-flex; align-items: center; justify-content: center; gap: .3rem; min-width: 0; min-height: 32px; padding: .3rem .28rem; border: 1px solid color-mix(in srgb, var(--line) 75%, transparent); border-radius: var(--radius-pill); background: color-mix(in srgb, var(--bg) 78%, transparent); color: var(--ink-2); font-size: .68rem; font-weight: 600; line-height: 1.2; text-align: center; white-space: nowrap; }
.order-trust span::before { content: ""; flex: 0 0 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--sage); }/* Экран заглушки после попытки оплаты. */

.unavailable-section { padding: clamp(.75rem, 1.5vw, 1rem) 0 clamp(3rem, 7vw, 6rem); }
.unavailable-layout { display: grid; gap: 1.25rem; align-items: start; }
.unavailable-card { padding: clamp(1.25rem, 3.5vw, 2rem); text-align: center; }
.unavailable-card__icon { display: grid; place-items: center; width: 66px; height: 66px; margin: 0 auto .8rem; border-radius: 50%; background: var(--sage-bg); }
.unavailable-card__icon::before { content: ""; width: 29px; height: 29px; background: var(--teal); -webkit-mask: url("/assets/icons/payment.24c80e5e.svg") center/contain no-repeat; mask: url("/assets/icons/payment.24c80e5e.svg") center/contain no-repeat; }
.unavailable-card__kicker { margin-bottom: .45rem; }
.unavailable-card h1 { font-family: var(--serif); font-size: clamp(2rem, 5vw, 3rem); font-weight: 600; }
.unavailable-card__lead { max-width: 620px; margin: .85rem auto 0; color: var(--ink-2); line-height: 1.65; }
.unavailable-order { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: .4rem .65rem; margin-top: 1.2rem; padding: .62rem .85rem; border: 1px solid var(--line); border-radius: var(--radius-pill); background: rgba(255,253,248,.65); color: var(--ink-2); font-size: .82rem; }
.unavailable-order strong { color: var(--ink); }
.launch-loading { margin-top: 1.5rem; color: var(--ink-2); font-size: .88rem; }
.launch-form { max-width: 620px; margin: 1.65rem auto 0; text-align: left; }
.launch-state { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: .85rem; align-items: start; }
.launch-state__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--sage-bg); }
.launch-state__icon::before { content: ""; width: 21px; height: 21px; background: var(--teal); }
.launch-state__icon--mail::before { -webkit-mask: url("/assets/icons/mail.5c400667.svg") center/contain no-repeat; mask: url("/assets/icons/mail.5c400667.svg") center/contain no-repeat; }
.launch-state h2 { font-family: var(--serif); font-size: clamp(1.35rem, 3vw, 1.7rem); font-weight: 600; line-height: 1.2; }
.launch-state p { margin-top: .4rem; color: var(--ink-2); font-size: .9rem; line-height: 1.55; }
.launch-state p strong { color: var(--ink); overflow-wrap: anywhere; }
.launch-marketing-consent { margin-top: 1.15rem; }
.launch-confirm-note { position: relative; margin-top: .85rem; padding-left: 1.45rem; color: var(--ink-2); font-size: .82rem; line-height: 1.5; }
.launch-confirm-note::before { content: ""; position: absolute; left: 0; top: .13rem; width: 16px; height: 16px; background: var(--ok); -webkit-mask: url("/assets/icons/check-circle.8c7dcf54.svg") center/contain no-repeat; mask: url("/assets/icons/check-circle.8c7dcf54.svg") center/contain no-repeat; }
.launch-form .checkout-submit { margin-top: .85rem; }
.launch-form__back { display: flex; justify-content: center; width: max-content; max-width: 100%; margin: .9rem auto 0; font-size: .84rem; }
.payment-page .payment-text-link {
  color: var(--teal);
  border-radius: 6px;
  padding: 1px 4px;
  margin: -1px -4px;
  text-decoration: none;
  transition: color calc(140ms * var(--motion)) ease,
              background-color calc(140ms * var(--motion)) ease,
              transform calc(120ms * var(--motion)) ease;
}
.payment-page .payment-text-link:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--focus-offset); }
.payment-page .order-card__change { margin: 1.5rem 0 0; }
.payment-page .launch-form__back { margin: .85rem auto 0; }
.payment-page .launch-form .form-status:empty { display: none; }
@media (hover:hover) and (pointer:fine) {
  .payment-page .payment-text-link:hover {
    color: var(--ink);
    background: var(--sage-bg);
    text-decoration: none;
    transform: translateY(-1px);
  }
}
.form-status { min-height: 1.35em; margin-top: .75rem; color: var(--err); font-size: .84rem; text-align: center; }
.captcha-box:empty { display: none; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.checkout-submit[aria-busy="true"] { position: relative; color: transparent; pointer-events: none; }
.checkout-submit[aria-busy="true"]::after { content: ""; position: absolute; width: 20px; height: 20px; border: 2px solid var(--cta-ink); border-top-color: transparent; border-radius: 50%; animation: payment-spin calc(700ms * var(--motion)) linear infinite; }
@keyframes payment-spin { to { transform: rotate(360deg); } }/* Отдельная страница после успешной постановки письма в отправку. */

.launch-sent-section { padding: clamp(1.25rem, 4vw, 3rem) 0 clamp(3rem, 7vw, 6rem); }
.launch-sent-card { max-width: 720px; margin-inline: auto; padding: clamp(1.5rem, 5vw, 3rem); text-align: center; }
.launch-sent-card__icon { display: grid; place-items: center; width: 72px; height: 72px; margin: 0 auto 1.15rem; border-radius: 50%; background: var(--sage-bg); }
.launch-sent-card__icon::before { content: ""; width: 34px; height: 34px; background: var(--ok); -webkit-mask: url("/assets/icons/check.80484cea.svg") center/contain no-repeat; mask: url("/assets/icons/check.80484cea.svg") center/contain no-repeat; }
.launch-sent-card h1 { font-family: var(--serif); font-size: clamp(2rem, 5vw, 3rem); font-weight: 600; line-height: 1.08; }
.launch-sent-card__lead { max-width: 570px; margin: .85rem auto 0; color: var(--ink-2); line-height: 1.65; }
.launch-sent-card__email { display: inline-flex; max-width: 100%; margin-top: 1rem; padding: .55rem .8rem; border: 1px solid var(--line); border-radius: var(--radius-pill); background: rgba(255,253,248,.7); color: var(--ink); font-weight: var(--fw-semibold); overflow-wrap: anywhere; }
.launch-sent-card__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem 1.1rem; margin-top: 1.5rem; }
.launch-sent-card__actions .cta { width: min(100%, 240px); }
@media (min-width: 760px) {
  .checkout-contact-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .payment-methods { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .unavailable-card { text-align: left; }
  .unavailable-card__icon { margin-inline: 0; }
  .unavailable-card__lead { margin-inline: 0; }
  .unavailable-order { justify-content: flex-start; }
  .launch-form { margin-inline: 0; }
}

@media (min-width: 960px) {
  .checkout-layout,
  .unavailable-layout { grid-template-columns: minmax(0, 1fr) 360px; gap: 1.5rem; }
  .order-column,
  .unavailable-layout > .order-card { position: sticky; top: calc(var(--header-h) + 1.25rem); }
}

@media (max-width: 620px) {
  .checkout-progress { width: 100%; gap: 0; }
  .checkout-progress li { display: grid; justify-items: center; gap: .35rem; text-align: center; font-size: .7rem; line-height: 1.25; }
  .checkout-progress li:first-child { justify-items: start; text-align: left; }
  .checkout-progress li:last-child { justify-items: end; text-align: right; }/* Три жестких колонки на узком экране ужимали подпись до 10.2px, а на 360px и ниже -
     до 9.3px, при том что «Без автосписаний» в nowrap оставалось 0.4px до обрезки.
     Колонки делаем самоподбирающимися: пока помещается по 150px - три в ряд, дальше две,
     на 320px одна. Кегль возвращается к 13px - тот же пол, что у остальных подписей
     чекаута ниже по файлу. Перенос разрешен: обрезать больше нечего. */

  .order-trust { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .35rem; }
  .order-trust span { gap: .3rem; min-height: 32px; padding-inline: .55rem; font-size: .8125rem; white-space: normal; }
  .payment-method input { margin-top: .12rem; }
  .payment-method__logos { margin-top: .25rem; }
  .payment-method__logos--cards { grid-template-columns: 46px 42px 34px; min-width: 0; }
}

@media (max-width: 360px) {
  .order-column { min-width: 0; }
  /* Дальнейшее ужатие подписи отменено: на этой ширине плашки уже стоят в одну колонку,
     ужимать кегль незачем - он уходил на 9.3px. */
}/* Accessibility pass: checkout instructions and progress labels do not drop below 13px. */

.checkout-legal-note,
.checkout-security { font-size: .8125rem; }
@media (max-width: 620px) {
  .checkout-progress li { font-size: .8125rem; }
}/* ═══════════════════════════════════════════════════════════
   Ревизия 3.3 (продолжение). Обрывы текста на 320px закрыты блоком
   max-width:620px выше. Осталась вторая половина проблемы: от 621px
   и на всем десктопе плашки доверия остались с кеглем .68rem = 10.88px -
   ниже собственного пола проекта (--fs-kicker 13px) и мелко для 45+.

   621-959px. Карточка заказа идет во всю ширину, самая длинная плашка
   «Без автосписаний» получает бокс 190-283px [замер], 13px входит с запасом
   больше 70px. Ставим 13px - тот же пол, что у подписей чекаута выше по файлу.

   >=960px. С 960px карточка заказа встает липкой колонкой 360px
   (.checkout-layout выше по файлу), и три равные колонки дают плашке 117px
   (115px внутри рамки). При равных колонках перебор кегля по превышению
   scrollWidth над clientWidth: 11.5px - 0px, 12px - 1px, 13px - 6px, то есть
   даже 12px уже режет текст, а 11.5px влезает только с паддингом 1.6px -
   текст встает вплотную к рамке [замер, скриншот 3x].
   Поэтому на десктопе колонки делаем по содержимому (max-content) и
   раскладываем по ширине: тогда узкие плашки отдают место длинной.
   Сумма натуральных ширин трех плашек с зазорами против бюджета 360px [замер]:
     кегль 11.5px, паддинг .5rem  - 355.6px  входит;
     кегль 12px,   паддинг .5rem  - 358.6px  входит;
     кегль 13px,   паддинг .28rem - 367.4px  НЕ входит;
     кегль 13px,   паддинг .5rem  - 388.6px  НЕ входит.
   Берем 11.5px с паддингом .5rem: 4.4px запаса и нормальные поля вместо 1.6px.
   Высота блока остается 32px, то есть согласованный десктоп не съезжает.
   13px на десктопе физически недостижим: нужно либо две строки (блок 32 -> 69px),
   либо убрать точки-маркеры - и то и другое меняет согласованный десктоп. */

@media (min-width: 621px) {
  .order-trust span { font-size: .8125rem; white-space: normal; }
}
@media (min-width: 960px) {
  .order-trust { grid-template-columns: max-content max-content max-content; justify-content: space-between; }
  .order-trust span { padding-inline: .5rem; font-size: .71875rem; white-space: nowrap; }
}

/* ════ ПЛАШКА ПРИ ОТКЛЮЧЕННЫХ СКРИПТАХ ════
   Разметка страницы оплаты статическая и без скриптов читается целиком, но кнопка
   оплаты приходит в разметке неактивной и включается скриптом после проверки полей.
   Без пояснения человек видит заполняемую форму и мертвую кнопку и не понимает, почему
   ничего не происходит. Плашка стоит внутри формы, первым блоком. */
.noscript-note {
  margin: 0 0 var(--space-5);
  padding: 14px 16px;
  border: 1px solid var(--cta);
  border-radius: 10px;
  background: color-mix(in srgb, var(--cta) 8%, transparent);
  color: var(--ink);
  font-size: var(--fs-small);
  line-height: 1.55;
}
.noscript-note a { color: var(--terra-text); }