/* ======================================================================
   CYMART VISUAL V16.25 — BACKGROUND CLARITY + PERIMETER RAY
   Visual-only patch.
   - Restores the approved desktop/mobile artwork exactly, without a page-wide
     wash/blur layer.
   - Forces legacy full-page canvases to stay transparent on IMEI/order/dashboard
     pages so the artwork remains visible.
   - Uses lossless WebP copies of the approved PNG artwork (pixel-identical after
     decode) to reduce transfer size.
   - Replaces the detached moving rectangle with a true SVG border stroke whose
     dash follows every rounded corner of the recharge panel.
   - No bot, emoji, form, AJAX, session, order or payment logic is changed.
   ====================================================================== */

/* ----------------------------------------------------------------------
   1) APPROVED ARTWORK — ONE CLEAR FIXED LAYER
   ---------------------------------------------------------------------- */
html:has(body.cymart-theme-dark) {
  background:#07091c !important;
}
html:has(body.cymart-theme-light),
html:not(:has(body.cymart-theme-dark)) {
  background:#eef6ff !important;
}

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

/* The approved image is deliberately not dimmed, blurred or blended. */
html body.cymart-theme-dark::before,
html body.cymart-theme-light::before,
html body.cymart-theme-dark.cymart-imei-active::before,
html body.cymart-theme-light.cymart-imei-active::before,
html body.cymart-theme-dark.cymart-imei-host::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;
  z-index:-4 !important;
  pointer-events:none !important;
  opacity:1 !important;
  filter:none !important;
  mix-blend-mode:normal !important;
  transform:translateZ(0) !important;
  background-repeat:no-repeat !important;
  background-size:cover !important;
  background-attachment:scroll !important;
}

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-color:#07091c !important;
  background-image:url('/templates/default/images/cymart-visual/dark-desktop-v16-25.webp?v=1625') !important;
  background-position:center 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-color:#eef6ff !important;
  background-image:url('/templates/default/images/cymart-visual/light-desktop-v16-25.webp?v=1625') !important;
  background-position:center center !important;
}

/* Remove the global tint that was making the selected artwork look washed out. */
html body.cymart-theme-dark::after,
html body.cymart-theme-light::after,
html body.cymart-theme-dark.cymart-imei-active::after,
html body.cymart-theme-light.cymart-imei-active::after,
html body.cymart-theme-dark.cymart-imei-host::after,
html body.cymart-theme-light.cymart-imei-host::after {
  content:none !important;
  display:none !important;
  background:none !important;
  opacity:0 !important;
  filter:none !important;
}

/* ----------------------------------------------------------------------
   2) LEGACY PAGE CANVASES — NEVER COVER THE APPROVED IMAGE
   High specificity is intentional: old inline/header rules use
   body.cymart-*-active .bg-gray and otherwise win the cascade.
   ---------------------------------------------------------------------- */
html body.cymart-theme-dark.cymart-imei-active > .bg-gray,
html body.cymart-theme-light.cymart-imei-active > .bg-gray,
html body.cymart-theme-dark.cymart-orders-active > .bg-gray,
html body.cymart-theme-light.cymart-orders-active > .bg-gray,
html body.cymart-theme-dark.cymart-dashboard-active > .bg-gray,
html body.cymart-theme-light.cymart-dashboard-active > .bg-gray,
html body.cymart-theme-dark.cymart-imei-host > .bg-gray,
html body.cymart-theme-light.cymart-imei-host > .bg-gray,
html body.cymart-theme-dark.cymart-imei-active .bg-gray > .min-height,
html body.cymart-theme-light.cymart-imei-active .bg-gray > .min-height,
html body.cymart-theme-dark.cymart-orders-active .bg-gray > .min-height,
html body.cymart-theme-light.cymart-orders-active .bg-gray > .min-height,
html body.cymart-theme-dark.cymart-dashboard-active .bg-gray > .min-height,
html body.cymart-theme-light.cymart-dashboard-active .bg-gray > .min-height,
html body.cymart-theme-dark.cymart-imei-host .min-height,
html body.cymart-theme-light.cymart-imei-host .min-height,
html body.cymart-theme-dark.cymart-imei-host .cymart-imei-page,
html body.cymart-theme-light.cymart-imei-host .cymart-imei-page,
html body.cymart-theme-dark.cymart-imei-host .cymart-imei-page > .container,
html body.cymart-theme-light.cymart-imei-host .cymart-imei-page > .container,
html body.cymart-theme-dark.cymart-imei-host .cymart-imei-page .page-container,
html body.cymart-theme-light.cymart-imei-host .cymart-imei-page .page-container,
html body.cymart-theme-dark.cymart-imei-host .cymart-imei-page form#imeiorder_form,
html body.cymart-theme-light.cymart-imei-host .cymart-imei-page form#imeiorder_form,
html body.cymart-theme-dark.cymart-imei-host .cymart-imei-page #imeiorder_form > .h-100,
html body.cymart-theme-light.cymart-imei-host .cymart-imei-page #imeiorder_form > .h-100,
html body.cymart-theme-dark.cymart-imei-host .cymart-imei-page .service-list,
html body.cymart-theme-light.cymart-imei-host .cymart-imei-page .service-list,
html body.cymart-theme-dark.cymart-imei-host .cymart-imei-page .service-list-box,
html body.cymart-theme-light.cymart-imei-host .cymart-imei-page .service-list-box {
  background:transparent !important;
  background-color:transparent !important;
  background-image:none !important;
}

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

/* Keep cards readable, but avoid expensive/heavy blur on the main IMEI cards. */
html body.cymart-theme-light .cymart-imei-page .card-search,
html body.cymart-theme-light .cymart-imei-page .card-product {
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
html body.cymart-theme-dark .cymart-imei-page .card-search,
html body.cymart-theme-dark .cymart-imei-page .card-product {
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

/* ----------------------------------------------------------------------
   3) MOBILE/TABLET — USE THE APPROVED PORTRAIT ARTWORK, NOT DESKTOP CROP
   ---------------------------------------------------------------------- */
@media (max-width:991.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-image:url('/templates/default/images/cymart-visual/dark-mobile-v16-25.webp?v=1625') !important;
    background-position:center 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-image:url('/templates/default/images/cymart-visual/light-mobile-v16-25.webp?v=1625') !important;
    background-position:center center !important;
  }
}

/* ----------------------------------------------------------------------
   4) RECHARGE PANEL RAY — TRUE BORDER STROKE
   The old animateMotion runner was a wide rectangle. When it reached a corner
   it could rotate/scale outside the frame. V16.25 hides that runner and animates
   a dash ON the rounded rectangle itself, so the light physically follows the
   complete perimeter including all four corners.
   ---------------------------------------------------------------------- */
html body .cymart-recharge-panel {
  position:relative !important;
  overflow:visible !important;
  isolation:isolate !important;
}

html body .cymart-recharge-ray-svg {
  display:block !important;
  position:absolute !important;
  inset:-2px !important;
  width:calc(100% + 4px) !important;
  height:calc(100% + 4px) !important;
  z-index:80 !important;
  pointer-events:none !important;
  overflow:visible !important;
}

/* Old moving rectangular runners: visual-only retirement. */
html body .cymart-recharge-ray-runner,
html body .cymart-recharge-ray-glow,
html body .cymart-recharge-ray-core {
  display:none !important;
}

html body .cymart-recharge-ray-base,
html body .cymart-recharge-ray-beam {
  fill:none !important;
  vector-effect:non-scaling-stroke !important;
}

html body .cymart-recharge-ray-base {
  stroke-width:1.4 !important;
}
html body.cymart-theme-light .cymart-recharge-ray-base,
html body:not(.cymart-theme-dark) .cymart-recharge-ray-base {
  stroke:rgba(104,126,246,.28) !important;
}
html body.cymart-theme-dark .cymart-recharge-ray-base {
  stroke:rgba(255,139,207,.27) !important;
}

html body .cymart-recharge-ray-beam {
  display:block !important;
  stroke-width:3.1 !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
  stroke-dasharray:118 882 !important;
  stroke-dashoffset:0 !important;
  animation:cymartV1625PerimeterRay 4.6s linear infinite !important;
  will-change:stroke-dashoffset !important;
}

html body.cymart-theme-light .cymart-recharge-ray-beam,
html body:not(.cymart-theme-dark) .cymart-recharge-ray-beam {
  stroke:#78b8ff !important;
  filter:drop-shadow(0 0 3px rgba(255,255,255,.96)) drop-shadow(0 0 7px rgba(93,116,255,.88)) drop-shadow(0 0 10px rgba(174,96,255,.60)) !important;
}

html body.cymart-theme-dark .cymart-recharge-ray-beam {
  stroke:#ff9bd2 !important;
  filter:drop-shadow(0 0 3px rgba(255,255,255,.94)) drop-shadow(0 0 7px rgba(255,104,188,.88)) drop-shadow(0 0 10px rgba(151,91,255,.62)) !important;
}

html body .cymart-recharge-panel > :not(.cymart-recharge-ray-svg) {
  position:relative !important;
  z-index:2 !important;
}

@keyframes cymartV1625PerimeterRay {
  from { stroke-dashoffset:0; }
  to   { stroke-dashoffset:-1000; }
}

@media (max-width:767.98px) {
  html body .cymart-recharge-ray-beam {
    stroke-width:2.7 !important;
    stroke-dasharray:98 902 !important;
  }
}

@media (prefers-reduced-motion:reduce) {
  html body .cymart-recharge-ray-beam {
    animation-duration:8s !important;
  }
}