/*
 * Lumina Lightbox — front end
 * Every visual value below reads from a custom property written by the control panel.
 * The fallbacks after each var() are what you get if the option row is missing.
 */

.lum-root {
	/* No custom properties are declared here on purpose. A property set on
	   this element would beat the same property inherited from :root, which is
	   where the control panel writes your values. Fallbacks live at each use. */
	position: fixed;
	inset: 0;
	z-index: var(--lum-z, 999999);
	display: flex;
	flex-direction: column;
	opacity: 0;
	visibility: hidden;
	font-family: inherit;
	-webkit-font-smoothing: antialiased;
	transition: opacity var(--lum-open-duration, 320ms) var(--lum-ease, cubic-bezier(0.22, 1, 0.36, 1)), visibility 0s linear var(--lum-open-duration, 320ms);
}

.lum-root.is-open {
	opacity: 1;
	visibility: visible;
	transition: opacity var(--lum-open-duration, 320ms) var(--lum-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

.lum-root *,
.lum-root *::before,
.lum-root *::after {
	box-sizing: border-box;
}

html.lum-locked,
body.lum-locked {
	overflow: hidden !important;
	touch-action: none;
}

/* ------------------------------------------------------------------ backdrop */

.lum-backdrop {
	position: absolute;
	inset: 0;
	background: var(--lum-backdrop, rgba(18, 18, 20, 0.96));
	-webkit-backdrop-filter: blur(var(--lum-backdrop-blur, 0px));
	backdrop-filter: blur(var(--lum-backdrop-blur, 0px));
}

.lum-ambient {
	position: absolute;
	inset: -10%;
	background-position: center;
	background-size: cover;
	filter: blur(var(--lum-ambient-blur, 60px)) saturate(1.4);
	opacity: 0;
	transition: opacity 600ms var(--lum-ease, cubic-bezier(0.22, 1, 0.36, 1)), background-image 0ms;
	pointer-events: none;
}

.lum-root.has-ambient .lum-ambient {
	opacity: var(--lum-ambient-opacity, 0.22);
}

/* --------------------------------------------------------------------- stage */

.lum-stage {
	position: relative;
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--lum-stage-pad, 24px);
	overflow: hidden;
	touch-action: pan-y;
}

.lum-viewport {
	position: relative;
	width: 100%;
	height: min(var(--lum-stage-h, 88vh), 100%);
	overflow: visible;
}

.lum-track {
	position: absolute;
	inset: 0;
	will-change: transform;
	transition: transform var(--lum-duration, 420ms) var(--lum-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

.lum-root.is-dragging .lum-track,
.lum-root.no-anim .lum-track {
	transition: none;
}

.lum-slide {
	position: absolute;
	top: 0;
	height: 100%;
	width: var(--lum-slide-w, 66%);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	opacity: var(--lum-neighbour-opacity, 1);
	transform: scale(var(--lum-neighbour-scale, 1));
	transition: opacity var(--lum-duration, 420ms) var(--lum-ease, cubic-bezier(0.22, 1, 0.36, 1)), transform var(--lum-duration, 420ms) var(--lum-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

.lum-slide.is-active {
	opacity: 1;
	transform: scale(1);
}

/* Contained layout: neighbours are laid out but never shown. */
.lum-mode-contain .lum-slide:not(.is-active) {
	opacity: 0;
	pointer-events: none;
}

.lum-mode-fullbleed .lum-slide {
	width: 100%;
}

.lum-mode-fullbleed .lum-media img {
	border-radius: 0;
}

/* Crossfade and zoom stack the slides instead of sliding them. */
.lum-trans-fade .lum-track,
.lum-trans-zoom .lum-track,
.lum-trans-none .lum-track {
	transform: none !important;
	transition: none;
}

.lum-trans-fade .lum-slide,
.lum-trans-zoom .lum-slide,
.lum-trans-none .lum-slide {
	left: 50%;
	margin-left: calc(var(--lum-slide-w, 66%) / -2);
	opacity: 0;
	pointer-events: none;
}

.lum-trans-fade .lum-slide.is-active,
.lum-trans-none .lum-slide.is-active {
	opacity: 1;
	pointer-events: auto;
}

.lum-trans-zoom .lum-slide {
	transform: scale(0.94);
}

.lum-trans-zoom .lum-slide.is-active {
	opacity: 1;
	transform: scale(1);
	pointer-events: auto;
}

.lum-trans-none .lum-slide {
	transition: none;
}

/* --------------------------------------------------------------------- media */

.lum-media {
	position: relative;
	max-width: 100%;
	max-height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	border-radius: var(--lum-radius, 4px);
}

.lum-media img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	border-radius: var(--lum-radius, 4px);
	transform-origin: center center;
	transition: transform var(--lum-duration, 420ms) var(--lum-ease, cubic-bezier(0.22, 1, 0.36, 1));
	user-select: none;
	-webkit-user-drag: none;
}

.lum-root.is-zooming .lum-media img,
.lum-root.is-panning .lum-media img {
	transition: none;
}

.lum-fit-cover .lum-media {
	width: 100%;
	height: 100%;
}

.lum-fit-cover .lum-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.lum-fit-native .lum-media img {
	max-width: none;
	max-height: none;
}

.lum-media.is-zoomable {
	cursor: zoom-in;
}

.lum-media.is-zoomed {
	cursor: grab;
}

.lum-media.is-zoomed:active {
	cursor: grabbing;
}

/* Shadows */
.lum-shadow-soft .lum-media {
	box-shadow: 0 18px 60px rgba(0, 0, 0, 0.45);
}

.lum-shadow-deep .lum-media {
	box-shadow: 0 30px 90px rgba(0, 0, 0, 0.75);
}

.lum-shadow-glow .lum-media {
	box-shadow: 0 0 90px rgba(255, 255, 255, 0.16);
}

.lum-shadow-edge .lum-media {
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18);
}

/* Video */
.lum-video {
	width: min(100%, calc(var(--lum-stage-h, 88vh) * var(--lum-video-ratio, 1.78)));
	aspect-ratio: var(--lum-video-ratio, 1.78);
	background: #000;
	border-radius: var(--lum-radius, 4px);
	overflow: hidden;
}

.lum-video iframe,
.lum-video video {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

/* Loading states */
.lum-spinner {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}

.lum-slide.is-loaded .lum-spinner {
	display: none;
}

.lum-spin-ring {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, 0.22);
	border-top-color: rgba(255, 255, 255, 0.9);
	animation: lum-spin 800ms linear infinite;
}

.lum-spin-pulse {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.5);
	animation: lum-pulse 1200ms ease-in-out infinite;
}

.lum-topbar {
	position: absolute;
	top: 0;
	left: 0;
	height: 2px;
	width: 0;
	background: rgba(255, 255, 255, 0.9);
	transition: width 300ms linear, opacity 300ms;
}

@keyframes lum-spin {
	to {
		transform: rotate(360deg);
	}
}

@keyframes lum-pulse {
	0%, 100% { transform: scale(0.7); opacity: 0.35; }
	50% { transform: scale(1); opacity: 0.9; }
}

.lum-error {
	color: rgba(255, 255, 255, 0.75);
	font-size: 14px;
	padding: 24px;
	text-align: center;
}

/* ------------------------------------------------------------------ captions */

.lum-cap {
	color: var(--lum-cap-color, #fff);
	background: var(--lum-cap-bg, transparent);
	font-size: var(--lum-cap-size, 14px);
	font-weight: var(--lum-cap-weight, 700);
	line-height: var(--lum-cap-lh, 1.4);
	letter-spacing: var(--lum-cap-ls, 0);
	padding: var(--lum-cap-pad, 14px);
	max-width: var(--lum-cap-maxw, 100%);
	text-align: var(--lum-cap-align, right);
	pointer-events: none;
}

.lum-cap:empty {
	display: none;
}

.lum-cap-align-left { --lum-cap-align: left; }
.lum-cap-align-center { --lum-cap-align: center; }
.lum-cap-align-right { --lum-cap-align: right; }

.lum-cap-shadow .lum-cap {
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}

.lum-cap-pos-overlay .lum-cap {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	margin-left: auto;
	border-radius: 0 0 var(--lum-radius, 4px) var(--lum-radius, 4px);
}

.lum-cap-pos-overlay.lum-cap-scrim .lum-cap {
	background: linear-gradient(to top, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0));
	padding-top: calc(var(--lum-cap-pad, 14px) * 2.4);
}

.lum-cap-pos-below .lum-cap {
	position: static;
	width: 100%;
}

.lum-cap-pos-bar .lum-slide .lum-cap {
	display: none;
}

.lum-caption-bar {
	flex: 0 0 auto;
	display: none;
	justify-content: center;
	padding: 0 var(--lum-stage-pad, 24px);
}

.lum-cap-pos-bar .lum-caption-bar {
	display: flex;
}

.lum-caption-bar .lum-cap {
	position: static;
	max-width: min(var(--lum-cap-maxw, 100%), 1100px);
	width: 100%;
}

/* -------------------------------------------------------------------- arrows */

.lum-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: var(--lum-arrow-size, 54px);
	height: var(--lum-arrow-size, 54px);
	display: grid;
	place-items: center;
	padding: 0;
	margin: 0;
	cursor: pointer;
	color: var(--lum-arrow-color, #1c1c1e);
	background: var(--lum-arrow-bg, rgba(255, 255, 255, 0.92));
	border: var(--lum-arrow-border-w, 0) solid var(--lum-arrow-border-c, transparent);
	border-radius: var(--lum-arrow-radius, 50%);
	transition: background 200ms var(--lum-ease, cubic-bezier(0.22, 1, 0.36, 1)), color 200ms var(--lum-ease, cubic-bezier(0.22, 1, 0.36, 1)), opacity 200ms var(--lum-ease, cubic-bezier(0.22, 1, 0.36, 1)), transform 200ms var(--lum-ease, cubic-bezier(0.22, 1, 0.36, 1));
	z-index: 4;
}

.lum-arrow svg {
	width: var(--lum-arrow-icon, 20px);
	height: var(--lum-arrow-icon, 20px);
	stroke-width: var(--lum-arrow-stroke, 2px);
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.lum-arrow:hover {
	color: var(--lum-arrow-color-hover, #000);
	background: var(--lum-arrow-bg-hover, #fff);
}

.lum-arrows-shadow .lum-arrow {
	box-shadow: 0 6px 22px rgba(0, 0, 0, 0.32);
}

.lum-arrow[disabled],
.lum-arrow.is-dim {
	opacity: 0.25;
	pointer-events: none;
}

.lum-arrow-prev { left: var(--lum-arrow-offset, 18px); }
.lum-arrow-next { right: var(--lum-arrow-offset, 18px); }

.lum-arrows-edge .lum-arrow-prev { left: max(8px, calc(var(--lum-arrow-offset, 18px) / 2)); }
.lum-arrows-edge .lum-arrow-next { right: max(8px, calc(var(--lum-arrow-offset, 18px) / 2)); }

.lum-arrows-corner .lum-arrow {
	top: auto;
	bottom: var(--lum-arrow-offset, 18px);
	transform: none;
}

.lum-arrows-corner .lum-arrow-prev { left: auto; right: calc(var(--lum-arrow-offset, 18px) + var(--lum-arrow-size, 54px) + 8px); }
.lum-arrows-corner .lum-arrow-next { right: var(--lum-arrow-offset, 18px); }

/* ------------------------------------------------------------------- toolbar */

.lum-toolbar {
	position: relative;
	z-index: 5;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 10px 14px;
	transition: opacity 260ms var(--lum-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

.lum-toolbar.is-hidden {
	opacity: 0;
	pointer-events: none;
}

.lum-toolbar-align-left { justify-content: flex-start; }
.lum-toolbar-align-center { justify-content: center; }
.lum-toolbar-align-right { justify-content: flex-end; }

.lum-toolbar-bottom {
	order: 9;
}

.lum-tool {
	width: var(--lum-tool-size, 40px);
	height: var(--lum-tool-size, 40px);
	display: grid;
	place-items: center;
	padding: 0;
	border: 0;
	cursor: pointer;
	color: var(--lum-tool-color, rgba(255, 255, 255, 0.8));
	background: var(--lum-tool-bg, transparent);
	border-radius: var(--lum-tool-radius, 50%);
	transition: background 180ms var(--lum-ease, cubic-bezier(0.22, 1, 0.36, 1)), color 180ms var(--lum-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

.lum-tool:hover {
	color: var(--lum-tool-color-hover, #fff);
	background: var(--lum-tool-bg-hover, rgba(255, 255, 255, 0.14));
}

.lum-tool svg {
	width: var(--lum-tool-icon, 18px);
	height: var(--lum-tool-icon, 18px);
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.lum-counter {
	color: var(--lum-tool-color, rgba(255, 255, 255, 0.8));
	font-size: calc(var(--lum-tool-icon, 18px) * 0.78);
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.04em;
	margin-inline-end: auto;
	padding: 0 6px;
	white-space: nowrap;
}

.lum-toolbar-align-right .lum-counter { margin-inline-end: auto; }
.lum-toolbar-align-left .lum-counter { order: 9; margin-inline-end: 0; margin-inline-start: auto; }
.lum-toolbar-align-center .lum-counter { margin: 0 8px; }

.lum-toast {
	position: absolute;
	top: 100%;
	right: 14px;
	margin-top: 6px;
	padding: 6px 12px;
	font-size: 13px;
	color: #fff;
	background: rgba(0, 0, 0, 0.75);
	border-radius: 4px;
	opacity: 0;
	transform: translateY(-4px);
	transition: opacity 200ms, transform 200ms;
	pointer-events: none;
}

.lum-toast.is-on {
	opacity: 1;
	transform: none;
}

/* ---------------------------------------------------------------- pagination */

.lum-pagination {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding-bottom: var(--lum-pagination-offset, 16px);
	padding-top: 4px;
	position: relative;
	z-index: 4;
}

.lum-pagination:empty {
	display: none;
}

.lum-dots {
	display: flex;
	align-items: center;
	gap: var(--lum-dot-gap, 8px);
}

.lum-dot {
	width: var(--lum-dot-size, 8px);
	height: var(--lum-dot-size, 8px);
	padding: 0;
	border: 0;
	cursor: pointer;
	background: var(--lum-dot-color, rgba(255, 255, 255, 0.35));
	border-radius: 50%;
	transition: background 200ms var(--lum-ease, cubic-bezier(0.22, 1, 0.36, 1)), transform 200ms var(--lum-ease, cubic-bezier(0.22, 1, 0.36, 1)), width 200ms var(--lum-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

.lum-dot.is-on {
	background: var(--lum-dot-active, #fff);
}

.lum-dots-square .lum-dot { border-radius: 1px; }
.lum-dots-bar .lum-dot { border-radius: 2px; width: calc(var(--lum-dot-size, 8px) * 3); height: calc(var(--lum-dot-size, 8px) * 0.5); }
.lum-dots-bar .lum-dot.is-on { width: calc(var(--lum-dot-size, 8px) * 5); }

.lum-thumbs {
	display: flex;
	align-items: center;
	gap: var(--lum-thumb-gap, 6px);
	max-width: 100%;
	overflow-x: auto;
	scrollbar-width: none;
	padding: 4px;
	scroll-behavior: smooth;
}

.lum-thumbs::-webkit-scrollbar { display: none; }

.lum-thumb {
	flex: 0 0 auto;
	height: var(--lum-thumb-size, 64px);
	width: calc(var(--lum-thumb-size, 64px) * var(--lum-thumb-ratio, 1.5));
	padding: 0;
	border: 0;
	cursor: pointer;
	background: rgba(255, 255, 255, 0.06);
	border-radius: var(--lum-thumb-radius, 3px);
	overflow: hidden;
	opacity: var(--lum-thumb-idle, 0.45);
	box-shadow: 0 0 0 0 var(--lum-thumb-active-c, #fff);
	transition: opacity 200ms var(--lum-ease, cubic-bezier(0.22, 1, 0.36, 1)), box-shadow 200ms var(--lum-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

.lum-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.lum-thumb.is-on {
	opacity: 1;
	box-shadow: 0 0 0 2px var(--lum-thumb-active-c, #fff);
}

.lum-progress {
	width: min(420px, 60%);
	height: var(--lum-progress-h, 3px);
	background: rgba(255, 255, 255, 0.2);
	border-radius: 99px;
	overflow: hidden;
}

.lum-progress-fill {
	height: 100%;
	width: 0;
	background: var(--lum-progress-c, #fff);
	border-radius: inherit;
	transition: width var(--lum-duration, 420ms) var(--lum-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

/* ---------------------------------------------------------- open animations */

.lum-open-scale .lum-viewport,
.lum-open-zoom .lum-viewport {
	transform: scale(0.92);
	transition: transform var(--lum-open-duration, 320ms) var(--lum-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

.lum-open-slide-up .lum-viewport {
	transform: translateY(28px);
	transition: transform var(--lum-open-duration, 320ms) var(--lum-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

.lum-root.is-open .lum-viewport {
	transform: none;
}

/* Zoom-from-thumbnail ghost. */
.lum-ghost {
	position: fixed;
	z-index: calc(var(--lum-z, 999999) + 1);
	object-fit: cover;
	border-radius: var(--lum-radius, 4px);
	pointer-events: none;
	transition: transform var(--lum-open-duration, 320ms) var(--lum-ease, cubic-bezier(0.22, 1, 0.36, 1)), opacity var(--lum-open-duration, 320ms) var(--lum-ease, cubic-bezier(0.22, 1, 0.36, 1));
	transform-origin: top left;
}

/* ------------------------------------------------------------------- a11y */

.lum-root :focus-visible {
	outline: 2px solid var(--lum-focus, rgba(255, 180, 80, 0.95));
	outline-offset: 2px;
}

.lum-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.lum-protect .lum-media img {
	-webkit-touch-callout: none;
	pointer-events: none;
}

/* Small screens */
@media (max-width: 767px) {
	.lum-hide-arrows-mobile .lum-arrow {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.lum-reduced-motion,
	.lum-reduced-motion * {
		transition-duration: 1ms !important;
		animation-duration: 1ms !important;
	}
}

/* The trigger wrapper added to unlinked content images. */
.lumina-auto {
	display: inline-block;
	cursor: zoom-in;
	max-width: 100%;
}

/* ------------------------------------------------- matched image heights
 * Slides stop being equal-width columns on a rigid track. Each one is sized
 * to its own aspect ratio and positioned individually, so the neighbours can
 * be pinned a constant distance from the screen edges no matter what shape
 * the active image is. All geometry is written inline by the runtime.
 */

.lum-uniform .lum-track {
	transform: none !important;
	transition: none;
}

.lum-uniform .lum-slide {
	left: 0;
	margin-left: 0;
	width: auto;
	transform: none;
	transition: transform var(--lum-duration, 420ms) var(--lum-ease, cubic-bezier(0.22, 1, 0.36, 1)),
		opacity var(--lum-duration, 420ms) var(--lum-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

.lum-uniform .lum-media {
	width: 100%;
	height: 100%;
	min-height: 0;
	flex: 1 1 auto;
}

.lum-uniform .lum-media img {
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: 100%;
	object-fit: contain;
}

.lum-uniform .lum-cap {
	flex: 0 0 auto;
}

/* The neighbour scale would change how much of an image is visible at the
   edge, which is the one thing this mode exists to hold steady. */
.lum-uniform .lum-slide {
	--lum-neighbour-scale: 1;
}