/**
 * Club Map App — unified full-screen map + list experience for club-index.
 *
 * Replaces club-index.css's map-section/filter-bar/list-panel rules and
 * club-index-mobile.css entirely for the new [club_index_map_app]
 * shortcode. All selectors are scoped under #cma-app / .cma-app so this
 * file can ship alongside the legacy club-index.css / club-index-mobile.css
 * without any collision while the old shortcodes are phased out.
 *
 * Visual language (colors, radii, shadows) is carried over from
 * club-index.css's --ci-* tokens so the app still reads as the same site.
 */

:root {
    --cma-primary:        #2563eb;
    --cma-primary-dark:   #1d4ed8;
    --cma-accent:         var(--lb-orange, #ff4d00);
    --cma-ink:            #111827;
    --cma-muted:          #6b7280;
    --cma-surface:        #fff;
    --cma-border:         #e5e7eb;
    --cma-gray-50:        #f9fafb;
    --cma-gray-100:       #f3f4f6;
    --cma-gray-200:       #e5e7eb;
    --cma-gray-300:       #d1d5db;
    --cma-gray-400:       #9ca3af;
    --cma-radius:         8px;
    --cma-radius-lg:      14px;
    --cma-shadow:         0 8px 28px rgba(15, 23, 42, .14);
    --cma-shadow-lg:      0 16px 44px rgba(15, 23, 42, .18);
    --cma-header-height:  var(--lb-header-height, 64px);
    --cma-panel-width:    410px;
    --cma-bottomnav-height: 64px;
    --cma-mobile-bottom-offset: calc(var(--cma-bottomnav-height) + env(safe-area-inset-bottom));
    --cma-transition:     .2s ease;
}

/* ========================================================================
   Shell
   ======================================================================== */

#cma-app, #cma-app * { box-sizing: border-box; }
#cma-app [hidden] { display: none !important; }

#cma-app .screen-reader-text {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

#cma-app button,
#cma-app input { font: inherit; }
#cma-app button { cursor: pointer; }

/* #cma-app has two presentations, chosen by the [club_index_map mode="…"]
   shortcode attribute (see shortcode-map-app.php):
   - default / "fullscreen": the dedicated club map PAGE. The app takes over
     the full viewport below the (always-visible) site header — same
     fixed-shell mechanic as runroute-app, but the header offset is never
     zeroed: this is a browse tool, not an editor, so the header stays on
     screen at every breakpoint.
   - "embed" (class .cma-app--embed): a normal, in-flow preview CARD of
     bounded height, e.g. the front page's "Klub-oversigt" section. It must
     behave like an ordinary block-level element — no position:fixed, no
     locking the page's scroll — since the rest of the page's content sits
     above and below it in normal flow. */
#cma-app:not(.cma-app--embed) {
    position: fixed;
    inset: var(--cma-header-height, 64px) 0 0 0;
    width: 100%;
    height: calc(100dvh - var(--cma-header-height, 64px));
    min-height: 420px;
    overflow: hidden;
    background: #dbe4e8;
    color: var(--cma-ink);
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    isolation: isolate;
    z-index: 800;
}

body.admin-bar #cma-app:not(.cma-app--embed) {
    inset: calc(32px + var(--cma-header-height, 64px)) 0 0 0;
    height: calc(100dvh - 32px - var(--cma-header-height, 64px));
}

@media (max-width: 782px) {
    body.admin-bar #cma-app:not(.cma-app--embed) {
        inset: calc(46px + var(--cma-header-height, 64px)) 0 0 0;
        height: calc(100dvh - 46px - var(--cma-header-height, 64px));
    }
}

/* Optional hook: if the page template adds this body class, the page
   itself won't scroll behind the fixed app (see NOTES.md). Scoped to
   fullscreen instances only — an .cma-app--embed card must never lock the
   whole page's scroll (e.g. the front page, which embeds a preview card
   alongside its own hero, calendar and route-planner sections). */
body.club-map-app-page,
body:has(#cma-app:not(.cma-app--embed)) {
    overflow: hidden;
}

/* Embed card: normal block-level element, bounded height, contained corners. */
#cma-app.cma-app--embed {
    position: relative;
    width: 100%;
    height: 580px;
    min-height: 420px;
    overflow: hidden;
    background: #dbe4e8;
    color: var(--cma-ink);
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    isolation: isolate;
    z-index: 1;
    border-radius: var(--cma-radius-lg);
    box-shadow: var(--cma-shadow-lg);
}

@media (max-width: 600px) {
    #cma-app.cma-app--embed { height: 460px; }
}

/* Embed mode has no side panel to make room for, so the toolbar/filterbar
   always sit flush left (the fullscreen rules offset them by
   --cma-panel-width — see the toolbar/filterbar sections below). */
#cma-app.cma-app--embed .cma-app__toolbar,
#cma-app.cma-app--embed .cma-filterbar {
    left: 18px;
}

#cma-app .cma-app__map {
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* Embed activation overlay — sits above the map tiles AND Leaflet's own
   panes/controls (Leaflet's control container is z-index: 1000) until the
   visitor taps/clicks it, so an in-flow embed never traps page scroll. */
.cma-embed-overlay {
    position: absolute;
    inset: 0;
    z-index: 1100;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 18px;
    background: rgba(17, 24, 39, 0.02);
    cursor: pointer;
}

.cma-embed-overlay__hint {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 999px;
    background: rgba(17, 24, 39, 0.82);
    color: #fff;
    font-size: 13.5px;
    font-weight: 600;
    box-shadow: var(--cma-shadow);
    pointer-events: none;
}

.cma-embed-overlay__hint i {
    color: var(--cma-accent);
}

.cma-embed-overlay:focus-visible {
    outline: 3px solid var(--cma-accent);
    outline-offset: -3px;
}

#cma-app .cma-app__map .leaflet-tile {
    border: none !important;
    outline: none !important;
}

/* ========================================================================
   Floating toolbar (search + panel toggle)
   ======================================================================== */

.cma-app__toolbar {
    position: absolute;
    z-index: 500;
    top: 18px;
    left: calc(var(--cma-panel-width) + 28px);
    right: 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    pointer-events: none;
    transition: left .25s ease;
}

.cma-app__toolbar > * { pointer-events: auto; }
.cma-site-menu { display: none; }

#cma-app.cma-panel-closed .cma-app__toolbar,
#cma-app.cma-panel-closed .cma-filterbar { left: 18px; }

.cma-search {
    display: flex;
    align-items: center;
    flex: 1 1 380px;
    max-width: 560px;
    height: 50px;
    padding-left: 15px;
    border: 1px solid rgba(15, 23, 42, .1);
    border-radius: var(--cma-radius-lg);
    background: rgba(255, 255, 255, .97);
    box-shadow: var(--cma-shadow);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    overflow: hidden;
}

.cma-search__icon { display: flex; color: var(--cma-muted); flex-shrink: 0; }

.cma-search input {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0 8px;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--cma-ink);
    font-size: 14px;
}

.cma-search input:focus-visible { box-shadow: inset 0 -3px var(--cma-primary); }

.cma-search__spinner { display: flex; color: var(--cma-primary); flex-shrink: 0; margin-right: 8px; }
.cma-search__spinner svg { animation: cma-spin 1s linear infinite; }

@keyframes cma-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.cma-search__clear {
    flex-shrink: 0;
    align-self: stretch;
    width: 40px;
    border: 0;
    background: transparent;
    color: var(--cma-gray-400);
    font-size: 20px;
    line-height: 1;
}
.cma-search__clear:hover { color: var(--cma-muted); background: var(--cma-gray-100); }

.cma-icon-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    border: 1px solid rgba(15, 23, 42, .1);
    border-radius: var(--cma-radius-lg);
    background: rgba(255, 255, 255, .97);
    box-shadow: var(--cma-shadow);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: var(--cma-ink);
}
.cma-icon-btn:hover { color: var(--cma-primary); }
#cma-app.cma-panel-closed .cma-icon-btn { color: var(--cma-primary); }

.cma-toolbar-count {
    position: absolute;
    top: -5px;
    right: -5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--cma-accent);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
}

/* ========================================================================
   Floating filter bar (training-day pills + price toggle)
   ======================================================================== */

.cma-filterbar {
    position: absolute;
    z-index: 490;
    top: 78px;
    left: calc(var(--cma-panel-width) + 28px);
    right: 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: left .25s ease;
}

.cma-pill-scroll {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid rgba(15, 23, 42, .1);
    border-radius: 999px;
    background: rgba(255, 255, 255, .95);
    box-shadow: var(--cma-shadow);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    max-width: 100%;
}
.cma-pill-scroll::-webkit-scrollbar { display: none; }

.cma-pill-row { display: flex; gap: 5px; flex-shrink: 0; }

.cma-pill-divider {
    width: 1px;
    height: 22px;
    flex-shrink: 0;
    background: var(--cma-gray-200);
}

.cma-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    padding: 0 12px;
    border: 1.5px solid transparent;
    border-radius: 999px;
    background: var(--cma-gray-100);
    color: var(--cma-muted);
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    transition: background var(--cma-transition), color var(--cma-transition), box-shadow var(--cma-transition);
}

.cma-day-pill { width: 34px; padding: 0; flex-shrink: 0; }

.cma-pill:hover { color: var(--cma-primary); background: rgba(37, 99, 235, .08); }

.cma-pill.active {
    background: var(--cma-primary);
    color: #fff;
    box-shadow: 0 2px 6px rgba(37, 99, 235, .35);
}

.cma-reset-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    height: 36px;
    padding: 0 14px;
    border: 1px solid rgba(15, 23, 42, .1);
    border-radius: 999px;
    background: rgba(255, 255, 255, .95);
    box-shadow: var(--cma-shadow);
    color: var(--cma-muted);
    font-size: 12.5px;
    font-weight: 600;
}
.cma-reset-btn:hover { color: var(--cma-accent); }

/* ========================================================================
   Result panel — desktop sidebar / mobile bottom sheet
   ======================================================================== */

.cma-panel {
    position: absolute;
    z-index: 450;
    inset: 0 auto 0 0;
    display: flex;
    flex-direction: column;
    width: var(--cma-panel-width);
    background: rgba(255, 255, 255, .98);
    box-shadow: 10px 0 34px rgba(15, 23, 42, .15);
    transition: transform .25s ease;
}

#cma-app.cma-panel-closed .cma-panel { transform: translateX(-100%); }

.cma-panel__handle { display: none; }

.cma-panel__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--cma-border);
}

.cma-panel__heading strong {
    display: block;
    font-size: 17px;
    font-weight: 800;
}

.cma-panel__info {
    margin: 3px 0 0;
    color: var(--cma-muted);
    font-size: 12.5px;
}

.cma-panel__close {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: var(--cma-gray-100);
    color: var(--cma-ink);
    font-size: 22px;
    line-height: 1;
}
.cma-panel__close:hover { background: var(--cma-gray-200); }

.cma-panel__body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 10px;
}

/* ========================================================================
   Club list + cards
   ======================================================================== */

.cma-club-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cma-card {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 10px;
    border: 1px solid var(--cma-border);
    border-radius: var(--cma-radius);
    background: #fff;
    text-decoration: none;
    color: inherit;
    transition: border-color var(--cma-transition), box-shadow var(--cma-transition), transform var(--cma-transition);
}

.cma-card:hover,
.cma-card:focus-visible,
.cma-card.is-selected {
    border-color: var(--cma-accent);
    box-shadow: 0 6px 18px rgba(255, 77, 0, .15);
    outline: 0;
    transform: translateY(-1px);
}

.cma-card__thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 12px;
    background: var(--cma-gray-50);
    border: 1px solid var(--cma-border);
    overflow: hidden;
    flex-shrink: 0;
}

.cma-card__thumb img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.cma-card__logo-fallback { font-size: 22px; }

.cma-card__body { min-width: 0; }

.cma-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.cma-card__title {
    margin: 0;
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--cma-ink);
}

.cma-card__meta {
    margin: 3px 0 0;
    font-size: 12.5px;
    color: var(--cma-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cma-badge {
    flex-shrink: 0;
    display: inline-block;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.cma-badge--free { background: #d1fae5; color: #065f46; }

.cma-loading,
.cma-empty {
    padding: 40px 16px;
    text-align: center;
    color: var(--cma-muted);
}

.cma-empty svg { margin-bottom: 12px; color: var(--cma-gray-300); }
.cma-empty p { margin: 0 0 14px; font-size: 14.5px; }

.cma-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border-radius: var(--cma-radius);
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all var(--cma-transition);
}

.cma-btn--outline {
    background: #fff;
    color: var(--cma-ink);
    border: 1px solid var(--cma-gray-300);
}
.cma-btn--outline:hover { border-color: var(--cma-primary); color: var(--cma-primary); }

.cma-btn--primary {
    background: var(--cma-accent, var(--cma-primary));
    color: #fff;
    border: 1px solid transparent;
    white-space: nowrap;
}
.cma-btn--primary:hover { filter: brightness(1.06); }

/* "Tilføj din løbeklub" CTA in the floating toolbar */
.cma-app__toolbar-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    border-radius: var(--cma-radius-lg);
    box-shadow: var(--cma-shadow);
    font-size: 13.5px;
    flex-shrink: 0;
    height: 50px;
}
.cma-app__toolbar-cta span { display: none; }
@media (min-width: 560px) {
    .cma-app__toolbar-cta span { display: inline; }
}
@media (max-width: 782px) {
    .cma-app__toolbar-cta { padding: 9px 12px; }
}

/* ========================================================================
   Map markers / clusters / popup
   ======================================================================== */

.cma-marker { background: transparent; border: 0; }

.cma-marker__pin {
    width: 34px;
    height: 34px;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f2c7ad;
    border: 2.5px solid #fff;
    box-shadow: 0 2px 6px rgba(13, 18, 32, .22);
}
.cma-marker__pin svg { transform: rotate(45deg); color: #171717; display: block; }

.cma-marker__pin--logo {
    width: 40px;
    height: 40px;
    background: #fff;
    border-color: var(--cma-accent);
    overflow: hidden;
    position: relative;
}
.cma-marker__pin--logo img {
    width: 30px;
    height: 30px;
    object-fit: contain;
    transform: rotate(45deg);
    display: block;
}

.cma-marker:hover .cma-marker__pin,
.cma-marker:focus .cma-marker__pin {
    box-shadow: 0 0 0 3px rgba(255, 77, 0, .3), 0 3px 8px rgba(13, 18, 32, .25);
}

.cma-cluster-wrapper { background: transparent !important; border: 0 !important; border-radius: 50%; }
.cma-cluster-wrapper:focus-visible { outline: 3px solid var(--cma-accent); outline-offset: 3px; }

.cma-cluster {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #f2c7ad;
    color: #171717;
    box-shadow: 0 2px 6px rgba(13, 18, 32, .24);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    transition: transform .15s ease, box-shadow .15s ease;
}

.cma-cluster--sm { font-size: 14px; }
.cma-cluster--md { font-size: 15px; }
.cma-cluster--lg { font-size: 16px; background: var(--cma-ink); color: #fff; }

.cma-cluster-wrapper:hover .cma-cluster,
.cma-cluster-wrapper:focus-visible .cma-cluster {
    box-shadow: 0 0 0 3px var(--cma-accent), 0 3px 8px rgba(13, 18, 32, .25);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .cma-cluster-wrapper:hover .cma-cluster { transform: scale(1.05); }
}

.cma-popup { min-width: 200px; max-width: 280px; }
.cma-popup__title { margin: 0 0 6px; font-size: 15px; font-weight: 700; }
.cma-popup__title a { color: var(--cma-ink); text-decoration: none; }
.cma-popup__title a:hover { color: var(--cma-primary); }
.cma-popup__location,
.cma-popup__desc { margin: 0 0 6px; font-size: 12.5px; color: var(--cma-muted); }
.cma-popup__approx { margin: 0 0 6px; font-size: 11px; color: var(--cma-gray-400); }
.cma-popup__link { display: inline-block; font-size: 12.5px; font-weight: 700; color: var(--cma-primary); text-decoration: none; }

/* ========================================================================
   Mobile bottom navigation (Kort / Liste / Filtre)
   ======================================================================== */

.cma-bottomnav { display: none; }

/* ========================================================================
   Focus-visible states
   ======================================================================== */

#cma-app a:focus-visible,
#cma-app button:focus-visible,
#cma-app input:focus-visible {
    outline: 2px solid var(--cma-primary);
    outline-offset: 2px;
}

/* ========================================================================
   Desktop tweak: narrower viewport still leaves room for panel + toolbar
   ======================================================================== */

@media (min-width: 900px) and (max-width: 1180px) {
    :root { --cma-panel-width: 360px; }
}

/* ========================================================================
   Mobile (<900px): bottom sheet + fixed bottom nav
   ======================================================================== */

@media (max-width: 899px) {
    body.club-map-app-page .site-header,
    body.club-map-app-page .lb-header,
    body.club-map-app-page header[role="banner"],
    body:has(#cma-app:not(.cma-app--embed)) .site-header,
    body:has(#cma-app:not(.cma-app--embed)) .lb-header,
    body:has(#cma-app:not(.cma-app--embed)) header[role="banner"] {
        display: none !important;
    }

    #cma-app:not(.cma-app--embed) {
        inset: 0 !important;
        height: 100dvh !important;
    }

    body.admin-bar #cma-app:not(.cma-app--embed) {
        inset: 46px 0 0 !important;
        height: calc(100dvh - 46px) !important;
    }

    #cma-app { min-height: 480px; }

    .cma-app__toolbar {
        top: max(12px, env(safe-area-inset-top));
        left: 10px;
        right: 10px;
        gap: 8px;
    }

    .cma-search { height: 46px; border-radius: 12px; }
    .cma-icon-btn { width: 46px; height: 46px; border-radius: 12px; }
    #cma-app:not(.cma-app--embed) .cma-site-menu { display: inline-flex; flex: 0 0 46px; }

    .cma-filterbar {
        top: calc(max(12px, env(safe-area-inset-top)) + 58px);
        left: 10px;
        right: 10px;
    }

    .cma-pill-scroll { flex: 1; min-width: 0; }
    .cma-pill { height: 32px; font-size: 12px; }
    .cma-day-pill { width: 32px; }
    .cma-reset-btn span { display: none; }
    .cma-reset-btn { width: 36px; height: 36px; padding: 0; justify-content: center; border-radius: 50%; }

    /* Panel becomes a bottom sheet that sits above the shared site nav. */
    .cma-panel {
        inset: auto 0 var(--cma-mobile-bottom-offset) 0;
        width: 100%;
        height: 46dvh;
        max-height: calc(100% - var(--cma-mobile-bottom-offset) - 10px);
        border-radius: 18px 18px 0 0;
        box-shadow: 0 -8px 30px rgba(15, 23, 42, .18);
        transform: none;
        background: rgba(255, 255, 255, .92);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
    }

    #cma-app.cma-panel-closed .cma-panel { transform: none; }

    .cma-panel[data-sheet-size="peek"] { height: 84px; }
    .cma-panel[data-sheet-size="half"] { height: 46dvh; }
    .cma-panel[data-sheet-size="full"] { height: calc(100% - var(--cma-mobile-bottom-offset) - 10px); max-height: none; }

    .cma-panel[data-sheet-size="peek"] .cma-panel__body { display: none; }

    .cma-panel__handle {
        display: block;
        width: 60px;
        min-height: 20px;
        height: 20px;
        margin: 0 auto;
        padding: 0;
        border: 0;
        background: transparent;
        flex-shrink: 0;
    }
    .cma-panel__handle::after {
        content: "";
        display: block;
        width: 40px;
        height: 4px;
        margin: 8px auto 0;
        border-radius: 999px;
        background: var(--cma-gray-300);
    }

    .cma-panel__header { padding: 2px 14px 10px; min-height: 0; }
    .cma-panel__close { display: none; }

    /* Fixed contextual bottom nav on tablet-sized app layouts. */
    .cma-bottomnav {
        display: flex;
        position: absolute;
        z-index: 600;
        inset: auto 0 0 0;
        min-height: calc(var(--cma-bottomnav-height) + env(safe-area-inset-bottom));
        padding: 4px 6px calc(4px + env(safe-area-inset-bottom));
        background: rgba(255, 255, 255, .98);
        border-top: 1px solid var(--cma-border);
        box-shadow: 0 -4px 16px rgba(15, 23, 42, .08);
    }

    .cma-bottomnav__btn {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        position: relative;
        min-height: 44px;
        border: 0;
        background: transparent;
        color: var(--cma-muted);
        font-size: 10.5px;
        font-weight: 600;
        border-radius: 10px;
    }

    .cma-bottomnav__btn.is-active { color: var(--cma-accent); background: rgba(255, 77, 0, .08); }

    .cma-bottomnav__badge {
        position: absolute;
        top: 2px;
        right: calc(50% - 22px);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 16px;
        height: 16px;
        padding: 0 4px;
        border-radius: 999px;
        background: var(--cma-accent);
        color: #fff;
        font-size: 9.5px;
        font-weight: 700;
    }

    /* Toolbar icon button (sidebar toggle) is redundant with the bottom
       nav's "Liste" tab on mobile. */
    #cma-app .cma-app__toolbar #cma-panel-toggle { display: none; }

    #cma-app .leaflet-control-attribution {
        margin-bottom: var(--cma-mobile-bottom-offset) !important;
    }
}

@media (max-width: 760px) {
    :root {
        --cma-mobile-bottom-offset: var(--lb-mobile-tabs-height, calc(72px + env(safe-area-inset-bottom)));
    }

    /* The site-wide Forside/Løb/Klubber/Ruter navigation replaces the app nav. */
    .cma-bottomnav { display: none; }
}

@media (max-width: 380px) {
    .cma-card { grid-template-columns: 48px minmax(0, 1fr); }
    .cma-card__thumb { width: 48px; height: 48px; }
}

/* ========================================================================
   Reduced motion
   ======================================================================== */

@media (prefers-reduced-motion: reduce) {
    .cma-panel,
    .cma-card,
    .cma-cluster,
    .cma-app__toolbar,
    .cma-filterbar { transition: none; }
}