/*
 * style-soft.css — "soft" variant of the public one-off payment page overlay.
 * Replaces webpay-overrides.css (loaded instead of it), so it carries every fix that file has.
 * Friendly, rounded, pastel/glass. Bootstrap 3 / Ace / Open Sans / Font Awesome only; no JS, images or url().
 * `!important` appears only where Ace's own !important rules or the page's inline style="" attributes must be beaten.
 */

:root {
  --s-ink: #3a2e4a;
  --s-muted: #7d7190;
  --s-label: #5a4d6e;
  --s-accent: #ff7a59;
  --s-accent-2: #ff5f8a;
  --s-accent-glow: rgba(255, 106, 120, .42);
  --s-btn-a: #c2410c; /* Card button only: darker than the accent so white text stays at 4.5:1 or more */
  --s-btn-b: #be185d;
  --s-focus: rgba(167, 139, 250, .35);
  --s-danger: #e0416a;
  --s-danger-bg: #fff0f4;
  --s-glass: rgba(255, 255, 255, .62);
  --s-glass-line: rgba(255, 255, 255, .85);
  --s-field: rgba(255, 255, 255, .8);
  --s-field-line: rgba(160, 140, 190, .28);
  --s-field-line-hover: rgba(160, 140, 190, .55);
  --s-divider: rgba(160, 140, 190, .25);
  --s-shadow: 0 2px 4px rgba(120, 90, 160, .06), 0 24px 60px rgba(140, 100, 180, .2);
  --s-wallet: #2b2238;
  --s-wallet-hover: #3d3150;
  --s-wallet-glow: rgba(60, 40, 90, .35);
  --s-chip: rgba(255, 255, 255, .7);
  --s-bg:
    radial-gradient(60vmax 50vmax at 8% 0%, #ffd9c7 0, transparent 60%),
    radial-gradient(55vmax 55vmax at 100% 10%, #dccbff 0, transparent 60%),
    radial-gradient(60vmax 50vmax at 70% 100%, #c7f2e0 0, transparent 60%),
    linear-gradient(160deg, #fff1e8, #f3ecff 55%, #e8faf2);
  --s-radius: 28px;
  --s-pill: 999px;
  --s-font: "Open Sans", "Segoe UI", system-ui, Arial, sans-serif;
}

/* ---------- page ---------- */
html { background: #f3ecff; }
body {
  font-family: var(--s-font);
  -webkit-font-smoothing: antialiased;
  background: var(--s-bg);
  color: var(--s-ink);
  font-size: 14px;
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
}
.container { max-width: 900px; padding-bottom: 56px; }
.page-content.layout-page-content { background: transparent; border: 0; padding: 0 12px; }

/* ---------- top bar ---------- */
#navbar {
  background: transparent;
  border: 0;
  box-shadow: none;
  min-height: 0;
  margin: 14px 14px 0 0;
}
#navbar .navbar-container { padding: 0; }
#navbar .ace-nav > li > a {
  background: var(--s-chip) !important; /* Ace paints the nav link with its skin colour */
  color: var(--s-ink) !important;
  border: 1px solid var(--s-glass-line);
  border-radius: var(--s-pill);
  height: 46px;
  line-height: 1.2;
  padding: 0 16px 0 6px;
  box-shadow: 0 6px 18px rgba(140, 100, 180, .14);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: box-shadow .2s ease, transform .2s ease;
}
#navbar .ace-nav > li > a:hover { box-shadow: 0 10px 26px rgba(140, 100, 180, .24); transform: translateY(-1px); }
#navbar .nav-user-photo { width: 34px; height: 34px; margin: 5px 8px 0 0; }
#navbar .user-info { font-size: 13px; max-width: none; line-height: 1.15; padding-top: 8px; }
#navbar .user-info small { color: var(--s-muted); }
#navbar .ace-nav > li > a > .ace-icon { color: var(--s-muted); }
.ace-nav > li > .dropdown-menu {
  border: 1px solid var(--s-glass-line);
  border-radius: 20px;
  background: var(--s-glass);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: var(--s-shadow);
  overflow: hidden;
}
.ace-nav > li > .dropdown-menu > li > a { color: var(--s-ink); }

/* ---------- heading ---------- */
.page-content .row > .col-lg-12 > img {
  background: var(--s-glass);
  padding: 10px 18px;
  border-radius: 22px;
  box-shadow: 0 8px 24px rgba(140, 100, 180, .14);
}
.page-content .row > .col-lg-12 > .align-center > span {
  display: block;
  margin: 10px 0 0 !important; /* page sets margin-top and font-size inline */
  font-size: 30px !important;
  font-weight: 800;
  letter-spacing: -.3px;
  color: var(--s-ink);
}
.page-content .row > .col-lg-12 > .align-center > p {
  display: inline-block;
  margin: 8px 0 26px;
  padding: 4px 16px;
  border-radius: var(--s-pill);
  background: var(--s-chip);
  font-size: 14px;
  color: var(--s-muted);
}

/* ---------- the card ---------- */
form.payment-form {
  position: relative;
  background: var(--s-glass);
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
  backdrop-filter: blur(22px) saturate(1.4);
  border: 1px solid var(--s-glass-line);
  border-radius: var(--s-radius);
  box-shadow: var(--s-shadow);
  padding: 38px 34px 22px;
  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; }

/* section titles: "Your Details" / "Payment Details" */
form.payment-form .align-center.padding-10 {
  text-align: left !important; /* Ace's .align-center is !important */
  padding: 0 0 4px;
  margin-bottom: 18px;
}
form.payment-form .align-center.padding-10 > span {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  text-align: left !important;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--s-ink);
}
form.payment-form .align-center.padding-10 > span::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--s-accent), var(--s-accent-2));
  box-shadow: 0 0 0 4px rgba(255, 122, 89, .18);
}

/* ---------- fields ---------- */
.form-group { margin-bottom: 20px; }
label.control-label {
  display: block;
  margin: 0 0 6px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--s-label);
  text-align: left;
}
.required { color: var(--s-danger); margin-left: 2px; }

.form-control,
form.payment-form input.form-control {
  height: 50px;
  padding: 10px 22px;
  font-size: 15px;
  color: var(--s-ink);
  background: var(--s-field);
  border: 1.5px solid var(--s-field-line);
  border-radius: var(--s-pill) !important; /* Ace squares input[type=text] with !important */
  box-shadow: inset 0 1px 2px rgba(120, 90, 160, .06);
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.form-control:hover { border-color: var(--s-field-line-hover); }
.form-control:focus,
form.payment-form input.form-control:focus {
  border-color: #a78bfa;
  background: #fff;
  box-shadow: 0 0 0 5px var(--s-focus) !important; /* !important: Ace forces box-shadow: none !important on .form-control */
  outline: 0;
}
.form-control::placeholder { color: #746985; }

/* amount: prefix chip + larger figure */
.input-group { display: flex; }
.input-group-addon,
form.payment-form .input-group .input-group-addon {
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, #ffe3d6, #ffd3e0);
  color: #b4433f;
  font-weight: 700;
  font-size: 16px;
  border: 1.5px solid var(--s-field-line);
  border-right: 0;
  border-radius: var(--s-pill) 0 0 var(--s-pill) !important;
  padding: 0 8px 0 20px;
}
.input-group .form-control,
form.payment-form .input-group input.form-control {
  flex: 1 1 auto;
  width: 1%;
  border-radius: 0 var(--s-pill) var(--s-pill) 0 !important;
}
#PaymentAmount { font-size: 20px; font-weight: 700; letter-spacing: .01em; }

/* validation */
.input-validation-error,
form.payment-form .has-error input.form-control,
.has-error .form-control {
  border-color: var(--s-danger);
  background: var(--s-danger-bg);
}
.input-validation-error:focus,
form.payment-form .has-error input.form-control:focus { box-shadow: 0 0 0 5px rgba(224, 65, 106, .2) !important; }
.field-validation-error,
.text-danger {
  display: block;
  margin: 6px 0 0 16px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--s-danger);
}
.validation-summary-errors {
  background: var(--s-danger-bg);
  border: 1px solid rgba(224, 65, 106, .3);
  border-radius: 20px;
  padding: 12px 18px;
  margin-bottom: 18px;
}
.validation-summary-errors ul { margin: 0; padding-left: 18px; }

.fa-info-circle { color: #a78bfa; }

/* ---------- pay buttons ---------- */
/* .btn-black (style-overrides.css) fixes min-width 150 / width 240 / height 40 and draws a grey outline: flatten it */
.btn-black,
.btn-recaptcha {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
  max-width: 440px;
  height: 56px;
  margin: 0 auto;
  padding: 0 22px !important; /* Card button has inline padding:0 */
  border: 0 !important;
  outline: 0 !important;
  border-radius: var(--s-pill) !important;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .01em;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.btn-recaptcha:hover { transform: translateY(-2px); }
.btn-recaptcha:active { transform: translateY(0) scale(.99); }
.btn-recaptcha:focus-visible { outline: 3px solid #a78bfa !important; outline-offset: 3px; }

/* wallet and bank buttons: dark pills */
.btn-recaptcha[data-paymentmethod="AliPayPlus"],
.btn-recaptcha[data-paymentmethod="PayTo"] {
  background: var(--s-wallet);
  color: #fff;
  box-shadow: 0 6px 16px var(--s-wallet-glow);
}
.btn-recaptcha[data-paymentmethod="AliPayPlus"]:hover,.btn-recaptcha[data-paymentmethod="WeChat"]:hover,.btn-recaptcha[data-paymentmethod="UnionPay"]:hover,
.btn-recaptcha[data-paymentmethod="PayTo"]:hover {
  background: var(--s-wallet-hover);
  box-shadow: 0 12px 26px var(--s-wallet-glow);
}

/* card button: the primary action, coloured glow */
.btn-recaptcha[data-paymentmethod="Card"] {
  background: linear-gradient(135deg, var(--s-btn-a), var(--s-btn-b));
  color: #fff;
  box-shadow: 0 10px 26px var(--s-accent-glow);
}
.btn-recaptcha[data-paymentmethod="Card"]:hover { box-shadow: 0 16px 34px var(--s-accent-glow); filter: saturate(1.1) brightness(1.03); }
.btn-recaptcha .fa { color: rgba(255, 255, 255, .95); font-size: 22px !important; } /* icons carry inline font-size */

/* Apple Pay: Apple's SDK element, sized through its own variables (not rendered in the local copy) */
apple-pay-button {
  display: block;
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  --apple-pay-button-width: 100%;
  --apple-pay-button-height: 56px;
  --apple-pay-button-border-radius: 999px;
  --apple-pay-button-padding: 0;
  --apple-pay-button-box-sizing: border-box;
}

/* Google Pay: Google's script injects the button into #google-pay-div; stretch and pill it */
#google-pay-div { max-width: 440px; margin-left: auto; margin-right: auto; }
/* 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; }
#google-pay-div button,
#google-pay-div .gpay-card-info-container {
  width: 100% !important; /* Google sets inline sizes */
  height: 56px !important;
  min-height: 56px !important;
  border-radius: var(--s-pill) !important;
  background-size: contain !important;
  box-shadow: 0 6px 16px var(--s-wallet-glow);
}

/* "Pay by Credit / Debit Card" and bank captions: inline verdana 10pt blue -> page font */
#CardDetail > .col-xs-12 { margin-bottom: 10px; }
#CardDetail > .col-xs-12 span,
.payto-div p strong {
  font-family: var(--s-font) !important;
  font-size: 13px !important;
  font-weight: 600;
  color: var(--s-muted) !important;
}
#CardDetail > .col-xs-12 strong { font-weight: 600; }

/* nested .col-xs-12 wrappers pad twice: flatten so every pay button shares one width */
.apple-div .col-xs-12,
.alipay-plus-div .col-xs-12,
.payto-div .col-xs-12,
.slicepay-div .col-xs-12,
#CardDetail .col-xs-12 { padding-left: 0; padding-right: 0; }

/* "OR" divider */
.separator {
  color: var(--s-muted);
  font-size: 12px;
  letter-spacing: .12em;
  margin: 8px 0 18px;
}
.separator::before,
.separator::after { border-top: 2px dotted var(--s-divider) !important; border-bottom: 0 !important; height: 0; }
.separator:not(:empty)::before { margin-right: .7em; }
.separator:not(:empty)::after { margin-left: .7em; }

/* stray white "." spacer paragraphs the live page uses for spacing */
p:has(> span[style*="#ffffff"]) { display: none; }
.space-12 { height: 6px; }

/* ---------- footer (CMS-pasted blob, second-to-last row) ---------- */
form.payment-form > .row:last-of-type { display: none; }
form.payment-form > .row:nth-last-of-type(2) {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 2px dotted var(--s-divider);
}
form.payment-form > .row:nth-last-of-type(2) > div { text-align: center; }
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: 26px; width: auto; vertical-align: middle; opacity: .92; }
form.payment-form > .row:nth-last-of-type(2) span {
  color: var(--s-muted) !important; /* inline colour/size on the pasted spans */
  font-size: 12.5px !important;
}

/* ---------- small screens ---------- */
@media (max-width: 767px) {
  .page-content.layout-page-content { padding-top: 10px; }
  .page-content .row > .col-lg-12 > .align-center > span { font-size: 24px !important; }
  form.payment-form { padding: 26px 18px 16px; border-radius: 24px; }
  .btn-recaptcha { white-space: nowrap; gap: 6px; font-size: 15px; padding: 0 14px !important; }
  .btn-recaptcha .fa { font-size: 18px !important; }
  .btn-black,
  .btn-recaptcha { max-width: none; }
  form.payment-form > .row:nth-last-of-type(2) span { font-size: 12px !important; }
  .container { padding-left: 4px; padding-right: 4px; }
}

/* ---------- dark: deep aubergine / indigo glass ---------- */
/* 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"]) {
    --s-ink: #f1e9ff;
    --s-muted: #b2a3cf;
    --s-label: #d6c9ee;
    --s-accent: #ff8a6b;
    --s-accent-2: #ff5f9a;
    --s-accent-glow: rgba(255, 95, 154, .38);
    --s-btn-a: #c8440f;
    --s-btn-b: #c21a63;
    --s-focus: rgba(167, 139, 250, .38);
    --s-danger: #ff7a9c;
    --s-danger-bg: rgba(255, 90, 130, .14);
    --s-glass: rgba(48, 30, 82, .55);
    --s-glass-line: rgba(200, 170, 255, .18);
    --s-field: rgba(20, 10, 44, .55);
    --s-field-line: rgba(200, 170, 255, .22);
    --s-field-line-hover: rgba(200, 170, 255, .45);
    --s-divider: rgba(200, 170, 255, .22);
    --s-shadow: 0 2px 4px rgba(0, 0, 0, .3), 0 30px 70px rgba(10, 0, 30, .55);
    --s-wallet: #0f0a1f;
    --s-wallet-hover: #1c1438;
    --s-wallet-glow: rgba(0, 0, 0, .5);
    --s-chip: rgba(60, 40, 100, .55);
    --s-bg:
      radial-gradient(60vmax 50vmax at 5% 0%, #5a2a6e 0, transparent 60%),
      radial-gradient(55vmax 55vmax at 100% 15%, #2d2a7a 0, transparent 60%),
      radial-gradient(60vmax 50vmax at 65% 100%, #3d1f5c 0, transparent 60%),
      linear-gradient(160deg, #1c0f33, #170f36 55%, #0f0a26);
  }
  :root:not([data-theme="light"]) { background: #170f36; }
  :root:not([data-theme="light"]) body { color-scheme: dark; }
  :root:not([data-theme="light"]) .form-control:focus,:root:not([data-theme="light"]) form.payment-form input.form-control:focus { background: rgba(20, 10, 44, .85); }
  :root:not([data-theme="light"]) .form-control::placeholder { color: #b2a6cb; }
  :root:not([data-theme="light"]) .input-group-addon,:root:not([data-theme="light"]) form.payment-form .input-group .input-group-addon { background: linear-gradient(135deg, rgba(255, 138, 107, .28), rgba(255, 95, 154, .28)); color: #ffc4b3; }
  :root:not([data-theme="light"]) .btn-recaptcha[data-paymentmethod="AliPayPlus"],:root:not([data-theme="light"]) .btn-recaptcha[data-paymentmethod="PayTo"],:root:not([data-theme="light"]) .btn-recaptcha[data-paymentmethod="WeChat"],:root:not([data-theme="light"]) .btn-recaptcha[data-paymentmethod="UnionPay"],:root:not([data-theme="light"]) apple-pay-button { box-shadow: 0 0 0 1px rgba(200, 170, 255, .28), 0 8px 20px var(--s-wallet-glow); }
  :root:not([data-theme="light"]) #google-pay-div button,:root:not([data-theme="light"]) #google-pay-div .gpay-card-info-container { box-shadow: 0 0 0 1px rgba(200, 170, 255, .28), 0 8px 20px var(--s-wallet-glow); }
  :root:not([data-theme="light"]) .fa-info-circle { color: #c4b0ff; }
  :root:not([data-theme="light"]) .page-content .row > .col-lg-12 > img { background: rgba(255, 255, 255, .92); }
  :root:not([data-theme="light"]) .ace-nav > li > .dropdown-menu > li > a:hover { background: rgba(167, 139, 250, .18); color: var(--s-ink); }
  :root:not([data-theme="light"]) .ace-nav > li > .dropdown-menu > li.divider { background: var(--s-divider); }
  :root:not([data-theme="light"]) .validation-summary-errors { border-color: rgba(255, 122, 156, .4); }
  /* footer logos are dark-on-transparent: give them a light pill so they stay legible */
  :root:not([data-theme="light"]) form.payment-form > .row:nth-last-of-type(2) img { background-color: rgba(255, 255, 255, .92) !important; /* pasted logos set an inline background */ border-radius: 10px; padding: 4px 8px; opacity: 1; box-sizing: content-box; }
}

  :root[data-theme="dark"] {
    --s-ink: #f1e9ff;
    --s-muted: #b2a3cf;
    --s-label: #d6c9ee;
    --s-accent: #ff8a6b;
    --s-accent-2: #ff5f9a;
    --s-accent-glow: rgba(255, 95, 154, .38);
    --s-btn-a: #c8440f;
    --s-btn-b: #c21a63;
    --s-focus: rgba(167, 139, 250, .38);
    --s-danger: #ff7a9c;
    --s-danger-bg: rgba(255, 90, 130, .14);
    --s-glass: rgba(48, 30, 82, .55);
    --s-glass-line: rgba(200, 170, 255, .18);
    --s-field: rgba(20, 10, 44, .55);
    --s-field-line: rgba(200, 170, 255, .22);
    --s-field-line-hover: rgba(200, 170, 255, .45);
    --s-divider: rgba(200, 170, 255, .22);
    --s-shadow: 0 2px 4px rgba(0, 0, 0, .3), 0 30px 70px rgba(10, 0, 30, .55);
    --s-wallet: #0f0a1f;
    --s-wallet-hover: #1c1438;
    --s-wallet-glow: rgba(0, 0, 0, .5);
    --s-chip: rgba(60, 40, 100, .55);
    --s-bg:
      radial-gradient(60vmax 50vmax at 5% 0%, #5a2a6e 0, transparent 60%),
      radial-gradient(55vmax 55vmax at 100% 15%, #2d2a7a 0, transparent 60%),
      radial-gradient(60vmax 50vmax at 65% 100%, #3d1f5c 0, transparent 60%),
      linear-gradient(160deg, #1c0f33, #170f36 55%, #0f0a26);
  }
  :root[data-theme="dark"] { background: #170f36; }
  :root[data-theme="dark"] body { color-scheme: dark; }
  :root[data-theme="dark"] .form-control:focus,:root[data-theme="dark"] form.payment-form input.form-control:focus { background: rgba(20, 10, 44, .85); }
  :root[data-theme="dark"] .form-control::placeholder { color: #b2a6cb; }
  :root[data-theme="dark"] .input-group-addon,:root[data-theme="dark"] form.payment-form .input-group .input-group-addon { background: linear-gradient(135deg, rgba(255, 138, 107, .28), rgba(255, 95, 154, .28)); color: #ffc4b3; }
  :root[data-theme="dark"] .btn-recaptcha[data-paymentmethod="AliPayPlus"],:root[data-theme="dark"] .btn-recaptcha[data-paymentmethod="PayTo"],:root[data-theme="dark"] .btn-recaptcha[data-paymentmethod="WeChat"],:root[data-theme="dark"] .btn-recaptcha[data-paymentmethod="UnionPay"],:root[data-theme="dark"] apple-pay-button { box-shadow: 0 0 0 1px rgba(200, 170, 255, .28), 0 8px 20px var(--s-wallet-glow); }
  :root[data-theme="dark"] #google-pay-div button,:root[data-theme="dark"] #google-pay-div .gpay-card-info-container { box-shadow: 0 0 0 1px rgba(200, 170, 255, .28), 0 8px 20px var(--s-wallet-glow); }
  :root[data-theme="dark"] .fa-info-circle { color: #c4b0ff; }
  :root[data-theme="dark"] .page-content .row > .col-lg-12 > img { background: rgba(255, 255, 255, .92); }
  :root[data-theme="dark"] .ace-nav > li > .dropdown-menu > li > a:hover { background: rgba(167, 139, 250, .18); color: var(--s-ink); }
  :root[data-theme="dark"] .ace-nav > li > .dropdown-menu > li.divider { background: var(--s-divider); }
  :root[data-theme="dark"] .validation-summary-errors { border-color: rgba(255, 122, 156, .4); }
  /* footer logos are dark-on-transparent: give them a light pill so they stay legible */
  :root[data-theme="dark"] form.payment-form > .row:nth-last-of-type(2) img { background-color: rgba(255, 255, 255, .92) !important; /* pasted logos set an inline background */ border-radius: 10px; padding: 4px 8px; opacity: 1; box-sizing: content-box; }


@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .btn-recaptcha:hover { transform: none; }
}

/* ---------- 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 side by side, the payment methods edge to edge underneath (from 992px) ---------- */
@media (min-width: 992px) {
  form.payment-form > .row:first-of-type { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; 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; grid-row: 2 / span 8; } /* "Your Details": a title and five fields, level with the eight items of the payment column */
  /* 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: 2; }
  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; }
}

/* 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 > * { grid-column: auto; }
  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: auto; }
  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; }
}

/* Two payment methods per row (preview toggle, webpay-theme-toggle.js): fixed rows far below any field row, so a method never slides up beside a shorter
   field column. Card with UnionPay keeps a full row first; then Google Pay | Alipay+, Bank | WeChat, Apple Pay | Slice Pay when present. */
@media (min-width: 992px) {
  html[data-method-cols="2"] form.payment-form > .row:first-of-type > .col-lg-6 ~ .col-lg-6 > #CardDetail { grid-column: 1 / -1; grid-row: 30; margin-top: 8px; }
  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; }
  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; 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: 2; 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; 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: 2; 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; 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: 2; grid-row: 33; }
  html[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) { padding-top: 0; margin-top: 0; margin-bottom: 8px; }
  html[data-method-cols="2"] form.payment-form > .row:first-of-type .separator { display: none; }
}