#map {
      height: 500px;
    }

    #map-loader {
      /* display: none; */
      position: absolute; 
      z-index: 20;
      top: 0; left: 0; right: 0; bottom: 0;
      /* background: rgba(255, 255, 255, 0.7); */
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.2rem;
    }

    .spinner {
      border: 4px solid #ccc;
      border-top: 4px solid #333;
      border-radius: 50%;
      width: 2rem;
      height: 2rem;
      animation: spin 0.8s linear infinite;
    }

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

    .map-container {
      position: relative;
    }