/**
 * Cart page — refs 05 (desktop two-column) / 06 (mobile cards + sticky
 * checkout bar).
 */

/* Approved cart composition (issue-09-cart/approved-desktop.png): the
 * order summary sits on the PHYSICAL RIGHT with the wide items panel on the
 * physical left. In this RTL document the first grid column is the physical
 * right, so the summary is column 1. */
.nbf-cart__layout {
	display: grid;
	grid-template-columns: 21rem 1fr;
	grid-template-areas: "summary items";
	gap: var(--nbf-space-6);
	align-items: start;
	margin-block: var(--nbf-space-6) var(--nbf-section-gap);
}

.nbf-cart__layout > * {
	min-inline-size: 0;
}

.nbf-cart__items {
	grid-area: items;
	padding: var(--nbf-space-2) var(--nbf-space-4) var(--nbf-space-4);
}

.nbf-cart__aside {
	grid-area: summary;
}

/* --- Desktop row layout with column captions --- */
.nbf-cart__columns,
.nbf-cart-item {
	display: grid;
	grid-template-columns: 7rem minmax(0, 1.7fr) minmax(0, 1.2fr) minmax(0, 0.9fr) auto auto 2.5rem;
	gap: var(--nbf-space-3);
	align-items: center;
}

.nbf-cart__columns {
	padding-block: var(--nbf-space-3);
	border-block-end: 1px solid var(--nbf-color-border);
	font-size: var(--nbf-fs-xs);
	font-weight: var(--nbf-fw-bold);
	color: var(--nbf-color-text-2);
}

.nbf-cart-item {
	padding-block: var(--nbf-space-4);
	border-block-end: 1px solid var(--nbf-color-border);
}

.nbf-cart-item:last-of-type {
	border-block-end: 0;
}

.nbf-cart-item__people-note {
	margin: var(--nbf-space-1) 0 0;
	font-size: var(--nbf-fs-2xs);
	color: var(--nbf-color-text-3);
}

.nbf-cart-item__unit,
.nbf-cart-item__total {
	display: grid;
	gap: 0.125rem;
	font-variant-numeric: normal;
}

.nbf-breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--nbf-space-2);
    padding-block: var(--nbf-space-4);
    font-size: var(--nbf-fs-xs);
    color: var(--nbf-color-text-3);
}

.nbf-cart-item__total-value {
	font-weight: var(--nbf-fw-black);
	color: var(--nbf-color-primary-700);
}

.nbf-cart-item__media img {
	inline-size: 7rem;
	block-size: 5.25rem;
	object-fit: cover;
	border-radius: var(--nbf-radius-md);
	background: var(--nbf-color-surface-sunken);
}

.nbf-cart-item__title {
	font-size: var(--nbf-fs-md);
	margin-block-end: var(--nbf-space-1);
}

.nbf-cart-item__title a {
	color: var(--nbf-color-text);
}

.nbf-cart-item__row {
	display: flex;
	align-items: center;
	gap: var(--nbf-space-1);
	margin: 0 0 var(--nbf-space-1);
	font-size: var(--nbf-fs-xs);
	color: var(--nbf-color-text-2);
}

.nbf-cart-item__row .nbf-icon {
	color: var(--nbf-color-primary-600);
	flex-shrink: 0;
}

.nbf-cart-item__price-label {
	display: block;
	font-size: var(--nbf-fs-2xs);
	font-weight: var(--nbf-fw-regular);
	color: var(--nbf-color-text-3);
}

/* The desktop header row already names every column, so the per-cell
 * labels and the people note belong to the mobile cards only. (This must
 * follow the base display declarations above to win the cascade.) */
@media (min-width: 1024px) {
	.nbf-cart-item__price-label,
	.nbf-cart-item__people-note {
		display: none;
	}
}

.nbf-cart-item__remove {
	color: var(--nbf-color-error);
	border-color: transparent;
}

.nbf-cart-item__remove:hover {
	background: var(--nbf-color-error-bg);
	border-color: transparent;
	color: var(--nbf-color-error);
}

/* --- Actions row --- */
.nbf-cart__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--nbf-space-3);
	padding-block-start: var(--nbf-space-2);
}

.nbf-cart__coupon {
	display: flex;
	gap: var(--nbf-space-2);
	flex: 1;
	max-inline-size: 24rem;
}

.nbf-cart__coupon .nbf-btn {
	white-space: nowrap;
	flex-shrink: 0;
}

/* --- Summary --- */
.nbf-cart-summary {
	padding: var(--nbf-space-5);
	position: sticky;
	inset-block-start: calc(4.5rem + var(--nbf-space-4));
}

.nbf-cart-summary__title {
	display: flex;
	align-items: center;
	gap: var(--nbf-space-2);
	font-size: var(--nbf-fs-md);
	margin-block-end: var(--nbf-space-4);
}

.nbf-cart-summary__rows {
	display: grid;
	gap: var(--nbf-space-2);
	margin: 0 0 var(--nbf-space-4);
}

.nbf-cart-summary__row {
	display: flex;
	justify-content: space-between;
	gap: var(--nbf-space-2);
	font-size: var(--nbf-fs-sm);
	color: var(--nbf-color-text-2);
}

.nbf-cart-summary__row dd {
	margin: 0;
	font-weight: var(--nbf-fw-medium);
	color: var(--nbf-color-text);
}

.nbf-cart-summary__row--discount dd {
	color: var(--nbf-color-success);
}

.nbf-cart-summary__remove-coupon {
	font-size: var(--nbf-fs-2xs);
}

.nbf-cart-summary__total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding-block: var(--nbf-space-3);
	margin-block-end: var(--nbf-space-4);
	border-block: 1px solid var(--nbf-color-border);
	font-weight: var(--nbf-fw-bold);
}

.nbf-cart-summary__total-value {
	font-size: var(--nbf-fs-xl);
	color: var(--nbf-color-primary-700);
}

.nbf-cart-summary__hold {
	display: flex;
	align-items: flex-start;
	gap: var(--nbf-space-2);
	margin: var(--nbf-space-3) 0 0;
	font-size: var(--nbf-fs-xs);
	color: var(--nbf-color-text-2);
	background: var(--nbf-color-info-bg);
	border-radius: var(--nbf-radius-sm);
	padding: var(--nbf-space-2) var(--nbf-space-3);
}

.nbf-cart-summary__trust {
	list-style: none;
	margin: var(--nbf-space-4) 0 0;
	padding: 0;
	display: grid;
	gap: var(--nbf-space-2);
	font-size: var(--nbf-fs-xs);
	color: var(--nbf-color-text-2);
}

.nbf-cart-summary__trust li {
	display: flex;
	align-items: center;
	gap: var(--nbf-space-2);
}

.nbf-cart-summary__trust .nbf-icon {
	color: var(--nbf-color-success);
}

/* --- Empty state --- */
.nbf-cart__empty-card {
	max-inline-size: 28rem;
	margin-inline: auto;
	margin-block: var(--nbf-space-12);
	padding: var(--nbf-space-8);
	text-align: center;
}

.nbf-cart__empty-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 5rem;
	block-size: 5rem;
	border-radius: 50%;
	background: var(--nbf-color-primary-50);
	color: var(--nbf-color-primary-600);
	margin-block-end: var(--nbf-space-4);
}

/* --- Sticky mobile checkout bar --- */
.nbf-cart__sticky-checkout {
	display: none;
}

@media (max-width: 1023px) {
	.nbf-cart__layout {
		grid-template-columns: 1fr;
	}

	.nbf-cart-summary {
		position: static;
	}

	.nbf-cart__layout {
		grid-template-columns: 1fr;
		grid-template-areas:
			"items"
			"summary";
	}

	/* Mobile: each line becomes a readable stacked card, not a squeezed
	 * desktop table. */
	.nbf-cart__columns {
		display: none;
	}

	.nbf-cart__items {
		background: none;
		border: 0;
		box-shadow: none;
		padding: 0;
		display: grid;
		gap: var(--nbf-space-3);
	}

	.nbf-cart-item {
		grid-template-columns: 5.5rem minmax(0, 1fr) auto;
		grid-template-areas:
			"media  details remove"
			"media  booking booking"
			"people people  people"
			"unit   unit    unit"
			"total  total   total";
		gap: var(--nbf-space-2) var(--nbf-space-3);
		align-items: start;
		padding: var(--nbf-space-4);
		background: var(--nbf-color-surface);
		border: 1px solid var(--nbf-color-border);
		border-radius: var(--nbf-radius-lg);
		box-shadow: var(--nbf-shadow-sm);
	}

	.nbf-cart-item__media { grid-area: media; }
	.nbf-cart-item__media img { inline-size: 5.5rem; block-size: 4.25rem; }
	.nbf-cart-item__details { grid-area: details; }
	.nbf-cart-item__booking { grid-area: booking; }
	.nbf-cart-item__people { grid-area: people; }
	.nbf-cart-item__actions { grid-area: remove; justify-self: end; }

	/* Label and amount share one readable line each — they were stacked
	 * into a 5.5rem column and overlapped. */
	.nbf-cart-item__unit,
	.nbf-cart-item__total {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: var(--nbf-space-3);
	}

	.nbf-cart-item__unit { grid-area: unit; }
	.nbf-cart-item__total { grid-area: total; }

	.nbf-cart-item__unit {
		border-block-start: 1px dashed var(--nbf-color-border);
		padding-block-start: var(--nbf-space-2);
	}

	.nbf-cart-item__price-label {
		display: inline;
		font-size: var(--nbf-fs-xs);
	}

	.nbf-cart__sticky-checkout {
		position: fixed;
		inset-inline: 0;
		inset-block-end: calc(3.5rem + env(safe-area-inset-bottom, 0px));
		z-index: var(--nbf-z-sticky);
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--nbf-space-3);
		padding: var(--nbf-space-3) var(--nbf-space-4);
		background: var(--nbf-color-surface);
		border-block-start: 1px solid var(--nbf-color-border);
		box-shadow: 0 -4px 16px rgb(16 44 84 / 0.08);
	}

	.nbf-cart__sticky-total {
		font-weight: var(--nbf-fw-black);
		color: var(--nbf-color-primary-700);
	}

	.nbf-cart__sticky-btn {
		flex: 1 1 auto;
		min-inline-size: 0;
	}

	body.woocommerce-cart {
		padding-block-end: calc(8.25rem + env(safe-area-inset-bottom, 0px));
	}
}