/* ==========================================================================
   Wejha Store — cart progress (Cart + Checkout Blocks, order summary)
   --------------------------------------------------------------------------
   Drawn by assets/js/order-progress.js in WooCommerce's order-summary slot;
   the numbers and the sentence come from wejha-core (Sales\Progress).

   Direction: a stamp card. A stationery shop's loyalty card is a row of
   stamps you collect; here each milestone is one stamp on a single line.
   The line fills towards the next stamp; a stamp the cart reaches is pressed
   and inked — the minimum order in navy with a check (ordering is open), a
   reward in teal with its own mark (the truck for free delivery). The next
   stamp waits with a dashed teal ring, the one thing on the band that asks
   to be looked at. The amount still missing is marked with a highlighter
   stroke inside the configured sentence, so it is read before any label.

   Surfaces: the band is the one warm inset in the white summary card (sand;
   the palest teal once every reward is unlocked). No card inside it, no
   border around it, no shadow.

   Motion answers changes only: the line runs 650ms from where it was, a
   stamp is pressed as the line reaches it (the JS sets --wejha-stamp-delay),
   the figure counts, unlocking the last reward rings once with a few dots.
   prefers-reduced-motion removes all of it; every state is still drawn.

   Direction-neutral: every position is logical (inset-inline-*, inline-size,
   margin-inline-*), so the line fills from the right on the Arabic store and
   from the left under /en/. Built for any number of milestones: the stamps
   sit at the positions the server sends, and each label owns the stretch of
   line that ends at its stamp, so a third milestone never collides.
   ========================================================================== */

.wejha-progress {
	--wejha-progress-duration: 650ms;
	--wejha-progress-ease: cubic-bezier(0.33, 1, 0.68, 1); /* ease-out cubic — order-progress.js times the stamps on it */
	--wejha-progress-track: color-mix(in srgb, var(--wejha-heading) 12%, transparent);
	--wejha-progress-ink: var(--wejha-primary);
	--wejha-progress-reward: var(--wejha-teal);
	--wejha-stamp: 32px;
	--wejha-highlight: color-mix(in srgb, var(--wejha-yellow) 38%, transparent);
	position: relative;
	margin: 0;
	padding: 16px 16px 14px;
	border-radius: var(--wejha-radius-lg);
	background: var(--wejha-sand);
	transition: background-color 0.6s ease;
}

.wejha-progress--complete {
	--wejha-progress-ink: var(--wejha-progress-reward);
	background: var(--wejha-teal-soft);
}

/* The checkout's order summary is itself on sand — in the sidebar on wide screens and above Place Order on phones,
   where WooCommerce moves it — so on the checkout the band is the white inset instead. */
.wp-block-woocommerce-checkout .wejha-progress:not(.wejha-progress--complete) {
	background: var(--wejha-white);
}

/* --- Words ------------------------------------------------------------- */

/* The state that is already won (minimum met): a small line above the sentence, never its headline. */
.wejha-progress__status {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 4px;
	font-size: var(--wejha-text-xs);
	font-weight: 600;
	line-height: 1.4;
	color: var(--wejha-teal-text);
}

.wejha-progress__status .wejha-progress__mark {
	flex: none;
	inline-size: 16px;
	block-size: 16px;
	padding: 2px;
	box-sizing: border-box;
	border-radius: 50%;
	background: var(--wejha-teal-text);
	color: var(--wejha-white);
	stroke-width: 3;
}

.wejha-progress__message {
	margin: 0 0 14px;
	font-size: 0.9375rem; /* 15px */
	font-weight: 500;
	line-height: 1.65;
	color: var(--wejha-heading);
	text-wrap: balance; /* two even lines rather than an orphaned last word (Arabic runs long) */
}

.wejha-progress__message:focus {
	outline: none;
}

.wejha-progress__message:focus-visible {
	outline: 2px solid var(--wejha-focus-ring);
	outline-offset: 4px;
	border-radius: 2px;
}

/* The figure still missing: heavier, never broken across lines, marked like a highlighter would mark it.
   The stroke is drawn once when the sentence appears (a new state), not on every count. */
.wejha-progress__remaining {
	font-size: 1.125em;
	font-weight: 700;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
	padding-inline: 2px;
	background-image: linear-gradient(var(--wejha-highlight), var(--wejha-highlight));
	background-repeat: no-repeat;
	background-position: 0 88%;
	background-size: 100% 42%;
	animation: wejha-highlight 0.5s var(--wejha-progress-ease) 0.2s both;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

[dir="rtl"] .wejha-progress__remaining {
	background-position: 100% 88%; /* the stroke runs in reading direction */
}

/* Every reward unlocked: the configured congratulation is the headline, in the reward's colour. */
.wejha-progress--complete .wejha-progress__message {
	font-size: var(--wejha-text-md);
	font-weight: 600;
	color: var(--wejha-teal-text);
}

/* --- The line ------------------------------------------------------------ */

/* The rail is the line's box: it ends half a stamp before the band's edge, so the stamp at 100% fits. */
.wejha-progress__rail {
	position: relative;
	block-size: var(--wejha-stamp);
	margin-inline-end: calc(var(--wejha-stamp) / 2);
}

.wejha-progress__track {
	position: absolute;
	inset-inline: 0;
	inset-block-start: calc(50% - 3px);
	block-size: 6px;
	border-radius: 3px;
	background: var(--wejha-progress-track);
	overflow: hidden;
}

.wejha-progress__fill {
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	inline-size: var(--wejha-progress, 0%);
	max-inline-size: 100%;
	border-radius: inherit;
	background: var(--wejha-progress-ink);
	transition:
		inline-size var(--wejha-progress-duration) var(--wejha-progress-ease),
		background-color 0.4s ease;
}

/* --- Stamps -------------------------------------------------------------- */

.wejha-progress__stamp {
	position: absolute;
	inset-block-start: 0;
	display: grid;
	place-items: center;
	box-sizing: border-box;
	inline-size: var(--wejha-stamp);
	block-size: var(--wejha-stamp);
	margin-inline-start: calc(var(--wejha-stamp) / -2);
	border: 1.5px solid var(--wejha-progress-track);
	border-radius: 50%;
	background: var(--wejha-white);
	color: var(--wejha-text-muted);
	transition:
		background-color 0.2s ease,
		border-color 0.2s ease,
		color 0.2s ease;
	transition-delay: var(--wejha-stamp-delay, 0ms);
}

.wejha-progress__mark {
	display: block;
	inline-size: 18px;
	block-size: 18px;
}

/* The ring each stamp can send out (next: an invitation; reached: the press). */
.wejha-progress__stamp::after {
	content: "";
	position: absolute;
	inset: -1.5px;
	border: 2px solid var(--wejha-stamp-ring, var(--wejha-progress-reward));
	border-radius: 50%;
	opacity: 0;
	pointer-events: none;
}

/* The next stamp: the dashed ring of a stamp still to collect. */
.wejha-progress__stamp.is-next {
	border: 1.5px dashed var(--wejha-teal-text);
	color: var(--wejha-teal-text);
}

.wejha-progress__stamp.is-next::after {
	animation: wejha-halo 1.6s ease-out calc(var(--wejha-progress-duration) + 150ms) 2 both;
}

.wejha-progress.is-nudged .wejha-progress__stamp.is-next::after {
	animation: wejha-halo-nudge 0.9s ease-out both;
}

/* Reached: inked. The minimum in navy (the order can be placed), a reward in teal. */
.wejha-progress__stamp.is-reached {
	--wejha-stamp-ring: var(--wejha-progress-reward);
	border-color: var(--wejha-progress-reward);
	background: var(--wejha-progress-reward);
	color: var(--wejha-white);
	animation: wejha-stamp-press 0.42s cubic-bezier(0.3, 0.7, 0.4, 1) var(--wejha-stamp-delay, 0ms) both;
}

.wejha-progress__stamp--minimum_order.is-reached {
	--wejha-stamp-ring: var(--wejha-primary);
	border-color: var(--wejha-primary);
	background: var(--wejha-primary);
}

.wejha-progress__stamp.is-reached::after {
	animation: wejha-halo 0.7s ease-out calc(var(--wejha-stamp-delay, 0ms) + 180ms) 1 both;
}

.wejha-progress__stamp.is-reached .wejha-progress__mark {
	stroke-width: 2.4;
}

.wejha-progress__tick {
	stroke-dasharray: 1;
	stroke-dashoffset: 0;
}

.wejha-progress__stamp.is-reached .wejha-progress__tick {
	animation: wejha-tick 0.34s ease-out calc(var(--wejha-stamp-delay, 0ms) + 110ms) both;
}

/* The last reward, unlocked while the customer watched: one ring and a few dots — then quiet. */
.wejha-progress__burst {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.wejha-progress__burst::after {
	content: "";
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	inline-size: 5px;
	block-size: 5px;
	margin: -2.5px;
	border-radius: 50%;
	opacity: 0;
}

.wejha-progress.is-celebrating .wejha-progress__burst::after {
	animation: wejha-confetti 0.9s ease-out calc(var(--wejha-stamp-delay, 0ms) + 120ms) both;
}

.wejha-progress.is-celebrating {
	animation: wejha-glow 1.2s ease-out var(--wejha-progress-duration) both;
}

/* --- Amounts and names under the line --------------------------------------------------------------
   One grid column per stretch of line (the JS sets the fractions from the positions); each label ends
   under the outer edge of its stamp, so it never runs past the next one. */
.wejha-progress__milestones {
	display: grid;
	margin: 8px 0 0;
	margin-inline-end: calc(var(--wejha-stamp) / 2);
	padding: 0;
	list-style: none;
}

.wejha-progress__milestone {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-self: end;
	min-inline-size: 0;
	max-inline-size: calc(100% + var(--wejha-stamp) / 2);
	margin: 0;
	margin-inline-end: calc(var(--wejha-stamp) / -2);
	text-align: end;
}

.wejha-progress__amount {
	font-size: var(--wejha-text-xs);
	font-weight: 600;
	line-height: 1.35;
	color: var(--wejha-text-muted);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.wejha-progress__label {
	font-size: 0.75rem; /* 12px */
	line-height: 1.35;
	color: var(--wejha-text-muted);
}

.wejha-progress__milestone.is-next .wejha-progress__amount,
.wejha-progress__milestone.is-next .wejha-progress__label {
	color: var(--wejha-heading);
}

.wejha-progress__milestone.is-next .wejha-progress__amount {
	font-weight: 700;
}

.wejha-progress--complete .wejha-progress__milestone:last-child .wejha-progress__amount,
.wejha-progress--complete .wejha-progress__milestone:last-child .wejha-progress__label {
	color: var(--wejha-teal-text);
}

/* --- Proceed to checkout, below the minimum ---------------------------------------------------------
   Not a dimmed, broken button: the same pill in the band's sand, a lock, and what is missing — written by
   order-progress.js into data-wejha-lock from the server's amount. WooCommerce's own label stays in the
   DOM (hidden) and comes back the moment the minimum is met. */
body.woocommerce-cart .wc-block-cart .wc-block-cart__submit-button[data-wejha-lock],
body.woocommerce-cart .wc-block-cart .wc-block-cart__submit-button[data-wejha-lock]:hover,
body.woocommerce-cart .wc-block-cart .wc-block-cart__submit-button[data-wejha-lock]:active {
	gap: 10px;
	background: var(--wejha-sand);
	color: var(--wejha-heading);
	box-shadow: inset 0 0 0 1px var(--wejha-progress-track, color-mix(in srgb, var(--wejha-heading) 12%, transparent));
	transform: none;
	cursor: not-allowed;
}

body.woocommerce-cart .wc-block-cart .wc-block-cart__submit-button[data-wejha-lock] > .wc-block-components-button__text {
	display: none;
}

body.woocommerce-cart .wc-block-cart .wc-block-cart__submit-button[data-wejha-lock]::before {
	content: "";
	position: static; /* WooCommerce draws a blurred hover glow on this pseudo-element: undo all of it */
	z-index: auto;
	display: block;
	opacity: 1;
	filter: none;
	border-radius: 0;
	transition: none;
	flex: none;
	inline-size: 18px;
	block-size: 18px;
	background: currentColor;
	-webkit-mask: var(--wejha-lock-icon) center / contain no-repeat;
	mask: var(--wejha-lock-icon) center / contain no-repeat;
	--wejha-lock-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='10.5' width='14' height='10' rx='2.5'/%3E%3Cpath d='M8.5 10.5V8a3.5 3.5 0 0 1 7 0v2.5'/%3E%3C/svg%3E");
}

body.woocommerce-cart .wc-block-cart .wc-block-cart__submit-button[data-wejha-lock]::after {
	content: attr(data-wejha-lock);
	font-variant-numeric: tabular-nums;
}

/* --- Keyframes ------------------------------------------------------------ */

@keyframes wejha-stamp-press {
	0% { transform: scale(0.72); }
	55% { transform: scale(1.1); }
	100% { transform: scale(1); }
}

@keyframes wejha-tick {
	from { stroke-dashoffset: 1; }
	to { stroke-dashoffset: 0; }
}

@keyframes wejha-halo {
	0% { opacity: 0.6; transform: scale(1); }
	100% { opacity: 0; transform: scale(1.75); }
}

@keyframes wejha-halo-nudge {
	0% { opacity: 0.7; transform: scale(1); }
	100% { opacity: 0; transform: scale(1.9); }
}

@keyframes wejha-highlight {
	from { background-size: 0% 42%; }
	to { background-size: 100% 42%; }
}

@keyframes wejha-glow {
	0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--wejha-teal) 35%, transparent); }
	100% { box-shadow: 0 0 0 12px color-mix(in srgb, var(--wejha-teal) 0%, transparent); }
}

/* Eight dots thrown out from the stamp's rim (symmetric, so the same in both directions). They start at the edge
   of the stamp, never over its mark. */
@keyframes wejha-confetti {
	0% {
		opacity: 0;
		box-shadow:
			0px -17px 0 -1px var(--wejha-teal),
			12px -12px 0 -1px var(--wejha-yellow),
			17px 0px 0 -1px var(--wejha-primary),
			12px 12px 0 -1px var(--wejha-yellow),
			0px 17px 0 -1px var(--wejha-teal),
			-12px 12px 0 -1px var(--wejha-yellow),
			-17px 0px 0 -1px var(--wejha-primary),
			-12px -12px 0 -1px var(--wejha-yellow);
	}
	15% { opacity: 1; }
	100% {
		opacity: 0;
		box-shadow:
			0px -30px 0 -1.5px var(--wejha-teal),
			21px -21px 0 -1.5px var(--wejha-yellow),
			30px 0px 0 -1.5px var(--wejha-primary),
			21px 21px 0 -1.5px var(--wejha-yellow),
			0px 30px 0 -1.5px var(--wejha-teal),
			-21px 21px 0 -1.5px var(--wejha-yellow),
			-30px 0px 0 -1.5px var(--wejha-primary),
			-21px -21px 0 -1.5px var(--wejha-yellow);
	}
}

/* --- Small phones: a tighter band, the same composition ---------------------------------------- */
@media (max-width: 389.98px) {
	.wejha-progress {
		--wejha-stamp: 30px;
		padding: 14px 14px 12px;
	}

	.wejha-progress__message {
		font-size: var(--wejha-text-sm);
	}
}

/* --- Reduced motion: every state drawn at once, nothing decorative ---------------------------- */
@media (prefers-reduced-motion: reduce) {
	.wejha-progress,
	.wejha-progress__fill,
	.wejha-progress__stamp {
		transition: none;
	}

	.wejha-progress,
	.wejha-progress__remaining,
	.wejha-progress__stamp,
	.wejha-progress__stamp::after,
	.wejha-progress__stamp .wejha-progress__tick,
	.wejha-progress__burst::after {
		animation: none !important;
	}
}