/* ═══════════════════════════════════════════════════════════════════════════
   PWA / DISPLAY-MODE OVERRIDES
   The elite-* layouts are the single source of truth for storefront pages.
   The mobile/PWA app shell (.mob-app-shell) is shown by mobile-app.css media
   queries; this file controls page-level layout class visibility independent
   of viewport size (browser vs installed-PWA).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────
   CHECKOUT
   .elite-checkout is the universal desktop + PWA design.
   .premium-checkout is a deprecated layout kept only for the legacy
   storefront/checkout/index-old.blade.php; it must never render automatically.
   ───────────────────────────────────────────────────────────────────────── */

.elite-checkout {
    display: block;
}

.premium-checkout {
    display: none;
}

/* ─────────────────────────────────────────────────────────────────────────
   ACCOUNT
   .elite-account is the universal desktop + PWA dashboard.
   .sf-page is the legacy storefront page wrapper.
   ───────────────────────────────────────────────────────────────────────── */

.elite-account {
    display: block;
}

.sf-page {
    display: block;
}

/* ─────────────────────────────────────────────────────────────────────────
   PWA-SPECIFIC ENHANCEMENTS
   ───────────────────────────────────────────────────────────────────────── */

/* PWA Mode: Hide browser-specific elements */
.pwa-mode .sf-topline,
.pwa-mode .sf-header,
.pwa-mode .sf-footer {
    display: none !important;
}

/* PWA Mode: Full viewport usage */
.pwa-mode {
    padding-top: 0 !important;
}

/* PWA Mode: Safe area support for iOS */
.pwa-mode {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

/* PWA Mode: Enhanced touch targets */
.pwa-mode button,
.pwa-mode .elite-submit-btn,
.pwa-mode .elite-nav-link,
.pwa-mode .elite-action-card {
    min-height: 44px;
}

/* PWA Mode: Smoother scrolling */
.pwa-mode {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

/* PWA Mode: Disable text selection for app-like feel */
.pwa-mode .elite-nav-link,
.pwa-mode .elite-action-card,
.pwa-mode .elite-submit-btn,
.pwa-mode .elite-order-card {
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* PWA Mode: Enhanced focus states for accessibility */
.pwa-mode button:focus-visible,
.pwa-mode a:focus-visible,
.pwa-mode input:focus-visible {
    outline: 3px solid #000;
    outline-offset: 2px;
}

/* ─────────────────────────────────────────────────────────────────────────
   DESKTOP BROWSER MODE - Keep Current Premium Design
   ───────────────────────────────────────────────────────────────────────── */

/* Browser mode shows the canonical storefront wrappers */
.browser-mode .sf-page,
.browser-mode .sf-account-layout {
    display: block;
}

/* Browser mode shows all navigation */
.browser-mode .sf-topline,
.browser-mode .sf-header,
.browser-mode .sf-footer {
    display: block;
}

/* ─────────────────────────────────────────────────────────────────────────
   HYBRID MODE - Mobile Browser (Not PWA)
   ───────────────────────────────────────────────────────────────────────── */

/* Mobile browser gets the responsive storefront wrapper */
.browser-mode.mobile-device .sf-page {
    display: block;
}

/* ─────────────────────────────────────────────────────────────────────────
   PWA CART PAGE - Elite Design
   ───────────────────────────────────────────────────────────────────────── */

/* PWA mode: Use elite cart if you want to create one later */
.pwa-mode .premium-cart {
    /* Keep premium cart for now, or create elite-cart later */
    display: block;
}

/* ─────────────────────────────────────────────────────────────────────────
   UTILITY CLASSES
   ───────────────────────────────────────────────────────────────────────── */

/* Show only in PWA */
.pwa-only {
    display: none !important;
}

.pwa-mode .pwa-only {
    display: block !important;
}

/* Show only in browser */
.browser-only {
    display: none !important;
}

.browser-mode .browser-only {
    display: block !important;
}

/* Hide in PWA */
.pwa-hide {
    display: block !important;
}

.pwa-mode .pwa-hide {
    display: none !important;
}

/* Hide in browser */
.browser-hide {
    display: block !important;
}

.browser-mode .browser-hide {
    display: none !important;
}