/**
 * Property map markers shared by the mobile map view and — behind the desktop
 * map clustering feature flag — the marketplace and partner desktop maps.
 *
 * Both the pill and the cluster badge are built in
 * assets/js/helpers/MapMarkerHelper.js, so these rules are loaded globally
 * rather than from a single component's style block.
 */

/* Price Tag Markers */
.price-tag {
    background-color: #fff;
    border-radius: 20px;
    border: 0.5px solid #5c5c5c;
    color: #000000;
    font-size: 12px;
    display: inline-flex;
    padding: 4px 8px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    position: relative;
    transform: translateY(-8px);
    white-space: nowrap;
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.32);
}

.price-tag-arrow {
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translate(-50%, 0px);
    line-height: 0;
    overflow: hidden;
    height: 7px;
    width: 15px;
}

.price-tag-arrow svg {
    display: block;
    margin-top: -1px;
}

.price-tag--active {
    background-color: var(--primaryColor, #23ce60);
    border-color: #fff;
    color: #fff;
}

.price-tag--active .price-tag-arrow path {
    fill: var(--primaryColor, #23ce60);
    stroke: #fff;
}

/* Hover tooltip position over a price pill.
 *
 * The branding stylesheets lift the info window with
 * `.mapView--tmlpTooltip .gm-style .gm-style-iw-t { bottom: 72px !important }`,
 * a figure tuned to clear the tall teardrop image pin. A price pill is only 26px
 * tall (plus its own 8px lift), so that 72px leaves a large gap between the card
 * and the pill. 38px is the pill-sized equivalent: 26 + 8 + a few px for the
 * card's tail.
 *
 * `.map-section` is included so this outranks the 72px rule on specificity
 * rather than on load order, and the rule keys off the pill modifier alone so it
 * also corrects the non-TMLP tooltip, whose unlifted default would otherwise sit
 * on top of the pill.
 */
.map-section.mapView--pricePills .gm-style .gm-style-iw-t {
    bottom: 38px !important;
}

/* Cluster Markers */
.cluster-marker {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid #fff;
    background: var(--primaryColor, #23ce60);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 12px;
    line-height: 1;
    font-weight: 600;
    font-family: 'Open Sans', sans-serif;
    box-sizing: border-box;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    cursor: pointer;
}