/*
 * style-bold-v2.css — "bold" variant, second attempt: confident, modern, high-contrast, refined.
 * A deep ink/indigo band runs full-bleed across the top and holds the logo + title; the form card overlaps it.
 * One accent (electric violet-blue) for section badges, focus rings and the Card button. Wallets stay black.
 * Loaded INSTEAD of webpay-overrides.css, so it carries every fix that file has. CSS only; Open Sans / system stack.
 * Dark theme lives in flat top-level prefers-color-scheme blocks at the bottom (no variables, concrete selectors).
 */

:root {
  --bd-ink: #0d1330;
  --bd-text: #141a33;
  --bd-muted: #5d6685;
  --bd-line: #d6dbec;
  --bd-accent: #4f46e5;
  --bd-accent-2: #7c3aed;
  --bd-danger: #d63a4a;
}

/* ---------- page + full-bleed band ---------- */
html { background: #eef0f8; }
body {
  font-family: "Open Sans", "Segoe UI", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  font-size: 14px;
  line-height: 1.6;
  color: var(--bd-text);
  min-height: 100vh;
  background:
    radial-gradient(700px 300px at 85% -40px, rgba(124, 58, 237, .55) 0, transparent 70%),
    radial-gradient(600px 260px at 10% 10px, rgba(79, 70, 229, .45) 0, transparent 70%),
    linear-gradient(160deg, #0b1026 0%, #151a52 100%),
    #eef0f8;
  background-repeat: no-repeat;
  background-size: 100% 360px, 100% 360px, 100% 360px, auto; /* band only; the last layer is the page colour */
}
.container {
  max-width: 940px;
  padding-bottom: 56px;
}
.page-content.layout-page-content {
  background: transparent;
  border: 0;
  padding: 0 12px;
}

/* ---------- top bar: glass pill on the band ---------- */
#navbar {
  background: transparent;
  border: 0;
  box-shadow: none;
  min-height: 0;
  margin: 12px 14px 0 0;
}
#navbar .navbar-container { padding: 0; }
#navbar .ace-nav > li > a {
  background: rgba(255, 255, 255, .12) !important; /* Ace paints the nav link with !important */
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  height: 44px;
  line-height: 1.2;
  padding: 0 14px 0 6px;
  box-shadow: none;
  transition: background-color .15s ease;
}
#navbar .ace-nav > li > a:hover { background: rgba(255, 255, 255, .22) !important; }
#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: rgba(255, 255, 255, .7); }
#navbar .ace-nav > li > a > .ace-icon { color: rgba(255, 255, 255, .8); }
.ace-nav > li > .dropdown-menu {
  border: 1px solid var(--bd-line);
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(13, 19, 48, .25);
  overflow: hidden;
}

/* ---------- header on the band: logo, title, subtitle ---------- */
.page-content .row > .col-lg-12 > .row:first-child {
  margin: 0;
  padding: 6px 0 0;
  text-align: center;
}
.page-content .row > .col-lg-12 > .row:first-child img {
  display: block;
  margin: 0 auto 18px !important; /* inline style="margin:auto" */
  padding: 10px 16px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
  max-width: 220px !important;
  max-height: 84px !important;
  width: auto;
}
.page-content .row > .col-lg-12 > .row:first-child .align-center > span {
  display: block;
  margin: 0 !important; /* inline margin-top on the title span */
  font-size: 36px !important; /* inline font-size: 25px */
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.8px;
  color: #fff;
}
.page-content .row > .col-lg-12 > .row:first-child .align-center > p {
  margin: 10px 0 0;
  font-size: 16px;
  color: rgba(255, 255, 255, .78);
}

/* ---------- the card, overlapping the band ---------- */
form.payment-form {
  position: relative;
  background: #fff;
  border: 1px solid rgba(214, 219, 236, .8);
  border-radius: 20px;
  box-shadow: 0 2px 4px rgba(13, 19, 48, .05), 0 12px 24px rgba(13, 19, 48, .08), 0 32px 64px rgba(13, 19, 48, .12);
  padding: 40px 36px 22px;
  margin: 44px 0 0;
  counter-reset: bd-step;
}
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: numbered badge + bold title */
form.payment-form .align-center.padding-10 {
  text-align: left !important;
  padding: 0;
  margin-bottom: 22px;
}
form.payment-form .align-center.padding-10 > span {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left !important;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.1px;
  color: var(--bd-text);
  counter-increment: bd-step;
}
form.payment-form .align-center.padding-10 > span::before {
  content: counter(bd-step);
  flex: none;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, var(--bd-accent), var(--bd-accent-2));
  box-shadow: 0 4px 10px rgba(79, 70, 229, .35);
}

/* ---------- fields ---------- */
.form-group { margin-bottom: 18px; }
label.control-label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 700;
  color: #2b3350;
  text-align: left;
}
.control-label .required,
.required { color: var(--bd-danger); margin-left: 2px; }

.form-control,
form.payment-form input.form-control {
  height: 54px;
  padding: 10px 16px;
  font-size: 16px;
  color: var(--bd-text);
  background: #fff;
  border: 1px solid var(--bd-line);
  border-radius: 12px !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;
}
.form-control:hover,
form.payment-form input.form-control:hover { border-color: #aeb6d3; }
.form-control:focus,
form.payment-form input.form-control:focus {
  border-color: var(--bd-accent);
  box-shadow: 0 0 0 2px var(--bd-accent), 0 0 0 6px rgba(79, 70, 229, .18) !important; /* !important: Ace forces box-shadow: none !important on .form-control */
  outline: 0;
}
.form-control::placeholder { color: #68708b; }

/* amount: prefix + larger figure */
.input-group-addon {
  background: #eef0fb;
  color: var(--bd-accent);
  font-size: 18px;
  font-weight: 800;
  border: 1px solid var(--bd-line);
  border-right: 0;
  border-radius: 12px 0 0 12px !important;
  padding: 0 18px;
}
.input-group .form-control,
form.payment-form .input-group input.form-control { border-radius: 0 12px 12px 0 !important; }
#PaymentAmount { font-size: 22px; 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(--bd-danger);
  background: #fff7f8;
}
.input-validation-error:focus,
form.payment-form input.input-validation-error:focus,
form.payment-form .has-error input.form-control:focus {
  border-color: var(--bd-danger);
  box-shadow: 0 0 0 2px var(--bd-danger), 0 0 0 6px rgba(214, 58, 74, .16) !important;
}
.field-validation-error,
.text-danger {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--bd-danger);
}
.validation-summary-errors {
  background: #fff1f3;
  border: 1px solid #f6c3ca;
  border-radius: 12px;
  padding: 10px 16px;
  margin-bottom: 18px;
}
.validation-summary-errors ul { margin: 0; padding-left: 18px; }

.fa-info-circle { color: var(--bd-accent); }

/* ---------- pay buttons ---------- */
.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; } /* nested columns add padding twice */
/* 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; }
.apple-div .form-group,
#CardDetail .form-group,
.payto-div .form-group { margin-bottom: 0; }

.btn-black,
.btn-recaptcha {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
  max-width: none;
  height: 56px;
  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: 14px !important;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .01em;
  color: #fff;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .2s ease, background-color .15s ease, filter .15s ease;
}
.btn-recaptcha:active { transform: translateY(0) scale(.99); }
.btn-recaptcha:focus-visible { outline: 3px solid rgba(79, 70, 229, .55) !important; outline-offset: 3px; }
.btn-recaptcha .fa { color: rgba(255, 255, 255, .95); font-size: 22px !important; }

/* card: saturated primary action */
.btn-recaptcha[data-paymentmethod="Card"] {
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
  box-shadow: 0 8px 20px rgba(79, 70, 229, .38), inset 0 1px 0 rgba(255, 255, 255, .22);
}
.btn-recaptcha[data-paymentmethod="Card"]:hover {
  transform: translateY(-2px);
  filter: brightness(1.08) saturate(1.1);
  box-shadow: 0 14px 30px rgba(79, 70, 229, .5), inset 0 1px 0 rgba(255, 255, 255, .22);
}
/* wallet: black, to suit vendor logos */
.btn-recaptcha[data-paymentmethod="AliPayPlus"] {
  background: #0a0a0f;
  box-shadow: 0 4px 12px rgba(10, 10, 15, .25);
}
.btn-recaptcha[data-paymentmethod="AliPayPlus"]:hover,.btn-recaptcha[data-paymentmethod="WeChat"]:hover,.btn-recaptcha[data-paymentmethod="UnionPay"]:hover {
  transform: translateY(-2px);
  background: #1b1c26;
  box-shadow: 0 10px 22px rgba(10, 10, 15, .32);
}
/* bank: dark outline */
.btn-recaptcha[data-paymentmethod="PayTo"] {
  background: #fff;
  color: var(--bd-ink);
  box-shadow: inset 0 0 0 2px var(--bd-ink);
}
.btn-recaptcha[data-paymentmethod="PayTo"]:hover {
  transform: translateY(-2px);
  background: var(--bd-ink);
  color: #fff;
  box-shadow: inset 0 0 0 2px var(--bd-ink), 0 10px 22px rgba(13, 19, 48, .28);
}
/* the PayTo logo is a white SVG: darken it on the white button, leave it white on hover */
.btn-recaptcha[data-paymentmethod="PayTo"] img { filter: invert(1); transition: filter .15s ease; }
.btn-recaptcha[data-paymentmethod="PayTo"]:hover img { filter: none; }

/* 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: 56px;
  --apple-pay-button-border-radius: 14px;
  --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: 56px !important;
  min-height: 56px !important;
  border-radius: 14px !important;
  background-size: contain !important;
  box-shadow: 0 4px 12px rgba(10, 10, 15, .25);
}

/* captions above buttons */
#CardDetail > .col-xs-12 { margin-bottom: 10px; }
#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: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--bd-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: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--bd-muted);
}

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

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

/* ---------- footer ---------- */
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: 1px solid #e8ebf5;
}
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(--bd-muted) !important; font-size: 12.5px !important; } /* inline colour/size from the CMS */

/* ---------- small screens ---------- */
@media (max-width: 767px) {
  .page-content.layout-page-content { padding: 0 10px; }
  .container { padding-left: 0; padding-right: 0; }
  .page-content.layout-page-content > .row { margin-left: 0; margin-right: 0; }
  .page-content .row > .col-lg-12 > .row:first-child img { max-height: 64px !important; margin-bottom: 14px !important; }
  .page-content .row > .col-lg-12 > .row:first-child .align-center > span { font-size: 26px !important; letter-spacing: -.5px; }
  .page-content .row > .col-lg-12 > .row:first-child .align-center > p { font-size: 15px; }
  form.payment-form { padding: 28px 16px 14px; border-radius: 18px; margin-top: 30px; }
  .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 (flat rules, concrete values) ---------- */
/* 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"]) { background: #07080f; }
  :root:not([data-theme="light"]) body {
    color: #e9ecf8;
    background:
      radial-gradient(700px 300px at 85% -40px, rgba(124, 58, 237, .4) 0, transparent 70%),
      radial-gradient(600px 260px at 10% 10px, rgba(79, 70, 229, .35) 0, transparent 70%),
      linear-gradient(160deg, #04050c 0%, #0f1240 100%),
      #07080f;
    background-repeat: no-repeat;
    background-size: 100% 360px, 100% 360px, 100% 360px, auto;
  }
  :root:not([data-theme="light"]) .ace-nav > li > .dropdown-menu { background: #151828; border-color: #2a3050; }
  :root:not([data-theme="light"]) .ace-nav > li > .dropdown-menu > li > a { color: #e9ecf8; }
  :root:not([data-theme="light"]) .ace-nav > li > .dropdown-menu > li > a:hover { background: #1a1e3a; color: #e9ecf8; }

  :root:not([data-theme="light"]) form.payment-form {
    background: #12152a;
    border-color: #262c4c;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .04), 0 32px 70px rgba(0, 0, 0, .6);
  }
  :root:not([data-theme="light"]) form.payment-form .align-center.padding-10 > span { color: #f2f4fc; }
  :root:not([data-theme="light"]) form.payment-form .align-center.padding-10 > span::before {
    background: linear-gradient(135deg, #7b83ff, #a06cff);
    color: #0a0c1e;
    box-shadow: 0 4px 12px rgba(123, 131, 255, .35);
  }

  :root:not([data-theme="light"]) label.control-label { color: #c9cfe6; }
  :root:not([data-theme="light"]) .control-label .required,:root:not([data-theme="light"]) .required { color: #ff8593; }
  :root:not([data-theme="light"]) .form-control,:root:not([data-theme="light"]) form.payment-form input.form-control {
    color: #f2f4fc;
    background: #0a0c1a;
    border-color: #2d3456;
  }
  :root:not([data-theme="light"]) .form-control:hover,:root:not([data-theme="light"]) form.payment-form input.form-control:hover { border-color: #4a5484; }
  :root:not([data-theme="light"]) .form-control:focus,:root:not([data-theme="light"]) form.payment-form input.form-control:focus {
    border-color: #8b93ff;
    box-shadow: 0 0 0 2px #8b93ff, 0 0 0 6px rgba(139, 147, 255, .22) !important;
  }
  :root:not([data-theme="light"]) .form-control::placeholder { color: #7c84a6; }
  :root:not([data-theme="light"]) form.payment-form input.form-control:-webkit-autofill {
    -webkit-text-fill-color: #f2f4fc;
    transition: background-color 9999s ease 0s;
  }
  :root:not([data-theme="light"]) .input-group-addon { background: #1a1e3a; color: #a5acff; border-color: #2d3456; }
  :root:not([data-theme="light"]) .fa-info-circle { color: #9aa1ff; }

  :root:not([data-theme="light"]) .input-validation-error,:root:not([data-theme="light"]) form.payment-form .has-error input.form-control,:root:not([data-theme="light"]) .has-error .form-control { border-color: #ff6b7d; background: #2a1322; }
  :root:not([data-theme="light"]) .input-validation-error:focus,:root:not([data-theme="light"]) form.payment-form input.input-validation-error:focus,:root:not([data-theme="light"]) form.payment-form .has-error input.form-control:focus {
    border-color: #ff6b7d;
    box-shadow: 0 0 0 2px #ff6b7d, 0 0 0 6px rgba(255, 107, 125, .22) !important;
  }
  :root:not([data-theme="light"]) .field-validation-error,:root:not([data-theme="light"]) .text-danger { color: #ff8593; }
  :root:not([data-theme="light"]) .validation-summary-errors { background: #2a1322; border-color: #6b2a3c; color: #ffb3bd; }

  :root:not([data-theme="light"]) .btn-recaptcha:focus-visible { outline-color: rgba(164, 170, 255, .75) !important; }
  :root:not([data-theme="light"]) .btn-recaptcha[data-paymentmethod="Card"] {
    background: linear-gradient(135deg, #5055e4 0%, #7a49e0 100%);
    box-shadow: 0 8px 24px rgba(99, 102, 241, .45), inset 0 1px 0 rgba(255, 255, 255, .25);
  }
  :root:not([data-theme="light"]) .btn-recaptcha[data-paymentmethod="AliPayPlus"] {
    background: #000;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28);
  }
  :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 { background: #1b1d2e; }
  :root:not([data-theme="light"]) .btn-recaptcha[data-paymentmethod="PayTo"] {
    background: transparent;
    color: #f2f4fc;
    box-shadow: inset 0 0 0 2px #8b93ff;
  }
  :root:not([data-theme="light"]) .btn-recaptcha[data-paymentmethod="PayTo"]:hover {
    background: #8b93ff;
    color: #0a0c1e;
    box-shadow: inset 0 0 0 2px #8b93ff, 0 10px 22px rgba(139, 147, 255, .3);
  }
  :root:not([data-theme="light"]) .btn-recaptcha[data-paymentmethod="PayTo"] img { filter: none; }
  :root:not([data-theme="light"]) .btn-recaptcha[data-paymentmethod="PayTo"]:hover img { filter: invert(1); }
  :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, .28); }
  :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, .28); }

  :root:not([data-theme="light"]) #CardDetail > .col-xs-12 span { color: #9aa3c7 !important; }
  :root:not([data-theme="light"]) .payto-div p strong { color: #9aa3c7; }
  :root:not([data-theme="light"]) .separator { color: #8e97bb; }
  :root:not([data-theme="light"]) .separator::before,:root:not([data-theme="light"]) .separator::after { border-bottom-color: #2a3050; }

  :root:not([data-theme="light"]) form.payment-form > .row:nth-last-of-type(2) { border-top-color: #262c4c; }
  :root:not([data-theme="light"]) form.payment-form > .row:nth-last-of-type(2) span { color: #9aa3c7 !important; }
  /* 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: #f1f3fb;
    border-radius: 6px;
    padding: 3px 6px;
    opacity: .95;
  }
}

  :root[data-theme="dark"] { background: #07080f; }
  :root[data-theme="dark"] body {
    color: #e9ecf8;
    background:
      radial-gradient(700px 300px at 85% -40px, rgba(124, 58, 237, .4) 0, transparent 70%),
      radial-gradient(600px 260px at 10% 10px, rgba(79, 70, 229, .35) 0, transparent 70%),
      linear-gradient(160deg, #04050c 0%, #0f1240 100%),
      #07080f;
    background-repeat: no-repeat;
    background-size: 100% 360px, 100% 360px, 100% 360px, auto;
  }
  :root[data-theme="dark"] .ace-nav > li > .dropdown-menu { background: #151828; border-color: #2a3050; }
  :root[data-theme="dark"] .ace-nav > li > .dropdown-menu > li > a { color: #e9ecf8; }
  :root[data-theme="dark"] .ace-nav > li > .dropdown-menu > li > a:hover { background: #1a1e3a; color: #e9ecf8; }

  :root[data-theme="dark"] form.payment-form {
    background: #12152a;
    border-color: #262c4c;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .04), 0 32px 70px rgba(0, 0, 0, .6);
  }
  :root[data-theme="dark"] form.payment-form .align-center.padding-10 > span { color: #f2f4fc; }
  :root[data-theme="dark"] form.payment-form .align-center.padding-10 > span::before {
    background: linear-gradient(135deg, #7b83ff, #a06cff);
    color: #0a0c1e;
    box-shadow: 0 4px 12px rgba(123, 131, 255, .35);
  }

  :root[data-theme="dark"] label.control-label { color: #c9cfe6; }
  :root[data-theme="dark"] .control-label .required,:root[data-theme="dark"] .required { color: #ff8593; }
  :root[data-theme="dark"] .form-control,:root[data-theme="dark"] form.payment-form input.form-control {
    color: #f2f4fc;
    background: #0a0c1a;
    border-color: #2d3456;
  }
  :root[data-theme="dark"] .form-control:hover,:root[data-theme="dark"] form.payment-form input.form-control:hover { border-color: #4a5484; }
  :root[data-theme="dark"] .form-control:focus,:root[data-theme="dark"] form.payment-form input.form-control:focus {
    border-color: #8b93ff;
    box-shadow: 0 0 0 2px #8b93ff, 0 0 0 6px rgba(139, 147, 255, .22) !important;
  }
  :root[data-theme="dark"] .form-control::placeholder { color: #7c84a6; }
  :root[data-theme="dark"] form.payment-form input.form-control:-webkit-autofill {
    -webkit-text-fill-color: #f2f4fc;
    transition: background-color 9999s ease 0s;
  }
  :root[data-theme="dark"] .input-group-addon { background: #1a1e3a; color: #a5acff; border-color: #2d3456; }
  :root[data-theme="dark"] .fa-info-circle { color: #9aa1ff; }

  :root[data-theme="dark"] .input-validation-error,:root[data-theme="dark"] form.payment-form .has-error input.form-control,:root[data-theme="dark"] .has-error .form-control { border-color: #ff6b7d; background: #2a1322; }
  :root[data-theme="dark"] .input-validation-error:focus,:root[data-theme="dark"] form.payment-form input.input-validation-error:focus,:root[data-theme="dark"] form.payment-form .has-error input.form-control:focus {
    border-color: #ff6b7d;
    box-shadow: 0 0 0 2px #ff6b7d, 0 0 0 6px rgba(255, 107, 125, .22) !important;
  }
  :root[data-theme="dark"] .field-validation-error,:root[data-theme="dark"] .text-danger { color: #ff8593; }
  :root[data-theme="dark"] .validation-summary-errors { background: #2a1322; border-color: #6b2a3c; color: #ffb3bd; }

  :root[data-theme="dark"] .btn-recaptcha:focus-visible { outline-color: rgba(164, 170, 255, .75) !important; }
  :root[data-theme="dark"] .btn-recaptcha[data-paymentmethod="Card"] {
    background: linear-gradient(135deg, #5055e4 0%, #7a49e0 100%);
    box-shadow: 0 8px 24px rgba(99, 102, 241, .45), inset 0 1px 0 rgba(255, 255, 255, .25);
  }
  :root[data-theme="dark"] .btn-recaptcha[data-paymentmethod="AliPayPlus"] {
    background: #000;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28);
  }
  :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 { background: #1b1d2e; }
  :root[data-theme="dark"] .btn-recaptcha[data-paymentmethod="PayTo"] {
    background: transparent;
    color: #f2f4fc;
    box-shadow: inset 0 0 0 2px #8b93ff;
  }
  :root[data-theme="dark"] .btn-recaptcha[data-paymentmethod="PayTo"]:hover {
    background: #8b93ff;
    color: #0a0c1e;
    box-shadow: inset 0 0 0 2px #8b93ff, 0 10px 22px rgba(139, 147, 255, .3);
  }
  :root[data-theme="dark"] .btn-recaptcha[data-paymentmethod="PayTo"] img { filter: none; }
  :root[data-theme="dark"] .btn-recaptcha[data-paymentmethod="PayTo"]:hover img { filter: invert(1); }
  :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, .28); }
  :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, .28); }

  :root[data-theme="dark"] #CardDetail > .col-xs-12 span { color: #9aa3c7 !important; }
  :root[data-theme="dark"] .payto-div p strong { color: #9aa3c7; }
  :root[data-theme="dark"] .separator { color: #8e97bb; }
  :root[data-theme="dark"] .separator::before,:root[data-theme="dark"] .separator::after { border-bottom-color: #2a3050; }

  :root[data-theme="dark"] form.payment-form > .row:nth-last-of-type(2) { border-top-color: #262c4c; }
  :root[data-theme="dark"] form.payment-form > .row:nth-last-of-type(2) span { color: #9aa3c7 !important; }
  /* 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: #f1f3fb;
    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) */
/* 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 */

/* 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); }
/* The theme and methods buttons sit on the dark hero, where their inherited dark icon colour nearly vanishes. */
.webpay-theme-toggle { color: #fff; border-color: rgba(255, 255, 255, .45); background: rgba(255, 255, 255, .14); }
.webpay-theme-toggle:hover { background: rgba(255, 255, 255, .28); }

/* 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 full width 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: 44px; 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; }
  form.payment-form > .row:first-of-type > .col-lg-6 + .col-lg-6 { border-left: 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 { grid-column: 1; grid-row: 2 / span 8; } /* "Your Details" (a title and five fields) lines up with the eight items of the payment column */
  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; justify-self: center; width: 100%; max-width: 520px; } /* one centred stack of methods, "OR" lines kept */
}

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