/**
 * Cart page styles ("Carrito" frame 85:2271).
 *
 * @package Vaer_Theme
 */

body.woocommerce-cart {
	background: var(--color-gray-25);
}

.vaer-cart {
	/* main already pads 24px per side; +16 here totals the 40px of the design. */
	padding: 32px 16px 64px;
	min-height: 60vh;
}

/* Page template prints its own entry title before the shortcode output. */
body.woocommerce-cart .entry-header {
	display: none;
}

/* --- Title --- */

.vaer-cart__title {
	margin: 0;
	font-family: var(--font-family-primary);
	font-size: var(--font-size-3xl);
	font-weight: 700;
	color: var(--color-gray-900);
}

/* --- Layout --- */

.vaer-cart-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 322px;
	gap: var(--space-24);
	align-items: start;
	margin-top: var(--space-24);
}

/* --- Table --- */

.vaer-cart-table {
	background: var(--color-white);
	border: 1px solid var(--color-gray-300);
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.vaer-cart-head,
.vaer-cart-row,
.vaer-cart-footer {
	display: grid;
	/* Fixed tracks so header columns line up with cells (auto would size to each grid's own content). */
	grid-template-columns: minmax(0, 1fr) 100px 64px 100px 100px 116px;
	column-gap: var(--space-16);
	padding: 0 16px;
}

.vaer-cart-head {
	align-items: center;
	height: 49px;
	border-bottom: 1px solid var(--color-gray-150);
}

.vaer-cart-head span {
	font-size: var(--font-size-xs);
	font-weight: 500;
	color: var(--color-gray-900);
	text-align: center;
}

.vaer-cart-head span:first-child {
	text-align: left;
}

.vaer-cart-row {
	align-items: center;
	min-height: 108px;
	border-bottom: 1px solid var(--color-gray-150);
	padding-top: var(--space-16);
	padding-bottom: var(--space-16);
}

.vaer-cart-row:last-of-type {
	border-bottom: 0;
}

/* Product cell */

.vaer-cart-product {
	display: flex;
	align-items: center;
	gap: var(--space-16);
	min-width: 0;
}

.vaer-cart-product__img {
	flex-shrink: 0;
	width: 64px;
	height: 64px;
	border-radius: var(--radius-sm);
	overflow: hidden;
}

.vaer-cart-product__img img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.vaer-cart-product__info {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.vaer-cart-product__code {
	font-size: var(--font-size-xs);
	color: var(--color-gray-600);
}

.vaer-cart-product__name {
	font-size: var(--font-size-sm);
	line-height: 1.25;
	color: var(--color-text-primary);
	text-decoration: none;
	display: block;
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.vaer-cart-stock {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.vaer-cart-stock__dot {
	width: 8px;
	height: 8px;
	border-radius: var(--radius-full);
}

.vaer-cart-stock__dot.is-alta {
	background: var(--color-green-500);
}

.vaer-cart-stock__dot.is-media {
	background: var(--color-yellow-500);
}

.vaer-cart-stock__dot.is-baja {
	background: var(--color-red-500);
}

.vaer-cart-stock__label {
	font-size: var(--font-size-xs);
	color: var(--color-gray-900);
}

/* Numeric cells */

.vaer-cart-cell {
	text-align: center;
	font-size: var(--font-size-sm);
	color: var(--color-text-primary);
}

/* Quantity stepper */

.vaer-cart-stepper {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid var(--color-gray-300);
	border-radius: var(--radius-sm);
	height: 32px;
	overflow: hidden;
}

.vaer-cart-stepper__btn {
	width: 24px;
	border: 0;
	background: none;
	padding: 0;
	font-size: var(--font-size-base);
	line-height: 1;
	color: var(--color-text-primary);
	cursor: pointer;
}

.vaer-cart-stepper__btn:hover {
	background: var(--color-gray-75);
}

.vaer-cart-stepper__input {
	width: 44px;
	min-width: 44px;
	border: 0;
	padding: 0;
	text-align: center;
	font-size: var(--font-size-sm);
	color: var(--color-text-primary);
	background: none;
	-moz-appearance: textfield;
	appearance: textfield;
}

.vaer-cart-stepper__input::-webkit-outer-spin-button,
.vaer-cart-stepper__input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Total + remove */

.vaer-cart-cell--total {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-16);
	min-width: 100px;
}

.vaer-cart-cell__amount {
	font-size: var(--font-size-sm);
	font-weight: 600;
	white-space: nowrap;
}

.vaer-cart-remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border: 1px solid var(--color-gray-300);
	border-radius: var(--radius-md);
	color: var(--color-text-primary);
	background: none;
	text-decoration: none;
}

.vaer-cart-remove:hover {
	border-color: var(--color-red-500);
	color: var(--color-red-500);
}

/* Footer actions */

.vaer-cart-footer {
	align-items: center;
	height: 70px;
	border-top: 1px solid var(--color-gray-150);
}

.vaer-cart-footer__continue {
	grid-column: 1;
	display: inline-flex;
	align-items: center;
	gap: var(--space-8);
	font-size: var(--font-size-sm);
	color: var(--color-green-700);
	text-decoration: none;
}

.vaer-cart-footer__continue:hover {
	text-decoration: underline;
}

/* --- Summary --- */

.vaer-cart-summary {
	background: var(--color-white);
	border: 1px solid var(--color-gray-300);
	border-radius: var(--radius-lg);
	padding: 25px;
	position: sticky;
	top: 105px;
}

.vaer-cart-summary__title {
	margin: 0 0 var(--space-24);
	font-size: var(--font-size-lg);
	font-weight: 700;
	color: var(--color-gray-900);
}

.vaer-cart-summary__rows {
	display: flex;
	flex-direction: column;
	gap: var(--space-16);
}

.vaer-cart-summary__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-16);
	font-size: var(--font-size-sm);
	color: var(--color-text-primary);
}

.vaer-cart-summary__sep {
	height: 1px;
	background: var(--color-gray-150);
}

.vaer-cart-summary__row--total span:first-child {
	font-weight: 700;
}

.vaer-cart-summary__row--discount {
	color: var(--color-green-600);
}

.vaer-cart-summary__row--discount span:last-child {
	font-weight: 700;
}

.vaer-cart-summary__row--total span:last-child {
	font-size: var(--font-size-xl);
	font-weight: 700;
	line-height: 1.33;
}

.vaer-cart-summary__checkout {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: var(--space-16);
	height: 53px;
	padding: 15px 24px;
	background: var(--color-green-500);
	border-radius: var(--radius-md);
	font-size: var(--font-size-sm);
	font-weight: 700;
	color: var(--color-white);
	text-decoration: none;
	transition: opacity 0.15s ease;
}

.vaer-cart-summary__checkout:hover {
	opacity: 0.85;
	color: var(--color-white);
}

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

.vaer-cart-empty {
	margin-top: var(--space-24);
	background: var(--color-white);
	border: 1px solid var(--color-gray-300);
	border-radius: var(--radius-lg);
	padding: var(--space-64) var(--space-32);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-24);
	text-align: center;
}

.vaer-cart-empty__title {
	margin: 0;
	font-family: var(--font-family-primary);
	font-size: var(--font-size-3xl);
	font-weight: 700;
	color: var(--color-gray-900);
}

.vaer-cart-empty__cta {
	display: inline-flex;
	align-items: center;
	height: 42px;
	padding: 12px 24px;
	background: var(--color-green-500);
	border-radius: var(--radius-md);
	font-size: var(--font-size-xs);
	font-weight: 700;
	color: var(--color-white);
	text-decoration: none;
}

.vaer-cart-empty__cta:hover {
	opacity: 0.85;
	color: var(--color-white);
}

/* --- AJAX updating --- */

.vaer-cart-layout.is-updating .vaer-cart-form,
.vaer-cart-layout.is-updating .vaer-cart-summary {
	opacity: 0.5;
	pointer-events: none;
	transition: opacity 0.15s ease;
}

/* --- WooCommerce notices --- */

.vaer-cart .woocommerce-notices-wrapper {
	margin-top: var(--space-24);
}

.vaer-cart .woocommerce-notices-wrapper:empty {
	display: none;
}

.vaer-cart .woocommerce-notices-wrapper .woocommerce-message,
.vaer-cart .woocommerce-info {
	border-top-color: var(--color-green-500);
}

/* --- Responsive --- */

@media (max-width: 1180px) {

	.vaer-cart-head,
	.vaer-cart-row,
	.vaer-cart-footer {
		grid-template-columns: minmax(0, 1fr) 80px 56px 90px 90px 116px;
	}
}

@media (max-width: 1024px) {

	.vaer-cart-layout {
		grid-template-columns: 1fr;
	}

	.vaer-cart-summary {
		position: static;
		max-width: 480px;
	}
}

@media (max-width: 768px) {

	.vaer-cart {
		padding: 24px 0 48px;
	}

	.vaer-cart-head {
		display: none;
	}

	.vaer-cart-row {
		grid-template-columns: 1fr 1fr;
		gap: var(--space-16);
		padding: var(--space-16);
	}

	.vaer-cart-product {
		grid-column: 1 / -1;
	}

	.vaer-cart-cell {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		gap: var(--space-8);
		text-align: left;
	}

	.vaer-cart-cell::before {
		content: attr(data-label);
		font-size: var(--font-size-2xs);
		font-weight: 500;
		color: var(--color-gray-600);
	}

	.vaer-cart-cell--qty,
	.vaer-cart-cell--total {
		justify-content: flex-start;
	}

	.vaer-cart-cell--total {
		grid-column: 1 / -1;
	}

	.vaer-cart-footer {
		grid-template-columns: 1fr;
		height: auto;
		padding: var(--space-16);
		gap: var(--space-16);
	}

	.vaer-cart-footer__continue {
		grid-column: 1;
		justify-content: center;
	}
}

/* Modal de confirmación al eliminar un item. */
.vaer-remove-modal__text {
	font-size: var(--font-size-md);
	color: var(--color-gray-900);
	margin: 0 0 var(--space-24);
}

.vaer-remove-modal__actions {
	display: flex;
	gap: var(--space-12);
	justify-content: flex-end;
	flex-wrap: wrap;
}