/*
 * Search results page (lib/modules/search/results.php). A light touch in the
 * same style as the Advanced Search page (search-page.css): a plain white
 * panel on the site's dark gray, a slightly darker filters column, 44px
 * rounded fields with a red focus ring, dark gray pills and chips with a tick
 * when selected, softer result rows and paging.
 *
 * Everything is scoped under body.sr-page (only this page has it). The
 * filters use native selects / radios / checkboxes on this page (the
 * custom-form widgets aren't loaded), so they are styled here directly.
 */

.sr-page,
.sr-cards {
    --sr-red: #d93337;
    --sr-red-dark: #b0262a;
    --sr-bar: #404040;
    --sr-ink: #1f1f1f;
    --sr-text: #444;
    --sr-muted: #767676;
    --sr-line: #c9c9c9;
    --sr-line-soft: #ececec;
    --sr-side: #f6f6f7;
    --sr-gold: #c9ad8a;
    --sr-field-h: 44px;
    --sr-font: 'Helvetica Neue', Helvetica-Neue, Helvetica, Arial, sans-serif;
    --sr-font-head: HelveticaNeue-CondensedBold, HelveticaNeueBoldCondensed, HelveticaNeue-Bold-Condensed, 'Helvetica Neue Bold Condensed', 'Open Sans Condensed', 'Helvetica Neue', Helvetica-Neue, Helvetica, Arial, sans-serif;
}

/* ---------- Title bar ---------- */

.sr-page .page-header {
    border-radius: 8px;
}

.sr-page h1.search-results-title {
    font: 28px/1.2 var(--sr-font-head);
    color: var(--sr-ink);
}

.sr-page h1.search-results-title .search-results-count {
    font-family: var(--sr-font);
    font-weight: 400;
    color: var(--sr-muted);
}

.sr-page .search-parameters {
    margin-top: 2px;
    font: 14px/1.4 var(--sr-font);
    color: var(--sr-muted);
}

/* ---------- Paging bar ---------- */

.sr-page .pagination {
    gap: 6px;
}

.sr-page .pagination .page-link,
.sr-page .pagination > li > span,
.sr-page .pagination > li > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    margin: 0;
    padding: 0 10px;
    border: 0;
    border-radius: 8px !important;
    background: #383838;   /* a touch darker than the #444 bar, like the original */
    font: 600 14px/1 var(--sr-font);
    color: #b1b1b1;
}

.sr-page .pagination .page-link:hover,
.sr-page .pagination > li > a:hover {
    background: #4b4b4b;
    color: #fff;
    text-decoration: none;
}

.sr-page .pagination .active .page-link,
.sr-page .pagination .active > span,
.sr-page .pagination .active > a {
    background: #5a5a5a;
    color: #fff;
}

.sr-page .pagination .disabled .page-link,
.sr-page .pagination .disabled > span {
    background: #3c3c3c;
    color: #6e6e6e;
}

/* The white paging bar under the results. */
.sr-page .search-results .paging-bar .pagination .page-link,
.sr-page .search-results .paging-bar .pagination > li > span,
.sr-page .search-results .paging-bar .pagination > li > a {
    border: 1px solid #d5d5d5;
    background: #fff;
    color: var(--sr-text);
}

.sr-page .search-results .paging-bar .pagination .page-link:hover,
.sr-page .search-results .paging-bar .pagination > li > a:hover {
    border-color: var(--sr-bar);
}

.sr-page .search-results .paging-bar .pagination .active .page-link,
.sr-page .search-results .paging-bar .pagination .active > span,
.sr-page .search-results .paging-bar .pagination .active > a {   /* the current page is an <a> */
    border-color: var(--sr-bar);
    background: var(--sr-bar);
    color: #fff;
}

.sr-page .search-results .paging-bar .pagination .disabled .page-link,
.sr-page .search-results .paging-bar .pagination .disabled > span {
    color: #b5b5b5;
}

.sr-page .search-nav a {
    color: #d6d6d6;
    font-family: var(--sr-font);
}

.sr-page .search-nav a:hover {
    color: #fff;
    text-decoration: none;
}

/* Desktop: page numbers on the left, view icons and links on the right,
   all centred on one line. */
@media only screen and (min-width: 768px) {
    /* Equal dark space above and below the page buttons. */
    .sr-page .pager-panel {
        display: flex !important;
        align-items: center;
        margin-bottom: 0;
        padding: 14px 15px;
    }

    .sr-page .pager-panel > .pagination {
        float: none;
        margin: 0 auto 0 0 !important;
    }

    .sr-page .pager-panel .search-nav {
        display: flex;
        align-items: center;
        float: none;
        margin: 0 0 0 auto;
        padding: 0;
    }

    .sr-page .pager-panel .search-nav li {
        display: flex;
        align-items: center;
        float: none;
        height: 34px;
        line-height: 1;
    }

    .sr-page .pager-panel .search-nav li .glyphicon {
        top: 0;
    }

    .sr-page .pager-panel .search-nav a {
        float: none;
        padding: 0;
        line-height: 1.2;
    }
}

/* Phones: a slimmer paging bar at the top (30px buttons, 52px bar). */
@media only screen and (max-width: 767px) {
    .sr-page .pager-panel .pagination .page-link,
    .sr-page .pager-panel .pagination > li > span,
    .sr-page .pager-panel .pagination > li > a {
        min-width: 30px;
        height: 30px;
    }

    /* Centre the page numbers. The hidden pause button (.isplay) sits in
       the row on the left, so it pushed the numbers off centre; a matching
       empty spacer on the other side balances it. */
    .sr-page .pager-panel.sticky-page .isplay {
        flex: 0 0 20px;
        width: 20px;
        padding: 1px 0;
        text-align: center;
    }

    .sr-page .pager-panel.sticky-page::after {
        content: "";
        flex: 0 1 20px;   /* gives way first on very narrow phones */
    }
}

/* ---------- Results panel ---------- */

@media only screen and (min-width: 768px) {
    .sr-page .search-results {
        margin-top: 0;   /* styles.css adds 10px under the paging bar */
        border: 0;
        border-radius: 8px;
        background: #fff;
    }
}

.sr-page .search-results .search-filters {
    padding: 26px 22px 32px;
    border-left: 1px solid var(--sr-line-soft);
    background: var(--sr-side);   /* drops the old arrow graphic */
    color: var(--sr-text);
}

/* ---------- Result rows (list view) ----------
   Styled in styles.css ("List view result rows", scoped to .result-box.rb),
   since the same rows appear on many pages. */

/* Grid view: rounded tiles, laid out on a grid with the same 24px of white
   around and between them (the hidden list rows don't take part). */
.sr-page .result-box-large {
    border-radius: 8px;
    overflow: hidden;
}

@media only screen and (min-width: 768px) {
    .sr-page .search-results .section > .d-md-block:has(> .result-box-large:not([style*="none"])) {
        display: grid !important;
        grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
        gap: 24px;
        padding: 24px;
    }

    .sr-page .search-results .section > .d-md-block > .result-box-large {
        float: none;
        width: auto;
        height: auto;
        min-height: 435px;
        margin: 0;
    }

    .sr-page .search-results .section > .d-md-block > .result-box-large .img {
        float: none;
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
        background-size: cover;
        background-position: center;
    }

    /* The name bar and the hover buttons were placed for a 260px photo; the
       photo is now as tall as the tile is wide (100cqw), so they follow it.
       On hover the name bar rises to sit right on top of the buttons. */
    .sr-page .search-results .section > .d-md-block > .result-box-large {
        container-type: inline-size;
    }

    .sr-page .search-results .section > .d-md-block > .result-box-large h2 {
        top: calc(100cqw - 22px);
    }

    .sr-page .search-results .section > .d-md-block > .result-box-large:hover h2 {
        top: calc(100cqw - 45px);
    }

    .sr-page .search-results .section > .d-md-block > .result-box-large .img .buttons {
        display: flex;
        right: 0;
    }

    .sr-page .search-results .section > .d-md-block > .result-box-large .img .buttons .view-btn {
        flex: 1 1 auto;
    }

    /* Instruments, location and genres flow under the photo instead of being
       pinned to fixed heights, so long lists and taller photos can't overlap.
       Location and genres sit at the bottom of the tile; "Active within…"
       keeps its spot on hover. */
    .sr-page .search-results .section > .d-md-block > .result-box-large {
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    .sr-page .search-results .section > .d-md-block > .result-box-large .img {
        flex: none;
    }

    .sr-page .search-results .section > .d-md-block > .result-box-large ul {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        min-height: 175px;
        margin: 0;
        padding: 10px 12px 28px;
    }

    .sr-page .search-results .section > .d-md-block > .result-box-large ul li.location,
    .sr-page .search-results .section > .d-md-block > .result-box-large ul li.music {
        position: static;
    }

    .sr-page .search-results .section > .d-md-block > .result-box-large ul li.location {
        margin-top: auto;
        padding-top: 14px;
    }

    .sr-page .search-results .section > .d-md-block > .result-box-large ul li.music {
        margin-top: 4px;
    }
}

/* Narrow desktop windows (styles.css shows the tile buttons all the time
   up to 800px): keep the name bar in its raised spot on top of them. */
@media only screen and (min-width: 768px) and (max-width: 800px) {
    .sr-page .search-results .section > .d-md-block > .result-box-large h2,
    .sr-page .search-results .section > .d-md-block > .result-box-large:hover h2 {
        top: calc(100cqw - 45px);
        padding: 11px 0;
    }
}

/* ---------- Filters column and Filters popup ---------- */

.sr-page .search-filters .title-box {
    margin: 0 0 22px;
    padding: 0 0 18px;
    border-bottom: 1px solid #e3e3e3;
}

.sr-page .search-filters h3 {
    margin: 0 0 14px;
    text-align: left;
    text-transform: none;
    font: 20px/1.2 var(--sr-font-head);
    color: var(--sr-ink);
}

.sr-page .search-filters .title-box dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 8px;
    font: 13px/1.4 var(--sr-font);
    color: var(--sr-muted);
}

.sr-page .search-filters .title-box dl dt,
.sr-page .search-filters .title-box dl dd {
    float: none;
    margin: 0;
    padding: 0;
    line-height: 1.4;
}

.sr-page .search-filters .title-box dl dd {
    color: var(--sr-ink);
}

/* Labels */
.sr-page .search-filters label,
.sr-page .search-filters .ttl {
    display: block;
    margin: 0 0 6px;
    font: 600 14px/1.3 var(--sr-font);
    color: var(--sr-ink);
}

.sr-page .search-filters .ttl span#span-radius,
.sr-page .search-filters .ttl span#span-radius-popup {
    font: 400 14px/1.3 var(--sr-font);
    color: var(--sr-muted);
}

/* Text inputs and selects */
.sr-page .search-filters .form-control,
.sr-page .search-filters select.mobile-dropdown,
.sr-page .search-filters input[type="text"] {
    display: block;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: var(--sr-field-h);
    margin: 0 0 18px;
    padding: 0 12px;
    border: 1px solid var(--sr-line) !important;
    border-radius: 8px !important;
    background-color: #fff;
    box-shadow: none;
    font: 16px/1.3 var(--sr-font) !important;   /* 16px stops iOS zooming */
    color: var(--sr-ink);
    transition: border-color .15s, box-shadow .15s;
}

.sr-page .search-filters select.mobile-dropdown {
    padding-right: 36px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23666' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 13px center;
    background-size: 12px 8px;
    text-align: left;
    text-align-last: left;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.sr-page .search-filters .form-control:hover,
.sr-page .search-filters select.mobile-dropdown:hover {
    border-color: #a9a9a9 !important;
}

.sr-page .search-filters .form-control:focus,
.sr-page .search-filters select.mobile-dropdown:focus,
.sr-page .search-filters input[type="text"]:focus {
    border-color: #0c83eb !important;
    box-shadow: 0 0 0 3px rgba(12, 131, 235, .18);
    outline: none;
}

/* Instruments and Genre (fastselect) */
.sr-page .search-filters .fstElement {
    display: block;
    width: 100% !important;
    margin: 0 0 18px;
    border: 1px solid var(--sr-line);
    border-radius: 8px;
    font-size: 14px;
}

.sr-page .search-filters .fstElement.fstActive {
    border-color: var(--sr-red);
    box-shadow: 0 0 0 3px rgba(217, 51, 55, .15);
}

.sr-page .search-filters .fstMultipleMode .fstControls {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: calc(var(--sr-field-h) - 2px);
    padding: 7px 8px 2px;
    border: 0 !important;
    border-radius: 8px !important;
}

.sr-page .search-filters .fstMultipleMode .fstQueryInput {
    height: 28px;
    margin: 0 0 5px;
    font-size: 16px;
    color: var(--sr-ink);
}

.sr-page .search-filters .fstChoiceItem {
    margin: 0 6px 5px 0;
    padding: 4px 11px 4px 26px;
    border: 1px solid var(--sr-bar);
    border-radius: 999px;
    background: var(--sr-bar);
    font-size: 16px;   /* same size as the dropdowns above it */
    font-weight: 600;
    line-height: 18px;
    color: #fff;
}

.sr-page .search-filters .fstChoiceRemove {
    left: 4px;
    color: #fff;
    opacity: .75;
}

.sr-page .search-filters .fstResults {
    border-color: var(--sr-line);
    border-radius: 0 0 8px 8px;
}

.sr-page .search-filters .fstResultItem {
    font-size: 16px;
}

.sr-page .search-filters .fstResultItem.fstFocused {
    border-color: #f1f1f1;
    background: #f1f1f1;
    color: var(--sr-ink);
}

.sr-page .search-filters .fstResultItem.fstSelected {
    border-color: var(--sr-bar);
    background: var(--sr-bar);
    color: #fff;
}

/* Radius slider */
.sr-page .search-filters .slider-area {
    margin: 0 0 18px;
    padding: 14px 4px 0;
}

.sr-page .search-filters .slider-area .slider-row {
    height: 6px;
    margin: 0 0 12px;
    padding: 0 10%;
    border: 0;
    border-radius: 999px;
    background: #e3e3e3;
}

.sr-page .search-filters .slider-row .slider {
    height: 6px;
    cursor: pointer;
}

/* Bigger click area than the 6px track. */
.sr-page .search-filters .slider-row .slider::before {
    content: "";
    position: absolute;
    top: -18px;
    bottom: -18px;
    left: -24px;
    right: -24px;
    z-index: 1;
}

.sr-page .search-filters .slider-row .slider ul {
    position: relative;
    border-right: 0;
}

.sr-page .search-filters .slider-row .slider ul li {
    position: relative;
    height: 6px;
    border-left: 0;
}

.sr-page .search-filters .slider-row .slider ul li::before,
.sr-page .search-filters .slider-row .slider ul li:last-child::after {
    content: "";
    position: absolute;
    top: 0;
    left: -3px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #bdbdbd;
}

.sr-page .search-filters .slider-row .slider ul li:last-child::after {
    left: auto;
    right: -3px;
}

.sr-page .search-filters .slider-row .slider .ui-slider-handle {
    top: -8px;
    width: 22px;
    height: 22px;
    margin-left: -11px;
    border: 3px solid #fff;
    border-radius: 50%;
    background: var(--sr-bar);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
    cursor: grab;
    z-index: 2;
}

.sr-page .search-filters .slider-row .slider .ui-slider-handle:focus {
    outline: none;
    box-shadow: 0 0 0 4px rgba(64, 64, 64, .25), 0 1px 4px rgba(0, 0, 0, .3);
}

.sr-page .search-filters .slider-area .scale {
    margin: 0;
    font: 12px/16px var(--sr-font);
    color: var(--sr-muted);
}

.sr-page .search-filters .slider-area .scale li {
    padding: 4px 0;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}

.sr-page .search-filters .slider-area .scale li:hover {
    color: var(--sr-ink);
}

/* Sort By: segmented control */
.sr-page .search-filters .nav-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin: 0 0 18px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    overflow: visible;
}

.sr-page .search-filters .nav-tabs li {
    width: auto;
    margin: 0;
    border: 0;
}

/* Pills: Sort By, Gender, At Least / Exact. Chips: the "Only…" filters. */
.sr-page .search-filters .nav-tabs a,
.sr-page .search-filters .nav-tabs li:first-child a,
.sr-page .search-filters .check-row label,
.sr-page .search-filters .list label {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: none;
    min-width: 0;
    min-height: 40px;
    margin: 0;
    padding: 8px 10px;
    border: 1px solid #cfcfcf;
    border-radius: 8px;
    background: #fff;
    font: 400 14px/1.2 var(--sr-font);
    color: var(--sr-text);
    text-align: center;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    transition: background-color .15s, border-color .15s, color .15s;
}

.sr-page .search-filters .nav-tabs a:hover,
.sr-page .search-filters .nav-tabs a:focus,
.sr-page .search-filters .check-row label:hover,
.sr-page .search-filters .list label:hover {
    border: 1px solid #9a9a9a;
    background: #fff;
    color: var(--sr-text);
    text-decoration: none;
}

.sr-page .search-filters .check-row {
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    gap: 6px;
    margin: 0 0 18px;
    padding: 0;
    overflow: visible;
}

.sr-page .search-filters .check-row li {
    float: none;
    height: auto;
    padding: 0;
    position: relative;
}

.sr-page .search-filters .list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 18px;
    padding: 0;
}

.sr-page .search-filters .list li {
    position: relative;
    padding: 0;
}

.sr-page .search-filters .list label {
    width: auto;
    padding: 8px 14px;
    border-radius: 999px;
}

/* The real radios / checkboxes stay in the form, just out of sight. */
.sr-page .search-filters .check-row input,
.sr-page .search-filters .list input[type="checkbox"] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

.sr-page .search-filters .nav-tabs > li.active > a,
.sr-page .search-filters .nav-tabs > li.active > a:hover,
.sr-page .search-filters .nav-tabs > li.active > a:focus,
.sr-page .search-filters .check-row input:checked + label,
.sr-page .search-filters .list input:checked + label {
    border: 1px solid var(--sr-bar);
    background: var(--sr-bar);
    font-weight: 600;
    color: #fff;
}

/* Selected: dark gray with a tick before the text. */
.sr-page .search-filters .nav-tabs > li.active > a::before,
.sr-page .search-filters .check-row input:checked + label::before,
.sr-page .search-filters .list input:checked + label::before {
    content: "";
    flex: 0 0 auto;
    width: 10px;
    height: 6px;
    margin: -3px 7px 0 -2px;
    border: solid currentColor;
    /*rtl:ignore*/
    border-width: 0 0 2px 2px;
    /*rtl:ignore*/
    transform: rotate(-45deg);
}

.sr-page .search-filters .check-row input:focus-visible + label,
.sr-page .search-filters .list input:focus-visible + label {
    outline: 2px solid var(--sr-red);
    outline-offset: 2px;
}

/* Age: From [ ] To [ ] */
.sr-page .search-filters .txt-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 18px;
    padding: 0;
}

.sr-page .search-filters .txt-row label {
    float: none;
    margin: 0;
    font-weight: 400;
    color: var(--sr-muted);
}

.sr-page .search-filters .txt-row .form-control {
    float: none;
    width: 72px !important;
    margin: 0;
    padding: 0 6px;
    text-align: center;
}

/* The old spacers around the Age row. */
.sr-page .search-filters #collapse-block > div[style*="clear:both"],
.sr-page .search-filters #more-options-container-popup > div[style*="clear:both"] {
    display: none;
}

/* Info icons become short gray notes (the icons were hover-only). */
.sr-page .search-filters .tipsy {
    display: none !important;
}

.sr-page .search-filters #instrument-skill-container::after,
.sr-page .search-filters #instrument-skill-container-popup::after,
.sr-page .search-filters #commitment-container::after,
.sr-page .search-filters #commitment-container-popup::after {
    content: var(--sr-hint-fewer, "Not everyone lists this, so expect fewer results.");   /* EU pages set the translated text */
    display: block;
    margin: -12px 0 18px;
    font: 12.5px/1.4 var(--sr-font);
    color: var(--sr-muted);
}

.sr-page .search-filters .ttl:has(> .band-search[style*="inline"])::after {
    content: var(--sr-hint-band, "Based on the member who posted the band.");
    display: block;
    margin-top: 2px;
    font: 400 12.5px/1.4 var(--sr-font);
    color: var(--sr-muted);
}

/* Show More / Less Options */
.sr-page .search-filters .open-close {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 18px;
    padding: 0;
    background: none;
    font: 600 15px/20px var(--sr-font);
    color: var(--sr-red);
}

.sr-page .search-filters .open-close::after {
    content: "";
    width: 8px;
    height: 8px;
    margin-top: 4px;
    border: solid currentColor;
    /*rtl:ignore*/
    border-width: 0 2px 2px 0;
    /*rtl:ignore*/
    transform: rotate(-135deg);
    transition: transform .15s;
}

.sr-page .search-filters .open-close.collapsed::after {
    margin-top: -4px;
    /*rtl:ignore*/
    transform: rotate(45deg);
}

.sr-page .search-filters .open-close:hover {
    color: var(--sr-red-dark);
    text-decoration: underline;
}

/* Update button */
.sr-page .search-filters .submit {
    display: block;
    width: 100% !important;
    max-width: none !important;
    height: 48px;
    margin: 8px 0 0;
    border: 0;
    border-radius: 8px;
    background: var(--sr-red);
    font: 700 16px/48px var(--sr-font);
    letter-spacing: .02em;
    text-transform: uppercase;
    color: #fff;
    cursor: pointer;
    transition: background-color .15s;
}

.sr-page .search-filters .submit:hover,
.sr-page .search-filters .submit:focus-visible {
    background: var(--sr-red-dark);
}

/* ---------- Popups (Filters, Save Search, Saved Searches) ---------- */

.sr-page #filter-modal .modal-content,
.sr-page #save-search-modal .modal-content,
.sr-page #saved-searches-modal .modal-content {
    border: 0;
    border-radius: 12px;
    overflow: hidden;
    background: #fff !important;   /* the page's inline styles force #f3f3f3 */
    box-shadow: 0 12px 40px rgba(0, 0, 0, .3);
    font-family: var(--sr-font);
}

.sr-page #filter-modal .modal-header,
.sr-page #save-search-modal .modal-header,
.sr-page #saved-searches-modal .modal-header {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 16px 20px;
    border-bottom: 1px solid var(--sr-line-soft);
    border-radius: 0;
    background: #fff;
    text-align: left !important;
}

.sr-page #filter-modal .modal-title,
.sr-page #save-search-modal .modal-title,
.sr-page #saved-searches-modal .modal-title {
    margin: 0;
    font: 22px/1.2 var(--sr-font-head);
    text-align: left;
    text-transform: none;
    color: var(--sr-ink);
}

.sr-page #filter-modal .modal-header .close,
.sr-page #save-search-modal .modal-header .close,
.sr-page #saved-searches-modal .modal-header .close {
    position: static;
    width: auto;
    height: auto;
    margin: -8px -8px -8px auto;
    padding: 6px 10px;
    font-size: 28px;
    line-height: 1;
    color: #666;
}

.sr-page #filter-modal .modal-body,
.sr-page #save-search-modal .modal-body,
.sr-page #saved-searches-modal .modal-body {
    min-height: 0;
    padding: 18px 20px 22px;
    border-radius: 0;
}

.sr-page #filter-modal .search-filters {
    padding: 0;
    background: none;
}

.sr-page #filter-modal .search-filters .slider-area {
    float: none !important;   /* the popup's markup floats it, which shrank it to its content */
    width: 100%;              /* styles.css fixes the popup slider at 260px */
    margin: 0 0 18px;
}

.sr-page #filter-modal .search-filters fieldset > .clearfix {
    margin: 0 !important;
    padding: 0 !important;
}

.sr-page #filter-modal .search-filters .title-box {
    margin: 0 0 18px;
    padding: 0 0 16px;
}

/* Saved Searches / Save This Search links at the top of the Filters popup. */
.sr-page #filter-modal .title-box p {
    display: flex;
    gap: 8px;
    margin: 0;
}

.sr-page #filter-modal .title-box p a {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    padding: 10px 12px !important;
    border: 1px solid #cfcfcf;
    border-radius: 8px !important;
    background: #fff !important;
    font: 600 14px/1.2 var(--sr-font);
    color: var(--sr-text);
    text-align: center;
}

.sr-page #filter-modal .title-box p a:hover {
    border-color: var(--sr-bar);
    text-decoration: none;
}

.sr-page #filter-modal .title-box:has(p) {
    border-bottom: 0;
}

.sr-page #filter-modal .title-box:not(:has(p)) {
    display: none;
}

/* Save Search popup */
.sr-page #save-search-modal label {
    display: block;
    margin: 0 0 6px;
    font: 600 14px/1.3 var(--sr-font);
    color: var(--sr-ink);
}

.sr-page #save-search-modal .form-control {
    height: var(--sr-field-h);
    border: 1px solid var(--sr-line);
    border-radius: 8px;
    font-size: 16px;
}

.sr-page #save-search-modal .form-control:focus {
    border-color: #0c83eb;
    box-shadow: 0 0 0 3px rgba(12, 131, 235, .18);
}

.sr-page #save-search-modal .btn-contact {
    height: 44px;
    margin-top: 12px;
    padding: 0 24px;
    border: 0;
    border-radius: 8px;
    background: var(--sr-bar);
    font: 600 15px/44px var(--sr-font);
    color: #fff;
}

.sr-page #save-search-modal .btn-contact:hover {
    background: var(--sr-red);
}

/* Saved Searches popup: chips with an x. */
.sr-page #saved-searches-modal .login-form {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sr-page #saved-searches-modal .saved-search-form {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    margin: 0;
    border: 1px solid #cfcfcf;
    border-radius: 999px;
    background: #fff;
}

.sr-page #saved-searches-modal .saved-search-form:hover {
    border-color: #9a9a9a;
}

.sr-page #saved-searches-modal .saved-search-button {
    max-width: 260px;
    overflow: hidden;
    padding: 9px 4px 9px 16px;
    border: 0;
    background: none;
    font: 15px/1.2 var(--sr-font);
    color: var(--sr-text);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sr-page #saved-searches-modal .saved-search-button:hover {
    color: var(--sr-red);
}

.sr-page #saved-searches-modal .delete-search {
    top: 0;
    margin: 0;
    padding: 10px 14px 10px 8px;
    border-radius: 0;
    background: none;
    font-size: 11px;
    color: #9a9a9a;
    cursor: pointer;
}

.sr-page #saved-searches-modal .delete-search:hover {
    color: var(--sr-red);
}

.sr-page #saved-searches-modal .login-form ul {
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--sr-muted);
}

/* ---------- Phones ---------- */

@media only screen and (max-width: 767px) {
    .sr-page .page-header {
        border-radius: 0;
    }

    .sr-page h1.search-results-title {
        font-size: 24px;
    }

    .sr-page .search-parameters {
        font-size: 13px;
    }

    .sr-page #filter-modal .modal-dialog {
        width: auto;
        max-width: none;
        min-width: 0;
        margin: 12px;
        padding: 0;
    }
}

/* ---------- Filters popup: links that modal-theme.css turns red ----------
 * modal-theme.css makes every link inside a popup bold red
 * (.modal .modal-body a:not(.btn):not(.modal-button):not(.button)), and
 * its three :not()s outrank the pill rules above. In the phone filters
 * popup the Sort By pills and the Search Area suggestions (the
 * autocomplete list is appended inside form#search-popup) are links, so
 * they came up red until a tap gave them :focus. The #filter-modal id
 * puts them back on the pill / list colours. */
.sr-page #filter-modal .search-filters .nav-tabs a {
    font-weight: 400;
    color: var(--sr-text);
}

.sr-page #filter-modal .search-filters .nav-tabs > li.active > a {
    font-weight: 600;
    color: #fff;
}

.sr-page #filter-modal .ui-menu .ui-menu-item a {
    font-weight: 400;
    color: var(--sr-text);
}

.sr-page #filter-modal .ui-menu .ui-menu-item a.ui-state-hover,
.sr-page #filter-modal .ui-menu .ui-menu-item a.ui-state-active,
.sr-page #filter-modal .ui-menu .ui-menu-item a.ui-state-focus {
    color: #fff;
}

/* ---------- Keyword chip, New Search ----------
 * A keyword (or a Name / ID lookup) shows as a chip under the title line,
 * with an x to remove it, so it can't quietly empty the results. "New
 * Search" at the top of the phone filters popup starts over from a blank
 * Advanced Search (/search/?new=1). */
.sr-page .sr-keyword {
    clear: both;
    padding-top: 6px;
}

.sr-page .sr-kw-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    padding: 3px 4px 3px 12px;
    border: 1px solid var(--sr-line-soft);
    border-radius: 16px;
    background: #f1f1f2;
    font: 13px/20px var(--sr-font);
    color: var(--sr-text);
    white-space: nowrap;
}

.sr-page .sr-kw-chip strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--sr-ink);
}

.sr-page .sr-kw-clear {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #dcdcdd;
    font: 16px/22px var(--sr-font);
    text-align: center;
    color: var(--sr-ink);
    cursor: pointer;
}

.sr-page .sr-kw-clear:hover,
.sr-page .sr-kw-clear:focus {
    background: var(--sr-red);
    color: #fff;
    text-decoration: none;
}


/* "Only bands seeking specific musicians" (Bands searches): its own line,
   with a short note under the chip. */
.sr-page .search-filters .list li.seek-focus-row {
    display: flex;
    flex-basis: 100%;
    flex-direction: column;
    align-items: flex-start;
}

/* Sized to its text like the other chips, text left-aligned if it wraps. */
.sr-page .search-filters .list li.seek-focus-row label {
    width: auto;
    max-width: 100%;
    justify-content: flex-start;
    text-align: left;
}

.sr-page .seek-focus-hint {
    display: block;
    margin: 4px 0 0;
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--sr-muted);
}

/* Above the results when that option hid some bands. */
.sr-page .seek-focus-note {
    margin: 0 0 14px;
    padding: 10px 14px;
    border-radius: 8px;
    background: #f4f4f4;
    font-size: 14px;
    line-height: 1.45;
    color: #333;
}

.sr-page .seek-focus-note a {
    font-weight: 600;
    white-space: nowrap;
}

/* ---------- Browse pages (city / state pages, body.sr-cards) ----------
 * lib/modules/rewrite/locality.php, region.php, locality-instrument.php
 * and region-instrument.php. The options column on the right (and the
 * phone Browse Options popup, which prints the same markup) in the style
 * of the search results filters: a place title, pills with a tick for the
 * filters, a native category select, cities as a list with the counts in
 * gray, instruments as chips and the feed links on one line at the end.
 * No red text links: links are dark and underline on hover. Markup
 * helpers: include/functions/bm-browse-sidebar.php. */

/* The page numbers and view icons at the top (and the white paging bar
   under the results) match the search results page on desktop. */
@media only screen and (min-width: 768px) {
    .sr-cards .pagination {
        gap: 6px;
    }

    .sr-cards .pagination .page-link,
    .sr-cards .pagination > li > span,
    .sr-cards .pagination > li > a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 34px;
        height: 34px;
        margin: 0;
        padding: 0 10px;
        border: 0;
        border-radius: 8px !important;
        background: #383838;
        font: 600 14px/1 var(--sr-font);
        color: #b1b1b1;
    }

    .sr-cards .pagination .page-link:hover,
    .sr-cards .pagination > li > a:hover {
        background: #4b4b4b;
        color: #fff;
        text-decoration: none;
    }

    .sr-cards .pagination .active .page-link,
    .sr-cards .pagination .active > span,
    .sr-cards .pagination .active > a {
        background: #5a5a5a;
        color: #fff;
    }

    .sr-cards .pagination .disabled .page-link,
    .sr-cards .pagination .disabled > span {
        background: #3c3c3c;
        color: #6e6e6e;
    }

    .sr-cards .search-results .paging-bar .pagination .page-link,
    .sr-cards .search-results .paging-bar .pagination > li > span,
    .sr-cards .search-results .paging-bar .pagination > li > a {
        border: 1px solid #d5d5d5;
        background: #fff;
        color: var(--sr-text);
    }

    .sr-cards .search-results .paging-bar .pagination .page-link:hover,
    .sr-cards .search-results .paging-bar .pagination > li > a:hover {
        border-color: var(--sr-bar);
    }

    .sr-cards .search-results .paging-bar .pagination .active .page-link,
    .sr-cards .search-results .paging-bar .pagination .active > span,
    .sr-cards .search-results .paging-bar .pagination .active > a {
        border-color: var(--sr-bar);
        background: var(--sr-bar);
        color: #fff;
    }

    .sr-cards .search-results .paging-bar .pagination .disabled .page-link,
    .sr-cards .search-results .paging-bar .pagination .disabled > span {
        color: #b5b5b5;
    }

    .sr-cards .pager-panel {
        display: flex !important;
        align-items: center;
        margin-bottom: 0;
        padding: 14px 15px;
    }

    .sr-cards .pager-panel > .pagination {
        float: none;
        margin: 0 auto 0 0 !important;
    }

    .sr-cards .pager-panel .search-nav {
        display: flex;
        align-items: center;
        float: none;
        margin: 0 0 0 auto;
        padding: 0;
    }

    .sr-cards .pager-panel .search-nav li {
        display: flex;
        align-items: center;
        float: none;
        height: 34px;
        line-height: 1;
    }

    .sr-cards .pager-panel .search-nav li .glyphicon {
        top: 0;
    }

    /* Results on the left, options column on the right on every browse
       page and site, whatever order the page prints them in (the EU pages
       and the city + instrument page print the options first). */
    .sr-cards .search-results > .section {
        order: 1;
    }

    /* The options column: the search results' gray, no arrow graphic. */
    .sr-cards .search-results > .search-filters.browse-options {
        order: 2;
        padding: 26px 22px 40px;
        border-left: 1px solid var(--sr-line-soft);
        background: var(--sr-side);
    }
}

.sr-cards .browse-options {
    font-family: var(--sr-font);
    color: var(--sr-text);
}

.sr-cards .browse-options a {
    font-weight: inherit;
    color: var(--sr-ink);
}

.sr-cards .browse-options a:hover,
.sr-cards .browse-options a:focus-visible {
    color: #000;
    text-decoration: underline;
}

/* Title: place name, count line, Show all profiles. */
.sr-cards .browse-options .bo-title {
    margin: 0 0 6px;
    padding: 0;
    border: 0;
    text-align: left;
    text-transform: none;
    font: 26px/1.15 var(--sr-font-head);
    color: var(--sr-ink);
}

.sr-cards .browse-options .bo-count {
    margin: 0 0 8px;
    font: 14px/1.4 var(--sr-font);
    color: var(--sr-text);
}

.sr-cards .browse-options .bo-count strong {
    color: var(--sr-ink);
}

.sr-cards .browse-options .bo-more {
    display: inline-block;
    font: 600 14px/1.3 var(--sr-font);
    color: var(--sr-ink);
}

.sr-cards .browse-options .bo-more::after {
    content: "\2192" /*rtl:"\2190"*/;
    margin-left: 5px;
}

/* Section headings, each with a thin rule above. */
.sr-cards .browse-options .bo-h {
    margin: 24px 0 14px;
    padding: 22px 0 0;
    border-top: 1px solid #e3e3e3;
    text-align: left;
    text-transform: none;
    font: 20px/1.2 var(--sr-font-head);
    color: var(--sr-ink);
}

.sr-cards .browse-options .bo-h a {
    color: inherit;
}

/* Filters: pills, dark gray with a tick when selected. */
.sr-cards .browse-options .bo-field {
    min-width: 0;
    margin: 0 0 16px;
    padding: 0;
    border: 0;
}

.sr-cards .browse-options .bo-field legend {
    float: none;
    width: auto;
    margin: 0 0 8px;
    padding: 0;
    border: 0;
    font: 600 14px/1.3 var(--sr-font);
    color: var(--sr-ink);
}

.sr-cards .browse-options .bo-seg {
    position: relative;
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    gap: 6px;
}

/* The real radios stay in the form, just out of sight. */
.sr-cards .browse-options .bo-seg input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

.sr-cards .browse-options .bo-seg label {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 0;
    min-height: 40px;
    margin: 0;
    padding: 8px 6px;
    border: 1px solid #cfcfcf;
    border-radius: 8px;
    background: #fff;
    font: 400 14px/1.2 var(--sr-font);
    color: var(--sr-text);
    text-align: center;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    transition: background-color .15s, border-color .15s, color .15s;
}

/* The text sits in a span so a long label ("Les plus récents") wraps as
   one centred block with the tick still next to its first word. */
.sr-cards .browse-options .bo-seg label span {
    min-width: 0;
}

.sr-cards .browse-options .bo-seg label:hover {
    border-color: #9a9a9a;
}

/* Selected: #4f4f4f gray with off-white text and a tick. */
.sr-cards .browse-options .bo-seg input:checked + label {
    border-color: #4f4f4f;
    background: #4f4f4f;
    font-weight: 600;
    color: #f5f5f5;
}

.sr-cards .browse-options .bo-seg input:checked + label span::before {
    content: "";
    display: inline-block;
    width: 10px;
    height: 6px;
    margin: 0 7px 0 0;
    vertical-align: 3px;
    border: solid currentColor;
    /*rtl:ignore*/
    border-width: 0 0 2px 2px;
    /*rtl:ignore*/
    transform: rotate(-45deg);
}

.sr-cards .browse-options .bo-seg input:focus-visible + label {
    outline: 2px solid #0c83eb;
    outline-offset: 2px;
}

/* Filter: the search results' Update button. */
/* Filter: the same #4f4f4f gray as the selected pills, off-white text. */
.sr-cards .browse-options .bo-submit {
    display: block;
    width: 100%;
    min-height: 0;
    height: 46px;
    margin: 4px 0 0;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: #4f4f4f;
    font: 700 15px/46px var(--sr-font);
    letter-spacing: .02em;
    text-transform: uppercase;
    color: #f5f5f5;
    cursor: pointer;
    transition: background-color .15s;
}

.sr-cards .browse-options .bo-submit:hover,
.sr-cards .browse-options .bo-submit:focus-visible {
    background: #3f3f3f;
    color: #fff;
}

/* Search for other ...: category select and Search button on one row. */
.sr-cards .browse-options .bo-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    border: 0;
}

.sr-cards .browse-options .bo-search-row {
    display: flex;
    align-items: stretch;
    gap: 8px;
    margin: 0;
}

.sr-cards .browse-options select.bo-select {
    flex: 1 1 auto;
    display: block;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: var(--sr-field-h);
    margin: 0 !important;
    padding: 0 36px 0 12px !important;
    border: 1px solid var(--sr-line) !important;
    border-radius: 8px !important;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23666' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 13px center;
    background-size: 12px 8px;
    box-shadow: none;
    font: 16px/1.3 var(--sr-font) !important;   /* 16px stops iOS zooming */
    color: var(--sr-ink);
    text-align: left;
    text-align-last: left;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

/* Translated button labels and category names run long ("Rechercher",
   "Todas las categorías"), so here the row may wrap: the button drops
   under the select and fills the row when the two don't fit side by side. */
.sr-cards .browse-options .bo-search-row {
    flex-wrap: wrap;
}

.sr-cards .browse-options .bo-search-row select.bo-select {
    flex: 1 1 200px;
}

.sr-cards .browse-options .bo-search-row .bo-go {
    flex: 1 0 auto;
}

.sr-cards .browse-options select.bo-select:hover {
    border-color: #a9a9a9 !important;
}

.sr-cards .browse-options select.bo-select:focus {
    border-color: #0c83eb !important;
    box-shadow: 0 0 0 3px rgba(12, 131, 235, .18);
    outline: none;
}

.sr-cards .browse-options .bo-go {
    flex: 0 0 auto;
    height: var(--sr-field-h);
    margin: 0;
    padding: 0 18px;
    border: 0;
    border-radius: 8px;
    background: var(--sr-red);
    font: 600 15px/1 var(--sr-font);
    letter-spacing: normal;
    text-transform: none;   /* popup buttons are capitalised by modal-theme.css */
    color: #fff;
}

.sr-cards .browse-options .bo-go:hover,
.sr-cards .browse-options .bo-go:focus-visible {
    background: var(--sr-red-dark);
}

/* Other cities: name on the left, profile count in gray on the right. */
.sr-cards .browse-options .bo-cities {
    margin: 0 0 12px;
    padding: 0;
    list-style: none;
}

.sr-cards .browse-options .bo-cities li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    padding: 7px 0;
    border-bottom: 1px solid var(--sr-line-soft);
    font: 14px/1.3 var(--sr-font);
}

.sr-cards .browse-options .bo-cities li a {
    min-width: 0;
    line-height: 1.3;
}

.sr-cards .browse-options .bo-cities li span {
    flex: 0 0 auto;
    font-size: 13px;
    color: var(--sr-muted);
}

/* Instruments: chips. */
.sr-cards .browse-options .bo-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sr-cards .browse-options .bo-chips li {
    margin: 0;
    padding: 0;
    line-height: 1;
}

.sr-cards .browse-options .bo-chips a {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 6px 12px;
    border: 1px solid #d5d5d5;
    border-radius: 16px;
    background: #fff;
    font: 13px/1.2 var(--sr-font);
    color: var(--sr-ink);
    transition: border-color .15s;
}

.sr-cards .browse-options .bo-chips a:hover,
.sr-cards .browse-options .bo-chips a:focus-visible {
    border-color: var(--sr-bar);
    color: #000;
    text-decoration: none;
}

/* Feeds: one line at the end. */
.sr-cards .browse-options .bo-feeds {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    margin: 24px 0 0;
    padding: 18px 0 0;
    border-top: 1px solid #e3e3e3;
    font: 13px/1.4 var(--sr-font);
    color: var(--sr-muted);
}

.sr-cards .browse-options .bo-feeds::before {
    content: "";
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    margin-right: 4px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M3 3a10 10 0 0 1 10 10M3 7.5a5.5 5.5 0 0 1 5.5 5.5' fill='none' stroke='%23e3893a' stroke-width='1.7' stroke-linecap='round'/%3E%3Ccircle cx='3.6' cy='12.4' r='1.4' fill='%23e3893a'/%3E%3C/svg%3E") no-repeat center / 14px 14px;
}

.sr-cards .browse-options .bo-feeds a {
    font-weight: 600;
}