/**
 * interactiveMap.css overrides
 *
 * The map ships in the OnSite.StoreLocation package, so its own stylesheet cannot
 * be edited here. These rules style the info button and the pop-up group line that
 * interactive-map.js adds. Filter order comes from the Map Tag Group sort order in
 * Umbraco, not from here.
 */

/**
 * Filter info icon and tooltip
 */

.map-filter-info {
    position: relative;
    display: inline-block;
    margin-left: 6px;
    line-height: 0;
    vertical-align: middle;
}

/*  Filled rather than outlined: a hollow ring at this size reads as a smudge, and an
    italic "i" reads as a slash. The default pairing suits a light surface; the legend
    is painted in the accent colour by the site stylesheet, so there it inverts. */
.map-filter-info__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin: 0;
    padding: 0;
    color: #fff;
    font-family: inherit;
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
    line-height: 1;
    background: #6b7280;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.map-marker-filters__group > legend .map-filter-info__btn {
    color: var(--map-accent-color, #ee7f00);
    background: #fff;
}

.map-filter-info__btn:hover,
.map-filter-info__btn:focus-visible,
.map-filter-info__btn[aria-expanded="true"] {
    transform: scale(1.12);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.45);
}

.map-filter-info__btn:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/*  The legend sits in a fieldset that the site stylesheet paints orange with white
    text, so the icon inherits currentColor rather than using a fixed grey — it
    reads as grey on white and as soft white on the orange bar. */
.map-marker-filters__group > legend .map-filter-info {
    position: relative;
    top: -1px;
}

.map-filter-info__bubble {
    position: absolute;
    bottom: calc(100% + 9px);
    left: 50%;
    z-index: 1200;
    box-sizing: border-box;
    width: max-content;
    max-width: min(260px, calc(100vw - 32px));
    padding: 10px 12px;
    color: #16213d;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 400;
    font-style: normal;
    line-height: 1.45;
    text-align: left;
    text-transform: none;
    letter-spacing: 0;
    white-space: normal;
    background: #fff;
    border: 1px solid #d9dde5;
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(22, 33, 61, 0.18);
    transform: translateX(-50%);
}

.map-filter-info__bubble[hidden] {
    display: none;
}

.map-filter-info__bubble::after {
    position: absolute;
    top: 100%;
    left: 50%;
    width: 10px;
    height: 10px;
    background: #fff;
    border-right: 1px solid #d9dde5;
    border-bottom: 1px solid #d9dde5;
    transform: translate(-50%, -50%) rotate(45deg);
    content: "";
}

/*  Near the edges of the filter column a centred bubble would overflow the card,
    so the script flips it to align on the icon instead. */
.map-filter-info__bubble--start {
    left: -6px;
    transform: none;
}

.map-filter-info__bubble--start::after {
    left: 13px;
}

.map-filter-info__bubble--end {
    right: -6px;
    left: auto;
    transform: none;
}

.map-filter-info__bubble--end::after {
    right: 13px;
    left: auto;
}

/**
 * First filter group in the marker pop-up
 */

/*  Sits directly under .map-popup__title, at the filter chip size. Note that is
    0.88rem, not the 0.82rem of the base .map-marker-filters__option rule: the chips
    also carry --native, whose own rule wins. */
/*  The site theme styles every h3 inside .vervolg__content, which reaches the pop-up
    title and gives it a 20px margin the package had set to zero. Put back what the
    package intended; the pop-up body's own grid gap handles the spacing. */
.map-popup__card .map-popup__title {
    margin: 0;
}

/*  Name and button on one line, value under them.

    Selected through .leaflet-popup-content on purpose: Leaflet's own stylesheet gives
    every p inside a pop-up a 1.3em margin, and a bare .map-popup__group loses to it on
    specificity however late this file loads. */
.leaflet-popup-content .map-popup__group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 6px;
    margin: 0;
    font-size: 0.88rem;
    font-weight: 400;
    line-height: 1.35;
}

.map-popup__group-label {
    color: #6b7280;
}

.map-popup__group-value {
    flex: 0 0 100%;
    order: 1;
    color: #16213d;
}

/*  The second group keeps its tags as badges, so its name is put above them instead of
    beside them. Label and badges are wrapped together and sit on their own small gap:
    as separate items of the pop-up body's 0.65rem grid the label would float midway
    between the website link and the badges, reading as part of neither. */
.map-popup__group-block {
    display: grid;
    gap: 3px;
}

.map-popup__group-block .map-popup__meta {
    padding-top: 0;
}

/*  The pop-up wrapper is overflow:hidden, so inside it a floating panel is cut off -
    and it is only about 250px tall, so there is no room above the button or below it
    either. In there the panel leaves the float behind: display:contents lifts the
    button and the panel into the group's own flex row, and the panel takes a full
    line under it, making the pop-up taller instead of escaping it. */
.map-popup__group .map-filter-info {
    display: contents;
}

.map-popup__group .map-filter-info__bubble {
    position: static;
    flex: 0 0 100%;
    order: 2;
    width: auto;
    max-width: none;
    margin-top: 8px;
    transform: none;
    box-shadow: none;
}

.map-popup__group .map-filter-info__bubble::after {
    display: none;
}