/* intl-tel-input CSS - https://github.com/jackocnr/intl-tel-input */
@import "https://cdn.jsdelivr.net/npm/intl-tel-input@19.5.6/build/css/intlTelInput.css";

/* Custom styling for intl-tel-input to match our design */
.iti {
  width: 100%;
}

.iti__tel-input {
  border: 1px solid rgb(209 213 219) !important; /* border-gray-300 */
  border-radius: 0.375rem !important; /* rounded-md */
  padding: 0.5rem 0.75rem 0.5rem 4rem !important; /* px-3 py-2 + padding-left para a bandeira */
  font-size: 1rem !important; /* text-base */
  color: rgb(15 23 42) !important; /* text-lare-navy */
  background-color: white !important;
}

.iti__tel-input:focus {
  border-color: rgb(251 191 36) !important; /* border-lare-gold */
  box-shadow: 0 0 0 2px rgb(251 191 36 / 0.2) !important; /* ring-lare-gold */
  outline: none !important;
}

.iti__tel-input::placeholder {
  color: rgb(156 163 175) !important; /* placeholder:text-gray-400 */
}

.iti__flag-container {
  border-right: 1px solid rgb(209 213 219) !important;
}

.iti__selected-flag {
  padding: 0.5rem !important;
  display: flex !important;
  align-items: center !important;
}

.iti__flag {
  margin-right: 0.5rem !important;
  flex-shrink: 0 !important; /* Impede que a bandeira encolha */
}

.iti__selected-dial-code {
  margin-left: 0.75rem !important; /* Espaço específico para o código do país */
  display: inline-block !important;
  font-weight: 500 !important;
  color: rgb(75 85 99) !important; /* text-gray-600 */
}

/* Ensure dropdown is hidden by default */
.iti__dropdown-content.iti__hide {
  display: none !important;
}

/* Dropdown styling */
.iti__country-list {
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid rgb(209 213 219);
  border-radius: 0.375rem;
  background: white;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}

.iti__search-input {
  border: 1px solid rgb(209 213 219) !important;
  border-radius: 0.375rem !important;
  padding: 0.5rem !important;
  margin: 0.5rem !important;
  width: calc(100% - 1rem) !important;
}

.iti__country:hover {
  background-color: rgb(243 244 246) !important; /* hover:bg-gray-100 */
}

.iti__country.iti__highlight {
  background-color: rgb(251 191 36) !important; /* bg-lare-gold */
  color: white !important;
}