/* WooChain Pro — checkout */

.wcp-hidden { display: none !important; }

/* --- Toolbar --- */
.wcp-toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 10px 0 6px;
}

.wcp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 40px;
	padding: 0 16px;
	border: 1px solid #ccc;
	border-radius: 4px;
	background: #fff;
	color: #222;
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease;
}

.wcp-btn:hover:not(:disabled) { background: #f5f5f5; border-color: #999; }
.wcp-btn:disabled { opacity: .5; cursor: not-allowed; }

.wcp-btn-primary { background: #2563eb; border-color: #2563eb; color: #fff; }
.wcp-btn-primary:hover:not(:disabled) { background: #1d4ed8; border-color: #1d4ed8; }

.wcp-btn-icon { font-size: 15px; line-height: 1; }

/* Buttons stay tappable on a phone by wrapping to full width rather than
   collapsing to icons — the old icon-only fallback made "Scan QR" ambiguous
   at exactly the screen size where people use the camera. */
@media (max-width: 420px) {
	.wcp-btn { flex: 1 1 100%; }
}

/* --- Feedback --- */
.wcp-feedback {
	margin: 4px 0 10px;
	font-size: 13px;
	line-height: 1.45;
	min-height: 18px;
}
.wcp-feedback-ok    { color: #15803d; }
.wcp-feedback-warn  { color: #b45309; }
.wcp-feedback-error { color: #b91c1c; }

/* --- Rights notice --- */
.wcp-rights-notice {
	border: 1px solid #ddd;
	border-left: 3px solid #2563eb;
	border-radius: 4px;
	padding: 12px 14px;
	margin: 10px 0;
	background: #fafafa;
	font-size: 13px;
	line-height: 1.55;
}
.wcp-rights-notice p { margin: 0 0 8px; }
.wcp-rights-notice p:last-child { margin-bottom: 0; }
.wcp-rights-seller strong { color: #111; }
.wcp-rights-platform { color: #555; }

/* The notice is rendered through a field label, so hide the input itself. */
.wcp-rights-notice-field input { display: none !important; }
.wcp-rights-notice-field label { width: 100%; }

/* --- Chain select --- */
.wcp-chain-field select {
	width: 100%;
	min-height: 40px;
}

/* --- QR modal --- */
.wcp-qr-overlay {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 100000;
	background: rgba(0,0,0,.65);
	align-items: center;
	justify-content: center;
	padding: 16px;
}
.wcp-qr-overlay.is-open { display: flex; }

.wcp-qr-modal {
	position: relative;
	width: 100%;
	max-width: 400px;
	background: #fff;
	border-radius: 8px;
	padding: 20px;
	box-sizing: border-box;
}

.wcp-qr-close {
	position: absolute;
	top: 6px;
	right: 10px;
	width: 36px;
	height: 36px;
	background: transparent;
	border: none;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	color: #333;
}

.wcp-qr-video {
	width: 100%;
	max-height: 60vh;
	border-radius: 6px;
	background: #000;
	object-fit: cover;
}

/* Scan-region highlight drawn by the decoder. */
.wcp-qr-modal .scan-region-highlight-svg,
.wcp-qr-modal .code-outline-highlight { stroke: #2563eb !important; }

.wcp-qr-hint {
	margin: 12px 0 0;
	font-size: 14px;
	text-align: center;
	color: #555;
}

/* --- Customer order page --- */
.wcp-customer-certificate { margin-top: 2em; }
.wcp-customer-certificate code { word-break: break-all; font-size: 12px; }

/* --- Opt-in reminder (shown when the box is NOT ticked) --- */
.wcp-optin-note {
	margin: 6px 0 12px;
	padding: 10px 12px;
	border-left: 3px solid #b45309;
	background: #fffbf5;
	border-radius: 3px;
	font-size: 13px;
	line-height: 1.5;
	color: #6b4415;
}

/* --- Blocking reason shown while Place Order is gated --- */
.wcp-gate {
	margin: 6px 0 12px;
	padding: 10px 12px;
	border-left: 3px solid #b91c1c;
	background: #fef6f6;
	border-radius: 3px;
	font-size: 13px;
	line-height: 1.5;
	color: #7f1d1d;
	font-weight: 500;
}

/* The disabled state is cosmetic only — the server rejects the submission
   regardless of what this button looks like. */
.wcp-blocked,
button.wcp-blocked:disabled {
	opacity: .55 !important;
	cursor: not-allowed !important;
}

/* ==================================================================
   Small screens
   ==================================================================
   Checkout is where most customers actually are, so nothing here may
   exceed the viewport. A wallet address is 42-44 unbreakable characters
   and the rights notice is long prose; both will widen a themed checkout
   page unless told otherwise. */

.wcp-field,
.wcp-toolbar,
.wcp-feedback,
.wcp-gate,
.wcp-optin-note,
.wcp-rights-notice {
	box-sizing: border-box;
	max-width: 100%;
	overflow-wrap: anywhere;
}

/* Flex children refuse to shrink below their content by default, which is
   how a single long address widens the whole row. */
.wcp-toolbar > * { min-width: 0; }

.wcp-wallet-field input,
.wcp-chain-field select {
	box-sizing: border-box;
	max-width: 100%;
}

/* The address itself, wherever it is echoed back. */
.wcp-customer-certificate code,
.wcp-feedback code {
	overflow-wrap: anywhere;
	word-break: break-all;
}

/* This table carries WooCommerce's own .woocommerce-table class, so the theme
   styles it. Scope the overrides to our section only — changing
   .woocommerce-table globally would reflow the order and cart tables too. */
.wcp-customer-certificate table,
.wcp-customer-certificate table.woocommerce-table {
	width: 100%;
	table-layout: fixed;
	max-width: 100%;
}
.wcp-customer-certificate th,
.wcp-customer-certificate td {
	overflow-wrap: anywhere;
	word-break: break-word;
}

@media screen and (max-width: 600px) {
	/* Stack the wallet buttons; three side by side are unusable at this width
	   and they were the reason the row overflowed. */
	.wcp-toolbar { flex-direction: column; }
	.wcp-btn { width: 100%; min-height: 44px; }

	.wcp-rights-notice { padding: 10px 12px; font-size: 12.5px; }
	.wcp-optin-note,
	.wcp-gate { font-size: 12.5px; }

	/* The customer order table becomes label-above-value. */
	.wcp-customer-certificate table,
	.wcp-customer-certificate table.woocommerce-table,
	.wcp-customer-certificate tbody,
	.wcp-customer-certificate tr,
	.wcp-customer-certificate th,
	.wcp-customer-certificate td {
		display: block;
		width: auto;
		text-align: left;
	}
	.wcp-customer-certificate th {
		padding-bottom: 2px;
		font-size: 12px;
		text-transform: uppercase;
		letter-spacing: .04em;
		opacity: .7;
	}
	.wcp-customer-certificate td { padding-top: 0; padding-bottom: 12px; }

	/* Full-height camera view on a phone. */
	.wcp-qr-modal { padding: 14px; }
	.wcp-qr-video { max-height: 55vh; }
}

@media screen and (max-width: 380px) {
	.wcp-btn { font-size: 13px; padding: 0 10px; }
	.wcp-qr-hint { font-size: 13px; }
}

/* ==================================================================
   Floating label overlap
   ==================================================================
   Blocks lifts the label only when React believes the field has content.
   We write the address programmatically after a wallet connects, and if
   React has not re-rendered yet the label stays sitting on the value and
   neither is readable. `wcp-filled` is set from the value we actually
   wrote, so the label lifts regardless of React's timing. */
.wc-block-components-text-input.wcp-filled label,
.form-row.wcp-filled label {
	transform: translateY(-50%) scale(.75);
	top: 0;
}

/* A wallet address is 42-44 characters with no spaces; without this it
   pushes the field wider than the column on a phone. */
#wcp_wallet_address,
input[id*="wallet-address"] {
	text-overflow: ellipsis;
	font-family: Menlo, Consolas, monospace;
	font-size: 13px;
}

/* ==================================================================
   Customer-facing certificate
   ================================================================== */
.wcp-cert-table { width: 100%; table-layout: fixed; }
.wcp-cert-table th { width: 40%; text-align: left; vertical-align: top; }
.wcp-cert-table td { word-break: break-word; }

/* Identifiers are shown in full — a truncated address cannot be verified,
   which defeats the purpose of publishing it. */
.wcp-full {
	display: inline-block;
	max-width: 100%;
	font-family: Menlo, Consolas, monospace;
	font-size: 12px;
	line-height: 1.5;
	overflow-wrap: anywhere;
	word-break: break-all;
	background: rgba(0, 0, 0, .04);
	padding: 3px 6px;
	border-radius: 3px;
}
.wcp-cert-status { padding: 10px 12px; border-radius: 4px; line-height: 1.55; }
.wcp-cert-pending { background: #f0f6fc; border-left: 3px solid #2271b1; }
.wcp-cert-failed  { background: #fcf9e8; border-left: 3px solid #dba617; }
.wcp-cert-note { font-size: 13px; opacity: .75; margin-top: 8px; }

/* Orders table column */
.wcp-cell-ok      { display: block; font-weight: 600; }
.wcp-cell-fail    { display: block; font-weight: 600; opacity: .8; }
.wcp-cell-pending { display: block; opacity: .8; }
.wcp-cell-muted   { opacity: .5; }
.wcp-cell-sub     { display: block; font-size: 12px; opacity: .7; }
.wcp-cell-link    { display: block; font-size: 12px; margin-top: 2px; }

@media screen and (max-width: 600px) {
	.wcp-cert-table,
	.wcp-cert-table tbody,
	.wcp-cert-table tr,
	.wcp-cert-table th,
	.wcp-cert-table td { display: block; width: auto; }
	.wcp-cert-table th {
		padding-bottom: 2px; font-size: 12px;
		text-transform: uppercase; letter-spacing: .04em; opacity: .7;
	}
	.wcp-cert-table td { padding-top: 0; padding-bottom: 12px; }
	.wcp-full { font-size: 11px; }
}

/* ==================================================================
   WooCommerce "Additional information" table
   ==================================================================
   Our rights-agreement field is a long paragraph stored as an order field
   value, and WooCommerce renders it in a two-column table with no width
   constraint. A default table sizes itself to its content, so that one
   long unbroken value pushed the table — and often the page — past the
   viewport on every screen size.

   Scoped to the order/account context so nothing else in the theme moves. */
.woocommerce-additional-fields table,
.woocommerce-order-details table.shop_table,
.woocommerce-customer-details table.shop_table,
table.woocommerce-table--order-details,
table.woocommerce-table--additional-fields {
	width: 100%;
	max-width: 100%;
	table-layout: fixed;
}

.woocommerce-additional-fields table th,
.woocommerce-order-details table.shop_table th,
table.woocommerce-table--additional-fields th {
	width: 34%;
	vertical-align: top;
	overflow-wrap: anywhere;
}

.woocommerce-additional-fields table td,
.woocommerce-order-details table.shop_table td,
table.woocommerce-table--additional-fields td {
	vertical-align: top;
	overflow-wrap: anywhere;
	word-break: break-word;
	hyphens: auto;
	line-height: 1.55;
	min-width: 0;
}

/* Wallet addresses and hashes have no break opportunities at all. */
.woocommerce-additional-fields td code,
.woocommerce-order-details td code,
table.woocommerce-table--additional-fields td code {
	display: inline-block;
	max-width: 100%;
	overflow-wrap: anywhere;
	word-break: break-all;
	font-size: 12px;
}

@media screen and (max-width: 768px) {
	/* Label above value: at this width a 34% label column leaves too little
	   room for a 42-character address. */
	.woocommerce-additional-fields table,
	.woocommerce-additional-fields tbody,
	.woocommerce-additional-fields tr,
	.woocommerce-additional-fields th,
	.woocommerce-additional-fields td,
	table.woocommerce-table--additional-fields,
	table.woocommerce-table--additional-fields tbody,
	table.woocommerce-table--additional-fields tr,
	table.woocommerce-table--additional-fields th,
	table.woocommerce-table--additional-fields td {
		display: block;
		width: auto !important;
		max-width: 100%;
	}
	.woocommerce-additional-fields th,
	table.woocommerce-table--additional-fields th {
		padding-bottom: 2px;
		font-size: 12px;
		text-transform: uppercase;
		letter-spacing: .03em;
		opacity: .7;
	}
	.woocommerce-additional-fields td,
	table.woocommerce-table--additional-fields td {
		padding-top: 0;
		padding-bottom: 14px;
		font-size: 13.5px;
	}
}

/* The rights agreement is a paragraph, not a value. Give it room to read. */
.woocommerce-additional-fields td:only-child,
table.woocommerce-table--additional-fields td {
	white-space: normal;
}

/* ==================================================================
   Block checkout: "Additional information" on the confirmation page
   ==================================================================
   This renders as a DEFINITION LIST, not a table:

     <dl class="wc-block-components-additional-fields-list">
       <dt>label</dt><dd>value</dd>

   Earlier rules here only targeted tables, so they never applied and the
   overflow persisted. Two things break the layout: a 42-character wallet
   address with no break points, and our rights notice, which is a whole
   paragraph sitting in a <dt> sized for a short label. */
.wc-block-order-confirmation-additional-fields-wrapper {
	max-width: 100%;
	overflow-wrap: anywhere;
}

.wc-block-components-additional-fields-list {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
	gap: 4px 20px;
	margin: 0;
	max-width: 100%;
}

.wc-block-components-additional-fields-list dt,
.wc-block-components-additional-fields-list dd {
	margin: 0;
	padding: 8px 0;
	min-width: 0;
	max-width: 100%;
	overflow-wrap: anywhere;
	word-break: break-word;
	hyphens: auto;
	line-height: 1.55;
}

.wc-block-components-additional-fields-list dt {
	font-weight: 600;
	/* The rights notice is a paragraph in a label slot. Let it wrap and read
	   rather than forcing it onto one line. */
	white-space: normal;
}

.wc-block-components-additional-fields-list dd {
	font-weight: 400;
}

/* A wallet address is one unbroken token and will not wrap on its own. */
.wc-block-components-additional-fields-list dd {
	word-break: break-word;
}
.wc-block-components-additional-fields-list dd:has(+ dt),
.wc-block-order-confirmation-additional-fields-wrapper code {
	overflow-wrap: anywhere;
}

/* Rows separate more clearly once they stack. */
.wc-block-components-additional-fields-list dt + dd {
	border-bottom: 1px solid rgba(0, 0, 0, .06);
	padding-bottom: 12px;
}
.wc-block-components-additional-fields-list dt {
	border-bottom: 1px solid rgba(0, 0, 0, .06);
	padding-bottom: 12px;
}

@media screen and (max-width: 768px) {
	/* Below this width a two-column grid leaves too little room for either
	   an address or a paragraph. Stack them. */
	.wc-block-components-additional-fields-list {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}
	.wc-block-components-additional-fields-list dt {
		padding: 10px 0 2px;
		border-bottom: 0;
		font-size: 12.5px;
		opacity: .75;
	}
	.wc-block-components-additional-fields-list dd {
		padding: 0 0 12px;
		font-size: 14px;
	}
}

/* Very narrow screens: an address needs every character break available. */
@media screen and (max-width: 420px) {
	.wc-block-components-additional-fields-list dd {
		word-break: break-all;
		font-size: 13px;
	}
}

/* Wallets that cannot receive a certificate.
   Shown while the customer is still typing, so it must be noticeable
   without looking like the form is broken. */
.wcp-recipient-warning {
	display: none;
	margin: 8px 0 0;
	padding: 10px 12px;
	background: #fff8e5;
	border: 1px solid #f0c36d;
	border-left: 3px solid #dba617;
	border-radius: 4px;
	font-size: 13.5px;
	line-height: 1.5;
	color: #6b5200;
	overflow-wrap: anywhere;
}
.wcp-recipient-warning.is-visible { display: block; }

/* Certificate QR code.
   Sits beside the explanation on a wide screen and above it on a narrow one.
   The code itself is capped so it cannot dominate the order page, and has a
   white background because scanners need the quiet zone to be light even when
   the theme is dark. */
.wcp-cert-qr {
	display: flex;
	gap: 18px;
	align-items: flex-start;
	flex-wrap: wrap;
	margin: 1.5em 0;
	padding: 16px;
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	background: #fafafa;
}
.wcp-cert-qr-code {
	flex: 0 0 auto;
	width: 148px;
	height: 148px;
	padding: 8px;
	background: #fff;
	border-radius: 6px;
	box-sizing: border-box;
}
.wcp-cert-qr-code svg { display: block; width: 100%; height: 100%; }
.wcp-cert-qr-text { flex: 1 1 240px; min-width: 0; }
.wcp-cert-qr-title { font-weight: 600; margin: 0 0 6px; }
.wcp-cert-qr-note { margin: 0 0 8px; font-size: 13.5px; line-height: 1.5; opacity: .85; }

@media print {
	/* A printed certificate is the case this exists for. */
	.wcp-cert-qr { border-color: #999; background: #fff; break-inside: avoid; }
}

@media (max-width: 480px) {
	.wcp-cert-qr-code { width: 120px; height: 120px; margin: 0 auto; }
}