/* Fix phone input width issues for intlTelInput library
 * 
 * This CSS file fixes common issues with intlTelInput library:
 * 1. Phone input width not taking full container width
 * 2. Excessive padding-left (like 1518px) when using separateDialCode: true
 * 3. RTL layout issues in Arabic interface
 * 4. Bootstrap form control integration problems
 * 
 * Applied globally to all forms using intlTelInput across the application.
 */

/* Ensure the phone input container takes full width */
.iti {
    width: 100% !important;
    display: block !important;
}

.iti input, .iti input[type=text], .iti input[type=tel] {
    width: 100% !important;
    display: block !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
}

/* Ensure the phone input container takes full width in form rows */
.fv-row .iti {
    width: 100%;
}

/* Fix for separate dial code layout */
.iti--separate-dial-code .iti__selected-flag {
    width: auto;
    min-width: 60px;
    max-width: 80px;
}

.iti--separate-dial-code input, .iti--separate-dial-code input[type=text], .iti--separate-dial-code input[type=tel] {
    width: calc(100% - 80px) !important;
    display: inline-block !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
    margin-left: 0 !important;
}

/* Override intlTelInput's default padding for separate dial code */
.iti--separate-dial-code input[type=tel] {
    padding-left: 6px !important;
    padding-right: 6px !important;
}

/* Ensure proper alignment in form controls */
.form-control.iti__input {
    width: 100% !important;
}

/* Fix for Bootstrap form control integration */
.form-control-lg.iti__input {
    width: 100% !important;
}

/* Ensure the flag container doesn't break the layout */
.iti__flag-container {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    padding: 1px;
    z-index: 1;
    width: auto;
    max-width: 80px;
}

/* Fix for RTL layouts */
[dir="rtl"] .iti__flag-container {
    right: auto;
    left: 0;
}

[dir="rtl"] .iti--separate-dial-code .iti__flag-container {
    left: 0;
    right: auto;
}

[dir="rtl"] .iti--separate-dial-code input, 
[dir="rtl"] .iti--separate-dial-code input[type=text], 
[dir="rtl"] .iti--separate-dial-code input[type=tel] {
    padding-left: 6px !important;
    padding-right: 6px !important;
}

/* Override any conflicting padding from intlTelInput */
.iti input[type=tel] {
    padding-left: 6px !important;
    padding-right: 6px !important;
}

/* Fix for allow dropdown mode */
.iti--allow-dropdown input, 
.iti--allow-dropdown input[type=text], 
.iti--allow-dropdown input[type=tel] {
    padding-left: 6px !important;
    padding-right: 6px !important;
}

/* Critical fix for excessive padding issue */
.iti input[type=tel] {
    padding-left: 6px !important;
    padding-right: 6px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Override any intlTelInput default padding */
.iti input, .iti input[type=text], .iti input[type=tel] {
    padding-left: 6px !important;
    padding-right: 6px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Specific fix for separate dial code mode */
.iti--separate-dial-code input[type=tel] {
    padding-left: 6px !important;
    padding-right: 6px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}