/* ==========================================
   Responsive Design - Tablet & Desktop
   ========================================== */

/* Tablet - 768px and up */
@media (min-width: 768px) {
    body {
        padding-bottom: 60px;
    }
    
    /* Header */
    .header-container {
        max-width: min(1680px, calc(100% - 24px));
        width: 100%;
        margin: 0 auto;
        padding: 12px 12px;
        display: grid;
        grid-template-columns: max-content minmax(0, 1fr) max-content;
        grid-template-areas: "logo nav icons";
        align-items: center;
        gap: clamp(8px, 1vw, 16px);
    }
    
    /* Hide hamburger on desktop */
    .hamburger-menu {
        display: none;
    }
    
    /* Show desktop navigation */
    .desktop-nav {
        display: flex;
        grid-area: nav;
        justify-self: stretch;
        justify-content: center;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        gap: clamp(1px, 0.35vw, 4px);
        margin: 0;
    }

    .header-icons {
        grid-area: icons;
        justify-self: start;
        justify-content: flex-end;
        flex: 0 0 auto;
        white-space: nowrap;
        direction: ltr;
        padding-left: 30px;
    }
    
    /* Show desktop icons */
    .desktop-only {
        display: flex;
    }
    
    /* Logo stays on the right */
    .logo {
        grid-area: logo;
        justify-self: end;
        flex: 0 0 auto;
        text-align: right;
    }

    .logo a {
        justify-content: flex-end;
        width: clamp(150px, 16vw, 260px);
        min-height: 44px;
    }

    .desktop-nav a {
        padding: clamp(6px, 0.55vw, 8px) clamp(8px, 0.8vw, 12px);
        font-size: clamp(12px, 0.85vw, 14px);
    }
    
    /* Products Grid - 3 columns on tablet */
    .products-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }
    
    .instagram-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }
    
    /* Categories - handled in main CSS with auto-fit */
    
    /* فلت: حذف حرکت و سایه در هاور دسته‌ها */
    .category-item:hover {
        transform: none;
        box-shadow: none;
        background:#fcfcfc;
    }
    
    .category-item i {
        font-size: 36px;
    }
    
    .category-item span {
        font-size: 14px;
    }
    
    /* Bottom Nav - Keep it fixed on desktop too */
    /* Commented out to keep bottom-nav sticky on all devices
    .bottom-nav {
        position: static;
        height: auto;
        padding: 40px 24px;
        border-top: 1px solid var(--border-color);
        margin-top: 40px;
    }
    
    .nav-item {
        flex-direction: row;
        gap: 8px;
    }
    
    .nav-item i {
        font-size: 20px;
    }
    
    .nav-item span {
        font-size: 14px;
    }
    */
}

/* Narrow desktop header tuning */
@media (min-width: 768px) and (max-width: 1200px) {
    .header-container {
        grid-template-columns: minmax(150px, 190px) minmax(0, 1fr) minmax(150px, 190px);
        gap: 10px;
        padding: 12px 18px;
    }

    .desktop-nav {
        gap: 1px;
    }

    .desktop-nav a {
        padding: 6px 10px;
        font-size: 13px;
    }
}

/* Desktop - 1024px and up */
@media (min-width: 1024px) {
    /* Products Grid - 4 columns on desktop */
    .products-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
    }
    
    .instagram-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
    }
    
    /* Categories - centered with auto-fit, handled in main CSS */
    
    /* Max width for content */
    .quick-categories,
    .highlight-bar-container,
    .products-section,
    .instagram-section {
        max-width: 1200px;
        margin-left: auto;
        margin-right: auto;
    }
    
    /* Product card - only image highlight on hover */
    .product-card:hover .product-image::before {
        background: rgba(80, 80, 80, 0.25);
    }
    
    /* No other hover effects on product cards */
    .product-card:hover {
        transform: none !important;
        box-shadow: none !important;
        background: transparent !important;
    }
    
    .category-item:hover {
        background: #fef9e7;
    }
    
    .btn-view-all:hover {
        background: var(--primary-color);
        color: white;
        border-color: var(--primary-color);
    }
    
    .instagram-post:hover .post-image::before {
        background: rgba(78, 78, 78, 0.25);
    }
}

/* Large Desktop - 1440px and up */
@media (min-width: 1440px) {
    .products-grid {
        grid-template-columns: repeat(5, 1fr);
        gap: 24px;
    }
    
    .quick-categories,
    .products-section,
    .instagram-section {
        max-width: 1400px;
    }
    
    .slide-content h2 {
        font-size: 40px;
    }
}

/* Small Mobile - 375px and down */
@media (max-width: 375px) {
    .logo a {
        font-size: 18px;
    }
    
    .slide-content h2 {
        font-size: 20px;
    }
    
    .slide-content p {
        font-size: 14px;
    }
    
    .category-item {
        padding: 12px 6px;
    }
    
    .category-item i {
        font-size: 24px;
    }
    
    .category-item span {
        font-size: 11px;
    }
    
    .product-name {
        font-size: 13px;
    }
    
    .product-description {
        font-size: 11px;
    }
    
    .product-price {
        font-size: 14px;
    }

    .product-price--current {
        font-size: 14px;
    }

    .product-price--original {
        font-size: 12px;
    }
}

/* =====================================================
   Manual Dark Mode (Disabled by default)
   To enable later: add class="theme-dark" to <body>
   or toggle via JS and store preference in localStorage.
   ===================================================== */
.theme-dark {
    --primary-color: #ecf0f1;
    --text-primary: #ecf0f1;
    --text-secondary: #bdc3c7;
    --bg-light: #1a1a1a;
    --bg-white: #1f1f1f;
    --border-color: #333;
    --accent-color: #3498db;
    --shadow-sm: 0 2px 4px rgba(0,0,0,0.6);
    --shadow-md: 0 4px 8px rgba(0,0,0,0.55);
    --shadow-lg: 0 8px 16px rgba(0,0,0,0.5);
}

body.theme-dark {
    background: var(--bg-light);
    color: var(--text-primary);
}

body.theme-dark .main-header {background: var(--bg-white);}
body.theme-dark .product-card,
body.theme-dark .instagram-post,
body.theme-dark .category-item {background: var(--bg-white); border-color: var(--border-color);}
body.theme-dark .product-card:hover .product-image::before {background: rgba(255,255,255,0.15);}
body.theme-dark .product-card:hover {transform: none !important; box-shadow: none !important; background: transparent !important;}
body.theme-dark .btn-view-all {background: var(--bg-white); border-color: var(--border-color); color: var(--text-primary);} 
body.theme-dark .btn-view-all:hover {background: var(--primary-color); color:#000;}
body.theme-dark .bottom-nav {background: var(--bg-white); border-top-color: var(--border-color);} 

/* Print Styles */
@media print {
    .main-header,
    .bottom-nav,
    .side-drawer,
    .search-bar {
        display: none !important;
    }
    
    body {
        padding: 0;
    }
    
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Animation for page load */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.products-section,
.instagram-section {
    animation: fadeIn 0.5s ease;
}

/* Accessibility - Focus Styles */
/* a:focus,
button:focus,
input:focus {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
} */

/* Smooth Scroll */
html {
    scroll-behavior: smooth;
}

/* Selection Color */
::selection {
    background: var(--secondary-color);
    color: white;
}

/* Loading State */
.loading {
    pointer-events: none;
    opacity: 0.6;
}

/* Error State */
.error-message {
    padding: 16px;
    background: #fee;
    color: #c33;
    border-radius: 8px;
    margin: 16px;
    text-align: center;
}

/* Success State */
.success-message {
    padding: 16px;
    background: #efe;
    color: #3c3;
    border-radius: 8px;
    margin: 16px;
    text-align: center;
}