/* FreshMilk — mobile-first responsive layout */

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

:root {
    --app-bg: #f8fafc;
    --nav-bar-height: 4.25rem;
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --bottom-nav-total: calc(var(--nav-bar-height) + var(--safe-bottom) + 0.5rem);
}

/* ----- App shell (dashboard, cart, wallet, etc.) ----- */
@media (max-width: 479px) {
    body.app-shell {
        background-color: var(--app-bg);
        align-items: stretch;
        justify-content: flex-start;
        min-height: 100dvh;
        min-height: 100svh;
        overflow: hidden;
        padding: 0;
    }

    body.app-shell .app-container {
        width: 100%;
        max-width: 100%;
        height: 100dvh;
        height: 100svh;
        max-height: none;
        border-radius: 0;
        box-shadow: none;
    }

    body.app-shell .app-container .rounded-b-\[2rem\] {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }
}

@media (min-width: 480px) {
    body.app-shell .app-container {
        height: min(90dvh, 896px);
        border-radius: 2rem;
    }
}

.app-container {
    width: 100%;
    max-width: 414px;
}

/* Scroll areas above bottom nav */
.scroll-pad-nav {
    padding-bottom: calc(6rem + var(--safe-bottom)) !important;
}

.scroll-pad-cart {
    padding-bottom: calc(10rem + var(--safe-bottom)) !important;
}

/* Bottom navigation + checkout bars */
.app-bottom-nav {
    padding-bottom: max(0.5rem, var(--safe-bottom)) !important;
    padding-left: max(1rem, var(--safe-left)) !important;
    padding-right: max(1rem, var(--safe-right)) !important;
}

.cart-checkout-bar {
    bottom: var(--bottom-nav-total);
    left: 0;
    right: 0;
    padding-left: max(1rem, var(--safe-left));
    padding-right: max(1rem, var(--safe-right));
}

/* Top headers respect notch */
.app-header-safe {
    padding-top: max(1.25rem, var(--safe-top));
}

/* ----- Auth pages (login, signup) ----- */
body.auth-page {
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    min-height: 100dvh;
    min-height: 100svh;
    padding: max(1rem, var(--safe-top)) max(1rem, var(--safe-right)) max(1rem, var(--safe-bottom)) max(1rem, var(--safe-left));
}

@media (max-width: 479px) {
    body.auth-page {
        align-items: flex-start;
        justify-content: flex-start;
    }

    body.auth-page .auth-card {
        border-radius: 1.75rem;
        padding: 1.5rem !important;
        margin-top: 0.5rem;
        margin-bottom: 1rem;
    }
}

@media (min-width: 480px) {
    body.auth-page {
        align-items: center;
        justify-content: center;
    }
}

/* ----- Splash ----- */
body.splash-page {
    min-height: 100dvh;
    min-height: 100svh;
    padding: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);
}

@media (max-width: 380px) {
    .splash-logo {
        width: 7rem !important;
        height: 7rem !important;
        padding: 0.75rem !important;
    }

    .splash-card {
        padding: 1.75rem !important;
        width: 92% !important;
    }

    .splash-title {
        font-size: 1.75rem !important;
    }
}

/* ----- Tight phone widths ----- */
@media (max-width: 374px) {
    .app-bottom-nav {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    .app-bottom-nav .text-\[10px\] {
        font-size: 9px;
    }

    .promo-slide {
        width: 92% !important;
        padding: 1rem !important;
    }

    .category-chip {
        width: 3.25rem !important;
        height: 3.25rem !important;
    }

    .category-label {
        width: 3.5rem !important;
        font-size: 10px;
    }

    .product-grid-tight {
        gap: 0.625rem;
    }

    .product-grid-tight .text-sm {
        font-size: 0.8125rem;
    }

    .freq-grid-compact {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .day-pick-compact {
        gap: 0.125rem;
    }

    .day-pick-compact button {
        font-size: 0.625rem;
        padding: 0.35rem 0.15rem;
    }
}

/* Prevent horizontal overflow */
.app-container,
.auth-card,
.splash-card {
    max-width: 100%;
    box-sizing: border-box;
}

img {
    max-width: 100%;
    height: auto;
}

/* Modals / sheets on small screens */
@media (max-width: 479px) {
    .app-sheet {
        max-height: min(92dvh, 92svh);
        padding-bottom: max(1.5rem, var(--safe-bottom));
    }
}