/* === Global Reset === */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

body {
  background: #0d1117;
  color: #e6edf3;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* === Header & Nav === */
header {
  background: #161b22;
  padding: 1rem 2rem;
  border-bottom: 2px solid #238636;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

header h1 {
  color: #58a6ff;
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: 2px;
}

header h1 a {
  color: inherit;
  text-decoration: none;
}

header nav {
  display: flex;
  gap: 1.5rem;
  /* Tambahan untuk mobile: default desktop */
  overflow-x: hidden; /* Sembunyikan scrollbar di desktop */
  white-space: nowrap;
}

header nav a,
header nav button {
  color: #e6edf3;
  text-decoration: none;
  font-weight: 500;
  transition: 0.3s;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  flex-shrink: 0; /* Mencegah item mengecil di desktop juga */
}

header nav a:hover,
header nav button:hover {
  color: #58a6ff;
  background: rgba(88, 166, 255, 0.1);
}

/* Specific for user-dashboard navbar */
.navbar {
  background: #161b22;
  padding: 1rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid #238636;
  /* Tambahan untuk mobile: default desktop */
  overflow-x: hidden; /* Sembunyikan scrollbar di desktop */
  white-space: nowrap;
}

.navbar-brand h1 a {
  color: #58a6ff;
  text-decoration: none;
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: 2px;
  flex-shrink: 0; /* Mencegah brand mengecil */
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 1.5rem;
  flex-grow: 1; /* Memungkinkan link mengambil sisa ruang */
  justify-content: flex-end; /* Posisikan link ke kanan di desktop */
}

.nav-links li {
  flex-shrink: 0; /* Mencegah item mengecil */
}

.nav-links li a {
  color: #e6edf3;
  text-decoration: none;
  font-weight: 500;
  transition: 0.3s;
  padding: 0.5rem 1rem; /* Tambahkan padding untuk area klik yang lebih baik */
  border-radius: 6px;
}

.nav-links li a:hover {
  color: #58a6ff;
  background: rgba(88, 166, 255, 0.1);
}


/* === Main Content Area === */
main {
  flex-grow: 1;
  padding: 2rem;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

section {
  background: #161b22;
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 0 15px rgba(88, 166, 255, 0.1);
  margin-bottom: 2rem;
}

section h2 {
  color: #58a6ff;
  margin-bottom: 1.5rem;
  text-align: center;
}

/* === Hero Section (Index) === */
.hero {
  text-align: center;
  padding: 5rem 2rem;
  background: linear-gradient(145deg, #161b22, #0d1117);
  border-radius: 12px;
  box-shadow: 0 0 15px rgba(88, 166, 255, 0.3);
  margin: 2rem auto;
  max-width: 800px;
}

.hero h2 {
  font-size: 2.5rem;
  color: #58a6ff;
}

.hero p {
  margin: 1rem 0 2rem;
  font-size: 1.2rem;
  color: #a0aec0;
}

.hero button {
  background: #238636;
  color: white;
  padding: 0.8rem 2rem;
  font-size: 1rem;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: 0.3s;
}

.hero button:hover {
  background: #2ea043;
  transform: scale(1.05);
}

/* === Auth Section (Login/Register) === */
.auth-section {
  max-width: 400px;
  margin: 4rem auto;
  padding: 2rem;
  background: #161b22;
  border-radius: 12px;
  box-shadow: 0 0 20px rgba(88, 166, 255, 0.2);
}

.auth-section h2 {
  text-align: center;
  margin-bottom: 1.5rem;
  color: #58a6ff;
}

.auth-section form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.auth-section input {
  padding: 0.8rem;
  border: none;
  border-radius: 8px;
  background: #0d1117;
  color: #e6edf3;
  border: 1px solid #30363d;
  font-size: 1rem;
}

.auth-section input:focus {
  outline: none;
  border-color: #58a6ff;
  box-shadow: 0 0 8px #58a6ff;
}

.auth-section button {
  background: #238636;
  color: white;
  padding: 0.8rem;
  font-size: 1rem;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: 0.3s;
}

.auth-section button:hover {
  background: #2ea043;
}

.auth-section p {
  text-align: center;
  margin-top: 1rem;
}

.auth-section p a {
  color: #58a6ff;
  text-decoration: none;
}

.auth-section p a:hover {
  text-decoration: underline;
}

/* === Forms (General) === */
form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

form input[type="text"],
form input[type="number"],
form input[type="email"],
form input[type="password"],
form input[type="url"],
form input[type="file"],
form select, /* Added for select element */
form textarea { /* Added for textarea */
  padding: 0.8rem;
  border: 1px solid #30363d;
  border-radius: 8px;
  background: #0d1117;
  color: #e6edf3;
  font-size: 1rem;
}

form input:focus,
form select:focus,
form textarea:focus {
  outline: none;
  border-color: #58a6ff;
  box-shadow: 0 0 8px rgba(88, 166, 255, 0.3);
}

form button[type="submit"] {
  background: #238636;
  color: white;
  padding: 0.8rem;
  font-size: 1rem;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: 0.3s;
}

form button[type="submit"]:hover {
  background: #2ea043;
}

/* === Products List (Admin) === */
#productsList div {
  background: #0d1117;
  padding: 0.8rem;
  margin-bottom: 0.5rem;
  border-radius: 8px;
  border: 1px solid #30363d;
  /* NEW: Flexbox for alignment */
  display: flex;
  align-items: center;
  justify-content: space-between; /* Sebarkan konten dan tombol */
  flex-wrap: wrap; /* Izinkan wrap pada layar kecil */
  gap: 0.5rem; /* Jarak antar item */
}

#productsList div p {
  margin: 0; /* Hapus margin default paragraf */
  flex-grow: 1; /* Biarkan paragraf mengambil ruang yang tersedia */
}

.product-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* === Products Grid (User) === */
.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
  margin: 2rem 0;
}

.product {
  background: #0d1117;
  border-radius: 12px;
  padding: 1rem;
  text-align: center;
  box-shadow: 0 0 12px rgba(88, 166, 255, 0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: 1px solid #30363d;
}

.product:hover {
  transform: translateY(-5px);
  box-shadow: 0 0 18px rgba(88, 166, 255, 0.4);
}

.product img {
  border-radius: 8px;
  margin: 1rem 0;
  width: 150px; /* Fixed width */
  height: 150px; /* Fixed height */
  object-fit: cover; /* Cover the area, crop if necessary */
  border: 1px solid #238636;
}

.product h3 {
  font-size: 1.2rem;
  color: #58a6ff;
  margin-bottom: 0.5rem;
}

.product p {
  color: #a0aec0;
  margin-bottom: 1rem;
}

.product button {
  background: #238636;
  color: white;
  border: none;
  border-radius: 6px;
  padding: 0.6rem 1rem;
  margin: 0.5rem;
  cursor: pointer;
  font-weight: 500;
  transition: 0.3s;
}

.product button:hover {
  background: #2ea043;
  transform: scale(1.05);
}

.product button:disabled {
  background: #6c757d;
  cursor: not-allowed;
}

/* === Cart & History === */
#cartItems, #historyItems, #myRatingsList, #globalRatingsList { /* Tambahkan #globalRatingsList */
  margin-top: 1.5rem;
}

#cartItems p, #historyItems p, #myRatingsList p, #globalRatingsList p { /* Tambahkan #globalRatingsList p */
  margin-bottom: 0.5rem;
  color: #a0aec0;
}

#cartItems strong {
  color: #e6edf3;
  font-size: 1.1rem;
}

#cart button, #history button {
  background: #238636;
  color: white;
  padding: 0.8rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: 0.3s;
  margin-top: 1.5rem;
}

#cart button:hover, #history button:hover {
  background: #2ea043;
}

/* === Orders (Admin & User History) === */
.order {
  background: #0d1117;
  padding: 1rem;
  margin: 1rem 0;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(35, 134, 54, 0.3);
  border: 1px solid #238636;
}

.order p {
  margin: 0.3rem 0;
}

.order p strong {
  color: #e6edf3;
}

.order a {
  color: #58a6ff;
  text-decoration: none;
}

.order a:hover {
  text-decoration: underline;
}

.order select {
  padding: 0.5rem;
  border-radius: 6px;
  border: 1px solid #30363d;
  background: #161b22;
  color: #e6edf3;
  margin-top: 1rem;
  cursor: pointer;
}

.order select:focus {
  outline: none;
  border-color: #58a6ff;
}

/* === QRIS Modal === */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1000; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgba(0,0,0,0.7); /* Black w/ opacity */
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-content {
  background-color: #161b22;
  margin: auto;
  padding: 2rem;
  border: 1px solid #30363d;
  border-radius: 12px;
  width: 90%;
  max-width: 500px;
  text-align: center;
  box-shadow: 0 0 20px rgba(88, 166, 255, 0.2);
}

.modal-content h3 {
  color: #58a6ff;
  margin-bottom: 1rem;
}

.modal-content img {
  max-width: 100%;
  height: auto;
  margin: 1rem 0;
  border-radius: 8px;
  border: 1px solid #238636;
}

.modal-content p {
  margin-bottom: 1rem;
  color: #a0aec0;
}

/* === Styling for file and email inputs in modals === */
.modal-content input[type="file"],
.modal-content input[type="email"] {
  display: block;
  width: calc(100% - 2rem); /* Mengurangi padding agar tidak melebihi lebar modal */
  margin: 1rem auto;
  padding: 0.8rem; /* Tambah padding */
  background: #0d1117; /* Background gelap */
  border: 1px solid #30363d; /* Border gelap */
  border-radius: 8px;
  color: #e6edf3; /* Warna teks terang */
  font-size: 1rem;
  transition: border-color 0.3s ease, box-shadow 0.3s ease; /* Efek transisi */
}

.modal-content input[type="file"]:focus,
.modal-content input[type="email"]:focus {
  outline: none;
  border-color: #58a6ff; /* Warna border saat fokus */
  box-shadow: 0 0 8px rgba(88, 166, 255, 0.5); /* Efek shadow saat fokus */
}

/* Styling for file input button (browser default) */
.modal-content input[type="file"]::-webkit-file-upload-button {
  background: #238636;
  color: white;
  border: none;
  padding: 0.6rem 1rem;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.modal-content input[type="file"]::-webkit-file-upload-button:hover {
  background: #2ea043;
}

/* For Firefox */
.modal-content input[type="file"]::file-selector-button {
  background: #238636;
  color: white;
  border: none;
  padding: 0.6rem 1rem;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.modal-content input[type="file"]::file-selector-button:hover {
  background: #2ea043;
}


.modal-content .row {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.5rem;
}

.modal-content button {
  background: #238636;
  color: white;
  padding: 0.8rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: 0.3s;
}

/* Add styles for the new QRIS upload form */
#settings form label {
  display: block;
  margin-bottom: 0.5rem;
  color: #e6edf3;
  font-weight: 500;
}

#settings form input[type="file"] {
  margin-bottom: 1rem;
}

#settings form button[type="submit"] {
  width: auto; /* Adjust button width */
  padding: 0.8rem 1.5rem;
}

.modal-content button:hover {
  background: #2ea043;
}

.modal-content button:last-child {
  background: #d32f2f; /* Red for cancel */
}

.modal-content button:last-child:hover {
  background: #e57373;
}

/* === Footer === */
footer {
  margin-top: auto;
  text-align: center;
  padding: 1rem;
  background: #161b22;
  border-top: 2px solid #238636;
  color: #8b949e;
}

/* Tambahan styling untuk search input */
.search-container {
  margin-bottom: 1.5rem;
  text-align: center; /* Pusatkan input */
}

#productSearch {
  width: 100%;
  max-width: 400px; /* Batasi lebar agar tidak terlalu panjang di desktop */
  padding: 0.8rem;
  border: 1px solid #30363d;
  border-radius: 8px;
  background: #0d1117;
  color: #e6edf3;
  font-size: 1rem;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

#productSearch:focus {
  outline: none;
  border-color: #58a6ff;
  box-shadow: 0 0 8px rgba(88, 166, 255, 0.3);
}

/* NEW: Styling for admin dashboard buttons */
.admin-button {
  background: #238636; /* Warna hijau yang sama dengan tombol "Lanjutkan" */
  color: white;
  padding: 0.6rem 1.2rem; /* Sesuaikan padding */
  font-size: 0.95rem; /* Sesuaikan ukuran font */
  font-weight: 500;
  border: none;
  border-radius: 8px; /* Border radius yang sama */
  cursor: pointer;
  transition: background 0.3s ease, transform 0.2s ease;
  margin-top: 0.5rem; /* Sedikit margin atas untuk pemisah */
  margin-right: 0.5rem; /* Sedikit margin kanan antar tombol */
  display: inline-block; /* Agar bisa berdampingan */
}

.admin-button:hover {
  background: #2ea043; /* Warna hover yang sama */
  transform: translateY(-2px); /* Efek hover yang sama */
}

/* Styling khusus untuk tombol Hapus (merah) */
.admin-button.delete {
  background: #d32f2f; /* Warna merah yang sama dengan tombol "Batal" */
}

.admin-button.delete:hover {
  background: #e57370; /* Warna hover merah yang sama */
}

/* Styling untuk form tambah produk */
#addProductForm button[type="submit"] {
  width: auto; /* Agar tombol tidak mengambil lebar penuh */
  padding: 0.8rem 1.5rem; /* Sesuaikan padding */
  margin-top: 1rem; /* Beri sedikit jarak dari input */
}

/* Product Categories Buttons */
.product-categories {
  text-align: center;
  margin-bottom: 2rem;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.category-button {
  background: #161b22;
  color: #e6edf3;
  padding: 0.8rem 1.5rem;
  border: 1px solid #30363d;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1rem;
  transition: background 0.3s ease, border-color 0.3s ease;
}

.category-button:hover {
  background: #238636;
  border-color: #238636;
}

.category-button.active {
  background: #238636;
  border-color: #238636;
  color: white;
  font-weight: bold;
}

/* Styling for Rating Stars */
.rating-stars .star {
  color: #ccc; /* Default star color (abu-abu/tanpa warna) */
  transition: color 0.2s ease;
  cursor: pointer; /* Tambahkan cursor pointer agar jelas bisa diklik */
}

.rating-stars .star.selected {
  color: #FFD700; /* Gold color for selected stars (kuning) */
}

/* Tambahan untuk textarea di modal */
.modal-content textarea {
  width: calc(100% - 2rem);
  margin: 1rem auto;
  padding: 0.8rem;
  background: #0d1117;
  border: 1px solid #30363d;
  border-radius: 8px;
  color: #e6edf3;
  font-size: 1rem;
}

.modal-content textarea:focus {
  outline: none;
  border-color: #58a6ff;
  box-shadow: 0 0 8px rgba(88, 166, 255, 0.5);
}

/* Styling untuk tabel rating */
.ratings-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1.5rem;
}

.ratings-table th, .ratings-table td {
  border: 1px solid #30363d;
  padding: 0.8rem;
  text-align: left;
}

.ratings-table th {
  background-color: #161b22;
  color: #e6edf3;
}

.ratings-table td {
  background-color: #0d1117;
  color: #a0aec0;
}

.ratings-table tr:nth-child(even) td {
  background-color: #161b22;
}

.ratings-table .admin-button {
  margin: 0; /* Hapus margin agar tombol rapi di tabel */
}

/* Styling untuk persentase rating */
.rating-summary {
  background: #161b22;
  padding: 1.5rem;
  border-radius: 12px;
  box-shadow: 0 0 15px rgba(88, 166, 255, 0.1);
  margin-bottom: 2rem;
}

.rating-summary h3 {
  color: #58a6ff;
  margin-bottom: 1rem;
  text-align: center;
}

.rating-summary p {
  margin-bottom: 0.5rem;
  color: #e6edf3;
}

.rating-summary .progress-bar-container {
  background-color: #30363d;
  border-radius: 5px;
  height: 10px;
  margin-top: 5px;
}

.rating-summary .progress-bar {
  height: 100%;
  background-color: #238636;
  border-radius: 5px;
  width: 0%; /* Akan diisi oleh JS */
  transition: width 0.5s ease-in-out;
}

/* NEW: Styling for Telegram Button */
.telegram-button-container {
  text-align: center;
  margin-bottom: 2rem;
}

.telegram-button {
  display: inline-flex; /* Menggunakan flexbox untuk menyusun item secara horizontal */
  align-items: center; /* Pusatkan item secara vertikal */
  background-color: #0088cc; /* Warna biru Telegram */
  color: white;
  padding: 0.8rem 1.5rem;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  transition: background-color 0.3s ease, transform 0.2s ease;
  box-shadow: 0 4px 10px rgba(0, 136, 204, 0.4); /* Shadow yang lebih menonjol */
}

.telegram-button:hover {
  background-color: #007bb5; /* Warna sedikit lebih gelap saat hover */
  transform: translateY(-2px); /* Efek angkat */
}

.telegram-logo {
  width: 24px; /* Ukuran logo */
  height: 24px;
  margin-right: 10px; /* Jarak antara logo dan teks */
  filter: brightness(0) invert(1); /* Membuat logo putih agar kontras dengan background biru */
}


/* ========================================================================== */
/* ======================== MEDIA QUERIES FOR RESPONSIVENESS ================ */
/* ========================================================================== */

@media (max-width: 768px) {
  /* Header & Nav for general pages (index, signin, signup) */
  header {
    padding: 1rem; /* Kurangi padding */
    flex-direction: column; /* Tumpuk elemen di mobile */
    align-items: flex-start; /* Rata kiri */
  }

  header h1 {
    margin-bottom: 0.5rem; /* Beri jarak antara judul dan nav */
    font-size: 1.5rem; /* Perkecil ukuran font judul */
  }

  header nav {
    width: 100%; /* Ambil lebar penuh */
    justify-content: flex-start; /* Mulai dari kiri */
    overflow-x: auto; /* Memungkinkan scroll horizontal */
    -webkit-overflow-scrolling: touch; /* Untuk scrolling yang lebih halus di iOS */
    white-space: nowrap; /* Mencegah item baris baru */
    padding-bottom: 0.5rem; /* Sedikit padding di bawah untuk scrollbar */
    gap: 0.8rem; /* Kurangi jarak antar item */
  }

  header nav a,
  header nav button {
    padding: 0.5rem 0.8rem; /* Sesuaikan padding untuk tombol/link */
    font-size: 0.9rem; /* Sedikit perkecil font */
  }

  /* Navbar for user-dashboard */
  .navbar {
    padding: 1rem; /* Kurangi padding */
    flex-wrap: wrap; /* Izinkan wrap jika perlu, tapi nav-links akan scroll */
    justify-content: center; /* Pusatkan konten */
  }

  .navbar-brand {
    width: 100%; /* Ambil lebar penuh */
    text-align: center; /* Pusatkan brand */
    margin-bottom: 1rem; /* Beri jarak antara brand dan link */
  }

  .navbar-brand h1 a {
    font-size: 1.5rem; /* Perkecil ukuran font brand */
  }

  .nav-links {
    width: 100%; /* Ambil lebar penuh */
    justify-content: flex-start; /* Mulai link dari kiri */
    overflow-x: auto; /* Memungkinkan scroll horizontal */
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    padding-bottom: 0.5rem; /* Sedikit padding di bawah untuk scrollbar */
    gap: 0.8rem; /* Kurangi jarak antar item */
  }

  .nav-links li a {
    padding: 0.5rem 0.8rem; /* Sesuaikan padding untuk link */
    font-size: 0.9rem; /* Sedikit perkecil font */
  }

  /* Main content area */
  main {
    padding: 1rem; /* Kurangi padding di main content */
  }

  section {
    padding: 1.5rem; /* Kurangi padding di section */
  }

  section h2 {
    font-size: 1.5rem; /* Perkecil judul section */
  }

  /* Hero section */
  .hero {
    padding: 3rem 1.5rem; /* Kurangi padding hero */
    margin: 1.5rem auto; /* Sesuaikan margin */
  }

  .hero h2 {
    font-size: 2rem; /* Perkecil judul hero */
  }

  .hero p {
    font-size: 1rem; /* Perkecil paragraf hero */
  }

  .hero button {
    padding: 0.7rem 1.5rem; /* Sesuaikan padding tombol hero */
    font-size: 0.9rem; /* Perkecil font tombol hero */
  }

  /* Auth section */
  .auth-section {
    margin: 2rem auto; /* Kurangi margin atas/bawah */
    padding: 1.5rem; /* Kurangi padding */
  }

  .auth-section h2 {
    font-size: 1.5rem; /* Perkecil judul auth */
  }

  .auth-section input,
  .auth-section button {
    padding: 0.7rem; /* Sesuaikan padding input/button auth */
    font-size: 0.9rem; /* Perkecil font input/button auth */
  }

  /* Product grid */
  .products-grid {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); /* Sesuaikan ukuran produk agar lebih kecil */
    gap: 1rem; /* Kurangi jarak antar produk */
  }

  .product {
    padding: 0.8rem; /* Kurangi padding produk */
  }

  .product img {
    width: 100px; /* Perkecil gambar produk */
    height: 100px;
    margin: 0.8rem 0;
  }

  .product h3 {
    font-size: 1rem; /* Perkecil font judul produk */
  }

  .product p {
    font-size: 0.85rem; /* Perkecil font harga produk */
    margin-bottom: 0.8rem;
  }

  .product button {
    padding: 0.5rem 0.8rem; /* Sesuaikan padding tombol produk */
    font-size: 0.8rem; /* Perkecil font tombol produk */
    margin: 0.3rem;
  }

  /* Admin Products List */
  #productsList div {
    flex-direction: column; /* Tumpuk item di layar kecil */
    align-items: flex-start; /* Rata kiri */
    padding: 0.6rem;
    gap: 0.3rem;
  }

  #productsList div p {
    font-size: 0.9rem;
  }

  .product-actions {
    width: 100%; /* Ambil lebar penuh */
    justify-content: flex-start; /* Rata kiri tombol aksi */
    margin-top: 0.5rem;
  }

  /* Admin & User Order List */
  .order {
    padding: 0.8rem;
    margin: 0.8rem 0;
  }

  .order p {
    font-size: 0.9rem;
    margin: 0.2rem 0;
  }

  .order select {
    width: 100%; /* Ambil lebar penuh */
    margin-top: 0.8rem;
    font-size: 0.9rem;
    padding: 0.4rem;
  }

  .order button.admin-button {
    width: 100%; /* Ambil lebar penuh */
    margin-top: 0.5rem;
    margin-right: 0; /* Hapus margin kanan */
    padding: 0.6rem;
    font-size: 0.9rem;
  }

  /* Modals */
  .modal-content {
    padding: 1.5rem; /* Kurangi padding modal */
  }

  .modal-content h3 {
    font-size: 1.2rem; /* Perkecil font judul modal */
  }

  .modal-content p {
    font-size: 0.9rem;
  }

  .modal-content img {
    max-width: 180px; /* Perkecil gambar QRIS di modal */
    height: 180px;
  }

  .modal-content input[type="file"],
  .modal-content input[type="email"],
  .modal-content textarea {
    width: 100%; /* Ambil lebar penuh di mobile */
    margin: 0.8rem auto; /* Sesuaikan margin */
    padding: 0.6rem; /* Kurangi padding */
    font-size: 0.9rem; /* Perkecil font */
  }

  .modal-content input[type="file"]::-webkit-file-upload-button,
  .modal-content input[type="file"]::file-selector-button {
    padding: 0.5rem 0.8rem; /* Sesuaikan padding tombol file */
    font-size: 0.8rem; /* Perkecil font tombol file */
  }

  .modal-content .row {
    flex-direction: column; /* Tumpuk tombol di modal */
    gap: 0.8rem;
  }

  .modal-content button {
    width: 100%; /* Ambil lebar penuh */
    padding: 0.7rem; /* Sesuaikan padding tombol modal */
    font-size: 0.9rem; /* Perkecil font tombol modal */
  }

  /* Search input */
  #productSearch {
    width: 100%; /* Ambil lebar penuh di mobile */
    max-width: none; /* Hapus batasan max-width */
    font-size: 0.9rem;
    padding: 0.6rem;
  }

  /* Admin buttons (general) */
  .admin-button {
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    margin-top: 0.3rem;
    margin-right: 0.3rem;
  }

  /* Product Categories Buttons */
  .product-categories {
    gap: 0.5rem;
    margin-bottom: 1.5rem;
  }

  .category-button {
    padding: 0.6rem 1rem;
    font-size: 0.9rem;
  }

  /* Telegram button responsiveness */
  .telegram-button-container {
    margin-bottom: 1.5rem;
  }

  .telegram-button {
    padding: 0.6rem 1rem;
    font-size: 0.9rem;
  }

  .telegram-logo {
    width: 20px;
    height: 20px;
    margin-right: 8px;
  }

  /* Rating Summary (User Dashboard & Admin Dashboard) */
  .rating-summary {
    padding: 1rem;
    margin-bottom: 1.5rem;
  }

  .rating-summary h3 {
    font-size: 1.2rem;
    margin-bottom: 0.8rem; /* Sesuaikan margin bawah judul */
  }

  .rating-summary p {
    font-size: 0.9rem;
    margin-bottom: 0.3rem; /* Kurangi margin antar paragraf statistik */
    display: flex; /* Gunakan flexbox untuk menata konten dalam satu baris */
    align-items: center; /* Pusatkan secara vertikal */
    flex-wrap: wrap; /* Izinkan wrap jika konten terlalu panjang */
    gap: 0.5rem; /* Jarak antar elemen dalam satu baris statistik */
  }

  .rating-summary p strong {
    flex-shrink: 0; /* Mencegah angka rating mengecil */
  }

  .rating-summary p span {
    flex-shrink: 0; /* Mencegah persentase mengecil */
  }

  .rating-summary .progress-bar-container {
    flex-grow: 1; /* Biarkan progress bar mengambil sisa ruang */
    min-width: 80px; /* Beri lebar minimum agar terlihat */
    height: 8px; /* Perkecil tinggi progress bar */
    margin-top: 0; /* Hapus margin atas */
  }

  /* Ratings Table */
  .ratings-table {
    font-size: 0.85rem; /* Perkecil font tabel */
  }

  .ratings-table th, .ratings-table td {
    padding: 0.5rem; /* Kurangi padding sel tabel */
    /* Tambahkan overflow-x untuk tabel agar bisa di-scroll jika terlalu lebar */
    white-space: nowrap; /* Mencegah teks wrap di sel tabel */
  }

  /* Untuk membuat tabel bisa di-scroll horizontal */
  #ratingsList, #globalRatingsList { /* Perbarui ID untuk user dashboard */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Announcement */
  #announcementContainer {
    padding: 0.8rem;
    margin-bottom: 1.5rem;
  }

  #announcementMessage {
    font-size: 0.9rem;
  }
}


@media (max-width: 768px) {
  /* Pastikan font size minimal 16px untuk input, select, textarea agar tidak zoom di mobile */
  input[type="text"],
  input[type="number"],
  input[type="email"],
  input[type="password"],
  input[type="url"],
  input[type="file"],
  select,
  textarea {
    font-size: 16px !important;
  }
}