/* ── OpenMapTiles / MapLibre ───────────────────────────── */

.estate-map {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 200px;
}

.estate-map .maplibregl-canvas {
    outline: none;
}

.estate-map .maplibregl-ctrl-bottom-left,
.estate-map .maplibregl-ctrl-bottom-right {
    margin: 0;
}

.estate-map .maplibregl-ctrl-bottom-left {
    bottom: 14px !important;
    left: 12px !important;
    z-index: 2;
}

.estate-map .maplibregl-ctrl-bottom-right {
    bottom: 14px !important;
    right: 12px !important;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.estate-map .maplibregl-ctrl-attrib,
.estate-map .maplibregl-ctrl-attrib.estate-map-attrib {
    display: block;
    position: relative;
    max-width: min(360px, calc(100% - 80px));
    min-height: 0;
    height: auto;
    margin: 0 !important;
    padding: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.estate-map .maplibregl-ctrl-attrib::after,
.estate-map .maplibregl-ctrl-attrib .maplibregl-ctrl-attrib-button {
    display: none !important;
}

.estate-map .maplibregl-ctrl-attrib .maplibregl-ctrl-attrib-inner {
    display: none !important;
}

.estate-map .estate-map-attrib-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin: 0;
    padding: 0;
    border: 2px solid var(--color-white);
    border-radius: 50%;
    background: var(--color-white);
    box-shadow: 0 2px 8px rgb(16 16 18 / 14%);
    cursor: pointer;
    transition: box-shadow var(--transition-ui), transform var(--transition-ui);
}

.estate-map .estate-map-attrib-btn:hover,
.estate-map .estate-map-attrib-btn:focus-visible {
    box-shadow: 0 3px 12px rgb(16 16 18 / 18%);
    transform: translateY(-1px);
}

.estate-map .estate-map-attrib-icon {
    display: block;
    width: 13px;
    height: 13px;
    background-color: var(--color-brand-brown);
    transform: translateY(-1px);
    -webkit-mask: url('../icon/map-attrib-info.svg') center / contain no-repeat;
    mask: url('../icon/map-attrib-info.svg') center / contain no-repeat;
}

.estate-map .estate-map-attrib-text {
    display: none;
    max-width: min(320px, calc(100vw - 48px));
    padding: 6px 10px;
    border-radius: 10px;
    background: rgb(255 255 255 / 94%);
    box-shadow: 0 2px 8px rgb(16 16 18 / 12%);
    color: var(--color-brand-brown);
    font-size: 10px;
    line-height: 1.4;
    white-space: normal;
    word-break: break-word;
    cursor: pointer;
}

.estate-map .maplibregl-ctrl-attrib.estate-map-attrib--open .estate-map-attrib-btn {
    display: none;
}

.estate-map .maplibregl-ctrl-attrib.estate-map-attrib--open .estate-map-attrib-text {
    display: block;
}

.estate-map .estate-map-attrib-text a {
    color: var(--color-brand-brown);
}

.estate-map .maplibregl-ctrl-group {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgb(16 16 18 / 12%);
}

.estate-map-marker {
    width: 12px;
    height: 12px;
    border: 2px solid var(--color-white);
    border-radius: 50%;
    background: var(--color-hero-orange);
    box-shadow: 0 1px 4px rgb(52 35 22 / 28%);
    cursor: pointer;
}

.catalog-aside__map {
    width: 100%;
    height: 100%;
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
    overflow: hidden;
}

/* ── Price markers (catalog) ─────────────────────────── */
/* MapLibre двигает wrapper через transform — на нём нельзя transition/transform */

.estate-map-price-marker-wrap {
    transition: opacity 0.15s ease;
    will-change: auto;
}

.catalog-aside__map .maplibregl-marker {
    transition: none !important;
}

.estate-map-price-marker {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    font: inherit;
}

.estate-map-price-marker-wrap.is-hidden {
    visibility: hidden;
    pointer-events: none;
}

.estate-map-price-marker.is-preview .estate-map-price-marker__dot,
.estate-map-price-marker.is-preview.is-compact .estate-map-price-marker__dot {
    display: block;
    width: 14px;
    height: 14px;
    background: #1c1c1c;
    box-shadow:
        0 0 0 4px rgb(28 28 28 / 22%),
        0 2px 10px rgb(52 35 22 / 34%);
}

.estate-map-price-marker.is-preview .estate-map-price-marker__pin {
    display: block;
    margin-top: 0;
    border-top-width: 7px;
    border-right-width: 6px;
    border-left-width: 6px;
    border-top-color: #1c1c1c;
}

.estate-map-price-marker.is-compact.is-active .estate-map-price-marker__dot {
    background: #f2e8b0;
    border-color: #1c1c1c;
    box-shadow:
        0 0 0 4px rgb(242 232 176 / 45%),
        0 2px 10px rgb(52 35 22 / 34%);
}

.estate-map-price-marker.is-compact.is-active .estate-map-price-marker__pin {
    display: block;
    border-top-color: #f2e8b0;
}

.estate-map-price-marker.is-preview .estate-map-price-marker__bubble {
    display: none;
}

.estate-map-price-marker:hover,
.estate-map-price-marker.is-active {
    z-index: 2;
}

.estate-map-price-marker.is-active .estate-map-price-marker__bubble {
    background: #f2e8b0;
    color: #1c1c1c;
    outline: 2px solid rgb(28 28 28 / 18%);
}

.estate-map-price-marker.is-active .estate-map-price-marker__price {
    color: #1c1c1c;
}

.estate-map-price-marker.is-active .estate-map-price-marker__title {
    color: rgb(28 28 28 / 78%);
}

.estate-map-price-marker__dot {
    display: none;
    width: 12px;
    height: 12px;
    border: 2px solid var(--color-white);
    border-radius: 50%;
    background: var(--color-hero-orange);
    box-shadow: 0 1px 4px rgb(52 35 22 / 28%);
    transition: box-shadow 0.15s ease;
}

.estate-map-price-marker.is-compact .estate-map-price-marker__dot {
    display: block;
}

.estate-map-price-marker.is-compact.is-preview .estate-map-price-marker__dot {
    display: block;
}

.estate-map-price-marker.is-compact:hover .estate-map-price-marker__dot,
.estate-map-price-marker.is-compact.is-active .estate-map-price-marker__dot {
    box-shadow: 0 2px 8px rgb(52 35 22 / 38%);
}

.estate-map-price-marker.is-compact .estate-map-price-marker__bubble,
.estate-map-price-marker.is-compact .estate-map-price-marker__pin {
    display: none;
}

.estate-map-price-marker.is-compact.is-preview .estate-map-price-marker__pin {
    display: block;
}

.estate-map-price-marker__bubble {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-width: 160px;
    padding: 6px 10px;
    border-radius: 10px;
    background: var(--color-hero-orange);
    box-shadow: 0 2px 10px rgb(52 35 22 / 28%);
    text-align: left;
    transition: box-shadow 0.15s ease;
}

.estate-map-price-marker:hover .estate-map-price-marker__bubble {
    box-shadow: 0 4px 14px rgb(52 35 22 / 34%);
}

.estate-map-price-marker.is-active .estate-map-price-marker__bubble {
    background: #f2e8b0;
    box-shadow: 0 4px 14px rgb(52 35 22 / 36%);
}

.estate-map-price-marker__price {
    color: var(--color-white);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}

.estate-map-price-marker__title {
    color: rgb(255 255 255 / 92%);
    font-size: 10px;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.estate-map-price-marker__pin {
    width: 0;
    height: 0;
    margin-top: -1px;
    border-top: 8px solid var(--color-hero-orange);
    border-right: 7px solid transparent;
    border-left: 7px solid transparent;
}

.estate-map-price-marker.is-active .estate-map-price-marker__pin {
    border-top-color: #f2e8b0;
}