/* ============================================================
   DISIPHEE — مرکز راهنما

   چیدمان از یک اصل ساده می‌آید: کاربری که اینجا می‌آید سؤال
   دارد، نه حوصله. پس جستجو اولین چیزی است که می‌بیند و
   دسته‌ها بلافاصله زیر آن، به‌شکل کارت — نه فهرست بلند.

   وقتی کاربر شروع به جستجو کند، همه‌ی بخش‌های مرور کردن
   (دسته‌ها، محبوب‌ها، مسیرها) کنار می‌روند تا فقط نتیجه بماند.

   یادداشت برند: بدون گرادیان، بدون درخشش، بدون سایه.
   ============================================================ */

.help, .help *{ box-sizing:border-box; }

.dzf-sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ============================================================
   هرو و جستجو
   ============================================================ */
.help-hero{
  background:var(--bg);
  border-bottom:1px solid var(--stroke);
  padding:var(--dzf-space-xxl) var(--dzf-gutter);
  text-align:center;
}
.help-hero__inner{ max-width:720px; margin:0 auto; }
.help-hero h1{
  margin:0 0 12px;
  font-size:clamp(1.7rem, 3.8vw, 2.5rem);
  font-weight:800; line-height:1.5; color:var(--primary);
}
.help-hero p{
  margin:0 auto var(--dzf-space-lg); max-width:52ch;
  font-size:15.5px; line-height:2; color:var(--dzf-muted-2);
}

.dzf-faq-search{
  position:relative; display:flex; align-items:center;
  background:var(--white);
  border:1px solid var(--stroke); border-radius:999px;
  padding:0 10px;
}
.dzf-faq-search:focus-within{ border-color:var(--primary); }
.dzf-faq-search__ico{
  width:20px; height:20px; flex-shrink:0; margin:0 10px;
  color:var(--dzf-muted-3);
}
.dzf-faq-search input{
  flex:1; min-width:0;
  border:0; outline:0; background:transparent;
  font-family:var(--dzf-font); font-size:15px; color:var(--primary);
  padding:16px 4px;
}
.dzf-faq-search input::placeholder{ color:var(--dzf-muted-3); }
.dzf-faq-search input::-webkit-search-cancel-button{ -webkit-appearance:none; appearance:none; }
.dzf-faq-search__clear{
  display:none; align-items:center; justify-content:center;
  width:32px; height:32px; flex-shrink:0;
  border:0; border-radius:999px; background:var(--bg);
  color:var(--dzf-muted); cursor:pointer;
}
.dzf-faq-search__clear svg{ width:14px; height:14px; }
.dzf-faq-search.has-value .dzf-faq-search__clear{ display:flex; }

.help-hints{
  display:flex; flex-wrap:wrap; justify-content:center; gap:8px;
  margin:var(--dzf-space-md) 0 0; padding:0; list-style:none;
}
.help-hint{
  padding:7px 15px; border-radius:999px;
  border:1px solid var(--stroke); background:var(--white);
  font-family:var(--dzf-font); font-size:12px; font-weight:600;
  color:var(--dzf-muted); cursor:pointer; unicode-bidi:plaintext;
  transition:background-color .2s ease, border-color .2s ease, color .2s ease;
}
.help-hint:hover, .help-hint.is-on{
  background:var(--accent); border-color:var(--accent); color:var(--primary);
}

.dzf-faq-count{
  margin:var(--dzf-space-md) 0 0;
  font-size:13px; font-weight:600; color:var(--dzf-muted);
}
.dzf-faq-count[hidden]{ display:none; }

/* ============================================================
   بدنه
   ============================================================ */
.help-body{ background:var(--white); padding:var(--dzf-space-xxl) var(--dzf-gutter); }
.help-body__inner{ max-width:var(--dzf-container); margin:0 auto; }

.help-sec + .help-sec{ margin-top:var(--dzf-space-xxl); }
.help-sec[hidden]{ display:none; }
.help-sec__head{ margin-bottom:var(--dzf-space-lg); }
.help-sec__head[hidden]{ display:none; }
.help-sec__head h2{
  margin:0; font-size:clamp(1.25rem, 2.4vw, 1.6rem);
  font-weight:800; line-height:1.5; color:var(--primary);
}
.help-sec__n{
  display:block; margin-top:6px;
  font-size:13.5px; line-height:1.9; color:var(--dzf-muted-2);
}

/* ---------- کارت دسته‌ها ---------- */
.help-cats{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap:var(--dzf-space-sm); margin:0; padding:0; list-style:none;
}
.help-cat{
  display:flex; flex-direction:column; height:100%;
  border:1px solid var(--stroke); border-radius:20px;
  padding:var(--dzf-space-lg);
  transition:border-color .22s ease, transform .22s ease;
}
.help-cat:hover{ border-color:var(--primary); transform:translateY(-2px); }
.help-cat[hidden]{ display:none; }
.help-cat__ico{
  display:flex; align-items:center; justify-content:center;
  width:42px; height:42px; margin-bottom:14px;
  border-radius:14px; background:var(--bg); color:var(--primary);
  transition:background-color .22s ease;
}
.help-cat:hover .help-cat__ico{ background:var(--accent); }
.help-cat__ico svg{ width:20px; height:20px; }
.help-cat strong{ font-size:15.5px; font-weight:700; color:var(--primary); }
.help-cat__lead{
  display:block; margin-top:6px; flex:1;
  font-size:12.5px; line-height:1.9; color:var(--dzf-muted-2);
}
.help-cat em{
  display:inline-block; margin-top:14px; font-style:normal;
  font-size:12px; color:var(--dzf-muted-3);
}

/* کارت دسته هم‌زمان نقش «چیپ» جست‌وجو را دارد؛ وقتی موتور
   جست‌وجو آن را پنهان کند، خانه‌ی خالی نباید جا بگذارد. */
.help-cats li:has(.dzf-faqp__chip[hidden]){ display:none; }

/* ---------- سوالات محبوب ---------- */
.help-pop{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  gap:10px; margin:0; padding:0; list-style:none;
}
.help-pop a{
  display:block; height:100%;
  padding:var(--dzf-space-md); border-radius:16px;
  border:1px solid var(--stroke);
  transition:border-color .22s ease;
}
.help-pop a:hover{ border-color:var(--primary); }
.help-pop strong{
  display:block; font-size:14.5px; font-weight:700;
  line-height:1.7; color:var(--primary);
}
.help-pop span{
  display:block; margin-top:6px;
  font-size:12.5px; line-height:1.9; color:var(--dzf-muted-2);
}

/* ---------- مسیر کاربر ---------- */
.help-paths{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap:var(--dzf-space-sm);
}
.help-path{
  display:flex; flex-direction:column;
  border:1px solid var(--stroke); border-radius:20px;
  padding:var(--dzf-space-lg);
}
.help-path__ico{
  display:flex; align-items:center; justify-content:center;
  width:42px; height:42px; margin-bottom:14px;
  border-radius:14px; background:var(--accent); color:var(--primary);
}
.help-path__ico svg{ width:20px; height:20px; }
.help-path h3{
  margin:0 0 var(--dzf-space-sm);
  font-size:15.5px; font-weight:700; line-height:1.6; color:var(--primary);
}
.help-path ul{ margin:0 0 var(--dzf-space-md); padding:0; list-style:none; flex:1; }
.help-path li + li{ margin-top:8px; }
.help-path li a{
  display:block; padding-inline-start:16px; position:relative;
  font-size:13px; line-height:1.9; color:var(--dzf-muted);
  transition:color .2s ease;
}
.help-path li a::before{
  content:""; position:absolute; inset-inline-start:0; top:12px;
  width:6px; height:6px; border-radius:999px; background:var(--accent);
}
.help-path li a:hover{ color:var(--primary); }
.help-path__cta{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; font-weight:700; color:var(--primary);
}
.help-path__cta svg{ width:15px; height:15px; transition:transform .22s ease; }
.help-path__cta:hover svg{ transform:translateX(-4px); }

/* ============================================================
   گروه‌های سوال
   ============================================================ */
.help-all{ scroll-margin-top:100px; }

.dzf-faqp__groups{ display:flex; flex-direction:column; gap:var(--dzf-space-xl); }
.dzf-faqp__group[hidden]{ display:none; }
.dzf-faqp__group{ scroll-margin-top:100px; }

.dzf-faqp__head{
  display:flex; align-items:center; gap:14px;
  margin-bottom:var(--dzf-space-md);
  padding-bottom:var(--dzf-space-md);
  border-bottom:1px solid var(--stroke);
}
.dzf-faqp__ico{
  display:flex; align-items:center; justify-content:center;
  width:40px; height:40px; flex-shrink:0;
  border-radius:13px; background:var(--bg); color:var(--primary);
}
.dzf-faqp__ico svg{ width:19px; height:19px; }
.dzf-faqp__head h3{
  margin:0; font-size:1.1rem; font-weight:800; color:var(--primary);
}
.dzf-faqp__en{
  display:block; font-size:11px; color:var(--dzf-muted-3); unicode-bidi:plaintext;
}

.dzf-faqp__list{ display:flex; flex-direction:column; gap:8px; }
.dzf-faqp__item{
  border:1px solid var(--stroke); border-radius:16px;
  padding:0 var(--dzf-space-md);
  transition:border-color .22s ease;
}
.dzf-faqp__item[hidden]{ display:none; }
.dzf-faqp__item[open]{ border-color:var(--primary); }
.dzf-faqp__item summary{
  display:flex; align-items:center; gap:14px;
  padding:var(--dzf-space-md) 0; cursor:pointer; list-style:none;
  font-size:14.5px; font-weight:700; line-height:1.7; color:var(--primary);
}
.dzf-faqp__item summary::-webkit-details-marker{ display:none; }
.dzf-faqp__item summary span{ flex:1; }
/* علامت باز/بسته — دو خط، بدون آیکون اضافه */
.dzf-faqp__item summary i{
  position:relative; width:15px; height:15px; flex-shrink:0;
}
.dzf-faqp__item summary i::before,
.dzf-faqp__item summary i::after{
  content:""; position:absolute; inset-inline-start:0; top:6.5px;
  width:15px; height:2px; border-radius:2px; background:var(--primary);
  transition:transform .22s ease;
}
.dzf-faqp__item summary i::after{ transform:rotate(90deg); }
.dzf-faqp__item[open] summary i::after{ transform:rotate(0); }

.dzf-faqp__answer{ padding:0 0 var(--dzf-space-md); }
.dzf-faqp__answer p{
  margin:0; font-size:14px; line-height:2.1; color:var(--dzf-muted-2);
}
.dzf-faqp__next{
  display:inline-flex; align-items:center; gap:8px;
  margin-top:var(--dzf-space-md);
  padding:9px 18px; border-radius:999px;
  background:var(--accent);
  font-size:12.5px; font-weight:700; color:var(--primary);
}
.dzf-faqp__next svg{ width:14px; height:14px; transition:transform .22s ease; }
.dzf-faqp__next:hover svg{ transform:translateX(-4px); }

/* هایلایت نتیجه‌ی جستجو */
.dzf-faq-hl{
  background:var(--accent); color:var(--primary);
  border-radius:4px; padding:0 2px;
}

/* حالت خالی */
.dzf-faq-empty{
  text-align:center; padding:var(--dzf-space-xl) var(--dzf-space-md);
  border:1px dashed var(--stroke); border-radius:20px;
}
.dzf-faq-empty[hidden]{ display:none; }
.dzf-faq-empty svg{ width:36px; height:36px; color:var(--dzf-muted-3); }
.dzf-faq-empty h3{
  margin:var(--dzf-space-sm) 0 8px;
  font-size:1.05rem; font-weight:800; color:var(--primary);
}
.dzf-faq-empty p{
  margin:0 auto var(--dzf-space-md); max-width:44ch;
  font-size:14px; line-height:2; color:var(--dzf-muted-2);
}

/* ============================================================
   پشتیبانی
   ============================================================ */
.help-support{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap:var(--dzf-space-sm);
}
.help-support__card{
  display:flex; flex-direction:column; align-items:flex-start;
  border:1px solid var(--stroke); border-radius:20px;
  padding:var(--dzf-space-lg);
  transition:border-color .22s ease;
}
.help-support__card:hover{ border-color:var(--primary); }
.help-support__card > span{
  display:flex; align-items:center; justify-content:center;
  width:40px; height:40px; margin-bottom:12px;
  border-radius:13px; background:var(--bg); color:var(--primary);
}
.help-support__card svg{ width:19px; height:19px; }
.help-support__card strong{ font-size:15px; font-weight:700; color:var(--primary); }
.help-support__card em{
  margin-top:6px; font-style:normal;
  font-size:12.5px; line-height:1.9; color:var(--dzf-muted-2);
  unicode-bidi:plaintext;
}

/* ============================================================
   CTA
   ============================================================ */
.help-cta{
  background:var(--primary);
  padding:var(--dzf-space-xxl) var(--dzf-gutter);
  text-align:center;
}
.help-cta[hidden]{ display:none; }
.help-cta__inner{ max-width:640px; margin:0 auto; }
.help-cta h2{
  margin:0 0 12px; font-size:clamp(1.4rem, 3vw, 2rem);
  font-weight:800; line-height:1.5; color:var(--white);
}
.help-cta p{
  margin:0 auto var(--dzf-space-lg); max-width:48ch;
  font-size:15.5px; line-height:2; color:var(--bg); opacity:.74;
}
.help-cta__btns{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }

/* ============================================================
   واکنش‌گرایی
   ============================================================ */
@media (max-width:1024px){
  .help-cats, .help-paths, .help-support{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}

@media (max-width:640px){
  .help-cats, .help-paths, .help-support, .help-pop{ grid-template-columns:1fr; }
  .dzf-faq-search input{ padding:14px 4px; font-size:14px; }
}

@media (prefers-reduced-motion:reduce){
  .help-cat:hover{ transform:none; }
  .help-path__cta:hover svg,
  .dzf-faqp__next:hover svg{ transform:none; }
}
