/*
 * هدرِ موبایل و نوار پایین موبایل (HaghaniTheme 1.53.0). بارشده از hg_mbar_enqueue() بعد از hg-chrome.css.
 * کلاس‌های body از inc/theme-settings.php: hg-mbar-on · hg-mh-on · hg-mh-show-{menu|back|search|account|wishlist|cart} · hg-subpage.
 * بریک‌پوینتِ ۹۹۲ عمداً همانِ هدرِ جدید و افزونهٔ مگامنو است (homepage-new-design-header.css).
 */

/* دکمهٔ برگشت و دکمهٔ بستنِ جست‌وجو فقط در موبایل/تبلت. */
#hnd-header .hg-back-btn,
#hnd-header .hg-search-close { display: none; }

/* نوار در دسکتاپ نیست. */
.hg-mbar { display: none; }

@media (max-width: 992px) {

    /* ---------- دکمهٔ همبرگرِ تکراری: نوارِ منوی افزونه زیرِ ۹۹۲ فقط همبرگرِ خودش را نشان می‌دهد و همان کشوِ
       همبرگرِ هدر را باز می‌کند؛ ردیفِ داخلی پنهان می‌شود، خودِ کشو (.hnd-nav-drawer، هم‌سطحِ آن) می‌ماند. */
    #hnd-header .hnd-navrow > .hnd-nav-inner { display: none; }

    /* ---------- آیتم‌های هدرِ موبایل طبقِ تنظیمات (1.54.0، hg_mh_items): هرچه کلاسِ hg-mh-show-{کلید} ندارد پنهان.
       دکمهٔ پنهانِ هدر در DOM می‌ماند تا نوارِ پایین بتواند کلیک را به آن بدهد. */
    body.hg-mh-on:not(.hg-mh-show-menu) #hnd-header .hnd-burger-btn,
    body.hg-mh-on:not(.hg-mh-show-search) #hnd-header .hnd-mobile-search-btn,
    body.hg-mh-on:not(.hg-mh-show-cart) #hnd-header .hnd-slot-cart,
    body.hg-mh-on:not(.hg-mh-show-wishlist) #hnd-header .hnd-wishlist-btn,
    body.hg-mh-on:not(.hg-mh-show-account) #hnd-header .hnd-slot-account { display: none; }

    /* ---------- صفحه‌های غیرِ صفحهٔ اصلی: راست = برگشت + لوگو، چپ = منو و آیتم‌های باقی‌مانده.
       ⚠ ترتیبِ دیداری با order عوض می‌شود چون DOMِ هدر برای چیدمانِ دسکتاپ (جست‌وجو | لوگو | آیکن‌ها) است. */
    body.hg-subpage #hnd-header .hnd-topbar {
        display: flex;
        align-items: center;
        gap: 2px; /* 1.60.3: فاصلهٔ بینِ گروهِ آیکن‌ها، همان فاصلهٔ آیکن‌ها (پایین‌تر) */
    }
    body.hg-subpage #hnd-header .hnd-logo { order: -1; gap: 6px; }
    body.hg-subpage #hnd-header .hnd-topbar-end { margin-inline-start: auto; }
    body.hg-subpage #hnd-header .hnd-logo img { height: 40px; }

    /* 1.60.3: آیکن‌های هدرِ موبایل جمع‌وجورتر: قابِ ۳۶ (به‌جای ۴۰ِ hg-chrome.css) و فاصلهٔ ۲ (به‌جای ۸)؛ چون
       هر قاب خودش ناحیهٔ لمسیِ کافی دارد، فاصلهٔ بیرونی فقط جای خالی می‌ساخت. دسکتاپ دست نخورد. */
    #hnd-header .hnd-icons,
    #hnd-header .hnd-topbar-end { gap: 2px; }
    #hnd-header .hnd-topbar .hnd-icon-btn,
    #hnd-header .hnd-topbar .hnd-burger-btn,
    #hnd-header .hnd-slot-account :is(button, a):not(li *),
    #hnd-header .hnd-slot-cart :is(button, a):not(li *) {
        width: 36px;
        height: 36px;
        min-width: 36px;
    }

    /* دکمهٔ برگشت (1.60.3 ظریف‌تر): بی‌قاب و بی‌خط، فقط زمینهٔ کم‌رنگ، ۳۲ پیکسل، فلشِ نازک‌تر. */
    #hnd-header .hnd-topbar .hg-back-btn,
    #hnd-header.hnd-scrolled .hnd-topbar .hg-back-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        min-width: 32px;
        border-radius: 8px;
        background: var(--c-bg-soft, #f7f2f4);
        border: 0;
        color: var(--c-ink-soft, #5d5459);
        transition: background-color .2s ease, color .2s ease;
    }
    #hnd-header .hg-back-btn:hover,
    #hnd-header .hg-back-btn:focus-visible { background: var(--c-gold-soft, #f1dde6); color: var(--c-ink, #2a2226); }
    #hnd-header .hnd-topbar .hg-back-btn svg,
    #hnd-header.hnd-scrolled .hnd-topbar .hg-back-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

    /* ---------- نوارِ جست‌وجوی موبایل (1.56.0): به‌جای کادرِ شناورِ با فاصلهٔ ۲۰ و سایهٔ سنگین
       (homepage-new-design-header.css)، نوارِ تمام‌عرضِ مینیمال درست زیرِ هدر با دکمهٔ ✕. */
    #hnd-header.hnd-mobile-search-open .hnd-search {
        display: flex;
        align-items: center;
        gap: 8px;
        position: absolute;
        top: 100%;
        inset-inline: 0;
        margin: 0;
        padding: 10px var(--hg-gutter, 16px);
        background: var(--c-surface, #fff);
        border-block: 1px solid var(--c-line, #ece4e8);
        box-shadow: 0 10px 18px -14px rgba(42, 34, 38, .35);
        z-index: 60;
    }
    #hnd-header.hnd-mobile-search-open .hnd-search > .dms-inline-search { flex: 1 1 auto; min-width: 0; }
    #hnd-header.hnd-mobile-search-open .hg-search-close {
        display: inline-flex;
        flex: 0 0 auto;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        padding: 0;
        border: 0;
        border-radius: 10px;
        background: var(--c-bg-soft, #f7f2f4);
        color: var(--c-ink, #2a2226);
        cursor: pointer;
    }
    #hnd-header .hg-search-close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
    #hnd-header .hg-search-close:focus-visible { outline: 2px solid var(--c-gold, #911a56); outline-offset: 2px; }
    /* دکمهٔ جست‌وجوی هدر وقتی نوار باز است «فعال» دیده شود. */
    #hnd-header.hnd-mobile-search-open .hnd-mobile-search-btn { background: var(--c-bg-soft, #f7f2f4); }

    /* ---------- نوار پایین (1.56.0: پس‌زمینهٔ شیشه‌ای، برچسبِ ریزتر، پس‌زمینهٔ نرم فقط پشتِ آیکن) */
    .hg-mbar {
        display: block;
        position: fixed;
        inset-inline: 0;
        inset-block-end: 0;
        z-index: 90;
        direction: rtl;
        /* شیشه‌ای: سفیدِ نیمه‌شفاف + مات‌کردنِ پشتش؛ مرورگرِ بی backdrop-filter همان سفیدِ تقریباً کدر را می‌بیند. */
        background: rgba(255, 255, 255, .94);
        border-block-start: 1px solid rgba(236, 228, 232, .9);
        box-shadow: 0 -8px 24px rgba(42, 34, 38, .07);
        padding-block-end: env(safe-area-inset-bottom, 0);
        font-family: var(--font-body, inherit);
    }
    @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
        .hg-mbar {
            background: rgba(255, 255, 255, .72);
            -webkit-backdrop-filter: saturate(180%) blur(16px);
            backdrop-filter: saturate(180%) blur(16px);
        }
    }
    .hg-mbar__list { display: flex; align-items: stretch; margin: 0; padding: 6px 4px; list-style: none; }
    /* 1.59.0: سهمِ برابر برای هر آیتم + خطِ جداکنندهٔ عمودیِ ظریف (۵۰٪ ارتفاع، وسط) بینِ آیتم‌ها. */
    .hg-mbar__item { position: relative; flex: 1 1 0; min-width: 0; }
    .hg-mbar__item + .hg-mbar__item::before {
        content: "";
        position: absolute;
        inset-inline-start: 0;
        inset-block-start: 25%;
        width: 1px;
        height: 50%;
        background: var(--c-line, #ece4e8);
        pointer-events: none;
    }
    .hg-mbar__btn {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        min-height: 54px;
        padding: 0 4px;
        color: var(--c-ink-soft, #5d5459);
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
    }
    .hg-mbar__btn:focus-visible { outline: 2px solid var(--c-gold, #911a56); outline-offset: -2px; border-radius: 12px; }
    /* پس‌زمینهٔ نرم فقط پشتِ آیکن (نه کلِ دکمه)؛ فعال/لمس = رنگِ برند.
       1.59.0: دایرهٔ کاملِ ۳۶×۳۶ (پیش‌تر قرصِ ۴۴×۳۰ که بیضی دیده می‌شد)؛ flex:none تا هیچ‌وقت فشرده و بیضی نشود،
       و svg بلوکی تا خطِ پایهٔ متن آیکن را بالا/پایین نبرد. */
    .hg-mbar__icon {
        position: relative;
        display: flex;
        flex: none;
        align-items: center;
        justify-content: center;
        /* 1.60.0: اندازه از «تنظیمات قالب ← نوار پایین موبایل» (hg_mbar_inline_css)؛ پیش‌فرض ۳۶ و آیکن ۲۰. */
        width: var(--hg-mbar-circle, 36px);
        height: var(--hg-mbar-circle, 36px);
        aspect-ratio: 1;
        border-radius: 50%;
        line-height: 0;
        background: var(--c-bg-soft, #f7f2f4);
        transition: background-color .2s ease, color .2s ease;
    }
    .hg-mbar__btn:hover .hg-mbar__icon,
    .hg-mbar__btn:active .hg-mbar__icon { background: var(--c-gold-soft, #f1dde6); color: var(--c-gold-deep, #6f1242); }
    .hg-mbar__btn.is-active { color: var(--c-gold, #911a56); }
    .hg-mbar__btn.is-active .hg-mbar__icon { background: var(--c-gold, #911a56); color: #fff; }
    .hg-mbar__icon svg { display: block; flex: none; width: var(--hg-mbar-icon, 20px); height: var(--hg-mbar-icon, 20px); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
    .hg-mbar__label { font-size: 10px; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
    .hg-mbar__btn.is-active .hg-mbar__label { font-weight: 700; }
    .hg-mbar__badge {
        position: absolute;
        inset-block-start: -4px;
        inset-inline-end: -6px;
        min-width: 17px;
        height: 17px;
        padding: 0 4px;
        border-radius: 999px;
        background: var(--c-gold, #911a56);
        color: #fff;
        font-size: 10px;
        line-height: 17px;
        text-align: center;
    }
    .hg-mbar__badge[hidden] { display: none; }

    /* جای نوار در انتهای صفحه، تا آخرین خطِ فوتر زیرش نماند. */
    body.hg-mbar-on { padding-block-end: calc(66px + env(safe-area-inset-bottom, 0px)); }
}