/* =====================================================================
   DjimlyStore Digital v2.37.10
   GLOBAL CLEAN / LIGHT-BLUE DESIGN SYSTEM
   - active navigation icons always visible
   - modern light-blue home category icons
   - remove dark navy/black buttons from customer UI
   - refine 1xBet popup layout
===================================================================== */

:root{
  --djs-ui-blue-50:#eff8ff;
  --djs-ui-blue-100:#dbeeff;
  --djs-ui-blue-200:#b2ddff;
  --djs-ui-blue-500:#2e90fa;
  --djs-ui-blue-600:#1570ef;
  --djs-ui-blue-700:#175cd3;
  --djs-ui-ink:#101828;
  --djs-ui-text:#344054;
  --djs-ui-muted:#667085;
  --djs-ui-line:#e4e7ec;
  --djs-ui-soft:#f8fafc;
}

/* ---------------------------------------------------------------------
   BOTTOM DOCK — active icon must ALWAYS remain visible
--------------------------------------------------------------------- */
html body #djs-portal #djs-global-bottom-nav>.djs-bn-item{
  color:#667085!important;
}
html body #djs-portal #djs-global-bottom-nav>.djs-bn-item>.djs-modern-nav-icon{
  opacity:1!important;
  visibility:visible!important;
  background:transparent!important;
  color:#344054!important;
  -webkit-text-fill-color:#344054!important;
}
html body #djs-portal #djs-global-bottom-nav>.djs-bn-item>.djs-modern-nav-icon svg,
html body #djs-portal #djs-global-bottom-nav>.djs-bn-item>.djs-modern-nav-icon svg path,
html body #djs-portal #djs-global-bottom-nav>.djs-bn-item>.djs-modern-nav-icon svg circle,
html body #djs-portal #djs-global-bottom-nav>.djs-bn-item>.djs-modern-nav-icon svg rect,
html body #djs-portal #djs-global-bottom-nav>.djs-bn-item>.djs-modern-nav-icon svg line{
  opacity:1!important;
  visibility:visible!important;
  stroke:#344054!important;
}
html body #djs-portal #djs-global-bottom-nav>.djs-bn-item.active{
  background:var(--djs-ui-blue-50)!important;
  color:var(--djs-ui-blue-700)!important;
}
html body #djs-portal #djs-global-bottom-nav>.djs-bn-item.active>.djs-modern-nav-icon{
  opacity:1!important;
  visibility:visible!important;
  background:var(--djs-ui-blue-100)!important;
  color:var(--djs-ui-blue-700)!important;
  -webkit-text-fill-color:var(--djs-ui-blue-700)!important;
  box-shadow:none!important;
}
html body #djs-portal #djs-global-bottom-nav>.djs-bn-item.active>.djs-modern-nav-icon svg,
html body #djs-portal #djs-global-bottom-nav>.djs-bn-item.active>.djs-modern-nav-icon svg path,
html body #djs-portal #djs-global-bottom-nav>.djs-bn-item.active>.djs-modern-nav-icon svg circle,
html body #djs-portal #djs-global-bottom-nav>.djs-bn-item.active>.djs-modern-nav-icon svg rect,
html body #djs-portal #djs-global-bottom-nav>.djs-bn-item.active>.djs-modern-nav-icon svg line{
  opacity:1!important;
  visibility:visible!important;
  stroke:var(--djs-ui-blue-700)!important;
}
html body #djs-portal #djs-global-bottom-nav>.djs-bn-item.active>span:not(.djs-modern-nav-icon):not(.djs-cart-count-badge):not(.djs-message-unread-badge){
  color:var(--djs-ui-blue-700)!important;
  -webkit-text-fill-color:var(--djs-ui-blue-700)!important;
  font-weight:900!important;
}

/* ---------------------------------------------------------------------
   STOREFRONT QUICK CATEGORIES — modern blue icon language
--------------------------------------------------------------------- */
html body #djs-portal .djs-preview-cats-v23710{
  gap:10px!important;
}
html body #djs-portal .djs-preview-cats-v23710 .djs-preview-cat-tile{
  min-height:92px!important;
  padding:11px 13px!important;
  border:1px solid #e2e7ee!important;
  border-radius:19px!important;
  background:#fff!important;
  box-shadow:0 6px 18px rgba(16,24,40,.035)!important;
  transition:transform .14s ease,border-color .14s ease,box-shadow .14s ease!important;
}
html body #djs-portal .djs-preview-cats-v23710 .djs-preview-cat-tile:active{
  transform:scale(.985)!important;
  border-color:var(--djs-ui-blue-200)!important;
  box-shadow:0 5px 14px rgba(46,144,250,.07)!important;
}
html body #djs-portal .djs-preview-cats-v23710 .djs-preview-cat-icon{
  width:50px!important;
  height:50px!important;
  min-width:50px!important;
  border-radius:15px!important;
  background:var(--djs-ui-blue-50)!important;
  border:1px solid var(--djs-ui-blue-200)!important;
  color:var(--djs-ui-blue-700)!important;
  display:grid!important;
  place-items:center!important;
  box-shadow:none!important;
  overflow:hidden!important;
}
html body #djs-portal .djs-preview-cats-v23710 .djs-preview-cat-icon.has-photo{
  background:#fff!important;
  border-color:#e4e7ec!important;
}
html body #djs-portal .djs-preview-cats-v23710 .djs-preview-cat-icon.has-photo img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
}
html body #djs-portal .djs-preview-cats-v23710 .djs-cat-svg{
  width:25px!important;
  height:25px!important;
  display:block!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:1.75!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}
html body #djs-portal .djs-preview-cats-v23710 .djs-preview-cat-tile>b,
html body #djs-portal .djs-preview-cats-v23710 .djs-preview-cat-tile>span:last-child>b{
  color:#101828!important;
}
html body #djs-portal .djs-preview-cats-v23710 .djs-preview-cat-tile>span:last-child small{
  color:#667085!important;
}

/* ---------------------------------------------------------------------
   SHARED CUSTOMER BUTTON SYSTEM — no dark navy / black CTAs
   Dark historical selectors are deliberately overridden here.
--------------------------------------------------------------------- */
html body #djs-portal .djs-main-menu-wallet-card>button,
html body #djs-portal .djs-ttc-add,
html body #djs-portal .djs-xbet-add-btn,
html body #djs-portal .djs-wallet-p3-ready button,
html body #djs-portal .djs-wallet-v2378-exchange-ready button,
html body #djs-portal .djs-wallet-recipient-row button,
html body #djs-portal #djs-screen-wallet-recharge .djs-wallet-deposit-submit-p3,
html body #djs-portal #djs-screen-wallet-recharge .djs-wallet-moncash-submit,
html body #djs-portal #djs-screen-wallet-recharge .djs-wallet-paypal-submit,
html body #djs-portal #djs-screen-wallet-recharge .djs-wallet-moncash-submit.is-crypto,
html body #djs-portal #djs-screen-wallet-recharge .djs-recharge-submit-nat,
html body #djs-portal #djs-screen-wallet-recharge .djs-recharge-submit-crypto,
html body #djs-portal #djs-screen-wallet-recharge .djs-deposit-submit,
html body #djs-portal #djs-screen-wallet-recharge .djs-giftcard-activate-btn,
html body #djs-portal #djs-screen-wallet-withdraw .djs-withdraw-submit,
html body #djs-portal #djs-screen-cart .djs-cart-pay-btn,
html body #djs-portal #djs-screen-cart #djs-cart-payerurl-pay,
html body #djs-portal #djs-screen-cart .djs-cart-reference-empty button,
html body #djs-portal .djs-order-view-btn,
html body #djs-portal .djs-sub-renew-confirm,
html body #djs-portal .djs-achat-submit,
html body #djs-portal #djs-screen-points .djs-points-empty-action{
  background:var(--djs-ui-blue-50)!important;
  background-image:none!important;
  border:1px solid var(--djs-ui-blue-200)!important;
  color:var(--djs-ui-blue-700)!important;
  -webkit-text-fill-color:var(--djs-ui-blue-700)!important;
  box-shadow:0 6px 16px rgba(46,144,250,.08)!important;
  text-shadow:none!important;
  filter:none!important;
}
html body #djs-portal .djs-main-menu-wallet-card>button .ms,
html body #djs-portal .djs-ttc-add .ms,
html body #djs-portal .djs-xbet-add-btn .ms,
html body #djs-portal #djs-screen-cart .djs-cart-pay-btn .ms,
html body #djs-portal #djs-screen-cart #djs-cart-payerurl-pay .ms{
  color:var(--djs-ui-blue-700)!important;
  -webkit-text-fill-color:var(--djs-ui-blue-700)!important;
}
html body #djs-portal .djs-main-menu-wallet-card>button:hover,
html body #djs-portal .djs-ttc-add:hover,
html body #djs-portal .djs-xbet-add-btn:hover,
html body #djs-portal .djs-wallet-p3-ready button:hover,
html body #djs-portal .djs-wallet-recipient-row button:hover,
html body #djs-portal #djs-screen-cart .djs-cart-pay-btn:hover,
html body #djs-portal .djs-order-view-btn:hover{
  background:#e4f2ff!important;
  border-color:#84caff!important;
  color:#1849a9!important;
  -webkit-text-fill-color:#1849a9!important;
}
html body #djs-portal .djs-ttc-add:disabled,
html body #djs-portal .djs-xbet-add-btn:disabled,
html body #djs-portal #djs-screen-cart .djs-cart-pay-btn:disabled,
html body #djs-portal .djs-wallet-recipient-row button:disabled{
  background:#f2f4f7!important;
  border-color:#e4e7ec!important;
  color:#98a2b3!important;
  -webkit-text-fill-color:#98a2b3!important;
  box-shadow:none!important;
}

/* Customer Message Center: replace old black active/send controls with blue. */
html body #djs-portal .djs-chat-send,
html body #djs-portal .djs-chat-rating-sheet .djs-chat-rating-submit{
  background:var(--djs-ui-blue-600)!important;
  border-color:var(--djs-ui-blue-600)!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  box-shadow:0 6px 16px rgba(21,112,239,.16)!important;
}
html body #djs-portal .djs-mc-thread-actions .djs-mc-action.is-active,
html body #djs-portal #djs-mc-thread-actions .djs-mc-action.is-active{
  background:var(--djs-ui-blue-50)!important;
  border-color:var(--djs-ui-blue-200)!important;
  color:var(--djs-ui-blue-700)!important;
}

/* Referral copy/open controls: remove black icon blocks. */
html body #djs-portal .djs-referral-code-line button,
html body #djs-portal .djs-referral-link-row button,
html body #djs-portal #djs-screen-invite-earn .djs-referral-code-line button,
html body #djs-portal #djs-screen-invite-earn .djs-referral-link-row button,
html body #djs-portal .djs-referral-bonus-side>button{
  background:var(--djs-ui-blue-50)!important;
  border-color:var(--djs-ui-blue-200)!important;
  color:var(--djs-ui-blue-700)!important;
  -webkit-text-fill-color:var(--djs-ui-blue-700)!important;
}

/* Achat USA marketplace-site badges were black blocks. Make them neutral blue. */
html body #djs-portal .djs-achat-sites button span{
  background:var(--djs-ui-blue-50)!important;
  color:var(--djs-ui-blue-700)!important;
  border:1px solid var(--djs-ui-blue-200)!important;
}
html body #djs-portal .djs-achat-sites button:nth-child(2) span,
html body #djs-portal .djs-achat-sites button:nth-child(3) span,
html body #djs-portal .djs-achat-sites button:nth-child(4) span{
  background:var(--djs-ui-blue-50)!important;
  color:var(--djs-ui-blue-700)!important;
}

/* ---------------------------------------------------------------------
   WALLET — remove remaining dark CTA / tab states
--------------------------------------------------------------------- */
html body #djs-portal #djs-screen-wallet .djs-wallet-v2378-exchange-ready button{
  background:var(--djs-ui-blue-50)!important;
  border:1px solid var(--djs-ui-blue-200)!important;
  color:var(--djs-ui-blue-700)!important;
}
html body #djs-portal #djs-screen-wallet-recharge .djs-deposit-tabs button.active,
html body #djs-portal .djs-withdraw-top-tabs button.active,
html body #djs-portal .djs-wallet-history-tabs button.active{
  background:var(--djs-ui-blue-50)!important;
  border-color:var(--djs-ui-blue-200)!important;
  color:var(--djs-ui-blue-700)!important;
  -webkit-text-fill-color:var(--djs-ui-blue-700)!important;
  box-shadow:none!important;
}

/* ---------------------------------------------------------------------
   1XBET POPUP — spacing, custom selector, no red indicators
--------------------------------------------------------------------- */
html body #djs-portal #djs-xbet-modal .djs-xbet-currency-options label{
  position:relative!important;
  min-height:66px!important;
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  padding:10px 12px!important;
  border:1px solid #dfe3e8!important;
  border-radius:15px!important;
  background:#fff!important;
  color:#344054!important;
}
html body #djs-portal #djs-xbet-modal .djs-xbet-currency-options input{
  position:absolute!important;
  opacity:0!important;
  width:1px!important;
  height:1px!important;
  pointer-events:none!important;
}
html body #djs-portal #djs-xbet-modal .djs-xbet-currency-options label>span:nth-of-type(1){
  flex:1 1 auto!important;
  min-width:0!important;
  display:flex!important;
  flex-direction:column!important;
  gap:3px!important;
}
html body #djs-portal #djs-xbet-modal .djs-xbet-currency-options label>span:nth-of-type(1) b{
  color:#101828!important;
  font-size:13px!important;
  line-height:1.1!important;
}
html body #djs-portal #djs-xbet-modal .djs-xbet-currency-options label>span:nth-of-type(1) small{
  color:#667085!important;
  font-size:9px!important;
  line-height:1.2!important;
}
html body #djs-portal #djs-xbet-modal .djs-xbet-currency-options label>.ms{
  flex:0 0 22px!important;
  width:22px!important;
  height:22px!important;
  display:grid!important;
  place-items:center!important;
  color:#98a2b3!important;
  font-size:19px!important;
}
html body #djs-portal #djs-xbet-modal .djs-xbet-currency-options label.is-selected{
  border-color:var(--djs-ui-blue-200)!important;
  background:var(--djs-ui-blue-50)!important;
  box-shadow:0 0 0 3px rgba(46,144,250,.06)!important;
}
html body #djs-portal #djs-xbet-modal .djs-xbet-currency-options label.is-selected>.ms{
  color:var(--djs-ui-blue-700)!important;
}
html body #djs-portal #djs-xbet-modal .djs-xbet-net-preview{
  margin:10px 0 12px!important;
  padding:12px 13px!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:center!important;
  column-gap:12px!important;
  row-gap:4px!important;
  border:1px solid #e4e7ec!important;
  border-radius:15px!important;
  background:#f8fafc!important;
}
html body #djs-portal #djs-xbet-modal .djs-xbet-net-preview>span{
  color:#667085!important;
  font-size:10px!important;
  font-weight:800!important;
}
html body #djs-portal #djs-xbet-modal .djs-xbet-net-preview>strong{
  color:#101828!important;
  font-size:15px!important;
  font-weight:950!important;
  white-space:nowrap!important;
}
html body #djs-portal #djs-xbet-modal .djs-xbet-net-preview>small{
  grid-column:1/-1!important;
  color:#98a2b3!important;
  font-size:8.5px!important;
  line-height:1.35!important;
}
html body #djs-portal #djs-xbet-modal .djs-xbet-address-guide summary{
  min-height:52px!important;
  padding:10px 12px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:10px!important;
  background:#f8fafc!important;
}
html body #djs-portal #djs-xbet-modal .djs-xbet-guide-title{
  min-width:0!important;
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
}
html body #djs-portal #djs-xbet-modal .djs-xbet-guide-title>.ms{
  width:30px!important;
  height:30px!important;
  flex:0 0 30px!important;
  border-radius:9px!important;
  display:grid!important;
  place-items:center!important;
  background:var(--djs-ui-blue-50)!important;
  color:var(--djs-ui-blue-700)!important;
}
html body #djs-portal #djs-xbet-modal .djs-xbet-guide-title>span:last-child{
  min-width:0!important;
  display:flex!important;
  flex-direction:column!important;
  gap:2px!important;
}
html body #djs-portal #djs-xbet-modal .djs-xbet-guide-title b{
  font-size:10px!important;
  line-height:1.2!important;
  color:#101828!important;
}
html body #djs-portal #djs-xbet-modal .djs-xbet-guide-title small{
  font-size:8px!important;
  color:#667085!important;
}
html body #djs-portal #djs-xbet-modal .djs-xbet-address-field>span:first-child{
  display:block!important;
  margin-bottom:6px!important;
}
html body #djs-portal #djs-xbet-modal .djs-xbet-address-status{
  margin-top:7px!important;
  min-height:42px!important;
  padding:9px 10px!important;
  border-radius:12px!important;
  display:flex!important;
  align-items:center!important;
  gap:7px!important;
}
html body #djs-portal #djs-xbet-modal .djs-xbet-price-preview{
  margin:10px 0 0!important;
  padding:11px 12px!important;
  border:1px solid #e4e7ec!important;
  border-radius:14px!important;
  background:#f8fafc!important;
}
html body #djs-portal #djs-xbet-modal .djs-xbet-price-preview>div{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
}
html body #djs-portal #djs-xbet-modal .djs-xbet-price-preview .total{
  margin-top:7px!important;
  padding-top:8px!important;
  border-top:1px solid #e4e7ec!important;
}

/* ---------------------------------------------------------------------
   TIKTOK COINS — remove remaining dark CTA
--------------------------------------------------------------------- */
html body #djs-portal #djs-tiktok-coins-modal .djs-ttc-add{
  min-height:52px!important;
  background:var(--djs-ui-blue-50)!important;
  border:1px solid var(--djs-ui-blue-200)!important;
  color:var(--djs-ui-blue-700)!important;
  -webkit-text-fill-color:var(--djs-ui-blue-700)!important;
  box-shadow:0 6px 16px rgba(46,144,250,.08)!important;
}
html body #djs-portal #djs-tiktok-coins-modal .djs-ttc-add .ms{
  color:var(--djs-ui-blue-700)!important;
}

/* ---------------------------------------------------------------------
   Keep dark-mode readable without reintroducing navy action buttons.
--------------------------------------------------------------------- */
[data-theme="dark"] #djs-portal .djs-ttc-add,
[data-theme="dark"] #djs-portal .djs-xbet-add-btn,
[data-theme="dark"] #djs-portal #djs-screen-cart .djs-cart-pay-btn,
[data-theme="dark"] #djs-portal .djs-order-view-btn{
  background:#dbeeff!important;
  border-color:#84caff!important;
  color:#1849a9!important;
  -webkit-text-fill-color:#1849a9!important;
}


/* Extra historical dark-state controls found by the v2.37.10 audit. */
html body #djs-portal .djs-sub-secret-toggle.is-open,
html body #djs-portal .djs-ga-request-btn.is-open,
html body #djs-portal #djs-screen-gaming-accessory .djs-ga-request-btn.is-open,
html body #djs-portal #djs-screen-wallet .djs-wallet-p3-actions--six button[data-wallet-deposit]{
  background:#eff8ff!important;
  background-image:none!important;
  border-color:#b2ddff!important;
  color:#175cd3!important;
  -webkit-text-fill-color:#175cd3!important;
  box-shadow:0 6px 16px rgba(46,144,250,.08)!important;
}