:root{
    --ink:#333;
    --muted:#858585;
    --line:#e5e5e5;
    --accent:#E5A484;
    --soft:#f7f7f7;
    --green:#00BF63;
    --danger:#d9534f
}

*{
    box-sizing:border-box
}

html,body{
    min-width:0;
    min-height:100%;
    margin:0
}

body{
    padding-bottom:116px;
    background:#f7f7f7;
    color:var(--ink);
    font-family:Larke,Arial,sans-serif
}

button,input,select{
    font:inherit
}

button{
    cursor:pointer
}

.payment-header{
    position:sticky;
    top:0;
    z-index:30;
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    min-height:84px;
    padding:0 7%;
    border-bottom:1px solid var(--line);
    background:rgba(255,255,255,.96);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px)
}

.payment-back{
    width:42px;
    height:42px;
    background:url("../images/Icon Folder/Back Icon_Black.PNG") left center/24px no-repeat
}

.payment-back:active{
    background-image:url("../images/Icon Folder/Back Icon_Gray.PNG")
}

.payment-logo{
    color:var(--accent);font-size:31px;
    font-weight:800;
    letter-spacing:2px;
    text-decoration:none
}

.payment-page{
    width:min(940px,86%);
    margin:0 auto;
    padding:46px 0 54px
}

.payment-hero{
    text-align:center
}

/* Payment Hero Section */
.payment-kicker{
    margin:0 0 7px;
    color:var(--accent);
    font-size:12px;
    font-weight:700;
    letter-spacing:1.5px;
    text-transform:uppercase
}

.payment-hero-kicker{
    color:#333
}

.payment-hero h1{
    margin:0;
    font-size:clamp(36px,5vw,54px);
    line-height:1.08;
    letter-spacing:-1px
}

.payment-secure{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:4px;
    margin:13px 0 0;
    color:var(--green);
    font-size:16px
}

/* Payment Options Sheild Icon*/
.payment-shield{
    display:block;
    align-self:center;
    width:27px;
    height:31px;
    object-fit:contain
}

.payment-info-icon{
    display:block;
    flex:0 0 25px;
    align-self:flex-start;
    width:25px;
    height:29px;
    object-fit:contain;
    margin-top:-2px
}

.payment-loading{
    margin:38px 0;
    color:var(--muted)
}

.payment-methods{
    display:grid;
    gap:14px;
    margin-top:35px
}

.payment-card{
    display:grid;
    grid-template-columns:54px 1fr auto;
    align-items:center;
    gap:18px;
    padding:22px 24px;
    border:1px solid var(--line);
    border-radius:17px;
    background:#fff;
    box-shadow:0 10px 28px rgba(72,50,39,.045)
}

.payment-method-icon{
    display:grid;
    width:54px;
    height:54px;
    place-items:center;
    border:0;
    border-radius:6px;
    background:transparent;
    color:#a96749;
    font-size:11px;
    font-weight:800;
    text-align:center;
    box-shadow:none
}

.payment-card h2{
    margin:0 0 5px;
    font-size:19px
}

.payment-card p{
    margin:0;
    color:var(--muted);
    font-size:14px
}

.payment-card-side{
    display:flex;
    align-items:center;
    gap:6px
}

.payment-default{
    padding:6px 9px;
    border:0;
    border-radius:999px;
    background:#fff2eb;
    color:#a96749;
    font-size:11px;
    font-weight:700
}

.payment-default:not(:disabled){
    background:#f2f2f2;
    color:#777
}

.payment-card-action{
    display:grid;
    width:38px;
    height:38px;
    place-items:center;
    padding:0;
    border:0;
    border-radius:50%;
    background:transparent
}

.payment-card-action:hover{
    background:var(--soft)
}

.payment-card-action img,.payment-card-action svg{
    width:20px;
    height:20px;
    object-fit:contain
}

.payment-card-action svg{
    fill:none;
    stroke:#777;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round
}

.payment-method-icon>img{
    display:block;
    width:42px;
    height:42px;
    border:0;
    border-radius:6px;
    object-fit:contain;
    background:transparent;
    box-shadow:none
}

.payment-method-icon>img[src*="Airtel Icon"],
.payment-method-icon>img[src*="Momo logo"],
.payment-method-icon>img[src*="Flutterwave Logo"]{
    border-radius:10px
}

.payment-picker-option>img[src*="Airtel Icon"],
.payment-picker-option>img[src*="Momo logo"],
.payment-picker-option>img[src*="Flutterwave Logo"]{
    border-radius:6px
}

.payment-empty{
    margin-top:35px;
    padding:60px 24px;
    border:1px dashed #d8d8d8;
    border-radius:18px;
    background:#fff;
    text-align:center
}

.payment-empty>img{
    width:72px;
    height:72px;
    object-fit:contain;
    opacity:.55
}

.payment-empty h2{
    margin:16px 0 8px;
    font-size:24px
}

.payment-empty p{
    max-width:520px;
    margin:0 auto;
    color:var(--muted);
    line-height:1.5
}

.payment-supported{
    display:grid;
    grid-template-columns:1.2fr 1fr;
    align-items:center;
    gap:30px;margin-top:38px;
    padding:28px;
    border:1px solid var(--line);
    border-radius:18px;
    background:#fff
}
    
.payment-supported h2{
    margin:0 0 9px;
    font-size:25px
}

.payment-supported p:not(.payment-kicker){
    margin:0;
    color:var(--muted);
    line-height:1.5}
    
.payment-provider-list{
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-end;
    gap:8px
}

.payment-provider-list span{
    display:flex;
    align-items:center;
    gap:6px;
    padding:7px 10px;
    border:1px solid #ddd;
    border-radius:7px;
    background:#fff;
    color:#555;
    font-size:12px;
    font-weight:700;
    white-space:nowrap
}

.payment-provider-list img{
    display:block;
    flex:0 0 28px;
    width:28px;
    height:28px;
    border:0;
    border-radius:6px;
    object-fit:contain;
    background:transparent;
    box-shadow:none
}

.payment-information{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
    margin-top:16px
}
.payment-information article{
    display:flex;
    align-items:flex-start;
    gap:7px;
    padding:25px;
    border:1px solid var(--line);
    border-radius:18px;
    background:#fff}
    
.payment-information h2{
    margin:0 0 8px;
    color:var(--green);
    font-size:21px
}

.payment-information p{
    margin:0;
    color:var(--muted);
    font-size:14px;
    line-height:1.6
}

.payment-add-bar{
    position:fixed;
    right:0;
    bottom:0;
    left:0;
    z-index:25;
    padding:18px max(7%,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom));
    border-top:1px solid var(--line);
    background:rgba(255,255,255,.96);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px)
}
    
.payment-add,.payment-save{
    display:block;
    width:min(940px,100%);
    min-height:56px;
    margin:0 auto;
    padding:15px 22px;
    border:0;
    border-radius:12px;
    background:#191919;
    color:#fff;
    font-weight:700;
    transition:transform .18s ease,background-color .18s ease}

.payment-add:hover{
    background:#000;
    transform:translateY(-1px)
}

.payment-editor-overlay,
.payment-delete-overlay{
    position:fixed;
    inset:0;
    z-index:1000;
    display:grid;
    place-items:center;
    padding:24px;
    background:rgba(35,33,32,.56);
    opacity:0;
    visibility:hidden;
    transition:opacity .2s ease,visibility .2s ease
}

.payment-editor-overlay.active,
.payment-delete-overlay.active {
    opacity:1;
    visibility:visible
}

.payment-editor{
    width:min(620px,100%);
    max-height:calc(100dvh - 48px);
    overflow:auto;
    padding:32px;
    border-radius:22px;
    background:#fff;
    box-shadow:0 24px 70px rgba(0,0,0,.22);
    transform:translateY(14px) scale(.985);
    transition:transform .2s ease
}

.payment-editor-overlay.active .payment-editor,
.payment-delete-overlay.active .payment-delete-dialog{
    transform:none
}

.payment-editor-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:20px;margin-bottom:25px
}

.payment-editor-header h2{
    margin:0;font-size:30px
}

.payment-editor-close{
    display:grid;
    width:38px;
    height:38px;
    padding:0;
    border:0;
    border-radius:50%;
    place-items:center;
    background:var(--soft);
    cursor:pointer}
    
.payment-editor-close img{
    display:block;
    width:15px;
    height:15px;
    object-fit:contain

}.payment-editor label{
    display:grid;
    gap:8px;
    margin-bottom:16px;
    font-size:14px
}

.payment-editor input,.payment-editor select{
    width:100%;
    padding:13px 14px;
    border:1px solid #d9ceca;
    border-radius:9px;
    background:#fff;
    color:var(--ink);
    outline:0}
    
.payment-editor input:focus,.payment-editor select:focus{
    border-color:var(--accent);
    box-shadow:0 0 0 3px rgba(229,164,132,.16)
}

.payment-editor .is-invalid{
    border-color:#c85a5a;
    background:#fffafa}
    
.payment-fields[hidden]{
    display:none}
    
.payment-safe-note{
    margin:-3px 0 18px;
    padding:12px;border-radius:8px;
    background:#f5faf7;
    color:#34735a;
    font-size:12px;
    line-height:1.5
}

.payment-default-choice{
    display:flex!important;
    grid-template-columns:auto 1fr;
    align-items:center;
    gap:10px!important;
    margin:4px 0 17px!important;
    cursor:pointer}
    
.payment-default-choice input{
    width:18px;
    height:18px;
    margin:0;
    accent-color:var(--accent)
}

.payment-form-error{
    min-height:20px;
    margin:0 0 12px;
    color:#b84242;
    font-size:14px;
    font-weight:600
}

.payment-save{
    width:100%;
    background:var(--accent)
}

.payment-save:hover{
    background:#d99370
}

.payment-save:disabled{
    opacity:.65;
    cursor:wait
}

.payment-picker-field{
    display:grid;
    gap:8px;
    margin-bottom:16px
}

.payment-picker-label{
    font-size:14px
}

.payment-picker{
    position:relative
}

.payment-picker-trigger{
    display:flex;
    width:100%;
    align-items:center;
    justify-content:space-between;
    padding:13px 14px;
    border:1px solid #d9ceca;
    border-radius:9px;
    background:#fff;
    color:var(--ink);
    font:inherit;
    text-align:left
}

.payment-picker-trigger[aria-expanded="true"]{
    border-color:var(--accent);
    box-shadow:0 0 0 3px rgba(229,164,132,.16)
}

.payment-picker-trigger i{
    width:8px;
    height:8px;
    margin:0 3px 4px 0;
    border-right:2px solid #8f8580;
    border-bottom:2px solid #8f8580;
    transform:rotate(45deg);
    transition:transform .18s ease}
    
.payment-picker-trigger[aria-expanded="true"] i{
    margin-bottom:-3px;
    transform:rotate(225deg)
}

.payment-picker-menu{
    position:absolute;
    top:calc(100% + 8px);
    right:0;
    left:0;
    z-index:60;
    overflow:hidden;
    padding:5px;
    border:1px solid #e5e5e5;
    border-radius:10px;
    background:#fff;
    box-shadow:0 12px 28px rgba(0,0,0,.16)
}

.payment-picker-menu[hidden]{
    display:none
}

.payment-picker-menu button{
    width:100%;
    padding:11px 12px;
    border:0;
    border-radius:7px;
    background:transparent;
    color:var(--ink);
    font:inherit;
    text-align:left
}
    
.payment-picker-menu button:hover{
    background:#fff4ef
}

.payment-picker-menu button.selected{
    border-radius:0 20px 20px 0;
    background:var(--accent);
    color:#fff
}

.payment-picker-option{
    display:flex;
    align-items:center;
    gap:9px}
    
.payment-picker-option>img{
    display:block;
    box-sizing:border-box;
    inline-size:28px!important;
    block-size:28px!important;
    min-inline-size:28px;
    max-inline-size:28px;
    min-block-size:28px;
    max-block-size:28px;
    flex:0 0 28px;
    border:0;
    border-radius:6px;
    object-fit:contain;
    background:transparent;
    box-shadow:none
}

.payment-delete-dialog{
    width:min(430px,100%);
    padding:35px 28px 27px;
    border-radius:22px;
    background:#fff;
    text-align:center;
    box-shadow:0 24px 70px rgba(0,0,0,.22);
    transform:translateY(14px) scale(.985);
    transition:transform .2s ease
}
    
.payment-delete-dialog>img{
    width:36px;height:36px
}

.payment-delete-dialog h2{
    margin:15px 0 9px;
    font-size:26px
}

.payment-delete-dialog p{
    margin:0 0 24px;
    color:var(--muted)}

.payment-delete-dialog>div{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px
}
    
.payment-delete-dialog button{
    min-height:48px;
    border:0;
    border-radius:10px;
    font-weight:700

}

.payment-delete-cancel{
    background:#f1f1f1;
    color:#555

}

.payment-delete-confirm{
    background:var(--danger);
    color:#fff
}

.payment-toast{
    position:fixed;
    right:24px;
    bottom:110px;
    z-index:1200;
    max-width:min(360px,calc(100% - 32px));
    padding:13px 18px;
    border-radius:10px;
    background:#333;
    color:#fff;
    opacity:0;
    pointer-events:none;
    transform:translateY(10px);
    transition:.2s
}
.payment-toast.active{
    opacity:1;
    transform:none
}
body.payment-modal-open{
    overflow:hidden
}


@media(max-width:700px){
    body{
        padding-bottom:101px
    }

    .payment-header{
        min-height:72px;
        padding:0 20px;
        background:#fff;
        backdrop-filter:none;
        -webkit-backdrop-filter:none
    }
    .payment-logo{
        font-size:25px
    }
        
    .payment-back{
        width:42px;
        height:42px;
        background-size:20px
    }

    .payment-page{
        width:auto;
        padding:31px 18px 38px
    }

    .payment-hero h1{
        font-size:35px
    }
    
    .payment-secure{
        font-size:14px
    }
    
    .payment-card{
        position:relative;
        grid-template-columns:47px 1fr;
        padding:16px 15px;
        gap:10px
    }
    
    .payment-card-details h2{
        padding-right:100px
    }
    
    .payment-method-icon{
        width:47px;
        height:47px
    }
    
    .payment-default{
        position:absolute;
        top:15px;
        right:15px
    }
    
    .payment-card-side{
        grid-column:1/-1;
        justify-content:flex-end;
        margin-top:-3px;
        border:0;
        padding-top:0
    }
        
    .payment-supported{
        grid-template-columns:1fr;
        padding:22px 18px
    }
        
    .payment-provider-list{
        justify-content:flex-start
    }
        
    .payment-information{
        grid-template-columns:1fr
    }
    
    .payment-add-bar{
        padding:14px 18px max(14px,env(safe-area-inset-bottom))
    }
    
    .payment-editor-overlay{
        align-items:end;
        padding:0
    }

    .payment-editor{
        width:100%;
        max-height:92dvh;
        padding:26px 18px max(26px,env(safe-area-inset-bottom));
        border-radius:24px 24px 0 0;
        transform:translateY(28px)
    }

    .payment-editor input,.payment-editor select{
        font-size:16px
    }
    
    .payment-delete-overlay{
        padding:18px
    }
        
    .payment-delete-dialog>div{
        grid-template-columns:1fr
    }
    
    .payment-toast{
        right:16px;
        bottom:92px;
        left:16px;
        max-width:none;
        text-align:center
    }}