/*!
 * Baseet Gulf — QR table menu refinements.
 *
 * Additive layer: loaded AFTER the theme's own CSS and touching nothing the
 * vendor ships, so a QrexOrder update cannot conflict with it (it only has to
 * be re-included in the header, like the other _lux layers).
 *
 * Solves what the phone actually shows a seated guest:
 *   · no confirmation anywhere that the order goes to the table they scanned
 *   · cards ~290px tall on a 844px screen — barely two rows per view, and much
 *     of that height is an empty description div for items with no overview
 */

:root {
  --bg-qr-orange: #F75A29;
  --bg-qr-navy:   #01004E;
  --bg-qr-teal:   #0f8f7d;
}

/* ── table banner ──────────────────────────────────────────────────────── */

.bg-table-banner {
  position: sticky;
  top: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: linear-gradient(135deg, var(--bg-qr-teal), #0b6f61);
  color: #fff;
  font-size: 14px;
  line-height: 1.45;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .14);
}

.bg-table-banner .bg-tb-icon {
  flex: 0 0 auto;
  font-size: 19px;
  line-height: 1;
}

.bg-table-banner .bg-tb-text { flex: 1 1 auto; min-width: 0; }
.bg-table-banner .bg-tb-label { opacity: .88; font-size: 12px; display: block; }

.bg-table-banner .bg-tb-no {
  font-weight: 800;
  font-size: 16px;
  /* Latin digits inside an RTL sentence need their own direction or the
     number lands on the wrong side of the label. */
  direction: ltr;
  display: inline-block;
  unicode-bidi: isolate;
}

/* ── item cards: reclaim the dead space ────────────────────────────────── */

/* An item with no overview still rendered an empty .item_desc that held its
   own line-height, so every such card carried a blank strip. */
.modern_item_card .item_desc:empty { display: none; }

.modern_item_card .item_details { padding-block: 10px; }
.modern_item_card .item_title { margin-bottom: 4px; line-height: 1.35; }
.modern_item_card .item_desc {
  font-size: 12px;
  opacity: .72;
  margin-bottom: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 576px) {
  .modern_item_card .item_title { font-size: 14px; }
  .modern_item_card .item_details { padding-block: 8px; }
}

/* ── seated guests: the menu, not the marketing ────────────────────────── */

/*
 * Someone who scanned the QR on a table is already in the restaurant. Making
 * them scroll past a full-screen hero, a "Book now" button and a delivery
 * pitch before the first dish is the wrong order of business — and two of
 * those actions do not even apply to them.
 *
 * Only ever active when ?table= was present, so the normal storefront (and
 * every delivery or pickup visit) is untouched.
 */
/* Measured on the live storefront: the hero is section.user_home_banner (549px
   tall on a 390x844 phone), which pushes the first dish to y=678. */
body.bg-has-table .user_home_banner { display: none !important; }

/* The menu heading no longer needs the breathing room a hero gave it. */
body.bg-has-table .section_items > .defaultHeading { margin-top: 10px; }
body.bg-has-table .defaultHeading h1 { font-size: 20px; margin-bottom: 2px; }

/* ── the add button is the primary action; make it thumb-sized ─────────── */

@media (max-width: 576px) {
  .modern_item_card .add_btn {
    min-width: 44px;
    min-height: 44px;   /* the usual minimum for a reliable touch target */
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* ── category pills ───────────────────────────────────────────────────── */

/*
 * Sticky was tried and dropped on phones: these pills are 69px image cards, so
 * the bar is 110px tall — a quarter of the viewport permanently occupied, and
 * it sat over the section headings underneath. Horizontal scrolling gives the
 * same reachability for none of that cost. Kept sticky from tablet up, where
 * the height is affordable.
 */
@media (max-width: 768px) {
  .gallery_top_menu .gallery_sort.category_shot {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 6px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .gallery_top_menu .gallery_sort.category_shot::-webkit-scrollbar { display: none; }
  .gallery_top_menu .gallery_sort.category_shot > li { flex: 0 0 auto; }
}

@media (min-width: 769px) {
  .gallery_top_menu.bg-sticky-cats {
    position: sticky;
    top: 0;
    z-index: 880;
    background: #f6f7f9;
    padding-block: 8px;
  }
}

/* The hero is gone for seated guests, so close the gap it used to justify. */
body.bg-has-table .section_items > .defaultHeading { margin-bottom: 4px; }

@media print {
  .bg-table-banner { position: static; }
}