/* =================================================================
   File:    14-cart-drawer.css
   Purpose: Side cart drawer (Mini-cart). Slides in from inline-end.
            Triggered by the header cart icon when JS module loads.
   ================================================================= */

/* Drawer is always in the DOM (rendered in footer). Hidden by default
   via opacity + visibility + translateX so it can never trap clicks. */
.liqui-cart-drawer {
	position: fixed;
	inset: 0;
	z-index: var(--z-drawer);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity var(--dur) var(--ease), visibility 0s linear var(--dur);
}
.liqui-cart-drawer.is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: opacity var(--dur) var(--ease), visibility 0s;
}

.liqui-cart-drawer__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(15, 23, 42, 0.30);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter:         blur(4px);
}

.liqui-cart-drawer__panel {
	position: absolute;
	top: 0; bottom: 0;
	inset-inline-end: 0;
	width: min(440px, 84vw);
	padding: var(--space-5);
	background: var(--menu-bg, var(--glass-bg-strong));
	border-radius: var(--radius-xl) 0 0 var(--radius-xl);
	border-inline-start: var(--glass-border);
	overflow-y: auto;
	-webkit-backdrop-filter: blur(var(--menu-blur, 22px)) saturate(140%);
	backdrop-filter:         blur(var(--menu-blur, 22px)) saturate(140%);
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	transform: translateX(100%);
	transition: transform var(--dur-slow) var(--ease-out);
}
[dir="rtl"] .liqui-cart-drawer__panel { transform: translateX(-100%); }
.liqui-cart-drawer.is-open .liqui-cart-drawer__panel { transform: translateX(0); }

.liqui-cart-drawer__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.liqui-cart-drawer__title { margin: 0; font-size: var(--fs-md); font-weight: var(--fw-semi); }

/* Mini cart list */
.liqui-mini-cart__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.liqui-mini-cart__item {
	display: grid;
	grid-template-columns: 60px 1fr auto;
	gap: var(--space-3);
	align-items: center;
	padding: var(--space-3);
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	background: #fff;
	position: relative;
}
.liqui-mini-cart__media { background: var(--c-surface-1); border-radius: var(--radius-sm); padding: 4px; }
.liqui-mini-cart__media img { object-fit: contain; width: 100%; height: 100%; }
.liqui-mini-cart__title { color: var(--c-ink); text-decoration: none; font-size: var(--fs-sm); font-weight: var(--fw-medium); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.liqui-mini-cart__title:hover { color: var(--c-accent); }
.liqui-mini-cart__meta { font-size: var(--fs-xs); color: var(--c-ink-muted); }
.liqui-mini-cart__remove {
	width: 22px; height: 22px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--c-surface-2);
	color: var(--c-ink-muted);
	text-decoration: none;
	font-size: 14px;
	line-height: 1;
	transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
	position: absolute;
	top: 6px;
	inset-inline-end: 6px;
}
.liqui-mini-cart__remove:hover { background: var(--c-danger); color: #fff; }

/* Footer */
.liqui-mini-cart__footer {
	margin-top: auto;
	display: grid;
	gap: var(--space-3);
	padding-top: var(--space-4);
	border-top: 1px solid var(--c-line);
}
.liqui-mini-cart__subtotal {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	font-size: var(--fs-md);
}
.liqui-mini-cart__actions { display: grid; gap: var(--space-2); }

/* Empty */
.liqui-mini-cart__empty {
	text-align: center;
	padding: var(--space-7) var(--space-4);
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	align-items: center;
}

/* Body lock when drawer open */
html.is-cart-open { overflow: hidden; }

/* =================================================================
   Fallback styling for WooCommerce's DEFAULT mini-cart markup.
   Used when the theme's woocommerce/cart/mini-cart.php override is not
   in effect (e.g. a plugin such as Royal Elementor Addons forces the
   default `cart_list` template). Scoped to the drawer so the side cart
   always looks right regardless of which template renders.
   ================================================================= */
.liqui-cart-drawer .woocommerce-mini-cart,
.liqui-cart-drawer ul.cart_list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.liqui-cart-drawer .woocommerce-mini-cart-item,
.liqui-cart-drawer li.mini_cart_item {
	position: relative;
	list-style: none;
	margin: 0;
	padding: 14px 32px 14px 0;
	border-bottom: 1px solid var(--c-line);
	overflow: hidden;
}

.liqui-cart-drawer .mini_cart_item img,
.liqui-cart-drawer .woocommerce-mini-cart-item img {
	float: inline-start;
	width: 58px !important;
	height: 58px !important;
	object-fit: contain;
	margin-inline-end: 12px;
	padding: 3px;
	border: 1px solid var(--c-line);
	border-radius: var(--radius-sm);
	background: #fff;
}

.liqui-cart-drawer .mini_cart_item a:not(.remove) {
	display: block;
	color: var(--c-ink);
	text-decoration: none;
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	line-height: 1.35;
}
.liqui-cart-drawer .mini_cart_item a:not(.remove):hover { color: var(--c-accent); }

.liqui-cart-drawer .mini_cart_item .quantity {
	display: block;
	margin-top: 4px;
	font-size: var(--fs-xs);
	color: var(--c-ink-muted);
}

.liqui-cart-drawer .mini_cart_item a.remove {
	position: absolute;
	top: 12px;
	inset-inline-end: 0;
	width: 22px;
	height: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--c-surface-2);
	color: var(--c-ink-muted) !important;
	font-size: 14px;
	line-height: 1;
	text-decoration: none;
}
.liqui-cart-drawer .mini_cart_item a.remove:hover {
	background: var(--c-danger);
	color: #fff !important;
}

.liqui-cart-drawer .woocommerce-mini-cart__total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin: 16px 0 0;
	padding-top: 14px;
	border-top: 1px solid var(--c-line);
	font-size: var(--fs-md);
}

.liqui-cart-drawer .woocommerce-mini-cart__buttons {
	display: grid;
	gap: var(--space-2);
	margin: 12px 0 0;
}

.liqui-cart-drawer .woocommerce-mini-cart__buttons .button {
	display: block;
	width: 100%;
	text-align: center;
	padding: 11px 18px;
	border-radius: var(--radius-pill);
	font-weight: var(--fw-semi);
	text-decoration: none;
}

.liqui-cart-drawer .woocommerce-mini-cart__buttons .button:not(.checkout) {
	background: var(--glass-bg-strong);
	border: 1px solid var(--c-line);
	color: var(--c-ink);
}

.liqui-cart-drawer .woocommerce-mini-cart__buttons .button.checkout {
	background: var(--c-accent);
	color: #fff;
}

.liqui-cart-drawer .woocommerce-mini-cart__empty-message {
	text-align: center;
	color: var(--c-ink-muted);
	padding: var(--space-6) 0;
}