/**
 * 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;
}

/* Real-time crypto transaction-hash check, shown right under the Extra
   checkout field on a Crypto-tagged method (classic checkout's
   .peplaunchpad-hash-verify-status span, and the block checkout's React
   equivalent). Empty/no verdict yet renders no text at all. */

.peplaunchpad-hash-verify-status {
	display: block;
	font-size: 0.85rem;
	margin: 0.4rem 0 0;
}

.peplaunchpad-hash-verify-status.is-checking {
	color: #64748b;
}

.peplaunchpad-hash-verify-status.is-valid {
	color: #15803d;
	font-weight: 600;
}

.peplaunchpad-hash-verify-status.is-invalid {
	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;
}

/* Country-wise bank selector — shown inside a step of type `bank_selector`
   (see peplaunchpad_mp_render_bank_selector_html() / BankSelector in
   checkout-manual-payment.js). A <select> plus the matching country's
   details panel underneath, once one is chosen. */

.peplaunchpad-bank-selector {
	margin-top: 0.6rem;
}

/* Without an explicit appearance reset, Chrome happens to render a plain
   <select> in a way that already respects author border/border-radius/
   background — but Safari and Firefox fall back to their own native OS
   control chrome instead (a different arrow, box height, and padding),
   which is what actually produced the "fine in Chrome, different in Safari/
   Firefox" look. Taking over appearance entirely and drawing the arrow
   ourselves via background-image makes every browser render this identically. */
.peplaunchpad-bank-value-select {
	width: 100%;
	box-sizing: border-box;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	border: 1px solid var(--pl-border, #e2e8f0);
	border-radius: var(--pl-radius-sm, 8px);
	padding: 0.6rem 2.25rem 0.6rem 0.75rem;
	font-size: 0.9rem;
	font-family: inherit;
	background-color: #fff;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5 7.5 10 12.5 15 7.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.75rem center;
	background-size: 1rem;
}

.peplaunchpad-bank-value-select:focus {
	outline: none;
	border-color: var(--bs-primary, #2563eb);
}

.peplaunchpad-bank-details {
	margin-top: 0.9rem;
	padding: 1rem 1.1rem;
	border: 1px solid var(--pl-border, #e2e8f0);
	border-radius: var(--pl-radius-sm, 8px);
	background: var(--pl-surface, #f8fafc);
}

.peplaunchpad-bank-details__fields {
	margin: 0;
	display: grid;
	grid-template-columns: minmax(0, auto) minmax(0, 1fr);
	gap: 0.35rem 1rem;
}

.peplaunchpad-bank-details__fields dt {
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--pl-muted, #64748b);
}

.peplaunchpad-bank-details__fields dd {
	margin: 0;
	font-size: 0.85rem;
	color: var(--pl-navy, #0b1120);
	word-break: break-word;
}

.peplaunchpad-bank-details__transfers-label {
	font-size: 0.8rem;
	font-weight: 700;
	margin: 1rem 0 0.4rem;
	color: var(--pl-navy, #0b1120);
}

.peplaunchpad-bank-details__transfers {
	margin: 0;
	padding-left: 1.2rem;
	font-size: 0.83rem;
	color: var(--pl-muted, #64748b);
	line-height: 1.6;
}

@media (max-width: 480px) {
	.peplaunchpad-bank-details__fields {
		grid-template-columns: 1fr;
	}
}

/* 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;
}

/* Shared box for the selected payment method's content, rendered below the
   whole radio-option list instead of nested inside whichever option is
   checked — see getSharedPaymentContentBox() / the createPortal call in
   checkout-manual-payment.js. WC Blocks' own CSS already hides each radio
   option's accordion box when it's left empty, so no extra styling is
   needed there; this is just the destination box's own look. */

.peplaunchpad-payment-content-box {
	border: 1px solid var(--pl-border, #e2e8f0);
	border-radius: var(--pl-radius, 14px);
	padding: 1.25rem;
	margin-top: 0.75rem;
}

.peplaunchpad-payment-content-box:empty {
	display: none;
}

/* 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;
}