/* ============================================
   ShirazGate - استایل‌های نوار پایین موبایل
   ============================================ */

/* --- ۱. نوار اصلی --- */
.bottom-0.fixed.inset-x-0.pb-safe {
    background: #ffffff !important;
    border-top: 1px solid #e2e8f0 !important;
    box-shadow: 0 -4px 16px rgba(0, 46, 87, 0.06) !important;
}

/* --- ۲. آیکون‌ها --- */
.bottom-0.fixed.inset-x-0 i.text-gray {
    color: #94a3b8 !important;
    transition: color 0.2s ease !important;
}

/* --- ۳. متن آیتم‌ها --- */
.bottom-0.fixed.inset-x-0 span.text-gray {
    color: #94a3b8 !important;
    font-weight: 500 !important;
    font-size: 0.65rem !important;
    transition: color 0.2s ease !important;
}

/* --- ۴. حالت فعال --- */
.bottom-0.fixed.inset-x-0 li.active i,
.bottom-0.fixed.inset-x-0 li.active span {
    color: #002e57 !important;
}

/* هاور روی آیتم‌ها */
.bottom-0.fixed.inset-x-0 a.block:hover i,
.bottom-0.fixed.inset-x-0 button.block:hover i {
    color: #002e57 !important;
}

.bottom-0.fixed.inset-x-0 a.block:hover span,
.bottom-0.fixed.inset-x-0 button.block:hover span {
    color: #002e57 !important;
}

/* --- ۵. بج تعداد سبد خرید --- */
.bottom-0.fixed.inset-x-0 .bg-primary {
    background: #002e57 !important;
    color: #ffffff !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    min-width: 20px !important;
    height: 20px !important;
    border-radius: 50px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 5px !important;
    box-shadow: 0 2px 8px rgba(0, 46, 87, 0.25) !important;
}

/* --- ۶. دراورها --- */
.drawer {
    background: rgba(0, 0, 0, 0.5) !important;
}

.drawer-inner {
    background: #ffffff !important;
    border-radius: 20px 0 0 20px !important;
    box-shadow: -8px 0 32px rgba(0, 46, 87, 0.12) !important;
}

/* --- ۷. هدر دراور --- */
.drawer-inner .items-center.border-b {
    border-bottom: 1px solid #e2e8f0 !important;
    background: #f8fafc !important;
    border-radius: 20px 0 0 0 !important;
}

.drawer-inner .items-center span.grow {
    color: #002e57 !important;
    font-weight: 800 !important;
    font-size: 1.1rem !important;
}

/* --- ۸. دکمه بستن دراور --- */
.drawer-inner .btn-icon.icon-close {
    color: #64748b !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 50% !important;
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
}

.drawer-inner .btn-icon.icon-close:hover {
    color: #dc2626 !important;
    border-color: #fecaca !important;
    background: #fef2f2 !important;
}

/* --- ۹. منوی دسته‌بندی‌ها در دراور --- */
.megamenu-items.bg-light {
    background: #f8fafc !important;
    border-left: 1px solid #e2e8f0 !important;
}

.megamenu-items .megamenu-item {
    color: #334155 !important;
    font-weight: 600 !important;
    font-size: 0.78rem !important;
    padding: 8px 12px !important;
    display: block !important;
    transition: all 0.2s ease !important;
    border-right: 3px solid transparent !important;
}

.megamenu-items .megamenu-item:hover,
.megamenu-items .megamenu-item.active {
    background: #ffffff !important;
    color: #002e57 !important;
    border-right-color: #F4B860 !important;
}

/* محتوای دسته‌بندی */
.megamenu-content.space-y-4 a {
    color: #64748b !important;
    font-size: 0.78rem !important;
    transition: color 0.2s ease !important;
}

.megamenu-content.space-y-4 a:hover {
    color: #002e57 !important;
}

.megamenu-content.space-y-4 a.flex span {
    color: #334155 !important;
    font-weight: 700 !important;
}

/* آکاردئون زیرمجموعه‌ها */
.megamenu-content .accordion-title {
    color: #334155 !important;
    font-weight: 600 !important;
    font-size: 0.8rem !important;
    transition: color 0.2s ease !important;
}

.megamenu-content .accordion-title.not-\[collapsed\] {
    color: #002e57 !important;
}

.megamenu-content .accordion-arrow {
    color: #94a3b8 !important;
    transition: transform 0.3s ease !important;
}

.megamenu-content .accordion-title.not-\[collapsed\] .accordion-arrow {
    transform: rotate(180deg) !important;
    color: #002e57 !important;
}

.megamenu-content ul.space-y-2 li a {
    color: #64748b !important;
    font-size: 0.75rem !important;
    transition: color 0.2s ease !important;
}

.megamenu-content ul.space-y-2 li a:hover {
    color: #002e57 !important;
}

/* --- ۱۰. منوی کاربر در دراور --- */
.drawer-inner ul.space-y-6 li a {
    color: #334155 !important;
    font-weight: 500 !important;
    font-size: 0.9rem !important;
    padding: 10px 16px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    transition: all 0.2s ease !important;
}

.drawer-inner ul.space-y-6 li a:hover {
    background: #f0f7ff !important;
    color: #002e57 !important;
}

.drawer-inner ul.space-y-6 li a i {
    margin-left: 10px !important;
    color: #94a3b8 !important;
}

.drawer-inner ul.space-y-6 li a:hover i {
    color: #002e57 !important;
}