/* DjimlyStore Digital v2.39.27 — PWA header / official brand / Invite & Earn light rebuild */
:root{--djs-v23927-blue:#58b9f2;--djs-v23927-blue-strong:#2494d7;--djs-v23927-blue-soft:#eaf7ff;--djs-v23927-ink:#173043;--djs-v23927-line:#d7eaf5}

/* --------------------------------------------------------------------------
   ACCOUNT: remove every historical yellow safe-area layer, including the
   body::before pseudo-element introduced in v2.39.17.
   -------------------------------------------------------------------------- */
html:has(#djs-screen-home.djs-screen--active),
html:has(#djs-screen-home.djs-screen--active) body,
html body.djs-account-statusbar,
html body.djs-account-statusbar #djs-portal,
html body #djs-portal #djs-screen-home,
html body #djs-portal #djs-screen-home .djs-account-reference-topbar{
  background:#fff!important;background-color:#fff!important;background-image:none!important;
}
html:has(#djs-screen-home.djs-screen--active) body::before,
html body.djs-account-statusbar::before,
html body #djs-portal #djs-screen-home::before,
html body #djs-portal #djs-screen-home::after{
  content:none!important;display:none!important;background:transparent!important;background-image:none!important;
}
html body #djs-portal #djs-screen-home .djs-account-settings-pentagon{
  display:grid!important;visibility:visible!important;opacity:1!important;
  background:#fff!important;color:#142d3d!important;border:1px solid #d7e9f4!important;
  box-shadow:0 6px 18px rgba(28,82,112,.08)!important;
}

/* --------------------------------------------------------------------------
   IPHONE PWA: when iOS reports env(safe-area-inset-top)=0, keep header content
   below the Dynamic Island/status bar anyway. Background stays white so there
   is no visible strip or color break.
   -------------------------------------------------------------------------- */
body.djs-standalone-pwa{background:#fff!important}
body.djs-standalone-pwa #djs-portal{background:#fff!important}
body.djs-standalone-pwa #djs-portal .djs-topbar,
body.djs-standalone-pwa #djs-portal .djs-preview-topbar,
body.djs-standalone-pwa #djs-portal .djs-acct-topbar{
  padding-top:max(env(safe-area-inset-top),54px)!important;
  min-height:calc(64px + max(env(safe-area-inset-top),54px))!important;
  background:#fff!important;background-image:none!important;
  align-items:flex-end!important;
}
body.djs-standalone-pwa #djs-portal #djs-screen-home .djs-account-reference-topbar{
  padding:54px 16px 10px!important;min-height:108px!important;background:#fff!important;
}
@supports(padding:max(0px,1px)){
  body.djs-standalone-pwa #djs-portal #djs-screen-home .djs-account-reference-topbar{
    padding-top:max(env(safe-area-inset-top),54px)!important;
  }
}

/* Official logo stays contained and never collides with top-bar controls. */
html body #djs-portal .djs-brand-header-logo{
  display:block!important;max-width:100%!important;max-height:54px!important;width:auto!important;height:auto!important;object-fit:contain!important;
}
body.djs-standalone-pwa #djs-portal .djs-logo-image{align-self:flex-end!important}

/* --------------------------------------------------------------------------
   INVITE & EARN: remove remaining black cards and old yellow/red treatments.
   Keep social-network identity colors only inside their own share icon.
   -------------------------------------------------------------------------- */
html body #djs-portal #djs-screen-invite-earn .djs-scroller{
  background:linear-gradient(180deg,#f7fcff 0%,#f2f8fc 100%)!important;color:var(--djs-v23927-ink)!important;
}
html body #djs-portal #djs-screen-invite-earn .djs-content-wrap.djs-invite-wrap,
html body #djs-portal #djs-screen-invite-earn .djs-referral-v21829{
  width:min(760px,calc(100% - 24px))!important;margin:0 auto!important;padding-left:0!important;padding-right:0!important;
}
html body #djs-portal #djs-screen-invite-earn .djs-referral-back{
  background:#fff!important;color:var(--djs-v23927-ink)!important;border:1px solid var(--djs-v23927-line)!important;
  box-shadow:0 8px 22px rgba(31,88,120,.07)!important;border-radius:16px!important;
}
html body #djs-portal #djs-screen-invite-earn .djs-referral-hero{
  margin:0 0 14px!important;padding:22px!important;border-radius:28px!important;
  background:radial-gradient(circle at 90% 10%,rgba(88,185,242,.25),transparent 34%),linear-gradient(135deg,#eaf7ff,#f8fcff)!important;
  border:1px solid #bfe5f8!important;box-shadow:0 14px 38px rgba(45,132,181,.08)!important;color:var(--djs-v23927-ink)!important;
}
html body #djs-portal #djs-screen-invite-earn .djs-referral-hero small{color:#2e9fdc!important;-webkit-text-fill-color:#2e9fdc!important}
html body #djs-portal #djs-screen-invite-earn .djs-referral-hero h1{color:#163447!important;-webkit-text-fill-color:#163447!important}
html body #djs-portal #djs-screen-invite-earn .djs-referral-hero p{color:#668496!important;-webkit-text-fill-color:#668496!important}

html body #djs-portal #djs-screen-invite-earn .djs-referral-code-card,
html body #djs-portal #djs-screen-invite-earn .djs-referral-stats article,
html body #djs-portal #djs-screen-invite-earn .djs-referral-bonus-section,
html body #djs-portal #djs-screen-invite-earn .djs-referral-history,
html body #djs-portal #djs-screen-invite-earn .djs-referral-bonus,
html body #djs-portal #djs-screen-invite-earn .djs-referral-rules{
  background:#fff!important;color:var(--djs-v23927-ink)!important;border-color:var(--djs-v23927-line)!important;
  box-shadow:0 10px 28px rgba(31,88,120,.055)!important;
}
html body #djs-portal #djs-screen-invite-earn .djs-referral-code-card{
  border-radius:24px!important;padding:18px!important;margin-bottom:12px!important;
}
html body #djs-portal #djs-screen-invite-earn .djs-referral-code-label,
html body #djs-portal #djs-screen-invite-earn .djs-referral-link-label,
html body #djs-portal #djs-screen-invite-earn .djs-referral-link-row>span{
  color:#8199a8!important;-webkit-text-fill-color:#8199a8!important;
}
html body #djs-portal #djs-screen-invite-earn .djs-referral-code-line strong{
  color:#2494d7!important;-webkit-text-fill-color:#2494d7!important;
}
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-screen-invite-earn .djs-referral-section-title>button{
  background:#eaf7ff!important;color:#258ecb!important;border:1px solid #c9e9f8!important;
}
html body #djs-portal #djs-screen-invite-earn .djs-referral-code-line button .ms,
html body #djs-portal #djs-screen-invite-earn .djs-referral-link-row button .ms{
  color:#258ecb!important;-webkit-text-fill-color:#258ecb!important;
}
html body #djs-portal #djs-screen-invite-earn .djs-referral-stats article>.ms,
html body #djs-portal #djs-screen-invite-earn .djs-referral-bonus-icon,
html body #djs-portal #djs-screen-invite-earn .djs-referral-history-row>.ms{
  background:#eaf7ff!important;color:#2494d7!important;-webkit-text-fill-color:#2494d7!important;
}
html body #djs-portal #djs-screen-invite-earn .djs-referral-stats strong,
html body #djs-portal #djs-screen-invite-earn .djs-referral-section-title h2,
html body #djs-portal #djs-screen-invite-earn .djs-referral-history>h2,
html body #djs-portal #djs-screen-invite-earn .djs-referral-bonus-copy h3,
html body #djs-portal #djs-screen-invite-earn .djs-referral-history-row b{
  color:#173043!important;-webkit-text-fill-color:#173043!important;
}
html body #djs-portal #djs-screen-invite-earn .djs-referral-bonus-copy p,
html body #djs-portal #djs-screen-invite-earn .djs-referral-history-row small,
html body #djs-portal #djs-screen-invite-earn .djs-referral-rules,
html body #djs-portal #djs-screen-invite-earn .djs-referral-rules p{
  color:#758d9c!important;-webkit-text-fill-color:#758d9c!important;
}
html body #djs-portal #djs-screen-invite-earn .djs-referral-progress span{background:linear-gradient(90deg,#58b9f2,#2494d7)!important}
html body #djs-portal #djs-screen-invite-earn .djs-referral-bonus-side>strong{color:#2494d7!important;-webkit-text-fill-color:#2494d7!important}
html body #djs-portal #djs-screen-invite-earn .djs-referral-bonus-side>button:not(:disabled),
html body #djs-portal #djs-screen-invite-earn .djs-referral-rules-toggle{
  background:linear-gradient(135deg,#69c5f5,#36a4df)!important;color:#fff!important;-webkit-text-fill-color:#fff!important;
  border-color:#58b9f2!important;box-shadow:none!important;
}
html body #djs-portal #djs-screen-invite-earn .djs-referral-bonus-side>button:disabled{
  background:#edf3f6!important;color:#98a8b2!important;-webkit-text-fill-color:#98a8b2!important;
}
html body #djs-portal #djs-screen-invite-earn .djs-referral-coupon code{
  background:#f2fbff!important;border-color:#9bd7f4!important;color:#176d9c!important;-webkit-text-fill-color:#176d9c!important;
}
html body #djs-portal #djs-screen-invite-earn .djs-referral-coupon button{
  background:#eaf7ff!important;color:#2494d7!important;border:1px solid #c7e8f8!important;
}

@media(max-width:520px){
  html body #djs-portal #djs-screen-invite-earn .djs-content-wrap.djs-invite-wrap,
  html body #djs-portal #djs-screen-invite-earn .djs-referral-v21829{width:calc(100% - 20px)!important}
  html body #djs-portal #djs-screen-invite-earn .djs-referral-hero{padding:20px 17px!important;border-radius:24px!important}
}