@media screen
{
    .video-filter-bar /* holds space to minimize redrawing of elements on page; item may be unneeded due to filter-row class */
    {
        /* min-height: 35px;
        margin: 1rem 20% 2rem; */
    }
    
    .filter-row /* centers filters on page */
    {
        display: flex;
        justify-content: flex-start; /* Centers items horizontally */
        flex-wrap: wrap;
        align-items: center;     /* Centers items vertically */
        gap: 20px;               /* Adds space between the three divs */
        min-height: 35px;
        margin: 1rem 0 2rem;
    }
    
    div.micro-content-proxy /* holds space to prevent reflow */
    {
        min-height: 100px;
    }
    
    .filter-container /* Container for alignment */
    {
        position: relative;
        display: inline-block;
        margin-right: 10px;
    }
    
    .filter-btn /* Filter Button Styling */
    {
        width: 10rem;
        /* Fixed width */
        background-color: #000;
        /* Black background */
        color: #fff;
        /* White font color */
        font-weight: bold;
        /* Bold font */
        text-align: left;
        /* Left aligned text */
        padding: 10px 15px;
        /* Padding for space */
        border: none;
        cursor: pointer;
        position: relative;
        /* Needed for absolute arrow positioning */
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }
    
    .filter-btn::after /* Filter Dropdown Arrow (CSS Triangle) */
    {
        content: "";
        position: absolute;
        right: 12px;
        /* Position on the right side */
        top: 50%;
        transform: translateY(-50%) rotate(0deg);
        /* Initial state */
        transition: transform 0.2s ease-in-out;
        /* Smooth rotation animation */

        /* Creates a small downward triangle */
        width: 0;
        height: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 6px solid #fff;
        /* Arrow color matches font */
        pointer-events: none;
    }
    
    .filter-dropdown /* Filter Dropdown Menu Adjustments */
    {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 1000;
        /* Matches the 10rem width of the button */
        /* width: 100%;                 */
        width: max-content;
        box-sizing: border-box;
        background: #fff;
        border: 1px solid #000;
        padding: 12px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .filter-dropdown.is-open
    {
        display: block;
    }
    
    .filter-options-list /* List styling inside dropdown */
    {
        max-height: 200px;
        overflow-y: auto;
        /* margin: 8px 0; */
    }

    .filter-option
    {
        display: block;
        padding: 0 0 10px;
        font-size: 0.9rem;
        cursor: pointer;
    }
    
    .filter-btn::after /* 1. Base Arrow Style (Add transition for smoothness) */
    {
        content: "";
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%) rotate(0deg);
        /* Initial state */
        transition: transform 0.2s ease-in-out;
        /* Smooth rotation animation */

        width: 0;
        height: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 6px solid #fff;
        pointer-events: none;
    }

    /* 2. Rotation on Hover (since hover opens the menu) */
    /* .filter-container:hover .filter-btn::after {
    transform: translateY(-50%) rotate(180deg);
    } */

    /* 3. Rotation when Open via Click (using the class your JS toggles) */
    .filter-dropdown.is-open ~ .filter-btn::after,
    .filter-btn:has(+ .filter-dropdown.is-open)::after
    {
        transform: translateY(-50%) rotate(180deg);
    }

    /* Simplified approach: Rotate whenever the dropdown is visible */
    /* .filter-container:has(.is-open) .filter-btn::after {
    transform: translateY(-50%) rotate(180deg);
} */

}