/* mm-single-comment-form/assets/css/frontend.css */

.mm-scf,
.mm-scf *{
  box-sizing: border-box !important;
}

.mm-scf{
  direction: rtl !important;
}

/* ============ FORM ============ */
.mm-scf__form{
  width: 100% !important;
}

/* ردیف نام و ایمیل */
.mm-scf__row{
  display: flex !important;
  gap: 12px !important;            /* فاصله بین دو فیلد */
  align-items: flex-start !important;
  margin-bottom: 12px !important;
}

/* کنترل های ورودی */
.mm-scf__control{
  position: relative !important;
  width: 416px !important;
  height: 52px !important;
}

/* ورودی‌ها */
.mm-scf__input{
  width: 416px !important;
  height: 52px !important;
  border: none !important;
  outline: none !important;
  background: #F0F0F0 !important;
  border-radius: 8px !important;

  font-family: yekanbakh !important;
  font-weight: 500 !important;
  font-style: normal !important;
  font-size: 18px !important;
  text-align: right !important;
  color: #808080 !important;

  padding: 0 14px !important;
  line-height: 52px !important;
}

/* placeholder واقعی را پنهان می‌کنیم */
.mm-scf__input::placeholder{
  color: transparent !important;
}

/* ستاره‌های HTML را مخفی می‌کنیم تا فقط ستاره CSS دیده شود */
.mm-scf__star{
  display: none !important;
}

/* placeholder نمایشی (ستاره جلو نوشته) */
.mm-scf__fakeph{
  position: absolute !important;
  top: 50% !important;
  right: 14px !important;
  transform: translateY(-50%) !important;

  display: inline-block !important;
  pointer-events: none !important;
  user-select: none !important;

  padding-right: 16px !important; /* جا برای ستاره */
}

.mm-scf__fakeph::before{
  content: "*" !important;
  position: absolute !important;
  right: 0 !important;
  top: 0 !important;
  color: #FF0000 !important;
  font-size: 18px !important;
  line-height: 1 !important;
}

.mm-scf__fakephText{
  font-family: yekanbakh !important;
  font-weight: 500 !important;
  font-style: normal !important;
  font-size: 18px !important;
  color: #808080 !important;
  text-align: right !important;
  white-space: nowrap !important;
}

/* وقتی کاربر تایپ کرد یا فوکوس شد، placeholder نمایشی محو شود */
.mm-scf__input:focus + .mm-scf__fakeph{
  opacity: 0 !important;
}
.mm-scf__input:not(:placeholder-shown) + .mm-scf__fakeph{
  opacity: 0 !important;
}

/* ============ TEXTAREA ============ */
.mm-scf__textareaWrap{
  position: relative !important;
  width: 844px !important;
  max-width: 100% !important;
}

.mm-scf__textarea{
  width: 844px !important;
  max-width: 100% !important;

  min-height: 188px !important;   /* ارتفاع ابتدایی */
  height: 188px !important;       /* با JS بر اساس متن بلندتر می‌شود */
  overflow: hidden !important;     /* برای auto-grow */
  resize: none !important;

  border: none !important;
  outline: none !important;
  background: #F0F0F0 !important;
  border-radius: 8px !important;

  font-family: yekanbakh !important;
  font-weight: 500 !important;
  font-style: normal !important;
  font-size: 18px !important;
  text-align: right !important;
  color: #808080 !important;

  padding: 14px 14px 66px 14px !important; /* فضای دکمه روی تکست‌اریا */
  line-height: 1.9 !important;
}

/* placeholder واقعی تکست‌اریا را پنهان می‌کنیم */
.mm-scf__textarea::placeholder{
  color: transparent !important;
}

/* placeholder نمایشی تکست‌اریا */
.mm-scf__fakeph--textarea{
  position: absolute !important;
  top: 18px !important;
  right: 14px !important;
  transform: none !important;

  padding-right: 16px !important; /* جا برای ستاره */
}

.mm-scf__fakeph--textarea::before{
  content: "*" !important;
  position: absolute !important;
  right: 0 !important;
  top: 2px !important;
  color: #FF0000 !important;
  font-size: 18px !important;
  line-height: 1 !important;
}

/* محو شدن placeholder نمایشی تکست‌اریا */
.mm-scf__textarea:focus ~ .mm-scf__fakeph--textarea{
  opacity: 0 !important;
}
.mm-scf__textarea:not(:placeholder-shown) ~ .mm-scf__fakeph--textarea{
  opacity: 0 !important;
}

/* ============ SUBMIT BUTTON (bg + btn) ============ */
/* بک سفید پشت دکمه */
.mm-scf__submitBg{
  position: absolute !important;
  left: 0 !important;
  bottom: 5px !important;          /* 5px بالاتر از قبل */

  width: 136px !important;
  height: 52px !important;
  background: #FFFFFF !important;
  opacity: 1 !important;

  /* برعکسِ قبل: دکمه سمت راست بک سفید، فضای خالی سمت چپ مشخص */
  padding-right: 12px !important;
  padding-left: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;

  border-radius: 0 !important;     /* گردی بک سفید = 0 */
}

/* خود دکمه */
/* خود دکمه */
.mm-scf__submit{
  width: 124px !important;
  height: 44px !important;

  opacity: 1 !important;

  padding-top: 10px !important;
  padding-right: 24px !important;
  padding-bottom: 10px !important;
  padding-left: 24px !important;

  /* gap روی button فقط وقتی اثر داره که flex باشه */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;

  border: none !important;
  outline: none !important;

  border-bottom-left-radius: 8px !important;

  /* اگر می‌خوای فقط همین گوشه گرد باشه: */
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;

  background: #242037 !important;
  color: #FFFFFF !important;

  font-family: yekanbakh !important;
  font-weight: 500 !important;
  font-style: normal !important;
  font-size: 18px !important;

  cursor: pointer !important;

  /* angle: 0deg => بدون چرخش */
  transform: rotate(0deg) !important;
}


.mm-scf__submit:hover{
  opacity: 0.95 !important;
}

/* نوت */
.mm-scf-note{
  padding: 10px 12px !important;
  background: #F0F0F0 !important;
  border-radius: 8px !important;
  border: none !important;

  font-family: yekانbakh !important;
  font-weight: 500 !important;
  font-size: 18px !important;
  color: #808080 !important;

  direction: rtl !important;
}

/* ریسپانسیو (فقط تطبیق عرض) */
@media (max-width: 980px){
  .mm-scf__textareaWrap{ width: 100% !important; }
  .mm-scf__textarea{ width: 100% !important; }
  .mm-scf__row{ flex-direction: column !important; }
  .mm-scf__control,
  .mm-scf__input{ width: 100% !important; }
}
.mm-scf__notice{
  margin-top: 12px !important;
  font-family: yekanbakh !important;
  font-weight: 500 !important;
  font-size: 16px !important;
  text-align: right !important;
  color: #808080 !important;
}

.mm-scf__notice.is-ok{
  color: #242037 !important;
}

.mm-scf__notice.is-err{
  color: #D20000 !important;
}