/* TopUpin 11.0.30 — Public Theme Consistency Layer
   Loaded after legacy bundles so saved Design Setting values become the final source of truth.
   This file intentionally changes colors only; spacing/layout structure remains untouched. */

body.site-body{
  --bg:var(--theme-background,#07040d);
  --bg-2:color-mix(in srgb,var(--theme-background) 94%,var(--theme-text) 6%);
  --surface:var(--theme-surface,#10091c);
  --surface-2:color-mix(in srgb,var(--theme-surface) 91%,var(--theme-text) 9%);
  --surface-3:color-mix(in srgb,var(--theme-surface) 84%,var(--theme-text) 16%);
  --text:var(--theme-text,#f8f5ff);
  --muted:var(--theme-muted,#a79db6);
  --line:var(--theme-border,#382040);
  --line-strong:color-mix(in srgb,var(--theme-primary) 48%,var(--theme-border));
  --purple:var(--theme-primary,#d946ef);
  --magenta:var(--theme-accent,#ec4899);
  --pink:color-mix(in srgb,var(--theme-accent) 72%,var(--theme-primary) 28%);
  --gold:var(--theme-warning,#f59e0b);
  --green:var(--theme-success,#34d399);
  --red:var(--theme-danger,#fb7185);
  --blue:var(--theme-info,#60a5fa);
  --gradient:linear-gradient(135deg,var(--theme-secondary) 0%,var(--theme-primary) 48%,var(--theme-accent) 100%);
  --gradient-gold:linear-gradient(135deg,color-mix(in srgb,var(--theme-warning) 78%,#fff 22%),var(--theme-warning));
  --radius:var(--theme-radius,18px);
  --market-line:var(--theme-border);
  --market-surface:var(--theme-surface);
  --market-text:var(--theme-text);
  --market-muted:var(--theme-muted);
  background:var(--theme-background)!important;
  color:var(--theme-text)!important;
}

body.site-body.public-theme-mode-light{color-scheme:light}
body.site-body.public-theme-mode-dark{color-scheme:dark}

/* Typography and icons use semantic foregrounds instead of legacy fixed purple/white. */
body.site-body :where(h1,h2,h3,h4,h5,h6,strong,b,label,legend){color:inherit}
body.site-body :where(p,small,.text-muted,.field-help,.form-help){color:var(--theme-muted)}
body.site-body .ui-icon{color:currentColor;fill:none;stroke:currentColor}
body.site-body .ui-icon [fill="currentColor"]{fill:currentColor;stroke:none}
body.site-body .text-primary{color:var(--theme-primary)!important}
body.site-body .text-success{color:var(--theme-success)!important}
body.site-body .text-danger{color:var(--theme-danger)!important}

/* Main surfaces. Deliberately scoped to common UI containers, not content imagery. */
body.site-body :where(.glass-panel,.public-panel,.store-panel,.checkout-step-card,.account-card,.customer-card,.order-card,.help-card,.article-card,.smart-search-results,.modal-content,.search-drawer__panel,.live-chat-panel){
  background-color:var(--theme-surface);
  border-color:var(--theme-border);
  color:var(--theme-text);
}
body.site-body :where(.store-product-card,.market-product-card,.store-category-card,.store-quick-action,.store-payment-option,.postpaid-flow-card,.postpaid-service-fixed,.postpaid-service-options,.postpaid-service-option){
  border-color:var(--theme-border);
  color:var(--theme-text);
}

/* Forms */
body.site-body :where(.form-control,input[type="text"],input[type="email"],input[type="tel"],input[type="number"],input[type="search"],input[type="password"],select,textarea){
  background-color:color-mix(in srgb,var(--theme-surface) 96%,var(--theme-background) 4%);
  color:var(--theme-text);
  border-color:var(--theme-border);
}
body.site-body :where(.form-control,input,select,textarea)::placeholder{color:color-mix(in srgb,var(--theme-muted) 82%,transparent)}
body.site-body :where(.form-control,input,select,textarea):focus{
  border-color:var(--theme-primary)!important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--theme-primary) 16%,transparent)!important;
  outline:none;
}
body.site-body select.form-control{color:var(--theme-text)}

/* Buttons: foreground is calculated server-side for primary so bright custom colors remain readable. */
body.site-body .btn-primary,
body.site-body .button-primary,
body.site-body .btn-brand{
  background:linear-gradient(135deg,var(--theme-primary),var(--theme-accent))!important;
  border-color:color-mix(in srgb,var(--theme-primary) 70%,var(--theme-accent))!important;
  color:var(--theme-on-primary,#fff)!important;
  box-shadow:0 10px 28px color-mix(in srgb,var(--theme-primary) 24%,transparent);
}
body.site-body .btn-ghost,
body.site-body .btn-outline{
  background:color-mix(in srgb,var(--theme-surface) 95%,var(--theme-primary) 5%)!important;
  border-color:var(--theme-border)!important;
  color:var(--theme-text)!important;
}
body.site-body .btn-danger-soft{background:color-mix(in srgb,var(--theme-danger) 12%,transparent)!important;border-color:color-mix(in srgb,var(--theme-danger) 34%,transparent)!important;color:var(--theme-danger)!important}
body.site-body .btn-warning-soft,.badge-warning{background:color-mix(in srgb,var(--theme-warning) 12%,transparent)!important;border-color:color-mix(in srgb,var(--theme-warning) 34%,transparent)!important;color:var(--theme-warning)!important}
body.site-body.public-theme-button-rounded .btn{border-radius:10px!important}
body.site-body.public-theme-button-pill .btn{border-radius:999px!important}
body.site-body.public-theme-button-square .btn{border-radius:4px!important}

/* Header/navigation uses a dedicated token and automatically readable foreground. */
body.site-body .site-header,
body.site-body .store-header{
  background:color-mix(in srgb,var(--theme-header) 94%,transparent)!important;
  border-bottom-color:color-mix(in srgb,var(--theme-on-header) 16%,transparent)!important;
  color:var(--theme-on-header)!important;
}
body.site-body .site-header :where(.brand-copy strong,.store-desktop-nav a,.store-icon-btn,.store-icon-btn small){color:inherit!important}
body.site-body .site-header .brand-copy small{color:color-mix(in srgb,var(--theme-on-header) 70%,transparent)!important}
body.site-body .store-desktop-nav a:hover,
body.site-body .store-desktop-nav a.active{color:var(--theme-on-header)!important}
body.site-body .store-desktop-nav a.active::after{background:linear-gradient(90deg,var(--theme-primary),var(--theme-accent))!important;box-shadow:0 0 10px color-mix(in srgb,var(--theme-primary) 55%,transparent)!important}
body.site-body .store-icon-btn :where(svg,.ui-icon){color:currentColor!important}

/* Footer and bottom navigation. */
body.site-body :where(.site-footer,.store-footer){background:var(--theme-footer)!important;color:var(--theme-on-footer)!important}
body.site-body .site-footer :where(h2,h3,strong,a){color:inherit}
body.site-body .site-footer :where(p,small,.store-footer-v97__bottom){color:color-mix(in srgb,var(--theme-on-footer) 68%,transparent)!important}
body.site-body .site-footer :where(.store-footer-v97__contact>a,.store-footer-v97__socials>a,.store-footer-v97__trust>div){border-color:color-mix(in srgb,var(--theme-on-footer) 14%,transparent)!important;background:color-mix(in srgb,var(--theme-on-footer) 5%,transparent)!important;color:inherit!important}
body.site-body .mobile-bottom-nav{background:color-mix(in srgb,var(--theme-header) 96%,transparent)!important;border-color:color-mix(in srgb,var(--theme-on-header) 14%,transparent)!important;color:var(--theme-on-header)!important}
body.site-body .mobile-bottom-nav a{color:color-mix(in srgb,var(--theme-on-header) 68%,transparent)!important}
body.site-body .mobile-bottom-nav a.active{color:var(--theme-primary)!important}

/* Semantic statuses */
body.site-body :where(.status-badge--success,.badge-success,.is-success){--state-color:var(--theme-success)}
body.site-body :where(.status-badge--warning,.badge-warning){--state-color:var(--theme-warning)}
body.site-body :where(.status-badge--danger,.badge-danger,.is-error){--state-color:var(--theme-danger)}
body.site-body :where(.status-badge--info,.badge-info){--state-color:var(--theme-info)}
body.site-body :where(.status-badge--success,.status-badge--warning,.status-badge--danger,.status-badge--info){color:var(--state-color)!important;border-color:color-mix(in srgb,var(--state-color) 34%,transparent)!important;background:color-mix(in srgb,var(--state-color) 11%,transparent)!important}
body.site-body .toast--success{--toast-color:var(--theme-success)}
body.site-body .toast--warning{--toast-color:var(--theme-warning)}
body.site-body .toast--error{--toast-color:var(--theme-danger)}
body.site-body .toast--info{--toast-color:var(--theme-info)}
body.site-body .toast{background:var(--theme-surface)!important;color:var(--theme-text)!important;border-color:var(--theme-border)!important}
body.site-body .toast__icon{color:var(--toast-color,var(--theme-primary))!important}
body.site-body .toast__progress{background:var(--toast-color,var(--theme-primary))!important}

/* Live chat */
body.site-body .floating-chat{background:linear-gradient(135deg,var(--theme-primary),var(--theme-accent))!important;color:var(--theme-on-primary)!important;border-color:color-mix(in srgb,var(--theme-primary) 55%,transparent)!important}
body.site-body .live-chat-panel__header{background:var(--theme-header)!important;color:var(--theme-on-header)!important}
body.site-body .live-chat-panel__header :where(strong,small,button,svg){color:inherit!important}
body.site-body .live-chat-composer{background:var(--theme-surface)!important;border-color:var(--theme-border)!important}
body.site-body .live-chat-composer button{background:var(--theme-primary)!important;color:var(--theme-on-primary)!important}

/* Newer postpaid/search components previously contained fixed dark/purple colors. */
body.site-body .postpaid-service-searchbox>svg,
body.site-body .postpaid-service-searchbox>.ui-icon{color:var(--theme-primary)!important}
body.site-body .postpaid-service-searchbox .form-control,
body.site-body .postpaid-service-options{background:color-mix(in srgb,var(--theme-surface) 94%,var(--theme-background) 6%)!important;border-color:var(--theme-border)!important}
body.site-body .postpaid-service-searchbox [data-postpaid-service-search-clear]{background:color-mix(in srgb,var(--theme-text) 7%,transparent)!important;color:var(--theme-muted)!important}
body.site-body .postpaid-service-option{color:var(--theme-text)!important}
body.site-body .postpaid-service-option:hover,
body.site-body .postpaid-service-option:focus-visible,
body.site-body .postpaid-service-option.is-selected{background:color-mix(in srgb,var(--theme-primary) 11%,var(--theme-surface))!important;border-color:color-mix(in srgb,var(--theme-primary) 32%,var(--theme-border))!important}
body.site-body .postpaid-service-option__icon{background:color-mix(in srgb,var(--theme-primary) 12%,transparent)!important;color:var(--theme-primary)!important}
body.site-body .postpaid-service-option__copy small,
body.site-body .postpaid-service-empty{color:var(--theme-muted)!important}
body.site-body .postpaid-service-empty strong{color:var(--theme-text)!important}
body.site-body .postpaid-bill{background:color-mix(in srgb,var(--theme-surface) 92%,var(--theme-background) 8%)!important;color:var(--theme-text)!important;border-color:var(--theme-border)!important}
body.site-body .postpaid-bill>div{background:color-mix(in srgb,var(--theme-text) 5%,transparent)!important}
body.site-body .postpaid-bill span,
body.site-body .postpaid-bill__expiry{color:var(--theme-muted)!important}
body.site-body .postpaid-bill__total{background:linear-gradient(135deg,color-mix(in srgb,var(--theme-primary) 16%,transparent),color-mix(in srgb,var(--theme-accent) 12%,transparent))!important;border-color:color-mix(in srgb,var(--theme-primary) 24%,var(--theme-border))!important}
body.site-body .postpaid-bill__total strong{color:var(--theme-primary)!important}

/* Radius follows Design Setting across common containers without changing their dimensions. */
body.site-body :where(.glass-panel,.public-panel,.store-panel,.checkout-step-card,.account-card,.customer-card,.order-card,.help-card,.modal-content,.live-chat-panel){border-radius:var(--theme-radius)!important}

@media (prefers-reduced-motion:reduce){body.site-body *{scroll-behavior:auto}}

/* Keep nested labels/icons readable inside colored actions. */
body.site-body :where(.btn-primary,.button-primary,.btn-brand,.floating-chat) :where(span,strong,small,svg,.ui-icon){color:inherit!important}

/* v11.0.30: finish the bridge for older public components that still carry hard-coded dark/purple values. */
body.site-body > .ambient {
  background:
    radial-gradient(circle at 14% 8%, color-mix(in srgb, var(--theme-primary) 20%, transparent), transparent 34%),
    radial-gradient(circle at 86% 16%, color-mix(in srgb, var(--theme-accent) 16%, transparent), transparent 36%),
    linear-gradient(180deg, var(--theme-background), color-mix(in srgb, var(--theme-background) 92%, var(--theme-surface))) !important;
}
body.site-body > .ambient::before,
body.site-body > .ambient::after {
  background: radial-gradient(circle, color-mix(in srgb, var(--theme-primary) 20%, transparent), transparent 68%) !important;
}
body.site-body > .ambient::after {
  background: radial-gradient(circle, color-mix(in srgb, var(--theme-accent) 16%, transparent), transparent 68%) !important;
}

body.site-body :where(
  .store-product-profile--cover,
  .store-product-profile__cover,
  .store-category-panel,
  .store-catalog-panel,
  .store-quick-panel,
  .store-article-card,
  .store-help-card,
  .order-check-bar,
  .checkout-summary,
  .checkout-card,
  .checkout-step-card,
  .payment-card,
  .invoice-card,
  .profile-card,
  .auth-card,
  .article-card,
  .blog-card,
  .faq-card,
  .contact-card,
  .modal-content,
  .dropdown-menu,
  .search-drawer,
  .public-popup-card
) {
  background-color: var(--theme-surface);
  color: var(--theme-text);
  border-color: var(--theme-border);
}

body.site-body .store-product-profile--cover {
  border-color: color-mix(in srgb, var(--theme-primary) 24%, var(--theme-border)) !important;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--theme-surface) 92%, var(--theme-primary)), var(--theme-surface)) !important;
}
body.site-body .store-product-profile__cover::after {
  background: linear-gradient(180deg, transparent 34%, color-mix(in srgb, var(--theme-background) 84%, transparent) 100%) !important;
}

body.site-body :where(
  .store-category-panel,
  .store-catalog-panel,
  .store-quick-panel,
  .store-help-card,
  .order-check-bar,
  .checkout-summary,
  .checkout-card,
  .payment-card,
  .invoice-card,
  .profile-card,
  .auth-card,
  .article-card,
  .blog-card,
  .faq-card,
  .contact-card
) {
  box-shadow: 0 14px 38px color-mix(in srgb, var(--theme-background) 24%, transparent);
}

body.site-body :where(
  .store-category-tab,
  .store-filter-chip,
  .category-chip,
  .filter-chip,
  .payment-method,
  .checkout-method,
  .quick-chip,
  .service-chip,
  .feature-chip
) {
  background: color-mix(in srgb, var(--theme-surface) 86%, var(--theme-background));
  color: var(--theme-text);
  border-color: var(--theme-border);
}
body.site-body :where(
  .store-category-tab.is-active,
  .store-filter-chip.is-active,
  .category-chip.is-active,
  .filter-chip.is-active,
  .payment-method.is-active,
  .checkout-method.is-active,
  .quick-chip.is-active
) {
  background: color-mix(in srgb, var(--theme-primary) 14%, var(--theme-surface));
  color: var(--theme-text);
  border-color: color-mix(in srgb, var(--theme-primary) 58%, var(--theme-border));
}

body.site-body .checkout-step-card--guided.is-current {
  border-color: var(--theme-primary) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--theme-primary) 28%, transparent) inset;
}
body.site-body .checkout-step-card--guided.is-complete {
  border-color: var(--theme-success) !important;
}
body.site-body .checkout-step-card--guided.is-error,
body.site-body .checkout-step-card--guided.has-error {
  border-color: var(--theme-danger) !important;
}

body.site-body :where(.text-primary,.link-primary,.store-link-primary) {
  color: var(--theme-primary) !important;
}
body.site-body :where(.text-info,.status-info) { color: var(--theme-info) !important; }
body.site-body :where(.text-success,.status-success,[data-summary-discount-row] strong) { color: var(--theme-success) !important; }
body.site-body :where(.text-warning,.status-warning) { color: var(--theme-warning) !important; }
body.site-body :where(.text-danger,.status-danger,.text-error) { color: var(--theme-danger) !important; }

body.site-body :where(.badge-primary,.status-primary) {
  background: color-mix(in srgb, var(--theme-primary) 16%, var(--theme-surface));
  color: var(--theme-primary);
  border-color: color-mix(in srgb, var(--theme-primary) 46%, var(--theme-border));
}
body.site-body :where(.badge-success,.status-success-bg) {
  background: color-mix(in srgb, var(--theme-success) 14%, var(--theme-surface));
  color: var(--theme-success);
  border-color: color-mix(in srgb, var(--theme-success) 42%, var(--theme-border));
}
body.site-body :where(.badge-warning,.status-warning-bg) {
  background: color-mix(in srgb, var(--theme-warning) 14%, var(--theme-surface));
  color: var(--theme-warning);
  border-color: color-mix(in srgb, var(--theme-warning) 42%, var(--theme-border));
}
body.site-body :where(.badge-danger,.status-danger-bg) {
  background: color-mix(in srgb, var(--theme-danger) 14%, var(--theme-surface));
  color: var(--theme-danger);
  border-color: color-mix(in srgb, var(--theme-danger) 42%, var(--theme-border));
}

body.site-body.public-theme-mode-light :where(input,select,textarea,.form-control,.form-select) {
  color-scheme: light;
}
body.site-body.public-theme-mode-dark :where(input,select,textarea,.form-control,.form-select) {
  color-scheme: dark;
}

body.site-body :where(.btn-primary,.floating-action-primary,.live-chat-launcher,.wa-float,.fab-primary) :where(svg,.ui-icon),
body.site-body :where(.btn-primary,.floating-action-primary,.live-chat-launcher,.wa-float,.fab-primary) :where(span,strong) {
  color: inherit;
}