/* =============================================================================
Stammgast SG12 (04.10.2026) — the guest account inside the menu
(menu/stammgast_account.js: the "Anmelden" button, the sign-in sheet, "Mein Konto").
NOT LINKED YET (PLAN §0.6-1: SG12-A adds files only — SG12-B puts the into the
menu shell). 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: 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.
========================================================================== */
/* ---- the header button ---------------------------------------------------- */
.gzs-acct-btn {
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-border-2, #E5DDCE); border-radius: var(--gzo-r-btn, 13px);
background: var(--gzo-card, #fff); color: var(--gzo-ink, #221F1B);
font-family: var(--gzo-font-body); font-weight: 700; font-size: 13px; cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.gzs-acct-btn svg { width: 18px; height: 18px; flex: none; }
.gzs-acct-btn__label { white-space: nowrap; }
.gzs-acct-btn[data-signed-in="1"] { border-color: var(--gzo-success, #2E7D52); color: var(--gzo-success, #2E7D52); }
.gzs-acct-btn:focus-visible { outline: 2px solid var(--gzo-info, #2A6FB0); outline-offset: 2px; }
@media (max-width: 420px) { .gzs-acct-btn__label { display: none; } }
/* the shell's mount point in the header (menu/redesign_shell.php): a flex item beside the language menu, no width of
its own until the script mounts the button; logical margin so RTL mirrors it */
.gzs-acct-mount { display: inline-flex; align-items: center; flex: none; }
.gzs-acct-mount:not(:empty) { margin-inline-end: 6px; }
/* ---- scrim + sheet ----------------------------------------------------------- */
.gzs-acct-scrim {
position: fixed; inset: 0; z-index: 1075; background: rgba(34, 31, 27, .45);
opacity: 0; transition: opacity .22s ease;
}
.gzs-acct-scrim[data-state="open"] { opacity: 1; }
.gzs-acct {
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-acct[data-state="open"] { transform: none; opacity: 1; }
/* SG14 (11.10.2026, X-203): `display: flex` above beat the browser's own [hidden] rule — a CLOSED sheet stayed on the page,
invisible (opacity 0), and took every click under it (on desktop the header's "Mein Konto" and the cart's "Zur Kasse") */
.gzs-acct[hidden], .gzs-acct-scrim[hidden] { display: none; }
[dir="rtl"] .gzs-acct { font-family: var(--gzo-font-body); line-height: 1.75; }
@media (min-width: 641px) {
.gzs-acct {
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-acct { transform: translateX(-8%); }
.gzs-acct[data-state="open"] { transform: none; }
}
@media (min-width: 1025px) { .gzs-acct { width: min(560px, 100%); } }
.gzs-acct__head {
display: flex; align-items: center; gap: 10px; padding: 14px 16px 10px;
padding-top: max(14px, env(safe-area-inset-top)); border-bottom: 1px solid var(--gzo-border, #EDE6DA);
}
.gzs-acct__title { flex: 1 1 auto; min-width: 0; margin: 0; font-family: var(--gzo-font-display); font-weight: 700; font-size: 20px; line-height: 1.25; overflow-wrap: anywhere; }
.gzs-acct__close, .gzs-acct__back {
display: inline-flex; align-items: center; justify-content: center; flex: none;
width: var(--gzo-tap, 44px); height: var(--gzo-tap, 44px); border: 0; border-radius: var(--gzo-r-icon, 11px);
background: var(--gzo-paper, #F7F3EC); color: var(--gzo-ink, #221F1B); cursor: pointer;
}
.gzs-acct__close svg, .gzs-acct__back svg { width: 20px; height: 20px; }
[dir="rtl"] .gzs-acct__back svg { transform: scaleX(-1); }
.gzs-acct__close:focus-visible, .gzs-acct__back:focus-visible, .gzs-acct__body a:focus-visible,
.gzs-acct__body button:focus-visible, .gzs-acct__body input:focus-visible { outline: 2px solid var(--gzo-info, #2A6FB0); outline-offset: 2px; }
.gzs-acct__body { flex: 1 1 auto; overflow-y: auto; padding: 16px; padding-bottom: calc(16px + env(safe-area-inset-bottom)); -webkit-overflow-scrolling: touch; }
.gzs-acct__body > * + * { margin-top: 14px; }
/* X-177 (04.10, the owner's phone — "the text under the field sticks to it"): the sign-in, code, change and delete
views put their lead, field, fine print, button and status inside a