/* ===== Filter Sidebar (fs-*) ===== */
:root{
    --fs-border:#e5e7eb;
    --fs-muted:#6b7280;
    --fs-heading:#0f172a;
    --fs-bg:#ffffff;
    --fs-bg-soft:#f8fafc;
    --fs-radius:12px;
    --fs-gap:10px;
}

/* Layout visibility */
.fs-desktop-only{ display:none; }
@media (min-width: 992px){ .fs-desktop-only{ display:block; } }

/* Sidebar container */
.fs-sidebar{
    position: sticky; top: 18px;
    display: grid; gap: 18px;
}
 .-icon-close{
     padding: 10px;
     border: 1px solid var(--fs-border);
 }
/* Each section */
.fs-section{
    background: var(--fs-bg);
    border: 1px solid var(--fs-border);
    border-radius: var(--fs-radius);
    margin: 10px;
    padding: 14px 14px 12px;
}
.fs-section__title{
    font-size: 14px; font-weight: 700; color: var(--fs-heading);
    margin: 0 0 10px 0;
}

/* Lists */
.fs-list{
    display: grid; grid-template-columns: 1fr;
    gap: 8px;
}
.fs-list--scroll{
    max-height: 260px; overflow: auto; padding-right: 4px;
}
.fs-list--scroll::-webkit-scrollbar{ width: 8px; }
.fs-list--scroll::-webkit-scrollbar-thumb{ background:#d1d5db; border-radius: 8px; }

/* Items */
/* --- fs-item: keep content on one line and ellipsize text --- */
.fs-item{
    display:flex;
    align-items:center;
    gap:10px;
    padding:6px 8px;
    border-radius:8px;
    cursor:pointer;
    transition:background .15s ease;
    /* critical bits to avoid new lines: */
    white-space:nowrap;   /* never wrap to the next line */
    min-width:0;          /* allow the text to shrink within flex */
}
.fs-item:hover{ background:#f8fafc; }

.fs-item .fs-checkbox{
    flex:0 0 auto;        /* checkbox never shrinks */
    width:18px; height:18px; accent-color:#2563eb;
}

.fs-item__text{
    display:inline-block;
    min-width:0;          /* required for ellipsis in flex containers */
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;   /* keep one line only */
    line-height:1.2;
}

/* Optional: allow wrapping on very small screens only */
@media (max-width: 420px){
    .fs-item,
    .fs-item__text{
        white-space:normal;        /* allow wrap on tiny screens */
    }
    .fs-item__text{
        overflow:visible;
        text-overflow:clip;
    }
}


/* Checkbox (leave native, enhance size & focus) */
.fs-checkbox{
    width: 18px; height: 18px;
    accent-color: #2563eb;            /* modern browsers */
}
.fs-checkbox:focus-visible{
    outline: 2px solid #93c5fd; outline-offset: 2px;
}

/* Inputs (price) */
.fs-input-group{ display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fs-input{
    height: 40px; width: 100%;
    border: 1px solid var(--fs-border);
    border-radius: 8px; padding: 0 10px;
    background: #fff; outline: none;
    transition: border-color .12s ease, box-shadow .12s ease;
}
.fs-input::placeholder{ color: var(--fs-muted); }
.fs-input:focus{
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}

/* Spacing helpers just for this block */
.fs-mb-10{ margin-bottom: 10px; }
.fs-mb-12{ margin-bottom: 12px; }
.fs-mb-16{ margin-bottom: 16px; }

/* Compact labels (secondary text) */
.fs-label-muted{ color: var(--fs-muted); font-size: 12px; }

/* Optional subtle divider between sections (if needed) */
/* .fs-section + .fs-section{ margin-top: 4px; } */
/* ===== Main Search field styles (ms-*) ===== */
.ms-field{ display:flex; flex-direction:column; gap:6px; min-width:220px }
.ms-label{ font-size:12px; font-weight:700; color:#0f172a }
.ms-select{
    height:42px; padding:0 12px; border:1px solid #e1e5eb; border-radius:10px;
    background:#fff; outline:none; min-width:0;
    transition: border-color .12s ease, box-shadow .12s ease;
}
.ms-select:focus{ border-color:#2563eb; box-shadow:0 0 0 3px rgba(37,99,235,.15); }


/* ===== Main Search (ms-*) ===== */
:root{
    --ms-bg:#fff;
    --ms-border:#e5e7eb;
    --ms-border-strong:#d1d5db;
    --ms-muted:#6b7280;
    --ms-text:#0f172a;
    --ms-primary:#2563eb;
    --ms-primary-weak:rgba(37,99,235,.12);
    --ms-radius:12px;
    --ms-radius-sm:10px;
    --ms-shadow:0 8px 24px rgba(15,23,42,.06);
}

.ms{
    background: var(--ms-bg);
    border:1px solid var(--ms-border);
    border-radius: var(--ms-radius);
    padding: 16px;
    margin-top: 24px;
    box-shadow: var(--ms-shadow);
}

.ms__grid{
    display:grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

@media (min-width: 992px){
    .ms{ padding: 18px 20px 18px; }
    .ms__grid{
        grid-template-columns: 1.2fr 0.9fr 1.1fr auto;
        align-items: end;
        column-gap: 16px;
    }
}

/* Field */
.ms-field{ display:flex; flex-direction:column; gap:6px; }
.ms-label{
    font-size:12px; font-weight:700; color:var(--ms-text);
    letter-spacing:.02em;
}
.ms-help{ margin:4px 0 0; color:var(--ms-muted); font-size:12px }

/* Control (input wrapper) with icon */
.ms-control{
    position:relative; display:flex; align-items:center;
}
.ms-icon{
    position:absolute; right:10px; width:18px; height:18px; color:#64748b; pointer-events:none;
}

/* Inputs */
.ms-input{
    width:100%; height:44px;
    padding:0 36px 0 12px;
    background:#fff; color:var(--ms-text);
    border:1px solid var(--ms-border);
    border-radius: var(--ms-radius-sm);
    outline:none;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
    -webkit-appearance:none; appearance:none;
}
.ms-input::placeholder{ color:#94a3b8 }
.ms-input:focus{
    border-color: var(--ms-primary);
    box-shadow: 0 0 0 3px var(--ms-primary-weak);
}

/* Select */
.ms-select{
    background-image: none; /* hide native arrow */
    padding-right: 36px;
}

/* Actions (Reset) */
.ms-actions{ display:flex; align-items:end; justify-content:flex-end; }
.ms-btn{
    height:44px; display:inline-flex; align-items:center; gap:10px;
    padding:0 18px; border-radius: 999px; border:1px solid var(--ms-border-strong);
    font-weight:600; cursor:pointer; background:#f8fafc; color:#0f172a;
    transition: background .15s ease, transform .04s ease, box-shadow .15s ease;
}
.ms-btn:hover{ background:#eef2f7 }
.ms-btn:active{ transform: translateY(1px) }
.ms-btn__icon{ width:18px; height:18px }

.ms-btn--primary{
    background:#1b6aff; border-color:#1b6aff; color:#fff;
}
.ms-btn--primary:hover{ filter:brightness(0.95) }

/* Compact container variants if needed */
.ms--tight .ms-input{ height:42px }
/* Backdrop fade */
.bd-enter { transition: opacity .18s ease-out; }
.bd-enter-start { opacity: 0; }
.bd-enter-end   { opacity: 1; }
.bd-leave { transition: opacity .18s ease-in; }
.bd-leave-start { opacity: 1; }
.bd-leave-end   { opacity: 0; }

/* Bottom sheet slide (mobile) */
.sheet-enter { transition: transform .22s ease-out, opacity .22s ease-out; will-change: transform, opacity; }
.sheet-enter-start { transform: translateY(100%); opacity: 0; }
.sheet-enter-end   { transform: translateY(0%);   opacity: 1; }
.sheet-leave { transition: transform .20s ease-in, opacity .20s ease-in; will-change: transform, opacity; }
.sheet-leave-start { transform: translateY(0%);   opacity: 1; }
.sheet-leave-end   { transform: translateY(100%); opacity: 0; }