/* ==========================================================================
   زبان‌نگار — ویجت «تقویم آموزشی · نوار تب زبان‌ها» (zn-cal-tabs)
   طرح مبدأ: 04-language-tabs.dc.html
   نوار چسبانِ انتخاب زبان که زبانِ فعالِ کل صفحه را کنترل می‌کند.
   ========================================================================== */

.zncal-tabs-sec {
  position: relative;
  z-index: 50;
  background: var(--zn-glass-72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-block: 1px solid rgba(var(--zn-line), .1);
}
/* هنگام چسبیدن (fixed) توسط JS: سایه‌ی جداکننده و پوششِ کامل */
.zncal-tabs-sec.is-stuck {
  z-index: 999;
  box-shadow: 0 12px 30px rgba(60, 30, 15, .14);
  border-top-color: transparent;
}
/* جای‌گیرِ ارتفاع هنگام fixed‌شدن — بدون فاصله‌ی اضافه */
.zncal-spacer { margin: 0; padding: 0; }
.zncal-sentinel { height: 0; margin: 0; padding: 0; }

.zncal-tabbar {
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px clamp(16px, 4vw, 40px);
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.zncal-tabbar::-webkit-scrollbar { height: 0; }

.zncal-tab {
  flex: 0 0 auto;               /* تب‌ها له نشوند؛ در موبایل نوار اسکرول شود */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 10px 20px;
  border-radius: 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
  border: 1px solid rgba(var(--zn-line), .16);
  background: var(--zn-card);
  color: var(--zn-t2);
}
.zncal-tab.is-on {
  border-color: transparent;
  background: linear-gradient(90deg,
    var(--znct-from, var(--zn-crim)),
    var(--znct-mid, var(--zn-rose)) 52%,
    var(--znct-to, var(--zn-rose2)));
  color: #fff;
  box-shadow: 0 12px 28px rgba(225, 29, 72, .3);
}

.zncal-tab-name { font-size: 14.5px; font-weight: 800; }
.zncal-tab-sub { font-size: 10.5px; font-weight: 600; letter-spacing: .4px; color: var(--zn-t5); }
.zncal-tab.is-on .zncal-tab-sub { color: rgba(255, 255, 255, .82); }

/* بلوک زبان‌های سایر ویجت‌ها که با باس مخفی/نمایان می‌شوند */
.zncal-hidden { display: none !important; }

/* پیامِ جای‌گزین وقتی یک بخش برای زبانِ انتخابی داده ندارد */
.zncal-empty {
  padding: 44px 22px;
  text-align: center;
  color: var(--zn-t5, #9a8f86);
  font-size: 14px;
  font-weight: 600;
  line-height: 2;
  opacity: .9;
}

/* ریسپانسیو موبایل — اسکرول افقیِ نمایان تا همهٔ زبان‌ها در دسترس باشند */
@media (max-width: 640px) {
  .zncal-tabbar {
    padding: 8px 12px 10px;
    gap: 8px;
    scrollbar-width: thin;                        /* فایرفاکس: اسکرول‌بار نازک */
    scrollbar-color: rgba(var(--zn-line), .5) transparent;
    /* محوشدگیِ لبهٔ چپ (RTL): نشانهٔ اینکه زبان‌های بیشتری آن‌سو هست */
    -webkit-mask-image: linear-gradient(to left, transparent 0, #000 28px, #000 100%);
            mask-image: linear-gradient(to left, transparent 0, #000 28px, #000 100%);
  }
  .zncal-tabbar::-webkit-scrollbar { height: 3px; }
  .zncal-tabbar::-webkit-scrollbar-thumb { background: rgba(var(--zn-line), .5); border-radius: 3px; }
  .zncal-tab { padding: 8px 14px; border-radius: 12px; }
  .zncal-tab-name { font-size: 13px; }
  .zncal-tab-sub { font-size: 9.5px; }
}