/*
 * style-minimal.css — variant overlay for the public one-off payment page (replaces webpay-overrides.css).
 * Stripe/Linear-style: two columns side by side from 768px (one below), hairline borders, one accent colour, dark theme via prefers-color-scheme.
 * Bootstrap 3 / Ace / Open Sans only. `!important` only where inline style="" or Ace's own !important forces it.
 */

:root {
  --m-bg: #fafafa;
  --m-surface: #fff;
  --m-ink: #18181b;
  --m-label: #3f3f46;
  --m-muted: #71717a;
  --m-line: #e4e4e7;
  --m-line-strong: #c9c9d0;
  --m-field: #fff;
  --m-accent: #5b5bd6;
  --m-accent-hover: #4a4ac4;
  --m-accent-ring: rgba(91, 91, 214, .22);
  --m-on-accent: #fff;
  --m-danger: #dc2626;
  --m-danger-bg: #fef2f2;
  --m-danger-line: #fecaca;
  --m-addon: #f4f4f5;
  --m-radius: 8px;
  --m-btn-h: 44px;
  color-scheme: light;
}

/* ---------- page ---------- */
body {
  font-family: "Open Sans", "Segoe UI", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  background: var(--m-bg);
  color: var(--m-ink);
  font-size: 14px;
  line-height: 1.5;
}
.container {
  max-width: 1120px; /* two columns of about 500px with the gutters */
  width: 100%;
  padding: 0 24px 56px;
}
.page-content.layout-page-content {
  background: transparent;
  border: 0;
  padding: 0;
}
.page-content > .row { margin: 0; }
.page-content > .row > .col-lg-12 { padding: 0; }
.page-content > .row > .col-lg-12 > .row { margin: 0; } /* header row: logo + title */
.page-content > .row > .col-lg-12 > .row > .col-lg-12 { padding: 0; }

/* ---------- top bar: quiet text-only guest menu ---------- */
#navbar {
  float: none !important; /* inline float:right */
  width: auto;
  text-align: right;
  background: transparent;
  border: 0;
  box-shadow: none;
  min-height: 0;
  margin: 8px 12px 0 0;
}
#navbar .navbar-container { padding: 0; }
#navbar .navbar-buttons,
#navbar .ace-nav,
#navbar .ace-nav > li { background: transparent; float: none; display: inline-block; width: auto; margin: 0; }
#navbar .navbar-buttons,
#navbar .ace-nav { height: auto; border: 0; box-shadow: none; }
#navbar .ace-nav > li::before,
#navbar .ace-nav > li::after { display: none; }
#navbar .ace-nav > li { border: 0; } /* Ace draws vertical dividers between nav items */
#navbar .ace-nav > li > a {
  background: transparent !important; /* Ace paints coloured nav items with !important */
  color: var(--m-muted) !important;
  border: 0;
  height: 32px;
  line-height: 32px;
  padding: 0 6px;
  font-size: 12px;
  box-shadow: none;
}
#navbar .ace-nav > li > a:hover { color: var(--m-ink) !important; }
#navbar .nav-user-photo { display: none; }
#navbar .user-info { font-size: 12px; max-width: none; line-height: 32px; padding: 0; }
#navbar .user-info small { display: inline; color: var(--m-muted); }
#navbar .user-info { display: inline-block; white-space: nowrap; }
#navbar .ace-nav > li > a > .ace-icon { color: var(--m-muted); line-height: 32px; }
.ace-nav > li > .dropdown-menu {
  background: var(--m-surface);
  border: 1px solid var(--m-line);
  border-radius: var(--m-radius);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .06);
  overflow: hidden;
}
.ace-nav > li > .dropdown-menu > li > a { color: var(--m-ink); }
.ace-nav > li > .dropdown-menu > li > a:hover { background: var(--m-addon); color: var(--m-ink); }
.ace-nav > li > .dropdown-menu .divider { background: var(--m-line); }

/* ---------- heading ---------- */
.page-content .row > .col-lg-12 > img.img-responsive { max-height: 56px !important; width: auto; margin-top: 12px !important; } /* inline max-height 150px */
.page-content .row > .col-lg-12 > .align-center { text-align: center; }
.page-content .row > .col-lg-12 > .align-center > span {
  display: block;
  margin: 16px 0 0 !important; /* inline margin-top:15px */
  font-size: 18px !important; /* inline 25px */
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--m-ink);
}
.page-content .row > .col-lg-12 > .align-center > p {
  margin: 2px 0 24px;
  font-size: 13.5px;
  color: var(--m-muted);
}

/* ---------- the card: one column below 768px, two side by side above ---------- */
form.payment-form {
  background: var(--m-surface);
  border: 1px solid var(--m-line);
  border-radius: 12px;
  box-shadow: none;
  padding: 28px 28px 20px;
  margin: 0;
}
form.payment-form::after { content: ""; display: table; clear: both; }
form.payment-form > .row,
form.payment-form > .col-lg-12 { margin-left: 0; margin-right: 0; }
/* stack both columns below 768px (Bootstrap's own col-lg-6 would only split at 1200px) */
form.payment-form > .row > .col-lg-6,
form.payment-form > .row > .col-lg-12 {
  float: none;
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}
form.payment-form > .row > .col-lg-6 + .col-lg-6 { margin-top: 28px; }
/* side by side from 768px: details left, payment right, a hairline between */
@media (min-width: 768px) {
  form.payment-form { padding: 36px 40px 24px; }
  form.payment-form > .row:first-of-type { display: flex; flex-wrap: wrap; align-items: flex-start; }
  form.payment-form > .row:first-of-type::before,
  form.payment-form > .row:first-of-type::after { display: none; } /* Bootstrap's clearfix pseudo-elements would become flex items */
  form.payment-form > .row:first-of-type > .col-lg-12 { flex: 0 0 100%; } /* the row also holds a full-width strip (validation summary) that must sit above both columns */
  form.payment-form > .row:first-of-type > .col-lg-6 { flex: 1 1 45%; min-width: 0; width: auto; padding-left: 0; padding-right: 0; margin-top: 0; }
  form.payment-form > .row:first-of-type > .col-lg-6:not(:last-child) { padding-right: 40px; } /* not :first-child: the full-width strip comes first */
  form.payment-form > .row:first-of-type > .col-lg-6 + .col-lg-6 { padding-left: 40px; border-left: 1px solid var(--m-line); }
}

/* section labels */
form.payment-form .align-center.padding-10 {
  text-align: left !important;
  padding: 0;
  margin-bottom: 16px;
}
form.payment-form .align-center.padding-10 > span {
  display: block;
  text-align: left !important;
  font-size: 11px;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--m-muted);
}

/* ---------- fields ---------- */
.form-group { margin-bottom: 14px; }
label.control-label {
  display: block;
  margin-bottom: 5px;
  font-size: 13px;
  font-weight: 500;
  color: var(--m-label);
  text-align: left;
}
.required { color: var(--m-danger); margin-left: 2px; }

.form-control,
form.payment-form input.form-control {
  height: 40px;
  padding: 8px 12px;
  font-size: 14px;
  color: var(--m-ink);
  background: var(--m-field);
  border: 1px solid var(--m-line);
  border-radius: var(--m-radius) !important; /* Ace squares inputs off with !important on input[type=text] */
  box-shadow: none;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.form-control:hover { border-color: var(--m-line-strong); }
.form-control:focus,
form.payment-form input.form-control:focus {
  border-color: var(--m-accent);
  box-shadow: 0 0 0 3px var(--m-accent-ring) !important; /* !important: Ace forces box-shadow: none !important on .form-control */
  outline: 0;
}
.form-control::placeholder { color: #74747b; }

/* amount: prefix addon joined to the field */
.input-group { width: 100%; }
.input-group-addon {
  background: var(--m-addon);
  color: var(--m-muted);
  font-weight: 500;
  border: 1px solid var(--m-line);
  border-right: 0;
  border-radius: var(--m-radius) 0 0 var(--m-radius) !important;
  padding: 0 12px;
}
.input-group .form-control,
form.payment-form .input-group input.form-control { border-radius: 0 var(--m-radius) var(--m-radius) 0 !important; }
#PaymentAmount { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* validation */
.input-validation-error,
form.payment-form .has-error input.form-control,
.has-error .form-control {
  border-color: var(--m-danger);
  background: var(--m-field);
}
.input-validation-error:focus,
form.payment-form input.input-validation-error:focus,
form.payment-form .has-error input.form-control:focus { box-shadow: 0 0 0 3px rgba(220, 38, 38, .2) !important; }
.field-validation-error,
.text-danger {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--m-danger);
}
.validation-summary-errors {
  background: var(--m-danger-bg);
  border: 1px solid var(--m-danger-line);
  border-radius: var(--m-radius);
  padding: 10px 14px;
  margin-bottom: 18px;
}
.validation-summary-errors ul { margin: 0; padding-left: 18px; }
.validation-summary-valid { display: none; }

.fa-info-circle { color: var(--m-muted); }

/* ---------- pay buttons: full width, stacked ---------- */
.btn-black,
.btn-recaptcha {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  max-width: none;
  height: var(--m-btn-h);
  margin: 0;
  padding: 0 16px !important; /* inline padding:0 on the Card button */
  border: 0 !important;
  outline: 0 !important; /* .btn-black draws a 1px grey outline */
  border-radius: var(--m-radius) !important;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: none;
  transition: background-color .12s ease, box-shadow .12s ease, transform .08s ease;
}
.btn-recaptcha:active { transform: translateY(1px); }
.btn-recaptcha:focus-visible { box-shadow: 0 0 0 3px var(--m-accent-ring); }

/* Card: primary, the accent colour */
.btn-recaptcha[data-paymentmethod="Card"] { background: var(--m-accent); color: var(--m-on-accent); }
.btn-recaptcha[data-paymentmethod="Card"]:hover { background: var(--m-accent-hover); }
.btn-recaptcha .fa { color: rgba(255, 255, 255, .9); font-size: 18px !important; } /* inline font-size on the brand icons */

/* Bank (PayTo): secondary, quiet outline so Card leads */
.btn-recaptcha[data-paymentmethod="PayTo"] {
  background: var(--m-surface);
  color: var(--m-ink);
  box-shadow: inset 0 0 0 1px var(--m-line-strong);
}
.btn-recaptcha[data-paymentmethod="PayTo"]:hover { background: var(--m-addon); }
/* Alipay+, WeChat Pay and UnionPay are black buttons: hover lifts them to a dark grey so the change shows on both themes */
.btn-recaptcha[data-paymentmethod="AliPayPlus"]:hover,
.btn-recaptcha[data-paymentmethod="WeChat"]:hover,
.btn-recaptcha[data-paymentmethod="UnionPay"]:hover { background: #2c2f38; }
.btn-recaptcha[data-paymentmethod="PayTo"] img { height: 20px !important; margin-top: 0 !important; filter: invert(1); } /* white logo -> dark; inline height/margin */

/* Apple Pay: Apple's SDK element (not rendered locally), sized by its own variables */
apple-pay-button {
  display: block;
  width: 100%;
  --apple-pay-button-width: 100%;
  --apple-pay-button-height: var(--m-btn-h);
  --apple-pay-button-border-radius: 8px;
  --apple-pay-button-padding: 0;
  --apple-pay-button-box-sizing: border-box;
}

/* Google Pay: Google's script injects into #google-pay-div; stretch it to match */
#google-pay-div { width: 100%; }
#google-pay-div button,
#google-pay-div .gpay-card-info-container {
  width: 100% !important; /* Google sets inline sizes */
  height: var(--m-btn-h) !important;
  min-height: var(--m-btn-h) !important;
  border-radius: var(--m-radius) !important;
  background-size: contain !important;
}

/* breathing room between the last field and the first wallet button */
.apple-div { padding-top: 6px; }

/* hide a wallet block (and its "OR") whose button is missing: Apple's SDK not defined, or Google's script has not rendered its button (no :empty: the live container holds whitespace) */
.apple-div:has(apple-pay-button:not(:defined)),
.apple-div:has(#google-pay-div):not(:has(#google-pay-div > *)) { display: none; }

/* nested columns double the padding around each pay button: flatten */
.apple-div .col-xs-12,
.payto-div .col-xs-12,
.slicepay-div .col-xs-12,
#CardDetail .col-xs-12 { float: none; width: 100%; padding-left: 0; padding-right: 0; }
.apple-div .form-group,
.payto-div .form-group,
#CardDetail .form-group { margin-bottom: 0; }

/* "Pay by Credit / Debit Card": inline verdana 10pt blue -> small muted caption */
#CardDetail > .col-xs-12 { margin-bottom: 10px; }
#CardDetail > .col-xs-12 .text-center,
.payto-div .col-xs-12 p { text-align: left !important; } /* inline text-align:center */
#CardDetail > .col-xs-12 span,
#CardDetail > .col-xs-12 strong,
.payto-div strong {
  font-family: "Open Sans", "Segoe UI", Arial, sans-serif !important; /* inline verdana */
  font-size: 11px !important;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--m-muted) !important; /* inline #017dc5 */
  text-align: left !important;
}
#CardDetail > .col-xs-12 span span {
  display: block;
  margin-top: 2px;
  font-size: 13px !important;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}
#CardDetail > .col-xs-12 br { display: none; }
.payto-div .col-xs-12 p { margin: 0 0 10px; }

/* "OR" divider: hairline with centred word */
.separator {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0;
  color: var(--m-muted);
  font-size: 11px;
  letter-spacing: .08em;
  text-align: center;
}
.separator::before,
.separator::after {
  content: "";
  flex: 1;
  border: 0 !important; /* Ace draws these rules with borders */
  border-top: 1px solid var(--m-line) !important;
}
.separator strong { font-weight: 500; }

/* stray white "." spacer paragraphs and empty spacer columns */
p:has(> span[style*="#ffffff"]) { display: none; }
.space-12 { height: 0; }
.apple-div > .col-xs-12 > .col-xs-12:not(:has(*)) { display: none; }
.apple-div > .col-xs-12 > .col-xs-12:has(> p:only-child > span[style*="#ffffff"]) { display: none; }

/* ---------- footer (CMS blob in the second-to-last .row) ---------- */
form.payment-form > .row:last-of-type { display: none; }
form.payment-form > .row:nth-last-of-type(2) {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--m-line);
}
form.payment-form > .row:nth-last-of-type(2) > div,
form.payment-form > .row:nth-last-of-type(2) span { text-align: center !important; } /* inline text-align:left */
form.payment-form > .row:nth-last-of-type(2) > div { padding: 0; text-wrap: balance; }
form.payment-form > .row:nth-last-of-type(2) br { display: none; }
form.payment-form > .row:nth-last-of-type(2) a { margin: 0 4px; vertical-align: middle; }
form.payment-form > .row:nth-last-of-type(2) img { max-height: 22px; width: auto; vertical-align: middle; opacity: .8; }
form.payment-form > .row:nth-last-of-type(2) a { display: inline-block; }
form.payment-form > .row:nth-last-of-type(2) span { color: var(--m-muted) !important; font-size: 11px !important; font-family: "Open Sans", "Segoe UI", Arial, sans-serif !important; } /* inline colours/sizes from the CMS */

/* ---------- small screens ---------- */
@media (max-width: 767px) {
  .container { padding: 0 12px 40px; }
  form.payment-form { padding: 20px 16px 16px; border-radius: 10px; }
  .form-control,
  form.payment-form input.form-control { font-size: 16px; } /* stops iOS zoom on focus */
  .btn-recaptcha { font-size: 14px; padding: 0 10px !important; gap: 6px; }
  .btn-recaptcha .fa { font-size: 16px !important; }
}

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

/* ---------- dark theme ---------- */
/* theme-toggle: dark rules below appear twice (device setting and [data-theme="dark"]); generated by make-toggleable.py */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --m-bg: #0a0a0b;
    --m-surface: #111113;
    --m-ink: #ededef;
    --m-label: #c7c7cc;
    --m-muted: #8b8b94;
    --m-line: #3b3b44;
    --m-line-strong: #5a5a66;
    --m-field: #0a0a0b;
    --m-accent: #7c7cf0;
    --m-accent-hover: #9090f5;
    --m-accent-ring: rgba(124, 124, 240, .3);
    --m-on-accent: #0a0a0b;
    --m-danger: #f87171;
    --m-danger-bg: rgba(248, 113, 113, .08);
    --m-danger-line: rgba(248, 113, 113, .3);
    --m-addon: #1a1a1d;
    color-scheme: dark;
  }
  :root:not([data-theme="light"]) .form-control::placeholder { color: #84848a; }
  :root:not([data-theme="light"]) .btn-recaptcha[data-paymentmethod="Card"] .fa { color: rgba(10, 10, 11, .75); }
  :root:not([data-theme="light"]) .btn-recaptcha[data-paymentmethod="PayTo"] img { filter: none; } /* logo is already white */
  /* the black buttons vanish on the dark card: hairline ring (:not(:focus-visible) keeps the focus ring, which is also a box-shadow) */
  :root:not([data-theme="light"]) .btn-recaptcha[data-paymentmethod="AliPayPlus"]:not(:focus-visible),:root:not([data-theme="light"]) .btn-recaptcha[data-paymentmethod="WeChat"]:not(:focus-visible),:root:not([data-theme="light"]) .btn-recaptcha[data-paymentmethod="UnionPay"]:not(:focus-visible),:root:not([data-theme="light"]) apple-pay-button,:root:not([data-theme="light"]) #google-pay-div button,:root:not([data-theme="light"]) #google-pay-div .gpay-card-info-container { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
  :root:not([data-theme="light"]) .page-content .row > .col-lg-12 > img.img-responsive { background: #fff; padding: 6px 10px; border-radius: 8px; } /* merchant logo is authored for a white page */
  :root:not([data-theme="light"]) form.payment-form > .row:nth-last-of-type(2) img { background: #fff !important; padding: 3px 6px; border-radius: 6px; opacity: .9; } /* footer logos are dark-on-transparent */
  :root:not([data-theme="light"]) .input-validation-error,:root:not([data-theme="light"]) form.payment-form .has-error input.form-control { background: var(--m-danger-bg); }
}

  :root[data-theme="dark"] {
    --m-bg: #0a0a0b;
    --m-surface: #111113;
    --m-ink: #ededef;
    --m-label: #c7c7cc;
    --m-muted: #8b8b94;
    --m-line: #3b3b44;
    --m-line-strong: #5a5a66;
    --m-field: #0a0a0b;
    --m-accent: #7c7cf0;
    --m-accent-hover: #9090f5;
    --m-accent-ring: rgba(124, 124, 240, .3);
    --m-on-accent: #0a0a0b;
    --m-danger: #f87171;
    --m-danger-bg: rgba(248, 113, 113, .08);
    --m-danger-line: rgba(248, 113, 113, .3);
    --m-addon: #1a1a1d;
    color-scheme: dark;
  }
  :root[data-theme="dark"] .form-control::placeholder { color: #84848a; }
  :root[data-theme="dark"] .btn-recaptcha[data-paymentmethod="Card"] .fa { color: rgba(10, 10, 11, .75); }
  :root[data-theme="dark"] .btn-recaptcha[data-paymentmethod="PayTo"] img { filter: none; } /* logo is already white */
  /* the black buttons vanish on the dark card: hairline ring (:not(:focus-visible) keeps the focus ring, which is also a box-shadow) */
  :root[data-theme="dark"] .btn-recaptcha[data-paymentmethod="AliPayPlus"]:not(:focus-visible),:root[data-theme="dark"] .btn-recaptcha[data-paymentmethod="WeChat"]:not(:focus-visible),:root[data-theme="dark"] .btn-recaptcha[data-paymentmethod="UnionPay"]:not(:focus-visible),:root[data-theme="dark"] apple-pay-button,:root[data-theme="dark"] #google-pay-div button,:root[data-theme="dark"] #google-pay-div .gpay-card-info-container { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
  :root[data-theme="dark"] .page-content .row > .col-lg-12 > img.img-responsive { background: #fff; padding: 6px 10px; border-radius: 8px; } /* merchant logo is authored for a white page */
  :root[data-theme="dark"] form.payment-form > .row:nth-last-of-type(2) img { background: #fff !important; padding: 3px 6px; border-radius: 6px; opacity: .9; } /* footer logos are dark-on-transparent */
  :root[data-theme="dark"] .input-validation-error,:root[data-theme="dark"] form.payment-form .has-error input.form-control { background: var(--m-danger-bg); }

/* ---------- sandbox additions: UnionPay button and the card frame's height ---------- */
/* The page places a small UnionPay button (absolutely positioned inline) beside the Card button: keep it in the flow as a square next to it. */
div:has(> [data-paymentmethod="UnionPay"]) { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 420px; margin-left: auto; margin-right: auto; }
div:has(> [data-paymentmethod="UnionPay"]) > [data-paymentmethod="Card"] { flex: 1 1 0; min-width: 0; max-width: none; margin: 0; }
div:has(> [data-paymentmethod="UnionPay"]) > [data-paymentmethod="Card"] { white-space: nowrap; gap: 5px; padding: 0 10px !important; font-size: 15px; } /* five card icons share the narrower button */
div:has(> [data-paymentmethod="UnionPay"]) > [data-paymentmethod="Card"] .fa { font-size: 17px !important; }
[data-paymentmethod="UnionPay"] { position: relative !important; flex: 0 0 64px; width: 64px !important; min-width: 64px !important; margin: 0 !important; padding: 0 !important; } /* inline position:absolute, width, margin-left */
[data-paymentmethod="UnionPay"] img { position: static !important; height: 26px !important; margin: 0 !important; width: auto; } /* inline absolute offsets */
/* The hosted card page loads in a frame of fixed height (400 from the markup). The form is about 332px tall, so the frame is cut to 340px; nothing can
   resize a frame in CSS. When the validation summary shows, webpay-card-overrides.css tightens the form to make room for it inside the same 340px.
   The spacer paragraph (a white ".") and .space-12 above the frame, and the logo strip's inline top padding, are dead space. */
#AuthoriseCard { display: block; height: 340px; border: 0; color-scheme: normal; } /* a frame whose colour-scheme differs from the frame document's gets an opaque white canvas (soft and minimal set dark on the page) */
/* Card step: the card frame is only on the page once Card has been chosen, so the other methods go, and their "OR" lines with them (each block holds its own).
   The preview-only button next to the theme toggle (webpay-theme-toggle.js) shows them again by setting data-other-methods="show" on <html>. */
html:not([data-other-methods="show"]) body:has(#AuthoriseCard) :is(.apple-div, .alipay-plus-div, .payto-div, .wechat-div, .slicepay-div) { display: none; }
#CardDetail > .col-xs-12:first-child,
#CardDetail .space-12 { display: none; }
#DisplayCardLogos { padding-top: 0 !important; } /* inline padding-top:15px */

/* One width for every payment method: each button runs edge to edge of its column. Card runs from the left edge up to the UnionPay button, which sits on the right edge. */
.alipay-plus-div .col-xs-12,
.wechat-div .col-xs-12 { float: none; width: 100%; padding-left: 0; padding-right: 0; } /* nested columns inset Alipay+ and WeChat; the other blocks already flatten theirs */
div:has(> [data-paymentmethod="UnionPay"]) { max-width: none; margin-left: 0; margin-right: 0; }
.btn-recaptcha,
apple-pay-button,
#google-pay-div { max-width: none; }

/* ---------- layout: the two field columns, then the payment methods underneath, one to a row or two (from 992px) ---------- */
@media (min-width: 992px) {
  form.payment-form > .row:first-of-type { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
  form.payment-form > .row:first-of-type::before,
  form.payment-form > .row:first-of-type::after { display: none; } /* Bootstrap's clearfix pseudo-elements would become grid items */
  form.payment-form > .row:first-of-type > .col-lg-12 { grid-column: 1 / -1; } /* the validation strip stays above everything */
  form.payment-form > .row:first-of-type > .col-lg-6 { float: none; width: auto; padding-left: 0; padding-right: 0; margin-top: 0; grid-column: 1 / 4; grid-row: 2 / span 8; } /* "Your Details": a title and five fields, level with the eight items of the payment column */
  form.payment-form > .row:first-of-type > .col-lg-6:not(:last-child) { padding-right: 0; }
  form.payment-form > .row:first-of-type > .col-lg-6 + .col-lg-6 { border-left: 0; padding-left: 0; margin-top: 0; }
  /* The payment column's fields and its payment-method blocks are siblings inside one column, so the column itself is dissolved (display: contents):
     each of its children then sits in the form's grid and can be placed on its own. */
  form.payment-form > .row:first-of-type > .col-lg-6 ~ .col-lg-6 { display: contents; }
  form.payment-form > .row:first-of-type > .col-lg-6 ~ .col-lg-6 > * { grid-column: 4 / 7; }
  form.payment-form > .row:first-of-type .separator { display: none; }
  /* Payment methods sit in fixed rows far below any field row (rows 2 to 9 hold the fields; the rows between are empty and take no height), so a
     method can never slide up beside a shorter field column. One per row by default; the "two per row" preview toggle pairs them
     (Google Pay | Alipay+, Bank | WeChat, Apple Pay | Slice Pay when present). Card, with the UnionPay button, always takes a full row first. */
  html:not([data-method-cols="2"]) form.payment-form > .row:first-of-type > .col-lg-6 ~ .col-lg-6 > :is(.apple-div, .alipay-plus-div, .wechat-div, .payto-div, .slicepay-div, #CardDetail) { grid-column: 1 / -1; justify-self: center; width: 100%; max-width: 520px; }
  form.payment-form > .row:first-of-type > .col-lg-6 ~ .col-lg-6 > #CardDetail { grid-row: 30; margin-top: 24px; margin-bottom: 8px; }
  form.payment-form > .row:first-of-type > .col-lg-6 ~ .col-lg-6 > .apple-div:has(#google-pay-div) { grid-row: 31; }
  form.payment-form > .row:first-of-type > .col-lg-6 ~ .col-lg-6 > .alipay-plus-div { grid-row: 32; }
  form.payment-form > .row:first-of-type > .col-lg-6 ~ .col-lg-6 > .payto-div { grid-row: 33; }
  form.payment-form > .row:first-of-type > .col-lg-6 ~ .col-lg-6 > .wechat-div { grid-row: 34; }
  form.payment-form > .row:first-of-type > .col-lg-6 ~ .col-lg-6 > .apple-div:has(apple-pay-button) { grid-row: 35; }
  form.payment-form > .row:first-of-type > .col-lg-6 ~ .col-lg-6 > .slicepay-div { grid-row: 36; }
  form.payment-form > .row:first-of-type > .col-lg-6 ~ .col-lg-6 > :is(.apple-div, .alipay-plus-div, .wechat-div, .payto-div, .slicepay-div) { padding-top: 0; margin-top: 0; margin-bottom: 8px; } /* the blocks carry different top spacing; on one row they should share a top edge */
  html[data-method-cols="2"] form.payment-form > .row:first-of-type > .col-lg-6 ~ .col-lg-6 > #CardDetail { grid-column: 1 / -1; }
  html[data-method-cols="2"] form.payment-form > .row:first-of-type > .col-lg-6 ~ .col-lg-6 > #CardDetail:has(#AuthoriseCard) { justify-self: center; width: 100%; max-width: 520px; } /* the card form goes below the fields it follows */
  html[data-method-cols="2"] form.payment-form > .row:first-of-type > .col-lg-6 ~ .col-lg-6 > .apple-div:has(#google-pay-div) { grid-column: 1 / 4; grid-row: 31; }
  html[data-method-cols="2"] form.payment-form > .row:first-of-type > .col-lg-6 ~ .col-lg-6 > .alipay-plus-div { grid-column: 4 / 7; grid-row: 31; }
  html[data-method-cols="2"] form.payment-form > .row:first-of-type > .col-lg-6 ~ .col-lg-6 > .payto-div { grid-column: 1 / 4; grid-row: 32; }
  html[data-method-cols="2"] form.payment-form > .row:first-of-type > .col-lg-6 ~ .col-lg-6 > .wechat-div { grid-column: 4 / 7; grid-row: 32; }
  html[data-method-cols="2"] form.payment-form > .row:first-of-type > .col-lg-6 ~ .col-lg-6 > .apple-div:has(apple-pay-button) { grid-column: 1 / 4; grid-row: 33; }
  html[data-method-cols="2"] form.payment-form > .row:first-of-type > .col-lg-6 ~ .col-lg-6 > .slicepay-div { grid-column: 4 / 7; grid-row: 33; }
}

/* Auto fields (preview toggle, webpay-theme-toggle.js): both columns are dissolved, so every field sits in one grid and flows into two even columns in
   page order, whatever fields a merchant has. The first title takes a full row; the second is hidden so the fields run on. */
@media (min-width: 992px) {
  html[data-auto-fields="on"] form.payment-form > .row:first-of-type > .col-lg-6 { display: contents; }
  html[data-auto-fields="on"] form.payment-form > .row:first-of-type > .col-lg-6 ~ .col-lg-6 > :not(.apple-div, .alipay-plus-div, .wechat-div, .payto-div, .slicepay-div, #CardDetail) { grid-column: span 3; } /* the methods keep their slots */
  html[data-auto-fields="on"] form.payment-form > .row:first-of-type > .col-lg-6 > .align-center.padding-10,
  html[data-auto-fields="on"] form.payment-form > .row:first-of-type > .col-lg-6 ~ .col-lg-6 > .align-center.padding-10,
  html[data-auto-fields="on"] form.payment-form > .row:first-of-type > .col-lg-6 > .text-danger,
  html[data-auto-fields="on"] form.payment-form > .row:first-of-type > .col-lg-6 ~ .col-lg-6 > .text-danger { grid-column: 1 / -1; }
  html[data-auto-fields="on"] form.payment-form > .row:first-of-type > .col-lg-6 > .form-group { grid-column: span 3; }
  html[data-auto-fields="on"] form.payment-form > .row:first-of-type > .col-lg-6 ~ .col-lg-6 > .align-center.padding-10 { display: none; } /* one continuous set of fields: the second title goes */
  /* Payment Amount stays at the top right: it and the first "Your Details" field move ahead of the rest (order -1, page order between them), so they take the first row, and the title stays above both. */
  html[data-auto-fields="on"] form.payment-form > .row:first-of-type > .col-lg-6 > .align-center.padding-10 { order: -2; }
  html[data-auto-fields="on"] form.payment-form > .row:first-of-type > .col-lg-6:has(+ .col-lg-6) > .align-center.padding-10 + .form-group,
  html[data-auto-fields="on"] form.payment-form > .row:first-of-type > .col-lg-6 ~ .col-lg-6 > .form-group:has(#PaymentAmount) { order: -1; }
}