/* Base button styles */
.btn-satellite, .btn-satellite:focus {
  background: white;
  color: black;
  padding: 8px;
  border: 2px solid rgba(0, 0, 0, 0.3);
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  position: absolute;
  bottom: 10px;
  left: 10px;
  z-index: 999;
  font-family: sans-serif;
}

.btn-satellite:hover {
background: #f4f4f4;
color: black;
border: 2px solid rgba(0,0,0,0.2);
}
.btn-satellite.active, .btn-satellite.active:focus {
background: #f4f4f4;
color: black;
border: 2px solid rgba(0,0,0,0.2);
}
.btn-satellite.active:hover {
background: white;
}

/* Leaflet controls */
.leaflet-touch .leaflet-bar a {
text-decoration: none !important;
}
/* Grayscale effect */
.satellite-gray {
filter: grayscale(var(--grayscale-value));
}

/* Marker cluster styles */
.marker-cluster-custom {
background-clip: padding-box;
border-radius: 20px;
}

.marker-cluster-custom div {
text-align: center;
font-weight: bold;
}

.marker-cluster-custom span {
line-height: 30px;
}

/* Image-based layer buttons */
.aotm-map-btn {
    width: 75px;
    height: 75px;
    background-size: cover;
    background-position: center;
    box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5);
    border-radius: 8px;
    /*border: 2px solid #b1b1b1;*/
    position: absolute;
    bottom: 10px;
    z-index: 999;
    cursor: pointer;
}

.aotm-map-btn.active {
    border: 3px solid #b1b1b1;
}

.aotm-block-placeholder {
    border: 2px dashed #f05a28;
    padding: 20px;
    background: #fff;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}