/* =============================================================================
   Stammgast SG15 (11.10.2026) — the group order inside the menu
   (menu/stammgast_groups.js: the band "Für Teams & Firmen", the sheets — terms, the
   organizer's form, "Deine Gruppe", "Mitbestellen" —, the member bar, the "Gruppe" chip,
   the cart's "Auswahl speichern"). Linked by the menu shell ONLY while feature GROUPS is
   live here. Loaded after ordering_redesign_fonts.css + ordering_redesign.css: the --gzo-*
   tokens, the fonts (Cairo for Arabic via [dir="rtl"]) and the .gzo-btn vocabulary come
   from there. Mobile-first, logical properties (RTL for free), 44 px targets, light only,
   no horizontal overflow at 375.
   The sheet follows M01 and the account sheet's contract: a bottom sheet up to 640 px, a
   side sheet above (641–1024: min(480px, 100%) · ≥1025: min(560px, 100%)), scrim z 1075,
   sheet z 1080, opened after two animation frames, closed by button, scrim and Esc with
   the focus returned; [hidden] always wins over display (X-203).
   ========================================================================== */

/* ---- the band above the dish list -------------------------------------------- */
.gzs-grp-band {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 0 0 14px; padding: 12px 14px;
  border: 1.5px solid var(--gzo-border-2, #E5DDCE); border-radius: var(--gzo-r-card, 16px);
  background: var(--gzo-card, #fff); color: var(--gzo-ink, #221F1B); font-family: var(--gzo-font-body);
}
.gzs-grp-band__text { flex: 1 1 220px; min-width: 0; }
.gzs-grp-band__title { margin: 0 0 2px; font-size: 15px; font-weight: 800; line-height: 1.3; }
.gzs-grp-band__lead { margin: 0; font-size: 13px; color: var(--gzo-muted, #6B655C); line-height: 1.45; }
.gzs-grp-band__cta, .gzs-grp__secondary, .gzs-grp__primary {
  display: inline-flex; align-items: center; justify-content: center; min-height: var(--gzo-tap, 44px); padding: 0 16px;
  border-radius: var(--gzo-r-btn, 13px); font-family: var(--gzo-font-body); font-weight: 700; font-size: 14px; cursor: pointer;
  border: 1.5px solid var(--gzo-border-2, #E5DDCE); background: var(--gzo-card, #fff); color: var(--gzo-ink, #221F1B);
  -webkit-tap-highlight-color: transparent;
}
.gzs-grp__primary { background: var(--gzo-ink, #221F1B); color: #fff; border-color: var(--gzo-ink, #221F1B); }
.gzs-grp__primary[disabled], .gzs-grp__secondary[disabled] { opacity: .55; cursor: default; }
.gzs-grp-band__cta:focus-visible, .gzs-grp__secondary:focus-visible, .gzs-grp__primary:focus-visible, .gzs-grp__link-btn:focus-visible,
.gzs-grp__choice:focus-visible, .gzs-grp-chip:focus-visible { outline: 2px solid var(--gzo-info, #2A6FB0); outline-offset: 2px; }

/* ---- the member bar (a participant's tab) ------------------------------------- */
.gzs-grp-bar {
  margin: 0 0 14px; padding: 12px 14px; border-radius: var(--gzo-r-card, 16px);
  border: 1.5px solid var(--gzo-success, #2E7D52); background: #F1F8F4; color: var(--gzo-ink, #221F1B); font-family: var(--gzo-font-body);
}
.gzs-grp-bar__title { margin: 0 0 4px; font-size: 15px; font-weight: 800; line-height: 1.3; }
.gzs-grp-bar__line { margin: 0; font-size: 13px; line-height: 1.45; color: var(--gzo-muted, #6B655C); }
.gzs-grp-bar__msg { margin: 6px 0 0; font-size: 13px; font-weight: 700; color: var(--gzo-danger, #B23B2E); }
.gzs-grp-cart__note { margin: 0 0 8px; font-size: 13px; color: var(--gzo-muted, #6B655C); text-align: center; }

/* ---- the header chip ------------------------------------------------------- */
.gzs-grp-mount { display: inline-flex; align-items: center; flex: none; }
.gzs-grp-mount:not(:empty) { margin-inline-end: 6px; }
.gzs-grp-chip {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: var(--gzo-tap, 44px); min-width: var(--gzo-tap, 44px); padding: 0 10px;
  border: 1.5px solid var(--gzo-success, #2E7D52); border-radius: var(--gzo-r-btn, 13px);
  background: var(--gzo-card, #fff); color: var(--gzo-success, #2E7D52);
  font-family: var(--gzo-font-body); font-weight: 700; font-size: 13px; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.gzs-grp-chip svg { width: 18px; height: 18px; flex: none; }
@media (max-width: 420px) { .gzs-grp-chip__label { display: none; } }

/* ---- scrim + sheet ----------------------------------------------------------- */
.gzs-grp-scrim { position: fixed; inset: 0; z-index: 1075; background: rgba(34, 31, 27, .45); opacity: 0; transition: opacity .22s ease; }
.gzs-grp-scrim[data-state="open"] { opacity: 1; }
.gzs-grp {
  position: fixed; z-index: 1080; display: flex; flex-direction: column;
  background: var(--gzo-card, #fff); color: var(--gzo-ink, #221F1B);
  font-family: var(--gzo-font-body); font-size: 15px; line-height: 1.5;
  box-shadow: var(--gzo-sh-sheet, 0 -8px 22px -12px rgba(34, 31, 27, .22));
  inset-inline: 0; inset-block-end: 0; max-height: min(92vh, 92dvh);
  border-radius: var(--gzo-r-card, 16px) var(--gzo-r-card, 16px) 0 0;
  transform: translateY(12%); opacity: 0; transition: transform .26s ease, opacity .2s ease; overflow: hidden;
}
.gzs-grp[data-state="open"] { transform: none; opacity: 1; }
.gzs-grp[hidden], .gzs-grp-scrim[hidden] { display: none; }
[dir="rtl"] .gzs-grp { line-height: 1.75; }
@media (min-width: 641px) {
  .gzs-grp { inset-block: 0; inset-inline-start: auto; inset-inline-end: 0; max-height: none; width: min(480px, 100%); border-radius: 0; transform: translateX(8%); }
  [dir="rtl"] .gzs-grp { transform: translateX(-8%); }
  .gzs-grp[data-state="open"] { transform: none; }
}
@media (min-width: 1025px) { .gzs-grp { width: min(560px, 100%); } }
.gzs-grp__head { display: flex; align-items: center; gap: 8px; padding: 14px 16px 10px; border-block-end: 1px solid var(--gzo-border-2, #E5DDCE); }
.gzs-grp__title { flex: 1 1 auto; margin: 0; font-size: 18px; font-weight: 800; line-height: 1.3; min-width: 0; }
.gzs-grp__close { flex: none; width: var(--gzo-tap, 44px); height: var(--gzo-tap, 44px); border: 0; border-radius: 50%; background: transparent; color: var(--gzo-ink, #221F1B); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.gzs-grp__close svg { width: 22px; height: 22px; }
.gzs-grp__body { flex: 1 1 auto; overflow: auto; padding: 14px 16px calc(16px + env(safe-area-inset-bottom)); overscroll-behavior: contain; }
.gzs-grp__card { margin: 0 0 14px; padding: 12px 14px; border: 1.5px solid var(--gzo-border-2, #E5DDCE); border-radius: var(--gzo-r-card, 16px); }
.gzs-grp__h3 { margin: 0 0 6px; font-size: 16px; font-weight: 800; line-height: 1.3; overflow-wrap: anywhere; }
.gzs-grp__h4 { margin: 10px 0 4px; font-size: 14px; font-weight: 800; line-height: 1.3; }
.gzs-grp__line { display: block; margin: 0 0 4px; font-size: 14px; }
.gzs-grp__line--ok { color: var(--gzo-success, #2E7D52); font-weight: 700; }
.gzs-grp__line--warn, .gzs-grp__warn { color: var(--gzo-danger, #B23B2E); font-weight: 700; }
.gzs-grp__note { display: block; margin: 6px 0 0; font-size: 13px; color: var(--gzo-muted, #6B655C); line-height: 1.45; }
.gzs-grp__fine { margin: 8px 0 0; font-size: 12px; color: var(--gzo-muted, #6B655C); line-height: 1.45; }
.gzs-grp__status { margin: 10px 0 0; font-size: 14px; font-weight: 700; color: var(--gzo-success, #2E7D52); }
.gzs-grp__status--warn { color: var(--gzo-danger, #B23B2E); }
.gzs-grp__terms { margin: 0 0 14px; padding: 0 0 0 1.2em; font-size: 14px; }
[dir="rtl"] .gzs-grp__terms { padding: 0 1.2em 0 0; }
.gzs-grp__terms li { margin: 0 0 4px; }
.gzs-grp__choices { display: grid; gap: 10px; }
.gzs-grp__choice { display: grid; gap: 4px; text-align: start; padding: 12px 14px; min-height: var(--gzo-tap, 44px); border: 1.5px solid var(--gzo-border-2, #E5DDCE); border-radius: var(--gzo-r-card, 16px); background: var(--gzo-card, #fff); color: var(--gzo-ink, #221F1B); font-family: var(--gzo-font-body); font-size: 14px; cursor: pointer; }
.gzs-grp__choice strong { font-size: 15px; }
.gzs-grp__choice span { color: var(--gzo-muted, #6B655C); font-size: 13px; }
.gzs-grp__choice--primary { border-color: var(--gzo-ink, #221F1B); }
.gzs-grp__form { display: grid; gap: 10px; }
.gzs-grp__field { display: grid; gap: 4px; }
.gzs-grp__label { font-size: 13px; font-weight: 700; }
.gzs-grp__input { width: 100%; min-height: var(--gzo-tap, 44px); padding: 8px 12px; border: 1.5px solid var(--gzo-border-2, #E5DDCE); border-radius: var(--gzo-r-btn, 13px); font: inherit; font-size: 16px; color: var(--gzo-ink, #221F1B); background: #fff; box-sizing: border-box; }
.gzs-grp__input:focus-visible { outline: 2px solid var(--gzo-info, #2A6FB0); outline-offset: 1px; }
.gzs-grp__addr, .gzs-grp__row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: end; }
.gzs-grp__addr[hidden] { display: none; }
.gzs-grp__field--short { min-width: 0; }
.gzs-grp__actions { display: grid; gap: 8px; margin-top: 4px; }
.gzs-grp__link { font-size: 13px; }
.gzs-grp__qr { margin: 10px auto 0; width: min(220px, 70%); }
.gzs-grp__qr svg { width: 100%; height: auto; display: block; }
.gzs-grp__member { margin: 0 0 8px; }
.gzs-grp__lines { list-style: none; margin: 0; padding: 0; }
.gzs-grp__lineitem { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; justify-content: space-between; padding: 6px 0; border-block-end: 1px dashed var(--gzo-border-2, #E5DDCE); font-size: 14px; }
.gzs-grp__lineitem--off .gzs-grp__lmain { opacity: .55; text-decoration: line-through; }
.gzs-grp__lmain { flex: 1 1 160px; min-width: 0; overflow-wrap: anywhere; }
.gzs-grp__lflags { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.gzs-grp__flag { font-size: 12px; padding: 2px 8px; border-radius: 999px; background: #F3EFE7; color: var(--gzo-muted, #6B655C); }
.gzs-grp__flag--warn { background: #FBE9E6; color: var(--gzo-danger, #B23B2E); }
.gzs-grp__link-btn { min-height: var(--gzo-tap, 44px); padding: 0 8px; border: 0; background: transparent; color: var(--gzo-info, #2A6FB0); font: inherit; font-size: 14px; font-weight: 700; text-decoration: underline; cursor: pointer; }
.gzs-grp__cancel { margin-top: 10px; display: grid; gap: 8px; }
.gzs-grp__value { font-variant-numeric: tabular-nums; }
.gzs-grp__sentence { display: inline; }

/* ---- SG16 (17.10.2026): the direct bar (one person orders for her group) — the band's look, a stronger edge ---- */
.gzs-grp-band--direct { border-color: var(--gzo-accent, #C8102E); }
.gzs-grp-band--direct .gzs-grp-band__title { font-size: 14px; }
