/*
 * Mega Menu Styles
 * Supports: Vertical Tabs, Horizontal Tabs, Full Width, Animations
 */

:root {
    /* مقادیر پیش‌فرض (توسط tokens.php اورراید می‌شوند) */
    --gk-mm-tab-width: 240px;
    --gk-mm-padding: 0;
    --gk-mm-bg: var(--gk-surface, #fff);
    --gk-mm-text: var(--gk-text, #333);
    --gk-mm-border: var(--gk-border-color, #e5e5e5);
}

/* --- Base Panel --- */
.gk-main-nav .gk-has-mega .gk-mega {
    position: absolute;
    top: 100%;
    background: var(--gk-mm-bg);
    border: 1px solid var(--gk-mm-border);
    border-radius: var(--gk-radius-lg);
    box-shadow: var(--gk-shadow-lg);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: var(--gk-z-dropdown);
    overflow: hidden; /* برای جلوگیری از بیرون زدن عکس پس‌زمینه */

    /* Animation Defaults */
    transform-origin: top center;
    transition:
            opacity var(--gk-duration-fast) ease,
            transform var(--gk-duration-fast) ease,
            visibility var(--gk-duration-fast);
}

/* --- Show State --- */
.gk-main-nav li.gk-has-mega.is-open > .gk-mega {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* --- Width Modifiers --- */

/* 1. Container Width (Default) */
.gk-mega--container {
    width: var(--gk-site-width, 1200px);
    inset-inline-start: 0; /* JS might adjust this later if needed */
    /* نکته: برای سنتر کردن دقیق نسبت به کانتینر، ممکن است نیاز به پوزیشن نسبی والد باشد */
}

/* 2. Full Width */
.gk-mega--full {
    width: 100%;
    left: 0;
    right: 0;
    border-radius: 0 0 var(--gk-radius-lg) var(--gk-radius-lg);
    border-top: 0;
}

/* 3. Custom Width (Handled via inline styles, just basic reset) */
.gk-mega--custom {
    /* left: 50% & transform handled in CSS/JS logic */
}

/* --- Layout Modes --- */

.gk-mega__inner {
    padding: var(--gk-mm-padding);
}

/* Mode A: Vertical Tabs (Default) */
.gk-mega--vertical .gk-mega__inner {
    display: grid;
    grid-template-columns: var(--gk-mm-tab-width) 1fr;
    min-height: 300px; /* حداقل ارتفاع برای زیبایی */
}

.gk-mega--vertical .gk-mega__tabs {
    border-inline-end: 1px solid var(--gk-mm-border);
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: rgba(0,0,0,0.02); /* کمی متمایز */
}

/* Mode B: Horizontal Tabs */
.gk-mega--horizontal .gk-mega__inner {
    display: flex;
    flex-direction: column;
}

.gk-mega--horizontal .gk-mega__tabs {
    display: flex;
    flex-direction: row;
    border-bottom: 1px solid var(--gk-mm-border);
    padding: 0 16px;
    gap: 24px;
    background: transparent;
}

.gk-mega--horizontal .gk-mega__tab {
    padding: 16px 0;
    border-radius: 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.gk-mega--horizontal .gk-mega__tab.is-active {
    background: transparent;
    border-bottom-color: var(--gk-primary);
    color: var(--gk-primary);
}

/* --- Tab Buttons --- */
.gk-mega__tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: var(--gk-radius-md);
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: start;
    font-family: inherit;
    color: var(--gk-neutral-700);
    transition: all 0.2s;
    font-weight: 500;
    width: 100%;
}

.gk-mega--vertical .gk-mega__tab:hover {
    background: rgba(0,0,0,0.04);
    color: var(--gk-text);
}

.gk-mega--vertical .gk-mega__tab.is-active {
    background: var(--gk-primary-50);
    color: var(--gk-primary);
    font-weight: 700;
}

.gk-tab-arrow {
    margin-inline-start: auto; /* چسبیدن به انتهای مخالف */
    opacity: 0.5;
}
.gk-mega__tab.is-active .gk-tab-arrow {
    opacity: 1;
    color: var(--gk-primary);
}


/* --- Content Panes --- */
.gk-mega__panes {
    padding: 24px;
    flex-grow: 1;
}

.gk-mega__pane { display: none; }
.gk-mega__pane.is-active {
    display: block;
    animation: gkFadeIn 0.3s ease-out;
}

/* --- Columns & Typography --- */
.gk-mega__cols {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* پیش‌فرض 4 ستون */
    gap: 24px;
}

.gk-mega__col.gk-colspan-2 { grid-column: span 2; }
.gk-mega__col.gk-colspan-3 { grid-column: span 3; }
.gk-mega__col.gk-colspan-4 { grid-column: span 4; }

.gk-mega__heading {
    font-weight: 700;
    font-size: 16px;
    color: var(--gk-text);
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--gk-border-color);
}

.gk-mega__links a,
.gk-mega__sublist a {
    display: block;
    padding: 5px 0;
    color: var(--gk-neutral-600);
    font-size: 14px;
    transition: color 0.2s, transform 0.2s;
    text-decoration: none;
}

.gk-mega__links a:hover,
.gk-mega__sublist a:hover {
    color: var(--gk-primary);
    transform: translateX(-4px);
}

/* Sub-groups (Bold items inside columns) */
.gk-mega__subhead {
    font-weight: 700;
    margin-top: 16px;
    margin-bottom: 8px;
    color: var(--gk-text);
}
.gk-mega__subhead a { color: inherit; text-decoration: none; }


/* --- Animations (Triggered via .is-open) --- */

/* 1. Slide Up (Default) */
.gk-anim-slide-up {
    transform: translateY(15px);
}
.gk-has-mega.is-open > .gk-anim-slide-up {
    transform: translateY(0);
}

/* 2. Slide Down */
.gk-anim-slide-down {
    transform: translateY(-15px);
}
.gk-has-mega.is-open > .gk-anim-slide-down {
    transform: translateY(0);
}

/* 3. Fade */
.gk-anim-fade {
    transform: none; /* No movement */
}

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

/* --- Responsive --- */
@media (max-width: 1024px) {
    .gk-mega__cols {
        grid-template-columns: repeat(2, 1fr);
    }
    .gk-mega--vertical .gk-mega__inner {
        grid-template-columns: 200px 1fr;
    }
}