/* CYMART PERFORMANCE V1 - legacy visual stack; exact cascade order preserved */

/* ---- SOURCE: /templates/default/css/cymart-visual-v16-10.css ---- */
/* ======================================================================
   CYMART VISUAL V16.10 — LIGHT MODE CONSISTENCY PACK
   Loaded from footer, AFTER page-local / legacy CSS.
   Visual only. Does not change forms, AJAX, orders, sessions or APIs.
   Targets: /main, /addfunds, /settings/profile, /settings/api,
            /settings/invoice, /settings/mail, /settings/mailnotification,
            /settings/statement, /settings/myservice + IMEI order light mode.
   ====================================================================== */

/* ---------- 1. PAGE CANVAS: NEVER REPAINT LIGHT MODE WITH BLACK ---------- */
html body.cymart-theme-light,
html body:not(.cymart-theme-dark) {
  color:#17233f !important;
}

html body.cymart-theme-light .bg-gray,
html body.cymart-theme-light .min-height,
html body.cymart-theme-light .content,
html body.cymart-theme-light .main-content,
html body.cymart-theme-light .page-content,
html body.cymart-theme-light .page-container,
html body.cymart-theme-light .client-area,
html body.cymart-theme-light .clientarea-balance,
html body.cymart-theme-light .service-list,
html body.cymart-theme-light .service-list-box,
html body.cymart-theme-light .tab-content,
html body:not(.cymart-theme-dark) .bg-gray,
html body:not(.cymart-theme-dark) .min-height,
html body:not(.cymart-theme-dark) .content,
html body:not(.cymart-theme-dark) .main-content,
html body:not(.cymart-theme-dark) .page-content,
html body:not(.cymart-theme-dark) .page-container,
html body:not(.cymart-theme-dark) .client-area,
html body:not(.cymart-theme-dark) .clientarea-balance,
html body:not(.cymart-theme-dark) .service-list,
html body:not(.cymart-theme-dark) .service-list-box,
html body:not(.cymart-theme-dark) .tab-content {
  background:transparent !important;
  background-color:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
}

/* ---------- 2. LIGHT NAVIGATION LIKE THE APPROVED REFERENCE ---------- */
html body.cymart-theme-light header,
html body:not(.cymart-theme-dark) header {
  background:transparent !important;
}
html body.cymart-theme-light .header-middle,
html body:not(.cymart-theme-dark) .header-middle {
  background:rgba(255,255,255,.88) !important;
  border:1px solid rgba(147,166,235,.30) !important;
  box-shadow:0 10px 28px rgba(68,94,155,.11), 0 0 0 1px rgba(255,255,255,.72) inset !important;
  backdrop-filter:blur(16px) saturate(112%) !important;
  -webkit-backdrop-filter:blur(16px) saturate(112%) !important;
}
html body.cymart-theme-light .header-middle a,
html body.cymart-theme-light .header-middle .nav-link,
html body.cymart-theme-light .header-middle span,
html body.cymart-theme-light .header-middle .text-muted,
html body:not(.cymart-theme-dark) .header-middle a,
html body:not(.cymart-theme-dark) .header-middle .nav-link,
html body:not(.cymart-theme-dark) .header-middle span,
html body:not(.cymart-theme-dark) .header-middle .text-muted {
  color:#17233f !important;
  text-shadow:none !important;
  opacity:1 !important;
}
html body.cymart-theme-light .header-middle i,
html body:not(.cymart-theme-dark) .header-middle i {
  color:#6075a7 !important;
}

/* ---------- 3. TITLES / BREADCRUMBS / GENERAL TEXT ---------- */
html body.cymart-theme-light .page-title,
html body.cymart-theme-light .breadcrumb,
html body.cymart-theme-light .breadcrumb a,
html body.cymart-theme-light .breadcrumb i,
html body.cymart-theme-light h1,
html body.cymart-theme-light h2,
html body.cymart-theme-light h3,
html body.cymart-theme-light h4,
html body.cymart-theme-light h5,
html body.cymart-theme-light h6,
html body:not(.cymart-theme-dark) .page-title,
html body:not(.cymart-theme-dark) .breadcrumb,
html body:not(.cymart-theme-dark) .breadcrumb a,
html body:not(.cymart-theme-dark) .breadcrumb i,
html body:not(.cymart-theme-dark) h1,
html body:not(.cymart-theme-dark) h2,
html body:not(.cymart-theme-dark) h3,
html body:not(.cymart-theme-dark) h4,
html body:not(.cymart-theme-dark) h5,
html body:not(.cymart-theme-dark) h6 {
  color:#17233f !important;
  text-shadow:none !important;
}
html body.cymart-theme-light .breadcrumb,
html body.cymart-theme-light .breadcrumb a,
html body.cymart-theme-light .breadcrumb i,
html body:not(.cymart-theme-dark) .breadcrumb,
html body:not(.cymart-theme-dark) .breadcrumb a,
html body:not(.cymart-theme-dark) .breadcrumb i {
  color:#56729c !important;
  background:transparent !important;
}
html body.cymart-theme-light .text-muted,
html body:not(.cymart-theme-dark) .text-muted {
  color:#61708a !important;
  opacity:1 !important;
}

/* ---------- 4. MAIN / SETTINGS / ADDFUNDS PANELS ---------- */
html body.cymart-theme-light .card,
html body.cymart-theme-light .card-simple-form,
html body.cymart-theme-light .card-app,
html body.cymart-theme-light .list-group-item,
html body.cymart-theme-light .modal-content,
html body.cymart-theme-light .current-balance,
html body.cymart-theme-light .app-content-header,
html body:not(.cymart-theme-dark) .card,
html body:not(.cymart-theme-dark) .card-simple-form,
html body:not(.cymart-theme-dark) .card-app,
html body:not(.cymart-theme-dark) .list-group-item,
html body:not(.cymart-theme-dark) .modal-content,
html body:not(.cymart-theme-dark) .current-balance,
html body:not(.cymart-theme-dark) .app-content-header {
  background:rgba(255,255,255,.82) !important;
  background-color:rgba(255,255,255,.82) !important;
  background-image:none !important;
  color:#17233f !important;
  border-color:rgba(153,177,221,.32) !important;
  box-shadow:0 14px 34px rgba(71,102,168,.10), inset 0 1px 0 rgba(255,255,255,.88) !important;
  backdrop-filter:blur(12px) saturate(108%) !important;
  -webkit-backdrop-filter:blur(12px) saturate(108%) !important;
}

html body.cymart-theme-light .card p,
html body.cymart-theme-light .card span:not(.badge),
html body.cymart-theme-light .card label,
html body.cymart-theme-light .card div,
html body.cymart-theme-light .card td,
html body.cymart-theme-light .card th,
html body:not(.cymart-theme-dark) .card p,
html body:not(.cymart-theme-dark) .card span:not(.badge),
html body:not(.cymart-theme-dark) .card label,
html body:not(.cymart-theme-dark) .card div,
html body:not(.cymart-theme-dark) .card td,
html body:not(.cymart-theme-dark) .card th {
  color:#17233f !important;
  text-shadow:none !important;
}

/* ---------- 5. FORMS: DARK TEXT ON LIGHT CONTROLS ---------- */
html body.cymart-theme-light input:not([type="submit"]):not([type="button"]),
html body.cymart-theme-light select,
html body.cymart-theme-light textarea,
html body.cymart-theme-light .form-control,
html body.cymart-theme-light .custom-select,
html body.cymart-theme-light .chosen-container-single .chosen-single,
html body:not(.cymart-theme-dark) input:not([type="submit"]):not([type="button"]),
html body:not(.cymart-theme-dark) select,
html body:not(.cymart-theme-dark) textarea,
html body:not(.cymart-theme-dark) .form-control,
html body:not(.cymart-theme-dark) .custom-select,
html body:not(.cymart-theme-dark) .chosen-container-single .chosen-single {
  background:#ffffff !important;
  background-color:#ffffff !important;
  color:#111827 !important;
  -webkit-text-fill-color:#111827 !important;
  border:1px solid #c6d5eb !important;
  box-shadow:0 2px 8px rgba(64,91,145,.04) !important;
  text-shadow:none !important;
  opacity:1 !important;
}
html body.cymart-theme-light input::placeholder,
html body.cymart-theme-light textarea::placeholder,
html body:not(.cymart-theme-dark) input::placeholder,
html body:not(.cymart-theme-dark) textarea::placeholder {
  color:#68758c !important;
  -webkit-text-fill-color:#68758c !important;
  opacity:1 !important;
}
html body.cymart-theme-light input:-webkit-autofill,
html body.cymart-theme-light textarea:-webkit-autofill,
html body.cymart-theme-light select:-webkit-autofill,
html body:not(.cymart-theme-dark) input:-webkit-autofill,
html body:not(.cymart-theme-dark) textarea:-webkit-autofill,
html body:not(.cymart-theme-dark) select:-webkit-autofill {
  -webkit-text-fill-color:#111827 !important;
  -webkit-box-shadow:0 0 0 1000px #ffffff inset !important;
  box-shadow:0 0 0 1000px #ffffff inset !important;
}
html body.cymart-theme-light .form-label,
html body.cymart-theme-light label,
html body:not(.cymart-theme-dark) .form-label,
html body:not(.cymart-theme-dark) label {
  color:#25324a !important;
  text-shadow:none !important;
}

/* ---------- 6. TABLES / INVOICE / MAIL / STATEMENT / SERVICES ---------- */
html body.cymart-theme-light .table-responsive,
html body:not(.cymart-theme-dark) .table-responsive {
  background:rgba(255,255,255,.72) !important;
  border-radius:14px !important;
  box-shadow:0 10px 28px rgba(69,100,164,.08) !important;
}
html body.cymart-theme-light .table,
html body:not(.cymart-theme-dark) .table {
  background:rgba(255,255,255,.88) !important;
  color:#17233f !important;
  border-color:rgba(157,178,216,.28) !important;
}
html body.cymart-theme-light .table thead th,
html body:not(.cymart-theme-dark) .table thead th {
  background:#edf4ff !important;
  color:#233a66 !important;
  border-color:#d7e2f2 !important;
}
html body.cymart-theme-light .table tbody td,
html body:not(.cymart-theme-dark) .table tbody td {
  background:rgba(255,255,255,.86) !important;
  color:#17233f !important;
  border-color:#e0e8f3 !important;
}
html body.cymart-theme-light .table-striped tbody tr:nth-of-type(odd) td,
html body:not(.cymart-theme-dark) .table-striped tbody tr:nth-of-type(odd) td {
  background:#f7faff !important;
}
html body.cymart-theme-light .table a,
html body:not(.cymart-theme-dark) .table a {
  color:#316ad5 !important;
}

/* ---------- 7. SETTINGS NAV PILLS ---------- */
html body.cymart-theme-light .nav-pills,
html body:not(.cymart-theme-dark) .nav-pills {
  border-color:rgba(103,112,240,.20) !important;
}
html body.cymart-theme-light .nav-pills .nav-link,
html body:not(.cymart-theme-dark) .nav-pills .nav-link {
  color:#53617a !important;
  background:transparent !important;
  text-shadow:none !important;
}
html body.cymart-theme-light .nav-pills .nav-link.active,
html body:not(.cymart-theme-dark) .nav-pills .nav-link.active {
  color:#263660 !important;
  background:linear-gradient(90deg,rgba(103,116,255,.11),rgba(192,105,255,.08)) !important;
  border-bottom:2px solid #7767ff !important;
  box-shadow:none !important;
}

/* ---------- 8. BUTTONS ---------- */
html body.cymart-theme-light .btn-primary,
html body:not(.cymart-theme-dark) .btn-primary {
  background:linear-gradient(135deg,#358bff,#7164f6) !important;
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  border-color:transparent !important;
  text-shadow:none !important;
}
html body.cymart-theme-light .btn-secondary,
html body:not(.cymart-theme-dark) .btn-secondary {
  background:#edf3ff !important;
  color:#25375a !important;
  -webkit-text-fill-color:#25375a !important;
  border:1px solid #cbd9ed !important;
}

/* ---------- 9. IMEI PAGE — MATCH THE APPROVED LIGHT MOCKUP ---------- */
html body.cymart-theme-light .cymart-imei-page .cymart-recharge-panel,
html body:not(.cymart-theme-dark) .cymart-imei-page .cymart-recharge-panel {
  background:rgba(255,255,255,.84) !important;
  border:1px solid rgba(147,174,229,.30) !important;
  box-shadow:0 18px 42px rgba(70,105,179,.11) !important;
  backdrop-filter:blur(14px) saturate(108%) !important;
  -webkit-backdrop-filter:blur(14px) saturate(108%) !important;
}
html body.cymart-theme-light .cymart-recharge-panel-title strong,
html body.cymart-theme-light .cymart-recharge-panel-title small,
html body:not(.cymart-theme-dark) .cymart-recharge-panel-title strong,
html body:not(.cymart-theme-dark) .cymart-recharge-panel-title small {
  color:#20325a !important;
  text-shadow:none !important;
}
html body.cymart-theme-light .cymart-imei-recharge-actions .cymart-recharge-action,
html body:not(.cymart-theme-dark) .cymart-imei-recharge-actions .cymart-recharge-action {
  clip-path:none !important;
  border-radius:18px !important;
  background:rgba(255,255,255,.90) !important;
  color:#17233f !important;
  border:1px solid rgba(139,174,229,.34) !important;
  box-shadow:0 9px 24px rgba(75,105,162,.08), inset 0 1px 0 rgba(255,255,255,.94) !important;
}
html body.cymart-theme-light .cymart-imei-recharge-actions .cymart-recharge-action::before,
html body.cymart-theme-light .cymart-imei-recharge-actions .cymart-recharge-action::after,
html body:not(.cymart-theme-dark) .cymart-imei-recharge-actions .cymart-recharge-action::before,
html body:not(.cymart-theme-dark) .cymart-imei-recharge-actions .cymart-recharge-action::after {
  content:none !important;
  display:none !important;
}
html body.cymart-theme-light .cymart-recharge-copy,
html body.cymart-theme-light .cymart-recharge-copy strong,
html body.cymart-theme-light .cymart-recharge-copy small,
html body.cymart-theme-light .cymart-recharge-copy .cymart-recharge-kicker,
html body:not(.cymart-theme-dark) .cymart-recharge-copy,
html body:not(.cymart-theme-dark) .cymart-recharge-copy strong,
html body:not(.cymart-theme-dark) .cymart-recharge-copy small,
html body:not(.cymart-theme-dark) .cymart-recharge-copy .cymart-recharge-kicker {
  color:#20325a !important;
  text-shadow:none !important;
}
html body.cymart-theme-light .cymart-recharge-binance .cymart-recharge-kicker,
html body:not(.cymart-theme-dark) .cymart-recharge-binance .cymart-recharge-kicker {
  color:#b98200 !important;
}
html body.cymart-theme-light .cymart-recharge-transfer .cymart-recharge-kicker,
html body:not(.cymart-theme-dark) .cymart-recharge-transfer .cymart-recharge-kicker {
  color:#2081c8 !important;
}
html body.cymart-theme-light .cymart-recharge-arrow,
html body:not(.cymart-theme-dark) .cymart-recharge-arrow {
  background:#ffffff !important;
  color:#426dc5 !important;
  border-color:#b9cff0 !important;
  box-shadow:0 5px 14px rgba(70,104,169,.08) !important;
}

html body.cymart-theme-light .cymart-imei-page .card-search,
html body:not(.cymart-theme-dark) .cymart-imei-page .card-search {
  background:rgba(255,255,255,.82) !important;
  border:1px solid rgba(142,172,226,.30) !important;
  box-shadow:0 14px 30px rgba(73,107,176,.08) !important;
}
html body.cymart-theme-light .cymart-imei-page .service .card-product,
html body.cymart-theme-light .cymart-imei-page .card-product,
html body:not(.cymart-theme-dark) .cymart-imei-page .service .card-product,
html body:not(.cymart-theme-dark) .cymart-imei-page .card-product {
  background:rgba(255,255,255,.86) !important;
  color:#17233f !important;
  border:1px solid rgba(142,172,226,.28) !important;
  box-shadow:0 12px 28px rgba(73,107,176,.07) !important;
}
html body.cymart-theme-light .cymart-imei-page .card-product *,
html body:not(.cymart-theme-dark) .cymart-imei-page .card-product * {
  text-shadow:none !important;
}
html body.cymart-theme-light .cymart-imei-page .service-name,
html body.cymart-theme-light .cymart-imei-page .truncate-text,
html body:not(.cymart-theme-dark) .cymart-imei-page .service-name,
html body:not(.cymart-theme-dark) .cymart-imei-page .truncate-text {
  color:#20325a !important;
}
html body.cymart-theme-light .cymart-imei-page .col-group-icon .bg-gray,
html body:not(.cymart-theme-dark) .cymart-imei-page .col-group-icon .bg-gray {
  background:linear-gradient(180deg,#398df5,#7768f5) !important;
  color:#ffffff !important;
  border-right:0 !important;
}
html body.cymart-theme-light .cymart-imei-page h3.title span,
html body:not(.cymart-theme-dark) .cymart-imei-page h3.title span {
  color:#20325a !important;
  background:transparent !important;
  text-shadow:none !important;
  border-color:transparent !important;
}

/* ---------- 10. ALERTS / SECONDARY SURFACES ---------- */
html body.cymart-theme-light .alert-info,
html body:not(.cymart-theme-dark) .alert-info {
  background:rgba(229,243,255,.88) !important;
  color:#25456c !important;
  border-color:#bddcf7 !important;
}
html body.cymart-theme-light .alert-success,
html body:not(.cymart-theme-dark) .alert-success {
  color:#155c3a !important;
}
html body.cymart-theme-light .border,
html body:not(.cymart-theme-dark) .border {
  border-color:#d6e1ef !important;
}

/* ---------- 11. FOOTER LIGHT MODE ---------- */
html body.cymart-theme-light footer,
html body.cymart-theme-light .footer-top,
html body.cymart-theme-light .footer-bottom,
html body:not(.cymart-theme-dark) footer,
html body:not(.cymart-theme-dark) .footer-top,
html body:not(.cymart-theme-dark) .footer-bottom {
  background:rgba(248,251,255,.90) !important;
  color:#17233f !important;
}
html body.cymart-theme-light footer a,
html body.cymart-theme-light footer span,
html body.cymart-theme-light footer div,
html body:not(.cymart-theme-dark) footer a,
html body:not(.cymart-theme-dark) footer span,
html body:not(.cymart-theme-dark) footer div {
  color:#17233f !important;
  text-shadow:none !important;
}

/* ---------- 12. MOBILE ---------- */
@media (max-width:767.98px) {
  html body.cymart-theme-light .card,
  html body:not(.cymart-theme-dark) .card,
  html body.cymart-theme-light .cymart-imei-page .card-product,
  html body:not(.cymart-theme-dark) .cymart-imei-page .card-product {
    background:rgba(255,255,255,.90) !important;
  }
}

/* ---- SOURCE: /templates/default/css/cymart-visual-v16-11.css ---- */
/* ======================================================================
   CYMART VISUAL V16.11 — FINAL LIGHT/DARK CLEANUP
   Loaded AFTER v16.10 to resolve the last reported visual issues.
   Visual only. No forms, orders, AJAX, sessions or APIs are changed.
   ====================================================================== */

/* ---------- A. LIGHT MODE: header/menu text clearly visible ---------- */
html body.cymart-theme-light .header-middle,
html body:not(.cymart-theme-dark) .header-middle {
  background:rgba(255,255,255,.90) !important;
}
html body.cymart-theme-light .header-middle .navbar-mastermenu > .nav-item > .nav-link,
html body.cymart-theme-light .header-middle .navbar-nav .nav-link,
html body.cymart-theme-light .header-middle .navbar-nav a,
html body.cymart-theme-light .header-middle .profile .nav-link,
html body.cymart-theme-light .header-middle .profile .nav-link *,
html body.cymart-theme-light .header-middle .dropdown-toggle,
html body.cymart-theme-light .header-middle .text-muted,
html body:not(.cymart-theme-dark) .header-middle .navbar-mastermenu > .nav-item > .nav-link,
html body:not(.cymart-theme-dark) .header-middle .navbar-nav .nav-link,
html body:not(.cymart-theme-dark) .header-middle .navbar-nav a,
html body:not(.cymart-theme-dark) .header-middle .profile .nav-link,
html body:not(.cymart-theme-dark) .header-middle .profile .nav-link *,
html body:not(.cymart-theme-dark) .header-middle .dropdown-toggle,
html body:not(.cymart-theme-dark) .header-middle .text-muted {
  color:#121826 !important;
  -webkit-text-fill-color:#121826 !important;
  opacity:1 !important;
  text-shadow:none !important;
}
html body.cymart-theme-light .header-middle .nav-link i,
html body.cymart-theme-light .header-middle .lg-icon i,
html body:not(.cymart-theme-dark) .header-middle .nav-link i,
html body:not(.cymart-theme-dark) .header-middle .lg-icon i {
  color:#5f749e !important;
}

/* ---------- B. LIGHT MODE: IMEI search/filter bar exactly readable ---------- */
html body.cymart-theme-light .cymart-imei-page .card-search,
html body:not(.cymart-theme-dark) .cymart-imei-page .card-search {
  background:rgba(255,255,255,.92) !important;
}
html body.cymart-theme-light .cymart-imei-page .card-search *,
html body:not(.cymart-theme-dark) .cymart-imei-page .card-search * {
  text-shadow:none !important;
}
html body.cymart-theme-light .cymart-imei-page .card-search .search,
html body.cymart-theme-light .cymart-imei-page .card-search .search-icon,
html body.cymart-theme-light .cymart-imei-page .card-search .input-group-text,
html body.cymart-theme-light .cymart-imei-page .card-search .form-control,
html body.cymart-theme-light .cymart-imei-page .card-search input,
html body.cymart-theme-light .cymart-imei-page .card-search select,
html body.cymart-theme-light .cymart-imei-page .card-search .chosen-container-single .chosen-single,
html body:not(.cymart-theme-dark) .cymart-imei-page .card-search .search,
html body:not(.cymart-theme-dark) .cymart-imei-page .card-search .search-icon,
html body:not(.cymart-theme-dark) .cymart-imei-page .card-search .input-group-text,
html body:not(.cymart-theme-dark) .cymart-imei-page .card-search .form-control,
html body:not(.cymart-theme-dark) .cymart-imei-page .card-search input,
html body:not(.cymart-theme-dark) .cymart-imei-page .card-search select,
html body:not(.cymart-theme-dark) .cymart-imei-page .card-search .chosen-container-single .chosen-single {
  background:#ffffff !important;
  background-image:none !important;
  color:#111827 !important;
  -webkit-text-fill-color:#111827 !important;
  border-color:#cad8ed !important;
}
html body.cymart-theme-light .cymart-imei-page .card-search .search-icon,
html body.cymart-theme-light .cymart-imei-page .card-search .input-group-text,
html body:not(.cymart-theme-dark) .cymart-imei-page .card-search .search-icon,
html body:not(.cymart-theme-dark) .cymart-imei-page .card-search .input-group-text {
  color:#4f71b7 !important;
}
html body.cymart-theme-light .cymart-imei-page .card-search input::placeholder,
html body:not(.cymart-theme-dark) .cymart-imei-page .card-search input::placeholder {
  color:#6d798f !important;
  -webkit-text-fill-color:#6d798f !important;
}
html body.cymart-theme-light .cymart-imei-page .card-search .chosen-container-single .chosen-single span,
html body:not(.cymart-theme-dark) .cymart-imei-page .card-search .chosen-container-single .chosen-single span {
  color:#111827 !important;
}
/* remove the unwanted thin bar inside the “All Group” selector */
html body.cymart-theme-light .cymart-imei-page .card-search .chosen-container-single .chosen-single div,
html body:not(.cymart-theme-dark) .cymart-imei-page .card-search .chosen-container-single .chosen-single div {
  width:28px !important;
  right:6px !important;
  border-left:none !important;
  background:transparent !important;
  box-shadow:none !important;
}
html body.cymart-theme-light .cymart-imei-page .card-search .chosen-container-single .chosen-single div b,
html body:not(.cymart-theme-dark) .cymart-imei-page .card-search .chosen-container-single .chosen-single div b {
  background-position:center 8px !important;
  background-repeat:no-repeat !important;
}
html body.cymart-theme-light .cymart-imei-page .card-search .chosen-container-active.chosen-with-drop .chosen-single,
html body:not(.cymart-theme-dark) .cymart-imei-page .card-search .chosen-container-active.chosen-with-drop .chosen-single {
  box-shadow:0 0 0 3px rgba(80,110,180,.10) !important;
}
html body.cymart-theme-light .cymart-imei-page .card-search .chosen-drop,
html body:not(.cymart-theme-dark) .cymart-imei-page .card-search .chosen-drop {
  background:#fff !important;
  border:1px solid #cad8ed !important;
}
html body.cymart-theme-light .cymart-imei-page .card-search .chosen-results li,
html body:not(.cymart-theme-dark) .cymart-imei-page .card-search .chosen-results li {
  color:#111827 !important;
}
html body.cymart-theme-light .cymart-imei-page .card-search .custom-control-label,
html body.cymart-theme-light .cymart-imei-page .card-search label,
html body.cymart-theme-light .cymart-imei-page .card-search .text-muted,
html body:not(.cymart-theme-dark) .cymart-imei-page .card-search .custom-control-label,
html body:not(.cymart-theme-dark) .cymart-imei-page .card-search label,
html body:not(.cymart-theme-dark) .cymart-imei-page .card-search .text-muted {
  color:#1d2940 !important;
  opacity:1 !important;
}

/* ---------- C. LIGHT MODE: lower sections/footer text in black ---------- */
html body.cymart-theme-light footer,
html body.cymart-theme-light footer *,
html body.cymart-theme-light .footer-top,
html body.cymart-theme-light .footer-top *,
html body.cymart-theme-light .footer-bottom,
html body.cymart-theme-light .footer-bottom *,
html body:not(.cymart-theme-dark) footer,
html body:not(.cymart-theme-dark) footer *,
html body:not(.cymart-theme-dark) .footer-top,
html body:not(.cymart-theme-dark) .footer-top *,
html body:not(.cymart-theme-dark) .footer-bottom,
html body:not(.cymart-theme-dark) .footer-bottom * {
  color:#111827 !important;
  -webkit-text-fill-color:#111827 !important;
  text-shadow:none !important;
  opacity:1 !important;
}
html body.cymart-theme-light .footer-top .btn,
html body:not(.cymart-theme-dark) .footer-top .btn {
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
}

/* ---------- D. DARK MODE: remove solid dark slabs and show background ---------- */
html body.cymart-theme-dark .client-area,
html body.cymart-theme-dark .clientarea-balance,
html body.cymart-theme-dark .page-content,
html body.cymart-theme-dark .content,
html body.cymart-theme-dark .main-content,
html body.cymart-theme-dark .page-container,
html body.cymart-theme-dark .tab-content,
html body.cymart-theme-dark .service-list,
html body.cymart-theme-dark .service-list-box,
html body.cymart-theme-dark .table-responsive,
html body.cymart-theme-dark .client-profile,
html body.cymart-theme-dark .card-simple-form {
  background:transparent !important;
  background-color:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
}

/* Glass cards/panels instead of opaque navy/black blocks */
html body.cymart-theme-dark .card,
html body.cymart-theme-dark .card-app,
html body.cymart-theme-dark .list-group-item,
html body.cymart-theme-dark .modal-content,
html body.cymart-theme-dark .current-balance,
html body.cymart-theme-dark .app-content-header,
html body.cymart-theme-dark .nav-tabs,
html body.cymart-theme-dark .tab-pane,
html body.cymart-theme-dark .tab-content,
html body.cymart-theme-dark .card-othercredit,
html body.cymart-theme-dark .card-area-status,
html body.cymart-theme-dark .alert,
html body.cymart-theme-dark .client-profile .nav-pills,
html body.cymart-theme-dark .card-search,
html body.cymart-theme-dark .card-product,
html body.cymart-theme-dark .service-list-box .card,
html body.cymart-theme-dark .service-list .card,
html body.cymart-theme-dark .support-details,
html body.cymart-theme-dark .ticket-reply,
html body.cymart-theme-dark .view-ticket,
html body.cymart-theme-dark .table,
html body.cymart-theme-dark .panel,
html body.cymart-theme-dark .well,
html body.cymart-theme-dark .border,
html body.cymart-theme-dark .bg-dark,
html body.cymart-theme-dark .bg-secondary,
html body.cymart-theme-dark .client-profile,
html body.cymart-theme-dark .settings-tabs,
html body.cymart-theme-dark .my-services,
html body.cymart-theme-dark .invoice-area,
html body.cymart-theme-dark .mail-area,
html body.cymart-theme-dark .statement-area {
  background:linear-gradient(135deg,rgba(20,29,62,.62),rgba(10,17,39,.44)) !important;
  background-color:rgba(14,23,49,.56) !important;
  background-image:none !important;
  border:1px solid rgba(133,111,255,.24) !important;
  box-shadow:0 18px 38px rgba(3,8,24,.20), inset 0 1px 0 rgba(255,255,255,.05) !important;
  backdrop-filter:blur(14px) saturate(112%) !important;
  -webkit-backdrop-filter:blur(14px) saturate(112%) !important;
}
/* When elements are nested inside tables/cards, keep rows translucent too */
html body.cymart-theme-dark .table thead th {
  background:rgba(10,20,47,.52) !important;
  color:#69d2ff !important;
  border-color:rgba(142,123,255,.20) !important;
}
html body.cymart-theme-dark .table tbody td,
html body.cymart-theme-dark .table tbody th,
html body.cymart-theme-dark .table tbody tr,
html body.cymart-theme-dark .list-group-item,
html body.cymart-theme-dark .tab-content > .tab-pane,
html body.cymart-theme-dark .accordion .card-body,
html body.cymart-theme-dark .client-profile .tab-pane {
  background:rgba(18,27,57,.44) !important;
  color:#eef3ff !important;
  border-color:rgba(142,123,255,.16) !important;
}
html body.cymart-theme-dark .table-striped tbody tr:nth-of-type(odd) td,
html body.cymart-theme-dark .table-striped tbody tr:nth-of-type(odd) th {
  background:rgba(21,31,64,.38) !important;
}

/* Typography in dark mode remains bright/readable */
html body.cymart-theme-dark,
html body.cymart-theme-dark .card *,
html body.cymart-theme-dark .table *,
html body.cymart-theme-dark .tab-content *,
html body.cymart-theme-dark .list-group-item *,
html body.cymart-theme-dark .client-profile *,
html body.cymart-theme-dark .support-details * {
  text-shadow:none !important;
}
html body.cymart-theme-dark .page-title,
html body.cymart-theme-dark h1,
html body.cymart-theme-dark h2,
html body.cymart-theme-dark h3,
html body.cymart-theme-dark h4,
html body.cymart-theme-dark h5,
html body.cymart-theme-dark h6,
html body.cymart-theme-dark .card,
html body.cymart-theme-dark .card strong,
html body.cymart-theme-dark .card label,
html body.cymart-theme-dark .table,
html body.cymart-theme-dark .table td,
html body.cymart-theme-dark .table th,
html body.cymart-theme-dark .list-group-item,
html body.cymart-theme-dark .nav-tabs .nav-link,
html body.cymart-theme-dark .nav-pills .nav-link,
html body.cymart-theme-dark .breadcrumb,
html body.cymart-theme-dark .breadcrumb a,
html body.cymart-theme-dark .text-muted,
html body.cymart-theme-dark p,
html body.cymart-theme-dark span,
html body.cymart-theme-dark div {
  color:#eef3ff !important;
}
html body.cymart-theme-dark .text-muted,
html body.cymart-theme-dark small {
  color:#c2cbe6 !important;
}
html body.cymart-theme-dark a {
  color:#b7d7ff !important;
}

/* Dark forms keep the background image visible behind the page but inputs usable */
html body.cymart-theme-dark .form-control,
html body.cymart-theme-dark input:not([type="submit"]):not([type="button"]),
html body.cymart-theme-dark textarea,
html body.cymart-theme-dark select,
html body.cymart-theme-dark .chosen-container-single .chosen-single {
  background:rgba(4,20,52,.58) !important;
  background-color:rgba(4,20,52,.58) !important;
  color:#f2f6ff !important;
  -webkit-text-fill-color:#f2f6ff !important;
  border:1px solid rgba(79,155,255,.36) !important;
  box-shadow:none !important;
}
html body.cymart-theme-dark input::placeholder,
html body.cymart-theme-dark textarea::placeholder {
  color:#d4dcf0 !important;
  -webkit-text-fill-color:#d4dcf0 !important;
}

/* Profile/settings tabs remain readable without opaque blocks */
html body.cymart-theme-dark .nav-tabs .nav-link.active,
html body.cymart-theme-dark .nav-pills .nav-link.active {
  background:linear-gradient(90deg,rgba(108,73,255,.22),rgba(0,183,255,.14)) !important;
  color:#ffffff !important;
  border-color:rgba(123,105,255,.35) !important;
}

/* Footer in dark mode should be glass, not a solid black band */
html body.cymart-theme-dark footer,
html body.cymart-theme-dark footer .footer-top,
html body.cymart-theme-dark footer .footer-bottom {
  background:rgba(7,12,30,.52) !important;
  background-color:rgba(7,12,30,.52) !important;
  background-image:none !important;
  border-top:1px solid rgba(129,110,255,.20) !important;
  backdrop-filter:blur(14px) saturate(112%) !important;
  -webkit-backdrop-filter:blur(14px) saturate(112%) !important;
}
html body.cymart-theme-dark footer *,
html body.cymart-theme-dark footer a,
html body.cymart-theme-dark footer span,
html body.cymart-theme-dark footer div {
  color:#eef3ff !important;
}

/* Utility: preserve colored badges/statuses */
html body.cymart-theme-dark .badge,
html body.cymart-theme-light .badge,
html body:not(.cymart-theme-dark) .badge {
  text-shadow:none !important;
}

/* ---- SOURCE: /templates/default/css/cymart-visual-v16-12.css ---- */
/* ======================================================================
   CYMART VISUAL V16.12 — FINAL POLISH
   Fixes reported from the 2026-09-27 video/screenshot:
   - light theme dropdown menus no longer black
   - hide the floating theme/editor gear
   - IMEI light-theme labels/service text use dark text
   - All Group selector loses the stray inner vertical bar
   - Search Service uses a white field + dark text
   - light-theme service cards get a defined dark border
   Visual only. No functional JS/PHP/order logic changed.
   ====================================================================== */

/* 1) Hide the floating editor/theme wheel shown on the right side. */
html body .theme-settings-icon {
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}

/* 2) LIGHT THEME — all header dropdowns must match the white header. */
html body.cymart-theme-light .dropdown-menu,
html body.cymart-theme-light .header-middle .dropdown-menu,
html body.cymart-theme-light .navbar-products .dropdown-menu,
html body:not(.cymart-theme-dark) .dropdown-menu,
html body:not(.cymart-theme-dark) .header-middle .dropdown-menu,
html body:not(.cymart-theme-dark) .navbar-products .dropdown-menu {
  background:#ffffff !important;
  background-color:#ffffff !important;
  background-image:none !important;
  color:#111827 !important;
  border:1px solid rgba(119,143,194,.28) !important;
  box-shadow:0 18px 45px rgba(45,66,115,.18) !important;
  backdrop-filter:blur(14px) saturate(108%) !important;
  -webkit-backdrop-filter:blur(14px) saturate(108%) !important;
}
html body.cymart-theme-light .dropdown-menu a,
html body.cymart-theme-light .dropdown-menu .dropdown-item,
html body.cymart-theme-light .dropdown-menu span,
html body.cymart-theme-light .dropdown-menu div,
html body.cymart-theme-light .dropdown-menu small,
html body.cymart-theme-light .dropdown-menu strong,
html body:not(.cymart-theme-dark) .dropdown-menu a,
html body:not(.cymart-theme-dark) .dropdown-menu .dropdown-item,
html body:not(.cymart-theme-dark) .dropdown-menu span,
html body:not(.cymart-theme-dark) .dropdown-menu div,
html body:not(.cymart-theme-dark) .dropdown-menu small,
html body:not(.cymart-theme-dark) .dropdown-menu strong {
  color:#111827 !important;
  -webkit-text-fill-color:#111827 !important;
  text-shadow:none !important;
  opacity:1 !important;
}
html body.cymart-theme-light .dropdown-menu .dropdown-divider,
html body:not(.cymart-theme-dark) .dropdown-menu .dropdown-divider {
  border-top-color:#dbe4f0 !important;
}
html body.cymart-theme-light .dropdown-menu .dropdown-item:hover,
html body.cymart-theme-light .dropdown-menu .dropdown-item:focus,
html body.cymart-theme-light .dropdown-menu a:hover,
html body.cymart-theme-light .dropdown-menu a:focus,
html body:not(.cymart-theme-dark) .dropdown-menu .dropdown-item:hover,
html body:not(.cymart-theme-dark) .dropdown-menu .dropdown-item:focus,
html body:not(.cymart-theme-dark) .dropdown-menu a:hover,
html body:not(.cymart-theme-dark) .dropdown-menu a:focus {
  background:linear-gradient(90deg,rgba(78,143,255,.10),rgba(145,92,255,.09)) !important;
  color:#0f172a !important;
  -webkit-text-fill-color:#0f172a !important;
}
/* prevent transparent-mode legacy rule from repainting opened nav items black */
html body.cymart-theme-light.transparent .navbar-products .nav-item:hover,
html body.cymart-theme-light.transparent .header-top .nav-item:hover,
html body:not(.cymart-theme-dark).transparent .navbar-products .nav-item:hover,
html body:not(.cymart-theme-dark).transparent .header-top .nav-item:hover {
  background:#ffffff !important;
}

/* 3) LIGHT THEME — IMEI filter controls. */
html body.cymart-theme-light .cymart-imei-page .card-search select.form-control,
html body:not(.cymart-theme-dark) .cymart-imei-page .card-search select.form-control {
  appearance:none !important;
  -webkit-appearance:none !important;
  -moz-appearance:none !important;
  background:#ffffff !important;
  background-image:none !important;
  color:#111827 !important;
  -webkit-text-fill-color:#111827 !important;
  border:1px solid #bfcde3 !important;
  box-shadow:none !important;
  outline:none !important;
  padding:7px 12px !important;
}
/* remove any legacy pseudo/caret decoration that presents as a vertical bar */
html body.cymart-theme-light .cymart-imei-page .card-search select.form-control::before,
html body.cymart-theme-light .cymart-imei-page .card-search select.form-control::after,
html body:not(.cymart-theme-dark) .cymart-imei-page .card-search select.form-control::before,
html body:not(.cymart-theme-dark) .cymart-imei-page .card-search select.form-control::after {
  content:none !important;
  display:none !important;
}
html body.cymart-theme-light .cymart-imei-page .card-search input.form-control,
html body:not(.cymart-theme-dark) .cymart-imei-page .card-search input.form-control {
  background:#ffffff !important;
  background-color:#ffffff !important;
  background-image:none !important;
  color:#111827 !important;
  -webkit-text-fill-color:#111827 !important;
  border:1px solid #bfcde3 !important;
  box-shadow:none !important;
}
html body.cymart-theme-light .cymart-imei-page .card-search input.form-control::placeholder,
html body:not(.cymart-theme-dark) .cymart-imei-page .card-search input.form-control::placeholder {
  color:#6b7280 !important;
  -webkit-text-fill-color:#6b7280 !important;
  opacity:1 !important;
}
html body.cymart-theme-light .cymart-imei-page .card-search .custom-control-label,
html body.cymart-theme-light .cymart-imei-page .card-search label,
html body:not(.cymart-theme-dark) .cymart-imei-page .card-search .custom-control-label,
html body:not(.cymart-theme-dark) .cymart-imei-page .card-search label {
  color:#111827 !important;
  -webkit-text-fill-color:#111827 !important;
  text-shadow:none !important;
  opacity:1 !important;
}

/* 4) LIGHT THEME — category/service text must be dark, not washed-out white. */
html body.cymart-theme-light .cymart-imei-page h3.title,
html body.cymart-theme-light .cymart-imei-page h3.title span,
html body.cymart-theme-light .cymart-imei-page h4,
html body.cymart-theme-light .cymart-imei-page .group .title,
html body.cymart-theme-light .cymart-imei-page .group .title span,
html body:not(.cymart-theme-dark) .cymart-imei-page h3.title,
html body:not(.cymart-theme-dark) .cymart-imei-page h3.title span,
html body:not(.cymart-theme-dark) .cymart-imei-page h4,
html body:not(.cymart-theme-dark) .cymart-imei-page .group .title,
html body:not(.cymart-theme-dark) .cymart-imei-page .group .title span {
  color:#111827 !important;
  -webkit-text-fill-color:#111827 !important;
  text-shadow:0 1px 1px rgba(255,255,255,.55) !important;
  opacity:1 !important;
}
html body.cymart-theme-light .cymart-imei-page .card-product .searchme,
html body.cymart-theme-light .cymart-imei-page .card-product .service-name,
html body.cymart-theme-light .cymart-imei-page .card-product .truncate-text,
html body.cymart-theme-light .cymart-imei-page .card-product .text-muted,
html body.cymart-theme-light .cymart-imei-page .card-product .col:not(.col-group-icon),
html body.cymart-theme-light .cymart-imei-page .card-product .col:not(.col-group-icon) *,
html body:not(.cymart-theme-dark) .cymart-imei-page .card-product .searchme,
html body:not(.cymart-theme-dark) .cymart-imei-page .card-product .service-name,
html body:not(.cymart-theme-dark) .cymart-imei-page .card-product .truncate-text,
html body:not(.cymart-theme-dark) .cymart-imei-page .card-product .text-muted,
html body:not(.cymart-theme-dark) .cymart-imei-page .card-product .col:not(.col-group-icon),
html body:not(.cymart-theme-dark) .cymart-imei-page .card-product .col:not(.col-group-icon) * {
  color:#111827 !important;
  -webkit-text-fill-color:#111827 !important;
  text-shadow:none !important;
  opacity:1 !important;
}
/* restore badge-specific colors after the broad text rule */
html body.cymart-theme-light .cymart-imei-page .card-product .badge-success,
html body:not(.cymart-theme-dark) .cymart-imei-page .card-product .badge-success {
  background:#16bd72 !important;
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
}
html body.cymart-theme-light .cymart-imei-page .card-product .badge-warning,
html body:not(.cymart-theme-dark) .cymart-imei-page .card-product .badge-warning {
  background:#ffcf32 !important;
  color:#171717 !important;
  -webkit-text-fill-color:#171717 !important;
}
html body.cymart-theme-light .cymart-imei-page .card-product .textred,
html body:not(.cymart-theme-dark) .cymart-imei-page .card-product .textred {
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  background:#ef334f !important;
}

/* 5) Requested black/dark border around each service card in LIGHT mode. */
html body.cymart-theme-light .cymart-imei-page .service .card-product,
html body.cymart-theme-light .cymart-imei-page .card-product,
html body:not(.cymart-theme-dark) .cymart-imei-page .service .card-product,
html body:not(.cymart-theme-dark) .cymart-imei-page .card-product {
  border:1.5px solid rgba(17,24,39,.72) !important;
  box-shadow:0 10px 25px rgba(34,45,70,.10), inset 0 1px 0 rgba(255,255,255,.90) !important;
}

/* 6) Keep light-mode footer/copyright/menu text dark everywhere. */
html body.cymart-theme-light .footer-top,
html body.cymart-theme-light .footer-bottom,
html body.cymart-theme-light footer,
html body:not(.cymart-theme-dark) .footer-top,
html body:not(.cymart-theme-dark) .footer-bottom,
html body:not(.cymart-theme-dark) footer {
  background:rgba(248,251,255,.90) !important;
}
html body.cymart-theme-light footer *:not(.btn):not(.badge),
html body:not(.cymart-theme-dark) footer *:not(.btn):not(.badge) {
  color:#111827 !important;
  -webkit-text-fill-color:#111827 !important;
  text-shadow:none !important;
  opacity:1 !important;
}

/* ---- SOURCE: /templates/default/css/cymart-visual-v16-13.css ---- */
/* ======================================================================
   CYMART VISUAL V16.13 — FILTER + ORDER MODAL POLISH
   Visual only. Does not change order logic, AJAX, sessions or APIs.
   ====================================================================== */

/* ----------------------------------------------------------------------
   1) Remove the stray vertical bar / arrow artifact inside "All Group"
   ---------------------------------------------------------------------- */
html body .cymart-imei-page .card-search .chosen-container-single .chosen-single div,
html body .cymart-imei-page .card-search .chosen-container-single .chosen-single div b,
html body .cymart-imei-page .card-search .chosen-container-single .chosen-single abbr {
  display:none !important;
  visibility:hidden !important;
  width:0 !important;
  height:0 !important;
  background:none !important;
  border:0 !important;
  box-shadow:none !important;
}
html body .cymart-imei-page .card-search .chosen-container-single .chosen-single span {
  margin-right:0 !important;
  padding-left:0 !important;
}
html body .cymart-imei-page .card-search .chosen-container-single .chosen-single {
  padding-left:13px !important;
  padding-right:13px !important;
  background-image:none !important;
  box-shadow:none !important;
}
html body .cymart-imei-page .card-search select.form-control {
  background-image:none !important;
  text-indent:0 !important;
  padding-left:13px !important;
  padding-right:13px !important;
  outline:none !important;
}

/* ----------------------------------------------------------------------
   2) Order popup must always sit ABOVE the website menu/header
      and begin below the top navigation instead of being covered by it.
   ---------------------------------------------------------------------- */
html body #modal-order.modal {
  z-index:2147483000 !important;
  padding:0 !important;
  overflow:hidden !important;
}
html body #modal-order .backdrop-over {
  position:fixed !important;
  inset:0 !important;
  width:100vw !important;
  height:100vh !important;
  z-index:0 !important;
  background:rgba(3,8,22,.64) !important;
  backdrop-filter:blur(2px) !important;
  -webkit-backdrop-filter:blur(2px) !important;
}
html body #modal-order .modal-dialog {
  position:relative !important;
  z-index:2 !important;
  display:block !important;
  align-items:initial !important;
  min-height:0 !important;
  height:auto !important;
  width:calc(100% - 34px) !important;
  max-width:860px !important;
  margin:158px auto 22px !important;
  transform:none !important;
}
html body #modal-order .modal-content {
  width:100% !important;
  height:auto !important;
  max-height:calc(100vh - 180px) !important;
  overflow:hidden !important;
  border-radius:16px !important;
  box-shadow:0 28px 70px rgba(0,0,0,.34) !important;
}
html body #modal-order .modal-header {
  min-height:46px !important;
  padding:9px 14px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  flex:0 0 auto !important;
  border-bottom-width:1px !important;
}
html body #modal-order .modal-header .service-title,
html body #modal-order .modal-header .modal-title {
  margin:0 !important;
  padding:0 !important;
  font-size:15px !important;
  line-height:1.25 !important;
  font-weight:700 !important;
  max-width:calc(100% - 46px) !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}
html body #modal-order .modal-header .close {
  position:static !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:34px !important;
  height:34px !important;
  margin:0 !important;
  padding:0 !important;
  font-size:25px !important;
  line-height:1 !important;
  opacity:.9 !important;
}
html body #modal-order .modal-body {
  padding:12px !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;
  max-height:calc(100vh - 228px) !important;
}

/* Compact the loaded service/order view without changing its functionality. */
html body #modal-order #serviceDetails2,
html body #modal-order #serviceDetails2 > div,
html body #modal-order .modal-body > div {
  max-width:100% !important;
}
html body #modal-order .row.h-100 {
  margin-left:-6px !important;
  margin-right:-6px !important;
  height:auto !important;
}
html body #modal-order .placeorder-field,
html body #modal-order .placeorder-details {
  padding-left:6px !important;
  padding-right:6px !important;
  height:auto !important;
}
html body #modal-order .card-place-retail-order {
  min-height:0 !important;
  height:auto !important;
  padding:13px !important;
  border-radius:11px !important;
  box-shadow:none !important;
}
html body #modal-order .form-group {
  margin-bottom:10px !important;
}
html body #modal-order textarea.form-control {
  min-height:120px !important;
  max-height:190px !important;
}
html body #modal-order .service-information {
  margin-top:12px !important;
  font-size:14px !important;
  line-height:1.48 !important;
  overflow-wrap:anywhere !important;
}
html body #modal-order .service-information * {
  line-height:1.48 !important;
}
html body #modal-order .service-information p,
html body #modal-order .service-information div {
  margin-bottom:7px !important;
}
html body #modal-order .service-information h1,
html body #modal-order .service-information h2,
html body #modal-order .service-information h3,
html body #modal-order .service-information h4,
html body #modal-order .service-information h5,
html body #modal-order .service-information h6 {
  font-size:15px !important;
  line-height:1.4 !important;
  margin-bottom:8px !important;
}
html body #modal-order .service-information strong,
html body #modal-order .service-information b {
  font-size:14px !important;
}
html body #modal-order .order-total {
  font-size:22px !important;
}

/* ----------------------------------------------------------------------
   3) Light-mode popup: clean service + description view
   ---------------------------------------------------------------------- */
html body.cymart-theme-light #modal-order .modal-content,
html body:not(.cymart-theme-dark) #modal-order .modal-content {
  background:rgba(248,251,255,.98) !important;
  color:#111827 !important;
  border:1px solid rgba(119,151,211,.50) !important;
}
html body.cymart-theme-light #modal-order .modal-header,
html body:not(.cymart-theme-dark) #modal-order .modal-header {
  background:#ffffff !important;
  color:#111827 !important;
  border-bottom-color:#dbe4f0 !important;
}
html body.cymart-theme-light #modal-order .modal-header *,
html body:not(.cymart-theme-dark) #modal-order .modal-header * {
  color:#111827 !important;
  -webkit-text-fill-color:#111827 !important;
}
html body.cymart-theme-light #modal-order .card-place-retail-order,
html body:not(.cymart-theme-dark) #modal-order .card-place-retail-order {
  background:#ffffff !important;
  color:#111827 !important;
  border:1px solid #d4dfef !important;
}
html body.cymart-theme-light #modal-order .card-place-retail-order *,
html body:not(.cymart-theme-dark) #modal-order .card-place-retail-order * {
  text-shadow:none !important;
}
html body.cymart-theme-light #modal-order .service-information,
html body.cymart-theme-light #modal-order .service-information *,
html body:not(.cymart-theme-dark) #modal-order .service-information,
html body:not(.cymart-theme-dark) #modal-order .service-information * {
  color:#172033 !important;
  -webkit-text-fill-color:#172033 !important;
}
html body.cymart-theme-light #modal-order .form-control,
html body:not(.cymart-theme-dark) #modal-order .form-control {
  background:#ffffff !important;
  color:#111827 !important;
  -webkit-text-fill-color:#111827 !important;
  border-color:#c7d5e8 !important;
}
html body.cymart-theme-light #modal-order .text-muted,
html body:not(.cymart-theme-dark) #modal-order .text-muted {
  color:#5f6d84 !important;
}

/* ----------------------------------------------------------------------
   4) Dark-mode popup: same layout, dark glass style
   ---------------------------------------------------------------------- */
html body.cymart-theme-dark #modal-order .modal-content {
  background:rgba(5,14,35,.97) !important;
  color:#f2f5ff !important;
  border:1px solid rgba(82,146,255,.42) !important;
}
html body.cymart-theme-dark #modal-order .modal-header {
  background:rgba(7,18,43,.98) !important;
  color:#ffffff !important;
  border-bottom-color:rgba(86,145,238,.28) !important;
}
html body.cymart-theme-dark #modal-order .modal-header *,
html body.cymart-theme-dark #modal-order .service-information,
html body.cymart-theme-dark #modal-order .service-information * {
  color:#f2f5ff !important;
  -webkit-text-fill-color:#f2f5ff !important;
}
html body.cymart-theme-dark #modal-order .card-place-retail-order {
  background:rgba(7,20,49,.82) !important;
  color:#f2f5ff !important;
  border:1px solid rgba(76,139,233,.30) !important;
}
html body.cymart-theme-dark #modal-order .form-control {
  background:rgba(5,20,50,.78) !important;
  color:#f2f5ff !important;
  -webkit-text-fill-color:#f2f5ff !important;
  border-color:rgba(79,155,255,.38) !important;
}
html body.cymart-theme-dark #modal-order .text-muted {
  color:#c8d3eb !important;
}

/* ----------------------------------------------------------------------
   5) Make sure the fixed website header can NEVER cover this popup.
   ---------------------------------------------------------------------- */
html body:has(#modal-order[style*="display: block"]) .header-top,
html body:has(#modal-order[style*="display: block"]) .header-middle,
html body:has(#modal-order[style*="display:block"]) .header-top,
html body:has(#modal-order[style*="display:block"]) .header-middle {
  z-index:10 !important;
}

/* Mobile/tablet: keep popup below the compact menu and use almost all width. */
@media (max-width:767.98px) {
  html body #modal-order .modal-dialog {
    width:calc(100% - 16px) !important;
    max-width:none !important;
    margin:92px auto 8px !important;
  }
  html body #modal-order .modal-content {
    max-height:calc(100vh - 102px) !important;
    border-radius:12px !important;
  }
  html body #modal-order .modal-body {
    max-height:calc(100vh - 152px) !important;
    padding:9px !important;
  }
  html body #modal-order .placeorder-field,
  html body #modal-order .placeorder-details {
    flex:0 0 100% !important;
    max-width:100% !important;
  }
  html body #modal-order .service-information {
    font-size:13px !important;
  }
}

/* ---- SOURCE: /templates/default/css/cymart-visual-v16-14.css ---- */
/* ======================================================================
   CYMART VISUAL V16.14 — RESTORE ORDER MODAL + REMOVE SELECT CARET
   Visual only. Does not change order logic, AJAX, sessions or APIs.
   ====================================================================== */

/* ----------------------------------------------------------------------
   1) "All Group": remove the vertical caret/bar drawn over the text.
   The select remains fully functional.
   ---------------------------------------------------------------------- */
html body .cymart-imei-page .card-search select.form-control {
  caret-color:transparent !important;
  -webkit-caret-color:transparent !important;
  user-select:none !important;
  -webkit-user-select:none !important;
  text-indent:0 !important;
  padding-left:14px !important;
  background-image:none !important;
  outline:none !important;
  box-shadow:none !important;
}
html body .cymart-imei-page .card-search select.form-control:focus,
html body .cymart-imei-page .card-search select.form-control:active {
  caret-color:transparent !important;
  -webkit-caret-color:transparent !important;
  outline:none !important;
  box-shadow:0 0 0 2px rgba(73,125,220,.08) !important;
}
html body .cymart-imei-page .card-search select.form-control::-ms-expand {
  display:none !important;
}

/* ----------------------------------------------------------------------
   2) RESTORE the service/order popup.
   V16.13 changed .modal-dialog-centered to display:block, while Bootstrap
   keeps a tall ::before spacer on that class. That pushed the actual modal
   content outside the visible viewport. We explicitly remove that spacer.
   ---------------------------------------------------------------------- */
html body #modal-order.modal {
  position:fixed !important;
  inset:0 !important;
  z-index:2147483000 !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;
  padding:142px 16px 18px !important;
}

html body #modal-order .backdrop-over {
  position:fixed !important;
  inset:0 !important;
  z-index:0 !important;
  background:rgba(3,8,22,.62) !important;
  backdrop-filter:blur(2px) !important;
  -webkit-backdrop-filter:blur(2px) !important;
}

html body #modal-order .modal-dialog,
html body #modal-order .modal-dialog-centered {
  position:relative !important;
  z-index:2 !important;
  display:block !important;
  width:100% !important;
  max-width:790px !important;
  min-height:0 !important;
  height:auto !important;
  margin:0 auto !important;
  padding:0 !important;
  transform:none !important;
  pointer-events:auto !important;
}

/* Critical fix: prevent Bootstrap's centering spacer from pushing content away. */
html body #modal-order .modal-dialog-centered::before {
  content:none !important;
  display:none !important;
  width:0 !important;
  height:0 !important;
  min-height:0 !important;
}

html body #modal-order .modal-content {
  position:relative !important;
  z-index:3 !important;
  display:flex !important;
  flex-direction:column !important;
  width:100% !important;
  height:auto !important;
  min-height:0 !important;
  max-height:calc(100vh - 160px) !important;
  visibility:visible !important;
  opacity:1 !important;
  overflow:hidden !important;
  border-radius:14px !important;
  pointer-events:auto !important;
}

html body #modal-order .modal-header {
  display:flex !important;
  flex:0 0 auto !important;
  align-items:center !important;
  justify-content:space-between !important;
  min-height:42px !important;
  padding:8px 12px !important;
}

html body #modal-order .modal-header .modal-title,
html body #modal-order .modal-header .service-title {
  display:block !important;
  margin:0 !important;
  font-size:14px !important;
  line-height:1.25 !important;
  font-weight:700 !important;
  max-width:calc(100% - 42px) !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

html body #modal-order .modal-body {
  display:block !important;
  flex:1 1 auto !important;
  min-height:0 !important;
  max-height:calc(100vh - 210px) !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;
  padding:10px !important;
}

/* Make sure the AJAX target and its loaded service are never hidden. */
html body #modal-order #serviceDetails2,
html body #modal-order #serviceDetails2 > div,
html body #modal-order .modal-body > div {
  visibility:visible !important;
  opacity:1 !important;
  max-width:100% !important;
}
html body #modal-order #serviceDetails2 {
  display:flex !important;
  flex-direction:column !important;
  min-height:40px !important;
}

/* Keep the two service columns, only slightly more compact. */
html body #modal-order .row.h-100 {
  height:auto !important;
  min-height:0 !important;
  margin-left:-5px !important;
  margin-right:-5px !important;
}
html body #modal-order .placeorder-field,
html body #modal-order .placeorder-details {
  height:auto !important;
  min-height:0 !important;
  padding-left:5px !important;
  padding-right:5px !important;
}
html body #modal-order .card-place-retail-order {
  height:auto !important;
  min-height:0 !important;
  padding:11px !important;
  border-radius:10px !important;
}
html body #modal-order .form-group {
  margin-bottom:8px !important;
}
html body #modal-order textarea.form-control {
  min-height:105px !important;
  max-height:155px !important;
}
html body #modal-order .service-information {
  margin-top:8px !important;
  font-size:13px !important;
  line-height:1.40 !important;
  overflow-wrap:anywhere !important;
}
html body #modal-order .service-information * {
  line-height:1.40 !important;
}
html body #modal-order .service-information p,
html body #modal-order .service-information div {
  margin-bottom:5px !important;
}
html body #modal-order .service-information h1,
html body #modal-order .service-information h2,
html body #modal-order .service-information h3,
html body #modal-order .service-information h4,
html body #modal-order .service-information h5,
html body #modal-order .service-information h6 {
  font-size:14px !important;
  line-height:1.35 !important;
  margin:0 0 6px !important;
}
html body #modal-order .service-information strong,
html body #modal-order .service-information b {
  font-size:13px !important;
}

/* Light appearance */
html body.cymart-theme-light #modal-order .modal-content,
html body:not(.cymart-theme-dark) #modal-order .modal-content {
  background:rgba(248,251,255,.99) !important;
  color:#111827 !important;
  border:1px solid rgba(117,151,211,.46) !important;
  box-shadow:0 24px 58px rgba(31,48,86,.26) !important;
}
html body.cymart-theme-light #modal-order .modal-header,
html body:not(.cymart-theme-dark) #modal-order .modal-header {
  background:#ffffff !important;
  color:#111827 !important;
  border-bottom:1px solid #d8e2f0 !important;
}
html body.cymart-theme-light #modal-order .modal-body,
html body:not(.cymart-theme-dark) #modal-order .modal-body {
  background:rgba(247,250,255,.98) !important;
  color:#111827 !important;
}

/* Dark appearance */
html body.cymart-theme-dark #modal-order .modal-content {
  background:rgba(5,14,35,.98) !important;
  color:#f3f6ff !important;
  border:1px solid rgba(80,145,255,.42) !important;
  box-shadow:0 24px 60px rgba(0,0,0,.40) !important;
}
html body.cymart-theme-dark #modal-order .modal-header {
  background:rgba(7,18,43,.98) !important;
  color:#ffffff !important;
  border-bottom:1px solid rgba(80,145,255,.26) !important;
}
html body.cymart-theme-dark #modal-order .modal-body {
  background:rgba(4,16,38,.98) !important;
  color:#f3f6ff !important;
}

/* The site header stays visible above the page, but never covers the popup. */
html body #modal-order ~ .header-top,
html body #modal-order ~ .header-middle {
  z-index:10 !important;
}

/* Smaller screens: preserve the service and description, stacked if needed. */
@media (max-width:767.98px) {
  html body #modal-order.modal {
    padding:88px 8px 8px !important;
  }
  html body #modal-order .modal-dialog,
  html body #modal-order .modal-dialog-centered {
    max-width:none !important;
    width:100% !important;
  }
  html body #modal-order .modal-content {
    max-height:calc(100vh - 96px) !important;
    border-radius:11px !important;
  }
  html body #modal-order .modal-body {
    max-height:calc(100vh - 140px) !important;
    padding:8px !important;
  }
  html body #modal-order .placeorder-field,
  html body #modal-order .placeorder-details {
    flex:0 0 100% !important;
    max-width:100% !important;
  }
  html body #modal-order .service-information {
    font-size:12.5px !important;
  }
}

/* ---- SOURCE: /templates/default/css/cymart-visual-v16-15.css ---- */
/* ======================================================================
   CYMART VISUAL V16.15 — MODAL ABOVE MENU + FULL BACKDROP BLUR
   Visual only. No order/AJAX/session/API logic is changed.
   ====================================================================== */

/* ----------------------------------------------------------------------
   1) ALL GROUP: Chosen replaces the <select> with its own DOM. The thin
      vertical bar comes from Chosen's right-side decoration. Hide only
      that decoration; the selector remains fully clickable/functional.
   ---------------------------------------------------------------------- */
html body .cymart-imei-page .card-search .chosen-container-single .chosen-single {
  padding-left:14px !important;
  padding-right:14px !important;
  background-image:none !important;
  box-shadow:none !important;
}
html body .cymart-imei-page .card-search .chosen-container-single .chosen-single > div,
html body .cymart-imei-page .card-search .chosen-container-single .chosen-single > div > b {
  display:none !important;
  width:0 !important;
  border:0 !important;
  background:none !important;
}
html body .cymart-imei-page .card-search .chosen-container-single .chosen-single span {
  margin-right:0 !important;
}

/* ----------------------------------------------------------------------
   2) WHEN ORDER MODAL IS OPEN, its parent stacking context must sit ABOVE
      the header. Previous versions gave #modal-order a high z-index, but
      its parent .container had z-index:2, so the header still won.
   ---------------------------------------------------------------------- */
html body.cymart-order-modal-open .cymart-imei-page > .container {
  position:relative !important;
  z-index:2147482000 !important;
}

/* The site menu remains underneath the modal/backdrop, never over it. */
html body.cymart-order-modal-open header,
html body.cymart-order-modal-open .header-top,
html body.cymart-order-modal-open .header-middle,
html body.cymart-order-modal-open .header-bottom {
  z-index:1 !important;
  pointer-events:none !important;
}

/* ----------------------------------------------------------------------
   3) MODAL fills viewport layer. No 142px top padding anymore: the service
      is allowed to sit over the menu while the menu is blurred underneath.
   ---------------------------------------------------------------------- */
html body #modal-order.modal {
  position:fixed !important;
  inset:0 !important;
  z-index:2147483000 !important;
  width:100vw !important;
  height:100vh !important;
  padding:16px !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;
}

html body #modal-order .backdrop-over {
  position:fixed !important;
  inset:0 !important;
  z-index:0 !important;
  pointer-events:auto !important;
  background:rgba(5,12,31,.52) !important;
  backdrop-filter:blur(7px) saturate(82%) !important;
  -webkit-backdrop-filter:blur(7px) saturate(82%) !important;
}
html body.cymart-theme-light #modal-order .backdrop-over,
html body:not(.cymart-theme-dark) #modal-order .backdrop-over {
  background:rgba(30,52,91,.38) !important;
}
html body.cymart-theme-dark #modal-order .backdrop-over {
  background:rgba(2,7,22,.58) !important;
}

html body #modal-order .modal-dialog,
html body #modal-order .modal-dialog-centered {
  position:relative !important;
  z-index:2 !important;
  display:block !important;
  width:calc(100% - 20px) !important;
  max-width:760px !important;
  min-height:0 !important;
  height:auto !important;
  margin:5vh auto 18px !important;
  padding:0 !important;
  transform:none !important;
  pointer-events:auto !important;
}
html body #modal-order .modal-dialog-centered::before {
  content:none !important;
  display:none !important;
  height:0 !important;
  min-height:0 !important;
}

html body #modal-order .modal-content {
  position:relative !important;
  z-index:3 !important;
  width:100% !important;
  max-height:90vh !important;
  overflow:hidden !important;
  border-radius:14px !important;
}
html body #modal-order .modal-header {
  min-height:42px !important;
  padding:8px 12px !important;
  flex:0 0 auto !important;
}
html body #modal-order .modal-body {
  min-height:0 !important;
  max-height:calc(90vh - 45px) !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;
  padding:10px !important;
}

/* Compact service layout: keep BOTH order fields and description visible. */
html body #modal-order .row.h-100 {
  height:auto !important;
  min-height:0 !important;
  margin-left:-5px !important;
  margin-right:-5px !important;
}
html body #modal-order .placeorder-field,
html body #modal-order .placeorder-details {
  height:auto !important;
  min-height:0 !important;
  padding-left:5px !important;
  padding-right:5px !important;
}
html body #modal-order .card-place-retail-order {
  height:auto !important;
  min-height:0 !important;
  padding:10px !important;
  border-radius:10px !important;
}
html body #modal-order textarea.form-control {
  min-height:100px !important;
  max-height:145px !important;
}
html body #modal-order .form-group {
  margin-bottom:7px !important;
}
html body #modal-order .service-information {
  margin-top:7px !important;
  font-size:12.5px !important;
  line-height:1.36 !important;
  overflow-wrap:anywhere !important;
}
html body #modal-order .service-information * {
  line-height:1.36 !important;
}
html body #modal-order .service-information p,
html body #modal-order .service-information div {
  margin-bottom:4px !important;
}
html body #modal-order .service-information h1,
html body #modal-order .service-information h2,
html body #modal-order .service-information h3,
html body #modal-order .service-information h4,
html body #modal-order .service-information h5,
html body #modal-order .service-information h6,
html body #modal-order .service-information strong,
html body #modal-order .service-information b {
  font-size:13px !important;
  line-height:1.34 !important;
}

/* Light modal */
html body.cymart-theme-light #modal-order .modal-content,
html body:not(.cymart-theme-dark) #modal-order .modal-content {
  background:rgba(250,252,255,.98) !important;
  color:#111827 !important;
  border:1px solid rgba(126,157,216,.48) !important;
  box-shadow:0 30px 80px rgba(14,29,58,.32) !important;
}
html body.cymart-theme-light #modal-order .modal-header,
html body.cymart-theme-light #modal-order .modal-body,
html body:not(.cymart-theme-dark) #modal-order .modal-header,
html body:not(.cymart-theme-dark) #modal-order .modal-body {
  background:rgba(250,252,255,.98) !important;
  color:#111827 !important;
}

/* Dark modal */
html body.cymart-theme-dark #modal-order .modal-content {
  background:rgba(5,15,38,.97) !important;
  color:#f3f6ff !important;
  border:1px solid rgba(92,145,255,.42) !important;
  box-shadow:0 30px 86px rgba(0,0,0,.48) !important;
}
html body.cymart-theme-dark #modal-order .modal-header,
html body.cymart-theme-dark #modal-order .modal-body {
  background:rgba(5,15,38,.97) !important;
  color:#f3f6ff !important;
}

/* Mobile: service stays on top, content stacks vertically. */
@media (max-width:767.98px) {
  html body #modal-order.modal {
    padding:8px !important;
  }
  html body #modal-order .modal-dialog,
  html body #modal-order .modal-dialog-centered {
    width:100% !important;
    max-width:none !important;
    margin:10px auto !important;
  }
  html body #modal-order .modal-content {
    max-height:calc(100vh - 20px) !important;
    border-radius:11px !important;
  }
  html body #modal-order .modal-body {
    max-height:calc(100vh - 66px) !important;
    padding:8px !important;
  }
  html body #modal-order .placeorder-field,
  html body #modal-order .placeorder-details {
    flex:0 0 100% !important;
    max-width:100% !important;
  }
  html body #modal-order .service-information {
    font-size:12px !important;
  }
}

/* ---- SOURCE: /templates/default/css/cymart-visual-v16-16.css ---- */
/* ======================================================================
   CYMART VISUAL V16.16 — MOBILE VIEW CLEANUP
   Visual-only mobile fixes. No order/session/API logic is changed.
   ====================================================================== */

/* ----------------------------------------------------------------------
   1) MOBILE SIDE MENU: white surface with black text for readability.
   ---------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  html body #navbarToggler1.modal-menu .modal-dialog {
    width: min(88vw, 380px) !important;
    max-width: min(88vw, 380px) !important;
    margin: 0 !important;
  }

  html body #navbarToggler1.modal-menu .modal-content,
  html body #navbarToggler1.modal-menu .modal-header,
  html body #navbarToggler1.modal-menu .modal-body {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #111827 !important;
  }

  html body #navbarToggler1.modal-menu .modal-header {
    border-bottom: 1px solid rgba(17, 24, 39, 0.08) !important;
  }

  html body #navbarToggler1.modal-menu .modal-body {
    border-top: 0 !important;
  }

  html body #navbarToggler1.modal-menu .modal-header a,
  html body #navbarToggler1.modal-menu .modal-header strong,
  html body #navbarToggler1.modal-menu .modal-header span,
  html body #navbarToggler1.modal-menu .modal-header .navbar-brand,
  html body #navbarToggler1.modal-menu .modal-body a.nav-link,
  html body #navbarToggler1.modal-menu .modal-body a.dropdown-item,
  html body #navbarToggler1.modal-menu .modal-body .catloglist li a,
  html body #navbarToggler1.modal-menu .modal-body ul li > a,
  html body #navbarToggler1.modal-menu .modal-body li,
  html body #navbarToggler1.modal-menu .modal-body .dropdown-toggle,
  html body #navbarToggler1.modal-menu .modal-body .dropdown-toggle i {
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
    text-shadow: none !important;
  }

  html body #navbarToggler1.modal-menu .modal-body .dropdown-menu,
  html body #navbarToggler1.modal-menu .modal-body .collapse,
  html body #navbarToggler1.modal-menu .modal-body .card,
  html body #navbarToggler1.modal-menu .modal-body .list-group-item {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border-color: rgba(148, 163, 184, 0.35) !important;
  }

  html body #navbarToggler1.modal-menu .modal-body ul > li,
  html body #navbarToggler1.modal-menu .modal-body .dropdown-item,
  html body #navbarToggler1.modal-menu .modal-body a.nav-link {
    border-color: rgba(148, 163, 184, 0.25) !important;
  }
}

/* ----------------------------------------------------------------------
   2) MOBILE HEADER CLEANUP: keep only hamburger + logo in the white bar.
      Hide duplicated Products / My Account strips and the extra dark band.
   ---------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  html body .header-middle {
    width: calc(100vw - 12px) !important;
    max-width: calc(100vw - 12px) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin-top: 10px !important;
  }

  html body .header-middle > .container {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  html body .header-middle > .container > nav.navbar-xl {
    min-height: 86px !important;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    position: relative !important;
  }

  html body .header-middle > .container > nav.navbar-xl > .d-none.d-lg-block,
  html body .header-middle > .container > nav.navbar-xl > ul.navbar-nav,
  html body .header-middle > .container > nav.navbar-xl > div[style*="max-width:500px"],
  html body .header-middle > .container > nav.navbar-xl > div[style*="max-width: 500px"] {
    display: none !important;
  }

  html body .header-middle .navbar-toggler {
    order: 1 !important;
    margin-right: 10px !important;
    margin-left: 0 !important;
    flex: 0 0 auto !important;
  }

  html body .header-middle .navbar-brand {
    order: 2 !important;
    margin: 0 !important;
    margin-right: auto !important;
    flex: 0 0 auto !important;
  }

  html body header > .header-bottom.position-relative:not(.header-middle) {
    display: none !important;
  }

  /* Safety net: if any duplicated inline dropdown still renders in mobile,
     hide it from the page bar (the full menu remains available in the modal). */
  html body .header-middle .nav-item.dropdown.d-block.d-lg-none,
  html body .header-middle .profile,
  html body .header-middle .cartminiview {
    display: none !important;
  }
}

/* ----------------------------------------------------------------------
   3) TOP BAR ON MOBILE: hide theme gear, leave language/currency usable.
   ---------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  html body .header-top .container,
  html body .header-top nav {
    overflow: visible !important;
  }

  html body .header-top .ml-auto.d-flex {
    margin-left: auto !important;
    gap: 8px !important;
    align-items: center !important;
  }

  html body .header-top .dropdown-menu {
    z-index: 2147482100 !important;
  }

  html body .header-top .nav-item-curlang,
  html body .header-top .nav-item-curlang > a {
    position: relative !important;
    z-index: 2147482101 !important;
  }
}

/* ----------------------------------------------------------------------
   4) SERVICE ORDER MODAL ON MOBILE: use full width and remove blank area.
   ---------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  html body #modal-order.modal {
    padding: 8px !important;
    overflow-y: auto !important;
  }

  html body #modal-order .modal-dialog,
  html body #modal-order .modal-dialog-centered {
    width: 100% !important;
    max-width: 100% !important;
    margin: 6px auto !important;
  }

  html body #modal-order .modal-content {
    max-height: none !important;
    overflow: visible !important;
  }

  html body #modal-order .modal-body {
    max-height: none !important;
    overflow: visible !important;
    padding: 10px !important;
  }

  html body #modal-order .placeorder-field,
  html body #modal-order .placeorder-details,
  html body #modal-order .col-left,
  html body #modal-order .col-right,
  html body #modal-order [class*="col-lg-"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  html body #modal-order .placeorder-field {
    margin-bottom: 12px !important;
  }

  html body #modal-order .card,
  html body #modal-order .card-min-height,
  html body #modal-order .card-place-retail-order,
  html body #modal-order .h-100 {
    min-height: 0 !important;
    height: auto !important;
  }

  html body #modal-order .form-group,
  html body #modal-order .controls,
  html body #modal-order .custom-control,
  html body #modal-order .service-information {
    width: 100% !important;
    max-width: 100% !important;
  }

  html body #modal-order textarea,
  html body #modal-order input.form-control,
  html body #modal-order select.form-control,
  html body #modal-order .chosen-container,
  html body #modal-order .chosen-container-single,
  html body #modal-order .chosen-single {
    width: 100% !important;
    max-width: 100% !important;
  }

  html body #modal-order .input-imei .d-flex,
  html body #modal-order .d-flex.justify-content-start,
  html body #modal-order .d-flex {
    flex-wrap: wrap !important;
  }

  html body #modal-order .input-imei .d-flex > *,
  html body #modal-order .d-flex.justify-content-start > * {
    max-width: 100% !important;
  }

  html body #modal-order .service-information {
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }
}

/* ----------------------------------------------------------------------
   5) MOBILE LOGIN: keep the CAPTCHA visible and move the Login button down.
   ---------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  html body.page-login .page-login,
  html body .page-login {
    padding-top: 16px !important;
  }

  html body.page-login .page-login .login-panel,
  html body .page-login .login-panel {
    padding-bottom: 28px !important;
  }

  html body.page-login .page-login .input-captcha,
  html body .page-login .input-captcha {
    margin-bottom: 18px !important;
    position: relative !important;
    z-index: 3 !important;
  }

  html body.page-login .page-login .d-actionbar-mobile,
  html body .page-login .d-actionbar-mobile {
    margin-top: 18px !important;
    position: relative !important;
    z-index: 1 !important;
  }
}

/* ---- SOURCE: /templates/default/css/cymart-visual-v16-17.css ---- */
/* ======================================================================
   CYMART VISUAL V16.17 — MOBILE FINAL FIXES
   MOBILE ONLY. Desktop/PC styles are intentionally untouched.
   ====================================================================== */

@media (max-width: 991.98px) {
  /* 1) Public mobile menu: Registration must never be black-on-black */
  html body #navbarToggler1.modal-menu .nav-registration,
  html body #navbarToggler1.modal-menu .nav-login {
    background:#ffffff !important;
    color:#111827 !important;
    -webkit-text-fill-color:#111827 !important;
    text-shadow:none !important;
    border:1px solid rgba(148,163,184,.35) !important;
  }

  html body #navbarToggler1.modal-menu .nav-registration:hover,
  html body #navbarToggler1.modal-menu .nav-registration:focus,
  html body #navbarToggler1.modal-menu .nav-login:hover,
  html body #navbarToggler1.modal-menu .nav-login:focus {
    background:#eef5ff !important;
    color:#111827 !important;
  }

  html body.page-register #navbarToggler1.modal-menu .nav-registration,
  html body.tpl-client_registration #navbarToggler1.modal-menu .nav-registration,
  html body[class*="registration"] #navbarToggler1.modal-menu .nav-registration {
    background:linear-gradient(90deg,#eef4ff,#f6efff) !important;
    box-shadow:inset 0 -3px 0 #5b6cff !important;
    font-weight:700 !important;
  }

  /* 2) Global mobile action bars must NOT cover form controls */
  html body .d-actionbar-mobile {
    position:static !important;
    left:auto !important;
    right:auto !important;
    bottom:auto !important;
    top:auto !important;
    width:100% !important;
    margin:16px 0 0 !important;
    padding:0 !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    z-index:auto !important;
  }

  html body .d-actionbar-mobile .btn {
    min-height:50px !important;
  }

  /* 3) Registration wizard: all fields must be reachable before NEXT */
  html body .card-registration,
  html body .card-registration > div,
  html body .page-registration,
  html body .registration-steps,
  html body #registration,
  html body #registration .tab-content,
  html body #registration .tab-pane,
  html body #registration .form-row {
    height:auto !important;
    max-height:none !important;
    min-height:0 !important;
    overflow:visible !important;
  }

  html body .card-registration {
    padding-bottom:18px !important;
  }

  html body .page-registration {
    width:100% !important;
    max-width:100% !important;
    padding:0 14px 18px !important;
  }

  html body #registration .tab-pane {
    padding-bottom:0 !important;
  }

  html body #registration .form-row > .form-group.col,
  html body #registration .form-row > .form-group.col-lg-6,
  html body #registration .form-row > .form-group.col-md-6,
  html body #registration .form-row > .form-group.col-sm-6 {
    flex:0 0 100% !important;
    max-width:100% !important;
    width:100% !important;
  }

  html body #registration .form-control,
  html body #registration select,
  html body #registration input,
  html body #registration textarea,
  html body #registration .chosen-container,
  html body #registration .chosen-container-single,
  html body #registration .chosen-single {
    width:100% !important;
    max-width:100% !important;
  }

  html body #registration .d-actionbar-mobile {
    margin-top:18px !important;
    margin-bottom:6px !important;
  }

  /* 4) Service modal: custom fields (mail, etc.) must be visible and editable */
  html body #modal-order .modal-dialog,
  html body #modal-order .modal-content,
  html body #modal-order .modal-body,
  html body #modal-order .row,
  html body #modal-order .placeorder-field,
  html body #modal-order .placeorder-details,
  html body #modal-order .card,
  html body #modal-order .card-place-retail-order,
  html body #modal-order .card-min-height {
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    overflow:visible !important;
  }

  html body #modal-order .placeorder-field,
  html body #modal-order .placeorder-details {
    flex:0 0 100% !important;
    max-width:100% !important;
    width:100% !important;
  }

  html body #modal-order .form-group,
  html body #modal-order .custom-controls,
  html body #modal-order .custom-controls .controls,
  html body #modal-order .input-imei,
  html body #modal-order #plaorder-fields {
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    min-height:0 !important;
    overflow:visible !important;
    opacity:1 !important;
    visibility:visible !important;
  }

  html body #modal-order .custom-controls .controls > input:not([type="hidden"]),
  html body #modal-order .custom-controls .controls > select,
  html body #modal-order .custom-controls .controls > textarea,
  html body #modal-order .form-group .controls > input:not([type="hidden"]),
  html body #modal-order .form-group .controls > select,
  html body #modal-order .form-group .controls > textarea,
  html body #modal-order .chosen-container,
  html body #modal-order .chosen-container-single,
  html body #modal-order .chosen-single {
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    min-height:46px !important;
    opacity:1 !important;
    visibility:visible !important;
    position:relative !important;
    margin:6px 0 10px !important;
    color:#111827 !important;
    -webkit-text-fill-color:#111827 !important;
    background:#ffffff !important;
    border:1px solid #c9d5e5 !important;
    border-radius:8px !important;
    box-shadow:none !important;
  }

  html body #modal-order textarea {
    min-height:150px !important;
  }

  html body #modal-order .d-actionbar-mobile {
    position:static !important;
    margin:14px 0 0 !important;
    padding:0 !important;
  }

  html body #modal-order .service-information {
    display:block !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    overflow:visible !important;
    margin-top:10px !important;
  }

  /* Keep modal usable on small screens while the PAGE behind stays locked */
  html body #modal-order {
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch !important;
  }

  /* 5) Settings/Profile and other forms: buttons must follow the content */
  html body .page-container,
  html body .client-profile,
  html body .tab-content,
  html body .tab-pane,
  html body .card-simple-form {
    max-height:none !important;
    height:auto !important;
    overflow:visible !important;
  }

  html body .client-profile .d-actionbar-mobile,
  html body [class*="settings"] .d-actionbar-mobile,
  html body .card-simple-form .d-actionbar-mobile {
    position:static !important;
    margin-top:18px !important;
  }

  /* 6) Restore the top-right theme gear on mobile and keep language clickable */
  html body .header-top .cymart-mobile-theme-gear {
    display:list-item !important;
    visibility:visible !important;
    opacity:1 !important;
    pointer-events:auto !important;
    position:relative !important;
    z-index:2147483000 !important;
  }

  html body .header-top .cymart-mobile-theme-gear > a,
  html body .header-top .cymart-mobile-theme-gear .nav-link {
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-width:42px !important;
    min-height:42px !important;
    pointer-events:auto !important;
  }

  html body .header-top .cymart-mobile-theme-gear .dropdown-menu {
    position:absolute !important;
    right:0 !important;
    left:auto !important;
    top:100% !important;
    z-index:2147483600 !important;
    display:none;
  }

  html body .header-top .cymart-mobile-theme-gear.show .dropdown-menu,
  html body .header-top .cymart-mobile-theme-gear .dropdown-menu.show {
    display:block !important;
  }

  html body .header-top .nav-item-curlang,
  html body .header-top .nav-item-curlang > a,
  html body .header-top .nav-item-curlang .dropdown-menu {
    pointer-events:auto !important;
    z-index:2147483500 !important;
  }
}

/* Narrow phone tuning */
@media (max-width: 575.98px) {
  html body #modal-order .modal-dialog {
    width:calc(100vw - 12px) !important;
    max-width:calc(100vw - 12px) !important;
    margin:6px auto !important;
  }

  html body #modal-order .modal-body {
    padding:10px !important;
  }

  html body .page-registration {
    padding-left:10px !important;
    padding-right:10px !important;
  }
}

/* ---- SOURCE: /templates/default/css/cymart-visual-v16-18.css ---- */
/* ======================================================================
   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;
  }
}

/* ---- SOURCE: /templates/default/css/cymart-visual-v16-19.css ---- */
/* ======================================================================
   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;
  }
}

/* ---- SOURCE: /templates/default/css/cymart-visual-v16-20.css ---- */
/* ======================================================================
   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;
  }
}

/* ---- SOURCE: /templates/default/css/cymart-visual-v16-22.css ---- */
/* ======================================================================
   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;
  }
}

/* ---- SOURCE: /templates/default/css/cymart-visual-v16-24.css ---- */
/* ======================================================================
   CYMART VISUAL V16.24 — MOBILE FINAL
   - Preserves V16.23 Unicode/Fluent emoji rendering.
   - Uses ONE fixed, non-repeating background layer in BOTH dark and light.
   - Removes legacy full-page canvases that can cover the selected artwork.
   - Mobile/tablet only (<= 991.98px). Desktop/PC remains untouched.
   - Emoji are Unicode text. No PNG/SVG emoji replacement is used.
   ====================================================================== */

@media (max-width: 991.98px) {

  /* ================================================================
     1) EMOJI — KEEP V16.23 BEHAVIOR
     ================================================================ */
  html body .cymart-imei-page .cymart-unicode-emoji,
  html body #modal-order .cymart-unicode-emoji {
    font-family:
      "Fluent Emoji Color",
      "Noto Color Emoji",
      "Apple Color Emoji",
      "Segoe UI Emoji",
      sans-serif !important;
    font-weight: 400 !important;
    font-style: normal !important;
    font-synthesis: none !important;
    font-variant-emoji: emoji;
    line-height: 1 !important;
    vertical-align: -0.08em !important;
  }

  html body .cymart-imei-page .title .cymart-unicode-emoji,
  html body .cymart-imei-page .searchme .cymart-unicode-emoji,
  html body .cymart-imei-page .text-muted .cymart-unicode-emoji {
    font-family:
      "Fluent Emoji Color",
      "Noto Color Emoji",
      "Apple Color Emoji",
      "Segoe UI Emoji",
      sans-serif !important;
  }

  /* ================================================================
     2) EARLY/BOOT CANVAS
     These rules also apply while cymart-mobile-boot is present, so the
     wrong legacy background cannot flash above the selected theme.
     ================================================================ */
  html.cymart-boot-dark,
  html:has(body.cymart-theme-dark) {
    min-height: 100% !important;
    background-color: #07091c !important;
    background-image: url('/templates/default/images/cymart-visual/dark-desktop.png?v=1624') !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: 70% center !important;
    background-attachment: fixed !important;
  }

  html.cymart-boot-light,
  html:has(body.cymart-theme-light) {
    min-height: 100% !important;
    background-color: #eef6ff !important;
    background-image: url('/templates/default/images/cymart-visual/light-mobile-v16-24.png?v=1624') !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: center center !important;
    background-attachment: fixed !important;
  }

  /* ================================================================
     3) BODY — NEVER PAINT A SECOND PAGE-SIZED BACKGROUND
     The selected artwork is painted by exactly one fixed pseudo-layer.
     ================================================================ */
  html body.cymart-theme-dark,
  html body.cymart-theme-light,
  html body.cymart-theme-dark.cymart-imei-active,
  html body.cymart-theme-light.cymart-imei-active,
  html body.cymart-theme-dark.cymart-imei-host,
  html body.cymart-theme-light.cymart-imei-host {
    position: relative !important;
    isolation: isolate !important;
    min-height: 100% !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
  }

  /* DARK — single fixed landscape layer */
  html body.cymart-theme-dark::before,
  html body.cymart-theme-dark.cymart-imei-active::before,
  html body.cymart-theme-dark.cymart-imei-host::before {
    content: "" !important;
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    pointer-events: none !important;
    z-index: -1 !important;
    opacity: 1 !important;
    filter: none !important;
    transform: translateZ(0) !important;
    background-color: #07091c !important;
    background-image: url('/templates/default/images/cymart-visual/dark-desktop.png?v=1624') !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: 70% center !important;
    background-attachment: scroll !important;
  }

  /* LIGHT — same architecture as dark: one fixed portrait layer.
     This is the key V16.24 change. It prevents the old white/blue
     canvas from sitting above the selected light artwork. */
  html body.cymart-theme-light::before,
  html body.cymart-theme-light.cymart-imei-active::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;
    pointer-events: none !important;
    z-index: -1 !important;
    opacity: 1 !important;
    filter: none !important;
    transform: translateZ(0) !important;
    background-color: #eef6ff !important;
    background-image: url('/templates/default/images/cymart-visual/light-mobile-v16-24.png?v=1624') !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: center center !important;
    background-attachment: scroll !important;
  }

  /* ================================================================
     4) REMOVE LEGACY FULL-PAGE LAYERS IN BOTH THEMES
     Do NOT touch cards/forms themselves — only page-sized canvases.
     ================================================================ */
  html body.cymart-theme-dark .cymart-imei-page::before,
  html body.cymart-theme-dark .cymart-imei-page::after,
  html body.cymart-theme-light .cymart-imei-page::before,
  html body.cymart-theme-light .cymart-imei-page::after {
    content: none !important;
    display: none !important;
    background: none !important;
    background-image: none !important;
    opacity: 0 !important;
    filter: none !important;
  }

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

  /* ================================================================
     5) READABLE PANELS — retain the approved visual treatment
     ================================================================ */
  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;
    backdrop-filter: blur(9px) saturate(110%) !important;
    -webkit-backdrop-filter: blur(9px) saturate(110%) !important;
  }

  html body.cymart-theme-dark .cymart-imei-page .card-search {
    background: linear-gradient(135deg, rgba(5,17,43,.83), rgba(33,16,63,.75)) !important;
    backdrop-filter: blur(10px) saturate(110%) !important;
    -webkit-backdrop-filter: blur(10px) saturate(110%) !important;
  }

  html body.cymart-theme-light .cymart-imei-page .card-product {
    background: rgba(255,255,255,.90) !important;
    backdrop-filter: blur(8px) saturate(105%) !important;
    -webkit-backdrop-filter: blur(8px) saturate(105%) !important;
  }

  html body.cymart-theme-light .cymart-imei-page .card-search {
    background: rgba(255,255,255,.92) !important;
    backdrop-filter: blur(9px) saturate(105%) !important;
    -webkit-backdrop-filter: blur(9px) saturate(105%) !important;
  }

  /* Preloader follows the selected theme and does not place an opaque
     layer above the artwork. */
  html.cymart-boot-light .page-pre-loader,
  html body.cymart-theme-light .page-pre-loader {
    background: rgba(238,246,255,.10) !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(7,9,28,.14) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

@media (max-width: 767.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-position: 70% 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-position: center center !important;
  }
}

/* ---- SOURCE: /templates/default/css/cymart-visual-v16-25.css ---- */
/* ======================================================================
   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;
  }
}

/* ---- SOURCE: /templates/default/css/cymart-visual-v16-26.css ---- */
/* ======================================================================
   CYMART VISUAL V16.26 — FINAL RECHARGE PANEL REFINEMENT
   Visual-only follow-up patch.
   Goal:
   - LIGHT mode: keep the approved current look; only ensure the ray remains
     on the real rounded border and is easy to perceive.
   - DARK mode: use the chosen sunset background + dark transparent recharge
     panel + no fixed colored outer frame + cyan/white ray traveling around
     the whole border + warm Binance / cyan Transfer accents.
   - Performance remains lightweight: no JS animation added, no functional
     logic touched, no extra heavy backdrop blur.
   ====================================================================== */

/* ----------------------------------------------------------------------
   1) LIGHT THEME — KEEP CURRENT LOOK, ONLY POLISH THE BORDER RAY
   ---------------------------------------------------------------------- */
html body.cymart-theme-light .cymart-recharge-ray-base,
html body:not(.cymart-theme-dark) .cymart-recharge-ray-base{
  stroke:rgba(123,145,255,.28) !important;
}

html body.cymart-theme-light .cymart-recharge-ray-beam,
html body:not(.cymart-theme-dark) .cymart-recharge-ray-beam{
  stroke:#83bdff !important;
  stroke-width:3.05 !important;
  stroke-dasharray:116 884 !important;
  animation-duration:4.7s !important;
  filter:
    drop-shadow(0 0 2px rgba(255,255,255,.98))
    drop-shadow(0 0 6px rgba(99,145,255,.72))
    drop-shadow(0 0 10px rgba(184,129,255,.42)) !important;
}

/* ----------------------------------------------------------------------
   2) DARK THEME — SELECTED FINAL LOOK
   Black transparent panel, no static colored outer frame, cyan/white ray.
   ---------------------------------------------------------------------- */
html body.cymart-theme-dark .cymart-recharge-panel{
  position:relative !important;
  margin:0 auto 24px !important;
  padding:18px 18px 20px !important;
  border:1px solid rgba(214,229,255,.12) !important;
  border-radius:30px !important;
  clip-path:none !important;
  overflow:hidden !important;
  isolation:isolate !important;
  background:
    linear-gradient(90deg, rgba(4,8,19,.84) 0%, rgba(5,9,20,.80) 50%, rgba(15,8,24,.76) 100%) !important;
  box-shadow:
    0 14px 34px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.05),
    inset 0 -1px 0 rgba(255,255,255,.03) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

/* Retire old green/angular outer frame pieces from earlier visual versions. */
html body.cymart-theme-dark .cymart-recharge-panel::before,
html body.cymart-theme-dark .cymart-recharge-panel::after{
  content:none !important;
  display:none !important;
  opacity:0 !important;
  background:none !important;
  border:0 !important;
  box-shadow:none !important;
  clip-path:none !important;
}

html body.cymart-theme-dark .cymart-recharge-panel-head{
  margin:0 4px 16px !important;
  gap:15px !important;
}

html body.cymart-theme-dark .cymart-recharge-panel-title{
  gap:12px !important;
}

html body.cymart-theme-dark .cymart-recharge-panel-title strong{
  color:#ffffff !important;
  font-size:16px !important;
  font-weight:900 !important;
  letter-spacing:.35px !important;
  text-shadow:none !important;
}

html body.cymart-theme-dark .cymart-recharge-panel-title small{
  margin-top:4px !important;
  color:#d4dced !important;
  font-size:10px !important;
}

html body.cymart-theme-dark .cymart-recharge-panel-orb{
  width:40px !important;
  height:40px !important;
  flex:0 0 40px !important;
  border-radius:14px !important;
  color:#ffffff !important;
  border:1px solid rgba(240,88,255,.55) !important;
  background:linear-gradient(145deg, rgba(121,33,255,.26), rgba(37,13,66,.72)) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.03),
    0 0 18px rgba(208,74,255,.24),
    inset 0 0 14px rgba(238,96,255,.10) !important;
}
html body.cymart-theme-dark .cymart-recharge-panel-orb i{font-size:17px !important;}

html body.cymart-theme-dark .cymart-recharge-panel-line{
  height:1px !important;
  background:linear-gradient(90deg, rgba(183,86,255,.74), rgba(138,87,255,.24), transparent 82%) !important;
  box-shadow:none !important;
}

html body.cymart-theme-dark .cymart-recharge-ray-svg{
  inset:-1px !important;
  width:calc(100% + 2px) !important;
  height:calc(100% + 2px) !important;
}

html body.cymart-theme-dark .cymart-recharge-ray-base{
  stroke:rgba(214,229,255,.18) !important;
  stroke-width:1.35 !important;
}

html body.cymart-theme-dark .cymart-recharge-ray-beam{
  stroke:#6fddff !important;
  stroke-width:3.15 !important;
  stroke-dasharray:118 882 !important;
  animation-duration:4.35s !important;
  filter:
    drop-shadow(0 0 2px rgba(255,255,255,.98))
    drop-shadow(0 0 7px rgba(76,220,255,.94))
    drop-shadow(0 0 12px rgba(76,220,255,.56)) !important;
}

html body.cymart-theme-dark .cymart-imei-recharge-actions{
  gap:16px !important;
}

html body.cymart-theme-dark .cymart-imei-recharge-actions .cymart-recharge-action{
  position:relative !important;
  min-height:104px !important;
  padding:15px 18px !important;
  border-radius:18px !important;
  clip-path:none !important;
  overflow:hidden !important;
  isolation:isolate !important;
  text-decoration:none !important;
  background:linear-gradient(135deg, rgba(6,8,17,.94), rgba(9,12,24,.88)) !important;
  border:1px solid rgba(255,255,255,.06) !important;
  box-shadow:
    0 10px 22px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.03) !important;
  transition:transform .24s ease, box-shadow .24s ease, border-color .24s ease !important;
}

html body.cymart-theme-dark .cymart-imei-recharge-actions .cymart-recharge-action::before{
  content:"" !important;
  position:absolute !important;
  inset:7px !important;
  border-radius:13px !important;
  background:none !important;
  clip-path:none !important;
  z-index:0 !important;
  opacity:1 !important;
}

html body.cymart-theme-dark .cymart-imei-recharge-actions .cymart-recharge-action::after{
  display:none !important;
  content:none !important;
}

html body.cymart-theme-dark .cymart-recharge-action .cymart-recharge-shine{
  width:140px !important;
  height:140px !important;
  right:-90px !important;
  top:-78px !important;
  opacity:.18 !important;
  filter:none !important;
}

html body.cymart-theme-dark .cymart-recharge-binance{
  background:
    radial-gradient(circle at 12% 50%, rgba(255,182,40,.11), transparent 34%),
    linear-gradient(135deg, rgba(8,8,16,.96), rgba(10,10,18,.90)) !important;
  border-color:rgba(255,185,39,.64) !important;
  box-shadow:
    0 10px 22px rgba(0,0,0,.24),
    inset 0 0 0 1px rgba(255,185,39,.12) !important;
}
html body.cymart-theme-dark .cymart-recharge-binance::before{
  border:1px solid rgba(255,185,39,.20) !important;
}
html body.cymart-theme-dark .cymart-recharge-binance .cymart-recharge-shine{
  background:radial-gradient(circle, rgba(255,182,40,.19), transparent 68%) !important;
}

html body.cymart-theme-dark .cymart-recharge-transfer{
  background:
    radial-gradient(circle at 12% 50%, rgba(62,211,255,.11), transparent 34%),
    linear-gradient(135deg, rgba(5,10,18,.96), rgba(6,13,23,.90)) !important;
  border-color:rgba(53,210,255,.72) !important;
  box-shadow:
    0 10px 22px rgba(0,0,0,.24),
    inset 0 0 0 1px rgba(53,210,255,.12) !important;
}
html body.cymart-theme-dark .cymart-recharge-transfer::before{
  border:1px solid rgba(53,210,255,.22) !important;
}
html body.cymart-theme-dark .cymart-recharge-transfer .cymart-recharge-shine{
  background:radial-gradient(circle, rgba(62,211,255,.18), transparent 68%) !important;
}

html body.cymart-theme-dark .cymart-recharge-action .cymart-recharge-icon{
  width:64px !important;
  height:64px !important;
  flex:0 0 64px !important;
  border-radius:50% !important;
  z-index:2 !important;
}

html body.cymart-theme-dark .cymart-recharge-binance .cymart-recharge-icon{
  color:#f4be34 !important;
  border:1px solid rgba(255,204,72,.96) !important;
  background:radial-gradient(circle at 35% 30%, rgba(255,221,105,.28), rgba(62,43,7,.62) 72%) !important;
  box-shadow:
    0 0 0 6px rgba(255,191,36,.06),
    0 0 19px rgba(255,187,29,.24),
    inset 0 0 16px rgba(255,214,85,.10) !important;
}
html body.cymart-theme-dark .cymart-recharge-binance .cymart-recharge-icon img{
  width:45px !important;
  height:45px !important;
  object-fit:contain !important;
  filter:drop-shadow(0 0 6px rgba(255,193,37,.26)) !important;
}
html body.cymart-theme-dark .cymart-binance-ring{
  inset:-7px !important;
  border:1px solid rgba(255,210,86,.44) !important;
  border-radius:50% !important;
  box-shadow:0 0 13px rgba(255,183,26,.22) !important;
}

html body.cymart-theme-dark .cymart-recharge-transfer .cymart-recharge-icon{
  color:#52ddff !important;
  border:1px solid rgba(74,218,255,.98) !important;
  background:radial-gradient(circle at 35% 30%, rgba(90,228,255,.30), rgba(4,35,55,.66) 72%) !important;
  box-shadow:
    0 0 0 6px rgba(74,218,255,.05),
    0 0 20px rgba(74,218,255,.26),
    inset 0 0 16px rgba(74,218,255,.11) !important;
}

html body.cymart-theme-dark .cymart-recharge-copy .cymart-recharge-kicker{
  margin-bottom:5px !important;
  font-size:11px !important;
  letter-spacing:1.15px !important;
  font-weight:800 !important;
}
html body.cymart-theme-dark .cymart-recharge-binance .cymart-recharge-kicker{ color:#ffc548 !important; }
html body.cymart-theme-dark .cymart-recharge-transfer .cymart-recharge-kicker{ color:#59dfff !important; }

html body.cymart-theme-dark .cymart-recharge-copy strong{
  color:#ffffff !important;
  font-size:15px !important;
  font-weight:800 !important;
  text-shadow:none !important;
}

html body.cymart-theme-dark .cymart-recharge-copy small{
  margin-top:6px !important;
  color:#d2d9e7 !important;
  font-size:11px !important;
}

html body.cymart-theme-dark .cymart-recharge-arrow{
  position:relative !important;
  z-index:4 !important;
  width:42px !important;
  height:42px !important;
  flex:0 0 42px !important;
  border-radius:50% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:rgba(3,8,16,.50) !important;
}
html body.cymart-theme-dark .cymart-recharge-binance .cymart-recharge-arrow{
  color:#ffd35a !important;
  border:1px solid rgba(255,198,57,.72) !important;
  box-shadow:0 0 10px rgba(255,187,29,.12) !important;
}
html body.cymart-theme-dark .cymart-recharge-transfer .cymart-recharge-arrow{
  color:#67e5ff !important;
  border:1px solid rgba(74,218,255,.72) !important;
  box-shadow:0 0 10px rgba(74,218,255,.12) !important;
}

html body.cymart-theme-dark .cymart-recharge-action:hover{
  transform:translateY(-2px) !important;
}
html body.cymart-theme-dark .cymart-recharge-binance:hover{
  box-shadow:
    0 12px 24px rgba(0,0,0,.25),
    inset 0 0 0 1px rgba(255,185,39,.18),
    0 0 18px rgba(255,185,39,.10) !important;
}
html body.cymart-theme-dark .cymart-recharge-transfer:hover{
  box-shadow:
    0 12px 24px rgba(0,0,0,.25),
    inset 0 0 0 1px rgba(53,210,255,.18),
    0 0 18px rgba(53,210,255,.10) !important;
}

/* ----------------------------------------------------------------------
   3) RESPONSIVE POLISH
   ---------------------------------------------------------------------- */
@media (max-width:767.98px){
  html body.cymart-theme-dark .cymart-recharge-panel{
    padding:14px 14px 15px !important;
    border-radius:24px !important;
  }
  html body.cymart-theme-dark .cymart-recharge-panel-title strong{
    font-size:13px !important;
  }
  html body.cymart-theme-dark .cymart-recharge-panel-title small{
    font-size:9px !important;
  }
  html body.cymart-theme-dark .cymart-imei-recharge-actions{
    gap:12px !important;
  }
  html body.cymart-theme-dark .cymart-imei-recharge-actions .cymart-recharge-action{
    min-height:88px !important;
    padding:12px 13px !important;
    border-radius:16px !important;
  }
  html body.cymart-theme-dark .cymart-recharge-action .cymart-recharge-icon{
    width:54px !important;
    height:54px !important;
    flex-basis:54px !important;
  }
  html body.cymart-theme-dark .cymart-recharge-copy .cymart-recharge-kicker{
    font-size:9px !important;
  }
  html body.cymart-theme-dark .cymart-recharge-copy strong{
    font-size:13px !important;
  }
  html body.cymart-theme-dark .cymart-recharge-copy small{
    font-size:10px !important;
  }
  html body.cymart-theme-dark .cymart-recharge-arrow{
    width:36px !important;
    height:36px !important;
    flex-basis:36px !important;
  }
}

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

/* ---- SOURCE: /templates/default/css/cymart-visual-v16-28.css ---- */
/* ======================================================================
   CYMART VISUAL V16.28 — FINAL RAY ENGINE + MOBILE ARTWORK FIX
   ----------------------------------------------------------------------
   This layer intentionally loads LAST.

   RAY:
   - The older SVG ray is hidden so no static segment can remain visible.
   - A small canvas overlay is created by cymart-ray-v16-28.js.
   - The canvas samples the real rounded-rectangle perimeter every frame,
     so the light physically follows all four sides and all four corners.
   - No layout, form, AJAX, payment, order, bot, emoji, or session logic.

   MOBILE BACKGROUND:
   - Uses new cache-busted portrait assets (V16.28 filenames).
   - Paints the approved portrait artwork both on the root canvas (fallback)
     and on the body's single fixed background layer.
   - Keeps page-sized legacy canvases transparent.
   ====================================================================== */

/* ======================================================================
   1) FINAL MOVING RAY — CANVAS OWNS THE EFFECT
   ====================================================================== */
html body .cymart-recharge-panel{
  position:relative !important;
  isolation:isolate !important;
}

/* Hide every older ray implementation. This prevents a static bar from
   sitting underneath the new moving ray. */
html body .cymart-recharge-ray-svg,
html body .cymart-recharge-ray-runner,
html body .cymart-recharge-ray-glow,
html body .cymart-recharge-ray-core,
html body .cymart-recharge-ray-base,
html body .cymart-recharge-ray-beam{
  display:none !important;
  visibility:hidden !important;
}

html body .cymart-recharge-panel > canvas.cymart-recharge-ray-canvas{
  display:block !important;
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  z-index:999 !important;
  pointer-events:none !important;
  border-radius:inherit !important;
  overflow:hidden !important;
  background:transparent !important;
}

/* Keep actual controls/content above the panel background. The canvas only
   paints within a few pixels of the perimeter, so it never blocks clicks. */
html body .cymart-recharge-panel > :not(.cymart-recharge-ray-svg):not(.cymart-recharge-ray-canvas){
  position:relative !important;
  z-index:2 !important;
}

/* ======================================================================
   2) MOBILE/TABLET — FORCE THE APPROVED PORTRAIT ARTWORK
   New filenames intentionally bypass stale browser/CDN caches.
   ====================================================================== */
@media (max-width:991.98px){
  html.cymart-boot-dark,
  html:has(body.cymart-theme-dark){
    min-height:100% !important;
    background-color:#07091c !important;
    background-image:url('/templates/default/images/cymart-visual/dark-mobile-v16-28.webp?v=1628') !important;
    background-repeat:no-repeat !important;
    background-size:cover !important;
    background-position:center center !important;
    background-attachment:fixed !important;
  }

  html.cymart-boot-light,
  html:has(body.cymart-theme-light),
  html:not(:has(body.cymart-theme-dark)){
    min-height:100% !important;
    background-color:#eef6ff !important;
    background-image:url('/templates/default/images/cymart-visual/light-mobile-v16-28.webp?v=1628') !important;
    background-repeat:no-repeat !important;
    background-size:cover !important;
    background-position:center center !important;
    background-attachment:fixed !important;
  }

  html body.cymart-theme-dark,
  html body.cymart-theme-light,
  html body.cymart-theme-dark.cymart-imei-active,
  html body.cymart-theme-light.cymart-imei-active,
  html body.cymart-theme-dark.cymart-imei-host,
  html body.cymart-theme-light.cymart-imei-host{
    position:relative !important;
    isolation:isolate !important;
    min-height:100vh !important;
    min-height:100dvh !important;
    background:transparent !important;
    background-color:transparent !important;
    background-image:none !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{
    content:"" !important;
    display:block !important;
    position:fixed !important;
    inset:0 !important;
    width:100vw !important;
    height:100vh !important;
    height:100dvh !important;
    z-index:-1 !important;
    pointer-events:none !important;
    opacity:1 !important;
    filter:none !important;
    transform:translateZ(0) !important;
    background-color:#07091c !important;
    background-image:url('/templates/default/images/cymart-visual/dark-mobile-v16-28.webp?v=1628') !important;
    background-repeat:no-repeat !important;
    background-size:cover !important;
    background-position:center center !important;
    background-attachment:scroll !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{
    content:"" !important;
    display:block !important;
    position:fixed !important;
    inset:0 !important;
    width:100vw !important;
    height:100vh !important;
    height:100dvh !important;
    z-index:-1 !important;
    pointer-events:none !important;
    opacity:1 !important;
    filter:none !important;
    transform:translateZ(0) !important;
    background-color:#eef6ff !important;
    background-image:url('/templates/default/images/cymart-visual/light-mobile-v16-28.webp?v=1628') !important;
    background-repeat:no-repeat !important;
    background-size:cover !important;
    background-position:center center !important;
    background-attachment:scroll !important;
  }

  /* Eliminate old page-sized covers. Cards themselves are left intact. */
  html body.cymart-theme-dark > .bg-gray,
  html body.cymart-theme-light > .bg-gray,
  html body.cymart-theme-dark > .bg-gray > .min-height,
  html body.cymart-theme-light > .bg-gray > .min-height,
  html body.cymart-theme-dark .min-height,
  html body.cymart-theme-light .min-height,
  html body.cymart-theme-dark .page-content,
  html body.cymart-theme-light .page-content,
  html body.cymart-theme-dark .main-content,
  html body.cymart-theme-light .main-content,
  html body.cymart-theme-dark .content,
  html body.cymart-theme-light .content,
  html body.cymart-theme-dark .cymart-imei-page,
  html body.cymart-theme-light .cymart-imei-page,
  html body.cymart-theme-dark .cymart-imei-page > .container,
  html body.cymart-theme-light .cymart-imei-page > .container,
  html body.cymart-theme-dark .cymart-imei-page .page-container,
  html body.cymart-theme-light .cymart-imei-page .page-container,
  html body.cymart-theme-dark .cymart-imei-page form#imeiorder_form,
  html body.cymart-theme-light .cymart-imei-page form#imeiorder_form,
  html body.cymart-theme-dark .cymart-imei-page #imeiorder_form > .h-100,
  html body.cymart-theme-light .cymart-imei-page #imeiorder_form > .h-100,
  html body.cymart-theme-dark .cymart-imei-page .service-list,
  html body.cymart-theme-light .cymart-imei-page .service-list,
  html body.cymart-theme-dark .cymart-imei-page .service-list-box,
  html body.cymart-theme-light .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,
  html body.cymart-theme-light .cymart-imei-page::before,
  html body.cymart-theme-light .cymart-imei-page::after{
    content:none !important;
    display:none !important;
    background:none !important;
    opacity:0 !important;
  }
}

/* ---- SOURCE: /templates/default/css/cymart-visual-v16-29.css ---- */
/* ======================================================================
   CYMART VISUAL V16.29 — ALL GROUP CLEAN SELECT FIX
   ----------------------------------------------------------------------
   Scope: the IMEI "All Group" filter only.

   The black vertical marks shown before "All Group" came from the enhanced
   select decoration layer. This final layer keeps this ONE filter as a clean
   native select and removes every decorative/caret layer that can overlap the
   label. The original onchange="loadItems(this.value)" remains untouched.
   ====================================================================== */

/* The wrapper must not draw anything over the field. */
html body .cymart-imei-page .card-search .cymart-group-filter-wrap{
  position:relative !important;
}
html body .cymart-imei-page .card-search .cymart-group-filter-wrap::before,
html body .cymart-imei-page .card-search .cymart-group-filter-wrap::after{
  content:none !important;
  display:none !important;
}

/* Clean native select. No sprite, no fake caret, no left-side decoration. */
html body .cymart-imei-page .card-search select.cymart-group-filter{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  appearance:none !important;
  -webkit-appearance:none !important;
  -moz-appearance:none !important;
  direction:ltr !important;
  text-align:left !important;
  text-indent:0 !important;
  padding-left:14px !important;
  padding-right:14px !important;
  background-image:none !important;
  caret-color:transparent !important;
  outline:none !important;
  box-shadow:none !important;
}
html body .cymart-imei-page .card-search select.cymart-group-filter::-ms-expand{
  display:none !important;
}

/* LIGHT: preserve the approved white filter appearance. */
html body.cymart-theme-light .cymart-imei-page .card-search select.cymart-group-filter,
html body:not(.cymart-theme-dark) .cymart-imei-page .card-search select.cymart-group-filter{
  background:#ffffff !important;
  background-color:#ffffff !important;
  color:#111827 !important;
  -webkit-text-fill-color:#111827 !important;
  border:1px solid #cad8ed !important;
}

/* DARK: if the user changes theme, keep the same control readable. */
html body.cymart-theme-dark .cymart-imei-page .card-search select.cymart-group-filter{
  background:rgba(8,13,25,.92) !important;
  background-color:rgba(8,13,25,.92) !important;
  color:#eef6ff !important;
  -webkit-text-fill-color:#eef6ff !important;
  border:1px solid rgba(83,210,255,.34) !important;
}

/* Defensive fallback: if an old cached page already created a Chosen clone,
   its decorative pieces are removed completely for this wrapper only. */
html body .cymart-imei-page .card-search .cymart-group-filter-wrap > .chosen-container,
html body .cymart-imei-page .card-search .cymart-group-filter-wrap > .chosen-container *{
  box-sizing:border-box !important;
}
html body .cymart-imei-page .card-search .cymart-group-filter-wrap > .chosen-container .chosen-single > div,
html body .cymart-imei-page .card-search .cymart-group-filter-wrap > .chosen-container .chosen-single > div > b,
html body .cymart-imei-page .card-search .cymart-group-filter-wrap > .chosen-container .chosen-single abbr{
  display:none !important;
  visibility:hidden !important;
  width:0 !important;
  height:0 !important;
  border:0 !important;
  background:none !important;
  box-shadow:none !important;
}
html body .cymart-imei-page .card-search .cymart-group-filter-wrap > .chosen-container::before,
html body .cymart-imei-page .card-search .cymart-group-filter-wrap > .chosen-container::after,
html body .cymart-imei-page .card-search .cymart-group-filter-wrap > .chosen-container .chosen-single::before,
html body .cymart-imei-page .card-search .cymart-group-filter-wrap > .chosen-container .chosen-single::after,
html body .cymart-imei-page .card-search .cymart-group-filter-wrap > .chosen-container .chosen-single span::before,
html body .cymart-imei-page .card-search .cymart-group-filter-wrap > .chosen-container .chosen-single span::after{
  content:none !important;
  display:none !important;
}
html body .cymart-imei-page .card-search .cymart-group-filter-wrap > .chosen-container .chosen-single span{
  margin:0 !important;
  padding:0 !important;
  direction:ltr !important;
  text-align:left !important;
}

/* ---- SOURCE: /templates/default/css/cymart-visual-v16-30.css ---- */
/* ======================================================================
   CYMART VISUAL V16.30 — FINAL ALL GROUP CLEAN FACE
   ----------------------------------------------------------------------
   Scope: ONLY the IMEI group filter shown as "All Group".

   Why this exists:
   Some browsers/legacy select enhancers can still paint a tiny native/plugin
   decoration inside the original <select>. V16.30 removes that rendering from
   view completely without changing the control's behavior:
   - the real <select> remains on top, transparent and fully clickable;
   - a clean visual face below it displays the selected option text;
   - loadItems(this.value) and the original options remain untouched.
   ====================================================================== */

html body .cymart-imei-page .card-search .cymart-group-filter-wrap{
  position:relative !important;
  flex:0 0 250px !important;
  width:250px !important;
  min-width:250px !important;
  height:42px !important;
  margin-bottom:0 !important;
  overflow:visible !important;
}

/* Hide every old generated/select-decoration layer in this wrapper only. */
html body .cymart-imei-page .card-search .cymart-group-filter-wrap > .chosen-container,
html body .cymart-imei-page .card-search .cymart-group-filter-wrap > .select2,
html body .cymart-imei-page .card-search .cymart-group-filter-wrap > .select2-container,
html body .cymart-imei-page .card-search .cymart-group-filter-wrap > .bootstrap-select{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}

/* The actual select owns interaction only. Its browser-painted face is hidden. */
html body .cymart-imei-page .card-search select.cymart-group-filter.cymart-group-filter-native-overlay{
  position:absolute !important;
  inset:0 !important;
  z-index:5 !important;
  display:block !important;
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
  height:42px !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:5px !important;
  outline:0 !important;
  background:transparent !important;
  background-image:none !important;
  color:transparent !important;
  -webkit-text-fill-color:transparent !important;
  text-shadow:none !important;
  box-shadow:none !important;
  opacity:.001 !important;
  appearance:none !important;
  -webkit-appearance:none !important;
  -moz-appearance:none !important;
  cursor:pointer !important;
}
html body .cymart-imei-page .card-search select.cymart-group-filter.cymart-group-filter-native-overlay::-ms-expand{
  display:none !important;
}

/* Clean visual surface. No arrow, no glyph, no pseudo element. */
html body .cymart-imei-page .card-search .cymart-group-filter-face{
  position:relative !important;
  z-index:2 !important;
  display:flex !important;
  align-items:center !important;
  width:100% !important;
  height:42px !important;
  min-width:0 !important;
  box-sizing:border-box !important;
  margin:0 !important;
  padding:7px 12px !important;
  overflow:hidden !important;
  white-space:nowrap !important;
  text-overflow:ellipsis !important;
  border-radius:5px !important;
  font:inherit !important;
  font-weight:500 !important;
  line-height:1.25 !important;
  text-align:left !important;
  direction:ltr !important;
  pointer-events:none !important;
}
html body .cymart-imei-page .card-search .cymart-group-filter-face::before,
html body .cymart-imei-page .card-search .cymart-group-filter-face::after,
html body .cymart-imei-page .card-search .cymart-group-filter-wrap::before,
html body .cymart-imei-page .card-search .cymart-group-filter-wrap::after{
  content:none !important;
  display:none !important;
}

/* Light mode: exactly clean white field with readable dark text. */
html body.cymart-theme-light .cymart-imei-page .card-search .cymart-group-filter-face,
html body:not(.cymart-theme-dark) .cymart-imei-page .card-search .cymart-group-filter-face{
  background:#ffffff !important;
  color:#17202d !important;
  border:1px solid #cad8ed !important;
  box-shadow:none !important;
}

/* Dark mode remains readable and consistent, without altering the approved UI. */
html body.cymart-theme-dark .cymart-imei-page .card-search .cymart-group-filter-face{
  background:rgba(8,13,25,.92) !important;
  color:#eef6ff !important;
  border:1px solid rgba(83,210,255,.34) !important;
  box-shadow:none !important;
}

/* Keyboard focus stays visible even though the native face is transparent. */
html body .cymart-imei-page .card-search .cymart-group-filter-wrap.cymart-group-filter-focus .cymart-group-filter-face{
  outline:2px solid rgba(90,153,255,.48) !important;
  outline-offset:1px !important;
}

@media (max-width:991.98px){
  html body .cymart-imei-page .card-search .cymart-group-filter-wrap{
    flex:1 1 250px !important;
    width:250px !important;
    max-width:100% !important;
  }
}

/* ---- SOURCE: /templates/default/css/cymart-visual-v16-31.css ---- */
/* ======================================================================
   CYMART VISUAL V16.31 — MOBILE ORDER MODAL + TOUCH SCROLL FIX
   Scope: phones only (<= 767.98px).

   Fixes:
   1) The order popup/backdrop always stays above the mobile menu/header.
   2) The order card starts a little lower for comfortable phone spacing.
   3) The popup has ONE reliable vertical scroll area for iPhone/Safari.
   4) The page behind the popup is locked only while the order is open.

   No colors, images, service cards, API, AJAX, order submission or desktop
   layout are changed.
   ====================================================================== */

@media (max-width: 767.98px) {
  /* Let normal vertical finger navigation pass cleanly through the IMEI page.
     This does not change sizes, colors or positioning. */
  html body .cymart-imei-page,
  html body .cymart-imei-page .page-container,
  html body .cymart-imei-page .service-list,
  html body .cymart-imei-page .service-list-box {
    touch-action: pan-y !important;
  }

  /* Keep the complete modal stacking context above the header. */
  html body.cymart-order-modal-open .cymart-imei-page,
  html body.cymart-order-modal-open .cymart-imei-page > .container {
    overflow: visible !important;
  }

  html body.cymart-order-modal-open .cymart-imei-page > .container {
    position: relative !important;
    z-index: 2147483200 !important;
  }

  html body.cymart-order-modal-open header,
  html body.cymart-order-modal-open .header-top,
  html body.cymart-order-modal-open .header-middle,
  html body.cymart-order-modal-open .header-bottom {
    z-index: 0 !important;
    pointer-events: none !important;
  }

  /* Prevent the page behind the popup from stealing vertical swipes. */
  html body.cymart-order-modal-open {
    overflow: hidden !important;
    overscroll-behavior: none !important;
  }

  /* Full viewport layer. The dialog itself starts lower, while the backdrop
     still covers/blurs the menu from the very top of the screen. */
  html body #modal-order.modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2147483600 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    box-sizing: border-box !important;
    padding: 82px 8px 12px !important;
    overflow: hidden !important;
    overscroll-behavior: contain !important;
  }

  html body #modal-order .backdrop-over {
    position: fixed !important;
    inset: 0 !important;
    z-index: 0 !important;
    pointer-events: auto !important;
  }

  /* Remove Bootstrap's vertical-centering spacer and use predictable top
     placement on phones. */
  html body #modal-order .modal-dialog,
  html body #modal-order .modal-dialog-centered {
    position: relative !important;
    z-index: 2 !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    transform: none !important;
    pointer-events: auto !important;
  }

  html body #modal-order .modal-dialog-centered::before {
    content: none !important;
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
  }

  /* Header stays still. Only the body of the order form scrolls. */
  html body #modal-order .modal-content {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100vh - 94px) !important;
    max-height: calc(100dvh - 94px) !important;
    overflow: hidden !important;
  }

  html body #modal-order .modal-header {
    flex: 0 0 auto !important;
  }

  html body #modal-order .modal-body {
    display: block !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: contain !important;
    touch-action: pan-y !important;
    padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
  }

  /* Older mobile patches made every modal descendant overflow:visible.
     Preserve that for the form content, but not for the modal-body itself. */
  html body #modal-order #serviceDetails2,
  html body #modal-order #serviceDetails2 > div,
  html body #modal-order .row,
  html body #modal-order .placeorder-field,
  html body #modal-order .placeorder-details,
  html body #modal-order .card,
  html body #modal-order .card-min-height,
  html body #modal-order .card-place-retail-order {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  /* Inputs remain fully interactive during vertical scrolling. */
  html body #modal-order input,
  html body #modal-order select,
  html body #modal-order textarea,
  html body #modal-order button,
  html body #modal-order a {
    touch-action: manipulation !important;
  }
}

/* Slightly more breathing room on very small iPhones without changing the
   usable height of the form too much. */
@media (max-width: 390px) {
  html body #modal-order.modal {
    padding-top: 86px !important;
  }

  html body #modal-order .modal-content {
    max-height: calc(100vh - 98px) !important;
    max-height: calc(100dvh - 98px) !important;
  }
}

/* ---- SOURCE: /templates/default/css/cymart-mobile-scroll-v16-37.css ---- */
/* ======================================================================
   CYMART V16.37 — MOBILE SCROLL STABILITY
   ----------------------------------------------------------------------
   Purpose: restore native Android/iOS scrolling without changing the
   approved visual design.

   Important:
   - No colors, images, gradients, shadows, typography or ray visuals change.
   - No service/order/API logic changes.
   - Explicitly disables the experimental content-visibility/containment
     optimization from V16.33/V16.34 because it can leave blank regions and
     interrupt momentum scrolling on long mobile lists.
   ====================================================================== */
@media (max-width: 991.98px) {
  html,
  body {
    scroll-behavior: auto !important;
    overscroll-behavior-y: auto !important;
  }

  html body .cymart-imei-page,
  html body .cymart-imei-page .page-container,
  html body .cymart-imei-page .service-list,
  html body .cymart-imei-page .service-list-box {
    overflow-y: visible !important;
    contain: none !important;
    content-visibility: visible !important;
  }

  /* Every service stays fully laid out/painted. This avoids the delayed
     card rendering/blank viewport seen during fast swipes. */
  html body .cymart-imei-page .service-list-box > .row.group > .service,
  html body .cymart-imei-page .service-list-box .service {
    content-visibility: visible !important;
    contain: none !important;
    contain-intrinsic-size: none !important;
    touch-action: pan-y !important;
  }

  /* The cards are clickable, but vertical touch gestures must remain owned
     by the browser's native scroller. Click/tap behavior is unchanged. */
  html body .cymart-imei-page .service-list-box .service .card-product,
  html body .cymart-imei-page .service-list-box .service .cym-v35-inner,
  html body .cymart-imei-page .service-list-box .service .cym-v35-main {
    touch-action: pan-y !important;
  }
}

/* ---- SOURCE: /templates/default/css/cymart-mobile-ray-v16-40.css ---- */
/* ======================================================================
   CYMART V16.40 — ANDROID BLACK-PANEL FIX / SVG PERIMETER RAY
   ----------------------------------------------------------------------
   Mobile only. The visual recharge ray remains animated, but Android no
   longer receives a full-panel transparent canvas compositor layer.

   Why this fixes the recorded issue:
   - the black flash is exactly bounded by .cymart-recharge-panel;
   - service cards/search remain painted while that panel goes black;
   - a full-size transparent canvas was being animated over that panel.

   This layer keeps the approved panel, controls, colors, spacing and ray.
   No order/API/payment logic is modified.
   ====================================================================== */
@media (max-width: 991.98px) {
  /* Never let a legacy/current canvas become a full-panel compositor tile. */
  html body .cymart-recharge-panel > canvas.cymart-recharge-ray-canvas {
    display:none !important;
    visibility:hidden !important;
    opacity:0 !important;
    width:0 !important;
    height:0 !important;
    pointer-events:none !important;
  }

  /* Reuse the SVG already present in the template. It is only a thin vector
     perimeter, so there is no full black/transparent surface to rasterize. */
  html body .cymart-recharge-panel > .cymart-recharge-ray-svg {
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
    position:absolute !important;
    inset:-1px !important;
    width:calc(100% + 2px) !important;
    height:calc(100% + 2px) !important;
    z-index:1 !important;
    overflow:visible !important;
    pointer-events:none !important;
    background:transparent !important;
    transform:none !important;
    will-change:auto !important;
  }

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

  /* Keep the subtle static edge. */
  html body .cymart-recharge-panel .cymart-recharge-ray-base {
    stroke-width:1.35 !important;
  }
  html body.cymart-theme-light .cymart-recharge-panel .cymart-recharge-ray-base,
  html body:not(.cymart-theme-dark) .cymart-recharge-panel .cymart-recharge-ray-base {
    stroke:rgba(104,126,246,.28) !important;
  }
  html body.cymart-theme-dark .cymart-recharge-panel .cymart-recharge-ray-base {
    stroke:rgba(214,229,255,.18) !important;
  }

  /* Same perimeter direction/speed/glow family as the approved moving ray. */
  html body .cymart-recharge-panel .cymart-recharge-ray-beam {
    stroke-width:2.8 !important;
    stroke-linecap:round !important;
    stroke-linejoin:round !important;
    stroke-dasharray:104 896 !important;
    stroke-dashoffset:0 !important;
    animation:cymartV1640PerimeterRay 4.6s linear infinite !important;
    will-change:auto !important;
  }
  html body.cymart-theme-light .cymart-recharge-panel .cymart-recharge-ray-beam,
  html body:not(.cymart-theme-dark) .cymart-recharge-panel .cymart-recharge-ray-beam {
    stroke:#78b8ff !important;
    filter:drop-shadow(0 0 2px rgba(255,255,255,.96))
           drop-shadow(0 0 6px rgba(93,116,255,.82))
           drop-shadow(0 0 9px rgba(174,96,255,.52)) !important;
  }
  html body.cymart-theme-dark .cymart-recharge-panel .cymart-recharge-ray-beam {
    stroke:#6fddff !important;
    filter:drop-shadow(0 0 2px rgba(255,255,255,.98))
           drop-shadow(0 0 6px rgba(76,220,255,.88))
           drop-shadow(0 0 10px rgba(76,220,255,.50)) !important;
  }

  /* Real content always stays above the thin SVG perimeter. */
  html body .cymart-recharge-panel > :not(.cymart-recharge-ray-svg):not(.cymart-recharge-ray-canvas) {
    position:relative !important;
    z-index:2 !important;
  }

  /* Keep this one panel's compositor identity stable during kinetic scroll.
     V16.38 still removes expensive backdrop sampling from the many service
     cards, but no longer creates/destroys the recharge panel's layer. */
  html body .cymart-recharge-panel {
    contain:none !important;
    content-visibility:visible !important;
    will-change:auto !important;
    backface-visibility:visible !important;
    -webkit-backface-visibility:visible !important;
    transform:none !important;
  }
}

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

/* ---- SOURCE: /templates/default/css/cymart-mobile-paint-v16-51.css ---- */
/* ======================================================================
   CYMART V16.51 — MOBILE SERVICE PAINT BUDGET
   Android / iPhone / iPad only. Desktop remains unchanged.

   IMPORTANT: this file intentionally contains NO selector for
   .cymart-recharge-panel / .cymart-recharge-ray-* and therefore does not
   alter the approved moving recharge ray.

   Goal: prevent the service list from temporarily disappearing during fast
   kinetic scrolling. Visible and near-visible cards retain the existing
   design. Expensive live backdrop sampling is suspended only for cards that
   are far outside the viewport and restored well before they become visible.
   ====================================================================== */
@media (max-width: 991.98px) {
  /* Never use skipped-paint/layout containment on this long list. */
  html body .cymart-imei-page,
  html body .cymart-imei-page .page-container,
  html body .cymart-imei-page .service-list,
  html body .cymart-imei-page .service-list-box,
  html body .cymart-imei-page .service-list-box .service {
    content-visibility: visible !important;
    contain: none !important;
  }

  /* Keep native vertical scrolling in charge of gestures. */
  html body .cymart-imei-page .service-list-box .service,
  html body .cymart-imei-page .service-list-box .service .card.card-product,
  html body .cymart-imei-page .service-list-box .cym-v35-inner,
  html body .cymart-imei-page .service-list-box .cym-v35-main {
    touch-action: pan-y !important;
    will-change: auto !important;
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
  }

  /* V16.24/V16.25 already own the exact same fixed artwork. Removing an
     unnecessary translateZ promotion does not change its appearance, but
     avoids keeping another large GPU texture alive beside the card layers. */
  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 {
    transform: none !important;
    will-change: auto !important;
  }

  /* FAR OFF-SCREEN ONLY. High specificity is deliberate because later V46
     rules use !important. The original effects are untouched for every item
     inside the 1600px look-ahead zone. */
  html.cymart-v1651-ready body .cymart-imei-page
    .service-list-box .service[data-cymart-v1651-near="0"]
    .card.card-product.cym-v35-card,
  html.cymart-v1651-ready body.cymart-theme-dark .cymart-imei-page
    .service-list-box .service[data-cymart-v1651-near="0"]
    .card.card-product.cym-v35-card {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
  }

  html.cymart-v1651-ready body .cymart-imei-page
    .service-list .row.group h3.title[data-cymart-v1651-near="0"],
  html.cymart-v1651-ready body.cymart-theme-dark .cymart-imei-page
    .service-list .row.group h3.title[data-cymart-v1651-near="0"] {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
  }

  html.cymart-v1651-ready body .cymart-imei-page
    .card.card-search[data-cymart-v1651-near="0"],
  html.cymart-v1651-ready body.cymart-theme-dark .cymart-imei-page
    .card.card-search[data-cymart-v1651-near="0"] {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
  }
}

/* ---- SOURCE: /templates/default/css/cymart-mobile-ray-v16-54.css ---- */
/* ======================================================================
   CYMART V16.54 — RELIABLE MOBILE RECHARGE RAY
   ----------------------------------------------------------------------
   - Keeps V16.51 scroll/paint fix untouched.
   - Does NOT use canvas, requestAnimationFrame, scroll handlers or observers.
   - The new SVG uses a unique class, so V16.28/V16.40 legacy hide rules
     cannot accidentally make it disappear.
   - The SVG is absolutely positioned and can never add layout height.
   ====================================================================== */
@media (max-width: 991.98px) {
  /* Retire all older mobile ray surfaces. They remain in DOM only for
     compatibility, but only V16.54 is visible. */
  html body .cymart-recharge-panel > canvas.cymart-recharge-ray-canvas,
  html body .cymart-recharge-panel > svg.cymart-recharge-ray-svg,
  html body .cymart-recharge-panel > svg.cymart-mobile-ray-v1652 {
    display:none !important;
    visibility:hidden !important;
    opacity:0 !important;
    pointer-events:none !important;
  }

  html body .cymart-recharge-panel {
    position:relative !important;
    overflow:visible !important;
    isolation:isolate !important;
    contain:none !important;
    content-visibility:visible !important;
    transform:none !important;
    will-change:auto !important;
  }

  /* Unique overlay: later than all legacy layers and outside normal flow. */
  html body .cymart-recharge-panel > svg.cymart-mobile-ray-v1654 {
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
    position:absolute !important;
    inset:-2px !important;
    width:calc(100% + 4px) !important;
    height:calc(100% + 4px) !important;
    min-width:0 !important;
    min-height:0 !important;
    max-width:none !important;
    max-height:none !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    z-index:60 !important;
    overflow:visible !important;
    pointer-events:none !important;
    background:transparent !important;
    transform:none !important;
    will-change:auto !important;
  }

  html body .cymart-recharge-panel > svg.cymart-mobile-ray-v1654 rect {
    fill:none !important;
    vector-effect:non-scaling-stroke !important;
    stroke-linecap:round !important;
    stroke-linejoin:round !important;
    shape-rendering:geometricPrecision !important;
  }

  /* Faint static perimeter. */
  html body .cymart-mobile-ray-v1654 .cymart-v1654-edge {
    stroke-width:1.15 !important;
    opacity:.7 !important;
  }
  html body:not(.cymart-theme-dark) .cymart-mobile-ray-v1654 .cymart-v1654-edge,
  html body.cymart-theme-light .cymart-mobile-ray-v1654 .cymart-v1654-edge {
    stroke:rgba(106,136,255,.26) !important;
  }
  html body.cymart-theme-dark .cymart-mobile-ray-v1654 .cymart-v1654-edge {
    stroke:rgba(152,226,255,.20) !important;
  }

  /* Three coincident animated strokes produce the comet-like cyan ray from
     the reference without a costly full-panel blur/compositor surface. */
  html body .cymart-mobile-ray-v1654 .cymart-v1654-glow {
    stroke-width:7.2 !important;
    opacity:.18 !important;
  }
  html body .cymart-mobile-ray-v1654 .cymart-v1654-mid {
    stroke-width:4.1 !important;
    opacity:.58 !important;
  }
  html body .cymart-mobile-ray-v1654 .cymart-v1654-core {
    stroke-width:2.15 !important;
    opacity:1 !important;
  }

  html body:not(.cymart-theme-dark) .cymart-mobile-ray-v1654 .cymart-v1654-glow,
  html body.cymart-theme-light .cymart-mobile-ray-v1654 .cymart-v1654-glow {
    stroke:#6e7dff !important;
  }
  html body:not(.cymart-theme-dark) .cymart-mobile-ray-v1654 .cymart-v1654-mid,
  html body.cymart-theme-light .cymart-mobile-ray-v1654 .cymart-v1654-mid {
    stroke:#6fb8ff !important;
  }
  html body:not(.cymart-theme-dark) .cymart-mobile-ray-v1654 .cymart-v1654-core,
  html body.cymart-theme-light .cymart-mobile-ray-v1654 .cymart-v1654-core {
    stroke:#eaf8ff !important;
  }

  html body.cymart-theme-dark .cymart-mobile-ray-v1654 .cymart-v1654-glow {
    stroke:#238cff !important;
  }
  html body.cymart-theme-dark .cymart-mobile-ray-v1654 .cymart-v1654-mid {
    stroke:#55d8ff !important;
  }
  html body.cymart-theme-dark .cymart-mobile-ray-v1654 .cymart-v1654-core {
    stroke:#effdff !important;
  }

  /* Keep all real content above the panel surface. The ray is non-interactive
     and only paints a few pixels at the perimeter. */
  html body .cymart-recharge-panel > :not(.cymart-mobile-ray-v1654):not(.cymart-recharge-ray-svg):not(.cymart-recharge-ray-canvas):not(.cymart-mobile-ray-v1652) {
    position:relative !important;
    z-index:2 !important;
  }
}