/*
INFORMATION
Reglerna angivna här finns i sitevision, filarkivet/assets/map.css
Satt som lokal css för just den sidan som använder kartan.
Om du vill ändra något här, gör det i filarkivet också.
*/

/* General Leaflet and Map Control Styling */
.ssf-map__container,
.ssf-map__control {
  background-color: rgba(255, 0, 0, 0) !important;
}

/* Main control container with Envision UI variables */
.ssf-map__control-zoom {
  display: flex;
  flex-direction: column;
  gap: 0.1em;
  align-items: center;
  background-color: var(--env-block-secondary-background-color);
  padding: 1px;
  border: none;
  border-radius: var(--env-border-radius);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

/* Zoom controls styling (stacked vertically) */
.ssf-map__control-zoom-in,
.ssf-map__control-zoom-out {
  display: block;
  width: 100%;
  padding: 0.5em;
  background-color: var(--env-element-primary-background-color);
  color: var(--env-block-font-color);
  font-size: 1em;
  border: none;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

/* Add border only at top of zoom-in and bottom of zoom-out */
.ssf-map__control-zoom-in {
  border-radius: var(--env-border-radius) var(--env-border-radius) 0 0;
}

.ssf-map__control-zoom-out {
  border-radius: 0 0 var(--env-border-radius) var(--env-border-radius);
}

.ssf-map__control-zoom-in:hover,
.ssf-map__control-zoom-out:hover {
  background-color: var(--env-element-primary-background-color);
  filter: saturate(1.5);
}

/* Disabled state for zoom out control */
.ssf-map__control-zoom-out.ssf-map__control-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Styling for the Reset Zoom Control */
.ssf-map__control-zoom__reset {
  display: block;
  width: 100%;
  padding: 0.5em;
  background-color: var(--env-element-primary-background-color);
  color: var(--env-block-font-color);
  font-size: 1em;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.2s ease;
  border: var(--env-block-secondary-background-color) 1px solid;
  border-radius: var(--env-border-radius);
}

.ssf-map__control-zoom__reset:hover {
  background-color: var(--env-element-primary-background-color);
  filter: saturate(1.5);
}

/* Marker Cluster Styling */
.ssf-map__cluster {
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ssf-map__cluster-circle {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.85);
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #ffffff;
  color: var(--env-element-primary-background-color);
  font-weight: 700;
}

/* Map Popup Styling */
.ssf-map__popup .leaflet-popup-content-wrapper {
  background: var(--env-element-primary-background-color);
  color: #ffffff;
  font-size: 1em;
  line-height: 2em;
}

.ssf-map__popup .leaflet-popup-content-wrapper a {
  color: var(--env-block-link-font-color);
}

.ssf-map__popup a.leaflet-popup-close-button {
  color: #ffffff !important;

  &:hover {
    color: #cccccc;
  }
}

.ssf-map__popup .laeaflet-popup-tip-container {
  width: 30px;
  height: 15px;
}

.ssf-map__popup .leaflet-popup-tip {
  background: var(--env-element-primary-background-color);
  color: var(--env-block-font-color);
}

.leaflet-pane.leaflet-overlay-pane svg {
  filter: drop-shadow(0px 24px 124px 0px rgba(0, 0, 0, 0.5));
  transition: filter 0.3s ease-in-out;
}

.leaflet-pane .leaflet-popup-content p:first-of-type{
  font-size: 14px;
  font-weight: strong;
}

.leaflet-pane .leaflet-popup-content > p:nth-of-type(2){
   font-size: 16px;
   font-weight: strong;
}


.leaflet-pane .leaflet-popup-content a{
  color: #fff!important;
}

.leaflet-pane .leaflet-popup-content a:hover{
  color: #fff!important;
  text-decoration: underline;
}

.leaflet-popup {
  z-index: 1000 !important;  /* högre än .leaflet-top (z-index: 1000) */
}

/* Säkerställ att zoom-knapparna inte överskriver */
.leaflet-top {
  z-index: 900 !important;
}

/* Om du har custom popup */
.leaflet-popup-pane {
  z-index: 1000 !important;
}