/**
 * Tiger Gallery — shared styles for the Product Gallery + dynamic Tiger Gallery
 * widgets. Prefixed .tiger-gallery-* (and .tiger-glb-* for the lightbox) so they
 * never collide with Elementor, WooCommerce, or theme gallery CSS.
 *
 * Most sizing/colour is driven by CSS custom properties set per-instance by the
 * widget's `selectors`, so editors can restyle without touching this file.
 */

.tiger-gallery {
	--tg-radius: 8px;
	--tg-gap: 10px;
	--tg-thumb-gap: 8px;
	--tg-nav-size: 40px;
	--tg-nav-bg: rgba(0, 0, 0, .55);
	--tg-nav-color: #fff;
	--tg-aspect: auto;
	position: relative;
	width: 100%;
}

/* Hold layout until JS marks ready, to avoid a flash of unstyled slides. */
.tiger-gallery:not(.is-ready) .tiger-gallery-main .tiger-swiper-slide:not(:first-child) { display: none; }

/* ---------- Main image / slide ---------- */
.tiger-gallery-main { position: relative; overflow: hidden; border-radius: var(--tg-radius); }
.tiger-gallery-main img,
.tiger-gallery-cell img { display: block; width: 100%; height: auto; border-radius: var(--tg-radius); }
.tiger-gallery--ratio .tiger-gallery-main img,
.tiger-gallery--ratio .tiger-gallery-cell img { aspect-ratio: var(--tg-aspect); object-fit: cover; height: 100%; }
.tiger-gallery-slide { position: relative; }

/* ---------- Static grid / masonry ---------- */
.tiger-gallery-grid { display: grid; gap: var(--tg-gap); grid-template-columns: repeat(var(--tg-cols, 3), 1fr); }
.tiger-gallery-masonry { columns: var(--tg-cols, 3); column-gap: var(--tg-gap); }
.tiger-gallery-masonry .tiger-gallery-cell { break-inside: avoid; margin-bottom: var(--tg-gap); }
.tiger-gallery-cell { position: relative; overflow: hidden; border-radius: var(--tg-radius); cursor: zoom-in; }
.tiger-gallery-cell img { transition: transform .4s ease; }
.tiger-gallery-cell:hover img { transform: scale(1.05); }

/* ---------- Thumbnails ---------- */
.tiger-gallery-thumbs { margin-top: var(--tg-thumb-gap); }
.tiger-gallery-thumbs.is-grid { display: grid; gap: var(--tg-thumb-gap); grid-template-columns: repeat(var(--tg-thumb-cols, 4), 1fr); margin-top: var(--tg-thumb-gap); }
.tiger-gallery-thumb { cursor: pointer; border-radius: calc(var(--tg-radius) * .6); overflow: hidden; opacity: .55; transition: opacity .2s ease, outline-color .2s ease; outline: 2px solid transparent; }
.tiger-gallery-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1 / 1; }
.tiger-gallery-thumb:hover { opacity: .85; }
.tiger-gallery-thumb--active { opacity: 1; outline-color: var(--tg-accent, #2271b1); }

/* Thumbs-position layouts (left / right) use flex side-by-side. */
.tiger-gallery--thumbs-left,
.tiger-gallery--thumbs-right { display: flex; gap: var(--tg-gap); align-items: flex-start; }
.tiger-gallery--thumbs-left { flex-direction: row-reverse; }
.tiger-gallery--thumbs-left .tiger-gallery-stage,
.tiger-gallery--thumbs-right .tiger-gallery-stage { flex: 1 1 auto; min-width: 0; }
.tiger-gallery--thumbs-left .tiger-gallery-thumbs,
.tiger-gallery--thumbs-right .tiger-gallery-thumbs { flex: 0 0 var(--tg-thumb-aside, 96px); margin-top: 0; }

/* ---------- Navigation arrows ---------- */
.tiger-gallery-nav {
	position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
	width: var(--tg-nav-size); height: var(--tg-nav-size);
	display: inline-flex; align-items: center; justify-content: center;
	border: 0; border-radius: 50%; cursor: pointer;
	background: var(--tg-nav-bg); color: var(--tg-nav-color);
	font-size: calc(var(--tg-nav-size) * .42); line-height: 1; transition: background .2s ease, opacity .2s ease;
}
.tiger-gallery-nav:hover { background: var(--tg-accent, #2271b1); }
.tiger-gallery-nav--prev { left: 10px; }
.tiger-gallery-nav--next { right: 10px; }
.tiger-gallery-nav.tiger-swiper-button-disabled { opacity: .35; pointer-events: none; }

/* ---------- Pagination ---------- */
.tiger-gallery-pagination { display: flex; gap: 6px; justify-content: center; margin-top: 10px; }
.tiger-gallery-pagination .tiger-swiper-pagination-bullet { width: 8px; height: 8px; border-radius: 50%; background: #c9c9c9; opacity: 1; cursor: pointer; border: 0; transition: transform .2s ease, background .2s ease; }
.tiger-gallery-pagination .tiger-swiper-pagination-bullet-active { background: var(--tg-accent, #2271b1); transform: scale(1.3); }

/* ---------- Video facade ---------- */
.tiger-gallery-video { position: relative; }
.tiger-gallery-video-holder { position: relative; width: 100%; height: 100%; line-height: 0; }
/* The playing frame overlays the poster in the exact same box, so clicking
 * play never shifts or resizes the slide. Letterboxed on black when the stage
 * aspect differs from the video (e.g. square product photos + a 16:9 clip). */
.tiger-gallery-video-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; object-fit: contain; background: #000; }
.tiger-gallery-video-play {
	position: absolute; inset: 0; margin: auto; width: 72px; height: 72px;
	display: flex; align-items: center; justify-content: center;
	background: rgba(0, 0, 0, .55); border: 0; border-radius: 50%; cursor: pointer; z-index: 4;
	transition: background .2s ease, transform .2s ease;
}
.tiger-gallery-video-play:hover { background: var(--tg-accent, #2271b1); transform: scale(1.06); }
.tiger-gallery-video-play::before { content: ""; border-style: solid; border-width: 12px 0 12px 20px; border-color: transparent transparent transparent #fff; margin-left: 4px; }
.tiger-gallery-video.is-playing .tiger-gallery-video-play { display: none; }
.tiger-gallery-thumb--video { position: relative; }
.tiger-gallery-thumb--video::after { content: ""; position: absolute; inset: 0; margin: auto; width: 0; height: 0; border-style: solid; border-width: 7px 0 7px 12px; border-color: transparent transparent transparent #fff; filter: drop-shadow(0 0 2px rgba(0,0,0,.6)); }

/* ---------- Story mode ---------- */
.tiger-gallery--story .tiger-gallery-story-bar { position: absolute; top: 10px; left: 10px; right: 10px; z-index: 6; display: flex; gap: 4px; }
.tiger-gallery-story-bar > i { flex: 1; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .35); overflow: hidden; }
.tiger-gallery-story-bar > i::after { display: none; }
.tiger-gallery-story-bar > i { position: relative; }
.tiger-gallery-story-bar > i { background: linear-gradient(to right, #fff var(--p, 0%), rgba(255,255,255,.35) 0); }
.tiger-gallery-tap { position: absolute; top: 0; bottom: 0; width: 33%; z-index: 5; cursor: pointer; }
.tiger-gallery-tap--prev { left: 0; }
.tiger-gallery-tap--next { right: 0; }

/* ---------- Lightbox ---------- */
.tiger-glb { position: fixed; inset: 0; z-index: 99999; display: none; align-items: center; justify-content: center; background: rgba(8, 8, 12, .92); }
.tiger-glb.is-open { display: flex; }
.tiger-glb-stage { max-width: 90vw; max-height: 86vh; display: flex; align-items: center; justify-content: center; }
.tiger-glb-media { max-width: 90vw; max-height: 86vh; border-radius: 6px; }
.tiger-glb-video { width: min(90vw, 1100px); aspect-ratio: 16 / 9; }
.tiger-glb-close, .tiger-glb-prev, .tiger-glb-next { position: absolute; background: rgba(255, 255, 255, .12); color: #fff; border: 0; cursor: pointer; border-radius: 50%; width: 48px; height: 48px; font-size: 22px; display: flex; align-items: center; justify-content: center; transition: background .2s ease; }
.tiger-glb-close:hover, .tiger-glb-prev:hover, .tiger-glb-next:hover { background: rgba(255, 255, 255, .28); }
.tiger-glb-close { top: 20px; right: 20px; }
.tiger-glb-prev { left: 20px; top: 50%; transform: translateY(-50%); }
.tiger-glb-next { right: 20px; top: 50%; transform: translateY(-50%); }

@media (max-width: 767px) {
	.tiger-gallery--thumbs-left, .tiger-gallery--thumbs-right { flex-direction: column; }
	.tiger-gallery--thumbs-left .tiger-gallery-thumbs, .tiger-gallery--thumbs-right .tiger-gallery-thumbs { flex-basis: auto; margin-top: var(--tg-thumb-gap); }
}