/* ================================================================
   GALI BAZZAR — USER UI CONSISTENCY LAYER
   PRESENTATION ONLY. No JS/PHP/business logic.
   ================================================================ */
:root{
  --ui-blue:#0078fe;
  --ui-blue-2:#0688ff;
  --ui-blue-soft:#edf9ff;
  --ui-green:#18b968;
  --ui-red:#ff4b55;
  --ui-ink:#17212b;
  --ui-muted:#66727e;
  --ui-line:#dfe5ea;
  --ui-bg:#f6f8fa;
  --ui-white:#fff;
  --ui-radius:14px;
  --kl-pink:var(--ui-blue) !important;
  --kl-purple:var(--ui-blue) !important;
  --kl-gradient:var(--ui-blue) !important;
  --kl-green:var(--ui-green) !important;
  --rk-purple:var(--ui-blue) !important;
  --rk-purple-dark:#0d509b !important;
  --rk-pink:var(--ui-blue) !important;
  --rk-pink-light:var(--ui-blue-2) !important;
  --rk-bg:var(--ui-bg) !important;
  --green:var(--ui-green) !important;
  --red:var(--ui-red) !important;
}

html{background:var(--ui-bg) !important;}
body{
  background:var(--ui-bg) !important;
  color:var(--ui-ink) !important;
  font-family:Arial,Helvetica,sans-serif !important;
  font-size:14px !important;
  line-height:1.4 !important;
}

/* Kill legacy pink/orange visual tokens. */
*[style*="#ff700a"],*[style*="#FF700A"],
*[style*="#eb5200"],*[style*="#cc3e02"],
*[style*="rgb(255, 112, 10)"],*[style*="rgb(255,112,10)"],
*[style*="rgba(255,0,204"],*[style*="rgba(255, 0, 204"],
*[style*="orange"]{
  background:var(--ui-blue) !important;
  border-color:var(--ui-blue) !important;
  color:#fff !important;
}

/* Legacy variables used by inline/page CSS. */
.page-title,.section-title,.title,.heading,h1,h2,h3{color:var(--ui-ink) !important;}
.page-title{font-size:24px !important;font-weight:800 !important;line-height:1.2 !important;}

/* Keep action semantics: green add/play, red withdrawal/danger. */
button[type="submit"],.primary-btn,.action-btn{font-size:13px !important;min-height:44px !important;line-height:1 !important;font-weight:700 !important;}

/* Common cards / panels */
.card,.panel,.box,.content-card,.info-card,.history-card,.notice-card,.rate-card,
.modal-content,.form-card,.kyc-card,.method-card,.chart-card{
  border-color:var(--ui-line) !important;
  border-radius:var(--ui-radius) !important;
  box-shadow:none !important;
}

/* Inputs */
input,select,textarea{
  font-family:Arial,Helvetica,sans-serif !important;
  font-size:14px !important;
  border-color:var(--ui-line) !important;
  border-radius:11px !important;
  box-shadow:none !important;
}

/* Buttons */
button,.btn,[class*="btn"],[class*="button"]{
  font-family:Arial,Helvetica,sans-serif !important;
  letter-spacing:0 !important;
  box-shadow:none !important;
}

/* Legacy orange selectors by common names */
.action-btn,.game-btn,.chart-btn,.rate-btn,.tab-btn,.primary-action,
.deposit-btn,.pay-btn,.submit-btn,.download-btn,.send-btn{
  background:var(--ui-blue) !important;
  border-color:var(--ui-blue) !important;
  color:#fff !important;
}

/* Preserve explicit semantic red/green classes. */
.withdraw,.withdraw-btn,.danger,.danger-btn,.delete-btn,.reject-btn{
  background:var(--ui-red) !important;
  border-color:var(--ui-red) !important;
  color:#fff !important;
}
.add-money,.add-money-btn,.success,.success-btn,.play-btn,.play,.open-btn{
  background:var(--ui-green) !important;
  border-color:var(--ui-green) !important;
  color:#fff !important;
}

/* Header */
.header-bar,.top-header,.main-header,.navbar,.site-header{
  background:#fff !important;
  border-bottom:1px solid var(--ui-line) !important;
  box-shadow:none !important;
}

/* Header action pills */
.wallet-balance,.wallet-pill,.balance-pill{
  background:#17191c !important;
  color:#fff !important;
  border:none !important;
  box-shadow:none !important;
}

/* Exact common bottom navigation for the five primary user pages. */
.bottom-menu{
  position:fixed !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  width:100% !important;
  height:64px !important;
  padding:6px 0 5px !important;
  margin:0 !important;
  display:flex !important;
  justify-content:space-around !important;
  align-items:stretch !important;
  background:#fff !important;
  border-top:1px solid var(--ui-line) !important;
  border-radius:0 !important;
  box-shadow:none !important;
  z-index:9999 !important;
}
.bottom-menu .menu-item,.menu-item{
  flex:1 !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:2px !important;
  padding:0 !important;
  margin:0 !important;
  background:transparent !important;
  border:0 !important;
  color:#8b949d !important;
  text-decoration:none !important;
  font-family:Arial,Helvetica,sans-serif !important;
  font-size:10px !important;
  line-height:12px !important;
  font-weight:600 !important;
  box-shadow:none !important;
}
.bottom-menu .menu-item i,.menu-item i{
  margin:0 !important;
  font-size:20px !important;
  line-height:22px !important;
}
.bottom-menu .menu-item.active,.bottom-menu .menu-item.active i,
.menu-item.active,.menu-item.active i{color:var(--ui-blue) !important;}

/* Page width: clean mobile-app canvas on desktop, full width on mobile. */
@media (min-width:700px){
  body{min-height:100vh !important;}
  .header-bar,.top-header,.main-header,.navbar,.site-header,
  .bottom-menu{max-width:430px !important;margin-left:auto !important;margin-right:auto !important;}
}
@media (max-width:699px){
  .header-bar,.top-header,.main-header,.navbar,.site-header{width:100% !important;}
}

/* Common spacing normalization */
.card,.panel,.box,.content-card,.info-card{padding:15px !important;}
button,.btn{min-height:42px !important;padding:10px 16px !important;border-radius:11px !important;}

/* No decorative glow/shadow. */
*,*::before,*::after{box-shadow:none !important;text-shadow:none !important;}

/* =========================================================
   V8 COLOR NORMALIZATION — USER FRONTEND ONLY
   Keep dashboard action buttons visually consistent.
   ========================================================= */
body .hero-actions .hero-btn.golden-btn,
body .hero-actions .hero-btn.red,
body .hero-actions .hero-btn.add-money,
body .hero-actions .hero-btn.withdraw,
body .hero-actions .hero-btn.withdraw-btn {
  background: #0078fe !important;
  background-image: none !important;
  border-color: #0078fe !important;
  color: #fff !important;
}

body .hero-actions .hero-btn.golden-btn:hover,
body .hero-actions .hero-btn.red:hover,
body .hero-actions .hero-btn.add-money:hover,
body .hero-actions .hero-btn.withdraw:hover,
body .hero-actions .hero-btn.withdraw-btn:hover {
  background: #0688ff !important;
  background-image: none !important;
  border-color: #0688ff !important;
  color: #fff !important;
}

/* Neutral secondary actions remain white; blue icon treatment stays consistent. */
body .hero-actions .hero-btn.whatsapp,
body .hero-actions .hero-btn.blue {
  background: #fff !important;
  background-image: none !important;
  border: 1px solid #dfe5ea !important;
  color: #17212b !important;
}

body .hero-actions .hero-btn.whatsapp i,
body .hero-actions .hero-btn.blue i,
body .hero-actions .hero-btn.golden-btn > span:first-child,
body .hero-actions .hero-btn.red i {
  background: #1649d8 !important;
  color: #fff !important;
}