/* ==========================================================================
 * BAG-CHECKOUT-3 — bag + checkout behaviour, third pass.
 * PHP: inc/areas/fix-bag-checkout3.php · JS: assets/js/areas/fix-bag-checkout3.js
 * Report: SITE-AUDIT/BAG-CHECKOUT-3.md
 *
 * Every selector is scoped to body.yb.yb-bc3 so this file can never reach a page
 * the PHP half did not mark, and so it stays inside the CSS bundler's scope check.
 * Nothing here changes a price, a colour token or another agent's component.
 * ========================================================================== */

/* --------------------------------------------------------------------------
 * 1. Bag — a quantity change is visible immediately
 * ----------------------------------------------------------------------- */

/* The row is a <tr>; browsers do not reliably honour opacity on one, so the pending
   state is put on the two cells the shopper is actually watching. */
body.yb.yb-bc3 .woocommerce-cart-form__cart-item.yb-bc3-busy .quantity,
body.yb.yb-bc3 .woocommerce-cart-form__cart-item.yb-bc3-busy .product-price,
body.yb.yb-bc3 .woocommerce-cart-form__cart-item.yb-bc3-busy .product-subtotal {
	opacity: 0.45;
	transition: opacity 0.12s ease-out;
}

body.yb.yb-bc3 .woocommerce-cart-form__cart-item.yb-bc3-busy .quantity {
	position: relative;
	opacity: 1; /* the stepper itself stays legible; the spinner below carries the state */
}

body.yb.yb-bc3 .woocommerce-cart-form__cart-item.yb-bc3-busy .quantity::after {
	content: "";
	position: absolute;
	top: 50%;
	right: -26px;
	width: 16px;
	height: 16px;
	margin-top: -8px;
	border: 2px solid rgba(0, 0, 0, 0.18);
	border-top-color: #111;
	border-radius: 50%;
	animation: yb-bc3-spin 0.7s linear infinite;
}

@keyframes yb-bc3-spin {
	to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
	body.yb.yb-bc3 .woocommerce-cart-form__cart-item.yb-bc3-busy .quantity::after { animation: none; }
	body.yb.yb-bc3 .woocommerce-cart-form__cart-item.yb-bc3-busy .product-price,
	body.yb.yb-bc3 .woocommerce-cart-form__cart-item.yb-bc3-busy .product-subtotal { transition: none; }
}

/* --------------------------------------------------------------------------
 * 2. Bag — "−" at the minimum reads as unavailable instead of emptying the line
 * ----------------------------------------------------------------------- */

body.yb.yb-bc3 .woocommerce-cart-form .quantity .minus.yb-bc3-stepper-off {
	opacity: 0.35;
	cursor: default;
}

/* --------------------------------------------------------------------------
 * 3. Bag — the ✕ is a full 44px target on a phone
 * ----------------------------------------------------------------------- */

@media (max-width: 767px) {
	body.yb.yb-bc3 .woocommerce-cart-form td.product-remove > a.remove {
		min-width: 44px;
		min-height: 44px;
	}
}

/* --------------------------------------------------------------------------
 * 4. "… removed. Undo?" toast
 *
 * WooCommerce writes the words and the Undo link; the JS only moves that notice
 * in here so it is not left off-screen at the top of the page.
 * ----------------------------------------------------------------------- */

body.yb.yb-bc3 .yb-bc3-toasts {
	position: fixed;
	right: 16px;
	bottom: 16px;
	z-index: 9998;
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-width: calc(100vw - 32px);
	pointer-events: none;
}

body.yb.yb-bc3 .yb-bc3-toast {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	width: 360px;
	max-width: 100%;
	padding: 14px 12px 14px 16px;
	border: 1px solid #E5E5E5;
	border-radius: 4px;
	background: #fff;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.14);
	pointer-events: auto;
}

body.yb.yb-bc3 .yb-bc3-toast__text {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 14px;
	line-height: 1.45;
	color: #111;
}

/* The moved WooCommerce notice keeps its words but drops its page-notice chrome. */
body.yb.yb-bc3 .yb-bc3-toast__text .woocommerce-message,
body.yb.yb-bc3 .yb-bc3-toast__text .woocommerce-info,
body.yb.yb-bc3 .yb-bc3-toast__text p {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font-size: 14px;
	line-height: 1.45;
	color: #111;
}

body.yb.yb-bc3 .yb-bc3-toast__text .woocommerce-message::before,
body.yb.yb-bc3 .yb-bc3-toast__text .woocommerce-info::before { content: none; }

body.yb.yb-bc3 .yb-bc3-toast__text a {
	color: #111;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}

body.yb.yb-bc3 .yb-bc3-toast__close {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 4px;
	background: none;
	color: #6B6B6B;
	cursor: pointer;
}

body.yb.yb-bc3 .yb-bc3-toast__close:hover { color: #111; }

@media (max-width: 767px) {
	body.yb.yb-bc3 .yb-bc3-toasts {
		right: 12px;
		left: 12px;
		bottom: 12px;
		max-width: none;
	}
	body.yb.yb-bc3 .yb-bc3-toast { width: auto; }
	/* Clear of the sticky checkout bar when that is on screen. */
	body.yb.yb-bc3.yb-bc3-has-stickybar .yb-bc3-toasts { bottom: 84px; }
}

/* --------------------------------------------------------------------------
 * 5. Bag on a phone — the existing Checkout button and total, kept in reach
 * ----------------------------------------------------------------------- */

body.yb.yb-bc3 .yb-bc3-stickybar {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 9997;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
	border-top: 1px solid #E5E5E5;
	background: #fff;
	box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
}

body.yb.yb-bc3 .yb-bc3-stickybar[hidden] { display: none !important; }

body.yb.yb-bc3 .yb-bc3-stickybar__total {
	flex: 0 0 auto;
	font-size: 16px;
	font-weight: 700;
	color: #111;
	white-space: nowrap;
}

body.yb.yb-bc3 .yb-bc3-stickybar__btn {
	flex: 1 1 auto;
	margin: 0;
	min-height: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

/* The bar sits over the page: give the document room so nothing is covered. */
body.yb.yb-bc3.yb-bc3-has-stickybar { padding-bottom: 76px; }

@media (min-width: 768px) {
	body.yb.yb-bc3 .yb-bc3-stickybar { display: none !important; }
	body.yb.yb-bc3.yb-bc3-has-stickybar { padding-bottom: 0; }
}

/* --------------------------------------------------------------------------
 * 6. Checkout — the field message that stays is sized like a field message
 *
 * The generic duplicate is removed by the JS; where no specific message exists
 * the remaining one inherits the page's 18px body size, which reads as a heading
 * under a 15px label.
 * ----------------------------------------------------------------------- */

body.yb.yb-bc3 form.checkout .checkout-inline-error-message,
body.yb.yb-bc3 form.checkout .yb-bc2-inline-error {
	font-size: 13px;
	line-height: 1.4;
}

/* --------------------------------------------------------------------------
 * 7. Checkout — error summary lines are links to their field
 * ----------------------------------------------------------------------- */

body.yb.yb-bc3 .yb-bc3-errlink {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

body.yb.yb-bc3 .yb-bc3-errlink:hover,
body.yb.yb-bc3 .yb-bc3-errlink:focus-visible { text-decoration-thickness: 2px; }

/* --------------------------------------------------------------------------
 * 8. Checkout — the payment note repeated at the top, in the page's notice style
 * ----------------------------------------------------------------------- */

body.yb.yb-bc3 .yb-bc3-topnote {
	margin: 0 0 20px;
	padding: 14px 16px;
	border: 1px solid #E5E5E5;
	border-left: 3px solid #111;
	border-radius: 4px;
	background: #F7F7F7;
	font-size: 14px;
	line-height: 1.5;
	color: #111;
}

@media (max-width: 767px) {
	body.yb.yb-bc3 .yb-bc3-topnote {
		margin-bottom: 16px;
		font-size: 13px;
	}
}