/**
 * فریم موبایل idx2 روی دسکتاپ — مشابه app/idx3 (.device)
 * روی عرض ≤480px فریم برداشته می‌شود (تمام‌صفحه).
 *
 * نکته: اسکرول روی .page-content است نه #page تا منوهای translateشده
 * (زبان/سایدبار) اسکرول‌پورت را نکشند و «باز» دیده نشوند.
 */
:root {
  --idx2-app-w: 402px;
}

@media (min-width: 481px) {
  html {
    height: 100%;
    overflow: hidden !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }

  html::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  body.theme-light,
  body.theme-dark,
  body.app-auth-body {
    box-sizing: border-box !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    min-height: 100dvh !important;
    height: 100% !important;
    max-height: 100dvh !important;
    padding: clamp(0.75rem, 2vw, 1.75rem) !important;
    overflow: hidden !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }

  body.theme-light::-webkit-scrollbar,
  body.theme-dark::-webkit-scrollbar,
  body.app-auth-body::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  body.theme-light:not(.app-auth-body) {
    background:
      radial-gradient(900px 520px at 10% -15%, #c8ddd5 0%, transparent 55%),
      radial-gradient(720px 420px at 100% 0%, #d5e2dc 0%, transparent 50%),
      linear-gradient(168deg, #d9e5e0 0%, #eef3f1 48%, #d0ddd7 100%) !important;
  }

  body.theme-dark:not(.app-auth-body) {
    background:
      radial-gradient(circle at 18% 8%, rgba(2, 123, 188, 0.22), transparent 28rem),
      radial-gradient(circle at 92% 18%, rgba(59, 130, 246, 0.18), transparent 30rem),
      linear-gradient(145deg, #020617 0%, #06162f 46%, #020617 100%) !important;
  }

  #page,
  body.app-auth-body #page.app-auth-page,
  #page:has(.app-course-detail-page),
  #page:has(.app-instructor-detail-page) {
    width: min(100%, var(--idx2-app-w)) !important;
    height: min(874px, calc(100dvh - 1.5rem)) !important;
    max-height: calc(100dvh - 1.5rem) !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    border-radius: 44px !important;
    overflow: hidden !important;
    position: relative !important;
    flex: 0 0 auto;
    display: flex !important;
    flex-direction: column !important;
    /* fixed header/footer/menus را داخل فریم نگه می‌دارد */
    transform: translateZ(0);
    isolation: isolate !important;
    box-shadow:
      0 0 0 1px rgba(7, 20, 18, 0.1),
      0 0 0 8px rgba(255, 255, 255, 0.35),
      0 40px 100px rgba(8, 30, 26, 0.24) !important;
  }

  body.theme-dark #page,
  body.theme-dark.app-auth-body #page.app-auth-page {
    box-shadow:
      0 0 0 1px rgba(125, 211, 252, 0.22),
      0 0 0 8px rgba(2, 8, 23, 0.55),
      0 40px 100px rgba(2, 8, 23, 0.55) !important;
  }

  /* اسکرول محتوا — مثل .scroll در idx3 */
  #page > .page-content,
  #page > .page-content:has(.app-student-hero) {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }

  #page > .page-content::-webkit-scrollbar,
  #page > .page-content *::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  #page > .page-content *,
  #page > .app-course-detail-hero-band,
  #page > .app-instructor-detail-hero-band {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }

  #page > .app-course-detail-hero-band,
  #page > .app-instructor-detail-hero-band {
    flex: 0 0 auto !important;
  }

  #page > .page-title,
  #page > .page-title-clear {
    flex: 0 0 auto;
  }

  /* صفحات دوره/مدرس: ارتفاع بر اساس ویوپورت دسکتاپ را خنثی کن */
  #page .page-content.app-course-detail-page,
  #page .page-content.app-instructor-detail-page,
  #page:has(.app-course-detail-page) .card.card-full,
  #page:has(.app-course-detail-page) .app-course-detail-sheet,
  #page:has(.app-instructor-detail-page) .card.card-full {
    min-height: 0 !important;
  }

  /* لبهٔ شیشه‌ای فریم */
  #page::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
    z-index: 10050;
  }

  body.theme-dark #page::after {
    box-shadow: inset 0 0 0 1px rgba(125, 211, 252, 0.2);
  }

  /* هدر/فوتر نسبت به فریم */
  #page > .header,
  #page #footer-bar,
  #page > .page-title.page-title-fixed {
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    max-width: none !important;
  }

  /* هدر شناور پورتال — inset داخل فریم نه 100vw دسکتاپ */
  #page > .header.header-fixed {
    left: 12px !important;
    right: 12px !important;
    max-width: none !important;
  }

  #page:has(.app-course-detail-page) > .header.header-fixed,
  #page:has(.app-instructor-detail-page) > .header.header-fixed {
    left: 0 !important;
    right: 0 !important;
  }

  #page #footer-bar,
  #page #footer-bar.footer-bar-6 {
    left: 12px !important;
    right: 12px !important;
    bottom: max(12px, env(safe-area-inset-bottom, 0px)) !important;
    max-width: none !important;
  }

  /* منوها فقط به اندازهٔ فریم — نه 100dvh دسکتاپ */
  #page #menu-main.menu,
  #page #menu-main.app-portal-sidebar.menu,
  #page #menu-main.app-portal-sidebar--simple.menu,
  #page .menu.menu-box-left,
  #page .menu.menu-box-right {
    top: 0 !important;
    bottom: 0 !important;
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    max-width: 100% !important;
  }

  #page .menu.menu-box-bottom,
  #page .menu.menu-box-top,
  #page .menu.menu-box-modal,
  #page #menu-language.menu {
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    max-width: 100% !important;
    max-height: min(72%, 100%) !important;
  }

  /* منوی بسته دیده نشود (جلوگیری از peek شیت زبان/سایدبار) */
  #page .menu:not(.menu-active) {
    visibility: hidden !important;
    pointer-events: none !important;
  }

  #page .menu.menu-active {
    visibility: visible !important;
    pointer-events: auto !important;
  }

  #page .menu.menu-box-right:not(.menu-active) {
    transform: translate3d(110%, 0, 0) !important;
  }

  html[dir="ltr"] #page .menu.menu-box-right:not(.menu-active),
  html[dir="ltr"] #page #menu-main.menu:not(.menu-active) {
    transform: translate3d(-110%, 0, 0) !important;
  }

  #page .menu.menu-box-left:not(.menu-active) {
    transform: translate3d(-110%, 0, 0) !important;
  }

  #page .menu.menu-box-bottom:not(.menu-active),
  #page .menu.menu-box-top:not(.menu-active) {
    transform: translate3d(0, 120%, 0) !important;
  }

  /* menu-hider داخل فریم (اگر JS آن را به #page منتقل کرده باشد) */
  #page > .menu-hider {
    position: absolute !important;
    inset: 0 !important;
    width: auto !important;
    height: auto !important;
    border-radius: inherit;
  }
}

@media (max-width: 480px) {
  #page,
  body.app-auth-body #page.app-auth-page {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none;
    overflow: visible !important;
    display: block !important;
  }

  #page::after {
    content: none !important;
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #page > .page-content {
    scroll-behavior: auto;
  }
}