/* =====================================================================
 * Mobile-First Responsive Enhancement Stylesheet
 *
 * Phase 32: Touch-friendly targets, bottom navigation, responsive
 * overrides, safe area insets, print styles, and PWA support.
 *
 * Loaded AFTER main.css / tailwind.min.css / theme CSS in all
 * storefront layouts. Does NOT apply to admin (admin.css handles
 * its own responsive rules).
 *
 * Approach: base styles for mobile, @media (min-width: …) for larger.
 * ===================================================================== */

/* ---------------------------------------------------------------------
 * 1. CSS Custom Properties for mobile
 * ------------------------------------------------------------------- */
:root {
    --mobile-nav-height: 64px;
    --safe-area-bottom: env(safe-area-inset-bottom, 0px);
    --safe-area-top: env(safe-area-inset-top, 0px);
    --safe-area-left: env(safe-area-inset-left, 0px);
    --safe-area-right: env(safe-area-inset-right, 0px);
    --touch-target: 44px;
}

/* ---------------------------------------------------------------------
 * 2. Touch-friendly minimum target sizes
 * ------------------------------------------------------------------- */
a,
button,
[role="button"],
input[type="submit"],
input[type="button"],
input[type="reset"],
select,
.btn,
.nav-link,
.nav-cmd {
    min-height: var(--touch-target);
    min-width: var(--touch-target);
}

/* Ensure inline text links don't get oversized on desktop */
@media (min-width: 769px) {
    a:not(.btn):not(.nav-link):not(.nav-cmd):not([role="button"]) {
        min-height: auto;
        min-width: auto;
    }
}

/* Form controls touch-friendly */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="tel"],
input[type="date"],
textarea,
select {
    min-height: var(--touch-target);
    font-size: 16px; /* Prevent iOS zoom on focus */
}

/* ---------------------------------------------------------------------
 * 3. Safe area insets for notched devices
 * ------------------------------------------------------------------- */
@supports (padding: env(safe-area-inset-bottom)) {
    body {
        padding-left: var(--safe-area-left);
        padding-right: var(--safe-area-right);
    }

    .mobile-bottom-nav {
        padding-bottom: var(--safe-area-bottom);
    }

    header.fixed,
    .site-header {
        padding-top: var(--safe-area-top);
    }
}

/* ---------------------------------------------------------------------
 * 4. Bottom Navigation Bar (mobile only, ≤640px)
 * ------------------------------------------------------------------- */
.mobile-bottom-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 50;
    background: rgba(10, 15, 30, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    height: var(--mobile-nav-height);
    padding-bottom: var(--safe-area-bottom);
}

.mobile-bottom-nav__list {
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: var(--mobile-nav-height);
    margin: 0;
    padding: 0;
    list-style: none;
}

.mobile-bottom-nav__item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mobile-bottom-nav__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 6px 8px;
    min-height: var(--touch-target);
    min-width: var(--touch-target);
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
    font-size: 0.65rem;
    font-weight: 500;
    transition: color 0.2s ease;
    border-radius: 8px;
}

.mobile-bottom-nav__link:hover,
.mobile-bottom-nav__link:focus {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
}

.mobile-bottom-nav__link.is-active {
    color: #a78bfa;
}

.mobile-bottom-nav__link svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

.mobile-bottom-nav__label {
    display: block;
    line-height: 1;
    white-space: nowrap;
}

@media (max-width: 640px) {
    .mobile-bottom-nav {
        display: block;
    }

    /* Add padding to bottom of page so content isn't hidden behind nav */
    body {
        padding-bottom: calc(var(--mobile-nav-height) + var(--safe-area-bottom));
    }

    /* Move footer above bottom nav */
    footer,
    .site-footer {
        margin-bottom: 0;
        padding-bottom: calc(var(--mobile-nav-height) + var(--safe-area-bottom) + 1rem);
    }
}

/* Light theme overrides for bottom nav */
body.theme-light .mobile-bottom-nav,
body.theme-white .mobile-bottom-nav {
    background: rgba(255, 255, 255, 0.95);
    border-top-color: rgba(0, 0, 0, 0.1);
}

body.theme-light .mobile-bottom-nav__link,
body.theme-white .mobile-bottom-nav__link {
    color: rgba(0, 0, 0, 0.45);
}

body.theme-light .mobile-bottom-nav__link:hover,
body.theme-white .mobile-bottom-nav__link:hover,
body.theme-light .mobile-bottom-nav__link.is-active,
body.theme-white .mobile-bottom-nav__link.is-active {
    color: #6366f1;
}

/* Premium/Elite theme overrides */
body.theme-premium .mobile-bottom-nav {
    background: rgba(12, 10, 9, 0.95);
    border-top-color: rgba(251, 191, 36, 0.15);
}

body.theme-premium .mobile-bottom-nav__link.is-active {
    color: #fbbf24;
}

body.theme-elite .mobile-bottom-nav {
    background: rgba(0, 0, 0, 0.95);
    border-top-color: rgba(6, 182, 212, 0.15);
}

body.theme-elite .mobile-bottom-nav__link.is-active {
    color: #22d3ee;
}

/* ---------------------------------------------------------------------
 * 5. Hamburger Menu Enhancements
 * ------------------------------------------------------------------- */
.hamburger-menu {
    display: none;
    position: relative;
    min-height: var(--touch-target);
    min-width: var(--touch-target);
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 8px;
    color: inherit;
    z-index: 51;
}

.hamburger-menu svg {
    width: 24px;
    height: 24px;
}

@media (max-width: 768px) {
    .hamburger-menu {
        display: inline-flex;
    }
}

/* Slide-in mobile menu overlay */
.mobile-menu-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 49;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.mobile-menu-overlay.is-open {
    display: block;
    opacity: 1;
}

/* Mobile slide-in panel */
.mobile-slide-menu {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(320px, 85vw);
    background: rgba(10, 15, 30, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 51;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 1rem;
    padding-top: calc(1rem + var(--safe-area-top));
}

.mobile-slide-menu.is-open {
    transform: translateX(0);
}

body.theme-light .mobile-slide-menu {
    background: rgba(255, 255, 255, 0.98);
    border-left-color: rgba(0, 0, 0, 0.1);
}

body.theme-white .mobile-slide-menu {
    background: rgba(255, 255, 255, 0.99);
    border-left-color: #e5e7eb;
}

/* Mobile menu items */
.mobile-slide-menu a,
.mobile-slide-menu button {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    min-height: var(--touch-target);
    border-radius: 0.75rem;
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    transition: background 0.15s ease;
    width: 100%;
}

.mobile-slide-menu a:hover,
.mobile-slide-menu button:hover {
    background: rgba(255, 255, 255, 0.06);
    text-decoration: none;
}

/* ---------------------------------------------------------------------
 * 6. Responsive Tables (card layout on mobile)
 * ------------------------------------------------------------------- */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}

/* Card-layout conversion for order tables on narrow screens */
@media (max-width: 640px) {
    .orders-table,
    table.mobile-cards {
        border: 0;
    }

    .orders-table thead,
    table.mobile-cards thead {
        display: none;
    }

    .orders-table tbody tr,
    table.mobile-cards tbody tr {
        display: block;
        padding: 1rem;
        margin-bottom: 0.75rem;
        border-radius: 0.75rem;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .orders-table tbody td,
    table.mobile-cards tbody td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.35rem 0 !important;
        border: none !important;
        font-size: 0.9rem;
    }

    .orders-table tbody td::before,
    table.mobile-cards tbody td::before {
        content: attr(data-label);
        font-weight: 600;
        font-size: 0.8rem;
        color: rgba(255, 255, 255, 0.5);
        margin-right: 1rem;
        white-space: nowrap;
    }

    /* Light/White theme overrides for card tables */
    body.theme-light .orders-table tbody tr,
    body.theme-white .orders-table tbody tr {
        background: rgba(0, 0, 0, 0.02);
        border-color: rgba(0, 0, 0, 0.1);
    }

    body.theme-light .orders-table tbody td::before,
    body.theme-white .orders-table tbody td::before {
        color: rgba(0, 0, 0, 0.5);
    }
}

/* ---------------------------------------------------------------------
 * 7. Responsive Typography
 * ------------------------------------------------------------------- */
html {
    font-size: 16px;
}

@media (max-width: 640px) {
    h1, .text-3xl, .text-4xl {
        font-size: clamp(1.5rem, 5vw, 2.25rem) !important;
    }

    h2, .text-2xl {
        font-size: clamp(1.25rem, 4vw, 1.75rem) !important;
    }
}

/* ---------------------------------------------------------------------
 * 8. Scrollable / Swipeable Containers
 * ------------------------------------------------------------------- */
.scroll-x {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    gap: 1rem;
    padding-bottom: 0.5rem;
}

.scroll-x > * {
    scroll-snap-align: start;
    flex-shrink: 0;
}

/* Hide scrollbar for touch devices */
.scroll-x::-webkit-scrollbar {
    height: 4px;
}

.scroll-x::-webkit-scrollbar-track {
    background: transparent;
}

.scroll-x::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 2px;
}

/* ---------------------------------------------------------------------
 * 9. Image Lazy Loading Styles
 * ------------------------------------------------------------------- */
img[loading="lazy"] {
    opacity: 0;
    transition: opacity 0.4s ease;
}

img[loading="lazy"].loaded,
img[loading="lazy"][complete] {
    opacity: 1;
}

/* Fallback: show immediately if JS not available */
.no-js img[loading="lazy"] {
    opacity: 1;
}

/* ---------------------------------------------------------------------
 * 10. Pull-to-Refresh Visual Indicator
 * ------------------------------------------------------------------- */
.pull-to-refresh {
    position: fixed;
    top: -60px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(99, 102, 241, 0.9);
    color: #fff;
    transition: top 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.pull-to-refresh.is-pulling {
    top: 20px;
}

.pull-to-refresh.is-refreshing {
    top: 20px;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: translateX(-50%) rotate(360deg); }
}

/* ---------------------------------------------------------------------
 * 11. Toast / Notification positioning for mobile
 * ------------------------------------------------------------------- */
@media (max-width: 640px) {
    .toast,
    #toast-error,
    #toast-success {
        position: fixed !important;
        top: auto !important;
        bottom: calc(var(--mobile-nav-height) + var(--safe-area-bottom) + 12px) !important;
        left: 12px !important;
        right: 12px !important;
        max-width: none !important;
        width: auto !important;
    }
}

/* ---------------------------------------------------------------------
 * 12. Viewport Height Fix for Mobile Browsers
 * ------------------------------------------------------------------- */
.full-height {
    height: 100vh;
    height: 100dvh; /* Dynamic viewport height */
}

.min-full-height {
    min-height: 100vh;
    min-height: 100dvh;
}

/* ---------------------------------------------------------------------
 * 13. Mobile-specific layout overrides
 * ------------------------------------------------------------------- */
@media (max-width: 640px) {
    /* Stack flex containers */
    .md\:flex-row {
        flex-direction: column !important;
    }

    /* Full-width cards */
    .glass-dark,
    .glass {
        border-radius: 1rem;
    }

    /* Reduce padding on small screens */
    .px-4 {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    /* Ensure product grid is single column */
    .product-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Checkout responsive: 2-col → 1-col */
@media (max-width: 768px) {
    .lg\:grid-cols-5,
    .lg\:grid-cols-3,
    .lg\:grid-cols-2 {
        grid-template-columns: 1fr !important;
    }

    .lg\:col-span-3,
    .lg\:col-span-2 {
        grid-column: span 1 !important;
    }
}

/* ---------------------------------------------------------------------
 * 14. Hacker Theme Mobile Overrides
 * ------------------------------------------------------------------- */
.hacker-bottom-nav {
    background: rgba(0, 10, 0, 0.95) !important;
    border-top-color: rgba(0, 255, 65, 0.15) !important;
}

.hacker-bottom-nav .mobile-bottom-nav__link {
    color: rgba(0, 255, 65, 0.4);
    font-family: 'JetBrains Mono', monospace;
}

.hacker-bottom-nav .mobile-bottom-nav__link:hover,
.hacker-bottom-nav .mobile-bottom-nav__link.is-active {
    color: rgba(0, 255, 65, 0.9);
}

/* ---------------------------------------------------------------------
 * 15. Minimal Theme Mobile Overrides
 * ------------------------------------------------------------------- */
.minimal-bottom-nav {
    background: rgba(255, 255, 255, 0.98) !important;
    border-top-color: #e5e7eb !important;
}

.minimal-bottom-nav .mobile-bottom-nav__link {
    color: #9ca3af;
}

.minimal-bottom-nav .mobile-bottom-nav__link:hover,
.minimal-bottom-nav .mobile-bottom-nav__link.is-active {
    color: #111827;
}

/* ---------------------------------------------------------------------
 * 16. Print Styles
 * ------------------------------------------------------------------- */
@media print {
    /* Hide navigation and interactive elements */
    header,
    .site-header,
    .mobile-bottom-nav,
    .mobile-slide-menu,
    .mobile-menu-overlay,
    footer,
    .site-footer,
    .toast,
    #toast-error,
    #toast-success,
    .hamburger-menu,
    nav,
    .theme-switcher,
    .storefront-locale,
    #mobile-menu-btn,
    #mobile-menu,
    button[type="submit"],
    .btn-gradient,
    .btn-shimmer,
    .blob {
        display: none !important;
    }

    /* Reset backgrounds */
    body,
    body.animated-bg,
    main {
        background: #fff !important;
        color: #000 !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Reset glassmorphism */
    .glass,
    .glass-dark {
        background: #fff !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        border: 1px solid #ddd !important;
        color: #000 !important;
    }

    /* Reset text colors */
    .text-white,
    .text-white\/50,
    .text-white\/60,
    .text-white\/70,
    .text-white\/40 {
        color: #000 !important;
    }

    /* Gradient text → solid */
    .gradient-text,
    .gradient-text-green,
    .gradient-text-amber {
        background: none !important;
        -webkit-background-clip: initial !important;
        -webkit-text-fill-color: #000 !important;
        background-clip: initial !important;
    }

    /* Show URLs after links */
    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #666;
    }

    /* Don't show URL for buttons */
    a.btn::after,
    a[role="button"]::after {
        content: none;
    }

    /* Tables */
    table {
        border-collapse: collapse;
        width: 100%;
    }

    th, td {
        border: 1px solid #ddd;
        padding: 0.5rem;
        text-align: left;
    }

    /* Page breaks */
    h1, h2, h3 {
        page-break-after: avoid;
    }

    tr {
        page-break-inside: avoid;
    }

    /* Receipt-specific */
    .order-detail,
    .delivery-text,
    .payment-success {
        border: 1px solid #ddd;
        padding: 1rem;
        page-break-inside: avoid;
    }

    /* Remove animations */
    *, *::before, *::after {
        animation: none !important;
        transition: none !important;
    }
}

/* ---------------------------------------------------------------------
 * 17. Accessibility: reduced motion
 * ------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---------------------------------------------------------------------
 * 18. Landscape phone adjustments
 * ------------------------------------------------------------------- */
@media (max-height: 500px) and (orientation: landscape) {
    .mobile-bottom-nav {
        height: 48px;
    }

    .mobile-bottom-nav__list {
        height: 48px;
    }

    .mobile-bottom-nav__label {
        display: none;
    }

    .mobile-bottom-nav__link svg {
        width: 20px;
        height: 20px;
    }
}