.elementor-27415 .elementor-element.elementor-element-df1545a .smsalertmodal-widget-wrapper .smsalert_otp_validate_submit,.smsalertmodal-widget-wrapper .saresubmit{background-color:#409EFF !important;color:#ffffff !important;}/* Start custom CSS for smsalert-modal-widget, class: .elementor-element-df1545a *//* =========================================================
   FLEEGO — SMS ALERT OTP POPUP
   FINAL CSS
   ========================================================= */


/* =========================================================
   1. SMS ALERT OTP OVERLAY
   ========================================================= */

.smsalertModal.popup-4[style*="display: block"] {

    position: fixed !important;

    top: 0 !important;
    left: 0 !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    display: block !important;

    background: rgba(0, 0, 0, 0.60) !important;

    z-index: 999999 !important;

    box-sizing: border-box !important;
}


/* =========================================================
   2. OTP BOX — EXACT CENTRE OF SCREEN
   ========================================================= */

.smsalertModal.popup-4 .modal-content {

    position: fixed !important;

    top: 50% !important;
    left: 50% !important;

    width: 390px !important;
    max-width: calc(100vw - 30px) !important;

    margin: 0 !important;
    padding: 0 !important;

    background: #FFFFFF !important;

    border: none !important;

    border-radius: 17px !important;

    overflow: hidden !important;

    box-shadow:
        0 18px 50px rgba(0, 0, 0, 0.20) !important;

    transform: translate(-50%, -50%) !important;

    transition: none !important;

    box-sizing: border-box !important;
}


/* =========================================================
   3. LIME TOP BORDER
   ========================================================= */

.smsalertModal.popup-4 .modal-content::before {

    content: "" !important;

    display: block !important;

    width: 100% !important;

    height: 4px !important;

    background: #D3FA02 !important;
}


/* =========================================================
   4. MODAL BODY
   ========================================================= */

.smsalertModal.popup-4 .modal-body {

    width: 100% !important;

    margin: 0 !important;

    padding: 20px 16px 14px !important;

    box-sizing: border-box !important;

    background: #FFFFFF !important;
}


/* Remove plugin inline margin */

.smsalertModal.popup-4 .modal-body > div {

    width: 100% !important;

    margin: 0 !important;

    padding: 0 !important;

    box-sizing: border-box !important;
}


/* =========================================================
   5. HIDE EDIT NUMBER
   ========================================================= */

.smsalertModal.popup-4 .sa-edit-phone,
.smsalertModal.popup-4 .edit-user-phone {

    display: none !important;
}


/* =========================================================
   6. OTP MESSAGE
   ========================================================= */

.smsalertModal.popup-4 .sa-message {

    display: block !important;

    width: 100% !important;

    max-width: 350px !important;

    margin: 8px auto 12px !important;

    padding: 0 !important;

    background: transparent !important;

    border: none !important;

    color: #636363 !important;

    font-family: "Poppins", sans-serif !important;

    font-size: 14px !important;

    font-weight: 400 !important;

    line-height: 1.42 !important;

    letter-spacing: 0.015em !important;

    text-align: center !important;
}


/* Remove WooCommerce styling */

.smsalertModal.popup-4 .sa-message::before,
.smsalertModal.popup-4 .sa-message::after {

    display: none !important;
}


/* =========================================================
   7. OTP VALIDATION AREA
   ========================================================= */

.smsalertModal.popup-4 .smsalert_validate_field {

    display: flex !important;

    flex-direction: row !important;

    flex-wrap: wrap !important;

    align-items: center !important;

    justify-content: center !important;

    width: 100% !important;

    margin: 0 !important;

    padding: 0 !important;

    box-sizing: border-box !important;

    text-align: center !important;

    direction: ltr !important;
}


/* =========================================================
   8. REMOVE BR ELEMENTS
   ========================================================= */

.smsalertModal.popup-4
.smsalert_validate_field > br {

    display: none !important;
}


/* =========================================================
   9. HIDE INDIVIDUAL OTP BOXES
   ========================================================= */

.smsalertModal.popup-4 .otp-number.hide {

    display: none !important;
}


/* =========================================================
   10. OTP INPUT
   ========================================================= */

.smsalertModal.popup-4
#smsalert_customer_validation_otp_token {

    display: block !important;

    order: 1 !important;

    flex: 0 0 100% !important;

    width: 100% !important;

    height: 44px !important;

    margin: 0 0 7px !important;

    padding: 0 12px !important;

    box-sizing: border-box !important;

    background: #FFFFFF !important;

    border: 1px solid #D5D8DC !important;

    border-radius: 9px !important;

    color: #000000 !important;

    font-family: "Poppins", sans-serif !important;

    font-size: 18px !important;

    font-weight: 600 !important;

    line-height: 44px !important;

    letter-spacing: 7px !important;

    text-align: center !important;

    outline: none !important;

    box-shadow: none !important;

    transition: none !important;
}


/* OTP focus */

.smsalertModal.popup-4
#smsalert_customer_validation_otp_token:focus {

    border-color: #4941D1 !important;

    box-shadow:
        0 0 0 3px rgba(73, 65, 209, 0.10) !important;
}


/* =========================================================
   11. VALIDATE OTP BUTTON
   ========================================================= */

.smsalertModal.popup-4 #sa_verify_otp {

    display: inline-block !important;

    order: 2 !important;

    flex: 0 0 auto !important;

    width: auto !important;

    min-width: 0 !important;

    height: auto !important;

    margin: 0 auto 13px !important;

    padding: 12px 20px !important;

    box-sizing: border-box !important;

    background: #D3FA02 !important;

    border: none !important;

    border-radius: 20px !important;

    color: #000000 !important;

    font-family: "Poppins", sans-serif !important;

    font-size: 15px !important;

    font-weight: 700 !important;

    line-height: 1 !important;

    letter-spacing: 0.015em !important;

    text-align: center !important;

    cursor: pointer !important;

    box-shadow: none !important;

    transform: none !important;

    transition: none !important;
}


/* Button hover */

.smsalertModal.popup-4 #sa_verify_otp:hover {

    background: #D3FA02 !important;

    color: #000000 !important;

    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.10) !important;

    transform: none !important;
}


/* =========================================================
   12. FOOTER ELEMENTS
   ========================================================= */

.smsalertModal.popup-4 .sa_forgot {

    display: inline-block !important;

    order: 3 !important;

    flex: 0 0 auto !important;

    width: auto !important;

    max-width: none !important;

    margin: 0 !important;

    padding: 0 !important;

    float: none !important;

    position: static !important;

    color: #636363 !important;

    font-family: "Poppins", sans-serif !important;

    font-size: 12px !important;

    font-weight: 400 !important;

    line-height: 17px !important;

    letter-spacing: 0.015em !important;

    white-space: nowrap !important;

    text-align: center !important;

    vertical-align: middle !important;
}


/* TIMER */

.smsalertModal.popup-4 .sa_timer {

    order: 4 !important;

    flex: 0 0 auto !important;

    width: auto !important;

    min-width: 0 !important;

    margin: 0 0 0 6px !important;

    padding: 0 !important;

    float: none !important;

    position: static !important;

    color: #636363 !important;

    font-family: "Poppins", sans-serif !important;

    font-size: 12px !important;

    font-weight: 400 !important;

    line-height: 17px !important;

    letter-spacing: 0.015em !important;

    white-space: nowrap !important;

    text-align: center !important;

    vertical-align: middle !important;
}


/* Timer text */

.smsalertModal.popup-4 .sa_timer .satimer {

    color: #636363 !important;

    font-family: "Poppins", sans-serif !important;

    font-size: 12px !important;

    font-weight: 400 !important;

    line-height: 17px !important;

    letter-spacing: 0.015em !important;
}


/* RESEND */

.smsalertModal.popup-4 .sa_resend_btn {

    order: 5 !important;

    flex: 0 0 auto !important;

    display: inline-block !important;

    float: none !important;

    position: static !important;

    width: 0 !important;

    max-width: 0 !important;

    min-width: 0 !important;

    height: 17px !important;

    margin: 0 !important;

    padding: 0 !important;

    overflow: hidden !important;

    visibility: hidden !important;

    opacity: 0 !important;

    pointer-events: none !important;

    color: #4941D1 !important;

    font-family: "Poppins", sans-serif !important;

    font-size: 12px !important;

    font-weight: 700 !important;

    line-height: 17px !important;

    letter-spacing: 0.015em !important;

    white-space: nowrap !important;

    text-decoration: none !important;

    cursor: pointer !important;

    vertical-align: middle !important;

    transition: none !important;
}


/* =========================================================
   13. RESEND — WHEN TIMER IS FINISHED
   ========================================================= */

.smsalertModal.popup-4
.smsalert_validate_field:has(.sa_timer[style*="display: none"])
.sa_resend_btn {

    width: auto !important;

    max-width: none !important;

    min-width: 0 !important;

    height: 17px !important;

    margin: 0 0 0 6px !important;

    padding: 0 !important;

    overflow: visible !important;

    visibility: visible !important;

    opacity: 1 !important;

    pointer-events: auto !important;

    color: #4941D1 !important;
}


/* Resend hover */

.smsalertModal.popup-4
.sa_resend_btn:hover {

    color: #636363 !important;

    text-decoration: none !important;
}


/* =========================================================
   14. TIMER DISPLAY
   ========================================================= */

.smsalertModal.popup-4
.sa_timer:not([style*="display: none"]) {

    display: inline-block !important;
}


.smsalertModal.popup-4
.sa_timer[style*="display: none"] {

    display: none !important;
}


/* =========================================================
   15. SMS ALERT CLOSE BUTTON
   ========================================================= */

.smsalertModal.popup-4 .close {

    position: absolute !important;

    top: 15px !important;
    right: 15px !important;

    z-index: 100 !important;

    width: 12px !important;
    height: 12px !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;

    border: none !important;
    border-radius: 50% !important;

    cursor: pointer !important;

    opacity: 1 !important;

    transform: none !important;
}


/* =========================================================
   16. SVG CLOSE ICON — EXACT ELEMENTOR eicon-close
   ========================================================= */

.smsalertModal.popup-4 .close span {

    display: block !important;

    width: 12px !important;
    height: 12px !important;

    margin: 0 !important;
    padding: 0 !important;

    background-color: transparent !important;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath d='M742 167L500 408 258 167C246 154 233 150 217 150 196 150 179 158 167 167 154 179 150 196 150 212 150 229 154 242 171 254L408 500 167 742C138 771 138 800 167 829 196 858 225 858 254 829L496 587 738 829C750 842 767 846 783 846 800 846 817 842 829 829 842 817 846 804 846 783 846 767 842 750 829 737L588 500 833 258C863 229 863 200 833 171 804 137 775 137 742 167Z' fill='%23D5D8DC'/%3E%3C/svg%3E") !important;

    background-repeat: no-repeat !important;

    background-position: center !important;

    background-size: 12px 12px !important;

    font-size: 0 !important;

    line-height: 0 !important;
}


/* Remove SMS Alert's original CSS X */

.smsalertModal.popup-4 .close span::before,
.smsalertModal.popup-4 .close span::after {

    content: none !important;

    display: none !important;
}


/* Hover */

.smsalertModal.popup-4 .close:hover span {

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath d='M742 167L500 408 258 167C246 154 233 150 217 150 196 150 179 158 167 167 154 179 150 196 150 212 150 229 154 242 171 254L408 500 167 742C138 771 138 800 167 829 196 858 225 858 254 829L496 587 738 829C750 842 767 846 783 846 800 846 817 842 829 829 842 817 846 804 846 783 846 767 842 750 829 737L588 500 833 258C863 229 863 200 833 171 804 137 775 137 742 167Z' fill='%23636363'/%3E%3C/svg%3E") !important;

}


/* =========================================================
   17. MOBILE
   ========================================================= */

@media (max-width: 480px) {

    /* SMS Alert overlay */

    .smsalertModal.popup-4[style*="display: block"] {

        width: 100% !important;

        height: 100% !important;

        padding: 0 !important;
    }


    /* OTP box */

    .smsalertModal.popup-4 .modal-content {

        width: calc(100vw - 24px) !important;

        max-width: 360px !important;

        top: 50% !important;

        left: 50% !important;

        transform: translate(-50%, -50%) !important;

        border-radius: 10px !important;
    }


    /* Modal body */

    .smsalertModal.popup-4 .modal-body {

        padding: 19px 16px 12px !important;
    }


    /* OTP message */

    .smsalertModal.popup-4 .sa-message {

        max-width: 325px !important;

        margin-bottom: 11px !important;

        font-size: 13px !important;

        line-height: 1.42 !important;
    }


    /* OTP input */

    .smsalertModal.popup-4
    #smsalert_customer_validation_otp_token {

        height: 44px !important;

        margin-bottom: 7px !important;

        font-size: 18px !important;

        letter-spacing: 6px !important;
    }


    /* Verify button */

    .smsalertModal.popup-4 #sa_verify_otp {

        margin-bottom: 13px !important;

        padding: 12px 20px !important;
        
        font-size: 12px !important;
    }


    /* Footer */

    .smsalertModal.popup-4 .sa_forgot,
    .smsalertModal.popup-4 .sa_timer,
    .smsalertModal.popup-4 .sa_resend_btn {

        font-size: 11px !important;

        line-height: 17px !important;
    }


    .smsalertModal.popup-4
    .sa_resend_btn {

        height: 17px !important;
    }


    .smsalertModal.popup-4
    .smsalert_validate_field:has(.sa_timer[style*="display: none"])
    .sa_resend_btn {

        height: 17px !important;

        margin-left: 6px !important;
    }

}/* End custom CSS */