/* ======================================================================
   CYMART VISUAL V16.22 — MOBILE EMOJI + DARK BACKGROUND ROOT FIX
   Scope: mobile/tablet only for visual changes. Desktop layout is untouched.
   ====================================================================== */


/* Real Unicode emoji/flags on every platform. This keeps the desktop flag
   fix while leaving normal desktop layout untouched. */
.cymart-unicode-emoji {
  font-family:
    "Noto Color Emoji",
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Segoe UI Symbol",
    sans-serif !important;
  font-weight:400 !important;
  font-style:normal !important;
  font-variant-emoji:emoji;
  line-height:1 !important;
  vertical-align:-0.08em !important;
}

/* ----------------------------------------------------------------------
   1) MOBILE: render real Unicode emoji with the modern color-emoji font.
   No PNG/SVG substitution. Normal text falls back to the site's fonts.
   ---------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  html body .cymart-imei-page,
  html body .cymart-imei-page .card-product,
  html body .cymart-imei-page .group,
  html body .cymart-imei-page .title,
  html body .cymart-imei-page .searchme,
  html body .cymart-imei-page .text-muted,
  html body .cymart-imei-page .badge,
  html body #modal-order {
    font-family:
      "Noto Color Emoji",
      -apple-system,
      BlinkMacSystemFont,
      "Segoe UI",
      Roboto,
      "Helvetica Neue",
      Arial,
      "Apple Color Emoji",
      "Segoe UI Emoji",
      "Segoe UI Symbol",
      sans-serif !important;
    font-variant-emoji: emoji;
  }

}

/* ----------------------------------------------------------------------
   2) DARK MOBILE: show the SAME chosen mountain/sunset artwork used on PC.

   Root cause fixed here:
   older rules used background-size:cover on a page that can be several
   viewport-heights tall. On mobile that can scale the artwork against the
   whole document and leave only the dark sky visible. We instead size each
   background tile to exactly 100vh and repeat it vertically.
   ---------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  html.cymart-boot-dark,
  html:has(body.cymart-theme-dark),
  html body.cymart-theme-dark,
  html body.cymart-theme-dark.cymart-imei-active,
  html body.cymart-theme-dark.cymart-imei-host {
    background-color:#07091c !important;
    background-image:url('/templates/default/images/cymart-visual/dark-desktop.png?v=1622') !important;
    background-repeat:repeat-y !important;
    background-size:auto 100vh !important;
    background-position:72% top !important;
    background-attachment:scroll !important;
  }

  /* Remove old pseudo backgrounds / navy overlays. */
  html body.cymart-theme-dark::before,
  html body.cymart-theme-dark::after,
  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;
    background-image:none !important;
    filter:none !important;
  }

  /* The outer page canvas must be transparent so the real body artwork is
     visible. Do NOT apply background-size:cover to this long container. */
  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 > .bg-gray .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 only the functional cards/panels dark and translucent. */
  html body.cymart-theme-dark .cymart-imei-page .cymart-recharge-panel {
    background:linear-gradient(135deg,rgba(31,19,65,.79),rgba(42,21,62,.70)) !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,.84),rgba(33,16,63,.76)) !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,.82),rgba(30,15,64,.76)) !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),
  html body.cymart-theme-dark,
  html body.cymart-theme-dark.cymart-imei-active,
  html body.cymart-theme-dark.cymart-imei-host {
    background-position:74% top !important;
    background-size:auto 100vh !important;
  }
}