/* Sticky hanya untuk layar md (>=768px) ke atas */
@media (min-width: 768px) {
  .sticky-nav {
    position: sticky;
    top: 0;
    z-index: 1020; /* Pastikan di atas elemen lain */
  }
}

/* Mengatur layout dasar */
body {
  background-color: #f8f9fa;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  font-family: Arial, sans-serif;
}

/* FOOTER */
.footer {
  width: 100%;
  margin-top: auto;
  background: url("footerImageLandscape.png") no-repeat center center/cover;
  height: 600px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  color: white; /* teks menjadi putih */
}
.footer-overlay {
  width: 100%;
  padding: 40px 0;
  text-align: center;
  color: white;
}

#calorie-form {
  display: flex;
  flex-direction: column;
}

/* Heading contoh */
h1 {
  color: #444;
}

/* Style input default */
input {
  padding: 10px;
  margin: 5px;
  width: 200px;
}

/* Style tombol custom (opsional jika tidak pakai .btn Bootstrap) */
button {
  background-color: #ff5733;
  color: white;
  padding: 10px;
  border: none;
  cursor: pointer;
  border-radius: 5px;
}
button:hover {
  background-color: #c70039;
}

/* Setiap item makanan */
.food-item {
  background: #ffffff;
  margin: 5px 0; /* jarak antar item */
  padding: 10px; /* ruang dalam item */
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #ddd; /* garis tipis agar lebih jelas */
}

/* Teks keterangan makanan */
.food-item span {
  flex: 1; /* agar teks lebar otomatis */
  margin-right: 1rem; /* beri jarak dengan tombol */
  word-wrap: break-word; /* pecah teks panjang ke baris baru jika perlu */
  color: #333;
}

/* Atur tombol Edit/Hapus di dalam item makanan */
.food-item button {
  margin-left: 0.5rem; /* jarak antar tombol */
}

/* Total kalori (jika digunakan ID ini) */
#total-calories {
  margin-top: 15px;
  font-weight: bold;
}