/* ======================================================================
   CYMART VISUAL V16.18 — MOBILE DARK FINAL + NO FLASH
   MOBILE ONLY. Desktop/PC is intentionally untouched.
   ====================================================================== */

/* Phones/tablets only */
@media (max-width: 991.98px) {

  /* ================================================================
     A) MOBILE SIDE MENU — always white, including dark theme.
     Removes the black category bars (PLACE ORDER / ORDER HISTORY /
     PRODUCTS / MY ACCOUNT) while preserving the same menu structure.
     ================================================================ */
  html body #navbarToggler1.modal-menu .modal-content,
  html body #navbarToggler1.modal-menu .modal-header,
  html body #navbarToggler1.modal-menu .modal-body,
  html body #navbarToggler1.modal-menu .modal-body > ul,
  html body #navbarToggler1.modal-menu .modal-body > ul > li,
  html body #navbarToggler1.modal-menu .modal-body li.nav-item,
  html body #navbarToggler1.modal-menu .modal-body li.dropdown,
  html body #navbarToggler1.modal-menu .modal-body .dropdown-menu,
  html body #navbarToggler1.modal-menu .modal-body .collapse,
  html body #navbarToggler1.modal-menu .modal-body .list-group,
  html body #navbarToggler1.modal-menu .modal-body .list-group-item {
    background:#ffffff !important;
    background-color:#ffffff !important;
    background-image:none !important;
    color:#111827 !important;
  }

  html body #navbarToggler1.modal-menu .modal-body a.nav-link,
  html body #navbarToggler1.modal-menu .modal-body a.dropdown-toggle,
  html body #navbarToggler1.modal-menu .modal-body a.dropdown-item,
  html body #navbarToggler1.modal-menu .modal-body ul li > a,
  html body #navbarToggler1.modal-menu .modal-body .catloglist li a {
    background:#ffffff !important;
    background-color:#ffffff !important;
    background-image:none !important;
    color:#111827 !important;
    -webkit-text-fill-color:#111827 !important;
    text-shadow:none !important;
    opacity:1 !important;
  }

  html body #navbarToggler1.modal-menu .modal-body a.nav-link:hover,
  html body #navbarToggler1.modal-menu .modal-body a.nav-link:focus,
  html body #navbarToggler1.modal-menu .modal-body a.dropdown-toggle:hover,
  html body #navbarToggler1.modal-menu .modal-body a.dropdown-toggle:focus,
  html body #navbarToggler1.modal-menu .modal-body a.dropdown-item:hover,
  html body #navbarToggler1.modal-menu .modal-body a.dropdown-item:focus {
    background:#f3f7ff !important;
    color:#111827 !important;
    -webkit-text-fill-color:#111827 !important;
  }

  html body #navbarToggler1.modal-menu .modal-body i,
  html body #navbarToggler1.modal-menu .modal-body .fa,
  html body #navbarToggler1.modal-menu .modal-body .fal,
  html body #navbarToggler1.modal-menu .modal-body .fas {
    color:inherit !important;
  }

  /* ================================================================
     B) LIGHT MOBILE — preserve the approved light design immediately.
     Because this stylesheet is also loaded in <head>, these rules apply
     before first paint and avoid the temporary old/dark mobile layout.
     ================================================================ */
  html body.cymart-theme-light {
    background-color:#eef6ff !important;
    background-image:url('/templates/default/images/cymart-visual/light-mobile.png') !important;
    background-repeat:no-repeat !important;
    background-position:center top !important;
    background-size:cover !important;
    background-attachment:scroll !important;
  }

  /* ================================================================
     C) DARK MOBILE — force the selected mountain/sunset artwork.
     ================================================================ */
  html body.cymart-theme-dark {
    background-color:#090b24 !important;
    background-image:url('/templates/default/images/cymart-visual/dark-mobile.png') !important;
    background-repeat:no-repeat !important;
    background-position:center top !important;
    background-size:cover !important;
    background-attachment:scroll !important;
  }

  /* Legacy page canvases must not cover the chosen dark 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 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;
    background:none !important;
    opacity:0 !important;
  }

  /* Keep the useful dark glass panels without turning the whole page navy. */
  html body.cymart-theme-dark .cymart-imei-page .card-search {
    background:linear-gradient(135deg,rgba(7,18,46,.78),rgba(34,17,65,.70)) !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(7,24,56,.74),rgba(31,16,66,.68)) !important;
    border-color:rgba(101,126,255,.35) !important;
    backdrop-filter:blur(10px) saturate(110%) !important;
    -webkit-backdrop-filter:blur(10px) saturate(110%) !important;
  }
}

/* Exact phone tuning */
@media (max-width: 767.98px) {
  html body.cymart-theme-light,
  html body.cymart-theme-dark {
    min-height:100vh !important;
  }
}