/* ==========================================================================
   SEO-UP Mega Menu - Frontend Styles v2
   JS-only control via .manta-active class (no CSS :hover for dropdowns)
   ========================================================================== */

:root {
    --manta-primary: #005184;
    --manta-secondary: #1aaf5e;
    --manta-accent: #f7b733;
    --manta-bg: #ffffff;
    --manta-bg-light: #eff4f8;
    --manta-bg-dropdown: #ffffff;
    --manta-border: #e8edf2;
    --manta-text: #202020;
    --manta-text-muted: #7A7A7A;
    --manta-text-sub: #555555;
    --manta-speed: 300ms;
    --manta-radius: 12px;
    --manta-radius-sm: 8px;
    --manta-shadow: 0 10px 40px rgba(0, 51, 102, 0.12);
    --manta-shadow-lg: 0 20px 60px rgba(0, 51, 102, 0.18);
    --manta-icon-size: 28px;
    --manta-col-icon-size: 38px;
    --manta-sub-icon-size: 30px;
    --manta-dropdown-width: 920px;
}

/* ==========================================================================
   THEME RESET
   ========================================================================== */
.manta-mega-menu-wrap,
.manta-mega-menu-wrap *,
.manta-mega-menu-wrap *::before,
.manta-mega-menu-wrap *::after {
    box-sizing: border-box !important;
}

.manta-mega-menu-wrap ul,
.manta-mega-menu-wrap ol,
.manta-mega-menu-wrap li {
    list-style: none !important;
    list-style-type: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.manta-mega-menu-wrap a {
    text-decoration: none !important;
}

/* ==========================================================================
   Regular Sub-Menu (non-mega items like "פיתוח וורדפרס")
   HIDDEN by default, shown via JS .manta-submenu-open
   ========================================================================== */
.manta-mega-menu-wrap .sub-menu {
    display: none !important;
    position: absolute !important;
    top: 100% !important;
    right: 0 !important;
    min-width: 220px !important;
    background: var(--manta-bg-dropdown) !important;
    border: 1px solid var(--manta-border) !important;
    border-radius: var(--manta-radius-sm) !important;
    padding: 8px 0 !important;
    box-shadow: var(--manta-shadow) !important;
    z-index: 99998 !important;
    opacity: 0 !important;
    transform: translateY(6px) !important;
    transition: opacity var(--manta-speed) ease, transform var(--manta-speed) ease !important;
}

/* Non-mega items that have sub-menus need relative positioning */
.manta-mega-menu-wrap .manta-mega-menu-list > li:not(.manta-has-mega) {
    position: relative !important;
}

/* Show sub-menu when parent has .manta-submenu-open (set by JS) */
.manta-mega-menu-wrap .manta-mega-menu-list > li.manta-submenu-open > .sub-menu {
    display: block !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
}

.manta-mega-menu-wrap .sub-menu > li {
    display: block !important;
}

.manta-mega-menu-wrap .sub-menu > li > a {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 20px !important;
    color: var(--manta-text-sub) !important;
    font-size: 13.5px !important;
    font-weight: 400 !important;
    white-space: nowrap !important;
    transition: all 0.2s ease !important;
    background: transparent !important;
    border: none !important;
}

.manta-mega-menu-wrap .sub-menu > li > a:hover {
    color: var(--manta-primary) !important;
    background: var(--manta-bg-light) !important;
    padding-right: 24px !important;
}

/* Top accent on sub-menu */
.manta-mega-menu-wrap .sub-menu::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important; right: 0 !important;
    width: 100% !important; height: 3px !important;
    background: linear-gradient(90deg, var(--manta-primary), var(--manta-secondary)) !important;
    border-radius: 8px 8px 0 0 !important;
    z-index: 2 !important;
}

/* ==========================================================================
   Main Wrapper
   ========================================================================== */
.manta-mega-menu-wrap {
    position: relative !important;
    z-index: 9999 !important;
    direction: rtl !important;
    width: 100% !important;
}

/* ==========================================================================
   Menu List (top bar)
   ========================================================================== */
.manta-mega-menu-wrap .manta-mega-menu-list {
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
    flex-wrap: nowrap !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

/* ==========================================================================
   Top Level Items - NOTE: position is STATIC so dropdowns position relative to .manta-mega-menu-wrap
   ========================================================================== */
.manta-mega-menu-wrap .manta-mega-menu-list > li {
    position: static !important;
    display: flex !important;
    align-items: center !important;
}

.manta-mega-menu-wrap .manta-mega-menu-list > li > .manta-menu-link {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 12px 16px !important;
    color: var(--manta-text) !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    transition: all var(--manta-speed) ease !important;
    border-radius: var(--manta-radius-sm) !important;
    position: relative !important;
    white-space: nowrap !important;
    background: transparent !important;
    border: none !important;
}

/* Bottom accent line on hover */
.manta-mega-menu-wrap .manta-mega-menu-list > li > .manta-menu-link::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important; right: 0 !important; left: 0 !important;
    height: 3px !important;
    background: linear-gradient(90deg, var(--manta-primary), var(--manta-secondary)) !important;
    border-radius: 3px 3px 0 0 !important;
    transform: scaleX(0) !important;
    transition: transform var(--manta-speed) ease !important;
}

/* Hover + Active states for top items */
.manta-mega-menu-wrap .manta-mega-menu-list > li:hover > .manta-menu-link,
.manta-mega-menu-wrap .manta-mega-menu-list > li.manta-active > .manta-menu-link,
.manta-mega-menu-wrap .manta-mega-menu-list > li.manta-submenu-open > .manta-menu-link {
    color: var(--manta-primary) !important;
}

.manta-mega-menu-wrap .manta-mega-menu-list > li:hover > .manta-menu-link::after,
.manta-mega-menu-wrap .manta-mega-menu-list > li.manta-active > .manta-menu-link::after,
.manta-mega-menu-wrap .manta-mega-menu-list > li.manta-submenu-open > .manta-menu-link::after {
    transform: scaleX(1) !important;
}

/* ==========================================================================
   Menu Icon
   ========================================================================== */
.manta-mega-menu-wrap .manta-menu-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: var(--manta-icon-size) !important;
    height: var(--manta-icon-size) !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    transition: all var(--manta-speed) ease !important;
    flex-shrink: 0 !important;
}

/* ==========================================================================
   Menu Text, Description, Badge, Arrow
   ========================================================================== */
.manta-mega-menu-wrap .manta-menu-text {
    display: flex !important;
    flex-direction: column !important;
    line-height: 1.3 !important;
}

.manta-mega-menu-wrap .manta-menu-desc {
    font-size: 11px !important;
    color: var(--manta-text-muted) !important;
    font-weight: 400 !important;
    margin-top: 2px !important;
}

.manta-mega-menu-wrap .manta-menu-badge {
    display: inline-flex !important;
    padding: 2px 8px !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    background: var(--manta-secondary) !important;
    color: #fff !important;
    border-radius: 20px !important;
    line-height: 1.5 !important;
}

.manta-mega-menu-wrap .manta-arrow {
    display: inline-flex !important;
    font-size: 9px !important;
    transition: transform var(--manta-speed) ease !important;
    opacity: 0.4 !important;
    color: var(--manta-text-muted) !important;
}

.manta-mega-menu-wrap .manta-mega-menu-list > li.manta-active .manta-arrow {
    transform: rotate(180deg) !important;
    opacity: 1 !important;
    color: var(--manta-primary) !important;
}

/* ==========================================================================
   MEGA DROPDOWN - HIDDEN by default, shown ONLY via .manta-active (JS)
   Positioned relative to .manta-mega-menu-wrap (li is static)
   All dropdowns share the same left/right edges = full menu bar width
   ========================================================================== */
.manta-mega-menu-wrap .manta-mega-dropdown {
    position: absolute !important;
    top: 100% !important;
    right: 0 !important;
    left: 0 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    background: var(--manta-bg-dropdown) !important;
    border: 1px solid var(--manta-border) !important;
    border-radius: var(--manta-radius) !important;
    padding: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(10px) !important;
    transition: opacity var(--manta-speed) ease, transform var(--manta-speed) ease, visibility 0s linear var(--manta-speed) !important;
    z-index: 99999 !important;
    box-shadow: var(--manta-shadow-lg) !important;
    overflow: hidden !important;
}

/* Top accent bar */
.manta-mega-menu-wrap .manta-mega-dropdown::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important; right: 0 !important;
    width: 100% !important; height: 3px !important;
    background: linear-gradient(90deg, var(--manta-primary), var(--manta-secondary), var(--manta-accent)) !important;
    z-index: 2 !important;
}

/* ---- SHOW: only when parent li has .manta-active ---- */
.manta-mega-menu-wrap .manta-has-mega.manta-active > .manta-mega-dropdown {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
    transition: opacity var(--manta-speed) ease, transform var(--manta-speed) ease, visibility 0s linear 0s !important;
}

/* ==========================================================================
   Mega Inner & Grid
   ========================================================================== */
.manta-mega-menu-wrap .manta-mega-inner {
    display: flex !important;
    gap: 0 !important;
    padding: 24px 28px !important;
    position: relative !important;
}

.manta-mega-menu-wrap .manta-mega-grid {
    flex: 1 !important;
    min-width: 0 !important;
}

.manta-mega-menu-wrap .manta-mega-submenu {
    display: grid !important;
    gap: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.manta-mega-grid.manta-cols-2 .manta-mega-submenu { grid-template-columns: repeat(2, 1fr) !important; }
.manta-mega-grid.manta-cols-3 .manta-mega-submenu { grid-template-columns: repeat(3, 1fr) !important; }
.manta-mega-grid.manta-cols-4 .manta-mega-submenu { grid-template-columns: repeat(4, 1fr) !important; }
.manta-mega-grid.manta-cols-5 .manta-mega-submenu { grid-template-columns: repeat(5, 1fr) !important; }

/* ==========================================================================
   Mega Columns
   ========================================================================== */
.manta-mega-menu-wrap .manta-mega-column {
    position: relative !important;
    display: block !important;
}

.manta-mega-menu-wrap .manta-mega-column:not(:last-child)::after {
    content: '' !important;
    position: absolute !important;
    top: 8px !important; left: 0 !important;
    width: 1px !important;
    height: calc(100% - 16px) !important;
    background: var(--manta-border) !important;
}

.manta-mega-menu-wrap .manta-mega-column > .manta-menu-link,
.manta-mega-menu-wrap .manta-mega-column > .manta-col-header {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    color: var(--manta-primary) !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    padding: 0 0 12px 0 !important;
    margin-bottom: 6px !important;
    border-bottom: 2px solid var(--manta-bg-light) !important;
    position: relative !important;
    background: transparent !important;
}

.manta-mega-menu-wrap .manta-mega-column > .manta-menu-link::after,
.manta-mega-menu-wrap .manta-mega-column > .manta-col-header::after {
    content: '' !important;
    position: absolute !important;
    bottom: -2px !important; right: 0 !important;
    width: 40px !important; height: 2px !important;
    background: var(--manta-secondary) !important;
    border-radius: 2px !important;
    transform: none !important;
    left: auto !important;
}

.manta-mega-menu-wrap .manta-mega-column > .manta-menu-link .manta-menu-icon,
.manta-mega-menu-wrap .manta-mega-column > .manta-col-header .manta-menu-icon {
    width: var(--manta-col-icon-size) !important;
    height: var(--manta-col-icon-size) !important;
    font-size: 16px !important;
    border-radius: 10px !important;
}

/* ==========================================================================
   Sub Items (inside mega columns)
   ========================================================================== */
.manta-mega-menu-wrap .manta-mega-sub-items {
    margin: 0 !important;
    padding: 0 !important;
}

.manta-mega-menu-wrap .manta-mega-sub-items li {
    display: block !important;
}

.manta-mega-menu-wrap .manta-mega-sub-items .manta-menu-link {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 9px 12px !important;
    color: var(--manta-text-sub) !important;
    font-size: 13.5px !important;
    font-weight: 400 !important;
    border-radius: var(--manta-radius-sm) !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    background: transparent !important;
    border: none !important;
    border-right: 3px solid transparent !important;
    position: relative !important;
}

.manta-mega-menu-wrap .manta-mega-sub-items .manta-menu-link .manta-menu-icon {
    width: var(--manta-sub-icon-size) !important;
    height: var(--manta-sub-icon-size) !important;
    border-radius: 8px !important;
    font-size: 12px !important;
    background: var(--manta-bg-light) !important;
    color: var(--manta-text-muted) !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* ---- Subtle hover effect: border reveal + icon color + slight slide ---- */
.manta-mega-menu-wrap .manta-mega-sub-items .manta-menu-link:hover {
    color: var(--manta-primary) !important;
    background: var(--manta-bg-light) !important;
    padding-right: 16px !important;
    border-right-color: var(--manta-secondary) !important;
}

.manta-mega-menu-wrap .manta-mega-sub-items .manta-menu-link:hover .manta-menu-icon {
    background: var(--manta-primary) !important;
    color: #fff !important;
    transform: scale(1.1) translateX(-2px) !important;
    box-shadow: 0 3px 8px rgba(0, 81, 132, 0.25) !important;
}

/* Hover effect for regular sub-menu items too */
.manta-mega-menu-wrap .sub-menu > li > a {
    border-right: 3px solid transparent !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.manta-mega-menu-wrap .sub-menu > li > a:hover {
    border-right-color: var(--manta-secondary) !important;
}

/* ==========================================================================
   Promo Box
   ========================================================================== */
.manta-mega-menu-wrap .manta-promo-box {
    position: relative !important;
    width: 260px !important;
    flex-shrink: 0 !important;
    background: linear-gradient(145deg, var(--manta-primary), #003d66) !important;
    border-radius: var(--manta-radius) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    margin-right: 24px !important;
    color: #fff !important;
}

.manta-mega-menu-wrap .manta-promo-image {
    width: 100% !important;
    height: 130px !important;
    background-size: cover !important;
    background-position: center !important;
}

.manta-mega-menu-wrap .manta-promo-content {
    padding: 20px !important;
    position: relative !important;
    z-index: 2 !important;
    flex: 1 !important;
}

.manta-mega-menu-wrap .manta-promo-tag {
    display: inline-block !important;
    padding: 3px 10px !important;
    background: var(--manta-secondary) !important;
    border-radius: 4px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    margin-bottom: 10px !important;
    color: #fff !important;
}

.manta-mega-menu-wrap .manta-promo-title {
    margin: 0 0 8px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #fff !important;
    line-height: 1.4 !important;
}

.manta-mega-menu-wrap .manta-promo-text {
    font-size: 12.5px !important;
    line-height: 1.7 !important;
    color: rgba(255,255,255,0.85) !important;
    margin-bottom: 14px !important;
}

.manta-mega-menu-wrap .manta-promo-cta {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 9px 18px !important;
    background: var(--manta-secondary) !important;
    color: #fff !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
}

.manta-mega-menu-wrap .manta-promo-cta:hover {
    filter: brightness(1.1) !important;
    transform: translateX(-3px) !important;
}

/* ==========================================================================
   Animations
   ========================================================================== */
@keyframes manta-fade-in-up {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

.manta-has-mega.manta-active .manta-mega-column {
    animation: manta-fade-in-up 0.35s ease forwards !important;
}
.manta-has-mega.manta-active .manta-mega-column:nth-child(1) { animation-delay: 0ms !important; }
.manta-has-mega.manta-active .manta-mega-column:nth-child(2) { animation-delay: 60ms !important; }
.manta-has-mega.manta-active .manta-mega-column:nth-child(3) { animation-delay: 100ms !important; }

/* ==========================================================================
   Mobile Toggle (hidden on desktop)
   ========================================================================== */
.manta-mega-menu-wrap .manta-mobile-toggle {
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    background: transparent !important;
    border: 1px solid var(--manta-border) !important;
    border-radius: var(--manta-radius-sm) !important;
    cursor: pointer !important;
    padding: 0 !important;
    transition: all 0.2s ease !important;
}

.manta-mega-menu-wrap .manta-mobile-toggle:hover {
    background: var(--manta-bg-light) !important;
    border-color: var(--manta-primary) !important;
}

.manta-mega-menu-wrap .manta-hamburger {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    width: 20px !important;
}

.manta-mega-menu-wrap .manta-hamburger span {
    display: block !important;
    width: 100% !important;
    height: 2px !important;
    background: var(--manta-text) !important;
    border-radius: 2px !important;
    transition: all var(--manta-speed) ease !important;
    transform-origin: center !important;
}

/* Hamburger → X animation */
.manta-mega-menu-wrap .manta-mobile-toggle.active .manta-hamburger span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px) !important;
}
.manta-mega-menu-wrap .manta-mobile-toggle.active .manta-hamburger span:nth-child(2) {
    opacity: 0 !important;
    transform: scaleX(0) !important;
}
.manta-mega-menu-wrap .manta-mobile-toggle.active .manta-hamburger span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px) !important;
}

/* ==========================================================================
   Mobile Arrow Toggle Button (injected by JS on mobile)
   ========================================================================== */
.manta-mobile-arrow {
    display: none !important;
}

/* ==========================================================================
   Column header arrow on mobile
   ========================================================================== */
.manta-col-arrow {
    display: none !important;
}

/* ==========================================================================
   Placeholder
   ========================================================================== */
.manta-mega-menu-placeholder {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 40px !important;
    background: var(--manta-bg-light) !important;
    border: 2px dashed var(--manta-border) !important;
    border-radius: var(--manta-radius) !important;
    color: var(--manta-text-muted) !important;
    text-align: center !important;
}

/* ==========================================================================
   Dark Theme
   ========================================================================== */
.manta-theme-dark {
    --manta-bg: #0a0e27;
    --manta-bg-light: #111638;
    --manta-bg-dropdown: #0d1230;
    --manta-border: #1a1f3a;
    --manta-text: #ffffff;
    --manta-text-muted: #8892a4;
    --manta-text-sub: #c0c5d0;
}

/* ==========================================================================
   Responsive / Mobile — Everything stacks vertically, accordion style
   ========================================================================== */
@media (max-width: 1024px) {

    /* Show hamburger */
    .manta-mega-menu-wrap .manta-mobile-toggle {
        display: flex !important;
    }

    /* ----------------------------------------------------------------
       Main menu list: fixed, full-width, scrollable
       ---------------------------------------------------------------- */
    .manta-mega-menu-wrap .manta-mega-menu-list {
        display: none !important;
        flex-direction: column !important;
        align-items: stretch !important;
        position: fixed !important;
        top: auto !important;
        right: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        background: var(--manta-bg) !important;
        border: none !important;
        border-top: 2px solid var(--manta-primary) !important;
        border-radius: 0 !important;
        padding: 0 !important;
        box-shadow: 0 10px 40px rgba(0,0,0,0.18) !important;
        z-index: 99999 !important;
        max-height: 80vh !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .manta-mega-menu-wrap .manta-mega-menu-list.manta-mobile-open {
        display: flex !important;
    }

    /* ----------------------------------------------------------------
       Top-level <li>: full-width row with optional arrow button
       ---------------------------------------------------------------- */
    .manta-mega-menu-wrap .manta-mega-menu-list > li {
        position: relative !important;
        display: flex !important;
        flex-wrap: wrap !important;
        border-bottom: 1px solid var(--manta-border) !important;
    }
    .manta-mega-menu-wrap .manta-mega-menu-list > li:last-child {
        border-bottom: none !important;
    }

    /* Top-level link: fill remaining space */
    .manta-mega-menu-wrap .manta-mega-menu-list > li > .manta-menu-link {
        flex: 1 !important;
        min-width: 0 !important;
        padding: 14px 16px !important;
        font-size: 15px !important;
        font-weight: 500 !important;
        line-height: 1.4 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* Hide desktop-only bits */
    .manta-mega-menu-wrap .manta-mega-menu-list > li > .manta-menu-link .manta-arrow { display: none !important; }
    .manta-mega-menu-wrap .manta-mega-menu-list > li > .manta-menu-link::after { display: none !important; }

    /* ----------------------------------------------------------------
       Arrow toggle button (injected by JS)
       ---------------------------------------------------------------- */
    .manta-mobile-arrow {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 50px !important;
        min-height: 48px !important;
        background: transparent !important;
        border: none !important;
        border-right: 1px solid var(--manta-border) !important;
        cursor: pointer !important;
        color: var(--manta-text-muted) !important;
        font-size: 13px !important;
        transition: all 0.25s ease !important;
        flex-shrink: 0 !important;
        padding: 0 !important;
    }
    .manta-mobile-arrow:hover,
    .manta-mobile-arrow.manta-arrow-open {
        background: var(--manta-bg-light) !important;
        color: var(--manta-primary) !important;
    }
    .manta-mobile-arrow i {
        transition: transform 0.25s ease !important;
    }
    .manta-mobile-arrow.manta-arrow-open i {
        transform: rotate(180deg) !important;
    }

    /* ----------------------------------------------------------------
       MEGA DROPDOWN on mobile: static, full-width, vertical
       ---------------------------------------------------------------- */
    .manta-mega-menu-wrap .manta-mega-dropdown {
        position: static !important;
        display: none !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        left: auto !important;
        right: auto !important;
        border: none !important;
        border-radius: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        box-shadow: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: none !important;
        transition: none !important;
        overflow: visible !important;
        background: var(--manta-bg-light) !important;
    }
    .manta-mega-menu-wrap .manta-mega-dropdown::before { display: none !important; }

    .manta-mega-menu-wrap .manta-has-mega.manta-active > .manta-mega-dropdown {
        display: block !important;
    }

    /* Inner wrapper: vertical column */
    .manta-mega-menu-wrap .manta-mega-inner {
        display: flex !important;
        flex-direction: column !important;
        padding: 0 !important;
        gap: 0 !important;
    }

    /* Grid → single column */
    .manta-mega-menu-wrap .manta-mega-grid {
        width: 100% !important;
    }
    .manta-mega-menu-wrap .manta-mega-submenu {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
    }

    /* ----------------------------------------------------------------
       Columns inside mega: each is a collapsible section
       ---------------------------------------------------------------- */
    .manta-mega-menu-wrap .manta-mega-column {
        position: relative !important;
        display: block !important;
        border-bottom: 1px solid var(--manta-border) !important;
        padding: 0 !important;
    }
    .manta-mega-menu-wrap .manta-mega-column:last-child {
        border-bottom: none !important;
    }
    .manta-mega-menu-wrap .manta-mega-column:not(:last-child)::after {
        display: none !important;
    }

    /* Column header: acts as accordion toggle */
    .manta-mega-menu-wrap .manta-mega-column > .manta-menu-link,
    .manta-mega-menu-wrap .manta-mega-column > .manta-col-header {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        cursor: pointer !important;
        padding: 12px 16px !important;
        margin: 0 !important;
        border-bottom: none !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        color: var(--manta-primary) !important;
        background: transparent !important;
    }
    .manta-mega-menu-wrap .manta-mega-column > .manta-menu-link::after,
    .manta-mega-menu-wrap .manta-mega-column > .manta-col-header::after {
        display: none !important;
    }

    /* Column arrow */
    .manta-col-arrow {
        display: inline-flex !important;
        margin-right: auto !important;
        font-size: 11px !important;
        color: var(--manta-text-muted) !important;
        transition: transform 0.25s ease !important;
    }
    .manta-mega-column.manta-col-open .manta-col-arrow {
        transform: rotate(180deg) !important;
        color: var(--manta-primary) !important;
    }

    /* Sub-items: hidden by default, shown when column open */
    .manta-mega-menu-wrap .manta-mega-sub-items {
        display: none !important;
        margin: 0 !important;
        padding: 0 0 8px !important;
    }
    .manta-mega-column.manta-col-open .manta-mega-sub-items {
        display: block !important;
    }

    /* Each sub-item link: full width, vertical stack */
    .manta-mega-menu-wrap .manta-mega-sub-items .manta-menu-link {
        padding: 10px 20px 10px 16px !important;
        border-right: none !important;
        font-size: 14px !important;
    }

    /* ----------------------------------------------------------------
       Regular .sub-menu (non-mega items like "פיתוח אתרי וורדפרס")
       ---------------------------------------------------------------- */
    .manta-mega-menu-wrap .sub-menu {
        position: static !important;
        display: none !important;
        width: 100% !important;
        min-width: 0 !important;
        border: none !important;
        border-radius: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        box-shadow: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        background: var(--manta-bg-light) !important;
    }
    .manta-mega-menu-wrap .sub-menu::before { display: none !important; }

    .manta-mega-menu-wrap .manta-mega-menu-list > li.manta-submenu-open > .sub-menu {
        display: block !important;
    }

    .manta-mega-menu-wrap .sub-menu > li {
        display: block !important;
        border-bottom: 1px solid rgba(0,0,0,0.04) !important;
    }
    .manta-mega-menu-wrap .sub-menu > li:last-child {
        border-bottom: none !important;
    }
    .manta-mega-menu-wrap .sub-menu > li > a {
        display: block !important;
        padding: 12px 24px 12px 16px !important;
        white-space: normal !important;
        font-size: 14px !important;
        line-height: 1.5 !important;
        color: var(--manta-text-sub) !important;
    }
    .manta-mega-menu-wrap .sub-menu > li > a:hover {
        background: rgba(0,81,132,0.05) !important;
        color: var(--manta-primary) !important;
    }

    /* ----------------------------------------------------------------
       Promo box: full width at bottom
       ---------------------------------------------------------------- */
    .manta-mega-menu-wrap .manta-promo-box {
        width: 100% !important;
        margin: 8px 0 0 !important;
        border-radius: 0 !important;
    }
    .manta-mega-menu-wrap .manta-promo-image {
        height: 100px !important;
    }
    .manta-mega-menu-wrap .manta-promo-content {
        padding: 14px 16px !important;
    }

    /* No stagger animation on mobile */
    .manta-has-mega.manta-active .manta-mega-column {
        animation: none !important;
        opacity: 1 !important;
    }
    .manta-has-mega.manta-active .manta-mega-sub-items li {
        animation: none !important;
        opacity: 1 !important;
    }
}

/* ==========================================================================
   LTR Support
   ========================================================================== */
[dir="ltr"] .manta-mega-menu-wrap { direction: ltr !important; }
[dir="ltr"] .manta-mega-dropdown { right: auto !important; left: 0 !important; }
[dir="ltr"] .manta-promo-box { margin-right: 0 !important; margin-left: 24px !important; }
