/* Online ordering — the Add controls on the menu, the cart drawer, and the
   checkout inside it.

   Loaded by index.html alongside order.js. It is a separate file rather than
   another block appended to the 6 MB of inline CSS in the page because this is
   the one part of the site that is edited as a unit, and because a stylesheet
   the browser can cache is worth more here than one more inline rule set.

   Every colour comes from the :root custom properties already defined in
   index.html (--gold, --cream, --charcoal, --red …). Nothing here introduces a
   palette of its own: a cart that looks like a generic e-commerce widget bolted
   onto a prohibition-era menu is exactly what replacing Dineblast was meant to
   get away from. */

/* ── Add to cart, on the menu item ─────────────────────────────────────── */

/* The row sits under the description. It is laid out as a flex row so a variant
   picker and the button share a line on a desktop and wrap on a phone. */
.oo-add-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  margin-top: .7rem;
}

.oo-variant {
  background: rgba(10, 10, 8, .55);
  color: var(--cream);
  border: 1px solid rgba(213, 184, 90, .28);
  font-family: "Cormorant Garamond", serif;
  font-size: .92rem;
  padding: .32rem .5rem;
  cursor: pointer;
  max-width: 100%;
}

.oo-variant:focus-visible,
.oo-add:focus-visible,
.oo-qty button:focus-visible,
.oo-drawer :focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 2px;
}

.oo-add {
  font-family: "Cormorant Garamond", serif;
  font-size: .74rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 700;
  padding: .38rem 1rem;
  cursor: pointer;
  color: var(--gold);
  background: rgba(213, 184, 90, .06);
  border: 1px solid rgba(213, 184, 90, .4);
  transition: background .2s, color .2s, border-color .2s;
}

.oo-add:hover {
  background: var(--gold);
  color: #0A0A08;
  border-color: var(--gold);
}

/* Confirmation is on the button itself rather than in a toast. On a phone the
   button is under the reader's thumb and a toast at the other end of the screen
   is a message delivered where nobody is looking. */
.oo-add.is-added {
  background: var(--gold);
  color: #0A0A08;
  border-color: var(--gold);
}

/* The kids menu prints its dishes as bare rows with no price beside them, so an
   Add button on its own line would float away from the dish it belongs to. */
.kids-item .oo-add-row {
  margin-top: .35rem;
}

/* Sides and soups are compact rows and each needs its controls placed
   differently: a side row is a flex line with the price pushed to the far end,
   so the Add row has to claim a full line of its own rather than becoming a
   third item fighting for space; a soup card is centre-aligned text, so its
   controls are centred to match. */
.side-row .oo-add-row {
  flex-basis: 100%;
  margin-top: .45rem;
}

.soup-item .oo-add-row {
  justify-content: center;
  margin-top: .55rem;
}

.side-row {
  flex-wrap: wrap;
}

/* ── The floating cart button ──────────────────────────────────────────── */

.oo-fab {
  position: fixed;
  right: 1.1rem;
  bottom: 1.1rem;
  z-index: 940;
  display: none; /* shown by order.js once the catalog has loaded */
  align-items: center;
  gap: .5rem;
  padding: .8rem 1.25rem;
  border: 1px solid var(--gold);
  background: var(--gold);
  color: #0A0A08;
  font-family: "Cormorant Garamond", serif;
  font-size: .82rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 26px rgba(0, 0, 0, .5);
  transition: transform .2s, background .2s;
}

.oo-fab:hover { background: var(--gold-light); transform: translateY(-2px); }
.oo-fab[hidden] { display: none !important; }
.oo-fab.is-visible { display: flex; }

.oo-fab-count {
  background: var(--red);
  color: var(--cream);
  border-radius: 999px;
  min-width: 1.5rem;
  padding: .1rem .4rem;
  font-size: .78rem;
  line-height: 1.3;
  text-align: center;
}

/* ── Drawer ────────────────────────────────────────────────────────────── */

.oo-scrim {
  position: fixed;
  inset: 0;
  background: rgba(5, 5, 4, .72);
  opacity: 0;
  pointer-events: none;
  transition: opacity .28s ease;
  z-index: 950;
}

.oo-scrim.is-open { opacity: 1; pointer-events: auto; }

.oo-drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: min(430px, 100vw);
  background: var(--dark);
  border-left: 1px solid rgba(213, 184, 90, .28);
  transform: translateX(100%);
  transition: transform .3s cubic-bezier(.32, .72, 0, 1);
  z-index: 960;
  display: flex;
  flex-direction: column;
  color: var(--cream);
}

.oo-drawer.is-open { transform: translateX(0); }

/* Respect a reader who has asked the system for less motion — the drawer still
   appears, it simply stops sliding. */
@media (prefers-reduced-motion: reduce) {
  .oo-drawer, .oo-scrim { transition: none; }
}

.oo-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  border-bottom: 1px solid rgba(213, 184, 90, .18);
  flex-shrink: 0;
}

.oo-head h2 {
  font-family: "Playfair Display", serif;
  font-size: 1.15rem;
  color: var(--gold);
  letter-spacing: .06em;
  margin: 0;
}

.oo-close {
  background: none;
  border: none;
  color: rgba(244, 238, 224, .6);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 .25rem;
}

.oo-close:hover { color: var(--gold); }

.oo-body {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 1.25rem;
  -webkit-overflow-scrolling: touch;
}

.oo-empty {
  text-align: center;
  color: rgba(244, 238, 224, .5);
  font-style: italic;
  padding: 3rem 1rem;
  line-height: 1.7;
}

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

.oo-line {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .35rem .75rem;
  padding: .85rem 0;
  border-bottom: 1px solid rgba(213, 184, 90, .12);
}

.oo-line-name {
  font-family: "Playfair Display", serif;
  font-size: 1rem;
  line-height: 1.35;
}

.oo-line-variant {
  display: block;
  font-family: "Cormorant Garamond", serif;
  font-size: .82rem;
  color: var(--gold-dark);
  font-style: italic;
}

.oo-line-price {
  font-family: "Cormorant Garamond", serif;
  color: var(--gold);
  white-space: nowrap;
}

.oo-line-controls {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
}

.oo-qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(213, 184, 90, .3);
}

.oo-qty button {
  background: none;
  border: none;
  color: var(--gold);
  width: 2rem;
  height: 1.9rem;
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
}

.oo-qty button:hover { background: rgba(213, 184, 90, .12); }
.oo-qty span { min-width: 1.9rem; text-align: center; font-size: .95rem; }

.oo-note {
  flex: 1;
  min-width: 9rem;
  background: rgba(10, 10, 8, .5);
  border: 1px solid rgba(213, 184, 90, .18);
  color: var(--cream);
  font-family: "Cormorant Garamond", serif;
  font-size: .88rem;
  padding: .35rem .5rem;
}

.oo-note::placeholder { color: rgba(244, 238, 224, .3); font-style: italic; }

.oo-remove {
  background: none;
  border: none;
  color: rgba(244, 238, 224, .45);
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  font-family: "Cormorant Garamond", serif;
}

.oo-remove:hover { color: var(--red); }

/* ── Totals ────────────────────────────────────────────────────────────── */

.oo-totals {
  margin-top: 1rem;
  padding-top: .85rem;
  border-top: 1px solid rgba(213, 184, 90, .22);
  font-family: "Cormorant Garamond", serif;
}

.oo-total-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .22rem 0;
  font-size: .95rem;
  color: rgba(244, 238, 224, .72);
}

.oo-total-row.is-grand {
  margin-top: .5rem;
  padding-top: .6rem;
  border-top: 1px solid rgba(213, 184, 90, .22);
  font-size: 1.18rem;
  color: var(--gold);
  font-weight: 600;
}

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

.oo-form { margin-top: 1.4rem; }

.oo-form h3 {
  font-family: "Playfair Display", serif;
  font-size: 1rem;
  color: var(--gold);
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: .8rem;
}

.oo-field { margin-bottom: .8rem; }

.oo-field label {
  display: block;
  font-family: "Cormorant Garamond", serif;
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(244, 238, 224, .55);
  margin-bottom: .28rem;
}

.oo-field input,
.oo-field select,
.oo-field textarea {
  width: 100%;
  background: rgba(10, 10, 8, .55);
  border: 1px solid rgba(213, 184, 90, .22);
  color: var(--cream);
  font-family: "Cormorant Garamond", serif;
  font-size: 1rem;
  padding: .55rem .6rem;
}

.oo-field textarea { resize: vertical; min-height: 3.2rem; }
.oo-field input:focus, .oo-field select:focus, .oo-field textarea:focus {
  border-color: var(--gold);
  outline: none;
}

.oo-field-row { display: flex; gap: .7rem; }
.oo-field-row .oo-field { flex: 1; }

/* The honeypot. Off-screen rather than display:none, because some bots skip
   fields that are not rendered at all — and hidden from assistive technology so
   nobody using a screen reader is ever asked to fill it in. */
.oo-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.oo-hint {
  font-family: "Cormorant Garamond", serif;
  font-size: .84rem;
  font-style: italic;
  color: rgba(244, 238, 224, .45);
  line-height: 1.6;
  margin-top: -.4rem;
  margin-bottom: .8rem;
}

.oo-payment-note {
  border: 1px solid rgba(122, 96, 28, .3);
  background: rgba(122, 96, 28, .05);
  padding: .7rem .85rem;
  font-family: "Cormorant Garamond", serif;
  font-size: .88rem;
  line-height: 1.6;
  color: rgba(244, 238, 224, .68);
  margin: .9rem 0;
}

/* ── Footer of the drawer ──────────────────────────────────────────────── */

.oo-foot {
  flex-shrink: 0;
  padding: .9rem 1.25rem 1.15rem;
  border-top: 1px solid rgba(213, 184, 90, .18);
  background: var(--charcoal);
}

.oo-submit {
  width: 100%;
  padding: .85rem 1rem;
  background: var(--gold);
  color: #0A0A08;
  border: none;
  font-family: "Cormorant Garamond", serif;
  font-size: .9rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s;
}

.oo-submit:hover:not(:disabled) { background: var(--gold-light); }
.oo-submit:disabled { opacity: .45; cursor: not-allowed; }

.oo-msg {
  font-family: "Cormorant Garamond", serif;
  font-size: .92rem;
  line-height: 1.6;
  padding: .7rem .85rem;
  margin-bottom: .75rem;
}

.oo-msg.is-error {
  border: 1px solid rgba(139, 26, 26, .55);
  background: rgba(139, 26, 26, .16);
  color: #F0C9C9;
}

.oo-msg.is-ok {
  border: 1px solid rgba(213, 184, 90, .5);
  background: rgba(213, 184, 90, .1);
  color: var(--gold-light);
}

/* ── Confirmation ──────────────────────────────────────────────────────── */

.oo-done { text-align: center; padding: 2.5rem 1rem; }

.oo-done h3 {
  font-family: "Playfair Display", serif;
  font-size: 1.5rem;
  color: var(--gold);
  margin-bottom: .8rem;
}

.oo-done p {
  font-family: "Cormorant Garamond", serif;
  font-size: 1rem;
  line-height: 1.75;
  color: rgba(244, 238, 224, .75);
  margin-bottom: .7rem;
}

.oo-ref {
  display: inline-block;
  margin: .5rem 0 1rem;
  padding: .4rem 1rem;
  border: 1px solid rgba(213, 184, 90, .45);
  font-family: "Cormorant Garamond", serif;
  font-size: 1.15rem;
  letter-spacing: .18em;
  color: var(--gold);
}

/* The front counter's number, shown when the kitchen system could not be
   reached. Sized like a call-to-action rather than body text because at that
   moment it IS the way to place the order — and it is a tel: link, so on the
   phone the guest is holding it is one tap. */
.oo-call {
  display: block;
  margin: .6rem auto 1.1rem;
  padding: .75rem 1rem;
  max-width: 16rem;
  background: var(--gold);
  color: #0A0A08;
  text-decoration: none;
  font-family: "Playfair Display", serif;
  font-size: 1.35rem;
  letter-spacing: .06em;
  font-weight: 700;
}

.oo-call:hover { background: var(--gold-light); }

/* Keep the drawer usable on a short phone in landscape, where a fixed footer
   plus a long form leaves almost no scrollable body. */
@media (max-height: 520px) {
  .oo-body { padding: .7rem 1rem; }
  .oo-foot { padding: .7rem 1rem .8rem; }
}