/* Phone Input Styles */
.react-international-phone-input-container {
  display: flex;
  height: 40px;
  align-items: stretch;
  position: relative;
}

.react-international-phone-input-container:focus-within {
  outline: none;
  border-radius: 6px;
  box-shadow: 0 0 0 1px var(--ring);
}

.react-international-phone-country-selector-button {
  background-color: var(--background);
  border: 1px solid var(--border);
  border-right: none;
  border-radius: 6px 0 0 6px;
  height: 40px;
  min-height: 40px;
  padding: 0 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--foreground);
  transition: all 0.2s ease;
  margin: 0;
}

.react-international-phone-country-selector-button:hover {
  background-color: var(--muted);
}

.react-international-phone-country-selector-button > img {
  width: 20px;
  height: 15px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 2px;
}

.react-international-phone-country-selector-button > span {
  font-size: 14px;
  color: var(--foreground);
}

.react-international-phone-input {
  height: 40px !important;
  min-height: 40px !important;
  border-radius: 0 6px 6px 0 !important;
  border: 1px solid var(--border) !important;
  background-color: var(--background) !important;
  color: var(--foreground) !important;
  font-size: 14px !important;
  padding: 0 12px !important;
  margin: 0 !important;
}

.react-international-phone-input-container:focus-within
  .react-international-phone-input {
  border-color: var(--ring);
}

.react-international-phone-input:focus {
  outline: none !important;
  box-shadow: none !important;
}

.react-international-phone-country-selector-button:focus {
  outline: none !important;
  box-shadow: none !important;
}

.react-international-phone-input::-moz-placeholder {
  color: var(--muted-foreground);
}

.react-international-phone-input::placeholder {
  color: var(--muted-foreground);
}