/* ============================================================
   BWS Filter Presets — bws-filter-presets.css
   Horizontal pill-style filter bar for Brand Work Solutions
   ============================================================ */

:root {
    --bws-bar-bg:        #ffffff;
    --bws-bar-border:    #e2e2e2;
    --bws-btn-bg:        #f5f5f5;
    --bws-btn-border:    #d0d0d0;
    --bws-btn-text:      #1a1a1a;
    --bws-btn-hover-bg:  #ebebeb;
    --bws-active-bg:     #1a1a1a;
    --bws-active-text:   #ffffff;
    --bws-active-border: #1a1a1a;
    --bws-accent:        #e87722;   /* BWS orange */
    --bws-chip-bg:       #fff3e8;
    --bws-chip-border:   #e87722;
    --bws-chip-text:     #c05e00;
    --bws-drop-bg:       #ffffff;
    --bws-drop-shadow:   0 6px 24px rgba(0,0,0,.12);
    --bws-drop-border:   #e2e2e2;
    --bws-item-hover:    #f8f8f8;
    --bws-check-border:  #c0c0c0;
    --bws-check-active:  #1a1a1a;
    --bws-radius:        6px;
    --bws-radius-lg:     10px;
    --bws-font:          inherit;
    --bws-track-bg:      #e0e0e0;
    --bws-track-fill:    #1a1a1a;
    --bws-range-thumb:   #1a1a1a;
}

/* ── Bar wrapper ── */
.bws-filter-bar {
    background:    var(--bws-bar-bg);
    border-top:    1px solid var(--bws-bar-border);
    border-bottom: 1px solid var(--bws-bar-border);
    padding:       10px 0;
    margin-bottom: 24px;
    position:      relative;
    z-index:       100;
    width:         100%;
    box-sizing:    border-box;
}

.bws-filter-inner {
    max-width:   1400px;
    margin:      0 auto;
    padding:     0 20px;
    display:     flex;
    flex-direction: column;
    gap:         8px;
}

/* ── Active chips row ── */
.bws-active-chips {
    display:     flex;
    flex-wrap:   wrap;
    align-items: center;
    gap:         6px;
}

.bws-chip {
    display:        inline-flex;
    align-items:    center;
    gap:            5px;
    padding:        4px 10px;
    border-radius:  20px;
    font-size:      12px;
    font-weight:    500;
    white-space:    nowrap;
}

.bws-chip--active {
    background:    var(--bws-chip-bg);
    border:        1px solid var(--bws-chip-border);
    color:         var(--bws-chip-text);
}

.bws-chip-remove {
    color:          var(--bws-chip-text);
    text-decoration: none;
    font-size:      14px;
    line-height:    1;
    font-weight:    600;
    opacity:        .7;
    transition:     opacity .15s;
}
.bws-chip-remove:hover { opacity: 1; color: var(--bws-chip-text); }

.bws-clear-all {
    font-size:      12px;
    color:          #666;
    text-decoration: underline;
    margin-left:    4px;
}
.bws-clear-all:hover { color: #1a1a1a; }

/* ── Filter groups row ── */
.bws-filter-groups {
    display:     flex;
    flex-wrap:   wrap;
    align-items: center;
    gap:         8px;
}

/* ── Individual filter group ── */
.bws-filter-group {
    position: relative;
}

/* ── Trigger button ── */
.bws-filter-btn {
    display:        inline-flex;
    align-items:    center;
    gap:            6px;
    padding:        7px 12px;
    background:     var(--bws-btn-bg);
    border:         1px solid var(--bws-btn-border);
    border-radius:  var(--bws-radius);
    font-family:    var(--bws-font);
    font-size:      13px;
    font-weight:    500;
    color:          var(--bws-btn-text);
    cursor:         pointer;
    white-space:    nowrap;
    transition:     background .15s, border-color .15s;
    line-height:    1.4;
}

.bws-filter-btn:hover,
.bws-filter-group--open .bws-filter-btn {
    background:   var(--bws-btn-hover-bg);
    border-color: #b0b0b0;
}

.bws-filter-group--active .bws-filter-btn {
    background:   var(--bws-active-bg);
    border-color: var(--bws-active-border);
    color:        var(--bws-active-text);
}

.bws-filter-btn__label { order: 0; }

.bws-filter-btn__count {
    display:       inline-flex;
    align-items:   center;
    justify-content: center;
    min-width:     18px;
    height:        18px;
    padding:       0 4px;
    background:    var(--bws-accent);
    color:         #fff;
    border-radius: 10px;
    font-size:     11px;
    font-weight:   700;
    line-height:   1;
}

.bws-filter-group--active .bws-filter-btn__count {
    background: var(--bws-accent);
    color:      #fff;
}

.bws-filter-btn__sub {
    font-size:  11px;
    opacity:    .65;
    font-weight: 400;
}

.bws-caret {
    width:       9px;
    height:      9px;
    transition:  transform .2s;
    flex-shrink: 0;
}
.bws-filter-group--open .bws-caret {
    transform: rotate(180deg);
}
.bws-filter-group--active .bws-caret {
    stroke: currentColor;
}

/* ── Dropdown panel ── */
.bws-filter-dropdown {
    position:      absolute;
    top:           calc(100% + 6px);
    left:          0;
    z-index:       9999;
    min-width:     220px;
    max-width:     280px;
    background:    var(--bws-drop-bg);
    border:        1px solid var(--bws-drop-border);
    border-radius: var(--bws-radius-lg);
    box-shadow:    var(--bws-drop-shadow);
    overflow:      hidden;
}

/* Prevent the rightmost dropdowns from going off-screen */
.bws-filter-group:last-child .bws-filter-dropdown,
.bws-filter-group:nth-last-child(2) .bws-filter-dropdown {
    left: auto;
    right: 0;
}

.bws-filter-dropdown[hidden] { display: none !important; }

.bws-filter-dropdown__inner {
    padding: 10px 0;
}

/* ── Search box inside dropdown ── */
.bws-filter-search {
    display:     block;
    width:       calc(100% - 24px);
    margin:      4px 12px 8px;
    padding:     6px 10px;
    border:      1px solid var(--bws-drop-border);
    border-radius: 5px;
    font-size:   13px;
    outline:     none;
    box-sizing:  border-box;
}
.bws-filter-search:focus {
    border-color: var(--bws-accent);
    box-shadow:   0 0 0 2px rgba(232,119,34,.15);
}

/* ── Term list ── */
.bws-filter-list {
    list-style:  none;
    margin:      0;
    padding:     0;
    max-height:  240px;
    overflow-y:  auto;
}

.bws-filter-list::-webkit-scrollbar { width: 4px; }
.bws-filter-list::-webkit-scrollbar-thumb { background: #ccc; border-radius: 2px; }

.bws-filter-item { margin: 0; padding: 0; }

.bws-filter-link {
    display:        flex;
    align-items:    center;
    gap:            9px;
    padding:        8px 14px;
    text-decoration: none;
    color:          var(--bws-btn-text);
    font-size:      13px;
    transition:     background .12s;
}
.bws-filter-link:hover,
.bws-filter-item--checked .bws-filter-link {
    background: var(--bws-item-hover);
    color:      var(--bws-btn-text);
}

/* Checkbox */
.bws-filter-checkbox {
    display:       flex;
    align-items:   center;
    justify-content: center;
    width:         16px;
    height:        16px;
    border:        1.5px solid var(--bws-check-border);
    border-radius: 3px;
    flex-shrink:   0;
    transition:    background .12s, border-color .12s;
}

.bws-filter-item--checked .bws-filter-checkbox {
    background:    var(--bws-check-active);
    border-color:  var(--bws-check-active);
}

.bws-filter-item--checked .bws-filter-checkbox::after {
    content:    '';
    display:    block;
    width:      9px;
    height:     5px;
    border-left:   2px solid #fff;
    border-bottom: 2px solid #fff;
    transform:  rotate(-45deg) translateY(-1px);
}

.bws-filter-name { flex: 1; }

.bws-filter-tally {
    font-size:  11px;
    color:      #999;
    flex-shrink: 0;
}

/* ── Price panel ── */
.bws-filter-dropdown--price {
    min-width: 240px;
}

.bws-price-panel {
    padding: 14px 16px 16px;
}

.bws-price-display {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             8px;
    font-size:       15px;
    font-weight:     600;
    margin-bottom:   14px;
}

.bws-price-dash { color: #aaa; font-weight: 400; }

.bws-range-wrap {
    position: relative;
    height:   26px;
    margin-bottom: 14px;
}

.bws-range-track {
    position:      absolute;
    top:           50%;
    left:          0;
    right:         0;
    height:        4px;
    background:    var(--bws-track-bg);
    border-radius: 2px;
    transform:     translateY(-50%);
    pointer-events: none;
    z-index:       0;
}

.bws-range-fill {
    position:      absolute;
    top:           0;
    height:        100%;
    background:    var(--bws-track-fill);
    border-radius: 2px;
}

.bws-range {
    position:   absolute;
    top:        50%;
    transform:  translateY(-50%);
    width:      100%;
    appearance: none;
    background: transparent;
    pointer-events: none;
    z-index:    1;
    cursor:     pointer;
    margin:     0;
}

.bws-range::-webkit-slider-thumb {
    appearance:    none;
    width:         18px;
    height:        18px;
    border-radius: 50%;
    background:    var(--bws-range-thumb);
    border:        2px solid #fff;
    box-shadow:    0 1px 4px rgba(0,0,0,.25);
    pointer-events: all;
    cursor:        grab;
}
.bws-range::-moz-range-thumb {
    width:         18px;
    height:        18px;
    border-radius: 50%;
    background:    var(--bws-range-thumb);
    border:        2px solid #fff;
    box-shadow:    0 1px 4px rgba(0,0,0,.25);
    pointer-events: all;
    cursor:        grab;
    appearance:    none;
}
.bws-range:active::-webkit-slider-thumb { cursor: grabbing; }
.bws-range:active::-moz-range-thumb     { cursor: grabbing; }

/* Apply button */
.bws-btn-primary {
    display:       block;
    width:         100%;
    padding:       9px;
    background:    var(--bws-active-bg);
    color:         #fff;
    border:        none;
    border-radius: var(--bws-radius);
    font-size:     13px;
    font-weight:   600;
    cursor:        pointer;
    text-align:    center;
    transition:    background .15s;
}
.bws-btn-primary:hover { background: #333; }

/* ── "Hidden" items in search filter ── */
.bws-filter-item[hidden] { display: none !important; }

/* ── Responsive ── */
@media (max-width: 768px) {
    .bws-filter-bar {
        padding: 8px 0;
    }

    .bws-filter-inner {
        padding: 0 12px;
    }

    .bws-filter-groups {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 2px;
    }

    .bws-filter-groups::-webkit-scrollbar { display: none; }

    .bws-filter-btn {
        font-size:   12px;
        padding:     6px 10px;
        white-space: nowrap;
    }

    .bws-filter-dropdown {
        min-width: 190px;
        max-width: 240px;
        position:  fixed;
        top:       auto !important;
        left:      0 !important;
        right:     0 !important;
        bottom:    0;
        max-height: 65vh;
        border-radius: var(--bws-radius-lg) var(--bws-radius-lg) 0 0;
        box-shadow: 0 -4px 24px rgba(0,0,0,.15);
        overflow-y: auto;
    }

    .bws-filter-dropdown__inner {
        padding: 12px 0 24px;
    }

    .bws-filter-list {
        max-height: none;
    }
}

@media (max-width: 480px) {
    .bws-filter-btn {
        font-size: 11px;
        padding:   5px 9px;
    }
}

/* ── Overlay backdrop (mobile) ── */
.bws-backdrop {
    display:    none;
    position:   fixed;
    inset:      0;
    background: rgba(0,0,0,.4);
    z-index:    9998;
}
.bws-backdrop--visible { display: block; }

/* ── Loading overlay ── */
.bws-filter-bar--loading::after {
    content:    '';
    position:   absolute;
    inset:      0;
    background: rgba(255,255,255,.6);
    z-index:    50;
    cursor:     wait;
}