/**
 * Spoti: Video Progress Button - styles
 * Minimal, theme-friendly. Plays nicely on top of BuddyBoss + LD30.
 *
 * State machine on .svpb-wrap:
 *   data-svpb-state="locked"  -> filled progress bar, label "Obejrzyj film... (X%)"
 *   data-svpb-state="ready"   -> solid success colour, label "Zakończ, przejdź dalej"
 */

:root {
	--svpb-track-bg: #e9eef5;
	--svpb-fill-from: #5b8def;
	--svpb-fill-to:   #3a64c8;
	--svpb-locked-text: #4a5773;
	--svpb-ready-from: #21c389;
	--svpb-ready-to:   #15a06d;
	--svpb-ready-text: #ffffff;
	--svpb-shadow: 0 2px 6px rgba(20, 40, 80, .08);
	--svpb-shadow-strong: 0 6px 18px rgba(33, 195, 137, .35);
	--svpb-radius: 9999px; /* pill */
	--svpb-height: 52px;
	--svpb-transition: 220ms cubic-bezier(.2,.7,.2,1);
}

/* Native LD submit input: kept in the DOM purely as the form hit-target + nonce carrier.
   The .svpb-wrap itself is the visible/clickable surface (its click handler fires the
   original form.submit() when ready). LD's frontend may toggle `display:none` on this
   input -- that's fine, we don't rely on it being interactive. */
.svpb-wrap .learndash_mark_complete_button.svpb-native,
.sfwd-mark-complete .learndash_mark_complete_button.svpb-native {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0,0,0,0) !important;
	white-space: nowrap !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	opacity: 0 !important;
	pointer-events: none !important;
	-webkit-appearance: none;
	appearance: none;
}

/* Form must be the positioning context for the absolutely-positioned native button */
form.sfwd-mark-complete {
	position: relative;
	display: inline-block;
	max-width: 100%;
}

/* Center the LD action wrapper (button row) horizontally - override LD30 default. */
.learndash-wrapper:not(.ld-registration__outer-wrapper) .ld-content-actions .ld-content-action {
	margin: 0 auto;
}

/* The visible wrapper */
.svpb-wrap {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 280px;
	height: var(--svpb-height);
	padding: 0 28px;
	border-radius: var(--svpb-radius);
	overflow: hidden;
	background: var(--svpb-track-bg);
	box-shadow: var(--svpb-shadow);
	transition: box-shadow var(--svpb-transition), background var(--svpb-transition), transform var(--svpb-transition);
	font-weight: 600;
	font-size: 16px;
	letter-spacing: .01em;
	user-select: none;
	z-index: 1;
}

/* Progress fill - sits behind the label */
.svpb-fill {
	position: absolute;
	inset: 0 auto 0 0;
	width: 0%;
	background: linear-gradient(90deg, var(--svpb-fill-from) 0%, var(--svpb-fill-to) 100%);
	transition: width 600ms cubic-bezier(.25,.8,.25,1), background var(--svpb-transition), opacity var(--svpb-transition);
	will-change: width;
	z-index: 0;
}

/* Subtle moving sheen on the fill while LOCKED (only when there's measurable progress) */
.svpb-wrap[data-svpb-state="locked"] .svpb-fill::after {
	content: "";
	position: absolute;
	top: 0; bottom: 0;
	right: 0;
	width: 60px;
	background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.45) 50%, rgba(255,255,255,0) 100%);
	animation: svpb-sheen 1.8s linear infinite;
	pointer-events: none;
}
@keyframes svpb-sheen {
	0%   { transform: translateX(-80px); opacity: 0; }
	30%  { opacity: .9; }
	100% { transform: translateX(80px);  opacity: 0; }
}

/* Two stacked labels:
 *   .svpb-label        - dark text, sits over the un-filled (light) track area
 *   .svpb-label--fill  - light text, clipped to the fill width via clip-path
 * Together they always render with proper contrast no matter the % progress.
 * .svpb-wrap also exposes the percentage as `--svpb-pct` so CSS can derive the clip. */
.svpb-wrap { --svpb-pct: 0%; }

.svpb-label {
	position: relative;
	z-index: 1;
	color: var(--svpb-locked-text);
	transition: color var(--svpb-transition);
	pointer-events: none;
	white-space: nowrap;
	text-shadow: 0 1px 0 rgba(255,255,255,.4);
}

.svpb-label--fill {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1;
	color: #ffffff;
	text-shadow: 0 1px 2px rgba(0,0,0,.25);
	pointer-events: none;
	white-space: nowrap;
	/* Show this light label only over the filled portion. */
	clip-path: inset(0 calc(100% - var(--svpb-pct)) 0 0);
	-webkit-clip-path: inset(0 calc(100% - var(--svpb-pct)) 0 0);
	transition: clip-path 600ms cubic-bezier(.25,.8,.25,1), -webkit-clip-path 600ms cubic-bezier(.25,.8,.25,1);
}

/* LOCKED: cursor + tooltip-y feel. Wrap captures clicks for the early-click toast. */
.svpb-wrap[data-svpb-state="locked"] {
	cursor: not-allowed;
}

/* READY state: success gradient, brighter shadow, white label */
.svpb-wrap[data-svpb-state="ready"] {
	cursor: pointer;
	background: linear-gradient(90deg, var(--svpb-ready-from), var(--svpb-ready-to));
	box-shadow: var(--svpb-shadow-strong);
}
.svpb-wrap[data-svpb-state="ready"] .svpb-fill {
	width: 100% !important;
	background: linear-gradient(90deg, var(--svpb-ready-from), var(--svpb-ready-to));
	opacity: 0; /* let parent gradient show through cleanly */
}
.svpb-wrap[data-svpb-state="ready"] .svpb-label {
	color: var(--svpb-ready-text);
	text-shadow: 0 1px 1px rgba(0,0,0,.18);
}

/* Hover glow when ready */
.svpb-wrap[data-svpb-state="ready"]:hover {
	transform: translateY(-1px);
	box-shadow: 0 10px 22px rgba(33, 195, 137, .45);
}
.svpb-wrap[data-svpb-state="ready"]:active {
	transform: translateY(0);
	box-shadow: 0 4px 10px rgba(33, 195, 137, .4);
}

/* Pop on transition to ready */
.svpb-wrap.svpb-pop {
	animation: svpb-pop .55s cubic-bezier(.2,.9,.3,1.5);
}
@keyframes svpb-pop {
	0%   { transform: scale(1); }
	35%  { transform: scale(1.045); }
	60%  { transform: scale(.99); }
	100% { transform: scale(1); }
}

/* Shake on early click */
.svpb-wrap.svpb-shake {
	animation: svpb-shake .42s cubic-bezier(.36,.07,.19,.97);
}
@keyframes svpb-shake {
	10%, 90% { transform: translateX(-1px); }
	20%, 80% { transform: translateX(2px); }
	30%, 50%, 70% { transform: translateX(-4px); }
	40%, 60% { transform: translateX(4px); }
}

/* Toast at bottom-center */
.svpb-toast {
	position: fixed;
	left: 50%;
	bottom: 28px;
	transform: translateX(-50%) translateY(20px);
	min-width: 220px;
	max-width: min(92vw, 520px);
	padding: 12px 18px;
	border-radius: 10px;
	background: #1f2937;
	color: #fff;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	text-align: center;
	box-shadow: 0 10px 30px rgba(15, 25, 50, .3);
	opacity: 0;
	pointer-events: none;
	transition: opacity 240ms ease, transform 240ms ease;
	z-index: 9999;
}
.svpb-toast--show {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}
.svpb-toast[data-svpb-kind="warn"] { background: #b45309; }
.svpb-toast[data-svpb-kind="success"] { background: #15803d; }

/* Reduced motion — respect user setting */
@media (prefers-reduced-motion: reduce) {
	.svpb-fill { transition: width 120ms linear; }
	.svpb-wrap[data-svpb-state="locked"] .svpb-fill::after { display: none; }
	.svpb-wrap.svpb-pop, .svpb-wrap.svpb-shake { animation: none; }
	.svpb-toast { transition: opacity 120ms linear; }
}

/* Small screens */
@media (max-width: 480px) {
	.svpb-wrap { min-width: 0; width: 100%; padding: 0 16px; font-size: 15px; }
}