/* ─── carte ───────────────────────────────────────────────────────────
   The printed carte.

   Loaded after classic.css, which carries what every template shares: the
   theme tokens, the base type, the dialogs, the toast and the cart rows. This
   file is only the page — and it uses its own class names, so there is no
   cascade fight with the classic chrome, none of which is on the page.

   Everything here is built on the theme tokens rather than fixed colours, so
   Noir (a dark palette on this same template) needs no separate rules.

   Logical properties throughout: the whole page mirrors into Arabic with no
   [dir="rtl"] block anywhere in this file. */

/* ─── Masthead ──────────────────────────────────────────────────────
   A centred masthead between rules, the way a card handed to you at the table
   is set — not a navigation bar. The two utility controls are small caps at
   the top corners, deliberately quiet: they are for the guest who needs them,
   not part of the composition. */
.carte-head { padding-top: 16px; }

.carte-utility {
  width: min(880px, calc(100% - 40px)); margin-inline: auto;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.carte-util-btn {
  background: none; border: 0; padding: 6px 0; cursor: pointer;
  font-size: 10.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted); border-bottom: 1px solid transparent;
}
.carte-util-btn:hover { color: var(--ink); border-bottom-color: currentColor; }

.carte-mast {
  width: min(880px, calc(100% - 40px)); margin: 22px auto 0;
  text-align: center; padding-bottom: 24px;
  border-bottom: 1px solid var(--ink); position: relative;
}
/* The second hairline of a classic double rule. */
.carte-mast::after {
  content: ""; position: absolute; inset-inline: 0; bottom: -4px;
  border-bottom: 1px solid var(--ink); opacity: .4;
}
.carte-mast-name {
  margin: 0; font-size: clamp(26px, 5.2vw, 50px); font-weight: 300; line-height: 1.12;
  letter-spacing: .22em; text-transform: uppercase;
  /* Letter-spacing adds a trailing gap after the last character, which pulls a
     centred line off-centre; the indent puts it back. */
  text-indent: .22em;
}
.carte-mast-name.has-logo { letter-spacing: normal; text-indent: 0; }
.carte-mast-name img { max-height: 96px; width: auto; margin-inline: auto; object-fit: contain; }
.carte-mast-sub {
  margin: 14px auto 0; max-width: 54ch;
  font-size: 14.5px; font-style: italic; color: var(--muted);
}

/* Opening hours: a quiet pill, not the card the classic hero uses. */
.carte-hours {
  margin-top: 18px; display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 16px; border: 1px solid var(--line); border-radius: 999px;
  background: none; cursor: pointer;
  font-size: 11.5px; font-weight: 600; letter-spacing: .06em; color: var(--ink);
}
.carte-hours:hover { border-color: var(--ink); }
.hours-live-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
.carte-hours.is-open .hours-live-dot { background: #2e9e5b; }
.carte-hours.is-closing-soon .hours-live-dot { background: #d98a1f; }
.carte-hours.is-closed .hours-live-dot { background: #c0392b; }
.hours-live-sep { opacity: .4; }
.carte-hours #liveDohaTime { font-variant-numeric: tabular-nums; unicode-bidi: isolate; }

/* ─── Course index ──────────────────────────────────────────────────
   A jump list, not a filter: nothing is hidden when you tap it, the page moves
   to that course. It sticks to the top and follows the scroll. */
.carte-index {
  position: sticky; top: 0; z-index: 60; margin-top: 26px;
  display: flex; align-items: stretch;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-block: 1px solid var(--line);
}
.carte-index-all {
  flex: none; padding: 0 16px; border: 0; border-inline-end: 1px solid var(--line);
  background: none; cursor: pointer;
  font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted);
}
.carte-index-all:hover { color: var(--ink); }
.carte-index-scroll { flex: 1; display: flex; overflow-x: auto; scrollbar-width: none; }
.carte-index-scroll::-webkit-scrollbar { display: none; }
.carte-index-link {
  position: relative; flex: none; border: 0; background: none; cursor: pointer;
  padding: 14px 18px; white-space: nowrap;
  font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted);
}
.carte-index-link::after {
  content: ""; position: absolute; inset-inline: 18px; bottom: 9px;
  height: 1px; background: currentColor; opacity: 0; transition: opacity .18s ease;
}
.carte-index-link:hover { color: var(--ink); }
.carte-index-link:hover::after { opacity: .45; }
.carte-index-link.active { color: var(--ink); }
.carte-index-link.active::after { opacity: 1; background: var(--accent); }

/* ─── Search ────────────────────────────────────────────────────────
   A ruled line rather than a boxed field — a search box with a border and a
   drop shadow would be the only piece of interface furniture on the page. */
.carte-search-row {
  width: min(880px, calc(100% - 40px)); margin: 28px auto 0;
  display: flex; align-items: baseline; gap: 16px;
  border-bottom: 1px solid var(--line); padding-bottom: 8px;
}
.carte-search { flex: 1; display: flex; align-items: center; gap: 10px; color: var(--muted); }
.carte-search input {
  flex: 1; min-width: 0; border: 0; background: none; outline: 0; padding: 4px 0;
  /* 16px: anything smaller and iOS zooms the page when the guest taps it. */
  font-size: 16px; color: var(--ink);
}
.carte-search input::placeholder { color: var(--muted); font-style: italic; }
[data-template="carte"] .result-count {
  display: block; margin: 0; white-space: nowrap;
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}

/* ─── Courses ───────────────────────────────────────────────────────
   Every course on the page, in menu order. The heading is small caps between
   rules; the items are type, not cards. */
.carte-body { width: min(880px, calc(100% - 40px)); margin-inline: auto; padding-bottom: 110px; }
.carte-course { padding-top: 52px; }
.carte-course-title {
  display: flex; align-items: center; gap: 18px; margin: 0 0 24px;
  font-size: 12px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase;
  color: var(--accent);
}
.carte-course-title::before, .carte-course-title::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
}
.carte-course-title span { flex: none; }

.carte-items { display: grid; gap: 22px; }
.carte-item-line { display: flex; align-items: baseline; }
.carte-item-name {
  flex: 0 1 auto; min-width: 0; text-align: start;
  border: 0; background: none; padding: 0; cursor: pointer;
  font-size: 17.5px; font-weight: 500; line-height: 1.3; color: var(--ink);
}
.carte-item-name:hover { color: var(--accent); }
/* The dot leader that makes a price list read as one. */
.carte-leader {
  flex: 1 1 18px; min-width: 18px; margin-inline: 9px;
  border-bottom: 1px dotted var(--line); transform: translateY(-5px);
}
.carte-item-price {
  flex: none; font-size: 15px; font-weight: 600;
  font-variant-numeric: tabular-nums; unicode-bidi: isolate;
}
.carte-item-add {
  flex: none; align-self: center; margin-inline-start: 14px;
  width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid var(--line); background: none; color: var(--accent);
  font-size: 16px; line-height: 1; cursor: pointer; display: grid; place-items: center;
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.carte-item-add:hover { background: var(--accent); color: var(--paper); border-color: var(--accent); }
.carte-item-desc {
  margin: 5px 0 0; max-width: 62ch;
  font-size: 13.5px; line-height: 1.6; font-style: italic; color: var(--muted);
}

/* ─── The order control ─────────────────────────────────────────────
   Absent until something is in it, then a single pill with the count and the
   running total. */
.carte-order {
  position: fixed; z-index: 120; inset-inline: 0; margin-inline: auto; width: max-content;
  bottom: max(18px, env(safe-area-inset-bottom));
  display: inline-flex; align-items: center; gap: 12px;
  padding: 12px 20px; border-radius: 999px;
  border: 1px solid var(--ink); background: var(--ink); color: var(--paper);
  cursor: pointer; font-size: 13.5px; font-weight: 600; letter-spacing: .03em;
  box-shadow: 0 14px 36px rgba(0, 0, 0, .2);
}
.carte-order-count {
  flex: none; min-width: 22px; height: 22px; border-radius: 999px;
  display: grid; place-items: center;
  background: var(--accent); color: var(--paper); font-size: 11.5px; font-weight: 700;
}
.carte-order b { font-variant-numeric: tabular-nums; unicode-bidi: isolate; }

/* ─── Footer ────────────────────────────────────────────────────────
   Centred and hairline-ruled to match the masthead, and built from tokens so
   the dark palette on this template is not a light block at the bottom of a
   dark page. */
[data-template="carte"] .footer {
  margin-top: 40px; padding: 46px 0 130px;
  background: none; border-top: 1px solid var(--ink);
}
[data-template="carte"] .footer-grid { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 30px; }
[data-template="carte"] .footer h4 { color: var(--accent); letter-spacing: .2em; }
[data-template="carte"] .footer a,
[data-template="carte"] .footer button,
[data-template="carte"] .footer-open-links { color: var(--muted); font-size: 14px; }
[data-template="carte"] .footer a:hover,
[data-template="carte"] .footer button:hover { color: var(--ink); }
[data-template="carte"] .footer-wordmark { font-weight: 400; font-size: 17px; letter-spacing: .16em; text-transform: uppercase; }
[data-template="carte"] .footer-logo { mix-blend-mode: normal; width: 120px; }
[data-template="carte"] .footer-bottom { border-top-color: var(--line); }
[data-template="carte"] .qmenu-credit {
  background: color-mix(in srgb, var(--ink) 5%, transparent);
  border-color: var(--line); color: var(--ink);
}
[data-template="carte"] .qmenu-credit:hover { background: color-mix(in srgb, var(--ink) 10%, transparent); box-shadow: none; }

@media (max-width: 700px) {
  .carte-mast { padding-bottom: 20px; }
  .carte-mast-name img { max-height: 70px; }
  .carte-index-link { padding: 12px 14px; font-size: 11px; }
  .carte-index-all { padding: 0 12px; }
  .carte-course { padding-top: 40px; }
  .carte-item-name { font-size: 16px; }
  .carte-item-desc { font-size: 13px; }
  .carte-search-row { margin-top: 20px; }
}