/**
 * Conic QR Menu — customer-facing menu + reservation form styles.
 * Mobile-first, namespaced under .cqm-menu / .cqm-reservation (the two
 * customer-facing root wrappers this file styles — public/views/menu.php
 * and public/views/reservation-form.php) to stay compatible with any theme.
 */

.cqm-menu,
.cqm-reservation {
  --cqm-accent: #d63638;
  --cqm-text: #1d2327;
  --cqm-text-muted: #646970;
  --cqm-border: #e2e4e7;
  --cqm-bg: #ffffff;
  --cqm-bg-soft: #f7f7f8;
  --cqm-radius: 10px;
  /* Reflects the WP admin bar's height when logged in (see the media
	   query further down) — used only by .cqm-category-section's
	   scroll-margin-top now, so an anchor-jump to a category doesn't land
	   partially hidden behind it. Not related to this file's own topbar,
	   which isn't sticky. */
  --cqm-topbar-offset: 0px;

  box-sizing: border-box;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  /* !important: a host theme's own body/heading color rules (e.g. Hello
	   Elementor's `body { color: #333 }`) are a normal, common CSS pattern,
	   not a bug in the theme — but since color is inherited, anything
	   inside this menu/reservation form that doesn't set its own color
	   would otherwise pick up the theme's instead of ours. Locking it down
	   here, at the one root every descendant inherits from, is what
	   guarantees our palette wins regardless of that theme rule's
	   specificity or load order. */
  color: var(--cqm-text) !important;
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
    sans-serif !important;
  line-height: 1.4;
  position: relative;
  overflow-x: hidden;
}

/* Every open/closed toggle in this plugin (the item modal, cart drawer,
   cart bar, veg filters, view toolbar, date/time pickers, etc.) works by
   setting/removing the `hidden` attribute in JS, and several of those
   elements also set `display` unconditionally (flex layouts, mostly) for
   when they ARE shown. A host theme's own global CSS can happen to match
   one of those elements too (a broad "all direct children of X" reset is a
   common real-world case) and win the cascade, silently keeping it
   visually visible regardless of the `hidden` attribute — this single
   blanket rule is what guarantees `hidden` always wins inside .cqm-menu/
   .cqm-reservation, no matter what other CSS the host page loads. Keep
   this rule instead of adding narrower per-element [hidden] overrides as
   new cases turn up; it already covers all of them. */
.cqm-menu [hidden],
.cqm-reservation [hidden] {
  display: none !important;
}

.cqm-menu *,
.cqm-menu *::before,
.cqm-menu *::after,
.cqm-reservation *,
.cqm-reservation *::before,
.cqm-reservation *::after {
  box-sizing: border-box;
}

/* Animations */

@keyframes cqm-card-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes cqm-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes cqm-panel-in {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes cqm-cart-pulse {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.18);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes cqm-skeleton-shimmer {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: 0 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cqm-menu,
  .cqm-menu * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

.cqm-menu__cart-btn--pulse {
  animation: cqm-cart-pulse 0.4s ease;
}

.cqm-menu__loading {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cqm-skeleton-card {
  display: block;
  height: 84px;
  border-radius: var(--cqm-radius);
  background: linear-gradient(
    90deg,
    var(--cqm-bg-soft) 25%,
    var(--cqm-border) 37%,
    var(--cqm-bg-soft) 63%
  );
  background-size: 400% 100%;
  animation: cqm-skeleton-shimmer 1.4s ease infinite;
}

.cqm-modal:not([hidden]) .cqm-modal__backdrop,
.cqm-drawer:not([hidden]) .cqm-drawer__backdrop {
  animation: cqm-fade-in 0.2s ease;
}

.cqm-modal:not([hidden]) .cqm-modal__panel,
.cqm-drawer:not([hidden]) .cqm-drawer__panel {
  animation: cqm-panel-in 0.25s ease;
}

/* Quick-add confirmation toast. Background/text are the theme's own
   text/background colors swapped (not --cqm-accent), so it reads as a
   neutral dark confirmation chip with reliable contrast in every theme,
   light or dark. */
.cqm-toast {
  position: fixed;
  left: 50%;
  bottom: 88px;
  z-index: 200;
  max-width: calc(100% - 32px);
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--cqm-text);
  color: var(--cqm-bg);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
  opacity: 0;
  transform: translate(-50%, 8px);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
  pointer-events: none;
}

.cqm-toast--visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

/*
 * Many themes apply global `button:hover`/`button:focus` rules (background/color
 * fills) that would otherwise bleed into our card/pill/chip buttons, since the
 * cascade applies per-property and a theme rule "wins" on any property we don't
 * explicitly re-declare for that state. `all: unset` on the base element plus a
 * matching :focus-visible ring keeps every button's own colors intact regardless
 * of what the active theme declares for bare `button` selectors.
 */
/* :where() carries zero specificity, so every rule below still wins the cascade normally. */
:where(.cqm-menu, .cqm-reservation) button {
  all: unset;
  box-sizing: border-box;
  font-family: inherit;
  cursor: pointer;
}

.cqm-menu button:focus-visible,
.cqm-reservation button:focus-visible {
  outline: 2px solid var(--cqm-accent);
  outline-offset: 2px;
}

/*
 * The `all: unset` reset above only covers the button's *default* state.
 * Themes frequently target `button:hover` / `button:focus` specifically
 * (same specificity as an equivalent selector of ours, tie-broken by
 * stylesheet order — which we can't control against an arbitrary theme),
 * so those rules can still repaint our buttons on interaction. `!important`
 * here is a deliberate, narrowly-scoped exception to keep every button's
 * own colors stable no matter what a theme declares for bare `button`.
 */
.cqm-menu button:hover,
.cqm-menu button:focus,
.cqm-menu button:active,
.cqm-reservation button:hover,
.cqm-reservation button:focus,
.cqm-reservation button:active {
  background-color: var(--cqm-btn-bg, transparent) !important;
  background-image: none !important;
  color: var(--cqm-btn-color, inherit) !important;
  border-color: var(--cqm-btn-border, transparent) !important;
  text-decoration: none !important;
}

.cqm-menu__noscript {
  padding: 16px;
  background: #fff3cd;
  border: 1px solid #ffe69c;
  border-radius: var(--cqm-radius);
  margin: 12px;
}

/* Restaurant brand header: logo + name. A soft, low-key strip rather than
   its own heavily-bordered block — .cqm-menu__topbar's own top border
   (added just below, only when this element is actually present) is what
   separates the two, so hiding branding (CQM_Settings::is_branding_visible())
   never leaves a stray double border behind. */
.cqm-menu__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--cqm-bg);
}

.cqm-menu__logo {
  width: 36px;
  height: 36px;
  object-fit: cover;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--cqm-accent) 25%, transparent);
}

.cqm-menu__brand-name {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--cqm-text);
  line-height: 1.3;
  letter-spacing: -0.01em;
}

/* Top bar: table badge, search, cart button. Deliberately not sticky —
   stacked bars each pinning to the viewport (topbar, then category nav,
   then veg filters) is fragile: each one needs the exact rendered height
   of everything above it, which drifts under real content (branding
   on/off, wrapping, category count) and reliably breaks as an opaque bar
   covering the next row. Plain document flow instead — nothing overlaps
   anything else, full stop. */
.cqm-menu__topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  row-gap: 6px;
  width: 100%;
  min-width: 0;
  padding: 10px 16px 14px;
  background: var(--cqm-bg);
  border-bottom: 1px solid var(--cqm-border);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

/* Compact brand (logo + name) when it sits *inside* the topbar, as on the
   customer-facing menu — reservation-form.php reuses the same .cqm-menu__brand/
   .cqm-menu__logo/.cqm-menu__brand-name classes for its own full-size,
   standalone header, so this override is scoped to the topbar context only,
   leaving that other usage untouched.
   flex-shrink is allowed (the row's other items — search/language/waiter/
   cart — never shrink, see below), but min-width puts a floor under it so
   a long restaurant name truncates to a few legible characters instead of
   being crushed to a sliver; flex-wrap on the row above is the fallback
   for when even that doesn't fit (e.g. a long name + many languages). */
.cqm-menu__topbar .cqm-menu__brand {
  padding: 0;
  background: transparent;
  flex: 0 1 auto;
  min-width: 90px;
  max-width: 42%;
}

.cqm-menu__topbar .cqm-menu__logo {
  width: 30px;
  height: 30px;
}

.cqm-menu__topbar .cqm-menu__brand-name {
  display: block;
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Full-width "you're ordering from Table X" banner, shown right under the
   topbar whenever a table number has been captured (see frontend-menu.js's
   captureTable()) — a solid accent bar, not a pill, so it reads as the
   session's own header strip rather than a small status chip. */
.cqm-menu__table-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 10px 16px;
  background: var(--cqm-accent);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-align: center;
}

.cqm-menu__table-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #fff;
}

/* ------------------------------------------------------------------ */
/* Hero banner: wide photo + overlapping logo + name/tagline/label     */
/* ------------------------------------------------------------------ */

.cqm-menu__hero {
  position: relative;
}

.cqm-menu__hero-photo {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--cqm-bg-soft);
}

.cqm-menu__hero-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cqm-menu__hero-info {
  position: relative;
  padding: 0 16px 14px;
}

.cqm-menu__hero-logo {
  display: block;
  width: 60px;
  height: 60px;
  margin-top: -30px;
  object-fit: cover;
  background: var(--cqm-accent);
  border: 3px solid var(--cqm-bg);
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

.cqm-menu__hero-logo--initial {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 24px;
  font-weight: 800;
}

.cqm-menu__hero-name {
  margin: 10px 0 4px;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.cqm-menu__hero-tagline {
  margin: 0 0 8px;
  font-size: 14px;
  color: var(--cqm-text-muted);
}

.cqm-menu__hero-label {
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--cqm-accent);
}

.cqm-menu__search {
  flex: 1 1 auto;
  position: relative;
  min-width: 0;
}

.cqm-menu svg,
.cqm-reservation svg {
  display: block;
  width: 20px;
  height: 20px;
}

.cqm-icon svg {
  width: 16px;
  height: 16px;
}

.cqm-menu__search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  color: var(--cqm-text-muted);
  pointer-events: none;
}

.cqm-menu__search-icon svg,
.cqm-menu__waiter-icon svg,
.cqm-menu__cart-icon svg {
  width: 17px;
  height: 17px;
}

/* type="text" (see public/views/menu.php) rather than type="search" — no
   native browser search decoration to fight with, so this padding-left is
   the only thing determining the icon/text gap: icon sits at 14px and is
   17px wide, text starts at 46px, a clean 15px gap between them. */
.cqm-menu__search-input {
  display: block;
  width: 100%;
  min-width: 0;
  height: 44px;
  padding: 0 14px 0 35px !important;
  border: 1px solid var(--cqm-border);
  border-radius: 999px;
  background: var(--cqm-bg-soft);
  font-size: 14.5px;
  color: var(--cqm-text);
  -webkit-appearance: none;
  appearance: none;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    background-color 0.15s ease;
}

.cqm-menu__search-input:focus {
  outline: none;
  border-color: var(--cqm-accent);
  background: var(--cqm-bg);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cqm-accent) 18%, transparent);
}

.cqm-menu__language-select {
  flex: 0 0 auto;
  height: 40px;
  max-width: 100px;
  padding: 0 8px;
  border: 1px solid var(--cqm-border);
  border-radius: 999px;
  background: var(--cqm-bg-soft);
  font-size: 12.5px;
  color: var(--cqm-text);
}

.cqm-menu__cart-btn,
.cqm-menu__waiter-btn,
.cqm-menu__search-toggle-btn {
  --cqm-btn-bg: var(--cqm-bg-soft);
  --cqm-btn-color: var(--cqm-text);
  --cqm-btn-border: var(--cqm-border);

  position: relative;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cqm-btn-bg);
  border: 1px solid var(--cqm-btn-border);
  border-radius: 50%;
  color: var(--cqm-btn-color);
  cursor: pointer;
  padding: 0;
  transition:
    transform 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    color 0.15s ease;
}

/* Language/waiter/cart as one group, pinned to the topbar's trailing edge
   — the search toggle sits separately, on the leading edge (right after
   the brand, if shown) rather than in this cluster. Grouping these three
   also means that if the topbar's flex-wrap (above) has to drop them to a
   second row on a narrow/cramped host page, they wrap together rather
   than splitting mid-group. */
.cqm-menu__topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  margin-left: auto;
}

.cqm-menu__search-toggle-btn svg {
  width: 18px;
  height: 18px;
}

.cqm-menu__search-toggle-btn[aria-expanded="true"] {
  --cqm-btn-bg: var(--cqm-accent);
  --cqm-btn-color: #fff;
  --cqm-btn-border: var(--cqm-accent);
}

/* Full-width search row, collapsed by default — revealed under the topbar
   when the search toggle button is activated (frontend-menu.js). */
.cqm-menu__search-row {
  padding: 10px 16px;
  background: var(--cqm-bg);
  border-bottom: 1px solid var(--cqm-border);
}

.cqm-menu__search-row .cqm-menu__search {
  width: 100%;
}

.cqm-menu__cart-btn:hover,
.cqm-menu__waiter-btn:hover,
.cqm-menu__search-toggle-btn:hover {
  /* Reassigning the custom properties (not border-color/color directly)
	   is what actually takes effect here — the shared button:hover rule
	   above applies border-color/color !important from these same two
	   variables, and !important always wins over a plain declaration of
	   the same property regardless of selector specificity. */
  --cqm-btn-border: var(--cqm-accent);
  --cqm-btn-color: var(--cqm-accent);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

.cqm-menu__cart-count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  background: var(--cqm-accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.cqm-waiter-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 6px;
}

.cqm-waiter-option {
  --cqm-btn-bg: var(--cqm-bg);
  --cqm-btn-color: var(--cqm-text);
  --cqm-btn-border: var(--cqm-border);

  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 56px;
  padding: 12px 16px;
  background: var(--cqm-btn-bg);
  color: var(--cqm-btn-color);
  border: 1px solid var(--cqm-btn-border);
  border-radius: 14px;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

.cqm-waiter-option:hover {
  /* See .cqm-menu__cart-btn:hover's own comment for why this reassigns
	   the custom property rather than setting border-color directly. */
  --cqm-btn-border: var(--cqm-accent);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.cqm-waiter-option__icon {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--cqm-accent) 12%, var(--cqm-bg));
  color: var(--cqm-accent);
}

.cqm-waiter-option__icon svg {
  width: 20px;
  height: 20px;
}

.cqm-waiter-option__label {
  flex: 1 1 auto;
}

.cqm-waiter-option__arrow {
  flex: 0 0 auto;
  display: flex;
  color: var(--cqm-text-muted);
}

.cqm-waiter-option__arrow svg {
  width: 16px;
  height: 16px;
}

.cqm-waiter-other-field {
  margin-top: 4px;
}

/* Category nav — see .cqm-menu__topbar's own docblock for why this isn't sticky. */
.cqm-menu__categories {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  overflow-x: auto;
  background: var(--cqm-bg);
  border-bottom: 1px solid var(--cqm-border);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.cqm-menu__categories::-webkit-scrollbar {
  display: none;
}

.cqm-category-pill {
  --cqm-btn-bg: var(--cqm-bg-soft);
  --cqm-btn-color: var(--cqm-text);
  --cqm-btn-border: var(--cqm-border);

  flex: 0 0 auto;
  min-height: 36px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--cqm-btn-border);
  background: var(--cqm-btn-bg);
  color: var(--cqm-btn-color);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.cqm-category-pill[aria-current="true"] {
  --cqm-btn-bg: var(--cqm-text);
  --cqm-btn-color: #fff;
  --cqm-btn-border: var(--cqm-text);

  background: var(--cqm-btn-bg);
  border-color: var(--cqm-btn-border);
  color: var(--cqm-btn-color);
}

/* Tag filters */
.cqm-menu__tags {
  display: flex;
  gap: 6px;
  padding: 8px 12px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.cqm-menu__tags::-webkit-scrollbar {
  display: none;
}

.cqm-tag-chip {
  --cqm-btn-bg: var(--cqm-bg);
  --cqm-btn-color: var(--cqm-text-muted);
  --cqm-btn-border: var(--cqm-border);

  flex: 0 0 auto;
  min-height: 32px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--cqm-btn-border);
  background: var(--cqm-btn-bg);
  color: var(--cqm-btn-color);
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}

.cqm-tag-chip[aria-pressed="true"] {
  --cqm-btn-bg: #fdeeee;
  --cqm-btn-color: var(--cqm-accent);
  --cqm-btn-border: var(--cqm-accent);

  background: var(--cqm-btn-bg);
  border-color: var(--cqm-btn-border);
  color: var(--cqm-btn-color);
}

/* Content */
.cqm-menu__content {
  padding: 8px 12px 24px;
}

.cqm-menu__loading {
  padding: 40px 12px;
  text-align: center;
  color: var(--cqm-text-muted);
}

.cqm-menu__empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--cqm-text-muted);
}

.cqm-menu__empty-clear {
  --cqm-btn-bg: var(--cqm-bg-soft);
  --cqm-btn-color: var(--cqm-text);
  --cqm-btn-border: var(--cqm-border);

  margin-top: 12px;
  display: inline-block;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--cqm-btn-border);
  background: var(--cqm-btn-bg);
  color: var(--cqm-btn-color);
  cursor: pointer;
  font-size: 14px;
}

.cqm-category-section {
  margin-top: 20px;
  scroll-margin-top: calc(var(--cqm-topbar-offset) + 120px);
}

.cqm-category-section__title {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 10px;
}

.cqm-item-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.cqm-item-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Item card */
.cqm-item-card {
  --cqm-btn-bg: var(--cqm-bg);
  --cqm-btn-color: inherit;
  --cqm-btn-border: #c3c4c7;

  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px;
  border: 1px solid var(--cqm-border);
  border-radius: var(--cqm-radius);
  background: var(--cqm-bg);
  cursor: pointer;
  text-align: left;
  width: 100%;
  font: inherit;
  color: inherit;
  position: relative;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.15s ease;
  animation: cqm-card-in 0.35s ease both;
}

.cqm-item-card:hover {
  border-color: var(--cqm-btn-border);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
  transform: translateY(-1px);
}

.cqm-item-card:focus-visible {
  outline: 2px solid var(--cqm-accent);
  outline-offset: 2px;
}

.cqm-item-card__price-original {
  color: var(--cqm-text-muted);
  text-decoration: line-through;
  font-size: 13px;
  margin-right: 6px;
}

.cqm-item-card__price-current {
  font-weight: 700;
}

.cqm-item-card__add-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1px solid var(--cqm-accent);
  background: var(--cqm-accent);
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

.cqm-item-card__add-btn:hover {
  transform: scale(1.05);
}

.cqm-item-card__add-btn:active {
  transform: scale(0.96);
}

.cqm-item-card__image {
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  border-radius: 8px;
  object-fit: cover;
  background: var(--cqm-bg-soft);
}

.cqm-item-card__image--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: var(--cqm-text-muted);
}

.cqm-item-card__body {
  flex: 1 1 auto;
  min-width: 0;
}

.cqm-item-card__name {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 15px;
  margin: 0 0 4px;
}

.cqm-item-card__desc {
  font-size: 13px;
  color: var(--cqm-text-muted);
  margin: 0 0 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cqm-item-card__price {
  font-weight: 700;
  font-size: 14px;
}

/* Weight / prep-time / allergens meta block (buildMetaRow() in
   frontend-menu.js, used by template-2's rustic card and template-3's
   explorer card): weight + prep time share one row (both short,
   fixed-format), allergens gets its own row below. Cramming all three
   onto one row left too little width per item on a narrow card and
   truncated them to illegible fragments; wrapping all three freely onto
   separate lines each cost an extra row of vertical space per item. This
   is the middle ground. */
.cqm-item-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
  font-size: 12px;
  color: var(--cqm-text-muted);
}

.cqm-item-meta__row {
  display: flex;
  flex-wrap: wrap;
  row-gap: 2px;
  column-gap: 10px;
}

.cqm-item-meta__part {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}

.cqm-item-meta__allergens {
  align-self: flex-start;
  cursor: help;
  text-decoration: underline dotted;
}

.cqm-item-card--sold-out .cqm-item-card__image {
  filter: grayscale(1);
  opacity: 0.6;
}

.cqm-item-card--sold-out .cqm-item-card__name,
.cqm-item-card--sold-out .cqm-item-card__price {
  opacity: 0.55;
}

.cqm-badge-sold-out-ribbon {
  display: inline-block;
  padding: 2px 8px;
  background: #2c2c2c;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

/* Item badge (Recommended/New) — solid fill (not a soft tint) so it stays
   readable sitting directly on top of a photo, matching the reference
   design. */
.cqm-item-badge {
  display: inline-block;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

.cqm-item-badge--recommended {
  background: var(--cqm-accent);
  color: #fff;
}

.cqm-item-badge--new {
  background: var(--cqm-text);
  color: var(--cqm-bg);
}

/* Icon-only variant (buildBadgeIndicator() in frontend-menu.js) — a small
   round chip instead of an uppercase text pill, since the full label
   ("Recommended", "Sold Out"...) doesn't fit legibly at overlay size. The
   label is still available as a tooltip: native hover/focus on desktop,
   plus a tap-to-toggle .cqm-item-badge--show-label class for touch (see
   init()'s delegated click handler in frontend-menu.js). */
.cqm-item-badge--icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border-radius: 50%;
  cursor: default;
}

.cqm-item-badge--icon svg {
  width: 13px;
  height: 13px;
}

.cqm-item-badge--icon.cqm-item-badge--sold-out {
  background: #2c2c2c;
  color: #fff;
}

.cqm-item-badge--icon::after {
  content: attr(data-label);
  position: absolute;
  top: 50%;
  left: calc(100% + 8px);
  transform: translateY(-50%);
  white-space: nowrap;
  padding: 4px 9px;
  border-radius: 6px;
  background: var(--cqm-text);
  color: var(--cqm-bg);
  font-size: 11px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  z-index: 2;
}

.cqm-item-badge--icon:hover::after,
.cqm-item-badge--icon:focus-visible::after,
.cqm-item-badge--icon.cqm-item-badge--show-label::after {
  opacity: 1;
}

/* Recommended/New/Sold Out badges float over the item photo's top-left
   corner (matching the reference design) instead of sitting as inline
   content above the item name — same elements frontend-menu.js always
   builds inside .cqm-item-card__body (directly, or nested one level under
   template-2's .cqm-item-card__head), just repositioned here. The card
   itself is already `position: relative`, so this needs no markup change. */
.cqm-item-card__body .cqm-item-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 1;
  margin: 0;
}

/* When both a Sold Out and a Recommended/New indicator are present (as
   direct siblings under .cqm-item-card__body — true for every template
   except template-2's rustic card, where the second one nests one level
   deeper under .cqm-item-card__head and this rare double-badge case is
   left overlapping), stack the second below the first instead of
   overlapping it. */
.cqm-item-card__body .cqm-item-badge ~ .cqm-item-badge {
  top: 38px;
}

/* Veg / non-veg indicator dot, shared by item cards and the veg/non-veg
   filter toggle — standard green-square-and-dot / red-square-and-triangle
   iconography. */
.cqm-veg-dot,
.cqm-nonveg-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  border: 1.5px solid;
  border-radius: 2px;
}

.cqm-veg-dot {
  border-color: #2e7d32;
}

.cqm-veg-dot::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #2e7d32;
}

.cqm-nonveg-dot {
  border-color: #b3261e;
}

.cqm-nonveg-dot::before {
  content: "";
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 7px solid #b3261e;
}

.cqm-item-card__veg-dot {
  margin-right: 2px;
}

/* Veg / non-veg filter toggle (template-1 only) — see
   .cqm-menu__topbar's own docblock for why this isn't sticky. */
.cqm-menu__veg-filters {
  display: flex;
  gap: 8px;
  padding: 10px 12px 8px;
}

.cqm-veg-filter {
  --cqm-btn-bg: var(--cqm-bg);
  --cqm-btn-color: var(--cqm-text);
  --cqm-btn-border: var(--cqm-border);

  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--cqm-btn-border);
  background: var(--cqm-btn-bg);
  color: var(--cqm-btn-color);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.cqm-veg-filter__dot {
  margin-right: 6px;
}

.cqm-veg-filter[aria-pressed="true"] {
  --cqm-btn-bg: var(--cqm-bg-soft);
  --cqm-btn-border: var(--cqm-text);
}

/* Sticky cart bar */
.cqm-cart-bar {
  --cqm-btn-bg: var(--cqm-accent);
  --cqm-btn-color: #fff;
  --cqm-btn-border: transparent;

  position: sticky;
  bottom: 12px;
  left: 0;
  right: 0;
  width: calc(100% - 24px);
  margin: 12px auto 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 18px;
  background: var(--cqm-btn-bg);
  color: var(--cqm-btn-color);
  border: none;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
  z-index: 25;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

.cqm-cart-bar:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.cqm-cart-bar:active {
  transform: translateY(0);
}

.cqm-cart-bar__count {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  padding: 2px 9px;
  font-size: 13px;
}

.cqm-cart-bar__label {
  flex: 1 1 auto;
  text-align: left;
}

/* Modal (item detail) */
.cqm-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: flex-end;
  /* The panel's own width:100%+max-width:720px+margin:auto isn't enough to
     center it on a wide viewport — width:100% becomes its flex-basis, which
     pre-consumes all the row's free space before max-width clamps the
     final size, leaving nothing for the auto margins to distribute. This
     is what actually centers it instead. */
  justify-content: center;
}

.cqm-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}

.cqm-modal__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: 92vh;
  background: var(--cqm-bg);
  border-radius: 16px 16px 0 0;
  margin: 0 auto;
  max-width: 720px;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.14);
  overflow: hidden;
}

/* Small centered grab bar at the top of every bottom-sheet panel (item
   modal, cart drawer, waiter modal) — a purely decorative affordance
   matching the reference design; the sheet itself still only closes via
   the header's close button, backdrop tap, or Escape. */
.cqm-panel__drag-handle {
  flex: 0 0 auto;
  width: 40px;
  height: 4px;
  margin: 10px auto 0;
  border-radius: 999px;
  background: var(--cqm-border);
}

/* Fixed header (title + close button) shared by every bottom-sheet panel —
   stays put while .cqm-modal__body/.cqm-drawer__panel's own view container
   scrolls beneath it. */
.cqm-panel__header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--cqm-border);
}

.cqm-panel__header-title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
}

.cqm-modal__close,
.cqm-drawer__close {
  --cqm-btn-bg: transparent;
  --cqm-btn-color: var(--cqm-text);
  --cqm-btn-border: var(--cqm-border);

  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--cqm-btn-border);
  background: var(--cqm-btn-bg);
  color: var(--cqm-btn-color);
  line-height: 1;
  cursor: pointer;
  transition:
    background 0.15s ease,
    transform 0.15s ease,
    border-color 0.15s ease;
}

.cqm-modal__close svg,
.cqm-drawer__close svg {
  width: 16px;
  height: 16px;
}

.cqm-modal__close:hover,
.cqm-drawer__close:hover {
  --cqm-btn-bg: var(--cqm-bg-soft);
  --cqm-btn-border: var(--cqm-accent);
  transform: rotate(90deg);
}

.cqm-modal__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 20px;
}

.cqm-modal__image {
  width: 100%;
  max-height: 220px;
  object-fit: cover;
  border-radius: 14px;
  margin-bottom: 16px;
  background: var(--cqm-bg-soft);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.cqm-modal__name {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 15px;
}

.cqm-modal__price {
  font-size: 16px;
  font-weight: 700;
  color: var(--cqm-accent);
  margin: 0 0 12px;
}

.cqm-modal__desc {
  font-size: 14px;
  color: var(--cqm-text-muted);
  margin: 0 0 14px;
  white-space: pre-line;
}

/* Item modal's expanded meta block: weight, prep time, numbered allergen
   list (buildModalDetailsList() in frontend-menu.js) — shown whenever the
   item has that data, in every template's modal. */
.cqm-modal-details {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 4px 0 16px;
}

.cqm-modal-detail-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 14px;
}

.cqm-modal-detail-row__icon {
  flex: 0 0 auto;
}

.cqm-modal-detail-row--allergens {
  flex-direction: column;
  gap: 4px;
}

.cqm-modal-detail-row__label {
  font-weight: 700;
}

.cqm-modal-allergens {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 2px 0 0;
  padding: 0;
}

.cqm-modal-allergens__item {
  font-size: 13px;
  font-weight: 600;
  color: #c0392b;
}

.cqm-modal__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}

.cqm-modal__tag {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--cqm-bg-soft);
  color: var(--cqm-text-muted);
}

/* Variant / add-on selectors in the item modal */
.cqm-option-group {
  border: 1px solid var(--cqm-border);
  border-radius: 8px;
  padding: 12px;
  margin: 0 0 14px;
}

.cqm-option-group__title {
  font-weight: 700;
  font-size: 13px;
  padding: 0 4px;
}

.cqm-option-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 6px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.cqm-option-row:not(:last-child) {
  border-bottom: 1px solid var(--cqm-bg-soft);
}

.cqm-option-row:hover {
  background: var(--cqm-bg-soft);
}

.cqm-option-row:has(input:checked) {
  background: color-mix(in srgb, var(--cqm-accent) 8%, transparent);
}

.cqm-option-row input[type="radio"],
.cqm-option-row input[type="checkbox"] {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
}

.cqm-option-row input:disabled {
  opacity: 0.4;
}

.cqm-option-row__name {
  flex: 1;
  font-size: 14px;
}

.cqm-option-row__price {
  flex: 0 0 auto;
  font-size: 13px;
  color: var(--cqm-text-muted);
  font-weight: 600;
}

.cqm-field-label {
  display: block;
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 8px;
}

/* A tinted pill wrapping the buttons (not three separate circles on bare
   background) — matches the item modal's reference design. The cart
   drawer's own compact stepper (.cqm-cart-line__stepper) reuses the same
   .cqm-qty-btn/.cqm-qty-value elements with its own, smaller treatment. */
.cqm-qty-selector {
  display: flex;
  align-items: center;
  gap: 4px;
  width: fit-content;
  padding: 4px;
  margin-bottom: 18px;
  border-radius: 999px;
  background: var(--cqm-bg-soft);
}

.cqm-qty-selector .cqm-qty-btn {
  background: var(--cqm-bg);
}

.cqm-qty-selector .cqm-qty-value {
  min-width: 32px;
  padding: 0 6px;
}

.cqm-qty-btn {
  --cqm-btn-bg: var(--cqm-bg-soft);
  --cqm-btn-color: inherit;
  --cqm-btn-border: var(--cqm-border);

  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--cqm-btn-border);
  background: var(--cqm-btn-bg);
  color: var(--cqm-btn-color);
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
  transition:
    transform 0.15s ease,
    border-color 0.15s ease;
}

.cqm-qty-btn:not(:disabled):hover {
  border-color: var(--cqm-accent);
  transform: scale(1.08);
}

.cqm-qty-btn:not(:disabled):active {
  transform: scale(0.94);
}

.cqm-qty-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.cqm-qty-value {
  min-width: 24px;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
}

.cqm-special-input {
  width: 100%;
  min-height: 72px;
  padding: 10px 12px;
  border: 1px solid var(--cqm-border);
  border-radius: 8px;
  font: inherit;
  font-size: 14px;
  resize: vertical;
  margin-bottom: 18px;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.cqm-special-input:focus {
  outline: none;
  border-color: var(--cqm-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cqm-accent) 20%, transparent);
}

.cqm-btn-primary {
  --cqm-btn-bg: var(--cqm-accent);
  --cqm-btn-color: #fff;
  --cqm-btn-border: transparent;

  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  border: none;
  border-radius: 999px;
  background: var(--cqm-btn-bg);
  color: var(--cqm-btn-color);
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--cqm-accent) 35%, transparent);
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

.cqm-btn-primary:not(:disabled):hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--cqm-accent) 45%, transparent);
}

.cqm-btn-primary:not(:disabled):active {
  transform: translateY(0);
}

.cqm-btn-primary:disabled {
  background: #c3c4c7;
  box-shadow: none;
  cursor: not-allowed;
}

/* Secondary action pill — outlined, not filled, for a lower-emphasis action
   that sits right below a primary button (e.g. "Back to Cart" under
   "Place Order"). */
.cqm-btn-secondary {
  --cqm-btn-bg: transparent;
  --cqm-btn-color: var(--cqm-text);
  --cqm-btn-border: var(--cqm-border);

  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  margin-top: 10px;
  border: 1px solid var(--cqm-btn-border);
  border-radius: 999px;
  background: var(--cqm-btn-bg);
  color: var(--cqm-btn-color);
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background 0.15s ease;
}

.cqm-btn-secondary:hover {
  --cqm-btn-border: var(--cqm-accent);
  --cqm-btn-color: var(--cqm-accent);
}

/* Cart drawer */
.cqm-drawer {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: flex;
  align-items: flex-end;
  /* See .cqm-modal's own comment for why this is necessary. */
  justify-content: center;
}

.cqm-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}

.cqm-drawer__panel {
  position: relative;
  width: 100%;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  background: var(--cqm-bg);
  border-radius: 16px 16px 0 0;
  margin: 0 auto;
  max-width: 720px;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.14);
  overflow: hidden;
}

#cqm-cart-view,
#cqm-order-confirmation {
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;
}

#cqm-cart-view {
  display: flex;
  flex-direction: column;
}

.cqm-drawer__items {
  padding: 16px 20px 4px;
}

.cqm-drawer__empty {
  padding: 30px 0;
  text-align: center;
  color: var(--cqm-text-muted);
}

.cqm-cart-line {
  display: flex;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--cqm-border);
}

/* No line under the last (or only) item — the totals section right after
   it already reads as its own block, so this just avoided a redundant
   double line right before it. */
.cqm-cart-line:last-child {
  border-bottom: none;
}

.cqm-cart-line__image {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  flex: 0 0 auto;
}

.cqm-cart-line__image.cqm-item-card__image--placeholder {
  font-size: 18px;
}

.cqm-cart-line__body {
  flex: 1 1 auto;
  min-width: 0;
}

.cqm-cart-line__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.cqm-cart-line__name {
  font-weight: 700;
  font-size: 14px;
  margin: 0;
}

.cqm-cart-line__note {
  font-size: 12px;
  color: var(--cqm-text-muted);
  margin: 4px 0 0;
  font-style: italic;
}

.cqm-cart-line__options {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 6px 0 0;
}

.cqm-cart-line__option {
  font-size: 11px;
  color: var(--cqm-text);
  background: var(--cqm-bg-soft);
  border-radius: 999px;
  padding: 2px 8px;
}

.cqm-cart-line__unavailable {
  font-size: 12px;
  color: var(--cqm-accent);
  font-weight: 700;
  margin: 6px 0 0;
}

.cqm-cart-line__controls {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}

.cqm-cart-line__controls .cqm-cart-line__remove {
  margin-left: auto;
}

.cqm-cart-line__price {
  flex: 0 0 auto;
  font-weight: 700;
  font-size: 14px;
  text-align: right;
  white-space: nowrap;
}

/* Joined pill around the minus/value/plus trio (buildCartLineStepper() in
   frontend-menu.js) — a compact bordered group, distinct from the item
   modal's own larger tinted .cqm-qty-selector pill. */
.cqm-cart-line__stepper {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--cqm-border);
  border-radius: 999px;
}

.cqm-cart-line__stepper .cqm-qty-btn {
  width: 26px;
  height: 26px;
  border: none;
  background: transparent;
}

.cqm-cart-line__stepper .cqm-qty-value {
  min-width: 20px;
  font-size: 14px;
}

/* Outlined text pill (not an icon-only circle) — matches the reference
   design's "Remove" button. */
.cqm-cart-line__remove {
  --cqm-btn-bg: transparent;
  --cqm-btn-color: var(--cqm-accent);
  --cqm-btn-border: var(--cqm-accent);

  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px 14px;
  border-radius: 999px;
  background: var(--cqm-btn-bg);
  border: 1px solid var(--cqm-btn-border);
  color: var(--cqm-btn-color);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}

.cqm-cart-line__remove:hover {
  --cqm-btn-bg: #fcf0f1;
}

.cqm-drawer__footer {
  padding: 16px 20px;
  border-top: 1px solid var(--cqm-border);
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.04);
}

.cqm-drawer__totals {
  margin-bottom: 20px;
}

.cqm-totals-row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: var(--cqm-text-muted);
  padding: 5px 0;
}

.cqm-totals-row--total {
  font-size: 17px;
  font-weight: 700;
  color: var(--cqm-text);
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px dashed var(--cqm-border);
}

.cqm-checkout-fields {
  display: flex;
  flex-direction: column;
  padding: 16px 20px 20px;
}

.cqm-menu__table-notice {
  margin-bottom: 14px;
  padding: 10px 12px;
  background: #fff3cd;
  border: 1px solid #ffe69c;
  border-radius: 8px;
  font-size: 13px;
  color: #6b5200;
}

.cqm-text-input {
  width: 100%;
  height: 44px;
  padding: 0 12px;
  margin-bottom: 18px;
  border: 1px solid var(--cqm-border);
  border-radius: 8px;
  font: inherit;
  font-size: 15px;
  color: var(--cqm-text);
  background: var(--cqm-bg);
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.cqm-text-input:focus {
  outline: none;
  border-color: var(--cqm-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cqm-accent) 20%, transparent);
}

.cqm-checkout-fields .cqm-special-input {
  margin-bottom: 18px;
}

.cqm-payment-method {
  margin-bottom: 18px;
}

/* Side-by-side option cards (2-up, wrapping if a 3rd is ever added) rather
   than a stacked list — matches the reference design's row of payment
   choices. */
.cqm-payment-method__options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}

.cqm-payment-card {
  position: relative;
  flex: 1 1 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 12px;
  border: 1.5px solid var(--cqm-border);
  border-radius: 12px;
  text-align: center;
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    box-shadow 0.15s ease;
}

.cqm-payment-card:hover {
  border-color: var(--cqm-accent);
}

.cqm-payment-card--selected {
  border-color: var(--cqm-accent);
  background: var(--cqm-bg-soft);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--cqm-accent) 18%, transparent);
}

.cqm-payment-card__input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.cqm-payment-card__icon {
  flex: 0 0 auto;
  display: flex;
  color: var(--cqm-text-muted);
}

.cqm-payment-card--selected .cqm-payment-card__icon {
  color: var(--cqm-accent);
}

.cqm-payment-card__name {
  font-size: 13.5px;
  font-weight: 600;
}

/* Positioned in the card's corner (not inline) now that the card's own
   content is centered in a column, icon-above-label. */
.cqm-payment-card__check {
  position: absolute;
  top: 8px;
  right: 8px;
  color: var(--cqm-accent);
  opacity: 0;
  transform: scale(0.6);
  transition:
    opacity 0.15s ease,
    transform 0.15s ease;
}

.cqm-payment-card__check svg {
  width: 15px;
  height: 15px;
}

.cqm-payment-card--selected .cqm-payment-card__check {
  opacity: 1;
  transform: scale(1);
}

.cqm-checkout-error {
  margin-bottom: 14px;
  padding: 10px 12px;
  background: #fcf0f1;
  border: 1px solid #f5c2c4;
  border-radius: 8px;
  font-size: 13px;
  color: var(--cqm-accent);
}

/* Order confirmation */
.cqm-confirmation {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 40px 24px;
}

.cqm-confirmation__icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #edfaef;
  color: #1a7a34;
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 16px;
}

.cqm-confirmation__icon--success {
  background: #edfaef;
  color: #1a7a34;
}

.cqm-confirmation__icon--error {
  background: #fcf0f1;
  color: #d63638;
}

.cqm-confirmation__icon--warning {
  background: #fcf3e3;
  color: #94660c;
}

.cqm-confirmation__icon--neutral {
  background: var(--cqm-bg-soft);
  color: var(--cqm-text-muted);
}

.cqm-confirmation__icon--spinner {
  background: var(--cqm-bg-soft);
  border: 3px solid var(--cqm-border);
  border-top-color: var(--cqm-accent);
  animation: cqm-spin 0.8s linear infinite;
}

@keyframes cqm-spin {
  to {
    transform: rotate(360deg);
  }
}

.cqm-confirmation__title {
  font-size: 20px;
  margin: 0 0 8px;
}

.cqm-confirmation__number {
  font-size: 14px;
  color: var(--cqm-text-muted);
  margin: 0 0 20px;
}

.cqm-confirmation__total {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 24px;
}

.cqm-confirmation .cqm-btn-primary {
  max-width: 280px;
}

/* Tablet / desktop */
@media (min-width: 640px) {
  /* minmax(0, 1fr) — see template-1.css's own .cqm-item-grid rule for why
     a bare 1fr can overflow the viewport instead of shrinking. */
  .cqm-item-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .cqm-modal,
  .cqm-drawer {
    align-items: center;
  }

  .cqm-modal__panel,
  .cqm-drawer__panel {
    border-radius: 16px;
    max-height: 85vh;
  }
}

@media (min-width: 900px) {
  .cqm-menu {
    max-width: 100%;
  }

  .cqm-item-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Account for the WP admin bar when a logged-in staff member previews the page */
body.admin-bar .cqm-menu {
  --cqm-topbar-offset: 32px;
}

@media screen and (max-width: 782px) {
  body.admin-bar .cqm-menu {
    --cqm-topbar-offset: 46px;
  }
}

/* Reservation form — narrower than the menu's 720px; color/box-sizing/
   vars/etc. all come from the shared .cqm-menu, .cqm-reservation rule above. */
.cqm-reservation {
  max-width: 560px;
  margin: 0 auto;
  padding: 24px 16px 60px;
}

.cqm-reservation__brand {
  margin-bottom: 12px;
}

.cqm-reservation__title {
  margin: 0 0 20px;
  font-size: 22px;
}

.cqm-reservation-form {
  display: flex;
  flex-direction: column;
}

.cqm-reservation-field {
  flex: 1;
  min-width: 0;
}

.cqm-reservation-row {
  display: flex;
  gap: 12px;
}

.cqm-reservation-row .cqm-reservation-field .cqm-text-input {
  width: 100%;
}

@media (max-width: 480px) {
  .cqm-reservation-row {
    flex-direction: column;
    gap: 0;
  }
}

/* Custom date/time pickers, replacing the browser's own native
   <input type="date">/<input type="time"> chrome (which can't be styled
   consistently across browsers/OSes) — the underlying hidden inputs still
   hold the actual "YYYY-MM-DD"/"HH:MM" value assets/js/frontend-reservation.js
   validates and submits; these buttons + popups are the visible UI. */
.cqm-datepicker-field,
.cqm-timepicker-field {
  position: relative;
}

.cqm-datepicker-btn,
.cqm-timepicker-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  text-align: left;
  cursor: pointer;
}

.cqm-datepicker-btn__label,
.cqm-timepicker-btn__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cqm-datepicker-btn__icon,
.cqm-timepicker-btn__icon {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: var(--cqm-text-muted);
}

/* position: fixed (not absolute) and positioned via JS against the trigger
   button's own viewport rect (assets/js/frontend-reservation.js's
   positionPopup()) — an absolutely-positioned popup that opens near the
   bottom of the form still contributes to the *document's* scrollable
   height when it renders past the current content's bottom edge, growing
   a page-level scrollbar just from opening the calendar. Fixed positioning
   is anchored to the viewport instead, so it can never do that; JS also
   flips it to open upward when there isn't enough room below. */
.cqm-datepicker-popup,
.cqm-timepicker-popup {
  position: fixed;
  z-index: 50;
  min-width: 260px;
  background: var(--cqm-bg);
  border: 1px solid var(--cqm-border);
  border-radius: var(--cqm-radius);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.16);
  padding: 12px;
  animation: cqm-card-in 0.15s ease;
}

.cqm-timepicker-popup {
  min-width: 160px;
  max-height: 240px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cqm-datepicker__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.cqm-datepicker__nav {
  /* Custom properties, read by the shared .cqm-menu/.cqm-reservation
	   button:hover rule (background-color/color/border-color, all
	   !important) — without these, that rule's fallback values
	   (transparent/inherit/transparent) would silently override any plain
	   background/border-color set directly in this file's own :hover rules. */
  --cqm-btn-bg: transparent;
  --cqm-btn-color: var(--cqm-text);
  --cqm-btn-border: transparent;

  background: var(--cqm-btn-bg);
  border: 1px solid var(--cqm-btn-border);
  color: var(--cqm-btn-color);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 6px;
}

.cqm-datepicker__nav:hover {
  --cqm-btn-bg: var(--cqm-bg-soft);
  --cqm-btn-border: var(--cqm-accent);
}

.cqm-datepicker__month {
  font-weight: 700;
  font-size: 14px;
}

.cqm-datepicker__weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-size: 11px;
  color: var(--cqm-text-muted);
  margin-bottom: 4px;
}

.cqm-datepicker__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.cqm-datepicker__day {
  --cqm-btn-bg: transparent;
  --cqm-btn-color: var(--cqm-text);
  --cqm-btn-border: transparent;

  /* This is a <button> — the shared :where(.cqm-menu, .cqm-reservation)
	   button reset (all: unset) resets display to its CSS-initial value,
	   inline, not the browser's usual inline-block for a button. Without
	   re-declaring it, the day number was never actually centered in its
	   square cell — it only looked roughly right before there was a
	   visible border to reveal the gap. */
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  border: 1px solid var(--cqm-btn-border);
  background: var(--cqm-btn-bg);
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
  color: var(--cqm-btn-color);
  transition:
    background 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease;
}

/* A visible border on hover, not just a background tint, so it's obvious
   which day the mouse is over — reassigns --cqm-btn-bg/--cqm-btn-border
   rather than background/border-color directly; see .cqm-datepicker__nav's
   own comment for why that's necessary here. */
.cqm-datepicker__day:hover:not(.is-disabled):not(.cqm-datepicker__day--empty) {
  --cqm-btn-bg: var(--cqm-bg-soft);
  --cqm-btn-border: var(--cqm-accent);
}

.cqm-datepicker__day.is-today {
  font-weight: 700;
  color: var(--cqm-accent);
}

.cqm-datepicker__day.is-selected {
  --cqm-btn-bg: var(--cqm-accent);
  --cqm-btn-color: #fff;
  --cqm-btn-border: var(--cqm-accent);
}

.cqm-datepicker__day.is-disabled {
  --cqm-btn-color: var(--cqm-text-muted);
  opacity: 0.35;
  cursor: not-allowed;
}

.cqm-timepicker__slot {
  --cqm-btn-bg: transparent;
  --cqm-btn-color: var(--cqm-text);
  --cqm-btn-border: transparent;

  text-align: left;
  padding: 8px 12px;
  border: 1px solid var(--cqm-btn-border);
  background: var(--cqm-btn-bg);
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  color: var(--cqm-btn-color);
  transition:
    background 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease;
}

/* See .cqm-datepicker__day's own hover rule for why a border (not just a
   background tint) and why this reassigns the custom properties. */
.cqm-timepicker__slot:hover {
  --cqm-btn-bg: var(--cqm-bg-soft);
  --cqm-btn-border: var(--cqm-accent);
}

.cqm-timepicker__slot.is-selected {
  --cqm-btn-bg: var(--cqm-accent);
  --cqm-btn-color: #fff;
  --cqm-btn-border: var(--cqm-accent);
}

.cqm-timepicker__empty {
  padding: 8px 4px;
  font-size: 13px;
  color: var(--cqm-text-muted);
}

.cqm-reservation-confirmation__code {
  display: inline-block;
  margin: 0 0 20px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--cqm-bg-soft);
  color: var(--cqm-text-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.cqm-reservation-confirmation__card {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 16px;
  margin-bottom: 16px;
  background: var(--cqm-bg-soft);
  border: 1px solid var(--cqm-border);
  border-radius: 14px;
  text-align: left;
}

.cqm-reservation-confirmation__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
}

.cqm-reservation-confirmation__row + .cqm-reservation-confirmation__row {
  border-top: 1px solid var(--cqm-border);
}

.cqm-reservation-confirmation__row-icon {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--cqm-accent) 12%, var(--cqm-bg));
  color: var(--cqm-accent);
}

.cqm-reservation-confirmation__row-icon svg {
  width: 16px;
  height: 16px;
}

.cqm-reservation-confirmation__row-text {
  flex: 1 1 auto;
  font-size: 14px;
  font-weight: 600;
  color: var(--cqm-text);
}

.cqm-reservation-confirmation__status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--cqm-accent) 12%, var(--cqm-bg));
  color: var(--cqm-accent);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.cqm-reservation-confirmation__status-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cqm-accent);
}

.cqm-reservation-confirmation__note {
  margin: 0 0 16px;
  font-size: 13px;
  color: var(--cqm-text-muted);
}

.cqm-reservation-confirmation__restaurant {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-bottom: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--cqm-border);
  width: 100%;
  font-size: 13px;
  color: var(--cqm-text-muted);
}

.cqm-reservation-confirmation__address {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.cqm-reservation-confirmation__address svg {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
}