.office-directory-map {
    width: 100%;
    height: 520px;
    min-height: 520px;
    max-height: 70vh;
    border-radius: 16px;
    overflow: hidden;
    background: #f4f6f7;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}

.office-directory-map.leaflet-container {
    font-family: inherit;
}

.office-card {
    height: 100%;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.office-card.is-map-active {
    transform: translateY(-2px);
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.12);
}

.office-card-meta {
    margin: 0;
    padding: 0;
    list-style: none;
}

.office-card-meta li {
    margin-bottom: 8px;
}

.office-coordinate {
    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        "Liberation Mono",
        "Courier New",
        monospace;
    direction: ltr;
    unicode-bidi: embed;
}

.office-map-popup {
    min-width: 220px;
}

.office-map-popup__title {
    margin-bottom: 6px;
    font-size: 1rem;
    font-weight: 700;
}

.office-map-popup__meta {
    margin: 0 0 8px;
    padding: 0;
    list-style: none;
}

.office-map-popup__meta li {
    margin-bottom: 4px;
}

.office-map-popup__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.office-map-popup__actions a {
    text-decoration: none;
}

html[dir="rtl"] .leaflet-control-container,
html[dir="rtl"] .leaflet-popup-content {
    direction: rtl;
    text-align: right;
}

@media (max-width: 991.98px) {
    .office-directory-map {
        height: 420px;
        min-height: 420px;
        max-height: none;
        margin-bottom: 30px;
    }
}

@media (max-width: 575.98px) {
    .office-directory-map {
        height: 360px;
        min-height: 360px;
        max-height: none;
        border-radius: 12px;
    }
}
/*
 * Akcel applies global responsive image rules.
 * Leaflet tiles and marker assets must retain Leaflet's own
 * dimensions and positioning behavior.
 */
.office-directory-map.leaflet-container img,
.office-directory-map.leaflet-container .leaflet-tile,
.office-directory-map.leaflet-container .leaflet-marker-icon,
.office-directory-map.leaflet-container .leaflet-marker-shadow {
    max-width: none !important;
    max-height: none !important;
}

.office-directory-map.leaflet-container .leaflet-tile {
    margin: 0 !important;
    padding: 0 !important;
}