/* ==================================================================
   tehransu-pages.css — صفحات داخلی تهران سولفور
   (بعد از tehransu.css لود می شود)
   ================================================================== */

/* ---------- سربرگ صفحه ---------------------------------------- */
.ts-phead{
  background:linear-gradient(180deg,#FCFCFA,#EFF1EC), var(--grid);
  color:var(--c-txt);padding-block:34px 38px;position:relative;
  border-block-end:1px solid var(--c-line);
}
.ts-phead__title{color:var(--c-ink);font-size:clamp(1.5rem,3vw,2.3rem);margin:.2em 0 0;max-width:28ch}
.ts-phead__meta{display:flex;gap:20px;flex-wrap:wrap;color:var(--c-muted);font-family:var(--ts-mono);font-size:.87rem;margin:.9em 0 0}
.ts-phead__meta time,.ts-phead__meta span{display:inline-flex;align-items:center;gap:6px}
.ts-phead__actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}

.ts-crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px;font-size:.85rem}
.ts-crumbs li+li::before{content:"/";color:var(--c-line-2);margin-inline-end:6px}
.ts-crumbs a{color:var(--c-muted)}
.ts-crumbs a:hover{color:var(--c-signal)}
.ts-crumbs span{color:var(--c-ink);font-weight:700}

/* ---------- بدنه ----------------------------------------------- */
.ts-pbody{padding-block:44px 0}
.ts-pbody__grid{display:grid;grid-template-columns:270px 1fr;gap:36px;align-items:start}
.ts-pbody__grid--single{grid-template-columns:1fr;max-width:920px}
.ts-article{
  background:var(--c-surface);border:1px solid var(--c-line);
  border-block-start:4px solid var(--c-signal);padding:32px;min-width:0;
}
.ts-lead{font-size:1.06rem;color:var(--c-muted);border-inline-start:4px solid var(--c-signal);padding-inline-start:14px;margin-bottom:1.4em}
.ts-fig{margin:0 0 1.6em}
.ts-fig img{width:100%;display:block;border:1px solid var(--c-line)}

/* فهرست مطالب چسبان */
.ts-toc{
  position:sticky;top:96px;background:var(--c-surface);border:1px solid var(--c-line);
  border-block-start:4px solid var(--c-ink);padding:18px 20px;
  max-height:calc(100vh - 130px);overflow:auto;
}
.ts-toc__head{font-weight:800;margin:0 0 12px;padding-bottom:10px;border-bottom:2px solid var(--c-signal);color:var(--c-ink)}
.ts-toc ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ts-toc a{color:var(--c-txt);font-size:.9rem;display:block;padding-inline-start:12px;border-inline-start:2px solid var(--c-line)}
.ts-toc a:hover,.ts-toc a.is-active{color:var(--c-oxide);border-inline-start-color:var(--c-signal)}

/* ---------- محتوای ادیتور -------------------------------------- */
.ts-rich{color:var(--ts-txt)}
.ts-rich h2{
  font-size:1.32rem;margin:1.7em 0 .6em;padding-inline-start:14px;
  border-inline-start:5px solid var(--c-signal);scroll-margin-top:100px;
}
.ts-rich h3{font-size:1.1rem;margin:1.4em 0 .5em;color:var(--c-oxide)}
.ts-rich p{margin:0 0 1.05em;text-align:justify}
.ts-rich a{color:var(--c-oxide);text-decoration:underline;text-underline-offset:3px}
.ts-rich a:hover{color:var(--c-oxide-l)}
.ts-rich strong{color:var(--ts-ink)}
.ts-rich img{display:block;margin:1.4em auto;border:1px solid var(--c-line)}
.ts-rich ul,.ts-rich ol{margin:0 0 1.1em;padding-inline-start:1.4em}
.ts-rich li{margin-bottom:.5em}
.ts-rich blockquote{
  margin:1.4em 0;padding:16px 20px;background:var(--c-bg);
  border-inline-start:4px solid var(--c-ink);
}
.ts-rich table,.section-content table,.ts-article table{
  width:100%;border-collapse:collapse;margin:1.4em 0;font-size:.93rem;
  display:block;overflow-x:auto;white-space:nowrap;
}
.ts-rich table th,.ts-article table th{background:var(--c-ink);color:var(--c-signal);font-weight:700;
  font-family:var(--ts-mono);font-size:.88rem}
.ts-rich table th,.ts-rich table td,.ts-article table th,.ts-article table td{
  border:1px solid var(--ts-line);padding:10px 12px;text-align:start;
}
.ts-rich table tbody tr:nth-child(even),.ts-article table tbody tr:nth-child(even){background:var(--c-bg)}
.ts-rich hr{border:0;border-top:1px dashed var(--ts-line);margin:2em 0}

/* ---------- سکشن های صفحه (sections/*.php) --------------------- */
.page-section{margin-top:2.2em}
.page-section .section-title{
  font-size:1.28rem;margin:0 0 .7em;padding-inline-start:14px;
  border-inline-start:5px solid var(--c-signal);color:var(--c-ink);scroll-margin-top:100px;
}
.section-content{color:var(--ts-txt)}
.section-content p{margin:0 0 1.05em;text-align:justify}
.section-content img{display:block;margin:1.3em auto;border:1px solid var(--c-line)}
.section-content a{color:var(--c-oxide);text-decoration:underline;text-underline-offset:3px}
.section-content ul,.section-content ol{padding-inline-start:1.4em;margin:0 0 1.1em}

/* گالری */
.gallery-grid{display:grid;gap:14px}
.gallery-cols-2{grid-template-columns:repeat(2,1fr)}
.gallery-cols-3{grid-template-columns:repeat(3,1fr)}
.gallery-cols-4{grid-template-columns:repeat(4,1fr)}
.gallery-item img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:var(--c-bg);border:1px solid var(--c-line)}
.gallery-link{display:block;overflow:hidden}
.gallery-link img{transition:transform .3s ease}
.gallery-link:hover img{transform:scale(1.04)}
.gallery-caption{font-size:.85rem;color:var(--c-muted);margin:.5em 0 0;text-align:center}

/* دانلود */
.download-list{display:grid;gap:10px}
.download-item{
  display:flex;align-items:center;gap:12px;min-height:56px;padding:14px 16px;
  background:var(--c-bg);border:1px solid var(--c-line);
  border-inline-start:4px solid var(--c-signal);color:var(--c-ink);font-weight:700;
}
.download-item:hover{background:#fff;border-color:var(--c-line-2);border-inline-start-color:var(--c-oxide)}
.download-icon{display:grid;place-items:center;width:36px;height:36px;background:var(--c-ink);color:var(--c-signal);flex:none}
.download-size{margin-inline-start:auto;color:var(--c-muted);font-weight:500;font-size:.85rem;font-family:var(--ts-mono)}

/* فرم ها */
.front-form{display:grid;gap:14px}
.front-form .form-group{display:grid;gap:6px}
.front-form label{font-weight:700;font-size:.92rem;color:var(--c-ink)}
.front-form .required{color:#c0392b;margin-inline-start:3px}
.front-form input,.front-form select,.front-form textarea{
  width:100%;min-height:46px;padding:11px 13px;border:1px solid var(--c-line-2);
  border-radius:var(--ts-radius);font:inherit;font-size:.95rem;background:#fff;color:var(--c-txt);
}
.front-form input:focus,.front-form select:focus,.front-form textarea:focus{
  border-color:var(--c-ink);outline:2px solid rgba(255,200,0,.45);outline-offset:0;
}
.front-form textarea{min-height:110px;resize:vertical}
.front-form button[type=submit],.front-form .btn{
  justify-self:start;min-height:48px;padding:12px 28px;border:0;border-radius:var(--ts-radius);
  background:var(--c-signal);color:var(--c-ink);font:inherit;font-weight:800;cursor:pointer;
}
.front-form button[type=submit]:hover{background:var(--c-ink);color:var(--c-signal)}
.captcha-row,.captcha2{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.captcha-row input,.captcha2 input{max-width:110px}
.form-success-msg{
  background:#e6f4ea;border:1px solid #b6dfc3;color:#14602f;
  padding:12px 16px;border-radius:var(--ts-radius);margin-bottom:14px;font-weight:700;
}
.form-error-msg,.form-error{color:#c0392b;font-size:.88rem}

/* کارت های فرزند / مرتبط */
.ts-children{margin-top:2.4em}
.ts-children h2,.ts-related__h{
  font-size:1.25rem;margin:0 0 .9em;padding-inline-start:14px;border-inline-start:5px solid var(--c-signal);
}
.ts-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.ts-card{
  display:flex;flex-direction:column;background:var(--c-surface);border:1px solid var(--c-line);
  overflow:hidden;transition:border-color .18s ease, transform .18s ease;
}
.ts-card:hover{transform:translateY(-3px);box-shadow:var(--ts-shadow);border-color:var(--c-ink)}
.ts-card__img{display:block;aspect-ratio:16/10;background:var(--c-bg)}
.ts-card__img img{width:100%;height:100%;object-fit:cover;display:block}
.ts-card__b{display:block;padding:16px 18px}
.ts-card__b strong{display:block;color:var(--c-ink);margin-bottom:.35em;font-size:1rem}
.ts-card__b small{color:var(--c-muted);font-size:.87rem;line-height:1.8;display:block}

/* پرسش و پاسخ داخل صفحه */
.ts-faq--page{margin-top:2.4em}
.ts-faq--page h2{font-size:1.25rem;margin:0 0 .9em;padding-inline-start:14px;border-inline-start:5px solid var(--c-signal)}

/* اشتراک گذاری */
.ts-share{margin-top:2em;padding-top:18px;border-top:1px dashed var(--c-line-2)}
/* ⚠ این قانون از نسخه اول قالب مانده بود و چون specificity اش (0,1,1)
   از .share-btn (0,1,0) بیشتر است، رنگ خاکستری اش روی دکمه های
   اشتراک گذاری می نشست و آیکون تیره روی زمینه تیره می شد.
   حالا فقط لینک های ساده داخل این نوار را می گیرد، نه خود دکمه ها. */
.ts-share a:not(.share-btn),.share a:not(.share-btn){
  display:inline-flex;align-items:center;gap:6px;margin-inline-end:10px;
  color:var(--c-muted);font-size:.88rem;
}
.ts-share a:not(.share-btn):hover{color:var(--c-oxide)}

/* نظرات */
.ts-comments{background:#fff;border-top:1px solid var(--c-line)}
.ts-comments h2{font-size:1.3rem}
.comment-item,.comment{background:var(--c-bg);border:1px solid var(--c-line);padding:16px;margin-bottom:12px}
.comment-reply,.comment .reply{margin-inline-start:26px;background:#fff}

/* جستجو */
.ts-searchbox{display:flex;align-items:center;gap:10px;background:#fff;padding:8px;max-width:560px;margin-top:18px;border-inline-start:4px solid var(--c-signal)}
.ts-searchbox .ts-ic{color:var(--ts-muted);margin-inline-start:8px}
.ts-searchbox input{flex:1;border:0;font:inherit;padding:8px;background:transparent;color:var(--ts-txt)}
.ts-searchbox input:focus{outline:none}

/* صفحه خطا */
.ts-error{text-align:center;padding-block:70px}
.ts-error__code{font-family:var(--ts-mono);font-size:4.4rem;font-weight:700;color:var(--c-oxide);line-height:1}

@media (max-width:1024px){
  .ts-pbody__grid{grid-template-columns:1fr}
  .ts-toc{position:static;max-height:none}
}
@media (max-width:640px){
  .ts-article{padding:20px 16px}
  .gallery-cols-3,.gallery-cols-4{grid-template-columns:repeat(2,1fr)}
  .ts-pbody{padding-block:26px 0}
  .ts-phead{padding-block:24px 28px}
}

/* ---------- کپچای ریاضی و دکمه ارسال فرم ------------------------
   این کلاس ها در sections/form.php هستند و در قالب قبلی استایل
   داشتند؛ برای این قالب از صفر نوشته شده اند.                    */
.captcha2{border:1px dashed var(--c-line-2);padding:12px 14px;background:#fff}
.captcha2-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.captcha2-equation{
  display:flex;align-items:center;gap:8px;background:var(--c-bg);
  border:1px solid var(--c-line);padding:6px 12px;direction:ltr;
}
.captcha2-num,.captcha2-op{
  font-family:var(--ts-mono);font-weight:700;font-size:1.05rem;color:var(--c-ink);
}
.captcha2-input{
  width:76px;min-height:40px;text-align:center;font-family:var(--ts-mono);
  border:1px solid var(--c-line-2);background:#fff;
}
.captcha2-refresh{
  display:grid;place-items:center;width:44px;height:44px;cursor:pointer;
  background:var(--c-ink);color:var(--c-signal);border:0;
}
.captcha2-refresh:hover{background:var(--c-oxide);color:#fff}
.captcha2-refresh.spin svg{animation:ts-spin .6s linear}
@keyframes ts-spin{to{transform:rotate(360deg)}}
.form-actions{margin-top:6px}
.btn-form-submit{min-height:48px}

/* ---------- نوار اشتراک گذاری ------------------------------------
   نسخه قبلی مربع های خالی و خاکستری بود و کنار بقیه سایت بی جان
   می نشست. حالا یک نوار یکپارچه است: برچسب با نشان زرد، دکمه های
   پر رنگ گرافیتی، و رنگ برند هر شبکه روی هاور.                    */
.share-box{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  background:var(--c-bg);border:1px solid var(--c-line);
  border-inline-start:4px solid var(--c-signal);
  padding:12px 16px;
}
.share-label{
  display:inline-flex;align-items:center;gap:8px;
  font-weight:800;color:var(--c-ink);font-size:.92rem;white-space:nowrap;
}
.share-label::before{content:"";width:9px;height:9px;background:var(--c-signal);flex:none}
.share-links{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.share-btn{
  display:inline-grid;place-items:center;width:42px;height:42px;
  border:1px solid var(--c-ink);border-radius:var(--ts-radius);
  background:var(--c-ink);color:#fff;font-size:1rem;line-height:1;
  cursor:pointer;transition:transform .14s ease, background .16s ease, border-color .16s ease;
}
.share-btn:hover{transform:translateY(-2px);color:#fff}
/* رنگ آیکون همیشه از خود دکمه بیاید، هر چه بالادست گفته باشد */
.ts-share .share-btn,.share .share-btn,.share-box .share-btn{color:#fff;font-size:1rem}
.ts-share .share-btn i,.share-box .share-btn i,
.ts-share .share-btn svg,.share-box .share-btn svg{color:inherit;fill:currentColor}
.share-box .share-btn.share-copy:hover,.ts-share .share-btn.share-copy:hover{color:var(--c-ink)}
.share-btn .fa-share-icon,.share-btn i,.share-btn svg{
  width:auto;height:auto;font-size:1.02rem;color:inherit;fill:currentColor;
}
.share-copied{
  background:var(--c-signal);color:var(--c-ink);font-weight:800;font-size:.82rem;
  padding:4px 12px;border-radius:99px;
}

@media (max-width:520px){
  .share-box{gap:10px;padding:12px}
  .share-btn{width:44px;height:44px}
  .share-label{width:100%}
}

/* ---------- جزئیات کوچک ------------------------------------------ */
.download-name{flex:1}
.ts-footer__col{min-width:0}


/* ---------- مرز زیر سربرگ صفحه: خط گرادیانی، نه بلوک تیره -------- */
.ts-phead::after{
  content:"";position:absolute;inset-block-end:-1px;inset-inline:0;height:3px;
  background:var(--edge-glow);opacity:.9;
}
/* بدنه صفحه — گذار نرم از سربرگ روشن به زمینه */
.ts-pbody{background:var(--c-bg)}

/* =================================================================
   بخش دیدگاه ها (views/partials/comments.php)
   ⚠ هیچ کدام از این کلاس ها در قالب استایل نداشتند و بخش نظرات
     کاملا خام رندر می شد. آیکون های داخل این فایل هم svg خام و
     بدون width/height هستند؛ بدون قانون زیر تا عرض کل ستون
     بزرگ می شوند (همان حباب مشکی غول پیکر).
   ================================================================= */

/* --- تور ایمنی: هیچ svg بدون اندازه نباید بزرگ شود --- */
.ts-article svg:not([width]):not(.ts-ic),
.ts-comments svg:not([width]):not(.ts-ic),
.comments-wrapper svg:not([width]){
  width:1.1em;height:1.1em;flex:none;fill:currentColor;vertical-align:-.16em;
}

.comments-wrapper{margin-top:2.4em}
.comments-title{
  display:flex;align-items:center;gap:10px;font-size:1.25rem;margin:0 0 .8em;
  padding-inline-start:14px;border-inline-start:5px solid var(--c-signal);color:var(--c-ink);
}
.comments-title-icon{width:22px !important;height:22px !important;fill:var(--c-signal)}
.comments-empty{
  background:var(--c-bg);border:1px dashed var(--c-line-2);padding:16px 18px;
  color:var(--c-muted);margin:0 0 1.6em;
}

.comments-list{display:grid;gap:14px;margin-bottom:2em}
.comment{
  display:flex;gap:14px;background:var(--c-surface);border:1px solid var(--c-line);
  border-inline-start:4px solid var(--c-line-2);padding:16px 18px;
}
.comment-avatar{
  display:grid;place-items:center;width:44px;height:44px;flex:none;border-radius:50%;
  background:var(--c-bg-2);color:var(--c-ink);font-weight:800;font-size:1.05rem;
}
.comment-avatar-admin{background:var(--c-ink);color:var(--c-signal)}
.comment-avatar-admin svg{width:20px !important;height:20px !important;fill:var(--c-signal)}
.comment-main{min-width:0;flex:1}
.comment-header{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:.4em}
.comment-author{color:var(--c-ink);font-size:.98rem}
.comment-date{color:var(--c-muted);font-size:.82rem;font-family:var(--ts-mono)}
.comment-body{color:var(--c-txt);font-size:.95rem;line-height:1.9}
.comment-body p{margin:0 0 .6em}
.comment-badge{
  background:var(--c-signal);color:var(--c-ink);font-size:.75rem;font-weight:800;
  padding:2px 10px;border-radius:99px;
}
.comment-reply{
  margin-top:14px;margin-inline-start:28px;background:var(--c-bg);
  border-inline-start:4px solid var(--c-signal);
}

/* --- فرم دیدگاه --- */
.comment-form-wrapper{
  background:var(--c-bg);border:1px solid var(--c-line);
  border-block-start:4px solid var(--c-signal);padding:24px;
}
.comment-form-title{font-size:1.1rem;margin:0 0 .3em;color:var(--c-ink)}
.comment-form-note{color:var(--c-muted);font-size:.88rem;margin:0 0 1.2em}
.comment-form{display:grid;gap:14px}
.comment-form .form-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.comment-form .form-field{display:grid;gap:6px;min-width:0}
.comment-form label{font-weight:700;font-size:.9rem;color:var(--c-ink)}
.comment-form .req{color:var(--c-oxide);margin-inline-start:3px}
.comment-form input,
.comment-form textarea{
  width:100%;min-height:46px;padding:11px 13px;border:1px solid var(--c-line-2);
  border-radius:var(--ts-radius);font:inherit;font-size:.95rem;background:#fff;color:var(--c-txt);
}
.comment-form textarea{min-height:120px;resize:vertical;line-height:1.9}
.comment-form input:focus,
.comment-form textarea:focus{border-color:var(--c-ink);outline:2px solid rgba(255,200,0,.45)}
.comment-captcha-field{max-width:320px}
.form-submit-btn{
  justify-self:start;min-height:48px;padding:12px 30px;border:0;border-radius:var(--ts-radius);
  background:var(--c-signal);color:var(--c-ink);font:inherit;font-weight:800;cursor:pointer;
}
.form-submit-btn:hover{background:var(--c-ink);color:var(--c-signal)}
.form-submit-btn[disabled]{opacity:.6;cursor:default}
.form-message{padding:12px 16px;border-radius:var(--ts-radius);font-weight:700;font-size:.92rem}
.form-message.ok,.form-message.success{background:#e6f4ea;border:1px solid #b6dfc3;color:#14602f}
.form-message.err,.form-message.error{background:#fdecea;border:1px solid #f2c2b8;color:#8a2f18}

@media (max-width:640px){
  .comment-form .form-row{grid-template-columns:1fr}
  .comment{padding:14px;gap:10px}
  .comment-avatar{width:38px;height:38px;font-size:.95rem}
  .comment-reply{margin-inline-start:12px}
  .comment-form-wrapper{padding:18px 16px}
}

/* ---------- تکمله های ریز که در بازبینی کامل سایت پیدا شد -------- */

/* رنگ برند هر شبکه روی هاور */
.share-btn.share-telegram:hover{background:#229ED9;border-color:#229ED9}
.share-btn.share-whatsapp:hover{background:#1EA952;border-color:#1EA952}
.share-btn.share-linkedin:hover{background:#0A66C2;border-color:#0A66C2}
.share-btn.share-x:hover{background:#000;border-color:#000}
.share-btn.share-eitaa:hover{background:#D96C10;border-color:#D96C10}
.share-btn.share-copy:hover{background:var(--c-signal);border-color:var(--c-signal);color:var(--c-ink)}

/* بخش مطالب مرتبط — از بدنه صفحه جدا شود */
.ts-related{background:var(--c-bg-2);border-block-start:1px solid var(--c-line);margin-top:44px}
.ts-comments{margin-top:0}

/* جدول های قدیمی محتوا که کلاس خودشان را دارند */
.ts-article table.jadval5,
.ts-article table.comparison-table{width:100%}

/* برچسب دکمه شناور تماس روی صفحه های خیلی باریک */
@media (max-width:380px){
  .ts-callfab__t{display:none}
  .ts-callfab{padding:14px;border-radius:50%}
}

/* اسکرول افقی فقط برای جدول، نه کل صفحه */
.ts-article{overflow-x:hidden}

/* ---------- نقشه گوگل (صفحه اول و تماس با ما) -------------------- */
.ts-map{margin-top:22px;border:1px solid var(--c-line);background:var(--c-surface)}
.ts-map__head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:12px 16px;border-block-end:1px solid var(--c-line);
  border-inline-start:4px solid var(--c-signal);background:var(--c-bg);
}
.ts-map__t{display:inline-flex;align-items:center;gap:8px;font-weight:800;color:var(--c-ink);font-size:.95rem}
.ts-map__t .ts-ic{color:var(--c-oxide)}
.ts-map__dir{
  display:inline-flex;align-items:center;gap:6px;font-weight:800;font-size:.88rem;
  color:var(--c-oxide);white-space:nowrap;
}
html[dir=rtl] .ts-map__dir .ts-ic{transform:scaleX(-1)}
.ts-map__frame{position:relative;width:100%;aspect-ratio:16/9;min-height:240px;background:var(--c-bg-2)}
.ts-map__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.ts-map__note{
  display:flex;align-items:flex-start;gap:8px;margin:0;padding:11px 16px;
  border-block-start:1px solid var(--c-line);color:var(--c-muted);font-size:.87rem;
}
.ts-map__note .ts-ic{color:var(--c-oxide);margin-top:.4em}
@media (max-width:640px){
  .ts-map__frame{aspect-ratio:4/3;min-height:220px}
}