/*
 * setup-style-bold.css — "bold" look for the public registration page (/setup/1337).
 *
 * Counterpart of style-bold.css (the payment page): a deep ink/indigo band runs full-bleed across the top and holds the logo and merchant title, and the four
 * section cards (Personal, Contact, Payment Details, Payment Account) overlap its lower edge. One accent (electric violet-blue) for the section badges, focus rings and
 * the primary buttons. UnionPay stays black. Loaded INSTEAD of webpay-setup-overrides.css, so it carries everything that file has (top bar, cards, field grid, method
 * pills, buttons, small screens). Bootstrap 3 / Ace / Open Sans / Font Awesome only — no new libraries or fonts. `!important` appears only where the page's own inline
 * style="" attributes or Ace have to be beaten. Dark theme lives in the two flat blocks at the bottom.
 */

:root {
  --bd-text: #141a33;
  --bd-line: #d6dbec;
  --bd-accent: #4f46e5;
  --bd-accent-2: #7c3aed;
  --bd-danger: #c62e40; /* darker than style-bold.css's #d63a4a, which is 4.4:1 on the tinted error backgrounds */
  --bd-card: #fff;
  --bd-hair: #e8ebf6; /* row dividers */
  --bd-surface: #f5f6fd; /* quiet boxes: the terms tick */
  --bd-muted: #5a6383;
}

/* ---------- 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, .85); }
#navbar .ace-nav > li > a > .ace-icon { color: rgba(255, 255, 255, .85); }
/* 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: 14px !important; padding: 6px; }
.ace-nav > li > .dropdown-menu > li > a { border-radius: 10px; 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(79, 70, 229, .1); color: #0d1330; }
.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;
}
/* the light/dark button sits on the band in both themes; it is the only preview button that means anything on this page */
.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); }
.webpay-theme-li:has(#webpayMethodsToggle, #webpayFieldsToggle, #webpayColsToggle) { display: none; }

/* ---------- header on the band: logo and title ---------- */
.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; /* inline max-width / max-height */
  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;
}
p:has(> span[style*="#ffffff"]) { display: none; } /* stray white "." spacer paragraphs */

/* ---------- layout: one numbered 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 and a phone gets one column. The first card overlaps the band. */
form#register-form {
  counter-reset: bd-step;
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  margin: 44px 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: #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: 32px 32px 12px;
}
/* section title: numbered badge + bold title */
.widget-box.transparent > .widget-header {
  display: flex;
  align-items: center;
  gap: 12px;
  background: transparent;
  border: 0;
  min-height: 0;
  padding: 0;
  margin-bottom: 22px;
  text-align: left !important; /* .text-center is !important */
}
.widget-box.transparent > .widget-header::before {
  counter-increment: bd-step;
  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);
}
.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: -.1px;
  text-transform: none;
  color: var(--bd-text);
}
.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(min(250px, 100%), 1fr));
  column-gap: 24px;
  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(min(250px, 100%), 1fr));
  column-gap: 24px;
  align-items: start;
}
#BankDetails > :is(#BankSnippet, #PayToSnippet) { grid-column: 1 / -1; }

/* 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: 18px; }
.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: 6px; text-align: left; }
label.control-label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #2b3350;
}
.control-label .required,
.required { color: var(--bd-danger); margin-left: 2px; }

.form-control,
form#register-form input.form-control,
form#register-form select.form-control {
  height: 54px;
  padding: 10px 16px;
  font-size: 16px;
  color: var(--bd-text);
  background-color: #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#register-form .form-control:hover { border-color: #aeb6d3; }
form#register-form .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; }

.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 16px;
}
.input-group .form-control,
form#register-form .input-group input.form-control { border-radius: 0 12px 12px 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: 12px 0 0 12px !important; }
form#register-form .input-group > .form-control + .input-group-addon { border: 1px solid var(--bd-line); border-left: 0; border-radius: 0 12px 12px 0 !important; }

/* validation */
form#register-form .form-control.input-validation-error,
form#register-form .has-error .form-control {
  border-color: var(--bd-danger);
  background-color: #fff7f8;
}
form#register-form .form-control.input-validation-error:focus,
form#register-form .has-error .form-control:focus {
  border-color: var(--bd-danger);
  box-shadow: 0 0 0 2px var(--bd-danger), 0 0 0 6px rgba(198, 46, 64, .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); }

/* ---------- payment method choice ---------- */
/* the methods as equal-width tiles across the card (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: 12px; margin-left: 0 !important; } /* the page offsets the list 25px */
.input-list-container .radio {
  display: flex;
  align-items: center;
  min-height: 60px;
  margin: 0 !important; /* .radio-inline adds a left offset */
  padding: 0 18px 0 40px;
  border: 1px solid var(--bd-line);
  border-radius: 14px;
  background: var(--bd-card);
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.input-list-container .radio:hover { border-color: #aeb6d3; }
.input-list-container .radio:has(input:checked) {
  border-color: var(--bd-accent);
  background: rgba(79, 70, 229, .08);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, .14);
}
.input-list-container .radio:has(input:focus-visible) { outline: 2px solid var(--bd-accent); outline-offset: 2px; } /* the radio itself is drawn by the label, so ring the pill */
.input-list-container .radio label { font-weight: 700; color: var(--bd-text); 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(--bd-accent); }
.radio-info input[type="radio"]:checked + label::before { border-color: var(--bd-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: bd-step; }
body:not(:has(#register-form)) .widget-box.transparent { margin-bottom: 22px; }

/* ---------- review step ---------- */
/* The same section 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 box
   of its own, and BACK and SETUP NOW share one line. */
form#review-form { margin: 44px 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: 12px 0; border-bottom: 1px solid var(--bd-hair); }
form#review-form dl.dl-horizontal > dt { padding-right: 28px; text-align: left; white-space: normal; font-size: 13px; font-weight: 600; color: var(--bd-muted); }
form#review-form dl.dl-horizontal > dd { font-weight: 700; color: var(--bd-text); 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 22px;
  background: var(--bd-surface);
  border: 1px solid var(--bd-line);
  border-radius: 16px;
}
form#review-form label[for="TermsandConditionsAgreement"] { display: block; margin: 0; padding: 0; font-size: 14px; font-weight: 600; line-height: 1.6; color: var(--bd-text); cursor: pointer; }
/* the tick box is the label's ::before (the input itself is hidden): a square in the accent colour, filled when ticked */
form#review-form #TermsandConditionsAgreement + label::before {
  width: 24px;
  height: 24px;
  margin-right: 12px;
  vertical-align: -6px;
  border: 2px solid #8a93b8;
  border-radius: 7px;
  background: var(--bd-card);
  color: transparent;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
}
form#review-form #TermsandConditionsAgreement:checked + label::before { background: linear-gradient(135deg, var(--bd-accent), var(--bd-accent-2)); border-color: var(--bd-accent); color: #fff; }
form#review-form #TermsandConditionsAgreement:focus-visible + label::before { outline: 3px solid var(--bd-accent); outline-offset: 2px; }
form#review-form label[for="TermsandConditionsAgreement"] .btn-link { font-size: inherit; color: var(--bd-accent); 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 28px;
  border: 2px solid var(--bd-line) !important; /* Ace paints .btn-default with !important */
  border-radius: 14px !important;
  background: var(--bd-card) !important;
  color: var(--bd-text) !important;
  box-shadow: none;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .04em;
  transition: border-color .15s ease, color .15s ease;
}
#btn-back:hover { border-color: var(--bd-accent) !important; color: var(--bd-accent) !important; }
#btn-back:focus-visible { outline: 3px solid var(--bd-accent); 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(--bd-muted); } /* "Powered By ..." footer */

/* ---------- buttons ---------- */
.btn-recaptcha {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100% !important; /* the page sets width, height, min-width and padding inline on Pay with Card and UnionPay */
  max-width: 420px;
  height: 56px !important;
  min-width: 0 !important;
  padding: 0 20px !important;
  border: 0 !important;
  outline: 0 !important;
  border-radius: 14px !important;
  font-size: 16px !important;
  font-weight: 700 !important; /* inline font-weight: 500 */
  letter-spacing: .01em;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .2s ease, background-color .15s ease;
}
.btn-recaptcha:focus-visible,
#btn-proceed:focus-visible { outline: 3px solid var(--bd-accent) !important; outline-offset: 3px; }
.btn-recaptcha .fa { color: rgba(255, 255, 255, .95); font-size: 22px !important; }
/* Pay with Card: the primary action (the page paints it black inline) */
#PayWithCardBtn .btn-recaptcha {
  max-width: none;
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%) !important;
  color: #fff !important;
  box-shadow: 0 8px 20px rgba(79, 70, 229, .38), inset 0 1px 0 rgba(255, 255, 255, .22);
}
/* UnionPay: black, to suit the vendor logo */
#UnionPayBtn .btn-recaptcha {
  background: #0a0a0f !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(10, 10, 15, .25);
}
#UnionPayBtn .btn-recaptcha:hover { background: #1b1c26 !important; }

/* PROCEED: the form's submit, same treatment as Pay with Card */
#btn-proceed {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 56px;
  border: 0 !important; /* Ace paints .btn-success with !important */
  border-radius: 14px !important;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .04em;
  color: #fff !important;
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%) !important;
  box-shadow: 0 8px 20px rgba(79, 70, 229, .38), inset 0 1px 0 rgba(255, 255, 255, .22);
  transition: transform .15s ease, box-shadow .2s ease;
}
.col-xs-12 > .col-sm-offset-6 { width: 100%; max-width: 420px; margin: 0 auto; float: none; padding: 0; } /* PROCEED: centred under the cards */
.proceed-button-div { margin: 0; }
#PayWithCardBtn .btn-recaptcha:hover,
#UnionPayBtn .btn-recaptcha:hover,
#btn-proceed:hover { transform: translateY(-2px); }
#PayWithCardBtn .btn-recaptcha:hover,
#btn-proceed:hover { box-shadow: 0 14px 30px rgba(79, 70, 229, .5), inset 0 1px 0 rgba(255, 255, 255, .22); }
#PayWithCardBtn .btn-recaptcha:active,
#UnionPayBtn .btn-recaptcha:active,
#btn-proceed:active { transform: translateY(0) scale(.99); }

/* ---------- 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 { padding-top: 22px; } /* clears the top-bar pill, which is taller than its (zero-height) bar */
  .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; }
  form#register-form { margin-top: 30px; }
  .widget-box.transparent { padding: 24px 16px 6px; border-radius: 18px; }
  .widget-box.transparent > .widget-body > .widget-main,
  #BankDetails:not([style*="none"]) { grid-template-columns: minmax(0, 1fr); } /* one column, however wide the phone */
  #PayToSnippet table { width: 100% !important; } /* inline width: 535px would push the page sideways */
  .btn-recaptcha { max-width: none; }
}

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

/* ---------- dark theme (flat rules) ---------- */
/* dark rules below appear twice (device setting and [data-theme="dark"]), as in style-bold.css */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bd-text: #f2f4fc;
    --bd-line: #2d3456;
    --bd-accent: #8b93ff;
    --bd-accent-2: #a06cff;
    --bd-danger: #ff8593;
    --bd-card: #12152a;
    --bd-hair: #262c4c;
    --bd-surface: #0a0c1a;
    --bd-muted: #a4abc8;
    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"]) .widget-box.transparent {
    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"]) .widget-box.transparent > .widget-header::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"]) .form-control,:root:not([data-theme="light"]) form#register-form input.form-control,:root:not([data-theme="light"]) form#register-form select.form-control {
    color: #f2f4fc;
    background-color: #0a0c1a;
    border-color: #2d3456;
  }
  :root:not([data-theme="light"]) form#register-form .form-control:hover { border-color: #4a5484; }
  :root:not([data-theme="light"]) form#register-form .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#register-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"]) form#register-form .form-control.input-validation-error,:root:not([data-theme="light"]) form#register-form .has-error .form-control { border-color: #ff6b7d; background-color: #2a1322; }
  :root:not([data-theme="light"]) form#register-form .form-control.input-validation-error:focus,:root:not([data-theme="light"]) form#register-form .has-error .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"]) .validation-summary-errors { background: #2a1322; border-color: #6b2a3c; color: #ffb3bd; }

  :root:not([data-theme="light"]) .input-list-container .radio { background: #0a0c1a; }
  :root:not([data-theme="light"]) .input-list-container .radio:hover { border-color: #4a5484; }
  :root:not([data-theme="light"]) .input-list-container .radio:has(input:checked) { background: rgba(139, 147, 255, .16); box-shadow: 0 0 0 3px rgba(139, 147, 255, .22); }

  :root:not([data-theme="light"]) #PayWithCardBtn .btn-recaptcha,:root:not([data-theme="light"]) #btn-proceed {
    background: linear-gradient(135deg, #5055e4 0%, #7a49e0 100%) !important;
    box-shadow: 0 8px 24px rgba(99, 102, 241, .45), inset 0 1px 0 rgba(255, 255, 255, .25);
  }
  :root:not([data-theme="light"]) #PayWithCardBtn .btn-recaptcha:hover,:root:not([data-theme="light"]) #btn-proceed:hover { box-shadow: 0 14px 32px rgba(99, 102, 241, .55), inset 0 1px 0 rgba(255, 255, 255, .25); }
  :root:not([data-theme="light"]) #UnionPayBtn .btn-recaptcha { background: #000 !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); }
  :root:not([data-theme="light"]) #UnionPayBtn .btn-recaptcha:hover { background: #1b1d2e !important; }
}

  :root[data-theme="dark"] {
    --bd-text: #f2f4fc;
    --bd-line: #2d3456;
    --bd-accent: #8b93ff;
    --bd-accent-2: #a06cff;
    --bd-danger: #ff8593;
    --bd-card: #12152a;
    --bd-hair: #262c4c;
    --bd-surface: #0a0c1a;
    --bd-muted: #a4abc8;
    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"] .widget-box.transparent {
    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"] .widget-box.transparent > .widget-header::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"] .form-control,:root[data-theme="dark"] form#register-form input.form-control,:root[data-theme="dark"] form#register-form select.form-control {
    color: #f2f4fc;
    background-color: #0a0c1a;
    border-color: #2d3456;
  }
  :root[data-theme="dark"] form#register-form .form-control:hover { border-color: #4a5484; }
  :root[data-theme="dark"] form#register-form .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#register-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"] form#register-form .form-control.input-validation-error,:root[data-theme="dark"] form#register-form .has-error .form-control { border-color: #ff6b7d; background-color: #2a1322; }
  :root[data-theme="dark"] form#register-form .form-control.input-validation-error:focus,:root[data-theme="dark"] form#register-form .has-error .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"] .validation-summary-errors { background: #2a1322; border-color: #6b2a3c; color: #ffb3bd; }

  :root[data-theme="dark"] .input-list-container .radio { background: #0a0c1a; }
  :root[data-theme="dark"] .input-list-container .radio:hover { border-color: #4a5484; }
  :root[data-theme="dark"] .input-list-container .radio:has(input:checked) { background: rgba(139, 147, 255, .16); box-shadow: 0 0 0 3px rgba(139, 147, 255, .22); }

  :root[data-theme="dark"] #PayWithCardBtn .btn-recaptcha,:root[data-theme="dark"] #btn-proceed {
    background: linear-gradient(135deg, #5055e4 0%, #7a49e0 100%) !important;
    box-shadow: 0 8px 24px rgba(99, 102, 241, .45), inset 0 1px 0 rgba(255, 255, 255, .25);
  }
  :root[data-theme="dark"] #PayWithCardBtn .btn-recaptcha:hover,:root[data-theme="dark"] #btn-proceed:hover { box-shadow: 0 14px 32px rgba(99, 102, 241, .55), inset 0 1px 0 rgba(255, 255, 255, .25); }
  :root[data-theme="dark"] #UnionPayBtn .btn-recaptcha { background: #000 !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); }
  :root[data-theme="dark"] #UnionPayBtn .btn-recaptcha:hover { background: #1b1d2e !important; }