body {
        font-family: 'Poppins', sans-serif;
        background-color: #ffffff;
        color: #1f2937;
    }

    .main-container {
        max-width: 1024px;
        margin-left: auto;
        margin-right: auto;
        padding: 0 1rem;
    }

    /* Map + List Layout */
    .map-list-container {
        display: flex;
        flex-direction: column;
        /* Mobile height: 100vh - (Header 56px + Border 1px) */
        height: calc(100vh - 57px);
        overflow: hidden;
    }

    #map {
        z-index: 0;
    }

    /* Tablet height: 100vh - (Header 64px + Border 1px) */
    @media (min-width: 768px) {
        .map-list-container {
            height: calc(100vh - 65px);
        }
    }

    /* Desktop: Side-by-side layout */
    @media (min-width: 1024px) {
        .map-list-container {
            flex-direction: row;
            /* Desktop height: 100vh - (Header 80px + Border 1px) */
            height: calc(100vh - 81px);
        }

        #list-view {
            width: 350px;
            flex-shrink: 0;
            border-right: 1px solid #e5e7eb;
        }

        #map {
            flex: 1;
        }
    }

    /* Tablet and Mobile: Map on top, horizontal list on bottom */
    @media (max-width: 1023px) {
        #map {
            flex: 1;
            min-height: 0;
            order: 1;
        }

        #list-view {
            height: 176px;
            flex-shrink: 0;
            border-top: 1px solid #e5e7eb;
            overflow-x: hidden;
            overflow-y: hidden;
            order: 2;
        }
    }

    /* List View Styles */
    #list-view {
        background-color: #ffffff;
        overflow-y: auto;
    }

    .list-header {
        position: sticky;
        top: 0;
        background-color: white;
        border-bottom: 1px solid #e5e7eb;
        padding: 1rem;
        z-index: 10;
    }

    .list-content {
        padding: 1rem;
    }

    /* Tablet/Mobile: Horizontal scrolling list with inline header */
    @media (max-width: 1023px) {
        #list-view {
            overflow-y: hidden;
            overflow-x: auto;
            display: flex;
            flex-direction: row;
            align-items: center;
        }

        .list-header {
            position: static;
            padding: 0.75rem 1rem;
            border-bottom: none;
            border-right: 1px solid #e5e7eb;
            flex-shrink: 0;
            min-width: 140px;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .list-header h2 {
            font-size: 0.875rem;
            margin: 0;
        }

        .list-header p {
            font-size: 0.75rem;
            margin: 0.25rem 0 0 0;
        }

        .list-content {
            display: flex;
            flex-direction: row;
            gap: 0.75rem;
            padding: 0.5rem 1rem;
            overflow-x: auto;
            flex: 1;
        }
    }

    /* Area Card Styles */
    .area-card {
        background: white;
        border: 1px solid #e5e7eb;
        border-radius: 0.5rem;
        padding: 1rem;
        margin-bottom: 0.75rem;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .area-card:hover,
    .area-card.hover-active {
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
        transform: translateY(-4px);
        border-color: #1f2937;
        background-color: #f9fafb;
    }

    .area-card-title {
        font-size: 1.125rem;
        font-weight: 700;
        color: #1f2937;
        margin-bottom: 0.25rem;
    }

    .area-card-subtitle {
        font-size: 0.875rem;
        color: #6b7280;
        margin-bottom: 0.5rem;
    }

    .area-card-count {
        font-size: 0.75rem;
        color: #9ca3af;
    }

    /* Tablet/Mobile: Horizontal area cards */
    @media (max-width: 1023px) {
        .area-card {
            min-width: 280px;
            width: 280px;
            margin-bottom: 0;
            flex-shrink: 0;
        }
    }

    /* Crag Card Styles (matching landing page design) */
    .crag-list-card {
        flex-shrink: 0;
        width: 100%;
        margin-bottom: 0.75rem;
        display: block;
        transition: all 0.3s ease;
        border-radius: 0.5rem;
        background: white;
        padding: 0.5rem;
    }

    .crag-list-card:hover,
    .crag-list-card.hover-active {
        transform: translateY(-4px);
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    }

    .crag-list-card:hover .crag-list-card-top,
    .crag-list-card.hover-active .crag-list-card-top {
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    }

    .crag-list-card-top {
        position: relative;
        background-color: #f3f4f6;
        /* gray-100 */
        border-radius: 0.5rem;
        overflow: hidden;
        height: 144px;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    }

    .crag-list-card-meter {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .crag-list-card-meter-svg {
        width: 96px;
        height: 96px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 0.25rem;
    }

    .crag-list-content {
        background-color: white;
        padding-top: 0.75rem;
    }

    .crag-list-title {
        font-size: 1rem;
        font-weight: 600;
        color: #1f2937;
        line-height: 1.25;
        margin-bottom: 0.25rem;
    }

    .crag-list-location {
        display: flex;
        align-items: center;
        font-size: 0.875rem;
        color: #9ca3af;
        margin-bottom: 0.5rem;
    }




    /* Tablet/Mobile: Horizontal crag cards */
    @media (max-width: 1023px) {
        .crag-list-card {
            min-width: 200px;
            width: 200px;
            margin-bottom: 0;
        }

        .crag-list-card-top {
            height: 100px;
        }

        .crag-list-card-meter-svg {
            width: 64px;
            height: 64px;
        }

        .crag-list-title {
            font-size: 0.875rem;
        }

        .crag-list-location {
            font-size: 0.75rem;
        }


    }

    /* Custom scrollbar for list view */
    #list-view::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

    #list-view::-webkit-scrollbar-track {
        background: #f3f4f6;
    }

    #list-view::-webkit-scrollbar-thumb {
        background: #d1d5db;
        border-radius: 4px;
    }

    #list-view::-webkit-scrollbar-thumb:hover {
        background: #9ca3af;
    }

    /* Custom scrollbar for horizontal list content on mobile/tablet */
    @media (max-width: 1023px) {
        .list-content {
            /* Hide scrollbar for IE, Edge and Firefox */
            -ms-overflow-style: none;
            scrollbar-width: none;
        }

        .list-content::-webkit-scrollbar {
            display: none;
        }
    }

    /* Day selector tabs styling */
    .day-selector-container {
        position: absolute;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 1000;
        background: white;
        border-radius: 12px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        padding: 8px;
        display: flex;
        gap: 8px;
    }

    .day-selector-tab {
        padding: 8px 16px;
        border-radius: 8px;
        background: white;
        border: 1px solid #e5e7eb;
        cursor: pointer;
        transition: all 0.2s ease;
        font-size: 0.875rem;
        font-weight: 500;
        color: #6b7280;
        white-space: nowrap;
        flex-shrink: 0;
    }

    .day-selector-tab:hover {
        background: #f9fafb;
        border-color: #d1d5db;
    }

    .day-selector-tab.active {
        background: #1f2937;
        color: white;
        border-color: #1f2937;
    }

    /* Tablet breakpoint (768px to 1023px) */
    @media (min-width: 768px) and (max-width: 1023px) {
        .day-selector-container {
            bottom: 16px;
            padding: 7px;
            gap: 7px;
        }

        .day-selector-tab {
            padding: 7px 14px;
            font-size: 0.813rem;
        }
    }

    /* Mobile breakpoint (below 768px) */
    @media (max-width: 767px) {
        .day-selector-tab {
            padding: 6px 12px;
            font-size: 0.75rem;
        }

        .list-header {
            display: none !important;
        }
    }

    /* Small mobile screens (below 500px) - left-align with zoom controls and enable horizontal scroll */
    @media (max-width: 499px) {
        .day-selector-container {
            left: 10px;
            right: 10px;
            transform: none;
            bottom: 10px;
            padding: 6px;
            gap: 6px;
            overflow-x: auto;
            overflow-y: hidden;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
            /* Firefox */
            -ms-overflow-style: none;
            /* IE and Edge */
            scroll-behavior: smooth;
            /* Prevent map from capturing touch events */
            pointer-events: auto;
        }

        /* Hide scrollbar for Chrome, Safari and Opera */
        .day-selector-container::-webkit-scrollbar {
            display: none;
        }

        .day-selector-tab {
            padding: 6px 12px;
            font-size: 0.75rem;
            /* Ensure tabs can receive pointer events */
            pointer-events: auto;
        }
    }

    /* Cluster marker styles */
    .cluster-marker {
        background-color: rgba(255, 255, 255, 0.95);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 600;
        font-size: 14px;
        color: white;
        border: 3px solid white;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
        transition: transform 0.2s ease;
    }

    .cluster-marker:hover {
        transform: scale(1.1);
    }

    .cluster-small {
        width: 32px;
        height: 32px;
        font-size: 12px;
    }

    .cluster-medium {
        width: 42px;
        height: 42px;
        font-size: 14px;
    }

    .cluster-large {
        width: 52px;
        height: 52px;
        font-size: 16px;
    }

    /* Marker highlight styles */
    .marker-highlight {
        filter: drop-shadow(0 0 8px rgba(31, 41, 55, 0.8));
        animation: pulse-marker 1s infinite;
    }

    @keyframes pulse-marker {

        0%,
        100% {
            filter: drop-shadow(0 0 8px rgba(31, 41, 55, 0.8));
        }

        50% {
            filter: drop-shadow(0 0 12px rgba(31, 41, 55, 1));
        }
    }

    .cluster-marker-highlight {
        box-shadow: 0 4px 16px rgba(31, 41, 55, 0.6);
        border-color: #1f2937;
    }

    /* Tooltip styling */
    .leaflet-tooltip {
        background-color: white;
        border: none;
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        padding: 0;
        font-family: 'Poppins', sans-serif;
    }

    /* .leaflet-tooltip-left:before,
    .leaflet-tooltip-right:before {
        border: none;
    } */

    /* Map Loader Styles */
    .map-loader {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 1000;
        background: rgba(255, 255, 255, 0.9);
        padding: 1rem;
        border-radius: 50%;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        display: flex;
        align-items: center;
        justify-content: center;
        transition: opacity 0.2s ease;
        pointer-events: none;
    }

    .map-loader.hidden {
        opacity: 0;
    }

    .spinner {
        width: 32px;
        height: 32px;
        border: 3px solid #e5e7eb;
        border-top-color: #1f2937;
        border-radius: 50%;
        animation: spin 1s linear infinite;
    }

    @keyframes spin {
        to {
            transform: rotate(360deg);
        }
    }