/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Buro 86 webdesign
Author URI: https://buro86.be/
Template: hello-elementor
Version: 2.1.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */

/* B86-FIX Realisaties: de fotoslider (Elementor-lightbox) moet boven de
   terug-naar-boven-knop (.progress-wrap, z-index 10000) liggen.
   De cookiebanner (99999) blijft erboven. */
.elementor-lightbox.dialog-type-lightbox {
	z-index: 10001;
}

/* B86-FIX Realisaties: fotostrip onder de grote foto in de lightbox.
   De strip wordt door assets/js/realisaties.js toegevoegd; de kleuren
   komen uit de Elementor-globals van de kit. */
.elementor-lightbox.jvg-lb-has-thumbs .elementor-lightbox-item {
	padding-bottom: 150px;
}

.jvg-lb-thumbs {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 28px;
	z-index: 10;
	display: flex;
	gap: 10px;
	width: fit-content;
	max-width: calc(100% - 48px);
	margin: 0 auto;
	padding: 4px;
	overflow-x: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--e-global-color-grijs600, #6E747C) transparent;
}

.jvg-lb-thumbs .jvg-lb-thumb,
.jvg-lb-thumbs .jvg-lb-thumb:hover,
.jvg-lb-thumbs .jvg-lb-thumb:focus {
	flex: 0 0 auto;
	width: 96px;
	height: 72px;
	margin: 0;
	padding: 0;
	border: 2px solid transparent;
	border-radius: 12px;
	background: transparent;
	box-shadow: none;
	overflow: hidden;
	cursor: pointer;
	opacity: 0.5;
	transition: opacity 0.14s, border-color 0.14s;
}

.jvg-lb-thumbs .jvg-lb-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 10px;
}

.jvg-lb-thumbs .jvg-lb-thumb:hover,
.jvg-lb-thumbs .jvg-lb-thumb:focus-visible {
	opacity: 1;
}

.jvg-lb-thumbs .jvg-lb-thumb.is-active {
	opacity: 1;
	border-color: var(--e-global-color-accent, #EE5A24);
}

.jvg-lb-thumbs .jvg-lb-thumb:focus-visible {
	outline: 2px solid var(--e-global-color-wit, #FFFFFF);
	outline-offset: 2px;
}

@media (max-width: 767px) {
	.elementor-lightbox.jvg-lb-has-thumbs .elementor-lightbox-item {
		padding-bottom: 112px;
	}

	.jvg-lb-thumbs {
		bottom: 20px;
		gap: 8px;
		max-width: calc(100% - 24px);
	}

	.jvg-lb-thumbs .jvg-lb-thumb,
	.jvg-lb-thumbs .jvg-lb-thumb:hover,
	.jvg-lb-thumbs .jvg-lb-thumb:focus {
		width: 64px;
		height: 48px;
		border-radius: 10px;
	}

	.jvg-lb-thumbs .jvg-lb-thumb img {
		border-radius: 8px;
	}
}