/*
 * turg-engagement — chip + slot styling.
 *
 * A FILE, never a <style> block: the fitness.ee host (Zone.ee/ZoneOS) page
 * optimiser strips <style> blocks out of served content. Enqueued stylesheets
 * survive it.
 *
 * Selectors are scoped to this plugin's own classes only. Nothing here reaches
 * into the theme or into .turg-embed internals.
 */

.turg-fc-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 32px;
	padding: 0 10px 0 8px;
	border-radius: 999px;
	background: #fff5e8;
	border: 1px solid #ffd9ad;
	color: #b4530f;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
}

.turg-fc-chip:hover,
.turg-fc-chip:focus {
	background: #ffe9ce;
	color: #8f3f08;
	text-decoration: none;
}

.turg-fc-chip[hidden] {
	display: none;
}

/*
 * The FitCoin: gold rim, reeded ring, embossed "F" (turg's CoinChip, option A of
 * the 2026-09-09 coin review). One SVG data URI here so the markup the theme and
 * the JS fallback print never changes. A shine sweeps across it while idle; the
 * pop flips it in 3D. Gold = money only — nothing else on the site wears it.
 */
.turg-fc-chip__coin {
	position: relative;
	width: 18px;
	height: 18px;
	margin-left: -2px;
	border-radius: 50%;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3CradialGradient id='f' cx='34%25' cy='28%25' r='80%25'%3E%3Cstop offset='0' stop-color='%23fde58f'/%3E%3Cstop offset='.45' stop-color='%23f0b32e'/%3E%3Cstop offset='1' stop-color='%23b07908'/%3E%3C/radialGradient%3E%3ClinearGradient id='r' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23fff1b8'/%3E%3Cstop offset='.5' stop-color='%23d99a14'/%3E%3Cstop offset='1' stop-color='%237a5200'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='32' cy='32' r='32' fill='url(%23r)'/%3E%3Ccircle cx='32' cy='32' r='29' fill='url(%23f)'/%3E%3Ccircle cx='32' cy='32' r='25.5' fill='none' stroke='%237a5200' stroke-opacity='.28' stroke-width='1.2' stroke-dasharray='1.4 1.6'/%3E%3Ctext x='32' y='43.7' text-anchor='middle' font-family='Red Hat Display,system-ui,sans-serif' font-weight='900' font-size='32' fill='%23fff3c4' fill-opacity='.9'%3EF%3C/text%3E%3Ctext x='32' y='43' text-anchor='middle' font-family='Red Hat Display,system-ui,sans-serif' font-weight='900' font-size='32' fill='%237a5200' fill-opacity='.85'%3EF%3C/text%3E%3C/svg%3E") center / 100% 100% no-repeat;
	flex: 0 0 auto;
	overflow: hidden;
	filter: drop-shadow(0 1px 1px rgba(122, 82, 0, .28));
	backface-visibility: hidden;
}

.turg-fc-chip__coin::after {
	content: '';
	position: absolute;
	inset: -40%;
	background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .55) 50%, transparent 60%);
	transform: translateX(-120%);
	animation: turg-coin-sweep 5s ease-in-out infinite;
}

@keyframes turg-coin-sweep {
	0%, 60% { transform: translateX(-120%); }
	80%, 100% { transform: translateX(120%); }
}

.turg-fc-chip--pop .turg-fc-chip__coin {
	animation: turg-coin-flip .9s cubic-bezier(.3, .8, .3, 1);
}

@keyframes turg-coin-flip {
	from { transform: perspective(200px) rotateY(0); }
	to { transform: perspective(200px) rotateY(720deg); }
}

@media (prefers-reduced-motion: reduce) {
	.turg-fc-chip__coin::after,
	.turg-fc-chip--pop .turg-fc-chip__coin {
		animation: none;
	}
}

.turg-fc-chip__n {
	font-variant-numeric: tabular-nums;
}

/*
 * The slot. No height here — the kit reserves `data-ek-height` itself, and only
 * AFTER a 200 from /widget/for-article, so an article with no matching question
 * (204) collapses instead of leaving a hole.
 */
.turg-trivia-slot {
	margin: 28px 0;
}

/*
 * Preview mode (1.1.0): the slot is printed for EVERY visitor but the kit only
 * mounts into it for a previewer. Until something is mounted the div must cost
 * the article nothing — no margin, no hole. (Not display:none — the kit mounts
 * lazily via IntersectionObserver, and a display:none element never intersects.)
 */
.turg-trivia-slot:empty {
	margin: 0;
}

.turg-trivia-slot[data-ek-empty] {
	display: none;
	margin: 0;
}

/* =========================================================================
 * 1.3.0 — the fitness.ee surfaces (S1 chip states · S4 claim form · S7 ask ·
 * popover · coin flight). The surface LAYOUT (bands, tiles, cards, footer
 * column) lives in the theme's main.css; this file owns only what the plugin
 * JS creates or toggles.
 * ========================================================================= */

.turg-fc-chip {
	position: relative;
	transition: transform .18s ease, background .18s ease;
}

.turg-fc-chip__streak {
	font-weight: 600;
	font-size: 12px;
	opacity: .9;
}

.turg-fc-chip__streak[hidden],
.turg-fc-chip__due[hidden] {
	display: none;
}

/* Red dot: today's check-in is still open. */
.turg-fc-chip__due {
	position: absolute;
	top: -3px;
	right: -3px;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #e02020;
	border: 2px solid #fff;
	box-sizing: content-box;
}

/* STRANGER: the offer. Gold fill, dark text, reads "+10 täna". */
.turg-fc-chip--offer {
	background: linear-gradient(180deg, #f6c453, #f0b32e);
	border-color: #e2a21d;
	color: #131a22;
	box-shadow: 0 1px 0 rgba(0, 0, 0, .08), 0 6px 14px -8px rgba(240, 179, 46, .9);
}

.turg-fc-chip--offer:hover,
.turg-fc-chip--offer:focus {
	background: linear-gradient(180deg, #f8cb66, #f2b83a);
	color: #131a22;
}

.turg-fc-chip--offer .turg-fc-chip__streak {
	opacity: .8;
}

.turg-fc-chip--pop {
	animation: turg-chip-pop .5s cubic-bezier(.3, 1.6, .4, 1);
}

@keyframes turg-chip-pop {
	0% { transform: scale(1); }
	35% { transform: scale(1.14, .9); }
	70% { transform: scale(.96, 1.06); }
	100% { transform: scale(1); }
}

/* The coin flight (JS animates position via WAAPI). */
.turg-fly-coin {
	position: fixed;
	z-index: 9999;
	width: 20px;
	height: 20px;
	margin: -10px 0 0 -10px;
	border-radius: 50%;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3CradialGradient id='f' cx='34%25' cy='28%25' r='80%25'%3E%3Cstop offset='0' stop-color='%23fde58f'/%3E%3Cstop offset='.45' stop-color='%23f0b32e'/%3E%3Cstop offset='1' stop-color='%23b07908'/%3E%3C/radialGradient%3E%3ClinearGradient id='r' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23fff1b8'/%3E%3Cstop offset='.5' stop-color='%23d99a14'/%3E%3Cstop offset='1' stop-color='%237a5200'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='32' cy='32' r='32' fill='url(%23r)'/%3E%3Ccircle cx='32' cy='32' r='29' fill='url(%23f)'/%3E%3Ccircle cx='32' cy='32' r='25.5' fill='none' stroke='%237a5200' stroke-opacity='.28' stroke-width='1.2' stroke-dasharray='1.4 1.6'/%3E%3Ctext x='32' y='43.7' text-anchor='middle' font-family='Red Hat Display,system-ui,sans-serif' font-weight='900' font-size='32' fill='%23fff3c4' fill-opacity='.9'%3EF%3C/text%3E%3Ctext x='32' y='43' text-anchor='middle' font-family='Red Hat Display,system-ui,sans-serif' font-weight='900' font-size='32' fill='%237a5200' fill-opacity='.85'%3EF%3C/text%3E%3C/svg%3E") center / 100% 100% no-repeat;
	filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .25));
	pointer-events: none;
}

/* The offer chip's popover on a page with no check-in surface (archives). */
.turg-pop {
	position: fixed;
	z-index: 9998;
	width: min(320px, calc(100vw - 16px));
	padding: 16px 18px;
	border-radius: 14px;
	background: #0c1f3a;
	color: #fff;
	box-shadow: 0 18px 40px -12px rgba(12, 31, 58, .6);
	font-size: 14px;
	line-height: 1.4;
}

.turg-pop b {
	display: block;
	font-size: 17px;
	margin-bottom: 4px;
}

.turg-pop p {
	margin: 0 0 12px;
	opacity: .85;
}

.turg-pop__x {
	position: absolute;
	top: 8px;
	right: 10px;
	border: 0;
	background: transparent;
	color: #fff;
	font-size: 14px;
	cursor: pointer;
	opacity: .7;
}

.turg-pop .turg-gain {
	color: #f6c453;
}

/* Busy / pulse states the JS toggles on theme buttons. */
.turg-btn.is-busy {
	opacity: .6;
	cursor: progress;
}

.turg-btn--pulse {
	animation: turg-pulse 1.8s ease-out;
}

@keyframes turg-pulse {
	0% { box-shadow: 0 0 0 0 rgba(240, 179, 46, .8); }
	100% { box-shadow: 0 0 0 18px rgba(240, 179, 46, 0); }
}

.turg-fine--err {
	color: #e02020;
}

/* The chip is a button now (1.4.0): it checks in in place. */
.turg-fc-chip.is-busy {
	opacity: .6;
	cursor: progress;
	pointer-events: none;
}

/*
 * "Arming" — the one-shot glow + pulse played ~1.5 s after boot while today's
 * coin is still unclaimed. The offer animates on LOAD; the reward animates on
 * the TAP (turg-chip-pop / the coin flight). JS removes the class on
 * animationend, so it can never loop.
 */
.turg-arm {
	animation: turg-arm 1.1s cubic-bezier(.3, .9, .3, 1);
}

.turg-btn--arm {
	animation: turg-arm 1.1s cubic-bezier(.3, .9, .3, 1);
}

@keyframes turg-arm {
	0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(240, 179, 46, 0); }
	35% { transform: scale(1.06); box-shadow: 0 0 0 6px rgba(240, 179, 46, .35), 0 0 18px 2px rgba(240, 179, 46, .55); }
	70% { transform: scale(.99); box-shadow: 0 0 0 12px rgba(240, 179, 46, .12), 0 0 22px 4px rgba(240, 179, 46, .28); }
	100% { transform: scale(1); box-shadow: 0 0 0 16px rgba(240, 179, 46, 0); }
}

/* The auto check-in toast + the chip's refusal note: pinned under the chip. */
.turg-chip-toast,
.turg-chip-note {
	position: fixed;
	z-index: 9998;
	max-width: min(260px, calc(100vw - 16px));
	padding: 8px 12px;
	border-radius: 10px;
	font-size: 13px;
	line-height: 1.3;
	box-shadow: 0 12px 28px -10px rgba(12, 31, 58, .55);
}

.turg-chip-toast {
	background: linear-gradient(180deg, #f6c453, #eaa72a);
	color: #131a22;
	font-weight: 700;
	animation: turg-toast-in .28s ease-out;
}

.turg-chip-toast__streak {
	margin-left: 4px;
	opacity: .8;
}

.turg-chip-note {
	margin: 0;
	background: #fff;
	border: 1px solid rgba(224, 32, 32, .35);
}

@keyframes turg-toast-in {
	from { opacity: 0; transform: translateY(-6px); }
	to { opacity: 1; transform: translateY(0); }
}

/* The chip's own done-popover. */
.turg-pop.is-done b {
	color: #f6c453;
}

@media (prefers-reduced-motion: reduce) {
	.turg-arm,
	.turg-btn--arm,
	.turg-chip-toast {
		animation: none;
	}
}

/* ---- S4 claim form: one template, four hosts ---- */
.turg-claim {
	margin: 12px 0 0;
	text-align: left;
}

.turg-claim__h {
	margin: 0 0 4px;
	font-size: 16px;
	font-weight: 800;
	line-height: 1.25;
}

.turg-claim__plus {
	display: inline-block;
	margin-left: 4px;
	padding: 1px 7px;
	border-radius: 999px;
	background: #f0b32e;
	color: #131a22;
	font-size: 12px;
	font-weight: 800;
	vertical-align: middle;
}

.turg-claim__sub {
	margin: 0 0 10px;
	font-size: 13px;
	color: #5b6572;
}

.turg-claim__field {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.turg-claim__field input[type="email"] {
	flex: 1 1 160px;
	min-width: 0;
	height: 40px;
	padding: 0 12px;
	border: 1px solid #dfe5ec;
	border-radius: 10px;
	font: inherit;
	font-size: 14px;
	background: #fff;
	color: #131a22;
}

.turg-claim__field input[type="email"]:focus {
	outline: 2px solid #005db9;
	outline-offset: 1px;
	border-color: #005db9;
}

.turg-claim__field .turg-btn {
	flex: 0 0 auto;
	height: 40px;
}

.turg-claim__cb {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	margin: 10px 0 2px;
	font-size: 13px;
	line-height: 1.35;
	cursor: pointer;
}

.turg-claim__cb input {
	margin: 2px 0 0;
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	accent-color: #005db9;
}

.turg-claim__cb b {
	color: #b4530f;
}

.turg-claim .turg-fine {
	display: block;
	margin-top: 2px;
}

.turg-claim__msg {
	margin: 8px 0 0;
	font-size: 13px;
	color: #5b6572;
}

.turg-claim__msg.is-err {
	color: #e02020;
}

.turg-claim__sent {
	padding: 12px 14px;
	border-radius: 10px;
	background: #eaf6ee;
	color: #1b5e34;
	font-size: 14px;
}

.turg-claim__sent b {
	display: block;
	margin-bottom: 2px;
}

.turg-claim__sent p {
	margin: 0;
}

/* Dark hosts (the navy band, the popover): flip the form palette. */
.turg-band .turg-claim__sub,
.turg-band .turg-claim__msg,
.turg-band .turg-fine,
.turg-pop .turg-claim__sub,
.turg-pop .turg-claim__msg,
.turg-pop .turg-fine {
	color: rgba(255, 255, 255, .78);
}

.turg-band .turg-claim__cb b,
.turg-pop .turg-claim__cb b {
	color: #f6c453;
}

/* ---- S7 soft ask: sits under the ✓ button, one dismiss, no nagging ---- */
.turg-ask {
	position: relative;
	margin-top: 14px;
	padding: 14px 36px 12px 14px;
	border-radius: 12px;
	background: #f2f5f9;
	border: 1px solid #dfe5ec;
}

.turg-band .turg-ask {
	background: rgba(255, 255, 255, .08);
	border-color: rgba(255, 255, 255, .18);
}

/*
 * The popover host is navy with `color:#fff`, and the dark-host overrides above
 * force the sub/msg/fine to near-white and the checkbox `<b>` to gold. Until
 * 1.5.0 the ask panel inside it kept its LIGHT `#f2f5f9` ground, so every one of
 * those labels — plus `.turg-claim__h` and the checkbox `<span>`, which have no
 * colour of their own and simply inherit the popover's white — rendered white on
 * near-white: an invisible form. The panel becomes a dark tile instead (the same
 * treatment the navy band already gets), which keeps the inherited white text and
 * leaves `.turg-band .turg-ask` untouched.
 */
.turg-pop .turg-ask {
	background: rgba(255, 255, 255, .06);
	border-color: rgba(255, 255, 255, .14);
}

.turg-ask__x {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 26px;
	height: 26px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: inherit;
	font-size: 13px;
	cursor: pointer;
	opacity: .6;
}

.turg-ask__x:hover {
	opacity: 1;
	background: rgba(0, 0, 0, .06);
}

.turg-ask .turg-claim {
	margin-top: 0;
}

.turg-ask > .turg-fine {
	display: block;
	margin-top: 8px;
}

/* Footer host: compact, dark ground (the theme footer is navy). */
.turg-ftbox .turg-claim__field input[type="email"] {
	height: 38px;
}

.turg-ftbox .turg-claim__sub,
.turg-ftbox .turg-claim__msg,
.turg-ftbox .turg-fine {
	color: rgba(255, 255, 255, .72);
}

.turg-ftbox .turg-claim__cb b {
	color: #f6c453;
}

@media (max-width: 760px) {
	.turg-pop {
		right: 8px !important;
	}
}

/* A done check-in button shows the tick only — the +N pill belongs to the offer. */
.turg-btn--done .turg-btn__plus {
	display: none;
}

/* =========================================================================
 * 1.5.0 — the earn juice. Every earn (not just the chip's own check-in) flies
 * coins into the chip, floats a "+N" off whatever earned it and counts the
 * chip's number up. Tasteful, not a slot machine: one small label, ~900ms,
 * no sound, and nothing at all under `prefers-reduced-motion`.
 * ========================================================================= */

/* The "+N" that rises off the earning element. JS positions it (fixed). */
.turg-gain-float {
	position: fixed;
	z-index: 9999;
	transform: translate(-50%, -50%);
	padding: 2px 9px;
	border-radius: 999px;
	background: linear-gradient(180deg, #f6c453, #f0b32e);
	color: #131a22;
	font-size: 13px;
	font-weight: 800;
	line-height: 1.5;
	white-space: nowrap;
	box-shadow: 0 6px 14px -8px rgba(240, 179, 46, .9);
	pointer-events: none;
	animation: turg-gain-rise .9s cubic-bezier(.2, .7, .3, 1) forwards;
}

@keyframes turg-gain-rise {
	0% { opacity: 0; transform: translate(-50%, -50%) scale(.85); }
	18% { opacity: 1; transform: translate(-50%, -60%) scale(1); }
	100% { opacity: 0; transform: translate(-50%, calc(-50% - 24px)) scale(1); }
}

/* The chip in its wallet state with today's coin still open: still a tap. */
.turg-fc-chip[data-turg-chip-due="1"] {
	cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
	.turg-gain-float,
	.turg-fc-chip--pop,
	.turg-arm,
	.turg-btn--arm {
		animation: none;
	}

	.turg-gain-float {
		display: none;
	}
}