/* peacefood — utility extensions on top of Tailwind */

body {
  font-family: 'Inter', system-ui, sans-serif;
  background: #faf7f2;
  color: #2a1a20;
}
.font-display { font-family: 'Fraunces', serif; font-optical-sizing: auto; }

.scrollbar-none::-webkit-scrollbar { display: none; }
.scrollbar-none { -ms-overflow-style: none; scrollbar-width: none; }

.meal-card { transition: transform .18s ease, box-shadow .18s ease; }
.meal-card:hover { transform: translateY(-1px); box-shadow: 0 1px 2px rgba(42,26,32,0.06), 0 16px 36px -6px rgba(42,26,32,0.14); }

.allergen { display: inline-flex; align-items: center; gap: .25rem; padding: .15rem .5rem; border-radius: 999px; font-size: .65rem; font-weight: 500; background: #f8f1e5; color: #945c22; line-height: 1.1; }
.allergen.subtle { background: #f4f7f2; color: #447047; }

.price-tag { font-feature-settings: "tnum" 1, "lnum" 1; }

/* htmx fade-on-request */
.htmx-request { transition: opacity 300ms; opacity: .35; }

/* allergen popover trigger button: minimal style */
.allergen-trigger { background: none; border: 0; padding: 0; cursor: help; }

/* Django-Forms ohne Custom-Widget: leichtes Tailwind-Look-and-Feel als Fallback.
   Wir scopen das auf <form> innerhalb unseres Inhalts-Bereichs, damit Admin
   nicht beeinflusst wird (Django-Admin nutzt eigene Container). */
main form input[type="text"],
main form input[type="email"],
main form input[type="number"],
main form input[type="tel"],
main form input[type="url"],
main form input[type="password"],
main form input[type="search"],
main form input[type="date"],
main form input[type="datetime-local"],
main form select,
main form textarea {
  width: 100%;
  border: 1px solid #ecbed1;       /* burgundy-200 */
  border-radius: 0.5rem;
  background: #fff;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  color: #2a1a20;
  line-height: 1.4;
  transition: border-color .15s ease, box-shadow .15s ease;
}
main form input[type="text"]:focus,
main form input[type="email"]:focus,
main form input[type="number"]:focus,
main form input[type="tel"]:focus,
main form input[type="url"]:focus,
main form input[type="password"]:focus,
main form input[type="search"]:focus,
main form input[type="date"]:focus,
main form input[type="datetime-local"]:focus,
main form select:focus,
main form textarea:focus {
  outline: none;
  border-color: #a23f64;          /* burgundy-500 */
  box-shadow: 0 0 0 3px rgba(127, 31, 70, 0.15);
}
main form textarea { min-height: 5rem; resize: vertical; }
main form input[type="checkbox"],
main form input[type="radio"] {
  accent-color: #7f1f46;
  width: 1rem; height: 1rem;
  margin-right: 0.4rem;
  vertical-align: middle;
}

/* Liefer-App Mengen-Stepper: die generischen Form-Input-Regeln oben
   (width:100%, Border, Padding) würden das Zahlenfeld aufblähen —
   hier gezielt übersteuern. Buttons/Farben kommen aus Tailwind-Klassen. */
main form .qty-stepper input[type="number"] {
  width: 2.5rem;
  border: 0;
  border-radius: 0;
  padding: 0.625rem 0.125rem;
  font-size: 1.125rem;
  font-weight: 600;
  text-align: center;
  appearance: textfield;
  -moz-appearance: textfield;
}
main form .qty-stepper input[type="number"]:focus {
  box-shadow: none;
  background: #faf6ef;
}
main form .qty-stepper input::-webkit-outer-spin-button,
main form .qty-stepper input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}