/* ============================================================
   MOZGO PAYMENT FINAL UI
   Final presentation layer only
   ============================================================ */

#mozgoPaymentModal {
    z-index: 99999 !important;
    padding: 24px !important;
}


/* ------------------------------------------------------------
   MODAL SIZE
   ------------------------------------------------------------ */

#mozgoPaymentModal .mozgo-payment-modal-dialog {
    width: min(94vw, 610px) !important;
    max-width: 610px !important;
    margin: auto !important;
}


#mozgoPaymentModal .mozgo-payment-modal-card {
    width: 100% !important;
    overflow: hidden !important;

    border:
        1px solid rgba(0, 0, 0, .06) !important;

    border-radius:
        28px !important;

    background:
        #ffffff !important;

    box-shadow:
        0 28px 80px rgba(0, 0, 0, .28) !important;
}


/* ------------------------------------------------------------
   HEADER
   ------------------------------------------------------------ */

#mozgoPaymentModal .mozgo-payment-modal-header {
    position: relative !important;

    min-height:
        148px !important;

    padding:
        27px 70px 54px !important;

    overflow:
        hidden !important;

    background:
        linear-gradient(
            180deg,
            #f20b0b 0%,
            #f41111 100%
        ) !important;

    text-align:
        center !important;
}


#mozgoPaymentModal .mozgo-payment-modal-header::before {
    content: "" !important;

    position:
        absolute !important;

    top:
        22px !important;

    right:
        24px !important;

    width:
        65px !important;

    height:
        38px !important;

    opacity:
        .28 !important;

    background-image:
        radial-gradient(
            #ffffff 1.5px,
            transparent 1.7px
        ) !important;

    background-size:
        9px 9px !important;
}


#mozgoPaymentModal .mozgo-payment-modal-header::after {
    content: "" !important;

    position:
        absolute !important;

    left:
        -5% !important;

    bottom:
        -33px !important;

    width:
        110% !important;

    height:
        70px !important;

    border-radius:
        50% 50% 0 0 / 70% 70% 0 0 !important;

    background:
        #ffffff !important;
}


#mozgoPaymentModal .mozgo-payment-modal-title {
    position:
        relative !important;

    z-index:
        2 !important;

    margin:
        3px 0 5px !important;

    color:
        #ffffff !important;

    font-size:
        27px !important;

    line-height:
        1.2 !important;

    font-weight:
        800 !important;

    letter-spacing:
        -.25px !important;
}


#mozgoPaymentModal .mozgo-payment-modal-subtitle {
    position:
        relative !important;

    z-index:
        2 !important;

    margin:
        0 !important;

    color:
        rgba(255, 255, 255, .96) !important;

    font-size:
        13px !important;

    line-height:
        1.4 !important;

    font-weight:
        500 !important;
}


/* close */

#mozgoPaymentModalClose {
    position:
        absolute !important;

    top:
        17px !important;

    left:
        17px !important;

    z-index:
        5 !important;

    width:
        37px !important;

    height:
        37px !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    padding:
        0 !important;

    border:
        0 !important;

    border-radius:
        10px !important;

    background:
        #ffffff !important;

    color:
        #e72222 !important;

    font-size:
        21px !important;

    line-height:
        1 !important;

    font-weight:
        700 !important;

    box-shadow:
        0 5px 16px rgba(0, 0, 0, .12) !important;
}


/* ------------------------------------------------------------
   BODY
   ------------------------------------------------------------ */

#mozgoPaymentModal .mozgo-payment-modal-body {
    padding:
        28px 36px 34px !important;

    text-align:
        center !important;

    background:
        #ffffff !important;
}


/* logo */

#mozgoPaymentModal img[src*="mpesa"],
#mozgoPaymentModal img[src*="emola"],
#mozgoPaymentModal .mozgo-payment-provider-logo {
    display:
        block !important;

    width:
        auto !important;

    max-width:
        190px !important;

    max-height:
        78px !important;

    margin:
        5px auto 18px !important;

    object-fit:
        contain !important;
}


/* instruction */

#mozgoPaymentModal .mozgo-payment-modal-instruction {
    margin:
        3px 0 5px !important;

    color:
        #142129 !important;

    font-size:
        17px !important;

    line-height:
        1.35 !important;

    font-weight:
        800 !important;
}


#mozgoPaymentModal .mozgo-payment-modal-note {
    margin:
        0 auto 20px !important;

    color:
        #8a969d !important;

    font-size:
        11px !important;

    line-height:
        1.5 !important;
}


/* ------------------------------------------------------------
   PHONE INPUT
   ------------------------------------------------------------ */

/*
 * font-size:0 also hides stray literal icon/text nodes
 * that may exist beside the input.
 */
#mozgoPaymentModal *:has(> #mozgo_mobile_money_phone) {
    position:
        relative !important;

    font-size:
        0 !important;
}


/*
 * Remove every visual decoration around the input.
 * The field is intentionally clean, without telephone icon.
 */
#mozgoPaymentModal
*:has(> #mozgo_mobile_money_phone)
> *:not(#mozgo_mobile_money_phone) {

    display:
        none !important;
}


#mozgoPaymentModal #mozgo_mobile_money_phone {
    display:
        block !important;

    width:
        100% !important;

    height:
        60px !important;

    min-height:
        60px !important;

    margin:
        0 !important;

    padding:
        0 18px !important;

    box-sizing:
        border-box !important;

    border:
        1.5px solid #ecd0d0 !important;

    border-radius:
        16px !important;

    outline:
        0 !important;

    background:
        #ffffff !important;

    color:
        #18262d !important;

    font-family:
        inherit !important;

    font-size:
        19px !important;

    line-height:
        60px !important;

    font-weight:
        700 !important;

    letter-spacing:
        .2px !important;

    box-shadow:
        none !important;

    transition:
        border-color .18s ease,
        box-shadow .18s ease !important;
}


#mozgoPaymentModal #mozgo_mobile_money_phone::placeholder {
    color:
        #a9b3b9 !important;

    font-weight:
        600 !important;
}


#mozgoPaymentModal #mozgo_mobile_money_phone:focus {
    border-color:
        #e95d5d !important;

    box-shadow:
        0 0 0 4px rgba(233, 93, 93, .09) !important;
}


#mozgoPaymentModal #mozgo_mobile_money_phone.is-invalid {
    border-color:
        #df3d48 !important;

    box-shadow:
        0 0 0 4px rgba(223, 61, 72, .10) !important;
}


/* ------------------------------------------------------------
   INLINE VALIDATION
   ------------------------------------------------------------ */

#mozgoPaymentInlineError {
    display:
        none;

    width:
        100%;

    margin:
        10px 0 16px !important;

    padding:
        13px 15px !important;

    box-sizing:
        border-box;

    border:
        1px solid #f1c3c7 !important;

    border-radius:
        14px !important;

    background:
        #fff4f4 !important;

    color:
        #8e3038 !important;

    text-align:
        left !important;

    font-size:
        12px !important;

    line-height:
        1.5 !important;
}


#mozgoPaymentInlineError.is-visible {
    display:
        block !important;
}


#mozgoPaymentInlineError strong {
    display:
        block !important;

    margin:
        0 0 3px !important;

    color:
        #c62936 !important;

    font-size:
        13px !important;

    font-weight:
        800 !important;
}


#mozgoPaymentInlineError span {
    display:
        block !important;

    color:
        #766064 !important;

    font-size:
        12px !important;
}


/* ------------------------------------------------------------
   BENEFITS
   ------------------------------------------------------------ */

#mozgoPaymentModal .mozgo-payment-features,
#mozgoPaymentModal .mozgo-payment-benefits {
    display:
        grid !important;

    grid-template-columns:
        repeat(3, 1fr) !important;

    margin:
        17px 0 18px !important;

    overflow:
        hidden !important;

    border:
        1px solid #f0dddd !important;

    border-radius:
        15px !important;

    background:
        #fff6f6 !important;
}


#mozgoPaymentModal .mozgo-payment-feature,
#mozgoPaymentModal .mozgo-payment-benefit {
    position:
        relative !important;

    min-height:
        60px !important;

    display:
        flex !important;

    flex-direction:
        column !important;

    justify-content:
        center !important;

    align-items:
        center !important;

    padding:
        9px 7px !important;

    box-sizing:
        border-box !important;
}


#mozgoPaymentModal
.mozgo-payment-feature:not(:last-child)::after,
#mozgoPaymentModal
.mozgo-payment-benefit:not(:last-child)::after {

    content:
        "" !important;

    position:
        absolute !important;

    top:
        11px !important;

    right:
        0 !important;

    bottom:
        11px !important;

    width:
        1px !important;

    background:
        rgba(0, 0, 0, .08) !important;
}


#mozgoPaymentModal .mozgo-payment-feature strong,
#mozgoPaymentModal .mozgo-payment-benefit strong {
    color:
        #27343a !important;

    font-size:
        12px !important;

    line-height:
        1.25 !important;

    font-weight:
        800 !important;
}


#mozgoPaymentModal .mozgo-payment-feature small,
#mozgoPaymentModal .mozgo-payment-benefit small {
    margin-top:
        3px !important;

    color:
        #929ca1 !important;

    font-size:
        10px !important;

    line-height:
        1.25 !important;
}


/* ------------------------------------------------------------
   PAYMENT STATUS
   ------------------------------------------------------------ */

#mozgoPaymentLiveStatus {
    margin:
        17px 0 0 !important;

    padding:
        20px 20px !important;

    border-radius:
        17px !important;

    text-align:
        center !important;

    font-size:
        12px !important;

    line-height:
        1.55 !important;
}


#mozgoPaymentLiveStatus.is-processing {
    border:
        1px solid #cce8e6 !important;

    background:
        #f1fbfa !important;

    color:
        #29706c !important;
}


#mozgoPaymentLiveStatus.is-confirmed {
    border:
        1px solid #cce8d4 !important;

    background:
        #f2fbf5 !important;

    color:
        #25683b !important;
}


#mozgoPaymentLiveStatus.is-failed {
    border:
        1px solid #f0c8cb !important;

    background:
        #fff4f4 !important;

    color:
        #a53740 !important;
}


#mozgoPaymentLiveStatus strong {
    display:
        block !important;

    margin-bottom:
        4px !important;

    font-size:
        15px !important;

    font-weight:
        800 !important;
}


#mozgoPaymentLiveStatus .mozgo-payment-failure-help {
    margin-top:
        12px !important;

    padding-top:
        12px !important;

    border-top:
        1px solid rgba(165,55,64,.14) !important;

    line-height:
        1.55 !important;
}


/* ------------------------------------------------------------
   BUTTON
   ------------------------------------------------------------ */

#mozgoPaymentContinue {
    width:
        100% !important;

    height:
        57px !important;

    min-height:
        57px !important;

    margin:
        17px 0 0 !important;

    padding:
        0 18px !important;

    border:
        0 !important;

    border-radius:
        14px !important;

    background:
        linear-gradient(
            180deg,
            #28c95c 0%,
            #1eb34f 100%
        ) !important;

    color:
        #ffffff !important;

    font-size:
        15px !important;

    line-height:
        57px !important;

    font-weight:
        800 !important;

    letter-spacing:
        .2px !important;

    box-shadow:
        0 10px 24px rgba(30,179,79,.22) !important;
}


#mozgoPaymentContinue:disabled {
    opacity:
        .78 !important;

    cursor:
        wait !important;
}


/* ------------------------------------------------------------
   MOBILE
   ------------------------------------------------------------ */

@media (max-width: 640px) {

    #mozgoPaymentModal {
        padding:
            12px !important;
    }


    #mozgoPaymentModal .mozgo-payment-modal-dialog {
        width:
            calc(100vw - 24px) !important;

        max-width:
            none !important;
    }


    #mozgoPaymentModal .mozgo-payment-modal-card {
        border-radius:
            22px !important;
    }


    #mozgoPaymentModal .mozgo-payment-modal-header {
        min-height:
            124px !important;

        padding:
            23px 54px 45px !important;
    }


    #mozgoPaymentModal .mozgo-payment-modal-title {
        font-size:
            22px !important;
    }


    #mozgoPaymentModal .mozgo-payment-modal-body {
        padding:
            23px 20px 25px !important;
    }


    #mozgoPaymentModal #mozgo_mobile_money_phone {
        height:
            56px !important;

        min-height:
            56px !important;

        line-height:
            56px !important;

        font-size:
            17px !important;
    }

}