/**
 * Frontend styles - Modern Design System
 *
 * @package ManualPay_Proof
 */

/* ============================================
   CSS Custom Properties - Design System
   ============================================ */

:root {
	/* Spacing Scale (8px multiples) */
	--mpp-space-xs: 0.5rem;   /* 8px */
	--mpp-space-sm: 1rem;     /* 16px */
	--mpp-space-md: 1.5rem;   /* 24px */
	--mpp-space-lg: 2rem;     /* 32px */
	--mpp-space-xl: 2.5rem;   /* 40px */
	--mpp-space-2xl: 3rem;    /* 48px */

	/* Colors - Light Mode */
	--mpp-primary: #0073aa;
	--mpp-primary-dark: #005a87;
	--mpp-primary-light: #e6f3ff;
	
	/* State Colors */
	--mpp-success: #10b981;
	--mpp-success-bg: #d1fae5;
	--mpp-success-text: #065f46;
	--mpp-success-border: #6ee7b7;
	
	--mpp-warning: #f59e0b;
	--mpp-warning-bg: #fef3c7;
	--mpp-warning-text: #92400e;
	--mpp-warning-border: #fcd34d;
	
	--mpp-error: #ef4444;
	--mpp-error-bg: #fee2e2;
	--mpp-error-text: #991b1b;
	--mpp-error-border: #fca5a5;
	
	--mpp-info: #3b82f6;
	--mpp-info-bg: #dbeafe;
	--mpp-info-text: #1e40af;
	--mpp-info-border: #93c5fd;

	/* Neutral Colors */
	--mpp-text: #1f2937;
	--mpp-text-light: #6b7280;
	--mpp-text-lighter: #9ca3af;
	--mpp-border: #e5e7eb;
	--mpp-border-light: #f3f4f6;
	--mpp-bg: #ffffff;
	--mpp-bg-secondary: #f9fafb;
	--mpp-bg-tertiary: #f3f4f6;

	/* Shadows */
	--mpp-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
	--mpp-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	--mpp-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
	--mpp-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);

	/* Border Radius */
	--mpp-radius: 0.5rem;  /* 8px */
	--mpp-radius-sm: 0.375rem;  /* 6px */
	--mpp-radius-lg: 0.75rem;  /* 12px */

	/* Typography */
	--mpp-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--mpp-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
	
	/* Layout */
	--mpp-max-width: 48rem;  /* 768px */
	--mpp-container-padding: var(--mpp-space-md);
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
	:root {
		/* Primary Colors */
		--mpp-primary: #60a5fa;
		--mpp-primary-dark: #3b82f6;
		--mpp-primary-light: #1e3a8a;
		
		/* State Colors - Dark Mode */
		--mpp-success: #34d399;
		--mpp-success-bg: #064e3b;
		--mpp-success-text: #a7f3d0;
		--mpp-success-border: #059669;
		
		--mpp-warning: #fbbf24;
		--mpp-warning-bg: #78350f;
		--mpp-warning-text: #fde68a;
		--mpp-warning-border: #d97706;
		
		--mpp-error: #f87171;
		--mpp-error-bg: #7f1d1d;
		--mpp-error-text: #fecaca;
		--mpp-error-border: #dc2626;
		
		--mpp-info: #60a5fa;
		--mpp-info-bg: #1e3a8a;
		--mpp-info-text: #bfdbfe;
		--mpp-info-border: #3b82f6;

		/* Neutral Colors - Dark Mode */
		--mpp-text: #f9fafb;
		--mpp-text-light: #d1d5db;
		--mpp-text-lighter: #9ca3af;
		--mpp-border: #374151;
		--mpp-border-light: #4b5563;
		--mpp-bg: #111827;
		--mpp-bg-secondary: #1f2937;
		--mpp-bg-tertiary: #374151;

		/* Shadows - Dark Mode */
		--mpp-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
		--mpp-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
		--mpp-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
		--mpp-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);
	}
}

/* ============================================
   Base Typography
   ============================================ */

.manualpay-proof-instructions,
.mpp-status-card,
.manualpay-proof-upload {
	font-family: var(--mpp-font-family);
	font-size: 1rem;
	line-height: 1.6;
	color: var(--mpp-text);
}

/* ============================================
   Card Components
   ============================================ */

.manualpay-proof-instructions,
.mpp-status-card,
.manualpay-proof-upload {
	background: var(--mpp-bg);
	border: 1px solid var(--mpp-border);
	border-radius: var(--mpp-radius);
	padding: var(--mpp-space-lg);
	margin: var(--mpp-space-md) auto;
	box-shadow: var(--mpp-shadow);
	max-width: var(--mpp-max-width);
	width: 100%;
	box-sizing: border-box;
}

/* Card Headings */
.manualpay-proof-instructions h2,
.mpp-status-card h2,
.manualpay-proof-upload h2,
.mpp-upload-section h3 {
	margin: 0 0 var(--mpp-space-md) 0;
	color: var(--mpp-text);
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1.3;
}

.manualpay-proof-instructions h3 {
	margin: var(--mpp-space-lg) 0 var(--mpp-space-sm) 0;
	color: var(--mpp-text);
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.3;
}

/* ============================================
   Payment Instructions
   ============================================ */

.manualpay-instructions-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--mpp-space-lg);
	margin-top: var(--mpp-space-md);
}

@media (min-width: 768px) {
	.manualpay-instructions-grid {
		grid-template-columns: 2fr 1fr;
	}
}

.manualpay-instructions-main {
	display: flex;
	flex-direction: column;
	gap: var(--mpp-space-md);
}

.manualpay-instructions-sidebar {
	display: flex;
	flex-direction: column;
}

/* ============================================
   Payment Instructions (continued)
   ============================================ */

.manualpay-payment-method {
	margin-bottom: var(--mpp-space-md);
	padding: var(--mpp-space-md);
	background: var(--mpp-bg-secondary);
	border-radius: var(--mpp-radius);
	border: 1px solid var(--mpp-border);
}

.manualpay-payment-method strong {
	color: var(--mpp-text);
	margin-right: var(--mpp-space-xs);
	font-weight: 600;
}

.manualpay-method-fields {
	margin: var(--mpp-space-lg) 0;
}

.manualpay-fields-table {
	width: 100%;
	border-collapse: collapse;
	margin-top: var(--mpp-space-md);
	border: 1px solid var(--mpp-border);
	border-radius: var(--mpp-radius);
	overflow: hidden;
}

.manualpay-fields-table th {
	text-align: left;
	padding: var(--mpp-space-sm);
	background: var(--mpp-bg-secondary);
	border-bottom: 1px solid var(--mpp-border);
	font-weight: 600;
	color: var(--mpp-text);
	width: 40%;
}

.manualpay-fields-table td {
	padding: var(--mpp-space-sm);
	border-bottom: 1px solid var(--mpp-border);
	background: var(--mpp-bg);
}

.manualpay-fields-table tr:last-child td {
	border-bottom: none;
}

.manualpay-fields-table .field-value {
	font-family: var(--mpp-font-mono);
	font-size: 0.875rem;
	margin-right: var(--mpp-space-xs);
	color: var(--mpp-text);
}

.mpp-copy-field {
	margin-left: var(--mpp-space-xs);
	padding: 0.25rem 0.5rem;
	font-size: 0.75rem;
	background: var(--mpp-primary);
	color: #ffffff;
	border: none;
	border-radius: var(--mpp-radius-sm);
	cursor: pointer;
	transition: all 0.2s ease;
	font-weight: 500;
	white-space: nowrap;
	flex-shrink: 0;
}

.mpp-copy-field:hover {
	background: var(--mpp-primary-dark);
	transform: translateY(-1px);
	box-shadow: var(--mpp-shadow-sm);
}

.mpp-copy-field:focus {
	outline: 2px solid var(--mpp-primary);
	outline-offset: 2px;
}

.mpp-copy-field.copied {
	background: var(--mpp-success);
}

/* Improve table cell layout for copy buttons */
.mpp-fields-table td {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--mpp-space-xs);
}

.mpp-fields-table td .field-value {
	flex: 1;
	min-width: 0;
}

.manualpay-qr-code {
	margin: var(--mpp-space-lg) 0;
	text-align: center;
}

.manualpay-qr-code {
	position: sticky;
	top: var(--mpp-space-md);
}

.manualpay-qr-code img {
	border: 1px solid var(--mpp-border);
	border-radius: var(--mpp-radius);
	padding: var(--mpp-space-sm);
	background: var(--mpp-bg);
	max-width: 100%;
	height: auto;
	box-shadow: var(--mpp-shadow-sm);
}

.manualpay-instructions-content {
	margin: var(--mpp-space-lg) 0;
	padding: var(--mpp-space-md);
	background: var(--mpp-info-bg);
	border: 1px solid var(--mpp-info-border);
	border-left: 4px solid var(--mpp-info);
	border-radius: var(--mpp-radius);
	line-height: 1.6;
	color: var(--mpp-info-text);
}

/* ============================================
   Countdown Timer Badge
   ============================================ */

.manualpay-countdown,
.mpp-countdown-wrapper {
	margin: 0;
	padding: var(--mpp-space-md);
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	border-radius: var(--mpp-radius);
	color: #ffffff;
	text-align: center;
	box-shadow: var(--mpp-shadow-md);
}

.countdown-label,
.mpp-countdown-label {
	margin-bottom: var(--mpp-space-sm);
	font-size: 0.875rem;
	font-weight: 500;
	opacity: 0.95;
}

.countdown-timer,
.mpp-countdown-timer {
	font-size: 2rem;
	font-weight: 700;
	font-family: var(--mpp-font-mono);
	letter-spacing: 0.125rem;
	line-height: 1.2;
}

.countdown-timer span,
.mpp-countdown-timer span {
	display: inline-block;
	min-width: 3rem;
	padding: var(--mpp-space-sm);
	background: rgba(255, 255, 255, 0.2);
	border-radius: var(--mpp-radius-sm);
	margin: 0 var(--mpp-space-xs);
	backdrop-filter: blur(4px);
}

.countdown-timer.expired,
.mpp-countdown-timer.expired {
	color: #ff6b6b;
}

/* Responsive timer adjustments */
@media (max-width: 600px) {
	.mpp-countdown-wrapper {
		padding: var(--mpp-space-sm);
	}
	
	.countdown-timer,
	.mpp-countdown-timer {
		font-size: 1.5rem;
		letter-spacing: 0.0625rem;
	}
	
	.countdown-timer span,
	.mpp-countdown-timer span {
		min-width: 2.5rem;
		padding: var(--mpp-space-xs);
		margin: 0 0.25rem;
	}
	
	.countdown-label,
	.mpp-countdown-label {
		font-size: 0.8125rem;
		margin-bottom: var(--mpp-space-xs);
	}
}

/* ============================================
   Status Cards
   ============================================ */

/* ============================================
   Payment Pending - Modern Responsive Layout
   ============================================ */

/* Centered wrapper for payment pending page */
.mpp-pending-wrap {
	max-width: 920px;
	margin: 0 auto;
	padding: var(--mpp-space-md);
	box-sizing: border-box;
}

.mpp-pending-card {
	background: var(--mpp-bg);
	border-radius: var(--mpp-radius-lg);
	box-shadow: var(--mpp-shadow-md);
	padding: var(--mpp-space-xl);
	position: relative;
	box-sizing: border-box;
}

.mpp-status-card {
	position: relative;
}

/* Title */
.mpp-title {
	margin: 0 0 var(--mpp-space-lg) 0;
	color: var(--mpp-text);
	font-size: 1.75rem;
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
}

/* Vertical stacked sections */
.mpp-section {
	margin-bottom: var(--mpp-space-xl);
	width: 100%;
}

.mpp-section:last-child {
	margin-bottom: 0;
}

/* Section 1: Timer - Centered */
.mpp-section-timer {
	display: flex;
	justify-content: center;
	align-items: center;
}

.mpp-countdown-wrapper {
	width: 100%;
	max-width: 400px;
	margin: 0 auto;
	text-align: center;
}

.mpp-countdown-label {
	text-align: center;
}

/* Section 2: Payment Method - Centered */
.mpp-section-method {
	text-align: center;
}

.mpp-payment-method-label {
	padding: var(--mpp-space-sm) var(--mpp-space-md);
	background: var(--mpp-bg-secondary);
	border-radius: var(--mpp-radius);
	border: 1px solid var(--mpp-border);
	display: inline-block;
	max-width: 100%;
}

.mpp-payment-method-label strong {
	color: var(--mpp-text);
	margin-right: var(--mpp-space-xs);
	font-weight: 600;
}

/* Section 3: Payment Details - Centered container, left-aligned table */
.mpp-section-details {
	text-align: center;
}

.mpp-section-heading {
	margin: 0 0 var(--mpp-space-md) 0;
	color: var(--mpp-text);
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.4;
	text-align: center;
}

.mpp-fields-table {
	margin: 0 auto;
	width: 100%;
	max-width: 600px;
}

.mpp-fields-table {
	width: 100%;
	border-collapse: collapse;
	margin: 0;
	border: 1px solid var(--mpp-border);
	border-radius: var(--mpp-radius);
	overflow: hidden;
	background: var(--mpp-bg);
}

.mpp-fields-table th {
	text-align: left;
	padding: var(--mpp-space-sm) var(--mpp-space-md);
	background: var(--mpp-bg-secondary);
	border-bottom: 1px solid var(--mpp-border);
	font-weight: 500;
	color: var(--mpp-text);
	width: 35%;
	font-size: 0.875rem;
	line-height: 1.5;
}

.mpp-fields-table td {
	padding: var(--mpp-space-sm) var(--mpp-space-md);
	border-bottom: 1px solid var(--mpp-border);
	background: var(--mpp-bg);
	word-wrap: break-word;
	overflow-wrap: break-word;
	line-height: 1.5;
}

.mpp-fields-table tr:last-child th,
.mpp-fields-table tr:last-child td {
	border-bottom: none;
}

.mpp-fields-table .field-value {
	font-family: var(--mpp-font-mono);
	font-size: 0.875rem;
	margin-right: var(--mpp-space-xs);
	color: var(--mpp-text);
	word-break: break-word;
	display: inline-block;
	max-width: 100%;
}

/* Section: Instructions - Centered container */
.mpp-section-instructions {
	text-align: center;
}

.mpp-instructions-content {
	margin: 0 auto;
	padding: var(--mpp-space-md);
	background: var(--mpp-info-bg);
	border: 1px solid var(--mpp-info-border);
	border-left: 4px solid var(--mpp-info);
	border-radius: var(--mpp-radius);
	line-height: 1.6;
	color: var(--mpp-info-text);
	max-width: 600px;
	text-align: left;
}

.mpp-instructions-content h3 {
	margin-top: 0;
	margin-bottom: var(--mpp-space-sm);
	color: var(--mpp-info-text);
	font-size: 1rem;
	font-weight: 600;
}

/* Section: QR Code - Centered */
.mpp-section-qr {
	text-align: center;
}

.mpp-qr-code {
	margin: 0;
	text-align: center;
}

.mpp-qr-code img {
	border: 1px solid var(--mpp-border);
	border-radius: var(--mpp-radius);
	padding: var(--mpp-space-sm);
	background: var(--mpp-bg);
	max-width: 100%;
	height: auto;
	box-shadow: var(--mpp-shadow-sm);
}

/* Section 4: Upload - Centered container */
.mpp-section-upload {
	text-align: center;
}

.mpp-section-upload .mpp-upload-section {
	margin: 0 auto;
	max-width: 600px;
	text-align: left;
}

/* Section 5: Success - Centered */
.mpp-section-success {
	text-align: center;
}

.mpp-success-message {
	padding: var(--mpp-space-md);
	background: var(--mpp-success-bg, #d4edda);
	border: 1px solid var(--mpp-success-border, #c3e6cb);
	border-radius: var(--mpp-radius);
	margin: 0 auto;
	max-width: 600px;
}

.mpp-success-message p {
	margin: 0 0 var(--mpp-space-md) 0;
	color: var(--mpp-success-text, #155724);
	font-weight: 500;
}

.mpp-btn-print {
	display: inline-block;
	padding: 12px 24px;
	background-color: #0073aa;
	color: #fff;
	text-decoration: none;
	border-radius: 4px;
	font-weight: 500;
	transition: background-color 0.2s;
}

.mpp-btn-print:hover {
	background-color: #005a87;
	color: #fff;
	text-decoration: none;
}

.mpp-status-message {
	margin: 0 0 var(--mpp-space-md) 0;
	color: var(--mpp-text);
	line-height: 1.6;
}

/* Status Badges */
.mpp-status-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--mpp-space-xs);
	padding: var(--mpp-space-xs) var(--mpp-space-sm);
	border-radius: var(--mpp-radius-sm);
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.mpp-status-badge .dashicons {
	font-size: 1rem;
	width: 1rem;
	height: 1rem;
	line-height: 1;
}

.mpp-status-badge.pending,
.mpp-badge-reviewing {
	background: var(--mpp-warning-bg);
	color: var(--mpp-warning-text);
	border: 1px solid var(--mpp-warning-border);
}

.mpp-status-badge.proof {
	background: var(--mpp-info-bg);
	color: var(--mpp-info-text);
	border: 1px solid var(--mpp-info-border);
}

.mpp-status-badge.approved {
	background: var(--mpp-success-bg);
	color: var(--mpp-success-text);
	border: 1px solid var(--mpp-success-border);
}

.mpp-status-badge.rejected,
.mpp-badge-rejected {
	background: var(--mpp-error-bg);
	color: var(--mpp-error-text);
	border: 1px solid var(--mpp-error-border);
}

.mpp-status-badge.expired,
.mpp-badge-expired {
	background: var(--mpp-error-bg);
	color: var(--mpp-error-text);
	border: 1px solid var(--mpp-error-border);
}

/* Status-specific card styling */
.mpp-status-pending {
	border-left: 4px solid var(--mpp-warning);
}

/* Ensure orange border doesn't break on mobile */
@media (max-width: 600px) {
	.mpp-pending-card {
		border-left: 4px solid var(--mpp-warning);
	}
	
	.mpp-status-pending {
		border-left: none;
	}
}

.mpp-status-proof {
	border-left: 4px solid var(--mpp-info);
}

.mpp-status-rejected {
	border-left: 4px solid var(--mpp-error);
}

.mpp-status-expired {
	border-left: 4px solid var(--mpp-error);
}

/* ============================================
   Proof Preview
   ============================================ */

.mpp-proof-preview {
	margin-top: var(--mpp-space-lg);
}

.mpp-proof-preview h3 {
	margin: 0 0 var(--mpp-space-md) 0;
	color: var(--mpp-text);
	font-size: 1.125rem;
	font-weight: 600;
}

.mpp-proof-image {
	margin: var(--mpp-space-md) 0;
	border-radius: var(--mpp-radius);
	overflow: hidden;
	border: 1px solid var(--mpp-border);
	box-shadow: var(--mpp-shadow-sm);
}

.mpp-proof-image img {
	display: block;
	width: 100%;
	height: auto;
}

.mpp-proof-file {
	margin: var(--mpp-space-md) 0;
	border-radius: var(--mpp-radius);
	overflow: hidden;
	border: 1px solid var(--mpp-border);
	box-shadow: var(--mpp-shadow-sm);
}

.mpp-proof-file iframe {
	display: block;
	width: 100%;
	height: 500px;
	border: none;
}

.mpp-proof-actions {
	margin: var(--mpp-space-md) 0;
	display: flex;
	gap: var(--mpp-space-sm);
}

.mpp-proof-actions .button {
	padding: var(--mpp-space-sm) var(--mpp-space-md);
	border-radius: var(--mpp-radius);
	font-weight: 500;
	text-decoration: none;
	transition: all 0.2s ease;
}

.mpp-proof-actions .button:hover {
	transform: translateY(-1px);
	box-shadow: var(--mpp-shadow-sm);
}

.mpp-proof-actions .button:focus {
	outline: 2px solid var(--mpp-primary);
	outline-offset: 2px;
}

.mpp-proof-date {
	margin: var(--mpp-space-sm) 0 0 0;
	color: var(--mpp-text-light);
	font-size: 0.875rem;
}

/* ============================================
   Rejection Note
   ============================================ */

.mpp-rejection-note {
	margin-bottom: var(--mpp-space-lg);
	padding: var(--mpp-space-md);
	background: var(--mpp-error-bg);
	border: 1px solid var(--mpp-error-border);
	border-left: 4px solid var(--mpp-error);
	border-radius: var(--mpp-radius);
}

.mpp-rejection-note h3 {
	margin: 0 0 var(--mpp-space-sm) 0;
	color: var(--mpp-error-text);
	font-size: 1rem;
	font-weight: 600;
}

.mpp-note-content {
	color: var(--mpp-error-text);
	line-height: 1.6;
}

.mpp-previous-proof {
	margin-bottom: var(--mpp-space-lg);
	padding: var(--mpp-space-md);
	background: var(--mpp-bg-secondary);
	border: 1px solid var(--mpp-border);
	border-radius: var(--mpp-radius);
}

.mpp-previous-proof h3 {
	margin: 0 0 var(--mpp-space-sm) 0;
	color: var(--mpp-text);
	font-size: 1rem;
	font-weight: 600;
}

.mpp-reupload-section {
	margin-top: var(--mpp-space-lg);
	padding-top: var(--mpp-space-lg);
	border-top: 1px solid var(--mpp-border);
}

.mpp-reupload-section h3 {
	margin: 0 0 var(--mpp-space-sm) 0;
	color: var(--mpp-text);
	font-size: 1rem;
	font-weight: 600;
}

.mpp-expired-message {
	padding: var(--mpp-space-md);
	background: var(--mpp-error-bg);
	border: 1px solid var(--mpp-error-border);
	border-left: 4px solid var(--mpp-error);
	border-radius: var(--mpp-radius);
}

.mpp-expired-message .mpp-status-message {
	color: var(--mpp-error-text);
}

.mpp-recreate-hint {
	margin: var(--mpp-space-md) 0 0 0;
	padding: var(--mpp-space-md);
	background: var(--mpp-bg-secondary);
	border: 1px solid var(--mpp-border);
	border-radius: var(--mpp-radius);
	color: var(--mpp-text);
}

.mpp-recreate-hint strong {
	color: var(--mpp-text);
	font-weight: 600;
}

/* ============================================
   Proof Upload
   ============================================ */

.mpp-upload-section {
	margin: 0;
	padding: var(--mpp-space-lg);
	background: var(--mpp-bg-secondary);
	border: 1px solid var(--mpp-border);
	border-radius: var(--mpp-radius);
}

.mpp-upload-section h3 {
	margin: 0 0 var(--mpp-space-sm) 0;
	color: var(--mpp-text);
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.3;
}

.mpp-upload-description {
	color: var(--mpp-text-light);
	margin: 0 0 var(--mpp-space-md) 0;
	font-size: 0.875rem;
	line-height: 1.6;
}

.mpp-upload-form {
	margin: 0;
}

/* Upload Dropzone */
.mpp-upload-area,
.upload-area {
	border: 2px dashed var(--mpp-border);
	border-radius: var(--mpp-radius);
	padding: var(--mpp-space-md) var(--mpp-space-sm);
	text-align: center;
	background: var(--mpp-bg);
	transition: all 0.3s ease;
	cursor: pointer;
	margin-bottom: var(--mpp-space-md);
	position: relative;
	min-height: 120px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
}

.mpp-upload-area:hover,
.upload-area:hover {
	border-color: var(--mpp-primary);
	background: var(--mpp-primary-light);
	box-shadow: var(--mpp-shadow);
}

.mpp-upload-area.dragover,
.upload-area.dragover {
	border-color: var(--mpp-primary);
	background: var(--mpp-primary-light);
	transform: scale(1.01);
	box-shadow: var(--mpp-shadow-md);
}

.mpp-upload-area:focus-within,
.upload-area:focus-within {
	outline: 2px solid var(--mpp-primary);
	outline-offset: 2px;
}

.mpp-upload-icon,
.upload-icon {
	font-size: 2rem;
	margin-bottom: var(--mpp-space-sm);
	color: var(--mpp-text-light);
}

.mpp-upload-icon svg {
	width: 36px;
	height: 36px;
	stroke: var(--mpp-text-light);
	transition: stroke 0.3s ease;
}

.mpp-upload-area:hover .mpp-upload-icon svg,
.upload-area:hover .upload-icon {
	color: var(--mpp-primary);
	stroke: var(--mpp-primary);
}

.mpp-upload-text,
.upload-text {
	font-size: 0.9375rem;
	color: var(--mpp-text);
	margin: var(--mpp-space-xs) 0;
	font-weight: 500;
}

.mpp-upload-text-small,
.upload-text-small {
	font-size: 0.8125rem;
	color: var(--mpp-text-light);
	margin: 0.25rem 0;
}

/* Buttons */
.mpp-upload-button,
.upload-button,
.button.mpp-upload-submit {
	display: inline-block;
	padding: var(--mpp-space-sm) var(--mpp-space-md);
	background: var(--mpp-primary);
	color: #ffffff;
	border: none;
	border-radius: var(--mpp-radius);
	cursor: pointer;
	font-weight: 600;
	font-size: 1rem;
	transition: all 0.2s ease;
	margin-top: var(--mpp-space-sm);
	text-decoration: none;
	font-family: var(--mpp-font-family);
	text-align: center;
}

.mpp-upload-area label.mpp-upload-button {
	display: inline-block;
	text-align: center;
}

.mpp-upload-button:hover,
.upload-button:hover,
.button.mpp-upload-submit:hover {
	background: var(--mpp-primary-dark);
	transform: translateY(-1px);
	box-shadow: var(--mpp-shadow);
}

.mpp-upload-button:focus,
.upload-button:focus,
.button.mpp-upload-submit:focus {
	outline: 2px solid var(--mpp-primary);
	outline-offset: 2px;
	background: var(--mpp-primary-dark);
}

.mpp-upload-button:active,
.upload-button:active,
.button.mpp-upload-submit:active {
	transform: translateY(0);
}

.mpp-file-name,
.file-name {
	margin-top: var(--mpp-space-sm);
	font-weight: 600;
	color: var(--mpp-success);
	font-size: 0.875rem;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	display: block;
	word-break: break-all;
	padding: 0 var(--mpp-space-sm);
	box-sizing: border-box;
}

/* Upload Progress */
.mpp-upload-progress,
.upload-progress {
	margin: var(--mpp-space-md) 0;
}

.mpp-progress-bar,
.progress-bar {
	width: 100%;
	height: var(--mpp-space-md);
	background: var(--mpp-bg-secondary);
	border-radius: var(--mpp-radius);
	overflow: hidden;
	margin-bottom: var(--mpp-space-sm);
	border: 1px solid var(--mpp-border);
}

.mpp-progress-fill,
.progress-fill {
	height: 100%;
	background: linear-gradient(90deg, var(--mpp-success), #20c997);
	width: 0%;
	transition: width 0.3s ease;
	border-radius: var(--mpp-radius);
}

.mpp-progress-text,
.progress-text {
	text-align: center;
	color: var(--mpp-text);
	font-weight: 600;
	font-size: 0.875rem;
}

/* Upload Messages */
.mpp-upload-message,
.upload-message {
	margin: var(--mpp-space-sm) 0;
	padding: var(--mpp-space-sm);
	border-radius: var(--mpp-radius);
	display: none;
	font-size: 0.875rem;
	line-height: 1.6;
	border: 1px solid;
}

.mpp-upload-message.success,
.upload-message.success {
	background: var(--mpp-success-bg);
	color: var(--mpp-success-text);
	border-color: var(--mpp-success-border);
	display: block;
}

.mpp-upload-message.error,
.upload-message.error {
	background: var(--mpp-error-bg);
	color: var(--mpp-error-text);
	border-color: var(--mpp-error-border);
	display: block;
}

.mpp-upload-message.warning,
.upload-message.warning {
	background: var(--mpp-warning-bg);
	color: var(--mpp-warning-text);
	border-color: var(--mpp-warning-border);
	display: block;
}

/* ============================================
   Responsive Design - Mobile First
   ============================================ */

/* Responsive adjustments - same layout on all screen sizes */
@media (max-width: 899px) {
	.mpp-pending-wrap {
		padding: var(--mpp-space-sm);
	}
	
	.mpp-pending-card {
		padding: var(--mpp-space-lg);
	}
	
	.mpp-title {
		font-size: 1.5rem;
		margin-bottom: var(--mpp-space-md);
	}
	
	.mpp-section {
		margin-bottom: var(--mpp-space-lg);
	}
	
	.mpp-upload-section {
		padding: var(--mpp-space-md);
	}
	
	.mpp-upload-area,
	.upload-area {
		padding: var(--mpp-space-sm) var(--mpp-space-xs);
		min-height: 100px;
	}
	
	.mpp-upload-icon,
	.upload-icon {
		font-size: 1.5rem;
		margin-bottom: var(--mpp-space-xs);
	}

	.mpp-upload-icon svg {
		width: 28px;
		height: 28px;
	}
	
	.mpp-upload-text,
	.upload-text {
		font-size: 0.875rem;
		margin: var(--mpp-space-xs) 0;
	}
	
	.mpp-fields-table th {
		width: 40%;
		font-size: 0.8125rem;
		padding: var(--mpp-space-xs) var(--mpp-space-sm);
	}
	
	.mpp-fields-table td {
		padding: var(--mpp-space-xs) var(--mpp-space-sm);
		font-size: 0.8125rem;
	}
	
	.mpp-fields-table .field-value {
		font-size: 0.8125rem;
	}
	
	.mpp-upload-button,
	.upload-button,
	.button.mpp-upload-submit {
		width: 100%;
		text-align: center;
	}
}

@media (max-width: 600px) {
	.mpp-pending-wrap {
		padding: var(--mpp-space-xs);
	}
	
	.mpp-pending-card {
		padding: var(--mpp-space-md);
		border-radius: var(--mpp-radius);
	}
	
	.mpp-title {
		font-size: 1.25rem;
	}
	
	.mpp-section {
		margin-bottom: var(--mpp-space-md);
	}
	
	.mpp-upload-section {
		padding: var(--mpp-space-sm);
	}
	
	.mpp-upload-area,
	.upload-area {
		padding: var(--mpp-space-xs) var(--mpp-space-xs);
		min-height: 90px;
	}
	
	.mpp-upload-icon,
	.upload-icon {
		font-size: 1.25rem;
		margin-bottom: 0.25rem;
	}

	.mpp-upload-icon svg {
		width: 24px;
		height: 24px;
	}
	
	.mpp-upload-text,
	.upload-text {
		font-size: 0.8125rem;
		margin: 0.25rem 0;
	}
	
	.mpp-fields-table {
		font-size: 0.8125rem;
	}
	
	.mpp-fields-table th {
		width: 45%;
		padding: 0.5rem 0.75rem;
	}
	
	.mpp-fields-table td {
		padding: 0.5rem 0.75rem;
		display: block;
	}
	
	.mpp-fields-table td .field-value {
		display: block;
		margin-bottom: var(--mpp-space-xs);
	}
	
	.mpp-copy-field {
		align-self: flex-start;
	}
}

/* Desktop: 2-Column Layout (for other status views) */
@media (min-width: 768px) {
	.mpp-status-content {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--mpp-space-lg);
		align-items: start;
	}

	.mpp-status-message-wrapper {
		grid-column: 1 / -1;
	}

	.mpp-proof-preview {
		grid-column: 1 / -1;
	}

	.mpp-rejection-note {
		grid-column: 1 / -1;
	}

	.mpp-previous-proof {
		grid-column: 1;
	}

	.mpp-reupload-section {
		grid-column: 2;
	}

	.mpp-expired-message {
		grid-column: 1 / -1;
	}
}

/* Additional responsive adjustments for other views */
@media (max-width: 480px) {
	.manualpay-fields-table {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
}

/* ============================================
   Utility Classes
   ============================================ */

.mpp-status-message-wrapper {
	padding: var(--mpp-space-md);
	background: var(--mpp-info-bg);
	border: 1px solid var(--mpp-info-border);
	border-left: 4px solid var(--mpp-info);
	border-radius: var(--mpp-radius);
	color: var(--mpp-info-text);
}

.mpp-status-message-wrapper .mpp-status-message {
	margin: 0;
	color: var(--mpp-info-text);
}

/* Button Consistency */
.button,
.button-primary,
.button-secondary,
.button-small {
	font-family: var(--mpp-font-family);
	font-size: 1rem;
	line-height: 1.5;
	padding: var(--mpp-space-sm) var(--mpp-space-md);
	border-radius: var(--mpp-radius);
	font-weight: 500;
	transition: all 0.2s ease;
	text-decoration: none;
	display: inline-block;
	cursor: pointer;
	border: 1px solid transparent;
}

.button-primary {
	background: var(--mpp-primary);
	color: #ffffff;
	border-color: var(--mpp-primary);
}

.button-primary:hover {
	background: var(--mpp-primary-dark);
	border-color: var(--mpp-primary-dark);
	transform: translateY(-1px);
	box-shadow: var(--mpp-shadow-sm);
}

.button-secondary {
	background: var(--mpp-bg-secondary);
	color: var(--mpp-text);
	border-color: var(--mpp-border);
}

.button-secondary:hover {
	background: var(--mpp-bg-tertiary);
	border-color: var(--mpp-border-light);
	transform: translateY(-1px);
	box-shadow: var(--mpp-shadow-sm);
}

.button-small {
	padding: var(--mpp-space-xs) var(--mpp-space-sm);
	font-size: 0.875rem;
}

.button:focus,
.button-primary:focus,
.button-secondary:focus {
	outline: 2px solid var(--mpp-primary);
	outline-offset: 2px;
}

/* ============================================
   Payment Form Styles
   ============================================ */

.mpp-payment-form-wrap {
	max-width: 920px;
	margin: 0 auto;
	padding: var(--mpp-space-md);
	box-sizing: border-box;
}

.mpp-payment-form-card {
	background: var(--mpp-bg);
	border-radius: var(--mpp-radius-lg);
	box-shadow: var(--mpp-shadow-md);
	padding: var(--mpp-space-xl);
	position: relative;
	box-sizing: border-box;
}

.mpp-form-title {
	margin: 0 0 var(--mpp-space-lg) 0;
	color: var(--mpp-text);
	font-size: 1.75rem;
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
}

.mpp-payment-form {
	display: flex;
	flex-direction: column;
	gap: var(--mpp-space-lg);
}

.mpp-form-section {
	display: flex;
	flex-direction: column;
	gap: var(--mpp-space-md);
}

.mpp-form-section h3 {
	margin: 0 0 var(--mpp-space-sm) 0;
	color: var(--mpp-text);
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.3;
}

.mpp-amount-display {
	display: flex;
	align-items: baseline;
	gap: var(--mpp-space-xs);
	font-size: 1.5rem;
	font-weight: 600;
	color: var(--mpp-text);
}

.mpp-amount-value {
	font-family: var(--mpp-font-mono);
}

.mpp-currency {
	font-size: 1rem;
	color: var(--mpp-text-light);
}

.mpp-amount-input-group {
	display: flex;
	flex-direction: column;
	gap: var(--mpp-space-xs);
}

.mpp-amount-input-wrapper {
	display: flex;
	align-items: center;
	gap: var(--mpp-space-xs);
	border: 1px solid var(--mpp-border);
	border-radius: var(--mpp-radius);
	padding: var(--mpp-space-sm) var(--mpp-space-md);
	background: var(--mpp-bg);
}

.mpp-currency-symbol {
	font-weight: 600;
	color: var(--mpp-text-light);
}

.mpp-amount-input {
	flex: 1;
	border: none;
	outline: none;
	font-size: 1.125rem;
	font-family: var(--mpp-font-mono);
}

.mpp-amount-range {
	font-size: 0.875rem;
	color: var(--mpp-text-light);
}

.mpp-form-field {
	display: flex;
	flex-direction: column;
	gap: var(--mpp-space-xs);
}

.mpp-form-field label {
	font-weight: 500;
	color: var(--mpp-text);
}

.mpp-form-field .required {
	color: var(--mpp-error);
}

.mpp-input,
.mpp-select {
	width: 100%;
	padding: var(--mpp-space-sm) var(--mpp-space-md);
	border: 1px solid var(--mpp-border);
	border-radius: var(--mpp-radius);
	font-size: 1rem;
	font-family: var(--mpp-font-family);
	background: var(--mpp-bg);
	color: var(--mpp-text);
	box-sizing: border-box;
}

.mpp-input:focus,
.mpp-select:focus {
	outline: 2px solid var(--mpp-primary);
	outline-offset: 2px;
	border-color: var(--mpp-primary);
}

.mpp-method-details {
	margin-top: var(--mpp-space-md);
	padding: var(--mpp-space-md);
	background: var(--mpp-bg-secondary);
	border: 1px solid var(--mpp-border);
	border-radius: var(--mpp-radius);
}

.mpp-method-details h4 {
	margin: 0 0 var(--mpp-space-sm) 0;
	font-size: 1rem;
	font-weight: 600;
	color: var(--mpp-text);
}

.mpp-method-fields-preview {
	width: 100%;
	border-collapse: collapse;
}

.mpp-method-fields-preview th {
	text-align: left;
	padding: var(--mpp-space-xs) var(--mpp-space-sm);
	font-weight: 500;
	color: var(--mpp-text);
	width: 40%;
}

.mpp-method-fields-preview td {
	padding: var(--mpp-space-xs) var(--mpp-space-sm);
	color: var(--mpp-text);
	font-family: var(--mpp-font-mono);
	font-size: 0.875rem;
}

.mpp-form-message {
	padding: var(--mpp-space-sm) var(--mpp-space-md);
	border-radius: var(--mpp-radius);
	font-size: 0.875rem;
	line-height: 1.6;
}

.mpp-form-message.success {
	background: var(--mpp-success-bg);
	color: var(--mpp-success-text);
	border: 1px solid var(--mpp-success-border);
}

.mpp-form-message.error {
	background: var(--mpp-error-bg);
	color: var(--mpp-error-text);
	border: 1px solid var(--mpp-error-border);
}

/* Field-level error messages */
.mpp-field-error {
	display: block;
	margin-top: var(--mpp-space-xs);
	font-size: 0.875rem;
	color: var(--mpp-error);
	line-height: 1.4;
}

.mpp-input.error,
.mpp-select.error,
.mpp-amount-input.error {
	border-color: var(--mpp-error);
	background-color: #fff5f5;
	animation: shake 0.3s ease-in-out;
}

.mpp-input.error:focus,
.mpp-select.error:focus,
.mpp-amount-input.error:focus {
	outline-color: var(--mpp-error);
	border-color: var(--mpp-error);
	box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1);
}

@keyframes shake {
	0%, 100% { transform: translateX(0); }
	25% { transform: translateX(-5px); }
	75% { transform: translateX(5px); }
}

/* Smooth transitions for form elements */
.mpp-input,
.mpp-select,
.mpp-amount-input {
	transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.mpp-input:focus,
.mpp-select:focus,
.mpp-amount-input:focus {
	outline: none;
	box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

.mpp-form-submit {
	margin-top: var(--mpp-space-md);
}

.mpp-submit-button {
	width: 100%;
	padding: var(--mpp-space-md) var(--mpp-space-lg);
	background: var(--mpp-primary);
	color: #ffffff;
	border: none;
	border-radius: var(--mpp-radius);
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.1s ease;
	transition: all 0.2s ease;
	font-family: var(--mpp-font-family);
}

.mpp-submit-button:hover:not(:disabled) {
	background: var(--mpp-primary-dark);
	transform: translateY(-1px);
	box-shadow: var(--mpp-shadow);
}

.mpp-submit-button:focus {
	outline: 2px solid var(--mpp-primary);
	outline-offset: 2px;
}

.mpp-submit-button:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.mpp-error {
	color: var(--mpp-error);
	background: var(--mpp-error-bg);
	padding: var(--mpp-space-md);
	border-radius: var(--mpp-radius);
	border: 1px solid var(--mpp-error-border);
}

/* Responsive Payment Form */
@media (max-width: 900px) {
	.mpp-payment-form-wrap {
		padding: var(--mpp-space-sm);
	}
	
	.mpp-payment-form-card {
		padding: var(--mpp-space-lg);
	}
	
	.mpp-form-title {
		font-size: 1.5rem;
	}
	
	.mpp-method-fields-preview {
		font-size: 0.875rem;
	}
}

@media (max-width: 600px) {
	.mpp-payment-form-wrap {
		padding: var(--mpp-space-xs);
	}
	
	.mpp-payment-form-card {
		padding: var(--mpp-space-md);
		border-radius: var(--mpp-radius);
	}
	
	.mpp-form-title {
		font-size: 1.25rem;
	}
	
	.mpp-amount-display {
		font-size: 1.25rem;
	}
	
	.mpp-form-section h3 {
		font-size: 1rem;
	}
	
	.mpp-input,
	.mpp-select,
	.mpp-amount-input {
		font-size: 16px; /* Prevents zoom on iOS */
	}
	
	.mpp-amount-input-wrapper {
		padding: var(--mpp-space-xs) var(--mpp-space-sm);
	}
	
	.mpp-method-details {
		padding: var(--mpp-space-sm);
	}
	
	.mpp-method-fields-preview th,
	.mpp-method-fields-preview td {
		padding: var(--mpp-space-xs);
		font-size: 0.8125rem;
	}
	
	.mpp-submit-button {
		padding: var(--mpp-space-sm) var(--mpp-space-md);
		font-size: 0.9375rem;
	}
}

/* Print Styles */
@media print {
	.manualpay-proof-instructions,
	.mpp-status-card,
	.manualpay-proof-upload {
		box-shadow: none;
		border: 1px solid #000;
	}

	.mpp-upload-area,
	.upload-area,
	.mpp-upload-button,
	.upload-button {
		display: none;
	}
}

/* ============================================
   WooCommerce Context Overrides
   ============================================ */

/* STEP 2: Override WC Layout Width */
.mpp-wc-context {
	max-width: 720px;
	margin: 40px auto;
	padding: 0 16px;
	box-sizing: border-box;
}

/* STEP 3: Remove WC Floats / Columns */
.mpp-wc-context .woocommerce-order,
.mpp-wc-context .woocommerce-columns,
.mpp-wc-context .col2-set,
.mpp-wc-context .col-1,
.mpp-wc-context .col-2 {
	float: none !important;
	width: 100% !important;
	max-width: 100% !important;
	clear: both !important;
}

/* STEP 4: Center Plugin Container */
.mpp-wc-context .mpp-pending-wrap {
	margin: 0 auto;
	padding: 0;
	max-width: 100%;
}

/* STEP 5: Stack Sections (No Side-by-Side) */
.mpp-wc-context .mpp-section {
	width: 100% !important;
	margin-bottom: 24px;
	float: none !important;
	clear: both !important;
}

/* Remove any grid layout in WC context */
.mpp-wc-context .mpp-grid {
	display: block !important;
	grid-template-columns: none !important;
}

.mpp-wc-context .mpp-left,
.mpp-wc-context .mpp-right {
	width: 100% !important;
	float: none !important;
	display: block !important;
}

.mpp-wc-context .mpp-right-spacer {
	display: none !important;
}

/* STEP 6: Timer Alignment Fix */
.mpp-wc-context .mpp-countdown-wrapper {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin: 0 auto;
}

.mpp-wc-context .mpp-section-timer {
	display: flex;
	justify-content: center;
	align-items: center;
}

/* Center all section headings and containers */
.mpp-wc-context .mpp-section-method,
.mpp-wc-context .mpp-section-details,
.mpp-wc-context .mpp-section-instructions,
.mpp-wc-context .mpp-section-qr,
.mpp-wc-context .mpp-section-upload {
	text-align: center;
}

.mpp-wc-context .mpp-section-details .mpp-fields-table,
.mpp-wc-context .mpp-section-instructions .mpp-instructions-content {
	margin: 0 auto;
	text-align: left;
}

/* Ensure upload section is centered */
.mpp-wc-context .mpp-section-upload .mpp-upload-section {
	margin: 0 auto;
	max-width: 600px;
	text-align: left;
}

/* Responsive adjustments for WC context */
@media (max-width: 768px) {
	.mpp-wc-context {
		margin: 20px auto;
		padding: 0 12px;
	}
	
	.mpp-wc-context .mpp-section {
		margin-bottom: 20px;
	}
}



/* Receipt styles (moved from templates to comply with WP Plugin Directory guidelines) */

/* Standalone receipt view */
.mpp-receipt-container {
		max-width: 800px;
		margin: 40px auto;
		padding: 40px;
		background: #fff;
		box-shadow: 0 2px 10px rgba(0,0,0,0.1);
		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	}
	.mpp-receipt-header {
		text-align: center;
		border-bottom: 2px solid #333;
		padding-bottom: 20px;
		margin-bottom: 30px;
	}
	.mpp-receipt-title {
		font-size: 28px;
		font-weight: bold;
		margin: 0 0 10px 0;
		color: #333;
	}
	.mpp-receipt-actions {
		text-align: center;
		margin-bottom: 30px;
		padding-bottom: 20px;
		border-bottom: 1px solid #ddd;
	}
	.mpp-receipt-actions .button,
	.mpp-receipt-actions button {
		display: inline-block;
		margin: 0 10px;
		padding: 12px 24px;
		text-decoration: none;
		border-radius: 4px;
		font-weight: 500;
		cursor: pointer;
		border: none;
	}
	.mpp-receipt-actions .mpp-btn-print {
		background: #0073aa;
		color: #fff;
	}
	.mpp-receipt-actions .mpp-btn-print:hover {
		background: #005a87;
	}
	.mpp-receipt-actions .mpp-btn-back {
		background: #f0f0f1;
		color: #333;
		border: 1px solid #ccc;
	}
	.mpp-receipt-actions .mpp-btn-back:hover {
		background: #e0e0e0;
	}
	.mpp-receipt-section {
		margin-bottom: 30px;
	}
	.mpp-receipt-section h3 {
		font-size: 18px;
		margin: 0 0 15px 0;
		color: #333;
		border-bottom: 1px solid #eee;
		padding-bottom: 8px;
	}
	.mpp-receipt-table {
		width: 100%;
		border-collapse: collapse;
	}
	.mpp-receipt-table th,
	.mpp-receipt-table td {
		padding: 12px;
		text-align: left;
		border-bottom: 1px solid #eee;
	}
	.mpp-receipt-table th {
		font-weight: 600;
		color: #555;
		width: 40%;
	}
	.mpp-receipt-table td {
		color: #333;
	}
	.mpp-receipt-status {
		display: inline-block;
		padding: 6px 12px;
		border-radius: 4px;
		font-weight: 500;
		font-size: 14px;
	}
	.mpp-receipt-status.pending_proof,
	.mpp-receipt-status.needs_review {
		background: #fff3cd;
		color: #856404;
	}
	.mpp-receipt-status.approved {
		background: #d4edda;
		color: #155724;
	}
	.mpp-receipt-status.rejected {
		background: #f8d7da;
		color: #721c24;
	}
	.mpp-receipt-footer {
		margin-top: 40px;
		padding-top: 20px;
		border-top: 1px solid #eee;
		text-align: center;
		color: #666;
		font-size: 14px;
	}
	@media print {
		.mpp-receipt-actions {
			display: none !important;
		}
		.mpp-receipt-container {
			box-shadow: none;
			margin: 0;
			padding: 20px;
		}
		body {
			background: #fff;
		}
	}

/* Embedded receipt view */
* { margin: 0; padding: 0; box-sizing: border-box; }
		body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; line-height: 1.6; color: #333; background: #f5f5f5; padding: 20px; }
		.receipt-container { max-width: 800px; margin: 0 auto; background: #fff; padding: 40px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); border-radius: 8px; }
		.receipt-header { text-align: center; margin-bottom: 40px; padding-bottom: 20px; border-bottom: 2px solid #eee; }
		.receipt-header h1 { font-size: 28px; color: #2c3e50; margin-bottom: 10px; }
		.receipt-number { font-size: 18px; color: #7f8c8d; font-weight: 600; }
		.receipt-info { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-bottom: 30px; }
		.info-section h3 { font-size: 14px; text-transform: uppercase; color: #95a5a6; margin-bottom: 10px; letter-spacing: 1px; }
		.info-section p { font-size: 16px; color: #2c3e50; }
		.items-table { width: 100%; border-collapse: collapse; margin-bottom: 30px; }
		.items-table th { background: #f8f9fa; padding: 15px; text-align: left; font-weight: 600; color: #2c3e50; border-bottom: 2px solid #eee; }
		.items-table td { padding: 15px; border-bottom: 1px solid #eee; }
		.items-table tr:last-child td { border-bottom: none; }
		.total-section { text-align: right; margin-top: 20px; }
		.total-row { display: flex; justify-content: flex-end; padding: 10px 0; }
		.total-label { font-weight: 600; margin-right: 20px; min-width: 150px; }
		.total-amount { font-size: 24px; font-weight: 700; color: #27ae60; }
		.receipt-footer { margin-top: 40px; padding-top: 20px; border-top: 2px solid #eee; text-align: center; color: #7f8c8d; font-size: 14px; }
		.status-badge { display: inline-block; padding: 6px 12px; border-radius: 4px; font-size: 12px; font-weight: 600; text-transform: uppercase; }
		.status-approved { background: #d4edda; color: #155724; }
		.print-button { text-align: center; margin: 30px 0; }
		.print-button button { background: #2c3e50; color: #fff; border: none; padding: 12px 24px; font-size: 16px; border-radius: 4px; cursor: pointer; font-weight: 600; }
		.print-button button:hover { background: #34495e; }
		@media print { 
			body { background: #fff; } 
			.receipt-container { box-shadow: none; }
			.print-button { display: none; }
		}
		@media (max-width: 768px) { .receipt-info { grid-template-columns: 1fr; } .receipt-container { padding: 20px; } }