/**
 * WHMCS PlusLayer Order Form Customizations
 * Fixes: Mobile overflow, EPP lock icon alignment & input zoom.
 */

/* Prevent horizontal scroll on order pages */
.orderform {
  max-width: 100%;
  overflow-x: hidden;
}

/* Main container for icon-prepended inputs */
.orderform .prepend-icon,
#frmConfigureDomains .form-group.prepend-icon {
  position: relative !important;
  width: 100% !important;
  margin-bottom: 20px !important;
  overflow: hidden; /* safety */
  max-width: 100%;
}

/* Input field styling (White Box) */
.orderform .prepend-icon .field,
#frmConfigureDomains .form-group.prepend-icon > input[type="text"] {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: 44px !important;
  padding-left: 46px !important;
  box-sizing: border-box !important;
  position: relative;
  z-index: 1;
}

#frmConfigureDomains .form-group.prepend-icon > input[type="text"]{
  padding-left: 50px !important;
}

/* Lock icon positioning (Perfectly centered) */
.orderform .prepend-icon .field-icon,
#frmConfigureDomains .form-group.prepend-icon > label.field-icon {
  position: absolute !important;
  left: 12px !important;
  top: 22px !important;
  transform: translateY(-50%) !important;
  -webkit-transform: translateY(-50%) !important;
  width: 24px !important;
  height: 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 10 !important;
  pointer-events: none !important;
  margin: 0 !important;
}

/* Font icon vertical centering fix */
.orderform .prepend-icon .field-icon i,
#frmConfigureDomains .form-group.prepend-icon > label.field-icon i {
  line-height: 1 !important;
}

/* Help text styling (EPP description) */
.orderform .prepend-icon .field-help-text,
#frmConfigureDomains .form-group.prepend-icon .field-help-text {
  display: block !important;
  margin-top: 8px !important;
  position: static !important;
  max-width: 100%;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Mobile: Prevent browser auto-zoom on focus */
@media (max-width: 768px) {
  .orderform .prepend-icon .field,
  #frmConfigureDomains .form-group.prepend-icon > input[type="text"] {
    font-size: 16px !important;
  }
}