/* ==========================================================================
   Canin — header city filter

   Kept in its own file rather than appended to style.css, which is 6800+ lines
   with the same selectors redefined in several places. Loaded after style.css,
   so these rules win on source order without needing !important.

   Two instances of the same control are rendered in the header:
     .city-filter--desktop  lives in .header-actions, shown above 900px
     .city-filter--mobile   lives inside .mobile-header-search, shown below
   ========================================================================== */

.city-filter {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-width: 0;
}

/* the pin icon sits on top of the native select */
.city-filter > svg {
    position: absolute;
    inset-inline-start: 8px;
    width: 13px;
    height: 13px;
    color: var(--primary);
    pointer-events: none;
}

/* caret */
.city-filter::after {
    content: "";
    position: absolute;
    inset-inline-end: 8px;
    width: 0;
    height: 0;
    border-inline-start: 3.5px solid transparent;
    border-inline-end: 3.5px solid transparent;
    border-top: 4px solid var(--muted);
    pointer-events: none;
}

.city-filter select {
    width: 100%;
    min-width: 0;
    padding: 0 19px 0 22px;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: #fff;
    color: var(--text);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    text-overflow: ellipsis;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.city-filter select:hover,
.city-filter select:focus {
    border-color: var(--primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(22, 119, 255, .12);
}

/* a city is active — make that obvious at a glance */
.city-filter.is-active select {
    border-color: var(--primary);
    background: var(--surface-2);
    color: var(--primary-strong);
}

/* ------------------------------------------------------------- desktop */
.city-filter--mobile { display: none; }

.city-filter--desktop {
    flex: 0 0 auto;
    width: 152px;
}

.city-filter--desktop select {
    min-height: 38px;
    font-size: 12.5px;
    box-shadow: 0 6px 16px rgba(22, 119, 255, .06);
}

/* -------------------------------------------------------------- mobile */
@media (max-width: 900px) {
    .city-filter--desktop { display: none; }

    .city-filter--mobile { display: inline-flex; }

    /* the search row becomes: [city ~20%] [search input] [button] */
    .mobile-header-search {
        grid-template-columns: 21% 1fr 34px;
    }

    .city-filter--mobile select {
        min-height: 32px;
        padding: 0 16px 0 19px;
        font-size: 10.5px;
        border-radius: 11px;
        box-shadow: 0 8px 18px rgba(22, 119, 255, .06);
    }

    .city-filter--mobile > svg {
        inset-inline-start: 6px;
        width: 11px;
        height: 11px;
    }

    .city-filter--mobile::after { inset-inline-end: 6px; }
}

@media (max-width: 360px) {
    .mobile-header-search { grid-template-columns: 24% 1fr 30px; }
    .city-filter--mobile select { font-size: 9.5px; padding: 0 14px 0 16px; }
}