:root{
    /* Bottom-sheet design tokens — scoped to #sfltrSheetNew. */
    --sfn-pink:#e91e63;
    --sfn-pink-dark:#c1275f;
    --sfn-pink-soft:#fff4f9;
    --sfn-pink-chip:#fff0f3;
    --sfn-pink-rail:#fde0eb;
    --sfn-navy:#112b64;
    --sfn-green:#00c950;
    --sfn-green-soft:#e7fff0;
    --sfn-green-border:#bbffd4;
    --sfn-gray-bg:#f3f3f5;
    --sfn-gray-border:#e5e7eb;
    --sfn-gray-text:#4a5565;
    --sfn-gray-muted:#99a1af;
    --sfn-pill-bg:#f7f7f7;
    --sfn-pill-border:#99a1af;
    --sfn-input-bg:#fafafa;
    --sfn-bottom-border:#ffe6c7;
}

/* Bootstrap modal -> bottom sheet, scoped by #sfltrSheetNew. */
#sfltrSheetNew.modal{ padding:0 !important; }
#sfltrSheetNew .modal-dialog{
    margin:0; max-width:100%; width:100%;
    min-height:100vh; min-height:100dvh;
    display:flex; align-items:flex-end;
    pointer-events:none;
}
#sfltrSheetNew .modal-content{
    background:transparent; border:0; box-shadow:none;
    width:100%; padding:35px 0 0;
    position:relative; overflow:visible;
    pointer-events:auto;
    transform:translateY(100%);
    transition:transform .3s cubic-bezier(.4,0,.2,1);
}
#sfltrSheetNew.show .modal-content{ transform:translateY(0); }

.sfn-sheet-inner{
    background:#fff;
    border-radius:20px 20px 0 0;
    max-height:calc(100vh - 110px);
    max-height:calc(100dvh - 110px);
    overflow-y:auto;
    overflow-x:hidden;
    -webkit-overflow-scrolling:touch;
    padding:0px 16px 0;
    box-sizing:border-box;
    /* Slim, themed scrollbar — much lighter than the OS default. */
    scrollbar-width:thin;
    scrollbar-color:#e5e7eb transparent;
}
.sfn-sheet-inner::-webkit-scrollbar{ width:6px; }
.sfn-sheet-inner::-webkit-scrollbar-track{ background:transparent; margin:14px 0; }
.sfn-sheet-inner::-webkit-scrollbar-thumb{ background:#e5e7eb; border-radius:3px; }
.sfn-sheet-inner::-webkit-scrollbar-thumb:hover{ background:#cbd5e1; }

/* Desktop (>=768px): switch from bottom-sheet to a centred card.
   - Card vertically centred in the viewport.
   - All four corners rounded.
   - Larger max-height so the card uses more of the viewport.
   - Layout: card -> form (flex column) -> scrollable middle + fixed bottom bar.
     The bottom bar (Reset / Search) sits flush at the bottom of the card,
     always visible, and the middle area scrolls when content exceeds the height.
     Scrollbar is drawn inside the form's rectangular middle region, then
     clipped by the card's rounded corners. */
@media (min-width:768px){
    #sfltrSheetNew .modal-dialog{
        max-width:480px;
        margin:0 auto;
        align-items:center;           /* was flex-end on mobile */
    }
    .sfn-sheet-inner{
        border-radius:20px;           /* full rounded card on desktop */
        height:calc(100vh - 80px);
        height:calc(100dvh - 80px);
        max-height:calc(100vh - 80px);
        max-height:calc(100dvh - 80px);
        box-shadow:0 20px 60px rgba(0,0,0,.18);
        overflow:hidden;              /* clip rounded shape */
        padding:0;                    /* moved onto the form regions */
        display:flex;
        flex-direction:column;
    }
    .sfn-sheet-inner > form{
        flex:1 1 auto;
        min-height:0;                 /* let the middle child shrink so overflow triggers */
        display:flex;
        flex-direction:column;
        overflow:hidden;
    }
    /* All form children EXCEPT the sticky bottom bar become the scrollable
       middle region. We achieve this by routing scrolling to the form and
       letting only the bottom-bar opt out of scrolling via order/flex. */
    .sfn-sheet-inner > form > :not(.sfn-bottom-bar){
        flex-shrink:0;
    }
    /* The scrollable middle. Wraps every child of the form in a single
       scrolling area via `display:contents` would lose the scroll context, so
       we instead make the form itself scrollable and pin the bottom bar with
       sticky positioning. */
    .sfn-sheet-inner > form{
        overflow-y:auto;
        padding:0px 16px 0;
        scrollbar-width:thin;
        scrollbar-color:#e5e7eb transparent;
    }
    .sfn-sheet-inner > form::-webkit-scrollbar{ width:6px; }
    .sfn-sheet-inner > form::-webkit-scrollbar-track{ background:transparent; margin:16px 0; }
    .sfn-sheet-inner > form::-webkit-scrollbar-thumb{ background:#e5e7eb; border-radius:3px; }
    .sfn-sheet-inner > form::-webkit-scrollbar-thumb:hover{ background:#cbd5e1; }

    /* Bottom action bar — sticky to the bottom of the form's scroll container.
       Already has `position:sticky; bottom:0` in the base styles; here we just
       ensure it has a solid background and doesn't get clipped by the card's
       rounded corners (because the card has overflow:hidden, the bar lives
       inside the form so it gets clipped to the form rectangle, which is
       inside the rounded card — works out correctly). */
    .sfn-sheet-inner > form .sfn-bottom-bar{
        position:sticky;
        bottom:0;
        background:#fff;
        margin:20px -14px 0;
        z-index:5;
    }
}
#sfltrSheetNew *, #sfltrSheetNew *::before, #sfltrSheetNew *::after{ box-sizing:border-box; }

/* Bootstrap .row uses negative left/right margins (-15px) by default. Inside the
   sheet's 14px horizontal padding that pushes columns past the card edges. Neutralise
   the negative gutter and use a tight 8px column gap so children stay inside the card. */
#sfltrSheetNew .row{
    margin-left:0;
    margin-right:0;
}
#sfltrSheetNew .row > [class*="col-"]{
    padding-left:4px;
    padding-right:4px;
}
/* Same negative-gutter problem in the other-filters grid — Bootstrap doesn't touch
   this one but the grid template gap was 20px which is too generous inside the narrow
   480px desktop card. Tighten to 12px so cells stop overflowing. */
.sfn-other-grid{ gap:12px; }

/* Close X — small circular button with light grey ring, floats above the sheet
   with clear space between it and the rounded top edge of the card. */
.sfn-close-circle{
    position:absolute;
    top:-15px; left:50%;
    transform:translateX(-50%);
    width:44px; height:44px;
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:50%;
    box-shadow:0 2px 8px rgba(0,0,0,.08);
    display:flex; align-items:center; justify-content:center;
    z-index:2;
    color:#000;
    font-size:20px;
    line-height:1;
    cursor:pointer;
    padding:0;
}
.sfn-close-circle:hover{ background:#f9fafb; }

/* Title row */
.sfn-title-row{
    display:flex; align-items:center; justify-content:space-between;
    margin-bottom:20px;
        position: sticky;
    top: 0;
    background: white;
    z-index: 99;
    padding: 20px 0px;
}
.sfn-title-row .h2{
    margin:0;
    padding-left:8px;
    border-left:4px solid var(--sfn-pink);
    font-size:18px;
    font-weight:700;
    line-height:20px;
    text-transform:uppercase;
    color:#000;
}
.sfn-title-pill{
    background:var(--sfn-green-soft);
    border:1px solid var(--sfn-green-border);
    color:var(--sfn-green);
    border-radius:8px;
    padding:0 5px;
    font-size:13px;
    line-height:20px;
    white-space:nowrap;
}
.sfn-title-pill b{ font-weight:700; }

/* Search Near You CTA */
.sfn-cta-near{
    background:var(--sfn-navy);
    color:#fff;
    border:0;
    border-radius:12px;
    padding:13px 15px;
    font-size:14px;
    font-weight:700;
    width:100%;
    display:flex; align-items:center; justify-content:center;
    gap:10px;
    margin-bottom:15px;
    cursor:pointer;
    text-decoration:none;
    text-transform:capitalize;
    transition:background-color .15s ease, transform .05s ease;
}
.sfn-cta-near:hover,
.sfn-cta-near:focus{ background:#0c1f49; color:#fff; text-decoration:none; }
.sfn-cta-near:active{ transform:scale(.99); }
.sfn-cta-near i{ font-size:16px; flex-shrink:0; }

/* Section heading with trailing divider */
.sfn-section-head{
    display:flex; align-items:center;
    gap:10px;
    padding-top:10px;
    margin-bottom:10px;
}
.sfn-section-head > span:first-child{
    font-size:14px;
    font-weight:700;
    line-height:20px;
    text-transform:uppercase;
    color:#000;
    white-space:nowrap;
}
.sfn-section-line{
    flex:1;
    height:1px;
    background:var(--sfn-gray-border);
    opacity:.8;
}

/* Range slider panel (price gets its own pink-soft wrapper). */
.sfn-rs-panel{
    background:var(--sfn-pink-soft);
    border-radius:8px;
    padding:10px
}

/* Custom dual-handle range slider — kept identical in behaviour to the previous
   implementation; only the chrome is restyled to match the new design. */
.sfn-rs{ width:100%; position:relative; }
.sfn-rs + .sfn-rs{ margin-top:14px; }
.sfn-rs-head{
    display:flex; align-items:center; justify-content:space-between;
}
.sfn-rs-label{
    font-size:13px;
    color:var(--sfn-gray-text);
    text-transform:uppercase;
    line-height:20px;
}
.sfn-rs-chip{
    background:var(--sfn-pink-chip);
    border-radius:8px;
    padding:0 5px;
    display:inline-flex; align-items:center;
    gap:4px;
    color:var(--sfn-pink);
    font-size:14px;
    line-height:20px;
    white-space:nowrap;
}
.sfn-rs-chip .sfn-rs-prefix{ font-weight:500; }
.sfn-rs-chip b{ font-weight:700; }
.sfn-rs-chip .sfn-dash{ color:var(--sfn-gray-muted); margin:0 2px; }
/* Price-range chip always uses the pink Search-button colour — including when
   the slider is in `is-untouched` (default) state. The user expects to see the
   price values clearly even before interacting with the slider. */
.sfn-rs-panel .sfn-rs-chip,
.sfn-rs-panel .sfn-rs.is-untouched .sfn-rs-chip{
    background:var(--sfn-pink-soft);
    color:var(--sfn-pink);
    border:1px solid transparent;
}
/* Untouched (default) state for OTHER sliders (Age, Weight, etc.) — soft grey
   chip so the user knows the slider isn't actively filtering. */
.sfn-rs.is-untouched .sfn-rs-chip{ color:var(--sfn-gray-muted); background:var(--sfn-gray-bg); }

.sfn-rs-track{
    position:relative;
    height:24px;
    margin:14px 4px 0;
    touch-action:none;
}
.sfn-rs-rail{
    position:absolute;
    left:0; right:0; top:9px;
    height:6px;
    background:var(--sfn-pink-rail);
    border-radius:3px;
    pointer-events:none;
}
.sfn-rs-fill{
    position:absolute;
    top:9px;
    height:6px;
    background:var(--sfn-pink);
    border-radius:3px;
    pointer-events:none;
}
.sfn-rs.is-untouched .sfn-rs-fill{ background:var(--sfn-pink); opacity:.45; }
.sfn-rs-thumb{
    position:absolute;
    top:2px;
    width:19px; height:19px;
    border-radius:50%;
    background:#fff;
    border:3px solid var(--sfn-pink);
    box-shadow:0 1px 3px rgba(0,0,0,.18);
    cursor:grab;
    margin-left:-9px;
    box-sizing:border-box;
    user-select:none;
}
.sfn-rs.is-untouched .sfn-rs-thumb{ border-color:var(--sfn-pink); }
.sfn-rs-thumb:active{ cursor:grabbing; box-shadow:0 2px 6px rgba(0,0,0,.25); }

/* Dropdown buttons */
.sfn-field-label{
    font-size:14px;
    font-weight:700;
    color:var(--sfn-gray-text);
    line-height:20px;
    margin-bottom:8px;
    display:block;
}
.sfn-select-wrap{ position:relative; width:100%; }
.sfn-select{
    background:var(--sfn-gray-bg);
    border:1.323px solid var(--sfn-gray-border);
    border-radius:8px;
    height:36px;
    width:100%;
    padding:0 34px 0 13px;
    color:var(--sfn-gray-text);
    font-size:14px;
    font-weight:500;
    cursor:pointer;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    line-height:32px;
    outline:none;
}
.sfn-select:focus{ border-color:var(--sfn-pink); }
.sfn-select option{ color:#000; }
/* Native-select caret. Without this, Sex / Language look like plain text boxes
   because we hide the browser's default caret via appearance:none. */
.sfn-select-wrap::after{
    content:"";
    position:absolute;
    right:14px; top:50%;
    width:8px; height:8px;
    border-right:2px solid var(--sfn-gray-text);
    border-bottom:2px solid var(--sfn-gray-text);
    transform:translateY(-70%) rotate(45deg);
    pointer-events:none;
}
/* When the wrap contains a Select2 (province/location), Select2 draws its own arrow
   so we hide our pseudo-element to avoid double arrows. */
.sfn-select-wrap:has(.select2-container)::after,
.sfn-select-wrap.select2-active::after{ display:none; }

/* ----- Select2 overrides scoped to this sheet ----- */
/* NOTE: keep these self-sufficient — the feed layout does NOT ship the site-wide
   Select2 width rules that the frontend layout has in its <head>, so the
   selection box must be forced to full width here or it collapses to content
   width (narrow box + arrow floating outside). */
#sfltrSheetNew .select2-container{ width:100% !important; min-width:100% !important; display:block !important; }
/* Select2's internal `<span class="selection">` wrapper sits between the container
   and the selection box. The theme's global `i, span, a { display:inline-block }`
   (default.css) shrink-wraps it to content width, which then caps the selection
   box (its child) — the narrow-box + floating-arrow bug on the feed layout.
   Force this wrapper block + full width so the selection can fill the column. */
#sfltrSheetNew .select2-container .selection{ display:block !important; width:100% !important; }
#sfltrSheetNew .select2-container--default .select2-selection--single,
#sfltrSheetNew .select2-container--default .select2-selection--multiple{
    background:var(--sfn-gray-bg);
    border:1.323px solid var(--sfn-gray-border);
    border-radius:8px;
    min-height:36px;
    height:auto;
    padding:0 6px 0 13px;
    /* width:100% + !important is required: the theme's global `i, span, a
       { display:inline-block }` rule (default.css) makes the selection <span>
       shrink to content width on layouts that lack the site-wide Select2 width
       overrides (e.g. the feed layout). Force it full-width + flex here. */
    display:flex !important;
    align-items:center;
    width:100% !important;
    box-sizing:border-box;
}
#sfltrSheetNew .select2-container--default .select2-selection--single .select2-selection__rendered{
    color:var(--sfn-gray-text);
    font-size:14px;
    font-weight:500;
    line-height:34px;
    padding:0;
    width:100%;
}
#sfltrSheetNew .select2-container--default .select2-selection--single .select2-selection__arrow{
    height:34px;
    width:24px;
    right:6px;
    top:0;
}
#sfltrSheetNew .select2-container--default .select2-selection--single .select2-selection__arrow b{
    border-color:var(--sfn-gray-text) transparent transparent transparent;
}
#sfltrSheetNew .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b{
    border-color:transparent transparent var(--sfn-gray-text) transparent;
}
#sfltrSheetNew .select2-container--default.select2-container--focus .select2-selection--single,
#sfltrSheetNew .select2-container--default.select2-container--open .select2-selection--single{
    border-color:var(--sfn-pink);
}
#sfltrSheetNew .select2-dropdown{
    border:1px solid var(--sfn-gray-border);
    border-radius:8px;
    box-shadow:0 4px 12px rgba(0,0,0,.10);
    overflow:hidden;
    z-index:1060;
}
#sfltrSheetNew .select2-results__option{
    padding:8px 13px;
    font-size:14px;
    color:#000;
}
#sfltrSheetNew .select2-container--default .select2-results__option--highlighted[aria-selected]{
    background:var(--sfn-pink);
    color:#fff;
}
#sfltrSheetNew .select2-container--default .select2-results__option[aria-selected=true]{
    background:var(--sfn-pink-soft);
    color:var(--sfn-pink);
}
#sfltrSheetNew .select2-search--dropdown .select2-search__field{
    border:1px solid var(--sfn-gray-border);
    border-radius:6px;
    padding:6px 10px;
    font-size:14px;
    outline:none;
}
#sfltrSheetNew .select2-search--dropdown .select2-search__field:focus{ border-color:var(--sfn-pink); }

/* Filter pills */
.sfn-pill-wrap{
    display:flex; flex-wrap:wrap;
    gap:6px;
    margin-bottom:5px;
}
.sfn-pill{
    background:var(--sfn-pill-bg);
    border:1px solid var(--sfn-pill-border);
    color:#000;
    border-radius:12px;
    padding:3px 7px;
    font-size:14px;
    font-weight:600;
    line-height:20px;
    display:inline-flex; align-items:center;
    gap:5px;
    cursor:pointer;
    user-select:none;
    position:relative;
}
.sfn-pill.is-active{
    background:var(--sfn-pink);
    border-color:var(--sfn-pink-dark);
    color:#fff;
}
.sfn-pill-dot{
    width:12px; height:12px;
    border-radius:50%;
    background:var(--sfn-green);
    display:inline-block;
    flex-shrink:0;
}
/* Per-status dot colors for Quick Filter pills. */
.sfn-pill-dot.sfn-dot-verified  { background:#00c950; }   /* green */
.sfn-pill-dot.sfn-dot-superstar { background:#ef4444; }   /* red */
.sfn-pill-dot.sfn-dot-star      { background:#3b82f6; }   /* blue */
.sfn-pill-dot.sfn-dot-popular   { background:#ffc107; }   /* yellow */
.sfn-pill-dot.sfn-dot-reviews   { background:#fb923c; }   /* warm orange — reads as "rated/feedback" */
/* Has Video pill keeps its video icon — just color the icon pink to match the site's reels accent. */
.sfn-pill.sfn-pill-video i { color:#e91e63; }
.sfn-pill i{ font-size:12px; color:var(--sfn-gray-text); }
/* When the pill is selected, dot/icon flip to white to stand out on the pink background. */
.sfn-pill.is-active .sfn-pill-dot{ background:#fff !important; }
.sfn-pill.is-active i{ color:#fff; }
.sfn-pill-new{
    position:absolute;
    top:-10px; right:-6px;
    background:linear-gradient(to left, var(--sfn-pink), var(--sfn-navy));
    color:#f9fffb;
    font-size:10px;
    font-weight:600;
    border-radius:12px;
    padding:0 6px;
    line-height:15px;
}

/* Other filters grid */
.sfn-other-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
    margin-bottom:10px;
}

/* Name input — pill-shaped centred input. */
.sfn-name-input{
    background:var(--sfn-input-bg);
    border:1px solid var(--sfn-gray-muted);
    border-radius:8px;
    height:48px;
    width:100%;
    padding:0 15px;
    display:flex; align-items:center; justify-content:center;
    gap:8px;
    color:#000;
    font-size:14px;
    cursor:text;
}
.sfn-name-input input{
    border:0; background:transparent; outline:none;
    text-align:center;
    font-size:14px;
    color:#000;
    flex:0 1 auto;
    min-width:0;
    width:100%;
}
.sfn-name-input input::placeholder{ color:#000; text-transform:capitalize; }
.sfn-name-input i{ color:#000; font-size:12px; }

/* Sticky bottom bar */
.sfn-bottom-bar{
    position:sticky;
    bottom:0; left:0; right:0;
    background:#fff;
    border-top:1px solid var(--sfn-bottom-border);
    box-shadow:0 -4px 12px rgba(0,0,0,.08);
    padding:12px;
    margin:20px -14px 0;
    display:flex; align-items:center;
    gap:10px;
    z-index:20;
}
.sfn-btn-reset{
    background:#f3f4f6;
    color:var(--sfn-gray-text);
    border:0;
    border-radius:10px;
    padding:10px 25px;
    font-size:16px;
    font-weight:500;
    line-height:24px;
    cursor:pointer;
    white-space:nowrap;
}
.sfn-btn-search{
    background:var(--sfn-pink);
    color:#fff;
    border:0;
    border-radius:10px;
    padding:10px;
    font-size:16px;
    font-weight:500;
    line-height:24px;
    flex:1;
    display:flex; align-items:center; justify-content:center;
    gap:9px;
    cursor:pointer;
}
.sfn-btn-search:hover{ background:var(--sfn-pink-dark); }
.sfn-btn-search i{ font-size:18px; }

/* Modal backdrop opacity tweak for sheet feel */
#sfltrSheetNew + .modal-backdrop.show,
.modal-backdrop.show{ opacity:.45; }