/*
 * Service Centers — map + list widget styles. Only ever enqueued
 * alongside energyfix-public.css (see Frontend::maybe_enqueue_service_map_
 * assets()), so every --ef-* custom property from that stylesheet's
 * :root block is already available here — nothing in this file redefines
 * them.
 */

.ef-service-centers {
    margin: 0 0 40px;
}

.ef-service-centers__heading {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--ef-font-display);
    font-size: 22px;
    margin: 0 0 14px;
    color: var(--ef-ink-on-glow, var(--ef-ink));
}
.ef-service-centers__icon { color: var(--ef-copper); flex-shrink: 0; }

.ef-service-centers__controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.ef-btn--sm { padding: 7px 14px; font-size: 13px; }

.ef-service-centers__filter select {
    font-family: var(--ef-font-body);
    font-size: 13px;
    padding: 8px 12px;
    border-radius: var(--ef-radius-pill);
    border: 1px solid var(--ef-glass-border);
    background: var(--ef-glass-panel);
    color: var(--ef-ink);
}

.ef-service-centers__status {
    font-family: var(--ef-font-mono);
    font-size: 12px;
    color: var(--ef-ink-2-on-glow, var(--ef-ink-2));
}

.ef-service-centers__layout {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 16px;
    align-items: start;
}
@media (max-width: 820px) {
    .ef-service-centers__layout { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------------- *
 * Map frame — a metal-and-glass "bezel" around the Leaflet canvas so the
 * map reads as a deliberately-mounted instrument rather than a bare
 * embed. The gradient border + corner brackets are the framing device;
 * the sticky positioning (desktop only) is what keeps that frame in view
 * as a visitor scrolls the taller results list beside it, the way a
 * premium map+list layout (property listings, store locators) behaves.
 * -------------------------------------------------------------------- */
.ef-service-centers__map-frame {
    position: relative;
    padding: 5px;
    border-radius: calc(var(--ef-radius) + 6px);
    background: linear-gradient(155deg,
        rgba(255,180,84,0.65) 0%,
        rgba(232,102,58,0.45) 38%,
        rgba(255,255,255,0.08) 60%,
        rgba(34,184,174,0.30) 100%);
    box-shadow:
        0 1px 0 rgba(255,255,255,0.14) inset,
        0 26px 60px rgba(8,5,2,0.55),
        0 0 0 1px rgba(8,5,2,0.35),
        0 0 48px rgba(255,157,46,0.14);
}
@media (min-width: 821px) {
    .ef-service-centers__map-frame {
        position: sticky;
        top: 24px;
        align-self: start;
        max-height: calc(100vh - 48px);
    }
}

.ef-sc-map-corner {
    position: absolute;
    width: 24px;
    height: 24px;
    border: 2px solid var(--ef-glow-amber);
    z-index: 3;
    pointer-events: none;
    opacity: 0.9;
    filter: drop-shadow(0 0 5px rgba(255,157,46,0.5));
}
.ef-sc-map-corner--tl { top: 15px; left: 15px; border-right: none; border-bottom: none; border-radius: 7px 0 0 0; }
.ef-sc-map-corner--tr { top: 15px; right: 15px; border-left: none; border-bottom: none; border-radius: 0 7px 0 0; }
.ef-sc-map-corner--bl { bottom: 15px; left: 15px; border-right: none; border-top: none; border-radius: 0 0 0 7px; }
.ef-sc-map-corner--br { bottom: 15px; right: 15px; border-left: none; border-top: none; border-radius: 0 0 7px 0; }

.ef-service-centers__map-badge {
    position: absolute;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--ef-font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: var(--ef-radius-pill);
    color: var(--ef-ink-on-glow);
    background: var(--ef-glass-panel-deep);
    backdrop-filter: blur(var(--ef-glass-blur-sm)) saturate(1.4);
    -webkit-backdrop-filter: blur(var(--ef-glass-blur-sm)) saturate(1.4);
    border: 1px solid var(--ef-glass-border-deep);
    box-shadow: var(--ef-glass-shadow-sm);
}
.ef-service-centers__map-badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ef-glow-amber);
    animation: ef-sc-badge-pulse 2.2s ease-in-out infinite;
}
@keyframes ef-sc-badge-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(255,157,46,0.55); }
    70%  { box-shadow: 0 0 0 7px rgba(255,157,46,0); }
    100% { box-shadow: 0 0 0 0 rgba(255,157,46,0); }
}
@media (prefers-reduced-motion: reduce) {
    .ef-service-centers__map-badge-dot { animation: none; }
}

.ef-service-centers__map {
    width: 100%;
    height: 480px;
    border-radius: var(--ef-radius);
    background: var(--ef-panel-dark);
    box-shadow:
        0 1px 0 rgba(255,255,255,0.10) inset,
        inset 0 0 70px rgba(0,0,0,0.4);
    overflow: hidden;
}

/* A warm, slightly darkened tint over the stock OpenStreetMap tiles so the
   map reads as part of the "Liquid Glass" palette instead of a generic
   pale embed dropped onto a dark page — a lightweight stand-in for a
   custom tile style without taking on a paid tile-provider dependency. */
.ef-service-centers__map .leaflet-tile-pane {
    filter: brightness(0.9) contrast(1.08) saturate(1.2) sepia(0.16) hue-rotate(-6deg);
}

/* Leaflet's own control chrome (zoom buttons, attribution, popups) is
   restyled in the same glass material as the rest of the widget, rather
   than left in its stock white — on its own the default chrome reads as
   an unstyled embed sitting inside an otherwise deliberate frame. Zoom
   moves to bottom-right (grouped with attribution) so nothing competes
   with the corner brackets or the "Live map" badge up top. */
.ef-service-centers__map .leaflet-control-zoom {
    border: none;
    box-shadow: none;
}
.ef-service-centers__map .leaflet-control-zoom a {
    background: var(--ef-glass-panel) !important;
    color: var(--ef-ink) !important;
    border: 1px solid var(--ef-glass-border) !important;
    backdrop-filter: blur(var(--ef-glass-blur-sm)) saturate(1.4);
    -webkit-backdrop-filter: blur(var(--ef-glass-blur-sm)) saturate(1.4);
}
.ef-service-centers__map .leaflet-control-zoom a:hover { color: var(--ef-copper) !important; }
.ef-service-centers__map .leaflet-control-attribution {
    background: var(--ef-glass-panel-deep) !important;
    color: var(--ef-ink-2-on-glow) !important;
    backdrop-filter: blur(var(--ef-glass-blur-sm));
    -webkit-backdrop-filter: blur(var(--ef-glass-blur-sm));
    border-radius: 8px 0 0 0;
    padding: 2px 8px;
}
.ef-service-centers__map .leaflet-control-attribution a { color: var(--ef-copper-on-glow) !important; }
.ef-service-centers__map .leaflet-popup-content-wrapper {
    background: var(--ef-glass-panel);
    backdrop-filter: blur(var(--ef-glass-blur-sm)) saturate(1.4);
    -webkit-backdrop-filter: blur(var(--ef-glass-blur-sm)) saturate(1.4);
    border: 1px solid var(--ef-glass-border);
    border-radius: var(--ef-radius-sm);
    box-shadow: var(--ef-glass-shadow-sm);
    color: var(--ef-ink);
}
.ef-service-centers__map .leaflet-popup-tip { background: var(--ef-glass-panel); box-shadow: none; }
.ef-service-centers__map .leaflet-popup-close-button { color: var(--ef-ink-2) !important; }
.ef-service-centers__map .leaflet-popup-content {
    font-family: var(--ef-font-body);
    font-size: 13px;
    margin: 12px 14px;
}

/* Business pin — a brand-copper teardrop (see ef-sc-marker in
   energyfix-service-map.js) replacing Leaflet's generic default-blue
   marker image, so pins read as this brand rather than an unstyled
   plugin default. */
.ef-sc-marker { filter: drop-shadow(0 6px 10px rgba(8,5,2,0.45)); }

/* "You are here" — a copper dot with a radar-style expanding ring,
   distinct from the business pins above. */
.ef-sc-you-marker-wrap { position: relative; }
.ef-sc-you-marker__ring {
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    border: 2px solid var(--ef-copper);
    opacity: 0.65;
    animation: ef-sc-you-pulse 1.8s ease-out infinite;
}
@keyframes ef-sc-you-pulse {
    0%   { transform: scale(0.35); opacity: 0.75; }
    100% { transform: scale(1.7); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .ef-sc-you-marker__ring { animation: none; display: none; }
}

.ef-service-centers__list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 480px; /* matches .ef-service-centers__map's height above */
    overflow-y: auto;
    padding-right: 4px;
}

.ef-sc-card {
    background: var(--ef-glass-panel);
    backdrop-filter: blur(var(--ef-glass-blur-sm)) saturate(1.4);
    -webkit-backdrop-filter: blur(var(--ef-glass-blur-sm)) saturate(1.4);
    border: 1px solid var(--ef-glass-border);
    border-radius: var(--ef-radius-sm);
    box-shadow: var(--ef-glass-shadow-sm);
    padding: 14px;
    scroll-margin-top: 12px;
}
.ef-sc-card--active { border-color: var(--ef-copper); box-shadow: var(--ef-glass-shadow); }

.ef-sc-card__name { font-family: var(--ef-font-display); font-size: 16px; margin: 0 0 2px; color: var(--ef-ink); }
.ef-sc-card__type { font-family: var(--ef-font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ef-copper); margin: 0 0 6px; }
.ef-sc-card__desc { font-size: 13px; color: var(--ef-ink-2); margin: 0 0 8px; }
.ef-sc-card__address {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 13px;
    color: var(--ef-ink-2);
    margin: 0 0 6px;
}
.ef-sc-card__icon { flex-shrink: 0; margin-top: 1px; color: var(--ef-ink-2); }
.ef-sc-card__distance {
    display: inline-block;
    font-family: var(--ef-font-mono);
    font-size: 11px;
    font-weight: 600;
    color: var(--ef-amber-on-glow, var(--ef-amber));
    margin: 0 0 6px;
}
.ef-sc-card__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.ef-sc-card__actions .ef-btn svg { width: 14px; height: 14px; }

.ef-service-centers__empty {
    padding: 20px;
    text-align: center;
    color: var(--ef-ink-2-on-glow, var(--ef-ink-2));
    font-size: 14px;
}

.ef-service-centers__noscript-note {
    font-size: 13px;
    color: var(--ef-ink-2);
    margin-top: 10px;
}

/* "You are here" dot — copper rather than the business pins' amber/copper
   teardrop shape, so a visitor's own location is never mistaken for a
   service center at a glance. The expanding ring around it lives in
   .ef-sc-you-marker__ring above. */
.ef-sc-you-marker {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--ef-copper);
    border: 2px solid #fff;
    box-shadow: 0 0 0 2px var(--ef-copper), 0 2px 6px rgba(0,0,0,0.35);
}

/* Card photo thumbnail + rating line — populated once a center has been
   through GoogleEnrichment (see includes/GoogleEnrichment.php); absent
   entirely for a center that hasn't, which is why these rules don't
   reserve space when unused. */
.ef-sc-card__photo,
.ef-sc-card__photo-wrap {
    width: 100%;
    height: 120px;
    border-radius: calc(var(--ef-radius-sm) - 4px);
    overflow: hidden;
    margin-bottom: 10px;
    background-color: var(--ef-panel-dark);
    background-size: cover;
    background-position: center;
}
.ef-sc-card__photo-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ef-sc-card__photo-img picture,
.ef-sc-card__photo-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ef-sc-card__rating { font-family: var(--ef-font-mono); font-size: 13px; font-weight: 600; color: var(--ef-amber-on-glow, var(--ef-amber)); margin: 0 0 6px; }

/* -------------------------------------------------------------------- *
 * Detail modal — opened by clicking a card or a marker's "View Details" *
 * (see Widget.prototype.openDetail() in energyfix-service-map.js).      *
 * -------------------------------------------------------------------- */

body.ef-sc-modal-open { overflow: hidden; }

.ef-sc-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 100000;
    background: rgba(10, 8, 6, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.ef-sc-modal-overlay[hidden] { display: none; }

.ef-sc-modal {
    position: relative;
    width: 100%;
    max-width: 560px;
    max-height: 88vh;
    overflow-y: auto;
    background: var(--ef-panel);
    border: 1px solid var(--ef-glass-border-deep);
    border-radius: var(--ef-radius);
    box-shadow: var(--ef-glass-shadow-deep);
}

.ef-sc-modal__close {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--ef-glass-border);
    background: var(--ef-glass-panel);
    color: var(--ef-ink);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}
.ef-sc-modal__close:hover { background: var(--ef-glass-panel-deep); }

.ef-sc-modal__loading {
    padding: 40px 20px;
    text-align: center;
    color: var(--ef-ink-2);
}

.ef-sc-modal__photo {
    width: 100%;
    height: 200px;
    background-size: cover;
    background-position: center;
    background-color: var(--ef-panel-dark);
    border-radius: var(--ef-radius) var(--ef-radius) 0 0;
}
.ef-sc-modal__photo--placeholder {
    background-image: linear-gradient(135deg, var(--ef-panel-dark), var(--ef-glass-panel-deep));
}

.ef-sc-modal__content { padding: 20px 22px 24px; }

.ef-sc-modal__name { font-family: var(--ef-font-display); font-size: 22px; margin: 0 0 4px; color: var(--ef-ink); }
.ef-sc-modal__meta { font-size: 13px; color: var(--ef-ink-2); margin: 0 0 8px; }
.ef-sc-modal__rating { font-family: var(--ef-font-mono); font-size: 15px; font-weight: 700; color: var(--ef-amber-on-glow, var(--ef-amber)); margin: 0 0 10px; }
.ef-sc-modal__price { color: var(--ef-ink-2); font-weight: 600; margin-left: 4px; }
.ef-sc-modal__desc { font-size: 14px; color: var(--ef-ink-2); margin: 0 0 10px; }
.ef-sc-modal__address { display: flex; gap: 6px; font-size: 14px; color: var(--ef-ink-2); margin: 0 0 14px; }

.ef-sc-modal__hours { margin: 0 0 16px; }
.ef-sc-modal__hours-badge {
    display: inline-block;
    font-family: var(--ef-font-mono);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 3px 10px;
    border-radius: var(--ef-radius-pill);
    margin-bottom: 8px;
}
.ef-sc-modal__hours-badge--open   { background: var(--ef-green-soft); color: var(--ef-green); }
.ef-sc-modal__hours-badge--closed { background: var(--ef-danger-soft); color: var(--ef-danger); }
.ef-sc-modal__hours-list { list-style: none; margin: 0; padding: 0; font-size: 13px; color: var(--ef-ink-2); }
.ef-sc-modal__hours-list li { padding: 2px 0; }

.ef-sc-modal__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }

.ef-sc-modal__reviews { border-top: 1px solid var(--ef-glass-border); padding-top: 14px; }
.ef-sc-modal__reviews-heading { font-family: var(--ef-font-display); font-size: 15px; margin: 0 0 10px; }

.ef-sc-review { padding: 10px 0; border-bottom: 1px solid var(--ef-glass-border); }
.ef-sc-review:last-child { border-bottom: none; }
.ef-sc-review__head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.ef-sc-review__avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.ef-sc-review__author { font-size: 13px; font-weight: 600; color: var(--ef-ink); margin-right: 6px; }
.ef-sc-review__stars { font-size: 12px; color: var(--ef-amber-on-glow, var(--ef-amber)); margin-right: 6px; }
.ef-sc-review__time { font-size: 11px; }
.ef-sc-review__text { font-size: 13px; color: var(--ef-ink-2); margin: 0; line-height: 1.5; }

.ef-sc-modal__attribution { margin: 14px 0 0; font-size: 12px; }
.ef-sc-modal__attribution a { color: var(--ef-copper); }

/* Leaflet popup content — the compact "View Details" prompt shown when a
   marker is clicked, before the full modal opens. */
.ef-sc-popup { font-size: 13px; }
.ef-sc-popup-details {
    margin-top: 6px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    border-radius: var(--ef-radius-pill);
    border: 1px solid var(--ef-copper);
    background: transparent;
    color: var(--ef-copper);
    cursor: pointer;
}
.ef-sc-popup-details:hover { background: var(--ef-copper); color: #fff; }