.payment-step5-visuals{display:grid;gap:24px;margin-bottom:24px}.legacy-payment-totals{display:none!important}
.payment-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.payment-kpi{position:relative;overflow:hidden;min-height:142px;padding:20px;border:1px solid #e7eaf0;border-radius:14px;background:#fff;box-shadow:0 8px 25px rgba(10,31,68,.06)}.payment-kpi:before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:#3563e9}.payment-kpi.paid:before{background:#12b76a}.payment-kpi.pending:before{background:#f79009}.payment-kpi.progress:before{background:#7a5af8}.payment-kpi>i{display:grid;width:34px;height:34px;place-items:center;margin-bottom:14px;border-radius:10px;background:#eef4ff;color:#3563e9;font-style:normal;font-weight:800}.payment-kpi.paid>i{background:#e8f8f0;color:#12b76a}.payment-kpi.pending>i{background:#fff4e5;color:#f79009}.payment-kpi.progress>i{background:#f2efff;color:#7a5af8}.payment-kpi small,.payment-kpi span{display:block;color:#667085;font-size:12px}.payment-kpi strong{display:block;margin:5px 0;font-size:24px;color:#0a1f44}.payment-progress-card{display:grid;grid-template-columns:1fr auto;gap:8px;padding:20px 22px;border:1px solid #e7eaf0;border-radius:14px;background:#fff}.payment-progress-card span,.payment-progress-card strong small{display:block;color:#667085;font-size:12px;font-weight:500}.payment-progress-card>strong{font-size:20px;color:#3563e9;text-align:right}.payment-progress-track{grid-column:1/-1;height:10px;overflow:hidden;border-radius:999px;background:#eef1f6}.payment-progress-track i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#3563e9,#12b76a);transition:width .3s}
.payment-smart-alert{display:flex;align-items:center;gap:13px;padding:15px 18px;border:1px solid;border-radius:14px}.payment-smart-alert>i{display:grid;width:31px;height:31px;place-items:center;border-radius:50%;font-style:normal;font-weight:900}.payment-smart-alert b,.payment-smart-alert span{display:block}.payment-smart-alert span{margin-top:2px;font-size:12px}.payment-smart-alert.success{background:#ecfdf3;border-color:#abefc6;color:#067647}.payment-smart-alert.warning{background:#fffaeb;border-color:#fedf89;color:#b54708}.payment-smart-alert.danger{background:#fef3f2;border-color:#fecdca;color:#b42318}
.payment-analytics{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}.payment-analytics>div{display:grid;grid-template-columns:28px 1fr;align-items:center;padding:14px;border:1px solid #e7eaf0;border-radius:12px;background:#fff}.payment-analytics i{grid-row:1/3;display:grid;width:24px;height:24px;place-items:center;border-radius:7px;background:#f2f4f7;color:#3563e9;font-style:normal}.payment-analytics span{color:#667085;font-size:10px}.payment-analytics b{font-size:13px;color:#0a1f44}
.premium-payment-history,.premium-payment-form,.payment-approval-card{padding:24px;border:1px solid #e7eaf0;border-radius:14px;background:#fff}.payment-section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:18px}.payment-section-head h3{margin:0;color:#0a1f44;font-size:18px}.payment-section-head p,.payment-form-subtitle{margin:5px 0 0;color:#667085;font-size:12px}.payment-history-tools{display:flex;gap:9px}.payment-history-tools input,.payment-history-tools select{min-width:150px;padding:9px 11px;border:1px solid #d7dce5;border-radius:9px;background:#fff}
.payment-register-table{overflow:auto;border:1px solid #e7eaf0;border-radius:12px}.payment-register-table table{width:100%;border-collapse:collapse}.payment-register-table th{position:sticky;top:0;z-index:1;padding:12px 14px;background:#f8fafc;color:#667085;font-size:11px;text-align:left}.payment-register-table td{height:54px;padding:10px 14px;border-top:1px solid #edf0f4;font-size:12px}.payment-register-table tbody tr:hover{background:#f8fbff}.payment-pv{display:inline-flex;padding:5px 8px;border-radius:7px;background:#eef4ff;color:#3563e9;font-weight:800}.payment-method{display:flex;align-items:center;gap:8px}.payment-method>i{display:grid;width:28px;height:28px;place-items:center;border-radius:8px;background:#f2f4f7;font-style:normal}.payment-method small{display:block;color:#667085}.receipt-chip{display:inline-flex;padding:6px 9px;border-radius:8px;background:#f2f6ff;color:#3563e9;text-decoration:none;font-weight:700}.receipt-missing{color:#f04438}.premium-payment-status{display:inline-flex;padding:6px 9px;border-radius:999px;background:#f2f4f7;color:#667085;font-size:11px;font-weight:800}.premium-payment-status.approved{background:#e8f8f0;color:#087443}.premium-payment-status.pending-approval{background:#fff4e5;color:#b54708}.premium-payment-status.rejected{background:#feeceb;color:#b42318}.payment-pagination{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-top:12px}.payment-pagination span{margin-right:auto;color:#667085;font-size:12px}.payment-pagination button{padding:7px 11px}.payment-timeline{display:none}.payment-empty{display:grid;place-items:center;padding:34px;color:#667085;text-align:center}.payment-empty i{display:grid;width:46px;height:46px;place-items:center;margin-bottom:9px;border-radius:50%;background:#eef4ff;color:#3563e9;font-style:normal;font-size:22px}.payment-empty b,.payment-empty span{display:block}
.premium-payment-form{margin-top:24px}.premium-payment-form>hr,.premium-payment-form>.approved-payment-register{display:none}.premium-payment-form .payment-entry-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.premium-payment-form .field label{font-size:12px;font-weight:700;color:#344054}.premium-payment-form input{border:1px solid #d7dce5;border-radius:10px;background:#fff}.create-account-outline{float:right;margin-top:-46px;background:#fff!important;color:#3563e9!important;border:1px solid #b9c9fa!important}.premium-payment-form [data-submit-payment]{width:100%;margin-top:18px;padding:14px;font-size:14px}.premium-upload-zone{display:grid;place-items:center;min-height:126px;padding:15px;border:1.5px dashed #b9c9fa;border-radius:12px;background:#f8faff;text-align:center}.premium-upload-zone>i{font-style:normal;font-size:23px;color:#3563e9}.premium-upload-zone>b,.premium-upload-zone>small{display:block}.premium-upload-zone>small{color:#667085;font-size:10px}.premium-upload-zone input{max-width:100%;border:0;background:transparent;font-size:11px}
.payment-approval-card{margin-top:24px}.approval-timeline{display:grid;grid-template-columns:repeat(4,1fr)}.approval-timeline>div{position:relative;display:flex;gap:9px;padding-right:14px}.approval-timeline>div:after{content:"";position:absolute;top:14px;left:30px;right:0;height:2px;background:#e7eaf0}.approval-timeline>div:last-child:after{display:none}.approval-timeline i{position:relative;z-index:1;display:grid;width:28px;height:28px;flex:0 0 28px;place-items:center;border-radius:50%;background:#f2f4f7;color:#98a2b3;font-style:normal}.approval-timeline .complete i{background:#e8f8f0;color:#087443}.approval-timeline .current i{background:#eef4ff;color:#3563e9}.approval-timeline .rejected i{background:#feeceb;color:#b42318}.approval-timeline b,.approval-timeline small{display:block;font-size:11px}.approval-timeline small{margin-top:3px;color:#667085}
.payment-sidebar-block{margin:-1px -1px 16px;padding:16px;border:1px solid #d6e0ff;border-radius:12px;background:linear-gradient(145deg,#f7f9ff,#fff)}.payment-sidebar-block h4{margin:0 0 11px;color:#0a1f44}.payment-sidebar-block>div{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-top:1px solid #edf0f5;font-size:11px}.payment-sidebar-block span{color:#667085}.payment-sidebar-block b{color:#0a1f44;text-align:right}
@media(max-width:1100px){.payment-kpis{grid-template-columns:repeat(2,1fr)}.payment-analytics{grid-template-columns:repeat(3,1fr)}.approval-timeline{grid-template-columns:1fr;gap:14px}.approval-timeline>div:after{top:28px;bottom:-14px;left:13px;width:2px;height:auto}}
@media(max-width:700px){.payment-kpis,.payment-analytics,.premium-payment-form .payment-entry-grid{grid-template-columns:1fr}.payment-progress-card{grid-template-columns:1fr}.payment-progress-card>strong{text-align:left}.payment-section-head{display:block}.payment-history-tools{display:grid;margin-top:13px}.payment-register-table{display:none}.payment-timeline{display:block}.payment-timeline h4{margin:20px 0}.payment-timeline-item{position:relative;display:grid;grid-template-columns:18px 80px 1fr;gap:9px;padding-bottom:18px}.payment-timeline-item>i{width:10px;height:10px;margin-top:5px;border-radius:50%;background:#98a2b3;box-shadow:0 0 0 4px #f2f4f7}.payment-timeline-item:after{content:"";position:absolute;left:4px;top:18px;bottom:3px;width:2px;background:#e7eaf0}.payment-timeline-item.approved>i{background:#12b76a}.payment-timeline-item.pending-approval>i{background:#f79009}.payment-timeline-item.rejected>i{background:#f04438}.payment-timeline-item time{color:#667085;font-size:11px}.payment-timeline-item div>*{display:block;margin-bottom:4px}.create-account-outline{float:none;margin:12px 0}.premium-payment-history,.premium-payment-form,.payment-approval-card{padding:16px}.payment-kpi{min-height:126px}}