/* La Pozoleria Mexicana — online pickup ordering styles (landing page).
   STAGED FILE — not part of any site build yet. See INTEGRATION.md.
   Uses the landing's own palette variables (--yellow, --ink, --paper,
   --line, --radius, --shadow) so it blends with the existing page.
   Everything is namespaced .oo-* to avoid colliding with landing CSS.
   Palette re-key (site-v2, owner-directed): the fallback hexes below
   hold the Pozoleria logo family (marigold #fab501 primary / orange
   #f98c00 deeper) so the ordering chrome matches the landing tokens. */

section.card ul.items > li { position: relative; }

/* --- Per-item stepper (injected into each menu <li>) --- */
.oo-stepper {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: 10px; vertical-align: middle; white-space: nowrap;
}
.oo-step {
  width: 30px; height: 30px; border-radius: 999px;
  border: 1px solid var(--line, #eadfce); background: var(--paper, #fffdf8);
  color: var(--ink, #2a140e); font-size: 1.05rem; font-weight: 800;
  line-height: 1; cursor: pointer; padding: 0;
}
.oo-step:hover:not(:disabled) { border-color: var(--yellow, #fab501); background: #fdf0d2; }
.oo-step:disabled { opacity: .35; cursor: default; }
.oo-step.oo-plus { background: var(--yellow, #fab501); border-color: var(--yellow2, #f98c00); color: #2a140e; }
.oo-qty { min-width: 1.2em; text-align: center; font-weight: 800; visibility: hidden; }
.oo-stepper.oo-has .oo-qty { visibility: visible; }

/* --- Sticky cart bar --- */
.oo-cartbar {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 60;
  display: flex; align-items: center; gap: 14px;
  padding: 13px 20px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--black, #1a0b09); color: #fff;
  font: inherit; font-weight: 800; font-size: .98rem;
  box-shadow: 0 14px 34px rgba(24, 9, 5, .28);
  max-width: calc(100vw - 24px);
}
.oo-cartbar:hover { background: var(--black2, #2a130e); }
.oo-cartbar-total { color: var(--yellow, #fab501); white-space: nowrap; }

/* --- Checkout overlay + panel --- */
body.oo-lock { overflow: hidden; }
.oo-overlay {
  position: fixed; inset: 0; z-index: 70;
  background: rgba(24, 9, 5, .55);
  display: flex; align-items: flex-end; justify-content: center;
}
.oo-overlay[hidden] { display: none; }
.oo-panel {
  position: relative; background: var(--paper, #fffdf8); color: var(--ink, #2a140e);
  width: min(560px, 100%); max-height: 92svh; overflow-y: auto;
  border-radius: 20px 20px 0 0; padding: 22px 20px 26px;
  box-shadow: var(--shadow, 0 10px 30px rgba(24, 9, 5, .08));
}
@media (min-width: 640px) {
  .oo-overlay { align-items: center; padding: 18px; }
  .oo-panel { border-radius: var(--radius, 18px); }
}
.oo-x {
  position: absolute; top: 10px; right: 12px;
  width: 44px; height: 44px; border-radius: 999px; border: 0;
  background: var(--bg, #f7f0e6); font-size: 1.25rem; cursor: pointer; line-height: 1;
}
.oo-h { margin: 2px 0 14px; font-size: 1.35rem; }
.oo-empty { color: var(--muted, #7a5c50); }

.oo-lines { list-style: none; margin: 0 0 12px; padding: 0; }
.oo-lines li {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 0; border-bottom: 1px solid var(--line, #eadfce);
}
.oo-line-name { flex: 1; font-weight: 650; }
.oo-line-ctl { display: inline-flex; align-items: center; gap: 7px; }
.oo-line-ctl .oo-step { width: 26px; height: 26px; font-size: .95rem; }
.oo-line-price { min-width: 64px; text-align: right; font-weight: 800; }

.oo-totals { margin: 10px 0 16px; }
.oo-totals > div { display: flex; justify-content: space-between; padding: 3px 0; color: var(--muted, #7a5c50); }
.oo-totals > div b { color: var(--ink, #2a140e); }
.oo-totals .oo-grand { font-size: 1.08rem; border-top: 2px solid var(--line, #eadfce); margin-top: 6px; padding-top: 8px; }
.oo-totals .oo-grand span, .oo-totals .oo-grand b { color: var(--ink, #2a140e); font-weight: 850; }

.oo-form label { display: block; font-weight: 700; font-size: .92rem; margin: 0 0 12px; }
.oo-form input, .oo-form select {
  display: block; width: 100%; margin-top: 5px; padding: 11px 12px;
  font: inherit; font-weight: 500; color: inherit;
  border: 1px solid var(--line, #eadfce); border-radius: 12px; background: #fff;
}
.oo-form input:focus, .oo-form select:focus { outline: 2px solid var(--yellow, #fab501); outline-offset: 1px; }
.oo-form small { display: block; margin-top: 4px; color: var(--muted, #7a5c50); font-weight: 500; }
.oo-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.oo-paynote { color: var(--muted, #7a5c50); font-size: .9rem; margin: 4px 0 10px; }
.oo-error {
  background: #fbe9e2; color: #7a0c14; border: 1px solid #ecc4b4;
  border-radius: 12px; padding: 10px 12px; font-weight: 650;
}
.oo-submit {
  width: 100%; padding: 14px; border: 0; border-radius: 14px; cursor: pointer;
  background: var(--yellow, #fab501); color: #2a140e;
  font: inherit; font-weight: 850; font-size: 1.02rem;
}
.oo-submit:hover:not(:disabled) { background: var(--yellow2, #f98c00); }
.oo-submit:disabled { opacity: .45; cursor: default; }

/* --- Confirmation view --- */
.oo-view-sent { text-align: center; padding-top: 8px; }
.oo-sent-check {
  width: 58px; height: 58px; margin: 0 auto 10px; border-radius: 999px;
  background: var(--green, #1e995d); color: #fff;
  font-size: 1.8rem; font-weight: 900; line-height: 58px;
}
.oo-ref {
  font-size: 2rem; font-weight: 900; letter-spacing: .08em;
  background: var(--bg, #f7f0e6); border: 2px dashed var(--yellow2, #f98c00);
  border-radius: 14px; padding: 12px; margin: 10px 0 14px;
}
.oo-sent-meta { font-size: 1.02rem; }
.oo-view-sent .oo-submit { margin-top: 8px; }

/* Print: ordering chrome never appears on the printed counter menu. */
@media print {
  .oo-stepper, .oo-cartbar, .oo-overlay { display: none !important; }
}