/* Draft-only presentation for /landing_preview.php (dev555 guard), rebuilt to
   the owner sketch (dev-tools/calculator-sketch/owner-reference.webp).
   Presentation layer only: every amount, rate, limit, availability rule and
   method state still comes from the native calculator markup and scripts.
   Both reciprocal rates are the native #finalRate children — this file only
   places them under their own amount column and never writes any rate text.
   Calculator rules are scoped with #form_tabs_container.lp-calculator; the
   hero, header and card shell rules are scoped with html.lp-ref-draft, which
   only this draft page sets. Nothing here can reach the main landing, the
   shared quote modal or the later form steps, and the scoping also wins over
   landing_preview.css / shared_quote.css whatever the stylesheet order. */

html.lp-ref-draft {
  --lp-ink:#15140f;
  --lp-ink-soft:#5c6066;
  --lp-line:#e4e7ea;
  --lp-field:#f4f5f7;
  --lp-gold:#ffdd2e;
  --lp-gold-deep:#e8bf12;
  --lp-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,"Helvetica Neue",sans-serif
}

/* ======================= Header: bare dark menu lines ======================= */
html.lp-ref-draft nav.navbar .navbar-toggler {
  width:46px;
  height:38px;
  padding:0;
  background:transparent;
  border:0;
  border-radius:8px;
  box-shadow:none
}
html.lp-ref-draft nav.navbar .navbar-toggler:focus {box-shadow:none}
html.lp-ref-draft nav.navbar .navbar-toggler:focus-visible {outline:2px solid #15140f;outline-offset:2px}
html.lp-ref-draft nav.navbar .navbar-toggler .navbar-toggler-icon {
  width:34px;
  height:26px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 26'%3E%3Cg stroke='%2315140f' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M2 4h30M2 13h30M2 22h30'/%3E%3C/g%3E%3C/svg%3E");
  background-size:34px 26px
}

/* ======================= Hero: saturated X, tighter rhythm ================== */
/* The photograph and the yellow X stay the existing artwork; only the washing
   overlays and the mobile spacing change. */
html.lp-ref-draft .lp-hero:before {
  background-image:linear-gradient(90deg,rgba(216,220,223,.5) 0 34%,rgba(216,220,223,0) 50%),url('/images/landing/xchanger-architecture-continuous.webp'),linear-gradient(90deg,#d8dcdf 0 38%,var(--theme_color,#ffdd2e) 54%);
  background-size:100% 100%,auto 100%,100% 100%;
  background-position:0 0,center 0,0 0;
  background-blend-mode:normal,multiply,normal;
  filter:saturate(1.28) contrast(1.07)
}
html.lp-ref-draft .lp-hero:after {
  background:linear-gradient(90deg,#d8dcdf 0 44.505495%,var(--theme_color,#ffdd2e) 54.395604%);
  filter:saturate(1.2)
}
html.lp-ref-draft .lp-intro h1,
html.lp-ref-draft .lp-currency-code {color:var(--lp-ink);font-family:var(--lp-sans)}
html.lp-ref-draft .lp-intro h1 {font-weight:800;letter-spacing:-.03em}
html.lp-ref-draft .lp-currency-code {font-weight:800}
html.lp-ref-draft .lp-qualities {color:#2f3129;font-weight:700}
/* The sketch separates the three qualities with middots; above 1200px the
   shared draft stacks them in a column, where a separator makes no sense. */
@media (max-width:1199.98px) {
  html.lp-ref-draft .lp-qualities span + span:before {content:'·';margin-right:12px;color:#8d8f86}
}

@media (max-width:767.98px) {
  /* The sketch has no dead band between the hero copy and the card. */
  html.lp-ref-draft .lp-intro {padding:14px 0 12px;min-height:0}
  html.lp-ref-draft .lp-exchange {padding:0 0 28px}
  html.lp-ref-draft .lp-currency-pair {margin:0 0 6px;gap:10px}
  html.lp-ref-draft .lp-intro h1 {margin:0 0 8px;line-height:1.1}
  html.lp-ref-draft .lp-intro-text {font-size:16px;line-height:1.35;color:#33352e}
  html.lp-ref-draft .lp-qualities {margin:12px 0 0;gap:0 12px;flex-wrap:nowrap}
}
/* Phone widths only: the sketch keeps the copy in the left column of the X, so
   the heading breaks as «Обмен рублей / на баты» beside the photograph. */
@media (max-width:480px) {
  html.lp-ref-draft .lp-intro h1,
  html.lp-ref-draft .lp-intro-text {max-width:59%}
}
@media (max-width:360px) {
  html.lp-ref-draft .lp-intro h1,
  html.lp-ref-draft .lp-intro-text {max-width:64%}
}

/* ======================= Card shell: white, borderless ===================== */
/* The yellow frame, halo and outline of the draft card are replaced by one
   white surface with a soft neutral shadow, carried by #lead-form-shell so the
   chat helper below the calculator keeps sitting outside the card. */
html.lp-ref-draft .lp-exchange .lp-calculator-card {
  padding:0;
  background:transparent;
  border:0;
  border-radius:0;
  outline:0;
  box-shadow:none
}
/* landing_preview.css gives the shell a gold 1px border and a yellow 3px halo;
   both are dropped here. Only the neutral shadow remains, and the genuine
   focus rings of the inputs and buttons are untouched. */
html.lp-ref-draft #form_tabs_container.lp-calculator #lead-form-shell {
  padding:16px;
  background:#fff;
  border:0;
  outline:0;
  border-radius:20px;
  box-shadow:0 12px 34px rgba(22,24,20,.12),0 2px 6px rgba(22,24,20,.05)
}
html.lp-ref-draft #form_tabs_container.lp-calculator .lead-submit-overlay {border-radius:20px}
#form_tabs_container.lp-calculator,
#form_tabs_container.lp-calculator #lead-form-shell {font-family:var(--lp-sans,Arial,sans-serif)}
/* Native wrappers lose their own frames; the shell is the only card now. */
#form_tabs_container.lp-calculator #nav_steps,
#form_tabs_container.lp-calculator #nav-tabContent {
  padding:0!important;
  background:transparent;
  border:0!important;
  border-radius:0!important
}
#form_tabs_container.lp-calculator #nav-tabContent > .tab-pane > div {padding:0!important}

/* ---- Title row: «Расчёт обмена» and the plain grey share icon ---- */
/* The owner asked for the title row to stop merging into the amounts, the way
   the original form separated them with a rule. One hairline across the card
   plus a short gold segment under the title is the whole treatment: no panel,
   no fill, no second heading, and nothing in the row changes its box. */
#form_tabs_container.lp-calculator .quote-step-header {
  gap:10px;
  align-items:center;
  /* Sketch rhythm: the title row is ~44px tall, not the 57px the shared
     44px min-height plus a 14px gap produced. */
  padding:0 0 9px;
  margin:0 0 12px;
  background-color:transparent;
  background-image:linear-gradient(90deg,var(--lp-gold-deep,#e8bf12) 0 38px,rgba(232,191,18,0) 38px);
  background-repeat:no-repeat;
  background-position:left bottom;
  background-size:100% 2px;
  border:0;
  border-bottom:1px solid #ecedf0;
  border-radius:0
}
@media (forced-colors:active) {
  #form_tabs_container.lp-calculator .quote-step-header {border-bottom:1px solid CanvasText}
}
/* Bootstrap row gutters would push the card content past the 16px inner edge
   of the sketch; the field row and the method row keep their own gutters. */
#form_tabs_container.lp-calculator #step_1 .row:not(.gx-1):not(.gx-3) {--bs-gutter-x:0}
#form_tabs_container.lp-calculator #nav_steps {
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:nowrap
}
#form_tabs_container.lp-calculator #nav_steps .nav-link {
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:0;
  /* landing_preview.css fixes the tab height above 1000px; a two-line stage
     title of a later step must not be clipped by it. */
  height:auto;
  min-height:36px;
  color:var(--lp-ink,#15140f)
}
/* Only the stage you are on carries the card heading, so a later step can
   never inherit the first screen's display type. */
#form_tabs_container.lp-calculator #nav_steps .nav-link.active {
  flex:1 1 auto;
  min-width:0;
  font-size:18px;
  font-weight:800;
  letter-spacing:-.02em
}
#form_tabs_container.lp-calculator #nav_steps #step_1-tab.active {font-size:23px}
/* The shared partial hides .step_desc below 400px, which would leave the card
   without a title on a phone. */
#form_tabs_container.lp-calculator #nav_steps .nav-link.active .step_desc {
  display:block;
  overflow-wrap:break-word;
  line-height:1.2;
  text-align:left
}
/* ---- One return control, no step numbers ----
   The owner asked to drop the numerals and use a back control instead. No new
   navigation is introduced: the control IS the native tab button of the step
   immediately before the one you are on, so clicking it runs the native
   handler, returns to that stage with everything already entered and makes it
   active — which hides the control again on the first screen. Every other step
   button is simply not shown, so there is exactly one of them on screen.
   The draft markup carries the «Назад» caption in .step_title; .step_desc is
   the stage title. Only one of the two is ever displayed on a button.
   Which tab is "immediately before the active one" is read from the native
   active state and marked with the plain .lp-back class by the small
   synchronizer in calculator_reference_preview.js (shown.bs.tab only, no
   click/selection of its own) — a fixed, independent-review-flagged bug
   (B1) used :has()/@supports selector() here instead, which lost the Back
   control on engines without :has() and skipped a step on engines with
   selector() but not :has(). Plain class selectors need neither. Reaching
   any later step already requires the native Bootstrap Tab JS to run (the
   tab-pane switch has no non-JS path), so a synchronizer that runs on that
   same JS has no extra no-JS gap to fail into. */
#form_tabs_container.lp-calculator #nav_steps .step_title {display:none}
#form_tabs_container.lp-calculator #nav_steps .nav-link:not(.active) {display:none}
#form_tabs_container.lp-calculator #nav_steps .nav-link:not(.active) .step_desc {display:none}
#form_tabs_container.lp-calculator #nav_steps .nav-link.lp-back {
  display:inline-flex;
  flex:0 0 auto;
  gap:5px;
  /* A comfortable 44px target, kept compact so the stage title keeps the row. */
  min-height:44px;
  padding:0 11px 0 8px;
  background:#f3f4f6;
  border:1px solid #dfe3e7;
  border-radius:12px;
  color:#3c4147;
  font-size:14px;
  font-weight:600;
  letter-spacing:0;
  white-space:nowrap
}
#form_tabs_container.lp-calculator #nav_steps .nav-link.lp-back .step_title {display:inline}
#form_tabs_container.lp-calculator #nav_steps .nav-link.lp-back:before {
  content:'';
  flex:0 0 15px;
  width:15px;
  height:15px;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 8H3.2M7.5 3.2 2.8 8l4.7 4.8'/%3E%3C/svg%3E") no-repeat center/contain;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 8H3.2M7.5 3.2 2.8 8l4.7 4.8'/%3E%3C/svg%3E") no-repeat center/contain
}
@media (hover:hover) and (pointer:fine) {
  #form_tabs_container.lp-calculator #nav_steps .nav-link.lp-back:hover {background:#e9ebee;color:#15140f}
}
#form_tabs_container.lp-calculator #nav_steps .nav-link:focus-visible {
  outline:2px solid #15140f;
  outline-offset:2px;
  border-radius:8px
}
/* The share control reads as a control of the title row, not as a glyph
   floating over the amounts: a quiet 44px square on the card surface. Its
   native id, handler, label and dialog wiring are untouched. */
#form_tabs_container.lp-calculator #share-quote-open.share-quote-trigger {
  flex:0 0 44px;
  width:44px;
  height:44px;
  min-height:44px;
  padding:0;
  background:#f5f6f8;
  border:1px solid #e7e9ec;
  border-radius:13px;
  box-shadow:none;
  color:#6c7177
}
@media (hover:hover) and (pointer:fine) {
  #form_tabs_container.lp-calculator #share-quote-open.share-quote-trigger:hover {background:#eceef1;color:#15140f}
}
#form_tabs_container.lp-calculator #share-quote-open.share-quote-trigger:focus-visible {
  outline:2px solid #15140f;
  outline-offset:2px
}
#form_tabs_container.lp-calculator #share-quote-open.share-quote-trigger svg {width:21px;height:21px}

/* ======================= Amount columns ==================================== */
#form_tabs_container.lp-calculator #step_1 .quote-amount-block > .row {align-items:flex-start}
/* Visual order only (all four blocks are static text or inputs in their own
   row): amounts, both rates, then the native limit note and the QR hint. */
#form_tabs_container.lp-calculator #step_1 .quote-amount-block > .row > .col-md-12 {order:0}
#form_tabs_container.lp-calculator #step_1 .rate-panel {order:1;margin-top:7px;padding:0;border:0}
#form_tabs_container.lp-calculator #step_1 #amount-limits {order:2}
#form_tabs_container.lp-calculator #step_1 #qr-saving-hint {order:3}
#form_tabs_container.lp-calculator #step_1 .quote-amount-block > .row {--bs-gutter-y:0!important}

/* Flag + code caption; the receiving column mirrors to flag-first like the
   sketch without touching its markup order. */
#form_tabs_container.lp-calculator #step_1 .quote-amount-block .form-label {
  display:flex;
  align-items:center;
  gap:7px;
  margin:0 0 7px!important;
  min-height:20px
}
/* Both captions read flag then code, as in the sketch. The shared stylesheet
   already orders the flag before the name, so the mirrored column only needs
   its alignment back to the start. */
#form_tabs_container.lp-calculator #step_1 .quote-amount-block .col-5:last-child .form-label {justify-content:flex-start}
#form_tabs_container.lp-calculator #step_1 .quote-amount-block .currency_name {
  color:var(--lp-ink,#15140f);
  font-size:14px;
  font-weight:800!important;
  letter-spacing:.01em;
  order:1
}
#form_tabs_container.lp-calculator #step_1 .quote-amount-block .currency_img {
  flex:0 0 23px;
  width:23px;
  min-width:23px;
  height:16px;
  margin:0!important;
  padding:0;
  background-color:transparent;
  border:0;
  border-radius:3px;
  box-shadow:0 0 0 1px rgba(21,20,15,.14);
  order:0;
  vertical-align:middle
}

#form_tabs_container.lp-calculator #step_1 .quote-amount-block .input-group.box_shadow {box-shadow:none}
/* No font-size here on purpose: the native applyAmountFontSize() writes an
   inline 1.5rem / 1.25rem / 1rem depending on the formatted length, and an
   !important rule would strip that adaptive step from long amounts. The
   pre-script fallback stays the one landing_preview.css already provides. */
#form_tabs_container.lp-calculator #step_1 #amount_1,
#form_tabs_container.lp-calculator #step_1 #amount_2 {
  height:44px!important;
  padding:0 12px;
  background:var(--lp-field,#f4f5f7);
  border:1px solid #e9ebee;
  border-radius:11px;
  box-shadow:none;
  color:var(--lp-ink,#15140f);
  font-weight:700;
  font-variant-numeric:tabular-nums;
  text-align:right
}
#form_tabs_container.lp-calculator #step_1 #amount_1:focus,
#form_tabs_container.lp-calculator #step_1 #amount_2:focus {
  background:#fff;
  border-color:var(--lp-gold-deep,#e8bf12);
  box-shadow:0 0 0 3px rgba(255,221,46,.35)
}

/* Swap: white circle with a grey glyph, centred on the field row. */
#form_tabs_container.lp-calculator #step_1 .col-2 > .selectPair.btn {
  flex:0 0 40px!important;
  align-self:center;
  width:40px!important;
  height:40px!important;
  max-height:40px!important;
  margin:2px auto 0;
  padding:0!important;
  background:#fff!important;
  border:1px solid #dfe3e7!important;
  border-radius:50%!important;
  box-shadow:0 1px 3px rgba(22,24,20,.1)
}
#form_tabs_container.lp-calculator #step_1 .col-2 > .selectPair.btn:hover {background:#fbfbfc!important}
#form_tabs_container.lp-calculator #step_1 .col-2 > .selectPair.btn .svg_icon {
  width:20px;
  height:20px;
  margin:0!important;
  background-color:#6c7177
}

/* ---- Both live reciprocal rates, each on its own amount edge ----
   #finalRate keeps the native two spans; the row spans exactly the field row
   width, so the sending rate starts on the left field's outer edge and the
   receiving rate ends on the right field's outer edge at any width. */
#form_tabs_container.lp-calculator #step_1 .rate-caption {
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0
}
#form_tabs_container.lp-calculator #step_1 #finalRate {
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:8px;
  /* .row.gx-1 cancels its own 2px column padding with a -2px row margin, so
     the fields already start on the content edge; the rates need no inset of
     their own to sit exactly on the outer edge of their field. */
  padding:0;
  color:#6a6f76;
  font-size:13.5px;
  font-weight:400;
  font-variant-numeric:tabular-nums;
  line-height:1.35
}
#form_tabs_container.lp-calculator #step_1 #finalRate > span {padding:0;white-space:nowrap}
#form_tabs_container.lp-calculator #step_1 #finalRate > span:first-child {text-align:left}
#form_tabs_container.lp-calculator #step_1 #finalRate > span + span {text-align:right}

/* ---- Native validation note ---- */
#form_tabs_container.lp-calculator #step_1 #amount-limits {
  margin-top:9px;
  padding:8px 10px;
  background:#fdf3f2;
  border:1px solid #f0cfca;
  border-left:3px solid #b42318;
  border-radius:10px;
  font-size:13px;
  line-height:1.45
}
#form_tabs_container.lp-calculator #step_1 #amount-limits:before {
  content:'!';
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:16px;
  height:16px;
  margin-right:6px;
  background:#b42318;
  border-radius:50%;
  color:#fff;
  font-size:11px;
  font-weight:700;
  vertical-align:1px
}
/* While the native note is shown, mark the fields it refers to. Browsers
   without :has() simply keep the plain fields and the note alone. */
@supports selector(:has(*)) {
  #form_tabs_container.lp-calculator #step_1 .quote-amount-block > .row:has(> #amount-limits:not(.d-none)) #amount_1,
  #form_tabs_container.lp-calculator #step_1 .quote-amount-block > .row:has(> #amount-limits:not(.d-none)) #amount_2 {
    border-color:#b42318;
    box-shadow:inset 0 0 0 1px #b42318
  }
}

/* ======================= Methods: two columns at every width =============== */
#form_tabs_container.lp-calculator #step_1 .quote-methods-block {
  margin-top:8px;
  padding:0;
  background:transparent;
  border:0
}
#form_tabs_container.lp-calculator #step_1 .quote-methods-block > .row {--bs-gutter-y:0!important}
/* No enclosing panel and no vertical separator in the sketch. */
#form_tabs_container.lp-calculator #step_1 .quote-methods-block .col-6.border-end {border-right:0!important}
#form_tabs_container.lp-calculator #step_1 .quote-methods-block .row.gx-3 {--bs-gutter-x:12px!important}
#form_tabs_container.lp-calculator #step_1 .quote-methods-block .col-6 {flex:0 0 50%;width:50%}
#form_tabs_container.lp-calculator #step_1 .quote-methods-block .service-help-heading {
  justify-content:flex-start;
  gap:2px;
  margin-bottom:9px!important;
  color:var(--lp-ink,#15140f);
  font-size:15px!important;
  font-weight:700;
  text-transform:none!important;
  white-space:nowrap
}
#form_tabs_container.lp-calculator #step_1 .quote-methods-block .service-help-button {
  flex:0 0 24px;
  width:24px;
  height:24px;
  color:#8b9096
}
#form_tabs_container.lp-calculator #step_1 .quote-methods-block .d-flex.flex-column.gap-2 {gap:6px!important}

/* Outlined controls: line icon left, label left, state marker right. */
#form_tabs_container.lp-calculator #step_1 .quote-methods-block .pay_method_btn,
#form_tabs_container.lp-calculator #step_1 .quote-methods-block .oper_type_btn {
  position:relative;
  height:auto;
  min-height:44px;
  justify-content:flex-start;
  gap:9px;
  padding:6px 26px 6px 10px;
  background:#fff;
  border:1px solid #dcdfe3;
  border-radius:11px;
  box-shadow:none;
  color:var(--lp-ink,#15140f);
  font-size:14px;
  font-weight:500;
  text-align:left;
  text-transform:none;
  transition:background .2s,border-color .2s
}
#form_tabs_container.lp-calculator #step_1 .quote-methods-block .pay_method_btn:hover,
#form_tabs_container.lp-calculator #step_1 .quote-methods-block .oper_type_btn:hover {transform:none}
@media (hover:hover) and (pointer:fine) {
  #form_tabs_container.lp-calculator #step_1 .quote-methods-block .pay_method_btn:not(:disabled):hover,
  #form_tabs_container.lp-calculator #step_1 .quote-methods-block .oper_type_btn:not(:disabled):hover {
    background:#fcfcfd;
    border-color:#b9bec4
  }
}
@media (prefers-reduced-motion:reduce) {
  #form_tabs_container.lp-calculator #step_1 .quote-methods-block .pay_method_btn,
  #form_tabs_container.lp-calculator #step_1 .quote-methods-block .oper_type_btn {transition:none}
}
#form_tabs_container.lp-calculator #step_1 .quote-methods-block .pay_method_btn:focus-visible,
#form_tabs_container.lp-calculator #step_1 .quote-methods-block .oper_type_btn:focus-visible {
  outline:2px solid #15140f;
  outline-offset:2px
}
#form_tabs_container.lp-calculator #step_1 .quote-methods-block .method-label {
  overflow:hidden;
  line-height:1.2;
  text-overflow:ellipsis;
  white-space:nowrap
}

/* One monochrome line-icon family, drawn by the draft so the mixed coloured
   native glyphs cannot come back after a direction change. The native glyph is
   hidden only once the draft icon is in place. */
#form_tabs_container.lp-calculator #step_1 .quote-methods-block [data-lp-icon] > .svg_icon,
#form_tabs_container.lp-calculator #step_1 .quote-methods-block [data-lp-icon] > img {display:none!important}
#form_tabs_container.lp-calculator #step_1 .quote-methods-block [data-lp-icon]:before {
  content:'';
  flex:0 0 22px;
  width:22px;
  height:22px;
  background:#15140f;
  -webkit-mask:var(--lp-icon) no-repeat center/22px 22px;
  mask:var(--lp-icon) no-repeat center/22px 22px
}
#form_tabs_container.lp-calculator #step_1 .quote-methods-block [data-lp-icon="bank"] {
  --lp-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9.6 12 4.2l9 5.4'/%3E%3Cpath d='M4.8 9.9h14.4'/%3E%3Cpath d='M6.8 12.2v5.6M10.3 12.2v5.6M13.7 12.2v5.6M17.2 12.2v5.6'/%3E%3Cpath d='M3.6 20h16.8'/%3E%3C/svg%3E")
}
#form_tabs_container.lp-calculator #step_1 .quote-methods-block [data-lp-icon="truck"] {
  --lp-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.8 6.4h10.4v10H2.8z'/%3E%3Cpath d='M13.2 9.6h3.6l3.4 3.2v3.6h-7z'/%3E%3Ccircle cx='7' cy='18.1' r='1.7'/%3E%3Ccircle cx='16.8' cy='18.1' r='1.7'/%3E%3Cpath d='M8.7 16.4h6.4'/%3E%3C/svg%3E")
}
#form_tabs_container.lp-calculator #step_1 .quote-methods-block [data-lp-icon="atm"] {
  --lp-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.4' y='3.6' width='17.2' height='16.8' rx='2.2'/%3E%3Cpath d='M7.4 7.6h9.2'/%3E%3Cpath d='M7.8 16.4h8.4'/%3E%3Cpath d='M12 10.2v3.6m-1.7-1.7L12 13.8l1.7-1.7'/%3E%3C/svg%3E")
}
#form_tabs_container.lp-calculator #step_1 .quote-methods-block [data-lp-icon="cash"] {
  --lp-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.6' y='6' width='18.8' height='12' rx='2'/%3E%3Ccircle cx='12' cy='12' r='2.6'/%3E%3Cpath d='M6.2 9.6v4.8M17.8 9.6v4.8'/%3E%3C/svg%3E")
}
#form_tabs_container.lp-calculator #step_1 .quote-methods-block [data-lp-icon="qr"] {
  --lp-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linejoin='round'%3E%3Crect x='3.4' y='3.4' width='6.6' height='6.6' rx='1'/%3E%3Crect x='14' y='3.4' width='6.6' height='6.6' rx='1'/%3E%3Crect x='3.4' y='14' width='6.6' height='6.6' rx='1'/%3E%3Cg fill='%23000' stroke='none'%3E%3Crect x='5.7' y='5.7' width='2' height='2'/%3E%3Crect x='16.3' y='5.7' width='2' height='2'/%3E%3Crect x='5.7' y='16.3' width='2' height='2'/%3E%3Crect x='14' y='14' width='2.8' height='2.8'/%3E%3Crect x='17.8' y='14' width='2.8' height='2.8'/%3E%3Crect x='14' y='17.8' width='2.8' height='2.8'/%3E%3Crect x='17.8' y='17.8' width='2.8' height='2.8'/%3E%3C/g%3E%3C/svg%3E")
}
/* The СБП brand mark, taken from the asset the native markup already loads and
   shown as one black silhouette like the sketch. */
#form_tabs_container.lp-calculator #step_1 .quote-methods-block [data-lp-icon="sbp"] {
  --lp-icon:url("/images/icons_svg/SBP.svg")
}

/* Selected: pale yellow fill, gold border and a gold check circle — shape and
   weight, not colour alone. */
#form_tabs_container.lp-calculator #step_1 .quote-methods-block .pay_method_btn.selected,
#form_tabs_container.lp-calculator #step_1 .quote-methods-block .oper_type_btn.selected {
  background:#fff7d1;
  border-color:var(--lp-gold,#ffdd2e);
  box-shadow:inset 0 0 0 1px var(--lp-gold,#ffdd2e);
  color:var(--lp-ink,#15140f);
  font-weight:600
}
#form_tabs_container.lp-calculator #step_1 .quote-methods-block .pay_method_btn.selected:after,
#form_tabs_container.lp-calculator #step_1 .quote-methods-block .oper_type_btn.selected:after {
  content:'';
  position:absolute;
  top:50%;
  right:7px;
  width:18px;
  height:18px;
  margin-top:-9px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='9' fill='%23f5c518'/%3E%3Cpath d='M5.8 10.4l2.9 2.9 5.6-6' fill='none' stroke='%23ffffff' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain
}

/* Unavailable method: dashed outline keeps it distinguishable without colour. */
#form_tabs_container.lp-calculator #step_1 .quote-methods-block .pay_method_btn:disabled,
#form_tabs_container.lp-calculator #step_1 .quote-methods-block .oper_type_btn:disabled {
  background:#f3f4f5;
  border:1px dashed #c3c7cb;
  box-shadow:none;
  color:#7a7f85;
  font-weight:500
}
#form_tabs_container.lp-calculator #step_1 .quote-methods-block .pay_method_btn:disabled:before,
#form_tabs_container.lp-calculator #step_1 .quote-methods-block .oper_type_btn:disabled:before {background:#7a7f85}
/* A selected method that the native limits have just blocked. */
#form_tabs_container.lp-calculator #step_1 .quote-methods-block .pay_method_btn.selected:disabled,
#form_tabs_container.lp-calculator #step_1 .quote-methods-block .oper_type_btn.selected:disabled {
  background:#f8f5e6;
  border:1px dashed #cdba52;
  color:#6c7067
}
#form_tabs_container.lp-calculator #step_1 .quote-methods-block .pay_method_btn.selected:disabled:after,
#form_tabs_container.lp-calculator #step_1 .quote-methods-block .oper_type_btn.selected:disabled:after {opacity:.45}

/* ======================= Promo row and the CTA ============================= */
/* Owner finding: with the promo open the focused field sat directly against
   the bottom of the method buttons. The promo entry is the last column of the
   native methods row, so it is already a full-width row below both columns —
   what it lacked was its own space and surface, because the draft zeroes the
   row gutter. .lp-promo-block is the draft-only marker that landing_preview.php
   puts on that native column; the disclosure button, #promocode_section,
   #promocode, #applyPromocode, #promocode_comment, their ids and every native
   handler stay exactly as the shared markup wrote them. */
#form_tabs_container.lp-calculator #step_1 .lp-promo-block {margin-top:16px}
#form_tabs_container.lp-calculator #step_1 .promo-disclosure {
  display:inline-flex;
  align-self:flex-start;
  align-items:center;
  gap:6px;
  max-width:100%;
  min-height:44px;
  margin:0;
  padding:0 14px;
  background:#fff;
  border:1px solid #dcdfe3;
  border-radius:11px;
  color:#5c6066;
  font-size:14px;
  font-weight:500;
  text-decoration:none
}
@media (hover:hover) and (pointer:fine) {
  #form_tabs_container.lp-calculator #step_1 .promo-disclosure:hover {background:#fafbfc;border-color:#b9bec4;color:#15140f}
}
#form_tabs_container.lp-calculator #step_1 .promo-disclosure:focus-visible {
  outline:2px solid #15140f;
  outline-offset:2px
}
/* The native script swaps the chip for this row in place, so the 16px above
   the block is what keeps the open field — and its focus ring — clear of the
   method columns at any text size. */
#form_tabs_container.lp-calculator #step_1 #promocode_section {
  --bs-gutter-x:8px;
  align-items:flex-start;
  /* .row carries negative side margins; zeroed so the panel cannot grow past
     the card's inner edge. The columns keep the gutter as inner padding. */
  margin:0;
  padding:10px 6px;
  background:#fafbfc;
  border:1px solid #eceef0;
  border-radius:14px
}
#form_tabs_container.lp-calculator #step_1 #promocode {
  padding:0 12px;
  background:#fff;
  border:1px solid #dcdfe3;
  border-radius:11px;
  box-shadow:none;
  color:var(--lp-ink,#15140f);
  /* 16px keeps a phone from zooming into the field on focus. */
  font-size:16px
}
#form_tabs_container.lp-calculator #step_1 #promocode::placeholder {color:#9aa0a6}
#form_tabs_container.lp-calculator #step_1 #promocode:focus {
  background:#fff;
  border-color:var(--lp-gold-deep,#e8bf12);
  box-shadow:0 0 0 3px rgba(255,221,46,.35)
}
/* The native button carries inline border-radius and Bootstrap colour
   utilities, hence the !important on exactly those properties. */
#form_tabs_container.lp-calculator #step_1 #applyPromocode {
  /* min-height, not height: the native field beside it is 3.125rem, and the
     button still has to grow if the label wraps at a larger text size. */
  min-height:3.125rem;
  padding:0 6px!important;
  background:#fff;
  border:1px solid #dcdfe3!important;
  border-radius:11px!important;
  box-shadow:none!important;
  color:var(--lp-ink,#15140f)!important;
  font-size:14px;
  font-weight:600;
  line-height:1.2
}
@media (hover:hover) and (pointer:fine) {
  #form_tabs_container.lp-calculator #step_1 #applyPromocode:hover {background:#fafbfc;border-color:#b9bec4!important}
}
#form_tabs_container.lp-calculator #step_1 #applyPromocode:focus-visible {
  outline:2px solid #15140f;
  outline-offset:2px
}
/* The native status line keeps its own .text-success / .text-danger colour. */
#form_tabs_container.lp-calculator #step_1 #promocode_section > div:last-child {
  flex:0 0 100%;
  width:100%;
  max-width:100%
}
#form_tabs_container.lp-calculator #step_1 #promocode_comment {
  margin-top:8px;
  font-size:13px;
  line-height:1.4
}
#form_tabs_container.lp-calculator #step_1 #promocode_comment:empty {margin-top:0}
#form_tabs_container.lp-calculator #step_1 #toStep_2.step_button {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  min-height:50px;
  margin-top:12px!important;
  padding:10px 18px;
  background:linear-gradient(180deg,#ffe766 0,#ffd91f 58%,#fdcf0b 100%);
  border:0;
  border-radius:14px!important;
  box-shadow:0 8px 20px rgba(228,186,36,.3);
  color:#14130e;
  font-size:21px;
  font-weight:800;
  letter-spacing:-.01em
}
#form_tabs_container.lp-calculator #step_1 #toStep_2.step_button:after {
  content:'';
  flex:0 0 26px;
  width:26px;
  height:18px;
  background:#14130e;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 18' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 9h21M16.5 2.8 23 9l-6.5 6.2'/%3E%3C/svg%3E") no-repeat center/contain;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 18' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 9h21M16.5 2.8 23 9l-6.5 6.2'/%3E%3C/svg%3E") no-repeat center/contain
}
#form_tabs_container.lp-calculator #step_1 #toStep_2.step_button:hover {transform:none;filter:brightness(1.03)}
#form_tabs_container.lp-calculator #step_1 #toStep_2.step_button:focus-visible {outline:2px solid #15140f;outline-offset:3px}

/* ======================= Later steps: one card language ==================== */
/* Presentation only. Every field, name, id, value, hint, placeholder, required
   marker and native validator in these panels is the shared markup; nothing is
   hidden, added, renamed or re-ordered here, and the native .d-none switching
   of the detail blocks keeps deciding what is on screen. */
#form_tabs_container.lp-calculator #step_2 .oper_details {padding:0}
#form_tabs_container.lp-calculator #step_2 .oper_details .fs-5 {
  margin-bottom:2px!important;
  color:var(--lp-ink,#15140f);
  font-size:16px!important;
  font-weight:700!important;
  letter-spacing:-.01em
}
#form_tabs_container.lp-calculator #step_2 .oper_details > p {font-size:14px;line-height:1.45}
#form_tabs_container.lp-calculator #step_2 #oper_details_2_atm_text {font-size:14px;line-height:1.45}
#form_tabs_container.lp-calculator #step_2 .ordinar_input_wrap,
#form_tabs_container.lp-calculator #step_3 .ordinar_input_wrap {margin-bottom:12px}
#form_tabs_container.lp-calculator #step_2 .form-label,
#form_tabs_container.lp-calculator #step_3 .form-label {
  margin-bottom:4px!important;
  color:#5c6066;
  font-size:13.5px;
  font-weight:600
}
/* .text-danger on a label is a Bootstrap !important colour: the native
   «fill this in» marking of an empty required field stays visible. */
#form_tabs_container.lp-calculator #step_2 .form-control,
#form_tabs_container.lp-calculator #step_3 .form-control {
  height:44px;
  padding:0 12px;
  background:#fff;
  border:1px solid #dcdfe3;
  border-radius:11px;
  box-shadow:none;
  color:var(--lp-ink,#15140f);
  /* 16px keeps a phone from zooming into the field on focus. */
  font-size:16px
}
#form_tabs_container.lp-calculator #step_2 .form-control::placeholder,
#form_tabs_container.lp-calculator #step_3 .form-control::placeholder {color:#9aa0a6}
#form_tabs_container.lp-calculator #step_2 .form-control:focus,
#form_tabs_container.lp-calculator #step_3 .form-control:focus {
  background:#fff;
  border-color:var(--lp-gold-deep,#e8bf12);
  box-shadow:0 0 0 3px rgba(255,221,46,.35)
}
#form_tabs_container.lp-calculator #step_2 .field-hint {margin:0 0 5px;font-size:12.5px}

/* СБП KYC info panel: the native disclosure, including the identity-document
   sentence, is kept word for word. Only the proportions are fixed — the icon
   is a flex item with an inline 5em size, so on a 320px screen it was squeezed
   to a few pixels while the text wrapped into a column of single words. */
#form_tabs_container.lp-calculator #oper_details_1_qr_info .d-flex {
  gap:12px;
  padding:12px!important;
  border-radius:14px!important
}
#form_tabs_container.lp-calculator #oper_details_1_qr_info .svg_icon {
  flex:0 0 auto;
  width:52px!important;
  height:52px!important;
  margin-right:0!important;
  margin-top:2px!important
}
#form_tabs_container.lp-calculator #oper_details_1_qr_info .d-flex > div {min-width:0}
#form_tabs_container.lp-calculator #oper_details_1_qr_info p {font-size:14px;line-height:1.45}

/* Bank / district pickers: the same outlined control as the method buttons.
   The uppercase utility is dropped so a bank or district name is shown as it
   is stored, not re-cased by the draft. */
#form_tabs_container.lp-calculator #step_2 .selectBankRub,
#form_tabs_container.lp-calculator #step_2 .selectBankThb,
#form_tabs_container.lp-calculator #step_2 #selectDeliveryDistrict {
  display:flex!important;
  align-items:center;
  gap:10px;
  width:100%;
  min-height:46px;
  margin-bottom:12px!important;
  padding:7px 12px!important;
  background:#fff;
  border:1px solid #dcdfe3!important;
  border-radius:11px;
  box-shadow:none;
  font-size:15px;
  text-align:left;
  text-transform:none!important
}
#form_tabs_container.lp-calculator #step_2 .selectBankRub:focus-visible,
#form_tabs_container.lp-calculator #step_2 .selectBankThb:focus-visible,
#form_tabs_container.lp-calculator #step_2 #selectDeliveryDistrict:focus-visible {
  outline:2px solid #15140f;
  outline-offset:2px
}
#form_tabs_container.lp-calculator #step_2 .bank_name {
  overflow:hidden;
  color:var(--lp-ink,#15140f);
  font-weight:500;
  text-overflow:ellipsis;
  white-space:nowrap
}
#form_tabs_container.lp-calculator #step_2 .bank_img {
  flex:0 0 26px;
  width:26px;
  min-width:26px;
  height:26px;
  border-radius:6px
}
#form_tabs_container.lp-calculator #step_2 .select_marker {
  float:none;
  height:auto;
  margin-left:auto;
  color:#8b9096;
  font-size:13px
}

/* Native order summary, in the card's neutral surface. */
#form_tabs_container.lp-calculator .order-summary {
  margin-top:14px;
  padding:12px 14px;
  background:#fafbfc;
  border:1px solid var(--lp-line,#e4e7ea);
  border-radius:14px;
  color:var(--lp-ink,#15140f);
  font-size:13.5px
}
#form_tabs_container.lp-calculator .order-summary .summary-title {
  margin-bottom:9px;
  font-size:15px;
  font-weight:700
}
#form_tabs_container.lp-calculator .order-summary .summary-line {font-size:14px}
#form_tabs_container.lp-calculator .order-summary .summary-method,
#form_tabs_container.lp-calculator .order-summary .summary-details dt {color:#6a6f76}
#form_tabs_container.lp-calculator .short-order-summary {font-size:14px}

/* Terms row: the native checkbox keeps driving #toStep_4. */
#form_tabs_container.lp-calculator #step_3 .form-check {font-size:13.5px}
#form_tabs_container.lp-calculator #step_3 .form-check-input {
  width:19px;
  height:19px;
  margin-right:7px;
  border-color:#b9bec4
}
/* The brand tick is drawn dark: Bootstrap's own mark is white, which on the
   gold fill would be barely visible. The native checked state itself is
   untouched — this is colour only, and #toStep_4 still follows the checkbox. */
#form_tabs_container.lp-calculator #step_3 .form-check-input:checked {
  background-color:var(--lp-gold-deep,#e8bf12);
  border-color:var(--lp-gold-deep,#e8bf12);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%2314130e' stroke-linecap='round' stroke-linejoin='round' stroke-width='3.2' d='m6 10 3 3 6-6'/%3E%3C/svg%3E")
}
#form_tabs_container.lp-calculator #step_3 .form-check-input:focus {
  border-color:var(--lp-gold-deep,#e8bf12);
  box-shadow:0 0 0 3px rgba(255,221,46,.35)
}
#form_tabs_container.lp-calculator #step_3 .form-check-label a {color:#15140f;text-underline-offset:3px}

/* The continue / submit buttons are the same primary CTA as «Обменять». */
#form_tabs_container.lp-calculator #step_2 #toStep_3.step_button,
#form_tabs_container.lp-calculator #step_3 #toStep_4.step_button {
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:50px;
  margin-top:14px!important;
  padding:10px 18px;
  background:linear-gradient(180deg,#ffe766 0,#ffd91f 58%,#fdcf0b 100%);
  border:0;
  border-radius:14px!important;
  box-shadow:0 8px 20px rgba(228,186,36,.3);
  color:#14130e;
  font-size:19px;
  font-weight:800;
  letter-spacing:-.01em
}
#form_tabs_container.lp-calculator #step_2 #toStep_3.step_button:hover,
#form_tabs_container.lp-calculator #step_3 #toStep_4.step_button:hover {transform:none}
#form_tabs_container.lp-calculator #step_2 #toStep_3.step_button:not(:disabled):hover,
#form_tabs_container.lp-calculator #step_3 #toStep_4.step_button:not(:disabled):hover {filter:brightness(1.03)}
#form_tabs_container.lp-calculator #step_2 #toStep_3.step_button:focus-visible,
#form_tabs_container.lp-calculator #step_3 #toStep_4.step_button:focus-visible {outline:2px solid #15140f;outline-offset:3px}
/* A disabled CTA (terms unchecked, or the submit busy state) must not look
   like the live one. */
#form_tabs_container.lp-calculator #step_1 #toStep_2.step_button:disabled,
#form_tabs_container.lp-calculator #step_2 #toStep_3.step_button:disabled,
#form_tabs_container.lp-calculator #step_3 #toStep_4.step_button:disabled {
  background:#eceef0;
  border:1px solid #dcdfe3;
  box-shadow:none;
  color:#8b9096;
  filter:none;
  cursor:not-allowed
}
#form_tabs_container.lp-calculator #step_1 #toStep_2.step_button:disabled:after {background:#8b9096}

/* ======================= Narrow phones (320px and up) ====================== */
/* The two method columns stay side by side; only the type scale relaxes. */
@media (max-width:389.98px) {
  html.lp-ref-draft #form_tabs_container.lp-calculator #lead-form-shell {padding:14px}
  #form_tabs_container.lp-calculator #nav_steps {gap:6px}
  #form_tabs_container.lp-calculator #nav_steps #step_1-tab.active {font-size:21px}
  #form_tabs_container.lp-calculator #nav_steps .nav-link.active {font-size:17px}
  #form_tabs_container.lp-calculator #nav_steps .nav-link.lp-back {
    padding:0 9px 0 7px;
    font-size:13.5px
  }
  #form_tabs_container.lp-calculator #step_2 #toStep_3.step_button,
  #form_tabs_container.lp-calculator #step_3 #toStep_4.step_button {font-size:18px;min-height:48px}
  #form_tabs_container.lp-calculator #step_1 #amount_1,
  /* Again no font-size: the narrow phone keeps the native adaptive steps. */
  #form_tabs_container.lp-calculator #step_1 #amount_2 {padding:0 9px}
  #form_tabs_container.lp-calculator #step_1 #finalRate {font-size:12px;gap:4px}
  #form_tabs_container.lp-calculator #step_1 .quote-methods-block .row.gx-3 {--bs-gutter-x:8px!important}
  #form_tabs_container.lp-calculator #step_1 .quote-methods-block .service-help-heading {font-size:13.5px!important}
  #form_tabs_container.lp-calculator #step_1 .quote-methods-block .pay_method_btn,
  #form_tabs_container.lp-calculator #step_1 .quote-methods-block .oper_type_btn {
    gap:6px;
    padding:6px 8px 6px 8px;
    font-size:13px
  }
  #form_tabs_container.lp-calculator #step_1 .quote-methods-block [data-lp-icon]:before {
    flex-basis:19px;
    width:19px;
    height:19px;
    -webkit-mask-size:19px 19px;
    mask-size:19px 19px
  }
  /* No room for the marker beside the label: it moves to the control corner. */
  #form_tabs_container.lp-calculator #step_1 .quote-methods-block .pay_method_btn.selected:after,
  #form_tabs_container.lp-calculator #step_1 .quote-methods-block .oper_type_btn.selected:after {
    top:4px;
    right:4px;
    width:14px;
    height:14px;
    margin-top:0
  }
  #form_tabs_container.lp-calculator #step_1 #toStep_2.step_button {font-size:19px;min-height:48px}
  /* 320–389px: «Применить» beside the field would be a two-line button in a
     ~90px column, so the native row stacks instead. Same two controls, same
     order, same handlers — only their width and the space between them. */
  #form_tabs_container.lp-calculator #step_1 #promocode_section > div {
    flex:0 0 100%;
    width:100%;
    max-width:100%
  }
  #form_tabs_container.lp-calculator #step_1 #promocode_section > div + div {margin-top:8px}
  #form_tabs_container.lp-calculator #step_1 #applyPromocode {min-height:46px}
  #form_tabs_container.lp-calculator #step_1 .promo-disclosure {padding:0 11px;font-size:13.5px}
}

/* ======================= Form dialogs: the card language ==================== */
/* The bank / district choosers, the error dialog and the two method help
   dialogs are appended to <body>, outside #form_tabs_container, so they are
   scoped here with the draft root html.lp-ref-draft — which only
   landing_preview.php sets — plus the .xchanger-form-dialog marker that
   js/form_dialogs.js puts on exactly those dialogs, or their exact ids. No
   generic .modal rule is written, so no other dialog on any other page can be
   reached by this file.
   Presentation only: the radio inputs, their names, values, ids, labels, the
   custom-bank input, the «Далее»/dismiss buttons, the body-append, the focus
   trap, focus return, Escape and the custom-clear key activation all remain
   the shared markup and js/form_dialogs.js. In particular nothing below
   touches `display` on .custom_bank_clear, which the shared stylesheet toggles
   from the input's :placeholder-shown state. */
html.lp-ref-draft .xchanger-form-dialog {font-family:var(--lp-sans,Arial,sans-serif);color:var(--lp-ink,#15140f)}
html.lp-ref-draft .xchanger-form-dialog .modal-content {
  border:0;
  border-radius:20px;
  box-shadow:0 18px 50px rgba(22,24,20,.22),0 2px 6px rgba(22,24,20,.06)
}
/* Same hairline-and-gold-segment separation as the card heading. */
html.lp-ref-draft .xchanger-form-dialog .modal-header {
  padding:16px 16px 12px 18px;
  background-image:linear-gradient(90deg,var(--lp-gold-deep,#e8bf12) 0 38px,rgba(232,191,18,0) 38px);
  background-repeat:no-repeat;
  background-position:18px bottom;
  background-size:calc(100% - 36px) 2px;
  border-bottom:1px solid #ecedf0
}
html.lp-ref-draft .xchanger-form-dialog .modal-title {
  color:var(--lp-ink,#15140f);
  font-size:19px;
  font-weight:800;
  letter-spacing:-.01em
}
html.lp-ref-draft .xchanger-form-dialog .form-dialog-symbol {border-radius:13px}
/* «Крестики»: the dismiss control gets the same quiet square as the share
   control, instead of a bare glyph. */
html.lp-ref-draft .xchanger-form-dialog .btn-close {
  background-color:#f5f6f8;
  border:1px solid #e7e9ec;
  border-radius:13px;
  opacity:1
}
@media (hover:hover) and (pointer:fine) {
  html.lp-ref-draft .xchanger-form-dialog .btn-close:hover {background-color:#eceef1}
}
html.lp-ref-draft .xchanger-form-dialog .modal-body {padding-top:16px}
html.lp-ref-draft .xchanger-form-dialog .form-label {
  margin-bottom:6px!important;
  color:#5c6066;
  font-size:13.5px;
  font-weight:600!important
}

/* ---- Bank and district cards ---- */
html.lp-ref-draft :is(#selectBankRubModal,#selectBankThbModal).xchanger-form-dialog .row.g-2 {
  --bs-gutter-x:10px;
  --bs-gutter-y:10px
}
html.lp-ref-draft :is(#selectBankRubModal,#selectBankThbModal,#selectDeliveryDistrictModal).xchanger-form-dialog .item_label {
  position:relative;
  background:#fff;
  border:1px solid #dcdfe3!important;
  border-radius:12px;
  box-shadow:none;
  color:var(--lp-ink,#15140f)!important;
  font-size:14px;
  font-weight:500;
  transition:background .2s,border-color .2s
}
@media (prefers-reduced-motion:reduce) {
  html.lp-ref-draft :is(#selectBankRubModal,#selectBankThbModal,#selectDeliveryDistrictModal).xchanger-form-dialog .item_label {transition:none}
}
@media (hover:hover) and (pointer:fine) {
  html.lp-ref-draft :is(#selectBankRubModal,#selectBankThbModal,#selectDeliveryDistrictModal).xchanger-form-dialog .btn-check:not(:checked) + .item_label:hover {
    background:#fafbfc;
    border-color:#b9bec4!important
  }
}
/* The bank name gets the whole card width: no horizontal room is reserved
   beside it, because the chosen marker lives in the top-right corner of the
   logo band, above the name, and the two can never share a line. Reserving
   that room next to the name is what made «Bangkok Bank» break mid-word. */
html.lp-ref-draft :is(#selectBankRubModal,#selectBankThbModal).xchanger-form-dialog .item_label {
  min-height:68px;
  padding:10px 8px!important
}
/* Between 361 and 575px the shared stylesheet turns the card into a 24px logo
   with a narrow name column beside it, which is the layout that ran out of
   width. The card keeps the native column shape it already has on desktop and
   below 361px instead: logo centred on top, full width for the name under it.
   Same label, same radio, same marker, same type sizes. */
@media (max-width:575.98px) {
  html.lp-ref-draft :is(#selectBankRubModal,#selectBankThbModal).xchanger-form-dialog .item_label {
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    gap:6px;
    min-height:84px;
    text-align:center
  }
  html.lp-ref-draft :is(#selectBankRubModal,#selectBankThbModal).xchanger-form-dialog .bankModal_img {
    flex:0 0 auto;
    margin:0 auto
  }
  html.lp-ref-draft :is(#selectBankRubModal,#selectBankThbModal).xchanger-form-dialog .bankModal_name {
    flex:0 1 auto;
    width:100%;
    min-width:0
  }
}
html.lp-ref-draft .xchanger-form-dialog .bankModal_name {
  color:var(--lp-ink,#15140f);
  font-size:13.5px;
  line-height:1.25;
  white-space:normal;
  /* break-word, not anywhere: the space in a two-word name is taken before any
     point inside a word is, while a single unbreakable name still cannot
     overflow its card. */
  overflow-wrap:break-word
}
/* Chosen bank / district: pale gold fill, gold frame, heavier label and a
   check mark — three cues, so colour alone never carries the state. The
   shared 4px flat-yellow frame of the legacy page is replaced by an inset
   ring, which cannot move the card's content box. */
html.lp-ref-draft :is(#selectBankRubModal,#selectBankThbModal,#selectDeliveryDistrictModal).xchanger-form-dialog .btn-check:checked + .item_label {
  background:#fff7d1!important;
  border:1px solid var(--lp-gold-deep,#e8bf12)!important;
  box-shadow:inset 0 0 0 2px var(--lp-gold,#ffdd2e)!important;
  color:var(--lp-ink,#15140f)!important;
  font-weight:700!important
}
html.lp-ref-draft :is(#selectBankRubModal,#selectBankThbModal,#selectDeliveryDistrictModal).xchanger-form-dialog .btn-check:checked + .item_label:after {
  content:'';
  position:absolute;
  top:6px;
  right:6px;
  width:17px;
  height:17px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='9' fill='%23f5c518'/%3E%3Cpath d='M5.8 10.4l2.9 2.9 5.6-6' fill='none' stroke='%23ffffff' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain
}
/* In forced colours the fill and the inset ring are dropped by the engine, so
   the chosen card keeps a real outline of its own. */
@media (forced-colors:active) {
  html.lp-ref-draft :is(#selectBankRubModal,#selectBankThbModal,#selectDeliveryDistrictModal).xchanger-form-dialog .btn-check:checked + .item_label {
    outline:2px solid CanvasText;
    outline-offset:-4px
  }
}
html.lp-ref-draft #selectDeliveryDistrictModal.xchanger-form-dialog .item_label {
  min-height:48px;
  padding:12px 34px 12px 14px!important
}

/* ---- «Или другой банк» field and its clear control ---- */
html.lp-ref-draft .xchanger-form-dialog .custom_bank_wrapper {margin-bottom:14px}
html.lp-ref-draft .xchanger-form-dialog .form-control {
  min-height:48px;
  background:#fff;
  border:1px solid #dcdfe3;
  border-radius:11px;
  box-shadow:none;
  color:var(--lp-ink,#15140f);
  font-size:16px
}
html.lp-ref-draft .xchanger-form-dialog .form-control::placeholder {color:#9aa0a6}
html.lp-ref-draft .xchanger-form-dialog .form-control:focus {
  background:#fff;
  border-color:var(--lp-gold-deep,#e8bf12);
  box-shadow:0 0 0 3px rgba(255,221,46,.35)
}
html.lp-ref-draft .xchanger-form-dialog .custom_bank_clear {
  top:2px;
  right:2px;
  width:44px;
  height:44px;
  line-height:44px;
  color:#68717a;
  border-radius:10px;
  font-size:22px
}
@media (hover:hover) and (pointer:fine) {
  html.lp-ref-draft .xchanger-form-dialog .custom_bank_clear:hover {background:#f1f2f4;color:#15140f}
}
html.lp-ref-draft .xchanger-form-dialog .custom_bank_clear:focus-visible {
  outline:2px solid #15140f;
  outline-offset:2px
}

/* ---- The dialog's own primary button, same CTA as the card ---- */
html.lp-ref-draft .xchanger-form-dialog .step_button {
  width:100%;
  min-height:50px;
  margin-top:4px;
  padding:10px 18px!important;
  background:linear-gradient(180deg,#ffe766 0,#ffd91f 58%,#fdcf0b 100%);
  border:0;
  border-radius:14px;
  box-shadow:0 8px 20px rgba(228,186,36,.3);
  color:#14130e;
  font-size:18px;
  font-weight:800;
  letter-spacing:-.01em
}
@media (hover:hover) and (pointer:fine) {
  html.lp-ref-draft .xchanger-form-dialog .step_button:hover {filter:brightness(1.03)}
}
html.lp-ref-draft .xchanger-form-dialog .step_button:focus-visible {outline:2px solid #15140f;outline-offset:3px}

@media (max-width:389.98px) {
  html.lp-ref-draft .xchanger-form-dialog .modal-header {padding:14px 14px 11px 16px}
  html.lp-ref-draft .xchanger-form-dialog .modal-title {font-size:18px}
  html.lp-ref-draft :is(#selectBankRubModal,#selectBankThbModal).xchanger-form-dialog .row.g-2 {
    --bs-gutter-x:8px;
    --bs-gutter-y:8px
  }
  /* 320px: the narrowest card is ~104px of inner width, so the side padding
     drops to 6px and all of it stays available to the name. */
  html.lp-ref-draft :is(#selectBankRubModal,#selectBankThbModal).xchanger-form-dialog .item_label {
    gap:5px;
    min-height:80px;
    padding:9px 6px!important
  }
  html.lp-ref-draft .xchanger-form-dialog .bankModal_name {font-size:13px}
  html.lp-ref-draft .xchanger-form-dialog .step_button {font-size:17px;min-height:48px}
}
/* 320–360px: even the single-word «Россельхозбанк» cannot fit a ~90px column
   at any reasonable size without a mid-word break, and overflow-wrap:break-word
   then strands one orphan letter on its own line. Below 361px the two-column
   grid gives way to one full-width row per bank, with the logo and the name
   side by side instead of stacked — the unbreakable name gets the whole card
   width (minus the corner-marker margin) on a single line. Same markup, same
   radios/ids/handlers, same checked marker. */
@media (max-width:360px) {
  html.lp-ref-draft :is(#selectBankRubModal,#selectBankThbModal).xchanger-form-dialog .col-4 {
    flex:0 0 100%;
    width:100%;
    max-width:100%
  }
  html.lp-ref-draft :is(#selectBankRubModal,#selectBankThbModal).xchanger-form-dialog .item_label {
    flex-direction:row;
    align-items:center;
    justify-content:flex-start;
    gap:10px;
    min-height:56px;
    padding:10px 32px 10px 10px!important;
    text-align:left
  }
  html.lp-ref-draft :is(#selectBankRubModal,#selectBankThbModal).xchanger-form-dialog .bankModal_img {
    flex:0 0 32px;
    width:32px;
    height:32px;
    margin:0
  }
  html.lp-ref-draft :is(#selectBankRubModal,#selectBankThbModal).xchanger-form-dialog .bankModal_name {
    flex:1 1 auto;
    width:auto;
    min-width:0;
    text-align:left
  }
}