/* =====================================================================================
   Mega menu v2 (Figma kits: "Main Categories new Desktop / Tablet / Mobile")
   Markup: resources/views/morgan/layout/partials/mega-menu.blade.php
   Loaded after styles.min.css. The .mega-menu container keeps its existing open/close
   behaviour (desktop hover, .show-mega-menu on tablet/mobile); this file only replaces
   what is inside it. Breakpoints match header.css: desktop >= 992, tablet 769-991, mobile <= 768.
   ===================================================================================== */

.mm3 {
    --mm3-ink: #092412;        /* Complement Shade-800 */
    --mm3-brand-ink: #114422;  /* Complement Shade-600 */
    --mm3-bar: #870B0F;        /* Accent Shade-600 */
    --mm3-accent: #AA0E13;     /* Base Accent (mobile open chevron) */
    --mm3-panel: #FCFCFC;      /* BG-Color/Background */
    --mm3-active: #F5F5F5;     /* Gray Shade-200 */
    --mm3-track: #EBEBEB;      /* Gray Shade-300 */
    --mm3-divider: #E1E1E1;    /* Gray Shade-400 */
    --mm3-thumb: #D7D7D7;      /* Gray Shade-500 */
    --mm3-muted: #838383;      /* Dominant Shade-700 */

    position: relative;
    overflow: hidden;
    direction: rtl;
    width: 100%;
    color: var(--mm3-ink);
    font-family: IRANSansX, sans-serif;
}
.mm3 ul { list-style: none; margin: 0; padding: 0; }
.mm3 a { color: inherit; text-decoration: none; }
.mm3 button { font-family: inherit; }
.mm3__main { position: relative; z-index: 1; }
.mm3__mark { position: absolute; z-index: 0; opacity: .07; pointer-events: none; }
.mm3__row { position: relative; display: flex; align-items: center; justify-content: space-between; cursor: pointer; }
.mm3__label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mm3__chev { flex: none; width: 16px; height: 16px; color: var(--mm3-ink); }
.mm3__toggle { display: flex; align-items: center; justify-content: center; flex: none; padding: 0; border: 0; background: none; color: var(--mm3-ink); cursor: pointer; }
.mm3__catsbox, .mm3__brandsbox { display: none; }
.mm3__group.is-active > .mm3__catsbox { display: block; }
.mm3__cat.is-active > .mm3__brandsbox { display: block; }
.mm3__brand a { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mm3__brand a:hover { text-decoration: underline; }
.mm3__row:focus-visible, .mm3 a:focus-visible, .mm3__toggle:focus-visible { outline: 2px solid var(--mm3-bar); outline-offset: -2px; }

/* scroll containers: LTR keeps the scrollbar on the right (Figma), content stays RTL */
.mm3 [data-mm3-scroll] { overflow-y: auto; overflow-x: hidden; direction: ltr; scrollbar-width: thin; scrollbar-color: var(--mm3-thumb) var(--mm3-track); }
.mm3 [data-mm3-scroll] > * { direction: rtl; }
.mm3 [data-mm3-scroll]::-webkit-scrollbar-track { background: var(--mm3-track); }
.mm3 [data-mm3-scroll]::-webkit-scrollbar-thumb { background: var(--mm3-thumb); border-radius: 15px; }

/* bottom fade + down chevron, shown by JS (.can-scroll on the parent) while more rows are below */
.mm3__fade {
    display: none; position: absolute; bottom: 0; z-index: 2;
    align-items: center; justify-content: center; padding: 0; border: 0; cursor: pointer;
    color: var(--mm3-muted);
    background: linear-gradient(0deg, var(--mm3-active) 50.9%, rgba(245, 245, 245, 0) 100%);
}
.mm3__fade svg { width: 24px; height: 24px; }
.can-scroll > .mm3__fade { display: flex; }

/* site links: only tablet and mobile */
.mm3__links { display: none; }

/* ================================ DESKTOP >= 992 ================================ */
@media only screen and (min-width: 992px) {
    .mega-menu.mm3-host {
        flex-direction: column;
        height: auto !important;
        padding: 0 !important;
        background: transparent !important;
        overflow: visible !important;
    }
    .mega-menu.mm3-host > .mobile-mega-menu-items-modal { display: none !important; }

    .mm3 {
        height: 366px; padding: 12px 8px; box-sizing: border-box;
        background: var(--mm3-panel); border-radius: 0 0 4px 4px;
        box-shadow: -2px 2px 10px -1px rgba(113, 113, 113, 0.15);
    }
    .mm3__mark { left: -90px; top: 99px; width: 276px; height: 327px; }
    .mm3__main, .mm3__body { height: 342px; }
    .mm3__body { overflow: visible !important; direction: rtl !important; }
    .mm3__fade--body { display: none !important; }

    /* column 1: groups */
    .mm3__groups { width: 217px; }
    .mm3__row--group {
        width: 217px; height: 42px; margin-bottom: 8px; padding: 0 8px; box-sizing: border-box;
        font-size: 16px; font-weight: 700; line-height: 30px;
    }
    .mm3__group.is-active > .mm3__row--group { background: var(--mm3-active); padding-right: 14px; }
    .mm3__group.is-active > .mm3__row--group::before,
    .mm3__cat.is-active > .mm3__row--cat::before {
        content: ""; position: absolute; right: 0; top: 0; width: 6px; height: 100%;
        background: var(--mm3-bar); border-radius: 1px;
    }

    /* column 2: categories (own scroll, 10px scrollbar between groups and categories) */
    .mm3__catsbox { position: absolute; top: 0; right: 225px; left: 0; height: 342px; pointer-events: none; }
    .mm3__cats { width: 252px; height: 342px; pointer-events: auto; }
    .mm3__cats::-webkit-scrollbar { width: 10px; }
    .mm3__row--cat {
        width: 242px; height: 42px; margin-bottom: 8px; padding: 0 18px 0 8px; box-sizing: border-box;
        font-size: 16px; font-weight: 500; line-height: 30px;
    }
    .mm3__cat.is-active > .mm3__row--cat { background: var(--mm3-active); }
    .mm3__catsbox > .mm3__fade { right: 10px; width: 242px; height: 30px; pointer-events: auto; }

    /* column 3: brands, 4 columns x 8 rows (184px wide, 16px apart, 1px divider in between) */
    .mm3__brandsbox { position: absolute; top: 0; right: 252px; left: 0; height: 342px; pointer-events: auto; }
    .mm3__brands {
        display: flex; flex-direction: row-reverse; justify-content: flex-start; /* LTR scroller: first column on the right */
        height: 342px; padding-right: 20px; box-sizing: border-box;
        background: var(--mm3-active); border-radius: 4px 0 4px 4px;
    }
    .mm3 .mm3__brands { overflow: hidden; }   /* columns hold 8 rows each (Blade chunk(8)), so nothing scrolls */
    .mm3__bcol { position: relative; flex: 0 1 184px; min-width: 0; }
    .mm3__bcol + .mm3__bcol { margin-right: 16px; }
    .mm3__bcol + .mm3__bcol::before {
        content: ""; position: absolute; right: -8.5px; top: 19px; width: 1px; height: 304px; background: var(--mm3-divider);
    }
    .mm3__brand {
        height: 36px; margin-bottom: 8px; padding: 4px 6px; box-sizing: border-box; border-radius: 2px;
        font-size: 14.22px; font-weight: 500; line-height: 28px; color: var(--mm3-brand-ink);
    }
    .mm3__brand:last-child { margin-bottom: 0; }
    .mm3__brandsbox > .mm3__fade { display: none !important; }
}

/* ================================ TABLET 769-991 ================================ */
@media only screen and (min-width: 769px) and (max-width: 991px) {
    .mega-menu.mm3-host {
        width: min(696px, calc(100vw - 85px)) !important;
        padding: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }
    .mega-menu.mm3-host > .mobile-mega-menu-items-modal { display: none !important; }

    .mm3 {
        padding: 16px 4px 0; box-sizing: border-box;
        background: var(--mm3-panel); border-radius: 0 0 4px 4px;
        box-shadow: -2px 2px 10px -1px rgba(113, 113, 113, 0.15);
    }
    .mm3__mark { left: -82px; bottom: -55px; width: 276px; height: 327px; }
    /* Figma: 772px. Panel max-height (header.css) is 100vh - 134px; minus 16px top padding and the
       link block (24px + 52px per row). Never below the 7 group rows (364px). */
    .mm3__main, .mm3__body {
        height: max(364px, min(772px, calc(100vh - 174px - var(--mm3-link-rows, 3) * 52px)));
    }
    .mm3__body { overflow: visible !important; direction: rtl !important; }
    .mm3__fade--body { display: none !important; }

    /* column 1: groups (226px) */
    .mm3__groups { width: 226px; }
    .mm3__row--group {
        width: 226px; height: 44px; margin-bottom: 8px; padding: 0 8px; box-sizing: border-box;
        font-size: 16px; font-weight: 700; line-height: 30px;
    }
    .mm3__chev { width: 20px; height: 20px; }
    .mm3__group.is-active > .mm3__row--group,
    .mm3__cat.is-active > .mm3__row--cat { background: var(--mm3-active); }
    .mm3__group.is-active > .mm3__row--group::before,
    .mm3__cat.is-active > .mm3__row--cat::before {
        content: ""; position: absolute; right: 0; top: 0; width: 5px; height: 100%;
        background: var(--mm3-bar); border-radius: 1px;
    }
    .mm3__group.is-active > .mm3__row--group { padding-right: 13px; }

    /* column 2: categories, 226px + 5px scrollbar */
    .mm3__catsbox { position: absolute; top: 0; right: 226px; left: 0; height: 100%; pointer-events: none; }
    .mm3__cats { width: 231px; height: 100%; pointer-events: auto; }
    .mm3__cats::-webkit-scrollbar, .mm3__brands::-webkit-scrollbar { width: 5px; }
    .mm3__row--cat {
        width: 226px; height: 44px; margin-bottom: 8px; padding: 0 8px; box-sizing: border-box;
        font-size: 16px; font-weight: 500; line-height: 30px;
    }
    .mm3__cat.is-active > .mm3__row--cat { padding-right: 13px; }
    .mm3__catsbox > .mm3__fade { right: 5px; width: 226px; height: 30px; pointer-events: auto; }

    /* column 3: brands, one scrolling list */
    .mm3__brandsbox { position: absolute; top: 0; right: 231px; left: 0; height: 100%; pointer-events: auto; }
    .mm3__brands { width: 231px; height: 100%; margin-left: auto; }
    .mm3__brand {
        width: 226px; height: 44px; margin-bottom: 8px; padding: 8px; box-sizing: border-box;
        font-size: 14.22px; font-weight: 500; line-height: 28px; color: var(--mm3-ink);
    }
    .mm3__brandsbox > .mm3__fade { right: 5px; width: 226px; height: 30px; }

    /* site links: two columns (right column first), divider in the middle. Not positioned, so the
       logo watermark (positioned, z-index 0) is drawn over this background, as in Figma. */
    .mm3__links {
        display: grid; grid-auto-flow: column; grid-template-columns: 1fr 1fr;
        grid-template-rows: repeat(var(--mm3-link-rows, 3), 44px); row-gap: 8px; column-gap: 40px;
        margin: 0 -4px; padding: 16px 20px; box-sizing: border-box; border-radius: 0 0 4px 4px;
        background: linear-gradient(var(--mm3-divider), var(--mm3-divider)) 50% 16px / 1px calc(100% - 32px) no-repeat, #F6F6F6;
    }
    .mm3__links li a {
        display: flex; align-items: center; height: 44px;
        padding: 7px 16px 7px 10px; box-sizing: border-box;
        font-size: 16px; font-weight: 700; line-height: 30px;
    }
}

/* ================================ MOBILE <= 768 ================================ */
@media only screen and (max-width: 768px) {
    .mega-menu.mm3-host {
        position: fixed !important; top: 0 !important; right: 0 !important; left: 0 !important; bottom: 0 !important;
        width: 100% !important; height: 100vh !important; height: 100dvh !important; max-height: none !important;
        padding: 16px 0 0 !important; margin: 0 !important;
        background: #F5F5F5 !important; box-shadow: none !important; border-radius: 0 !important;
        overflow: hidden !important; z-index: 1050;
        flex-direction: column;
    }
    .mega-menu.mm3-host.show-mega-menu { display: flex !important; }
    .mega-menu.mm3-host > .mobile-mega-menu-items-modal {
        display: flex !important; flex: none; padding: 0 24px; margin: 0 0 16px !important;
    }

    /* top row: back button (right) and phone (left), as in header.css for <= 578px */
    .mega-menu.mm3-host .mobile-mega-menu-items-modal > button {
        display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0;
    }
    .mega-menu.mm3-host .mobile-phone { height: 44px; padding: 0 10px; }
    .mega-menu.mm3-host .mobile-phone span { color: #092412; font-size: 13.17px; font-weight: 500; line-height: 26px; }
    .mega-menu.mm3-host .mobile-phone svg { width: 20px; height: 20px; margin-left: 4px; }
    .mega-menu.mm3-host .mobile-phone svg path { fill: #092412; }

    .mm3 { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; background: #F5F5F5; }
    .mm3__mark { left: -54px; bottom: -37px; width: 166px; height: 197px; }
    .mm3__main { flex: 1 1 auto; min-height: 0; }
    .mm3__body { height: 100%; padding: 0 8px; box-sizing: border-box; }
    .mm3__body::-webkit-scrollbar { width: 5px; }
    .mm3__fade--body { left: 0; right: 5px; height: 44px; background: linear-gradient(0deg, var(--mm3-track) 50.9%, rgba(245, 245, 245, 0) 100%); }
    .mm3__catsbox > .mm3__fade, .mm3__brandsbox > .mm3__fade { display: none !important; }
    .mm3__cats, .mm3__brands { overflow: visible !important; height: auto; }

    /* rows: 44px, chevron 20px 10px from the left; open row #EBEBEB with a red down chevron */
    .mm3__row { height: 44px; padding: 0 10px; box-sizing: border-box; }
    .mm3__chev { width: 20px; height: 20px; transition: transform .15s ease; }
    .mm3__row--group { margin-bottom: 16px; font-size: 16px; font-weight: 700; line-height: 30px; }
    .mm3__groups.has-active .mm3__row--group { margin-bottom: 8px; }
    .mm3__group.is-active > .mm3__catsbox { margin-bottom: 8px; }
    .mm3__row--cat { margin: 0 6px 8px 0; font-size: 15px; font-weight: 500; line-height: 29px; }
    .mm3__group.is-active > .mm3__row--group,
    .mm3__cat.is-active > .mm3__row--cat { background: var(--mm3-track); }
    .mm3__group.is-active > .mm3__row--group .mm3__chev,
    .mm3__cat.is-active > .mm3__row--cat .mm3__chev { transform: rotate(-90deg); color: var(--mm3-accent); }
    .mm3__toggle { width: 44px; height: 44px; margin-left: -10px; }
    .mm3__brand {
        display: flex; align-items: center; height: 44px; margin: 0 12px 8px 0; padding: 0 10px; box-sizing: border-box;
        font-size: 14.05px; font-weight: 500; line-height: 27px; color: var(--mm3-ink);
    }

    /* site links: two columns on #EBEBEB, divider in the middle */
    .mm3__links {
        display: grid; flex: none;
        grid-auto-flow: column; grid-template-columns: 1fr 1fr;
        grid-template-rows: repeat(var(--mm3-link-rows, 4), 44px); row-gap: 12px; column-gap: 24px;
        padding: 16px 12px 24px;
        /* not positioned: the watermark (z-index 0) stays visible over this background */
        background: linear-gradient(var(--mm3-divider), var(--mm3-divider)) 50% 27px / 1px calc(100% - 39px) no-repeat, var(--mm3-track);
    }
    .mm3__links li a {
        display: flex; align-items: center; height: 44px; padding: 7px 10px; box-sizing: border-box;
        font-size: 16px; font-weight: 700; line-height: 30px;
    }
}

/* ------------------------- category button (tablet / mobile) ------------------------- */
@media only screen and (max-width: 991px) {
    .main-menu__items > li.mobile-mega-menu { background: var(--mm3-trigger-bg, #092412); color: #FAFAFA; }
    .main-menu__items > li.mobile-mega-menu.is-open { background: #FCFCFC; color: #092412; }
    .main-menu__items > li.mobile-mega-menu .mm3-trigger-icon { display: block; width: 24px; height: 24px; }
}