/**
 * WCPNS Frontend Styles
 *
 * Provides base styling for the PayNow payment block shown on the
 * thank-you page, My Account order view, and customer emails.
 * Intentionally minimal so themes can override easily.
 *
 * @package WCPNS
 */

/* ── Payment Block Wrapper ─────────────────────────────────────────── */

.wcpns-payment-block {
	margin: 2em 0;
	padding: 1.5em;
	border: 1px solid #ddd;
	border-radius: 4px;
	background: #fafafa;
}

.wcpns-block-title {
	margin-top: 0;
	font-size: 1.25em;
	border-bottom: 1px solid #eee;
	padding-bottom: 0.5em;
}

/* ── QR Code Image ──────────────────────────────────────────────────── */

.wcpns-qr-wrap {
	text-align: center;
	margin: 1em 0;
}

.wcpns-qr-image {
	max-width: 220px;
	width: 100%;
	height: auto;
	display: inline-block;
	border: 1px solid #ccc;
	padding: 8px;
	background: #fff;
	border-radius: 4px;
}

/* ── Order Summary ──────────────────────────────────────────────────── */

.wcpns-order-summary {
	margin: 1em 0;
	padding: 0.75em 1em;
	background: #fff;
	border-left: 4px solid #96588a; /* WooCommerce purple accent */
}

.wcpns-amount,
.wcpns-order-ref {
	margin: 0.25em 0;
}

/* ── Instructions ───────────────────────────────────────────────────── */

.wcpns-instructions {
	margin-top: 1em;
}

.wcpns-instructions h3 {
	font-size: 1em;
	margin-bottom: 0.5em;
}

.wcpns-instructions p,
.wcpns-instructions ol,
.wcpns-instructions ul {
	margin: 0.4em 0;
}

/* ── Proof Upload Form ──────────────────────────────────────────────── */

.wcpns-proof-upload-section {
	margin-top: 2em;
}

.wcpns-proof-form p.form-row {
	margin-bottom: 1em;
}

.wcpns-proof-form label {
	display: block;
	margin-bottom: 0.3em;
	font-weight: 600;
}

.wcpns-proof-uploaded {
	background: #d4edda;
	border-color: #c3e6cb;
	color: #155724;
}

/* ── Admin Proof Box ────────────────────────────────────────────────── */

.wcpns-admin-proof img {
	max-width: 200px;
	height: auto;
	display: block;
	margin-top: 8px;
}

/* ── Email variant (inline-safe) ───────────────────────────────────── */

.wcpns-payment-block--email {
	background: #ffffff;
	border: 2px solid #96588a;
}