/**
 * CLS Optimization CSS
 * این فایل برای کاهش Cumulative Layout Shift (CLS) طراحی شده است
 * با تعیین min-width و min-height برای المنت‌هایی که بعد از لود JS تغییر می‌کنند
 */

/* ============================================
   1. بهینه‌سازی سبد خرید (Shopping Cart)
   ============================================ */

/* ثابت کردن عرض و ارتفاع برای آیکون سبد خرید */
.shopping-card.position-relative {
    min-width: 40px;
    width: 40px;
    min-height: 40px;
    height: 40px;
    display: inline-block;
    position: relative;
    vertical-align: middle;
    box-sizing: border-box;
}

/* ثابت کردن فضای عدد داخل سبد خرید */
.count-mob.itemsInBasket {
    display: inline-block;
    min-width: 22px;
    width: 22px;
    min-height: 18px;
    height: 18px;
    text-align: center;
    line-height: 18px;
    font-size: 11px;
    padding: 0;
    box-sizing: border-box;
    /* اطمینان از اینکه همیشه فضا رزرو شده است */
    white-space: nowrap;
    overflow: hidden;
    /* برای اعداد بزرگتر از 99 */
    max-width: 30px;
}

/* ============================================
   2. بهینه‌سازی منوی اصلی (Main Navigation)
   ============================================ */

/* ثابت کردن ارتفاع هدر */
header nav,
.header---top-mob,
.header-desc {
    min-height: 60px;
}

/* ثابت کردن ارتفاع آیتم‌های منوی اصلی */
.js-mega-menu-main-item,
li.js-mega-menu-main-item {
    min-height: 40px;
    height: 40px;
    min-width: 80px;
    display: inline-block;
    vertical-align: middle;
    line-height: 40px;
}

/* ثابت کردن dropdown */
.dropdown {
    min-height: 40px;
    height: 40px;
    min-width: 120px;
    width: auto;
    position: relative;
    display: inline-block;
    vertical-align: middle;
}

.dropdown-menu {
    min-width: 200px;
}

/* ثابت کردن دکمه dropdown */
.btn-user.dropdown-toggle {
    min-width: 120px;
    min-height: 40px;
}

/* ثابت کردن منوی اسکرول شونده */
.menu.scrollable-menu,
div.menu.scrollable-menu {
    min-height: 50px;
    width: 100%;
    display: block;
    box-sizing: border-box;
}

/* ثابت کردن آیتم‌های منو با submenu */
li.has-sub {
    min-height: 40px;
    height: 40px;
    min-width: 80px;
    display: inline-block;
    vertical-align: middle;
    line-height: 40px;
}

/* ثابت کردن لیست‌های منو */
li {
    min-height: 1em;
    display: list-item;
    vertical-align: baseline;
}

/* جلوگیری از Layout Shift در لیست‌های منو */
ul li,
ol li {
    min-height: 1.2em;
    line-height: 1.5;
}

/* ثابت کردن li.ml-auto */
li.ml-auto {
    min-width: 100px;
    min-height: 40px;
    display: inline-block;
    vertical-align: middle;
}

/* ============================================
   3. بهینه‌سازی Breadcrumb
   ============================================ */

.breadcrumb,
.breadcrumb.col-12.gap-col.gap-col-mob.m-4 {
    min-height: 32px;
    display: block;
}

.breadcrumbs-ov,
nav.breadcrumbs-ov {
    min-height: 32px;
}

.breadcrumbs,
ol.breadcrumbs {
    min-height: 32px;
    display: flex;
    align-items: center;
}

.breadcrumbs li {
    min-height: 20px;
    display: inline-flex;
    align-items: center;
}

.breadcrumbs li.ml-auto {
    min-width: 50px;
}

/* ============================================
   4. بهینه‌سازی فونت‌ها (Font Loading)
   ============================================ */

/* جلوگیری از FOIT (Flash of Invisible Text) */
body {
    font-display: swap;
}

/* ثابت کردن ارتفاع برای متن‌هایی که با فونت لود می‌شوند */
h1, h2, h3, h4, h5, h6 {
    min-height: 1.2em;
}

/* ============================================
   5. بهینه‌سازی Container و Layout
   ============================================ */

.container.p-0 {
    min-height: 1px;
    width: 100%;
    display: block;
    box-sizing: border-box;
}

.container.gap-col {
    min-height: 1px;
    width: 100%;
    display: block;
    box-sizing: border-box;
}

.container-fluid {
    min-height: 1px;
    width: 100%;
    display: block;
    box-sizing: border-box;
}

/* جلوگیری از Layout Shift در body */
body {
    min-width: 320px;
    overflow-x: hidden;
}

/* ثابت کردن part-login-register */
.part-login-register {
    min-width: 200px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* ثابت کردن span.position-relative.d-inline-block */
span.position-relative.d-inline-block {
    min-width: 1px;
    min-height: 1px;
    display: inline-block;
    position: relative;
    vertical-align: middle;
    box-sizing: border-box;
}

/* ============================================
   6. بهینه‌سازی برای موبایل
   ============================================ */

@media screen and (max-width: 767px) {
    /* سبد خرید در موبایل */
    .shopping-card.position-relative {
        min-width: 35px;
        width: 35px;
        min-height: 35px;
        height: 35px;
    }
    
    .count-mob.itemsInBasket {
        min-width: 20px;
        width: 20px;
        min-height: 16px;
        height: 16px;
        font-size: 10px;
        line-height: 16px;
    }
    
    /* منو در موبایل */
    header nav,
    .header---top-mob {
        min-height: 50px;
    }
    
    /* Breadcrumb در موبایل */
    .breadcrumb {
        min-height: 28px;
    }
    
    /* part-login-register در موبایل */
    .part-login-register {
        min-width: 150px;
    }
    
    .dropdown {
        min-width: 100px;
    }
    
    /* container.gap-col در موبایل */
    .container.gap-col {
        width: 100%;
        min-height: 1px;
    }
    
    /* menu.scrollable-menu در موبایل */
    .menu.scrollable-menu,
    div.menu.scrollable-menu {
        width: 100%;
        min-height: 40px;
    }
    
    /* span.position-relative.d-inline-block در موبایل */
    span.position-relative.d-inline-block {
        min-width: 20px;
        min-height: 20px;
    }
}

/* ============================================
   7. بهینه‌سازی برای دسکتاپ
   ============================================ */

@media screen and (min-width: 768px) {
    /* اطمینان از ثابت بودن layout در دسکتاپ */
    .js-mega-menu-main-item,
    li.js-mega-menu-main-item {
        min-height: 45px;
        height: 45px;
        min-width: 100px;
        line-height: 45px;
    }
    
    .dropdown {
        min-height: 45px;
        height: 45px;
        min-width: 150px;
    }
    
    .part-login-register {
        min-width: 250px;
        width: auto;
    }
    
    /* ثابت کردن shopping-card در دسکتاپ */
    .shopping-card.position-relative {
        width: 40px;
        height: 40px;
    }
    
    .count-mob.itemsInBasket {
        width: 22px;
        height: 18px;
    }
    
    /* ثابت کردن has-sub در دسکتاپ */
    li.has-sub {
        min-height: 45px;
        height: 45px;
        min-width: 100px;
        line-height: 45px;
    }
    
    /* container.gap-col در دسکتاپ */
    .container.gap-col {
        width: 100%;
        min-height: 1px;
    }
    
    /* menu.scrollable-menu در دسکتاپ */
    .menu.scrollable-menu,
    div.menu.scrollable-menu {
        width: 100%;
        min-height: 50px;
    }
    
    /* span.position-relative.d-inline-block در دسکتاپ */
    span.position-relative.d-inline-block {
        min-width: 30px;
        min-height: 30px;
    }
}