/* =========================================================================
   DESKTOP MOBILE-FRAME LAYOUT
   =========================================================================
   
   PURPOSE:
   This stylesheet constrains the entire website to a mobile-width container
   (480px) centered on desktop screens. This makes the site look like a 
   mobile phone UI on larger screens.
   
   HOW IT WORKS:
   - Activates only on screens >= 768px (tablets and desktops)
   - Sets body max-width to 480px and centers it
   - Constrains ALL fixed-position elements (bottom nav, modals, toasts,
     floating buttons, etc.) within the 480px frame
   - Adds a subtle border/shadow to simulate a phone frame
   
   FUTURE DESKTOP REDESIGN:
   To create a dedicated desktop layout, simply:
   1. Remove or replace this file
   2. Write new desktop-specific CSS
   All mobile styles will remain untouched.
   
   IMPORTANT: This file does NOT modify any existing CSS.
   It only adds desktop-specific overrides via @media query.
   ========================================================================= */


/* =========================================================================
   DESKTOP BACKGROUND — Visible behind the phone frame
   Soft gray for both dark and light modes. Applied outside the media 
   query on html so it's always present on wide screens.
   ========================================================================= */

@media (min-width: 768px) {

    /* -----------------------------------------------------------------
       HTML BACKGROUND — The area outside the phone frame
       Same soft gray for both dark and light modes.
       ----------------------------------------------------------------- */
    html {
        background: #e8e8e8 !important;
    }

    /* Override light mode too — same soft gray */
    [data-theme="light"] {
        background: #e8e8e8 !important;
    }


    /* -----------------------------------------------------------------
       BODY CONTAINER — The "phone frame"
       Centers the page and limits width to mobile size (480px).
       The !important ensures no @import or other CSS can override this.
       overflow-x: hidden prevents any horizontal bleed.
       ----------------------------------------------------------------- */
    body {
        max-width: 480px !important;
        margin: 0 auto !important;
        position: relative;
        min-height: 100vh;
        overflow-x: hidden;
        /* Subtle shadow to create a phone-like frame effect */
        box-shadow:
            0 0 0 1px rgba(0, 0, 0, 0.08),
            -8px 0 30px rgba(0, 0, 0, 0.06),
            8px 0 30px rgba(0, 0, 0, 0.06);
    }


    /* -----------------------------------------------------------------
       HEADER — Already uses sticky positioning (stays within body)
       Just ensure it doesn't exceed the container width.
       ----------------------------------------------------------------- */
    .header {
        max-width: 480px;
    }


    /* -----------------------------------------------------------------
       BOTTOM NAVIGATION — Fixed at screen bottom
       Must be constrained to 480px and centered horizontally.
       width: 100% ensures it fills the frame (not clipped).
       ----------------------------------------------------------------- */
    .bottom-nav {
        width: 100%;
        max-width: 480px;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%);
    }


    /* -----------------------------------------------------------------
       LIVE ORDER TICKER — Fixed above bottom nav
       Must be constrained like bottom-nav.
       ----------------------------------------------------------------- */
    .live-ticker {
        width: 100%;
        max-width: 480px;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%);
    }


    /* -----------------------------------------------------------------
       FLOATING SUPPORT BUTTONS (WhatsApp/Telegram)
       Positioned at bottom-right. Needs to stay inside the 480px frame.
       We calculate the right offset relative to the centered container.
       ----------------------------------------------------------------- */
    .floating-support {
        right: calc(50% - 480px / 2 + 16px) !important;
        left: auto !important;
    }


    /* -----------------------------------------------------------------
       FLOATING ACTION BUTTONS
       Same approach as floating-support — keep inside the frame.
       ----------------------------------------------------------------- */
    .floating-buttons {
        right: calc(50% - 480px / 2 + 16px) !important;
        left: auto !important;
    }


    /* -----------------------------------------------------------------
       CHAT OVERLAY — Floating chat popup
       Keep it anchored to the right edge of the phone frame.
       ----------------------------------------------------------------- */
    .chat-overlay {
        right: calc(50% - 480px / 2 + 20px) !important;
        left: auto !important;
    }


    /* -----------------------------------------------------------------
       SPA LOADER BAR — Fixed at very top of screen
       Constrain to the frame width and center.
       ----------------------------------------------------------------- */
    #spa-loader {
        width: 100%;
        max-width: 480px;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%);
    }


    /* -----------------------------------------------------------------
       LOADER OVERLAY — Full-screen loading spinner
       Constrain to frame width so it doesn't cover the full desktop.
       ----------------------------------------------------------------- */
    .loader-overlay {
        width: 100%;
        max-width: 480px;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%);
    }


    /* -----------------------------------------------------------------
       PURCHASE BAR (shop.html) — Fixed at bottom
       Uses position: fixed; left: 0; right: 0 in shop.css.
       Must be constrained within the frame.
       ----------------------------------------------------------------- */
    .purchase-bar {
        width: 100%;
        max-width: 480px;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%);
    }


    /* -----------------------------------------------------------------
       TOAST CONTAINER — Dynamically created by JS
       position: fixed with various left/right/top values.
       Force centering within the phone frame.
       ----------------------------------------------------------------- */
    .toast-container {
        width: 100%;
        max-width: 480px;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
    }


    /* -----------------------------------------------------------------
       MODAL OVERLAY — Full-screen modal backdrop
       Constrain to the phone frame so it only covers the app area.
       ----------------------------------------------------------------- */
    .modal-overlay {
        width: 100%;
        max-width: 480px;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%);
    }


    /* -----------------------------------------------------------------
       COMING SOON MODAL — Similar to modal-overlay
       ----------------------------------------------------------------- */
    .coming-soon-modal {
        width: 100%;
        max-width: 480px;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%);
    }


    /* -----------------------------------------------------------------
       POPUP NOTICE OVERLAY — Notification popup modal (index.html)
       Uses position: fixed; inset: 0 which spans full screen.
       ----------------------------------------------------------------- */
    .popup-notice-overlay {
        width: 100%;
        max-width: 480px;
        left: 50% !important;
        right: auto !important;
        top: 0;
        bottom: 0;
        transform: translateX(-50%);
    }


    /* -----------------------------------------------------------------
       SUCCESS POPUP (profile.css) — Uses position: fixed; inset: 0
       Must be constrained within the phone frame.
       ----------------------------------------------------------------- */
    .success-popup {
        width: 100%;
        max-width: 480px;
        left: 50% !important;
        right: auto !important;
        top: 0;
        bottom: 0;
        transform: translateX(-50%);
    }


    /* -----------------------------------------------------------------
       CATCH-ALL: Any other fixed-position overlays or popups
       that use common overlay/popup class naming patterns.
       This ensures future popups automatically stay inside the frame.
       ----------------------------------------------------------------- */
    .overlay,
    .popup,
    .alert-overlay,
    .confirm-overlay,
    .side-drawer-overlay {
        width: 100%;
        max-width: 480px;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%);
    }

}