/* ============================================================
   Shabab's Optimize — Dark Theme
   ============================================================ */

:root {
    --sb-bg: #0b0c0f;
    --sb-bg-elev: #15171c;
    --sb-bg-elev-2: #1c1f26;
    --sb-bg-card: #1a1d24;
    --sb-border: #2a2e38;
    --sb-border-strong: #3a3f4b;
    --sb-text: #e8eaed;
    --sb-text-dim: #a1a7b3;
    --sb-text-muted: #6c727f;
    --sb-accent: #e63946;
    --sb-accent-2: #f4a261;
    --sb-accent-hover: #ff4d5b;
    --sb-success: #2ecc71;
    --sb-warning: #f4a261;
    --sb-danger: #e63946;
    --sb-info: #4cc9f0;
    --sb-warn-text: #ff8a93;
    --sb-info-text: #7fd6ff;
    --sb-radius: 10px;
    --sb-radius-sm: 6px;
    --sb-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    --sb-shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.25);
    --sb-font: 'Inter', 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --sb-font-display: 'Sora', 'Inter', 'Segoe UI', sans-serif;
    --sb-topbar-h: 2.25rem;
}

html, body {
    font-family: var(--sb-font);
    background: var(--sb-bg);
    color: var(--sb-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'cv11', 'ss01';
    letter-spacing: -0.005em;
}

body {
    background:
        radial-gradient(1200px 600px at 80% -10%, rgba(230, 57, 70, 0.07), transparent 60%),
        radial-gradient(900px 500px at -10% 110%, rgba(76, 201, 240, 0.05), transparent 60%),
        var(--sb-bg);
}

a, .btn-link { color: var(--sb-accent-2); }
a:hover { color: var(--sb-accent-hover); }

h1, h2, h3, h4, h5, h6 {
    color: var(--sb-text);
    font-family: var(--sb-font-display);
    font-weight: 600;
    letter-spacing: -0.02em;
}

.card {
    background: var(--sb-bg-card);
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius);
    color: var(--sb-text);
    box-shadow: var(--sb-shadow-soft);
}

.card-header {
    background: var(--sb-bg-elev-2);
    border-bottom: 1px solid var(--sb-border);
    color: var(--sb-text);
    font-weight: 600;
    border-radius: var(--sb-radius) var(--sb-radius) 0 0 !important;
}

.card-header.bg-primary,
.card-header.bg-danger,
.card-header.bg-info,
.card-header.bg-warning,
.card-header.bg-success,
.card-header.bg-dark {
    background: var(--sb-bg-elev-2) !important;
    color: var(--sb-text) !important;
    border-bottom: 1px solid var(--sb-border);
}

.card-header.bg-primary { border-left: 4px solid var(--sb-accent); }
.card-header.bg-danger  { border-left: 4px solid var(--sb-danger); }
.card-header.bg-info    { border-left: 4px solid var(--sb-info); }
.card-header.bg-warning { border-left: 4px solid var(--sb-warning); }
.card-header.bg-success { border-left: 4px solid var(--sb-success); }
.card-header.bg-dark    { border-left: 4px solid var(--sb-accent-2); }

.card-footer {
    background: var(--sb-bg-elev-2);
    border-top: 1px solid var(--sb-border);
}

.btn {
    border-radius: var(--sb-radius-sm);
    font-weight: 500;
    transition: transform .05s ease, background-color .15s ease, border-color .15s ease;
}

.btn:active { transform: translateY(1px); }

.btn-primary {
    color: #fff;
    background: var(--sb-accent);
    border-color: var(--sb-accent);
}

.btn-primary:hover, .btn-primary:focus {
    background: var(--sb-accent-hover);
    border-color: var(--sb-accent-hover);
    color: #fff;
}

.btn-outline-primary { color: var(--sb-text); background: transparent; border: 1px solid var(--sb-border-strong); }
.btn-outline-primary:hover { background: rgba(230, 57, 70, 0.12); color: #fff; border-color: var(--sb-accent); }

.btn-success { background: var(--sb-success); border-color: var(--sb-success); color: #0b0c0f; }
.btn-success:hover { background: #29b765; border-color: #29b765; color: #0b0c0f; }
.btn-outline-success { color: var(--sb-text); background: transparent; border: 1px solid var(--sb-border-strong); }
.btn-outline-success:hover { background: rgba(46, 204, 113, 0.15); border-color: var(--sb-success); color: var(--sb-text); }

.btn-danger { background: var(--sb-danger); border-color: var(--sb-danger); color: #fff; }
.btn-outline-danger { color: var(--sb-text); background: transparent; border: 1px solid var(--sb-border-strong); }
.btn-outline-danger:hover { background: rgba(230, 57, 70, 0.15); border-color: var(--sb-danger); color: var(--sb-text); }

.btn-warning, .btn-warning:hover { color: #0b0c0f; }
.btn-outline-warning { color: var(--sb-text); background: transparent; border: 1px solid var(--sb-border-strong); }
.btn-outline-warning:hover { background: rgba(244, 162, 97, 0.15); border-color: var(--sb-warning); color: var(--sb-text); }

.btn-info { background: var(--sb-info); border-color: var(--sb-info); color: #0b0c0f; }
.btn-outline-info, .btn-outline-secondary { color: var(--sb-text); background: transparent; border: 1px solid var(--sb-border-strong); }
.btn-outline-info:hover { background: rgba(76, 201, 240, 0.15); border-color: var(--sb-info); color: var(--sb-text); }
.btn-outline-secondary:hover { background: var(--sb-bg-elev-2); color: var(--sb-text); }

.btn-secondary { background: var(--sb-bg-elev-2); border-color: var(--sb-border-strong); color: var(--sb-text); }

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.15rem rgba(230, 57, 70, 0.4);
    outline: none;
}

.form-control, .form-select {
    background: var(--sb-bg-elev);
    border: 1px solid var(--sb-border);
    color: var(--sb-text);
}

.form-control:focus, .form-select:focus {
    background: var(--sb-bg-elev);
    border-color: var(--sb-accent);
    color: var(--sb-text);
}

.form-control::placeholder { color: var(--sb-text-muted); }
.form-label, label { color: var(--sb-text-dim); }

.table {
    color: var(--sb-text);
    --bs-table-bg: transparent;
    --bs-table-color: var(--sb-text);
    --bs-table-border-color: var(--sb-border);
    --bs-table-striped-bg: rgba(255, 255, 255, 0.02);
    --bs-table-striped-color: var(--sb-text);
    --bs-table-hover-bg: rgba(255, 255, 255, 0.04);
    --bs-table-hover-color: var(--sb-text);
}

.list-group-item {
    background: var(--sb-bg-card);
    border-color: var(--sb-border);
    color: var(--sb-text);
}

.alert { border-radius: var(--sb-radius); border: 1px solid var(--sb-border); }
.alert-info    { background: rgba(76, 201, 240, 0.08); color: var(--sb-text); border-color: rgba(76, 201, 240, 0.3); }
.alert-success { background: rgba(46, 204, 113, 0.08); color: var(--sb-text); border-color: rgba(46, 204, 113, 0.3); }
.alert-danger  { background: rgba(230, 57, 70, 0.08);  color: var(--sb-text); border-color: rgba(230, 57, 70, 0.3); }

.toast { background: var(--sb-bg-card); color: var(--sb-text); border: 1px solid var(--sb-border); }
.modal-content { background: var(--sb-bg-card); color: var(--sb-text); border: 1px solid var(--sb-border); }
.modal-header, .modal-footer { border-color: var(--sb-border); }

.badge { font-weight: 500; letter-spacing: 0.02em; }
.badge.bg-secondary { background: var(--sb-bg-elev-2) !important; color: var(--sb-text-dim); border: 1px solid var(--sb-border); }
.badge.bg-danger    { background: rgba(230, 57, 70, 0.2) !important;  color: #ff8a93; }
.badge.bg-warning   { background: rgba(244, 162, 97, 0.2) !important; color: #ffc89a; }
.badge.bg-info      { background: rgba(76, 201, 240, 0.2) !important; color: #9bdbf2; }
.badge.bg-success   { background: rgba(46, 204, 113, 0.2) !important; color: #7be0a9; }
.badge.bg-primary   { background: rgba(230, 57, 70, 0.2) !important;  color: #ff8a93; }

.text-muted { color: var(--sb-text-muted) !important; }
.text-white { color: var(--sb-text) !important; }
.text-dark  { color: var(--sb-text) !important; }
.bg-light   { background: var(--sb-bg-elev) !important; color: var(--sb-text) !important; }
.bg-white   { background: var(--sb-bg-card) !important; color: var(--sb-text) !important; }
hr { border-color: var(--sb-border); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--sb-bg); }
::-webkit-scrollbar-thumb { background: var(--sb-border-strong); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--sb-accent); }

.content { padding-top: 1.1rem; }
h1:focus { outline: none; }

.valid.modified:not([type=checkbox]) { outline: 1px solid var(--sb-success); }
.invalid { outline: 1px solid var(--sb-danger); }
.validation-message { color: var(--sb-danger); }

.blazor-error-boundary {
    background: var(--sb-danger);
    color: #fff;
    padding: 1rem;
    border-radius: var(--sb-radius);
}
.blazor-error-boundary::after { content: "An error has occurred."; }

/* ---------- Brand ---------- */
.brand-logo {
    width: 36px; height: 36px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--sb-accent);
    box-shadow: 0 0 0 2px rgba(230, 57, 70, 0.2);
}

.brand-logo-lg {
    width: 120px; height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--sb-accent);
    box-shadow: 0 0 0 4px rgba(230, 57, 70, 0.2), var(--sb-shadow);
}

/* ---------- Cashier no-scroll grid ---------- */
.pos-screen {
    --pos-gap: 0.6rem;
    height: calc(100vh - var(--sb-topbar-h, 2.25rem));
    display: grid;
    grid-template-columns: 1.05fr 1fr 1fr 1.25fr;
    gap: var(--pos-gap);
    padding: var(--pos-gap);
    overflow: hidden;
}

.pos-col {
    background: var(--sb-bg-card);
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius);
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.pos-col-header {
    padding: 0.5rem 0.75rem;
    background: var(--sb-bg-elev-2);
    border-bottom: 1px solid var(--sb-border);
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--sb-text-dim);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pos-col-body {
    padding: 0.5rem;
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
}

.pos-col-footer {
    padding: 0.5rem;
    border-top: 1px solid var(--sb-border);
    background: var(--sb-bg-elev-2);
}

.pos-group-label {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--sb-text-muted);
    padding: 0.5rem 0.2rem 0.3rem;
    font-weight: 600;
}

.pos-group-label:first-child { padding-top: 0.1rem; }

.pos-btn-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.35rem;
}

.pos-btn-grid.single { grid-template-columns: 1fr; }
.pos-btn-grid.three  { grid-template-columns: repeat(3, 1fr); }

.pos-btn {
    background: var(--sb-bg-elev);
    border: 1px solid var(--sb-border);
    color: var(--sb-text);
    border-radius: var(--sb-radius-sm);
    padding: 0.55rem 0.5rem;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    text-align: center;
    transition: background-color .12s ease, border-color .12s ease, transform .05s ease;
    line-height: 1.15;
    min-height: 2.35rem;
}

.pos-btn:hover {
    background: var(--sb-bg-elev-2);
    border-color: var(--sb-border-strong);
}

.pos-btn:active { transform: translateY(1px); }

.pos-btn.active {
    background: var(--sb-accent);
    border-color: var(--sb-accent);
    color: #fff;
    box-shadow: 0 0 0 1px var(--sb-accent), 0 4px 12px rgba(230, 57, 70, 0.25);
}

/* All selection states share one accent color for consistent contrast, regardless of the
   semantic modifier class (info/warn/success/danger/excluded) still used on the element. */
.pos-btn.active.info,
.pos-btn.active.warn,
.pos-btn.active.success,
.pos-btn.active.danger,
.pos-btn.active.excluded {
    background: var(--sb-accent);
    border-color: var(--sb-accent);
    color: #fff;
    box-shadow: 0 0 0 1px var(--sb-accent), 0 4px 12px rgba(230, 57, 70, 0.25);
}

.pos-cart-item {
    background: var(--sb-bg-elev);
    border: 1px solid var(--sb-border);
    border-left: 3px solid var(--sb-accent);
    border-radius: var(--sb-radius-sm);
    padding: 0.5rem 0.6rem;
    margin-bottom: 0.4rem;
    font-size: 0.85rem;
}

.pos-cart-item .title {
    font-weight: 600;
    color: var(--sb-text);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.4rem;
}

.pos-cart-item .meta {
    color: var(--sb-text-dim);
    font-size: 0.78rem;
    margin-top: 0.2rem;
    line-height: 1.3;
}

.serv-badge {
    display: inline-block;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.serv-badge--dinein {
    background: #143a2b;
    color: #7ee6ab;
    border: 1px solid #2f7a52;
}

.serv-badge--takeaway {
    background: #1f2a42;
    color: #8fb4ff;
    border: 1px solid #35538c;
}

.pos-cart-empty {
    text-align: center;
    color: var(--sb-text-muted);
    padding: 2rem 1rem;
    font-size: 0.9rem;
}

.pos-add-btn {
    width: 100%;
    background: linear-gradient(135deg, var(--sb-accent), #c1232f);
    border: none;
    color: #fff;
    font-weight: 600;
    padding: 0.7rem;
    border-radius: var(--sb-radius-sm);
    font-size: 0.95rem;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(230, 57, 70, 0.25);
}

.pos-add-btn:hover { filter: brightness(1.08); }
.pos-add-btn:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; }

.pos-col-topbar {
    padding: 0.2rem;
    border-bottom: 1px solid var(--sb-border);
    background: var(--sb-bg-elev-2);
}

.pos-col-order {
    position: relative;
}

.pos-submit-btn--floating {
    position: absolute;
    bottom: 18%;
    min-height: 6rem;
    padding: 1.4rem 0.85rem;
    font-size: 1.2rem;
    z-index: 3;
}

.pos-col-order .pos-col-body {
    padding-bottom: 7.5rem;
}


.pos-submit-btn {
    width: 100%;
    background: linear-gradient(135deg, var(--sb-success), #1f9c55);
    border: none;
    color: #0b0c0f;
    font-weight: 700;
    padding: 0.85rem;
    border-radius: var(--sb-radius-sm);
    font-size: 1.05rem;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(46, 204, 113, 0.3);
    letter-spacing: 0.02em;
}

.pos-submit-btn:hover { filter: brightness(1.08); }
.pos-submit-btn:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; }

.pos-clear-btn {
    width: 100%;
    background: transparent;
    border: 1px solid var(--sb-border-strong);
    color: var(--sb-text-dim);
    padding: 0.45rem;
    border-radius: var(--sb-radius-sm);
    font-size: 0.82rem;
    cursor: pointer;
    margin-top: 0.4rem;
}

.pos-clear-btn:hover { background: var(--sb-bg-elev-2); color: var(--sb-text); }

/* ------------------------------------------------------------
   Cashier: high-contrast light surface (readable under glare)
   Scoped to .pos-screen only — rest of the app keeps the dark theme.
   ------------------------------------------------------------ */
.pos-screen {
    --sb-bg: #eef0f3;
    --sb-bg-elev: #ffffff;
    --sb-bg-elev-2: #e7e9ee;
    --sb-bg-card: #ffffff;
    --sb-border: #c7cbd4;
    --sb-border-strong: #9aa0ac;
    --sb-text: #14161a;
    --sb-text-dim: #3a3f4a;
    --sb-text-muted: #5a606c;
    --sb-warn-text: #b3202b;
    --sb-info-text: #0f6fa3;
    background: var(--sb-bg);
}

/* Overlay tints in the "In Zubereitung / Zu bezahlen" panels were tuned for a
   dark surface (white-on-dark). Flip them to dark-on-light so cards/badges
   stay visible instead of nearly disappearing on the new light background. */
.pos-screen .pos-prep-panel { background: rgba(0, 0, 0, 0.03); }
.pos-screen .pos-prep-toggle:hover { background: rgba(0, 0, 0, 0.05); }
.pos-screen .pos-prep-toggle .count { background: rgba(0, 0, 0, 0.08); }
.pos-screen .pos-prep-item { background: rgba(0, 0, 0, 0.035); border-color: rgba(0, 0, 0, 0.08); }
.pos-screen .pos-prep-item .serv { background: rgba(0, 0, 0, 0.08); }
.pos-screen .pos-pay-head .serv,
.pos-screen .pos-pay-head .method { background: rgba(0, 0, 0, 0.08); }

.pos-screen .pos-edit-banner { color: #0b3d91; }
.pos-screen .pos-edit-banner strong { color: #06214f; }
.pos-screen .pos-edit-cancel {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.2);
    color: var(--sb-text-dim);
}
.pos-screen .pos-edit-cancel:hover:not(:disabled) { background: rgba(0, 0, 0, 0.12); }
.pos-screen .pos-prep-item .editing-badge { color: #0b3d91; }
.pos-screen .pos-prep-item .print-failed-badge { color: #8a5a00; }

/* Action pills (Verpacken/Bearbeiten/Bezahlt) used solid white text tuned
   for a dark tint background; darken to stay legible on the light tint. */
.pos-screen .pos-prep-action,
.pos-screen .pos-pay-btn { color: #0e3d20; }
.pos-screen .pos-prep-action.edit { color: #0b3d91; }
.pos-screen .pos-prep-action.retry-print { color: #6b4900; }
.pos-screen .pos-pay-items .dish { color: var(--sb-text); }

/* ============================================================
   Auth pages (Login, Register, etc.)
   ============================================================ */
body { background: var(--sb-bg); color: var(--sb-text); }

.auth-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    background:
        radial-gradient(1200px 600px at 50% -10%, rgba(230, 57, 70, 0.15), transparent 60%),
        radial-gradient(800px 400px at 50% 110%, rgba(230, 57, 70, 0.08), transparent 60%),
        var(--sb-bg);
}

.auth-card {
    width: 100%;
    max-width: 420px;
    background: var(--sb-bg-card);
    border: 1px solid var(--sb-border);
    border-radius: 14px;
    padding: 2rem 1.75rem 1.5rem;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
}

.auth-brand {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 1.5rem;
}

.auth-brand img {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--sb-accent);
    box-shadow: 0 0 0 3px rgba(230, 57, 70, 0.18);
}

.auth-brand-name {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--sb-text);
    letter-spacing: -0.01em;
}

.auth-brand-sub {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--sb-text-muted);
}

.auth-form .form-floating > label {
    color: var(--sb-text-muted);
}

.auth-form .form-control {
    background: var(--sb-bg-elev);
    border: 1px solid var(--sb-border);
    color: var(--sb-text);
}

.auth-form .form-control:focus {
    background: var(--sb-bg-elev-2);
    border-color: var(--sb-accent);
    box-shadow: 0 0 0 3px rgba(230, 57, 70, 0.2);
    color: var(--sb-text);
}

.auth-form .form-check-input {
    background-color: var(--sb-bg-elev);
    border-color: var(--sb-border-strong);
}

.auth-form .form-check-input:checked {
    background-color: var(--sb-accent);
    border-color: var(--sb-accent);
}

.auth-submit {
    background: var(--sb-accent);
    border-color: var(--sb-accent);
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 0.75rem 1rem;
    margin-top: 0.25rem;
}

.auth-submit:hover, .auth-submit:focus {
    background: #d12f3c;
    border-color: #d12f3c;
    box-shadow: 0 0 0 3px rgba(230, 57, 70, 0.25);
}

.auth-links {
    display: flex;
    justify-content: space-between;
    margin-top: 1rem;
    font-size: 0.85rem;
}

.auth-links a {
    color: var(--sb-text-dim);
    text-decoration: none;
}

.auth-links a:hover {
    color: var(--sb-accent);
}

.auth-hint {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--sb-border);
    font-size: 0.78rem;
    color: var(--sb-text-muted);
    text-align: center;
}

.auth-hint code {
    background: var(--sb-bg-elev);
    color: var(--sb-text);
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    font-size: 0.78rem;
}

/* Cashier "In Zubereitung" compact collapsible panel */
.pos-prep-panel {
    border-bottom: 1px solid var(--sb-border, #2a2f3a);
    background: rgba(255,255,255,0.02);
    flex: 0 0 auto;
}
.pos-prep-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: transparent;
    color: var(--sb-text, #e6e7ea);
    border: 0;
    padding: 0.5rem 0.75rem;
    font-size: 0.8rem;
    cursor: pointer;
    text-align: left;
}
.pos-prep-toggle:hover { background: rgba(255,255,255,0.04); }
.pos-prep-toggle .dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #555;
    flex: 0 0 auto;
}
.pos-prep-toggle .dot.active { background: var(--sb-accent-2, #ffb020); box-shadow: 0 0 6px var(--sb-accent-2, #ffb020); }
.pos-prep-toggle .lbl { flex: 1 1 auto; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; font-size: 0.72rem; color: var(--sb-text-dim, #9aa0a6); }
.pos-prep-toggle .count {
    background: rgba(255,255,255,0.08);
    border-radius: 999px;
    padding: 0.05rem 0.45rem;
    font-size: 0.72rem;
    color: var(--sb-text, #e6e7ea);
    min-width: 1.4rem;
    text-align: center;
}
.pos-prep-toggle .chev { color: var(--sb-text-dim, #9aa0a6); font-size: 0.75rem; width: 0.8rem; text-align: center; }
.pos-prep-body {
    padding: 0.4rem 0.5rem 0.55rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-height: 3rem;
    max-height: clamp(3rem, 16vh, 9rem);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* Cashier column 4: bound the info panels so the three of them can never
   consume the whole column, and guarantee the cart-in-progress + submit
   button stay visible even when many orders pile up. */
.pos-col-cart { overflow-y: auto; -webkit-overflow-scrolling: touch; }
.pos-col-cart .pos-prep-panel { flex: 0 0 auto; }
.pos-cart-body {
    flex: 1 1 auto;
    min-height: 6.5rem;
}
.pos-col-cart .pos-col-footer {
    flex: 0 0 auto;
    position: sticky;
    bottom: 0;
    z-index: 2;
}
.pos-prep-empty {
    font-size: 0.75rem;
    color: var(--sb-text-dim, #9aa0a6);
    text-align: center;
    padding: 0.4rem 0;
}
.pos-prep-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    color: var(--sb-text, #e6e7ea);
    border-radius: 6px;
    padding: 0.3rem 0.4rem;
    font-size: 0.78rem;
}
.pos-prep-item.is-busy { opacity: 0.85; }
.pos-prep-item .prep-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.2rem 0.4rem;
    flex: 1 1 auto;
    min-width: 0;
}
.pos-prep-item .num { font-weight: 700; color: var(--sb-accent, #ff5a5f); font-size: 0.85rem; }
.pos-prep-item .serv {
    font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.04em;
    background: rgba(255,255,255,0.08);
    padding: 0.05rem 0.35rem;
    border-radius: 4px;
    color: var(--sb-text-dim, #c8ccd1);
}
.pos-prep-item .items { color: var(--sb-text-dim, #9aa0a6); font-size: 0.72rem; }
.pos-prep-item .station {
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--sb-accent-2, #ffb020);
    background: rgba(255, 176, 32, 0.12);
    border: 1px solid rgba(255, 176, 32, 0.30);
    padding: 0.08rem 0.4rem;
    border-radius: 999px;
    white-space: nowrap;
}

/* Dedicated action button inside a prep/ready item (touch-safe) */
.pos-prep-action {
    flex: 0 0 auto;
    width: auto;
    border: 1px solid rgba(40,167,69,0.55);
    background: rgba(40,167,69,0.18);
    color: #fff;
    font-weight: 700;
    padding: 0.4rem 0.6rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.78rem;
    line-height: 1.1;
    letter-spacing: 0.02em;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    transition: background 0.12s, border-color 0.12s;
}
.pos-prep-action:hover:not(:disabled) {
    background: rgba(40,167,69,0.30);
    border-color: rgba(40,167,69,0.80);
}
.pos-prep-action:disabled { opacity: 0.6; cursor: default; }
.pos-prep-action.is-busy { cursor: progress; }

/* "Bearbeiten" action on an open order */
.pos-prep-action.edit {
    border-color: rgba(88, 166, 255, 0.55);
    background: rgba(88, 166, 255, 0.16);
}
.pos-prep-action.edit:hover:not(:disabled) {
    background: rgba(88, 166, 255, 0.30);
    border-color: rgba(88, 166, 255, 0.85);
}
.pos-prep-item.is-editing {
    border-color: rgba(88, 166, 255, 0.75);
    box-shadow: 0 0 0 1px rgba(88, 166, 255, 0.45) inset;
}
.pos-prep-item .editing-badge {
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: #58a6ff;
    background: rgba(88, 166, 255, 0.14);
    border: 1px solid rgba(88, 166, 255, 0.40);
    padding: 0.06rem 0.4rem;
    border-radius: 999px;
    white-space: nowrap;
}

/* Warning badge + retry action for orders whose bons failed to print */
.pos-prep-item .print-failed-badge {
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: #ffc107;
    background: rgba(255, 193, 7, 0.14);
    border: 1px solid rgba(255, 193, 7, 0.45);
    padding: 0.06rem 0.4rem;
    border-radius: 999px;
    white-space: nowrap;
}
.pos-prep-action.retry-print {
    border-color: rgba(255, 193, 7, 0.55);
    background: rgba(255, 193, 7, 0.18);
    color: #fff;
}
.pos-prep-action.retry-print:hover:not(:disabled) {
    background: rgba(255, 193, 7, 0.32);
    border-color: rgba(255, 193, 7, 0.85);
}

/* Editing banner + cancel in the cart footer */
.pos-edit-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    padding: 0.35rem 0.55rem;
    font-size: 0.8rem;
    color: #cfe3ff;
    background: rgba(88, 166, 255, 0.14);
    border: 1px solid rgba(88, 166, 255, 0.45);
    border-radius: 6px;
}
.pos-edit-banner strong { color: #fff; }
.pos-edit-cancel {
    flex: 0 0 auto;
    border: 1px solid rgba(255,255,255,0.25);
    background: rgba(255,255,255,0.06);
    color: var(--sb-text, #e6e7ea);
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.2rem 0.55rem;
    border-radius: 5px;
    cursor: pointer;
}
.pos-edit-cancel:hover:not(:disabled) { background: rgba(255,255,255,0.14); }
.pos-edit-cancel:disabled { opacity: 0.5; cursor: default; }
.pos-submit-btn.editing {
    background: linear-gradient(180deg, #3b82f6, #2563eb);
    border-color: #2563eb;
}

/* ============================================================
   "Zu bezahlen" panel variant
   ============================================================ */
.pos-prep-panel.pay .pos-prep-toggle { background: rgba(244, 162, 97, 0.08); }
.pos-prep-panel.pay .dot.warn { background: var(--sb-warning); box-shadow: 0 0 6px var(--sb-warning); }
.pos-prep-item.pay {
    background: rgba(244, 162, 97, 0.10);
    border-color: rgba(244, 162, 97, 0.45);
}
.pos-prep-item.pay:hover {
    background: rgba(244, 162, 97, 0.18);
    border-color: rgba(244, 162, 97, 0.7);
}

/* ============================================================
   "Abholbereit" panel variant
   ============================================================ */
.pos-prep-panel.ready .pos-prep-toggle { background: rgba(46, 204, 113, 0.10); }
.pos-prep-panel.ready .dot.success { background: #2ecc71; box-shadow: 0 0 6px #2ecc71; }
.pos-prep-item.ready {
    background: rgba(46, 204, 113, 0.12);
    border-color: rgba(46, 204, 113, 0.50);
}
.pos-prep-action.ready {
    border-color: rgba(46, 204, 113, 0.60);
    background: rgba(46, 204, 113, 0.22);
}
.pos-prep-action.ready:hover:not(:disabled) {
    background: rgba(46, 204, 113, 0.34);
    border-color: rgba(46, 204, 113, 0.85);
}

/* Detailed "to pay" cards for the cashier (with dish/meat/grill info) */
.pos-pay-card {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: 0.55rem 0.7rem;
    margin-bottom: 0.5rem;
    border: 1px solid rgba(244, 162, 97, 0.45);
    border-radius: 8px;
    background: rgba(244, 162, 97, 0.08);
}
.pos-pay-card.online {
    border-color: rgba(96, 165, 250, 0.45);
    background: rgba(96, 165, 250, 0.08);
}
.pos-pay-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    font-size: 0.78rem;
}
.pos-pay-head .num {
    font-weight: 700;
    color: var(--sb-accent, #ff5a5f);
    font-size: 0.95rem;
}
.pos-pay-head .serv,
.pos-pay-head .method {
    background: rgba(255,255,255,0.08);
    padding: 0.1rem 0.45rem;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.65rem;
}
.pos-pay-head .amount {
    margin-left: auto;
    font-weight: 700;
    color: #60a5fa;
    font-size: 0.9rem;
}
.pos-pay-items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.pos-pay-items li {
    display: grid;
    grid-template-columns: 1.4fr 0.9fr 1.1fr;
    gap: 0.35rem;
    padding: 0.35rem 0.5rem;
    background: rgba(0,0,0,0.25);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 6px;
    font-size: 0.8rem;
    align-items: center;
}
.pos-pay-items .dish { font-weight: 600; color: #fff; }
.pos-pay-items .meat {
    color: var(--sb-text-dim, #c8ccd1);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.pos-pay-items .veg {
    font-size: 0.72rem;
    text-align: right;
}
.pos-pay-items .veg.yes { color: #34d399; }
.pos-pay-items .veg.no  { color: #f87171; }
.pos-pay-btn {
    align-self: stretch;
    border: 1px solid rgba(40,167,69,0.55);
    background: rgba(40,167,69,0.20);
    color: #fff;
    font-weight: 700;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    letter-spacing: 0.03em;
}
.pos-pay-btn:hover {
    background: rgba(40,167,69,0.32);
    border-color: rgba(40,167,69,0.8);
}
.pos-pay-btn:disabled {
    opacity: 0.55;
    cursor: default;
}
.pos-pay-btn.is-busy {
    background: rgba(40,167,69,0.32);
    opacity: 0.95;
    cursor: progress;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}
.pay-spinner {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,0.35);
    border-top-color: #fff;
    border-radius: 50%;
    display: inline-block;
    animation: pay-spin 0.7s linear infinite;
}
@keyframes pay-spin {
    to { transform: rotate(360deg); }
}

.cust-summary .total.cash-note {
    background: rgba(244, 162, 97, 0.10);
    border-color: rgba(244, 162, 97, 0.45);
    color: #f4a261;
    justify-content: center;
    text-align: center;
    font-weight: 500;
}

/* ============================================================
   Customer self-service portal (public, dezent)
   ============================================================ */
.cust-shell {
    min-height: 100vh;
    background: #000;
    color: #f1f1f1;
    display: flex;
    flex-direction: column;
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
}

.cust-header {
    padding: 1.1rem 1.5rem;
    border-bottom: 1px solid #1c1c1c;
    background: linear-gradient(180deg, #0a0a0a 0%, #000 100%);
}

.cust-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    color: #f1f1f1;
    text-decoration: none;
}
.cust-brand img {
    height: 44px;
    width: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid #2a2a2a;
}
.cust-brand .brand-name {
    display: block;
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: -0.01em;
}
.cust-brand .brand-sub {
    display: block;
    font-size: 0.75rem;
    color: #8a8a8a;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.cust-main {
    flex: 1;
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
    padding: 1.5rem 1.25rem 3rem;
}

.cust-footer {
    padding: 1rem 1.5rem 1.5rem;
    color: #5e5e5e;
    text-align: center;
    font-size: 0.78rem;
    border-top: 1px solid #1c1c1c;
}
.cust-footer .dot { margin: 0 0.5rem; opacity: 0.5; }

.cust-loading { display: flex; justify-content: center; padding: 4rem 0; }

.cust-wizard h2 {
    font-size: 1.35rem;
    font-weight: 600;
    margin: 0.5rem 0 0.25rem;
    color: #fff;
}
.cust-wizard h2.mt { margin-top: 2rem; }
.cust-help { color: #9a9a9a; font-size: 0.92rem; margin-bottom: 1.25rem; }
.cust-help.big { font-size: 1.05rem; color: #cfcfcf; }
.cust-help.small { font-size: 0.78rem; color: #6a6a6a; }

.cust-steps {
    display: flex;
    gap: 0.35rem;
    padding: 0;
    margin: 0 0 1rem 0;
    list-style: none;
}
.cust-steps li {
    flex: 1;
    height: 4px;
    border-radius: 2px;
    background: #1a1a1a;
    text-indent: -9999px;
    overflow: hidden;
}
.cust-steps li.active { background: linear-gradient(90deg, #e63946, #ffb37a); }
.cust-steps li.done   { background: #2ecc71; }

.cust-tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.85rem;
}
.cust-tile-grid.two   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cust-tile-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cust-tile-grid.four  { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

.cust-tile {
    position: relative;
    background: #0d0d0d;
    border: 1px solid #1d1d1d;
    border-radius: 14px;
    overflow: hidden;
    color: #f1f1f1;
    cursor: pointer;
    text-align: left;
    transition: transform .08s ease, border-color .15s ease, box-shadow .15s ease;
    padding: 0;
    min-height: 170px;
    display: flex;
    flex-direction: column;
}
.cust-tile:hover { border-color: #3a3a3a; transform: translateY(-1px); }
.cust-tile.selected {
    border-color: var(--sb-accent, #e63946);
    box-shadow: 0 0 0 2px rgba(230,57,70,0.25), 0 6px 20px rgba(0,0,0,0.5);
}
.cust-tile.excluded {
    border-color: #4a1f24;
    opacity: 0.55;
    filter: grayscale(0.4);
}
.cust-tile .img {
    flex: 1;
    background-color: #111;
    background-size: cover;
    background-position: center;
    background-image:
        linear-gradient(135deg, rgba(230,57,70,0.18), rgba(244,162,97,0.10));
    min-height: 110px;
}
.cust-tile .label {
    padding: 0.6rem 0.85rem 0.7rem;
    background: rgba(0,0,0,0.78);
    backdrop-filter: blur(2px);
    border-top: 1px solid #1a1a1a;
}
.cust-tile .label strong {
    display: block;
    color: #fff;
    font-weight: 600;
    font-size: 0.95rem;
}
.cust-tile .label em {
    display: block;
    font-style: normal;
    color: #9a9a9a;
    font-size: 0.78rem;
    margin-top: 0.15rem;
}
.cust-tile.selected .label em { color: var(--sb-accent-2, #f4a261); }

.cust-nav-row {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 1.5rem;
    flex-wrap: wrap;
}

.cust-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    border-radius: 10px;
    padding: 0.7rem 1.2rem;
    font-size: 0.95rem;
    font-weight: 600;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s, border-color .15s, transform .05s;
    min-width: 140px;
}
.cust-btn:active { transform: translateY(1px); }
.cust-btn.primary {
    background: linear-gradient(180deg, #ec4750 0%, #c41f2c 100%);
    color: #fff;
    border-color: #c41f2c;
}
.cust-btn.primary:hover { background: linear-gradient(180deg, #ff5d65 0%, #d62938 100%); }
.cust-btn.primary:disabled { opacity: 0.45; cursor: not-allowed; }
.cust-btn.ghost {
    background: transparent;
    border-color: #2a2a2a;
    color: #d1d1d1;
}
.cust-btn.ghost:hover { background: #111; }
.cust-btn.ghost:disabled { opacity: 0.35; cursor: not-allowed; }
.cust-btn.link {
    background: transparent;
    border: none;
    color: #f4a261;
    padding: 0.25rem 0.5rem;
    min-width: 0;
    font-weight: 500;
}

.cust-cart-summary {
    margin-top: 2rem;
    background: #0a0a0a;
    border: 1px solid #1d1d1d;
    border-radius: 14px;
    padding: 1rem 1.1rem 1.1rem;
}
.cust-cart-summary .head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
    color: #b8b8b8;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: 1px solid #161616;
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
}
.cust-cart-summary .head strong { color: #fff; font-size: 1rem; letter-spacing: 0; text-transform: none; }
.cust-cart-summary ul {
    list-style: none;
    padding: 0;
    margin: 0 0 0.75rem 0;
}
.cust-cart-summary li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #d8d8d8;
    font-size: 0.92rem;
    padding: 0.25rem 0;
    border-bottom: 1px solid #131313;
}
.cust-cart-summary .actions {
    display: flex;
    gap: 0.6rem;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.cust-summary { margin-bottom: 1rem; }
.cust-summary .row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0.7rem 0;
    border-bottom: 1px solid #141414;
}
.cust-summary .row .meta { color: #8a8a8a; font-size: 0.82rem; margin-top: 0.2rem; }
.cust-summary .row .meta .warn { color: #ff8a93; }
.cust-summary .row .price { color: #fff; font-weight: 600; min-width: 80px; text-align: right; }
.cust-summary .total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid #2a2a2a;
    font-size: 1.1rem;
}
.cust-summary .total strong { color: #fff; font-size: 1.35rem; }

.cust-error {
    background: rgba(230,57,70,0.14);
    border: 1px solid rgba(230,57,70,0.45);
    color: #ffb1b6;
    padding: 0.75rem 1rem;
    border-radius: 10px;
    margin: 1rem 0 0;
}

.cust-empty {
    text-align: center;
    padding: 3rem 1rem;
    color: #c1c1c1;
}

.cust-pending, .cust-confirmed {
    text-align: center;
    padding: 2rem 1rem 3rem;
    color: #e8e8e8;
}
.cust-pickup-code {
    font-size: 4rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #fff;
    background: linear-gradient(180deg, #1a1a1a 0%, #050505 100%);
    border: 1px solid #2c2c2c;
    border-radius: 18px;
    padding: 1.2rem 1.5rem;
    display: inline-block;
    margin: 1.25rem 0;
    box-shadow: 0 8px 30px rgba(230,57,70,0.18);
}
.cust-order-items {
    list-style: none;
    padding: 0;
    color: #b9b9b9;
    margin: 1.25rem 0;
}
.cust-pay-total {
    display: inline-flex;
    gap: 0.5rem;
    align-items: baseline;
    background: #0d0d0d;
    border: 1px solid #1f1f1f;
    border-radius: 10px;
    padding: 0.6rem 1rem;
    margin-top: 0.5rem;
}
.cust-pay-total strong { font-size: 1.3rem; color: #fff; }

@media (max-width: 640px) {
    .cust-pickup-code { font-size: 3rem; }
}

/* Live presence widget in the cashier */
.pos-presence {
    margin: 0.5rem 0.5rem 0.75rem;
    padding: 0.55rem 0.7rem 0.65rem;
    background: #0f0f0f;
    border: 1px solid #1f1f1f;
    border-radius: 10px;
}
.pos-presence .head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.78rem;
    color: #b8b8b8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.pos-presence .head .lbl { flex: 1; }
.pos-presence .head .count {
    color: #f4a261;
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: 0;
}
.pos-presence .head .dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #444;
    box-shadow: 0 0 0 2px #0f0f0f;
}
.pos-presence .head .dot.active {
    background: #2ecc71;
    animation: pos-pulse 1.4s ease-in-out infinite;
}
@keyframes pos-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(46,204,113,0.55); }
    50%      { box-shadow: 0 0 0 5px rgba(46,204,113,0);    }
}
.pos-presence .spark {
    margin-top: 0.45rem;
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 38px;
}
.pos-presence .spark.empty {
    color: #555;
    font-size: 0.75rem;
    align-items: center;
    justify-content: center;
}
.pos-presence .spark .bar {
    flex: 1;
    min-width: 3px;
    background: linear-gradient(180deg, #f4a261, #b9651e);
    border-radius: 2px 2px 0 0;
    transition: height 0.3s ease;
}
.pos-prep-item .action { font-weight: 600; color: #2ecc71; font-size: 0.78rem; }
/* ============================================================
   CUSTOMER PORTAL — MOBILE-FIRST OPTIMIZATIONS
   Optimiert für Handys (Hauptzielgruppe) und Tablets.
   ============================================================ */

/* Safe-area + smooth touch behaviour for the public portal */
html, body { -webkit-text-size-adjust: 100%; }
.cust-shell {
    min-height: 100dvh;
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    overscroll-behavior-y: contain;
}

/* No iOS tap highlight, no double-tap zoom on interactive elements */
.cust-tile, .cust-btn, .cust-brand, .cust-cart-summary .actions button {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

/* Larger, finger-friendly tap targets everywhere (Apple HIG / Material: >= 44px) */
.cust-btn { min-height: 48px; }
.cust-tile { min-height: 180px; }

/* Header: lighter on mobile, sticky for orientation */
.cust-header {
    position: sticky;
    top: 0;
    z-index: 20;
    padding: 0.7rem 1rem;
    padding-top: calc(0.7rem + env(safe-area-inset-top));
    -webkit-backdrop-filter: saturate(160%) blur(8px);
    backdrop-filter: saturate(160%) blur(8px);
    background: rgba(8,8,8,0.92);
}
.cust-brand img { height: 38px; width: 38px; }
.cust-brand .brand-name { font-size: 1.05rem; }

/* Main: tighter horizontal padding on phones, leave room for sticky CTA */
.cust-main {
    padding: 1rem 0.9rem calc(7rem + env(safe-area-inset-bottom));
}

/* Tiles: full-bleed feel on mobile, snappy press feedback */
.cust-tile-grid {
    gap: 0.7rem;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.cust-tile-grid.two { gap: 0.7rem; }
.cust-tile { border-radius: 16px; }
.cust-tile:active { transform: scale(0.985); }
.cust-tile .img { min-height: 96px; }
.cust-tile .label { padding: 0.55rem 0.7rem 0.6rem; }
.cust-tile .label strong { font-size: 0.92rem; line-height: 1.2; }
.cust-tile .label em { font-size: 0.72rem; }

/* Sticky bottom action bar: keeps "Weiter" always thumb-reachable */
.cust-nav-row {
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 1.25rem -0.9rem 0;
    padding: 0.7rem 0.9rem calc(0.7rem + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.92) 25%, #000 100%);
    z-index: 15;
    gap: 0.6rem;
}
.cust-nav-row .cust-btn {
    flex: 1;
    min-width: 0;
    padding: 0.85rem 1rem;
    font-size: 1rem;
}
.cust-nav-row .cust-btn.primary { flex: 2; }

/* Wizard headings: more legible on small screens */
.cust-wizard h2 { font-size: 1.15rem; line-height: 1.3; }
.cust-wizard h2.mt { margin-top: 1.5rem; }
.cust-help { font-size: 0.88rem; margin-bottom: 0.9rem; }

/* Cart summary: compact, full-width, scrollable item list */
.cust-cart-summary { padding: 0.85rem 0.9rem 1rem; border-radius: 14px; }
.cust-cart-summary ul {
    max-height: 40vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.cust-cart-summary .actions { gap: 0.5rem; }
.cust-cart-summary .actions .cust-btn { flex: 1; min-width: 0; }

/* Checkout summary rows wrap nicely on phones */
.cust-summary .row { flex-wrap: wrap; gap: 0.4rem; }
.cust-summary .row .price { min-width: 0; }

/* Pickup code — readable from a distance, but not overflowing on tiny screens */
.cust-pickup-code {
    font-size: clamp(2.6rem, 12vw, 4rem);
    letter-spacing: 0.08em;
    padding: 1rem 1.2rem;
    word-break: break-all;
}

/* ----- Phones (default already covers up to 640px) ----- */
@media (max-width: 480px) {
    .cust-tile-grid,
    .cust-tile-grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cust-tile-grid.three { grid-template-columns: 1fr 1fr; }
    .cust-tile { min-height: 160px; }
    .cust-tile .img { min-height: 86px; }

    .cust-main { padding: 0.85rem 0.75rem calc(7rem + env(safe-area-inset-bottom)); }
    .cust-brand .brand-sub { display: none; }
    .cust-wizard h2 { font-size: 1.08rem; }

    .cust-nav-row { margin: 1rem -0.75rem 0; padding-left: 0.75rem; padding-right: 0.75rem; }
}

/* Very small phones (iPhone SE, ~360px) */
@media (max-width: 360px) {
    .cust-tile { min-height: 140px; }
    .cust-tile .img { min-height: 74px; }
    .cust-tile .label strong { font-size: 0.85rem; }
    .cust-tile .label em { font-size: 0.68rem; }
}

/* ----- Tablets ----- */
@media (min-width: 641px) and (max-width: 1024px) {
    .cust-main { padding: 1.5rem 1.5rem calc(8rem + env(safe-area-inset-bottom)); max-width: 760px; }
    .cust-tile-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
    .cust-tile-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .cust-tile { min-height: 200px; }
    .cust-tile .img { min-height: 130px; }
    .cust-wizard h2 { font-size: 1.4rem; }
    .cust-nav-row { margin: 1.5rem -1.5rem 0; padding-left: 1.5rem; padding-right: 1.5rem; }
}

/* ----- Desktop: drop the sticky bar back to inline (more elegant) ----- */
@media (min-width: 1025px) {
    .cust-nav-row {
        position: static;
        margin: 1.5rem 0 0;
        padding: 0;
        background: none;
    }
    .cust-main { padding: 1.75rem 1.5rem 3rem; }
    .cust-tile { min-height: 220px; }
}

/* Landscape phones — keep the sticky bar slim to preserve vertical space */
@media (max-height: 480px) and (orientation: landscape) {
    .cust-tile { min-height: 130px; }
    .cust-tile .img { min-height: 68px; }
    .cust-header { position: static; }
    .cust-nav-row { padding-top: 0.5rem; padding-bottom: 0.5rem; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .cust-tile, .cust-btn { transition: none !important; }
}
/* --- Vorbestellung (Pre-order) --- */
.cust-badge { display:inline-block; margin-top:.35rem; padding:.15rem .5rem; border-radius:999px; background:rgba(255,193,7,.15); color:#ffc107; font-size:.75rem; font-style:normal; font-weight:600; }
.cust-schedule { margin-top:1rem; padding:1rem; border-radius:.75rem; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); display:flex; flex-direction:column; gap:.5rem; }
.cust-schedule label { display:flex; align-items:center; gap:.5rem; cursor:pointer; font-weight:600; }
.cust-schedule small { color:rgba(255,255,255,.65); }
.cust-input { padding:.6rem .8rem; border-radius:.5rem; border:1px solid rgba(255,255,255,.15); background:rgba(0,0,0,.35); color:#fff; font-size:1.1rem; max-width:160px; }

.pos-pay-card.preorder { border-color:#ffc107; box-shadow:0 0 0 1px rgba(255,193,7,.35) inset; }
.pos-pay-head .preorder-badge { background:rgba(255,193,7,.18); color:#ffc107; padding:.15rem .55rem; border-radius:999px; font-weight:700; font-size:.8rem; }

.cust-modal-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.7); display:flex; align-items:center; justify-content:center; z-index:1000; padding:1rem; }
.cust-modal { background:#1a1a1a; border:1px solid rgba(255,255,255,.1); border-radius:1rem; padding:1.5rem; max-width:420px; width:100%; color:#fff; box-shadow:0 20px 60px rgba(0,0,0,.6); }
.cust-modal h3 { margin:0 0 .75rem 0; font-size:1.25rem; }
.cust-modal p { color:rgba(255,255,255,.8); margin:0 0 1.25rem 0; }
.cust-modal-actions { display:flex; gap:.75rem; justify-content:flex-end; flex-wrap:wrap; }

/* ============================================================
   CASHIER / POS — RESPONSIVE LAYOUT
   The 4-column "no-scroll" grid is tuned for desktop and
   landscape tablets. The rules below progressively relax it for
   portrait tablets and phones: the screen stops being a fixed
   100vh canvas and becomes a normally-scrolling, stacked layout
   with finger-friendly tap targets.
   ============================================================ */

/* ----- Portrait tablets / narrow viewports (<= 900px) ----- */
@media (max-width: 900px) {
    .pos-screen {
        /* Drop the locked viewport height so the page can grow and scroll. */
        height: auto;
        min-height: calc(100dvh - var(--sb-topbar-h, 2.25rem));
        grid-template-columns: repeat(2, minmax(0, 1fr));
        overflow: visible;
    }

    /* Columns size to their content; the page scrolls, not each column. */
    .pos-col { overflow: visible; }
    .pos-col-body { overflow-y: visible; }
    .pos-col-cart { overflow-y: visible; }

    /* Larger, touch-friendly controls. */
    .pos-btn { min-height: 2.85rem; font-size: 0.9rem; }
    .pos-add-btn { padding: 0.85rem; font-size: 1rem; }
    .pos-submit-btn { padding: 0.9rem; font-size: 1.05rem; }

    /* The cart submit/clear footer flows naturally under the items on
       small screens (sticky-bottom only makes sense for the desktop
       column-scroll layout). */
    .pos-col-cart .pos-col-footer { position: static; }
    .pos-col-cart .pos-cart-body { flex: 0 0 auto; }

    /* Same reasoning for the "Bestellung aufgeben" button in column 3: the
       column height is no longer fixed here, so the floating/absolute
       placement used on desktop would land unpredictably. Let it flow
       in-line after the configurator content instead. */
    .pos-col-order .pos-submit-btn--floating {
        position: static;
        margin-top: 0.75rem;
        min-height: 4.5rem;
    }
    .pos-col-order .pos-col-body { padding-bottom: 0.5rem; }

    /* Avoid iOS zoom-on-focus (needs >= 16px) for the remark field. */
    .pos-col-footer .form-control { font-size: 16px; }

    /* Open-order rows (Cashier "Offene Bestellungen"): the header info
       (number, serving type, item count, station, badges) and the action
       buttons no longer fit on one line at tablet widths. Let the row wrap
       onto two lines instead of squeezing/overlapping everything: the
       header takes its own full-width line, and the actions flow below it
       with the small icon buttons (✎ edit / 🖨 retry) kept compact while
       the primary "Abholbereit markieren" button grows to fill the rest. */
    .pos-prep-panel:not(.ready):not(.pay) .pos-prep-item { flex-wrap: wrap; }
    .pos-prep-panel:not(.ready):not(.pay) .pos-prep-item .prep-head { flex: 1 1 100%; }
    .pos-prep-panel:not(.ready):not(.pay) .pos-prep-action { flex: 1 1 auto; }
    .pos-prep-panel:not(.ready):not(.pay) .pos-prep-action.edit,
    .pos-prep-panel:not(.ready):not(.pay) .pos-prep-action.retry-print { flex: 0 0 auto; }
}

/* ----- Phones (<= 600px): one column, everything stacks ----- */
@media (max-width: 600px) {
    .pos-screen {
        --pos-gap: 0.5rem;
        grid-template-columns: 1fr;
    }

    /* Comfortable tap targets (Apple HIG / Material >= 44px). */
    .pos-btn { min-height: 3rem; font-size: 0.95rem; }
    .pos-btn-grid { gap: 0.45rem; }

    /* Step header sticks to the top of its column for orientation. */
    .pos-col-header {
        position: sticky;
        top: 0;
        z-index: 2;
    }

    /* Prep / ready / pay actions go full width so they're easy to hit. */
    .pos-prep-item { flex-wrap: wrap; }
    .pos-prep-action { width: 100%; }

    /* Kill tap highlight + double-tap zoom on all POS controls. */
    .pos-btn, .pos-add-btn, .pos-submit-btn, .pos-clear-btn,
    .pos-prep-toggle, .pos-prep-action, .pos-pay-btn {
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }
}

/* ----- Landscape phones (short viewport) ----- */
@media (max-width: 900px) and (max-height: 500px) and (orientation: landscape) {
    .pos-screen { min-height: 0; }
    .pos-col-body { padding: 0.4rem; }
}