/* ==========================================================================
   Responsive Styles - רספונסיביות לכל גדלי המסך
   ========================================================================== */

/* ==========================================================================
   מסכים גדולים מאוד - 1920px+ (Full HD ומעלה)
   ========================================================================== */
@media (min-width: 1920px) {
    :root {
        --container-max-width: 1600px;
    }
    
    .header-container,
    main.container,
    .categories-bar .container,
    .card-slider-section .container {
        max-width: var(--container-max-width);
    }
    
    /* רשת מוצרים - 6 עמודות */
    .products-grid .row {
        --bs-gutter-x: 1.5rem;
        --bs-gutter-y: 1.5rem;
    }
    
    .products-grid .col-6 {
        flex: 0 0 auto;
        width: 16.666667%;
    }
    
    /* כרטיס מוצר יותר גדול */
    .product-card {
        border-radius: var(--border-radius-lg);
    }
    
    .product-name {
        font-size: 1.1rem;
    }
    
    .product-price {
        font-size: 1.15rem;
    }
    
    /* באנר יותר גבוה */
    .main-banner-section {
        min-height: 500px;
    }
    
    /* סקשנים עם יותר padding */
    .specials-section,
    .magnets-section,
    .reviews-section {
        padding: var(--spacing-xl) 0;
        margin-top: 32px;
    }
    
    /* טקסט גדול יותר */
    .specials-title,
    .section-title {
        font-size: var(--font-size-2xl);
    }
    
    /* מודל מוצר רחב יותר */
    .product-modal .modal-dialog {
        max-width: 900px;
    }
    
    /* עגלת קניות רחבה יותר */
    .cart-drawer {
        width: 450px;
    }
}

/* ==========================================================================
   מסכים גדולים - 1600px+ (QHD)
   ========================================================================== */
@media (min-width: 1600px) and (max-width: 1919px) {
    :root {
        --container-max-width: 1440px;
    }
    
    .header-container,
    main.container,
    .categories-bar .container,
    .card-slider-section .container {
        max-width: var(--container-max-width);
    }
    
    /* רשת מוצרים - 5 עמודות */
    .products-grid .col-6 {
        flex: 0 0 auto;
        width: 20%;
    }
    
    .products-grid .row {
        --bs-gutter-x: 1.25rem;
        --bs-gutter-y: 1.25rem;
    }
    
    /* באנר */
    .main-banner-section {
        min-height: 450px;
    }
    
    /* מודל מוצר */
    .product-modal .modal-dialog {
        max-width: 850px;
    }
    
    /* עגלת קניות */
    .cart-drawer {
        width: 420px;
    }
}

/* ==========================================================================
   מסכים בינוניים-גדולים - 1400px+
   ========================================================================== */
@media (min-width: 1400px) and (max-width: 1599px) {
    :root {
        --container-max-width: 1320px;
    }
    
    .header-container,
    main.container,
    .categories-bar .container,
    .card-slider-section .container {
        max-width: var(--container-max-width);
    }
    
    /* רשת מוצרים - 5 עמודות */
    .products-grid .col-6 {
        flex: 0 0 auto;
        width: 20%;
    }
    
    /* מודל מוצר */
    .product-modal .modal-dialog {
        max-width: 800px;
    }
    
    /* עגלת קניות */
    .cart-drawer {
        width: 400px;
    }
}

/* ==========================================================================
   דסקטופ - 1200px+
   ========================================================================== */
@media (min-width: 1200px) and (max-width: 1399px) {
    /* רשת מוצרים - 4 עמודות */
    .products-grid .col-6 {
        flex: 0 0 auto;
        width: 25%;
    }
    
    .products-grid .row {
        --bs-gutter-x: 1rem;
        --bs-gutter-y: 1rem;
    }
    
    /* מודל מוצר */
    .product-modal .modal-dialog {
        max-width: 750px;
    }
    
    /* באנר */
    .main-banner-section {
        min-height: 400px;
    }
    
    /* עגלת קניות */
    .cart-drawer {
        width: 380px;
    }
    
    /* הסתרת ניווט תחתון בדסקטופ */
    .bottom-bar {
        display: none;
    }
    
    /* תצוגת כפתור עגלה צף */
    .cart-fab {
        bottom: 24px;
        left: 24px;
    }
}

/* ==========================================================================
   טאבלט גדול - 992px - 1199px
   ========================================================================== */
@media (min-width: 992px) and (max-width: 1199px) {
    /* רשת מוצרים - 4 עמודות */
    .products-grid .col-6 {
        flex: 0 0 auto;
        width: 25%;
    }
    
    /* מודל מוצר */
    .product-modal .modal-dialog {
        max-width: 700px;
    }
    
    /* הסתרת ניווט תחתון */
    .bottom-bar {
        display: none;
    }
    
    /* באנר */
    .main-banner-section {
        min-height: 350px;
    }
}

/* ==========================================================================
   טאבלט - 768px - 991px
   ========================================================================== */
@media (min-width: 768px) and (max-width: 991px) {
    /* רשת מוצרים - 3 עמודות */
    .products-grid .col-6 {
        flex: 0 0 auto;
        width: 33.333333%;
    }
    
    /* מודל מוצר */
    .product-modal .modal-dialog {
        max-width: 600px;
        margin: 1rem;
    }
    
    /* באנר */
    .main-banner-section {
        min-height: 300px;
    }
    
    /* עגלת קניות */
    .cart-drawer {
        width: 350px;
    }
    
    /* Header */
    .header-container {
        padding: 0 var(--spacing-mobile);
    }
}

/* ==========================================================================
   מובייל גדול - 576px - 767px
   ========================================================================== */
@media (min-width: 576px) and (max-width: 767px) {
    /* רשת מוצרים - 3 עמודות */
    .products-grid .col-6 {
        flex: 0 0 auto;
        width: 33.333333%;
    }
    
    /* מודל מוצר */
    .product-modal .modal-dialog {
        max-width: 90%;
        margin: 1rem auto;
    }
    
    /* באנר */
    .main-banner-section {
        min-height: 250px;
    }
}

/* ==========================================================================
   מובייל רגיל - 400px - 575px
   ========================================================================== */
@media (min-width: 400px) and (max-width: 575px) {
    /* רשת מוצרים - 2 עמודות */
    .products-grid .col-6 {
        width: 50%;
    }
    
    .products-grid .row {
        --bs-gutter-x: 0.5rem;
        --bs-gutter-y: 0.5rem;
    }
    
    /* באנר */
    .main-banner-section {
        min-height: 220px;
    }
}

/* ==========================================================================
   מובייל קטן - עד 399px
   ========================================================================== */
@media (max-width: 399px) {
    /* רשת מוצרים - 2 עמודות */
    .products-grid .col-6 {
        width: 50%;
    }
    
    .products-grid .row {
        --bs-gutter-x: 0.4rem;
        --bs-gutter-y: 0.4rem;
    }
    
    /* Container padding קטן יותר */
    main.container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    
    /* כרטיס מוצר */
    .product-card {
        border-radius: 12px;
    }
    
    .card-img-wrapper {
        padding: 6px;
    }
    
    .card-body {
        padding: 10px;
    }
    
    .product-name {
        font-size: 0.875rem;
    }
    
    /* Hero */
    .hero-overlay {
        padding: 16px 12px;
    }
    
    .hero-overlay h1 {
        font-size: 1.5rem;
    }
    
    .hero-overlay p {
        font-size: 0.875rem;
    }
    
    /* כפתור עגלה צף */
    .cart-fab {
        width: 50px;
        height: 50px;
        font-size: 1.1rem;
    }
    
    /* באנר */
    .main-banner-section {
        min-height: 180px;
    }
}

/* ==========================================================================
   שיפורים לנגישות במגע (Touch) - כל המסכים
   ========================================================================== */
@media (hover: none) and (pointer: coarse) {
    /* אפקטי hover מושבתים במכשירי מגע */
    .product-card:hover {
        transform: none;
    }
    
    .btn:hover {
        transform: none;
    }
    
    /* מרחק מגע מינימלי */
    .notch-bar-item,
    .category-pill,
    .btn,
    button {
        min-height: var(--touch-target-min);
        min-width: var(--touch-target-min);
    }
}

/* ==========================================================================
   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;
    }
}

/* ==========================================================================
   Print Styles - עבור הדפסה
   ========================================================================== */
@media print {
    .site-header,
    .bottom-bar,
    .cart-fab,
    .cart-drawer,
    .floating-categories-btn,
    .pwa-install-popup {
        display: none !important;
    }
    
    main.container {
        max-width: 100%;
        padding: 0;
    }
    
    .product-card {
        break-inside: avoid;
        page-break-inside: avoid;
    }
}

/* ==========================================================================
   Landscape Mode - מצב אופקי במובייל
   ========================================================================== */
@media (max-height: 500px) and (orientation: landscape) {
    .main-banner-section {
        min-height: 200px;
        max-height: 60vh;
    }
    
    .product-modal .modal-dialog {
        margin: 0.5rem auto;
    }
    
    .product-modal .modal-content {
        max-height: 95vh;
    }
    
    .bottom-bar {
        display: none;
    }
    
    .cart-fab {
        display: flex;
    }
}
