/* Phone input styles — extracted from lcpglobal.css */

/* LCP-Phone-Input Overrides */
.lcp-container-form div.react-tel-input input {
  font-family: "Roobert", sans-serif;
  font-size: 16px;
  height: 38px;
  width: 100%;
  border: 1px solid #ced4da;
  line-height: 1.5;
  border-radius: 0.25rem;
}

.lcp-two-column-padding div.react-tel-input input {
  font-family: "Roobert", sans-serif;
  font-size: 16px;
  height: 38px;
  width: 100%;
  border: 1px solid #ced4da;
  line-height: 1.5;
  border-radius: 0.25rem;
}

.react-tel-input input:disabled {
  background-color: #e9ecef;
}

/* Invalid-number and its focus are exact copies of the form field error for bootstrap 5 */
.lcp-phone-input .react-tel-input .form-control.invalid-number {
  background-color: white;
  border-color: #dc3545;
  padding-right: calc(1.5em + 0.75rem);
  background-image: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 12 12%27 width=%2712%27 height=%2712%27 fill=%27none%27 stroke=%27%23dc3545%27%3e%3ccircle cx=%276%27 cy=%276%27 r=%274.5%27/%3e%3cpath stroke-linejoin=%27round%27 d=%27M5.8 3.6h.4L6 6.5z%27/%3e%3ccircle cx=%276%27 cy=%278.2%27 r=%27.6%27 fill=%27%23dc3545%27 stroke=%27none%27/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right calc(0.375em + 0.1875rem) center;
  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.lcp-phone-input .react-tel-input .flag-dropdown.invalid-number {
  border-left: 1px solid #dc3545;
  border-top: 1px solid #dc3545;
  border-bottom: 1px solid #dc3545;
}

.lcp-phone-input .react-tel-input .form-control.invalid-number:focus {
  border-color: #dc3545;
  box-shadow: 0 0 0 0.25rem rgb(220 53 69 / 25%);
}

/* Phone Input Disabled CSS */
.disabled-phone .flag-dropdown .selected-flag {
  cursor: not-allowed;
  background-color: #e9ecef;
}

.disabled-phone .flag-dropdown .selected-flag:hover {
  background-color: #e9ecef;
}

.disabled-phone .flag-dropdown {
  cursor: not-allowed;
  background-color: #e9ecef;
}

.disabled-phone .flag-dropdown:hover {
  background-color: #e9ecef;
}

.disabled-phone .form-control:hover {
  border-color: #ced4da;
}

.phone-outline-error {
  border-color: #dc3545;
}

/* Responsive */
@media (min-width: 768px) {
  .lcp-form-group .lcp-phone-input {
    padding-right: 25px;
  }
}

@media (max-width: 767px) {
  .lcp-form-group .lcp-phone-input {
    margin-bottom: 15px;
  }
}