/* ================================================================
   OSM Map — Carte interactive OpenStreetMap
   ================================================================ */

.osm-map {
    width: 100%;
    height: 100%;
    min-height: 300px;
    border-radius: 16px;
    overflow: hidden;
    z-index: 1;
}

/* ── Custom popup ──────────────────────────────────────────────── */
.osm-map .leaflet-popup-content-wrapper {
    border-radius: 12px;
    font-family: var(--font-rubik);
    font-size: 13px;
    color: var(--dark1);
    box-shadow: 0 6px 24px rgba(55, 36, 28, 0.16);
    padding: 0;
    overflow: hidden;
    width: 260px !important;
    max-width: 260px !important;
}

.osm-map .leaflet-popup-content {
    margin: 0 !important;
    width: 260px !important;
}

.osm-map .leaflet-popup-tip {
    box-shadow: 0 4px 16px rgba(55, 36, 28, 0.08);
}

.osm-map .leaflet-popup-close-button {
    width: 28px !important;
    height: 28px !important;
    top: 8px !important;
    right: 8px !important;
    background: var(--white) !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--dark1) !important;
    line-height: 1 !important;
    z-index: 10;
}

.osm-map .leaflet-popup-close-button:hover {
    background: var(--light-warm) !important;
    color: var(--main-color-orange) !important;
}

/* Popup link wrapper */
.osm-popup__link {
    display: block;
    text-decoration: none;
    color: inherit;
}

/* Image */
.osm-popup__img-wrap {
    width: 100%;
    /* Legacy CM small-card proportions (260x207 ≈ 1.256) */
    aspect-ratio: 260 / 207;
    overflow: hidden;
}

.osm-popup__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Body */
.osm-popup__body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 12px 14px;
}

.osm-popup__title {
    font-weight: 700;
    font-size: 13px;
    color: var(--dark1);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.osm-popup__location {
    font-size: 11px;
    color: var(--neutral-500);
    display: flex;
    align-items: center;
    gap: 4px;
}

.osm-popup__price {
    font-size: 14px;
    font-weight: 700;
    color: var(--main-color-orange);
    margin-top: 2px;
}

.osm-popup__price-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
}

.osm-popup__price--promo {
    font-size: 14px;
    font-weight: 700;
    color: var(--main-color-orange);
}

.osm-popup__price--original {
    font-size: 12px;
    font-weight: 500;
    color: var(--neutral-500, #888);
    text-decoration: line-through;
}

.osm-popup__cta {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 8px;
    padding: 7px 14px;
    background: var(--main-color);
    color: var(--dark1);
    font-family: var(--font-rubik);
    font-size: 11px;
    font-weight: 700;
    border-radius: var(--border-radius-medium);
    letter-spacing: 0.02em;
    align-self: flex-start;
    transition: background 0.2s ease, color 0.2s ease;
    box-shadow: var(--card-shadow-main);
}

.osm-popup__link:hover .osm-popup__cta {
    background: var(--main-color-orange);
    color: var(--white);
}

/* ── Custom marker pin (legacy) ────────────────────────────────── */
.osm-marker-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--dark1);
    border: 3px solid var(--white);
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.osm-marker-icon i {
    transform: rotate(45deg);
    color: var(--main-color);
    font-size: 12px;
}

/* ── Chalet marker with price ─────────────────────────────────── */
.osm-marker-chalet {
    /* absolute, jamais relative : leaflet.css positionne .leaflet-marker-icon en
       absolute ; à spécificité égale c'est l'ordre de chargement qui tranche, et
       sur les pages qui chargent leaflet.css AVANT ce fichier un relative ferait
       sortir le marqueur du flux Leaflet (popup désalignée). Reste un containing
       block valide pour le badge prix. */
    position: absolute;
    display: block;
    width: 40px !important;
    background: none !important;
    border: none !important;
    transition: transform 0.22s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.osm-marker-chalet:hover {
    transform: translateY(-4px);
}

/* Wrapper needed to position the count badge relative to the pin */
.osm-marker-chalet__pin-wrap {
    position: relative;
    display: inline-flex;
}

.osm-marker-chalet__pin {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--white);
    border: 2.5px solid var(--main-color);
    box-shadow: var(--shadow-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.osm-marker-chalet:hover .osm-marker-chalet__pin {
    border-color: var(--main-color-orange);
    box-shadow: var(--shadow-dark-hover);
}

/* Cluster variant — orange ring to signal grouping */
.osm-marker-chalet--cluster .osm-marker-chalet__pin {
    border-color: var(--main-color-orange);
    border-width: 3px;
}

.osm-marker-chalet__img {
    width: 26px;
    height: 26px;
    object-fit: contain;
}

/* Count badge — sits top-right of the pin, like a notification dot */
.osm-marker-chalet__count {
    position: absolute;
    top: -5px;
    right: -9px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    background: var(--main-color-orange);
    color: var(--white);
    font-family: var(--font-rubik);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--white);
    box-shadow: 0 2px 8px rgba(255, 115, 18, 0.45);
    white-space: nowrap;
    pointer-events: none;
    animation: badge-pop 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes badge-pop {
    from { transform: scale(0.5); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}

.osm-marker-chalet__price {
    position: absolute;
    top: 44px;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 0;
    padding: 4px 10px;
    background: var(--main-color);
    color: var(--dark1);
    font-family: var(--font-rubik);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    border-radius: var(--border-radius-medium);
    white-space: nowrap;
    width: max-content;
    box-shadow: var(--shadow-sm);
    text-align: center;
    border: 1.5px solid rgba(250, 171, 87, 0.35);
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.osm-marker-chalet:hover .osm-marker-chalet__price {
    background: var(--main-color);
    color: var(--dark1);
    border-color: var(--main-color);
}

/* LM promo + barré inside price badge */
.osm-marker-chalet__price--promo {
    font-weight: 700;
    color: black;
}

.osm-marker-chalet__price--original {
    font-weight: 400;
    font-size: 10px;
    opacity: 0.75;
    color: white;
    text-decoration: line-through;
    margin-left: 3px;
}

/* "dès" prefix inside price pill for clusters */
.osm-marker-chalet__price-from {
    font-weight: 400;
    font-size: 10px;
    opacity: 0.75;
    letter-spacing: 0.01em;
}

/* Cluster cursor hint */
.osm-marker-chalet--cluster {
    cursor: zoom-in;
}

/* ── Custom zoom controls (counter-btn) ────────────────────────── */
.osm-zoom {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 12px 12px 0 0;
}

.hostings-map-panel.is-fullscreen .osm-zoom {
    margin-right: 28px;
}

.osm-zoom .counter-btn {
    width: 36px;
    height: 36px;
    background: var(--white);
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(55, 36, 28, 0.15);
}

.osm-zoom .counter-btn__ring {
    border-color: var(--main-color);
}

.osm-zoom .counter-btn__icon {
    background: var(--main-color);
}

.osm-zoom .counter-btn--plus .counter-btn__icon {
    width: 12px;
    height: 12px;
    left: 12px;
    top: 12px;
}

.osm-zoom .counter-btn--minus .counter-btn__icon {
    width: 12px;
    height: 2px;
    left: 12px;
    top: 17px;
}

.osm-zoom .counter-btn:hover .counter-btn__ring {
    border-color: var(--dark1);
}

.osm-zoom .counter-btn:hover .counter-btn__icon {
    background: var(--dark1);
}

/* ── Card focus depuis la map ─────────────────────────────────── */
.property-card--map-focus {
    outline: 3px solid var(--main-color-orange);
    outline-offset: 2px;
    border-radius: var(--border-radius-large, 12px);
    transition: outline 0.3s ease;
}

/* ── Listing detail map — "Retour au logement" control ─────────── */
.listing-map-locate-btn {
    /* Inherits cta-button + cta-button--primary design */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 20px;
    background: var(--main-color);
    color: var(--dark1);
    font-family: var(--font-helvetica);
    font-size: 15px;
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-button);
    border: none;
    border-radius: var(--border-radius-small);
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 2px 10px rgba(55, 36, 28, 0.18);
    transition: background 0.2s ease, color 0.2s ease;
    margin: 0 0 12px 12px;
}

.listing-map-locate-btn:hover {
    background: var(--main-color-orange);
    color: var(--white);
}

.listing-map-locate-btn i {
    font-size: 15px;
}