.steve-leaflet-map {
    width: 100%;
    margin: 20px 0;
    z-index: 1;
}




.steve-map-controls {
    width: 100%;
    box-sizing: border-box;
    min-width: 0;
    margin-top: 10px;

    /* Ensure controls are clickable above map panes */
    position: relative;
    z-index: 1000;

    /* "Card" panel look */
    padding: 12px;
    border: 1px solid rgba(0, 0, 0, 0.14);
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.8);

    /* Layout */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;

    /* Low-risk reordering hooks (CSS-only):
       Override these per-site to reorder controls without changing markup.
       Example:
       .steve-map-controls { --steve-order-toggle: 1; --steve-order-recenter: 2; --steve-order-proximity: 3; --steve-order-sort: 4; --steve-order-type: 5; --steve-order-filter: 6; --steve-order-list: 7; }
    */
    --steve-order-proximity: 10;
    --steve-order-toggle: 20;
    --steve-order-sort: 40;
    --steve-order-type: 50;
    --steve-order-filter: 60;
    --steve-order-list: 70;
}

/* Dark-mode friendliness */
@media (prefers-color-scheme: dark) {
    .steve-map-controls {
        border-color: rgba(255, 255, 255, 0.18);
        background: rgba(255, 255, 255, 0.8);
    }

    .steve-map-controls .steve-map-airnow {
        border-top-color: rgba(255, 255, 255, 0.15);
    }
}

/* Section labels without markup changes.
   We "anchor" labels to existing elements and rely on ordering to keep them sensible. */
.steve-map-controls .steve-map-toggle::before {

    display: block;
    width: 100%;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    opacity: 0.75;
    margin-bottom: 6px;
}

.steve-map-controls .steve-map-sort::before {

    display: block;
    width: 100%;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    opacity: 0.75;
    margin-bottom: 6px;
}

/* If sort isn't present, put the Filters label above the search filter.
   Note: :has() is widely supported in modern browsers; if unavailable, it will simply omit the label. */
.steve-map-controls:not(:has(.steve-map-sort)) .steve-map-list-filter::before {
    content: "Filters";
    display: block;
    width: 100%;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    opacity: 0.75;
    margin-bottom: 6px;
}

.steve-map-controls .steve-map-proximity { order: var(--steve-order-proximity); }
.steve-map-controls .steve-map-toggle { order: var(--steve-order-toggle); }
.steve-map-recenter {
    margin-left: auto;
    padding: 5px 0;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    background: none;
}

.steve-map-recenter img {
    width: 42px;
    border: none;
    border-radius: 6px;
    background-color: rgba(255,255,255,.65);
}

.steve-map-recenter img:hover {
    background-color: #fff;
}

.steve-map-recenter:active {
    transform: scale(.95);
}

.steve-map-recenter:focus-visible {
    outline: 2px solid #2271b1;
    outline-offset: 2px;
}
.steve-map-controls .steve-map-sort { order: var(--steve-order-sort); }
.steve-map-controls .steve-map-type-filter { order: var(--steve-order-type); }
.steve-map-controls .steve-map-list-filter { order: var(--steve-order-filter); }
.steve-map-controls .steve-map-list { order: var(--steve-order-list); flex-basis: 100%; }

/* AirNow air quality badge — separate section below nearby / trip planner panels.
   Target with [data-steve-airnow="1"] / [data-steve-airnow-btn="1"] for custom styling. */
.steve-map-controls [data-steve-airnow="1"] {
    order: 11;
    flex-basis: 100%;
    padding-top: 10px;
    margin-top: 6px;
}

.steve-map-controls [data-steve-airnow-btn="1"] {
    font-size: 12px;
    line-height: 1.1;
    border-radius: 999px;
    padding: 5px 12px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    background: rgba(0, 128, 0, 0.06);
    color: inherit;
    cursor: pointer;
    transition: background 0.15s;
}

.steve-map-controls [data-steve-airnow-btn="1"]:hover {
    background: rgba(0, 128, 0, 0.12);
}

.steve-map-controls [data-steve-airnow-btn="1"]:disabled {
    opacity: 0.6;
    cursor: default;
}

@media (prefers-color-scheme: dark) {
    .steve-map-controls [data-steve-airnow-btn="1"] {
        border-color: rgba(255, 255, 255, 0.2);
        background: rgba(0, 200, 0, 0.1);
    }

    .steve-map-controls [data-steve-airnow-btn="1"]:hover {
        background: rgba(0, 200, 0, 0.18);
    }
}

/*
Legend used to be a direct child of `.steve-map-controls` (flex row).
We now also support rendering it *inside* the results `<ul>`
(so it appears within the points container).

In that mode, the legend wrapper should behave like a non-clickable,
full-width panel.
*/
.steve-map-legend {
    order: 15;
    flex: 1 1 240px;
    min-width: 220px;
    padding: 8px 10px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.45);
}

.steve-map-list .steve-map-legend__container {
    cursor: default;
    margin: 0 0 14px 0;
    padding: 0;
    border: 0;
    background: transparent;
}

.steve-map-list .steve-map-legend__container:hover,
.steve-map-list .steve-map-legend__container:focus {
    background: transparent;
    border-color: transparent;
    outline: none;
}

.steve-map-list .steve-map-legend__container .steve-map-legend {
    /* Override "flex-ish" properties that don't matter inside UL */
    flex: none;
    min-width: 0;
    width: 100%;
    order: 0;
}

@media (prefers-color-scheme: dark) {
    .steve-map-legend {
        border-color: rgba(255, 255, 255, 0.18);
        background: rgba(0, 0, 0, 0.16);
    }
}

.steve-map-legend__title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    opacity: 0.8;
    margin-bottom: 6px;
}

.steve-map-legend__items {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 6px;
}

.steve-map-legend__badge {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    padding: 4px 8px;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    background: rgba(0, 0, 0, 0.03);
    font-size: 12px;
    line-height: 1.2;
}

@media (prefers-color-scheme: dark) {
    .steve-map-legend__badge {
        border-color: rgba(255, 255, 255, 0.18);
        background: rgba(255, 255, 255, 0.06);
    }
}

.steve-map-legend__note {
    font-size: 12px;
    opacity: 0.85;
    line-height: 1.35;
}

/* Debug: when ?steve_map_debug=1, make the AirNow refresh button unmissable */
body:has([data-steve-map-debug="1"]) .steve-map-controls .steve-map-airnow-refresh {
    outline: 3px dashed rgba(255, 0, 0, 0.85);
    outline-offset: 2px;
}

/* Explore Nearby (tourist-friendly proximity panel) */
.steve-map-nearby {
    order: var(--steve-order-proximity);
    align-self: flex-start;
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    width: 100%;
}

/* Tab system for Explore Nearby / Trip Planner */
.steve-map-nearby-tabs {
    width: 100%;
    display: flex;
    flex-direction: column;
    
}

.steve-map-nearby-tabs__bar {
    display: flex;
    gap: 20px;

    margin-bottom: 10px;
    align-items: center; 
}

.steve-map-nearby-tabs__tab {
    padding: 8px 16px;
    border: none;
    border-bottom: 2px solid transparent;
    background: none;
    font-size: 14px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    margin-bottom: -1px;
    
   
}

.steve-map-nearby-tabs__tab[aria-selected="true"] {

    font-weight: 600;
  
}

/* Trip planner buttons & panel*/
.steve-map-nearby-tabs__tab[data-steve-tab="planner"] {
        background:rgba(3,3,3,.1);
   margin-right:20px
}
.steve-map-nearby-tabs__tab[data-steve-tab="planner"]:hover {
     background:rgba(3,3,3,.19);
}

.steve-map-nearby[data-steve-nearby-planner="1"] {
   background:rgba(0,0,0,.6);
   border-radius:8px;
}



/* Explore nearby buttons & panels */
.steve-map-nearby-tabs__tab[data-steve-tab="nearby"] {
        background:rgba(0,0,0,.1);
}
.steve-map-nearby-tabs__tab[data-steve-tab="nearby"]:hover {
     background:rgba(0,0,0,.19);
}
.steve-map-nearby__step[data-step="0"] {
    background:rgba(0,0,0,.11);

}
.steve-map-nearby__step[data-step="1"] {
    background:rgba(0,0,0,.11);
}
.steve-map-nearby__step[data-step="2"] {
    background:rgba(0,0,0,.11);
}




.steve-map-nearby-tabs__tab:hover {
    background: rgba(0, 0, 0, 0.03);
}

/* Hide individual toggle buttons when the tab system is active */
.steve-map-controls:has(.steve-map-nearby-tabs) .steve-map-nearby__toggle {
    display: none;
}

.steve-map-nearby__toggle {
    white-space: nowrap;


}

.steve-map-nearby__panel {
    width: 100%;
    flex-basis: 100%;
    padding: 10px;
    border: 1px solid rgba(0, 0, 0, 0.14);
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.02);
}


/* IMPORTANT: don't override the built-in [hidden] behavior.
   Otherwise the "Explore nearby" toggle won't collapse the panel. */
.steve-map-nearby__panel:not([hidden]) {
    display: grid;
    gap: 8px;
}

/* Desktop override (must come AFTER the flex rule above) */
@media (min-width: 1280px) {
    .steve-map-nearby__panel:not([hidden]) {
        grid-template-columns: 1fr 1fr;
        align-items: start;
        gap: 10px;
    }

    /* Stepped flow layout */
    .steve-map-nearby__step[data-step="0"] {
        grid-column: 1;
        grid-row: 1;
    }
    .steve-map-nearby__step[data-step="1"] {
        grid-column: 1;
        grid-row: 2 / 4;
    }
    .steve-map-nearby__step[data-step="2"] {
        grid-column: 2;
        grid-row: 1;
    }
    .steve-map-nearby__step[data-step="2"] ~ .steve-map-nearby__external {
        grid-column: 2;
        grid-row: 2;
    }

    /* Simple map has no Step 0 — align both columns to row 1 */
    .steve-map-nearby__panel:not([hidden]):not(:has(.steve-map-nearby__step[data-step="0"])) .steve-map-nearby__step[data-step="1"] {
        grid-row: 1;
    }
}

@media (prefers-color-scheme: dark) {
    .steve-map-nearby__panel {
        border-color: rgba(255, 255, 255, 0.18);
        background: rgba(255, 255, 255, 0.04);
    }
}

.steve-map-nearby__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* Panel spacing handled via `gap` to avoid double-spacing after we reorder. */
.steve-map-nearby__row + .steve-map-nearby__row {
    margin-top: 0;
}

.steve-map-nearby__category[data-steve-nearby-category="1"] {
    padding: 8px 0;
}

.steve-map-nearby__category-label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
}

.steve-map-nearby__category-select {
    width: 100%;
    max-width: 100%;
    padding: 4px 6px;
    font-size: 13px;
    border: 1px solid rgba(0,0,0,0.2);
    border-radius: 4px;
    background: #fff;
}

.steve-map-nearby__category-groups {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.steve-map-nearby__group-btn {
    padding: 6px 12px;
    font-size: 13px;
    border: 1px solid rgba(0,0,0,0.2);
    border-radius: 4px;
    background: #f8f8f8;
    cursor: pointer;
    transition: background 0.15s;
}

.steve-map-nearby__group-btn:hover {
    background: #e8e8e8;
}

.steve-map-nearby__category-status {
    font-size: 12px;
    opacity: 0.8;
    display: block;
    margin: 4px 0;
}

.steve-map-nearby__category-list {
    margin-top: 4px;
}

.steve-map-nearby__label {
    font-size: 12px;
    font-weight: 600;
    opacity: 0.85;
    margin-right: 4px;
}

.steve-map-nearby__follow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    opacity: 0.9;
}

.steve-map-nearby__distance-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.steve-map-nearby__preset {
    font-size: 11px;
    padding: 3px 6px;
    white-space: nowrap;
}

.steve-map-nearby .steve-map-distance-input {
    width: 65px;
    min-width: 0;
}

.steve-map-nearby__row--distance {
    min-width: 0;
    gap: 4px;
}

.steve-map-nearby__step[data-step="2"] {
    min-width: 0;
}

.steve-map-controls .steve-map-airnow-worst {
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid rgba(0, 0, 0, 0.18);
    background: rgba(255, 255, 255, 0.45);
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 12px;
    line-height: 1.1;
    cursor: pointer;
    white-space: nowrap;
}

.steve-map-controls .steve-map-airnow-worst:hover {
    background: rgba(0, 0, 0, 0.04);
}

@media (prefers-color-scheme: dark) {
    .steve-map-controls .steve-map-airnow-worst {
        border-color: rgba(255, 255, 255, 0.2);
        background: rgba(0, 0, 0, 0.18);
    }

    .steve-map-controls .steve-map-airnow-worst:hover {
        background: rgba(255, 255, 255, 0.06);
    }
}

/* AirNow aq/data legend (Leaflet control) */
.steve-airnow-legend {
    font: 12px/1.2 Arial, sans-serif;
    color: #111;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(0, 0, 0, 0.18);
    border-radius: 10px;
    padding: 8px 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    user-select: none;
}

@media (prefers-color-scheme: dark) {
    .steve-map-nearby__panel {
        border-color: rgba(255, 255, 255, 0.18);
        background: rgba(255, 255, 255, 0.04);
    }
}



/* ============= Nearby Panel: Step Flow ============= */
.steve-map-nearby__step {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.4);
}

.steve-map-nearby__step-header {
    display: flex;
    align-items: center;
    gap: 8px;
}

.steve-map-nearby__step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #1e88e5;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    flex-shrink: 0;
}

.steve-map-nearby__step-label {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
}

.steve-map-nearby__step-hint {
    font-size: 12px;
    opacity: 0.7;
    font-style: italic;
    margin: 4px 0;
}

/* Step 0: Starting point - compact row layout */
.steve-map-nearby__step[data-step="0"] .steve-map-nearby__row--from {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.steve-map-nearby__step[data-step="0"] .steve-map-nearby__follow {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    white-space: nowrap;
}

/* Animation when step 2 is revealed */
.steve-map-nearby__step[data-step="2"]:not([hidden]) {
    animation: steveStepReveal 0.3s ease-out;
}

@keyframes steveStepReveal {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Category buttons more prominent in step context */
.steve-map-nearby__step .steve-map-nearby__group-btn {
    padding: 8px 16px;
    font-size: 14px;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.15);
}

.steve-map-nearby__step .steve-map-nearby__category[data-steve-nearby-category="1"] {
    padding: 4px 0 0;
}

/* Step 2 spacing */
.steve-map-nearby__step[data-step="2"] .steve-map-nearby__row + .steve-map-nearby__row {
    margin-top: 4px;
}

/* "Show all" button for paginated category results */
.steve-map-nearby__external-item--show-all {
    list-style: none;
    padding: 8px 0;
    text-align: center;
}

.steve-map-nearby__external-show-all {
    display: inline-block;
    padding: 8px 20px;
    font-size: 13px;
    font-weight: 600;
    color: #1e88e5;
    background: transparent;
    border: 1px solid #1e88e5;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.steve-map-nearby__external-show-all:hover {
    background: #1e88e5;
    color: #fff;
}

/* Dark mode for steps */
@media (prefers-color-scheme: dark) {
    .steve-map-nearby__step {
        border-color: rgba(255, 255, 255, 0.12);
        background: rgba(255, 255, 255, 0.03);
    }

    .steve-map-nearby__step[data-step="0"] .steve-map-nearby__from-locate,
    .steve-map-nearby__step[data-step="0"] .steve-map-nearby__from-center {
        border-color: rgba(255, 255, 255, 0.25);
        background: rgba(255, 255, 255, 0.06);
        color: #666;
    }

    .steve-map-nearby__step[data-step="0"] .steve-map-nearby__from-locate:hover,
    .steve-map-nearby__step[data-step="0"] .steve-map-nearby__from-center:hover {
        background: rgba(255, 255, 255, 0.12);
    }
}



.steve-airnow-legend__title {
    font-weight: 700;
    margin-bottom: 6px;
}

.steve-airnow-legend__row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 2px 0;
    white-space: nowrap;
}

.steve-airnow-legend__row .swatch {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.25);
}

/* Trails (OSM) legend */
.steve-trails-legend {
    font: 12px/1.2 Arial, sans-serif;
    color: #111;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(0, 0, 0, 0.18);
    border-radius: 10px;
    padding: 8px 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    user-select: none;
}

@media (prefers-color-scheme: dark) {
    .steve-trails-legend {
        color: #f2f2f2;
        background: rgba(0, 0, 0, 0.35);
        border-color: rgba(255, 255, 255, 0.18);
    }
}

.steve-trails-legend__title {
    font-weight: 700;
    margin-bottom: 6px;
    letter-spacing: 0.01em;
}

.steve-trails-legend__items {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.steve-trails-legend__row {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.steve-trails-legend__swatch {
    display: inline-block;
    width: 18px;
    height: 8px;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, 0.18);
    background: rgba(43, 138, 62, 0.5);
}

/* Match steves-leaflet-map-trails.js style() rules */
.steve-trails-legend__swatch--mtb {
    background: rgba(255, 122, 0, 0.85);
    border-color: rgba(0, 0, 0, 0.18);
}

.steve-trails-legend__swatch--path {
    background: rgba(43, 138, 62, 0.75);
    border-color: rgba(0, 0, 0, 0.18);
}

.steve-trails-legend__swatch--track {
    background: rgba(122, 92, 46, 0.65);
    border-color: rgba(0, 0, 0, 0.18);
}

.steve-trails-legend__swatch--other {
    background: rgba(43, 138, 62, 0.6);
    border-color: rgba(0, 0, 0, 0.18);
}

/* Keep plugin UI theme-friendly: use minimal styling and rely on inheritable colors. */
.steve-map-controls button {

    cursor: pointer;
    font: inherit;
    background-color:inherit;
padding: 8px 16px;
font-size: 14px;
border-radius: 8px;
border: 1px solid rgba(0, 0, 0, 0.15);
    

}

.steve-map-controls button:hover {

}

@media (prefers-color-scheme: dark) {
    .steve-map-controls button {
        border-color: rgba(255, 255, 255, 0.2);
    }

    .steve-map-controls button:hover {
        background: rgba(255, 255, 255, 0.06);
    }
}

.steve-map-controls button,
.steve-map-controls input,
.steve-map-controls select,
.steve-map-controls a {
    position: relative;
    z-index: 1001;
    pointer-events: auto;
    color: inherit;
}

/* Remove older spacing rules (gap handles spacing). */
.steve-map-controls .steve-map-toggle,
.steve-map-controls .steve-map-recenter {
    margin-right: 0;
}

.steve-map-list-filter {
    margin: 0;
    flex: 1 1 320px;
    min-width: 240px;
}

.steve-map-filter-input {
    width: 100%;
    max-width: 560px;
    padding: 8px 10px;
    border: 1px solid rgba(0, 0, 0, 0.18);
    border-radius: 10px;
    font-size:.9em;


}

@media (prefers-color-scheme: dark) {
    .steve-map-filter-input {
        border-color: rgba(255, 255, 255, 0.2);

    }
}

.steve-map-filter-input:focus {
    outline: 2px solid rgba(30, 136, 229, 0.35);
    outline-offset: 2px;
}

.steve-map-list {
    list-style: none;
    padding: 0;
    margin: 0px 0;
}

.steve-map-list:empty {
    margin: 0;
}

.steve-map-list li {
    cursor: pointer;
    margin-bottom: 10px;
    padding: 8px;
    border: 1px solid transparent;
    transition: background-color 0.2s, border-color 0.2s;
}

.steve-map-list li:hover,
.steve-map-list li:focus {
    background-color: rgba(0, 0, 0, 0.035);
    border-color: rgba(0, 0, 0, 0.12);
    outline: none;
}

.steve-map-list li.is-active {
    background-color: rgba(30, 136, 229, 0.10);
    border-color: rgba(30, 136, 229, 0.35);
}

.steve-map-list li strong {
    display: block;
}

.steve-map-list li a {
    text-decoration: none;
    color: inherit;
}

.steve-map-list li a:hover {
    text-decoration: underline;
}

.steve-map-list__desc {
    margin-top: 4px;
    font-size: 0.95em;
    opacity: 0.9;
}

.steve-map-list__terms {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
margin-left: auto;
  order: 2;
}

.steve-map-term-chip {
    display: inline-block;
    border: 1px solid rgba(0, 0, 0, 0.12);
    background: rgba(0, 0, 0, 0.03);
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 12px;
    text-decoration: none;
}

.steve-map-term-chip:hover {
    background: rgba(0, 0, 0, 0.06);
    text-decoration: none;
}

.steve-map-list__actions {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

/* Mobile friendliness */
@media (max-width: 600px) {
    .steve-map-controls {
        margin-top: 8px;
        padding: 10px;
        gap: 10px;
    }

    .steve-map-sort-select,
    .steve-map-type-select {
        min-height: 44px;
        font-size: 16px; /* prevents iOS zoom-on-focus */
    }

    .steve-map-distance {
        font-size: 13px;
    }

    .steve-map-controls .steve-map-toggle,
    .steve-map-controls .steve-map-recenter {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-right: 0;
        margin-bottom: 0;
        padding: 10px 12px;
        min-height: 44px; /* recommended touch target */
    }

    .steve-map-filter-input {
        max-width: 100%;
        min-height: 44px;
        font-size: 16px; /* prevents iOS zoom-on-focus */
    }

    .steve-map-nearby-tabs__bar {
        flex-wrap: wrap;
        gap: 4px;
    }

    .steve-map-nearby-tabs__tab {
        flex: 0 1 auto;
        text-align: center;
        padding: 10px 8px;
        min-height: 44px;
    }

    .steve-map-proximity {
        gap: 10px;
    }

    .steve-map-distance-input,
    .steve-map-distance-unit,
    .steve-map-proximity button {
        min-height: 44px;
        font-size: 16px; /* prevents iOS zoom-on-focus */
    }

    .steve-map-distance-input {
        width: 110px;
    }

    .steve-map-list li {
        padding: 10px;
    }

    .steve-map-list__main {
        grid-template-columns: 48px 1fr;
        column-gap: 10px;
    }

    .steve-map-list__thumb {
        width: 48px;
        height: 48px;
    }

    .steve-map-list__actions {
        gap: 10px;
    }

    .steve-map-list__actions button,
    .steve-map-list__actions a {
        padding: 10px 12px;
        min-height: 44px;
    }
}

.steve-map-list__actions button,
.steve-map-list__actions a {
    font-size: 12px;
    line-height: 1;
    padding: 6px 8px;
    border-radius: 4px;
    margin: 0;
}

.steve-map-list__actions button {
    border: 1px solid rgba(0, 0, 0, 0.18);
    background: transparent;
}

/* "Remove from saved" action (destructive but still subtle) */
.steve-map-list__actions .steve-map-item-unsave {
    border-color: rgba(176, 0, 32, 0.35);
    background: rgba(176, 0, 32, 0.04);
}

.steve-map-list__actions .steve-map-item-unsave:hover {
    background: rgba(176, 0, 32, 0.08);
}

@media (prefers-color-scheme: dark) {
    .steve-map-list__actions .steve-map-item-unsave {
        border-color: rgba(255, 99, 132, 0.45);
        background: rgba(255, 99, 132, 0.12);
    }

    .steve-map-list__actions .steve-map-item-unsave:hover {
        background: rgba(255, 99, 132, 0.18);
    }
}

.steve-map-list__actions a {
    border: 1px solid rgba(0, 0, 0, 0.18);
    text-decoration: none;
    color: inherit;
    background: transparent;
}

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

.steve-map-list__actions button:focus,
.steve-map-list__actions a:focus {
    outline: 2px solid rgba(30, 136, 229, 0.35);
    outline-offset: 2px;
}

/* Trip Planner (Like & Save integration) */
.steve-map-nearby__row--plans .steve-map-planner {
    /* Box styling to isolate Trip planner from the rest of the panel */
    width: 100%;
    flex-basis: 100%;
    padding: 10px;
    padding-top: 10px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.015);
    box-sizing: border-box;
}

/* Keep the existing general planner sizing without forcing box styling elsewhere */
.steve-map-planner {
    width: 100%;
    flex-basis: 100%;
    padding-top: 4px;
}

/* Trip Plans (Like & Save Plans) "white box" should span full width */
.steve-map-planner,
.steve-map-planner__controls,
.steve-map-planner__hint {

    max-width: 100%
}

/* On larger screens, use 2 columns inside the planner: (plan + actions) and (recommendations) */
@media (min-width: 1280px) {
    .steve-map-planner {
       
        gap: 12px;
        align-items: start;
    }

    .steve-map-planner__hint {
        grid-column: 1;
    }

}

.steve-map-planner__header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.steve-map-planner__status {
    font-size: 12px;
    opacity: 0.85;
}

.steve-map-planner__controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

/* Ensure the select + buttons can wrap under each other instead of squishing */
.steve-map-planner__controls > * {
    flex: 0 1 auto;
}

.steve-map-planner__plan-select {
    min-width: 220px;
    max-width: 100%;
    width: 100%;
    padding: 6px 10px;
    border: 1px solid rgba(0, 0, 0, 0.18);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.5);
    color: inherit;
    font: inherit;
}

@media (prefers-color-scheme: dark) {
    .steve-map-planner__plan-select {
        border-color: rgba(255, 255, 255, 0.2);
        background: rgba(0, 0, 0, 0.18);
    }
}

.steve-map-planner__hint {
    margin-top: 8px;
    font-size: 12px;
    opacity: 0.85;
}

.steve-map-item-add-to-plan {
    border-color: rgba(46, 125, 50, 0.35);
    background: rgba(46, 125, 50, 0.05);
}

.steve-map-item-add-to-plan:hover {
    background: rgba(46, 125, 50, 0.10);
}

/* "Added" state for planner buttons (list + recommendations) + public sources */
.steve-map-item-add-to-plan.is-added,
.steve-map-nearby__external-add.is-added {
    border-color: rgba(30, 136, 229, 0.45);
    background: rgba(30, 136, 229, 0.08);
}

.steve-map-item-add-to-plan.is-added:hover,
.steve-map-nearby__external-add.is-added:hover {
    background: rgba(30, 136, 229, 0.12);
}

/* External "Add to Trip" state: show a simple + icon before text (CSS-only) */
.steve-map-nearby__external-add:not(.is-added)::before {
    content: '+';
    display: inline-block;
    width: 1em;
    margin-right: 6px;
    font-weight: 900;
    text-align: center;
}

@media (prefers-color-scheme: dark) {
    .steve-map-item-add-to-plan {
        border-color: rgba(105, 240, 174, 0.35);
        background: rgba(105, 240, 174, 0.10);
    }

    .steve-map-item-add-to-plan:hover {
        background: rgba(105, 240, 174, 0.16);
    }
}

/* Proximity controls (Locate + distance filter) */
.steve-map-proximity {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin: 0;
}

.steve-map-proximity button {
    margin: 0;
}

.steve-map-distance-input {
    width: 120px;
    padding: 6px 8px;
    border: 1px solid rgba(0, 0, 0, 0.18);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.5);
}

.steve-map-distance-unit {
    padding: 6px 10px;
    border: 1px solid rgba(0, 0, 0, 0.18);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.5);
}

@media (prefers-color-scheme: dark) {
    .steve-map-distance-input,
    .steve-map-distance-unit {
        border-color: rgba(255, 255, 255, 0.2);
        background: rgba(0, 0, 0, 0.18);
    }
}

.steve-map-proximity-status {
    font-size: 12px;
    opacity: 0.9;
}

/* Saved items that are not mappable (non-location likes or geocode failures) */
.steve-map-unmappable {
    width: 100%;
    flex-basis: 100%;
    margin-top: 12px;
    padding: 10px 12px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.015);
}

/* Non-location saved items: render inline with the list, but appear disabled (no actions). */
.steve-map-list__item--unmappable {
    opacity: 0.75;
}

.steve-map-list__item--unmappable,
.steve-map-list__item--unmappable * {
    cursor: default !important;
}

.steve-map-list__item--unmappable a {
    text-decoration: underline;
}

@media (prefers-color-scheme: dark) {
    .steve-map-unmappable {
        border-color: rgba(255, 255, 255, 0.16);
        background: rgba(255, 255, 255, 0.03);
    }
}

.steve-map-unmappable p {
    margin: 0 0 8px 0;
    font-size: 13px;
    opacity: 0.9;
}

.steve-map-unmappable__list {
    list-style: disc;
    margin: 0;
    padding-left: 18px;
    display: grid;
    gap: 6px;
}

.steve-map-unmappable__item a {
    text-decoration: none;
}

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

.steve-map-unmappable__note {
    margin-top: 2px;
    font-size: 12px;
    opacity: 0.85;
}

/* ----------------------------------------------------------------
   External sources (Wikipedia + OpenTripMap) inside Nearby panel
   ---------------------------------------------------------------- */
.steve-map-nearby__external-toggle {
    /* Make it look like a button but keep theme inheritance */
    white-space: nowrap;
}

.steve-map-nearby__external-panel {
    width: 100%;

    padding: 10px;
    box-sizing: border-box;

    /* Keep it from collapsing inside grid containers */
    min-width: 0;
}
.steve-map-nearby__external-hint {padding-bottom:12px}
@media (prefers-color-scheme: dark) {
    .steve-map-nearby__external-panel {

   
    }
}

.steve-map-nearby__external-rescan {
    margin: 0 0 10px 0 !important;
}

.steve-map-nearby__external-group {
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 10px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.015);
    box-sizing: border-box;
    min-width: 0;
}

@media (prefers-color-scheme: dark) {
    .steve-map-nearby__external-group {
        border:none;
        background: rgba(255, 255, 255, 0.02);
    }
}

.steve-map-nearby__external-group + .steve-map-nearby__external-group {
    margin-top: 10px;
}

.steve-map-nearby__external-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
    min-width: 0;
}

.steve-map-nearby__external-status {
    font-size: 12px;
    opacity: 0.85;
    white-space: nowrap;
}

.steve-map-nearby__external-list {
    list-style: none;
    margin: 0;
    padding: 0;

    /* prevent long entries from forcing panel to overflow */
    overflow-wrap: anywhere;
}

.steve-map-nearby__external-empty {
    padding: 8px 6px;
    font-size: 12px;
    opacity: 0.9;
}

/* --- Card component (unified list item for nearby / external results) --- */
.steve-map-card {
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 10px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.35);
    box-sizing: border-box;
    min-width: 0;
}

@media (prefers-color-scheme: dark) {
    .steve-map-card {
        background: rgba(0, 0, 0, 0.18);
    }
}

.steve-map-card + .steve-map-card {
    margin-top: 10px;
}

.steve-map-card__primary {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
}

.steve-map-card__name {
    font-weight: 700;
    line-height: 1.2;
}

.steve-map-card__distance {
    font-size: 12px;
    opacity: 0.85;
    white-space: nowrap;
    margin-left: auto;
}

.steve-map-card__actions {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.steve-map-card__action {
    font-size: 12px;
    line-height: 1.2;
    padding: 6px 8px;
    border-radius: 6px;
    border: 1px solid rgba(0, 0, 0, 0.18);
    background: transparent;
    text-decoration: none;
    color: inherit;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.steve-map-card__action--dirs,
.steve-map-card__action--view {
    font-size: 12px;
    padding: 4px 8px;
    min-height: 32px;
    border-radius: 6px;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.steve-map-card__action--dirs {
    margin-left: auto;
}

.steve-map-card__action--view {
    margin-left: 0;
}

.steve-map-card__action--dirs::before,
.steve-map-card__action--view::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 6px;
    vertical-align: middle;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
}

.steve-map-card__action--dirs::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20fill%3D%27%23fff%27%20d%3D%27M12%202c-3.86%200-7%203.14-7%207%200%205.25%207%2013%207%2013s7-7.75%207-13c0-3.86-3.14-7-7-7zm0%209.5a2.5%202.5%200%201%201%200-5%202.5%202.5%200%200%201%200%205z%27/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20fill%3D%27%23fff%27%20d%3D%27M12%202c-3.86%200-7%203.14-7%207%200%205.25%207%2013%207%2013s7-7.75%207-13c0-3.86-3.14-7-7-7zm0%209.5a2.5%202.5%200%201%201%200-5%202.5%202.5%200%200%201%200%205z%27/%3E%3C/svg%3E");
}

.steve-map-card__action--view::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%2710%27%20fill%3D%27%23fff%27/%3E%3Cpath%20fill%3D%27%23000%27%20d%3D%27M8.6%207.3h2.1l1.3%206.2%201.9-6.2h1.8l1.9%206.2%201.3-6.2h2.1l-2.3%209.4h-2.2l-1.6-5.2-1.6%205.2H10.9z%27/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%2710%27%20fill%3D%27%23fff%27/%3E%3Cpath%20fill%3D%27%23000%27%20d%3D%27M8.6%207.3h2.1l1.3%206.2%201.9-6.2h1.8l1.9%206.2%201.3-6.2h2.1l-2.3%209.4h-2.2l-1.6-5.2-1.6%205.2H10.9z%27/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
    .steve-map-card__action {
        border-color: rgba(255, 255, 255, 0.2);
    }
}

.steve-map-card__action:hover {
    background: rgba(0, 0, 0, 0.04);
    text-decoration: none;
}

.steve-map-card__action:focus-visible {
    outline: 3px solid rgba(30, 136, 229, 0.55);
    outline-offset: 2px;
    border-color: rgba(30, 136, 229, 0.55);
}

@media (prefers-color-scheme: dark) {
    .steve-map-card__action:hover {
        background: rgba(255, 255, 255, 0.06);
    }
}

@media (max-width: 600px) {
    .steve-map-card__action--map {
        min-height: 44px;
        padding: 10px 12px;
        font-size: 16px;
    }

    .steve-map-card__action--dirs,
    .steve-map-card__action--view {
        min-height: 44px;
        padding: 10px 8px;
        font-size: 0;
        line-height: 1;
    }

    .steve-map-card__action--dirs::before,
    .steve-map-card__action--view::before {
        margin-right: 0;
        width: 18px;
        height: 18px;
    }
}

/* Show-all card (pagination) */
.steve-map-card--show-all {
    list-style: none;
    padding: 8px 0;
    text-align: center;
    border: none;
    background: transparent;
}

.steve-map-card__show-all-btn {
    display: inline-block;
    padding: 8px 20px;
    font-size: 13px;
    font-weight: 600;
    color: #1e88e5;
    background: transparent;
    border: 1px solid #1e88e5;
    border-radius: 6px;
    cursor: pointer;
}

.steve-map-card__show-all-btn:hover {
    background: #1e88e5;
    color: #fff;
}

/* Empty state */
.steve-map-card--empty {
    padding: 8px 6px;
    font-size: 12px;
    opacity: 0.9;
    list-style: none;
    border: none;
    background: transparent;
}

.steve-map-nearby__external-item {
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 10px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.35);
    box-sizing: border-box;
    min-width: 0;
}

@media (prefers-color-scheme: dark) {
    .steve-map-nearby__external-item {
        background: rgba(0, 0, 0, 0.18);
    }
}

.steve-map-nearby__external-item + .steve-map-nearby__external-item {
    margin-top: 10px;
}

.steve-map-nearby__external-item-title {
    font-weight: 700;
    line-height: 1.2;
}

.steve-map-nearby__external-item-meta {
    margin-top: 4px;
    font-size: 12px;
    opacity: 0.85;
    white-space: nowrap;
}

.steve-map-nearby__external-item-actions {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.steve-map-nearby__external-open,
.steve-map-nearby__external-directions,
.steve-map-nearby__external-view {
    font-size: 12px;
    line-height: 1.2;
    padding: 6px 8px;
    border-radius: 6px;
    border: 1px solid rgba(0, 0, 0, 0.18);
    background: transparent;

    text-decoration: none;
    color: inherit;

    /* keep tap targets reasonable */
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Directions + View: smaller buttons on the right with icon prefix */
.steve-map-nearby__external-directions,
.steve-map-nearby__external-view {
    font-size: 12px;
    padding: 4px 8px;
    min-height: 32px;
    border-radius: 6px;
    white-space: nowrap;

    /* sit on the right after the first two buttons */
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.steve-map-nearby__external-directions {
    margin-left: auto;
}

/* Icon prefixes (SVG masks so they inherit currentColor without assets) */
.steve-map-nearby__external-directions::before,
.steve-map-nearby__external-view::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 6px;
    vertical-align: middle;
    background-color: currentColor;

    /* mask-based icons */
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
}

/* "Google Maps" style marker */
.steve-map-nearby__external-directions::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20fill%3D%27%23fff%27%20d%3D%27M12%202c-3.86%200-7%203.14-7%207%200%205.25%207%2013%207%2013s7-7.75%207-13c0-3.86-3.14-7-7-7zm0%209.5a2.5%202.5%200%201%201%200-5%202.5%202.5%200%200%201%200%205z%27/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20fill%3D%27%23fff%27%20d%3D%27M12%202c-3.86%200-7%203.14-7%207%200%205.25%207%2013%207%2013s7-7.75%207-13c0-3.86-3.14-7-7-7zm0%209.5a2.5%202.5%200%201%201%200-5%202.5%202.5%200%200%201%200%205z%27/%3E%3C/svg%3E");
}

/* Wikipedia-like "W" */
.steve-map-nearby__external-view::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%2710%27%20fill%3D%27%23fff%27/%3E%3Cpath%20fill%3D%27%23000%27%20d%3D%27M8.6%207.3h2.1l1.3%206.2%201.9-6.2h1.8l1.9%206.2%201.3-6.2h2.1l-2.3%209.4h-2.2l-1.6-5.2-1.6%205.2H10.9z%27/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%2710%27%20fill%3D%27%23fff%27/%3E%3Cpath%20fill%3D%27%23000%27%20d%3D%27M8.6%207.3h2.1l1.3%206.2%201.9-6.2h1.8l1.9%206.2%201.3-6.2h2.1l-2.3%209.4h-2.2l-1.6-5.2-1.6%205.2H10.9z%27/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
    .steve-map-nearby__external-open,
    .steve-map-nearby__external-directions,
    .steve-map-nearby__external-view {
        border-color: rgba(255, 255, 255, 0.2);
    }
}

.steve-map-nearby__external-open:hover,
.steve-map-nearby__external-directions:hover,
.steve-map-nearby__external-view:hover {
    background: rgba(0, 0, 0, 0.04);
    text-decoration: none;
}

/* Focus outlines for keyboard users (Explore Nearby controls, including icon-only links) */
.steve-map-nearby__external-open:focus-visible,
.steve-map-nearby__external-directions:focus-visible,
.steve-map-nearby__external-view:focus-visible,
.steve-map-nearby__external-add:focus-visible {
    outline: 3px solid rgba(30, 136, 229, 0.55);
    outline-offset: 2px;
    border-color: rgba(30, 136, 229, 0.55);
}

@media (prefers-color-scheme: dark) {
    .steve-map-nearby__external-open:hover,
    .steve-map-nearby__external-directions:hover,
    .steve-map-nearby__external-view:hover {
        background: rgba(255, 255, 255, 0.06);
    }
}

/* Mobile: keep item actions compact + icon-only for Directions/View */
@media (max-width: 600px) {
    .steve-map-nearby__external-panel {
        padding: 10px;
    }

    .steve-map-nearby__external-item-meta,
    .steve-map-card__distance {
        white-space: normal;
    }

    .steve-map-nearby__external-open {
        min-height: 44px;
        padding: 10px 12px;
        font-size: 16px;
    }

    .steve-map-card__action--map {
        min-height: 44px;
        padding: 10px 12px;
        font-size: 16px;
    }

    /* icon-only */
    .steve-map-nearby__external-directions,
    .steve-map-nearby__external-view,
    .steve-map-card__action--dirs,
    .steve-map-card__action--view {
        min-height: 44px;
        padding: 10px 8px;
        font-size: 0; /* hide label text, keep ::before icon */
        line-height: 1;
    }

    .steve-map-nearby__external-directions::before,
    .steve-map-nearby__external-view::before,
    .steve-map-card__action--dirs::before,
    .steve-map-card__action--view::before {
        margin-right: 0;
        width: 18px;
        height: 18px;
    }
}

/* Sort dropdown
   JS inserts this element as a <li> at the top of the points list. */
.steve-map-sort {
    margin: 0;

    /* override `.steve-map-list li` point-item styling */
    cursor: default;
    border: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    transition: none !important;
}

.steve-map-sort:hover,
.steve-map-sort:focus {
    background-color: transparent !important;
    border-color: transparent !important;
    outline: none !important;
}

/* Type filter (taxonomy/type dropdown)
   NOTE: JS inserts this element as a <li> at the top of the points list,
   so it must NOT inherit the "point item" hover/click styling. */
.steve-map-type-filter {
    margin: 0;

    /* override `.steve-map-list li` point-item styling */
    cursor: default;
    border: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    transition: none !important;
}

.steve-map-type-filter:hover,
.steve-map-type-filter:focus {
    background-color: transparent !important;
    border-color: transparent !important;
    outline: none !important;
}

.steve-map-type-select {
    padding: 6px 10px;
    border: 1px solid rgba(0, 0, 0, 0.18);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.5);
    color: inherit;
    font: inherit;
}

.steve-map-sort-select {
    padding: 6px 10px;
    border: 1px solid rgba(0, 0, 0, 0.18);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.5);
    color: inherit;
    font: inherit;
}

@media (prefers-color-scheme: dark) {
    .steve-map-type-select,
    .steve-map-sort-select {
        border-color: rgba(255, 255, 255, 0.2);
        
    }
}

.steve-map-distance {
    margin-top: 6px;
    font-size: 12px;
    opacity: 0.9;
}

/* Rich list items (thumbnail + meta rows) */
.steve-map-list__main {
    display: flex;
    flex-wrap:wrap;
    column-gap: 10px;
    row-gap: 4px;
  
}

.steve-map-list__thumb {
    grid-row: 1 / span 4;
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.10);
    background: rgba(0, 0, 0, 0.03);
}

/* ------------------------------------------------------------
   Phase 3: list_layout presets (CSS-only)
   Frontend JS applies:
     .steve-map-list--layout-row
     .steve-map-list--layout-grid
   ------------------------------------------------------------ */

/* Grid layout: make the UL a real multi-column grid */
.steve-map-list--layout-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 10px;
}

/* In grid mode, avoid any "full width" behavior from themes. */
.steve-map-list--layout-grid > li {
    margin-bottom: 0;
    width: auto;
    max-width: 100%;
    box-sizing: border-box;
}

/* Sort & type filter must span full width so they don't sit in a grid cell.
   `order` ensures they always appear at the top even if DOM order shifts. */
.steve-map-list--layout-grid > .steve-map-sort {
    order: -999;
    grid-column: 1 / -1;
}
.steve-map-list--layout-grid > .steve-map-type-filter {
    order: -998;
    grid-column: 1 / -1;
}

/* On narrow screens, gracefully fall back to 1 column */
@media (max-width: 600px) {
    .steve-map-list--layout-grid {
        grid-template-columns: 1fr;
    }
}

/* Override mobile touch-target sizing for icon recenter button in tab bar */
.steve-map-nearby-tabs__bar .steve-map-recenter {
    padding: 5px 0;
    min-height: 0;
}

.steve-map-list--layout-row .steve-map-list__main {
    display: flex;
    flex-wrap: wrap;
    column-gap: 10px;
    row-gap: 4px;
}



.steve-map-list--layout-grid .steve-map-list__thumb {
    grid-column: 1;
    grid-row: 1 / span 4;
}

.steve-map-list--layout-grid .steve-map-list__meta,
.steve-map-list--layout-grid .steve-map-list__terms,
.steve-map-list--layout-grid .steve-map-list__actions,
.steve-map-list--layout-grid .steve-map-list__desc {
    grid-column: 2;
}

.steve-map-list__meta {
    margin-top: 6px;
    font-size: 12px;
    opacity: 0.9;
}

.steve-map-list__meta-row {
    line-height: 1.3;
}

.steve-map-list__meta-k {
    font-weight: 600;
}

/* Rich popup */
.steve-map-popup__thumb img {
    display: block;
    width: 100%;
    max-width: 240px;
    height: auto;
    border-radius: 8px;
    margin-bottom: 6px;
}

.steve-map-popup__title {
    font-weight: 700;
    margin-bottom: 4px;
}

.steve-map-popup__title a {
    text-decoration: none;
}

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

.steve-map-popup__excerpt {
    font-size: 13px;
    line-height: 1.35;
    margin-bottom: 6px;
}

.steve-map-popup__meta {
    font-size: 12px;
    opacity: 0.9;
    border-top: 1px solid #eee;
    padding-top: 6px;
}

.steve-map-popup__meta-row + .steve-map-popup__meta-row {
    margin-top: 2px;
}


.steve-map-popup__meta-k {
    font-weight: 600;
}

/* Ensure Leaflet popups appear above our controls panel */
.steve-leaflet-map .leaflet-popup-pane {
    z-index: 2500 !important;
}

/* Popup terms chips */
.steve-map-popup__terms {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* ------------------------------------------------------------
   Leaflet Layers Control: checkbox hardening
   Some themes (or optimization plugins) globally restyle checkboxes, e.g.
     input[type="checkbox"] { appearance:none; }
   which can make Leaflet overlay checkboxes "disappear" while labels remain.
   Scope the fix to Leaflet's layers control inside our map container.
   ------------------------------------------------------------ */

/* Make Leaflet's layer switcher float above our overlay panels/cards (and force visibility). */
.steve-leaflet-map .leaflet-control-layers {
    z-index: 2500 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Keep checkbox hardening scoped to Leaflet's layers control */
.steve-leaflet-map .leaflet-control-layers input.leaflet-control-layers-selector[type="checkbox"] {
    -webkit-appearance: checkbox !important;
    appearance: checkbox !important;
    display: inline-block !important;
    width: auto !important;
    height: auto !important;
    opacity: 1 !important;
    position: relative !important;
    left: auto !important;
    top: auto !important;
    margin: 2px 4px 0 0 !important; /* keep a little space before label text */
    clip: auto !important;
    clip-path: none !important;
    transform: none !important;
}

.steve-leaflet-map .leaflet-control-layers input.leaflet-control-layers-selector[type="checkbox"]::before,
.steve-leaflet-map .leaflet-control-layers input.leaflet-control-layers-selector[type="checkbox"]::after {
    content: none !important;
}

/* ------------------------------------------------------------
   Custom marker shapes (CSS markers via Leaflet DivIcon)
   Usage: set point.marker_class = "marker-pin" (or any class you create)
   The JS adds:
     <div class="steve-map-marker marker-pin">
       <div class="steve-map-marker__pin" style="--steve-marker-color:#e53935"></div>
     </div>
   ------------------------------------------------------------ */

/* Base container: DivIcon wrapper */
.steve-map-marker {
    /* Leaflet adds its own background/box styles; neutralize */
    background: transparent !important;
    border: 0 !important;
}

/* Leaflet divIcon wrapper reset (needed for custom HTML markers).
   Leaflet's default `.leaflet-div-icon` adds a background + border which can hide our marker HTML,
   especially in wp-admin previews. */
.steve-marker-div-icon.leaflet-div-icon {
    background: transparent !important;
    border: 0 !important;
}

/* Default pin element (can be overridden by specific classes) */
.steve-map-marker__pin {
    width: 18px;
    height: 18px;
    border-radius: 999px;
    background: var(--steve-marker-color, #1e88e5);
    border: 2px solid rgba(0, 0, 0, 0.25);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

/* Example: a map "pin" / teardrop */
.steve-map-marker.marker-pin .steve-map-marker__pin {
    width: 18px;
    height: 18px;
    border-radius: 18px 18px 18px 0;
    transform: rotate(-45deg);
    transform-origin: 50% 50%;
    background: var(--steve-marker-color, orange);
    border: 2px solid rgba(0, 0, 0, 0.25);
}

/* Inner dot so the pin looks nicer */
.steve-map-marker.marker-pin .steve-map-marker__pin::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    transform: translate(-50%, -50%) rotate(45deg); /* cancel parent rotation */
    background: rgba(255, 255, 255, 0.95);
}

/* ----------------------------------------------------------------
   Steve Leaflet Map: custom layers panel (mobile drawer/panel)
   ---------------------------------------------------------------- */

.steve-map-layers {
    width: 100%;
    flex: 1 1 100%;
    order: 1;
}



.steve-map-layers__toggle {
    width: 100%;
    text-align: left;
    font-weight: 800;
    border-width: 2px;
}

.steve-map-layers__panel {
    margin-top: 10px;
    width: 100%;

    border: 1px solid rgba(0, 0, 0, 0.14);
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.02);

    padding: 10px;
    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Ensure JS-driven `panel.hidden = true` actually collapses the panel,
   even though we set display:flex above. */
.steve-map-layers__panel[hidden] {
    display: none !important;
}

.steve-map-layers__section-title {
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    opacity: 0.75;
    margin-bottom: 8px;
}

.steve-map-layers__grid {
    display: grid;
    gap: 10px;
}

/* Chunky buttons: brutalist but theme-friendly (inherit colors) */
.steve-map-layers__btn {
    border: 2px solid rgba(0, 0, 0, 0.18);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.25);

    padding: 14px 12px;
    min-height: 52px;

    font-weight: 900;
    font-size: 14px;
    line-height: 1.1;
    text-align: center;

    cursor: pointer;

    box-shadow: 3px 3px 0 rgba(0, 0, 0, 1);
}

.steve-map-layers__btn:hover {
    background: rgba(0, 0, 0, 0.04);
}

.steve-map-layers__btn.is-on {
    border-color: rgba(30, 136, 229, 0.55);
    background: rgba(30, 136, 229, 0.10);
}

.steve-map-layers__btn:focus {
    outline: 3px solid rgba(30, 136, 229, 0.35);
    outline-offset: 2px;
}

/* Desktop layout: 3 across for base, 2-3 across for overlays */
@media (min-width: 600px) {
    .steve-map-layers__grid--base {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .steve-map-layers__grid--overlay {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Mobile: 2 across for overlays, 2-3 across for base */
@media (max-width: 599px) {
    .steve-map-layers__grid--base {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .steve-map-layers__grid--overlay {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .steve-map-layers__btn {
        min-height: 56px; /* touch-friendly */
        font-size: 16px;  /* avoids iOS zoom-on-focus */
        box-shadow: 4px 4px 0 rgba(0, 0, 0, 1);
    }
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
    .steve-map-layers__panel {
        border-color: rgba(255, 255, 255, 0.18);
        background: rgba(255, 255, 255, 0.04);
    }

    .steve-map-layers__btn {
        background: rgba(0, 0, 0, 0.20);
        border-color: rgba(255, 255, 255, 0.20);
        box-shadow: 3px 3px 0 rgba(255, 255, 255, 0.15);
    }

    .steve-map-layers__btn:hover {
        background: rgba(255, 255, 255, 0.06);
    }
}