/* Import the CDN CSS for intlTelInput */
@import url('https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/css/intlTelInput.css');

/* Override only what's needed for dark theme and functionality */
.iti {
  position: relative !important;
  display: inline-block !important;
  width: 100% !important;
}

.iti__divider {
   background-color: #495057 !important;
   padding-bottom: 0 !important;
   margin-bottom: 0 !important;
}

.iti__dropdown {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  z-index: 9999 !important;
  width: 100% !important;
  min-width: 260px !important;
  max-height: 200px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  background-color: #495057 !important;
  border: 1px solid #6c757d !important;
  border-radius: 5px !important;
  box-shadow: 0 8px 16px rgba(0,0,0,0.4) !important;
  margin-top: 1px !important;
  scrollbar-width: thin !important;
  scrollbar-color: #6c757d #495057 !important;
}

/* Custom scrollbar for webkit browsers */
.iti__dropdown::-webkit-scrollbar {
  width: 8px !important;
}

.iti__dropdown::-webkit-scrollbar-track {
  background: #495057 !important;
  border-radius: 4px !important;
}

.iti__dropdown::-webkit-scrollbar-thumb {
  background: #6c757d !important;
  border-radius: 4px !important;
}

.iti__dropdown::-webkit-scrollbar-thumb:hover {
  background: #5a6268 !important;
}

.iti__flag-container {
  background-color: #6c757d !important;
  border-radius: 5px 0 0 5px !important;
}

.iti__selected-flag {
  background-color: #6c757d !important;
  color: #fff !important;
}

.iti__selected-flag:hover,
.iti__selected-flag:focus {
  background-color: #5a6268 !important;
}

.iti__arrow {
  border-top-color: #fff !important;
}

.iti__arrow--up {
  border-bottom-color: #fff !important;
  border-top-color: transparent !important;
}

.iti__country {
  color: #fff !important;
  background-color: #495057 !important;
  border-bottom: 1px solid #6c757d !important;
  display: flex !important;
  align-items: center !important;
  padding: 8px 12px !important;
}

.iti__country:hover {
  background-color: #6c757d !important;
}

.iti__country.iti__highlight {
  background-color: #6366f1 !important;
  color: #fff !important;
}

.iti__dial-code {
  color: #adb5bd !important;
  margin-left: auto !important;
}

.iti__country-name {
  color: #fff !important;
  margin-right: 8px !important;
  margin-left: 8px !important;
}

/* Fix selected flag display */
.iti__selected-flag .iti__flag {
  margin-right: 8px !important;
}

/* Ensure proper alignment in dropdown */
.iti__country .iti__flag {
  margin-right: 8px !important;
  flex-shrink: 0 !important;
}

/* Country list styling */
.iti__country-list {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* Ensure dropdown appears above all other elements */
.iti--allow-dropdown {
  z-index: 9999 !important;
}

/* Fix for form columns to handle dropdown overflow */
.col-md-6:has(.iti) {
  z-index: 10000 !important;
  position: relative !important;
}

/* Fix for mobile */
@media (max-width: 768px) {
  .iti__dropdown {
    max-width: calc(100vw - 40px) !important;
    max-height: 150px !important;
  }
  
  .iti__country-name {
    font-size: 14px !important;
  }
}