.mpesa-stk-wrap{max-width:1000px;margin:2rem auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:1.5rem;justify-items:center;align-items:start;box-sizing:border-box}
@media (max-width:768px){.mpesa-stk-wrap{grid-template-columns:1fr}}

.mpesa-card{width:clamp(280px,90vw,540px);padding:1.25rem;border:1px solid #e5e7eb;border-radius:16px;background:#fff;color:#111827;box-shadow:0 6px 20px rgba(0,0,0,.06);display:flex;flex-direction:column;box-sizing:border-box}

.mpesa-hidden{display:none !important}
.mpesa-field{margin-bottom:1rem}
.mpesa-field label{display:block;font-weight:600;margin-bottom:.25rem;color:#111827 !important}
.mpesa-field input{width:100%;padding:.6rem .7rem;border:1px solid #cbd5e1;border-radius:10px;background:#fff !important;color:#111827 !important;box-sizing:border-box}
.mpesa-field input::placeholder{color:#94a3b8}

.mpesa-btn{width:100%;display:block;text-align:center;margin-top:1rem;padding:.8rem 1rem;border:1px solid #111827;border-radius:10px;background:#111827;color:#fff;font-weight:700;cursor:pointer;box-sizing:border-box;transition:background-color .2s,color .2s,border-color .2s,transform .02s}
.mpesa-btn:hover{background:#fff;color:#111827;border-color:#111827}
.mpesa-btn:active{transform:translateY(1px)}

.mpesa-message{margin-top:1rem;text-align:center;min-height:24px}
.mpesa-message.ok{color:#16a34a}
.mpesa-message.err{color:#ef4444}

#mpesa-stk-status .mpesa-status-title{font-weight:700;text-align:center;margin-bottom:1rem;color:#111827}
#mpesa-stk-status .mpesa-status-note{margin-top:1rem;text-align:center;color:#111827;min-height:32px}

.mpesa-ring{width:240px;height:240px;border-radius:999px;border:14px solid #e5e7eb;margin:0 auto;display:flex;align-items:center;justify-content:center;font-weight:700;background:#fff;flex:0 0 auto}
.mpesa-ring-text{font-size:1.125rem;color:#111827}
.mpesa-ring-pending{border-color:#f59e0b}
.mpesa-ring-success{border-color:#22c55e}
.mpesa-ring-failed{border-color:#ef4444}

#mpesa-status-footer{margin-top:1rem}