/*
 * Tokens are lifted verbatim from the landing page's DESIGN.md so the cabinet
 * is visibly the same product. Only the subset this page uses is here.
 *
 * Inter is not shipped for this page — it is a logged-in utility screen, not a
 * marketing surface, and a font download on the critical path of a login form
 * is a poor trade. SF Pro resolves natively on Apple devices; elsewhere the
 * system UI font is close enough in feel.
 */
:root {
  /* Same three values the marketing site takes from the logo artwork, so the
     handover from getcard.kg to this form is not a change of product — which
     matters most on the screen where someone uploads a passport.

     Red carries the actions: white on #780303 is 11.58:1 where the Apple blue
     it replaces was 4.70:1. Blue keeps the links.

     The brand gold is deliberately NOT a text colour here. On the site it sits
     on a near-black hero and measures 8.8:1; on this white form it is 2.22:1
     and fails every threshold, so it appears only as a hairline or a fill with
     dark text on it. */
  --color-action: #780303;
  --color-link: #0f5c94;
  --color-signal: #2b7fbd;
  --color-brand-gold: #daa54b;
  --color-ink: #1d1d1f;
  --color-canvas: #f5f5f7;
  --color-graphite: #474747;
  --color-ash: #707070;
  --color-hairline: #d2d2d7;
  --color-white: #ffffff;
  --color-error: #d70015;
  --color-error-bg: #fff2f2;
  --color-success: #1e7a35;
  --color-success-bg: #f1faf3;
  --radius-card: 8px;
  --radius-full: 980px;
  --font-text: 'SF Pro Text', ui-sans-serif, system-ui, -apple-system, sans-serif;
}

* {
  box-sizing: border-box;
}

/* The UA rule for [hidden] is display:none at the lowest possible specificity,
   so any class that sets display — .pill-outlined, .panel — silently beats it
   and the element stays visible. Since the whole step machine and the logout
   button rely on [hidden], it has to win. */
[hidden] {
  display: none !important;
}

body {
  margin: 0;
  background: var(--color-canvas);
  color: var(--color-ink);
  font-family: var(--font-text);
  font-size: 17px;
  line-height: 1.47;
  letter-spacing: -0.19px;
  -webkit-font-smoothing: antialiased;
}

:focus-visible {
  outline: 2px solid var(--color-action);
  outline-offset: 3px;
  border-radius: 2px;
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 24px;
  background: var(--color-white);
  border-bottom: 1px solid var(--color-hairline);
}

.wordmark {
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.4px;
  color: var(--color-ink);
  text-decoration: none;
}

.shell {
  max-width: 460px;
  margin: 48px auto;
  padding: 0 24px;
}

.panel {
  background: var(--color-white);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-card);
  padding: 32px 24px;
}

h1 {
  margin: 0 0 12px;
  font-size: 28px;
  line-height: 1.18;
  letter-spacing: -0.28px;
  font-weight: 600;
}

.lede {
  margin: 0 0 24px;
  color: var(--color-graphite);
}

label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  color: var(--color-ash);
}

input {
  width: 100%;
  padding: 12px 16px;
  font: inherit;
  color: var(--color-ink);
  background: var(--color-white);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-card);
}

input:focus-visible {
  border-color: var(--color-action);
}

input[aria-invalid='true'] {
  border-color: var(--color-error);
}

#code {
  font-size: 24px;
  letter-spacing: 8px;
  text-align: center;
}

.pill-filled,
.pill-outlined {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 15px;
  border-radius: var(--radius-full);
  font: inherit;
  cursor: pointer;
  transition: background-color 150ms ease-out;
}

.pill-filled {
  width: 100%;
  margin-top: 20px;
  border: none;
  background: var(--color-action);
  color: var(--color-white);
}

.pill-filled:hover:not(:disabled) {
  background: color-mix(in srgb, var(--color-action) 92%, #000);
}

.pill-filled:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.pill-outlined {
  border: 1px solid var(--color-link);
  background: transparent;
  color: var(--color-link);
  font-size: 14px;
  padding: 7px 14px;
}

.link {
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 14px;
  color: var(--color-link);
  cursor: pointer;
  text-decoration: none;
}

.link:hover:not(:disabled) {
  text-decoration: underline;
}

.link:disabled {
  color: var(--color-ash);
  cursor: default;
}

#resend {
  display: block;
  margin: 16px auto 0;
}

/* Errors say what happened and what to do, never just "error". */
.field-error {
  margin: 8px 0 0;
  padding: 10px 12px;
  font-size: 14px;
  color: var(--color-error);
  background: var(--color-error-bg);
  border: 1px solid var(--color-error);
  border-radius: var(--radius-card);
}

.order {
  padding: 16px 0;
  border-top: 1px solid var(--color-hairline);
}

.order:first-child {
  border-top: none;
}

.order-status {
  font-size: 21px;
  font-weight: 600;
}

.order-status[data-live='true'] {
  color: var(--color-success);
}

.order-meta {
  margin: 4px 0 0;
  font-size: 14px;
  color: var(--color-ash);
}

.empty {
  padding: 16px;
  background: var(--color-canvas);
  border-radius: var(--radius-card);
  color: var(--color-graphite);
}

.foot {
  max-width: 460px;
  margin: 0 auto 48px;
  padding: 0 24px;
  font-size: 14px;
}

.foot a {
  color: var(--color-ash);
  text-decoration: none;
}

.foot a:hover {
  color: var(--color-link);
}

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

/* ---------------------------------------------------------------------------
   Order flow. Same tokens as the marketing site so the handover from
   getcard.kg to the form does not feel like a different product — which
   matters on the screen right before someone uploads a passport.
   --------------------------------------------------------------------------- */

.nav-plan {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-graphite);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-full);
  padding: 4px 12px;
}

.shell {
  max-width: 620px;
}

/* Step indicator */
.steps {
  display: flex;
  gap: 8px;
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  font-size: 14px;
  color: var(--color-ash);
}

.steps li {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
}

.steps span {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
  background: var(--color-hairline);
  color: var(--color-white);
  font-size: 12px;
  font-weight: 600;
}

.steps i {
  font-style: normal;
}

.steps .is-current span { background: var(--color-action); }
.steps .is-current i { color: var(--color-ink); font-weight: 600; }
.steps .is-done span { background: var(--color-success); }

/* Fields */
.field { margin-bottom: 20px; }

.field-row {
  display: grid;
  gap: 0 16px;
  grid-template-columns: 1fr 1fr;
}

@media (max-width: 520px) {
  .field-row { grid-template-columns: 1fr; }
}

textarea {
  width: 100%;
  padding: 12px 16px;
  font: inherit;
  color: var(--color-ink);
  background: var(--color-white);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-card);
  resize: vertical;
}

textarea:focus-visible { border-color: var(--color-action); }

.hint {
  margin: 6px 0 0;
  font-size: 14px;
  color: var(--color-ash);
}

.hint.center { text-align: center; }

.form-error {
  margin: 16px 0 0;
  padding: 12px 14px;
  font-size: 14px;
  color: var(--color-error);
  background: var(--color-error-bg);
  border: 1px solid var(--color-error);
  border-radius: var(--radius-card);
}

/* Uploads */
.uploads {
  display: grid;
  gap: 12px;
  margin-bottom: 8px;
}

.upload {
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-card);
  padding: 16px;
}

.upload.is-filled { border-color: var(--color-success); }
.upload.is-rejected { border-color: var(--color-error); background: var(--color-error-bg); }

.upload-head { display: grid; gap: 2px; margin-bottom: 12px; }
.upload-hint { font-size: 14px; color: var(--color-ash); }

.upload-body {
  display: flex;
  align-items: center;
  gap: 12px;
}

.upload-preview {
  width: 68px;
  height: 68px;
  object-fit: cover;
  border-radius: var(--radius-card);
  border: 1px solid var(--color-hairline);
}

.upload-button {
  display: inline-flex;
  align-items: center;
  padding: 9px 16px;
  border: 1px solid var(--color-link);
  border-radius: var(--radius-full);
  color: var(--color-link);
  font-size: 14px;
  cursor: pointer;
}

.upload-button:hover { background: var(--color-link); color: var(--color-white); }

/* Keyboard focus lands on the hidden input, so the ring has to be drawn on
   the label that stands in for it. */
.upload-button:focus-within {
  outline: 2px solid var(--color-action);
  outline-offset: 3px;
}

.upload-error {
  margin: 10px 0 0;
  font-size: 14px;
  color: var(--color-error);
}

/* Tracking code — meant to be read aloud and typed, so it is set large and
   monospaced with generous letter spacing. */
.tracking {
  margin: 8px 0 16px;
  padding: 16px;
  text-align: center;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: 2px;
  background: var(--color-canvas);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-card);
  user-select: all;
}

.link-block {
  display: block;
  margin-top: 20px;
  font-size: 14px;
  color: var(--color-link);
  text-decoration: none;
}

.result-status {
  margin: 0 0 4px;
  font-size: 21px;
  font-weight: 600;
}

.result-status[data-status='delivered'],
.result-status[data-status='issued'] { color: var(--color-success); }
.result-status[data-status='rejected'] { color: var(--color-error); }

.timeline {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
}

.timeline li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--color-hairline);
  font-size: 14px;
}

.timeline time { color: var(--color-ash); white-space: nowrap; }
.timeline-status { color: var(--color-ink); }

/* Waiting for the associate's decision. */
.spinner {
  width: 28px;
  height: 28px;
  margin: 0 auto 20px;
  border: 3px solid var(--color-hairline);
  border-top-color: var(--color-action);
  border-radius: var(--radius-full);
  animation: spin 900ms linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
  /* A spinner is the one thing that must still read as "working", so it slows
     rather than stopping entirely. */
  .spinner { animation-duration: 3s; }
}

#step-checking { text-align: center; }
#step-checking .lede { text-align: left; }

/* ---------------------------------------------------------------------------
   The bank's анкета. Thirty-five fields is where a form loses people, so the
   work here is all about making it look shorter than it is: grouped under
   headings, two columns wherever a value is short, and nothing repeated that
   was already asked.
   --------------------------------------------------------------------------- */

/* Framing example on the photo step. Synthetic, not a real document. */
.example {
  margin: 0 0 24px;
  padding: 0;
}

.example img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-card);
}

.example figcaption {
  margin-top: 8px;
  font-size: 14px;
  color: var(--color-ash);
}

.group {
  margin: 0 0 28px;
  padding: 0;
  border: none;
}

.group legend {
  /* A legend is not a block by default and ignores width, which leaves the
     heading sitting inside the group's border rather than above its fields. */
  display: block;
  width: 100%;
  padding: 0;
  margin-bottom: 14px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--color-graphite);
}

.group-note {
  margin: -6px 0 16px;
  font-size: 14px;
  color: var(--color-graphite);
}

.group-grid {
  display: grid;
  gap: 0 16px;
  grid-template-columns: 1fr 1fr;
}

/* Full-width by default; short values pair up. Below 520px everything is one
   column, because a two-column form on a phone is how house numbers end up in
   the postcode. */
.group-grid > .field { grid-column: 1 / -1; }
.group-grid > .field.is-half { grid-column: span 1; }

@media (max-width: 520px) {
  .group-grid { grid-template-columns: 1fr; }
  .group-grid > .field.is-half { grid-column: 1 / -1; }
}

.group-grid label { display: block; }

.optional {
  opacity: 0.65;
}

select {
  width: 100%;
  padding: 12px 16px;
  font: inherit;
  color: var(--color-ink);
  background: var(--color-white);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-card);
}

select:focus-visible { border-color: var(--color-action); }
select[aria-invalid='true'] { border-color: var(--color-error); }

/* A value we read off a scan rather than one the client typed. Marked so it is
   obvious what still needs checking — and dropped as soon as they edit it. */
.is-prefilled {
  background: color-mix(in srgb, var(--color-signal) 7%, var(--color-white));
  border-color: color-mix(in srgb, var(--color-signal) 45%, var(--color-hairline));
}

.hint-link {
  display: inline-block;
  margin-top: 6px;
  font-size: 14px;
  color: var(--color-link);
}

.notice {
  margin: 0 0 24px;
  padding: 12px 14px;
  font-size: 14px;
  color: var(--color-success);
  background: var(--color-success-bg);
  border: 1px solid var(--color-success);
  border-radius: var(--radius-card);
}

.notice.is-warn {
  color: var(--color-graphite);
  background: var(--color-canvas);
  border-color: var(--color-hairline);
}

/* The delivery address. Set apart on purpose: this is the one group where a
   wrong answer means a bank card posted to the wrong door. */
.group[data-group='actAddress'] {
  padding: 20px;
  background: var(--color-canvas);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-card);
}

.group[data-group='actAddress'] legend {
  color: var(--color-ink);
}

.group[data-group='actAddress'] input {
  background: var(--color-white);
}

.confirm {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 4px;
  padding: 12px 14px;
  font-size: 14px;
  color: var(--color-ink);
  background: var(--color-white);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-card);
  cursor: pointer;
}

.confirm input {
  width: 18px;
  height: 18px;
  flex: none;
  margin: 1px 0 0;
  padding: 0;
  accent-color: var(--color-action);
}

.confirm:has(:checked) {
  border-color: var(--color-success);
  background: var(--color-success-bg);
}

/* ---------------------------------------------------------------------------
   Delivery outside Russia — a paid option on the анкета.

   Built to be hard to miss, because it costs money: its own panel rather than
   another line in a list, the price on the same line as the name, and a
   confirmation that appears the moment it is ticked. The gold edge is the same
   one the site uses for anything about money.
   --------------------------------------------------------------------------- */

.delivery-abroad {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 14px;
  padding: 16px 18px;
  background: #fbf9f6;
  border: 1px solid rgba(218, 165, 75, 0.55);
  border-radius: var(--radius-card);
  cursor: pointer;
  transition:
    border-color 150ms ease-out,
    background-color 150ms ease-out;
}

.delivery-abroad:hover {
  border-color: var(--color-brand-gold);
}

.delivery-abroad input {
  width: 20px;
  height: 20px;
  flex: none;
  margin: 1px 0 0;
  accent-color: var(--color-action);
}

.delivery-abroad-text {
  display: grid;
  gap: 4px;
  flex: 1;
}

/* Name and price on one line: the cost is part of the label, not a footnote. */
.delivery-abroad-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.delivery-abroad-head strong {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-ink);
}

.delivery-abroad-price {
  flex: none;
  font-size: 15px;
  font-weight: 700;
  color: var(--color-action);
  white-space: nowrap;
}

.delivery-abroad-body {
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-graphite);
}

/* Appears on tick. Confirms in words what the checkbox did. */
.delivery-abroad-on {
  margin-top: 2px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-success);
}

.delivery-abroad:has(:checked) {
  background: color-mix(in srgb, var(--color-brand-gold) 14%, var(--color-white));
  border-color: var(--color-brand-gold);
}

.delivery-abroad:focus-within {
  outline: 2px solid var(--color-action);
  outline-offset: 2px;
}

/* The same charge, restated on the offer screen that quotes a total. */
.upsell-delivery {
  margin: 6px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: #8a6a2f;
}

/* ---------------------------------------------------------------------------
   The itemised total on the payment screen.
   --------------------------------------------------------------------------- */

.pay-breakdown {
  margin: 22px 0 18px;
}

.pay-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
  font-size: 15px;
  color: var(--color-graphite);
  border-bottom: 1px solid var(--color-hairline);
}

.pay-row-add span:last-child {
  color: var(--color-action);
  font-weight: 600;
}

.pay-row-total {
  margin-top: 4px;
  padding-top: 14px;
  border-bottom: none;
  border-top: 2px solid var(--color-ink);
  font-size: 20px;
  font-weight: 700;
  color: var(--color-ink);
}

/* The sum, stated once and large enough that nobody pays without seeing it. */
.pay-amount {
  margin: 22px 0 18px;
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--color-ink);
  text-align: center;
}

/* ---------------------------------------------------------------------------
   The card currency.

   Two options, nothing preselected, and each one big enough to be a decision
   rather than a checkbox: this is the account a salary lands in, and the wrong
   one costs a conversion on every payment. The sign leads, because it is what
   the client recognises before the word.
   --------------------------------------------------------------------------- */

.card-currencies {
  display: grid;
  gap: 10px;
  margin: 4px 0 18px;
}

.card-currency {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: var(--color-white);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-card);
  cursor: pointer;
  transition:
    border-color 150ms ease-out,
    background-color 150ms ease-out;
}

.card-currency input {
  width: 18px;
  height: 18px;
  flex: none;
  margin: 0;
  accent-color: var(--color-action);
}

.card-currency-sign {
  flex: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-full);
  /* Gold as the ground rather than as ink: the brand gold is 2.22:1 on white
     and may never carry a character this size on its own. */
  background: color-mix(in srgb, var(--color-brand-gold) 16%, var(--color-white));
  border: 1px solid color-mix(in srgb, var(--color-brand-gold) 60%, var(--color-white));
  color: var(--color-action);
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
}

.card-currency-text {
  display: grid;
  gap: 2px;
}

.card-currency-text strong {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-ink);
}

.card-currency-code {
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--color-ash);
}

.card-currency:has(:checked) {
  border-color: var(--color-action);
  background: color-mix(in srgb, var(--color-action) 6%, var(--color-white));
}

.card-currency:focus-within {
  outline: 2px solid var(--color-action);
  outline-offset: 2px;
}

@media (min-width: 560px) {
  .card-currencies {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---------------------------------------------------------------------------
   The second card.

   The one part of this form that sells rather than collects, so it is the one
   part allowed to look like an offer: a tinted panel with a rule down the
   left, sitting after the last анкета group and before the submit button.

   "No" is preselected and the plan picker is hidden until yes — declining is a
   glance, not a task.
   --------------------------------------------------------------------------- */

.upsell {
  margin: 28px 0 0;
  padding: 20px;
  border: 1px solid var(--color-action);
  border-left-width: 4px;
  border-radius: var(--radius-card);
  background:
    linear-gradient(160deg, rgba(120, 3, 3, 0.05) 0%, rgba(218, 165, 75, 0.07) 100%);
}

.upsell-badge {
  display: inline-block;
  margin: 0 0 10px;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  background: var(--color-action);
  color: var(--color-white);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2px;
}

.upsell h2 {
  margin: 0;
  font-size: 21px;
  line-height: 1.24;
  font-weight: 600;
}

.upsell-body {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--color-graphite);
}

/* The saving is the argument, so the three figures sit on one baseline: what
   it costs, what it would have cost, what that leaves in your pocket. */
.upsell-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  margin: 14px 0 0;
}

.upsell-price strong {
  font-size: 28px;
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -0.4px;
}

.upsell-price s {
  /* --color-ash is 4.95:1 on white but only 4.47:1 once the panel's red tint
     is under it, which is a fail. Graphite is 8.4:1 and still reads as the
     quieter of the two figures next to a 28px price. */
  color: var(--color-graphite);
  text-decoration-thickness: 1px;
}

.upsell-saving {
  padding: 3px 10px;
  border-radius: var(--radius-full);
  background: var(--color-success-bg);
  color: var(--color-success);
  font-size: 14px;
  font-weight: 600;
}

/* Listed, not converted: these are four separate prices. */
.upsell-alt {
  margin: 6px 0 0;
  font-size: 14px;
  color: var(--color-ash);
}

.upsell-choice {
  display: grid;
  gap: 8px;
  margin-top: 18px;
}

.upsell-option {
  margin: 0;
}

.upsell-plans {
  margin-top: 14px;
  padding-top: 16px;
  border-top: 1px solid var(--color-hairline);
}

.upsell-plan-label {
  margin: 0 0 10px;
  font-size: 14px;
  color: var(--color-graphite);
}

.tier-choice {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Radios drawn as a segmented control: the input stays in the DOM so the
   group is still keyboard-navigable and still announces as a radio group. */
.tier-pick {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-full);
  background: var(--color-white);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition:
    border-color 150ms ease-out,
    background-color 150ms ease-out;
}

.tier-pick input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--color-action);
}

.tier-pick:has(:checked) {
  border-color: var(--color-action);
  background: color-mix(in srgb, var(--color-action) 8%, var(--color-white));
}

.tier-pick:focus-within {
  outline: 2px solid var(--color-action);
  outline-offset: 2px;
}

/* The currency control, the same idea as the one on the landing page: it
   cycles between the four prices rather than converting anything, and it says
   in words that it is a control — as a bare sign nobody reads it as one. */
.currency-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  margin: 10px 0 0;
  padding: 0 14px;
  /* Brand red on white, with a gold hairline. Gold text would be 2.22:1 and
     illegible; gold as the edge and red as the ink keeps both colours and
     stays readable. */
  border: 1px solid var(--color-brand-gold);
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--color-brand-gold) 12%, var(--color-white));
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  color: var(--color-action);
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color 150ms ease-out,
    color 150ms ease-out,
    border-color 150ms ease-out;
}

.currency-toggle:hover {
  background: var(--color-action);
  border-color: var(--color-action);
  color: var(--color-white);
}

/* Fixed width so the button does not jump between "₽" and "AED". */
.currency-signs {
  display: inline-grid;
  place-items: center;
  min-width: 3.4ch;
  font-size: 16px;
}

.swap-icon {
  opacity: 0.75;
}

@media (max-width: 420px) {
  /* Clipped, not display:none — the label is the button's accessible name. */
  .currency-toggle-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}

/* Each plan carries the price it would make the deal, so choosing is an
   informed decision rather than one made and then priced. Stacked under the
   name so three pills still fit a narrow panel. */
.tier-pick {
  /* The radio is taken out of flow below, so it needs an ancestor to be out
     of flow relative TO — without this it positions against the page. */
  position: relative;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 8px 14px;
}

/* The dot is hidden and the pill itself carries the state: with a price under
   the name there is no room for both, and the border, fill and weight already
   say which is chosen. It stays in the DOM and focusable, so this is still a
   real radio group to the keyboard and to assistive tech — .tier-pick has a
   :focus-within ring for exactly that. */
.tier-pick > input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}

.tier-pick-price {
  font-size: 12px;
  font-weight: 400;
  color: var(--color-graphite);
}

.tier-pick:has(:checked) .tier-pick-price {
  color: var(--color-action);
  font-weight: 600;
}

/* ---------------------------------------------------------------------------
   Scan criteria.

   Sits ABOVE the file pickers on purpose: these are the four points the
   automated check refuses on, and someone who reads them after choosing a file
   has read them too late.

   A panel per the system — white fill, hairline border, --radius-card, and no
   shadow. Containment comes from the border and the fill shift against the
   canvas, never from elevation.
   --------------------------------------------------------------------------- */

.criteria {
  background: var(--color-white);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-card);
  padding: 24px;
  margin-bottom: 24px;
}

.criteria-title {
  font-weight: 600;
  margin: 0 0 12px;
}

.criteria-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.criteria-list li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 8px;
}

/* The mark carries the meaning, so it is never the only carrier: each line
   also reads correctly with the glyph stripped out by a screen reader. */
.criteria-list li::before {
  position: absolute;
  left: 0;
  font-weight: 600;
}

.criteria-list li.yes::before {
  content: '✓';
  color: var(--color-success);
}

.criteria-list li.no::before {
  content: '✕';
  color: var(--color-error);
}

/* The chosen file, in place of the thumbnail a PDF cannot provide. */
.upload-file {
  display: block;
  font-size: var(--text-body-sm, 14px);
  color: var(--color-ash);
  word-break: break-all;
  margin-bottom: 8px;
}

/* ---------------------------------------------------------------------------
   The final screen: what was bought.

   The card is drawn, not photographed — inline SVG, no raster asset, nothing
   to download, and no bank name, wordmark or payment mark anywhere on it. The
   per-tier gradients are getcard's own and match the site's CardRender.
   --------------------------------------------------------------------------- */

.summary {
  display: flex;
  gap: 24px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.summary-card {
  width: 220px;
  height: 138px;
  border-radius: var(--radius-card);
  flex: none;
}

.summary-rows {
  flex: 1 1 240px;
  min-width: 240px;
  margin: 0;
}

.summary-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px solid var(--color-hairline);
}

.summary-row:last-child {
  border-bottom: none;
}

.summary-row dt {
  color: var(--color-ash);
  margin: 0;
}

.summary-row dd {
  margin: 0;
  font-weight: 600;
  text-align: right;
}

/* Filled first, outlined second — never two filled. They wrap rather than
   shrink, because a Russian button label will not fit a fixed width. */
.pay-choice {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}