@import "react-phone-number-input/style.css";

/* Custom styles for react-phone-number-input to match Tailwind theme */
.PhoneInput {
  display: flex;
  align-items: center;
}

.PhoneInputInput {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: inherit;
}

.PhoneInputCountry {
  margin-right: 0.75rem;
  padding-right: 0.75rem;
  border-right: 1px solid #1e293b; /* slate-800 */
}

.PhoneInputCountrySelect {
  background-color: #020617; /* slate-950 */
  color: #f8fafc; /* slate-50 */
}

.PhoneInputCountrySelectArrow {
  opacity: 0.5;
}