/* ==========================================================================
   BandMix - /browse/ hub restyle (Oct 2026, option C "search-led")

   Loaded only by lib/static/browse.php; everything is scoped under
   body.bh-page.

   - White panel with the light header bar and red top edge used by the
     profile, options, upgrade and billing restyles.
   - Instrument + region picker under the header (44px fields, red button).
   - Every region in a two-column list with its profile count; the most
     popular regions in bold, as before.
   - Light gray side column: popular cities (dark gray pills), instruments
     (white pills), Advanced search link, ad slot.
   - Phones: one column, full-width panel, picker stacked.
   - Same file on every site; the EU-only bits (country link, right-to-left
     for Hebrew) do nothing elsewhere.
   ========================================================================== */

.bh-page {
    --bh-red:       #d93337;
    --bh-red-dark:  #b0262a;
    --bh-ink:       #1f1f1f;
    --bh-text:      #444;
    --bh-muted:     #767676;
    --bh-faint:     #999;
    --bh-line:      #c9c9c9;
    --bh-line-soft: #ececec;
    --bh-side:      #f6f6f7;
    --bh-pill:      #404040;
    --bh-blue:      #0c83eb;   /* selection blue, as checkout/billing */
    --bh-font:      'Helvetica Neue', Helvetica-Neue, Helvetica, Arial, sans-serif;
    --bh-font-head: HelveticaNeue-CondensedBold, HelveticaNeueBoldCondensed, HelveticaNeue-Bold-Condensed, 'Helvetica Neue Bold Condensed', 'Open Sans Condensed', 'Helvetica Neue', Helvetica-Neue, Helvetica, Arial, sans-serif;
}

.bh-page .bh-panel {
    margin: 20px 0 30px;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    color: var(--bh-text);
    font-family: var(--bh-font);
}

/* ---------- Header bar ---------- */

.bh-page .bh-head {
    padding: 22px 32px 20px;
    background: var(--bh-side);
    border-top: 4px solid var(--bh-red);
    border-bottom: 1px solid var(--bh-line-soft);
}

.bh-page .bh-title {
    float: none;
    margin: 0;
    padding: 0;
    font: 700 32px/34px var(--bh-font-head);
    color: var(--bh-ink);
}

.bh-page .bh-sub {
    margin: 6px 0 0;
    font-size: 15px;
    line-height: 21px;
    color: var(--bh-muted);
}

/* ---------- Instrument + region picker ---------- */

.bh-page .bh-find {
    /* The button lines up with the TOP of the dropdowns (label height +
       gap below it), not the bottom of the row: some browsers (Safari)
       leave extra space under a <select>, which pushed a bottom-aligned
       button ~10px low. */
    --bh-label-h: 16px;
    --bh-label-gap: 6px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin: 0;
    padding: 20px 32px;
    border-bottom: 1px solid var(--bh-line-soft);
}

.bh-page .bh-field {
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
}

.bh-page .bh-label {
    display: block;
    height: var(--bh-label-h);
    margin: 0 0 var(--bh-label-gap);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 13px;
    line-height: var(--bh-label-h);
    font-weight: 700;
    color: var(--bh-text);
}

.bh-page .bh-find select {
    display: block;
    width: 100%;
    height: 44px;
    margin: 0;
    padding: 0 36px 0 12px;
    border: 1px solid var(--bh-line);
    border-radius: 6px;
    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 1.5l5 5 5-5' fill='none' stroke='%23767676' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 14px center;
    font: 15px/20px var(--bh-font);
    color: var(--bh-ink);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
}

.bh-page .bh-find select:hover {
    border-color: #a9a9a9;
}

.bh-page .bh-find select:focus {
    outline: none;
    border-color: var(--bh-blue);
    box-shadow: 0 0 0 3px rgba(12, 131, 235, .18);
}

.bh-page .bh-go {
    flex: 0 0 auto;
    height: 44px;
    margin: calc(var(--bh-label-h) + var(--bh-label-gap)) 0 0;
    padding: 0 30px;
    border: 0;
    border-radius: 6px;
    background: var(--bh-red);
    font: 700 15px/44px var(--bh-font);
    color: #fff;
    cursor: pointer;
    transition: background-color .15s;
}

.bh-page .bh-go:hover,
.bh-page .bh-go:focus {
    background: var(--bh-red-dark);
    outline: none;
}

/* ---------- Body: regions + side column ---------- */

.bh-page .bh-body {
    display: flex;
    align-items: stretch;
}

.bh-page .bh-main {
    flex: 1 1 auto;
    min-width: 0;
    padding: 24px 32px 32px;
}

.bh-page .bh-side {
    flex: 0 0 300px;
    padding: 24px 24px 32px;
    border-left: 1px solid var(--bh-line-soft);
    background: var(--bh-side);
}

.bh-page .bh-h2 {
    margin: 0 0 8px;
    font: 700 22px/26px var(--bh-font-head);
    color: var(--bh-ink);
}

.bh-page .bh-h3 {
    margin: 0 0 10px;
    font: 700 17px/22px var(--bh-font-head);
    color: var(--bh-ink);
}

/* EU sites: the heading shares its row with a link to the country page. */
.bh-page .bh-main-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 8px;
}

.bh-page .bh-main-head .bh-h2 {
    margin: 0;
}

.bh-page .bh-country {
    flex: 0 0 auto;
    font-size: 14px;
    font-weight: 700;
    color: var(--bh-red);
    text-decoration: none;
}

.bh-page .bh-country:hover {
    color: var(--bh-red-dark);
    text-decoration: underline;
}

/* Regions: alphabetical down each column. */
.bh-page .bh-regions {
    margin: 0;
    padding: 0;
    list-style: none;
    -webkit-column-count: 2;
    column-count: 2;
    -webkit-column-gap: 40px;
    column-gap: 40px;
}

.bh-page .bh-regions li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
    padding: 11px 0;
    border-bottom: 1px solid var(--bh-line-soft);
    -webkit-column-break-inside: avoid;
    break-inside: avoid;
    font-size: 15px;
    line-height: 20px;
}

.bh-page .bh-regions a {
    color: var(--bh-ink);
    text-decoration: none;
}

.bh-page .bh-regions a:hover,
.bh-page .bh-regions a:focus {
    color: var(--bh-red);
    text-decoration: none;
}

.bh-page .bh-regions .bh-top a {
    font-weight: 700;
}

/* Top two cities beside each region (links to the city pages), then a
   small "+N" chip linking to the region's full city list. The chip never
   shrinks; the city names shorten with an ellipsis instead. */
.bh-page .bh-regions .bh-cities {
    display: flex;
    flex: 1 1 auto;
    align-items: baseline;
    justify-content: flex-end;
    gap: 7px;
    min-width: 0;
    font-size: 13px;
    color: var(--bh-faint);
}

.bh-page .bh-regions .bh-cities-list {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.bh-page .bh-regions .bh-cities a {
    font-weight: 400;
    color: #9b9b9b;   /* lighter than the region names, so the list reads clean */
}

.bh-page .bh-regions .bh-cities a:hover,
.bh-page .bh-regions .bh-cities a:focus {
    color: var(--bh-red);
}

.bh-page .bh-regions .bh-cities .bh-plus {
    flex: 0 0 auto;
    padding: 1px 7px;
    border-radius: 9px;
    background: #f6f6f7;
    font-size: 11px;
    line-height: 16px;
    color: #a3a3a3;
    text-decoration: none;
    font-variant-numeric: tabular-nums;
    direction: ltr;           /* keep "+18", not "18+", in Hebrew */
    unicode-bidi: isolate;
    transition: background-color .15s, color .15s;
}

.bh-page .bh-regions .bh-cities .bh-plus:hover,
.bh-page .bh-regions .bh-cities .bh-plus:focus {
    background: #ececec;
    color: var(--bh-text);
    text-decoration: none;
}

/* The region name never wraps; the cities give way (ellipsis) instead. */
.bh-page .bh-regions li > a {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* ---------- Pills ---------- */

.bh-page .bh-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
}

.bh-page .bh-pills li {
    margin: 0;
    padding: 0;
}

.bh-page .bh-pills a {
    display: inline-block;
    padding: 6px 13px;
    border: 1px solid #dcdcdc;
    border-radius: 16px;
    background: #fff;
    font-size: 13px;
    line-height: 18px;
    color: #333;
    text-decoration: none;
    transition: border-color .15s, background-color .15s;
}

.bh-page .bh-pills a:hover,
.bh-page .bh-pills a:focus {
    border-color: #a9a9a9;
    color: var(--bh-ink);
    text-decoration: none;
}

.bh-page .bh-pills-dark a {
    border-color: var(--bh-pill);
    background: var(--bh-pill);
    color: #fff;
}

.bh-page .bh-pills-dark a:hover,
.bh-page .bh-pills-dark a:focus {
    border-color: #2a2a2a;
    background: #2a2a2a;
    color: #fff;
}

.bh-page .bh-more {
    margin: 0;
    font-size: 14px;
}

.bh-page .bh-more a {
    color: var(--bh-red);
    font-weight: 700;
    text-decoration: none;
}

.bh-page .bh-more a:hover {
    text-decoration: underline;
}

/* ---------- Right-to-left (bandmix.co.il in Hebrew) ---------- */

[dir="rtl"] .bh-page .bh-find select {
    padding: 0 12px 0 36px;
    background-position: left 14px center;
}

[dir="rtl"] .bh-page .bh-side {
    border-left: 0;
    border-right: 1px solid var(--bh-line-soft);
}

/* ---------- Tablets: narrower side column ---------- */

@media only screen and (max-width: 991px) {
    .bh-page .bh-side {
        flex-basis: 250px;
    }

    .bh-page .bh-regions {
        -webkit-column-gap: 28px;
        column-gap: 28px;
    }
}

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

@media only screen and (max-width: 767px) {
    .bh-page .bh-panel {
        margin: 0 0 20px;   /* full width (.container-fluid has no padding on phones) */
        border-radius: 0;
    }

    .bh-page .bh-head {
        padding: 18px 16px 16px;
    }

    .bh-page .bh-title {
        font-size: 25px;
        line-height: 28px;
    }

    .bh-page .bh-sub {
        font-size: 14px;
        line-height: 19px;
    }

    .bh-page .bh-find {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding: 16px;
    }

    .bh-page .bh-go {
        width: 100%;
        margin-top: 0;
    }

    .bh-page .bh-body {
        flex-direction: column;
    }

    .bh-page .bh-main {
        padding: 18px 16px 22px;
    }

    .bh-page .bh-regions {
        -webkit-column-count: 1;
        column-count: 1;
    }

    .bh-page .bh-regions li {
        padding: 13px 0;   /* comfortable tap height */
    }

    /* Cities on a small second line under the region name. */
    .bh-page .bh-regions li.bh-has-cities {
        flex-direction: column;
        align-items: flex-start;
        gap: 3px;
        padding: 10px 0;
    }

    .bh-page .bh-regions .bh-cities {
        width: 100%;
        justify-content: flex-start;
    }

    .bh-page .bh-side {
        flex-basis: auto;
        padding: 20px 16px 26px;
        border-left: 0;
        border-top: 1px solid var(--bh-line-soft);
    }

    [dir="rtl"] .bh-page .bh-side {
        border-right: 0;
    }
}