/* GreatTech PPOB final responsive polish v198
   This file is intentionally loaded last to prevent older page-specific CSS
   from overriding the current Android/iOS app layout. */

:root {
  --ppob-final-primary: #5B4BF2;
  --ppob-final-blue: #20A7D8;
  --ppob-final-orange: #FF6624;
  --ppob-final-text: #171B2E;
  --ppob-final-muted: #7F8AA3;
  --ppob-final-soft: #F3F6FA;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body.ppob-storefront,
body.saldo-page,
body.riwayat-page,
body.catatan-page {
  overflow-x: hidden !important;
}

body.ppob-storefront *,
body.saldo-page *,
body.riwayat-page *,
body.catatan-page * {
  text-rendering: geometricPrecision;
}

body.ppob-storefront .ppob-native-brand strong {
  font-size: clamp(20px, 5.8vw, 25px) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.04em !important;
}

body.ppob-storefront .ppob-promo-chip {
  min-height: 34px !important;
  padding: 0 13px !important;
  font-size: 12px !important;
}

body.ppob-storefront .ppob-native-wallet {
  min-height: 112px !important;
  padding: 14px 16px 13px !important;
}

body.ppob-storefront .ppob-native-wallet-main span,
body.ppob-storefront .ppob-native-wallet-main small {
  line-height: 1.15 !important;
}

body.ppob-storefront .ppob-native-wallet-main span {
  font-size: 12px !important;
}

body.ppob-storefront .ppob-native-wallet-main small {
  font-size: 11px !important;
}

html body.ppob-storefront #ppobBalanceValue {
  font-size: clamp(23px, 6.4vw, 29px) !important;
  line-height: 1 !important;
  letter-spacing: -0.035em !important;
}

body.ppob-storefront .ppob-native-point {
  min-height: 29px !important;
  padding: 0 12px !important;
  font-size: 11px !important;
}

body.ppob-storefront .ppob-native-actions a span {
  width: 31px !important;
  height: 31px !important;
}

body.ppob-storefront .ppob-native-actions a small {
  font-size: 9.4px !important;
  line-height: 1.12 !important;
}

body.ppob-storefront .ppob-native-alert strong {
  font-size: 12.2px !important;
  line-height: 1.18 !important;
}

body.ppob-storefront .ppob-native-alert small,
body.ppob-storefront .ppob-native-alert a {
  font-size: 10.8px !important;
  line-height: 1.25 !important;
}

body.ppob-storefront .ppob-native-search input,
body.ppob-storefront .ppob-native-search .input {
  font-size: 12.5px !important;
}

body.ppob-storefront .ppob-native-menu .ppob-native-menu-item.ppob-shortcut-button span,
body.ppob-storefront .ppob-native-menu .ppob-native-menu-item.ppob-shortcut-button:is(.is-active, .active, :hover, :focus) span {
  width: 42px !important;
  height: 42px !important;
  border-radius: 15px !important;
}

body.ppob-storefront .ppob-native-menu .ppob-native-menu-item.ppob-shortcut-button small,
body.ppob-storefront .ppob-native-menu-item small {
  max-width: 68px !important;
  font-size: 9.2px !important;
  line-height: 1.15 !important;
  letter-spacing: -0.02em !important;
  text-align: center !important;
}

body.ppob-storefront .ppob-category-route-hint,
body.ppob-storefront .ppob-provider-helper {
  max-width: 310px !important;
  margin-inline: auto !important;
  font-size: 12.5px !important;
  line-height: 1.35 !important;
  text-align: center !important;
}

body.ppob-storefront .ppob-product-grid::before,
body.ppob-storefront .ppob-catalog-heading h2 {
  font-size: 19px !important;
  line-height: 1.2 !important;
  text-align: center !important;
}

body.ppob-storefront .ppob-visible-subfilter button,
body.ppob-storefront .ppob-provider-card {
  min-height: 62px !important;
}

body.ppob-storefront .ppob-visible-subfilter button strong,
body.ppob-storefront .ppob-provider-card strong,
body.ppob-storefront .ppob-product-card h3,
body.ppob-storefront .ppob-product-grid .ppob-product-card h3 {
  font-size: 12.5px !important;
  line-height: 1.25 !important;
  letter-spacing: -0.02em !important;
}

body.ppob-storefront .ppob-visible-subfilter button small,
body.ppob-storefront .ppob-provider-card small,
body.ppob-storefront .ppob-product-card p,
body.ppob-storefront .ppob-product-grid .ppob-product-card p {
  font-size: 10.6px !important;
  line-height: 1.2 !important;
}

body.ppob-storefront .ppob-section-head h2 {
  font-size: 18px !important;
  line-height: 1.15 !important;
}

body.ppob-storefront .ppob-section-head span,
body.ppob-storefront .ppob-section-head a,
body.ppob-storefront .ppob-empty-state {
  font-size: 11px !important;
  line-height: 1.35 !important;
}

body.ppob-storefront .ppob-native-bottom-nav a small,
body.saldo-page .ppob-native-bottom-nav a small,
body.riwayat-page .ppob-native-bottom-nav a small,
body.catatan-page .ppob-native-bottom-nav a small {
  font-size: 9px !important;
  line-height: 1.1 !important;
}

body.saldo-page .saldo-shell {
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: visible !important;
}

body.saldo-page .saldo-header,
body.saldo-page .saldo-sub-header {
  min-height: 132px !important;
  padding: calc(22px + env(safe-area-inset-top, 0px)) 24px 48px !important;
}

body.saldo-page .saldo-header h1,
body.saldo-page .saldo-sub-header h1 {
  font-size: clamp(34px, 9vw, 42px) !important;
  line-height: 1 !important;
  letter-spacing: -0.055em !important;
}

body.saldo-page .saldo-card {
  margin-top: -38px !important;
  margin-bottom: 22px !important;
}

body.saldo-page .saldo-balance-row {
  gap: 16px !important;
  padding: 20px 20px 18px !important;
}

body.saldo-page .saldo-wallet-icon {
  width: 38px !important;
  height: 38px !important;
}

body.saldo-page .saldo-balance-row span {
  font-size: 20px !important;
  line-height: 1.08 !important;
}

body.saldo-page .saldo-balance-row strong {
  font-size: clamp(30px, 8vw, 36px) !important;
  line-height: 1 !important;
}

body.saldo-page.is-ppob-guest .saldo-card::after {
  min-height: 26px !important;
  padding: 0 11px !important;
  font-size: 10.5px !important;
}

body.saldo-page .saldo-card-actions button {
  min-height: 56px !important;
  font-size: 20px !important;
  line-height: 1.12 !important;
}

body.saldo-page .saldo-tabs {
  height: 52px !important;
  padding-inline: 24px !important;
}

body.saldo-page .saldo-tabs button {
  font-size: 14px !important;
  letter-spacing: .14em !important;
}

body.saldo-page .saldo-empty {
  min-height: 260px !important;
  gap: 14px !important;
  padding: 34px 24px !important;
}

body.saldo-page .saldo-empty p {
  font-size: 19px !important;
  line-height: 1.3 !important;
}

body.saldo-page .saldo-empty button {
  width: 60px !important;
  height: 60px !important;
}

body.riwayat-page .riwayat-header {
  min-height: 126px !important;
  padding: calc(22px + env(safe-area-inset-top, 0px)) 22px 24px !important;
}

body.riwayat-page .riwayat-header h1 {
  font-size: clamp(32px, 9vw, 42px) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.045em !important;
}

body.riwayat-page .riwayat-tabs {
  height: 50px !important;
  gap: 26px !important;
}

body.riwayat-page .riwayat-tabs button {
  font-size: 13px !important;
  letter-spacing: .14em !important;
}

body.riwayat-page .riwayat-item-title {
  font-size: 19px !important;
  line-height: 1.14 !important;
}

body.riwayat-page .riwayat-item-subtitle,
body.riwayat-page .riwayat-item-date,
body.riwayat-page .riwayat-item-price {
  font-size: 15px !important;
  line-height: 1.2 !important;
}

body.riwayat-page .riwayat-status-pill {
  font-size: 12px !important;
}

body.riwayat-page .riwayat-empty p {
  font-size: 16px !important;
}

body.catatan-page .catatan-shell {
  overflow-x: hidden !important;
}

body.catatan-page .catatan-header {
  min-height: 154px !important;
  padding: calc(22px + env(safe-area-inset-top, 0px)) 22px 58px !important;
}

body.catatan-page .catatan-header h1 {
  font-size: clamp(30px, 8.8vw, 38px) !important;
  line-height: 1.06 !important;
  letter-spacing: -0.045em !important;
}

body.catatan-page .catatan-create-panel {
  margin-top: -44px !important;
  padding: 28px 20px !important;
}

body.catatan-page .catatan-primary-btn {
  min-height: 52px !important;
  width: min(100%, 316px) !important;
  font-size: clamp(18px, 5vw, 22px) !important;
  line-height: 1.14 !important;
  gap: 10px !important;
}

body.catatan-page .catatan-primary-btn svg {
  flex-basis: 19px !important;
  width: 19px !important;
  height: 19px !important;
}

body.catatan-page .catatan-empty {
  min-height: calc(100dvh - 380px) !important;
  padding: 32px 22px !important;
}

body.catatan-page .catatan-empty svg {
  max-width: 138px !important;
}

body.catatan-page .catatan-empty h2 {
  font-size: 20px !important;
  line-height: 1.2 !important;
}

body.catatan-page .catatan-empty p {
  max-width: 280px !important;
  font-size: 16px !important;
  line-height: 1.35 !important;
}

@media (max-width: 380px) {
  body.ppob-storefront .ppob-native-menu .ppob-native-menu-item.ppob-shortcut-button small {
    font-size: 8.8px !important;
  }

  body.saldo-page .saldo-card-actions button {
    font-size: 18px !important;
  }
}

/* v199 layout polish: unified app width, cleaner spacing, smaller type */
:root {
  --ppob-app-width: min(100vw, 430px);
  --ppob-app-inner: min(calc(100vw - 28px), 400px);
}

body.ppob-storefront {
  background:
    radial-gradient(circle at 18% 8%, rgba(91, 75, 242, .11), transparent 26%),
    radial-gradient(circle at 90% 8%, rgba(32, 167, 216, .13), transparent 24%),
    #F3F6FA !important;
}

body.ppob-storefront .ppob-native-app-home,
body.ppob-storefront .ppob-store-section-first,
body.ppob-storefront .ppob-recent-transactions,
body.saldo-page .saldo-shell,
body.riwayat-page .riwayat-shell,
body.catatan-page .catatan-shell {
  width: var(--ppob-app-width) !important;
  max-width: 430px !important;
  margin-inline: auto !important;
}

body.ppob-storefront .ppob-native-app-home,
body.saldo-page .saldo-shell,
body.riwayat-page .riwayat-shell,
body.catatan-page .catatan-shell {
  box-shadow: 0 26px 80px rgba(31, 41, 55, .10) !important;
}

body.ppob-storefront .ppob-store-section-first,
body.ppob-storefront .ppob-recent-transactions {
  background: #F3F6FA !important;
}

body.ppob-storefront .ppob-native-top {
  padding: calc(22px + env(safe-area-inset-top, 0px)) 18px 64px !important;
}

body.ppob-storefront .ppob-native-brand {
  min-height: 38px !important;
  align-items: center !important;
}

body.ppob-storefront .ppob-native-wallet {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-areas:
    "copy badge"
    "actions actions" !important;
  align-items: start !important;
  gap: 12px 14px !important;
  min-height: 126px !important;
  padding: 15px 16px 14px !important;
  overflow: hidden !important;
}

body.ppob-storefront .ppob-native-wallet-main {
  grid-area: copy !important;
  min-width: 0 !important;
}

body.ppob-storefront .ppob-native-point {
  grid-area: badge !important;
  justify-self: end !important;
}

body.ppob-storefront .ppob-native-actions {
  grid-area: actions !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: end !important;
  gap: 8px !important;
  width: 100% !important;
  margin: 0 !important;
}

body.ppob-storefront .ppob-native-actions a {
  min-width: 0 !important;
  display: grid !important;
  justify-items: center !important;
  gap: 5px !important;
  text-align: center !important;
}

body.ppob-storefront .ppob-native-actions a small {
  max-width: 70px !important;
  white-space: normal !important;
}

body.ppob-storefront .ppob-native-sheet {
  width: var(--ppob-app-inner) !important;
  margin: -38px auto 0 !important;
  padding: 14px 14px 18px !important;
  border-radius: 24px !important;
}

body.ppob-storefront .ppob-native-alert {
  grid-template-columns: 40px minmax(0, 1fr) auto 26px !important;
  gap: 9px !important;
  padding: 12px !important;
  border-radius: 16px !important;
}

body.ppob-storefront .ppob-native-alert > span {
  width: 38px !important;
  height: 38px !important;
}

body.ppob-storefront .ppob-native-alert a {
  min-height: 28px !important;
  padding-inline: 10px !important;
  border-radius: 999px !important;
}

body.ppob-storefront .ppob-native-search {
  min-height: 44px !important;
  margin-top: 12px !important;
  border-radius: 15px !important;
}

body.ppob-storefront .ppob-native-menu {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px 10px !important;
  margin-top: 14px !important;
}

body.ppob-storefront .ppob-native-menu .ppob-native-menu-item.ppob-shortcut-button {
  min-width: 0 !important;
  gap: 6px !important;
}

body.ppob-storefront .ppob-banner-slider {
  width: var(--ppob-app-inner) !important;
  margin: 20px auto 0 !important;
}

body.ppob-storefront .ppob-banner-photo {
  border-radius: 15px !important;
}

body.ppob-storefront .ppob-category-route-hint,
body.ppob-storefront .ppob-provider-helper {
  margin-top: 16px !important;
  margin-bottom: 4px !important;
  font-weight: 700 !important;
  color: var(--ppob-final-muted) !important;
}

body.ppob-storefront .ppob-catalog-heading,
body.ppob-storefront .ppob-product-grid,
body.ppob-storefront .ppob-section-head,
body.ppob-storefront .ppob-recent-list {
  width: var(--ppob-app-inner) !important;
  margin-inline: auto !important;
}

body.ppob-storefront .ppob-visible-subfilter {
  width: var(--ppob-app-inner) !important;
  margin: 18px auto 0 !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

body.ppob-storefront .ppob-provider-card,
body.ppob-storefront .ppob-visible-subfilter button {
  border: 0 !important;
  box-shadow: 0 10px 30px rgba(15, 23, 42, .06) !important;
  border-radius: 18px !important;
}

body.ppob-storefront .ppob-product-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

body.ppob-storefront .ppob-product-grid .ppob-product-card.ppob-product-card,
body.ppob-storefront .ppob-product-grid .ppob-product-card {
  min-height: 96px !important;
  border: 0 !important;
  border-radius: 18px !important;
  box-shadow: 0 10px 30px rgba(15, 23, 42, .06) !important;
}

body.ppob-storefront .ppob-section-head {
  margin-top: 26px !important;
}

body.ppob-storefront .ppob-native-bottom-nav,
body.saldo-page .ppob-native-bottom-nav,
body.riwayat-page .ppob-native-bottom-nav,
body.catatan-page .ppob-native-bottom-nav {
  width: var(--ppob-app-width) !important;
  max-width: 430px !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  border-radius: 24px 24px 0 0 !important;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
  box-shadow: 0 -12px 40px rgba(15, 23, 42, .08) !important;
}

body.ppob-storefront .ppob-native-bottom-nav a,
body.saldo-page .ppob-native-bottom-nav a,
body.riwayat-page .ppob-native-bottom-nav a,
body.catatan-page .ppob-native-bottom-nav a {
  gap: 4px !important;
}

body.ppob-storefront .ppob-native-bottom-nav a span,
body.saldo-page .ppob-native-bottom-nav a span,
body.riwayat-page .ppob-native-bottom-nav a span,
body.catatan-page .ppob-native-bottom-nav a span {
  width: 22px !important;
  height: 22px !important;
}

body.saldo-page .saldo-shell,
body.riwayat-page .riwayat-shell,
body.catatan-page .catatan-shell {
  min-height: calc(100dvh - 74px) !important;
  padding-bottom: 86px !important;
  background: #fff !important;
  overflow: visible !important;
}

body.saldo-page .saldo-header,
body.saldo-page .saldo-sub-header,
body.riwayat-page .riwayat-header,
body.catatan-page .catatan-header {
  background: linear-gradient(135deg, var(--ppob-final-primary) 0%, var(--ppob-final-blue) 100%) !important;
}

body.saldo-page .saldo-header h1,
body.saldo-page .saldo-sub-header h1 {
  font-size: clamp(30px, 8vw, 38px) !important;
}

body.riwayat-page .riwayat-header h1 {
  font-size: clamp(30px, 8vw, 38px) !important;
}

body.catatan-page .catatan-header h1 {
  font-size: clamp(29px, 8vw, 36px) !important;
  max-width: 280px !important;
  margin-inline: auto !important;
}

body.saldo-page .saldo-balance-row strong {
  font-size: clamp(28px, 7.4vw, 34px) !important;
}

body.saldo-page .saldo-card-actions button {
  font-size: 17px !important;
}

body.saldo-page .saldo-empty p {
  max-width: 270px !important;
  margin-inline: auto !important;
  font-size: 17px !important;
}

body.riwayat-page .riwayat-tabs {
  overflow-x: auto !important;
  justify-content: flex-start !important;
  padding-inline: 20px !important;
  scrollbar-width: none !important;
}

body.riwayat-page .riwayat-tabs::-webkit-scrollbar {
  display: none !important;
}

body.riwayat-page .riwayat-tabs button {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}

body.riwayat-page .riwayat-item-title {
  font-size: 18px !important;
}

body.riwayat-page .riwayat-item-subtitle,
body.riwayat-page .riwayat-item-date,
body.riwayat-page .riwayat-item-price {
  font-size: 14px !important;
}

body.catatan-page .catatan-create-panel {
  width: var(--ppob-app-inner) !important;
  margin-inline: auto !important;
  border-radius: 16px !important;
}

body.catatan-page .catatan-primary-btn {
  border-radius: 12px !important;
  box-shadow: 0 12px 28px rgba(255, 102, 36, .18) !important;
}

body.catatan-page .catatan-empty {
  min-height: 330px !important;
}

body.catatan-page .catatan-empty h2 {
  font-size: 18px !important;
}

body.catatan-page .catatan-empty p {
  font-size: 15px !important;
}

@media (min-width: 768px) {
  body.ppob-storefront .ppob-native-app-home,
  body.saldo-page .saldo-shell,
  body.riwayat-page .riwayat-shell,
  body.catatan-page .catatan-shell {
    border-radius: 0 0 34px 34px !important;
  }

  body.ppob-storefront .ppob-store-section-first,
  body.ppob-storefront .ppob-recent-transactions {
    min-height: auto !important;
  }

  body.ppob-storefront .ppob-native-bottom-nav,
  body.saldo-page .ppob-native-bottom-nav,
  body.riwayat-page .ppob-native-bottom-nav,
  body.catatan-page .ppob-native-bottom-nav {
    bottom: 0 !important;
  }
}

/* v200 bottom navigation: only the selected page is active */
body.ppob-storefront .ppob-native-bottom-nav,
body.saldo-page .ppob-native-bottom-nav,
body.riwayat-page .ppob-native-bottom-nav,
body.catatan-page .ppob-native-bottom-nav {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  align-items: center !important;
  gap: 0 !important;
  min-height: 72px !important;
  background: rgba(255, 255, 255, .98) !important;
  border: 0 !important;
  border-top: 1px solid rgba(148, 163, 184, .12) !important;
  border-radius: 24px 24px 0 0 !important;
  overflow: hidden !important;
}

body.ppob-storefront .ppob-native-bottom-nav a,
body.saldo-page .ppob-native-bottom-nav a,
body.riwayat-page .ppob-native-bottom-nav a,
body.catatan-page .ppob-native-bottom-nav a,
body.ppob-storefront .ppob-native-bottom-nav .is-main,
body.saldo-page .ppob-native-bottom-nav .is-main,
body.riwayat-page .ppob-native-bottom-nav .is-main,
body.catatan-page .ppob-native-bottom-nav .is-main {
  min-width: 0 !important;
  min-height: 52px !important;
  display: grid !important;
  place-items: center !important;
  align-content: center !important;
  gap: 4px !important;
  padding: 4px 2px !important;
  color: #8B95A8 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  text-decoration: none !important;
}

body.ppob-storefront .ppob-native-bottom-nav a span,
body.saldo-page .ppob-native-bottom-nav a span,
body.riwayat-page .ppob-native-bottom-nav a span,
body.catatan-page .ppob-native-bottom-nav a span,
body.ppob-storefront .ppob-native-bottom-nav .is-main span,
body.saldo-page .ppob-native-bottom-nav .is-main span,
body.riwayat-page .ppob-native-bottom-nav .is-main span,
body.catatan-page .ppob-native-bottom-nav .is-main span {
  width: 22px !important;
  height: 22px !important;
  display: grid !important;
  place-items: center !important;
  color: currentColor !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

body.ppob-storefront .ppob-native-bottom-nav a svg,
body.saldo-page .ppob-native-bottom-nav a svg,
body.riwayat-page .ppob-native-bottom-nav a svg,
body.catatan-page .ppob-native-bottom-nav a svg {
  width: 19px !important;
  height: 19px !important;
  fill: currentColor !important;
}

body.ppob-storefront .ppob-native-bottom-nav a small,
body.saldo-page .ppob-native-bottom-nav a small,
body.riwayat-page .ppob-native-bottom-nav a small,
body.catatan-page .ppob-native-bottom-nav a small {
  max-width: 100% !important;
  color: currentColor !important;
  font-size: 8.8px !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.02em !important;
  white-space: nowrap !important;
}

body.ppob-storefront .ppob-native-bottom-nav a.is-active,
body.saldo-page .ppob-native-bottom-nav a.is-active,
body.riwayat-page .ppob-native-bottom-nav a.is-active,
body.catatan-page .ppob-native-bottom-nav a.is-active,
body.ppob-storefront .ppob-native-bottom-nav a.is-active small,
body.saldo-page .ppob-native-bottom-nav a.is-active small,
body.riwayat-page .ppob-native-bottom-nav a.is-active small,
body.catatan-page .ppob-native-bottom-nav a.is-active small,
body.ppob-storefront .ppob-native-bottom-nav a.is-active span,
body.saldo-page .ppob-native-bottom-nav a.is-active span,
body.riwayat-page .ppob-native-bottom-nav a.is-active span,
body.catatan-page .ppob-native-bottom-nav a.is-active span {
  color: var(--ppob-final-primary) !important;
}

body.ppob-storefront .ppob-native-bottom-nav a.is-active::before,
body.saldo-page .ppob-native-bottom-nav a.is-active::before,
body.riwayat-page .ppob-native-bottom-nav a.is-active::before,
body.catatan-page .ppob-native-bottom-nav a.is-active::before,
body.ppob-storefront .ppob-native-bottom-nav .is-main::before,
body.saldo-page .ppob-native-bottom-nav .is-main::before,
body.riwayat-page .ppob-native-bottom-nav .is-main::before,
body.catatan-page .ppob-native-bottom-nav .is-main::before,
body.ppob-storefront .ppob-native-bottom-nav .is-main::after,
body.saldo-page .ppob-native-bottom-nav .is-main::after,
body.riwayat-page .ppob-native-bottom-nav .is-main::after,
body.catatan-page .ppob-native-bottom-nav .is-main::after {
  display: none !important;
  content: none !important;
}

body.ppob-storefront .ppob-native-bottom-nav a:focus,
body.saldo-page .ppob-native-bottom-nav a:focus,
body.riwayat-page .ppob-native-bottom-nav a:focus,
body.catatan-page .ppob-native-bottom-nav a:focus,
body.ppob-storefront .ppob-native-bottom-nav a:hover,
body.saldo-page .ppob-native-bottom-nav a:hover,
body.riwayat-page .ppob-native-bottom-nav a:hover,
body.catatan-page .ppob-native-bottom-nav a:hover {
  background: transparent !important;
  color: inherit !important;
}

body.ppob-storefront .ppob-native-bottom-nav a.is-active:hover,
body.saldo-page .ppob-native-bottom-nav a.is-active:hover,
body.riwayat-page .ppob-native-bottom-nav a.is-active:hover,
body.catatan-page .ppob-native-bottom-nav a.is-active:hover,
body.ppob-storefront .ppob-native-bottom-nav a.is-active:focus,
body.saldo-page .ppob-native-bottom-nav a.is-active:focus,
body.riwayat-page .ppob-native-bottom-nav a.is-active:focus,
body.catatan-page .ppob-native-bottom-nav a.is-active:focus {
  color: var(--ppob-final-primary) !important;
}

/* v202 bottom navigation precision: same scale on PPOB, riwayat, transaksi, and catatan */
html body.ppob-storefront .ppob-native-bottom-nav,
html body.saldo-page .ppob-native-bottom-nav,
html body.riwayat-page .ppob-native-bottom-nav,
html body.catatan-page .ppob-native-bottom-nav {
  width: min(100%, 430px) !important;
  max-width: 430px !important;
  min-height: 66px !important;
  height: 66px !important;
  padding: 6px 10px calc(6px + env(safe-area-inset-bottom, 0px)) !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  align-items: center !important;
  justify-items: stretch !important;
  gap: 0 !important;
}

html body.ppob-storefront .ppob-native-bottom-nav a,
html body.saldo-page .ppob-native-bottom-nav a,
html body.riwayat-page .ppob-native-bottom-nav a,
html body.catatan-page .ppob-native-bottom-nav a {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 50px !important;
  height: 50px !important;
  padding: 3px 1px !important;
  display: grid !important;
  grid-template-rows: 22px 13px !important;
  align-items: center !important;
  justify-items: center !important;
  align-content: center !important;
  gap: 3px !important;
  color: #8B95A8 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

html body.ppob-storefront .ppob-native-bottom-nav a span,
html body.saldo-page .ppob-native-bottom-nav a span,
html body.riwayat-page .ppob-native-bottom-nav a span,
html body.catatan-page .ppob-native-bottom-nav a span {
  width: 21px !important;
  height: 21px !important;
  min-width: 21px !important;
  min-height: 21px !important;
  display: grid !important;
  place-items: center !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

html body.ppob-storefront .ppob-native-bottom-nav a svg,
html body.saldo-page .ppob-native-bottom-nav a svg,
html body.riwayat-page .ppob-native-bottom-nav a svg,
html body.catatan-page .ppob-native-bottom-nav a svg {
  width: 17px !important;
  height: 17px !important;
  display: block !important;
  fill: currentColor !important;
}

html body.ppob-storefront .ppob-native-bottom-nav a small,
html body.saldo-page .ppob-native-bottom-nav a small,
html body.riwayat-page .ppob-native-bottom-nav a small,
html body.catatan-page .ppob-native-bottom-nav a small {
  display: block !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: currentColor !important;
  font-size: 8px !important;
  font-weight: 800 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.03em !important;
  transform: none !important;
}

html body.ppob-storefront .ppob-native-bottom-nav a.is-active,
html body.saldo-page .ppob-native-bottom-nav a.is-active,
html body.riwayat-page .ppob-native-bottom-nav a.is-active,
html body.catatan-page .ppob-native-bottom-nav a.is-active {
  color: var(--ppob-final-primary) !important;
  background: transparent !important;
  transform: none !important;
}

/* v205 strict bottom nav normalization: PPOB uses the same navbar as riwayat/transaksi/catatan */
html body.ppob-storefront > .ppob-native-bottom-nav,
html body.saldo-page > .ppob-native-bottom-nav,
html body.riwayat-page > .ppob-native-bottom-nav,
html body.catatan-page > .ppob-native-bottom-nav,
html body.checkout-page > .ppob-native-bottom-nav,
html body.checkout-status-page > .ppob-native-bottom-nav {
  position: fixed !important;
  z-index: 1100 !important;
  left: 50% !important;
  right: auto !important;
  bottom: 0 !important;
  transform: translateX(-50%) !important;
  width: min(100%, 430px) !important;
  max-width: 430px !important;
  height: calc(66px + env(safe-area-inset-bottom, 0px)) !important;
  min-height: calc(66px + env(safe-area-inset-bottom, 0px)) !important;
  padding: 6px 10px calc(6px + env(safe-area-inset-bottom, 0px)) !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  align-items: center !important;
  justify-items: stretch !important;
  gap: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-top: 1px solid rgba(148, 163, 184, .12) !important;
  border-radius: 24px 24px 0 0 !important;
  background: rgba(255, 255, 255, .98) !important;
  box-shadow: 0 -10px 28px rgba(23, 26, 43, .08) !important;
  backdrop-filter: blur(14px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(150%) !important;
}

html body.ppob-storefront > .ppob-native-bottom-nav a,
html body.saldo-page > .ppob-native-bottom-nav a,
html body.riwayat-page > .ppob-native-bottom-nav a,
html body.catatan-page > .ppob-native-bottom-nav a,
html body.checkout-page > .ppob-native-bottom-nav a,
html body.checkout-status-page > .ppob-native-bottom-nav a {
  width: 100% !important;
  min-width: 0 !important;
  height: 50px !important;
  min-height: 50px !important;
  margin: 0 !important;
  padding: 3px 1px !important;
  display: grid !important;
  grid-template-rows: 22px 13px !important;
  align-items: center !important;
  justify-items: center !important;
  align-content: center !important;
  justify-content: center !important;
  gap: 3px !important;
  color: #8B95A8 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  text-decoration: none !important;
  line-height: 1 !important;
}

html body.ppob-storefront > .ppob-native-bottom-nav a span,
html body.saldo-page > .ppob-native-bottom-nav a span,
html body.riwayat-page > .ppob-native-bottom-nav a span,
html body.catatan-page > .ppob-native-bottom-nav a span,
html body.checkout-page > .ppob-native-bottom-nav a span,
html body.checkout-status-page > .ppob-native-bottom-nav a span {
  width: 21px !important;
  height: 21px !important;
  min-width: 21px !important;
  min-height: 21px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  color: currentColor !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  font-size: 0 !important;
}

html body.ppob-storefront > .ppob-native-bottom-nav a svg,
html body.saldo-page > .ppob-native-bottom-nav a svg,
html body.riwayat-page > .ppob-native-bottom-nav a svg,
html body.catatan-page > .ppob-native-bottom-nav a svg,
html body.checkout-page > .ppob-native-bottom-nav a svg,
html body.checkout-status-page > .ppob-native-bottom-nav a svg {
  width: 17px !important;
  height: 17px !important;
  display: block !important;
  fill: currentColor !important;
}

html body.ppob-storefront > .ppob-native-bottom-nav a small,
html body.saldo-page > .ppob-native-bottom-nav a small,
html body.riwayat-page > .ppob-native-bottom-nav a small,
html body.catatan-page > .ppob-native-bottom-nav a small,
html body.checkout-page > .ppob-native-bottom-nav a small,
html body.checkout-status-page > .ppob-native-bottom-nav a small {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: currentColor !important;
  font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  font-size: 8px !important;
  font-weight: 800 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.03em !important;
  transform: none !important;
}

html body.ppob-storefront > .ppob-native-bottom-nav a.is-active,
html body.saldo-page > .ppob-native-bottom-nav a.is-active,
html body.riwayat-page > .ppob-native-bottom-nav a.is-active,
html body.catatan-page > .ppob-native-bottom-nav a.is-active,
html body.checkout-page > .ppob-native-bottom-nav a.is-active,
html body.checkout-status-page > .ppob-native-bottom-nav a.is-active,
html body.ppob-storefront > .ppob-native-bottom-nav a.is-active span,
html body.saldo-page > .ppob-native-bottom-nav a.is-active span,
html body.riwayat-page > .ppob-native-bottom-nav a.is-active span,
html body.catatan-page > .ppob-native-bottom-nav a.is-active span,
html body.checkout-page > .ppob-native-bottom-nav a.is-active span,
html body.checkout-status-page > .ppob-native-bottom-nav a.is-active span,
html body.ppob-storefront > .ppob-native-bottom-nav a.is-active small,
html body.saldo-page > .ppob-native-bottom-nav a.is-active small,
html body.riwayat-page > .ppob-native-bottom-nav a.is-active small,
html body.catatan-page > .ppob-native-bottom-nav a.is-active small,
html body.checkout-page > .ppob-native-bottom-nav a.is-active small,
html body.checkout-status-page > .ppob-native-bottom-nav a.is-active small {
  color: var(--ppob-final-primary) !important;
}

html body.ppob-storefront > .ppob-native-bottom-nav a::before,
html body.ppob-storefront > .ppob-native-bottom-nav a::after,
html body.saldo-page > .ppob-native-bottom-nav a::before,
html body.saldo-page > .ppob-native-bottom-nav a::after,
html body.riwayat-page > .ppob-native-bottom-nav a::before,
html body.riwayat-page > .ppob-native-bottom-nav a::after,
html body.catatan-page > .ppob-native-bottom-nav a::before,
html body.catatan-page > .ppob-native-bottom-nav a::after {
  display: none !important;
  content: none !important;
}

/* v204 native top unification: one visual language for all PPOB app pages */
:root {
  --ppob-native-top-gradient:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, .18) 0 70px, transparent 72px),
    radial-gradient(circle at 86% 10%, rgba(255, 107, 34, .26) 0 62px, transparent 64px),
    linear-gradient(135deg, #5142D9 0%, #3568E8 56%, #11B8C5 100%);
  --ppob-native-header-pad-x: clamp(16px, 4.4vw, 22px);
}

html body.ppob-storefront .ppob-native-top,
html body.saldo-page .saldo-header,
html body.saldo-page .saldo-sub-header,
html body.riwayat-page .riwayat-header,
html body.catatan-page .catatan-header {
  background: var(--ppob-native-top-gradient) !important;
  color: #FFFFFF !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}

html body.ppob-storefront .ppob-native-top {
  min-height: 318px !important;
  padding: calc(22px + env(safe-area-inset-top, 0px)) var(--ppob-native-header-pad-x) 66px !important;
}

html body.ppob-storefront .ppob-native-brand {
  min-height: 38px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-bottom: 16px !important;
}

html body.ppob-storefront .ppob-native-brand strong {
  display: block !important;
  max-width: 185px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: clamp(20px, 5.4vw, 24px) !important;
  line-height: 1.08 !important;
}

html body.ppob-storefront .ppob-app-header-actions {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex: 0 0 auto !important;
}

html body.ppob-storefront .ppob-native-wallet {
  min-height: 124px !important;
  padding: 16px 18px 14px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-rows: auto 1fr !important;
  align-items: start !important;
  gap: 10px 12px !important;
}

html body.ppob-storefront .ppob-native-wallet-main {
  min-width: 0 !important;
}

html body.ppob-storefront .ppob-native-wallet-main span,
html body.ppob-storefront .ppob-native-wallet-main small {
  display: block !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body.ppob-storefront #ppobBalanceValue {
  display: block !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: clamp(24px, 6.2vw, 30px) !important;
  line-height: 1.04 !important;
}

html body.ppob-storefront .ppob-native-actions {
  grid-column: 1 / -1 !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: 2px !important;
}

html body.ppob-storefront .ppob-native-actions a {
  min-width: 0 !important;
  display: grid !important;
  justify-items: center !important;
  gap: 4px !important;
}

html body.ppob-storefront .ppob-native-actions a span {
  width: 31px !important;
  height: 31px !important;
  min-width: 31px !important;
  min-height: 31px !important;
}

html body.ppob-storefront .ppob-native-actions a small {
  max-width: 86px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  text-align: center !important;
}

html body.saldo-page .saldo-header,
html body.saldo-page .saldo-sub-header,
html body.riwayat-page .riwayat-header,
html body.catatan-page .catatan-header {
  padding-left: var(--ppob-native-header-pad-x) !important;
  padding-right: var(--ppob-native-header-pad-x) !important;
}

html body.saldo-page .saldo-header h1,
html body.saldo-page .saldo-sub-header h1,
html body.riwayat-page .riwayat-header h1,
html body.catatan-page .catatan-header h1 {
  font-size: clamp(30px, 8.2vw, 38px) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.045em !important;
  font-weight: 800 !important;
}

@media (max-width: 380px) {
  html body.ppob-storefront .ppob-native-top {
    min-height: 304px !important;
    padding-inline: 14px !important;
    padding-bottom: 58px !important;
  }

  html body.ppob-storefront .ppob-native-wallet {
    min-height: 116px !important;
    padding: 14px 14px 12px !important;
  }

html body.ppob-storefront .ppob-native-brand strong {
  max-width: 150px !important;
  font-size: 20px !important;
  }

  html body.ppob-storefront .ppob-promo-chip {
    min-height: 31px !important;
    padding-inline: 10px !important;
  }
}

/* v206 unified app polish: consistent frame, colors, typography, and checkout layout */
:root {
  --ppob-app-page-bg: #F3F6FB;
  --ppob-app-surface: #FFFFFF;
  --ppob-app-muted-surface: #F7F9FC;
  --ppob-app-border: rgba(148, 163, 184, .18);
  --ppob-app-text: #171A2B;
  --ppob-app-muted: #7D879D;
}

html,
body.ppob-storefront,
body.saldo-page,
body.riwayat-page,
body.catatan-page {
  background:
    radial-gradient(circle at 14% 0%, rgba(101, 84, 232, .08), transparent 240px),
    radial-gradient(circle at 88% 4%, rgba(17, 184, 197, .10), transparent 260px),
    var(--ppob-app-page-bg) !important;
  color: var(--ppob-app-text) !important;
  font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

html body.ppob-storefront :is(.navbar, .footer, .floating-wa, .back-to-top),
html body.ppob-storefront.ppob-dedicated-checkout-page .navbar,
html body.ppob-storefront.checkout-status-page .navbar {
  display: none !important;
}

html body.ppob-storefront,
html body.saldo-page,
html body.riwayat-page,
html body.catatan-page {
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow-x: hidden !important;
}

html body.ppob-storefront .ppob-native-app-home,
html body.saldo-page .saldo-shell,
html body.riwayat-page .riwayat-shell,
html body.catatan-page .catatan-shell,
html body.ppob-storefront.ppob-dedicated-checkout-page .ppob-order-hero-section,
html body.ppob-storefront.checkout-status-page .ppob-order-hero-section {
  width: min(100%, 430px) !important;
  max-width: 430px !important;
  margin: 0 auto !important;
  border-radius: 0 0 30px 30px !important;
  overflow: hidden !important;
}

html body.ppob-storefront .ppob-store-section-first,
html body.ppob-storefront .ppob-recent-transactions,
html body.ppob-storefront .ppob-product-footer {
  width: min(100%, 430px) !important;
  max-width: 430px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

html body.ppob-storefront .section,
html body.ppob-storefront .container,
html body.ppob-storefront.ppob-dedicated-checkout-page .checkout-section,
html body.ppob-storefront.checkout-status-page .checkout-section {
  box-sizing: border-box !important;
}

html body.ppob-storefront .container,
html body.ppob-storefront.ppob-dedicated-checkout-page .checkout-section > .container,
html body.ppob-storefront.checkout-status-page .checkout-section > .container {
  width: 100% !important;
  max-width: 100% !important;
  padding-left: 14px !important;
  padding-right: 14px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

html body.ppob-storefront.ppob-dedicated-checkout-page,
html body.ppob-storefront.checkout-status-page {
  min-height: 100dvh !important;
  padding-bottom: calc(82px + env(safe-area-inset-bottom, 0px)) !important;
}

html body.ppob-storefront.ppob-dedicated-checkout-page .ppob-order-hero-section,
html body.ppob-storefront.checkout-status-page .ppob-order-hero-section {
  min-height: calc(100dvh - 74px) !important;
  padding: calc(18px + env(safe-area-inset-top, 0px)) 0 calc(88px + env(safe-area-inset-bottom, 0px)) !important;
  background: var(--ppob-app-page-bg) !important;
  box-shadow: 0 24px 90px rgba(15, 23, 42, .08) !important;
}

html body.ppob-storefront.ppob-dedicated-checkout-page .ppob-layout,
html body.ppob-storefront.checkout-status-page .ppob-layout,
html body.ppob-storefront.checkout-status-page .checkout-status-layout {
  width: 100% !important;
  max-width: 100% !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
  align-items: start !important;
}

html body.ppob-storefront.ppob-dedicated-checkout-page :is(.ppob-panel, .ppob-summary-card, .checkout-selected-product-card),
html body.ppob-storefront.checkout-status-page :is(.ppob-panel, .checkout-status-card, .checkout-status-detail-card, .checkout-status-payment-panel, .checkout-status-admin-card, .checkout-status-side-card) {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto 12px !important;
  padding: 18px !important;
  border: 0 !important;
  border-radius: 22px !important;
  background: var(--ppob-app-surface) !important;
  box-shadow: 0 14px 34px rgba(15, 23, 42, .07) !important;
}

html body.ppob-storefront.ppob-dedicated-checkout-page .ppob-panel-head,
html body.ppob-storefront.checkout-status-page .ppob-panel-head {
  margin: 0 0 14px !important;
  padding: 0 0 14px !important;
  border-bottom: 1px solid var(--ppob-app-border) !important;
  text-align: left !important;
}

html body.ppob-storefront.ppob-dedicated-checkout-page .ppob-panel-head h3,
html body.ppob-storefront.checkout-status-page .ppob-panel-head h3,
html body.ppob-storefront.ppob-dedicated-checkout-page .checkout-form-section-head h4,
html body.ppob-storefront.checkout-status-page .checkout-status-card h4 {
  margin: 0 0 6px !important;
  color: var(--ppob-app-text) !important;
  font-size: clamp(18px, 5.2vw, 22px) !important;
  line-height: 1.18 !important;
  letter-spacing: -0.035em !important;
  font-weight: 800 !important;
}

html body.ppob-storefront.ppob-dedicated-checkout-page :is(.ppob-panel-head p, .checkout-form-section-head p, .checkout-hint, .ppob-summary-card p),
html body.ppob-storefront.checkout-status-page :is(.ppob-panel-head p, .checkout-status-card p, .checkout-hint, .checkout-status-lookup-head p) {
  color: var(--ppob-app-muted) !important;
  font-size: 12.5px !important;
  line-height: 1.55 !important;
  text-align: left !important;
}

html body.ppob-storefront.ppob-dedicated-checkout-page :is(.form-group, .checkout-form-section),
html body.ppob-storefront.checkout-status-page :is(.form-group, .checkout-status-lookup-grid) {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 8px !important;
}

html body.ppob-storefront.ppob-dedicated-checkout-page label,
html body.ppob-storefront.checkout-status-page label {
  color: var(--ppob-app-text) !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
}

html body.ppob-storefront.ppob-dedicated-checkout-page :is(input, select, textarea, .input),
html body.ppob-storefront.checkout-status-page :is(input, select, textarea, .input) {
  width: 100% !important;
  min-height: 46px !important;
  padding: 0 14px !important;
  border: 1px solid #D8E0EC !important;
  border-radius: 14px !important;
  background: #F8FAFD !important;
  color: var(--ppob-app-text) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  outline: none !important;
  box-shadow: none !important;
}

html body.ppob-storefront.ppob-dedicated-checkout-page textarea,
html body.ppob-storefront.checkout-status-page textarea {
  min-height: 92px !important;
  padding-top: 12px !important;
}

html body.ppob-storefront.ppob-dedicated-checkout-page :is(.btn, button[type='submit'], .checkout-submit-button),
html body.ppob-storefront.checkout-status-page :is(.btn, button[type='submit'], .checkout-status-action-button) {
  min-height: 46px !important;
  border-radius: 999px !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  text-align: center !important;
}

html body.ppob-storefront.ppob-dedicated-checkout-page :is(.btn-primary, button[type='submit'], .checkout-submit-button),
html body.ppob-storefront.checkout-status-page :is(.btn-primary, button[type='submit']) {
  border-color: transparent !important;
  background: #FF6B22 !important;
  color: #FFFFFF !important;
  box-shadow: 0 14px 28px rgba(255, 107, 34, .20) !important;
}

html body.ppob-storefront.ppob-dedicated-checkout-page .btn-outline,
html body.ppob-storefront.checkout-status-page .btn-outline {
  border: 1px solid #D8E0EC !important;
  background: #FFFFFF !important;
  color: var(--ppob-app-text) !important;
  box-shadow: none !important;
}

html body.ppob-storefront.ppob-dedicated-checkout-page .checkout-selected-product-price,
html body.ppob-storefront.checkout-status-page .checkout-status-detail-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  min-width: 0 !important;
}

html body.ppob-storefront.ppob-dedicated-checkout-page :is(.checkout-selected-product-card h3, .checkout-selected-product-card p, .checkout-selected-product-price strong),
html body.ppob-storefront.checkout-status-page :is(.checkout-status-detail-row strong, .checkout-status-detail-row span) {
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
}

@media (min-width: 768px) {
  html body.ppob-storefront .ppob-native-app-home,
  html body.saldo-page .saldo-shell,
  html body.riwayat-page .riwayat-shell,
  html body.catatan-page .catatan-shell,
  html body.ppob-storefront.ppob-dedicated-checkout-page .ppob-order-hero-section,
  html body.ppob-storefront.checkout-status-page .ppob-order-hero-section {
    border-radius: 0 0 34px 34px !important;
  }
}

@media (max-width: 380px) {
  html body.ppob-storefront .container,
  html body.ppob-storefront.ppob-dedicated-checkout-page .checkout-section > .container,
  html body.ppob-storefront.checkout-status-page .checkout-section > .container {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  html body.ppob-storefront.ppob-dedicated-checkout-page :is(.ppob-panel, .ppob-summary-card, .checkout-selected-product-card),
  html body.ppob-storefront.checkout-status-page :is(.ppob-panel, .checkout-status-card, .checkout-status-detail-card, .checkout-status-payment-panel, .checkout-status-admin-card, .checkout-status-side-card) {
    padding: 15px !important;
    border-radius: 18px !important;
  }
}

/* v207 product page alignment: same centered frame, gradient, and bottom nav as PPOB app */
html body.ppob-storefront.ppob-product-page {
  display: flex !important;
  justify-content: center !important;
  align-items: flex-start !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 100dvh !important;
  padding: 0 !important;
  padding-bottom: calc(82px + env(safe-area-inset-bottom, 0px)) !important;
  margin: 0 !important;
  overflow-x: hidden !important;
  background:
    radial-gradient(circle at 14% 0%, rgba(101, 84, 232, .08), transparent 240px),
    radial-gradient(circle at 88% 4%, rgba(17, 184, 197, .10), transparent 260px),
    var(--ppob-app-page-bg) !important;
}

html body.ppob-storefront.ppob-product-page .ppob-product-shell {
  width: min(100%, 430px) !important;
  max-width: 430px !important;
  min-width: 0 !important;
  min-height: calc(100dvh - 74px) !important;
  margin: 0 auto !important;
  padding-bottom: calc(98px + env(safe-area-inset-bottom, 0px)) !important;
  border-radius: 0 0 30px 30px !important;
  background: var(--ppob-app-page-bg) !important;
  box-shadow: 0 24px 90px rgba(15, 23, 42, .08) !important;
  transform: none !important;
}

html body.ppob-storefront.ppob-product-page .ppob-product-header {
  background: var(--ppob-native-top-gradient) !important;
}

html body.ppob-storefront.ppob-product-page :is(.ppob-product-input-card, .ppob-product-nominal-card, .ppob-product-sheet-card) {
  border: 0 !important;
  background: #FFFFFF !important;
}

html body.ppob-storefront.ppob-product-page .ppob-product-type-icon,
html body.ppob-storefront.ppob-product-page .ppob-product-nominal-card span,
html body.ppob-storefront.ppob-product-page .ppob-product-sheet-action strong {
  color: #FF6B22 !important;
}

html body.ppob-storefront.ppob-product-page .ppob-product-sheet-action button {
  border-radius: 999px !important;
  background: #FF6B22 !important;
  box-shadow: 0 14px 28px rgba(255, 107, 34, .20) !important;
}

html body.ppob-storefront.ppob-product-page > .ppob-native-bottom-nav {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  bottom: 0 !important;
  z-index: 2400 !important;
  width: min(100%, 430px) !important;
  max-width: 430px !important;
  height: calc(66px + env(safe-area-inset-bottom, 0px)) !important;
  min-height: calc(66px + env(safe-area-inset-bottom, 0px)) !important;
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px)) !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  align-items: center !important;
  gap: 0 !important;
  border: 0 !important;
  border-radius: 22px 22px 0 0 !important;
  background: rgba(255, 255, 255, .98) !important;
  box-shadow: 0 -14px 34px rgba(15, 23, 42, .08) !important;
  transform: translateX(-50%) !important;
}

html body.ppob-storefront.ppob-product-page > .ppob-native-bottom-nav a {
  min-width: 0 !important;
  min-height: 48px !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-rows: 22px 13px !important;
  justify-items: center !important;
  align-content: center !important;
  gap: 3px !important;
  color: #8A94A8 !important;
  text-decoration: none !important;
}

html body.ppob-storefront.ppob-product-page > .ppob-native-bottom-nav a span {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: currentColor !important;
  box-shadow: none !important;
  display: grid !important;
  place-items: center !important;
}

html body.ppob-storefront.ppob-product-page > .ppob-native-bottom-nav a svg {
  width: 17px !important;
  height: 17px !important;
  fill: currentColor !important;
}

html body.ppob-storefront.ppob-product-page > .ppob-native-bottom-nav a small {
  max-width: 56px !important;
  color: currentColor !important;
  font-size: 8px !important;
  font-weight: 800 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.01em !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

html body.ppob-storefront.ppob-product-page > .ppob-native-bottom-nav a.is-active,
html body.ppob-storefront.ppob-product-page > .ppob-native-bottom-nav a.is-active span,
html body.ppob-storefront.ppob-product-page > .ppob-native-bottom-nav a.is-active small {
  color: #5B4AE8 !important;
}

html body.ppob-storefront.ppob-product-page > .ppob-native-bottom-nav a::before,
html body.ppob-storefront.ppob-product-page > .ppob-native-bottom-nav a::after {
  display: none !important;
  content: none !important;
}

@media (max-width: 380px) {
  html body.ppob-storefront.ppob-product-page .ppob-product-shell {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}

/* v211 canonical PPOB app UI: one frame, one color system, one bottom nav */
:root {
  --ppob-canonical-width: 430px;
  --ppob-canonical-bg: #F3F6FB;
  --ppob-canonical-surface: #FFFFFF;
  --ppob-canonical-text: #171B2E;
  --ppob-canonical-muted: #7D879B;
  --ppob-canonical-accent: #FF6B22;
  --ppob-canonical-primary: #5B4AE8;
  --ppob-canonical-gradient: linear-gradient(135deg, #5B4AE8 0%, #2F7BEF 55%, #12B8C7 100%);
  --ppob-canonical-shadow: 0 24px 70px rgba(15, 23, 42, .10);
  --ppob-canonical-soft-shadow: 0 12px 34px rgba(15, 23, 42, .08);
}

html {
  background: var(--ppob-canonical-bg) !important;
}

html body.ppob-storefront,
html body.ppob-storefront.saldo-page,
html body.ppob-storefront.riwayat-page,
html body.ppob-storefront.catatan-page,
html body.ppob-storefront.ppob-product-page,
html body.ppob-storefront.ppob-dedicated-checkout-page,
html body.ppob-storefront.checkout-status-page {
  min-height: 100dvh !important;
  margin: 0 !important;
  padding: 0 0 calc(86px + env(safe-area-inset-bottom, 0px)) !important;
  display: block !important;
  overflow-x: hidden !important;
  background:
    radial-gradient(circle at 28% 0%, rgba(91, 74, 232, .14), transparent 28%),
    radial-gradient(circle at 74% 8%, rgba(18, 184, 199, .12), transparent 27%),
    var(--ppob-canonical-bg) !important;
  color: var(--ppob-canonical-text) !important;
  font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

html body.ppob-storefront *,
html body.ppob-storefront *::before,
html body.ppob-storefront *::after {
  box-sizing: border-box !important;
}

html body.ppob-storefront img,
html body.ppob-storefront svg {
  max-width: 100%;
}

html body.ppob-storefront .navbar,
html body.ppob-storefront .footer,
html body.ppob-storefront .back-to-top {
  display: none !important;
}

html body.ppob-storefront .ppob-native-app-home,
html body.ppob-storefront.ppob-product-page .ppob-product-shell,
html body.ppob-storefront.saldo-page .saldo-shell,
html body.ppob-storefront.riwayat-page .riwayat-shell,
html body.ppob-storefront.catatan-page .catatan-shell,
html body.ppob-storefront.ppob-dedicated-checkout-page .ppob-order-hero-section,
html body.ppob-storefront.checkout-status-page .ppob-order-hero-section {
  width: min(100vw, var(--ppob-canonical-width)) !important;
  max-width: var(--ppob-canonical-width) !important;
  min-width: 0 !important;
  min-height: calc(100dvh - 86px) !important;
  margin: 0 auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  overflow-x: hidden !important;
  background: var(--ppob-canonical-bg) !important;
  box-shadow: var(--ppob-canonical-shadow) !important;
  transform: none !important;
}

html body.ppob-storefront .ppob-store-products,
html body.ppob-storefront .ppob-inline-order,
html body.ppob-storefront .ppob-inline-checkout-section,
html body.ppob-storefront .ppob-store-guide {
  width: min(100vw, var(--ppob-canonical-width)) !important;
  max-width: var(--ppob-canonical-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  overflow-x: hidden !important;
  background: var(--ppob-canonical-bg) !important;
}

html body.ppob-storefront .container {
  width: 100% !important;
  max-width: var(--ppob-canonical-width) !important;
  padding-left: 18px !important;
  padding-right: 18px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

html body.ppob-storefront .ppob-native-top,
html body.ppob-storefront.ppob-product-page .ppob-product-header,
html body.ppob-storefront.saldo-page .saldo-header,
html body.ppob-storefront.saldo-page .saldo-sub-header,
html body.ppob-storefront.riwayat-page .riwayat-header,
html body.ppob-storefront.riwayat-page .riwayat-detail-header,
html body.ppob-storefront.catatan-page .catatan-header {
  width: 100% !important;
  background: var(--ppob-canonical-gradient) !important;
  color: #FFFFFF !important;
}

html body.ppob-storefront .ppob-native-top {
  padding: 36px 18px 34px !important;
  border-radius: 0 !important;
}

html body.ppob-storefront .ppob-native-brand {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-bottom: 16px !important;
}

html body.ppob-storefront .ppob-native-brand strong {
  font-size: clamp(20px, 5vw, 26px) !important;
  line-height: 1.05 !important;
  letter-spacing: -.04em !important;
}

html body.ppob-storefront .ppob-app-header-actions {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

html body.ppob-storefront .ppob-promo-chip,
html body.ppob-storefront .ppob-notification-button,
html body.ppob-storefront .saldo-header-icon,
html body.ppob-storefront .riwayat-search-toggle {
  border: 0 !important;
  box-shadow: none !important;
}

html body.ppob-storefront .ppob-promo-chip,
html body.ppob-storefront .ppob-native-point {
  background: #FFFFFF !important;
  color: var(--ppob-canonical-accent) !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}

html body.ppob-storefront .ppob-native-wallet {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 10px !important;
  min-height: 150px !important;
  padding: 18px 18px 16px !important;
  border: 1px solid rgba(255, 255, 255, .20) !important;
  border-radius: 18px !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .08)) !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

html body.ppob-storefront .ppob-native-wallet-main {
  min-width: 0 !important;
}

html body.ppob-storefront .ppob-native-wallet-main span,
html body.ppob-storefront .ppob-native-wallet-main small {
  display: block !important;
  color: rgba(255, 255, 255, .92) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
}

html body.ppob-storefront .ppob-native-wallet-main strong {
  display: block !important;
  max-width: 100% !important;
  margin-top: 4px !important;
  color: #FFFFFF !important;
  font-size: clamp(25px, 7vw, 34px) !important;
  line-height: 1.02 !important;
  letter-spacing: -.06em !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

html body.ppob-storefront .ppob-native-actions {
  grid-column: 1 / -1 !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
  align-items: end !important;
  margin-top: 12px !important;
}

html body.ppob-storefront .ppob-native-actions a {
  min-width: 0 !important;
  display: grid !important;
  justify-items: center !important;
  gap: 5px !important;
  color: #FFFFFF !important;
  text-decoration: none !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  line-height: 1.05 !important;
}

html body.ppob-storefront .ppob-native-actions span {
  width: 34px !important;
  height: 34px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, .95) !important;
  color: var(--ppob-canonical-primary) !important;
}

html body.ppob-storefront .ppob-native-actions svg {
  width: 18px !important;
  height: 18px !important;
  fill: currentColor !important;
}

html body.ppob-storefront .ppob-native-sheet {
  width: calc(100% - 24px) !important;
  margin: -28px auto 0 !important;
  padding: 14px !important;
  border-radius: 22px !important;
  background: var(--ppob-canonical-surface) !important;
  box-shadow: var(--ppob-canonical-soft-shadow) !important;
}

html body.ppob-storefront .ppob-native-alert {
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) auto 24px !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 78px !important;
  padding: 12px !important;
  border: 1px solid rgba(255, 107, 34, .22) !important;
  border-radius: 16px !important;
  background: #FFF7F0 !important;
}

html body.ppob-storefront .ppob-native-alert strong,
html body.ppob-storefront .ppob-native-alert small {
  display: block !important;
  line-height: 1.25 !important;
  text-align: left !important;
}

html body.ppob-storefront .ppob-native-alert strong {
  font-size: 11px !important;
  font-weight: 800 !important;
  color: var(--ppob-canonical-text) !important;
}

html body.ppob-storefront .ppob-native-alert small {
  margin-top: 2px !important;
  color: var(--ppob-canonical-muted) !important;
  font-size: 10px !important;
}

html body.ppob-storefront .ppob-native-alert a {
  padding: 8px 10px !important;
  border-radius: 999px !important;
  background: #FFFFFF !important;
  color: var(--ppob-canonical-accent) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
  text-decoration: none !important;
}

html body.ppob-storefront .ppob-native-search,
html body.ppob-storefront .ppob-product-target-box,
html body.ppob-storefront .ppob-product-search-row input,
html body.ppob-storefront .input,
html body.ppob-storefront input,
html body.ppob-storefront textarea,
html body.ppob-storefront select {
  min-height: 48px !important;
  border: 1px solid #DCE3F0 !important;
  border-radius: 15px !important;
  background: #F8FAFE !important;
  color: var(--ppob-canonical-text) !important;
  font: 600 13px/1.3 'Poppins', sans-serif !important;
  box-shadow: none !important;
}

html body.ppob-storefront .ppob-native-search {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 12px 0 !important;
  padding: 0 14px !important;
}

html body.ppob-storefront .ppob-native-search input {
  min-width: 0 !important;
  width: 100% !important;
  min-height: 0 !important;
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
}

html body.ppob-storefront .ppob-native-menu {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px 10px !important;
  margin-top: 10px !important;
}

html body.ppob-storefront .ppob-native-menu-item {
  min-width: 0 !important;
  min-height: 62px !important;
  padding: 0 !important;
  display: grid !important;
  justify-items: center !important;
  align-content: start !important;
  gap: 6px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--ppob-canonical-text) !important;
  box-shadow: none !important;
}

html body.ppob-storefront .ppob-native-menu-item > span {
  width: 44px !important;
  height: 44px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 14px !important;
  background: #EEF2FF !important;
  color: var(--ppob-canonical-primary) !important;
}

html body.ppob-storefront .ppob-native-menu-item small {
  width: 100% !important;
  min-height: 21px !important;
  display: block !important;
  color: var(--ppob-canonical-text) !important;
  font-size: 8.8px !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  text-align: center !important;
  overflow: hidden !important;
  overflow-wrap: normal !important;
  text-overflow: ellipsis !important;
}

html body.ppob-storefront .ppob-native-menu-item.is-active > span,
html body.ppob-storefront .ppob-native-menu-item.active > span {
  background: var(--ppob-canonical-accent) !important;
  color: #FFFFFF !important;
}

html body.ppob-storefront .ppob-banner-slider,
html body.ppob-storefront .ppob-banner-track {
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

html body.ppob-storefront .ppob-banner-slider {
  margin: 20px auto 14px !important;
  border-radius: 16px !important;
  box-shadow: 0 14px 30px rgba(15, 23, 42, .07) !important;
}

html body.ppob-storefront .ppob-banner-track img,
html body.ppob-storefront .ppob-banner-slide img {
  width: 100% !important;
  height: auto !important;
  max-height: 128px !important;
  object-fit: contain !important;
  object-position: center !important;
}

html body.ppob-storefront .ppob-store-products,
html body.ppob-storefront .ppob-store-products .container {
  padding-top: 0 !important;
  background: transparent !important;
}

html body.ppob-storefront .ppob-category-route-hint,
html body.ppob-storefront .ppob-section-head span,
html body.ppob-storefront .section-tag {
  color: var(--ppob-canonical-accent) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
}

html body.ppob-storefront :is(.ppob-visible-subfilter, .ppob-featured-products, .ppob-provider-grid, .ppob-product-grid) {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

html body.ppob-storefront :is(.ppob-provider-card, .ppob-product-card, .ppob-product-nominal-card, .checkout-selected-product-card, .ppob-panel, .summary-card, .catatan-card, .saldo-card) {
  border: 0 !important;
  border-radius: 16px !important;
  background: var(--ppob-canonical-surface) !important;
  box-shadow: 0 12px 32px rgba(15, 23, 42, .06) !important;
}

html body.ppob-storefront :is(.ppob-provider-card, .ppob-product-card, .ppob-product-nominal-card) {
  min-width: 0 !important;
  overflow: hidden !important;
}

html body.ppob-storefront :is(.ppob-provider-card h3, .ppob-provider-card strong, .ppob-product-card h3, .ppob-product-card strong, .ppob-product-nominal-card strong, .ppob-product-nominal-card h3) {
  color: var(--ppob-canonical-text) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1.22 !important;
  letter-spacing: -.02em !important;
  overflow-wrap: anywhere !important;
}

html body.ppob-storefront :is(.ppob-provider-card small, .ppob-product-card small, .ppob-product-nominal-card small, .checkout-hint) {
  color: var(--ppob-canonical-muted) !important;
  font-size: 10px !important;
  line-height: 1.35 !important;
}

html body.ppob-storefront :is(.btn, button, .ppob-provider-card, .ppob-product-card, .ppob-product-nominal-card, .ppob-native-menu-item, .catatan-primary-btn, .saldo-primary-button) {
  transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease, color .16s ease !important;
}

@media (hover: hover) {
  html body.ppob-storefront :is(.btn, button, .ppob-provider-card, .ppob-product-card, .ppob-product-nominal-card):hover {
    transform: translateY(-1px) !important;
  }
}

html body.ppob-storefront :is(.btn-primary, .catatan-primary-btn, .saldo-primary-button, #checkoutSubmitButton, #ppobProductBuyButton, #buyButton) {
  min-height: 46px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--ppob-canonical-accent) !important;
  color: #FFFFFF !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  box-shadow: 0 14px 28px rgba(255, 107, 34, .20) !important;
}

html body.ppob-storefront :is(.btn-outline, .ppob-product-sheet-close) {
  min-height: 42px !important;
  border: 1px solid #E0E6F0 !important;
  border-radius: 999px !important;
  background: #FFFFFF !important;
  color: var(--ppob-canonical-text) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

html body.ppob-storefront.ppob-product-page .ppob-product-shell {
  padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important;
}

html body.ppob-storefront.ppob-product-page .ppob-product-header {
  height: 170px !important;
  min-height: 170px !important;
  padding: 28px 18px !important;
  border-radius: 0 0 44px 44px !important;
}

html body.ppob-storefront.ppob-product-page .ppob-product-input-card {
  width: calc(100% - 36px) !important;
  margin: -58px auto 0 !important;
  padding: 18px !important;
  border: 0 !important;
  border-radius: 22px !important;
  background: #FFFFFF !important;
  box-shadow: var(--ppob-canonical-soft-shadow) !important;
}

html body.ppob-storefront.ppob-product-page .ppob-product-title-row {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 16px !important;
}

html body.ppob-storefront.ppob-product-page .ppob-product-title-row h1 {
  margin: 0 !important;
  color: var(--ppob-canonical-text) !important;
  font-size: 25px !important;
  line-height: 1.1 !important;
  letter-spacing: -.04em !important;
}

html body.ppob-storefront.ppob-product-page .ppob-product-type-icon {
  width: 40px !important;
  height: 40px !important;
  display: grid !important;
  place-items: center !important;
  flex: 0 0 40px !important;
  border-radius: 14px !important;
  background: #FFF1EA !important;
  color: var(--ppob-canonical-accent) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

html body.ppob-storefront.ppob-product-page .ppob-product-target-box {
  display: grid !important;
  gap: 8px !important;
  min-height: 112px !important;
  padding: 16px !important;
  background: #FFFFFF !important;
}

html body.ppob-storefront.ppob-product-page .ppob-product-target-box input {
  width: 100% !important;
  min-height: 42px !important;
  border: 0 !important;
  border-radius: 12px !important;
  padding: 0 12px !important;
  background: #F6F8FC !important;
  font-size: 18px !important;
}

html body.ppob-storefront.ppob-product-page .ppob-product-tools {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  border-top: 1px solid #EEF1F6 !important;
  margin: 12px -16px -16px !important;
}

html body.ppob-storefront.ppob-product-page .ppob-product-tools button {
  min-height: 50px !important;
  border: 0 !important;
  border-right: 1px solid #EEF1F6 !important;
  border-radius: 0 !important;
  background: #FFFFFF !important;
  color: var(--ppob-canonical-text) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}

html body.ppob-storefront.ppob-product-page .ppob-product-list-section,
html body.ppob-storefront.ppob-product-page .ppob-product-empty {
  width: calc(100% - 36px) !important;
  margin: 28px auto 0 !important;
}

html body.ppob-storefront.ppob-product-page .ppob-product-list-section h2 {
  color: var(--ppob-canonical-text) !important;
  font-size: 19px !important;
  line-height: 1.2 !important;
}

html body.ppob-storefront.ppob-product-page .ppob-product-nominal-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

html body.ppob-storefront.ppob-product-page .ppob-product-nominal-card {
  min-height: 112px !important;
  padding: 16px !important;
  text-align: left !important;
}

html body.ppob-storefront .checkout-section,
html body.ppob-storefront .checkout-status-section {
  padding: 18px 0 calc(92px + env(safe-area-inset-bottom, 0px)) !important;
}

html body.ppob-storefront .ppob-layout,
html body.ppob-storefront .checkout-status-layout {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 14px !important;
}

html body.ppob-storefront .ppob-panel,
html body.ppob-storefront .ppob-summary,
html body.ppob-storefront .summary-card,
html body.ppob-storefront .checkout-status-panel,
html body.ppob-storefront .checkout-status-side {
  width: 100% !important;
  max-width: 100% !important;
}

html body.ppob-storefront .ppob-panel {
  padding: 18px !important;
}

html body.ppob-storefront .ppob-panel-head h3,
html body.ppob-storefront .summary-card h3,
html body.ppob-storefront .checkout-status-title h2 {
  color: var(--ppob-canonical-text) !important;
  font-size: 19px !important;
  line-height: 1.25 !important;
  letter-spacing: -.03em !important;
}

html body.ppob-storefront.saldo-page .saldo-header,
html body.ppob-storefront.saldo-page .saldo-sub-header,
html body.ppob-storefront.riwayat-page .riwayat-header,
html body.ppob-storefront.catatan-page .catatan-header {
  min-height: 188px !important;
  padding: 34px 22px 78px !important;
  border-radius: 0 !important;
}

html body.ppob-storefront.saldo-page .saldo-header h1,
html body.ppob-storefront.saldo-page .saldo-sub-header h1,
html body.ppob-storefront.riwayat-page .riwayat-header h1,
html body.ppob-storefront.catatan-page .catatan-header h1 {
  margin: 0 !important;
  color: #FFFFFF !important;
  font-size: clamp(34px, 10vw, 50px) !important;
  line-height: 1.04 !important;
  letter-spacing: -.06em !important;
}

html body.ppob-storefront.saldo-page .saldo-card,
html body.ppob-storefront.catatan-page .catatan-create-panel {
  width: calc(100% - 36px) !important;
  margin: -56px auto 0 !important;
}

html body.ppob-storefront.saldo-page .saldo-card {
  padding: 18px !important;
}

html body.ppob-storefront.saldo-page .saldo-tabs,
html body.ppob-storefront.riwayat-page .riwayat-tabs {
  width: 100% !important;
  display: grid !important;
  grid-auto-flow: column !important;
  grid-auto-columns: max-content !important;
  gap: 24px !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
  padding: 18px 22px 0 !important;
  background: #FFFFFF !important;
}

html body.ppob-storefront.saldo-page .saldo-tabs::-webkit-scrollbar,
html body.ppob-storefront.riwayat-page .riwayat-tabs::-webkit-scrollbar {
  display: none !important;
}

html body.ppob-storefront.saldo-page .saldo-tabs button,
html body.ppob-storefront.riwayat-page .riwayat-tabs button {
  min-height: 38px !important;
  padding: 0 !important;
  border: 0 !important;
  border-bottom: 3px solid transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #777B84 !important;
  box-shadow: none !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
}

html body.ppob-storefront.saldo-page .saldo-tabs button.is-active,
html body.ppob-storefront.riwayat-page .riwayat-tabs button.is-active {
  border-color: var(--ppob-canonical-primary) !important;
  color: var(--ppob-canonical-primary) !important;
}

html body.ppob-storefront.riwayat-page .riwayat-list-view,
html body.ppob-storefront.catatan-page .catatan-shell {
  background: #FFFFFF !important;
}

html body.ppob-storefront.riwayat-page .riwayat-list,
html body.ppob-storefront.saldo-page .saldo-history-list {
  padding: 18px 22px 110px !important;
}

html body.ppob-storefront.riwayat-page .riwayat-item {
  padding: 16px 0 !important;
  border-bottom: 1px solid #EEF1F6 !important;
  color: var(--ppob-canonical-text) !important;
}

html body.ppob-storefront.catatan-page .catatan-create-panel {
  padding: 18px !important;
}

html body.ppob-storefront.catatan-page .catatan-primary-btn {
  width: 100% !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 0 18px !important;
}

html body.ppob-storefront.catatan-page .catatan-empty {
  min-height: 420px !important;
  display: grid !important;
  place-items: center !important;
  align-content: center !important;
  gap: 12px !important;
  padding: 54px 28px 110px !important;
  text-align: center !important;
}

html body.ppob-storefront.catatan-page .catatan-empty-art {
  width: 132px !important;
  height: 132px !important;
  opacity: .85 !important;
}

html body.ppob-storefront.catatan-page .catatan-empty h2,
html body.ppob-storefront.catatan-page .catatan-empty p {
  color: #B9BEC9 !important;
  line-height: 1.35 !important;
}

html body.ppob-storefront > .ppob-native-bottom-nav {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  bottom: 0 !important;
  z-index: 2600 !important;
  width: min(100vw, var(--ppob-canonical-width)) !important;
  max-width: var(--ppob-canonical-width) !important;
  height: calc(66px + env(safe-area-inset-bottom, 0px)) !important;
  min-height: calc(66px + env(safe-area-inset-bottom, 0px)) !important;
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px)) !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  align-items: center !important;
  gap: 0 !important;
  border: 0 !important;
  border-radius: 22px 22px 0 0 !important;
  background: rgba(255, 255, 255, .98) !important;
  box-shadow: 0 -14px 34px rgba(15, 23, 42, .08) !important;
  transform: translateX(-50%) !important;
}

html body.ppob-storefront > .ppob-native-bottom-nav a {
  min-width: 0 !important;
  min-height: 48px !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-rows: 22px 13px !important;
  justify-items: center !important;
  align-content: center !important;
  gap: 3px !important;
  color: #8A94A8 !important;
  text-decoration: none !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

html body.ppob-storefront > .ppob-native-bottom-nav a span {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: currentColor !important;
  box-shadow: none !important;
  display: grid !important;
  place-items: center !important;
}

html body.ppob-storefront > .ppob-native-bottom-nav a svg {
  width: 17px !important;
  height: 17px !important;
  fill: currentColor !important;
}

html body.ppob-storefront > .ppob-native-bottom-nav a small {
  width: 100% !important;
  max-width: 62px !important;
  color: currentColor !important;
  font-size: 8px !important;
  font-weight: 800 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.01em !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

html body.ppob-storefront > .ppob-native-bottom-nav a.is-active,
html body.ppob-storefront > .ppob-native-bottom-nav a.is-active span,
html body.ppob-storefront > .ppob-native-bottom-nav a.is-active small {
  color: var(--ppob-canonical-primary) !important;
}

html body.ppob-storefront > .ppob-native-bottom-nav a::before,
html body.ppob-storefront > .ppob-native-bottom-nav a::after {
  display: none !important;
  content: none !important;
}

@media (max-width: 430px) {
  html body.ppob-storefront,
  html body.ppob-storefront.saldo-page,
  html body.ppob-storefront.riwayat-page,
  html body.ppob-storefront.catatan-page,
  html body.ppob-storefront.ppob-product-page {
    background: var(--ppob-canonical-bg) !important;
  }

  html body.ppob-storefront .ppob-native-app-home,
  html body.ppob-storefront.ppob-product-page .ppob-product-shell,
  html body.ppob-storefront.saldo-page .saldo-shell,
  html body.ppob-storefront.riwayat-page .riwayat-shell,
  html body.ppob-storefront.catatan-page .catatan-shell {
    box-shadow: none !important;
  }
}

@media (max-width: 360px) {
  html body.ppob-storefront .ppob-native-top {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  html body.ppob-storefront .ppob-native-sheet,
  html body.ppob-storefront.ppob-product-page .ppob-product-input-card,
  html body.ppob-storefront.ppob-product-page .ppob-product-list-section,
  html body.ppob-storefront.ppob-product-page .ppob-product-empty {
    width: calc(100% - 20px) !important;
  }

  html body.ppob-storefront .ppob-native-menu {
    gap: 10px 6px !important;
  }

  html body.ppob-storefront .ppob-native-menu-item small,
  html body.ppob-storefront > .ppob-native-bottom-nav a small {
    font-size: 7.6px !important;
  }
}