/**
 * هیمونا — ناوبری پایین موبایل و شیت دسته‌بندی
 *
 * در موبایل (≤820): ناوبری پایین ثابت نمایش داده می‌شود
 * و منوی دسته‌بندی به صورت شیت از پایین (روی ناوبری) باز می‌شود.
 * (منوی همبرگری و کشویی کناری در همه عرض‌ها حذف شده است)
 */

/* =====================================================
   ناوبری پایین
   ===================================================== */
.hm-bottom-nav {
        display: none;
}

@media (max-width: 820px) {

        /* جا برای ناوبری ثابت */
        body {
                padding-bottom: calc(66px + env(safe-area-inset-bottom, 0px));
        }

        .hm-backtop {
                bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
        }

        .hm-bottom-nav {
                position: fixed;
                bottom: 0;
                inset-inline: 0;
                z-index: 940;
                display: grid;
                grid-template-columns: repeat(4, 1fr);
                height: calc(62px + env(safe-area-inset-bottom, 0px));
                padding-bottom: env(safe-area-inset-bottom, 0px);
                background: var(--hm-surface);
                border-top: 1px solid var(--hm-border);
                box-shadow: 0 -4px 20px rgba(35, 38, 43, 0.08);
        }

        .hm-bottom-nav__item {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: 3px;
                font-size: 10.5px;
                font-weight: 500;
                color: var(--hm-text-2);
                text-decoration: none;
                background: transparent;
                border: 0;
                font-family: inherit;
                cursor: pointer;
                transition: color 0.15s ease;
                -webkit-tap-highlight-color: transparent;
                padding-top: 6px;
        }

        .hm-bottom-nav__item .hm-icon {
                transition: transform 0.2s ease;
        }

        .hm-bottom-nav__item.is-active {
                color: var(--hm-primary);
                font-weight: 700;
        }

        .hm-bottom-nav__item.is-active .hm-icon {
                transform: translateY(-1px);
        }

        /* نقطه نشانگر آیتم فعال */
        .hm-bottom-nav__item.is-active::after {
                content: '';
                width: 4px;
                height: 4px;
                border-radius: 50%;
                background: var(--hm-primary);
                margin-top: 2px;
        }

        .hm-bottom-nav__iconwrap {
                position: relative;
                display: inline-flex;
        }

        .hm-bottom-nav__badge {
                position: absolute;
                top: -7px;
                inset-inline-end: -11px;
                min-width: 17px;
                height: 17px;
                padding: 0 4px;
                border-radius: 10px;
                background: var(--hm-deal);
                color: #fff;
                font-size: 10px;
                font-weight: 700;
                line-height: 17px;
                text-align: center;
                border: 2px solid var(--hm-surface);
        }

        .hm-bottom-nav__badge:empty {
                display: none;
        }
}

/* =====================================================
   شیت دسته‌بندی (Bottom Sheet)
   ===================================================== */
.hm-sheet {
        position: fixed;
        inset: 0;
        z-index: 1000;
        visibility: hidden;
        pointer-events: none;
}

.hm-sheet.is-open {
        visibility: visible;
        pointer-events: auto;
}

.hm-sheet__backdrop {
        position: absolute;
        inset: 0;
        background: rgba(15, 23, 32, 0.55);
        opacity: 0;
        transition: opacity 0.3s ease;
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
}

.hm-sheet.is-open .hm-sheet__backdrop {
        opacity: 1;
}

.hm-sheet__panel {
        position: absolute;
        bottom: 0;
        inset-inline: 0;
        max-height: 78vh;
        display: flex;
        flex-direction: column;
        background: var(--hm-surface);
        border-radius: 20px 20px 0 0;
        box-shadow: 0 -12px 48px rgba(15, 23, 32, 0.25);
        transform: translateY(103%);
        transition: transform 0.38s cubic-bezier(0.32, 0.72, 0.25, 1);
        overflow: hidden;
}

.hm-sheet.is-open .hm-sheet__panel {
        transform: translateY(0);
}

/* دستگیره بالای شیت */
.hm-sheet__grab {
        flex: 0 0 auto;
        width: 44px;
        height: 4px;
        border-radius: 4px;
        background: var(--hm-border-2);
        margin: 10px auto 4px;
}

.hm-sheet__head {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 6px 20px 12px;
        border-bottom: 1px solid var(--hm-border);
}

.hm-sheet__title {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: 14.5px;
        font-weight: 800;
        color: var(--hm-text);
}

.hm-sheet__title .hm-icon {
        color: var(--hm-primary);
}

.hm-sheet__close {
        color: var(--hm-text-2);
}

.hm-sheet__body {
        flex: 1 1 auto;
        overflow-y: auto;
        padding: 14px 16px 18px;
        overscroll-behavior: contain;
}

.hm-sheet__empty {
        font-size: 13px;
        color: var(--hm-text-2);
        line-height: 2.1;
        text-align: center;
        padding: 30px 10px;
}

/* --- لیست دسته‌ها با آکاردئون --- */
.hm-sheet-cats {
        list-style: none;
        margin: 0;
        padding: 0;
}

.hm-sheet-cats__item {
        border-bottom: 1px solid var(--hm-border);
}

.hm-sheet-cats__item:last-child {
        border-bottom: 0;
}

.hm-sheet-cats__row-wrap {
        display: flex;
        align-items: center;
        gap: 4px;
}

.hm-sheet-cats__link {
        flex: 1;
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 13px 6px;
        text-decoration: none;
        color: var(--hm-text);
        min-width: 0;
}

.hm-sheet-cats__icon {
        flex: 0 0 auto;
        width: 44px;
        height: 44px;
        border-radius: 12px;
        background: var(--hm-primary-soft);
        color: var(--hm-primary);
        display: inline-flex;
        align-items: center;
        justify-content: center;
}

.hm-sheet-cats__name {
        font-size: 14px;
        font-weight: 700;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
}

.hm-sheet-cats__toggle {
        flex: 0 0 auto;
        width: 38px;
        height: 38px;
        border: 0;
        border-radius: 50%;
        background: transparent;
        color: var(--hm-text-3);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: background 0.15s ease, transform 0.25s ease;
}

.hm-sheet-cats__toggle:hover {
        background: var(--hm-bg);
}

.hm-sheet-cats__item.is-open .hm-sheet-cats__toggle {
        transform: rotate(180deg);
}

/* زیردسته‌ها — چیپ‌های بازشو */
.hm-sheet-cats__subs {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.35s cubic-bezier(0.32, 0.72, 0.25, 1), margin 0.3s ease;
        margin: 0;
        margin-inline-start: 62px;
}

.hm-sheet-cats__item.is-open .hm-sheet-cats__subs {
        max-height: 320px;
        margin-bottom: 14px;
}

.hm-sheet-cats__sub {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 8px 14px;
        border-radius: 22px;
        background: var(--hm-bg);
        border: 1px solid var(--hm-border);
        font-size: 12.5px;
        color: var(--hm-text-2);
        text-decoration: none;
        transition: border-color 0.15s ease, color 0.15s ease;
}

.hm-sheet-cats__sub:hover {
        border-color: var(--hm-primary);
        color: var(--hm-primary);
}

.hm-sheet-cats__sub--all {
        background: var(--hm-primary-soft);
        border-color: transparent;
        color: var(--hm-primary);
        font-weight: 700;
}

/* دکمه پایین شیت */
.hm-sheet__all {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        margin-top: 16px;
        padding: 13px;
        border-radius: var(--hm-radius-sm);
        background: var(--hm-primary);
        color: #fff;
        font-size: 14px;
        font-weight: 700;
        text-decoration: none;
        transition: background 0.15s ease;
}

.hm-sheet__all:hover {
        background: var(--hm-primary-dark);
        color: #fff;
}

/* شیت فقط برای موبایل */
@media (min-width: 821px) {
        .hm-sheet {
                display: none;
        }
}