/* =============================================================
   Kyren Onyx — استایل دو صفحه‌ی نسخه‌ی آزمایشی
   -------------------------------------------------------------
   بازدیدکننده روی صفحه‌ی kyren onyx دکمه‌ی «شروع نسخه‌ی آزمایشی»
   را می‌زند و مستقیم به این دو صفحه می‌رسد؛ پس باید ادامه‌ی همان
   صفحه دیده شوند، نه یک محیط دیگر. رنگ‌ها، اندازه‌ی قلم، گردی
   گوشه‌ها و شکل اجزا یک‌به‌یک از tokens.css همان سایت آمده‌اند.

   همه چیز زیر کلاس .kb محدود شده و نام متغیرها --kb- دارند، تا
   هیچ صفحه‌ی دیگری از پنل یا سایت کلینیک تحت تأثیر قرار نگیرد.
   ============================================================= */

.kb {
  /* ---- طلایی کایرن بیوتی ---- */
  --kb-gold-50:  #FBF5E9;
  --kb-gold-100: #F5E7C9;
  --kb-gold-200: #EBD4A4;
  --kb-gold-300: #D9B676;
  --kb-gold-500: #B08240;
  --kb-gold-550: #976D34;
  --kb-gold-600: #8F6730;   /* ۵.۱:۱ روی سفید — رنگ دکمه‌ها و متن تأکیدی */
  --kb-gold-700: #6E4E23;

  --kb-bg:          #FFFFFF;
  --kb-bg-tint:     #F7F9FC;
  --kb-surface:     #FFFFFF;
  --kb-text:        #0B1220;
  --kb-text-soft:   #3A4553;
  --kb-text-muted:  #626F7F;
  --kb-border:      #E1E6EE;
  --kb-control:     #878F9E;   /* مرز کنترل‌ها — بالای ۳:۱ روی سفید */
  --kb-border-soft: rgba(143, 103, 48, .16);
  --kb-hairline:    rgba(143, 103, 48, .30);

  --kb-accent:       var(--kb-gold-600);
  --kb-accent-hover: var(--kb-gold-700);
  --kb-accent-text:  var(--kb-gold-600);
  --kb-accent-soft:  var(--kb-gold-50);
  --kb-on-accent:    #FFFFFF;
  --kb-tint-500:     var(--kb-gold-500);

  /* روشن‌ترین پله عمداً gold-500 است (۳.۴:۱): فقط داخل تیتر بزرگ و
     وزن ۹۰۰ به کار می‌رود و برای «متن بزرگ» حد مجاز ۳:۱ است. */
  --kb-gradient: linear-gradient(100deg,
                   var(--kb-gold-700) 0%,
                   var(--kb-gold-600) 34%,
                   var(--kb-gold-550) 64%,
                   var(--kb-gold-500) 100%);

  --kb-shadow-md: 0 4px 20px rgba(11, 18, 32, .06);
  --kb-shadow-lg: 0 12px 40px rgba(11, 18, 32, .09);

  --kb-err-bg:   #FDECEA;
  --kb-err-text: #922B21;

  --kb-r-ctl: 8px;  --kb-r-md: 12px;  --kb-r-lg: 16px;  --kb-r-xl: 20px;
  --kb-hairline-w: .5px;
  --kb-ease: cubic-bezier(.4, 0, .2, 1);
  --kb-ease-out: cubic-bezier(.16, 1, .3, 1);

  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: Vazirmatn, system-ui, -apple-system, "Segoe UI", sans-serif;
  /* متن فارسی با فاصله‌ی سطر کم، فشرده و خسته‌کننده دیده می‌شود */
  line-height: 2;
  color: var(--kb-text);
  -webkit-font-smoothing: antialiased;
}

/* روی زمینه‌ی تیره، طلاییِ تیره اصلاً دیده نمی‌شود؛ پس جای روشن و
   تیره عوض می‌شود: زمینه‌ی دکمه طلایی روشن، متنش تیره. */
html[data-theme="dark"] .kb {
  --kb-bg:          #060A14;
  --kb-bg-tint:     #0E1524;
  --kb-surface:     #0E1524;
  --kb-text:        #EEF2F8;
  --kb-text-soft:   #B9C3D4;
  --kb-text-muted:  #8592A8;
  --kb-border:      #263149;
  --kb-control:     #54617D;
  --kb-border-soft: rgba(217, 182, 118, .12);
  --kb-hairline:    rgba(217, 182, 118, .30);

  --kb-accent:       var(--kb-gold-300);
  --kb-accent-hover: var(--kb-gold-200);
  --kb-accent-text:  var(--kb-gold-300);
  --kb-accent-soft:  rgba(217, 182, 118, .14);
  --kb-on-accent:    #060A14;
  --kb-tint-500:     var(--kb-gold-300);

  --kb-gradient: linear-gradient(100deg,
                   var(--kb-gold-500) 0%,
                   var(--kb-gold-300) 45%,
                   var(--kb-gold-100) 100%);

  --kb-shadow-md: 0 4px 20px rgba(0, 0, 0, .45);
  --kb-shadow-lg: 0 12px 40px rgba(0, 0, 0, .55);

  --kb-err-bg:   rgba(192, 57, 43, .2);
  --kb-err-text: #FF9A8C;
}

/* ---------------- زمینه‌ی صفحه ----------------
   الگوی هندسیِ ایندیگویِ پنل روی این دو صفحه جای خود را به همان
   درخشش ملایم طلاییِ پشت متن در صفحه‌ی kyren onyx می‌دهد.
   با :has این بازنویسی فقط روی صفحه‌هایی می‌افتد که واقعاً .kb
   دارند، پس بقیه‌ی پنل و سایت کلینیک دست‌نخورده می‌ماند. */
body:has(.kb) { background: #FFFFFF; }
body:has(.kb)::before {
  background-image: radial-gradient(46% 42% at 70% 20%, rgba(143, 103, 48, .09), transparent 70%);
}
html[data-theme="dark"] body:has(.kb) { background: #060A14; }
html[data-theme="dark"] body:has(.kb)::before {
  background-image: radial-gradient(46% 42% at 70% 20%, rgba(217, 182, 118, .10), transparent 70%);
}

/* خطوط موجی، برداشت از خودِ لوگو که خط‌های روان دارد */
.kb-waves {
  position: fixed;
  inset: 0;
  z-index: -1;
  width: 100%; height: 100%;
  pointer-events: none;
  color: var(--kb-accent);
  -webkit-mask-image: radial-gradient(70% 60% at 50% 50%, transparent 26%, #000 76%);
  mask-image: radial-gradient(70% 60% at 50% 50%, transparent 26%, #000 76%);
}

/* ---------------- کارت ---------------- */
.kb-card {
  position: relative;
  width: 100%;
  padding: clamp(1.75rem, 1rem + 3vw, 2.5rem) clamp(1.25rem, .6rem + 2.6vw, 2rem);
  border-radius: var(--kb-r-xl);
  background: var(--kb-surface);
  border: 1px solid var(--kb-border-soft);
  box-shadow: var(--kb-shadow-lg);
}
.kb-card--narrow { max-width: 540px; }
.kb-card--wide   { max-width: 920px; }

/* ---------------- سرِ کارت ---------------- */
.kb-head { text-align: center; margin-bottom: 2rem; }

/* عنوان بالای تیتر. عمداً بزرگ‌تر از خودِ تیتر است تا اولین چیزی
   باشد که چشم می‌گیرد — همان قاعده‌ی .eyebrow در سایت. */
.kb-eyebrow {
  display: inline-block;
  margin-bottom: .75rem;
  font-size: clamp(1.5rem, 1.15rem + 1.4vw, 2rem);
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 1.6;
  color: var(--kb-accent-text);
}
.kb-eyebrow::before,
.kb-eyebrow::after {
  content: "";
  display: inline-block;
  width: 22px; height: 1px;
  margin-inline: .75rem;
  vertical-align: middle;
  background: var(--kb-hairline);
}

.kb-title {
  font-size: clamp(1.25rem, 1rem + 1.1vw, 1.625rem);
  font-weight: 900;
  line-height: 1.6;
  letter-spacing: -.01em;
  text-wrap: balance;
}

/* کلمه‌ی تأکیدشده‌ی تیتر: گرادیان به‌جای رنگ تخت.
   color اول نوشته می‌شود تا اگر مرورگری background-clip را نشناخت،
   متن ناپدید نشود و رنگ ساده بگیرد. */
.kb-accent {
  color: var(--kb-accent-text);
  background-image: var(--kb-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  /* بدون این، دنباله‌ی حروف فارسی گاهی بریده می‌شود */
  padding-inline: .06em;
  margin-inline: -.06em;
}
@supports not (background-clip: text) {
  .kb-accent { -webkit-text-fill-color: currentColor; background-image: none; }
}

.kb-lead {
  max-width: 52ch;
  margin: 1rem auto 0;
  font-size: .9375rem;
  color: var(--kb-text-soft);
  text-wrap: pretty;
}
.kb-lead b, .kb-meta b { font-weight: 800; color: var(--kb-accent-text); }

.kb-meta { margin-top: .5rem; font-size: .9375rem; color: var(--kb-text-soft); }

/* ---------------- فرم ---------------- */
.kb-field { margin-bottom: 1.25rem; }
.kb-field label {
  display: block;
  margin-bottom: .5rem;
  font-size: .9375rem;
  font-weight: 600;
}
.kb-input {
  width: 100%;
  min-height: 44px;
  padding: .5rem 1rem;
  background: var(--kb-bg);
  color: var(--kb-text);
  border: var(--kb-hairline-w) solid var(--kb-control);
  border-radius: var(--kb-r-ctl);
  transition: border-color .24s var(--kb-ease), box-shadow .24s var(--kb-ease);
}
.kb-input:focus {
  outline: none;
  border-color: var(--kb-accent);
  box-shadow: 0 0 0 3px var(--kb-accent-soft);
}
.kb-input::placeholder { color: var(--kb-text-muted); }
.kb-hint {
  margin-top: .375rem;
  font-size: .8125rem;
  line-height: 1.9;
  color: var(--kb-text-muted);
}

/* ---------------- دکمه ----------------
   بر اساس همان سیستم صفحه‌ی اصلی: گوشه‌ی ۸ پیکسل، حاشیه‌ی نازک،
   بدون سایه‌ی رنگی، و کوچک‌شدن ملایم موقع کلیک. */
.kb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 48px;
  padding: .75rem 2rem;
  border: var(--kb-hairline-w) solid transparent;
  border-radius: var(--kb-r-ctl);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
  transition: background-color .14s var(--kb-ease), border-color .14s var(--kb-ease),
              color .14s var(--kb-ease), transform .14s var(--kb-ease);
}
.kb-btn:active { transform: scale(.98); }
.kb-btn:focus-visible { outline: 2px solid var(--kb-accent); outline-offset: 2px; }
.kb-btn--primary {
  background: var(--kb-accent);
  color: var(--kb-on-accent);
  border-color: var(--kb-accent);
}
.kb-btn--primary:hover {
  background: var(--kb-accent-hover);
  border-color: var(--kb-accent-hover);
}
.kb-btn--block { width: 100%; }

/* ---------------- پیام‌ها ---------------- */
.kb-alert {
  margin-bottom: 1.25rem;
  padding: .875rem 1.125rem;
  border-radius: var(--kb-r-md);
  font-size: .9375rem;
  line-height: 1.95;
}
.kb-alert--error { background: var(--kb-err-bg); color: var(--kb-err-text); }
.kb-alert--warn {
  text-align: center;
  color: var(--kb-text-soft);
  background: var(--kb-accent-soft);
  border: var(--kb-hairline-w) solid var(--kb-hairline);
}

/* پیام‌های flash که خودِ layout بالای کارت چاپ می‌کند هم باید
   هم‌رنگ همین صفحه باشند، نه رنگ پیش‌فرض پنل. */
body:has(.kb) .flash-success,
body:has(.kb) .flash-info {
  background: #FBF5E9;
  color: #6E4E23;
  border-radius: 12px;
}
html[data-theme="dark"] body:has(.kb) .flash-success,
html[data-theme="dark"] body:has(.kb) .flash-info {
  background: rgba(217, 182, 118, .14);
  color: #D9B676;
}

/* ---------------- انتخاب مقصد ---------------- */
.kb-choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
}
.kb-choice {
  display: block;
  padding: 1.75rem 1.5rem;
  text-align: center;
  color: inherit;
  text-decoration: none;
  border-radius: var(--kb-r-lg);
  background: var(--kb-bg-tint);
  border: 1px solid var(--kb-border-soft);
  border-top: 3px solid var(--kb-tint-500);
  transition: transform .24s var(--kb-ease), box-shadow .24s var(--kb-ease),
              border-color .24s var(--kb-ease);
}
.kb-choice:hover {
  transform: translateY(-3px);
  box-shadow: var(--kb-shadow-md);
  border-color: var(--kb-hairline);
  border-top-color: var(--kb-tint-500);
}
.kb-choice-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  margin-bottom: 1.25rem;
  border-radius: var(--kb-r-ctl);
  color: var(--kb-accent-text);
  background: var(--kb-accent-soft);
}
.kb-choice-icon svg { width: 20px; height: 20px; }
.kb-choice-title { display: block; margin-bottom: .25rem; font-size: 1rem; font-weight: 800; }
.kb-choice-desc  { display: block; font-size: .9375rem; line-height: 1.9; color: var(--kb-text-soft); }

@media (max-width: 720px) {
  .kb-choices { grid-template-columns: 1fr; }
}

/* ---------------- یادداشت‌های پایین ---------------- */
.kb-note {
  max-width: 60ch;
  margin: 1.25rem auto 0;
  font-size: .8125rem;
  line-height: 1.95;
  color: var(--kb-text-muted);
  text-align: center;
}
.kb-keep {
  max-width: 64ch;
  margin: 1.75rem auto 0;
  padding: 1rem 1.25rem;
  text-align: center;
  font-size: .8125rem;
  line-height: 1.95;
  color: var(--kb-text-soft);
  background: var(--kb-accent-soft);
  border: var(--kb-hairline-w) solid var(--kb-hairline);
  border-radius: var(--kb-r-md);
}
.kb-foot {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--kb-border-soft);
  text-align: center;
  font-size: .8125rem;
  color: var(--kb-text-muted);
}
.kb-link {
  color: var(--kb-accent-text);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: opacity .14s var(--kb-ease);
}
.kb-link:hover { opacity: .72; }
/* آدرس لاتین است و در جمله‌ی راست‌به‌چپ نباید وارونه شود */
.kb-url { display: inline-block; direction: ltr; word-break: break-all; }

/* ---------------- هشدار قبل از ساخت نسخه ----------------
   روی همان توکن‌های بالا سوار است تا در حالت تیره هم بدون کار
   اضافه درست دربیاید. */
.kb-modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 1rem;
}
/* بدون این، display: grid بالا [hidden] را بی‌اثر می‌کند */
.kb-modal[hidden] { display: none; }

.kb-modal-veil {
  position: absolute;
  inset: 0;
  background: rgba(11, 18, 32, .5);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.kb-modal-box {
  position: relative;
  width: 100%;
  max-width: 460px;
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
  padding: clamp(1.5rem, 1.1rem + 1.6vw, 2rem) clamp(1.25rem, .9rem + 1.4vw, 1.75rem);
  text-align: center;
  border-radius: var(--kb-r-lg);
  background: var(--kb-surface);
  border: 1px solid var(--kb-border-soft);
  box-shadow: var(--kb-shadow-lg);
  animation: kb-rise .3s var(--kb-ease-out) both;
}

.kb-modal-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  margin-bottom: 1rem;
  border-radius: 50%;
  color: var(--kb-accent-text);
  background: var(--kb-accent-soft);
}
.kb-modal-icon svg { width: 22px; height: 22px; }

.kb-modal-title {
  margin-bottom: .75rem;
  font-size: 1.0625rem;
  font-weight: 800;
  line-height: 1.7;
}

.kb-modal-text {
  max-width: 44ch;
  margin-inline: auto;
  font-size: .9375rem;
  line-height: 2;
  color: var(--kb-text-soft);
  text-wrap: pretty;
}
.kb-modal-text b { font-weight: 800; color: var(--kb-accent-text); }
.kb-modal-text--soft {
  margin-top: .75rem;
  font-size: .8125rem;
  color: var(--kb-text-muted);
}
.kb-modal-text--soft b { color: inherit; }

.kb-modal-actions {
  display: flex;
  gap: .75rem;
  margin-top: 1.5rem;
}
.kb-modal-actions .kb-btn { flex: 1; padding-inline: 1rem; }

/* روی موبایل زیر هم، و تأییدْ بالا — انگشت اول به آن می‌رسد */
@media (max-width: 480px) {
  .kb-modal-actions { flex-direction: column-reverse; }
}

/* دکمه‌ی دوم نباید با دکمه‌ی اصلی رقابت کند */
.kb-btn--quiet {
  background: var(--kb-bg-tint);
  color: var(--kb-text-soft);
  border-color: var(--kb-border-soft);
}
.kb-btn--quiet:hover {
  color: var(--kb-text);
  border-color: var(--kb-hairline);
}

@media (prefers-reduced-motion: reduce) {
  .kb-modal-box { animation: none; }
}

/* ---------------- ظاهرشدن تدریجی ---------------- */
.kb-in { animation: kb-rise .6s var(--kb-ease-out) both; }
@keyframes kb-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .kb-in { animation: none; }
  .kb *, .kb *::before, .kb *::after { transition-duration: .01ms !important; }
}

/* ---------------- تأیید شماره با کد پیامکی ----------------
   مرحله‌ی کد عمداً کارت جدا نگرفت و داخل همان فیلد شماره نشست:
   کارت دوم یعنی «یک صفحه‌ی دیگر هم مانده»، در حالی که این فقط
   ادامه‌ی همان یک فیلد است. */

/* ورودی و دکمه‌ی کنارش. دکمه به اندازه‌ی محتوایش می‌ماند و ورودی
   بقیه‌ی فضا را می‌گیرد، پس با بلند و کوتاه شدن متن دکمه، جای
   ورودی تکان نمی‌خورد. */
.kb-otp-row {
  display: flex;
  align-items: stretch;
  gap: .5rem;
}
.kb-otp-row .kb-input { flex: 1 1 auto; min-width: 0; }
.kb-otp-row .kb-btn {
  flex: 0 0 auto;
  min-height: 44px;      /* هم‌قد ورودی، نه هم‌قد دکمه‌ی اصلی */
  padding-inline: 1.125rem;
  font-size: .9375rem;
  white-space: nowrap;
}
.kb-otp-row .kb-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}

/* شماره‌ی قفل‌شده باید «تمام‌شده» به نظر برسد، نه «خراب» */
.kb-input[readonly] {
  background: var(--kb-bg-tint);
  color: var(--kb-text-soft);
  cursor: default;
}
.kb-mobile-verified .kb-input[readonly],
.is-verified .kb-input[readonly] {
  border-color: var(--kb-hairline);
}

.kb-otp {
  margin-top: .875rem;
  padding: .875rem;
  border-radius: var(--kb-r-md);
  background: var(--kb-bg-tint);
  border: var(--kb-hairline-w) solid var(--kb-border-soft);
}
.kb-otp-label {
  display: block;
  margin-bottom: .5rem;
  font-size: .875rem;
  font-weight: 600;
  color: var(--kb-text-soft);
}

/* رقم‌های کد با فاصله‌ی زیاد، تا موقع مقایسه با پیامک راحت خوانده شوند */
.kb-otp-code {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: .5em;
  text-indent: .5em;     /* letter-spacing فاصله را بعد از آخرین رقم هم
                            می‌گذارد و متن را از وسط بیرون می‌اندازد */
  text-align: center;
}
.kb-otp-code::placeholder { letter-spacing: .35em; font-weight: 400; }

.kb-otp-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-top: .625rem;
  min-height: 22px;      /* جای ثابت، تا با آمدن و رفتن دکمه صفحه نپرد */
  font-size: .8125rem;
  color: var(--kb-text-muted);
}

/* دکمه‌ای که مثل لینک دیده می‌شود: کار فرعی است و نباید با
   «تأیید» و «ساخت نسخه‌ی من» رقابت کند */
.kb-otp-resend {
  padding: 0;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--kb-accent-text);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.kb-otp-resend:hover { color: var(--kb-accent-hover); }
.kb-otp-resend:focus-visible { outline: 2px solid var(--kb-accent); outline-offset: 2px; }

#kb-otp-change { display: block; margin-top: .375rem; }

/* پیام وضعیت. رنگ حالت پیش‌فرض خنثی است تا «در حال ارسال…» مثل
   خطا یا موفقیت دیده نشود. */
.kb-otp-msg {
  margin-top: .5rem;
  font-size: .8125rem;
  line-height: 1.9;
  color: var(--kb-text-muted);
}
.kb-otp-msg[data-state="error"] { color: var(--kb-err-text); font-weight: 600; }
.kb-otp-msg[data-state="ok"]    { color: var(--kb-accent-text); font-weight: 600; }

/* پیام حالت آزمایشی (کد روی صفحه). عمداً زشت و پرسروصداست تا اگر
   روزی روی هاست واقعی روشن ماند، همان نگاه اول لو برود. */
.kb-otp-msg[data-state="dev"] {
  padding: .5rem .75rem;
  border-radius: var(--kb-r-ctl);
  color: var(--kb-err-text);
  background: var(--kb-err-bg);
  border: 1px dashed currentColor;
  font-weight: 700;
}

/* دکمه‌ی ساخت نسخه تا تأیید نشدن شماره غیرفعال است. باید «هنوز نه»
   به نظر برسد، نه «خراب» — برای همین رنگ اصلی را با شفافیت نگه
   می‌دارد و ناپدید نمی‌شود. */
.kb-btn:disabled {
  opacity: .45;
  cursor: not-allowed;
}
.kb-btn:disabled:hover {
  background: var(--kb-accent);
  border-color: var(--kb-accent);
}

@media (max-width: 420px) {
  /* روی صفحه‌ی باریک، دکمه زیر ورودی می‌رود و تمام عرض را می‌گیرد؛
     کنار هم ماندنشان یعنی ورودی شماره آن‌قدر باریک می‌شود که
     ۱۱ رقم داخلش جا نمی‌شود. */
  .kb-otp-row { flex-direction: column; }
  .kb-otp-row .kb-btn { width: 100%; }
}

/* ⚠️ .kb-btn روی display: inline-flex می‌نشیند و یک کلاس همیشه از قاعده‌ی
   پیش‌فرض مرورگر برای [hidden] قوی‌تر است. نتیجه‌اش این بود که دکمه‌ای که
   اسکریپت مخفی می‌کرد (مثلاً «ارسال کد» بعد از تأیید شماره) همچنان دیده
   می‌شد. این یک خط، hidden را در کل این صفحه دوباره معنادار می‌کند. */
.kb [hidden] { display: none !important; }