/* FOOD VIBES · Step 54 — Customer menu filter in Dark Mode only.
   Loaded last in menu.php only when theme_mode = dark.
   Corrects the old white .menu-controls surface and its turquoise labels. */
html body .customer-wrap .menu-controls,
html body main .menu-controls {
  background: #192f34 !important;
  background-image: none !important;
  border: 1px solid #638c88 !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .22) !important;
  color: #edf8f6 !important;
}
html body .customer-wrap .menu-controls .filter-form,
html body main .menu-controls .filter-form {
  background: transparent !important;
  color: #edf8f6 !important;
}
html body .customer-wrap .menu-controls label,
html body main .menu-controls label {
  color: #edf8f6 !important;
  opacity: 1 !important;
  font-weight: 700 !important;
}
html body .customer-wrap .menu-controls input[type="search"],
html body .customer-wrap .menu-controls input[type="text"],
html body .customer-wrap .menu-controls select,
html body main .menu-controls input[type="search"],
html body main .menu-controls input[type="text"],
html body main .menu-controls select {
  background: #10262b !important;
  background-image: none !important;
  color: #f0fbf8 !important;
  border: 1px solid #6e9994 !important;
  caret-color: #86f4e6 !important;
  opacity: 1 !important;
  min-height: 44px;
}
html body .customer-wrap .menu-controls input::placeholder,
html body main .menu-controls input::placeholder {
  color: #afc9c5 !important;
  opacity: 1 !important;
}
html body .customer-wrap .menu-controls select option,
html body main .menu-controls select option {
  background: #10262b !important;
  color: #f0fbf8 !important;
}
html body .customer-wrap .menu-controls :is(input, select):focus-visible,
html body main .menu-controls :is(input, select):focus-visible {
  outline: 3px solid #77eddd !important;
  outline-offset: 2px;
  border-color: #a2ffee !important;
}
html body .customer-wrap .menu-controls button.btn,
html body main .menu-controls button.btn {
  background: #13b9ad !important;
  background-image: none !important;
  color: #062d2b !important;
  border: 1px solid #13b9ad !important;
  font-weight: 800 !important;
  min-height: 44px;
}
html body .customer-wrap .menu-controls .btn.btn-outline,
html body main .menu-controls .btn.btn-outline {
  background: #29454b !important;
  background-image: none !important;
  color: #f2fffc !important;
  border: 1px solid #7ca49f !important;
  font-weight: 750 !important;
  min-height: 44px;
}
html body .customer-wrap .menu-controls :is(button.btn,.btn.btn-outline):hover,
html body main .menu-controls :is(button.btn,.btn.btn-outline):hover {
  filter: brightness(1.08);
}
@media (max-width: 650px) {
  html body .customer-wrap .menu-controls { padding: 18px !important; }
  html body .menu-controls .filter-form { align-items: stretch; }
  html body .menu-controls .filter-form > div,
  html body .menu-controls .filter-form > .btn { min-width: 0; width: 100%; }
}
@media print {
  html body .menu-controls { display: none !important; }
}