/* Allow JS-assigned z-index to control marker layering (green above yellow above red)
 * The map-container uses isolation:isolate + z-index:1 so these values stay inside the map
 * stacking context and cannot bleed above the page header. */
.maplibregl-marker {
    z-index: 10;
}

/* Contain marker z-index within the map — prevents markers floating above the page header.
 * isolation:isolate only creates a new stacking context when the element itself has a z-index,
 * so we set z-index:1 to activate it. The popup card (child) is NOT clipped since we don't use overflow:hidden. */
.map-container {
    isolation: isolate;
    position: relative;
    z-index: 1;
    /* GPU compositing — promote to own layer for smooth pan/zoom */
    transform: translateZ(0);
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    contain: layout style;
}

/* Ensure map controls (search, fuel selector) always appear on top of ALL markers.
 * Clusters use z-index:10000 in JS so controls need to be above that. */
.map-controls-overlay {
    z-index: 10001;
    position: relative;
}


/* Teardrop-pin pointer tip (the app marker shape). A downward CSS triangle in
 * the live tier colour — it reads --fr-pill (set on the marker root by
 * applyTierColor) so the tip, ring and price pill all retint together on a pan.
 * Sits directly under the logo ring; the bottom anchor lands on its point. */
.fr-pin-tip {
    width: 0;
    height: 0;
    margin-top: -1px; /* kiss the ring bottom, no seam */
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 7px solid var(--fr-pill, var(--color-muted));
    z-index: 1;
}

.fr-marker-alert {
    position: absolute;
    top: -7px;
    right: -24px;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 15px;
    padding: 0 5px;
    border: 1px solid var(--color-card);
    border-radius: 999px;
    background: var(--color-price-dear);
    color: var(--color-price-dear-content);
    font: 800 9px system-ui, -apple-system, sans-serif;
    line-height: 1;
    box-shadow: 0 2px 5px color-mix(in oklch, var(--color-base-content) 28%, transparent);
    white-space: nowrap;
    pointer-events: none;
}

/* Force MapLibre Attribution to be a simple, non-expanding text overlay.
   A SOLID dark backing strip sits behind the whole band so the 9px white text
   meets WCAG AA over light AND dark map tiles. (Previously the background was
   transparent and the inner wrapper used opacity:0.4, which composited the
   whole subtree — including any JS-side backing — down to ~1.1:1.) */
.maplibregl-ctrl-attrib {
    background: color-mix(in oklch, var(--color-neutral) 85%, transparent) !important;
    border: none !important;
    padding: 1px 5px !important;
    border-radius: 3px !important;
    box-shadow: none !important;
}

.maplibregl-ctrl-attrib-inner {
    display: inline-block !important;
    font-size: 9px !important;
    /* opacity stays 1: white text must reach full strength over its own backing
       strip. The text-shadow is kept only as belt-and-braces legibility. */
    opacity: 1 !important;
    text-shadow: 0 1px 1px color-mix(in oklch, var(--color-neutral) 80%, transparent), 0 -1px 1px color-mix(in oklch, var(--color-neutral) 80%, transparent), 1px 0 1px color-mix(in oklch, var(--color-neutral) 80%, transparent), -1px 0 1px color-mix(in oklch, var(--color-neutral) 80%, transparent) !important;
    pointer-events: none !important;
    white-space: nowrap !important;
}

.maplibregl-ctrl-attrib-inner a {
    color: var(--color-neutral-content) !important;
    text-decoration: none !important;
    pointer-events: auto !important; /* Allow clicking the links */
}

/* Hide the expand 'i' button completely */
.maplibregl-ctrl-attrib-button {
    display: none !important;
}

@media (min-width: 1024px) {
    /* Keep attribution visible but out of the FuelRadar toolbar and zoom pill. */
    .maplibregl-ctrl-bottom-right .maplibregl-ctrl-attrib {
        margin-right: 4.5rem !important;
        margin-bottom: 0.5rem !important;
    }
}

/* Scale bar — bottom-left. Push it up so it clears the mobile branded footer
   (now ~56 px for the branded footer strip) and any safe-area inset. Also
   drop pointer events so the bar doesn't intercept map drags. */
.maplibregl-ctrl-bottom-left {
    margin-bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
    pointer-events: none;
}

.maplibregl-ctrl-scale {
    background: color-mix(in oklch, var(--color-card) 85%, transparent) !important;
    border-color: color-mix(in oklch, var(--color-card-content) 20%, transparent) !important;
    color: var(--color-card-content) !important;
    font-weight: 600;
}

@media (min-width: 1024px) {
    /* Desktop has no mobile branded footer overlapping. Restore default margin. */
    .maplibregl-ctrl-bottom-left {
        margin-bottom: 8px !important;
    }
}


/* ─────────────────────────────────────────────────────────────
 * Station popup — themed override of maplibregl's built-in popup.
 * MapLibre handles ALL positioning, tail rendering, and re-anchoring
 * on viewport edges via the `fr-station-popup` className we set in JS.
 * ───────────────────────────────────────────────────────────── */
.fr-station-popup {
    z-index: 10002;
    max-width: 340px !important;
}

.fr-station-popup .maplibregl-popup-content {
    padding: 0;
    background: var(--color-card);
    color: var(--color-card-content);
    border-radius: 20px;
    box-shadow: 0 12px 28px -12px color-mix(in oklch, var(--color-base-content) 30%, transparent), 0 4px 10px -4px color-mix(in oklch, var(--color-base-content) 12%, transparent);
    border: 1px solid color-mix(in oklch, var(--color-base-content) 8%, transparent);
    overflow: hidden;
    /* Cap popup body so it can never overflow short maps. Inner content scrolls. */
    max-height: min(60vh, 420px);
    overflow-y: auto;
}

html.dark .fr-station-popup .maplibregl-popup-content,
.dark .fr-station-popup .maplibregl-popup-content {
    background: var(--color-card);
    color: var(--color-card-content);
    border-color: color-mix(in oklch, var(--color-card-content) 10%, transparent);
}

/* Tail (the connecting chevron). MapLibre builds the triangle by colouring ONLY the
 * border facing the popup body and leaving the others transparent. Overriding all four
 * borders turns it into a solid square — colour per anchor instead. */
.fr-station-popup .maplibregl-popup-tip {
    filter: drop-shadow(0 2px 3px color-mix(in oklch, var(--color-base-content) 18%, transparent));
}

/* Light mode — tip points away from popup body. The coloured border is on the side
 * touching the popup; transparent borders form the triangle's silhouette. */
.fr-station-popup.maplibregl-popup-anchor-top      .maplibregl-popup-tip { border-bottom-color: var(--color-card); }
.fr-station-popup.maplibregl-popup-anchor-bottom   .maplibregl-popup-tip { border-top-color:    var(--color-card); }
.fr-station-popup.maplibregl-popup-anchor-left     .maplibregl-popup-tip { border-right-color:  var(--color-card); }
.fr-station-popup.maplibregl-popup-anchor-right    .maplibregl-popup-tip { border-left-color:   var(--color-card); }
.fr-station-popup.maplibregl-popup-anchor-top-left      .maplibregl-popup-tip { border-top-color: var(--color-card); border-left-color:  var(--color-card); }
.fr-station-popup.maplibregl-popup-anchor-top-right     .maplibregl-popup-tip { border-top-color: var(--color-card); border-right-color: var(--color-card); }
.fr-station-popup.maplibregl-popup-anchor-bottom-left   .maplibregl-popup-tip { border-bottom-color: var(--color-card); border-left-color:  var(--color-card); }
.fr-station-popup.maplibregl-popup-anchor-bottom-right  .maplibregl-popup-tip { border-bottom-color: var(--color-card); border-right-color: var(--color-card); }

/* Dark mode */
html.dark .fr-station-popup.maplibregl-popup-anchor-top      .maplibregl-popup-tip,
.dark      .fr-station-popup.maplibregl-popup-anchor-top      .maplibregl-popup-tip { border-bottom-color: var(--color-card); }
html.dark .fr-station-popup.maplibregl-popup-anchor-bottom   .maplibregl-popup-tip,
.dark      .fr-station-popup.maplibregl-popup-anchor-bottom   .maplibregl-popup-tip { border-top-color:    var(--color-card); }
html.dark .fr-station-popup.maplibregl-popup-anchor-left     .maplibregl-popup-tip,
.dark      .fr-station-popup.maplibregl-popup-anchor-left     .maplibregl-popup-tip { border-right-color:  var(--color-card); }
html.dark .fr-station-popup.maplibregl-popup-anchor-right    .maplibregl-popup-tip,
.dark      .fr-station-popup.maplibregl-popup-anchor-right    .maplibregl-popup-tip { border-left-color:   var(--color-card); }
html.dark .fr-station-popup.maplibregl-popup-anchor-top-left .maplibregl-popup-tip,
.dark      .fr-station-popup.maplibregl-popup-anchor-top-left .maplibregl-popup-tip { border-top-color: var(--color-card); border-left-color:  var(--color-card); }
html.dark .fr-station-popup.maplibregl-popup-anchor-top-right .maplibregl-popup-tip,
.dark      .fr-station-popup.maplibregl-popup-anchor-top-right .maplibregl-popup-tip { border-top-color: var(--color-card); border-right-color: var(--color-card); }
html.dark .fr-station-popup.maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip,
.dark      .fr-station-popup.maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip { border-bottom-color: var(--color-card); border-left-color:  var(--color-card); }
html.dark .fr-station-popup.maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip,
.dark      .fr-station-popup.maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip { border-bottom-color: var(--color-card); border-right-color: var(--color-card); }

/* Hide the default close button — StationQuickView renders its own */
.fr-station-popup .maplibregl-popup-close-button {
    display: none;
}