/* WoofAPI stable top-up UI overlay v5.2 — 2026-09-04.
 * This file is deliberately loaded outside hashed Vite bundles.
 * Keep the ordered v3.6–v5.1 patches below it so later bundle switches cannot
 * silently restore an older wallet layout.
 */
/* WoofAPI top-up interaction layout hotfix v3.6 — 2026-08-30. */
.woof-console-shell-v3
  .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
  .woof-wallet-faq-pane {
  display: flex !important;
  min-height: 0 !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

.woof-console-shell-v3
  .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
  .woof-wallet-faq-pane
  .woof-wallet-faq-list {
  display: flex !important;
  min-height: 0 !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  grid-template-rows: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  scrollbar-color: #b8cbea transparent;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
}

.woof-console-shell-v3
  .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
  .woof-wallet-faq-list
  details {
  display: flex !important;
  height: auto !important;
  min-height: 0 !important;
  flex: 0 0 auto !important;
  flex-direction: column !important;
  overflow: visible !important;
}

.woof-console-shell-v3
  .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
  .woof-wallet-faq-list
  details
  > summary {
  min-height: 34px !important;
  flex: 0 0 auto !important;
  box-sizing: border-box !important;
}

.woof-console-shell-v3
  .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
  .woof-wallet-faq-list
  details
  > p {
  position: static !important;
  height: auto !important;
  min-height: 0 !important;
  flex: 0 0 auto !important;
  box-sizing: border-box !important;
}

.woof-console-shell-v3
  .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
  .woof-wallet-faq-list
  details[open]
  > p {
  display: block !important;
}

.woof-console-shell-v3
  .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
  .woof-wallet-faq-list
  details:not([open])
  > p {
  display: none !important;
}

.woof-console-shell-v3
  .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
  .woof-wallet-security-pane
  .woof-wallet-security-box {
  display: flex !important;
  min-height: 0 !important;
  height: auto !important;
  flex-direction: column !important;
  overflow: visible !important;
}

.woof-console-shell-v3
  .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
  .woof-wallet-security-pane
  .woof-wallet-payment-brand-row {
  min-height: 0 !important;
  flex: 0 0 auto !important;
  margin-top: auto !important;
  padding-top: 10px !important;
}

.woof-console-shell-v3
  .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
  .woof-wallet-security-pane
  .woof-wallet-payment-availability {
  position: static !important;
  display: block !important;
  min-height: 17px !important;
  flex: 0 0 auto !important;
  margin: 9px 0 0 !important;
  padding: 0 1px 1px !important;
  line-height: 1.45 !important;
  white-space: normal !important;
}

.woof-console-shell-v3
  .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
  .woof-wallet-redeem-inline
  .woof-wallet-buy-code-button {
  min-height: 32px !important;
  height: 32px !important;
  align-self: center !important;
  justify-self: end !important;
  margin-block: auto !important;
}

.woof-console-shell-v3
  .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
  .woof-wallet-redeem-inline
  .woof-wallet-buy-code-button
  .semi-button-content {
  display: flex !important;
  height: 100% !important;
  align-items: center !important;
}

.woof-console-shell-v3
  .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
  .woof-wallet-redeem-inline
  .woof-wallet-redeem-row {
  width: min(100%, 390px) !important;
  max-width: 390px !important;
  justify-self: end !important;
  margin-left: auto !important;
}

@media (min-width: 641px) and (max-width: 1380px) {
  .woof-console-shell-v3
    .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
    .woof-wallet-faq-pane {
    height: 315px !important;
    min-height: 315px !important;
    max-height: 315px !important;
  }
}

@media (min-width: 1381px) {
  .woof-console-shell-v3
    .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
    .woof-wallet-payment-workspace {
    height: 315px !important;
    min-height: 315px !important;
    max-height: 315px !important;
    overflow: hidden !important;
  }

  .woof-console-shell-v3
    .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
    .woof-wallet-payment-workspace
    > .semi-card-body,
  .woof-console-shell-v3
    .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
    .woof-wallet-payment-grid {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
  }

  .woof-console-shell-v3
    .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
    .woof-wallet-security-pane
    .woof-wallet-security-box {
    height: 100% !important;
    overflow: hidden !important;
  }
}

@media (max-width: 640px) {
  .woof-console-shell-v3
    .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
    .woof-wallet-redeem-inline
    .woof-wallet-redeem-row {
    width: 100% !important;
    max-width: none !important;
  }
}
/* WoofAPI top-up Stripe/code color hierarchy restore v3.7 — 2026-08-30. */
.woof-console-shell-v3
  .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
  .woof-wallet-payment-workspace {
  border-color: #8fb9ef !important;
  background: #edf5ff !important;
  box-shadow:
    0 10px 26px rgba(27, 91, 173, 0.09),
    0 3px 9px rgba(19, 63, 122, 0.05) !important;
}

.woof-console-shell-v3
  .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
  .woof-wallet-payment-grid {
  background: linear-gradient(
    135deg,
    #e9f3ff 0%,
    #f2f7ff 52%,
    #eaf3ff 100%
  ) !important;
}

.woof-console-shell-v3
  .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
  .woof-wallet-amount-pane {
  background: linear-gradient(
    180deg,
    #e4f0ff 0%,
    #f4f8ff 45%,
    #fff 100%
  ) !important;
}

.woof-console-shell-v3
  .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
  .woof-wallet-summary-pane {
  border-color: #bfd7f5 !important;
  background: linear-gradient(180deg, #edf5ff 0%, #f8fbff 100%) !important;
}

.woof-console-shell-v3
  .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
  .woof-wallet-security-pane {
  border-color: #bfd7f5 !important;
  background: linear-gradient(180deg, #e8f3ff 0%, #f3f8ff 100%) !important;
}

.woof-console-shell-v3
  .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
  .woof-wallet-faq-pane {
  border-color: #bfd7f5 !important;
  background: linear-gradient(180deg, #f0f6ff 0%, #f9fbff 100%) !important;
}

.woof-console-shell-v3
  .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
  .woof-wallet-redeem-inline {
  border-color: #f1c995 !important;
  background: linear-gradient(
    90deg,
    #fff9f2 0%,
    #fffdf9 46%,
    #fff 100%
  ) !important;
  box-shadow:
    0 7px 20px rgba(162, 91, 25, 0.07),
    0 2px 7px rgba(86, 54, 22, 0.04) !important;
}

.woof-console-shell-v3
  .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
  .woof-wallet-redeem-inline
  .woof-wallet-action-top
  b {
  color: #7c3e10 !important;
}

.woof-console-shell-v3
  .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
  .woof-wallet-redeem-inline
  .woof-wallet-action-top
  small {
  color: #8c6849 !important;
}

.woof-console-shell-v3
  .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
  .woof-wallet-redeem-badge {
  border-color: #f2c58d !important;
  background: #fff0dc !important;
  color: #b45309 !important;
}

.woof-console-shell-v3
  .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
  .woof-wallet-redeem-inline
  .woof-wallet-buy-code-button.semi-button {
  border-color: #ea6a12 !important;
  background: #ea6a12 !important;
  color: #fff !important;
  box-shadow: 0 7px 15px rgba(218, 93, 10, 0.2) !important;
}

.woof-console-shell-v3
  .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
  .woof-wallet-redeem-inline
  .woof-wallet-buy-code-button.semi-button:hover {
  border-color: #c94f08 !important;
  background: #d85b0b !important;
  color: #fff !important;
}

.woof-console-shell-v3
  .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
  .woof-wallet-redeem-inline
  .woof-wallet-redeem-row
  > .semi-button {
  border-color: #e8a75c !important;
  background: #fff7ed !important;
  color: #b45309 !important;
}

.woof-console-shell-v3
  .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
  .woof-wallet-redeem-inline
  .semi-input-wrapper:focus-within {
  border-color: #e8a75c !important;
  box-shadow: 0 0 0 2px rgba(234, 106, 18, 0.1) !important;
}
/* WoofAPI top-up redemption structural selector restore v3.7.1 — 2026-08-30. */
.woof-console-shell-v3
  .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
  .woof-wallet-redeem-inline.semi-card {
  border-color: #f1c995 !important;
}

.woof-console-shell-v3
  .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
  .woof-wallet-redeem-inline
  .woof-wallet-action-top
  > button.semi-button {
  min-height: 32px !important;
  height: 32px !important;
  align-self: center !important;
  justify-self: end !important;
  margin-block: auto !important;
  border-color: #ea6a12 !important;
  background: #ea6a12 !important;
  color: #fff !important;
  box-shadow: 0 7px 15px rgba(218, 93, 10, 0.2) !important;
}

.woof-console-shell-v3
  .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
  .woof-wallet-redeem-inline
  .woof-wallet-action-top
  > button.semi-button
  .semi-button-content {
  display: flex !important;
  height: 100% !important;
  align-items: center !important;
}

.woof-console-shell-v3
  .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
  .woof-wallet-redeem-inline
  .woof-wallet-action-top
  > button.semi-button:hover {
  border-color: #c94f08 !important;
  background: #d85b0b !important;
  color: #fff !important;
}
/* WoofAPI top-up fixed-height readability and 3D icon restore v3.8 — 2026-08-30. */
@media (min-width: 1381px) {
  .woof-console-shell-v3
    .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
    .woof-wallet-payment-grid
    > * {
    height: 100% !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .woof-console-shell-v3
    .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
    .woof-wallet-summary-pane,
  .woof-console-shell-v3
    .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
    .woof-wallet-security-pane {
    padding-block: 10px !important;
  }

  .woof-console-shell-v3
    .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
    .woof-wallet-summary-title {
    min-height: 38px !important;
  }

  .woof-console-shell-v3
    .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
    .woof-wallet-summary-list {
    margin-top: 4px !important;
  }

  .woof-console-shell-v3
    .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
    .woof-wallet-summary-list
    > div {
    min-height: 32px !important;
  }

  .woof-console-shell-v3
    .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
    .woof-wallet-summary-list
    > .is-credit {
    min-height: 38px !important;
    margin-block: 3px !important;
  }

  .woof-console-shell-v3
    .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
    .woof-wallet-summary-pane
    .woof-wallet-online-btn {
    min-height: 40px !important;
    height: 40px !important;
  }

  .woof-console-shell-v3
    .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
    .woof-wallet-summary-helper {
    min-height: 32px !important;
    flex: 0 0 auto !important;
    margin-top: 6px !important;
    color: #405b7d !important;
    font-size: 11.5px !important;
    font-weight: 580 !important;
    line-height: 1.45 !important;
  }

  .woof-console-shell-v3
    .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
    .woof-wallet-security-pane
    .woof-wallet-security-box {
    height: 100% !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
    padding-top: 0 !important;
    overflow: hidden !important;
  }

  .woof-console-shell-v3
    .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
    .woof-wallet-security-head
    b {
    font-size: 17px !important;
    line-height: 1.25 !important;
  }

  .woof-console-shell-v3
    .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
    .woof-wallet-security-head
    small {
    color: #344f70 !important;
    font-size: 13.2px !important;
    font-weight: 640 !important;
    line-height: 1.4 !important;
  }

  .woof-console-shell-v3
    .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
    .woof-wallet-security-points {
    gap: 4px !important;
    margin-top: 7px !important;
  }

  .woof-console-shell-v3
    .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
    .woof-wallet-security-points
    span {
    color: #183b62 !important;
    font-size: 13.2px !important;
    font-weight: 690 !important;
    line-height: 1.42 !important;
  }

  .woof-console-shell-v3
    .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
    .woof-wallet-security-pane
    .woof-wallet-payment-brand-row {
    gap: 5px !important;
    padding-top: 6px !important;
  }

  .woof-console-shell-v3
    .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
    .woof-wallet-payment-brand-row
    > * {
    min-height: 28px !important;
    height: 28px !important;
    font-size: 11px !important;
  }

  .woof-console-shell-v3
    .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
    .woof-wallet-payment-brand-row
    .apple {
    font-size: 10.5px !important;
  }

  .woof-console-shell-v3
    .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
    .woof-wallet-security-pane
    .woof-wallet-payment-availability {
    min-height: 18px !important;
    margin: 5px 0 0 !important;
    padding-bottom: 0 !important;
    color: #344f70 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
  }
}

/* The current route bundle predates the supplied image markup. Keep the real
   assets visible through CSS until the next normal Vite release picks up JSX. */
.woof-console-shell-v3
  .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
  .woof-wallet-pane-icon.stripe,
.woof-console-shell-v3
  .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
  .woof-wallet-section-icon.summary,
.woof-console-shell-v3
  .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
  .woof-wallet-security-icon,
.woof-console-shell-v3
  .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
  .woof-wallet-section-icon.faq,
.woof-console-shell-v3
  .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
  .woof-wallet-redeem-inline
  .woof-wallet-action-icon {
  background-color: transparent !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
}

.woof-console-shell-v3
  .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
  .woof-wallet-pane-icon.stripe {
  background-image: url('/woof-icons/billing/stripe-topup-3d.webp') !important;
}

.woof-console-shell-v3
  .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
  .woof-wallet-section-icon.summary {
  background-image: url('/woof-icons/billing/topup-summary-3d.webp') !important;
}

.woof-console-shell-v3
  .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
  .woof-wallet-security-icon {
  background-image: url('/woof-icons/billing/stripe-secure-3d.webp') !important;
}

.woof-console-shell-v3
  .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
  .woof-wallet-section-icon.faq {
  background-image: url('/woof-icons/billing/billing-faq-3d.webp') !important;
}

.woof-console-shell-v3
  .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
  .woof-wallet-redeem-inline
  .woof-wallet-action-icon {
  background-image: url('/woof-icons/billing/redeem-code-3d.webp') !important;
}

.woof-console-shell-v3
  .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
  :where(
    .woof-wallet-pane-icon.stripe,
    .woof-wallet-section-icon.summary,
    .woof-wallet-security-icon,
    .woof-wallet-section-icon.faq,
    .woof-wallet-redeem-inline .woof-wallet-action-icon
  )
  > svg {
  opacity: 0 !important;
}
/* WoofAPI top-up redeem alignment, custom amount visibility and strip cleanup v3.9 — 2026-08-30. */
.woof-console-shell-v3
  .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
  .woof-wallet-payment-workspace::before {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: none !important;
  content: none !important;
}

html
  body
  .woof-console-shell-v3
  .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
  .woof-wallet-security-pane
  .woof-wallet-payment-availability {
  display: none !important;
  min-height: 0 !important;
  margin: 0 !important;
}

html
  body
  .woof-console-shell-v3
  .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
  .woof-wallet-redeem-inline {
  min-height: 76px !important;
}

html
  body
  .woof-console-shell-v3
  .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
  .woof-wallet-redeem-inline
  > .semi-card-body {
  min-height: 76px !important;
  box-sizing: border-box !important;
  padding: 12px 14px !important;
}

html
  body
  .woof-console-shell-v3
  .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
  .woof-wallet-redeem-inline
  .woof-wallet-action-icon {
  width: 38px !important;
  height: 38px !important;
  flex-basis: 38px !important;
}

html
  body
  .woof-console-shell-v3
  .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
  .woof-wallet-redeem-inline
  .woof-wallet-action-top {
  grid-template-columns: 38px minmax(0, 1fr) !important;
  gap: 10px !important;
}

html
  body
  .woof-console-shell-v3
  .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
  .woof-wallet-redeem-inline
  .woof-wallet-action-top
  b {
  color: #6f350d !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
}

html
  body
  .woof-console-shell-v3
  .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
  .woof-wallet-redeem-inline
  .woof-wallet-action-top
  small {
  margin-top: 2px !important;
  color: #78583c !important;
  font-size: 11.5px !important;
  font-weight: 560 !important;
  line-height: 1.45 !important;
}

html
  body
  .woof-console-shell-v3
  .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
  .woof-wallet-redeem-badge {
  padding: 2px 6px !important;
  font-size: 9.5px !important;
}

html
  body
  .woof-console-shell-v3
  .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
  .woof-wallet-redeem-inline
  .woof-wallet-redeem-row {
  min-height: 44px !important;
  gap: 8px !important;
}

html
  body
  .woof-console-shell-v3
  .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
  .woof-wallet-redeem-inline
  :where(.semi-form, .semi-form-field) {
  min-height: 44px !important;
}

html
  body
  .woof-console-shell-v3
  .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
  .woof-wallet-redeem-inline
  .semi-input-wrapper {
  height: 44px !important;
  min-height: 44px !important;
  border-radius: 8px !important;
}

html
  body
  .woof-console-shell-v3
  .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
  .woof-wallet-redeem-inline
  .semi-input-wrapper
  input {
  font-size: 14px !important;
  font-weight: 620 !important;
}

html
  body
  .woof-console-shell-v3
  .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
  .woof-wallet-redeem-inline
  .woof-wallet-redeem-row
  > .semi-button {
  width: auto !important;
  min-width: 58px !important;
  height: 44px !important;
  min-height: 44px !important;
  padding-inline: 14px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 760 !important;
}

@media (min-width: 1381px) {
  html
    body
    .woof-console-shell-v3
    .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
    .woof-wallet-amount-pane {
    padding-block: 9px !important;
  }

  html
    body
    .woof-console-shell-v3
    .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
    .woof-wallet-package-grid {
    margin-top: 8px !important;
  }

  html
    body
    .woof-console-shell-v3
    .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
    .woof-wallet-custom-amount {
    height: 42px !important;
    min-height: 42px !important;
    box-sizing: border-box !important;
    margin-top: 5px !important;
    padding: 4px 10px !important;
    overflow: visible !important;
  }

  html
    body
    .woof-console-shell-v3
    .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
    .woof-wallet-custom-amount
    input {
    height: 32px !important;
    min-height: 32px !important;
  }

  html
    body
    .woof-console-shell-v3
    .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
    .woof-wallet-redeem-inline
    > .semi-card-body {
    position: relative !important;
    grid-template-columns: minmax(0, 1fr) 390px !important;
    gap: 122px !important;
  }

  html
    body
    .woof-console-shell-v3
    .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
    .woof-wallet-redeem-inline
    .woof-wallet-action-top
    > button.semi-button {
    position: absolute !important;
    z-index: 2 !important;
    top: 50% !important;
    right: 416px !important;
    width: auto !important;
    min-width: 108px !important;
    max-width: 108px !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: -22px 0 0 !important;
    padding-inline: 14px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 780 !important;
  }

  html
    body
    .woof-console-shell-v3
    .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
    .woof-wallet-redeem-inline
    .woof-wallet-redeem-row {
    width: 390px !important;
    max-width: 390px !important;
  }
}

@media (max-width: 1380px) {
  html
    body
    .woof-console-shell-v3
    .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
    .woof-wallet-redeem-inline
    .woof-wallet-action-top {
    grid-template-columns: 38px minmax(0, 1fr) auto !important;
  }

  html
    body
    .woof-console-shell-v3
    .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
    .woof-wallet-redeem-inline
    .woof-wallet-action-top
    > button.semi-button {
    position: static !important;
    width: auto !important;
    min-width: 108px !important;
    max-width: none !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    font-size: 13px !important;
  }
}
/* WoofAPI supplied 3D price-tier logos v4.0 — 2026-08-30. */
.woof-console-shell-v3
  .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
  .woof-wallet-tier-track {
  padding-top: 27px !important;
}

.woof-console-shell-v3
  .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
  .woof-wallet-tier-track::before {
  top: 51px !important;
}

.woof-console-shell-v3
  .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
  .woof-wallet-tier-step {
  grid-template-rows: 48px auto auto !important;
}

.woof-console-shell-v3
  .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
  .woof-wallet-tier-step:not(:last-child)::after {
  top: 24px !important;
}

.woof-console-shell-v3
  .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
  .woof-wallet-tier-dot {
  box-sizing: border-box !important;
  width: 48px !important;
  height: 48px !important;
  border: 0 !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

.woof-console-shell-v3
  .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
  .woof-wallet-tier-step.is-current
  .woof-wallet-tier-dot {
  border: 0 !important;
  background-color: transparent !important;
  box-shadow: 0 0 0 4px rgba(40, 100, 216, 0.1) !important;
}

.woof-console-shell-v3
  .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
  .woof-wallet-tier-dot
  > svg {
  display: none !important;
}

.woof-console-shell-v3
  .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
  .woof-wallet-tier-dot::before {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 48px;
  height: 48px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  content: '';
  filter: drop-shadow(0 3px 5px rgba(25, 43, 75, 0.14));
}

.woof-console-shell-v3
  .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
  .woof-wallet-tier-step[data-tier='standard']
  .woof-wallet-tier-dot::before {
  background-image: url('/assets/tier-standard-3d.webp');
}

.woof-console-shell-v3
  .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
  .woof-wallet-tier-step[data-tier='silver']
  .woof-wallet-tier-dot::before {
  background-image: url('/assets/tier-silver-3d.webp');
}

.woof-console-shell-v3
  .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
  .woof-wallet-tier-step[data-tier='gold']
  .woof-wallet-tier-dot::before {
  background-image: url('/assets/tier-gold-3d.webp');
}

.woof-console-shell-v3
  .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
  .woof-wallet-tier-step[data-tier='platinum']
  .woof-wallet-tier-dot::before {
  background-image: url('/assets/tier-platinum-3d.webp');
}

.woof-console-shell-v3
  .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
  .woof-wallet-tier-step[data-tier='diamond']
  .woof-wallet-tier-dot::before {
  background-image: url('/assets/tier-diamond-3d.webp');
}

.woof-console-shell-v3
  .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
  .woof-wallet-tier-image {
  position: relative;
  z-index: 2;
  display: block;
  width: 48px;
  height: 48px;
  object-fit: contain;
  filter: drop-shadow(0 3px 5px rgba(25, 43, 75, 0.14));
}

.woof-console-shell-v3
  .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
  .woof-wallet-tier-dot:has(> .woof-wallet-tier-image)::before {
  display: none;
}

.woof-console-shell-v3
  .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
  .woof-wallet-tier-current-flag,
.woof-console-shell-v3
  .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
  .woof-wallet-tier-check {
  z-index: 3;
}

@media (max-width: 640px) {
  .woof-console-shell-v3
    .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
    .woof-wallet-tier-track::before {
    top: 62px !important;
    bottom: 40px !important;
    left: 38px !important;
  }

  .woof-console-shell-v3
    .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
    .woof-wallet-tier-step {
    grid-template-columns: 48px minmax(0, 1fr) auto !important;
    grid-template-rows: auto !important;
    min-height: 72px !important;
  }

  .woof-console-shell-v3
    .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
    .woof-wallet-tier-step:not(:last-child)::after {
    top: 56px !important;
    left: 26px !important;
    width: 2px !important;
    height: 16px !important;
  }
}
/* WoofAPI thicker price-tier progress rail v4.1 — 2026-08-30. */
.woof-console-shell-v3
  .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
  .woof-wallet-tier-step.is-current
  .woof-wallet-tier-dot,
.woof-console-shell-v3
  .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
  .woof-wallet-tier-step.is-current
  .woof-wallet-tier-image {
  width: 48px !important;
  height: 48px !important;
  margin: 0 !important;
  transform: none !important;
}

.woof-console-shell-v3
  .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
  .woof-wallet-tier-step.is-current
  .woof-wallet-tier-dot {
  box-shadow: none !important;
}

.woof-console-shell-v3
  .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
  .woof-wallet-tier-step.is-current
  .woof-wallet-tier-image {
  filter: drop-shadow(0 3px 5px rgba(25, 43, 75, 0.14)) !important;
}

@media (min-width: 641px) {
  .woof-console-shell-v3
    .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
    .woof-wallet-tier-track::before {
    top: 38px !important;
    left: 2.5% !important;
    right: 2.5% !important;
    z-index: 0 !important;
    box-sizing: border-box;
    height: 26px !important;
    border: 1px solid #c7d5e6;
    border-radius: 999px;
    background:
      linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.98) 0%,
        rgba(239, 245, 252, 0.98) 22%,
        #d7e2ef 48%,
        #bacadd 54%,
        #edf3f9 100%
      );
    box-shadow:
      inset 0 2px 3px rgba(255, 255, 255, 0.96),
      inset 0 -2px 4px rgba(74, 96, 128, 0.2),
      0 3px 10px rgba(45, 76, 120, 0.1);
  }

  .woof-console-shell-v3
    .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
    .woof-wallet-tier-step {
    z-index: 1;
  }

  .woof-console-shell-v3
    .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
    .woof-wallet-tier-step:not(:last-child)::after {
    top: 13px !important;
    z-index: 1 !important;
    box-sizing: border-box;
    height: 22px !important;
    border: 1px solid rgba(41, 102, 221, 0.42);
    border-radius: 999px;
    background:
      linear-gradient(
        180deg,
        #8db8ff 0%,
        #5592ff 24%,
        #2f73f2 50%,
        #1e59cf 56%,
        #79a9ff 100%
      ) !important;
    box-shadow:
      inset 0 2px 2px rgba(255, 255, 255, 0.68),
      inset 0 -2px 3px rgba(14, 65, 170, 0.3),
      0 0 7px rgba(47, 115, 242, 0.2);
  }

  .woof-console-shell-v3
    .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
    .woof-wallet-tier-dot {
    position: relative;
    z-index: 2 !important;
  }
}

@media (max-width: 640px) {
  .woof-console-shell-v3
    .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
    .woof-wallet-tier-track::before {
    width: 4px !important;
    border-radius: 999px;
    background: #cfdae9 !important;
  }

  .woof-console-shell-v3
    .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
    .woof-wallet-tier-step:not(:last-child)::after {
    width: 4px !important;
    border-radius: 999px;
  }
}
/* WoofAPI aligned rail ends and enlarged tier logos v4.2 — 2026-08-30. */
.woof-console-shell-v3
  .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
  .woof-wallet-tier-current-flag {
  display: none !important;
}

@media (min-width: 641px) {
  .woof-console-shell-v3
    .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
    .woof-wallet-tier-track::before {
    top: 42px !important;
    left: 10% !important;
    right: 10% !important;
  }

  .woof-console-shell-v3
    .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
    .woof-wallet-tier-step {
    grid-template-rows: 56px auto auto !important;
  }

  .woof-console-shell-v3
    .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
    .woof-wallet-tier-step:not(:last-child)::after {
    top: 17px !important;
  }

  .woof-console-shell-v3
    .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
    .woof-wallet-tier-step
    .woof-wallet-tier-dot,
  .woof-console-shell-v3
    .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
    .woof-wallet-tier-step.is-current
    .woof-wallet-tier-dot,
  .woof-console-shell-v3
    .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
    .woof-wallet-tier-step
    .woof-wallet-tier-image,
  .woof-console-shell-v3
    .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
    .woof-wallet-tier-step.is-current
    .woof-wallet-tier-image {
    width: 56px !important;
    height: 56px !important;
    margin: 0 !important;
    transform: none !important;
  }

  .woof-console-shell-v3
    .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
    .woof-wallet-tier-dot::before {
    width: 56px !important;
    height: 56px !important;
  }
}
/* WoofAPI larger tier logos and compact top spacing v4.3 — 2026-08-30. */
@media (min-width: 641px) {
  .woof-console-shell-v3
    .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
    .woof-wallet-tier-track {
    padding-top: 8px !important;
  }

  .woof-console-shell-v3
    .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
    .woof-wallet-tier-track::before {
    top: 29px !important;
  }

  .woof-console-shell-v3
    .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
    .woof-wallet-tier-step {
    grid-template-rows: 68px auto auto !important;
  }

  .woof-console-shell-v3
    .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
    .woof-wallet-tier-step:not(:last-child)::after {
    top: 23px !important;
  }

  .woof-console-shell-v3
    .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
    .woof-wallet-tier-step
    .woof-wallet-tier-dot,
  .woof-console-shell-v3
    .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
    .woof-wallet-tier-step.is-current
    .woof-wallet-tier-dot,
  .woof-console-shell-v3
    .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
    .woof-wallet-tier-step
    .woof-wallet-tier-image,
  .woof-console-shell-v3
    .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
    .woof-wallet-tier-step.is-current
    .woof-wallet-tier-image {
    width: 68px !important;
    height: 68px !important;
    margin: 0 !important;
    transform: none !important;
  }

  .woof-console-shell-v3
    .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
    .woof-wallet-tier-dot::before {
    width: 68px !important;
    height: 68px !important;
  }
}
/* WoofAPI compact billing overview with wallet artwork v4.4 — 2026-08-30. */

@media (min-width: 901px) {
  .woof-console-shell-v3
    .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
    .woof-wallet-overview-grid {
    align-items: stretch !important;
    gap: 12px !important;
  }

  .woof-console-shell-v3
    .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
    .woof-wallet-balance-card {
    position: relative !important;
    isolation: isolate;
    overflow: hidden !important;
    box-sizing: border-box !important;
    height: 100%;
    border-color: #d8e4f4 !important;
    background:
      radial-gradient(circle at 88% 76%, rgba(93, 148, 255, 0.13), transparent 27%),
      linear-gradient(145deg, #ffffff 0%, #f7faff 100%) !important;
  }

  .woof-console-shell-v3
    .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
    .woof-wallet-balance-card::after {
    content: '';
    position: absolute;
    z-index: 0;
    right: 16px;
    bottom: 10px;
    width: 94px;
    height: 94px;
    pointer-events: none;
    background: url('/assets/stripe-topup-3d-v44.webp') center / contain no-repeat;
    filter: drop-shadow(0 10px 16px rgba(34, 93, 201, 0.16));
  }

  .woof-console-shell-v3
    .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
    .woof-wallet-balance-card
    > .semi-card-body {
    position: relative;
    z-index: 1;
    justify-content: flex-start !important;
    box-sizing: border-box !important;
    height: 154px !important;
    min-height: 154px !important;
    padding: 13px 126px 13px 17px !important;
  }

  .woof-console-shell-v3
    .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
    .woof-wallet-balance-title-icon {
    width: 36px !important;
    height: 36px !important;
    flex-basis: 36px !important;
    border-radius: 10px !important;
    background: linear-gradient(145deg, #f2f7ff, #e6efff) !important;
  }

  .woof-console-shell-v3
    .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
    .woof-wallet-balance-value {
    margin-top: 9px !important;
    font-size: clamp(30px, 2.25vw, 36px) !important;
    line-height: 1.05 !important;
  }

  .woof-console-shell-v3
    .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
    .woof-wallet-balance-reference {
    min-height: 0 !important;
    margin-top: 5px !important;
    color: #68758a !important;
    font-size: 12px !important;
  }

  .woof-console-shell-v3
    .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
    .woof-wallet-balance-helper {
    margin-top: 8px !important;
    color: #607087 !important;
    font-size: 11px !important;
    line-height: 1.4 !important;
  }

  .woof-console-shell-v3
    .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
    .woof-wallet-status-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    overflow: visible !important;
    box-sizing: border-box !important;
    height: 158px;
    min-height: 158px;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .woof-console-shell-v3
    .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
    .woof-wallet-status-card,
  .woof-console-shell-v3
    .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
    .woof-wallet-status-card:nth-child(3n),
  .woof-console-shell-v3
    .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
    .woof-wallet-status-card:nth-child(n + 4) {
    grid-template-columns: 38px minmax(0, 1fr) !important;
    gap: 10px !important;
    box-sizing: border-box !important;
    height: 74px !important;
    min-height: 74px !important;
    padding: 9px 11px !important;
    border: 1px solid #e1e8f2 !important;
    border-radius: 11px !important;
    background: linear-gradient(145deg, #ffffff, #fbfdff) !important;
    box-shadow: 0 4px 14px rgba(24, 52, 92, 0.035) !important;
  }

  .woof-console-shell-v3
    .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
    .woof-wallet-status-icon {
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.76) !important;
  }

  .woof-console-shell-v3
    .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
    .woof-wallet-status-icon
    svg {
    width: 22px !important;
    height: 22px !important;
  }

  .woof-console-shell-v3
    .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
    .woof-wallet-status-copy {
    gap: 2px !important;
  }

  .woof-console-shell-v3
    .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
    .woof-wallet-status-card
    small {
    color: #64748b !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
  }

  .woof-console-shell-v3
    .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
    .woof-wallet-status-card
    b {
    color: #14213a !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
    font-weight: 780 !important;
  }

  .woof-console-shell-v3
    .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
    .woof-wallet-status-copy
    em {
    color: #708096 !important;
    font-size: 11px !important;
    line-height: 1.25 !important;
  }
}

@media (min-width: 1361px) {
  .woof-console-shell-v3
    .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
    .woof-wallet-hero-copy {
    flex: 1 1 auto !important;
    overflow: hidden;
  }

  .woof-console-shell-v3
    .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
    .woof-wallet-hero-copy
    p {
    max-width: none !important;
    overflow: hidden;
    white-space: nowrap !important;
    text-overflow: ellipsis;
  }
}

@media (max-width: 900px) {
  .woof-console-shell-v3
    .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
    .woof-wallet-balance-card {
    position: relative !important;
    isolation: isolate;
    overflow: hidden !important;
    background:
      radial-gradient(circle at 92% 78%, rgba(93, 148, 255, 0.12), transparent 24%),
      linear-gradient(145deg, #ffffff 0%, #f7faff 100%) !important;
  }

  .woof-console-shell-v3
    .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
    .woof-wallet-balance-card::after {
    content: '';
    position: absolute;
    right: 12px;
    bottom: 12px;
    width: 64px;
    height: 64px;
    pointer-events: none;
    opacity: 0.72;
    background: url('/assets/stripe-topup-3d-v44.webp') center / contain no-repeat;
  }

  .woof-console-shell-v3
    .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
    .woof-wallet-balance-card
    > .semi-card-body {
    position: relative;
    z-index: 1;
    min-height: 0 !important;
    padding: 16px 76px 16px 16px !important;
  }
}
/* WoofAPI price-tier benefit and details aligned inline v4.5 — 2026-08-30. */
@media (min-width: 901px) {
  .woof-console-shell-v3
    .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
    .woof-wallet-tier-card
    > .semi-card-body {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    grid-template-areas:
      'heading benefit details'
      'progress progress progress'
      'track track track' !important;
    align-items: center !important;
    column-gap: 12px !important;
    row-gap: 6px !important;
  }

  .woof-console-shell-v3
    .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
    .woof-wallet-section-head,
  .woof-console-shell-v3
    .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
    .woof-wallet-tier-summary {
    display: contents !important;
  }

  .woof-console-shell-v3
    .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
    .woof-wallet-section-head
    > div {
    grid-area: heading;
  }

  .woof-console-shell-v3
    .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
    .woof-wallet-section-link {
    grid-area: details;
    justify-self: end;
  }

  .woof-console-shell-v3
    .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
    .woof-wallet-tier-summary
    > span {
    grid-area: progress;
  }

  .woof-console-shell-v3
    .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
    .woof-wallet-tier-summary
    > b {
    grid-area: benefit;
    justify-self: end;
    margin: 0 !important;
    white-space: nowrap;
  }

  .woof-console-shell-v3
    .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
    .woof-wallet-tier-track {
    grid-area: track;
    margin-top: 4px !important;
  }
}
/* WoofAPI balance readability and compact tier header v4.6 — 2026-08-30. */
@media (min-width: 901px) {
  .woof-console-shell-v3
    .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
    .woof-wallet-balance-value {
    font-size: clamp(28px, 1.85vw, 32px) !important;
  }

  .woof-console-shell-v3
    .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
    .woof-wallet-balance-reference {
    display: none !important;
  }

  .woof-console-shell-v3
    .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
    .woof-wallet-balance-helper {
    margin-top: 6px !important;
    font-size: 10.5px !important;
    line-height: 1.35 !important;
  }
}

@media (min-width: 1181px) {
  .woof-console-shell-v3
    .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
    .woof-wallet-tier-card
    > .semi-card-body {
    grid-template-columns: minmax(0, 1fr) auto auto auto !important;
    grid-template-areas:
      'heading progress benefit details'
      'track track track track' !important;
    column-gap: 12px !important;
    row-gap: 2px !important;
    padding: 8px 14px !important;
  }

  .woof-console-shell-v3
    .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
    .woof-wallet-tier-summary
    > span {
    justify-self: end;
    color: #65738a;
    font-size: 11.5px;
    white-space: nowrap;
  }

  .woof-console-shell-v3
    .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
    .woof-wallet-tier-summary
    > b {
    padding: 3px 8px !important;
    font-size: 11.5px !important;
  }

  .woof-console-shell-v3
    .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
    .woof-wallet-section-link {
    min-height: 26px !important;
  }

  .woof-console-shell-v3
    .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
    .woof-wallet-tier-track {
    margin-top: 0 !important;
    padding-bottom: 4px !important;
  }
}
/* WoofAPI unified Stripe workspace pane headers v4.7 — 2026-08-30. */
.woof-console-shell-v3
  .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
  :where(
    .woof-wallet-pane-title,
    .woof-wallet-summary-title,
    .woof-wallet-security-head,
    .woof-wallet-faq-title
  ) {
  box-sizing: border-box !important;
  min-height: 54px !important;
  margin: 0 !important;
}

.woof-console-shell-v3
  .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
  .woof-wallet-pane-title {
  display: grid !important;
  grid-template-columns: 40px minmax(0, 1fr) auto !important;
  align-items: center !important;
  column-gap: 10px !important;
}

.woof-console-shell-v3
  .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
  :where(.woof-wallet-summary-title, .woof-wallet-faq-title) {
  display: grid !important;
  grid-template-columns: 40px minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  align-content: center !important;
  align-items: center !important;
  column-gap: 10px !important;
  row-gap: 1px !important;
}

.woof-console-shell-v3
  .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
  .woof-wallet-security-box
  > .woof-wallet-security-head {
  display: grid !important;
  grid-template-columns: 40px minmax(0, 1fr) !important;
  align-items: center !important;
  column-gap: 10px !important;
}

.woof-console-shell-v3
  .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
  :where(
    .woof-wallet-pane-icon.stripe,
    .woof-wallet-section-icon.summary,
    .woof-wallet-security-icon,
    .woof-wallet-section-icon.faq
  ) {
  display: grid !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  flex: 0 0 40px !important;
  grid-row: 1 / span 2;
  place-items: center !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  border: 1px solid #c9dcf5 !important;
  border-radius: 10px !important;
  background-color: rgba(255, 255, 255, 0.9) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 32px 32px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    0 4px 10px rgba(27, 81, 150, 0.09) !important;
}

.woof-console-shell-v3
  .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
  :where(
    .woof-wallet-pane-icon.stripe,
    .woof-wallet-section-icon.summary,
    .woof-wallet-security-icon,
    .woof-wallet-section-icon.faq
  )
  > img {
  display: block !important;
  width: 32px !important;
  height: 32px !important;
  object-fit: contain !important;
}

.woof-console-shell-v3
  .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
  :where(
    .woof-wallet-pane-icon.stripe,
    .woof-wallet-section-icon.summary,
    .woof-wallet-security-icon,
    .woof-wallet-section-icon.faq
  ):has(> img) {
  background-image: none !important;
}

.woof-console-shell-v3
  .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
  :where(
    .woof-wallet-pane-title b,
    .woof-wallet-summary-title > span:not(.woof-wallet-section-icon),
    .woof-wallet-security-head b,
    .woof-wallet-faq-title > span:not(.woof-wallet-section-icon)
  ) {
  color: #102f59 !important;
  font-size: 15.5px !important;
  font-weight: 800 !important;
  line-height: 1.28 !important;
  letter-spacing: 0 !important;
}

.woof-console-shell-v3
  .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
  :where(
    .woof-wallet-pane-title > div,
    .woof-wallet-security-head > :last-child
  ) {
  display: flex !important;
  min-width: 0 !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 1px !important;
}

.woof-console-shell-v3
  .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
  :where(.woof-wallet-pane-title small, .woof-wallet-security-head small),
.woof-console-shell-v3
  .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
  :where(.woof-wallet-summary-title, .woof-wallet-faq-title)::after {
  color: #536b89 !important;
  font-size: 11.5px !important;
  font-style: normal !important;
  font-weight: 570 !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
}

.woof-console-shell-v3
  .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
  .woof-wallet-summary-title::after {
  grid-column: 2;
  grid-row: 2;
  content: '确认本次支付金额与到账余额';
}

.woof-console-shell-v3
  .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
  .woof-wallet-faq-title::after {
  grid-column: 2;
  grid-row: 2;
  content: '充值、到账与支付说明';
}

.woof-console-shell-v3
  .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
  .woof-wallet-security-points {
  display: grid !important;
  gap: 0 !important;
  margin-top: 4px !important;
  border-top: 1px solid #d6e3f3;
}

.woof-console-shell-v3
  .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
  .woof-wallet-security-points
  > span {
  display: flex !important;
  min-height: 25px !important;
  align-items: center !important;
  box-sizing: border-box !important;
  padding: 3px 0 !important;
  border-bottom: 1px solid #d6e3f3;
  color: #183b62 !important;
  font-size: 12.5px !important;
  font-weight: 660 !important;
  line-height: 1.4 !important;
}

.woof-console-shell-v3
  .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
  .woof-wallet-security-points
  > span
  svg {
  width: 13px !important;
  height: 13px !important;
  flex: 0 0 13px !important;
  margin: 0 6px 0 0 !important;
  color: #1773d6 !important;
}

.woof-console-shell-v3
  .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
  .woof-wallet-faq-list
  details {
  border-bottom-color: #d6e3f3 !important;
}

.woof-console-shell-v3
  .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
  .woof-wallet-faq-list
  details
  > summary {
  color: #243f61 !important;
  font-size: 12.5px !important;
  font-weight: 610 !important;
}

.woof-console-shell-v3
  .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
  .woof-wallet-security-pane
  .woof-wallet-payment-brand-row {
  gap: 6px !important;
  padding-top: 7px !important;
}

.woof-console-shell-v3
  .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
  .woof-wallet-security-pane
  .woof-wallet-payment-brand-row
  > * {
  box-sizing: border-box !important;
  min-height: 29px !important;
  height: 29px !important;
  border: 1px solid #c7d8ee !important;
  border-radius: 6px !important;
  background: #fff !important;
  box-shadow: 0 2px 6px rgba(32, 74, 126, 0.05) !important;
  font-size: 10.5px !important;
  font-weight: 760 !important;
}

.woof-console-shell-v3
  .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
  .woof-wallet-payment-brand-row
  > .stripe {
  border-color: #bcc4ff !important;
  background: #fff !important;
  color: #635bff !important;
  box-shadow:
    inset 0 0 0 1px rgba(99, 91, 255, 0.05),
    0 2px 6px rgba(63, 56, 185, 0.08) !important;
  font-size: 12px !important;
}

@media (min-width: 1381px) {
  .woof-console-shell-v3
    .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
    .woof-wallet-pane-title,
  .woof-console-shell-v3
    .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
    .woof-wallet-summary-title,
  .woof-console-shell-v3
    .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
    .woof-wallet-security-box
    > .woof-wallet-security-head,
  .woof-console-shell-v3
    .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
    .woof-wallet-faq-title {
    height: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;
    flex: 0 0 54px !important;
    overflow: hidden !important;
  }

  .woof-console-shell-v3
    .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
    .woof-wallet-pane-title
    small {
    max-width: none !important;
    color: #536b89 !important;
    font-size: 11.5px !important;
    font-weight: 570 !important;
    line-height: 1.35 !important;
    white-space: nowrap !important;
  }

  .woof-console-shell-v3
    .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
    .woof-wallet-security-head
    b {
    font-size: 15.5px !important;
    font-weight: 800 !important;
    line-height: 1.28 !important;
  }

  .woof-console-shell-v3
    .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
    .woof-wallet-security-head
    small {
    color: #536b89 !important;
    font-size: 11.5px !important;
    font-weight: 570 !important;
    line-height: 1.35 !important;
    white-space: nowrap !important;
  }

  .woof-console-shell-v3
    .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
    .woof-wallet-security-pane
    .woof-wallet-security-box {
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .woof-console-shell-v3
    .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
    .woof-wallet-faq-pane {
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
}

@media (max-width: 640px) {
  .woof-console-shell-v3
    .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
    :where(
      .woof-wallet-pane-title,
      .woof-wallet-summary-title,
      .woof-wallet-security-head,
      .woof-wallet-faq-title
    ) {
    min-height: 52px !important;
  }

  .woof-console-shell-v3
    .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
    .woof-wallet-pane-title {
    grid-template-columns: 40px minmax(0, 1fr) !important;
  }

  .woof-console-shell-v3
    .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
    .woof-wallet-preferred-badge {
    grid-column: 2;
    justify-self: start;
    margin-top: 3px !important;
  }
}
/* WoofAPI responsive Stripe pane header lock v4.8 — 2026-08-30. */
.woof-console-shell-v3
  .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
  .woof-wallet-pane-title
  b,
.woof-console-shell-v3
  .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
  .woof-wallet-summary-title
  > span:not(.woof-wallet-section-icon),
.woof-console-shell-v3
  .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
  .woof-wallet-security-head
  b,
.woof-console-shell-v3
  .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
  .woof-wallet-faq-title
  > span:not(.woof-wallet-section-icon) {
  color: #102f59 !important;
  font-size: 15.5px !important;
  font-weight: 800 !important;
  line-height: 1.28 !important;
  letter-spacing: 0 !important;
}

.woof-console-shell-v3
  .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
  .woof-wallet-pane-title
  small,
.woof-console-shell-v3
  .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
  .woof-wallet-security-head
  small {
  color: #536b89 !important;
  font-size: 11.5px !important;
  font-weight: 570 !important;
  line-height: 1.35 !important;
}

@media (min-width: 641px) and (max-width: 1380px) {
  .woof-console-shell-v3
    .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
    .woof-wallet-pane-title,
  .woof-console-shell-v3
    .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
    .woof-wallet-summary-title,
  .woof-console-shell-v3
    .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
    .woof-wallet-security-box
    > .woof-wallet-security-head,
  .woof-console-shell-v3
    .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
    .woof-wallet-faq-title {
    height: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;
    flex: 0 0 54px !important;
    overflow: hidden !important;
  }

  .woof-console-shell-v3
    .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
    .woof-wallet-pane-title
    small,
  .woof-console-shell-v3
    .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
    .woof-wallet-security-head
    small {
    white-space: nowrap !important;
  }
}

@media (max-width: 640px) {
  .woof-console-shell-v3
    .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
    .woof-wallet-pane-title,
  .woof-console-shell-v3
    .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
    .woof-wallet-summary-title,
  .woof-console-shell-v3
    .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
    .woof-wallet-security-box
    > .woof-wallet-security-head,
  .woof-console-shell-v3
    .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
    .woof-wallet-faq-title {
    height: 64px !important;
    min-height: 64px !important;
    max-height: 64px !important;
    flex: 0 0 64px !important;
    overflow: hidden !important;
  }

  .woof-console-shell-v3
    .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
    .woof-wallet-pane-title {
    grid-template-columns: 40px minmax(0, 1fr) !important;
  }

  .woof-console-shell-v3
    .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
    .woof-wallet-preferred-badge {
    display: none !important;
  }
}
/* WoofAPI centered payment brand icons and redeem wording v4.9 — 2026-08-30. */
.woof-console-shell-v3
  .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
  .woof-wallet-security-pane
  .woof-wallet-payment-brand-row
  > * {
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  text-indent: -9999px !important;
  background-color: #fff !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  box-shadow: 0 2px 6px rgba(32, 74, 126, 0.05) !important;
}

.woof-console-shell-v3
  .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
  .woof-wallet-payment-brand-row
  > .stripe {
  background-image: url('/assets/payment-brand-stripe.svg') !important;
  background-size: 18px 18px !important;
}

.woof-console-shell-v3
  .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
  .woof-wallet-payment-brand-row
  > .visa {
  background-image: url('/assets/payment-brand-visa.svg') !important;
  background-size: 30px 18px !important;
}

.woof-console-shell-v3
  .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
  .woof-wallet-payment-brand-row
  > .mastercard {
  background-image: url('/assets/payment-brand-mastercard.svg') !important;
  background-size: 23px 23px !important;
}

.woof-console-shell-v3
  .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
  .woof-wallet-payment-brand-row
  > .mastercard
  > i {
  display: none !important;
}

.woof-console-shell-v3
  .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
  .woof-wallet-payment-brand-row
  > .amex {
  background-color: #fff !important;
  background-image: url('/assets/payment-brand-american-express.svg') !important;
  background-size: 24px 24px !important;
}

.woof-console-shell-v3
  .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
  .woof-wallet-payment-brand-row
  > span:not([class]) {
  background-image: url('/assets/payment-brand-alipay.svg') !important;
  background-size: 22px 22px !important;
}

.woof-console-shell-v3
  .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
  .woof-wallet-payment-brand-row
  > .apple {
  background-image: url('/assets/payment-brand-apple-pay.svg') !important;
  background-size: 34px 20px !important;
}

.woof-console-shell-v3
  .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
  .woof-wallet-redeem-inline
  .woof-wallet-redeem-row
  > .semi-button
  .semi-button-content {
  display: flex !important;
  width: 100% !important;
  height: 100% !important;
  align-items: center !important;
  justify-content: center !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
}

.woof-console-shell-v3
  .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
  .woof-wallet-redeem-inline
  .woof-wallet-redeem-row
  > .semi-button
  .semi-button-content::after {
  color: #b45309;
  content: '兑换';
  font-size: 13px;
  font-weight: 780;
  line-height: 1;
}
/* WoofAPI hidden FAQ scrollbar while retaining scroll behavior v5.0 — 2026-08-30. */
.woof-console-shell-v3
  .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
  :where(.woof-wallet-faq-pane, .woof-wallet-faq-list) {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

.woof-console-shell-v3
  .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
  :where(.woof-wallet-faq-pane, .woof-wallet-faq-list)::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}
/* WoofAPI exact pane-title baseline and labeled payment brands v5.1 — 2026-08-30. */
.woof-console-shell-v3
  .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
  :where(
    .woof-wallet-pane-title,
    .woof-wallet-summary-title,
    .woof-wallet-security-head,
    .woof-wallet-faq-title
  ) {
  align-content: center !important;
  align-items: center !important;
  row-gap: 1px !important;
}

.woof-console-shell-v3
  .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
  :where(.woof-wallet-summary-title, .woof-wallet-faq-title) {
  grid-template-rows: 20px 16px !important;
}

.woof-console-shell-v3
  .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
  :where(.woof-wallet-pane-title > div, .woof-wallet-security-head > span:last-child) {
  display: grid !important;
  min-width: 0 !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: 20px 16px !important;
  align-content: center !important;
  justify-content: stretch !important;
  row-gap: 1px !important;
}

.woof-console-shell-v3
  .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
  :where(
    .woof-wallet-pane-title b,
    .woof-wallet-summary-title > span:not(.woof-wallet-section-icon),
    .woof-wallet-security-head b,
    .woof-wallet-faq-title > span:not(.woof-wallet-section-icon)
  ) {
  display: flex !important;
  height: 20px !important;
  min-height: 20px !important;
  align-items: center !important;
  box-sizing: border-box !important;
  font-size: 15.5px !important;
  font-weight: 800 !important;
  line-height: 20px !important;
}

.woof-console-shell-v3
  .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
  :where(.woof-wallet-pane-title small, .woof-wallet-security-head small),
.woof-console-shell-v3
  .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
  :where(.woof-wallet-summary-title, .woof-wallet-faq-title)::after {
  display: flex !important;
  height: 16px !important;
  min-height: 16px !important;
  align-items: center !important;
  box-sizing: border-box !important;
  font-size: 11.5px !important;
  font-weight: 570 !important;
  line-height: 16px !important;
}

.woof-console-shell-v3
  .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
  :where(
    .woof-wallet-pane-icon.stripe,
    .woof-wallet-section-icon.summary,
    .woof-wallet-security-icon,
    .woof-wallet-section-icon.faq
  ) {
  grid-row: 1 / span 2 !important;
  align-self: center !important;
}

.woof-console-shell-v3
  .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
  .woof-wallet-preferred-badge {
  grid-row: 1 / span 2 !important;
  align-self: center !important;
}

.woof-console-shell-v3
  .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
  .woof-wallet-payment-brand-row {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 6px !important;
  padding-top: 6px !important;
}

.woof-console-shell-v3
  .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
  .woof-wallet-payment-brand-row
  > * {
  position: relative !important;
  display: block !important;
  min-width: 0 !important;
  height: 40px !important;
  min-height: 40px !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 8px !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  text-indent: 0 !important;
  background-position: center 4px !important;
  background-repeat: no-repeat !important;
}

.woof-console-shell-v3
  .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
  .woof-wallet-payment-brand-row
  > *::after {
  position: absolute !important;
  right: 2px !important;
  bottom: 4px !important;
  left: 2px !important;
  display: block !important;
  overflow: hidden !important;
  color: #405b7a !important;
  font-size: 9px !important;
  font-weight: 720 !important;
  line-height: 10px !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  text-indent: 0 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.woof-console-shell-v3 .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2'] .woof-wallet-payment-brand-row > .stripe {
  background-position: center 4px !important;
  background-size: 17px 17px !important;
}
.woof-console-shell-v3 .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2'] .woof-wallet-payment-brand-row > .stripe::after {
  content: 'Stripe' !important;
}

.woof-console-shell-v3 .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2'] .woof-wallet-payment-brand-row > .visa {
  background-position: center 6px !important;
  background-size: 27px 14px !important;
}
.woof-console-shell-v3 .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2'] .woof-wallet-payment-brand-row > .visa::after {
  content: 'Visa' !important;
}

.woof-console-shell-v3 .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2'] .woof-wallet-payment-brand-row > .mastercard {
  background-position: center 3px !important;
  background-size: 20px 20px !important;
}
.woof-console-shell-v3 .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2'] .woof-wallet-payment-brand-row > .mastercard::after {
  content: 'Mastercard' !important;
}

.woof-console-shell-v3 .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2'] .woof-wallet-payment-brand-row > .amex {
  background-position: center 4px !important;
  background-size: 18px 18px !important;
}
.woof-console-shell-v3 .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2'] .woof-wallet-payment-brand-row > .amex::after {
  content: 'AMEX' !important;
}

.woof-console-shell-v3 .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2'] .woof-wallet-payment-brand-row > span:not([class]) {
  background-position: center 4px !important;
  background-size: 18px 18px !important;
}
.woof-console-shell-v3 .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2'] .woof-wallet-payment-brand-row > span:not([class])::after {
  content: '支付宝' !important;
}

.woof-console-shell-v3 .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2'] .woof-wallet-payment-brand-row > .apple {
  background-position: center 6px !important;
  background-size: 27px 14px !important;
}
.woof-console-shell-v3 .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2'] .woof-wallet-payment-brand-row > .apple::after {
  content: 'Apple Pay' !important;
}

@media (max-width: 640px) {
  .woof-console-shell-v3
    .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
    .woof-wallet-payment-brand-row
    > * {
    height: 42px !important;
    min-height: 42px !important;
  }
}

@media (min-width: 1381px) {
  html body .woof-console-shell-v3 .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2'] .woof-wallet-amount-pane .woof-wallet-pane-title > div > b,
  html body .woof-console-shell-v3 .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2'] .woof-wallet-amount-pane .woof-wallet-pane-title > div > small,
  html body .woof-console-shell-v3 .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2'] .woof-wallet-security-pane .woof-wallet-security-box .woof-wallet-security-head > span:last-child > b,
  html body .woof-console-shell-v3 .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2'] .woof-wallet-security-pane .woof-wallet-security-box .woof-wallet-security-head > span:last-child > small {
    position: static !important;
    margin: 0 !important;
    padding: 0 !important;
    translate: none !important;
    transform: none !important;
  }

  html body .woof-console-shell-v3 .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2'] .woof-wallet-amount-pane .woof-wallet-pane-title,
  html body .woof-console-shell-v3 .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2'] .woof-wallet-summary-pane .woof-wallet-summary-title,
  html body .woof-console-shell-v3 .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2'] .woof-wallet-security-pane .woof-wallet-security-box .woof-wallet-security-head,
  html body .woof-console-shell-v3 .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2'] .woof-wallet-faq-pane .woof-wallet-faq-title {
    position: relative !important;
    display: block !important;
    height: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;
  }

  html body .woof-console-shell-v3 .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2'] .woof-wallet-amount-pane .woof-wallet-pane-title > .woof-wallet-pane-icon.stripe,
  html body .woof-console-shell-v3 .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2'] .woof-wallet-security-pane .woof-wallet-security-box .woof-wallet-security-head > .woof-wallet-security-icon {
    position: absolute !important;
    inset: 7px auto auto 0 !important;
    margin: 0 !important;
    translate: none !important;
    transform: none !important;
  }

  html body .woof-console-shell-v3 .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2'] .woof-wallet-amount-pane .woof-wallet-pane-title > div {
    position: absolute !important;
    inset: 8px 92px auto 50px !important;
    width: auto !important;
    height: 37px !important;
    margin: 0 !important;
    padding: 0 !important;
    translate: none !important;
    transform: none !important;
  }

  html body .woof-console-shell-v3 .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2'] .woof-wallet-security-pane .woof-wallet-security-box .woof-wallet-security-head > span:last-child {
    position: absolute !important;
    inset: 8px 0 auto 50px !important;
    width: auto !important;
    height: 37px !important;
    margin: 0 !important;
    padding: 0 !important;
    translate: none !important;
    transform: none !important;
  }

  html body .woof-console-shell-v3 .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2'] .woof-wallet-pane-title > .woof-wallet-pane-icon.stripe,
  html body .woof-console-shell-v3 .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2'] .woof-wallet-summary-title > .woof-wallet-section-icon.summary,
  html body .woof-console-shell-v3 .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2'] .woof-wallet-security-head > .woof-wallet-security-icon,
  html body .woof-console-shell-v3 .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2'] .woof-wallet-faq-title > .woof-wallet-section-icon.faq {
    position: absolute !important;
    top: 7px !important;
    left: 0 !important;
    margin: 0 !important;
    transform: none !important;
  }

  html body .woof-console-shell-v3 .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2'] .woof-wallet-pane-title > div,
  html body .woof-console-shell-v3 .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2'] .woof-wallet-security-head > span:last-child {
    position: absolute !important;
    top: 8px !important;
    right: 0 !important;
    left: 50px !important;
    width: auto !important;
    height: 37px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
  }

  html body .woof-console-shell-v3 .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2'] .woof-wallet-pane-title > div {
    right: 92px !important;
  }

  html body .woof-console-shell-v3 .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2'] .woof-wallet-amount-pane,
  html body .woof-console-shell-v3 .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2'] .woof-wallet-summary-pane,
  html body .woof-console-shell-v3 .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2'] .woof-wallet-security-pane,
  html body .woof-console-shell-v3 .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2'] .woof-wallet-faq-pane {
    padding-top: 9px !important;
  }

  html
    body
    .woof-console-shell-v3
    .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
    :where(
      .woof-wallet-amount-pane,
      .woof-wallet-summary-pane,
      .woof-wallet-security-pane,
      .woof-wallet-faq-pane
    ) {
    padding-top: 9px !important;
  }

  .woof-console-shell-v3
    .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
    :where(
      .woof-wallet-amount-pane,
      .woof-wallet-summary-pane,
      .woof-wallet-security-pane,
      .woof-wallet-faq-pane
    ) {
    padding-top: 9px !important;
  }

  .woof-console-shell-v3
    .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
    :where(
      .woof-wallet-pane-title,
      .woof-wallet-summary-title,
      .woof-wallet-security-head,
      .woof-wallet-faq-title
    ) {
    position: relative !important;
    display: block !important;
    height: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;
  }

  .woof-console-shell-v3
    .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
    :where(
      .woof-wallet-pane-icon.stripe,
      .woof-wallet-section-icon.summary,
      .woof-wallet-security-icon,
      .woof-wallet-section-icon.faq
    ) {
    position: absolute !important;
    top: 7px !important;
    left: 0 !important;
    margin: 0 !important;
  }

  .woof-console-shell-v3
    .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
    :where(.woof-wallet-pane-title > div, .woof-wallet-security-head > span:last-child) {
    position: absolute !important;
    top: 8px !important;
    right: 0 !important;
    left: 50px !important;
    display: grid !important;
    height: 37px !important;
    grid-template-rows: 20px 16px !important;
    align-content: start !important;
  }

  .woof-console-shell-v3
    .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
    .woof-wallet-pane-title
    > div {
    right: 92px !important;
  }

  .woof-console-shell-v3
    .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
    :where(.woof-wallet-summary-title, .woof-wallet-faq-title)
    > span:not(.woof-wallet-section-icon) {
    position: absolute !important;
    top: 8px !important;
    right: 0 !important;
    left: 50px !important;
  }

  .woof-console-shell-v3
    .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
    :where(.woof-wallet-summary-title, .woof-wallet-faq-title)::after {
    position: absolute !important;
    top: 29px !important;
    right: 0 !important;
    left: 50px !important;
  }

  .woof-console-shell-v3
    .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
    .woof-wallet-preferred-badge {
    position: absolute !important;
    top: 15px !important;
    right: 0 !important;
    margin: 0 !important;
  }
}

html
  body
  .woof-console-shell-v3
  .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
  .woof-wallet-security-pane
  .woof-wallet-payment-brand-row
  > * {
  display: block !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  text-indent: 0 !important;
}

@media (max-width: 640px) {
  html
    body
    .woof-console-shell-v3
    .woof-topup-page[data-woof-wallet-ui='billing-center-layout-v2']
    .woof-wallet-security-pane
    .woof-wallet-payment-brand-row
    > * {
    height: 42px !important;
    min-height: 42px !important;
  }
}