/* DjimlyStore Digital v2.39.45 — VIP motion + compact card polish */

/* Tighten the top stack. The v2.39.44 shell reserved more vertical space than the fixed header needs. */
#djs-screen-vip.djs-vip45-screen{background:#fff!important}
#djs-screen-vip .djs-vip44-backbar{
  height:calc(62px + env(safe-area-inset-top,0px))!important;
  min-height:calc(62px + env(safe-area-inset-top,0px))!important;
  padding:calc(env(safe-area-inset-top,0px) + 7px) 15px 7px!important;
  box-sizing:border-box!important;
}
#djs-screen-vip .djs-vip44-shell{
  padding:calc(62px + env(safe-area-inset-top,0px)) 0 calc(112px + env(safe-area-inset-bottom,0px))!important;
}
#djs-screen-vip .djs-vip44-journey{
  padding:8px 0 12px!important;
  min-height:0!important;
  transition:background-color .24s ease,color .24s ease!important;
  will-change:background;
}
#djs-screen-vip .djs-vip44-member{min-height:98px!important;margin-top:0!important}
#djs-screen-vip .djs-vip44-avatar-wrap{width:70px!important;height:70px!important;padding:3px!important;box-shadow:0 8px 22px rgba(105,77,12,.15)!important}
#djs-screen-vip .djs-vip44-avatar-level{height:25px!important;min-width:31px!important;font-size:15px!important;right:-6px!important}
#djs-screen-vip .djs-vip44-member>strong{margin-top:7px!important;font-size:15px!important}

/* The journey glow follows the slider so the whole hero feels alive, not just the card. */
#djs-screen-vip .djs-vip44-journey:before,
#djs-screen-vip .djs-vip44-journey:after{
  content:"";
  position:absolute;
  pointer-events:none;
  z-index:0;
  border-radius:999px;
  will-change:transform,opacity;
  transition:opacity .25s ease;
}
#djs-screen-vip .djs-vip44-journey:before{
  width:310px;height:310px;left:-150px;top:-135px;
  background:radial-gradient(circle,rgba(255,255,255,.72),rgba(255,255,255,0) 70%);
  transform:translate3d(var(--vip45-shift-a,0px),0,0);
}
#djs-screen-vip .djs-vip44-journey:after{
  width:280px;height:280px;right:-145px;bottom:-115px;
  background:radial-gradient(circle,rgba(255,255,255,.48),rgba(255,255,255,0) 72%);
  transform:translate3d(var(--vip45-shift-b,0px),0,0);
}
#djs-screen-vip .djs-vip44-member,
#djs-screen-vip .djs-vip44-road,
#djs-screen-vip .djs-vip44-slider-wrap{position:relative;z-index:2}

/* Compact curved progression area. */
#djs-screen-vip .djs-vip44-road{height:105px!important;margin:-7px 0 -3px!important}
#djs-screen-vip .djs-vip44-road-svg{top:-2px!important;height:96px!important}
#djs-screen-vip .djs-vip44-node{height:42px!important;font-size:11px!important;transition:transform .24s cubic-bezier(.22,.8,.35,1),color .2s ease!important}
#djs-screen-vip .djs-vip44-node.is-preview{transform:translateY(-2px) scale(1.06)!important}
#djs-screen-vip .djs-vip44-node.n1{top:33px!important}
#djs-screen-vip .djs-vip44-node.n2{top:55px!important}
#djs-screen-vip .djs-vip44-node.n3{top:57px!important}
#djs-screen-vip .djs-vip44-node.n4{top:43px!important}
#djs-screen-vip .djs-vip44-node.n5{top:13px!important}

/* Real swipe animation: centered card lifts and grows; neighboring levels remain visible as a preview. */
#djs-screen-vip .djs-vip44-slider-wrap{margin-top:-2px!important}
#djs-screen-vip .djs-vip44-slider{
  gap:10px!important;
  padding:5px 24px 8px!important;
  scroll-padding:24px!important;
  scroll-snap-type:x mandatory!important;
  scroll-behavior:smooth;
  overscroll-behavior-x:contain;
}
#djs-screen-vip .djs-vip44-level-card{
  flex:0 0 min(84vw,420px)!important;
  max-width:420px!important;
  padding:14px 16px 13px!important;
  border-radius:16px!important;
  transform:translate3d(0,var(--vip45-lift,4px),0) scale(var(--vip45-scale,.965))!important;
  opacity:var(--vip45-opacity,.9)!important;
  transform-origin:center center!important;
  will-change:transform,opacity;
  transition:box-shadow .24s ease,border-color .24s ease,filter .24s ease!important;
}
#djs-screen-vip .djs-vip44-level-card.is-preview-card{
  filter:saturate(1.04)!important;
  box-shadow:0 14px 30px rgba(89,64,9,.18),inset 0 0 0 1px rgba(255,255,255,.68)!important;
}
#djs-screen-vip .djs-vip44-card-head{gap:10px!important}
#djs-screen-vip .djs-vip44-vip-title{font-size:31px!important;letter-spacing:-.035em!important}
#djs-screen-vip .djs-vip44-vip-title .ms{font-size:20px!important}
#djs-screen-vip .djs-vip44-validity small{font-size:8px!important}
#djs-screen-vip .djs-vip44-validity b{font-size:11px!important}
#djs-screen-vip .djs-vip44-upgrade-copy{margin:11px 0 8px!important;min-height:30px!important;font-size:11.5px!important;line-height:1.28!important}
#djs-screen-vip .djs-vip44-progress{height:5px!important;margin:0 0 10px!important}
#djs-screen-vip .djs-vip44-card-actions{min-height:34px!important;align-items:center!important}
#djs-screen-vip .djs-vip44-dots{margin:1px 0 0!important}

/* No black VIP action buttons. Use DjimlyStore light blue throughout the page. */
#djs-screen-vip .djs-vip44-details,
#djs-screen-vip .djs-vip43-wide-btn,
#djs-screen-vip .djs-vip43-birthday-row button,
#djs-screen-vip .djs-vip43-voucher-row button,
#djs-screen-vip .djs-vip44-faq-support{
  background:linear-gradient(180deg,#eef9ff 0%,#d9f1ff 100%)!important;
  color:#0a5f91!important;
  border:1px solid #b9e1f7!important;
  box-shadow:0 7px 16px rgba(59,169,224,.10)!important;
}
#djs-screen-vip .djs-vip44-details{
  min-width:118px!important;height:34px!important;padding:0 14px!important;font-size:10.5px!important;
}
#djs-screen-vip .djs-vip44-level-card.is-elite .djs-vip44-details{
  background:linear-gradient(180deg,#fff6d9,#f6dfa0)!important;
  color:#5c4306!important;border-color:#e8c96d!important;
}
#djs-screen-vip .djs-vip44-payrow{margin:0 0 8px!important;gap:6px!important}
#djs-screen-vip .djs-vip44-payrow button{
  height:33px!important;
  background:linear-gradient(180deg,#f2fbff,#dff4ff)!important;
  color:#0b5f8d!important;
  border:1px solid #bee4f7!important;
  font-size:9.5px!important;
}
#djs-screen-vip .djs-vip44-level-card.is-elite .djs-vip44-payrow button{
  background:linear-gradient(180deg,#fff7dc,#f4dea2)!important;
  color:#5b4309!important;border-color:#e5c66f!important;
}
#djs-screen-vip .djs-vip44-faq-support{grid-template-columns:39px 1fr 24px!important;text-align:left!important}
#djs-screen-vip .djs-vip44-faq-support>.ms:first-child{background:#fff!important;color:#2aa9e8!important}
#djs-screen-vip .djs-vip44-faq-support b{color:#0b5f8d!important}
#djs-screen-vip .djs-vip44-faq-support small{color:#63849a!important}
#djs-screen-vip .djs-vip44-faq-support>.ms:last-child{color:#2a9ed8!important}
#djs-screen-vip .djs-vip44-benefit>small{background:#eef9ff!important;color:#227ba9!important;border:1px solid #d5edf9!important}
#djs-screen-vip .djs-vip44-benefit.is-unlocked>small{background:#e8f8ef!important;color:#168150!important;border-color:#d2f0df!important}

/* Slightly denser benefit/tools section so the page keeps the reference's compact rhythm. */
#djs-screen-vip .djs-vip44-benefits{padding:19px 18px 11px!important}
#djs-screen-vip .djs-vip44-section-heading{margin-bottom:14px!important}
#djs-screen-vip .djs-vip44-benefit{min-height:88px!important;padding:12px 11px!important}
#djs-screen-vip .djs-vip44-tools{padding-top:5px!important}

/* Smooth FAQ without any inherited hard divider. */
#djs-screen-vip details.djs-vip44-faq-item,
#djs-screen-vip details.djs-vip44-faq-item>summary,
#djs-screen-vip .djs-vip44-faq-answer,
#djs-screen-vip .djs-vip44-faq-answer *{
  border-top-color:transparent!important;
  border-bottom-color:transparent!important;
}
#djs-screen-vip details.djs-vip44-faq-item{border:1px solid #e7edf2!important}
#djs-screen-vip .djs-vip44-faq-chevron{background:#eef8fd!important;color:#258bbd!important}
#djs-screen-vip details.djs-vip44-faq-item[open] .djs-vip44-faq-chevron{background:#dff3ff!important;color:#1777a6!important}

@media (min-width:760px){
  #djs-screen-vip .djs-vip44-level-card{flex-basis:410px!important;max-width:410px!important}
  #djs-screen-vip .djs-vip44-slider{padding-left:calc((100% - 410px)/2)!important;padding-right:calc((100% - 410px)/2)!important}
}
@media (max-width:390px){
  #djs-screen-vip .djs-vip44-level-card{flex-basis:82vw!important;padding:13px 14px 12px!important}
  #djs-screen-vip .djs-vip44-vip-title{font-size:28px!important}
  #djs-screen-vip .djs-vip44-slider{padding-left:18px!important;padding-right:18px!important}
  #djs-screen-vip .djs-vip44-road{transform:scale(.94)!important;transform-origin:center top!important}
}
@media (prefers-reduced-motion:reduce){
  #djs-screen-vip .djs-vip44-level-card{transform:none!important;opacity:1!important}
  #djs-screen-vip .djs-vip44-journey:before,#djs-screen-vip .djs-vip44-journey:after{transform:none!important}
}
