/* ============================================================
   MOZGO PAYMENT MODAL
   Reference-inspired professional UI
   UI ONLY - no payment logic
   ============================================================ */

#mozgoPaymentModal {
    --pay-red: #ef0909;
    --pay-orange: #f15a16;
    --pay-green: #1fc35a;
    --pay-green-dark: #18a94c;
    --pay-ink: #111d24;
    --pay-text: #47545a;
    --pay-muted: #87949b;
    --pay-border: #e5eaec;
}


/* ------------------------------------------------------------
   OVERLAY
   ------------------------------------------------------------ */

#mozgoPaymentModal.mozgo-payment-modal {
    background:
        rgba(8, 15, 19, .53) !important;

    backdrop-filter:
        blur(4px);

    -webkit-backdrop-filter:
        blur(4px);
}


/* ------------------------------------------------------------
   DIALOG
   ------------------------------------------------------------ */

#mozgoPaymentModal
.mozgo-payment-modal-dialog {

    width:
        min(94vw, 520px) !important;

    max-width:
        520px !important;

    margin:
        20px auto !important;
}


#mozgoPaymentModal
.mozgo-payment-modal-card {

    width:
        100% !important;

    overflow:
        hidden !important;

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

    border-radius:
        25px !important;

    background:
        #ffffff !important;

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


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

#mozgoPaymentModal
.mozgo-payment-modal-header {

    position:
        relative !important;

    min-height:
        128px !important;

    padding:
        25px 58px 44px !important;

    overflow:
        hidden;

    text-align:
        center;

    color:
        #ffffff !important;

    background:
        linear-gradient(
            180deg,
            #ed0505 0%,
            #f10b0b 100%
        ) !important;
}


#mozgoPaymentModal.is-emola
.mozgo-payment-modal-header {

    background:
        linear-gradient(
            180deg,
            #f4681c 0%,
            #ee5410 100%
        ) !important;
}


/* dotted decoration */

#mozgoPaymentModal
.mozgo-payment-modal-header::before {

    content:
        "";

    position:
        absolute;

    top:
        18px;

    right:
        20px;

    width:
        60px;

    height:
        36px;

    opacity:
        .27;

    background-image:
        radial-gradient(
            rgba(255,255,255,.95)
            1.6px,
            transparent 1.8px
        );

    background-size:
        9px 9px;

    pointer-events:
        none;
}


/* white curved divider */

#mozgoPaymentModal
.mozgo-payment-modal-header::after {

    content:
        "";

    position:
        absolute;

    left:
        -5%;

    bottom:
        -28px;

    width:
        110%;

    height:
        54px;

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

    background:
        #ffffff;

    pointer-events:
        none;
}


#mozgoPaymentModal
.mozgo-payment-modal-title {

    position:
        relative;

    z-index:
        2;

    margin:
        6px 0 4px !important;

    color:
        #ffffff !important;

    font-size:
        27px !important;

    line-height:
        1.12 !important;

    font-weight:
        800 !important;

    letter-spacing:
        -.4px;
}


#mozgoPaymentModal
.mozgo-payment-modal-subtitle {

    position:
        relative;

    z-index:
        2;

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

    font-size:
        12px !important;

    font-weight:
        500 !important;
}


/* ------------------------------------------------------------
   CLOSE
   ------------------------------------------------------------ */

#mozgoPaymentModalClose {

    position:
        absolute !important;

    top:
        16px !important;

    left:
        16px !important;

    z-index:
        8;

    width:
        34px !important;

    height:
        34px !important;

    display:
        flex !important;

    align-items:
        center;

    justify-content:
        center;

    padding:
        0 !important;

    border:
        0 !important;

    border-radius:
        9px !important;

    background:
        #ffffff !important;

    color:
        #eb1111 !important;

    font-size:
        22px !important;

    font-weight:
        600 !important;

    line-height:
        1 !important;

    box-shadow:
        0 5px 14px
        rgba(0,0,0,.12);

    cursor:
        pointer;
}


#mozgoPaymentModal.is-emola
#mozgoPaymentModalClose {

    color:
        #eb5b17 !important;
}


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

#mozgoPaymentModal
.mozgo-payment-modal-body {

    padding:
        21px 34px 30px !important;

    background:
        #ffffff !important;

    text-align:
        center;
}


/* ------------------------------------------------------------
   LOGO
   ------------------------------------------------------------ */

#mozgoPaymentModal
.mozgo-payment-provider-logo,

#mozgoPaymentModal
.mozgo-payment-modal-logo,

#mozgoPaymentModal
img[src*="mpesa"],

#mozgoPaymentModal
img[src*="emola"] {

    display:
        block;

    width:
        auto !important;

    max-width:
        170px !important;

    height:
        auto !important;

    max-height:
        74px !important;

    margin:
        7px auto 12px !important;

    object-fit:
        contain !important;
}


/* ------------------------------------------------------------
   INSTRUCTION
   ------------------------------------------------------------ */

#mozgoPaymentModal
.mozgo-payment-modal-instruction {

    margin:
        7px 0 4px !important;

    color:
        var(--pay-ink) !important;

    font-size:
        17px !important;

    line-height:
        1.35 !important;

    font-weight:
        800 !important;
}


/* small secure text */

#mozgoPaymentModal
.mozgo-payment-modal-note,

#mozgoPaymentModal
.mozgo-payment-helper-text,

#mozgoPaymentModal
.mozgo-payment-security-text {

    margin:
        0 auto 17px !important;

    color:
        var(--pay-muted) !important;

    font-size:
        11px !important;

    line-height:
        1.45 !important;
}


/* ------------------------------------------------------------
   PHONE AREA
   ------------------------------------------------------------ */

#mozgoPaymentModal
.mozgo-payment-phone-wrap,

#mozgoPaymentModal
.mozgo-payment-input-wrap {

    min-height:
        58px !important;

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    padding:
        0 15px !important;

    overflow:
        hidden;

    border:
        1px solid
        #f0d3d3 !important;

    border-radius:
        15px !important;

    background:
        #ffffff !important;

    box-shadow:
        none !important;
}


#mozgoPaymentModal.is-emola
.mozgo-payment-phone-wrap,

#mozgoPaymentModal.is-emola
.mozgo-payment-input-wrap {

    border-color:
        #f2d8c8 !important;
}


#mozgo_mobile_money_phone {

    width:
        100% !important;

    min-width:
        0;

    height:
        56px !important;

    padding:
        0 14px !important;

    border:
        1px solid
        #e2e8ea !important;

    border-radius:
        14px !important;

    outline:
        none !important;

    background:
        #ffffff !important;

    color:
        #26373e !important;

    font-size:
        17px !important;

    line-height:
        56px !important;

    font-weight:
        650 !important;

    letter-spacing:
        .4px;

    box-shadow:
        none !important;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}


#mozgo_mobile_money_phone:focus {

    border-color:
        #ea3030 !important;

    box-shadow:
        0 0 0 3px
        rgba(239,9,9,.08) !important;
}


#mozgoPaymentModal.is-emola
#mozgo_mobile_money_phone:focus {

    border-color:
        #ef6c2c !important;

    box-shadow:
        0 0 0 3px
        rgba(239,108,44,.10) !important;
}


#mozgo_mobile_money_phone::placeholder {

    color:
        #aab4b9 !important;

    opacity:
        1;
}


/* ------------------------------------------------------------
   RAPIDO / SEGURO / PRATICO
   ------------------------------------------------------------ */

#mozgoPaymentModal
.mozgo-payment-features,

#mozgoPaymentModal
.mozgo-payment-benefits {

    display:
        grid !important;

    grid-template-columns:
        repeat(3, minmax(0,1fr));

    margin:
        16px 0 14px !important;

    padding:
        0 !important;

    overflow:
        hidden;

    border:
        1px solid
        #f5e1e1 !important;

    border-radius:
        15px !important;

    background:
        #fff5f5 !important;
}


#mozgoPaymentModal.is-emola
.mozgo-payment-features,

#mozgoPaymentModal.is-emola
.mozgo-payment-benefits {

    border-color:
        #f5e4da !important;

    background:
        #fff6f0 !important;
}


#mozgoPaymentModal
.mozgo-payment-feature,

#mozgoPaymentModal
.mozgo-payment-benefit {

    position:
        relative;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        66px;

    padding:
        10px 7px !important;
}


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

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

    content:
        "";

    position:
        absolute;

    top:
        13px;

    right:
        0;

    bottom:
        13px;

    width:
        1px;

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


#mozgoPaymentModal
.mozgo-payment-feature strong,

#mozgoPaymentModal
.mozgo-payment-benefit strong {

    color:
        #27353b !important;

    font-size:
        12px !important;

    font-weight:
        800 !important;
}


#mozgoPaymentModal
.mozgo-payment-feature small,

#mozgoPaymentModal
.mozgo-payment-benefit small {

    margin-top:
        3px;

    color:
        #8c989e !important;

    font-size:
        10px !important;
}


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

#mozgoPaymentContinue {

    width:
        100% !important;

    min-height:
        54px !important;

    margin:
        0 !important;

    padding:
        0 18px !important;

    border:
        0 !important;

    border-radius:
        12px !important;

    background:
        linear-gradient(
            180deg,
            #25c65a 0%,
            #1db450 100%
        ) !important;

    color:
        #ffffff !important;

    font-size:
        14px !important;

    line-height:
        54px !important;

    font-weight:
        800 !important;

    text-transform:
        uppercase;

    letter-spacing:
        .2px;

    box-shadow:
        0 9px 24px
        rgba(29,180,80,.20) !important;

    cursor:
        pointer;

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        opacity .18s ease;
}


#mozgoPaymentContinue:hover:not(:disabled) {

    transform:
        translateY(-1px);

    box-shadow:
        0 13px 30px
        rgba(29,180,80,.26) !important;
}


#mozgoPaymentContinue:disabled {

    cursor:
        wait;

    opacity:
        .77;
}


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

#mozgoPaymentLiveStatus {

    margin:
        14px 0 0 !important;

    padding:
        15px 16px !important;

    border-radius:
        14px !important;

    text-align:
        center !important;

    line-height:
        1.45;
}


#mozgoPaymentLiveStatus[hidden] {

    display:
        none !important;
}


#mozgoPaymentLiveStatus.is-processing {

    border:
        1px solid
        #cee9e7 !important;

    background:
        #effafa !important;

    color:
        #256a67 !important;
}


#mozgoPaymentLiveStatus.is-processing::before {

    content:
        "";

    display:
        block;

    width:
        25px;

    height:
        25px;

    margin:
        0 auto 8px;

    border:
        3px solid
        rgba(7,140,135,.17);

    border-top-color:
        #078c87;

    border-radius:
        50%;

    animation:
        mozgoRefPaySpin .75s linear infinite;
}


#mozgoPaymentLiveStatus.is-confirmed {

    border:
        1px solid
        #cfead7 !important;

    background:
        #effaf2 !important;

    color:
        #216b3b !important;
}


#mozgoPaymentLiveStatus.is-confirmed::before {

    content:
        "✓";

    display:
        grid;

    place-items:
        center;

    width:
        30px;

    height:
        30px;

    margin:
        0 auto 8px;

    border-radius:
        50%;

    background:
        #20a447;

    color:
        #ffffff;

    font-size:
        17px;

    font-weight:
        800;
}


#mozgoPaymentLiveStatus.is-failed {

    border:
        1px solid
        #f1cece !important;

    background:
        #fff3f3 !important;

    color:
        #a23842 !important;
}


#mozgoPaymentLiveStatus.is-failed::before {

    content:
        "!";

    display:
        grid;

    place-items:
        center;

    width:
        30px;

    height:
        30px;

    margin:
        0 auto 8px;

    border-radius:
        50%;

    background:
        #e53945;

    color:
        #ffffff;

    font-size:
        17px;

    font-weight:
        800;
}


.mozgo-payment-failure-help {

    margin-top:
        10px;

    padding-top:
        10px;

    border-top:
        1px solid
        rgba(229,57,69,.14);

    color:
        #71575a;

    font-size:
        11px;

    line-height:
        1.55;
}


@keyframes mozgoRefPaySpin {

    to {
        transform:
            rotate(360deg);
    }

}


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

@media (max-width: 575px) {

    #mozgoPaymentModal
    .mozgo-payment-modal-dialog {

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

        margin:
            11px auto !important;
    }


    #mozgoPaymentModal
    .mozgo-payment-modal-card {

        border-radius:
            20px !important;
    }


    #mozgoPaymentModal
    .mozgo-payment-modal-header {

        min-height:
            112px !important;

        padding:
            23px 50px 38px !important;
    }


    #mozgoPaymentModal
    .mozgo-payment-modal-title {

        font-size:
            23px !important;
    }


    #mozgoPaymentModal
    .mozgo-payment-modal-body {

        padding:
            18px 18px 23px !important;
    }


    #mozgoPaymentModal
    .mozgo-payment-provider-logo,

    #mozgoPaymentModal
    img[src*="mpesa"],

    #mozgoPaymentModal
    img[src*="emola"] {

        max-width:
            145px !important;
    }


    #mozgoPaymentModal
    .mozgo-payment-modal-instruction {

        font-size:
            15px !important;
    }


    #mozgo_mobile_money_phone {

        font-size:
            15px !important;
    }

}


/* MOZGO PAYMENT MODAL REFERENCE END */