/* Custom styles for react-phone-input-2 */
.phone-input-container {
  width: 100% !important;
}

.phone-input-container .form-control {
  padding-left: 60px !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
}

.phone-input-container .flag-dropdown {
  background: transparent !important;
  border: none !important;
}

.phone-input-container .selected-flag {
  padding: 8px 12px !important;
  background: #f9fafb !important;
  border: 1px solid #d1d5db !important;
  border-radius: 0.5rem 0 0 0.5rem !important;
}

.phone-input-container .selected-flag:hover {
  background: #f3f4f6 !important;
}

.phone-input-container .country-list {
  border-radius: 0.5rem !important;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
  border: 1px solid #d1d5db !important;
}

.phone-input-container .country-list .country {
  padding: 8px 12px !important;
}

.phone-input-container .country-list .country:hover {
  background: #f3f4f6 !important;
}

.phone-input-container .country-list .country.highlight {
  background: #fef2f2 !important;
  color: #dc2626 !important;
}

.phone-input-container .search {
  margin: 8px !important;
  padding: 8px 12px !important;
  border: 1px solid #d1d5db !important;
  border-radius: 0.375rem !important;
}

.phone-input-container .search:focus {
  outline: none !important;
  border-color: #dc2626 !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1) !important;
}