/* ZYREX SHOP — Mobile readability layer
   Loaded after page-specific CSS so normal text stays comfortable to read.
   Decorative icons, badges and controls keep their intended compact sizing. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { font-size: 15px !important; line-height: 1.6 !important; }

/* General readable copy */
body p, body li, body label,
body .sub, body .hint, body .note, body .terms,
body .security, body .foot, body .empty,
body .description, body .muted, body .helper,
body .email, body .last, body .stat-note,
body .terms-note, body .row-main span,
body .notice-main span, body .notice-main b {
  font-size: 13px !important;
  line-height: 1.65 !important;
}

body small { font-size: 12px !important; line-height: 1.5 !important; }
body input, body textarea, body select {
  font-size: 15px !important;
  line-height: 1.4 !important;
}
body button { font-size: 14px !important; }

/* Auth pages */
body .field label, body .field-label-row label {
  font-size: 13px !important;
  line-height: 1.4 !important;
  letter-spacing: .45px !important;
}
body .forgot-inline { font-size: 12px !important; }
body .flash { font-size: 13px !important; line-height: 1.55 !important; }
body .foot { font-size: 13px !important; }
body .security { font-size: 12px !important; }
body .google-btn, body .btn { font-size: 14px !important; }

/* Dashboard / customer pages */
body .hero-sub, body .welcome-copy-card .hero-sub { font-size: 14px !important; line-height: 1.65 !important; }
body .section-head small { font-size: 12px !important; }
body .section-head a { font-size: 12px !important; }
body .quick span { font-size: 12px !important; line-height: 1.5 !important; }
body .quick strong { font-size: 14px !important; }
body .balance-label { font-size: 12px !important; }
body .profile-role { font-size: 11px !important; }
body .profile-name { font-size: 12px !important; }
body .pill, body .kind { font-size: 11px !important; }
body .row-main strong { font-size: 14px !important; }
body .row-right b { font-size: 12px !important; }
body .stat-label { font-size: 12px !important; }
body .stat-note { font-size: 12px !important; }
body .notice-main strong { font-size: 14px !important; }
body .term { font-size: 13px !important; line-height: 1.65 !important; }

/* SMM / OTP lists and details */
body .service-name, body .product-name, body .title { font-size: 16px !important; }
body .service-desc, body .product-desc, body .description { font-size: 13px !important; line-height: 1.6 !important; }
body .price, body .amount, body .value { font-size: 13px !important; }
body .status { font-size: 11px !important; }
body .back { font-size: 12px !important; }

/* Admin pages: readable without making badges/utility labels huge */
body .sub { font-size: 13px !important; }
body .count { font-size: 12px !important; }
body .name { font-size: 16px !important; }
body .time { font-size: 11px !important; }
body .badge { font-size: 11px !important; }
body .msg { font-size: 14px !important; line-height: 1.6 !important; }
body .sender { font-size: 12px !important; }

/* Preserve intentional large headings */
body h1 { line-height: 1.15 !important; }
body h2 { line-height: 1.25 !important; }
body h3 { line-height: 1.3 !important; }

/* Mobile: slightly larger body copy and comfortable spacing */
@media (max-width: 600px) {
  body { font-size: 15px !important; }
  body p, body li, body label,
  body .sub, body .hint, body .note, body .terms,
  body .description, body .muted, body .helper { font-size: 14px !important; }
  body small { font-size: 12px !important; }
  body input, body textarea, body select { font-size: 16px !important; }
  body button, body .btn, body .google-btn { font-size: 14px !important; }
}

/* DASHBOARD NAV CONSISTENCY v12
   All member-facing "Dashboard" navigation uses one compact premium button,
   aligned to the left side of the page header. */
body a.dashboard-btn,
body a.back.dashboard-btn,
body a.back-btn.dashboard-btn,
body a.deposit-back.dashboard-btn {
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:7px !important;
  min-height:42px !important;
  padding:0 15px !important;
  border:1px solid rgba(255,199,44,.22) !important;
  border-radius:13px !important;
  background:linear-gradient(180deg,#171c24,#11151b) !important;
  color:#f3f5f8 !important;
  text-decoration:none !important;
  font-size:13px !important;
  line-height:1 !important;
  font-weight:800 !important;
  white-space:nowrap !important;
  box-shadow:0 8px 24px rgba(0,0,0,.18) !important;
  transition:transform .18s ease,border-color .18s ease,background .18s ease !important;
}
body a.dashboard-btn:hover,
body a.dashboard-btn:focus-visible {
  border-color:rgba(255,199,44,.42) !important;
  background:linear-gradient(180deg,#1b212b,#141920) !important;
  transform:translateY(-1px) !important;
}
body a.dashboard-btn:active { transform:scale(.98) !important; }

/* Standard left-aligned Dashboard navigation. */
body .topbar,
body .history-head,
body .wrap > .top,
body .history-wrap > .top,
body .page-nav {
  gap:14px !important;
}
body .topbar .dashboard-btn,
body .history-head .dashboard-btn,
body .wrap > .top > .dashboard-btn,
body .history-wrap > .top > .dashboard-btn,
body .page-nav .dashboard-btn {
  margin-left:0 !important;
  margin-right:auto !important;
  flex:0 0 auto !important;
  order:-1 !important;
}
/* Center simple page titles while keeping Dashboard pinned left. */
body .topbar > .title { flex:1 1 auto !important; text-align:center !important; }
body .history-head > div:first-child { flex:1 1 auto !important; text-align:center !important; }

/* OTP detail has a standalone back link; put it in the same header treatment. */
body .otp-detail-header,
body main.page > .header {
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:14px !important;
}

/* Info page: Dashboard button is a real button and stays on the left. */
body .info-page-head {
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  margin-bottom:18px !important;
}

@media(max-width:560px){
  body a.dashboard-btn,
  body a.back.dashboard-btn,
  body a.back-btn.dashboard-btn,
  body a.deposit-back.dashboard-btn {
    min-height:40px !important;
    padding:0 13px !important;
    font-size:12px !important;
  }
}

/* BUTTON READABILITY v13: larger labels/icons without enlarging compact metadata. */
body a.dashboard-btn,
body a.back.dashboard-btn,
body a.back-btn.dashboard-btn,
body a.deposit-back.dashboard-btn,
body .history-btn,
body .history-link,
body button,
body .btn,
body .google-btn,
body [type=submit] {
  font-size:15px !important;
  line-height:1.2 !important;
}
body a.dashboard-btn, body a.back.dashboard-btn, body a.back-btn.dashboard-btn, body a.deposit-back.dashboard-btn {
  min-height:44px !important;
  padding:0 16px !important;
}
body a.dashboard-btn::first-letter, body button::first-letter, body .btn::first-letter, body .history-btn::first-letter {
  font-size:1.12em !important;
}
@media(max-width:600px){
  body a.dashboard-btn, body a.back.dashboard-btn, body a.back-btn.dashboard-btn, body a.deposit-back.dashboard-btn,
  body .history-btn, body .history-link, body button, body .btn, body .google-btn, body [type=submit] { font-size:15px !important; }
}


/* =========================================================
   ZYREX UI POLISH v15 — consistent mobile-first navigation
   ========================================================= */
:root{
  --zx-bg:#07090d;
  --zx-surface:#10141b;
  --zx-surface-2:#141922;
  --zx-line:rgba(255,255,255,.09);
  --zx-text:#f7f8fb;
  --zx-muted:#929baa;
  --zx-gold:#f6c43d;
}

/* Never let decorative metadata become unreadably tiny. */
body .eyebrow,
body .history-kicker { font-size:11px !important; line-height:1.4 !important; }
body .meta,
body .tx-meta,
body .time { font-size:12px !important; line-height:1.55 !important; }
body .count,
body .section-hint,
body .section-head small { font-size:12px !important; line-height:1.4 !important; }
body .badge,
body .pill,
body .kind,
body .tag,
body .status { font-size:11px !important; line-height:1.2 !important; }

/* One navigation language: Dashboard always left, title centered. */
body .profile-nav,
body .deposit-header,
body .history-head,
body .page-nav,
body .otp-detail-header{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) !important;
  align-items:center !important;
  gap:12px !important;
  min-height:52px !important;
  margin-bottom:20px !important;
}
body .profile-nav > .dashboard-btn,
body .deposit-header > .dashboard-btn,
body .history-head > .dashboard-btn,
body .page-nav > .dashboard-btn{
  grid-column:1 !important;
  justify-self:start !important;
  margin:0 !important;
}
body .profile-nav > .title,
body .deposit-header > .title-block,
body .history-head > div:first-child,
body .page-nav > .page-nav-title{
  grid-column:2 !important;
  grid-row:1 !important;
  justify-self:center !important;
  text-align:center !important;
  min-width:0 !important;
}
body .profile-nav > .nav-spacer,
body .deposit-header > .nav-spacer,
body .history-head > .nav-spacer{
  grid-column:3 !important;
}
body .profile-nav .title{font-size:22px !important;line-height:1.2 !important;}
body .deposit-header .title{font-size:25px !important;line-height:1.15 !important;}
body .deposit-header .sub{margin-top:5px !important;}
body .history-head .history-title{font-size:25px !important;line-height:1.15 !important;}

/* OTP/SMM: three-column header, matching the intended design. */
body .page-nav{
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) !important;
  padding:0 !important;
}
body .page-nav > .history-btn{
  grid-column:3 !important;
  justify-self:end !important;
  margin:0 !important;
}
body .page-nav-title{font-size:14px !important;line-height:1.25 !important;}
body .page-nav-title > div{font-size:11px !important;letter-spacing:.25em !important;}
body .page-nav-title > strong{font-size:15px !important;white-space:nowrap !important;}

/* Active orders: clean header after removing the redundant global history link. */
body .wrap > .top{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  min-height:52px !important;
  margin-bottom:20px !important;
}
body .wrap > .top .dashboard-btn{margin:0 !important;}
body .active-orders-title{max-width:760px;margin-left:auto;margin-right:auto;}

/* Modern cards: consistent depth without excessive glow. */
body .card,
body .tx-card,
body .list,
body .hero,
body .shell,
body .section-card{
  box-shadow:0 16px 42px rgba(0,0,0,.20) !important;
}
body .card,
body .tx-card,
body .item,
body .list-row,
body .service-card,
body .category-card{
  border-color:rgba(255,255,255,.085) !important;
}

/* Buttons: larger, clearer labels and touch targets. */
body a.dashboard-btn,
body .history-btn,
body .history-link,
body .mark-all,
body button,
body .btn,
body .google-btn,
body [type=submit]{
  min-height:46px !important;
  font-size:15px !important;
  font-weight:800 !important;
}
body a.dashboard-btn,
body .history-btn,
body .history-link,
body .mark-all{
  padding-left:17px !important;
  padding-right:17px !important;
}
body a.dashboard-btn::first-letter,
body .history-btn::first-letter,
body .history-link::first-letter,
body button::first-letter,
body .btn::first-letter{
  font-size:1.15em !important;
}

/* Dashboard copy matches landing-page hierarchy. */
body .welcome-copy-card .eyebrow{font-size:12px !important;letter-spacing:.08em !important;}
body .welcome-copy-card .hello{font-size:clamp(30px,6vw,48px) !important;line-height:1.08 !important;letter-spacing:-.045em !important;}
body .welcome-copy-card .hero-sub{font-size:15px !important;line-height:1.7 !important;max-width:760px !important;}

/* SMM / OTP main copy should remain comfortably readable. */
body .shell-head h1,
body .page-title,
body .title h1{font-size:28px !important;line-height:1.15 !important;}
body .shell-head p,
body .title p{font-size:14px !important;line-height:1.65 !important;}
body .section-head h2{font-size:19px !important;}
body .service-card,
body .category-card{font-size:15px !important;}

/* Deposit history rows: clear hierarchy. */
body .deposit-header + .list{margin-top:4px !important;}
body .deposit-header + .list .item{min-height:88px !important;padding:18px !important;}
body .deposit-header + .list .name{font-size:14px !important;}
body .deposit-header + .list .meta{font-size:12px !important;}
body .deposit-header + .list .amount{font-size:16px !important;}

/* Mobile layout. */
@media (max-width:600px){
  body .profile-nav,
  body .deposit-header,
  body .history-head,
  body .page-nav{
    grid-template-columns:auto minmax(0,1fr) auto !important;
    gap:9px !important;
  }
  body .profile-nav > .title,
  body .deposit-header > .title-block,
  body .history-head > div:first-child,
  body .page-nav > .page-nav-title{
    grid-column:2 !important;
  }
  body .profile-nav .title{font-size:20px !important;}
  body .deposit-header .title,
  body .history-head .history-title{font-size:21px !important;}
  body .deposit-header .eyebrow{font-size:10px !important;}
  body .deposit-header .sub{font-size:11px !important;}
  body .page-nav-title > div{font-size:10px !important;}
  body .page-nav-title > strong{font-size:13px !important;}
  body a.dashboard-btn,
  body .history-btn,
  body .history-link{min-height:44px !important;font-size:14px !important;padding:0 13px !important;}
  body .welcome-copy-card .hello{font-size:31px !important;}
  body .welcome-copy-card .hero-sub{font-size:14px !important;}
  body .shell-head h1,
  body .title h1{font-size:27px !important;}
  body .section-head h2{font-size:18px !important;}
  body .meta,
  body .tx-meta{font-size:12px !important;}
}

/* Very narrow phones: prevent header collisions. */
@media (max-width:380px){
  body .profile-nav .dashboard-btn,
  body .deposit-header .dashboard-btn,
  body .page-nav .dashboard-btn{padding:0 10px !important;font-size:12px !important;}
  body .page-nav-title > strong{font-size:12px !important;}
}

/* =========================================================
   ZYREX FINAL UI POLISH v16
   Compact, consistent mobile navigation.
   ========================================================= */
body a.dashboard-btn,
body a.back.dashboard-btn,
body a.back-btn.dashboard-btn,
body a.deposit-back.dashboard-btn {
  min-height:40px !important;
  height:40px !important;
  padding:0 13px !important;
  border-radius:12px !important;
  font-size:12px !important;
  font-weight:800 !important;
  gap:6px !important;
}

/* Transaction/history pages: one consistent centered title with Dashboard pinned left. */
body .history-head,
body .deposit-header {
  display:grid !important;
  grid-template-columns:auto minmax(0,1fr) auto !important;
  align-items:center !important;
  gap:12px !important;
}
body .history-head .dashboard-btn,
body .deposit-header .dashboard-btn { justify-self:start !important; }
body .history-head-copy,
body .deposit-header .title-block {
  min-width:0 !important;
  text-align:center !important;
  justify-self:center !important;
}
body .history-head-spacer,
body .deposit-header .nav-spacer {
  width:1px !important;
  min-width:1px !important;
}
body .history-title,
body .deposit-header .title { font-size:22px !important; line-height:1.2 !important; }
body .history-sub,
body .deposit-header .sub { font-size:12px !important; line-height:1.45 !important; }

/* Landing: Login and Daftar are both visible and balanced on phones. */
body .app .topbar .actions {
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:8px !important;
  flex:0 0 auto !important;
}
body .app .topbar .actions .btn {
  min-height:42px !important;
  height:42px !important;
  padding:0 14px !important;
  font-size:13px !important;
  border-radius:13px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
}
@media(max-width:600px){
  body .app .topbar .actions .ghost { display:inline-flex !important; }
  body .app .topbar .actions .btn { min-height:40px !important; height:40px !important; padding:0 12px !important; font-size:12px !important; }
  body .app .topbar { gap:9px !important; }
  body .app .brand { min-width:0 !important; }
  body .app .brand strong { font-size:14px !important; }
}

/* Keep action buttons comfortable but not oversized. */
body .history-btn,
body .history-link {
  min-height:40px !important;
  height:40px !important;
  padding:0 13px !important;
  border-radius:12px !important;
  font-size:12px !important;
}