/* ================================
   RANGE SLIDER
================================ */

.ts-range-slider{
    margin-bottom:20px;
}

.ts-slider-ui{
    position:relative;
    height:36px;
}
input[type=range]{
    border: none!important;
}
/* inputs */
.ts-slider-ui input{
    position:absolute;
    top:50%;
    left:0;
    width:100%;
    height:36px;
    transform:translateY(-50%);
    pointer-events:none;
    background:none;
    -webkit-appearance:none;
    z-index:2;
}

/* hide native tracks */
.ts-slider-ui input::-webkit-slider-runnable-track{
    height:4px;
    background:transparent;
}
.ts-slider-ui input::-moz-range-track{
    height:4px;
    background:transparent;
}

/* thumbs */
.ts-slider-ui input::-webkit-slider-thumb{
    pointer-events:auto;
    -webkit-appearance:none;
    width:16px;
    height:16px;
    background:#111;
    border-radius:50%;
    cursor:pointer;
    position:relative;
    top:50%;
    transform:translateY(-50%);
}

.ts-slider-ui input::-moz-range-thumb{
    pointer-events:auto;
    width:16px;
    height:16px;
    background:#111;
    border-radius:50%;
    border:none;
    cursor:pointer;
}

/* custom track */
.ts-slider-ui .track{
    position:absolute;
    top:50%;
    left:0;
    right:0;
    height:4px;
    background:#ddd;
    transform:translateY(-50%);
    border-radius:4px;
    z-index:1;
}

/* selected range */
.ts-slider-ui .range{
    position:absolute;
    top:50%;
    height:4px;
    background:#111;
    transform:translateY(-50%);
    border-radius:4px;
    z-index:2;
}


/* values */
.ts-values{
    font-size:13px;
    margin-top:6px;
    color:#444;
}

/* ================================
   FILTER LAYOUT
================================ */

.ts_filters{
    background:#fff;
    padding:16px;
    border-radius:12px;
    box-shadow:0 4px 20px rgba(0,0,0,.05);
    display:flex;
    flex-direction:column;
    gap:18px;
    font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

.ts-filter ul{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:8px;
}

.ts-filter li{
    font-size:14px;
}

.ts-filter label{
    display:flex;
    align-items:center;
    gap:8px;
    cursor:pointer;
}

.ts-filter input[type="checkbox"]{
    width:16px;
    height:16px;
    accent-color:#111;
}

/* ================================
   SEARCH + BUTTONS
================================ */

.ts-search{
    width:100%;
    padding:10px 12px;
    border-radius:8px;
    border:1px solid #ddd;
    font-size:14px;
}

.ts-reset{
    margin-top:10px;
    background:#f3f3f3;
    border:none;
    padding:10px;
    border-radius:8px;
    cursor:pointer;
    font-size:14px;
}

.ts-more{
    background:none;
    border:none;
    color:#000;
    cursor:pointer;
    margin-top:6px;
    padding:0;
    font-size:13px;
    text-decoration:underline;
}

/* ================================
   MOBILE FILTER DRAWER
================================ */

.ts-close{
    display:none;
    position:sticky;
    top:0;
    background:#fff;
    border:none;
    font-size:22px;
    float:right;
    padding:8px;
    cursor:pointer;
    z-index:2;
}

/* overlay */
.ts-overlay{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.4);
    z-index:9998;
}

.ts-overlay.active{
    display:block;
}

/* floating button */
.ts-open-filters{
    display:none;
    position:fixed;
    bottom:20px;
    left:50%;
    transform:translateX(-50%);
    background:#111;
    color:#fff;
    border:none;
    padding:14px 22px;
    border-radius:999px;
    font-size:14px;
    font-weight:600;
    box-shadow:0 8px 30px rgba(0,0,0,.25);
    z-index:10000;
    cursor:pointer;
}

@media(max-width:768px){
    .ts-open-filters{display:block;}
    .ts-close{display:block;}

    .ts_filters{
        position:fixed;
        bottom:0;
        left:0;
        right:0;
        max-height:85vh;
        overflow:auto;
        border-radius:16px 16px 0 0;
        transform:translateY(100%);
        transition:.35s ease;
        z-index:9999;
    }

    .ts_filters.active{
        transform:translateY(0);
    }
}

/* ================================
   PRODUCT GRID LOADER
================================ */

.col-md-9{
    position:relative;
}

.col-md-9.ts-loading::after{
    content:"";
    position:absolute;
    inset:0;
    background:rgba(255,255,255,.75);
    z-index:50;
    backdrop-filter:blur(2px);
}

.col-md-9.ts-loading::before{
    content:"";
    position:absolute;
    top:50%;
    left:50%;
    width:36px;
    height:36px;
    margin:-18px;
    border-radius:50%;
    border:3px solid #ccc;
    border-top-color:#111;
    animation:ts-spin .8s linear infinite;
    z-index:51;
}

@keyframes ts-spin{
    from{transform:rotate(0deg);}
    to{transform:rotate(360deg);}
}