/**
 * Quick Menu No Background
 * Remove all background colors except button backgrounds
 */

@media (min-width: 768px) {
    /* Remove all backgrounds from quick-menu-bar container */
    html body .quick-menu-bar {
        background: none !important;
        background-color: transparent !important;
        background-image: none !important;
        border: none !important;
        border-top: none !important;
        border-bottom: none !important;
        box-shadow: none !important;
    }
    
    /* Remove background from wrapper */
    html body .quick-menu-bar .menu-wrapper {
        background: transparent !important;
        background-color: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }
    
    /* Remove background from container */
    html body .quick-menu-bar .container {
        background: transparent !important;
        background-color: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }
    
    /* Remove background from quick-menu nav */
    html body .quick-menu {
        background: transparent !important;
        background-color: transparent !important;
        border: none !important;
    }
    
    /* Keep the button backgrounds with their gradients */
    /* Just ensure they stand out without container background */
    html body .quick-menu-item {
        /* Keep existing gradient backgrounds */
        box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
    }
    
    html body .quick-menu-item:hover {
        box-shadow: 0 4px 12px rgba(0,0,0,0.25) !important;
    }
    
    /* Optional: Add subtle spacing between menu and content */
    html body .quick-menu-bar {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }
    
    /* Ensure the site background shows through */
    html body .quick-menu-bar::before,
    html body .quick-menu-bar::after {
        background: transparent !important;
        display: none !important;
    }
}

/* Mobile - keep hidden */
@media (max-width: 767px) {
    .quick-menu-bar {
        display: none !important;
    }
}