/* ===== Responsive Fixes - Fan Store ===== */

/* Scrollbar hide utility */
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

/* Admin data tables: horizontal scroll on mobile */
@media (max-width: 1023px) {
    .data-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ===== Global: Very Small Screens (< 360px) ===== */
@media (max-width: 359px) {
    .container {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    /* Smaller headings */
    h1 { font-size: 1.25rem !important; }
    h2 { font-size: 1.1rem !important; }

    /* Product card tweaks */
    .product-card .p-4 {
        padding: 0.5rem !important;
    }
    .product-card .text-lg {
        font-size: 0.875rem !important;
    }
    .product-card .line-clamp-2 {
        font-size: 0.75rem !important;
    }

    /* Pagination smaller */
    .ajax-pagination a,
    .ajax-pagination span {
        width: 2rem !important;
        height: 2rem !important;
        font-size: 0.75rem !important;
    }
}

/* ===== Small Screens (< 480px) ===== */
@media (max-width: 479px) {
    /* Hero slider shorter on very small */
    .hero-slider .swiper-slide > div {
        min-height: 350px;
    }

    /* Features section: stack items better */
    .features-grid .flex {
        flex-direction: column;
        text-align: center;
        padding: 0.75rem !important;
    }

    /* Footer grid: single column with box cards */
    footer .grid {
        grid-template-columns: 1fr !important;
    }
    footer .grid > div {
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 1rem;
        padding: 1.25rem;
    }

    /* Cart sidebar: full width */
    .cart-sidebar {
        max-width: 100% !important;
    }

    /* Breadcrumb: hide overflow */
    nav.flex.items-center.gap-2.text-sm {
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    nav.flex.items-center.gap-2.text-sm::-webkit-scrollbar {
        display: none;
    }

    /* Offers page header smaller */
    .offers-header h1 {
        font-size: 1.25rem !important;
    }
}

/* ===== Mobile Screens (< 640px) ===== */
@media (max-width: 639px) {
    /* Product grid: smaller gaps */
    .grid.gap-4 {
        gap: 0.5rem !important;
    }
    .grid.gap-6 {
        gap: 0.75rem !important;
    }

    /* Category icons: smaller on mobile */
    .category-icon-box {
        width: 3.5rem !important;
        height: 3.5rem !important;
    }
    .category-icon-box .material-icons-round {
        font-size: 1.5rem !important;
    }

    /* Newsletter form: full width button */
    .newsletter-form {
        flex-direction: column !important;
    }

    /* Toast: full width on mobile */
    #toast-container {
        left: 0.5rem !important;
        right: 0.5rem !important;
    }
    #toast-container > div {
        width: 100% !important;
    }

    /* Cart item row: better spacing */
    .cart-item-row {
        gap: 0.5rem !important;
    }

    /* Swiper navigation arrows: smaller */
    .swiper-button-next,
    .swiper-button-prev {
        width: 30px !important;
        height: 30px !important;
    }
    .swiper-button-next::after,
    .swiper-button-prev::after {
        font-size: 14px !important;
    }
}

/* ===== Tablet Screens (641px - 1023px) ===== */
@media (min-width: 641px) and (max-width: 1023px) {
    /* Better product grid on tablets */
    .products-main-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

/* ===== Products Filter Sidebar Mobile ===== */
@media (max-width: 1023px) {
    /* Filter sidebar as overlay on mobile */
    .filter-sidebar-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 40;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
    }
    .filter-sidebar-overlay.active {
        opacity: 1;
        visibility: visible;
    }

    .filter-sidebar {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: 280px;
        max-width: 85vw;
        z-index: 50;
        transform: translateX(100%);
        transition: transform 0.3s ease;
        overflow-y: auto;
        background: var(--bg-400, #0a0a14);
    }
    .filter-sidebar.active {
        transform: translateX(0);
    }

    .filter-toggle-btn {
        display: inline-flex !important;
    }
}

@media (min-width: 1024px) {
    .filter-sidebar-overlay {
        display: none !important;
    }
    .filter-toggle-btn {
        display: none !important;
    }
}

/* ===== Cart Page Mobile ===== */
@media (max-width: 767px) {
    .cart-desktop-header {
        display: none !important;
    }
    .cart-item-grid {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 0.75rem !important;
    }
    .cart-item-image {
        width: 5rem !important;
        height: 5rem !important;
    }
    .cart-item-info {
        flex: 1 !important;
        min-width: 0 !important;
    }
    .cart-item-actions {
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }
}

/* ===== Checkout Page Mobile ===== */
@media (max-width: 1023px) {
    .checkout-grid {
        grid-template-columns: 1fr !important;
    }
    .checkout-summary {
        position: static !important;
    }
}

/* ===== Product Detail Mobile ===== */
@media (max-width: 639px) {
    /* Tabs: scrollable */
    .product-tabs {
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .product-tabs::-webkit-scrollbar {
        display: none;
    }

    /* Specs table: better on mobile */
    .specs-table td {
        display: block;
        width: 100% !important;
        padding: 0.5rem 0 !important;
    }
    .specs-table td:first-child {
        padding-bottom: 0 !important;
        font-weight: 600;
    }
    .specs-table tr {
        display: block;
        padding: 0.75rem 0;
    }
}

/* ===== User Dashboard & Orders Mobile ===== */

/* Prevent horizontal overflow on user pages */
body {
    overflow-x: hidden;
}

/* User layout: mobile main content */
@media (max-width: 1023px) {
    .user-dashboard-main {
        padding: 1rem !important;
    }

    /* Sidebar hidden, main takes full width */
    body > .flex > main.flex-1 {
        width: 100% !important;
        max-width: 100vw;
        overflow-x: hidden;
    }
}

/* User pages: smaller padding on mobile */
@media (max-width: 639px) {
    /* Main content area less padding */
    body > .flex > main.flex-1 {
        padding: 0.75rem !important;
    }

    /* All glass cards: tighter on mobile */
    body > .flex > main .glass {
        padding: 0.875rem !important;
        border-radius: 0.75rem !important;
    }

    /* Order cards: better spacing */
    body > .flex > main .space-y-4 > .glass {
        padding: 0.875rem !important;
    }

    /* User mobile header: tighter */
    header.lg\:hidden {
        padding: 0.625rem 0.75rem !important;
    }

    /* Filter bar: smaller */
    .scrollbar-hide a {
        padding: 0.25rem 0.625rem !important;
        font-size: 0.7rem !important;
        border-radius: 0.5rem !important;
    }

    /* Order status icon */
    .space-y-4 > .glass .w-10 {
        width: 2.25rem !important;
        height: 2.25rem !important;
    }
    .space-y-4 > .glass .w-10 .material-icons-round {
        font-size: 1rem !important;
    }

    /* Order number smaller */
    .space-y-4 > .glass span[dir="ltr"].font-bold {
        font-size: 0.8rem !important;
    }

    /* Price section */
    .space-y-4 > .glass .text-base.font-bold {
        font-size: 0.9rem !important;
    }

    /* Pagination: smaller */
    nav.flex.items-center.justify-center a {
        width: 2rem !important;
        height: 2rem !important;
        font-size: 0.75rem !important;
        border-radius: 0.5rem !important;
    }

    /* Grid cols on mobile: single column */
    .grid.grid-cols-1.lg\:grid-cols-3 {
        gap: 0.75rem !important;
    }
}

/* Very small phones (< 375px) */
@media (max-width: 374px) {
    body > .flex > main.flex-1 {
        padding: 0.5rem !important;
    }

    /* Stack order info vertically */
    .space-y-4 > .glass .flex.items-start {
        gap: 0.5rem !important;
    }

    /* Hide action buttons text, keep icons */
    .space-y-4 > .glass .flex.items-center.gap-1\.5 a,
    .space-y-4 > .glass .flex.items-center.gap-1\.5 button {
        padding: 0.375rem !important;
    }
}

/* ===== Admin Layout Mobile ===== */
@media (max-width: 1023px) {
    .admin-sidebar {
        position: fixed !important;
        z-index: 50 !important;
    }
    .admin-main-content {
        margin-right: 0 !important;
        width: 100% !important;
    }
}

/* ===== Scroll Snap for Category Carousel on Mobile ===== */
@media (max-width: 767px) {
    .category-scroll {
        display: flex !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 1rem !important;
        padding-bottom: 0.5rem;
    }
    .category-scroll::-webkit-scrollbar {
        display: none;
    }
    .category-scroll > * {
        scroll-snap-align: start;
        flex-shrink: 0;
        width: 5rem;
    }
}

/* ===== Fix touch targets for mobile ===== */
@media (max-width: 767px) {
    /* Ensure minimum touch target sizes */
    button, a, [role="button"] {
        min-height: 36px;
    }

    /* Better spacing for form inputs on mobile */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="tel"],
    input[type="number"],
    textarea,
    select {
        font-size: 16px !important; /* Prevents zoom on iOS */
    }
}

/* ===== Print Styles ===== */
@media print {
    header, footer, .mobile-menu, .cart-sidebar, #toast-container {
        display: none !important;
    }
    body {
        background: white !important;
        color: black !important;
    }
}