/* ==========================================================================
   THE DESIGNERS HUB — Secure checkout
   Source of truth: Figma frame "computer payment page" #2129:3607
   (1440 x 1436). Built as checkout.html because that is what the cart's
   "Proceed to checkout" points at and what this frame's own header calls it.

   Like the cart frame, this one draws its own chrome: a MINIMAL header
   (#2129:3613 — logo left, "Secure checkout", security note) and the SLIM
   footer. Both are partials, so every coordinate below is the Figma value
   MINUS 76 and main is 1216 - 76 = 1140 tall.

   Line steps (Inter auto line-height is 1.2102em; h2 carries 1.06em):
     panel head  Inter 700 22, 1.06em -> 23px   (Order Summary)
     panel head  Inter 700 22         -> 27px   (Payment Details)
     price/total Inter 700 18         -> 22px
     item name   Inter 600 16 UPPER   -> 19px
     pay label   Inter 700 16         -> 19px
     row/option  Inter 400/700 14     -> 17px
     meta        Inter 400/700 13     -> 16px
     field label Inter 400 12         -> 15px
     placeholder Inter 400 11         -> 13px
   ========================================================================== */

.page-checkout main { position: relative; }

.co {
  --muted:    #666666;
  --ink-900:  #1A1A1A;
  --field:    #D5D5D5;   /* input borders */
  --hairline: #E0E0E0;
  --ph:       #B4B4B4;   /* input placeholders */
  --ph-dark:  #A3A3A3;   /* promo placeholder on the dark panel */
  --note:     #B2B2B2;   /* the accepted-cards line */
  --grey:     #999999;
}

/* A field flagged as missing/invalid on Pay — a clear outline so it can't be
   missed (native validation popups are invisible under the canvas zoom). */
.co-invalid { outline: 2px solid #B3261E !important; outline-offset: 2px; border-radius: 3px; }

/* --------------------------------------------------------------------------
   Flow fallback (below 1200px) — unverified reflow, desktop is the port.
   -------------------------------------------------------------------------- */
@media (max-width: 1199px) {
  .co section { position: relative; padding: var(--space-24) var(--page-pad-mob); }
  .co img { max-width: 100%; height: auto; }
  .co-summary__panel { background: var(--color-surface-dark); padding: var(--space-16); }
  .co-pay__panel { display: none; }
  .co-field { display: block; width: 100%; margin-bottom: var(--space-16); }
}

/* --- shared type -------------------------------------------------------- */
.co h1, .co h2 { font-family: var(--font-heading); font-weight: var(--fw-bold); }

.co-input {
  background: var(--white);
  border: var(--stroke-1) solid var(--field);
  border-radius: var(--radius-2);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 11px;
  line-height: 13px;
}

.co-input::placeholder { color: var(--ph); opacity: 1; }

.co-label { color: var(--muted); font-size: 12px; line-height: 15px; }

/* radio / checkbox drawn in CSS rather than exported, so they stay crisp */
.co-radio, .co-check {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  padding: 0;
  background: var(--white);
  border: 1.5px solid #CCCCCC;
  cursor: pointer;
}

.co-radio { border-radius: 50%; }

.co-radio:checked {
  background: var(--ink-900);
  border: var(--stroke-1) solid var(--ink);
  box-shadow: inset 0 0 0 5px var(--ink-900), inset 0 0 0 8px var(--white);
}

.co-check:checked {
  background-color: var(--ink-900);
  border-color: var(--ink-900);
  /* white tick, drawn in CSS so the checked state reads as a checkmark, not a
     solid black box */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M4 8.5l2.9 2.9L12 5.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 12px;
}

.co-radio:focus-visible, .co-check:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Reset, so it applies at every width: with the native theme left on, Chrome
   paints its own buttonface grey over a transparent background. Computed
   styles still report the background as transparent, so this is only visible
   in a render — it has to be caught by diffing, not by inspecting. */
.co-promo__apply, .co-pay-btn {
  -webkit-appearance: none;
  appearance: none;
}

.co-pay-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--gold);
  border: 0;
  border-radius: var(--radius-2);
  color: var(--white);
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--fs-body);
  line-height: 19px;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease);
}

.co-pay-btn:hover, .co-pay-btn:focus-visible { background: var(--gold-deep); }

/* ==========================================================================
   DESKTOP — the 1440 canvas, literal Figma coordinates minus 76
   ========================================================================== */
@media (min-width: 1200px) {

  .page-checkout main {
    width: var(--frame-desktop);
    height: 1096px;
    margin-inline: auto;
  }

  .co section { position: absolute; left: 0; width: var(--frame-desktop); padding: 0; }

  /* The form's fields sit a level deeper than everything else, so they have to
     be named explicitly — a `section > *` rule alone leaves them static and
     their Figma coordinates are silently ignored. */
  .co section > *,
  .co section > form > * { position: absolute; }

  /* ...and the form itself must NOT become their containing block, since those
     coordinates are section-relative. Static keeps it out of the way; its
     children are all absolute so it contributes no height. */
  .co section > form { position: static; }
  .page-checkout main img { max-width: none; object-fit: fill; }

  .co-summary__title, .co-pay__title, .co-row, .co-label,
  .co-split, .co-split > *, .co-agree > * { white-space: nowrap; }

  /* ================= LEFT — order summary (dark panel) ================= */
  /* The order summary is shorter than the payment column, so the dark panel is
     sized to its own content (ending just below the refund note) instead of
     stretching to the full payment-column height and leaving a large empty
     dark band. */
  .co-summary__panel { left: 80px; top: 52px; width: 568px; height: 700px; background: var(--color-surface-dark); }

  .co-summary__title {
    left: 145px; top: 82px; width: 198px;
    color: var(--white);
    font-size: 22px;
    line-height: 23px;
    text-transform: uppercase;
  }

  .co-item { left: 145px; top: 129px; width: 436px; height: 166px; background: var(--white); border-radius: var(--radius-2); }

  /* same node and crop as the cart line item (2px stroke outside 129x155) */
  .co-item__img { left: 148px; top: 133px; width: 133px; height: 159px; }

  .co-item__name {
    left: 307px; top: 148px; width: 198px;
    color: var(--ink-900);
    font-family: var(--font-heading);
    font-weight: var(--fw-semi);
    font-size: var(--fs-body);
    line-height: 19px;
    text-transform: uppercase;
  }

  .co-item__meta { left: 307px; color: var(--muted); font-size: 13px; line-height: 16px; white-space: nowrap; }
  .co-item__meta--1 { top: 191px; width: 134px; }
  .co-item__meta--2 { top: 213px; width: 140px; }

  /* the booked slot — Figma shows a placeholder, not a real date */
  .co-item__date { left: 307px; top: 237px; width: 189px; color: var(--grey); font-size: 13px; line-height: 16px; }
  .co-item__date span { color: var(--gold); }

  .co-item__price {
    left: 307px; top: 258px; width: 92px;
    white-space: nowrap; /* keep "2,500 AED" etc. on one line — a wrapped price was clipped by the card */
    color: var(--ink-900);
    font-weight: var(--fw-bold);
    font-size: var(--fs-lead);
    line-height: 22px;
  }

  .co-promo__label {
    left: 153px; top: 322px; width: 84px;
    color: var(--white);
    font-weight: var(--fw-bold);
    font-size: 14px;
    line-height: 17px;
  }

  .co-promo__input {
    left: 144px; top: 354px;
    width: 312px; height: 48px;
    padding: 0 0 0 9px;
    border: 0;
    font-size: 13px;
    line-height: 16px;
  }

  .co-promo__input::placeholder { color: var(--ph-dark); }

  /* outlined gold, unlike the cart's solid ink Apply */
  /* appearance:none is load-bearing — with the native theme still on, Chrome
     paints its own buttonface grey and ignores the transparent background,
     which is invisible in computed styles but obvious in a render. */
  .co-promo__apply {
    left: 469px; top: 354px;
    width: 112px; height: 48px;
    -webkit-appearance: none;
    appearance: none;
    background: none;
    border: var(--stroke-1) solid var(--gold);
    border-radius: var(--radius-2);
    color: var(--white);
    font-family: var(--font-body);
    font-weight: var(--fw-bold);
    font-size: 13px;
    line-height: 16px;
    cursor: pointer;
    transition: background-color var(--dur) var(--ease);
  }

  .co-promo__apply:hover, .co-promo__apply:focus-visible { background: var(--gold); }

  .co-rule { left: 145px; width: 436px; height: 1px; background: var(--hairline); }
  .co-rule--1 { top: 419.5px; }
  .co-rule--2 { top: 495.5px; }

  .co-row { color: var(--white); font-size: 14px; line-height: 17px; }
  .co-row--value { text-align: right; }

  .co-row--subtotal  { left: 153px; top: 436px; width: 56px; }
  .co-row--subtotalv { left: 505px; top: 436px; width: 68px; }
  .co-row--discount  { left: 153px; top: 462px; width: 59px; }
  .co-row--discountv { left: 559px; top: 462px; width: 14px; }

  .co-total {
    left: 153px; top: 508px; width: 44px;
    color: var(--gold);
    font-weight: var(--fw-bold);
    font-size: var(--fs-lead);
    line-height: 22px;
  }

  .co-total__value {
    left: 481px; top: 508px; width: 92px;
    white-space: nowrap; /* keep the total on one line */
    color: var(--gold);
    font-weight: var(--fw-bold);
    font-size: var(--fs-lead);
    line-height: 22px;
    text-align: right;
  }

  /* the two white strips under the totals */
  .co-strip { left: 144px; width: 437px; height: 48px; background: var(--white); border-radius: var(--radius-2); }
  .co-strip--split  { top: 542px; }
  .co-strip--refund { top: 606px; }

  .co-split__lead { left: 153px; top: 558px; width: 71px;  color: var(--muted);   font-size: 13px; line-height: 16px; }
  .co-split__plan { left: 288px; top: 558px; width: 149px; color: var(--ink-900); font-weight: var(--fw-bold); font-size: 13px; line-height: 16px; }
  .co-split__with { left: 485px; top: 558px; width: 27px;  color: var(--muted);   font-size: 13px; line-height: 16px; }
  .co-split__logo { left: 517px; top: 557px; width: 49px;  height: 19px; }
  /* Russian "через" is wider than the English "with" (37px vs 27px), so it ran
     under the Tabby logo. Let its box hug the text and shift the logo clear —
     English is untouched (this is scoped to RU). */
  html[data-lang="ru"] .co-split__with { width: auto; }
  html[data-lang="ru"] .co-split__logo { left: 528px; }

  .co-refund { left: 153px; top: 621px; width: 411px; color: var(--muted); font-size: 13px; line-height: 16px; }
  .co-refund strong { font-weight: var(--fw-bold); }

  /* ================= RIGHT — payment details ================= */
  /* #2129:3622 — no fill, 5px ink stroke drawn inside */
  .co-pay__panel {
    left: 648px; top: 52px;
    width: 712px; height: 1032px;
    border: 5px solid var(--ink);
  }

  .co-pay__title {
    left: 729px; top: 79px; width: 175px;
    color: var(--color-text);
    font-size: 22px;
    line-height: 27px;
  }

  .co-legend {
    left: 729px;
    color: var(--color-text);
    font-weight: var(--fw-bold);
    font-size: 14px;
    line-height: 17px;
  }

  .co-legend--contact { top: 130px; width: 138px; }
  .co-legend--method  { top: 478px; width: 117px; color: var(--ink-900); }

  .co-label { left: 729px; }
  .co-label--name    { top: 162px; width: 66px; }
  .co-label--email   { top: 238px; width: 40px; }
  .co-label--phone   { top: 314px; width: 36px; }
  .co-label--country { top: 390px; width: 55px; }

  .co-field { left: 729px; width: 560px; height: 44px; padding: 0 0 0 16px; }
  .co-field--name    { top: 182px; }
  .co-field--email   { top: 258px; }
  .co-field--phone   { top: 334px; }
  .co-field--country { top: 410px; padding-right: 40px; }

  /* the select's chevron sits at its own Figma x */
  .co-country__caret { left: 1269px; top: 424px; width: 15px; color: var(--grey); font-size: 14px; line-height: 17px; }

  /* --- payment method options --- */
  .co-option {
    left: 729px; width: 560px; height: 56px;
    background: var(--white);
    border: var(--stroke-1) solid var(--field);
    border-radius: var(--radius-2);
  }

  .co-option--card   { top: 510px; border-color: var(--ink); }
  .co-option--wallet { top: 736px; }
  .co-option--tabby  { top: 804px; }

  .co-radio { position: absolute; left: 745px; width: 16px; height: 16px; }
  .co-radio--card   { top: 530px; }
  .co-radio--wallet { top: 756px; }
  .co-radio--tabby  { top: 824px; }

  .co-option__label { position: absolute; left: 773px; font-size: 14px; line-height: 17px; white-space: nowrap; }
  .co-option__label--card   { top: 530px; width: 128px; color: var(--ink-900); font-weight: var(--fw-bold); }
  .co-option__label--wallet { top: 756px; width: 200px; color: var(--muted); }
  .co-option__label--tabby  { top: 824px; width: 227px; color: var(--muted); }

  .co-tabby__mo { left: 1198px; top: 824px; width: 71px; color: var(--color-text); font-size: 12px; line-height: 15px; text-align: right; white-space: nowrap; }

  /* card scheme logos, each at its own Figma box */
  .co-scheme { position: absolute; }
  .co-scheme--mc   { left: 1172px;    top: 530.08px; width: 20.37px; height: 15.82px; }
  .co-scheme--visa { left: 1201.99px; top: 532.34px; width: 36.22px; height: 11.74px; }
  .co-scheme--amex { left: 1247.84px; top: 529.51px; width: 27.16px; height: 16.98px; }

  /* --- card fields --- */
  .co-label--cardno { left: 745px; top: 580px; width: 76px; }
  .co-label--expiry { left: 745px; top: 650px; width: 66px; }
  .co-label--cvc    { left: 1020px; top: 650px; width: 26px; }

  .co-field--cardno { left: 744px;  top: 600px; width: 529px; height: 40px; }
  .co-field--expiry { left: 744px;  top: 670px; width: 253px; height: 40px; }
  .co-field--cvc    { left: 1020px; top: 670px; width: 253px; height: 40px; }

  /* --- consent + pay --- */
  .co-check { position: absolute; left: 729px; top: 888px; width: 18px; height: 18px; }

  .co-agree > * { position: absolute; top: 890px; font-size: 12px; line-height: 15px; }
  .co-agree__lead { left: 757px; width: 76px;  color: var(--muted); }
  .co-agree__and  { left: 959px; width: 22px;  color: var(--muted); }
  .co-agree__terms   { left: 841px; width: 111px; color: var(--ink-900); text-decoration: underline; }
  .co-agree__privacy { left: 993px; width: 79px;  color: var(--ink-900); text-decoration: underline; }

  .co-pay-btn { left: 729px; top: 936px; width: 560px; height: 56px; }

  /* #2129:3689 — the accepted-cards line. The gold sentence above it in Figma
     (#2129:3688) is an instruction to place Stripe's own badges, not copy, so
     it is not rendered — see the note in checkout.html. */
  /* one line in Figma at 300px; the browser measures it wider */
  .co-accepted {
    left: 858.5px; top: 1037px; width: 300px;
    color: var(--note);
    font-size: 11px;
    line-height: 13px;
    text-align: center;
    white-space: nowrap;
  }
}

/* ==========================================================================
   TABLET — literal Figma geometry, 768 canvas
   Source of truth: frame "tablet payment page" #2129:7687 (768 x 2056).

   THE FRAME NAME LIES: this is the CHECKOUT page. (The frame actually named
   "страница оплаты планш", #2129:7870, is thank-you.)

   The frame draws its own chrome. Footer #2129:7695 sits at y:1836, so
   `main` = 1836 - 81 = **1755** and every coordinate is THE FIGMA VALUE MINUS
   81. Verified: the footer lands at 1836.

   The frame's own header #2129:7688 is INSET — (40,8) 688x81, not full bleed —
   where the real `header-checkout.html` spans the full width at 0..81. Content
   is taken against the REAL header, which is what makes the footer land on
   1836; a header-band diff is expected and is the same accepted mismatch the
   1440 build records.

   `section > *` DOES NOT REACH THE FORM FIELDS — they sit inside <form
   id="coForm">, a level deeper, and the four consent parts are deeper still
   inside `.co-agree`. All three levels are named below, and the form and
   `.co-agree` are kept `static` so neither becomes a containing block.

   STROKE ALIGNMENT, batched as node renders: everything is INSIDE except
   **#2129:7720, the item photo, OUTSIDE 2** (129x155 declared, 133x159 drawn)
   — the same box the cart and the 390 frame use.

   NO NEW BITMAPS: the item photo, the Tabby logo and the three card-scheme
   logos are the crops the 1440 build already exports.
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1199px) {

  .page-checkout main.co {
    position: relative;
    width: var(--frame-tablet);
    max-width: none;
    height: 1755px;              /* footer at 1836 - 81 header */
    margin-inline: auto;
    padding: 0;
  }

  .page-checkout .co-checkout {
    position: absolute;
    left: 0;
    top: 0;
    width: var(--frame-tablet);
    height: 1755px;
    margin: 0;
    padding: 0;
  }

  /* all three nesting levels, and the two wrappers kept static */
  .page-checkout .co-checkout > *,
  .page-checkout .co-checkout > form > *,
  .page-checkout .co-checkout > form > .co-agree > * {
    position: absolute;
    margin: 0;
  }

  .page-checkout #coForm,
  .page-checkout .co-agree { position: static; }

  /* ======================================================================
     ORDER SUMMARY — dark panel #2129:7711 at Figma 107 -> main 26
     ====================================================================== */
  .page-checkout .co-summary__panel {
    display: block;
    left: 40px;
    top: 26px;
    width: 688px;
    height: 658px;
    background: var(--color-surface-dark);
  }

  .page-checkout .co-summary__title {
    left: 165px;
    top: 56px;
    width: 198px;
    font-size: 22px;
    font-weight: var(--fw-bold);
    line-height: 23px;           /* 22 * 1.06 = 23.32 -> 23 */
    text-transform: uppercase;
    color: var(--white);
  }

  .page-checkout .co-item {
    display: block;
    left: 165px;
    top: 103px;
    width: 436px;
    height: 166px;
    background: var(--white);
    border-radius: 2px;
  }

  /* OUTSIDE 2 — written at its 133x159 outer box, 2px back on each axis */
  .page-checkout .co-item__img {
    left: 168px;
    top: 107px;
    width: 133px;
    height: 159px;
    max-width: none;
    object-fit: fill;
    border: 2px solid var(--white);
  }

  .page-checkout .co-item__name {
    left: 327px;
    top: 122px;
    width: 198px;
    font-size: 16px;
    font-weight: var(--fw-semi);
    line-height: 19px;           /* box 38 = 2 lines */
    text-transform: uppercase;
    color: var(--grey-900);
  }

  .page-checkout .co-item__meta {
    left: 327px;
    font-size: 13px;
    font-weight: var(--fw-reg);
    line-height: 16px;
    color: #666666;
    white-space: nowrap;
  }

  .page-checkout .co-item__meta--1 { top: 165px; width: 134px; }
  .page-checkout .co-item__meta--2 { top: 187px; width: 140px; }

  /* the bracketed half is gold — a PLACEHOLDER waiting on the booking
     integration, not copy */
  .page-checkout .co-item__date {
    left: 327px;
    top: 211px;
    width: 189px;
    font-size: 13px;
    font-weight: var(--fw-reg);
    line-height: 16px;
    color: #999999;
  }

  .page-checkout .co-item__date span { color: var(--gold); }

  .page-checkout .co-item__price {
    left: 327px;
    top: 232px;
    width: 92px;
    white-space: nowrap;
    font-size: 18px;
    font-weight: var(--fw-bold);
    line-height: 22px;
    color: var(--grey-900);
  }

  .page-checkout .co-promo__label {
    left: 173px;
    top: 296px;
    width: 84px;
    font-size: 14px;
    font-weight: var(--fw-bold);
    line-height: 17px;
    color: var(--white);
  }

  .page-checkout .co-promo__input {
    left: 164px;
    top: 328px;
    width: 312px;
    height: 48px;
    padding: 0 9px;
    background: var(--white);
    border: 0;
    border-radius: 2px;
    font-family: var(--font-body);
    font-size: 13px;
    line-height: 16px;
    color: var(--grey-900);
  }

  .page-checkout .co-promo__input::placeholder { color: #A3A3A3; }

  /* #2129:7723 — gold 1px stroke, NO fill */
  .page-checkout .co-promo__apply {
    left: 489px;
    top: 328px;
    width: 112px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    padding: 0;
    background: none;
    border: var(--stroke-1) solid var(--gold);
    border-radius: 2px;
    -webkit-appearance: none;
    appearance: none;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: var(--fw-bold);
    line-height: 16px;
    letter-spacing: normal;
    text-transform: none;
    color: var(--white);
    cursor: pointer;
  }

  .page-checkout .co-rule {
    display: block;
    left: 165px;
    width: 436px;
    height: 1px;
    background: #E0E0E0;
  }

  .page-checkout .co-rule--1 { top: 394px; }
  .page-checkout .co-rule--2 { top: 470px; }

  .page-checkout .co-row {
    font-size: 14px;
    font-weight: var(--fw-reg);
    line-height: 17px;
    color: var(--white);
  }

  .page-checkout .co-row--value { text-align: right; }

  .page-checkout .co-row--subtotal  { left: 173px; top: 410px; width: 56px; }
  .page-checkout .co-row--subtotalv { left: 525px; top: 410px; width: 68px; }
  .page-checkout .co-row--discount  { left: 173px; top: 436px; width: 59px; }
  .page-checkout .co-row--discountv { left: 579px; top: 436px; width: 14px; }

  .page-checkout .co-total,
  .page-checkout .co-total__value {
    top: 482px;
    font-size: 18px;
    font-weight: var(--fw-bold);
    line-height: 22px;
    color: var(--gold);
  }

  .page-checkout .co-total        { left: 173px; width: 44px; }
  .page-checkout .co-total__value { left: 501px; width: 92px; text-align: right; white-space: nowrap; }

  .page-checkout .co-strip {
    display: block;
    left: 164px;
    width: 437px;
    height: 48px;
    background: var(--white);
    border-radius: 2px;
  }

  .page-checkout .co-strip--split  { top: 516px; }
  .page-checkout .co-strip--refund { top: 580px; }

  .page-checkout .co-split {
    top: 532px;
    font-size: 13px;
    line-height: 16px;
    white-space: nowrap;
  }

  .page-checkout .co-split__lead { left: 173px; width: 71px;  font-weight: var(--fw-reg); color: #666666; }
  .page-checkout .co-split__plan { left: 308px; width: 149px; font-weight: var(--fw-bold); color: var(--grey-900); }
  .page-checkout .co-split__with { left: 505px; width: 27px;  font-weight: var(--fw-reg); color: #666666; }

  .page-checkout .co-split__logo { left: 537px; top: 531px; width: 49px; height: 19px; max-width: none; }
  /* RU "через" wider than EN "with" — hug the word, shift the logo clear
     (stays within the strip that ends at 601; English untouched). */
  html[data-lang="ru"] .page-checkout .co-split__with { width: auto; }
  html[data-lang="ru"] .page-checkout .co-split__logo { left: 548px; }

  /* the tail of this line is BOLD in the file */
  .page-checkout .co-refund {
    left: 173px;
    top: 595px;
    width: 411px;
    font-size: 13px;
    font-weight: var(--fw-reg);
    line-height: 16px;
    color: #666666;
    white-space: nowrap;
  }

  .page-checkout .co-refund strong { font-weight: var(--fw-bold); }

  /* ======================================================================
     PAYMENT DETAILS — card #2129:7745 at Figma 783 -> main 702.
     712x1032 with a 5px INSIDE stroke and NO fill.
     ====================================================================== */
  .page-checkout .co-pay__panel {
    display: block;
    left: 28px;
    top: 702px;
    width: 712px;
    height: 1032px;
    background: none;
    border: 5px solid var(--color-surface-dark);
  }

  .page-checkout .co-pay__title {
    left: 109px;
    top: 729px;
    width: 175px;
    font-size: 22px;
    font-weight: var(--fw-bold);
    line-height: 27px;
    color: var(--color-surface-dark);
  }

  .page-checkout .co-legend {
    left: 109px;
    font-size: 14px;
    font-weight: var(--fw-bold);
    line-height: 17px;
    color: var(--color-surface-dark);
  }

  .page-checkout .co-legend--contact { top: 780px;  width: 138px; }
  .page-checkout .co-legend--method  { top: 1128px; width: 117px; }

  .page-checkout .co-label {
    font-size: 12px;
    font-weight: var(--fw-reg);
    line-height: 15px;
    color: #666666;
  }

  .page-checkout .co-label--name    { left: 109px; top: 812px;  width: 66px; }
  .page-checkout .co-label--email   { left: 109px; top: 888px;  width: 40px; }
  .page-checkout .co-label--phone   { left: 109px; top: 964px;  width: 36px; }
  .page-checkout .co-label--country { left: 109px; top: 1040px; width: 55px; }
  .page-checkout .co-label--cardno  { left: 125px; top: 1230px; width: 76px; }
  .page-checkout .co-label--expiry  { left: 125px; top: 1300px; width: 66px; }
  .page-checkout .co-label--cvc     { left: 400px; top: 1300px; width: 26px; }

  .page-checkout .co-field {
    background: var(--white);
    border: var(--stroke-1) solid #D5D5D5;
    border-radius: 2px;
    font-family: var(--font-body);
    color: var(--grey-900);
  }

  /* the four contact fields are 560x44 with their placeholder 16px in */
  .page-checkout .co-field--name,
  .page-checkout .co-field--email,
  .page-checkout .co-field--phone,
  .page-checkout .co-field--country {
    left: 109px;
    width: 560px;
    height: 44px;
    padding: 0 16px;
    font-size: 11px;
    line-height: 13px;
  }

  .page-checkout .co-field--name    { top: 832px;  }
  .page-checkout .co-field--email   { top: 908px;  }
  .page-checkout .co-field--phone   { top: 984px;  }
  .page-checkout .co-field--country { top: 1060px; }

  /* #2129:7753-7755 are LOWERCASE in the file */
  .page-checkout .co-field::placeholder { color: #B4B4B4; text-transform: lowercase; }

  .page-checkout .co-country__caret {
    left: 649px;
    top: 1074px;
    width: 15px;
    font-size: 14px;
    line-height: 17px;
    color: #999999;
  }

  /* the three payment-method rows */
  .page-checkout .co-option {
    display: block;
    left: 109px;
    width: 560px;
    height: 56px;
    background: var(--white);
    border-radius: 2px;
  }

  /* the selected row carries a DARK stroke; the other two are #D5D5D5 */
  .page-checkout .co-option--card   { top: 1160px; border: var(--stroke-1) solid var(--color-surface-dark); }
  .page-checkout .co-option--wallet { top: 1386px; border: var(--stroke-1) solid #D5D5D5; }
  .page-checkout .co-option--tabby  { top: 1454px; border: var(--stroke-1) solid #D5D5D5; }

  .page-checkout .co-radio {
    left: 125px;
    width: 16px;
    height: 16px;
    margin: 0;
    -webkit-appearance: none;
    appearance: none;
    border: var(--stroke-1) solid #CCCCCC;
    border-radius: 50%;
    background: var(--white);
    cursor: pointer;
  }

  .page-checkout .co-radio--card   { top: 1180px; }
  .page-checkout .co-radio--wallet { top: 1406px; }
  .page-checkout .co-radio--tabby  { top: 1474px; }

  /* #2129:7766 + #2129:7767 — the checked ring is dark with a 6px white dot */
  .page-checkout .co-radio:checked {
    background: var(--grey-900);
    border-color: var(--color-surface-dark);
    box-shadow: inset 0 0 0 5px var(--white), inset 0 0 0 8px var(--grey-900);
  }

  .page-checkout .co-option__label {
    left: 153px;
    font-size: 14px;
    line-height: 17px;
    cursor: pointer;
    white-space: nowrap;
  }

  .page-checkout .co-option__label--card {
    top: 1180px; width: 128px;
    font-weight: var(--fw-bold);
    color: var(--grey-900);
  }

  .page-checkout .co-option__label--wallet {
    top: 1406px; width: 200px;
    font-weight: var(--fw-reg);
    color: #666666;
  }

  .page-checkout .co-option__label--tabby {
    top: 1474px; width: 227px;
    font-weight: var(--fw-reg);
    color: #666666;
  }

  .page-checkout .co-scheme { max-width: none; }
  .page-checkout .co-scheme--mc   { left: 552px;    top: 1180.08px; width: 20.37px; height: 15.82px; }
  .page-checkout .co-scheme--visa { left: 581.99px; top: 1182.34px; width: 36.22px; height: 11.74px; }
  .page-checkout .co-scheme--amex { left: 627.84px; top: 1179.51px; width: 27.16px; height: 16.98px; }

  /* the card fields — note the card number is 529 wide and starts at x:124,
     one pixel left of the option rows, and expiry / CVC are 253 each */
  .page-checkout .co-field--cardno,
  .page-checkout .co-field--expiry,
  .page-checkout .co-field--cvc {
    height: 40px;
    padding: 0 17px;
    font-size: 11px;
    line-height: 13px;
  }

  .page-checkout .co-field--cardno { left: 124px; top: 1250px; width: 529px; }
  .page-checkout .co-field--expiry { left: 124px; top: 1320px; width: 253px; }
  .page-checkout .co-field--cvc    { left: 400px; top: 1320px; width: 253px; }

  /* Figma's expiry placeholder reads "ММ / ГГ" in Cyrillic; the markup ships
     the English "MM / YY". These three are NOT lowercased. */
  .page-checkout .co-field--cardno::placeholder,
  .page-checkout .co-field--expiry::placeholder,
  .page-checkout .co-field--cvc::placeholder { text-transform: none; }

  .page-checkout .co-tabby__mo {
    left: 578px;
    top: 1474px;
    width: 71px;
    font-size: 12px;
    font-weight: var(--fw-reg);
    line-height: 15px;
    text-align: right;
    white-space: nowrap;
    color: var(--color-surface-dark);
  }

  .page-checkout .co-check {
    left: 109px;
    top: 1538px;
    width: 18px;
    height: 18px;
    margin: 0;
    -webkit-appearance: none;
    appearance: none;
    border: 1.5px solid #CCCCCC;
    border-radius: 2px;
    background: var(--white);
    cursor: pointer;
  }

  .page-checkout .co-check:checked {
    background-color: var(--color-surface-dark);
    border-color: var(--color-surface-dark);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M4 8.5l2.9 2.9L12 5.4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px 12px;
  }

  /* the four consent parts sit inside `.co-agree`, which is kept static */
  .page-checkout .co-agree__lead,
  .page-checkout .co-agree__and {
    top: 1540px;
    font-size: 12px;
    font-weight: var(--fw-reg);
    line-height: 15px;
    color: #666666;
  }

  .page-checkout .co-agree__terms,
  .page-checkout .co-agree__privacy {
    top: 1540px;
    font-size: 12px;
    font-weight: var(--fw-reg);
    line-height: 15px;
    color: var(--grey-900);
    text-decoration: underline;
  }

  .page-checkout .co-agree__lead    { left: 137px; width: 76px;  }
  .page-checkout .co-agree__terms   { left: 221px; width: 111px; }
  .page-checkout .co-agree__and     { left: 339px; width: 22px;  }
  .page-checkout .co-agree__privacy { left: 373px; width: 79px;  }

  .page-checkout .co-pay-btn {
    left: 109px;
    top: 1586px;
    width: 560px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    padding: 0;
    background: var(--gold);
    border: 0;
    border-radius: 2px;
    -webkit-appearance: none;
    appearance: none;
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: var(--fw-bold);
    line-height: 19px;
    letter-spacing: normal;
    color: var(--white);
    cursor: pointer;
  }

  /* NOTHING renders between the button and this line: #2129:7783 at y:1739 is
     the developer instruction about Stripe badges, which must never ship. That
     slot is where the real badges go at integration. */
  .page-checkout .co-accepted {
    left: 238.5px;
    top: 1687px;
    width: 300px;
    font-size: 11px;
    font-weight: var(--fw-reg);
    line-height: 13px;
    text-align: center;
    color: #B2B2B2;
  }

  /* Chrome measures each of these fractionally wider than Figma own box and
     spilled a second line; all five are ONE line in the file. Overflows are
     198.13/198, 76.06/76, 155.46/155, 79.35/79 and 301.36/300. */
  .page-checkout .co-summary__title,
  .page-checkout .co-label--cardno,
  .page-checkout .co-option__label--wallet,
  .page-checkout .co-agree__privacy,
  .page-checkout .co-accepted { white-space: nowrap; }
}

/* ==== RTL OVERLAY (auto — tools/rtl-gen.js; mirrors horizontal geometry for Arabic, scoped to html[dir=rtl], changed decls only) ==== */
@media (min-width: 1200px) {
    html[dir="rtl"] .co section {
        right: 0;
        left: auto
    }
    html[dir="rtl"] .co-summary__panel {
        right: 80px;
        left: auto
    }
    html[dir="rtl"] .co-summary__title {
        right: 145px;
        left: auto
    }
    html[dir="rtl"] .co-item {
        right: 145px;
        left: auto
    }
    html[dir="rtl"] .co-item__img {
        right: 148px;
        left: auto
    }
    html[dir="rtl"] .co-item__name {
        right: 307px;
        left: auto
    }
    html[dir="rtl"] .co-item__meta {
        right: 307px;
        left: auto
    }
    html[dir="rtl"] .co-item__date {
        right: 307px;
        left: auto
    }
    html[dir="rtl"] .co-item__price {
        right: 307px;
        left: auto
    }
    html[dir="rtl"] .co-promo__label {
        right: 153px;
        left: auto
    }
    html[dir="rtl"] .co-promo__input {
        right: 144px;
        padding: 0 9px 0 0;
        left: auto
    }
    html[dir="rtl"] .co-promo__apply {
        right: 469px;
        left: auto
    }
    html[dir="rtl"] .co-rule {
        right: 145px;
        left: auto
    }
    html[dir="rtl"] .co-row--value {
        text-align: left
    }
    html[dir="rtl"] .co-row--subtotal {
        right: 153px;
        left: auto
    }
    html[dir="rtl"] .co-row--subtotalv {
        right: 505px;
        left: auto
    }
    html[dir="rtl"] .co-row--discount {
        right: 153px;
        left: auto
    }
    html[dir="rtl"] .co-row--discountv {
        right: 559px;
        left: auto
    }
    html[dir="rtl"] .co-total {
        right: 153px;
        left: auto
    }
    html[dir="rtl"] .co-total__value {
        right: 481px;
        text-align: left;
        left: auto
    }
    html[dir="rtl"] .co-strip {
        right: 144px;
        left: auto
    }
    html[dir="rtl"] .co-split__lead {
        right: 153px;
        left: auto
    }
    html[dir="rtl"] .co-split__plan {
        right: 288px;
        left: auto
    }
    html[dir="rtl"] .co-split__with {
        right: 485px;
        left: auto
    }
    html[dir="rtl"] .co-split__logo {
        right: 517px;
        left: auto
    }
    html[dir="rtl"] .co-refund {
        right: 153px;
        left: auto
    }
    html[dir="rtl"] .co-pay__panel {
        right: 648px;
        left: auto
    }
    html[dir="rtl"] .co-pay__title {
        right: 729px;
        left: auto
    }
    html[dir="rtl"] .co-legend {
        right: 729px;
        left: auto
    }
    html[dir="rtl"] .co-label {
        right: 729px;
        left: auto
    }
    html[dir="rtl"] .co-field {
        right: 729px;
        padding: 0 16px 0 0;
        left: auto
    }
    html[dir="rtl"] .co-field--country {
        padding-left: 40px;
        padding-right: 0
    }
    html[dir="rtl"] .co-country__caret {
        right: 1269px;
        left: auto
    }
    html[dir="rtl"] .co-option {
        right: 729px;
        left: auto
    }
    html[dir="rtl"] .co-radio {
        right: 745px;
        left: auto
    }
    html[dir="rtl"] .co-option__label {
        right: 773px;
        left: auto
    }
    html[dir="rtl"] .co-tabby__mo {
        right: 1198px;
        text-align: left;
        left: auto
    }
    html[dir="rtl"] .co-scheme--mc {
        right: 1172px;
        left: auto
    }
    html[dir="rtl"] .co-scheme--visa {
        right: 1201.99px;
        left: auto
    }
    html[dir="rtl"] .co-scheme--amex {
        right: 1247.84px;
        left: auto
    }
    html[dir="rtl"] .co-label--cardno {
        right: 745px;
        left: auto
    }
    html[dir="rtl"] .co-label--expiry {
        right: 745px;
        left: auto
    }
    html[dir="rtl"] .co-label--cvc {
        right: 1020px;
        left: auto
    }
    html[dir="rtl"] .co-field--cardno {
        right: 744px;
        left: auto
    }
    html[dir="rtl"] .co-field--expiry {
        right: 744px;
        left: auto
    }
    html[dir="rtl"] .co-field--cvc {
        right: 1020px;
        left: auto
    }
    html[dir="rtl"] .co-check {
        right: 729px;
        left: auto
    }
    html[dir="rtl"] .co-agree__lead {
        right: 757px;
        left: auto
    }
    html[dir="rtl"] .co-agree__and {
        right: 959px;
        left: auto
    }
    html[dir="rtl"] .co-agree__terms {
        right: 841px;
        left: auto
    }
    html[dir="rtl"] .co-agree__privacy {
        right: 993px;
        left: auto
    }
    html[dir="rtl"] .co-pay-btn {
        right: 729px;
        left: auto
    }
    html[dir="rtl"] .co-accepted {
        right: 858.5px;
        left: auto
    }
}
@media (min-width: 768px) and (max-width: 1199px) {
    html[dir="rtl"] .page-checkout .co-checkout {
        right: 0;
        left: auto
    }
    html[dir="rtl"] .page-checkout .co-summary__panel {
        right: 40px;
        left: auto
    }
    html[dir="rtl"] .page-checkout .co-summary__title {
        right: 165px;
        left: auto
    }
    html[dir="rtl"] .page-checkout .co-item {
        right: 165px;
        left: auto
    }
    html[dir="rtl"] .page-checkout .co-item__img {
        right: 168px;
        left: auto
    }
    html[dir="rtl"] .page-checkout .co-item__name {
        right: 327px;
        left: auto
    }
    html[dir="rtl"] .page-checkout .co-item__meta {
        right: 327px;
        left: auto
    }
    html[dir="rtl"] .page-checkout .co-item__date {
        right: 327px;
        left: auto
    }
    html[dir="rtl"] .page-checkout .co-item__price {
        right: 327px;
        left: auto
    }
    html[dir="rtl"] .page-checkout .co-promo__label {
        right: 173px;
        left: auto
    }
    html[dir="rtl"] .page-checkout .co-promo__input {
        right: 164px;
        left: auto
    }
    html[dir="rtl"] .page-checkout .co-promo__apply {
        right: 489px;
        left: auto
    }
    html[dir="rtl"] .page-checkout .co-rule {
        right: 165px;
        left: auto
    }
    html[dir="rtl"] .page-checkout .co-row--value {
        text-align: left
    }
    html[dir="rtl"] .page-checkout .co-row--subtotal {
        right: 173px;
        left: auto
    }
    html[dir="rtl"] .page-checkout .co-row--subtotalv {
        right: 525px;
        left: auto
    }
    html[dir="rtl"] .page-checkout .co-row--discount {
        right: 173px;
        left: auto
    }
    html[dir="rtl"] .page-checkout .co-row--discountv {
        right: 579px;
        left: auto
    }
    html[dir="rtl"] .page-checkout .co-total {
        right: 173px;
        left: auto
    }
    html[dir="rtl"] .page-checkout .co-total__value {
        right: 501px;
        text-align: left;
        left: auto
    }
    html[dir="rtl"] .page-checkout .co-strip {
        right: 164px;
        left: auto
    }
    html[dir="rtl"] .page-checkout .co-split__lead {
        right: 173px;
        left: auto
    }
    html[dir="rtl"] .page-checkout .co-split__plan {
        right: 308px;
        left: auto
    }
    html[dir="rtl"] .page-checkout .co-split__with {
        right: 505px;
        left: auto
    }
    html[dir="rtl"] .page-checkout .co-split__logo {
        right: 537px;
        left: auto
    }
    html[dir="rtl"] .page-checkout .co-refund {
        right: 173px;
        left: auto
    }
    html[dir="rtl"] .page-checkout .co-pay__panel {
        right: 28px;
        left: auto
    }
    html[dir="rtl"] .page-checkout .co-pay__title {
        right: 109px;
        left: auto
    }
    html[dir="rtl"] .page-checkout .co-legend {
        right: 109px;
        left: auto
    }
    html[dir="rtl"] .page-checkout .co-label--name {
        right: 109px;
        left: auto
    }
    html[dir="rtl"] .page-checkout .co-label--email {
        right: 109px;
        left: auto
    }
    html[dir="rtl"] .page-checkout .co-label--phone {
        right: 109px;
        left: auto
    }
    html[dir="rtl"] .page-checkout .co-label--country {
        right: 109px;
        left: auto
    }
    html[dir="rtl"] .page-checkout .co-label--cardno {
        right: 125px;
        left: auto
    }
    html[dir="rtl"] .page-checkout .co-label--expiry {
        right: 125px;
        left: auto
    }
    html[dir="rtl"] .page-checkout .co-label--cvc {
        right: 400px;
        left: auto
    }
    html[dir="rtl"] .page-checkout .co-field--name,
html[dir="rtl"] .page-checkout .co-field--email,
html[dir="rtl"] .page-checkout .co-field--phone,
html[dir="rtl"] .page-checkout .co-field--country {
        right: 109px;
        left: auto
    }
    html[dir="rtl"] .page-checkout .co-country__caret {
        right: 649px;
        left: auto
    }
    html[dir="rtl"] .page-checkout .co-option {
        right: 109px;
        left: auto
    }
    html[dir="rtl"] .page-checkout .co-radio {
        right: 125px;
        left: auto
    }
    html[dir="rtl"] .page-checkout .co-option__label {
        right: 153px;
        left: auto
    }
    html[dir="rtl"] .page-checkout .co-scheme--mc {
        right: 552px;
        left: auto
    }
    html[dir="rtl"] .page-checkout .co-scheme--visa {
        right: 581.99px;
        left: auto
    }
    html[dir="rtl"] .page-checkout .co-scheme--amex {
        right: 627.84px;
        left: auto
    }
    html[dir="rtl"] .page-checkout .co-field--cardno {
        right: 124px;
        left: auto
    }
    html[dir="rtl"] .page-checkout .co-field--expiry {
        right: 124px;
        left: auto
    }
    html[dir="rtl"] .page-checkout .co-field--cvc {
        right: 400px;
        left: auto
    }
    html[dir="rtl"] .page-checkout .co-tabby__mo {
        right: 578px;
        text-align: left;
        left: auto
    }
    html[dir="rtl"] .page-checkout .co-check {
        right: 109px;
        left: auto
    }
    html[dir="rtl"] .page-checkout .co-agree__lead {
        right: 137px;
        left: auto
    }
    html[dir="rtl"] .page-checkout .co-agree__terms {
        right: 221px;
        left: auto
    }
    html[dir="rtl"] .page-checkout .co-agree__and {
        right: 339px;
        left: auto
    }
    html[dir="rtl"] .page-checkout .co-agree__privacy {
        right: 373px;
        left: auto
    }
    html[dir="rtl"] .page-checkout .co-pay-btn {
        right: 109px;
        left: auto
    }
    html[dir="rtl"] .page-checkout .co-accepted {
        right: 238.5px;
        left: auto
    }
}

/* ==========================================================================
   Mobile checkout (<=767px) — the desktop/tablet layouts are pinned/absolute
   and don't apply here, so lay the payment form out as a clean, tappable flow.
   Fixes: invisible 2px radios, oversized card logos, the Pay button colliding
   with the consent line.
   ========================================================================== */
@media (max-width: 767px) {
  .page-checkout main { padding: 0 16px 24px; }
  .co-pay__title { display: block; font-size: 20px; font-weight: var(--fw-bold); margin: 22px 0 6px; }
  .co-legend { display: block; font-size: 15px; font-weight: var(--fw-bold); color: var(--color-text); margin: 22px 0 10px; }
  .co-label { display: block; font-size: 13px; color: var(--muted); margin: 12px 0 5px; }

  .co-input, .co-field {
    display: block; width: 100%; box-sizing: border-box;
    font-size: 16px; line-height: 20px; padding: 12px 14px; height: auto;
  }
  .co-field--country { padding-right: 14px; }   /* let the native select arrow show */
  .co-country__caret { display: none; }

  /* payment options: hide the decorative pinned boxes; radio + label on one row */
  .co-option { display: none !important; }
  .co-radio, .co-check {
    -webkit-appearance: none; appearance: none; box-sizing: border-box;
    width: 22px; height: 22px; vertical-align: middle; flex: none;
  }
  /* Each option on its own row: the radio floats left and the label (a block
     formatting context via overflow:hidden) fills the rest beside it. Plain
     inline-block let all three rows run together the moment the card fields were
     collapsed for Tabby/wallet, so the radios are floated + `clear:both`. */
  .co-radio--card, .co-radio--wallet, .co-radio--tabby {
    display: block; float: left; clear: both; margin: 18px 0 0 0;
  }
  .co-option__label {
    display: block; overflow: hidden; margin: 18px 0 0 10px;
    font-size: 15px; color: var(--color-text); width: auto; left: auto; top: auto;
  }

  /* card scheme logos: a small inline row, not full-size. Higher specificity so
     it beats the base `.co img { max-width:100%; height:auto }`. */
  .page-checkout .co-scheme {
    display: inline-block; height: 22px; width: auto; max-width: none;
    margin: 8px 8px 0 0; vertical-align: middle; position: static; left: auto; top: auto;
  }
  .page-checkout .co-scheme--mc { clear: both; margin-left: 32px; }   /* start the logo row below the card label, indented under it */

  .co-tabby__mo { display: block; clear: both; font-size: 13px; color: var(--muted); margin: 4px 0 0 32px; position: static; left: auto; top: auto; width: auto; text-align: left; }

  /* consent + pay */
  .co-check { display: inline-block; clear: both; margin: 22px 10px 0 0; }
  .co-agree { display: inline; position: static; }
  .co-agree__lead, .co-agree__terms, .co-agree__and, .co-agree__privacy {
    display: inline; position: static; left: auto; top: auto; width: auto;
    font-size: 14px; line-height: 1.6;
  }
  .co-pay-btn {
    display: flex; width: 100%; padding: 15px; margin: 24px 0 12px;
    font-size: 16px; line-height: 20px; position: static; left: auto; top: auto;
  }
  /* Apple Pay / Google Pay button: JS mounts it absolutely over the card field
     for the pinned desktop/tablet layout; on mobile the checkout flows, so make
     it a full-width block sitting where the Pay button is (it is inserted just
     before the Pay button, which hides while the wallet is the chosen method). */
  #dhc-payment-request {
    position: static !important; left: auto !important; top: auto !important;
    width: 100% !important; margin: 24px 0 12px !important;
  }
  #dhc-payment-request .StripeElement, #dhc-payment-request iframe { width: 100% !important; }
  .co-accepted { display: block; position: static; left: auto; top: auto; width: auto; margin-top: 14px; font-size: 12px; color: var(--muted); text-align: center; }
}

/* Mobile order-summary polish: drop the decorative pinned boxes (empty dark
   bars in flow), style the promo Apply button, size the Tabby split logo. */
@media (max-width: 767px) {
  .co-summary__panel, .co-strip, .co-pay__panel { display: none !important; }
  .co-promo__apply {
    display: inline-block; margin-top: 10px; padding: 11px 22px;
    background: var(--ink-900); color: var(--white); border: 0;
    border-radius: var(--radius-2); font-weight: var(--fw-bold); font-size: 14px;
  }
  .co-promo__input { display: block; width: 100%; box-sizing: border-box; }
  .page-checkout .co-split__logo { display: inline-block; height: 16px; width: auto; max-width: none; vertical-align: middle; }
}