/*
 * Side cart panel (WooCommerce Side Cart Premium): site font and colours, item rows like the
 * cart page, a pill quantity stepper and a green checkout button. The .xoo-wsc-modal prefix
 * outranks the plugin's stylesheet and its settings CSS.
 */

/* Panel: a little wider; its hidden position follows the width. */
.xoo-wsc-modal .xoo-wsc-container {
	right: calc(-1 * min(100vw, 25rem));
	max-width: min(100vw, 25rem);
	color: var(--leguma-text);
	font-family: var(--leguma-font);
	box-shadow: -1rem 0 3rem rgb(0 0 0 / 12%);
}

.xoo-wsc-modal.xoo-wsc-cart-active .xoo-wsc-container {
	right: 0;
}

.xoo-wsc-modal .xoo-wsc-opac {
	background-color: rgb(0 0 0 / 40%);
}

/* Header: title and a round close button. */
.xoo-wsc-modal .xoo-wsc-header {
	position: relative; /* The close button centres against the header, not the panel. */
	padding: 1.25rem 1.5rem;
	color: var(--leguma-text);
	border-bottom: 1px solid var(--leguma-border);
}

.xoo-wsc-modal .xoo-wsch-top {
	align-items: center;
}

.xoo-wsc-modal .xoo-wsch-text {
	font-size: 1.25rem;
	font-weight: 800;
}

.xoo-wsc-modal span.xoo-wsch-close {
	top: 50%;
	right: 1.25rem;
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	color: var(--leguma-text);
	background: var(--leguma-surface-hover);
	border-radius: 50%;
	font-size: 0.875rem;
	transform: translateY(-50%);
	transition: background-color var(--leguma-transition);
}

.xoo-wsc-modal span.xoo-wsch-close:hover {
	background: var(--leguma-border);
}

/* Items. */
.xoo-wsc-modal .xoo-wsc-body,
.xoo-wsc-modal .xoo-wsc-body a,
.xoo-wsc-modal .xoo-wsc-body span.amount {
	color: var(--leguma-text);
	font-size: 0.9375rem;
}

.xoo-wsc-modal .xoo-wsc-product {
	gap: 1rem;
	margin: 0;
	padding: 1rem 1.5rem;
	border-bottom: 1px solid var(--leguma-border);
}

.xoo-wsc-modal .xoo-wsc-pattern-row .xoo-wsc-img-col {
	flex-shrink: 0;
	width: 4.5rem;
}

.xoo-wsc-modal .xoo-wsc-img-col img {
	display: block;
	width: 4.5rem;
	height: 4.5rem;
	padding: 0.25rem;
	object-fit: contain;
	background: var(--leguma-surface);
	border: 1px solid var(--leguma-border);
	border-radius: 10px;
}

.xoo-wsc-modal .xoo-wsc-pattern-row .xoo-wsc-sum-col {
	flex: 1;
	width: auto;
	min-width: 0;
}

.xoo-wsc-modal .xoo-wsc-sm-info {
	gap: 0.75rem;
}

.xoo-wsc-modal .xoo-wsc-pname,
.xoo-wsc-modal .xoo-wsc-pname a {
	font-weight: 600;
	line-height: 1.35;
	text-decoration: none;
}

.xoo-wsc-modal .xoo-wsc-pname a:hover {
	color: var(--leguma-secondary-dark);
}

/* Remove (x) and the line price on the right. */
.xoo-wsc-modal .xoo-wsc-sm-right {
	align-items: flex-end;
	justify-content: space-between;
}

.xoo-wsc-modal span.xoo-wsc-smr-del {
	color: var(--leguma-muted);
	font-size: 0.75rem;
	cursor: pointer;
	transition: color var(--leguma-transition);
}

.xoo-wsc-modal span.xoo-wsc-smr-del:hover {
	color: #b42318;
}

.xoo-wsc-modal .xoo-wsc-smr-ptotal,
.xoo-wsc-modal .xoo-wsc-smr-ptotal span.amount {
	font-weight: 700;
	white-space: nowrap;
}

/* Quantity: a pill with - and + around the number, like on product pages. */
.xoo-wsc-modal .xoo-wsc-qty-box.xoo-wsc-qtb-square {
	display: inline-flex;
	align-self: flex-start;
	gap: 0.15rem;
	width: auto;
	max-width: none;
	height: auto;
	margin-top: 0.6rem;
	padding: 0.15rem;
	border: 1px solid var(--leguma-border);
	border-radius: 999px;
}

.xoo-wsc-modal span.xoo-wsc-chng {
	display: grid;
	place-items: center;
	width: 1.9rem;
	height: 1.9rem;
	color: var(--leguma-text);
	background: transparent;
	border: 0;
	border-radius: 50%;
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	transition: background-color var(--leguma-transition);
}

.xoo-wsc-modal span.xoo-wsc-chng:hover {
	background: var(--leguma-surface-hover);
}

.xoo-wsc-modal input[type="number"].xoo-wsc-qty {
	width: 2.25rem;
	height: 1.9rem;
	padding: 0;
	color: var(--leguma-text);
	background: transparent;
	border: 0;
	font-weight: 700;
	line-height: 1.9rem;
	text-align: center;
	-moz-appearance: textfield;
	appearance: textfield;
}

.xoo-wsc-modal input[type="number"].xoo-wsc-qty::-webkit-inner-spin-button,
.xoo-wsc-modal input[type="number"].xoo-wsc-qty::-webkit-outer-spin-button {
	margin: 0;
	-webkit-appearance: none;
}

/* Empty cart: centred message and a button back to the shop. */
.xoo-wsc-modal .xoo-wsc-empty-cart {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	align-items: center;
	padding: 3rem 1.5rem;
	color: var(--leguma-muted);
	text-align: center;
}

/* Footer: subtotal, then a full-width green button. */
.xoo-wsc-modal .xoo-wsc-footer {
	padding: 1.25rem 1.5rem 1.5rem;
	color: var(--leguma-text);
	border-top: 1px solid var(--leguma-border);
	box-shadow: none;
}

.xoo-wsc-modal .xoo-wsc-footer,
.xoo-wsc-modal .xoo-wsc-footer a,
.xoo-wsc-modal .xoo-wsc-footer .amount {
	font-size: 1rem;
}

.xoo-wsc-modal .xoo-wsc-ft-amt {
	align-items: center;
	padding: 0.35rem 0;
}

.xoo-wsc-modal .xoo-wsc-ft-amt-label {
	color: var(--leguma-text);
	font-weight: 600;
}

.xoo-wsc-modal .xoo-wsc-ft-amt-value .amount {
	color: var(--leguma-secondary-dark);
	font-size: 1.375rem;
	font-weight: 800;
}

.xoo-wsc-modal .xoo-wsc-ft-buttons-cont {
	margin-top: 1rem;
}

.xoo-wsc-modal a.xoo-wsc-ft-btn,
.xoo-wsc-modal .xoo-wsc-empty-cart .xoo-wsc-btn {
	min-height: 3.25rem;
	padding: 0.85rem 1.5rem;
	color: var(--leguma-on-accent);
	background: var(--leguma-secondary);
	border: 0;
	border-radius: 999px;
	font-size: 1rem;
	font-weight: 700;
	transition: background-color var(--leguma-transition);
}

.xoo-wsc-modal a.xoo-wsc-ft-btn:hover,
.xoo-wsc-modal .xoo-wsc-empty-cart .xoo-wsc-btn:hover {
	color: var(--leguma-on-accent);
	background: var(--leguma-secondary-hover);
}

/* Notices inside the panel (e.g. "item removed"). */
.xoo-wsc-modal ul.xoo-wsc-notices li {
	padding: 0.75rem 1rem;
	border-radius: 0.75rem;
	font-size: 0.875rem;
}