/* ======================================================================
   CYMART VISUAL V16.19 — MOBILE BACKGROUND + NO-FLASH ROOT FIX
   Scope: mobile/tablet only. Desktop/PC final appearance is untouched.
   ====================================================================== */

@media (max-width: 991.98px) {

  /* ------------------------------------------------------------------
     1) Prevent FOUC / wrong-theme flash while late page CSS is parsing.
     The correct theme background is painted on <html> immediately;
     page content is revealed by the footer once the final stylesheet is on.
     ------------------------------------------------------------------ */
  html.cymart-boot-light,
  html.cymart-boot-dark {
    min-height:100% !important;
    background-repeat:no-repeat !important;
    background-size:cover !important;
    background-position:center top !important;
    background-attachment:scroll !important;
  }

  html.cymart-boot-light {
    background-color:#eef6ff !important;
    background-image:url('/templates/default/images/cymart-visual/light-mobile-v16-19.png?v=1619') !important;
  }

  html.cymart-boot-dark {
    background-color:#090b24 !important;
    background-image:url('/templates/default/images/cymart-visual/dark-mobile-v16-19.png?v=1619') !important;
  }

  html.cymart-mobile-boot body {
    opacity:0 !important;
  }

  html:not(.cymart-mobile-boot) body {
    opacity:1;
    transition:opacity .12s ease-out;
  }

  /* The stock pre-loader used a black 50% overlay. That was one source
     of the visible dark flash in light mode. Keep it theme-consistent. */
  html.cymart-boot-light .page-pre-loader,
  html body.cymart-theme-light .page-pre-loader {
    background:rgba(238,246,255,.12) !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(8,10,30,.18) !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }

  /* ------------------------------------------------------------------
     2) LIGHT MOBILE — preserve the approved light background exactly.
     Fresh versioned asset avoids stale browser/CDN background cache.
     ------------------------------------------------------------------ */
  html:has(body.cymart-theme-light) {
    background-color:#eef6ff !important;
    background-image:url('/templates/default/images/cymart-visual/light-mobile-v16-19.png?v=1619') !important;
    background-repeat:no-repeat !important;
    background-size:cover !important;
    background-position:center top !important;
  }

  html body.cymart-theme-light {
    background-color:#eef6ff !important;
    background-image:url('/templates/default/images/cymart-visual/light-mobile-v16-19.png?v=1619') !important;
    background-repeat:no-repeat !important;
    background-size:cover !important;
    background-position:center top !important;
    background-attachment:scroll !important;
  }

  /* ------------------------------------------------------------------
     3) DARK MOBILE — actual selected sunset/mountain artwork.
     A fixed background layer is used instead of relying only on body
     background, because legacy .bg-gray/page containers repaint navy.
     ------------------------------------------------------------------ */
  html:has(body.cymart-theme-dark) {
    background:#090b24 url('/templates/default/images/cymart-visual/dark-mobile-v16-19.png?v=1619') center center / cover no-repeat !important;
  }

  html body.cymart-theme-dark {
    position:relative !important;
    isolation:isolate !important;
    min-height:100vh !important;
    background:transparent !important;
    background-color:transparent !important;
    background-image:none !important;
  }

  /* Replace the old futuristic grid pseudo-background with the chosen art. */
  html body.cymart-theme-dark::before {
    content:"" !important;
    display:block !important;
    position:fixed !important;
    inset:0 !important;
    z-index:-1 !important;
    pointer-events:none !important;
    opacity:1 !important;
    background:
      linear-gradient(180deg,rgba(5,7,24,.10),rgba(6,8,27,.18)),
      url('/templates/default/images/cymart-visual/dark-mobile-v16-19.png?v=1619') center center / cover no-repeat !important;
    filter:none !important;
    mix-blend-mode:normal !important;
  }

  html body.cymart-theme-dark::after {
    content:none !important;
    display:none !important;
    background:none !important;
  }

  /* These are the legacy opaque canvases that were hiding the mountain art. */
  html body.cymart-theme-dark .bg-gray {
    background-color:#090b24 !important;
    background-image:
      linear-gradient(180deg,rgba(5,7,24,.08),rgba(6,8,27,.16)),
      url('/templates/default/images/cymart-visual/dark-mobile-v16-19.png?v=1619') !important;
    background-repeat:no-repeat !important;
    background-position:center center !important;
    background-size:cover !important;
  }

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

  html body.cymart-theme-dark .cymart-imei-page::before,
  html body.cymart-theme-dark .cymart-imei-page::after {
    content:none !important;
    display:none !important;
    opacity:0 !important;
    background:none !important;
  }

  /* Preserve the approved dark cards/panels; only the PAGE canvas becomes
     transparent so the sunset artwork is visible around them. */
  html body.cymart-theme-dark .cymart-imei-page .cymart-recharge-panel {
    background:linear-gradient(135deg,rgba(31,19,65,.76),rgba(42,21,62,.68)) !important;
    backdrop-filter:blur(10px) saturate(112%) !important;
    -webkit-backdrop-filter:blur(10px) saturate(112%) !important;
  }

  html body.cymart-theme-dark .cymart-imei-page .card-search {
    background:linear-gradient(135deg,rgba(5,17,43,.80),rgba(33,16,63,.74)) !important;
    border-color:rgba(65,174,255,.55) !important;
    backdrop-filter:blur(12px) saturate(112%) !important;
    -webkit-backdrop-filter:blur(12px) saturate(112%) !important;
  }

  html body.cymart-theme-dark .cymart-imei-page .card-product {
    background:linear-gradient(135deg,rgba(5,23,53,.78),rgba(30,15,64,.72)) !important;
    border-color:rgba(101,126,255,.38) !important;
    backdrop-filter:blur(10px) saturate(110%) !important;
    -webkit-backdrop-filter:blur(10px) saturate(110%) !important;
  }
}

@media (max-width: 767.98px) {
  html.cymart-boot-dark,
  html:has(body.cymart-theme-dark) {
    background-position:center center !important;
  }
}