/*
 * UI Polish v1
 * Final, theme-aware presentation layer for storefront, account and admin UI.
 * It intentionally avoids generic pseudo-elements because many legacy cards use
 * ::before/::after for status stripes, ribbons and artwork.
 */

:root {
  --ui-page: #080a11;
  --ui-surface: #1b1f2b;
  --ui-surface-raised: #242a39;
  --ui-surface-deep: #121620;
  --ui-text: #f7f8ff;
  --ui-muted: #a8afc2;
  --ui-accent-rgb: var(--sp-rgb, 108, 92, 231);
  --ui-accent-2-rgb: var(--sa-rgb, 162, 155, 254);
  --ui-border: rgba(var(--ui-accent-2-rgb), .2);
  --ui-border-hover: rgba(var(--ui-accent-2-rgb), .5);
  --ui-focus: rgba(var(--ui-accent-2-rgb), .9);
  --ui-card-fill:
    radial-gradient(130% 125% at 8% 0%, rgba(var(--ui-accent-rgb), .12) 0%, transparent 42%),
    linear-gradient(145deg, rgba(34, 39, 53, .98) 0%, rgba(20, 24, 34, .99) 72%);
  --ui-card-fill-hover:
    radial-gradient(130% 125% at 12% 0%, rgba(var(--ui-accent-rgb), .2) 0%, transparent 46%),
    linear-gradient(145deg, rgba(40, 46, 62, .99) 0%, rgba(22, 26, 37, .99) 72%);
  --ui-card-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .085),
    inset 0 -1px 0 rgba(0, 0, 0, .25),
    0 14px 36px rgba(0, 0, 0, .3),
    0 0 24px rgba(var(--ui-accent-rgb), .07);
  --ui-card-shadow-hover:
    inset 0 1px 0 rgba(255, 255, 255, .13),
    0 18px 46px rgba(0, 0, 0, .38),
    0 0 30px rgba(var(--ui-accent-rgb), .16);

  /* Override the overly dark legacy frame tokens without changing markup. */
  --frame-surface: var(--ui-surface);
  --frame-surface-deep: var(--ui-surface-deep);
  --frame-line: var(--ui-border);
  --frame-line-hover: var(--ui-border-hover);
  --frame-fill: var(--ui-card-fill);
  --frame-fill-hover: var(--ui-card-fill-hover);
  --frame-bg: var(--ui-card-fill);
  --frame-bg-hover: var(--ui-card-fill-hover);
  --bg-card: var(--ui-surface);
  --bg-card2: var(--ui-surface-raised);
  --border: var(--ui-border);
  --border2: rgba(var(--ui-accent-2-rgb), .3);
  --adm-card: var(--ui-surface);
  --adm-surface: var(--ui-surface-deep);
  --adm-border: var(--ui-border);
}

html { color-scheme: dark; }

html:has(body.theme-light) {
  --ui-page: #eef2fb;
  background: #eef2fb !important;
  color-scheme: light;
}

body:not(.theme-light) {
  --sb2: var(--ui-surface);
  --sb3: var(--ui-surface-raised);
  --st2: rgba(240, 242, 248, .72);
  --st3: rgba(240, 242, 248, .48);
}

body.theme-light {
  min-height: 100vh;
  --ui-page: #eef2fb;
  --ui-surface: #ffffff;
  --ui-surface-raised: #f6f8ff;
  --ui-surface-deep: #e9eef9;
  --ui-text: #161a29;
  --ui-muted: #667085;
  --ui-border: rgba(var(--ui-accent-rgb), .17);
  --ui-border-hover: rgba(var(--ui-accent-rgb), .42);
  --ui-card-fill:
    radial-gradient(120% 115% at 8% 0%, rgba(var(--ui-accent-rgb), .09) 0%, transparent 43%),
    linear-gradient(145deg, rgba(255, 255, 255, .99), rgba(244, 247, 255, .99));
  --ui-card-fill-hover:
    radial-gradient(120% 115% at 12% 0%, rgba(var(--ui-accent-rgb), .14) 0%, transparent 46%),
    linear-gradient(145deg, #fff, #f0f4ff);
  --ui-card-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    0 12px 30px rgba(36, 45, 75, .1),
    0 0 22px rgba(var(--ui-accent-rgb), .05);
  --ui-card-shadow-hover:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 18px 40px rgba(36, 45, 75, .15),
    0 0 26px rgba(var(--ui-accent-rgb), .1);
  --frame-fill: var(--ui-card-fill);
  --frame-fill-hover: var(--ui-card-fill-hover);
  --bg-card: var(--ui-surface);
  --bg-card2: var(--ui-surface-raised);
  --border: var(--ui-border);
  --border2: rgba(var(--ui-accent-rgb), .26);
}

body.adm-body {
  --ui-accent-rgb: 102, 126, 234;
  --ui-accent-2-rgb: 132, 147, 255;
  --adm-bg: var(--ui-page);
  --adm-card-bg: var(--ui-surface);
  --adm-card-bg2: var(--ui-surface-raised);
  --adm-border: var(--ui-border);
  --adm-border2: rgba(var(--ui-accent-2-rgb), .32);
}

/* Restore the light canvas after frames-v3's hard-coded black v5 layer. */
body.theme-light,
body.theme-light .site-layout,
body.theme-light .site-main,
body.theme-light .page-content {
  background-color: var(--ui-page) !important;
}

body.theme-light .site-bg-overlay {
  background: radial-gradient(circle at 50% -20%, rgba(var(--ui-accent-rgb), .1), transparent 48%), var(--ui-page) !important;
  opacity: 1 !important;
}

/* Header settings still control color; this only adds depth and separation. */
.topbar,
.adm-topbar,
.admin-topbar {
  border-bottom: 1px solid rgba(var(--ui-accent-2-rgb), .16) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .2), 0 1px 0 rgba(255, 255, 255, .035) !important;
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  backdrop-filter: blur(18px) saturate(130%);
}

.sidebar,
.adm-sidebar,
.admin-sidebar {
  border-right-color: rgba(var(--ui-accent-2-rgb), .16) !important;
  box-shadow: 12px 0 38px rgba(0, 0, 0, .2) !important;
}

.topbar-search-wrap,
.adm-search-wrap,
.topbar-user,
.topbar-user-drop,
.site-language-menu {
  border-color: rgba(var(--ui-accent-2-rgb), .18) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .055), 0 8px 24px rgba(0, 0, 0, .16) !important;
}

/* Primary card and panel coverage. */
.home-logo-wrap,
.hd-profile-card,
.hd-desc-card,
.hd-stat-card,
.about-strip,
.about-card,
.tp3-wrap,
.tp3-head-right,
.tp3-feat,
.ann-section,
.ann-card,
.sp-section-header,
.sp-card,
.detail-header,
.detail-panel,
.info-box,
.file-info-card,
.download-tab-box,
.comment-section,
.comment-form,
.comment-item,
.modal-box,
.dlhero-stat-card,
.dl-card,
.dl-empty,
.blog-card,
.blog-comments-section,
.blog-comment-form,
.blog-comment-item,
.ct2-info-card,
.ct2-form-card,
.ct2-ch-card,
.ct2-faq,
.pd-panel,
.pd-purchase-panel,
.pd-pkg-card,
.pd-section,
.ord2-row-card,
.ord3-key-box,
.ord3-delivery-box,
.ord3-admin-note,
.od2-inner,
.hv3-stat,
.hv3-filterbar,
.hv3-panel,
.hv3-detail,
.hv3-detail-item,
.topup-section,
.topup-pkg,
.tc-telco,
.tc-input-group,
.bank-notice,
.vip-levelup-card,
.wt-stat,
.wt-card,
.wt-qa,
.wt-modal,
.wt-resp-box,
.rk-section,
.rk-my-pos,
.rk-empty-section,
.auth-card,
.captcha-box,
.static-container,
.wrap > .card,
.res-card,
.summary-card,
.qr-panel,
.detail-panel,
.info-card,
.status-wrap,
.adm-panel,
.adm-stat-card,
.admin-stat-card,
.admin-app-card,
.admin-form-section,
.admin-table-wrap,
.ao-order-card,
.ao-sum-card {
  background: var(--ui-card-fill) !important;
  border-color: var(--ui-border) !important;
  box-shadow: var(--ui-card-shadow) !important;
}

/* Page-local <style> blocks are emitted after the shared header. The extra
   body/page specificity keeps this final system authoritative without editing
   every legacy page stylesheet. */
body .page-content :where(
  :is(div, section, article, aside, form, fieldset, li, a, button)[class$="-card"]:not(.tp3-card):not(.rk-tier-card):not(.rk-pod-card),
  :is(div, section, article, aside, form, fieldset, li, a, button)[class*="-card "]:not(.tp3-card):not(.rk-tier-card):not(.rk-pod-card),
  :is(div, section, article, aside, form, fieldset, li)[class$="-panel"],
  :is(div, section, article, aside, form, fieldset, li)[class*="-panel "],
  :is(div, section, article, aside, form, fieldset, li)[class$="-box"],
  :is(div, section, article, aside, form, fieldset, li)[class*="-box "]
) {
  background: var(--ui-card-fill) !important;
  border-color: var(--ui-border) !important;
  box-shadow: var(--ui-card-shadow) !important;
}

body .page-content :where(
  .about-strip, .tp3-wrap, .tp3-head-right, .tp3-feat, .ann-section,
  .sp-section-header, .detail-header, .comment-section, .dl-empty,
  .blog-comments-section, .ct2-faq, .pd-section, .hv3-stat,
  .hv3-filterbar, .hv3-detail, .hv3-detail-item, .topup-section,
  .topup-pkg, .tc-telco, .tc-input-group, .bank-notice,
  .wt-stat, .wt-qa, .wt-resp-box, .rk-section, .rk-my-pos,
  .rk-empty-section, .static-container
) {
  background: var(--ui-card-fill) !important;
  border-color: var(--ui-border) !important;
  box-shadow: var(--ui-card-shadow) !important;
}

body .adm-main :where(
  :is(div, section, article, aside, form, fieldset, li)[class$="-card"],
  :is(div, section, article, aside, form, fieldset, li)[class*="-card "],
  :is(div, section, article, aside, form, fieldset, li)[class$="-panel"],
  :is(div, section, article, aside, form, fieldset, li)[class*="-panel "]
) {
  background: var(--ui-card-fill) !important;
  border-color: var(--ui-border) !important;
  box-shadow: var(--ui-card-shadow) !important;
}

/* Catch real container class tokens, without matching icon classes such as fa-credit-card. */
:where(.page-content, .auth-wrap, .res-wrap, .shell, .adm-main, .admin-main)
  :is(div, section, article, aside, form, fieldset, li, a, button)[class$="-card"],
:where(.page-content, .auth-wrap, .res-wrap, .shell, .adm-main, .admin-main)
  :is(div, section, article, aside, form, fieldset, li, a, button)[class*="-card "],
:where(.page-content, .auth-wrap, .res-wrap, .shell, .adm-main, .admin-main)
  :is(div, section, article, aside, form, fieldset, li)[class$="-panel"],
:where(.page-content, .auth-wrap, .res-wrap, .shell, .adm-main, .admin-main)
  :is(div, section, article, aside, form, fieldset, li)[class*="-panel "],
:where(.page-content, .auth-wrap, .res-wrap, .shell, .adm-main, .admin-main)
  :is(div, section, article, aside, form, fieldset, li)[class$="-box"],
:where(.page-content, .auth-wrap, .res-wrap, .shell, .adm-main, .admin-main)
  :is(div, section, article, aside, form, fieldset, li)[class*="-box "] {
  border-color: var(--ui-border) !important;
  box-shadow: var(--ui-card-shadow) !important;
}

/* Preserve page identities with a brighter accent wash. */
.hd-stat-balance,
.topup-section,
.topup-pkg,
.bank-notice,
.vip-levelup-card,
.status-wrap.success,
.res-card:has(.success) {
  --ui-accent-rgb: 0, 230, 118;
  --ui-accent-2-rgb: 78, 255, 163;
}

.hd-stat-orders,
.dl-card,
.dlhero-stat-card,
.summary-card,
.qr-panel,
.detail-panel {
  --ui-accent-rgb: 70, 135, 255;
  --ui-accent-2-rgb: 112, 165, 255;
}

.hd-stat-rank,
.rk-tier-card,
.rk-pod-card {
  --ui-accent-rgb: 255, 194, 72;
  --ui-accent-2-rgb: 255, 221, 112;
}

.wt-card,
.wt-stat,
.wt-modal,
.status-wrap.error,
.res-card:has(.fail) {
  --ui-accent-rgb: 255, 92, 112;
  --ui-accent-2-rgb: 255, 132, 145;
}

.ct2-info-card,
.ct2-form-card,
.ct2-ch-card,
.blog-card {
  --ui-accent-rgb: 132, 103, 255;
  --ui-accent-2-rgb: 183, 155, 255;
}

/* Artwork and rank cards keep their own gradients; only their frame becomes luminous. */
.tp3-card,
.rk-tier-card,
.rk-pod-card,
.pd-hero,
.wt-hero {
  border-color: rgba(var(--ui-accent-2-rgb), .3) !important;
  box-shadow: var(--ui-card-shadow) !important;
}

/* Selected and active choices need an unmistakable state. */
.topup-pkg.selected,
.topup-method.active,
.tc-telco.active,
.tc-telco.selected,
.tc-amount-btn.active,
.tc-amount-btn.selected,
.pd-pkg-card.selected,
.pd-pkg-card.active,
.dl-tab.active,
.hv3-tab.on,
.topup-tab.tab-on,
[role="tab"][aria-selected="true"] {
  border-color: rgba(var(--ui-accent-2-rgb), .72) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .13),
    0 0 0 2px rgba(var(--ui-accent-rgb), .13),
    0 12px 30px rgba(0, 0, 0, .28),
    0 0 26px rgba(var(--ui-accent-rgb), .2) !important;
}

/* Inputs are brighter and focus is visible across keyboard and pointer use. */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="submit"]),
select,
textarea,
.auth-input-wrap,
.topup-input-wrap,
.tc-input-group {
  background: linear-gradient(145deg, rgba(25, 29, 40, .98), rgba(15, 18, 27, .99)) !important;
  border-color: rgba(var(--ui-accent-2-rgb), .2) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045), inset 0 0 18px rgba(0, 0, 0, .14) !important;
}

body.theme-light input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="submit"]),
body.theme-light select,
body.theme-light textarea,
body.theme-light .auth-input-wrap,
body.theme-light .topup-input-wrap,
body.theme-light .tc-input-group {
  background: linear-gradient(145deg, #fff, #f5f7fd) !important;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):focus,
select:focus,
textarea:focus,
.auth-input-wrap:focus-within,
.topup-input-wrap:focus-within,
.tc-input-group:focus-within {
  border-color: rgba(var(--ui-accent-2-rgb), .72) !important;
  box-shadow: 0 0 0 3px rgba(var(--ui-accent-rgb), .15), 0 0 24px rgba(var(--ui-accent-rgb), .12) !important;
}

:where(a, button, input, select, textarea, [tabindex], [role="button"], [role="tab"]):focus-visible {
  outline: 2px solid var(--ui-focus) !important;
  outline-offset: 3px !important;
}

:where(button, input, select, textarea):disabled,
[aria-disabled="true"] {
  cursor: not-allowed !important;
  opacity: .58 !important;
}

/* Main CTAs share polish while semantic success/danger buttons retain their color. */
.sp-buy-btn,
.pm-buy-btn,
.pd-buy-btn,
.ct2-submit,
.topup-submit-btn,
.tc-submit-btn,
.topup-confirm-btn,
.wt-submit-btn,
.dl-card-btn,
.detail-dl-btn,
.auth-btn,
.adm-btn-primary {
  border: 1px solid rgba(255, 255, 255, .18) !important;
  box-shadow: 0 10px 28px rgba(var(--ui-accent-rgb), .28), inset 0 1px 0 rgba(255, 255, 255, .2) !important;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .24);
}

form[aria-busy="true"] :is(button[type="submit"], input[type="submit"]),
.is-submitting {
  cursor: progress !important;
}

/* Navigation gets a clear, luminous active state without replacing admin colors. */
.sb-item.sb-active,
.adm-nav-item.adm-nav-active {
  border-color: rgba(var(--ui-accent-2-rgb), .4) !important;
  box-shadow: inset 3px 0 0 rgba(var(--ui-accent-2-rgb), .88), 0 0 22px rgba(var(--ui-accent-rgb), .12) !important;
}

/* Tables and dense data panels remain readable. */
:where(.page-content, .adm-main, .admin-main) table th {
  background: rgba(var(--ui-accent-rgb), .08) !important;
  border-color: rgba(var(--ui-accent-2-rgb), .16) !important;
}

:where(.page-content, .adm-main, .admin-main) table td,
.hv3-row,
.rk-list-row {
  border-color: rgba(var(--ui-accent-2-rgb), .1) !important;
}

.hv3-detail-item {
  background: rgba(9, 12, 19, .34) !important;
}

body.theme-light .hv3-detail-item {
  background: rgba(var(--ui-accent-rgb), .045) !important;
}

/* Text legibility and long-content resilience. */
.page-content {
  color: var(--ui-text);
}

.ct2-info-card,
.ct2-info-body,
.ct2-info-val,
.pd-price-display,
.pd-pkg-main {
  min-width: 0;
}

.ct2-info-val,
.pd-price-display,
.static-container,
.info-card {
  overflow-wrap: anywhere;
}

.pd-price-display {
  flex-wrap: wrap;
}

.pd-pkg-stock {
  white-space: normal !important;
  text-align: right;
}

.static-container {
  width: min(920px, 100%);
  margin-inline: auto;
  padding: clamp(20px, 4vw, 40px) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 20px;
}

/* Toast classes are also available to page-specific notification helpers. */
.ui-toast,
#toastContainer > div {
  border-color: rgba(var(--ui-accent-2-rgb), .28) !important;
  box-shadow: 0 16px 42px rgba(0, 0, 0, .42), 0 0 24px rgba(var(--ui-accent-rgb), .12) !important;
}

@media (hover: hover) and (pointer: fine) {
  .about-card,
  .tp3-feat,
  .ann-card,
  .sp-card,
  .dl-card,
  .blog-card,
  .ct2-ch-card,
  .pd-pkg-card:not(.no-stock),
  .ord2-row-card,
  .topup-pkg,
  .topup-method,
  .tc-telco,
  .tc-amount-btn,
  .wt-card,
  .wt-qa,
  .rk-tier-card,
  .rk-pod-card,
  .adm-stat-card,
  .admin-stat-card,
  .admin-app-card,
  .ao-order-card {
    transition: transform .24s cubic-bezier(.22, 1, .36, 1), border-color .24s ease, box-shadow .24s ease, filter .24s ease;
    will-change: transform;
  }

  .about-card:hover,
  .tp3-feat:hover,
  .ann-card:hover,
  .sp-card:hover,
  .dl-card:hover,
  .blog-card:hover,
  .ct2-ch-card:hover,
  .pd-pkg-card:not(.no-stock):hover,
  .ord2-row-card:hover,
  .topup-pkg:hover,
  .topup-method:hover,
  .tc-telco:hover,
  .tc-amount-btn:hover,
  .wt-card:hover,
  .wt-qa:hover,
  .rk-tier-card:hover,
  .rk-pod-card:hover,
  .adm-stat-card:hover,
  .admin-stat-card:hover,
  .admin-app-card:hover,
  .ao-order-card:hover {
    transform: translateY(-3px);
    border-color: var(--ui-border-hover) !important;
    box-shadow: var(--ui-card-shadow-hover) !important;
    filter: brightness(1.045) saturate(1.06);
  }

  :where(.sp-buy-btn, .pm-buy-btn, .pd-buy-btn, .ct2-submit, .topup-submit-btn, .tc-submit-btn, .topup-confirm-btn, .wt-submit-btn, .dl-card-btn, .detail-dl-btn, .auth-btn, .adm-btn-primary):not(:disabled):hover {
    filter: brightness(1.1) saturate(1.08);
  }
}

/* Responsive repairs for the densest account and payment views. */
@media (max-width: 700px) {
  .page-content {
    padding-inline: max(10px, env(safe-area-inset-left)) max(10px, env(safe-area-inset-right)) !important;
  }

  .pd-price-display {
    align-items: flex-start;
  }

  .static-container {
    padding: 20px 16px !important;
    border-radius: 16px;
  }
}

@media (max-width: 560px) {
  body .page-content .tp3-card-sim,
  body .page-content .tp3-card-bank {
    min-height: 145px !important;
  }

  .wt-stats,
  .hv3-stats {
    grid-template-columns: 1fr !important;
  }

  .wt-stats .wt-stat,
  .hv3-stats .hv3-stat:last-child {
    grid-column: auto !important;
  }

  .hv3-detail-grid,
  #dtGrid,
  .wt-modal > div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  .wt-modal {
    max-height: calc(100dvh - 24px);
    overflow-y: auto;
  }

  .res-wrap,
  .wrap,
  .shell {
    margin-block: auto;
  }
}

@media (max-height: 620px) and (orientation: landscape) {
  body:has(> .res-wrap),
  body:has(> .wrap) {
    align-items: flex-start !important;
    overflow-y: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
  }

  .about-card,
  .tp3-feat,
  .ann-card,
  .sp-card,
  .dl-card,
  .blog-card,
  .ct2-ch-card,
  .pd-pkg-card,
  .ord2-row-card,
  .topup-pkg,
  .topup-method,
  .tc-telco,
  .wt-card,
  .wt-qa,
  .rk-tier-card,
  .rk-pod-card,
  .adm-stat-card,
  .admin-stat-card,
  .admin-app-card,
  .ao-order-card {
    transition-duration: .01ms !important;
    transform: none !important;
  }
}