/* ======================================================================
   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;
  }
}