/* ============================================================
   Softservi — Global stylesheet
   Plain CSS3 with custom properties for theming.
   ============================================================ */

:root {
    --color-primary: #ff6b35;
    --color-primary-dark: #e55a2b;
    --color-accent: #ffb627;
    --color-bg: #fafafa;
    --color-surface: #ffffff;
    --color-text: #1a1a1a;
    --color-muted: #6b7280;
    --color-border: #e5e7eb;
    --color-success: #16a34a;
    --color-warn: #d97706;
    --color-danger: #dc2626;

    --radius: 12px;
    --radius-lg: 20px;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow:    0 4px 12px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.08);

    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    --max-width: 1100px;
}

/* Reset --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    font-family: var(--font);
    background: var(--color-bg);
    color: var(--color-text);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; display: block; }
a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* HTML5 hidden attribute must beat any component-level display rule.
   Without this, .cart-drawer / .cart-bar (which set `display: flex`)
   override the user-agent `display: none` from [hidden] and stay visible. */
[hidden] { display: none !important; }

/* Layout helpers ------------------------------------------------ */
.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 20px;
}

/* Header -------------------------------------------------------- */
.site-header {
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    padding: 16px 0;
    position: sticky;
    top: 0;
    z-index: 10;
}
.site-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text);
    text-decoration: none;
}
.brand-mark { color: var(--color-primary); font-size: 1.4em; line-height: 1; }
.brand-name { letter-spacing: -0.02em; }
.site-nav { display: flex; gap: 16px; }
.nav-link {
    color: var(--color-muted);
    font-weight: 500;
    padding: 8px 12px;
    border-radius: 8px;
    transition: background 0.15s, color 0.15s;
}
.nav-link:hover { background: var(--color-bg); color: var(--color-text); text-decoration: none; }

/* Footer -------------------------------------------------------- */
.site-footer {
    padding: 32px 0;
    text-align: center;
    color: var(--color-muted);
    border-top: 1px solid var(--color-border);
    margin-top: 80px;
    font-size: 0.9rem;
}

/* Hero ---------------------------------------------------------- */
.hero {
    padding: 80px 0 64px;
    text-align: center;
    background:
        radial-gradient(ellipse at top, rgba(255, 107, 53, 0.08), transparent 60%),
        var(--color-bg);
}
.hero .eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.85rem;
    color: var(--color-primary);
    font-weight: 600;
    margin-bottom: 16px;
}
.hero h1 {
    font-size: clamp(2rem, 5vw, 3.25rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.1;
    margin-bottom: 20px;
}
.hero .accent { color: var(--color-primary); }
.hero .tagline {
    font-size: 1.25rem;
    color: var(--color-muted);
    margin-bottom: 20px;
}
.hero .description {
    max-width: 640px;
    margin: 0 auto 32px;
    color: var(--color-text);
    font-size: 1.05rem;
}

.cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

/* Buttons ------------------------------------------------------- */
.btn {
    display: inline-block;
    padding: 14px 28px;
    border-radius: var(--radius);
    font-weight: 600;
    text-decoration: none;
    transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
    cursor: pointer;
    border: 1px solid transparent;
    font-size: 1rem;
    font-family: inherit;
    line-height: 1;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); box-shadow: var(--shadow); }
.btn:active { transform: translateY(0); }
.btn-primary {
    background: var(--color-primary);
    color: white;
}
.btn-primary:hover { background: var(--color-primary-dark); }
.btn-secondary {
    background: var(--color-surface);
    color: var(--color-text);
    border-color: var(--color-border);
}
.btn-secondary:hover { background: var(--color-bg); }
/* Disabled button / link. Works on both `<button>` and `<a>`:
   - cursor + opacity signal the inactive state to the user
   - pointer-events: none ensures no stray click can fire the link/button
     (belt-and-suspenders on top of href removal / disabled attribute in JS) */
.btn.disabled,
.btn[aria-disabled="true"],
.btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
    box-shadow: none;
    transform: none;
}

/* Features ------------------------------------------------------ */
.features { padding: 32px 0 64px; }
.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
}
.feature {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 28px;
    transition: transform 0.2s, box-shadow 0.2s;
}
.feature:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.feature-icon {
    font-size: 1.8rem;
    margin-bottom: 12px;
    width: 48px;
    height: 48px;
    background: rgba(255, 107, 53, 0.1);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.feature h3 { margin-bottom: 8px; font-size: 1.1rem; }
.feature p { color: var(--color-muted); font-size: 0.95rem; margin: 0; }

/* Status banner ------------------------------------------------- */
.status { padding: 0 0 48px; }
.status p {
    background: var(--color-surface);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius);
    padding: 16px 20px;
    margin: 0;
    color: var(--color-muted);
    text-align: center;
}
.status strong { color: var(--color-text); }

/* Placeholder / error pages ------------------------------------ */
.placeholder, .error-page {
    padding: 80px 0;
    text-align: center;
}
.placeholder .eyebrow,
.error-page .error-code {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.85rem;
    color: var(--color-primary);
    font-weight: 600;
    margin-bottom: 12px;
}
.error-page .error-code { font-size: 4rem; color: var(--color-primary); font-weight: 800; }
.placeholder h1, .error-page h1 {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    margin-bottom: 16px;
    letter-spacing: -0.02em;
}
.placeholder .tagline {
    max-width: 560px;
    margin: 0 auto 24px;
    color: var(--color-muted);
    font-size: 1.05rem;
}
.placeholder code, .error-page code {
    background: var(--color-surface);
    padding: 2px 8px;
    border-radius: 6px;
    border: 1px solid var(--color-border);
    font-size: 0.95em;
}

/* Responsive ---------------------------------------------------- */
@media (max-width: 640px) {
    .hero { padding: 56px 0 40px; }
    .site-header .container { flex-wrap: wrap; }
    .placeholder, .error-page { padding: 48px 0; }
}

/* ============================================================
   Auth screens (login, etc.)
   ============================================================ */
.auth-body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(ellipse at top, rgba(255, 107, 53, 0.10), transparent 60%),
        var(--color-bg);
    padding: 24px;
}
.auth-shell {
    width: 100%;
    max-width: 420px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
}
.auth-brand {
    align-self: center;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.auth-brand:hover { text-decoration: none; }
.auth-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 32px;
    box-shadow: var(--shadow);
}
.auth-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 8px;
    letter-spacing: -0.02em;
}
.auth-sub {
    color: var(--color-muted);
    font-size: 0.95rem;
    margin: 0 0 24px;
}
.auth-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.auth-form .btn-block { width: 100%; }
.auth-foot {
    text-align: center;
    color: var(--color-muted);
    margin: 0;
    font-size: 0.9rem;
}
.auth-hint {
    text-align: center;
    color: var(--color-muted);
    margin: 16px 0 0;
    font-size: 0.9rem;
}

/* Password strength meter ----------------------------------------
   Bar grows from 0% to 100% width as the score (0..4) increases,
   colour ramps from red (weak) to green (strong). Width is set
   inline by password-meter.js; we only control the colours here.    */
.pw-meter {
    position: relative;
    height: 4px;
    background: var(--color-border);
    border-radius: 2px;
    overflow: hidden;
    margin-top: 4px;
}
.pw-meter-bar {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 2px;
    background: var(--color-muted);
    transition: width 0.15s ease, background-color 0.15s ease;
}
.pw-meter[data-score="1"] .pw-meter-bar { background: #ef4444; }
.pw-meter[data-score="2"] .pw-meter-bar { background: #f59e0b; }
.pw-meter[data-score="3"] .pw-meter-bar { background: #3b82f6; }
.pw-meter[data-score="4"] .pw-meter-bar { background: #10b981; }
.pw-meter[data-score="0"] .pw-meter-bar { background: var(--color-border); }

/* Turnstile widget: just a bit of breathing room inside forms. */
.cf-turnstile { margin: 4px 0; }

/* Form fields ---------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text);
}
.field input,
.field select,
.field textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font: inherit;
    color: var(--color-text);
    background: var(--color-surface);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.18);
}

/* Alerts --------------------------------------------------------- */
.alert {
    padding: 12px 16px;
    border-radius: var(--radius);
    font-size: 0.95rem;
    margin-bottom: 16px;
}
.alert-error {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}
.alert-success {
    background: #f0fdf4;
    color: #166534;
    border: 1px solid #bbf7d0;
}

/* ============================================================
   Authenticated dashboards (admin, superadmin)
   ============================================================ */
.dashboard { padding: 40px 0 64px; }
.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 32px;
    flex-wrap: wrap;
}
.dashboard-header h1 {
    font-size: clamp(1.75rem, 4vw, 2.25rem);
    margin: 4px 0 8px;
    letter-spacing: -0.02em;
}
.dashboard-header .eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.8rem;
    color: var(--color-primary);
    font-weight: 600;
    margin: 0;
}
.dashboard-sub {
    color: var(--color-muted);
    margin: 0;
}
.dashboard-logout { margin: 0; }
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 32px;
}
.dash-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 24px;
    transition: transform 0.15s, box-shadow 0.15s;
}
.dash-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.dash-card h3 { font-size: 1.1rem; margin: 0 0 8px; }
.dash-card p  { color: var(--color-muted); font-size: 0.95rem; margin: 0; }
.dashboard-status {
    text-align: center;
    color: var(--color-muted);
    padding: 16px;
    border: 1px dashed var(--color-border);
    border-radius: var(--radius);
}
.dashboard-status strong { color: var(--color-text); }

/* ============================================================
   Admin panel layout
   ============================================================ */
.admin-body {
    display: grid;
    grid-template-columns: 240px 1fr;
    min-height: 100vh;
    background: var(--color-bg);
}
.admin-sidebar {
    background: var(--color-surface);
    border-right: 1px solid var(--color-border);
    padding: 24px 16px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}
.admin-brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-text);
    text-decoration: none;
    padding: 0 8px;
}
.admin-brand:hover { text-decoration: none; }
.admin-stall-card {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    color: white;
    padding: 14px;
    border-radius: var(--radius);
}
.admin-stall-label {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.7rem;
    opacity: 0.85;
    margin: 0 0 4px;
}
.admin-stall-name {
    font-weight: 700;
    font-size: 1rem;
    margin: 0 0 6px;
}
.admin-stall-link {
    color: white;
    font-size: 0.85rem;
    opacity: 0.9;
    text-decoration: none;
}
.admin-stall-link:hover { text-decoration: underline; opacity: 1; }
.admin-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.admin-nav a, .admin-nav-disabled {
    display: block;
    padding: 10px 12px;
    border-radius: 8px;
    color: var(--color-text);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    transition: background 0.12s;
}
.admin-nav a:hover { background: var(--color-bg); text-decoration: none; }
.admin-nav a.active {
    background: rgba(255, 107, 53, 0.10);
    color: var(--color-primary-dark);
}
.admin-nav-disabled {
    color: var(--color-muted);
    opacity: 0.6;
    cursor: not-allowed;
}
.admin-nav-disabled em { font-style: normal; opacity: 0.6; font-size: 0.8em; }
.admin-sidebar-foot {
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.admin-sidebar-foot a {
    color: var(--color-muted);
    text-decoration: none;
    font-size: 0.9rem;
    padding: 6px 8px;
    border-radius: 6px;
}
.admin-sidebar-foot a:hover { color: var(--color-text); background: var(--color-bg); text-decoration: none; }
.admin-logout { margin: 0; }
.link-button {
    background: none;
    border: none;
    color: var(--color-muted);
    cursor: pointer;
    padding: 6px 8px;
    text-align: left;
    font-size: 0.9rem;
    font-family: inherit;
    border-radius: 6px;
    width: 100%;
}
.link-button:hover { color: var(--color-text); background: var(--color-bg); }

.admin-main {
    padding: 32px 40px;
    overflow-x: auto;
}
.admin-main .alert { max-width: 900px; }

/* Page header (used inside admin-main) */
.page-header {
    margin-bottom: 32px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--color-border);
}
.page-header .eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.78rem;
    color: var(--color-primary);
    font-weight: 600;
    margin: 0 0 4px;
}
.page-header h1 {
    font-size: clamp(1.5rem, 3vw, 2rem);
    margin: 0 0 8px;
    letter-spacing: -0.02em;
}
.page-sub {
    color: var(--color-muted);
    margin: 0;
}
.page-actions {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

/* Stats */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 32px;
}
.stat-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 20px;
}
.stat-label {
    font-size: 0.85rem;
    color: var(--color-muted);
    margin: 0 0 6px;
}
.stat-value {
    font-size: 2rem;
    font-weight: 800;
    color: var(--color-text);
    margin: 0;
    letter-spacing: -0.02em;
}
.stat-help {
    font-size: 0.8rem;
    color: var(--color-muted);
    margin: 4px 0 0;
}

/* Quick actions */
.quick-actions h2 {
    font-size: 1.1rem;
    margin: 0 0 12px;
}
.actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}
.action-tile {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--color-text);
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.action-tile:hover {
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: var(--shadow);
    border-color: var(--color-primary);
}
.action-icon { font-size: 1.5rem; }
.action-label { font-weight: 600; }

/* Forms */
.form-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 900px;
}
.field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
@media (max-width: 600px) {
    .field-row { grid-template-columns: 1fr; }
}
.field-help {
    font-size: 0.85rem;
    color: var(--color-muted);
    margin: 4px 0 0;
}
.field-checkbox {
    flex-direction: row !important;
    align-items: center;
    gap: 10px;
}
.field-checkbox input { width: auto; }
.field-checkbox small { display: block; }
.image-preview {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 12px;
}
.image-preview img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--color-border);
}

/* File upload component (replaces native <input type="file"> look) */
.file-upload {
    position: relative;
    margin-top: 4px;
}
.file-upload input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.file-upload-trigger {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    border: 2px dashed var(--color-border);
    border-radius: var(--radius);
    background: var(--color-bg);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, transform 0.05s;
}
.file-upload-trigger:hover {
    border-color: var(--color-primary);
    background: #fff7f3;
}
.file-upload-trigger:active { transform: scale(0.998); }
.file-upload input[type="file"]:focus-visible + .file-upload-trigger {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.18);
}
.file-upload-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--color-surface);
    color: var(--color-primary);
    border: 1px solid var(--color-border);
    flex-shrink: 0;
}
.file-upload-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.3;
}
.file-upload-text strong { font-size: 0.95rem; color: var(--color-text); }
.file-upload-text small  { font-size: 0.82rem; color: var(--color-muted); }
.file-upload-info {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
}
.file-upload-thumb {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background: var(--color-bg) center / cover no-repeat;
    border: 1px solid var(--color-border);
    flex-shrink: 0;
}
.file-upload-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.25;
    flex: 1;
    min-width: 0;
}
.file-upload-meta strong {
    font-size: 0.9rem;
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.file-upload-meta small {
    font-size: 0.78rem;
    color: var(--color-muted);
}
.file-upload-clear {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: var(--color-muted);
    border-radius: 6px;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
}
.file-upload-clear:hover {
    background: var(--color-bg);
    color: var(--color-danger);
}
.form-actions {
    display: flex;
    gap: 12px;
    border-top: 1px solid var(--color-border);
    padding-top: 16px;
    margin-top: 8px;
}
.radio-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-top: 6px;
}
/* Two-up variant for binary choices (list vs grid). */
.radio-card-grid--2 {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.radio-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 14px 16px;
    cursor: pointer;
    background: var(--color-surface);
    overflow: hidden;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.radio-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--color-border);
    transition: background 0.15s;
}
.radio-card[data-template="classic"]::before  { background: #2563eb; }
.radio-card[data-template="modern"]::before   { background: linear-gradient(90deg, #ff6b35, #ffb627); }
.radio-card[data-template="minimal"]::before  { background: #1a1a1a; }
.radio-card[data-template="bold"]::before     { background: linear-gradient(90deg, #dc2626, #ff6b35); }
.radio-card:hover { border-color: var(--color-primary); }
.radio-card input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.radio-card-indicator {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--color-border);
    background: var(--color-surface);
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.radio-card-indicator::after {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-primary);
    transform: scale(0);
    transition: transform 0.15s;
}
.radio-card input:checked ~ .radio-card-indicator { border-color: var(--color-primary); }
.radio-card input:checked ~ .radio-card-indicator::after { transform: scale(1); }
.radio-card input:focus-visible ~ .radio-card-indicator {
    box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.18);
}
.radio-card:has(input:checked) {
    border-color: var(--color-primary);
    background: rgba(255, 107, 53, 0.05);
}
.radio-card-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}
.radio-card-body strong {
    font-size: 0.95rem;
    color: var(--color-text);
}
.radio-card input:checked ~ .radio-card-body strong { color: var(--color-primary-dark); }
.radio-card-body small {
    color: var(--color-muted);
    font-size: 0.85rem;
}

/* Mini visual previews drawn with pure CSS so admins can see what
   each layout will look like without leaving the form. */
.radio-card-preview {
    display: block;
    width: 56px;
    height: 36px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 4px;
    margin-bottom: 4px;
}
.radio-card-preview--list {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.radio-card-preview--list::before,
.radio-card-preview--list::after,
.radio-card-preview--list > * {
    /* Three stacked horizontal bars. */
}
.radio-card-preview--list {
    background:
        linear-gradient(var(--color-border), var(--color-border)) 0 4px / 100% 1px no-repeat,
        linear-gradient(var(--color-border), var(--color-border)) 0 14px / 100% 1px no-repeat,
        linear-gradient(var(--color-border), var(--color-border)) 0 24px / 100% 1px no-repeat,
        var(--color-bg);
}
.radio-card-preview--grid {
    background:
        /* 2x3 grid drawn with two repeating linear gradients. */
        repeating-linear-gradient(90deg,
            var(--color-border) 0 1px, transparent 1px 12px),
        repeating-linear-gradient(0deg,
            var(--color-border) 0 1px, transparent 1px 10px),
        var(--color-bg);
}

/* Color picker (replaces native <input type="color"> look) */
.color-picker {
    display: flex;
    align-items: stretch;
    gap: 10px;
    margin-top: 4px;
}
.color-picker > input[type="color"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.color-picker-trigger {
    --swatch: #000000;
    position: relative;
    width: 44px;
    height: 44px;
    padding: 0;
    flex-shrink: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--swatch);
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.05s;
}
.color-picker-trigger::after {
    content: "";
    position: absolute;
    right: -3px;
    bottom: -3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='13.5' cy='6.5' r='1.5'/><circle cx='17.5' cy='10.5' r='1.5'/><circle cx='8.5' cy='7.5' r='1.5'/><circle cx='6.5' cy='12.5' r='1.5'/><path d='M12 22a10 10 0 1 1 10-10c0 1.5-.4 2.7-1.5 3.5-1 .7-2 1-3 1h-2.5a1.5 1.5 0 0 0 0 3 1.5 1.5 0 0 1 0 3'/><path d='M9 18.5c-.8.8-1.5 1.5-3 1.5'/></svg>");
    background-size: 11px 11px;
    background-position: center;
    background-repeat: no-repeat;
}
.color-picker-trigger:hover { border-color: var(--color-primary); }
.color-picker-trigger:active { transform: scale(0.97); }
.color-picker-trigger:focus-visible {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.18);
}
.color-picker-hex {
    flex: 1;
    min-width: 0;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.color-picker-hex:invalid {
    border-color: var(--color-danger);
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}

/* Tables (categories + products) */
.data-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
}
.data-table th,
.data-table td {
    padding: 12px 14px;
    text-align: left;
    border-bottom: 1px solid var(--color-border);
    font-size: 0.95rem;
}
.data-table th {
    background: var(--color-bg);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-muted);
    font-weight: 600;
}
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover { background: var(--color-bg); }
.data-table th.actions-cell,
.data-table td.actions-cell { text-align: right; }
.thumb-cell { width: 56px; }
.thumb {
    width: 48px;
    height: 48px;
    border-radius: 6px;
    object-fit: cover;
    display: block;
}
.thumb-empty {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
}

/* Buttons */
.btn-sm {
    padding: 6px 12px;
    font-size: 0.85rem;
}
.btn-danger {
    background: var(--color-danger);
    color: white;
    border-color: transparent;
}
.btn-danger:hover { background: #b91c1c; }

/* Badges */
.badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-left: 4px;
}
.badge-warn {
    background: #fef3c7;
    color: #92400e;
}

/* Empty state */
.empty-state {
    text-align: center;
    padding: 60px 20px;
    background: var(--color-surface);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-lg);
    max-width: 600px;
    margin: 0 auto;
}
.empty-state h2 {
    font-size: 1.25rem;
    margin: 0 0 8px;
}
.empty-state p { color: var(--color-muted); }

/* Menu (categories + products) overview */
.category-block {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 20px;
    margin-bottom: 16px;
}
.category-block-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.category-block-header h2 {
    font-size: 1.1rem;
    margin: 0 0 4px;
}
.category-block-desc {
    color: var(--color-muted);
    font-size: 0.9rem;
    margin: 0 0 4px;
}
.category-block-meta {
    color: var(--color-muted);
    font-size: 0.85rem;
    margin: 0;
}
.category-block-actions {
    display: flex;
    gap: 8px;
}
.category-block-actions form { margin: 0; }
.category-empty {
    text-align: center;
    color: var(--color-muted);
    padding: 16px;
    background: var(--color-bg);
    border-radius: var(--radius);
    margin: 0;
}

/* Dashboard footer note */
.dashboard-footer {
    margin-top: 32px;
    padding: 16px;
    border: 1px dashed var(--color-border);
    border-radius: var(--radius);
    color: var(--color-muted);
    text-align: center;
    font-size: 0.95rem;
}
.dashboard-footer strong { color: var(--color-text); }

/* Mobile */
@media (max-width: 768px) {
    .admin-body { grid-template-columns: 1fr; }
    .admin-sidebar {
        position: relative;
        height: auto;
        flex-direction: row;
        flex-wrap: wrap;
        padding: 12px;
    }
    .admin-brand { flex: 1; }
    .admin-stall-card { flex-basis: 100%; order: 99; }
    .admin-nav {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 4px;
    }
    .admin-nav a, .admin-nav-disabled { padding: 6px 10px; font-size: 0.85rem; }
    .admin-main { padding: 16px; }
}

/* ============================================================
   Public menu / cart / checkout  (Phase 5)
   Mobile-first; opens directly from WhatsApp on phones.
   ============================================================ */
.menu-body {
    background: var(--color-bg);
    padding-bottom: 96px; /* leave room for the floating cart bar */
}
.menu-header {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    color: white;
    padding: 18px 0;
    position: relative;
}
/* Banner variant: layer an uploaded image behind a darker scrim so text
   stays readable no matter what the photo looks like. The CSS variable
   `--banner-image` is set inline from the layout (only present when a
   banner was uploaded).
   Specificity note: the selector is deliberately `body.menu-body .menu-header
   .menu-header--banner` (0,3,1) so it wins against each template's
   `.menu-body[data-template="..."] .menu-header { background: ... }` rule
   (0,3,0). Without the bump, the `background` shorthand in the modern /
   minimal / bold blocks resets `background-image` to `none` and hides the
   banner. */
body.menu-body .menu-header.menu-header--banner {
    background-image:
        linear-gradient(180deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.35)),
        var(--banner-image);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 32px 0;
    /* minimal sets `color: var(--color-text)` and bold sets a coloured
       border-bottom — both look broken on top of a photo, so the banner
       variant re-asserts the readable defaults. */
    color: white;
    border: none;
}

/* minimal goes one step further and forces the title + description inside
   the header to dark/muted colours for its flat look. On top of a banner
   photo those would be unreadable, so we flip them to white here. The
   specificity chain is the same as the rule above (body + menu-body +
   .menu-header + .menu-header--banner + child) so it always wins against
   `.menu-body[data-template="minimal"] .menu-stall-name / .menu-stall-desc`. */
body.menu-body .menu-header.menu-header--banner .menu-stall-name,
body.menu-body .menu-header.menu-header--banner .menu-stall-desc {
    color: white;
}
body.menu-body .menu-header.menu-header--banner .menu-stall-desc {
    /* Restore the slight transparency the base rule applies — minimal
       forces opacity:1 for its flat look, but on a photo we want the
       description to recede like classic does. */
    opacity: 0.92;
}

/* Keep the header action buttons (Entrar / Crear cuenta / Carrito / etc.)
   compact and consistent regardless of whether a banner image is set. */
.menu-header .menu-action,
.menu-header .menu-cart-btn {
    gap: 5px;
}
.menu-header .menu-action-icon,
.menu-header .menu-cart-icon {
    width: 15px;
    height: 15px;
}
.menu-header .menu-action-icon svg,
.menu-header .menu-cart-icon svg {
    width: 15px;
    height: 15px;
}
.menu-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.menu-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    flex: 1 1 auto;
}
.menu-brand-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.menu-stall-name {
    font-size: 1.4rem;
    font-weight: 800;
    margin: 0;
    letter-spacing: -0.02em;
    line-height: 1.15;
}
.menu-stall-logo-wrap {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    /* The white ring is what the spec asked for; we draw it as an inset box
       shadow so it scales with the image without needing two nested tags. */
    box-shadow:
        0 0 0 3px #ffffff,
        0 4px 12px rgba(0, 0, 0, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.menu-stall-logo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.menu-stall-desc {
    margin: 0;
    opacity: 0.92;
    font-size: 0.92rem;
    line-height: 1.35;
}

/* Meta row under the stall name: stars + open/closed + closing time. */
.menu-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 8px;
    margin-top: 6px;
}
.menu-meta-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.18);
    color: white;
    line-height: 1.3;
    backdrop-filter: blur(2px);
}
.menu-meta-pill.menu-meta-open {
    background: rgba(16, 185, 129, 0.85);
}
.menu-meta-pill.menu-meta-closed {
    background: rgba(220, 38, 38, 0.78);
}
.menu-meta-pill.menu-meta-neutral {
    background: rgba(255, 255, 255, 0.18);
    opacity: 0.92;
    font-weight: 500;
}
.menu-meta-stars { font-variant-numeric: tabular-nums; }
.menu-meta-muted { opacity: 0.85; font-weight: 500; }
.menu-meta-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25);
    animation: menu-meta-pulse 1.8s ease-in-out infinite;
}
@keyframes menu-meta-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.4; }
}
.menu-stars {
    display: inline-flex;
    gap: 1px;
    font-size: 0.95rem;
    line-height: 1;
}
.menu-star {
    color: rgba(255, 255, 255, 0.45);
}
.menu-star-on { color: #fbbf24; }

/* Right-side action cluster (login/register/cart).
   All three share the same exact box so they line up perfectly:
   identical padding, identical border, identical height. The only
   thing that changes between them is the inner SVG icon. */
.menu-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.menu-action,
.menu-cart-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Identical box for every header action button. 22px icon + 8px
       padding-top + 8px padding-bottom + 2px border = 40px tall. */
    padding: 8px 12px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.88rem;
    line-height: 1;
    color: white;
    /* Outlined look: no fill, just a visible white border. Matches the
       icon style (stroke-only, no fill). */
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.65);
    text-decoration: none;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
    white-space: nowrap;
}
.menu-action:hover,
.menu-cart-btn:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.95);
    text-decoration: none;
    color: white;
}
.menu-action:focus-visible,
.menu-cart-btn:focus-visible {
    outline: none;
    border-color: #ffffff;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25);
}
.menu-action:active,
.menu-cart-btn:active { transform: scale(0.97); }
.menu-action-form { margin: 0; display: inline-flex; }

/* Every icon SVG inside an action button is forced to the same box so
   the buttons line up regardless of which icon is inside. */
.menu-action-icon,
.menu-cart-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    line-height: 0;
}
.menu-action-icon svg,
.menu-cart-icon svg {
    width: 22px;
    height: 22px;
    display: block;
}

.menu-cart-btn {
    /* No padding override — the badge is absolutely positioned outside
       the button, so the box stays identical to the auth buttons. */
    position: relative;
}
.menu-cart-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--color-accent);
    color: #1a1a1a;
    font-size: 0.72rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

/* Stack the action cluster under the brand on phones. The cart also
   drops its label so all 3 buttons stay the same height (icon-only). */
@media (max-width: 640px) {
    .menu-header-inner { flex-direction: column; align-items: stretch; }
    .menu-actions { justify-content: flex-end; }
    .menu-action-hideable { display: none; }
    .menu-action-label,
    .menu-cart-label   { display: none; }
    .menu-stall-logo-wrap { width: 56px; height: 56px; }
    .menu-stall-name { font-size: 1.25rem; }
}

/* When there's no banner the header sits flat against the page; when there
   IS a banner we reserve a bit more room so the meta pills stay legible. */
.menu-header--banner .menu-meta-pill {
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.18);
}
.menu-header--banner .menu-meta-pill.menu-meta-open {
    background: rgba(16, 185, 129, 0.92);
}
.menu-header--banner .menu-meta-pill.menu-meta-closed {
    background: rgba(220, 38, 38, 0.88);
}
.menu-header--banner .menu-stall-logo-wrap {
    background: rgba(0, 0, 0, 0.35);
}
.menu-main {
    padding: 24px 0;
}
.cat-nav {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    margin-bottom: 16px;
    padding-bottom: 4px;
    scrollbar-width: thin;
}
.cat-nav a {
    flex: 0 0 auto;
    padding: 8px 14px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    text-decoration: none;
    color: var(--color-text);
    font-size: 0.9rem;
    font-weight: 500;
}
.cat-nav a:hover { background: var(--color-bg); text-decoration: none; }
.menu-category {
    margin-bottom: 32px;
}
.menu-category-title {
    font-size: 1.25rem;
    margin: 0 0 4px;
    letter-spacing: -0.01em;
}
.menu-category-desc {
    color: var(--color-muted);
    font-size: 0.9rem;
    margin: 0 0 12px;
}
.menu-category-empty {
    color: var(--color-muted);
    font-style: italic;
    font-size: 0.9rem;
}
.product-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Grid layout — responsive. `auto-fill` + `minmax` makes the number of
   columns grow with the available width: 1 col on phones, 2 on tablets,
   3+ on desktop. Falls back to a single column below 480px so cards
   stay readable on small screens. */
.product-list--grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
}
@media (max-width: 480px) {
    .product-list--grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}
.product-list--grid .product-card {
    flex-direction: column;
    padding: 0;
    overflow: hidden;
}
.product-list--grid .product-img,
.product-list--grid .product-img-empty {
    width: 100%;
    height: 160px;
    border-radius: 0;
}
.product-list--grid .product-body {
    padding: 12px;
}

.product-card {
    display: flex;
    gap: 12px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 12px;
    align-items: stretch;
}
.product-img {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
    border-radius: 8px;
    object-fit: cover;
    background: var(--color-bg);
}
.product-img-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
}
.product-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.product-name {
    font-size: 1rem;
    margin: 0;
    font-weight: 600;
}
.product-desc {
    color: var(--color-muted);
    font-size: 0.85rem;
    margin: 0;
    line-height: 1.4;
}
.product-foot {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.product-price {
    font-weight: 700;
    color: var(--color-text);
}
.product-price-label {
    color: var(--color-muted);
    font-weight: 500;
    margin-right: 3px;
}
.product-price--unavailable {
    color: var(--color-muted);
    font-size: 0.88rem;
}
.btn-success {
    background: var(--color-success) !important;
}

/* Floating cart bar */
.cart-bar {
    position: fixed;
    bottom: 16px;
    left: 16px;
    right: 16px;
    z-index: 50;
    display: flex;
    justify-content: center;
    /* Slide-down + fade animation when the side drawer is open. The bar is
       pushed past the bottom edge (translateY 120% of its own height) and
       faded out. `pointer-events: none` prevents a stray click during the
       close animation from re-opening the drawer. */
    transition:
        transform 0.25s ease-out,
        opacity   0.2s  ease-out;
    will-change: transform, opacity;
}
.cart-bar.is-suppressed {
    transform: translateY(120%);
    opacity: 0;
    pointer-events: none;
}
.cart-bar-button {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: var(--color-primary);
    color: white;
    border: none;
    padding: 14px 22px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
    transition: transform 0.12s, background 0.15s;
    font-family: inherit;
}
.cart-bar-button:hover { background: var(--color-primary-dark); transform: translateY(-2px); }
.cart-bar-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    line-height: 0;
}
.cart-bar-icon svg {
    display: block;
    width: 20px;
    height: 20px;
}

/* Cart drawer */
.cart-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 420px;
    background: var(--color-surface);
    z-index: 60;
    box-shadow: -8px 0 24px rgba(0,0,0,0.18);
    display: flex;
    flex-direction: column;
    /* Closed state: slid out, faded, and non-interactive (visibility delays
       until the transform finishes so clicks remain possible during the
       close animation, then become blocked when it's actually offscreen). */
    transform: translateX(100%);
    opacity: 0;
    visibility: hidden;
    transition:
        transform 0.25s ease-out,
        opacity   0.2s  ease-out,
        visibility 0s    linear 0.25s;
}
.cart-drawer.is-open {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
    transition:
        transform 0.25s ease-out,
        opacity   0.2s  ease-out,
        visibility 0s    linear 0s;
}
@media (prefers-reduced-motion: reduce) {
    .cart-drawer,
    .cart-drawer.is-open,
    .cart-bar,
    .cart-bar.is-suppressed {
        transition-duration: 0.01s;
    }
}
.cart-drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--color-border);
}
.cart-drawer-header h2 { margin: 0; font-size: 1.1rem; }
.cart-close {
    background: none;
    border: none;
    font-size: 1.3rem;
    cursor: pointer;
    color: var(--color-muted);
    padding: 4px 10px;
    border-radius: 6px;
    font-family: inherit;
}
.cart-close:hover { background: var(--color-bg); color: var(--color-text); }
.cart-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
}
.cart-empty {
    color: var(--color-muted);
    text-align: center;
    margin-top: 40px;
}
.cart-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.cart-item {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    gap: 8px;
    align-items: center;
    padding: 12px;
    background: var(--color-bg);
    border-radius: var(--radius);
}
.cart-item-info { display: flex; flex-direction: column; gap: 2px; }
.cart-item-info strong { font-size: 0.95rem; }
.cart-item-price { color: var(--color-muted); font-size: 0.85rem; }
.cart-item-qty {
    display: flex;
    align-items: center;
    gap: 6px;
}
.cart-item-qty button {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    cursor: pointer;
    font-size: 1rem;
    font-family: inherit;
}
.cart-item-qty button:hover { background: var(--color-bg); }
.cart-item-qty span { min-width: 20px; text-align: center; font-weight: 600; }
.cart-item-sub { font-weight: 700; min-width: 60px; text-align: right; }
.cart-item-remove {
    background: none;
    border: none;
    color: var(--color-muted);
    cursor: pointer;
    font-size: 1rem;
    padding: 4px 8px;
    border-radius: 6px;
    font-family: inherit;
}
.cart-item-remove:hover { background: var(--color-danger); color: white; }
.cart-drawer-foot {
    border-top: 1px solid var(--color-border);
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.cart-total-row {
    display: flex;
    justify-content: space-between;
    font-size: 1.05rem;
}

/* Checkout page */
.back-link {
    display: inline-block;
    color: var(--color-muted);
    text-decoration: none;
    margin-bottom: 8px;
}
.back-link:hover { color: var(--color-primary); text-decoration: none; }
.checkout-title {
    font-size: 1.5rem;
    margin: 0 0 16px;
    letter-spacing: -0.02em;
}
.checkout-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.form-section {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 20px;
}
.form-section h2 {
    font-size: 1.05rem;
    margin: 0 0 12px;
    color: var(--color-primary);
}
.form-help {
    font-size: 0.85rem;
    color: var(--color-muted);
    margin: 6px 0 0;
}
.checkout-cart-preview {
    min-height: 40px;
}
.mini-cart {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.mini-cart li {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px dashed var(--color-border);
    font-size: 0.95rem;
}
.mini-cart li:last-child { border-bottom: none; }
.payment-info {
    background: var(--color-bg);
    padding: 12px;
    border-radius: var(--radius);
    margin-bottom: 12px;
    font-size: 0.95rem;
}
.payment-info p { margin: 4px 0; }
.receipt-preview {
    margin-top: 8px;
}
.receipt-preview img {
    max-width: 200px;
    max-height: 200px;
    border-radius: 8px;
    border: 1px solid var(--color-border);
}

/* Receipt uploader ----------------------------------------------- */
.receipt-uploader {
    display: block;
    margin-top: 6px;
}
.receipt-uploader .ru-drop {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 22px 16px;
    text-align: center;
    background:
        linear-gradient(135deg, rgba(255, 107, 53, 0.06), rgba(255, 182, 39, 0.06)),
        var(--color-surface);
    border: 2px dashed var(--color-border);
    border-radius: var(--radius);
    color: var(--color-muted);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, transform 0.1s;
}
.receipt-uploader .ru-drop:hover,
.receipt-uploader .ru-drop:focus-within {
    border-color: var(--color-primary);
    color: var(--color-text);
}
.receipt-uploader .ru-drop.is-dragover {
    border-color: var(--color-primary);
    background:
        linear-gradient(135deg, rgba(255, 107, 53, 0.14), rgba(255, 182, 39, 0.14)),
        var(--color-surface);
    transform: scale(1.01);
}
.receipt-uploader .ru-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 107, 53, 0.12);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
}
.receipt-uploader .ru-title {
    font-weight: 600;
    color: var(--color-text);
    font-size: 0.95rem;
}
.receipt-uploader .ru-title b {
    color: var(--color-primary);
    font-weight: 700;
}
.receipt-uploader .ru-hint {
    font-size: 0.8rem;
    color: var(--color-muted);
}
.receipt-uploader input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}
.receipt-uploader .ru-error {
    margin-top: 8px;
    color: var(--color-danger);
    font-size: 0.85rem;
}
.receipt-preview-card {
    margin-top: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
}
.receipt-preview-card .ru-thumb {
    width: 64px;
    height: 64px;
    border-radius: 8px;
    background-color: var(--color-bg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    flex: 0 0 auto;
    border: 1px solid var(--color-border);
}
.receipt-preview-card .ru-meta {
    flex: 1;
    min-width: 0;
    line-height: 1.3;
}
.receipt-preview-card .ru-name {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.receipt-preview-card .ru-sub {
    font-size: 0.8rem;
    color: var(--color-muted);
}
.receipt-preview-card .ru-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}
.receipt-preview-card .ru-change,
.receipt-preview-card .ru-remove {
    background: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-text);
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    font-family: inherit;
    line-height: 1.2;
}
.receipt-preview-card .ru-change:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}
.receipt-preview-card .ru-remove {
    width: 32px;
    height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-muted);
}
.receipt-preview-card .ru-remove:hover {
    background: rgba(220, 38, 38, 0.08);
    border-color: var(--color-danger);
    color: var(--color-danger);
}
.receipt-preview-card .ru-remove svg {
    width: 14px;
    height: 14px;
    display: block;
}
.checkout-total-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 16px 20px;
    font-size: 1.15rem;
}
.checkout-total-row strong { font-size: 1.4rem; }

/* Logged-in customer hint inside "Tus datos" */
.checkout-account-hint {
    margin: -4px 0 14px;
    padding: 10px 12px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: 0.9rem;
    color: var(--color-text);
}
.checkout-account-hint strong {
    color: var(--color-primary-dark);
}

/* Thank-you */
.thank-you {
    max-width: 540px;
    margin: 0 auto;
    text-align: center;
}
.thank-you-icon { font-size: 3rem; margin-bottom: 8px; }
.thank-you h1 { font-size: 1.6rem; margin: 0 0 8px; }
.thank-you-sub { color: var(--color-muted); margin: 0 0 24px; }
.receipt-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 20px;
    text-align: left;
    margin-bottom: 24px;
}
.receipt-card h2 {
    font-size: 1.05rem;
    margin: 0 0 12px;
    color: var(--color-primary);
}
.thank-you-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-top: 12px;
    border-top: 1px solid var(--color-border);
    margin-top: 8px;
    font-size: 1.1rem;
}
.thank-you-total strong { font-size: 1.3rem; }
.receipt-image { margin-top: 16px; }
.receipt-image img {
    max-width: 240px;
    max-height: 320px;
    border-radius: 8px;
    border: 1px solid var(--color-border);
    display: block;
    margin: 0 auto;
}
.whatsapp-btn {
    background: #25d366;
    font-size: 1.05rem;
    padding: 16px 24px;
}
.whatsapp-btn:hover { background: #1ebe57; }

/* "Attention-grabbing" state — used while step 1 of the stepper is the
   current step and the customer hasn't clicked yet. The expanding green
   halo + tiny scale bump nudges them toward the CTA without being annoying. */
.whatsapp-btn--cta {
    animation: whatsapp-cta-attention 1.6s ease-in-out infinite;
}
@keyframes whatsapp-cta-attention {
    0%, 100% {
        box-shadow: 0 0 0   0 rgba(37, 211, 102, 0.55);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 0 14px rgba(37, 211, 102, 0);
        transform: scale(1.02);
    }
}

/* "Sent" state — used after the customer has clicked WhatsApp (or after
   the merchant has responded, which implies the flow already started).
   The button de-emphasizes so it doesn't keep competing for attention. */
.whatsapp-btn--sent {
    background: transparent;
    color: #065f46;
    border: 1.5px solid #10b981;
    cursor: default;
    animation: none;
}
.whatsapp-btn--sent:hover { background: transparent; }

/* Respect users who don't want motion. */
@media (prefers-reduced-motion: reduce) {
    .order-step--current .order-step-dot { animation: none; }
    .whatsapp-btn--cta { animation: none; }
    .review-cta--visible { animation: none; }
}
.thank-you-hint {
    font-size: 0.85rem;
    color: var(--color-muted);
    margin-top: 12px;
}
.thank-you-foot { margin-top: 24px; }
.muted { color: var(--color-muted); }

/* Order status stepper (live-tracked on the thank-you page) ----------- */
.order-status {
    background: var(--color-card, #fff);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 16px 20px;
    margin: 8px 0 20px;
}
.order-status-title {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-muted);
    margin: 0 0 12px;
}
.order-stepper {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: relative;
}
.order-step {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    color: var(--color-muted);
    position: relative;
}
.order-step::before {
    /* Vertical connector between steps. */
    content: "";
    position: absolute;
    left: 14px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--color-border);
    z-index: 0;
}
.order-step:first-child::before { top: 50%; }
.order-step:last-child::before { bottom: 50%; }
.order-step-dot {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--color-card, #fff);
    border: 2px solid var(--color-border);
    color: var(--color-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.85rem;
    z-index: 1;
    flex-shrink: 0;
}
.order-step-label {
    font-size: 0.95rem;
}
.order-step--done {
    color: var(--color-text);
}
.order-step--done .order-step-dot {
    background: #d1fae5;
    border-color: #10b981;
    color: #065f46;
}
.order-step--current {
    color: var(--color-text);
    font-weight: 600;
}
.order-step--current .order-step-dot {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
    /* Subtle "in process" pulse. Long cycle + small amplitude so it doesn't
       distract from the page (the customer may leave the tab open). */
    box-shadow: 0 0 0 4px rgba(255, 107, 53, 0.22);
    animation: step-current-pulse 2.4s ease-in-out infinite;
}
@keyframes step-current-pulse {
    0%, 100% { box-shadow: 0 0 0  4px rgba(255, 107, 53, 0.22); }
    50%      { box-shadow: 0 0 0 10px rgba(255, 107, 53, 0.04); }
}
.order-status-note {
    margin: 8px 0 0;
}

/* Review CTA card ---------------------------------------------------- */
.review-cta {
    background: var(--color-card, #fff);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 20px;
    margin: 8px 0 20px;
    text-align: center;
}
.review-cta h3 {
    margin: 4px 0 8px;
    font-size: 1.15rem;
}
.review-cta p {
    margin: 0 0 12px;
    color: var(--color-muted);
}
.review-cta-icon {
    font-size: 2rem;
    margin-bottom: 4px;
}
.review-cta--visible {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.1);
    animation: review-cta-pop 0.4s ease-out;
}
@keyframes review-cta-pop {
    from { transform: scale(0.96); opacity: 0; }
    to   { transform: scale(1);    opacity: 1; }
}

@media (max-width: 480px) {
    .cart-item {
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto;
    }
    .cart-item-sub { grid-column: 1; text-align: left; }
    .cart-item-remove { grid-row: 1; grid-column: 2; justify-self: end; }
}

/* ============================================================
   KDS — Kitchen Display System (Phase 6)
   ============================================================ */
.kds-section-title {
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-muted);
    margin: 24px 0 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.kds-section-recent { margin-top: 32px; }
.kds-count {
    background: var(--color-bg);
    color: var(--color-muted);
    border: 1px solid var(--color-border);
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
}

.kds-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}

.kds-card {
    background: var(--color-surface);
    border: 2px solid var(--color-border);
    border-left-width: 6px;
    border-radius: var(--radius);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: border-color 0.3s, box-shadow 0.2s;
}
.kds-card.age-green  { border-color: var(--color-success); border-left-color: var(--color-success); }
.kds-card.age-yellow { border-color: #d97706;        border-left-color: #d97706; }
.kds-card.age-red    { border-color: var(--color-danger); border-left-color: var(--color-danger); animation: pulse-red 2s infinite; }

@keyframes pulse-red {
    0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
    50%      { box-shadow: 0 0 0 6px rgba(220, 38, 38, 0.08); }
}

.order-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}
.order-number {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--color-primary);
    margin: 0 0 4px;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
.order-customer {
    font-size: 0.95rem;
    margin: 0;
    line-height: 1.3;
}
.order-customer .mut { color: var(--color-muted); font-size: 0.85rem; }

.order-elapsed {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    flex-shrink: 0;
}
.elapsed-value {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
.kds-card.age-green  .elapsed-value { color: var(--color-success); }
.kds-card.age-yellow .elapsed-value { color: #d97706; }
.kds-card.age-red    .elapsed-value { color: var(--color-danger); }
.elapsed-label {
    color: var(--color-muted);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.order-card-body {
    flex: 1;
    font-size: 0.9rem;
}
.order-items-mini {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.order-items-mini li {
    color: var(--color-text);
    padding: 2px 0;
}
.order-notes {
    margin: 6px 0 0;
    padding: 6px 8px;
    background: var(--color-bg);
    border-radius: 6px;
    font-size: 0.85rem;
    color: var(--color-muted);
}

/* Per-item specs: selected option groups + per-line observations.
   Used in both the detail table and the KDS dashboard cards. */
.item-name { font-weight: 600; }
.item-specs,
.item-specs-mini {
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
    font-size: 0.85rem;
    color: var(--color-muted);
}
.item-specs-mini {
    margin-top: 2px;
    padding-left: 14px;
    border-left: 2px solid var(--color-border, #e5e7eb);
}
.item-specs li,
.item-specs-mini li {
    padding: 1px 0;
}
.item-specs .spec-group,
.item-specs-mini .spec-group {
    font-weight: 600;
    color: var(--color-text);
}
.spec-notes {
    color: var(--color-text);
    font-style: italic;
}

.order-card-foot {
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-top: 1px solid var(--color-border);
    padding-top: 10px;
}
.order-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.order-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.kds-action-form { margin: 0; }

.badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid transparent;
}
.badge-warn { background: #fef3c7; color: #92400e; }
.badge-green {
    background: #f0fdf4;
    color: #166534;
    border-color: #bbf7d0;
}
.badge-yellow {
    background: #fef3c7;
    color: #92400e;
    border-color: #fde68a;
}
.badge-red {
    background: #fef2f2;
    color: #991b1b;
    border-color: #fecaca;
}
.badge-mode {
    background: #ede9fe;
    color: #5b21b6;
}
.badge-receipt {
    background: var(--color-success);
    color: white;
}
.badge-receipt:hover { opacity: 0.85; text-decoration: none; }

/* Status badges */
.badge-status { text-transform: capitalize; }
.badge-status.badge-pending    { background: #fef3c7; color: #92400e; }
.badge-status.badge-confirmed  { background: #dbeafe; color: #1e40af; }
.badge-status.badge-preparing  { background: #e0e7ff; color: #3730a3; }
.badge-status.badge-ready      { background: #d1fae5; color: #065f46; }
.badge-status.badge-delivered  { background: #f3f4f6; color: #4b5563; }
.badge-status.badge-cancelled  { background: #fee2e2; color: #991b1b; }
.badge-status.badge-verified   { background: #d1fae5; color: #065f46; }
.badge-status.badge-rejected   { background: #fee2e2; color: #991b1b; }

/* Recent orders list */
.kds-recent-list {
    list-style: none;
    margin: 0;
    padding: 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
}
.kds-recent-link {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    gap: 12px;
    align-items: center;
    padding: 10px 14px;
    border-bottom: 1px solid var(--color-border);
    text-decoration: none;
    color: var(--color-text);
    transition: background 0.12s;
}
.kds-recent-list li:last-child .kds-recent-link { border-bottom: none; }
.kds-recent-link:hover { background: var(--color-bg); text-decoration: none; }
.kds-recent-num   { font-family: ui-monospace, monospace; font-weight: 600; color: var(--color-primary); }
.kds-recent-cust  { font-size: 0.95rem; }
.kds-recent-total { font-weight: 600; }

/* Order detail page */
.order-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}
@media (max-width: 768px) {
    .order-detail-grid { grid-template-columns: 1fr; }
}
.order-detail-list {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 6px 14px;
    margin: 0;
}
.order-detail-list dt {
    color: var(--color-muted);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    align-self: center;
}
.order-detail-list dd { margin: 0; }
.ta-r { text-align: right; }
.receipt-thumb {
    max-width: 200px;
    max-height: 240px;
    border-radius: 8px;
    border: 1px solid var(--color-border);
    display: block;
}
.order-actions-detail {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.mut { color: var(--color-muted); }
.small { font-size: 0.85rem; }
.mut.small code {
    background: var(--color-bg);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.8em;
}

/* ============================================================
   Reviews — Phase 7
   ============================================================ */

/* Star rating (interactive + static) */
.review-stars {
    display: inline-flex;
    gap: 4px;
    font-size: 2rem;
    line-height: 1;
}
.review-stars-static {
    font-size: 1.25rem;
}
.review-stars-sm {
    font-size: 0.95rem;
}
.star, .star-btn {
    color: #d1d5db;
    background: none;
    border: none;
    cursor: pointer;
    font-size: inherit;
    line-height: 1;
    padding: 0;
    font-family: inherit;
    transition: color 0.1s, transform 0.1s;
}
.star-btn:hover { transform: scale(1.15); }
.star-on { color: #f59e0b; }

/* Review page */
.review-page {
    padding: 40px 0;
    min-height: 60vh;
}
.review-page .container.narrow {
    max-width: 540px;
}
.review-page .container.narrow.center {
    text-align: center;
}
.review-page h1 {
    font-size: 1.75rem;
    margin: 0 0 12px;
    letter-spacing: -0.02em;
}
.review-page .eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.78rem;
    color: var(--color-primary);
    font-weight: 600;
    margin: 0 0 8px;
}
.review-page .tagline {
    color: var(--color-muted);
    margin-bottom: 24px;
}
.review-form {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.review-summary {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 24px;
    text-align: center;
    margin: 24px 0;
}
.review-summary .review-stars-static { font-size: 1.75rem; }
.review-comment {
    margin: 16px 0;
    padding: 12px 16px;
    background: var(--color-bg);
    border-left: 3px solid var(--color-primary);
    border-radius: 6px;
    font-style: italic;
    color: var(--color-text);
}
.thanks-icon {
    font-size: 3rem;
    margin-bottom: 8px;
}

/* Rating distribution (admin) */
.rating-distribution {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 16px 20px;
    margin-bottom: 24px;
    max-width: 480px;
}
.rating-row {
    display: grid;
    grid-template-columns: 36px 1fr 36px;
    gap: 12px;
    align-items: center;
    margin: 4px 0;
    font-size: 0.9rem;
}
.rating-label { color: var(--color-muted); font-weight: 600; }
.rating-bar {
    background: var(--color-bg);
    border-radius: 999px;
    height: 8px;
    overflow: hidden;
}
.rating-fill {
    background: #f59e0b;
    height: 100%;
    transition: width 0.3s;
}
.rating-count {
    text-align: right;
    color: var(--color-muted);
    font-variant-numeric: tabular-nums;
}

/* Admin review list */
.review-admin-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.review-admin-item {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 16px 20px;
}
.review-admin-item.is-hidden {
    background: repeating-linear-gradient(
        -45deg,
        var(--color-surface),
        var(--color-surface) 8px,
        #fef3c7 8px,
        #fef3c7 9px
    );
}
.review-admin-header {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.review-admin-meta {
    color: var(--color-muted);
    font-size: 0.85rem;
    flex: 1;
}
.review-admin-comment {
    margin: 8px 0;
    color: var(--color-text);
}
.review-admin-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

/* Reviews on the public menu */
.menu-reviews {
    margin-top: 48px;
    padding-top: 32px;
    border-top: 1px solid var(--color-border);
}
.menu-reviews-title {
    font-size: 1.15rem;
    margin: 0 0 16px;
    color: var(--color-text);
}
.menu-reviews-summary {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding: 14px 18px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}
.menu-reviews-avg {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--color-text);
    line-height: 1;
}
.menu-reviews-stars { font-size: 1.1rem; }
.menu-reviews-count {
    color: var(--color-muted);
    font-size: 0.9rem;
    margin-left: auto;
}
.menu-reviews-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.menu-review {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 14px 18px;
}
.menu-review-text {
    margin: 8px 0 6px;
    font-style: italic;
    color: var(--color-text);
}
.menu-review-author {
    margin: 0;
    color: var(--color-muted);
    font-size: 0.85rem;
}

/* Reviews nav badge (dashboard stat) */
.stat-value small {
    font-size: 0.55em;
    color: #f59e0b;
    vertical-align: middle;
}
.stat-help { font-size: 0.8rem; color: var(--color-muted); margin: 4px 0 0; }

/* ============================================================
   Product options modal (Phase 8)
   ============================================================ */
.pmodal-open { overflow: hidden; }

.pmodal {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: none;
    align-items: flex-end;
    justify-content: center;
}
.pmodal.is-open { display: flex; }

@media (min-width: 640px) {
    .pmodal { align-items: center; }
}

.pmodal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    animation: pmodal-fade 0.18s ease-out;
}
.pmodal-panel {
    position: relative;
    width: 100%;
    max-width: 520px;
    max-height: 92dvh;
    background: var(--color-surface);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: pmodal-slide 0.22s ease-out;
}
@media (min-width: 640px) {
    .pmodal-panel {
        border-radius: 16px;
        max-height: 88vh;
    }
}
@keyframes pmodal-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes pmodal-slide {
    from { transform: translateY(20px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .pmodal-backdrop, .pmodal-panel { animation: none; }
}

.pmodal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--color-border);
}
.pmodal-title { margin: 0; font-size: 1.1rem; }
.pmodal-close {
    background: none;
    border: none;
    font-size: 1.3rem;
    color: var(--color-muted);
    cursor: pointer;
    padding: 4px 10px;
    border-radius: 6px;
    font-family: inherit;
    line-height: 1;
}
.pmodal-close:hover { background: var(--color-bg); color: var(--color-text); }

.pmodal-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.pmodal-desc {
    margin: 0;
    color: var(--color-muted);
    font-size: 0.92rem;
    line-height: 1.45;
}
.pmodal-price-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 8px 12px;
    background: var(--color-bg);
    border-radius: 8px;
    font-size: 0.95rem;
}

.pmodal-group {
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 12px 14px 14px;
    margin: 0;
    background: var(--color-bg);
}
.pmodal-group.is-invalid {
    border-color: var(--color-danger);
    background: #fef2f2;
}
.pmodal-group legend {
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0 4px;
    color: var(--color-text);
}
.pmodal-req {
    color: var(--color-danger);
    font-weight: 600;
    font-size: 0.78rem;
    margin-left: 6px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.pmodal-optional {
    color: var(--color-muted);
    font-size: 0.78rem;
    margin-left: 6px;
    font-weight: 500;
}
.pmodal-values {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
}
.pmodal-value {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface);
    cursor: pointer;
    font-size: 0.95rem;
    transition: background 0.12s, border-color 0.12s;
}
.pmodal-value:hover { background: var(--color-bg); }
.pmodal-value input { accent-color: var(--color-primary); }
.pmodal-value > span {
    display: flex;
    flex: 1;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}
.pmodal-value input:checked + span { font-weight: 600; }
.pmodal-extra {
    color: var(--color-primary);
    font-weight: 600;
    margin-left: auto;
    font-size: 0.88rem;
}
.pmodal-help {
    margin: 8px 0 0;
    font-size: 0.82rem;
    color: var(--color-danger);
}
.pmodal-group.is-invalid .pmodal-help { display: block; }
.pmodal-group:not(.is-invalid) .pmodal-help { display: none; }

.pmodal-quantity {
    margin-top: 8px;
    margin-bottom: 8px;
}

.pmodal-notes textarea {
    width: 100%;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 8px 10px;
    font-family: inherit;
    font-size: 0.95rem;
    resize: vertical;
    background: var(--color-surface);
}

.pmodal-foot {
    padding: 14px 18px;
    border-top: 1px solid var(--color-border);
    background: var(--color-surface);
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.pmodal-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 1.1rem;
}

/* Cart item extras (selected options / notes) */
.cart-item-info {
    min-width: 0; /* allow wrapping inside grid */
}
.cart-item-opts {
    font-size: 0.78rem;
    color: var(--color-muted);
    margin-top: 2px;
    line-height: 1.35;
}
.cart-item-opts small {
    color: var(--color-primary);
    font-weight: 600;
}
.cart-item-notes {
    font-size: 0.78rem;
    color: var(--color-text);
    background: var(--color-bg);
    padding: 2px 6px;
    border-radius: 4px;
    margin-top: 4px;
    display: inline-block;
}

/* Admin: option group editor inside product form */
.opt-group-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 14px;
    margin-bottom: 14px;
    background: var(--color-bg);
}
.opt-group-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    flex-wrap: wrap;
    gap: 8px;
}
.opt-group-head h4 { margin: 0; font-size: 1rem; }
.opt-values {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 8px;
}
.opt-value-row {
    display: grid;
    grid-template-columns: 1fr 110px 32px;
    gap: 6px;
    align-items: center;
}
.opt-value-row input {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-surface);
    font-family: inherit;
}
.opt-add-value {
    display: flex;
    gap: 6px;
    align-items: center;
}
.opt-add-value input,
.opt-add-value select {
    padding: 6px 8px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-surface);
    font-family: inherit;
}
.opt-add-value .opt-name { flex: 1; }
.opt-add-value .opt-extra { width: 90px; }
.opt-empty {
    color: var(--color-muted);
    font-size: 0.85rem;
    margin: 4px 0 8px;
}
@media (max-width: 520px) {
    .cart-item {
        grid-template-columns: 1fr auto auto;
        grid-template-areas:
            "info info info"
            "qty qty remove"
            "sub sub sub";
    }
    .cart-item-info { grid-area: info; }
    .cart-item-qty  { grid-area: qty; justify-self: start; }
    .cart-item-sub  { grid-area: sub; text-align: right; }
    .cart-item-remove { grid-area: remove; justify-self: end; }
}

/* ============================================================
   Per-stall menu templates
   Driven by `<body class="menu-body" data-template="...">`
   (set in resources/views/layouts/menu.php from ui_preferences).
   Each block redefines typography / radius / borders / shadows
   on top of the color tokens already injected as CSS variables.
   ============================================================ */

/* classic — the default look, no overrides needed. */
.menu-body[data-template="classic"] {
    /* intentionally blank: keep current styling */
}

/* modern — soft, rounded, depth. */
.menu-body[data-template="modern"] .menu-header {
    background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
    padding: 32px 0;
}
.menu-body[data-template="modern"] .product-card,
.menu-body[data-template="modern"] .cat-nav a {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}
.menu-body[data-template="modern"] .product-card {
    border-color: transparent;
}
.menu-body[data-template="modern"] .menu-category-title {
    font-size: 1.5rem;
}
.menu-body[data-template="modern"] .btn-primary {
    border-radius: var(--radius-lg);
}

/* minimal — flat, sharp, monochrome with primary as an accent only. */
.menu-body[data-template="minimal"] {
    --color-bg: #ffffff;
}
.menu-body[data-template="minimal"] .menu-header {
    background: #ffffff;
    color: var(--color-text);
    border-bottom: 1px solid var(--color-border);
}
.menu-body[data-template="minimal"] .menu-header,
.menu-body[data-template="minimal"] .menu-stall-name,
.menu-body[data-template="minimal"] .menu-stall-desc {
    color: var(--color-text);
}
.menu-body[data-template="minimal"] .menu-stall-desc { opacity: 1; color: var(--color-muted); }
.menu-body[data-template="minimal"] .product-card,
.menu-body[data-template="minimal"] .cat-nav a,
.menu-body[data-template="minimal"] .btn-primary {
    border-radius: 0;
    box-shadow: none;
}
.menu-body[data-template="minimal"] .btn-primary {
    background: var(--color-text);
}
.menu-body[data-template="minimal"] .btn-primary:hover {
    background: var(--color-primary);
}
.menu-body[data-template="minimal"] .menu-category-title {
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    font-size: 0.95rem;
    color: var(--color-muted);
}

/* bold — chunky borders, oversized type, strong color blocks. */
.menu-body[data-template="bold"] .menu-header {
    background: var(--color-primary);
    padding: 36px 0;
    border-bottom: 6px solid var(--color-text);
}
.menu-body[data-template="bold"] .menu-stall-name {
    font-size: 2rem;
    text-transform: uppercase;
    letter-spacing: -0.03em;
}
.menu-body[data-template="bold"] .menu-category-title {
    font-size: 1.6rem;
    text-transform: uppercase;
    border-bottom: 4px solid var(--color-primary);
    padding-bottom: 6px;
}
.menu-body[data-template="bold"] .product-card,
.menu-body[data-template="bold"] .cat-nav a,
.menu-body[data-template="bold"] .btn-primary {
    border: 3px solid var(--color-text);
    border-radius: 0;
    box-shadow: 6px 6px 0 var(--color-text);
}
.menu-body[data-template="bold"] .product-card:hover {
    transform: translate(-2px, -2px);
    box-shadow: 8px 8px 0 var(--color-text);
}
.menu-body[data-template="bold"] .btn-primary {
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 800;
}
.menu-body[data-template="bold"] .product-name {
    font-size: 1.15rem;
    font-weight: 800;
}

/* ============================================================
   SuperAdmin · Stalls panel
   ============================================================ */
.superadmin-body .admin-sidebar {
    background: linear-gradient(180deg, #1f2937 0%, #111827 100%);
    color: #e5e7eb;
    border-right: none;
}
.superadmin-body .admin-brand { color: #fff; text-decoration: none; }
.superadmin-body .admin-brand:hover { text-decoration: none; }
.superadmin-body .admin-brand-tag {
    background: var(--color-primary);
    color: #fff;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-left: 8px;
}
.superadmin-body .admin-stall-card {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.superadmin-body .admin-stall-card .admin-stall-label { color: rgba(255, 255, 255, 0.6); }
.superadmin-body .admin-stall-card .admin-stall-name  { color: #fff; }
.superadmin-body .admin-stall-card .admin-stall-link  { color: rgba(255, 255, 255, 0.7); }
.superadmin-body .admin-nav a {
    color: rgba(255, 255, 255, 0.75);
    border-left-color: transparent;
}
.superadmin-body .admin-nav a:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    text-decoration: none;
}
.superadmin-body .admin-nav a.active {
    background: rgba(255, 107, 53, 0.18);
    color: #fff;
    border-left-color: var(--color-primary);
}
.superadmin-body .admin-nav a[aria-disabled="true"] {
    opacity: 0.55;
    pointer-events: none;
}
.superadmin-body .nav-soon {
    display: inline-block;
    margin-left: 4px;
    padding: 1px 6px;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.superadmin-body .admin-sidebar-foot a,
.superadmin-body .admin-sidebar-foot .link-button {
    color: rgba(255, 255, 255, 0.6);
}
.superadmin-body .admin-sidebar-foot a:hover,
.superadmin-body .admin-sidebar-foot .link-button:hover {
    color: #fff;
    text-decoration: none;
}

/* Page header with actions on the right ------------------- */
.page-header--row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}
.page-header--row .header-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* Dash card as a link -------------------------------------- */
.dash-card--link {
    display: block;
    color: var(--color-text);
    text-decoration: none;
}
.dash-card--link:hover { text-decoration: none; }
.dash-card-cta {
    display: inline-block;
    margin-top: 12px;
    color: var(--color-primary);
    font-weight: 600;
    font-size: 0.9rem;
}

/* Stalls toolbar ------------------------------------------- */
.stalls-toolbar {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    align-items: center;
}
.stalls-toolbar__search { flex: 1 1 280px; }
.stalls-toolbar__search input,
.stalls-toolbar__filter select {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    font-size: 0.95rem;
}
.stalls-toolbar__filter {
    display: flex;
    gap: 8px;
    align-items: center;
}
.stalls-toolbar__filter select { width: auto; min-width: 140px; }

/* Stalls table --------------------------------------------- */
.stalls-table-wrap {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
}
.stalls-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}
.stalls-table thead th {
    background: var(--color-bg);
    text-align: left;
    padding: 12px 16px;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-muted);
    border-bottom: 1px solid var(--color-border);
}
.stalls-table tbody td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--color-border);
    vertical-align: top;
}
.stalls-table tbody tr:last-child td { border-bottom: none; }
.stalls-table tbody tr:hover { background: var(--color-bg); }
.stalls-table th.num, .stalls-table td.num { text-align: right; }
.stalls-table .actions-col { white-space: nowrap; width: 1%; }
.stall-name {
    font-weight: 600;
    color: var(--color-text);
    text-decoration: none;
}
.stall-name:hover { color: var(--color-primary); text-decoration: none; }
.stall-slug {
    display: inline-block;
    margin-top: 4px;
    padding: 1px 6px;
    background: var(--color-bg);
    border-radius: 4px;
    font-size: 0.78rem;
    color: var(--color-muted);
}
.stall-domain {
    display: block;
    margin-top: 4px;
    color: var(--color-muted);
}
.stall-owner strong { display: block; font-weight: 600; }
.stall-owner small  { display: block; color: var(--color-muted); font-size: 0.82rem; }
.stall-stats {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    justify-content: flex-end;
    font-size: 0.85rem;
    color: var(--color-text);
}
.stall-stats span { white-space: nowrap; }
.stall-stats small { color: var(--color-muted); margin-left: 2px; }

.row-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-left: 4px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    color: var(--color-text);
    text-decoration: none;
    cursor: pointer;
    font-size: 1rem;
    transition: background 0.15s, border-color 0.15s;
}
.row-action:hover {
    background: var(--color-bg);
    border-color: var(--color-primary);
    text-decoration: none;
}
.row-action--danger:hover {
    background: #fef2f2;
    border-color: var(--color-danger);
}
.inline-form { display: inline; margin: 0; }

/* Status pills --------------------------------------------- */
.status-pill {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    vertical-align: middle;
}
.status-pill--ok  { background: #dcfce7; color: #166534; }
.status-pill--off { background: #fee2e2; color: #991b1b; }

/* Pagination ----------------------------------------------- */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 24px;
    padding: 12px;
}
.page-link {
    padding: 8px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-text);
    text-decoration: none;
}
.page-link:hover { border-color: var(--color-primary); text-decoration: none; }
.page-info { color: var(--color-muted); font-size: 0.9rem; }

/* Info cards (detail view) ---------------------------------- */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}
.info-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 20px 22px;
}
.info-card h3 {
    margin: 0 0 12px;
    font-size: 0.95rem;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.info-card--wide { grid-column: 1 / -1; }
.info-list {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 8px 16px;
    margin: 0;
}
.info-list dt { color: var(--color-muted); font-size: 0.85rem; }
.info-list dd { margin: 0; color: var(--color-text); font-size: 0.95rem; word-break: break-word; }
.metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
}
.metric {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 14px 16px;
    text-align: center;
}
.metric span  { display: block; color: var(--color-muted); font-size: 0.78rem; margin-bottom: 4px; }
.metric strong { display: block; font-size: 1.5rem; font-weight: 700; }

.action-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

/* Form sections -------------------------------------------- */
.form-section {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 24px;
    margin-bottom: 16px;
}
.form-section h2 {
    margin: 0 0 16px;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-primary);
}
.form-section .field-row,
.form-section .field { margin-bottom: 16px; }
.field--checkbox,
.field--radio {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    cursor: pointer;
}
.field--checkbox input[type="checkbox"],
.field--radio input[type="radio"] {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    flex-shrink: 0;
    cursor: pointer;
}
.field--checkbox span,
.field--radio span { display: block; }
.field--checkbox strong,
.field--radio strong { font-weight: 600; }
.owner-mode {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}
.owner-new-fields {
    border: 1px dashed var(--color-border);
    border-radius: var(--radius);
    padding: 16px 20px;
    margin-top: 16px;
}
.owner-new-fields legend {
    padding: 0 8px;
    color: var(--color-muted);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Buttons: danger / warning variants ------------------------ */
.btn-warning {
    background: #f59e0b;
    color: white;
    border-color: transparent;
}
.btn-warning:hover { background: #d97706; }

/* Responsive: stack the table on small screens -------------- */
@media (max-width: 768px) {
    .stalls-table thead { display: none; }
    .stalls-table tbody td {
        display: block;
        padding: 8px 16px;
        border-bottom: none;
    }
    .stalls-table tbody tr {
        display: block;
        border-bottom: 1px solid var(--color-border);
        padding: 12px 0;
    }
    .stalls-table .num { text-align: left; }
    .stalls-table td.actions-col {
        border-top: 1px dashed var(--color-border);
        padding-top: 10px;
    }
    .stall-stats { justify-content: flex-start; }
}

/* ============================================================
   SuperAdmin · Users panel (role pills, self-tag, alerts)
   ============================================================ */
.role-pill {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    vertical-align: middle;
}
.role-pill--super    { background: #fef3c7; color: #92400e; }   /* amber  */
.role-pill--local    { background: #dbeafe; color: #1e40af; }   /* blue   */
.role-pill--customer { background: #f3f4f6; color: #374151; }   /* gray   */
.role-pill--unknown  { background: #fee2e2; color: #991b1b; }   /* red    */

.self-tag {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 8px;
    background: var(--color-primary);
    color: #fff;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    vertical-align: middle;
}

.alert-info {
    background: #eff6ff;
    color: #1e40af;
    border: 1px solid #bfdbfe;
    padding: 12px 16px;
    border-radius: var(--radius);
    margin-bottom: 16px;
    max-width: 900px;
}
.alert-info::before {
    content: none;
}

/* ============================================================
   SuperAdmin · Metrics dashboard
   ============================================================ */
.metrics-range {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 8px 14px;
}
.metrics-range label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    color: var(--color-muted);
}
.metrics-range select {
    padding: 6px 10px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-surface);
    font-size: 0.95rem;
}

/* KPI grid (header cards) ------------------------------- */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: 12px;
}
.kpi-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.kpi-card--link {
    color: var(--color-text);
    text-decoration: none;
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.kpi-card--link:hover {
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: var(--shadow);
    border-color: var(--color-primary);
}
.kpi-card--accent {
    background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
    border-color: #fed7aa;
}
.kpi-label {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-muted);
    font-weight: 600;
}
.kpi-value {
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.1;
}
.kpi-value small { font-size: 0.9rem; font-weight: 500; color: var(--color-muted); }
.kpi-help {
    font-size: 0.78rem;
    color: var(--color-muted);
    margin-top: 2px;
}

/* Two-column section ---------------------------------- */
.metrics-grid-two {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}
.info-card--full { margin-bottom: 16px; }

/* Bar chart (orders per day) -------------------------- */
.bar-chart {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 180px;
    padding: 28px 0 24px;
    border-bottom: 1px solid var(--color-border);
    overflow-x: auto;
}
.bar-col {
    flex: 1 1 0;
    min-width: 18px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    position: relative;
}
.bar {
    width: 100%;
    background: var(--color-primary);
    border-radius: 4px 4px 0 0;
    transition: background 0.15s;
    min-height: 2px;
}
.bar--peak {
    background: var(--color-primary-dark);
}
.bar-col:hover .bar { background: var(--color-primary-dark); }
.bar-value {
    position: absolute;
    top: 0;
    font-size: 0.7rem;
    color: var(--color-muted);
    transform: translateY(-4px);
    white-space: nowrap;
}
.bar-label {
    position: absolute;
    bottom: -22px;
    font-size: 0.7rem;
    color: var(--color-muted);
    white-space: nowrap;
}
.bar-chart-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 32px;
    font-size: 0.9rem;
    color: var(--color-muted);
}
.bar-chart-summary strong { color: var(--color-text); }

/* Status breakdown ------------------------------------- */
.status-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.status-list li { margin-bottom: 14px; }
.status-list li:last-child { margin-bottom: 0; }
.status-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 4px;
}
.status-name { font-weight: 600; }
.status-count { font-weight: 700; font-size: 1.05rem; }
.status-pct   { color: var(--color-muted); font-size: 0.85rem; min-width: 42px; text-align: right; }
.status-bar {
    height: 6px;
    background: var(--color-bg);
    border-radius: 999px;
    overflow: hidden;
}
.status-bar-fill {
    height: 100%;
    border-radius: 999px;
    transition: width 0.3s;
}
.status-bar-fill--pending   { background: #fbbf24; }
.status-bar-fill--confirmed { background: #60a5fa; }
.status-bar-fill--preparing { background: #a78bfa; }
.status-bar-fill--ready     { background: #34d399; }
.status-bar-fill--delivered { background: #10b981; }
.status-bar-fill--cancelled { background: #f87171; }

/* Status pill variants -------------------------------- */
.status-pill--pending   { background: #fef3c7; color: #92400e; }
.status-pill--confirmed { background: #dbeafe; color: #1e40af; }
.status-pill--preparing { background: #ede9fe; color: #5b21b6; }
.status-pill--ready     { background: #d1fae5; color: #065f46; }
.status-pill--delivered { background: #dcfce7; color: #166534; }
.status-pill--cancelled { background: #fee2e2; color: #991b1b; }

/* Metrics table (top stalls, recent orders) ---------- */
.metrics-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}
.metrics-table thead th {
    text-align: left;
    padding: 8px 10px;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-muted);
    border-bottom: 1px solid var(--color-border);
    font-weight: 600;
}
.metrics-table thead th.num,
.metrics-table tbody td.num { text-align: right; }
.metrics-table tbody td {
    padding: 10px;
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
}
.metrics-table tbody tr:last-child td { border-bottom: none; }
.metrics-table tbody tr:hover { background: var(--color-bg); }
.metrics-table .rank {
    color: var(--color-primary);
    font-weight: 700;
    width: 40px;
}

/* ============================================================
   Impersonation (SuperAdmin support tool)
   ============================================================ */
.impersonation-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 1px solid #f59e0b;
    border-radius: var(--radius);
    padding: 12px 18px;
    margin-bottom: 16px;
    max-width: 900px;
}
.impersonation-banner__text {
    color: #78350f;
    font-weight: 600;
    font-size: 0.95rem;
}
.impersonation-banner__time {
    color: #92400e;
    font-weight: 400;
    font-size: 0.82rem;
    margin-left: 4px;
}
.impersonation-banner__form { margin: 0; }
.impersonation-banner__btn {
    background: white;
    color: #92400e;
    border-color: #f59e0b;
    font-weight: 600;
    padding: 6px 14px;
    font-size: 0.85rem;
}
.impersonation-banner__btn:hover {
    background: #fef3c7;
    border-color: #b45309;
}

.impersonate-details {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    margin-bottom: 16px;
    max-width: 900px;
}
.impersonate-details summary {
    cursor: pointer;
    padding: 14px 18px;
    font-weight: 600;
    color: #92400e;
    list-style: none;
    border-radius: var(--radius);
}
.impersonate-details summary::-webkit-details-marker { display: none; }
.impersonate-details summary::before {
    content: '▶';
    display: inline-block;
    margin-right: 8px;
    font-size: 0.7rem;
    transition: transform 0.15s;
}
.impersonate-details[open] summary::before {
    transform: rotate(90deg);
}
.impersonate-details[open] summary {
    border-bottom: 1px solid var(--color-border);
    border-radius: var(--radius) var(--radius) 0 0;
}
.impersonate-panel {
    padding: 16px 18px;
}
.impersonate-form { margin: 0; }

/* ============================================================
   Phase 9 — Stall profile editor add-ons
   ============================================================ */

/* Dividers between top-level sections in the profile form. */
.form-divider {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: 8px 0;
}
.form-section-title {
    margin: 0 0 4px;
    font-size: 1.05rem;
}

/* Business hours editor — one row per weekday, with the ability to add
   multiple intervals (e.g. lunch + dinner). */
.hours-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px;
}
.hours-day {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 12px 14px;
    background: var(--color-bg);
}
.hours-day-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}
.hours-day-head strong {
    font-size: 0.95rem;
    text-transform: capitalize;
}
.hours-day-rows {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.hours-row {
    display: flex;
    align-items: center;
    gap: 6px;
}
.hours-row input[type="time"] {
    flex: 1;
    min-width: 0;
    padding: 6px 8px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-surface);
    font-family: inherit;
    font-size: 0.95rem;
}
.hours-row span { color: var(--color-muted); font-size: 0.85rem; }
.hours-closed {
    margin: 0;
    color: var(--color-muted);
    font-size: 0.85rem;
}
.hours-day-head .link-button {
    font-size: 0.82rem;
    color: var(--color-primary);
    padding: 4px 6px;
}
.hours-day-head .link-button:hover {
    background: var(--color-surface);
}

/* ============================================================
   Phase 9 — Customer account page
   ============================================================ */
.account-order-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.account-order {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    flex-wrap: wrap;
}
.account-order strong { font-family: ui-monospace, monospace; }
.account-order-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* ============================================================
   Customer-account modal (Phase 9 — header auth buttons)
   Single dialog with two tabs (login + register). Submits via
   fetch() to the same endpoints the standalone pages use; the
   controller answers with JSON so the modal stays open on error.
   ============================================================ */
.amodal-open { overflow: hidden; }

.amodal {
    position: fixed;
    inset: 0;
    z-index: 110;
    display: none;
    align-items: flex-end;
    justify-content: center;
}
.amodal.is-open { display: flex; }

@media (min-width: 640px) {
    .amodal { align-items: center; }
}

.amodal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    animation: amodal-fade 0.18s ease-out;
}

.amodal-panel {
    position: relative;
    width: 100%;
    max-width: 460px;
    max-height: 92dvh;
    background: var(--color-surface);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: amodal-slide 0.22s ease-out;
}
@media (min-width: 640px) {
    .amodal-panel {
        border-radius: 16px;
        max-height: 88vh;
    }
}

@keyframes amodal-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes amodal-slide {
    from { transform: translateY(20px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .amodal-backdrop,
    .amodal-panel { animation: none; }
}

.amodal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--color-border);
}
.amodal-title { margin: 0; font-size: 1.15rem; }
.amodal-close {
    background: none;
    border: none;
    font-size: 1.3rem;
    color: var(--color-muted);
    cursor: pointer;
    padding: 4px 10px;
    border-radius: 6px;
    font-family: inherit;
    line-height: 1;
}
.amodal-close:hover { background: var(--color-bg); color: var(--color-text); }

.amodal-tabs {
    display: flex;
    gap: 4px;
    padding: 8px 14px 0;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg);
}
.amodal-tab {
    flex: 1;
    padding: 10px 12px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    font: inherit;
    font-weight: 600;
    color: var(--color-muted);
    cursor: pointer;
    margin-bottom: -1px;            /* overlap the panel border-bottom */
    transition: color 0.15s, border-color 0.15s;
}
.amodal-tab:hover { color: var(--color-text); }
.amodal-tab.is-active {
    color: var(--color-primary-dark);
    border-bottom-color: var(--color-primary);
    background: var(--color-surface);
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.amodal-body {
    flex: 1;
    overflow-y: auto;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.amodal-error {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 0.92rem;
    line-height: 1.4;
}

.amodal-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.amodal-submit { margin-top: 4px; }
.amodal-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

.amodal-foot {
    padding: 10px 18px 14px;
    border-top: 1px solid var(--color-border);
    background: var(--color-bg);
}
.amodal-foot .muted { margin: 0; }

/* ============================================================
   Confirmation modal (Phase 8+)
   Generic "are you sure?" dialog used by KDS / staff actions.
   Forms opt in by adding [data-confirm="..."] on the <form>.
   ============================================================ */
.cmodal-open { overflow: hidden; }

.cmodal {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: none;
    align-items: flex-end;
    justify-content: center;
}
.cmodal.is-open { display: flex; }

@media (min-width: 640px) {
    .cmodal { align-items: center; }
}

.cmodal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    animation: cmodal-fade 0.18s ease-out;
}

.cmodal-panel {
    position: relative;
    width: 100%;
    max-width: 460px;
    background: var(--color-surface);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: cmodal-slide 0.22s ease-out;
}
@media (min-width: 640px) {
    .cmodal-panel {
        border-radius: 16px;
        max-height: 88vh;
    }
}

@keyframes cmodal-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes cmodal-slide {
    from { transform: translateY(20px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .cmodal-backdrop,
    .cmodal-panel { animation: none; }
}

.cmodal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--color-border);
}
.cmodal-title { margin: 0; font-size: 1.1rem; }
.cmodal-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #fff7ed;
    color: #c2410c;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    margin-right: 10px;
}
.cmodal-titlewrap { display: flex; align-items: center; }

.cmodal-body {
    padding: 18px;
    line-height: 1.45;
    color: var(--color-text);
}
.cmodal-body p { margin: 0 0 8px; }
.cmodal-extra { color: var(--color-muted); font-size: 0.92rem; }

.cmodal-warning {
    background: #fef3c7;
    color: #92400e;
    border-top: 1px solid #fde68a;
    padding: 10px 18px;
    font-size: 0.88rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.cmodal-foot {
    padding: 12px 18px 14px;
    border-top: 1px solid var(--color-border);
    background: var(--color-bg);
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}
.cmodal-foot .btn { min-width: 110px; }
.cmodal-foot .btn-cancel { background: transparent; }

/* ============================================================
   Staff / KDS role-aware actions (Phase 8)
   ============================================================ */
.kds-assign-panel {
    display: none;
    width: 100%;
    margin-top: 8px;
    padding: 10px 12px;
    border: 1px dashed var(--color-border, #d8d8d8);
    border-radius: 8px;
    background: var(--color-bg-soft, #fafafa);
}
.kds-assign-panel.open { display: block; }

.kds-assign-form,
.kds-assign-form-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.kds-assign-form-inline label { display: inline-flex; gap: 6px; align-items: center; }
.kds-assign-form select,
.kds-assign-form-inline select { padding: 6px 8px; }

.kds-deliver-actions {
    display: flex;
    width: 100%;
    justify-content: flex-end;
    margin-top: 8px;
}

.order-history-list {
    list-style: none;
    padding-left: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.order-history-list li {
    padding: 8px 12px;
    background: var(--color-bg-soft, #fafafa);
    border-radius: 6px;
}

/* make the staff badge readable on the role pill variant */
.role-pill.role-pill--cocinero { background: #ffd9b3; color: #6a3a00; }

/* ============================================================
   WhatsApp message template editor (Phase: per-stall message)
   Two-column layout: textarea on the left, token catalogue on
   the right. Below sits a live preview rendered as preformatted
   text so line breaks survive.
   ============================================================ */
.wa-editor-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 20px;
    align-items: start;
}
@media (max-width: 900px) {
    .wa-editor-grid { grid-template-columns: 1fr; }
}
.wa-editor-main,
.wa-editor-side {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.wa-editor-side {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 16px;
    position: sticky;
    top: 16px;
}
.wa-section-title {
    margin: 0;
    font-size: 0.95rem;
    color: var(--color-text);
}
.wa-section-help {
    margin: 0 0 4px;
    font-size: 0.82rem;
    color: var(--color-muted);
}

.wa-tokens {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 480px;
    overflow-y: auto;
}
.wa-token-btn {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 8px 10px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    transition: border-color 0.15s, background 0.15s;
}
.wa-token-btn:hover {
    border-color: var(--color-primary);
    background: #fff7f1;
}
.wa-token-btn code {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.82rem;
    color: var(--color-primary);
}
.wa-token-btn .wa-token-label {
    font-size: 0.75rem;
    color: var(--color-muted);
}

#wa-template {
    width: 100%;
    min-height: 280px;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.92rem;
    line-height: 1.5;
    resize: vertical;
    padding: 12px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: #fafafa;
}
#wa-template:focus {
    outline: none;
    border-color: var(--color-primary);
    background: var(--color-surface);
}

.wa-format-help {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 10px 14px;
}
.wa-format-help summary {
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9rem;
}
.wa-format-help p { margin: 8px 0; font-size: 0.85rem; color: var(--color-muted); }
.wa-format-list {
    margin: 8px 0 0;
    padding-left: 18px;
    font-size: 0.85rem;
    color: var(--color-muted);
}
.wa-format-list code {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    background: var(--color-surface);
    padding: 1px 6px;
    border-radius: 4px;
    border: 1px solid var(--color-border);
}

.wa-preview {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 16px;
}
.wa-preview-title {
    margin: 0 0 4px;
    font-size: 0.95rem;
}
.wa-preview-help {
    margin: 0 0 10px;
    font-size: 0.82rem;
    color: var(--color-muted);
}
.wa-preview-body {
    margin: 0;
    padding: 14px;
    background: #ece5dd; /* mimic WhatsApp chat bubble background */
    color: #111;
    border-radius: 8px;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.85rem;
    line-height: 1.5;
    white-space: pre-wrap;
    word-wrap: break-word;
    max-height: 360px;
    overflow-y: auto;
}
.role-pill.role-pill--delivery { background: #b9e0ff; color: #003a6a; }/* ============================================================
   Product availability (admin + public menu)

   - .product-row--off          : row in admin menu list when sold out
   - .toggle-dot, .toggle-dot--on, .toggle-dot--off
                                : small status indicator inside the
                                  quick-toggle button
   - .availability-row,
     .availability-quick         : row in the product edit form
   - .product-card--sold-out    : sold-out card on the public menu
   - .product-soldout-tag       : "Agotado" badge inside the card
   ============================================================ */
.product-row--off { opacity: 0.65; }
.product-row--off td:first-child { border-left: 3px solid #f59e0b; }

.toggle-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: 1px;
    transition: background-color 0.15s ease;
}
.toggle-dot--on  { background: #16a34a; box-shadow: 0 0 0 2px #dcfce7; }
.toggle-dot--off { background: #f59e0b; box-shadow: 0 0 0 2px #fef3c7; }

.availability-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.availability-row .field-checkbox { margin-bottom: 0; }
.availability-quick { margin: 0; }

.product-card--sold-out {
    opacity: 0.65;
    background: var(--color-surface);
    position: relative;
}
.product-card--sold-out .product-img {
    filter: grayscale(0.8);
}
.product-soldout-tag {
    margin: 4px 0 8px;
    color: #92400e;
    font-size: 0.85rem;
    font-weight: 600;
}