/* WooGallery for Elementor — v1.4 */

/* ── Gallery wrapper ── */
.wge-gallery { display:flex; flex-direction:column; width:100%; box-sizing:border-box; position:relative; }
.wge-gallery.thumb-left  { flex-direction:row-reverse; align-items:flex-start; }
.wge-gallery.thumb-right { flex-direction:row;         align-items:flex-start; }

/* ── Main area & slides ── */
.wge-main-area { position:relative; flex:1; min-width:0; }
.wge-slide           { display:none; }
.wge-slide.is-active { display:block; }

/* ── Main image wrap ── */
.wge-main-image-wrap {
	position:relative; display:flex; align-items:center; justify-content:center;
	width:100%; height:500px; overflow:hidden; background:#f5f5f5; box-sizing:border-box;
}
.wge-main-image-wrap img {
	width:100%; height:100%; object-fit:contain; object-position:center; display:block;
	transition:opacity .3s ease;
}
.wge-main-image-wrap img.wge-fade { opacity:0; }

/* Lightbox trigger */
a.wge-main-image-wrap { display:flex; text-decoration:none; cursor:zoom-in; }

/* Hover zoom/brightness — transition set by Elementor selector when enabled */
.wge-main-image-wrap:not(.wge-video-wrap) img {
	transition: transform .4s ease, filter .4s ease, opacity .3s ease;
	transform-origin: center center;
}

/* ── Video ── */
.wge-video-wrap { cursor:default; }
.wge-video-cover-img { width:100%; height:100%; object-fit:cover; display:block; }
.wge-video-cover-overlay { position:absolute; inset:0; background:rgba(0,0,0,.15); pointer-events:none; z-index:1; }

.wge-play-btn {
	position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
	z-index:2; display:flex; align-items:center; justify-content:center;
	width:72px; height:72px; border:none; border-radius:50%;
	background:rgba(0,0,0,.55); cursor:pointer;
	transition:transform .2s ease, background .2s ease; padding:0;
}
.wge-play-btn:hover { transform:translate(-50%,-50%) scale(1.12); background:rgba(0,0,0,.75); }
.wge-play-btn svg, .wge-play-btn i { fill:#fff; color:#fff; display:block; }

.wge-video-player { position:absolute; inset:0; z-index:3; background:#000; display:flex; flex-direction:column; }
.wge-video-player[hidden] { display:none !important; }
.wge-video-player-inner { flex:1; position:relative; }
.wge-video-player-inner iframe,
.wge-video-player-inner video { position:absolute; inset:0; width:100%; height:100%; border:none; display:block; }

.wge-video-close {
	position:absolute; top:8px; right:8px; z-index:4;
	width:32px; height:32px; border:none; border-radius:50%;
	background:rgba(0,0,0,.65); color:#fff; font-size:16px; cursor:pointer;
	display:flex; align-items:center; justify-content:center;
	transition:background .2s ease;
}
.wge-video-close:hover { background:rgba(0,0,0,.85); }

/* ── Sale badge ── */
.wge-sale-badge {
	position:absolute; z-index:10; display:inline-block;
	font-size:12px; font-weight:700; letter-spacing:.05em;
	text-transform:uppercase; line-height:1;
	background:#e74c3c; color:#fff; padding:4px 8px; border-radius:4px; pointer-events:none;
}
.wge-sale-badge.pos-top-left     { top:12px; left:12px; }
.wge-sale-badge.pos-top-right    { top:12px; right:12px; }
.wge-sale-badge.pos-bottom-left  { bottom:12px; left:12px; }
.wge-sale-badge.pos-bottom-right { bottom:12px; right:12px; }

/* ── Thumbnails ── */
.wge-thumbnails { display:grid; gap:8px; width:100%; box-sizing:border-box; }
.thumb-left  .wge-thumbnails,
.thumb-right .wge-thumbnails { display:flex; flex-direction:column; flex-shrink:0; width:100px; max-width:100px; }

.wge-thumb-item {
	position:relative; display:block; padding:0; width:100%; aspect-ratio:1/1;
	border:2px solid transparent; border-style:solid; background:#eee;
	overflow:hidden; cursor:pointer;
	transition:opacity .2s ease, border-color .2s ease, transform .15s ease;
	box-sizing:border-box;
}
.thumb-left  .wge-thumb-item,
.thumb-right .wge-thumb-item { width:100%; flex-shrink:0; }

.wge-thumb-item img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; pointer-events:none; }
.wge-thumb-item:not(.is-active)       { opacity:.6; }
.wge-thumb-item:not(.is-active):hover { opacity:.9; transform:scale(1.04); }
.wge-thumb-item.is-active             { border-color:#2271b1; opacity:1; }

.wge-thumb-video-badge {
	position:absolute; bottom:4px; right:4px; width:20px; height:20px;
	background:rgba(0,0,0,.65); border-radius:50%;
	display:flex; align-items:center; justify-content:center; z-index:1;
}
.wge-thumb-video-badge svg { fill:#fff; display:block; }

/* ══ LIGHTBOX ══════════════════════════════════════════════════════════ */
.wge-lightbox {
	position:fixed; inset:0; z-index:999999;
	display:flex; align-items:center; justify-content:center;
	opacity:0; visibility:hidden; transition:opacity .28s ease, visibility .28s ease;
}
.wge-lightbox.is-open { opacity:1; visibility:visible; }

.wge-lb-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.92); cursor:zoom-out; }

.wge-lb-img-wrap {
	position:relative; z-index:1;
	display:flex; align-items:center; justify-content:center;
	max-width:92vw; max-height:88vh;
}
.wge-lb-img {
	display:block; max-width:90vw; max-height:85vh; width:auto; height:auto;
	object-fit:contain; border-radius:3px; box-shadow:0 8px 60px rgba(0,0,0,.6);
	transition:opacity .2s ease;
}
.wge-lb-img.fade { opacity:0; }

.wge-lb-counter {
	position:fixed; top:14px; left:50%; transform:translateX(-50%);
	background:rgba(0,0,0,.5); color:#fff; font-size:13px;
	font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
	padding:4px 12px; border-radius:20px; pointer-events:none; z-index:2;
}
.wge-lb-close {
	position:fixed; top:10px; right:14px; width:40px; height:40px;
	border:none; border-radius:50%; background:rgba(255,255,255,.15); color:#fff;
	font-size:22px; cursor:pointer; display:flex; align-items:center; justify-content:center;
	transition:background .2s ease; z-index:2;
}
.wge-lb-close:hover { background:rgba(255,255,255,.3); }

.wge-lb-arrow {
	position:fixed; top:50%; transform:translateY(-50%);
	width:52px; height:52px; border:none; border-radius:50%;
	background:rgba(255,255,255,.12); color:#fff; cursor:pointer;
	display:flex; align-items:center; justify-content:center;
	transition:background .2s ease; z-index:2;
}
.wge-lb-arrow:hover { background:rgba(255,255,255,.25); }
.wge-lb-arrow svg { fill:#fff; display:block; }
.wge-lb-prev { left:16px; }
.wge-lb-next { right:16px; }
.wge-lb-arrow.hidden { display:none; }

/* ── Responsive ── */
@media (max-width:767px) {
	.wge-gallery.thumb-left,
	.wge-gallery.thumb-right { flex-direction:column; }
	.thumb-left  .wge-thumbnails,
	.thumb-right .wge-thumbnails { display:grid !important; width:100% !important; max-width:none !important; margin:0 !important; }
	.wge-lb-arrow { display:none; }
}

/* ── Auto height mode (natural image proportions) ──────────────────────
   Specificity (0,3,0) / (0,3,1) beats Elementor's generated (0,2,0) / (0,2,1)
   so no !important needed — overrides any fixed height from the slider. */
.wge-gallery .wge-main-image-wrap.wge-auto-height { height: auto; }
.wge-gallery .wge-main-image-wrap.wge-auto-height img { height: auto; width: 100%; }

/* ── Slide transition: clip slides exiting/entering the main area ── */
.wge-gallery[data-anim="slide"] .wge-main-area { overflow: hidden; }

/* ── Focus ── */
.wge-thumb-item:focus-visible, .wge-play-btn:focus-visible, .wge-video-close:focus-visible,
.wge-lb-close:focus-visible, .wge-lb-arrow:focus-visible { outline:3px solid #2271b1; outline-offset:2px; }

/* Hard-reset arrow backgrounds — overrides any theme rule that targets
   button.wge-lb-arrow in default, focus, or hover state (e.g. pink #c36) */
.wge-lightbox .wge-lb-arrow,
.wge-lightbox .wge-lb-arrow:focus,
.wge-lightbox .wge-lb-arrow:focus-visible,
.wge-lightbox .wge-lb-arrow:focus-within { background:rgba(255,255,255,0.12) !important; }
.wge-lightbox .wge-lb-arrow:hover,
.wge-lightbox .wge-lb-arrow:hover:focus,
.wge-lightbox .wge-lb-arrow:hover:focus-visible { background:rgba(255,255,255,0.25) !important; }
