/**
 * Shoptimizer and WooCommerce mini-cart drawer presentation.
 *
 * Migration-safe extraction from the canonical Jedi-Robe dark-commerce
 * stylesheet. Rule order and declarations are preserved for staging review.
 *
 * @package Jedi_Theme
 * @since   2026-08-25
 */

/* ==========================================================================
   Shoptimizer cart drawer
   ========================================================================== */

/**
 * Restyle the native Shoptimizer sidebar cart drawer for the Jedi-Robe
 * dark-commerce interface.
 *
 * Shoptimizer and WooCommerce remain responsible for opening, closing,
 * AJAX cart updates, item removal, scrolling and checkout behaviour.
 * This block changes presentation only.
 *
 * @package Jedi_Theme
 * @subpackage WooCommerce_Cart_Drawer
 * @since 1.0.0
 */


/* ==========================================================================
   Drawer shell
   ========================================================================== */

body.jr-dark-commerce
	#shoptimizerCartDrawer.shoptimizer-mini-cart-wrap {
	border-left: 1px solid rgba(205, 216, 226, 0.24);

	background:
		radial-gradient(
			circle at 100% 0,
			rgba(45, 166, 83, 0.055),
			transparent 24rem
		),
		linear-gradient(
			180deg,
			var(--jr-surface-raised),
			var(--jr-bg-deep)
		);

	color: var(--jr-text);

	box-shadow:
		-1.25rem 0 3.25rem rgba(0, 0, 0, 0.42),
		inset 1px 0 0 rgba(255, 255, 255, 0.018);
}


/* ==========================================================================
   Drawer heading
   ========================================================================== */

/**
 * Style the cart heading as compact interface metadata.
 */
body.jr-dark-commerce
	#shoptimizerCartDrawer
	.cart-drawer-heading {
	padding:
		0.4rem
		3.75rem
		1.1rem
		0;

	color: var(--jr-text);

	font-size: 1.1rem;
	font-weight: 600;
	letter-spacing: 0.075em;
	line-height: 1.2;

	text-transform: uppercase;
}


/* ==========================================================================
   Close control
   ========================================================================== */

/**
 * Keep the close control lightweight rather than rendering another filled
 * button inside the cart interface.
 */
body.jr-dark-commerce
	#shoptimizerCartDrawer
	.close-drawer {
	top: 0.7rem;
	right: 1rem;

	width: 2.5rem;
	height: 2.5rem;

	border: 0;
	border-radius: 0;

	background: transparent;

	color: var(--jr-text);

	box-shadow: none;

	transition:
		color 180ms ease,
		transform 180ms ease;
}


body.jr-dark-commerce
	#shoptimizerCartDrawer
	.close-drawer
	svg {
	width: 1.35rem;
	height: 1.35rem;

	color: currentcolor;

	stroke: currentcolor;
	stroke-width: 1.4;
}

body.jr-dark-commerce .shoptimizer-mini-cart-wrap .woocommerce-mini-cart__empty-message {
  color: var(--jr-text);
}

body.jr-dark-commerce
	#shoptimizerCartDrawer
	.close-drawer {
	color: rgba(255, 255, 255, 0.72);

	filter: none;
	box-shadow: none;

	transition:
		color 160ms ease,
		opacity 160ms ease;
}


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

	body.jr-dark-commerce
		#shoptimizerCartDrawer
		.close-drawer:hover {
		background: transparent;

		color: #fff;
		opacity: 1;

		filter: none;
		box-shadow: none;
		transform: none;
	}
}


/* ==========================================================================
   WooCommerce mini-cart surface
   ========================================================================== */

body.jr-dark-commerce
	#shoptimizerCartDrawer
	.widget,
body.jr-dark-commerce
	#shoptimizerCartDrawer
	.widget_shopping_cart,
body.jr-dark-commerce
	#shoptimizerCartDrawer
	.widget_shopping_cart_content {
	border: 0;

	background: transparent;

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


/* ==========================================================================
   Cart product list
   ========================================================================== */

body.jr-dark-commerce
	#shoptimizerCartDrawer
	.woocommerce-mini-cart {
	background: transparent;
	margin-top: 20px;
}


/**
 * Separate cart lines using the same neutral technical borders used elsewhere
 * in the dark-commerce interface.
 */
body.jr-dark-commerce
	#shoptimizerCartDrawer
	.woocommerce-mini-cart
	.mini_cart_item {
	border-bottom: 1px solid var(--jr-border);

	background: transparent;

	color: var(--jr-text);

	transition:
		background-color 180ms ease;
}


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

	body.jr-dark-commerce
		#shoptimizerCartDrawer
		.woocommerce-mini-cart
		.mini_cart_item:hover {
		background: rgba(45, 166, 83, 0.035);
	}
}


/* ==========================================================================
   Product links
   ========================================================================== */

body.jr-dark-commerce
	#shoptimizerCartDrawer
	.woocommerce-mini-cart
	.mini_cart_item
	> a:not(.remove) {
	color: var(--jr-text);

	font-weight: 600;
	line-height: 1.42;

	text-decoration: none;

	transition: color 180ms ease;
}


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

	body.jr-dark-commerce
		#shoptimizerCartDrawer
		.woocommerce-mini-cart
		.mini_cart_item
		> a:not(.remove):hover {
		color: var(--jr-green-bright);
	}
}


/* ==========================================================================
   Product thumbnails
   ========================================================================== */

/**
 * Keep commerce photography on a clean light surface while framing it against
 * the dark cart drawer.
 */
body.jr-dark-commerce
	#shoptimizerCartDrawer
	.woocommerce-mini-cart
	.mini_cart_item
	img {
	border: 1px solid rgba(152, 169, 192, 0.22);

	background: #fff;

	object-fit: contain;
}


/* ==========================================================================
   Quantity and line price
   ========================================================================== */

body.jr-dark-commerce
	#shoptimizerCartDrawer
	.woocommerce-mini-cart
	.quantity {
	color: var(--jr-text);

	font-size: 0.78rem;
	line-height: 1.35;
}


body.jr-dark-commerce
	#shoptimizerCartDrawer
	.woocommerce-mini-cart
	.quantity
	.amount {
	color: var(--jr-text);

	font-weight: 750;
}


/* ==========================================================================
   Remove item control
   ========================================================================== */

/**
 * Treat removal as a quiet destructive utility rather than another primary
 * action.
 */
body.jr-dark-commerce
	#shoptimizerCartDrawer
	.woocommerce-mini-cart
	a.remove_from_cart_button {
	border: 0;

	background: transparent;

	color: rgba(255, 255, 255, 0.45);

	font-size: 1.15rem;
	font-weight: 400;
	line-height: 1;

	text-decoration: none;

	transition:
		color 160ms ease,
		transform 160ms ease;
}


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

	body.jr-dark-commerce
		#shoptimizerCartDrawer
		.woocommerce-mini-cart
		a.remove_from_cart_button:hover {
		background: transparent;

		color: var(--jr-danger);

		transform: scale(1.08);
	}
}


/* ==========================================================================
   Cart subtotal
   ========================================================================== */

/**
 * Separate the transactional footer from the scrolling product list.
 */
body.jr-dark-commerce
	#shoptimizerCartDrawer
	.woocommerce-mini-cart__total {
	margin: 0;

	padding:
		1rem
		1.35rem;

	border-top: 1px solid rgba(69, 217, 107, 0.22);
	border-bottom: 1px solid var(--jr-border);

	background:
		linear-gradient(
			90deg,
			rgba(45, 166, 83, 0.055),
			transparent 65%
		);

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


body.jr-dark-commerce
	#shoptimizerCartDrawer
	.woocommerce-mini-cart__total
	strong {
	color: var(--jr-text);

	font-weight: 700;
}


body.jr-dark-commerce
	#shoptimizerCartDrawer
	.woocommerce-mini-cart__total
	.amount {
	color: var(--jr-text);

	font-weight: 800;
}


/* ==========================================================================
   Cart actions
   ========================================================================== */

body.jr-dark-commerce
	#shoptimizerCartDrawer
	.woocommerce-mini-cart__buttons {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.65rem;

	margin: 0;

	padding:
		0.9rem
		1.35rem
		1.25rem;

	background: var(--jr-bg-deep);
}


/**
 * Shared drawer action geometry.
 */
body.jr-dark-commerce
	#shoptimizerCartDrawer
	.woocommerce-mini-cart__buttons
	a.button {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 100%;
	min-height: 3rem;

	margin: 0;
	padding: 0.75rem 1rem;

	border-radius: 0.1875rem;

	font-size: 0.8rem;
	font-weight: 750;
	letter-spacing: 0.025em;
	line-height: 1.1;

	text-decoration: none;

	transform: translateY(0);

	transition:
		border-color 180ms ease,
		background-color 180ms ease,
		box-shadow 180ms ease,
		color 180ms ease,
		transform 180ms ease;
}


/* ==========================================================================
   View basket
   ========================================================================== */

/**
 * Keep View basket as the secondary dark action.
 */
body.jr-dark-commerce
	#shoptimizerCartDrawer
	.woocommerce-mini-cart__buttons
	a.button:not(.checkout) {
	border: 1px solid var(--jr-border);

	background: var(--jr-surface);

	color: var(--jr-text);

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


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

	body.jr-dark-commerce
		#shoptimizerCartDrawer
		.woocommerce-mini-cart__buttons
		a.button:not(.checkout):hover {
		border-color: rgba(69, 217, 107, 0.48);

		background: var(--jr-surface-hover);

		color: var(--jr-text);

		transform: translateY(-1px);
	}
}


/* ==========================================================================
   Checkout
   ========================================================================== */

/**
 * Preserve full green fill exclusively for the primary checkout action.
 */
body.jr-dark-commerce
	#shoptimizerCartDrawer
	.woocommerce-mini-cart__buttons
	a.checkout {
	border: 1px solid var(--jr-green-light);

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

	color: #07090d;

	box-shadow:
		0 0.7rem 1.5rem rgba(0, 0, 0, 0.22),
		0 0 1rem rgba(45, 166, 83, 0.08);
}


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

	body.jr-dark-commerce
		#shoptimizerCartDrawer
		.woocommerce-mini-cart__buttons
		a.checkout:hover {
		filter: brightness(1.06);

		transform: translateY(-1px);

		box-shadow:
			0 0.9rem 1.8rem rgba(0, 0, 0, 0.28),
			0 0 1.25rem rgba(45, 166, 83, 0.14);
	}
}


/* ==========================================================================
   Scrollbar
   ========================================================================== */

/**
 * Tone the mini-cart scrollbar into the surrounding dark interface.
 */
body.jr-dark-commerce
	#shoptimizerCartDrawer
	.widget_shopping_cart_content {
	scrollbar-color:
		rgba(152, 169, 192, 0.38)
		transparent;

	scrollbar-width: thin;
}


body.jr-dark-commerce
	#shoptimizerCartDrawer
	.widget_shopping_cart_content::-webkit-scrollbar {
	width: 0.4rem;
}


body.jr-dark-commerce
	#shoptimizerCartDrawer
	.widget_shopping_cart_content::-webkit-scrollbar-track {
	background: transparent;
}


body.jr-dark-commerce
	#shoptimizerCartDrawer
	.widget_shopping_cart_content::-webkit-scrollbar-thumb {
	border-radius: 999px;

	background: rgba(152, 169, 192, 0.32);
}


/* ==========================================================================
   Keyboard focus
   ========================================================================== */

body.jr-dark-commerce
	#shoptimizerCartDrawer
	:is(
		a,
		button
	):focus-visible {
	outline: 2px solid var(--jr-green-light);
	outline-offset: 2px;
}


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

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

	body.jr-dark-commerce
		#shoptimizerCartDrawer
		* {
		transition: none;
	}
}

body.jr-dark-commerce fieldset legend {
  color: var(--jr-text);
}


body.jr-dark-commerce .elementor-icon-list-items a {
  color: var(--jr-text);
}