/*
 * 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 (Modal)
   ========================================= */
.gk-drawer-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    visibility: hidden;
    transition: visibility 0.3s;
}

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

/* پس‌زمینه تیره */
.gk-drawer-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,var(--gk-opacity-overlay));
    opacity: 0;
    transition: opacity 0.3s;
}

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

/* پنل اصلی منو */
.gk-drawer-panel {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0; /* در فارسی از راست باز می‌شود */
    width: 300px;
    max-width: 85vw;
    background: var(--gk-surface);
    box-shadow: var(--gk-shadow-lg);
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
}

/* اصلاح جهت پنل برای LTR */
html[dir="ltr"] .gk-drawer-panel {
    right: auto; left: 0;
    transform: translateX(-100%);
}

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

/* هدر دراور */
.gk-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px;
    border-bottom: var(--gk-border-width) solid var(--gk-border-color);
    background: var(--gk-neutral-50);
}

.gk-drawer-brand {
    font-weight: bold;
    font-size: 16px;
}

.gk-drawer-close {
    background: none;
    border: none;
    font-size: 24px;
    color: var(--gk-neutral-600);
    cursor: pointer;
    padding: 0 8px;
}

.gk-drawer-content {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* =========================================
   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;
    justify-content: space-between;
    padding: 12px 15px;
    transition: background 0.2s;
}

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

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

/* آیکون‌های منو */
.gk-mm-icon {
    display: flex;
    align-items: center;
    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 {
    background: var(--gk-neutral-100);
    border: none;
    border-radius: 6px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gk-neutral-600);
    cursor: pointer;
    transition: transform 0.3s;
}

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

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

/* کلاس کمکی برای JS جهت نمایش */
.gk-mobile-sub-menu.is-visible {
    display: block;
    animation: gkFadeIn 0.3s;
}

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

/* =========================================
   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;}
}