/* Webflow + intl-tel-input styling - integrated with .input--field */
.iti {
  display: block !important;
  width: 100% !important;
}

.iti__selected-flag {
  padding: 0 20px 0 15px;
  background-color: transparent;
}

.iti__country-list {
  border: 1px solid #dddaba;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  max-height: 300px;
  font-family: inherit;
}

.iti__country {
  padding: 10px 15px;
}

.iti__country:hover {
  background-color: #f3efe4;
}

.iti__selected-country {
  background-color: #243f3e;
  color: white;
}

/* Match your .input--field styling */
.iti__tel-input.input--field {
  background-color: #0000 !important;
  border: 1px solid #dddaba !important;
  margin-bottom: 0 !important;
  padding-left: 70px !important; /* Space for flag/dial code */
  width: 100% !important;
}

/* Keep your existing input styles for focus, hover, etc. */
.iti__tel-input.input--field:focus {
  border-color: #dddaba !important;
  outline: none !important;
}

/* Error state */
.iti__tel-input.input--field.error {
  border-color: #e74c3c !important;
}

/* Flag dropdown button */
.iti__flag-container {
  background-color: transparent;
}

.iti__selected-dial-code {
  color: inherit;
  font-family: inherit;
}

/* Mobile responsive */
@media (max-width: 767px) {
  .iti__tel-input.input--field {
    font-size: 16px !important; /* Prevents zoom on iOS */
  }
}