/**
 * Cart quantity stepper styling — cart page only.
 *
 * Mirrors the product-page quantity control's visual language (white field,
 * neutral-300 hairline borders) but with 44px tap targets per Pattern H — the
 * cart is 80-85% mobile and these are primary touch controls.
 *
 * At qty 1 the minus becomes a remove (trash) control — .ms-cart-qty-minus--remove.
 * On mobile the per-line subtotal (.ms-cart-qty-subtotal) sits at the right of the
 * stepper row; on desktop it lives in its own column instead.
 *
 * @since 2026-06-08. Paired with js/cart-quantity.js + inc/cart-quantity.php.
 */

.ms-cart-qty-row {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.ms-cart-qty {
	display: inline-flex;
	align-items: center;
	border: 1px solid #d4d4d4; /* neutral-300 */
	background: #fff;
	border-radius: 2px;
	flex: 0 0 auto;
}

.ms-cart-qty-btn {
	min-width: 44px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border: 0;
	padding: 0;
	font-size: 18px;
	line-height: 1;
	color: #171717; /* neutral-900 */
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.ms-cart-qty-btn:active { background: #f5f5f5; }
.ms-cart-qty-btn:disabled { opacity: 0.35; cursor: default; }

.ms-cart-qty-minus { border-right: 1px solid #d4d4d4; }
.ms-cart-qty-plus  { border-left: 1px solid #d4d4d4; }

/* Remove (trash) mode — minus button when qty is 1. */
.ms-cart-qty-minus--remove { color: #b91c1c; /* red-700 — destructive affordance */ }
.ms-cart-qty-minus--remove:active { background: #fef2f2; /* red-50 */ }
.ms-cart-qty-trash { display: block; pointer-events: none; }

.ms-cart-qty-value {
	min-width: 40px;
	padding: 0 4px;
	text-align: center;
	font-size: 16px;
	line-height: 44px;
	user-select: none;
}

/* Per-line subtotal shown on mobile, pushed to the right edge of the stepper row. */
.ms-cart-qty-subtotal {
	margin-left: auto;
	font-weight: 500;
	white-space: nowrap;
}

.ms-cart-qty--loading { opacity: 0.5; pointer-events: none; }

/* ── Cart "item removed / Cofnij?" success notice ──────────────────────────
   The default WC notice is a tall padded box with an oversized check and the
   undo link rendered as a block (second line). Make it a compact single bar
   with the message left and "Cofnij" as a real button right. */
.woocommerce-message {
	display: flex !important;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px 12px;
	padding: 10px 14px !important;
	margin: 0 0 16px !important;
	border: 1px solid #e5e5e5 !important;        /* neutral-200 */
	border-left: 3px solid #8fae1b !important;   /* keep the success-green accent */
	border-radius: 2px !important;
	font-size: 14px !important;
	line-height: 1.4 !important;
	color: #171717;
}

/* Drop the oversized WC check glyph (and its ~40px right gutter). */
.woocommerce-message::before { content: none !important; display: none !important; }

/* WC programmatically focuses the notice (role=alert, tabindex=-1) for screen
   readers — suppress the resulting visible outline (it is not a keyboard focus). */
.woocommerce-message:focus { outline: none !important; }

/* "Cofnij?" — render as an actual button, pushed to the right. */
.woocommerce-message .restore-item {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	margin-left: auto;
	padding: 8px 16px !important;
	min-height: 40px;
	background: #171717 !important;       /* neutral-900, matches theme buttons */
	color: #fff !important;
	font-size: 13px !important;
	font-weight: 500;
	border-radius: 2px !important;
	text-decoration: none !important;
	white-space: nowrap;
	-webkit-tap-highlight-color: transparent;
}
.woocommerce-message .restore-item:hover,
.woocommerce-message .restore-item:active { background: #000 !important; color: #fff !important; }