/* =========================================================
   ESPRSO — DEMO SHOP  ·  order.esprso.ae

   Loads after styles.css, the stylesheet shared with the
   website and the POS, which already carries the shop's grid,
   product page and cart drawer. Adds the shop's header and
   footer, the Stripe Checkout stand-in, ordering from a table,
   and the order pages' own small pieces.
========================================================= */

/* ---------------------------------------------------------- header, footer and small pieces */
.nav a.nav__site { color: var(--crema); }
.top__table {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0.2rem 0.85rem;
  border: 1px solid var(--taupe); border-radius: 999px;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap;
}
@media (min-width: 900px) { .foot__grid { grid-template-columns: 1.2fr repeat(4, minmax(0, 1fr)); } }

/* At a table, guests order to the table only: no online cart, categories, account or order bar. */
.is-table .announce, .is-table .nav, .is-table .cart-btn, .is-table [data-account], .is-table .trackbar { display: none !important; }
.is-table .nav-toggle { visibility: hidden; }

button.chip { background: none; cursor: pointer; font: inherit; font-size: 0.82rem; }
.actions--center { justify-content: center; }
.receipt-page { gap: 1.5rem; }
.hint { margin-block: 0.25rem; }

/* ---------------------------------------------------------- Stripe Checkout stand-in */
/* Stripe's page, in ESPRSO's colours: the order on the brand's dark ground, the
   form on white, in the system font Stripe uses. */
.is-stripe .top, .is-stripe .foot { display: none; }
.is-stripe #view { min-height: 100dvh; }

.stripe {
  min-height: 100dvh; display: grid; align-content: start;
  background: #fff; color: #1a1a1a;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}
@media (min-width: 900px) { .stripe { grid-template-columns: 1fr 1fr; align-content: stretch; } }

.stripe__col { width: 100%; max-width: 420px; display: grid; gap: 1.1rem; align-content: start; }

.stripe__summary { background: var(--ink); color: var(--cream); padding: 0.75rem var(--gutter) 1.25rem; }
.stripe__main { padding: 1.5rem var(--gutter) calc(5rem + env(safe-area-inset-bottom)); }
.stripe__summary .stripe__col, .stripe__main .stripe__col { margin-inline: auto; }
@media (min-width: 900px) {
  .stripe__summary { padding: 3.5rem 4rem 3rem 2rem; }
  .stripe__summary .stripe__col { margin: 0 0 0 auto; gap: 1.75rem; }
  .stripe__main { padding: 3.5rem 2rem 4rem 4rem; box-shadow: -18px 0 36px -24px rgba(0, 0, 0, 0.25); }
  .stripe__main .stripe__col { margin: 0 auto 0 0; }
}

.stripe__bar { display: flex; align-items: center; gap: 0.75rem; }
.stripe__back {
  display: inline-flex; align-items: center; gap: 0.55rem; min-height: var(--tap);
  color: var(--cream); text-decoration: none; font-size: 0.95rem; font-weight: 500;
}
.stripe__back img { width: 28px; height: 28px; border-radius: 50%; }
.stripe__back:hover span:last-child { text-decoration: underline; text-underline-offset: 3px; }
.stripe__test {
  display: inline-flex; align-items: center; padding: 0.12rem 0.45rem; border-radius: 4px;
  background: #ffde92; color: #7a4a00; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
}

.stripe__due { display: grid; gap: 0.2rem; }
.stripe__label { color: var(--muted); font-size: 0.95rem; }
.stripe__amount { font-size: clamp(2rem, 6vw, 2.4rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }

.stripe__details summary {
  display: inline-flex; align-items: center; gap: 0.4rem; min-height: var(--tap);
  cursor: pointer; list-style: none; font-size: 0.88rem; color: var(--cream);
}
.stripe__details summary::-webkit-details-marker { display: none; }
.stripe__details summary::after { content: '▾'; font-size: 0.8rem; transition: transform 0.2s; }
.stripe__details[open] summary::after { transform: rotate(180deg); }
@media (min-width: 900px) { .stripe__details > summary { display: none; } }

.stripe__lines { display: grid; }
.stripe__lines li { display: grid; grid-template-columns: 44px 1fr auto; gap: 0.85rem; align-items: center; padding-block: 0.6rem; font-size: 0.9rem; }
.stripe__thumb { position: relative; width: 44px; height: 44px; }
.stripe__thumb img, .stripe__thumb .icon-disc { width: 44px; height: 44px; border-radius: 6px; object-fit: cover; }
.stripe__thumb .icon-disc svg { width: 55%; height: 55%; }
.stripe__qty {
  position: absolute; top: -7px; right: -7px; display: grid; place-items: center;
  min-width: 20px; height: 20px; padding-inline: 5px; border-radius: 999px;
  background: var(--stone); color: var(--ink); font-size: 0.68rem; font-weight: 600;
}
.stripe__name { min-width: 0; }
.stripe__name small { display: block; color: var(--muted); font-size: 0.78rem; }
.stripe__price { font-variant-numeric: tabular-nums; }
.stripe__totals { display: grid; gap: 0.5rem; margin-top: 0.4rem; padding-top: 0.9rem; border-top: 1px solid var(--line); font-size: 0.9rem; }
.stripe__totals div { display: flex; justify-content: space-between; gap: 1rem; font-variant-numeric: tabular-nums; }
.stripe__totals dt { color: var(--muted); }
.stripe__total { font-weight: 600; }
.stripe__total dt { color: var(--cream); }

.stripe__alert {
  padding: 0.8rem 0.95rem; border: 1px solid #fbd0d8; border-left: 3px solid #df1b41; border-radius: 6px;
  background: #fff5f7; color: #1a1a1a; font-size: 0.9rem;
}
.stripe__alert a { color: #0570de; }
#sp-alerts:empty { display: none; }
#sp-alerts:focus { outline: none; }

.applepay-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.3rem; width: 100%; min-height: 48px;
  border: 0; border-radius: 6px; background: #000; color: #fff; font-family: inherit; font-size: 1rem; cursor: pointer;
}
.applepay-btn b { font-weight: 600; }
.applepay-btn:hover { background: #1d1d1f; }
.applepay-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.applepay-btn:focus-visible { outline: 2px solid #0570de; outline-offset: 2px; }

.stripe__or { display: flex; align-items: center; gap: 0.75rem; color: #6b7280; font-size: 0.85rem; }
.stripe__or::before, .stripe__or::after { content: ''; flex: 1; height: 1px; background: #e5e7eb; }

.stripe .hint { border-color: #dcc6a6; background: #fbf8f3; color: #4b5563; margin: 0; }
.stripe .hint__title { color: #8a6437; }
.stripe .hint__chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.stripe .hint__chip {
  display: grid; justify-items: start; gap: 0; padding: 0.4rem 0.7rem; border-radius: 8px;
  background: #fff; border-color: #e5e7eb; color: #1a1a1a; font-family: inherit; text-align: left; line-height: 1.3;
}
.stripe .hint__chip small { color: #6b7280; }
.stripe .hint__chip:hover { border-color: var(--crema); }
.stripe .hint__chip:focus-visible { outline-color: #0570de; }

.stripe__form { display: grid; gap: 1rem; }
.stripe__form[inert] { opacity: 0.75; }
.sfield { display: grid; gap: 0.35rem; margin: 0; padding: 0; border: 0; min-width: 0; }
.sfield__label { padding: 0; font-size: 0.86rem; font-weight: 500; color: #30313d; }
.sfield__label small { font-weight: 400; color: #6b7280; }
.sinput, .scard input {
  width: 100%; min-height: 44px; padding: 0.55rem 0.75rem;
  background: #fff; color: #1a1a1a; border: 1px solid #e0e0e0; border-radius: 6px;
  font-family: inherit; font-size: 1rem; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.03);
}
.sinput::placeholder, .scard input::placeholder { color: #a3acb9; }
.sinput[readonly] { background: #f7f8f9; color: #4b5563; }
.sinput:focus, .scard input:focus { outline: none; border-color: #0570de; box-shadow: 0 0 0 3px rgba(5, 112, 222, 0.22); }
.sinput[aria-invalid='true'], .scard input[aria-invalid='true'] { color: #df1b41; border-color: #df1b41; }
.sinput[aria-invalid='true']:focus, .scard input[aria-invalid='true']:focus { box-shadow: 0 0 0 3px rgba(223, 27, 65, 0.2); }
select.sinput { appearance: auto; }

.scard { border: 1px solid #e0e0e0; border-radius: 6px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.03); }
.scard input { border: 0; border-radius: 0; box-shadow: none; }
.scard input:focus { position: relative; z-index: 1; border-radius: 5px; }
.scard__number { display: flex; align-items: center; border-bottom: 1px solid #e0e0e0; }
.scard__split { display: grid; grid-template-columns: 1fr 1fr; }
.scard__split input + input { border-left: 1px solid #e0e0e0; }
.scard__split input:first-child:focus { border-radius: 0 0 0 5px; }
.scard__split input:last-child:focus { border-radius: 0 0 5px 0; }
.scard__brands { display: flex; flex: none; gap: 0.25rem; padding-right: 0.65rem; }
.sbrand {
  display: inline-grid; place-items: center; min-width: 32px; height: 20px; padding-inline: 4px;
  border: 1px solid #e5e7eb; border-radius: 3px; background: #fff;
  font-size: 0.56rem; font-weight: 800; letter-spacing: 0.02em; color: #1a1f71;
}
.sbrand--mc { color: #eb001b; }
.sbrand--amex { color: #fff; background: #2e77bc; border-color: #2e77bc; }
.sfield__error { font-size: 0.85rem; color: #df1b41; }

.stripe__pay {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  width: 100%; min-height: 48px; margin-top: 0.4rem; border: 0; border-radius: 6px;
  background: var(--crema); color: var(--ink); font-family: inherit; font-size: 1rem; font-weight: 600; cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); transition: background 0.2s var(--ease);
}
.stripe__pay:hover { background: var(--crema-hi); }
.stripe__pay:disabled { opacity: 0.45; cursor: not-allowed; }
.stripe__pay:focus-visible { outline: 2px solid #0570de; outline-offset: 2px; }
.stripe__spinner { display: none; width: 18px; height: 18px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin 0.8s linear infinite; }
.stripe__pay.is-busy .stripe__spinner { display: inline-block; }
.stripe__pay.is-busy #sp-pay-label { opacity: 0.75; }
.stripe__pay.is-done { background: #1ea672; color: #fff; }
.stripe__pay.is-done #sp-pay-label::before { content: '✓ '; }
@keyframes spin { to { transform: rotate(360deg); } }

.stripe__foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.35rem 1.1rem; padding-top: 0.5rem; color: #9ca3af; font-size: 0.8rem; }
.stripe__foot b { font-weight: 800; letter-spacing: -0.03em; color: #6b7280; }
.stripe__foot span + span { padding-left: 1.1rem; border-left: 1px solid #e5e7eb; }

/* 3-D Secure and Apple Pay dialogs */
.sdialog {
  width: min(440px, calc(100% - 1.5rem)); max-height: calc(100dvh - 1.5rem); padding: 0; border: 0; border-radius: 12px;
  background: #fff; color: #1a1a1a; overflow: auto;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35);
}
.sdialog::backdrop { background: rgba(10, 12, 20, 0.6); }
.sdialog[open] { animation: rise 0.25s var(--ease); }

.tds { display: grid; gap: 1rem; padding: 1.4rem; font-size: 0.95rem; }
.tds__head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding-bottom: 0.9rem; border-bottom: 1px solid #eef0f3; }
.tds__note { font-size: 0.85rem; color: #6b7280; }
.tds__actions { display: grid; gap: 0.6rem; }
@media (min-width: 420px) { .tds__actions { grid-template-columns: 1fr 1fr; } }
.tds__actions button { min-height: 46px; padding: 0.5rem 0.9rem; border-radius: 6px; font-family: inherit; font-size: 0.9rem; font-weight: 600; cursor: pointer; }
.tds__fail { background: #fff; color: #df1b41; border: 1px solid #f5c2cd; }
.tds__ok { background: #0570de; color: #fff; border: 1px solid #0570de; }
.tds__actions button:focus-visible { outline: 2px solid #0570de; outline-offset: 2px; }

.apdialog { width: 100%; max-width: 100%; margin: auto auto 0; border-radius: 16px 16px 0 0; background: #f2f2f7; color: #000; }
@media (min-width: 560px) { .apdialog { width: 400px; margin: auto; border-radius: 16px; } }
.ap { display: grid; gap: 0.9rem; padding: 0.9rem 1.1rem calc(1.2rem + env(safe-area-inset-bottom)); }
.ap__head { display: flex; align-items: center; justify-content: space-between; }
.ap__logo { font-size: 1.2rem; font-weight: 600; }
.ap__cancel { min-height: var(--tap); padding: 0 0.25rem; background: none; border: 0; color: #007aff; font-family: inherit; font-size: 1rem; cursor: pointer; }
.ap__rows { background: #fff; border-radius: 10px; }
.ap__rows div { display: grid; grid-template-columns: 5.5rem 1fr; gap: 0.75rem; padding: 0.8rem 0.95rem; font-size: 0.92rem; }
.ap__rows div + div { border-top: 1px solid #e5e5ea; }
.ap__rows dt { color: #8e8e93; }
.ap__total dd { font-size: 1.05rem; font-weight: 600; }
.ap__card { display: inline-block; margin-right: 0.4rem; padding: 0.05rem 0.3rem; border-radius: 3px; background: #1a1f71; color: #fff; font-size: 0.6rem; font-weight: 800; vertical-align: 0.1em; }
.ap__confirm {
  display: flex; align-items: center; justify-content: center; gap: 0.6rem; min-height: 52px;
  border: 0; border-radius: 12px; background: #000; color: #fff; font-family: inherit; font-size: 1rem; font-weight: 600; cursor: pointer;
}
.ap__confirm:focus-visible { outline: 2px solid #007aff; outline-offset: 2px; }
.ap__confirm.is-done { background: #34c759; }
.ap__side { width: 4px; height: 22px; border-radius: 2px; background: #fff; opacity: 0.8; animation: nudge 1.2s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateX(3px); } }
.ap__spin { width: 18px; height: 18px; border: 2px solid #fff; border-right-color: transparent; border-radius: 50%; animation: spin 0.8s linear infinite; }
.ap__tick { font-size: 1.1rem; }
.ap__demo { text-align: center; font-size: 0.75rem; color: #8e8e93; }

/* ---------------------------------------------------------- ordering from a table */
.tmenu__sec { display: grid; gap: 0.25rem; padding-top: 1.25rem; scroll-margin-top: calc(var(--top-h) + 1rem); }
.tmenu__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; }
.titems { display: grid; }
.titem { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0.5rem 1rem; padding-block: 1rem; border-bottom: 1px solid var(--line); }
.titem__main { display: grid; gap: 0.15rem; min-width: 0; }
.titem__name { font-family: var(--serif); font-weight: 400; font-size: 1.4rem; line-height: 1.15; }
.titem__desc { color: var(--muted); font-size: 0.88rem; max-width: 52ch; }
.titem__price { margin-top: 0.2rem; font-size: 0.9rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.titem.is-soldout .titem__main { opacity: 0.5; }
.tpage { max-width: 680px; }

.cartbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  padding: 0.75rem var(--gutter) calc(0.75rem + env(safe-area-inset-bottom));
  background: rgba(14, 15, 16, 0.94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
}
.cartbar .btn { display: flex; max-width: 560px; margin-inline: auto; }
.has-cartbar .demo-fab { bottom: calc(5.4rem + env(safe-area-inset-bottom)); }
.has-cartbar .toasts { bottom: calc(5.6rem + env(safe-area-inset-bottom)); }
.has-cartbar .foot { padding-bottom: 5rem; }

.pick { display: grid; gap: 1.1rem; padding: 1.2rem 1.3rem calc(1.3rem + env(safe-area-inset-bottom)); }
.pick__head { display: flex; align-items: start; justify-content: space-between; gap: 1rem; }