@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
    html, body {
        height: 100%;
        margin: 0;
        padding: 0;
        font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen, Ubuntu, Cantarell, sans-serif;
        background-color: #f5f5f5;
    }
    body { margin:0; }
    #menu { background: #333; color:#fff; padding:8px 20px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); display: flex; align-items: center; justify-content: space-between; gap: 20px; }
    .menu-links { display: flex; align-items: center; gap: 20px; }
    #menu a { color:#fff; text-decoration:none; transition: color 0.3s; font-weight: 500; }
    #menu a:hover { color: #4CAF50; }
    .menu-right { display: flex; align-items: center; gap: 15px; }
    .menu-search { padding: 8px 14px; font-size: 0.9em; border: 1px solid #555; border-radius: 4px; background-color: #444; color: #fff; font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; transition: all 0.3s ease; min-width: 200px; }
    .menu-search::placeholder { color: #999; }
    .menu-search:focus { outline: none; border-color: #4CAF50; background-color: #3a3a3a; box-shadow: 0 0 6px rgba(76, 175, 80, 0.3); }
    .search-results-list { display: none; position: absolute; top: 100%; left: 0; right: 0; background: #2a2a2a; border: 1px solid #555; border-top: none; border-radius: 0 0 4px 4px; max-height: 240px; overflow-y: auto; z-index: 10000; box-shadow: 0 4px 12px rgba(0,0,0,0.5); }
    .search-result-item { padding: 8px 14px; color: #eee; font-size: 0.88em; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .search-result-item:hover { background: #3a3a3a; color: #fff; }

     .geolocation-panel {
         display: none; /* Hidden - geolocation moved to filter panel */
     }
    
    .geolocation-btn {
        padding: 6px 14px;
        background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
        color: white !important;
        border: 2px solid #45a049;
        border-radius: 4px;
        font-size: 0.85em;
        font-weight: 700;
        cursor: pointer;
        transition: all 0.3s ease;
        box-shadow: 0 2px 4px rgba(76, 175, 80, 0.25);
        white-space: nowrap;
    }
    
    .geolocation-btn:hover {
        background: linear-gradient(135deg, #45a049 0%, #3a8740 100%);
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(76, 175, 80, 0.4);
    }
    
    .geolocation-btn:active {
        transform: translateY(0);
    }
    
    .geolocation-btn:disabled {
        background: linear-gradient(135deg, #ccc 0%, #aaa 100%);
        cursor: not-allowed;
        opacity: 0.7;
    }
    
    .geolocation-status {
        font-size: 0.85em;
        color: #fff;
        font-weight: 500;
        white-space: nowrap;
    }
    
    .geolocation-status.success {
        color: #90EE90;
    }
    
     .geolocation-status.error {
         color: #FF6B6B;
     }
     
     /* Filters Button - Icon-only, always visible on map */
     .filters-btn {
         position: fixed;
         top: 70px;
         right: 10px;
         width: 40px;
         height: 40px;
         padding: 0;
         background: rgba(255, 255, 255, 0.85);
         color: #333;
         border: 1px solid rgba(200, 200, 200, 0.5);
         border-radius: 4px;
         font-size: 1.5em;
         font-weight: 700;
         cursor: pointer;
         z-index: 410;
         display: flex;
         align-items: center;
         justify-content: center;
         transition: all 0.3s ease;
         box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
     }
     
     .filters-btn:hover {
         background: rgba(255, 255, 255, 0.95);
         box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
     }
     
     .filters-btn:active {
         transform: scale(0.98);
     }
     
     /* Filters Panel - main container for all map filters */
     .filters-panel {
         position: fixed;
         right: 10px;
         top: 70px;
         background: white;
         border: 1px solid rgba(200, 200, 200, 0.6);
         border-radius: 4px;
         box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
         z-index: 405;
         display: none;
         width: 280px;
         max-width: 90vw;
         max-height: 500px;
         overflow-y: auto;
     }
     
     .filters-panel.open {
         display: flex;
         flex-direction: column;
     }
     
     .filters-panel-header {
         padding: 8px 12px;
         border-bottom: 1px solid #e0e0e0;
         display: flex;
         justify-content: flex-end;
         align-items: center;
         background: #f9f9f9;
         flex-shrink: 0;
     }
     
     .filters-panel-close {
         background: none;
         border: none;
         font-size: 20px;
         cursor: pointer;
         color: #666;
         padding: 0;
         width: 24px;
         height: 24px;
         transition: color 0.2s ease;
     }
     
     .filters-panel-close:hover {
         color: #333;
     }
     
     .filters-panel-content {
         padding: 15px;
         overflow-y: auto;
     }
     
     /* Individual filter section - for each filter type */
     .filter-section {
         margin-bottom: 15px;
         padding-bottom: 15px;
         border-bottom: 1px solid #e0e0e0;
     }
     
     .filter-section:last-child {
         border-bottom: none;
         margin-bottom: 0;
         padding-bottom: 0;
     }
     
     .filter-section h4 {
         margin: 0 0 10px 0;
         font-size: 0.95em;
         color: #333;
         font-weight: 600;
     }
     
     /* Geolocation Section inside Filters Panel */
     .filter-geolocation-section {
         /* Inherits from .filter-section */
     }
     
     .geolocation-btn-inline {
         width: 100%;
         padding: 8px 12px;
         background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
         color: white;
         border: 2px solid #45a049;
         border-radius: 4px;
         font-size: 0.9em;
         font-weight: 700;
         cursor: pointer;
         transition: all 0.3s ease;
         box-shadow: 0 2px 4px rgba(76, 175, 80, 0.25);
         display: block;
         box-sizing: border-box;
     }
     
     .geolocation-btn-inline:hover {
         background: linear-gradient(135deg, #45a049 0%, #3a8740 100%);
         transform: translateY(-2px);
         box-shadow: 0 4px 8px rgba(76, 175, 80, 0.4);
     }
     
     .geolocation-btn-inline:active {
         transform: translateY(0);
     }
     
     .geolocation-status-inline {
         display: block;
         margin-top: 8px;
         font-size: 0.85em;
         color: #666;
         text-align: center;
     }
     
     .geolocation-status-inline.success {
         color: #4CAF50;
         font-weight: 500;
     }
     
     .geolocation-status-inline.error {
         color: #FF6B6B;
         font-weight: 500;
     }
     
     /* Distance/Driving Time Filter Section */
     .filter-distance-section {
         /* Inherits from .filter-section */
     }
     
     .distance-filter-disabled-message {
         text-align: center;
         color: #999;
         font-size: 0.85em;
         margin: 10px 0;
     }
     
     /* Filter Controls (time filter, and future controls) */
     .filter-controls {
         display: none; /* Hidden until location is obtained */
     }
     
     .filter-controls.visible {
         display: block;
     }
     
     /* Elevation Filter Styles */
     .elevation-filter-display {
         text-align: center;
         font-size: 0.9em;
         font-weight: 600;
         color: #4CAF50;
         margin-bottom: 8px;
     }
     
     .elevation-filter-slider {
         width: 100%;
         height: 5px;
         border-radius: 3px;
         background: linear-gradient(to right, #e0e0e0, #e0e0e0);
         outline: none;
         -webkit-appearance: none;
         margin: 8px 0;
     }
     
     .elevation-filter-slider::-webkit-slider-thumb {
         -webkit-appearance: none;
         appearance: none;
         width: 14px;
         height: 14px;
         border-radius: 50%;
         background: #4CAF50;
         cursor: pointer;
         transition: all 0.2s ease;
         box-shadow: 0 2px 4px rgba(76, 175, 80, 0.3);
     }
     
     .elevation-filter-slider::-webkit-slider-thumb:hover {
         background: #45a049;
         box-shadow: 0 4px 8px rgba(76, 175, 80, 0.5);
         transform: scale(1.2);
     }
     
     .elevation-filter-slider::-moz-range-thumb {
         width: 14px;
         height: 14px;
         border-radius: 50%;
         background: #4CAF50;
         cursor: pointer;
         border: none;
         transition: all 0.2s ease;
         box-shadow: 0 2px 4px rgba(76, 175, 80, 0.3);
     }
     
     .elevation-filter-slider::-moz-range-thumb:hover {
         background: #45a049;
         box-shadow: 0 4px 8px rgba(76, 175, 80, 0.5);
         transform: scale(1.2);
     }
     
     .elevation-filter-progress {
         display: none;
         text-align: center;
         font-size: 0.75em;
         color: #999;
         margin-top: 4px;
     }
     
     .elevation-filter-progress.visible {
         display: block;
     }
     
     .elevation-filter-button {
         width: 100%;
         padding: 6px 10px;
         background-color: #4CAF50;
         color: white;
         border: none;
         border-radius: 4px;
         font-size: 0.75em;
         font-weight: 700;
         cursor: pointer;
         transition: all 0.3s ease;
         margin-top: 8px;
     }
     
     .elevation-filter-button:hover {
         background-color: #45a049;
         transform: translateY(-1px);
     }
     
     .elevation-filter-button:active {
         transform: translateY(0);
     }
     
     /* Time Filter Control Styles */
      .time-filter-control {
          background-color: rgba(255, 255, 255, 0.85) !important;
          border: 1px solid rgba(200, 200, 200, 0.6) !important;
          border-radius: 4px !important;
          padding: 8px !important;
          box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1) !important;
          margin: 10px 10px 0 0 !important;
          min-width: auto;
          z-index: 400;
      }
      
      .time-filter-content {
          display: flex;
          flex-direction: column;
          gap: 5px;
          font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      }
      
      .time-filter-content label {
          display: none;
      }
      
      .time-filter-display {
          text-align: center;
          font-size: 0.9em;
          font-weight: 700;
          color: #4CAF50;
          padding: 2px 0;
          min-height: auto;
          line-height: 1;
      }
      
      .time-filter-slider {
          width: 140px;
          height: 5px;
          border-radius: 2px;
          background: linear-gradient(to right, #ddd 0%, #ddd 100%);
          outline: none;
          -webkit-appearance: none;
          appearance: none;
      }
      
      .time-filter-slider::-webkit-slider-thumb {
          -webkit-appearance: none;
          appearance: none;
          width: 14px;
          height: 14px;
          border-radius: 50%;
          background: #4CAF50;
          cursor: pointer;
          box-shadow: 0 1px 3px rgba(76, 175, 80, 0.5);
          transition: all 0.2s ease;
      }
      
      .time-filter-slider::-webkit-slider-thumb:hover {
          background: #45a049;
          box-shadow: 0 2px 5px rgba(76, 175, 80, 0.7);
      }
      
      .time-filter-slider::-moz-range-thumb {
          width: 14px;
          height: 14px;
          border-radius: 50%;
          background: #4CAF50;
          cursor: pointer;
          border: none;
          box-shadow: 0 1px 3px rgba(76, 175, 80, 0.5);
          transition: all 0.2s ease;
      }
      
      .time-filter-slider::-moz-range-thumb:hover {
          background: #45a049;
          box-shadow: 0 2px 5px rgba(76, 175, 80, 0.7);
      }
      
      .time-filter-range {
          display: none;
      }
      
      .time-filter-progress {
          font-size: 0.75em;
          color: #666;
          text-align: center;
          min-height: 16px;
          padding: 2px 0;
          line-height: 1.2;
      }
      
      .time-filter-button {
          padding: 4px 10px;
          background-color: #4CAF50;
          color: white;
          border: none;
          border-radius: 3px;
          font-size: 0.75em;
          font-weight: 600;
          cursor: pointer;
          transition: all 0.3s ease;
          margin: 0;
          white-space: nowrap;
      }
      
      .time-filter-button:hover {
          background-color: #45a049;
          transform: translateY(-1px);
          box-shadow: 0 2px 4px rgba(76, 175, 80, 0.4);
      }
      
      .time-filter-button:active {
          transform: translateY(0);
      }
     
      #map { height: 95vh; width: 100%; }
       .station-label {
           font-weight: bold;
           color: black;
           text-shadow: 1px 1px 2px white;
           cursor: pointer;
           user-select: none;
           pointer-events: auto;
       }
      
      /* Hide tooltips for resorts outside filter radius */
      .tooltip-hidden {
          display: none !important;
      }
      
      .massif-name-label {
         font-weight: bold;
         font-size: 12px;
         color: #333;
         text-align: center;
         text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8);
         pointer-events: none;
         white-space: nowrap;
         display: inline-block;
         transform: translateX(-50%);
         margin-left: 0;
     }
     
     .massif-name-marker {
         background: transparent !important;
         border: none !important;
     }
    
    /* Trail Tool Styles */
    #trail-tool-container {
        max-width: 1200px;
        margin: 40px auto;
        padding: 0 20px;
    }
    
    h1 {
        color: #333;
        text-align: center;
        margin-bottom: 40px;
        font-size: 2.5em;
    }
    
    h2 {
        color: #444;
        margin-top: 30px;
        margin-bottom: 20px;
        padding-bottom: 10px;
        border-bottom: 3px solid #4CAF50;
        font-size: 1.8em;
    }
    
    #water-reminder-section,
    #pace-converter-section,
    #vma-section,
    #heart-rate-zone-section {
        background: white;
        border-radius: 8px;
        padding: 30px;
        margin-bottom: 30px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
    
    form div {
        margin-bottom: 15px;
    }
    
    label {
        display: block;
        margin-bottom: 8px;
        color: #555;
        font-weight: 600;
        font-size: 1em;
    }
    
    input[type="number"] {
        width: 100%;
        padding: 12px;
        border: 2px solid #e0e0e0;
        border-radius: 4px;
        font-size: 1em;
        transition: border-color 0.3s;
        box-sizing: border-box;
    }
    
    input[type="number"]:focus {
        outline: none;
        border-color: #4CAF50;
        box-shadow: 0 0 5px rgba(76, 175, 80, 0.3);
    }
    
    button {
        padding: 12px 24px;
        margin-right: 10px;
        margin-top: 10px;
        background-color: #4CAF50;
        color: white;
        border: none;
        border-radius: 4px;
        font-size: 1em;
        font-weight: 600;
        cursor: pointer;
        transition: background-color 0.3s, transform 0.1s;
    }
    
    button:hover:not(:disabled) {
        background-color: #45a049;
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    }
    
    button:active:not(:disabled) {
        transform: translateY(0);
    }
    
    button:disabled {
        background-color: #cccccc;
        cursor: not-allowed;
    }
    
    .status-message {
        margin-top: 15px;
        padding: 12px;
        border-radius: 4px;
        font-weight: 600;
        min-height: 20px;
    }
    
    .status-message.success {
        background-color: #e8f5e9;
        border-left: 4px solid #4CAF50;
    }
    
    .status-message.error {
        background-color: #ffebee;
        border-left: 4px solid #f44336;
    }
    
    .status-message.info {
        background-color: #e3f2fd;
        border-left: 4px solid #2196F3;
    }
    
    #vma-results table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 15px;
    }
    
    #vma-results th,
    #vma-results td {
        padding: 12px;
        text-align: left;
        border-bottom: 1px solid #e0e0e0;
    }
    
    #vma-results th {
        background-color: #4CAF50;
        color: white;
        font-weight: 600;
    }
    
    #vma-results tr:hover {
        background-color: #f9f9f9;
    }
    
    #vma-results td {
        font-size: 1.05em;
    }
    
    #vma-results tr:nth-child(even) {
        background-color: #f9f9f9;
    }
    
    .error-message {
        color: #f44336; /* Red color for errors */
        font-size: 0.85em; /* Slightly smaller text */
        margin-top: 5px;
        display: block; /* Ensure it takes its own line */
        min-height: 1.2em; /* Reserve space to prevent layout shifts */
    }
    
    #heart-rate-zones-results table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 15px;
    }
    
    #heart-rate-zones-results th,
    #heart-rate-zones-results td {
        padding: 12px;
        text-align: left;
        border-bottom: 1px solid #e0e0e0;
    }
    
    #heart-rate-zones-results th {
        background-color: #4CAF50;
        color: white;
        font-weight: 600;
    }
    
    #heart-rate-zones-results tr:hover {
        background-color: #f9f9f9;
    }
    
    #heart-rate-zones-results tr:nth-child(even) {
        background-color: #f9f9f9;
    }
    
    .info-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 20px;
        height: 20px;
        margin-left: 10px;
        background-color: #2196F3;
        color: white;
        border-radius: 50%;
        font-size: 0.9em;
        font-weight: bold;
        cursor: help;
        position: relative;
    }
    
    .info-icon:hover::after {
        content: attr(title);
        position: absolute;
        bottom: 125%;
        left: 50%;
        transform: translateX(-50%);
        background-color: #333;
        color: white;
        padding: 12px;
        border-radius: 4px;
        white-space: normal;
        width: 250px;
        font-size: 0.85em;
        z-index: 1000;
        box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    }
    
    .info-icon:hover::before {
        content: '';
        position: absolute;
        bottom: 115%;
        left: 50%;
        transform: translateX(-50%);
        border: 6px solid transparent;
        border-top-color: #333;
        z-index: 1000;
    }
    
    /* Leaflet popup styles */
    .leaflet-popup-content {
        font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen, Ubuntu, Cantarell, sans-serif;
    }

    .popup-buttons {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin: 12px 0;
    }
    
    .popup-button {
        display: inline-block;
        padding: 10px 18px;
        background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
        color: #ffffff !important;
        text-decoration: none !important;
        border-radius: 6px;
        font-size: 0.95em;
        font-weight: 700;
        transition: all 0.3s ease;
        border: 2px solid #0056b3;
        cursor: pointer;
        white-space: nowrap;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        box-shadow: 0 2px 4px rgba(0, 123, 255, 0.25);
    }
    
    .popup-button:hover {
        background: linear-gradient(135deg, #0056b3 0%, #003d82 100%);
        transform: translateY(-3px);
        box-shadow: 0 6px 12px rgba(0, 86, 179, 0.4);
    }
    
    .popup-button:active {
        transform: translateY(-1px);
        box-shadow: 0 3px 6px rgba(0, 86, 179, 0.3);
    }
    
    .popup-info {
        display: flex;
        flex-direction: column;
        gap: 6px;
        margin: 8px 0;
        font-size: 0.95em;
        color: #333;
    }
    
    .popup-info-item {
        display: flex;
        align-items: center;
        gap: 8px;
    }
    
    .popup-info-item strong {
        min-width: 120px;
        color: #555;
    }
    
    .popup-separator {
        margin: 10px 0;
        border-top: 1px solid #e0e0e0;
    }

    .weather-loading,
    .weather-error {
        text-align: center;
        font-style: italic;
        color: #888;
        padding: 8px 0;
        font-size: 0.9em;
    }

    .weather-error {
        color: #c0392b;
    }

    .weather-day-header {
        font-weight: 700;
        background: #f0f4f8;
        padding: 4px 8px;
        margin-top: 8px;
        border-radius: 4px;
        font-size: 0.9em;
        color: #2c3e50;
    }

    .weather-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 0.82em;
        margin-bottom: 4px;
    }

    .weather-table td {
        padding: 3px 6px;
        border-bottom: 1px solid #f0f0f0;
        white-space: nowrap;
    }

    .weather-table td:first-child {
        font-weight: 600;
        color: #555;
        width: 42px;
    }

    .weather-row-wet td {
        background: #e8f4fd;
    }

    .weather-row-snow td {
        background: #f0eaff;
    }
    
    /* Logo Styles */
    .logo-link {
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        transition: transform 0.3s ease;
    }
    
    .logo-link:hover {
        transform: scale(1.05);
    }
    
    .logo {
        height: 40px;
        width: auto;
        transition: all 0.3s ease;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        border-radius: 4px;
    }
    
     .logo:hover {
         box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
     }
     
     /* Hamburger button (hidden on desktop) */
     .hamburger-btn {
         display: none;
         flex-direction: column;
         gap: 5px;
         background: none;
         border: none;
         cursor: pointer;
         padding: 8px;
     }
     
     .hamburger-btn span {
         display: block;
         width: 25px;
         height: 3px;
         background-color: #fff;
         border-radius: 2px;
         transition: all 0.3s ease;
     }
     
     .hamburger-btn:hover span {
         background-color: #4CAF50;
     }
     
     /* Mobile menu (hidden by default) */
     .mobile-menu {
         display: none;
         position: fixed;
         top: 0;
         left: 0;
         right: 0;
         bottom: 0;
         background-color: rgba(0, 0, 0, 0.5);
         z-index: 999;
         opacity: 0;
         transition: opacity 0.3s ease;
     }
     
     .mobile-menu.active {
         display: flex;
         opacity: 1;
     }
     
     .mobile-menu-content {
         background-color: #333;
         width: 80%;
         height: 100vh;
         padding: 20px;
         display: flex;
         flex-direction: column;
         box-shadow: 2px 0 10px rgba(0, 0, 0, 0.3);
         animation: slideIn 0.3s ease;
     }
     
     @keyframes slideIn {
         from {
             transform: translateX(-100%);
         }
         to {
             transform: translateX(0);
         }
     }
     
     .mobile-menu-close {
         align-self: flex-end;
         background: none;
         border: none;
         color: #fff;
         font-size: 28px;
         cursor: pointer;
         padding: 5px 10px;
         margin-bottom: 20px;
         transition: color 0.3s ease;
     }
     
     .mobile-menu-close:hover {
         color: #4CAF50;
     }
     
     .mobile-nav {
         display: flex;
         flex-direction: column;
         gap: 15px;
         flex: 1;
     }
     
     .mobile-nav a {
         color: #fff;
         text-decoration: none;
         font-size: 1.1em;
         font-weight: 500;
         padding: 10px 0;
         border-bottom: 1px solid #555;
         transition: color 0.3s ease;
     }
     
     .mobile-nav a:hover {
         color: #4CAF50;
     }
     
      /* Responsive menu search */
      /* ========== TABLET: 480px - 768px ========== */
      @media (min-width: 480px) and (max-width: 768px) {
           .hamburger-btn {
               display: flex;
           }
           
           .menu-links {
               display: none;
           }
           
           .menu-right { gap: 10px; }
           .menu-search { min-width: 120px; font-size: 0.85em; padding: 6px 10px; }
           #menu { padding: 8px 12px; gap: 10px; }
           .logo { height: 32px; }
           .geolocation-btn { padding: 6px 12px; font-size: 0.85em; }
           .geolocation-status { display: none; }
       }

      /* ========== PHONE: < 480px ========== */
      @media (max-width: 479px) {
           .hamburger-btn {
               display: flex;
           }
           
           .menu-links {
               display: none;
           }
           
           /* Compact phone layout */
           .menu-right { gap: 6px; flex-wrap: nowrap; }
           .menu-search { min-width: 90px; font-size: 0.8em; padding: 6px 8px; }
           #menu { padding: 6px 8px; gap: 6px; }
           .logo { height: 28px; }
           
           /* Icon-only geolocation button on phones */
           .geolocation-btn {
               padding: 6px 10px;
               font-size: 1em;
               font-weight: normal;
               min-width: auto;
               width: auto;
           }
           
           /* Hide the text, show only emoji icon */
           .geolocation-btn::before {
               content: '📍';
           }
           
           .geolocation-btn {
               color: transparent;
               font-size: 0;
           }
           
           .geolocation-btn::before {
               font-size: 1em;
               color: white;
           }
           
            .geolocation-status { display: none; }
            
            /* Mobile filters button */
            .filters-btn {
                width: 36px;
                height: 36px;
                top: 60px;
            }
            
            /* Mobile filters panel */
            .filters-panel {
                width: calc(100vw - 20px);
                right: 10px;
                top: 60px;
                max-height: calc(100vh - 120px);
            }
        }

       /* ========== BRA PANEL STYLES ========== */
      /* Right-side drawer panel for BRA data display */
      .bra-panel {
          position: fixed;
          right: 0;
          top: 56px; /* Account for menu height */
          height: calc(100vh - 56px); /* Adjust height to not cover menu */
          background: white;
          box-shadow: -4px 0 12px rgba(0, 0, 0, 0.15);
          z-index: 999;
          display: flex;
          flex-direction: column;
          transform: translateX(100%); /* Hidden by default */
      }

      .bra-panel.open {
          transform: translateX(0); /* Slide in when open */
      }

      /* Panel header with title and close button */
      .bra-panel-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 20px;
          border-bottom: 1px solid #e0e0e0;
          flex-shrink: 0;
          background: #f9f9f9;
      }

      .bra-panel-header h2 {
          margin: 0;
          font-size: 1.3em;
          color: #333;
          flex: 1;
          word-break: break-word;
      }

      /* Close button styling */
      .bra-panel-close {
          background: none;
          border: none;
          font-size: 24px;
          cursor: pointer;
          color: #666;
          padding: 0;
          width: 32px;
          height: 32px;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: color 0.2s ease;
          flex-shrink: 0;
      }

      .bra-panel-close:hover {
          color: #333;
      }

      .bra-panel-close:active {
          color: #000;
      }

      /* Panel content area with scrolling */
      .bra-panel-content {
          flex: 1;
          overflow-y: auto;
          padding: 20px;
      }

      /* Desktop: Panel width 380px */
      @media (min-width: 769px) {
          .bra-panel {
              width: 380px;
          }
      }

      /* Mobile: 90% width drawer effect */
      /* Reset All Filters Button */
      .filters-reset-button {
          width: 100%;
          padding: 8px 10px;
          background-color: #f0f0f0;
          color: #333;
          border: 1px solid #ddd;
          border-radius: 4px;
          font-size: 0.85em;
          font-weight: 500;
          cursor: pointer;
          transition: all 0.3s ease;
          margin-top: 12px;
      }
      
      .filters-reset-button:hover {
          background-color: #e0e0e0;
          border-color: #999;
      }
      
      .filters-reset-button:active {
          transform: scale(0.98);
      }

      @media (max-width: 768px) {
           .bra-panel {
               width: 90%;
               max-width: 100%;
           }
       }

      /* ========== SKI RESORT PANEL STYLES ========== */
      /* Right-side drawer panel for ski resort data display */
      .ski-resort-panel {
          position: fixed;
          right: 0;
          top: 56px; /* Account for menu height */
          height: calc(100vh - 56px); /* Adjust height to not cover menu */
          background: white;
          box-shadow: -4px 0 12px rgba(0, 0, 0, 0.15);
          z-index: 999;
          display: flex;
          flex-direction: column;
          transform: translateX(100%); /* Hidden by default */
      }

      .ski-resort-panel.open {
          transform: translateX(0); /* Slide in when open */
      }

      /* Panel header with title and close button */
      .ski-resort-panel-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 20px;
          border-bottom: 1px solid #e0e0e0;
          flex-shrink: 0;
          background: #f9f9f9;
      }

      .ski-resort-panel-header h2 {
          margin: 0;
          font-size: 1.3em;
          color: #333;
          flex: 1;
          word-break: break-word;
      }

      /* Close button styling */
      .ski-resort-panel-close {
          background: none;
          border: none;
          font-size: 24px;
          cursor: pointer;
          color: #666;
          padding: 0;
          width: 32px;
          height: 32px;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: color 0.2s ease;
          flex-shrink: 0;
      }

      .ski-resort-panel-close:hover {
          color: #333;
      }

      .ski-resort-panel-close:active {
          color: #000;
      }

      /* Panel content area with scrolling */
      .ski-resort-panel-content {
          flex: 1;
          overflow-y: auto;
          padding: 20px;
      }

      /* Desktop: Panel width 380px */
      @media (min-width: 769px) {
          .ski-resort-panel {
              width: 380px;
          }
      }

      /* Mobile: 90% width drawer effect */
      @media (max-width: 768px) {
          .ski-resort-panel {
              width: 90%;
              max-width: 100%;
          }
      }

      /* ========== CLIMBING FILTERS ========== */
      
      /* Filter Summary */
      .filter-summary {
          background: #f0f7ff;
          padding: 12px;
          border-radius: 4px;
          text-align: center;
          font-size: 0.9em;
          margin-bottom: 15px;
          color: #333;
          border: 1px solid #d1e3ff;
      }
      
      .filter-summary strong {
          color: #2563eb;
          font-weight: 600;
      }
      
      /* Altitude Filter */
      .altitude-filter-content {
          padding: 10px 0;
      }
      
      .altitude-range-display {
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-weight: 600;
          font-size: 0.95em;
          margin-bottom: 12px;
          color: #333;
      }
      
      .altitude-slider-container {
          display: flex;
          flex-direction: column;
          gap: 12px;
          margin-bottom: 12px;
      }
      
      .altitude-slider-container label {
          font-size: 0.85em;
          color: #666;
          margin-bottom: 4px;
      }
      
      .altitude-filter-slider {
          width: 100%;
          height: 6px;
          border-radius: 3px;
          background: #e0e0e0;
          outline: none;
          -webkit-appearance: none;
      }
      
      .altitude-filter-slider::-webkit-slider-thumb {
          -webkit-appearance: none;
          appearance: none;
          width: 18px;
          height: 18px;
          border-radius: 50%;
          background: #2563eb;
          cursor: pointer;
          border: 2px solid white;
          box-shadow: 0 2px 4px rgba(0,0,0,0.2);
      }
      
      .altitude-filter-slider::-moz-range-thumb {
          width: 18px;
          height: 18px;
          border-radius: 50%;
          background: #2563eb;
          cursor: pointer;
          border: 2px solid white;
          box-shadow: 0 2px 4px rgba(0,0,0,0.2);
      }
      
      .altitude-filter-button {
          width: 100%;
          padding: 8px;
          background: #2563eb;
          color: white;
          border: none;
          border-radius: 4px;
          font-weight: 600;
          cursor: pointer;
          transition: background-color 0.2s;
      }
      
      .altitude-filter-button:hover {
          background: #1d4ed8;
      }
      
      /* Checkbox Filters (Type & Department) */
      .filter-checkbox-label {
          display: flex;
          align-items: center;
          padding: 8px 4px;
          cursor: pointer;
          transition: background-color 0.2s;
          border-radius: 4px;
          user-select: none;
      }
      
      .filter-checkbox-label:hover {
          background-color: #f5f5f5;
      }
      
      .filter-checkbox-label input[type="checkbox"] {
          margin-right: 10px;
          cursor: pointer;
          width: 16px;
          height: 16px;
      }
      
      .filter-checkbox-label span {
          flex: 1;
          font-size: 0.9em;
      }
      
      .filter-checkbox-label em {
          color: #999;
          font-size: 0.85em;
          font-style: normal;
          margin-left: 4px;
      }
      
      .filter-checkbox-label input[type="checkbox"]:checked + span {
          font-weight: 600;
          color: #2563eb;
      }
      
      /* Type Filter */
      .type-filter-content {
          padding: 4px 0;
      }
      
      /* Department Filter */
      .department-filter-content {
          padding: 4px 0;
      }
      
      .department-search-input {
          width: 100%;
          padding: 8px 12px;
          margin-bottom: 10px;
          border: 1px solid #ddd;
          border-radius: 4px;
          font-size: 0.9em;
          box-sizing: border-box;
      }
      
      .department-search-input:focus {
          outline: none;
          border-color: #2563eb;
          box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
      }
      
      .department-checkboxes-container {
          max-height: 250px;
          overflow-y: auto;
          border: 1px solid #e0e0e0;
          border-radius: 4px;
          padding: 4px;
          background: #fafafa;
      }
      
      /* Custom scrollbar for department list */
      .department-checkboxes-container::-webkit-scrollbar {
          width: 8px;
      }
      
      .department-checkboxes-container::-webkit-scrollbar-track {
          background: #f1f1f1;
          border-radius: 4px;
      }
      
      .department-checkboxes-container::-webkit-scrollbar-thumb {
          background: #888;
          border-radius: 4px;
      }
      
      .department-checkboxes-container::-webkit-scrollbar-thumb:hover {
          background: #555;
      }
      
      .department-filter-summary {
          margin-top: 10px;
          padding: 8px;
          background: #f0f7ff;
          border-radius: 4px;
          text-align: center;
          font-size: 0.85em;
          color: #2563eb;
          font-weight: 600;
      }
      
      /* Mobile Responsive */
      @media (max-width: 768px) {
          .filters-panel {
              width: 300px;
              max-width: 85vw;
              max-height: 80vh;
          }
          
          .department-checkboxes-container {
              max-height: 200px;
          }
          
          .filter-checkbox-label {
              padding: 10px 6px;
          }
          
          .altitude-slider-container {
              gap: 15px;
          }
      }
      
      @media (max-width: 479px) {
          .filters-panel {
              right: 5px;
              top: 65px;
              width: calc(100vw - 10px);
              max-height: 70vh;
          }
          
      .department-checkboxes-container {
          max-height: 180px;
      }
  }

  /* --------------------------------------------------
   * Version Modal Styles - Compact Card
   * -------------------------------------------------- */
  .version-modal {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 100000;
      pointer-events: none;
  }

  .version-modal.visible {
      display: block;
  }

  .version-modal-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: transparent;
      pointer-events: all;
  }

  .version-modal-content {
      position: absolute;
      top: 55px;
      right: 20px;
      background: white;
      border-radius: 6px;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
      padding: 12px;
      width: 220px;
      animation: slideInFromTop 0.2s ease-out;
      pointer-events: all;
  }

  @keyframes slideInFromTop {
      from {
          opacity: 0;
          transform: translateY(-10px);
      }
      to {
          opacity: 1;
          transform: translateY(0);
      }
  }

  .version-modal-close {
      position: absolute;
      top: 6px;
      right: 6px;
      background: transparent;
      border: none;
      font-size: 18px;
      color: #999;
      cursor: pointer;
      padding: 0;
      width: 20px;
      height: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 3px;
      transition: all 0.2s ease;
      line-height: 1;
  }

  .version-modal-close:hover {
      background: #f0f0f0;
      color: #333;
  }

  .version-info-grid {
      display: flex;
      flex-direction: column;
      gap: 8px;
  }

  .version-line {
      display: flex;
      align-items: baseline;
      gap: 6px;
      flex-wrap: wrap;
  }

  .version-label {
      font-size: 0.75em;
      color: #666;
      font-weight: 600;
  }

  .version-value {
      font-size: 0.75em;
      color: #333;
      font-weight: 600;
      font-family: 'Courier New', monospace;
  }

  .version-date {
      font-size: 0.7em;
      color: #888;
      font-weight: 400;
  }

  /* Make logo clickable */
  .logo-link {
      cursor: pointer;
      position: relative;
  }

  /* Responsive adjustments for version modal */
  @media (max-width: 768px) {
      .version-modal-content {
          top: 60px;
          right: 10px;
          width: 200px;
      }
  }

  @media (max-width: 479px) {
      .version-modal-content {
          padding: 10px;
          width: 190px;
          top: 65px;
          right: 5px;
      }
  }