/* فایل: custom-gf.css */

/* ساختار گرید سه‌ستونه */
#gform_2 #input_2_33 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75em;
  margin: 0;
  padding: 0;
}

/* تنظیم هر گزینه به صورت فلکس برای هم‌ردیفی باکس و متن */
#gform_2 #input_2_33 .gchoice {
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.25em 0;
}

/* مخفی کردن گزینه‌های بیشتر از 6 (در این مثال ۲ ردیف ۳ ستونه) */
#gform_2 #input_2_33 .gchoice:nth-child(n+7) {
  display: none;
}

/* وقتی کلاس show-all اضافه شد، همهٔ گزینه‌ها نمایش داده می‌شوند */
#gform_2 #input_2_33.show-all .gchoice {
  display: flex !important;
}

/* واکنش‌گرا: ۲ ستون در تبلت */
@media (max-width: 1024px) {
  #gform_2 #input_2_33 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* واکنش‌گرا: ۱ ستون در موبایل */
@media (max-width: 768px) {
  #gform_2 #input_2_33 {
    grid-template-columns: 1fr;
  }
}

/* دکمهٔ «نمایش موارد بیشتر / نمایش کمتر» */
.gf-show-more-btn {
  display: block;
  margin: 1em auto 0;
  padding: 0.5em 1em;
  background: #0073aa;
  color: #fff;
  border: none;
  border-radius: 3px;
  font-size: 1em;
  cursor: pointer;
  text-align: center;
}
.gf-show-more-btn:hover {
  background: #005177;
}

/* اختیاری: تغییر ظاهر چک‌باکس‌ها در صورت نیاز */
#gform_2 #input_2_33 .gfield-choice-input {
  width: auto;
  height: auto;
  margin: 0;
}