/* ========================================================
   FRONTEND MAP STYLES
   Matches your fw-accordion BEM naming conventions
   ======================================================== */

.fw-map {
    position: relative;
    overflow: clip;
    max-width: none !important;
    width: 100%;
    /* Fallback reserved height before breakpoint-specific rules apply,
       so the block never renders collapsed while loading. */
    min-height: 420px;
}

.fw-map > * {
    height: 100%;
}

@media (min-width: 781px) {
    .fw-map .wp-block-columns {
        min-height: 65dvh;
        max-height: 65dvh;
    }
}

@media (max-width: 781px) {
    /* Mirrors the 1/1 aspect-ratio map container below plus room for the
       address field and list, so the section holds its height from the
       first paint instead of popping once content loads. */
    .fw-map .wp-block-columns {
        min-height: clamp(480px, 100vw + 200px, 720px);
    }

    .fw-map .fw-list-outer-wrapper {
        min-height: 220px;
    }
}

.fw-map .fw-list-outer-wrapper {
    overflow: scroll;
}

.fw-list-container {
    overflow-y: scroll;
    min-height: 100%;
    max-height: 100%;
}

.fw-map-container {
    width: 100%;
    height: 100%;
    min-height: inherit;
    overflow: hidden;
}

@media (max-width: 781px) {
    .fw-map .fw-map-container {
        aspect-ratio: 1/1;
        height: 100%;
        width: 100%;
    }
}

/* Optional: allow full-width blocks to stretch */
.fw-map.alignfull .fw-map-container {
    border-radius: 0;
}

.gm-style-iw-chr {
    display: none !important;
}

.fw-map-infowindow {
    max-width: 240px;
}

.fw-map-infowindow h1,
.fw-map-infowindow h2,
.fw-map-infowindow h3,
.fw-map-infowindow h4,
.fw-map-infowindow h5,
.fw-map-infowindow h6 {
    text-wrap: unset;
}

:root .fw-list-container :where(.is-layout-constrained) > *,
.fw-map-infowindow > :not(:last-child) {
    margin-block-start: 5px;
    margin-block-end: 5px;
}

.place-autocomplete-card {
    margin: 10px;
    position: relative;
    max-width: 300px;
    z-index: 100;
}

/* ========================================================
   LOADING / READY / ERROR STATES
   ======================================================== */

/* Content is hidden (not display:none) while loading so the Google Map's
   container keeps real dimensions when google.maps.Map() is constructed. */
.fw-map > .wp-block-group {
    opacity: 0;
    visibility: hidden;
    transition:
        opacity 0.3s ease 0.05s,
        visibility 0s linear 0.35s;
}

.fw-map.is-ready > .wp-block-group {
    opacity: 1;
    visibility: visible;
    transition:
        opacity 0.3s ease 0.05s,
        visibility 0s linear 0s;
}

.fw-map-status {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: var(--wp--preset--color--white, #ffffff);
    border-radius: 16px;
    opacity: 1;
    visibility: visible;
    transition:
        opacity 0.3s ease,
        visibility 0s linear 0s;
}

.fw-map.is-ready .fw-map-status {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity 0.3s ease,
        visibility 0s linear 0.3s;
}

.fw-map-status-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: var(--wp--preset--spacing--30, 16px);
}

.fw-map-spinner {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 3px solid
        color-mix(
            in srgb,
            var(--wp--preset--color--primary, #1d5d42) 20%,
            transparent
        );
    border-top-color: var(--wp--preset--color--primary, #1d5d42);
    animation: fw-map-spin 0.8s linear infinite;
}

.fw-map.is-error .fw-map-spinner {
    display: none;
}

.fw-map-status-text {
    margin: 0;
    color: var(--wp--preset--color--primary, #1d5d42);
}

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