/* DjimlyStore customer rebuild v4.1.5
 * Final customer surface: compact Wallet, clipped product artwork, account-topup forms.
 */
:root{
  --djs415-blue:#38a8e8;
  --djs415-blue-2:#78c9f2;
  --djs415-blue-soft:#eaf7ff;
  --djs415-blue-soft-2:#dff2ff;
  --djs415-ink:#10223a;
  --djs415-muted:#6f8297;
  --djs415-line:#d9e7f1;
}

/* ─────────────────────────────────────────────────────────────
   PRODUCT ART — clip the artwork itself, not only its large card.
   The dedicated inner wrapper makes Safari/iPhone clipping reliable.
   ───────────────────────────────────────────────────────────── */
html body #djs-portal .djs-product-art-clip-v415{
  display:block!important;
  width:min(100%,320px)!important;
  aspect-ratio:1/1!important;
  margin:auto!important;
  padding:0!important;
  border-radius:30px!important;
  overflow:hidden!important;
  isolation:isolate!important;
  background:#fff!important;
  box-shadow:none!important;
  -webkit-mask-image:-webkit-radial-gradient(white,black)!important;
}
html body #djs-portal .djs-product-art-clip-v415>img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
  object-fit:contain!important;
  object-position:center!important;
  border-radius:30px!important;
  transform:none!important;
  clip-path:none!important;
  -webkit-clip-path:none!important;
}
html body #djs-portal #djs-game-modal :is(.djs-ff-light-media-v4073,.djs-manual-detail-media-v4071,.djs-game-detail-media-v2187){
  padding:14px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}
html body #djs-portal #djs-game-modal :is(.djs-ff-light-media-v4073,.djs-manual-detail-media-v4071,.djs-game-detail-media-v2187)>.djs-product-art-clip-v415{
  flex:0 1 320px!important;
}

/* ─────────────────────────────────────────────────────────────
   WALLET — one compact light-blue card like the approved reference.
   USD + Exchange + Deposit + Withdrawal all live inside the main card.
   ───────────────────────────────────────────────────────────── */
html body #djs-portal #djs-screen-wallet .djs-wallet-v415{
  width:min(100%,720px)!important;
  margin:0 auto!important;
  padding:16px 20px max(120px,env(safe-area-inset-bottom,0px))!important;
}
html body #djs-portal #djs-screen-wallet .djs-wallet-v415-card{
  position:relative!important;
  overflow:hidden!important;
  border:1px solid #cfe4f2!important;
  border-radius:30px!important;
  padding:22px!important;
  background:
    radial-gradient(circle at 82% 10%,rgba(255,255,255,.92),rgba(255,255,255,0) 32%),
    linear-gradient(145deg,#eef9ff 0%,#dff3ff 54%,#e9f7ff 100%)!important;
  color:var(--djs415-ink)!important;
  box-shadow:0 16px 44px rgba(35,111,158,.09)!important;
}
html body #djs-portal #djs-screen-wallet .djs-wallet-v415-card:after{
  content:"";
  position:absolute;
  width:220px;
  height:220px;
  right:-110px;
  top:-120px;
  border-radius:50%;
  background:rgba(56,168,232,.09);
  pointer-events:none;
}
html body #djs-portal #djs-screen-wallet .djs-wallet-v415-head{
  position:relative!important;
  z-index:1!important;
  display:flex!important;
  align-items:flex-start!important;
  justify-content:space-between!important;
  gap:18px!important;
}
html body #djs-portal #djs-screen-wallet .djs-wallet-v415-head small,
html body #djs-portal #djs-screen-wallet .djs-wallet-v415-usd-copy small{
  display:block!important;
  margin:0!important;
  font-size:11px!important;
  line-height:1.1!important;
  letter-spacing:.10em!important;
  font-weight:850!important;
  color:#60788f!important;
}
html body #djs-portal #djs-screen-wallet .djs-wallet-v415-head h2{
  margin:10px 0 0!important;
  font-size:36px!important;
  line-height:.95!important;
  letter-spacing:-.045em!important;
  font-weight:950!important;
  color:#0b2038!important;
}
html body #djs-portal #djs-screen-wallet .djs-wallet-v415-head h2 em{
  margin-left:5px!important;
  font-size:13px!important;
  font-style:normal!important;
  letter-spacing:0!important;
  color:#526a80!important;
}
html body #djs-portal #djs-screen-wallet .djs-wallet-v415-icon{
  position:relative!important;
  z-index:1!important;
  width:58px!important;
  height:58px!important;
  flex:0 0 58px!important;
  display:grid!important;
  place-items:center!important;
  border:1px solid rgba(90,151,188,.20)!important;
  border-radius:18px!important;
  background:rgba(255,255,255,.74)!important;
  box-shadow:0 10px 24px rgba(49,123,169,.08)!important;
  color:#18354f!important;
}
html body #djs-portal #djs-screen-wallet .djs-wallet-v415-icon .ms{font-size:29px!important}
html body #djs-portal #djs-screen-wallet .djs-wallet-v415-usd{
  position:relative!important;
  z-index:1!important;
  margin-top:24px!important;
  padding:17px 18px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:14px!important;
  border:1px solid rgba(92,137,166,.24)!important;
  border-radius:22px!important;
  background:rgba(255,255,255,.48)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.72)!important;
}
html body #djs-portal #djs-screen-wallet .djs-wallet-v415-usd-copy strong{
  display:block!important;
  margin-top:8px!important;
  font-size:30px!important;
  line-height:1!important;
  font-weight:950!important;
  letter-spacing:-.04em!important;
  color:#0a2038!important;
}
html body #djs-portal #djs-screen-wallet .djs-wallet-v415-exchange{
  min-height:50px!important;
  padding:0 16px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  border:1px solid rgba(35,105,148,.22)!important;
  border-radius:16px!important;
  background:rgba(255,255,255,.72)!important;
  color:#14334e!important;
  -webkit-text-fill-color:#14334e!important;
  font-size:14px!important;
  font-weight:850!important;
  box-shadow:none!important;
}
html body #djs-portal #djs-screen-wallet .djs-wallet-v415-exchange .ms{font-size:20px!important;color:#237fb5!important}
html body #djs-portal #djs-screen-wallet .djs-wallet-v415-actions{
  position:relative!important;
  z-index:1!important;
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
  margin-top:22px!important;
}
html body #djs-portal #djs-screen-wallet .djs-wallet-v415-actions button{
  min-height:48px!important;
  padding:0 16px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  border:1px solid rgba(35,105,148,.20)!important;
  border-radius:15px!important;
  background:rgba(255,255,255,.64)!important;
  color:#14334e!important;
  -webkit-text-fill-color:#14334e!important;
  font-size:14px!important;
  font-weight:850!important;
  box-shadow:none!important;
}
html body #djs-portal #djs-screen-wallet .djs-wallet-v415-actions button .ms{font-size:20px!important;color:#237fb5!important}
html body #djs-portal #djs-screen-wallet .djs-wallet-v415-hidden{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  overflow:hidden!important;
  clip:rect(0 0 0 0)!important;
  clip-path:inset(50%)!important;
  white-space:nowrap!important;
}
html body #djs-portal #djs-screen-wallet .djs-wallet-v415-history{
  margin-top:22px!important;
  padding:18px!important;
  border-radius:28px!important;
}
html body #djs-portal #djs-screen-wallet .djs-wallet-v415-history .djs-wallet-history-recent-head h3{
  font-size:20px!important;
  line-height:1.1!important;
}
html body #djs-portal #djs-screen-wallet .djs-wallet-v415-history .djs-wallet-history-recent-head small{
  font-size:9px!important;
}

/* ─────────────────────────────────────────────────────────────
   eFootball / DLS / One State purchase forms.
   ───────────────────────────────────────────────────────────── */
html body #djs-portal #djs-game-modal.djs-manual-credentials-v2188 .djs-product-purchase-card{
  padding-bottom:18px!important;
}
html body #djs-portal #djs-game-modal.djs-manual-credentials-v2188 #djs-game-modal-fields{
  display:grid!important;
  gap:16px!important;
  margin-top:14px!important;
}
html body #djs-portal #djs-game-modal .djs-manual-field-v2188{
  display:grid!important;
  gap:8px!important;
  margin:0!important;
}
html body #djs-portal #djs-game-modal .djs-manual-field-v2188>span{
  font-size:15px!important;
  line-height:1.25!important;
  font-weight:850!important;
  color:#111827!important;
}
html body #djs-portal #djs-game-modal .djs-manual-control-v2188{
  min-height:54px!important;
  border:1px solid #d9e1e8!important;
  border-radius:15px!important;
  background:#fff!important;
  box-shadow:none!important;
}
html body #djs-portal #djs-game-modal .djs-manual-control-v2188 input,
html body #djs-portal #djs-game-modal .djs-manual-control-v2188 select{
  min-height:52px!important;
  font-size:16px!important;
  color:#172033!important;
  background:transparent!important;
}
html body #djs-portal #djs-game-modal .djs-manual-whatsapp-v2188{
  display:grid!important;
  grid-template-columns:112px minmax(0,1fr)!important;
  align-items:center!important;
}
html body #djs-portal #djs-game-modal .djs-manual-whatsapp-v2188 select{
  border-right:1px solid #e1e7ed!important;
  border-radius:15px 0 0 15px!important;
  padding:0 8px!important;
}
html body #djs-portal #djs-game-modal .djs-v415-account-note{
  display:flex!important;
  align-items:flex-start!important;
  gap:10px!important;
  padding:13px 14px!important;
  border:1px solid #cce7f7!important;
  border-radius:15px!important;
  background:#eff9ff!important;
  color:#264b66!important;
}
html body #djs-portal #djs-game-modal .djs-v415-account-note .ms{font-size:20px!important;color:#2995d2!important}
html body #djs-portal #djs-game-modal .djs-v415-account-note p{margin:0!important;font-size:12px!important;line-height:1.45!important}
html body #djs-portal #djs-game-modal.djs-manual-credentials-v2188 .djs-game-detail-submit-v2187{
  min-height:56px!important;
  border-radius:17px!important;
  background:#38a8e8!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  box-shadow:0 10px 22px rgba(56,168,232,.18)!important;
}
html body #djs-portal #djs-game-modal.djs-manual-credentials-v2188 .djs-game-detail-submit-v2187 *{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
}

@media(max-width:430px){
  html body #djs-portal .djs-product-art-clip-v415{border-radius:24px!important}
  html body #djs-portal .djs-product-art-clip-v415>img{border-radius:24px!important}
  html body #djs-portal #djs-screen-wallet .djs-wallet-v415{padding-left:14px!important;padding-right:14px!important}
  html body #djs-portal #djs-screen-wallet .djs-wallet-v415-card{padding:18px!important;border-radius:26px!important}
  html body #djs-portal #djs-screen-wallet .djs-wallet-v415-head h2{font-size:32px!important}
  html body #djs-portal #djs-screen-wallet .djs-wallet-v415-icon{width:52px!important;height:52px!important;flex-basis:52px!important}
  html body #djs-portal #djs-screen-wallet .djs-wallet-v415-usd{padding:15px!important}
  html body #djs-portal #djs-screen-wallet .djs-wallet-v415-usd-copy strong{font-size:27px!important}
  html body #djs-portal #djs-screen-wallet .djs-wallet-v415-exchange{padding:0 13px!important}
  html body #djs-portal #djs-screen-wallet .djs-wallet-v415-actions{gap:9px!important}
  html body #djs-portal #djs-screen-wallet .djs-wallet-v415-actions button{flex:1 1 0!important;padding:0 10px!important}
}