.shortcode-map {
    height: 500px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0px 3px 6px #00000029;
    position: relative;
    width: 100%;
}

.shortcode-map.loading .marker {
    display: none;
}

.shortcode-map.loading::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.6);
}

.shortcode-map.loading::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 28px;
    height: 28px;
    margin: -14px 0 0 -14px;
    border: 3px solid var(--blue-md);
    border-top-color: transparent;
    border-radius: 50%;
    animation: shortcode-map-spin 0.7s linear infinite;
}

@keyframes shortcode-map-spin {
    to {
        transform: rotate(360deg);
    }
}

.shortcode-map__pin {
    position: relative;
    width: 32px;
    color: var(--blue-md);
    cursor: pointer;
    transform-origin: 50% 100%;
    transition: transform 0.2s ease;
}

.shortcode-map__pin:hover {
    transform: scale(1.1);
}

.shortcode-map__pin.is-active {
    /* !important: overrides the per-location pin_color applied as an inline
       style.color (see add_marker_sc() in map.js) so every selected pin, on
       every map block, reads the same brand color regardless of its own color. */
    color: var(--purple-md) !important;
    transform: scale(1.5);
    z-index: 10;
}

/* The teardrop silhouette. get_icon() hands back <span class="icon NAME"><svg>,
   so the pin is .shortcode-map__pin > .icon > svg — the wrapper has to be given
   the box or the svg's percentages have nothing to resolve against. Scoped to
   the direct child so the glyph in the pin head, which is a sibling of this
   wrapper, keeps its own sizing and stays out of the silhouette's shadow. (The
   bare-svg selector is a belt-and-braces fallback for an unwrapped get_icon.) */
.shortcode-map__pin > .icon {
    display: block;
    width: 100%;
    line-height: 0;
}

.shortcode-map__pin > .icon > svg,
.shortcode-map__pin > svg {
    display: block;
    width: 100%;
    height: auto;

    /* White keyline so pins that overlap in the metro stay separable. Drawn as
       a stroke behind the fill rather than as four offset drop-shadows: it's a
       single paint, where the shadow stack would be re-filtered on every pan.
       stroke-width is in viewBox units (384 wide), so ~18 reads as 1px at the
       pin's rendered size and thickens with the is-active scale for free.

       overflow is load-bearing: the teardrop is drawn flush to all four edges
       of its viewBox, and a stroke straddles the path, so its outer half lands
       outside the viewport and the UA's overflow:hidden shears the keyline flat
       at the sides, crown and tip. */
    stroke: var(--white);
    stroke-width: 18;
    paint-order: stroke;
    overflow: visible;

    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.25));
}

.shortcode-map__pin.is-active > .icon > svg,
.shortcode-map__pin.is-active > svg {
    stroke-width: 24;
    filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.35));
}

/* Glyph pin (data-pin-icon, locations finder): a disc that fills the pin-head
   cutout with the pin's own color and carries the location's map_pin_icon. The
   is-active scale on the parent scales it for free.

   The cutout is a circle of r=64 in the 384-wide viewBox — 33% of the pin — so
   at 44% the disc clears it by ~2px on every side. That margin is deliberate:
   the keyline above strokes the cutout's edge too, and the disc has to cover
   the half of that stroke which falls inside the hole. */
.shortcode-map__pin__label {
    position: absolute;
    top: 37.5%; /* pin-head circle center (cy 192 of the 512-tall viewBox) */
    left: 50%;
    transform: translate(-50%, -50%);
    width: 44%;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: currentColor;
    pointer-events: none;
}

/* A square box, sized off the disc rather than off the glyph: the icon set
   mixes viewBox ratios, and preserveAspectRatio then fits a tall glyph and a
   wide one inside the same circle. 52% of the disc lands the glyph inside the
   cutout with room to breathe instead of crowding the pin's shoulders.
   currentColor is re-pointed at white here — the disc behind it is painting
   itself with the pin color it inherited. */
.shortcode-map__pin__label .icon,
.shortcode-map__pin__label > svg {
    display: block;
    width: 80%;
    height: 80%;
    line-height: 0;
    color: var(--white);
}

.shortcode-map__pin__label .icon > svg {
    display: block;
    width: 100%;
    height: 100%;
}

.shortcode-map__pin__label svg {
    fill: currentColor;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* MARKER POPUP (Google InfoWindow) */

/* Tame Google's InfoWindow chrome so .map-popup controls the whole card:
   no inner padding (image goes edge-to-edge), rounded corners, no focus ring. */
.gm-style .gm-style-iw-c {
    top: -10px !important;
    padding: 0 !important;
    border: none !important;
    outline: none !important;
    border-radius: 14px !important;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.18) !important;
    overflow: hidden !important;
}
.gm-style .gm-style-iw-tc {
    top: -10px !important;
}

.gm-style .gm-style-iw-c:focus,
.gm-style .gm-style-iw-c:focus-visible {
    outline: none !important;
}

/* overflow-y: auto (not hidden) matters here: Google sets an inline max-height on this
   element whenever the marker doesn't leave enough room for the popup, and overflow:
   hidden would just crop the card at that height instead of letting it scroll. */
.gm-style .gm-style-iw-d {
    overflow-y: auto !important;
    padding: 0 !important;
    max-width: none !important;
}

/* Collapse the reserved header strip (.gm-style-iw-ch / -chr) so the content —
   the image — sits flush to the rounded top edge instead of below a white gap. */
.gm-style .gm-style-iw-ch,
.gm-style .gm-style-iw-chr {
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
}

/* Close button (×): a small, consistent chip pinned inside the card's top-right,
   legible whether it sits over the image or the white body. */
.gm-style .gm-style-iw button.gm-ui-hover-effect {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    width: 28px !important;
    height: 28px !important;
    margin: 0 !important;
    background: rgba(255, 255, 255, 0.92) !important;
    border: 1px solid var(--gray) !important;
    border-radius: 50% !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18) !important;
    opacity: 1 !important;
    z-index: 3 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.gm-style .gm-style-iw button.gm-ui-hover-effect > span {
    width: 14px !important;
    height: 14px !important;
    margin: 0 !important;
    background-color: var(--blue-dk) !important;
}

.map-popup {
    width: 280px;
    max-width: 100%;
    background: var(--white);
}

.map-popup__media {
    width: 100%;
    height: 150px;
    overflow: hidden;
}

.map-popup__media img,
.map-popup__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.map-popup__body {
    padding: 18px 20px 20px;
}

.map-popup__title {
    max-width: 88%;
    margin: 0 0 8px;
    font-family: "Cachet";
    font-weight: bold;
    font-size: 16px;
    line-height: 1.1;
    letter-spacing: -0.2px;
    text-transform: uppercase;
    color: var(--blue-dk);
}

.map-popup__address {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0 0 8px;
    white-space: pre-line;
    line-height: 1.35;
}

.map-popup__address .icon {
    flex: 0 0 auto;
    margin-top: 3px;
    font-size: 15px;
}

/* Force the brand color onto the pin — Google's .gm-style sets a near-black
   text color the bare .icon would otherwise inherit through currentColor. */
.map-popup .map-popup__address .icon,
.map-popup .map-popup__address .icon svg {
    color: var(--blue-dk);
    fill: var(--blue-dk);
}

.map-popup__phone {
    margin: 0 0 14px;
}

.map-popup__phone a {
    color: var(--blue-dk);
    font-weight: bold;
    text-decoration: none;
}

.map-popup__phone a:hover {
    text-decoration: underline;
}

.map-popup__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.map-popup__actions .btn {
    padding: 10px 16px;
}

/* Secondary action: blue outline so it reads against the white popup card
   (the global .btn--white is white-on-white and would vanish here). */
.map-popup__actions .btn.btn--white {
    background: var(--white);
    border: 1px solid var(--blue-dk);
}
.map-popup__actions .btn.btn--white .btn-text {
    color: var(--blue-dk);
}
.map-popup__actions .btn.btn--white:hover {
    background: var(--blue-dk);
}
.map-popup__actions .btn.btn--white:hover .btn-text {
    color: var(--white);
}

@container (max-width: 700px) {
    .gm-style .gm-style-iw-c {
        max-width: 250px;
    }
    /* Narrow containers don't have the desktop's room to just grow the popup, so this
       overrides the max-height: none above and goes back to a capped, scrollable card. */
    .gm-style .gm-style-iw-d {
        max-height: 150px !important;
        overflow-y: auto !important;
    }
}