/* Ensuring phone number input has space for country flag */
.phone-input {
    width: 100%;
    padding-left: 55px; /* Space for the country flag and dial code */
    border-radius: 5px;  /* Soft rounded corners */
    border: 1px solid #ddd; /* Light border color */
    box-sizing: border-box; /* Ensures padding doesn't affect total width */
}

/* Container for the flag */
.iti {
    width: 100%;
    position: relative;
}

/* Centering the flag */
.iti__flag-container {
    position: absolute;
    left: 10px; /* Align the flag */
    top: 50%;
    transform: translateY(-50%);
}

/* Set the flag's width to make it uniform */
.iti__selected-flag {
    width: 24px; /* Adjust the size of the flag */
    height: auto;
}

/* Adjust input field so it doesn't overlap with the flag */
.iti__input {
    width: 100%;
    padding-left: 45px; /* Add extra padding so text doesn't overlap the flag */
    font-size: 14px;  /* A bit smaller font for better alignment */
}

/* Make the dropdown more compact and easier to scroll */
.iti__list {
    max-height: 250px; /* Reduce the height of the dropdown */
    overflow-y: auto;
    font-size: 14px;  /* Smaller font size for the dropdown */
}

/* Optional: Improve focus state to make the input more interactive */
.phone-input:focus {
    border-color: #28a745;  /* Green border when focused */
    box-shadow: 0 0 5px rgba(40, 167, 69, 0.5); /* Subtle green glow */
    outline: none;  /* Remove default outline */
}