/* ==========================================================================
   کپسول نوبت آنلاین (js/book.js)
   یک کپسول تیره وسط صفحه (روی موبایل پایین صفحه) ظاهر می‌شود، پهن و بعد بلند می‌شود و به برگه‌ی نوبت تبدیل می‌شود.
   شکل کپسول فقط با clip-path روی همان برگه ساخته می‌شود؛ برگه هیچ‌وقت اندازه‌اش عوض نمی‌شود
   ========================================================================== */
.bk { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 20px; }
.bk[hidden] { display: none; }
.bk[data-k="dental"] { --tone: #1673D6; --tone-bg: #E7F2FC; --tone-ink: #0D4F97; }
.bk[data-k="beauty"] { --tone: #C2386B; --tone-bg: #FBEAF0; --tone-ink: #8C2452; }
.bk[data-k="medicine"] { --tone: #0E8F6B; --tone-bg: #E5F5EF; --tone-ink: #0C6C53; }
.bk__scrim { position: absolute; inset: 0; background: rgba(7, 10, 30, .58); }
@media (min-width: 700px) { .bk__scrim { backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } }

.bk__panel {
  --R: 22px;
  position: relative; width: min(600px, 100%); height: min(720px, calc(100svh - 40px));
  display: flex; flex-direction: column; overflow: hidden; isolation: isolate;
  border-radius: var(--R); background: #fff; color: var(--ink);
  box-shadow: 0 2px 6px rgba(6, 16, 34, .18), 0 50px 100px -30px rgba(6, 16, 34, .6);
  outline: none;
}
/* پوسته‌ی تیره‌ی کپسول؛ در باز شدن کم‌رنگ می‌شود تا برگه‌ی سفید زیرش پیدا شود */
.bk__skin { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; background: linear-gradient(180deg, #2A68F0, #1650CC); pointer-events: none; opacity: 0; }
.bk__pill { display: inline-flex; align-items: center; gap: 10px; height: 56px; padding-inline: 10px 22px; color: #fff; font-weight: 700; font-size: .9688rem; white-space: nowrap; }
.bk__pill-ic { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--blue); }
.bk__pill-ic .ic { width: 18px; height: 18px; }
.bk__pill-dot { width: 7px; height: 7px; border-radius: 50%; background: #5BF0AE; box-shadow: 0 0 0 4px rgba(91, 240, 174, .25); }
/* نور رنگ بخش پشت سربرگ برگه */
.bk__glow { position: absolute; inset: 0 0 auto; height: 200px; z-index: -1; pointer-events: none; }
.bk__glow i { position: absolute; inset: 0; opacity: 0; transition: opacity .9s var(--ease-out); }
.bk__glow i[data-k="dental"] { background: radial-gradient(60% 90% at 88% 0%, rgba(30, 94, 235, .16), rgba(30, 94, 235, 0) 70%), radial-gradient(50% 80% at 10% 0%, rgba(45, 212, 240, .14), rgba(45, 212, 240, 0) 70%); }
.bk__glow i[data-k="beauty"] { background: radial-gradient(60% 90% at 88% 0%, rgba(214, 90, 131, .16), rgba(214, 90, 131, 0) 70%), radial-gradient(50% 80% at 10% 0%, rgba(123, 97, 255, .12), rgba(123, 97, 255, 0) 70%); }
.bk__glow i[data-k="medicine"] { background: radial-gradient(60% 90% at 88% 0%, rgba(31, 174, 134, .16), rgba(31, 174, 134, 0) 70%), radial-gradient(50% 80% at 10% 0%, rgba(45, 212, 240, .12), rgba(45, 212, 240, 0) 70%); }
.bk:not([data-k]) .bk__glow i[data-k="dental"], .bk[data-k="dental"] .bk__glow i[data-k="dental"], .bk[data-k="beauty"] .bk__glow i[data-k="beauty"], .bk[data-k="medicine"] .bk__glow i[data-k="medicine"] { opacity: 1; }

.bk__in { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.bk__top { display: flex; align-items: center; gap: 12px; padding: 18px 20px 6px; }
.bk__ttl { flex: 1; min-width: 0; }
.bk__ttl h2 { font-size: 1.2rem; font-weight: 800; line-height: 1.5; color: var(--navy-800); }
.bk__ttl p { font-size: .875rem; color: var(--ink-3); line-height: 1.6; }
.bk__icb { flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; color: var(--navy-800); background: rgba(13, 27, 48, .05); transition: background-color .2s, scale .5s var(--spring); }
.bk__icb:hover { background: rgba(13, 27, 48, .1); }
.bk__icb:active { scale: .92; transition-duration: .1s; }
.bk__icb .ic { width: 20px; height: 20px; }
.bk__icb[hidden] { display: none; }

/* مرحله‌ها: چهار ستون هم‌اندازه؛ هر مرحله برچسب و تکه‌نوار خودش را دارد و تکه‌ها پشت سر هم با فنر پر می‌شوند */
.bk__prog { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 10px 20px 0; padding: 0; list-style: none; font-family: var(--f-ui); font-size: .75rem; font-weight: 600; color: var(--ink-3); }
.bk__prog li { display: grid; gap: 8px; min-width: 0; }
.bk__pl { display: flex; align-items: center; gap: 6px; min-width: 0; white-space: nowrap; transition: color .3s; }
.bk__pn { position: relative; flex: none; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: .6875rem; font-weight: 700; line-height: 1; box-shadow: inset 0 0 0 1.5px var(--line-2); transition: background-color .35s, box-shadow .35s, color .35s; }
.bk__pn b { font-weight: 700; transition: opacity .2s; }
.bk__pn .ic { position: absolute; width: 11px; height: 11px; stroke-width: 3.2; color: #fff; scale: 0; transition: scale .5s var(--spring); }
.bk__seg { position: relative; display: block; height: 3px; border-radius: 3px; background: var(--mist-2); overflow: hidden; }
.bk__seg i { position: absolute; inset: 0; border-radius: inherit; background: var(--tone, var(--blue)); transform-origin: 100% 50%; transform: scaleX(0); transition: transform .55s cubic-bezier(.65, 0, .35, 1), background-color .5s; }
.bk__prog li.is-on .bk__pl { color: var(--navy-800); }
.bk__prog li.is-on .bk__pn { color: #fff; background: var(--navy-800); box-shadow: none; }
.bk__prog li.is-done .bk__pl { color: var(--tone-ink, var(--blue)); }
.bk__prog li.is-done .bk__pn { background: var(--tone, var(--blue)); box-shadow: none; }
.bk__prog li.is-done .bk__pn b { opacity: 0; }
.bk__prog li.is-done .bk__pn .ic { scale: 1; }
.bk__prog li.is-on .bk__seg i, .bk__prog li.is-done .bk__seg i { transform: scaleX(1); }
/* پر شدن پله‌ای: وقتی چند مرحله با هم پر می‌شوند (مثلاً باز شدن از دکمه‌ی یک بخش) پشت سر هم پیش می‌روند */
.bk__prog.is-seq .bk__seg i { transition-delay: calc(var(--i) * 90ms); }
.bk__prog.is-enter .bk__seg i { transition-delay: calc(420ms + var(--i) * 110ms); }

.bk__view { position: relative; flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; padding: 18px 20px 22px; scrollbar-width: thin; }
.bk__step[hidden] { display: none; }
.bk__step { display: grid; gap: 22px; }
.bk-grp { min-width: 0; margin: 0; padding: 0; border: 0; }
.bk-grp[hidden] { display: none; }
.bk-lbl { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; padding: 0; font-family: var(--f-ui); font-size: .8125rem; font-weight: 700; color: var(--ink-2); }
.bk-lbl__m { font-weight: 600; color: var(--ink-3); }
.bk-grp input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }

/* بخش‌ها */
.bk-depts { display: grid; gap: 10px; }
.bk-dept { --t: #1673D6; --tb: #E7F2FC; position: relative; display: grid; grid-template-columns: 46px minmax(0, 1fr) 26px; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--line); cursor: pointer; transition: box-shadow .25s, background-color .25s, scale .5s var(--spring); }
.bk-dept[data-k="beauty"] { --t: #C2386B; --tb: #FBEAF0; }
.bk-dept[data-k="medicine"] { --t: #0E8F6B; --tb: #E5F5EF; }
.bk-dept:hover { box-shadow: inset 0 0 0 1.5px var(--line-2); }
.bk-dept:active { scale: .985; transition-duration: .1s; }
.bk-dept__ic { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--tb); color: var(--t); }
.bk-dept__ic .ic { width: 22px; height: 22px; }
.bk-dept__t { display: grid; gap: 2px; }
.bk-dept__t b { font-size: 1.02rem; font-weight: 800; color: var(--navy-800); }
.bk-dept__t small { font-size: .8125rem; color: var(--ink-3); line-height: 1.6; }
.bk-ok { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px var(--line-2); color: #fff; transition: background-color .25s, box-shadow .25s; }
.bk-ok .ic { width: 15px; height: 15px; stroke-width: 3; scale: 0; transition: scale .5s var(--spring); }
.bk-dept.is-on { background: var(--tb); box-shadow: inset 0 0 0 2px var(--t); }
.bk-dept.is-on .bk-dept__ic { background: #fff; }
.bk-dept.is-on .bk-ok { background: var(--t); box-shadow: none; }
.bk-dept.is-on .bk-ok .ic { scale: 1; }
.bk-dept:has(input:focus-visible), .bk-seg label:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }

/* روند درخواست: پذیرش تماس می‌گیرد */
.bk-how { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: 14px; background: linear-gradient(270deg, var(--tone-bg, var(--blue-50)), #F7F9FC); box-shadow: inset 0 0 0 1px rgba(13, 27, 48, .06); }
.bk-how__ic { flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: #fff; color: var(--tone, var(--blue)); box-shadow: 0 6px 14px -8px rgba(13, 27, 48, .35); }
.bk-how__ic .ic { width: 18px; height: 18px; }
.bk-how p { display: grid; gap: 2px; font-size: .875rem; line-height: 1.8; color: var(--ink-2); }
.bk-how b { font-size: .9375rem; color: var(--navy-800); }

/* خلاصه‌ی انتخاب‌ها بالای مرحله */
.bk-ctx { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 10px 12px; border-radius: 12px; background: var(--mist); font-size: .875rem; color: var(--ink-2); }
.bk-ctx:empty { display: none; }
.bk-ctx b { color: var(--navy-800); font-weight: 800; }
.bk-ctx .ic { width: 18px; height: 18px; color: var(--tone, var(--blue)); }
.bk-ctx .bk-link { margin-inline-start: auto; }

/* نوع مراجعه */
.bk-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 12px; background: var(--mist); }
.bk-seg label { position: relative; display: grid; place-items: center; min-height: 42px; padding: 4px 6px; border-radius: 9px; font-size: .875rem; font-weight: 700; color: var(--ink-2); text-align: center; cursor: pointer; transition: color .25s, background-color .25s, box-shadow .25s, scale .5s var(--spring); }
.bk-seg label:active { scale: .96; transition-duration: .1s; }
.bk-seg label.is-on { background: #fff; color: var(--navy-800); box-shadow: 0 1px 2px rgba(13, 27, 48, .08), 0 4px 12px -4px rgba(13, 27, 48, .18); }

/* مشخصات */
.bk-form { display: grid; gap: 14px; }
.bk-form textarea { width: 100%; min-height: 72px; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: var(--r1); background: #fff; color: var(--ink); font: inherit; font-size: 1rem; line-height: 1.7; resize: none; transition: border-color .2s, box-shadow .2s; }
.bk-form textarea:focus-visible { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(30, 94, 235, .14); }
.bk-form .field__label small { font-weight: 500; color: var(--ink-3); }
.bk-form .field.is-bad input { border-color: #D6453D; box-shadow: 0 0 0 4px rgba(214, 69, 61, .12); }
.bk-safe { display: flex; align-items: flex-start; gap: 8px; font-size: .8125rem; line-height: 1.7; color: var(--ink-3); }
.bk-safe .ic { flex: none; width: 17px; height: 17px; margin-top: 2px; color: var(--ok); }
.bk-safe a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.bk-link { display: inline; padding: 0; font-size: .875rem; font-weight: 700; color: var(--blue); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.bk-link:disabled { color: var(--ink-3); text-decoration: none; cursor: default; }

/* کد تأیید: یک ورودی واقعی روی پنج خانه‌ی نمایشی */
.bk-otp { display: grid; justify-items: center; gap: 10px; padding-top: 10px; text-align: center; }
.bk-otp__ic { width: 60px; height: 60px; border-radius: 18px; display: grid; place-items: center; background: var(--tone-bg, var(--blue-50)); color: var(--tone, var(--blue)); }
.bk-otp__ic .ic { width: 28px; height: 28px; }
.bk-otp__t { margin-top: 6px; font-size: 1rem; color: var(--ink-2); }
.bk-otp__t bdi { font-family: var(--f-ui); font-weight: 700; color: var(--navy-800); }
.bk-code { position: relative; margin-top: 14px; }
.bk-code input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; opacity: 0; font-size: 16px; caret-color: transparent; letter-spacing: 1em; }
.bk-code__cells { display: flex; gap: 10px; direction: ltr; }
.bk-code__cells i { position: relative; width: 52px; height: 62px; border-radius: 14px; display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px var(--line-2); background: #fff; font-family: var(--f-ui); font-style: normal; font-size: 1.6rem; font-weight: 700; color: var(--navy-800); transition: box-shadow .2s, background-color .2s; }
.bk-code__cells i.is-fill { box-shadow: inset 0 0 0 1.5px var(--navy-800); }
.bk-code.is-focus .bk-code__cells i.is-cur { box-shadow: inset 0 0 0 2px var(--tone, var(--blue)), 0 0 0 4px rgba(30, 94, 235, .12); }
.bk-code.is-focus .bk-code__cells i.is-cur::after { content: ""; position: absolute; width: 2px; height: 26px; border-radius: 2px; background: var(--tone, var(--blue)); animation: bkCaret 1s steps(2, jump-none) 6; }
@keyframes bkCaret { 50% { opacity: 0; } }
.bk-code.is-bad .bk-code__cells i { box-shadow: inset 0 0 0 1.5px #D6453D; background: #FDF2F1; }
.bk-code.is-ok .bk-code__cells i { box-shadow: inset 0 0 0 1.5px var(--ok); background: #EAF7F1; color: var(--ok); }
.bk-timer { display: grid; justify-items: center; gap: 8px; margin-top: 16px; width: min(300px, 100%); font-size: .875rem; color: var(--ink-3); }
.bk-timer b { font-family: var(--f-ui); color: var(--navy-800); font-variant-numeric: tabular-nums; }
.bk-timer__bar { position: relative; width: 100%; height: 3px; border-radius: 3px; background: var(--mist-2); overflow: hidden; }
.bk-timer__bar i { position: absolute; inset: 0; background: var(--tone, var(--blue)); transform-origin: 100% 50%; transform: scaleX(var(--t, 1)); transition: transform 1s linear; }
.bk-timer.is-exp span { color: #C23A32; font-weight: 600; }
.bk-timer .bk-link:not(:disabled) { animation: bkReady .7s var(--spring) 1; }
@keyframes bkReady { 0% { scale: .8; opacity: .4; } 100% { scale: 1; opacity: 1; } }
.bk-demo { max-width: 34ch; margin: 14px auto 0; padding: 8px 12px; border-radius: 10px; background: var(--mist); font-size: .75rem; line-height: 1.8; color: var(--ink-3); text-align: center; }
.bk-demo[hidden] { display: none; }

/* ثبت شد */
.bk-done { justify-items: center; gap: 10px; padding-top: 0; text-align: center; }
.bk-done__mark { position: relative; width: 72px; height: 72px; display: grid; place-items: center; }
.bk-done__mark svg { position: relative; width: 72px; height: 72px; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.bk-done__mark circle { fill: var(--ok); stroke: none; }
.bk-done__mark path { stroke: #fff; stroke-width: 5; }
.bk-done__mark > i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--ok); opacity: 0; }
.bk-done__t { margin-top: 2px; font-size: 1.35rem; font-weight: 800; color: var(--navy-800); outline: none; }
.bk-done__p { max-width: 44ch; font-size: .9375rem; line-height: 1.9; color: var(--ink-2); }
.bk-ticket { position: relative; width: 100%; margin-top: 6px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-radius: 16px; background: var(--mist); text-align: start; overflow: hidden; }
.bk-ticket > div { padding: 10px 16px; border-bottom: 1px dashed var(--line-2); }
.bk-ticket > div:nth-child(odd) { border-inline-end: 1px dashed var(--line-2); }
.bk-ticket > div.is-wide { grid-column: 1 / -1; border-inline-end: 0; }
.bk-ticket > div:last-child, .bk-ticket > div:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
.bk-ticket dt { font-family: var(--f-ui); font-size: .75rem; color: var(--ink-3); }
.bk-ticket dd { margin: 2px 0 0; font-size: .9688rem; font-weight: 800; color: var(--navy-800); }
.bk-ticket .is-ref dd { font-family: var(--f-ui); letter-spacing: .04em; color: var(--tone, var(--blue)); direction: ltr; text-align: end; }
.bk-done__acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 8px; }

/* نشان «تماس پذیرش» در صفحه‌ی ثبت: گوشی چند بار زنگ می‌خورد (تعداد محدود) */
.bk-call { position: relative; display: inline-flex; align-items: center; gap: 12px; padding-block: 8px; padding-inline: 8px 18px; border-radius: 999px; background: var(--navy-800); color: #fff; }
.bk-call__ic { position: relative; z-index: 1; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: #3DDC97; color: #0B1A33; }
.bk-call__ic .ic { width: 19px; height: 19px; stroke-width: 2.2; }
.bk-call__ring { position: absolute; inset-inline-start: 8px; top: 50%; width: 40px; height: 40px; margin-top: -20px; border-radius: 50%; border: 2px solid #3DDC97; opacity: 0; pointer-events: none; }
.bk-call__t { display: grid; text-align: start; line-height: 1.5; }
.bk-call__t b { font-size: .875rem; }
.bk-call__t span { font-family: var(--f-ui); font-size: .75rem; color: rgba(255, 255, 255, .72); }
html.motion .bk-call.is-ring .bk-call__ic { animation: bkBuzz 1.6s ease-in-out .9s 3 both; }
html.motion .bk-call.is-ring .bk-call__ring { animation: bkRing 1.6s var(--ease-out) .9s 3 both; }
html.motion .bk-call.is-ring .bk-call__ring + .bk-call__ring { animation-delay: 1.2s; }
@keyframes bkBuzz { 0%, 40%, 100% { transform: none; } 5%, 15%, 25% { transform: rotate(-14deg); } 10%, 20%, 30% { transform: rotate(14deg); } }
@keyframes bkRing { 0% { transform: scale(1); opacity: .6; } 70%, 100% { transform: scale(1.9); opacity: 0; } }
html.rm .bk-call__ic, html.rm .bk-call__ring { animation: none !important; }

/* پایین برگه */
.bk__foot { position: relative; flex: none; padding: 12px 20px 16px; border-top: 1px solid var(--line); background: #fff; }
.bk__foot[hidden] { display: none; }
.bk__msg { font-size: .8438rem; font-weight: 600; line-height: 1.7; color: #B8342C; }
.bk__msg:empty { display: none; }
.bk__msg:not(:empty) { margin-bottom: 8px; }
.bk__foot-in { display: flex; align-items: center; gap: 14px; }
.bk__sum { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 4px 6px; font-size: .8125rem; color: var(--ink-3); line-height: 1.6; }
.bk__sum span { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 6px; background: var(--mist); color: var(--navy-800); font-weight: 700; }
.bk__next { flex: none; min-width: 150px; }
.bk__next .ic { width: 18px; height: 18px; transition: translate .5s var(--spring); }
.bk__next:hover .ic { translate: -3px 0; }
.bk__next.is-busy { pointer-events: none; }
.bk__next.is-busy > * { opacity: 0; }
.bk__next.is-busy::before { content: ""; position: absolute; inset: 0; margin: auto; width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, .35); border-top-color: #fff; animation: bkSpin .7s linear infinite; }
@keyframes bkSpin { to { transform: rotate(360deg); } }

/* پیامک نمایشی (فقط وقتی سرور در دسترس نیست) */

/* موبایل: برگه‌ی شناور پایین صفحه */
@media (max-width: 640px) {
  .bk { place-items: end center; padding: 8px; }
  .bk__panel { --R: 24px; height: min(720px, calc(100svh - 56px)); }
  /* کپسول روی موبایل پایین برگه است (js: geo)، پس برچسبش هم همان‌جا */
  .bk__skin { place-items: end center; padding-bottom: 10px; }
  .bk__top { padding: 16px 16px 4px; }
  .bk__prog { margin-inline: 16px; gap: 5px; }
  .bk__pn { display: none; }
  .bk__view { padding: 16px 16px 20px; }
  .bk__foot { padding: 10px 16px 14px; }
  .bk__foot-in { flex-direction: column; align-items: stretch; gap: 10px; }
  .bk__sum:empty { display: none; }
  .bk__next { width: 100%; }
  .bk-code__cells { gap: 8px; }
  .bk-code__cells i { width: 48px; height: 58px; }
  .bk-done__acts { width: 100%; }
  .bk-done__acts .btn { flex: 1; }
}

html.bk-open main *, html.bk-open .foot * { animation-play-state: paused !important; }