/* custom-styles.css / myiti.css - IMPORTANT: Place this after Bootstrap CSS and iti.css */

/* 1. STYLES FOR THE MAIN PHONE NUMBER INPUT FIELD (.iti wrapper) */
/* Adjusting width to 300px to match other form controls */
.iti:not(.iti--fullscreen-popup) {
    height: 38px !important;
    min-height: 38px !important;
    
    display: flex !important;
    align-items: stretch !important;
    
    /* --- CHANGE STARTS HERE --- */
    /* Change from width: 100% !important; to width: 300px !important; */
    width: 300px !important; /* Set to 300px to match your other inputs */
    /* --- CHANGE ENDS HERE --- */
    
    font-size: 1rem !important;
    line-height: 1.5 !important;
    
    background-color: white !important;
    border: 1px solid #212529 !important;
    border-radius: var(--bs-border-radius) !important;
    box-shadow: none !important;
    
    margin: 0 !important;
    padding: 0 !important;
}

/* ... (rest of your myiti.css content remains the same) ... */