/* --- DINING MENU STYLES --- */

/* Pengaturan Navigasi Kategori */
.menu-filter-nav .nav-link {
  color: #333333;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 1px;
  padding: 0.5rem 1rem;
  margin: 0 0.5rem;
  border-bottom: 2px solid transparent;
  transition: all 0.3s ease;
}

/* Efek Hover dan Kategori Aktif (Garis Emas) */
.menu-filter-nav .nav-link:hover,
.menu-filter-nav .nav-link.active {
  color: #c9a050; /* Warna emas spesifik */
  border-bottom: 2px solid #c9a050;
}

/* Penyesuaian Kartu Menu */
.menu-item-card {
  box-shadow: 0 5px 15px rgba(0,0,0,0.03); /* Bayangan sangat tipis agar kartu tidak terlihat melayang berlebihan */
  transition: transform 0.3s ease;
}

.menu-item-card:hover {
  transform: translateY(-5px); /* Efek naik sedikit saat kursor diarahkan */
}

/* Garis Dekoratif Kecil di Bawah Deskripsi */
.card-divider {
  width: 40px;
  height: 1px;
  background-color: #333333;
}

/* --- SEARCH BAR STYLES --- */

/* 1. Styling the placeholder text */
#menuSearchInput::placeholder {
  color: #a0a0a0; /* Light gray text color */
  font-style: italic; /* Makes the text italic */
  font-family: 'Playfair Display', serif; /* Use Joyluck's elegant font */
  font-size: 1rem;
  opacity: 1; /* Fixes an issue where Firefox makes placeholders transparent */
}

/* 2. Styling the search bar when user clicks/focuses on it */
#menuSearchInput:focus {
  border-color: #c9a050 !important; /* Gold border */
  box-shadow: 0 0 5px rgba(201, 160, 80, 0.3) !important; /* Subtle gold glow */
  outline: none;
}

/* 3. Matching the search icon border color on focus */
#menuSearchInput:focus + #search-addon,
#menuSearchInput:focus ~ #search-addon,
.input-group:focus-within #search-addon {
  border-color: #c9a050 !important;
}