/**
 * Jedi-Robe WooCommerce order confirmation page.
 *
 * Restyles WooCommerce's native classic order-received output using the
 * established Jedi-Robe dark-commerce interface.
 *
 * WooCommerce retains ownership of the confirmation message, order metadata,
 * purchased-product table, totals, payment information and customer addresses.
 *
 * @package Jedi_Theme
 * @subpackage WooCommerce_Order_Received
 * @since 1.0.0
 */


/* ==========================================================================
   Confirmation tokens
   ========================================================================== */

body.jr-dark-commerce.woocommerce-checkout.woocommerce-order-received {
	--jr-confirm-border: rgba(152, 169, 192, 0.17);
	--jr-confirm-border-strong: rgba(152, 169, 192, 0.28);
	--jr-confirm-muted: rgba(255, 255, 255, 0.62);
	--jr-confirm-panel: rgba(7, 13, 21, 0.54);
}


/* ==========================================================================
   Native Checkout page heading
   ========================================================================== */

/**
 * The transaction has finished, so the generic WordPress "Checkout" heading
 * is redundant on the confirmation screen.
 */
body.jr-dark-commerce.woocommerce-checkout.woocommerce-order-received
	.entry-header {
	display: none;
}


/* ==========================================================================
   Order confirmation shell
   ========================================================================== */

body.jr-dark-commerce.woocommerce-checkout.woocommerce-order-received
	.woocommerce-order {
	width: 100%;
	min-width: 0;

	margin: 0;
	padding: 0;

	color: var(--jr-text);
}


/* ==========================================================================
   Success message
   ========================================================================== */

body.jr-dark-commerce.woocommerce-checkout.woocommerce-order-received
	.woocommerce-thankyou-order-received {
	position: relative;

	display: flex;

	width: 100%;

	align-items: center;

	gap: 0.8rem;

	margin:
		0
		0
		1.5rem;

	padding:
		1rem
		1.15rem;

	color: var(--jr-text);

	font-weight: 650;

	box-shadow: none;
}


/**
 * Compact confirmation indicator.
 */
body.jr-dark-commerce.woocommerce-checkout.woocommerce-order-received
	.woocommerce-thankyou-order-received::before {
	display: grid;

	width: 1.55rem;
	height: 1.55rem;

	flex: 0 0 1.55rem;

	place-items: center;

	border: 1px solid var(--jr-green-light);
	border-radius: 50%;

	color: var(--jr-green-light);

	content: "✓";

	font-size: 0.75rem;
	font-weight: 800;
	line-height: 1;
}


/* ==========================================================================
   Order overview
   ========================================================================== */

/**
 * Replace WooCommerce/Shoptimizer's light receipt strip with a compact
 * five-column dark summary panel.
 */
body.jr-dark-commerce.woocommerce-checkout.woocommerce-order-received
	ul.woocommerce-order-overview {
	position: relative;

	display: grid;
	float: none;

	grid-template-columns:
		repeat(5, minmax(0, 1fr));

	width: 100%;

	margin:
		0
		0
		1.5rem;

	padding:
		1.1rem
		1.2rem;

	border: 1px solid var(--jr-confirm-border-strong);
	border-radius: 0;

	background:
		linear-gradient(
			135deg,
			rgba(255, 255, 255, 0.022),
			transparent 42%
		),
		var(--jr-confirm-panel);

	color: var(--jr-text);

	list-style: none;

	box-shadow:
		0 1rem 2.5rem rgba(0, 0, 0, 0.18),
		inset 0 1px 0 rgba(255, 255, 255, 0.025);
}


/* ==========================================================================
   Overview items
   ========================================================================== */

body.jr-dark-commerce.woocommerce-checkout.woocommerce-order-received
	ul.woocommerce-order-overview
	> li {
	float: none;

	width: auto;
	min-width: 0;

	margin: 0;
	padding:
		0
		1rem;

	border: 0;
	border-right: 1px solid var(--jr-confirm-border);

	color: var(--jr-confirm);

	font-size: 0.72rem;
	font-weight: 650;
	letter-spacing: 0.04em;
	line-height: 1.35;

	text-transform: uppercase;
}


body.jr-dark-commerce.woocommerce-checkout.woocommerce-order-received
	ul.woocommerce-order-overview
	> li:first-child {
	padding-left: 0;
}


body.jr-dark-commerce.woocommerce-checkout.woocommerce-order-received
	ul.woocommerce-order-overview
	> li:last-child {
	padding-right: 0;

	border-right: 0;
}


/* ==========================================================================
   Overview values
   ========================================================================== */

body.jr-dark-commerce.woocommerce-checkout.woocommerce-order-received
	ul.woocommerce-order-overview
	> li
	> strong {
	display: block;

	overflow-wrap: anywhere;

	margin:
		0.35rem
		0
		0;

	color: var(--jr-text);

	font-size: 0.9rem;
	font-weight: 750;
	letter-spacing: 0;
	line-height: 1.4;

	text-transform: none;
}


/* ==========================================================================
   Payment instruction
   ========================================================================== */

body.jr-dark-commerce.woocommerce-checkout.woocommerce-order-received
	.woocommerce-order
	> p:not(.woocommerce-thankyou-order-received) {
	margin:
		0
		0
		1.5rem;

	padding:
		0.9rem
		1rem;

	border-left: 2px solid var(--jr-blue-light);

	background:
		linear-gradient(
			90deg,
			rgba(111, 203, 255, 0.065),
			transparent 68%
		);

	color: var(--jr-confirm);

	font-size: 0.9rem;
	line-height: 1.55;
}


/* ==========================================================================
   Order details panel
   ========================================================================== */

body.jr-dark-commerce.woocommerce-checkout.woocommerce-order-received
	.woocommerce-order-details {
	position: relative;
	isolation: isolate;

	width: 100%;

	margin:
		0
		0
		2rem;

	padding:
		1.5rem;

	border: 1px solid var(--jr-confirm-border-strong);
	border-radius: 0;

	background:
		linear-gradient(
			135deg,
			rgba(255, 255, 255, 0.024),
			transparent 42%
		),
		radial-gradient(
			circle at 100% 0,
			rgba(111, 203, 255, 0.04),
			transparent 20rem
		),
		var(--jr-confirm-panel);

	color: var(--jr-text);

	box-shadow:
		0 1.5rem 3.5rem rgba(0, 0, 0, 0.22),
		inset 0 1px 0 rgba(255, 255, 255, 0.025);
}


/**
 * Replace Shoptimizer's existing decorative pseudo-elements.
 *
 * This also removes the large white diamond currently visible at the upper
 * right of the order-details panel.
 */
body.jr-dark-commerce.woocommerce-checkout.woocommerce-order-received
	.woocommerce-order-details::before {
	position: absolute;
	top: -1px;
	left: -1px;

	width: 1.35rem;
	height: 1.35rem;

	border-top: 2px solid var(--jr-green-light);
	border-left: 2px solid var(--jr-green-light);

	background: none;

	content: "";

	box-shadow: none;

	transform: none;

	pointer-events: none;
}


body.jr-dark-commerce.woocommerce-checkout.woocommerce-order-received
	.woocommerce-order-details::after {
	position: absolute;
	top: auto;
	right: -1px;
	bottom: -1px;

	width: 1.35rem;
	height: 1.35rem;

	border-right: 1px solid rgba(111, 203, 255, 0.45);
	border-bottom: 1px solid rgba(111, 203, 255, 0.45);
	border-radius: 0;

	background: none;

	content: "";

	box-shadow: none;

	transform: none;

	pointer-events: none;
}


/* ==========================================================================
   Order-details title
   ========================================================================== */

body.jr-dark-commerce.woocommerce-checkout.woocommerce-order-received
	.woocommerce-order-details__title {
	position: relative;

	margin:
		0
		0
		1.2rem;

	padding: 0;

	color: var(--jr-text);

	font-size: clamp(1.35rem, 1.25rem + 0.25vw, 1.65rem);
	font-weight: 760;
	letter-spacing: -0.025em;
	line-height: 1.2;
}


body.jr-dark-commerce.woocommerce-checkout.woocommerce-order-received
	h2.woocommerce-order-details__title::after {
	display: block;

	width: 3.5rem;
	height: 1px;

	margin-top: 1rem;

	background:
		linear-gradient(
			90deg,
			var(--jr-green-light),
			transparent
		);

	box-shadow:
		0 0 1rem rgba(45, 166, 83, 0.2);

	content: "";
}


/* ==========================================================================
   Order-details table
   ========================================================================== */

body.jr-dark-commerce.woocommerce-checkout.woocommerce-order-received
	table.woocommerce-table--order-details {
	width: 100%;

	margin: 0;

	border: 0;
	border-collapse: collapse;
	border-spacing: 0;

	background: transparent;

	color: var(--jr-text);
}


/* ==========================================================================
   Order table heading
   ========================================================================== */

body.jr-dark-commerce.woocommerce-checkout.woocommerce-order-received
	table.woocommerce-table--order-details
	thead
	th {
	padding:
		0
		0
		0.8rem;

	border: 0;
	border-bottom: 1px solid var(--jr-confirm-border);

	background: transparent;

	color: var(--jr-confirm);

	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	line-height: 1.2;

	text-transform: uppercase;
}


body.jr-dark-commerce.woocommerce-checkout.woocommerce-order-received
	table.woocommerce-table--order-details
	.product-total {
	text-align: right;
}


/* ==========================================================================
   Order products
   ========================================================================== */

body.jr-dark-commerce.woocommerce-checkout.woocommerce-order-received
	table.woocommerce-table--order-details
	tbody
	tr {
	border: 0;
	border-bottom: 1px solid var(--jr-confirm-border);

	background: transparent;
}


body.jr-dark-commerce.woocommerce-checkout.woocommerce-order-received
	table.woocommerce-table--order-details
	tbody
	td {
	padding:
		0.85rem
		0;

	border: 0;

	background: transparent;

	color: var(--jr-text);

	font-size: 0.94rem;
	line-height: 1.45;

	vertical-align: middle;
}


/* ==========================================================================
   Product names
   ========================================================================== */

body.jr-dark-commerce.woocommerce-checkout.woocommerce-order-received
	table.woocommerce-table--order-details
	td.product-name {
	padding-right: 1.5rem;
}


body.jr-dark-commerce.woocommerce-checkout.woocommerce-order-received
	table.woocommerce-table--order-details
	td.product-name
	a {
	color: var(--jr-text);

	text-decoration: none;

	transition:
		color 160ms ease;
}


@media (hover: hover) and (pointer: fine) {

	body.jr-dark-commerce.woocommerce-checkout.woocommerce-order-received
		table.woocommerce-table--order-details
		td.product-name
		a:hover {
		color: var(--jr-green-light);
	}
}


body.jr-dark-commerce.woocommerce-checkout.woocommerce-order-received
	table.woocommerce-table--order-details
	.product-quantity {
	margin-left: 0.35rem;

	color: var(--jr-confirm-muted);

	font-size: 0.84rem;
	font-weight: 700;

	white-space: nowrap;
}


/* ==========================================================================
   Product totals
   ========================================================================== */

body.jr-dark-commerce.woocommerce-checkout.woocommerce-order-received
	table.woocommerce-table--order-details
	td.product-total {
	color: var(--jr-text);

	font-size: 0.94rem;

	white-space: nowrap;
}


/* ==========================================================================
   Order totals
   ========================================================================== */

body.jr-dark-commerce.woocommerce-checkout.woocommerce-order-received
	table.woocommerce-table--order-details
	tfoot
	tr {
	border: 0;
	border-bottom: 1px solid var(--jr-confirm-border);

	background: transparent;
}


body.jr-dark-commerce.woocommerce-checkout.woocommerce-order-received
	table.woocommerce-table--order-details
	tfoot
	tr:last-child {
	border-bottom: 0;
}


body.jr-dark-commerce.woocommerce-checkout.woocommerce-order-received
	table.woocommerce-table--order-details
	tfoot
	th,
body.jr-dark-commerce.woocommerce-checkout.woocommerce-order-received
	table.woocommerce-table--order-details
	tfoot
	td {
	padding:
		0.85rem
		0;

	border: 0;

	background: transparent;

	color: var(--jr-text);

	font-size: 0.94rem;
	line-height: 1.45;
}


body.jr-dark-commerce.woocommerce-checkout.woocommerce-order-received
	table.woocommerce-table--order-details
	tfoot
	th {
	width: 45%;

	font-weight: 700;

	text-align: left;
}


body.jr-dark-commerce.woocommerce-checkout.woocommerce-order-received
	table.woocommerce-table--order-details
	tfoot
	td {
	font-weight: 600;

	text-align: right;
}


/* ==========================================================================
   Final total
   ========================================================================== */

body.jr-dark-commerce.woocommerce-checkout.woocommerce-order-received
	table.woocommerce-table--order-details
	tfoot
	tr:nth-last-child(2)
	th,
body.jr-dark-commerce.woocommerce-checkout.woocommerce-order-received
	table.woocommerce-table--order-details
	tfoot
	tr:nth-last-child(2)
	td {
	font-size: 1.05rem;
	font-weight: 800;
}


/* ==========================================================================
   Shipping method detail
   ========================================================================== */

body.jr-dark-commerce.woocommerce-checkout.woocommerce-order-received
	.shipped_via {
	color: var(--jr-confirm-muted);

	font-size: 0.78rem;
	font-weight: 500;
}


/* ==========================================================================
   Customer details
   ========================================================================== */

body.jr-dark-commerce.woocommerce-checkout.woocommerce-order-received
	.woocommerce-customer-details {
	width: 100%;

	margin: 0;
	padding: 0;
}


/* ==========================================================================
   Address grid
   ========================================================================== */

body.jr-dark-commerce.woocommerce-checkout.woocommerce-order-received
	.woocommerce-columns--addresses {
	display: grid;

	grid-template-columns:
		repeat(2, minmax(0, 1fr));

	gap: 1.5rem;

	width: 100%;

	margin: 0;
	padding: 0;
}


/* ==========================================================================
   Address panels
   ========================================================================== */

body.jr-dark-commerce.woocommerce-checkout.woocommerce-order-received
	.woocommerce-columns--addresses
	> .woocommerce-column {
	position: relative;

	float: none;

	width: 100%;
	min-width: 0;

	margin: 0;

	padding:
		1.35rem
		1.4rem;

	border: 1px solid var(--jr-confirm-border-strong);
	border-radius: 0;

	background:
		linear-gradient(
			135deg,
			rgba(255, 255, 255, 0.022),
			transparent 42%
		),
		rgba(7, 13, 21, 0.42);

	color: var(--jr-text);

	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.02);
}


/**
 * Small interface marker rather than boxing the heading separately.
 */
body.jr-dark-commerce.woocommerce-checkout.woocommerce-order-received
	.woocommerce-columns--addresses
	> .woocommerce-column::before {
	position: absolute;
	top: -1px;
	left: -1px;

	width: 1.15rem;
	height: 1.15rem;

	border-top: 1px solid var(--jr-green-light);
	border-left: 1px solid var(--jr-green-light);

	content: "";

	pointer-events: none;
}


/* ==========================================================================
   Address headings
   ========================================================================== */

body.jr-dark-commerce.woocommerce-checkout.woocommerce-order-received
	.woocommerce-column__title {
	position: relative;

	margin:
		0
		0
		1rem;

	padding: 0;

	border: 0;

	color: var(--jr-text);

	font-size: 1.2rem;
	font-weight: 740;
	letter-spacing: -0.02em;
	line-height: 1.25;
}


body.jr-dark-commerce.woocommerce-checkout.woocommerce-order-received
	.woocommerce-column__title::after {
	display: block;

	width: 3rem;
	height: 1px;

	margin-top: 0.75rem;

	background:
		linear-gradient(
			90deg,
			var(--jr-green-light),
			transparent
		);

	box-shadow:
		0 0 1rem rgba(45, 166, 83, 0.2);

	content: "";
}


/* ==========================================================================
   Address text
   ========================================================================== */

body.jr-dark-commerce.woocommerce-checkout.woocommerce-order-received
	.woocommerce-customer-details
	address {
	margin: 0;
	padding: 0;

	border: 0;

	background: transparent;

	font-style: normal;
	font-size: 0.9rem;
	line-height: 1.65;

	box-shadow: none;
}


/* ==========================================================================
   Customer phone / email
   ========================================================================== */

body.jr-dark-commerce.woocommerce-checkout.woocommerce-order-received
	.woocommerce-customer-details--phone,
body.jr-dark-commerce.woocommerce-checkout.woocommerce-order-received
	.woocommerce-customer-details--email {
	margin:
		0.75rem
		0
		0;

	padding:
		0.7rem
		0
		0;

	border-top: 1px solid var(--jr-confirm-border);

	color: var(--jr-text);

	font-size: 0.86rem;
	line-height: 1.45;
}


/* ==========================================================================
   Empty Shoptimizer thank-you custom area
   ========================================================================== */

body.jr-dark-commerce.woocommerce-checkout.woocommerce-order-received
	.thankyou-custom-field:empty {
	display: none;
}


/* ==========================================================================
   Tablet
   ========================================================================== */

@media (max-width: 900px) {

	body.jr-dark-commerce.woocommerce-checkout.woocommerce-order-received
		ul.woocommerce-order-overview {
		grid-template-columns:
			repeat(2, minmax(0, 1fr));

		gap: 1rem;
	}


	body.jr-dark-commerce.woocommerce-checkout.woocommerce-order-received
		ul.woocommerce-order-overview
		> li,
	body.jr-dark-commerce.woocommerce-checkout.woocommerce-order-received
		ul.woocommerce-order-overview
		> li:first-child,
	body.jr-dark-commerce.woocommerce-checkout.woocommerce-order-received
		ul.woocommerce-order-overview
		> li:last-child {
		padding: 0;

		border-right: 0;
	}


	body.jr-dark-commerce.woocommerce-checkout.woocommerce-order-received
		.woocommerce-columns--addresses {
		grid-template-columns:
			minmax(0, 1fr);
	}
}


/* ==========================================================================
   Mobile
   ========================================================================== */

@media (max-width: 620px) {

	body.jr-dark-commerce.woocommerce-checkout.woocommerce-order-received
		.woocommerce-thankyou-order-received {
		align-items: flex-start;

		padding:
			0.9rem
			1rem;
	}


	body.jr-dark-commerce.woocommerce-checkout.woocommerce-order-received
		ul.woocommerce-order-overview {
		grid-template-columns:
			minmax(0, 1fr);

		padding:
			1rem;
	}


	body.jr-dark-commerce.woocommerce-checkout.woocommerce-order-received
		ul.woocommerce-order-overview
		> li {
		padding:
			0
			0
			0.8rem;

		border-bottom: 1px solid var(--jr-confirm-border);
	}


	body.jr-dark-commerce.woocommerce-checkout.woocommerce-order-received
		ul.woocommerce-order-overview
		> li:last-child {
		padding-bottom: 0;

		border-bottom: 0;
	}


	body.jr-dark-commerce.woocommerce-checkout.woocommerce-order-received
		.woocommerce-order-details {
		padding:
			1.25rem
			1rem;
	}


	body.jr-dark-commerce.woocommerce-checkout.woocommerce-order-received
		table.woocommerce-table--order-details
		tbody
		td {
		font-size: 0.88rem;
	}


	body.jr-dark-commerce.woocommerce-checkout.woocommerce-order-received
		table.woocommerce-table--order-details
		td.product-name {
		padding-right: 0.75rem;
	}


	body.jr-dark-commerce.woocommerce-checkout.woocommerce-order-received
		.woocommerce-columns--addresses
		> .woocommerce-column {
		padding:
			1.2rem
			1rem;
	}
}


/* ==========================================================================
   Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

	body.jr-dark-commerce.woocommerce-checkout.woocommerce-order-received
		table.woocommerce-table--order-details
		td.product-name
		a {
		transition: none;
	}
}