/* ITI Custom Styles for Tailwind Consistency */
.iti {
    display: block !important;
    width: 100% !important;
}

/* Ensure the input looks like other fields but with space for the country code */
.iti input[type="tel"] {
    height: 3.5rem !important;
    border-radius: 1rem !important; /* 2xl */
    padding-left: 110px !important; /* Slight gap optimized */
}

/* Dropdown Content & List */
.iti__dropdown-content {
  background-color: #ffffff !important;
  border: 2px solid #f1f5f9 !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
  border-radius: 1rem !important;
  overflow: hidden !important;
  z-index: 100 !important;
  margin-top: 0.5rem !important;
}

.dark .iti__dropdown-content {
  background-color: #1e293b !important;
  border-color: #334155 !important;
}

.iti__country-list {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  max-height: 24rem !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Hide the duplicate ITI dial code if JS is handling it */
.iti__selected-dial-code {
  display: none !important;
}

.dark .iti__selected-dial-code {
  color: #ffffff !important;
}

/* Selected country/dial code area (Dynamic Box) */
.iti--separate-dial-code .iti__selected-flag {
  background-color: #f8fbff !important;
  padding: 0 0.25rem !important; /* Minimal padding */
  border-radius: 1rem 0 0 1rem !important;
  min-width: 70px !important; /* Ensure consistent compact width */
  display: flex !important;
  align-items: center !important;
  border-right: 2px solid #f1f5f9 !important;
}

.dark .iti--separate-dial-code .iti__selected-flag {
  background-color: #0f172a !important;
  border-right-color: #1e293b !important;
}

/* Search field consistency */
.iti__search-input {
  width: 100% !important;
  padding: 0.875rem 1rem !important;
  border: none !important;
  border-bottom: 2px solid #f1f5f9 !important;
  background-color: #ffffff !important;
  color: #0f172a !important;
  outline: none !important;
  font-size: 0.875rem !important;
}

.dark .iti__search-input {
  border-bottom-color: #334155 !important;
  background-color: #1e293b !important;
  color: #ffffff !important;
}

.iti__search-input::placeholder {
  color: #94a3b8 !important;
}

/* Country entry styling */
.iti__country {
  padding: 0.75rem 1rem !important;
  background-color: transparent !important;
  color: #475569 !important;
  transition: all 0.1s !important;
}

.dark .iti__country {
  color: #cbd5e1 !important;
}

.iti__country:hover, .iti__highlight {
  background-color: #3b82f6 !important;
  color: #ffffff !important;
}

.iti__country-name, .iti__dial-code {
  color: inherit !important;
}

/* Custom focus style for the whole field */
.iti input:focus {
  outline: none !important;
}