/* ======================================================
   SCIBITS FILTER SECTION - FINAL COMPACT FIXED
====================================================== */

.sbx-filter-section{
    width:100%;
    max-width:1320px;
    margin:18px auto 24px !important;
    padding:0 !important;
    position:relative;
    z-index:20;
    scroll-margin-top:140px;
}

.sbx-filter-panel{
    width:100%;
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:10px;
    padding:10px;
    border:1px solid #eee8fb;
    border-radius:22px;
    background:rgba(255,255,255,.9);
    box-shadow:0 16px 40px rgba(63,36,112,.07);
}




/* =========================================================
   FILTER BOX & MIRROR REFLECTION ANIMATION (Ultra-Slow & True Random)
========================================================= */

.sbx-filter-box {
    position: relative;
    min-width: 0;
    min-height: 58px !important;
    border: 1px solid #eee8fb;
    border-radius: 16px;
    background: #fbf9ff;
    transition: .22s ease;
    overflow: hidden;
}

.sbx-filter-box:hover,
.sbx-filter-box.has-selected {
    border-color: #dacbff;
    background: #fff;
    box-shadow: 0 8px 20px rgba(109,40,217,.08);
}

/* The Glass Glare Effect */
.sbx-filter-box::after {
    content: "";
    position: absolute;
    top: 0;
    left: -150%; 
    width: 65%;  
    height: 100%;
    
    background: linear-gradient(
        to right, 
        rgba(255, 255, 255, 0) 0%, 
        rgba(255, 255, 255, 0.9) 35%, 
        rgba(218, 203, 255, 0.45) 50%, 
        rgba(255, 255, 255, 0.9) 65%, 
        rgba(255, 255, 255, 0) 100%
    );
    
    transform: skewX(-25deg); 
    pointer-events: none; 
    z-index: 1; 
    
    /* MASSIVE 24s LOOP: Gives an enormous gap where boxes stay completely quiet */
    animation: mirror-shine 24s infinite linear; 
}

@keyframes mirror-shine {
    0% { 
        left: -150%; 
    }
    6% { 
        left: 250%; /* Glides extremely slowly over 1.4 seconds */
    }
    100% { 
        left: 250%; /* Stays completely off-screen for over 22 seconds */
    }
}

/* TRUE RANDOM DELAYS: Scrambled timing to completely eliminate repeating patterns */
.sbx-filter-box:nth-child(1)::after { animation-delay: 1.8s; }
.sbx-filter-box:nth-child(2)::after { animation-delay: 26.4s; }
.sbx-filter-box:nth-child(3)::after { animation-delay: 9.2s; }
.sbx-filter-box:nth-child(4)::after { animation-delay: 35s; }
.sbx-filter-box:nth-child(5)::after { animation-delay: 15s; }




/* Button */
.sbx-filter-toggle{
    width:100%;
    min-height:58px !important;
    position:relative;
    display:grid;
    grid-template-columns:24px 26px minmax(0,1fr) 14px;
    align-items:center !important;
    gap:10px;
    padding:10px 18px !important;
    border:0;
    background:transparent;
    cursor:pointer;
    text-align:left;	
}

/* Step */
.sbx-step{
    width:24px !important;
    height:24px !important;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    background:linear-gradient(135deg,#6d28d9,#7c3aed);
    color:#fff;
    font-size:12px !important;
    font-weight:800;
    flex-shrink:0;
}


/* Icon */

.sbx-results-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Uses your pink variable, or defaults to the pink hex code */
    color: var(--sbx-pink, #ec3f7a); 
    flex-shrink: 0;
}

.sbx-results-icon svg {
    width: 15px;
    height: 15px;
    fill: currentColor;
    animation: ambientFloat 4s ease-in-out infinite;
}

/* 
  transform-box: fill-box ensures that the scaling happens 
  from the exact center of each individual star, rather 
  than the center of the entire 50x50 SVG canvas.
*/
.sbx-star-primary,
.sbx-star-secondary {
    transform-origin: center;
    transform-box: fill-box; 
}

/* The big star pulses smoothly */
.sbx-star-primary {
    animation: premiumTwinkle 3s ease-in-out infinite;
}

/* The small star pulses with a delay, so they alternate */
.sbx-star-secondary {
    animation: premiumTwinkle 3s ease-in-out infinite;
    animation-delay: 1.5s; 
}

/* --- Keyframes --- */

@keyframes premiumTwinkle {
    0%, 100% {
        transform: scale(0.85);
        opacity: 0.6;
    }
    50% {
        transform: scale(1.1);
        opacity: 1;
    }
}

@keyframes ambientFloat {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        /* A micro-movement that makes the wrapper feel alive */
        transform: translateY(-1.5px);
    }
}

/* Text */
.sbx-filter-title{
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:2px !important;
}

.sbx-filter-title strong{
    font-size:13px !important;
    line-height:1.15 !important;
    font-weight:800;
    color:#22143f;
}

.sbx-filter-title small{
    font-size:11px !important;
    line-height:1.2 !important;
    font-weight:600;
    color:#6f6680;
}

/* Notification Badge */
.sbx-filter-count{
    position:absolute;
    top:6px;
    right:7px;
    min-width:18px;
    height:18px;
    padding:0 5px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    background:#ec3f7a;
    color:#fff;
    font-size:10px;
    font-weight:900;
    line-height:1;
    z-index:5;
}

.sbx-filter-count[data-count="0"]{
    display:none;
}

/* Chevron */
.sbx-filter-chevron{
    display:flex;
    align-items:center;
    justify-content:center;
    color:#8b7ca6;
    transition:.22s ease;
}

.sbx-filter-chevron svg{
    width:13px;
    height:13px;
}

.sbx-filter-box.is-open .sbx-filter-chevron{
    transform:rotate(180deg);
}

/* Backdrop - no blur */
.sbx-filter-backdrop{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(24,14,45,.55);
    z-index:999998;
}

body.sbx-filter-popup-open .sbx-filter-backdrop{
    display:block;
}

/* Popup */
.sbx-filter-popup{
    display:none;
}

.sbx-filter-popup.is-open{
    display:block !important;
    position:fixed !important;
    left:50% !important;
    top:50% !important;
    transform:translate(-50%,-50%) !important;
    width:min(430px,calc(100vw - 32px)) !important;
    padding:22px !important;
    max-height:72vh;
    overflow:auto;
    border-radius:24px;
    background:#fff;
    box-shadow:0 35px 100px rgba(20,8,48,.35);
    z-index:999999 !important;
}

/* Popup Header */
.sbx-filter-popup-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
    margin-bottom:20px !important;
}

.sbx-filter-popup-head span{
    display:block;
    margin-bottom:4px;
    font-size:10px;
    line-height:1;
    font-weight:900;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:#ec3f7a;
}

.sbx-filter-popup-head h3{
    margin:0;
    font-size:19px;
    line-height:1.15;
    font-weight:900;
    color:#22143f;
}

.sbx-filter-popup-close{
    width:34px;
    height:34px;
    border:0;
    border-radius:999px;
    background:#f7f2ff;
    color:#4b386c;
    font-size:20px;
    font-weight:700;
    cursor:pointer;
}

/* Options */
.sbx-filter-popup-options{
    display:flex;
    flex-direction:column;
    gap:11px !important;
}

.sbx-option{
    display:flex;
    align-items:center;
    padding:14px 15px !important;
    gap:13px !important;
    border-radius:15px !important;
    background:#f8f3ff;
    font-size:13px;
    font-weight:800;
    color:#4f4864;
    cursor:pointer;
    transition:.18s ease;
}

.sbx-option:hover{
    background:#f1e9ff;
}

.sbx-option input{
    width:17px !important;
    height:17px !important;
    accent-color:#6d28d9;
    flex-shrink:0;
}

.sbx-no-options{
    margin:0;
    padding:14px;
    border-radius:14px;
    background:#f8f3ff;
    font-size:13px;
    font-weight:700;
    color:#8b7ca6;
}

/* Tablet */
@media(max-width:1024px){
   
    .sbx-filter-section{
        margin:18px auto 24px !important;
        padding:0 14px !important;
        scroll-margin-top:130px !important;
    }

    .sbx-filter-panel{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:10px;
        padding:10px;
    }

    .sbx-filter-box,
    .sbx-filter-toggle{
        height:64px !important;
        min-height:64px !important;
        max-height:64px !important;
    }
}

/* Mobile */
@media(max-width:640px){
    
    .sbx-filter-section{
        margin:16px auto 22px !important;
        padding:0 12px !important;
        scroll-margin-top:140px !important;
    }

    .sbx-filter-panel{
        grid-template-columns:1fr;
        gap:10px;
        padding:10px;
        border-radius:20px;
    }

    .sbx-filter-box,
    .sbx-filter-toggle{
        height:64px !important;
        min-height:64px !important;
        max-height:64px !important;
    }

    .sbx-filter-popup.is-open{
        width:calc(100vw - 28px) !important;
        max-height:70vh;
        border-radius:22px;
    }
}








/* Keep filter panel below headers */
.sbx-filter-section,
.sbx-filter-panel{
    position:relative !important;
    z-index:1 !important;
}

/* Popup still above everything */
.sbx-filter-backdrop{
    z-index:100000 !important;
}

.sbx-filter-popup{
    z-index:100001 !important;
}





/* =========================================================
   RESULTS COUNTER
========================================================= */

/* =========================================================
   RESULTS COUNT
========================================================= */

/* =========================================================
   RESULTS COUNT
========================================================= */

.sbx-results-count{
    display:flex;
    align-items:center;
    gap:12px;

    margin:54px 10px 28px;

    color:#ec3f7a;

    font-size:23px;
    font-weight:800;

    line-height:1.2;

    letter-spacing:-0.02em;
}

.sbx-results-icon{
    display:flex;
    align-items:center;
    justify-content:center;

    flex-shrink:0;
}

.sbx-results-icon svg{
    width:26px;
    height:26px;

    fill:currentColor;
}

.sbx-results-text{
    color:inherit;
}





/* =========================================================
   LOAD MORE
========================================================= */

.sbx-loadmore-wrap{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;

    gap:10px;

    margin:36px 0 0;
}

.sbx-showing-count{
    font-size:14px;
    font-weight:600;

    color:#6b7280;

    letter-spacing:-0.01em;
}

.sbx-showing-count strong{
    color:#111827;
    font-weight:800;
}

.sbx-loadmore-btn{
    display:inline-flex;
    align-items:center;
    gap:6px;

    padding:0;

    border:none;
    background:none;

    color:#6d28d9;

    font-size:14px;
    font-weight:700;

    cursor:pointer;

    transition:.25s ease;
}

.sbx-loadmore-btn::before{
    content:"•";
    color:#d1d5db;
}

.sbx-loadmore-btn::after{
    content:"→";
    transition:.25s ease;
}

.sbx-loadmore-btn:hover::after{
    transform:translateX(3px);
}

.sbx-loadmore-wrap::after{
    content:"";

    flex-basis:100%;

    height:1px;

    margin-top:24px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(17,24,39,.08),
            transparent
        );
}