.phone-input {
    border-color: #999;
    transition: border-color 0.2s ease-in-out;

    background-image: url('path/to/your/phone-icon.svg'); /* Replace with your icon path */
    background-repeat: no-repeat;
    background-position: 10px center; /* Position icon 10px from left, vertically centered */
    background-size: 20px 20px; /* Size of the icon */
    padding-left: 40px; /* Add padding to the left to make space for the icon */

    /* If you use a background icon, make sure the background doesn't interfere with the mask */
    /* background-color: #fff; /* Ensure white background */
}

/* Styles when the phone input is focused */
.phone-input:focus {
    border-color: #007bff; /* Example: Primary blue color on focus */
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); /* Add a subtle glow */
    outline: none; /* Remove default browser outline */
}

/* Optional: Style for valid/invalid states (Requires browser validation or JS validation) */
/* These might conflict with the Inputmask's initial state, use with caution */
/*
.phone-input:valid {
    border-color: #28a745; /* Green border for valid */
}

.phone-input:invalid {
    border-color: #dc3545; /* Red border for invalid */
}
*/


/* Style for the placeholder text (the mask characters) */
/* Note: Browser support for ::placeholder pseudo-element styling varies */
.phone-input::placeholder {
    color: #aaa; /* Lighter gray color for the mask characters */
    opacity: 1; /* Ensure opacity is not reduced by browser defaults */
}

/* Specific prefixes for broader browser support for ::placeholder */
.phone-input::-webkit-input-placeholder { /* Chrome, Edge, Safari */
    color: #aaa;
    opacity: 1;
}
.phone-input:-ms-input-placeholder { /* Internet Explorer */
    color: #aaa;
    opacity: 1;
}
.phone-input::-ms-input-placeholder { /* Microsoft Edge */
    color: #aaa;
    opacity: 1;
}
.phone-input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: #aaa;
    opacity: 1;
}
.phone-input::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #aaa;
    opacity: 1;
}