/* Manrope is loaded by a <link> in each page's <head> (an @import here would
   hold up first paint until this file had been fetched and parsed). */

/* One palette for the whole public site — the restaurant app's: light-grey
   page, white cards, black pills, a single orange accent. Status colours
   (success / error) only where meaning needs them. */
:root {
  --background: #F4F4F4;
  --surface: #FFFFFF;
  --surface-sunken: #EFEFEF;
  --ink: #0E0E0E;
  --ink-muted: #8C8C8C;
  --ink-faint: #B5B5B5;
  --border: #ECECEC;
  --divider: #E4E4E4;
  --sage: #0E0E0E;
  --mustard: #E4572E;
  --mustard-dark: #C94E1A;
  --black: #0E0E0E;
  --white: #FFFFFF;
  --success: #1F9D55;
  --success-bg: #E5F6EC;
  --error: #E5383B;
  --error-bg: #FDE8E8;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--background);
  color: var(--ink);
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .serif {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 600;
  margin: 0;
}

/* Heading in two weights: bold words, then a light grey one (see splitTitle in menu.js). */
.ttl-light {
  font-weight: 400;
  color: #A5A5A5;
}

a {
  color: inherit;
}

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

.eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--sage);
}

.container {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 24px;
}

.pill-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 13px;
  font-weight: 500;
}

.veg-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.veg-dot.veg { background: var(--success); }
.veg-dot.nonveg { background: var(--error); }

/* UPI payment on a placed order (pays the restaurant directly).
   Compact: pay + "I've paid" share a row, details sit in one small line. */
.myorder-pay {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}

.myorder-pay-row {
  width: 100%;
  display: flex;
  gap: 6px;
}

.myorder-pay-btn,
.myorder-paid-btn {
  min-height: 38px;
  padding: 6px 10px;
  border-radius: 10px;
  font: inherit;
  font-weight: 600;
  font-size: 13px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.myorder-pay-btn {
  flex: 2 1 0;
  min-width: 0;
  background: var(--black);
  color: var(--white);
  border: 1px solid var(--black);
}

.myorder-paid-btn {
  flex: 1 0 auto;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--border);
}

.myorder-paid-btn:disabled {
  opacity: 0.6;
}

.myorder-pay-note {
  width: 100%;
  font-size: 12px;
  color: var(--success);
}

.myorder-pay-note.is-error {
  color: var(--error);
}

.myorder-pay-note.is-muted {
  color: var(--ink-muted);
}

.myorder-pay-btn.is-app {
  flex: 1 1 0;
}

.myorder-pay-copy {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 10px;
  row-gap: 2px;
  font-size: 12px;
  color: var(--ink-muted);
}

.myorder-pay-copy > span {
  flex: 1 1 auto;
  min-width: 0;
}

.myorder-pay-copy strong {
  color: var(--ink);
}

.myorder-pay-upi {
  word-break: break-all;
}

.myorder-copy-btn {
  border: none;
  background: none;
  padding: 4px 0;
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.myorder-online {
  width: 100%;
  display: flex;
  gap: 6px;
}

.myorder-online-mobile {
  flex: 1 1 0;
  min-width: 0;
  min-height: 38px;
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 16px; /* 16px stops iOS zooming in on focus */
}

.myorder-online-mobile.input-error {
  border-color: var(--error);
}

.myorder-online-btn {
  flex: 1.3 1 0;
  min-height: 38px;
  border: none;
  border-radius: 10px;
  background: var(--black);
  color: var(--white);
  font: inherit;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}

.myorder-online-btn:disabled {
  opacity: 0.6;
}

.myorder-pay-or {
  width: 100%;
  text-align: center;
  font-size: 12px;
  color: var(--ink-faint);
}

.checkout-pay-note {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-muted);
}

.checkout-pay-note[hidden] {
  display: none;
}

/* Unpaid pay-first order: panel pinned open, payment is the only next step */
.myorder-bar.is-pay-required .myorder-summary {
  color: #C42D2F;
  font-weight: 700;
}

.pay-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-radius: 4px;
  background: var(--mustard);
  box-shadow: 0 0 0 3px rgba(228, 87, 46, 0.25);
  vertical-align: middle;
}

.checkout-title {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.checkout-table-label {
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--white);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  line-height: 1;
  text-transform: uppercase;
}

.checkout-table-label[hidden] {
  display: none;
}

.myorder-btn[hidden],
.myorder-toggle[hidden],
.table-input[hidden] {
  display: none;
}

/* Pay-later bill: "anything else?" before paying. */
.order-more-dialog {
  position: fixed;
  inset: 0;
  z-index: 1001;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 16px;
  background: rgba(244, 244, 244, 0.6);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.order-more-card {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px 22px 22px;
  border-radius: 28px;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 -10px 40px rgba(14, 14, 14, 0.1);
  font-size: 13.5px;
  line-height: 1.45;
}
.order-more-card strong { font-size: 22px; line-height: 1.15; font-weight: 800; letter-spacing: -0.8px; }
.order-more-card span { color: var(--ink-muted); font-weight: 500; }
.order-more-buttons { display: flex; gap: 10px; margin-top: 14px; }
.order-more-buttons button {
  flex: 1;
  height: 52px;
  border-radius: 26px;
  font: inherit;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
}
.order-more-yes { border: 0; background: var(--ink); color: var(--white); }
.order-more-no { border: 1px solid var(--border); background: #fff; color: var(--ink); }

/* Cooking note chips under each checkout line. */
.checkout-line {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 0 12px;
  border-top: 1px solid var(--border);
}
.checkout-line:first-child { border-top: 0; }
.note-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.note-chip {
  border: 0;
  border-radius: 999px;
  padding: 8px 13px;
  background: var(--background);
  color: #777777;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.note-chip.is-on { background: var(--ink); color: var(--white); }
.note-input {
  flex: 1 1 100%;
  border: 0;
  border-radius: 18px;
  padding: 11px 14px;
  background: var(--background);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
}
.note-input::placeholder { color: var(--ink-faint); }
.note-input:focus { outline: none; box-shadow: 0 0 0 1.5px var(--ink); }

/* Contents page footer: every diner who opens a menu sees who made it. */
.powered-by {
  display: block;
  margin-top: 28px;
  padding-top: 14px;
  border-top: 1px dashed rgba(0, 0, 0, 0.12);
  text-align: center;
  font-size: 12px;
  color: #757575;
  text-decoration: none;
}
.powered-by b { color: #111111; }

/* Language switch (अ/A) on the menu cover. */
.icon-btn.lang-btn { width: auto; padding: 0 10px; font-size: 13px; font-weight: 700; }

/* Menu only (no order pack): a friendly line instead of a cart. */
.menu-only-note {
  margin: 12px 0 4px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #FFF3DE;
  color: #B77400;
  font-size: 13px;
  line-height: 1.4;
}

/* WhatsApp chat icon (the "menu coming soon" page). */
.wa-btn { color: #1DA851; }
.wa-btn svg { width: 18px; height: 18px; }