/**
 * Loyalty Program — customer-facing timeline.
 * Loaded by frontend.php on My Account (incl. the cancel flow) and wherever
 * the [calio_loyalty_timeline] shortcode renders. Typography inherits the
 * theme; only layout, palette accents and small labels are set here.
 *
 * Look: round product circles, name in a small bubble overlaying the bottom
 * of each circle, a circular "Næste levering" badge on the next gift only,
 * blurred icon for mystery gifts, horizontal scroll on narrow screens.
 */

/* The Woo account content column is a flex child; without min-width:0 it
 * refuses to shrink and the strip pushes the whole page wider instead of
 * scrolling. */
.woocommerce-MyAccount-content {
	min-width: 0;
	max-width: 100%;
}

.calio-loyalty {
	--clp-primary: var(--e-global-color-ec74859, #18564b);
	--clp-accent: #25ae91;
	--clp-line: #e7efec;
	--clp-muted: #6d7f7b;
	--clp-soft: #f5faf8;
	--clp-tint: #ecf7f2;
	margin: 0 0 24px;
	width: 100%;
	max-width: 100%;
	/* min-width:0 + overflow:hidden let this shrink inside any flex/grid
	 * parent, so the track below scrolls instead of overlaying the page. */
	min-width: 0;
	overflow: hidden;
}

/* Light container around heading + slider on the account pages — a quiet
 * grey frame, no fill. The compact (shortcode) variant stays bare. */
.calio-loyalty--full {
	border: 1px solid #e5e5e5;
	border-radius: 12px;
	padding: 14px 16px 10px;
}

.calio-loyalty__head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	flex-wrap: wrap;
}

.calio-loyalty__heading {
	font-size: 20px;
	font-weight: 600;
}

/* Quiet pill — the grey frame stays; only the text darkens. Muted-on-soft read
 * at ~4:1, primary-on-soft is ~8:1 at the same size. */
.calio-loyalty__count {
	font-size: 12px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--clp-primary);
	background: var(--clp-soft);
	border: 1px solid var(--clp-line);
	border-radius: 999px;
	padding: 2px 10px;
	white-space: nowrap;
}

.calio-loyalty__sub {
	font-size: 13px;
	line-height: 1.45;
	color: var(--clp-muted);
	margin: 0 0 6px;
}

.calio-loyalty__track {
	position: relative; /* item offsets measure against the track for the center-on-next script */
	display: flex;
	max-width: 100%;
	overflow-x: auto;
	/* Top padding leaves room for the badge overlapping the next-gift circle. */
	padding: 22px 2px 8px;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}

/* Items spread to fill the row (each capped), so few gifts stay compact and
 * many gifts overflow into horizontal scroll. Extra width = extra spacing. */
.calio-loyalty__item {
	position: relative;
	flex: 1 0 98px;
	min-width: 98px;
	max-width: 156px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 4px;
}

/* Connector line between the circles: dotted ahead, solid where progress has
 * been made (every segment to the right of a received gift). Halves meet
 * behind each circle. */
.calio-loyalty__item::before,
.calio-loyalty__item::after {
	content: "";
	position: absolute;
	top: 41px;
	border-top: 2px dotted #ccd8d3;
}

.calio-loyalty__item::before {
	left: 0;
	width: 50%;
}

.calio-loyalty__item::after {
	left: 50%;
	right: 0;
}

.calio-loyalty__item:first-child::before,
.calio-loyalty__item:last-child::after {
	display: none;
}

.calio-loyalty__item.is-received::after,
.calio-loyalty__item.is-received + .calio-loyalty__item::before {
	border-top-style: solid;
	border-top-color: var(--clp-primary);
}

/* Only the segment from the next gift into the first locked one is green —
 * segments between locked gifts stay grey. */
.calio-loyalty__item.is-next::after,
.calio-loyalty__item.is-next + .calio-loyalty__item::before {
	border-top-color: var(--clp-accent);
}

/* The product circle. */
.calio-loyalty__dot {
	position: relative;
	z-index: 1;
	width: 84px;
	height: 84px;
	border-radius: 50%;
	background: var(--clp-soft);
	border: 1px solid var(--clp-line);
	display: flex;
	align-items: center;
	justify-content: center;
}

.calio-loyalty__dot img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
	display: block;
}

/* Circular "Næste levering" badge — only rendered on the next gift. */
.calio-loyalty__num {
	position: absolute;
	top: -18px;
	left: -10px;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--clp-tint);
	border: 1px solid var(--clp-accent);
	box-shadow: 0 1px 3px rgba(21, 48, 42, 0.12);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	line-height: 1;
	z-index: 2;
}

.calio-loyalty__num-n,
.calio-loyalty__num-w {
	font-size: 8px;
	font-weight: 600;
	color: var(--clp-primary);
	letter-spacing: 0.02em;
}

.calio-loyalty__num-w {
	margin-top: 1px;
}

.calio-loyalty__check {
	position: absolute;
	right: 2px;
	bottom: 2px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--clp-primary);
	color: #fff;
	font-size: 11px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px solid #fff;
	z-index: 2;
}

.calio-loyalty__gifticon {
	font-size: 26px;
	line-height: 1;
}

.calio-loyalty__name {
	margin-top: 4px;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.25;
	max-width: 100%;
	overflow-wrap: anywhere;
}

.calio-loyalty__meta {
	font-size: 11px;
	line-height: 1.2;
	color: var(--clp-primary);
}

/* Sits tight under the name — the item's 4px gap is too much between two
 * small lines. Same at every width. */
.calio-loyalty--full .calio-loyalty__meta {
	margin-top: -3px;
}

/* States — dotted green ring on the next gift, solid green ring once received. */
.calio-loyalty__item.is-received .calio-loyalty__dot {
	border: 2px solid var(--clp-accent);
}

.calio-loyalty__item.is-next .calio-loyalty__dot {
	background: var(--clp-tint);
	border: 2px dashed var(--clp-accent);
}

.calio-loyalty__item.is-upcoming .calio-loyalty__dot {
	border: 2px dashed #ccd8d3;
}

.calio-loyalty__item.is-voided {
	opacity: 0.45;
}

.calio-loyalty__item.is-voided .calio-loyalty__dot img {
	filter: grayscale(1);
}

.calio-loyalty__item.is-mystery .calio-loyalty__dot {
	border-style: dashed;
}

/* Mystery: the icon, heavily blurred — the reveal comes with the delivery. */
.calio-loyalty__item.is-mystery .calio-loyalty__gifticon {
	font-size: 42px;
	filter: blur(7px);
	opacity: 0.9;
}

/* "Hemmelig gave" is a stand-in, not a product name — set it in italics. */
.calio-loyalty__item.is-mystery .calio-loyalty__name {
	font-style: italic;
}

/* Mystery placeholder — a big "?" on a frosted overlay across the circle. */
.calio-loyalty__reveal {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	background: rgba(255, 255, 255, 0.45);
	border-radius: 50%;
	font-size: 26px;
	font-weight: 700;
	line-height: 1;
	color: var(--clp-primary);
	padding: 0 8px;
	letter-spacing: 0.02em;
}

.calio-loyalty__carrier-note {
	font-size: 14px;
	color: var(--clp-muted);
	margin: 8px 0 20px;
}

/* Mobile: open the frame (bottom rule only) and size circles so four gifts
 * show at a time. Scoped to the full variant — the compact one is smaller
 * already. */
@media ( max-width: 767px ) {
	.calio-loyalty--full {
		border-width: 0 0 1px;
		border-radius: 0;
		padding: 0 0 14px;
	}

	/* ~3.5 circles in view — the half one signals there is more to scroll. */
	.calio-loyalty--full .calio-loyalty__item {
		flex-basis: 27vw;
		min-width: 27vw;
	}

	.calio-loyalty--full .calio-loyalty__dot {
		width: 68px;
		height: 68px;
	}

	.calio-loyalty--full .calio-loyalty__item::before,
	.calio-loyalty--full .calio-loyalty__item::after {
		top: 33px;
	}

	.calio-loyalty--full .calio-loyalty__num {
		width: 38px;
		height: 38px;
		top: -18px;
		left: -8px;
	}

	.calio-loyalty--full .calio-loyalty__check {
		width: 18px;
		height: 18px;
		font-size: 10px;
	}

	.calio-loyalty--full .calio-loyalty__item.is-mystery .calio-loyalty__gifticon {
		font-size: 34px;
	}
}

/* Compact variant — product-page shortcode, subtle. */
.calio-loyalty--compact .calio-loyalty__heading {
	font-size: 14px;
}

.calio-loyalty--compact .calio-loyalty__track {
	/* No "Næste levering" badge here, so no top room to reserve. */
	padding: 4px 2px 6px;
}

.calio-loyalty--compact .calio-loyalty__item {
	flex: 1 0 78px;
	min-width: 78px;
	max-width: 120px;
	gap: 3px;
}

.calio-loyalty--compact .calio-loyalty__item::before,
.calio-loyalty--compact .calio-loyalty__item::after {
	top: 31px;
}

.calio-loyalty--compact .calio-loyalty__dot {
	width: 64px;
	height: 64px;
}

.calio-loyalty--compact .calio-loyalty__check {
	width: 15px;
	height: 15px;
	font-size: 9px;
	right: 1px;
	bottom: 1px;
}

.calio-loyalty--compact .calio-loyalty__gifticon {
	font-size: 20px;
}

.calio-loyalty--compact .calio-loyalty__item.is-mystery .calio-loyalty__gifticon {
	font-size: 26px;
	filter: blur(4px);
}

.calio-loyalty--compact .calio-loyalty__name {
	margin-top: 3px;
	font-size: 11px;
	font-weight: 500;
}

.calio-loyalty--compact .calio-loyalty__meta {
	font-size: 10px;
	margin-top: -2px;
}

/* Mobile: same viewport-relative width as the account strip, so only a few
 * circles show and the rest is clearly scrollable. It sits in the padded
 * purchase card, so fewer fit here than on the account page. */
@media ( max-width: 767px ) {
	.calio-loyalty--compact .calio-loyalty__item {
		flex-basis: 27vw;
		min-width: 27vw;
	}
}

/* Product-page shortcode: collapsed by default, and it sits as the last item
 * inside the configurator's grey .dg-sub-bottom panel — which is a flex column
 * with its own 16px gap, so no top margin here. The summary sits outside
 * .calio-loyalty and cannot use the --clp-* tokens. */
.calio-loyalty__disclosure {
	margin: 0;
}

.calio-loyalty__summary {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	cursor: pointer;
	list-style: none;
	font-size: 14px;
	font-weight: 600;
}

.calio-loyalty__summary::-webkit-details-marker {
	display: none;
}

/* Chevron, sitting right after the text; flips when open. */
.calio-loyalty__summary::after {
	content: "";
	width: 8px;
	height: 8px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	opacity: 0.55;
	transition: transform 0.15s ease;
}

.calio-loyalty__disclosure[open] .calio-loyalty__summary::after {
	transform: rotate(-135deg);
}

/* The summary already sits above the strip. */
.calio-loyalty__disclosure .calio-loyalty--compact {
	margin-bottom: 0;
}

/* Cancel-flow gift step (Emil 2026-10-15): the next gift big, later gifts as a small row. */
.calio-loyalty--cancel {
	border: 2px solid var(--clp-accent);
	border-radius: 12px;
	background: var(--clp-tint);
	padding: 18px;
}

.calio-loyalty__spot {
	display: flex;
	align-items: center;
	gap: 18px;
}

.calio-loyalty__spot-dot {
	flex: 0 0 120px;
	width: 120px;
	height: 120px;
	border-radius: 50%;
	background: #fff;
	border: 2px solid var(--clp-accent);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.calio-loyalty__spot-dot img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.calio-loyalty__spot-q,
.calio-loyalty__more-dot.is-mystery span {
	font-weight: 700;
	color: var(--clp-primary);
	line-height: 1;
}

.calio-loyalty__spot-q {
	font-size: 54px;
}

.calio-loyalty__spot.is-mystery .calio-loyalty__spot-dot {
	border-style: dashed;
}

.calio-loyalty__spot-text {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.calio-loyalty__spot-eyebrow {
	font-size: 12px;
	font-weight: 600;
	color: var(--clp-primary);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.calio-loyalty__spot-name {
	font-size: 22px;
	font-weight: 700;
	line-height: 1.2;
}

.calio-loyalty__spot-note {
	font-size: 13px;
	color: var(--clp-muted);
}

.calio-loyalty__more {
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid var(--clp-line);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}

.calio-loyalty__more-label {
	font-size: 13px;
	font-weight: 600;
	color: var(--clp-primary);
}

.calio-loyalty__more-row {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}

.calio-loyalty__more-dot {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #fff;
	border: 1px dashed #ccd8d3;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.calio-loyalty__more-dot img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.calio-loyalty__more-dot.is-mystery span {
	font-size: 18px;
}

@media ( max-width: 767px ) {
	.calio-loyalty--cancel {
		padding: 14px;
	}

	.calio-loyalty__spot {
		gap: 14px;
	}

	.calio-loyalty__spot-dot {
		flex-basis: 96px;
		width: 96px;
		height: 96px;
	}

	.calio-loyalty__spot-q {
		font-size: 44px;
	}

	.calio-loyalty__spot-name {
		font-size: 19px;
	}

	.calio-loyalty__more-dot {
		width: 36px;
		height: 36px;
	}
}