/* ===========================================
   Layout and Structure Styles
   Extracted from simple.blade.php inline styles
   =========================================== */

/* CSS Variables für konsistentes Design */
:root {
    --color-primary: #3B82F6;
    --color-primary-hover: #2563EB;
    --color-secondary: #10B981;
    --color-danger: #EF4444;
    --transition-base: 200ms ease;
}

/* Body and Main Layout */
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
    min-height: calc(100vh - 400px); /* Subtract approximate header + footer height */
    position: relative;
}

/* Main content container responsive width */
.main-container {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 20px;
    transition: all 0.3s ease;
}

/* Large displays - keep centered */
@media (min-width: 1600px) {
    .main-container {
        max-width: 1100px;
        margin: 0 auto;
    }
}

/* When screen is exactly wide enough for content + sidebar */
@media (min-width: 1480px) and (max-width: 1599px) {
    /* Start considering cart sidebar */
    .page-localmenu .main-container {
        max-width: 1100px;
        margin-left: auto;
        margin-right: 400px; /* 380px sidebar + 20px gap */
    }
}

/* Medium desktop - adjust for cart sidebar */
@media (min-width: 1200px) and (max-width: 1479px) {
    .page-localmenu .main-container {
        max-width: calc(100vw - 420px); /* 380px sidebar + 40px margins */
        margin-left: 20px;
        margin-right: 400px;
    }
}

/* Tablet - no sidebar, center content */
@media (min-width: 768px) and (max-width: 1199px) {
    .main-container {
        max-width: 900px;
        padding: 20px;
    }
}

/* Mobile - full width with padding */
@media (max-width: 767px) {
    .main-container {
        padding: 10px;
    }
}

/* Optimierte Button Styles */
.btn-primary {
    background: var(--color-primary);
    transition: var(--transition-base);
}

.btn-primary:hover {
    background: var(--color-primary-hover);
}

/* Notification Container Styles */
:root {
    /* 2026-07-29 (Warenkorb-Audit A2/A3): Höhe der grünen mobilen Warenkorb-Leiste
       (.mobile-cart-btn / #mobileCartBtn, definiert in mobile-cart-lieferando.css —
       nicht Teil dieser Session/Datei) als geteilte Variable. Toast-Container (unten)
       und Scroll-to-top-Button docken damit oberhalb der Leiste an statt dahinter/
       darauf zu liegen. Statischer Fallback (kein JS-Messwert) — deckt die real
       gemessenen ~60-74px der Leiste über ihre eigenen Breakpoints mit Marge ab.
    */
    --cart-bar-height: 80px;
}

/* 2026-08-26 Mobile-Audit (Fund lastazione iPhone): der Container selbst darf NIE Taps fangen —
   mit altem notification.js (Inline top:20px) + der bottom-Regel unten spannte er sich ueber
   732px und blockierte z.B. "Spaeter eingeben" im Adress-Modal. Nur die Toasts sind klickbar. */
#notification-container {
    pointer-events: none;
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 400px;
}
#notification-container > * {
    pointer-events: auto;
}

@media (max-width: 640px) {
    /* 2026-07-29 (Warenkorb-Audit A2): unten statt oben, ÜBER der grünen Warenkorb-
       Leiste andocken (Leiste + Safe-Area + Abstand) — vorher deckte der Toast oben
       Kategorie-Navigation/Hero ab (Audit-Screenshots mobile-2/mobile-3). Die
       top:20px/right:20px-Basisregel oben griff auf Mobile bisher NICHT wirklich,
       weil notification.js den Container zusätzlich inline positioniert hatte
       (Inline schlägt externes CSS ohne !important) — das ist jetzt entfernt
       (siehe notification.js init()), diese Regel ist damit die einzige Quelle.
    */
    #notification-container {
        top: auto;
        left: 10px;
        right: 10px;
        bottom: calc(var(--cart-bar-height) + env(safe-area-inset-bottom, 0px) + 12px);
        max-width: none;
    }
}

/* Additional responsive layouts for all devices */
        
        /* Small desktop / large tablet */
        @media (min-width: 1024px) and (max-width: 1199px) {
            .main-container {
                max-width: 100%;
                padding: 15px;
            }
            
            .page-localmenu .main-container {
                max-width: calc(100vw - 400px); /* 380px sidebar + 20px margin */
                margin-left: 10px;
                margin-right: 390px;
            }
        }
        
        /* iPad Pro and larger tablets */
        @media (min-width: 1024px) and (max-width: 1199px) {
            .main-container {
                max-width: 100%;
                padding: 20px;
            }
            
            /* iPad Pro landscape - consider cart sidebar */
            @media (orientation: landscape) {
                .page-localmenu .main-container {
                    max-width: calc(100vw - 400px);
                    margin-left: 20px;
                    margin-right: 380px;
                }
            }
            
            /* iPad Pro portrait - cart overlays */
            @media (orientation: portrait) {
                .page-localmenu .main-container {
                    margin: 0 auto;
                    max-width: 100%;
                }
            }
        }
        
        /* iPad and standard tablets */
        @media (min-width: 768px) and (max-width: 1023px) {
            .main-container {
                max-width: 100%;
                padding: 20px;
            }
            
            /* iPad landscape */
            @media (orientation: landscape) and (min-width: 1000px) {
                .page-localmenu .main-container {
                    max-width: calc(100vw - 380px);
                    margin-left: 20px;
                    margin-right: 360px;
                }
            }
            
            /* iPad portrait and smaller landscape */
            @media (orientation: portrait), (max-width: 999px) {
                .page-localmenu .main-container {
                    margin: 0 auto;
                    max-width: 100%;
                    padding: 20px;
                }
            }
        }
        
        /* Mobile view */
        @media (max-width: 767px) {
            .main-container {
                max-width: 100%;
                padding: 10px;
            }
            
            /* On mobile, cart sidebar overlays */
            .page-localmenu .main-container {
                margin: 0 auto;
            }
        }
        
        /* Cart sidebar responsive behavior */
        @media (max-width: 1023px) {
            /* On tablets and mobile, cart sidebar should overlay */
            .ti-cart-sidebar,
            .cart-sidebar {
                position: fixed !important;
                right: -100%;
                transition: right 0.3s ease;
                z-index: 1050;
            }
            
            .ti-cart-sidebar.show,
            .cart-sidebar.show,
            body.cart-sidebar-open .ti-cart-sidebar,
            body.cart-sidebar-open .cart-sidebar {
                right: 0;
            }
            
            /* Add overlay for tablets */
            body.cart-sidebar-open::before {
                content: '';
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: rgba(0, 0, 0, 0.5);
                z-index: 1049;
            }
        }