/* ==========================================================================
   cholo.css — Cholo design system
   Mobile-first. Breakpoints: 360 / 768 / 1024 (plan.md §11).
   No external fonts or CDNs; system stack renders Bangla well.
   ========================================================================== */

/* ——— 1. Design tokens ————————————————————————————————————————————— */
:root {
  /* Brand (Bangladesh flag palette) */
  --c-primary: #006A4E;
  --c-primary-600: #00553E;
  --c-primary-700: #00402F;
  --c-primary-100: #D6EFE7;
  --c-primary-50: #EDF8F4;
  --c-accent: #F42A41;
  --c-accent-600: #D31E33;
  --c-accent-700: #B21929;
  --c-accent-100: #FDE3E6;

  /* Neutral scale */
  --c-n0: #FFFFFF;
  --c-n50: #F7F8F8;
  --c-n100: #EEF0F0;
  --c-n200: #DFE3E2;
  --c-n300: #C4CBC9;
  --c-n400: #9AA5A2;
  --c-n500: #626D6A; /* AA: 5.4:1 on white, 5.0:1 on n50 (was #6F7C79, 4.3:1) */
  --c-n600: #525D5A;
  --c-n700: #3B4442;
  --c-n800: #262C2B;
  --c-n900: #151918;

  /* Semantic — every text/bg pair here holds WCAG AA (≥ 4.5:1), see docs/brand.md §6 */
  --c-success: #0E7052; /* 6.1:1 white, 5.3:1 on success-bg (was #12805C) */
  --c-success-bg: #E1F4EC;
  --c-warning: #8F5A08; /* 5.8:1 white, 5.1:1 on warning-bg (was #A6690A) */
  --c-warning-bg: #FBEFD9;
  --c-danger: var(--c-accent-600);
  --c-danger-bg: #FEECEE; /* danger on this bg: 4.6:1 (accent-100 was 4.3:1) */
  --c-info: #17568B;
  --c-info-bg: #E2EEF9;

  /* Surfaces & text */
  --bg-page: var(--c-n50);
  --bg-surface: var(--c-n0);
  --text-strong: var(--c-n900);
  --text-body: var(--c-n700);
  --text-muted: var(--c-n500);
  --border: var(--c-n200);

  /* Spacing scale (4px base) */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;

  /* Radius */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-full: 999px;

  /* Shadows */
  --shadow-1: 0 1px 2px rgb(21 25 24 / 0.06), 0 1px 3px rgb(21 25 24 / 0.08);
  --shadow-2: 0 2px 6px rgb(21 25 24 / 0.08), 0 6px 18px rgb(21 25 24 / 0.08);
  --shadow-3: 0 8px 16px rgb(21 25 24 / 0.12), 0 16px 40px rgb(21 25 24 / 0.12);

  /* Typography — system stack that renders Bangla well */
  --font-ui: "Noto Sans Bengali", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Hind Siliguri", "SolaimanLipi", "Helvetica Neue", Arial, sans-serif;
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-md: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.375rem;
  --fs-2xl: 1.75rem;

  /* Layout */
  --nav-h: 60px;
  --topbar-h: 56px;
  --page-max: 640px;
  --z-nav: 40;
  --z-sheet: 60;
  --z-toast: 80;
}

/* ——— 2. Base / reset ———————————————————————————————————————————— */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--fs-md);
  line-height: 1.5;
  color: var(--text-body);
  background: var(--bg-page);
  min-height: 100dvh;
}

h1, h2, h3, h4 {
  margin: 0;
  color: var(--text-strong);
  line-height: 1.25;
  font-weight: 700;
}

p {
  margin: 0;
}

img, svg {
  max-width: 100%;
  display: block;
}

a {
  color: var(--c-primary);
  text-decoration: none;
}

button {
  font: inherit;
}

:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
}

/* Keyboard focus must survive surface-css `outline: none` resets (WCAG 2.4.7).
   :focus-visible only fires for keyboard/switch input, so pointer aesthetics
   (styled container rows, chip inputs) are untouched. */
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible,
a:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--c-primary) !important;
  outline-offset: 2px;
}

.text-muted { color: var(--text-muted); }
.text-danger { color: var(--c-danger); }

/* ——— 3. Layout shell ———————————————————————————————————————————— */
.page {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--sp-4) var(--sp-4)
    calc(var(--nav-h) + var(--sp-6) + env(safe-area-inset-bottom, 0px));
}

.section-title {
  font-size: var(--fs-lg);
  margin: var(--sp-5) 0 var(--sp-3);
}

/* Top bar */
.top-bar {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: 0 var(--sp-4);
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
}

.top-bar__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--text-strong);
}

.top-bar__name {
  font-size: var(--fs-lg);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--c-primary);
}

.top-bar__actions {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}

/* Bottom navigation */
.bottom-nav {
  position: fixed;
  inset: auto 0 0 0;
  z-index: var(--z-nav);
  height: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--bg-surface);
  border-top: 1px solid var(--border);
}

.bottom-nav__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-muted);
}

.bottom-nav__item svg {
  width: 24px;
  height: 24px;
}

.bottom-nav__item.is-active {
  color: var(--c-primary);
}

.bottom-nav__item:active {
  opacity: 0.7;
}

/* ——— 4. Buttons ————————————————————————————————————————————————— */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 48px;
  padding: 0 var(--sp-5);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font-size: var(--fs-md);
  font-weight: 700;
  cursor: pointer;
  user-select: none;
  transition: background-color 150ms ease-out, transform 150ms ease-out,
    box-shadow 150ms ease-out;
  -webkit-tap-highlight-color: transparent;
}

.btn:active { transform: scale(0.98); }

.btn--primary {
  background: var(--c-primary);
  color: var(--c-n0);
}
.btn--primary:hover { background: var(--c-primary-600); }
.btn--primary:active { background: var(--c-primary-700); }

/* Destructive buttons use accent-600: white text holds AA (5.25:1); pure
   --c-accent (4.0:1) stays for dots/pills/decorative red only. */
.btn--accent {
  background: var(--c-accent-600);
  color: var(--c-n0);
}
.btn--accent:hover,
.btn--accent:active { background: var(--c-accent-700); }

.btn--ghost {
  background: transparent;
  color: var(--c-primary);
  border-color: var(--c-n300);
}
.btn--ghost:hover { background: var(--c-primary-50); }

.btn:disabled,
.btn.is-disabled {
  background: var(--c-n100);
  color: var(--c-n400);
  border-color: transparent;
  cursor: not-allowed;
  transform: none;
}

.btn--sm {
  min-height: 36px;
  padding: 0 var(--sp-3);
  font-size: var(--fs-sm);
  border-radius: var(--r-sm);
}

.btn--block { width: 100%; }

/* ——— 5. Cards ——————————————————————————————————————————————————— */
.card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  box-shadow: var(--shadow-1);
}

.card--flat { box-shadow: none; }

.card + .card { margin-top: var(--sp-3); }

/* ——— 6. Forms ——————————————————————————————————————————————————— */
.field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  margin-bottom: var(--sp-4);
}

.field__label {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-strong);
}

.input,
.select,
.textarea {
  width: 100%;
  min-height: 48px;
  padding: var(--sp-3);
  font: inherit;
  color: var(--text-strong);
  background: var(--bg-surface);
  border: 1.5px solid var(--c-n300);
  border-radius: var(--r-md);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.textarea { min-height: 96px; resize: vertical; }

.input::placeholder,
.textarea::placeholder { color: var(--c-n500); }

.input:focus,
.select:focus,
.textarea:focus {
  outline: none;
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px var(--c-primary-100);
}

.field.is-invalid .input,
.field.is-invalid .select,
.field.is-invalid .textarea {
  border-color: var(--c-danger);
  box-shadow: 0 0 0 3px var(--c-danger-bg);
}

.field.is-valid .input { border-color: var(--c-success); }

.field__hint { font-size: var(--fs-xs); color: var(--text-muted); }
.field__error {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--c-danger);
  display: none;
}
.field.is-invalid .field__error { display: block; }

/* ——— 7. Badges —————————————————————————————————————————————————— */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 2px var(--sp-2);
  border-radius: var(--r-full);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.6;
  background: var(--c-n100);
  color: var(--c-n600);
}

.badge--primary { background: var(--c-primary-100); color: var(--c-primary-700); }
.badge--accent { background: var(--c-accent-100); color: var(--c-accent-700); }
.badge--success { background: var(--c-success-bg); color: var(--c-success); }
.badge--warning { background: var(--c-warning-bg); color: var(--c-warning); }
.badge--danger { background: var(--c-danger-bg); color: var(--c-danger); }
.badge--info { background: var(--c-info-bg); color: var(--c-info); }

/* Unread-notification count dot (§8 notify.new; JS bumps + unhides). */
.nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--r-full);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  background: var(--c-danger);
  color: #fff;
}
.nav-badge[hidden] { display: none; }

/* ——— 8. List rows ——————————————————————————————————————————————— */
.list {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.list-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  min-height: 56px;
  color: inherit;
}

.list-row + .list-row { border-top: 1px solid var(--c-n100); }

.list-row:active { background: var(--c-n50); }

.list-row__media {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  background: var(--c-primary-50);
  color: var(--c-primary);
  overflow: hidden;
}

.list-row__body { flex: 1 1 auto; min-width: 0; }

.list-row__title {
  font-weight: 600;
  color: var(--text-strong);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.list-row__sub {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.list-row__end {
  flex: 0 0 auto;
  text-align: right;
  font-weight: 700;
  color: var(--text-strong);
}

/* ——— 9. Bottom sheet ———————————————————————————————————————————— */
.sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-sheet) - 1);
  background: rgb(21 25 24 / 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.bottom-sheet {
  position: fixed;
  inset: auto 0 0 0;
  z-index: var(--z-sheet);
  max-height: 85dvh;
  overflow-y: auto;
  background: var(--bg-surface);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  box-shadow: var(--shadow-3);
  padding: var(--sp-2) var(--sp-4)
    calc(var(--sp-5) + env(safe-area-inset-bottom, 0px));
  transform: translateY(100%);
  transition: transform 220ms cubic-bezier(0.32, 0.72, 0, 1);
}

.bottom-sheet.is-open { transform: translateY(0); }
.sheet-backdrop.is-open { opacity: 1; pointer-events: auto; }

.bottom-sheet__handle {
  width: 40px;
  height: 4px;
  margin: var(--sp-2) auto var(--sp-3);
  border-radius: var(--r-full);
  background: var(--c-n300);
}

.bottom-sheet__title {
  font-size: var(--fs-lg);
  margin-bottom: var(--sp-3);
}

@media (min-width: 768px) {
  .bottom-sheet {
    inset: auto 0 0 50%;
    transform: translate(-50%, 100%);
    width: min(560px, 100%);
    border-radius: var(--r-lg);
    bottom: var(--sp-5);
  }
  .bottom-sheet.is-open { transform: translate(-50%, 0); }
}

/* ——— 10. Skeleton loaders ——————————————————————————————————————— */
.skeleton {
  position: relative;
  overflow: hidden;
  background: var(--c-n100);
  border-radius: var(--r-sm);
  color: transparent !important;
  pointer-events: none;
  user-select: none;
}

.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.65), transparent);
  transform: translateX(-100%);
  animation: skeleton-shimmer 1.4s infinite;
}

.skeleton--text { height: 1em; border-radius: 4px; }
.skeleton--title { height: 1.4em; width: 60%; border-radius: 4px; }
.skeleton--circle { border-radius: 50%; }

@keyframes skeleton-shimmer {
  100% { transform: translateX(100%); }
}

@media (prefers-reduced-motion: reduce) {
  .skeleton::after { animation: none; }
}

/* ——— 11. Toast —————————————————————————————————————————————————— */
.toast-region {
  position: fixed;
  z-index: var(--z-toast);
  inset: auto 0 calc(var(--nav-h) + var(--sp-4) + env(safe-area-inset-bottom, 0px)) 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  padding: 0 var(--sp-4);
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  max-width: min(92vw, 480px);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  background: var(--c-n800);
  color: var(--c-n0);
  font-size: var(--fs-sm);
  font-weight: 600;
  box-shadow: var(--shadow-2);
  animation: toast-in 200ms ease-out;
}

.toast--success { background: var(--c-success); }
.toast--danger { background: var(--c-danger); }
.toast--warning { background: var(--c-warning); }

/* Add .is-leaving before removal (JS: 180ms then remove) for a smooth exit. */
.toast.is-leaving {
  animation: toast-out 180ms ease-in forwards;
}

@keyframes toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes toast-out {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(6px); }
}

/* ——— 12. Home: search, promo, categories, active order ————————— */
.search-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 48px;
  padding: 0 var(--sp-4);
  border-radius: var(--r-full);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  box-shadow: var(--shadow-1);
}

.search-bar svg { width: 18px; height: 18px; flex: 0 0 auto; }

.promo-banner {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  margin-top: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-lg);
  background: linear-gradient(120deg, var(--c-primary) 0%, var(--c-primary-600) 65%, var(--c-primary-700) 100%);
  color: var(--c-n0);
  box-shadow: var(--shadow-2);
}

.promo-banner__label {
  font-size: var(--fs-xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.85;
}

.promo-banner__text {
  font-size: var(--fs-md);
  font-weight: 700;
  line-height: 1.35;
}

/* Promo image slider — banners from admin CMS (plan.md §9.1.2 / §10.9).
   Pure CSS scroll-snap; one full-width slide per banner, swipeable. */
.promo-slider {
  display: flex;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.promo-slider::-webkit-scrollbar {
  display: none;
}

.promo-slide {
  display: block;
  flex: 0 0 100%;
  scroll-snap-align: start;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-2);
}

.promo-slide img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 1;
  object-fit: cover;
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3);
}

.category-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-2);
  border-radius: var(--r-lg);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  color: var(--text-strong);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-align: center;
  box-shadow: var(--shadow-1);
  transition: transform 100ms ease, box-shadow 120ms ease;
}

.category-card:active {
  transform: scale(0.97);
  box-shadow: none;
}

.category-card__icon {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--c-primary-50);
  color: var(--c-primary);
}

.category-card__icon svg {
  width: 32px;
  height: 32px;
}

.category-card__label {
  line-height: 1.3;
}

/* Active order pinned card */
.card--active-order {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
  border-color: var(--c-primary-100);
  background: var(--c-primary-50);
}

.card--active-order__pulse {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--c-primary);
  animation: pulse 1.6s ease-out infinite;
}

.card--active-order__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--text-strong);
}

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgb(0 106 78 / 0.35); }
  70% { box-shadow: 0 0 0 10px rgb(0 106 78 / 0); }
  100% { box-shadow: 0 0 0 0 rgb(0 106 78 / 0); }
}

/* ——— 13. Empty states ——————————————————————————————————————————— */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  text-align: center;
  padding: var(--sp-8) var(--sp-4);
}

.empty-state__code {
  font-size: var(--fs-2xl);
  font-weight: 800;
  color: var(--c-n300);
}

.empty-state__title { font-size: var(--fs-xl); }
.empty-state__body { color: var(--text-muted); }

/* ——— 14. Responsive: 768 / 1024 ————————————————————————————————— */
@media (min-width: 768px) {
  :root { --page-max: 720px; }

  .category-grid { grid-template-columns: repeat(6, 1fr); }

  /* On larger screens the bottom nav floats as a centered pill. */
  .bottom-nav {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: 420px;
    height: var(--nav-h);
    bottom: var(--sp-4);
    padding-bottom: 0;
    border: 1px solid var(--border);
    border-radius: var(--r-full);
    box-shadow: var(--shadow-2);
  }
}

@media (min-width: 1024px) {
  :root { --page-max: 960px; }
}

/* ——— 15. A11y utilities ————————————————————————————————————————— */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* Skip link for keyboard users — first focusable element in <body>. */
.skip-link {
  position: fixed;
  top: -48px;
  left: var(--sp-4);
  z-index: calc(var(--z-toast) + 1);
  padding: var(--sp-2) var(--sp-4);
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  background: var(--c-primary);
  color: var(--c-n0);
  font-weight: 700;
  transition: top 150ms ease-out;
}

.skip-link:focus-visible { top: 0; }

/* ——— 16. Page enter (opacity only — no layout jank on 3G) ———————— */
@media (prefers-reduced-motion: no-preference) {
  .page {
    animation: page-in 180ms ease-out;
  }

  @keyframes page-in {
    from { opacity: 0.55; }
    to { opacity: 1; }
  }
}

/* ——— 17. PWA install chip (created by static/js/pwa.js) ————————— */
.pwa-install {
  position: fixed;
  z-index: calc(var(--z-nav) + 1);
  left: 50%;
  bottom: calc(var(--nav-h) + var(--sp-4) + env(safe-area-inset-bottom, 0px));
  transform: translate(-50%, 0);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: max-content;
  max-width: min(94vw, 480px);
  padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-4);
  border-radius: var(--r-full);
  background: var(--c-n800);
  color: var(--c-n0);
  font-size: var(--fs-sm);
  font-weight: 600;
  box-shadow: var(--shadow-3);
  animation: toast-in 200ms ease-out;
}

.pwa-install.is-leaving { animation: toast-out 180ms ease-in forwards; }

.pwa-install__btn {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 0 var(--sp-4);
  border: 0;
  border-radius: var(--r-full);
  background: var(--c-primary);
  color: var(--c-n0);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.pwa-install__btn:hover { background: var(--c-primary-600); }

.pwa-install__close {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--c-n300);
  font: inherit;
  font-size: var(--fs-lg);
  line-height: 1;
  cursor: pointer;
}

.pwa-install__close:hover { color: var(--c-n0); }

/* ——— 18. Reduced motion (global kill-switch, keeps a11y promise) —— */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ————— Home redesign (reference: docs/design/reference-home-user.png) ————— */
.home { display: flex; flex-direction: column; gap: var(--sp-4); }

.home-greeting { margin-top: var(--sp-1); }
.home-greeting__main {
  font-size: 1.55rem;
  font-weight: 800;
  line-height: 1.25;
  color: var(--c-ink, #1a1a1a);
  margin: 0;
}
.home-greeting__sub {
  margin: 2px 0 0;
  color: var(--c-muted, #6b7570);
  font-size: 0.95rem;
}

/* Search pill — soft mint field like the reference */
.search-bar {
  background: #e8efec;
  border: none;
  border-radius: 999px;
  padding: 14px var(--sp-4);
  color: #5b6a63;
}

/* Category grid: 3-col cards with circular mint icon chip + stacked labels */
.category-grid { grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
.category-card {
  background: #fff;
  border-radius: 20px;
  padding: var(--sp-4) var(--sp-2);
  box-shadow: 0 1px 3px rgb(9 44 31 / 0.06);
  border: none;
  gap: 6px;
}
.category-card__icon {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: #e4f0ea;
  color: var(--c-primary);
}
.category-card__icon svg { width: 30px; height: 30px; }
.category-card__label {
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--c-ink, #1a1a1a);
}
.category-card__sub {
  font-size: 0.8rem;
  color: var(--c-muted, #8a938e);
  line-height: 1;
}

/* Active-order card per reference: thumb, LIVE badge, chevron */
.card--active-order {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  background: #fff;
  border-radius: 18px;
  border-left: 4px solid var(--c-primary);
  padding: var(--sp-3) var(--sp-4);
  box-shadow: 0 1px 3px rgb(9 44 31 / 0.07);
}
.card--active-order__thumb {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: #e4f0ea;
  color: var(--c-primary);
  display: grid;
  place-items: center;
}
.card--active-order__thumb svg { width: 26px; height: 26px; }
.card--active-order__kicker {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-muted, #6b7570);
}
.card--active-order__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.card--active-order__chev { width: 18px; height: 18px; color: var(--c-muted, #8a938e); flex: 0 0 auto; }
.badge--live {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #fdeaec;
  color: var(--c-accent);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  border-radius: 999px;
  padding: 4px 9px;
  flex: 0 0 auto;
}
.badge--live__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-accent);
  animation: livepulse 1.4s ease-in-out infinite;
}
@keyframes livepulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .badge--live__dot { animation: none; } }

/* Promo slider polish + dots */
.promo-slide { border-radius: 20px; overflow: hidden; }
.promo-dots { display: flex; justify-content: center; gap: 6px; margin-top: calc(var(--sp-2) * -1); }
.promo-dots__dot { width: 7px; height: 7px; border-radius: 50%; background: #cdd8d2; }
.promo-dots__dot.is-active { width: 18px; border-radius: 999px; background: var(--c-primary); }

@media (min-width: 768px) {
  .home-greeting__main { font-size: 1.8rem; }
}