/* ---- intl-tel-input final fixes ---- */
.iti { position: relative; display: block; width: 100%; }

/* Keep the flag + dial code sitting INSIDE the input, not above it */
.iti__flag-container {
  position: absolute !important;
  top: 0; left: 10px; bottom: 0;
  display: flex;
  align-items: center;     /* vertically center flag/dial code */
  cursor: pointer;
}

/* Give the input space on the left for flag + dial code */
.iti--separate-dial-code input[type="tel"],
.iti input[type="tel"] {
  padding-left: 92px !important;   /* adjust if it feels tight */
  height: 44px;                     /* match your input height */
  line-height: 44px;                /* keeps text vertically centered */
}

/* Make sure the dial code sits inline, not as a block on a new line */
.iti__selected-dial-code { display: inline-block !important; }

.iti__country-list{

}

/* Country list behavior */
.iti__country-list.iti__hide { display: none !important; }
.iti__country-list {
  position: absolute !important;
  z-index: 9999;
  background: #fff;
  border: 1px solid #ddd;
  max-height: 220px;
  overflow-y: auto;
  font-family: var(--font-body);
  font-size: 100px;
  font-weight: 100;
  padding: 10px;
  list-style: none;
}

.iti__country-name, .iti__dial-code{
    font-size: 12px;
}

.iti__country:hover{
    background-color: var(--hover-bg-1)
}


/* Adjust only the phone input */
#phone-input {
  padding-left: 50px !important;  /* was 92px, increase until it clears */
}