/* ==================================================
   GLOBAL: CLEAN LOOK (No Dots)
   ================================================== */
.subcategories-list, 
.subcategories-list li, 
.mega-menu-categories-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.subcategories-list li a::before, 
.mega-menu-category-item::before {
    display: none !important;
}

/* ==================================================
   DESKTOP: FULL-WIDTH, RIGHT IMAGE & SCROLL
   ================================================== */
@media (min-width: 769px) {
    .woo-mega-menu-wrapper { position: relative; display: inline-block; z-index: 9999; }

    .mega-menu-main-dropdown {
        position: absolute; top: 100%; left: 0;
        width: 95vw; max-width: 1200px;
        background: #fff; margin-top: 15px; border-radius: 12px;
        display: flex !important;
        box-shadow: 0 25px 70px rgba(0,0,0,0.15);
        opacity: 0; visibility: hidden;
        transform: translateY(15px);
        transition: all 0.3s ease; border: 1px solid #f0f0f0; overflow: hidden;
    }

    .woo-mega-menu-wrapper:hover .mega-menu-main-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }

    .mega-menu-categories-list { width: 280px; background: #fafafa; border-right: 1px solid #eee; flex-shrink: 0; }
    
    .mega-menu-category-item { position: static !important; }
    
    .mega-menu-category-item > a {
        padding: 18px 25px; display: block; font-weight: 600; color: #333; 
        text-decoration: none; border-bottom: 1px solid #f0f0f0; transition: 0.2s;
    }

    .mega-menu-category-item:hover > a { background: #fff; color: #00A9F4; }

    /* SUBMENU WINDOW WITH SCROLL */
    .mega-menu-subcategories {
        position: absolute; left: 280px; top: 0; right: 0; bottom: 0;
        max-height: 550px; overflow-y: auto; overflow-x: hidden;
        background: #fff; padding: 40px; display: block !important;
        opacity: 0; visibility: hidden;
    }

    .mega-menu-category-item:hover .mega-menu-subcategories { opacity: 1; visibility: visible; }

    /* DESKTOP LINKS & DIVIDERS */
    .subcategories-list { width: 60%; display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; }
    
    .subcategories-list li a {
        display: block; padding: 12px 0; color: #555; font-size: 15px; 
        text-decoration: none; border-bottom: 1px solid #f2f2f2; transition: 0.3s ease;
    }

    .subcategories-list li a:hover { color: #00A9F4; padding-left: 8px; border-bottom-color: #00A9F4; }

    /* PINNED IMAGE ON RIGHT */
    .subcategories-image {
        position: absolute !important;
        right: 40px !important;
        top: 40px !important;
        width: 300px !important;
        z-index: 10;
    }
    .subcategories-image img { width: 100%; height: auto; border-radius: 8px; box-shadow: 0 5px 20px rgba(0,0,0,0.1); }

    /* BEAUTIFUL SCROLLBAR */
    .mega-menu-subcategories::-webkit-scrollbar { width: 6px; }
    .mega-menu-subcategories::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 10px; }
    .mega-menu-subcategories::-webkit-scrollbar-thumb { background: #00A9F4; border-radius: 10px; }
}

/* ==================================================
   MOBILE: BEAUTIFUL SIDE-DRAWER (Fixed Double Arrow)
   ================================================== */
@media (max-width: 768px) {
    body.mega-menu-open::after { content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); z-index: 999; }
    body.mega-menu-open { overflow: hidden !important; position: fixed; width: 100%; }

    .mega-menu-main-dropdown {
        position: fixed !important; top: 0 !important; left: 0 !important; width: 85vw !important; height: 100vh !important;
        background: #fff !important; z-index: 1000; display: none; overflow-y: auto !important;
        border-radius: 0 24px 24px 0; box-shadow: 20px 0 60px rgba(0,0,0,0.3);
    }

    .mega-menu-category-item { margin: 0 10px; }

    .mega-menu-category-item > a {
        display: flex !important; width: 100%; min-height: 55px; padding: 0 15px !important;
        align-items: center; justify-content: space-between; color: #222; 
        font-weight: 600; font-size: 16px; text-decoration: none; border-radius: 10px;
    }

    /* REMOVE ONE ARROW: We hide the CSS arrow and keep your HTML arrow */
    .mega-menu-category-item.has-children > a::after {
        display: none !important; /* This removes the redundant CSS arrow */
    }

    /* Style the remaining HTML arrow */
    .mega-menu-category-item .arrow { transition: transform 0.3s; color: #ccc; font-size: 14px; }
    .mega-menu-category-item.active .arrow { transform: rotate(90deg); color: #00A9F4; }
    .mega-menu-category-item.active > a { background: #f0f9ff; color: #00A9F4; }

    .mega-menu-subcategories { display: none; background: #fafafa; border-radius: 0 0 10px 10px; margin: 0 5px 10px; }
    
    .subcategories-list li a {
        display: block !important; padding: 14px 20px 14px 40px !important;
        color: #666; font-size: 15px; text-decoration: none; border-bottom: 1px solid #f0f0f0;
    }

    .close-floating-btn { position: fixed; top: 20px; right: 15px; width: 44px; height: 44px; background: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 1001; box-shadow: 0 8px 20px rgba(0,0,0,0.2); }
}