/*!
 * interactive.css — استایلِ de-scope‌شده‌ی مودال «مشاهده دمو» و منوی موبایل (drawer).
 * این دو کامپوننت در نسخه‌ی Nuxt به‌صورت شرطی (v-if) رندر می‌شدند و CSSشان scoped
 * (data-v-*) بود؛ در سایت استاتیک به‌صورت پویا با JS ساخته می‌شوند، پس نسخه‌ی
 * بدون‌اسکوپِ همان قواعد اینجا آورده شده تا ظاهر دقیقاً یکسان بماند. کلاس‌ها با
 * پیشوندهای .dm__ و .mm__ فضای‌نام‌بندی شده‌اند و نشتی به بقیه‌ی سایت ندارند.
 */

/* ===================== مودال «مشاهده دمو» (DemoRequestModal) ===================== */
.dm, .dm * { box-sizing: border-box; }

.dm {
  position: fixed;
  inset: 0;
  z-index: var(--ns-z-drawer, 1100);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(10, 10, 14, 0.55);
  backdrop-filter: blur(6px);
}

.dm__panel {
  position: relative;
  width: 100%;
  max-width: 400px;
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
  padding: 24px;
  background: var(--ns-surface);
  border: 1px solid var(--ns-border);
  border-radius: var(--ns-radius-pill);
  box-shadow: var(--ns-shadow-hover);
  text-align: right;
}

.dm__close {
  position: absolute;
  inset-inline-start: 14px;
  inset-block-start: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: var(--ns-radius-full);
  background: var(--ns-hover);
  color: var(--ns-fg);
  cursor: pointer;
  touch-action: manipulation;
  transition: background var(--ns-transition);
}
.dm__close:hover { background: var(--ns-border); }
.dm__close svg { width: 16px; height: 16px; }

.dm__head { margin-bottom: 14px; }
.dm__head,
.dm__success { padding-inline-start: 40px; }
/* !important لازم است: قالب صفحه‌ی اصلی یک قانون سراسری h2 با !important دارد */
.dm__title {
  margin: 0;
  padding-top: 5px;
  font-size: 18px !important;
  font-weight: 700;
  color: var(--ns-fg);
  line-height: 1.4;
}
.dm__desc {
  margin: 0;
  font-size: 15px;
  line-height: 1.75;
  color: var(--ns-muted);
}

/* لیبل فقط برای صفحه‌خوان — چیدمان مینیمال با placeholder */
.dm__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.dm__form { display: flex; flex-direction: column; gap: 10px; }
.dm__field { display: flex; flex-direction: column; gap: 6px; }

.dm__input {
  width: 100%;
  padding: 12px 14px;
  font: inherit;
  /* دست‌کم 16px تا iOS هنگام فوکوس روی فیلد زوم نکند */
  font-size: 16px;
  color: var(--ns-fg);
  background: var(--ns-hover-2);
  border: 1px solid var(--ns-border);
  border-radius: var(--ns-radius-lg);
  outline: none;
  touch-action: manipulation;
  transition: border-color var(--ns-transition), box-shadow var(--ns-transition), background var(--ns-transition);
}
.dm__input::placeholder { color: var(--ns-muted); opacity: 0.85; }
.dm__input:focus {
  background: var(--ns-surface);
  border-color: var(--ns-accent);
  box-shadow: 0 0 0 3px var(--ns-accent-soft);
}
.dm__input.is-error {
  border-color: #e5484d;
  box-shadow: 0 0 0 3px rgba(229, 72, 77, 0.12);
}
.dm__input--tel { text-align: left; letter-spacing: 0.5px; }

.dm__select-wrap { position: relative; }
.dm__select {
  appearance: none;
  -webkit-appearance: none;
  padding-inline-start: 42px;
  cursor: pointer;
}
.dm__chev {
  position: absolute;
  inset-inline-start: 14px;
  inset-block-start: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  width: 18px;
  height: 18px;
  color: var(--ns-muted);
  pointer-events: none;
}
/* آیکن مشترک stroke-width: 0.5 دارد که در ابعاد ۱۸px تقریباً نامرئی است */
.dm__chev svg { width: 100%; height: 100%; stroke-width: 2; }

.dm__err { font-size: 12.5px; color: #e5484d; }
.dm__err--submit { margin-top: -4px; text-align: center; }

.dm__submit {
  margin-top: 6px;
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 7px;
  background: var(--ns-btn-bg);
  color: var(--ns-btn-fg);
  border: none;
  border-radius: var(--ns-radius-lg);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
  transition: opacity var(--ns-transition-slow);
}
.dm__submit:hover { opacity: 0.92; }
.dm__submit:disabled { opacity: 0.6; cursor: default; }
.dm__submit-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--ns-radius-md);
  background: var(--ns-btn-icon);
}
.dm__submit-icon svg { width: 20px; height: 20px; fill: currentColor; }
.dm__submit--ghost {
  background: var(--ns-hover);
  color: var(--ns-fg);
}

/* موبایل: فشرده‌تر تا همه‌ی فیلدها بدون اسکرول در قاب دیده شوند.
   نکته: از longhand استفاده شده تا شورت‌هندِ padding فضای مخصوصِ chevron روی سلکت را پاک نکند. */
@media (max-width: 480px) {
  .dm { padding: 12px; }
  .dm__panel { padding: 18px 16px; }
  .dm__head { margin-bottom: 12px; }
  .dm__form { gap: 8px; }
  .dm__input { padding-block: 11px; padding-inline: 13px; }
  .dm__select { padding-inline-start: 40px; }
}

.dm__success { text-align: center; padding: 8px 0; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.dm__success-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: var(--ns-radius-full);
  background: var(--ns-accent-soft);
  color: var(--ns-accent);
}
.dm__success-icon svg { width: 30px; height: 30px; }
.dm__success .dm__submit { max-width: 200px; margin-top: 8px; }

@media (prefers-reduced-motion: reduce) {
  .dm__input,
  .dm__close,
  .dm__submit { transition: none; }
}

/* ===================== منوی موبایل (MobileMenu drawer) ===================== */
.mm * { box-sizing: border-box; }
.mm a { text-decoration: none; }
.mm ul { list-style: none; margin: 0; padding: 0; }
.mm button { font: inherit; background: none; border: none; cursor: pointer; color: inherit; }

.mm__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 10, 0.45);
  backdrop-filter: blur(2px);
  z-index: var(--ns-z-drawer);
}

.mm__panel {
  position: fixed;
  inset-block: 0;
  right: 0;
  width: min(360px, 88vw);
  background: var(--ns-surface);
  color: var(--ns-fg);
  z-index: calc(var(--ns-z-drawer) + 1);
  display: flex;
  flex-direction: column;
  box-shadow: -20px 0 60px rgba(15, 23, 42, 0.18);
  border-top-left-radius: var(--ns-radius-pill);
  border-bottom-left-radius: var(--ns-radius-pill);
}

.mm__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid var(--ns-border);
}
.mm__logo img { display: block; width: 40px; height: 40px; object-fit: contain; }
.mm__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: var(--ns-radius-full);
  background: var(--ns-hover);
  transition: background var(--ns-transition);
}
.mm__close:hover { background: var(--ns-border); }
.mm__close svg { width: 20px; height: 20px; }

.mm__body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 12px;
}

.mm__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 14px;
  border-radius: var(--ns-radius-md);
  font-size: 17px;
  font-weight: 500;
  color: var(--ns-fg);
  transition: background var(--ns-transition);
}
.mm__link:hover { background: var(--ns-hover); }

.mm__foot {
  padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--ns-border);
}
.mm__cta {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  width: 100%;
  padding-block: 6px;
  padding-inline-start: 6px;
  padding-inline-end: 24px;
  border-radius: var(--ns-radius-lg);
  background: var(--ns-btn-bg);
  color: var(--ns-btn-fg);
  font-size: 16px;
  font-weight: 600;
  transition: opacity var(--ns-transition);
}
.mm__cta:hover { opacity: 0.9; }
.mm__cta:hover .mm__cta-icon { background: var(--ns-btn-icon-hover); }
.mm__cta-icon {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--ns-radius-md);
  background: var(--ns-btn-icon);
  transition: background var(--ns-transition-slow), transform var(--ns-transition-slow);
}
.mm__cta-icon svg { width: 22px; height: 22px; }
.mm__cta-text { position: relative; z-index: 1; transition: transform var(--ns-transition-slow); }

@media (prefers-reduced-motion: reduce) {
  .mm__cta-icon,
  .mm__cta-text { transition: none; }
}