/* Trattoria on the ordering pages, after poco's ordering skin. Poco hard-codes
   Subzy's green ink for every price, link and count there; trattoria points
   that one token at its own text-safe accent. */
.ord-body{--poco-green-ink:var(--accent-ink)}

/* The Build Your Pizza drawing (templates/trattoria/slots/item_panel_visual.blade.php).
   It takes the photo's place at the top of the dish panel and stays pinned
   while the choices scroll beneath it, small on a phone. Decorative, so no
   colour here carries text. */
[x-data]:has(> .pizza-builder) > .item-panel-photo{display:none}
.pizza-builder{position:sticky;top:0;z-index:2;display:flex;justify-content:center;padding:1rem 1rem .5rem;background:var(--ord-card)}
.pb-art{width:min(15rem,72%);height:auto;overflow:visible}
@media (max-width:640px){.pizza-builder{padding:.5rem .5rem .25rem}.pb-art{width:8.5rem}}
/* On the standalone dish page the page scrolls and the shell's header sticks
   above the drawing, so the drawing pins just beneath it (poco's nav, 5.5rem,
   replaces the shell header here). In the dialog the dialog is its own
   scroller and top:0 is right. */
.item-panel-standalone-wrap .pizza-builder{top:calc(5.5rem + var(--ord-top-extra, 0px))}
/* Focus moved by Shift+Tab lands beneath the pinned drawing, not under it:
   the drawing is 15rem wide at most, 440:400 tall (13.6rem), plus its padding. */
.item-panel-dialog:has(.pizza-builder){scroll-padding-top:15.5rem}
@media (max-width:640px){.item-panel-dialog:has(.pizza-builder){scroll-padding-top:8.75rem}}
.pb-sauce{fill:#F4D9A0}
.pizza-builder[data-base="tomato"] .pb-sauce{fill:#C8321E}
.pizza-builder[data-base="bbq"] .pb-sauce{fill:#6B2A12}
.pizza-builder[data-base="cream"] .pb-sauce{fill:#F3E7C9}
.pb-dip-fill{fill:#E9D98B}
.pizza-builder[data-dip="chili-butter"] .pb-dip-fill{fill:#E0672A}
.pizza-builder[data-dip="sweet-chili"] .pb-dip-fill{fill:#E5482A}
.pizza-builder[data-dip="sour"] .pb-dip-fill{fill:#F8F4EA}
.pizza-builder[data-dip="aioli"] .pb-dip-fill{fill:#F4EAC6}
.pizza-builder[data-dip="jalapeno"] .pb-dip-fill{fill:#BFD27A}
.pizza-builder[data-dip="bbq"] .pb-dip-fill{fill:#6B2A12}
.pb-l,.pb-spot{opacity:0}
.pb-l.is-on,.pb-spot.is-on{opacity:1}
@media (prefers-reduced-motion:no-preference){
  .pb-sauce{transition:fill .3s ease}
  .pb-l{transition:opacity .3s ease}
  .pb-spot{transform:translateY(-12px) scale(.85);transform-box:fill-box;transform-origin:center;transition:opacity .22s ease,transform .38s cubic-bezier(.3,1.5,.5,1)}
  .pb-spot.is-on{transform:none}
}

/* The dish window of a pizza being built (spec 2026-10-08, printed menu): the
   groups read as steps 1 to 4, the toppings carry the printed menu's three
   headings (inserted by public/js/trattoria/pizza-builder.js) and sit two to
   a row where there is room, and "ab 10,00 €" stands in for the total until
   the first topping. --c-primary-ink is the theme's own ink for text on
   --c-primary (ThemeCss clamps it to pass AA on the accent), so the step
   digit is readable on any trattoria palette. */
[x-data]:has(> .pizza-builder) form{counter-reset:pbstep}
[x-data]:has(> .pizza-builder) .item-option-group-title::before{counter-increment:pbstep;content:counter(pbstep);display:inline-grid;place-items:center;width:1.6rem;height:1.6rem;margin-right:.5rem;border-radius:50%;background:var(--c-primary);color:var(--c-primary-ink);font-weight:900;font-size:.85rem;vertical-align:middle}
.pb-toppings .pb-section-title{grid-column:1/-1;margin:.9rem 0 .35rem;font-size:.78rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ord-ink)}
/* At 4 toppings the rest grey out (public/js/trattoria/pizza-builder.js); the count stands beside the heading. */
.ord-opt-row.pb-capped{opacity:.45;cursor:not-allowed}
.pb-tally{margin-left:.5rem;font-size:.8rem;font-weight:800;color:var(--ord-ink);font-variant-numeric:tabular-nums;white-space:nowrap}
@media (min-width:641px){
  .item-option-group.pb-toppings{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:.5rem;align-items:start}
  .pb-toppings > .item-option-group-title{grid-column:1/-1}
}
.pizza-builder-from{display:none;flex:0 0 auto;align-items:center;padding:0 1.1rem;font-weight:700;white-space:nowrap;border-right:1px solid rgba(255,255,255,.35)}
.pizza-builder[data-below-min] ~ .item-panel-inner .ord-panel-cta-total{display:none}
.pizza-builder[data-below-min] ~ .item-panel-inner .pizza-builder-from{display:flex}

/* ---------- the order status page in basil (Daniel, 2026-10-12) ----------
   "I would not use red colour on stuff, it looks like something is not
   good": everything this page drew in the red accent ink (the time, the
   prices, the buttons and the steps done) and the current step's yellow are
   basil, the green the header already gives the phone number and the
   open-now dot (--trattoria-basil, skin.css). Basil measures 6.4:1 on the
   white card and about 6.0:1 on the cream canvas. The step the order is on
   keeps its halo, so it still stands apart from the steps behind it.
   Bad news keeps its colours: a refusal or a cancellation reason stays in
   the red error box, and "this is taking longer" (inside the card) in the
   amber one. The note above the card (the order placed, the order
   cancelled) is the page answering the customer, so it is green too: basil
   on its own tint, about 5.5:1. The page has no dark mode. Only the status
   page: --poco-green-ink, which the menu, checkout and the pizza builder
   read, stays the red accent. */
.ord-body :is(.ost-when-time,.ost-line-total,.ost-where a,.ost-loyalty-foot a,.ost-loyalty-threshold,.ost-loyalty-earn strong){color:var(--trattoria-basil)}
.ord-body .ost-btn:not(.ost-btn-quiet){border-color:var(--trattoria-basil);color:var(--trattoria-basil)}
.ord-body .ost-btn:not(.ost-btn-quiet):hover{background:color-mix(in srgb,var(--trattoria-basil) 10%,transparent)}
.ord-body .ost-step.is-done::before,.ord-body .ost-step.is-done::after{background:var(--trattoria-basil)}
.ord-body .ost-step.is-current::before{background:var(--trattoria-basil);box-shadow:0 0 0 4px color-mix(in srgb,var(--trattoria-basil) 25%,transparent)}
.ord-body .ost-loyalty-cost{background:var(--trattoria-basil);color:var(--trattoria-basil-ink)}
.ord-narrow > .ost-alert{background:color-mix(in srgb,var(--trattoria-basil) 10%,var(--surface));border-color:color-mix(in srgb,var(--trattoria-basil) 40%,var(--surface));color:var(--trattoria-basil)}