.weblabs-faq{
  --wfaq-bg:#f5f5f5;

  --wfaq-search-bg:#ffffff;
  --wfaq-search-color:#333333;
  --wfaq-search-placeholder:#999999;
  --wfaq-search-icon:#0f2b33;
  --wfaq-border:#d7dde0;
  --wfaq-search-focus:#0f2b33;

  --wfaq-tab-bg:#0f2b33;
  --wfaq-tab-text:#0f2b33;
  --wfaq-tab-active-bg:#c8a85a;
  --wfaq-tab-active-text:#ffffff;
  --wfaq-tab-hover-bg:#ffffff;
  --wfaq-tab-hover-text:#0f2b33;

  --wfaq-accent:#0a7b5f;

  --wfaq-q-bg:#f5f5f5;
  --wfaq-q-text:#0f2b33;
  --wfaq-answer-color:#555555;

  --wfaq-q-hover-bg:#e9ecef;
  --wfaq-q-hover-text:#0f2b33;
  --wfaq-icon-hover-bg:#0a7b5f;
  --wfaq-icon-hover-color:#ffffff;

  margin:0;
  padding:32px 0;
}

/* ---------- Hero ---------- */
.weblabs-faq__hero{
  background:var(--wfaq-bg);
  padding-top:32px;
  text-align:center;
  margin-bottom:24px;
}

.weblabs-faq__heading-title{
  margin:0 0 6px;
  font-size:24px;
  font-weight:700;
}

.weblabs-faq__heading-subtitle{
  margin:0 0 10px;
  font-size:14px;
}

.weblabs-faq__heading-desc{
  max-width:680px;
  margin:0 auto;
  font-size:13px;
  line-height:1.9;
}

/* ---------- Search ---------- */
.weblabs-faq__search{
  margin-top:18px;
  display:flex;
  justify-content:center;
}

.weblabs-faq__search-field{
  width:100%;
  max-width:420px;
  display:flex;
  align-items:center;
  background:var(--wfaq-search-bg);
  box-shadow:0 0 0 1px var(--wfaq-border) inset; /* شبیه کادر، بدون border واقعی */
  border-radius:4px;
  padding:0 12px;
}

.weblabs-faq__search-field:focus-within{
  box-shadow:0 0 0 1px var(--wfaq-search-focus) inset;
}

.weblabs-faq__search-input{
  flex:1 1 auto;
  height:40px;
  border:none;
  outline:none;
  background:transparent;
  font-size:13px;
  color:var(--wfaq-search-color);
}

.weblabs-faq__search-input::placeholder{
  color:var(--wfaq-search-placeholder);
}

.weblabs-faq__search-icon{
  border:none;
  background:none;
  padding:0;
  margin-left:4px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--wfaq-search-icon);
}

/* ---------- Tabs ---------- */
.weblabs-faq__filters{
  margin-top:22px;
  display:flex;
  justify-content:center;
  gap:6px;
  background:var(--wfaq-tab-bg);
  padding:4px;
}

.weblabs-faq__filter{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 14px;
  background:#ffffff;
  color:var(--wfaq-tab-text);
  font-size:13px;
  cursor:pointer;
  border:none;
  border-radius:0;
  white-space:nowrap;
}

.weblabs-faq__filter-badge{
  width:18px;
  height:18px;
  transform:rotate(45deg);
  background:transparent;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  color:#ffffff;
}

.weblabs-faq__filter-badge svg{
  width:12px;
  height:12px;
  transform:rotate(-45deg);
}

.weblabs-faq__filter-label{
  display:inline-block;
}

/* تب فعال */
.weblabs-faq__filter.is-active{
  background:var(--wfaq-tab-active-bg);
  color:var(--wfaq-tab-active-text);
}
.weblabs-faq__filter .weblabs-faq__filter-badge{
  display:none;
}
.weblabs-faq__filter.is-active .weblabs-faq__filter-badge{
  background:rgba(0,0,0,.12);
  display:flex;
}
button.weblabs-faq__filter:focus,
button.weblabs-faq__filter:hover{
  background: var(--wfaq-tab-active-bg)!important;
}

/* هاور تب عادی */
.weblabs-faq__filter:not(.is-active):hover{
  background:var(--wfaq-tab-hover-bg);
  color:var(--wfaq-tab-hover-text);
}

/* ---------- Body ---------- */
.weblabs-faq__body{
  max-width:960px;
  margin:0 auto;
}

/* ---------- Items ---------- */
.weblabs-faq__item{
  background:var(--wfaq-q-bg);
  margin-bottom:4px;
}

.weblabs-faq__item.is-hidden{
  display:none;
}

/* ✅ فیکس: لوزی بیرون نزنه، متن دو خطی بشه */
.weblabs-faq__question{
  width:100%;
  padding:12px 18px;
  display:flex;
  align-items:flex-start;        /* متن چندخطی، از بالا هم‌تراز */
  gap:10px;
  background:transparent;
  cursor:pointer;
  border:none;

  /* همون چینش قبلی حفظ میشه: لوزی سمت چپ */
  justify-content:space-between;
  flex-direction:row-reverse;

  /* مهم: اجازه wrap */
  flex-wrap:wrap;
  overflow:hidden;              /* جلوگیری از بیرون‌زدن */
}

/* لوزی همیشه ثابت بمونه */
.weblabs-faq__q-icon{
  width:22px;
  height:22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transform:rotate(45deg);
  background:var(--wfaq-accent);
  color:#ffffff;

  flex:0 0 22px;               /* ✅ جلوی کوچک شدن رو می‌گیره */
  margin-top:2px;              /* ✅ برای هم‌تراز شدن با خط اول متن */
}

.weblabs-faq__q-icon svg{
  width:12px;
  height:12px;
  transform:rotate(-45deg);
}

/* متن اجازه چندخطی داشته باشه و فضا رو درست پر کنه */
.weblabs-faq__q-text{
  font-size:14px;
  font-weight:500;
  color:var(--wfaq-q-text);

  /* ✅ چون space-between داریم، این باعث میشه متن جمع نشه */
  flex:1 1 calc(100% - 40px);
  min-width:0;
  white-space:normal;
  word-break:break-word;
  line-height:1.8;
}

/* سوال باز: متن سبز، لوزی طوسی و آیکن منفی */
.weblabs-faq__item.is-open .weblabs-faq__q-text{
  color:var(--wfaq-q-hover-text);
}

[type=button], [type=submit], button{
  border-radius:0;
}

.weblabs-faq__item.is-open .weblabs-faq__q-icon{
  background:#e0e0e0;
  color:var(--wfaq-accent);
}

/* تبدیل + به - : خط عمودی محو می‌شود */
.weblabs-faq__q-icon-line-v{
  transition:opacity .18s ease;
}
.weblabs-faq__item.is-open .weblabs-faq__q-icon-line-v{
  opacity:0;
}

/* هاور / فوکوس روی سوال (وقتی بسته است) */
.weblabs-faq__item:not(.is-open) .weblabs-faq__question:hover,
.weblabs-faq__item:not(.is-open) .weblabs-faq__question:focus-visible{
  background:var(--wfaq-q-hover-bg);
}

.weblabs-faq__item:not(.is-open) .weblabs-faq__question:hover .weblabs-faq__q-text,
.weblabs-faq__item:not(.is-open) .weblabs-faq__question:focus-visible .weblabs-faq__q-text{
  color:var(--wfaq-q-hover-text);
}

.weblabs-faq__item:not(.is-open) .weblabs-faq__question:hover .weblabs-faq__q-icon,
.weblabs-faq__item:not(.is-open) .weblabs-faq__question:focus-visible .weblabs-faq__q-icon{
  background:var(--wfaq-icon-hover-bg);
  color:var(--wfaq-icon-hover-color);
}

/* Answer with smooth accordion effect */
.weblabs-faq__answer{
  /* ✅ پدینگ تمیز برای باکس جواب */
  padding:0 18px 14px 18px;

  max-height:0;
  opacity:0;
  overflow:hidden;
  transform:translateY(-4px);
  transition:
    max-height 400ms ease,
    opacity    400ms ease,
    transform  400ms ease;
}

/* وقتی آیتم باز است */
.weblabs-faq__item.is-open .weblabs-faq__answer{
  max-height:600px; /* مقدار اصلی رو JS دقیق ست می‌کنه، این فقط fallbackه */
  background: var(--wfaq-accent);
  opacity:1;
  transform:translateY(0);
}

/* این خط رو دست نمی‌زنیم چون توی پروژه‌ات بهش تکیه داشتی */
input[type=date], input[type=email], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=url], select, textarea{
  border:0;
}

.weblabs-faq__item.is-open .weblabs-faq__question{
  background: var(--wfaq-accent);
  color:var(--wfaq-q-hover-text);
}

/* ✅ پدینگ داخل جواب (خود محتوا) */
.weblabs-faq__answer-inner{
  font-size:13px;
  line-height:1.9;
  color:var(--wfaq-answer-color);
  background:var(--wfaq-q-bg);

  padding:12px 14px; /* ✅ جدید */
}

.weblabs-faq__answer-inner p{
  margin:0 0 8px;
}
.weblabs-faq__answer-inner p:last-child{
  margin-bottom:0;
}

/* Empty */
.weblabs-faq__empty{
  text-align:center;
  font-size:13px;
}

/* ---------- Responsive ---------- */
@media (max-width:767px){
  .weblabs-faq__hero{
    padding:24px 16px 20px;
  }
  .weblabs-faq__filters{
    flex-wrap:wrap;
  }
  .weblabs-faq__body{
    padding:0 12px;
  }
}


/* Force RTL alignment for questions/answers (keep hero centered) */
.weblabs-faq__body,
.weblabs-faq__item,
.weblabs-faq__question,
.weblabs-faq__answer-inner{
  text-align: right;
}

/* برای اینکه متن سوال درست پهن بشه و وسط نیفته */
.weblabs-faq__q-text{
  text-align: right;
}

/* اگر قالب روی button متن رو center می‌کنه */
.weblabs-faq__question{
  justify-content: space-between;
}