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

@font-face {
  font-family: "Tektur";
  src: url("/static/fonts/tektur-cyr.woff2") format("woff2");
  font-weight: 400 900; font-stretch: 75% 100%; font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

:root {
  --page: #EEF0F2;
  --card: #FFFFFF;
  --ink: #111214;
  --ink-2: #464A51;      /* вторичный текст: 8.9:1 на белом */
  --border: #7D838C;     /* рамка полей: 3.9:1 на белом */
  --line: #D9DDE2;
  --hot: #E81F1F;        /* кнопка оплаты: белый текст 4.6:1 */
  --error: #B4100D;      /* 6.6:1 на белом */
  --ok: #0A6B2E;
  --void: #0A0A0B;
  --signal: #E6E6E6;
  --yellow: #E6D500;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
body.work {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font: 400 17px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--yellow); color: var(--void); }
a { color: var(--ink); text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 6px var(--yellow); }
h1, h2, p { margin: 0; }

/* Шапка: единственное место «эфира» на рабочих страницах. */
.work-mast {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  height: 60px; padding: 0 16px;
  background: var(--void); color: var(--signal);
}
.work-brand { display: flex; align-items: center; gap: 12px; color: var(--signal); text-decoration: none; font: 800 15px/1 "Tektur", var(--sans); font-stretch: 80%; letter-spacing: 0.02em; text-transform: uppercase; white-space: nowrap; }
.work-brand-bars { display: flex; width: 42px; height: 22px; }
.work-brand-bars i { flex: 1; }
.work-brand-bars i:nth-child(1) { background: #E6E6E6; }
.work-brand-bars i:nth-child(2) { background: #E6D500; }
.work-brand-bars i:nth-child(3) { background: #00D7E0; }
.work-brand-bars i:nth-child(4) { background: #00C853; }
.work-brand-bars i:nth-child(5) { background: #D600D6; }
.work-brand-bars i:nth-child(6) { background: #FF2A2A; }
.work-brand-bars i:nth-child(7) { background: #003BFF; }
.work-nav { display: flex; align-items: center; gap: 20px; }
.work-back, .work-lang { color: var(--signal); font-size: 16px; white-space: nowrap; }
/* На узком телефоне ссылка «На главную» не влезает рядом с названием; название и так ведёт на главную. */
@media (max-width: 440px) { .work-back { display: none; } }
.work-mast :focus-visible { outline-color: var(--yellow); box-shadow: none; }

.work-page { max-width: 1180px; margin: 0 auto; padding: 28px 16px 64px; }
.work-page.narrow { max-width: 680px; }
.work-title { font-size: 28px; line-height: 1.2; font-weight: 700; }
.work-lead { margin-top: 8px; color: var(--ink-2); max-width: 62ch; }
@media (min-width: 720px) {
  .work-mast { padding: 0 32px; height: 64px; }
  .work-page { padding: 40px 32px 80px; }
  .work-title { font-size: 34px; }
}

/* Конструктор: форма по шагам и предпросмотр рядом. */
.editor { display: grid; gap: 24px; margin-top: 24px; }
@media (min-width: 960px) {
  .editor { grid-template-columns: minmax(0, 1fr) 380px; gap: 40px; align-items: start; }
  .preview-pane { position: sticky; top: 24px; }
}

.steps-form { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 20px 16px 24px; }
@media (min-width: 720px) { .steps-form { padding: 32px 36px 36px; } }

.progress { margin-bottom: 24px; }
.progress-text { font-size: 16px; color: var(--ink-2); }
.progress-text b { color: var(--ink); }
.progress-bar { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.progress-bar li { height: 6px; border-radius: 3px; background: var(--line); }
.progress-bar li.done, .progress-bar li.now { background: var(--ink); }
.no-js .progress { display: none; }

.step { border: 0; margin: 0; padding: 0; min-width: 0; }
.step + .step { margin-top: 40px; }          /* без JS шаги идут друг под другом */
.js .step { display: none; }
.js .step.is-current { display: block; }
.js .step + .step { margin-top: 0; }
.step legend { padding: 0; font-size: 24px; line-height: 1.25; font-weight: 700; }
.step-num { color: var(--ink-2); font-weight: 600; }
.step-lead { margin: 8px 0 24px; color: var(--ink-2); max-width: 60ch; }

.field { margin-bottom: 22px; }
.field label, .field-label { display: block; font-weight: 600; margin-bottom: 8px; }
.req { font-weight: 400; color: var(--ink-2); font-size: 15px; }
.field input:not([type=color], [type=radio], [type=checkbox]) {
  display: block; width: 100%; min-height: 56px; padding: 12px 14px;
  font: 400 18px/1.3 var(--sans); color: var(--ink);
  background: var(--card); border: 2px solid var(--border); border-radius: 6px;
  transition: border-color 150ms;
}
.field input:hover { border-color: var(--ink-2); }
.field input:focus-visible { border-color: var(--ink); outline: none; box-shadow: 0 0 0 4px var(--yellow); }
.field.has-error input:not([type=color], [type=radio], [type=checkbox]) { border: 3px solid var(--error); padding: 11px 13px; }
.field-hint { margin-top: 6px; font-size: 15px; color: var(--ink-2); }
.field-error { margin-top: 6px; font-size: 15px; font-weight: 600; color: var(--error); }

/* Кнопки шагов */
.step-nav { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.no-js #editor .btn-next, .no-js #editor .btn-back { display: none; }
.btn-next, .btn-back, .btn-pay, .btn-file {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 56px; padding: 14px 28px;
  font: 700 18px/1.2 var(--sans); border-radius: 6px; cursor: pointer;
  transition: background-color 150ms, filter 150ms, transform 120ms;
}
.btn-next { background: var(--ink); color: #fff; border: 2px solid var(--ink); margin-left: auto; min-width: 160px; }
.btn-next:hover { background: #2A2C30; }
.btn-back { background: var(--card); color: var(--ink); border: 2px solid var(--border); }
.btn-back:hover { border-color: var(--ink); }
.btn-next:active, .btn-back:active, .btn-pay:active { transform: translateY(1px); }

/* Оплата — красная кнопка с уголками-скобками, как на главной. */
.btn-pay {
  margin-left: auto; color: #fff; background-color: var(--hot); border: 0; border-radius: 0;
  --c: #fff; --k: 10px; --w: 2px;
  background-image:
    linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c)),
    linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c)),
    linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c)),
    linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c));
  /* уголки отодвинуты внутрь, чтобы на светлом фоне читались как скобки, а не как сколы */
  background-position: top 6px left 6px, top 6px left 6px, top 6px right 6px, top 6px right 6px, bottom 6px left 6px, bottom 6px left 6px, bottom 6px right 6px, bottom 6px right 6px;
  background-size: var(--k) var(--w), var(--w) var(--k), var(--k) var(--w), var(--w) var(--k), var(--k) var(--w), var(--w) var(--k), var(--k) var(--w), var(--w) var(--k);
  background-repeat: no-repeat;
}
.btn-pay:hover { filter: brightness(1.08); }
@media (max-width: 479px) {
  .step-nav { flex-direction: column-reverse; }
  .btn-next, .btn-back, .btn-pay { width: 100%; margin-left: 0; }
}

/* Фото и логотип */
.uploads { display: grid; gap: 16px; margin-bottom: 26px; }
@media (min-width: 600px) { .uploads { grid-template-columns: 1fr 1fr; } }
.upload-box { display: flex; align-items: center; gap: 14px; padding: 14px; border: 2px dashed var(--border); border-radius: 6px; background: #F7F8F9; }
.upload-box img { width: 72px; height: 72px; object-fit: cover; border-radius: 4px; border: 1px solid var(--line); background: #fff; }
.upload-empty { display: grid; place-items: center; width: 72px; height: 72px; flex: none; border-radius: 4px; background: var(--line); color: var(--ink-2); font-size: 13px; text-align: center; }
.upload-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.btn-file { position: relative; min-height: 48px; padding: 10px 18px; font-size: 16px; background: var(--card); color: var(--ink); border: 2px solid var(--ink); }
.btn-file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.btn-file:focus-within { box-shadow: 0 0 0 4px var(--yellow); }
.btn-link { background: none; border: 0; padding: 4px 0; font: 600 16px var(--sans); color: var(--ink); text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; }
.htmx-request.btn-file, .htmx-request .btn-file { opacity: 0.6; }

/* Цвета */
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.swatch {
  display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 8px 12px 8px 8px;
  background: var(--card); color: var(--ink); border: 2px solid var(--line); border-radius: 6px;
  font: 600 16px var(--sans); text-align: left; cursor: pointer;
}
.swatch i { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 4px; border: 1px solid rgba(0, 0, 0, 0.15); font-style: normal; font-weight: 700; }
.swatch:hover { border-color: var(--border); }
.swatch[aria-checked="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.swatch .check { display: none; width: 22px; height: 22px; margin-left: auto; flex: none; }
.swatch[aria-checked="true"] .check { display: block; }
.custom-colors { margin-top: 14px; }
.custom-colors summary { cursor: pointer; font-weight: 600; text-decoration: underline; text-underline-offset: 0.2em; padding: 6px 0; }
.color-inputs { display: flex; flex-wrap: wrap; gap: 16px 24px; margin-top: 12px; }
.color-inputs label { display: flex; align-items: center; gap: 10px; font-weight: 400; margin: 0; }
.color-inputs input { width: 48px; height: 40px; padding: 0; border: 1px solid var(--border); border-radius: 4px; background: none; }

/* Получение */
.consent { display: flex; gap: 14px; align-items: flex-start; margin: 4px 0 6px; }
.consent input { width: 28px; height: 28px; flex: none; margin: 0; accent-color: var(--ink); }
.consent label { font-size: 16px; color: var(--ink-2); }
.consent.has-error input { outline: 2px solid var(--error); outline-offset: 2px; }
.pay { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
.pay-sum { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; font-size: 18px; }
.pay-sum b { font-size: 30px; font-variant-numeric: tabular-nums; }
.pay-note { margin-top: 4px; color: var(--ink-2); font-size: 15px; }

/* Предпросмотр */
.pv { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 18px 16px 20px; }
.pv-title { font-weight: 700; margin-bottom: 12px; }
.pv-tabs { display: inline-flex; padding: 3px; gap: 3px; background: var(--page); border-radius: 8px; margin-bottom: 16px; }
.pv-tab { min-height: 44px; padding: 8px 18px; border: 0; border-radius: 6px; background: transparent; font: 600 16px var(--sans); color: var(--ink-2); cursor: pointer; }
.pv-tab[aria-selected="true"] { background: var(--card); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); }
.pv-note { margin-top: 10px; font-size: 14px; color: var(--ink-2); }
.pv-warn { margin-top: 14px; padding: 10px 12px; font-size: 15px; background: #FFF6CC; border-radius: 6px; }

.apple-pass, .google-pass { width: 100%; max-width: 340px; margin: 0 auto; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18); }
.apple-pass { border-radius: 14px; padding: 16px; }
.ap-head { display: flex; align-items: center; gap: 8px; min-height: 30px; }
.ap-head img { max-height: 30px; max-width: 100px; object-fit: contain; }
.ap-head span { font-size: 17px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-primary { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-top: 18px; }
.ap-name { font-size: 26px; line-height: 1.15; }
.ap-primary img { width: 72px; height: 72px; object-fit: cover; flex-shrink: 0; }
.ap-row { margin-top: 14px; font-size: 16px; min-height: 20px; }
.ap-row.split { display: flex; justify-content: space-between; gap: 12px; margin-top: 6px; }
.ap-row b, .gp-row small { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }
.right { text-align: right; }
.qr { display: flex; justify-content: center; }
.qr svg { width: 140px; height: 140px; background: #fff; padding: 10px; box-sizing: content-box; border-radius: 6px; }
.apple-pass .qr { margin: 28px 0 4px; }
/* Google Wallet — как в приложении на Android (проверено в эмуляторе, октябрь 2026): шапка с круглым
   логотипом и названием, должность над именем, поля, QR; обложка (heroImage) — внизу во всю ширину. */
.google-pass { border-radius: 24px; overflow: hidden; }
.gp-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; font-size: 15px; border-bottom: 1px solid rgba(127, 127, 127, 0.35); }
.gp-avatar { width: 36px; height: 36px; flex: none; border-radius: 50%; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: 13px; background: #fff; color: #444; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.7); }
.gp-avatar img { width: 100%; height: 100%; object-fit: cover; }
.gp-body { padding: 14px 16px 20px; }
.gp-sub { font-size: 14px; opacity: 0.9; }
.gp-name { font-size: 26px; line-height: 1.2; }
.gp-row { display: flex; justify-content: space-between; gap: 12px; margin-top: 14px; font-size: 15px; }
.gp-row small { display: block; opacity: 0.8; font-size: 12px; font-weight: 400; text-transform: none; letter-spacing: 0; }
.google-pass .qr { margin-top: 18px; }
.gp-hero { display: block; width: 100%; height: auto; aspect-ratio: 1032 / 812; object-fit: cover; }

/* Страница заказа */
.status-card { margin-top: 20px; background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 24px 18px; display: grid; gap: 14px; }
@media (min-width: 720px) { .status-card { padding: 32px 36px; } }
.status-card h2 { font-size: 22px; line-height: 1.3; }
.status-card h2 { display: flex; align-items: flex-start; gap: 12px; }
.status-icon { width: 28px; height: 28px; flex: none; margin-top: 1px; }
.status-icon.ok { color: var(--ok); }
.status-icon.wait { color: #7A6400; }
.status-icon.bad { color: var(--error); }
.status-card .apple-pass { margin: 4px 0 6px; }
.status-note { font-size: 15px; color: var(--ink-2); }
/* Официальные значки Apple и Google: внутри ничего не меняем, только высоту и место.
   Обе высотой 56px (Google: не меньше 48 и не меньше соседних кнопок), поле вокруг 8px (Apple: от 0.1 высоты). */
.get-buttons { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: flex-start; }
.badge { margin: 0; display: grid; justify-items: center; gap: 6px; }
.badge a { display: block; padding: 8px; margin: -8px; border-radius: 12px; }
.badge img { display: block; height: 56px; width: auto; }
.badge figcaption { font-size: 15px; color: var(--ink-2); }
.work-foot-link { margin-top: 24px; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* Предпросмотр на телефоне: кнопка «Посмотреть визитку» и возврат к шагу. На последнем шаге
   визитка переезжает внутрь шага, над почтой, — чтобы её было видно до кнопки «Оплатить». */
.pv-jump, .pv-return { display: none; }
@media (max-width: 959px) {
  .js .pv-jump:not([hidden]) { display: inline-flex; margin: -8px 0 20px; }
  .js .pv-return { display: flex; margin-top: 16px; }
  .pv-slot .pv { margin-bottom: 24px; padding: 0; border: 0; }
  .pv-slot .pv-return { display: none; }
}
.pv-jump, .pv-return {
  align-items: center; justify-content: center; min-height: 48px; padding: 10px 18px;
  font: 600 16px var(--sans); color: var(--ink); background: var(--card); border: 2px solid var(--border); border-radius: 6px; cursor: pointer;
}
.pv-return { width: 100%; }

/* Способ оплаты: крупные строки-переключатели с ценой справа. */
.market-list { display: grid; gap: 10px; }
.field .market {
  display: flex; margin: 0; font-weight: 400; align-items: center; gap: 14px; min-height: 60px; padding: 10px 16px;
  border: 2px solid var(--line); border-radius: 6px; background: var(--card); cursor: pointer;
}
.field .market:hover { border-color: var(--border); }
.market:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.field .market input { width: 24px; height: 24px; margin: 0; flex: none; accent-color: var(--ink); }
.market-name { font-weight: 600; }
.market-price { margin-left: auto; font-size: 18px; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Apple Poster (iOS 27): картинка во всю карточку, текст поверх, затемнение уже в самой картинке. */
.ap-poster { display: flex; flex-direction: column; aspect-ratio: 345 / 505; background-size: cover; background-position: center; }
.ap-poster .ap-head { justify-content: space-between; }
.ap-header-field { font-size: 15px; font-weight: 600; text-align: right; margin-left: auto; }
.ap-poster-main { margin-top: auto; }
.ap-poster .ap-name { font-size: 30px; line-height: 1.08; font-weight: 700; }
.ap-position { font-size: 16px; margin-top: 4px; opacity: 0.9; }
.ap-poster .qr { margin: 16px 0 0; }
.ap-poster .qr svg { width: 112px; height: 112px; padding: 8px; }

/* Фон карточки: режимы строками-переключателями, рисунки плитками. */
.choice-list { display: grid; gap: 10px; }
@media (min-width: 600px) { .choice-list { grid-template-columns: repeat(3, 1fr); } }
.field .choice {
  display: flex; align-items: center; gap: 12px; min-height: 56px; margin: 0; padding: 10px 14px; font-weight: 400;
  border: 2px solid var(--line); border-radius: 6px; background: var(--card); cursor: pointer;
}
.field .choice:hover { border-color: var(--border); }
.field .choice:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.field .choice input { width: 24px; height: 24px; margin: 0; flex: none; accent-color: var(--ink); }
.choice-name { font-weight: 600; }
.backdrop-panel { margin-top: 16px; }
.patterns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 8px; }
.field .pattern { position: relative; display: flex; flex-direction: column; gap: 6px; margin: 0; font-weight: 600; font-size: 15px; cursor: pointer; }
.pattern input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pattern img { display: block; width: 100%; height: auto; aspect-ratio: 345 / 505; object-fit: cover; border-radius: 8px; border: 3px solid transparent; outline: 1px solid var(--line); }
.pattern:hover img { outline-color: var(--border); }
.pattern input:checked + img { border-color: var(--ink); outline: none; }
.pattern input:focus-visible + img { box-shadow: 0 0 0 4px var(--yellow); }
.pattern span { text-align: center; }
.backdrop-panel .upload { margin-top: 4px; }
.upload-busy { display: none; font-size: 15px; color: var(--ink-2); }
.upload:has(input.htmx-request) .upload-busy { display: inline; }

/* Документы: обычный текст для чтения, колонка до 72 знаков. */
.legal { max-width: 72ch; }
.legal-date { color: var(--ink-2); font-size: 15px; margin: -6px 0 14px; }
.legal-nav { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 28px; font-size: 16px; }
.legal-nav a { color: var(--ink); text-underline-offset: 0.2em; }
.legal-text { font-size: 17px; line-height: 1.6; }
.legal-text h2 { font-size: 20px; line-height: 1.3; margin: 30px 0 10px; }
.legal-text p, .legal-text ul { margin: 0 0 12px; }
.legal-text ul { padding-left: 1.2em; }
.legal-text li { margin-bottom: 6px; }
.legal-text a { color: var(--ink); text-underline-offset: 0.2em; }
mark.todo { background: #FFF1B8; color: var(--ink); padding: 0 4px; border-radius: 3px; }
.consent + .consent { margin-top: 12px; }

/* Требования к телефону — перед галочками оплаты: покупатель видит их до того, как заплатит. */
.requirements { margin: 4px 0 20px; padding: 14px 16px; border: 1px solid var(--line); background: #F7F8F9; border-radius: 6px; font-size: 16px; }
.requirements-title { font-weight: 600; margin-bottom: 6px; }
.requirements ul { margin: 0 0 8px; padding-left: 1.2em; }
.requirements li { margin-bottom: 2px; }
.requirements p:last-child { color: var(--ink-2); font-size: 15px; }