html,
body {
    overflow-x: hidden;
}

@media (min-width: 768px) {
    #map-wrapper {
        height: 83vh;
    }

    #map {
        height: 100%;
    }
}
#property-cards {
    max-height: 83vh;
    overflow-y: auto;
    scrollbar-gutter: stable;
}


/* ============================
   MAP wrapper (SAFE for Leaflet)
   ============================ */
#map-wrapper {
    border-radius: 7px;
    overflow: hidden;

}

/* Самият Leaflet map – БЕЗ radius / overflow */
#map {
    width: 100%;
    height: 100%;
}

#property-list.row {
    margin-left: 0;
    margin-right: 0;
}

.form-control:focus,
.form-select:focus {
    box-shadow: none;
    border-color: #0d6efd;
    outline: none;
}

/* Hover */
#filters-form input.form-control:hover,
#filters-form select.form-select:hover,
#filters-form select.form-control:hover {
    border-color: #4d3a2c !important;
    box-shadow: 0 0 4px rgba(13, 110, 253, 0.3) !important;
}

#location-results {
    background: #fff;
    /* бял фон */
    border: 1px solid #ccc;
    /* рамка */
    max-height: 200px;
    /* ограничаваме височината */
    overflow-y: auto;
    /* скрол ако е дълъг списък */
    display: none;
    /* по подразбиране скрит */
    z-index: 1000;
}

/* popup wrapper */
.leaflet-popup-content-wrapper {
    padding: 0 !important;
    margin: 0 !important;
    width: 280px;
}

.leaflet-popup-content {
    padding: 0 !important;
    margin: 0 !important;
}

#property-cards {
    max-height: 83vh;
    overflow-y: auto;
    scrollbar-gutter: stable;
}

.card-body {
    padding-bottom: 0.5rem;
}

/* ============================
       BUILDINGS — SCROLL STABILITY
       ============================ */
#building-cards {
    max-height: 83vh;
    overflow-y: auto;
    scrollbar-gutter: stable;

}


/* GLIDE common */
.glide {
    position: relative;
    width: 100%;
    overflow: visible;
    border-radius: 6px;
}

.leaflet-popup-content .glide__slide img,
.leaflet-popup-content>div .glide__slide img,
.leaflet-popup-content .mini-card .glide__slide img {
    width: 100% !important;
    height: 160px !important;
    object-fit: cover !important;
    border-radius: 6px !important;
}

#property-list .glide {
    width: 100%;
    max-width: 100%;
    contain: layout paint;
}

#property-list .glide__track {
    transform: translateZ(0);
    overflow: hidden;

}

#property-list .glide__slide img {
    width: 100%;
    height: 220px !important;
    object-fit: cover;
}

.leaflet-popup-content .mini-card-placeholder {
    width: 100%;
    height: 190px;
    background: linear-gradient(135deg, #f3f4f6, #e5e7eb);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    margin-bottom: 8px;
}

#property-list .property-card-placeholder {
    width: 100%;
    height: 220px;
    background: linear-gradient(135deg, #f3f4f6, #e5e7eb);
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: center;
}

#property-list .property-card-placeholder-inner {
    text-align: center;
    color: #6b7280;
    font-size: 14px;
    font-weight: 600;
}

#property-list .property-card-placeholder-inner i {
    display: block;
    font-size: 34px;
    margin-bottom: 8px;
    opacity: 0.65;
}


/* popup (mini-card) glide size */
.mini-card .glide {
    height: 190px;
}

.mini-card .glide__slide img {
    width: 100% !important;
    height: 190px;
    object-fit: cover;
    display: block;
}

/* arrows overlay */
/* arrows overlay */
.glide__arrows {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    pointer-events: none;
    z-index: 12;
    padding: 0 5px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.card:hover .glide__arrows,
.card:focus-within .glide__arrows,
.mini-card:hover .glide__arrows,
.mini-card:focus-within .glide__arrows {
    opacity: 1;
}

@media (max-width: 767.98px) {
    .glide__arrows {
        opacity: 1;
    }
    
}

.glide__arrow {
    pointer-events: all;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    border: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    cursor: pointer;
}

.glide-arrow-icon {
    display: block;
    line-height: 1;
    transform: translateY(-1px);
}


@media (max-width: 767.98px) {

    .glide__arrow {
        width: 38px;
        height: 38px;
        font-size: 24px;
    }

    .glide__arrows {
        padding: 0 10px; /* малко повече разстояние от ръбовете */
    }

    .glide-arrow-icon {
        transform: translateY(-2px); /* центриране */
    }

}


.glide__arrow:hover {
    background: rgba(0, 0, 0, 0.7);
}


/* dots (5px radius => 10px diameter) */
.glide-dots-custom {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    z-index: 15;
}

.glide-dot-custom {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.65);
    cursor: pointer;
    transition: background .15s;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.2) inset;
}

.glide-dot-custom.active {
    background: rgba(255, 255, 255, 1);
}

/* mini card styles */
.mini-card {
    width: 280px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
    overflow: hidden;
    font-family: Arial, sans-serif;
}

.mini-card-body {
    padding: 4px 6px;
    font-size: 0.86rem;
    line-height: 1.4;
}

.mini-card-price {
    font-weight: 700;
    color: #1e73be;
    margin-bottom: 4px;
    font-size: 1.1rem;
}

.mini-card-location {
    color: #555;
    margin-bottom: 6px;
    font-size: 0.97rem;
}

.mini-card a {
    font-weight: 700;
    color: #007bff;
    text-decoration: none;
}

.mini-card a:hover {
    text-decoration: underline;
}


.leaflet-popup-tip {
    display: none !important;
}

.leaflet-popup-content .btn-primary {
    color: #fff !important;
    background-color: #0d6efd !important;
    border-color: #0d6efd !important;
    font-weight: normal !important;
    text-decoration: none !important;
}

.leaflet-popup-content .btn-primary:hover {
    background-color: #0b5ed7 !important;
    border-color: #0a58ca !important;
    color: #fff !important;
}

/* Leaflet popup close button */
.leaflet-popup-close-button {
    color: #fff !important;
    /* бял текст/икона */
    text-shadow: 0 0 2px #000, 0 0 2px #000;
    /* малка черна сянка за контраст */
    font-size: 18px;
    /* можеш да регулираш размера */
    opacity: 1;
    /* премахва полупрозрачност, ако има */
}

.leaflet-popup-close-button:hover {
    color: #fff;
    text-shadow: 0 0 1px #000, 0 0 2px #000;
}


/* Sorting bar */
.sort-select {
    min-width: 180px;
}

.property-count.text-muted.fw-semibold {
    font-size: 0.95rem;
    color: #555 !important;
}

.sort-select.form-select.form-select-sm {
    border-radius: 6px !important;
    background-color: #fff !important;
    border: 1px solid #dee2e6 !important;
    font-size: 0.9rem !important;
    padding: 2px 6px !important;
    color: #333 !important;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.sort-select.form-select.form-select-sm:hover {
    border-color: #0d6efd !important;
    box-shadow: 0 0 4px rgba(13, 110, 253, 0.3) !important;
}

.sticky-toolbar {
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 50;
    padding-top: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid #dee2e6;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

#property-list .card {
    margin-bottom: 0.50rem;
}

/* === Цялата mini-card popup е кликаема === */
.mini-card {
    cursor: pointer;
    /* показва, че е кликаема */
    display: block;
}

/* Снимките не блокират клика */
.mini-card img {
    pointer-events: none;
}

/* Glide стрелките и dots остават интерактивни */
.glide__arrow,
.glide-dot-custom {
    pointer-events: auto;
}

/* Leaflet close button "x" остава интерактивен */
.leaflet-popup-close-button {
    pointer-events: auto;
    cursor: pointer;
}

/* Картичките в списъка (#property-list) също показват pointer */
#property-list .card {
    cursor: pointer;
}
#property-list .card-body {
    padding: 6px 8px 2px;
}

#property-list .card-body > *:last-child {
    margin-bottom: 0;
}

#property-list .card-text {
    font-size: 0.84rem;
    line-height: 1.25;
}
/* ============================
   BUILDINGS = PROPERTIES (mobile parity)
   ============================ */
#building-list .card-body {
    padding: 6px 8px 2px;
}

#building-list .card-body > *:last-child {
    margin-bottom: 0;
}

#building-list.row {
    margin-left: 0;
    margin-right: 0;
}


/* === POPUP: махаме излишния въздух отдолу === */
.leaflet-popup-content .mini-card-body {
    padding: 6px 8px 4px !important;
}

.leaflet-popup-content .mini-card-body > *:last-child {
    margin-bottom: 0 !important;
}

.price-bubble {
    background: rgba(13, 110, 253, 0.7);
    color: #fff;
    font-weight: 600;
    font-size: 13px;
    padding: 2px 4px;
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    white-space: nowrap;
    transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
    z-index: 2000;
    /* винаги над кръглите маркери */
    display: flex;
    /* ново */
    align-items: center;
    /* вертикално центриране */
    justify-content: center;
    /* хоризонтално центриране */
    text-align: center;
    /* допълнително подсигуряване */

}

/* === Hover ефект за ценовите балончета === */
.price-marker.hover .price-bubble,
.price-bubble:hover {
    background: #ff5722 !important;
    transform: scale(1.1);
    z-index: 2000;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
}

/* 1️⃣ Кръглите маркери при hover от карта или картичка */
.leaflet-interactive.hover,
.leaflet-interactive:hover {
    fill: #ff5722 !important;
    stroke: #fff !important;
    stroke-width: 2px;
    z-index: 10000 !important;
    filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.3));
}

/* 2️⃣ Ценовите маркери да излизат най-отпред и при hover на картата */
.price-marker.hover,
.price-marker:hover {
    z-index: 2147483647 !important;
    transform: scale(1.05);
}

/* 3️⃣ Вътрешният балон да се оцветява при всякакъв hover */
.price-marker.hover .price-bubble,
.price-marker:hover .price-bubble,
.price-bubble.hover,
.price-bubble:hover {
    background: #ff5722 !important;
    color: #fff !important;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
}

.circle-marker .circle {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: rgba(13, 110, 253, 0.7);
    border: 1px solid #fff;
    transition: all 0.2s;
    z-index: 500;
    /* под балончета */
}

.circle-marker.hover .circle {
    background-color: #ff5722;
    transform: scale(1.1);
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.4);
}
.circle-marker.hover,
.circle-marker:hover {
    z-index: 2147483647 !important;
}

/* ============================
BUILDINGS — card slider
============================ */
#building-list .glide {
    width: 100%;
    height: 220px;
}

#building-list .glide__slide img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-radius: 6px 6px 6px 6px;
}

/* ============================
       BUILDINGS — popup slider
       ============================ */
.leaflet-popup-content .glide {
    width: 100%;
    height: 160px;
    margin-bottom: 8px;
}

.leaflet-popup-content .glide__slide img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    border-radius: 6px;
}

/* ============================
BUILDING MARKER hover ring
============================ */
.building-thumb-marker {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid white;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.building-thumb-marker img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.building-thumb-marker.hover {
    transform: scale(1.15);
    box-shadow: 0 0 0 3px #d33;
}

.building-circle-marker {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #999;
    border: 2px solid white;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.building-circle-marker.hover {
    transform: scale(1.4);
    box-shadow: 0 0 0 3px #d33;
}

#building-list .card {
    cursor: pointer;
}

/* BUILDING card title (list) */
#building-list .card-title {
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 6px;
    line-height: 1.25;
}
/* BUILDING popup title */
.building-mini-title {
    font-weight: 700;
    line-height: 1.15;
    margin-bottom: 6px;
    margin-top: 0;
}

#building-list .card-text {
    font-size: 0.84rem;
    margin-bottom: 2px;
    line-height: 1.25;
}


/* =========================
   PREMIUM BADGE
   ========================= */

.card,
.mini-card {
    position: relative;
}

.premium-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 5;

    width: 26px;
    height: 26px;
    border-radius: 50%;

    background: linear-gradient(135deg, #f5c542, #d4a017);
    color: #fff;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 14px;
    font-weight: bold;

    box-shadow: 0 2px 6px rgba(0,0,0,0.35);
    pointer-events: none;
}

/* Малко по-малка в popup */
.mini-card .premium-badge {
    width: 22px;
    height: 22px;
    font-size: 12px;
    top: 6px;
    left: 6px;
}

/* === HOME CARD IMAGE FIX === */
.card .glide,
.card .glide__track,
.card .glide__slides,
.card .glide__slide {
    width: 100%;
}

.card .glide__slide img {
    display: block;      /* 🔑 маха inline gap */
    width: 100%;
    height: 220px;
    object-fit: cover;
}

/* =========================
   /* =========================
   STATUS RIBBON (CORRECT)
========================= */

.card,
.mini-card {
    position: relative;
    overflow: hidden;
}

.status-ribbon {
    position: absolute;
    top: 28px;
    left: -58px;
    width: 200px;
    height: 28px;
    z-index: 5;
    pointer-events: none;
}

.status-ribbon span {
    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.2px;
    color: #fff;
    text-transform: uppercase;

    transform: rotate(-45deg);
}
/* RESERVED */
.status-ribbon.is-reserved span {
    background: rgba(255, 165, 0, 0.95);
}

/* SOLD */
.status-ribbon.is-sold span {
    background: rgba(220, 53, 69, 0.95);
}

/* === BUILDINGS: mobile text compact === */
@media (max-width: 767.98px) {
    #building-list .card-title {
        line-height: 1.15;
        margin-bottom: 10px;
    }

    #building-list .card-text {
        line-height: 1.15;
        margin-bottom: 2px !important;
    }

    #building-list .card-text small {
        line-height: 1.15;
        display: inline;
    }
}