/* ====================================================================== */
/*  weelik-phone-fix.css                                                   */
/*                                                                        */
/*  Loaded on every PUBLIC-FACING template that uses intl-tel-input but   */
/*  doesn't include page.css (where the same fix lives for backend admin */
/*  pages). The original third-party.css ships `padding-left: 52px` for  */
/*  `.iti--separate-dial-code input` — fine for 1-2 char dial codes but  */
/*  too short for 3-digit codes (+229, +234, +254…), making the typed    */
/*  digits overlap the dial-code container.                              */
/*                                                                        */
/*  Bump padding-left to 120px so all dial codes fit, while keeping the  */
/*  RTL mirror for `.rtl[dir=rtl]` and `.authImage.rtl` ancestors.       */
/* ====================================================================== */

html body .iti--separate-dial-code input,
html body .iti--separate-dial-code input[type="text"],
html body .iti--separate-dial-code input[type="tel"],
html body .iti--allow-dropdown input,
html body .iti--allow-dropdown input[type="text"],
html body .iti--allow-dropdown input[type="tel"] {
    padding-left: 120px !important;
    padding-right: 6px !important;
    text-align: left !important;
}

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

html body .iti__flag-container { z-index: 5; }
html body .iti { display: block !important; width: 100% !important; }

/* override-the-override — same as in page.css for public pages */
html body #phoneNumber,
html body #alternativePhone,
html body #contactrPhone,
html body #whatsappStorePhone {
    padding-left: 120px !important;
    padding-right: 6px !important;
    text-align: left !important;
}

/* override-the-override */
html body #phoneNumber,
html body #alternativePhone,
html body #contactrPhone,
html body #whatsappStorePhone {
    padding-left: 120px !important;
    padding-right: 6px !important;
    text-align: left !important;
}