/* =========================================================
   LOGICPROHUB UNIVERSAL PAYMENT GATEWAY UI
   Paystack + M-PESA
   ========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}


/* =========================================================
   PAYMENT METHOD ROWS
   ========================================================= */

.wc_payment_method.payment_method_paystack,
.wc_payment_method.payment_method_lph_paystack_mpesa_kes {
    border: 1px solid rgba(91, 121, 145, 0.28) !important;
    border-radius: 18px !important;
    background: rgba(10, 21, 32, 0.72) !important;
    padding: 18px 20px !important;
    margin-bottom: 14px !important;
}


.wc_payment_method.payment_method_paystack:has(
    > input[type="radio"]:checked
),
.wc_payment_method.payment_method_lph_paystack_mpesa_kes:has(
    > input[type="radio"]:checked
) {
    border-color: rgba(26, 219, 174, 0.55) !important;
    background:
        linear-gradient(
            145deg,
            rgba(7, 38, 46, 0.92),
            rgba(8, 26, 37, 0.94)
        ) !important;
}


/* Radio buttons */
.wc_payment_method.payment_method_paystack
> input[type="radio"],
.wc_payment_method.payment_method_lph_paystack_mpesa_kes
> input[type="radio"] {
    vertical-align: middle !important;
}


/* Gateway labels */
label[for="payment_method_paystack"],
label[for="payment_method_lph_paystack_mpesa_kes"] {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;

    font-size: 15px !important;
    font-weight: 800 !important;

    line-height: 1.3 !important;

    cursor: pointer !important;
}


/* =========================================================
   M-PESA METHOD LOGO
   ========================================================= */

label[for="payment_method_lph_paystack_mpesa_kes"] {
    display: inline-flex !important;
    align-items: center !important;

    gap: 10px !important;
}


label[for="payment_method_lph_paystack_mpesa_kes"]::before {
    content: "" !important;

    display: inline-block !important;

    width: 42px !important;
    height: 42px !important;

    flex: 0 0 42px !important;

    border-radius: 11px !important;

    background:
        #ffffff
        url("/wp-content/plugins/logicprohub-digital-services/assets/images/mpesa-logo.svg")
        center center / 76% auto
        no-repeat !important;

    box-shadow:
        0 6px 15px
        rgba(0, 0, 0, 0.18) !important;
}


/*
 * Avoid showing two M-PESA badges if the gateway
 * also emits its own badge inside the selector.
 */
label[for="payment_method_lph_paystack_mpesa_kes"]
.lph-mpesa-method-badge {
    display: none !important;
}


/* =========================================================
   PAYSTACK IMAGE / WHITE SECURED LABEL
   ========================================================= */

.lph-paystack-badge-wrap {
    position: relative !important;

    display: inline-block !important;

    vertical-align: middle !important;

    line-height: 0 !important;
}


.lph-paystack-badge-wrap img {
    display: block !important;

    max-width: 300px !important;
    height: auto !important;
}


.lph-paystack-badge-wrap::before {
    content: "" !important;

    position: absolute !important;

    z-index: 5 !important;

    top: -2px !important;
    left: 50% !important;

    width: 158px !important;
    height: 20px !important;

    transform:
        translateX(-50%) !important;

    background: #0a1723 !important;

    pointer-events: none !important;
}


.lph-paystack-badge-wrap::after {
    content: "Secured by paystack" !important;

    position: absolute !important;

    z-index: 6 !important;

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

    transform:
        translateX(-50%) !important;

    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;

    font-size: 11px !important;
    font-weight: 700 !important;

    line-height: 16px !important;

    white-space: nowrap !important;

    pointer-events: none !important;
}


/* Remove Paystack's extra white cards banner */
.payment_method_paystack
.payment_box {
    display: none !important;
}


/* =========================================================
   M-PESA PAYMENT BOX
   ========================================================= */

.payment_box.payment_method_lph_paystack_mpesa_kes {
    width: auto !important;
    max-width: 100% !important;

    margin: 18px 0 0 0 !important;

    padding: 0 !important;

    border: 0 !important;
    border-radius: 22px !important;

    background: transparent !important;

    box-shadow: none !important;

    overflow: visible !important;
}


.payment_box.payment_method_lph_paystack_mpesa_kes::before {
    display: none !important;
}


/* =========================================================
   EXACT M-PESA FORCE UI
   ========================================================= */

#lph-mpesa-force-ui {
    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;

    padding: 24px !important;

    border:
        1px solid
        rgba(23, 213, 168, 0.28) !important;

    border-radius: 21px !important;

    background:
        radial-gradient(
            circle at 88% 10%,
            rgba(22, 211, 151, 0.10),
            transparent 38%
        ),
        linear-gradient(
            145deg,
            #071a24 0%,
            #09212b 100%
        ) !important;

    color: #ffffff !important;

    box-shadow:
        0 18px 42px
        rgba(0, 0, 0, 0.20),
        inset 0 1px 0
        rgba(255, 255, 255, 0.03) !important;
}


/* =========================================================
   M-PESA GREEN BADGE
   ========================================================= */

#lph-mpesa-force-ui
.lph-mpesa-clean-logo {
    display: inline-flex !important;

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

    min-height: 35px !important;

    margin: 0 0 6px 0 !important;

    padding: 7px 14px !important;

    border-radius: 999px !important;

    background:
        linear-gradient(
            135deg,
            #20e486,
            #20ca72
        ) !important;

    color: #04291a !important;
    -webkit-text-fill-color: #04291a !important;

    font-size: 12px !important;
    font-weight: 900 !important;

    letter-spacing: 0.04em !important;
}


#lph-mpesa-force-ui
.lph-mpesa-clean-subtitle {
    margin:
        0 0 18px 2px !important;

    color: #93aab5 !important;
    -webkit-text-fill-color: #93aab5 !important;

    font-size: 13px !important;
    font-weight: 500 !important;
}


/* =========================================================
   AMOUNT CARD
   ========================================================= */

#lph-mpesa-force-ui
.lph-mpesa-clean-amount {
    width: 100% !important;

    margin:
        0 0 18px 0 !important;

    padding: 24px !important;

    border:
        1px solid
        rgba(16, 223, 203, 0.48) !important;

    border-radius:
        18px !important;

    background:
        radial-gradient(
            circle at 82% 42%,
            rgba(16, 224, 174, 0.12),
            transparent 48%
        ),
        linear-gradient(
            135deg,
            #0a3a40 0%,
            #092830 100%
        ) !important;

    color: #ffffff !important;

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, 0.035) !important;
}


#lph-mpesa-force-ui
.lph-mpesa-clean-amount
strong {
    display: block !important;

    margin:
        0 0 9px 0 !important;

    color: #e4eef3 !important;
    -webkit-text-fill-color: #e4eef3 !important;

    font-size: 13px !important;
    font-weight: 800 !important;

    line-height: 1.35 !important;

    letter-spacing:
        0.03em !important;

    text-transform:
        uppercase !important;
}


/* Amount */
#lph-mpesa-force-ui
.lph-mpesa-clean-amount
span {
    display: block !important;

    margin:
        0 0 9px 0 !important;

    color: #19efd3 !important;
    -webkit-text-fill-color: #19efd3 !important;

    font-size: 46px !important;
    font-weight: 900 !important;

    line-height: 1.05 !important;

    letter-spacing:
        -0.04em !important;

    text-shadow:
        0 0 18px
        rgba(25, 239, 211, 0.10) !important;
}


#lph-mpesa-force-ui
.lph-mpesa-clean-amount
small {
    display: block !important;

    margin: 0 !important;

    color: #d4e1e7 !important;
    -webkit-text-fill-color: #d4e1e7 !important;

    font-size: 13px !important;
    font-weight: 600 !important;

    line-height: 1.5 !important;
}


/* =========================================================
   PHONE CARD
   ========================================================= */

#lph-mpesa-force-ui
.lph-mpesa-clean-phone {
    width: 100% !important;

    margin: 0 !important;

    padding: 22px !important;

    border:
        1px solid
        rgba(107, 142, 169, 0.38) !important;

    border-radius:
        18px !important;

    background:
        linear-gradient(
            145deg,
            #142c3c 0%,
            #102432 100%
        ) !important;

    color: #ffffff !important;
}


/* Hide original label wording */
#lph-mpesa-force-ui
.lph-mpesa-clean-phone
label {
    display: block !important;

    margin:
        0 0 11px 0 !important;

    color: transparent !important;
    -webkit-text-fill-color:
        transparent !important;

    font-size: 0 !important;
}


/* Replace with Safaricom number */
#lph-mpesa-force-ui
.lph-mpesa-clean-phone
label::before {
    content:
        "Safaricom number";

    color: #ffffff !important;
    -webkit-text-fill-color:
        #ffffff !important;

    font-size: 15px !important;
    font-weight: 800 !important;

    line-height: 1.35 !important;
}


#lph-mpesa-force-ui
.lph-mpesa-clean-phone
.required {
    display: none !important;
}


/* =========================================================
   PHONE INPUT
   ========================================================= */

#lph-mpesa-force-ui
#lph_paystack_mpesa_phone {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;

    min-height: 60px !important;

    margin: 0 !important;

    padding:
        15px 18px 15px 54px !important;

    border:
        1px solid
        #d8e4df !important;

    border-radius:
        14px !important;

    background-color:
        #f8fbf9 !important;

    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none'%3E%3Crect x='6' y='2.5' width='12' height='19' rx='2.5' stroke='%23536772' stroke-width='2'/%3E%3Cpath d='M9 6h6' stroke='%23536772' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='17.5' r='1.2' fill='%23536772'/%3E%3C/svg%3E") !important;

    background-repeat:
        no-repeat !important;

    background-position:
        18px center !important;

    background-size:
        21px 21px !important;

    color: #071922 !important;
    -webkit-text-fill-color:
        #071922 !important;

    caret-color:
        #15d99c !important;

    font-size: 19px !important;
    font-weight: 800 !important;

    line-height: 1.2 !important;

    outline: none !important;

    box-shadow: none !important;
}


#lph-mpesa-force-ui
#lph_paystack_mpesa_phone::placeholder {
    color:
        rgba(7, 25, 34, 0.40) !important;

    -webkit-text-fill-color:
        rgba(7, 25, 34, 0.40) !important;

    font-weight: 600 !important;
}


#lph-mpesa-force-ui
#lph_paystack_mpesa_phone:focus {
    border-color:
        #19e3a1 !important;

    box-shadow:
        0 0 0 4px
        rgba(25, 227, 161, 0.10) !important;
}


#lph-mpesa-force-ui
.lph-mpesa-clean-phone
small {
    display: block !important;

    margin:
        10px 0 0 0 !important;

    color: #d8e4ea !important;
    -webkit-text-fill-color:
        #d8e4ea !important;

    font-size: 12px !important;
    font-weight: 500 !important;

    line-height: 1.5 !important;
}


/* =========================================================
   MOBILE CHECKOUT
   ========================================================= */

@media (max-width: 700px) {

    .wc_payment_method.payment_method_paystack,
    .wc_payment_method.payment_method_lph_paystack_mpesa_kes {
        padding:
            15px !important;

        border-radius:
            16px !important;
    }


    label[for="payment_method_lph_paystack_mpesa_kes"]::before {
        width:
            38px !important;

        height:
            38px !important;

        flex-basis:
            38px !important;
    }


    #lph-mpesa-force-ui {
        padding:
            16px !important;

        border-radius:
            18px !important;
    }


    #lph-mpesa-force-ui
    .lph-mpesa-clean-amount,
    #lph-mpesa-force-ui
    .lph-mpesa-clean-phone {
        padding:
            18px !important;
    }


    #lph-mpesa-force-ui
    .lph-mpesa-clean-amount
    span {
        font-size:
            36px !important;
    }


    #lph-mpesa-force-ui
    #lph_paystack_mpesa_phone {
        min-height:
            56px !important;

        font-size:
            16px !important;

        padding-left:
            50px !important;
    }


    .lph-paystack-badge-wrap img {
        max-width:
            250px !important;
    }
}


/* =========================================================
   LPH UNIVERSAL M-PESA LOGO + COMPACT TYPOGRAPHY V2
   ========================================================= */

label[for="payment_method_lph_paystack_mpesa_kes"]::before {
    content: "" !important;

    display: inline-block !important;

    width: 40px !important;
    height: 40px !important;

    flex: 0 0 40px !important;

    border-radius: 10px !important;

    background-color: #ffffff !important;

    background-image:
        url("https://www.logicprohub.com/wp-content/uploads/2026/09/mpesa-logo.png") !important;

    background-repeat:
        no-repeat !important;

    background-position:
        center center !important;

    background-size:
        82% auto !important;

    box-shadow:
        0 5px 14px rgba(0, 0, 0, 0.16) !important;
}


/* M-PESA selector row */
label[for="payment_method_lph_paystack_mpesa_kes"] {
    gap: 9px !important;

    font-size: 14px !important;
    font-weight: 800 !important;

    line-height: 1.25 !important;
}


/* Main forced UI - slightly tighter */
#lph-mpesa-force-ui {
    padding: 20px !important;

    border-radius: 18px !important;
}


/* Green M-PESA pill */
#lph-mpesa-force-ui
.lph-mpesa-clean-logo {
    min-height: 31px !important;

    padding: 6px 12px !important;

    font-size: 11px !important;
}


/* Subtitle */
#lph-mpesa-force-ui
.lph-mpesa-clean-subtitle {
    margin-bottom: 14px !important;

    font-size: 11px !important;
}


/* Amount card */
#lph-mpesa-force-ui
.lph-mpesa-clean-amount {
    padding: 19px 20px !important;

    margin-bottom: 14px !important;

    border-radius: 15px !important;
}


/* Amount heading */
#lph-mpesa-force-ui
.lph-mpesa-clean-amount
strong {
    margin-bottom: 7px !important;

    font-size: 12px !important;
}


/* Main KES amount */
#lph-mpesa-force-ui
.lph-mpesa-clean-amount
span {
    margin-bottom: 7px !important;

    font-size: 40px !important;

    line-height: 1 !important;
}


/* Exchange rate */
#lph-mpesa-force-ui
.lph-mpesa-clean-amount
small {
    font-size: 11px !important;
}


/* Phone card */
#lph-mpesa-force-ui
.lph-mpesa-clean-phone {
    padding: 18px 20px !important;

    border-radius: 15px !important;
}


/* Safaricom number heading */
#lph-mpesa-force-ui
.lph-mpesa-clean-phone
label::before {
    font-size: 13px !important;
}


/* Phone input */
#lph-mpesa-force-ui
#lph_paystack_mpesa_phone {
    min-height: 52px !important;

    padding:
        12px 14px 12px 48px !important;

    background-position:
        15px center !important;

    background-size:
        19px 19px !important;

    font-size: 17px !important;

    border-radius: 12px !important;
}


/* Helper */
#lph-mpesa-force-ui
.lph-mpesa-clean-phone
small {
    margin-top: 8px !important;

    font-size: 11px !important;

    line-height: 1.4 !important;
}


/* =========================================================
   SMALL / MOBILE CHECKOUT
   ========================================================= */

@media (max-width: 700px) {

    .wc_payment_method.payment_method_lph_paystack_mpesa_kes {
        padding: 13px !important;
    }


    label[for="payment_method_lph_paystack_mpesa_kes"]::before {
        width: 36px !important;
        height: 36px !important;
        flex-basis: 36px !important;
    }


    #lph-mpesa-force-ui {
        padding: 14px !important;
    }


    #lph-mpesa-force-ui
    .lph-mpesa-clean-amount,
    #lph-mpesa-force-ui
    .lph-mpesa-clean-phone {
        padding: 16px !important;
    }


    #lph-mpesa-force-ui
    .lph-mpesa-clean-amount
    span {
        font-size: 34px !important;
    }


    #lph-mpesa-force-ui
    #lph_paystack_mpesa_phone {
        min-height: 50px !important;

        font-size: 15px !important;

        padding-left: 46px !important;
    }


    #lph-mpesa-force-ui
    .lph-mpesa-clean-phone
    small {
        font-size: 10px !important;
    }
}


/* =========================================================
   LPH UNIVERSAL PAYMENT UI - COMPACT FINAL V3
   ========================================================= */


/* ---------- REAL M-PESA SELECTOR LOGO ---------- */

label[for="payment_method_lph_paystack_mpesa_kes"] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 9px !important;

    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;

    font-size: 14px !important;
    font-weight: 800 !important;
}


label[for="payment_method_lph_paystack_mpesa_kes"]::before {
    content: "" !important;

    display: inline-block !important;

    width: 38px !important;
    height: 38px !important;

    flex: 0 0 38px !important;

    border-radius: 9px !important;

    background-color: #ffffff !important;

    background-image:
        url("https://www.logicprohub.com/wp-content/uploads/2026/09/mpesa-logo.png") !important;

    background-repeat:
        no-repeat !important;

    background-position:
        center center !important;

    background-size:
        86% auto !important;

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


/* Hide old extra badge in selector only */
label[for="payment_method_lph_paystack_mpesa_kes"]
.lph-mpesa-method-badge {
    display: none !important;
}


/* ---------- GATEWAY ROW ---------- */

.wc_payment_method.payment_method_lph_paystack_mpesa_kes {
    width: 100% !important;
    min-width: 0 !important;

    padding: 15px 16px !important;

    border-radius: 17px !important;

    box-sizing: border-box !important;
}


/* ---------- M-PESA PANEL ---------- */

.payment_box.payment_method_lph_paystack_mpesa_kes {
    width: 100% !important;
    max-width: 100% !important;

    margin: 15px 0 0 0 !important;
    padding: 0 !important;

    background: transparent !important;

    border: 0 !important;

    box-sizing: border-box !important;
}


#lph-mpesa-force-ui {
    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 18px !important;

    border:
        1px solid
        rgba(23, 213, 168, 0.27) !important;

    border-radius: 18px !important;

    background:
        radial-gradient(
            circle at 88% 10%,
            rgba(22, 211, 151, 0.08),
            transparent 38%
        ),
        linear-gradient(
            145deg,
            #071a24 0%,
            #09212b 100%
        ) !important;

    color: #ffffff !important;

    box-sizing: border-box !important;
}


/* ---------- GREEN BADGE ---------- */

#lph-mpesa-force-ui
.lph-mpesa-clean-logo {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-height: 30px !important;

    margin: 0 0 5px 0 !important;
    padding: 6px 11px !important;

    border-radius: 999px !important;

    background:
        linear-gradient(
            135deg,
            #20e486,
            #20ca72
        ) !important;

    color: #04291a !important;
    -webkit-text-fill-color: #04291a !important;

    font-size: 11px !important;
    font-weight: 900 !important;

    letter-spacing: 0.025em !important;
}


#lph-mpesa-force-ui
.lph-mpesa-clean-subtitle {
    margin: 0 0 13px 1px !important;

    color: #92aab5 !important;
    -webkit-text-fill-color: #92aab5 !important;

    font-size: 11px !important;
    font-weight: 500 !important;
}


/* ---------- AMOUNT ---------- */

#lph-mpesa-force-ui
.lph-mpesa-clean-amount {
    width: 100% !important;

    margin: 0 0 13px 0 !important;
    padding: 18px !important;

    border:
        1px solid
        rgba(16, 223, 203, 0.46) !important;

    border-radius: 14px !important;

    background:
        radial-gradient(
            circle at 82% 42%,
            rgba(16, 224, 174, 0.10),
            transparent 48%
        ),
        linear-gradient(
            135deg,
            #0a3a40,
            #092830
        ) !important;

    box-sizing: border-box !important;
}


#lph-mpesa-force-ui
.lph-mpesa-clean-amount
strong {
    display: block !important;

    margin: 0 0 6px 0 !important;

    color: #e7f0f4 !important;
    -webkit-text-fill-color: #e7f0f4 !important;

    font-size: 11px !important;
    font-weight: 800 !important;

    line-height: 1.3 !important;

    text-transform: uppercase !important;
}


#lph-mpesa-force-ui
.lph-mpesa-clean-amount
span {
    display: block !important;

    margin: 0 0 6px 0 !important;

    color: #19efd3 !important;
    -webkit-text-fill-color: #19efd3 !important;

    font-size: 38px !important;
    font-weight: 900 !important;

    line-height: 1 !important;

    letter-spacing: -0.035em !important;

    white-space: nowrap !important;
}


#lph-mpesa-force-ui
.lph-mpesa-clean-amount
small {
    display: block !important;

    color: #d5e3e8 !important;
    -webkit-text-fill-color: #d5e3e8 !important;

    font-size: 11px !important;
    font-weight: 600 !important;

    line-height: 1.4 !important;
}


/* ---------- PHONE CARD ---------- */

#lph-mpesa-force-ui
.lph-mpesa-clean-phone {
    width: 100% !important;

    padding: 17px !important;

    border:
        1px solid
        rgba(107, 142, 169, 0.34) !important;

    border-radius: 14px !important;

    background:
        linear-gradient(
            145deg,
            #142c3c,
            #102432
        ) !important;

    box-sizing: border-box !important;
}


#lph-mpesa-force-ui
.lph-mpesa-clean-phone
label {
    display: block !important;

    margin: 0 0 8px 0 !important;

    color: transparent !important;
    -webkit-text-fill-color: transparent !important;

    font-size: 0 !important;
}


#lph-mpesa-force-ui
.lph-mpesa-clean-phone
label::before {
    content: "Safaricom number";

    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;

    font-size: 13px !important;
    font-weight: 800 !important;
}


#lph-mpesa-force-ui
.lph-mpesa-clean-phone
.required {
    display: none !important;
}


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

#lph-mpesa-force-ui
#lph_paystack_mpesa_phone {
    width: 100% !important;
    max-width: 100% !important;

    min-height: 50px !important;

    padding:
        11px 14px 11px 46px !important;

    border:
        1px solid
        #d8e4df !important;

    border-radius: 11px !important;

    background-color: #f8fbf9 !important;

    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none'%3E%3Crect x='6' y='2.5' width='12' height='19' rx='2.5' stroke='%23536772' stroke-width='2'/%3E%3Cpath d='M9 6h6' stroke='%23536772' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='17.5' r='1.2' fill='%23536772'/%3E%3C/svg%3E") !important;

    background-repeat: no-repeat !important;
    background-position: 14px center !important;
    background-size: 19px 19px !important;

    color: #071922 !important;
    -webkit-text-fill-color: #071922 !important;

    caret-color: #15d99c !important;

    font-size: 16px !important;
    font-weight: 800 !important;

    box-shadow: none !important;

    box-sizing: border-box !important;
}


#lph-mpesa-force-ui
#lph_paystack_mpesa_phone::placeholder {
    color:
        rgba(7, 25, 34, 0.39) !important;

    -webkit-text-fill-color:
        rgba(7, 25, 34, 0.39) !important;

    font-size: 13px !important;
    font-weight: 600 !important;
}


#lph-mpesa-force-ui
#lph_paystack_mpesa_phone:focus {
    border-color: #19e3a1 !important;

    outline: none !important;

    box-shadow:
        0 0 0 3px
        rgba(25, 227, 161, 0.09) !important;
}


#lph-mpesa-force-ui
.lph-mpesa-clean-phone
small {
    display: block !important;

    margin: 8px 0 0 0 !important;

    color: #d8e4ea !important;
    -webkit-text-fill-color: #d8e4ea !important;

    font-size: 10px !important;
    font-weight: 500 !important;

    line-height: 1.4 !important;
}


/* ---------- PAYSTACK LABEL ---------- */

.lph-paystack-badge-wrap::after {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;

    font-weight: 700 !important;
}


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

@media (max-width: 700px) {

    .wc_payment_method.payment_method_lph_paystack_mpesa_kes {
        padding: 12px !important;
    }


    label[for="payment_method_lph_paystack_mpesa_kes"] {
        font-size: 13px !important;
    }


    label[for="payment_method_lph_paystack_mpesa_kes"]::before {
        width: 34px !important;
        height: 34px !important;
        flex-basis: 34px !important;
    }


    #lph-mpesa-force-ui {
        padding: 12px !important;

        border-radius: 15px !important;
    }


    #lph-mpesa-force-ui
    .lph-mpesa-clean-amount,
    #lph-mpesa-force-ui
    .lph-mpesa-clean-phone {
        padding: 14px !important;
    }


    #lph-mpesa-force-ui
    .lph-mpesa-clean-amount
    span {
        font-size: 30px !important;

        white-space: nowrap !important;
    }


    #lph-mpesa-force-ui
    #lph_paystack_mpesa_phone {
        min-height: 48px !important;

        padding-left: 43px !important;

        font-size: 14px !important;
    }


    #lph-mpesa-force-ui
    #lph_paystack_mpesa_phone::placeholder {
        font-size: 11px !important;
    }
}


/* =========================================================
   DIGITAL SERVICES -> UNIVERSAL M-PESA UI
   Final authority layer
   ========================================================= */


/*
 * Old Digital Services decoration.
 * It has no place in the universal gateway component.
 */
body.lph-digital-order-pay
.payment_method_lph_paystack_mpesa_kes
.lph-v9-card-strip {
    display: none !important;
}


/*
 * Universal payment box on Digital Services order-pay.
 */
body.lph-digital-order-pay
.payment_box.payment_method_lph_paystack_mpesa_kes {
    width: 100% !important;
    max-width: 100% !important;

    margin: 15px 0 0 0 !important;
    padding: 0 !important;

    border: 0 !important;

    background: transparent !important;

    box-shadow: none !important;

    box-sizing: border-box !important;
}


body.lph-digital-order-pay
.payment_box.payment_method_lph_paystack_mpesa_kes::before {
    display: none !important;
}


/* =========================================================
   UNIVERSAL CONTAINER
   ========================================================= */

body.lph-digital-order-pay
#lph-mpesa-force-ui {
    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 18px !important;

    border:
        1px solid
        rgba(23, 213, 168, .27) !important;

    border-radius: 18px !important;

    background:
        radial-gradient(
            circle at 88% 10%,
            rgba(22, 211, 151, .08),
            transparent 38%
        ),
        linear-gradient(
            145deg,
            #071a24 0%,
            #09212b 100%
        ) !important;

    box-sizing: border-box !important;

    color: #ffffff !important;

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


/* =========================================================
   GREEN M-PESA BADGE
   ========================================================= */

body.lph-digital-order-pay
#lph-mpesa-force-ui
.lph-mpesa-clean-logo {
    display: inline-flex !important;

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

    min-height: 30px !important;

    margin: 0 0 5px 0 !important;
    padding: 6px 11px !important;

    border-radius: 999px !important;

    background:
        linear-gradient(
            135deg,
            #20e486,
            #20ca72
        ) !important;

    color: #04291a !important;
    -webkit-text-fill-color: #04291a !important;

    font-size: 11px !important;
    font-weight: 900 !important;

    letter-spacing: .025em !important;
}


/*
 * Show this consistently on both checkout types.
 */
body.lph-digital-order-pay
#lph-mpesa-force-ui
.lph-mpesa-clean-subtitle {
    display: block !important;

    margin: 0 0 13px 1px !important;

    color: #92aab5 !important;
    -webkit-text-fill-color: #92aab5 !important;

    font-size: 11px !important;
    font-weight: 500 !important;
}


/* =========================================================
   AMOUNT CARD
   ========================================================= */

body.lph-digital-order-pay
#lph-mpesa-force-ui
.lph-mpesa-clean-amount {
    display: block !important;

    width: 100% !important;

    margin: 0 0 13px 0 !important;
    padding: 18px !important;

    border:
        1px solid
        rgba(16, 223, 203, .46) !important;

    border-radius: 14px !important;

    background:
        radial-gradient(
            circle at 82% 42%,
            rgba(16, 224, 174, .10),
            transparent 48%
        ),
        linear-gradient(
            135deg,
            #0a3a40,
            #092830
        ) !important;

    box-sizing: border-box !important;
}


body.lph-digital-order-pay
#lph-mpesa-force-ui
.lph-mpesa-clean-amount
strong {
    display: block !important;

    margin: 0 0 6px 0 !important;

    color: #e7f0f4 !important;
    -webkit-text-fill-color: #e7f0f4 !important;

    font-size: 11px !important;
    font-weight: 800 !important;

    line-height: 1.3 !important;

    text-transform: uppercase !important;
}


/*
 * ONE amount.
 */
body.lph-digital-order-pay
#lph-mpesa-force-ui
.lph-mpesa-clean-amount
> span {
    display: block !important;

    margin: 0 0 6px 0 !important;

    color: #19efd3 !important;
    -webkit-text-fill-color: #19efd3 !important;

    font-size: 38px !important;
    font-weight: 900 !important;

    line-height: 1 !important;

    letter-spacing: -.035em !important;

    white-space: nowrap !important;
}


/*
 * Actual exchange-rate line.
 */
body.lph-digital-order-pay
#lph-mpesa-force-ui
.lph-mpesa-clean-amount
> small {
    display: block !important;

    margin: 0 !important;

    color: #d5e3e8 !important;
    -webkit-text-fill-color: #d5e3e8 !important;

    font-size: 11px !important;
    font-weight: 600 !important;

    line-height: 1.4 !important;
}


/* =========================================================
   PHONE CARD
   ========================================================= */

body.lph-digital-order-pay
#lph-mpesa-force-ui
.lph-mpesa-clean-phone {
    width: 100% !important;

    margin: 0 !important;
    padding: 17px !important;

    border:
        1px solid
        rgba(107, 142, 169, .34) !important;

    border-radius: 14px !important;

    background:
        linear-gradient(
            145deg,
            #142c3c,
            #102432
        ) !important;

    box-sizing: border-box !important;
}


body.lph-digital-order-pay
#lph-mpesa-force-ui
.lph-mpesa-clean-phone
label {
    display: block !important;

    margin: 0 0 8px 0 !important;

    color: transparent !important;
    -webkit-text-fill-color: transparent !important;

    font-size: 0 !important;
}


body.lph-digital-order-pay
#lph-mpesa-force-ui
.lph-mpesa-clean-phone
label::before {
    content: "Safaricom number" !important;

    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;

    font-size: 13px !important;
    font-weight: 800 !important;
}


body.lph-digital-order-pay
#lph-mpesa-force-ui
.lph-mpesa-clean-phone
.required {
    display: none !important;
}


/* =========================================================
   PHONE INPUT
   ========================================================= */

body.lph-digital-order-pay
#lph-mpesa-force-ui
#lph_paystack_mpesa_phone {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;

    min-height: 50px !important;

    margin: 0 !important;

    padding:
        11px 14px 11px 46px !important;

    border:
        1px solid
        #d8e4df !important;

    border-radius: 11px !important;

    background-color:
        #f8fbf9 !important;

    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none'%3E%3Crect x='6' y='2.5' width='12' height='19' rx='2.5' stroke='%23536772' stroke-width='2'/%3E%3Cpath d='M9 6h6' stroke='%23536772' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='17.5' r='1.2' fill='%23536772'/%3E%3C/svg%3E") !important;

    background-repeat:
        no-repeat !important;

    background-position:
        14px center !important;

    background-size:
        19px 19px !important;

    color: #071922 !important;
    -webkit-text-fill-color: #071922 !important;

    caret-color: #15d99c !important;

    font-size: 16px !important;
    font-weight: 800 !important;

    outline: none !important;

    box-shadow: none !important;

    box-sizing: border-box !important;
}


body.lph-digital-order-pay
#lph-mpesa-force-ui
#lph_paystack_mpesa_phone::placeholder {
    color:
        rgba(7, 25, 34, .39) !important;

    -webkit-text-fill-color:
        rgba(7, 25, 34, .39) !important;

    font-size: 13px !important;
    font-weight: 600 !important;
}


body.lph-digital-order-pay
#lph-mpesa-force-ui
#lph_paystack_mpesa_phone:focus {
    border-color: #19e3a1 !important;

    box-shadow:
        0 0 0 3px
        rgba(25, 227, 161, .09) !important;
}


body.lph-digital-order-pay
#lph-mpesa-force-ui
.lph-mpesa-clean-phone
small {
    display: block !important;

    margin: 8px 0 0 0 !important;

    color: #d8e4ea !important;
    -webkit-text-fill-color: #d8e4ea !important;

    font-size: 10px !important;
    font-weight: 500 !important;

    line-height: 1.4 !important;
}


/* =========================================================
   DIGITAL MOBILE
   ========================================================= */

@media (max-width: 700px) {

    body.lph-digital-order-pay
    #lph-mpesa-force-ui {
        padding: 12px !important;
    }


    body.lph-digital-order-pay
    #lph-mpesa-force-ui
    .lph-mpesa-clean-amount,
    body.lph-digital-order-pay
    #lph-mpesa-force-ui
    .lph-mpesa-clean-phone {
        padding: 14px !important;
    }


    body.lph-digital-order-pay
    #lph-mpesa-force-ui
    .lph-mpesa-clean-amount
    > span {
        font-size: 30px !important;
    }


    body.lph-digital-order-pay
    #lph-mpesa-force-ui
    #lph_paystack_mpesa_phone {
        min-height: 48px !important;

        padding-left: 43px !important;

        font-size: 14px !important;
    }
}