/* GPay Advance skin for the Portal's legacy Bootstrap templates. */
body.gpay-legacy { min-height: 100vh; background: var(--gpay-black); color: var(--gpay-text); font-family: Kanit, Arial, sans-serif; }
body.gpay-legacy .headerContainer { background: #080a0d; border-bottom: 1px solid var(--gpay-line); box-shadow: none; }
body.gpay-legacy .headerContainer .logo a, body.gpay-legacy .headerContainer .payment_logo a { display: inline-flex; align-items: center; min-height: 74px; }
body.gpay-legacy .headerContainer .logo img, body.gpay-legacy .headerContainer .payment_logo img { width: 182px !important; height: auto; filter: none; }
body.gpay-legacy .header-quote, body.gpay-legacy .quote-text { color: var(--gpay-muted); background: transparent; }
body.gpay-legacy .navbar, body.gpay-legacy .navbar-default { margin: 0; border: 0; background: transparent; box-shadow: none; }
body.gpay-legacy .navbar-default .navbar-nav > li > a, body.gpay-legacy .navbar-default .navbar-nav > li > a:focus { color: #c9ced5; background: transparent; font-size: 14px; }
body.gpay-legacy .navbar-default .navbar-nav > li > a:hover, body.gpay-legacy .navbar-default .navbar-nav > .open > a { color: var(--gpay-orange); background: transparent; }
body.gpay-legacy .navbar-default .navbar-toggle { border-color: #3a414b; background: transparent; } body.gpay-legacy .navbar-default .navbar-toggle .icon-bar { background: var(--gpay-text); }
body.gpay-legacy .dropdown-menu { border-color: var(--gpay-line); background: var(--gpay-panel); box-shadow: 0 14px 35px rgba(0,0,0,.35); } body.gpay-legacy .dropdown-menu > li > a { color: #d7dbe1; padding: 9px 18px; } body.gpay-legacy .dropdown-menu > li > a:hover { background: #222a33; color: var(--gpay-orange); }
body.gpay-legacy .sigNupButtons .login { margin-top: 0; border-radius: 10px; background: linear-gradient(135deg,var(--gpay-orange),var(--gpay-orange-2)); color: white; }
body.gpay-legacy .content { min-height: calc(100vh - 175px); padding: 32px 0 50px; background: var(--gpay-black); }
body.gpay-legacy .content > .container, body.gpay-legacy .content > .container-fluid { color: var(--gpay-text); }
body.gpay-legacy h1, body.gpay-legacy h2, body.gpay-legacy h3, body.gpay-legacy h4, body.gpay-legacy h5, body.gpay-legacy h6, body.gpay-legacy label, body.gpay-legacy legend { color: var(--gpay-text); }
body.gpay-legacy p, body.gpay-legacy .help-block, body.gpay-legacy .text-muted { color: var(--gpay-muted); }
body.gpay-legacy .panel, body.gpay-legacy .well, body.gpay-legacy .thumbnail { border-color: var(--gpay-line); background: var(--gpay-panel); box-shadow: none; }
body.gpay-legacy .panel-heading { border-color: var(--gpay-line); background: #1b2128; color: var(--gpay-text); }
body.gpay-legacy .table, body.gpay-legacy .table > tbody > tr > td, body.gpay-legacy .table > thead > tr > th { color: var(--gpay-text); border-color: var(--gpay-line); }
body.gpay-legacy .table-striped > tbody > tr:nth-of-type(odd), body.gpay-legacy .table-hover > tbody > tr:hover { background: #151a20; }
body.gpay-legacy .form-control, body.gpay-legacy select.form-control { border-color: #343b44; background: #0c0f12; color: var(--gpay-text); box-shadow: none; }
body.gpay-legacy .form-control:focus { border-color: var(--gpay-orange); box-shadow: 0 0 0 2px rgba(255,133,0,.12); }
body.gpay-legacy .btn-primary, body.gpay-legacy .btn-login { border-color: transparent; background: linear-gradient(135deg,var(--gpay-orange),var(--gpay-orange-2)); color: var(--gpay-white); }
body.gpay-legacy .btn-default { border-color: #3a414b; background: transparent; color: var(--gpay-text); text-shadow: none; }
body.gpay-legacy a { color: #ffac4c; } body.gpay-legacy a:hover { color: var(--gpay-orange); }
body.gpay-legacy .alert-info { color: #b8e5ff; background: #122532; border-color: #21445a; } body.gpay-legacy .alert-warning { color: #ffd79d; background: #342613; border-color: #6a4a21; }
body.gpay-legacy .footer, body.gpay-legacy .payment_footer { padding: 28px 0; border-top: 1px solid var(--gpay-line); background: #080a0d; color: var(--gpay-muted); }
body.gpay-legacy .footer p, body.gpay-legacy .footer h5, body.gpay-legacy .payment_footer p { color: var(--gpay-muted); }
body.gpay-legacy .footer a,
body.gpay-legacy .payment_footer a { color: #c9ced5; text-decoration: none; }
body.gpay-legacy .footer a:hover,
body.gpay-legacy .footer a:focus,
body.gpay-legacy .payment_footer a:hover,
body.gpay-legacy .payment_footer a:focus { color: var(--gpay-orange); text-decoration: none; }
body.gpay-legacy .footer a:active,
body.gpay-legacy .payment_footer a:active { color: var(--gpay-orange-2); }
body.gpay-legacy .footer img { max-width: 182px; height: auto; }

/* Semantic merchant components. Page templates use these classes instead of
   inline colour/layout rules, so each theme can provide its own palette. */
body.gpay-legacy .merchant-overview__summary { border-bottom: 1px solid var(--gpay-line); padding-bottom: 10px; }
body.gpay-legacy .merchant-overview__cell { border-right: 1px solid var(--gpay-line); }
body.gpay-legacy .merchant-overview__last-login { font-size: 11px; }
body.gpay-legacy .merchant-overview__welcome,
body.gpay-legacy .merchant-overview__value { margin-top: 10px; margin-bottom: 10px; color: var(--gpay-text); }
body.gpay-legacy .merchant-overview__metric { padding-top: 10px; }
body.gpay-legacy .merchant-overview__amount { color: #ffd09a; }
body.gpay-legacy .merchant-overview__spacer { height: 20px; }
body.gpay-legacy a.merchant-overview__omnibus-cta,
body.gpay-legacy a.merchant-overview__omnibus-cta:hover,
body.gpay-legacy a.merchant-overview__omnibus-cta:focus {
  color: var(--gpay-white);
  text-decoration: none;
  text-shadow: none;
}
body.gpay-legacy a.merchant-overview__omnibus-cta:hover,
body.gpay-legacy a.merchant-overview__omnibus-cta:focus {
  background: linear-gradient(135deg,#ff9d27,#e34c16);
  box-shadow: 0 5px 14px rgba(255,133,0,.28);
}
body.gpay-legacy .merchant-overview__omnibus-cta .icon-plus { margin-right: 2px; }
body.gpay-legacy .merchant-bank-select {
  border-color: #343b44;
  background: #0c0f12;
  color: var(--gpay-text);
  color-scheme: dark;
}
body.gpay-legacy .merchant-bank-select option {
  background: #171c22;
  color: var(--gpay-white);
}
body.gpay-legacy .merchant-bank-select option:checked {
  background: var(--gpay-orange);
  color: #101419;
}
body.gpay-legacy .merchant-status { font-weight: 800; }
body.gpay-legacy .merchant-status--verified { color: var(--gpay-success); }
body.gpay-legacy .merchant-status--action { color: #ffac4c; }
body.gpay-legacy .qr-status { margin: 18px 0 0; font-weight: 600; }
body.gpay-legacy .qr-status--waiting { color: #b8e5ff; }
body.gpay-legacy .qr-status--success { color: var(--gpay-success); }
body.gpay-legacy .qr-status--error { color: #ff8f8f; }
body.gpay-legacy .payment-success__icon { display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; margin: 4px auto 18px; border-radius: 50%; background: var(--gpay-success); color: #07140d; font-size: 32px; font-weight: 800; }

/* Bootstrap panels and tabs are used by the legacy merchant screens.  Their
   default Bootstrap palette is white, so define the full dark-state set here. */
body.gpay-legacy .panel-default > .panel-heading,
body.gpay-legacy .panel-heading { background: #1b2128; border-color: var(--gpay-line); color: var(--gpay-text); }
body.gpay-legacy .panel-default > .panel-heading .panel-title,
body.gpay-legacy .panel-heading .panel-title { color: var(--gpay-text); }
body.gpay-legacy .panel-footer { padding: 14px 15px; background: #11151a; border-top: 1px solid var(--gpay-line); color: var(--gpay-text); }
body.gpay-legacy .panel-footer .help-block { margin-bottom: 0; }
body.gpay-legacy .list-group { box-shadow: none; }
body.gpay-legacy .list-group-item,
body.gpay-legacy a.list-group-item { border-color: var(--gpay-line); background: #11151a; color: #ffac4c; }
body.gpay-legacy a.list-group-item:hover,
body.gpay-legacy a.list-group-item:focus { border-color: var(--gpay-line); background: #222a33; color: var(--gpay-white); }
body.gpay-legacy .list-group-item.active,
body.gpay-legacy .list-group-item.active:hover,
body.gpay-legacy .list-group-item.active:focus { border-color: var(--gpay-orange); background: var(--gpay-orange); color: var(--gpay-white); text-shadow: none; }
body.gpay-legacy .nav-tabs { border-bottom: 1px solid var(--gpay-line); }
body.gpay-legacy .nav-tabs > li { margin-bottom: -1px; }
body.gpay-legacy .nav-tabs > li > a { margin-right: 4px; border: 1px solid transparent; border-radius: 9px 9px 0 0; color: var(--gpay-muted); background: transparent; }
body.gpay-legacy .nav-tabs > li > a:hover,
body.gpay-legacy .nav-tabs > li > a:focus { border-color: var(--gpay-line); color: var(--gpay-text); background: #1b2128; }
body.gpay-legacy .nav-tabs > li.active > a,
body.gpay-legacy .nav-tabs > li.active > a:hover,
body.gpay-legacy .nav-tabs > li.active > a:focus { border-color: var(--gpay-line) var(--gpay-line) transparent; color: var(--gpay-white); background: var(--gpay-panel); }
body.gpay-legacy .tab-content { padding: 20px; border: 1px solid var(--gpay-line); border-top: 0; border-radius: 0 0 10px 10px; background: var(--gpay-panel); color: var(--gpay-text); }
body.gpay-legacy .merchant-tabs__content { margin: 20px 0; }

/* Integration guide: a deliberately quiet documentation surface.  Keep the
   visual hierarchy in spacing and typography, not a rainbow of Bootstrap
   contextual colours. */
body.gpay-legacy .merchant-integration { max-width: 1080px; }
body.gpay-legacy .merchant-integration__header { margin: 0 0 26px; border-color: var(--gpay-line); }
body.gpay-legacy .merchant-integration__header h3 { margin: 0 0 8px; font-weight: 500; }
body.gpay-legacy .merchant-integration__header small { color: var(--gpay-muted); font-size: 15px; }
body.gpay-legacy .merchant-integration__picker {
  margin: 0 0 18px;
  padding: 14px 16px;
  border: 1px solid var(--gpay-line);
  border-radius: 8px;
  background: #11151a;
}
body.gpay-legacy .merchant-integration__picker label { margin-right: 10px; font-weight: 400; }
body.gpay-legacy .merchant-integration__card {
  margin-bottom: 16px;
  border: 1px solid var(--gpay-line);
  border-radius: 8px;
  overflow: hidden;
  background: #151a20;
}
body.gpay-legacy .merchant-integration__card > .panel-heading {
  padding: 12px 16px;
  border: 0;
  border-bottom: 1px solid var(--gpay-line);
  background: #1a2027;
  color: var(--gpay-text);
}
body.gpay-legacy .merchant-integration__card > .panel-body { padding: 18px; }
body.gpay-legacy .merchant-integration__card p,
body.gpay-legacy .merchant-integration__card li,
body.gpay-legacy .merchant-integration__card dd { color: #c3c9d1; }
body.gpay-legacy .merchant-integration__card li { margin-bottom: 7px; }
body.gpay-legacy .merchant-integration__table { margin: 0; background: transparent; }
body.gpay-legacy .merchant-integration__table > thead > tr > th {
  padding: 11px 14px;
  border-color: var(--gpay-line);
  background: #11151a;
  color: #dce1e6;
  font-weight: 500;
}
body.gpay-legacy .merchant-integration__table > tbody > tr > td {
  padding: 11px 14px;
  border-color: var(--gpay-line);
  background: transparent;
  color: #c3c9d1;
}
body.gpay-legacy .merchant-integration__table > tbody > tr:nth-child(even) > td { background: #12171c; }
body.gpay-legacy .merchant-integration code,
body.gpay-legacy .merchant-integration__code {
  border: 1px solid #303842;
  border-radius: 5px;
  background: #0c0f12;
  color: #e0e5eb;
  text-shadow: none;
}
body.gpay-legacy .merchant-integration code { padding: 1px 5px; }
body.gpay-legacy .merchant-integration__code {
  margin: 12px 0;
  padding: 13px 15px;
  font-size: 12px;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
body.gpay-legacy .merchant-integration__notice {
  margin: 16px 0 0;
  border: 1px solid #3a434d;
  border-left: 3px solid #9aa4af;
  border-radius: 5px;
  background: #151a20;
  color: #d2d8df;
}
body.gpay-legacy .merchant-integration__notice--warning {
  border-color: #6b522d;
  border-left-color: #e6a24d;
  background: #2a2115;
  color: #f0d5aa;
}
body.gpay-legacy .merchant-integration__notice--info {
  border-color: #294b62;
  border-left-color: #67b8df;
  background: #13232e;
  color: #c2e2f1;
}
body.gpay-legacy .merchant-integration .text-danger { color: #e5bc8d; }
@media (max-width: 767px) {
  body.gpay-legacy .merchant-integration__picker .form-group,
  body.gpay-legacy .merchant-integration__picker .form-control { width: 100%; }
  body.gpay-legacy .merchant-integration__picker label { display: block; margin: 0 0 7px; }
  body.gpay-legacy .merchant-integration__card > .panel-body { padding: 15px; }
}
body.gpay-legacy .nav-pills > li > a { border-radius: 8px; color: var(--gpay-muted); }
body.gpay-legacy .nav-pills > li > a:hover,
body.gpay-legacy .nav-pills > li > a:focus { color: var(--gpay-text); background: #1b2128; }
body.gpay-legacy .nav-pills > li.active > a,
body.gpay-legacy .nav-pills > li.active > a:hover,
body.gpay-legacy .nav-pills > li.active > a:focus { color: var(--gpay-white); background: var(--gpay-orange); }

@media (max-width: 768px) {
  body.gpay-legacy .merchant-overview__cell { border-right: 0; }
  body.gpay-legacy .nav-tabs > li > a { margin-right: 1px; padding-right: 10px; padding-left: 10px; }
  body.gpay-legacy .tab-content { padding: 15px; }
}

body.gpay-v2-bridge .navbar-area, body.gpay-v2-bridge .luvion-nav, body.gpay-v2-bridge .luvion-responsive-nav { background: #080a0d; } body.gpay-v2-bridge .navbar-area .navbar-light .navbar-nav .nav-item .nav-link { color: #d7dbe1; } body.gpay-v2-bridge .page-title-area, body.gpay-v2-bridge .contact-area, body.gpay-v2-bridge .faq-area { background: var(--gpay-black); } body.gpay-v2-bridge .contact-form, body.gpay-v2-bridge .contact-info-box, body.gpay-v2-bridge .faq-accordion .accordion .accordion-item { background: var(--gpay-panel); border-color: var(--gpay-line); }
body.gpay-v2-bridge .navbar-brand img, body.gpay-v2-bridge .luvion-responsive-nav .logo img, body.gpay-v2-bridge .single-footer-widget .logo img { width: auto !important; height: 42px !important; max-width: min(190px, 55vw) !important; object-fit: contain; }
.gpay-v2-logo { display: block; width: auto !important; height: 42px !important; max-width: min(190px, 55vw) !important; object-fit: contain; }
@media (max-width: 767px) { body.gpay-legacy .headerContainer .logo { text-align: center; } body.gpay-legacy .headerContainer .logo a { min-height: 60px; } body.gpay-legacy .headerContainer .logo img, body.gpay-legacy .headerContainer .payment_logo img, body.gpay-legacy .navbar-brand img { width: auto !important; max-width: 150px !important; max-height: 38px !important; } body.gpay-legacy .navbar-default .navbar-collapse { border-color: var(--gpay-line); background: var(--gpay-panel); } body.gpay-legacy .content { padding-top: 20px; } body.gpay-legacy .headerContainer, body.gpay-legacy .content, body.gpay-legacy .container { max-width: 100% !important; } body.gpay-legacy .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; } body.gpay-legacy input, body.gpay-legacy select, body.gpay-legacy textarea { max-width: 100%; } }
@media (max-width: 480px) { body.gpay-legacy .headerContainer, body.gpay-legacy .content { padding-left: 12px !important; padding-right: 12px !important; } body.gpay-legacy .btn, body.gpay-legacy button[type="submit"] { max-width: 100%; } }
@media (max-width: 767px) { body.gpay-v2-bridge .navbar-brand img, body.gpay-v2-bridge .luvion-responsive-nav .logo img { height: 34px !important; max-width: 150px !important; } }
@media (max-width: 767px) { .gpay-v2-logo { height: 34px !important; max-width: 150px !important; } }