/*
 * setup-style-split.css — "split" variant of the registration page (/setup/1337): one wide card, two panes.
 * Left pane: brand gradient holding the merchant logo and title, sticky while the sections scroll.
 * Right pane: white pane with the four numbered sections stacked. From 992px down the brand pane becomes a band on top and everything is one column.
 * Loaded INSTEAD of webpay-setup-overrides.css, so it carries every fix that file has. Look follows variants/style-split.css. CSS only; Open Sans / system stack.
 *
 * Layout trick: the wrapper that holds the header row and the <form> becomes the card grid (brand column | form column). The brand gradient is painted on the
 * wrapper behind the left column, so it runs the full card height while the header row on top of it sticks to the viewport.
 */

:root {
  --sp-brand-a: #0b1f44;
  --sp-brand-b: #12408a;
  --sp-brand-c: #1466b3;
  --sp-brand-glow: rgba(23, 134, 214, .35);
  --sp-brand: radial-gradient(420px 420px at 0% 100%, var(--sp-brand-glow) 0, transparent 70%), linear-gradient(155deg, var(--sp-brand-a) 0%, var(--sp-brand-b) 55%, var(--sp-brand-c) 100%);
  --sp-accent: #0f6fc2;
  --sp-accent-2: #1d4ed8;
  --sp-btn-a: #0f6fc2; /* button and number-badge gradient: white text sits on it */
  --sp-btn-b: #1d4ed8;
  --sp-wallet: #0d1424;
  --sp-wallet-hover: #1c2740;
  --sp-wallet-ring: transparent;
  --sp-ink: #1b2533;
  --sp-label: #3a4556;
  --sp-muted: #5f6b7e;
  --sp-placeholder: #687280;
  --sp-line: #d8dee8;
  --sp-line-hover: #b7c1d0;
  --sp-edge: #e6ebf2;
  --sp-danger: #c62f2f;
  --sp-err-bg: #fff8f8;
  --sp-err-line: #f6c6c6;
  --sp-ring: rgba(15, 111, 194, .16);
  --sp-tint: rgba(15, 111, 194, .08);
  --sp-focus: rgba(15, 111, 194, .45);
  --sp-page: #eaeff6;
  --sp-glow: #d3e4f7;
  --sp-card: #ffffff;
  --sp-section: #f7f9fc;
  --sp-field: #ffffff;
  --sp-addon: #f1f4f9;
  --sp-hover: #eef2f8;
  --sp-shadow: 0 2px 4px rgba(16, 24, 40, .05), 0 24px 60px rgba(16, 24, 40, .16);
  --sp-left-w: 340px;
}

/* ---------- page ---------- */
body {
  font-family: "Open Sans", "Segoe UI", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  background: radial-gradient(900px 420px at 15% -80px, var(--sp-glow) 0, transparent 70%), var(--sp-page);
  color: var(--sp-ink);
  font-size: 14px;
  line-height: 1.6;
  min-height: 100vh;
}
.container {
  max-width: 1100px;
  padding-bottom: 48px;
}
.page-content.layout-page-content {
  background: transparent;
  border: 0;
  padding: 0 12px;
}

/* ---------- top bar ---------- */
#navbar {
  background: transparent;
  border: 0;
  box-shadow: none;
  min-height: 0;
  margin: 10px 14px 0 0;
}
#navbar .navbar-container { padding: 0; }
#navbar .ace-nav > li > a {
  background: var(--sp-card) !important; /* Ace paints the nav link with !important */
  color: var(--sp-ink) !important;
  border: 1px solid var(--sp-line);
  border-radius: 999px;
  height: 44px;
  line-height: 1.2;
  padding: 0 14px 0 6px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .06);
}
#navbar .nav-user-photo { width: 32px; height: 32px; margin: 5px 8px 0 0; }
#navbar .user-info { font-size: 13px; max-width: none; line-height: 1.15; padding-top: 7px; }
#navbar .user-info small { color: var(--sp-muted); }
#navbar .ace-nav > li > a > .ace-icon { color: var(--sp-muted); }
/* 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: 12px !important; padding: 6px; }
.ace-nav > li > .dropdown-menu > li > a { border-radius: 8px; 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(15, 111, 194, .08); color: var(--sp-ink); }
.ace-nav > li > .dropdown-menu {
  background: var(--sp-card);
  border: 1px solid var(--sp-line);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(16, 24, 40, .14);
  overflow: hidden;
}
.ace-nav > li > .dropdown-menu > li > a { color: var(--sp-ink); }
.ace-nav > li > .dropdown-menu > li > a:hover { background: var(--sp-hover); color: var(--sp-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; }

/* ---------- the card: brand column | form column ---------- */
.page-content.layout-page-content > .row { margin-left: 0; margin-right: 0; }
.page-content.layout-page-content > .row > .col-lg-12 {
  float: none;
  width: auto;
  padding: 0;
  display: grid;
  grid-template-columns: var(--sp-left-w) minmax(0, 1fr);
  position: relative;
  overflow: hidden;
  overflow: clip; /* clips like hidden but keeps the sticky brand pane working; hidden is the fallback for old browsers */
  border-radius: 22px;
  box-shadow: var(--sp-shadow);
  background-color: var(--sp-card);
  background-image: var(--sp-brand);
  background-repeat: no-repeat;
  background-size: var(--sp-left-w) 100%; /* the gradient covers the left column only */
}
/* decorative rings in the brand pane */
.page-content.layout-page-content > .row > .col-lg-12::before,
.page-content.layout-page-content > .row > .col-lg-12::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .14);
  pointer-events: none;
}
.page-content.layout-page-content > .row > .col-lg-12::before { width: 360px; height: 360px; left: -150px; bottom: -120px; }
.page-content.layout-page-content > .row > .col-lg-12::after { width: 220px; height: 220px; left: -60px; bottom: -50px; }
form#register-form ~ .row { display: none; } /* the second stray-dot spacer row under the form */

/* ---------- brand pane: logo + title, and nothing else ---------- */
.page-content .row > .col-lg-12 > .row:first-child {
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  position: sticky;
  top: 24px;
  z-index: 1;
  margin: 0;
  padding: 40px 32px;
}
.page-content .row > .col-lg-12 > .row:first-child > [class*="col-"] { float: none; width: auto; padding: 0; }
.page-content .row > .col-lg-12 > .row:first-child img {
  display: block;
  margin: 0 0 22px !important; /* inline style="margin:auto" centres it; the brand pane is left-aligned */
  padding: 10px 14px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
  max-width: 220px !important;
  max-height: 96px !important;
  width: auto;
}
.page-content .row > .col-lg-12 > .row:first-child .align-center { text-align: left; }
.page-content .row > .col-lg-12 > .row:first-child .align-center > span {
  display: block;
  text-align: left;
  margin: 0 !important; /* inline margin-top on the title span */
  font-size: 26px !important; /* inline font-size: 25px */
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.3px;
  overflow-wrap: anywhere;
  color: #fff;
}
p:has(> span[style*="#ffffff"]) { display: none; } /* stray white "." spacer paragraphs */

/* ---------- form pane: one numbered section per card ---------- */
/* 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. */
form#register-form,
form#review-form { /* the review step (/Setup/1337/<id>/Review) sits in the same right-hand pane */
  counter-reset: section;
  grid-column: 2;
  grid-row: 1;
  position: relative;
  z-index: 1;
  min-width: 0;
  margin: 0;
  padding: 36px 40px 40px;
  background: var(--sp-card);
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
form#register-form > .row {
  display: flex;
  flex-direction: column;
  gap: 18px;
  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(--sp-section);
  border: 1px solid var(--sp-edge);
  border-radius: 16px;
  box-shadow: none;
  padding: 22px 24px 6px;
}
.widget-box.transparent > .widget-header {
  display: flex;
  align-items: center;
  gap: 12px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--sp-edge);
  min-height: 0;
  padding: 0 0 14px;
  margin-bottom: 20px;
  text-align: left !important; /* Ace centres widget headers with .text-center */
}
.widget-box.transparent > .widget-header::before {
  counter-increment: section;
  content: counter(section);
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--sp-btn-a) 0%, var(--sp-btn-b) 100%);
}
.widget-box.transparent > .widget-header > .widget-title {
  float: none;
  display: block;
  margin: 0;
  line-height: 1.4;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sp-accent);
}
.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: 20px;
  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: 20px;
  align-items: start;
}
#BankDetails > :is(#BankSnippet, #PayToSnippet) { grid-column: 1 / -1; min-width: 0; overflow-x: auto; }
#PayToSnippet table { width: 100% !important; } /* inline width: 535px would overflow a phone */

/* 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: 600;
  color: var(--sp-label);
}
.control-label .required,
.required { color: var(--sp-danger); margin-left: 2px; }

.form-control,
form#register-form input.form-control,
form#register-form select.form-control {
  height: 46px;
  padding: 10px 14px;
  font-size: 15px;
  color: var(--sp-ink);
  background-color: var(--sp-field);
  border: 1px solid var(--sp-line);
  border-radius: 10px !important; /* Ace squares inputs off with !important on input[type=text] */
  box-shadow: none;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.form-control:hover,
form#register-form input.form-control:hover { border-color: var(--sp-line-hover); } /* 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(--sp-accent);
  box-shadow: 0 0 0 4px var(--sp-ring) !important; /* !important: Ace forces box-shadow: none !important on .form-control */
  outline: 0;
}
.form-control::placeholder { color: var(--sp-placeholder); }
form#register-form input.form-control:-webkit-autofill {
  -webkit-text-fill-color: var(--sp-ink);
  transition: background-color 9999s ease 0s;
}

.input-group-addon {
  background: var(--sp-addon);
  color: var(--sp-muted);
  font-weight: 600;
  border: 1px solid var(--sp-line);
  border-right: 0;
  border-radius: 10px 0 0 10px !important;
  padding: 0 16px;
}
.input-group .form-control,
form#register-form .input-group input.form-control { border-radius: 0 10px 10px 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: 10px 0 0 10px !important; }
form#register-form .input-group > .form-control + .input-group-addon { border: 1px solid var(--sp-line); border-left: 0; border-radius: 0 10px 10px 0 !important; }

/* validation */
.input-validation-error,
.has-error .form-control {
  border-color: var(--sp-danger);
  background-color: var(--sp-err-bg);
}
.input-validation-error:focus,
.has-error .form-control:focus { box-shadow: 0 0 0 4px rgba(198, 47, 47, .16) !important; }
.field-validation-error,
.text-danger {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--sp-danger);
}
.validation-summary-errors {
  background: var(--sp-err-bg);
  border: 1px solid var(--sp-err-line);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 18px;
}
.validation-summary-errors ul { margin: 0; padding-left: 18px; }
.fa-info-circle { color: var(--sp-accent); }

/* ---------- payment method choice ---------- */
/* the methods as equal-width tiles, two per row in this narrower pane; the chosen one is outlined in the accent colour */
.input-list-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 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 16px 0 38px;
  border: 1px solid var(--sp-line);
  border-radius: 12px;
  background: var(--sp-field);
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.input-list-container .radio:hover { border-color: var(--sp-line-hover); }
.input-list-container .radio:has(input:checked) {
  border-color: var(--sp-accent);
  background: linear-gradient(var(--sp-tint), var(--sp-tint)), var(--sp-field);
  box-shadow: 0 0 0 3px var(--sp-ring);
}
.input-list-container .radio:has(input:focus-visible) { outline: 3px solid var(--sp-focus); outline-offset: 2px; }
.input-list-container .radio label { font-weight: 600; color: var(--sp-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(--sp-accent); }
.radio-info input[type="radio"]:checked + label::before { border-color: var(--sp-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 ---------- */
/* The review pane is about 640px wide, so its sections stack. Each section's rows are a label / value list (long values, such as an email address, wrap), the
   terms tick is a box of its own, BACK and SETUP NOW share one line, and the "Powered By" line closes the form pane. */
form#review-form > .row { display: flex; flex-wrap: wrap; gap: 18px; 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; margin: 0; padding: 0; }
form#review-form > .row > .col-sm-6 { width: 100%; } /* sections and the terms tick take a full line */
form#review-form > .row > .col-xs-6 { width: auto; } /* BACK / SETUP NOW size themselves (Bootstrap makes col-xs-6 50% wide) */
form#review-form .widget-box.transparent { margin: 0; padding-bottom: 12px; }
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: 1px solid var(--sp-edge); }
form#review-form dl.dl-horizontal > dt { padding-right: 28px; text-align: left; white-space: normal; font-size: 13px; font-weight: 600; color: var(--sp-muted); }
form#review-form dl.dl-horizontal > dd { font-weight: 600; color: var(--sp-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: 16px 20px;
  background: var(--sp-section);
  border: 1px solid var(--sp-edge);
  border-radius: 14px;
}
form#review-form label[for="TermsandConditionsAgreement"] { display: block; margin: 0; padding: 0; font-size: 14px; line-height: 1.6; color: var(--sp-ink); 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: 22px;
  height: 22px;
  margin-right: 12px;
  vertical-align: -5px;
  border: 1.5px solid #8590a3;
  border-radius: 6px;
  background: var(--sp-field);
  color: transparent;
  font-size: 14px;
  line-height: 19px;
  text-align: center;
}
form#review-form #TermsandConditionsAgreement:checked + label::before { background: linear-gradient(135deg, var(--sp-btn-a) 0%, var(--sp-btn-b) 100%); border-color: var(--sp-accent); color: #fff; }
form#review-form #TermsandConditionsAgreement:focus-visible + label::before { outline: 3px solid var(--sp-focus); outline-offset: 2px; }
form#review-form label[for="TermsandConditionsAgreement"] .btn-link { font-size: inherit; color: var(--sp-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: 54px;
  padding: 0 26px;
  border: 1px solid var(--sp-line-hover) !important; /* Ace paints .btn-default with !important */
  border-radius: 12px !important;
  background: var(--sp-field) !important;
  color: var(--sp-ink) !important;
  box-shadow: none;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .04em;
  transition: border-color .15s ease, color .15s ease;
}
#btn-back:hover { border-color: var(--sp-accent) !important; color: var(--sp-accent) !important; }
#btn-back:focus-visible { outline: 3px solid var(--sp-focus); outline-offset: 2px; }
#btn-proceed:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; } /* until the terms are ticked */
/* the "Powered By ..." row is a third item of the card grid: it goes under the form pane (the brand pane is dark, so the text cannot sit there) */
form#review-form + .row { grid-column: 2; grid-row: 2; position: relative; z-index: 1; margin: 0; padding: 0 40px 28px; background: var(--sp-card); }
form#review-form + .row > [class*="col-"] { float: none; width: auto; padding: 0; }
form#review-form + .row .align-center > p { margin: 0; font-size: 12.5px; color: var(--sp-muted); }

/* ---------- buttons ---------- */
.btn-recaptcha {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100% !important; /* the page sets width, height and min-width inline on Pay with Card */
  max-width: 420px;
  height: 54px !important;
  min-width: 0 !important;
  padding: 0 20px !important;
  border: 0 !important;
  outline: 0 !important;
  border-radius: 12px !important;
  font-size: 16px !important;
  font-weight: 600;
  letter-spacing: .01em;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .15s ease, background-color .15s ease, filter .15s ease;
}
.btn-recaptcha:active { transform: translateY(1px); }
.btn-recaptcha:focus-visible { outline: 3px solid var(--sp-focus) !important; outline-offset: 2px; }
.btn-recaptcha .fa { color: rgba(255, 255, 255, .92); 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, var(--sp-btn-a) 0%, var(--sp-btn-b) 100%) !important;
  color: #fff !important;
  box-shadow: 0 6px 16px rgba(29, 78, 216, .32);
}
#PayWithCardBtn .btn-recaptcha:hover { filter: brightness(1.08); box-shadow: 0 10px 24px rgba(29, 78, 216, .4); }
/* UnionPay: dark, to suit the vendor logo */
#UnionPayBtn .btn-recaptcha {
  background: var(--sp-wallet) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(13, 20, 36, .25), inset 0 0 0 1px var(--sp-wallet-ring);
}
#UnionPayBtn .btn-recaptcha:hover { background: var(--sp-wallet-hover) !important; }
#UnionPayBtn img { position: static !important; height: 26px !important; margin: 0 !important; width: auto; } /* inline absolute offsets */

/* PROCEED: the form's submit */
#btn-proceed {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 54px;
  border: 0 !important;
  border-radius: 12px !important;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .04em;
  color: #fff !important;
  background: linear-gradient(135deg, var(--sp-btn-a) 0%, var(--sp-btn-b) 100%) !important; /* Ace paints .btn-success with !important */
  box-shadow: 0 6px 16px rgba(29, 78, 216, .32);
  transition: box-shadow .15s ease, transform .12s ease, filter .15s ease;
}
#btn-proceed:hover { filter: brightness(1.08); box-shadow: 0 10px 24px rgba(29, 78, 216, .4); }
.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; }
#btn-proceed:active { transform: translateY(1px); }
#btn-proceed:focus-visible { outline: 3px solid var(--sp-focus); outline-offset: 2px; }

/* ---------- stacked panes: tablet and phone ---------- */
/* Below 992px the brand pane is a band on top of the form. It paints the gradient itself, since the card-wide one is only sized for the left column. */
@media (max-width: 991px) {
  .page-content.layout-page-content > .row > .col-lg-12 { grid-template-columns: minmax(0, 1fr); background-image: none; }
  .page-content.layout-page-content > .row > .col-lg-12::before,
  .page-content.layout-page-content > .row > .col-lg-12::after { display: none; }
  .page-content .row > .col-lg-12 > .row:first-child { position: static; background-image: var(--sp-brand); padding: 28px 28px 30px; }
  form#register-form,
  form#review-form { grid-column: 1; grid-row: 2; padding: 28px 28px 32px; }
  form#review-form + .row { grid-column: 1; grid-row: 3; padding: 0 28px 24px; }
}
@media (max-width: 767px) {
  .page-content.layout-page-content { padding: 8px 10px 0; }
  .container { padding-left: 0; padding-right: 0; }
  .page-content.layout-page-content > .row > .col-lg-12 { border-radius: 18px; }
  .page-content .row > .col-lg-12 > .row:first-child { padding: 24px 20px 26px; }
  .page-content .row > .col-lg-12 > .row:first-child .align-center > span { font-size: 22px !important; }
  form#register-form,
  form#review-form { padding: 22px 16px 24px; }
  .widget-box.transparent { padding: 18px 16px 4px; }
  .btn-recaptcha { max-width: none; }
}

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

/* ---------- dark theme ---------- */
/* dark rules below appear twice (device setting and [data-theme="dark"]), as in style-split.css */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark; /* native select lists and scrollbars follow the page */
    --sp-brand-a: #050b18;
    --sp-brand-b: #0b2247;
    --sp-brand-c: #0e5c9e;
    --sp-brand-glow: rgba(23, 134, 214, .30);
    --sp-accent: #4da3ee;
    --sp-accent-2: #2f6bf0;
    --sp-btn-a: #1a68cc;
    --sp-btn-b: #2c60e6;
    --sp-wallet: #05080e;
    --sp-wallet-hover: #151d2b;
    --sp-wallet-ring: rgba(255, 255, 255, .22);
    --sp-ink: #e7ecf4;
    --sp-label: #c3ccda;
    --sp-muted: #97a3b7;
    --sp-placeholder: #8a96a8;
    --sp-line: #2c3748;
    --sp-line-hover: #46546b;
    --sp-edge: #222c3a;
    --sp-danger: #ff7b7b;
    --sp-err-bg: #2a1519;
    --sp-err-line: #5a2a2d;
    --sp-ring: rgba(77, 163, 238, .22);
    --sp-tint: rgba(77, 163, 238, .14);
    --sp-focus: rgba(77, 163, 238, .6);
    --sp-page: #070a11;
    --sp-glow: #10233f;
    --sp-card: #10161f;
    --sp-section: #141c27;
    --sp-field: #0b1018;
    --sp-addon: #182130;
    --sp-hover: #182130;
    --sp-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 28px 70px rgba(0, 0, 0, .65);
  }
  :root:not([data-theme="light"]) #navbar .ace-nav > li > a { box-shadow: none; }
  :root:not([data-theme="light"]) .input-validation-error:focus,:root:not([data-theme="light"]) .has-error .form-control:focus { box-shadow: 0 0 0 4px rgba(255, 123, 123, .2) !important; }
  :root:not([data-theme="light"]) #PayWithCardBtn .btn-recaptcha,:root:not([data-theme="light"]) #btn-proceed { box-shadow: 0 6px 20px rgba(47, 107, 240, .4); }
  :root:not([data-theme="light"]) #PayWithCardBtn .btn-recaptcha:hover,:root:not([data-theme="light"]) #btn-proceed:hover { box-shadow: 0 10px 26px rgba(47, 107, 240, .5); }
}

  :root[data-theme="dark"] {
    color-scheme: dark; /* native select lists and scrollbars follow the page */
    --sp-brand-a: #050b18;
    --sp-brand-b: #0b2247;
    --sp-brand-c: #0e5c9e;
    --sp-brand-glow: rgba(23, 134, 214, .30);
    --sp-accent: #4da3ee;
    --sp-accent-2: #2f6bf0;
    --sp-btn-a: #1a68cc;
    --sp-btn-b: #2c60e6;
    --sp-wallet: #05080e;
    --sp-wallet-hover: #151d2b;
    --sp-wallet-ring: rgba(255, 255, 255, .22);
    --sp-ink: #e7ecf4;
    --sp-label: #c3ccda;
    --sp-muted: #97a3b7;
    --sp-placeholder: #8a96a8;
    --sp-line: #2c3748;
    --sp-line-hover: #46546b;
    --sp-edge: #222c3a;
    --sp-danger: #ff7b7b;
    --sp-err-bg: #2a1519;
    --sp-err-line: #5a2a2d;
    --sp-ring: rgba(77, 163, 238, .22);
    --sp-tint: rgba(77, 163, 238, .14);
    --sp-focus: rgba(77, 163, 238, .6);
    --sp-page: #070a11;
    --sp-glow: #10233f;
    --sp-card: #10161f;
    --sp-section: #141c27;
    --sp-field: #0b1018;
    --sp-addon: #182130;
    --sp-hover: #182130;
    --sp-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 28px 70px rgba(0, 0, 0, .65);
  }
  :root[data-theme="dark"] #navbar .ace-nav > li > a { box-shadow: none; }
  :root[data-theme="dark"] .input-validation-error:focus,:root[data-theme="dark"] .has-error .form-control:focus { box-shadow: 0 0 0 4px rgba(255, 123, 123, .2) !important; }
  :root[data-theme="dark"] #PayWithCardBtn .btn-recaptcha,:root[data-theme="dark"] #btn-proceed { box-shadow: 0 6px 20px rgba(47, 107, 240, .4); }
  :root[data-theme="dark"] #PayWithCardBtn .btn-recaptcha:hover,:root[data-theme="dark"] #btn-proceed:hover { box-shadow: 0 10px 26px rgba(47, 107, 240, .5); }