/* DjimlyStore Digital v2.40.14 — Affiliate Store builder header + type-card navigation hotfix. */

/* Keep the onboarding flow completely above the SPA shell/navigation. */
html body #djs-portal #djs-affiliate-store-builder-v24013,
html body #djs-portal #djs-affiliate-store-dashboard-v24013{
  position:fixed!important;
  inset:0!important;
  width:100%!important;
  height:100dvh!important;
  min-height:100dvh!important;
  z-index:99980!important;
  overflow:auto!important;
  overscroll-behavior:contain!important;
  -webkit-overflow-scrolling:touch!important;
  background:linear-gradient(180deg,#f8fbff 0%,#fff 30%)!important;
}

html body #djs-portal #djs-global-bottom-nav.djs-affiliate-store-nav-hidden-v24014,
html body.djs-affiliate-store-flow-v24014 #djs-portal #djs-global-bottom-nav{
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
}

/* A real, always-visible onboarding header. */
html body #djs-portal .djs-affiliate-store-builder-head-v24013{
  position:sticky!important;
  top:0!important;
  z-index:99990!important;
  display:grid!important;
  grid-template-columns:48px minmax(0,1fr) 48px!important;
  align-items:center!important;
  gap:8px!important;
  min-height:66px!important;
  padding:calc(10px + env(safe-area-inset-top,0px)) 14px 10px!important;
  box-sizing:border-box!important;
  background:rgba(255,255,255,.98)!important;
  border-bottom:1px solid #e3ebf5!important;
  box-shadow:0 8px 28px rgba(27,71,120,.07)!important;
  backdrop-filter:blur(18px)!important;
  -webkit-backdrop-filter:blur(18px)!important;
}

html body #djs-portal .djs-affiliate-store-builder-head-v24013>button{
  display:grid!important;
  place-items:center!important;
  width:42px!important;
  height:42px!important;
  margin:0!important;
  padding:0!important;
  border:1px solid #dbe6f3!important;
  border-radius:14px!important;
  background:#fff!important;
  color:#10233d!important;
}
html body #djs-portal .djs-affiliate-store-builder-head-v24013>div{
  min-width:0!important;
  text-align:center!important;
}
html body #djs-portal .djs-affiliate-store-builder-head-v24013 small{
  display:block!important;
  color:#1677ff!important;
  font-size:9px!important;
  line-height:1.2!important;
  font-weight:950!important;
  letter-spacing:.13em!important;
}
html body #djs-portal .djs-affiliate-store-builder-head-v24013 h1{
  margin:3px 0 0!important;
  color:#0f172a!important;
  font-size:18px!important;
  line-height:1.2!important;
  font-weight:950!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

/* In iPhone installed-web-app mode WebKit can report a zero safe-area inset.
   Reserve the status/Dynamic-Island band explicitly so the header never sits under it. */
@media (display-mode:standalone){
  html body #djs-portal .djs-affiliate-store-builder-head-v24013{
    padding-top:max(50px,env(safe-area-inset-top,0px))!important;
    min-height:106px!important;
  }
}
html body.djs-pwa-standalone-v24014 #djs-portal .djs-affiliate-store-builder-head-v24013{
  padding-top:max(50px,env(safe-area-inset-top,0px))!important;
  min-height:106px!important;
}

/* Progress belongs directly below the header; do not let it float through the step text. */
html body #djs-portal .djs-affiliate-store-progress-v24013{
  position:relative!important;
  top:auto!important;
  z-index:2!important;
  flex:0 0 4px!important;
  width:100%!important;
  height:4px!important;
  margin:0!important;
  background:#e5effb!important;
}
html body #djs-portal .djs-affiliate-store-progress-v24013>span{
  display:block!important;
  height:4px!important;
  background:linear-gradient(90deg,#1677ff,#58aaff)!important;
}

html body #djs-portal .djs-affiliate-store-builder-body-v24013{
  width:min(760px,100%)!important;
  margin:0 auto!important;
  padding:28px 16px calc(36px + env(safe-area-inset-bottom,0px))!important;
  box-sizing:border-box!important;
}

/* Step 1 is card-driven: the card itself is the Continue action. */
html body #djs-portal .djs-store-type-grid-v24013>button{
  cursor:pointer!important;
  touch-action:manipulation!important;
  -webkit-tap-highlight-color:transparent!important;
  user-select:none!important;
  transition:transform .14s ease,border-color .14s ease,background .14s ease,box-shadow .14s ease!important;
}
html body #djs-portal .djs-store-type-grid-v24013>button:active{
  transform:scale(.985)!important;
}
html body #djs-portal .djs-store-type-grid-v24013>button>i{
  opacity:0!important;
  color:#1677ff!important;
  transform:scale(.82)!important;
  transition:opacity .14s ease,transform .14s ease!important;
}
html body #djs-portal .djs-store-type-grid-v24013>button.is-selected>i{
  opacity:1!important;
  transform:scale(1)!important;
  font-variation-settings:'FILL' 1!important;
}

/* Keep text clear and away from the iPhone status bar on every viewport. */
html body #djs-portal .djs-store-step-head-v24013{
  margin:0 0 22px!important;
}
html body #djs-portal .djs-store-step-head-v24013>small{
  display:block!important;
  margin-bottom:7px!important;
}
html body #djs-portal .djs-store-step-head-v24013 h2{
  margin:0 0 10px!important;
  font-size:clamp(25px,7vw,34px)!important;
  line-height:1.08!important;
  letter-spacing:-.025em!important;
}
html body #djs-portal .djs-store-step-head-v24013 p{
  margin:0!important;
  font-size:14px!important;
  line-height:1.5!important;
  color:#5f7086!important;
}

@media (max-width:430px){
  html body #djs-portal .djs-affiliate-store-builder-body-v24013{padding-left:14px!important;padding-right:14px!important}
  html body #djs-portal .djs-store-type-grid-v24013>button{min-height:104px!important;padding:14px!important}
}