/* Mali Jasmine online ordering
   Palette: deep basil + jasmine cream + chilli red + turmeric gold.
   Signature element: the spice-level control below is a row of filling
   chilli dots rather than a generic dropdown - it's the one place the
   design takes a visual risk, everything else stays quiet and functional
   since this is a working order form, not a marketing page. */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Work+Sans:wght@400;500;600;700&display=swap');

:root {
  --ink: #1f2a24;
  --cream: #f7f0de;
  --cream-2: #efe4c4;
  --basil: #2f5233;
  --basil-dark: #203a25;
  --chilli: #c1441e;
  --chilli-dark: #9c3416;
  --gold: #c8962c;
  --line: #ddceA0;
  --white: #fffdf8;
  --radius: 10px;
  --shadow: 0 2px 10px rgba(31,42,36,0.10);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
html, body { max-width: 100%; overflow-x: hidden; }

/* Flex items default to min-width:auto, which can refuse to shrink below
   their content's natural width and force the whole row (and sometimes the
   whole page) wider than the viewport. Blanket override for the spots most
   likely to carry long dynamic text (special instructions, order names). */
.options-row > *, .cart-line > *, .cart-line-detail, .item-card-row > *,
.mobile-cart-bar > *, .item-card-line1 > * {
  min-width: 0;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: 'Work Sans', system-ui, sans-serif;
  line-height: 1.45;
}

h1, h2, h3, .brand {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  color: var(--basil-dark);
  margin: 0 0 .4em;
}

a { color: var(--basil-dark); }

/* ---------- header ---------- */
.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
  background: var(--basil-dark);
  color: var(--cream);
  padding: .9rem 1.25rem;
}
.site-header .brand {
  color: var(--white);
  text-decoration: none;
  font-size: 1.25rem;
  margin: 0;
}
.site-header .brand span {
  display: block;
  font-family: 'Work Sans', sans-serif;
  font-weight: 500;
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold);
}
.site-header nav a {
  color: var(--cream);
  text-decoration: none;
  margin-left: 1.25rem;
  font-size: .92rem;
}
.site-header nav a:hover { color: var(--gold); }

/* ---------- layout shells ---------- */
.wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 5rem;
}
.narrow {
  max-width: 480px;
  margin: 3rem auto;
  padding: 0 1.25rem;
}

.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: var(--shadow);
}

/* ---------- forms ---------- */
label { display: block; font-weight: 600; font-size: .88rem; margin: 1rem 0 .3rem; }
input[type=text], input[type=email], input[type=password], input[type=tel],
select, textarea {
  width: 100%;
  padding: .6rem .7rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  font: inherit;
  background: var(--white);
  color: var(--ink);
}
input:focus, select:focus, textarea:focus, button:focus, a.button:focus {
  outline: 3px solid var(--gold);
  outline-offset: 1px;
}
textarea { resize: vertical; min-height: 4.5em; }
.hint { font-size: .8rem; color: #5b6b60; margin-top: .25rem; }
.error-banner {
  background: #fbe3db;
  border: 1px solid var(--chilli);
  color: var(--chilli-dark);
  padding: .8rem 1rem;
  border-radius: 8px;
  margin-bottom: 1.2rem;
  font-size: .92rem;
}
.info-banner {
  background: #eaf1e6;
  border: 1px solid var(--basil);
  color: var(--basil-dark);
  padding: .8rem 1rem;
  border-radius: 8px;
  margin-bottom: 1.2rem;
  font-size: .92rem;
}
.status-banner-pending {
  background: var(--cream-2);
  border: 1px solid var(--gold);
  color: #7a5b12;
  padding: .8rem 1rem;
  border-radius: 8px;
  margin-bottom: 1.2rem;
  font-size: .92rem;
  display: flex;
  align-items: center;
  gap: .55rem;
}
.status-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  flex: none;
  border-radius: 50%;
  background: var(--gold);
  animation: status-pulse 1.4s ease-in-out infinite;
}
@keyframes status-pulse {
  0%, 100% { opacity: .35; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1); }
}
.status-banner-ready {
  background: var(--basil);
  border: 1px solid var(--basil-dark);
  color: var(--white);
  padding: .9rem 1rem;
  border-radius: 8px;
  margin-bottom: 1.2rem;
  font-size: 1.05rem;
  text-align: center;
}

button, a.button {
  display: inline-block;
  background: var(--basil);
  color: var(--white);
  border: none;
  padding: .7rem 1.4rem;
  border-radius: 8px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
}
button:hover, a.button:hover { background: var(--basil-dark); }
button.secondary, a.button.secondary { background: transparent; color: var(--basil-dark); border: 1px solid var(--basil); }
button.secondary:hover { background: var(--cream-2); }
button.danger, a.button.danger { background: var(--chilli); }
button.danger:hover, a.button.danger:hover { background: var(--chilli-dark); }
button:disabled { background: #b7bdb3; cursor: not-allowed; }

/* ---------- category tabs ---------- */
.category-tabs {
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
  overflow-x: visible;
  padding-bottom: .5rem;
  margin-bottom: 1.2rem;
  border-bottom: 1px solid var(--line);
}
.category-tabs button {
  background: var(--white);
  color: var(--basil-dark);
  border: 1px solid var(--line);
  white-space: nowrap;
  padding: .5rem 1rem;
  font-weight: 500;
  font-size: .88rem;
}
.category-tabs button.active {
  background: var(--basil);
  color: var(--white);
  border-color: var(--basil);
}
.category-tabs button.featured {
  border-color: var(--gold);
  color: #7a5b12;
  font-weight: 700;
}
.category-tabs button.featured.active {
  background: var(--gold);
  color: var(--white);
  border-color: var(--gold);
}
.specials-banner {
  background: var(--cream-2);
  border: 1px solid var(--gold);
  color: #7a5b12;
  padding: .7rem 1rem;
  border-radius: 8px;
  margin-bottom: 1.2rem;
  font-size: .95rem;
}
/* "Spend $X, get an item free" offer - deliberately bolder/louder than the
   quiet specials-banner above (Jeff, 8 Oct: wants this prominent) - solid
   chilli background rather than a tinted border, since it's the one thing
   on this page meant to grab attention rather than just inform. */
.offer-banner {
  background: var(--chilli);
  color: var(--white);
  border-radius: var(--radius);
  padding: .9rem 1.1rem;
  margin-bottom: 1.2rem;
  font-size: 1rem;
  text-align: center;
  box-shadow: var(--shadow);
}
.offer-banner b { font-size: 1.08em; }
.offer-banner .offer-banner-sub {
  display: block;
  margin-top: .25rem;
  font-size: .85rem;
  font-weight: 400;
  opacity: .92;
}
@media (max-width: 600px) {
  .category-tabs button { padding: .45rem .65rem; font-size: .78rem; }
}

/* ---------- menu grid ---------- */
.menu-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 2rem;
  align-items: start;
}
/* Grid items default to min-width:auto, same problem as flex items - a
   descendant's intrinsic content width (e.g. a <select> with a long option)
   can expand the grid TRACK itself past the viewport, rather than being
   clipped/wrapped within it. This was the actual remaining root cause of
   the mobile horizontal scroll on categories with long protein options
   (curries, noodles, stirfry, soups) - every fix so far constrained things
   *inside* #menuItems, but #menuItems' own container never stopped it from
   growing in the first place. */
.menu-layout > * { min-width: 0; }
@media (max-width: 880px) {
  .menu-layout { grid-template-columns: 1fr; }
  .cart-panel { position: static; }
  .wrap { padding-bottom: 6rem; } /* room for the floating mobile bar */
}

/* floating mobile order-summary bar - only shown once something's in the cart */
.mobile-cart-bar {
  display: none;
}
@media (max-width: 880px) {
  .mobile-cart-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    background: var(--basil-dark);
    color: var(--white);
    padding: .8rem 1.1rem;
    padding-bottom: calc(.8rem + env(safe-area-inset-bottom));
    box-shadow: 0 -2px 10px rgba(0,0,0,.15);
    z-index: 50;
    font-size: .92rem;
  }
  .mobile-cart-bar button {
    background: var(--gold);
    color: var(--ink);
    padding: .5rem 1rem;
  }
}

/* comfortable tap targets on touch devices */
@media (max-width: 880px) {
  button, a.button, select, input, .spice-seg, .note-toggle {
    min-height: 40px;
  }
  .item-thumb { width: 44px; height: 44px; }
}

.menu-category h2 {
  border-bottom: 2px solid var(--gold);
  padding-bottom: .35rem;
  margin-top: 2rem;
}
.menu-category-note {
  font-size: .85rem;
  color: #5b6b60;
  margin: -.4rem 0 1rem;
}

.item-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .7rem .8rem;
  margin-bottom: .6rem;
}
.item-card-row { display: flex; gap: .7rem; align-items: flex-start; }
.item-thumb {
  width: 52px; height: 52px;
  border-radius: 8px;
  object-fit: cover;
  flex: none;
  background: var(--cream-2);
  border: 1px solid var(--line);
}
.item-card-main { flex: 1; min-width: 0; }
.item-card-line1 {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  flex-wrap: wrap;
}
.item-code {
  font-size: .7rem;
  letter-spacing: .06em;
  color: var(--gold);
  font-weight: 700;
  flex: none;
}
.item-name {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  color: var(--basil-dark);
  font-size: 1rem;
  flex: 1;
  min-width: 0;
}
.item-price { font-weight: 700; color: var(--basil-dark); white-space: nowrap; font-size: .95rem; }

.item-card .options-row {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  align-items: center;
  margin-top: .45rem;
}

/* spice selector - MILD / MED / HOT / THAI-HOT. Always takes its own full
   row (flex-basis 100%) so it never has to compete for width with the qty
   select on the same line - that competition is what was pushing the whole
   page wider than the viewport on narrow phones. Also wraps internally as a
   second safety net on very narrow screens. */
.spice-select {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
}
@media (max-width: 700px) {
  .spice-select { flex: 1 1 100%; order: 3; }
  select.protein-select { flex: 1 1 100%; order: 1; }
  select.qty-select { order: 2; }
  .extras-toggle { order: 4; }
  .note-toggle { order: 5; }
  .add-btn { order: 6; }
}
.spice-seg {
  background: var(--white);
  color: var(--chilli-dark);
  border: 1px solid var(--chilli);
  border-radius: 6px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .02em;
  padding: .38rem .55rem;
  cursor: pointer;
  white-space: nowrap;
}
.spice-seg.active { background: var(--chilli); color: var(--white); }
.spice-seg[aria-pressed="true"]:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }

select.protein-select, select.qty-select {
  width: auto; max-width: 100%; padding: .38rem .5rem; font-size: .85rem;
}

.note-toggle, .extras-toggle {
  background: none;
  border: 1px dashed var(--line);
  color: var(--basil-dark);
  font-size: .78rem;
  padding: .38rem .6rem;
  border-radius: 7px;
  cursor: pointer;
  white-space: nowrap;
}
.note-toggle:hover, .extras-toggle:hover { background: var(--cream-2); }

.add-btn {
  padding: .38rem .9rem;
  font-size: .85rem;
  margin-left: auto;
}

/* extras panel - full-width block, one checkbox per line, revealed by the
   +Extras toggle button. Deliberately NOT an inline-wrapping row (that was
   part of what caused horizontal overflow on narrow phones before).
   display is set via :not([hidden]) rather than unconditionally - a bare
   `display: flex` here would have higher specificity than the browser's
   own `[hidden] { display: none }` rule and silently defeat it. */
.extras-panel {
  width: 100%;
  margin-top: .5rem;
  padding: .6rem .7rem;
  background: var(--cream-2);
  border-radius: 8px;
  gap: .45rem;
}
.extras-panel:not([hidden]) {
  display: flex;
  flex-direction: column;
}
.extras-panel label {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-weight: 400;
  font-size: .85rem;
  margin: 0;
}

.item-desc {
  font-size: .82rem;
  color: #4a564d;
  margin: .15rem 0 .45rem;
  line-height: 1.3;
}

.special-instr { margin-top: .5rem; }
.special-instr textarea { min-height: 2.6em; font-size: .85rem; }
.note-disclaimer { font-size: .74rem; color: #5b6b60; margin: .3rem 0 0; }


/* ---------- cart / order summary ---------- */
.cart-panel {
  position: sticky;
  top: 1rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.2rem;
}
.cart-panel h2 { font-size: 1.15rem; }
.cart-empty { color: #5b6b60; font-size: .9rem; }
.cart-line {
  display: flex;
  justify-content: space-between;
  gap: .6rem;
  padding: .55rem 0;
  border-bottom: 1px dashed var(--line);
  font-size: .88rem;
}
.cart-line-detail { color: #5b6b60; font-size: .8rem; }
.cart-line-remove {
  background: none; border: none; color: var(--chilli);
  cursor: pointer; font-size: .78rem; padding: 0; text-decoration: underline;
}
.cart-total {
  display: flex;
  justify-content: space-between;
  font-weight: 700;
  font-size: 1.1rem;
  margin-top: .8rem;
  padding-top: .8rem;
  border-top: 2px solid var(--gold);
}
.disclaimer {
  font-size: .76rem;
  color: #5b6b60;
  margin-top: .6rem;
}

.pickup-options { margin-top: 1.1rem; }
.pickup-options label.radio { display: flex; align-items: center; gap: .5rem; font-weight: 500; margin: .5rem 0; }
.pickup-options input[type=radio] { width: auto; }

/* ---------- order history ---------- */
.order-summary-card { margin-bottom: 1rem; }
.order-summary-card .meta { font-size: .82rem; color: #5b6b60; margin-bottom: .5rem; }
.order-item-line { font-size: .88rem; padding: .2rem 0; }

/* ---------- admin ---------- */
table.admin-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
table.admin-table th, table.admin-table td {
  text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--line);
}
table.admin-table th { background: var(--cream-2); }
.badge { display: inline-block; padding: .15rem .5rem; border-radius: 999px; font-size: .74rem; font-weight: 600; }
.badge.ok { background: #dcecd8; color: var(--basil-dark); }
.badge.warn { background: #fbe3db; color: var(--chilli-dark); }
.badge.muted { background: #eee; color: #666; }

/* ---------- "spend $X, get it free" offer pop-up ---------- */
.offer-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(31,42,36,.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: 1rem;
}
/* The modal is shown/hidden by toggling the `hidden` attribute in JS - but
   `display: flex` above beats the browser's own `[hidden] { display: none }`
   default (author CSS always wins over the UA stylesheet, same specificity
   or not), so without this the overlay never actually disappeared after
   Accept/Decline (bug in the original 4 Oct build, caught 8 Oct). */
.offer-modal-overlay[hidden] { display: none; }
.offer-modal {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.4rem;
  max-width: 360px;
  text-align: center;
}
.offer-modal p {
  font-size: 1.02rem;
  margin: 0 0 1.1rem;
  color: var(--ink);
}
.offer-modal-actions {
  display: flex;
  gap: .6rem;
  justify-content: center;
}
.offer-modal-actions button { flex: 1; }

footer.site-footer {
  text-align: center; font-size: .8rem; color: #5b6b60; padding: 2rem 1rem;
}