/*
 * Customer-facing pages — menu, cart, checkout, order confirmation.
 *
 * Loaded after each page's own styles so it wins. Same language as the rest
 * of the app: Poppins, flat white, thin grey borders, square corners, no
 * shadows.
 *
 * The main change beyond colour is size. Menu cards were about 320px tall
 * apiece — a 160px photo, a description, then a price row — so four filled
 * the screen and a customer had to scroll to see a menu. They are now roughly
 * two thirds of that, and more fit across.
 */

:root {
  --sf-ink:       #111111;
  --sf-ink-soft:  #6b7280;
  --sf-ink-faint: #9ca3af;
  --sf-line:      #e5e5e5;
  --sf-line-dark: #d4d4d4;
  --sf-accent:    #10b981;
  --sf-accent-ink:#047857;
  --sf-canvas:    #fafafa;
}

body {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  font-size: 14px;
  color: var(--sf-ink);
  background: var(--sf-canvas);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-weight: 600; letter-spacing: -0.01em; color: var(--sf-ink); }

/* ── Nav ─────────────────────────────────────────────────────────────── */

.top-nav {
  background: #fff;
  border-bottom: 1px solid var(--sf-line);
  box-shadow: none !important;
  padding: 11px 0;
}
.nav-logo { width: 30px; height: 30px; border-radius: 0; border: 1px solid var(--sf-line); }
.nav-title { font-size: 0.95rem; font-weight: 600; }

.cart-btn, .btn-back, .btn-browse, .btn-checkout {
  border-radius: 0 !important;
  box-shadow: none !important;
  font-weight: 600;
  transition: background 0.15s, border-color 0.15s;
}
.cart-btn { background: var(--sf-accent); padding: 8px 15px; font-size: 0.83rem; }
.cart-btn:hover { background: var(--sf-accent-ink); box-shadow: none !important; }
.cart-count { border-radius: 0; width: auto; padding: 0 5px; height: 17px; font-size: 0.65rem; }

.table-chip {
  border-radius: 0;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: var(--sf-accent-ink);
  font-size: 0.75rem;
  padding: 4px 10px;
}

/* ── Page header ─────────────────────────────────────────────────────── */

.menu-hero { background: #fff; border-bottom: 1px solid var(--sf-line); padding: 20px 0 18px; }
.hero-title, .page-title { font-size: 1.25rem !important; font-weight: 600 !important; margin-bottom: 2px !important; }
.hero-sub { font-size: 0.82rem; color: var(--sf-ink-soft); }

/* ── Search and filters ──────────────────────────────────────────────── */

.search-bar input {
  border-radius: 0 !important;
  border: 1px solid var(--sf-line-dark) !important;
  padding: 10px 14px 10px 38px !important;
  font-size: 0.86rem;
}
.search-bar input:focus { border-color: var(--sf-accent) !important; }

.filter-pill {
  border-radius: 0 !important;
  border: 1px solid var(--sf-line-dark) !important;
  padding: 6px 13px !important;
  font-size: 0.78rem !important;
  font-weight: 500;
  color: var(--sf-ink-soft);
}
.filter-pill:hover { border-color: var(--sf-accent); color: var(--sf-accent-ink); }
.filter-pill.active { background: var(--sf-accent); border-color: var(--sf-accent); color: #fff; }

/* ── Product grid: smaller cards, more per row ───────────────────────── */

.products-grid {
  grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)) !important;
  gap: 14px !important;
}

.prod-card {
  border-radius: 0 !important;
  border: 1px solid var(--sf-line) !important;
  box-shadow: none !important;
  transition: border-color 0.15s;
}
.prod-card:hover {
  transform: none !important;
  box-shadow: none !important;
  border-color: var(--sf-accent) !important;
}

.prod-img { height: 118px !important; }          /* was 160 */
.prod-body { padding: 11px !important; }

.prod-name {
  font-size: 0.83rem !important;
  font-weight: 600 !important;
  min-height: 2.5em !important;
  margin-bottom: 3px !important;
}
/* The description repeated most of the name and pushed every card taller. */
.prod-desc { display: none !important; }

.prod-price { font-size: 0.92rem !important; font-weight: 600 !important; color: var(--sf-ink) !important; }

.btn-add {
  border-radius: 0 !important;
  padding: 6px 11px !important;
  font-size: 0.76rem !important;
  background: var(--sf-accent);
}
.btn-add:hover { background: var(--sf-accent-ink); }
.btn-add.added { background: var(--sf-ink); }

.popular-badge {
  border-radius: 0 !important;
  font-size: 0.6rem !important;
  padding: 2px 6px !important;
  background: var(--sf-ink) !important;
}

/* ── Cart ────────────────────────────────────────────────────────────── */

.card {
  border-radius: 0 !important;
  border: 1px solid var(--sf-line) !important;
  box-shadow: none !important;
}
.card-header { border-bottom: 1px solid var(--sf-line); padding: 13px 16px; }
.card-header h3 { font-size: 0.9rem; }

.cart-item { padding: 12px 16px; }
.item-img { width: 52px !important; height: 52px !important; border-radius: 0 !important; }
.item-name { font-size: 0.85rem; }
.item-unit { font-size: 0.74rem; }
.item-subtotal { font-size: 0.85rem; }

.qty-btn { border-radius: 0 !important; width: 26px; height: 26px; }
.qty-num { font-size: 0.84rem; }

.summary-row { padding: 10px 16px; font-size: 0.82rem; }
.summary-total { padding: 14px 16px; }
.total-amount { font-size: 1.15rem !important; color: var(--sf-ink) !important; }

.btn-checkout {
  background: var(--sf-accent) !important;
  border-radius: 0 !important;
  margin: 0 16px 16px !important;
  padding: 12px !important;
  font-size: 0.88rem !important;
}
.btn-checkout:hover { background: var(--sf-accent-ink) !important; transform: none !important; box-shadow: none !important; }

/* ── Checkout form ───────────────────────────────────────────────────── */

.form-input, .form-select, input[type="text"], input[type="tel"], input[type="number"], select, textarea {
  border-radius: 0 !important;
}
.form-label { font-size: 0.76rem; font-weight: 600; color: var(--sf-ink-soft); }

.summary-item { padding: 8px 0; font-size: 0.83rem; }
.item-price { font-weight: 600; }

/* ── Empty states ────────────────────────────────────────────────────── */

.empty-state, .empty-wrap { padding: 40px 20px !important; }
.empty-state i, .empty-wrap i { font-size: 2rem !important; }
.empty-state h3, .empty-wrap h3 { font-size: 0.95rem !important; }

.btn-browse { background: var(--sf-accent); padding: 9px 18px !important; font-size: 0.83rem !important; }
.btn-browse:hover { background: var(--sf-accent-ink); }

/* ── Tighter page width so lines stay readable ───────────────────────── */

.menu-body { margin: 20px auto !important; }
.page-wrap { margin: 20px auto !important; }

@media (max-width: 520px) {
  .products-grid { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)) !important; gap: 10px !important; }
  .prod-img { height: 100px !important; }
}