/* BuyCake Cart Drawer - styles for the mini-cart drawer + the cart page.
   Colors live in CSS variables so the palette can be retinted in one place
   without touching markup. Defaults approximate the current site (dark
   navy header, red accent, black CTA). */

:root {
	--bcx-accent: #b7282e;
	--bcx-ink: #1c1c28;
	--bcx-ink-soft: #6b6b76;
	--bcx-border: #e7e3df;
	--bcx-bg: #ffffff;
	--bcx-bg-soft: #faf8f6;
	--bcx-cta: #d81e42;
	--bcx-cta-hover: #b8102f;
	--bcx-cta-text: #ffffff;
	--bcx-radius: 14px;
	--bcx-radius-sm: 8px;
	--bcx-shadow: 0 12px 40px rgba(20, 16, 12, 0.18);
	--bcx-error: #c0392b;
	--bcx-success: #2e7d32;
}

/* ---------------------------------------------------------------------
   Drawer
--------------------------------------------------------------------- */

#bcx-cart-drawer,
#bcx-cart-drawer * {
	box-sizing: border-box;
}

#bcx-cart-drawer {
	position: fixed;
	inset: 0;
	z-index: 100000;
	visibility: hidden;
	pointer-events: none;
}

#bcx-cart-drawer.is-open {
	visibility: visible;
	pointer-events: auto;
}

.bcx-drawer__overlay {
	position: absolute;
	inset: 0;
	background: rgba(20, 16, 12, 0.45);
	opacity: 0;
	transition: opacity 0.25s ease;
}

#bcx-cart-drawer.is-open .bcx-drawer__overlay {
	opacity: 1;
}

.bcx-drawer__panel {
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	width: min(420px, 100vw);
	background: var(--bcx-bg);
	box-shadow: var(--bcx-shadow);
	display: flex;
	flex-direction: column;
	transform: translateX(100%);
	transition: transform 0.3s ease;
	font-family: inherit;
}

#bcx-cart-drawer.is-open .bcx-drawer__panel {
	transform: translateX(0);
}

.bcx-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 22px 24px 4px;
}

.bcx-drawer__head h3 {
	margin: 0;
	font-size: 22px;
	color: var(--bcx-ink);
}

.bcx-drawer__close {
	background: none !important;
	border: none !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	color: var(--bcx-ink-soft) !important;
	padding: 4px 8px;
}

.bcx-drawer__close:hover {
	color: var(--bcx-ink) !important;
}

.bcx-drawer__promo {
	margin: 4px 24px 16px;
	font-size: 13px;
	color: var(--bcx-ink-soft);
}

.bcx-drawer__content {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
}

.bcx-drawer__items {
	flex: 1;
	overflow-y: auto;
	padding: 0 24px;
}

.bcx-drawer__empty {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	padding: 24px;
	text-align: center;
	color: var(--bcx-ink-soft);
}

.bcx-drawer__summary {
	border-top: 1px solid var(--bcx-border);
	padding: 18px 24px 22px;
}

.bcx-drawer__shipping {
	padding: 14px 24px;
	border-top: 1px solid var(--bcx-border);
	background: var(--bcx-bg-soft);
}

.bcx-drawer__shipping-label {
	display: block;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--bcx-ink-soft);
	margin-bottom: 8px;
}

.bcx-drawer__shipping .woocommerce-shipping-methods,
.bcx-drawer__shipping ul.woocommerce-shipping-methods {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.bcx-drawer__shipping .woocommerce-shipping-methods li {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--bcx-ink);
}

.bcx-drawer__shipping .woocommerce-shipping-methods input[type="radio"] {
	accent-color: var(--bcx-cta);
	width: 16px;
	height: 16px;
	flex: none;
}

.bcx-drawer__shipping .woocommerce-shipping-methods label {
	flex: 1;
	cursor: pointer;
}

.bcx-drawer__subtotal {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	font-size: 15px;
	color: var(--bcx-ink);
	margin-bottom: 14px;
}

.bcx-drawer__subtotal strong {
	font-size: 19px;
}

.bcx-drawer__actions {
	display: flex;
	gap: 10px;
	margin-bottom: 10px;
}

.bcx-drawer__clear {
	display: block;
	width: 100%;
	text-align: center;
	background: none !important;
	border: none !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	color: var(--bcx-ink-soft) !important;
	font-size: 13px;
	font-weight: 400 !important;
	text-decoration: underline !important;
	cursor: pointer;
	padding: 4px;
}

.bcx-drawer__clear:hover {
	color: var(--bcx-error) !important;
}

body.bcx-no-scroll {
	overflow: hidden;
}

/* ---------------------------------------------------------------------
   Buttons
--------------------------------------------------------------------- */

.bcx-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 1;
	padding: 12px 16px;
	border-radius: var(--bcx-radius-sm) !important;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none !important;
	cursor: pointer;
	border: 1px solid transparent;
	box-shadow: none !important;
	text-shadow: none !important;
	transition: opacity 0.15s ease, transform 0.05s ease;
}

.bcx-btn:active {
	transform: scale(0.98);
}

.bcx-btn--primary {
	background: var(--bcx-cta) !important;
	border-color: var(--bcx-cta) !important;
	color: var(--bcx-cta-text) !important;
	box-shadow: 0 6px 16px rgba(216, 30, 66, 0.35) !important;
}

.bcx-btn--primary:hover {
	background: var(--bcx-cta-hover) !important;
	border-color: var(--bcx-cta-hover) !important;
	color: var(--bcx-cta-text) !important;
	box-shadow: 0 8px 20px rgba(216, 30, 66, 0.45) !important;
}

.bcx-btn--ghost {
	background: transparent !important;
	border-color: var(--bcx-border) !important;
	color: var(--bcx-ink) !important;
}

.bcx-btn--ghost:hover {
	border-color: var(--bcx-ink) !important;
	color: var(--bcx-ink) !important;
}

.bcx-btn[disabled] {
	opacity: 0.55;
	pointer-events: none;
}

/* ---------------------------------------------------------------------
   Item row - shared shape, used in the drawer and on the cart page
--------------------------------------------------------------------- */

.bcx-item {
	display: flex;
	gap: 12px;
	padding: 16px 0;
	border-bottom: 1px solid var(--bcx-border);
	position: relative;
}

.bcx-item:first-child {
	padding-top: 4px;
}

.bcx-item.is-updating {
	opacity: 0.5;
	pointer-events: none;
}

.bcx-item__thumb img {
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: var(--bcx-radius-sm);
	display: block;
}

.bcx-item--page .bcx-item__thumb img {
	width: 92px;
	height: 92px;
}

.bcx-item__body {
	flex: 1;
	min-width: 0;
}

.bcx-item__name a,
.bcx-item__name {
	font-size: 14px;
	font-weight: 600;
	color: var(--bcx-ink);
	text-decoration: none;
	line-height: 1.3;
}

.bcx-item--page .bcx-item__name a,
.bcx-item--page .bcx-item__name {
	font-size: 16px;
}

.bcx-item__meta-wrap {
	position: relative;
	margin-top: 4px;
}

.bcx-item__meta {
	font-size: 12px;
	color: var(--bcx-ink-soft);
	line-height: 1.6;
}

.bcx-item__meta table,
.bcx-item__meta dl {
	margin: 0;
}

.bcx-item__meta p {
	display: inline;
	margin: 0;
}

/* wc_get_formatted_cart_item_data() renders one <dt>Label:</dt><dd>Value</dd>
   pair per line by default (block-level) - that's what made a 6-option cake
   read as a 12-line wall of text. Force each pair onto a single line instead. */
.bcx-item__meta dl.variation dt,
.bcx-item__meta dl.variation dd {
	display: inline;
	margin: 0;
	padding: 0;
}

.bcx-item__meta dl.variation dt {
	font-weight: 600;
	color: var(--bcx-ink);
	margin-right: 4px;
}

.bcx-item__meta dl.variation dd {
	margin-right: 4px;
}

.bcx-item__meta dl.variation dd::after {
	content: "";
	display: block;
	margin-bottom: 2px;
}

/* Drawer only: peek at ~3 lines with a fade, expand on demand. The full
   list is still the default on the big cart page (.bcx-item--page). */
.bcx-item--drawer .bcx-item__meta {
	max-height: 58px;
	overflow: hidden;
	position: relative;
}

.bcx-item--drawer .bcx-item__meta-wrap.is-expanded .bcx-item__meta {
	max-height: none;
}

.bcx-item--drawer .bcx-item__meta-wrap:not(.is-expanded) .bcx-item__meta::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 20px;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--bcx-bg));
}

.bcx-item__meta-toggle {
	display: inline-block;
	margin-top: 4px;
	background: none !important;
	border: none !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	padding: 0 !important;
	color: var(--bcx-accent) !important;
	font-size: 11px;
	font-weight: 600 !important;
	text-decoration: underline !important;
	cursor: pointer;
}

.bcx-item__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 10px;
}

.bcx-qty {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--bcx-border);
	border-radius: 999px;
	overflow: hidden;
}

.bcx-qty__btn {
	width: 28px;
	height: 28px;
	border: none !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	background: var(--bcx-bg-soft) !important;
	color: var(--bcx-ink) !important;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
}

.bcx-qty__btn:hover {
	background: var(--bcx-border) !important;
}

.bcx-qty__val {
	min-width: 28px;
	text-align: center;
	font-size: 13px;
	font-weight: 600;
}

.bcx-item__price {
	font-size: 14px;
	font-weight: 700;
	color: var(--bcx-ink);
}

.bcx-item__remove {
	position: absolute;
	top: 16px;
	right: 0;
	background: none !important;
	border: none !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	color: var(--bcx-ink-soft) !important;
	cursor: pointer;
	padding: 4px;
}

.bcx-item__remove:hover {
	color: var(--bcx-error) !important;
}

.bcx-item--page {
	padding-right: 32px;
}

/* ---------------------------------------------------------------------
   Cart page
--------------------------------------------------------------------- */

.bcx-cart-page {
	max-width: 1120px;
	margin: 0 auto;
	padding: 28px 20px 60px;
}

.bcx-cart-page__title {
	font-size: 34px;
	color: var(--bcx-accent);
	margin: 0 0 24px;
}

.bcx-cart-page__errors {
	background: #fdecea;
	border: 1px solid var(--bcx-error);
	color: var(--bcx-error);
	border-radius: var(--bcx-radius-sm);
	padding: 12px 16px;
	margin-bottom: 20px;
	font-size: 14px;
}

.bcx-cart-page__errors p {
	margin: 0;
}

.bcx-cart-page__errors p + p {
	margin-top: 6px;
}

.bcx-cart-page__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 360px;
	gap: 32px;
	align-items: start;
}

.bcx-cart-page__items {
	background: var(--bcx-bg);
	border: 1px solid var(--bcx-border);
	border-radius: var(--bcx-radius);
	padding: 8px 20px;
}

.bcx-cart-page__side {
	position: sticky;
	top: 20px;
}

.bcx-empty-page {
	text-align: center;
	padding: 60px 20px;
	color: var(--bcx-ink-soft);
}

.bcx-empty-page .bcx-btn {
	flex: none;
	margin-top: 14px;
}

/* Coupon accordion */

.bcx-totals-card {
	background: var(--bcx-bg-soft);
	border: 1px solid var(--bcx-border);
	border-radius: var(--bcx-radius);
	padding: 20px;
}

.bcx-coupon__toggle {
	background: none !important;
	border: none !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	padding: 0 !important;
	color: var(--bcx-accent) !important;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	text-decoration: underline !important;
}

.bcx-coupon__body {
	display: flex;
	gap: 8px;
	margin-top: 10px;
	flex-wrap: wrap;
}

.bcx-coupon__body[hidden] {
	display: none;
}

.bcx-coupon__body input[type="text"] {
	flex: 1;
	min-width: 140px;
	padding: 10px 12px;
	border: 1px solid var(--bcx-border);
	border-radius: var(--bcx-radius-sm);
	font-size: 13px;
}

.bcx-coupon__msg {
	width: 100%;
	font-size: 12px;
}

.bcx-coupon__msg.is-error {
	color: var(--bcx-error);
}

.bcx-coupon__msg.is-success {
	color: var(--bcx-success);
}

.bcx-coupon__applied {
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.bcx-coupon__applied li {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: #fff;
	border: 1px solid var(--bcx-border);
	border-radius: 999px;
	padding: 4px 6px 4px 12px;
	font-size: 12px;
	text-transform: uppercase;
}

.bcx-coupon__applied button {
	background: none !important;
	border: none !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	cursor: pointer;
	color: var(--bcx-ink-soft) !important;
	font-size: 15px;
	line-height: 1;
}

/* Restyle WooCommerce's own cart-totals.php output (we reuse its markup
   for shipping/tax/coupon math, just re-skin the classes it renders). */

.bcx-totals-wrap {
	margin-top: 18px;
}

.bcx-totals-wrap .cart_totals > h2 {
	display: none;
}

.bcx-totals-wrap table.shop_table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

.bcx-totals-wrap table.shop_table th,
.bcx-totals-wrap table.shop_table td {
	padding: 10px 0;
	border: none;
	border-bottom: 1px solid var(--bcx-border);
	text-align: left;
}

.bcx-totals-wrap table.shop_table tr:last-child th,
.bcx-totals-wrap table.shop_table tr:last-child td {
	border-bottom: none;
}

.bcx-totals-wrap .order-total th,
.bcx-totals-wrap .order-total td {
	font-size: 17px;
	font-weight: 700;
	color: var(--bcx-ink);
	padding-top: 14px;
}

.bcx-totals-wrap .woocommerce-shipping-methods {
	list-style: none;
	margin: 0;
	padding: 0;
}

.bcx-totals-wrap .wc-proceed-to-checkout {
	padding: 16px 0 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.bcx-totals-wrap .wc-proceed-to-checkout a.checkout-button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 14px 16px;
	border-radius: var(--bcx-radius-sm) !important;
	background: var(--bcx-cta) !important;
	color: var(--bcx-cta-text) !important;
	font-weight: 700;
	text-decoration: none !important;
	box-shadow: 0 6px 16px rgba(216, 30, 66, 0.35) !important;
	text-shadow: none !important;
}

.bcx-totals-wrap .wc-proceed-to-checkout a.checkout-button:hover {
	background: var(--bcx-cta-hover) !important;
	box-shadow: 0 8px 20px rgba(216, 30, 66, 0.45) !important;
}

.bcx-totals-wrap .wc-proceed-to-checkout a.checkout-button:hover {
	opacity: 0.88;
}

/* Cross-sells: keep them, but quiet */

.bcx-cart-page__cross-sells {
	margin-top: 48px;
	opacity: 0.92;
}

.bcx-cart-page__cross-sells .cross-sells > h2 {
	font-size: 18px;
	color: var(--bcx-ink);
}

/* ---------------------------------------------------------------------
   Responsive
--------------------------------------------------------------------- */

@media (max-width: 900px) {
	.bcx-cart-page__grid {
		grid-template-columns: 1fr;
	}

	.bcx-cart-page__side {
		position: static;
	}
}

@media (max-width: 480px) {
	.bcx-drawer__panel {
		width: 100vw;
	}

	.bcx-cart-page__title {
		font-size: 26px;
	}

	.bcx-cart-page__items {
		padding: 4px 14px;
	}
}