/* ==========================================================================
   AlBasali — generated from 06-production-design/design-tokens.json
   Do not invent values here. If a value is missing, add it to the token file.
   ========================================================================== */

:root{
  /* colour ---------------------------------------------------------------- */
  --c-navy:#1B3E5B; --c-navy-deep:#0E3449; --c-navy-ink:#0B2E4A; --c-indigo:#1A1F61;
  --c-gold:#E0B87F; --c-gold-bright:#EEC566; --c-cream:#F7E9CF;
  --c-surface:#F7E9CF; --c-surface-raised:#FDFDFC; --c-surface-muted:#EFE3CC;
  --c-text:#0E3449; --c-text-2:#5B6B76; --c-text-3:#8A97A0;
  --c-on-navy:#F7E9CF; --c-on-navy-2:#B9C6D0; --c-on-gold:#0E3449;
  --c-border:#E2D8C4; --c-border-strong:#1B3E5B; --c-border-gold:#E0B87F;
  --c-success:#2E7D5B; --c-success-bg:#E6F1EB;
  --c-warning:#B8860B; --c-warning-bg:#FBF0D8;
  --c-danger:#B3261E;  --c-danger-bg:#FBE9E7;
  --c-disabled:#C4BCAC; --c-disabled-bg:#EDE7DB;

  /* type ------------------------------------------------------------------ */
  --font-display:'Almarai','Segoe UI',Tahoma,sans-serif;
  --font-ui:'IBM Plex Sans Arabic','Segoe UI',Tahoma,sans-serif;

  /* space ----------------------------------------------------------------- */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px;
  --s-6:24px; --s-8:32px; --s-10:40px; --s-12:48px; --s-16:64px;

  /* radius ---------------------------------------------------------------- */
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:20px; --r-2xl:24px; --r-pill:999px;

  /* elevation ------------------------------------------------------------- */
  --sh-sm:0 1px 2px rgba(14,52,73,.06);
  --sh-card:0 2px 8px rgba(14,52,73,.07);
  --sh-raised:0 4px 16px rgba(14,52,73,.10);
  --sh-modal:0 12px 40px rgba(14,52,73,.20);
  --sh-focus:0 0 0 3px rgba(224,184,127,.55);

  /* motion ---------------------------------------------------------------- */
  --d-fast:160ms; --d-base:240ms; --d-slow:400ms; --d-deliberate:700ms; --d-ambient:2400ms;
  --e-standard:cubic-bezier(.2,0,.2,1);
  --e-decel:cubic-bezier(0,0,.2,1);
  --e-breathe:cubic-bezier(.4,0,.6,1);

  /* layout ---------------------------------------------------------------- */
  --header-h:56px; --bottomnav-h:64px; --touch:44px;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}

body{
  font-family:var(--font-ui);
  font-size:17px; line-height:1.7;
  color:var(--c-text);
  background:var(--c-surface);
  -webkit-text-size-adjust:100%;
}

h1,h2,.display{font-family:var(--font-display);font-weight:800;line-height:1.25;margin:0}
h1{font-size:28px} h2{font-size:22px;font-weight:700}
h3{font-family:var(--font-ui);font-size:18px;font-weight:600;margin:0}
p{margin:0 0 var(--s-3)}
a{color:var(--c-navy)}

.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* layout ------------------------------------------------------------------ */
.app{max-width:430px;margin-inline:auto;min-height:100vh;display:flex;flex-direction:column;
     padding-bottom:calc(var(--bottomnav-h) + env(safe-area-inset-bottom))}
.screen{padding:var(--s-5);flex:1}
.stack{display:flex;flex-direction:column;gap:var(--s-4)}
.stack-2{display:flex;flex-direction:column;gap:var(--s-2)}
.center{text-align:center}
.muted{color:var(--c-text-2);font-size:15px}
.tiny{color:var(--c-text-3);font-size:13px}

/* header ------------------------------------------------------------------ */
.hdr{height:var(--header-h);display:flex;align-items:center;gap:var(--s-3);
     padding-inline:var(--s-5);background:var(--c-surface);border-block-end:1px solid var(--c-border)}
.hdr--navy{background:var(--c-navy);color:var(--c-on-navy);border-block-end:none}
.hdr__title{font-family:var(--font-display);font-weight:800;font-size:20px}
.hdr__spacer{flex:1}

/* logo placeholder — the real mark is composited at implementation time.
   Never draw a substitute symbol inside it. */
/* The real emblem, on every .logo — not only inside a header.
   It used to be applied by a `.hdr .logo` override, which meant the staff sign-in
   and password screens, where the mark stands alone and largest, fell back to
   the placeholder underneath: an empty navy disc with a gold ring. */
.logo{width:32px;height:32px;border-radius:50%;flex:none;display:block;
      background-image:url('/assets/brand/logo-96.png');
      background-size:contain;background-repeat:no-repeat;background-position:center}
.logo--lg{width:120px;height:120px;background-image:url('/assets/brand/logo-192.png')}
.logo--on-navy{filter:drop-shadow(0 0 0 1px rgba(224,184,127,.45))}

/* buttons ----------------------------------------------------------------- */
.btn{display:flex;align-items:center;justify-content:center;gap:var(--s-2);
     min-height:52px;padding:0 var(--s-5);border-radius:14px;border:none;
     font-family:var(--font-ui);font-size:17px;font-weight:600;
     cursor:pointer;text-decoration:none;transition:background var(--d-fast) var(--e-standard)}
.btn:focus-visible{outline:2px solid var(--c-gold);outline-offset:2px}
.btn--primary{background:var(--c-navy);color:#fff}
.btn--primary:hover{background:var(--c-navy-deep)}
.btn--secondary{background:transparent;color:var(--c-navy);border:1.5px solid var(--c-navy);min-height:48px}
.btn--gold{background:var(--c-gold);color:var(--c-on-gold)}
.btn--ghost{background:transparent;color:var(--c-text-2);min-height:40px;font-size:15px;font-weight:500}
.btn--block{width:100%}
.btn[disabled],.btn--disabled{background:var(--c-disabled-bg);color:var(--c-disabled);cursor:not-allowed}
.btn-row{display:flex;gap:var(--s-3)}
.btn-row .btn{flex:1}

/* cards ------------------------------------------------------------------- */
.card{background:var(--c-surface-raised);border-radius:var(--r-lg);
      padding:var(--s-4);box-shadow:var(--sh-card)}
.card--gold{border:1px solid var(--c-border-gold);background:var(--c-surface-muted);box-shadow:none}
.card--success{border-inline-start:4px solid var(--c-success);background:var(--c-success-bg);box-shadow:none}
.card--muted{background:var(--c-surface-muted);box-shadow:none}
.card--disabled{opacity:.55}

/* forms ------------------------------------------------------------------- */
label{display:block;font-size:15px;font-weight:600;margin-block-end:var(--s-2)}
.input{width:100%;min-height:52px;padding:0 var(--s-4);border-radius:var(--r-md);
       border:1px solid var(--c-border);background:var(--c-surface-raised);
       font-family:var(--font-ui);font-size:16px;color:var(--c-text);text-align:start}
.input:focus{outline:none;border:2px solid var(--c-gold);box-shadow:var(--sh-focus)}
.input--error{border:2px solid var(--c-danger);background:var(--c-danger-bg)}
.field-error{color:var(--c-danger);font-size:15px;margin-block-start:var(--s-2)}

/* OTP --------------------------------------------------------------------- */
.otp{display:flex;gap:var(--s-3);justify-content:center;direction:ltr}
.otp input{width:56px;height:56px;text-align:center;font-size:24px;font-weight:700;
           border-radius:var(--r-md);border:1px solid var(--c-border);
           background:var(--c-surface-raised);font-variant-numeric:tabular-nums}
.otp input:focus{outline:none;border:2px solid var(--c-gold);box-shadow:var(--sh-focus)}

/* party stepper ----------------------------------------------------------- */
.stepper{display:flex;align-items:center;justify-content:center;gap:var(--s-6)}
.stepper button{width:48px;height:48px;border-radius:50%;border:none;background:var(--c-navy);
                color:#fff;font-size:24px;cursor:pointer}
.stepper output{font-size:40px;font-weight:800;min-width:64px;text-align:center;
                font-variant-numeric:tabular-nums}
.quickpick{display:flex;gap:var(--s-2);flex-wrap:wrap;justify-content:center;margin-block-start:var(--s-4)}
.quickpick button{min-width:var(--touch);min-height:var(--touch);border-radius:50%;
                  border:1px solid var(--c-border);background:var(--c-surface-raised);
                  font-size:16px;font-weight:600;cursor:pointer}
.quickpick button[aria-pressed="true"]{background:var(--c-navy);color:#fff;border-color:var(--c-navy)}

/* chips / pills ----------------------------------------------------------- */
.pill{display:inline-flex;align-items:center;gap:var(--s-1);padding:2px var(--s-3);
      border-radius:var(--r-pill);font-size:13px;font-weight:500}
.pill--gold{background:var(--c-gold);color:var(--c-on-gold)}
.pill--navy{background:var(--c-navy);color:#fff}
.pill--outline{border:1px solid var(--c-border);background:var(--c-surface-raised);color:var(--c-text-2)}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block}
.dot--ok{background:var(--c-success)} .dot--off{background:var(--c-disabled)}

/* banners ----------------------------------------------------------------- */
.banner{padding:var(--s-3) var(--s-4);border-radius:var(--r-md);font-size:15px}
.banner--warn{background:var(--c-warning-bg);color:var(--c-warning)}
.banner--err{background:var(--c-danger-bg);color:var(--c-danger)}
.banner--ok{background:var(--c-success-bg);color:var(--c-success)}

/* experimental launch — quiet, on-brand, never an alert ------------------- */
.exp{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-3) var(--s-4);
     background:var(--c-surface-muted);border:1px solid var(--c-border-gold);
     border-radius:var(--r-md)}
.exp__mark{width:8px;height:8px;border-radius:50%;background:var(--c-gold);flex:none}
.exp__title{font-family:var(--font-display);font-weight:700;font-size:15px;color:var(--c-navy)}
.exp__sub{font-size:13px;color:var(--c-text-2)}

/* bottom nav -------------------------------------------------------------- */
.bnav{position:fixed;inset-block-end:0;inset-inline:0;height:var(--bottomnav-h);
      max-width:430px;margin-inline:auto;background:var(--c-surface-raised);
      border-block-start:1px solid var(--c-border);display:flex;
      padding-block-end:env(safe-area-inset-bottom);z-index:300}
/* Five items across 320px leaves 64px each, and the longest Arabic label —
   الرئيسية, إنستقرام — wants about 52 of them at 12px. That fits, but only if
   nothing is allowed to add width it did not ask for: flex-basis:0 with
   min-width:0 makes the five columns exactly equal regardless of label length,
   and nowrap makes a label that ever outgrows its column shrink by one step
   rather than fall onto a second line and shove the icons upward.

   The row keeps its full 64px height, so every target stays well over the 44px
   minimum even as the text narrows. */
.bnav a{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;
        justify-content:center;gap:2px;font-size:12px;line-height:1.25;
        white-space:nowrap;padding-inline:2px;
        color:var(--c-text-2);text-decoration:none}
.bnav a[aria-current="page"]{color:var(--c-gold);font-weight:600}
.bnav svg{width:22px;height:22px;flex:none}

/* ==========================================================================
   Waiting circle — 06-production-design/waiting-circle-spec.md
   SVG + CSS only. No GIF, no video, no JS-driven animation.
   ========================================================================== */
.wc{position:relative;width:240px;height:240px;margin-inline:auto}
.wc svg{width:100%;height:100%;display:block}
.wc__content{position:absolute;inset:0;display:flex;flex-direction:column;
             align-items:center;justify-content:center;gap:var(--s-1);pointer-events:none}
.wc__num{font-family:var(--font-ui);font-size:76px;font-weight:800;line-height:1;
         font-variant-numeric:tabular-nums;color:var(--c-gold)}
.wc__label{font-size:15px;color:var(--c-on-navy)}

.wc__disc{fill:var(--c-navy)}
.wc__ring-o,.wc__ring-i{fill:none;stroke:var(--c-gold)}
.wc__ring-o{stroke-width:2} .wc__ring-i{stroke-width:1}
.wc__band{fill:var(--c-gold);opacity:.55}
.wc__marker{fill:none;stroke:#F0D9A8;stroke-width:3;stroke-linecap:round;
            stroke-dasharray:77 539;transform-origin:120px 120px;
            filter:drop-shadow(0 0 6px rgba(224,184,127,.85));
            animation:wc-orbit 8s linear infinite}

@keyframes wc-orbit{to{transform:rotate(360deg)}}
@keyframes wc-breathe{0%,100%{opacity:.9}50%{opacity:1}}
@keyframes wc-expand{from{r:104px;opacity:.55}to{r:132px;opacity:0}}

.wc__disc{animation:wc-breathe var(--d-ambient) var(--e-breathe) infinite}

/* light variant — kept build-ready; field test under direct sun decides */
.wc[data-variant="light"] .wc__disc{fill:var(--c-surface-raised);animation:none}
.wc[data-variant="light"] .wc__ring-o,
.wc[data-variant="light"] .wc__ring-i{stroke:var(--c-navy)}
.wc[data-variant="light"] .wc__band{fill:var(--c-navy);opacity:.45}
.wc[data-variant="light"] .wc__num{color:var(--c-navy-deep)}
.wc[data-variant="light"] .wc__label{color:var(--c-text-2)}

/* states */
.wc[data-state="almost"] .wc__marker{animation-duration:5s}
.wc[data-state="almost"] .wc__ring-o{stroke-width:2.5}
.wc[data-state="almost"]{filter:drop-shadow(0 0 32px rgba(224,184,127,.35))}
.wc[data-state="called"] .wc__marker{animation:none;opacity:0}
.wc[data-state="offline"] .wc__marker{animation:none;opacity:0}
.wc[data-state="offline"] .wc__ring-o,
.wc[data-state="offline"] .wc__ring-i{stroke:var(--c-text-3)}
.wc[data-state="table-ready"] .wc__marker{animation:none;opacity:0}
.wc__wave{fill:none;stroke:var(--c-gold);stroke-width:2;opacity:0}
.wc[data-state="table-ready"] .wc__wave{animation:wc-expand var(--d-deliberate) var(--e-decel) forwards}
.wc[data-state="table-ready"] .wc__wave:nth-of-type(2){animation-delay:120ms}

@media (max-width:360px){
  .wc{width:208px;height:208px}
  .wc__num{font-size:56px}
}

/* the "called" takeover ---------------------------------------------------- */
.called-screen{background:var(--c-success);color:#fff;min-height:100vh;
               display:flex;flex-direction:column;align-items:center;justify-content:center;
               gap:var(--s-6);padding:var(--s-6);text-align:center}
.called-seal{width:240px;height:240px;border-radius:50%;background:var(--c-cream);
             box-shadow:0 0 0 2px var(--c-success),0 0 0 5px var(--c-cream);
             display:flex;align-items:center;justify-content:center}
.called-seal span{font-family:var(--font-display);font-weight:800;font-size:38px;color:var(--c-success)}
.countdown{font-size:34px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.02em}

/* table ready -------------------------------------------------------------- */
.table-card{background:var(--c-navy);border-radius:var(--r-2xl);padding:var(--s-8);
            text-align:center;color:var(--c-on-navy);
            box-shadow:0 0 0 2px var(--c-navy),0 0 0 4px var(--c-gold)}
.table-card__num{font-size:72px;font-weight:800;line-height:1;color:var(--c-gold);
                 font-variant-numeric:tabular-nums}

/* menu ---------------------------------------------------------------------
   Three things in a row, and on a 320px phone there is not room for three.
   The old layout was flex with the price nowrap at 22px: thumb 92 + gap + a
   price like "199 ريال / كيلو" left the dish NAME about 34px — the most
   important text on the card, squeezed to nothing between a picture and a
   number.

   So it is a grid, and on a phone the price drops to its own line under the
   name where it has all the room it needs. The name gets the full width beside
   the photograph, which is what a menu is for. From 480px up there is space for
   three columns and it becomes a row again. */
.mrow{display:grid;grid-template-columns:auto minmax(0,1fr);
      column-gap:var(--s-3);row-gap:var(--s-1);align-items:center}
.mrow__thumb{width:88px;height:88px;border-radius:var(--r-md);flex:none;
             grid-row:1 / span 2;align-self:start;
             background:var(--c-surface-muted);display:flex;align-items:center;justify-content:center}
.mrow__thumb svg{width:44px;height:44px;stroke:var(--c-navy);fill:none;stroke-width:1.5;opacity:.6}
.mrow__body{min-width:0;align-self:end}
.mrow__name{font-weight:700;font-size:17px;line-height:1.35;overflow-wrap:anywhere}
.mrow__en{font-size:13px;color:var(--c-text-3);direction:ltr;text-align:start}
.mrow__price{font-size:20px;font-weight:700;font-variant-numeric:tabular-nums;
             white-space:nowrap;align-self:start;color:var(--c-navy)}

/* The narrowest phones still in use: a slightly smaller picture buys the name
   another twelve pixels, and it is the name that matters. */
@media (max-width:359px){
  .mrow__thumb{width:76px;height:76px}
  .mrow__thumb svg{width:38px;height:38px}
  .mrow__name{font-size:16px}
}

@media (min-width:480px){
  .mrow{grid-template-columns:auto minmax(0,1fr) auto;align-items:center}
  .mrow__thumb{grid-row:auto;align-self:center}
  .mrow__body{align-self:center}
  .mrow__price{font-size:22px;align-self:center;justify-self:end}
}

/* utility ------------------------------------------------------------------ */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
                 overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.divider{height:1px;background:var(--c-border);margin-block:var(--s-4)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
                       transition-duration:.01ms !important}
  /* the marker stays visible — it is brand identity, not decoration */
  .wc__marker{animation:none !important;opacity:1}
  .wc__disc{animation:none !important}
}

/* ---------------------------------------------------------------- calculator
   حاسبة الطلب. No cart iconography, no primary action at the foot of the
   screen — the place a shopping app puts "checkout" is left empty on purpose. */
.btn--sm{min-height:40px;padding:0 var(--s-4);font-size:15px}
.mrow__add{display:flex;gap:var(--s-2);align-items:center;flex-wrap:wrap;
  margin-block-start:var(--s-3);padding-block-start:var(--s-3);border-block-start:1px solid var(--c-border)}
.mrow__add .btn{margin-inline-start:auto}
.mini-select{min-height:40px;padding:0 var(--s-3);border-radius:var(--r-sm);
  border:1px solid var(--c-border);background:var(--c-surface-raised);
  color:var(--c-text-1);font-family:var(--font-ui);font-size:15px}
.mini-select:focus{outline:none;border:2px solid var(--c-gold)}
.calc-strip{display:flex;align-items:center;justify-content:space-between;
  text-decoration:none;color:var(--c-navy);font-weight:600}
.calc-line__head{display:flex;justify-content:space-between;gap:var(--s-3);align-items:flex-start}
.calc-line__name{font-weight:700;font-size:17px}
.calc-line__amount{font-size:18px;font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.calc-line__meta{margin-block-start:var(--s-1)}
.calc-line__controls{display:flex;align-items:center;gap:var(--s-2);margin-block-start:var(--s-3)}
.calc-line__spacer{flex:1}
.calc-line--gone .calc-line__name{text-decoration:line-through;color:var(--c-text-3)}
.qty-btn{width:40px;height:40px;border-radius:50%;border:1.5px solid var(--c-navy);
  background:transparent;color:var(--c-navy);font-size:20px;line-height:1;cursor:pointer}
.qty-btn:focus-visible{outline:2px solid var(--c-gold);outline-offset:2px}
.qty-value{min-width:64px;text-align:center;font-weight:600}
.calc-total__row{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-3)}
.calc-total__row--main{font-family:var(--font-display);font-weight:800;font-size:19px;color:var(--c-navy)}

/* ---------------------------------------------------------------- stale data
   Rule: never show a stale number as if it were current. */
.stale{opacity:.45;filter:grayscale(1)}
.wc[data-state="offline"] .wc__num{opacity:.45}

/* admin -------------------------------------------------------------------
   Desktop-first: this is used on a laptop in an office, not on a phone. */
.admin{max-width:1280px;margin-inline:auto;padding:var(--s-5)}
.admin h1{font-family:var(--font-display);font-weight:800;font-size:26px;margin-block:var(--s-4)}
.admin h2{font-family:var(--font-display);font-weight:700;font-size:18px}
.admin__nav{display:flex;gap:var(--s-4);flex-wrap:wrap;align-items:center;
  padding-block-end:var(--s-3);border-block-end:1px solid var(--c-border)}
.admin__nav a{color:var(--c-text-2);text-decoration:none;font-size:15px}
.admin__nav a.is-active{color:var(--c-navy);font-weight:700}
.admin__grid{display:grid;gap:var(--s-4);grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  margin-block:var(--s-4)}
.admin__filters{display:flex;gap:var(--s-3);flex-wrap:wrap;align-items:end;margin-block:var(--s-4)}
.atable{width:100%;border-collapse:collapse;margin-block-start:var(--s-3)}
.atable th{text-align:start;font-size:13px;color:var(--c-text-3);font-weight:500;padding-block-end:var(--s-2)}
.atable td{border-block-start:1px solid var(--c-border);padding-block:var(--s-2);vertical-align:middle}
.input--inline{min-height:36px;padding:0 var(--s-2);font-size:15px;width:auto;display:inline-block}
.inline-form{display:flex;gap:var(--s-2);align-items:center;flex-wrap:wrap}
.chk{display:inline-flex;gap:var(--s-2);align-items:center;font-size:15px}

/* ==========================================================================
   Language switcher — Round 2
   Two languages, so this is a link and not a menu.
   ========================================================================== */
.lang-switch{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  min-width:var(--touch);min-height:36px;padding-inline:10px;
  border:1px solid var(--c-border);border-radius:var(--r-pill);
  font-size:13px;font-weight:700;letter-spacing:.02em;
  color:var(--c-navy);text-decoration:none;background:var(--c-surface-raised);
}
.lang-switch:hover,.lang-switch:focus-visible{border-color:var(--c-border-gold)}

/* On the hero there is no header to sit in, so it rides the brand row.
   margin-inline-start:auto pushes it to the trailing side and flexbox decides
   which side that is — no absolute corner to collide with the seal. */
/* Positioned by the wordmark's auto margin, not by one of its own: this element
   carries dir="ltr" when it offers English, and a logical margin on it would
   resolve against that rather than against the page. */
.lang-switch--hero{
  background:rgba(247,233,207,.92);backdrop-filter:blur(6px);
  border-color:rgba(14,52,73,.15);
}

/* The staff bar is navy, so the switcher inverts there. */
.lang-switch--bar{
  background:transparent;color:var(--c-cream);border-color:rgba(247,233,207,.35);
}
.lang-switch--bar:hover,.lang-switch--bar:focus-visible{border-color:var(--c-gold)}

/* The phone field carries dir="ltr" so the digits never reorder, which means
   its own start/end are pinned to left/right whatever the page does. The digits
   should sit against the +966 pill, and the pill moves with the page — so the
   alignment is keyed off the PAGE direction, not the field's. */
.input--phone{text-align:right}
html[dir="ltr"] .input--phone{text-align:left}

/* Six items now, and English labels are longer than Arabic ones. "Instagram"
   cannot be shortened — it is a name — and at 320px six columns are 53px each
   while the word needs 55. Measured, not guessed.
   So on the narrowest phones only, one step down: 11px is still comfortably
   readable and buys the five pixels the word needs. Everything from 360px up
   keeps 12px. */
@media (max-width:359px){
  .bnav a{padding-inline:0;font-size:11px;letter-spacing:-.01em}
  .bnav svg{width:20px;height:20px}
}

/* ==========================================================================
   Star rating — Round 3
   The old control was five static glyphs with hidden radios and no state at
   all: tapping selected something the customer could not see. Everything here
   exists to make the choice visible.
   ========================================================================== */
/* One tidy row per criterion: the label on one side, the stars on the other.
   Stacked and oversized, five criteria became five big blocks and the form read
   as a wall. A star is a control, not an illustration. */
.starrow{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);
  padding-block:var(--s-1);flex-wrap:wrap}
.starrow__label{font-size:15px;font-weight:600;min-width:0}
.starrow__label .tiny{font-weight:400}

.stars{display:flex;gap:0;align-items:center;flex:none}

/* The overall rating leads, so it keeps its own line and larger stars. */
.starrow--lead{flex-direction:column;align-items:stretch;gap:var(--s-2)}
.starrow--lead .starrow__label{font-size:17px}
.starrow--lead .stars{justify-content:center}
.starrow--lead .stars__star svg{width:34px;height:34px}

/* Hidden from sight, not from the keyboard or the accessibility tree — the
   radios are what make arrow keys, tab order and submission work for free. */
.stars__input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}

.stars__star{
  display:flex;align-items:center;justify-content:center;
  width:var(--touch);height:var(--touch);   /* the TARGET stays thumb-sized… */
  cursor:pointer;color:var(--c-disabled);
  transition:color var(--d-fast) var(--e-standard), transform var(--d-fast) var(--e-standard);
}
/* …while the star DRAWN inside it is smaller. The two are different things:
   44px is what a thumb needs to hit; 24px is what five stars beside a label
   should look like. */
.stars__star svg{width:24px;height:24px;fill:currentColor}
.stars__star.is-on{color:var(--c-gold)}
.stars__star:active{transform:scale(.92)}

/* The keyboard needs to see where it is, and :focus-visible on a hidden input
   shows nothing — so the ring is drawn on the label instead. */
.stars__input:focus-visible + .stars__star{
  outline:2px solid var(--c-gold);outline-offset:2px;border-radius:var(--r-sm);
}

/* Without JavaScript the chosen star still fills. Preview and fill-up-to are
   the only things the script adds. */
.stars__input:checked + .stars__star{color:var(--c-gold)}

@media (max-width:359px){
  .starrow{gap:var(--s-2)}
  .stars__star{width:38px;height:38px}
  .stars__star svg{width:22px;height:22px}
  .starrow--lead .stars__star svg{width:30px;height:30px}
}

/* ---------------------------------------------------------------- visit card */
.visitcard{
  display:flex;flex-direction:column;gap:2px;
  padding:var(--s-4);border-radius:var(--r-lg);
  background:var(--c-surface-muted);border:1px solid var(--c-border-gold);
}
.visitcard strong{font-family:var(--font-display);font-size:19px;color:var(--c-navy)}
.visitcard__date{font-size:15px;color:var(--c-text-2);font-variant-numeric:tabular-nums}

.btn.is-busy{opacity:.6;cursor:progress}

/* ==========================================================================
   Add to the estimate — one round button, on the same line
   "أضف إلى الحاسبة" spelled out pushed the two selects onto a line of their
   own and made every card a row taller. Thirty-five times down a menu, that is
   a lot of scrolling for a label nobody reads twice.
   ========================================================================== */
.mrow__add{display:flex;gap:var(--s-2);align-items:center;flex-wrap:nowrap;
  margin-block-start:var(--s-3);padding-block-start:var(--s-3);
  border-block-start:1px solid var(--c-border)}

.add-btn{
  margin-inline-start:auto;flex:none;position:relative;
  width:var(--touch);height:var(--touch);border-radius:50%;
  border:1.5px solid var(--c-navy);background:var(--c-navy);color:#fff;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background var(--d-fast) var(--e-standard), transform var(--d-fast) var(--e-standard);
}
.add-btn:active{transform:scale(.92)}
.add-btn:focus-visible{outline:2px solid var(--c-gold);outline-offset:2px}
.add-btn__plus,.add-btn__tick{font-size:26px;line-height:1;font-weight:400}
.add-btn__tick{display:none;font-size:22px}

/* Added: the plus becomes a tick for a moment. It is the only feedback there
   is now that the page does not reload, so it has to be unmistakable. */
.add-btn.is-added{background:var(--c-success);border-color:var(--c-success)}
.add-btn.is-added .add-btn__plus{display:none}
.add-btn.is-added .add-btn__tick{display:block}
.add-btn.is-failed{background:var(--c-danger);border-color:var(--c-danger)}

/* The selects shrink before the button does — the button is a tap target and
   has a floor; a select can lose a few pixels and still be read. */
.mrow__add .mini-select{min-width:0;flex:0 1 auto;text-overflow:ellipsis}

@media (max-width:359px){
  .mrow__add{gap:var(--s-1)}
  .mrow__add .mini-select{padding-inline:var(--s-2);font-size:14px}
}

/* Which visit a rating card is about — branch and moment, in the box with the
   question rather than one tap further on. */
.visit-line{display:flex;flex-direction:column;gap:2px;font-size:15px;color:var(--c-navy);font-weight:600}
.visit-line__when{font-size:13px;color:var(--c-text-2);font-weight:400}

/* ==========================================================================
   Finding one guest

   A staff screen, not a customer one: dense, high contrast, and readable at
   arm's length while holding a phone in the other hand.
   ========================================================================== */
.staffbar{background:var(--c-navy);color:var(--c-on-navy);padding:var(--s-3) var(--s-5);
  display:flex;align-items:center;gap:var(--s-4);flex-wrap:wrap}
.staffbar a{color:var(--c-gold);text-decoration:none}
.staffwrap{max-width:820px;margin-inline:auto;padding:var(--s-5)}

.lookup-form{display:flex;gap:var(--s-2);margin-block-end:var(--s-2)}
.lookup-form__q{flex:1;min-height:48px;font-size:17px}
.lookup-form .btn{min-height:48px;padding-inline:var(--s-5)}
.lookup-hint{color:var(--c-text-3);margin-block-end:var(--s-4)}
.lookup-meta{display:flex;align-items:baseline;gap:var(--s-3);margin-block-end:var(--s-2)}
.lookup-meta .tiny{color:var(--c-text-3)}

/* One result. The tone stripe is the first thing read from across a counter:
   somebody overdue must not look like somebody who finished an hour ago. */
.lookup-row{display:flex;flex-direction:column;gap:4px;background:#fff;
  border-radius:var(--r-md);box-shadow:var(--sh-sm);padding:var(--s-3);
  margin-block-end:var(--s-2);text-decoration:none;color:inherit;
  border-inline-start:5px solid var(--tone,var(--c-text-3))}
.lookup-row:hover{box-shadow:var(--sh-md)}
.lookup-row:focus-visible{outline:3px solid var(--c-gold);outline-offset:2px}
.lookup-row--wait {--tone:#8a6d3b}
.lookup-row--warn {--tone:var(--c-gold)}
.lookup-row--bad  {--tone:var(--c-danger)}
.lookup-row--ok   {--tone:#2f7d63}
.lookup-row--done {--tone:#7a7f87}
.lookup-row--muted{--tone:var(--c-border)}
.lookup-row__head{display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap}
.lookup-row__head .tiny{color:var(--c-text-3)}
.lookup-row__status{font-weight:600;color:var(--c-navy)}
.lookup-row__note{font-size:13px;color:var(--tone)}
.lookup-row__when{color:var(--c-text-3)}

/* .card also gets a border from albasali-visual.css, which loads AFTER this
   file — a single-class rule here loses to it. Two classes wins, and says out
   loud that the stripe is a deliberate override rather than an accident. */
.card.lookup-head{border-inline-start:5px solid var(--tone,var(--c-text-3))}
.lookup-head--wait {--tone:#8a6d3b}
.lookup-head--warn {--tone:var(--c-gold)}
.lookup-head--bad  {--tone:var(--c-danger)}
.lookup-head--ok   {--tone:#2f7d63}
.lookup-head--done {--tone:#7a7f87}
.lookup-head--muted{--tone:var(--c-border)}
.lookup-head__name{display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap}
.lookup-head__status{font-size:17px;font-weight:700;color:var(--c-navy);margin-block-start:var(--s-2)}
.lookup-head__note{font-size:14px;color:var(--tone);margin-block-start:4px}

.lookup-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--s-3)}
.fact{display:flex;flex-direction:column;gap:2px}
.fact__k{font-size:12px;color:var(--c-text-3)}
.fact__v{font-weight:600;color:var(--c-navy)}

.lookup-scores{display:flex;flex-wrap:wrap;gap:var(--s-4);margin-block-start:var(--s-2)}
.score{display:flex;flex-direction:column;gap:2px}
.score__k{font-size:12px;color:var(--c-text-3)}
.score__v{font-weight:700;color:var(--c-navy)}
.lookup-notes{margin-block-start:var(--s-3);color:var(--c-text-2)}

/* What happened, in order. The rail makes it one journey rather than a list of
   unrelated lines. */
.tline{list-style:none;margin:var(--s-3) 0 0;padding:0;position:relative}
.tline::before{content:'';position:absolute;inset-block:6px;inset-inline-start:64px;
  width:2px;background:var(--c-border)}
.tline__item{display:grid;grid-template-columns:60px 1fr auto;align-items:baseline;
  gap:var(--s-3);padding-block:6px;position:relative}
.tline__item::before{content:'';position:absolute;inset-inline-start:60px;inset-block-start:12px;
  width:10px;height:10px;border-radius:50%;background:var(--c-gold);
  transform:translateX(50%);border:2px solid #fff}
[dir=ltr] .tline__item::before{transform:translateX(-50%)}
.tline__time{color:var(--c-text-3);font-size:13px}
.tline__what{color:var(--c-navy);font-weight:600;padding-inline-start:var(--s-3)}
.tline__who{color:var(--c-text-3)}

@media(max-width:520px){
  .lookup-form{flex-wrap:wrap}
  .lookup-form__q{flex-basis:100%}
  .tline__item{grid-template-columns:56px 1fr}
  .tline__who{grid-column:2}
  .tline::before,.tline__item::before{display:none}
}

/* The turn a customer is holding, shown at the top of the home page.
   This card is what let the home page stop being a locked door: their place
   is still the first thing here, it is just no longer the only thing. */
.turn-card{display:flex;align-items:center;gap:var(--s-3);text-decoration:none;
  background:var(--c-navy);color:var(--c-on-navy);border-radius:var(--r-lg);
  padding:var(--s-3) var(--s-4);box-shadow:var(--sh-md)}
.turn-card strong{color:var(--c-cream);display:block}
.turn-card .tiny{color:var(--c-on-navy-2)}
.turn-card__text{flex:1;min-width:0}
.turn-card__go{color:var(--c-gold);font-size:14px;font-weight:700;white-space:nowrap}
.turn-card__pulse{width:10px;height:10px;border-radius:50%;background:var(--c-gold);flex:none;
  animation:livepulse 2.4s var(--e-breathe) infinite}
@keyframes livepulse{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.turn-card__pulse{animation:none}}

/* Removing someone from the queue: available, and never the easy tap. */
.fix--danger summary{color:var(--c-danger)}
.btn--danger{background:var(--c-danger);color:#fff;border:none}
.btn--danger:hover{filter:brightness(.94)}

/* Opening hours and the occasional notice, on the branches page. */
.bhours{display:flex;gap:var(--s-2);align-items:baseline;flex-wrap:wrap;
  margin-block-start:var(--s-2);font-size:15px}
.bhours__label{color:var(--c-text-3);font-size:13px}
.bhours__lines{display:flex;flex-direction:column;gap:2px;color:var(--c-navy);font-weight:600}
.bnotice{margin-block-start:var(--s-2);padding:var(--s-2) var(--s-3);font-size:14px;
  color:var(--c-navy);background:var(--c-gold-soft,#f6ecd9);
  border-inline-start:3px solid var(--c-gold);border-radius:var(--r-sm)}

/* Switching between the normal and Ramadan timetables while editing them. */
.season-tabs{display:flex;gap:var(--s-2);align-items:center;flex-wrap:wrap;margin-block-end:var(--s-2)}
.season-tabs a{text-decoration:none}
.season-tabs .tiny{color:var(--c-text-3)}

/* The rating form, tightened.
   The prose that used to sit above these rows pushed the submit button below
   the fold on a phone — the one control on the page that must be reachable. */
.rating-page{gap:var(--s-3)}
.rating-visit{display:flex;align-items:baseline;gap:var(--s-2);flex-wrap:wrap;
  margin:0;color:var(--c-navy)}
.rating-visit__when{font-size:13px;color:var(--c-text-3)}
.rating-page .starrow{padding-block:var(--s-2)}
.rating-page .starrow--lead{padding-block:var(--s-2) var(--s-3)}
.rating-notes{min-height:64px;padding:var(--s-3)}

/* A party who reached the cashier and stopped. Not evicted — the system cannot
   tell "left without paying" from "still choosing fish" — but not invisible. */
.qrow--stalled{border-inline-start:4px solid var(--c-warning)}

/* ==========================================================================
   Picking a table

   Circles, not a text box. Only vacant tables are drawn, so an impossible
   choice cannot be made; the colour is the floor, because "which table" and
   "which floor" are one decision — walking a family upstairs is a different
   promise from walking them across the room.
   ========================================================================== */
.tpick{display:flex;flex-wrap:wrap;gap:var(--s-2);align-items:center;
  margin-block-start:var(--s-3)}
.tpick__floor{flex-basis:100%;font-size:12px;color:var(--c-text-3);margin-block-start:var(--s-1)}
.tpick__fallback{display:flex;gap:var(--s-2);flex-basis:100%}

.tpick__t{position:relative;width:46px;height:46px;flex:none;padding:0;cursor:pointer;
  border-radius:50%;background:#fff;color:var(--c-navy);font:inherit;font-weight:700;
  border:2px solid var(--tf,var(--c-border));display:grid;place-items:center;
  transition:transform var(--d-1) var(--e-out),box-shadow var(--d-1) var(--e-out)}
.tpick__t:hover{transform:scale(1.06)}
.tpick__t:focus-visible{outline:3px solid var(--c-gold);outline-offset:2px}
.tpick__num{font-size:15px;line-height:1}

/* One colour per floor, by position rather than by id, so a table that was
   green on this poll is still green on the next. */
.tpick__t--f0{--tf:#2f7d63}
.tpick__t--f1{--tf:#3d6b8f}
.tpick__t--f2{--tf:#8a6d3b}
.tpick__t--f3{--tf:#7a4b6b}

/* The table this party already holds, when moving them. */
.tpick__t.is-current{background:var(--tf);color:#fff}

/* The three seconds. The ring is one animation from a dash offset rather than
   a timer painting frames, so it cannot drift or stutter under a busy page. */
.tpick__ring{position:absolute;inset:-4px;width:calc(100% + 8px);height:calc(100% + 8px);
  transform:rotate(-90deg);pointer-events:none;opacity:0}
.tpick__ring circle{fill:none;stroke-width:3;cx:22;cy:22;r:20}
.tpick__ring-track{stroke:var(--c-border);opacity:.35}
.tpick__ring-run{stroke:var(--c-gold);stroke-linecap:round;
  stroke-dasharray:126;stroke-dashoffset:126}

.tpick__t.is-arming{transform:scale(1.1);box-shadow:0 0 0 3px rgba(224,184,127,.35)}
.tpick__t.is-arming .tpick__ring{opacity:1}
.tpick__t.is-arming .tpick__ring-run{animation:tpick-ring 3s linear forwards}
.tpick__t.is-committing{background:var(--c-gold);border-color:var(--c-gold);color:var(--c-navy)}

@keyframes tpick-ring{from{stroke-dashoffset:126}to{stroke-dashoffset:0}}

/* Reduced motion still needs the three seconds — it is a safety window, not
   decoration — so the ring fills in steps instead of sweeping. */
@media (prefers-reduced-motion:reduce){
  .tpick__t:hover,.tpick__t.is-arming{transform:none}
  .tpick__t.is-arming .tpick__ring-run{animation:tpick-ring 3s steps(4) forwards}
}

/* "Are you at the restaurant?" — the answer, before the guest submits. */
.geo{display:flex;align-items:center;gap:var(--s-2);padding:var(--s-2) var(--s-3);
  border-radius:var(--r-md);font-size:14px;background:var(--c-surface-muted);color:var(--c-text-2)}
.geo__dot{width:9px;height:9px;border-radius:50%;flex:none;background:var(--c-text-3)}
.geo[data-state=asking] .geo__dot{animation:livepulse 1.6s var(--e-breathe) infinite}
.geo[data-state=inside]{background:#e8f3ee;color:#215c46}
.geo[data-state=inside] .geo__dot{background:#2f7d63}
.geo[data-state=far]{background:#fdf1e3;color:#8a5a20}
.geo[data-state=far] .geo__dot{background:var(--c-warning)}
.geo[data-state=unknown]{background:var(--c-surface-muted)}
.wa--sm{font-size:12px;padding:2px 8px}