.vl-locator {
    --vl-accent: #2d6a4f;
    --vl-accent-contrast: #ffffff;
    --vl-accent-tint: color-mix(in srgb, var(--vl-accent) 12%, #fff);
    display: grid;
    grid-template-columns: minmax(320px, 420px) 1fr;
    gap: 16px;
    height: var(--vl-height, 650px);
    font-family: system-ui, -apple-system, sans-serif;
}
.vl-locator--unconfigured, .vl-locator--empty {
    padding: 24px; background: #f1f3f5; border-radius: 6px; text-align: center;
}

.vl-panel { display: flex; flex-direction: column; min-height: 0; padding: 12px; border: 1px solid #e9ecef; border-radius: 6px; background: #fff; }
.vl-search { display: flex; gap: 8px; align-items: center; }
.vl-geocoder-host { flex: 1; }
.vl-geocoder-host .mapboxgl-ctrl-geocoder { width: 100%; max-width: none; box-shadow: none; border: 1px solid #ced4da; }

.vl-btn-accent, .vl-filters-btn, .vl-reset {
    background: var(--vl-accent); color: var(--vl-accent-contrast); border: 0; border-radius: 4px; padding: 8px 12px; cursor: pointer; font-size: 14px;
}
.vl-filters-btn { background: #fff; color: var(--vl-accent); border: 1px solid var(--vl-accent); }
.vl-reset { background: none; color: #495057; border: 0; text-decoration: underline; padding: 0; }

.vl-meta { display: flex; justify-content: space-between; align-items: center; margin: 12px 0; font-size: 13px; color: #495057; }
.vl-results { list-style: none; padding: 0; margin: 0; overflow-y: auto; flex: 1; }
.vl-results li { border-top: 1px solid #e9ecef; padding: 12px 4px; }
.vl-results li.is-active { background: var(--vl-accent-tint); }
.vl-results h3 { margin: 0 0 4px; font-size: 16px; display: flex; justify-content: space-between; align-items: baseline; }
.vl-results .vl-distance { font-size: 12px; color: #6c757d; font-weight: normal; }
.vl-results .vl-badges { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 6px; }
.vl-results .vl-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    padding: 4px 8px;
    border-radius: 999px;
    background: var(--vl-accent-tint);
    color: var(--vl-accent);
    border: 1px solid var(--vl-accent);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.vl-results .vl-addr { margin: 0 0 6px; color: #495057; font-size: 14px; }
/* "View Hours" panel — hidden by default, revealed by the toggle button. */
.vl-results .vl-hours-panel { margin-top: 8px; }
.vl-results .vl-schedules { margin: 0; padding: 0; list-style: none; }
.vl-results .vl-schedule { margin: 0 0 6px; font-size: 13px; color: #495057; border-radius: 4px; border: 1px solid #e9ecef; padding: 8px 10px; }
.vl-results .vl-schedule.is-active { background: var(--vl-accent-tint); border-color: var(--vl-accent); }

.vl-results .vl-sched-head { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; margin-bottom: 4px; }
.vl-results .vl-sched-head .vl-sched-name { font-weight: 600; color: var(--vl-accent); }
.vl-results .vl-sched-head .vl-sched-dates { color: #495057; font-size: 12px; }
.vl-results .vl-sched-head .vl-sched-inline-hours { margin-left: auto; color: #212529; font-size: 13px; font-weight: 500; }
/* A single-day header has no grid under it, so drop the bottom gap. */
.vl-results .vl-schedule:has(.vl-sched-inline-hours) .vl-sched-head { margin-bottom: 0; }

.vl-results .vl-sched-week { list-style: none; padding: 0; margin: 0; }
.vl-results .vl-sched-row { display: flex; justify-content: space-between; font-size: 12px; padding: 1px 0; }
.vl-results .vl-sched-row .vl-sched-days { color: #495057; font-weight: 500; min-width: 70px; }
.vl-results .vl-sched-row .vl-sched-hours { color: #212529; }
.vl-results .vl-sched-row .vl-sched-closed { color: #6c757d; font-style: italic; }
.vl-results .vl-actions { display: flex; gap: 8px; margin-top: 6px; }
.vl-results .vl-action { background: var(--vl-accent); color: var(--vl-accent-contrast); border: 0; padding: 6px 10px; border-radius: 4px; font-size: 13px; text-decoration: none; display: inline-block; cursor: pointer; }
.vl-results .vl-action--outline { background: #fff; color: var(--vl-accent); border: 1px solid var(--vl-accent); }

.vl-map { border: 1px solid #e9ecef; border-radius: 6px; overflow: hidden; }

.vl-filters-popover { position: absolute; background: #fff; border: 1px solid #ced4da; border-radius: 6px; padding: 12px; box-shadow: 0 4px 12px rgba(0,0,0,.08); z-index: 10; min-width: 220px; }
.vl-filters-popover label { display: block; margin: 4px 0; }

/* Map marker popup */
.vl-popup { font-family: system-ui, -apple-system, sans-serif; font-size: 13px; min-width: 220px; }
.vl-popup .vl-popup-name { display: block; font-size: 15px; margin-bottom: 2px; color: #212529; }
.vl-popup .vl-popup-addr { color: #495057; margin-bottom: 8px; }
.vl-popup .vl-popup-badges { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 8px; }
.vl-popup .vl-popup-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    padding: 3px 7px;
    border-radius: 999px;
    background: var(--vl-accent-tint);
    color: var(--vl-accent);
    border: 1px solid var(--vl-accent);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.vl-popup .vl-popup-schedules { list-style: none; padding: 0; margin: 0; border-top: 1px solid #e9ecef; padding-top: 6px; }
.vl-popup .vl-popup-schedule { display: flex; flex-wrap: wrap; gap: 2px 8px; font-size: 12px; margin: 2px 0; }
.vl-popup .vl-popup-sched-name { font-weight: 600; color: var(--vl-accent); }
.vl-popup .vl-popup-sched-dates { color: #495057; }

.vl-results .vl-schedule .vl-sched-hint { margin: 2px 0 0; font-size: 12px; color: #6c757d; font-style: italic; }

@media (max-width: 767px) {
    .vl-locator { grid-template-columns: 1fr; grid-template-rows: auto 300px; height: auto; }
    .vl-panel { order: 2; height: auto; max-height: none; }
    .vl-map  { order: 1; height: 300px; }
}