.iti{width:100%;}
input.phone-display{direction:ltr;text-align:center !important;}
.phone-error{color:#cc0000;margin-top:6px;display:none;}
.is-loading{opacity:.7;pointer-events:none;}

/* Ensure dial code block is visible and not covering the input */
.iti { position: relative; }
.iti__flag-container { position: absolute; left: 0; top: 0; bottom: 0; width: 56px; z-index: 3; }

/* Reserve space for the dial code; keep typing centered */
.iti--allow-dropdown input.iti__tel-input,
.iti--separate-dial-code input.iti__tel-input {
  padding-left: 62px;
  text-align: center !important;
}

/* Country list should float above modals */
.iti__country-list { z-index: 10000; }
/* show +20 (not 20+) in RTL */
.iti .iti__selected-dial-code{direction:ltr;unicode-bidi:plaintext;}

/* Enhanced styles for better UX */
.iti__country-list {
  z-index: 10000;
  max-height: 200px;
  overflow-y: auto;
}

.iti__selected-flag {
  padding: 0 8px;
}

.phone-error {
  font-size: 12px;
  line-height: 1.4;
  margin-top: 4px;
  display: block;
}

/* RTL support */
[dir="rtl"] .iti__selected-flag {
  padding: 0 8px 0 0;
}

[dir="rtl"] .iti__arrow {
  left: 6px;
  right: auto;
}

/* Form integration */
.iti input[type="tel"] {
  width: 100%;
  border: none;
  outline: none;
  padding: 8px 12px;
}

/* Loading state for submit buttons */
.submit.is-loading,
button.submit.is-loading,
.btn-submit.is-loading,
input[type="submit"].is-loading {
  cursor: not-allowed;
  position: relative;
}

.submit.is-loading::after,
button.submit.is-loading::after,
.btn-submit.is-loading::after,
input[type="submit"].is-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 16px;
  border: 2px solid transparent;
  border-top: 2px solid currentColor;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Mobile optimizations */
@media (max-width: 768px) {
  .iti__country-list {
    max-height: 150px;
  }
  
  .iti__selected-flag {
    padding: 0 6px;
  }
  
  .phone-error {
    font-size: 11px;
  }
}