/**
 * Mini-Cart Drawer Styles
 *
 * Styles for the WooCommerce mini-cart slide-out drawer.
 * This file is loaded globally since the mini-cart is available on every page.
 *
 * @package WPR\NPX
 */

/* ==========================================================================
   Drawer Panel
   ========================================================================== */

.wc-block-mini-cart__drawer {
	font-family: var(--wp--preset--font-family--primary);
}

.wc-block-mini-cart__drawer .wc-block-components-drawer {
	font-family: var(--wp--preset--font-family--primary);
}

.wc-block-components-button:not(.is-link):focus {
	box-shadow: none;
}

/* ==========================================================================
   Close Button
   ========================================================================== */

.wc-block-mini-cart__drawer .wc-block-components-drawer__close {
	padding: 8px;
	border: none;
	background: transparent;
	color: var(--wp--preset--color--black);
	cursor: pointer;
	border-radius: 50%;
	transition: background-color var(--wp--custom--transition--fast);
}

.wc-block-mini-cart__drawer .wc-block-components-drawer__close:hover {
	background-color: var(--wp--preset--color--background);
}

/* ==========================================================================
   Title: "Your cart (items: X)"
   ========================================================================== */

.wc-block-mini-cart__title {
	font-family: var(--wp--preset--font-family--primary);
	font-size: var(--wp--preset--font-size--h4);
	font-weight: 600;
	line-height: 1.2;
	color: var(--wp--preset--color--black);
	margin: 0 0 var(--wp--preset--spacing--30) 0;
	padding: 0;
}

.wc-block-mini-cart__title .has-h-3-font-size {
	font-size: inherit;
}

/* ==========================================================================
   Products Table
   ========================================================================== */

/**
 * Fix duplicate images.
 *
 * WooCommerce renders a standalone <img hidden> for "hidden from catalog"
 * products plus a linked <img> for normal products. CSS display rules can
 * override the HTML hidden attribute, so we force-hide it.
 */
.wc-block-cart-item__image>img[hidden] {
	display: none !important;
}

/* Image cell */
.wc-block-mini-cart__products-table .wc-block-cart-item__image {
	width: 72px;
	min-width: 72px;
	vertical-align: top;
	padding-right: var(--wp--preset--spacing--20);
}

.wc-block-mini-cart__products-table .wc-block-cart-item__image img {
	width: 72px;
	height: 72px;
	object-fit: cover;
}

/* Product details cell */
.wc-block-mini-cart__products-table .wc-block-cart-item__product {
	vertical-align: top;
}

/* Product name */
.wc-block-mini-cart__products-table .wc-block-components-product-name {
	font-family: var(--wp--preset--font-family--primary);
	font-size: var(--wp--preset--font-size--body-m);
	font-weight: 500;
	color: var(--wp--preset--color--black);
	text-decoration: none;
	display: block;
	line-height: 1.4;
}

.wc-block-mini-cart__products-table .wc-block-components-product-name:hover {
	color: var(--wp--preset--color--primary);
}

/* Hide duplicate product name (the hidden-from-catalog <span>) */
.wc-block-mini-cart__products-table span.wc-block-components-product-name[hidden] {
	display: none !important;
}

/* Price */
.wc-block-mini-cart__products-table .wc-block-cart-item__prices {
	margin-top: 4px;
}

.wc-block-mini-cart__products-table .wc-block-components-product-price {
	font-family: var(--wp--preset--font-family--primary);
	font-size: var(--wp--preset--font-size--body-s);
	font-weight: 400;
	color: #6e6e73;
}

.wc-block-mini-cart__products-table .wc-block-components-product-price__value.is-discounted {
	color: var(--wp--preset--color--error);
}

.wc-block-mini-cart__products-table .wc-block-components-product-price__regular {
	color: #86868b;
	text-decoration: line-through;
	margin-right: 6px;
}

/* Badges: low stock, backorder, sale */
.wc-block-mini-cart__products-table .wc-block-components-product-badge {
	display: inline-block;
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 500;
	padding: 2px 8px;
	border-radius: 4px;
	border: 1px solid var(--wp--preset--color--gray);
	margin-top: 6px;
	line-height: 1.4;
}

/**
 * Respect [hidden] on badges and other toggled elements.
 *
 * WooCommerce uses the HTML hidden attribute with Interactivity API bindings
 * (data-wp-bind--hidden). Our display:inline-block above overrides the
 * hidden attribute, causing "SAVE $0.00", "AVAILABLE ON BACKORDER",
 * "NULL LEFT IN STOCK" etc. to show when they shouldn't.
 * Scoped to the entire drawer so it covers all areas (products table,
 * total column, etc.).
 */
.wc-block-mini-cart__drawer [hidden] {
	display: none !important;
}

.wc-block-mini-cart__products-table .wc-block-components-sale-badge {
	color: var(--wp--preset--color--error);
	border-color: var(--wp--preset--color--error);
}

.wc-block-mini-cart__products-table .wc-block-components-product-low-stock-badge {
	color: #ff9500;
	border-color: #ff9500;
}

/* Variation / metadata */
.wc-block-mini-cart__products-table .wc-block-components-product-metadata {
	margin-top: 4px;
}

.wc-block-mini-cart__products-table .wc-block-components-product-details {
	font-size: var(--wp--preset--font-size--caption);
	color: #6e6e73;
	margin: 2px 0 0 0;
	padding: 0;
	list-style: none;
}

.wc-block-mini-cart__products-table .wc-block-components-product-details__name {
	font-weight: 500;
}

/* ==========================================================================
   Quantity Selector
   ========================================================================== */

.wc-block-mini-cart__products-table .wc-block-components-quantity-selector {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--wp--preset--color--gray);
	border-radius: var(--wp--custom--border-radius--input);
	overflow: hidden;
	margin-top: 8px;
	height: 36px;
}

.wc-block-mini-cart__products-table .wc-block-components-quantity-selector__input {
	width: 40px;
	height: 100%;
	text-align: center;
	border: none;
	background: transparent;
	font-family: var(--wp--preset--font-family--primary);
	font-size: var(--wp--preset--font-size--body-s);
	font-weight: 500;
	color: var(--wp--preset--color--black);
	-moz-appearance: textfield;
	appearance: textfield;
	padding: 0;
	margin: 0;
}

.wc-block-mini-cart__products-table .wc-block-components-quantity-selector__input::-webkit-inner-spin-button,
.wc-block-mini-cart__products-table .wc-block-components-quantity-selector__input::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.wc-block-mini-cart__products-table .wc-block-components-quantity-selector__button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 100%;
	border: none !important;
	outline: none !important;
	background: transparent;
	color: var(--wp--preset--color--black);
	cursor: pointer;
	font-size: 16px;
	padding: 0;
	box-shadow: none !important;
	transition: background-color var(--wp--custom--transition--fast);
}

.wc-block-mini-cart__products-table .wc-block-components-quantity-selector__button:focus,
.wc-block-mini-cart__products-table .wc-block-components-quantity-selector__button:active,
.wc-block-mini-cart__products-table .wc-block-components-quantity-selector__button:focus-visible {
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
}

.wc-block-mini-cart__products-table .wc-block-components-quantity-selector__button:hover {
	background-color: var(--wp--preset--color--background);
}

.wc-block-mini-cart__products-table .wc-block-components-quantity-selector__button:disabled {
	opacity: 0.3;
	cursor: not-allowed;
}

/* Also override focus styles on the quantity input */
.wc-block-mini-cart__products-table .wc-block-components-quantity-selector__input:focus,
.wc-block-mini-cart__products-table .wc-block-components-quantity-selector__input:focus-visible {
	box-shadow: none !important;
	outline: none !important;
	border: none !important;
}

/* 
 * Global debouncing state for mini-cart quantity buttons.
 * Applied to <body> via woocommerce.js to survive React DOM re-renders.
 */
body.npx-cart-is-updating .wc-block-components-quantity-selector {
	pointer-events: none !important;
	opacity: 0.5 !important;
	transition: opacity 0.2s ease;
}

/* Remove item link */
.wc-block-mini-cart__products-table .wc-block-cart-item__remove-link {
	display: inline-block;
	margin-top: 6px;
	font-family: var(--wp--preset--font-family--primary);
	font-size: var(--wp--preset--font-size--caption);
	color: #6e6e73;
	text-decoration: underline;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	transition: color var(--wp--custom--transition--fast);
}

.wc-block-mini-cart__products-table .wc-block-cart-item__remove-link:hover {
	color: var(--wp--preset--color--error);
}

/* Total price column */
.wc-block-mini-cart__products-table .wc-block-cart-item__total {
	vertical-align: top;
	text-align: right;
	white-space: nowrap;
}

.wc-block-mini-cart__products-table .wc-block-cart-item__total .wc-block-components-product-price__value {
	font-family: var(--wp--preset--font-family--primary);
	font-size: var(--wp--preset--font-size--body-m);
	font-weight: 600;
	color: var(--wp--preset--color--black);
}

/* Row spacing */
.wc-block-mini-cart__products-table .wc-block-cart-items__row {
	border-bottom: 1px solid var(--wp--preset--color--background);
}

.wc-block-mini-cart__products-table .wc-block-cart-items__row td {
	padding: var(--wp--preset--spacing--20) 0;
}

/* Table header (visually hidden but accessible) */
.wc-block-mini-cart__products-table .wc-block-cart-items__header {
	display: none;
}

/* ==========================================================================
   Footer: Subtotal + Buttons
   ========================================================================== */

.wc-block-mini-cart__footer {
	border-top: 1px solid var(--wp--preset--color--gray);
	padding-top: var(--wp--preset--spacing--30);
}

/* Subtotal row */
.wc-block-mini-cart__footer .wc-block-mini-cart__footer-subtotal {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: var(--wp--preset--spacing--10);
}

.wc-block-mini-cart__footer .wc-block-components-totals-item__label {
	font-family: var(--wp--preset--font-family--primary);
	font-size: var(--wp--preset--font-size--body-l);
	font-weight: 600;
	color: var(--wp--preset--color--black);
}

.wc-block-mini-cart__footer .wc-block-components-totals-item__value {
	font-family: var(--wp--preset--font-family--primary);
	font-size: var(--wp--preset--font-size--body-l);
	font-weight: 600;
	color: var(--wp--preset--color--black);
}

.wc-block-mini-cart__footer .wc-block-components-totals-item__description {
	flex-basis: 100%;
	font-size: var(--wp--preset--font-size--caption);
	color: #6e6e73;
	margin-top: 4px;
}

/* Button container */
.wc-block-mini-cart__footer-actions {
	display: flex;
	gap: var(--wp--preset--spacing--20);
	margin-top: var(--wp--preset--spacing--20);
}

/* Shared button base */
.wc-block-mini-cart__footer-actions .wc-block-components-button {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 14px var(--wp--preset--spacing--30);
	font-family: var(--wp--preset--font-family--primary);
	font-size: var(--wp--preset--font-size--body-m);
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
	border-radius: var(--wp--custom--border-radius--button);
	cursor: pointer;
	transition: background-color var(--wp--custom--transition--normal),
		color var(--wp--custom--transition--normal),
		border-color var(--wp--custom--transition--normal);
}

/* "View my cart" — outline style */
.wc-block-mini-cart__footer-cart {
	background: transparent;
	color: var(--wp--preset--color--black);
	border: 1.5px solid var(--wp--preset--color--black);
}

.wc-block-mini-cart__footer-cart:hover {
	background-color: var(--wp--preset--color--black);
	color: var(--wp--preset--color--white);
}

/* "Go to checkout" — primary style */
.wc-block-mini-cart__footer-checkout {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
	border: 1.5px solid var(--wp--preset--color--primary);
}

.wc-block-mini-cart__footer-checkout:hover {
	background-color: #005bb5;
	border-color: #005bb5;
}

/* ==========================================================================
   Empty Cart State
   ========================================================================== */

.wp-block-woocommerce-empty-mini-cart-contents-block {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 300px;
	text-align: center;
	padding: var(--wp--preset--spacing--40);
}

.wp-block-woocommerce-empty-mini-cart-contents-block p {
	font-family: var(--wp--preset--font-family--primary);
	font-size: var(--wp--preset--font-size--body-l);
	color: #6e6e73;
	margin-bottom: var(--wp--preset--spacing--30);
}

.wc-block-mini-cart__shopping-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px var(--wp--preset--spacing--40);
	font-family: var(--wp--preset--font-family--primary);
	font-size: var(--wp--preset--font-size--body-m);
	font-weight: 500;
	border-radius: var(--wp--custom--border-radius--button);
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
	text-decoration: none;
	transition: background-color var(--wp--custom--transition--normal);
}

.wc-block-mini-cart__shopping-button:hover {
	background-color: #005bb5;
}

/* ==========================================================================
   Scrollable Items Area
   ========================================================================== */

.wc-block-mini-cart__items {
	flex: 1;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

/* Custom scrollbar */
.wc-block-mini-cart__items::-webkit-scrollbar {
	width: 4px;
}

.wc-block-mini-cart__items::-webkit-scrollbar-track {
	background: transparent;
}

.wc-block-mini-cart__items::-webkit-scrollbar-thumb {
	background-color: var(--wp--preset--color--gray);
	border-radius: 2px;
}