/* TopUpin 11.0.33 — public theme deep audit
   Scope: remaining storefront/home/help/order lookup/customer account legacy dark/pink styles.
   This file is intentionally loaded last. It does not change application flow or markup. */

body.site-body{
  --theme-card:color-mix(in srgb,var(--theme-surface) 98%,var(--theme-text) 2%);
  --theme-card-2:color-mix(in srgb,var(--theme-surface) 94%,var(--theme-text) 6%);
  --theme-card-3:color-mix(in srgb,var(--theme-surface) 89%,var(--theme-text) 11%);
  --theme-primary-soft:color-mix(in srgb,var(--theme-primary) 9%,var(--theme-surface));
  --theme-primary-soft-2:color-mix(in srgb,var(--theme-primary) 14%,var(--theme-surface));
  --theme-primary-line:color-mix(in srgb,var(--theme-primary) 30%,var(--theme-border));
  --theme-field:color-mix(in srgb,var(--theme-surface) 95%,var(--theme-background) 5%);
  --theme-divider:color-mix(in srgb,var(--theme-border) 82%,transparent);
}

/* --------------------------------------------------------------------------
   Form contract. Legacy account/help/order CSS used high-specificity black
   fields, so the older generic theme rule could not win in Light mode.
   -------------------------------------------------------------------------- */
body.site-body :where(
  .public-panel,
  .customer-auth-page,
  .account-page,
  .order-lookup-card,
  .help-search-pro,
  .live-chat-panel,
  .ticket-page
) :where(input.form-control,select.form-control,textarea.form-control,input[type="text"],input[type="email"],input[type="tel"],input[type="number"],input[type="search"],input[type="password"],select,textarea){
  background:var(--theme-field)!important;
  color:var(--theme-text)!important;
  border-color:var(--theme-border)!important;
  -webkit-text-fill-color:var(--theme-text)!important;
  box-shadow:none!important;
}
body.site-body :where(
  .public-panel,
  .customer-auth-page,
  .account-page,
  .order-lookup-card,
  .help-search-pro,
  .ticket-page
) :where(input,select,textarea)::placeholder{
  color:color-mix(in srgb,var(--theme-muted) 82%,transparent)!important;
  -webkit-text-fill-color:color-mix(in srgb,var(--theme-muted) 82%,transparent)!important;
  opacity:1!important;
}
body.site-body :where(
  .public-panel,
  .customer-auth-page,
  .account-page,
  .order-lookup-card,
  .help-search-pro,
  .ticket-page
) :where(input,select,textarea):focus{
  background:var(--theme-surface)!important;
  border-color:var(--theme-primary)!important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--theme-primary) 14%,transparent)!important;
  outline:0!important;
}
body.site-body :where(.public-panel,.customer-auth-page,.account-page,.order-lookup-card,.ticket-page) label{
  color:var(--theme-text)!important;
}
body.site-body select option{background:var(--theme-surface);color:var(--theme-text)}

/* --------------------------------------------------------------------------
   Homepage lower sections — Cara Transaksi, trust, stats and news.
   -------------------------------------------------------------------------- */
body.site-body .market-show-more{
  color:var(--theme-primary)!important;
}
body.site-body .market-show-more :where(svg,.ui-icon,i,span){color:inherit!important}

body.site-body .home-order-guide__grid article{
  background:linear-gradient(145deg,var(--theme-card),var(--theme-surface))!important;
  border-color:var(--theme-border)!important;
  color:var(--theme-text)!important;
  box-shadow:0 10px 26px color-mix(in srgb,var(--theme-text) 6%,transparent)!important;
}
body.site-body .home-order-guide__grid article>span{
  color:color-mix(in srgb,var(--theme-primary) 18%,transparent)!important;
}
body.site-body .home-order-guide__grid i{
  background:linear-gradient(135deg,var(--theme-primary),var(--theme-secondary))!important;
  color:var(--theme-on-primary)!important;
  box-shadow:0 8px 22px color-mix(in srgb,var(--theme-primary) 20%,transparent)!important;
}
body.site-body .home-order-guide__grid i :where(svg,.ui-icon){color:inherit!important}
body.site-body .home-order-guide__grid strong{color:var(--theme-text)!important}
body.site-body .home-order-guide__grid small{color:var(--theme-muted)!important}

body.site-body .home-trust__grid{
  background:var(--theme-card)!important;
  border-color:var(--theme-border)!important;
  box-shadow:0 12px 30px color-mix(in srgb,var(--theme-text) 5%,transparent)!important;
}
body.site-body .home-trust article{
  background:transparent!important;
  border-color:var(--theme-divider)!important;
  color:var(--theme-text)!important;
}
body.site-body .home-trust article>span{
  background:var(--theme-primary-soft)!important;
  border:1px solid var(--theme-primary-line)!important;
  color:var(--theme-primary)!important;
}
body.site-body .home-trust article>span :where(svg,.ui-icon){color:inherit!important}
body.site-body .home-trust strong{color:var(--theme-text)!important}
body.site-body .home-trust small{color:var(--theme-muted)!important}

body.site-body .home-stats__panel{
  background:var(--theme-border)!important;
  border-color:var(--theme-border)!important;
  box-shadow:0 12px 30px color-mix(in srgb,var(--theme-text) 5%,transparent)!important;
}
body.site-body .home-stats__panel>div{
  background:var(--theme-card)!important;
  color:var(--theme-text)!important;
}
body.site-body .home-stats__panel strong{color:var(--theme-primary)!important}
body.site-body .home-stats__panel small{color:var(--theme-muted)!important}

body.site-body .home-news .store-article-card,
body.site-body .store-article-card{
  background:linear-gradient(145deg,var(--theme-card),var(--theme-surface))!important;
  border-color:var(--theme-border)!important;
  color:var(--theme-text)!important;
}
body.site-body .store-article-card__media{
  background:var(--theme-card-2)!important;
}
body.site-body .store-article-card__media>span,
body.site-body .store-article-card__media>span :where(svg,.ui-icon){color:var(--theme-primary)!important}
body.site-body .store-article-card h3{color:var(--theme-text)!important}
body.site-body .store-article-card :where(p,time,small){color:var(--theme-muted)!important}
body.site-body .store-article-card__more{color:var(--theme-primary)!important}

/* --------------------------------------------------------------------------
   Help center. Remove dark outer search shell + white field mismatch.
   -------------------------------------------------------------------------- */
body.site-body .help-hero-pro{color:var(--theme-text)!important}
body.site-body .help-hero-pro :where(h1,h2){color:var(--theme-text)!important}
body.site-body .help-hero-pro>div>p{color:var(--theme-muted)!important}
body.site-body .help-search-pro{
  background:var(--theme-card)!important;
  border-color:var(--theme-border)!important;
  box-shadow:0 14px 34px color-mix(in srgb,var(--theme-text) 7%,transparent)!important;
  color:var(--theme-text)!important;
}
body.site-body .help-search-pro>span,
body.site-body .help-search-pro>span :where(svg,.ui-icon){color:var(--theme-primary)!important}
body.site-body .help-search-pro input{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  color:var(--theme-text)!important;
  -webkit-text-fill-color:var(--theme-text)!important;
}
body.site-body .help-search-pro input:focus{background:transparent!important;box-shadow:none!important}
body.site-body .help-search-pro button{
  background:linear-gradient(135deg,var(--theme-primary),var(--theme-accent))!important;
  color:var(--theme-on-primary)!important;
  box-shadow:0 8px 22px color-mix(in srgb,var(--theme-primary) 18%,transparent)!important;
}
body.site-body .help-card,
body.site-body .help-article-card{
  background:linear-gradient(145deg,var(--theme-card),var(--theme-surface))!important;
  border-color:var(--theme-border)!important;
  color:var(--theme-text)!important;
}
body.site-body .help-card:hover,
body.site-body .help-article-card:hover{
  border-color:color-mix(in srgb,var(--theme-primary) 46%,var(--theme-border))!important;
}
body.site-body :where(.help-card,.help-article-card)>span{
  background:var(--theme-primary-soft)!important;
  border:1px solid var(--theme-primary-line)!important;
  color:var(--theme-primary)!important;
}
body.site-body :where(.help-card,.help-article-card)>span :where(svg,.ui-icon){color:inherit!important}
body.site-body .help-article-card small{color:var(--theme-primary)!important}
body.site-body :where(.help-card,.help-article-card) :where(h2,h3){color:var(--theme-text)!important}
body.site-body :where(.help-card,.help-article-card) p{color:var(--theme-muted)!important}
body.site-body .help-related,
body.site-body .help-article-body{
  background:var(--theme-card)!important;
  border-color:var(--theme-border)!important;
  color:var(--theme-text)!important;
}
body.site-body .help-related a{border-color:var(--theme-divider)!important;color:var(--theme-text)!important}
body.site-body .help-related a small{color:var(--theme-muted)!important}
body.site-body .help-article-body :where(h1,h2,h3,h4,strong){color:var(--theme-text)!important}
body.site-body .help-article-body :where(p,li){color:var(--theme-muted)!important}

/* --------------------------------------------------------------------------
   Order lookup / transaction search.
   -------------------------------------------------------------------------- */
body.site-body .order-lookup-page{
  background:
    radial-gradient(circle at 14% 18%,color-mix(in srgb,var(--theme-primary) 8%,transparent),transparent 34%),
    radial-gradient(circle at 88% 70%,color-mix(in srgb,var(--theme-secondary) 6%,transparent),transparent 34%),
    var(--theme-background)!important;
  color:var(--theme-text)!important;
}
body.site-body .order-lookup-copy h1{color:var(--theme-text)!important}
body.site-body .order-lookup-copy>p{color:var(--theme-muted)!important}
body.site-body .order-lookup-copy__steps span{color:var(--theme-text)!important}
body.site-body .order-lookup-copy__steps b{
  background:var(--theme-primary-soft)!important;
  border-color:var(--theme-primary-line)!important;
  color:var(--theme-primary)!important;
}
body.site-body .order-lookup-card{
  background:linear-gradient(145deg,var(--theme-card),var(--theme-surface))!important;
  border:1px solid var(--theme-border)!important;
  color:var(--theme-text)!important;
  box-shadow:0 18px 44px color-mix(in srgb,var(--theme-text) 8%,transparent)!important;
}
body.site-body .order-lookup-card__icon{
  background:var(--theme-primary-soft-2)!important;
  border-color:var(--theme-primary-line)!important;
  color:var(--theme-primary)!important;
  box-shadow:none!important;
}
body.site-body .order-lookup-card__icon :where(svg,.ui-icon){color:inherit!important}
body.site-body .order-lookup-card__head>span{color:var(--theme-primary)!important}
body.site-body .order-lookup-card__head h2{color:var(--theme-text)!important}
body.site-body .order-lookup-card__head p{color:var(--theme-muted)!important}
body.site-body .order-lookup-card__head code{
  background:var(--theme-primary-soft)!important;
  color:var(--theme-primary)!important;
  border:1px solid var(--theme-primary-line)!important;
}
body.site-body .order-lookup-input>span,
body.site-body .order-lookup-input>span :where(svg,.ui-icon){color:var(--theme-primary)!important}
body.site-body .order-lookup-card__note{color:var(--theme-muted)!important}
body.site-body .order-lookup-card__note :where(svg,.ui-icon){color:var(--theme-primary)!important}
body.site-body .recent-orders{
  background:var(--theme-card-2)!important;
  border-color:var(--theme-border)!important;
  color:var(--theme-text)!important;
}
body.site-body .recent-orders__head button{color:var(--theme-primary)!important}

/* --------------------------------------------------------------------------
   Customer login/register and account dashboard.
   -------------------------------------------------------------------------- */
body.site-body .customer-auth-page,
body.site-body .account-page,
body.site-body .ticket-page{color:var(--theme-text)!important}

body.site-body .account-auth-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
  align-items:start;
}
body.site-body .customer-auth-page .public-panel,
body.site-body .account-page .public-panel,
body.site-body .ticket-page .public-panel{
  background:linear-gradient(145deg,var(--theme-card),var(--theme-surface))!important;
  border-color:var(--theme-border)!important;
  color:var(--theme-text)!important;
  box-shadow:0 12px 32px color-mix(in srgb,var(--theme-text) 6%,transparent)!important;
}
body.site-body :where(.customer-auth-page,.account-page,.ticket-page) .public-panel :where(h1,h2,h3,strong,label){color:var(--theme-text)!important}
body.site-body :where(.customer-auth-page,.account-page,.ticket-page) .public-panel>p,
body.site-body :where(.customer-auth-page,.account-page,.ticket-page) .public-panel label>small{color:var(--theme-muted)!important}

body.site-body .account-hero,
body.site-body .customer-auth-hero,
body.site-body .ticket-hero{
  background:linear-gradient(135deg,var(--theme-primary-soft-2),var(--theme-card))!important;
  border-color:var(--theme-primary-line)!important;
  color:var(--theme-text)!important;
  box-shadow:0 14px 36px color-mix(in srgb,var(--theme-text) 7%,transparent)!important;
}
body.site-body :where(.account-hero,.customer-auth-hero,.ticket-hero) :where(h1,h2,h3,strong){color:var(--theme-text)!important}
body.site-body :where(.account-hero,.customer-auth-hero,.ticket-hero) p{color:var(--theme-muted)!important}

body.site-body .pwa-install-banner{
  background:linear-gradient(135deg,var(--theme-primary-soft),var(--theme-card))!important;
  border-color:var(--theme-primary-line)!important;
  color:var(--theme-text)!important;
  box-shadow:0 12px 30px color-mix(in srgb,var(--theme-text) 5%,transparent)!important;
}
body.site-body .pwa-install-banner strong{color:var(--theme-text)!important}
body.site-body .pwa-install-banner p{color:var(--theme-muted)!important}

body.site-body .account-stats>div{
  background:linear-gradient(145deg,var(--theme-card),var(--theme-surface))!important;
  border-color:var(--theme-border)!important;
  color:var(--theme-text)!important;
  box-shadow:0 8px 24px color-mix(in srgb,var(--theme-text) 5%,transparent)!important;
}
body.site-body .account-stats span{color:var(--theme-muted)!important}
body.site-body .account-stats strong{color:var(--theme-text)!important}
body.site-body .account-stats>div:nth-child(2) strong,
body.site-body .account-stats>div:nth-child(4) strong{color:var(--theme-primary)!important}

body.site-body .public-data-table{color:var(--theme-text)!important}
body.site-body .public-data-table th{
  background:var(--theme-primary-soft)!important;
  color:var(--theme-text)!important;
  border-color:var(--theme-border)!important;
}
body.site-body .public-data-table td{
  background:var(--theme-surface)!important;
  color:var(--theme-text)!important;
  border-color:var(--theme-border)!important;
}
body.site-body .public-data-table td small{color:var(--theme-muted)!important}
body.site-body .public-data-table a{color:var(--theme-primary)!important}
body.site-body .table-wrap{border-color:var(--theme-border)!important}

body.site-body .account-list>a,
body.site-body .account-list>div{
  background:var(--theme-card-2)!important;
  border-color:var(--theme-border)!important;
  color:var(--theme-text)!important;
}
body.site-body .account-list>a:hover{
  background:var(--theme-primary-soft)!important;
  border-color:var(--theme-primary-line)!important;
}
body.site-body .account-list :where(strong,span){color:var(--theme-text)!important}
body.site-body .account-list small,
body.site-body .account-list>p{color:var(--theme-muted)!important}
body.site-body .favorite-action .btn.is-favorite{
  border-color:var(--theme-primary)!important;
  color:var(--theme-primary)!important;
}

/* Ticket pages share the same old purple shell. */
body.site-body .ticket-message{
  background:var(--theme-card-2)!important;
  border:1px solid var(--theme-border)!important;
  color:var(--theme-text)!important;
}
body.site-body .ticket-message--customer{
  background:linear-gradient(135deg,var(--theme-primary),var(--theme-secondary))!important;
  border-color:transparent!important;
  color:var(--theme-on-primary)!important;
}
body.site-body .ticket-status-grid>div{
  background:var(--theme-card)!important;
  border-color:var(--theme-border)!important;
  color:var(--theme-text)!important;
}

/* --------------------------------------------------------------------------
   Legacy magenta/pink accents which are decorative/brand, not semantic status.
   Danger/error colors are intentionally left tied to --theme-danger.
   -------------------------------------------------------------------------- */
body.site-body :where(
  .eyebrow,
  .market-show-more,
  .store-article-card__more,
  .help-article-card small,
  .order-lookup-card__head>span,
  .recent-orders__head button,
  .article-reader__aside a,
  .checkout-guide-link
){color:var(--theme-primary)!important}

body.site-body :where(
  .market-section__icon,
  .home-trust article>span,
  .help-card>span,
  .help-article-card>span,
  .order-lookup-card__icon,
  .article-reader__aside>span
) :where(svg,.ui-icon){color:currentColor!important}

/* Product benefit previously blended green with the old purple. Keep the
   semantic green but mix it with the active surface instead. */
body.site-body .market-product-card__benefit{
  background:linear-gradient(90deg,color-mix(in srgb,var(--theme-success) 13%,var(--theme-surface)),var(--theme-card-2))!important;
  color:color-mix(in srgb,var(--theme-success) 78%,var(--theme-text))!important;
}
body.site-body .market-product-card__benefit i{color:var(--theme-warning)!important}

/* Keep floating chat brand-consistent. Unread red remains semantic danger. */
body.site-body .floating-chat,
body.site-body .floating-chat--v8{
  background:linear-gradient(135deg,var(--theme-primary),var(--theme-accent))!important;
  color:var(--theme-on-primary)!important;
}
body.site-body :where(.floating-chat,.floating-chat--v8) :where(svg,.ui-icon,strong,small,span){color:inherit!important}
body.site-body .floating-chat--v8>i{
  background:var(--theme-danger)!important;
  color:var(--theme-on-danger)!important;
  border-color:var(--theme-background)!important;
}

/* --------------------------------------------------------------------------
   Mobile polish: avoid cramped help/login/account sections and preserve the
   bottom navigation safe area without inserting a second large blank spacer.
   -------------------------------------------------------------------------- */
@media(max-width:820px){
  body.site-body .account-auth-grid{grid-template-columns:1fr;gap:14px}
  body.site-body .customer-auth-page,
  body.site-body .account-page{padding-top:20px!important;padding-bottom:calc(var(--mobile-nav-h,74px) + 28px)!important}
  body.site-body .account-hero,
  body.site-body .customer-auth-hero,
  body.site-body .ticket-hero{padding:20px!important;border-radius:22px!important}
  body.site-body .public-panel{border-radius:20px!important}
  body.site-body .pwa-install-banner{align-items:flex-start!important;flex-direction:column!important;padding:18px!important}
  body.site-body .pwa-install-banner .favorite-action{width:100%;flex-wrap:wrap}
  body.site-body .pwa-install-banner .favorite-action .btn{flex:1 1 150px}
  body.site-body .help-search-pro{padding:8px!important;grid-template-columns:36px minmax(0,1fr)!important;gap:0!important}
  body.site-body .help-search-pro>span{display:grid;place-items:center}
  body.site-body .help-search-pro input{min-height:50px!important;padding:0 10px!important}
  body.site-body .help-search-pro button{grid-column:1/-1!important;width:100%;min-height:48px;margin-top:7px;border-radius:12px!important}
  body.site-body .order-lookup-page{padding:34px 0 44px!important}
  body.site-body .order-lookup-page__grid{gap:20px!important}
  body.site-body .order-lookup-card{padding:20px!important;border-radius:22px!important}
}

@media(max-width:560px){
  body.site-body .home-order-guide__grid{gap:8px!important}
  body.site-body .home-order-guide__grid article{min-height:118px!important;padding:14px 11px!important}
  body.site-body .home-trust article{padding:14px 11px!important}
  body.site-body .home-stats__panel>div{padding:18px 8px!important}
  body.site-body .account-stats{gap:10px!important}
  body.site-body .account-stats>div{min-height:112px;padding:16px!important}
  body.site-body .customer-auth-page .public-panel,
  body.site-body .account-page .public-panel{padding:18px!important}
}

/* Inline per-content accent values from older records must not resurrect the
   original magenta after a global theme is selected. Images themselves are not recolored. */
body.site-body .store-slide{--slide-accent:var(--theme-primary)!important}
body.site-body .home-service-grid a{--service-accent:var(--theme-primary)!important}
body.site-body .market-product-card{--card-accent:var(--theme-primary)!important}
body.site-body .promo-hub-card,
body.site-body .promo-campaign-card{--promo-accent:var(--theme-primary)!important}
body.site-body .public-popup__panel{--popup-accent:var(--theme-primary)!important}
body.site-body .smart-search-item em,
body.site-body .smart-search-item>b{color:var(--theme-primary)!important}
body.site-body .smart-search-item__media{--search-accent:var(--theme-primary)!important}