/**
 * Lazy "Show map" placeholder for the dealer locator (ntt-group#308).
 * Plain CSS (not Tailwind) so it ships regardless of the build purge.
 */

/* The empty #facetwp-map box becomes a map-style placeholder until the
   interactive map loads. The background is a generated vector map: the real
   Southern Africa outline (Natural Earth, public domain -- a geographic shape,
   not copyrightable) with NTT pins at the actual dealer coordinates. No Google
   basemap/branding and no Maps API call, so bot/scraper pageviews cost nothing.
   Note: it's a static snapshot; the *interactive* map (after click) always
   reflects live dealers. Re-generate if the dealer footprint changes. */
.ntt-map-lazy #facetwp-map {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #cfe2ea;
    background-image: url("dealer-map-placeholder.svg");
    background-size: auto 100%;
    background-position: center;
    background-repeat: no-repeat;
}

/* Readability scrim so the button stands out over the map image. */
.ntt-map-lazy #facetwp-map::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.22));
}

/* The "Enable map filtering" (map-bounds search) control is not used on the
   locator -- keep it hidden even after the map loads. */
.ntt-map-lazy .facetwp-map-filtering {
    display: none;
}

.ntt-show-map {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
    padding: 20px;
}

.ntt-show-map__btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1;
    color: #fff;
    background-color: #d6001c; /* NTT red */
    border: 0;
    border-radius: 9999px;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
    transition: background-color 0.15s ease, transform 0.15s ease;
}

.ntt-show-map__btn:hover,
.ntt-show-map__btn:focus-visible {
    background-color: #b00017;
    transform: translateY(-1px);
    outline: none;
}

.ntt-show-map__icon {
    flex: 0 0 auto;
}

/* Lightweight loading state after the user clicks. */
.ntt-map-loading #facetwp-map::after {
    content: "Loading map\2026";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    font-size: 0.9rem;
    font-weight: 600;
    color: #ffffff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}