/* The marker style can be found at https://www.geoapify.com/create-custom-map-marker-icon */

/* Fix Leaflet Control Text Alignment */
.leaflet-control-layers-list {
  text-align: left !important;
}

.leaflet-control-layers-overlays label {
  display: flex !important;
  align-items: flex-start !important;
  margin-bottom: 5px !important;
}

/* New Layout Helpers */
.icdp-legend-wrapper {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 250px; /* Ensure enough space */
}

.icdp-legend-content {
    flex: 1 !important;
    padding-right: 15px !important;
}

.icdp-legend-visual {
    flex: 0 0 40px !important; /* Fixed width for marker area */
    height: 40px !important;
    position: relative !important;
}

.marker-wrapper-control {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 30px !important;
    height: 30px !important;
}

/* The exterior of the pin: 📍 */
.marker-pin-control { 
  width: 30px !important; /* pin size */
  height: 30px !important; /* pin size */
  border-radius: 50% 50% 50% 0 !important;
  background: #0cce26; /* colour of exterior */
  position: absolute !important;
  transform: rotate(-45deg) !important;
  left: 0 !important;
  top: 0 !important;
  margin: 0 !important;
  box-shadow: 4px 4px 3px grey !important;
  display: block !important;
}

/* Interior of the pin (the white circle) */
.marker-pin-control::after { 
    content: '' !important;
    width: 24px !important; 
    height: 24px !important;
    margin: 3px 0 0 3px !important; 
    background: #fff;
    position: absolute !important;
    border-radius: 50% !important;
    top: 0 !important;
    left: 0 !important;
    display: block !important;
 }

/* Font Awesome Icon Helper */
/* Reset styles for control markers */
.marker-wrapper-control i {
  box-sizing: content-box !important;
  line-height: normal !important;
  position: absolute !important;
  width: 30px !important;
  height: 30px !important;
  left: 0 !important;
  top: 0 !important; 
  margin: 0 !important;
  text-align: center !important;
  z-index: 100 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  color: inherit;
}

/* Styles for the font-awesome icon */
.marker-wrapper-control i.awesome-control {
   font-size: 15px !important; /* size of icon */
   padding-bottom: 5px !important; /* Visual offset to center in the teardrop top part */
}

/* -------- COLORS -------- */

/* colour of exterior (the pin area)  */
div.workshop_in_preparation_style > .marker-pin-control {
    background: #cc0000;
}
div.drilling_in_preparation_style > .marker-pin-control {
    background: #990000;
}
div.drilling_in_operation_style > .marker-pin-control {
    background: #ff6633;
}
div.full_proposal_accepted_style > .marker-pin-control {
    background: #ff9933;
}
div.post_operational_style > .marker-pin-control {
    background: #660000;
}
div.post_moratorial_style > .marker-pin-control {
    background: #666666;
}


/* colour of circle */
div.workshop_in_preparation_style > .marker-pin-control::after {
    background: none;
} 
div.drilling_in_preparation_style > .marker-pin-control::after {
    background: white;
} 
div.drilling_in_operation_style > .marker-pin-control::after {
    background: white;
} 
div.full_proposal_accepted_style > .marker-pin-control::after {
    background: white;
} 
div.post_operational_style > .marker-pin-control::after {
    background: #660000;
} 
div.post_moratorial_style > .marker-pin-control::after {
    background: #666666;
}





/* colour of exterior (the pin area)  */
div.workshop_in_preparation_style > .marker-pin-control {
    background: #cc0000;
}
div.drilling_in_preparation_style > .marker-pin-control {
    background: #990000;
}
div.drilling_in_operation_style > .marker-pin-control {
    background: #ff6633;
}
div.full_proposal_accepted_style > .marker-pin-control {
    background: #ff9933;
}
div.post_operational_style > .marker-pin-control {
    background: #660000;
}
div.post_moratorial_style > .marker-pin-control {
    background: #666666;
}


/* colour of circle */
div.workshop_in_preparation_style > .marker-pin-control::after {
    background: none;
} 
div.drilling_in_preparation_style > .marker-pin-control::after {
    background: white;
} 
div.drilling_in_operation_style > .marker-pin-control::after {
    background: white;
} 
div.full_proposal_accepted_style > .marker-pin-control::after {
    background: white;
} 
div.post_operational_style > .marker-pin-control::after {
    background: #660000;
} 
div.post_moratorial_style > .marker-pin-control::after {
    background: #666666;
}