/* === PAGE STRUCTURE === */
.mapviewer-page {
    display: flex;
    flex-direction: column;
    height: 90vh;
    padding: 1% 5%;
    box-sizing: border-box;
  }

  /* === TITLE === */
  .mapviewer-title {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--nhc-dark-blue, #003366);
    margin-bottom: 1rem;
    text-align: center;
  }

  /* === MAP & PANELS CONTAINER === */
  .map-container {
    height: 100%;
    min-height: 0;
    margin-top: 2rem;
  }

  .map-column {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    gap: 0.75rem;
  }

  /* === PANELS (LAYERS & LEGEND) === */
  .layers-panel {
    border-radius: 8px;
    padding: 0.75rem;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow-y: auto;
    min-height: 0;
    max-height: 100%;
  }

  .legend-panel {
    height: 100%;
    padding: 1rem;
    overflow-y: auto;
    min-height: 0;
    max-height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    border-radius: 15px;
    background: #e9ecef;
    box-shadow: 12px 12px 29px #dde0e3,
               -12px -12px 29px #f5f8fb;
  }

  .layers-panel h4,
  .legend-panel h4 {
    font-size: 1.1rem;
    margin-bottom: 1rem;
  }

  /* === MAP PANEL === */
  .map-panel {
    flex-grow: 1;
    height: auto;
    min-height: 0;
    position: relative;
    overflow: hidden;
    border-radius: 15px;
    background: #e9ecef;
    box-shadow: inset 12px 12px 29px #dde0e3,
                inset -12px -12px 29px #f5f8fb;
  }

  #map {
    width: 100%;
    height: 100%;
    min-height: 300px;
  }

  /* === RESPONSIVE: STACKED LAYOUT (<992px) === */
  @media (max-width: 991.98px) {
    .mapviewer-page {
      height: auto;
      padding: 1rem 1rem;
    }

    .map-container {
      --bs-gutter-x: 0;
      row-gap: 1.5rem;
    }

    /* Layers panel: horizontal wrapped buttons */
    .layers-panel {
      height: auto;
      max-height: none;
      padding: 0.5rem 0;
    }

    .layers-panel .layer-buttons {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 0.5rem;
    }

    /* Legend panel below map */
    .legend-panel {
      height: auto;
      max-height: none;
    }

    .map-panel {
      height: 55vh;
      min-height: 400px;
    }
  }

  @media (max-width: 576px) {
    .mapviewer-page {
      padding: 0.75rem 0.75rem;
    }

    .mapviewer-title {
      font-size: 1.2rem;
    }

    .map-panel {
      height: 50vh;
      min-height: 320px;
    }
  }

  /* === OPACITY CONTROL === */
  .opacity-control {
    min-width: 110px;
    background: white;
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
    padding: 4px;
  }