/* ===================================================================
   صفحه‌های اطلاعاتی: درباره ما، تماس با ما، قوانین و مقررات، حریم خصوصی، کپی‌رایت
   (روی css/base.css و css/site.css سوار می‌شه تا رنگ‌ها، فونت و لوگو با بقیه‌ی سایت یکی باشه)
=================================================================== */

.page-top{
  position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding-block:22px 10px;
}
.page-main{ position:relative; z-index:2; padding-block:18px 56px; }
.page-top-links{ display:flex; align-items:center; gap:8px; }

.doc{
  max-width:780px; margin-inline:auto; padding:clamp(22px, 4.5vw, 48px);
  border-radius:var(--r-xl); background:var(--panel); border:1px solid var(--line);
}
.doc-kicker{ font-size:13px; color:var(--text-dimmer); margin-bottom:10px; }
.doc h1{ font-size:clamp(26px, 3.6vw, 38px); font-weight:900; line-height:1.4; margin-bottom:14px; text-wrap:balance; }
.doc .lead{ font-size:16px; line-height:2.1; color:var(--text-dim); }
.doc h2{
  font-size:18.5px; font-weight:800; line-height:1.6; margin-top:34px; padding-top:24px; margin-bottom:10px;
  border-top:1px solid var(--line); scroll-margin-top:24px;
}
.doc h3{ font-size:15.5px; font-weight:800; margin:18px 0 6px; }
.doc p, .doc li{ font-size:15px; line-height:2.1; color:var(--text-dim); }
.doc p + p{ margin-top:10px; }
.doc ul, .doc ol{ padding-inline-start:24px; margin:8px 0; display:grid; gap:6px; }
.doc ul{ list-style:disc; }
.doc ol{ list-style:persian; }
.doc li::marker{ color:var(--accent); }
.doc strong{ color:var(--text); font-weight:800; }
.doc a{ color:var(--accent); text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:1px; }
.doc a:hover{ text-decoration-thickness:2px; }
.ltr{ direction:ltr; unicode-bidi:isolate; display:inline-block; }

/* فهرست بخش‌ها در بالای قوانین */
.toc{
  margin-top:22px; padding:16px 18px; border-radius:var(--r-md);
  background:var(--fill); border:1px solid var(--line);
}
.toc b{ display:block; font-size:13px; color:var(--text-dimmer); margin-bottom:6px; }
.toc ol{ margin:0; gap:2px; }
.toc li{ font-size:14px; line-height:1.9; }
.toc a{ text-decoration:none; color:var(--text-dim); }
.toc a:hover{ color:var(--accent); text-decoration:underline; }

/* کارت‌های راه‌های تماس */
.contact-cards{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:12px; margin-top:24px; }
.contact-card{
  display:grid; gap:6px; padding:18px; border-radius:var(--r-md);
  background:var(--fill); border:1px solid var(--line);
}
.contact-card .cc-label{ display:flex; align-items:center; gap:8px; font-size:13px; font-weight:700; color:var(--text-dimmer); }
.contact-card .cc-label svg{ color:var(--accent); flex-shrink:0; }
.contact-card .cc-value{ font-size:16px; font-weight:800; color:var(--text); overflow-wrap:anywhere; }
.contact-card a.cc-value{ text-decoration:none; }
.contact-card a.cc-value:hover{ color:var(--accent); }

.note{
  margin-top:18px; padding:14px 16px; border-radius:var(--r-md);
  background:var(--accent-soft); border:1px solid var(--accent-line); font-size:14px; line-height:2; color:var(--text);
}

/* دکمه‌ی وسطِ متن (مثلاً «ثبت‌نام و خرید» توی /about)؛ رنگ و خط‌زیرِ لینک‌های .doc رو نگیره */
.doc-cta{ margin-top:18px; }
.doc a.btn{ text-decoration:none; color:var(--btn-fg); }
.doc a.btn-accent{ color:var(--accent-ink); }

/* جدولِ قیمت‌های /about (scripts/prerender.js از lib/pricing.js می‌نویسه). روی گوشی هر پلن یه کارت می‌شه
   و اسمِ هر مدت (data-label) کنارِ قیمتش میاد */
.price-table{ width:100%; border-collapse:collapse; margin-top:14px; }
.price-table th, .price-table td{ padding:12px 10px; text-align:right; border-bottom:1px solid var(--line); }
.price-table thead th{ font-size:13px; font-weight:700; color:var(--text-dimmer); }
.price-table tbody th{ font-size:14.5px; font-weight:800; color:var(--text); }
.price-table td{ font-size:14.5px; color:var(--text-dim); white-space:nowrap; }
.price-table tbody tr:last-child > *{ border-bottom:0; }
.doc .price-note{ margin-top:10px; font-size:13.5px; color:var(--text-dimmer); }
@media (max-width: 600px){
  .price-table thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
  .price-table, .price-table tbody, .price-table tr, .price-table th, .price-table td{ display:block; }
  .price-table tr{ padding:12px 14px; margin-top:10px; border-radius:var(--r-md); background:var(--fill); border:1px solid var(--line); }
  .price-table tbody th{ padding:0 0 6px; border:0; }
  .price-table td{ display:flex; justify-content:space-between; gap:12px; padding:4px 0; border:0; }
  .price-table td::before{ content:attr(data-label); color:var(--text-dimmer); }
}

/* سؤال‌های پرتکرارِ /about (scripts/prerender.js از lib/faq.js می‌نویسه) */
.faq-list{ display:grid; gap:10px; margin-top:14px; }
.faq-item{ border-radius:var(--r-md); background:var(--fill); border:1px solid var(--line); transition:border-color .3s, background-color .3s; }
.faq-item:hover{ border-color:var(--line-strong); }
.faq-item[open]{ border-color:var(--accent-line); background:var(--accent-tint); }
.faq-item summary{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 18px; cursor:pointer; list-style:none; border-radius:inherit; }
.faq-item summary::-webkit-details-marker{ display:none; }
.doc .faq-q{ margin:0; font-size:15px; font-weight:750; line-height:1.8; color:var(--text); }
.faq-icn{ flex-shrink:0; width:30px; height:30px; border-radius:50%; display:grid; place-items:center; color:var(--accent); background:var(--accent-soft); transition:rotate .3s var(--ease-out); }
.faq-item[open] .faq-icn{ rotate:180deg; }
.doc .faq-a{ padding:0 18px 16px; font-size:14.5px; line-height:2; }
@media (max-width: 420px){
  .faq-item summary{ padding:13px 14px; }
  .doc .faq-a{ padding:0 14px 14px; }
}
@media (prefers-reduced-motion: reduce){ .faq-icn{ transition:none; } }