/* Panjgoosheh Production (templates/production.html): the stage drawn on the
   red wall, five flat fields for what we bring, the steps, and the booking
   sheet that fills the screen. On a phone nothing moves by itself; on a
   computer only the stage's beams sweep. */
.pr, .prb { --pr-red: #e0203f; --pr-gold: #ffc60b; --pr-ink: #0b0b0b; --pr-ease: cubic-bezier(.22, 1, .36, 1); }
.pr { display: grid; gap: clamp(40px, 6vw, 88px); min-width: 0; padding-bottom: 24px; }

.pr-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 54px; padding: 0 24px; border: 0; border-radius: 999px;
  font: 800 1rem var(--font-body); text-decoration: none; cursor: pointer; transition: transform .14s var(--pr-ease); }
.pr-btn:active { transform: scale(.96); }
.pr-btn:disabled { opacity: .5; cursor: default; transform: none; }
.pr-btn.is-gold { background: var(--pr-gold); color: var(--pr-ink) !important; }
.pr-btn.is-dark { background: var(--pr-ink); color: #fff !important; }
.pr-btn.is-line { border: 1px solid color-mix(in srgb, currentColor 30%, transparent); background: none; color: inherit !important; }
.pr-btn.is-ghost { background: color-mix(in srgb, currentColor 10%, transparent); color: inherit !important; }
.pr-btn.sm { min-height: 44px; padding: 0 16px; font-size: .88rem; }
[dir="rtl"] .pr-btn svg { transform: scaleX(-1); }

/* ---- the hero */
.pr-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); overflow: hidden; border-radius: 28px; background: var(--pr-ink); color: #fff; }
.pr-hero-t { display: flex; flex-direction: column; justify-content: center; gap: 18px; min-width: 0; padding: clamp(26px, 5vw, 72px); container-type: inline-size; }
.pr-k { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 0; font: 700 .92rem var(--font-body); color: rgba(255, 255, 255, .66); }
.pr-k span:first-child { color: var(--pr-gold); }
.pr-h { margin: 0; font: 400 clamp(3rem, 15cqi, 7.4rem)/.84 var(--font-display); letter-spacing: -.02em; text-transform: uppercase; }
.pr-h em { display: block; font-style: normal; color: var(--pr-red); }
.pr-p { margin: 0; max-width: 46ch; font-size: clamp(1rem, 1.3vw, 1.12rem); line-height: 1.6; color: rgba(255, 255, 255, .78); }
.pr-cta { display: flex; flex-wrap: wrap; gap: 10px; }
.pr-dep { display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 0; font: 600 .95rem var(--font-body); color: rgba(255, 255, 255, .7); }
.pr-dep b { color: var(--pr-gold); font-weight: 800; }
.pr-mine { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 14px 16px; border-radius: 18px; background: rgba(255, 255, 255, .08); font: 600 .92rem/1.45 var(--font-body); }
.pr-mine[hidden] { display: none; }
.pr-mine b { color: var(--pr-gold); }
.pr-mine button { min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--pr-gold); color: var(--pr-ink); font: 800 .86rem var(--font-body); cursor: pointer; }
.pr-mine button:active { transform: scale(.96); }

.pr-stage { position: relative; display: flex; align-items: flex-end; min-height: 100%; background: var(--pr-red); }
.pr-stage svg { display: block; width: 100%; height: auto; max-height: 640px; }
.pr-beam polygon { fill: #ffe27a; opacity: .34; }
.pr-truss, .pr-head { fill: #0b0b0b; }
.pr-lattice { stroke: #e0203f; stroke-width: 2; }
.pr-scr { stroke: #0b0b0b; stroke-width: 2; }
.pr-cube polygon { fill: none; stroke: #ffc60b; stroke-width: 3; stroke-linejoin: round; }
.pr-cube polygon:nth-child(2) { fill: rgba(255, 198, 11, .18); }
.pr-booth { fill: #0b0b0b; }
.pr-spk rect { fill: #121212; }
.pr-spk circle { fill: #262626; stroke: #3a3a3a; stroke-width: 3; }
.pr-spk circle.pr-dust { fill: #0b0b0b; stroke: #ffc60b; stroke-width: 2; }
.pr-crowd { fill: #0b0b0b; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .pr-beam { transform-box: view-box; animation: pr-sweep 7s var(--pr-ease) infinite alternate; animation-delay: calc(var(--i) * -1.3s); }
  @keyframes pr-sweep { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }
}
@media (max-width: 900px) {
  .pr-hero { grid-template-columns: minmax(0, 1fr); }
  .pr-stage { order: -1; }
  .pr-stage svg { max-height: 380px; }
  .pr-cta .pr-btn { flex: 1 1 auto; }
}

/* ---- sections */
.pr-sec { display: grid; gap: clamp(16px, 2.4vw, 26px); min-width: 0; scroll-margin-top: 90px; }
.pr-sec-hd { display: grid; gap: 8px; max-width: 760px; }
.pr-sec-h { margin: 0; font: 400 clamp(2.4rem, 6.4vw, 4.6rem)/.88 var(--font-display); letter-spacing: -.02em; text-transform: uppercase; }
.pr-sec-p { margin: 0; max-width: 56ch; line-height: 1.6; color: var(--text-dim); }

/* ---- what we bring: five flat fields */
.pr-parts { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.pr-part { position: relative; display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: clamp(20px, 2.6vw, 30px); border-radius: 24px; container-type: inline-size; scroll-margin-top: 90px; }
.pr-part.is-sound { grid-column: span 3; background: #0b0b0b; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.pr-part.is-lights { grid-column: span 3; background: var(--pr-gold); color: var(--pr-ink); }
.pr-part.is-screens { grid-column: span 2; background: #0098ea; color: #fff; }
.pr-part.is-vj { grid-column: span 2; background: #6b2fff; color: #fff; }
.pr-part.is-crew { grid-column: span 2; background: #2ee59d; color: var(--pr-ink); }
.pr-n { font: 800 .9rem var(--font-body); opacity: .6; }
.pr-part-h { margin: 0; font: 400 clamp(1.8rem, 11cqi, 3.2rem)/.9 var(--font-display); letter-spacing: -.01em; text-transform: uppercase; }
.pr-part p { margin: 0; max-width: 48ch; line-height: 1.55; opacity: .86; }
.pr-spec { display: flex; flex-wrap: wrap; gap: 6px; margin: auto 0 0; padding: 4px 0 0; list-style: none; }
.pr-spec li { padding: 7px 13px; border-radius: 999px; background: color-mix(in srgb, currentColor 12%, transparent); font: 700 .84rem var(--font-body); }
.pr-more { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; min-height: 44px; padding: 0 18px; border-radius: 999px; background: #fff; color: #2a0a7a !important;
  font: 800 .9rem var(--font-body); text-decoration: none; transition: transform .14s var(--pr-ease); }
.pr-more:active { transform: scale(.96); }
[dir="rtl"] .pr-more svg { transform: scaleX(-1); }

/* the still drawings on each field */
.pr-art { display: flex; align-items: flex-end; justify-content: center; gap: 10px; height: 116px; padding: 12px; border-radius: 16px; background: color-mix(in srgb, currentColor 8%, transparent); }
.pr-art-sound .spk, .pr-art-sound .sub { display: grid; gap: 6px; padding: 7px; border-radius: 7px; background: #1d1d1d; box-shadow: inset 0 0 0 1px #333; }
.pr-art-sound .spk { width: 40px; } .pr-art-sound .sub { width: 66px; }
.pr-art-sound b { display: block; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #555 0 16%, #0c0c0c 18% 56%, #e0203f 58% 63%, #0c0c0c 65%); }
.pr-art-lights { gap: 18px; }
.pr-art-lights i { width: 11px; height: 90px; border-radius: 6px 6px 2px 2px; transform-origin: 50% 100%; transform: rotate(calc((var(--i) - 2) * 12deg)); background: #0b0b0b; opacity: .85; }
.pr-art-screens { display: grid; grid-template-columns: repeat(3, 40px); gap: 5px; align-content: center; justify-content: center; }
.pr-art-screens i { height: 26px; border-radius: 3px; background: #fff; opacity: .9; }
.pr-art-screens i:nth-child(odd) { background: #0b0b0b; } .pr-art-screens i:nth-child(5) { background: var(--pr-gold); opacity: 1; }
.pr-art-vj { align-items: center; }
.pr-art-vj svg { width: 140px; height: 92px; }
.pr-art-vj polygon { fill: none; stroke: #fff; stroke-width: 2.5; stroke-linejoin: round; }
.pr-art-vj polygon:nth-child(3) { fill: rgba(255, 198, 11, .9); stroke: #ffc60b; }
.pr-art-crew { gap: 14px; }
.pr-art-crew i { position: relative; width: 24px; height: 52px; border-radius: 12px 12px 4px 4px; background: #0b0b0b; opacity: .86; }
.pr-art-crew i::before { content: ""; position: absolute; left: 50%; top: -20px; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: inherit; }
.pr-art-crew i:nth-child(even) { height: 60px; }
@media (max-width: 980px) {
  .pr-parts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pr-part.is-sound, .pr-part.is-lights, .pr-part.is-screens, .pr-part.is-vj { grid-column: span 1; }
  .pr-part.is-crew { grid-column: 1 / -1; }
}
@media (max-width: 600px) { .pr-parts { grid-template-columns: minmax(0, 1fr); } .pr-part.is-crew { grid-column: auto; } }

/* ---- how it works */
.pr-how { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; counter-reset: s; }
.pr-how li { counter-increment: s; display: grid; align-content: start; gap: 8px; min-width: 0; padding: clamp(18px, 2.2vw, 26px); border-radius: 22px; background: var(--mb-raise); }
.pr-how li::before { content: counter(s); font: 400 clamp(3rem, 6vw, 4.6rem)/.8 var(--font-display); color: var(--pr-red); }
.pr-how b { font-size: 1.12rem; }
.pr-how span { line-height: 1.55; color: var(--text-dim); }
@media (max-width: 980px) { .pr-how { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .pr-how { grid-template-columns: minmax(0, 1fr); } .pr-how li { grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; } .pr-how li::before { grid-row: span 2; } }

/* ---- pay your way */
.pr-ways { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.pr-way { display: grid; gap: 6px; min-width: 0; padding: 18px 20px; border-radius: 22px; background: var(--mb-raise); }
.pr-way svg { color: var(--pr-gold); }
.pr-way b { font-size: 1.05rem; } .pr-way span { font-size: .9rem; line-height: 1.5; color: var(--text-dim); }

/* ---- the last word */
.pr-end { display: grid; justify-items: start; gap: 16px; padding: clamp(26px, 5vw, 64px); border-radius: 28px; background: var(--pr-gold); color: var(--pr-ink); }
.pr-end-h { margin: 0; font: 400 clamp(2.8rem, 9vw, 7rem)/.84 var(--font-display); letter-spacing: -.02em; text-transform: uppercase; }
.pr-end-h em { font-style: normal; color: var(--pr-red); }
.pr-end p { display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 0; font: 600 1.02rem var(--font-body); }
@media (max-width: 600px) { .pr-end .pr-btn { width: 100%; } }

/* ---- the booking: the whole screen */
.prb { position: fixed; inset: 0; z-index: 3000; display: grid; grid-template-columns: minmax(300px, 34%) minmax(0, 1fr); background: #0b0b0b; color: #fff; }
.prb[hidden] { display: none; }
.prb-side { display: flex; flex-direction: column; gap: 18px; min-width: 0; padding: clamp(28px, 4vw, 60px); background: var(--pr-gold, #ffc60b); color: #0b0b0b; overflow: auto; container-type: inline-size; }
.prb-k { margin: 0; font: 800 .95rem var(--font-body); }
.prb-h { margin: 0; font: 400 clamp(2.2rem, 22cqi, 5.2rem)/.84 var(--font-display); letter-spacing: -.02em; text-transform: uppercase; }
.prb-dep { display: grid; gap: 2px; margin: 0; }
.prb-dep b { font: 400 clamp(1.6rem, 11cqi, 3rem)/1 var(--font-display); white-space: nowrap; }
.prb-dep span { font: 700 .95rem var(--font-body); }
.prb-steps { display: grid; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; counter-reset: s; }
.prb-steps li { counter-increment: s; display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 14px; border-radius: 14px; font: 700 .98rem var(--font-body); opacity: .55; }
.prb-steps li::before { content: counter(s); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(11, 11, 11, .14); font: 800 .84rem var(--font-body); }
.prb-steps li.on { opacity: 1; background: #0b0b0b; color: #fff; }
.prb-steps li.on::before { background: var(--pr-gold, #ffc60b); color: #0b0b0b; }
.prb-steps li.done { opacity: 1; }
.prb-steps li.done::before { content: "✓"; background: #0b0b0b; color: var(--pr-gold, #ffc60b); }
.prb-fine { margin: auto 0 0; font-size: .9rem; line-height: 1.55; opacity: .78; }
.prb-fine.is-phone { display: none; margin: 0; color: rgba(255, 255, 255, .62); opacity: 1; }

.prb-main { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-width: 0; min-height: 0; }
.prb-top { position: relative; display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 14px clamp(16px, 3vw, 34px); }
.prb-prog { position: absolute; inset: 0 0 auto 0; height: 4px; background: rgba(255, 255, 255, .1); }
.prb-prog i { display: block; height: 100%; width: calc(var(--p, .2) * 100%); background: var(--pr-gold, #ffc60b); transition: width .3s var(--pr-ease, ease); }
.prb-mini { display: none; margin-inline-end: auto; font: 600 .9rem var(--font-body); color: rgba(255, 255, 255, .7); }
.prb-mini b { color: var(--pr-gold, #ffc60b); }
.prb-x { display: grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .1); color: #fff; cursor: pointer; transition: transform .14s var(--pr-ease, ease); }
.prb-x:active { transform: scale(.92); }
.prb-body { display: block; min-height: 0; overflow: auto; padding: 8px clamp(16px, 5vw, 72px) 28px; overscroll-behavior: contain; }
.prb-step { display: grid; gap: 18px; max-width: 640px; min-width: 0; container-type: inline-size; }
.prb-step > * { min-width: 0; }
.prb-step[hidden] { display: none; }
.prb-sh { margin: 0 0 4px; font: 400 clamp(2rem, 11cqi, 3.8rem)/.9 var(--font-display); letter-spacing: -.01em; text-transform: uppercase; outline: none; }
.prb-f { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.prb-f > span, .prb-f legend { padding: 0; font: 700 .95rem var(--font-body); color: rgba(255, 255, 255, .8); text-transform: none; letter-spacing: 0; }
.prb-f small { font: 600 .88rem var(--font-body); color: rgba(255, 255, 255, .5); text-transform: none; letter-spacing: 0; }
.prb-f input, .prb-f textarea { width: 100%; min-width: 0; min-height: 58px; margin: 0; padding: 14px 16px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 16px;
  background: #161616; color: #fff; font: 600 1.08rem var(--font-body); }
.prb-f textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
.prb-f input::placeholder, .prb-f textarea::placeholder { color: rgba(255, 255, 255, .34); }
.prb-f input:focus, .prb-f textarea:focus { outline: 2px solid var(--pr-gold, #ffc60b); outline-offset: 1px; border-color: transparent; }
.prb-f .bad { border-color: #ff6b76; }
.prb-seg, .prb-needs { display: flex; flex-wrap: wrap; gap: 8px; }
.prb-seg label, .prb-needs label { position: relative; }
.prb-seg input, .prb-needs input { position: absolute; opacity: 0; pointer-events: none; }
.prb-seg span, .prb-needs span { display: inline-flex; align-items: center; gap: 7px; min-height: 48px; padding: 0 18px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .22);
  font: 700 .95rem var(--font-body); text-transform: none; letter-spacing: 0; cursor: pointer; transition: transform .14s var(--pr-ease, ease); }
.prb-seg span:active, .prb-needs span:active { transform: scale(.96); }
.prb-needs span svg { display: none; }
.prb-seg input:checked + span { background: #fff; border-color: #fff; color: #0b0b0b; }
.prb-needs input:checked + span { background: var(--pr-gold, #ffc60b); border-color: var(--pr-gold, #ffc60b); color: #0b0b0b; }
.prb-needs input:checked + span svg { display: block; }
.prb-seg input:focus-visible + span, .prb-needs input:focus-visible + span { outline: 2px solid var(--pr-gold, #ffc60b); outline-offset: 2px; }
.prb-note { display: flex; align-items: flex-start; gap: 6px 8px; margin: 0; font-size: .92rem; line-height: 1.5; color: rgba(255, 255, 255, .62); }
.prb-note svg { flex: none; margin-top: 3px; }
.prb-note a { color: var(--pr-gold, #ffc60b); font-weight: 700; }
.prb-amt { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; margin: 0; }
.prb-amt b { font: 400 clamp(2rem, 11cqi, 5.4rem)/.9 var(--font-display); color: var(--pr-gold, #ffc60b); white-space: nowrap; }
.prb-amt span { font: 700 1.05rem var(--font-body); }
.prb-ways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.prb-ways button { display: grid; justify-items: start; align-content: start; gap: 6px; min-width: 0; min-height: 112px; padding: 16px 18px; border: 2px solid rgba(255, 255, 255, .16); border-radius: 20px;
  background: #161616; color: #fff; text-align: start; cursor: pointer; transition: transform .14s var(--pr-ease, ease); }
.prb-ways button:active { transform: scale(.97); }
.prb-ways button svg { color: var(--pr-gold, #ffc60b); }
.prb-ways button b { font: 800 1.05rem var(--font-body); }
.prb-ways button span { font: 600 .86rem/1.45 var(--font-body); color: rgba(255, 255, 255, .62); }
.prb-ways button[aria-checked="true"] { border-color: var(--pr-gold, #ffc60b); background: var(--pr-gold, #ffc60b); color: #0b0b0b; }
.prb-ways button[aria-checked="true"] svg, .prb-ways button[aria-checked="true"] span { color: #0b0b0b; }
.prb-ways button:disabled { opacity: .45; cursor: default; transform: none; }
.prb-err { flex: 1 0 100%; margin: 0; padding: 12px 16px; border-radius: 14px; background: rgba(255, 107, 118, .14); color: #ff8a93; font: 700 .94rem/1.45 var(--font-body); }
.prb-err[hidden] { display: none; }

/* paying */
.prb-payk { margin: -8px 0 0; font: 700 .95rem var(--font-body); color: var(--pr-gold, #ffc60b); }
.prb-pay { display: grid; gap: 10px; container-type: inline-size; }
.prb-field { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; padding: 14px 16px; border-radius: 18px; background: #161616; }
.prb-field span { grid-column: 1 / -1; font: 700 .84rem var(--font-body); color: rgba(255, 255, 255, .6); }
.prb-field b { min-width: 0; font: 800 1.12rem var(--font-body); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.prb-field.big b { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font: 400 clamp(1.5rem, 8cqi, 2.8rem)/1 var(--font-display); color: var(--pr-gold, #ffc60b); }
.prb-field b i { font-style: normal; white-space: nowrap; }
.prb-field b small { font: 700 .95rem var(--font-body); color: #fff; }
.prb-field button { min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: #fff; color: #0b0b0b; font: 800 .84rem var(--font-body); cursor: pointer; }
.prb-field button:active { transform: scale(.95); }
.prb-help { margin: 0; font-size: .92rem; line-height: 1.55; color: rgba(255, 255, 255, .66); }
.prb-help b { color: #fff; }
.prb-state { display: flex; align-items: center; gap: 10px; margin: 0; font: 700 .95rem var(--font-body); color: rgba(255, 255, 255, .8); }
.prb-state i { width: 10px; height: 10px; border-radius: 50%; background: var(--pr-gold, #ffc60b); }
.prb-state.bad { color: #ff8a93; }
.prb-row { display: flex; flex-wrap: wrap; gap: 8px; }

/* done */
.prb-done { justify-items: start; }
.prb-tick { display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; background: #2ee59d; color: #0b0b0b; }
.prb-done-p { margin: 0; font: 700 1.08rem/1.5 var(--font-body); }
.prb-done-s { margin: 0; line-height: 1.6; color: rgba(255, 255, 255, .7); }

.prb-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding: 14px clamp(16px, 5vw, 72px) calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(255, 255, 255, .1); background: #0b0b0b; }
.prb-foot [data-next] { margin-inline-start: auto; min-width: 180px; }
.prb-foot [hidden] { display: none; }
.prb-foot:not(:has(> :not([hidden]))) { display: none; }

@media (max-width: 860px) {
  .prb { grid-template-columns: minmax(0, 1fr); }
  .prb-side { display: none; }
  .prb-mini { display: inline; }
  .prb-fine.is-phone { display: block; }
  .prb-ways { grid-template-columns: minmax(0, 1fr); }
  .prb-ways button { min-height: 0; }
  .prb-foot .pr-btn { flex: 1 1 0; min-width: 0; padding: 0 14px; white-space: nowrap; }
}
:root[lang="fa"] .pr-h, :root[lang="fa"] .pr-sec-h, :root[lang="fa"] .pr-part-h, :root[lang="fa"] .pr-end-h, :root[lang="fa"] .prb-h, :root[lang="fa"] .prb-sh { line-height: 1.2; }
@media (prefers-reduced-motion: reduce) { .pr-btn, .pr-more, .prb-x, .prb-seg span, .prb-needs span, .prb-ways button, .prb-prog i { transition: none; } }