/* ==========================================================
   Reseller Hat Checkout Premium Payment UI
   Version: 1.3
========================================================== */

.mcw-payment-ui-container {
    max-width: 820px;
    margin: 40px auto;
    background: #ffffff;
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    box-shadow: 0 10px 25px rgba(0, 0, 0, .05), 0 20px 60px rgba(0, 0, 0, .08);
}

/* Header */
.mcw-header-success {
    background: linear-gradient(135deg, #16a34a, #22c55e);
    color: #fff;
    padding: 45px 30px;
    text-align: center;
    position: relative;
}

.mcw-header-success::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -30px;
    height: 60px;
    background: #fff;
    border-radius: 50% 50% 0 0;
}

.mcw-header-success h2 {
    margin: 0;
    font-size: 30px;
    font-weight: 700;
}

/* Success Icon */
.mcw-icon-check {
    width: 86px;
    height: 86px;
    margin: 0 auto 22px;
    border-radius: 50%;
    background: #fff;
    color: #16a34a;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 42px;
    font-weight: 700;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .18);
    animation: mcwPop .45s ease;
}

@keyframes mcwPop {
    0% { transform: scale(.5); opacity: 0; }
    70% { transform: scale(1.08); }
    100% { transform: scale(1); opacity: 1; }
}

/* Status Bar & Badges */
.mcw-status-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 28px 30px;
    background: #fafafa;
    border-bottom: 1px solid #ececec;
}

.mcw-status-label { font-size: 15px; color: #374151; font-weight: 600; }

.mcw-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
}

.mcw-status-badge::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}

.mcw-status-pending { color: #a16207; background: #fef3c7; }
.mcw-status-approved { color: #166534; background: #dcfce7; }
.mcw-status-rejected { color: #991b1b; background: #fee2e2; }

/* Summary Details */
.mcw-summary-details { padding: 32px; }
.mcw-summary-box {
    margin-top: 25px;
    background: #f9fafb;
    border: 1px solid #ececec;
    border-radius: 16px;
    overflow: hidden;
}

.mcw-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #ececec;
}

.mcw-summary-row:last-child { border-bottom: none; }
.mcw-summary-label { color: #6b7280; font-size: 14px; }
.mcw-summary-value { color: #111827; font-size: 15px; font-weight: 600; }

/* Notice Box */
.mcw-notice {
    margin-top: 24px;
    padding: 18px 20px;
    background: #eff6ff;
    border-left: 4px solid #2563eb;
    border-radius: 12px;
    color: #1e3a8a;
    font-size: 14px;
    line-height: 1.8;
}

/* Action Buttons */
.mcw-action-buttons { display: flex; gap: 18px; padding: 0 30px 35px; }

.mcw-btn-primary, .mcw-btn-secondary {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    border-radius: 12px;
    text-decoration: none !important;
    font-weight: 700;
    transition: all .25s ease;
}

.mcw-btn-primary { background: linear-gradient(135deg, #16a34a, #22c55e); color: #fff; }
.mcw-btn-secondary { background: #f3f4f6; color: #111827; border: 1px solid #e5e7eb; }

/* Responsive */
@media (max-width: 768px) {
    .mcw-payment-ui-container { margin: 18px 12px; }
    .mcw-status-bar { flex-direction: column; align-items: flex-start; gap: 12px; }
    .mcw-action-buttons { flex-direction: column; }
    .mcw-btn-primary, .mcw-btn-secondary { width: 100%; }
}
.mcw-payment-card {
	margin-top:20px;
	padding:20px;
	background:#ffffff;
	border:1px solid #e5e5e5;
	border-radius:12px;
	box-shadow:0 5px 15px rgba(0,0,0,0.05);
}

.mcw-payment-card h3 {
	margin-bottom:10px;
	font-size:20px;
}

.mcw-payment-card input[type="file"] {
	width:100%;
	padding:10px;
	border:1px solid #ddd;
	border-radius:8px;
}

.mcw-payment-card button {
	margin-top:15px;
	width:100%;
	padding:12px;
	border-radius:8px;
	font-weight:600;
}