/*****************
Sidebar
****************/
#sidebar {
	h3 {
		font-size: 15.4px;
		text-transform: uppercase;
		margin-bottom: 2rem;
	}
	p {
		&#product-cart__message {
			margin-top: .75em;
		}
	}
	.sb-button {
		border-radius: 0;
		background-color: var( --sb-color-0, $primary-color );
        border: none;
		line-height: 15px;
		transition: all 0.3s ease;
		color: #fff;
		font-size: 15px;
		padding: 0;

		a {
			display: inline-block;
			padding: 15px 30px;
			color: #fff;
			text-decoration: none;
			background-color: var( --sb-color-0, $primary-color );

			&:hover,
			&:focus {
				background-color: var(--sb-color-1, $hover-color );
			}
		}
		
	}
	.item {
		border-top: none;
		position: relative;
		margin-bottom: 15px;
		padding-top: 10px;
		&.sbuy-item-added {
			animation: sbuy-item-flash 1.8s ease-out;
		}
		.description {
			max-width: 80%;
		}
		.cart-title {
			font-size: 14px;
			margin: 0;
			color: var(--sb-color-4, $heavy-dark);
		}
		.cart-amount {
			padding: 8px 0;
			margin: 0;
			font-size: 11px;
			color: var(--sb-color-4, $heavy-dark);
		}
	}
	.remove-product {
		position: absolute;
		top: 15px;
		right: 10px;
		cursor: pointer;
		border: 1px solid var(--sb-color-4, $heavy-dark);
		border-radius: 50%;
		width: 20px;
		height: 20px;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 12px;
		color: var(--sb-color-4, $heavy-dark);
	}
	#cart-subtotal {
		.subtotal-text {
			font-size: 14px;
			font-weight: 700;
			color: var(--sb-color-4, $heavy-dark);
		}
		.subtotal-amount {
			font-size: 14px;
			color: var(--sb-color-4, $heavy-dark);
		}
	}

	// Shared wrapper for subtotal + checkout button.
	// Desktop: behaves like a normal block (subtotal above, button below) — unchanged.
	#sbuy-cart-footer {
		&:empty {
			display: none;
		}
	}

}

@media only screen and (max-width: 768px) {
	#sidebar .cart {
		padding: 40px 0 0 0;
		margin: 0 0 40px 0;
		border-left: none;
		border-top: 1px solid var(--sb-color-3, $dark-background);
		// Reserve space so the fixed bar never covers the last item.
		padding-bottom: 96px;
	}

	// Mobile: merge subtotal + CTA into one fixed bottom bar.
	#sidebar #sbuy-cart-footer {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 9999;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		margin: 0;
		padding: 10px 16px;
		background: #fff;
		border-top: 1px solid var(--sb-color-2, $border-color);
		box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.12);

		#cart-subtotal {
			margin: 0;
			display: flex;
			flex-direction: column;
			line-height: 1.25;
			.subtotal-text {
				font-size: 12px;
				font-weight: 600;
			}
			.subtotal-amount {
				font-size: 18px;
				font-weight: 700;
			}
		}

		#checkout-button {
			margin: 0;
			flex-shrink: 0;
			a {
				padding: 14px 22px;
				white-space: nowrap;
			}
		}
	}
}

/*****************
Add-to-cart feedback: toast + row highlight
****************/
@keyframes sbuy-item-flash {
	0%   { background-color: rgba(46, 125, 50, 0.18); }
	100% { background-color: transparent; }
}

#sbuy-toast-container {
	position: fixed;
	left: 50%;
	bottom: 24px;
	transform: translateX(-50%);
	z-index: 100000;
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: max-content;
	max-width: 90vw;
	pointer-events: none;
}

.sbuy-toast {
	display: flex;
	align-items: center;
	gap: 10px;
	background: #2e2e2e;
	color: #fff;
	padding: 11px 18px;
	border-radius: 8px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
	font-size: 14px;
	line-height: 1.3;
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 0.3s ease, transform 0.3s ease;

	&--visible {
		opacity: 1;
		transform: translateY(0);
	}
	&__check {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 22px;
		height: 22px;
		border-radius: 50%;
		background: #2e7d32;
		color: #fff;
		flex-shrink: 0;
	}
	&__title {
		font-weight: 600;
	}
}

// On mobile, lift the toast above the fixed sticky bar so they don't overlap.
@media only screen and (max-width: 768px) {
	#sbuy-toast-container {
		bottom: 110px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sbuy-toast {
		transition: opacity 0.01s linear;
		transform: none;
	}
	.item.sbuy-item-added {
		animation: none;
	}
}
