.hide-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(24, 107, 155, 0.171);
	z-index: 1100;
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
	pointer-events: none;
	opacity: 0;
	transition: opacity 180ms ease;
}
.hide-overlay.active {
	pointer-events: auto;
	opacity: 1;
}

#basket-container {
	position: fixed;
	top: 40px; /* leave space for header */
	left: 50%;
	right: auto;
	width: 760px; /* wider by default */
	max-width: calc(100% - 48px);
	min-width: 420px;
	max-height: calc(100vh - 80px); /* cap height to viewport */
	background: #fff;
	border: 1px solid rgba(0,0,0,0.08);
	box-shadow: 0 8px 24px rgba(0,0,0,0.12);
	z-index: 1200;
	border-radius: 8px;
	overflow-y: auto; /* allow vertical scroll so footer is reachable */
	transition: transform 220ms ease, opacity 180ms ease;
	transform: translateX(-50%) translateY(0);
}

#basket-container.hidden {
	opacity: 0;
	pointer-events: none;
	transform: translateX(-50%) translateY(-8px) scale(0.995);
}


/* Table layout */
.basket-table {
	width: 100%;
	border-collapse: collapse;
	font-family: inherit;
	font-size: 14px;
	color: #222;
	display: block; /* allow making tbody scrollable while keeping header/footer visible */
}

/* Make thead/tfoot render as table rows so widths line up, but keep tbody scrollable */
.basket-table thead,
.basket-table tfoot {
	display: table;
	width: 100%;
	table-layout: fixed;
}

.basket-table tbody {
	display: block;
	max-height: 55vh; /* limit height so the list scrolls within modal */
	overflow-y: auto;
}

.basket-table tbody td {
	display: block; /* grid children should be block-level for reliable sizing */
	box-sizing: border-box;
}

/* Prefer explicit column widths to avoid awkward wrapping */
.basket-table thead th:nth-child(1), .basket-table tbody td:nth-child(1) { width: 64px; }
.basket-table thead th:nth-child(2), .basket-table tbody td:nth-child(2) { width: 100px; }
.basket-table thead th:nth-child(3), .basket-table tbody td:nth-child(3) { width: 76px; text-align: center; }
.basket-table thead th:nth-child(4), .basket-table tbody td:nth-child(4) { width: 44px; text-align: center; }
.basket-table thead th:nth-child(6), .basket-table tbody td:nth-child(6) { width: 120px; text-align: right; }

/* Prevent SKU and qty cells from wrapping */
.basket-table .sku,
.basket-table .qty,
.basket-table thead th:nth-child(2),
.basket-table thead th:nth-child(3) {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Help long text wrap instead of forcing horizontal scroll */
.basket-table td, .basket-table th {
	word-break: break-word;
}

/* Prevent horizontal scrolling; let columns shrink and wrap as needed */
#basket-container-inner {
	overflow-x: hidden;
	padding: 1rem 2rem;
	position: relative;
	left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgb(255, 255, 255);
    border-radius: var(--br-def);
    border: 0;
    overflow-y: scroll;
    box-sizing: border-box;
    -webkit-border-radius: var(--br-def);
    -moz-border-radius: var(--br-def);
    -ms-border-radius: var(--br-def);
    -o-border-radius: var(--br-def);
}

.basket-table thead th {
	text-align: left;
	font-weight: 600;
	font-size: 13px;
	color: #666;
	padding: 6px 8px;
	border-bottom: 1px solid rgba(0,0,0,0.06);
}

.basket-table tbody td {
	padding: 8px 8px;
	vertical-align: middle;
	border-bottom: 1px dashed rgba(0,0,0,0.04);
}

/* Visual card-like rows while keeping table markup.
   Each tbody tr becomes a 2-row grid: product name spans the top row,
   other columns sit on the second row. This improves long product names.
   Fallback: browsers without grid will still display as normal table rows. */
.basket-table tbody tr {
	display: grid;
	/* use minmax so the flexible column can shrink and avoid horizontal overflow */
	/* bump qty column (3rd) to give room for two small buttons + number */
	grid-template-columns: minmax(0,64px) minmax(0,100px) minmax(0,100px) minmax(0,44px) minmax(0,1fr) minmax(0,120px);
	grid-template-rows: auto auto;
	gap: 6px 12px;
	align-items: center;
}

/* Put the Item (5th column) across the top row */
.basket-table tbody td:nth-child(5) {
	grid-column: 1 / -1;
	grid-row: 1;
	padding: 8px 8px 4px 8px;
	font-weight: 600;
}

/* Position other cells on the second row */
.basket-table tbody td:nth-child(1) { grid-column: 1; grid-row: 2; }
.basket-table tbody td:nth-child(2) { grid-column: 2; grid-row: 2; }
.basket-table tbody td:nth-child(3) { grid-column: 3; grid-row: 2; }
.basket-table tbody td:nth-child(4) { grid-column: 4; grid-row: 2; }
.basket-table tbody td:nth-child(6) { grid-column: 6; grid-row: 2; text-align: right; }

/* Ensure borders still look correct when using grid */
.basket-table tbody tr > td { border-bottom: none; }
.basket-table tbody tr + tr > td { border-top: 1px dashed rgba(0,0,0,0.04); }

.basket-table tbody tr:last-child td {
	border-bottom: none;
}

.basket-table img {
	max-width: 56px;
	height: auto;
	display: block;
}

.basket-table .sku {
	color: #888;
	font-size: 12px;
}

.basket-table .qty {
	width: 70px;
	text-align: center;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	white-space: nowrap; /* keep buttons and number on one line */
	min-width: 64px;
}

/* Ensure buttons inside qty keep inline layout and don't expand to full width */
.basket-table .qty .btn,
.basket-table .qty button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    padding: 4px 8px;
}

/* ensure small basket buttons don't expand to full width */
.basket-table .basketBtn {
	display: inline-flex;
	padding: 4px 8px;
	line-height: 1;
}

.basket-table .remove {
	color: #c0392b;
	cursor: pointer;
}

/* Totals area */
.basket-table tfoot td {
	padding: 10px 8px;
	border-top: none;
	border-color: white !important;
}
.basket-table tbody tr + tr > td {
    border-top: 0 !important;
}
.basket-table tbody tr.row {
	border-bottom: 1px solid rgba(0,0,0,0.06) !important;
}

/* Keep totals visible: sticky footer inside the scrollable container */
.basket-table tfoot {
	position: sticky;
	bottom: 0;
	padding: 8px 12px;
	line-height: 1;
	background: #fff;
	z-index: 10; /* higher to stay above tbody scroll content */
}

.basket-table tfoot tr td:last-child {
	font-size: 15px;
}

.basket-table tfoot strong {
	color: #111;
}

/* Quantity column: ensure the small up/down buttons and number stay on one line.
   The qty control is rendered directly into the 3rd td by JS, so target nth-child(3). */
.basket-table tbody td:nth-child(3) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	white-space: nowrap;
	min-width: 110px; /* give more room for two small buttons + number */
}

/* Buttons inserted with btn-block in the delete column — prevent full-width expansion inside basket table */
.basket-table .btn-block {
	display: inline-flex !important;
	width: auto !important;
	padding: 6px 8px !important;
	justify-content: center;
}

/* More specific: ensure delete button (4th column) is compact and centered */
.basket-table tbody td:nth-child(4) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.basket-table tbody td:nth-child(4) .btn,
.basket-table tbody td:nth-child(4) .basketBtn {
	display: inline-flex !important;
	width: auto !important;
	padding: 6px 8px !important;
}

/* Reduce button padding slightly to help fit */
.basket-table .basketBtn, .basket-table .qty .btn, .basket-table .qty button {
	padding: 3px 6px !important;
}

/* Make sure the small basket buttons themselves are compact */
.basket-table .basketBtn i {
	font-size: 0.9rem;
}

/* Buttons */
#basket-container .btn {
	padding: 6px 10px;
	border-radius: 4px;
}

#basket-container .btn.btn-success {
	background: #2ecc71;
	border: 1px solid rgba(0,0,0,0.06);
	color: #fff;
}

#basket-container .btn.btn-secondary {
	background: #f0f0f0;
	color: #333;
	border: 1px solid rgba(0,0,0,0.06);
}

/* Responsive: on smaller screens use full width bottom sheet */
@media (max-width: 991px) {
 	#basket-container {
 		left: 0;
 		right: 0;
 		bottom: 0;
 		top: auto;
 		width: 100%;
 		max-width: 100%;
 		border-radius: 12px 12px 0 0;
 		transform: translateY(0);
 	}

	#basket-container.hidden {
		transform: translateY(100%);
	}

	#basket-container-inner {
		padding: 12px 16px;
		overflow-x: hidden; /* avoid nested scrollbars on mobile */
	}

	.basket-table thead {
		display: none; /* compact view */
	}

	.basket-table tbody td {
		display: block;
		width: 100%;
		box-sizing: border-box;
		border-bottom: 1px solid rgba(0,0,0,0.04);
		padding: 10px 0;
	}

	.basket-table tbody td .row {
		display: flex;
		justify-content: space-between;
		gap: 8px;
	}
}

/* Misc helpers */
.basketTotal, .basketSubTotal, .basketShippingTotal {
	font-variant-numeric: tabular-nums;
}

/* Ensure close button and view basket align */
#basket-container .col-2 {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 8px;
	align-items: center;
}

/* Improve clickable area for delete icon */
.basket-table .fa-trash-alt {
	color: #ffffff;
}

/* Subtle hover for rows */
.basket-table tbody tr:hover {
	background: rgba(29, 159, 219, 0.1);
}