/**
 * Hostbreak Mega Menu Styles
 * Design: Clean Corporate (Option 1)
 * 
 * @package Hostbreak
 * @since 1.0.0
 */

/* ==========================================================================
   1. CSS Variables
   ========================================================================== */

:root {
    /* Colors - Brand */
    --hb-primary: #2e4360;
    --hb-secondary: #2c3c94;
    --hb-accent: #f15722;
    --hb-accent-light: #ff7a45;
    
    /* Colors - UI */
    --hb-bg-white: #ffffff;
    --hb-bg-light: #f8fafc;
    --hb-bg-hover: #f1f5f9;
    --hb-border: #e2e8f0;
    --hb-text: #1e293b;
    --hb-text-muted: #64748b;
    --hb-text-light: #94a3b8;
    
    /* Colors - Promo */
    --hb-promo-yellow-bg: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    --hb-promo-yellow-text: #92400e;
    --hb-promo-orange-bg: linear-gradient(135deg, #fed7aa 0%, #fdba74 100%);
    --hb-promo-orange-text: #9a3412;
    
    /* Badge Colors */
    --hb-badge-orange: linear-gradient(135deg, #f15722, #ff7a45);
    --hb-badge-green: linear-gradient(135deg, #10b981, #34d399);
    --hb-badge-blue: linear-gradient(135deg, #3b82f6, #60a5fa);
    --hb-badge-purple: linear-gradient(135deg, #8b5cf6, #a78bfa);
    
    /* Spacing */
    --hb-nav-height: 70px;
    --hb-dropdown-gap: 8px;
    --hb-item-padding: 14px 16px;
    --hb-icon-size: 44px;
    --hb-icon-size-sm: 40px;
    
    /* Mobile Hamburger Position - Adjust these to align with your header */
    --hb-hamburger-top: 35px;
    --hb-hamburger-right: 15px;
    
    /* Typography */
    --hb-font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --hb-font-size-sm: 12px;
    --hb-font-size-base: 14px;
    --hb-font-size-md: 15px;
    
    /* Effects */
    --hb-shadow-dropdown: 0 25px 60px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05);
    --hb-shadow-item: 0 4px 12px rgba(0, 0, 0, 0.08);
    --hb-radius-lg: 16px;
    --hb-radius-md: 12px;
    --hb-radius-sm: 8px;
    --hb-transition: 0.2s ease;
    --hb-transition-dropdown: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Z-index */
    --hb-z-nav: 1000;
    --hb-z-dropdown: 1001;
    --hb-z-mobile-menu: 1002;
    --hb-z-mobile-overlay: 1001;
}


/* ==========================================================================
   2. Base Navigation
   ========================================================================== */

.hb-mega-nav {
    position: relative;
    z-index: var(--hb-z-nav);
    font-family: var(--hb-font-family);
    display: flex;
    align-items: center;
}

/* Panel wrapper - invisible on desktop */
.hb-mega-menu-panel {
    display: contents;
}

/* Menu footer - hidden on desktop */
.hb-mega-menu-footer {
    display: none;
}

.hb-mega-menu {
    display: flex;
    align-items: center;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
}


/* ==========================================================================
   3. Top Level Items
   ========================================================================== */

.hb-mega-item--toplevel {
    position: relative;
    list-style: none;
}

.hb-mega-item--toplevel > .hb-mega-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 24px 20px;
    color: var(--hb-text);
    text-decoration: none;
    font-weight: 600;
    font-size: var(--hb-font-size-md);
    transition: color var(--hb-transition);
    white-space: nowrap;
}

.hb-mega-item--toplevel > .hb-mega-link:hover,
.hb-mega-item--toplevel.hb-mega-item--active > .hb-mega-link,
.hb-mega-item--toplevel:hover > .hb-mega-link {
    color: var(--hb-accent);
}

/* Top level icon (optional) */
.hb-mega-item--toplevel > .hb-mega-link .hb-mega-icon {
    display: none; /* Hidden by default for top level */
}

/* Top level text */
.hb-mega-item--toplevel > .hb-mega-link .hb-mega-text {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.hb-mega-item--toplevel > .hb-mega-link .hb-mega-title {
    font-weight: 600;
}

.hb-mega-item--toplevel > .hb-mega-link .hb-mega-subtitle {
    display: none; /* Hidden by default for top level on desktop */
}

/* Arrow icon */
.hb-mega-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 4px;
    width: 16px;
    height: 16px;
}

.hb-mega-arrow svg {
    width: 10px;
    height: 10px;
    transition: transform var(--hb-transition);
}

.hb-mega-item--toplevel:hover .hb-mega-arrow svg,
.hb-mega-item--expanded .hb-mega-arrow svg {
    transform: rotate(180deg);
}


/* ==========================================================================
   4. Dropdown Container
   ========================================================================== */

.hb-mega-dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: var(--hb-bg-white);
    border-radius: var(--hb-radius-lg);
    box-shadow: var(--hb-shadow-dropdown);
    opacity: 0;
    visibility: hidden;
    transition: 
        opacity var(--hb-transition-dropdown),
        transform var(--hb-transition-dropdown),
        visibility var(--hb-transition-dropdown);
    z-index: var(--hb-z-dropdown);
    min-width: 320px;
}

/* Dropdown widths by type */
.hb-mega-dropdown--single {
    min-width: 320px;
    max-width: 400px;
}

.hb-mega-dropdown--mega_2col {
    min-width: 650px;
    max-width: 850px;
}

.hb-mega-dropdown--mega_3col {
    min-width: 900px;
    max-width: 1200px;
}

/* Show dropdown on hover/focus */
.hb-mega-item--toplevel:hover > .hb-mega-dropdown,
.hb-mega-item--toplevel:focus-within > .hb-mega-dropdown,
.hb-mega-item--expanded > .hb-mega-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* Dropdown inner container */
.hb-mega-dropdown-inner {
    padding: 0;
    overflow: hidden;
    border-radius: var(--hb-radius-lg);
}

/* Dropdown body */
.hb-mega-dropdown-body {
    display: flex;
    padding: 24px;
    gap: 24px;
}


/* ==========================================================================
   5. Column Layouts
   ========================================================================== */

.hb-mega-columns {
    display: grid;
    gap: 24px;
    flex: 1;
    align-items: start;
}

.hb-mega-columns--1 {
    grid-template-columns: 1fr;
}

.hb-mega-columns--2 {
    grid-template-columns: 1fr 1fr;
}

.hb-mega-columns--3 {
    grid-template-columns: 1fr 1fr 1fr;
}

/* Column styling */
.hb-mega-column {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.hb-mega-column-heading {
    font-size: 11px;
    font-weight: 700;
    color: var(--hb-text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 12px;
    padding-left: 16px;
    min-height: 15px; /* Reserve space for alignment */
}

/* Hide empty headings but keep alignment */
.hb-mega-column-heading:empty {
    visibility: hidden;
}

.hb-mega-column-items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--hb-dropdown-gap);
    flex: 1;
}


/* ==========================================================================
   6. Child Items
   ========================================================================== */

.hb-mega-child-item {
    list-style: none;
    position: relative;
}

.hb-mega-child-link {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--hb-radius-md);
    text-decoration: none;
    transition: 
        background-color var(--hb-transition),
        transform var(--hb-transition);
    position: relative;
}

.hb-mega-child-link:hover {
    background: var(--hb-bg-hover);
}

.hb-mega-child-link:focus {
    outline: 2px solid var(--hb-accent);
    outline-offset: 2px;
}

/* Active state */
.hb-mega-child-item--active .hb-mega-child-link {
    background: var(--hb-bg-hover);
}

/* Child icon */
.hb-mega-child-icon {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background var(--hb-transition);
}

.hb-mega-child-icon i {
    font-size: 16px;
    color: var(--hb-secondary);
    transition: color var(--hb-transition);
}

.hb-mega-child-icon img,
.hb-mega-child-icon svg {
    width: 20px;
    height: 20px;
}

.hb-mega-child-link:hover .hb-mega-child-icon {
    background: linear-gradient(135deg, var(--hb-secondary) 0%, var(--hb-primary) 100%);
}

.hb-mega-child-link:hover .hb-mega-child-icon i {
    color: #fff;
}

/* Child text */
.hb-mega-child-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 100px;
    flex: 1;
}

.hb-mega-child-title {
    font-size: var(--hb-font-size-base);
    font-weight: 600;
    color: var(--hb-text);
    line-height: 1.4;
    white-space: nowrap;
}

/* Badge inside title - small and inline */
.hb-mega-child-title .hb-mega-badge {
    display: inline-flex !important;
    vertical-align: middle !important;
    padding: 2px 6px !important;
    font-size: 9px !important;
    border-radius: 3px !important;
    position: relative !important;
    top: -1px !important;
    white-space: nowrap !important;
}

.hb-mega-child-subtitle {
    font-size: var(--hb-font-size-sm);
    color: var(--hb-text-muted);
    line-height: 1.4;
}

/* Badges */
.hb-mega-badge {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    white-space: nowrap;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #fff;
}

.hb-mega-badge--orange {
    background: var(--hb-badge-orange);
}

.hb-mega-badge--green {
    background: var(--hb-badge-green);
}

.hb-mega-badge--blue {
    background: var(--hb-badge-blue);
}

.hb-mega-badge--purple {
    background: var(--hb-badge-purple);
}


/* ==========================================================================
   7. Promotional Blocks
   ========================================================================== */

/* Promo container positions */
.hb-mega-promos--top {
    padding: 16px 24px;
    border-bottom: 1px solid var(--hb-border);
}

.hb-mega-promos--bottom {
    padding: 16px 24px;
    border-top: 1px solid var(--hb-border);
    background: var(--hb-bg-light);
}

.hb-mega-promos--left,
.hb-mega-promos--right {
    width: 200px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.hb-mega-promos--left {
    padding-right: 24px;
    border-right: 1px solid var(--hb-border);
}

.hb-mega-promos--right {
    padding-left: 24px;
    border-left: 1px solid var(--hb-border);
}

/* Rails take content from body padding */
.hb-mega-rail {
    display: flex;
    flex-direction: column;
}

.hb-mega-rail--left {
    margin-right: 0;
}

.hb-mega-rail--right {
    margin-left: 0;
}

/* Individual promo block */
.hb-mega-promo {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-radius: var(--hb-radius-md);
    position: relative;
}

/* Style variants */
.hb-mega-promo--default {
    background: var(--hb-promo-yellow-bg);
}

.hb-mega-promo--default .hb-mega-promo-title,
.hb-mega-promo--default .hb-mega-promo-subtitle {
    color: var(--hb-promo-yellow-text);
}

.hb-mega-promo--highlighted {
    background: var(--hb-promo-orange-bg);
}

.hb-mega-promo--highlighted .hb-mega-promo-title,
.hb-mega-promo--highlighted .hb-mega-promo-subtitle {
    color: var(--hb-promo-orange-text);
}

.hb-mega-promo--minimal {
    background: var(--hb-bg-light);
    border: 1px solid var(--hb-border);
}

.hb-mega-promo--minimal .hb-mega-promo-title {
    color: var(--hb-text);
}

.hb-mega-promo--minimal .hb-mega-promo-subtitle {
    color: var(--hb-text-muted);
}

/* Rail promos (vertical layout) */
.hb-mega-promo--left,
.hb-mega-promo--right {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

/* Promo badge */
.hb-mega-promo-badge {
    position: absolute;
    top: -8px;
    right: 12px;
    background: var(--hb-badge-orange);
    color: #fff;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

/* Promo content */
.hb-mega-promo-content {
    flex: 1;
}

.hb-mega-promo-title {
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 2px;
}

.hb-mega-promo-subtitle {
    font-size: 12px;
    line-height: 1.4;
}

/* Promo CTA */
.hb-mega-promo-cta {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    background: var(--hb-text);
    color: #fff !important;
    font-size: 12px;
    font-weight: 600;
    border-radius: var(--hb-radius-sm);
    text-decoration: none;
    transition: 
        background var(--hb-transition),
        transform var(--hb-transition);
    white-space: nowrap;
}

.hb-mega-promo-cta:hover {
    background: var(--hb-accent);
    transform: translateY(-1px);
    color: #fff !important;
}


/* ==========================================================================
   8. Mobile Navigation - COMPLETE REWRITE
   ========================================================================== */

/* Mobile toggle button */
.hb-mega-mobile-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 1003;
    position: relative;
}

.hb-mega-hamburger {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 24px;
}

.hb-mega-hamburger span {
    display: block;
    height: 2px;
    background: var(--hb-text);
    border-radius: 2px;
    transition: 
        transform var(--hb-transition),
        opacity var(--hb-transition);
}

/* Hamburger to X animation */
.hb-mega-mobile-toggle[aria-expanded="true"] .hb-mega-hamburger span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.hb-mega-mobile-toggle[aria-expanded="true"] .hb-mega-hamburger span:nth-child(2) {
    opacity: 0;
}

.hb-mega-mobile-toggle[aria-expanded="true"] .hb-mega-hamburger span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Screen reader only */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Close button - hidden on desktop */
.hb-mega-mobile-close {
    display: none;
}

/* Admin notice */
.hb-mega-notice {
    padding: 16px;
    background: var(--hb-bg-light);
    border-radius: var(--hb-radius-sm);
    color: var(--hb-text-muted);
    font-size: 14px;
}

.hb-mega-notice a {
    color: var(--hb-accent);
}

/* ==================== MOBILE STYLES ==================== */
@media (max-width: 991px) {
    
    /* Box sizing for all */
    .hb-mega-nav,
    .hb-mega-nav *,
    .hb-mega-nav *::before,
    .hb-mega-nav *::after {
        box-sizing: border-box !important;
    }
    
    /* Reset ONLY for list items, links, spans - NOT the menu panel itself */
    .hb-mega-nav .hb-mega-menu li,
    .hb-mega-nav .hb-mega-menu a,
    .hb-mega-nav .hb-mega-menu span,
    .hb-mega-nav .hb-mega-menu div:not(.hb-mega-dropdown),
    .hb-mega-nav .hb-mega-menu ul {
        float: none !important;
        left: auto !important;
        right: auto !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        text-indent: 0 !important;
    }
    
    /* Show hamburger on mobile - POSITION FIXED TO TOP RIGHT */
    .hb-mega-mobile-toggle {
        display: flex !important;
        position: fixed !important;
        top: var(--hb-hamburger-top, 22px) !important;
        right: var(--hb-hamburger-right, 15px) !important;
        z-index: 1005 !important;
        background: #ffffff !important;
        border-radius: 8px !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
        width: 44px !important;
        height: 44px !important;
    }
    
    /* Hide hamburger when menu is open (close button handles closing) */
    .hb-mega-nav--open .hb-mega-mobile-toggle {
        display: none !important;
    }
    
    /* Dark overlay behind menu */
    .hb-mega-nav.hb-mega-nav--open::before {
        content: '' !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        background: rgba(0, 0, 0, 0.5) !important;
        z-index: 1001 !important;
        display: block !important;
    }
    
    /* ===== CLOSE BUTTON - Hidden by default, shown when menu is open ===== */
    .hb-mega-mobile-close {
        display: none !important;
        position: fixed !important;
        top: 15px !important;
        left: 255px !important;
        width: 40px !important;
        height: 40px !important;
        padding: 0 !important;
        margin: 0 !important;
        background: #ffffff !important;
        border: 1px solid #e5e7eb !important;
        border-radius: 50% !important;
        cursor: pointer !important;
        z-index: 1010 !important;
        color: #64748b !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
    }
    
    .hb-mega-nav--open .hb-mega-mobile-close {
        display: flex !important;
    }
    
    .hb-mega-mobile-close:hover {
        background: #f1f5f9 !important;
        color: #1e293b !important;
    }
    
    .hb-mega-mobile-close svg {
        width: 18px !important;
        height: 18px !important;
    }

    /* ===== MOBILE MENU PANEL (Container) ===== */
    .hb-mega-nav .hb-mega-menu-panel {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        right: auto !important;
        width: 300px !important;
        max-width: 85vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        margin: 0 !important;
        background: #ffffff !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        transform: translateX(-100%) !important;
        transition: transform 0.3s ease !important;
        z-index: 1002 !important;
        box-shadow: 4px 0 25px rgba(0, 0, 0, 0.15) !important;
    }
    
    /* Open state - panel slides in */
    .hb-mega-nav.hb-mega-nav--open .hb-mega-menu-panel {
        transform: translateX(0) !important;
    }
    
    /* Menu list inside panel */
    .hb-mega-nav .hb-mega-menu {
        position: relative !important;
        flex: 1 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 20px 0 !important;
        margin: 0 !important;
        list-style: none !important;
        display: flex !important;
        flex-direction: column !important;
        background: transparent !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        transform: none !important;
        box-shadow: none !important;
    }
    
    /* Lock body scroll */
    body.hb-mega-menu-open {
        overflow: hidden !important;
    }
    
    /* ===== TOP LEVEL MENU ITEMS ===== */
    .hb-mega-nav .hb-mega-item--toplevel {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border-bottom: 1px solid #e5e7eb !important;
        position: relative !important;
        list-style: none !important;
    }
    
    /* Top level link */
    .hb-mega-nav .hb-mega-item--toplevel > .hb-mega-link {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        padding: 16px 20px !important;
        margin: 0 !important;
        color: #1e293b !important;
        text-decoration: none !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        background: transparent !important;
        box-sizing: border-box !important;
    }
    
    .hb-mega-nav .hb-mega-item--toplevel > .hb-mega-link:hover,
    .hb-mega-nav .hb-mega-item--toplevel.hb-mega-item--expanded > .hb-mega-link {
        color: #f15722 !important;
        background: #f8fafc !important;
    }
    
    /* Hide top-level icon on mobile */
    .hb-mega-nav .hb-mega-item--toplevel > .hb-mega-link > .hb-mega-icon {
        display: none !important;
    }
    
    /* Top level text */
    .hb-mega-nav .hb-mega-item--toplevel > .hb-mega-link > .hb-mega-text {
        display: flex !important;
        flex-direction: column !important;
        gap: 2px !important;
        flex: 1 !important;
        min-width: 0 !important;
    }
    
    .hb-mega-nav .hb-mega-item--toplevel > .hb-mega-link .hb-mega-title {
        font-weight: 600 !important;
        font-size: 15px !important;
    }
    
    .hb-mega-nav .hb-mega-item--toplevel > .hb-mega-link .hb-mega-subtitle {
        display: block !important;
        font-size: 12px !important;
        color: #64748b !important;
        font-weight: 400 !important;
    }
    
    /* Arrow rotation */
    .hb-mega-nav .hb-mega-arrow {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
        margin-left: 10px !important;
        transition: transform 0.2s ease !important;
        width: 20px !important;
        height: 20px !important;
    }
    
    .hb-mega-nav .hb-mega-arrow svg {
        width: 12px !important;
        height: 12px !important;
    }
    
    .hb-mega-nav .hb-mega-item--expanded > .hb-mega-link .hb-mega-arrow {
        transform: rotate(180deg) !important;
    }
    
    /* ===== DROPDOWN (ACCORDION) ===== */
    .hb-mega-nav .hb-mega-dropdown {
        position: static !important;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        max-height: 0 !important;
        overflow: hidden !important;
        transition: max-height 0.3s ease !important;
        background: #f8fafc !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .hb-mega-nav .hb-mega-item--expanded > .hb-mega-dropdown {
        max-height: 2000px !important;
    }
    
    /* Dropdown inner */
    .hb-mega-nav .hb-mega-dropdown-inner {
        padding: 0 !important;
        border-radius: 0 !important;
    }
    
    /* Dropdown body */
    .hb-mega-nav .hb-mega-dropdown-body {
        display: flex !important;
        flex-direction: column !important;
        padding: 10px 0 !important;
        gap: 0 !important;
    }
    
    /* ===== COLUMNS (STACKED ON MOBILE) ===== */
    .hb-mega-nav .hb-mega-columns {
        display: block !important;
        width: 100% !important;
    }
    
    .hb-mega-nav .hb-mega-column {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Column heading */
    .hb-mega-nav .hb-mega-column-heading {
        display: block !important;
        padding: 10px 20px 5px !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        color: #64748b !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
    }
    
    .hb-mega-nav .hb-mega-column-items {
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* ===== CHILD MENU ITEMS ===== */
    .hb-mega-nav .hb-mega-child-item {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }
    
    .hb-mega-nav .hb-mega-child-link {
        display: flex !important;
        align-items: flex-start !important;
        gap: 12px !important;
        width: 100% !important;
        padding: 12px 20px !important;
        margin: 0 !important;
        text-decoration: none !important;
        background: transparent !important;
        box-sizing: border-box !important;
        border-radius: 0 !important;
    }
    
    .hb-mega-nav .hb-mega-child-link:hover,
    .hb-mega-nav .hb-mega-child-link:active {
        background: #e2e8f0 !important;
    }
    
    /* Child icon */
    .hb-mega-nav .hb-mega-child-icon {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%) !important;
        border-radius: 8px !important;
        flex-shrink: 0 !important;
    }
    
    .hb-mega-nav .hb-mega-child-icon i,
    .hb-mega-nav .hb-mega-child-icon .hb-icon-emoji {
        font-size: 16px !important;
        color: #2c3c94 !important;
    }
    
    /* Child text */
    .hb-mega-nav .hb-mega-child-text {
        display: flex !important;
        flex-direction: column !important;
        gap: 2px !important;
        flex: 1 !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }
    
    .hb-mega-nav .hb-mega-child-title {
        font-size: 14px !important;
        font-weight: 600 !important;
        color: #1e293b !important;
        line-height: 1.4 !important;
        white-space: normal !important;
    }
    
    /* Badge - small inline on mobile */
    .hb-mega-nav .hb-mega-child-title .hb-mega-badge {
        display: inline-flex !important;
        vertical-align: middle !important;
        padding: 2px 5px !important;
        font-size: 8px !important;
        white-space: nowrap !important;
    }
    
    .hb-mega-nav .hb-mega-child-subtitle {
        display: block !important;
        font-size: 12px !important;
        color: #64748b !important;
        font-weight: 400 !important;
        line-height: 1.4 !important;
        word-wrap: break-word !important;
    }
    
    /* Badge - keep small on mobile */
    .hb-mega-nav .hb-mega-badge {
        padding: 2px 6px !important;
        font-size: 9px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        border-radius: 3px !important;
        white-space: nowrap !important;
    }
    
    /* ===== HIDE RAILS ON MOBILE ===== */
    .hb-mega-nav .hb-mega-rail {
        display: none !important;
    }
    
    /* ===== PROMOTIONS ===== */
    .hb-mega-nav .hb-mega-promo--hide-mobile {
        display: none !important;
    }
    
    .hb-mega-nav .hb-mega-promos--top,
    .hb-mega-nav .hb-mega-promos--bottom {
        padding: 10px 15px !important;
        border: none !important;
        background: transparent !important;
    }
    
    .hb-mega-nav .hb-mega-promo {
        padding: 12px 15px !important;
        border-radius: 8px !important;
        margin: 5px !important;
    }
    
    .hb-mega-nav .hb-mega-promo-cta {
        padding: 8px 12px !important;
        font-size: 11px !important;
        white-space: nowrap !important;
    }
    
    /* ===== MOBILE MENU FOOTER (Currency + Login) ===== */
    .hb-mega-menu-footer {
        display: block !important;
        margin-top: auto !important;
        border-top: 1px solid #e5e7eb !important;
        background: #f8fafc !important;
        padding: 16px 20px !important;
        flex-shrink: 0 !important;
    }
    
    .hb-mega-menu-footer-section {
        margin-bottom: 16px !important;
    }
    
    .hb-mega-menu-footer-label {
        font-size: 11px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        color: #64748b !important;
        margin-bottom: 10px !important;
    }
    
    .hb-mega-currency-form {
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .hb-mega-currency-grid {
        display: flex !important;
        gap: 10px !important;
    }
    
    .hb-mega-currency-btn {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 12px 8px !important;
        background: #ffffff !important;
        border: 2px solid #e2e8f0 !important;
        border-radius: 10px !important;
        cursor: pointer !important;
        transition: all 0.2s ease !important;
        font-family: inherit !important;
    }
    
    .hb-mega-currency-btn:hover {
        border-color: #3b82f6 !important;
        background: #eff6ff !important;
    }
    
    .hb-mega-currency-btn--active {
        background: linear-gradient(135deg, #2c3c94 0%, #1e2a6e 100%) !important;
        border-color: #2c3c94 !important;
        color: #ffffff !important;
        box-shadow: 0 4px 12px rgba(44, 60, 148, 0.3) !important;
    }
    
    .hb-mega-currency-btn--active:hover {
        background: linear-gradient(135deg, #1e2a6e 0%, #151d4f 100%) !important;
        border-color: #1e2a6e !important;
    }
    
    .hb-mega-currency-flag {
        font-size: 24px !important;
        line-height: 1 !important;
        margin-bottom: 4px !important;
    }
    
    .hb-mega-currency-code {
        font-size: 12px !important;
        font-weight: 700 !important;
    }
    
    .hb-mega-menu-footer-links {
        padding-top: 16px !important;
        border-top: 1px solid #e2e8f0 !important;
    }
    
    .hb-mega-menu-footer-link {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 12px 16px !important;
        background: #2c3c94 !important;
        color: #ffffff !important;
        text-decoration: none !important;
        border-radius: 8px !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        justify-content: center !important;
        transition: background 0.2s ease !important;
    }
    
    .hb-mega-menu-footer-link:hover {
        background: #1e2a6e !important;
        color: #ffffff !important;
    }
    
    .hb-mega-menu-footer-link svg {
        flex-shrink: 0 !important;
    }
    
}


/* ==========================================================================
   9. Animations
   ========================================================================== */

/* Staggered fade-in for dropdown items */
@media (min-width: 992px) {
    .hb-mega-item--toplevel:hover .hb-mega-child-item {
        animation: hb-fadeInUp 0.3s ease forwards;
        opacity: 0;
    }
    
    .hb-mega-item--toplevel:hover .hb-mega-child-item:nth-child(1) { animation-delay: 0.03s; }
    .hb-mega-item--toplevel:hover .hb-mega-child-item:nth-child(2) { animation-delay: 0.06s; }
    .hb-mega-item--toplevel:hover .hb-mega-child-item:nth-child(3) { animation-delay: 0.09s; }
    .hb-mega-item--toplevel:hover .hb-mega-child-item:nth-child(4) { animation-delay: 0.12s; }
    .hb-mega-item--toplevel:hover .hb-mega-child-item:nth-child(5) { animation-delay: 0.15s; }
    .hb-mega-item--toplevel:hover .hb-mega-child-item:nth-child(6) { animation-delay: 0.18s; }
    .hb-mega-item--toplevel:hover .hb-mega-child-item:nth-child(7) { animation-delay: 0.21s; }
    .hb-mega-item--toplevel:hover .hb-mega-child-item:nth-child(8) { animation-delay: 0.24s; }
    .hb-mega-item--toplevel:hover .hb-mega-child-item:nth-child(9) { animation-delay: 0.27s; }
    .hb-mega-item--toplevel:hover .hb-mega-child-item:nth-child(10) { animation-delay: 0.30s; }
}

@keyframes hb-fadeInUp {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ==========================================================================
   10. Accessibility
   ========================================================================== */

/* Focus visible */
.hb-mega-link:focus-visible,
.hb-mega-child-link:focus-visible,
.hb-mega-promo-cta:focus-visible,
.hb-mega-mobile-toggle:focus-visible {
    outline: 2px solid var(--hb-accent);
    outline-offset: 2px;
}

/* Skip link */
.hb-skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--hb-accent);
    color: #fff;
    padding: 8px 16px;
    z-index: 10000;
    text-decoration: none;
    font-weight: 600;
}

.hb-skip-link:focus {
    top: 0;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .hb-mega-dropdown {
        border: 2px solid var(--hb-text);
    }
    
    .hb-mega-child-link:hover {
        outline: 2px solid var(--hb-text);
    }
}