/* App.css */
body,
html,
#root,
.App {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  font-family: 'Roboto', sans-serif;
}
/* Style for preloader */
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('icons/background_lanscape');
    background-size: cover;
    background-position: center;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-30px);
    }
    60% {
        transform: translateY(-15px);
    }
}

/* Keyframes for text fade-in animation */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

#preloader img {
    width: 200px; /* Adjust the width as needed */
    height: auto;
    margin-bottom: 20px;
    animation: bounce 2s infinite;
}

.preloader-text {
    font-size: 20px; /* Adjust font size as needed */
    color: #fff; /* Text color */
    background: linear-gradient(to right, rgba(72, 144, 226, 0.8), rgba(255, 255, 255, 0.5)); 
    padding: 10px 20px; 
    border-radius: 8px; 
    text-align: center;
    font-family: 'Arial', sans-serif; 
    font-weight: bold; 
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6); 
    margin-top: 10px; 
    animation: fadeIn 3s ease-in-out;
}

#loading {
    font-size: 16px;
    color: #333;
    margin-top: 20px;
}
/* Map container */
#map {
  height: 100vh;
  width: 100%;
  position: relative;
  z-index: 1;
}

/* CSS untuk menyembunyikan logo Google Maps */
.gm-style-cc {
    display: none !important;
}
.donate-container {
    position: fixed;
    top: 40px;
    right: 40px;
    z-index: 1000; /* Pastikan berada di atas konten lain */
}

.donate-btn {
    display: inline-block;
    padding: 5px 20px;
    background-color: #02a0c5; /* Warna biru */
    color: white;
    text-align: center;
    text-decoration: none;
    border-radius: 5px;
    font-size: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s, box-shadow 0.3s;
}
.donate-btn:hover {
    background-color: #00cc00; /* Warna hijau neon saat hover */
    box-shadow: 0 0 20px rgba(0, 255, 0, 1), 0 0 30px rgba(0, 255, 0, 0.8); /* Efek neon lebih terang saat hover */
    transform: scale(1.05); /* Efek zoom saat hover */
}

.toggle-legend-container, .toggle-new-filters-container {
  position: absolute;
  z-index: 1500;
  cursor: pointer;
  transition: box-shadow 0.3s ease;
  top: 10px; /* Position 10px from the bottom */
  left: 10px;   /* Position 10px from the left */
}

.toggle-legend-container + .toggle-new-filters-container {
  top: 70px; /* Stack the second button 50px above the first one */
}

.toggle-legend-container:active,
.toggle-new-filters-container:active {
  box-shadow: 0 0 15px 5px rgb(255, 224, 25);
}

.toggle-legend-container img,
.toggle-new-filters-container img {
  width: 50px;
  height: 50px;
}

/* Filter Container */
.filter-container,
.new-filter-container {
  display: none;
  position: absolute;
  z-index: 1000;
  flex-direction: column;
  gap: 10px;
  background: rgba(19, 39, 96, 0.613);
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
  transition: all 0.3s ease;
  width: auto;
  height: 380px;
}

.filter-container {
  top: 10px;
  left: 60px;
  max-width: 250px;
}

.new-filter-container {
  bottom: 10px;
  left: 60px;
  max-width: 250px;
}

.filter-container .filter-btn,
.new-filter-container .filter-btn {
  display: flex;
  align-items: center;
  padding: 10px 15px;
  background-color:rgb(10, 18, 44);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  box-shadow: 0px 2px 6px rgb(255, 255, 255);
  color: rgb(255, 255, 255);
  font-size: 16px;
  text-transform: capitalize;
  transition: background-color 0.3s ease;
  flex-grow: 1;
  text-align: center;
  text-shadow: 3px 3px 4px rgba(0, 0, 0, 0.856);
}

.filter-container .filter-btn:hover,
.new-filter-container .filter-btn:hover {
  background-color: rgba(72, 144, 226, 0.8);
}

.filter-container .filter-btn.active,
.new-filter-container .filter-btn.active {
  background-color: #004D40;
}

.filter-container .filter-checkbox-btn,
.new-filter-container .filter-checkbox-btn {
  display: flex;
  align-items: center;
  padding: 8px;
  background-color: rgba(10, 28, 61, 0.883);
  border-radius: 4px;
  cursor: pointer;
  box-shadow: 0px 2px 4px rgba(4, 26, 224, 0.15);
  font-size: 16px;
  transition: background-color 0.3s ease;
}

.filter-container .filter-checkbox-btn:hover,
.new-filter-container .filter-checkbox-btn:hover {
  background-color:rgba(0, 76, 255, 0.455);
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.576);
}

/* Logo */
#logo {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 150px;
  z-index: 1500;
}

/* Responsive Adjustments */
@media (max-width: 600px) {
    #preloader {
        background-image: url('icons/background_preload.png');
        background-size: contain; /* Adjust the size to fit the container */
        background-position: center; /* Center the image */
        background-repeat: no-repeat; /* No repeat */
    }
  .filter-container {
    display: none;
    flex-wrap: wrap;
    width: 40%;
    max-width: 60%;
    left: 62px;    /* Center horizontally by setting left to 5% */
    top: 11px;   /* Position at the top of the page */
    bottom: auto;  /* Reset bottom positioning */
    height: auto;
    padding: 2px;
    flex-direction: row;
    box-sizing: border-box;
    gap: 2px;
    border: 2px solid #889dcb;
    animation: slide-right 0.5s ease-out;
  }

  .new-filter-container {
    display: none;
    width: 40%;
    max-width: 60%;
    height: auto;  /* Set width to 90% for better alignment */
    left: 62px;    /* Center horizontally by setting left to 5% */
    top: 70px;   /* Reset top positioning */
    flex-direction: column;
    bottom: auto; /* Position above filter-container */
    padding:10px;
    gap: 10px;
    box-sizing: border-box;
    border: 2px solid #889dcb;
    animation: slide-right 0.5s ease-out;

  }
  .new-filter-container .filter-btn,
  .new-filter-container .filter-checkbox-btn,
  .filter-container .filter-btn,
  .filter-container .filter-checkbox-btn {
    flex-grow: 1; /* Tombol mengisi ruang yang tersedia */
    flex-basis: 20%;
    margin: 0 5px;
    box-sizing: border-box;
  }

  .toggle-legend-container img,
  .toggle-new-filters-container img {
    width: 50px;
    height: 50px;
    bottom: 10px;
    right: 10px;
  }

  .filter-container .filter-btn,
  .new-filter-container .filter-btn {
    width: auto;
    font-size: 10px;
    padding-bottom: 10px; 
    height: 30%;
    background-position: bottom center;
    background-size: cover;
  }
  .filter-container .filter-checkbox-btn,
  .new-filter-container .filter-checkbox-btn {
    width: 50%;
    height: auto;
    font-size: 0px;
    padding: 2px; /* Padding lebih kecil */
  }
  .filter-container .filter-checkbox-btn input[type="checkbox"],
  .new-filter-container .filter-checkbox-btn input[type="checkbox"] {
  width: 10px; /* Ukuran checkbox lebih kecil */
  height: 10px; /* Ukuran checkbox lebih kecil */
  }
  .filter-container .filter-checkbox-btn img,
  .new-filter-container .filter-checkbox-btn img {
  width: 17px; /* Menyusutkan ukuran gambar ikon */
  height: 17px; /* Menyusutkan ukuran gambar ikon */
  }
  

  @keyframes slide-right {
    from {
      transform: translateX(-60%); /* Memulai di luar layar sebelah kiri */
      opacity: 0;
    }
    to {
      transform: translateX(0); /* Bergerak ke posisi semula */
      opacity: 1;
    }
  }