.iti { position: relative !important; }

/* Position flag and dial code on the left and keep them transparent */
.iti .iti__flag-container,
.iti .iti__selected-flag {
  position: absolute !important;
  left: 0.6rem !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  display: flex !important;
  align-items: center !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
  z-index: 4 !important;
}

/* Dial code placed just right of flag */
.iti .iti__selected-dial-code {
  position: absolute !important;
  /* Move dial code closer to the flag to appear almost joined */
  left: 2.2rem !important; /* reduced from 3.2rem */
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 0.15rem !important;
  border-radius: 6px !important;
  color: inherit !important;
  z-index: 5 !important;
}

/* Ensure input text/placeholder starts after dial code */
.iti .iti__input, .iti input[type="tel"] {
  padding-left: 6.2rem !important; /* tuneable */
}

/* Small screens: increase left positions to avoid overlap */
@media (max-width: 640px) {
  .iti .iti__flag-container,
  .iti .iti__selected-flag { left: 0.45rem !important; }
  /* keep dial code close on small screens too */
  .iti .iti__selected-dial-code { left: 2.6rem !important; }
  /* Move placeholder a bit to the right on mobile to avoid overlap */
  .iti .iti__input, .iti input[type="tel"] { padding-left: 7.0rem !important; }
}

/* Extremely small inputs (narrow containers) - fall back to inline flow */
@media (max-width: 360px) {
  .iti { display: inline-flex !important; }
  .iti .iti__flag-container,
  .iti .iti__selected-flag { position: relative !important; left: auto !important; transform:none !important; }
  .iti .iti__selected-dial-code { position: relative !important; left: auto !important; transform:none !important; padding-left: 0.25rem !important; }
  .iti .iti__input, .iti input[type="tel"] { padding-left: 0.9rem !important; }
}

/* Strong specificity fallback */
body .iti .iti__selected-dial-code { background: transparent !important; }