/* =========================================================
   WAVE — PREMIUM CHECKOUT
========================================================= */

/* =========================================================
   1. CHECKOUT HERO
========================================================= */

.checkout-hero {
    position: relative;
    overflow: hidden;

    padding: 85px 0 75px;

    background:
        radial-gradient(
            circle at 85% 15%,
            rgba(45, 190, 230, 0.18),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #eaf9fd 0%,
            #ffffff 65%
        );
}

.checkout-hero::before {
    content: "";

    position: absolute;

    width: 430px;
    height: 430px;

    right: -180px;
    top: -250px;

    border: 1px solid rgba(8, 126, 164, 0.08);

    border-radius: 50%;
}

.checkout-hero::after {
    content: "";

    position: absolute;

    width: 220px;
    height: 220px;

    right: 13%;
    bottom: -170px;

    border: 1px solid rgba(8, 126, 164, 0.06);

    border-radius: 50%;

    background:
        rgba(35, 184, 222, 0.05);
}

.checkout-hero .container {
    position: relative;

    z-index: 2;
}

.checkout-title {
    max-width: 800px;

    margin-top: 10px;

    color: var(--blue-dark);

    font-family: "Manrope", sans-serif;

    font-size: clamp(44px, 6vw, 70px);

    line-height: 1;

    letter-spacing: -3.5px;
}

.checkout-title span {
    color: var(--blue);
}

.checkout-subtitle {
    max-width: 580px;

    margin-top: 20px;

    color: var(--muted);

    font-size: 13px;

    line-height: 1.8;
}


/* =========================================================
   2. MAIN CHECKOUT
========================================================= */

.checkout-section {
    padding: 75px 0 110px;

    background: var(--background);
}

.checkout-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1.35fr)
        minmax(320px, 0.65fr);

    gap: 30px;

    align-items: start;
}

.checkout-main {
    display: flex;

    flex-direction: column;

    gap: 20px;
}


/* =========================================================
   3. CHECKOUT CARDS
========================================================= */

.checkout-card {
    padding: 30px;

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

    border-radius: 23px;

    background: #ffffff;

    box-shadow:
        0 12px 35px rgba(6, 44, 73, 0.045);
}

.checkout-card-header {
    margin-bottom: 25px;
}

.checkout-header-row {
    display: flex;

    align-items: center;

    gap: 14px;
}

.checkout-number {
    width: 39px;
    height: 39px;

    display: grid;

    place-items: center;

    flex-shrink: 0;

    border-radius: 12px;

    background: var(--blue-pale);

    color: var(--blue);

    font-family: "Manrope", sans-serif;

    font-size: 10px;

    font-weight: 800;
}

.checkout-card h2 {
    margin-bottom: 4px;

    color: var(--blue-dark);

    font-family: "Manrope", sans-serif;

    font-size: 17px;
}

.checkout-card-header p {
    color: var(--muted);

    font-size: 10px;
}


/* =========================================================
   4. FORM GRID
========================================================= */

.form-grid {
    display: grid;

    grid-template-columns:
        1fr
        1fr;

    gap: 16px;
}

.form-group {
    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 7px;
}

.form-group.full {
    grid-column: 1 / -1;
}

.form-group label {
    color: var(--blue-dark);

    font-size: 10px;

    font-weight: 700;
}


/* =========================================================
   5. INPUTS
========================================================= */

.input-wrapper {
    position: relative;

    display: flex;

    align-items: center;
}

.input-wrapper > i {
    position: absolute;

    left: 15px;

    z-index: 2;

    color: #91a5b0;

    font-size: 11px;

    pointer-events: none;
}

.input-wrapper input,
.input-wrapper select,
.input-wrapper textarea {
    width: 100%;

    outline: none;

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

    border-radius: 13px;

    background: #fbfdfe;

    color: var(--blue-dark);

    font-family: "DM Sans", sans-serif;

    font-size: 11px;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}

.input-wrapper input,
.input-wrapper select {
    height: 48px;

    padding:
        0 15px 0 40px;
}

.input-wrapper textarea {
    min-height: 105px;

    resize: vertical;

    padding:
        14px 15px 14px 40px;
}

.input-wrapper select {
    appearance: none;

    cursor: pointer;
}

.input-wrapper input::placeholder,
.input-wrapper textarea::placeholder {
    color: #aab8c0;
}

.input-wrapper input:focus,
.input-wrapper select:focus,
.input-wrapper textarea:focus {
    border-color: var(--blue);

    background: #ffffff;

    box-shadow:
        0 0 0 4px
        rgba(8, 126, 164, 0.08);
}


/* =========================================================
   6. MAIN PAYMENT OPTIONS
========================================================= */

.payment-methods {
    display: grid;

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

    gap: 12px;

    margin-bottom: 22px;
}

.payment-option {
    position: relative;

    z-index: 20;

    display: flex;

    align-items: center;

    width: 100%;

    min-height: 76px;

    padding: 15px;

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

    border-radius: 16px;

    background: #fbfdfe;

    color: inherit;

    cursor: pointer;

    text-align: left;

    font-family: "DM Sans", sans-serif;

    pointer-events: auto;

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;
}

.payment-option:hover {
    transform:
        translateY(-2px);

    border-color:
        rgba(8, 126, 164, 0.28);

    box-shadow:
        0 10px 24px
        rgba(6, 44, 73, 0.07);
}

.payment-option.active {
    border-color:
        var(--blue);

    background:
        var(--blue-pale);

    box-shadow:
        0 10px 25px
        rgba(8, 126, 164, 0.09);
}

.payment-option * {
    pointer-events: none;
}

.payment-icon {
    width: 40px;
    height: 40px;

    display: grid;

    place-items: center;

    flex-shrink: 0;

    margin-right: 12px;

    border-radius: 12px;

    background: #ffffff;

    font-size: 13px;

    font-weight: 800;
}

.mpesa-icon {
    color: #15965b;

    background:
        #eaf8f1;
}

.card-icon {
    color: var(--blue);
}

.payment-info {
    min-width: 0;

    flex: 1;
}

.payment-info strong {
    display: block;

    color: var(--blue-dark);

    font-family: "Manrope", sans-serif;

    font-size: 11px;
}

.payment-info span {
    display: block;

    margin-top: 4px;

    color: var(--muted);

    font-size: 8px;
}

.payment-check {
    width: 21px;
    height: 21px;

    display: grid;

    place-items: center;

    flex-shrink: 0;

    border:
        1px solid #cdd9de;

    border-radius: 50%;

    color: transparent;

    font-size: 8px;
}

.payment-option.active
.payment-check {
    border-color:
        var(--blue);

    background:
        var(--blue);

    color: #ffffff;
}


/* =========================================================
   7. PAYMENT PANELS
========================================================= */

.payment-panel {
    position: relative;

    z-index: 5;

    display: none;

    padding: 24px;

    border:
        1px solid rgba(8, 126, 164, 0.10);

    border-radius: 20px;

    background:
        linear-gradient(
            145deg,
            #f3fbfe,
            #ffffff
        );

    animation:
        paymentFade 0.25s ease;
}

.payment-panel.active {
    display: block;
}

@keyframes paymentFade {

    from {
        opacity: 0;

        transform:
            translateY(6px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }
}


/* =========================================================
   8. LUXURY M-PESA HEADER
========================================================= */

.mpesa-luxury-header {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding-bottom: 22px;

    border-bottom:
        1px solid #e9eeeb;
}

.mpesa-luxury-brand {
    display: flex;

    align-items: center;

    gap: 14px;
}

.mpesa-luxury-icon {
    width: 48px;
    height: 48px;

    display: grid;

    place-items: center;

    flex-shrink: 0;

    border-radius: 15px;

    background:
        linear-gradient(
            145deg,
            #e4f7ed,
            #f5fcf8
        );

    color: #008f4c;

    box-shadow:
        0 8px 22px
        rgba(0, 143, 76, 0.08);

    animation:
        waveFloat 4s ease-in-out infinite;
}

@keyframes waveFloat {

    0%,
    100% {
        transform:
            translateY(0);
    }

    50% {
        transform:
            translateY(-4px);
    }
}

.mpesa-luxury-label {
    display: block;

    margin-bottom: 4px;

    color: #8c9690;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 1.5px;
}

.mpesa-luxury-brand h3 {
    margin: 0;

    color: #17201b;

    font-family: "Manrope", sans-serif;

    font-size: 19px;

    font-weight: 800;
}

.mpesa-luxury-brand p {
    margin: 4px 0 0;

    color: #7e8983;

    font-size: 10px;
}

.mpesa-secure-badge {
    display: inline-flex;

    align-items: center;

    gap: 6px;

    padding: 8px 11px;

    border:
        1px solid #e0e9e4;

    border-radius: 999px;

    background: #ffffff;

    color: #6e7973;

    font-size: 9px;

    font-weight: 700;
}

.mpesa-secure-badge i {
    color: #008f4c;
}


/* =========================================================
   9. TILL / SEND MONEY SELECTOR
========================================================= */

.mpesa-choice-wrapper {
    position: relative;

    z-index: 30;

    display: grid;

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

    gap: 11px;

    margin-top: 20px;

    pointer-events: auto;
}

.mpesa-choice {
    position: relative;

    z-index: 31;

    display: flex;

    align-items: center;

    width: 100%;

    min-height: 76px;

    padding: 13px 14px;

    border:
        1px solid #e3e9e6;

    border-radius: 16px;

    background: #ffffff;

    color: #1d2721;

    cursor: pointer;

    text-align: left;

    font-family: "DM Sans", sans-serif;

    pointer-events: auto;

    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease;
}

.mpesa-choice:hover {
    transform:
        translateY(-3px);

    border-color:
        rgba(0, 143, 76, 0.28);

    box-shadow:
        0 12px 27px
        rgba(24, 48, 35, 0.08);
}

.mpesa-choice.active {
    border-color:
        #008f4c;

    background:
        linear-gradient(
            145deg,
            #f3fbf7,
            #ffffff
        );

    box-shadow:
        0 13px 28px
        rgba(0, 143, 76, 0.10);
}

.mpesa-choice * {
    pointer-events: none;
}

.mpesa-choice-icon {
    width: 42px;
    height: 42px;

    display: grid;

    place-items: center;

    flex-shrink: 0;

    margin-right: 12px;

    border-radius: 13px;

    background:
        #f0f3f1;

    color:
        #737d77;

    font-size: 14px;

    transition:
        background 0.25s ease,
        color 0.25s ease,
        transform 0.25s ease;
}

.mpesa-choice.active
.mpesa-choice-icon {
    background:
        #e4f7ec;

    color:
        #008f4c;

    animation:
        waveFloat 3.5s ease-in-out infinite;
}

.mpesa-choice:hover
.mpesa-choice-icon {
    transform:
        translateY(-2px);
}

.mpesa-choice-text {
    display: flex;

    flex-direction: column;

    min-width: 0;

    flex: 1;
}

.mpesa-choice-text strong {
    color:
        #202a24;

    font-family:
        "Manrope", sans-serif;

    font-size:
        12px;

    font-weight:
        800;
}

.mpesa-choice-text small {
    margin-top:
        4px;

    color:
        #89938d;

    font-size:
        9px;

    line-height:
        1.4;
}

.mpesa-choice-indicator {
    width: 22px;
    height: 22px;

    display: grid;

    place-items: center;

    flex-shrink: 0;

    margin-left: 8px;

    border:
        1px solid #dbe2de;

    border-radius: 50%;

    background:
        #ffffff;

    color:
        transparent;

    font-size:
        8px;

    transition:
        border-color 0.25s ease,
        background 0.25s ease,
        color 0.25s ease,
        transform 0.25s ease;
}

.mpesa-choice.active
.mpesa-choice-indicator {
    border-color:
        #008f4c;

    background:
        #008f4c;

    color:
        #ffffff;

    transform:
        scale(1.05);
}


/* =========================================================
   10. ONLY SHOW SELECTED M-PESA CONTENT
========================================================= */

#mpesaPanel
.mpesa-payment-content {
    display:
        none !important;

    margin-top:
        24px;

    animation:
        mpesaReveal 0.28s ease;
}

#mpesaPanel
.mpesa-payment-content.active {
    display:
        block !important;
}

@keyframes mpesaReveal {

    from {
        opacity:
            0;

        transform:
            translateY(7px);
    }

    to {
        opacity:
            1;

        transform:
            translateY(0);
    }
}


/* =========================================================
   11. M-PESA CONTENT HEADER
========================================================= */

.mpesa-content-heading {
    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 18px;
}

.mpesa-content-heading-icon {
    width: 42px;
    height: 42px;

    display: grid;

    place-items: center;

    flex-shrink: 0;

    border-radius: 13px;

    background:
        #eaf8f1;

    color:
        #008f4c;

    animation:
        waveFloat 4s ease-in-out infinite;
}

.mpesa-content-heading-icon.send-icon {
    background:
        #eef1fa;

    color:
        #596ab5;
}

.mpesa-content-heading span {
    display: block;

    margin-bottom: 4px;

    color:
        #909994;

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        1.4px;
}

.mpesa-content-heading h3 {
    margin: 0;

    color:
        #1b241f;

    font-family:
        "Manrope", sans-serif;

    font-size:
        15px;

    font-weight:
        800;
}

.mpesa-content-heading p {
    margin:
        3px 0 0;

    color:
        #808a84;

    font-size:
        10px;
}


/* =========================================================
   12. TILL PAYMENT
========================================================= */

.till-payment-card {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 16px;

    padding:
        18px 19px;

    border:
        1px solid #dce8e1;

    border-radius:
        16px;

    background:
        linear-gradient(
            145deg,
            #f1faf5,
            #ffffff
        );

    box-shadow:
        0 9px 25px
        rgba(0, 143, 76, 0.05);
}

.till-payment-details span {
    display: block;

    margin-bottom: 6px;

    color:
        #85918a;

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        1.4px;
}

.till-payment-details strong {
    color:
        #152019;

    font-family:
        "Manrope", sans-serif;

    font-size:
        28px;

    font-weight:
        800;

    letter-spacing:
        1px;
}

.copy-till {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    padding:
        10px 13px;

    border:
        1px solid #d7e1da;

    border-radius:
        10px;

    background:
        #ffffff;

    color:
        #45524a;

    font-size:
        9px;

    font-weight:
        800;

    cursor:
        pointer;
}

.copy-till:hover {
    border-color:
        #008f4c;

    color:
        #008f4c;
}


/* =========================================================
   13. PAYMENT STEPS
========================================================= */

.payment-steps {
    display:
        flex;

    flex-direction:
        column;

    margin-top:
        20px;

    border-top:
        1px solid #edf1ef;
}

.payment-step {
    display:
        flex;

    align-items:
        flex-start;

    gap:
        12px;

    padding:
        13px 0;

    border-bottom:
        1px solid #edf1ef;
}

.payment-step-number {
    width:
        29px;

    height:
        29px;

    display:
        grid;

    place-items:
        center;

    flex-shrink:
        0;

    border-radius:
        9px;

    background:
        #f2f5f3;

    color:
        #6d7972;

    font-size:
        8px;

    font-weight:
        800;
}

.payment-step strong {
    display:
        block;

    color:
        #29342e;

    font-size:
        11px;

    font-weight:
        800;
}

.payment-step p {
    margin:
        3px 0 0;

    color:
        #89928d;

    font-size:
        9px;

    line-height:
        1.5;
}


/* =========================================================
   14. SEND MONEY
========================================================= */

.send-money-number-card {
    padding:
        17px;

    border:
        1px solid #e1e6f1;

    border-radius:
        16px;

    background:
        linear-gradient(
            145deg,
            #f8f9fd,
            #ffffff
        );
}

.send-money-number-header {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    margin-bottom:
        14px;
}

.send-money-number-header span {
    display:
        block;

    margin-bottom:
        4px;

    color:
        #9299a7;

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        1.2px;
}

.send-money-number-header h4 {
    margin:
        0;

    color:
        #273143;

    font-family:
        "Manrope", sans-serif;

    font-size:
        13px;

    font-weight:
        800;
}

.send-money-small-icon {
    width:
        36px;

    height:
        36px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        11px;

    background:
        #eef1fa;

    color:
        #5d6db6;

    animation:
        waveFloat 4s ease-in-out infinite;
}

.send-money-number-card
.input-wrapper
input {
    background:
        #ffffff;
}

.send-money-number-card
.input-help {
    color:
        #8d9692;
}


/* =========================================================
   15. PAYMENT NOTE
========================================================= */

.payment-note {
    display:
        flex;

    align-items:
        flex-start;

    gap:
        9px;

    margin-top:
        17px;

    padding:
        11px 13px;

    border:
        1px solid #e4e8ef;

    border-radius:
        11px;

    background:
        #fbfcfe;

    color:
        #747d8b;

    font-size:
        9px;

    line-height:
        1.5;
}

.payment-note i {
    color:
        #596ab5;
}


/* =========================================================
   16. TRANSACTION CODE
========================================================= */

.transaction-code-group {
    margin-top:
        25px;

    padding-top:
        24px;

    border-top:
        1px solid #e8ecea;
}

.transaction-code-header {
    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        15px;

    margin-bottom:
        9px;
}

.transaction-code-header label {
    display:
        block;

    color:
        #333d37;

    font-size:
        11px;

    font-weight:
        800;
}

.transaction-code-icon {
    width:
        34px;

    height:
        34px;

    display:
        grid;

    place-items:
        center;

    flex-shrink:
        0;

    border-radius:
        10px;

    background:
        #f3f5f4;

    color:
        #707a74;

    font-size:
        11px;
}


/* =========================================================
   17. CARD PANEL
========================================================= */

.secure-payment {
    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    margin-top:
        15px;

    padding:
        11px;

    border-radius:
        10px;

    background:
        #f3f8fa;

    color:
        #7b919d;

    font-size:
        8px;
}

.secure-payment i {
    color:
        var(--blue);
}


/* =========================================================
   18. PLACE ORDER
========================================================= */

.place-order-btn {
    width:
        100%;

    min-height:
        56px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        12px;

    margin-top:
        5px;

    border:
        none;

    border-radius:
        15px;

    background:
        linear-gradient(
            135deg,
            #087ea4,
            #063652
        );

    color:
        #ffffff;

    font-family:
        "Manrope", sans-serif;

    font-size:
        11px;

    font-weight:
        800;

    cursor:
        pointer;
}

.place-order-btn:hover {
    transform:
        translateY(-2px);
}

.place-order-btn:disabled {
    opacity:
        0.7;

    cursor:
        not-allowed;

    transform:
        none;
}


/* =========================================================
   19. SECURITY
========================================================= */

.checkout-security {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex-wrap:
        wrap;

    gap:
        7px;

    margin-top:
        14px;

    color:
        #91a4ae;

    font-size:
        8px;
}

.checkout-security i {
    color:
        var(--blue);
}


/* =========================================================
   20. ORDER SUMMARY
========================================================= */

.order-summary {
    position:
        sticky;

    top:
        95px;
}

.summary-card {
    padding:
        27px;

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

    border-radius:
        23px;

    background:
        #ffffff;

    box-shadow:
        0 18px 45px
        rgba(6, 44, 73, 0.065);
}

.summary-header {
    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        15px;

    padding-bottom:
        20px;

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

.summary-header h2 {
    margin-top:
        4px;

    color:
        var(--blue-dark);

    font-family:
        "Manrope", sans-serif;

    font-size:
        19px;
}

.summary-header-right {
    display:
        flex;

    align-items:
        flex-end;

    flex-direction:
        column;

    gap:
        6px;
}

.summary-items {
    padding:
        6px 9px;

    border-radius:
        8px;

    background:
        var(--blue-pale);

    color:
        var(--blue);

    font-size:
        8px;

    font-weight:
        800;
}

.summary-header-total {
    color:
        var(--blue-dark);

    font-family:
        "Manrope", sans-serif;

    font-size:
        18px;

    font-weight:
        800;
}


/* =========================================================
   21. SUMMARY PRODUCTS
========================================================= */

.summary-products {
    display:
        flex;

    flex-direction:
        column;

    gap:
        12px;

    max-height:
        330px;

    overflow-y:
        auto;

    padding:
        17px 2px;

    scrollbar-width:
        thin;
}

.summary-product {
    display:
        flex;

    align-items:
        center;

    gap:
        10px;
}

.summary-product-image {
    width:
        52px;

    height:
        52px;

    display:
        grid;

    place-items:
        center;

    flex-shrink:
        0;

    overflow:
        hidden;

    border-radius:
        12px;

    background:
        var(--blue-pale);
}

.summary-product-image img {
    width:
        100%;

    height:
        100%;

    object-fit:
        cover;
}

.summary-product-details {
    min-width:
        0;

    flex:
        1;
}

.summary-product-details strong {
    display:
        block;

    overflow:
        hidden;

    color:
        var(--blue-dark);

    font-size:
        10px;

    white-space:
        nowrap;

    text-overflow:
        ellipsis;
}

.summary-product-details span {
    display:
        block;

    margin-top:
        4px;

    color:
        var(--muted);

    font-size:
        8px;
}

.summary-product-price {
    color:
        var(--blue-dark);

    font-size:
        10px;

    font-weight:
        800;

    white-space:
        nowrap;
}


/* =========================================================
   22. SUMMARY TOTALS
========================================================= */

.summary-totals {
    padding-top:
        16px;

    border-top:
        1px solid var(--border);
}

.summary-line {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    padding:
        7px 0;

    color:
        var(--muted);

    font-size:
        9px;
}

.summary-line strong {
    color:
        var(--blue-dark);

    font-size:
        10px;
}

.summary-line.final {
    margin-top:
        9px;

    padding:
        15px 0 0;

    border-top:
        1px dashed var(--border);
}

.summary-line.final span {
    color:
        var(--blue-dark);

    font-family:
        "Manrope", sans-serif;

    font-size:
        11px;

    font-weight:
        800;
}

.summary-line.final strong {
    color:
        var(--blue);

    font-family:
        "Manrope", sans-serif;

    font-size:
        18px;
}


/* =========================================================
   23. SUMMARY TRUST
========================================================= */

.summary-trust {
    display:
        flex;

    flex-direction:
        column;

    gap:
        9px;

    margin-top:
        20px;

    padding-top:
        18px;

    border-top:
        1px solid var(--border);
}

.summary-trust div {
    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    color:
        #8297a2;

    font-size:
        8px;
}

.summary-trust i {
    width:
        21px;

    height:
        21px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        7px;

    background:
        var(--blue-pale);

    color:
        var(--blue);

    font-size:
        9px;
}


/* =========================================================
   24. CONTINUE SHOPPING
========================================================= */

.continue-shopping {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    margin-top:
        17px;

    color:
        var(--blue);

    font-size:
        9px;

    font-weight:
        700;
}

.continue-shopping:hover {
    gap:
        12px;
}


/* =========================================================
   25. SUCCESS MODAL
========================================================= */

.success-overlay {
    position:
        fixed;

    inset:
        0;

    z-index:
        9999;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        20px;

    background:
        rgba(2, 28, 43, 0.72);

    backdrop-filter:
        blur(10px);

    opacity:
        0;

    visibility:
        hidden;

    transition:
        opacity 0.3s ease,
        visibility 0.3s ease;
}

.success-overlay.active {
    opacity:
        1;

    visibility:
        visible;
}

.success-modal {
    width:
        min(100%, 480px);

    padding:
        42px 32px;

    text-align:
        center;

    border-radius:
        27px;

    background:
        #ffffff;

    box-shadow:
        0 35px 90px
        rgba(0, 0, 0, 0.25);
}

.success-icon {
    width:
        68px;

    height:
        68px;

    display:
        grid;

    place-items:
        center;

    margin:
        0 auto 20px;

    border-radius:
        22px;

    background:
        var(--blue-pale);

    color:
        var(--blue);

    font-size:
        25px;
}


/* =========================================================
   26. TOAST
========================================================= */

.toast {
    position:
        fixed;

    left:
        50%;

    bottom:
        30px;

    z-index:
        10000;

    padding:
        12px 18px;

    border-radius:
        12px;

    background:
        #063652;

    color:
        #ffffff;

    font-size:
        10px;

    box-shadow:
        0 15px 35px
        rgba(0, 0, 0, 0.18);

    opacity:
        0;

    pointer-events:
        none;

    transform:
        translate(-50%, 15px);

    transition:
        opacity 0.25s ease,
        transform 0.25s ease;
}

.toast.show {
    opacity:
        1;

    transform:
        translate(-50%, 0);
}


/* =========================================================
   27. RESPONSIVE
========================================================= */

@media (max-width: 950px) {

    .checkout-layout {
        grid-template-columns:
            1fr;
    }

    .order-summary {
        position:
            static;

        order:
            -1;
    }

}


@media (max-width: 650px) {

    .checkout-hero {
        padding:
            65px 0 60px;
    }

    .checkout-title {
        font-size:
            45px;

        letter-spacing:
            -2.5px;
    }

    .checkout-section {
        padding:
            45px 0 75px;
    }

    .checkout-card,
    .summary-card {
        padding:
            21px;

        border-radius:
            19px;
    }

    .form-grid {
        grid-template-columns:
            1fr;
    }

    .form-group.full {
        grid-column:
            auto;
    }

    .payment-methods,
    .mpesa-choice-wrapper {
        grid-template-columns:
            1fr;
    }

    .mpesa-luxury-header {
        align-items:
            flex-start;
    }

    .mpesa-secure-badge {
        display:
            none;
    }

    .till-payment-card {
        align-items:
            flex-start;

        flex-direction:
            column;
    }

    .copy-till {
        width:
            100%;
    }

    .copy-till {
        justify-content:
            center;
    }

    .till-payment-details strong {
        font-size:
            24px;
    }

    .summary-products {
        max-height:
            260px;
    }

}


@media (max-width: 420px) {

    .checkout-title {
        font-size:
            39px;
    }

    .checkout-card,
    .summary-card {
        padding:
            17px;
    }

    .checkout-number {
        width:
            34px;

        height:
            34px;
    }

    .checkout-card h2 {
        font-size:
            15px;
    }

    .mpesa-luxury-brand h3 {
        font-size:
            17px;
    }

    .till-payment-details strong {
        font-size:
            21px;
    }

    .summary-header-total {
        font-size:
            16px;
    }

}


/* =========================================================
   PREMIUM CHECKOUT HERO IMAGE
========================================================= */

.checkout-hero-inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(260px, .85fr);
    align-items: center;
    gap: 30px;
}

.checkout-hero-copy {
    position: relative;
    z-index: 3;
}

.checkout-hero-art {
    position: relative;
    min-height: 230px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.checkout-hero-art::before {
    content: "";
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background:
        radial-gradient(
            circle,
            rgba(54, 189, 232, .20),
            rgba(54, 189, 232, 0) 70%
        );
}

.checkout-hero-art img {
    position: relative;
    width: min(100%, 360px);
    border-radius: 28px;
    box-shadow:
        0 25px 55px
        rgba(6, 44, 73, .12);
    border:
        1px solid
        rgba(8, 126, 164, .08);
    animation:
        checkoutFloat 6s ease-in-out infinite;
}

@keyframes checkoutFloat {

    0%,
    100% {
        transform: translateY(0) rotate(1deg);
    }

    50% {
        transform: translateY(-9px) rotate(-1deg);
    }
}

@media (max-width: 760px) {

    .checkout-hero-inner {
        grid-template-columns: 1fr;
    }

    .checkout-hero-art {
        min-height: 190px;
        padding-top: 5px;
    }

    .checkout-hero-art img {
        width: min(100%, 300px);
    }
}
/* Credit / debit card payment option is enabled. Stripe hosts the secure card-entry page. */
/* Secure hosted card checkout */
.card-payment-methods {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 22px 0;
}

.card-brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 88px;
    min-height: 42px;
    padding: 8px 14px;
    border: 1px solid rgba(20, 30, 40, 0.10);
    border-radius: 12px;
    background: #fff;
    font-weight: 800;
    letter-spacing: .04em;
    box-shadow: 0 8px 22px rgba(20, 30, 40, 0.06);
}

/* Stripe inline card payment fields */
.card-payment-setup {
    margin-top: 20px;
}
.card-field-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}
.card-field-group label,
.card-field-label {
    font-weight: 700;
    font-size: 0.9rem;
    margin-bottom: 8px;
    display: block;
}
.card-field-group input {
    width: 100%;
    min-height: 48px;
    border: 1px solid #d8dde5;
    border-radius: 12px;
    padding: 0 14px;
    font: inherit;
    box-sizing: border-box;
}
.stripe-payment-element {
    padding: 14px;
    border: 1px solid #d8dde5;
    border-radius: 14px;
    background: #fff;
    min-height: 55px;
}
.card-payment-error {
    color: #b42318;
    font-size: .9rem;
    margin-top: 10px;
    min-height: 20px;
}

/* =========================================================
   REAL STRIPE CARD FIELDS
========================================================= */
.card-payment-setup { display:grid; gap:14px; }
.card-field-group { display:grid; gap:7px; }
.card-field-group label, .card-field-label, .stripe-card-row-label { font-weight:700; font-size:12px; color:#25342d; }
.card-field-group input { width:100%; min-height:48px; border:1px solid #d9e0dc; border-radius:12px; padding:0 14px; background:#fff; color:#17221d; outline:none; }
.card-field-group input:focus { border-color:#5d9b7a; box-shadow:0 0 0 3px rgba(93,155,122,.12); }
.stripe-card-field { min-height:48px; display:flex; align-items:center; border:1px solid #d9e0dc; border-radius:12px; padding:0 14px; background:#fff; }
.stripe-card-field.StripeElement--focus { border-color:#5d9b7a; box-shadow:0 0 0 3px rgba(93,155,122,.12); }
.stripe-card-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.stripe-card-grid > div { display:grid; gap:7px; }
.card-payment-error { min-height:18px; color:#b42318; font-size:12px; font-weight:600; }
.address-search-row { display:flex; gap:10px; align-items:stretch; }
.address-search-wrapper { flex:1; }
.use-location-btn { border:1px solid #cfd9d4; background:#fff; border-radius:12px; padding:0 16px; font-weight:700; color:#244c39; cursor:pointer; white-space:nowrap; }
.use-location-btn:hover { background:#f4f8f6; }
.use-location-btn:disabled { opacity:.6; cursor:wait; }
.address-search-help { margin-top:7px; color:#7a8780; font-size:11px; }
.pac-container { z-index:99999 !important; font-family:DM Sans,Arial,sans-serif; border-radius:0 0 12px 12px; box-shadow:0 8px 28px rgba(0,0,0,.12); }
@media (max-width:700px) { .address-search-row { flex-direction:column; } .use-location-btn { min-height:48px; } .stripe-card-grid { grid-template-columns:1fr 1fr; } }

/* =========================================================
   SIMPLE THIKA DELIVERY PICKER
========================================================= */
.delivery-address-group { position: relative; }
.local-location-suggestions {
    position: absolute;
    z-index: 50;
    left: 0;
    right: 0;
    top: calc(100% - 4px);
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 18px 40px rgba(6,44,73,.12);
    padding: 6px;
    max-height: 300px;
    overflow-y: auto;
}
.local-location-option {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    text-align: left;
    cursor: pointer;
}
.local-location-option:hover { background: var(--blue-pale); }
.local-location-option > i { color: var(--blue); width: 20px; text-align: center; }
.local-location-option span { display: flex; flex-direction: column; gap: 2px; }
.local-location-option strong { color: var(--blue-dark); font-size: 12px; }
.local-location-option small { color: var(--muted); font-size: 10px; }

/* Simple, familiar order summary */


/* =========================================================
   WAVE PAYMENTS — FINAL PREMIUM CHECKOUT PASS
========================================================= */
.payment-methods{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:18px 0}.payment-option{position:relative;display:grid;grid-template-columns:52px 1fr 28px;align-items:center;gap:14px;min-height:82px;padding:14px 16px;border:1px solid #dce8ed;border-radius:18px;background:#fff;color:#18384f;cursor:pointer;text-align:left;transition:all .2s ease;box-shadow:0 8px 24px rgba(6,44,73,.04)}.payment-option:hover{transform:translateY(-1px);border-color:#9bc9d8;box-shadow:0 14px 30px rgba(6,44,73,.08)}.payment-option.active{border-color:#087ea4;box-shadow:0 0 0 3px rgba(8,126,164,.08),0 14px 30px rgba(6,44,73,.08);background:linear-gradient(180deg,#fff,#f6fbfd)}.payment-icon{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;font-weight:900}.mpesa-icon{background:#eaf9f1;color:#158454;font-size:22px}.card-icon{background:#edf5ff;color:#2363b5;font-size:19px}.payment-info{display:grid;gap:5px}.payment-info strong{font-size:13px;color:#062c49}.payment-info span{font-size:10px;color:#708692;line-height:1.4}.payment-check{width:24px;height:24px;border:1px solid #cbdce3;border-radius:50%;display:grid;place-items:center;color:transparent;font-size:10px}.payment-option.active .payment-check{background:#087ea4;border-color:#087ea4;color:#fff}.mpesa-payment-content{border:1px solid #e0edf1;border-radius:18px;background:#fbfdfe;padding:18px;margin-top:16px}.payment-steps{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}.payment-step{display:flex;gap:10px;padding:13px;border:1px solid #e3edf1;border-radius:14px;background:#fff}.payment-step-number{width:28px;height:28px;flex:0 0 28px;border-radius:9px;display:grid;place-items:center;background:#e9f8fc;color:#087ea4;font-size:9px;font-weight:900}.payment-step strong{font-size:10px;color:#18384f}.payment-step p{font-size:9px;color:#7b8f9b;margin:3px 0 0;line-height:1.4}.transaction-code-group{margin-top:18px;padding:16px;border:1px solid #dcecf2;border-radius:16px;background:#fff}.card-payment-methods{padding:12px;border-radius:16px;background:#f7fbfd;border:1px solid #e2edf1}.card-brand{background:#fff}.card-payment-setup{padding:18px;border:1px solid #dce8ed;border-radius:18px;background:#fbfdfe}.stripe-card-field{min-height:52px;border-radius:13px;border-color:#cbdce3}.stripe-card-field.StripeElement--focus{border-color:#087ea4;box-shadow:0 0 0 4px rgba(8,126,164,.09)}.card-field-group input{min-height:52px;border-radius:13px;border-color:#cbdce3}.card-field-group input:focus{border-color:#087ea4;box-shadow:0 0 0 4px rgba(8,126,164,.09)}.secure-payment{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:13px;background:#eef8f4;color:#28634c;font-size:10px;line-height:1.5}.secure-payment i{margin-top:2px}.payment-option:focus-visible,.mpesa-choice:focus-visible,.place-order-btn:focus-visible{outline:3px solid rgba(8,126,164,.25);outline-offset:2px}@media(max-width:720px){.payment-methods{grid-template-columns:1fr}.payment-steps{grid-template-columns:1fr}.payment-option{grid-template-columns:46px 1fr 24px}.payment-icon{width:46px;height:46px}}


/* =========================================================
   WAVE SIGNATURE CHECKOUT — ACCOUNT + PAYMENT POLISH
========================================================= */
.account-checkout-card { overflow: hidden; }
.account-checkout-profile { display:flex; align-items:center; gap:16px; padding:18px; border:1px solid #dfece7; border-radius:20px; background:linear-gradient(135deg,#fbfffd,#f3faf7); }
.account-checkout-avatar { width:52px; height:52px; border-radius:16px; display:grid; place-items:center; background:#102a43; color:#fff; box-shadow:0 10px 24px rgba(16,42,67,.14); }
.account-checkout-details { display:grid; gap:4px; min-width:0; flex:1; }
.account-checkout-details strong { color:#102a43; font-size:14px; }
.account-checkout-details span { color:#6f7f7a; font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.checkout-profile-link { color:#087ea4; font-size:11px; font-weight:800; text-decoration:none; white-space:nowrap; }
.account-checkout-trust { display:flex; gap:9px; align-items:flex-start; margin-top:12px; padding:12px 14px; border-radius:14px; background:#f5faf8; color:#5e706a; font-size:10px; line-height:1.5; }
.account-checkout-trust i { color:#158454; margin-top:2px; }
.mpesa-manual-tabs { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:14px; }
.mpesa-manual-tab { border:1px solid #dce8e2; background:#fff; border-radius:16px; padding:13px 14px; display:flex; align-items:center; gap:11px; cursor:pointer; text-align:left; transition:.2s ease; color:#18384f; }
.mpesa-manual-tab:hover { border-color:#76b995; transform:translateY(-1px); }
.mpesa-manual-tab.active { border-color:#158454; box-shadow:0 0 0 3px rgba(21,132,84,.09); background:#f6fcf8; }
.mpesa-manual-tab > i { width:38px; height:38px; display:grid; place-items:center; border-radius:12px; background:#e9f8f1; color:#158454; }
.mpesa-manual-tab span { display:grid; gap:3px; }
.mpesa-manual-tab strong { font-size:11px; }
.mpesa-manual-tab small { color:#73847e; font-size:9px; }
.manual-payment-view { display:none; }
.manual-payment-view.active { display:block; }
.manual-payment-hero { display:flex; align-items:center; gap:14px; padding:18px; border:1px solid #dcece4; border-radius:20px; background:linear-gradient(135deg,#f8fdf9,#fff); }
.manual-payment-icon { width:54px; height:54px; flex:0 0 54px; display:grid; place-items:center; border-radius:17px; color:#fff; font-size:20px; }
.manual-payment-icon.till { background:linear-gradient(135deg,#12844f,#075f38); }
.manual-payment-icon.send { background:linear-gradient(135deg,#0b7898,#064d65); }
.manual-payment-hero > div:nth-child(2) { flex:1; min-width:0; }
.manual-payment-hero span { display:block; color:#75857f; font-size:8px; letter-spacing:.14em; font-weight:900; }
.manual-payment-hero h3 { margin:5px 0 4px; color:#102a43; font-size:22px; letter-spacing:.02em; }
.manual-payment-hero p { margin:0; color:#687a74; font-size:10px; line-height:1.5; }
.copy-till { border:1px solid #d3e4dc; background:#fff; color:#158454; border-radius:12px; padding:10px 12px; display:inline-flex; gap:7px; align-items:center; font-weight:800; cursor:pointer; }
.copy-till:disabled { opacity:.45; cursor:not-allowed; }
.mpesa-how-to { list-style:none; padding:0; margin:14px 0 0; display:grid; gap:8px; }
.mpesa-how-to li { display:flex; gap:10px; align-items:flex-start; padding:12px 13px; border:1px solid #e4eee9; border-radius:13px; background:#fff; color:#61736d; font-size:10px; line-height:1.45; }
.mpesa-how-to b { color:#158454; font-size:9px; letter-spacing:.08em; }
.send-money-callout { margin-top:13px; display:flex; gap:9px; padding:12px 14px; border-radius:13px; background:#eef8fc; color:#416b78; font-size:10px; line-height:1.5; }
.send-money-callout i { color:#087ea4; margin-top:2px; }
.card-payment-methods { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.card-brand { min-width:58px; text-align:center; padding:7px 9px; border:1px solid #dbe5e1; border-radius:8px; background:#fff; font-size:9px; font-weight:900; letter-spacing:.04em; }
.card-brand.visa { color:#183f8f; } .card-brand.mastercard { color:#b04b36; } .card-brand.amex { color:#126b8f; }
.card-security { margin-left:auto; color:#3d7460; font-size:9px; font-weight:800; display:flex; gap:5px; align-items:center; }
.card-billing-note { display:flex !important; grid-template-columns:none !important; align-items:flex-start; gap:10px; padding:12px 13px; border:1px solid #e2ece8; border-radius:13px; background:#f7fbf9; }
.billing-summary-icon { width:32px; height:32px; flex:0 0 32px; display:grid; place-items:center; border-radius:10px; background:#e5f4ed; color:#158454; }
.card-billing-note > div:last-child { display:grid; gap:3px; }
.card-billing-note strong { font-size:10px; color:#263b34; } .card-billing-note span { font-size:9px; color:#71817c; line-height:1.45; }
#cardPaymentStatus { margin:8px 0 12px; padding:10px 12px; border-radius:11px; background:#f4f8f6; color:#60736b; font-size:9px; }
#cardPaymentStatus[data-state="ready"] { background:#eef8f4; color:#28634c; }
#cardPaymentStatus[data-state="pending"] { background:#fff7e8; color:#86651d; }
@media(max-width:700px){ .account-checkout-profile { align-items:flex-start; flex-wrap:wrap; } .checkout-profile-link { width:100%; margin-left:68px; } .mpesa-manual-tabs { grid-template-columns:1fr; } .manual-payment-hero { align-items:flex-start; flex-wrap:wrap; } .manual-payment-hero .copy-till { margin-left:68px; } .card-security { width:100%; margin-left:0; } }

/* WAVE M-PESA EXPRESS / CARD INTERACTION FIXES */
.mpesa-express-card{padding:18px;border:1px solid #dcece4;border-radius:20px;background:linear-gradient(145deg,#fbfffd,#f5faf8);box-shadow:0 14px 32px rgba(18,65,45,.06)}
.mpesa-express-brand-row{display:flex;align-items:center;gap:13px;padding-bottom:16px;border-bottom:1px solid #e3eee8}.mpesa-express-logo{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;background:#079455;color:#fff;font-weight:900;font-size:22px;box-shadow:0 10px 22px rgba(7,148,85,.22)}.mpesa-express-brand-row strong,.mpesa-express-brand-row span{display:block}.mpesa-express-brand-row strong{font-size:14px;color:#18384f}.mpesa-express-brand-row span{font-size:10px;color:#718692;margin-top:3px;line-height:1.5}.mpesa-number-confirmation{display:flex;align-items:center;gap:12px;margin-top:16px;padding:14px 16px;border-radius:15px;background:#fff;border:1px solid #dcebe3}.mpesa-number-confirmation>i{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:#eaf8f0;color:#078d50}.mpesa-number-confirmation span,.mpesa-number-confirmation strong{display:block}.mpesa-number-confirmation span{font-size:9px;color:#7c8f88;text-transform:uppercase;letter-spacing:.08em}.mpesa-number-confirmation strong{font-size:13px;color:#183027;margin-top:2px}.mpesa-number-confirmation a{margin-left:auto;font-size:10px;font-weight:800;color:#087ea4;text-decoration:none}.stripe-card-field{position:relative;z-index:20;pointer-events:auto;cursor:text;overflow:visible}.stripe-card-field iframe{pointer-events:auto!important;position:relative!important;z-index:21!important}.card-payment-setup{position:relative;z-index:10}.card-payment-setup input{position:relative;z-index:22;pointer-events:auto}.card-payment-status{position:relative;z-index:5}
.account-status-avatar{overflow:hidden}.account-status-avatar img{width:100%;height:100%;object-fit:cover}


/* WAVE billing details */
.card-billing-section{margin-top:14px;padding:14px;border:1px solid #e2ece8;border-radius:14px;background:#f8fbfa}
.card-billing-heading{display:flex;align-items:flex-start;gap:10px}
.card-billing-heading>div:last-child{display:grid;gap:3px}
.card-billing-heading strong{font-size:12px;color:#263b34}.card-billing-heading span{font-size:10px;color:#71817c;line-height:1.45}
.billing-same-row{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:11px;color:#40534b;cursor:pointer}
.billing-same-row input{width:16px;height:16px;accent-color:#158454;cursor:pointer}
.billing-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.billing-field{display:grid;gap:5px}.billing-field.full{grid-column:1/-1}.billing-field label{font-size:10px;font-weight:700;color:#40534b}.billing-field label span{font-weight:400;color:#8a9892}
.billing-field input{width:100%;min-height:44px;border:1px solid #d9e6e0;border-radius:10px;background:#fff;padding:0 12px;font:inherit;outline:none;box-sizing:border-box}
.billing-field input:focus{border-color:#158454;box-shadow:0 0 0 3px rgba(21,132,84,.10)}
@media(max-width:600px){.billing-fields{grid-template-columns:1fr}.billing-field.full{grid-column:auto}}

/* Stripe hosted fields: make the interactive iframe surfaces obvious and clickable. */
.stripe-card-field {
    min-height: 50px;
    display: flex;
    align-items: center;
    padding: 0 14px;
    background: #fff;
    border: 1px solid #dcecf2;
    border-radius: 12px;
    cursor: text;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.stripe-card-field:focus-within,
.stripe-card-field:hover {
    border-color: #087ea4;
    box-shadow: 0 0 0 3px rgba(8,126,164,.10);
}
#cardPaymentStatus[data-state="ready"] { color: #147a4b; }
#cardPaymentStatus[data-state="pending"] { color: #7a5a00; }
#cardPaymentStatus[data-state="error"] { color: #b42318; }

.success-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:18px}.success-actions .btn{min-width:180px;text-align:center}

/* V26 advanced delivery */
.use-location-btn{white-space:nowrap;min-width:165px}.address-search-help{line-height:1.5}.geocode-option small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}