/**
 * Lymcon - Avada Thumbs Slider
 * Estilos para los thumbnails que reemplazan los dots numéricos.
 */

.lyts-thumbs {
	--lyts-thumb-w: 96px;
	--lyts-thumb-h: 64px;
	--lyts-thumb-gap: 10px;
	--lyts-thumb-radius: 6px;
	--lyts-thumb-border: 2px;
	--lyts-thumb-border-color: rgba(0, 0, 0, 0.1);
	--lyts-thumb-border-active: #d4ad5b;
	--lyts-thumb-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
	--lyts-thumb-opacity: 0.55;
	--lyts-thumb-opacity-hover: 0.85;
	--lyts-pagination-margin-top: 18px;

	--lyts-arrow-w: 30px;
	--lyts-arrow-h: 30px;
	--lyts-arrow-color: #ffffff;
	--lyts-arrow-bgcolor: rgba(19, 21, 22, 0.7);
	--lyts-arrow-hover-color: #ffffff;
	--lyts-arrow-hover-bgcolor: #d4ad5b;
	--lyts-arrow-size: 14px;
	--lyts-arrow-radius: 0;
	--lyts-arrow-opacity-mobile: 0.85;
}

/* Anti-parpadeo: ocultar la paginación numérica de FlexSlider
   hasta que el JS la haya convertido en thumbnails (.lyts-active).
   Reservamos la altura para evitar que el layout salte. */
.lyts-thumbs:not(.lyts-active) .flex-control-nav.flex-control-paging,
.lyts-thumbs:not(.lyts-active) ol.flex-control-paging {
	visibility: hidden !important;
	opacity: 0 !important;
	min-height: calc(var(--lyts-thumb-h) + var(--lyts-pagination-margin-top));
}

.lyts-thumbs.lyts-active .flex-control-nav.flex-control-paging,
.lyts-thumbs.lyts-active ol.flex-control-paging {
	visibility: visible;
	opacity: 1;
	transition: opacity 0.18s ease;
}

.lyts-thumbs.lyts-active .flex-control-nav.flex-control-paging,
.lyts-thumbs.lyts-active ol.flex-control-paging,
.lyts-thumbs.lyts-active ol.lyts-pagination {
	position: static !important;
	bottom: auto !important;
	margin: var(--lyts-pagination-margin-top) 0 0 !important;
	padding: 0 !important;
	display: flex !important;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--lyts-thumb-gap);
	list-style: none !important;
	background: transparent !important;
	box-shadow: none !important;
	width: 100% !important;
	z-index: 5;
}

.lyts-thumbs.lyts-active .flex-control-paging li {
	width: var(--lyts-thumb-w) !important;
	height: var(--lyts-thumb-h) !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	display: block;
}

.lyts-thumbs.lyts-active .flex-control-paging li a,
.lyts-thumbs.lyts-active .flex-control-paging li a.lyts-thumb-link {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
	background: transparent !important;
	border-radius: var(--lyts-thumb-radius);
	overflow: hidden;
	box-shadow: var(--lyts-thumb-shadow);
	border: var(--lyts-thumb-border) solid var(--lyts-thumb-border-color);
	box-sizing: border-box;
	cursor: pointer;
	transition: opacity 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
	opacity: var(--lyts-thumb-opacity);
	text-indent: 0 !important;
	font-size: 0;
	line-height: 0;
	color: transparent;
}

.lyts-thumbs.lyts-active .flex-control-paging li a:hover {
	opacity: var(--lyts-thumb-opacity-hover);
	transform: translateY(-1px);
}

.lyts-thumbs.lyts-active .flex-control-paging li a.flex-active,
.lyts-thumbs.lyts-active .flex-control-paging li a.active {
	opacity: 1;
	border-color: var(--lyts-thumb-border-active);
}

.lyts-thumbs.lyts-active .flex-control-paging li a .lyts-thumb {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	border-radius: 0;
	margin: 0;
	padding: 0;
	pointer-events: none;
}

@media (max-width: 768px) {
	.lyts-thumbs {
		--lyts-thumb-w: 64px;
		--lyts-thumb-h: 44px;
		--lyts-thumb-gap: 6px;
		--lyts-pagination-margin-top: 12px;
	}
}

/* === Flechas prev/next siempre visibles en móvil ===
   Avada esconde .flex-prev/.flex-next con opacity:0 y solo las muestra
   con .flexslider:hover, lo cual no funciona en táctil. Replicamos el
   estilo de las flechas del Image Carousel (Swiper) de Avada. */
.lyts-thumbs .flex-direction-nav {
	display: block !important;
	height: auto !important;
	margin: 0;
	padding: 0;
	list-style: none;
}

.lyts-thumbs .flex-direction-nav .flex-nav-prev,
.lyts-thumbs .flex-direction-nav .flex-nav-next {
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
}

.lyts-thumbs .flex-direction-nav a.flex-prev,
.lyts-thumbs .flex-direction-nav a.flex-next {
	width: var(--lyts-arrow-w) !important;
	height: var(--lyts-arrow-h) !important;
	line-height: var(--lyts-arrow-h) !important;
	font-size: var(--lyts-arrow-size) !important;
	background-color: var(--lyts-arrow-bgcolor) !important;
	color: var(--lyts-arrow-color) !important;
	border-radius: var(--lyts-arrow-radius);
	border: 0 !important;
	margin: 0 !important;
	/* Fallback: el JS calcula el centro real con getBoundingClientRect del
	   <ul.slides> y aplica top inline con !important. Esta línea solo se
	   usa si el JS no llegara a ejecutarse. */
	top: calc(50% - (var(--lyts-thumb-h) + var(--lyts-pagination-margin-top)) / 2);
	transform: translateY(-50%);
	transition: opacity 0.2s ease, background-color 0.2s ease, color 0.2s ease;
	display: flex !important;
	align-items: center;
	justify-content: center;
	text-indent: 0 !important;
	overflow: hidden;
	z-index: 10;
}

.lyts-thumbs .flex-direction-nav a.flex-prev {
	left: 0 !important;
	right: auto !important;
}

.lyts-thumbs .flex-direction-nav a.flex-next {
	right: 0 !important;
	left: auto !important;
}

.lyts-thumbs .flex-direction-nav a.flex-prev:hover,
.lyts-thumbs .flex-direction-nav a.flex-next:hover {
	background-color: var(--lyts-arrow-hover-bgcolor) !important;
	color: var(--lyts-arrow-hover-color) !important;
	opacity: 1 !important;
}

.lyts-thumbs .flex-direction-nav a.flex-prev > i,
.lyts-thumbs .flex-direction-nav a.flex-next > i {
	display: inline-block;
	font-size: inherit;
	line-height: 1;
	color: inherit;
}

/* Solo en móvil: forzar visibilidad permanente (no hay hover en táctil) */
@media (max-width: 768px) {
	.lyts-thumbs .flex-direction-nav a.flex-prev,
	.lyts-thumbs .flex-direction-nav a.flex-next {
		opacity: var(--lyts-arrow-opacity-mobile) !important;
	}
	.lyts-thumbs .flex-direction-nav a.flex-prev:active,
	.lyts-thumbs .flex-direction-nav a.flex-next:active {
		opacity: 1 !important;
	}
}

/* === Avada iLightbox modal — thumbnails abajo y visibles también en móvil ===
   Avada oculta los thumbnails del lightbox en móvil con .isMobile.
   Las clases .ilightbox-horizontal / .ilightbox-vertical las controla la
   opción "lightbox_path" de Avada Theme Options. */

/* Mostrar thumbnails en móvil solo si el plugin lo tiene activado
   (constante PHP LATS_LIGHTBOX_THUMBS_MOBILE = true → body.lyts-lb-mobile-thumbs).
   Importante: .isMobile la aplica iLightbox al PROPIO <body>, así que el selector
   debe encadenarse sin espacio. */
body.lyts-lb-mobile-thumbs .ilightbox-thumbnails,
body.lyts-lb-mobile-thumbs .ilightbox-thumbnails.ilightbox-horizontal,
body.lyts-lb-mobile-thumbs .ilightbox-thumbnails.ilightbox-vertical {
	display: block !important;
}

/* La posición vertical de los thumbs la calcula el JS para colocarlos
   justo debajo de la imagen + un margen. Variable --lyts-lb-thumbs-gap
   controla la separación respecto a la imagen. */
.ilightbox-thumbnails.ilightbox-horizontal {
	--lyts-lb-thumbs-gap: 12px;
}

/* Centrar los thumbnails horizontalmente en desktop (cuando caben todos).
   En móvil dejamos el drag-scroll nativo de iLightbox. */
@media (min-width: 769px) {
	.ilightbox-thumbnails.ilightbox-horizontal .ilightbox-thumbnails-container {
		display: flex !important;
		justify-content: center !important;
		align-items: center !important;
		height: 100% !important;
		width: 100% !important;
	}
	.ilightbox-thumbnails.ilightbox-horizontal .ilightbox-thumbnails-grid {
		position: relative !important;
		top: auto !important;
		left: auto !important;
		width: auto !important;
		height: auto !important;
		margin: 0 auto !important;
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		gap: 6px;
	}
	.ilightbox-thumbnails.ilightbox-horizontal .ilightbox-thumbnail {
		float: none !important;
		flex: 0 0 auto !important;
	}
}

/* Móvil: thumbs más compactos */
@media (max-width: 768px) {
	.ilightbox-thumbnails.ilightbox-horizontal {
		--lyts-lb-thumbs-gap: 10px;
		height: 70px !important;
	}
	.ilightbox-thumbnails.ilightbox-horizontal .ilightbox-thumbnail {
		width: 70px !important;
		height: 50px !important;
	}
}