/* ─────────────────────────────────────────────────────────────
   نقشهٔ سالن (x-hall-plan): بخش‌ها با چینشِ واقعیِ صندلی‌ها، صحنه، درب‌های ورودی/خروجی
   و مسیرِ پیشنهادی. فایلِ مستقل (بدونِ بیلدِ Tailwind). رنگ‌ها از توکن‌های تمِ ایونتی
   می‌آیند و در پنلِ Filament مقدارِ پیش‌فرض دارند.
   ───────────────────────────────────────────────────────────── */
.hp-root, .ho {
    --hp-fg: var(--surface-fg, #27272a);
    --hp-bg: var(--surface-bg, #ffffff);
    --hp-accent: var(--accent-rgb, 217, 119, 6);
    --hp-vip: 109, 40, 217;
    --hp-gen: 22, 163, 74;
    --hp-mine: 16, 185, 129;
    --hp-in: 5, 150, 105;
    --hp-out: 225, 29, 72;
    --hp-both: 37, 99, 235;
}
html.dark .hp-root, html.dark .ho, .dark .hp-root, .dark .ho {
    --hp-fg: var(--surface-fg, #f4f4f5);
    --hp-bg: var(--surface-bg, #18181b);
    --hp-vip: 167, 139, 250;
    --hp-gen: 74, 222, 128;
    --hp-mine: 52, 211, 153;
    --hp-in: 52, 211, 153;
    --hp-out: 251, 113, 133;
    --hp-both: 96, 165, 250;
}

/* ── قاب و اسکرولِ نقشه ─────────────────────────────────────── */
.hp-wrap {
    position: relative;
    border-radius: 1.1rem;
    border: 1px solid color-mix(in srgb, var(--hp-fg) 13%, transparent);
    background:
        radial-gradient(120% 70% at 50% 0%, rgba(var(--hp-accent), 0.10), transparent 62%),
        color-mix(in srgb, var(--hp-fg) 3%, var(--hp-bg));
    overflow: hidden;
}
.hp-scroll { overflow-x: auto; overflow-y: hidden; padding: 0.4rem 0.4rem 0.2rem; scrollbar-width: thin; }
.hp-svg { direction: ltr; display: block; width: 100%; min-width: calc(36rem * var(--hpz, 1)); height: auto; margin-inline: auto; }
.hp-svg.is-upper { transform: perspective(1400px) rotateX(5deg); transform-origin: 50% 100%; }
@media (max-width: 640px) { .hp-svg { min-width: calc(34rem * var(--hpz, 1)); } }
/* آیتم ۱۷۷: بزرگ‌نمایی/کوچک‌نمایی نقشه (دکمه‌ها، دو انگشت، Ctrl+چرخ) — ضریب روی <html> نگه داشته می‌شود تا با رندرِ دوبارهٔ Livewire نپرد. */
.hp-wrap { position: relative; }
.hp-zoom { position: absolute; z-index: 3; inset-block-start: 0.5rem; inset-inline-end: 0.5rem; display: inline-flex; gap: 0.25rem; direction: ltr; }
.hp-zoom button { min-width: 2rem; height: 2rem; padding: 0 0.5rem; border-radius: 0.6rem; border: 1px solid color-mix(in srgb, var(--hp-fg) 28%, transparent); background: color-mix(in srgb, var(--hp-fg) 8%, transparent); color: var(--hp-fg); font-weight: 700; line-height: 1; cursor: pointer; backdrop-filter: blur(6px); }
.hp-zoom button:hover { border-color: rgb(var(--hp-accent)); }
.hp-zoom button:focus-visible { outline: 2px solid rgb(var(--hp-accent)); outline-offset: 1px; }
.hp-scroll { touch-action: pan-x pan-y; }
.hp-scroll-hint { display: none; margin: 0; padding: 0 0.8rem 0.5rem; text-align: center; font-size: 0.7rem; color: color-mix(in srgb, var(--hp-fg) 55%, transparent); }
@media (max-width: 640px) { .hp-scroll-hint { display: block; } }

.hp-ribbon {
    position: absolute; inset-block-start: 0.7rem; inset-inline-start: 0.8rem; z-index: 3;
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.25rem 0.75rem; border-radius: 999px;
    font-size: 0.75rem; font-weight: 800;
    color: rgb(var(--hp-accent)); background: rgba(var(--hp-accent), 0.13);
    border: 1px solid rgba(var(--hp-accent), 0.45);
    pointer-events: none;
}

.hp-stop { stop-color: rgb(var(--hp-accent)); }
.hp-hall { fill: none; stroke: color-mix(in srgb, var(--hp-fg) 30%, transparent); stroke-width: 3; stroke-dasharray: 2 9; stroke-linecap: round; }
.hp-ghost { fill: color-mix(in srgb, var(--hp-fg) 5%, transparent); stroke: color-mix(in srgb, var(--hp-fg) 24%, transparent); stroke-width: 2; stroke-dasharray: 8 7; }
.hp-stage { stroke: rgba(var(--hp-accent), 0.9); stroke-width: 2; }
.hp-stage-t { fill: #fff; font-weight: 800; letter-spacing: 0.02em; paint-order: stroke; stroke: rgba(0, 0, 0, 0.28); stroke-width: 3px; }
.hp-beam { pointer-events: none; }

/* ── بخش ───────────────────────────────────────────────────── */
.hp-sec { --hp-c: var(--hp-sec-color, rgb(var(--hp-accent))); outline: none; }
.hp-body { transform-box: fill-box; transform-origin: center; transition: transform 0.2s ease, opacity 0.2s; }
.hp-sec-bg {
    fill: color-mix(in srgb, var(--hp-c) 10%, var(--hp-bg));
    stroke: color-mix(in srgb, var(--hp-c) 62%, transparent);
    stroke-width: 2.5;
    transition: fill 0.2s, stroke 0.2s, stroke-width 0.2s;
}
.hp-sec-strip { fill: var(--hp-c); opacity: 0.9; }
.hp-sec-name, .hp-sec-sub, .hp-stage-t, .hp-you { direction: rtl; unicode-bidi: plaintext; }
.hp-sec-name { fill: var(--hp-fg); font-weight: 800; }
.hp-sec-sub { fill: color-mix(in srgb, var(--hp-fg) 68%, transparent); font-weight: 600; }
.hp-sec-hatch { stroke: none; }
.hp-hatch-line { stroke: color-mix(in srgb, var(--hp-fg) 24%, transparent); stroke-width: 2.4; }

.hp-state { fill: rgb(var(--hp-mine)); stroke: var(--hp-bg); stroke-width: 2; }
.hp-st-limited .hp-state { fill: rgb(217, 119, 6); }
.hp-st-low .hp-state { fill: rgb(225, 29, 72); }
.hp-st-full .hp-state { fill: color-mix(in srgb, var(--hp-fg) 45%, transparent); }

/* صندلی‌های ریزنقش: رنگ + گوشهٔ گرد (stroke هم‌رنگ).
   «دوتکه»: خطِ .hp-cut تکیه‌گاه را از نشیمن جدا می‌کند؛ هم‌رنگِ زمینهٔ بخش است (در هاور هم‌رنگِ زمینهٔ هاور). */
.hp-s { stroke-width: 5; stroke-linejoin: round; }
.hp-s-free { fill: var(--hp-c); stroke: var(--hp-c); opacity: 0.88; }
.hp-s-vip { fill: rgb(var(--hp-vip)); stroke: rgb(var(--hp-vip)); }
.hp-s-taken { fill: color-mix(in srgb, var(--hp-fg) 17%, var(--hp-bg)); stroke: color-mix(in srgb, var(--hp-fg) 17%, var(--hp-bg)); }
.hp-s-mine { fill: rgb(var(--hp-mine)); stroke: rgb(var(--hp-mine)); animation: hp-blink 1.4s ease-in-out infinite; }
.hp-cut { fill: none; stroke: color-mix(in srgb, var(--hp-c) 10%, var(--hp-bg)); stroke-linecap: butt; pointer-events: none; }
.hp-sec.is-vip .hp-cut { stroke: color-mix(in srgb, rgb(var(--hp-vip)) 11%, var(--hp-bg)); }
.hp-sec.is-full .hp-cut { stroke: color-mix(in srgb, var(--hp-fg) 6%, var(--hp-bg)); }
.hp-sec.is-hover .hp-cut, .hp-sec:focus-visible .hp-cut { stroke: color-mix(in srgb, var(--hp-c) 20%, var(--hp-bg)); }
.hp-sec.is-active .hp-cut { stroke: color-mix(in srgb, rgb(var(--hp-accent)) 16%, var(--hp-bg)); }
.hp-sec.is-mine .hp-cut { stroke: color-mix(in srgb, rgb(var(--hp-mine)) 15%, var(--hp-bg)); }
@keyframes hp-blink { 50% { opacity: 0.45; } }

.hp-sec.is-vip .hp-sec-bg { stroke: rgb(var(--hp-vip)); stroke-width: 3.5; fill: color-mix(in srgb, rgb(var(--hp-vip)) 11%, var(--hp-bg)); }
.hp-sec.is-full .hp-sec-bg { stroke-dasharray: 9 7; stroke: color-mix(in srgb, var(--hp-fg) 34%, transparent); fill: color-mix(in srgb, var(--hp-fg) 6%, var(--hp-bg)); }
.hp-sec.is-full .hp-sec-name { opacity: 0.55; }
.hp-sec.is-full .hp-s-free, .hp-sec.is-full .hp-s-vip { opacity: 0.3; }

.hp-sec.is-mine .hp-sec-bg { stroke: rgb(var(--hp-mine)); stroke-width: 5; fill: rgba(var(--hp-mine), 0.15); }
.hp-you { fill: rgb(var(--hp-mine)); font-weight: 800; }

/* تعامل: هاور / فوکوس / انتخاب / کم‌رنگ */
.hp-sec.is-pick { cursor: pointer; }
.hp-sec.is-hover .hp-body, .hp-sec:focus-visible .hp-body { transform: scale(1.04); }
.hp-sec.is-hover .hp-sec-bg, .hp-sec:focus-visible .hp-sec-bg {
    stroke: var(--hp-c); stroke-width: 5;
    fill: color-mix(in srgb, var(--hp-c) 20%, var(--hp-bg));
}
.hp-sec.is-hover .hp-s-free, .hp-sec:focus-visible .hp-s-free { opacity: 1; }
.hp-sec.is-active .hp-sec-bg { stroke: rgb(var(--hp-accent)); stroke-width: 6; fill: rgba(var(--hp-accent), 0.16); }
.hp-sec.is-dim { opacity: 0.24; }
.hp-sec.is-served .hp-sec-bg { stroke: rgb(var(--hp-in)); stroke-width: 5; }

/* ── درب‌ها ────────────────────────────────────────────────── */
.hp-door { cursor: default; --hp-d: var(--hp-in); }
.hp-door.is-out { --hp-d: var(--hp-out); }
.hp-door.is-both { --hp-d: var(--hp-both); }
.hp-door-dot { fill: rgb(var(--hp-d)); stroke: var(--hp-bg); stroke-width: 3; }
.hp-door-ring { fill: none; stroke: rgba(var(--hp-d), 0.4); stroke-width: 3; transform-box: fill-box; transform-origin: center; transition: transform 0.2s; }
.hp-door-arrow { fill: #fff; }
.hp-door-t { fill: var(--hp-fg); font-weight: 800; paint-order: stroke; stroke: var(--hp-bg); stroke-width: 6px; stroke-linejoin: round; }
.hp-door.is-hot .hp-door-ring, .hp-door.is-serving .hp-door-ring { transform: scale(1.3); stroke-width: 5; }
.hp-door.is-rec .hp-door-ring { animation: hp-ring 1.6s ease-in-out infinite; stroke-width: 5; }
@keyframes hp-ring { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.45); opacity: 0.35; } }

/* ── مسیر ──────────────────────────────────────────────────── */
.hp-route { fill: none; stroke: rgb(var(--hp-mine)); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 16 13; animation: hp-flow 1.1s linear infinite; }
.hp-route-head { fill: rgb(var(--hp-mine)); }
@keyframes hp-flow { to { stroke-dashoffset: -29; } }
@media (prefers-reduced-motion: reduce) {
    .hp-route, .hp-door.is-rec .hp-door-ring, .hp-s-mine { animation: none; }
    .hp-body, .hp-door-ring { transition: none; }
}

/* ── راهنما ────────────────────────────────────────────────── */
.hp-legend {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 1rem;
    padding: 0.55rem 0.9rem 0.7rem;
    font-size: 0.72rem; color: color-mix(in srgb, var(--hp-fg) 72%, transparent);
}
.hp-lg { display: inline-flex; align-items: center; gap: 0.35rem; }
.hp-sw { display: inline-block; inline-size: 0.8rem; block-size: 0.8rem; border-radius: 0.22rem; background: rgb(var(--hp-accent)); }
.hp-sw.is-taken { background: color-mix(in srgb, var(--hp-fg) 24%, transparent); }
.hp-sw.is-vip { background: rgb(var(--hp-vip)); }
.hp-sw.is-mine { background: rgb(var(--hp-mine)); }
.hp-sw.is-in { background: rgb(var(--hp-in)); border-radius: 999px; }
.hp-sw.is-out { background: rgb(var(--hp-out)); border-radius: 999px; }
.hp-sw.is-both { background: rgb(var(--hp-both)); border-radius: 999px; }

/* ── تولتیپ (هاور) ─────────────────────────────────────────── */
.hp-tip {
    position: absolute; z-index: 30; pointer-events: none;
    inline-size: max-content; max-inline-size: 17.5rem;
    padding: 0.7rem 0.85rem;
    border-radius: 0.85rem;
    background: var(--hp-bg); color: var(--hp-fg);
    border: 1px solid color-mix(in srgb, var(--hp-fg) 18%, transparent);
    box-shadow: 0 18px 36px -14px rgba(0, 0, 0, 0.45);
    font-size: 0.78rem; line-height: 1.85;
}
.hp-tip h5 { margin: 0; font-size: 0.92rem; font-weight: 800; }
.hp-tip-row { display: flex; align-items: baseline; justify-content: space-between; gap: 0.8rem; }
.hp-tip-row span:first-child { color: color-mix(in srgb, var(--hp-fg) 58%, transparent); }
.hp-tip-row b { font-weight: 800; font-variant-numeric: tabular-nums; }
.hp-tip-price { color: var(--accent-ink, rgb(var(--hp-accent))); }
.hp-tip-door { margin-block-start: 0.35rem; padding-block-start: 0.35rem; border-block-start: 1px dashed color-mix(in srgb, var(--hp-fg) 22%, transparent); }
.hp-tip-door b { color: rgb(var(--hp-in)); }
.hp-tip-cta { margin-block-start: 0.35rem; font-weight: 800; color: rgb(var(--hp-accent)); }

/* ── انتخابگر طبقه: نمای کناریِ سالن ───────────────────────── */
.hp-floors { display: flex; align-items: stretch; gap: 0.8rem; flex-wrap: wrap; }
.hp-tiers { flex: none; inline-size: 9.5rem; }
.hp-tiers svg { display: block; inline-size: 100%; height: auto; }
.hp-tier { cursor: pointer; }
.hp-tier-slab { fill: color-mix(in srgb, var(--hp-fg) 22%, transparent); transition: fill 0.18s; }
.hp-tier-seat { fill: color-mix(in srgb, var(--hp-fg) 45%, transparent); }
.hp-tier:hover .hp-tier-slab { fill: rgba(var(--hp-accent), 0.55); }
.hp-tier.is-on .hp-tier-slab { fill: rgb(var(--hp-accent)); }
.hp-tier.is-on .hp-tier-seat { fill: #fff; }
.hp-tier-t { fill: color-mix(in srgb, var(--hp-fg) 70%, transparent); font-weight: 700; }
.hp-tier.is-on .hp-tier-t { fill: rgb(var(--hp-accent)); font-weight: 800; }
.hp-tier-stage { fill: rgba(var(--hp-accent), 0.85); }

/* ── نمای کلیِ سالن (x-hall-overview): فروشِ هوشمند، فروشِ دستی، پس از خرید ──────
   «عمومی» آبی و «VIP» بنفش است (نه رنگِ لهجهٔ سایت که به کهربایی می‌زند) تا دو دسته هیچ‌وقت
   شبیهِ هم نشوند؛ «صندلیِ شما» سبزِ پررنگ می‌ماند. VIP علاوه بر رنگ، ستاره و قابِ ضخیم دارد. */
.ho .hp-sec { --hp-c: rgb(var(--hp-gen)); }
.ho .hp-sec.is-vip { --hp-c: rgb(var(--hp-vip)); }
.ho .hp-s-free { fill: rgb(var(--hp-gen)); stroke: rgb(var(--hp-gen)); opacity: 1; }
.ho .hp-s-vip { fill: rgb(var(--hp-vip)); stroke: rgb(var(--hp-vip)); }
.ho .hp-sec .hp-sec-bg { fill: color-mix(in srgb, rgb(var(--hp-gen)) 9%, var(--hp-bg)); stroke: color-mix(in srgb, rgb(var(--hp-gen)) 70%, transparent); }
.ho .hp-sec.is-vip .hp-sec-bg { fill: color-mix(in srgb, rgb(var(--hp-vip)) 11%, var(--hp-bg)); stroke: rgb(var(--hp-vip)); stroke-width: 3.5; }
.ho .hp-sec .hp-sec-strip { fill: rgb(var(--hp-gen)); }
.ho .hp-sec.is-vip .hp-sec-strip { fill: rgb(var(--hp-vip)); }
.ho .hp-cut { stroke: color-mix(in srgb, rgb(var(--hp-gen)) 9%, var(--hp-bg)); }
.ho .hp-sec.is-vip .hp-cut { stroke: color-mix(in srgb, rgb(var(--hp-vip)) 11%, var(--hp-bg)); }
.ho .hp-sec.is-mine .hp-sec-bg { stroke: rgb(var(--hp-mine)); stroke-width: 5; fill: rgba(var(--hp-mine), 0.15); }
.ho .hp-sec.is-mine .hp-cut { stroke: color-mix(in srgb, rgb(var(--hp-mine)) 15%, var(--hp-bg)); }
.ho .hp-sec.is-full .hp-sec-bg { stroke: color-mix(in srgb, var(--hp-fg) 34%, transparent); fill: color-mix(in srgb, var(--hp-fg) 6%, var(--hp-bg)); }
.hp-sw.is-gen { background: rgb(var(--hp-gen)); }

/* ── نمای پس از خرید (x-hall-overview) ───────────────────── */
.ho { margin-block: 1rem; padding: 0.9rem; border-radius: 1rem; color: var(--hp-fg); background: color-mix(in srgb, var(--hp-fg) 4%, transparent); border: 1px solid color-mix(in srgb, var(--hp-fg) 12%, transparent); }
.ho-title { margin: 0 0 0.5rem; font-size: 0.95rem; font-weight: 800; }
.ho-tabs { display: flex; gap: 0.35rem; margin-bottom: 0.6rem; overflow-x: auto; }
.ho-tab { flex: none; padding: 0.35rem 0.9rem; border-radius: 999px; cursor: pointer; font-size: 0.8rem; font-weight: 700; color: inherit; background: transparent; border: 1px solid color-mix(in srgb, var(--hp-fg) 22%, transparent); }
.ho-tab[aria-selected='true'] { background: rgb(var(--hp-accent)); color: #fff; border-color: transparent; }
.ho .hp-wrap { background: transparent; border: 0; }
.ho .hp-legend { padding-inline: 0; }
.ho-where { margin-top: 0.9rem; padding-top: 0.8rem; border-top: 1px dashed color-mix(in srgb, var(--hp-fg) 22%, transparent); }
.ho-steps { margin: 0 0 0.7rem; padding-inline-start: 1.3rem; font-size: 0.85rem; line-height: 2; }
.ho-steps li::marker { color: rgb(var(--hp-mine)); font-weight: 800; }
.ho-vip-chip { margin-inline-start: 0.4rem; padding: 0.05rem 0.45rem; border-radius: 999px; font-size: 0.7rem; color: #fff; background: rgb(var(--hp-vip)); }
.ho-exit { margin: 0.2rem 0 0.7rem; padding: 0.5rem 0.75rem; border-radius: 0.7rem; font-size: 0.8rem; line-height: 1.9; background: rgba(var(--hp-out), 0.08); border: 1px solid rgba(var(--hp-out), 0.3); }
.ho-grid { overflow-x: auto; padding: 0.4rem 0; text-align: center; direction: ltr; }
.ho-grid-stage { margin: 0 auto 0.5rem; max-width: 16rem; padding-bottom: 0.15rem; font-size: 0.7rem; opacity: 0.7; border-bottom: 3px solid color-mix(in srgb, var(--hp-fg) 30%, transparent); }
.ho-grid-row { display: flex; align-items: center; justify-content: center; gap: 3px; margin-bottom: 3px; width: max-content; margin-inline: auto; }
.ho-grid-rl { width: 2rem; font-size: 0.65rem; opacity: 0.7; text-align: center; }
.ho-seat { display: inline-flex; align-items: center; justify-content: center; width: 1rem; height: 1rem; border-radius: 0.28rem; font-size: 0.55rem; background: color-mix(in srgb, var(--hp-fg) 15%, transparent); }
.ho-seat.is-mine { width: 1.6rem; height: 1.6rem; font-size: 0.7rem; font-weight: 800; color: #fff; background: rgb(var(--hp-mine)); box-shadow: 0 0 0 3px rgba(var(--hp-mine), 0.35); animation: ho-blink 1.4s ease-in-out infinite; }
@keyframes ho-blink { 50% { box-shadow: 0 0 0 7px rgba(var(--hp-mine), 0.1); } }
@media (prefers-reduced-motion: reduce) { .ho-seat.is-mine { animation: none; } }

/* کارتِ بخش هنگامِ هاورِ همان بخش روی نقشه */
.fx-zone.fx-zone-hover { border-color: rgba(var(--accent-rgb), 0.7); box-shadow: 0 8px 22px -14px rgba(var(--accent-rgb), 0.7); transform: translateY(-1px); }

/* نمای کلیِ فروشِ هوشمند: بلوک‌های رنگی بدونِ صندلی */
.ho-note { margin: 0 0 .6rem; font-size: .8rem; line-height: 1.9; opacity: .8; }
.ho-schematic .hp-sec .hp-sec-bg { fill: color-mix(in srgb, var(--hp-c) 14%, var(--hp-bg)); stroke: var(--hp-c); stroke-width: 3; }
.ho-schematic .hp-sec .hp-sec-strip { fill: var(--hp-c); }
.ho-schematic .hp-scroll-hint { display: none; }

/* نمای کلیِ فروشِ هوشمند — پر شدنِ عرضِ موبایل (بدونِ اسکرولِ افقی) + شکلِ چینشِ صندلی‌ها */
.ho-schematic .hp-svg { min-width: 0; }
.ho-schematic .hp-scroll { overflow-x: visible; padding-inline: 0; }
.hp-band { fill: var(--hp-c); opacity: .42; }
.ho-schematic .hp-sec.is-vip .hp-band { fill: rgb(var(--hp-vip)); opacity: .5; }