/* ============================================================
   MOZGO DESIGN SYSTEM 1.0
   ============================================================ */

:root {
    --mozgo-primary: #078c87;
    --mozgo-primary-dark: #066e6a;
    --mozgo-primary-soft: #eef9f8;

    --mozgo-ink: #17252a;
    --mozgo-text: #34444a;
    --mozgo-muted: #718087;

    --mozgo-border: #e2e9eb;
    --mozgo-bg: #f7f9fa;
    --mozgo-surface: #ffffff;

    --mozgo-success: #20a447;
    --mozgo-danger: #e53945;
    --mozgo-warning: #f4a624;

    --mozgo-radius-sm: 9px;
    --mozgo-radius: 14px;
    --mozgo-radius-lg: 18px;

    --mozgo-shadow:
        0 4px 18px rgba(22, 42, 48, .055);

    --mozgo-shell: 1300px;
}


/* ------------------------------------------------------------
   MAIN PAGE RAIL
   ------------------------------------------------------------ */

.mozgo-standard-page {

    width: calc(100% - 32px) !important;
    max-width: var(--mozgo-shell) !important;

    margin-left: auto !important;
    margin-right: auto !important;

    padding-top: 30px !important;
    padding-bottom: 48px !important;
}


/* ------------------------------------------------------------
   TYPOGRAPHY
   ------------------------------------------------------------ */

.mozgo-standard-page h1,
.mozgo-standard-page h2,
.mozgo-standard-page h3,
.mozgo-standard-page h4,
.mozgo-standard-page h5 {

    color: var(--mozgo-ink);

    font-weight: 700;
}


.mozgo-standard-page p {

    color: var(--mozgo-text);
}


/* ------------------------------------------------------------
   OLD BOOTSTRAP CARDS → MOZGO STYLE
   ------------------------------------------------------------ */

.mozgo-standard-page .card,
.mozgo-standard-page .list-card {

    border:
        1px solid var(--mozgo-border) !important;

    border-radius:
        var(--mozgo-radius) !important;

    background:
        var(--mozgo-surface);

    box-shadow:
        var(--mozgo-shadow) !important;
}


/* ------------------------------------------------------------
   BUTTONS
   ------------------------------------------------------------ */

.mozgo-standard-page .btn-primary {

    border-color:
        var(--mozgo-primary) !important;

    background:
        var(--mozgo-primary) !important;

    color:
        #ffffff !important;

    border-radius:
        9px !important;
}


.mozgo-standard-page .btn-primary:hover {

    border-color:
        var(--mozgo-primary-dark) !important;

    background:
        var(--mozgo-primary-dark) !important;
}


/* ------------------------------------------------------------
   FORMS
   ------------------------------------------------------------ */

.mozgo-standard-page
.form-control {

    min-height:
        44px;

    border:
        1px solid var(--mozgo-border);

    border-radius:
        9px;

    box-shadow:
        none !important;
}


.mozgo-standard-page
.form-control:focus {

    border-color:
        var(--mozgo-primary);

    box-shadow:
        0 0 0 3px
        rgba(7, 140, 135, .09) !important;
}


/* ------------------------------------------------------------
   EMPTY STATES
   ------------------------------------------------------------ */

.mozgo-standard-page
.mozgo-empty-state {

    padding:
        50px 24px;

    text-align:
        center;

    border:
        1px dashed var(--mozgo-border);

    border-radius:
        var(--mozgo-radius);

    background:
        #fbfcfc;

    color:
        var(--mozgo-muted);
}


/* ------------------------------------------------------------
   GLOBAL PRODUCT RATING
   ------------------------------------------------------------ */

.mozgo-product-rating {

    display:
        flex !important;

    align-items:
        center;

    gap:
        4px;

    min-height:
        18px;

    margin:
        6px 0 7px !important;

    font-size:
        11px;

    line-height:
        1.1;

    color:
        var(--mozgo-muted);
}


.mozgo-product-rating
.mozgo-rating-star {

    color:
        #f5a623;

    font-size:
        13px;
}


.mozgo-product-rating
.mozgo-rating-value {

    color:
        var(--mozgo-ink);

    font-weight:
        700;
}


.mozgo-product-rating.is-empty {

    color:
        #8b979c;
}


/* ------------------------------------------------------------
   GLOBAL PRODUCT SECOND IMAGE
   ------------------------------------------------------------ */

.mozgo-global-hover-ready {

    position:
        relative !important;
}


.mozgo-global-hover-ready
.mozgo-product-image-primary,

.mozgo-global-hover-ready
.mozgo-product-image-hover {

    transition:
        opacity .28s ease !important;
}


.mozgo-global-hover-ready
.mozgo-product-image-primary {

    opacity:
        1;
}


.mozgo-global-hover-ready
.mozgo-product-image-hover {

    position:
        absolute !important;

    inset:
        0;

    width:
        100% !important;

    height:
        100% !important;

    object-fit:
        cover;

    opacity:
        0;

    z-index:
        2;
}


@media (hover: hover) and (pointer: fine) {

    .mozgo-global-hover-ready:hover
    .mozgo-product-image-primary {

        opacity:
            0 !important;
    }


    .mozgo-global-hover-ready:hover
    .mozgo-product-image-hover {

        opacity:
            1 !important;
    }
}


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

@media (max-width: 767px) {

    .mozgo-standard-page {

        width:
            calc(100% - 20px) !important;

        padding-top:
            20px !important;
    }

}


/* MOZGO DESIGN SYSTEM END */


/* ============================================================
   MOZGO DESIGN SYSTEM
   PHASE 3C — CHECKOUT
   ============================================================ */

.siddhi-checkout {

    background:
        #f7f9fa;
}


.siddhi-checkout
.mozgo-standard-page {

    padding-top:
        28px !important;

    padding-bottom:
        56px !important;
}


/* ------------------------------------------------------------
   PAGE HEADING
   ------------------------------------------------------------ */

.mozgo-checkout-page-heading {

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        28px;

    margin-bottom:
        26px;

    padding-bottom:
        20px;

    border-bottom:
        1px solid var(--mozgo-border);
}


.mozgo-checkout-page-heading h1 {

    margin:
        4px 0 5px;

    font-size:
        30px;

    line-height:
        1.15;

    color:
        var(--mozgo-ink);
}


.mozgo-checkout-page-heading p {

    margin:
        0;

    color:
        var(--mozgo-muted);

    font-size:
        14px;
}


.mozgo-checkout-eyebrow {

    color:
        var(--mozgo-primary);

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        .08em;

    text-transform:
        uppercase;
}


.mozgo-checkout-secure {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    padding:
        11px 14px;

    border:
        1px solid #dce8e8;

    border-radius:
        12px;

    background:
        #ffffff;
}


.mozgo-checkout-secure > span {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        38px;

    height:
        38px;

    border-radius:
        10px;

    background:
        var(--mozgo-primary-soft);
}


.mozgo-checkout-secure div {

    display:
        flex;

    flex-direction:
        column;
}


.mozgo-checkout-secure strong {

    color:
        var(--mozgo-ink);

    font-size:
        12px;
}


.mozgo-checkout-secure small {

    color:
        var(--mozgo-muted);

    font-size:
        10px;
}


/* ------------------------------------------------------------
   BOOTSTRAP ROW
   ------------------------------------------------------------ */

.siddhi-checkout
.mozgo-standard-page
> .row {

    margin-left:
        -8px !important;

    margin-right:
        -8px !important;

    padding-top:
        0 !important;
}


.siddhi-checkout
.checkout-left,

.siddhi-checkout
.mozgo-standard-page
> .row
> .col-md-5 {

    padding-left:
        8px !important;

    padding-right:
        8px !important;
}


/* ------------------------------------------------------------
   CHECKOUT CARDS
   ------------------------------------------------------------ */

.siddhi-checkout
.checkout-left-box,

.siddhi-checkout
#cart_list,

.siddhi-checkout
.add-note {

    border:
        1px solid var(--mozgo-border) !important;

    border-radius:
        14px !important;

    background:
        #ffffff !important;

    box-shadow:
        0 4px 18px rgba(20, 42, 48, .05) !important;
}


.siddhi-checkout
.checkout-left-box {

    overflow:
        hidden;
}


.siddhi-checkout
.chec-out-header {

    align-items:
        center;
}


.siddhi-checkout
.chec-out-title h6,

.siddhi-checkout
.siddhi-card-header h6 {

    color:
        var(--mozgo-ink);

    font-size:
        17px;

    font-weight:
        750;
}


.siddhi-checkout
.chec-out-title span {

    color:
        var(--mozgo-muted);

    font-size:
        12px;
}


.siddhi-checkout
.chec-out-header > a {

    color:
        var(--mozgo-primary) !important;
}


/* ------------------------------------------------------------
   PAYMENT SECTION
   ------------------------------------------------------------ */

.siddhi-checkout
.checkout-payment-options {

    padding:
        16px !important;

    background:
        #fbfcfc;
}


.mozgo-payment-methods {

    display:
        grid;

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

    gap:
        12px;
}


.mozgo-pay-option {

    position:
        relative;

    min-height:
        92px;

    margin:
        0 !important;

    padding:
        0 !important;

    border:
        1px solid var(--mozgo-border) !important;

    border-radius:
        13px;

    background:
        #ffffff;

    cursor:
        pointer;

    overflow:
        hidden;

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


.mozgo-pay-option:hover {

    transform:
        translateY(-1px);

    box-shadow:
        0 7px 20px rgba(25, 48, 54, .075);
}


.mozgo-pay-option
.custom-control-input {

    position:
        absolute;

    opacity:
        0;

    pointer-events:
        none;
}


.mozgo-pay-option-label {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    width:
        100%;

    min-height:
        92px;

    margin:
        0;

    padding:
        15px;

    cursor:
        pointer;
}


.mozgo-pay-brand {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex:
        0 0 48px;

    width:
        48px;

    height:
        48px;

    border-radius:
        13px;

    color:
        #ffffff;

    font-size:
        22px;

    font-weight:
        850;
}


.mozgo-pay-brand-mpesa {

    background:
        linear-gradient(
            135deg,
            #e60000,
            #ef3636
        );
}


.mozgo-pay-brand-emola {

    background:
        linear-gradient(
            135deg,
            #f05a18,
            #ff7a22
        );
}


.mozgo-pay-option-copy {

    display:
        flex;

    flex-direction:
        column;

    min-width:
        0;
}


.mozgo-pay-option-copy strong {

    color:
        var(--mozgo-ink);

    font-size:
        15px;

    line-height:
        1.25;
}


.mozgo-pay-option-copy small {

    margin-top:
        3px;

    color:
        var(--mozgo-muted);

    font-size:
        11px;
}


.mozgo-pay-option-check {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        24px;

    height:
        24px;

    margin-left:
        auto;

    border:
        1px solid #d4dfe1;

    border-radius:
        999px;

    color:
        transparent;

    font-size:
        12px;

    font-weight:
        800;
}


/* M-PESA SELECTED */

.mozgo-pay-option-mpesa.is-selected {

    border-color:
        #e60000 !important;

    box-shadow:
        0 0 0 3px rgba(230, 0, 0, .07);
}


.mozgo-pay-option-mpesa.is-selected
.mozgo-pay-option-check {

    border-color:
        #e60000;

    background:
        #e60000;

    color:
        #ffffff;
}


/* E-MOLA SELECTED */

.mozgo-pay-option-emola.is-selected {

    border-color:
        #f05a18 !important;

    box-shadow:
        0 0 0 3px rgba(240, 90, 24, .08);
}


.mozgo-pay-option-emola.is-selected
.mozgo-pay-option-check {

    border-color:
        #f05a18;

    background:
        #f05a18;

    color:
        #ffffff;
}


/* ------------------------------------------------------------
   PHONE PANEL
   ------------------------------------------------------------ */

.mozgo-mobile-money-panel {

    margin-top:
        14px;

    padding:
        18px;

    border:
        1px solid var(--mozgo-border);

    border-radius:
        14px;

    background:
        #ffffff;

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


.mozgo-mobile-money-panel.is-mpesa {

    border-color:
        rgba(230, 0, 0, .22);

    background:
        linear-gradient(
            180deg,
            rgba(230, 0, 0, .025),
            #ffffff 42%
        );
}


.mozgo-mobile-money-panel.is-emola {

    border-color:
        rgba(240, 90, 24, .25);

    background:
        linear-gradient(
            180deg,
            rgba(240, 90, 24, .035),
            #ffffff 42%
        );
}


.mozgo-mobile-money-head {

    display:
        flex;

    align-items:
        center;

    gap:
        11px;

    margin-bottom:
        17px;
}


.mozgo-mobile-money-head > div {

    display:
        flex;

    flex-direction:
        column;
}


.mozgo-mobile-money-head strong {

    color:
        var(--mozgo-ink);

    font-size:
        15px;
}


.mozgo-mobile-money-head small {

    margin-top:
        2px;

    color:
        var(--mozgo-muted);

    font-size:
        11px;
}


.mozgo-mobile-money-icon {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        42px;

    height:
        42px;

    border-radius:
        12px;

    background:
        var(--mozgo-primary);

    color:
        #ffffff;

    font-weight:
        850;
}


.is-mpesa
.mozgo-mobile-money-icon {

    background:
        #e60000;
}


.is-emola
.mozgo-mobile-money-icon {

    background:
        #f05a18;
}


.mozgo-mobile-money-form label {

    display:
        block;

    margin-bottom:
        7px;

    color:
        var(--mozgo-ink);

    font-size:
        12px;

    font-weight:
        700;
}


.mozgo-mobile-money-input {

    position:
        relative;

    display:
        flex;

    align-items:
        center;
}


.mozgo-mobile-money-input > span {

    position:
        absolute;

    left:
        14px;

    z-index:
        2;

    color:
        var(--mozgo-muted);
}


.mozgo-mobile-money-input
.form-control {

    height:
        50px;

    padding-left:
        42px;

    border:
        1px solid #dce5e7;

    border-radius:
        11px;

    font-size:
        15px;
}


.mozgo-mobile-money-panel.is-mpesa
.form-control:focus {

    border-color:
        #e60000;

    box-shadow:
        0 0 0 3px rgba(230, 0, 0, .07) !important;
}


.mozgo-mobile-money-panel.is-emola
.form-control:focus {

    border-color:
        #f05a18;

    box-shadow:
        0 0 0 3px rgba(240, 90, 24, .08) !important;
}


.mozgo-mobile-money-help {

    display:
        block;

    margin-top:
        7px;

    color:
        var(--mozgo-muted);

    font-size:
        10px;
}


.mozgo-mobile-money-benefits {

    display:
        grid;

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

    margin-top:
        16px;

    padding-top:
        14px;

    border-top:
        1px solid #edf1f2;
}


.mozgo-mobile-money-benefits div {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    text-align:
        center;

    border-right:
        1px solid #edf1f2;
}


.mozgo-mobile-money-benefits div:last-child {

    border-right:
        0;
}


.mozgo-mobile-money-benefits strong {

    color:
        var(--mozgo-ink);

    font-size:
        10px;
}


.mozgo-mobile-money-benefits span {

    margin-top:
        2px;

    color:
        var(--mozgo-muted);

    font-size:
        9px;
}


/* ------------------------------------------------------------
   NOTE
   ------------------------------------------------------------ */

.siddhi-checkout
.add-note {

    margin-top:
        16px;

    padding:
        17px;
}


.siddhi-checkout
.add-note h3 {

    margin-bottom:
        10px;

    font-size:
        15px;
}


.siddhi-checkout
#add-note {

    display:
        block;

    width:
        100%;

    min-height:
        95px;

    padding:
        11px 12px;

    border:
        1px solid var(--mozgo-border);

    border-radius:
        10px;

    resize:
        vertical;

    outline:
        none;
}


.siddhi-checkout
#add-note:focus {

    border-color:
        var(--mozgo-primary);
}


/* ------------------------------------------------------------
   CART SUMMARY
   ------------------------------------------------------------ */

.siddhi-checkout
#cart_list {

    position:
        sticky;

    top:
        92px;

    border:
        1px solid var(--mozgo-border) !important;

    border-radius:
        14px !important;

    overflow:
        hidden;
}


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

@media (max-width: 767px) {

    .mozgo-checkout-page-heading {

        align-items:
            flex-start;

        flex-direction:
            column;
    }


    .mozgo-checkout-page-heading h1 {

        font-size:
            25px;
    }


    .mozgo-checkout-secure {

        width:
            100%;
    }


    .mozgo-payment-methods {

        grid-template-columns:
            1fr;
    }


    .mozgo-mobile-money-benefits {

        gap:
            8px;
    }


    .siddhi-checkout
    #cart_list {

        position:
            static;

        margin-top:
            18px;
    }

}


/* MOZGO PHASE 3C CHECKOUT END */


/* ============================================================
   MOZGO PHASE 3C.3
   CLEAN PAYMENT METHOD LIST
   ============================================================ */


/* Original radios remain functional but visually hidden */

.checkout-payment-options
> .custom-control,

.checkout-payment-options
> .mozgo-payment-methods {

    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    overflow: hidden !important;

    clip: rect(0 0 0 0) !important;

    opacity: 0 !important;

    pointer-events: none !important;
}


/* ------------------------------------------------------------
   PAYMENT LIST
   ------------------------------------------------------------ */

.mozgo-payment-list {

    overflow: hidden;

    margin: 0;

    border:
        1px solid #e0e8ea;

    border-radius:
        13px;

    background:
        #ffffff;
}


.mozgo-payment-list-item {

    position: relative;

    display: flex;

    align-items: center;

    gap: 14px;

    min-height: 78px;

    padding:
        13px 16px;

    border-bottom:
        1px solid #edf1f2;

    cursor: pointer;

    transition:
        background .16s ease,
        border-color .16s ease;
}


.mozgo-payment-list-item:last-child {

    border-bottom: 0;
}


.mozgo-payment-list-item:hover {

    background:
        #fafcfc;
}


.mozgo-payment-list-item.is-selected {

    background:
        #f4fbfa;
}


.mozgo-payment-list-item.is-mpesa.is-selected {

    background:
        #fff8f8;
}


.mozgo-payment-list-item.is-emola.is-selected {

    background:
        #fff9f4;
}


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

.mozgo-payment-list-logo {

    display: flex;

    align-items: center;

    justify-content: center;

    flex:
        0 0 78px;

    width:
        78px;

    height:
        48px;

    padding:
        5px 7px;

    border:
        1px solid #edf1f2;

    border-radius:
        10px;

    background:
        #ffffff;
}


.mozgo-payment-list-logo img {

    display: block !important;

    width: auto !important;
    height: auto !important;

    max-width:
        68px !important;

    max-height:
        34px !important;

    object-fit:
        contain !important;

    margin:
        0 !important;
}


.mozgo-payment-cash-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    width:
        42px;

    height:
        42px;

    border-radius:
        10px;

    background:
        #edf8f6;

    font-size:
        21px;
}


.mozgo-emola-brand {

    display: flex;

    align-items: center;

    justify-content: center;

    width:
        68px;

    height:
        34px;

    border-radius:
        8px;

    background:
        #fff0e5;

    color:
        #ef5b18;

    font-size:
        15px;

    font-weight:
        850;
}


/* ------------------------------------------------------------
   TEXT
   ------------------------------------------------------------ */

.mozgo-payment-list-copy {

    display: flex;

    flex: 1;

    flex-direction: column;

    min-width: 0;
}


.mozgo-payment-list-copy strong {

    color:
        #17252a;

    font-size:
        14px;

    font-weight:
        750;
}


.mozgo-payment-list-copy small {

    margin-top:
        3px;

    color:
        #7a898f;

    font-size:
        11px;
}


/* ------------------------------------------------------------
   RADIO
   ------------------------------------------------------------ */

.mozgo-payment-list-radio {

    display: flex;

    align-items: center;

    justify-content: center;

    flex:
        0 0 22px;

    width:
        22px;

    height:
        22px;

    border:
        2px solid #d4dfe1;

    border-radius:
        50%;

    background:
        #ffffff;
}


.mozgo-payment-list-radio::after {

    content: "";

    width:
        10px;

    height:
        10px;

    border-radius:
        50%;

    background:
        transparent;
}


.mozgo-payment-list-item.is-selected
.mozgo-payment-list-radio {

    border-color:
        #078c87;
}


.mozgo-payment-list-item.is-selected
.mozgo-payment-list-radio::after {

    background:
        #078c87;
}


.mozgo-payment-list-item.is-mpesa.is-selected
.mozgo-payment-list-radio {

    border-color:
        #e60000;
}


.mozgo-payment-list-item.is-mpesa.is-selected
.mozgo-payment-list-radio::after {

    background:
        #e60000;
}


.mozgo-payment-list-item.is-emola.is-selected
.mozgo-payment-list-radio {

    border-color:
        #ef5b18;
}


.mozgo-payment-list-item.is-emola.is-selected
.mozgo-payment-list-radio::after {

    background:
        #ef5b18;
}


/* ------------------------------------------------------------
   POPUP
   ------------------------------------------------------------ */

.mozgo-payment-modal {

    position: fixed;

    inset: 0;

    z-index: 99999;

    display: none;

    align-items: center;

    justify-content: center;

    padding:
        18px;

    background:
        rgba(12, 20, 24, .56);

    backdrop-filter:
        blur(2px);
}


.mozgo-payment-modal.is-open {

    display: flex;
}


.mozgo-payment-modal-card {

    position: relative;

    width: 100%;

    max-width:
        470px;

    overflow: hidden;

    border-radius:
        22px;

    background:
        #ffffff;

    box-shadow:
        0 30px 80px rgba(0,0,0,.25);
}


.mozgo-payment-modal-header {

    padding:
        30px 55px 32px;

    text-align:
        center;

    color:
        #ffffff;
}


.mozgo-payment-modal-card.is-mpesa
.mozgo-payment-modal-header {

    background:
        linear-gradient(
            135deg,
            #df0000,
            #f01919
        );
}


.mozgo-payment-modal-card.is-emola
.mozgo-payment-modal-header {

    background:
        linear-gradient(
            135deg,
            #ff7022,
            #e54909
        );
}


.mozgo-payment-modal-header h2 {

    margin: 0;

    color:
        #ffffff;

    font-size:
        25px;

    font-weight:
        800;
}


.mozgo-payment-modal-header p {

    margin:
        5px 0 0;

    color:
        rgba(255,255,255,.9);

    font-size:
        12px;
}


.mozgo-payment-modal-close {

    position: absolute;

    top: 15px;

    left: 15px;

    z-index: 5;

    width:
        32px;

    height:
        32px;

    padding:
        0;

    border:
        0;

    border-radius:
        8px;

    background:
        #ffffff;

    color:
        #e63b3b;

    font-size:
        21px;

    cursor:
        pointer;
}


.mozgo-payment-modal-body {

    padding:
        28px 42px 26px;

    text-align:
        center;
}


.mozgo-payment-modal-logo {

    display: flex;

    align-items: center;

    justify-content: center;

    min-height:
        55px;

    margin-bottom:
        7px;
}


.mozgo-payment-modal-logo img {

    display: block;

    width: auto;

    height: auto;

    max-width:
        155px;

    max-height:
        52px;

    object-fit:
        contain;
}


.mozgo-payment-modal-body h3 {

    margin:
        5px 0 6px;

    color:
        #17252a;

    font-size:
        17px;

    font-weight:
        800;
}


.mozgo-payment-modal-help {

    margin:
        0 0 18px;

    color:
        #819096;

    font-size:
        10px;
}


.mozgo-payment-phone-field {

    position: relative;

    display: flex;

    align-items: center;
}


.mozgo-payment-phone-field input {

    width: 100%;

    height:
        54px;

    padding:
        0 48px;

    border:
        1px solid #dce5e7;

    border-radius:
        13px;

    outline:
        none;

    font-size:
        15px;

    font-weight:
        600;

    box-shadow:
        none;
}


.mozgo-payment-phone-field
.mozgo-phone-left {

    position: absolute;

    left:
        16px;
}


.mozgo-payment-phone-field
.mozgo-phone-right {

    position: absolute;

    right:
        15px;

    display: flex;

    align-items: center;

    justify-content: center;

    width:
        23px;

    height:
        23px;

    border-radius:
        50%;

    background:
        #e5faf3;

    color:
        #22bf7b;

    font-size:
        11px;
}


.mozgo-payment-benefits {

    display: grid;

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

    margin:
        20px 0 14px;

    padding:
        12px 5px;

    border-radius:
        14px;

    background:
        #f8fafb;
}


.mozgo-payment-modal-card.is-mpesa
.mozgo-payment-benefits {

    background:
        #fff5f5;
}


.mozgo-payment-modal-card.is-emola
.mozgo-payment-benefits {

    background:
        #fff6ef;
}


.mozgo-payment-benefits div {

    display: flex;

    flex-direction: column;

    align-items: center;

    border-right:
        1px solid rgba(0,0,0,.07);
}


.mozgo-payment-benefits div:last-child {

    border-right:
        0;
}


.mozgo-payment-benefits strong {

    color:
        #26353b;

    font-size:
        10px;
}


.mozgo-payment-benefits small {

    margin-top:
        2px;

    color:
        #87949a;

    font-size:
        8px;
}


.mozgo-payment-modal-continue {

    width: 100%;

    height:
        49px;

    border:
        0;

    border-radius:
        9px;

    color:
        #ffffff;

    font-size:
        13px;

    font-weight:
        800;

    cursor:
        pointer;
}


.mozgo-payment-modal-card.is-mpesa
.mozgo-payment-modal-continue {

    background:
        #1fbd62;
}


.mozgo-payment-modal-card.is-emola
.mozgo-payment-modal-continue {

    background:
        #ef5b18;
}


@media (max-width: 575px) {

    .mozgo-payment-list-item {

        min-height:
            72px;

        padding:
            11px 12px;
    }


    .mozgo-payment-list-logo {

        flex-basis:
            66px;

        width:
            66px;
    }


    .mozgo-payment-modal-body {

        padding:
            25px 20px 22px;
    }

}


/* MOZGO PHASE 3C.3 END */


/* ============================================================
   MOZGO PHASE 3C.4A
   PAYMENT LIVE STATUS
   ============================================================ */

.mozgo-payment-live-status {

    margin:
        0 0 14px;

    padding:
        13px 15px;

    border-radius:
        12px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    gap:
        4px;

    text-align:
        center;

    border:
        1px solid #e3e9eb;

    background:
        #f7f9fa;

    color:
        #34444a;
}


.mozgo-payment-live-status[hidden] {

    display:
        none !important;
}


.mozgo-payment-live-status
strong {

    font-size:
        14px;

    color:
        #17252a;
}


.mozgo-payment-live-status
span {

    font-size:
        12px;

    color:
        #718087;
}


.mozgo-payment-live-status
small {

    margin-top:
        3px;

    font-size:
        10px;

    color:
        #89969b;
}


.mozgo-payment-live-status.is-processing {

    border-color:
        rgba(7, 140, 135, .22);

    background:
        #f1fbfa;
}


.mozgo-payment-live-status.is-processing::before {

    content:
        "";

    width:
        22px;

    height:
        22px;

    margin-bottom:
        4px;

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

    border-top-color:
        #078c87;

    border-radius:
        50%;

    animation:
        mozgoPaymentSpin .8s linear infinite;
}


.mozgo-payment-live-status.is-confirmed {

    border-color:
        rgba(32, 164, 71, .25);

    background:
        #f2fbf5;
}


.mozgo-payment-live-status.is-confirmed::before {

    content:
        "✓";

    width:
        26px;

    height:
        26px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        50%;

    background:
        #20a447;

    color:
        #ffffff;

    font-weight:
        800;
}


.mozgo-payment-live-status.is-failed {

    border-color:
        rgba(229, 57, 69, .22);

    background:
        #fff5f6;
}


@keyframes mozgoPaymentSpin {

    to {
        transform:
            rotate(360deg);
    }
}


/* MOZGO PHASE 3C.4A END */


/* ============================================================
   MOZGO PHASE 3C.5
   PROFESSIONAL PAYMENT MODAL
   ============================================================ */


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

#mozgoPaymentModal
.mozgo-payment-modal-dialog {

    width: min(94vw, 500px) !important;
    max-width: 500px !important;

    margin:
        28px auto !important;
}


#mozgoPaymentModal
.mozgo-payment-modal-card {

    width: 100% !important;

    overflow: hidden;

    border:
        1px solid rgba(20, 40, 45, .08);

    border-radius:
        22px !important;

    background:
        #ffffff;

    box-shadow:
        0 26px 80px
        rgba(15, 31, 38, .24);
}


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

#mozgoPaymentModal
.mozgo-payment-modal-header {

    min-height:
        122px;

    padding:
        25px 32px 29px !important;
}


#mozgoPaymentModal
.mozgo-payment-modal-title {

    font-size:
        25px !important;

    line-height:
        1.15;

    font-weight:
        800;

    letter-spacing:
        -.4px;
}


#mozgoPaymentModal
.mozgo-payment-modal-subtitle {

    margin-top:
        6px;

    font-size:
        12px !important;

    opacity:
        .9;
}


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

#mozgoPaymentModalClose {

    width:
        34px !important;

    height:
        34px !important;

    border:
        0 !important;

    border-radius:
        10px !important;

    background:
        rgba(255,255,255,.94) !important;

    font-size:
        21px !important;

    font-weight:
        500;

    box-shadow:
        0 4px 14px
        rgba(0,0,0,.10);

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


#mozgoPaymentModalClose:hover {

    transform:
        scale(1.06);

    box-shadow:
        0 7px 20px
        rgba(0,0,0,.15);
}


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

#mozgoPaymentModal
.mozgo-payment-modal-body {

    padding:
        27px 35px 30px !important;
}


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

#mozgoPaymentModal
.mozgo-payment-provider-logo,

#mozgoPaymentModal
.mozgo-payment-modal-logo {

    max-width:
        145px;

    max-height:
        65px;

    object-fit:
        contain;

    margin:
        0 auto 14px;
}


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

#mozgoPaymentModal
.mozgo-payment-modal-instruction {

    margin-bottom:
        5px;

    font-size:
        16px;

    line-height:
        1.35;

    font-weight:
        750;

    color:
        #17252a;
}


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

#mozgo_mobile_money_phone {

    width:
        100%;

    height:
        54px !important;

    padding:
        0 18px !important;

    border:
        1px solid #d9e3e5 !important;

    border-radius:
        13px !important;

    background:
        #ffffff !important;

    color:
        #17252a;

    font-size:
        15px !important;

    font-weight:
        650;

    letter-spacing:
        .3px;

    box-shadow:
        0 3px 12px
        rgba(20, 40, 45, .035);

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


#mozgo_mobile_money_phone:focus {

    outline:
        none !important;

    border-color:
        #078c87 !important;

    box-shadow:
        0 0 0 4px
        rgba(7,140,135,.10) !important;
}


/* ------------------------------------------------------------
   SECURITY / FEATURES BAR
   ------------------------------------------------------------ */

#mozgoPaymentModal
.mozgo-payment-features {

    margin-top:
        18px;

    padding:
        13px 10px;

    border-radius:
        13px;

    background:
        #f7f9fa;
}


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

#mozgoPaymentContinue {

    width:
        100%;

    min-height:
        52px !important;

    margin-top:
        15px;

    border:
        0 !important;

    border-radius:
        12px !important;

    font-size:
        14px !important;

    font-weight:
        800 !important;

    letter-spacing:
        .15px;

    box-shadow:
        0 8px 22px
        rgba(16, 165, 86, .18);

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


#mozgoPaymentContinue:hover:not(:disabled) {

    transform:
        translateY(-1px);

    box-shadow:
        0 11px 28px
        rgba(16, 165, 86, .24);
}


#mozgoPaymentContinue:disabled {

    cursor:
        wait;

    opacity:
        .78;

    transform:
        none;
}


/* ------------------------------------------------------------
   PROCESSING
   ------------------------------------------------------------ */

.mozgo-payment-live-status {

    margin:
        18px 0 6px !important;

    padding:
        17px 18px !important;

    border-radius:
        14px !important;
}


.mozgo-payment-live-status.is-processing {

    border:
        1px solid
        rgba(7,140,135,.20);

    background:
        #f1fbfa;
}


.mozgo-payment-live-status.is-processing
strong {

    color:
        #076f6b;

    font-size:
        14px;
}


/* ------------------------------------------------------------
   CONFIRMED
   ------------------------------------------------------------ */

.mozgo-payment-live-status.is-confirmed {

    border:
        1px solid
        rgba(32,164,71,.22);

    background:
        #f1fbf4;
}


.mozgo-payment-live-status.is-confirmed
strong {

    color:
        #16833a;
}


/* ------------------------------------------------------------
   FAILED
   ------------------------------------------------------------ */

.mozgo-payment-live-status.is-failed {

    padding:
        18px !important;

    border:
        1px solid
        rgba(229,57,69,.20);

    background:
        #fff5f6;

    color:
        #982a35;
}


.mozgo-payment-live-status.is-failed
strong {

    color:
        #c62e3b;

    font-size:
        15px;
}


.mozgo-payment-live-status.is-failed::after {

    content:
        "Verifique o saldo, o número introduzido e se recebeu a solicitação no telefone. Se não houve débito, pode tentar novamente.";

    display:
        block;

    margin-top:
        8px;

    padding-top:
        10px;

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

    color:
        #6d5558;

    font-size:
        11px;

    line-height:
        1.5;
}


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

@media (max-width: 575px) {

    #mozgoPaymentModal
    .mozgo-payment-modal-dialog {

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

        margin:
            12px auto !important;
    }


    #mozgoPaymentModal
    .mozgo-payment-modal-card {

        border-radius:
            18px !important;
    }


    #mozgoPaymentModal
    .mozgo-payment-modal-header {

        min-height:
            108px;

        padding:
            22px 22px 26px !important;
    }


    #mozgoPaymentModal
    .mozgo-payment-modal-title {

        font-size:
            22px !important;
    }


    #mozgoPaymentModal
    .mozgo-payment-modal-body {

        padding:
            24px 20px 25px !important;
    }

}


/* MOZGO PHASE 3C.5 PAYMENT MODAL END */


/* ============================================================
   MOZGO PHASE 3C.7
   PAYMENT PHONE FIELD FIX
   ============================================================ */

.mozgo-payment-phone-wrap,
.mozgo-payment-input-wrap,
.mozgo-mobile-money-phone-wrap {
    position: relative;
}

#mozgo_mobile_money_phone {
    padding-left: 56px !important;
    padding-right: 44px !important;
    line-height: 1.2 !important;
}

.mozgo-payment-phone-wrap .mozgo-phone-icon,
.mozgo-payment-input-wrap .mozgo-phone-icon,
.mozgo-mobile-money-phone-wrap .mozgo-phone-icon {
    position: absolute !important;
    left: 18px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 18px !important;
    height: 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: none !important;
    z-index: 2 !important;
    color: #232323 !important;
    opacity: .88 !important;
}

.mozgo-payment-phone-wrap .mozgo-phone-icon svg,
.mozgo-payment-phone-wrap .mozgo-phone-icon i,
.mozgo-payment-phone-wrap .mozgo-phone-icon img,
.mozgo-payment-input-wrap .mozgo-phone-icon svg,
.mozgo-payment-input-wrap .mozgo-phone-icon i,
.mozgo-payment-input-wrap .mozgo-phone-icon img,
.mozgo-mobile-money-phone-wrap .mozgo-phone-icon svg,
.mozgo-mobile-money-phone-wrap .mozgo-phone-icon i,
.mozgo-mobile-money-phone-wrap .mozgo-phone-icon img {
    max-width: 16px !important;
    max-height: 16px !important;
    display: block !important;
}

/* fallback: any old icon sitting too close to the text */
#mozgoPaymentModal .fa-phone,
#mozgoPaymentModal .fa-phone-alt,
#mozgoPaymentModal .fa-mobile,
#mozgoPaymentModal .fa-mobile-alt {
    pointer-events: none !important;
}



/* ============================================================
   MOZGO PHASE 3C.8
   PAYMENT MODAL POLISH
   ============================================================ */

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

#mozgoPaymentModal .mozgo-payment-modal-dialog {
    width: min(94vw, 560px) !important;
    max-width: 560px !important;
    border-radius: 24px !important;
    overflow: hidden !important;
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.28) !important;
}

#mozgoPaymentModal .mozgo-payment-modal-header {
    padding: 22px 24px 28px !important;
}

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

#mozgoPaymentModal .mozgo-payment-modal-title,
#mozgoPaymentModal #mozgoPaymentModalTitle {
    font-size: 24px !important;
    line-height: 1.15 !important;
    font-weight: 800 !important;
    text-align: center !important;
    margin: 0 !important;
}

#mozgoPaymentModal .mozgo-payment-modal-subtitle {
    margin-top: 6px !important;
    font-size: 14px !important;
    text-align: center !important;
    opacity: .95 !important;
}

#mozgoPaymentModal .mozgo-payment-provider-logo,
#mozgoPaymentModal .mozgo-payment-brand-logo,
#mozgoPaymentModal .mozgo-mobile-money-logo {
    display: block !important;
    max-height: 62px !important;
    margin: 2px auto 16px !important;
    object-fit: contain !important;
}

#mozgoPaymentModal h3,
#mozgoPaymentModal h4,
#mozgoPaymentModal .mozgo-payment-section-title {
    margin: 4px 0 10px !important;
    font-size: 17px !important;
    line-height: 1.35 !important;
    text-align: center !important;
}

#mozgoPaymentModal p,
#mozgoPaymentModal .mozgo-payment-help,
#mozgoPaymentModal .mozgo-payment-note {
    line-height: 1.45 !important;
}

#mozgoPaymentModal .mozgo-payment-note,
#mozgoPaymentModal .mozgo-payment-help {
    text-align: center !important;
    margin-bottom: 14px !important;
    font-size: 13px !important;
    color: #7b8794 !important;
}

#mozgoPaymentModal .mozgo-payment-modal-close,
#mozgoPaymentModal #mozgoPaymentModalClose {
    z-index: 3 !important;
}

/* ------------------------------------------------------------
   PHONE FIELD
   ------------------------------------------------------------ */

#mozgoPaymentModal .mozgo-payment-phone-wrap,
#mozgoPaymentModal .mozgo-payment-input-wrap,
#mozgoPaymentModal .mozgo-mobile-money-phone-wrap,
#mozgoPaymentModal .mozgo-clean-phone-field {
    position: relative !important;
}

#mozgoPaymentModal #mozgo_mobile_money_phone {
    width: 100% !important;
    height: 54px !important;
    min-height: 54px !important;
    padding: 0 44px 0 16px !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    border-radius: 16px !important;
    box-sizing: border-box !important;
    letter-spacing: 0.2px !important;
}

/* hide any phone icon that is conflicting */
#mozgoPaymentModal .mozgo-phone-icon,
#mozgoPaymentModal .fa-phone,
#mozgoPaymentModal .fa-phone-alt,
#mozgoPaymentModal .fa-mobile,
#mozgoPaymentModal .fa-mobile-alt,
#mozgoPaymentModal .input-phone-icon,
#mozgoPaymentModal .phone-icon,
#mozgoPaymentModal [data-phone-icon="true"] {
    display: none !important;
}

/* remove old extra left padding if any wrapper adds it */
#mozgoPaymentModal .mozgo-clean-phone-field input {
    padding-left: 16px !important;
}

#mozgoPaymentModal .mozgo-payment-inline-error {
    display: none;
    margin-top: 10px;
    padding: 12px 14px;
    border: 1px solid #ffd2d2;
    background: #fff3f3;
    color: #cc2f2f;
    border-radius: 14px;
    font-size: 13px;
    line-height: 1.45;
    text-align: left;
}

#mozgoPaymentModal .mozgo-payment-inline-error.is-visible {
    display: block !important;
}

#mozgoPaymentModal .mozgo-payment-inline-error strong {
    display: block;
    margin-bottom: 4px;
    font-size: 13px;
    font-weight: 800;
    color: #ba1f2d;
}

#mozgoPaymentModal .mozgo-input-is-invalid,
#mozgoPaymentModal #mozgo_mobile_money_phone.mozgo-input-is-invalid {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 4px rgba(239, 68, 68, .12) !important;
}

/* ------------------------------------------------------------
   INFO STRIP / BENEFITS
   ------------------------------------------------------------ */

#mozgoPaymentModal .mozgo-payment-benefits,
#mozgoPaymentModal .mozgo-payment-meta-row {
    margin-top: 14px !important;
    margin-bottom: 16px !important;
    border-radius: 16px !important;
    overflow: hidden !important;
}

#mozgoPaymentModal .mozgo-payment-benefits > *,
#mozgoPaymentModal .mozgo-payment-meta-row > * {
    min-height: 48px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

#mozgoPaymentModal .mozgo-payment-benefits small,
#mozgoPaymentModal .mozgo-payment-meta-row small {
    margin-top: 2px !important;
    line-height: 1.2 !important;
}

/* ------------------------------------------------------------
   PROCESSING / FAILED / SUCCESS STATES
   ------------------------------------------------------------ */

#mozgoPaymentModal .mozgo-payment-processing-panel,
#mozgoPaymentModal .mozgo-payment-failed-panel,
#mozgoPaymentModal .mozgo-payment-confirmed-panel {
    margin-top: 16px !important;
    border-radius: 18px !important;
}

#mozgoPaymentModal .mozgo-payment-processing-panel > *,
#mozgoPaymentModal .mozgo-payment-failed-panel > *,
#mozgoPaymentModal .mozgo-payment-confirmed-panel > * {
    border-radius: 18px !important;
    padding: 18px 16px !important;
}

#mozgoPaymentModal .mozgo-payment-processing-panel h4,
#mozgoPaymentModal .mozgo-payment-failed-panel h4,
#mozgoPaymentModal .mozgo-payment-confirmed-panel h4 {
    margin: 0 0 10px !important;
    text-align: center !important;
    font-size: 16px !important;
}

#mozgoPaymentModal .mozgo-payment-processing-panel p,
#mozgoPaymentModal .mozgo-payment-failed-panel p,
#mozgoPaymentModal .mozgo-payment-confirmed-panel p {
    margin: 0 0 8px !important;
    text-align: center !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
}

#mozgoPaymentModal .mozgo-payment-processing-panel .reference,
#mozgoPaymentModal .mozgo-payment-failed-panel .reference,
#mozgoPaymentModal .mozgo-payment-confirmed-panel .reference {
    display: block !important;
    margin-top: 8px !important;
    font-size: 12px !important;
    word-break: break-word !important;
    text-align: center !important;
    opacity: .9 !important;
}

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

#mozgoPaymentModal #mozgoPaymentContinue {
    width: 100% !important;
    min-height: 54px !important;
    border-radius: 16px !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    letter-spacing: .2px !important;
    margin-top: 14px !important;
}

#mozgoPaymentModal .mozgo-payment-secondary-action {
    margin-top: 10px !important;
    text-align: center !important;
}

@media (max-width: 640px) {
    #mozgoPaymentModal .mozgo-payment-modal-dialog {
        width: min(94vw, 540px) !important;
    }

    #mozgoPaymentModal .mozgo-payment-modal-header {
        padding: 18px 18px 24px !important;
    }

    #mozgoPaymentModal .mozgo-payment-modal-body {
        padding: 22px 18px 22px !important;
    }

    #mozgoPaymentModal #mozgo_mobile_money_phone {
        font-size: 17px !important;
    }
}


/* MOZGO PHASE 3C.8 END */