/*
 * setup-style-soft.css — "soft" variant of the public registration page overlay (/setup/1337).
 * Replaces webpay-setup-overrides.css (loaded instead of it), so it carries every fix that file has. Same look as style-soft.css (the payment page): friendly, rounded, pastel glass,
 * coral-to-pink buttons, on this page's own markup: a form.form-horizontal made of four .widget-box sections with the label above each field.
 * 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.
 * Colour tokens differ from style-soft.css in four places, for contrast: --s-muted, --s-danger, --s-icon and --s-addon-ink are darker than there (the originals reach only 4.0:1, 3.5:1, 2.3:1 and 4.1:1 against 4.5:1, 4.5:1, 3:1 and 4.5:1 needed).
 */

:root {
  --s-ink: #3a2e4a;
  --s-muted: #665a78;
  --s-label: #5a4d6e;
  --s-accent-glow: rgba(255, 106, 120, .42);
  --s-btn-a: #c2410c; /* primary buttons and the section number badge: 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-focus-edge: #7c5ce6;
  --s-danger: #c0264f;
  --s-danger-bg: #fff0f4;
  --s-danger-line: rgba(192, 38, 79, .3);
  --s-glass: rgba(255, 255, 255, .62);
  --s-glass-line: rgba(255, 255, 255, .85);
  --s-field: rgba(255, 255, 255, .8);
  --s-field-focus: #fff;
  --s-field-line: rgba(160, 140, 190, .28);
  --s-field-line-hover: rgba(160, 140, 190, .55);
  --s-placeholder: #665a78;
  --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-addon-bg: linear-gradient(135deg, #ffe3d6, #ffd3e0);
  --s-addon-ink: #9c2c38;
  --s-icon: #6d47d9;
  --s-select: #c2410c; /* chosen payment method: outline */
  --s-select-tint: rgba(255, 122, 89, .14);
  --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;
}
.container {
  max-width: 940px;
  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 forces border-radius: 0 !important on .dropdown-menu and gives its items a yellow hover: the Welcome, Guest menu follows this theme's shape and colours instead */
.ace-nav > li > .dropdown-menu { border-radius: 20px !important; padding: 6px; }
.ace-nav > li > .dropdown-menu > li > a { border-radius: 14px; margin: 0; padding: 8px 12px; }
.ace-nav > li > .dropdown-menu > li > a:hover,
.ace-nav > li > .dropdown-menu > li > a:focus,
.ace-nav > li > .dropdown-menu > li > a:active { background: rgba(167, 139, 250, .18); color: var(--s-ink); }
.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); }
/* the light/dark button is the only preview button that means anything on this page */
.webpay-theme-li:has(#webpayMethodsToggle, #webpayFieldsToggle, #webpayColsToggle) { display: none; }

/* ---------- heading ---------- */
.page-content .row > .col-lg-12 > .row > .col-xs-12 > img.img-responsive {
  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 > .row > .col-xs-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);
}
p:has(> span[style*="#ffffff"]) { display: none; } /* stray white "." spacer paragraphs */

/* ---------- layout: one numbered glass card per section, fields in a wrapping grid ---------- */
/* The page puts its four sections in a 2x2 arrangement of narrow columns. Here each section is a full-width card stacked in reading order, and its fields
   flow into as many columns as fit (250px minimum), so any field count works. Phones get one column (see the end of the file). */
form#register-form {
  counter-reset: section;
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  margin: 24px 0 0;
}
form#register-form > .row {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin: 0;
}
form#register-form > .row::before,
form#register-form > .row::after,
form#register-form > .row > .clearfix { display: none; }
form#register-form > .row > [class*="col-"] { float: none; width: 100%; margin: 0; padding: 0; }

.widget-box.transparent {
  margin: 0;
  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: 28px 32px 10px;
}
.widget-box.transparent > .widget-header {
  display: flex;
  align-items: center;
  gap: 12px;
  background: transparent;
  border: 0;
  border-bottom: 2px dotted var(--s-divider);
  min-height: 0;
  padding: 0 0 14px;
  margin-bottom: 22px;
  text-align: left !important; /* the header carries .text-center */
}
/* section number: a small gradient badge, the counterpart of the payment page's gradient dot */
.widget-box.transparent > .widget-header::before {
  counter-increment: section;
  content: counter(section);
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--s-btn-a), var(--s-btn-b));
  box-shadow: 0 0 0 4px rgba(255, 122, 89, .18);
}
.widget-box.transparent > .widget-header > .widget-title {
  float: none;
  display: block;
  margin: 0;
  line-height: 1.4;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--s-ink);
}
.widget-box.transparent > .widget-body { background: transparent; border: 0; }
.widget-box.transparent > .widget-body > .widget-main {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  column-gap: 22px;
  align-items: start;
  padding: 0;
  background: transparent;
}
/* whole-row items: the payment method choice, the card and UnionPay buttons, the bank detail block and its text */
.widget-box.transparent .widget-main > :is(#PayWithCardBtn, #UnionPayBtn, #CardAuthorisationDiv, #BankDetails, #PayPalDetails, #customerPayPalAuthorized, .payment-processing-fee-snippet, .form-group:has(.input-list-container)) { grid-column: 1 / -1; }
#BankDetails:not([style*="none"]) {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  column-gap: 22px;
  align-items: start;
}
#BankDetails > :is(#BankSnippet, #PayToSnippet) { grid-column: 1 / -1; min-width: 0; overflow-x: auto; } /* the PayTo text sits in a 535px-wide table: scroll it inside the card rather than the page */

/* the hosted card form (Credit / Debit Card) is a frame of fixed height (400 from the markup, which nothing can follow to the content in CSS): centred at the
   width webpay-card-overrides.css draws it for, and cut to the form's own height */
#CardAuthorisationDiv { justify-self: center; width: 100%; max-width: 520px; }
#AuthoriseCard { display: block; width: 100%; height: 340px; border: 0; color-scheme: normal; } /* a frame whose colour-scheme differs from the frame document's gets an opaque white canvas */

/* ---------- fields ---------- */
/* label above the field, both full width (the page puts the label left, col-sm-5 / col-sm-7); the label is indented to line up with the pill's rounded end */
.form-horizontal .form-group { margin-left: 0; margin-right: 0; margin-bottom: 20px; }
.form-horizontal .form-group > [class*="col-sm-"] { float: none; width: 100%; padding-left: 0; padding-right: 0; }
.form-horizontal .form-group > label.control-label[class*="col-sm-"] { padding: 0 0 0 16px; margin-bottom: 6px; text-align: left; }
label.control-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--s-label);
}
.control-label .required,
.required { color: var(--s-danger); margin-left: 2px; }

/* the ID in the selector beats Ace's input[type=text] rules, which outrank a bare .form-control */
form#register-form .form-control {
  height: 50px;
  padding: 10px 22px;
  font-size: 15px;
  color: var(--s-ink);
  background-color: var(--s-field);
  border: 1.5px solid var(--s-field-line);
  border-radius: var(--s-pill) !important; /* Ace squares inputs off with !important on input[type=text] */
  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#register-form .form-control:hover { border-color: var(--s-field-line-hover); }
form#register-form .form-control:focus {
  border-color: var(--s-focus-edge);
  background-color: var(--s-field-focus);
  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: var(--s-placeholder); }

/* prefix ("$") and suffix (calendar, info) chips */
.input-group { display: flex; }
.input-group-addon,
form#register-form .input-group .input-group-addon {
  display: flex;
  align-items: center;
  background: var(--s-addon-bg);
  color: var(--s-addon-ink);
  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;
  justify-content: center; /* the rounded cap is wider than its symbol: centre it in the cap */
  padding: 0 18px;
}
form#register-form .input-group .form-control {
  flex: 1 1 auto;
  width: 1%;
  border-radius: 0 var(--s-pill) var(--s-pill) 0 !important;
}

/* calendar and info chips sit after the field (the "$" prefix sits before it): round the outer end instead */
form#register-form .input-group > .form-control:has(+ .input-group-addon) { border-radius: var(--s-pill) 0 0 var(--s-pill) !important; }
form#register-form .input-group > .form-control + .input-group-addon { border: 1.5px solid var(--s-field-line); border-left: 0; border-radius: 0 var(--s-pill) var(--s-pill) 0 !important; padding: 0 18px 0 10px; }

/* validation */
form#register-form .input-validation-error,
form#register-form .has-error .form-control {
  border-color: var(--s-danger);
  background-color: var(--s-danger-bg);
}
form#register-form .input-validation-error:focus,
form#register-form .has-error .form-control:focus { border-color: var(--s-danger); box-shadow: 0 0 0 5px rgba(192, 38, 79, .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 var(--s-danger-line);
  border-radius: 20px;
  padding: 12px 18px;
  margin-bottom: 18px;
}
.validation-summary-errors ul { margin: 0; padding-left: 18px; }
.fa-info-circle { color: var(--s-icon); }

/* ---------- payment method choice ---------- */
/* the methods as equal-width glass pills across the card (as many per row as fit, 150px minimum); the chosen one is outlined and tinted */
.input-list-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-left: 0 !important; } /* the page offsets the list 25px */
.input-list-container .radio {
  display: flex;
  align-items: center;
  min-height: 56px;
  margin: 0 !important; /* .radio-inline adds a left offset */
  padding: 0 20px 0 42px;
  border: 1.5px solid var(--s-field-line);
  border-radius: var(--s-pill);
  background: var(--s-chip);
  transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.input-list-container .radio:hover { border-color: var(--s-field-line-hover); }
.input-list-container .radio:has(input:checked) {
  border-color: var(--s-select);
  background: var(--s-select-tint);
  box-shadow: 0 0 0 4px var(--s-select-tint);
}
.input-list-container .radio:has(input:focus-visible) { outline: 3px solid var(--s-focus-edge); outline-offset: 2px; }
.input-list-container .radio label { font-weight: 600; color: var(--s-ink); padding-left: 0; }
.input-list-container .radio label::before { top: 2px; background: transparent; } /* the ring and dot are 17px / 11px against a 22px line: centre them on the text; the sandbox paints the ring white, which reads as "selected" on a dark tile */
.input-list-container .radio label::after { top: 5px; }
.input-list-container .radio > .fa { margin-left: 8px; } /* the PayTo info icon sits after its label */
/* the radio dot and ring: the sandbox's checkbox stylesheet paints them .radio-info cyan */
.radio-info input[type="radio"] + label::after,
.radio-info input[type="radio"]:checked + label::after { background-color: var(--s-select); }
.radio-info input[type="radio"]:checked + label::before { border-color: var(--s-select); }
/* the review step (/Setup/1337/<id>/Review) has no form#register-form: number its sections from 1 and space its cards */
body { counter-reset: section; }
body:not(:has(#register-form)) .widget-box.transparent { margin-bottom: 22px; }

/* ---------- review step ---------- */
/* The same glass cards, two per line (one on a narrow screen) and equal height within a line. Each card's rows are a label / value list, the terms tick is a glass
   box of its own, and BACK and SETUP NOW share one line. */
form#review-form { margin: 24px 0 0; }
form#review-form > .row { display: flex; flex-wrap: wrap; gap: 24px; margin: 0; }
form#review-form > .row::before,
form#review-form > .row::after,
form#review-form > .row > .clearfix { display: none; }
form#review-form > .row > [class*="col-"] { float: none; width: auto; margin: 0; padding: 0; }
form#review-form > .row > .col-sm-6:not(.col-sm-offset-6) { display: flex; flex: 1 1 min(340px, 100%); }
form#review-form .widget-box.transparent { flex: 1 1 auto; min-width: 0; margin: 0; padding-bottom: 18px; }
form#review-form .widget-box.transparent > .widget-body > .widget-main { display: block; }
form#review-form dl.dl-horizontal { display: grid; grid-template-columns: max-content minmax(0, 1fr); margin: 0; }
form#review-form dl.dl-horizontal > dt,
form#review-form dl.dl-horizontal > dd { float: none; width: auto; margin: 0; padding: 11px 0; border-bottom: 2px dotted var(--s-divider); }
form#review-form dl.dl-horizontal > dt { padding-right: 28px; text-align: left; white-space: normal; font-size: 13px; font-weight: 600; color: var(--s-muted); }
form#review-form dl.dl-horizontal > dd { font-weight: 700; color: var(--s-ink); overflow-wrap: anywhere; }
form#review-form dl.dl-horizontal > :nth-last-child(-n + 2) { border-bottom: 0; }

form#review-form > .row > .col-sm-offset-6 { flex: 0 0 100%; }
form#review-form .form-group:has(#TermsandConditionsAgreement) {
  margin: 0;
  padding: 18px 26px;
  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: 24px;
  box-shadow: var(--s-shadow);
}
form#review-form label[for="TermsandConditionsAgreement"] { display: block; margin: 0; padding: 0; font-size: 14px; font-weight: 600; line-height: 1.6; color: var(--s-ink); cursor: pointer; }
/* the tick box is the label's ::before (the input itself is hidden): a rounded square, filled with the button gradient when ticked */
form#review-form #TermsandConditionsAgreement + label::before {
  width: 24px;
  height: 24px;
  margin-right: 12px;
  vertical-align: -6px;
  border: 2px solid var(--s-field-line-hover);
  border-radius: 9px;
  background: var(--s-field);
  color: transparent;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
}
form#review-form #TermsandConditionsAgreement:checked + label::before { background: linear-gradient(135deg, var(--s-btn-a), var(--s-btn-b)); border-color: var(--s-btn-b); color: #fff; }
form#review-form #TermsandConditionsAgreement:focus-visible + label::before { outline: 3px solid var(--s-focus-edge); outline-offset: 2px; }
form#review-form label[for="TermsandConditionsAgreement"] .btn-link { font-size: inherit; color: var(--s-icon); text-decoration: underline; }

form#review-form > .row > .col-xs-6 { flex: 1 1 200px; }
form#review-form > .row > .col-xs-6:has(#btn-back) { flex: 0 0 auto; }
#btn-back {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 56px;
  padding: 0 30px;
  border: 1.5px solid var(--s-field-line-hover) !important; /* Ace paints .btn-default with !important */
  border-radius: var(--s-pill) !important;
  background: var(--s-chip) !important;
  color: var(--s-ink) !important;
  box-shadow: none;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .06em;
  transition: border-color .2s ease, color .2s ease;
}
#btn-back:hover { border-color: var(--s-focus-edge) !important; color: var(--s-icon) !important; }
#btn-back:focus-visible { outline: 3px solid var(--s-focus-edge); outline-offset: 3px; }
#btn-proceed:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; transform: none; } /* until the terms are ticked */
.page-content .col-lg-12 > form + .row .align-center > p { margin: 8px 0 0; font-size: 12.5px; color: var(--s-muted); } /* "Powered By ..." footer */

/* ---------- buttons ---------- */
/* Pay with Card and UnionPay: the page sets width, height, padding, colours, radius and weight inline, hence the !important */
.btn-recaptcha {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100% !important;
  max-width: 440px;
  height: 56px !important;
  min-width: 0 !important;
  padding: 0 22px !important;
  border: 0 !important;
  outline: 0 !important;
  border-radius: var(--s-pill) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  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 var(--s-focus-edge) !important; outline-offset: 3px; }
.btn-recaptcha .fa { color: rgba(255, 255, 255, .95); font-size: 22px !important; } /* icons carry inline font-size */
/* Pay with Card: the primary action, coloured glow (the page paints it black inline) */
#PayWithCardBtn .btn-recaptcha {
  max-width: none;
  background: linear-gradient(135deg, var(--s-btn-a), var(--s-btn-b)) !important;
  color: #fff !important;
  box-shadow: 0 10px 26px var(--s-accent-glow);
}
#PayWithCardBtn .btn-recaptcha:hover { box-shadow: 0 16px 34px var(--s-accent-glow); }
/* UnionPay: dark pill like the wallet buttons on the payment page */
#UnionPayBtn .btn-recaptcha { background: var(--s-wallet) !important; color: #fff !important; box-shadow: 0 6px 16px var(--s-wallet-glow); }
#UnionPayBtn .btn-recaptcha:hover { background: var(--s-wallet-hover) !important; box-shadow: 0 12px 26px var(--s-wallet-glow); }
#UnionPayBtn .btn-recaptcha img { position: static !important; height: 26px !important; margin: 0 !important; width: auto; } /* inline absolute offsets and 40px height */

/* PROCEED: the form's submit */
#btn-proceed {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 56px;
  border: 0 !important; /* Ace's .btn-success colours are !important */
  border-radius: var(--s-pill) !important;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .06em;
  color: #fff !important;
  background: linear-gradient(135deg, var(--s-btn-a), var(--s-btn-b)) !important;
  box-shadow: 0 10px 26px var(--s-accent-glow);
  transition: transform .2s ease, box-shadow .2s ease;
}
#btn-proceed:hover { box-shadow: 0 16px 34px var(--s-accent-glow); transform: translateY(-2px); }
.col-xs-12 > .col-sm-offset-6 { width: 100%; max-width: 440px; margin: 0 auto; float: none; padding: 0; } /* PROCEED: centred under the cards */
.proceed-button-div { margin: 0; }
#btn-proceed:active { transform: translateY(0) scale(.99); }
#btn-proceed:focus-visible { outline: 3px solid var(--s-focus-edge); outline-offset: 3px; }

/* ---------- small screens ---------- */
@media (max-width: 767px) {
  .page-content.layout-page-content { padding-top: 10px; }
  .page-content .row > .col-lg-12 > .row > .col-xs-12 > .align-center > span { font-size: 24px !important; }
  form#register-form { margin-top: 18px; }
  .widget-box.transparent { padding: 22px 18px 6px; border-radius: 24px; }
  .widget-box.transparent > .widget-body > .widget-main,
  #BankDetails:not([style*="none"]) { grid-template-columns: minmax(0, 1fr); } /* one column, even where two 250px columns would still fit */
  .btn-recaptcha { max-width: none; }
  .container { padding-left: 4px; padding-right: 4px; }
}

/* ---------- dark: deep aubergine / indigo glass ---------- */
/* dark rules below appear twice (device setting and [data-theme="dark"]), as in style-soft.css */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --s-ink: #f1e9ff;
    --s-muted: #b2a3cf;
    --s-label: #d6c9ee;
    --s-accent-glow: rgba(255, 95, 154, .38);
    --s-btn-a: #c8440f;
    --s-btn-b: #c21a63;
    --s-focus: rgba(167, 139, 250, .38);
    --s-focus-edge: #a78bfa;
    --s-danger: #ff7a9c;
    --s-danger-bg: rgba(255, 90, 130, .14);
    --s-danger-line: rgba(255, 122, 156, .4);
    --s-glass: rgba(48, 30, 82, .55);
    --s-glass-line: rgba(200, 170, 255, .18);
    --s-field: rgba(20, 10, 44, .55);
    --s-field-focus: rgba(20, 10, 44, .85);
    --s-field-line: rgba(200, 170, 255, .22);
    --s-field-line-hover: rgba(200, 170, 255, .45);
    --s-placeholder: #b2a6cb;
    --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-addon-bg: linear-gradient(135deg, rgba(255, 138, 107, .28), rgba(255, 95, 154, .28));
    --s-addon-ink: #ffc4b3;
    --s-icon: #c4b0ff;
    --s-select: #ff8a6b;
    --s-select-tint: rgba(255, 138, 107, .16);
    --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"]) .page-content .row > .col-lg-12 > .row > .col-xs-12 > img.img-responsive { background: rgba(255, 255, 255, .92); } /* merchant logo is authored for a white page */
  :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"]) #UnionPayBtn .btn-recaptcha { box-shadow: 0 0 0 1px rgba(200, 170, 255, .28), 0 8px 20px var(--s-wallet-glow); }
}

  :root[data-theme="dark"] {
    --s-ink: #f1e9ff;
    --s-muted: #b2a3cf;
    --s-label: #d6c9ee;
    --s-accent-glow: rgba(255, 95, 154, .38);
    --s-btn-a: #c8440f;
    --s-btn-b: #c21a63;
    --s-focus: rgba(167, 139, 250, .38);
    --s-focus-edge: #a78bfa;
    --s-danger: #ff7a9c;
    --s-danger-bg: rgba(255, 90, 130, .14);
    --s-danger-line: rgba(255, 122, 156, .4);
    --s-glass: rgba(48, 30, 82, .55);
    --s-glass-line: rgba(200, 170, 255, .18);
    --s-field: rgba(20, 10, 44, .55);
    --s-field-focus: rgba(20, 10, 44, .85);
    --s-field-line: rgba(200, 170, 255, .22);
    --s-field-line-hover: rgba(200, 170, 255, .45);
    --s-placeholder: #b2a6cb;
    --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-addon-bg: linear-gradient(135deg, rgba(255, 138, 107, .28), rgba(255, 95, 154, .28));
    --s-addon-ink: #ffc4b3;
    --s-icon: #c4b0ff;
    --s-select: #ff8a6b;
    --s-select-tint: rgba(255, 138, 107, .16);
    --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"] .page-content .row > .col-lg-12 > .row > .col-xs-12 > img.img-responsive { background: rgba(255, 255, 255, .92); } /* merchant logo is authored for a white page */
  :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"] #UnionPayBtn .btn-recaptcha { box-shadow: 0 0 0 1px rgba(200, 170, 255, .28), 0 8px 20px var(--s-wallet-glow); }

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