/* =============================================================
   QR-Menu Cafe — гостевой стиль (mobile-first)
   ============================================================= */
* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --bg: #f6f5f2;
    --card: #ffffff;
    --accent: #e05c2f;
    --text: #232323;
    --muted: #8a8a86;
    --line: #e9e6e0;
    --danger: #c0392b;
    --ok: #2e7d32;
}

html { font-size: 16px; }
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
}

.app { max-width: 760px; margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column; }

/* ----- Шапка ----- */
.topbar {
    background: linear-gradient(135deg, #2b2b2b, #4a342b);
    color: #fff;
    padding: 18px 16px;
    position: sticky; top: 0; z-index: 5;
}
.brand { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.brand-name { font-size: 1.3rem; font-weight: 700; letter-spacing: .3px; }
.table-badge {
    background: var(--accent);
    color: #fff;
    font-weight: 700;
    font-size: .85rem;
    padding: 5px 12px;
    border-radius: 999px;
    white-space: nowrap;
}

/* ----- Приветствие ----- */
.welcome {
    padding: 14px 16px 4px;
    color: var(--muted);
    font-size: .95rem;
    text-align: center;
}
.welcome p { margin-bottom: 6px; }
.welcome[hidden] { display: none; }

/* ----- Контент ----- */
.content { flex: 1; padding: 8px 0 20px; }

/* ----- Сообщения об ошибке ----- */
.error-box {
    background: #fdecea;
    color: var(--danger);
    border: 1px solid #f5c6c0;
    padding: 14px 16px;
    margin: 10px 16px;
    border-radius: 12px;
    font-size: .95rem;
}
.error-box[hidden], [hidden] { display: none; }

/* ----- Загрузка ----- */
.loading { text-align: center; padding: 60px 0; color: var(--muted); }
.spinner {
    width: 40px; height: 40px; margin: 0 auto 12px;
    border: 4px solid var(--line);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ----- Табы категорий ----- */
.tabs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 10px 16px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
    flex: 0 0 auto;
    border: none;
    background: var(--card);
    color: var(--text);
    padding: 9px 16px;
    border-radius: 999px;
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
    white-space: nowrap;
}
.tab.active { background: var(--accent); color: #fff; }

/* ----- Список блюд ----- */
.dishes { padding: 8px 16px; display: flex; flex-direction: column; gap: 12px; }
.empty { color: var(--muted); text-align: center; padding: 40px 0; }

.dish-card {
    background: var(--card);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,.05);
    display: flex;
}
.dish-img { width: 120px; min-width: 120px; height: 120px; background: var(--line); position: relative; }
.dish-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dish-img.no-img { display: flex; align-items: center; justify-content: center; font-size: 2.4rem; color: #cfcfca; }

.dish-body { flex: 1; padding: 12px 14px; display: flex; flex-direction: column; }
.dish-name { font-size: 1.02rem; font-weight: 700; margin-bottom: 4px; }
.dish-desc { font-size: .85rem; color: var(--muted); margin-bottom: 8px; }
.dish-meta { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dish-weight { font-size: .82rem; color: var(--muted); }
.dish-price { font-size: 1.05rem; font-weight: 800; color: var(--accent); white-space: nowrap; }
.dish-status { display: inline-block; margin-top: 6px; font-size: .75rem; font-weight: 700; color: #fff; background: var(--danger); padding: 3px 10px; border-radius: 999px; align-self: flex-start; }

.dish-card.sold-out { opacity: .75; }
.dish-card.sold-out .dish-img img { filter: grayscale(.6); }

/* ----- Подвал ----- */
.footer { text-align: center; padding: 16px; color: var(--muted); font-size: .85rem; }

/* ============ Планшет / десктоп ============ */
@media (min-width: 560px) {
    .topbar { padding: 22px 24px; }
    .brand-name { font-size: 1.6rem; }
    .content { padding: 10px 24px 30px; }
    .dishes { padding: 12px 24px; }
    .tabs { padding: 12px 24px; }
    .dish-img { width: 150px; min-width: 150px; height: 150px; }
    .dish-card { max-width: 640px; }
    .dish-name { font-size: 1.12rem; }
}