/* =============================================================================
   Route Finder V2 — Split-panel layout
   Uses existing --rfcc-* CSS custom properties from rfcc_output_dynamic_button_styles()
   ============================================================================= */

/* ── Reset / base ─────────────────────────────────────────────────────────── */
.rfcc-v2-wrapper *,
.rfcc-v2-wrapper *::before,
.rfcc-v2-wrapper *::after {
    box-sizing: border-box;
}

/* ── Outer wrapper ────────────────────────────────────────────────────────── */
.rfcc-v2-wrapper {
    display: flex;
    align-items: stretch;
    min-height: 80vh;
    position: relative;
    font-size: 14px;
    line-height: 1.5;
    color: var(--rf-text-primary, #212529);
    /* Break out of theme's content max-width container. !important is
       necessary here: block themes' theme.json-generated global-styles CSS
       (.is-layout-constrained > :where(...) { max-width: ... }) has the same
       specificity as this class selector and is printed later in <head> than
       this stylesheet, so it would otherwise win the cascade on source order
       alone and silently confine this wrapper (and the route grid inside it)
       to the theme's narrow content column - reproduced on a stock Hostinger
       AI theme site with no customisation. */
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: 0 !important;
}

/* ── Sidebar ──────────────────────────────────────────────────────────────── */
.rfcc-v2-sidebar {
    width: 260px;
    flex-shrink: 0;
    background:
        linear-gradient(180deg, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0) 25%, rgba(0,0,0,0) 70%, rgba(0,0,0,0.12) 100%),
        var(--rfcc-filter-background-color, #798d7c);
    color: #fff;
    display: flex;
    flex-direction: column;
    transition: width 0.25s ease, opacity 0.2s ease;
    position: relative;
    overflow: hidden;
}

.rfcc-v2-sidebar.collapsed {
    width: 40px;
}

/* Hide sidebar content when collapsed (expand strip takes over) */
.rfcc-v2-sidebar.collapsed > .rfcc-v2-sidebar-header,
.rfcc-v2-sidebar.collapsed > .rfcc-v2-sidebar-status,
.rfcc-v2-sidebar.collapsed > .rfcc-v2-filter-panel,
.rfcc-v2-sidebar.collapsed > .rfcc-v2-group-panel {
    visibility: hidden;
    pointer-events: none;
    opacity: 0;
}

/* ── Sidebar header ───────────────────────────────────────────────────────── */
.rfcc-v2-sidebar-header {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 14px 10px;
    border-bottom: 1px solid rgba(255,255,255,0.15);
    flex-shrink: 0;
}

.rfcc-v2-header-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.rfcc-v2-header-controls-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.rfcc-v2-sidebar-title {
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.rfcc-v2-sidebar-collapse-btn {
    background: none;
    border: none;
    color: rgba(255,255,255,0.7);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    transition: color 0.15s, background 0.15s;
    flex-shrink: 0;
}
.rfcc-v2-sidebar-collapse-btn:hover {
    color: #fff;
    background: rgba(255,255,255,0.1);
}
/* Desktop: show chevron, hide X */
.rfcc-v2-sidebar-collapse-btn .rfcc-v2-close-icon { display: none; }
.rfcc-v2-sidebar-collapse-btn .rfcc-v2-collapse-icon { display: block; }

/* ── Expand strip (inside sidebar, full-height bar when collapsed) ─────────── */
.rfcc-v2-open-btn {
    position: absolute;
    inset: 0;
    background: var(--rfcc-filter-background-color, #798d7c);
    color: rgba(255,255,255,0.8);
    border: none;
    border-radius: 0;
    padding: 0;
    cursor: pointer;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    display: none;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
    padding-inline-start: 12px;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    z-index: 10;
    transition: background 0.15s, color 0.15s;
}
.rfcc-v2-open-btn:hover {
    filter: brightness(0.85);
    color: #fff;
}
.rfcc-v2-sidebar.collapsed .rfcc-v2-open-btn {
    display: flex;
}

/* ── Unit toggle ──────────────────────────────────────────────────────────── */
.rfcc-v2-unit-toggle {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
}

.rfcc-v2-unit-label {
    font-size: 11px;
    opacity: 0.65;
    transition: opacity 0.15s;
}
.rfcc-v2-unit-label.active { opacity: 1; font-weight: 600; }

/* ── Toggle button (unit + scope) ─────────────────────────────────────────── */
.rfcc-v2-toggle-btn {
    width: 32px;
    height: 18px;
    background: rgba(0,0,0,0.25);
    border: none;
    border-radius: 9px;
    position: relative;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.2s;
}
.rfcc-v2-toggle-btn.imperial { background: var(--rfcc-filter-button-selected-color, rgba(255,255,255,0.4)); }

.rfcc-v2-toggle-slider {
    position: absolute;
    width: 14px;
    height: 14px;
    background: #fff;
    border-radius: 50%;
    top: 2px;
    left: 2px;
    transition: left 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    pointer-events: none;
}
.rfcc-v2-toggle-btn.imperial .rfcc-v2-toggle-slider { left: 16px; }

/* ── Sidebar status bar (Reset filters / Back to results) ────────────────── */
.rfcc-v2-sidebar-status {
    padding: 8px 14px 8px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 16px;
}
/* Matches .rfcc-v2-section-label style — uppercase, weighted, icon-led */
.rfcc-v2-status-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255,255,255,0.75);
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    line-height: 1.4;
    transition: color 0.15s;
}
.rfcc-v2-status-link:hover { color: #fff; }
.rfcc-v2-status-link svg { opacity: 0.75; flex-shrink: 0; }

/* ── Filter panel (scrollable area) ──────────────────────────────────────── */
/* Scroll-to-top button for the filter panel (bottom-right of the sidebar) */
.rfcc-v2-scrolltop {
    position: absolute;
    bottom: 14px;
    right: 14px;
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    z-index: 20;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
.rfcc-v2-scrolltop.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.rfcc-v2-scrolltop:hover { background: rgba(0, 0, 0, 0.68); }
.rfcc-v2-sidebar.collapsed .rfcc-v2-scrolltop { display: none; }

/* Mobile: move to the bottom-left and keep it subtle/semi-transparent. */
@media (max-width: 768px) {
    .rfcc-v2-scrolltop {
        left: 14px;
        right: auto;
        bottom: 16px;
        width: 34px;
        height: 34px;
        background: rgba(0, 0, 0, 0.3);
        box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
    }
    .rfcc-v2-scrolltop.visible { opacity: 0.55; }
    .rfcc-v2-scrolltop:hover,
    .rfcc-v2-scrolltop:active { background: rgba(0, 0, 0, 0.4); }
}

.rfcc-v2-filter-panel {
    flex: 1;
    overflow-y: auto;
    padding: 12px 14px 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* ── Filter sections ──────────────────────────────────────────────────────── */
.rfcc-v2-section {
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 10px;
    margin-bottom: 2px;
}
.rfcc-v2-section:last-of-type { border-bottom: none; }

.rfcc-v2-section-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255,255,255,0.7);
    margin-bottom: 6px;
}

/* ── Collapsible sections ─────────────────────────────────────────────────── */
.rfcc-v2-section-header {
    background: none;
    border: none;
    color: rgba(255,255,255,0.85);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
    text-align: left;
    padding: 4px 0;
    transition: color 0.15s;
}
.rfcc-v2-section-header:hover { color: #fff; }

/* Force section header SVG icons visible — themes sometimes hide button SVGs */
.rfcc-v2-section-header svg {
    display: inline-block !important;
    flex-shrink: 0 !important;
    visibility: visible !important;
    opacity: 0.75;
    color: currentColor;
    fill: none;
    stroke: currentColor;
    vertical-align: middle;
}

.rfcc-v2-toggle-arrow {
    margin-left: auto;
    font-size: 10px;
    transition: transform 0.2s;
    flex-shrink: 0;
}
.rfcc-v2-toggle-arrow::after { content: '▾'; }
.rfcc-v2-collapsible.collapsed .rfcc-v2-toggle-arrow::after { content: '▸'; }

.rfcc-v2-section-preview {
    font-size: 10px;
    font-weight: 400;
    opacity: 0.65;
    margin-left: 4px;
    font-style: italic;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 80px;
}

/* ── Filter button groups ─────────────────────────────────────────────────── */
.rfcc-v2-btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding-top: 6px;
}

.rfcc-na {
    display: none !important;
}
/* Hides duplicate-named buttons (e.g. two "G1" club-group buttons owned by
   different Definition Groups) once merged by name - see
   applyNameMergeForDimension() in rfcc-v2.js. */
.rfcc-name-merged-hidden {
    display: none !important;
}
.rfcc-v2-filter-btn {
    padding: 4px 10px;
    border-radius: 20px;
    border: 1.5px solid rgba(255,255,255,0.25);
    background: var(--rfcc-filter-button-unselected-color, rgba(255,255,255,0.15));
    color: rgba(255,255,255,0.85);
    cursor: pointer;
    font-size: 11px;
    font-weight: 500;
    transition: all 0.15s;
    white-space: nowrap;
}
.rfcc-v2-filter-btn:hover {
    border-color: rgba(255,255,255,0.5);
    color: #fff;
}
.rfcc-v2-filter-btn.active {
    background: var(--rfcc-filter-button-selected-color, rgba(255,255,255,0.9));
    border-color: var(--rfcc-filter-button-selected-color, rgba(255,255,255,0.9));
    color: var(--rfcc-filter-button-selected-text-color, #000);
    font-weight: 600;
}

/* Tag filter buttons carry the same leading tag icon as the route-page tag
   badges (.rfcc-tag-badge) - .tag-btn-icon itself (mask-image etc.) is
   defined once in style.css, which loads on every page including v2's. */
.rfcc-v2-filter-btn[data-type="tags"] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.rfcc-v2-all-none-btn {
    padding: 4px 10px;
    border-radius: 20px;
    border: 1.5px dashed rgba(255,255,255,0.3);
    background: transparent;
    color: rgba(255,255,255,0.6);
    cursor: pointer;
    font-size: 10px;
    transition: all 0.15s;
}
.rfcc-v2-all-none-btn:hover {
    border-color: rgba(255,255,255,0.6);
    color: rgba(255,255,255,0.9);
}

/* Shortcut "All" type has a distinct look */
.rfcc-v2-shortcut-all {
    border-style: dashed;
}

/* ── Checkbox label ───────────────────────────────────────────────────────── */
.rfcc-v2-section-group { padding-bottom: 2px; }
.rfcc-v2-checkbox-label {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
    color: rgba(255,255,255,0.7);
    padding: 4px 0;
}
.rfcc-v2-checkbox-label input[type="checkbox"] {
    accent-color: var(--rfcc-filter-button-selected-color, #fff);
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* ── Search box ───────────────────────────────────────────────────────────── */
.rfcc-v2-search-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.rfcc-v2-search-input {
    width: 100%;
    padding: 7px 10px;
    background: rgba(255,255,255,0.12);
    border: 1.5px solid rgba(255,255,255,0.2);
    border-radius: 5px;
    color: #fff;
    font-size: 12px;
    outline: none;
    transition: border-color 0.15s, background 0.15s;
}
.rfcc-v2-search-input::placeholder { color: rgba(255,255,255,0.4); }
.rfcc-v2-search-input:focus {
    border-color: rgba(255,255,255,0.5);
    background: rgba(255,255,255,0.18);
}

.rfcc-v2-search-scope {
    display: flex;
    align-items: center;
    gap: 6px;
}
.rfcc-v2-scope-label {
    font-size: 10px;
    opacity: 0.55;
    transition: opacity 0.15s;
}
.rfcc-v2-scope-label.active { opacity: 1; font-weight: 600; }

/* ── Dual range sliders ───────────────────────────────────────────────────── */
.rfcc-v2-slider-wrap {
    padding-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rfcc-v2-slider-values {
    display: flex;
    align-items: center;
    gap: 8px;
}

.rfcc-v2-slider-input-wrap {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1;
}

.rfcc-v2-slider-num {
    width: 100%;
    padding: 4px 6px;
    background: rgba(255,255,255,0.12);
    border: 1.5px solid rgba(255,255,255,0.2);
    border-radius: 4px;
    color: #fff;
    font-size: 12px;
    text-align: center;
    min-width: 0;
    -moz-appearance: textfield;
}
.rfcc-v2-slider-num::-webkit-inner-spin-button,
.rfcc-v2-slider-num::-webkit-outer-spin-button { -webkit-appearance: none; }
.rfcc-v2-slider-num:focus {
    outline: none;
    border-color: rgba(255,255,255,0.5);
}

.rfcc-v2-slider-unit {
    font-size: 10px;
    opacity: 0.7;
    white-space: nowrap;
    flex-shrink: 0;
}

.rfcc-v2-slider-sep {
    color: rgba(255,255,255,0.5);
    font-size: 12px;
    flex-shrink: 0;
}

/* Dual range track */
.rfcc-v2-dual-slider {
    position: relative;
    height: 20px;
    overflow: visible;
}

.rfcc-v2-slider-track {
    position: absolute;
    left: 0;
    right: 0;
    height: 4px;
    top: 50%;
    margin-top: -2px;
    background: rgba(255,255,255,0.2);
    border-radius: 2px;
    pointer-events: none;
}

.rfcc-v2-slider-fill {
    position: absolute;
    height: 4px;
    top: 50%;
    margin-top: -2px;
    background: var(--rfcc-slider-fill-color, rgba(255,255,255,0.7));
    border-radius: 2px;
    pointer-events: none;
}

/* Custom drag thumbs — positioned by JS, no webkit quirks */
.rfcc-v2-thumb {
    position: absolute;
    top: 50%;
    width: 16px;
    height: 16px;
    margin-top: -8px;
    margin-left: -8px;
    border-radius: 50%;
    background: white;
    border: 2px solid var(--rfcc-filter-background-color, #798d7c);
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    cursor: grab;
    z-index: 2;
    transition: box-shadow 0.15s ease;
    touch-action: none;
    box-sizing: border-box;
}
.rfcc-v2-thumb:hover,
.rfcc-v2-thumb:focus {
    box-shadow: 0 2px 8px rgba(0,0,0,0.5);
    outline: none;
}
.rfcc-v2-thumb:active { cursor: grabbing; }
.rfcc-v2-thumb-max { z-index: 3; }

/* ── Near a Place filter (location discovery Phase 2) ─────────────────────── */
.rfcc-v2-near-place-body { padding-top: 6px; }
.rfcc-v2-near-place-search-row {
    display: flex;
    align-items: center;
    gap: 6px;
}
.rfcc-v2-near-place-search-row .rfcc-v2-near-place-input { flex: 1 1 auto; min-width: 0; }
.rfcc-v2-near-place-locate-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    background: rgba(255,255,255,0.12);
    color: #fff;
    border: 1.5px solid rgba(255,255,255,0.2);
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.rfcc-v2-near-place-locate-btn:hover {
    background: rgba(255,255,255,0.2);
    border-color: rgba(255,255,255,0.4);
}
.rfcc-v2-near-place-locate-btn.is-loading { opacity: 0.6; pointer-events: none; }
.rfcc-v2-near-place-status {
    font-size: 10.5px;
    color: rgba(255,255,255,0.65);
    margin-top: 4px;
    min-height: 1em;
}
.rfcc-v2-near-place-status.is-error { color: #ffb3b3; }
.rfcc-v2-near-place-results {
    list-style: none;
    margin: 6px 0 0;
    padding: 0;
    max-height: 200px;
    overflow-y: auto;
    border-radius: 5px;
    background: rgba(255,255,255,0.08);
    border: 1.5px solid rgba(255,255,255,0.2);
}
.rfcc-v2-near-place-result-btn {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    color: #fff;
    padding: 7px 9px;
    font-size: 11px;
    cursor: pointer;
    line-height: 1.35;
}
.rfcc-v2-near-place-results li:last-child .rfcc-v2-near-place-result-btn { border-bottom: none; }
.rfcc-v2-near-place-result-btn:hover,
.rfcc-v2-near-place-result-btn:focus {
    background: rgba(255,255,255,0.14);
    outline: none;
}
.rfcc-v2-near-place-result-count {
    display: block;
    font-size: 10px;
    color: rgba(255,255,255,0.6);
    margin-top: 2px;
}
.rfcc-v2-near-place-chip-wrap { margin-top: 6px; }
.rfcc-v2-near-place-chip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    background: rgba(255,255,255,0.15);
    border: 1.5px solid rgba(255,255,255,0.25);
    border-radius: 20px;
    padding: 5px 6px 5px 11px;
}
.rfcc-v2-near-place-chip-label {
    font-size: 11px;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rfcc-v2-near-place-chip-clear {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.2);
    color: #fff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 0.85rem;
    line-height: 1;
}
.rfcc-v2-near-place-chip-clear:hover { background: rgba(255,255,255,0.35); }
.rfcc-v2-near-place-radius-row { margin-top: 10px; }
.rfcc-v2-near-place-radius-row label {
    display: block;
    font-size: 10.5px;
    font-weight: 600;
    color: rgba(255,255,255,0.85);
    margin-bottom: 4px;
}
.rfcc-v2-near-place-radius-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 4px;
    border-radius: 2px;
    background: rgba(255,255,255,0.2);
    outline: none;
    cursor: pointer;
}
.rfcc-v2-near-place-radius-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: white;
    border: 2px solid var(--rfcc-filter-background-color, #798d7c);
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
.rfcc-v2-near-place-radius-slider::-moz-range-thumb {
    height: 14px;
    width: 14px;
    border-radius: 50%;
    background: white;
    border: 2px solid var(--rfcc-filter-background-color, #798d7c);
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
.rfcc-v2-near-place-count {
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    margin-top: 8px;
}

/* ── Filter actions ───────────────────────────────────────────────────────── */
.rfcc-v2-filter-actions {
    display: flex;
    gap: 8px;
    padding: 12px 0 10px;
    flex-shrink: 0;
}

/* ── Password sign-in / sign-out ─────────────────────────────────────────── */
.rfcc-v2-pw-status {
    display: flex;
    align-items: center;
    gap: 8px;
}
.rfcc-v2-pw-status > i { opacity: 0.7; }
.rfcc-v2-pw-status > span {
    flex: 1;
    font-size: 11px;
    color: rgba(255,255,255,0.7);
}
.rfcc-v2-pw-status .rfcc-v2-pw-logout { font-size: 11px; }
.rfcc-v2-global-pw-form {
    display: flex;
    gap: 6px;
}
.rfcc-v2-global-pw-form .rfcc-v2-global-pw-input {
    flex: 1;
    min-width: 0;
}
.rfcc-v2-global-pw-form .rfcc-v2-global-pw-btn {
    flex-shrink: 0;
    font-size: 11px;
    cursor: pointer;
}
.rfcc-v2-global-pw-error {
    color: #e06050;
    font-size: 11px;
    margin: 4px 0 0;
    display: none;
}

.rfcc-v2-apply-btn {
    flex: 1;
    padding: 9px;
    background: var(--rfcc-filter-button-selected-color, rgba(255,255,255,0.9));
    color: var(--rfcc-filter-button-selected-text-color, #000);
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    transition: opacity 0.15s;
}
.rfcc-v2-apply-btn:hover { opacity: 0.88; }

.rfcc-v2-clear-btn {
    padding: 9px 14px;
    background: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.8);
    border: 1.5px solid rgba(255,255,255,0.2);
    border-radius: 5px;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.15s;
}
.rfcc-v2-clear-btn:hover {
    background: rgba(255,255,255,0.18);
    color: #fff;
}

.rfcc-v2-result-count {
    font-size: 11px;
    color: rgba(255,255,255,0.6);
    text-align: center;
    padding: 0 0 12px;
    min-height: 20px;
}

/* "Link to these filters" — copies a URL that restores the current filter
   combination (search/distance/ascent/club groups/etc.), since the address
   bar doesn't otherwise reflect it while filtering client-side. */
.rfcc-v2-link-filters-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 8px 10px;
    margin-bottom: 10px;
    background: transparent;
    border: 1.5px solid rgba(255,255,255,0.2);
    border-radius: 5px;
    color: rgba(255,255,255,0.8);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}
.rfcc-v2-link-filters-btn:hover {
    background: rgba(255,255,255,0.1);
    color: #fff;
}
.rfcc-v2-link-filters-btn.copied {
    background: #2e8b57;
    border-color: #2e8b57;
    color: #fff;
}

/* ── Group panel ──────────────────────────────────────────────────────────── */
.rfcc-v2-group-panel {
    display: none;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
}
.rfcc-v2-group-panel.active {
    display: flex;
}

.rfcc-v2-group-panel-header {
    padding: 10px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.15);
    flex-shrink: 0;
}

.rfcc-v2-back-btn {
    background: none;
    border: none;
    color: rgba(255,255,255,0.75);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 0 6px;
    transition: color 0.15s;
}
.rfcc-v2-back-btn:hover { color: #fff; }

.rfcc-v2-group-name {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    margin-top: 2px;
}

.rfcc-v2-group-routes-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.rfcc-v2-group-route-item {
    padding: 10px 12px;
    background: rgba(255,255,255,0.1);
    border-radius: 6px;
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: all 0.15s;
}
.rfcc-v2-group-route-item:hover,
.rfcc-v2-group-route-item.active {
    background: rgba(255,255,255,0.18);
    border-color: rgba(255,255,255,0.35);
}
.rfcc-v2-group-route-item.active {
    border-color: var(--rfcc-filter-button-selected-color, rgba(255,255,255,0.7));
}

.rfcc-v2-group-route-title {
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 3px;
}
.rfcc-v2-group-route-meta {
    font-size: 11px;
    color: rgba(255,255,255,0.65);
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.rfcc-v2-meta-asc,
.rfcc-v2-meta-desc,
.rfcc-v2-meta-peak {
    opacity: 0.7;
    font-size: 10px;
}

/* ── Group variant mini-maps bar (above route detail in content area) ─────── */
.rfcc-v2-group-maps-bar {
    flex-shrink: 0;
    padding: 12px 0 4px;
}

.rfcc-v2-group-maps-bar-inner {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 6px;
    scrollbar-width: thin;
    scrollbar-color: var(--rf-border-color, #dee2e6) transparent;
}
.rfcc-v2-group-maps-bar-inner::-webkit-scrollbar { height: 4px; }
.rfcc-v2-group-maps-bar-inner::-webkit-scrollbar-thumb { background: var(--rf-border-color, #dee2e6); border-radius: 2px; }

/* Strip navigation (added by setupGroupStripNav() in rfcc-v2.js) */
.rfcc-v2-group-maps-bar--nav {
    position: relative;
}
.rfcc-v2-group-maps-bar.can-next .rfcc-v2-group-maps-bar-inner {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent);
}
.rfcc-v2-group-maps-bar.can-prev .rfcc-v2-group-maps-bar-inner {
    -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 48px), transparent);
            mask-image: linear-gradient(to left, #000 calc(100% - 48px), transparent);
}
.rfcc-v2-group-maps-bar.can-prev.can-next .rfcc-v2-group-maps-bar-inner {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent);
            mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent);
}
.rfcc-v2-group-strip-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    display: none;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--rf-border-color, #dee2e6);
    background: var(--rf-bg-primary, #fff);
    color: var(--rf-text-primary, #212529);
    box-shadow: 0 2px 6px rgba(0,0,0,0.18);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}
.rfcc-v2-group-strip-btn span {
    display: block;
    margin-top: -3px;
}
.rfcc-v2-group-strip-btn:hover,
.rfcc-v2-group-strip-btn:focus-visible {
    border-color: var(--rfcc-button-color, #0073aa);
    color: var(--rfcc-button-color, #0073aa);
}
.rfcc-v2-group-strip-prev { left: 4px; }
.rfcc-v2-group-strip-next { right: 4px; }
.rfcc-v2-group-maps-bar.can-prev .rfcc-v2-group-strip-prev,
.rfcc-v2-group-maps-bar.can-next .rfcc-v2-group-strip-next {
    display: flex;
}

.rfcc-v2-group-minimap-wrap {
    flex-shrink: 0;
    width: 150px;
    border-radius: 6px;
    overflow: hidden;
    border: 1.5px solid var(--rf-border-color, #dee2e6);
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
    position: relative;
    background: var(--rf-bg-secondary, #f5f5f5);
}
.rfcc-v2-group-minimap-wrap:hover {
    border-color: var(--rfcc-button-color, #0073aa);
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}
.rfcc-v2-group-minimap-wrap.active {
    border-color: var(--rfcc-button-color, #0073aa);
}

.rfcc-v2-group-minimap {
    width: 100%;
    height: 100px;
    display: block;
}

.rfcc-v2-group-minimap-label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,0.55);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    padding: 3px 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

/* Transparent click overlay (above map, below label) */
.rfcc-v2-group-minimap-overlay {
    position: absolute;
    inset: 0;
    z-index: 500;
    cursor: pointer;
}

/* ── Content area ─────────────────────────────────────────────────────────── */
.rfcc-v2-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: var(--rf-bg-primary, #f8f8f8);
    padding: 16px 20px;
    gap: 14px;
    overflow-y: auto;
}

.rfcc-v2-content--detail {
    padding-top: 0;
}

/* Dark mode toggle repositioned into title row */
.rfcc-v2-header-title-row .rf-dark-mode-toggle {
    position: static;
    width: 30px;
    height: 30px;
    padding: 5px;
    border-radius: 50%;
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.35);
    box-shadow: none;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1px; /* nudge centre to align with the « button below */
    color: rgba(255, 255, 255, 0.7);
    transform: none;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
    touch-action: manipulation;
}
.rfcc-v2-header-title-row .rf-dark-mode-toggle svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}
.rfcc-v2-header-title-row .rf-dark-mode-toggle:hover,
.rfcc-v2-header-title-row .rf-dark-mode-toggle:active {
    transform: none;
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.6);
    box-shadow: none;
    color: #fff;
}
@media (max-width: 768px) {
    .rfcc-v2-header-title-row .rf-dark-mode-toggle {
        width: 44px;
        height: 44px;
    }
    .rfcc-v2-header-title-row .rf-dark-mode-toggle svg {
        width: 22px;
        height: 22px;
    }
}

/* ── News banners ──────────────────────────────────────────────────────────── */
.rfcc-v2-news-banners {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 14px;
}

.rfcc-v2-news-banner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 36px 10px 14px;
    border: 1.5px solid;
    border-radius: 8px;
    position: relative;
    font-size: 13px;
    line-height: 1.5;
}

.rfcc-v2-news-banner-icon {
    flex-shrink: 0;
    font-size: 15px;
    margin-top: 2px;
}

.rfcc-v2-news-banner-message {
    flex: 1;
    min-width: 0;
}
.rfcc-v2-news-banner-message p { margin: 0 0 6px; }
.rfcc-v2-news-banner-message p:last-child { margin-bottom: 0; }
.rfcc-v2-news-banner-message a { color: inherit; text-decoration: underline; }
.rfcc-v2-news-banner-message ul,
.rfcc-v2-news-banner-message ol { margin: 0 0 6px 18px; }
.rfcc-v2-news-banner-message ul:last-child,
.rfcc-v2-news-banner-message ol:last-child { margin-bottom: 0; }

.rfcc-v2-news-banner-close {
    position: absolute;
    top: 6px;
    right: 8px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    padding: 4px;
    opacity: .55;
    color: inherit;
}
.rfcc-v2-news-banner-close:hover { opacity: 1; }

.rfcc-v2-news-banner-theme-pink   { background: #fce4ec; border-color: #d63384; color: #8a1c4f; }
.rfcc-v2-news-banner-theme-green  { background: #ebfbee; border-color: #2f9e44; color: #215b2e; }
.rfcc-v2-news-banner-theme-blue   { background: #e7f5ff; border-color: #1971c2; color: #124d85; }
.rfcc-v2-news-banner-theme-orange { background: #fff4e6; border-color: #e8590c; color: #9c3c08; }
.rfcc-v2-news-banner-theme-purple { background: #f3f0ff; border-color: #7048e8; color: #4a2fb3; }
.rfcc-v2-news-banner-theme-grey   { background: #f1f3f5; border-color: #495057; color: #343a40; }

.rf-dark-mode .rfcc-v2-news-banner-theme-pink,   [data-rf-theme="dark"] .rfcc-v2-news-banner-theme-pink   { background: #3a1220; border-color: #e8639e; color: #ffc2dc; }
.rf-dark-mode .rfcc-v2-news-banner-theme-green,  [data-rf-theme="dark"] .rfcc-v2-news-banner-theme-green  { background: #12301a; border-color: #51cf66; color: #b2f2bb; }
.rf-dark-mode .rfcc-v2-news-banner-theme-blue,   [data-rf-theme="dark"] .rfcc-v2-news-banner-theme-blue   { background: #0f2a42; border-color: #4dabf7; color: #a5d8ff; }
.rf-dark-mode .rfcc-v2-news-banner-theme-orange, [data-rf-theme="dark"] .rfcc-v2-news-banner-theme-orange { background: #3a260f; border-color: #ff922b; color: #ffd8a8; }
.rf-dark-mode .rfcc-v2-news-banner-theme-purple, [data-rf-theme="dark"] .rfcc-v2-news-banner-theme-purple { background: #271c42; border-color: #9775fa; color: #d0bfff; }
.rf-dark-mode .rfcc-v2-news-banner-theme-grey,   [data-rf-theme="dark"] .rfcc-v2-news-banner-theme-grey   { background: #2b2e33; border-color: #adb5bd; color: #dee2e6; }

/* ── Content header ───────────────────────────────────────────────────────── */
.rfcc-v2-content-header {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.rfcc-v2-count-wrap {
    flex: 1;
    font-size: 13px;
    color: var(--rf-text-secondary, #6c757d);
}
.rfcc-v2-count-wrap strong { color: var(--rf-text-primary, #212529); }

.rfcc-v2-back-grid-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    background: none;
    border: 1.5px solid var(--rf-border-color, #dee2e6);
    color: var(--rf-text-primary, #212529);
    padding: 6px 12px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.15s;
}
.rfcc-v2-back-grid-btn:hover {
    background: var(--rf-bg-secondary, #f0f0f0);
    border-color: #aaa;
}

/* Route detail: the header is just a row of the toolbar buttons (New route,
   Ride Planner) on the right. The count and sort don't apply, and on desktop
   the sidebar has its own back link. */
.rfcc-v2-content-header--detail {
    justify-content: flex-end;
}
.rfcc-v2-content-header--detail .rfcc-v2-count-wrap,
.rfcc-v2-content-header--detail .rfcc-v2-group-by-activity-wrap,
.rfcc-v2-content-header--detail .rfcc-v2-back-grid-btn {
    display: none !important;
}
.rfcc-v2-sort-wrap {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
.rfcc-v2-content-header--detail .rfcc-v2-sort-wrap {
    display: none;
}

@media (max-width: 768px) {
    /* On mobile the back button shows too, on the left; the buttons stay right. */
    .rfcc-v2-content-header--detail .rfcc-v2-back-grid-btn {
        display: flex !important;
        margin-right: auto;
    }
    .rfcc-v2-content-header--detail .rfcc-v2-mobile-filter-btn,
    .rfcc-v2-content-header--detail .rfcc-v2-count-wrap,
    .rfcc-v2-content-header--detail .rfcc-v2-ride-planner-wrap {
        display: none;
    }
    /* Group Feature Page CTA - desktop only; JS toggles its own display:none/
       inline-flex when a group context is active, so !important is needed
       here to win over that inline style on mobile. */
    .rfcc-v2-group-feature-btn {
        display: none !important;
    }
}

/* "Link to this route" — copy the route permalink to the clipboard */
.rfcc-v2-copy-link-btn,
.rfcc-v2-copy-group-link-btn,
.rfcc-v2-group-feature-btn,
.rfcc-v2-hero-link-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--rfcc-copy-link-button-color, #0c55cc);
    border: 1.5px solid var(--rfcc-copy-link-button-color, #0c55cc);
    color: #fff;
    padding: 6px 12px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.15s;
    text-decoration: none !important;
}
.rfcc-v2-copy-link-btn:hover,
.rfcc-v2-copy-group-link-btn:hover,
.rfcc-v2-group-feature-btn:hover,
.rfcc-v2-hero-link-btn:hover {
    background: var(--rfcc-copy-link-button-hover-color, #0a47a8);
    border-color: var(--rfcc-copy-link-button-hover-color, #0a47a8);
    color: #fff;
}
/* Group+route link and feature page use an outline style to distinguish from the single-route button */
.rfcc-v2-copy-group-link-btn,
.rfcc-v2-group-feature-btn {
    background: transparent;
    color: var(--rfcc-copy-link-button-color, #0c55cc);
}
.rfcc-v2-copy-group-link-btn:hover,
.rfcc-v2-group-feature-btn:hover {
    background: var(--rfcc-copy-link-button-color, #0c55cc);
    color: #fff;
}
.rfcc-v2-copy-link-btn.copied,
.rfcc-v2-copy-group-link-btn.copied {
    background: #2e8b57;
    border-color: #2e8b57;
    color: #fff;
}

/* Dark mode: keep the accent styling (override the broad .rf-dark-mode button rule) */
.rf-dark-mode .rfcc-v2-copy-link-btn,
.rf-dark-mode .rfcc-v2-hero-link-btn {
    background-color: var(--rfcc-copy-link-button-color, #0c55cc);
    color: #fff;
}
.rf-dark-mode .rfcc-v2-copy-group-link-btn,
.rf-dark-mode .rfcc-v2-group-feature-btn {
    background-color: transparent;
    color: var(--rfcc-copy-link-button-color, #6ea8ff);
}
.rf-dark-mode .rfcc-v2-copy-group-link-btn:hover,
.rf-dark-mode .rfcc-v2-group-feature-btn:hover {
    background-color: var(--rfcc-copy-link-button-color, #0c55cc);
    color: #fff;
}
.rf-dark-mode .rfcc-v2-copy-link-btn.copied,
.rf-dark-mode .rfcc-v2-copy-group-link-btn.copied {
    background-color: #2e8b57;
    color: #fff;
}

.rfcc-v2-sort-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--rf-text-muted, #666);
    white-space: nowrap;
}
.rfcc-v2-sort-select {
    padding: 6px 10px;
    border: 1.5px solid var(--rf-border-color, #dee2e6);
    border-radius: 5px;
    font-size: 12px;
    background: var(--rf-bg-card, #fff);
    color: var(--rf-text-primary, #212529);
    cursor: pointer;
    outline: none;
}
.rfcc-v2-sort-select:focus {
    border-color: var(--rfcc-button-color, #0073aa);
}

/* "Group by activity type" - sits under the sort dropdown in the content
   header. flex-basis: 100% forces it onto its own row within the header's
   flex-wrap layout, right beneath .rfcc-v2-sort-wrap, without needing a
   layout rewrite. justify-content: flex-end right-aligns it under the sort
   box's right edge, rather than spanning the row or sitting left-aligned.
   Hidden by default (see PHP) until 2+ Activity Types are active. */
.rfcc-v2-group-by-activity-wrap {
    flex-basis: 100%;
    display: flex;
    justify-content: flex-end;
}
.rfcc-v2-group-by-activity-wrap .rfcc-v2-checkbox-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--rf-text-muted, #666);
    cursor: pointer;
}
.rfcc-v2-group-by-activity-wrap .rfcc-v2-checkbox-label input[type="checkbox"] {
    accent-color: var(--rfcc-button-color, #0073aa);
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* ── Route card grid ──────────────────────────────────────────────────────── */
.rfcc-v2-route-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
    align-content: start;
}

/* Route cards inherit existing .rfcc-route-card / .route-item styles.
   We add v2-specific overrides here. */
.rfcc-v2-route-grid .route-item {
    cursor: pointer;
    border-radius: 8px;
    transition: box-shadow 0.15s, transform 0.1s;
    background: var(--rfcc-route-card-background-color, #fff);
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}
.rfcc-v2-route-grid .route-item:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    transform: translateY(-2px);
}

/* Block direct navigation clicks on View Route button inside cards — v2 handles them */
.rfcc-v2-route-grid .view-route-button,
.rfcc-v2-route-grid a.view-route-button,
.rfcc-v2-route-grid .group-view-button {
    pointer-events: none;
}

/* ── Route detail panel ───────────────────────────────────────────────────── */
.rfcc-v2-route-detail {
    flex: 1;
}

.rfcc-v2-detail-inner {
    background: var(--rf-bg-card, #fff);
    border-radius: 8px;
    /* overflow:hidden removed — it was clipping Leaflet marker pins that extend above
       the map container's top edge when a destination is highlighted. The rounded
       corners are preserved via border-radius; the map-wrap clips its own content. */
    overflow: visible;
    box-shadow: var(--rf-shadow-sm, 0 1px 4px rgba(0,0,0,0.1));
    /* Full width — no max-width constraint */
}


.rfcc-v2-detail-map-wrap {
    position: relative;
    /* Own stacking context: the map's button row / panels (z-index 10000+)
       and the Deselect button (99999) stay layered within the map instead
       of painting over the theme's fixed/sticky header (e.g. Customizr's
       z-index:100 sticky navbar) or the phone filter drawer. */
    z-index: 1;
}


/* Full-map wrapper: tidy up child map-block margins */
.rfcc-v2-detail-map-wrap.rfcc-v2-full-map-wrap .rfcc-map-block {
    margin: 0;
    padding: 0;
}

/* Override the 250px hardcoded height from the shortcode.
   .leaflet-map uses height:auto so the detached elevation chart (inserted as a sibling
   of .WPLeafletMap inside .leaflet-map) expands the container rather than overflowing
   it and visually overlapping .rfcc-v2-detail-body below.
   The actual map canvas (.WPLeafletMap / .leaflet-container) gets an explicit height. */
.rfcc-v2-detail-map-wrap.rfcc-v2-full-map-wrap .leaflet-map {
    height: auto !important;
}
.rfcc-v2-detail-map-wrap.rfcc-v2-full-map-wrap .WPLeafletMap,
.rfcc-v2-detail-map-wrap.rfcc-v2-full-map-wrap .leaflet-container {
    height: clamp(300px, 42vh, 500px) !important;
}

/* Elevation profile spacing - CSS only. Nothing here changes how or when
   the chart is created, sized or redrawn (its SVG keeps the width/height the
   library gives it); it only tightens the empty space around it:
   - leaflet-elevation's empty .elevation-summary has 12px top/bottom margins
     that collapse out below the chart as a 12px gap above the resize handle;
   - the band between the plot and the legend is reserved for x-axis labels,
     which aren't shown, so the legend is moved up 12px into it (the CSS
     `translate` property composes with the SVG's own transform attributes);
   - the space left below the legend is then taken back with a negative
     bottom margin (the handle below paints over that empty strip).
   On narrow screens the "Altitude/Slope" switcher text overlaps the legend
   items; there only the legend items move up, so the two sit on separate
   lines, and less space is taken back below. */
.rfcc-v2-detail-map-wrap .elevation-control .elevation-summary {
    margin-top: 0;
    margin-bottom: 0;
}
.rfcc-v2-detail-map-wrap .elevation-control svg .legend {
    translate: 0 -12px;
}
.rfcc-v2-detail-map-wrap .elevation-control {
    margin-bottom: -12px;
}
@media (max-width: 768px) {
    .rfcc-v2-detail-map-wrap .elevation-control svg .legend-switcher-label,
    .rfcc-v2-detail-map-wrap .elevation-control svg .legend-switcher-symbol {
        translate: 0 12px;
    }
    .rfcc-v2-detail-map-wrap .elevation-control {
        margin-bottom: -4px;
    }
}

/* ============================================================================
   SPLIT VIEW (v2 only; internally "story view")
   ============================================================================
   Alternate layout toggled by #rfcc-v2-story-view-pill ("Split View") on every
   v2 route page. Reflows the SAME rendered .rfcc-v2-detail-map-wrap /
   .rfcc-v2-detail-body markup - nothing is re-rendered - see the Split View
   inline script after the sections in rfcc_v2_render_route_detail(), which
   also calls Leaflet invalidateSize() after each layout change. Everything
   here is scoped to .rfcc-story-view, so the standard layout is untouched.
     - All widths: the Itinerary moves up to sit right under the title/stat
       tiles (flex order, no DOM change) and the map is shorter.
     - >= 700px: two columns - content scrolling on the left, a narrower map
       + elevation profile pinned (sticky) on the right, sized to fit the
       viewport so the whole pinned column stays visible.
     - < 700px: single column with a compact map on top. */
.rfcc-v2-detail-inner.rfcc-story-view .rfcc-v2-detail-body {
    display: flex;
    flex-direction: column;
}
.rfcc-v2-detail-inner.rfcc-story-view .rfcc-v2-detail-body > * {
    order: 2;
}
.rfcc-v2-detail-inner.rfcc-story-view .rfcc-v2-detail-body > .rfcc-v2-detail-title-row,
.rfcc-v2-detail-inner.rfcc-story-view .rfcc-v2-detail-body > .rfcc-v2-stat-tiles,
.rfcc-v2-detail-inner.rfcc-story-view .rfcc-v2-detail-body > .rfcc-v2-personalise-section {
    order: 0;
}
.rfcc-v2-detail-inner.rfcc-story-view .rfcc-v2-detail-body > .rfcc-v2-detail-section--itinerary {
    order: 1;
}
.rfcc-v2-detail-inner.rfcc-story-view .rfcc-v2-detail-body::after {
    display: none;
}

/* Compact map (phones / narrow windows). The drag-to-resize handle sets an
   inline !important height, which still wins if the visitor resizes. */
.rfcc-v2-detail-inner.rfcc-story-view .rfcc-v2-detail-map-wrap.rfcc-v2-full-map-wrap .WPLeafletMap,
.rfcc-v2-detail-inner.rfcc-story-view .rfcc-v2-detail-map-wrap.rfcc-v2-full-map-wrap .leaflet-container {
    height: clamp(180px, 30vh, 260px) !important;
}
.rfcc-v2-detail-inner.rfcc-story-view .rfcc-v2-detail-map {
    height: clamp(180px, 30vh, 260px);
}

@media (min-width: 700px) {
    .rfcc-v2-detail-inner.rfcc-story-view {
        display: grid;
        grid-template-columns: minmax(0, 1fr) clamp(260px, 42%, 380px);
        align-items: start;
        gap: 0 20px;
        padding: 16px;
    }
    /* Pinned in view by the Split View script (a relative 'top' offset
       updated on scroll) - not position:sticky, which any theme wrapper with
       an overflow setting silently disables. */
    .rfcc-v2-detail-inner.rfcc-story-view .rfcc-v2-detail-map-wrap {
        grid-column: 2;
        grid-row: 1 / -1;
        position: relative;
        min-width: 0;
        z-index: 2;
    }
    .rfcc-v2-detail-inner.rfcc-story-view .rfcc-v2-detail-body {
        grid-column: 1;
        padding: 0;
        min-width: 0;
    }
    /* Map + elevation profile fill ~75% of the window. This is the first-paint
       approximation (assumes a ~150px profile); the drag-resize script in
       frontend/routes-map-full-view.php then sets the exact height from the
       profile's real size, and follows window resizes / profile toggling. */
    .rfcc-v2-detail-inner.rfcc-story-view .rfcc-v2-detail-map-wrap.rfcc-v2-full-map-wrap .WPLeafletMap,
    .rfcc-v2-detail-inner.rfcc-story-view .rfcc-v2-detail-map-wrap.rfcc-v2-full-map-wrap .leaflet-container {
        height: max(220px, calc(75vh - 150px)) !important;
    }
    .rfcc-v2-detail-inner.rfcc-story-view .rfcc-v2-detail-map {
        height: max(220px, calc(75vh - 150px));
    }
}
/* While Split View has auto-collapsed the filter sidebar, take its hidden
   contents out of the layout: squeezed into the 40px strip they otherwise
   wrap into a very tall column that stretches the whole page (blank space to
   scroll past). Scoped to the Split View marker attribute so the sidebar's own
   manual collapse behaves exactly as before; desktop only (on phones the
   sidebar is an off-canvas drawer). */
@media (min-width: 769px) {
    .rfcc-v2-sidebar.collapsed[data-rfcc-split-collapsed="1"] > .rfcc-v2-sidebar-header,
    .rfcc-v2-sidebar.collapsed[data-rfcc-split-collapsed="1"] > .rfcc-v2-sidebar-status,
    .rfcc-v2-sidebar.collapsed[data-rfcc-split-collapsed="1"] > .rfcc-v2-filter-panel,
    .rfcc-v2-sidebar.collapsed[data-rfcc-split-collapsed="1"] > .rfcc-v2-group-panel {
        display: none;
    }
}
@media (min-width: 960px) {
    .rfcc-v2-detail-inner.rfcc-story-view {
        grid-template-columns: minmax(0, 1fr) clamp(320px, 38%, 460px);
        gap: 0 24px;
        padding: 20px;
    }
}

/* Pinned map mode (portrait phones) - assets/js/rfcc-v2-pinned-map.js.
   The script toggles .rfcc-v2-pinned-map on .rfcc-v2-detail-inner while the
   mode is on, .is-pinned while the map is actually stuck to the top of the
   viewport (position:fixed, set inline by the script) and
   .rfcc-v2-pinned-map--rolled while the map is rolled up. Everything here is
   scoped to those classes, so no other layout is affected. All map controls
   and the Elevation profile (when switched on) stay as in the normal view. */
/* The mode's own bar replaces the standard resize handle. */
.rfcc-v2-detail-inner.rfcc-v2-pinned-map .rfcc-v2-detail-map-wrap > #map-drag-handle {
    display: none !important;
}
.rfcc-v2-detail-inner.rfcc-v2-pinned-map.is-pinned .rfcc-v2-detail-map-wrap {
    background: var(--rf-bg-card, #ffffff);
    box-shadow: var(--rf-shadow-md, 0 4px 6px rgba(0, 0, 0, 0.1));
}
/* The bar. 40px tall - 4px slimmer than the standard 44px touch bar, now it
   only carries the resize/roll controls - while every button keeps a 44px
   tall hit area: an invisible ::before extends each one 4px UP into the
   bottom edge of the map (never down, where it would catch taps meant for
   the content scrolling under the bar). The drag surface is the whole bar
   (40px x the full map width - far more area than a 44x44 target). */
.rfcc-v2-detail-inner.rfcc-v2-pinned-map .rfcc-resize-handle.rfcc-v2-pinned-map-handle {
    height: 40px;
    border-top: 0;
}
.rfcc-v2-detail-inner.rfcc-v2-pinned-map .rfcc-v2-pinned-map-handle .rfcc-resize-handle-label {
    display: none; /* grip + chevrons carry the affordance; the separator keeps its aria-label */
}
.rfcc-v2-detail-inner.rfcc-v2-pinned-map .rfcc-v2-pinned-map-handle .rfcc-resize-handle-btn {
    position: relative;
    width: 44px;
    height: 40px;
}
.rfcc-v2-detail-inner.rfcc-v2-pinned-map .rfcc-v2-pinned-map-handle .rfcc-resize-handle-btn::before,
.rfcc-v2-detail-inner.rfcc-v2-pinned-map .rfcc-v2-pinned-map-handle .rfcc-v2-pinned-roll::before {
    content: '';
    position: absolute;
    top: -4px;
    bottom: 0;
    left: 0;
    right: 0;
}
/* Roll up / roll down (left end of the bar; absolutely placed so the resize
   controls stay centred whatever its label says). */
.rfcc-v2-detail-inner.rfcc-v2-pinned-map .rfcc-v2-pinned-map-handle .rfcc-v2-pinned-roll {
    position: absolute;
    left: 4px;
    top: 0;
    bottom: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 44px;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 0 8px 0 6px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    box-shadow: none;
    color: var(--rf-text-secondary, #6c757d);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    cursor: pointer;
    touch-action: manipulation;
}
.rfcc-v2-detail-inner.rfcc-v2-pinned-map .rfcc-v2-pinned-map-handle .rfcc-v2-pinned-roll:hover {
    background: var(--rf-bg-hover, #f8f9fa);
    color: var(--rf-text-primary, #212529);
}
.rfcc-v2-detail-inner.rfcc-v2-pinned-map .rfcc-v2-pinned-map-handle .rfcc-v2-pinned-roll:focus {
    outline: none;
}
.rfcc-v2-detail-inner.rfcc-v2-pinned-map .rfcc-v2-pinned-map-handle .rfcc-v2-pinned-roll:focus-visible {
    outline: 2px solid var(--rf-accent-primary, #d30b4c);
    outline-offset: -2px;
}
.rfcc-v2-detail-inner.rfcc-v2-pinned-map .rfcc-v2-pinned-map-handle .rfcc-v2-pinned-roll svg {
    display: block;
    flex-shrink: 0;
    transition: transform 0.2s;
}
@media (max-width: 359px) {
    .rfcc-v2-detail-inner.rfcc-v2-pinned-map .rfcc-v2-pinned-roll-label {
        display: none;
    }
}
/* Rolled up: just the bar. The map block (map + profile) is taken out of the
   layout, the resize controls go with it, and the chevron points down. */
.rfcc-v2-detail-inner.rfcc-v2-pinned-map--rolled .rfcc-v2-detail-map-wrap .rfcc-map-block {
    display: none !important;
}
.rfcc-v2-detail-inner.rfcc-v2-pinned-map--rolled .rfcc-v2-pinned-map-handle .rfcc-resize-handle-btn,
.rfcc-v2-detail-inner.rfcc-v2-pinned-map--rolled .rfcc-v2-pinned-map-handle .rfcc-resize-handle-sep {
    visibility: hidden;
}
.rfcc-v2-detail-inner.rfcc-v2-pinned-map--rolled .rfcc-v2-pinned-map-handle {
    cursor: default;
}
.rfcc-v2-detail-inner.rfcc-v2-pinned-map--rolled .rfcc-v2-pinned-map-handle .rfcc-v2-pinned-roll svg {
    transform: rotate(180deg);
}
@media (prefers-reduced-motion: reduce) {
    .rfcc-v2-detail-inner.rfcc-v2-pinned-map .rfcc-v2-pinned-map-handle .rfcc-v2-pinned-roll svg {
        transition: none;
    }
}

/* Itinerary section: "Show step markers on map" switch. Same pill base as
   .rfcc-v2-story-view-pill; colours come from the --rf-* tokens so it follows
   light/dark mode automatically. */
.rfcc-v2-itinerary-toolbar {
    display: flex;
    justify-content: flex-end;
    margin: 0 0 10px;
}
.rfcc-v2-itin-markers-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px 4px 6px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    cursor: pointer;
    border: 1.5px solid var(--rf-border-color, #dee2e6);
    background: transparent;
    color: var(--rf-text-secondary, #6c757d);
    transition: border-color 0.15s, color 0.15s;
}
.rfcc-v2-itin-markers-toggle:hover {
    border-color: var(--rf-text-secondary, #6c757d);
    color: var(--rf-text-primary, #212529);
}
.rfcc-v2-itin-markers-toggle:focus-visible {
    outline: 2px solid var(--rf-accent-primary, #d30b4c);
    outline-offset: 2px;
}
.rfcc-v2-itin-markers-switch {
    position: relative;
    flex-shrink: 0;
    width: 26px;
    height: 15px;
    border-radius: 999px;
    background: var(--rf-border-color, #dee2e6);
    transition: background 0.15s;
}
.rfcc-v2-itin-markers-switch::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #fff; /* white knob reads on both the light and dark track */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    transition: transform 0.15s;
}
.rfcc-v2-itin-markers-toggle.active {
    color: var(--rf-text-primary, #212529);
}
.rfcc-v2-itin-markers-toggle.active .rfcc-v2-itin-markers-switch {
    background: var(--rfcc-itinerary-marker-color, var(--rf-accent-primary, #d30b4c));
}
.rfcc-v2-itin-markers-toggle.active .rfcc-v2-itin-markers-switch::after {
    transform: translateX(11px);
}

/* Story-view toggle pill - matches .rfcc-v2-elevation-pill/.rfcc-v2-edit-route-pill */
.rfcc-v2-story-view-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    align-self: flex-start;
    margin-top: 4px;
    cursor: pointer;
    border: 1.5px solid var(--rf-border-color, #dee2e6);
    background: transparent;
    color: var(--rf-text-secondary, #6c757d);
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.rfcc-v2-story-view-pill:hover {
    border-color: var(--rf-text-secondary, #6c757d);
    color: var(--rf-text-primary, #212529);
}
.rfcc-v2-story-view-pill.active {
    background: var(--rf-accent-primary, #d30b4c);
    border-color: var(--rf-accent-primary, #d30b4c);
    color: #fff;
}

/* Fallback mini-map (no GPX routes) */
.rfcc-v2-detail-map {
    width: 100%;
    height: clamp(320px, 45vh, 520px);
}


/* Tea stops list in detail view */
.rfcc-v2-teastops-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
}

.rfcc-v2-teastop-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

/* Groups a destination's row + its own "More info" toggle/panel so several
   main destinations read as distinct entries instead of one dense block. */
.rfcc-v2-teastop-entry {
    padding-bottom: 8px;
    border-bottom: 1px solid var(--rf-border-color, #e9ecef);
}
.rfcc-v2-teastop-entry:last-child {
    padding-bottom: 0;
    border-bottom: none;
}
/* Hover / tap preview (initDestinationPreview in rfcc-v2.js). The negative
   margin + padding let the tint extend slightly past the text without moving
   it. touch-action removes the tap delay / double-tap page zoom. */
.rfcc-v2-destinations-wrap .rfcc-v2-teastop-entry {
    margin-left: -6px;
    margin-right: -6px;
    padding-left: 6px;
    padding-right: 6px;
    border-radius: 6px;
    transition: background-color 0.15s ease;
    touch-action: manipulation;
}
.rfcc-v2-destinations-wrap .rfcc-v2-teastop-entry.rfcc-v2-dest-previewing {
    background-color: var(--rf-bg-hover, rgba(0, 0, 0, 0.04));
}
.rfcc-v2-destinations-wrap .rfcc-clickable-destination:focus-visible {
    outline: 2px solid var(--rf-accent-primary, #2271b1);
    outline-offset: 2px;
    border-radius: 2px;
}
.rfcc-v2-teastop-entry .rfcc-v2-dest-more-btn {
    margin-left: 14px; /* align under the name, past the bullet */
}

.rfcc-v2-teastop-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.rfcc-v2-teastop-icon {
    flex-shrink: 0;
    position: relative;
    top: -1px;
    color: var(--rf-text-secondary, #6c757d);
}

.rfcc-v2-teastop-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--rf-text-primary, #212529);
}

.rfcc-v2-stop-dist {
    font-weight: 400;
    color: var(--rf-text-secondary, #6c757d);
}

.rfcc-v2-teastop-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 12px;
    margin-left: 14px; /* align under the name, past the bullet */
}

.rfcc-v2-teastop-link {
    font-size: 12px;
    color: var(--rf-text-secondary, #6c757d);
    text-decoration: none;
}
.rfcc-v2-teastop-link:hover {
    color: var(--rf-link-color, #0066cc);
    text-decoration: underline;
}
/* "Promote to Main" / "Remove from Main" are management actions rather than
   informational links — give them a touch more visual weight so they read
   as an action, distinct from the plain Google Maps/Website/Detour links. */
.rfcc-v2-teastop-link-manage {
    font-weight: 600;
}

/* Divider between secondary info sub-sections */
.rfcc-v2-secondary-divider {
    border: none;
    border-top: 1px solid var(--rf-border-color, #e9ecef);
    margin: 2px 0;
}

/* Section headings within secondary info blocks (destinations, services, towns) */
.rfcc-v2-secondary-section-h {
    margin-bottom: 4px;
}

.rfcc-v2-towns-hint {
    margin: 4px 0 0 21px; /* align under the towns list, past the house icon */
    font-size: 11px;
    font-style: italic;
    color: var(--rf-text-secondary, #6c757d);
}

/* Destinations two-column layout */
.rfcc-v2-destinations-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
    align-items: flex-start;
    flex: 1;
    min-width: 0;
}

.rfcc-v2-dest-block {
    flex: 0 0 auto;
    min-width: 0;
}

.rfcc-v2-dest-description-content {
    font-size: 14px;
    line-height: 1.6;
    color: var(--rf-text-primary, #333);
    margin-top: 6px;
}

.rfcc-v2-dest-description-content p {
    margin: 0 0 8px;
}

.rfcc-v2-dest-description-content p:last-child {
    margin-bottom: 0;
}

/* More info expandable panel */
.rfcc-v2-dest-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: none;
    border: none;
    padding: 0;
    margin-top: 6px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--rf-text-secondary, #6c757d);
    line-height: 1.2;
}

.rfcc-v2-dest-more-btn:hover {
    text-decoration: underline;
    text-decoration-color: var(--rf-text-secondary, #6c757d);
}

.rfcc-v2-dest-more-icon {
    color: var(--rf-text-secondary, #6c757d);
    transition: transform 0.18s ease;
    flex-shrink: 0;
    margin-top: 1px;
}

.rfcc-v2-dest-more-btn[aria-expanded="true"] .rfcc-v2-dest-more-icon {
    transform: rotate(180deg);
}

.rfcc-v2-dest-more-panel[hidden] {
    display: none;
}

.rfcc-v2-dest-more-panel {
    margin-top: 10px;
}

.rfcc-v2-dest-more-inner {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.rfcc-v2-dest-more-image img {
    width: 100%;
    max-height: 200px;
    object-fit: cover;
    border-radius: 6px;
    display: block;
}

.rfcc-v2-dest-more-details {
    min-width: 0;
}

.rfcc-v2-dest-more-address {
    font-size: 13px;
    color: var(--rf-text-secondary, #6c757d);
    margin-bottom: 8px;
}

.rfcc-v2-dest-more-links {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

.rfcc-v2-dest-more-link {
    display: inline-block;
    font-size: 12px;
    font-weight: 500;
    padding: 4px 12px;
    border-radius: 20px;
    background: var(--rf-link-color, #0066cc);
    color: #fff !important;
    text-decoration: none !important;
    transition: opacity 0.15s;
}

.rfcc-v2-dest-more-link:hover,
.rfcc-v2-dest-more-link:focus,
.rfcc-v2-dest-more-link:visited {
    text-decoration: none !important;
    color: #fff !important;
    opacity: 0.85;
}

.rfcc-v2-dest-more-description {
    font-size: 14px;
    line-height: 1.6;
    color: var(--rf-text-primary, #333);
}

.rfcc-v2-dest-more-description p {
    margin: 0 0 8px;
}

.rfcc-v2-dest-more-description p:last-child {
    margin-bottom: 0;
}

.rfcc-v2-dest-highlight-block .rfcc-v2-dest-label {
    color: var(--rf-link-color, #0066cc);
}

.rfcc-v2-dest-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--rf-text-secondary, #6c757d);
    line-height: 1.2;
    margin-bottom: 2px;
}

/* Expand/collapse button for additional destinations */
.rfcc-v2-dest-expand-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: inherit;
}

.rfcc-v2-dest-expand-btn:hover .rfcc-v2-dest-label {
    text-decoration: underline;
    text-decoration-color: var(--rf-text-secondary, #6c757d);
}

.rfcc-v2-dest-expand-icon {
    color: var(--rf-text-secondary, #6c757d);
    transition: transform 0.18s ease;
    flex-shrink: 0;
    margin-top: 1px;
}

.rfcc-v2-dest-expand-btn[aria-expanded="true"] .rfcc-v2-dest-expand-icon {
    transform: rotate(180deg);
}

.rfcc-v2-additional-list[hidden] {
    display: none;
}


.rfcc-v2-detail-body {
    padding: 20px 24px;
}

.rfcc-v2-detail-title-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.rfcc-v2-detail-title {
    font-family: var(--rfcc-v2-title-font-family, inherit);
    font-size: var(--rfcc-v2-title-font-size, 22px);
    font-weight: 700;
    color: var(--rf-text-primary, #212529);
    margin: 0;
    flex: 1;
    min-width: 200px;
}

/* Itinerary step headings ("Step N: Name") pick up the SAME sub-heading font
   as every other section header on the v2 page, rather than their own
   separate itinerary-specific setting (admin/routes-config-menu.php's
   "Itinerary Design" panel) - that panel still applies on v1, which has no
   page-wide Typography setting of its own. Scoped to .rfcc-v2-detail-inner so
   v1 (single-route.php) is unaffected. */
.rfcc-v2-detail-inner .rfcc-itinerary-step-heading {
    font-family: var(--rfcc-v2-heading-font-family, inherit);
    font-size: var(--rfcc-v2-heading-font-size, inherit);
}

.rfcc-v2-detail-title-pills {
    display: contents;
}

.rfcc-v2-detail-activity-badge {
    padding: 4px 12px;
    background: var(--rfcc-button-color, #0073aa);
    color: #fff;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    align-self: flex-start;
    margin-top: 4px;
}

.rfcc-v2-elevation-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    align-self: flex-start;
    margin-top: 4px;
    cursor: pointer;
    border: 1.5px solid var(--rf-border-color, #dee2e6);
    background: transparent;
    color: var(--rf-text-secondary, #6c757d);
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.rfcc-v2-elevation-pill:hover {
    border-color: var(--rf-text-secondary, #6c757d);
    color: var(--rf-text-primary, #212529);
}
.rfcc-v2-elevation-pill.active {
    background: rgba(0,0,0,0.06);
    border-color: var(--rf-text-secondary, #6c757d);
    color: var(--rf-text-primary, #212529);
}

/* "Personalise this route" trigger pill — sits next to the elevation pill */
.rfcc-v2-personalise-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    align-self: flex-start;
    margin-top: 4px;
    cursor: pointer;
    border: 1.5px solid var(--rf-border-color, #dee2e6);
    background: transparent;
    color: var(--rf-text-secondary, #6c757d);
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.rfcc-v2-personalise-pill:hover {
    border-color: var(--rf-text-secondary, #6c757d);
    color: var(--rf-text-primary, #212529);
}
.rfcc-v2-personalise-pill.active {
    background: rgba(0,0,0,0.06);
    border-color: var(--rf-text-secondary, #6c757d);
    color: var(--rf-text-primary, #212529);
}

/* "Edit" pill — admin/editor only, sits alongside the activity type/elevation
   pills. Same base look as .rfcc-v2-elevation-pill/.rfcc-v2-personalise-pill,
   but it's a real link (opens the admin route editor), not a JS toggle. */
.rfcc-v2-edit-route-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    align-self: flex-start;
    margin-top: 4px;
    cursor: pointer;
    border: 1.5px solid var(--rf-border-color, #dee2e6);
    background: transparent;
    color: var(--rf-text-secondary, #6c757d);
    text-decoration: none !important;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.rfcc-v2-edit-route-pill:hover,
.rfcc-v2-edit-route-pill:visited:hover {
    border-color: var(--rf-text-secondary, #6c757d);
    color: var(--rf-text-primary, #212529);
}
.rfcc-v2-edit-route-pill:visited {
    color: var(--rf-text-secondary, #6c757d);
}

/* "New route" (route builder) in the results toolbar - same look as the
   Ride Planner button beside it (.rfcc-rp-toggle-btn). */
button.rfcc-v2-new-route-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 8px 14px;
    border: 1px solid var(--rf-border-color, #dee2e6);
    border-radius: 999px;
    background: var(--rf-bg-card, #fff);
    color: var(--rf-text-primary, #212529);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    text-transform: none;
    letter-spacing: normal;
    box-shadow: none;
    cursor: pointer;
    white-space: nowrap;
}
button.rfcc-v2-new-route-pill:hover {
    background: var(--rf-bg-hover, #f8f9fa);
    color: var(--rf-text-primary, #212529);
}
button.rfcc-v2-new-route-pill.active {
    background: var(--rf-accent-primary, #d30b4c);
    border-color: var(--rf-accent-primary, #d30b4c);
    color: #fff;
}

/* "Detour Route" pill — same shape as the personalise pill, amber accent to
   match the detour checkbox/Revised GPX button inside the panel it opens. */
.rfcc-v2-detour-pill {
    border-color: #f59e0b;
    color: #b45309;
}
.rfcc-v2-detour-pill:hover {
    background: #fffbeb;
    border-color: #f59e0b;
    color: #b45309;
}
.rf-dark-mode .rfcc-v2-detour-pill, [data-rf-theme="dark"] .rfcc-v2-detour-pill { color: #fde68a; }
.rf-dark-mode .rfcc-v2-detour-pill:hover, [data-rf-theme="dark"] .rfcc-v2-detour-pill:hover { background: #3a2e10; }

/* "Detour to X" link in the stat-tiles info area below the map */
.rfcc-v2-detour-info-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: -4px 0 12px;
    padding: 6px 12px;
    border: 1px solid #f59e0b;
    border-radius: 8px;
    background: #fffbeb;
    color: #b45309;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
}
.rfcc-v2-detour-info-link:hover { background: #fef3c7; }
.rf-dark-mode .rfcc-v2-detour-info-link, [data-rf-theme="dark"] .rfcc-v2-detour-info-link { background: #3a2e10; color: #fde68a; }
.rf-dark-mode .rfcc-v2-detour-info-link:hover, [data-rf-theme="dark"] .rfcc-v2-detour-info-link:hover { background: #4a3a14; }

/* Expandable "Personalise this route" section in the detail body */
.rfcc-v2-personalise-section {
    margin: 4px 0 16px;
    padding: 14px 16px;
    border: 1px solid var(--rf-border-color, #dee2e6);
    border-radius: 10px;
    background: var(--rf-surface-2, rgba(0,0,0,0.02));
}
.rfcc-v2-personalise-section[hidden] { display: none; }
/* Match the surrounding v2 detail typography (the shared panel CSS uses em sizes
   and <label> elements that can otherwise inherit theme form-label styling). */
.rfcc-v2-personalise-section,
.rfcc-v2-personalise-section label,
.rfcc-v2-personalise-section button,
.rfcc-v2-personalise-section input,
.rfcc-v2-personalise-section em {
    font-family: inherit;
}
.rfcc-v2-personalise-section .rfcc-ps-options label { font-size: 14px; }
.rfcc-v2-personalise-section .rfcc-ps-options .rfcc-ps-group-label { font-size: 11px; }
.rfcc-v2-personalise-section .rfcc-ps-btn,
.rfcc-v2-personalise-section .rfcc-ps-pick-btn { font-size: 13px; }
.rfcc-v2-personalise-section .rfcc-ps-status,
.rfcc-v2-personalise-section .rfcc-ps-pick-hint { font-size: 13px; }

/* Stats grid (legacy, kept for any external use) */
.rfcc-v2-detail-stats {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.rfcc-v2-stat { display: flex; flex-direction: column; gap: 2px; }
.rfcc-v2-stat-label {
    font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--rf-text-secondary, #6c757d);
}
.rfcc-v2-stat-value {
    font-size: 18px; font-weight: 700;
    color: var(--rf-text-primary, #212529);
}

/* ── Stat tiles ────────────────────────────────────────────────────────────── */
.rfcc-v2-stat-tiles {
    display: flex;
    gap: 10px;
    margin-bottom: 12px;
    flex-wrap: wrap;
    /* Drive the tile layout from the tiles' own available width (container query
       below), not the viewport — so a narrow content area with the left menu
       still open switches to the compact layout instead of clipping. */
    container-type: inline-size;
    container-name: rfccstats;
}

.rfcc-v2-stat-tile {
    flex: 1 1 0;
    min-width: 120px;
    background: var(--rf-bg-secondary, #f8f9fa);
    border: 1px solid var(--rf-border-color, #e9ecef);
    border-radius: 8px;
    padding: 10px 10px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    text-align: center;
}

.rfcc-v2-stat-tile-icon {
    color: var(--rfcc-filter-background-color, #798d7c);
    opacity: 0.7;
    flex-shrink: 0;
    margin-bottom: 4px;
}

.rfcc-v2-stat-tile-val {
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    color: var(--rf-text-primary, #212529);
}

.rfcc-v2-stat-tile-val--sm {
    font-size: 14px;
    font-weight: 600;
}

.rfcc-v2-stat-tile-lbl {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--rf-text-secondary, #6c757d);
    line-height: 1.2;
}

/* ── Ascent / Distance / Direction tile variants ─────────────────────────────── */
.rfcc-v2-stat-tile--ascent,
.rfcc-v2-stat-tile--distance,
.rfcc-v2-stat-tile--direction,
.rfcc-v2-stat-tile--peak {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    padding: 10px 8px 8px 16px;
    border-radius: 12px;
    border-width: 0.5px;
    text-align: left;
}

.rfcc-v2-ascent-stat {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    position: relative;
    z-index: 1;
    min-width: 0;
    flex: 1;
}

/* In the peak tile, .rfcc-v2-ascent-stat (icon+value+label) shares its row
   with .rfcc-v2-climb-summary. flex:1 (flex-basis:0%) plus min-width:0 above
   means that when both don't fit, this side has nothing to grow into and no
   floor to fall back to - it collapses to 0 width, and its children then
   render on top of the climb-summary text instead of beside it (the exact
   overlap this causes on narrow/mobile widths). The peak value must always
   render at its natural size - .rfcc-v2-climb-summary already has
   min-width:0/flex-shrink:1 to be the side that shrinks instead. */
.rfcc-v2-stat-tile--peak .rfcc-v2-ascent-stat {
    flex: 0 1 auto;
    min-width: fit-content;
}

.rfcc-v2-ascent-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.rfcc-v2-stat-tile--ascent .rfcc-v2-stat-tile-icon,
.rfcc-v2-stat-tile--distance .rfcc-v2-stat-tile-icon,
.rfcc-v2-stat-tile--direction .rfcc-v2-stat-tile-icon,
.rfcc-v2-stat-tile--peak .rfcc-v2-stat-tile-icon {
    margin-bottom: 0;
}

.rfcc-v2-stat-tile--ascent .rfcc-v2-stat-tile-val,
.rfcc-v2-stat-tile--distance .rfcc-v2-stat-tile-val,
.rfcc-v2-stat-tile--direction .rfcc-v2-stat-tile-val,
.rfcc-v2-stat-tile--peak .rfcc-v2-stat-tile-val {
    font-size: 26px;
    font-weight: 500;
    white-space: nowrap;
}

.rfcc-v2-ascent-descent-stack {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    z-index: 1;
    min-width: 0;
    flex: 1;
}

.rfcc-v2-stat-tile--peak .rfcc-v2-ascent-descent-stack,
.rfcc-v2-stat-tile--ascent .rfcc-v2-ascent-descent-stack {
    width: 100%;
    overflow: visible;
}

.rfcc-v2-descent-stat {
    padding-left: 10px;
    border-left: 1px solid var(--rf-border-color, #dee2e6);
}

.rfcc-v2-ascent-grade {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    opacity: 0.3;
    position: relative;
    z-index: 1;
    flex-shrink: 0;
}

.rfcc-v2-ascent-grade svg {
    color: var(--rf-text-secondary, #6c757d);
}

.rfcc-v2-ascent-grade-name {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--rf-text-secondary, #6c757d);
    line-height: 1;
    white-space: nowrap;
}

.rfcc-v2-ascent-silhouette {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 55%;
    height: 100%;
    pointer-events: none;
    opacity: 0.07;
}

/* Pin-and-vertical-marker illustration for distance tile */
.rfcc-v2-dist-pins {
    flex-shrink: 1;
    width: 88px;
    min-width: 40px;
    height: 30px;
    opacity: 0.65;
    color: var(--rfcc-filter-background-color, #798d7c);
}

/* Climb dividers inside peak tile — same pattern as ascent/descent.
   min-width: 0 lets this flex item actually shrink/wrap instead of
   overflowing past its box and overlapping the peak value beside it —
   the classic flexbox gotcha (flex items default to min-width: auto,
   which floors shrinking at the content's own unbroken width). */
.rfcc-v2-climb-summary {
    margin-left: auto;
    padding-left: 12px;
    border-left: 1px solid var(--rf-border-color, #dee2e6);
    font-size: 11px;
    font-weight: 600;
    color: var(--rf-text-secondary, #6c757d);
    z-index: 1;
    line-height: 1.5;
    text-align: right;
    min-width: 0;
    flex-shrink: 1;
}

/* Clickable stat tiles/pills - peak marker toggle, gradient line toggle,
   climb table expand, steepest-climb highlight (see routes-map-full-view.php
   for the click handlers). */
.rfcc-v2-gradient-toggle-trigger,
.rfcc-v2-peak-trigger {
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.15s;
}
.rfcc-v2-gradient-toggle-trigger:hover,
.rfcc-v2-peak-trigger:hover {
    background: var(--rf-border-color, rgba(0, 0, 0, 0.05));
}
.rfcc-v2-peak-trigger.rfcc-v2-stat-active {
    background: rgba(108, 92, 231, 0.12);
}
.rfcc-v2-peak-trigger.rfcc-v2-stat-active .rfcc-v2-stat-tile-icon,
.rfcc-v2-peak-trigger.rfcc-v2-stat-active .rfcc-v2-stat-tile-val {
    color: #6c5ce7;
}
.rfcc-v2-climb-count-trigger,
.rfcc-v2-climb-max-trigger {
    cursor: pointer;
    text-decoration-line: underline;
    text-decoration-style: dotted;
    text-decoration-color: currentColor;
    text-underline-offset: 2px;
}
.rfcc-v2-climb-count-trigger:hover,
.rfcc-v2-climb-max-trigger:hover {
    color: var(--rf-text-primary, #333);
}

.rfcc-v2-stat-tile--peak .rfcc-v2-stat-tile-lbl,
.rfcc-v2-stat-tile--ascent .rfcc-v2-stat-tile-lbl,
.rfcc-v2-stat-tile--distance .rfcc-v2-stat-tile-lbl,
.rfcc-v2-stat-tile--direction .rfcc-v2-stat-tile-lbl {
    overflow: visible;
    white-space: nowrap;
}

.rfcc-v2-climb-sep {
    margin: 0 1px;
    opacity: 0.5;
}

.rfcc-v2-climb-silhouette {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 55%;
    height: 100%;
    pointer-events: none;
    opacity: 0.07;
}

/* Compass rose background for direction tile — right-anchored, bleeds off edge */
.rfcc-v2-direction-compass-bg {
    position: absolute;
    top: 50%;
    right: -6px;
    transform: translateY(-50%);
    height: 115%;
    width: auto;
    pointer-events: none;
    /* opacity managed per-group inside SVG so the needle can be more visible */
}

/* ── Compact stat-tile layout (container query) ───────────────────────────────
   Wraps tiles into a 2×2 grid and switches to centred column layout per tile.
   Uses the container's inline-size so it fires whether the content area is narrow
   because of a sidebar or because of the viewport itself. */
@container rfccstats (max-width: 960px) {
    .rfcc-v2-stat-tile {
        min-width: calc(50% - 6px);
    }
    .rfcc-v2-stat-tile--ascent,
    .rfcc-v2-stat-tile--distance,
    .rfcc-v2-stat-tile--direction,
    .rfcc-v2-stat-tile--peak {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        padding: 10px 12px 8px;
        text-align: left;
    }
    .rfcc-v2-stat-tile--ascent .rfcc-v2-stat-tile-val,
    .rfcc-v2-stat-tile--distance .rfcc-v2-stat-tile-val,
    .rfcc-v2-stat-tile--direction .rfcc-v2-stat-tile-val,
    .rfcc-v2-stat-tile--peak .rfcc-v2-stat-tile-val {
        font-size: 19px;
    }
    .rfcc-v2-ascent-stat {
        gap: 6px;
    }
    .rfcc-v2-ascent-descent-stack {
        gap: 8px;
    }
    .rfcc-v2-descent-stat {
        padding-left: 8px;
    }
    .rfcc-v2-dist-pins {
        display: block;
        position: absolute;
        top: 50%;
        right: 8px;
        left: auto;
        transform: translateY(-50%);
        width: auto;
        max-height: 60%;
        opacity: 0.33;
    }
    .rfcc-v2-climb-summary {
        font-size: 10px;
    }

    /* Ascent: keep hill silhouette as a faint background */
    .rfcc-v2-ascent-silhouette {
        display: block;
        opacity: 0.07;
    }

    /* Distance: pins right-anchored as background */

    /* Compass: right-anchored like desktop, slightly smaller. Kept readable
       rather than ghosted so the needle is legible in the compact tile. */
    .rfcc-v2-direction-compass-bg {
        display: block;
        left: auto;
        right: -4px;
        top: 50%;
        transform: translateY(-50%);
        height: 90%;
        width: auto;
        opacity: 0.7;
    }
}

/* ── Secondary info row (tea stops + links) ─────────────────────────────────── */
.rfcc-v2-detail-secondary {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 0;
    padding: 8px 0 6px;
    border-top: 1px solid var(--rf-border-color, #e9ecef);
}

.rfcc-v2-detail-secondary-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.rfcc-v2-detail-secondary-icon {
    flex-shrink: 0;
    color: var(--rf-text-secondary, #6c757d);
    margin-top: 2px;
}

.rfcc-v2-detail-links-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.rfcc-v2-detail-ext-links {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.rfcc-v2-gpx-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border: 1px solid var(--rf-border-color, #dee2e6);
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    color: var(--rf-text-secondary, #6c757d);
    text-decoration: none !important;
    transition: border-color 0.15s, color 0.15s;
}
.rfcc-v2-gpx-chip:hover {
    border-color: var(--rfcc-filter-background-color, #798d7c);
    color: var(--rfcc-filter-background-color, #798d7c);
}
/* "GPX help" button (rfcc_render_gpx_help_button()) sized/styled as one of
   the chips in this row, right after the GPX chip it explains. */
.rfcc-v2-detail-inner .rfcc-gpx-help-btn {
    gap: 5px;
    margin: 0;
    padding: 4px 10px;
    min-height: 0;
    border: 1px solid var(--rf-border-color, #dee2e6);
    border-radius: 20px;
    background: transparent;
    font-size: 11px;
    font-weight: 600;
    line-height: normal;
    color: var(--rf-text-secondary, #6c757d);
}
.rfcc-v2-detail-inner .rfcc-gpx-help-btn:hover {
    border-color: var(--rfcc-filter-background-color, #798d7c);
    color: var(--rfcc-filter-background-color, #798d7c);
    background: transparent;
}
.rfcc-v2-detail-inner .rfcc-gpx-help-btn .rfcc-gpx-help-btn-icon {
    font-size: 12px;
}

/* Club group + climbing badges */
.rfcc-v2-detail-badges {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}

.rfcc-v2-badge {
    padding: 3px 10px;
    background: var(--rfcc-filter-button-selected-color, #e8f0fe);
    color: var(--rfcc-filter-button-selected-text-color, #1a56db);
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

/* Tooltip on club group badges — matches grade-badge tooltip style */
.rfcc-v2-badge[data-tooltip] {
    position: relative;
    cursor: pointer;
}
.rfcc-v2-badge[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 120%;
    left: 0;
    transform: none;
    background: inherit;
    color: #fff;
    padding: 0.4em;
    white-space: normal;
    border-radius: 0.25em;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    pointer-events: none;
    z-index: 100;
    max-width: 320px;
    min-width: 0;
    width: max-content;
}
.rfcc-v2-badge[data-tooltip]:hover::after {
    opacity: 1;
    pointer-events: auto;
}
.rfcc-v2-badge[data-tooltip].rf-tip-open::after {
    opacity: 1 !important;
    pointer-events: auto;
}

/* Region badge */
.rfcc-v2-badge--region {
    background: var(--rf-border-color, #e9ecef);
    color: var(--rf-text-secondary, #6c757d);
}

/* Tag badges (rfcc_render_route_tag_badges() output, shared with v1 - base
   "tag chip" look lives in style.css) - rescaled here to match the compact
   11px/pill sizing of the other badges in this row. */
.rfcc-v2-detail-badges .rfcc-tag-badge {
    margin: 0;
    padding: 3px 10px 3px 8px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    line-height: normal;
}

/* Climbing profile badge from rfcc_generate_grade_badges() */
.rfcc-v2-detail-badges .grade-badge {
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center;
    margin-right: 0 !important;
    position: relative; /* needed for scoped tooltip below */
    cursor: pointer;
    /* Normalise height to match .rfcc-v2-badge (which has no border).
       grade-badge has border: 2px solid inline, so reduce vertical padding by 2px each side. */
    font-size: 11px !important;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}

/* Ensure the global hover tooltip is visible inside the detail panel */
.rfcc-v2-detail-badges .grade-badge {
    overflow: visible;
}
/* Keep tooltip above everything in the panel; anchor left so it doesn't overflow left edge */
.rfcc-v2-detail-badges .grade-badge::after {
    z-index: 100;
    display: block;
    left: 0;
    transform: none;
    min-width: 0;
    width: max-content;
    max-width: 320px;
}
/* Tap-activated state (JS toggles this class) */
.rfcc-v2-detail-badges .grade-badge.rf-tip-open::after {
    opacity: 1 !important;
    pointer-events: auto;
}

/* Grade note "Tap for grade information" — force onto own line */
.rfcc-v2-detail-badges .grade-note {
    flex-basis: 100%;
    width: 100%;
    font-size: 11px;
    color: var(--rf-text-secondary, #6c757d);
    font-style: italic;
    margin-top: 0;
}

/* Featured image — floated left below stat tiles, text wraps around it */
.rfcc-v2-detail-featured-image {
    float: left;
    margin: 8px 14px 4px 0;
}
.rfcc-v2-featured-img {
    display: block;
    max-width: 160px;
    height: auto;
    border-radius: 6px;
    object-fit: cover;
}
.rfcc-v2-detail-body::after {
    content: '';
    display: table;
    clear: both;
}

/* Collapsible description sections */
.rfcc-v2-stats-services-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0 20px;
}
.rfcc-v2-stats-services-row > .rfcc-v2-detail-section {
    /* flex-grow:1 (not 0) so whichever section wraps onto its own line alone
       stretches to fill it - otherwise its border-top divider only spans its
       own shrink-wrapped content width instead of the full row. */
    flex: 1 1 auto;
    min-width: 0;
}

.rfcc-v2-detail-section {
    border-top: 1px solid var(--rf-border-color, #e9ecef);
    margin-top: 6px;
    padding-top: 10px;
}
.rfcc-v2-detail-section-h {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--rfcc-v2-heading-font-family, inherit);
    font-size: var(--rfcc-v2-heading-font-size, 13px);
    font-weight: 600;
    color: var(--rf-text-primary, #333);
    margin: 0 0 6px;
    padding-left: 10px;
    border-left: 3px solid var(--rfcc-filter-background-color, #798d7c);
    line-height: 1.3;
}
.rfcc-v2-detail-section-h svg {
    flex-shrink: 0;
    color: var(--rfcc-filter-background-color, #798d7c);
    opacity: 0.8;
}
.rfcc-v2-detail-section-body {
    font-family: var(--rfcc-v2-body-font-family, inherit);
    font-size: var(--rfcc-v2-body-font-size, 14px);
    line-height: 1.6;
    color: var(--rf-text-primary, #444);
}
.rfcc-v2-detail-section-body img { max-width: 100%; height: auto; }
.rfcc-v2-detail-section-body p { margin: 0 0 0.75em; }
.rfcc-v2-detail-section-body p:last-child { margin-bottom: 0; }

/* Description (legacy class) */
.rfcc-v2-detail-description {
    font-size: 14px;
    line-height: 1.7;
    color: var(--rfcc-route-card-description-color, var(--rf-text-primary, #444));
    margin-bottom: 16px;
}
.rfcc-v2-detail-description img { max-width: 100%; height: auto; }

/* Tea stops list (inside table cell) */
.rfcc-v2-teastops-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--rf-text-secondary, #6c757d);
}

/* GPX inline link */
.rfcc-v2-gpx-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--rf-text-link, #0073aa);
    text-decoration: none;
    font-size: 13px;
}
.rfcc-v2-gpx-link:hover { text-decoration: underline; }

/* Utility */
.rfcc-v2-hidden { display: none !important; }

/* Destination filter banner (shown when ?destination= is active) */
.rfcc-v2-dest-banner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 14px;
    margin: 0 0 14px;
    padding: 12px 16px;
    border-radius: 8px;
    background: var(--rf-bg-secondary, #eef2f4);
    color: var(--rf-text-primary, #212529);
    font-size: 0.95em;
    border: 1px solid var(--rf-border-color, #dee2e6);
}
.rfcc-v2-dest-banner-label { flex: 1 1 auto; min-width: 180px; }
.rfcc-v2-dest-banner-label strong { font-weight: 600; }
.rfcc-v2-dest-banner-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.rfcc-v2-dest-banner-map,
.rfcc-v2-dest-banner-clear,
.rfcc-v2-dest-banner-back {
    cursor: pointer;
    text-decoration: none;
    border: 1px solid var(--rf-border-color, #dee2e6);
    border-radius: 6px;
    padding: 7px 14px;
    font-size: 0.9em;
    line-height: 1;
    white-space: nowrap;
    background: var(--rf-bg-card, #fff);
    color: var(--rf-text-primary, #212529);
    transition: background 0.15s, opacity 0.15s;
}
.rfcc-v2-dest-banner-map,
.rfcc-v2-dest-banner-map:visited,
.rfcc-v2-dest-banner-map:hover,
.rfcc-v2-dest-banner-map:active {
    color: var(--rf-text-primary, #212529);
    text-decoration: none !important;
}
.rfcc-v2-dest-banner-back {
    background: var(--rf-accent-primary, #0073aa);
    border-color: var(--rf-accent-primary, #0073aa);
    color: #fff;
    font-weight: 600;
}
.rfcc-v2-dest-banner-map:hover,
.rfcc-v2-dest-banner-clear:hover,
.rfcc-v2-dest-banner-back:hover { opacity: 0.85; }

.rfcc-v2-dest-banner-range {
    flex: 1 0 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 12px;
    margin-top: 2px;
    border-top: 1px dashed var(--rf-border-color, #dee2e6);
    font-size: 0.88em;
    color: var(--rf-text-secondary, #555);
}
.rfcc-v2-dest-banner-range-label {
    font-weight: 600;
    white-space: nowrap;
    flex: none;
}
.rfcc-v2-dest-banner-slider-values {
    flex: none;
    width: 150px;
}
.rfcc-v2-dest-banner-dual-slider {
    flex: 1;
    min-width: 100px;
    max-width: 260px;
}

/* The Distance/Ascent sliders this reuses are styled for the sidebar's dark
   background — restyle for this banner's light background instead. */
.rfcc-v2-dest-banner-range .rfcc-v2-slider-num {
    background: var(--rf-bg-input, #fff);
    border-color: var(--rf-border-color, #ccc);
    color: var(--rf-text-primary, #212529);
}
.rfcc-v2-dest-banner-range .rfcc-v2-slider-num:focus {
    border-color: var(--rf-accent-primary, #0073aa);
}
.rfcc-v2-dest-banner-range .rfcc-v2-slider-unit,
.rfcc-v2-dest-banner-range .rfcc-v2-slider-sep {
    color: var(--rf-text-secondary, #666);
    opacity: 1;
}
.rfcc-v2-dest-banner-range .rfcc-v2-slider-track {
    background: var(--rf-border-color, #dee2e6);
}
.rfcc-v2-dest-banner-range .rfcc-v2-slider-fill {
    background: var(--rf-accent-primary, #0073aa);
}
.rfcc-v2-dest-banner-range .rfcc-v2-thumb {
    border-color: var(--rf-accent-primary, #0073aa);
}
@media (max-width: 600px) {
    .rfcc-v2-dest-banner-range {
        flex-wrap: wrap;
        gap: 8px;
    }
    .rfcc-v2-dest-banner-slider-values,
    .rfcc-v2-dest-banner-dual-slider {
        flex: 1 1 100%;
        width: auto;
        max-width: none;
    }
}

.rfcc-v2-dest-banner-detour {
    flex: 1 0 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 14px;
    padding-top: 10px;
    font-size: 0.88em;
    color: var(--rf-text-secondary, #555);
}
.rfcc-v2-dest-banner-detour-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    user-select: none;
}
.rfcc-v2-dest-banner-detour-toggle input[type="checkbox"] {
    accent-color: var(--rf-accent-primary, #0073aa);
}
.rfcc-v2-dest-banner-detour-radius {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 140px;
    max-width: 260px;
}
.rfcc-v2-dest-banner-detour-radius input[type="range"] {
    flex: 1;
    accent-color: var(--rf-accent-primary, #0073aa);
}
.rfcc-v2-dest-banner-detour-val {
    flex: none;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--rf-text-primary, #212529);
    min-width: 3.4em;
    text-align: right;
}

/* Dark mode: the --rf-text-secondary custom property wasn't resolving reliably
   for this banner's own text in practice (it rendered as dark grey, unreadable
   against the dark banner background) — set it explicitly instead. Covers both
   the explicit toggle and (belt-and-braces) the OS-preference-only case.
   The theme's own `label { color: #313131; }` rule (Customizr Pro) declares
   an explicit color directly on the <label> - an inherited value from the
   parent .rfcc-v2-dest-banner-detour never overrides an explicit one
   regardless of specificity, so the label itself needs its own override too. */
.rf-dark-mode .rfcc-v2-dest-banner-range,
[data-rf-theme="dark"] .rfcc-v2-dest-banner-range,
.rf-dark-mode .rfcc-v2-dest-banner-detour,
[data-rf-theme="dark"] .rfcc-v2-dest-banner-detour,
.rf-dark-mode .rfcc-v2-dest-banner-detour-toggle,
[data-rf-theme="dark"] .rfcc-v2-dest-banner-detour-toggle {
    color: #d1d5db;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-rf-theme="light"]) .rfcc-v2-dest-banner-range,
    :root:not([data-rf-theme="light"]) .rfcc-v2-dest-banner-detour,
    :root:not([data-rf-theme="light"]) .rfcc-v2-dest-banner-detour-toggle {
        color: #d1d5db;
    }
}

/* CTA */
.rfcc-v2-detail-cta {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 10px;
    padding-top: 12px;
    border-top: 1px solid var(--rf-border-color, #dee2e6);
}

.rfcc-v2-view-full-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    background: var(--rfcc-button-color, #0073aa);
    color: #fff !important;
    border-radius: 5px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none !important;
    transition: opacity 0.15s;
}
.rfcc-v2-view-full-btn:hover { opacity: 0.88; }

.rfcc-v2-gpx-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: var(--rf-bg-secondary, #f0f0f0);
    color: var(--rf-text-primary, #333) !important;
    border: 1px solid var(--rf-border-color, #dee2e6);
    border-radius: 5px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none !important;
    transition: background 0.15s;
}
.rfcc-v2-gpx-btn:hover { background: var(--rf-border-color, #dee2e6); }

/* Group mini-maps: hide Leaflet attribution and zoom controls */
.rfcc-v2-group-minimap-wrap .leaflet-control-attribution { display: none !important; }
.rfcc-v2-group-minimap-wrap .leaflet-control-zoom { display: none !important; }

/* Result-card mini maps: keep the Leaflet attribution on a single line (it wrapped
   to 2-3 lines on the narrow cards). */
.rfcc-v2-route-grid .leaflet-control-attribution {
    white-space: nowrap !important;
    max-width: none !important;
}

/* (Group mini maps strip is now in the content area — see rfcc-v2-group-maps-bar above) */

/* ── Loading spinner ──────────────────────────────────────────────────────── */
.rfcc-v2-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 40px;
    color: var(--rf-text-secondary, #6c757d);
}

.rfcc-v2-spinner {
    width: 24px;
    height: 24px;
    border: 3px solid var(--rf-border-color, #dee2e6);
    border-top-color: var(--rfcc-button-color, #0073aa);
    border-radius: 50%;
    animation: rfcc-v2-spin 0.7s linear infinite;
    flex-shrink: 0;
}
@keyframes rfcc-v2-spin { to { transform: rotate(360deg); } }

/* ── Mobile filter button (inline in content header on small screens) ─────── */
.rfcc-v2-mobile-filter-btn {
    display: none; /* shown at ≤768px via media query */
    align-items: center;
    gap: 6px;
    background: var(--rfcc-filter-background-color, #798d7c);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}
.rfcc-v2-mobile-filter-btn:hover { opacity: 0.88; }

/* ── Responsive ───────────────────────────────────────────────────────────── */

/* Tablet — narrower sidebar */
@media (max-width: 1024px) {
    .rfcc-v2-sidebar { width: 220px; }
    .rfcc-v2-route-grid,
    #rfcc-v2-route-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}

/* Mobile — sidebar becomes overlay drawer */
@media (max-width: 768px) {
    .rfcc-v2-wrapper {
        flex-direction: column;
        min-height: unset;
    }

    .rfcc-v2-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        width: 80vw;
        max-width: 320px;
        z-index: 2000;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        box-shadow: 4px 0 20px rgba(0,0,0,0.2);
    }
    .admin-bar .rfcc-v2-sidebar {
        top: 46px;
        height: calc(100% - 46px);
    }
    .rfcc-v2-sidebar.mobile-open {
        transform: translateX(0);
    }
    /* Mobile: collapsed class doesn't apply narrow-bar behaviour — sidebar is hidden via transform */
    .rfcc-v2-sidebar.collapsed {
        width: 80vw;
        max-width: 320px;
    }
    .rfcc-v2-sidebar.collapsed > .rfcc-v2-sidebar-header,
    .rfcc-v2-sidebar.collapsed > .rfcc-v2-filter-panel,
    .rfcc-v2-sidebar.collapsed > .rfcc-v2-group-panel {
        visibility: visible;
        pointer-events: auto;
        opacity: 1;
    }
    .rfcc-v2-sidebar.collapsed .rfcc-v2-open-btn {
        display: none; /* No expand strip on mobile */
    }

    /* On mobile the collapse btn acts as a drawer close button */
    .rfcc-v2-sidebar-collapse-btn {
        display: flex;
        background: rgba(255,255,255,0.15);
        border-radius: 6px;
        padding: 6px;
    }
    .rfcc-v2-sidebar-collapse-btn .rfcc-v2-collapse-icon { display: none; }
    .rfcc-v2-sidebar-collapse-btn .rfcc-v2-close-icon { display: block; }

    .rfcc-v2-open-btn { display: none !important; }

    .rfcc-v2-content {
        padding: 12px 14px;
        min-height: 60vh;
    }
    /* Route detail: tighter top edge so less space sits between the theme
       header and the "Back to results" row. */
    .rfcc-v2-content.rfcc-v2-content--detail {
        padding-top: 4px;
    }

    /* Show inline filter button in the content header */
    .rfcc-v2-mobile-filter-btn { display: flex; }

    /* Dark mode toggle fallback (only while the content header row is
       hidden - embed view, destinations map): classic floating circle,
       fixed top-right, below a fixed WP admin bar and clear of any notch. */
    .rfcc-v2-dm-mobile {
        position: fixed !important;
        top: calc(10px + var(--wp-admin--admin-bar--height, 0px) + env(safe-area-inset-top, 0px));
        right: calc(10px + env(safe-area-inset-right, 0px));
        width: 44px;
        height: 44px;
        border-radius: 50% !important;
        background-color: var(--rf-bg-card, #fff) !important;
        border: 2px solid var(--rf-border-color, #dee2e6) !important;
        box-shadow: 0 2px 10px rgba(0,0,0,0.18) !important;
        color: var(--rf-text-primary, #212529) !important;
        z-index: 999;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        touch-action: manipulation;
    }
    .rfcc-v2-dm-mobile svg {
        width: 22px !important;
        height: 22px !important;
        fill: currentColor !important;
    }
    /* Normal mobile placement: a compact button at the right-hand end of the
       content header row (rfcc-v2.js moveDarkToggle()), level with "Back to
       results" / "Filters" - it no longer floats over the route content,
       the map's own controls or the theme header. Absolutely positioned in
       the row, so the row's layout is unchanged. */
    .rfcc-v2-content-header.rfcc-v2-content-header--has-dm {
        position: relative;
        padding-right: 42px; /* keep the row's own items clear of the toggle */
    }
    .rfcc-v2-content-header .rfcc-v2-dm-mobile.rfcc-v2-dm-inline {
        position: absolute !important;
        top: 0;
        right: 0;
        width: 32px;
        height: 32px;
        box-sizing: border-box;
        box-shadow: var(--rf-shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.1)) !important;
        border-width: 1.5px !important;
        z-index: 2;
    }
    .rfcc-v2-content-header .rfcc-v2-dm-mobile.rfcc-v2-dm-inline::after {
        /* 44px touch target around the 32px button */
        content: '';
        position: absolute;
        inset: -6px;
    }
    .rfcc-v2-content-header .rfcc-v2-dm-mobile.rfcc-v2-dm-inline svg {
        width: 18px !important;
        height: 18px !important;
    }

    .rfcc-v2-route-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }

    .rfcc-v2-detail-map { height: clamp(220px, 35vh, 320px); }
    .rfcc-v2-detail-body { padding: 14px 16px; }
    .rfcc-v2-detail-title-row {
        flex-direction: column;
        gap: 6px;
    }
    .rfcc-v2-detail-title {
        font-size: 18px;
        flex: none;
        width: 100%;
        min-width: 0;
    }
    .rfcc-v2-detail-title-pills {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        align-items: center;
    }
    .rfcc-v2-stat-value { font-size: 15px; }
    .rfcc-v2-group-minimap-wrap { width: 110px; }
    .rfcc-v2-group-minimap { height: 75px; }

    /* Mobile overlay backdrop */
    .rfcc-v2-mobile-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.4);
        z-index: 1999;
    }
    .rfcc-v2-mobile-backdrop.active { display: block; }
}

/* Very narrow */
@media (max-width: 480px) {
    .rfcc-v2-route-grid,
    #rfcc-v2-route-grid { grid-template-columns: 1fr; }
    /* Keep the toolbar a row: the count stays left (flex: 1) and the buttons
       sit on the right, wrapping onto a right-aligned second line if the
       row runs out of room - not one stacked, left-aligned item per line. */
    .rfcc-v2-content-header { justify-content: flex-end; }
    .rfcc-v2-stat-tiles { gap: 6px; }
    .rfcc-v2-stat-tile-val { font-size: 17px; }
    .rfcc-v2-stat-tile--ascent .rfcc-v2-stat-tile-val,
    .rfcc-v2-stat-tile--distance .rfcc-v2-stat-tile-val,
    .rfcc-v2-stat-tile--direction .rfcc-v2-stat-tile-val,
    .rfcc-v2-stat-tile--peak .rfcc-v2-stat-tile-val {
        font-size: 17px;
    }
    .rfcc-v2-ascent-stat {
        gap: 4px;
    }
    .rfcc-v2-ascent-descent-stack {
        gap: 6px;
    }
    .rfcc-v2-descent-stat {
        padding-left: 6px;
    }
}

/* ── Dark mode ────────────────────────────────────────────────────────────── */
.rf-dark-mode .rfcc-v2-stat-tile,
[data-rf-theme="dark"] .rfcc-v2-stat-tile {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.1);
}
.rf-dark-mode .rfcc-v2-detail-secondary,
[data-rf-theme="dark"] .rfcc-v2-detail-secondary {
    border-top-color: rgba(255,255,255,0.1);
}
.rf-dark-mode .rfcc-v2-detail-section,
[data-rf-theme="dark"] .rfcc-v2-detail-section {
    border-top-color: rgba(255,255,255,0.1);
}
.rf-dark-mode .rfcc-v2-gpx-chip,
[data-rf-theme="dark"] .rfcc-v2-gpx-chip,
.rf-dark-mode .rfcc-v2-detail-inner .rfcc-gpx-help-btn,
[data-rf-theme="dark"] .rfcc-v2-detail-inner .rfcc-gpx-help-btn,
.rf-dark-mode .rfcc-v2-gpx-btn,
[data-rf-theme="dark"] .rfcc-v2-gpx-btn {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.15);
    color: var(--rf-text-primary, #e0e0e0) !important;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-rf-theme="light"]) .rfcc-v2-stat-tile {
        background: rgba(255,255,255,0.06);
        border-color: rgba(255,255,255,0.1);
    }
    :root:not([data-rf-theme="light"]) .rfcc-v2-detail-secondary,
    :root:not([data-rf-theme="light"]) .rfcc-v2-detail-section {
        border-top-color: rgba(255,255,255,0.1);
    }
    :root:not([data-rf-theme="light"]) .rfcc-v2-gpx-chip,
    :root:not([data-rf-theme="light"]) .rfcc-v2-detail-inner .rfcc-gpx-help-btn,
    :root:not([data-rf-theme="light"]) .rfcc-v2-gpx-btn {
        background: rgba(255,255,255,0.08);
        border-color: rgba(255,255,255,0.15);
    }
    /* Background graphics: lighter on dark backgrounds */
    :root:not([data-rf-theme="light"]) .rfcc-v2-ascent-silhouette { opacity: 0.13; }
    :root:not([data-rf-theme="light"]) .rfcc-v2-dist-pins { opacity: 0.82; }
    :root:not([data-rf-theme="light"]) .rfcc-v2-direction-compass-bg { opacity: 0.95; }
}

/* Dark mode (class-based): desktop background graphics lighter */
.rf-dark-mode .rfcc-v2-ascent-silhouette,
[data-rf-theme="dark"] .rfcc-v2-ascent-silhouette { opacity: 0.13; }
.rf-dark-mode .rfcc-v2-dist-pins,
[data-rf-theme="dark"] .rfcc-v2-dist-pins { opacity: 0.82; }
.rf-dark-mode .rfcc-v2-direction-compass-bg,
[data-rf-theme="dark"] .rfcc-v2-direction-compass-bg { opacity: 0.95; }

/* Dark mode compact layout — container-driven so it matches the compact tile
   switch above. Must come after the desktop dark mode rules to win when narrow. */
@container rfccstats (max-width: 640px) {
    .rf-dark-mode .rfcc-v2-ascent-silhouette,
    [data-rf-theme="dark"] .rfcc-v2-ascent-silhouette { opacity: 0.09; }
    .rf-dark-mode .rfcc-v2-dist-pins,
    [data-rf-theme="dark"] .rfcc-v2-dist-pins { opacity: 0.44; }
    .rf-dark-mode .rfcc-v2-direction-compass-bg,
    [data-rf-theme="dark"] .rfcc-v2-direction-compass-bg { opacity: 0.78; }
}
@media (prefers-color-scheme: dark) {
    @container rfccstats (max-width: 640px) {
        :root:not([data-rf-theme="light"]) .rfcc-v2-ascent-silhouette { opacity: 0.09; }
        :root:not([data-rf-theme="light"]) .rfcc-v2-dist-pins { opacity: 0.44; }
        :root:not([data-rf-theme="light"]) .rfcc-v2-direction-compass-bg { opacity: 0.78; }
    }
}

/* Hide extra elevation summary stats (Min/Max elevation, slope, ascent, descent).
   Match the v1 single-route.php rule which keeps only totlen/tottime/avgspeed/avgpace. */
#rfcc-v2-wrapper .elevation-summary > :not(.totlen, .tottime, .avgspeed, .avgpace) {
    display: none !important;
}

/* ── Clickable destinations + route towns (v2) ─────────────────────────────── */
#rfcc-v2-wrapper .rfcc-clickable-destination {
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}
#rfcc-v2-wrapper .rfcc-clickable-destination:hover {
    color: #0066cc;
}
#rfcc-v2-wrapper .rfcc-v2-towns-list {
    font-size: 0.85em;
    line-height: 1.7;
    flex: 1;
}
#rfcc-v2-wrapper .route-town-link {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}
#rfcc-v2-wrapper .route-town-link:hover {
    color: #0066cc;
}

/* ── Dark mode: restore transparent sidebar control buttons ──────────────────
   dark-mode.css has a broad `.rf-dark-mode button` rule that paints every
   <button> with --rf-bg-card (#242424). Override it for v2 buttons that must
   stay transparent against the sidebar's own coloured background.             */
.rf-dark-mode .rfcc-v2-section-header,
.rf-dark-mode .rfcc-v2-back-btn,
.rf-dark-mode .rfcc-v2-collapse-btn,
.rf-dark-mode .rfcc-v2-sidebar-collapse-btn,
.rf-dark-mode .rfcc-v2-status-link,
.rf-dark-mode .rfcc-v2-open-btn {
    background-color: transparent !important;
    border-color: transparent !important;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-rf-theme="light"]) .rfcc-v2-section-header,
    :root:not([data-rf-theme="light"]) .rfcc-v2-back-btn,
    :root:not([data-rf-theme="light"]) .rfcc-v2-collapse-btn,
    :root:not([data-rf-theme="light"]) .rfcc-v2-sidebar-collapse-btn,
    :root:not([data-rf-theme="light"]) .rfcc-v2-status-link,
    :root:not([data-rf-theme="light"]) .rfcc-v2-open-btn {
        background-color: transparent !important;
        border-color: transparent !important;
    }
}

/* ── Dark mode: All/None toggle buttons (activity types, club groups, direction)
   Deselected state ("All" → click to select all) renders solid black; selected
   state ("None"/"Default" → click to clear) uses the selected-item colour.      */
.rf-dark-mode .rfcc-v2-all-none-btn[data-action="all"] {
    background-color: #000 !important;
    border-color: rgba(255,255,255,0.25) !important;
    color: rgba(255,255,255,0.85) !important;
    border-style: solid;
}
.rf-dark-mode .rfcc-v2-all-none-btn[data-action="none"],
.rf-dark-mode .rfcc-v2-all-none-btn[data-action="default"] {
    background-color: var(--rfcc-filter-button-selected-color, rgba(255,255,255,0.9)) !important;
    border-color: var(--rfcc-filter-button-selected-color, rgba(255,255,255,0.9)) !important;
    color: var(--rfcc-filter-button-selected-text-color, #000) !important;
    border-style: solid;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-rf-theme="light"]) .rfcc-v2-all-none-btn[data-action="all"] {
        background-color: #000 !important;
        border-color: rgba(255,255,255,0.25) !important;
        color: rgba(255,255,255,0.85) !important;
        border-style: solid;
    }
    :root:not([data-rf-theme="light"]) .rfcc-v2-all-none-btn[data-action="none"],
    :root:not([data-rf-theme="light"]) .rfcc-v2-all-none-btn[data-action="default"] {
        background-color: var(--rfcc-filter-button-selected-color, rgba(255,255,255,0.9)) !important;
        border-color: var(--rfcc-filter-button-selected-color, rgba(255,255,255,0.9)) !important;
        color: var(--rfcc-filter-button-selected-text-color, #000) !important;
        border-style: solid;
    }
}

/* =============================================================================
   Embed mode — single route, no sidebar / grid / chrome
   ============================================================================= */
.rfcc-v2-embed {
    min-height: auto;
    /* Must match !important on .rfcc-v2-wrapper's full-bleed properties above,
       otherwise those would win over these embed-mode overrides regardless of
       source order. */
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.rfcc-v2-embed .rfcc-v2-sidebar {
    display: none !important;
}

.rfcc-v2-embed .rfcc-v2-content-header {
    display: none !important;
}

.rfcc-v2-embed .rfcc-v2-route-grid {
    display: none !important;
}

.rfcc-v2-embed #rfcc-v2-scroll-sentinel {
    display: none !important;
}

.rfcc-v2-embed .rfcc-v2-content {
    width: 100%;
    max-width: 100%;
}

.rfcc-v2-embed .rfcc-v2-route-detail {
    padding: 0;
}

.rfcc-v2-embed .rfcc-v2-dest-banner {
    display: none !important;
}

/* Defend embed buttons against theme overrides */
.rfcc-v2-embed .rfcc-v2-copy-link-btn,
.rfcc-v2-embed .rfcc-v2-copy-group-link-btn,
.rfcc-v2-embed .rfcc-v2-hero-link-btn,
.rfcc-v2-embed .rfcc-v2-group-feature-btn {
    background: var(--rfcc-copy-link-button-color, #0c55cc) !important;
    border: 1.5px solid var(--rfcc-copy-link-button-color, #0c55cc) !important;
    color: #fff !important;
    font-size: 12px !important;
    padding: 6px 12px !important;
    border-radius: 5px !important;
    text-decoration: none !important;
}
.rfcc-v2-embed .rfcc-v2-copy-group-link-btn,
.rfcc-v2-embed .rfcc-v2-group-feature-btn {
    background: transparent !important;
    color: var(--rfcc-copy-link-button-color, #0c55cc) !important;
}
.rfcc-v2-embed .rfcc-v2-copy-link-btn:hover,
.rfcc-v2-embed .rfcc-v2-hero-link-btn:hover {
    background: var(--rfcc-copy-link-button-hover-color, #0a47a8) !important;
    border-color: var(--rfcc-copy-link-button-hover-color, #0a47a8) !important;
}
.rfcc-v2-embed .rfcc-v2-copy-group-link-btn:hover,
.rfcc-v2-embed .rfcc-v2-group-feature-btn:hover {
    background: var(--rfcc-copy-link-button-color, #0c55cc) !important;
    color: #fff !important;
}

/* ── Destinations Map toggle + panel ──────────────────────────────────────── */

.rfcc-v2-section-dmap {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding-bottom: 2px;
}
.rfcc-v2-dmap-heading {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255,255,255,0.7);
    padding: 4px 0;
    display: flex;
    align-items: center;
}
.rfcc-v2-dmap-links {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: auto;
}
/* Qualified with the parent (.rfcc-v2-dmap-links .rfcc-v2-dmap-link, not just
   .rfcc-v2-dmap-link) so this out-specifies dark-mode.css's generic
   ".rf-dark-mode button" rule (0,1,1 vs this rule's 0,1,0) - without that,
   the generic rule wins and paints a solid --rf-bg-card background on every
   plain <button>, which is exactly the mismatched-patch look this component
   is meant to avoid. appearance:none is still good practice for a
   custom-styled button, just not what was causing that here. */
.rfcc-v2-dmap-links .rfcc-v2-dmap-link {
    -webkit-appearance: none;
    appearance: none;
    background: none;
    border: none;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: rgba(255,255,255,0.65);
    cursor: pointer;
    border-radius: 20px;
    transition: all 0.12s;
}
.rfcc-v2-dmap-links .rfcc-v2-dmap-link:hover {
    color: rgba(255,255,255,0.9);
}
.rfcc-v2-dmap-links .rfcc-v2-dmap-link.active {
    color: #445346;
    background: #fff;
}

/* Map container — adaptive height in every mode, not just a full-viewport
   takeover: a UK-wide spread of destinations fitted into a very tall map
   leaves a lot of empty margin above/below the actual pins (fitBounds has to
   zoom out to fit the width, which over-shows the height), and a shorter box
   also leaves more of the routes list visible without scrolling. */
#rfcc-v2-dmap-container {
    flex: 0 1 auto;
    min-height: 360px;
    height: min(680px, 78vh);
    position: relative;
    border-radius: 8px;
    overflow: hidden;
}
#rfcc-v2-dmap-container .leaflet-container {
    width: 100%;
    height: 100%;
    border-radius: 8px;
}

/* Explicit close button (top-right of the panel, all three modes) */
.rfcc-v2-dmap-close {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1100;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--rf-border-color, #dee2e6);
    background: var(--rf-bg-card, #fff);
    color: var(--rf-text-secondary, #6c757d);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.rfcc-v2-dmap-close:hover {
    background: var(--rf-bg-hover, #f8f9fa);
    color: var(--rf-text-primary, #212529);
}

/* Marker type filter overlay inside map — becomes a plain static row (no map
   to overlay) when there's no map showing, i.e. list-only mode. */
.rfcc-v2-dmap-filters {
    position: absolute;
    top: 10px;
    right: 46px;
    z-index: 1000;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    max-width: 250px;
    pointer-events: none;
}
.rfcc-v2-dmap-list-only .rfcc-v2-dmap-filters {
    position: static;
    max-width: none;
    padding: 10px 12px 0;
    pointer-events: auto;
}
.rfcc-v2-dmap-type-btn {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    border: 1px solid var(--rf-border-color, rgba(0,0,0,0.2));
    border-radius: 20px;
    background: var(--rf-bg-card, #fff);
    color: var(--rf-text-primary, #333);
    font-size: 0.78em;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
    transition: opacity 0.15s;
}
.rfcc-v2-dmap-type-btn.active {
    opacity: 1;
}
.rfcc-v2-dmap-type-btn:not(.active) {
    opacity: 0.5;
}

/* Admin/editor "Types" menu (replaces the type pills for them) */
.rfcc-v2-dmap-types {
    max-width: none;
}
.rfcc-v2-dmap-types .rfcc-v2-dmap-types-toggle {
    white-space: nowrap;
}
/* Rows are <label>s - reset the theme's label styling (letter-spacing,
   uppercase, colour) so names and notes stay readable in both themes. */
.rfcc-v2-dmap-types .rfcc-v2-dmap-types-row,
.rfcc-v2-dmap-types .rfcc-v2-dmap-types-row span {
    margin: 0;
    color: var(--rf-text-primary, #333);
    font-size: inherit;
    font-weight: normal;
    letter-spacing: normal;
    text-transform: none;
    line-height: 1.35;
}
.rfcc-v2-dmap-types .rfcc-v2-dmap-types-row .rfcc-v2-dmap-types-num,
.rfcc-v2-dmap-types .rfcc-v2-dmap-types-row .rfcc-v2-dmap-types-hidden {
    color: var(--rf-text-secondary, #666);
}
.rfcc-v2-dmap-types .rfcc-v2-dmap-types-row .rfcc-v2-dmap-types-hidden {
    margin: -4px 0 0 calc(13px + 8px + 1.1em + 8px); /* under the name: checkbox + gap + icon + gap */
    font-size: 0.88em;
    font-style: italic;
}
.rfcc-v2-dmap-types .rfcc-v2-dmap-types-menu {
    pointer-events: auto;
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 230px;
    max-height: 320px;
    overflow-y: auto;
    padding: 6px;
    border-radius: 8px;
    background: var(--rf-bg-card, #fff);
    color: var(--rf-text-primary, #333);
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    font-size: 0.82em;
}
.rfcc-v2-dmap-types .rfcc-v2-dmap-types-menu[hidden] {
    display: none;
}
.rfcc-v2-dmap-types-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 6px;
    border-radius: 5px;
    cursor: pointer;
}
.rfcc-v2-dmap-types-row:hover {
    background: var(--rf-bg-hover, #f3f3f3);
}
.rfcc-v2-dmap-types-row input {
    margin: 0;
    accent-color: var(--rf-accent-primary, #d30b4c);
}
.rfcc-v2-dmap-types-name {
    flex: 1;
}
.rfcc-v2-dmap-types-num {
    color: var(--rf-text-secondary, #666);
    font-variant-numeric: tabular-nums;
}
.rfcc-v2-dmap-types-hidden {
    flex-basis: 100%;
    margin: -4px 0 0 calc(13px + 8px + 1.1em + 8px);
    color: var(--rf-text-secondary, #666);
    font-size: 0.88em;
    font-style: italic;
}
.rfcc-v2-dmap-types-row {
    flex-wrap: wrap;
}
.rfcc-v2-dmap-types-count {
    color: var(--rf-text-secondary, #666);
    font-variant-numeric: tabular-nums;
}
body.rf-dark-mode .rfcc-v2-dmap-types .rfcc-v2-dmap-types-menu {
    background: #2d3436;
    color: #ecf0f1;
}
body.rf-dark-mode .rfcc-v2-dmap-types-row:hover {
    background: rgba(255,255,255,0.08);
}
body.rf-dark-mode .rfcc-v2-dmap-types .rfcc-v2-dmap-types-row,
body.rf-dark-mode .rfcc-v2-dmap-types .rfcc-v2-dmap-types-row span {
    color: #ecf0f1;
}
body.rf-dark-mode .rfcc-v2-dmap-types .rfcc-v2-dmap-types-row .rfcc-v2-dmap-types-num,
body.rf-dark-mode .rfcc-v2-dmap-types .rfcc-v2-dmap-types-row .rfcc-v2-dmap-types-hidden,
body.rf-dark-mode .rfcc-v2-dmap-types-count {
    color: #b2bec3;
}

/* "Near a place" radius filter overlay (Plan ahead / Right now) */
.rfcc-v2-dmap-near {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 1000;
    width: 230px;
    max-width: calc(100% - 20px);
    background: var(--rf-bg-card, #fff);
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
    padding: 8px;
    font-size: 0.82em;
    color: var(--rf-text-primary, #333);
}
.rfcc-v2-dmap-near-input-row {
    display: flex;
    gap: 6px;
}
.rfcc-v2-dmap-near-input {
    flex: 1;
    min-width: 0;
    padding: 5px 8px;
    border: 1px solid rgba(0,0,0,0.2);
    border-radius: 6px;
    font-size: 0.95em;
    background: var(--rf-bg-input, #fff);
    color: var(--rf-text-primary, #333);
}
.rfcc-v2-dmap-near-locate-icon-btn {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    border: 1px solid rgba(0,0,0,0.2);
    border-radius: 6px;
    background: var(--rf-bg-input, #fff);
    color: var(--rf-text-secondary, #666);
    cursor: pointer;
}
.rfcc-v2-dmap-near-locate-icon-btn:hover {
    background: var(--rf-bg-hover, #f0f0f0);
    color: var(--rf-accent-primary, #d30b4c);
}
.rfcc-v2-dmap-near-status {
    margin-top: 5px;
    font-size: 0.92em;
    color: var(--rf-text-secondary, #666);
    min-height: 1.2em;
}
.rfcc-v2-dmap-near-status.is-error {
    color: #d63638;
}
.rfcc-v2-dmap-near-active {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-top: 5px;
    padding: 5px 8px;
    background: var(--rf-bg-hover, #f5f5f5);
    border-radius: 6px;
}
.rfcc-v2-dmap-near-active-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}
.rfcc-v2-dmap-near-clear {
    flex: none;
    border: none;
    background: transparent;
    color: var(--rf-text-secondary, #666);
    font-size: 1.1em;
    line-height: 1;
    cursor: pointer;
    padding: 2px 4px;
}
.rfcc-v2-dmap-near-clear:hover {
    color: var(--rf-accent-primary, #d30b4c);
}
.rfcc-v2-dmap-near-radius-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}
.rfcc-v2-dmap-near-radius-row input[type="range"] {
    flex: 1;
    accent-color: var(--rf-accent-primary, #d30b4c);
}
.rfcc-v2-dmap-near-radius-val {
    flex: none;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    min-width: 3.6em;
    text-align: right;
}

body.rf-dark-mode .rfcc-v2-dmap-near {
    background: #2d3436;
    color: #ecf0f1;
}
body.rf-dark-mode .rfcc-v2-dmap-near-input,
body.rf-dark-mode .rfcc-v2-dmap-near-locate-icon-btn {
    background: #1e2427;
    color: #ecf0f1;
    border-color: rgba(255,255,255,0.2);
}
body.rf-dark-mode .rfcc-v2-dmap-near-active {
    background: rgba(255,255,255,0.08);
}

/* Admin-only "Find new places" mode of the near-a-place widget */
.rfcc-v2-dmap-near.is-finding {
    width: 320px;
}
.rfcc-v2-dmap-near .rfcc-v2-dmap-find-tabs {
    display: flex;
    gap: 2px;
    margin-bottom: 6px;
    padding: 2px;
    border-radius: 7px;
    background: var(--rf-bg-hover, #f0f0f0);
}
.rfcc-v2-dmap-near .rfcc-v2-dmap-find-tab {
    flex: 1;
    padding: 4px 6px;
    border: none;
    border-radius: 5px;
    background: transparent;
    color: var(--rf-text-secondary, #666);
    font-size: 0.92em;
    font-weight: 600;
    cursor: pointer;
}
.rfcc-v2-dmap-near .rfcc-v2-dmap-find-tab.is-active {
    background: var(--rf-bg-card, #fff);
    color: var(--rf-text-primary, #333);
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.rfcc-v2-dmap-near .rfcc-v2-dmap-find-area {
    display: block;
    width: 100%;
    margin: 4px 0 6px;
    padding: 5px 8px;
    border: 1px solid var(--rf-accent-primary, #d30b4c);
    border-radius: 6px;
    background: var(--rf-bg-card, #fff);
    color: var(--rf-accent-primary, #d30b4c);
    font-size: 0.92em;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}
.rfcc-v2-dmap-near .rfcc-v2-dmap-find-area:hover:not(:disabled) {
    background: var(--rf-accent-primary, #d30b4c);
    color: #fff;
}
.rfcc-v2-dmap-near .rfcc-v2-dmap-find-area:disabled {
    border-color: rgba(0,0,0,0.2);
    color: var(--rf-text-secondary, #666);
    cursor: default;
}
body.rf-dark-mode .rfcc-v2-dmap-near .rfcc-v2-dmap-find-area {
    background: #1e2427;
}
body.rf-dark-mode .rfcc-v2-dmap-near .rfcc-v2-dmap-find-area:hover:not(:disabled) {
    background: var(--rf-accent-primary, #d30b4c);
    color: #fff;
}
body.rf-dark-mode .rfcc-v2-dmap-near .rfcc-v2-dmap-find-area:disabled {
    border-color: rgba(255,255,255,0.2);
    color: #b2bec3;
}
.rfcc-v2-dmap-find-results {
    position: relative; /* offset parent for scrolling to a selected entry */
    max-height: 340px;
    overflow-y: auto;
    margin: 0 -4px;
}
.rfcc-v2-dmap-find-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 7px 4px;
    border-top: 1px solid rgba(0,0,0,0.08);
    cursor: pointer;
}
.rfcc-v2-dmap-find-item:hover {
    background: var(--rf-bg-hover, #f7f7f7);
}
.rfcc-v2-dmap-find-item.is-selected {
    background: var(--rf-bg-hover, #eef5fc);
    box-shadow: inset 3px 0 0 var(--rf-accent-primary, #d30b4c);
}
.rfcc-v2-dmap-find-main {
    flex: 1;
    min-width: 0;
}
.rfcc-v2-dmap-near .rfcc-v2-dmap-find-name {
    display: block;
    padding: 0;
    border: none;
    background: none;
    color: var(--rf-text-primary, #333);
    font: inherit;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}
.rfcc-v2-dmap-near .rfcc-v2-dmap-find-name:hover {
    color: var(--rf-accent-primary, #d30b4c);
}
.rfcc-v2-dmap-find-type,
.rfcc-v2-dmap-find-address {
    color: var(--rf-text-secondary, #666);
    font-size: 0.92em;
    line-height: 1.35;
}
.rfcc-v2-dmap-find-links {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 10px;
    margin-top: 3px;
    font-size: 0.92em;
}
.rfcc-v2-dmap-find-links a {
    color: var(--rf-accent-primary, #d30b4c);
    text-decoration: none;
}
.rfcc-v2-dmap-find-links a:hover {
    text-decoration: underline;
}
.rfcc-v2-dmap-find-existing {
    margin-top: 4px;
    padding: 3px 6px;
    border-radius: 5px;
    background: var(--rf-bg-hover, #f5f5f5);
    color: var(--rf-text-secondary, #666);
    font-size: 0.9em;
}
.rfcc-v2-dmap-find-existing a {
    color: var(--rf-accent-primary, #d30b4c);
}
.rfcc-v2-dmap-near .rfcc-v2-dmap-find-add {
    flex: none;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    background: var(--rf-accent-primary, #d30b4c);
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    line-height: 28px;
    padding: 0;
    cursor: pointer;
}
.rfcc-v2-dmap-near .rfcc-v2-dmap-find-add:hover {
    filter: brightness(1.1);
}
.rfcc-v2-dmap-near .rfcc-v2-dmap-find-add:disabled {
    opacity: 0.5;
    cursor: wait;
}
.rfcc-v2-dmap-find-pop {
    color: var(--rf-text-primary, #333);
}
.rfcc-v2-dmap-find-pop .rfcc-v2-dmap-find-links {
    margin-top: 5px;
}

body.rf-dark-mode .rfcc-v2-dmap-near .rfcc-v2-dmap-find-tabs {
    background: rgba(255,255,255,0.08);
}
body.rf-dark-mode .rfcc-v2-dmap-near .rfcc-v2-dmap-find-tab {
    background: transparent;
    color: #b2bec3;
}
body.rf-dark-mode .rfcc-v2-dmap-near .rfcc-v2-dmap-find-tab.is-active {
    background: #1e2427;
    color: #ecf0f1;
}
body.rf-dark-mode .rfcc-v2-dmap-near .rfcc-v2-dmap-find-name {
    background: none;
    color: #ecf0f1;
}
body.rf-dark-mode .rfcc-v2-dmap-find-type,
body.rf-dark-mode .rfcc-v2-dmap-find-address {
    color: #b2bec3;
}
body.rf-dark-mode .rfcc-v2-dmap-find-item {
    border-top-color: rgba(255,255,255,0.1);
}
body.rf-dark-mode .rfcc-v2-dmap-find-item:hover,
body.rf-dark-mode .rfcc-v2-dmap-find-item.is-selected {
    background: rgba(255,255,255,0.08);
}
body.rf-dark-mode .rfcc-v2-dmap-find-existing {
    background: rgba(255,255,255,0.08);
    color: #b2bec3;
}
body.rf-dark-mode .rfcc-v2-dmap-near .rfcc-v2-dmap-find-add {
    background: var(--rf-accent-primary, #d30b4c);
    color: #fff;
}

@media (max-width: 768px) {
    .rfcc-v2-dmap-near {
        position: static;
        width: auto;
        max-width: none;
        margin: 6px 2px;
    }
}

/* Destination count overlay */
.rfcc-v2-dmap-count {
    position: absolute;
    bottom: 10px;
    left: 10px;
    z-index: 1000;
    pointer-events: none;
    padding: 4px 12px;
    background: var(--rf-bg-card, #fff);
    border-radius: 20px;
    font-size: 0.82em;
    font-weight: 600;
    color: var(--rf-text-primary, #333);
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

/* Disabled filter sections */
.rfcc-v2-filters-disabled {
    opacity: 0.35;
    pointer-events: none;
    user-select: none;
}

/* Mobile: move dmap filter pills below the map instead of overlaying */
@media (max-width: 768px) {
    #rfcc-v2-dmap-container {
        display: flex;
        flex-direction: column;
        overflow: visible;
    }
    #rfcc-v2-dmap-container .leaflet-container {
        flex: 1;
        min-height: 0;
        border-radius: 8px;
        overflow: hidden;
    }
    .rfcc-v2-dmap-filters {
        position: static;
        max-width: none;
        overflow-x: auto;
        flex-wrap: nowrap;
        flex-shrink: 0;
        padding: 6px 2px;
        gap: 6px;
        pointer-events: auto;
        -webkit-overflow-scrolling: touch;
    }
    .rfcc-v2-dmap-type-btn {
        white-space: nowrap;
        flex-shrink: 0;
    }
}

/* Popup styles within v2 map — redesigned: name, conditional icon row
   (Google Maps / Street View / Website / Address, each only rendered when
   that data exists), address text, optional hero image, optional clamped
   description with "Read more", admin-only gap note, then Show Routes. */
#rfcc-v2-dmap-container .rfcc-destination-popup {
    min-width: 190px;
    max-width: 260px;
}
#rfcc-v2-dmap-container .rfcc-destination-popup .dest-name {
    margin: 0 0 8px;
    font-size: 1.05em;
    font-weight: 700;
    color: var(--rf-text-primary, #212529);
}
#rfcc-v2-dmap-container .rfcc-destination-popup a {
    color: var(--rf-link-color, #0066cc);
    text-decoration: none;
}
#rfcc-v2-dmap-container .rfcc-destination-popup a:hover {
    text-decoration: underline;
}
.rfcc-v2-dmap-pop-icons {
    display: flex;
    gap: 4px;
    margin-bottom: 8px;
    flex-wrap: nowrap;
}
.rfcc-v2-dmap-pop-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    width: 42px;
    flex-shrink: 0;
    text-decoration: none !important;
    color: var(--rf-text-secondary, #6c757d);
    font-size: 9px;
    font-weight: 600;
    text-align: center;
    line-height: 1.2;
    /* Button reset — the address icon is a <button> (it toggles), not a
       plain label, so it needs the same look as the <a> icons beside it. */
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
}
.rfcc-v2-dmap-pop-address-toggle.active .rfcc-v2-dmap-pop-icon-circle {
    background: var(--rf-accent-primary, #d30b4c);
    color: #fff;
}
.rfcc-v2-dmap-pop-icon-circle {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--rf-bg-secondary, #f5f5f5);
    color: var(--rf-text-primary, #333);
    display: flex;
    align-items: center;
    justify-content: center;
}
.rfcc-v2-dmap-pop-icon:hover .rfcc-v2-dmap-pop-icon-circle {
    background: var(--rf-accent-primary, #d30b4c);
    color: #fff;
}
.rfcc-v2-dmap-pop-address {
    display: flex;
    gap: 5px;
    align-items: flex-start;
    font-size: 11px;
    color: var(--rf-text-secondary, #6c757d);
    margin-bottom: 8px;
}
.rfcc-v2-dmap-pop-address svg {
    flex-shrink: 0;
    margin-top: 1px;
}
.rfcc-v2-dmap-pop-hero {
    width: 100%;
    height: 64px;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 8px;
}
.rfcc-v2-dmap-pop-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.rfcc-v2-dmap-pop-desc {
    font-size: 11.5px;
    color: var(--rf-text-secondary, #6c757d);
    line-height: 1.5;
    margin-bottom: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.rfcc-v2-dmap-pop-desc-more {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: var(--rf-accent-primary, #d30b4c);
    background: none;
    border: none;
    padding: 0;
    margin: 0 0 8px;
    cursor: pointer;
}
#rfcc-v2-dmap-container .rfcc-v2-dmap-show-routes {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    background: var(--rf-accent-primary, #d30b4c);
    color: #fff !important;
    border: none;
    border-radius: 20px;
    font-size: 0.85em;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none !important;
}
#rfcc-v2-dmap-container .rfcc-v2-dmap-show-routes:hover {
    opacity: 0.85;
}

/* Split layout: map + list ("Both") */
#rfcc-v2-dmap-container.rfcc-v2-dmap-split {
    display: flex;
    flex-direction: column;
    /* Both and List both grow to whatever height their content actually
       needs — including a fully-expanded routes accordion, however long —
       and let the page's own scrollbar carry you through it, rather than
       boxing the list into a fixed-height panel with its own nested scroll
       region (which read like an embedded widget, not part of the page). */
    height: auto;
    overflow: visible;
}
#rfcc-v2-dmap-container.rfcc-v2-dmap-split #rfcc-v2-dmap-leaflet {
    height: 250px !important;
    min-height: 200px;
    flex-shrink: 0;
}
#rfcc-v2-dmap-container.rfcc-v2-dmap-list-only {
    display: flex;
    flex-direction: column;
    height: auto;
    max-height: none;
    overflow: visible;
}
.rfcc-v2-dmap-list-wrap {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--rf-border-color, rgba(0,0,0,0.1));
}
.rfcc-v2-dmap-list-only .rfcc-v2-dmap-list-wrap {
    border-top: none;
}

/* Card-list toolbar */
.rfcc-v2-dmap-list-toolbar {
    padding: 10px 12px;
    border-bottom: 1px solid var(--rf-border-color, #e9ecef);
    flex-shrink: 0;
}
.rfcc-v2-dmap-list-row1 {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
}
.rfcc-v2-dmap-list-search {
    flex: 1 1 auto;
    min-width: 70px;
    display: flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--rf-border-color, #dee2e6);
    border-radius: 20px;
    padding: 6px 12px;
    background: var(--rf-bg-secondary, #f5f5f5);
    color: var(--rf-text-secondary, #6c757d);
    min-width: 0;
}
.rfcc-v2-dmap-list-search input {
    border: none;
    background: none;
    outline: none;
    font-size: 13px;
    color: var(--rf-text-primary, #212529);
    width: 100%;
    min-width: 0;
}
.rfcc-v2-dmap-sort-select {
    /* The theme's own base CSS sets a bare `select { width: 100% }` reset —
       harmless for most themed selects, but it wins here by default since
       this rule never touched `width` at all (specificity only matters when
       two rules compete on the same property; a class beats an element
       selector, but only if the class rule actually sets that property). */
    width: auto;
    flex: 0 0 auto;
    border: 1px solid var(--rf-border-color, #dee2e6);
    border-radius: 20px;
    padding: 6px 12px;
    font-size: 12px;
    color: var(--rf-text-secondary, #6c757d);
    background: var(--rf-bg-card, #fff);
    cursor: pointer;
}
.rfcc-v2-dmap-list-geo-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    color: var(--rf-accent-primary, #d30b4c);
    background: var(--rf-bg-secondary, #f5f5f5);
    border: none;
    border-radius: 20px;
    padding: 6px 12px;
    cursor: pointer;
    white-space: nowrap;
}
.rfcc-v2-dmap-list-geo-btn.is-active {
    color: #fff;
    background: var(--rf-accent-primary, #d30b4c);
}
.rfcc-v2-dmap-list-geo-status {
    font-size: 11px;
    color: var(--rf-text-secondary, #6c757d);
    margin-top: 4px;
    min-height: 1.2em;
}
.rfcc-v2-dmap-list-geo-status.is-error {
    color: #d63638;
}
.rfcc-v2-dmap-list-geo-radius:not(:empty) {
    margin-top: 6px;
}
.rfcc-v2-dmap-list-row2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 8px;
    font-size: 12px;
    color: var(--rf-text-secondary, #6c757d);
}
.rfcc-v2-dmap-list-jump-map {
    font-size: 12px;
    font-weight: 600;
    color: var(--rf-accent-primary, #d30b4c);
    background: none;
    border: none;
    cursor: pointer;
}

/* Card list — grows to full natural height (see .rfcc-v2-dmap-split /
   .rfcc-v2-dmap-list-only above); no scroll region of its own. */
.rfcc-v2-dmap-list-cards {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.rfcc-v2-dmap-list-empty {
    text-align: center;
    padding: 30px 16px;
    color: var(--rf-text-secondary, #6c757d);
    font-size: 13px;
}
.rfcc-v2-dmap-list-item {
    background: var(--rf-bg-card, #fff);
    border: 1px solid var(--rf-border-color, #e9ecef);
    border-radius: 8px;
    box-shadow: var(--rf-shadow-sm, 0 1px 3px rgba(0,0,0,0.08));
    overflow: hidden;
    /* .rfcc-v2-dmap-list-cards is a flex column with a fixed height and many
       more items than fit — without this, flex's default shrink-to-fit
       behaviour squashes every item down to a sliver instead of overflowing
       and letting the container scroll. */
    flex-shrink: 0;
}
.rfcc-v2-dmap-list-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    transition: background 0.1s;
    cursor: pointer;
}
.rfcc-v2-dmap-list-card:hover {
    background: var(--rf-bg-hover, #f8f9fa);
}
.rfcc-v2-dmap-list-main {
    flex: 1;
    min-width: 0;
}
.rfcc-v2-dmap-list-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--rf-text-primary, #212529);
}
.rfcc-v2-dmap-desc-info-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid var(--rf-border-color, #dee2e6);
    background: var(--rf-bg-card, #fff);
    color: var(--rf-text-secondary, #6c757d);
    font-size: 9px;
    font-weight: 700;
    cursor: pointer;
    vertical-align: middle;
    padding: 0;
    line-height: 1;
}
.rfcc-v2-dmap-desc-info-btn:hover {
    background: var(--rf-accent-primary, #d30b4c);
    border-color: var(--rf-accent-primary, #d30b4c);
    color: #fff;
}
.rfcc-v2-dmap-list-meta {
    font-size: 12px;
    color: var(--rf-text-secondary, #6c757d);
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 2px;
}
.rfcc-v2-dmap-list-dist {
    color: var(--rf-accent-primary, #d30b4c);
    font-weight: 600;
}
.rfcc-v2-dmap-list-gap {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #b5790a;
    background: #fbf0dc;
    border-radius: 20px;
    padding: 3px 9px;
    white-space: nowrap;
}
.rf-dark-mode .rfcc-v2-dmap-list-gap, [data-rf-theme="dark"] .rfcc-v2-dmap-list-gap {
    color: #e3ac3e;
    background: #3a2c0e;
}
.rfcc-v2-dmap-list-routes-btn {
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    background: var(--rf-accent-primary, #d30b4c);
    border: none;
    border-radius: 20px;
    padding: 5px 13px;
    white-space: nowrap;
    cursor: pointer;
    flex-shrink: 0;
}
.rfcc-v2-dmap-list-routes-btn[disabled] {
    opacity: 0.4;
    cursor: default;
}
.rfcc-v2-dmap-list-routes-btn.expanded {
    background: var(--rf-text-primary, #212529);
}

/* Routes accordion — obviously clickable rows: bordered card, a tiny
   deterministic "gpx-line" squiggle, distance (km/mi aware), and a chevron
   that shifts + colours on hover. */
.rfcc-v2-dmap-routes-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease;
    border-top: 1px solid var(--rf-border-color, #e9ecef);
    background: var(--rf-bg-secondary, #f5f5f5);
}
.rfcc-v2-dmap-routes-panel.open {
    /* Expands to its full natural height, however long that is, rather than
       capping it and scrolling inside its own nested region — the outer list
       (.rfcc-v2-dmap-list-cards) is what should scroll, same as everything
       else in it. The large max-height is only there so the open/close
       transition still animates; no real route list gets remotely close to
       it, so it never actually clips anything. */
    max-height: 6000px;
    overflow: visible;
}
.rfcc-v2-dmap-routes-panel ul {
    list-style: none;
    margin: 0;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.rfcc-v2-dmap-route-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 7px;
    text-decoration: none !important;
    color: var(--rf-text-primary, #212529);
    background: var(--rf-bg-card, #fff);
    border: 1px solid var(--rf-border-color, #e9ecef);
}
.rfcc-v2-dmap-route-row:hover {
    background: var(--rf-bg-hover, #f8f9fa);
    border-color: var(--rf-accent-primary, #d30b4c);
}
.rfcc-v2-dmap-route-line {
    flex-shrink: 0;
    color: var(--rf-text-muted, #adb5bd);
    display: flex;
}
.rfcc-v2-dmap-route-row:hover .rfcc-v2-dmap-route-line {
    color: var(--rf-accent-primary, #d30b4c);
}
.rfcc-v2-dmap-route-info {
    flex: 1;
    min-width: 0;
}
.rfcc-v2-dmap-route-name {
    font-size: 13px;
    font-weight: 600;
    display: block;
}
.rfcc-v2-dmap-route-tag {
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--rf-text-muted, #adb5bd);
    background: var(--rf-bg-secondary, #f5f5f5);
    border-radius: 4px;
    padding: 1px 5px;
    display: inline-block;
    margin-top: 2px;
}
.rfcc-v2-dmap-route-stats {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 3px;
}
.rfcc-v2-dmap-route-dist,
.rfcc-v2-dmap-route-asc {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--rf-text-secondary, #6c757d);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.rfcc-v2-dmap-route-chevron {
    color: var(--rf-text-muted, #adb5bd);
    font-weight: 700;
    font-size: 14px;
    transition: transform 0.12s, color 0.12s;
    flex-shrink: 0;
}
.rfcc-v2-dmap-route-row:hover .rfcc-v2-dmap-route-chevron {
    color: var(--rf-accent-primary, #d30b4c);
    transform: translateX(3px);
}

/* Destination description modal (map popup "Read more" + list "i" button) */
.rfcc-v2-desc-modal-overlay {
    position: absolute;
    inset: 0;
    z-index: 1200;
    background: rgba(20,15,17,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.rfcc-v2-desc-modal {
    position: relative;
    background: var(--rf-bg-card, #fff);
    border-radius: 12px;
    box-shadow: var(--rf-shadow-lg, 0 10px 15px rgba(0,0,0,0.15));
    max-width: 380px;
    width: 100%;
    max-height: 85%;
    overflow-y: auto;
    padding: 22px;
    border: 1px solid var(--rf-border-color, #dee2e6);
}
.rfcc-v2-desc-modal h3 {
    margin: 0 0 4px;
    font-size: 16px;
    color: var(--rf-text-primary, #212529);
    padding-right: 26px;
}
.rfcc-v2-desc-modal-town {
    font-size: 12px;
    color: var(--rf-text-secondary, #6c757d);
    margin-bottom: 14px;
}
.rfcc-v2-desc-modal-body {
    font-size: 13.5px;
    color: var(--rf-text-secondary, #6c757d);
    line-height: 1.65;
}
.rfcc-v2-desc-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid var(--rf-border-color, #dee2e6);
    background: none;
    color: var(--rf-text-secondary, #6c757d);
    cursor: pointer;
    font-size: 14px;
}
.rfcc-v2-desc-modal-close:hover {
    background: var(--rf-bg-hover, #f8f9fa);
    color: var(--rf-text-primary, #212529);
}

@media (max-width: 768px) {
    .rfcc-v2-filter-panel {
        touch-action: pan-y;
        -webkit-overflow-scrolling: touch;
    }
    .rfcc-v2-filter-btn {
        font-size: 12.5px;
        padding: 5px 12px;
        touch-action: manipulation;
    }
    .rfcc-v2-section-label {
        font-size: 12px;
    }
    .rfcc-v2-section-header {
        font-size: 12px;
        padding: 6px 0;
        touch-action: manipulation;
    }
    .rfcc-v2-dmap-heading {
        font-size: 12px;
    }
    .rfcc-v2-dmap-link {
        font-size: 12.5px;
        padding: 6px 12px;
    }
    #rfcc-v2-dmap-container.rfcc-v2-dmap-split #rfcc-v2-dmap-leaflet {
        /* A percentage here would need .rfcc-v2-dmap-split to have a definite
           height to resolve against, which it no longer does now that Both
           grows to its content's natural height - a fixed value stays
           well-defined regardless. */
        height: 200px !important;
        min-height: 180px;
    }
    .rfcc-v2-dmap-list-row1 {
        gap: 6px;
    }
    .rfcc-v2-dmap-list-card {
        padding: 8px 10px;
    }
}

.rf-dark-mode .rfcc-v2-peak-trigger.rfcc-v2-stat-active {
    background: rgba(108, 92, 231, 0.22);
}

/* "Promote to Main Destination" confirm dialog */
.rfcc-v2-promote-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.rfcc-v2-promote-modal {
    background: var(--rf-bg-primary, #fff);
    color: var(--rf-text-primary, #212529);
    border-radius: 10px;
    padding: 24px;
    max-width: 380px;
    width: 100%;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.rfcc-v2-promote-modal h3 {
    margin: 0 0 10px;
    font-size: 1.1em;
}

.rfcc-v2-promote-modal p {
    margin: 0 0 18px;
    color: var(--rf-text-secondary, #6c757d);
    line-height: 1.4;
}

.rfcc-v2-promote-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rfcc-v2-promote-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    width: 100%;
    padding: 10px 14px;
    border-radius: 6px;
    border: 1px solid var(--rf-border-color, #ddd);
    background: var(--rf-bg-secondary, #f5f5f5);
    color: var(--rf-text-primary, #212529);
    font-size: 0.95em;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s ease;
}

.rfcc-v2-promote-btn span {
    font-size: 0.82em;
    font-weight: 400;
    color: var(--rf-text-secondary, #6c757d);
}

.rfcc-v2-promote-btn--primary:hover {
    background: var(--rf-bg-hover, #eee);
    border-color: var(--rf-accent-primary, #0073aa);
}

.rfcc-v2-promote-btn.rfcc-v2-promote-cancel {
    font-weight: 400;
    color: var(--rf-text-secondary, #6c757d);
    background: transparent;
    border-color: transparent;
    text-align: center;
    align-items: center;
    margin-top: 4px;
}

.rfcc-v2-promote-btn.rfcc-v2-promote-cancel:hover {
    background: var(--rf-bg-hover, #eee);
}