/* Professional Filter Button with Modern Arrow Tab Design */

@media (max-width: 768px) {

    .sidebar-toggle-btn,
    #sidebarToggle {
        position: fixed !important;
        left: 0 !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 100 !important;
        background: linear-gradient(135deg, #c24242 0%, #8a2e2e 100%) !important;
        color: #fff !important;
        border: none !important;
        padding: 1.25rem 0.875rem !important;
        padding-right: 1.25rem !important;
        border-radius: 0 12px 12px 0 !important;
        box-shadow: 3px 0 15px rgba(194, 66, 66, 0.4) !important;
        cursor: pointer !important;
        transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
        min-width: 65px !important;
    }

    /* Animated arrow pointer from button */
    .sidebar-toggle-btn::after,
    #sidebarToggle::after {
        content: '' !important;
        position: absolute !important;
        right: -15px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 0 !important;
        height: 0 !important;
        border-left: 15px solid #8a2e2e !important;
        border-top: 12px solid transparent !important;
        border-bottom: 12px solid transparent !important;
        transition: all 0.3s ease !important;
    }

    /* Subtle glow effect */
    .sidebar-toggle-btn::before,
    #sidebarToggle::before {
        content: '' !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, transparent 100%) !important;
        border-radius: 0 12px 12px 0 !important;
        pointer-events: none !important;
    }

    .sidebar-toggle-btn:hover,
    #sidebarToggle:hover {
        left: -3px !important;
        padding-right: 1.5rem !important;
        box-shadow: 4px 0 20px rgba(194, 66, 66, 0.6) !important;
    }

    .sidebar-toggle-btn:hover::after,
    #sidebarToggle:hover::after {
        right: -18px !important;
        border-left-width: 18px !important;
    }

    /* Icon styling */
    .sidebar-toggle-btn .filter-icon,
    #sidebarToggle .filter-icon {
        display: flex !important;
        flex-direction: column !important;
        gap: 4px !important;
        animation: pulse 2s ease-in-out infinite !important;
    }

    .sidebar-toggle-btn .filter-icon span,
    #sidebarToggle .filter-icon span {
        display: block !important;
        width: 24px !important;
        height: 3px !important;
        background: #fff !important;
        border-radius: 2px !important;
    }

    .sidebar-toggle-btn .btn-text,
    #sidebarToggle .btn-text {
        font-size: 0.688rem !important;
        font-weight: 700 !important;
        letter-spacing: 1px !important;
    }
}

@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }
}