/* =============================================================================
   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; }

.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;
}

/* When viewing route detail, hide the header on desktop (sidebar has back link) */
.rfcc-v2-content-header--detail {
    display: none;
}
/* On mobile, show the header with just the back button */
.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) {
    .rfcc-v2-content-header--detail {
        display: flex;
    }
    .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;
}

/* Show/hide destination info on cards — icon matches whatever's configured
   for the main-destination marker (admin: Marker Configuration), so it stays
   correct if that icon is ever changed. */
.rfcc-v2-stops-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1.5px solid var(--rf-border-color, #dee2e6);
    border-radius: 5px;
    background: var(--rf-bg-card, #fff);
    color: var(--rf-accent-primary, #d30b4c);
    cursor: pointer;
    font-size: 13px;
    transition: opacity 0.15s, background 0.15s;
}
.rfcc-v2-stops-toggle-btn:hover { background: var(--rf-bg-hover, #f8f9fa); }
.rfcc-v2-stops-toggle-btn[aria-pressed="false"] {
    color: var(--rf-text-muted, #999);
    opacity: 0.6;
}

/* ── 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;
}


/* 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;
}

/* ============================================================================
   ITINERARY STORY VIEW (v2 only)
   ============================================================================
   Alternate layout toggled by #rfcc-v2-story-view-pill: scrolling content on
   the left, map+elevation pinned on the right. Reflows the SAME rendered
   .rfcc-v2-detail-map-wrap / .rfcc-v2-detail-body markup via grid placement
   rather than re-rendering anything - see the inline script right after the
   itinerary section in rfcc_v2_render_route_detail(). Only active above the
   breakpoint below; on narrow viewports it behaves like the standard
   single-column layout regardless of the toggle. */
@media (min-width: 960px) {
    .rfcc-v2-detail-inner.rfcc-story-view {
        display: grid;
        grid-template-columns: minmax(0, 1fr) clamp(320px, 38%, 460px);
        align-items: start;
        gap: 0 24px;
        padding: 20px;
    }
    .rfcc-v2-detail-inner.rfcc-story-view .rfcc-v2-detail-map-wrap {
        grid-column: 2;
        grid-row: 1 / -1;
        position: sticky;
        top: 16px;
    }
    .rfcc-v2-detail-inner.rfcc-story-view .rfcc-v2-detail-body {
        grid-column: 1;
        padding: 0;
    }
    .rfcc-v2-detail-inner.rfcc-story-view .rfcc-v2-detail-body::after {
        display: none;
    }
}

/* 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;
}
.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);
}

/* "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);
}

/* 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;
    }

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

    /* Dark mode toggle: classic floating circle, fixed top-right, below any WP admin bar */
    .rfcc-v2-dm-mobile {
        position: fixed !important;
        top: 10px;
        right: 10px;
        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;
    }

    .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; }
    .rfcc-v2-content-header { flex-direction: column; align-items: flex-start; }
    .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-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-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;
}

/* "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);
}

@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);
}