/* ZB kit لایهٔ ۳ (zbx) — کیتِ فرم‌های beUI به زبانِ آتلیه. فقط توکن‌ها؛ هر دو تم؛ RTL؛ reduced-motion = حالتِ طراحی‌شده.
   Select/Combobox/Sheet · Checkbox (تیکِ خط‌کشیده) · Radio (حلقه + نقطهٔ لغزان) · File Upload · نوارِ ناوبری. */
:root{
  --zbx-ease:cubic-bezier(.16,1,.3,1);
  --zbx-r:12px;
  --zbx-acc:var(--zb-accent,var(--rose,#6E2F6B));
  --zbx-acc-soft:var(--zb-accent-soft,color-mix(in srgb,var(--zbx-acc) 9%,transparent));
  --zbx-acc-line:var(--zb-accent-line,color-mix(in srgb,var(--zbx-acc) 28%,transparent));
  --zbx-gold:var(--zb-gold,#C9A46C);
  --zbx-ok:var(--zb-ok,#1E9E6A);
  --zbx-bad:var(--zb-bad,#D2425A);
  --zbx-shadow:0 22px 50px -20px color-mix(in srgb,var(--zb-navy,#141A3A) 45%,transparent),0 2px 8px color-mix(in srgb,var(--zb-navy,#141A3A) 8%,transparent);
}

/* ═══ Select — تریگر (خودِ <select>): گوشه‌های رو به پنل صاف می‌شوند و دوباره گرد (beUI: [12,0,12]) ═══ */
html select.zbx-open{animation:zbxPinchD .6s var(--zbx-ease)}
html select.zbx-open.zbx-up{animation-name:zbxPinchU}
@keyframes zbxPinchD{40%{border-bottom-left-radius:0;border-bottom-right-radius:0}}
@keyframes zbxPinchU{40%{border-top-left-radius:0;border-top-right-radius:0}}
html select.zbx-open{border-color:var(--zbx-acc)!important;box-shadow:0 0 0 3px var(--zbx-acc-soft)!important;outline:none}
html select.zbx-open:is(.form-select,.form-input,.form-control){
  background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23888%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22m6 15 6-6 6 6%22/%3E%3C/svg%3E")!important}

/* ═══ Select — پنل ═══ */
.zbx-sel{position:fixed;z-index:2147483000;box-sizing:border-box;overflow:hidden;
  background:var(--surface,#fffdf9);color:var(--text,#141A3A);border:1px solid var(--border,rgba(20,26,58,.11));
  border-radius:var(--zbx-r);box-shadow:var(--zbx-shadow);font:inherit;font-size:14px;direction:inherit}
.zbx-sel--pop{border-top-left-radius:0;border-top-right-radius:0;
  transition:border-radius .3s var(--zbx-ease) .14s}
.zbx-sel--pop.up{border-radius:var(--zbx-r) var(--zbx-r) 0 0}
.zbx-sel--pop.in{border-radius:var(--zbx-r)}
.zbx-ul{list-style:none;margin:0;padding:5px;max-height:var(--zbx-max,320px);overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}
.zbx-o{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 12px;border-radius:9px;cursor:pointer;
  color:var(--text-2,var(--text));line-height:1.45;user-select:none;
  transition:background-color .15s var(--zbx-ease),color .15s var(--zbx-ease),transform .16s var(--zbx-press,var(--zbx-ease))}
.zbx-o>span{min-width:0;overflow-wrap:anywhere}
.zbx-o.act{background:var(--zbx-acc-soft);color:var(--text)}
.zbx-o.on{color:var(--text);font-weight:600}
.zbx-o.dis{opacity:.42;cursor:default}
.zbx-o.pick{transform:scale(.97)}
.zbx-tick{width:15px;height:15px;flex:none;fill:none;stroke:var(--zbx-acc);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:24;stroke-dashoffset:24;opacity:0;transition:stroke-dashoffset .3s var(--zbx-ease) .04s,opacity .12s}
.zbx-o.on .zbx-tick{stroke-dashoffset:0;opacity:1}
html[data-theme="dark"] .zbx-tick{stroke:var(--zbx-gold)}
.zbx-grp{padding:10px 12px 4px;font-size:11px;font-weight:700;letter-spacing:.02em;color:var(--muted)}
.zbx-q{position:sticky;top:0;z-index:1;display:flex;align-items:center;gap:8px;margin:5px 5px 0;padding:0 10px;
  border:1px solid var(--border);border-radius:10px;background:color-mix(in srgb,var(--surface) 88%,var(--zbx-acc) 3%)}
.zbx-q svg{width:16px;height:16px;flex:none;fill:none;stroke:var(--muted);stroke-width:2;stroke-linecap:round}
.zbx-q input{flex:1;min-width:0;border:0!important;outline:0!important;box-shadow:none!important;background:transparent!important;
  padding:9px 0!important;font:inherit;font-size:14px;color:var(--text)}
.zbx-q:focus-within{border-color:var(--zbx-acc-line);box-shadow:0 0 0 3px var(--zbx-acc-soft)}
.zbx-empty{margin:0;padding:18px 12px;text-align:center;font-size:13px;color:var(--muted)}
/* ورودِ گزینه‌ها — beUI: stagger 35ms، از y:-6 و blur(3px) */
.zbx-sel.in .zbx-o,.zbx-sel.in .zbx-grp{animation:zbxItem .32s var(--zbx-ease) both;animation-delay:calc(50ms + var(--k,0) * 35ms)}
@keyframes zbxItem{from{opacity:0;transform:translateY(-6px);filter:blur(3px)}}
.zbx-sel--pop.up.in .zbx-o{animation-name:zbxItemU}
@keyframes zbxItemU{from{opacity:0;transform:translateY(6px);filter:blur(3px)}}

/* ═══ Select روی لمسی — Bottom Sheet ═══ */
.zbx-scrim{position:fixed;inset:0;z-index:2147482999;background:rgba(10,12,30,.44);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.zbx-sel--sheet{inset-inline:0;bottom:0;top:auto;left:0;right:0;width:auto!important;border-radius:22px 22px 0 0;border-bottom:0;
  max-height:76vh;display:flex;flex-direction:column;padding-bottom:env(safe-area-inset-bottom,0)}
.zbx-sel--sheet .zbx-ul{max-height:none;flex:1;padding:6px 10px 14px}
.zbx-sel--sheet .zbx-o{min-height:48px;padding:12px 14px;font-size:15px;border-radius:12px}
.zbx-sel--sheet .zbx-q{margin:2px 12px 4px}
.zbx-sel--sheet .zbx-q input{font-size:16px}
.zbx-sh-hd{display:grid;justify-items:center;gap:8px;padding:10px 16px 10px;border-bottom:1px solid var(--border)}
.zbx-sh-hd b{font-size:15px;font-weight:700;color:var(--text)}
.zbx-grab{width:40px;height:4px;border-radius:9px;background:color-mix(in srgb,var(--muted) 45%,transparent)}
html.zbx-lock{overflow:hidden}

/* ═══ Checkbox — تیکِ خط‌کشیده (beUI: pathLength 0→1، ۳۰۰ms EASE_OUT، تأخیر ۴۰ms) ═══ */
html input[type=checkbox]:not(.sr-only):not(.peer):not(.hidden):not(.form-check-input):not(.zb-native):not([hidden])::before{
  width:12px;height:12px;background:#fff;transform:none;clip-path:inset(0 100% 0 0);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%223.4%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M5 13l4 4L19 7%22/%3E%3C/svg%3E") center/100% no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%223.4%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M5 13l4 4L19 7%22/%3E%3C/svg%3E") center/100% no-repeat;
  transition:clip-path .16s var(--zbx-ease),opacity .16s}
html[dir=rtl] input[type=checkbox]:not(.sr-only):not(.peer):not(.hidden):not(.form-check-input):not(.zb-native):not([hidden])::before{clip-path:inset(0 0 0 100%)}
html input[type=checkbox]:not(.sr-only):not(.peer):not(.hidden):not(.form-check-input):not(.zb-native):not([hidden]):checked::before{
  clip-path:inset(0 0 0 0)!important;transform:none;transition:clip-path .3s var(--zbx-ease) .04s}
html input[type=checkbox]:not(.sr-only):not(.peer):not(.hidden):not(.form-check-input):not(.zb-native):not([hidden]):indeterminate{background:var(--zbx-acc);border-color:var(--zbx-acc)}
html input[type=checkbox]:not(.sr-only):not(.peer):not(.hidden):not(.form-check-input):not(.zb-native):not([hidden]):indeterminate::before{
  clip-path:inset(0 0 0 0)!important;-webkit-mask:none;mask:none;height:3px;border-radius:2px;width:10px}
html input[type=checkbox]:not(.sr-only):not(.peer):not(.hidden):not(.form-check-input):not(.zb-native):not([hidden]):is(:hover,:focus-visible):not(:checked):not(:disabled){border-color:var(--zbx-acc)}
html input:is([type=checkbox],[type=radio]):not(.sr-only):not(.peer):not(.hidden):not(.form-check-input):not(.zb-native):focus-visible{outline:0;box-shadow:0 0 0 3px var(--zbx-acc-soft)}
html input:is([type=checkbox],[type=radio]):not(.sr-only):not(.peer):not(.hidden):not(.form-check-input):not(.zb-native):not([hidden]):active{transform:scale(.92);transition:transform .14s var(--zbx-press,var(--zbx-ease))}

/* ═══ Radio — حلقهٔ رنگی + نقطه (beUI RadioGroup)؛ نقطه بینِ گزینه‌ها می‌لغزد ═══ */
html input[type=radio]:not(.sr-only):not(.peer):not(.hidden):not(.form-check-input):not(.zb-native):not([hidden]):checked{background:var(--surface);border-color:var(--zbx-acc);border-width:2px}
html input[type=radio]:not(.sr-only):not(.peer):not(.hidden):not(.form-check-input):not(.zb-native):not([hidden])::before{width:10px;height:10px;background:var(--zbx-acc)}
html input[type=radio]:not(.sr-only):not(.peer):not(.hidden):not(.form-check-input):not(.zb-native):not([hidden]):is(:hover,:focus-visible):not(:checked):not(:disabled){border-color:var(--zbx-acc)}
html input[type=radio].zbx-glide::before{transform:scale(0)!important;transition:none!important}
html input[type=radio].zbx-glided::before{transition:none!important}
.zbx-rdot{position:fixed;z-index:2147483000;width:10px;height:10px;border-radius:50%;background:var(--zbx-acc);pointer-events:none;
  transform:translate(-50%,-50%)}

/* ═══ File Upload — دراپ‌زونِ آتلیه ═══ */
.zbx-drop{position:relative;display:flex;align-items:center;gap:14px;min-height:76px;padding:14px 16px;box-sizing:border-box;width:100%;
  border:1.5px dashed color-mix(in srgb,var(--zbx-acc) 32%,var(--border));border-radius:14px;
  background:color-mix(in srgb,var(--zbx-acc) 3.5%,var(--surface));color:var(--text);cursor:pointer;
  transition:border-color .2s var(--zbx-ease),background-color .2s var(--zbx-ease),box-shadow .2s var(--zbx-ease)}
.zbx-drop-in{position:absolute!important;inset:0;width:100%!important;height:100%!important;opacity:0!important;margin:0!important;padding:0!important;
  cursor:pointer;z-index:2;font-size:0}
.zbx-drop-ic{display:grid;place-items:center;width:46px;height:46px;flex:none;border-radius:50%;
  background:var(--zbx-acc-soft);color:var(--zbx-acc);transition:transform .45s var(--zbx-pinch,var(--zbx-ease))}
.zbx-drop-ic svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.zbx-drop-tx{display:grid;gap:3px;min-width:0}
.zbx-drop-tx b{font-size:14px;font-weight:700;color:var(--text)}
.zbx-drop-tx small{font-size:12px;color:var(--muted);line-height:1.6}
.zbx-drop:hover,.zbx-drop.over{border-style:solid;border-color:var(--zbx-acc);background:color-mix(in srgb,var(--zbx-acc) 7%,var(--surface))}
.zbx-drop:hover .zbx-drop-ic,.zbx-drop.over .zbx-drop-ic{transform:translateY(-3px)}
.zbx-drop.over .zbx-drop-ic{transform:translateY(-3px) scale(1.08)}
.zbx-drop.foc{box-shadow:0 0 0 3px var(--zbx-acc-soft);border-color:var(--zbx-acc)}
.zbx-drop.has{border-style:solid}
.zbx-drop.bad{border-color:var(--zbx-bad);background:color-mix(in srgb,var(--zbx-bad) 6%,var(--surface))}
.zbx-drop.dis{opacity:.5;cursor:not-allowed}
html[data-theme="dark"] .zbx-drop-ic{color:var(--zbx-gold);background:color-mix(in srgb,var(--zbx-gold) 14%,transparent)}
.zbx-files{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:8px}
.zbx-files:empty{display:none}
.zbx-file{display:flex;align-items:center;gap:12px;padding:8px 10px;border:1px solid var(--border);border-radius:12px;background:var(--surface);
  animation:zbxItem .34s var(--zbx-ease) both;animation-delay:calc(var(--k,0) * 45ms)}
.zbx-th{width:42px;height:42px;flex:none;border-radius:9px;overflow:hidden;display:grid;place-items:center;background:var(--zbx-acc-soft);color:var(--zbx-acc)}
.zbx-th img{width:100%;height:100%;object-fit:cover;display:block}
.zbx-th svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
.zbx-fn{display:grid;gap:2px;min-width:0;flex:1}
.zbx-fn b{font-size:13px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zbx-fn small{font-size:11.5px;color:var(--muted)}
.zbx-ok{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;flex:none;background:color-mix(in srgb,var(--zbx-ok) 14%,transparent);color:var(--zbx-ok);
  animation:zbxPop .45s var(--zbx-pinch,var(--zbx-ease)) .12s both}
.zbx-ok svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:24;stroke-dashoffset:24;
  animation:zbxDraw .32s var(--zbx-ease) .26s forwards}
@keyframes zbxPop{from{transform:scale(0)}}
@keyframes zbxDraw{to{stroke-dashoffset:0}}
.zbx-rm{display:grid;place-items:center;width:30px;height:30px;flex:none;border:0;border-radius:50%;background:transparent;color:var(--muted);cursor:pointer;
  transition:background-color .15s,color .15s,transform .14s var(--zbx-press,var(--zbx-ease))}
.zbx-rm svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.zbx-rm:hover{background:color-mix(in srgb,var(--zbx-bad) 10%,transparent);color:var(--zbx-bad)}
.zbx-rm:active{transform:scale(.9)}

/* ═══ Loader — نوارِ پیشرفتِ ناوبری ═══ */
.zbx-bar{position:fixed;top:0;inset-inline:0;height:2.5px;z-index:2147483001;pointer-events:none}
.zbx-bar i{position:absolute;inset-block:0;inset-inline-start:0;width:0;opacity:0;border-radius:0 2px 2px 0;
  background:linear-gradient(90deg,var(--zbx-gold),var(--zbx-acc));box-shadow:0 0 10px color-mix(in srgb,var(--zbx-acc) 55%,transparent)}
.zbx-bar.go i{opacity:1;width:78%;transition:width 2.6s cubic-bezier(.08,.82,.17,1),opacity .15s}
.zbx-bar.done i{opacity:0;width:100%;transition:width .2s ease-out,opacity .3s .15s}

/* ═══ reduced-motion: رنگ و شفافیت می‌ماند؛ جابه‌جایی، مقیاس و پرش حذف ═══ */
@media (prefers-reduced-motion:reduce){
  html select.zbx-open{animation:none}
  .zbx-sel.in .zbx-o,.zbx-sel.in .zbx-grp,.zbx-file{animation:zbxFade .15s both!important;animation-delay:0s!important}
  .zbx-drop-ic,.zbx-o.pick{transform:none!important}
  .zbx-ok{animation:none}.zbx-ok svg{animation:none;stroke-dashoffset:0}
  .zbx-bar.go i{transition:opacity .15s;width:78%}
}
@keyframes zbxFade{from{opacity:0}}