/* Payment Portal Modern Design System */
.step-indicator { display: flex; justify-content: space-between; position: relative; max-width: 600px; margin: 0 auto 3.5rem; }
.step-indicator::before { content: ""; position: absolute; top: 20px; left: 0; right: 0; height: 2px; background: #e2e8f0; z-index: 1; }
.step-item { position: relative; z-index: 2; text-align: center; width: 100px; }
.step-icon { width: 45px; height: 45px; border-radius: 50%; background: white; border: 2px solid #e2e8f0; display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; font-weight: 700; color: #94a3b8; transition: all 0.3s ease; font-size: 1.1rem; }
.step-label { font-size: 13px; font-weight: 600; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.08em; transition: all 0.3s ease; }

.step-item.active .step-icon { background: #4f46e5; border-color: #4f46e5; color: white; box-shadow: 0 0 0 5px rgba(79, 70, 229, 0.15); }
.step-item.active .step-label { color: #4f46e5; }

.payment-card-inner { background: white; border-radius: 32px; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15); overflow: hidden; width: 100%; max-width: 600px; margin: 0 auto; }
.payment-content-core { max-width: 100%; margin: 0 auto; width: 100%; }

/* MTN - Yellow */
.method-mtn { border: 2px solid #fbbf24; color: #92400e; background: white; transition: all 0.2s; cursor: pointer; }
.btn-check:checked + .method-mtn { background: #fbbf24 !important; border-color: #d97706 !important; color: #78350f !important; font-weight: 700; }

/* Airtel - Red */
.method-airtel { border: 2px solid #ef4444; color: #991b1b; background: white; transition: all 0.2s; cursor: pointer; }
.btn-check:checked + .method-airtel { background: #ef4444 !important; border-color: #b91c1c !important; color: white !important; font-weight: 700; }

.btn-pay { background: #4f46e5; color: white; border: none; transition: all 0.2s; }
.btn-pay:hover { background: #4338ca; transform: translateY(-1px); box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); }

#step-1 { max-width: 600px; margin: 0 auto; }
#student_id { font-size: 16px !important; font-weight: 700; letter-spacing: 0.05em; color: #1e293b; padding-left: 0 !important; }
#lookup-form-content .input-group-text { padding-right: 0.25rem; }
#student_id::placeholder { font-size: 1.1rem; font-weight: 500; letter-spacing: 0; opacity: 0.4; }

.animate-in {
    animation: slideUp 0.4s ease-out;
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}