.icon.svelte-akbc0s {
  transform-origin: 50% 50%; /* rotation around center */
}

.map-compass-button.svelte-tkrgx3 {
  position: absolute;
  right: 15px;
  bottom: calc(
    var(--header-base-height)
    + env(safe-area-inset-bottom, 0px) / 4
    + 10px
  );
  z-index: 1000;

  background-color: #fffef0;
  border: 1px solid #ccc;
  border-radius: 50%;       /* round */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  width: 38px;
  height: 38px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease;
}

/* Landscape mobile layout: vertical stack on the left */
@media (max-width: 1024px) and (orientation: landscape) {
  .map-compass-button.svelte-tkrgx3 {
      bottom: calc( env(safe-area-inset-bottom, 0px) + 15px );
      right: 20px;
  }
}

/* Overlay container on top of map */
.toggle-panel-container.svelte-zz2ctq {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;

  position: absolute;
  bottom: calc(
    var(--header-base-height)
    + env(safe-area-inset-bottom, 0px) / 4
    + 100px
  );
  right: 10px;
  z-index: 1000;
  background: transparent;
/*}
/* Panel itself is interactive 
.layer-control-panel {*/
  display: flex;
  flex-direction: column;
  pointer-events: auto;
}

/* Panel styling */
.layer-panel.svelte-zz2ctq {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: transparent;

  width: max-content;     
  min-width: 180px;     

  max-height: 55vh;     /* allow scroll if menu is taller */
  overflow-y: auto;
}

/* Landscape mobile layout: vertical stack on the left */
@media (max-width: 1024px) and (orientation: landscape) {
  .toggle-panel-container.svelte-zz2ctq {
      bottom: calc( env(safe-area-inset-bottom, 0px) + 105px );
      right: 15px;
      /*max-height: calc( 100vh - env(safe-area-inset-bottom, 0px) / 4 - 110px);*/
      max-height: calc( 100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 120px);
  }
}


/* Optional: icon inside toggle button */
.layer-toggle-button.svelte-zz2ctq {
  background-image: url('../../../icons/layergroup-64.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 26px 24px;
  padding: 4px;

  bottom: -40px;
  right: 5px;
  position: absolute;
  z-index: 1002;

  background-color: #fffef0;
  border: 1px solid #2e7d32;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
  cursor: pointer;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease;
}


/* Layer buttons */
.layer-panel-button.svelte-zz2ctq {
  background-color: ivory;
  color: #2e7d32;
  border: 1px solid #aaa;
  padding: 4px 8px;
  cursor: pointer;
  border-radius: 4px;
  font-size: 1rem;
  display: flex;
  align-items: center;
  gap: 6px;
  text-align: left;

  white-space: nowrap;    
  width: auto;           
  box-sizing: border-box;

  transition: background-color 0.3s ease, color 0.3s ease;
}

.layer-panel-button.svelte-zz2ctq:hover {
	background: #2e7d32;
	color: #fff;
}
/************ City Selector ***************************/
.city-selector-mount.svelte-zz2ctq {
  /*margin-top: 5px;*/
  border-top: 1px solid rgba(0,0,0,0.08);
  padding-top: 2px;
}


.layer-control.svelte-1bvs6mn {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
}

.map.svelte-1bvs6mn {
  width: 100%;
  height: 100%;
}

#map-overlay.svelte-1bvs6mn {
  transition: opacity 0.3s;
}

@keyframes svelte-1bvs6mn-heartbeat {
  0%   { transform: scale(0);   opacity: 0; }    
  5%   { transform: scale(0.05);   opacity: 1; }    
  12%  { transform: scale(0.75); }                
  28%  { transform: scale(1.3); }               
  38%  { transform: scale(1.5); }              
  45%  { transform: scale(1.4); }                
  65%  { transform: scale(0.8); }              
  82%  { transform: scale(0.5); }               
  100% { transform: scale(0.05); }                
}
.pulse-heartbeat.svelte-1bvs6mn {
  animation: svelte-1bvs6mn-heartbeat 2s ease-in-out infinite;
  transform-origin: center;
}