/*
 * Mobile Lite
 * Loaded after the main stylesheet. These rules keep the existing visual
 * language while removing expensive paint, animation and nested-scroll work
 * from compact and touch-first devices.
 */

@media (max-width: 920px), (pointer: coarse) {
  html.mobile-lite-mode,
  html.mobile-lite-mode body,
  body.mobile-lite-mode,
  html.mobile-lite-mode #root {
    --mobile-bg-start: var(--appearance-global-background, #071426);
    --mobile-bg-mid: var(--appearance-global-background, #071426);
    --mobile-bg-end: var(--appearance-global-background, #071426);
    --mobile-surface: var(--appearance-global-surface, #0b1b30);
    --mobile-surface-strong: var(--appearance-global-surface-alt, #132a46);
    --mobile-border: var(--appearance-global-border, #29415f);
    --mobile-accent: var(--appearance-global-primary, #f59e0b);
    --mobile-accent-soft: transparent;
    --mobile-red-soft: transparent;
    --mobile-accent-border: var(--appearance-global-border, #29415f);
    width: 100%;
    max-width: 100%;
    min-height: 100%;
    overflow-x: clip;
    scroll-behavior: auto !important;
    background-color: var(--mobile-bg-start);
    background-image: none;
    background-attachment: scroll !important;
    font-family: var(--font-ui, 'Tajawal', system-ui, -apple-system, sans-serif) !important;
  }

  html.dark.mobile-lite-mode .landing-page-root {
    background-color: var(--appearance-landing-background, var(--mobile-bg-start)) !important;
    background-image: none !important;
  }

  html.mobile-lite-mode:not(.dark) .landing-page-root {
    background-color: var(--appearance-landing-background, var(--mobile-bg-start)) !important;
    background-image: none !important;
    background-attachment: scroll !important;
  }

  html.dark.mobile-lite-mode .landing-page-root header {
    background: rgba(16, 26, 52, 0.94) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: 1px solid rgba(245, 158, 11, 0.12) !important;
  }

  html.mobile-lite-mode:not(.dark) .landing-page-root header {
    background: rgba(255, 255, 255, 0.94) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: 1px solid rgba(124, 58, 237, 0.12) !important;
  }

  html.mobile-lite-mode .landing-page-root section {
    background: transparent !important;
  }

  html.mobile-lite-mode *,
  html.mobile-lite-mode *::before,
  html.mobile-lite-mode *::after {
    animation: none !important;
    animation-delay: 0s !important;
    /* Allow interactive transitions for tactile feedback */
    scroll-behavior: auto !important;
    text-shadow: none !important;
    will-change: auto !important;
  }

  html.mobile-lite-mode :where(
    button,
    a,
    input,
    select,
    textarea,
    .mobile-sidebar-link,
    .mobile-sidebar-extra-button,
    .app-toast-banner,
    .app-toast-panel,
    .landing-page-root a,
    .landing-page-root button,
    .landing-page-root article,
    [class*="hover:"],
    [class*="group-hover:"]
  ) {
    transition-property: color, background-color, border-color, opacity !important;
    transition-duration: 120ms !important;
    transition-timing-function: ease-out !important;
  }

  html.mobile-lite-mode .learning-card-shell .flip-card {
    transition-property: transform !important;
    transition-duration: 420ms !important;
    transition-timing-function: cubic-bezier(0.2, 0.82, 0.2, 1) !important;
    will-change: transform !important;
  }

  html.mobile-lite-mode .review-session-overlay .flip-card-inner {
    transition-property: transform !important;
    transition-duration: 420ms !important;
    transition-timing-function: cubic-bezier(0.2, 0.82, 0.2, 1) !important;
    will-change: transform !important;
  }

  html.mobile-lite-mode .learning-card-shell :where(.backface-hidden, .learning-card-front, .learning-card-cover) {
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
  }

  html.mobile-lite-mode :where(
    .backdrop-blur,
    .backdrop-blur-sm,
    .backdrop-blur-md,
    .backdrop-blur-lg,
    .backdrop-blur-xl,
    .backdrop-blur-2xl,
    .backdrop-blur-3xl
  ) {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  html.mobile-lite-mode :where(
    .blur-xl,
    .blur-2xl,
    .blur-3xl,
    .blur-\[60px\],
    .blur-\[80px\],
    .blur-\[100px\],
    .blur-\[120px\],
    .blur-\[140px\]
  ) {
    filter: none !important;
  }

  html.mobile-lite-mode :where(
    .theme-visuals,
    .video-grain,
    .video-scanlines,
    .mobile-scroll-decor,
    .mobile-texture-layer,
    .landing-heavy-paint,
    .notifications-hero-sheen,
    .mobile-sidebar-profile-glow
  ) {
    display: none !important;
  }

  html.mobile-lite-mode :where(
    .mix-blend-normal,
    .mix-blend-multiply,
    .mix-blend-screen,
    .mix-blend-overlay,
    .mix-blend-darken,
    .mix-blend-lighten,
    .mix-blend-color-dodge,
    .mix-blend-color-burn,
    .mix-blend-hard-light,
    .mix-blend-soft-light,
    .mix-blend-difference,
    .mix-blend-exclusion,
    .mix-blend-hue,
    .mix-blend-saturation,
    .mix-blend-color,
    .mix-blend-luminosity
  ) {
    mix-blend-mode: normal !important;
  }

  html.mobile-lite-mode :where(
    .shadow-lg,
    .shadow-xl,
    .shadow-2xl
  ) {
    box-shadow: 0 1px 0 rgba(148, 163, 184, 0.14) !important;
  }

  html.mobile-lite-mode :where(
    .hover\:-translate-y-1,
    .hover\:-translate-y-2,
    .hover\:-translate-y-3,
    .hover\:scale-105,
    .hover\:scale-110
  ):hover,
  html.mobile-lite-mode :where(
    .hover\:-translate-y-1,
    .hover\:-translate-y-2,
    .hover\:-translate-y-3,
    .hover\:scale-105,
    .hover\:scale-110
  ):active,
  html.mobile-lite-mode :where(
    .group-hover\:-translate-y-1,
    .group-hover\:-translate-y-2,
    .group-hover\:scale-105,
    .group-hover\:scale-110,
    .group-hover\:rotate-180
  ) {
    transform: none !important;
  }

  html.mobile-lite-mode .group:hover :where(
    .group-hover\:-translate-y-1,
    .group-hover\:-translate-y-2,
    .group-hover\:scale-105,
    .group-hover\:scale-110,
    .group-hover\:rotate-180
  ) {
    transform: none !important;
  }

  html.mobile-lite-mode .app-shell {
    min-height: 100svh;
    background-color: var(--appearance-global-background, var(--mobile-bg-start)) !important;
    background-image: none !important;
  }

  html.mobile-lite-mode .app-content-shell,
  html.mobile-lite-mode .app-main-content,
  html.mobile-lite-mode .app-route-frame,
  html.mobile-lite-mode .mobile-page-lite {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: clip !important;
    isolation: auto !important;
    background: transparent !important;
  }

  html.mobile-lite-mode .app-mobile-header {
    min-height: 4rem;
    box-shadow: none !important;
  }

  html.mobile-lite-mode .mobile-page-lite :where(
    .landing-heavy-paint,
    .mobile-scroll-decor,
    .mobile-texture-layer,
    .video-grain,
    .video-scanlines
  ) {
    background-image: none !important;
  }


  html.mobile-lite-mode .mobile-page-lite :where(
    section,
    article,
    header,
    footer,
    nav,
    aside,
    form
  ) {
    background-attachment: scroll !important;
  }

  html.mobile-lite-mode .mobile-page-lite :where(img, video, canvas) {
    max-width: 100%;
  }

  html.mobile-lite-mode .mobile-page-lite :where(button, a, input, select, textarea) {
    touch-action: manipulation;
  }

  html.mobile-lite-mode .learning-path-load-more,
  html.mobile-lite-mode .mobile-list-load-more {
    width: 100%;
    min-height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    margin-top: 1rem;
    padding: 0.7rem 1rem;
    border: 1px solid var(--appearance-current-border, var(--mobile-border));
    border-radius: 0.9rem;
    background: var(--appearance-current-surface, var(--mobile-surface));
    color: var(--appearance-current-text, var(--mobile-text));
    font-size: 0.86rem;
    font-weight: 800;
    box-shadow: none !important;
  }

  html.mobile-lite-mode .learning-path-load-more {
    max-width: 42rem;
    margin: 1rem auto 0;
  }

  html.mobile-lite-mode .learning-path-load-more span {
    color: var(--appearance-current-muted-text, var(--mobile-muted));
    font-size: 0.72rem;
    direction: ltr;
  }

  html.mobile-lite-mode .mobile-list-load-more {
    max-width: 42rem;
    margin-inline: auto;
  }

  html.mobile-lite-mode .mobile-list-load-more span {
    color: var(--appearance-current-muted-text, var(--mobile-muted));
    font-size: 0.72rem;
    direction: ltr;
  }

  /* Sidebar performance only. appearance.css owns every theme colour. */
  html.mobile-lite-mode .mobile-sidebar-backdrop {
    background: rgba(6, 12, 24, 0.58) !important;
  }

  html.mobile-lite-mode .mobile-sidebar-shell {
    width: min(88vw, 20rem) !important;
    height: 100dvh !important;
    min-height: 100svh !important;
    max-height: 100dvh !important;
    background-image: none !important;
    box-shadow: none !important;
    contain: none !important;
    isolation: auto !important;
  }

  html.mobile-lite-mode .mobile-sidebar-header,
  html.mobile-lite-mode .mobile-sidebar-bottom {
    background-image: none !important;
  }

  html.mobile-lite-mode .mobile-sidebar-content {
    -webkit-overflow-scrolling: auto !important;
  }

  html.mobile-lite-mode .mobile-sidebar-language,
  html.mobile-lite-mode .mobile-sidebar-extra-button {
    box-shadow: none !important;
  }

  html.mobile-lite-mode .mobile-sidebar-link {
    box-shadow: none !important;
  }

  html.mobile-lite-mode .mobile-sidebar-link:hover,
  html.mobile-lite-mode .mobile-sidebar-link:focus-visible {
    background-image: none !important;
    box-shadow: none !important;
  }

  html.mobile-lite-mode .logout-dialog-overlay,
  html.mobile-lite-mode .app-toast-modal {
    background: rgba(6, 12, 24, 0.68) !important;
  }

  html.mobile-lite-mode .logout-dialog-backdrop,
  html.mobile-lite-mode .app-toast-backdrop {
    background: transparent !important;
  }

  html.mobile-lite-mode .logout-dialog-card,
  html.mobile-lite-mode .app-toast-panel {
    background: var(--mobile-surface) !important;
    background-image: none !important;
    border-color: var(--mobile-border) !important;
    box-shadow: none !important;
  }

  html.mobile-lite-mode .app-toast-banner {
    top: max(0.75rem, env(safe-area-inset-top)) !important;
    left: 0 !important;
    width: 100% !important;
    max-width: none !important;
    padding-inline: 0.75rem;
    transform: none !important;
  }

  html.mobile-lite-mode .app-toast-banner .app-toast-panel {
    width: 100%;
    max-width: 28rem;
    gap: 0.75rem !important;
    padding: 0.85rem 1rem !important;
    border-radius: 1rem !important;
  }

  /* Optimize Review Session Summary Page on Mobile */
  html.mobile-lite-mode .review-summary-overlay {
    background-color: var(--appearance-current-background, var(--mobile-bg-start)) !important;
    background-image: none !important;
    color: var(--appearance-current-text, var(--mobile-text)) !important;
    box-shadow: none !important;
  }

  html.mobile-lite-mode .review-summary-stat {
    transition: none !important;
    transform: none !important;
    box-shadow: none !important;
  }

  html.mobile-lite-mode .review-summary-actions button {
    transition: none !important;
    transform: none !important;
    box-shadow: none !important;
  }

  html.mobile-lite-mode .review-card-media-image {
    object-fit: cover !important;
    border-radius: 1rem !important;
  }

  /* Reduce massive border-radii on mobile to prevent nested GPU clipping/rendering glitches */
  html.mobile-lite-mode [class*="rounded-[3.5rem]"] {
    border-radius: 1.25rem !important;
  }
  html.mobile-lite-mode [class*="rounded-[3rem]"] {
    border-radius: 1rem !important;
  }
  html.mobile-lite-mode [class*="rounded-[2.5rem]"] {
    border-radius: 1rem !important;
  }
  html.mobile-lite-mode [class*="rounded-[2rem]"] {
    border-radius: 0.85rem !important;
  }

}

@media (max-width: 920px) and (prefers-reduced-motion: reduce),
       (pointer: coarse) and (prefers-reduced-motion: reduce) {
  html.mobile-lite-mode {
    scroll-behavior: auto !important;
  }
}

/* ── تلوين بانر المراجعة وبانر الاشتراك بألوان جذابة ومضيئة على الهواتف ── */
/* ── بانر الاشتراك: light mode أولاً ── */
/* ── بانر الاشتراك: dark mode يأتي بعد light ليتغلب عليه ── */
/* ── توسيط أيقونة نافذة تسجيل الخروج على الهواتف ── */
html.mobile-lite-mode .logout-dialog-content {
    padding: 1.5rem 1.5rem !important;
    padding-top: 6.5rem !important;
    position: relative !important;
}

html.mobile-lite-mode .logout-dialog-icon-wrap {
    position: absolute !important;
    top: 1.5rem !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 4rem !important;
    margin: 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    -webkit-transform: none !important;
    transform: none !important;
}

html.mobile-lite-mode .logout-dialog-icon {
    width: 4rem !important;
    height: 4rem !important;
    border-width: 2px !important;
    border-radius: 9999px !important;
    border-color: rgba(239, 68, 68, 0.28) !important;
    background: rgba(239, 68, 68, 0.12) !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ── أنماط الأسئلة الشائعة (FAQ) على الهواتف ── */
/* الوضع الداكن على الهواتف */