/* Light Of Nature Feasts — design system
   Palette pulled from the home-screen mockup. */
:root {
  --cream:        #F7F1E1;  /* app background */
  --cream-deep:   #F0E7CF;  /* subtle panel edges */
  --sage:         #8FA875;  /* bars, card headers, checks */
  --sage-dark:    #74915C;  /* pressed / hover green */
  --terracotta:   #E0A57C;  /* main rounded panel */
  --terracotta-dp:#D8946A;
  --gold:         #F2C94C;  /* points pill, side-menu tab */
  --gold-dark:    #E4B531;
  --white:        #FFFFFF;
  --ink:          #5B5340;  /* primary earthy text */
  --ink-soft:     #9A9078;  /* muted text (times, hints) */
  --shadow:       0 8px 24px rgba(91, 83, 64, 0.14);
  --radius-xl:    32px;
  --radius-lg:    24px;
  --radius-pill:  999px;
  --maxw:         460px;    /* phone-width app column */
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: "Nunito", "Quicksand", system-ui, -apple-system, sans-serif;
  background: var(--cream);
  color: var(--ink);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* App is a centered phone-width column */
.app {
  position: relative;
  max-width: var(--maxw);
  margin: 0 auto;
  min-height: 100vh;
  padding: 14px 16px 32px;
  overflow-x: hidden;
}

/* ---------- Top bar ---------- */
.topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--sage);
  border-radius: var(--radius-pill);
  padding: 12px 18px;
  box-shadow: var(--shadow);
}
.search {
  flex: 1;
  min-width: 0;          /* allow the search to shrink instead of shoving the pill/cart off-screen */
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--gold);
}
.search svg { flex: none; }
.search input {
  flex: 1;
  min-width: 0;          /* inputs default to a content-based min width; override so it can shrink */
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 2px solid var(--gold);
  color: var(--white);
  font-size: 15px;
  padding: 4px 2px;
  outline: none;
}
.points-pill { flex: none; white-space: nowrap; }
.search input::placeholder { color: rgba(255,255,255,0.7); }

.points-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--gold);
  color: var(--white);
  font-weight: 800;
  border: none;
  border-radius: var(--radius-pill);
  padding: 8px 14px;
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(228,181,49,0.4);
}
.icon-btn {
  background: transparent;
  border: none;
  color: var(--gold);
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 4px;
}

/* ---------- Side-menu tab (yellow half circle) ---------- */
.drawer-tab {
  position: fixed;
  top: 118px;
  left: 0;
  z-index: 30;
  width: 22px;
  height: 44px;
  border: none;
  border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
  background: var(--gold);
  color: var(--ink);
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 2px 2px 7px rgba(91,83,64,0.22);
}

/* ---------- Main terracotta panel ---------- */
/* Organic hand-drawn blob: every corner a slightly different radius so the
   outline reads as soft/natural rather than a perfect rounded rectangle. */
.panel {
  position: relative;
  margin-top: 18px;
  background: transparent;      /* the SVG blob is the real background now */
  padding: 44px 40px 58px;      /* generous inset so the terracotta reads as a big splotch around the content */
  min-height: 70vh;
}
/* SVG blob stretches to fill whatever height the cards need */
.panel-blob {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  filter: drop-shadow(0 8px 20px rgba(91, 83, 64, 0.16));
}
.panel-blob path { fill: var(--terracotta); }

/* Keep cards + doodles above the blob */
.panel > #cards { position: relative; z-index: 2; }
.panel > .doodle { z-index: 3; }

/* ---------- Cards ---------- */
.card {
  position: relative;
  background: transparent;      /* the SVG blob is the card background now */
  padding: 14px;
  margin: 0 auto 26px;
  max-width: 300px;
  cursor: pointer;
  transition: transform .12s ease;
}
.card:hover { transform: translateY(-2px); }
.card:active { transform: translateY(0); }

/* Wavy white card outline behind the content */
.card-blob {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  filter: drop-shadow(0 6px 14px rgba(91, 83, 64, 0.16));
}
.card-blob path { fill: var(--white); }
.card-inner { position: relative; z-index: 1; padding: 4px; }

/* Second card mirrors its wobble so the two don't look identical */
.card + .card .card-blob { transform: scaleX(-1); }

.card-header {
  display: block;
  background: var(--sage);
  color: var(--white);
  font-size: 26px;
  font-weight: 800;
  text-align: left;
  padding: 12px 18px;
  border-radius: 28px 34px 24px 32px / 32px 26px 34px 28px;
  margin: 0 8px 12px;   /* inset from the wavy card edge */
}

.card-media {
  height: 150px;
  border-radius: 26px 32px 22px 30px / 30px 24px 32px 26px;
  overflow: hidden;
  background: linear-gradient(160deg, #FBEFD9, #F3E2C2);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
/* Food emojis stand in for a photo — softened so they read as decorative */
.media-emoji {
  font-size: clamp(40px, 13vw, 56px);
  opacity: .8;
  filter: drop-shadow(0 3px 5px rgba(91, 83, 64, .12));
}

/* Areas list */
.areas { list-style: none; padding: 6px 10px 10px; }
.areas li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 2px;
  font-size: 18px;
  font-weight: 700;
  color: var(--sage-dark);
}
.areas .check { color: var(--sage); flex: none; }
.areas .area-name { flex: 1; white-space: nowrap; }
.areas .area-time { color: var(--ink-soft); font-weight: 700; }

/* Closed-kitchen state */
.closed-card .card-header { background: var(--terracotta-dp); }
.closed-note { text-align: center; color: var(--ink); padding: 10px 6px; font-weight: 700; }

/* Decorative doodles */
.doodle { position: absolute; opacity: .8; pointer-events: none; }
.doodle.tr { top: -6px; right: 10px; }
.doodle.bl { bottom: 8px; left: 14px; }

/* ---------- Menu screen ---------- */
/* Negative margins let the tiles stretch out past the terracotta panel edges */
.menu-list { position: relative; z-index: 2; margin: 0 -34px; padding-top: 6px; }

.menu-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 400px;
  margin: 0 auto 16px;
  padding: 9px 24px;
  cursor: pointer;
  transition: transform .12s ease;
}
.menu-row:hover { transform: translateY(-2px); }
.menu-row:active { transform: translateY(0); }

/* Organic pale-cream rectangle behind each row */
.row-blob {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  filter: drop-shadow(0 5px 12px rgba(91, 83, 64, 0.14));
}
.row-blob path { fill: #F6E8CE; }
.menu-row:nth-child(even) .row-blob { transform: scaleX(-1); }

/* Organic photo frame */
.menu-thumb {
  position: relative;
  z-index: 1;
  flex: none;
  width: 92px;
  height: 70px;
  clip-path: url(#blobClip);
  overflow: hidden;
  background: linear-gradient(160deg, #FBEFD9, #EFDDBB);
  display: grid;
  place-items: center;
}
.menu-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb-emoji { font-size: 42px; }

.menu-name {
  position: relative;
  z-index: 1;
  flex: 1;
  color: var(--sage-dark);
  font-size: 26px;
  font-weight: 800;
  line-height: 1.15;
}
.menu-empty { position: relative; z-index: 2; text-align: center; color: var(--ink); padding: 20px; }

/* ---------- Order-status dome (bottom half-circle) ---------- */
.delivery-memo {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  z-index: 35;
  border: none;
  background: var(--sage);
  color: var(--white);
  min-width: 260px;
  max-width: 90%;
  padding: 20px 30px 16px;
  /* horizontal radius = half the width → a rising half-circle dome */
  border-radius: 50% 50% 0 0 / 90px 90px 0 0;
  box-shadow: 0 -6px 18px rgba(91, 83, 64, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  animation: memo-rise .4s ease;
}
/* Simple white line icon in a soft circle — matches the app's stroke iconography */
.memo-icon {
  flex: none;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
}
.memo-icon svg { width: 20px; height: 20px; display: block; }
.delivery-memo strong { font-weight: 900; }

/* Yellow "back to home" dome (menu screen) — shares the memo geometry */
.back-memo {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  z-index: 35;
  background: var(--gold);
  color: var(--white);
  min-width: 260px;
  max-width: 90%;
  padding: 20px 30px 16px;
  border-radius: 50% 50% 0 0 / 90px 90px 0 0;
  box-shadow: 0 -6px 18px rgba(91, 83, 64, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  animation: memo-rise .4s ease;
}
.back-memo:hover { background: var(--gold-dark); }
@keyframes memo-rise {
  from { transform: translate(-50%, 100%); }
  to   { transform: translate(-50%, 0); }
}

/* ---------- Drawer ---------- */
.scrim {
  position: fixed; inset: 0; background: rgba(91,83,64,0.4);
  opacity: 0; visibility: hidden; transition: opacity .2s ease; z-index: 40;
}
.scrim.open { opacity: 1; visibility: visible; }
.drawer {
  position: fixed; top: 0; left: 0; height: 100%; width: 78%; max-width: 320px;
  background: var(--cream); box-shadow: var(--shadow);
  transform: translateX(-100%); transition: transform .22s ease; z-index: 50;
  padding: 26px 22px;
}
.drawer.open { transform: translateX(0); }
.drawer h2 { color: var(--sage-dark); margin-bottom: 18px; }
.drawer nav a {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 14px; margin-bottom: 10px;
  background: var(--white); border-radius: 16px;
  color: var(--ink); text-decoration: none; font-weight: 700;
  box-shadow: 0 4px 10px rgba(91,83,64,0.08);
}

/* ---------- Cart badge ---------- */
.icon-btn { position: relative; }
.cart-badge {
  position: absolute; top: -4px; right: -6px;
  min-width: 20px; height: 20px; padding: 0 5px;
  display: none; place-items: center;
  background: var(--gold); color: var(--white);
  font-size: 12px; font-weight: 900;
  border-radius: var(--radius-pill);
  box-shadow: 0 2px 6px rgba(228,181,49,.5);
}

/* ---------- Category chips (menu) ---------- */
.chips {
  position: relative; z-index: 2;
  display: flex; gap: 8px; overflow-x: auto;
  padding: 2px 4px 14px; scrollbar-width: none;
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none; border: none; cursor: pointer;
  background: var(--white); color: var(--sage-dark);
  font-weight: 800; font-size: 14px;
  padding: 8px 16px; border-radius: var(--radius-pill);
  box-shadow: 0 3px 8px rgba(91,83,64,.10);
}
.chip.active { background: var(--sage); color: var(--white); }

.menu-price { position: relative; z-index: 1; color: var(--ink-soft); font-weight: 800; font-size: 17px; }

/* ---------- Dish detail ---------- */
.dish-hero {
  position: relative; z-index: 2;
  width: 210px; height: 170px; margin: 4px auto 10px;
  clip-path: url(#blobClip);
  background: linear-gradient(160deg, #FBEFD9, #EFDDBB);
  display: grid; place-items: center; overflow: hidden;
}
.dish-hero img { width: 100%; height: 100%; object-fit: cover; }
.dish-hero .thumb-emoji { font-size: 84px; }
.dish-body { position: relative; z-index: 2; max-width: 350px; margin: 0 auto; }
.dish-title-row { display: flex; align-items: center; gap: 10px; }
.dish-title { color: var(--white); font-size: 30px; font-weight: 900; flex: 1; }
.fav-btn {
  border: none; background: var(--white); color: var(--terracotta-dp);
  width: 44px; height: 44px; border-radius: 50%; font-size: 22px; cursor: pointer;
  box-shadow: 0 4px 10px rgba(91,83,64,.16); flex: none;
}
.fav-btn.on { background: var(--gold); color: var(--white); }
.dish-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.meta-pill {
  background: rgba(255,255,255,.85); color: var(--ink);
  font-size: 13px; font-weight: 800;
  padding: 6px 12px; border-radius: var(--radius-pill);
}
.dish-desc { color: #fff; font-weight: 700; line-height: 1.45; margin-bottom: 12px; }
.dish-section { background: var(--white); border-radius: 22px 28px 20px 26px; padding: 14px 16px; margin-bottom: 12px; }
.dish-section h3 { color: var(--sage-dark); font-size: 15px; margin-bottom: 4px; }
.dish-section p { font-size: 14px; font-weight: 700; color: var(--ink); line-height: 1.4; }

/* Sticky add-to-cart bar */
.addbar {
  position: fixed; left: 50%; bottom: 0; transform: translateX(-50%);
  z-index: 35; width: min(92%, 430px);
  display: flex; align-items: center; gap: 12px;
  background: var(--sage); border-radius: 28px 28px 0 0;
  padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
  box-shadow: 0 -6px 18px rgba(91,83,64,.18);
}
.stepper { display: flex; align-items: center; gap: 4px; background: rgba(255,255,255,.18); border-radius: var(--radius-pill); }
.stepper button {
  border: none; background: transparent; color: var(--white);
  width: 38px; height: 38px; font-size: 22px; font-weight: 900; cursor: pointer;
}
.stepper span { color: var(--white); font-weight: 900; min-width: 22px; text-align: center; }
.btn-primary {
  flex: 1; border: none; cursor: pointer;
  background: var(--gold); color: var(--white);
  font-size: 16px; font-weight: 900;
  padding: 12px 16px; border-radius: var(--radius-pill);
  box-shadow: 0 4px 10px rgba(228,181,49,.45);
}
.btn-primary:hover { background: var(--gold-dark); }
.btn-primary:disabled { opacity: .55; cursor: default; }

/* ---------- Cart / checkout ---------- */
.sheet {
  position: relative; z-index: 2;
  background: var(--white); border-radius: 26px 32px 24px 30px;
  padding: 16px; margin: 0 auto 16px; max-width: 320px;
  box-shadow: 0 6px 14px rgba(91,83,64,.10);
}
.sheet h2 { color: var(--sage-dark); font-size: 19px; margin-bottom: 10px; }
.cart-line { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1.5px dashed var(--cream-deep); }
.cart-line:last-child { border-bottom: none; }
.cart-emoji { font-size: 28px; flex: none; width: 40px; text-align: center; }
.cart-info { flex: 1; min-width: 0; }
.cart-name { font-weight: 800; font-size: 15px; }
.cart-price { color: var(--ink-soft); font-weight: 800; font-size: 13px; }
.mini-stepper { display: flex; align-items: center; gap: 2px; background: var(--cream); border-radius: var(--radius-pill); }
.mini-stepper button { border: none; background: transparent; color: var(--sage-dark); width: 30px; height: 30px; font-size: 18px; font-weight: 900; cursor: pointer; }
.mini-stepper span { font-weight: 900; min-width: 18px; text-align: center; font-size: 14px; }

.field { margin-bottom: 10px; }
.field label { display: block; font-size: 13px; font-weight: 800; color: var(--sage-dark); margin-bottom: 4px; }
.field label .req { color: var(--terracotta-dp); }
.field input, .field select, .field textarea {
  width: 100%; border: 2px solid var(--cream-deep); border-radius: 14px;
  background: var(--cream); color: var(--ink);
  font: inherit; font-weight: 700; font-size: 15px; padding: 10px 12px; outline: none;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--sage); }
.seg { display: flex; gap: 8px; margin-bottom: 12px; }
.seg button {
  flex: 1; border: 2px solid var(--cream-deep); background: var(--cream);
  color: var(--ink); font-weight: 900; font-size: 15px;
  padding: 10px; border-radius: 16px; cursor: pointer;
}
.seg button.active { background: var(--sage); border-color: var(--sage); color: var(--white); }
.coupon-row { display: flex; gap: 8px; }
.coupon-row input { flex: 1; }

/* Rewards / points redemption */
.reward-row { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.reward-info { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.reward-pts { font-weight: 900; font-size: 16px; color: var(--sage-dark); }
.reward-sub { font-weight: 800; font-size: 12.5px; color: var(--ink-soft); margin-top: 2px; }
.reward-switch { position: relative; flex: none; width: 52px; height: 30px; }
.reward-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.reward-slider {
  position: absolute; inset: 0; border-radius: var(--radius-pill);
  background: var(--cream-deep); transition: background .18s ease;
}
.reward-slider::before {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 24px; height: 24px; border-radius: 50%; background: var(--white);
  box-shadow: 0 2px 5px rgba(91,83,64,.3); transition: transform .18s ease;
}
.reward-switch input:checked ~ .reward-slider { background: var(--sage); }
.reward-switch input:checked ~ .reward-slider::before { transform: translateX(22px); }

/* Payment method picker */
.pay-methods { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pay-opt {
  border: 2px solid var(--cream-deep); background: var(--cream);
  color: var(--ink); font: inherit; font-weight: 900; font-size: 15px;
  padding: 11px 10px; border-radius: 14px; cursor: pointer; transition: all .12s ease;
}
.pay-opt.active { background: var(--sage); border-color: var(--sage); color: var(--white); }
.pay-note { font-size: 13px; font-weight: 700; color: var(--ink-soft); margin-top: 10px; line-height: 1.4; }
.btn-small {
  border: none; background: var(--sage); color: var(--white);
  font-weight: 900; padding: 0 16px; border-radius: 14px; cursor: pointer;
}
.totals { font-size: 15px; font-weight: 800; }
.totals div { display: flex; justify-content: space-between; padding: 3px 0; }
.totals .grand { font-size: 19px; font-weight: 900; color: var(--sage-dark); border-top: 2px solid var(--cream-deep); margin-top: 6px; padding-top: 8px; }
.form-error { color: #C0563B; font-weight: 800; font-size: 14px; text-align: center; min-height: 20px; padding: 4px; }
.empty-note { position: relative; z-index: 2; text-align: center; color: var(--white); font-weight: 800; font-size: 18px; padding: 30px 10px; }

/* ---------- Order tracking ---------- */
.track-steps { list-style: none; padding: 4px 6px; }
.track-steps li { display: flex; align-items: flex-start; gap: 12px; position: relative; padding-bottom: 22px; }
.track-steps li:last-child { padding-bottom: 4px; }
.track-dot {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  background: var(--cream-deep); color: var(--white);
  display: grid; place-items: center; font-size: 14px; font-weight: 900; z-index: 1;
}
.track-steps li::before {
  content: ''; position: absolute; left: 12px; top: 26px; bottom: 0;
  width: 3px; background: var(--cream-deep);
}
.track-steps li:last-child::before { display: none; }
.track-steps li.done .track-dot { background: var(--sage); }
.track-steps li.done::before { background: var(--sage); }
.track-steps li.current .track-dot { background: var(--gold); box-shadow: 0 0 0 5px rgba(242,201,76,.3); }
.track-label { font-weight: 800; font-size: 16px; padding-top: 3px; color: var(--ink-soft); }
li.done .track-label, li.current .track-label { color: var(--ink); }
.track-eta { text-align: center; color: var(--sage-dark); font-weight: 900; font-size: 17px; padding: 6px 0 2px; }
.pay-due { text-align: center; color: var(--terracotta-dp); font-weight: 900; font-size: 15px; padding: 6px 8px 2px; line-height: 1.35; }

/* ---------- Auth (login / sign-up) ---------- */
.auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: 28px 16px; }
.auth-card {
  width: 100%; max-width: 380px;
  background: var(--white);
  border-radius: 30px 36px 28px 34px;
  box-shadow: var(--shadow);
  padding: 28px 24px 30px;
}
.auth-brand { text-align: center; margin-bottom: 18px; }
.auth-logo { width: 92px; height: 92px; display: block; margin: 0 auto 4px; filter: drop-shadow(0 6px 14px rgba(91, 83, 64, 0.16)); }
.auth-brand .brand-word { font-family: "Kaushan Script", cursive; color: var(--sage-dark); font-size: 38px; font-weight: 400; line-height: 1.05; margin: 4px 0 2px; }
.auth-brand .brand-sub { font-weight: 800; letter-spacing: 0.32em; text-transform: uppercase; color: var(--terracotta-dp); font-size: 13px; margin-bottom: 6px; padding-left: 0.32em; }
.auth-brand p { color: var(--ink-soft); font-weight: 700; font-size: 14px; line-height: 1.35; }
.auth-seg { margin-bottom: 16px; }
.auth-seg button { border-radius: var(--radius-pill); }

/* ---------- Account screen ---------- */
.points-hero {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  background: linear-gradient(160deg, #FBEFD9, #F3E2C2);
  border-radius: 18px 22px 16px 20px; padding: 14px 16px; margin-top: 4px;
}
.points-num { font-size: 34px; font-weight: 900; color: var(--sage-dark); line-height: 1; }
.points-lbl { color: var(--ink-soft); font-weight: 800; font-size: 14px; }
.hist-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0; border-bottom: 1.5px dashed var(--cream-deep);
  text-decoration: none; color: var(--ink);
}
.hist-row:last-of-type { border-bottom: none; }
.hist-emoji { font-size: 24px; flex: none; width: 34px; text-align: center; }
.hist-info { flex: 1; min-width: 0; }
.hist-go { color: var(--ink-soft); font-size: 24px; font-weight: 900; flex: none; }

/* ---------- Narrow phones: keep the topbar on one line ---------- */
@media (max-width: 380px) {
  .app { padding: 12px 12px 28px; }
  .topbar { gap: 8px; padding: 10px 12px; }
  .points-pill { padding: 8px 11px; font-size: 14px; }
  .search { gap: 7px; }
  .search input { font-size: 14px; }
  .icon-btn svg { width: 24px; height: 24px; }
}