/*
 * Rahkar theme — cart page PS bridge (Phase 6).
 *
 * cart-page.css is a VERBATIM copy of the WP block styles (rh-cartpage / rh-cart-
 * line / rh-ship-bar / rh-promo-free / rh-cart-empty …). This file holds ONLY the
 * net-new rules that bridge PrestaShop's own markup to that skin — things the WP
 * CSS could not know about:
 *
 *   1. The quantity stepper: theme.js mounts bootstrap-touchspin on the kept
 *      .js-cart-line-product-quantity input. `display:contents` flattens its
 *      wrappers into the verbatim .rh-qty pill and we order −/value/+ in a row.
 *   2. The voucher/promo block (the WP design keeps coupons on checkout, so the
 *      cart-page voucher UI had no source CSS).
 *   3. Cross-sell / empty-cart suggestions come from ps_featuredproducts, which
 *      renders <section><h1>…</h1><div class="products"> of Phase-3 .rpc-card
 *      miniatures — re-grid them inside the rh upsell wrappers.
 *
 * Loads after cart-page.css on the cart controller, so it wins on equal
 * specificity. Keys off the same --wp--* tokens.
 */

/* The left items column (PS nests the list under .cart-overview). */
.rh-cartpage__items-col { min-width: 0; }

/* =====================================================================
 *  Sticky chrome on the cart funnel
 * ===================================================================== */
/* Pin the minimal funnel header to the top on scroll — desktop AND mobile.
 * It lives inside <header id="header">; keep it above the cart cards. */
#header {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	z-index: 300;
}

/* Base: position relative — anchors the loading spinner overlay and is the
 * mobile default (summary is not sticky on mobile). MUST stay BEFORE the sticky
 * rule below so sticky wins on desktop (equal specificity → source order). */
.rh-cartpage__summary { position: relative; }

@media (min-width: 968px) {
	/* Both grid columns start at the same top so the summary is level with
	 * the items list. */
	.rh-cartpage__grid { align-items: start; }
	/* Order summary sticks just under the sticky funnel header (≈60px) while
	 * the (long) items list scrolls. align-self:start keeps it top-aligned and
	 * leaves scroll travel for sticky. */
	.rh-cartpage__summary {
		align-self: start;
		position: -webkit-sticky;
		position: sticky;
		top: 72px;
	}
}

/* Order-summary loading state — toggled by cart.js while a cart change is in
 * flight: dim the content + show a centered spinner, block interaction. */
.rh-cartpage__summary.is-updating { pointer-events: none; }
.rh-cartpage__summary.is-updating > * { opacity: 0.6; transition: opacity 0.15s ease; }
.rh-cartpage__summary.is-updating::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 30px;
	height: 30px;
	margin: -15px 0 0 -15px;
	border: 3px solid rgba(109, 189, 186, 0.2);
	border-top-color: var(--wp--preset--color--primary, #0a66c2);
	border-radius: 50%;
	animation: rh-cart-spin 0.7s linear infinite;
	z-index: 5;
}
@keyframes rh-cart-spin { to { transform: rotate(360deg); } }

/* =====================================================================
 *  Quantity stepper — flatten bootstrap-touchspin into the rh-qty pill
 * ===================================================================== */
.rh-qty .bootstrap-touchspin,
.rh-qty .input-group-btn-vertical {
	display: contents;
}
.rh-qty .js-decrease-product-quantity { order: 1; }
.rh-qty .rh-qty__input,
.rh-qty .js-cart-line-product-quantity { order: 2; }
.rh-qty .js-increase-product-quantity { order: 3; }

.rh-qty .js-touchspin {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	min-height: 0;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: var(--wp--preset--color--text, #1a1d23);
	cursor: pointer;
	transition: background-color 120ms, color 120ms;
}
.rh-qty .js-touchspin:hover,
.rh-qty .js-touchspin:focus-visible {
	background: var(--wp--preset--color--surface, #f7f7f8);
	color: var(--wp--preset--color--primary, #0a66c2);
}
/* Force clean − / + glyphs regardless of the icon TouchSpin injects. */
.rh-qty .js-touchspin .material-icons { display: none; }
.rh-qty .js-decrease-product-quantity::before { content: "\2212"; }
.rh-qty .js-increase-product-quantity::before { content: "+"; }
.rh-qty .js-decrease-product-quantity::before,
.rh-qty .js-increase-product-quantity::before {
	font-size: 18px;
	font-weight: var(--rh-fw-strong);
	line-height: 1;
}

/* Trash folded into the qty pill — hidden until the line is at its minimum
 * quantity, where it takes the (hidden) decrease button's place. So at qty>min
 * the pill is [ − n + ]; at qty=min it's [ 🗑 n + ]. No standalone trash. */
.rh-qty .rh-cart-line__remove { order: 0; display: none; border-radius: 0; }
.rh-qty.is-min .js-decrease-product-quantity { display: none; }
.rh-qty.is-min .rh-cart-line__remove { display: inline-flex; }

/* Stock guard (Layer 1) — disable "+" once the line hits available stock, so
 * the shopper can't push past it (the CartController override is the server
 * backstop). Calm inline notes replace PS's red top banner. */
.rh-qty.is-max .js-increase-product-quantity {
	opacity: 0.3;
	pointer-events: none;
	cursor: not-allowed;
}
.rh-cart-line__stock-note {
	margin: 6px 0 0;
	font-size: 0.75rem;
	line-height: 1.5;
	color: var(--wp--preset--color--text-muted, #5b6271);
}
.rh-cart-line__stock-note--over {
	color: var(--wp--preset--color--danger, #dc2626);
	font-weight: var(--rh-fw-strong);
}

.rh-qty__input,
.rh-qty .js-cart-line-product-quantity {
	width: 40px;
	min-width: 32px;
	height: 32px;
	text-align: center;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--contrast, #0f1115);
	font: inherit;
	font-size: 0.9375rem;
	font-weight: var(--rh-fw-strong);
	font-variant-numeric: tabular-nums;
	-moz-appearance: textfield;
	appearance: textfield;
}
.rh-qty__input::-webkit-outer-spin-button,
.rh-qty__input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* In-flight feedback while a line update is posting. */
.rh-cart-line[aria-busy="true"] .rh-qty,
.rh-cart-line[aria-busy="true"] .rh-cart-line__total {
	opacity: 0.55;
}

/* Price column reuses the product-card price type (.rpc-price-original /
 * .rpc-price-current / .rpc-pct-badge from product-card.css) in a vertical
 * stack (the .rh-cart-line__total box is flex-direction:column, right-aligned),
 * so a discounted line reads exactly like a product card. */
.rh-cart-line__total .rpc-price-original { line-height: 1.2; }
.rh-cart-line__total .rpc-price-current { font-size: 0.95rem; }
.rh-cart-line__total .rpc-pct-badge {
	margin-top: 2px;
	min-width: 0;
	height: 20px;
	padding-inline: 7px;
	font-size: 0.68rem;
}

/* Keep the quantity pill compact — clamp the pill + its buttons/input to one
 * tidy row height (some global input/button rules otherwise inflate it). */
.rh-qty { height: 36px; }
.rh-qty .js-touchspin,
.rh-qty .rh-cart-line__remove,
.rh-qty .js-cart-line-product-quantity,
.rh-qty .rh-qty__input {
	height: 34px;
	min-height: 0;
	box-sizing: border-box;
}
.rh-qty .js-cart-line-product-quantity,
.rh-qty .rh-qty__input {
	padding-block: 0;
	line-height: 34px;
}
/* Lock the button/trash footprint so an AJAX re-render/reflow can never let a
 * flex child stretch — fixes the trash icon "jumping big" after +/− updates. */
.rh-qty .js-touchspin,
.rh-qty .rh-cart-line__remove {
	width: 34px;
	flex: 0 0 34px;
	padding: 0;
}
.rh-qty .rh-cart-line__remove svg {
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
}

/* Minimal-purchase warning above the disabled checkout CTA. */
.rh-cartpage__alert {
	margin: 0 0 12px;
	padding: 10px 12px;
	border-radius: 8px;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: #8a5a00;
	background: rgba(245, 158, 11, 0.10);
	border: 1px solid rgba(245, 158, 11, 0.30);
}
.rh-cartpage__checkout.is-disabled,
.rh-cartpage__checkout[disabled] {
	opacity: 0.5;
	pointer-events: none;
	border: 0;
}

/* Continue-shopping link (left column, under the list). */
.rh-cartpage__continue {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 16px;
	font-size: 0.875rem;
	font-weight: var(--rh-fw-base);
	text-decoration: none;
	color: var(--wp--preset--color--text-muted, #5b6271);
	transition: color 120ms;
}
.rh-cartpage__continue:hover { color: var(--wp--preset--color--primary, #0a66c2); }

.rh-cartpage__total-detail {
	display: block;
	font-size: 0.75rem;
	color: var(--wp--preset--color--text-muted, #5b6271);
	font-weight: var(--rh-fw-base);
}

/* Loyalty reward banner (ets_affiliatemarketing cart-message override) — soft
 * primary card + gift icon, replacing the module's raw Bootstrap .alert-info.
 * Rendered inside the shipping row's .rh-cartpage__total-detail, so reset the
 * inherited muted/small type. */
.rh-reward {
	display: flex;
	align-items: center;
	gap: 6px;
	width: 100%;
	box-sizing: border-box;
	margin: 8px 0 8px;
	padding: 7px 10px;
	border-radius: 8px;
	font-size: 0.78rem;
	font-weight: var(--rh-fw-strong);
	line-height: 1.4;
	text-align: start;
	color: var(--wp--preset--color--primary-dark, #074a8d);
	background: rgba(109, 189, 186, 0.06);
}
/* Gift icon as a persistent ::before — survives the module's front.js, which on
 * every cart ajaxComplete empties #ets_affiliatemarketing_cart_message and
 * re-injects a raw <div class="alert alert-info"> (built in JS, not our tpl). */
.rh-reward::before {
	content: "";
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230a66c2' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 12 20 22 4 22 4 12'/%3E%3Crect x='2' y='7' width='20' height='5'/%3E%3Cline x1='12' y1='22' x2='12' y2='7'/%3E%3Cpath d='M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z'/%3E%3Cpath d='M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z'/%3E%3C/svg%3E") no-repeat center / contain;
}
/* Neutralise the Bootstrap alert the module's JS injects after a cart update so
 * it blends into the .rh-reward line instead of nesting a blue box. */
.rh-reward .alert,
.rh-reward .alert-info {
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	color: inherit;
	font: inherit;
	line-height: inherit;
	text-align: inherit;
	flex: 1 1 auto;
	min-width: 0;
}
.rh-reward__text { flex: 1 1 auto; min-width: 0; }
.rh-reward__text strong,
.rh-reward__text b { font-weight: var(--rh-fw-strong); }
/* Hide the module's own inline spinner — the summary already shows a loader. */
.rh-reward .icon-loading { display: none; }
/* If the module's JS empties the box (no reward this time), hide it entirely
 * so a lone icon doesn't linger. */
.rh-reward:empty { display: none; }

/* =====================================================================
 *  Voucher / promo
 * ===================================================================== */
.rh-promo { margin-top: 14px; }
.rh-promo__applied {
	list-style: none;
	margin: 0 0 10px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.rh-promo__applied-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 8px 10px;
	border-radius: 8px;
	font-size: 0.8125rem;
	background: rgba(25, 135, 84, 0.08);
	border: 1px solid rgba(25, 135, 84, 0.18);
	color: var(--wp--preset--color--success, #198754);
}
.rh-promo__applied-right { display: inline-flex; align-items: center; gap: 8px; }
.rh-promo__applied-value { font-weight: var(--rh-fw-strong); font-variant-numeric: tabular-nums; }
.rh-promo__remove {
	display: inline-flex;
	color: var(--wp--preset--color--text-muted, #5b6271);
	transition: color 120ms;
}
.rh-promo__remove:hover { color: var(--wp--preset--color--danger, #dc2626); }

.rh-promo__toggle { margin: 0; }
.rh-promo__toggle .collapse-button {
	font-size: 0.875rem;
	font-weight: var(--rh-fw-strong);
	color: var(--wp--preset--color--primary, #0a66c2);
	text-decoration: none;
	cursor: pointer;
}
.rh-promo__toggle .collapse-button:hover { text-decoration: none; }

/* Bootstrap collapse: hidden unless .in (theme.js toggles it). */
.rh-promo__panel.collapse:not(.in) { display: none; }
.rh-promo__panel.collapse.in { display: block; }
.rh-promo__form-wrap { padding-top: 12px; }
.rh-promo__form { display: flex; gap: 8px; }
.rh-promo__input {
	flex: 1 1 auto;
	min-width: 0;
	height: var(--wp--custom--button--h--md, 44px);
	padding: 0 12px;
	border: 1px solid var(--wp--preset--color--border, #e2e4e9);
	border-radius: var(--wp--custom--button--radius, 10px);
	background: var(--wp--preset--color--base, #fff);
	color: var(--wp--preset--color--contrast, #0f1115);
	font: inherit;
	font-size: 0.875rem;
}
.rh-promo__input:focus-visible {
	outline: none;
	border-color: var(--wp--preset--color--primary, #0a66c2);
}
.rh-promo__submit {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--wp--custom--button--h--md, 44px);
	padding: 0 var(--wp--custom--button--px--md, 18px);
	border: 0;
	border-radius: var(--wp--custom--button--radius, 10px);
	background: var(--wp--preset--color--primary, #0a66c2);
	color: #fff;
	font: inherit;
	font-size: 0.875rem;
	font-weight: var(--wp--custom--button--fw, 600);
	cursor: pointer;
	transition: background-color 120ms;
}
.rh-promo__submit:hover { background: var(--wp--preset--color--primary-dark, #074a8d); }
.rh-promo__cancel {
	display: inline-block;
	margin-top: 8px;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--text-muted, #5b6271);
	cursor: pointer;
	text-decoration: none;
}
.rh-promo__error {
	display: none;
	margin-top: 10px;
	padding: 8px 10px;
	border-radius: 8px;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--danger, #dc2626);
	background: rgba(220, 38, 38, 0.08);
	border: 1px solid rgba(220, 38, 38, 0.20);
}
.rh-promo__error[style*="block"],
.rh-promo__error.show { display: block; }
.rh-promo__offer {
	margin: 14px 0 8px;
	font-size: 0.8125rem;
	font-weight: var(--rh-fw-strong);
	color: var(--wp--preset--color--text-muted, #5b6271);
}
.rh-promo__offers { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.rh-promo__offer-item { font-size: 0.8125rem; }
.rh-promo__offer-item .code {
	font-weight: var(--rh-fw-strong);
	color: var(--wp--preset--color--primary, #0a66c2);
}

/* =====================================================================
 *  Cross-sell strip (ps_featuredproducts → rpc-card miniatures)
 * ===================================================================== */
.rh-cartpage__upsell {
	margin-top: 36px;
	padding-top: 24px;
	border-top: 1px solid var(--wp--preset--color--border, #e2e4e9);
}
.rh-cartpage__upsell section { margin: 0; }
.rh-cartpage__upsell h1 {
	margin: 0 0 16px;
	font-size: 1.125rem;
	font-weight: var(--rh-fw-strong);
	color: var(--wp--preset--color--contrast, #0f1115);
}
.rh-cartpage__upsell .products,
.rh-cart-empty__featured .products {
	list-style: none;
	margin: 0;
	padding: 4px 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
	gap: 14px;
}
@media (max-width: 640px) {
	.rh-cartpage__upsell .products {
		display: flex;
		overflow-x: auto;
		gap: 10px;
		scrollbar-width: thin;
		-webkit-overflow-scrolling: touch;
	}
	.rh-cartpage__upsell .products > .rpc-card { flex: 0 0 160px; }
}
.rh-cartpage__upsell > section > a[href] {
	display: inline-block;
	margin-top: 16px;
	font-size: 0.875rem;
	font-weight: var(--rh-fw-strong);
	color: var(--wp--preset--color--primary, #0a66c2);
	text-decoration: none;
}
.rh-cart-empty__featured h1 {
	margin: 0 0 14px;
	font-size: 1rem;
	font-weight: var(--rh-fw-strong);
	color: var(--wp--preset--color--text-muted, #5b6271);
}
.rh-cart-empty__featured section { margin: 0; }