/**
 * Menu Template 1 — "Modern Grid" (free/default).
 * Loaded on top of frontend.css; layout only, scoped under .cqm-menu--template-1
 * — colors always come from the active color theme's CSS variables.
 */

/* A soft tinted page background so the white item cards read as distinct
   floating cards, matching the reference design's cream-on-white contrast. */
.cqm-menu--template-1 {
  background: var(--cqm-bg-soft);
}

/* Filter pills row (veg/non-veg quick filters), styled as plain outlined
   pills sitting just under the hero info — matches the reference design's
   "Vegetarian only" / "Recommended" quick-filter row. */
.cqm-menu--template-1 .cqm-menu__veg-filters {
  padding: 4px 16px 10px;
}

.cqm-menu--template-1 .cqm-veg-filter {
  border-radius: 999px;
  font-size: 13px;
}

/* Category tabs: icon-on-top pill cards, matching the food-delivery-app reference. */
.cqm-menu--template-1 .cqm-category-pill {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 84px;
  padding: 10px 8px;
  border-radius: 16px;
  text-align: center;
  white-space: normal;
}

.cqm-menu--template-1 .cqm-category-pill[aria-current="true"] {
  background: var(--cqm-text);
  border-color: var(--cqm-text);
  color: var(--cqm-bg);
}

.cqm-category-pill__icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--cqm-bg-soft);
}

.cqm-category-pill__icon--emoji {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.cqm-category-pill__label {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  display: block;
}

/* "All Items" heading + grid/list view toggle */
.cqm-menu__view-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px 6px;
}

.cqm-menu__view-heading {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  color: var(--cqm-text);
}

.cqm-view-toggle {
  display: flex;
  gap: 6px;
}

.cqm-view-toggle__btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid var(--cqm-border);
  background: var(--cqm-bg-soft);
  color: var(--cqm-text-muted);
  cursor: pointer;
  font-size: 14px;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease;
}

.cqm-view-toggle__btn[aria-pressed="true"] {
  background: var(--cqm-text);
  border-color: var(--cqm-text);
  color: var(--cqm-bg);
}

/* Item card: price row + a standalone pill "Add" button with a bag icon. */
.cqm-menu--template-1 .cqm-item-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
}

.cqm-menu--template-1 .cqm-item-card__add-btn {
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13px;
  flex: 0 0 auto;
}

.cqm-item-card__add-icon {
  font-size: 14px;
}

/*
 * Grid view vs. list view. Without this, "grid" and "list" looked identical
 * on any screen narrower than 640px, because the shared .cqm-item-grid rule
 * in frontend.css only becomes multi-column at that breakpoint — below it,
 * both views were a single stacked column and the toggle appeared broken.
 * Grid is now a compact 2-up (3-up on wider screens) tile layout at every
 * width, and list is the full-width horizontal row.
 */
.cqm-menu--template-1 .cqm-item-grid {
  /* minmax(0, 1fr), not a bare 1fr: a plain `1fr` track has an implicit
     min-width equal to its content's min-content size, so any child that
     resists shrinking (long unbroken text, etc.) pushes that whole column
     — and the card inside it — past the viewport's right edge on a narrow
     phone instead of wrapping/truncating. minmax(0, 1fr) removes that
     implicit floor. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.cqm-menu--template-1 .cqm-item-grid .cqm-item-card {
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
  padding: 10px;
}

.cqm-menu--template-1 .cqm-item-grid .cqm-item-card__image {
  width: 100%;
  height: 96px;
}

.cqm-menu--template-1 .cqm-item-grid .cqm-item-card__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}

.cqm-menu--template-1 .cqm-item-grid .cqm-item-card__footer {
  margin-top: auto;
  padding-top: 8px;
}

/* Original/current price stacked (one above the other), not side by side
   — on a sale item, both prices plus the circular add button competing for
   one narrow row left too little room and the two crowded together. */
.cqm-menu--template-1 .cqm-item-grid .cqm-item-card__price {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  min-width: 0;
}

.cqm-menu--template-1 .cqm-item-grid .cqm-item-card__price-original {
  margin-right: 0;
}

/* Grid cards use a plain circular "+" (icon/label hidden), matching the
   reference design's compact tile footer; list cards keep the pill
   "Add" button with its bag icon + label (frontend.css/base rule above),
   since a full-width row has the room for it. */
.cqm-menu--template-1 .cqm-item-grid .cqm-item-card__add-btn {
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 50%;
  justify-content: center;
  flex: 0 0 auto;
}

.cqm-menu--template-1 .cqm-item-grid .cqm-item-card__add-btn .cqm-item-card__add-icon,
.cqm-menu--template-1 .cqm-item-grid .cqm-item-card__add-btn span:not(.cqm-icon) {
  display: none;
}

.cqm-menu--template-1 .cqm-item-grid .cqm-item-card__add-btn::after {
  content: "+";
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
}

.cqm-menu--template-1 .cqm-item-list .cqm-item-card {
  flex-direction: row;
  align-items: flex-start;
}

@media (min-width: 900px) {
  .cqm-menu--template-1 .cqm-item-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}