/*
 * Category page filter styling.
 *
 * Linked from dusty/categories/subcategory.html. One responsive component, two
 * layouts (the switch is purely CSS, at Bootstrap's md / 768px):
 *   - desktop (>= 768px): pinned controls + an inline accordion of facet sections
 *   - mobile  (< 768px):  a slim pinned bar + an off-canvas drawer of the sections
 * The facets render as Bootstrap 4 toggle buttons (see CountedCheckboxSelectMultiple);
 * Bootstrap's own CSS (compiled into storm.css) hides the native checkbox and
 * provides the .btn / .active look. category.js owns the open/closed accordion and
 * drawer state and re-applies it after every AJAX re-render.
 */

/* --- Facet toggle buttons -------------------------------------------------- */
#category-filter-fields .btn-group-toggle.storm-filter-group {
    display: flex;
    flex-wrap: wrap;
    gap: .4em;
    align-items: center;
}

#category-filter-fields .storm-filter-btn {
    /* Larger, pill-shaped corners on the filter buttons. */
    border-radius: 1.3em;
}

#category-filter-fields .storm-filter-btn .storm-filter-count {
    margin-left: .4em;
}

/* Faceted dead-ends (count 0) are dimmed. */
#category-filter-fields .storm-filter-btn.storm-filter-zero {
    opacity: .5;
}

/* An unselected dead-end is disabled outright (its checkbox carries `disabled`);
   block interaction on the wrapping button too. A *selected* dead-end stays
   enabled so it can still be cleared. */
#category-filter-fields .storm-filter-btn.disabled {
    pointer-events: none;
    cursor: not-allowed;
}

/* --- Container ------------------------------------------------------------- */
#category-filter-fields {
    display: block;
    text-align: left;
}

.storm-filter-heading {
    text-align: left;
}

/* --- Pinned controls (always visible: women toggle, store, price) ---------- */
.storm-filter-pinned {
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem 2rem;
    align-items: flex-end;
    text-align: left;
}

.storm-filter-pinned-control h4 {
    margin: 0 0 .35rem;
}

.storm-filter-pinned .storm-filter-select select {
    min-width: 200px;
}

.storm-filter-pinned .storm-filter-price {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1 1 280px;
    min-width: 240px;
    max-width: 420px;
}

.storm-filter-pinned .storm-filter-price p {
    margin: .35rem 0 .1rem;
    font-weight: 600;
}

/* noUiSlider, restyled from its default (chunky square handles + teal track) to
   a slim on-brand control. Tooltips are off (see category.js), so no headroom
   hack is needed — the value readout lives in the <p> above. */
#category-filter-fields #price {
    width: 100%;
    margin: .9rem 0 .3rem;
}
#category-filter-fields #price.noUi-target {
    height: 5px;
    border: none;
    box-shadow: none;
    background: #d9dde1;
    border-radius: 999px;
}
#category-filter-fields #price .noUi-connect {
    background: #BD0020;   /* brand red, matching the facet chips/badges */
}
#category-filter-fields #price .noUi-handle {
    width: 15px;
    height: 15px;
    right: -7px;           /* centre the handle on the track end */
    top: -5.5px;
    border: 1px solid #b7bbbf;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .28);
    cursor: pointer;
}
/* Drop noUiSlider's default grip lines inside the handle. */
#category-filter-fields #price .noUi-handle::before,
#category-filter-fields #price .noUi-handle::after {
    display: none;
}
/* Single-price (disabled) state: mute the track so it reads as inert. */
#category-filter-fields #price[disabled] .noUi-connect {
    background: #c2c6ca;
}

/* --- Accordion sections ---------------------------------------------------- */
.storm-filter-section {
    border-bottom: 1px solid #dcdfe2;
    position: relative;   /* anchor the (i) info overlay onto the title row */
}

.storm-filter-section-head {
    width: 100%;
    display: flex;
    align-items: center;
    gap: .6em;
    padding: .85rem .25rem;
    background: none;
    border: none;
    font-size: 1rem;
    font-weight: 600;
    text-align: left;
    color: inherit;
    cursor: pointer;
}

.storm-filter-section-name {
    flex: 1;
}

.storm-filter-section-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5em;
    height: 1.4em;
    padding: 0 .4em;
    font-size: .72em;
    font-weight: 700;
    line-height: 1;
    border-radius: 999px;
    background: #BD0020;
    color: #fff;
}

/* CSS caret; rotates down when the section is open. */
.storm-filter-chevron {
    width: .55em;
    height: .55em;
    margin-right: .2em;
    border-right: 2px solid #777;
    border-bottom: 2px solid #777;
    transform: rotate(-45deg);
    transition: transform .15s ease;
}

.storm-filter-section.is-open .storm-filter-chevron {
    transform: rotate(45deg);
}

/* Exhausted facet: kept in place so the accordion doesn't reshuffle, but greyed,
   collapsed and inert (no chevron, no expanding). See _filter_section.html. */
.storm-filter-section.is-disabled .storm-filter-section-head {
    color: #adb2b8;
    cursor: default;
    pointer-events: none;
}

.storm-filter-section.is-disabled .storm-filter-chevron {
    display: none;
}

.storm-filter-section.is-disabled .storm-filter-section-body {
    display: none;
}

.storm-filter-section-body {
    padding: .2rem .25rem 1rem;
}

/* --- Size-section info popover --------------------------------------------- */
/* A small (i) icon overlaid on the section title row (right side), shown only
   while the section is open and nothing is selected yet (so it never competes
   with the count badge for the right edge). Hovering or focusing it reveals a
   help bubble. It sits outside the header <button>, so tapping it reveals the
   help without toggling the section. CSS-only so it survives the AJAX form-body
   swaps (no re-init). */
.storm-filter-section-info {
    position: absolute;
    top: .85rem;          /* align with .storm-filter-section-head top padding */
    right: 1.7em;         /* sit just left of the chevron */
    display: none;
    line-height: 1;
    z-index: 1;
}
.storm-filter-section.is-open[data-selected="0"] .storm-filter-section-info {
    display: inline-block;
}
.storm-filter-info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.3em;
    height: 1.3em;
    border: 1px solid #777;
    border-radius: 50%;
    font-size: .8rem;
    font-family: Georgia, 'Times New Roman', serif;
    font-style: italic;
    font-weight: 700;
    line-height: 1;
    color: #555;
    cursor: help;
}
.storm-filter-info-bubble {
    position: absolute;
    right: 0;             /* open leftwards; the icon hugs the panel's right edge */
    top: calc(100% + .35em);
    z-index: 20;
    width: min(280px, 82vw);
    padding: .55rem .7rem;
    background: #333;
    color: #fff;
    font-size: .82rem;
    font-weight: 400;
    line-height: 1.35;
    border-radius: .35em;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
    opacity: 0;
    visibility: hidden;
    transition: opacity .12s ease;
}
.storm-filter-section-info:hover .storm-filter-info-bubble,
.storm-filter-info-icon:focus + .storm-filter-info-bubble {
    opacity: 1;
    visibility: visible;
}

/* --- "All filters" trigger (mobile drawer + desktop toggle) ---------------- */
.storm-filter-drawer-trigger {
    display: none;
}
/* The trigger chevron reflects the desktop inline-accordion open/closed state;
   hidden on mobile, where the trigger opens the off-canvas drawer instead. */
.storm-filter-trigger-chevron {
    display: none;
}

/* --- Desktop: inline accordion collapsed behind the "All filters" toggle ---- */
@media (min-width: 768px) {
    /* On desktop the trigger toggles the inline accordion (collapsed by default);
       category.js flips .is-expanded on both the trigger and the panel. */
    .storm-filter-drawer-trigger {
        display: inline-flex;
        align-items: center;
        gap: .6em;
        margin-top: 1.2rem;
        padding: .55em 1.1em;
        border: 1px solid #999;
        border-radius: .4em;
        background: #fff;
        font-weight: 600;
        cursor: pointer;
    }
    .storm-filter-collapsible {
        margin-top: 1.4rem;
        border-top: 1px solid #dcdfe2;
    }
    /* Collapsed until category.js reveals it. */
    .storm-filter-collapsible:not(.is-expanded) {
        display: none;
    }
    .storm-filter-drawer-overlay,
    .storm-filter-drawer-head,
    .storm-filter-drawer-foot {
        display: none;
    }
    /* Down when collapsed, up when expanded. */
    .storm-filter-trigger-chevron {
        display: inline-block;
        width: .5em;
        height: .5em;
        margin-left: .1em;
        border-right: 2px solid #555;
        border-bottom: 2px solid #555;
        transform: rotate(45deg);
        transition: transform .15s ease;
    }
    .storm-filter-drawer-trigger.is-expanded .storm-filter-trigger-chevron {
        transform: rotate(-135deg);
    }
}

/* --- Mobile: off-canvas drawer --------------------------------------------- */
@media (max-width: 767.98px) {
    /* Stack the main (pinned) filters full-width, one per row, instead of
       letting them shrink/float to the right as flex items. */
    .storm-filter-pinned {
        flex-direction: column;
        align-items: stretch;
        gap: .7rem;
    }
    .storm-filter-pinned-control {
        width: 100%;
    }
    /* Tighten the verbose section heading + control labels so the pinned bar
       doesn't eat half the first screen before any product shows. The ID prefix
       is needed to out-rank `.category-options h3 { font-size: 20px }` in storm.css. */
    #category-options .storm-filter-heading {
        font-size: .95rem;
        line-height: 1.25;
        margin-bottom: .45rem;
    }
    .storm-filter-pinned-control h4 {
        font-size: 1rem;
        margin-bottom: .25rem;
    }
    /* Drop the desktop width caps so each control spans the row. */
    .storm-filter-pinned .storm-filter-select select {
        min-width: 0;
        width: 100%;
    }
    .storm-filter-pinned .storm-filter-price {
        max-width: none;
        min-width: 0;
        /* Column layout: the desktop `flex: 1 1 280px` basis is a *width* hint;
           left unset it becomes a 280px *height* here, leaving a huge void below
           the slider. Collapse to content height. */
        flex: 0 0 auto;
    }
    #category-filter-fields #price {
        margin-top: .8rem;
    }

    .storm-filter-drawer-trigger {
        display: inline-flex;
        align-items: center;
        gap: .6em;
        margin-top: 1rem;
        padding: .7em 1.1em;
        border: 1px solid #999;
        border-radius: .4em;
        background: #fff;
        font-weight: 600;
        cursor: pointer;
    }

    .storm-filter-collapsible {
        position: fixed;
        inset: 0;
        z-index: 1050;
        visibility: hidden;
    }
    .storm-filter-collapsible.is-open {
        visibility: visible;
    }

    .storm-filter-drawer-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, .42);
        opacity: 0;
        transition: opacity .2s ease;
    }
    .storm-filter-collapsible.is-open .storm-filter-drawer-overlay {
        opacity: 1;
    }

    .storm-filter-drawer-panel {
        position: fixed;
        /* Start below the fixed-top nav (storm.css forces it to
           z-index:99999 !important, above this drawer), so the drawer head is
           fully visible. Mirrors the body/.modal offset for this viewport range. */
        top: calc(8em + var(--extranavheight, 0px) + var(--stickynotifyheight, 0px) - 1px);
        right: 0;
        bottom: 0;
        width: min(420px, 90vw);
        display: flex;
        flex-direction: column;
        background: #fff;
        box-shadow: -8px 0 24px rgba(0, 0, 0, .18);
        transform: translateX(100%);
        transition: transform .25s ease;
    }
    .storm-filter-collapsible.is-open .storm-filter-drawer-panel {
        transform: translateX(0);
    }

    .storm-filter-drawer-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1rem 1.1rem;
        border-bottom: 1px solid #ddd;
    }
    .storm-filter-drawer-head h3 {
        margin: 0;
    }
    .storm-filter-drawer-close {
        background: none;
        border: none;
        font-size: 1.6rem;
        line-height: 1;
        cursor: pointer;
    }

    .storm-filter-drawer-body {
        flex: 1;
        overflow-y: auto;
        padding: 0 1.1rem;
    }

    .storm-filter-drawer-foot {
        display: flex;
        gap: .8rem;
        padding: 1rem 1.1rem;
        border-top: 1px solid #ddd;
    }
    .storm-filter-drawer-clear {
        flex: 0 0 auto;
        padding: .7em 1em;
        border: 1px solid #999;
        border-radius: .4em;
        background: #fff;
        cursor: pointer;
    }
    .storm-filter-drawer-apply {
        flex: 1;
        padding: .7em 1em;
        border: none;
        border-radius: .4em;
        background: #BD0020;
        color: #fff;
        font-weight: 600;
        cursor: pointer;
    }
}

/* Scroll-lock the page while the drawer is open (toggled by category.js). */
body.storm-filter-drawer-open {
    overflow: hidden;
}

/*
 * Active-filter chips
 *
 * Rendered between the filter form and the product grid (category_filter.html),
 * one removable pill per current selection. Mirrors the pill shape of the facet
 * buttons; the X and the "clear all" link use the brand red (#BD0020).
 */
#category-active-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5em;
    text-align: left;
    padding: 1rem;
    margin-top: 1rem;
    border: 0.5px solid black;
}

#category-active-filters .storm-active-filters-label {
    font-weight: bold;
    margin-right: .25em;
}

#category-active-filters .storm-active-filter {
    display: inline-flex;
    align-items: center;
    gap: .45em;
    padding: .25em .85em;
    border: 1px solid #999;
    border-radius: 1.3em;
    background: #fff;
    font-size: .95em;
    /* line-height:1 on the pill and both children keeps each glyph's line-box
       tight so flex `align-items:center` truly centres the label with the ×. */
    line-height: 1;
    cursor: pointer;
}

#category-active-filters .storm-active-filter:hover {
    background: #f3f3f3;
}

#category-active-filters .storm-active-filter-text {
    line-height: 1;
}

#category-active-filters .storm-active-filter-remove {
    display: inline-flex;
    align-items: center;
    font-size: 1.15em;
    font-weight: bold;
    line-height: 1;
    color: #BD0020;
}

/* "Clear all filters" sits at the far end of the chip row. */
#category-active-filters .storm-active-filters-reset {
    margin-left: auto;
    color: #BD0020;
    font-weight: bold;
    text-decoration: underline;
    cursor: pointer;
}

/* --- bike_parts "Showing:" reset chip -------------------------------------- */
/* Restores the part-group reset removed with #category-options-reset. The chip
 * reuses the active-filter pill shape, but those rules are scoped under
 * #category-active-filters and this chip lives in the swapped-in grid, so the
 * pill styling is repeated self-contained here. */
.storm-showing {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5em;
    margin: 1rem 0;
}

.storm-showing .storm-showing-label {
    font-weight: bold;
}

.storm-showing .storm-active-filter {
    display: inline-flex;
    align-items: center;
    gap: .45em;
    padding: .25em .85em;
    border: 1px solid #999;
    border-radius: 1.3em;
    background: #fff;
    font-size: .95em;
    line-height: 1;
    cursor: pointer;
}

.storm-showing .storm-active-filter:hover {
    background: #f3f3f3;
}

.storm-showing .storm-active-filter-text {
    line-height: 1;
}

.storm-showing .storm-active-filter-remove {
    display: inline-flex;
    align-items: center;
    font-size: 1.15em;
    font-weight: bold;
    line-height: 1;
    color: #BD0020;
}