/* Base layout */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  font-family: Arial, sans-serif;
}

#map {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

#selectContainer {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(255, 255, 255, 0.95);
  padding: 0px 0px;
  border-radius: 0px;
  box-shadow: 0 0px 0px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
}

#countrySelect {
  width: 220px;
  max-width: 100%;
}

/* Legend */
.legend-control {
  position: absolute;
  bottom: 20px;
  right: 20px;
  z-index: 999;
  font-size: 13px;
  line-height: 1.6;
  border-radius: 6px;
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 10px;
}

.legend-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 6px;
  border-radius: 50%;
}

/* AwesomeMarkers custom fix */
.leaflet-marker-icon.awesome-marker {
  margin-top: 0 !important;
  margin-left: -17px !important;
  width: 28px !important;
  height: 36px !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Font Awesome SVG or <i> alignment */
.leaflet-marker-icon.awesome-marker i.fa,
.leaflet-marker-icon.awesome-marker i.fas,
.leaflet-marker-icon.awesome-marker i.fab,
.awesome-marker svg {
  font-size: 14px;
  color: white;
  width: 50%;
  height: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 9px;
  padding: 0;
}


/* Custom divIcon styles */
.custom-icon {
  width: 18px;
  height: 18px;
  border-radius: 10%;
  background: gray;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.custom-icon.orange { background-color: #f39c12; }
.custom-icon.green { background-color: #27ae60; }
.custom-icon.blue { background-color: #2980b9; }
.custom-icon.red { background-color: #c0392b; }
.custom-icon.purple { background-color: #8e44ad; }
.custom-icon.darkred { background-color: #7f0000; }
.custom-icon.darkblue { background-color: #2c3e50; }
.custom-icon.cadetblue { background-color: #5f9ea0; }

.custom-icon i {
  pointer-events: none;
}

/* Timezone icon */
.custom-timezone-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: white;
  border: 1px solid #198754;
  border-radius: 50%;
  width: 26px;
  height: 26px;
  color: #198754;
  font-size: 16px;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
}

.ui-resizable-handle {
  z-index: 1060;
  position: absolute;
  background: transparent;
}

/* Filter panel */
#markerFilterPanel {
  position: absolute;
  top: 140px;        
  right: 10px;
  background: rgba(255, 255, 255, 0.95);
  padding: 10px;
  z-index: 1000;
  border-radius: 4px;
  box-shadow: 0 0 5px rgba(0,0,0,0.2);
  display: none;
}

#markerFilterPanel label {
  display: block;
  margin-bottom: 4px;
  font-size: 14px;
}



#markerFilterPanel label {
  display: block;
  margin-bottom: 4px;
  font-size: 14px;
}

/* Responsive tweaks */
@media (max-width: 576px) {
  #selectContainer {
    padding: 10px 8px;
    top: 8px;
  }

  #countrySelect {
    width: 100%;
    font-size: 14px;
  }

  .modal-title {
    font-size: 16px;
  }

  .table {
    font-size: 13px;
  }

  .leaflet-control-easybutton-button {
    width: 32px;
    height: 32px;
    font-size: 16px !important;
  }
}


#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: #fdf1d5;
  display: flex;
  justify-content: center;
  align-items: center;
}

.custom-spinner {
  width: 3rem;
  height: 3rem;
  border: 0.4rem solid #ccc;
  border-top-color: #007bff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}