/* فرمِ نوبت‌گیریِ تعاملی (zbk-*) + بخشِ خدماتِ تصویری (zbs-*) — گرادیانِ مش (بادمجانی/شخصیت + سرمه‌ای) به سبکِ beUI Shader. */
.zbi{display:block}

/* ═══ فرم ═══ */
.zbk{display:grid;gap:18px;align-items:start}
@media(min-width:960px){.zbk{grid-template-columns:1.15fr .85fr}}
.zbk-prog{height:3px;border-radius:99px;background:var(--surface-2);overflow:hidden;margin-bottom:14px}
.zbk-prog i{display:block;height:100%;background:linear-gradient(90deg,var(--zb-accent),var(--zb-navy));transform-origin:right;transform:scaleX(0);transition:transform .6s var(--zb-ease-out)}
.zbk-steps{display:flex;flex-direction:column;gap:8px}
.zbk-s{border:1px solid var(--border);border-radius:16px;background:var(--surface);overflow:hidden;transition:border-color .2s}
.zbk-s.open{border-color:var(--zb-accent-line)}
.zbk-h{display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;border:0;background:transparent;text-align:start;color:var(--text)}
.zbk-h b{font-weight:500;font-size:15px}.zbk-h em{margin-inline-start:auto;font-style:normal;font-size:13px;color:var(--zb-accent-ink,var(--zb-accent));max-width:55%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zbk-n{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:12.5px;background:var(--surface-2);color:var(--text-2);flex:none;transition:all .3s var(--zb-ease-out)}
.zbk-h.on .zbk-n{background:var(--zb-accent-solid,var(--zb-accent));color:#fff}
.zbk-h.done .zbk-n{background:var(--zb-accent-soft);color:var(--zb-accent)}
.zbk-b{display:grid;grid-template-rows:0fr;transition:grid-template-rows .42s var(--zb-ease-out)}
.zbk-s.open .zbk-b{grid-template-rows:1fr}
.zbk-b>*{overflow:hidden;min-height:0;padding-inline:14px}
.zbk-s.open .zbk-b>*{padding-bottom:14px}
.zbk-cards{display:grid;gap:8px;grid-template-columns:repeat(2,1fr)}
@media(min-width:560px){.zbk-cards{grid-template-columns:repeat(3,1fr)}}
.zbk-c{display:flex;flex-direction:column;gap:4px;align-items:flex-start;text-align:start;padding:12px;border-radius:14px;border:1px solid var(--border);background:var(--surface);color:var(--text);transition:all .2s var(--zb-ease-out)}
.zbk-c:hover{border-color:var(--zb-accent-line)}.zbk-c:active{transform:scale(.97)}
.zbk-c b{font-weight:500;font-size:14px}.zbk-c small{font-size:12px;color:var(--muted);line-height:1.6}
.zbk-ic{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--zb-accent-soft);color:var(--zb-accent);margin-bottom:4px}
.zbk-c.sel{border-color:var(--zb-accent);background:var(--zb-accent-soft);box-shadow:0 0 0 1px var(--zb-accent)}
.zbk-sty{display:grid;gap:8px;grid-template-columns:repeat(2,1fr)}
.zbk-p{display:flex;gap:10px;align-items:center;padding:10px;border-radius:14px;border:1px solid var(--border);background:var(--surface);text-align:start;color:var(--text);transition:all .2s var(--zb-ease-out)}
.zbk-p:active{transform:scale(.97)}.zbk-p b{display:block;font-weight:500;font-size:14px}.zbk-p small{font-size:12px;color:var(--muted)}
.zbk-av{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-weight:600;color:#fff;background:linear-gradient(135deg,var(--zb-accent),var(--zb-navy));flex:none}
.zbk-p.sel{border-color:var(--zb-accent);background:var(--zb-accent-soft);box-shadow:0 0 0 1px var(--zb-accent)}
.zbk-quick{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.zbk-q{display:flex;flex-direction:column;align-items:flex-start;padding:8px 14px;border-radius:12px;border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:14px;transition:all .2s}
.zbk-q small{font-size:11.5px;color:var(--muted)}.zbk-q.sel{background:var(--text);color:var(--bg);border-color:var(--text)}.zbk-q.sel small{color:color-mix(in srgb,var(--bg) 70%,transparent)}
.zbk-cal{max-width:420px}
.zbk-slots{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(88px,1fr))}
.zbk-t{position:relative;padding:10px 6px;border-radius:12px;border:1px solid var(--border-strong,var(--border));background:var(--surface);color:var(--text);font-size:14px;animation:zbCell .35s var(--zb-ease-out) backwards;animation-delay:calc(var(--i)*35ms);transition:all .18s var(--zb-ease-out)}
.zbk-t:active{transform:scale(.95)}.zbk-t[disabled]{opacity:.3;text-decoration:line-through}
.zbk-t.best{border-color:var(--zb-accent-line)}.zbk-t i{position:absolute;top:-8px;inset-inline-end:6px;font-style:normal;font-size:10px;background:var(--zb-accent-solid,var(--zb-accent));color:#fff;border-radius:99px;padding:0 6px}
.zbk-t.sel{background:var(--zb-accent-solid,var(--zb-accent));color:#fff;border-color:var(--zb-accent)}
.zbk-hint{margin:0;color:var(--muted);font-size:13.5px}

/* بلیتِ زنده */
.zbk-ticket{position:relative;border:1px solid var(--border);border-radius:20px;padding:18px;background:var(--surface);display:flex;flex-direction:column;gap:8px;
    box-shadow:0 0 0 1px color-mix(in srgb,#000 3%,transparent),0 24px 40px -22px rgba(0,0,0,.22)}
@media(min-width:960px){.zbk-ticket{position:sticky;top:78px}}
.zbk-tkh{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
.zbk-tsalon{display:inline-flex;gap:8px;align-items:center;color:var(--zb-accent)}.zbk-tsalon b{color:var(--text);font-weight:500}
.zbk-row{display:flex;justify-content:space-between;gap:12px;font-size:13.5px;padding:3px 0}.zbk-row span{color:var(--muted)}.zbk-row b{font-weight:500;text-align:end}
.zbk-cut{height:1px;margin:8px -18px;background:repeating-linear-gradient(90deg,var(--border-strong,var(--border)) 0 6px,transparent 6px 12px);position:relative}
.zbk-cut::before,.zbk-cut::after{content:"";position:absolute;top:-8px;width:16px;height:16px;border-radius:50%;background:var(--bg);border:1px solid var(--border)}
.zbk-cut::before{inset-inline-start:-9px}.zbk-cut::after{inset-inline-end:-9px}
.zbk-dep b{color:var(--zb-accent-ink,var(--zb-accent))}
.zbk-go{width:100%;min-height:48px;margin-top:6px}.zbk-go[disabled]{background:var(--surface-2);color:var(--muted);border-color:transparent}
.zbk-note{margin:4px 0 0;font-size:12px;color:var(--muted);line-height:1.8}
.zbk-mut{color:var(--muted);font-size:13px}
.zbk-done{display:flex;flex-direction:column;gap:8px;align-items:center;text-align:center;animation:zbhPan .5s var(--zb-ease-out)}
.zbk-done .zbk-row{width:100%}
.zbk-ok{width:60px;height:60px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--zb-ok) 14%,transparent);color:var(--zb-ok)}
.zbk-ok svg{stroke-dasharray:30;stroke-dashoffset:30;animation:zbhDraw .6s .1s var(--zb-ease-out) forwards}
.zbk-act{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap;justify-content:center}
.zbk-bar{position:sticky;bottom:80px;display:none;justify-content:space-between;align-items:center;gap:12px;padding:10px 12px;border-radius:16px;background:color-mix(in srgb,var(--surface) 90%,transparent);border:1px solid var(--border);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 10px 30px rgba(0,0,0,.14)}
.zbk-bar small{display:block;color:var(--muted);font-size:11.5px}
@media(max-width:959.98px){.zbk-bar:not(:empty){display:flex}.zbk-ticket .zbk-go,.zbk-ticket .zbk-note{display:none}}

/* ═══ بخشِ خدماتِ تصویری ═══ */
.zbs-grid{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 16px 14px;margin-inline:-16px;scrollbar-width:none}
.zbs-grid::-webkit-scrollbar{display:none}
@media(min-width:960px){.zbs-grid{display:grid;grid-template-columns:repeat(3,1fr);overflow:visible;padding:0;margin:0}}
.zbs-card{flex:0 0 78%;scroll-snap-align:center;display:flex;flex-direction:column;border-radius:22px;overflow:hidden;background:var(--surface);border:1px solid var(--border);text-decoration:none;color:var(--text);transition:border-color .2s,box-shadow .3s}
@media(min-width:640px){.zbs-card{flex-basis:44%}}
@media(min-width:960px){.zbs-card{flex:none}}
.zbs-card:hover{border-color:var(--zb-accent-line);color:var(--text);box-shadow:0 24px 40px -26px color-mix(in srgb,var(--zb-accent) 55%,transparent)}
.zbs-art{position:relative;height:168px;overflow:hidden;isolation:isolate;
    background:
      radial-gradient(90% 120% at 12% 0%,color-mix(in srgb,var(--zb-accent) 92%,#fff 8%),transparent 62%),
      radial-gradient(80% 110% at 100% 100%,var(--zb-navy),transparent 66%),
      linear-gradient(135deg,color-mix(in srgb,var(--zb-accent) 70%,var(--zb-navy)),var(--zb-navy))}
.zbs-1 .zbs-art{background:radial-gradient(90% 120% at 90% 0%,color-mix(in srgb,var(--zb-accent) 88%,#fff 12%),transparent 62%),radial-gradient(80% 110% at 0% 100%,var(--zb-navy),transparent 66%),linear-gradient(200deg,var(--zb-navy),color-mix(in srgb,var(--zb-accent) 65%,var(--zb-navy)))}
.zbs-2 .zbs-art{background:radial-gradient(80% 100% at 50% 0%,color-mix(in srgb,var(--zb-accent) 60%,#fff 40%),transparent 66%),linear-gradient(160deg,color-mix(in srgb,var(--zb-accent) 60%,var(--zb-navy)),var(--zb-navy))}
.zbs-3 .zbs-art{background:radial-gradient(90% 120% at 100% 100%,color-mix(in srgb,var(--zb-accent) 85%,#fff 5%),transparent 62%),linear-gradient(120deg,var(--zb-navy),color-mix(in srgb,var(--zb-navy) 60%,var(--zb-accent)))}
.zbs-4 .zbs-art{background:radial-gradient(90% 120% at 20% 100%,color-mix(in srgb,var(--zb-accent) 85%,#fff 15%),transparent 62%),linear-gradient(20deg,color-mix(in srgb,var(--zb-accent) 55%,var(--zb-navy)),var(--zb-navy))}
.zbs-5 .zbs-art{background:radial-gradient(90% 120% at 80% 10%,color-mix(in srgb,var(--zb-accent) 50%,#fff 50%),transparent 60%),linear-gradient(150deg,color-mix(in srgb,var(--zb-accent) 45%,var(--zb-navy)),var(--zb-navy))}
.zbs-art::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.5;mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E")}
.zbs-art::after{content:"";position:absolute;inset:auto -20% -40% -20%;height:70%;border-radius:50%;border:1px solid rgba(255,255,255,.14);box-shadow:0 0 0 22px rgba(255,255,255,.035),0 0 0 44px rgba(255,255,255,.025)}
.zbs-glass{position:absolute;inset:0;margin:auto;width:84px;height:84px;border-radius:26px;display:grid;place-items:center;color:#fff;
    background:linear-gradient(145deg,rgba(255,255,255,.26),rgba(255,255,255,.08));border:1px solid rgba(255,255,255,.34);
    -webkit-backdrop-filter:blur(14px) saturate(1.5);backdrop-filter:blur(14px) saturate(1.5);box-shadow:0 18px 36px -14px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.4);
    animation:zbsFloat 6s ease-in-out infinite}
.zbs-card:nth-child(2n) .zbs-glass{animation-delay:-2s}.zbs-card:nth-child(3n) .zbs-glass{animation-delay:-4s}
@keyframes zbsFloat{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-7px) rotate(2deg)}}
.zbs-chip{position:absolute;display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px;border-radius:99px;font-size:11.5px;color:#fff;white-space:nowrap;
    background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:transform .5s var(--zb-ease-out)}
.zbs-c1{top:14px;inset-inline-start:14px}.zbs-c2{bottom:14px;inset-inline-end:14px}
.zbs-card:hover .zbs-c1{transform:translate(4px,-3px)}.zbs-card:hover .zbs-c2{transform:translate(-4px,3px)}
.zbs-card:hover .zbi-hair path:nth-of-type(3){transform-origin:12px 12px;animation:zbsSnip .5s ease-in-out 2}
@keyframes zbsSnip{50%{transform:rotate(-9deg)}}
.zbs-live{width:6px;height:6px;border-radius:50%;background:#7dffb4;box-shadow:0 0 0 0 rgba(125,255,180,.6);animation:zbLive 2s infinite}
.zbs-body{padding:16px;display:flex;flex-direction:column;gap:6px;flex:1}
.zbs-body b{font-weight:500;font-size:18px}.zbs-body p{margin:0;color:var(--text-2);font-size:14px;line-height:1.85;flex:1}
.zbs-meta{display:flex;justify-content:space-between;align-items:center;margin-top:6px}
.zbs-go{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--border);color:var(--text-2);transition:all .25s var(--zb-ease-out)}
.zbs-card:hover .zbs-go{background:var(--zb-accent-solid,var(--zb-accent));border-color:var(--zb-accent);color:#fff;transform:translateX(-3px)}
@media(prefers-reduced-motion:reduce){.zbs-glass{animation:none}.zbs-live{animation:none}.zbk-t{animation:none}}