/* DjimlyStore Digital v2.39.33 — global iPhone subpage header/safe-area fix */

/*
 * Older DjimlyStore screens each tried to solve the iPhone top inset inside
 * their own header. On iOS Safari/PWA env(safe-area-inset-top) can be 0, so
 * Retour/title rows could render underneath the clock/battery area.
 *
 * v2.39.33 uses one source of truth: every full-page customer screen except
 * the main Store/Home/Auth shell gets a real top safe lane. Headers inside the
 * screen then use their normal compact height. This avoids double padding and
 * fixes current + future subpages automatically.
 */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 760px) {
    :root { --djs-global-ios-top: max(50px, env(safe-area-inset-top)); }

    html body #djs-portal .djs-screen:not(#djs-screen-store):not(#djs-screen-home):not(#djs-screen-auth) {
      box-sizing: border-box !important;
      padding-top: var(--djs-global-ios-top) !important;
      background-clip: padding-box !important;
    }

    /* The screen owns the safe lane now. Remove legacy per-header safe-area
       padding so Retour/title rows are never doubled or pushed into the clock. */
    html body #djs-portal .djs-screen > .djs-back-bar,
    html body #djs-portal #djs-screen-orders > .djs-orders-back-bar,
    html body #djs-portal #djs-screen-feedback > .djs-feedback-backbar,
    html body #djs-portal .djs-account-settings-page > .djs-account-page-head {
      box-sizing: border-box !important;
      position: relative !important;
      top: auto !important;
      margin-top: 0 !important;
      height: auto !important;
      min-height: 64px !important;
      padding-top: 9px !important;
      padding-bottom: 9px !important;
      flex-shrink: 0 !important;
      align-items: center !important;
      z-index: 50 !important;
    }

    /* Orders had an old fixed 74px header rule. Keep it compact inside the
       new global safe lane. */
    html body #djs-portal #djs-screen-orders > .djs-orders-back-bar {
      min-height: 70px !important;
      padding-left: 16px !important;
      padding-right: 16px !important;
    }

    /* Feedback keeps its blue identity, but no longer computes its own top
       inset because the screen already provides it. */
    html body #djs-portal #djs-screen-feedback > .djs-feedback-backbar {
      min-height: 60px !important;
      padding: 8px 16px 9px !important;
      background: #eaf5ff !important;
    }

    /* Account settings are separate screens and must follow the same rule. */
    html body #djs-portal .djs-account-settings-page > .djs-account-page-head {
      min-height: 64px !important;
      padding: 8px 12px 10px !important;
      align-items: center !important;
    }

    /* Invite & Earn has no djs-back-bar; its Retour button is the first item
       in the scroller. The global screen lane now protects it, so prevent old
       negative/sticky positioning from pulling it back into the status bar. */
    html body #djs-portal #djs-screen-invite-earn .djs-referral-back {
      position: relative !important;
      top: auto !important;
      margin-top: 8px !important;
      z-index: 2 !important;
    }

    /* Keep the safe lane visually neutral everywhere. */
    html body #djs-portal .djs-screen:not(#djs-screen-store):not(#djs-screen-home):not(#djs-screen-auth)::before {
      pointer-events: none !important;
    }
  }
}