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