/* Map markers: puck, lot badges, destination pin. */

/* ── Puck ───────────────────────────────────────────────────────────────── */
.puck { position: relative; width: 28px; height: 28px; }
.puck-accuracy {
    position: absolute; left: 50%; top: 50%; width: 64px; height: 64px;
    transform: translate(-50%, -50%) scale(var(--map-scale, 1)); border-radius: 50%;
    background: radial-gradient(circle, rgba(59,130,246,0.25), rgba(59,130,246,0));
}
.puck-arrow {
    position: absolute; left: 50%; top: 50%; width: 0; height: 0;
    transform: translate(-50%, -60%) scale(var(--map-scale, 1));
    border-left: 11px solid transparent; border-right: 11px solid transparent;
    border-bottom: 26px solid #3b82f6;
    filter: drop-shadow(0 2px 5px rgba(0,0,0,0.5));
}
.puck-arrow::after {
    content: ''; position: absolute; left: -7px; top: 17px; width: 14px; height: 14px;
    background: #fff; border-radius: 50%; box-shadow: 0 0 0 3px #3b82f6;
}
/* Double the arrow's size while actively driving so it reads at speed.
   --map-scale (set per-zoom in JS) keeps it sized to the map, not the screen. */
.puck.driving .puck-arrow { transform: translate(-50%, -60%) scale(calc(var(--map-scale, 1) * 2)); }
.puck.driving .puck-accuracy { transform: translate(-50%, -50%) scale(calc(var(--map-scale, 1) * 2)); }

/* ── Garage pin (color = availability, $ = price) ────────────────────────── */
.lot-pin {
    /* NOTE: do NOT set position:relative here — it overrides Mapbox's marker
       position:absolute and stretches the pin to full map width. The marker's
       own position:absolute is the containing block for ::after. */
    display: flex; align-items: center; justify-content: center;
    width: max-content; min-width: 38px; height: 34px; padding: 0 10px;
    background: var(--pin-color, #22c55e); border-radius: 17px;
    border: 2px solid rgba(255,255,255,0.92);
    box-shadow: 0 6px 14px rgba(0,0,0,0.45);
    font-family: -apple-system, 'Segoe UI', sans-serif;
    transform: translateY(-9px); /* float above the location point */
}
/* Tappable in the option-list phases — give it a press affordance. */
.lot-pin-clickable { cursor: pointer; transition: transform 0.1s ease; }
.lot-pin-clickable:active { transform: translateY(-9px) scale(0.94); }
.lot-pin::after { /* pointer stem */
    content: ''; position: absolute; left: 50%; bottom: -7px; transform: translateX(-50%);
    border-left: 7px solid transparent; border-right: 7px solid transparent;
    border-top: 9px solid var(--pin-color, #22c55e);
    filter: drop-shadow(0 2px 1px rgba(0,0,0,0.3));
}
.lot-pin-pct {
    color: #0b0e14; font-weight: 800; font-size: 14px; line-height: 1; padding: 0 2px;
    text-shadow: 0 1px 1px rgba(255,255,255,0.25);
}
.lot-pin-dollars {
    background: rgba(0,0,0,0.26); color: #fff; border-radius: 9px;
    padding: 2px 7px; font-weight: 800; font-size: 14px; letter-spacing: 1px; line-height: 1;
}

/* ── Destination pin ────────────────────────────────────────────────────── */
.dest-pin {
    width: 22px; height: 22px; background: #ef4444; border: 3px solid #fff; border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg) translateY(-4px); box-shadow: 0 4px 12px rgba(0,0,0,0.45);
}

/* Hide Mapbox logo/controls for the head-unit look (keep attribution accessible but subtle) */
.mapboxgl-ctrl-logo { opacity: 0.35; }
.mapboxgl-ctrl-bottom-right { opacity: 0.4; }