/**
 * Payment-proof upload section (order-received page + My Account order view).
 * Uses the active theme's design-token custom properties when present
 * (--pl-*, --bs-primary), falling back to sensible defaults otherwise so
 * this looks reasonable under any theme.
 */

.peplaunchpad-payment-proof {
	background: var(--pl-surface, #f8fafc);
	border: 1px solid var(--pl-border, #e2e8f0);
	border-radius: var(--pl-radius, 14px);
	padding: 1.75rem;
	margin: 1.5rem 0 2rem;
}

.peplaunchpad-payment-proof h2 {
	font-family: var(--pl-font-heading, inherit);
	font-size: 1.1rem;
	margin-bottom: 0.5rem;
}

.peplaunchpad-payment-proof p {
	color: var(--pl-muted, #64748b);
	font-size: 0.9rem;
	margin-bottom: 1rem;
}

.peplaunchpad-payment-proof--received {
	border-color: var(--bs-primary, #2563eb);
}

.peplaunchpad-payment-proof__thumb {
	display: inline-block;
	margin-top: 0.25rem;
}

.peplaunchpad-payment-proof__thumb img {
	display: block;
	max-width: 160px;
	height: auto;
	border-radius: var(--pl-radius-sm, 8px);
	border: 1px solid var(--pl-border, #e2e8f0);
	transition: opacity 0.2s ease;
}

.peplaunchpad-payment-proof__thumb:hover img {
	opacity: 0.85;
}

.peplaunchpad-payment-proof__error {
	color: #b91c1c;
	font-weight: 600;
}

.peplaunchpad-payment-proof__form {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
}

.peplaunchpad-payment-proof__form input[type="file"] {
	flex: 1 1 240px;
	font-size: 0.85rem;
}

.peplaunchpad-payment-proof__form .button {
	background: var(--pl-navy, #0b1120);
	border: none;
	border-radius: var(--pl-radius-sm, 8px);
	color: #fff;
	font-weight: 600;
	padding: 0.65rem 1.5rem;
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.peplaunchpad-payment-proof__form .button:hover {
	transform: translateY(-2px);
	box-shadow: var(--pl-shadow-hover, 0 12px 28px rgba(15, 23, 42, 0.12));
}

.peplaunchpad-payment-proof-admin {
	margin: 1rem 0;
}

/* Inline upload embedded in the payment method itself (checkout, both
   block and classic) — required before the order can be placed. */

.peplaunchpad-inline-upload {
	margin-top: 0.75rem;
	padding-top: 0.75rem;
	border-top: 1px dashed var(--pl-border, #e2e8f0);
}

.peplaunchpad-inline-upload label {
	display: block;
	font-size: 0.85rem;
	font-weight: 600;
	margin-bottom: 0.4rem;
}

.peplaunchpad-inline-upload input[type="file"] {
	font-size: 0.85rem;
	max-width: 100%;
}

.peplaunchpad-proof-status,
.peplaunchpad-proof-error {
	font-size: 0.85rem;
	margin: 0.4rem 0 0;
}

.peplaunchpad-proof-status {
	color: var(--bs-primary, #2563eb);
}

.peplaunchpad-proof-error,
.peplaunchpad-proof-status.peplaunchpad-proof-error {
	color: #b91c1c;
	font-weight: 600;
}

/* Numbered step instructions — used both for a gateway's own "how to pay"
   steps and the generic "how to upload proof" steps. */

.peplaunchpad-steps {
	list-style: none;
	counter-reset: peplaunchpad-step;
	margin: 0.75rem 0 1rem;
	padding: 0;
}

.peplaunchpad-step {
	counter-increment: peplaunchpad-step;
	position: relative;
	padding-left: 2.25rem;
	margin-bottom: 1rem;
}

.peplaunchpad-step:last-child {
	margin-bottom: 0;
}

.peplaunchpad-step::before {
	content: counter(peplaunchpad-step);
	position: absolute;
	left: 0;
	top: 0;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 50%;
	background: var(--pl-navy, #0b1120);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.peplaunchpad-step__title {
	font-weight: 700;
	display: block;
	line-height: 1.5rem;
	font-size: 0.9rem;
}

.peplaunchpad-step__description {
	color: var(--pl-muted, #64748b);
	font-size: 0.85rem;
	margin-top: 0.2rem;
	line-height: 1.5;
}

.peplaunchpad-step__warning {
	color: #b91c1c;
	font-weight: 600;
	font-size: 0.8rem;
	margin-top: 0.4rem;
	line-height: 1.5;
}

/* Generic labeled field (Discord username, notes) */

.peplaunchpad-field {
	margin: 0.9rem 0;
}

.peplaunchpad-field label,
.peplaunchpad-field-label {
	display: block;
	font-size: 0.8rem;
	font-weight: 700;
	margin-bottom: 0.35rem;
}

.peplaunchpad-field-label {
	margin-top: 1rem;
}

.peplaunchpad-field input[type="text"],
.peplaunchpad-field textarea {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid var(--pl-border, #e2e8f0);
	border-radius: var(--pl-radius-sm, 8px);
	padding: 0.6rem 0.75rem;
	font-size: 0.9rem;
	font-family: inherit;
}

.peplaunchpad-field input[type="text"]:focus,
.peplaunchpad-field textarea:focus {
	outline: none;
	border-color: var(--bs-primary, #2563eb);
}

/* Payment-proof section: its own numbered steps + dropzone + notes,
   identical regardless of which manual payment method is selected. */

.peplaunchpad-proof-section {
	margin-top: 1.25rem;
	padding-top: 1.1rem;
	border-top: 1px dashed var(--pl-border, #e2e8f0);
}

.peplaunchpad-proof-section__title {
	font-size: 0.95rem;
	font-weight: 700;
	margin: 0 0 0.75rem;
}

/* Dropzone upload control */

.peplaunchpad-dropzone {
	border: 2px dashed var(--pl-border, #cbd5e1);
	border-radius: var(--pl-radius-sm, 8px);
	padding: 1.5rem 1rem;
	text-align: center;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease;
	background: var(--pl-surface, #f8fafc);
}

.peplaunchpad-dropzone:hover {
	border-color: var(--bs-primary, #2563eb);
}

.peplaunchpad-dropzone--done {
	border-color: #16a34a;
	border-style: solid;
}

.peplaunchpad-dropzone__label {
	display: block;
	cursor: pointer;
	margin: 0;
}

.peplaunchpad-dropzone__icon {
	font-size: 1.5rem;
	color: var(--pl-muted, #94a3b8);
	margin-bottom: 0.4rem;
}

.peplaunchpad-dropzone__text {
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--pl-navy, #0b1120);
}

.peplaunchpad-dropzone__hint {
	font-size: 0.78rem;
	color: var(--pl-muted, #94a3b8);
	margin-top: 0.3rem;
}

/* Trust microcopy under the checkout submit button. Its block-checkout
   parent (.wc-block-checkout__actions_row) is a flex ROW with
   justify-content:flex-end by default, which is why the button sizes to
   its own content and this text ends up sitting beside it rather than
   below — force that specific row (identified by containing this element)
   to stack vertically instead, full-width. */

.wc-block-checkout__actions_row:has(.peplaunchpad-trust-microcopy) {
	flex-direction: column;
	align-items: stretch;
}

.peplaunchpad-trust-microcopy {
	text-align: center;
	font-size: 0.8rem;
	color: var(--pl-muted, #64748b);
	margin: 0.6rem 0 0;
}

/* Checkout submit buttons (block + classic), restyled to match the site's
   dark CTA treatment used elsewhere (cart/shop). */

.wc-block-components-checkout-place-order-button,
#place_order {
	background: var(--pl-navy, #0b1120) !important;
	border: none !important;
	border-radius: var(--pl-radius-sm, 8px) !important;
	color: #fff !important;
	font-weight: 700 !important;
	width: 100% !important;
	padding: 0.9rem 1.5rem !important;
	transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.wc-block-components-checkout-place-order-button:hover,
#place_order:hover {
	transform: translateY(-2px);
	box-shadow: var(--pl-shadow-hover, 0 12px 28px rgba(15, 23, 42, 0.12));
	opacity: 0.95;
}

/* Disabled until the payment screenshot has been uploaded. */

.wc-block-components-checkout-place-order-button.peplaunchpad-place-order--disabled,
#place_order.peplaunchpad-place-order--disabled {
	background: var(--pl-muted, #94a3b8) !important;
	cursor: not-allowed;
	opacity: 0.7;
}

.wc-block-components-checkout-place-order-button.peplaunchpad-place-order--disabled:hover,
#place_order.peplaunchpad-place-order--disabled:hover {
	transform: none;
	box-shadow: none;
	opacity: 0.7;
}