/* ============================================================
   Mobile Filter Drawer — collapsible filter bars on phones.

   Wrap a heavy filter bar with:

     <details class="mfd">
       <summary class="mfd-summary">
         <i class="fas fa-filter"></i>
         <span>Filters</span>
         <span class="mfd-count"></span>
       </summary>
       <div class="mfd-body" style="display:flex; ...original styles...">
         ...original filter controls...
       </div>
     </details>

   On desktop the <summary> is hidden and the body is forced
   visible (with display:flex) so the layout is unchanged. On
   phones the summary becomes a tap-to-expand button and the body
   is collapsed by default. Page-level JS updates `.mfd-count`
   with the active filter count (e.g. "(3 active)").
   ============================================================ */

details.mfd { margin: 0; padding: 0; }
details.mfd > summary.mfd-summary { display: none; }

@media (min-width: 769px) {
    /* Force the body visible on desktop regardless of [open] state. */
    details.mfd > .mfd-body { display: flex !important; }
}

@media (max-width: 768px) {
    details.mfd { margin-bottom: 10px; }
    details.mfd > summary.mfd-summary {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        min-height: 44px;
        padding: 10px 14px;
        background: rgba(255, 255, 255, 0.7);
        backdrop-filter: blur(12px);
        border: 1px solid rgba(0, 0, 0, 0.08);
        border-radius: 12px;
        font-size: 13px;
        font-weight: 700;
        color: #1d1d1f;
        cursor: pointer;
        list-style: none;
        user-select: none;
        -webkit-tap-highlight-color: transparent;
    }
    details.mfd > summary.mfd-summary::-webkit-details-marker { display: none; }
    details.mfd > summary.mfd-summary::after {
        content: "\f078"; /* fa-chevron-down */
        font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome";
        font-weight: 900;
        margin-left: auto;
        font-size: 11px;
        color: #86868b;
        transition: transform 0.18s ease;
    }
    details.mfd[open] > summary.mfd-summary::after { transform: rotate(180deg); }
    details.mfd > summary.mfd-summary .mfd-count:empty { display: none; }
    details.mfd > summary.mfd-summary .mfd-count {
        background: rgba(0, 122, 255, 0.12);
        color: #007aff;
        font-size: 11px;
        font-weight: 700;
        padding: 2px 8px;
        border-radius: 8px;
    }
    details.mfd[open] > .mfd-body { animation: mfdSlideIn 0.18s ease-out; }
}

@keyframes mfdSlideIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}