/* =========================================================================
   TehranSite Article Elements — Frontend Stylesheet
   -------------------------------------------------------------------------
   این فایل توسط پلاگین فقط در تک‌نوشته‌هایی که واقعاً از شورت‌کد [tae] استفاده
   می‌کنند enqueue می‌شود (class-shortcodes.php::maybe_enqueue_assets).

   منبع واحد Design System (توکن‌ها + همه‌ی کامپوننت‌های محتوایی مقاله) است.
   قالب Single Post باید کل ناحیه مقاله را در یک المان با کلاس .ts-article
   قرار دهد تا CSS Custom Property های تعریف‌شده در پایین به همه‌ی
   کامپوننت‌های داخل آن (چه از پلاگین، چه از قالب) برسد.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. TOKENS — رنگ، تایپوگرافی، فاصله، شعاع، سایه
   ------------------------------------------------------------------------- */
:where(body.page, body.single-product), .ts-article{

  /* --- رنگ پایه --- */
  --ts-bg:            #FFFFFF;
  --ts-surface:       #FAFBFC;   /* برای اسکلت صفحه (سایدبار، هدر جزئی) نه باکس‌های محتوا */
  --ts-text:           #1F2937;
  --ts-text-strong:    #10161F;
  --ts-muted:          #6B7280;
  --ts-border:         #EDF0F4;  /* خط ظریف، هرگز gradient */
  --ts-border-strong:  #E2E6EC;

  /* --- Primary (آبی لاجوردی — لینک، آیکون خنثی، پلیر صوتی) --- */
  --ts-primary:        #3B6FE0;
  --ts-primary-600:    #2F5BC4;
  --ts-primary-soft:   #EEF3FE;
  --ts-primary-softer: #F6F9FE;

  /* --- Accent (Peach/نارنجی — مطلب پیشنهادی میان‌متن، نکته مهم) --- */
  --ts-accent:         #E08A45;
  --ts-accent-soft:    #f9daebcd;

  /* --- Positive (Mint/Sage — نکات مثبت) --- */
  --ts-positive:       #2F9E74;
  --ts-positive-ink:   #1F7A59;
  --ts-positive-soft:  #E9F7F1;

  /* --- Negative (Coral/Rose — نکات منفی) --- */
  --ts-negative:       #D96D6D;
  --ts-negative-ink:   #B84E4E;
  --ts-negative-soft:  #FDEFEF;

  /* --- Info (یاسی — چکیده مقاله) --- */
  --ts-info:           #7C6FE0;
  --ts-info-soft:      #DEF0E4;

  /* --- Highlight متن (قابل override برای هر برند) --- */
  --ts-highlight:      #FFE39B;
  --ts-highlight-ink:  #6B4A12;

  /* --- Coral برای نقل‌قول (طبق طرح: آبی با اپسیتی کمتر) --- */
  --ts-quote-soft:     #EFF4FE;
  --ts-quote-accent:   #E15C5C;

  /* --- شعاع --- */
  --ts-radius-sm:  10px;
  --ts-radius-md:  16px;
  --ts-radius-lg:  22px;
  --ts-radius-pill: 999px;

  /* --- سایه بسیار ملایم (نه gradient fade) --- */
  --ts-shadow-xs:  0 1px 2px rgba(16,22,31,.04);
  --ts-shadow-sm:  0 4px 16px rgba(16,22,31,.06);
  --ts-shadow-md:  0 8px 28px rgba(16,22,31,.08);

  /* --- تایپوگرافی --- */
  --ts-font-base: "Vazirmatn", "IRANSansX", -apple-system, Tahoma, sans-serif;
  --ts-fs-body:   1.0625rem;   /* 17px — خوانایی مقالات بلند */
  --ts-lh-body:   1.9;
  --ts-fs-h1: clamp(1.6rem, 1.3rem + 1.4vw, 2.25rem);
  --ts-fs-h2: clamp(1.35rem, 1.15rem + 1vw, 1.75rem);
  --ts-fs-h3: clamp(1.2rem, 1.05rem + .7vw, 1.4rem);
  --ts-fs-h4: 1.15rem;
  --ts-fs-h5: 1.05rem;
  --ts-fs-h6: 1rem;

  /* --- فاصله‌گذاری استاندارد بین بلوک‌های محتوا --- */
  --ts-space-block: 2rem;
}

.ts-article{
  background: var(--ts-bg);
  color: var(--ts-text);
  font-family: var(--ts-font-base);
  font-size: var(--ts-fs-body);
  line-height: var(--ts-lh-body);

  /* هرگز اجازه نده یک کلمه‌ی بلند و بی‌فاصله (مثلاً متن آزمایشی) صفحه را
     به‌صورت افقی اسکرول‌دار کند — هم روی خودِ ناحیه مقاله، هم روی هر باکس. */
  overflow-wrap: anywhere;
  word-break: break-word;
  max-width: 100%;
}
.ts-article,
.ts-article *{
  min-width: 0; /* در Flex/Grid، بدون این مقدار، overflow-wrap نادیده گرفته می‌شود */
}

/* دسترسی‌پذیری: احترام به کاربرانی که انیمیشن کمتر می‌خواهند */
@media (prefers-reduced-motion: reduce){
  .ts-article *{ animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* -------------------------------------------------------------------------
   2. تایپوگرافی و Heading Bullets
   ------------------------------------------------------------------------- */
.ts-article h1,
.ts-article h2,
.ts-article h3,
.ts-article h4{
  color: var(--ts-text-strong);
  font-weight: 700;
  line-height: 1.5;
  margin: 1.75rem 0 .8rem;
  display: flex;
  align-items: center;
  gap: .55rem;
}
.ts-article h1{ font-size: var(--ts-fs-h1); }
.ts-article h2{ font-size: var(--ts-fs-h2); }
.ts-article h3{ font-size: var(--ts-fs-h3); margin-inline-start: .25rem; }
.ts-article h4{ font-size: var(--ts-fs-h4); color: var(--ts-muted); }

/* بولت رنگی/بانمک کنار هدینگ — به‌جای بولت ساده‌ی قبلی */
/*.ts-article h2::before,*/
/*.ts-article h3::before{*/
/*  content:"";*/
/*  flex: 0 0 auto;*/
/*  border-radius: var(--ts-radius-pill);*/
/*  background: var(--ts-primary);*/
/*}*/
.ts-article h2::before{ width:10px; height:10px; box-shadow: 0 0 0 4px var(--ts-primary-soft); }
.ts-article h3::before{ width:7px;  height:7px;  background: var(--ts-accent); box-shadow: 0 0 0 3px var(--ts-accent-soft); }

.ts-article p{ margin: 0 0 1.35rem; }
.ts-article a{ color: var(--ts-primary); text-decoration underline; text-underline-offset: 3px; }

/* -------------------------------------------------------------------------
   3. Text Highlight اختصاصی (نه هایلایت زرد ساده مرورگر)
   ------------------------------------------------------------------------- */
.ts-highlight{
  --ts-hl: var(--ts-highlight);
  position: relative;
  color: var(--ts-highlight-ink);
  font-weight: 600;
  padding: .02em .15em;
  background-image: linear-gradient(var(--ts-hl), var(--ts-hl));
  background-repeat: no-repeat;
  background-size: 100% .55em;
  background-position: 0 78%;
  border-radius: 2px 6px 2px 8px / 3px 4px 3px 5px; /* شکل ارگانیک، نامنظم ولی کنترل‌شده */
}

/* -------------------------------------------------------------------------
   5. باکس چکیده مقاله (Info)
   ------------------------------------------------------------------------- */
.ts-summary{
  background: var(--ts-info-soft);
  border-radius: var(--ts-radius-md);
  padding: 1.5rem 1.7rem;
  margin: 0 0 var(--ts-space-block);
  color: var(--ts-text);
}
.ts-summary__label{
  display:flex; align-items:center; gap:.5rem;
  font-weight:700; color: #262626; font-size:1.1rem;
}
.ts-summary-desktop{
  width: 100%;
  display: flex;
  gap: 20px;
}
.ts-summary-desktop-icon{
  flex-shrink: 0;
  width: 80px;
  height: 80px;
}
.ts-summary-desktop-icon svg,.ts-summary-desktop-icon img{
  width: 100% !important;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
}
.ts-summary__text{
  font-size: 13px;
  line-height: 22px;
}
@media(max-width:992px){
  .ts-summary__text{
    margin-top: 15px;
  }
}
/* -------------------------------------------------------------------------
   6. Quotation Box
   ------------------------------------------------------------------------- */
.ts-heading{
  display:flex; align-items:center; gap:5px !important; direction:rtl; text-align:right;
  margin:24px 0; padding:0; font-size:18px; font-weight:700; line-height:1.7; color:#262626;
}
.ts-heading::before{
  display: none !important;
}
.ts-heading > span:last-child{ min-width:0; overflow-wrap:anywhere; }
.ts-heading__icon{ display:flex; flex:0 0 24px; color:#f49ac2; }
.ts-heading__icon svg{ display:inline-block; width:18px; height:18px; }
.ts-quote{
  background:var(--tae-quote-background, #eaf3f6);
  border-radius:8px;
  padding:14px 16px;
  margin: 0 0 var(--ts-space-block);
  direction:rtl;
}
.ts-quote__head{
  display:flex; align-items:center; gap:6px; margin-bottom:8px;
}
.ts-quote__icon{ flex:0 0 20px; }
.ts-quote__cite{
  font-size:18px; line-height:1.4; font-style:normal; font-weight:700; color:#262626;
}
.ts-quote__text{
  margin:0; font-size:14px; line-height:1.7; text-align:right; color:#4b5563;
}
.ts-quote__text > :first-child{ margin-top:0; }
.ts-quote__text > :last-child{ margin-bottom:0; }
.ts-quote__text ul,
.ts-quote__text ol{ padding-inline-start:1.5em; }

/* -------------------------------------------------------------------------
   7. نکته مهم (Note)
   ------------------------------------------------------------------------- */
.ts-note{
  background: var(--tae-note-background, var(--ts-accent-soft));
  border-radius: var(--ts-radius-md);
  padding: 1.4rem 1.7rem;
  margin: 0 0 var(--ts-space-block);
  display:flex; gap:.9rem; align-items:flex-start;
}
.ts-note__icon{
  border-radius: var(--ts-radius-sm);
  background: var(--ts-bg); display:flex; align-items:center; justify-content:center;
  color: var(--ts-accent);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  flex-shrink: 0;
}
.ts-note__body{ color: var(--ts-text); }
.ts-note__body-title{
  color: #DB5FA3;
  font-size: 18px;
  color: 600;
}

/* -------------------------------------------------------------------------
   8. نکات مثبت و منفی
   ------------------------------------------------------------------------- */
.ts-points{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  direction: ltr;
  margin: 0 0 var(--ts-space-block);
}
/* اگر فقط یک ستون باشد، والد کلاس ts-points--single می‌گیرد و آن ستون ۱۰۰٪ عرض می‌گیرد */
.ts-points.ts-points--single{ grid-template-columns: 1fr; }

.ts-points__col{
  box-sizing: border-box;
  direction: rtl;
  border-radius: 15px;
  padding: 10px 12px;
}
.ts-points__col--positive{ background: var(--tae-points-background, #e2f2e9); }
.ts-points__col--negative{ background: var(--tae-points-background, #fdf0f0); }

.ts-points__head{
  display:flex; flex-direction:row; align-items:center;
  gap:7px; margin-bottom: 8px;
}
.ts-points__badge{
  border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  flex-shrink: 0;
}
.ts-points__badge svg{ width:55px; height:55px; }
/* .ts-points__col--positive .ts-points__badge{ color: #fff; background: #c5e8d3; }
.ts-points__col--negative .ts-points__badge{ color: #fff; background: #f9c9d2; } */

.ts-points__title{ font-weight:700; font-size:18px; line-height:1.5; }
.ts-points__col--positive .ts-points__title{ color: #368d65; }
.ts-points__col--negative .ts-points__title{ color: #e34264; }

.ts-points__list{ list-style:none; margin:0; padding:0; }
.ts-points__list li{
  display:flex; align-items:center; gap:8px;
  padding: 3px 0; font-size:15px; line-height:1.5;
  margin-bottom: 10px;
}
.ts-points__list li svg{
  margin-top: 5px;
}
@media (max-width: 720px){
  .ts-points{ grid-template-columns: 1fr; }
  .ts-note{
	  padding:1rem;
}
}

/* -------------------------------------------------------------------------
   9. مطلب پیشنهادی میان متن
   ------------------------------------------------------------------------- */
.ts-inline-suggest{
  display:flex; align-items:center; gap:1rem;
  background: var(--ts-accent-soft);
  border-radius: var(--ts-radius-md);
  padding: 1rem 1.2rem;
  margin: 0 0 var(--ts-space-block);
  text-decoration:none;
  transition: transform .18s ease, box-shadow .18s ease;
}
.ts-inline-suggest:hover{ transform: translateY(-2px); box-shadow: var(--ts-shadow-sm); }
.ts-inline-suggest__thumb{
  flex:0 0 auto; width:64px; height:64px; border-radius: var(--ts-radius-sm);
  overflow:hidden; background: var(--ts-border);
}
.ts-inline-suggest__thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.ts-inline-suggest__body{ flex:1 1 auto; min-width:0; }
.ts-inline-suggest__eyebrow{
  display:flex; align-items:center; gap:.4rem;
  font-size:.8rem; color: var(--ts-accent); font-weight:700; margin-bottom:.25rem;
}
.ts-inline-suggest__title{
  color: var(--ts-text-strong); font-weight:700; font-size:1rem;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ts-inline-suggest__arrow{
  flex:0 0 auto; width:36px; height:36px; border-radius:50%;
  background: var(--ts-bg); display:flex; align-items:center; justify-content:center;
  color: var(--ts-accent);
}

/* -------------------------------------------------------------------------
   10. چکیده صوتی مقاله
   ------------------------------------------------------------------------- */
.ts-audio{
  --ts-audio-bars:141;
  display:grid; grid-template-columns:auto minmax(0, 1fr) auto;
  grid-template-areas:"wave wave controls" "time title title";
  align-items:center; gap:19.6px 18.6px; direction:ltr;
  box-sizing:border-box; min-width:0;
  background:rgba(255,255,255,.6);
  border-radius:19.6px;
  padding:23.5px 28.4px;
  margin: 0 0 var(--ts-space-block);
}
.ts-audio__title{
  grid-area:title; direction:rtl; text-align:right;
  font-weight:700; font-size:15px; line-height:25px; color:#262626;
}
.ts-audio__source, .ts-audio [hidden]{ display:none; }
.ts-audio__controls{ grid-area:controls; display:flex; direction:rtl; align-items:center; gap:9.8px; }
.ts-audio__btn{
  flex:0 0 auto; display:grid; place-items:center; width:39.2233px; height:39.2233px;
  padding:0; border:0; border-radius:50%; background:transparent; color:#fff; cursor:pointer;
  font:inherit; line-height:1; text-decoration:none;
}
.ts-audio__btn > *{ grid-area:1 / 1; }
.ts-audio picture, .ts-audio picture img{ display:block; }
.ts-audio__speed{ color:#4b9271; font-size:14.7px; font-weight:800; direction:ltr; }
.ts-audio [data-tae-icon-pause], .ts-audio.is-playing [data-tae-icon-play]{ display:none; }
.ts-audio.is-playing [data-tae-icon-pause]{ display:block; }
.ts-audio__wave{ grid-area:wave; position:relative; min-width:0; height:43.5px; }
.ts-audio__bars{ display:flex; direction:rtl; height:100%; align-items:center; gap:2px; }
.ts-audio__bars span{ flex:1 1 0; min-width:0; background:#e5e5e5; border-radius:60px; }
.ts-audio__bars span.is-played{ background:#4b9271; }
.ts-audio__seek{ position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; direction:rtl; }
.ts-audio__btn:focus-visible, .ts-audio__wave:focus-within{ outline:2px solid #4b9271; outline-offset:3px; }
.ts-audio__time{ grid-area:time; display:flex; align-items:center; gap:11.8px; direction:ltr; font-size:15px; line-height:1; color:#22274d; white-space:nowrap; font-variant-numeric:tabular-nums; }
.ts-audio__desc, .ts-audio__error{ grid-column:1 / -1; direction:rtl; text-align:right; font-size:.92rem; color:var(--ts-muted); }
.ts-audio__error{ color:#b42318; }
@media (max-width:640px){
  .ts-audio{
    --ts-audio-bars:96;
    grid-template-columns:auto minmax(0, 1fr);
    grid-template-areas:"wave wave" "controls title" "controls time";
    gap:0 24px; padding:21px 17px 20px; border-radius:14.4px;
  }
  .ts-audio__wave{ height:37.4px; margin-bottom:19px; }
  .ts-audio__bars{ gap:1.75px; }
  .ts-audio__bars span:nth-child(n+97){ display:none; }
  .ts-audio__controls{ gap:10.55px; }
  .ts-audio__btn{ width:37.431px; height:37.431px; }
  .ts-audio__speed{ font-size:14px; }
  .ts-audio__title{ font-size:10px; line-height:17px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .ts-audio__time{ justify-self:end; gap:8.9px; font-size:8px; min-height:17px; }
  .ts-audio__desc, .ts-audio__error{ margin-top:16px; }
}

/* -------------------------------------------------------------------------
   11. ویدئوی مقاله
   ------------------------------------------------------------------------- */
.ts-video{
  display:grid; grid-template-columns:minmax(0, 1.15fr) minmax(0, 1fr); gap:40px; align-items:center;
  direction:rtl; border-radius:20px; padding:24px;
  background:#fff;
  margin: 0 0 var(--ts-space-block);
}
.ts-video__content{ min-width:0; }
.ts-video__title{
  display:flex; align-items:center; gap:16px;
  font-weight:700; font-size:18px; line-height:1.5; color:#262626;
  margin-bottom:12px;
}
.ts-video__title svg{ flex-shrink:0; color:#829ec8; }
.ts-video__frame{
  position:relative; border-radius:16px; overflow:hidden;
  aspect-ratio: 5/3; background:#0F1420;
}
.ts-video__frame img{ width:100%; height:100%; object-fit:cover; display:block; }
.ts-video__play{
  position:absolute; inset:0; margin:auto; width:56px; height:56px; padding:0; border:0; cursor:pointer;
  border-radius:50%; background:rgba(255,255,255,.45);
  display:flex; align-items:center; justify-content:center;
  color:#fff;
  transition: transform .18s ease;
}
.ts-video__play:hover{ transform: scale(1.06); }
.ts-video__desc{ font-size:14px; line-height:2; color:#262626; text-align:right; overflow-wrap:anywhere; }
.ts-video__desc p{ margin:0; }
.ts-video__actions{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:12px; }
.ts-video__watch{ border:0; border-radius:10px; padding:10px 18px; background:#829ec8; color:#fff; font:inherit; font-size:12px; cursor:pointer; }
.ts-video__watch:hover{ background:#6c8dbd; }
.ts-video__duration{ display:flex; align-items:center; gap:10px; direction:ltr; font-size:12px; color:#262626; }
.ts-video__watch:focus-visible,.ts-video__play:focus-visible{ outline:2px solid #426694; outline-offset:3px; }
@media(max-width:600px){
  .ts-video{ grid-template-columns:minmax(0,1fr); gap:12px; padding:20px; }
}

/* -------------------------------------------------------------------------
   12. تصاویر داخل مقاله (Frame شبیه آلبوم عکس، ساده)
   ------------------------------------------------------------------------- */
figure.ts-figure{
  margin: 0 0 var(--ts-space-block);
  padding: .5rem;
  background: var(--ts-bg);
  border: 1px solid var(--ts-border);
  border-radius: var(--ts-radius-lg);
}
.ts-figure img{
  width:100%; display:block; border-radius: var(--ts-radius-md);
}
.ts-figure figcaption{
  margin-top:.7rem; padding: 0 .4rem .3rem;
  text-align:center; font-size:.88rem; color: var(--ts-muted);
}
/* گالری چند تصویری */
.ts-figure-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:.5rem;
}
.ts-figure-grid img{ border-radius: var(--ts-radius-md); width:100%; aspect-ratio:4/3; object-fit:cover; }

/* -------------------------------------------------------------------------
   13. جدول‌های مقاله — بدون هیچ Fade، کاملاً خوانا
   ------------------------------------------------------------------------- */
.ts-table-title{
  font-size: 1rem;
  font-weight: 700;
  color: var(--ts-text-strong);
  margin: 0 0 .8rem;
}
.ts-table-wrap{
  position:relative;
  box-sizing:border-box;
  width:100%; max-width:100%; min-width:0;
  padding:10px;
  overflow:hidden;
  background:#eaebf0;
  border-radius:14px;
  margin: 0 0 var(--ts-space-block);
}
.ts-table-viewport{
  min-width:0; max-width:100%; overflow-x:auto; direction:rtl;
  padding-bottom:10px; scrollbar-width:thin; scrollbar-color:#c9c9c9 transparent;
}
.ts-table-grid{
  width:max(100%, calc(var(--ts-table-columns, 1) * 150px));
  font-size:12px; line-height:21px; color:#262626;
}
.ts-table-header, .ts-table-body{
  box-sizing:border-box; direction:ltr; overflow-y:hidden; scrollbar-gutter:stable;
  scrollbar-color:#c9c9c9 transparent; scrollbar-width:thin;
}
.ts-table-body{ max-height:212px; padding-block:12px; overflow-y:auto; }
.ts-table-row{ display:grid; grid-template-columns:repeat(var(--ts-table-columns, 1), minmax(0, 1fr)); direction:rtl; }
.ts-table-cell{
  display:block; box-sizing:border-box; position:relative; align-content:center;
  min-height:62.5px; padding:20px 12px; text-align:center; overflow-wrap:anywhere;
}
.ts-table-header .ts-table-cell{ min-height:46px; padding-block:12px; font-weight:700; }
.ts-table-cell:not(:last-child)::after{
  content:""; position:absolute; inset-inline-end:0; top:50%;
  width:1px; height:23px; transform:translateY(-50%); background:#d9dce3;
}
.ts-table-header .ts-table-cell::after{ background:#c9cbd2; }
.ts-table-body .ts-table-row:nth-child(odd){ background:#f4f5f7; border-radius:0 10px 10px 0; }
.ts-table-wrap--scroll .ts-table-viewport{ margin-right:14px; scrollbar-width:none; }
.ts-table-wrap--scroll .ts-table-header, .ts-table-wrap--scroll .ts-table-body{ scrollbar-width:none; scrollbar-gutter:auto; }
.ts-table-wrap--scroll .ts-table-viewport::-webkit-scrollbar,
.ts-table-wrap--scroll .ts-table-body::-webkit-scrollbar{ display:none; }
.ts-table-scrollbar{
  appearance:none; -webkit-appearance:none; position:absolute; box-sizing:border-box;
  padding:0; margin:0; border:0; border-radius:15px; cursor:pointer;
}
.ts-table-scrollbar--vertical{
  right:10px; width:4px; min-width:4px; writing-mode:vertical-lr; direction:ltr;
  background:linear-gradient(to bottom, #fff, rgba(255,255,255,0));
}
.ts-table-scrollbar--horizontal{
  bottom:10px; left:10px; width:calc(100% - 34px); height:4px; min-height:4px;
  direction:rtl; background:linear-gradient(to left, #fff, rgba(255,255,255,0));
}
.ts-table-scrollbar[hidden]{ display:none; }
.ts-table-scrollbar::-webkit-slider-runnable-track{ background:transparent; }
.ts-table-scrollbar::-webkit-slider-thumb{
  appearance:none; -webkit-appearance:none; width:4px; height:75px;
  border:0; border-radius:15px; background:rgba(201,201,201,.61);
}
.ts-table-scrollbar--horizontal::-webkit-slider-thumb{ width:75px; height:4px; }
.ts-table-scrollbar::-moz-range-track{ background:transparent; }
.ts-table-scrollbar::-moz-range-thumb{
  width:4px; height:75px; border:0; border-radius:15px; background:rgba(201,201,201,.61);
}
.ts-table-scrollbar--horizontal::-moz-range-thumb{ width:75px; height:4px; }
.ts-table-scrollbar:focus-visible, .ts-table-body:focus-visible, .ts-table-viewport:focus-visible{ outline:2px solid #6b7280; outline-offset:-2px; }

/* -------------------------------------------------------------------------
   14. مطالب پیشنهادی انتهای مقاله (Related Posts)
   ------------------------------------------------------------------------- */
.ts-related{ margin: 3rem 0 0; }
.ts-related__head{
  display:flex; align-items:center; gap:.55rem;
  font-weight:700; font-size:1.15rem; margin-bottom:1.2rem;
}
.ts-related__grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem;
}
.ts-related__card{
  display:block; text-decoration:none; color:inherit;
  border-radius: var(--ts-radius-md); overflow:hidden;
  border: 1px solid var(--ts-border);
  transition: transform .18s ease, box-shadow .18s ease;
}
.ts-related__card:hover{ transform: translateY(-3px); box-shadow: var(--ts-shadow-sm); }
.ts-related__thumb{ aspect-ratio:16/10; background: var(--ts-border); overflow:hidden; }
.ts-related__thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.ts-related__body{ padding: .95rem 1.05rem 1.15rem; }
.ts-related__cat{
  display:flex; align-items:center; gap:.4rem;
  font-size:.78rem; font-weight:700; color: var(--ts-primary); margin-bottom:.4rem;
}
.ts-related__title{
  font-weight:700; font-size:.98rem; color: var(--ts-text-strong);
  line-height:1.6; margin-bottom:.5rem;
}
.ts-related__meta{ display:flex; gap:.8rem; font-size:.8rem; color: var(--ts-muted); }

@media (max-width: 900px){ .ts-related__grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width: 560px){ .ts-related__grid{ grid-template-columns:1fr; } }

/* -------------------------------------------------------------------------
   15. سایدبار — بیشتر مطالعه کنید / پربازدید
   ------------------------------------------------------------------------- */
.ts-sidebar-box{
  background: var(--ts-bg);
  border: 1px solid var(--ts-border);
  border-radius: var(--ts-radius-md);
  padding: 1.1rem;
  margin-bottom: 1.4rem;
}
.ts-sidebar-box.is-sticky{ position: sticky; top: 1.4rem; }
.ts-sidebar-box__head{
  display:flex; align-items:center; gap:.5rem;
  font-weight:700; margin-bottom: 1rem; font-size:.98rem;
}
.ts-sidebar-box__head .ts-icon-fire{ color: var(--ts-accent); }

.ts-sidebar-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.9rem; }
.ts-sidebar-item{
  display:flex; gap:.75rem; text-decoration:none; color:inherit;
}
.ts-sidebar-item__thumb{
  flex:0 0 auto; width:64px; height:56px; border-radius: var(--ts-radius-sm);
  overflow:hidden; background: var(--ts-border);
}
.ts-sidebar-item__thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.ts-sidebar-item__body{ min-width:0; }
.ts-sidebar-item__time{ font-size:.76rem; color: var(--ts-muted); margin-bottom:.25rem; }
.ts-sidebar-item__title{
  font-size:.9rem; font-weight:600; line-height:1.6; color: var(--ts-text-strong);
  display: -webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.ts-sidebar-item:hover .ts-sidebar-item__title{ color: var(--ts-primary); }

/* -------------------------------------------------------------------------
   16. اطلاعات نویسنده
   ------------------------------------------------------------------------- */
.ts-author-box{
  display:flex; gap:1rem; align-items:flex-start;
  background: var(--ts-surface);
  border-radius: var(--ts-radius-md);
  padding: 1.3rem 1.4rem;
  margin: 3rem 0;
}
.ts-author-box__avatar{ flex:0 0 auto; width:64px; height:64px; border-radius:50%; overflow:hidden; }
.ts-author-box__avatar img{ width:100%; height:100%; object-fit:cover; }
.ts-author-box__name{ font-weight:700; color: var(--ts-text-strong); margin-bottom:.3rem; }
.ts-author-box__bio{ font-size:.9rem; color: var(--ts-muted); line-height:1.8; }

/* -------------------------------------------------------------------------
   17. بخش اشتراک‌گذاری (نوار شناور کنار محتوا)
   ------------------------------------------------------------------------- */
.ts-share{
  display:flex; flex-direction:column; gap:.6rem;
  position: sticky; top: 1.4rem;
}
.ts-share__btn{
  width:44px; height:44px; border-radius:50%; border:1px solid var(--ts-border);
  background: var(--ts-bg); display:flex; align-items:center; justify-content:center;
  cursor:pointer; color: var(--ts-muted);
  transition: color .15s ease, border-color .15s ease, transform .15s ease;
}
.ts-share__btn:hover{ color: var(--ts-primary); border-color: var(--ts-primary-soft); transform: translateY(-2px); }

/* -------------------------------------------------------------------------
   18. متای بالای مقاله (نویسنده | تاریخ | زمان مطالعه)
   ------------------------------------------------------------------------- */
.ts-meta{
  display:flex; flex-wrap:wrap; align-items:flex-start; gap:1.8rem;
  color: var(--ts-muted); font-size:.88rem; margin: 1.2rem 0 2rem;
}
.ts-meta__item{ display:flex; flex-direction:column; gap:.5rem; }
.ts-meta__row{ display:flex; align-items:center; gap:.6rem; }
.ts-meta__icon{
  width:36px; height:36px; border-radius:50%; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  color:#fff;
}
.ts-meta__icon--views  { background: var(--ts-positive); }
.ts-meta__icon--author { background: #8A93A6; }
.ts-meta__icon--date   { background: var(--ts-primary); }
.ts-meta__icon--time   { background: var(--ts-quote-accent, #e15c5c); }
.ts-meta__author{ color: var(--ts-text-strong); font-weight:600; }
.ts-meta__label{ font-size:.78rem; color: var(--ts-muted); }
.ts-meta__value{ font-size:.86rem; color: var(--ts-text-strong); font-weight:600; }

/* -------------------------------------------------------------------------
   18b. سوالات متداول (FAQ) — Accordion
   ------------------------------------------------------------------------- */
.ts-faq{
  margin: 0 0 var(--ts-space-block);
}
.ts-faq__title{
  font-size: 1.3rem;
  margin-bottom: 1.1rem;
}
.ts-faq__list{
  display:flex; flex-direction:column; gap:.7rem;
}
.ts-faq__item{
  border: 1px solid var(--ts-border); border-radius: var(--ts-radius-md);
  background: var(--ts-bg); overflow:hidden;
}
.ts-faq__question{ margin:0; }
.ts-faq__question-btn{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding: 1rem 1.2rem; background:none; border:0; cursor:pointer;
  font-family:inherit; font-size:1rem; font-weight:700; color: var(--ts-text-strong);
  text-align: inherit;
}
.ts-faq__question-icon{
  flex:0 0 auto; display:flex; color: var(--ts-muted);
  transition: transform .2s ease;
}
.ts-faq__question-btn[aria-expanded="true"] .ts-faq__question-icon{
  transform: rotate(180deg); color: var(--ts-primary);
}
.ts-faq__answer{
  padding: 0 1.2rem 1.1rem;
  color: var(--ts-text); font-size:.94rem; line-height:1.9;
}
.ts-faq__answer[hidden]{ display:none; }
.ts-faq__answer-inner > *:last-child{ margin-bottom:0; }

/* -------------------------------------------------------------------------
   19. Placeholder ادمین در TinyMCE (Visual mode)
   -------------------------------------------------------------------------
   همان کلاس‌های بالا با پیشوند mce- بازاستفاده می‌شوند تا در ادیتور هم
   پیش‌نمایش واقعی به ادمین نشان داده شود؛ فقط یک نوار "ویرایش" اضافه دارد.
   ------------------------------------------------------------------------- */
.ts-mce-placeholder{
  position: relative;
  cursor: pointer;
  outline: 2px dashed transparent;
  transition: outline-color .15s ease;
}
.ts-mce-placeholder:hover{ outline-color: var(--ts-primary-soft); }
.ts-mce-placeholder__edit{
  position:absolute; top:8px; left:8px;
  background: var(--ts-text-strong); color:#fff; font-size:.72rem;
  padding:.25rem .6rem; border-radius: var(--ts-radius-pill);
  opacity:0; transition: opacity .15s ease;
}
.ts-mce-placeholder:hover .ts-mce-placeholder__edit{ opacity:1; }

.ts-quote__custom-icon{ display:flex; flex:0 0 20px; width:20px; height:20px; }
.ts-quote__custom-icon svg{ display:block; width:100%; height:100%; }
.ts-note__custom-icon{ display:flex; width:40px; height:40px; }
.ts-note__custom-icon svg{ display:block; width:100%; height:100%; }