/* ======================================================================
   CYMART VISUAL V16.20 — FINAL FLAG + MOBILE EMOJI + DARK BACKGROUND FIX
   - Desktop: fixes country flags that Windows renders as letters (PE -> 🇵🇪).
   - Mobile: normalizes key service emoji appearance to the approved desktop look.
   - Mobile dark mode: forces the exact desktop sunset/mountain artwork and removes
     legacy navy canvases that were covering it.
   - Light mobile / desktop layout and functionality are untouched.
   ====================================================================== */

/* ----------------------------------------------------------------------
   A) FLAG FALLBACK (desktop Windows/Chrome)
   Uses the site's existing flag sprite; no external CDN required.
   ---------------------------------------------------------------------- */
.cymart-flag-emoji {
  display:inline-block !important;
  width:16px !important;
  height:11px !important;
  min-width:16px !important;
  min-height:11px !important;
  vertical-align:-1px !important;
  margin:0 .10em !important;
  background-image:url('/includes/icons/flags/flags.png') !important;
  background-repeat:no-repeat !important;
  box-shadow:0 0 0 1px rgba(0,0,0,.05) !important;
}

/* ----------------------------------------------------------------------
   B) MOBILE SERVICE EMOJI NORMALIZATION
   These tiny local visual assets reproduce the approved desktop appearance
   for the service icon, phone icon and face icon. No form values are changed.
   ---------------------------------------------------------------------- */
.cymart-service-emoji-img {
  display:inline-block !important;
  width:auto !important;
  height:1.05em !important;
  max-width:1.20em !important;
  object-fit:contain !important;
  vertical-align:-0.14em !important;
  margin:0 .05em !important;
  pointer-events:none !important;
}

@media (max-width: 991.98px) {
  /* --------------------------------------------------------------------
     C) DARK MOBILE: use the SAME actual image used on desktop.
     The earlier mobile asset is intentionally bypassed here so there can be
     no mismatch between desktop and mobile artwork.
     -------------------------------------------------------------------- */
  html:has(body.cymart-theme-dark) {
    background-color:#07091c !important;
    background-image:url('/templates/default/images/cymart-visual/dark-desktop.png?v=1620') !important;
    background-repeat:no-repeat !important;
    background-position:70% center !important;
    background-size:cover !important;
  }

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

  /* Fixed visual layer: exact same desktop artwork, independently of page height.
     This prevents long mobile pages from stretching/cropping the body background. */
  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-color:#07091c !important;
    background-image:url('/templates/default/images/cymart-visual/dark-desktop.png?v=1620') !important;
    background-repeat:no-repeat !important;
    background-position:70% center !important;
    background-size:cover !important;
    filter:none !important;
    mix-blend-mode:normal !important;
  }

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

  /* The main legacy canvas was the real layer hiding the background. */
  html body.cymart-theme-dark .bg-gray,
  html body.cymart-theme-dark .bg-gray > .min-height,
  html body.cymart-theme-dark .bg-gray > .min-height > div,
  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;
  }

  /* Keep the approved dark cards/panels readable while revealing the image
     around them. These rules do not alter dimensions or click behavior. */
  html body.cymart-theme-dark .cymart-imei-page .cymart-recharge-panel {
    background:linear-gradient(135deg,rgba(31,19,65,.78),rgba(42,21,62,.70)) !important;
  }

  html body.cymart-theme-dark .cymart-imei-page .card-search {
    background:linear-gradient(135deg,rgba(5,17,43,.82),rgba(33,16,63,.76)) !important;
  }

  html body.cymart-theme-dark .cymart-imei-page .card-product {
    background:linear-gradient(135deg,rgba(5,23,53,.80),rgba(30,15,64,.74)) !important;
  }
}

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

  html body.cymart-theme-dark::before {
    background-position:72% center !important;
    background-size:cover !important;
  }
}