/*
 * webpay-overrides.css — local styling overlay for the public one-off payment page.
 *
 * Loaded after every other stylesheet, so it wins on ties. This is the ONLY file where the look changes:
 * everything else in site/ is overwritten by `python fetch.py`. Bootstrap 3 / Ace / Open Sans / Font Awesome
 * only — no new libraries or fonts. `!important` appears only where the page's own inline style="" attributes
 * have to be beaten.
 */

:root {
  --wp-accent: #0a7cc1;
  --wp-accent-dark: #075f94;
  --wp-ink: #1f2933;
  --wp-muted: #6b7686;
  --wp-line: #d9dfe7;
  --wp-danger: #d64545;
  --wp-radius: 12px;
}

/* ---------- page ---------- */
body {
  font-family: "Open Sans", "Segoe UI", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  background: linear-gradient(180deg, #e8f2fa 0, #f4f6f9 340px) no-repeat, #f4f6f9;
  color: var(--wp-ink);
  font-size: 14px;
  line-height: 1.6;
}
.container {
  max-width: 880px;
  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: #fff !important;
  color: var(--wp-ink) !important;
  border: 1px solid var(--wp-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);
  transition: box-shadow .15s ease;
}
#navbar .ace-nav > li > a:hover { box-shadow: 0 4px 12px rgba(16, 24, 40, .12); }
#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(--wp-muted); }
#navbar .ace-nav > li > a > .ace-icon { color: var(--wp-muted); }
.ace-nav > li > .dropdown-menu {
  border: 1px solid var(--wp-line);
  border-radius: var(--wp-radius);
  box-shadow: 0 12px 32px rgba(16, 24, 40, .14);
  overflow: hidden;
}

/* ---------- heading ---------- */
.page-content .row > .col-lg-12 > .align-center > span {
  display: block;
  margin: 8px 0 0 !important;
  font-size: 30px !important;
  font-weight: 700;
  letter-spacing: -.4px;
  color: var(--wp-ink);
}
.page-content .row > .col-lg-12 > .align-center > p {
  margin: 4px 0 24px;
  font-size: 15px;
  color: var(--wp-muted);
}

/* ---------- the card ---------- */
form.payment-form {
  background: #fff;
  border: 1px solid #e4e9f0;
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 12px 40px rgba(16, 24, 40, .08);
  padding: 32px 28px 20px;
  margin: 0;
}
form.payment-form::after { content: ""; display: table; clear: both; }
form.payment-form > .row,
form.payment-form > .col-lg-12 { margin-left: 0; margin-right: 0; }

/* section titles: "Your Details" / "Payment Details" */
form.payment-form .align-center.padding-10 {
  text-align: left !important;
  padding: 0 0 6px;
  margin-bottom: 14px;
  border-bottom: 1px solid #eef1f5;
}
form.payment-form .align-center.padding-10 > span {
  display: block;
  text-align: left !important;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--wp-accent);
}

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

.form-control,
form.payment-form input.form-control {
  height: 46px;
  padding: 10px 14px;
  font-size: 15px;
  color: var(--wp-ink);
  background: #fff;
  border: 1px solid var(--wp-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.payment-form input.form-control:hover { border-color: #b8c2d0; } /* the form-qualified selectors outrank the base rule above, which would otherwise win over :hover and :focus */
.form-control:focus,
form.payment-form input.form-control:focus {
  border-color: var(--wp-accent);
  box-shadow: 0 0 0 4px rgba(10, 124, 193, .16) !important; /* !important: Ace forces box-shadow: none !important on .form-control */
  outline: 0;
}
.form-control::placeholder { color: var(--wp-muted); }

/* amount: prefix + larger figure */
.input-group-addon {
  background: #f3f6fa;
  color: var(--wp-muted);
  font-weight: 600;
  border: 1px solid var(--wp-line);
  border-right: 0;
  border-radius: 10px 0 0 10px !important;
  padding: 0 16px;
}
.input-group .form-control,
form.payment-form .input-group input.form-control { border-radius: 0 10px 10px 0 !important; }
#PaymentAmount { font-size: 20px; font-weight: 600; letter-spacing: .01em; }

/* validation */
.input-validation-error,
form.payment-form .has-error input.form-control,
.has-error .form-control {
  border-color: var(--wp-danger);
  background: #fff8f8;
}
.input-validation-error:focus,
form.payment-form .has-error input.form-control:focus { box-shadow: 0 0 0 4px rgba(214, 69, 69, .16) !important; }
.field-validation-error,
.text-danger {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--wp-danger);
}
.validation-summary-errors {
  background: #fff1f1;
  border: 1px solid #f6c6c6;
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 18px;
}
.validation-summary-errors ul { margin: 0; padding-left: 18px; }

/* info icon next to a label */
.fa-info-circle { color: var(--wp-accent); }

/* ---------- pay buttons ---------- */
.btn-black,
.btn-recaptcha {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  max-width: 420px;
  height: 54px;
  margin: 0 auto;
  padding: 0 20px !important;
  border: 0 !important;
  outline: 0 !important; /* .btn-black draws a 1px grey outline */
  border-radius: 12px !important;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .01em;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .15s ease, background-color .15s ease;
}
.btn-recaptcha:active { transform: translateY(1px); }
.btn-recaptcha:focus-visible { outline: 3px solid rgba(10, 124, 193, .4) !important; outline-offset: 2px; }

/* wallet button: stays dark to suit the vendor logo */
.btn-recaptcha[data-paymentmethod="AliPayPlus"] {
  background: #111827;
  color: #fff;
  box-shadow: 0 2px 6px rgba(17, 24, 39, .2);
}
.btn-recaptcha[data-paymentmethod="AliPayPlus"]:hover,.btn-recaptcha[data-paymentmethod="WeChat"]:hover,.btn-recaptcha[data-paymentmethod="UnionPay"]:hover {
  background: #1f2937;
  box-shadow: 0 6px 16px rgba(17, 24, 39, .28);
}

/* bank (PayTo) button: dark like the wallet buttons */
.btn-recaptcha[data-paymentmethod="PayTo"] {
  background: #111827;
  color: #fff;
  box-shadow: 0 2px 6px rgba(17, 24, 39, .2);
}
.btn-recaptcha[data-paymentmethod="PayTo"]:hover {
  background: #1f2937;
  box-shadow: 0 6px 16px rgba(17, 24, 39, .28);
}

/* card button: the primary action */
.btn-recaptcha[data-paymentmethod="Card"] {
  background: var(--wp-accent);
  color: #fff;
  box-shadow: 0 2px 6px rgba(10, 124, 193, .3);
}
.btn-recaptcha[data-paymentmethod="Card"]:hover {
  background: var(--wp-accent-dark);
  box-shadow: 0 8px 20px rgba(10, 124, 193, .36);
}
.btn-recaptcha .fa { color: rgba(255, 255, 255, .92); font-size: 22px !important; }

/* Apple Pay: the live page adds <apple-pay-button> from Apple's SDK (not loaded in the local copy), sized by Apple's own variables */
apple-pay-button {
  display: block;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  --apple-pay-button-width: 100%;
  --apple-pay-button-height: 54px;
  --apple-pay-button-border-radius: 12px;
  --apple-pay-button-padding: 0;
  --apple-pay-button-box-sizing: border-box;
}

/* Google Pay: Google's script injects the button into #google-pay-div; stretch it to match the others */
#google-pay-div { max-width: 420px; margin-left: auto; margin-right: auto; }
#google-pay-div button,
#google-pay-div .gpay-card-info-container {
  width: 100% !important;
  height: 54px !important;
  min-height: 54px !important;
  border-radius: 12px !important;
  background-size: contain !important;
  box-shadow: 0 2px 6px rgba(17, 24, 39, .2);
}

/* "Pay by Credit / Debit Card" caption: inline verdana 10pt blue -> page font */
#CardDetail > .col-xs-12 { margin-bottom: 10px; }
#CardDetail > .col-xs-12 span {
  font-family: "Open Sans", "Segoe UI", Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 600;
  color: var(--wp-muted) !important;
}
#CardDetail > .col-xs-12 strong { font-weight: 600; }

/* the nested columns around each pay button add padding twice: flatten so all buttons share one width */
.apple-div .col-xs-12,
.alipay-plus-div .col-xs-12,
.payto-div .col-xs-12,
#CardDetail .col-xs-12 { padding-left: 0; padding-right: 0; }

/* "OR" divider */
.separator {
  color: var(--wp-muted);
  font-size: 12px;
  letter-spacing: .1em;
  margin: 6px 0 16px;
}
.separator::before,
.separator::after { border-top: 1px solid #e4e9f0 !important; }

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

/* ---------- footer ---------- */
form.payment-form > .row:last-of-type { display: none; }
form.payment-form > .row:nth-last-of-type(2) {
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid #eef1f5;
}
form.payment-form > .row:nth-last-of-type(2) > div { text-align: center; }
form.payment-form > .row:nth-last-of-type(2) br { display: none; }
form.payment-form > .row:nth-last-of-type(2) a { margin: 0 4px; vertical-align: middle; }
form.payment-form > .row:nth-last-of-type(2) img { max-height: 26px; width: auto; vertical-align: middle; opacity: .92; }
form.payment-form > .row:nth-last-of-type(2) span { color: var(--wp-muted) !important; font-size: 12.5px !important; }

/* ---------- small screens ---------- */
@media (max-width: 767px) {
  .page-content.layout-page-content { padding-top: 12px; }
  .btn-recaptcha { white-space: nowrap; gap: 6px; font-size: 15px; padding: 0 12px !important; }
  .btn-recaptcha .fa { font-size: 18px !important; }
  form.payment-form > .row:nth-last-of-type(2) span { font-size: 12px !important; }
  .page-content .row > .col-lg-12 > .align-center > span { font-size: 24px !important; }
  form.payment-form { padding: 22px 16px 14px; border-radius: 14px; }
  .btn-black,
  .btn-recaptcha { max-width: none; }
  .container { padding-left: 4px; padding-right: 4px; }
}

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

/* ---------- dark theme ---------- */
/* theme-toggle: dark rules below appear twice (device setting and [data-theme="dark"]); generated by make-toggleable.py */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --wp-accent: #4da3e0;
    --wp-accent-dark: #2f86c4;
    --wp-ink: #e7ebf2;
    --wp-muted: #9aa5b5;
    --wp-line: #2f3948;
    --wp-danger: #ff7b7b;
  }
  :root:not([data-theme="light"]) body { background: linear-gradient(180deg, #0f1a26 0, #0b1018 340px) no-repeat, #0b1018; color: var(--wp-ink); }
  :root:not([data-theme="light"]) form.payment-form { background: #121a25; border-color: #223043; box-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 40px rgba(0, 0, 0, .5); }
  :root:not([data-theme="light"]) form.payment-form .align-center.padding-10 { border-bottom-color: #223043; }
  :root:not([data-theme="light"]) label.control-label { color: #c4cdda; }
  :root:not([data-theme="light"]) .form-control,:root:not([data-theme="light"]) form.payment-form input.form-control { background: #0d141d; color: var(--wp-ink); border-color: var(--wp-line); }
  :root:not([data-theme="light"]) .form-control:hover { border-color: #45546a; }
  :root:not([data-theme="light"]) .form-control::placeholder { color: #8a96a8; }
  :root:not([data-theme="light"]) .input-group-addon { background: #16202c; color: var(--wp-muted); border-color: var(--wp-line); }
  :root:not([data-theme="light"]) .input-validation-error,:root:not([data-theme="light"]) form.payment-form .has-error input.form-control { background: #2a1517; }
  :root:not([data-theme="light"]) .validation-summary-errors { background: #2a1517; border-color: #5a2a2d; }
  :root:not([data-theme="light"]) #navbar .ace-nav > li > a { background: #121a25 !important; color: var(--wp-ink) !important; border-color: #223043; } /* overrides the light rule's !important */
  :root:not([data-theme="light"]) .ace-nav > li > .dropdown-menu { background: #121a25; border-color: #223043; }
  :root:not([data-theme="light"]) .ace-nav > li > .dropdown-menu > li > a { color: var(--wp-ink); }
  :root:not([data-theme="light"]) .ace-nav > li > .dropdown-menu > li > a:hover { background: #1b2736; color: var(--wp-ink); }
  :root:not([data-theme="light"]) .separator::before,:root:not([data-theme="light"]) .separator::after { border-top-color: #223043 !important; }
  :root:not([data-theme="light"]) form.payment-form > .row:nth-last-of-type(2) { border-top-color: #223043; }
  :root:not([data-theme="light"]) .page-content .row > .col-lg-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"]) form.payment-form > .row:nth-last-of-type(2) img { background: #fff !important; padding: 3px 6px; border-radius: 6px; } /* footer logos are dark-on-transparent */

  :root:not([data-theme="light"]) .btn-recaptcha[data-paymentmethod="PayTo"],:root:not([data-theme="light"]) .btn-recaptcha[data-paymentmethod="AliPayPlus"] { background: #1b2736; border: 1px solid #3a4a60 !important; } /* a black button vanishes on the dark card; light rule sets border:0 !important */
  :root:not([data-theme="light"]) .btn-recaptcha[data-paymentmethod="Card"] { background: #1a72b0; } /* white label needs a darker blue than the accent used for text */
  :root:not([data-theme="light"]) .btn-recaptcha[data-paymentmethod="Card"]:hover { background: #166ba3; }
}

  :root[data-theme="dark"] {
    --wp-accent: #4da3e0;
    --wp-accent-dark: #2f86c4;
    --wp-ink: #e7ebf2;
    --wp-muted: #9aa5b5;
    --wp-line: #2f3948;
    --wp-danger: #ff7b7b;
  }
  :root[data-theme="dark"] body { background: linear-gradient(180deg, #0f1a26 0, #0b1018 340px) no-repeat, #0b1018; color: var(--wp-ink); }
  :root[data-theme="dark"] form.payment-form { background: #121a25; border-color: #223043; box-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 40px rgba(0, 0, 0, .5); }
  :root[data-theme="dark"] form.payment-form .align-center.padding-10 { border-bottom-color: #223043; }
  :root[data-theme="dark"] label.control-label { color: #c4cdda; }
  :root[data-theme="dark"] .form-control,:root[data-theme="dark"] form.payment-form input.form-control { background: #0d141d; color: var(--wp-ink); border-color: var(--wp-line); }
  :root[data-theme="dark"] .form-control:hover { border-color: #45546a; }
  :root[data-theme="dark"] .form-control::placeholder { color: #8a96a8; }
  :root[data-theme="dark"] .input-group-addon { background: #16202c; color: var(--wp-muted); border-color: var(--wp-line); }
  :root[data-theme="dark"] .input-validation-error,:root[data-theme="dark"] form.payment-form .has-error input.form-control { background: #2a1517; }
  :root[data-theme="dark"] .validation-summary-errors { background: #2a1517; border-color: #5a2a2d; }
  :root[data-theme="dark"] #navbar .ace-nav > li > a { background: #121a25 !important; color: var(--wp-ink) !important; border-color: #223043; } /* overrides the light rule's !important */
  :root[data-theme="dark"] .ace-nav > li > .dropdown-menu { background: #121a25; border-color: #223043; }
  :root[data-theme="dark"] .ace-nav > li > .dropdown-menu > li > a { color: var(--wp-ink); }
  :root[data-theme="dark"] .ace-nav > li > .dropdown-menu > li > a:hover { background: #1b2736; color: var(--wp-ink); }
  :root[data-theme="dark"] .separator::before,:root[data-theme="dark"] .separator::after { border-top-color: #223043 !important; }
  :root[data-theme="dark"] form.payment-form > .row:nth-last-of-type(2) { border-top-color: #223043; }
  :root[data-theme="dark"] .page-content .row > .col-lg-12 > img.img-responsive { background: #fff; padding: 6px 10px; border-radius: 8px; } /* merchant logo is authored for a white page */
  :root[data-theme="dark"] form.payment-form > .row:nth-last-of-type(2) img { background: #fff !important; padding: 3px 6px; border-radius: 6px; } /* footer logos are dark-on-transparent */
  :root[data-theme="dark"] .btn-recaptcha[data-paymentmethod="PayTo"],:root[data-theme="dark"] .btn-recaptcha[data-paymentmethod="AliPayPlus"] { background: #1b2736; border: 1px solid #3a4a60 !important; } /* a black button vanishes on the dark card; light rule sets border:0 !important */
  :root[data-theme="dark"] .btn-recaptcha[data-paymentmethod="Card"] { background: #1a72b0; } /* white label needs a darker blue than the accent used for text */
  :root[data-theme="dark"] .btn-recaptcha[data-paymentmethod="Card"]:hover { background: #166ba3; }

/* ---------- sandbox additions: UnionPay button and the card frame's height ---------- */
/* The page places a small UnionPay button (absolutely positioned inline) beside the Card button: keep it in the flow as a square next to it. */
div:has(> [data-paymentmethod="UnionPay"]) { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 420px; margin-left: auto; margin-right: auto; }
div:has(> [data-paymentmethod="UnionPay"]) > [data-paymentmethod="Card"] { flex: 1 1 0; min-width: 0; max-width: none; margin: 0; }
div:has(> [data-paymentmethod="UnionPay"]) > [data-paymentmethod="Card"] { white-space: nowrap; gap: 5px; padding: 0 10px !important; font-size: 15px; } /* five card icons share the narrower button */
div:has(> [data-paymentmethod="UnionPay"]) > [data-paymentmethod="Card"] .fa { font-size: 17px !important; }
[data-paymentmethod="UnionPay"] { position: relative !important; flex: 0 0 64px; width: 64px !important; min-width: 64px !important; margin: 0 !important; padding: 0 !important; } /* inline position:absolute, width, margin-left */
[data-paymentmethod="UnionPay"] img { position: static !important; height: 26px !important; margin: 0 !important; width: auto; } /* inline absolute offsets */
/* The hosted card page loads in a frame of fixed height (400 from the markup). The form is about 332px tall, so the frame is cut to 340px; nothing can
   resize a frame in CSS. When the validation summary shows, webpay-card-overrides.css tightens the form to make room for it inside the same 340px.
   The spacer paragraph (a white ".") and .space-12 above the frame, and the logo strip's inline top padding, are dead space. */
#AuthoriseCard { display: block; height: 340px; border: 0; color-scheme: normal; } /* a frame whose colour-scheme differs from the frame document's gets an opaque white canvas (soft and minimal set dark on the page) */
/* Card step: the card frame is only on the page once Card has been chosen, so the other methods go, and their "OR" lines with them (each block holds its own).
   The preview-only button next to the theme toggle (webpay-theme-toggle.js) shows them again by setting data-other-methods="show" on <html>. */
html:not([data-other-methods="show"]) body:has(#AuthoriseCard) :is(.apple-div, .alipay-plus-div, .payto-div, .wechat-div, .slicepay-div) { display: none; }
#CardDetail > .col-xs-12:first-child,
#CardDetail .space-12 { display: none; }
#DisplayCardLogos { padding-top: 0 !important; } /* inline padding-top:15px */

/* One width for every payment method: each button runs edge to edge of its column. Card runs from the left edge up to the UnionPay button, which sits on the right edge. */
.alipay-plus-div .col-xs-12,
.wechat-div .col-xs-12,
.slicepay-div .col-xs-12 { float: none; width: 100%; padding-left: 0; padding-right: 0; } /* nested columns inset Alipay+ and WeChat; the other blocks already flatten theirs */
div:has(> [data-paymentmethod="UnionPay"]) { max-width: none; margin-left: 0; margin-right: 0; }
.btn-recaptcha,
apple-pay-button,
#google-pay-div { max-width: none; }