/* ================================================================
   Tivan Mega Menu — mega-menu.css  v1.2
   همه سلکتورها با #tmm-overlay شروع می‌شن تا بر Elementor غالب بشن
   ================================================================ */

:root {
    --tmm-header-height: 80px;   /* در Elementor Custom CSS تغییر دهید */
    --tmm-bg:    #111733;
    --tmm-text:  #ffffff;
    --tmm-accent:#f0c000;
    --tmm-border:rgba(255,255,255,0.1);
}

/* ── Overlay ─────────────────────────────────────────────────── */
#tmm-overlay {
    display:    none;
    position:   fixed;
    inset:      0;
    z-index:    9999999 !important;
    direction:  ltr;             /* چیدمان structural همیشه LTR */
    font-family: inherit;
}
#tmm-overlay.tmm-open {
    display: block;
}
/* پس‌زمینه تیره پشت منو */
#tmm-overlay::before {
    content:    '';
    position:   fixed;
    inset:      0;
    background: rgba(0,0,0,0.5);
    z-index:    -1;
}

/* ── Container: از هدر تا پایین صفحه ────────────────────────── */
#tmm-overlay .tmm-container {
    position:        fixed;
    top:             var(--tmm-header-height) !important;
    left:            0  !important;
    right:           0  !important;
    bottom:          0  !important;
    background:      #111733 !important;
    border-top:      3px solid #f0c000 !important;
    display:         flex;
    flex-direction:  column;
    overflow:        hidden;
}

/* ── دکمه بستن (X) ──────────────────────────────────────────── */
#tmm-overlay .tmm-close-btn {
    all: unset;
    position: absolute;
    right: 10px;
    top: 62px;
    cursor: pointer;
    display: flex;
    align-items: center;
    color: #ffffff !important;
    padding: 2px 2px;
    border-radius: 4px;
    flex-shrink: 0;
    transition: background .2s, color .2s;
    transform: scaleX(-1);
    border: 1px solid #fff;
    z-index: 20;
}
#tmm-overlay .tmm-close-btn:hover {
    background: rgba(255,255,255,0.08) !important;
    color:      #f0c000 !important;
}
#tmm-overlay .tmm-close-btn svg { display:block; }

/* ── Groups: دو گروه منو کنار هم (مثل بر اساس کاربرد / بر اساس برند) ── */
#tmm-overlay .tmm-groups {
    flex:                   1;
    min-height:             0;
    height:                 100%;   /* fallback صریح؛ به stretch خودکار grid/flex تکیه نکن */
    display:                grid;
    grid-template-columns:  1fr 1fr;
    grid-template-rows:     100%;   /* iOS Safari گاهی auto-row رو استرچ نمی‌کنه */
    overflow:               hidden;
    direction:              rtl;  /* گروه اول (primary) سمت راست بنشیند */
}

#tmm-overlay .tmm-nav-group {
    display:        flex;
    flex-direction: column;
    height:         100%;
    min-height:     0;
    overflow:       hidden;
    border-left:    1px solid rgba(255,255,255,0.15); /* خط جداکننده بین دو ستون */
}
#tmm-overlay .tmm-nav-group:last-child {
    border-left: none;
}

#tmm-overlay .tmm-group-title {
    flex-shrink: 0;
    background: var( --e-global-color-primary );
    color:      #ffffff !important;
    text-align: center;
    font-weight:700;
    font-size:  15px;
    padding:    12px 16px;
    direction:  rtl;
    margin: 10px;
    border-radius: 10px;
}

/* ── Panels Wrapper (داخل هر گروه) ─────────────────────────── */
#tmm-overlay .tmm-panels-wrapper {
    flex:      1;
    min-height:0;
    height:    100%;        /* fallback صریح به جای تکیه به stretch */
    position:  relative;
    overflow:  hidden;
}

/* ── هر پنل ─────────────────────────────────────────────────── */
#tmm-overlay .tmm-panel {
    display:    none;
    position:   absolute;
    inset:      0;
    padding:    28px 36px;
    overflow-y: auto;
    box-sizing: border-box;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.15) transparent;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
}
#tmm-overlay .tmm-panel::-webkit-scrollbar       { width:5px; }
#tmm-overlay .tmm-panel::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.15); border-radius:4px; }

#tmm-overlay .tmm-panel.tmm-panel-active { display: block; }

/* انیمیشن‌ها */
#tmm-overlay .tmm-panel.tmm-anim-enter-right {
    animation: tmm-right .25s ease both;
}
#tmm-overlay .tmm-panel.tmm-anim-enter-left {
    animation: tmm-left .25s ease both;
}
@keyframes tmm-right {
    from { transform:translateX(50px); opacity:0; }
    to   { transform:translateX(0);    opacity:1; }
}
@keyframes tmm-left {
    from { transform:translateX(-50px); opacity:0; }
    to   { transform:translateX(0);     opacity:1; }
}

/* ── Breadcrumbs ─────────────────────────────────────────────── */
#tmm-overlay .tmm-breadcrumbs {
    display:    flex;
    flex-wrap:  wrap;
    align-items:center;
    gap:        2px;
    margin-bottom:8px;
    font-size:  13px;
    color:      #f0c000 !important;
    direction:  rtl;   /* متن RTL */
    padding-left:44px; /* فضا برای دکمه X */
}
#tmm-overlay .tmm-crumb-link {
    color:           #f0c000 !important;
    text-decoration: none;
    cursor:          pointer;
    background:      none !important;
}
#tmm-overlay .tmm-crumb-link:hover { text-decoration:underline; }
#tmm-overlay .tmm-crumb-sep       { opacity:.5; padding:0 2px; color:#fff !important; font-size: 18px;}
#tmm-overlay .tmm-crumb-current .tmm-crumb-link { font-weight:700; }

/* ── Panel Header ────────────────────────────────────────────── */
#tmm-overlay .tmm-panel-header {
    display:       flex;
    align-items:   center;
    gap:           10px;
    padding-bottom:14px;
    margin-bottom: 18px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    direction:     rtl;   /* RTL برای فارسی */
}

/* دکمه Back: ریست کامل + استایل ما */
#tmm-overlay .tmm-btn-back {
    all:           unset;
    cursor:        pointer;
    display:       flex;
    align-items:   center;
    color:         #ffffff !important;
    padding:       5px 7px;
    border-radius: 4px;
    flex-shrink:   0;
    transition:    background .2s, color .2s;
    /* در RTL فلش به چپ = "برگشت" */
    transform:     scaleX(-1);
    border: 1px solid #fff;
}
#tmm-overlay .tmm-btn-back:hover {
    background: rgba(255,255,255,0.08) !important;
    color:      #f0c000 !important;
}
#tmm-overlay .tmm-btn-back svg { display:block; }

#tmm-overlay .tmm-panel-title {
    color:           #ffffff !important;
    text-decoration: none;
    font-size:       20px;
    font-weight:     700;
    direction:       rtl;
    transition:      color .2s;
}
#tmm-overlay .tmm-panel-title:hover { color: #f0c000 !important; }

/* ── لیست (پنل ریشه: 4 ستون) ──────────────────────────────── */
#tmm-overlay .tmm-panel-root .tmm-list {
    display:               grid;
    grid-template-columns: repeat(2, 1fr);  /* هر گروه نصف عرض overlay رو داره */
    gap:                   0;
    list-style:            none !important;
    margin:                0 !important;
    padding:               0 !important;
        direction: rtl;
}
/* زیرپنل: 1 ستون */
#tmm-overlay .tmm-panel:not(.tmm-panel-root) .tmm-list {
    list-style: none !important;
    margin:     0 !important;
    padding:    0 !important;
    max-width:  720px;
    float: right;
}

/* ── هر آیتم ────────────────────────────────────────────────── */
#tmm-overlay .tmm-item { break-inside: avoid; }

#tmm-overlay .tmm-item-row {
    display:       flex;
    align-items:   center;
    gap:           0;
    padding:       6px 8px 6px 2px;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
    min-height:    38px;
    transition:    background .15s;
    direction: rtl;
}
#tmm-overlay .tmm-item-row:hover { background: rgba(255,255,255,0.05) !important; }

/* ── دکمه + : ریست کامل ─────────────────────────────────────── */
#tmm-overlay .tmm-btn-expand {
    all:             unset;       /* ریست همه استایل‌های Elementor */
    cursor:          pointer;
    color:           #f0c000 !important;
    width:           22px;
    height:          22px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
    border-radius:   3px;
    transition:      background .15s;
    line-height:     1;
}
#tmm-overlay .tmm-btn-expand:hover { background: rgba(255,255,255,0.1) !important; }

#tmm-overlay .tmm-plus-icon {
    font-size: 18px;
    color: #333;
    line-height: 1;
    display: block;
    font-style: normal;
    font-family: monospace;
    background: #ffcf03;
    padding: 3px 7px;
    border-radius: 17px;
    font-weight: bold;
}

/* ── لینک متن ───────────────────────────────────────────────── */
#tmm-overlay .tmm-link {
    color:           #ffffff !important;
    text-decoration: none    !important;
    font-size:       14px    !important;
    flex:            1;
    padding:         0 6px;
    line-height:     1.45;
    direction:       rtl;         /* متن فارسی RTL */
    text-align:      right !important;
    transition:      color .15s;
    background:      none   !important;
    border:          none   !important;
    display:         block;
}
#tmm-overlay .tmm-link:hover,
#tmm-overlay .tmm-link-active { color: #f0c000 !important; }

/* آیتم‌های بدون + : تورفتگی برای هم‌راستایی */
#tmm-overlay .tmm-item:not(.tmm-has-children) .tmm-item-row {
    padding-left: 24px;
}

/* آیتم جاری و اجداد */
#tmm-overlay .tmm-current  > .tmm-item-row .tmm-link,
#tmm-overlay .tmm-ancestor > .tmm-item-row .tmm-link { color: #f0c000 !important; }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width:900px) {
    /* روی موبایل/تبلت: آکاردئون. عنوان هر گروه کلیک = باز/بسته */
    #tmm-overlay .tmm-groups {
        display:    block;
        height:     auto;
        max-height: 100%;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        touch-action: pan-y;
    }
    #tmm-overlay .tmm-nav-group {
        display:     block;
        height:      auto;
        border-left: none;
        border-top:  1px solid rgba(255,255,255,0.15);
    }
    #tmm-overlay .tmm-nav-group:first-child { border-top: none;margin-top:50px; }
	#tmm-overlay .tmm-close-btn {top: 17px;}
    #tmm-overlay .tmm-group-title {
        cursor:   pointer;
        position: relative;
        padding-left: 36px; /* فضای فلش */
    }
    #tmm-overlay .tmm-group-title::after {
        content: '';
        position: absolute;
        left: 16px;
        top: 50%;
        width: 8px;
        height: 8px;
        border-right:  2px solid #fff;
        border-bottom: 2px solid #fff;
        transform: translateY(-65%) rotate(45deg); /* باز: رو به پایین */
        transition: transform .2s;
    }
    #tmm-overlay .tmm-nav-group.tmm-collapsed .tmm-group-title::after {
        transform: translateY(-35%) rotate(-135deg); /* بسته: رو به بالا */
    }

    /* فضای محتوای هر گروه وقتی بازه — همینجا اسکرول می‌خوره اگر آیتم زیاد بود */
    #tmm-overlay .tmm-nav-group .tmm-panels-wrapper {
        height:     60vh;
        max-height: 60vh;
    }
    #tmm-overlay .tmm-nav-group.tmm-collapsed .tmm-panels-wrapper {
        display: none;
    }

    #tmm-overlay .tmm-panel-root .tmm-list { grid-template-columns:repeat(2,1fr); }
    #tmm-overlay .tmm-panel { padding:20px 16px; }
}
@media (max-width:560px) {
    #tmm-overlay .tmm-panel-root .tmm-list { grid-template-columns:1fr; }
    :root { --tmm-header-height:60px; }
}