.tx-stncl .stncl-map {
    width: 100%;
    min-height: 300px;
    /* Match the canvas radius below so the container's own box (background,
       any border) is rounded too. No overflow:hidden here on purpose — that
       would clip edge popups, which are siblings of the canvas. */
    border-radius: 1.5rem;
}

/* Rounded map corners (~ Tailwind rounded-3xl). Applied to the WebGL <canvas>
   itself — a rounded parent with overflow:hidden does NOT reliably clip the
   GPU-composited canvas, but border-radius on the canvas element does. Popups
   and controls are siblings of the canvas, so they stay unclipped. */
.tx-stncl .stncl-map .maplibregl-canvas-container,
.tx-stncl .stncl-map .maplibregl-canvas {
    border-radius: 1.5rem;
}

.tx-stncl .stncl-map-error {
    padding: 1rem;
    color: #842029;
    background: #f8d7da;
    border-radius: 4px;
}

/* Legend below the map (categories + areas), centered, tertiary-style toggles */
.tx-stncl .stncl-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
    margin: 0;
    padding: 1.5rem; /* ~ Tailwind p-6 */
}

/*
 * Dedicated pill look for the legend toggles (no theme `btn` classes). The
 * resting state is a soft petrol tint; the active state inverts to solid petrol
 * with white text. There is no dimmed/disabled state — an inactive button just
 * shows the tint, so "nothing selected" reads as a neutral, fully usable row.
 *
 * The dot and label are centred with a tight line-height so alignment does not
 * depend on the font's line box; `padding-block` alone sets the pill height.
 */
.tx-stncl .stncl-legend-btn {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin: 0;
    padding: .6rem .8rem;
    font: inherit;
    font-family: var(--font-fira, "Fira Sans", ui-sans-serif, system-ui, sans-serif);
    line-height: 1;
    color: #003f52;
    background-color: #E5EBED;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    transition: color .15s ease, background-color .15s ease;
}

.tx-stncl .stncl-legend-btn:hover {
    background-color: #d5dfe2;
}

.tx-stncl .stncl-legend-btn.is-active {
    color: #fff;
    background-color: #003f52;
}

.tx-stncl .stncl-legend-btn.is-active:hover {
    background-color: #003748;
}

.tx-stncl .stncl-legend-label {
    line-height: 1;
}

.tx-stncl .stncl-legend-dot {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    box-sizing: border-box;
    border-radius: 50%;
    display: inline-block;
    /* Same white ring the markers wear on the map. */
    border: 2px solid #fff;
}

/* Popup / tooltip */
.tx-stncl .maplibregl-popup-content {
    padding: 1rem 1.15rem;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
    font-size: 1rem;
    line-height: 1.5;
    color: #003f52;
}

.tx-stncl .maplibregl-popup-close-button {
    /* A normal "×" in the top-right corner of the tooltip. */
    top: 0;
    right: 0;
    padding: .2rem .5rem;
    font-size: 20px;
    line-height: 1;
    color: #003f52;
    background: transparent;
    border: 0;
    border-radius: 0;
    cursor: pointer;
    transition: color .15s ease;
}

.tx-stncl .maplibregl-popup-close-button:hover {
    color: #f2ac25;
    background: transparent;
}

/* "Weitere Informationen" — styled like a normal ENTEGA text link. */
.tx-stncl .stncl-popup-more {
    margin: .5rem 0 0;
}

.tx-stncl .stncl-popup-more-link {
    color: #003f52;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.tx-stncl .stncl-popup-more-link:hover {
    color: #f2ac25;
}

.tx-stncl .stncl-popup-title {
    margin: 0 0 .5rem;
    font-size: 1.2rem;
    line-height: 1.25;
    font-weight: 700;
    color: #003f52;
}

.tx-stncl .stncl-popup-image {
    display: block;
    max-width: 100%;
    height: auto;
    margin-bottom: .6rem;
    border-radius: 6px;
}

.tx-stncl .stncl-popup-address {
    margin: 0 0 .5rem;
    font-size: .95rem;
    line-height: 1.4;
    color: #5a7c86; /* blue-400 — muted but readable */
    white-space: pre-line; /* keep line breaks in multi-line addresses */
}

.tx-stncl .stncl-popup-description {
    font-size: .95rem;
    line-height: 1.5;
}

/* POI pin: a coloured circle (background-color set inline per POI). */
.tx-stncl .stncl-marker-dot,
.stncl-marker-dot {
    width: 18px;
    height: 18px;
    box-sizing: border-box;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .25);
    cursor: pointer;
}