/* Studio v2 (TEST, /build) — the shell: pizza/pasta switch, the one 3D stage with two engines,
   the shared loader, the cross-sell, and the TEST MODE marks. Loaded by /build only, after the live
   studio's style.css, css/flow.css and css/brand.css (whose design system it reuses unchanged),
   and before the modes' own v2/pizza/pizza.css and v2/pasta/pasta.css.
   Logical properties (inline-start/end) so Hebrew (RTL) needs next to no extra rules. */

/* ── TEST MODE: impossible to miss ─────────────────────────────────────── */
.v2-test-badge {
  display: inline-flex; align-items: center; gap: 7px; margin: 0 0 12px; padding: 5px 12px; border-radius: 999px;
  background: #fff3d6; color: #8a4b00; box-shadow: inset 0 0 0 1px #f2d59a;
  font-size: 11px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase;
}
.v2-test-badge::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #e08a00; }
.v2-test-badge[hidden] { display: none; }
.v2-test-note {
  margin: 4px 0 12px; padding: 10px 14px; border-radius: 12px; background: #fff3d6; color: #8a4b00;
  box-shadow: inset 0 0 0 1px #f2d59a; font-size: 13px; font-weight: 700; line-height: 1.45; text-align: center;
}
#sent-dialog.v2-test-result .sent-check { background: #f2b134; box-shadow: 0 14px 30px -10px #f2b134; font-size: 34px; }
#sent-dialog.v2-test-result .checkout-kicker { color: #8a4b00; }
#sent-dialog.v2-test-result #sent-items { overflow-wrap: anywhere; }
.v2-broken { margin: 0 0 14px; padding: 14px 16px; border-radius: 14px; background: #fff3d6; color: #8a4b00; font-weight: 700; }

/* ── Hero: the first half of the title swaps with the mode ─────────────── */
.v2-hero-lead { display: inline-block; }

/* ── The pizza/pasta switch ─────────────────────────────────────────────── */
.mode-switch {
  --mode-index: 0;
  position: relative; isolation: isolate; display: inline-grid; grid-template-columns: 1fr 1fr; align-items: stretch;
  padding: 4px; border-radius: 999px; background: #fff;
  box-shadow: 0 12px 28px -18px #1c1a1780, 0 1px 3px #1c1a1712, inset 0 0 0 1px #e8e2d6;
}
.mode-switch [data-mode-tab] {
  position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 112px; min-height: 46px; padding: 0 20px; border: 0; border-radius: 999px; background: none;
  color: var(--ink); font-family: var(--font); font-size: 15px; font-weight: 750; letter-spacing: -.1px; line-height: 1; white-space: nowrap;
  cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color .28s ease, transform .15s ease;
}
.mode-switch [data-mode-tab][aria-selected=true] { color: #fff; }
.mode-switch [data-mode-tab]:not([aria-selected=true]):hover { color: var(--brand-dark); }
.mode-switch [data-mode-tab]:active { transform: scale(.95); }
.mode-switch [data-mode-tab]:focus-visible { outline: 3px solid #88e8bb; outline-offset: 2px; }
.mode-switch [data-mode-tab]:disabled { opacity: .38; cursor: not-allowed; }
.mode-switch .mode-emoji { font-size: 19px; line-height: 1; transition: transform .5s cubic-bezier(.3, 1.5, .5, 1); }
.mode-switch [aria-selected=true] .mode-emoji { transform: scale(1.14) rotate(-10deg); }
.mode-switch-thumb {
  position: absolute; z-index: 0; top: 4px; bottom: 4px; inset-inline-start: 4px; width: calc(50% - 4px); border-radius: 999px;
  background: linear-gradient(180deg, #22a868 0, var(--brand) 55%, #12804f 100%);
  box-shadow: 0 8px 18px -8px #17915ad9, inset 0 1px 0 #ffffff45;
  transform: translateX(calc(var(--mode-index) * 100%));
  transition: transform .5s cubic-bezier(.3, 1.32, .5, 1);
}
[dir=rtl] .mode-switch-thumb { transform: translateX(calc(var(--mode-index) * -100%)); }
.mode-switch.single { grid-template-columns: 1fr; }
.mode-switch.single .mode-switch-thumb { width: calc(100% - 8px); transform: none; }
.mode-switch.single [data-mode-tab]:disabled { display: none; }

/* Desktop: centred in the row between "THE STUDIO" and "MADE BY YOU" (always in view: .visual is sticky). */
@media (min-width: 761px) {
  .v2-studio .visual-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; }
  .v2-studio .visual-top .pill { justify-self: start; white-space: nowrap; }
  .v2-studio .visual-top .small-label { justify-self: end; text-align: end; white-space: nowrap; }
  .v2-studio .visual-top .mode-switch { grid-column: 2; }
  .stage-switch { display: none; }
}
/* Narrow desktops / tablets: the switch alone, centred (no room for the two labels beside it). */
@media (min-width: 761px) and (max-width: 1100px) {
  .v2-studio .visual-top .pill, .v2-studio .visual-top .small-label { display: none; }
  .mode-switch [data-mode-tab] { min-width: 100px; padding: 0 16px; font-size: 14.5px; }
}

/* Phones: a compact glass pill on top of the sticky 3D stage, so it's always one tap away. */
.stage-switch {
  position: absolute; z-index: 5; top: 10px; left: 50%; transform: translateX(-50%);
  padding: 3px; background: #ffffffd6; -webkit-backdrop-filter: saturate(1.5) blur(14px); backdrop-filter: saturate(1.5) blur(14px);
  box-shadow: 0 10px 24px -14px #1c1a1799, 0 1px 2px #1c1a1714, inset 0 0 0 1px #ffffffcc;
}
.stage-switch [data-mode-tab] { min-width: 92px; min-height: 38px; padding: 0 14px; gap: 6px; font-size: 14px; }
.stage-switch [data-mode-tab]::after { content: ''; position: absolute; inset: -5px 0; } /* ≥ 48px touch target */
.stage-switch .mode-emoji { font-size: 17px; }
.stage-switch .mode-switch-thumb { top: 3px; bottom: 3px; inset-inline-start: 3px; width: calc(50% - 3px); }
.stage-switch.single .mode-switch-thumb { width: calc(100% - 6px); }
@media (max-width: 360px) {
  .stage-switch { top: 8px; }
  .stage-switch [data-mode-tab] { min-width: 78px; min-height: 34px; padding: 0 10px; gap: 5px; font-size: 13px; }
  .stage-switch [data-mode-tab]::after { inset: -7px 0; }
  .stage-switch .mode-emoji { font-size: 15px; }
}

/* ── ONE stage, two engines: crossfade between their canvases ──────────── */
.v2-scene {
  position: absolute; inset: 0; z-index: 1; opacity: 0; transform: scale(.965); pointer-events: none;
  transition: opacity .38s ease, transform .55s cubic-bezier(.2, .8, .2, 1);
}
.v2-scene.is-on { opacity: 1; transform: none; pointer-events: auto; }
.v2-scene[hidden] { display: none; }
.v2-scene canvas { display: block; width: 100%; height: 100%; cursor: grab; touch-action: pan-y; }
.v2-scene canvas:active { cursor: grabbing; }

/* The shared loader: dough for pizza, a steaming bowl for pasta — shown while that mode's 3D gets ready. */
.v2-studio .pizza-loader { opacity: 0; transition: opacity .35s ease; }
.v2-studio .pizza-stage.v2-loading .pizza-loader { opacity: 1; }
.v2-studio .pizza-stage:not(.v2-loading) .pizza-loader, .v2-studio .pizza-stage:not(.v2-loading) .pizza-loader * { animation-play-state: paused; }
.pizza-stage[data-mode=pasta] .pizza-loader-dough { display: none; }
.pizza-stage:not([data-mode=pasta]) .v2-loader-bowl { display: none; }
.v2-loader-bowl { position: relative; display: block; width: min(46%, 240px); aspect-ratio: 1.6; animation: v2-bowl-breathe 1.6s ease-in-out infinite; }
.v2-loader-bowl::before { /* the bowl */
  content: ''; position: absolute; inset-inline: 0; top: 34%; bottom: 0; border-radius: 0 0 50% 50% / 0 0 100% 100%;
  background: linear-gradient(180deg, #fffdf8 0, #efe7d8 100%); box-shadow: 0 22px 30px -18px #4a3a2866, inset 0 -6px 12px -8px #b9ad9766;
}
.v2-loader-bowl::after { /* the pasta & sauce, seen over the rim */
  content: ''; position: absolute; inset-inline: 0; top: 20%; height: 30%; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 55%, #f6d27a 0 38%, #e9b24f 52%, #f7f1e6 55% 100%); box-shadow: inset 0 0 0 2px #e6dccb;
}
.v2-loader-bowl i { /* steam */
  position: absolute; bottom: 88%; width: 6px; height: 26%; border-radius: 6px; background: linear-gradient(#ffffff00, #ffffffcc);
  animation: v2-steam 2.2s ease-in-out infinite; opacity: 0;
}
.v2-loader-bowl i:nth-child(1) { inset-inline-start: 34%; }
.v2-loader-bowl i:nth-child(2) { inset-inline-start: 48%; animation-delay: -.7s; }
.v2-loader-bowl i:nth-child(3) { inset-inline-start: 62%; animation-delay: -1.4s; }
@keyframes v2-bowl-breathe { 0%, 100% { transform: scale(.96); opacity: .8; } 50% { transform: scale(1); opacity: 1; } }
@keyframes v2-steam { 0% { transform: translateY(8px) scaleY(.6); opacity: 0; } 40% { opacity: .9; } 100% { transform: translateY(-14px) scaleY(1); opacity: 0; } }

/* "Your masterpiece": the badge follows the mode. */
/* the badge's dot is the same for pizza and pasta (was 🍝) */

/* ── The two modes' panels (each mode renders its own .step-panel's inside) ── */
.v2-panels { display: flex; flex-direction: column; min-width: 0; }
.v2-panels[hidden] { display: none; }

/* ── Cross-sell: "Add a pasta too? →" after adding, and inside "Your order" ── */
.v2-nudge {
  position: relative; display: flex; align-items: stretch; margin: 14px 0 0; border-radius: 18px; overflow: hidden;
  background: linear-gradient(135deg, #eef8f2 0, #fff 72%); box-shadow: inset 0 0 0 1.5px #b9dcc8, 0 14px 26px -20px #17915a99;
}
.v2-nudge[hidden] { display: none; }
.v2-nudge-go, .v2-crosssell {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 14px;
  border: 0; background: none; color: var(--ink); text-align: start; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform .15s ease, background .2s;
}
.v2-nudge-go:active, .v2-crosssell:active { transform: scale(.985); }
.v2-nudge-emoji {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: #fff; box-shadow: 0 6px 14px -8px #1c1a1766; font-size: 22px; line-height: 1;
}
.v2-nudge-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.v2-nudge-text strong { font-family: var(--font-display); font-size: 16px; font-weight: 800; letter-spacing: -.3px; line-height: 1.2; }
.v2-nudge-text small { font-size: 12.5px; color: var(--muted); line-height: 1.35; }
.v2-nudge-arrow {
  flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  background: var(--brand); color: #fff; font-size: 17px; font-weight: 800; box-shadow: 0 8px 16px -8px #17915acc;
}
[dir=rtl] .v2-nudge-arrow { transform: scaleX(-1); }
.v2-nudge-close { flex: none; width: 46px; border: 0; background: none; color: #8c8579; font-size: 22px; line-height: 1; cursor: pointer; }
.v2-nudge-close:hover { color: var(--ink); }
.v2-crosssell {
  width: 100%; margin: 0 0 14px; border-radius: 16px;
  background: linear-gradient(135deg, #eef8f2 0, #fff 72%); box-shadow: inset 0 0 0 1.5px #b9dcc8;
}
.v2-crosssell:hover { background: linear-gradient(135deg, #e3f2ea 0, #fff 72%); }

/* Keyboard focus on the nudge: the ring is drawn inside (.v2-nudge clips anything outside it). */
.v2-nudge-go:focus-visible, .v2-nudge-close:focus-visible { outline-offset: -4px; border-radius: 18px; }

/* Menu: the studio cards' button reads as the way back up (it wraps on narrow cards, never clips). */
.v2-studio-card .menu-card-bottom button { white-space: normal; max-width: 100%; text-align: center; }
/* Their 2×2 photos: square cells, round photos in every browser (the live fix 672158f, scoped to v2). */
.v2-studio-card .studio-card-pics {
  grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 6px; padding: 10px; overflow: hidden;
}
.v2-studio-card .studio-card-pics img { width: auto; max-width: 100%; height: 100%; min-height: 0; aspect-ratio: 1 / 1; place-self: center; }

/* Dialogs centred (Tailwind's preflight sets margin:0 on every element, which beats the browser's
   dialog:modal { margin: auto }). The phone bottom sheets (#cart-dialog, dialog.sheet) keep theirs. */
dialog { margin: auto; }

/* The action bar: the build's name may take two lines, so what changes (the topping count) stays in
   view; below 1100px the primary button uses its short label to leave the name room. */
.v2-studio #bar-name {
  white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical;
  line-height: 1.25; overflow-wrap: anywhere;
}
@media (max-width: 1100px) {
  .v2-studio .bar-primary .long { display: none; }
  .v2-studio .bar-primary .short { display: inline; }
}

/* Phones: a long toast wraps inside the screen instead of running off both edges. */
@media (max-width: 760px) {
  #toast { white-space: normal; width: max-content; max-width: calc(100vw - 32px); text-align: center; line-height: 1.35; }
}

@media (prefers-reduced-motion: reduce) {
  .mode-switch-thumb, .mode-switch .mode-emoji, .v2-scene { transition: none; }
  .mode-switch [aria-selected=true] .mode-emoji { transform: none; }
  .v2-scene { transform: none; }
  .v2-loader-bowl, .v2-loader-bowl i { animation: none; }
  .v2-loader-bowl i { opacity: .6; }
}