/*
 * setup-style-minimal.css — variant overlay for the public registration page (/setup/1337) (replaces webpay-setup-overrides.css).
 * The minimal look of style-minimal.css on this page's markup: one hairline-bordered surface holding the four numbered sections, separated by hairlines
 * instead of shadowed cards, the fields in an auto-fill grid, the label above each field. Text-only top bar, dark theme via prefers-color-scheme.
 * Bootstrap 3 / Ace / Open Sans / Font Awesome only. `!important` only where inline style="" or Ace's own !important forces it.
 */

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

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

/* ---------- top bar: quiet text-only guest menu ---------- */
#navbar {
  float: none !important; /* inline float:right */
  width: auto;
  text-align: right;
  background: transparent;
  border: 0;
  box-shadow: none;
  min-height: 0;
  margin: 8px 12px 0 0;
}
#navbar .navbar-container { padding: 0; }
#navbar .navbar-buttons,
#navbar .ace-nav,
#navbar .ace-nav > li { background: transparent; float: none; display: inline-block; width: auto; margin: 0; }
#navbar .navbar-buttons,
#navbar .ace-nav { height: auto; border: 0; box-shadow: none; }
#navbar .ace-nav > li::before,
#navbar .ace-nav > li::after { display: none; }
#navbar .ace-nav > li { border: 0; } /* Ace draws vertical dividers between nav items */
#navbar .ace-nav > li > a {
  background: transparent !important; /* Ace paints coloured nav items with !important */
  color: var(--m-muted) !important;
  border: 0;
  height: 32px;
  line-height: 32px;
  padding: 0 6px;
  font-size: 12px;
  box-shadow: none;
}
#navbar .ace-nav > li > a:hover { color: var(--m-ink) !important; }
#navbar .nav-user-photo { display: none; }
#navbar .user-info { display: inline-block; white-space: nowrap; font-size: 12px; max-width: none; line-height: 32px; padding: 0; }
#navbar .user-info small { display: inline; color: var(--m-muted); }
#navbar .ace-nav > li > a > .ace-icon { color: var(--m-muted); line-height: 32px; }
/* 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: var(--m-radius) !important; padding: 4px; }
.ace-nav > li > .dropdown-menu > li > a { border-radius: 6px; 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: var(--m-addon); color: var(--m-ink); }
.ace-nav > li > .dropdown-menu {
  background: var(--m-surface);
  border: 1px solid var(--m-line);
  border-radius: var(--m-radius);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .06);
  overflow: hidden;
}
.ace-nav > li > .dropdown-menu > li > a { color: var(--m-ink); }
.ace-nav > li > .dropdown-menu > li > a:hover { background: var(--m-addon); color: var(--m-ink); }
.ace-nav > li > .dropdown-menu .divider { background: var(--m-line); }
/* the light/dark button is the only preview button that means anything on this page */
#navbar .ace-nav > li.webpay-theme-li:has(#webpayMethodsToggle, #webpayFieldsToggle, #webpayColsToggle) { display: none; } /* outranks the inline-block rule above */

/* ---------- heading ---------- */
.page-content .row > .col-lg-12 > .row > .col-xs-12 > img.img-responsive { max-height: 56px !important; width: auto; margin-top: 12px !important; } /* inline max-height 150px, margin auto */
.page-content .row > .col-lg-12 > .row > .col-xs-12 > .align-center > span {
  display: block;
  margin: 16px 0 0 !important; /* inline margin-top:15px */
  font-size: 18px !important; /* inline 25px */
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--m-ink);
}
p:has(> span[style*="#ffffff"]) { display: none; } /* stray white "." spacer paragraphs */

/* ---------- layout: one surface, four numbered sections stacked in reading order, fields in a wrapping grid ---------- */
/* The page puts its four sections in a 2x2 arrangement of narrow columns. Here they run full width one under the other, split by hairlines, and each
   section's fields flow into as many columns as fit (240px minimum), so any field count works. */
form#register-form {
  counter-reset: section;
  background: var(--m-surface);
  border: 1px solid var(--m-line);
  border-radius: 12px;
  box-shadow: none;
  padding: 4px 28px 28px;
  margin: 24px 0 0;
}
form#register-form > .row {
  display: flex;
  flex-direction: column;
  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: transparent;
  border: 0;
  border-top: 1px solid var(--m-line);
  border-radius: 0;
  box-shadow: none;
  padding: 24px 0 6px;
}
form#register-form > .row > .col-sm-6:first-child > .widget-box.transparent { border-top: 0; }
.widget-box.transparent > .widget-header {
  display: flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: 0;
  min-height: 0;
  padding: 0;
  margin-bottom: 16px;
}
.widget-box.transparent > .widget-header::after { display: none; } /* Ace's clearfix pseudo-element would become a flex item */
.widget-box.transparent > .widget-header::before {
  counter-increment: section;
  content: counter(section);
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  border: 1px solid var(--m-line-strong);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--m-muted);
}
.widget-box.transparent > .widget-header > .widget-title {
  float: none;
  display: block;
  margin: 0;
  line-height: 1.4;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-align: left; /* the header carries .text-center */
  text-transform: uppercase;
  color: var(--m-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(240px, 1fr));
  column-gap: 16px;
  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(240px, 1fr));
  column-gap: 16px;
  align-items: start;
}
/* the bank text blocks are CMS content (the PayTo one is a fixed-width table): scroll inside the block instead of widening the page */
#BankDetails > :is(#BankSnippet, #PayToSnippet) { grid-column: 1 / -1; min-width: 0; overflow-x: auto; }

/* 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) */
.form-horizontal .form-group { margin-left: 0; margin-right: 0; margin-bottom: 14px; }
.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-top: 0; margin-bottom: 5px; text-align: left; }
label.control-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--m-label);
}
.control-label .required,
.required { color: var(--m-danger); margin-left: 2px; }

.form-control,
form#register-form input.form-control,
form#register-form select.form-control {
  height: 40px;
  padding: 8px 12px;
  font-size: 14px;
  color: var(--m-ink);
  background-color: var(--m-field);
  border: 1px solid var(--m-line);
  border-radius: var(--m-radius) !important; /* Ace squares inputs off with !important on input[type=text] */
  box-shadow: none;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.form-control:hover,
form#register-form input.form-control:hover { border-color: var(--m-line-strong); } /* the form-qualified selectors outrank the base rule above, which would otherwise win over :hover and :focus */
.form-control:focus,
form#register-form input.form-control:focus {
  border-color: var(--m-accent);
  box-shadow: 0 0 0 3px var(--m-accent-ring) !important; /* !important: Ace forces box-shadow: none !important on .form-control */
  outline: 0;
}
.form-control::placeholder { color: var(--m-muted); }

.input-group { width: 100%; }
.input-group-addon {
  background: var(--m-addon);
  color: var(--m-label);
  font-weight: 500;
  border: 1px solid var(--m-line);
  border-right: 0;
  border-radius: var(--m-radius) 0 0 var(--m-radius) !important;
  padding: 0 12px;
}
.input-group .form-control,
form#register-form .input-group input.form-control { border-radius: 0 var(--m-radius) var(--m-radius) 0 !important; }

/* calendar and info boxes 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(--m-radius) 0 0 var(--m-radius) !important; }
form#register-form .input-group > .form-control + .input-group-addon { border: 1px solid var(--m-line); border-left: 0; border-radius: 0 var(--m-radius) var(--m-radius) 0 !important; }

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

/* ---------- payment method choice ---------- */
/* the methods as equal-width tiles across the section (as many per row as fit, 150px minimum); the chosen one is outlined in the accent colour */
.input-list-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-left: 0 !important; } /* the page offsets the list 25px */
.input-list-container .radio {
  display: flex;
  align-items: center;
  min-height: 48px;
  margin: 0 !important; /* .radio-inline adds a left offset */
  padding: 0 14px 0 36px;
  border: 1px solid var(--m-line);
  border-radius: var(--m-radius);
  background: var(--m-field);
  transition: border-color .12s ease, box-shadow .12s ease;
}
.input-list-container .radio:hover { border-color: var(--m-line-strong); }
.input-list-container .radio:has(input:checked) { border-color: var(--m-accent); box-shadow: inset 0 0 0 1px var(--m-accent); }
.input-list-container .radio:has(input:focus-visible) { outline: 2px solid var(--m-accent); outline-offset: 2px; } /* the radio itself is hidden by the checkbox stylesheet */
.input-list-container .radio label { font-weight: 500; color: var(--m-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(--m-accent); }
.radio-info input[type="radio"]:checked + label::before { border-color: var(--m-accent); }
/* 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 ---------- */
/* One hairline surface like the form, its sections two per line (one on a narrow screen) split by hairlines. Each section's rows are a label / value list, the terms
   tick has a hairline box of its own, and BACK and SETUP NOW share one line. */
form#review-form {
  counter-reset: section;
  background: var(--m-surface);
  border: 1px solid var(--m-line);
  border-radius: 12px;
  padding: 4px 28px 28px;
  margin: 24px 0 0;
}
form#review-form > .row { display: flex; flex-wrap: wrap; column-gap: 40px; 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: 12px; }
form#review-form > .row > :first-child > .widget-box.transparent { border-top: 0; }
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: 9px 0; border-bottom: 1px solid var(--m-line); }
form#review-form dl.dl-horizontal > dt { padding-right: 24px; text-align: left; white-space: normal; font-size: 13px; font-weight: 500; color: var(--m-muted); }
form#review-form dl.dl-horizontal > dd { font-weight: 600; color: var(--m-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%; padding-top: 24px; border-top: 1px solid var(--m-line); }
form#review-form .form-group:has(#TermsandConditionsAgreement) {
  margin: 0;
  padding: 14px 16px;
  border: 1px solid var(--m-line);
  border-radius: var(--m-radius);
}
form#review-form label[for="TermsandConditionsAgreement"] { display: block; margin: 0; padding: 0; font-size: 14px; font-weight: 500; line-height: 1.6; color: var(--m-ink); cursor: pointer; }
/* the tick box is the label's ::before (the input itself is hidden): a hairline square, filled with the accent when ticked */
form#review-form #TermsandConditionsAgreement + label::before {
  width: 20px;
  height: 20px;
  margin-right: 12px;
  vertical-align: -4px;
  border: 1px solid var(--m-line-strong);
  border-radius: 5px;
  background: var(--m-field);
  color: transparent;
  font-size: 12px;
  line-height: 18px;
  text-align: center;
}
form#review-form #TermsandConditionsAgreement:checked + label::before { background: var(--m-accent); border-color: var(--m-accent); color: var(--m-on-accent); }
form#review-form #TermsandConditionsAgreement:focus-visible + label::before { outline: 2px solid var(--m-accent); outline-offset: 2px; }
form#review-form label[for="TermsandConditionsAgreement"] .btn-link { font-size: inherit; color: var(--m-accent); text-decoration: underline; }

form#review-form > .row > .col-xs-6 { flex: 1 1 200px; margin-top: 12px; }
form#review-form > .row > .col-xs-6:has(#btn-back) { flex: 0 0 auto; margin-right: -28px; } /* the row's 40px column gap less 28px: 12px between the two buttons */
@media (min-width: 830px) { /* two sections per line: the second one starts level with the first, without a hairline above it */
  form#review-form > .row > .col-sm-6:nth-child(2) > .widget-box.transparent { border-top: 0; }
}
#btn-back {
  display: flex;
  align-items: center;
  gap: 8px;
  height: var(--m-btn-h);
  padding: 0 22px;
  border: 1px solid var(--m-line-strong) !important; /* Ace paints .btn-default with !important */
  border-radius: var(--m-radius) !important;
  background: transparent !important;
  color: var(--m-ink) !important;
  box-shadow: none;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .02em;
  transition: border-color .12s ease;
}
#btn-back:hover { border-color: var(--m-ink) !important; }
#btn-back:focus-visible { outline: 2px solid var(--m-accent); outline-offset: 2px; }
#btn-proceed:disabled { opacity: .45; cursor: not-allowed; } /* until the terms are ticked */
.page-content .col-lg-12 > form + .row .align-center > p { margin: 8px 0 0; font-size: 12px; color: var(--m-muted); } /* "Powered By ..." footer */

/* ---------- buttons ---------- */
.btn-recaptcha {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100% !important; /* the page sets width, height, min-width, padding and colours inline on Pay with Card and UnionPay */
  max-width: none;
  height: var(--m-btn-h) !important;
  min-width: 0 !important;
  padding: 0 16px !important;
  border: 0 !important;
  outline: 0 !important;
  border-radius: var(--m-radius) !important;
  font-weight: 600 !important; /* inline 500 */
  white-space: nowrap;
  cursor: pointer;
  box-shadow: none;
  transition: background-color .12s ease, transform .08s ease;
}
.btn-recaptcha:active { transform: translateY(1px); }
.btn-recaptcha:focus-visible { outline: 2px solid var(--m-accent) !important; outline-offset: 2px; }
/* Pay with Card: the primary action (the page paints it black inline) */
#PayWithCardBtn .btn-recaptcha { background: var(--m-accent) !important; color: var(--m-on-accent) !important; }
#PayWithCardBtn .btn-recaptcha:hover { background: var(--m-accent-hover) !important; }
/* UnionPay: black like the other wallet buttons, hover lifts it to a dark grey so the change shows on both themes; the logo is the only content */
#UnionPayBtn .btn-recaptcha { background: #18181b !important; color: #fff !important; }
#UnionPayBtn .btn-recaptcha:hover { background: #2c2f38 !important; }
#UnionPayBtn .btn-recaptcha img { position: static !important; height: 24px !important; margin: 0 !important; width: auto; } /* inline absolute offsets */

/* PROCEED: the form's submit, under a hairline like the sections above it */
#btn-proceed {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: var(--m-btn-h);
  padding: 0 16px;
  border: 0 !important; /* Ace's .btn-success draws a border */
  border-radius: var(--m-radius) !important;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--m-on-accent) !important;
  background: var(--m-accent) !important; /* Ace paints .btn-success green with !important */
  box-shadow: none;
  transition: background-color .12s ease, transform .08s ease;
}
#btn-proceed:hover { background: var(--m-accent-hover) !important; }
#btn-proceed:active { transform: translateY(1px); }
#btn-proceed:focus-visible { outline: 2px solid var(--m-accent); outline-offset: 2px; }
form#register-form > .row > .col-xs-12 { padding-top: 24px; border-top: 1px solid var(--m-line); }
form#register-form > .row > .col-xs-12:has(.proceed-button-div[style*="none"]) { display: none; } /* PROCEED is hidden while Pay with Card is the chosen method: no empty strip under a hairline */
.col-xs-12 > .col-sm-offset-6 { width: 100%; max-width: 420px; margin: 0 auto; float: none; padding: 0; } /* PROCEED: centred under the sections */
.proceed-button-div { margin: 0; }

/* ---------- small screens ---------- */
@media (max-width: 767px) {
  .container { padding: 0 12px 40px; }
  form#register-form { padding: 2px 16px 20px; border-radius: 10px; }
  .widget-box.transparent > .widget-body > .widget-main,
  #BankDetails:not([style*="none"]) { grid-template-columns: minmax(0, 1fr); } /* one column, however wide the phone */
  .form-control,
  form#register-form input.form-control,
  form#register-form select.form-control { font-size: 16px; } /* stops iOS zoom on focus */
  .col-xs-12 > .col-sm-offset-6 { max-width: none; }
}

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

/* ---------- dark theme ---------- */
/* theme-toggle: dark rules below appear twice (device setting and [data-theme="dark"]), as in style-minimal.css */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --m-bg: #0a0a0b;
    --m-surface: #111113;
    --m-ink: #ededef;
    --m-label: #c7c7cc;
    --m-muted: #8b8b94;
    --m-line: #3b3b44;
    --m-line-strong: #5a5a66;
    --m-field: #0a0a0b;
    --m-accent: #7c7cf0;
    --m-accent-hover: #9090f5;
    --m-accent-ring: rgba(124, 124, 240, .3);
    --m-on-accent: #0a0a0b;
    --m-danger: #f87171;
    --m-danger-bg: rgba(248, 113, 113, .08);
    --m-danger-line: rgba(248, 113, 113, .3);
    --m-addon: #1a1a1d;
    color-scheme: dark;
  }
  :root:not([data-theme="light"]) .input-validation-error,:root:not([data-theme="light"]) .has-error .form-control { background-color: var(--m-danger-bg); }
  :root:not([data-theme="light"]) .input-validation-error:focus,:root:not([data-theme="light"]) .has-error .form-control:focus { box-shadow: 0 0 0 3px rgba(248, 113, 113, .3) !important; }
  /* the black UnionPay button vanishes on the dark surface: hairline ring */
  :root:not([data-theme="light"]) #UnionPayBtn .btn-recaptcha { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
  :root:not([data-theme="light"]) .page-content .row > .col-lg-12 > .row > .col-xs-12 > img.img-responsive { background: #fff; padding: 6px 10px; border-radius: 8px; } /* merchant logo is authored for a white page */
  :root:not([data-theme="light"]) .iti__dropdown-content { background-color: var(--m-surface); border-color: var(--m-line); } /* phone country list is white by default */
  :root:not([data-theme="light"]) .iti__country.iti__highlight { background-color: var(--m-addon); }
}

  :root[data-theme="dark"] {
    --m-bg: #0a0a0b;
    --m-surface: #111113;
    --m-ink: #ededef;
    --m-label: #c7c7cc;
    --m-muted: #8b8b94;
    --m-line: #3b3b44;
    --m-line-strong: #5a5a66;
    --m-field: #0a0a0b;
    --m-accent: #7c7cf0;
    --m-accent-hover: #9090f5;
    --m-accent-ring: rgba(124, 124, 240, .3);
    --m-on-accent: #0a0a0b;
    --m-danger: #f87171;
    --m-danger-bg: rgba(248, 113, 113, .08);
    --m-danger-line: rgba(248, 113, 113, .3);
    --m-addon: #1a1a1d;
    color-scheme: dark;
  }
  :root[data-theme="dark"] .input-validation-error,:root[data-theme="dark"] .has-error .form-control { background-color: var(--m-danger-bg); }
  :root[data-theme="dark"] .input-validation-error:focus,:root[data-theme="dark"] .has-error .form-control:focus { box-shadow: 0 0 0 3px rgba(248, 113, 113, .3) !important; }
  /* the black UnionPay button vanishes on the dark surface: hairline ring */
  :root[data-theme="dark"] #UnionPayBtn .btn-recaptcha { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
  :root[data-theme="dark"] .page-content .row > .col-lg-12 > .row > .col-xs-12 > img.img-responsive { background: #fff; padding: 6px 10px; border-radius: 8px; } /* merchant logo is authored for a white page */
  :root[data-theme="dark"] .iti__dropdown-content { background-color: var(--m-surface); border-color: var(--m-line); } /* phone country list is white by default */
  :root[data-theme="dark"] .iti__country.iti__highlight { background-color: var(--m-addon); }