/* =====================================================================
   MENU + ITEM DETAIL EXPERIENCE — dedicated file, `qm-` prefixed classes
   only, so nothing here can collide with storefront-experience.css or
   theme.css. Used by views/storefront/menu.ejs and views/storefront/item.ejs.
   ===================================================================== */

/* ---- live search bar ---- */
.qm-search-wrap { position: sticky; top: 0; z-index: 50; background: var(--surface-muted); padding: 0.9rem 0 0.7rem; margin: -1rem -1rem 0.5rem; padding-inline: 1rem; }
.qm-search-box { position: relative; }
.qm-search-box i.fa-magnifying-glass { position: absolute; top: 50%; transform: translateY(-50%); inset-inline-start: 1rem; color: var(--muted); font-size: 0.9rem; }
.qm-search-input {
  width: 100%; padding: 0.85rem 2.6rem 0.85rem 2.6rem; border-radius: var(--radius-full);
  border: 1.5px solid var(--line); background: var(--surface); font-size: 0.92rem;
  box-shadow: var(--shadow-sm); transition: all 0.2s ease;
}
[dir='rtl'] .qm-search-input { padding: 0.85rem 2.6rem; }
.qm-search-input:focus { outline: none; border-color: var(--brand-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-accent) 15%, transparent); }
.qm-search-clear {
  position: absolute; top: 50%; transform: translateY(-50%); inset-inline-end: 0.9rem;
  background: var(--surface-muted); border: none; width: 1.6rem; height: 1.6rem; border-radius: 50%;
  color: var(--muted); display: none; align-items: center; justify-content: center; font-size: 0.75rem;
}
.qm-search-clear.show { display: flex; }
.qm-search-clear:hover { background: var(--danger); color: #fff; }
.qm-search-meta { font-size: 0.76rem; color: var(--muted); margin-top: 0.5rem; padding-inline: 0.3rem; display: none; }
.qm-search-meta.show { display: block; animation: qm-fade-in 0.2s ease both; }

/* ---- category nav ---- */
.qm-cat-nav { display: flex; gap: 0.6rem; overflow-x: auto; padding: 0.2rem 0.1rem 0.9rem; scroll-behavior: smooth; }
.qm-cat-nav::-webkit-scrollbar { display: none; }
.qm-cat-pill {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 0.4rem;
  padding: 0.7rem 1rem; border-radius: var(--radius-md); cursor: pointer; min-width: 84px;
  border: 1.5px solid transparent; transition: all 0.2s ease; position: relative;
}
.qm-cat-pill:hover { transform: translateY(-2px); }
.qm-cat-icon-wrap {
  width: 80px; height: 80px; border-radius: 20px; background: var(--surface); border: 1.5px solid var(--line);
  display: flex; align-items: center; justify-content: center; overflow: hidden; transition: all 0.2s ease;
}
.qm-cat-icon-wrap img { width: 100%; height: 100%; object-fit: cover; }
.qm-cat-icon-wrap i { color: var(--muted); font-size: 1.1rem; }
.qm-cat-pill.active .qm-cat-icon-wrap { border-color: var(--brand-accent); background: var(--accent-soft); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-accent) 15%, transparent); }
.qm-cat-pill.active .qm-cat-icon-wrap i { color: var(--brand-accent); }
.qm-cat-label { font-size: 0.74rem; font-weight: 700; color: var(--muted); white-space: nowrap; transition: color 0.2s ease; }
.qm-cat-pill.active .qm-cat-label { color: var(--brand-primary); }

/* ---- item grid + cards ---- */
.qm-item-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1rem; }
.qm-item-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden;
  cursor: pointer; position: relative; transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
  animation: qm-card-in 0.3s ease both;
}
.qm-item-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--brand-accent) 35%, var(--line)); }
.qm-item-media { position: relative; height: 148px; background: var(--surface-muted); overflow: hidden; }
.qm-item-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.qm-item-card:hover .qm-item-media img { transform: scale(1.08); }
.qm-item-media-empty { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--line); font-size: 1.8rem; }
.qm-item-price-badge {
  position: absolute; bottom: 0.6rem; inset-inline-end: 0.6rem; background: rgba(255,255,255,0.94);
  backdrop-filter: blur(3px); color: var(--brand-primary); font-weight: 700; font-size: 0.8rem;
  padding: 0.3rem 0.65rem; border-radius: var(--radius-full); box-shadow: var(--shadow-sm);
}
.qm-item-tags { position: absolute; top: 0.6rem; inset-inline-start: 0.6rem; display: flex; gap: 0.3rem; flex-wrap: wrap; }
.qm-tag-badge { font-size: 0.62rem; font-weight: 700; padding: 0.2rem 0.5rem; border-radius: var(--radius-full); text-transform: uppercase; letter-spacing: 0.02em; }
.qm-tag-new { background: var(--brand-accent); color: #fff; }
.qm-tag-vegan { background: color-mix(in srgb, var(--success) 18%, white); color: var(--success); }
.qm-tag-spicy { background: color-mix(in srgb, var(--danger) 15%, white); color: var(--danger); }
.qm-item-sold-out-badge {
  position: absolute; inset: 0; background: rgba(2, 30, 71, 0.55); display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 0.8rem; gap: 0.4rem;
}
.qm-item-card.qm-sold-out .qm-item-media img { filter: grayscale(0.6); opacity: 0.6; }
.qm-item-body { padding: 0.85rem 0.95rem 1rem; }
.qm-item-name { font-weight: 700; font-size: 0.94rem; color: var(--ink); }
.qm-item-desc { font-size: 0.78rem; color: var(--muted); margin-top: 0.2rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.qm-item-card.qm-filtered-out { display: none !important; }
/* Generic version, not scoped to a specific card class — so any future
   template's own differently-named card element is still correctly
   hidden by the shared search JS. */
.qm-filtered-out { display: none !important; }

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

.qm-no-results { text-align: center; padding: 3rem 1rem; color: var(--muted); }
.qm-no-results i { font-size: 2.4rem; color: var(--line); margin-bottom: 0.8rem; display: block; }

/* =====================================================================
   ITEM DETAIL PAGE
   ===================================================================== */
.qm-hero { position: relative; margin: -1rem -1rem 0; border-radius: 0 0 var(--radius-md) var(--radius-md); overflow: hidden; margin-top: 0rem; }
.qm-hero-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; }
.qm-hero-track::-webkit-scrollbar { display: none; }
.qm-hero-slide { flex: 0 0 100%; scroll-snap-align: start; height: 280px; background: var(--surface-muted); }
.qm-hero-slide img { width: 100%; height: 100%; object-fit: cover; }
.qm-hero-empty { display: flex; align-items: center; justify-content: center; height: 220px; background: linear-gradient(135deg, var(--surface-muted), var(--accent-soft)); }
.qm-hero-empty i { font-size: 3rem; color: color-mix(in srgb, var(--brand-accent) 40%, var(--line)); }
.qm-hero-dots { position: absolute; bottom: 0.8rem; left: 0; right: 0; display: flex; justify-content: center; gap: 0.35rem; }
.qm-hero-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.55); transition: all 0.2s ease; }
.qm-hero-dot.active { background: #fff; width: 18px; border-radius: var(--radius-full); }
.qm-back-btn {
  position: absolute; top: 1rem; inset-inline-start: 1rem; width: 2.6rem; height: 2.6rem; border-radius: 50%;
  background: rgba(255,255,255,0.92); backdrop-filter: blur(4px); border: none; color: var(--brand-primary);
  display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-sm); z-index: 5;
  transition: all 0.15s ease; text-decoration: none;
}
[dir='rtl'] .qm-back-btn i { transform: scaleX(-1); }
.qm-back-btn:hover { background: #fff; transform: scale(1.06); color: var(--brand-accent); }

.qm-item-header { padding: 1.2rem 0.2rem 0.5rem; }
.qm-item-title { font-weight: 700; font-size: 1.3rem; color: var(--brand-primary); }
.qm-item-desc-full { color: var(--muted); font-size: 0.88rem; margin-top: 0.4rem; line-height: 1.6; }
.qm-item-tags-row { display: flex; gap: 0.4rem; margin-top: 0.6rem; }

.qm-sold-out-banner { display: flex; align-items: center; gap: 0.7rem; background: color-mix(in srgb, var(--danger) 8%, white); border: 1px solid color-mix(in srgb, var(--danger) 25%, var(--line)); border-radius: var(--radius-md); padding: 0.9rem 1.1rem; margin: 0.8rem 0; color: color-mix(in srgb, var(--danger) 75%, black); font-size: 0.86rem; }
.qm-sold-out-banner i { font-size: 1.3rem; color: var(--danger); }

.qm-mod-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 1.1rem; margin-bottom: 1rem; transition: border-color 0.2s ease; }
.qm-mod-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0.9rem; }
.qm-mod-title { font-weight: 700; font-size: 0.94rem; color: var(--ink); }
.qm-mod-hint { font-size: 0.74rem; color: var(--muted); margin-top: 0.15rem; }
.qm-mod-badge { font-size: 0.66rem; font-weight: 700; padding: 0.25rem 0.65rem; border-radius: var(--radius-full); white-space: nowrap; text-transform: uppercase; letter-spacing: 0.02em; }
.qm-mod-badge.required { background: color-mix(in srgb, var(--danger) 12%, white); color: var(--danger); }
.qm-mod-badge.optional { background: var(--surface-muted); color: var(--muted); }
.qm-mod-card.qm-unmet { border-color: color-mix(in srgb, var(--danger) 35%, var(--line)); animation: qm-shake 0.4s ease; }
@keyframes qm-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

.qm-mod-option {
  display: flex; align-items: center; gap: 0.8rem; padding: 0.7rem 0.85rem; border-radius: var(--radius-sm);
  border: 1.5px solid var(--line); margin-bottom: 0.55rem; cursor: pointer; transition: all 0.15s ease;
}
.qm-mod-option-disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; }


.qm-mod-option:last-child { margin-bottom: 0; }
.qm-mod-option:hover { border-color: color-mix(in srgb, var(--brand-accent) 45%, var(--line)); }
.qm-mod-option.selected { border-color: var(--brand-accent); background: var(--accent-soft); }
.qm-mod-check {
  width: 1.35rem; height: 1.35rem; border: 1.5px solid var(--line); flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  color: transparent; font-size: 0.7rem; transition: all 0.15s ease; background: #fff;
}
.qm-mod-check.round { border-radius: 50%; }
.qm-mod-check.square { border-radius: 6px; }
.qm-mod-option.selected .qm-mod-check { background: var(--brand-accent); border-color: var(--brand-accent); color: #fff; }
.qm-mod-option input { display: none; }
.qm-mod-option-name { flex: 1; font-size: 0.88rem; font-weight: 600; }
.qm-mod-option-price { font-size: 0.78rem; color: var(--brand-accent); font-weight: 700; white-space: nowrap; }


.qm-notes-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 1.1rem; margin-bottom: 6rem; }

/* ---- quantity stepper (large, primary — item detail sticky bar) ---- */
.qm-sticky-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1500; background: var(--surface);
  border-top: 1px solid var(--line); box-shadow: 0 -8px 24px rgba(0,0,0,0.07);
  padding: 0.9rem 1.1rem; display: flex; align-items: center; gap: 0.9rem;
}
.qm-qty-stepper { display: flex; align-items: center; gap: 0.2rem; background: var(--surface-muted); border-radius: var(--radius-full); padding: 0.3rem; flex-shrink: 0; align-items: center; }
.qm-qty-btn { width: 2.5rem; height: 2.5rem; border-radius: 50%; border: none; background: #fff; box-shadow: var(--shadow-sm); color: var(--brand-primary); display: flex; align-items: center; justify-content: center; transition: all 0.15s ease; }
.qm-qty-btn:hover { background: var(--brand-accent); color: #fff; transform: scale(1.06); }
.qm-qty-btn:active { transform: scale(0.92); }
.qm-qty-value { width: 2.2rem; text-align: center; font-weight: 700; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.qm-add-btn { flex: 1; }
.qm-add-btn.qm-bump { animation: qm-bump 0.35s ease; }
@keyframes qm-bump { 0% { transform: scale(1); } 40% { transform: scale(0.94); } 100% { transform: scale(1); } }

@media (max-width: 480px) {
  .qm-item-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

.qm-price-strike { text-decoration: line-through; color: var(--muted); font-weight: 500; font-size: 0.72rem; margin-inline-end: 0.3rem; }
.qm-tag-discount { background: var(--danger); color: #fff; }

.qm-item-price-row { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.5rem; flex-wrap: wrap; }
.qm-item-price-now { font-weight: 700; font-size: 1.05rem; color: var(--brand-primary); }


/* ---- floating cart bar ---- */
.qm-cartbar {
    position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 1500;
    background: var(--surface); border-radius: var(--radius-md); box-shadow: 0 12px 32px rgba(2, 30, 71, 0.18);
    padding: 0.7rem 0.9rem; display: flex; align-items: center; gap: 0.8rem; border: 1px solid var(--line);
    animation: qm-cartbar-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  }
  @keyframes qm-cartbar-in { from { opacity: 0; transform: translateY(16px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
  .qm-cartbar-icon { position: relative; width: 2.8rem; height: 2.8rem; border-radius: 50%; background: var(--accent-soft); color: var(--brand-accent); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; }
  .qm-cartbar-count { position: absolute; top: -0.3rem; inset-inline-end: -0.3rem; background: var(--brand-accent); color: #fff; font-size: 0.68rem; font-weight: 700; min-width: 1.2rem; height: 1.2rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid var(--surface); }
  .qm-cartbar-info { flex: 1; min-width: 0; }
  .qm-cartbar-label { font-weight: 700; font-size: 0.86rem; color: var(--ink); display: block; }
  .qm-cartbar-btn { flex-shrink: 0; white-space: nowrap; }
  [dir='rtl'] .qm-cartbar-btn i { transform: scaleX(-1); }
  
  /* ---- checkout: editable order lines ---- */
  .qm-back-link { display: inline-flex; align-items: center; gap: 0.5rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-full); padding: 0.5rem 1rem; font-size: 0.82rem; font-weight: 700; color: var(--brand-primary); text-decoration: none; margin-bottom: 1rem; box-shadow: var(--shadow-sm); transition: all 0.15s ease; }
  .qm-back-link:hover { border-color: var(--brand-accent); color: var(--brand-accent); transform: translateX(-2px); }
  [dir='rtl'] .qm-back-link:hover { transform: translateX(2px); }
  [dir='rtl'] .qm-back-link i { transform: scaleX(-1); }
  
  .qm-checkout-line { flex-direction: column; align-items: stretch !important; gap: 0.5rem; }
  .qm-checkout-line-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.6rem; }
  .qm-checkout-stepper { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.5rem; }
  .qm-qty-btn-sm { width: 2rem; height: 2rem; font-size: 0.75rem; }
  .qm-checkout-remove { margin-inline-start: auto; width: 2rem; height: 2rem; border-radius: 50%; border: none; background: color-mix(in srgb, var(--danger) 10%, white); color: var(--danger); display: flex; align-items: center; justify-content: center; font-size: 0.78rem; transition: all 0.15s ease; }
  .qm-checkout-remove:hover { background: var(--danger); color: #fff; }
  .qm-empty-cart { text-align: center; padding: 2rem 1rem; color: var(--muted); }
  .qm-empty-cart i { font-size: 2rem; color: var(--line); display: block; margin-bottom: 0.6rem; }


  /* Real fix: Bootstrap's --bs-btn-disabled-bg doesn't reliably inherit
   the brand-accent override the way the enabled state does, so a
   disabled .btn-primary.qm-add-btn was falling back to Bootstrap's own
   stock blue instead of the orange brand color. Pin it explicitly. */
.qm-add-btn:disabled,
.qm-add-btn.disabled {
  background-color: var(--brand-accent) !important;
  border-color: var(--brand-accent) !important;
  color: #fff !important;
  opacity: 0.5 !important;
}