/* ITJONI WHMCS Custom CSS */

/* Clean stable JohaPos configure layout */
@media (min-width: 992px){
  #order-standard_cart .product-configurable-options,
  #order-standard_cart .field-container,
  #order-standard_cart .sub-heading{
    width:100% !important;
    max-width:980px !important;
    margin-left:auto !important;
    margin-right:auto !important;
    left:auto !important;
    transform:none !important;
  }

  #order-standard_cart .field-container{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:18px 34px !important;
    align-items:start !important;
  }

  #order-standard_cart .field-container:after{
    display:none !important;
    content:none !important;
  }

  #order-standard_cart .field-container .form-group{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    margin:0 !important;
    padding:0 !important;
  }

  #order-standard_cart .field-container input,
  #order-standard_cart .field-container select,
  #order-standard_cart .field-container textarea,
  #order-standard_cart .field-container .form-control{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    height:46px !important;
    box-sizing:border-box !important;
  }

  #order-standard_cart .field-container label{
    display:block !important;
    margin:0 0 8px !important;
    white-space:normal !important;
  }

  #order-standard_cart .field-container .help-block,
  #order-standard_cart .field-container .field-help-text{
    margin:8px 0 0 !important;
    line-height:1.35 !important;
  }
}

@media (max-width: 991px){
  #order-standard_cart .field-container{
    display:block !important;
  }

  #order-standard_cart .field-container .form-group{
    margin-bottom:18px !important;
  }
}

/* ITJONI FINAL MOBILE ORDER FORM FIX */
@media (max-width: 991px){

  html,
  body{
    overflow-x:hidden !important;
    width:100% !important;
  }

  #order-standard_cart,
  #order-standard_cart form,
  #order-standard_cart .row,
  #order-standard_cart .col-md-8,
  #order-standard_cart .col-md-4,
  #order-standard_cart .pull-md-right,
  #order-standard_cart .product-configurable-options,
  #order-standard_cart .sub-heading,
  #order-standard_cart .field-container,
  #order-standard_cart .cart-body,
  #order-standard_cart .cart-sidebar,
  #order-standard_cart .summary-container{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    margin-left:0 !important;
    margin-right:0 !important;
    left:auto !important;
    right:auto !important;
    transform:none !important;
    float:none !important;
    position:relative !important;
    box-sizing:border-box !important;
  }

  #order-standard_cart .field-container{
    display:block !important;
    padding:0 14px !important;
  }

  #order-standard_cart .field-container .form-group{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    margin:0 0 20px !important;
    padding:0 !important;
    box-sizing:border-box !important;
  }

  #order-standard_cart input,
  #order-standard_cart select,
  #order-standard_cart textarea,
  #order-standard_cart .form-control{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    height:48px !important;
    box-sizing:border-box !important;
  }

  #order-standard_cart .sub-heading{
    padding:0 14px !important;
    margin:26px 0 18px !important;
    text-align:center !important;
  }

  #order-standard_cart .product-info,
  #order-standard_cart .product-details,
  #order-standard_cart .product-configurable-options{
    padding-left:14px !important;
    padding-right:14px !important;
    box-sizing:border-box !important;
  }

  #order-standard_cart .order-summary,
  #order-standard_cart .summary-container{
    margin-top:24px !important;
    padding-left:14px !important;
    padding-right:14px !important;
  }

  #order-standard_cart .btn,
  #order-standard_cart button,
  #order-standard_cart input[type="submit"]{
    max-width:100% !important;
    white-space:normal !important;
  }

  #order-standard_cart label{
    font-size:15px !important;
    line-height:1.35 !important;
    white-space:normal !important;
  }

  #order-standard_cart .help-block,
  #order-standard_cart .field-help-text{
    font-size:13px !important;
    line-height:1.4 !important;
    white-space:normal !important;
  }
}

/* ITJONI MOBILE EXISTING DOMAIN LABEL FIX */
@media (max-width: 768px){

  #order-standard_cart .domain-selection-options label,
  #order-standard_cart label[for="selowndomain"],
  #order-standard_cart .domain-selection-options .radio label{
    display:block !important;
    max-width:320px !important;
    margin:0 auto 18px auto !important;
    text-align:center !important;
    font-size:18px !important;
    line-height:1.45 !important;
    white-space:normal !important;
  }

  #order-standard_cart .domain-selection-options{
    text-align:center !important;
    margin-bottom:12px !important;
  }

  #order-standard_cart .domain-input-group{
    margin-top:8px !important;
  }
}

/* ITJONI SAFE MOBILE EXISTING DOMAIN FORM */
@media (max-width:768px){

  body, html{
    overflow-x:hidden !important;
  }

  #order-standard_cart h1{
    font-size:38px !important;
    line-height:1.12 !important;
    text-align:center !important;
    margin-bottom:34px !important;
  }

  #order-standard_cart label[for="selowndomain"],
  #order-standard_cart .domain-selection-options label{
    display:block !important;
    max-width:310px !important;
    margin:0 auto 18px auto !important;
    text-align:center !important;
    font-size:18px !important;
    line-height:1.35 !important;
    font-weight:800 !important;
    white-space:normal !important;
  }

  #order-standard_cart .iradio_square-blue{
    display:none !important;
  }

  #order-standard_cart #domainowndomain,
  #order-standard_cart .domain-input-group{
    width:100% !important;
    max-width:360px !important;
    margin:0 auto !important;
    padding:0 14px !important;
    box-sizing:border-box !important;
  }

  #order-standard_cart #domainowndomain .row,
  #order-standard_cart .domain-input-group .row{
    display:block !important;
    width:100% !important;
    margin:0 !important;
  }

  #order-standard_cart #domainowndomain [class*="col-"],
  #order-standard_cart .domain-input-group [class*="col-"]{
    width:100% !important;
    max-width:100% !important;
    float:none !important;
    display:block !important;
    padding:0 !important;
    margin:0 0 10px 0 !important;
  }

  #order-standard_cart #domainowndomain .input-group,
  #order-standard_cart .domain-input-group .input-group{
    display:block !important;
    width:100% !important;
  }

  #order-standard_cart #domainowndomain .input-group-addon,
  #order-standard_cart .domain-input-group .input-group-addon,
  #order-standard_cart #domainowndomain input,
  #order-standard_cart .domain-input-group input,
  #order-standard_cart #domainowndomain select,
  #order-standard_cart .domain-input-group select,
  #order-standard_cart #domainowndomain button,
  #order-standard_cart .domain-input-group button,
  #order-standard_cart #domainowndomain .btn,
  #order-standard_cart .domain-input-group .btn{
    width:100% !important;
    max-width:100% !important;
    height:52px !important;
    display:block !important;
    box-sizing:border-box !important;
    border-radius:12px !important;
    font-size:18px !important;
    text-align:center !important;
    margin:0 0 10px 0 !important;
  }

  #order-standard_cart #domainowndomain button,
  #order-standard_cart .domain-input-group button,
  #order-standard_cart #domainowndomain .btn,
  #order-standard_cart .domain-input-group .btn{
    font-size:20px !important;
    font-weight:900 !important;
  }
}


/* hide all left icons inside checkout/register form */
  #order-standard_cart .field-icon,
  #order-standard_cart .prepend-icon .field-icon,
  #order-standard_cart .input-group-addon,
  #registration .field-icon,
  #registration .prepend-icon .field-icon,
  #registration .input-group-addon{
    display:none !important;
    visibility:hidden !important;
    opacity:0 !important;
    width:0 !important;
    min-width:0 !important;
    max-width:0 !important;
    height:0 !important;
    padding:0 !important;
    margin:0 !important;
    border:0 !important;
    overflow:hidden !important;
  }

  /* input wrapper full width */
  #order-standard_cart .prepend-icon,
  #registration .prepend-icon,
  #order-standard_cart .form-group,
  #registration .form-group,
  #order-standard_cart .field-container,
  #registration .field-container{
    width:100% !important;
    max-width:100% !important;
    display:block !important;
    position:relative !important;
    padding:0 !important;
    margin:0 0 18px 0 !important;
    box-sizing:border-box !important;
  }

  /* force input text visible */
  #order-standard_cart input,
  #order-standard_cart select,
  #order-standard_cart textarea,
  #order-standard_cart .form-control,
  #order-standard_cart .field,
  #registration input,
  #registration select,
  #registration textarea,
  #registration .form-control,
  #registration .field{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    height:58px !important;
    padding-left:18px !important;
    padding-right:18px !important;
    margin-left:0 !important;
    text-indent:0 !important;
    font-size:18px !important;
    line-height:58px !important;
    color:#ffffff !important;
    background:#070917 !important;
    border:1px solid rgba(130,150,185,.50) !important;
    border-radius:12px !important;
    box-sizing:border-box !important;
    text-align:left !important;
  }

  #order-standard_cart input::placeholder,
  #order-standard_cart textarea::placeholder,
  #registration input::placeholder,
  #registration textarea::placeholder{
    color:#aeb9cc !important;
    opacity:1 !important;
  }

  /* phone field special */
  #order-standard_cart .intl-tel-input,
  #registration .intl-tel-input{
    width:100% !important;
    max-width:100% !important;
    display:block !important;
  }

  #order-standard_cart .intl-tel-input .flag-container,
  #registration .intl-tel-input .flag-container{
    display:none !important;
  }

  #order-standard_cart .intl-tel-input input,
  #registration .intl-tel-input input{
    padding-left:18px !important;
  }

  /* section heading */
  #order-standard_cart .sub-heading,
  #registration .sub-heading{
    text-align:center !important;
    margin-top:28px !important;
    margin-bottom:24px !important;
  }

  #order-standard_cart .sub-heading span,
  #registration .sub-heading span{
    background:#0b1020 !important;
    color:#ffffff !important;
    font-size:20px !important;
    font-weight:900 !important;
  }
}


/* phone number field */
  #registration .intl-tel-input{
    width:100% !important;
    display:block !important;
  }

  #registration .intl-tel-input input,
  #registration .intl-tel-input input[type="tel"],
  #registration .intl-tel-input input[type="text"]{
    padding-left:96px !important;
  }

  #registration .intl-tel-input .flag-container{
    left:48px !important;
    height:42px !important;
    z-index:8 !important;
  }

  #registration .intl-tel-input .selected-flag{
    height:42px !important;
    background:transparent !important;
  }

  #registration .intl-tel-input .selected-dial-code{
    color:#ffffff !important;
    font-size:14px !important;
  }

  #registration .field-container,
  #registration .form-group{
    box-sizing:border-box !important;
  }

  #registration .sub-heading span{
    background:#0b1020 !important;
    color:#ffffff !important;
  }
}

/* ITJONI CLEAN EXISTING DOMAIN BOX FIX */
#order-standard_cart #domainowndomain,
#order-standard_cart .domain-input-group{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  background:transparent !important;
  max-width:620px !important;
  margin:20px 0 0 0 !important;
  padding:0 !important;
  border:0 !important;
  height:auto !important;
  min-height:0 !important;
  overflow:visible !important;
}

#order-standard_cart .domain-selection-options label[for="selowndomain"],
#order-standard_cart label[for="selowndomain"]{
  padding-left:0 !important;
  margin-left:0 !important;
  display:block !important;
  color:#ffffff !important;
  font-weight:800 !important;
}

#order-standard_cart input.itjoni-owndomain-radio,
#order-standard_cart #selowndomain{
  position:absolute !important;
  left:-9999px !important;
  width:1px !important;
  height:1px !important;
  opacity:0 !important;
}

#order-standard_cart label[for="selowndomain"] .iradio_square-blue,
#order-standard_cart label[for="selowndomain"] .iCheck-helper,
#order-standard_cart .domain-selection-options label[for="selowndomain"] .iradio_square-blue,
#order-standard_cart .domain-selection-options label[for="selowndomain"] .iCheck-helper{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  width:0 !important;
  height:0 !important;
  margin:0 !important;
  padding:0 !important;
}

#order-standard_cart #domainowndomain .row,
#order-standard_cart .domain-input-group .row{
  display:flex !important;
  flex-wrap:nowrap !important;
  align-items:center !important;
  gap:10px !important;
  margin:0 !important;
  width:100% !important;
}

#order-standard_cart #domainowndomain [class*="col-"],
#order-standard_cart .domain-input-group [class*="col-"]{
  float:none !important;
  padding:0 !important;
  margin:0 !important;
}

#order-standard_cart #domainowndomain .input-group-addon{
  width:70px !important;
  min-width:70px !important;
  height:50px !important;
  line-height:50px !important;
  text-align:center !important;
  background:#070917 !important;
  color:#ffffff !important;
  border:1px solid rgba(130,150,185,.45) !important;
  border-radius:12px !important;
}

#order-standard_cart #owndomainsld{
  width:360px !important;
  max-width:360px !important;
  height:50px !important;
  background:#070917 !important;
  color:#ffffff !important;
  border:1px solid rgba(130,150,185,.45) !important;
  border-radius:12px !important;
}

#order-standard_cart #owndomaintld{
  width:120px !important;
  max-width:120px !important;
  height:50px !important;
  background:#070917 !important;
  color:#ffffff !important;
  border:1px solid rgba(130,150,185,.45) !important;
  border-radius:12px !important;
}

#order-standard_cart #useOwnDomain,
#order-standard_cart .domain-input-group button,
#order-standard_cart .domain-input-group .btn{
  width:110px !important;
  height:50px !important;
  border-radius:12px !important;
  font-weight:900 !important;
}

@media(max-width:768px){
  #order-standard_cart #domainowndomain,
  #order-standard_cart .domain-input-group{
    max-width:360px !important;
    margin:18px auto 0 auto !important;
  }

  #order-standard_cart #domainowndomain .row,
  #order-standard_cart .domain-input-group .row{
    display:block !important;
  }

  #order-standard_cart #domainowndomain .input-group-addon,
  #order-standard_cart #owndomainsld,
  #order-standard_cart #owndomaintld,
  #order-standard_cart #useOwnDomain,
  #order-standard_cart .domain-input-group button,
  #order-standard_cart .domain-input-group .btn{
    width:100% !important;
    max-width:100% !important;
    margin:0 0 10px 0 !important;
    display:block !important;
    text-align:center !important;
  }
}

/* ITJONI SAFE CONFIGURE BILLING CYCLE BOX FIX ONLY */
#order-standard_cart .billingcycle,
#order-standard_cart .billing-cycle,
#order-standard_cart .product-billing-cycle,
#order-standard_cart .cycle,
#order-standard_cart div[class*="billing"]{
  overflow:visible !important;
}

#order-standard_cart input[name="billingcycle"]{
  position:absolute !important;
  left:-9999px !important;
  width:1px !important;
  height:1px !important;
  opacity:0 !important;
}

/* Billing cycle selectable box */
#order-standard_cart input[name="billingcycle"] + label,
#order-standard_cart label[for*="billingcycle"],
#order-standard_cart .billingcycle label,
#order-standard_cart .billing-cycle label,
#order-standard_cart .product-billing-cycle label{
  display:flex !important;
  align-items:center !important;
  width:100% !important;
  max-width:100% !important;
  min-height:58px !important;
  height:auto !important;
  padding:15px 20px !important;
  margin:0 0 12px 0 !important;
  line-height:1.35 !important;
  overflow:visible !important;
  white-space:normal !important;
  background:#070917 !important;
  color:#ffffff !important;
  border:1px solid rgba(130,150,185,.50) !important;
  border-radius:14px !important;
  box-sizing:border-box !important;
  font-size:18px !important;
  font-weight:800 !important;
}

/* Any text inside billing cycle box must not cut */
#order-standard_cart input[name="billingcycle"] + label *,
#order-standard_cart label[for*="billingcycle"] *,
#order-standard_cart .billingcycle label *,
#order-standard_cart .billing-cycle label *,
#order-standard_cart .product-billing-cycle label *{
  line-height:1.35 !important;
  overflow:visible !important;
  white-space:normal !important;
}

/* If WHMCS uses select/dropdown for cycle */
#order-standard_cart select[name="billingcycle"]{
  width:100% !important;
  height:58px !important;
  min-height:58px !important;
  padding:0 18px !important;
  line-height:58px !important;
  background:#070917 !important;
  color:#ffffff !important;
  border:1px solid rgba(130,150,185,.50) !important;
  border-radius:14px !important;
  font-size:18px !important;
  font-weight:800 !important;
  box-sizing:border-box !important;
}

@media(max-width:768px){
  #order-standard_cart input[name="billingcycle"] + label,
  #order-standard_cart label[for*="billingcycle"],
  #order-standard_cart .billingcycle label,
  #order-standard_cart .billing-cycle label,
  #order-standard_cart .product-billing-cycle label,
  #order-standard_cart select[name="billingcycle"]{
    font-size:17px !important;
    min-height:56px !important;
    padding:14px 16px !important;
  }
}