:root {
  color-scheme: light;
  font-family: Inter, Arial, sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  --gold: #e8c54f;
  --gold-bright: #ffdf52;
  --ink: #303030;
  --surface: #353535;
  --field: #f3f3f3;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
}

body {
  display: flex;
  justify-content: center;
  background: #242424;
  color: #f7f7f7;
  font-size: 13px;
}

button,
select,
input {
  font: inherit;
}

button {
  color: inherit;
}

.app-frame {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(100%, 430px);
  height: 100vh;
  height: 100dvh;
  min-height: 650px;
  overflow: hidden;
  background: #676767;
  box-shadow: 0 0 35px #111;
}

.site-header {
  position: relative;
  z-index: 2;
  display: flex;
  flex: 0 0 70px;
  align-items: center;
  justify-content: space-between;
  height: 70px;
  padding: 0 22px;
  background: #303030;
}

.brand-logo {
  position: absolute;
  top: 5px;
  left: 50%;
  display: block;
  width: 140px;
  height: 60px;
  object-fit: contain;
  transform: translateX(-50%);
}

.icon-button,
.profile-button {
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.menu-button {
  width: 28px;
  gap: 4px;
  justify-items: start;
}

.menu-button span {
  display: block;
  width: 22px;
  height: 3px;
  border-radius: 4px;
  background: #ddd;
}

.menu-button span:last-child {
  width: 15px;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 18px;
}

.bell-button {
  width: 24px;
  height: 30px;
  color: #f5f5f5;
}

.bell-button svg,
.profile-button svg {
  width: 23px;
  height: 23px;
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.profile-button {
  position: relative;
  width: 24px;
  height: 30px;
  color: #e4e8ed;
}

.profile-button span {
  position: absolute;
  top: 1px;
  right: -4px;
  width: 12px;
  height: 8px;
  border-radius: 5px;
  background: #7acb52;
  border: 1px solid #303030;
}

.page-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 20px 9px 24px;
  scrollbar-width: thin;
  scrollbar-color: #9d9d9d transparent;
}

.balance-card {
  min-height: 106px;
  padding: 13px 22px 12px;
  border: 1px solid var(--gold);
  border-radius: 5px;
  background: #303030;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.25);
}

.balance-top {
  display: flex;
  min-height: 43px;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.balance-top > span {
  padding-top: 5px;
  font-size: 12px;
}

.balance-top strong {
  white-space: nowrap;
  font-size: clamp(26px, 8vw, 33px);
  line-height: 1;
  font-weight: 400;
}

.balance-top small {
  font-size: inherit;
  font-weight: 400;
}

.auto-transfer-row {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
}

.auto-toggle {
  position: relative;
  display: flex;
  width: 65px;
  height: 27px;
  align-items: center;
  justify-content: flex-start;
  padding: 0 12px;
  border: 1px solid var(--gold);
  border-radius: 999px;
  background: #222;
  cursor: pointer;
}

.toggle-state {
  font-size: 11px;
}

.toggle-knob {
  position: absolute;
  top: 2px;
  left: 38px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--gold-bright);
  transition: left 160ms ease;
}

.auto-toggle:not(.is-on) .toggle-knob {
  left: 4px;
}

.auto-toggle:not(.is-on) .toggle-state {
  margin-left: auto;
}

.primary-nav {
  display: flex;
  height: 54px;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  padding: 0 0 0;
}

.primary-link {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  height: 28px;
  padding: 0 5px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  font-size: 12px;
  white-space: nowrap;
  cursor: pointer;
}

.primary-link + .primary-link::before {
  position: absolute;
  top: 6px;
  left: -3px;
  height: 16px;
  border-left: 1px solid rgba(255, 255, 255, 0.7);
  content: "";
}

.primary-link.is-active {
  background: linear-gradient(180deg, #fff5ac, #dcb332);
  color: #111;
}

.primary-link.is-active::before,
.primary-link.is-active + .primary-link::before {
  display: none;
}

.method-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 10px 0 19px;
}

.method-tab {
  display: flex;
  min-width: 0;
  height: 41px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 3px 2px;
  border: 1px solid var(--gold);
  border-radius: 3px;
  background: #393939;
  color: #fff;
  cursor: pointer;
}

.method-tab span {
  font-size: 12px;
  line-height: 15px;
}

.method-tab small {
  font-size: 10px;
  line-height: 12px;
}

.method-tab.is-active {
  background: #303030;
  box-shadow: inset 0 0 0 1px rgba(232, 197, 79, 0.12), 0 2px 4px rgba(0, 0, 0, 0.25);
}

.deposit-panel {
  min-height: 1px;
}

.quick-types {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 15px;
  margin: 0 0 19px;
}

.quick-type {
  display: flex;
  min-width: 0;
  height: 100px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 7px;
  padding: 10px 14px;
  border: 1px solid var(--gold);
  border-radius: 5px;
  background: #3a3a3a;
  text-align: left;
  cursor: pointer;
}

.quick-type svg {
  width: 42px;
  height: 42px;
  fill: none;
  stroke: #e5e5e5;
  stroke-width: 2.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.quick-type span {
  font-size: 12px;
  line-height: 15px;
}

.quick-type.is-active {
  background: #292929;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.28);
}

.quick-type.is-active svg {
  stroke: var(--gold-bright);
}

.quick-type.is-active .fpx-icon text {
  fill: #ffe46a;
}

.quick-type.is-active .internet-icon {
  stroke: var(--gold-bright);
}

.deposit-form,
.crypto-panel {
  padding: 13px 22px 18px;
  border: 1px solid var(--gold);
  border-radius: 5px;
  background: #303030;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
}

.field-label {
  display: block;
  margin: 0 0 5px;
  padding-left: 6px;
  border-left: 2px solid var(--gold-bright);
  font-size: 12px;
  line-height: 14px;
}

.select-wrap {
  position: relative;
  display: flex;
  height: 31px;
  align-items: center;
  margin-bottom: 14px;
  border-radius: 6px;
  background: var(--field);
  color: #353535;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.select-wrap select {
  width: 100%;
  height: 100%;
  appearance: none;
  padding: 0 35px 0 15px;
  border: 0;
  border-radius: inherit;
  outline-color: var(--gold);
  background: transparent;
  color: #343434;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.select-trigger {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0 35px 0 15px;
  border: 0;
  border-radius: inherit;
  background: transparent;
  color: #343434;
  font-size: 12px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.select-wrap::after {
  position: absolute;
  right: 13px;
  top: 50%;
  width: 0;
  height: 0;
  border-top: 8px solid #333;
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
  content: "";
  pointer-events: none;
  transform: translateY(-25%);
}

.select-brand {
  position: absolute;
  z-index: 1;
  left: 14px;
  color: #c9a514;
  font-size: 15px;
  pointer-events: none;
}

.select-wrap:has(.select-brand) select {
  padding-left: 48px;
}

.amount-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 4px;
  margin-bottom: 5px;
}

.amount-heading .field-label {
  flex: 0 0 auto;
  margin: 0;
}

.limit-label {
  color: #f2f2f2;
  font-size: 10px;
  font-weight: 600;
  line-height: 14px;
  white-space: nowrap;
}

.amount-input {
  display: block;
  width: 100%;
  height: 31px;
  padding: 0 15px;
  border: 0;
  border-radius: 6px;
  outline-color: var(--gold);
  background: #f5f5f5;
  color: #333;
  font-size: 12px;
  font-weight: 700;
}

.amount-input::placeholder {
  color: #4a4a4a;
  opacity: 1;
}

.amount-presets {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin: 9px 0 14px;
}

.amount-presets button,
.submit-button,
.dialog-done {
  border: 1px solid #d4ad2b;
  border-radius: 5px;
  background: linear-gradient(180deg, #fff2a6 0%, #e7c643 55%, #c99c20 100%);
  color: #111;
  font-weight: 700;
  cursor: pointer;
}

.amount-presets button.is-selected {
  border-color: #fff1a0;
  box-shadow: 0 0 0 2px rgba(255, 224, 88, 0.28);
}

.amount-presets button {
  height: 26px;
  padding: 0 2px;
  font-size: 12px;
}

.amount-presets button:active,
.submit-button:active,
.dialog-done:active {
  filter: brightness(0.92);
}

.promotion-label {
  margin-bottom: 5px;
}

.promotion-label + .select-wrap {
  margin-bottom: 0;
}

.form-message {
  display: none;
  margin: 8px 0 0;
  color: #ffcb7b;
  font-size: 11px;
  line-height: 1.4;
}

.form-message:not(:empty) {
  display: block;
}

.submit-button {
  width: 100%;
  height: 31px;
  margin-top: 19px;
  font-size: 12px;
}

.crypto-types {
  grid-template-columns: 80px;
}

.bank-form {
  padding: 14px 24px 18px;
}

.bank-select-label {
  margin-bottom: 5px;
}

.bank-select-wrap {
  height: 40px;
  margin-bottom: 8px;
}

.bank-select-wrap select[hidden] {
  display: none;
}

.bank-select-wrap select {
  padding-left: 52px;
  font-size: 13px;
}

.bank-select-brand {
  position: absolute;
  z-index: 1;
  left: 15px;
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  border: 1px solid #d2a500;
  border-radius: 50%;
  background: #ffd400;
  color: #171717;
  font-size: 19px;
  line-height: 1;
  pointer-events: none;
}

.bank-info {
  margin-bottom: 10px;
}

.info-row {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  align-items: center;
  gap: 5px;
  min-height: 44px;
  font-size: 11px;
}

.info-row > strong,
.copy-field {
  min-height: 30px;
  border-radius: 5px;
  background: #f5f5f5;
  color: #333;
}

.info-row > strong {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 4px 8px;
  font-size: 11px;
  text-align: center;
}

.info-row .maybank-wordmark {
  min-width: 140px;
  background: #ffd400;
  color: #111;
  font-size: 18px;
}

.copy-field {
  display: flex;
  min-height: 40px;
  overflow: hidden;
  align-items: stretch;
}

.copy-field strong {
  display: flex;
  min-width: 0;
  flex: 1;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  font-size: 12px;
}

.copy-button {
  display: flex;
  min-width: 76px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 0;
  border-radius: 0 5px 5px 0;
  background: linear-gradient(180deg, #fff2a6 0%, #e7c643 55%, #c99c20 100%);
  color: #222;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.copy-button svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bank-form .amount-heading {
  margin-bottom: 5px;
}

.bank-form .amount-input {
  height: 40px;
  font-size: 13px;
}

.bank-form .amount-presets {
  gap: 8px;
  margin: 5px 0 0;
}

.bank-form .amount-presets button {
  height: 26px;
  border: 0;
}

.bank-limit {
  margin: 2px 0 12px;
  color: #eee;
  font-size: 11px;
  text-align: right;
}

.important-notice {
  margin: 10px 0;
  padding: 12px 14px 10px;
  border: 1px solid rgba(232, 197, 79, 0.25);
  border-radius: 8px;
  background: #202020;
  color: #e2d8b6;
  font-size: 14px;
  line-height: 20px;
}

.important-notice .notice-title {
  margin-bottom: 12px;
  color: var(--gold-bright);
  font-size: 16px;
  line-height: 22px;
}

.important-notice strong {
  display: inline;
  font-size: inherit;
  font-weight: 700;
  text-decoration: none;
}

.important-notice ul {
  margin: 0 0 10px;
  padding-left: 18px;
  list-style: disc outside;
  font-size: 13px;
}

.important-notice .notice-point {
  display: list-item;
  margin: 0;
  padding: 0;
  text-indent: 0;
  text-align: justify;
}

.important-notice .notice-point::marker {
  color: var(--gold);
}

.important-notice .notice-point strong {
  display: block;
  margin-bottom: 3px;
  color: var(--gold-bright);
  font-weight: 600;
  text-align: left;
}

.important-notice .notice-point + .notice-point {
  margin-top: 12px;
}

.important-notice .bullet-point {
  display: none;
}

.important-notice.is-collapsed .notice-title {
  margin-bottom: 2px;
}

.important-notice.is-collapsed ul {
  display: none;
}

.important-notice .notice-more-link {
  text-align: right;
}

.important-notice .notice-more-link a {
  display: inline-block;
  padding: 2px 0;
  color: var(--gold-bright);
  font-size: 12px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.important-notice .notice-more-link a:hover {
  color: #fff1aa;
}

.important-notice .notice-more-link a:focus-visible {
  border-radius: 2px;
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.crypto-panel {
  padding: 13px 10px 18px;
}

.crypto-panel .field-label {
  margin-left: 2px;
}

.crypto-select {
  margin-bottom: 12px;
}

.tether-mark {
  display: grid;
  width: 30px;
  height: 27px;
  flex: 0 0 30px;
  place-items: center;
  margin-left: 4px;
  border-radius: 50%;
  background: #57b79d;
  color: white;
  font-size: 20px;
  font-weight: 700;
}

.convert-label {
  margin-top: 3px;
}

.convert-rate {
  display: flex;
  min-height: 31px;
  align-items: center;
  gap: 6px;
  margin-bottom: 15px;
  padding: 2px 4px;
  border-radius: 5px;
  background: #f3f3f3;
  color: #333;
  font-size: 10px;
  white-space: nowrap;
}

.convert-rate strong {
  font-size: 11px;
}

.convert-rate b {
  color: #f01818;
  font-weight: 500;
}

.crypto-address-card {
  padding: 16px 10px 10px;
  border: 1px solid var(--gold);
  border-radius: 5px;
}

.sample-qr {
  width: 164px;
  height: 164px;
  margin: 0 auto 12px;
  border: 8px solid #fff;
  background-color: white;
  background-image:
    repeating-conic-gradient(#111 0% 25%, #fff 0% 50%);
  background-size: 16px 16px;
  position: relative;
}

.sample-qr::before,
.sample-qr::after {
  position: absolute;
  width: 33px;
  height: 33px;
  border: 6px solid #111;
  background: #fff;
  box-shadow: inset 0 0 0 6px #111, inset 0 0 0 11px #fff;
  content: "";
}

.sample-qr::before {
  top: 0;
  left: 0;
}

.sample-qr::after {
  top: 0;
  right: 0;
  box-shadow: inset 0 0 0 6px #111, inset 0 0 0 11px #fff, -104px 104px 0 -5px #fff, -104px 104px 0 1px #111;
}

.address-label {
  margin-top: 8px;
}

.address-row {
  display: flex;
  height: 31px;
  align-items: stretch;
  overflow: hidden;
  border-radius: 5px;
  background: #f5f5f5;
  color: #444;
}

.crypto-address {
  display: flex;
  min-width: 0;
  flex: 1;
  align-items: center;
  overflow: hidden;
  padding: 0 10px;
  font-size: 10px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.crypto-disclaimer {
  margin: 10px 0 0;
  color: #c7c7c7;
  font-size: 10px;
}

.bottom-nav {
  z-index: 2;
  display: grid;
  flex: 0 0 70px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  height: 70px;
  padding-bottom: env(safe-area-inset-bottom);
  border-top: 1px solid #353535;
  background: #171717;
}

.bottom-nav button,
.bottom-nav a {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 2px 0 0;
  border: 0;
  background: transparent;
  color: #666;
  font-size: 10px;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.bottom-nav svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bottom-nav .is-active {
  color: #d5b22d;
}

.bottom-nav button span,
.bottom-nav a span {
  overflow: hidden;
  max-width: 100%;
  text-overflow: ellipsis;
}

.dialog-backdrop {
  position: absolute;
  z-index: 5;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.7);
}

.result-dialog {
  position: relative;
  width: min(100%, 340px);
  padding: 28px 22px 22px;
  border: 1px solid var(--gold);
  border-radius: 8px;
  background: #303030;
  text-align: center;
}

.dialog-close {
  position: absolute;
  top: 7px;
  right: 10px;
  border: 0;
  background: transparent;
  color: white;
  font-size: 24px;
  cursor: pointer;
}

.dialog-check {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: var(--gold);
  color: #303030;
  font-size: 24px;
  font-weight: 700;
}

.result-dialog h2 {
  margin: 0 0 8px;
  font-size: 18px;
}

.result-summary {
  margin: 0;
  color: #ddd;
  font-size: 13px;
  line-height: 1.5;
}

.demo-warning {
  margin: 14px 0;
  color: #f1cf54;
  font-size: 11px;
}

.dialog-done {
  width: 100%;
  height: 36px;
}

.promotion-backdrop,
.gateway-backdrop {
  position: absolute;
  z-index: 4;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 16px 10px 84px;
  background: rgba(0, 0, 0, 0.62);
}

.promotion-dialog {
  position: relative;
  width: 100%;
  max-height: 100%;
  overflow-y: auto;
  padding: 15px 18px;
  border: 1px solid rgba(232, 197, 79, 0.7);
  border-radius: 7px;
  background: rgba(66, 66, 66, 0.98);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.4);
}

.promotion-dialog h2 {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 600;
}

.promotion-close,
.gateway-close {
  position: absolute;
  z-index: 2;
  top: 8px;
  right: 8px;
  display: grid;
  width: 29px;
  height: 29px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: #555;
  color: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.promotion-options {
  display: grid;
  gap: 15px;
}

.promotion-option {
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--gold);
  border-radius: 7px;
  background: #a39758;
  color: white;
  text-align: left;
  cursor: pointer;
}

.promo-art {
  position: relative;
  display: flex;
  min-height: 124px;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  overflow: hidden;
  padding: 20px 16px 10px;
  background:
    radial-gradient(ellipse at 80% 60%, rgba(69, 157, 215, 0.8), transparent 46%),
    linear-gradient(115deg, #063a69, #087cb0 60%, #1c4161);
  text-shadow: 0 1px 2px #15334a;
}

.promo-art::after {
  position: absolute;
  top: -32px;
  right: -15px;
  width: 145px;
  height: 190px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255, 197, 58, 0.85), rgba(255, 141, 21, 0.35) 35%, transparent 68%);
  content: "";
  transform: rotate(25deg);
}

.promo-art b {
  position: absolute;
  z-index: 1;
  top: 7px;
  left: 0;
  padding: 3px 18px 3px 10px;
  background: #ff761d;
  font-size: 12px;
  font-style: italic;
}

.promo-art strong,
.promo-art span {
  position: relative;
  z-index: 1;
}

.promo-art strong {
  font-size: 15px;
  line-height: 1.05;
}

.promo-art span {
  font-size: 10px;
  font-weight: 600;
  line-height: 1.15;
}

.promo-art em {
  color: #ffd12e;
  font-size: 14px;
  font-style: normal;
  font-weight: 800;
}

.promo-art-blue {
  background:
    radial-gradient(ellipse at 80% 60%, rgba(55, 129, 212, 0.8), transparent 46%),
    linear-gradient(115deg, #16335f, #1867a4 60%, #262e57);
}

.promo-art-gold {
  background:
    radial-gradient(ellipse at 80% 60%, rgba(236, 159, 29, 0.8), transparent 46%),
    linear-gradient(115deg, #5a3413, #a36517 60%, #4a2918);
}

.promo-caption {
  display: block;
  padding: 5px 8px 7px;
  font-size: 11px;
  line-height: 1.3;
}

.gateway-backdrop {
  z-index: 5;
  padding: 78px 10px 70px;
  background: rgba(0, 0, 0, 0.76);
}

.gateway-backdrop.is-tng-wallet {
  inset: 70px 0;
  display: block;
  overflow-y: auto;
  padding: 0;
  background: #fff;
}

.gateway-window {
  position: relative;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  border-radius: 6px;
  background: #fff;
  color: #30364a;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.4);
}

.gateway-backdrop.is-tng-wallet .gateway-window {
  height: 100%;
  min-height: 100%;
  overflow: visible;
  border-radius: 0;
  box-shadow: none;
  color: #343434;
}

.gateway-backdrop.is-tng-wallet .gateway-close {
  display: none;
}

.gateway-backdrop.is-qr-transfer {
  inset: 70px 0;
  display: block;
  padding: 0;
  background: #fff;
}

.gateway-backdrop.is-qr-transfer .gateway-window {
  border-radius: 0;
  box-shadow: none;
  color: #000;
}

.gateway-backdrop.is-qr-transfer .gateway-checkout {
  min-height: 100%;
}

.gateway-backdrop.is-qr-transfer .gateway-close,
.gateway-backdrop.is-qr-transfer .gateway-checkout > :not(.gateway-qr-transfer) {
  display: none;
}

.gateway-qr-transfer {
  display: flex;
  min-height: 100%;
  flex-direction: column;
  align-items: center;
  padding: 66px 6px 24px;
  background: #fff;
  color: #000;
  font-family: Arial, sans-serif;
}

.qr-transfer-panel {
  position: relative;
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
}

.qr-transfer-progress {
  position: relative;
  display: flex;
  width: calc(100% - 24px);
  height: 47px;
  flex-shrink: 0;
  justify-content: space-between;
  margin: 0;
  padding: 0;
  list-style: none;
}

.qr-transfer-progress::before {
  position: absolute;
  top: 10px;
  right: 14px;
  left: 14px;
  height: 9px;
  background: #ccc;
  content: "";
}

.qr-transfer-progress li {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  color: #ccc;
}

.qr-transfer-progress li > span {
  display: grid;
  width: 29px;
  height: 29px;
  place-items: center;
  border: 5px solid currentColor;
  border-radius: 50%;
  background: #fff;
  font-size: 14px;
  font-weight: 700;
}

.qr-transfer-progress li[aria-current],
.qr-transfer-progress .is-complete {
  color: #4264ff;
}

.qr-transfer-progress small {
  font-size: 10px;
  line-height: 11px;
}

.qr-transfer-reference {
  align-self: flex-end;
  margin: 6px 0 14px;
  color: #003d80;
  font-size: 12px;
  line-height: 15px;
  text-align: right;
}

.qr-transfer-reference strong,
.qr-transfer-countdown {
  color: #000;
}

.qr-transfer-brand {
  width: 214px;
  max-width: 100%;
  height: 46px;
  object-fit: contain;
}

.qr-transfer-total {
  margin: 20px 0 0;
  font-size: 16px;
  line-height: 19px;
  text-align: center;
}

.qr-transfer-amount {
  display: block;
  color: #4264ff;
  font-size: 24px;
  line-height: 28px;
}

.qr-transfer-qr {
  position: relative;
  display: block;
  width: 200px;
  height: 200px;
  flex-shrink: 0;
  overflow: hidden;
  margin-top: 4px;
  background: #fff;
}

.qr-transfer-qr-image {
  position: absolute;
  top: -9%;
  left: -9%;
  width: 118%;
  max-width: none;
  height: 118%;
}

.qr-transfer-watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 130%;
  padding: 3px 0;
  background: rgba(255, 255, 255, 0.7);
  color: #111;
  font-size: 11px;
  font-style: italic;
  line-height: 16px;
  text-align: center;
  pointer-events: none;
  transform: translate(-50%, -50%) rotate(45deg);
}

.qr-transfer-support {
  width: 340px;
  max-width: 100%;
  margin-top: 16px;
  padding: 12px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.13);
}

.qr-transfer-support img {
  display: block;
  width: 193px;
  max-width: 100%;
  height: 68px;
  margin: 0 auto;
  object-fit: contain;
}

.qr-transfer-support p {
  margin: 10px 0 0;
  font-size: 11px;
  line-height: 12px;
}

.qr-transfer-guide {
  width: 100%;
  margin-top: 16px;
  padding: 8px;
  border: 1px solid #bfbfbf;
  border-radius: 10px;
  color: #ff2173;
  font-size: 12px;
  line-height: 14px;
}

.qr-transfer-guide p {
  margin: 0;
}

.qr-transfer-guide ol {
  margin: 0;
  padding-left: 14px;
}

.qr-transfer-guide .qr-transfer-warning {
  margin-top: 4px;
  color: #000;
  font-size: 14px;
  line-height: 16px;
}

.qr-transfer-warning strong {
  color: red;
}

.qr-transfer-guide .qr-transfer-demo-note {
  margin-top: 8px;
  color: #777;
  font-size: 11px;
  line-height: 14px;
}

.is-tng-qr .qr-duit-progress,
.is-duitnow-qr .qr-tng-progress,
.is-tng-qr .qr-transfer-brand,
.is-tng-qr .qr-transfer-support,
.is-duitnow-qr .qr-transfer-lock {
  display: none;
}

.gateway-qr-transfer.is-tng-qr {
  padding: 110px 3px 24px;
}

.is-tng-qr .qr-transfer-panel {
  padding: 10px 20px 36px;
  border: 1px solid #aaa;
  border-bottom: 2px solid #4264ff;
}

.is-tng-qr .qr-transfer-progress {
  width: 100%;
}

.qr-tng-progress::after {
  position: absolute;
  top: 10px;
  right: 50%;
  left: 14px;
  height: 9px;
  background: #4264ff;
  content: "";
}

.qr-tng-progress small {
  font-size: 8px;
}

.qr-tng-progress .is-complete > span {
  border-color: #4264ff;
  background: #4264ff;
  color: #fff;
}

.is-tng-qr .qr-transfer-reference {
  position: absolute;
  top: 58px;
  right: 18px;
  margin: 0;
}

.qr-transfer-lock {
  position: absolute;
  top: 64px;
  left: 24px;
  width: 32px;
  height: 40px;
  fill: none;
  stroke: #aab9c7;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
}

.qr-transfer-lock path:last-child {
  stroke: #4264ff;
}

.is-tng-qr .qr-transfer-total {
  margin-top: 82px;
  font-weight: 700;
}

.is-tng-qr .qr-transfer-amount {
  font-size: 28px;
  line-height: 34px;
}

.is-tng-qr .qr-transfer-qr {
  width: 170px;
  height: 170px;
  margin-top: 30px;
}

.is-tng-qr .qr-transfer-watermark {
  color: #ff2c46;
  font-weight: 700;
}

.is-tng-qr .qr-transfer-guide {
  margin-top: 18px;
  padding: 0;
  border: 0;
}

.gateway-backdrop.is-boost-wallet {
  inset: 70px 0;
  display: block;
  padding: 0;
  background: #fff;
}

.gateway-backdrop.is-boost-wallet .gateway-window {
  border-radius: 0;
  box-shadow: none;
  color: #000;
}

.gateway-backdrop.is-boost-wallet .gateway-checkout {
  min-height: 100%;
}

.gateway-backdrop.is-boost-wallet .gateway-close,
.gateway-backdrop.is-boost-wallet .gateway-checkout > :not(.gateway-boost-wallet) {
  display: none;
}

.gateway-boost-wallet {
  display: flex;
  min-height: 100%;
  flex-direction: column;
  align-items: center;
  padding: 106px 35px 24px;
  background: #fff;
  color: #000;
  font-family: Arial, sans-serif;
}

.boost-qr {
  position: relative;
  display: block;
  width: 334px;
  max-width: 100%;
  flex-shrink: 0;
  aspect-ratio: 1;
  padding: 3px;
  border: 1px solid #e3e3e3;
  background: #fff;
}

.boost-qr-image {
  display: block;
  width: 100%;
  height: 100%;
}

.boost-qr-mark {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 62px;
  height: 62px;
  border: 2px solid #fff;
  border-radius: 12px;
  background: #f00035;
  object-fit: contain;
  transform: translate(-50%, -50%);
}

.boost-instructions {
  width: 100%;
  font-size: 20px;
  line-height: 30px;
}

.boost-instructions h3 {
  margin: 4px 0 14px;
  font-size: 24px;
  line-height: 29px;
}

.boost-instructions ol {
  margin: 0;
  padding-left: 23px;
}

.boost-instructions li {
  margin-bottom: 12px;
}

.boost-instructions p {
  margin: 0;
}

.boost-sign-in {
  color: #f00035;
  font-weight: 700;
  text-decoration: none;
}

.boost-instructions .boost-demo-note {
  margin-top: 16px;
  color: #777;
  font-size: 11px;
  line-height: 16px;
}

@media (max-height: 800px) {
  .gateway-boost-wallet {
    padding-top: 40px;
  }
}

.gateway-backdrop.is-duitnow-wallet {
  z-index: 10;
  inset: 0;
  display: block;
  padding: 0;
  background: #fff;
}

.gateway-backdrop.is-duitnow-wallet .gateway-window {
  border-radius: 0;
  box-shadow: none;
  color: #000;
}

.gateway-backdrop.is-duitnow-wallet .gateway-checkout {
  min-height: 100%;
}

.gateway-backdrop.is-duitnow-wallet .gateway-close,
.gateway-backdrop.is-duitnow-wallet .gateway-checkout > :not(.gateway-duitnow-wallet) {
  display: none;
}

.gateway-duitnow-wallet {
  display: flex;
  min-height: 100%;
  flex-direction: column;
  align-items: center;
  padding: 10px 18px 4px;
  background: #fff;
  color: #000;
  font-family: Arial, sans-serif;
}

.duitnow-progress {
  position: relative;
  display: flex;
  width: calc(100% - 44px);
  height: 52px;
  flex-shrink: 0;
  justify-content: space-between;
  margin: 0;
  padding: 0;
  list-style: none;
}

.duitnow-progress::before {
  position: absolute;
  top: 10px;
  right: 14px;
  left: 14px;
  height: 10px;
  background: #ccc;
  content: "";
}

.duitnow-progress li {
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: #ccc;
}

.duitnow-progress li > span {
  display: grid;
  width: 29px;
  height: 29px;
  place-items: center;
  border: 5px solid currentColor;
  border-radius: 50%;
  background: #fff;
  font-size: 14px;
  font-weight: 700;
}

.duitnow-progress li[aria-current] {
  color: #4264ff;
}

.duitnow-progress small {
  font-size: 10px;
}

.duitnow-reference {
  align-self: flex-end;
  margin: 82px 0 10px;
  color: #003d80;
  font-size: 12px;
  line-height: 15px;
  text-align: right;
}

.duitnow-reference strong,
.duitnow-countdown {
  color: #000;
}

.duitnow-branding {
  position: relative;
  width: 100%;
}

.duitnow-fpx-logo {
  display: block;
  width: 328px;
  max-width: 100%;
  height: 48px;
  margin: 10px auto 0;
  object-fit: contain;
}

.duitnow-name-logo {
  display: block;
  width: 184px;
  max-width: 100%;
  height: 40px;
  margin: 12px auto 0;
  object-fit: contain;
}

.duitnow-lock {
  position: absolute;
  top: 70px;
  left: 8px;
  width: 32px;
  height: 40px;
  fill: none;
  stroke: #aab9c7;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
}

.duitnow-lock path:last-child {
  stroke: #4264ff;
}

.duitnow-total {
  margin: 10px 0 0;
  font-size: 16px;
  line-height: 19px;
  text-align: center;
}

.duitnow-amount {
  display: block;
  color: #4264ff;
  font-size: 24px;
  line-height: 28px;
}

.duitnow-qr,
.duitnow-qr img {
  display: block;
  width: 212px;
  max-width: 100%;
  height: 212px;
  flex-shrink: 0;
}

.duitnow-trust {
  display: block;
  width: 217px;
  max-width: 100%;
  height: 120px;
  margin-top: 10px;
  object-fit: contain;
}

.duitnow-notes {
  align-self: stretch;
  margin: 12px 8px 0;
  font-size: 11px;
  line-height: 12px;
}

.duitnow-powered {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-top: 28px;
  font-size: 11px;
  line-height: 14px;
}

.duitnow-provider-logo {
  width: 107px;
  height: 37px;
  object-fit: contain;
}

.duitnow-wallets {
  width: 290px;
  max-width: 100%;
  height: 51px;
  margin: 40px auto 4px;
  object-fit: contain;
}

.gateway-backdrop.is-grab-wallet {
  z-index: 10;
  inset: 0;
  display: block;
  padding: 0;
  background: #fff;
}

.gateway-backdrop.is-grab-wallet .gateway-window {
  border: 1px solid #ddd;
  border-radius: 6px;
  box-shadow: none;
  color: #111;
}

.gateway-backdrop.is-grab-wallet .gateway-checkout {
  height: 100%;
}

.gateway-backdrop.is-grab-wallet .gateway-close,
.gateway-backdrop.is-grab-wallet .gateway-checkout > :not(.gateway-grab-wallet) {
  display: none;
}

.gateway-grab-wallet {
  display: flex;
  min-height: 100%;
  flex-direction: column;
  background: #fff;
}

.grab-header {
  display: flex;
  min-height: 74px;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  border-bottom: 1px solid #e5e5e5;
}

.grab-header > img {
  width: 64px;
  height: 27px;
  object-fit: contain;
}

.grab-language {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

.grab-language svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}

.grab-content {
  padding: 34px 36px 0;
}

.grab-content h2 {
  margin: 0 0 28px;
  font-size: 24px;
  font-weight: 600;
  line-height: 29px;
}

.grab-phone-row {
  display: flex;
  gap: 8px;
}

.grab-country,
#grab-phone {
  height: 48px;
  border: 1px solid #c4c4c4;
  border-radius: 13px;
  background: #fff;
  color: #111;
  font-size: 14px;
  outline-color: #00b14f;
}

.grab-country {
  width: 74px;
  flex: 0 0 74px;
  padding-left: 12px;
}

#grab-phone {
  min-width: 0;
  width: 100%;
  padding: 0 13px;
}

#grab-phone::placeholder {
  color: #bcbcbc;
}

.grab-remember {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 16px;
  font-size: 14px;
  line-height: 20px;
  cursor: pointer;
}

.grab-remember input {
  position: relative;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  margin: 0;
  appearance: none;
  border: 1px solid #aaa;
  border-radius: 50%;
}

.grab-remember input:checked {
  border-color: #00b14f;
  background: #00b14f;
}

.grab-remember input:checked::after {
  position: absolute;
  top: 3px;
  left: 6px;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  content: "";
  transform: rotate(45deg);
}

.grab-continue {
  width: 100%;
  height: 48px;
  margin-top: 30px;
  border: 1px solid #e5e5e5;
  border-radius: 28px;
  background: #f5f5f5;
  color: #bcbcbc;
  font-size: 16px;
  font-weight: 600;
}

.grab-continue:enabled {
  border-color: #00b14f;
  background: #00b14f;
  color: #fff;
  cursor: pointer;
}

.grab-continue:enabled:hover {
  background: #009b45;
}

.grab-divider {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 48px 4px 26px;
  color: #ddd;
  font-size: 13px;
  line-height: 17px;
}

.grab-divider::before,
.grab-divider::after {
  height: 1px;
  flex: 1;
  background: #e5e5e5;
  content: "";
}

.grab-social-options {
  display: grid;
  gap: 16px;
}

.grab-social-options button {
  position: relative;
  width: 100%;
  min-height: 48px;
  padding: 8px 12px 8px 50px;
  border: 1px solid #00a69d;
  border-radius: 28px;
  background: #fff;
  color: #111;
  font-size: 16px;
  opacity: 1;
  cursor: not-allowed;
}

.grab-social-options img {
  position: absolute;
  top: 50%;
  left: 20px;
  width: 30px;
  height: 32px;
  object-fit: contain;
  transform: translateY(-50%);
}

.grab-footer {
  margin-top: auto;
  padding: 64px 24px 30px;
  font-size: 14px;
  line-height: 20px;
}

.grab-footer .grab-demo-note {
  margin: 0 0 32px;
  color: #526477;
  font-size: 11px;
  line-height: 16px;
  text-align: center;
}

.grab-footer p {
  margin: 0;
}

.grab-footer a {
  color: #1687ff;
  text-decoration: none;
}

.grab-footer a + a {
  margin-left: 16px;
}

.grab-footer .grab-support {
  margin-top: 18px;
  color: #888;
}

@media (max-width: 360px) {
  .grab-content {
    padding-right: 24px;
    padding-left: 24px;
  }

  .grab-social-options button {
    font-size: 14px;
  }
}

.gateway-backdrop.is-shopee-wallet {
  inset: 70px 0;
  display: block;
  overflow-y: auto;
  padding: 0;
  background: #fff;
}

.gateway-backdrop.is-shopee-wallet .gateway-window {
  min-height: 100%;
  border-radius: 0;
  box-shadow: none;
  color: #000;
}

.gateway-backdrop.is-shopee-wallet .gateway-checkout {
  height: 100%;
}

.gateway-backdrop.is-shopee-wallet .gateway-close,
.gateway-backdrop.is-shopee-wallet .gateway-checkout > :not(.gateway-shopee-wallet) {
  display: none;
}

.gateway-shopee-wallet {
  display: flex;
  min-height: 100%;
  flex-direction: column;
  align-items: center;
  padding: 108px 28px 16px;
  background: #fff;
  text-align: center;
}

.gateway-shopee-wallet h2 {
  margin: 0;
  color: #ff4c2f;
  font-size: 36px;
  font-weight: 500;
  letter-spacing: -1.5px;
  line-height: 43px;
}

.gateway-shopee-instructions {
  max-width: 370px;
  margin: 36px 0 0;
  font-size: 15px;
  line-height: 24px;
}

.gateway-shopee-qr {
  display: block;
  width: 250px;
  max-width: 100%;
  height: 250px;
  flex-shrink: 0;
  margin-top: 24px;
}

.gateway-shopee-qr img {
  display: block;
  width: 100%;
  height: 100%;
}

.gateway-shopee-countdown {
  margin: 28px 0 0;
  color: #666;
  font-size: 13px;
  font-weight: 600;
  line-height: 24px;
}

.gateway-shopee-time {
  color: #00ce49;
  font-size: 17px;
}

.gateway-shopee-cancel {
  width: 300px;
  max-width: 100%;
  min-height: 42px;
  flex-shrink: 0;
  margin-top: 24px;
  padding: 8px 12px;
  border: 2px solid #ff292f;
  border-radius: 8px;
  background: #fff;
  color: #ff292f;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.gateway-shopee-demo {
  margin: 12px 0 0;
  color: #767676;
  font-size: 11px;
  line-height: 14px;
}

@media (max-height: 800px) {
  .gateway-shopee-wallet {
    padding-top: 36px;
  }

  .gateway-shopee-instructions {
    margin-top: 24px;
  }

  .gateway-shopee-qr {
    width: 226px;
    height: 226px;
    margin-top: 16px;
  }

  .gateway-shopee-countdown {
    margin-top: 18px;
  }

  .gateway-shopee-cancel {
    margin-top: 20px;
  }
}

.gateway-tng-wallet {
  position: relative;
  min-height: 100%;
  padding: 56px 19px 24px;
  background: #fff;
  color: #303030;
}

.gateway-tng-logo {
  position: relative;
  z-index: 1;
  display: flex;
  width: 90px;
  height: 90px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 auto -47px;
  border: 2px solid #e5edf6;
  border-radius: 18px;
  background: #0863c6;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
  color: #fff;
  font-size: 18px;
  font-style: italic;
  font-weight: 800;
  line-height: .8;
  text-align: center;
  transform: translateY(0);
}

.gateway-tng-logo span:nth-child(2) {
  font-size: 20px;
}

.gateway-tng-logo strong {
  margin-top: 5px;
  color: #ffdf28;
  font-size: 15px;
  font-style: italic;
}

.gateway-tng-summary {
  overflow: hidden;
  padding: 74px 22px 19px;
  border: 1px solid #e1e5ea;
  border-radius: 11px;
  background: #f8f9fc;
}

.gateway-tng-merchant,
.gateway-tng-total {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  font-size: 16px;
}

.gateway-tng-merchant {
  min-height: 110px;
  align-items: flex-start;
  padding: 0 0 22px;
}

.gateway-tng-merchant > span,
.gateway-tng-total > span {
  color: #888;
}

.gateway-tng-merchant strong {
  color: #171717;
  font-size: 19px;
  line-height: 1.55;
  text-align: right;
}

.gateway-tng-total {
  align-items: center;
  min-height: 65px;
  padding-top: 13px;
  border-top: 1px solid #dfe2e6;
}

.gateway-tng-total strong {
  color: #171717;
  font-size: 20px;
  white-space: nowrap;
}

.gateway-tng-prompt {
  margin: 83px 0 34px;
  color: #858585;
  font-size: 17px;
  text-align: center;
}

.gateway-tng-open,
.gateway-tng-browser {
  display: flex;
  width: 100%;
  min-height: 81px;
  align-items: center;
  gap: 18px;
  padding: 0 39px;
  border: 2px solid #0871f9;
  border-radius: 42px;
  background: #0863c6;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.gateway-tng-open svg,
.gateway-tng-browser svg {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.gateway-tng-chevron {
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
  margin-left: auto;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
}

.gateway-tng-browser {
  min-height: 101px;
  margin-top: 31px;
  border-color: #1680ff;
  background: #fff;
  color: #0863e8;
}

.gateway-tng-demo-note {
  margin: 18px 0 0;
  color: #777;
  font-size: 10px;
  text-align: center;
}

.gateway-backdrop.is-tng-wallet .gateway-checkout {
  height: 100%;
}

.gateway-backdrop.is-tng-wallet .gateway-checkout > :not(.gateway-tng-wallet) {
  display: none;
}

.gateway-backdrop.is-tng-wallet .gateway-failed {
  min-height: 100%;
}

.gateway-window > .gateway-close {
  top: 8px;
  right: 8px;
  background: #686868;
}

.gateway-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 68px 0;
}

.gateway-progress span,
.gateway-progress i {
  position: relative;
  display: block;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border: 5px solid #aaa;
  border-radius: 50%;
  background: #aaa;
}

.gateway-progress span {
  border-color: #376cf5;
  background: #fff;
  box-shadow: inset 0 0 0 4px #376cf5;
}

.gateway-progress i {
  margin-left: 36px;
}

.gateway-progress i::before {
  position: absolute;
  top: 8px;
  right: 25px;
  width: 36px;
  border-top: 4px solid #aaa;
  content: "";
}

.gateway-reference {
  display: flex;
  justify-content: space-between;
  margin-top: 7px;
  padding: 0 10px 13px;
  background: #f7f7f7;
  color: #535c7b;
  font-size: 11px;
  line-height: 1.4;
}

.gateway-reference span:last-child {
  text-align: right;
}

.gateway-content {
  width: min(100% - 36px, 280px);
  margin: 35px auto 20px;
  color: #555;
  text-align: center;
}

.gateway-bank-name {
  display: grid;
  min-height: 44px;
  place-items: center;
  margin-bottom: 24px;
  background: #ffd400;
  color: #121212;
  font-size: 21px;
  font-weight: 800;
}

.gateway-content h2 {
  margin: 0 0 8px;
  color: #444;
  font-size: 17px;
}

.gateway-content p {
  font-size: 12px;
}

.gateway-content input {
  display: block;
  width: 100%;
  height: 42px;
  margin: 12px 0;
  padding: 0 14px;
  border: 1px solid #e2e2e2;
  border-radius: 11px;
  background: #f5f5f5;
}

.gateway-content input:disabled {
  color: #777;
  opacity: 1;
}

.gateway-submit,
.gateway-return {
  width: 100%;
  height: 43px;
  margin-top: 4px;
  border: 0;
  border-radius: 10px;
  background: #376bf1;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}

.gateway-secure {
  margin-top: 24px;
  color: #687185;
  font-size: 9px !important;
  text-transform: uppercase;
}

.gateway-note {
  margin-top: 28px;
  color: #6c6c6c;
  font-size: 10px !important;
  line-height: 1.4;
  text-align: left;
}

.gateway-failed {
  position: relative;
  display: flex;
  min-height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px 22px;
  color: #090909;
  text-align: center;
}

.history-content {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 65px 9px 20px;
  background: #676767;
  scrollbar-width: none;
}

.history-content::-webkit-scrollbar {
  display: none;
}

.history-content .deposit-close {
  top: 19px;
}

.history-filter {
  display: flex;
  flex-direction: column;
  gap: 21px;
  padding: 16px 22px 22px;
  border: 1px solid var(--gold);
  border-radius: 5px;
  background: #303030;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.25);
}

.history-field {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 5px;
}

.history-label {
  display: block;
  padding-left: 6px;
  color: #f4f4f4;
  font-size: 12px;
  font-weight: 400;
  line-height: 14px;
}

.history-label::before {
  margin-right: 4px;
  color: #f0d64f;
  content: "|";
}

.history-select-wrap {
  position: relative;
  display: block;
  min-width: 0;
  height: 30px;
  overflow: hidden;
  border-radius: 6px;
  background: #f3f3f3;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.history-select-wrap::after {
  position: absolute;
  top: 50%;
  right: 13px;
  width: 0;
  height: 0;
  border-top: 8px solid #333;
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
  content: "";
  pointer-events: none;
  transform: translateY(-25%);
}

.history-select-wrap select {
  width: 100%;
  height: 100%;
  appearance: none;
  padding: 0 35px 0 15px;
  border: 0;
  background: transparent;
  color: #343434;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.history-date-range {
  display: grid;
  min-width: 0;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  margin: 0;
  padding: 0;
  border: 0;
}

.history-date-range legend {
  grid-column: 1 / -1;
  margin-bottom: 0;
  padding: 0;
}

.history-date-range label {
  display: block;
  min-width: 0;
}

.history-search {
  height: 30px;
  border: 0;
  border-radius: 5px;
  background: linear-gradient(180deg, #fff1a2 0%, #e6c443 62%, #cba11e 100%);
  color: #111;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.history-demo-note,
.history-error {
  margin: 15px 0 0;
  font-size: 12px;
  line-height: 1.5;
}

.history-error {
  color: #ffb8b8;
}

.history-table-wrap {
  min-width: 0;
  margin-top: 19px;
}

.history-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border-radius: 5px;
  background: #9b0010;
  color: #fff;
  table-layout: fixed;
}

.history-table th {
  height: 40px;
  padding: 0 4px;
  font-size: 10px;
  font-weight: 500;
  overflow-wrap: anywhere;
}

.history-table th:first-child {
  width: 17%;
}

.history-table th:nth-child(2) {
  width: 30%;
}

.history-table th:nth-child(3) {
  width: 15%;
}

.history-table th:nth-child(4) {
  width: 21%;
}

.history-table th:last-child {
  width: 17%;
}

.history-table td {
  padding: 12px 4px;
  border-top: 1px solid #777;
  background: #303030;
  font-size: 11px;
  line-height: 1.5;
  overflow-wrap: anywhere;
  vertical-align: top;
}

.history-table td small {
  display: block;
  margin-top: 4px;
  color: #ddd;
  font-size: 10px;
}

.history-reference {
  max-width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: #ffe379;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.history-copy-feedback {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.5;
}

.history-copy-feedback:empty {
  display: none;
}

.history-status {
  display: inline-block;
  max-width: 100%;
  padding: 3px 2px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
}

.history-status.is-pending {
  background: #655315;
  color: #ffe379;
}

.history-status.is-done {
  background: #175c3d;
  color: #8dffc2;
}

.history-status.is-rejected,
.history-status.is-failed {
  background: #792b32;
  color: #ffb8bf;
}

.history-table th + th {
  border-left: 1px solid rgba(255, 255, 255, 0.8);
}

.history-empty {
  margin: 15px 0;
  color: #f5f5f5;
  font-size: 12px;
  text-align: center;
}

.history-empty[hidden] {
  display: none;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  clip-path: inset(50%);
}

.gateway-failed h2 {
  font-size: 16px;
}

.gateway-failed p {
  color: #555;
  font-size: 12px;
}

.gateway-return {
  width: min(100%, 260px);
  margin-top: 20px;
}

.is-hidden {
  display: none !important;
}

@media (max-width: 360px) {
  .site-header {
    padding: 0 14px;
  }

  .brand-logo {
    width: 122px;
  }

  .header-actions {
    gap: 11px;
  }

  .quick-types {
    gap: 8px;
  }

  .quick-type {
    padding: 9px;
  }

  .deposit-form {
    padding-right: 14px;
    padding-left: 14px;
  }

  .amount-presets {
    gap: 4px;
  }

  .limit-label {
    font-size: 9px;
  }

  .bottom-nav button {
    font-size: 8px;
  }

  .bottom-icon {
    width: 20px;
    height: 20px;
  }
}

.crypto-panel {
  margin-top: 0;
  padding: 16px 22px 18px;
}

.crypto-panel .field-label {
  margin-bottom: 5px;
}

.crypto-panel .crypto-select {
  height: 40px;
  margin-bottom: 14px;
}

.crypto-panel .tether-mark {
  width: 25px;
  height: 25px;
  flex-basis: 25px;
  margin-left: 12px;
  background: #29a786;
  font-size: 18px;
}

.crypto-panel .crypto-select select {
  padding-left: 50px;
}

.crypto-address-card {
  margin-top: 0;
  padding: 12px 10px 10px;
}

.crypto-address-details {
  display: grid;
  min-height: 100px;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 12px;
  padding: 0 8px 9px;
}

.crypto-panel .sample-qr {
  position: relative;
  display: block;
  width: 100px;
  height: 100px;
  margin: 0;
  border: 4px solid #fff;
  background: #fff;
}

.crypto-panel .sample-qr::before,
.crypto-panel .sample-qr::after {
  width: 28px;
  height: 28px;
  border-width: 5px;
  box-shadow: inset 0 0 0 5px #111, inset 0 0 0 9px #fff;
}

.crypto-panel .sample-qr::after {
  box-shadow: inset 0 0 0 5px #111, inset 0 0 0 9px #fff, -60px 60px 0 -4px #fff, -60px 60px 0 1px #111;
}

.crypto-address-info {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}

.crypto-address-info > strong {
  font-size: 12px;
}

.crypto-address-info .crypto-address {
  display: block;
  width: 100%;
  padding: 0;
  color: #f5f5f5;
  font-size: 10px;
  line-height: 1.35;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
}

.crypto-address-info .copy-button {
  display: flex;
  width: min(100%, 130px);
  min-height: 31px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid #d4ad2b;
  border-radius: 5px;
  background: linear-gradient(180deg, #fff2a6 0%, #e7c643 55%, #c99c20 100%);
  color: #151515;
  font-size: 11px;
  font-weight: 700;
}

.crypto-address-info .copy-button svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.crypto-panel .convert-rate {
  min-height: 40px;
  justify-content: center;
  gap: 8px;
  margin: 0;
  border-radius: 5px;
  font-size: 12px;
}

.rate-icon {
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  border-radius: 50%;
  background: #ead5ae;
  color: #72522e;
  font-size: 16px;
  font-weight: 700;
}

.crypto-panel .convert-rate b {
  color: #f01818;
  font-size: 13px;
  font-weight: 700;
}

.crypto-panel .crypto-disclaimer {
  margin: 8px 0 0;
  color: #ccc;
  font-size: 9px;
  text-align: center;
}

.crypto-help-backdrop {
  position: absolute;
  z-index: 7;
  inset: 70px 0 70px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.42);
  opacity: 0;
  transition: opacity 220ms ease;
}

.crypto-help-backdrop.is-open {
  opacity: 1;
}

.crypto-help-dialog {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: min(550px, 100%);
  overflow-y: auto;
  padding: 32px 33px 16px;
  border-radius: 10px 10px 0 0;
  outline: none;
  background: #e9e9e9;
  color: #333;
  transform: translateY(102%);
  transition: transform 280ms cubic-bezier(0.2, 0.75, 0.25, 1);
  scrollbar-width: none;
}

.crypto-help-backdrop.is-open .crypto-help-dialog {
  transform: translateY(0);
}

.crypto-help-dialog::-webkit-scrollbar {
  display: none;
}

.crypto-help-handle {
  display: block;
  width: 80px;
  height: 10px;
  margin: 0 auto 31px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: #333;
  cursor: pointer;
}

.crypto-help-dialog h2 {
  margin: 0 0 2px;
  font-size: 22px;
  font-weight: 700;
}

.crypto-help-description {
  margin: 0 0 14px;
  font-size: 14px;
}

.crypto-help-step {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding: 19px 0;
  border-bottom: 1px solid #111;
}

.crypto-help-icon {
  display: grid;
  width: 50px;
  height: 50px;
  place-items: center;
  border: 1px solid #666;
  border-radius: 5px;
  color: #333;
}

.crypto-help-icon svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.crypto-help-step h3 {
  margin: 0 0 3px;
  font-size: 16px;
  font-weight: 700;
}

.crypto-help-step p,
.crypto-help-step ul {
  margin: 0;
  font-size: 12px;
  line-height: 1.25;
}

.crypto-help-step ul {
  padding-left: 17px;
}

.crypto-help-step li + li {
  margin-top: 2px;
}

.crypto-help-important {
  align-items: start;
  border-bottom: 0;
}

.crypto-help-important .crypto-help-icon {
  margin-top: 1px;
}

.crypto-help-important .crypto-help-icon svg {
  fill: currentColor;
  stroke: #e9e9e9;
}

@media (max-height: 700px) {
  .crypto-help-dialog {
    height: min(520px, 100%);
    padding-top: 20px;
  }

  .crypto-help-handle {
    margin-bottom: 20px;
  }

  .crypto-help-step {
    padding: 12px 0;
  }
}

@media (max-width: 360px) {
  .crypto-panel {
    padding-right: 14px;
    padding-left: 14px;
  }

  .crypto-address-details {
    grid-template-columns: 90px minmax(0, 1fr);
    gap: 8px;
    padding-right: 2px;
    padding-left: 2px;
  }

  .crypto-panel .sample-qr {
    width: 90px;
    height: 90px;
  }

  .crypto-help-dialog {
    padding-right: 24px;
    padding-left: 24px;
  }

  .crypto-help-step {
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 12px;
  }
}

.deposit-title {
  position: absolute;
  left: 50%;
  margin: 0;
  color: #f4f4f4;
  font-size: 23px;
  font-weight: 500;
  white-space: nowrap;
  transform: translateX(-50%);
}

.page-content {
  position: relative;
  padding: 0 9px 20px;
  scrollbar-width: none;
}

.page-content::-webkit-scrollbar {
  display: none;
}

.deposit-close {
  position: absolute;
  z-index: 1;
  top: 19px;
  right: 9px;
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  border-radius: 50%;
  background: #303030;
  color: #f5f5f5;
}

.deposit-close svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
}

.method-tabs {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 65px 0 19px;
}

.method-tab {
  height: 60px;
  gap: 2px;
  border-radius: 5px 5px 0 0;
  background: transparent;
  font-weight: 600;
}

.method-tab.is-active {
  background: #333;
  font-weight: 400;
}

.method-tab span {
  font-size: 12px;
  line-height: 15px;
}

.method-tab .method-symbol {
  display: block;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  color: #fff;
  font-size: 0;
  line-height: 0;
}

.method-tab .method-symbol svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.method-tab.is-active .method-symbol {
  color: #ffe46a;
}

.quick-types {
  gap: 15px;
  margin: 0 0 19px;
}

.quick-type {
  display: grid;
  height: 100px;
  grid-template-rows: 38px 30px;
  align-content: center;
  align-items: center;
  justify-items: center;
  gap: 7px;
  padding: 8px 4px;
  text-align: center;
}

.maintenance-status {
  margin: -7px 0 14px;
  color: #bfc0c5;
  font-size: 12px;
  line-height: 1.5;
}

.quick-type svg {
  width: 38px;
  height: 38px;
}

.quick-type .fpx-icon {
  width: 46px;
  height: 38px;
  fill: none;
  stroke: #f5f5f5;
  stroke-width: 1.5;
}

.quick-type .fpx-icon text {
  font-family: Inter, Arial, sans-serif;
  fill: #f5f5f5;
  stroke: none;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.5px;
}

.quick-type .wallet-icon {
  stroke: #f5f5f5;
  stroke-width: 1.7;
}

.quick-type .wallet-icon path:first-child {
  fill: #f5f5f5;
}

.quick-type.is-active .wallet-icon {
  stroke: var(--gold-bright);
}

.quick-type.is-active .wallet-icon path:first-child {
  fill: #d9b72e;
}

.quick-type .qr-icon {
  fill: none;
  stroke: #f5f5f5;
  stroke-width: 1.8;
  stroke-linejoin: miter;
}

.quick-type .qr-icon path:not(:first-child) {
  fill: #f5f5f5;
  stroke: none;
}

.quick-type .internet-icon {
  stroke: #f5f5f5;
  stroke-width: 2;
}

.quick-type.is-active {
  background: #303030;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.28);
}

.quick-type.is-under-maintenance,
.quick-type.is-active.is-under-maintenance {
  grid-template-rows: 26px 30px 20px;
  gap: 2px;
  padding: 4px 2px;
  border-color: #64666b;
  background: #34363b;
  box-shadow: none;
  color: #bfc0c5;
  cursor: not-allowed;
}

.quick-type.is-under-maintenance svg {
  width: 26px;
  height: 26px;
  filter: grayscale(1);
  opacity: 0.65;
}

.quick-type.is-under-maintenance > span {
  color: inherit;
}

.quick-type-maintenance {
  max-width: 100%;
  color: #c9cace;
  font-size: 10px;
  line-height: 10px;
  text-align: center;
}

.deposit-next:disabled {
  border-color: #64666b;
  background: #4a4c52;
  box-shadow: none;
  color: #c9cace;
  cursor: not-allowed;
}

.quick-form {
  padding: 16px 22px 18px;
}

.quick-form .field-label {
  margin-bottom: 5px;
}

.quick-form .select-wrap {
  height: 40px;
  margin-bottom: 14px;
}

.quick-form .select-wrap select {
  padding-left: 53px;
  font-size: 13px;
}

.bank-picker-trigger {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  gap: 10px;
  padding: 0 38px 0 12px;
  border: 0;
  border-radius: inherit;
  background: transparent;
  color: #343434;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.bank-picker-trigger[hidden] {
  display: none;
}

.bank-picker-brand {
  display: grid;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  place-items: center;
  padding: 3px;
}

.bank-picker-brand img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.bank-picker-name,
.transfer-bank-name,
.network-picker-name {
  min-width: 0;
  line-height: 18px;
}

.bank-picker-backdrop {
  position: absolute;
  z-index: 8;
  inset: 70px 0 70px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.52);
  opacity: 0;
  transition: opacity 280ms ease;
}

.bank-picker-backdrop.is-open {
  opacity: 1;
}

.bank-picker {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  height: min(558px, 100%);
  flex-direction: column;
  padding: 18px 11px 14px;
  border-radius: 10px 10px 0 0;
  background: #e9e9e9;
  color: #333;
  transform: translateY(102%);
  transition: transform 280ms cubic-bezier(0.2, 0.75, 0.25, 1);
}

.bank-picker-backdrop.is-open .bank-picker {
  transform: translateY(0);
}

.bank-picker-handle {
  width: 80px;
  height: 10px;
  flex: 0 0 10px;
  align-self: center;
  margin: 0 0 20px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: #333;
  cursor: pointer;
}

.bank-picker h2 {
  margin: 0 0 20px;
  font-size: 20px;
  font-weight: 700;
}

.bank-picker-options {
  display: grid;
  min-height: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-content: start;
  gap: 10px 24px;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  touch-action: pan-y;
  padding: 0 0 12px;
  scrollbar-width: none;
}

.bank-picker-options::-webkit-scrollbar {
  display: none;
}

.bank-option {
  display: grid;
  min-width: 0;
  height: 120px;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 54px 32px;
  align-content: center;
  justify-items: center;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid #777;
  border-radius: 10px;
  background: transparent;
  color: #333;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
}

.bank-option > span,
.network-option > span:last-child {
  display: flex;
  width: 100%;
  min-width: 0;
  height: 32px;
  align-items: center;
  justify-content: center;
  line-height: 16px;
  text-align: center;
  overflow-wrap: anywhere;
}

.bank-option[hidden] {
  display: none;
}

.bank-option img {
  width: 94px;
  max-width: 100%;
  height: 54px;
  object-fit: contain;
}

.bank-option[data-bank="AmBank"] img {
  width: 54px;
}

.bank-option[data-bank="BSN Bank"] img {
  width: 76px;
}

.bank-option.is-selected {
  border-color: #e5c643;
  background: #303030;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.24);
  color: #fff;
}

.bank-option:focus-visible {
  outline: 2px solid #967914;
  outline-offset: -4px;
}

.bank-picker-footer {
  flex: 0 0 auto;
  margin-top: auto;
  padding-top: 14px;
  background: #e9e9e9;
}

.bank-confirm {
  width: 100%;
  height: 41px;
  border: 0;
  border-radius: 5px;
  background: linear-gradient(180deg, #fff2a5 0%, #e6c443 62%, #cba11e 100%);
  color: #111;
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
}

@media (max-width: 360px) {
  .bank-picker-options {
    column-gap: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bank-picker,
  .bank-picker-backdrop {
    transition: none;
  }
}

.is-internet-banking .network-select-wrap,
.is-online-banking .network-select-wrap {
  background: #fff;
}

.select-brand {
  display: grid;
  width: 30px;
  height: 24px;
  place-items: center;
  left: 12px;
  border-radius: 4px;
  background: #182b83;
  color: #ffe34f;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: -0.5px;
}

.select-brand .tng-logo {
  display: none;
  width: 28px;
  height: 22px;
  overflow: visible;
}

.select-brand .tng-logo text {
  fill: #ffe34f;
  font-family: Inter, Arial, sans-serif;
  font-size: 8px;
  font-style: italic;
  font-weight: 800;
  letter-spacing: -0.45px;
}

.select-brand.is-wallet-brand .tng-logo {
  display: block;
}

.select-brand.is-wallet-brand .select-brand-label {
  display: none;
}

.network-brand {
  width: 30px;
  height: 30px;
  overflow: hidden;
  padding: 3px;
  border-radius: 4px;
  background: transparent;
}

.network-brand img,
.network-brand svg {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  overflow: hidden;
  object-fit: contain;
}

.network-provider-display {
  position: relative;
  display: flex;
  flex: 1;
  min-width: 0;
  width: 100%;
  height: 100%;
  align-items: center;
  gap: 10px;
  padding: 0 13px 0 12px;
  border: 0;
  border-radius: inherit;
  background: transparent;
  color: #343434;
  font-size: 13px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.network-provider-display .network-brand {
  position: static;
  flex: 0 0 30px;
}

.network-picker-chevron {
  position: absolute;
  top: calc(50% - 4px);
  right: 13px;
  width: 0;
  height: 0;
  border-top: 8px solid #333;
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
  pointer-events: none;
}

.network-provider-display:not(.is-selectable) .network-picker-chevron {
  display: none;
}

.network-select-wrap select[hidden] {
  display: none;
}

.select-wrap.network-select-wrap::after {
  display: none;
}

.wallet-picker-trigger {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  gap: 10px;
  padding: 0 38px 0 12px;
  border: 0;
  border-radius: inherit;
  background: transparent;
  color: #343434;
  font-size: 13px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.wallet-picker-trigger[hidden],
.wallet-select-wrap select[hidden] {
  display: none;
}

.wallet-picker-trigger .select-brand {
  position: static;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  overflow: hidden;
  padding: 3px;
  border-radius: 4px;
  background: #182b83;
  color: #ffe34f;
}

.wallet-picker-trigger .select-brand svg,
.wallet-picker-trigger .select-brand img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  overflow: hidden;
  object-fit: contain;
}

.wallet-picker-trigger .select-brand .tng-logo text {
  fill: #ffe34f;
  font-family: Inter, Arial, sans-serif;
  font-size: 16px;
  font-style: italic;
  font-weight: 800;
  letter-spacing: -0.8px;
}

.wallet-picker-trigger .select-brand.shopee-brand {
  background: transparent;
}

.wallet-picker-trigger .shopee-logo path {
  fill: #f04b32;
  stroke: #fff;
  stroke-width: 2;
}

.wallet-picker-trigger .shopee-logo text {
  fill: #fff;
  font-size: 22px;
  font-weight: 700;
}

.wallet-picker-trigger .select-brand.grab-brand {
  background: #fff;
}

.wallet-picker-trigger .grab-logo rect {
  fill: #23984a;
}

.wallet-picker-trigger .grab-logo text {
  fill: #fff;
  font-size: 12px;
  font-weight: 700;
}

.wallet-picker-trigger .select-brand.duitnow-brand {
  background: #fff;
}

.wallet-picker-trigger .duitnow-logo path {
  fill: #e8185a;
}

.select-brand.boost-brand,
.wallet-picker-trigger .select-brand.boost-brand {
  background: #ef3124;
  color: #fff;
}

.boost-logo rect {
  fill: #ef3124;
  stroke: #fff;
  stroke-width: 1.5;
}

.boost-logo path {
  fill: #fff;
}

.ewallet-picker-backdrop {
  position: absolute;
  z-index: 8;
  inset: 70px 0 70px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.52);
  opacity: 0;
  transition: opacity 220ms ease, visibility 220ms;
}

.network-picker-backdrop {
  position: absolute;
  z-index: 8;
  inset: 70px 0 70px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.52);
  opacity: 0;
  transition: opacity 220ms ease, visibility 220ms;
}

.ewallet-picker-backdrop.is-open,
.network-picker-backdrop.is-open {
  opacity: 1;
}

.ewallet-picker,
.network-picker {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  height: min(560px, 100%);
  flex-direction: column;
  overflow-y: auto;
  padding: 20px 14px 14px;
  border-radius: 10px 10px 0 0;
  background: #e9e9e9;
  color: #333;
  transform: translateY(102%);
  transition: transform 280ms cubic-bezier(0.2, 0.75, 0.25, 1);
  scrollbar-width: none;
}

.ewallet-picker-backdrop.is-open .ewallet-picker,
.network-picker-backdrop.is-open .network-picker {
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .ewallet-picker,
  .network-picker,
  .ewallet-picker-backdrop,
  .network-picker-backdrop {
    transition: none;
  }
}

.ewallet-picker::-webkit-scrollbar,
.network-picker::-webkit-scrollbar {
  display: none;
}

.ewallet-picker-handle,
.network-picker-handle {
  display: block;
  width: 80px;
  height: 10px;
  flex: 0 0 10px;
  align-self: center;
  margin: 0 auto 20px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: #333;
  cursor: pointer;
}

.ewallet-picker h2,
.network-picker h2 {
  margin: 0 0 19px;
  font-size: 19px;
  font-weight: 700;
}

.ewallet-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px 24px;
  align-content: start;
  padding-bottom: 12px;
}

.ewallet-option[hidden] {
  display: none;
}

.network-picker-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 120px));
  gap: 10px 24px;
  align-content: start;
  padding-bottom: 12px;
}

.network-option[hidden],
.network-option-logo > [hidden] {
  display: none;
}

.is-online-banking-network .network-picker-options {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.is-online-banking-network .network-option {
  font-weight: 700;
}

@media (max-width: 360px) {
  .is-online-banking-network .network-picker-options {
    column-gap: 12px;
  }
}

.ewallet-option {
  display: flex;
  min-width: 0;
  height: 120px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid #777;
  border-radius: 10px;
  background: transparent;
  color: #333;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.network-option {
  display: grid;
  min-width: 0;
  height: 120px;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 54px 32px;
  align-content: center;
  justify-items: center;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid #777;
  border-radius: 10px;
  background: transparent;
  color: #333;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.ewallet-option.is-selected {
  border-color: #e5c643;
  background: #292929;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.24);
  color: #fff;
}

.network-option.is-selected {
  border-color: #e5c643;
  background: #292929;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.24);
  color: #fff;
}

.ewallet-option-logo {
  display: grid;
  width: 80px;
  height: 54px;
  place-items: center;
}

.network-option-logo {
  display: grid;
  width: 80px;
  max-width: 100%;
  height: 54px;
  place-items: center;
  overflow: hidden;
  padding: 4px;
}

.network-option-logo img,
.network-option-logo svg {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  overflow: hidden;
  object-fit: contain;
}

.ewallet-option-logo svg,
.ewallet-option-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.ewallet-option-logo .tng-logo {
  padding: 3px;
  border: 1px solid #fff;
  border-radius: 6px;
  background: #182b83;
}

.ewallet-option-logo .tng-logo text {
  fill: #ffe34f;
  font-family: Inter, Arial, sans-serif;
  font-size: 22px;
  font-style: italic;
  font-weight: 800;
  letter-spacing: -1px;
}

.ewallet-option-logo .shopee-logo {
  width: 48px;
  height: 48px;
}

.ewallet-option-logo .shopee-logo path {
  fill: #f04b32;
}

.ewallet-option-logo .shopee-logo text {
  fill: #fff;
  font-size: 24px;
  font-weight: 700;
}

.ewallet-option-logo .grab-logo {
  width: 54px;
  height: 54px;
}

.ewallet-option-logo .grab-logo rect {
  fill: #23984a;
}

.ewallet-option-logo .grab-logo text {
  fill: #fff;
  font-size: 13px;
  font-weight: 700;
}

.ewallet-option-logo .duitnow-logo {
  width: 54px;
  height: 54px;
}

.ewallet-option-logo .duitnow-logo path {
  fill: #e8185a;
}

.ewallet-option-logo .boost-logo {
  width: 54px;
  height: 54px;
}

.ewallet-option-logo > [hidden] {
  display: none !important;
}

.is-qr-picker .ewallet-option[data-wallet="DuitNow"] {
  order: 0;
}

.is-qr-picker .ewallet-option[data-wallet="Touch ‘n Go"] {
  order: 1;
}

.is-qr-picker .ewallet-option[data-wallet="Boost"] {
  order: 2;
}

.is-qr-picker .qr-option-logo {
  width: 80px;
  max-width: 100%;
  height: 54px;
  object-fit: contain;
}

.wallet-picker-trigger .select-brand.is-qr-brand {
  border-radius: 0;
  background: transparent;
}

.wallet-picker-trigger .is-qr-brand img {
  width: 30px;
  height: 24px;
  object-fit: contain;
}

.network-picker-empty {
  margin: 0 0 20px;
  font-size: 13px;
  line-height: 1.5;
}

.quick-form .amount-heading {
  margin-bottom: 5px;
}

.quick-form .amount-input {
  height: 41px;
  font-size: 14px;
}

.amount-minimum-hint {
  margin: 2px 0 0;
  color: #ff1b1b;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
}

.quick-form .amount-presets {
  gap: 8px;
  margin: 4px 0 0;
}

.quick-form .amount-presets button {
  height: 26px;
  border: 0;
  border-radius: 5px;
  background: linear-gradient(180deg, #fff1a2 0%, #e6c443 62%, #cba11e 100%);
}

.quick-form .promotion-label,
.quick-form .promotion-label + input,
.quick-form .promotion-label + input + .select-wrap,
.quick-form > .submit-button,
.bank-form > .submit-button {
  display: none;
}

.network-field {
  margin-bottom: 13px;
}

.network-field .select-wrap {
  margin-bottom: 0;
}

.deposit-next-wrap {
  display: block;
  flex: 0 0 94px;
  padding: 27px 9px;
  background: #676767;
}

.deposit-next,
.deposit-skip {
  width: 100%;
  height: 40px;
  border: 0;
  border-radius: 5px;
  background: linear-gradient(180deg, #fff4ad 0%, #e9cc4d 65%, #d0a91f 100%);
  color: #090909;
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
}

.deposit-next:active,
.deposit-skip:active {
  filter: brightness(0.93);
}

.deposit-next-wrap.is-slip-actions {
  display: flex;
  flex-basis: 144px;
  flex-direction: column;
  gap: 10px;
}

.app-frame.is-slip-step .deposit-panel {
  display: none;
}

.deposit-slip-card {
  padding: 20px 23px 18px;
  border: 1px solid var(--gold);
  border-radius: 5px;
  background: #303030;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.25);
}

.slip-transaction {
  margin: 0;
  font-size: 12px;
  line-height: 16px;
}

.slip-instructions {
  margin: 4px 0 14px;
  color: #e9c326;
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
}

.deposit-slip-card .field-label {
  margin-bottom: 5px;
}

.slip-upload-control {
  position: relative;
  display: flex;
  height: 40px;
  overflow: hidden;
  border-radius: 5px;
  background: #f3f3f3;
  color: #333;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
}

.slip-upload-control:focus-within {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.slip-file-name {
  min-width: 0;
  flex: 1;
  align-self: center;
  overflow: hidden;
  padding: 0 15px;
  font-size: 12px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.slip-upload-button {
  display: grid;
  width: 88px;
  height: 100%;
  flex: 0 0 88px;
  place-items: center;
  background: #c9c9c9;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.slip-message {
  margin: 12px 0 0;
  color: #ffb4b4;
  font-size: 12px;
  line-height: 16px;
}

.slip-message:empty {
  display: none;
}

@media (max-width: 360px) {
  .deposit-slip-card {
    padding-right: 14px;
    padding-left: 14px;
  }
}

.deposit-next-wrap.is-hidden {
  display: none;
}

@media (max-width: 360px) {
  .method-tabs {
    gap: 7px;
  }

  .quick-types {
    gap: 8px;
  }

  .quick-form {
    padding-right: 14px;
    padding-left: 14px;
  }

  .quick-form .amount-presets {
    gap: 4px;
  }
}

.app-frame.is-promotion-step .deposit-title {
  font-size: 21px;
}

.app-frame.is-promotion-step .method-tabs,
.app-frame.is-promotion-step .deposit-panel {
  display: none;
}

.app-frame.is-promotion-step .deposit-close {
  display: none;
}

.promotion-stage {
  padding: 26px 1px 18px;
}

.deposit-details-card,
.available-promotion-card {
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 5px;
  background: #303030;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
}

.deposit-details-card {
  padding: 15px 23px 16px;
}

.deposit-details-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #929292;
}

.deposit-details-heading h2,
.available-promotion-card h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
}

.promotion-edit {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #3987ff;
  font-size: 14px;
  cursor: pointer;
}

.promotion-edit svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.deposit-detail-rows {
  display: grid;
  gap: 5px;
  margin: 10px 0 0;
  font-size: 12px;
}

.deposit-detail-rows > div {
  display: grid;
  grid-template-columns: 125px minmax(0, 1fr);
  gap: 5px;
}

.deposit-detail-rows dt {
  font-weight: 700;
}

.deposit-detail-rows dd {
  min-width: 0;
  margin: 0;
}

.available-promotion-card {
  margin-top: 20px;
  padding: 14px 23px 18px;
  border-color: var(--gold);
}

.available-promotion-card h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 9px;
}

.available-promotion-card h2 svg {
  width: 19px;
  height: 19px;
  fill: #ffd11a;
  stroke: #ffd11a;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
}

.promotion-eligibility {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 50px;
  margin: 0 0 20px;
  padding: 8px 14px;
  border: 1px solid #34dc7e;
  border-radius: 5px;
  background: #267b59;
  color: #45ff86;
  font-size: 12px;
  line-height: 1.35;
}

.promotion-eligibility svg {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  fill: #45ff86;
  stroke: #267b59;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.5;
}

.promotion-stage-options {
  display: grid;
  gap: 25px;
}

.has-no-promotions .deposit-detail-rows dd::before {
  content: ": ";
}

.has-no-promotions .available-promotion-card {
  padding-bottom: 32px;
}

.has-no-promotions .available-promotion-card h2 {
  margin-bottom: 13px;
}

.promotion-empty {
  display: flex;
  min-height: 307px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 12px;
  border: 1px solid #f2f2f2;
  border-radius: 5px;
  background: #242424;
  text-align: center;
}

.promotion-empty svg {
  width: 58px;
  height: 58px;
  margin-bottom: 12px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 5;
}

.promotion-empty-slash {
  filter: drop-shadow(0 -3px #242424);
}

.promotion-empty strong {
  font-size: 16px;
  line-height: 19px;
  font-weight: 600;
}

.promotion-empty p {
  margin: 10px 0 0;
  color: #bdbdbd;
  font-size: 12px;
  line-height: 1.4;
}

.promotion-stage-option {
  display: grid;
  grid-template-columns: 27px minmax(0, 1fr);
  align-items: center;
  gap: 13px;
  padding: 8px;
  border: 1px solid transparent;
  border-radius: 5px;
  cursor: pointer;
}

.promotion-stage-option:has(> input:checked) {
  border-color: var(--gold);
  background: #242424;
}

.promotion-stage-option > input {
  width: 21px;
  height: 21px;
  justify-self: center;
  margin: 0;
  appearance: none;
  border: 2px solid #f2f2f2;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.promotion-stage-option > input:checked {
  border-color: #ffd223;
  background: radial-gradient(circle, #ffd223 0 55%, transparent 59%);
}

.promotion-offer-content {
  min-width: 0;
}

.promotion-stage-offer:has(> input:checked) .promotion-offer-content {
  padding: 0;
}

.promotion-offer-banner {
  position: relative;
  display: flex;
  min-height: 114px;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  overflow: hidden;
  padding: 15px 42% 8px 13px;
  border: 1px solid #f0f0f0;
  border-radius: 5px;
  background:
    radial-gradient(ellipse at 78% 45%, rgba(46, 173, 224, 0.9), transparent 42%),
    linear-gradient(112deg, #073d72, #1367a5 58%, #172d56);
  text-shadow: 0 1px 2px #102c47;
}

.promotion-offer-banner::after {
  position: absolute;
  top: -30px;
  right: -23px;
  width: 145px;
  height: 170px;
  border: 1px solid rgba(255, 224, 113, 0.8);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255, 186, 31, 0.35), transparent 68%);
  content: "";
  transform: rotate(25deg);
}

.promotion-offer-hot {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  padding: 2px 14px 3px 8px;
  background: #ff771c;
  font-size: 11px;
  font-style: italic;
  font-weight: 800;
}

.promotion-offer-banner > strong,
.promotion-offer-copy {
  position: relative;
  z-index: 1;
}

.promotion-offer-banner > strong {
  font-size: 13px;
  line-height: 1.05;
}

.promotion-offer-copy {
  font-size: 9px;
  font-weight: 700;
  line-height: 1.1;
}

.promotion-offer-copy b {
  color: #ffd22e;
  font-size: 13px;
  line-height: 1;
}

.promotion-offer-art {
  position: absolute;
  z-index: 1;
  top: 7px;
  right: 7px;
  width: 37%;
  height: calc(100% - 14px);
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.55));
}

.promotion-offer-caption {
  display: block;
  padding-top: 6px;
  font-size: 11px;
  line-height: 1.25;
  text-align: center;
}

.promotion-offer-caption strong {
  font-weight: 800;
}

.promotion-stage-none {
  align-items: center;
  min-height: 70px;
  padding: 5px 8px 4px;
}

.promotion-stage-none > span {
  display: grid;
  gap: 3px;
  font-size: 13px;
  line-height: 1.3;
}

.promotion-stage-none > span strong {
  font-size: 14px;
}

.app-frame.is-promotion-step .deposit-next-wrap {
  padding-top: 27px;
}

@media (max-width: 360px) {
  .deposit-details-card {
    padding-right: 14px;
    padding-left: 14px;
  }

  .deposit-detail-rows > div {
    grid-template-columns: 112px minmax(0, 1fr);
  }

  .available-promotion-card {
    padding-right: 14px;
    padding-left: 14px;
  }

  .promotion-stage-option {
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 8px;
  }

  .promotion-offer-banner {
    padding-left: 9px;
    padding-right: 39%;
  }
}