/*
 * Mobile Bottom Navigation & Drawer Styles
 * Package: GanjehKala
 * Refactored to Canonical Tokens
 */

/* =========================================
   1. Bottom Navigation Bar
   ========================================= */
/* The body spacing is only needed while the fixed navigation is actually visible. */
@media (max-width: 768px) {
    body.gk-has-bnav {
        padding-bottom: calc(60px + env(safe-area-inset-bottom));
    }
}

.gk-bnav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: var(--gk-surface);
    border-top: var(--gk-border-width) solid var(--gk-border-color);
    box-shadow: var(--gk-shadow-sm);
    padding-bottom: env(safe-area-inset-bottom);
    display: none; /* پیش‌فرض مخفی برای دسکتاپ */
}

/* فقط در موبایل نمایش داده شود */
@media (max-width: 768px) {
    .gk-bnav { display: flex; }
}

/* Product page handoff: the sticky purchase bar and bottom navigation never
   consume vertical space at the same time. This only activates when the theme
   setting is enabled and the sticky purchase UI is actually visible. */
@media (max-width: 768px) {
    body.gk-bnav-product-handoff-enabled .gk-bnav {
        transition: transform .24s cubic-bezier(.4,0,.2,1), opacity .18s ease, visibility 0s linear 0s;
        will-change: transform, opacity;
    }

    #gk-bottom-nav.gk-bnav--product-sticky-hidden[data-gk-product-sticky-handoff="1"],
    .gk-bnav.gk-bnav--product-sticky-hidden[data-gk-product-sticky-handoff="1"],
    body.gk-product-sticky-cart-active #gk-bottom-nav[data-gk-product-sticky-handoff="1"],
    body.gk-product-sticky-cart-active .gk-bnav[data-gk-product-sticky-handoff="1"] {
        transform: translate3d(0, 115%, 0);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: transform .24s cubic-bezier(.4,0,.2,1), opacity .18s ease, visibility 0s linear .24s;
    }

    body.gk-has-bnav.gk-product-sticky-cart-active {
        padding-bottom: calc(var(--gk-product-sticky-height, 76px) + env(safe-area-inset-bottom));
    }
}

.gk-bnav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 4px;
    color: var(--gk-neutral-600);
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    transition: color 0.2s;
    -webkit-tap-highlight-color: transparent;
}

.gk-bnav-item.is-active,
.gk-bnav-item:active {
    color: var(--gk-primary); /* رنگ اصلی برند */
}

.gk-bnav-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
}

.gk-bnav-label {
    font-size: 11px;
    font-weight: 500;
}

/* Badge (شمارنده سبد خرید) */
.gk-bnav-badge {
    position: absolute;
    top: -5px;
    right: -8px;
    background: var(--gk-primary);
    color: var(--gk-surface);
    font-size: 10px;
    font-weight: bold;
    min-width: 16px;
    height: 16px;
    line-height: 16px;
    border-radius: var(--gk-radius-round);
    text-align: center;
    border: 1px solid var(--gk-primary);
    transform: scale(0);
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.gk-bnav-badge.has-items {
    transform: scale(1);
}

/* اصلاح جهت برای RTL */
html[dir="rtl"] .gk-bnav-badge {
    right: auto;
    left: -8px;
}

/* =========================================
   2. Mobile Drawer — Bottom Sheet
   ========================================= */
.gk-drawer-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    visibility: hidden;
    /* Keeps the sheet painted for the whole closing transition. */
    transition: visibility .4s;
}

.gk-drawer-modal.is-open {
    visibility: visible;
}

/* The accessibility layer turns every hidden dialog into display:none. That
 * removes the drawer from rendering before `is-open` is added, and a transition
 * starting from display:none never runs — the sheet just appeared instantly.
 * Keeping the shell rendered (hidden by visibility) restores the motion.
 * ID specificity is required: accessibility.css loads later with the same
 * class + attribute specificity. */
.gk-a11y-ready #gk-mobile-drawer[aria-hidden="true"] {
    display: block !important;
}

/* پس‌زمینه تیره */
.gk-drawer-overlay {
    position: absolute;
    inset: 0;
    background: rgba(15, 12, 10, calc(var(--gk-opacity-overlay, .5) + .06));
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity .3s ease;
}

.gk-drawer-modal.is-open .gk-drawer-overlay {
    opacity: 1;
}

/* شیت پایین‌چسب: از پایین صفحه بالا می‌آید */
.gk-drawer-panel {
    --gk-drawer-radius: min(calc(var(--gk-radius, 8px) * 2.75), 26px);
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    max-height: 86vh; /* overridden by the "شیت دسته‌بندی" height setting */
    overflow: hidden;
    background: var(--gk-surface, #fff);
    border-radius: var(--gk-drawer-radius) var(--gk-drawer-radius) 0 0;
    box-shadow: 0 -18px 46px rgba(15, 23, 42, .24);
    transform: translate3d(0, 100%, 0);
    /* Height is animated by JS so opening a branch grows the sheet smoothly
     * instead of snapping upward in one frame. */
    transition: transform .4s cubic-bezier(.22, .61, .36, 1),
                height .28s cubic-bezier(.22, .61, .36, 1);
    will-change: transform;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    overscroll-behavior: contain;
}

/* While JS measures the natural height, transitions must not interfere. */
.gk-drawer-panel.gk-sheet-measuring {
    transition: none !important;
}

.gk-drawer-modal.is-open .gk-drawer-panel {
    transform: translate3d(0, 0, 0);
}

/* دسته‌گیر کشیدن */
.gk-drawer-handle {
    flex: 0 0 auto;
    width: 40px;
    height: 4px;
    margin: 9px auto 3px;
    border-radius: 99px;
    background: var(--gk-neutral-200, #e5e7eb);
    touch-action: none;
    cursor: grab;
}

/* محتوای شیت کمی بعد از خودِ شیت وارد می‌شود */
.gk-drawer-head,
.gk-drawer-content,
.gk-drawer-foot {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .28s ease, transform .36s cubic-bezier(.22, .61, .36, 1);
}

.gk-drawer-modal.is-open .gk-drawer-head,
.gk-drawer-modal.is-open .gk-drawer-content,
.gk-drawer-modal.is-open .gk-drawer-foot {
    opacity: 1;
    transform: translateY(0);
}

.gk-drawer-modal.is-open .gk-drawer-head { transition-delay: .07s; }
.gk-drawer-modal.is-open .gk-drawer-content { transition-delay: .12s; }
.gk-drawer-modal.is-open .gk-drawer-foot { transition-delay: .17s; }

/* هدر شیت */
.gk-drawer-head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    flex: 0 0 auto;
    padding: 6px 16px 12px;
    border-bottom: 1px solid var(--gk-border-color, #eee);
}

.gk-drawer-titles {
    min-width: 0;
}

.gk-drawer-title {
    font-size: 15.5px;
    font-weight: 700;
    color: var(--gk-text, #171717);
    line-height: 1.45;
    letter-spacing: -.01em;
}

.gk-drawer-sub {
    margin-top: 2px;
    font-size: 10.5px;
    color: var(--gk-neutral-600, #545b64);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gk-drawer-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    margin-inline-start: auto;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--gk-neutral-100, #f3f4f6);
    color: var(--gk-neutral-600, #545b64);
    font-size: 19px;
    line-height: 1;
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease, transform .18s ease;
}

.gk-drawer-close:hover,
.gk-drawer-close:focus-visible {
    background: var(--gk-neutral-200, #e5e7eb);
    color: var(--gk-text, #171717);
}

.gk-drawer-close:active {
    transform: scale(.94);
}

.gk-drawer-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
    scrollbar-width: thin;
}

/* نوار پایین شیت */
.gk-drawer-foot {
    display: flex;
    gap: 6px;
    flex: 0 0 auto;
    padding: 8px 12px;
    border-top: 1px solid var(--gk-border-color, #eee);
    background: var(--gk-surface, #fff);
}

.gk-drawer-foot a {
    flex: 1 1 0;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 0;
    padding: 7px 4px;
    border-radius: 12px;
    background: var(--gk-neutral-50, #f6f7f9);
    color: var(--gk-neutral-600, #545b64);
    font-size: 10.5px;
    font-weight: 500;
    text-decoration: none;
    transition: background-color .16s ease, color .16s ease;
}

.gk-drawer-foot a:hover,
.gk-drawer-foot a:focus-visible {
    background: color-mix(in srgb, var(--gk-primary) 9%, transparent);
    color: var(--gk-primary);
}

.gk-drawer-foot .gk-bnav-mask-icon {
    background-color: currentColor;
    transition: background-color .16s ease;
}

.gk-drawer-foot span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}


/* =========================================
   3. Accordion Menu Items (WalkerMobile)
   ========================================= */
.gk-mobile-menu-root,
.gk-mobile-sub-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.gk-mobile-menu-root li {
    border-bottom: var(--gk-border-width) solid var(--gk-neutral-50);
}

/* wrapper لینک و دکمه بازشو */
.gk-mm-link-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 13px 16px;
    transition: background-color .16s ease;
}

@media (hover: hover) {
    .gk-mm-link-wrap:hover {
        background: var(--gk-neutral-50);
    }
}

.gk-mm-link-wrap a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    text-decoration: none;
    color: var(--gk-text);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.55;
    flex: 1; /* لینک کل فضا را بگیرد */
}

.gk-mm-txt {
    min-width: 0;
}

/* آیکون‌های منو */
.gk-mm-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    color: var(--gk-neutral-600);
}
.gk-mm-icon svg, .gk-mm-icon img {
    width: 100%;
    height: auto;
}

/* Badge داخل منوی موبایل. Scope is deliberate: the desktop mega menu uses the same
   badge class but owns its own styling and per-item color. */
.gk-mobile-menu-root .gk-mm-badge {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--gk-neutral-100);
    color: var(--gk-text);
    margin-right: auto; /* بج به سمت چپ بچسبد */
    margin-left: 8px;
}

/* دکمه فلش بازشو */
.gk-mm-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    padding: 0;
    border: none;
    border-radius: 9px;
    background: var(--gk-neutral-100);
    color: var(--gk-neutral-600);
    cursor: pointer;
    transition: transform .26s cubic-bezier(.22, .61, .36, 1),
                background-color .16s ease,
                color .16s ease;
}

.gk-mm-toggle svg {
    width: 16px;
    height: 16px;
}

/* وقتی زیرمنو باز است، فلش بچرخد */
li.gk-sub-open > .gk-mm-link-wrap .gk-mm-toggle {
    transform: rotate(180deg);
    background: var(--gk-primary);
    color: #fff;
}

/* زیرمنوها مخفی پیش‌فرض */
.gk-mobile-sub-menu {
    display: none;
    background: var(--gk-neutral-50);
    padding-right: 12px; /* تورفتگی در زیرمنو */
    border-top: var(--gk-border-width) solid var(--gk-neutral-100);
}
html[dir="ltr"] .gk-mobile-sub-menu {
    padding-right: 0; padding-left: 12px;
}

/* سطح‌های عمیق‌تر تورفتگی و ارتفاع ردیف کمتری می‌گیرند تا پنج سطح
   داخل دراور ۳۰۰ پیکسلی جا شود. */
.gk-mobile-sub-menu .gk-mobile-sub-menu {
    padding-right: 10px;
}
html[dir="ltr"] .gk-mobile-sub-menu .gk-mobile-sub-menu {
    padding-right: 0; padding-left: 10px;
}

.gk-mobile-sub-menu > li > .gk-mm-link-wrap {
    padding: 10px 12px;
}

.gk-mobile-sub-menu > li > .gk-mm-link-wrap a {
    font-size: 13.5px;
}

/* صفحه‌ی جاری و دسته‌های والد آن */
.gk-mobile-menu-root .current-menu-item > .gk-mm-link-wrap {
    background: color-mix(in srgb, var(--gk-primary) 8%, transparent);
}

.gk-mobile-menu-root .current-menu-item > .gk-mm-link-wrap a,
.gk-mobile-menu-root .current-menu-ancestor > .gk-mm-link-wrap a {
    color: var(--gk-primary);
    font-weight: 600;
}

/* نمایش زیرمنو با یک حرکت کوتاه.
 * قبلاً باز شدن با انیمیشن ارتفاع jQuery انجام می‌شد و بعد همین کلاس یک
 * fade دوباره اجرا می‌کرد؛ همین باعث می‌شد آیتم‌ها «چشمک» بزنند. الان تنها
 * یک انیمیشن CSS روی خودِ ul اجرا می‌شود و ارتفاع هم لحظه‌ای است. */
li.gk-sub-open > .gk-mobile-sub-menu {
    display: block;
    animation: gkSubMenuIn .24s cubic-bezier(.22, .61, .36, 1) both;
}

@keyframes gkSubMenuIn {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .gk-drawer-panel,
    .gk-drawer-head,
    .gk-drawer-content,
    .gk-drawer-foot,
    .gk-mm-toggle {
        transition-duration: .01ms !important;
    }

    li.gk-sub-open > .gk-mobile-sub-menu {
        animation: none !important;
    }
}

/* =========================================
   Universal Icon Fix (CSS Mask)
   ========================================= */

.gk-bnav-mask-icon {
    display: inline-block;
    vertical-align: middle;

    /* تنظیمات ماسک */
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;

    /* این خط مهم است: پس‌زمینه را همرنگ متن والد می‌کند */
    background-color: currentColor;
}

/* برای اطمینان از اینکه خود span فضایی اشغال می‌کند */
.gk-bnav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* =========================================
   Font Fixes for Buttons
   ========================================= */

/*
   مشکل: دکمه‌ها (Button) فونت را از بادی نمی‌گیرند.
   راه حل: اجبار کردن آن‌ها به استفاده از فونت والد.
*/
.gk-bnav-item,
button.gk-bnav-item {
    font-family: inherit !important; /* ارث‌بری از فونت قالب */
    letter-spacing: inherit;
}

/* برای اطمینان بیشتر، فونت لیبل‌ها را هم ست می‌کنیم */
.gk-bnav-label {
    font-family: var(--gk-font-base) !important;
    font-weight: 500; /* یا وزن دلخواه شما */
}

/* GK Fix: hide mobile bottom nav while archive filter drawer is open so Apply button stays visible */
@media (max-width: 991px) {
    body.gk-filters-open .gk-bnav,
    body.gk-filters-open .gk-mobile-bottom-nav,
    body.gk-filters-open .mobile-bottom-nav,
    body.gk-filters-open [data-gk-mobile-bottom-nav] {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transform: translateY(calc(100% + env(safe-area-inset-bottom, 0px))) !important;
    }
}

@media (max-width: 991px) {
    .gk-bnav.gk-bnav--filters-hidden {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transform: translateY(calc(100% + env(safe-area-inset-bottom, 0px))) !important;
    }
}

/* GK Fix v1.4.1: force-hide mobile bottom nav while archive filters are open.
   Uses body/html state classes + :has() fallback + direct ID selector for #gk-bottom-nav. */
@media (max-width: 991px) {
    html.gk-filters-open #gk-bottom-nav,
    body.gk-filters-open #gk-bottom-nav,
    html.gk-filters-open .gk-bnav,
    body.gk-filters-open .gk-bnav,
    html.gk-filters-open .gk-bottom-nav,
    body.gk-filters-open .gk-bottom-nav,
    html.gk-filters-open .gk-mobile-bottom-nav,
    body.gk-filters-open .gk-mobile-bottom-nav,
    html.gk-filters-open .mobile-bottom-nav,
    body.gk-filters-open .mobile-bottom-nav,
    html.gk-filters-open [data-gk-mobile-bottom-nav],
    body.gk-filters-open [data-gk-mobile-bottom-nav],
    #gk-bottom-nav.gk-bnav--filters-hidden,
    .gk-bnav.gk-bnav--filters-hidden,
    .gk-bottom-nav.gk-bnav--filters-hidden,
    .gk-mobile-bottom-nav.gk-bnav--filters-hidden,
    .mobile-bottom-nav.gk-bnav--filters-hidden {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transform: translate3d(0, 140%, 0) !important;
        z-index: -1 !important;
    }

    body.gk-filters-open {
        padding-bottom: 0 !important;
    }

    body.gk-filters-open .gk-archive__filters-wrapper,
    .gk-archive__filters-wrapper.gk-archive__filters-wrapper--open {
        z-index: 2147483002 !important;
    }

    body.gk-filters-open .gk-filters-backdrop,
    .gk-filters-backdrop.is-visible {
        z-index: 2147483001 !important;
    }

    body.gk-filters-open .gk-archive__filters-footer,
    .gk-archive__filters-wrapper--open .gk-archive__filters-footer {
        position: sticky !important;
        bottom: 0 !important;
        z-index: 2147483003 !important;
    }
}


/* Keep :has() isolated: unsupported Safari versions otherwise invalidate a mixed selector list. */
@supports selector(body:has(*)) {
    @media (max-width: 991px) {
        body:has(.gk-archive__filters-wrapper--open) #gk-bottom-nav,
        body:has(.gk-archive__filters-wrapper--open) .gk-bnav,
        body:has(.gk-archive__filters-wrapper--open) .gk-bottom-nav,
        body:has(.gk-archive__filters-wrapper--open) .gk-mobile-bottom-nav,
        body:has(.gk-archive__filters-wrapper--open) .mobile-bottom-nav,
        body:has(.gk-archive__filters-wrapper--open) [data-gk-mobile-bottom-nav] {
            display: none !important;
            opacity: 0 !important;
            visibility: hidden !important;
            pointer-events: none !important;
            transform: translate3d(0, 140%, 0) !important;
            z-index: -1 !important;
        }
    }
}


/* GK v1.8.9: mini-cart must always sit above / hide mobile bottom nav */
@media (max-width: 991px){
  body.gk-cart-open #gk-bottom-nav,
  body.gk-cart-open .gk-bnav,
  body.gk-cart-open .gk-bottom-nav,
  body.gk-cart-open .gk-mobile-bottom-nav,
  body.gk-cart-open .mobile-bottom-nav,
  body.gk-cart-open [data-gk-mobile-bottom-nav],
  html.gk-cart-open #gk-bottom-nav,
  html.gk-cart-open .gk-bnav,
  html.gk-cart-open .gk-bottom-nav,
  html.gk-cart-open .gk-mobile-bottom-nav,
  html.gk-cart-open .mobile-bottom-nav,
  html.gk-cart-open [data-gk-mobile-bottom-nav]{
    opacity:0!important;visibility:hidden!important;pointer-events:none!important;transform:translate3d(0,140%,0)!important;z-index:1!important;
  }
  body.gk-cart-open #gkMiniCart{z-index:999999!important;}
  body.gk-cart-open .gk-minicart-backdrop{z-index:999998!important;}
  body.gk-cart-open .gk-minicart-panel{z-index:999999!important;}
}