/**
 * Tripzzy Phone Input styles.
 *
 * @since 1.6.0
 */
.tripzzy-form-field .iti {
  width: 100%;
  display: flex;
}
.tripzzy-form-field .iti__flag{
  box-shadow: none;
}

.tripzzy-form-field .iti input.tripzzy-phone-input,
.tripzzy-form-field input.tripzzy-phone-input {
  width: 100%;
}

.tripzzy-form-field .iti__country-list {
  z-index: 9999;
}

/*
 * The country search box lives inside .tripzzy-form-field, so the theme rule
 * `.tripzzy-form-field input:not(...)` (0,3,1 — one :not() argument is the
 * compound `[type="text"][id^="react-select-"]`) beats the library's
 * `.iti__search-input` (0,1,0) and wipes its icon spacing, making the
 * magnifier overlap the "Search" text. Restore the library geometry with
 * a stronger selector (0,4,1).
 */
.tripzzy-form-field div.iti.iti__input-container .iti__search-input {
  width: 100%;
  border-width: 0;
  border-radius: 3px;
  min-height: 0;
  padding-left: calc(var(--iti-spacer-horizontal) + var(--iti-globe-icon-size) + var(--iti-spacer-horizontal));
  padding-right: calc(var(--iti-spacer-horizontal) + var(--iti-clear-icon-size) + var(--iti-spacer-horizontal));
}

[dir="rtl"] .tripzzy-form-field div.iti.iti__input-container .iti__search-input {
  padding-right: calc(var(--iti-spacer-horizontal) + var(--iti-globe-icon-size) + var(--iti-spacer-horizontal));
  padding-left: calc(var(--iti-spacer-horizontal) + var(--iti-clear-icon-size) + var(--iti-spacer-horizontal));
}

.tripzzy-form-field input.tripzzy-phone-input.has-error,
.tripzzy-form-field .iti input.tripzzy-phone-input.has-error {
  border-color: #dc3232;
}