/* GA1 (31.10.2026, plans/PLAN_guest_app_ga_20261031.md): the restaurant's own app: the bar on the menu, the card on the pass and on
   «Meine Bestellungen», the steps. Comes with the route styles, after the first paint. The bar is fixed: it moves nothing on the page. */

.gz-order .gzapp-bar {
  display: none;
  position: fixed;
  inset-inline: 12px;
  inset-block-end: calc(69px + env(safe-area-inset-bottom, 0px));
  z-index: 44;
  max-width: 480px;
  margin-inline: auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  background: var(--gzo-card);
  border: 1px solid var(--gzo-border-3);
  border-radius: 16px;
  box-shadow: 0 12px 30px -10px rgba(34, 31, 27, .25);
}
/* only over the menu, on a phone or tablet: the chrome marks the screen, no script has to follow it */
.gz-order:has(.gzo-bottomnav__item--active[data-nav="menu"]) .gzapp-bar { display: flex; }
@media (min-width: 1024px) {
  .gz-order:has(.gzo-bottomnav__item--active[data-nav="menu"]) .gzapp-bar { display: none; }
}
/* The floating WhatsApp button stands over the bar while the bar is there and comes back with it gone. A rule, not a measure: whatsapp-button.js moves the
   button while the page runs (the owner's iPhone, 01.11.2026: the button lay on the close button). !important beats its inline variable, as with the cookie card.
   A button the guest dragged elsewhere stays where the guest put it. */
@media (max-width: 1023.98px) {
  .gz-order:has(.gzapp-bar):has(.gzo-bottomnav__item--active[data-nav="menu"]) .js-whatsapp-fab:not(.whatsapp-fab--custom-position) {
    --whatsapp-offset: calc(69px + 96px) !important;
  }
}
.gz-order .gzapp-bar__icon { width: 40px; height: 40px; border-radius: 10px; flex: none; }
.gz-order .gzapp-bar__text { flex: 1 1 auto; min-width: 0; }
.gz-order .gzapp-bar__name {
  font-family: var(--gzo-font-body); font-weight: 700; font-size: 13.5px; color: var(--gzo-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gz-order .gzapp-bar__sub {
  font-family: var(--gzo-font-body); font-size: 12px; line-height: 1.3; color: var(--gzo-text-2);
}
.gz-order .gzapp-bar__cta,
.gz-order .gzapp-card__cta {
  background: var(--gzo-ink); color: #fff; border: none; border-radius: 11px;
  font-family: var(--gzo-font-body); font-weight: 600; font-size: 13.5px; cursor: pointer;
  min-height: var(--gzo-tap);
}
.gz-order .gzapp-bar__cta { flex: none; padding: 0 12px; max-width: 45%; }
.gz-order .gzapp-bar__close,
.gz-order .gzapp-sheet__close {
  flex: none; width: var(--gzo-tap); height: var(--gzo-tap); margin-inline-start: -6px;
  background: none; border: none; cursor: pointer; color: var(--gzo-text-2); font-size: 20px; line-height: 1;
}

.gz-order .gzapp-card {
  margin-block: 12px; padding: 14px;
  background: var(--gzo-card); border: 1px solid var(--gzo-border-3); border-radius: 16px;
}
.gz-order .gzapp-card__title {
  display: flex; align-items: center; gap: 8px; margin-bottom: 4px;
  font-family: var(--gzo-font-body); font-weight: 700; font-size: 14px; color: var(--gzo-ink);
}
.gz-order .gzapp-card__ic { display: inline-flex; flex: none; color: var(--gzo-primary); }
.gz-order .gzapp-card__text {
  font-family: var(--gzo-font-body); font-size: 13px; line-height: 1.45; color: var(--gzo-text);
}
.gz-order .gzapp-card__link {
  display: inline-flex; align-items: center; min-height: var(--gzo-tap);
  font-family: var(--gzo-font-body); font-size: 13px; font-weight: 600; color: var(--gzo-primary);
}
.gz-order .gzapp-card__error {
  margin-block: 6px; font-family: var(--gzo-font-body); font-size: 13px; font-weight: 600; color: var(--gzo-primary-dark);
}
.gz-order .gzapp-card__cta { display: block; width: 100%; margin-top: 6px; padding: 8px 12px; }
.gz-order .gzapp-card__cta:disabled { opacity: .6; cursor: default; }
.gz-order .gzapp-card__quiet {
  margin-top: 4px; min-height: var(--gzo-tap); padding: 0;
  background: none; border: none; cursor: pointer; text-decoration: underline;
  font-family: var(--gzo-font-body); font-size: 13px; font-weight: 600; color: var(--gzo-text-2);
}

.gz-order .gzapp-sheet {
  position: fixed; inset: 0; z-index: 1300;
  display: flex; align-items: flex-end; justify-content: center;
  background: rgba(23, 20, 15, .45);
}
.gz-order .gzapp-sheet__panel {
  width: 100%; max-width: 480px; max-height: 90vh; overflow-y: auto;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  background: var(--gzo-card); border-radius: 18px 18px 0 0;
}
.gz-order .gzapp-sheet__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.gz-order .gzapp-sheet__title { font-family: var(--gzo-font-display); font-weight: 700; font-size: 17px; color: var(--gzo-ink); }
.gz-order .gzapp-sheet__name { font-family: var(--gzo-font-body); font-weight: 600; font-size: 13.5px; color: var(--gzo-text-2); }
.gz-order .gzapp-sheet__hint {
  margin: 10px 0 0; padding: 10px; border-radius: 10px; background: var(--gzo-paper-alt);
  font-family: var(--gzo-font-body); font-size: 13px; line-height: 1.45; color: var(--gzo-ink);
}
.gz-order .gzapp-sheet--ask .gzapp-card { margin: 0; padding: 0; border: none; }
.gz-order .gzapp-sheet__later { display: block; width: 100%; margin-top: 6px; text-align: center; text-decoration: none; }
.gz-order a.gzapp-sheet__chrome { display: flex; align-items: center; justify-content: center; margin-top: 10px; text-decoration: none; }
.gz-order .gzapp-sheet__or { margin: 16px 0 0; font-family: var(--gzo-font-body); font-size: 13px; font-weight: 600; color: var(--gzo-text-2); }
.gz-order .gzapp-sheet__steps {
  margin: 12px 0 0; padding-inline-start: 22px;
  font-family: var(--gzo-font-body); font-size: 14px; line-height: 1.5; color: var(--gzo-ink);
}
.gz-order .gzapp-sheet__steps li { margin-bottom: 10px; }
.gz-order .gzapp-sheet__steps strong { font-weight: 700; color: var(--gzo-ink); }
.gz-order .gzapp-sheet__ic { display: inline-flex; vertical-align: text-bottom; margin-inline-end: 6px; color: var(--gzo-primary); }
.gz-order .gzapp-sheet__foot { margin: 4px 0 0; font-family: var(--gzo-font-body); font-size: 12.5px; color: var(--gzo-text-2); }

/* where the button is: the browser's bar as a small picture, an arrow at the real one below the panel. Safari 26 floats its bar over the page, so the panel keeps
   room above it: the arrow's tip ends just over the three dots. An iPhone set to an RTL language mirrors the bar (is-mirrored). */
.gz-order .gzapp-sheet__panel { position: relative; }
.gz-order .gzapp-sheet__panel--dots { padding-block-end: 126px; }
.gz-order .gzapp-sheet__panel--bar { padding-block-end: calc(56px + env(safe-area-inset-bottom, 0px)); }
.gz-order .gzapp-bar-pic {
  display: flex; align-items: center; gap: 8px;
  margin-block: 8px 2px; padding: 6px 8px;
  background: var(--gzo-paper-alt); border-radius: 14px;
}
.gz-order .gzapp-bar-pic--bar { justify-content: space-around; }
.gz-order .gzapp-bar-pic__pill {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  height: 32px; border-radius: 999px; background: var(--gzo-card);
}
.gz-order .gzapp-bar-pic__pill--nav { width: 56px; }
.gz-order .gzapp-bar-pic__pill--url { flex: 1 1 auto; }
.gz-order .gzapp-bar-pic__pill--on {
  width: 44px; color: #fff; background: var(--gzo-primary);
  box-shadow: 0 0 0 3px var(--gzo-card), 0 0 0 5px var(--gzo-primary);
}
.gz-order .gzapp-bar-pic__slot { width: 20px; height: 20px; border-radius: 6px; background: var(--gzo-border-2); }
.gz-order .gzapp-sheet__steps li > .gzapp-bar-pic { margin-inline-start: 0; }
.gz-order .gzapp-sheet__arrow {
  position: absolute; display: block; color: var(--gzo-primary); line-height: 0;
  animation: gzapp-point 1.1s ease-in-out infinite;
}
.gz-order .gzapp-sheet__arrow--dots { right: 37px; bottom: 80px; }
.gz-order .gzapp-sheet__arrow--dots.is-mirrored { right: auto; left: 37px; }
.gz-order .gzapp-sheet__arrow--bar { left: calc(50% - 15px); bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
@keyframes gzapp-point { 0%, 100% { transform: translateY(-5px); } 50% { transform: translateY(5px); } }
@media (prefers-reduced-motion: reduce) {
  .gz-order .gzapp-sheet__arrow { animation: none; }
}

/* An iPhone enlarges the page when a field with text under 16 px gets the focus and does not shrink it back: the checkout then runs off to the right (the owner's
   iPhone, 01.11.2026; in Safari as in the app). Not maximum-scale: that would take the guest's own zoom away (BFSG). Touch screens only, the desktop keeps its size. */
@media (pointer: coarse) {
  .gz-order input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  .gz-order select,
  .gz-order textarea { font-size: 16px !important; }
}
/* Inside the app no browser bar stands above the page: scrolled text ran under the clock. A fixed strip above the viewport did not paint there (the owner's iPhone, 01.11.2026):
   this one is part of the page and sticks just above the viewport. It takes no room: the margin gives its height back, the transform lifts it out of the screen. */
@media (display-mode: standalone) {
  body.gz-order::before {
    content: ""; display: block; position: sticky; top: 0; z-index: 100;
    height: 100px; margin-block-end: -100px; transform: translateY(-100%);
    background: var(--gzo-titlebar);
    pointer-events: none;
  }
}

/* GA2 (01.11.2026, the owner: the guest's pages are crowded): the other screens on a phone, as the menu in ordering_redesign_menu.css. A sentence that repeats the title goes,
   a box around one line becomes a line. Every word a law asks for stays where it was: payment methods, totals, the order button, the right of withdrawal. These files load in another
   order in the fleet's bundle: body. makes these rules win either way. */
body.gz-order .gzo-od-reorder--quiet { background: var(--gzo-card); color: var(--gzo-ink); border: 1.5px solid var(--gzo-border-2); box-shadow: none; }
/* GA3 (§ 312j Abs. 1 BGB): the cart's terms as a fold; its closed row names the means of payment and the delivery restriction */
body.gz-order details.gzo-cart-terms { display: block; }
body.gz-order .gzo-cart-terms__sum { display: flex; align-items: center; gap: 8px; min-height: var(--gzo-tap); cursor: pointer; list-style: none; }
body.gz-order .gzo-cart-terms__sum::-webkit-details-marker { display: none; }
body.gz-order .gzo-cart-terms__sum:focus-visible { outline: 2px solid var(--gzo-primary); outline-offset: 2px; border-radius: 6px; }
body.gz-order .gzo-cart-terms__facts { display: grid; flex: 1; gap: 2px; min-width: 0; }
body.gz-order .gzo-cart-terms__chev { flex: none; width: 20px; height: 20px; color: var(--gzo-text-2); }
body.gz-order details[open] > .gzo-cart-terms__sum .gzo-cart-terms__chev { transform: rotate(180deg); }
body.gz-order .gzo-cart-terms__more { margin: 4px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--gzo-text-2, #5b6470); overflow-wrap: anywhere; }
@media (max-width: 1023.98px) {
  body.gz-order .gzo-cart__hint,
  body.gz-order .gzo-co__hint,
  body.gz-order .gzo-guided .gzo-guided__hint,
  body.gz-order .gzo-hist__sub,
  body.gz-order .gzo-hist__head .gzo-hist__clear { display: none; }
  body.gz-order .gzo-hist__clear--below { display: block; margin: 14px auto 0; min-height: var(--gzo-tap); }
  body.gz-order .gzo-cart-terms { margin-block: 8px 2px; padding: 0; border: none; background: none; }
  body.gz-order .gzo-cart-totals { padding: 4px 2px; border: none; background: none; box-shadow: none; }
  /* the only row is the subtotal: the same figure as the total below it */
  body.gz-order .gzo-cart-totals__row:first-child:has(+ .gzo-cart-totals__sep),
  body.gz-order .gzo-cart-totals__row:first-child:has(+ .gzo-cart-totals__sep) + .gzo-cart-totals__sep { display: none; }
  body.gz-order .gzo-co__head { margin-bottom: 8px; }
  body.gz-order .gzo-co-pickup { padding: 4px 2px; border: none; background: none; }
  body.gz-order .gzo-co-when__btn:first-child:not(.is-disabled) .gzo-co-when__t2 { display: none; }
  body.gz-order .gzo-co__block .gzo-co-hours { border: none; border-block-end: 1px solid var(--gzo-border); border-radius: 0; background: none; }
  body.gz-order .gzo-co__block .gzo-co-hours__sum { padding-inline: 2px; min-height: var(--gzo-tap); }
  body.gz-order .gzo-co-notes__toggle { min-height: var(--gzo-tap); padding-inline: 2px; border: none; border-block-end: 1px solid var(--gzo-border); border-radius: 0; background: none; }
  /* the status stands in the strip below it, in a whole sentence */
  body.gz-order .gzo-res-ticket .gzo-res-pill { display: none; }
  body.gz-order .gzo-od-note--info { padding: 4px 2px; border: none; background: none; }
  body.gz-order .gzo-guided .gzo-viewswitch { width: 96px; margin-inline-start: auto; margin-block-end: 10px; padding: 2px; }
  body.gz-order .gzo-guided .gzo-viewswitch__thumb { inset-block: 2px; inset-inline-start: 2px; width: calc(50% - 2px); }
  body.gz-order .gzo-guided .gzo-viewswitch[data-mode="guided"] .gzo-viewswitch__thumb { inset-inline-start: 50%; }
  body.gz-order .gzo-guided .gzo-viewswitch__seg { height: 42px; }
  body.gz-order .gzo-guided .gzo-viewswitch__seg span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

@media print {
  .gz-order .gzapp-bar, .gz-order .gzapp-card, .gz-order .gzapp-sheet { display: none !important; }
}