/* ======================================================================
   CYMART VISUAL V16.24 — MOBILE FINAL
   - Preserves V16.23 Unicode/Fluent emoji rendering.
   - Uses ONE fixed, non-repeating background layer in BOTH dark and light.
   - Removes legacy full-page canvases that can cover the selected artwork.
   - Mobile/tablet only (<= 991.98px). Desktop/PC remains untouched.
   - Emoji are Unicode text. No PNG/SVG emoji replacement is used.
   ====================================================================== */

@media (max-width: 991.98px) {

  /* ================================================================
     1) EMOJI — KEEP V16.23 BEHAVIOR
     ================================================================ */
  html body .cymart-imei-page .cymart-unicode-emoji,
  html body #modal-order .cymart-unicode-emoji {
    font-family:
      "Fluent Emoji Color",
      "Noto Color Emoji",
      "Apple Color Emoji",
      "Segoe UI Emoji",
      sans-serif !important;
    font-weight: 400 !important;
    font-style: normal !important;
    font-synthesis: none !important;
    font-variant-emoji: emoji;
    line-height: 1 !important;
    vertical-align: -0.08em !important;
  }

  html body .cymart-imei-page .title .cymart-unicode-emoji,
  html body .cymart-imei-page .searchme .cymart-unicode-emoji,
  html body .cymart-imei-page .text-muted .cymart-unicode-emoji {
    font-family:
      "Fluent Emoji Color",
      "Noto Color Emoji",
      "Apple Color Emoji",
      "Segoe UI Emoji",
      sans-serif !important;
  }

  /* ================================================================
     2) EARLY/BOOT CANVAS
     These rules also apply while cymart-mobile-boot is present, so the
     wrong legacy background cannot flash above the selected theme.
     ================================================================ */
  html.cymart-boot-dark,
  html:has(body.cymart-theme-dark) {
    min-height: 100% !important;
    background-color: #07091c !important;
    background-image: url('/templates/default/images/cymart-visual/dark-desktop.png?v=1624') !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: 70% center !important;
    background-attachment: fixed !important;
  }

  html.cymart-boot-light,
  html:has(body.cymart-theme-light) {
    min-height: 100% !important;
    background-color: #eef6ff !important;
    background-image: url('/templates/default/images/cymart-visual/light-mobile-v16-24.png?v=1624') !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: center center !important;
    background-attachment: fixed !important;
  }

  /* ================================================================
     3) BODY — NEVER PAINT A SECOND PAGE-SIZED BACKGROUND
     The selected artwork is painted by exactly one fixed pseudo-layer.
     ================================================================ */
  html body.cymart-theme-dark,
  html body.cymart-theme-light,
  html body.cymart-theme-dark.cymart-imei-active,
  html body.cymart-theme-light.cymart-imei-active,
  html body.cymart-theme-dark.cymart-imei-host,
  html body.cymart-theme-light.cymart-imei-host {
    position: relative !important;
    isolation: isolate !important;
    min-height: 100% !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
  }

  /* DARK — single fixed landscape layer */
  html body.cymart-theme-dark::before,
  html body.cymart-theme-dark.cymart-imei-active::before,
  html body.cymart-theme-dark.cymart-imei-host::before {
    content: "" !important;
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    pointer-events: none !important;
    z-index: -1 !important;
    opacity: 1 !important;
    filter: none !important;
    transform: translateZ(0) !important;
    background-color: #07091c !important;
    background-image: url('/templates/default/images/cymart-visual/dark-desktop.png?v=1624') !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: 70% center !important;
    background-attachment: scroll !important;
  }

  /* LIGHT — same architecture as dark: one fixed portrait layer.
     This is the key V16.24 change. It prevents the old white/blue
     canvas from sitting above the selected light artwork. */
  html body.cymart-theme-light::before,
  html body.cymart-theme-light.cymart-imei-active::before,
  html body.cymart-theme-light.cymart-imei-host::before {
    content: "" !important;
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    pointer-events: none !important;
    z-index: -1 !important;
    opacity: 1 !important;
    filter: none !important;
    transform: translateZ(0) !important;
    background-color: #eef6ff !important;
    background-image: url('/templates/default/images/cymart-visual/light-mobile-v16-24.png?v=1624') !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: center center !important;
    background-attachment: scroll !important;
  }

  /* ================================================================
     4) REMOVE LEGACY FULL-PAGE LAYERS IN BOTH THEMES
     Do NOT touch cards/forms themselves — only page-sized canvases.
     ================================================================ */
  html body.cymart-theme-dark .cymart-imei-page::before,
  html body.cymart-theme-dark .cymart-imei-page::after,
  html body.cymart-theme-light .cymart-imei-page::before,
  html body.cymart-theme-light .cymart-imei-page::after {
    content: none !important;
    display: none !important;
    background: none !important;
    background-image: none !important;
    opacity: 0 !important;
    filter: none !important;
  }

  html body.cymart-theme-dark > .bg-gray,
  html body.cymart-theme-light > .bg-gray,
  html body.cymart-theme-dark > .bg-gray > .min-height,
  html body.cymart-theme-light > .bg-gray > .min-height,
  html body.cymart-theme-dark > .bg-gray > .min-height > div,
  html body.cymart-theme-light > .bg-gray > .min-height > div,
  html body.cymart-theme-dark .min-height,
  html body.cymart-theme-light .min-height,
  html body.cymart-theme-dark .page-content,
  html body.cymart-theme-light .page-content,
  html body.cymart-theme-dark .main-content,
  html body.cymart-theme-light .main-content,
  html body.cymart-theme-dark .content,
  html body.cymart-theme-light .content,
  html body.cymart-theme-dark .page-login,
  html body.cymart-theme-light .page-login,
  html body.cymart-theme-dark .page-registration,
  html body.cymart-theme-light .page-registration,
  html body.cymart-theme-dark .cymart-imei-page,
  html body.cymart-theme-light .cymart-imei-page,
  html body.cymart-theme-dark .cymart-imei-page > .container,
  html body.cymart-theme-light .cymart-imei-page > .container,
  html body.cymart-theme-dark .cymart-imei-page .page-container,
  html body.cymart-theme-light .cymart-imei-page .page-container,
  html body.cymart-theme-dark .cymart-imei-page form#imeiorder_form,
  html body.cymart-theme-light .cymart-imei-page form#imeiorder_form,
  html body.cymart-theme-dark .cymart-imei-page #imeiorder_form > .h-100,
  html body.cymart-theme-light .cymart-imei-page #imeiorder_form > .h-100,
  html body.cymart-theme-dark .cymart-imei-page .service-list,
  html body.cymart-theme-light .cymart-imei-page .service-list,
  html body.cymart-theme-dark .cymart-imei-page .service-list-box,
  html body.cymart-theme-light .cymart-imei-page .service-list-box {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none;
  }

  /* ================================================================
     5) READABLE PANELS — retain the approved visual treatment
     ================================================================ */
  html body.cymart-theme-dark .cymart-imei-page .card-product {
    background: linear-gradient(135deg, rgba(5,23,53,.82), rgba(30,15,64,.76)) !important;
    backdrop-filter: blur(9px) saturate(110%) !important;
    -webkit-backdrop-filter: blur(9px) saturate(110%) !important;
  }

  html body.cymart-theme-dark .cymart-imei-page .card-search {
    background: linear-gradient(135deg, rgba(5,17,43,.83), rgba(33,16,63,.75)) !important;
    backdrop-filter: blur(10px) saturate(110%) !important;
    -webkit-backdrop-filter: blur(10px) saturate(110%) !important;
  }

  html body.cymart-theme-light .cymart-imei-page .card-product {
    background: rgba(255,255,255,.90) !important;
    backdrop-filter: blur(8px) saturate(105%) !important;
    -webkit-backdrop-filter: blur(8px) saturate(105%) !important;
  }

  html body.cymart-theme-light .cymart-imei-page .card-search {
    background: rgba(255,255,255,.92) !important;
    backdrop-filter: blur(9px) saturate(105%) !important;
    -webkit-backdrop-filter: blur(9px) saturate(105%) !important;
  }

  /* Preloader follows the selected theme and does not place an opaque
     layer above the artwork. */
  html.cymart-boot-light .page-pre-loader,
  html body.cymart-theme-light .page-pre-loader {
    background: rgba(238,246,255,.10) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  html.cymart-boot-dark .page-pre-loader,
  html body.cymart-theme-dark .page-pre-loader {
    background: rgba(7,9,28,.14) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

@media (max-width: 767.98px) {
  html body.cymart-theme-dark::before,
  html body.cymart-theme-dark.cymart-imei-active::before,
  html body.cymart-theme-dark.cymart-imei-host::before {
    background-position: 70% center !important;
  }

  html body.cymart-theme-light::before,
  html body.cymart-theme-light.cymart-imei-active::before,
  html body.cymart-theme-light.cymart-imei-host::before {
    background-position: center center !important;
  }
}