/*
 * style-split.css — "split" variant: one wide card, two panes.
 * Left pane: brand gradient holding the merchant logo/title and the "Your Details" fields.
 * Right pane: white payment pane with the pay buttons grouped at the bottom. Panes stack on phones.
 * Loaded INSTEAD of webpay-overrides.css, so it carries every fix that file has. CSS only; Open Sans / system stack.
 *
 * Layout trick: markup cannot move, so the wrapper that holds the header row + <form> becomes the card grid and
 * the <form> is `display: contents`, which lets its columns sit in the same grid as the header.
 */

:root {
  --sp-brand-a: #0b1f44;
  --sp-brand-b: #12408a;
  --sp-brand-c: #1786d6;
  --sp-accent: #0f6fc2;
  --sp-accent-2: #1d4ed8;
  --sp-ink: #1b2533;
  --sp-muted: #6a7588;
  --sp-line: #d8dee8;
  --sp-danger: #d64545;
  --sp-page: #eaeff6;
  --sp-card: #ffffff;
  --sp-field: #ffffff;
  --sp-foot: #f7f9fc;
  --sp-shadow: 0 2px 4px rgba(16, 24, 40, .05), 0 24px 60px rgba(16, 24, 40, .16);
  --sp-left-w: 380px;
}

/* ---------- page ---------- */
body {
  font-family: "Open Sans", "Segoe UI", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  background: radial-gradient(900px 420px at 15% -80px, #d3e4f7 0, transparent 70%), var(--sp-page);
  color: var(--sp-ink);
  font-size: 14px;
  line-height: 1.6;
  min-height: 100vh;
}
.container {
  max-width: 1040px;
  padding-bottom: 48px;
}
.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: 10px 14px 0 0;
}
#navbar .navbar-container { padding: 0; }
#navbar .ace-nav > li > a {
  background: var(--sp-card) !important; /* Ace paints the nav link with !important */
  color: var(--sp-ink) !important;
  border: 1px solid var(--sp-line);
  border-radius: 999px;
  height: 44px;
  line-height: 1.2;
  padding: 0 14px 0 6px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .06);
}
#navbar .nav-user-photo { width: 32px; height: 32px; margin: 5px 8px 0 0; }
#navbar .user-info { font-size: 13px; max-width: none; line-height: 1.15; padding-top: 7px; }
#navbar .user-info small { color: var(--sp-muted); }
#navbar .ace-nav > li > a > .ace-icon { color: var(--sp-muted); }
/* Split has one fixed layout: the "fields in two columns" and "payment buttons two to a row" preview buttons (webpay-theme-toggle.js) change nothing here, so they are hidden. */
.webpay-theme-li:has(#webpayFieldsToggle, #webpayColsToggle) { display: none; }
.ace-nav > li > .dropdown-menu {
  border: 1px solid var(--sp-line);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(16, 24, 40, .14);
  overflow: hidden;
}

/* ---------- the card: a two-column grid ---------- */
.page-content.layout-page-content > .row > .col-lg-12 {
  float: none;
  width: auto;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(300px, var(--sp-left-w)) minmax(0, 1fr);
  grid-template-rows: auto auto 1fr auto;
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  box-shadow: var(--sp-shadow);
  background:
    radial-gradient(420px 420px at 0% 100%, rgba(23, 134, 214, .55) 0, transparent 70%),
    radial-gradient(320px 320px at 100% 0%, rgba(255, 255, 255, .10) 0, transparent 70%),
    linear-gradient(155deg, var(--sp-brand-a) 0%, var(--sp-brand-b) 55%, var(--sp-brand-c) 130%);
}
/* decorative rings in the brand pane */
.page-content.layout-page-content > .row > .col-lg-12::before,
.page-content.layout-page-content > .row > .col-lg-12::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .14);
  pointer-events: none;
}
.page-content.layout-page-content > .row > .col-lg-12::before { width: 360px; height: 360px; left: -150px; bottom: -120px; }
.page-content.layout-page-content > .row > .col-lg-12::after { width: 220px; height: 220px; left: -60px; bottom: -50px; }

/* the form dissolves so its columns join the card grid */
form.payment-form,
form.payment-form > .row:first-of-type { display: contents; }

/* ---------- brand pane: logo + title ---------- */
.page-content .row > .col-lg-12 > .row:first-child {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  padding: 40px 36px 12px;
  position: relative;
  z-index: 1;
}
.page-content .row > .col-lg-12 > .row:first-child > .col-lg-12 { padding: 0; float: none; width: auto; }
.page-content .row > .col-lg-12 > .row:first-child img {
  display: block;
  margin: 0 0 22px !important; /* inline style="margin:auto" centres it; the brand pane is left-aligned */
  padding: 10px 14px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
  max-width: 220px !important;
  max-height: 96px !important;
  width: auto;
}
.page-content .row > .col-lg-12 > .row:first-child .align-center { text-align: left; }
.page-content .row > .col-lg-12 > .row:first-child .align-center > span {
  display: block;
  text-align: left;
  margin: 0 !important; /* inline margin-top on the title span */
  font-size: 24px !important; /* inline font-size: 25px */
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.3px;
  color: #fff;
}
.page-content .row > .col-lg-12 > .row:first-child .align-center > p {
  margin: 8px 0 0;
  text-align: left;
  font-size: 14px;
  color: rgba(255, 255, 255, .78);
}

/* ---------- column placement ---------- */
/* error summary: brand pane, under the title */
form.payment-form > .row:first-of-type > .col-lg-12 {
  grid-column: 1;
  grid-row: 2;
  float: none;
  width: auto;
  padding: 0 36px;
  position: relative;
  z-index: 1;
}
form.payment-form > .row:first-of-type > .col-lg-12 .validation-summary-errors {
  background: rgba(255, 90, 90, .16);
  border: 1px solid rgba(255, 170, 170, .5);
  color: #ffe1e1;
  border-radius: 10px;
  padding: 10px 14px;
  margin: 8px 0 4px;
}
form.payment-form > .row:first-of-type > .col-lg-12 .validation-summary-errors ul { margin: 0; padding-left: 18px; }

/* Your Details (brand pane) */
form.payment-form > .row:first-of-type > .col-lg-6 {
  grid-column: 1;
  grid-row: 3;
  float: none;
  width: auto;
  padding: 18px 36px 40px;
  position: relative;
  z-index: 1;
}
/* Payment Details (white pane) — spans the full height beside the brand pane */
form.payment-form > .row:first-of-type > .col-lg-6 ~ .col-lg-6 {
  grid-column: 2;
  grid-row: 1 / 4;
  padding: 40px 44px 28px;
  display: flex;
  flex-direction: column;
  background: var(--sp-card);
}

/* section titles */
form.payment-form .align-center.padding-10 {
  text-align: left !important;
  padding: 0 0 8px;
  margin-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .2);
}
form.payment-form .align-center.padding-10 > span {
  display: block;
  text-align: left !important;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .92);
}
form.payment-form > .row:first-of-type > .col-lg-6 ~ .col-lg-6 .align-center.padding-10 { border-bottom-color: #eaeef4; }
form.payment-form > .row:first-of-type > .col-lg-6 ~ .col-lg-6 .align-center.padding-10 > span { color: var(--sp-accent); }

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

.form-control,
form.payment-form input.form-control {
  height: 46px;
  padding: 10px 14px;
  font-size: 15px;
  border-radius: 10px !important; /* Ace squares inputs off with !important on input[type=text] */
  box-shadow: none;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.field-validation-error,
.text-danger {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
}

/* brand-pane fields: glassy */
form.payment-form > .row:first-of-type > .col-lg-6 label.control-label { color: rgba(255, 255, 255, .88); }
form.payment-form > .row:first-of-type > .col-lg-6 .required { color: #ffb3b3; }
form.payment-form > .row:first-of-type > .col-lg-6 .fa-info-circle { color: rgba(255, 255, 255, .8); }
form.payment-form > .row:first-of-type > .col-lg-6 input.form-control {
  color: #fff;
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .28);
}
form.payment-form > .row:first-of-type > .col-lg-6 input.form-control:hover { border-color: rgba(255, 255, 255, .5); }
form.payment-form > .row:first-of-type > .col-lg-6 input.form-control:focus {
  background: rgba(255, 255, 255, .18);
  border-color: #fff;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .18) !important; /* !important: Ace forces box-shadow: none !important on .form-control */
  outline: 0;
}
form.payment-form > .row:first-of-type > .col-lg-6 input.form-control::placeholder { color: rgba(255, 255, 255, .85); }
form.payment-form > .row:first-of-type > .col-lg-6 input.form-control:-webkit-autofill {
  -webkit-text-fill-color: #fff;
  transition: background-color 9999s ease 0s;
}
form.payment-form > .row:first-of-type > .col-lg-6 .field-validation-error,
form.payment-form > .row:first-of-type > .col-lg-6 .text-danger { color: #ffd0d0; }
form.payment-form > .row:first-of-type > .col-lg-6 input.input-validation-error,
form.payment-form > .row:first-of-type > .col-lg-6 .has-error input.form-control {
  border-color: #ff9d9d;
  background: rgba(255, 90, 90, .18);
}

/* payment-pane fields: clean white */
form.payment-form > .row:first-of-type > .col-lg-6 ~ .col-lg-6 label.control-label { color: #3a4556; }
form.payment-form > .row:first-of-type > .col-lg-6 ~ .col-lg-6 .required { color: var(--sp-danger); }
form.payment-form > .row:first-of-type > .col-lg-6 ~ .col-lg-6 .fa-info-circle { color: var(--sp-accent); }
form.payment-form > .row:first-of-type > .col-lg-6 ~ .col-lg-6 input.form-control {
  color: var(--sp-ink);
  background: var(--sp-field);
  border: 1px solid var(--sp-line);
}
form.payment-form > .row:first-of-type > .col-lg-6 ~ .col-lg-6 input.form-control:hover { border-color: #b7c1d0; }
form.payment-form > .row:first-of-type > .col-lg-6 ~ .col-lg-6 input.form-control:focus {
  background: var(--sp-field);
  border-color: var(--sp-accent);
  box-shadow: 0 0 0 4px rgba(15, 111, 194, .16) !important;
}
form.payment-form > .row:first-of-type > .col-lg-6 ~ .col-lg-6 input.form-control::placeholder { color: #687280; }
/* the brand-pane autofill rule above also matches these inputs: keep autofilled text dark on the white pane */
form.payment-form > .row:first-of-type > .col-lg-6 ~ .col-lg-6 input.form-control:-webkit-autofill { -webkit-text-fill-color: var(--sp-ink); }
form.payment-form > .row:first-of-type > .col-lg-6 ~ .col-lg-6 .field-validation-error,
form.payment-form > .row:first-of-type > .col-lg-6 ~ .col-lg-6 .text-danger { color: var(--sp-danger); }
form.payment-form > .row:first-of-type > .col-lg-6 ~ .col-lg-6 input.input-validation-error,
form.payment-form > .row:first-of-type > .col-lg-6 ~ .col-lg-6 .has-error input.form-control {
  border-color: var(--sp-danger);
  background: #fff8f8;
}
form.payment-form > .row:first-of-type > .col-lg-6 ~ .col-lg-6 input.input-validation-error:focus { box-shadow: 0 0 0 4px rgba(214, 69, 69, .16) !important; }

/* amount: prefix + larger figure */
.input-group-addon {
  color: var(--sp-muted);
  background: #f1f4f9;
  font-weight: 600;
  border: 1px solid var(--sp-line);
  border-right: 0;
  border-radius: 10px 0 0 10px !important;
  padding: 0 16px;
}
.input-group .form-control,
form.payment-form .input-group input.form-control { border-radius: 0 10px 10px 0 !important; }
#PaymentAmount { font-size: 22px; font-weight: 600; letter-spacing: .01em; }

/* ---------- pay buttons, grouped at the bottom of the payment pane ---------- */
/* the first wallet block starts the group: pushed to the bottom, set off by a rule */
.form-group + .apple-div {
  margin-top: auto;
  padding-top: 22px;
  border-top: 1px solid #eaeef4;
}
/* 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; }
/* 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; }

/* nested columns add padding twice: flatten so all buttons share one width */
.apple-div .col-xs-12,
.payto-div .col-xs-12,
.slicepay-div .col-xs-12,
#CardDetail .col-xs-12 { padding-left: 0; padding-right: 0; float: none; }

.btn-black,
.btn-recaptcha {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
  max-width: none;
  height: 54px;
  margin: 0;
  padding: 0 20px !important; /* the Card button has inline padding:0 */
  border: 0 !important;
  outline: 0 !important; /* .btn-black draws a 1px grey outline */
  border-radius: 12px !important;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .01em;
  color: #fff;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .15s ease, background-color .15s ease, filter .15s ease;
}
.btn-recaptcha:active { transform: translateY(1px); }
.btn-recaptcha:focus-visible { outline: 3px solid rgba(15, 111, 194, .45) !important; outline-offset: 2px; }
.btn-recaptcha .fa { color: rgba(255, 255, 255, .92); font-size: 22px !important; }

/* card = primary action */
.btn-recaptcha[data-paymentmethod="Card"] {
  background: linear-gradient(135deg, var(--sp-accent) 0%, var(--sp-accent-2) 100%);
  box-shadow: 0 6px 16px rgba(29, 78, 216, .32);
}
.btn-recaptcha[data-paymentmethod="Card"]:hover {
  filter: brightness(1.08);
  box-shadow: 0 10px 24px rgba(29, 78, 216, .4);
}
/* wallet / bank = dark, to suit vendor logos */
.btn-recaptcha[data-paymentmethod="AliPayPlus"],
.btn-recaptcha[data-paymentmethod="PayTo"] {
  background: #0d1424;
  box-shadow: 0 2px 8px rgba(13, 20, 36, .25);
}
.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: #1c2740;
  box-shadow: 0 8px 20px rgba(13, 20, 36, .3);
}

/* Apple Pay: Apple's SDK element, sized through its own variables */
apple-pay-button {
  display: block;
  width: 100%;
  --apple-pay-button-width: 100%;
  --apple-pay-button-height: 54px;
  --apple-pay-button-border-radius: 12px;
  --apple-pay-button-padding: 0;
  --apple-pay-button-box-sizing: border-box;
}
/* Google Pay: the script injects its button into #google-pay-div; stretch it to match */
#google-pay-div button,
#google-pay-div .gpay-card-info-container {
  width: 100% !important; /* Google sets inline sizes */
  height: 54px !important;
  min-height: 54px !important;
  border-radius: 12px !important;
  background-size: contain !important;
  box-shadow: 0 2px 8px rgba(13, 20, 36, .25);
}
.apple-div .form-group,
#CardDetail .form-group,
.payto-div .form-group { margin-bottom: 0; }

/* captions above buttons */
#CardDetail > .col-xs-12 { margin-bottom: 0; }
#CardDetail > .col-xs-12 .text-center { margin-bottom: 4px; }
#CardDetail > .col-xs-12 span {
  font-family: "Open Sans", "Segoe UI", Arial, sans-serif !important; /* inline verdana */
  font-size: 12px !important; /* inline 10pt */
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sp-muted) !important; /* inline blue */
}
.payto-div p { margin: 0 0 10px; text-align: center; }
.payto-div p strong {
  font-size: 12px !important; /* inline 13.33px */
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sp-muted);
}

/* "OR" divider */
.separator {
  color: var(--sp-muted);
  font-size: 11px;
  letter-spacing: .14em;
  margin: 16px 0;
}
.separator::before,
.separator::after { border-bottom: 1px solid #e3e8f0; }

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

/* ---------- footer: full-width strip under both panes ---------- */
form.payment-form > .row:last-of-type { display: none; }
form.payment-form > .row:nth-last-of-type(2) {
  grid-column: 1 / -1;
  grid-row: 4;
  margin: 0;
  padding: 18px 44px;
  background: var(--sp-foot);
  border-top: 1px solid #e6ebf2;
  position: relative;
  z-index: 1;
}
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(--sp-muted) !important; font-size: 12.5px !important; } /* inline colour/size from the CMS */

/* ---------- stacked panes: tablet and phone ---------- */
@media (max-width: 860px) {
  .page-content.layout-page-content > .row > .col-lg-12 { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .page-content.layout-page-content > .row > .col-lg-12::before { left: auto; right: -140px; bottom: auto; top: -140px; }
  .page-content.layout-page-content > .row > .col-lg-12::after { left: auto; right: -40px; bottom: auto; top: -40px; }
  .page-content .row > .col-lg-12 > .row:first-child { grid-row: 1; padding: 30px 24px 8px; }
  form.payment-form > .row:first-of-type > .col-lg-12 { grid-row: 2; padding: 0 24px; }
  form.payment-form > .row:first-of-type > .col-lg-6 { grid-row: 3; padding: 14px 24px 32px; }
  form.payment-form > .row:first-of-type > .col-lg-6 ~ .col-lg-6 { grid-column: 1; grid-row: 4; padding: 28px 24px 24px; }
  form.payment-form > .row:nth-last-of-type(2) { grid-row: 5; padding: 16px 24px; }
}
@media (max-width: 767px) {
  .page-content.layout-page-content { padding: 8px 10px 0; }
  .container { padding-left: 0; padding-right: 0; }
  .page-content.layout-page-content > .row { margin-left: 0; margin-right: 0; }
  .page-content.layout-page-content > .row > .col-lg-12 { border-radius: 18px; }
  .page-content .row > .col-lg-12 > .row:first-child .align-center > span { font-size: 21px !important; }
  .btn-recaptcha { white-space: nowrap; gap: 6px; font-size: 15px; padding: 0 12px !important; }
  .btn-recaptcha .fa { font-size: 18px !important; }
  form.payment-form > .row:nth-last-of-type(2) span { font-size: 12px !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"]) {
    --sp-brand-a: #050b18;
    --sp-brand-b: #0b2247;
    --sp-brand-c: #0e5c9e;
    --sp-ink: #e7ecf4;
    --sp-muted: #97a3b7;
    --sp-line: #2c3748;
    --sp-page: #070a11;
    --sp-card: #10161f;
    --sp-field: #0b1018;
    --sp-foot: #0c121a;
    --sp-accent: #4da3ee;
    --sp-accent-2: #2f6bf0;
    --sp-danger: #ff7b7b;
    --sp-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 28px 70px rgba(0, 0, 0, .65);
  }
  :root:not([data-theme="light"]) body { background: radial-gradient(900px 420px at 15% -80px, #10233f 0, transparent 70%), var(--sp-page); }
  :root:not([data-theme="light"]) #navbar .ace-nav > li > a { box-shadow: none; }
  :root:not([data-theme="light"]) .ace-nav > li > .dropdown-menu { background: var(--sp-card); }
  :root:not([data-theme="light"]) .ace-nav > li > .dropdown-menu > li > a { color: var(--sp-ink); }
  :root:not([data-theme="light"]) .ace-nav > li > .dropdown-menu > li > a:hover { background: #182130; color: var(--sp-ink); }

  :root:not([data-theme="light"]) form.payment-form > .row:first-of-type > .col-lg-6 ~ .col-lg-6 .align-center.padding-10 { border-bottom-color: #222c3a; }
  :root:not([data-theme="light"]) form.payment-form > .row:first-of-type > .col-lg-6 ~ .col-lg-6 label.control-label { color: #c3ccda; }
  :root:not([data-theme="light"]) form.payment-form > .row:first-of-type > .col-lg-6 ~ .col-lg-6 input.form-control:hover { border-color: #46546b; }
  :root:not([data-theme="light"]) form.payment-form > .row:first-of-type > .col-lg-6 ~ .col-lg-6 input.form-control:focus { box-shadow: 0 0 0 4px rgba(77, 163, 238, .22) !important; }
  :root:not([data-theme="light"]) form.payment-form > .row:first-of-type > .col-lg-6 ~ .col-lg-6 input.form-control::placeholder { color: #798597; }
  :root:not([data-theme="light"]) form.payment-form > .row:first-of-type > .col-lg-6 ~ .col-lg-6 input.input-validation-error,:root:not([data-theme="light"]) form.payment-form > .row:first-of-type > .col-lg-6 ~ .col-lg-6 .has-error input.form-control { background: #2a1519; }
  :root:not([data-theme="light"]) form.payment-form > .row:first-of-type > .col-lg-6 ~ .col-lg-6 input.input-validation-error:focus { box-shadow: 0 0 0 4px rgba(255, 123, 123, .2) !important; }
  :root:not([data-theme="light"]) form.payment-form > .row:first-of-type > .col-lg-6 ~ .col-lg-6 input.form-control:-webkit-autofill {
    -webkit-text-fill-color: var(--sp-ink);
    transition: background-color 9999s ease 0s;
  }
  :root:not([data-theme="light"]) .input-group-addon { background: #182130; color: var(--sp-muted); }

  :root:not([data-theme="light"]) .form-group + .apple-div { border-top-color: #222c3a; }
  :root:not([data-theme="light"]) .separator::before,:root:not([data-theme="light"]) .separator::after { border-bottom-color: #263142; }
  :root:not([data-theme="light"]) .btn-recaptcha[data-paymentmethod="AliPayPlus"],:root:not([data-theme="light"]) .btn-recaptcha[data-paymentmethod="PayTo"] {
    background: #05080e;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
  }
  :root:not([data-theme="light"]) .btn-recaptcha[data-paymentmethod="AliPayPlus"]:hover,:root:not([data-theme="light"]) .btn-recaptcha[data-paymentmethod="WeChat"]:hover,:root:not([data-theme="light"]) .btn-recaptcha[data-paymentmethod="UnionPay"]:hover,:root:not([data-theme="light"]) .btn-recaptcha[data-paymentmethod="PayTo"]:hover { background: #151d2b; }
  :root:not([data-theme="light"]) .btn-recaptcha[data-paymentmethod="Card"] {
    background: linear-gradient(135deg, #1a68cc 0%, #2c60e6 100%);
    box-shadow: 0 6px 20px rgba(47, 107, 240, .4);
  }
  :root:not([data-theme="light"]) .btn-recaptcha:focus-visible { outline-color: rgba(77, 163, 238, .6) !important; }
  :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"]) .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: inset 0 0 0 1px rgba(255, 255, 255, .22); }

  :root:not([data-theme="light"]) form.payment-form > .row:nth-last-of-type(2) { border-top-color: #1d2633; }
  /* footer logos are drawn for light backgrounds: sit them on a soft light chip */
  :root:not([data-theme="light"]) form.payment-form > .row:nth-last-of-type(2) img {
    background: #f1f4f9;
    border-radius: 6px;
    padding: 3px 6px;
    opacity: .95;
  }
}

  :root[data-theme="dark"] {
    --sp-brand-a: #050b18;
    --sp-brand-b: #0b2247;
    --sp-brand-c: #0e5c9e;
    --sp-ink: #e7ecf4;
    --sp-muted: #97a3b7;
    --sp-line: #2c3748;
    --sp-page: #070a11;
    --sp-card: #10161f;
    --sp-field: #0b1018;
    --sp-foot: #0c121a;
    --sp-accent: #4da3ee;
    --sp-accent-2: #2f6bf0;
    --sp-danger: #ff7b7b;
    --sp-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 28px 70px rgba(0, 0, 0, .65);
  }
  :root[data-theme="dark"] body { background: radial-gradient(900px 420px at 15% -80px, #10233f 0, transparent 70%), var(--sp-page); }
  :root[data-theme="dark"] #navbar .ace-nav > li > a { box-shadow: none; }
  :root[data-theme="dark"] .ace-nav > li > .dropdown-menu { background: var(--sp-card); }
  :root[data-theme="dark"] .ace-nav > li > .dropdown-menu > li > a { color: var(--sp-ink); }
  :root[data-theme="dark"] .ace-nav > li > .dropdown-menu > li > a:hover { background: #182130; color: var(--sp-ink); }

  :root[data-theme="dark"] form.payment-form > .row:first-of-type > .col-lg-6 ~ .col-lg-6 .align-center.padding-10 { border-bottom-color: #222c3a; }
  :root[data-theme="dark"] form.payment-form > .row:first-of-type > .col-lg-6 ~ .col-lg-6 label.control-label { color: #c3ccda; }
  :root[data-theme="dark"] form.payment-form > .row:first-of-type > .col-lg-6 ~ .col-lg-6 input.form-control:hover { border-color: #46546b; }
  :root[data-theme="dark"] form.payment-form > .row:first-of-type > .col-lg-6 ~ .col-lg-6 input.form-control:focus { box-shadow: 0 0 0 4px rgba(77, 163, 238, .22) !important; }
  :root[data-theme="dark"] form.payment-form > .row:first-of-type > .col-lg-6 ~ .col-lg-6 input.form-control::placeholder { color: #798597; }
  :root[data-theme="dark"] form.payment-form > .row:first-of-type > .col-lg-6 ~ .col-lg-6 input.input-validation-error,:root[data-theme="dark"] form.payment-form > .row:first-of-type > .col-lg-6 ~ .col-lg-6 .has-error input.form-control { background: #2a1519; }
  :root[data-theme="dark"] form.payment-form > .row:first-of-type > .col-lg-6 ~ .col-lg-6 input.input-validation-error:focus { box-shadow: 0 0 0 4px rgba(255, 123, 123, .2) !important; }
  :root[data-theme="dark"] form.payment-form > .row:first-of-type > .col-lg-6 ~ .col-lg-6 input.form-control:-webkit-autofill {
    -webkit-text-fill-color: var(--sp-ink);
    transition: background-color 9999s ease 0s;
  }
  :root[data-theme="dark"] .input-group-addon { background: #182130; color: var(--sp-muted); }

  :root[data-theme="dark"] .form-group + .apple-div { border-top-color: #222c3a; }
  :root[data-theme="dark"] .separator::before,:root[data-theme="dark"] .separator::after { border-bottom-color: #263142; }
  :root[data-theme="dark"] .btn-recaptcha[data-paymentmethod="AliPayPlus"],:root[data-theme="dark"] .btn-recaptcha[data-paymentmethod="PayTo"] {
    background: #05080e;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
  }
  :root[data-theme="dark"] .btn-recaptcha[data-paymentmethod="AliPayPlus"]:hover,:root[data-theme="dark"] .btn-recaptcha[data-paymentmethod="WeChat"]:hover,:root[data-theme="dark"] .btn-recaptcha[data-paymentmethod="UnionPay"]:hover,:root[data-theme="dark"] .btn-recaptcha[data-paymentmethod="PayTo"]:hover { background: #151d2b; }
  :root[data-theme="dark"] .btn-recaptcha[data-paymentmethod="Card"] {
    background: linear-gradient(135deg, #1a68cc 0%, #2c60e6 100%);
    box-shadow: 0 6px 20px rgba(47, 107, 240, .4);
  }
  :root[data-theme="dark"] .btn-recaptcha:focus-visible { outline-color: rgba(77, 163, 238, .6) !important; }
  :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"] .btn-recaptcha[data-paymentmethod="WeChat"],:root[data-theme="dark"] .btn-recaptcha[data-paymentmethod="UnionPay"],:root[data-theme="dark"] apple-pay-button { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }

  :root[data-theme="dark"] form.payment-form > .row:nth-last-of-type(2) { border-top-color: #1d2633; }
  /* footer logos are drawn for light backgrounds: sit them on a soft light chip */
  :root[data-theme="dark"] form.payment-form > .row:nth-last-of-type(2) img {
    background: #f1f4f9;
    border-radius: 6px;
    padding: 3px 6px;
    opacity: .95;
  }

/* ---------- 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) */
#CardDetail > .col-xs-12:first-child,
#CardDetail .space-12 { display: none; }
#DisplayCardLogos { padding-top: 0 !important; } /* inline padding-top:15px */

/* The subtitle sits on the dark hero (bold) / dark left panel (split) in both themes, so it cannot use the page's dark text colour. */
.page-content .align-center > h3 { color: rgba(255, 255, 255, .82); }

/* 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; }