/* Studio v2 — PASTA MODE panels. Loaded by /build after style.css, css/flow.css, css/brand.css
   and v2.css. Everything is scoped to .pasta-panel (the pasta mode's own step panels), so the
   pizza panels on the same page are untouched. Logical properties only: Hebrew (RTL) needs no
   extra rules. The shared studio CSS styles a few parts by id (#pizza-note, #topping-count,
   #details-submit); the pasta panels use their own ids, so those rules are repeated here. */

/* ── ① The base: sauces (dish photos) then pasta shapes (drawn art) ─────────────── */
.pasta-panel .pasta-shape-head { margin-top: 28px; }
.pasta-panel .section-title > span.pasta-shape-pick,
.pasta-panel .section-title > span.pasta-topping-count { color: var(--brand); font-weight: 700; letter-spacing: 0; font-size: 12px; }
.pasta-panel .section-title > span.pasta-shape-pick:empty { display: none; }
.pasta-panel .base-grid .base-card .shape-art {
  display: grid; place-items: center; flex: none; width: 64px; height: 64px; border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, #fffaf0 0, #f5ecd9 100%); box-shadow: 0 6px 14px -8px #25684980;
}
.pasta-panel .base-grid .base-card .shape-art svg { width: 50px; height: 50px; }
.pasta-panel .base-grid .base-card.selected .shape-art { background: radial-gradient(circle at 50% 40%, #fff 0, #eaf5ee 100%); }
.pasta-panel .sauce-grid .base-card small { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pasta-panel .base-grid .base-card { min-width: 0; }
.pasta-panel .base-grid .base-card strong { overflow-wrap: anywhere; }
@media (max-width: 380px) {
  .pasta-panel .base-grid .base-card { padding: 12px; }
  .pasta-panel .base-grid .base-card .shape-art, .pasta-panel .sauce-grid .base-card img { width: 52px; height: 52px; }
  .pasta-panel .base-grid .base-card .shape-art svg { width: 42px; height: 42px; }
}

/* ── ③ Finish it: the kitchen note and the review button (same as the pizza's) ───── */
.pasta-panel textarea.pasta-note {
  min-height: 88px; padding: 14px 16px; border: 1.5px solid #eae6df; border-radius: 14px; background: #fdfdfc;
  font-size: 16px; line-height: 1.45; transition: border-color .2s, box-shadow .2s, background .2s;
}
.pasta-panel textarea.pasta-note:focus { outline: none; border-color: var(--brand); background: #fff; box-shadow: var(--ring); }
.pasta-panel .pasta-details-submit { min-height: 52px; justify-content: space-between; font-size: 16px; }
/* Hebrew: the "→" points forward (left), like the bar's and the cross-sell's arrows. */
[dir=rtl] .pasta-panel .pasta-details-submit span[aria-hidden] { display: inline-block; transform: scaleX(-1); }
.pasta-panel .upgrade-grid:empty { display: none; }

@media (prefers-reduced-motion: reduce) {
  .pasta-panel .base-grid .base-card { transition: none; }
}