@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap');

/* Mengganti font pada elemen-elemen peta Leaflet */
body {
  font-family: 'Poppins', sans-serif;
}

#map {
  height: calc(100vh - 40px);
  width: 100vw;
  position: relative;
}

/* CSS that you already have remains unchanged */

.leaflet-control {
  margin: 10px;
}

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
}

#toggleTableBtn {
  padding: 8px 16px;
  background-color: #4caf50;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.sidebar {
  position: fixed;
  top: 0;
  left: -400px;
  /* Default position: hidden */
  width: 400px;
  height: 100%;
  background-color: #fff;
  border-right: 1px solid #ccc;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  overflow: hidden;
  overflow-y: auto;
  transition: left 0.3s ease-in-out;
}

.sidebar.visible {
  left: 0;
  /* Position when visible */
}

.table-container {
  padding: 20px;
  width: 100%;
  /* Menyesuaikan lebar tabel dengan lebar sidebar */
  box-sizing: border-box;
  /* Menghindari padding mempengaruhi lebar total */
}

.table-scroll {
  max-height: 200px;
  /* Batasi tinggi tabel dan tambahkan overflow-y: auto untuk membuat scroll jika terlalu panjang */
}

#cafeTable {
  font-size: 14px;
  /* Ubah ukuran font tabel menjadi lebih kecil */
  width: 100%;
  /* Lebarkan tabel agar mengisi seluruh lebar kontainer */
  max-height: 100px;
  table-layout: fixed;
  /* Atur tabel menggunakan lebar tetap agar seluruh kolom tampil secara horizontal */
}

#cafeTable th,
#cafeTable td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #ddd;
  /* Menambahkan garis bawah pada sel */
  word-wrap: break-word;
  /* Pecah teks jika terlalu panjang */
  max-width: 250px;
  /* Batasi lebar maksimum kolom */
}

#cafeTable th {
  background-color: #f2f2f2;
  /* Warna latar belakang untuk judul tabel */
}

.search-container input {
  width: 110px;
}

.search-container button {
  padding: 0px 0px;
  /* Berikan padding pada tombol pencarian */
  background-color: #4caf50;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* CSS untuk tombol X (close) */
#closeTableBtn {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: #4caf50;
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  font-size: 18px;
  cursor: pointer;
}

#cafeTable tbody tr:hover {
  background-color: #f5f5f5;
  /* Warna latar belakang ketika di-hover */
  cursor: pointer;
}

.sidebar {
  position: fixed;
  top: 0;
  left: -400px;
  /* Default position: hidden */
  width: 400px;
  height: 100%;
  background-color: #fff;
  border-right: 1px solid #ccc;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  z-index: 1001;
  overflow: hidden;
  overflow-y: auto;
  transition: left 0.3s ease-in-out;
}

.sidebar.visible {
  left: 0;
  /* Position when visible */
}

.sidebar-toggle-btn {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  background-color: #4caf50;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 10px;
  cursor: pointer;
  transition: left 0.3s ease-in-out;
  z-index: 1001;
  align-items: center;
}

.sidebar-toggle-btn i {
  margin-right: 8px;
}

.sidebar.visible .sidebar-toggle-btn {
  left: calc(100% - 400px);
  /* Atur sesuai lebar sidebar Anda */
}

/* Adjustments for the table in the sidebar */
.table-container {
  display: flex;
  flex-direction: column; /* Menggunakan tata letak kolom */
  align-items: center; /* Mengalignir elemen horizontal ke tengah */
  padding: 20px;
  margin: 10px;
}

.title {
  font-family: Poppins;
}

#searchCafeInput {
  border-radius: 6px;
  padding: 7px;
  margin: 5px;
}

#universityDropdown {
  margin: 10 0 10 0px; /* Tambahkan margin atas untuk memberi jarak antara tombol */
  padding: 5px;
}

/* Styling for the dropdown list container */
.dropdown-list {
  max-height: 200px; /* Set a maximum height to enable scrolling */
  overflow-y: auto; /* Enable vertical scrolling if content exceeds max-height */
  border: 1px solid #ddd; /* Add a border for separation */
  border-radius: 5 px; /* Rounded corners */
  background-color: #fff; /* White background */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Add a subtle shadow */
  padding: 10px; /* Add some padding */
}

/* Styling for each dropdown list item */
.dropdown-list a {
  display: block; /* Display links as block elements */
  padding: 8px 12px; /* Add some padding around each link */
  color: #333; /* Text color */
  text-decoration: none; /* Remove underlines */
  transition: background-color 0.3s ease; /* Add a smooth background transition on hover */
}

/* Styling for selected dropdown list item */
.dropdown-list a.selected {
  background-color: #f0f0f0; /* Highlight color for selected item */
}

/* Add a hover effect for dropdown list items */
.dropdown-list a:hover {
  background-color: #f5f5f5; /* Background color on hover */
}

.yellow-star {
  color: #f0de36;
}

.text {
  color: #91c8e4;
  text-decoration: none;
}

.text:hover {
  color: #4682a9;
}

.about-button {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1000;
  text-align: center;
}

.about-link {
  display: inline-block;
  padding: 10px 20px;
  background-color: black;
  color: white;
  border: none;
  border-radius: 4px;
  text-decoration: none;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.about-link:hover {
  background-color: #333; /* Darken the color on hover */
}

#cardModal {
  background: rgba(0, 0, 0, 0.5);
}

.modal-content {
  background-color: #f8f9fa;
  border: none;
  border-radius: 10px;
}

.modal-header {
  background-color: #343a40;
  color: white;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.modal-header button.btn-close {
  color: white !important;
}

.modal-title {
  font-size: 1.5rem;
}

/* Gaya untuk kartu-kartu di dalam modal */
.card {
  margin-bottom: 15px;
  border: none;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.card-body {
  padding: 15px;
}

.card-title {
  font-size: 1.2rem;
  margin: 0;
}

/* Tombol close di pojok modal */
.btn-close {
  color: #fff;
}

/* Gaya hover untuk tombol close */
.btn-close:hover {
  color: #ccc;
}

/* Mengatur ukuran modal besar */
.modal-lg {
  max-width: 800px;
}

.instagram-link {
  color: #517fa4;
  text-decoration: none;
  transition: color 0.3s, text-decoration 0.3s;
}

.instagram-link:hover {
  color: #4e6bff;
  text-decoration: underline;
}

.maps-link {
  color: #e74c3c;
  text-decoration: none;
  transition: color 0.3s, text-decoration 0.3s;
}

.maps-link:hover {
  color: #ff5b5b;
  text-decoration: underline;
}

/* Additional styles for cards */
.card {
  margin-bottom: 15px;
  border: none;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s;
}

.card:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.popup-text a {
  color: #007bff; /* Warna tautan situs web */
  text-decoration: underline; /* Garis bawah untuk tautan */
  transition: color 0.3s ease; /* Animasi perubahan warna teks */
  word-wrap: break-word; /* Pemisahan kata saat teks melebihi lebar pop-up */
}

.popup-text a:hover {
  color: #0056b3; /* Warna tautan situs web saat disorot */
}

.card-title a {
  text-decoration: none !important; /* Hapus garis bawah dari tautan */
  color: #c1558b; /* Warna teks tautan */
}

.card-title i {
  font-size: 1.5rem; /* Ubah ukuran ikon sesuai kebutuhan Anda */
  margin-right: 0.25rem; /* Beri jarak ke kanan antara ikon dan teks */
}

.popup-text a {
  color: #007bff; /* Warna tautan situs web */
  text-decoration: underline; /* Garis bawah untuk tautan */
  transition: color 0.3s ease; /* Animasi perubahan warna teks */
  word-wrap: break-word; /* Pemisahan kata saat teks melebihi lebar pop-up */
}

.popup-text a:hover {
  color: #0056b3; /* Warna tautan situs web saat disorot */
}

.card-title a {
  text-decoration: none !important; /* Hapus garis bawah dari tautan */
  color: #c1558b; /* Warna teks tautan */
}

.card-title i {
  font-size: 1.5rem; /* Ubah ukuran ikon sesuai kebutuhan Anda */
  margin-right: 0.25rem; /* Beri jarak ke kanan antara ikon dan teks */
}

#aboutModalLabel {
  align-text: center;
}

/* Styling untuk container social-icons */
.social-icons {
  text-align: center;
  margin: 20px;
}

/* Styling untuk paragraf */
.social-icons p {
  font-size: 18px;
  margin-bottom: 10px;
}

/* Styling untuk setiap ikon sosial media */
.social-icon {
  display: inline-block;
  margin: 0 10px;
  text-decoration: none;
  color: #333; /* Warna teks dasar */
}

/* Styling untuk gambar ikon */
.social-icon img {
  width: 40px;
  height: 40px;
  vertical-align: middle;
}

/* Styling untuk teks di sebelah ikon */
.social-icon span {
  display: block;
  margin-top: 5px;
  font-size: 14px;
}
@media screen and (max-width: 768px) {
  .sidebar {
    width: 300px; /* Atur lebar sidebar untuk laptop */
  }

  .sidebar-toggle-btn {
    left: 300px; /* Atur posisi tombol "Toggle Sidebar" sesuai lebar sidebar */
  }

  .table-container {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  #searchCafeInput,
  #universityDropdown {
    margin: 10px auto;
    /* Center the elements horizontally */
  }

  #universityDropdown {
    display: block;
    /* Ensure the dropdown is a block element for centering */
  }
}

@media screen and (min-width: 768px) {
  .search-container {
    display: flex;
    align-items: center;
  }

  #searchCafeInput {
    margin-left: 10px;
  }

  #universityDropdown {
    margin-left: 10px;
  }
}