/* Movies in the Wild: night forest, string lights, firelight glow. One committed dark look.
   Display: Rubik Distressed (hero only). Labels/numbers: Bebas Neue. Body: Nunito Sans. */
:root {
  --night: #0a131d; --forest: #0f1c18; --card: rgba(16, 28, 26, .86); --card-solid: #13221f;
  --line: rgba(255, 214, 150, .14); --cream: #f4ead6; --muted: #a7b2a6;
  --ember: #f26a1b; --ember-hot: #ff8a3d; --ember-ink: #1b0d04; --glow: #ffc56b;
  --lake: #6ccaca; --wood: #6b4527; --wood-hi: #8d5c34;
  --good: #7fd69b; --good-soft: rgba(127, 214, 155, .14); --warn: #ffc56b; --warn-soft: rgba(255, 197, 107, .14);
  --display: 'Rubik Distressed', 'Impact', sans-serif;
  --label: 'Bebas Neue', 'Oswald', 'Arial Narrow', sans-serif;
  --body: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--night); }
body {
  margin: 0; color: var(--cream); font: 16px/1.45 var(--body); min-height: 100vh;
  background:
    radial-gradient(90% 40% at 50% 104%, rgba(242, 106, 27, .22), transparent 70%),
    radial-gradient(60% 30% at 85% 0%, rgba(108, 202, 202, .08), transparent 70%),
    linear-gradient(180deg, var(--night) 0%, #0c1820 30%, var(--forest) 100%);
  background-attachment: fixed;
}
.wrap { max-width: 640px; margin: 0 auto; padding: 0 16px 128px; }
h1, h2, h3 { margin: 0; line-height: 1.1; text-wrap: balance; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.num { font-variant-numeric: tabular-nums; }

/* hero */
.hero { position: relative; text-align: center; padding: 6px 0 0; margin: 0 -16px; overflow: hidden; }
.lights { display: block; width: 100%; height: auto; }
.lights path, .lights line { stroke: rgba(244, 234, 214, .35); stroke-width: 1; fill: none; }
.lights circle { fill: var(--glow); filter: drop-shadow(0 0 4px var(--glow)) drop-shadow(0 0 10px rgba(255, 170, 70, .6)); }
@media (prefers-reduced-motion: no-preference) {
  .lights circle { animation: twinkle 2.4s ease-in-out infinite; }
  @keyframes twinkle { 50% { opacity: .55; } }
}
.event { font-family: var(--label); letter-spacing: .14em; font-size: 1.05rem; color: var(--lake); margin: 2px 0 4px; }
.title { font-family: var(--display); font-weight: 400; color: var(--cream); font-size: clamp(3.4rem, 17vw, 5.4rem); line-height: .9;
  text-shadow: 0 3px 0 rgba(0,0,0,.45), 0 0 30px rgba(0,0,0,.6); }
.title .sub { display: flex; justify-content: center; align-items: baseline; gap: .18em; font-size: .62em; margin-top: .02em; }
.title .inthe { font-family: var(--label); font-size: .42em; letter-spacing: .08em; color: var(--cream); }
.title .wild { color: var(--ember); display: inline-block; transform: rotate(-3deg); text-shadow: 0 3px 0 rgba(0,0,0,.5), 0 0 24px rgba(242,106,27,.35); }
.hero .plank { margin-top: 14px; font-size: 1.25rem; }
.trees { display: block; width: 100%; height: auto; margin-top: -6px; }
.trees path { fill: #07100d; }
.hero-admin .title { font-size: clamp(2.4rem, 11vw, 3.4rem); }

/* wood plank signs: section labels */
.plank {
  display: inline-block; font-family: var(--label); font-weight: 400; letter-spacing: .08em; font-size: 1.35rem; line-height: 1;
  color: var(--cream); padding: 8px 18px 6px; border-radius: 4px; transform: rotate(-1.4deg);
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.10) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 3px, transparent 3px 17px),
    linear-gradient(180deg, var(--wood-hi), var(--wood));
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.12), 0 4px 0 rgba(0,0,0,.4);
  text-shadow: 0 1px 0 rgba(0,0,0,.5);
}
h2.plank { margin: 30px 0 14px; }
h2.plank:nth-of-type(even) { transform: rotate(1.2deg); }

.card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; backdrop-filter: blur(4px); }
label.field { display: grid; gap: 8px; font-family: var(--label); letter-spacing: .08em; font-size: 1.15rem; margin-top: 20px; }
input[type=text], input[type=number], textarea {
  font: 16px/1.4 var(--body); color: var(--cream); background: rgba(0,0,0,.35); border: 1px solid var(--line);
  border-radius: 10px; padding: 12px; width: 100%; letter-spacing: 0;
}
input::placeholder, textarea::placeholder { color: rgba(167, 178, 166, .7); }
input:focus, textarea:focus, button:focus-visible { outline: 2px solid var(--glow); outline-offset: 2px; }
button { font: 600 15px/1.2 var(--body); cursor: pointer; border-radius: 10px; border: 1px solid var(--line); background: rgba(255,255,255,.05); color: var(--cream); padding: 10px 14px; }
button.primary { background: linear-gradient(180deg, var(--ember-hot), var(--ember)); color: var(--ember-ink); border-color: transparent; font-family: var(--label); font-weight: 400; letter-spacing: .08em; font-size: 1.25rem; box-shadow: 0 0 22px rgba(242, 106, 27, .35); }
button:disabled { opacity: .45; cursor: default; box-shadow: none; }

/* menu */
.menu-list { display: grid; overflow: hidden; }
.menu-item { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 14px; border-top: 1px solid var(--line); transition: background .2s, box-shadow .2s; }
.menu-item:first-child { border-top: 0; }
.menu-item .name { font-weight: 700; }
.menu-item .desc { grid-column: 1; font-size: .88rem; color: var(--muted); }
.menu-item .price { color: var(--glow); font-family: var(--label); letter-spacing: .05em; font-size: 1.1rem; }
.menu-item.on { background: linear-gradient(90deg, rgba(255, 197, 107, .13), rgba(242, 106, 27, .06)); box-shadow: inset 3px 0 0 var(--glow); }
.menu-item .note { grid-column: 1 / -1; margin-top: 6px; }
.stepper { display: flex; align-items: center; gap: 8px; grid-row: 1 / span 2; grid-column: 2; align-self: center; }
.stepper button { width: 44px; height: 44px; padding: 0; font-size: 1.4rem; line-height: 1; border-radius: 50%; }
.stepper button[data-inc] { background: var(--ember); color: var(--ember-ink); border-color: transparent; font-weight: 800; }
.stepper .q { min-width: 22px; text-align: center; font-family: var(--label); font-size: 1.4rem; }

/* checkout */
.rows { display: grid; gap: 6px; padding: 14px; }
.row { display: flex; justify-content: space-between; gap: 12px; }
.row.total { font-family: var(--label); letter-spacing: .06em; font-size: 1.9rem; border-top: 1px dashed var(--line); padding-top: 10px; margin-top: 4px; color: var(--glow); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.chip { padding: 9px 13px; border-radius: 999px; font-size: .92rem; }
.chip.on { background: var(--cream); color: var(--night); border-color: var(--cream); }
.chip .tag { font-size: .66rem; text-transform: uppercase; letter-spacing: .08em; margin-left: 5px; color: var(--ember); font-weight: 800; }
.chip.on .tag { color: #b8460c; }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.seg button { padding: 14px; }
.seg button.on { background: var(--cream); color: var(--night); border-color: var(--cream); }
.err { color: var(--ember-hot); font-weight: 700; margin-top: 12px; }
.bar {
  position: fixed; left: 0; right: 0; bottom: 0; background: rgba(8, 14, 13, .94); border-top: 1px solid var(--line);
  padding: 12px max(16px, env(safe-area-inset-right, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  backdrop-filter: blur(8px);
}
.bar .in { max-width: 640px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bar b { font-family: var(--label); font-weight: 400; font-size: 1.7rem; letter-spacing: .05em; color: var(--glow); line-height: 1; }
.bar .primary { padding: 12px 22px; }

/* confirmation */
.big { font-family: var(--label); font-size: 4.5rem; line-height: 1; color: var(--glow); text-shadow: 0 0 30px rgba(255, 197, 107, .3); }
.stack { display: grid; gap: 14px; justify-items: start; }
.stack > .card, .stack > button, .stack > a { justify-self: stretch; }
a.btn { display: block; text-align: center; text-decoration: none; padding: 15px; border-radius: 10px; background: linear-gradient(180deg, var(--ember-hot), var(--ember)); color: var(--ember-ink); font-family: var(--label); letter-spacing: .08em; font-size: 1.3rem; }
h1.thanks { font-family: var(--label); font-weight: 400; letter-spacing: .04em; font-size: 2.6rem; }

/* admin */
.toolbar { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; }
.actions button { padding: 8px 12px; font-size: .9rem; }
.status { display: inline-block; padding: 5px 11px; border-radius: 999px; font-size: .8rem; font-weight: 800; letter-spacing: .03em; }
.status.open { background: var(--good-soft); color: var(--good); }
.status.closed { background: var(--warn-soft); color: var(--warn); }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; margin-top: 14px; }
.stats div { background: var(--card-solid); padding: 10px 12px; }
.stats b { display: block; font-family: var(--label); font-weight: 400; font-size: 1.55rem; letter-spacing: .04em; color: var(--glow); line-height: 1.05; }
.stats span { font-size: .7rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.tabs { display: flex; gap: 8px; margin-top: 20px; }
.tabs button { font-family: var(--label); font-weight: 400; letter-spacing: .08em; font-size: 1.15rem; padding: 9px 16px; }
.tabs button.on { background: var(--cream); color: var(--night); border-color: var(--cream); }
.combo { display: grid; grid-template-columns: 3.2em 1fr; gap: 2px 10px; padding: 12px 14px; border-top: 1px solid var(--line); }
.combo:first-child { border-top: 0; }
.combo .qty { font-family: var(--label); font-size: 1.9rem; line-height: 1; color: var(--ember); }
.combo .who { grid-column: 2; font-size: .82rem; color: var(--muted); }
.order { padding: 14px; display: grid; gap: 10px; }
.order + .order { border-top: 1px solid var(--line); }
.order.canceled { opacity: .5; }
.order-head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.order-head .who { font-family: var(--label); font-size: 1.45rem; letter-spacing: .04em; }
.order-head .who .no { color: var(--ember); margin-right: 4px; }
.pill { font-size: .75rem; font-weight: 800; padding: 3px 9px; border-radius: 999px; }
.pill.paid { background: var(--good-soft); color: var(--good); }
.pill.unpaid { background: var(--warn-soft); color: var(--warn); }
.item-check { display: flex; gap: 10px; align-items: flex-start; padding: 4px 0; }
.item-check input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--good); flex: none; }
.item-check.done span { text-decoration: line-through; color: var(--muted); }
button.pay-on { background: var(--good); color: #082012; border-color: var(--good); }
button.danger { color: var(--ember-hot); }
textarea.plain { min-height: 140px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .9rem; }
.empty { padding: 24px 14px; text-align: center; color: var(--muted); }
.notice { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; margin-top: 18px; border-color: rgba(108, 202, 202, .35); }
.notice > div { display: grid; gap: 6px; min-width: 0; flex: 1; }
.notice-col { flex-direction: column; align-items: stretch; margin-top: 0; }
.notice .mine { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.notice button { padding: 8px 12px; font-size: .9rem; flex: none; }
.orderby { text-align: center; margin: 12px 0 0; font-family: var(--label); letter-spacing: .08em; font-size: 1.2rem; color: var(--glow); }
.item-lines { grid-column: 1 / -1; display: grid; gap: 8px; }
.item-lines:empty { display: none; }
.extra-line { display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: center; }
.mini-stepper { display: flex; align-items: center; gap: 6px; }
.mini-stepper button { width: 34px; height: 34px; padding: 0; border-radius: 50%; font-size: 1.1rem; line-height: 1; }
.mini-stepper button[data-linc] { background: var(--ember); color: var(--ember-ink); border-color: transparent; font-weight: 800; }
.mini-stepper .q { min-width: 18px; text-align: center; font-family: var(--label); font-size: 1.2rem; }
button.add-line { justify-self: start; background: none; border: 0; padding: 2px 0; color: var(--lake); font-size: .88rem; text-decoration: underline; text-underline-offset: 3px; }
a.btn-link { display: inline-block; padding: 8px 12px; font-size: .9rem; font-weight: 600; border-radius: 10px; border: 1px solid var(--line); background: rgba(255,255,255,.05); color: var(--cream); text-decoration: none; }
.tip-reset { color: var(--glow); margin: 8px 0 0; }
.note-line { font-size: .88rem; color: var(--muted); margin: 6px 0 0; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* admin editors (new in the Pages version) */
.tabs { flex-wrap: wrap; }
.menu-edit { display: grid; gap: 8px; padding: 14px; border-top: 1px solid var(--line); }
.menu-edit:first-child { border-top: 0; }
.menu-edit.off { opacity: .6; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
label.check { display: flex; align-items: center; gap: 8px; font-size: .92rem; }
label.check input { width: 22px; height: 22px; accent-color: var(--good); }
@media (max-width: 480px) { .tabs { flex-wrap: nowrap; gap: 6px; } .tabs button { flex: 1 1 auto; padding: 9px 6px; font-size: 1.05rem; } }
.qr-overlay { position: fixed; inset: 0; z-index: 10; display: grid; place-content: center; justify-items: center; gap: 16px; padding: 16px; background: rgba(6, 11, 10, .94); }
.qr-card { background: #fff; color: #0a131d; border-radius: 16px; padding: 16px 16px 12px; text-align: center; width: min(86vw, 420px); }
.qr-card img { display: block; width: 100%; height: auto; }
.qr-cta { margin: 4px 0 0; font-family: var(--label); font-size: 1.8rem; letter-spacing: .06em; }
.qr-url { margin: 0; font-weight: 700; }