/* Inter font is loaded in HTML; use here */
body {
  font-family: 'Inter', sans-serif;
}

/* hide scrollbars for tabs */
.tab-scroll::-webkit-scrollbar { display: none; }
.tab-scroll { -ms-overflow-style: none; scrollbar-width: none; }

/* tab buttons baseline */
.tab-button {
  white-space: nowrap;
  padding: 0.65rem 0.75rem;
  border-bottom-width: 4px;
  border-color: transparent;
  color: #4b5563;
  font-weight: 500;
}

/* active tab */
.tab-button.active {
  color: #2563eb;
  border-color: #2563eb;
  font-weight: 600;
}

/* small switch */
.switch {
  position: relative;
  width: 44px;
  height: 22px;
  display: inline-block;
}
.switch input { display: none; }
.slider {
  position: absolute;
  inset: 0;
  background-color: #cbd5e1;
  border-radius: 999px;
  transition: 0.25s;
}
.slider::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 3px;
  width: 16px;
  height: 16px;
  background: white;
  border-radius: 50%;
  transition: 0.25s;
}
.switch input:checked + .slider {
  background-color: #2563eb;
}
.switch input:checked + .slider::before {
  transform: translateX(22px);
}

/* card baseline (keeps original sizing and layout) */
.menu-card {
  background: white;
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -4px rgba(0,0,0,0.06);
  transition: transform .18s ease, box-shadow .18s ease;
}
.menu-card:hover { transform: translateY(-4px); box-shadow: 0 20px 25px -5px rgba(0,0,0,0.12); }

/* image box (square) */
.menu-card .img-wrap {
  width: 100%;
  aspect-ratio: 1/1;
  overflow: hidden;
}
.menu-card img { width:100%; height:100%; object-fit: cover; display:block; }

/* content area */
.menu-card .card-body { padding: 1rem; }

/* smaller food title as requested */
.food-title {
  font-size: 0.95rem; /* smaller */
  font-weight: 600;
  color: #1f2937;
  line-height: 1.1;
}

/* price pill below name and aligned right */
.price-pill {
  display: block;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  text-align: right;       /* aligns price to the right */
  background-color: rgba(16,185,129,0.12); /* emerald tint */
  color: #059669; /* emerald text */
  padding: 4px 10px;
  border-radius: 9999px;
  font-weight: 700;
  font-size: 0.85rem; /* smaller */
  width: fit-content;
  float: right; /* ensure it's visually at the right corner below name */
}

/* dark mode rules: default is light; these apply only when .dark class is on html */
:root {}
html.dark body {
  background-color: #0b1220;
  color: #e6eef8;
}
html.dark .menu-card { background-color: #111827; }
html.dark .food-title { color: #e6eef8; }
html.dark .tab-button { color: #cbd5e1; }
html.dark .tab-button.active { color: #93c5fd; border-color: #93c5fd; }

/* small responsive tweaks */
@media (max-width: 640px) {
  .food-title { font-size: 0.92rem; }
  .price-pill { font-size: 0.82rem; padding: 3px 8px; }
}