/* -----------------------------------------------------------------------------
   telix-phone-database — phone photo gallery (replaces Avada [fusion_images]).
   Self-contained slider + thumbnails + lightbox. No external dependencies.
-------------------------------------------------------------------------------- */

.tpdb-gallery {
	--tpdb-accent: #d6002a;
	width: 100%;
	margin: 0 0 14px;
}

/* ----- Main stage ---------------------------------------------------------- */
.tpdb-gallery__stage {
	position: relative;
	background: #fafafa;
	border: 1px solid #e4e7ec;
	border-radius: 4px;
	overflow: hidden;
	line-height: 0;
}
.tpdb-gallery__image {
	width: 100%;
	height: auto;
	display: block;
	cursor: zoom-in;
}

/* Prev / next arrows */
.tpdb-gallery__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 36px;
	height: 36px;
	border: 0;
	border-radius: 50%;
	background: rgba(20, 24, 31, .55);
	color: #fff;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .15s ease;
	z-index: 2;
}
.tpdb-gallery__nav:hover { background: rgba(20, 24, 31, .85); }
.tpdb-gallery__prev { left: 8px; }
.tpdb-gallery__next { right: 8px; }

.tpdb-gallery__zoom {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 32px;
	height: 32px;
	border: 0;
	border-radius: 4px;
	background: rgba(20, 24, 31, .55);
	color: #fff;
	font-size: 16px;
	cursor: pointer;
	z-index: 2;
}
.tpdb-gallery__zoom:hover { background: rgba(20, 24, 31, .85); }

/* ----- Thumbnails ---------------------------------------------------------- */
.tpdb-gallery__thumbs {
	list-style: none;
	margin: 8px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.tpdb-gallery__thumbs li { margin: 0; padding: 0; }
.tpdb-gallery__thumb {
	width: 54px;
	height: 54px;
	padding: 0;
	border: 2px solid transparent;
	border-radius: 3px;
	background: #fff;
	cursor: pointer;
	overflow: hidden;
	line-height: 0;
}
.tpdb-gallery__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.tpdb-gallery__thumb:hover { border-color: #c2c7d0; }
.tpdb-gallery__thumb.is-active { border-color: var(--tpdb-accent); }

/* ----- Lightbox ------------------------------------------------------------ */
.tpdb-lightbox {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, .92);
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity .2s ease, visibility .2s ease;
}
.tpdb-lightbox.is-open { opacity: 1; visibility: visible; }

.tpdb-lightbox__img {
	max-width: 92vw;
	max-height: 88vh;
	object-fit: contain;
	display: block;
	box-shadow: 0 10px 40px rgba(0, 0, 0, .5);
}

.tpdb-lightbox__btn {
	position: absolute;
	border: 0;
	background: rgba(255, 255, 255, .12);
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .15s ease;
}
.tpdb-lightbox__btn:hover { background: rgba(255, 255, 255, .28); }

.tpdb-lightbox__close {
	top: 18px;
	right: 18px;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	font-size: 26px;
	line-height: 1;
}
.tpdb-lightbox__nav {
	top: 50%;
	transform: translateY(-50%);
	width: 52px;
	height: 52px;
	border-radius: 50%;
	font-size: 32px;
	line-height: 1;
}
.tpdb-lightbox__prev { left: 20px; }
.tpdb-lightbox__next { right: 20px; }

.tpdb-lightbox__counter {
	position: absolute;
	bottom: 18px;
	left: 50%;
	transform: translateX(-50%);
	color: #fff;
	font-size: 14px;
	background: rgba(0, 0, 0, .4);
	padding: 4px 12px;
	border-radius: 20px;
}

@media (max-width: 600px) {
	.tpdb-lightbox__nav { width: 42px; height: 42px; font-size: 26px; }
	.tpdb-lightbox__prev { left: 8px; }
	.tpdb-lightbox__next { right: 8px; }
}