/* =============================================================================
   Studio Access — front-end styles for the plugin's own pieces.
   Colours come from the theme's CSS variables, so anything changed in
   Appearance > Customize is picked up here automatically.
   ========================================================================== */

.sp-request-form {
	display: grid;
	gap: .9rem;
	margin-top: 1.6rem;
	text-align: left;
}
.sp-request-form textarea {
	width: 100%;
	border: 1px solid var(--sp-rule, #ddd);
	border-radius: calc(var(--sp-radius, 12px) * .6);
	padding: .85em 1em;
	font: inherit;
	font-size: calc(var(--sp-fs-base, 17px) * .92);
	color: var(--sp-ink, #16171c);
	background: var(--sp-surface, #fff);
	resize: vertical;
}
.sp-request-form textarea:focus {
	outline: none;
	border-color: var(--sp-accent, #4b3fa8);
	box-shadow: 0 0 0 4px var(--sp-accent-10, rgba(75,63,168,.1));
}
.sp-request-form .sp-btn { justify-self: center; }

.sp-notice__meta {
	font-size: calc(var(--sp-fs-base, 17px) * .84);
	color: var(--sp-ink-soft, #666);
}
.sp-notice__signout { margin-top: 1.8rem; }
.sp-notice__signout .sp-logout { color: var(--sp-ink-soft, #666); }

.sp-btn.is-disabled { opacity: .45; pointer-events: none; }

/* Discourage casual saving of the protected player and images. */
.sp-video video,
.sp-video__poster,
.sp-gallery__item img {
	-webkit-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
	-webkit-user-drag: none;
}

/*
 * Watermark.
 *
 * Two styles, both carrying the viewer's own identity so that a screen
 * recording is traceable to one account:
 *
 *   .sp-video__wm        the caption tiled across the whole picture at an
 *                        angle — cannot be cropped out of a recording
 *   .sp-video__watermark a single drifting caption in the corner
 *
 * Both stay hidden until playback starts, so neither competes with the poster
 * title, and both drift slowly so they cannot be averaged away frame by frame.
 */
.sp-video__wm {
	position: absolute;
	/* Oversized and rotated, so the tiling covers the corners too. */
	inset: -40%;
	z-index: 4;
	pointer-events: none;
	background-repeat: repeat;
	opacity: 0;
	transition: opacity .8s ease;
	/* difference keeps the caption legible over both dark and bright footage,
	   which plain white at low opacity does not. */
	mix-blend-mode: difference;
}
.sp-video.is-playing .sp-video__wm {
	opacity: var(--sp-wm-opacity, .1);
	animation: sp-wm-drift 90s linear infinite alternate;
}

@keyframes sp-wm-drift {
	0%   { background-position: 0 0; }
	100% { background-position: 340px 220px; }
}

.sp-video__watermark { opacity: 0; transition: opacity .6s ease; }
.sp-video.is-playing .sp-video__watermark {
	opacity: var(--sp-wm-opacity, .3);
	animation: sp-drift 71s linear infinite alternate;
}
@keyframes sp-drift {
	0%   { transform: translate(0, 0); }
	25%  { transform: translate(-24vw, -14vh); }
	50%  { transform: translate(-6vw, -26vh); }
	75%  { transform: translate(-30vw, -5vh); }
	100% { transform: translate(-2vw, -20vh); }
}
.sp-no-motion .sp-video.is-playing .sp-video__wm,
.sp-no-motion .sp-video.is-playing .sp-video__watermark { animation: none; }

/* The player script reveals whichever watermark is in use once playback starts;
   the inline opacity set by PHP is the target value. */

/* Document overlay */
.sp-doc__hint {
	color: rgba(255,255,255,.6);
	font-size: .8rem;
	letter-spacing: .04em;
}

/* Document viewer (PDF.js canvas renderer) ------------------------------- */

.sp-doc__tools { display: flex; align-items: center; gap: .5rem; }
.sp-doc__zoom {
	background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
	color: #fff; width: 2rem; height: 2rem; border-radius: 50%;
	cursor: pointer; font: inherit; line-height: 1; display: grid; place-items: center;
}
.sp-doc__zoom:hover { background: rgba(255,255,255,.22); }
.sp-doc__zoomlabel { color: rgba(255,255,255,.75); font-size: .78rem; min-width: 3.2em; text-align: center; }

.sp-doc__pages {
	flex: 1;
	overflow: auto;
	padding: clamp(10px, 2vw, 26px);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	outline: none;
	scrollbar-width: thin;
}
.sp-doc__page {
	background: #fff;
	border-radius: 3px;
	box-shadow: 0 14px 40px -18px rgba(0,0,0,.9);
	max-width: 100%;
	/* No text layer is rendered, so there is nothing to select or copy. */
	user-select: none;
	-webkit-user-select: none;
	-webkit-touch-callout: none;
	pointer-events: none;
}
.sp-doc__msg { color: rgba(255,255,255,.7); padding: 3rem 1rem; text-align: center; }

@media (max-width: 620px) {
	.sp-doc__hint { display: none; }
	.sp-doc__bar { gap: .5rem; }
}

/* Print button ------------------------------------------------------------ */

.sp-doc__print {
	background: rgba(255,255,255,.1);
	border: 1px solid rgba(255,255,255,.2);
	color: #fff;
	border-radius: 999px;
	padding: .4em 1em;
	cursor: pointer;
	font: inherit;
	font-size: .82rem;
	letter-spacing: .04em;
}
.sp-doc__print:hover:not(:disabled) { background: rgba(255,255,255,.22); }
.sp-doc__print:disabled { opacity: .55; cursor: progress; }

/* The pages drawn for printing. Parked off-screen so they never affect the
   viewer's layout, and revealed only by the print stylesheet below. */
div.sp-doc__print {
	position: absolute;
	left: -10000px;
	top: 0;
	width: 0;
	height: 0;
	overflow: hidden;
}

@media print {

	/* Only the rendered pages go on paper — no overlay, no site chrome. */
	body.sp-printing > * { display: none !important; }

	body.sp-printing div.sp-doc__print {
		display: block !important;
		position: static !important;
		width: auto !important;
		height: auto !important;
		overflow: visible !important;
	}

	body.sp-printing .sp-doc__printpage {
		display: block;
		width: 100%;
		max-width: 100%;
		height: auto;
		break-after: page;
		page-break-after: always;
	}
	body.sp-printing .sp-doc__printpage:last-child {
		break-after: auto;
		page-break-after: auto;
	}

	@page { size: auto; margin: 10mm; }
}

/* Fullscreen ------------------------------------------------------------- */

/*
 * The native fullscreen button is suppressed (controlsList on Chromium, this
 * rule on WebKit) because it fullscreens the bare <video>, which would leave
 * the watermark behind on the page. sp.js supplies its own button that takes
 * the whole player fullscreen instead.
 */
.sp-video video::-webkit-media-controls-fullscreen-button { display: none; }

.sp-video__fs {
	position: absolute;
	top: .7rem;
	right: .7rem;
	z-index: 6;
	width: 2.2rem;
	height: 2.2rem;
	display: grid;
	place-items: center;
	padding: 0;
	border: 1px solid rgba(255,255,255,.25);
	border-radius: 8px;
	background: rgba(16,16,22,.55);
	backdrop-filter: blur(6px);
	color: #fff;
	cursor: pointer;
	opacity: 0;
	transition: opacity .3s ease, background .25s ease, transform .25s ease;
}
.sp-video__fs svg { width: 1.05rem; height: 1.05rem; }
.sp-video__fs .sp-fs-out { display: none; }
.sp-video.is-fullscreen .sp-video__fs .sp-fs-in { display: none; }
.sp-video.is-fullscreen .sp-video__fs .sp-fs-out { display: block; }

/* Only offer it once the reel is actually running, and on hover/focus. */
.sp-video.is-playing:hover .sp-video__fs,
.sp-video.is-playing:focus-within .sp-video__fs,
.sp-video.is-fullscreen .sp-video__fs { opacity: 1; }
.sp-video__fs:hover { background: rgba(16,16,22,.8); transform: scale(1.06); }

/*
 * True fullscreen on the wrapper, and the CSS fallback for iPhone.
 *
 * !important is deliberate here: the Elementor widget writes a per-instance
 * max-width onto this same element, and in fullscreen that has to lose.
 */
.sp-video:fullscreen,
.sp-video:-webkit-full-screen,
.sp-video.is-filling {
	max-width: none !important;
	width: 100% !important;
	height: 100% !important;
	border-radius: 0 !important;
	aspect-ratio: auto !important;
	background: #000;
}
.sp-video.is-filling {
	position: fixed !important;
	inset: 0 !important;
	z-index: 300;
	width: 100vw !important;
	height: 100dvh !important;
	margin: 0 !important;
}
.sp-video:fullscreen video,
.sp-video:-webkit-full-screen video,
.sp-video.is-filling video {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* The watermark has to cover the whole frame in fullscreen too — it is sized
   relative to the wrapper, which is now the whole screen. */
.sp-video:fullscreen .sp-video__wm,
.sp-video:-webkit-full-screen .sp-video__wm,
.sp-video.is-filling .sp-video__wm { inset: -40%; }

/* =============================================================================
   Confidentiality agreement gate
   -----------------------------------------------------------------------------
   The blurred layer behind the dialog is a skeleton, never the real page: the
   content is withheld on the server, not merely hidden with CSS.
   ========================================================================== */

body:has(.sp-policy) { overflow: hidden; }

.sp-gate {
	filter: blur(7px) saturate(.7);
	opacity: .55;
	pointer-events: none;
	user-select: none;
	min-height: 60vh;
}
.sp-gate__skeleton {
	display: grid;
	gap: 1.1rem;
	max-width: var(--sp-content-w, 960px);
	margin-inline: auto;
	padding-block: 2rem;
}
.sp-gate__bar,
.sp-gate__block {
	display: block;
	border-radius: 8px;
	background: linear-gradient(90deg, var(--sp-ink-06, rgba(0,0,0,.06)), var(--sp-rule, #e2e2e6), var(--sp-ink-06, rgba(0,0,0,.06)));
	background-size: 200% 100%;
	animation: sp-shimmer 2.4s linear infinite;
}
.sp-gate__bar { height: 1rem; }
.sp-gate__bar--title { height: 2.2rem; width: 45%; margin-inline: auto; }
.sp-gate__bar--short { width: 70%; margin-inline: auto; }
.sp-gate__block { height: min(42vh, 340px); border-radius: var(--sp-radius, 14px); }

@keyframes sp-shimmer {
	0%   { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}

/* The dialog ------------------------------------------------------------- */

.sp-policy {
	position: fixed;
	inset: 0;
	z-index: 400;
	display: grid;
	place-items: center;
	padding: clamp(12px, 3vw, 40px);
	background: color-mix(in srgb, var(--sp-ink, #16171c) 55%, transparent);
	backdrop-filter: blur(3px);
	overflow: auto;
}

.sp-policy__box {
	width: 100%;
	max-width: 720px;
	max-height: min(88dvh, 900px);
	display: flex;
	flex-direction: column;
	background: var(--sp-surface, #fff);
	border-radius: calc(var(--sp-radius, 14px) * 1.3);
	box-shadow: 0 40px 90px -30px rgba(10,10,20,.65);
	overflow: hidden;
}

.sp-policy__head {
	display: flex;
	gap: 1rem;
	align-items: center;
	padding: clamp(18px, 3vw, 28px) clamp(20px, 4vw, 34px) 0;
}
.sp-policy__icon {
	flex: none;
	width: 2.8rem;
	height: 2.8rem;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: var(--sp-accent-10, rgba(75,63,168,.1));
	color: var(--sp-accent, #4b3fa8);
}
.sp-policy__icon svg { width: 1.35rem; height: 1.35rem; }
.sp-policy__heading h1 {
	margin: 0;
	font-size: clamp(1.15rem, 2.4vw, 1.5rem);
	line-height: 1.25;
}
.sp-policy__meta {
	margin: .2rem 0 0;
	font-size: .82rem;
	color: var(--sp-ink-soft, #636673);
}

.sp-policy__summary {
	margin: 1rem clamp(20px, 4vw, 34px) 0;
	padding: .8em 1em;
	border-radius: calc(var(--sp-radius, 14px) * .6);
	background: var(--sp-accent-10, rgba(75,63,168,.1));
	color: var(--sp-accent, #4b3fa8);
	font-size: .88rem;
}

.sp-policy__body {
	flex: 1;
	overflow-y: auto;
	padding: 1.2rem clamp(20px, 4vw, 34px);
	margin-top: .6rem;
	font-size: calc(var(--sp-fs-base, 17px) * .88);
	line-height: 1.65;
	color: var(--sp-ink, #16171c);
	border-block: 1px solid var(--sp-rule, #e2e2e6);
	text-align: left;
	scrollbar-width: thin;
}
.sp-policy__body h3 {
	font-size: 1em;
	margin: 1.4em 0 .5em;
	letter-spacing: .01em;
}
.sp-policy__body h3:first-child { margin-top: 0; }
.sp-policy__body ul { padding-left: 1.2em; margin: .6em 0; }
.sp-policy__body li { margin-bottom: .35em; }
.sp-policy__body :focus-visible { outline-offset: -2px; }

.sp-policy__form {
	padding: clamp(16px, 3vw, 24px) clamp(20px, 4vw, 34px) clamp(18px, 3vw, 28px);
	display: grid;
	gap: 1rem;
	text-align: left;
}

.sp-policy__check {
	display: flex;
	align-items: flex-start;
	gap: .65em;
	font-size: calc(var(--sp-fs-base, 17px) * .88);
	cursor: pointer;
	line-height: 1.45;
}
.sp-policy__check input {
	margin-top: .18em;
	width: 1.05em;
	height: 1.05em;
	accent-color: var(--sp-accent, #4b3fa8);
	flex: none;
}

.sp-policy__actions {
	display: flex;
	gap: .75rem;
	flex-wrap: wrap;
	justify-content: flex-end;
}
.sp-policy__accept[disabled] {
	opacity: .45;
	pointer-events: none;
}
.sp-policy__note {
	margin: 0;
	font-size: .76rem;
	line-height: 1.55;
	color: var(--sp-ink-soft, #636673);
}

@media (max-width: 560px) {
	.sp-policy__actions { flex-direction: column-reverse; }
	.sp-policy__actions .sp-btn { width: 100%; }
	.sp-policy__box { max-height: 94dvh; }
}