/* Donatello brand layer — the same identity as the main website:
   Ninja green, warm cream, near-black "night", Albert Sans (headlines and body).
   Loaded last, so it only has to say what is different. */
:root {
  --brand: #17915a;
  --brand-dark: #0f6b3f;
  --brand-soft: #e3f2ea;
  --night: #12100e;
  --cream: #f3efe7;
  --paper: #f3efe7;
  --ink: #1c1a17;
  --muted: #6f6a61;
  --line: #ece7dd;
  --line-strong: #ddd7ca;
  --alert: #e14a2b;
  --tint: #eef7f1;
  --tint-2: #dff0e6;
  --ring: 0 0 0 4px #17915a2e;
  --soft-shadow: 0 14px 28px -18px #1c1a1766;
  --stage: radial-gradient(ellipse at 50% 42%, #fbf8f2 0, #f1ebe0 68%, #e7dfd0 100%);
}
body { background: var(--cream); color: var(--ink); font-family: var(--font); }
h1, h2, h3, h4, .brand-word, #bar-total, .summary-total strong, .menu-block-title { font-family: var(--font-display); }

/* Header & footer: the site's dark "night" bar with the wordmark (or the official logo). */
header { background: var(--night); border-bottom: 0; color: #fff; }
header nav a { color: #b7b1a7; }
header nav .active { color: #fff; }
header nav .active:after { background: var(--brand); }
header .bag { background: var(--brand); color: #fff; border-radius: 12px; }
header .bag span { background: #ffffff2e; border-radius: 7px; }
.brand { display: flex; align-items: center; gap: 12px; color: inherit; }
.brand-logo { display: block; height: 44px; width: auto; max-width: 180px; object-fit: contain; }
.brand-word { display: flex; flex-direction: column; font-size: 24px; font-weight: 800; letter-spacing: -.8px; line-height: 1; }
.brand-word small { margin-top: 5px; font-family: var(--font); font-size: 11px; font-weight: 600; letter-spacing: .2px; color: #b7b1a7; }
body.brand-full-logo .brand-word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
body.brand-mark-logo .brand-logo { height: 40px; width: 40px; border-radius: 12px; }
footer { border-top: 0; margin-top: 20px; padding: 28px 5.2%; background: var(--night); color: #b7b1a7; border-radius: 22px 22px 0 0; }
footer .brand-word { color: #fff; font-size: 20px; }
footer > span, footer > a:last-child { color: #b7b1a7; }
@media (max-width: 760px) {
  .brand-word { font-size: 21px; }
  .brand-word small { font-size: 10px; }
  .brand-logo { height: 36px; max-width: 140px; }
  footer { margin: 20px -4% 0; }
}

/* Headline: ink + Ninja green, like the site. */
h1 { letter-spacing: -1.5px; }
h1 em, .eyebrow { color: var(--brand); }

/* The pizza sits on a warm, bakery-cream stage instead of lavender. */
.visual { background: var(--stage); }
@media (min-width: 761px) {
  .studio { background: linear-gradient(90deg, #efe8dc 0 52.83%, #fff 52.83%); }
  .visual { background: linear-gradient(180deg, #faf6ef 0, #efe8dc 100%); }
}
@media (max-width: 760px) {
  .pizza-stage { background: var(--stage); border-bottom-color: var(--line-strong); }
  .pizza-caption { background: #f7f2e9; }
}
.studio { border-color: var(--line); }
.pill { border-color: #cfc5b3; color: #6f6a61; }
.small-label, .visual-foot { color: #8c8579; }
.stamp { border-color: #b9ad97; color: #7a6f5c; }

/* Accents that should read as "Donatello green". */
.steps button[aria-selected=true] b { box-shadow: 0 0 0 5px #17915a24; }
.primary, .bar-primary { box-shadow: 0 10px 22px -10px #17915aaa, inset 0 1px 0 #ffffff26; }
.bar-cart { background: var(--night); }
.bar-cart b { color: #7fe0ae; }
.toast-action { color: #7fe0ae; }
#toast { background: var(--night); }
.chips button[aria-pressed=true], .menu-filters button.selected { background: var(--night); color: #fff; }
.chips .surprise { background: #fff3d6; color: #8a4b00; }
.copy-last { border-color: #b9dcc8; background: #f3faf6; color: var(--brand-dark); }
.step-count, .edit-banner button { font-family: var(--font); }
.sent-check { background: var(--brand); box-shadow: 0 14px 30px -10px #17915a; }
.studio-card { border-color: #cfe6d9; background: linear-gradient(180deg, #f3faf6, #fff 60%); }
.studio-card-pics { background: var(--stage); }

/* ── 2026 layer, from the Stitch design (project "Donatello Pizza Studio — 2026") ── */
/* Header "Your order" pill with a bag icon */
header .bag { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 8px 0 14px; border-radius: 999px; font-weight: 700; }
header .bag .bag-label { display: inline; width: auto; height: auto; background: none; border-radius: 0; }
header .bag #cart-count { display: grid; place-items: center; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 999px; background: #ffffff2e; font-size: 13px; font-weight: 800; }

/* Stage: a soft "plate" glow under the pizza + a few toppings drifting around it */
.pizza-stage::before {
  content: ''; position: absolute; left: 50%; top: 50%; width: min(78%, 420px); aspect-ratio: 1; transform: translate(-50%, -52%);
  border-radius: 50%; background: radial-gradient(circle, #ffffffd9 0, #fffaf200 70%); pointer-events: none;
}
.stage-float { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.stage-float span { position: absolute; width: 34px; height: 34px; filter: drop-shadow(0 6px 8px #4a3a2833); animation: drift 6s ease-in-out infinite; }
.stage-float svg { width: 100%; height: 100%; }
.stage-float .float-1 { left: 8%; top: 14%; }
.stage-float .float-2 { right: 9%; top: 18%; width: 30px; height: 30px; animation-delay: -1.5s; }
.stage-float .float-3 { left: 11%; bottom: 16%; width: 28px; height: 28px; animation-delay: -3s; }
.stage-float .float-4 { right: 7%; bottom: 22%; width: 32px; height: 32px; animation-delay: -4.5s; }
@keyframes drift { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-10px) rotate(6deg); } }

/* "Your masterpiece": gold badge, big name, topping pills you can tap to remove */
.mp-badge {
  display: inline-flex; align-items: center; gap: 6px; margin-bottom: 8px; padding: 5px 12px; border-radius: 999px;
  background: #fbefcf; color: #8a5a00; font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase;
}
.mp-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } /* was 🔥 */
#pizza-title { font-size: clamp(24px, 6vw, 30px); font-weight: 800; letter-spacing: -.8px; }
.mp-toppings { gap: 7px; margin: 10px 0; }
.mp-chip {
  width: auto; height: 34px; display: inline-flex; align-items: center; gap: 6px; padding: 0 8px 0 5px; border-radius: 999px;
  background: #fff; box-shadow: 0 2px 8px -2px #1c1a172e; font-size: 13px; font-weight: 700; color: var(--ink);
}
.mp-chip svg { width: 24px; height: 24px; flex: none; }
.mp-chip b { position: static; padding: 1px 6px; border-radius: 999px; background: var(--tint-2); color: var(--brand-dark); font-size: 11px; line-height: 1.5; }
.mp-chip i { position: static; width: 16px; height: 16px; line-height: 16px; background: none; color: #a39a8c; font-size: 14px; }
@media (max-width: 760px) {
  .pizza-caption { text-align: center; justify-content: center; }
  .pizza-caption .stamp { display: none; }
  .pizza-caption .eyebrow.mp-badge { display: inline-flex; }
  .mp-toppings { justify-content: center; }
}

/* Steps: finished = solid green with a white ✓ */
.steps button[data-done=true] b { background: var(--brand); color: #fff; }

/* Filter chips: white pills on cream; active = night */
.chips button { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); font-weight: 700; }
.chips button[aria-pressed=true] { box-shadow: none; }

/* Group labels with a hairline */
.tp-group .group-title { display: flex; align-items: center; gap: 12px; color: #6f6a61; letter-spacing: 1.6px; }
.tp-group .group-title::after { content: ''; flex: 1; height: 1px; background: var(--line-strong); }

/* Topping cards (Stitch): big icon, name, price; "+ Add" → stepper; ✓ badge */
.tp { border-radius: 22px; border-width: 2px; }
.tp-main { flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px 16px 10px; min-height: 0; }
.tp-icon { width: 48px; height: 48px; background: none; }
.tp-icon svg { width: 46px; height: 46px; }
.tp.selected .tp-icon { background: none; }
.tp-text strong { font-size: 15.5px; font-weight: 800; line-height: 1.25; }
.tp-text small { font-size: 14px; font-weight: 700; color: var(--muted); }
.tp.selected .tp-text small { color: var(--brand); }
.tp-check { left: auto; right: 14px; top: 14px; width: 26px; height: 26px; font-size: 13px; box-shadow: none; }
.tp-add-btn {
  margin: 4px 14px 14px; min-height: 44px; border-radius: 999px; background: #f3efe7; color: var(--ink); font-size: 15px; font-weight: 700;
  transition: background .2s, transform .12s;
}
.tp-add-btn:hover { background: #ebe5d9; }
.tp-add-btn:active { transform: scale(.96); }
.tp .tp-stepper { display: none; margin: 4px 14px 14px; }
.tp.selected .tp-add-btn { display: none; }
.tp.selected .tp-stepper { display: flex; background: #fff; box-shadow: inset 0 0 0 1.5px #9fd8bb; }
.tp.selected .tp-stepper [data-minus] { background: var(--tint); color: var(--brand-dark); box-shadow: none; }
.tp.selected .tp-stepper [data-add]:not(:disabled) { background: var(--brand); color: #fff; }
@media (max-width: 760px) {
  .tp-main { padding: 14px 12px 8px; }
  .tp-icon, .tp-icon svg { width: 42px; height: 42px; }
  .tp-add-btn, .tp .tp-stepper { margin: 4px 10px 12px; }
  .tp-check { right: 10px; top: 10px; }
}
@media (prefers-reduced-motion: reduce) { .stage-float span { animation: none; } }
@media (max-width: 760px) { #toast { bottom: calc(var(--bar-h) + 62px + env(safe-area-inset-bottom)); } }

/* EN / עב toggle (same choice as the rest of the website) */
header .lang-toggle {
  min-width: 44px; min-height: 44px; margin-inline-start: auto; margin-inline-end: 8px; padding: 0 10px; border-radius: 999px;
  background: #ffffff1f; color: #fff; font-weight: 800; font-size: 14px;
}
header .lang-toggle:hover { background: #ffffff33; }
/* Right-to-left (Hebrew): mirror the few things placed with left/right */
[dir=rtl] .tp-check { right: auto; left: 14px; }
[dir=rtl] .steps button::after, [dir=rtl] .steps button[aria-selected=true]::after { left: calc(-50% + 21px); right: calc(50% + 21px); }
[dir=rtl] .bar-secondary span, [dir=rtl] .bar-primary span:last-child { display: inline-block; transform: scaleX(-1); } /* arrows only */
[dir=rtl] .base-grid .base-card i { right: auto; left: 12px; }
[dir=rtl] .base-grid .base-card, [dir=rtl] .tp-main, [dir=rtl] .upgrade { text-align: right; }
.cash-field { display: block; margin: 8px 0 12px; font-size: 13px; font-weight: 700; color: #4d4755; }
.cash-field span { font-weight: 500; color: var(--muted); }
.cash-field input { margin-top: 6px; min-height: 52px; width: 100%; padding: 14px 16px; border: 1.5px solid #e4dfea; border-radius: 14px; background: #fcfbfe; font-size: 16px; }
.cash-field input:focus { outline: none; border-color: var(--brand); box-shadow: var(--ring); }
/* Shop state (from the admin): header pill + closed banner */
header .shop-status { display: none; }
@media (min-width: 420px) { header .shop-status { display: inline-flex; } }
header .shop-status { align-items: center; gap: 6px; margin-inline-start: auto; padding: 6px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; }
header .shop-status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
header .shop-status.open { background: #17915a2e; color: #4fd08a; }
header .shop-status.busy { background: #f2b1342e; color: #f2b134; }
header .shop-status.closed { background: #e14a2b33; color: #ff9179; }
header .shop-status + .lang-toggle { margin-inline-start: 0; }
.closed-banner { display: flex; flex-direction: column; gap: 2px; margin: 0 0 16px; padding: 14px 16px; border-radius: 18px; background: var(--night); color: #fff; }
.closed-banner span { color: #b7b1a7; font-size: 14px; }
.menu-card.sold-out img, .base-card.sold-out img { filter: grayscale(1); opacity: .6; }
.menu-card.sold-out button[disabled], .base-card.sold-out { cursor: not-allowed; }
.base-card.sold-out { opacity: .6; }
.featured-block .menu-block-title::after { content: ''; display: inline-block; width: .5em; height: .5em; margin-inline-start: .35em; border-radius: 50%; background: var(--brand); vertical-align: .15em; } /* was ★ */

/* Older rules (Codex checkout) still say --purple / --lavender: point them at the brand. */
:root { --purple: var(--brand); --purple-dark: var(--brand-dark); --lavender: var(--brand-soft); }

/* Compact delivery section: one area dropdown, a small location chip, the address field. */
.delivery-fields { margin: 14px 0; display: grid; gap: 10px; }
/* "Pick up myself": checkout.js sets `hidden` on the block — `display: grid` above would win
   over the browser's [hidden] rule and keep the area dropdown (with its fee) on screen. */
.delivery-fields[hidden] { display: none; }
.delivery-fields .field-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#delivery-zone { min-height: 52px; width: 100%; padding: 0 14px; border: 1.5px solid #e4dfea; border-radius: 14px; background: #fcfbfe; font-size: 16px; color: var(--ink); }
#delivery-zone:focus { outline: none; border-color: var(--brand); box-shadow: var(--ring); }
.address-box { display: grid; gap: 8px; padding: 0; border: 0; background: none; }
.address-box h4, .address-or { display: none; }
.address-box .location-button {
  justify-self: start; width: auto; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 0;
  background: var(--brand-soft); color: var(--brand-dark); font-size: 14px; font-weight: 700;
}
.address-box .location-button[hidden] { display: none; }
.location-status { margin: 0; color: var(--muted); }
#location-pin { margin: 0; }
#location-pin a { color: var(--brand-dark); }
.address-box label { margin: 4px 0 0; font-size: 13px; font-weight: 700; color: #4d4755; }
.address-box textarea { min-height: 64px; }
.address-box small { margin-top: 0; }

/* 3D pizza loading: a warm dough shimmer until the finished pizza is drawn, then a soft fade-in */
#scene { opacity: 0; transition: opacity .55s ease; }
.pizza-stage.pizza-ready #scene { opacity: 1; }
.pizza-loader { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; pointer-events: none; transition: opacity .45s ease; }
.pizza-stage.pizza-ready .pizza-loader { opacity: 0; }
.pizza-loader-dough { width: min(52%, 280px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #f6e7c8 0 58%, #e9c790 60% 70%, #d9a661 72% 100%);
  box-shadow: 0 22px 30px -18px #4a3a2866; animation: dough-breathe 1.6s ease-in-out infinite; }
.pizza-loader-text { font-size: 13px; font-weight: 600; letter-spacing: .3px; color: var(--muted, #6f6a61); }
@keyframes dough-breathe { 0%, 100% { transform: scale(.96); opacity: .75; } 50% { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .pizza-loader-dough { animation: none; } #scene, .pizza-loader { transition: none; } }

/* Line icons (js/glyphs.js) — replaced the emoji and typographic symbols. 1em = the text size. */
.glyph { display: inline-block; flex: none; width: 1em; height: 1em; vertical-align: -.14em; }
.mode-switch .mode-emoji { display: inline-grid; place-items: center; font-size: 18px; }
.mode-switch [aria-selected=true] .mode-emoji { transform: none; }
.v2-nudge-emoji .glyph { width: 22px; height: 22px; color: var(--brand-dark); }
.included > span { display: grid; place-items: center; color: var(--brand); }
.included > span .glyph { width: 24px; height: 24px; }
.sent-check .glyph { width: 38px; height: 38px; stroke-width: 2.4; }
.base-card i .glyph, .tp-check .glyph { width: 13px; height: 13px; stroke-width: 3; }
#v2-steps button b .glyph { width: 13px; height: 13px; stroke-width: 3; }
.bar-secondary .glyph { width: 20px; height: 20px; }
#start-over .glyph { width: 20px; height: 20px; }
.bar-primary span[aria-hidden] .glyph { width: 18px; height: 18px; vertical-align: -.2em; }
.bar-cart .glyph { width: 15px; height: 15px; }
/* the "Surprise me" chip: same quiet look as the other chips (the orange read as dated) */
.chips .surprise { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.chips button .glyph { width: 15px; height: 15px; color: var(--brand); }
.chips button[aria-pressed=true] .glyph { color: #9fe0bf; }