/* ------------------------------- */
/* ---------- map panel ---------- */
/* ------------------------------- */

.cb--results-page .results-map {
    position: sticky;
    top: 10px;
    flex: 0 0 35%;
    height: calc(100vh - 20px); /* fallback; map_update_panel_height() sizes it to the viewport */
    min-width: 300px;
    overflow: hidden;
    box-sizing: border-box;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
    border-radius: var(--cb-border-radius-large);
}
.cb--results-page .results-map #map-holder {
    width: 100%;
    height: 100%;
}
.cb--results-page .results-map .close-map {
    display: none;
}

/* the open map claims the full container width, so filters and list keep room to breathe */
.cb--results-page.results.map-open {
    max-width: none;
}
.cb--results-page.results.map-open .results-settings {
    flex: 0 0 300px;
}
/* the columns' grow factors must reach 1, or flexbox leaves free space undistributed
   and space-between pushes it around the list */
.cb--results-page.results.map-open .results-list {
    flex: 1;
}

/* ----------------------------------- */
/* ---------- office markers ---------- */
/* ----------------------------------- */

.cb--results-page .results-map .office-marker {
    width: 20px;
    height: 20px;
    border: 3px solid var(--cb-white);
    box-sizing: border-box;
    background-color: var(--cb-color-2);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .4);
    border-radius: 50%;
    cursor: pointer;
    transition: box-shadow .15s ease;
}
/* markers are positioned via an inline transform, so hover feedback avoids transforms */
.cb--results-page .results-map .office-marker:hover {
    z-index: 2;
    box-shadow: 0 0 0 5px rgba(0, 149, 194, .3), 0 2px 8px rgba(0, 0, 0, .4);
}
/* an office excluded by the active filters stays findable as a muted dot */
.cb--results-page .results-map .office-marker.inactive {
    background-color: var(--cb-grey-light);
}
.cb--results-page .results-map .office-marker.inactive:hover {
    box-shadow: 0 0 0 5px rgba(167, 167, 167, .3), 0 2px 8px rgba(0, 0, 0, .4);
}

/* ------------------------------- */
/* ---------- popup shell -------- */
/* ------------------------------- */

.cb--results-page .results-map .maplibregl-popup-content {
    padding: 14px 16px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .18), 0 2px 6px rgba(0, 0, 0, .12);
    border-radius: var(--cb-border-radius-medium);
    animation: map-popup-appear .18s ease-out;
}
.cb--results-page .results-map .maplibregl-popup-close-button {
    top: 4px;
    right: 4px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font-size: var(--font-size-medium);
    line-height: 1;
    color: var(--cb-grey-medium);
    outline: none;
    transition: background-color .15s ease, color .15s ease;
}
.cb--results-page .results-map .maplibregl-popup-close-button:hover {
    background-color: var(--cb-grey-extra-lighter);
    color: var(--cb-grey-darkest);
}

@keyframes map-popup-appear {
    0% {
        opacity: 0;
        transform: scale(.96);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.cb--results-page .results-map .office-popup {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: var(--font-size-smaller);
}
.cb--results-page .results-map .office-popup .logos {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 4px;
}
.cb--results-page .results-map .office-popup .logos img {
    height: 20px;
    max-width: 80px;
    object-fit: contain;
}
.cb--results-page .results-map .office-popup .name {
    font-weight: bold;
}
.cb--results-page .results-map .office-popup .vendors {
    color: var(--cb-grey-dark);
}

/* --------------------------------- */
/* ---------- nearby pins ---------- */
/* --------------------------------- */

.cb--results-page .results-map .nearby-pin {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-width: 190px;
    padding: 6px 11px;
    border: 1px solid rgba(255, 255, 255, .8);
    box-sizing: border-box;
    background-color: var(--cb-color-3);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
    border-radius: 12px;
    font-size: var(--font-size-smaller);
    line-height: 1.2;
    color: var(--cb-white);
    cursor: pointer;
    transition: background-color .15s ease;
}
/* markers are positioned via an inline transform, so hover feedback avoids transforms */
.cb--results-page .results-map .nearby-pin:hover {
    z-index: 2;
    background-color: var(--cb-color-3-light);
}
/* the rows have fixed pixel heights so the pin's total height is always even: markers
   center via translate(-50%, -50%), and a fractional half-offset blurs the text */
.cb--results-page .results-map .nearby-pin .title {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
    height: 16px;
}
.cb--results-page .results-map .nearby-pin .title .icon {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    color: var(--cb-white);
}
/* plane.svg carries no fill attribute, so the icon loader's currentColor swap misses it */
.cb--results-page .results-map .nearby-pin .title .icon svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: currentColor;
}
.cb--results-page .results-map .nearby-pin .title .name {
    overflow: hidden;
    font-size: var(--font-size-smallest);
    white-space: nowrap;
    text-overflow: ellipsis;
}
.cb--results-page .results-map .nearby-pin .price {
    height: 16px;
    font-weight: bold;
    line-height: 16px;
}
.cb--results-page .results-map .nearby-pin .price b {
    font-size: var(--font-size-small);
}
.cb--results-page .results-map .nearby-pin .price .loading-bar {
    width: 64px;
    height: 10px;
    margin: 3px 0;
    background: linear-gradient(90deg, rgba(255, 255, 255, .2) 25%, rgba(255, 255, 255, .55) 50%, rgba(255, 255, 255, .2) 75%);
    background-size: 200% 100%;
    border-radius: 5px;
    animation: nearby-pin-shimmer 1.2s linear infinite;
}
.cb--results-page .results-map .nearby-pin.searched {
    z-index: 1;
    border: 2px solid var(--cb-white);
    background-color: var(--cb-color-2-dark);
    cursor: default;
}
.cb--results-page .results-map .nearby-pin.searched:hover {
    background-color: var(--cb-color-2-dark);
}
.cb--results-page .results-map .nearby-pin.no-cars {
    border-color: var(--cb-grey-lightest);
    background-color: var(--cb-white);
    color: var(--cb-grey-dark);
}
.cb--results-page .results-map .nearby-pin.no-cars:hover {
    background-color: var(--cb-grey-extra-lightest);
}
.cb--results-page .results-map .nearby-pin.no-cars .price {
    overflow: hidden;
    font-weight: normal;
    font-size: var(--font-size-smallest);
    white-space: nowrap;
    text-overflow: ellipsis;
}
.cb--results-page .results-map .nearby-pin.no-cars .title .icon {
    color: var(--cb-grey-medium);
}

@keyframes nearby-pin-shimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: 0 0;
    }
}

.cb--results-page .results-map .nearby-popup {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 160px;
    font-size: var(--font-size-smaller);
}
.cb--results-page .results-map .nearby-popup .name {
    font-weight: bold;
}
.cb--results-page .results-map .nearby-popup .meta {
    color: var(--cb-grey-dark);
}
.cb--results-page .results-map .nearby-popup .no-cars {
    color: var(--cb-grey-medium);
}
.cb--results-page .results-map .nearby-popup .show-cars,
.cb--results-page .results-map .office-popup .show-cars {
    margin-top: 6px;
    padding: 8px 12px;
    background-color: var(--cb-color-3);
    border-radius: var(--cb-border-radius-medium);
    text-align: center;
    font-weight: bold;
    color: var(--cb-white);
    cursor: pointer;
    transition: background-color .15s ease;
}
.cb--results-page .results-map .nearby-popup .show-cars:hover,
.cb--results-page .results-map .office-popup .show-cars:hover {
    background-color: var(--cb-color-3-light);
}

/* the docked map narrows the list, so stack the card halves — but on very wide screens
   the list stays wide enough for the normal two-column card */
@container cb--results (max-width: 1800px) {
    .cb--results-page.results.map-open .cb--vehicle .banner,
    .cb--results-page.results.map-open .cb--vehicle .configurator {
        flex: 0 0 100%;
    }
}

/* narrow-but-not-overlay: three columns no longer fit, so the filters move behind the
   existing mobile filter button (same overlay pattern as below 900px) and the map
   shares the row with just the list */
@container cb--results (max-width: 1150px) {
    .cb--results-page.results.map-open .results-settings {
        display: none;
        z-index: 3;
        position: fixed;
        flex: 1;
        top: 0;
        left: 0;
        height: 100%;
        min-height: 100vh;
        overflow-y: scroll;
        background-color: var(--cb-white);
    }
    .cb--results-page.results.map-open.show-filters .results-settings {
        display: flex;
    }
    .cb--results-page.results.map-open .cb--settings > .close {
        position: absolute;
        display: flex;
        right: 25px;
    }
    .cb--results-page.results.map-open .cb--filters {
        margin-bottom: 75px;
    }
    .cb--results-page.results.map-open .results-list .mobile-filter-button {
        z-index: 3;
        position: fixed;
        display: flex;
        bottom: 38px;
        left: 100px;
    }
    .cb--results-page.results.map-open .results-map {
        flex: 0 0 42%;
    }
}

@container cb--results (max-width: 900px) {
    .cb--results-page .results-map {
        z-index: 3;
        position: fixed;
        top: 0;
        left: 0;
        flex: none;
        width: 100%;
        height: 100%;
        min-width: 0;
        box-shadow: none;
        border-radius: 0;
    }
    .cb--results-page .results-map .close-map.list {
        z-index: 4;
        position: absolute;
        bottom: 25px;
        left: 50%;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 8px;
        padding: 14px 28px;
        border: 2px solid var(--cb-white);
        box-sizing: border-box;
        background-color: var(--cb-color-3);
        box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
        border-radius: 28px;
        color: var(--cb-white);
        font-size: var(--font-size-small);
        font-weight: bold;
        cursor: pointer;
        transform: translateX(-50%);
        transition: background-color .15s ease;
    }
    .cb--results-page .results-map .close-map.list .icon {
        display: flex;
        width: 14px;
        height: 14px;
    }
    .cb--results-page .results-map .close-map.list .icon svg {
        width: 100%;
        height: 100%;
        fill: currentColor;
    }
    .cb--results-page .results-map .close-map.list:hover {
        background-color: var(--cb-color-3-light);
    }
    .cb--results-page .results-map .close-map.list:active {
        transform: translateX(-50%) scale(.96);
    }
    /* the top-right corner belongs to the map's zoom controls, so the close sits top-left */
    .cb--results-page .results-map .close-map.corner {
        z-index: 4;
        position: absolute;
        top: 15px;
        left: 15px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        background-color: var(--cb-white);
        box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
        border-radius: 50%;
        color: var(--cb-grey-darkest);
        cursor: pointer;
        transition: background-color .15s ease;
    }
    .cb--results-page .results-map .close-map.corner:hover {
        background-color: var(--cb-grey-extra-lighter);
    }
    .cb--results-page .results-map .close-map.corner:active {
        transform: scale(.94);
    }
    .cb--results-page .results-map .close-map.corner svg {
        width: 16px;
        height: 16px;
        fill: currentColor;
    }
}