/**
 * EMOBILITY FOR ALL - cart page (Phase 10).
 * Enqueued only on `/cart/` (see Cart_Page::maybe_enqueue_assets()), depends
 * on public.css's design tokens/components - buttons, badges, price,
 * alerts, and the `.emobility-qty` stepper are all reused as-is, this file
 * only adds the cart-specific layout around them.
 *
 * Breakpoints match public.css: sm: 576px  md: 768px  lg: 992px  xl: 1200px
 */

.emobility-cart {
	padding-block: var( --emobility-space-8 );
}

.emobility-cart__title {
	margin-bottom: var( --emobility-space-6 );
}

.emobility-cart__notice {
	margin-bottom: var( --emobility-space-6 );
}

/* ------------------------------------------------------------------ */
/* Layout: single column on mobile, main + sticky summary from lg up.  */
/* ------------------------------------------------------------------ */

.emobility-cart__layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: var( --emobility-space-8 );
	align-items: start;
}

@media ( min-width: 992px ) {
	.emobility-cart__layout {
		grid-template-columns: minmax( 0, 1fr ) 320px;
	}
}

.emobility-cart__aside {
	position: static;
}

@media ( min-width: 992px ) {
	.emobility-cart__aside {
		position: sticky;
		top: var( --emobility-space-6 );
	}
}

/* ------------------------------------------------------------------ */
/* Empty state.                                                        */
/* ------------------------------------------------------------------ */

.emobility-cart__empty {
	text-align: center;
	padding: var( --emobility-space-16 ) var( --emobility-space-6 );
	background: var( --emobility-color-surface-muted );
	border-radius: var( --emobility-radius-lg );
}

.emobility-cart__empty p {
	color: var( --emobility-color-text-muted );
	margin-bottom: var( --emobility-space-6 );
}

/* ------------------------------------------------------------------ */
/* Item list.                                                          */
/* ------------------------------------------------------------------ */

.emobility-cart-items {
	list-style: none;
	margin: 0 0 var( --emobility-space-6 );
	padding: 0;
	border-top: var( --emobility-border-width ) solid var( --emobility-color-border );
}

.emobility-cart-item {
	display: grid;
	grid-template-columns: 88px minmax( 0, 1fr ) auto auto auto auto;
	align-items: center;
	gap: var( --emobility-space-4 );
	padding-block: var( --emobility-space-5 );
	border-bottom: var( --emobility-border-width ) solid var( --emobility-color-border );
}

.emobility-cart-item--unavailable {
	background: var( --emobility-color-surface-muted );
}

.emobility-cart-item__media {
	width: 88px;
	height: 88px;
	border-radius: var( --emobility-radius-md );
	overflow: hidden;
	background: var( --emobility-color-surface-muted );
	flex-shrink: 0;
}

.emobility-cart-item__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.emobility-cart-item__placeholder {
	display: flex;
	width: 100%;
	height: 100%;
	background: var( --emobility-gray-100 );
}

.emobility-cart-item__info {
	min-width: 0;
}

.emobility-cart-item__brand {
	display: block;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-bottom: var( --emobility-space-1 );
}

.emobility-cart-item__title {
	margin: 0 0 var( --emobility-space-1 );
	font-size: var( --emobility-text-base );
}

.emobility-cart-item__title a {
	color: var( --emobility-color-heading );
	text-decoration: none;
}

.emobility-cart-item__title a:hover {
	color: var( --emobility-color-link );
	text-decoration: underline;
}

.emobility-cart-item__options {
	list-style: none;
	margin: 0 0 var( --emobility-space-1 );
	padding: 0;
	font-size: var( --emobility-text-sm );
}

.emobility-cart-item__sku {
	margin: 0 0 var( --emobility-space-1 );
}

.emobility-cart-item__issue {
	margin: var( --emobility-space-2 ) 0 0;
}

.emobility-cart-item__price,
.emobility-cart-item__total {
	font-size: var( --emobility-text-sm );
	white-space: nowrap;
	text-align: right;
}

.emobility-cart-item__total {
	font-weight: var( --emobility-font-weight-semibold );
}

.emobility-cart-item__qty-form {
	display: flex;
	align-items: center;
	gap: var( --emobility-space-2 );
}

.emobility-cart-item__update {
	white-space: nowrap;
}

.emobility-cart-item__remove-form {
	display: flex;
}

.emobility-cart-item__remove-btn {
	color: var( --emobility-danger );
	border-color: transparent;
}

.emobility-cart-item__remove-btn:hover {
	background: var( --emobility-danger-bg );
	color: var( --emobility-danger );
}

.emobility-cart__actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var( --emobility-space-4 );
}

.emobility-cart__clear-form {
	margin: 0;
}

/* Loading state while an AJAX request for one line/action is in flight. */
.js-emobility-cart-form.is-loading {
	opacity: 0.6;
	pointer-events: none;
}

/* ------------------------------------------------------------------ */
/* Mobile: stack each item into a labeled card instead of forcing the   */
/* desktop grid to squeeze into a narrow viewport (Section 34).         */
/* ------------------------------------------------------------------ */

@media ( max-width: 767px ) {
	.emobility-cart-item {
		grid-template-columns: 72px minmax( 0, 1fr );
		grid-template-areas:
			'media info'
			'media price'
			'qty   qty'
			'total remove';
		row-gap: var( --emobility-space-3 );
	}

	.emobility-cart-item__media {
		grid-area: media;
		width: 72px;
		height: 72px;
	}

	.emobility-cart-item__info {
		grid-area: info;
	}

	.emobility-cart-item__price {
		grid-area: price;
		text-align: left;
	}

	.emobility-cart-item__qty {
		grid-area: qty;
	}

	.emobility-cart-item__total {
		grid-area: total;
		text-align: left;
	}

	.emobility-cart-item__remove {
		grid-area: remove;
		text-align: right;
	}

	.emobility-cart-item__price::before,
	.emobility-cart-item__total::before {
		content: attr( data-label ) ': ';
		font-weight: var( --emobility-font-weight-normal );
		color: var( --emobility-color-text-muted );
	}

	.emobility-cart-item__qty-form {
		flex-wrap: wrap;
	}
}

/* ------------------------------------------------------------------ */
/* Summary card.                                                       */
/* ------------------------------------------------------------------ */

.emobility-cart-summary {
	background: var( --emobility-color-surface );
	border: var( --emobility-border-width ) solid var( --emobility-color-border );
	border-radius: var( --emobility-radius-lg );
	box-shadow: var( --emobility-shadow-sm );
	padding: var( --emobility-space-6 );
}

.emobility-cart-summary__title {
	margin-bottom: var( --emobility-space-4 );
	font-size: var( --emobility-text-lg );
}

.emobility-cart-summary__notice {
	margin-bottom: var( --emobility-space-4 );
}

.emobility-cart-summary__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-block: var( --emobility-space-2 );
	font-size: var( --emobility-text-base );
}

.emobility-cart-summary__row--subtotal {
	font-size: var( --emobility-text-lg );
	border-top: var( --emobility-border-width ) solid var( --emobility-color-border );
	margin-top: var( --emobility-space-2 );
	padding-top: var( --emobility-space-4 );
}

.emobility-cart-summary__hint {
	margin: var( --emobility-space-2 ) 0 var( --emobility-space-5 );
}

.emobility-cart-summary [aria-disabled='true'] {
	opacity: 0.5;
	pointer-events: none;
}

.emobility-cart-summary__continue {
	margin-top: var( --emobility-space-3 );
}

/* ------------------------------------------------------------------ */
/* Undo toast (cart.js) - reuses public.css's `.emobility-toast` base.  */
/* ------------------------------------------------------------------ */

.emobility-cart__toast {
	display: flex;
	align-items: center;
	gap: var( --emobility-space-3 );
}

/* public.css's base `.emobility-toast` is pointer-events:none (it's purely
   informational there) - this variant carries an interactive Undo button,
   so it needs to accept clicks once visible. */
.emobility-cart__toast.is-visible {
	pointer-events: auto;
}

.emobility-cart__toast-undo {
	background: transparent;
	border: none;
	color: var( --emobility-accent-400 );
	font-weight: var( --emobility-font-weight-semibold );
	text-decoration: underline;
	cursor: pointer;
	padding: 0;
}