@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* --- UNIVERSAL VARIABLES --- */
:root {
    --primary: #0f172a;    /* Deep Midnight Slate */
    --accent: #6366f1;     /* Refined Indigo for active states */
    --border: #e2e8f0;     /* Lighter, cleaner stone */
    --bg: #f8fafc;         /* Crisp, clean off-white */
    --surface: #ffffff;    /* Pure white for cards */
    --text: #1e293b;       /* Soft charcoal for readability */
    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

body, html {
    margin: 0; padding: 0; height: 100%;
    font-family: 'Inter', sans-serif;
    color: var(--text);
    background: var(--bg);
}

.app-layout { 
    display: flex; 
    flex-direction: column; 
    min-height: 100vh;
    overflow-x: hidden;
    /* Ensure no height: 100vh or overflow: hidden here */
}

/* --- HEADER (STATIC) --- */
.main-header {
    background: rgb(255, 255, 255); 
    padding: 15px 30px; 
    border-bottom: 1px solid var(--border);
    flex-shrink: 0; 
    z-index: 1000;
    box-sizing: border-box;
}

.nav-content { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
h1 { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -0.025em; }

.view-toggle { background: #f1f5f9; padding: 4px; border-radius: 8px; display: flex; gap: 4px; }
.toggle-btn {
    text-decoration: none; color: var(--gray); padding: 6px 12px;
    border-radius: 6px; font-size: 13px; font-weight: 600; transition: 0.2s;
}
.toggle-btn.active { background: white; color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,0.05); }

/* --- FILTERS (Desktop Default) --- */
.filter-bar { display: flex; gap: 15px; flex-wrap: wrap; align-items: flex-end; }
.filter-group { display: flex; flex-direction: column; gap: 5px; }
.filter-group label { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--gray); }
input, select,  .anchor {
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 14px;
    background: var(--surface);
    color: var(--text);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.dropdown-check-list{
    display: flex; /* Changed from inline-block */
    position: relative;
}

.reset-btn {
    background: white;
    border: 1px solid var(--primary);
    color: var(--primary);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    padding: 8px 16px;
    border-radius: 6px;
    transition: all 0.2s;
    height: 35px;
}
.reset-btn:hover { background: #eff6ff; box-shadow: 0 2px 4px rgba(59, 130, 246, 0.1); }


.dropdown-check-list .items {
    padding: 10px; display: none; margin: 0; border: 1px solid var(--border);
    position: absolute; width: 220px; background: #fff; z-index: 1000;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); border-radius: 8px;
    max-height: 400px; overflow-y: auto; list-style: none;
}
.dropdown-check-list.visible .items { display: block; }

/* --- MOBILE TOGGLE BUTTON (Hidden on Desktop) --- */
.mobile-toggle-btn {
    display: none; /* Hidden by default */
    width: 100%; padding: 12px; background: white;
    border: 1px solid var(--border); border-radius: 8px;
    color: var(--primary); font-size: 14px; font-weight: 700;
    cursor: pointer; margin-bottom: 10px; text-align: center;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05); transition: background 0.2s;
}
.mobile-toggle-btn:hover { background: #f8fafc; }

/* --- CLOSE BUTTON (Hidden on Desktop) --- */
.close-filters-btn {
    display: none; /* Hidden by default */
    background: var(--text); border: 1px solid var(--text); color: white;
    font-size: 13px; font-weight: 700; cursor: pointer; padding: 8px 16px;
    border-radius: 6px; transition: all 0.2s; height: 35px;
}

/* --- BACK TO TOP BUTTON --- */
#back-to-top {
    position: fixed; bottom: 25px; right: 25px; width: 50px; height: 50px;
    background-color: var(--primary); color: white; border: none; border-radius: 50%;
    cursor: pointer; box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
    display: none; align-items: center; justify-content: center;
    font-size: 24px; z-index: 2000; transition: transform 0.2s, background-color 0.2s;
}
#back-to-top.visible { display: flex; animation: popIn 0.3s ease-out; }
#back-to-top:hover { background-color: #2563eb; transform: translateY(-3px); }
@keyframes popIn { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* --- INDEX PAGE: SIDEBAR & MAP --- */
#main-container { 
    display: flex; 
    flex-shrink: 0;
    
    /* CHANGED: Increased from 110px to 150px */
    /* This ensures the Header + Map fits exactly in the viewport, */
    /* pushing the footer just below the fold. */
    height: calc(100vh - 150px); 
    
    width: 100%;
    overflow: hidden; 
}
#sidebar { width: 350px; background: white; border-right: 1px solid var(--border); overflow-y: auto; }
#map { flex: 1; }

.location-item {
    padding: 0; border-bottom: 1px solid var(--border);
    cursor: pointer; background: white;
    display: flex; flex-direction: column; overflow: hidden;
}
.location-item:hover { background: #fcfdfe; }
.location-item.active { background: #f0f7ff; border-left: 4px solid var(--primary); }

.sidebar-content-top { padding: 15px 15px 10px 15px; }
.sidebar-title { margin: 0 0 4px 0; font-size: 16px; font-weight: 700; color: var(--text); }
.sidebar-meta { font-size: 12px; color: var(--gray); margin-bottom: 8px; }

/* --- FIX FOR SIDEBAR "ZOOMED" IMAGES --- */
.sidebar-image-full {
    width: 100%; 
    height: 88px;        /* Matches the 4:1 Python aspect ratio precisely */
    background: #f1f5f9; 
    display: block;      
    overflow: hidden;
    border-top: 1px solid var(--border);
}

.sidebar-image-full img { 
    width: 100%; 
    height: 100%; 
    /* 'contain' ensures the whole chart is visible without cropping */
    object-fit: contain; 
    /* Add a little padding so the line doesn't touch the very edges */
    padding: 5px 0;
    box-sizing: border-box;
    opacity: 0.9;
    display: block;
}

/* --- SITE BLURB (Desktop Default) --- */
.site-blurb {
    padding: 20px 15px; background: #eff6ff; border-bottom: 1px solid var(--border);
}
.site-blurb h2 { margin: 0 0 10px 0; font-size: 18px; font-weight: 800; color: var(--text); letter-spacing: -0.02em; }
.site-blurb p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--gray); }
.site-blurb strong { color: var(--primary); font-weight: 700; }
#location-list { flex: 1; overflow-y: auto; }
.mobile-only { display: none; } /* Hidden on desktop */

/* --- LIST PAGE --- */
#full-list-container {
    max-width: 1000px; margin: 0 auto; padding: 30px; width: 100%; box-sizing: border-box;
}
.list-row {
    background: white; border: 1px solid var(--border); border-radius: 12px;
    padding: 20px; margin-bottom: 15px; display: flex; align-items: center;
    cursor: pointer; transition: 0.2s; justify-content: space-between;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.list-row:hover {
    border-color: var(--primary); transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}
.row-info { flex: 1; min-width: 200px; }
.row-chart { 
    width: 300px; height: 80px; margin-left: 40px; flex-shrink: 0; 
    display: flex; align-items: center; justify-content: flex-end; 
}
.row-chart img { height: 100%; width: 100%; object-fit: contain; opacity: 0.8; }

/* --- COURSE PAGE --- */
.course-container {
    max-width: 900px; margin: 40px auto; background: white; border-radius: 16px; overflow: hidden;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); display: block; 
}
.course-header { padding: 30px; padding-bottom: 10px; border-bottom: 1px solid #f1f5f9; }
.title-area { margin-bottom: 20px; }
.back-link { 
    text-decoration: none; color: var(--gray); font-size: 11px; font-weight: 800; 
    text-transform: uppercase; letter-spacing: 0.05em; display: block; 
    margin-bottom: 10px; transition: color 0.2s;
}
.back-link:hover { color: var(--primary); }
.course-header h1 { font-size: 32px; margin: 5px 0 0 0; }
.stats-grid { display: flex; gap: 40px; margin-top: 10px; }
.stat-tile { display: flex; flex-direction: column; }
.stat-tile .label { font-size: 11px; font-weight: 700; color: var(--gray); letter-spacing: 0.05em; margin-bottom: 4px; }
.stat-tile .value { font-size: 24px; font-weight: 800; color: var(--text); }
.chart-container { padding: 20px; height: 300px; width: 100%; box-sizing: border-box; display: block; }
#elevationChart { width: 100%; height: 100%; }
#course-map { height: 400px; width: 100%; position: relative; }

/* --- BADGES & PINS --- */
.badge-container { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; }
.small-badges { margin-top: 5px; gap: 4px; }
.category-badge, .stat-badge {
    padding: 4px 10px; border-radius: 6px; font-size: 11px; font-weight: 800;
    text-transform: uppercase; display: inline-block; letter-spacing: 0.02em;
}
.stat-badge { background: #f1f5f9; color: var(--gray); border: 1px solid var(--border); }
.category-badge { color: white; }
.very-flat { background: #eab308; }
.flat { background: #10b981; }
.undulating { background: #3b82f6; }
.hilly { background: #ef4444; }
.very-hilly { background: #7f1d1d; }
.marker-pin {
    cursor: pointer; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.3)); transition: transform 0.2s;
}
.marker-pin:hover { transform: scale(1.15); z-index: 1000; }
.chart-tracker {
    width: 14px; height: 14px; background-color: #3b82f6; border: 2px solid white;
    border-radius: 50%; box-shadow: 0 2px 4px rgba(0,0,0,0.3); pointer-events: none;
}

/* --- HEADER ACTIONS --- */
.header-top-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0px; }
.header-actions { display: flex; align-items: center; gap: 12px; }
.website-link {
    font-size: 13px; font-weight: 600; color: var(--primary); text-decoration: none;
    padding: 8px 12px; border-radius: 6px; transition: background-color 0.2s;
    white-space: nowrap; display: inline-flex; align-items: center;
}
.website-link:hover { background-color: #eff6ff; text-decoration: underline; }
#share-btn {
    display: flex; align-items: center; gap: 8px; padding: 10px 18px;
    background-color: var(--primary); color: white; border: none; border-radius: 50px;
    font-size: 13px; font-weight: 700; cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 6px -1px rgba(59, 130, 246, 0.3), 0 2px 4px -1px rgba(59, 130, 246, 0.1);
}
#share-btn:hover { background-color: #2563eb; transform: translateY(-2px); box-shadow: 0 10px 15px -3px rgba(59, 130, 246, 0.4); }
#share-btn:active { transform: translateY(0); }
#share-btn svg { width: 16px; height: 16px; fill: currentColor; }

/* --- MAP RECENTER BUTTON --- */
#recenter-map-btn {
    position: absolute; 
    
    /* 1. Clear the zoom controls (approx 100px tall) */
    top: 120px; 
    
    /* 2. Move to the right side */
    right: 10px;       /* Matches MapLibre's default margin */
    left: auto;        /* crucial: overrides the previous 'left' setting */
    
    z-index: 10;
    width: 29px; height: 29px; background: white; border: 1px solid #ccc;
    border-radius: 4px; cursor: pointer; display: flex; align-items: center; justify-content: center;
    color: var(--text); box-shadow: 0 0 0 2px rgba(0,0,0,.1); transition: background 0.2s, color 0.2s;
}
#recenter-map-btn:hover { background: #f4f4f4; color: var(--primary); }

/* --- MAP POPUP STYLING --- */
.maplibregl-popup-content {
    padding: 0;
    border-radius: 8px; /* Tighter corners */
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
    background: #fff;
    min-width: 140px; /* Even narrower */
    max-width: 160px;
}
.popup-content { display: flex; flex-direction: column; gap: 10px; min-width: 140px; }
.popup-title {
    background: #f8fafc;
    margin: 0;
    padding: 10px 12px; /* Very tight padding */
    font-size: 13px;    /* Smaller title */
    font-weight: 700;
    color: var(--primary);
    border-bottom: 1px solid var(--border);
    text-align: center;
}
.popup-btn {
    display: inline-block; text-align: center; background-color: var(--primary); color: white !important;
    text-decoration: none; font-size: 11px; font-weight: 800; padding: 8px 12px;
    border-radius: 6px; text-transform: uppercase; letter-spacing: 0.05em;
    transition: background-color 0.2s, transform 0.1s;
}
.popup-btn:hover { background-color: #2563eb; transform: translateY(-1px); }

/* --- HEADER TITLE & SUBTITLE --- */
.title-wrapper { display: flex; flex-direction: column; justify-content: center; }
.header-subtitle {
    font-size: 11px; font-weight: 600; color: var(--gray);
    text-transform: uppercase; letter-spacing: 0.05em; margin-top: -2px;
}
.mobile-break { display: none; }

/* --- FOOTER SECTION (REORGANIZED & ENHANCED) --- */
.main-footer {
    background: white; padding: 30px 20px; border-top: 1px solid var(--border);
    margin-top: auto; flex-shrink: 0;
}
.footer-grid {
    max-width: 1100px; margin: 0 auto; display: grid;
    grid-template-columns: 220px 1fr 220px; align-items: center; gap: 20px;
}
.footer-column { display: flex; flex-direction: column; gap: 10px; }
.footer-column.center { text-align: center; }
.footer-column.side:last-child { align-items: flex-end; }
.footer-column.side:first-child { align-items: flex-start; }
.footer-logo { font-size: 18px; font-weight: 800; color: var(--text); margin-bottom: 5px; display: block; }
.footer-disclaimer { font-size: 12px; color: var(--gray); line-height: 1.5; margin: 0 auto; }
.footer-legal { margin-top: 5px; }
.footer-legal a { font-size: 11px; color: var(--gray); text-decoration: underline; transition: color 0.2s; }
.footer-legal a:hover { color: var(--primary); }

.support-btn {
    display: inline-flex !important; align-items: center !important; gap: 8px !important;
    background: linear-gradient(135deg, var(--primary) 0%, #2563eb 100%) !important;
    color: white !important; padding: 12px 20px !important; border-radius: 8px !important;
    text-decoration: none !important; font-weight: 700 !important; font-size: 14px !important;
    letter-spacing: 0.01em !important; border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 4px 6px -1px rgba(59, 130, 246, 0.3), 0 2px 4px -1px rgba(59, 130, 246, 0.1) !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.support-btn:hover {
    transform: translateY(-2px) !important; filter: brightness(1.1) !important;
    box-shadow: 0 10px 15px -3px rgba(59, 130, 246, 0.4) !important;
}
.support-btn svg { width: 16px !important; height: 16px !important; fill: currentColor; transition: transform 0.2s ease !important; }
.support-btn:hover svg { transform: scale(1.15); }

.correction-btn {
    color: var(--gray); font-size: 13px; font-weight: 600; text-decoration: none;
    padding: 8px 12px; border: 1px solid var(--border); border-radius: 6px;
    transition: all 0.2s; display: inline-block;
}
.correction-btn:hover { background: #fff1f2; color: #e11d48; border-color: #e11d48; }


/* =================================================================
   MASTER MOBILE OPTIMIZATION (768px and below)
   ================================================================= */
@media (max-width: 768px) {
    /* --- 1. GENERAL LAYOUT ADJUSTMENTS --- */
    .mobile-break { display: block !important; }
    
    #main-container { flex-direction: column !important; height: auto !important; overflow: visible !important; }
    #map { width: 100% !important; height: 450px !important; flex: none !important; }

    /* --- 2. REQUIREMENT 1: HIDE SIDEBAR LIST ON MAP (MOBILE) --- */
    /* Only hide sidebar on the map page, if you want it on other pages, remove .map-view-page */
    body.map-view-page #sidebar { display: none !important; }

    /* --- 3. REQUIREMENT 2 & 3: MAP PAGE FILTERS (COLLAPSIBLE + BLURB) --- */
    /* Show the Toggle Button on Map Page */
    body.map-view-page .mobile-toggle-btn { display: block !important; }

    /* Hide the Filter Bar by default on Map Page */
    body.map-view-page .filter-bar { 
        display: none; 
    }

    /* --- TIGHTEN MULTI-RACE POPUPS ON MOBILE --- */
@media (max-width: 768px) {
    .popup-title {
        padding: 10px 6px !important; /* Reduced from 16px */
        font-size: 13px !important;
    }

    .popup-races-list {
        max-height: 180px; /* Limits height to prevent cutting off */
        overflow-y: auto;  /* Adds scrollbar if too many races */
        padding: 2px !important;
        gap: 1px !important; /* Tighter gap between rows */
    }

    .popup-race-row {
        padding: 4px 8px !important; /* Reduced from 6px 8px */
        margin-bottom: 1px !important;
    }

    .race-btn-label {
        font-size: 10px !important; /* Slightly smaller text */
    }

    .maplibregl-popup {
        max-width: 240px !important; /* Ensure it stays narrow on small phones */
    }
}

    .correction-box {
        padding: 20px;
        border: none; /* Optional: cleaner look on mobile */
        box-shadow: none;
        background: transparent;
    }

    /* Style the Filter Bar when OPEN (Map Page) */
    body.map-view-page .filter-bar.open {
        display: flex !important;
        flex-direction: column !important;
        background: white !important;
        padding: 0 0 20px 0 !important; /* Padding for bottom content */
        margin: 10px !important;
        border: 1px solid var(--border) !important;
        border-radius: 12px !important;
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1) !important;
        gap: 6px !important;
        width: auto !important;
        align-items: flex-start !important;
        overflow: hidden !important; /* Clip content for rounded corners */
    }

    body.map-view-page .filter-group:has(#sortOrder) {
        display: none !important;
    }

    /* REQ 3: SHOW BLUE BLURB ON MAP MOBILE (Inside Filter Menu) */
    body.map-view-page .filter-bar.open .mobile-only {
        display: block !important;
        width: 100% !important;
        padding: 20px !important;
        background: #eff6ff !important;
        border-bottom: 1px solid var(--border) !important;
        box-sizing: border-box !important;
        margin-bottom: 5px !important;
        text-align: left !important;
    }
    
    /* Ensure internal inputs have padding since bar has 0 padding */
    body.map-view-page .filter-bar.open .filter-group,
    body.map-view-page .filter-bar.open .mobile-filter-actions {
        padding-left: 20px !important;
        padding-right: 20px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* --- 4. REQUIREMENT 4: LIST PAGE FILTERS (PERSISTENT / NOT FOLDING) --- */
    /* Force filters to display flex on list page */
    body.list-view-page .filter-bar {
        display: flex !important;
        flex-direction: column !important;
        background: white !important;
        padding: 15px !important;
        border-bottom: 1px solid var(--border) !important;
        gap: 12px !important;
        margin: 0 !important;
        width: 100% !important;
    }

    /* Hide the toggle button on List Page (since it's always open) */
    body.list-view-page .mobile-toggle-btn { display: none !important; }

    /* Hide the Blurb on List Page mobile filters (optional, prevents duplication) */
    body.list-view-page .mobile-only { display: none !important; }

    /* --- 5. REQUIREMENT 5: LIST IMAGES STACKED BELOW TEXT --- */
    .list-row { 
        flex-direction: column !important; 
        align-items: stretch !important; 
        padding: 15px !important;
        overflow: hidden !important;
    }

    .row-info { width: 100% !important; margin-bottom: 15px !important; }

    .row-chart {
        width: calc(100% + 30px) !important; /* Spans full width */
        margin: 0 -15px -15px -15px !important; /* Pulls to edges */
        height: 120px !important; 
        display: block !important; 
        background: #f1f5f9 !important;
    }

    .row-chart img { 
        width: 100% !important; height: 100% !important; 
        object-fit: cover !important; display: block !important; opacity: 1 !important; 
    }

    /* --- SHARED MOBILE STYLES (Inputs & Footer) --- */
    
    /* 1. Tighten spacing between label and input */
    .filter-group { 
        width: 100% !important; 
        gap: 2px !important;
        margin-bottom: 5px !important;
    }

    /* 2. Generic Input Styling (Text & Selects) */
    input[type="text"], select {
        width: 100% !important; 
        height: 36px !important; 
        font-size: 14px !important; 
        padding: 0 10px !important;
    }

    /* 3. FIX: Checkbox Specific Styling (Stop them from being huge) */
    input[type="checkbox"] {
        width: 20px !important; 
        height: 20px !important; 
        margin-right: 10px !important;
        cursor: pointer !important;
        display: inline-block !important;
        vertical-align: middle !important;
    }
    
    /* Ensure list items inside the dropdown align nicely */
    .dropdown-check-list .items li {
        display: flex !important;
        align-items: center !important;
        padding: 8px 0 !important;
    }

    /* 4. FIX: Vertically Center 'All Ireland' Text */
    .dropdown-check-list .anchor {
        width: 100% !important; 
        height: 36px !important; 
        font-size: 14px !important;
        padding: 0 10px !important;
        display: flex !important;         /* Enables Flexbox */
        align-items: center !important;   /* Vertically Centers Text */
        color: var(--text) !important;
    }

    /* 5. FIX: Horizontally Center 'Find Near Me' Button */
    #gps-btn {
        width: auto !important;           /* Let text dictate width */
        min-width: 140px !important;      /* Ensure it's not too small */
        align-self: center !important;    /* Centers item in Flex Column */
        margin: 10px auto !important;     /* Centers item in Block layout */
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }

    /* Actions Container (Reset + Close) */
    .mobile-filter-actions {
        display: flex !important; gap: 10px !important; width: 100% !important; margin-top: 5px !important;
    }
    .mobile-filter-actions .reset-btn, 
    .close-filters-btn {
        flex: 1 !important; display: flex !important; justify-content: center !important; align-items: center !important;
        height: 36px !important; margin: 0 !important;
    }
    .close-filters-btn { display: flex !important; }

    /* Footer Stacking */
    .footer-grid {
        grid-template-columns: 1fr !important; text-align: center !important; gap: 25px !important;
    }
    .footer-column { align-items: center !important; }
    .footer-column.side:first-child { flex-direction: row; justify-content: center; flex-wrap: wrap; }
    .support-btn { width: 100%; max-width: 320px; justify-content: center; }
}

/* --- CORRECTION PAGE LAYOUT --- */
.correction-main {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Start below header */
    padding: 40px 20px;
    background: var(--bg);
}

.correction-box {
    background: white;
    padding: 30px;
    border-radius: 12px;
    border: 1px solid var(--border);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 500px; /* Keeps the form from getting too wide on desktop */
}

/* Specific textarea styling to match your inputs */
textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 12px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s;
}

textarea:focus {
    border-color: var(--primary);
}

/* --- SHARE MODAL STYLES --- */
.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.5); z-index: 3000;
    display: flex; align-items: center; justify-content: center;
    backdrop-filter: blur(2px);
    animation: fadeIn 0.2s ease-out;
}

.modal-content {
    background: white; padding: 25px; border-radius: 16px;
    width: 90%; max-width: 350px; text-align: center;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    animation: scaleIn 0.2s ease-out;
}

.modal-content h3 { margin: 0 0 10px 0; font-size: 18px; color: var(--text); }
.modal-content p { margin: 0 0 20px 0; font-size: 14px; color: var(--gray); }

.share-options { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }

.share-choice-btn {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; padding: 12px; border: 1px solid var(--border);
    background: white; border-radius: 8px; font-size: 15px; font-weight: 600;
    cursor: pointer; transition: 0.2s; color: var(--text);
}

.share-choice-btn:hover { background: #f8fafc; border-color: var(--primary); color: var(--primary); }
.share-choice-btn .icon { font-size: 18px; }

.modal-cancel-btn {
    background: none; border: none; color: var(--gray); font-size: 13px;
    font-weight: 600; cursor: pointer; padding: 5px 10px;
}
.modal-cancel-btn:hover { color: var(--text); text-decoration: underline; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes scaleIn { from { transform: scale(0.95); opacity: 0; } to { transform: scale(1); opacity: 1; } }


/* --- FLOATING MAP LEGEND (Bottom Right) --- */
#legend {
    position: absolute;
    bottom: 25px;
    right: 25px;
    z-index: 1000; /* Ensure it stays above the map pins */
    
    background: white;
    padding: 12px 16px;
    border-radius: 12px;
    border: 1px solid var(--border);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    
    width: auto;
    min-width: 150px;
    pointer-events: auto; /* Allows users to interact if needed */
}

#legend h4 {
    margin: 0 0 8px 0;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--gray);
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 5px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}

.legend-color {
    width: 12px;
    height: 12px;
    border-radius: 50%; /* Makes it a dot like the markers */
    display: inline-block;
    border: 1px solid rgba(0,0,0,0.1);
}

/* --- Legend Color Mapping --- */
.legend-color.very-flat { background-color: #eab308; }
.legend-color.flat      { background-color: #10b981; }
.legend-color.undulating { background-color: #3b82f6; }
.legend-color.hilly      { background-color: #ef4444; }
.legend-color.very-hilly { background-color: #7f1d1d; }

/* --- MOBILE: Keep it as a bar at the bottom --- */
@media (max-width: 768px) {
    #legend {
        position: relative;
        bottom: 0;
        right: 0;
        width: 100%;
        border-radius: 0;
        border: none;
        border-top: 1px solid var(--border);
        box-shadow: none;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px 15px;
        padding: 10px;
    }
    #legend h4 { display: none; }
    .legend-item { margin: 0; font-size: 11px; }
}




/* --- ENHANCED SECTION LABELS --- */
.section-label {
    display: flex;
    align-items: center;
    gap: 10px;
    
    margin: 30px 20px 15px 20px; /* Spacing around the headers */
    padding-left: 12px;
    border-left: 4px solid var(--primary); /* Blue accent line */
    
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--gray);
}

.section-label svg {
    color: var(--primary); /* Makes the icon pop */
    opacity: 0.8;
}

/* Ensure mobile spacing remains tight */
@media (max-width: 768px) {
    .section-label {
        margin: 25px 15px 12px 15px;
        font-size: 12px;
    }
}

#course-map {
    height: 400px;
    width: 100%;
    position: relative;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.chart-container {
    padding: 20px;
    height: 300px;
    width: 100%;
    box-sizing: border-box;
    background: linear-gradient(to bottom, #ffffff, #f8fafc); /* Subtle fade */
}

/* --- MOBILE ONLY: Top-Left --- */
@media (max-width: 768px) {
    #recenter-map-btn {
        /* Move to Top-Left */
        top: 10px;
        left: 10px;
        
        /* Reset the 'Right' positioning from desktop */
        right: auto;
    }
}

/* --- INSTRUCTION HINTS (Desktop vs Mobile) --- */
.mobile-hint {
    display: none; /* Hidden by default (for desktop) */
}

@media (max-width: 768px) {
    .desktop-hint {
        display: none; /* Hide 'Hover' text on mobile */
    }
    .mobile-hint {
        display: inline; /* Show 'Touch' text on mobile */
    }
}

/* --- STYLED COURSE MARKER POPUPS --- */

/* 1. Override default popup container to be smaller/tighter */
.minimal-popup .maplibregl-popup-content {
    padding: 6px 10px !important;
    border-radius: 6px !important;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1) !important;
    min-width: auto !important; /* Allow it to shrink to text size */
}

/* 2. Style the text inside */
.popup-label {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: center;
    line-height: 1;
}

/* 3. Color matching */
.popup-label.start { color: #10b981; } /* Green */
.popup-label.finish { color: #ef4444; } /* Red */
.popup-label.loop { color: #f97316; }   /* Orange */

/* Optional: Hide the little triangle tip for a cleaner "floating" look */
/* .minimal-popup .maplibregl-popup-tip { display: none; } */

/* --- GOLDEN NET DOWNHILL BADGE --- */
.net-downhill {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); /* Gold Gradient */
    color: white !important;
    border: 1px solid #b45309;
    box-shadow: 0 2px 4px rgba(217, 119, 6, 0.2);
    text-shadow: 0 1px 1px rgba(0,0,0,0.1);
}

/* --- COURSE PAGE ACTION BUTTONS --- */
.action-btn {
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    padding: 8px 14px;
    border-radius: 6px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.action-btn.register { background: #10b981; color: white; border: 1px solid #059669; }
.action-btn.register:hover { background: #059669; transform: translateY(-1px); }

.action-btn.website { background: white; color: var(--primary); border: 1px solid var(--primary); }
.action-btn.website:hover { background: #eff6ff; }

.action-btn.email { background: white; color: var(--gray); border: 1px solid var(--border); }
.action-btn.email:hover { background: #f8fafc; color: var(--text); border-color: var(--gray); }

@media (max-width: 768px) {
    #dynamic-links { justify-content: center; }
    .action-btn { flex: 1; justify-content: center; }
}

/* --- HEADER ACTIONS REORGANIZATION --- */


.header-actions-links {
    display: flex;
    align-items: center;
    gap: 8px; /* Space between individual action buttons */
}

/* Base style for all action buttons */
.action-btn {
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    padding: 8px 14px;
    border-radius: 6px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

/* Specific Colors */
.action-btn.register { background: #10b981; color: white; border: 1px solid #059669; }
.action-btn.register:hover { background: #059669; transform: translateY(-1px); }

.action-btn.website { background: white; color: var(--primary); border: 1px solid var(--primary); }
.action-btn.website:hover { background: #eff6ff; }

.action-btn.email { background: white; color: var(--gray); border: 1px solid var(--border); }
.action-btn.email:hover { background: #f8fafc; color: var(--text); border-color: var(--gray); }

/* Mobile Optimizations */
@media (max-width: 768px) {

    


    .header-actions-links {
        flex-wrap: wrap;
        justify-content: center;
    }

    .action-btn, #share-btn {
        flex: 1;
        justify-content: center;
    }
}

.stats-grid {
    display: flex;            /* Switch from grid to flex */
    justify-content: flex-start; /* Force items to the left */
    gap:20px;                /* Consistent spacing between items */
    margin-top: 0px;
    flex-wrap: wrap;          /* Allows it to wrap nicely on mobile */
}

.stat-tile {
    display: flex;
    flex-direction: column;
    min-width: 80px;          /* Prevents text from squashing */
}


.row-info .stat-badge:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
    transition: all 0.2s ease;
}

/* Add this to style.css */
#dateRangeFilter {
    border: 1px solid var(--border);
    transition: all 0.2s ease;
}



.unit-switcher {
    font-family: 'Inter', sans-serif;
    user-select: none;
}
.unit-switcher input[type="radio"] {
    cursor: pointer;
    width: 16px;
    height: 16px;
}



/* Highlight standard selects, search box, and the custom location anchor when active */
.filter-group select.is-active,
#searchInput.is-active,
.dropdown-check-list .anchor.is-active {
    background-color: #f0f7ff !important;    /* Subtle soft blue tint */
    border-color: var(--accent) !important;  /* Indigo border */
    color: var(--accent) !important;         /* Indigo text */
    font-weight: 600;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1); /* Soft indigo glow */
}

/* Fix the arrow color for location dropdown when active */
.dropdown-check-list .anchor.is-active::after {
    border-left-color: var(--primary) !important;
}


.course-section {
    background: var(--surface);
    padding: 24px;
    border-radius: 12px;
    border: 1px solid var(--border);
    margin-bottom: 4px;
    margin-top: 20px;
}

.section-title {
    font-size: 18px;
    font-weight: 800;
    margin-bottom: 12px;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.description-content p {
    line-height: 1.6;
    color: #4b5563; /* Subtle gray-dark for readability */
    font-size: 15px;
    margin: 0;
}

.loading-text {
    font-style: italic;
    color: var(--gray);
}

/* --- Flex Container for Header + Button --- */
.header-action-container {
    display: flex;
    justify-content: space-between; /* Pushes button to the far right */
    align-items: center;           /* Centers them vertically */
    margin: 20px 30px 10px 0px;   /* Matches your site margins */
    padding-bottom: 10px;
}

/* Button Styling to match your theme */
.share-trigger-btn {
    display: flex;
    align-items: center;
    background: white;
    color: var(--text);
    border: 1px solid var(--border);
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.share-trigger-btn:hover {
    background: var(--surface);
    border-color: var(--primary);
    color: var(--primary);
}

/* Ensure the button stays hidden until the map is ready (as per your JS) */
.share-trigger-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* High-Spec Race Red Badge */
.badge-red {
    background-color: #6366f1 !important; /* Vibrant but professional red */
    color: white !important;
    border: none !important;
    font-weight: 700 !important;
    padding: 4px 10px;
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.5); /* Subtle red glow */
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.5px;
}

/* Ensure it still looks good on hover */
.badge-red:hover {
    background-color:  #6366f1!important;
    transform: translateY(-1px);
}


.chart-tracker {
    width: 12px;
    height: 12px;
    background-color: #3b82f6;
    border: 2px solid white;
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.6);
    pointer-events: none;
    z-index: 9999;
    
    /* REMOVE TRANSITION: We want instant updates now */
    transition: none; 
    will-change: transform;
}

/* --- 1. MapLibre Popup Overrides --- */
.maplibregl-popup {
    z-index: 1000;
}

/* --- SIMPLIFIED HIGH-SPEC POPUP --- */
.maplibregl-popup-content {
    padding: 0;
    border-radius: 12px;
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
    background: #fff;
    min-width: 180px; /* Narrower since we removed text */
}

.popup-title {
    background: #f8fafc;
    margin: 0;
    padding: 16px;
    font-size: 15px;
    font-weight: 700;
    color: var(--primary);
    border-bottom: 1px solid var(--border);
    text-align: center;
}

.popup-races-list {
    display: flex;
    flex-direction: column;
    padding: 4px; /* Minimal container padding */
    gap: 2px;
}

.popup-race-item {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Puts badge on left, arrow on right */
    text-decoration: none;
    padding: 10px 14px;
    border-radius: 8px;
    transition: all 0.2s ease;
    background: transparent;
}

.popup-race-item:hover {
    background: #f1f5f9;
    transform: translateX(3px);
}

.popup-race-item .race-dist {
    font-size: 11px;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: 5px;
    background-color: #ef4444; /* Standard Red Badge */
    color: white;
    text-transform: uppercase;
}

.popup-race-item .race-arrow {
    color: var(--accent);
    font-weight: bold;
    font-size: 14px;
    opacity: 0.4;
}

.popup-race-item:hover .race-arrow {
    opacity: 1;
}

/* --- style.css --- */

/* --- Tiny Single Button --- */
.popup-btn-single {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: var(--accent);
    color: white;
    text-decoration: none;
    
    padding: 5px 12px;    /* Ultra short height */
    margin: 6px auto;     /* Small gap from title */
    font-size: 10px;      /* Minimum readable size */
    width: fit-content;
    
    border-radius: 4px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    transition: all 0.2s ease;
}

/* --- Tiny Multi-Race Items --- */
.popup-race-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-decoration: none;
    padding: 6px 10px;    /* Slim rows */
    border-radius: 4px;
}

.popup-race-item .race-dist {
    font-size: 9px;       /* Tiny badges */
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 3px;
    background-color: #ef4444;
    color: white;
}

.popup-race-item .race-arrow {
    font-size: 12px;
    opacity: 0.4;
}

/* Ensure Sidebar and List popups use the tight button style */
.location-item .popup-btn-single, 
.list-row .action-btn {
    font-size: 10px;
    padding: 5px 12px;
    text-transform: uppercase;
    font-weight: 700;
}

/* --- style.css --- */

/* The shared row style for all popups */
.popup-race-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-decoration: none;
    padding: 6px 8px;
    margin-bottom: 2px;
    background: transparent;
    border-radius: 6px;
    transition: all 0.2s ease;
    gap: 8px;
}

.popup-race-row:hover {
    background: #f1f5f9;
    transform: translateX(2px);
}

/* The Distance Badge */
.popup-race-row .race-dist {
    font-size: 9px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 4px;
    background-color: #6366f1; /* Your badge-red color */
    color: white;
    min-width: 35px;
    text-align: center;
}

/* The "VIEW COURSE" label */
.popup-race-row .race-btn-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--accent); /* Indigo blue */
    text-transform: uppercase;
    letter-spacing: 0.3px;
    flex: 1; /* Pushes the arrow to the right */
}

/* The Arrow */
.popup-race-row .race-arrow {
    font-size: 12px;
    color: var(--accent);
    opacity: 0.5;
}

.popup-race-row:hover .race-arrow {
    opacity: 1;
}

/* --- Final Mobile Share Button Fix --- */
/* --- Final Nuke for Mobile Share Button Width --- */
@media (max-width: 600px) {
    .share-trigger-btn {
        /* 1. Force the button to be the size of the text ONLY */
        display: inline-flex !important; 
        width: max-content !important;   
        flex: none !important;           /* Stops the parent from stretching it */
        
        /* 2. Remove all width minimums */
        min-width: 0 !important;
        max-width: none !important;
        
        /* 3. Tighten the padding */
        padding: 5px 12px !important;
        
        /* 4. Push it to the far right */
        margin-left: auto !important;
        margin-right: 0 !important;

        /* 5. Typography */
        font-size: 11px !important;
        white-space: nowrap !important; /* Keeps text on one line */
    }

    /* Target the container to ensure it isn't centering or stretching children */
    .header-action-container {
        display: flex !important;
        flex-direction: row !important;  /* Ensure it doesn't stack vertically */
        justify-content: space-between !important; 
        align-items: center !important;
        width: auto !important;          /* Prevents the container itself from acting weird */
        padding: 0 15px !important;      /* Tighter side margins */
    }
}

/* --- Recommendations Section --- */
.recommendations-container {
    max-width: 1000px;
    margin: 40px auto;
    padding: 0 20px;
}

.recommendations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.rec-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px;
    text-decoration: none;
    color: var(--text);
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.rec-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow);
    border-color: var(--accent);
}

.rec-card h4 {
    margin: 0 0 8px 0;
    font-size: 16px;
    font-weight: 700;
}

.rec-meta {
    font-size: 13px;
    color: #64748b;
    display: flex;
    gap: 10px;
    margin-bottom: 12px;
}

.rec-distance-tag {
    font-size: 11px;
    font-weight: 800;
    background: #f1f5f9;
    padding: 2px 8px;
    border-radius: 4px;
    color: var(--primary);
    width: fit-content;
}

@media (max-width: 600px) {
    .recommendations-grid {
        grid-template-columns: 1fr;
    }
}

/* --- Recommendation Card Image Styling --- */
.rec-chart-wrapper {
    width: 100%;
    height: 80px; /* Adjust height based on your PNG aspect ratio */
    margin: 12px 0;
    background: #f8fafc; /* Placeholder background */
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rec-chart-img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Shows the full graph without cropping */
    display: block;
}

/* Optional: Add a subtle border to the image to make it pop */
.rec-card:hover .rec-chart-img {
    transform: scale(1.02);
    transition: transform 0.2s ease;
}

/* --- Tighten Header Spacing --- */
.header-top-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* Keeps title and buttons aligned to top */
    gap: 20px;
    margin-bottom: 8px; /* Reduced space below title/buttons */
}

/* Container for the 1-3 dynamic buttons */
.action-buttons-row {
    display: flex;
    flex-wrap: wrap; 
    gap: 8px;
    justify-content: flex-end; /* Keeps them together on the right */
    max-width: 450px; /* Prevents them from spreading too far */
}

/* --- Fix the "Cramped" Stats Section --- */
.course-stats-container {
    margin-top: 16px; /* Adds breathing room below the email/website buttons */
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border); /* Optional: subtle line to separate actions from stats */
}

/* Mobile Fixes */
@media (max-width: 600px) {


    .action-buttons-row {
        justify-content: flex-start; /* Align buttons left on mobile */
        width: 100%;
    }
    
    .course-stats-container {
        margin-top: 20px; /* Even more space on mobile for thumb-tapping */
    }
}

/* --- UNIFIED MOBILE LAYOUT (600px and below) --- */
@media (max-width: 600px) {
    /* 1. Tighten the area around the Title and Date */
    .header-top-row {
        flex-direction: column !important;
        gap: 4px !important; /* Closes the "canyon" above buttons */
        margin-bottom: 0 !important;
        align-items: flex-start !important;
    }

    .title-area h1 {
        font-size: 26px !important; /* Slightly smaller for mobile */
        margin-bottom: 0 !important;
    }

    #race-date-display {
        margin-top: 2px !important;
        margin-bottom: 8px !important; /* Buffer before the buttons start */
    }

    /* 2. Fix the Button row */
    .header-actions {
        width: 100% !important;
        margin-bottom: 24px !important; /* ADDS SPACE BELOW BUTTONS */
    }

    .action-buttons-row {
        justify-content: flex-start !important; /* Keeps buttons left-aligned */
        gap: 8px !important;
        width: 100% !important;
    }

    .action-btn {
        flex: 1 1 auto !important; /* Allows buttons to share width */
        min-width: 100px !important;
        justify-content: center !important;
    }

    /* 3. Give the Stats Grid breathing room */
    .stats-grid {
        margin-top: 10px !important; /* Extra gap from the buttons */
        padding-top: 15px !important;
        border-top: 1px solid var(--border) !important; /* Optional: adds a nice separator */
        gap: 20px 15px !important;
    }
}

/* Force the map to show the standard arrow cursor by default */
.maplibregl-canvas {
    cursor: default !important;
}

/* When the user is actually dragging the map, show the closed hand */
.maplibregl-map:active .maplibregl-canvas {
    cursor: grabbing !important;
}


Forces the labels to take up the exact same amount of horizontal space
.gender-label {
    display: inline-block;
    width: 18px;
    font-weight: 800;
    color: var(--accent);
}

.stat-sub-value {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 5px;
    font-size: 15px;
    font-weight: 700;
}

/* =================================================================
   FIXED: LAST YEAR'S WINNERS FLOATING SIDEBAR
   ================================================================= */

/* --- ULTRA-COMPACT WINNERS TILE --- */
.results-highlight {
    background: linear-gradient(145deg, #ffffff, #f0f4ff) !important;
    border: 1px solid #dbeafe !important;
    
    /* 1. Round the edges */
    border-radius: 12px;
    
    /* 2. Compact Layout */
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    
    /* 3. Padding: 4px top/bottom, 10px sides prevents clipping on rounded corners */
    padding: 4px 10px !important; 
    min-height: unset !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

.results-highlight .label {
    color: #1e40af !important;
    font-size: 9px;            /* Slightly smaller label */
    font-weight: 800;
    margin-bottom: 2px !important; /* Almost no space below title */
    text-transform: uppercase;
    line-height: 1;
}

.stat-value-group {
    display: flex;
    flex-direction: column;
    gap: 0px !important;       /* REMOVED space between M and F rows */
}

.gender-label {
    display: inline-block;
    width: 16px;               /* Narrower label box */
    font-weight: 800;
    font-size: 13px;
    color: var(--accent, #6366f1);
}

.stat-sub-value {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;           /* Slightly smaller font for times */
    font-weight: 700;
    margin-top: 0 !important;  /* REMOVED top margin */
    line-height: 1.2;          /* Tight line height */
}

/* --- CLEAN FOOTER NAVIGATION --- */
.footer-label {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--primary);
    margin-bottom: 15px;
    opacity: 0.6;
}

.footer-link {
    display: block;
    text-decoration: none;
    color: var(--text);
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 10px;
    transition: all 0.2s ease;
}

.footer-link:hover {
    color: var(--accent);
    transform: translateX(4px); /* Subtle nudge effect */
}

.donate-text {
    color: var(--accent);
    font-weight: 700;
}

/* Ensure the footer grid can handle the extra column */
.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr; /* Gives the description more room */
    gap: 40px;
    padding-top: 0px;
}

@media (max-width: 768px) {
    .footer-grid {
        grid-template-columns: 1fr; /* Stacks everything on mobile */
        gap: 30px;
    }
    .race-dist {
        /* Prevents the text inside the badge from wrapping */
        white-space: nowrap;
        font-size: 11px !important;
        padding: 2px 6px !important;
    }   
}

/* --- UPDATED FOOTER GRID --- */
.footer-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr 1fr; /* Gives middle column more breathing room */
    gap: 40px;
    align-items: start;
}

.footer-column.center {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.footer-column.end {
    text-align: right;
    align-items: flex-end;
}

.footer-blurb {
    font-size: 13px;
    color: var(--text);
    opacity: 0.7;
    margin-bottom: 20px;
    line-height: 1.6;
}

/* Map | List Links below the button */
.footer-nav-links {
    margin-top: 20px;
    display: flex;
    gap: 10px;
    align-items: center;
    font-size: 12px;
}

.footer-nav-links a {
    text-decoration: none;
    color: var(--primary);
    font-weight: 700;
    transition: color 0.2s;
}

.footer-nav-links a:hover {
    color: var(--accent);
}

.footer-nav-links .divider {
    color: var(--border);
    font-weight: 400;
}

/* Ensure right column links align right */
.footer-column.end .footer-link {
    margin-left: auto;
}

/* --- UPDATED MOBILE FOOTER --- */
@media (max-width: 768px) {
    .footer-grid {
        /* Side-by-side columns at the top */
        grid-template-columns: 1fr 1fr !important; 
        gap: 30px 20px;
    }

    /* Column 1: Partnerships (Hugs the Left) */
    .footer-column:nth-child(1) {
        order: 1;
        text-align: left;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    /* Column 3: Resources (Centered within the right-half of the screen) */
    .footer-column.end {
        order: 2;
        /* This centers the heading text and the column items */
        text-align: center !important; 
        display: flex !important;
        flex-direction: column;
        align-items: center !important; 
    }

    /* Remove any forced right-alignment on the label */
    .footer-column.end .footer-label {
        width: auto; 
        text-align: center !important;
        margin-left: 0;
        margin-right: 0;
    }

    /* Column 2: Blurb & Support (Full width at the bottom) */
    .footer-column.center {
        order: 3;
        grid-column: span 2;
        text-align: center;
        align-items: center;
        padding-top: 25px;
        margin-top: 10px;
        border-top: 1px solid var(--border);
    }

    /* Reset link margins so they don't push the centering off */
    .footer-link {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* --- AUTOMATIC ZEBRA STRIPING --- */

/* 1. Target every second item inside the list */
#location-list .location-item:nth-child(even) {
    background-color: #f8fafc !important; /* Light Slate Grey */
}

/* 2. Ensure every first/odd item is pure white */
#location-list .location-item:nth-child(odd) {
    background-color: #ffffff !important;
}

/* 3. CRITICAL: Ensure the 'Active' blue state wins over the zebra grey */
#location-list .location-item.active {
    background-color: #f0f7ff !important; 
    border-left: 4px solid var(--primary) !important;
}

/* 4. Optional: Subtle hover effect for better interactivity */
#location-list .location-item:hover {
    filter: brightness(0.98);
}

/* --- FIXED DESKTOP HEADER --- */
@media (min-width: 1024px) {
    .main-header {
        position: fixed; /* Changed from sticky to fixed */
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        z-index: 1000;
        background-color: white;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }

    /* When using 'fixed', the header no longer takes up space in the layout.
       We must add padding to the top of the page so the first race card 
       isn't hidden behind the header.
    */
    .list-view-page main {
        padding-top: 180px; /* Adjust this value to match your header's actual height */
    }

    /* Ensure the app-layout doesn't restrict the fixed positioning */
    .list-view-page {
        overflow-y: visible !important;
    }
}

/* --- FIXED INFO TOOLTIP STYLING --- */
.info-tooltip {
    position: relative;
    cursor: help;
    display: inline-block;
}

.info-tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 140%; 
    /* Changed from left: 50% to left: 0 */
    left: 0; 
    /* Removed translateX(-50%) to prevent shifting left */
    transform: none; 
    background-color: var(--primary);
    color: white;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: normal;
    /* Changed white-space to allow wrapping if the text is long */
    white-space: normal; 
    width: 180px; /* Fixed width prevents it from being too wide */
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 1000;
    box-shadow: var(--shadow);
}

/* The little triangle pointer (Adjusted to stay under the icon) */
.info-tooltip::before {
    content: "";
    position: absolute;
    top: -8px;
    left: 10px; /* Aligned with the start of the icon */
    border-width: 6px;
    border-style: solid;
    border-color: var(--primary) transparent transparent transparent;
    visibility: hidden;
    opacity: 0;
    z-index: 1000;
}

.info-tooltip:hover::after,
.info-tooltip:hover::before {
    visibility: visible;
    opacity: 1;
}

/* --- RESET HEADER FOR COURSE PAGE ONLY --- */
.app-layout:not(.list-view-page) .main-header {
    position: static !important;
    width: auto;
    box-shadow: none;
}

/* Ensure the course container doesn't have the large top padding 
   intended for the fixed list-view header */
.app-layout:not(.list-view-page) main {
    padding-top: 0 !important;
}

.results-count-box {
    padding: 12px 20px;
    background-color: #f8fafc; /* Light slate background */
    border-bottom: 1px solid #e2e8f0;
    font-size: 14px;
    font-weight: 600;
    color: #475569; /* Slate grey */
    display: flex;
    align-items: center;
    gap: 8px;
}

#race-count {
    color: #4f46e5; /* Indigo - matches your theme */
    font-size: 16px;
    font-weight: 800;
}

/* Optional: Pulse effect when the number changes */
@keyframes countPop {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); color: #10b981; }
    100% { transform: scale(1); }
}

.count-update {
    animation: countPop 0.3s ease-out;
}

/* --- COURSE PAGE SCROLL FIX --- */

/* 1. Ensure the app-layout doesn't trap height on course pages */
.app-layout:not(.map-view-page):not(.list-view-page) {
    height: auto !important;
    min-height: 100vh;
    overflow-y: visible !important;
}

/* 2. Define the scroll container used in your template */
.scroll-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: visible !important; /* Allow natural page scrolling */
    height: auto !important;
}

/* 3. Ensure the capture area (course-container) can expand */
#capture-area.course-container {
    height: auto !important;
    max-height: none !important;
    margin-bottom: 50px; /* Space before footer */
}

/* 4. Fix for ECharts container disappearing */
.chart-container {
    min-height: 300px; /* Ensure it has a minimum height to be visible */
    width: 100%;
}

.results-highlight {
    background: linear-gradient(145deg, #ffffff, #f0f4ff) !important;
    border: 1px solid #dbeafe !important;
    border-radius: 12px;
    padding: 8px 15px !important;
}

.gender-label {
    display: inline-block;
    width: 18px;
    font-weight: 800;
    color: var(--accent);
}

.stat-sub-value {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
}


/* --- FIXED RECOMMENDATIONS GRID --- */
.recommendations-grid {
    display: grid !important;
    /* Forces 3 columns on desktop while allowing them to shrink */
    grid-template-columns: repeat(3, 1fr) !important; 
    gap: 20px;
    margin-top: 20px;
    width: 100%;
}

.rec-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px;
    text-decoration: none;
    color: var(--text);
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    /* Ensures cards in the same row have equal height */
    height: 100%; 
}

/* Mobile: Stack them vertically when the screen is too narrow */
@media (max-width: 768px) {
    .recommendations-grid {
        grid-template-columns: 1fr !important;
    }
}


/* Brighter Reset Button for Sidebar */
.bright-reset-btn {
    background-color: #4970e3; /* Vibrant Orange */
    color: #ffffff;
    border: none;
    padding: 12px 24px;
    border-radius: 50px; /* Rounded pill shape */
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(255, 152, 0, 0.3);
    transition: all 0.2s ease;
    margin: 0 auto;
    display: block;
}

.bright-reset-btn:hover {
    background-color: #4970e3; /* Slightly darker on hover */
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 152, 0, 0.4);
}

.bright-reset-btn:active {
    transform: translateY(0);
}

/* --- RECOMMENDATIONS GRID FIX --- */
.recommendations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); /* Responsive columns */
    gap: 20px; /* Space between cards horizontally and vertically */
    padding: 10px 0;
}

/* Mobile-specific adjustments */
@media (max-width: 768px) {
    .recommendations-grid {
        display: flex; /* Switch to flex-column for better stacking control on mobile */
        flex-direction: column;
        gap: 15px; /* Explicit vertical spacing */
    }

    .recommendations-grid > * {
        margin-bottom: 5px; /* Extra safety margin */
        height: auto; /* Ensure cards don't have a fixed height forcing an overlap */
    }
}

#race-date-display {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    line-height: 1.2;
}

#race-date-display svg {
    /* Ensures the icon remains blue/primary color */
    color: var(--primary);
}

@media (max-width: 768px) {
    #race-date-display {
        font-size: 14px; /* Slightly smaller text for mobile */
        margin-top: 10px !important;
    }
}

/* --- MOBILE FILTER DRAWER STYLING --- */
@media (max-width: 768px) {
    /* 1. Hide the filter bar by default on mobile */
    .filter-bar {
        display: none; 
        flex-direction: column;
        width: 100%;
        background: #f8fafc;
        padding: 15px;
        border-bottom: 2px solid #e2e8f0;
        box-sizing: border-box;
    }

    /* 2. Show the filter bar ONLY when the 'active' class is added */
    .filter-bar.active {
        display: flex !important;
    }

    /* 3. Style the toggle button to be prominent */
    #mobile-filter-toggle {
        display: block;
        width: 100%;
        background-color: var(--primary);
        color: white;
        padding: 12px;
        border: none;
        font-weight: 700;
        cursor: pointer;
        text-align: center;
    }
}

/* Ensure it's always visible on Desktop */
@media (min-width: 769px) {
    .filter-bar {
        display: flex !important;
    }
    #mobile-filter-toggle {
        display: none;
    }
}

/* Styling for the temporary image header */
#temp-capture-header {
    display: none; /* Hidden on the actual website */
}

.is-capturing #temp-capture-header {
    display: block !important; /* Visible ONLY during image capture */
}

/* Hide UI elements from the final image */
.is-capturing .info-tooltip,
.is-capturing #recenter-map-btn,
.is-capturing #share-btn,
.is-capturing .share-trigger-btn,
.is-capturing .unit-switcher,
.is-capturing #dynamic-back-link,
.is-capturing .back-link {
    display: none !important;
}

/* Clean up the capture area padding */
.is-capturing {
    padding: 30px !important;
    box-shadow: none !important;
    background: white !important;
}