/* =========================================================
   tbs-fixes.css — اصلاحات موبایل
   باید آخرین استایل‌شیت لود شده باشد (بعد از tehranbosch.css).
   نام فایل جدید است تا کش یک‌هفته‌ای .htaccess را دور بزند
   و بازدیدکننده‌های قدیمی هم بلافاصله اصلاح را بگیرند.
   ========================================================= */

/* ---------------------------------------------------------
   ۱) ریشه باگ «در موبایل صفحه چپ و راست می‌شود»

   در tehranbosch.css خط ۳۰۰۷، منوی کشویی موبایل در حالت بسته
   این‌طور تعریف شده:

     @media (max-width: 960px){
       body.tbs-site .hdr-nav{
         position: fixed !important;
         width: min(320px, 88vw) !important;
         transform: translateX(100%) !important;
         visibility: visible !important;   ← مشکل اینجاست
         pointer-events: none;
       }
     }

   یعنی پنل ۳۲۰ پیکسلی منو در همهٔ صفحات موبایل «رندر شده و قابل
   دیدن» است و فقط با transform بیرون از لبهٔ راست پارک شده.
   چون pointer-events:none دارد قابل لمس نیست، ولی همچنان نقاشی
   می‌شود.

   و در کل پروژه هیچ overflow-x روی html یا body تعریف نشده
   (برخلاف نسخه‌های دیگر همین CMS). یک عنصر position:fixed که از
   لبهٔ ویوپورت بیرون زده، در سافاری موبایل و بسیاری از مرورگرهای
   اندروید باعث می‌شود کل صفحه با انگشت چپ و راست کشیده شود —
   دقیقاً همان چیزی که مشتری گزارش کرده.

   اندازه‌گیری واقعی در مرورگر (ویوپورت ۳۲۰ پیکسل):
     پنل منو در x = ۳۲۰ تا ۶۰۲  یعنی ۲۸۲ پیکسل بیرون از لبهٔ راست
     visibility = visible ، display = flex ، بدون هیچ کلیپی

   درمان دو لایه است: هم منبع (منو در حالت بسته نباید رندر شود)
   هم شبکهٔ ایمنی (ویوپورت اصلاً افقی کشیده نشود).
   --------------------------------------------------------- */

/* لایهٔ ۱ — شبکهٔ ایمنی.
   clip به‌جای hidden: چون hidden باعث می‌شود body یک ظرف اسکرول
   شود (overflow-y به auto تبدیل می‌شود) و position:sticky را خراب
   می‌کند. clip هیچ ظرف اسکرولی نمی‌سازد و قابل کشیدن هم نیست. */
html,
body {
  overflow-x: clip;
}

/* لایهٔ ۲ — منبع باگ: منوی بسته نباید رندر شود.
   تأخیر ۰.۳۲ ثانیه‌ای روی visibility باعث می‌شود انیمیشن بسته‌شدن
   (لغزش به بیرون) کامل دیده شود و بعد پنل از رندر خارج شود. */
@media (max-width: 960px) {
  body.tbs-site .hdr-nav {
    visibility: hidden !important;
    transition: transform .32s cubic-bezier(.4, 0, .2, 1),
                visibility 0s linear .32s !important;
  }
  body.tbs-site .hdr-nav.open {
    visibility: visible !important;
    transition: transform .32s cubic-bezier(.4, 0, .2, 1),
                visibility 0s linear 0s !important;
  }
}

/* ---------------------------------------------------------
   ۲) دکمهٔ نوار CTA فوتر از لبهٔ صفحه بیرون می‌زد

   .tbs-cta-band-btn هم white-space:nowrap دارد و هم min-width
   پیش‌فرض flex (auto)، پس زیر عرض متنش جمع نمی‌شود.
   اندازه‌گیری در ویوپورت ۳۲۰: عرض دکمه ۲۸۹px داخل ظرف ۲۴۰px،
   لبهٔ چپش روی x = -۹ یعنی بیرون از صفحه.
   بعد از اصلاح: ۲۴۰px و دقیقاً داخل ظرف.
   --------------------------------------------------------- */
@media (max-width: 520px) {
  .tbs-cta-band-actions {
    width: 100%;
  }
  .tbs-cta-band-btn,
  .tbs-cta-band-phone {
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    padding-left: 14px;
    padding-right: 14px;
    text-align: center;
  }
}

/* ---------------------------------------------------------
   ۳) کپچای فرم دیدگاه در موبایل باریک

   .captcha2-equation با flex:1 تعریف شده ولی min-width پیش‌فرض
   flex برابر auto است، پس زیر عرض محتوایش (دو عدد + دو عملگر +
   یک input[type=number] که عرض پیش‌فرض نسبتاً زیادی دارد) جمع
   نمی‌شود.

   صداقت در اندازه‌گیری: در تست من اعداد کپچا سه‌رقمی رندر شدند
   (محدودیت رندرِ ایستا)، پس عدد ۳۰۸px که دیدم از واقعیت بزرگ‌تر
   است. با اعداد یک‌رقمی واقعی سرریز کمتر ولی همچنان محتمل است.
   این قانون در هر حالت درست است و ریسکی ندارد.
   --------------------------------------------------------- */
.captcha2-row,
.captcha2-equation {
  min-width: 0;
  flex-wrap: wrap;
}
.captcha2-input {
  min-width: 0;
  flex: 1 1 60px;
}

/* =========================================================
   فرم درخواست تعمیر — حالت‌های اعتبارسنجی و موفقیت
   ========================================================= */

/* ستارهٔ فیلد الزامی */
.tbs-req {
  color: #e20015;
  margin-inline-start: 2px;
}

/* خطای زیر هر فیلد */
.tbs-field-err {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  line-height: 1.6;
  color: #d32020;
}
.tbs-field-err[hidden] { display: none; }

.tbs-field.has-err input,
.tbs-field.has-err textarea,
.tbs-field.has-err select {
  border-color: #d32020 !important;
  background: #fff6f6;
}
.tbs-field.has-err input:focus,
.tbs-field.has-err textarea:focus,
.tbs-field.has-err select:focus {
  outline: 2px solid rgba(211, 32, 32, .25);
  outline-offset: 1px;
}

/* حالت در حال ارسال */
.tbs-repair-form.is-sending {
  opacity: .75;
  pointer-events: none;
}
.tbs-submit:disabled {
  opacity: .8;
  cursor: progress;
}

/* پنل تأیید بعد از ارسال موفق */
.tbs-form-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  padding: 30px 20px;
}
.tbs-form-success[hidden] { display: none; }

.tbs-form-success-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 30px;
  line-height: 1;
  color: #fff;
  background: #16a34a;
  box-shadow: 0 8px 22px rgba(22, 163, 74, .32);
}
.tbs-form-success-text {
  margin: 0;
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.9;
}
.tbs-form-success-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  width: 100%;
}
.tbs-form-success-call,
.tbs-form-success-again {
  flex: 1 1 140px;
  min-width: 0;
  padding: 12px 16px;
  border-radius: 10px;
  font-weight: 800;
  font-size: 14px;
  text-align: center;
  cursor: pointer;
  border: 1px solid var(--tbs-border, #e2e6f0);
  background: #fff;
  color: inherit;
  text-decoration: none;
}
.tbs-form-success-call {
  background: #16a34a;
  border-color: #16a34a;
  color: #fff;
}

/* بدنهٔ مدال: جلوگیری از زنجیره شدن اسکرول به صفحهٔ پشت (موبایل) */
.tbs-modal-body {
  overscroll-behavior: contain;
}

/* ---------------------------------------------------------
   ۴) محافظ عمومی برای رشته‌های شکسته‌نشدنی
   شماره تلفن، ایمیل و URL کف عرض ایجاد می‌کنند و در ویوپورت‌های
   باریک باعث سرریز افقی می‌شوند.
   --------------------------------------------------------- */
.tbs-footer a[href^="tel:"],
.tbs-footer a[href^="mailto:"],
.tbs-footer address {
  overflow-wrap: anywhere;
}
