/* Map canvas */
.el-locationmap .el-map {
    width: 100%;
}

/* HTML marker (OverlayView; works with and without a Map ID).
   Override these in your own CSS to add a background, shape, border, shadow…
   e.g. .el-locationmap-marker { background:#fff; border-radius:50%; padding:6px;
   box-shadow:0 2px 6px rgba(0,0,0,.3); } */
.el-locationmap-marker {
    transform: translate(-50%, -50%);
    cursor: pointer;
}

.el-locationmap-marker-img {
    display: block;
    height: var(--el-marker-h, 40px);
    width: auto;
    max-width: none;
    aspect-ratio: auto;
    object-fit: fill;
}

/* Bounce the icon (not the wrapper, so the centring transform stays intact)
   while hovering its list item. */
.el-locationmap-marker.el-bounce .el-locationmap-marker-img {
    animation: el-locationmap-bounce .6s ease infinite;
}

@keyframes el-locationmap-bounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}

/* Panel: sidebar column */
.el-locationmap .el-panel {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Styled panels (card/tile) keep the box itself unpadded so the footer divider
   runs edge to edge; the inner padding is applied to the list and footer below.
   This also neutralises the intrinsic padding UIkit gives .uk-tile. */
.el-locationmap .el-panel.uk-card,
.el-locationmap .el-panel.uk-tile {
    padding: 0;
}

.el-locationmap .el-panel-pad-small  { --el-panel-padding: 15px; }
.el-locationmap .el-panel-pad-medium { --el-panel-padding: 30px; }
.el-locationmap .el-panel-pad-large  { --el-panel-padding: 40px; }

/* Location list */
.el-locationmap .el-list {
    flex: 1;
    overflow-y: auto;
    padding: 0;
    list-style: none;
}

/* Scoped away from grid mode: this selector outranks .uk-grid, so setting the
   margin here would cancel the grid gutters. */
.el-locationmap .el-list:not(.el-list-grid) {
    margin: 0;
}

.el-locationmap [class*="el-panel-pad-"] .el-list {
    padding: var(--el-panel-padding);
}

/* Location grid: the panel spans the full width above or below the map, so the
   list becomes a UIkit grid and must not scroll or stretch like a sidebar. */
.el-locationmap .el-list.el-list-grid {
    flex: none;
    overflow: visible;
}

/* List item. The <li> is only the hit area and, in grid mode, the grid cell;
   the flex row and any card or tile styling live on .el-item-inner, so a card
   never picks up the grid's own cell padding. */
.el-locationmap .el-item {
    cursor: pointer;
}

.el-locationmap .el-item-inner {
    display: flex;
    align-items: flex-start;
    transition: background .15s;
}

.el-locationmap .el-item-inner.uk-flex-middle {
    align-items: center;
}

/* Boxed items need breathing room where a plain list relies on dividers. */
.el-locationmap .el-list-cards:not(.el-list-grid) .el-item + .el-item {
    margin-top: 20px;
}

/* A card fills its grid cell so a row of locations lines up even when one of
   them carries more text than the others. */
.el-locationmap .el-list-grid .el-item-inner {
    height: 100%;
    box-sizing: border-box;
}

/* Icon */
.el-locationmap .el-icon {
    flex-shrink: 0;
    margin-right: 12px;
    opacity: .6;
}

/* Item content */
.el-locationmap .el-item-content {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.el-locationmap .el-address,
.el-locationmap .el-phone {
    display: block;
}

.el-locationmap .el-link {
    display: inline-block;
}

.el-locationmap .el-link:not(.uk-button) {
    display: block;
    font-size: .875em;
}

/* Panel footer: spans edge to edge; horizontal padding only aligns the button
   with the list items above it. */
.el-locationmap .el-panel-footer {
    padding: 12px 20px;
    border-top: 1px solid rgba(0, 0, 0, .08);
}

.el-locationmap [class*="el-panel-pad-"] .el-panel-footer {
    padding-left: var(--el-panel-padding);
    padding-right: var(--el-panel-padding);
}

.el-locationmap .el-reset {
    width: 100%;
}

/* Consent overlay */
.el-locationmap .el-consent-overlay {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    background: #f0f0f0;
}

.el-locationmap .el-consent-card {
    padding: 20px;
}

/* OpenStreetMap (Leaflet) ------------------------------------------------- */

/* Leaflet positions the icon container it creates; our own marker element sits
   inside it and keeps the centring transform, so no icon size has to be known
   up front. The container class replaces Leaflet's .leaflet-div-icon, which is
   why it needs no background or border reset. */
.el-locationmap .el-locationmap-divicon {
    width: auto;
    height: auto;
}

/* Default OpenStreetMap marker: an inline SVG pin, anchored on its tip rather
   than its centre. Recolour it with --el-marker-color. */
.el-locationmap-marker-pin {
    transform: translate(-50%, -100%);
    color: var(--el-marker-color, #e04141);
    line-height: 0;
}

/* The pin carries its size in CSS, not in width/height attributes. UIkit sets
   `svg { max-width: 100%; height: auto }` on every SVG, and Leaflet's icon
   container has no width of its own, so the percentage resolves against
   nothing and the pin collapses to 0x0. Resize it with --el-pin-width and
   --el-pin-height. */
.el-locationmap-marker-pin .el-locationmap-marker-svg {
    display: block;
    width: var(--el-pin-width, 26px);
    height: var(--el-pin-height, 38px);
    max-width: none;
    aspect-ratio: auto;
    object-fit: fill;
}

.el-locationmap-marker-pin.el-active .el-locationmap-marker-svg {
    color: var(--el-marker-color-active, var(--el-marker-color, #e04141));
    filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .35));
}

.el-locationmap-marker.el-bounce .el-locationmap-marker-svg {
    animation: el-locationmap-bounce .6s ease infinite;
}

/* The map is a grid child; Leaflet's panes must not escape it. */
.el-locationmap .el-map.leaflet-container {
    background: #ddd;
    font: inherit;
}

.el-locationmap .leaflet-popup-content {
    margin: 12px 16px;
}