/**
 * Bottom thumbnail-strip navigation for GLightbox.
 * DOM is built by js/fancybox-compat-shim.js (see buildThumbStrip()) —
 * this file is purely presentational.
 */

.sl-glb-thumbs {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	/* GLightbox's own slide layer (.gcontainer) sits at z-index: 9999,
	   and the active slide at 99999 — both above the old z-index: 3
	   here, which visually showed the strip but let that layer eat
	   every click before it reached these buttons. Needs to clear the
	   highest internal value (.gprev/.gnext/.gclose/.gslide.current at
	   99999) to actually be clickable. */
	z-index: 100000;
	display: flex;
	justify-content: center;
	justify-content: safe center;
	gap: 8px;
	padding: 10px 16px;
	overflow-x: auto;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0));
	-webkit-overflow-scrolling: touch;
}

.sl-glb-thumbs__item {
	flex: 0 0 auto;
	width: 64px;
	height: 44px;
	padding: 0;
	margin: 0;
	border: 2px solid rgba(255, 255, 255, 0.28);
	border-radius: 4px;
	overflow: hidden;
	background: rgba(0, 0, 0, 0.4);
	cursor: pointer;
	opacity: 0.6;
	transition: opacity 0.2s ease, border-color 0.2s ease;
}

.sl-glb-thumbs__item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sl-glb-thumbs__item:hover,
.sl-glb-thumbs__item:focus-visible {
	opacity: 0.9;
}

.sl-glb-thumbs__item.is-active {
	opacity: 1;
	border-color: #ffffff;
}

.sl-glb-thumbs__item--video {
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ffffff;
	font-size: 16px;
}

@media (max-width: 600px) {
	.sl-glb-thumbs {
		padding: 8px 10px;
		gap: 6px;
	}
	.sl-glb-thumbs__item {
		width: 48px;
		height: 34px;
	}
}

/**
 * Top-right controls (Play all / Fullscreen).
 * GLightbox's own .gclose button sits at top: 15px; right: 10px
 * (widening to right: 20px on the @media(--medium-viewport) skin
 * breakpoint) at 35x35px — this bar is positioned to clear it with a
 * consistent gap at every width rather than guessing one offset.
 * DOM is built by js/fancybox-compat-shim.js (buildTopControls()).
 */
.sl-glb-controls {
	position: absolute;
	top: 15px;
	right: 55px;
	z-index: 100000;
	display: flex;
	gap: 8px;
}

.sl-glb-controls__btn {
	width: 35px;
	height: 35px;
	padding: 0;
	border: none;
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.75);
	color: #ffffff;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.sl-glb-controls__btn svg {
	width: 18px;
	height: 18px;
	display: block;
}

.sl-glb-controls__btn:hover,
.sl-glb-controls__btn:focus-visible {
	background: rgba(0, 0, 0, 0.92);
}

.sl-glb-controls__play.is-active {
	color: #5eb3ff;
}

@media (max-width: 600px) {
	.sl-glb-controls {
		top: 10px;
		right: 50px;
		gap: 6px;
	}
	.sl-glb-controls__btn {
		width: 30px;
		height: 30px;
	}
	.sl-glb-controls__btn svg {
		width: 16px;
		height: 16px;
	}
}