/**
 * AIEO lightbox skin — Rooster One's look for WooCommerce's bundled
 * PhotoSwipe 4 viewer, plus the filmstrip and pager dots that
 * aieo-lightbox.js mounts inside `.pswp__ui`.
 *
 * Custom properties (emitted inline from PHP with the operator's settings):
 *   --aieo-lb-accent   arrow / active-state colour
 *   --aieo-lb-thumb    filmstrip thumbnail height (px)
 *
 * Only .pswp descendants are styled — nothing here can leak onto the page.
 *
 * @package ai-eshop-optimizer
 */

/* PhotoSwipe ships z-index 1500, which loses to sticky headers, chat
 * bubbles, floating cart buttons and carousel arrows on real themes — page
 * furniture then floats ABOVE the fullscreen viewer. Ours sits above
 * everything, including third-party chat widgets that use 10^7-range
 * z-indexes. */
.pswp.aieo-lb {
	z-index: 100000000;
}

/* ── Shield the viewer's controls from THEME button styling. Real themes
 * style bare `button` — dekko gives every button rounded corners, padding
 * and a lime `::after` pill — and all of it lands on PhotoSwipe's buttons
 * and ours. Kill foreign pseudo-elements outright (the arrow rules below
 * re-add OUR chevron at higher specificity) and reset the box. Only
 * background-color is reset, never background-image: the default skin's
 * toolbar icons are a sprite on the button itself. ─────────────────────── */
.pswp button.pswp__button,
.pswp .aieo-lb-dot,
.pswp .aieo-lb-thumb {
	padding: 0 !important;
	margin: 0;
	border-radius: 0 !important;
	box-shadow: none !important;
	text-shadow: none !important;
	background-color: transparent !important;
}
.pswp button.pswp__button::before,
.pswp button.pswp__button::after,
.pswp .aieo-lb-dot::before,
.pswp .aieo-lb-dot::after,
.pswp .aieo-lb-thumb::before,
.pswp .aieo-lb-thumb::after {
	content: none !important;
	display: none !important;
}

/* ── Arrows: solid squares in the accent colour, white chevron — replacing
 *    PhotoSwipe's translucent sprite chevrons. Every visual property is
 *    explicit and !important, or a theme's `button` CSS bleeds through. ── */
.pswp button.pswp__button--arrow--left,
.pswp button.pswp__button--arrow--right {
	width: 56px !important;
	height: 56px !important;
	margin-top: -28px;
	padding: 0 !important;
	border: 0 !important;
	background: var(--aieo-lb-accent, #333) !important;
	opacity: 0.9;
}
.pswp button.pswp__button--arrow--left:hover,
.pswp button.pswp__button--arrow--right:hover {
	opacity: 1;
}
.pswp button.pswp__button--arrow--left:after,
.pswp button.pswp__button--arrow--right:after {
	content: "" !important;
	display: block !important;
	position: absolute !important;
	top: 50% !important;
	left: 50% !important;
	width: 14px !important;
	height: 14px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-top: 2px solid #fff !important;
	border-right: 2px solid #fff !important;
	border-radius: 0 !important;
	background: none !important;
	box-shadow: none !important;
}
.pswp button.pswp__button--arrow--left:after {
	transform: translate(-35%, -50%) rotate(-135deg) !important;
}
.pswp button.pswp__button--arrow--right:after {
	transform: translate(-65%, -50%) rotate(45deg) !important;
}

/* Arrow variants (root class set by aieo-lightbox.js from the settings). */
.pswp.aieo-lb-arrows-round button.pswp__button--arrow--left,
.pswp.aieo-lb-arrows-round button.pswp__button--arrow--right {
	border-radius: 50% !important;
}
.pswp.aieo-lb-arrows-minimal button.pswp__button--arrow--left,
.pswp.aieo-lb-arrows-minimal button.pswp__button--arrow--right {
	background: transparent !important;
}
.pswp.aieo-lb-arrows-minimal button.pswp__button--arrow--left:after,
.pswp.aieo-lb-arrows-minimal button.pswp__button--arrow--right:after {
	width: 20px !important;
	height: 20px !important;
	border-top-width: 3px !important;
	border-right-width: 3px !important;
	border-color: var(--aieo-lb-accent, #fff) !important;
}

/* ── Backdrop variants ──────────────────────────────────────────────────── */
.pswp.aieo-lb-bg-light .pswp__bg {
	background: #f6f6f6;
}
.pswp.aieo-lb-bg-light .pswp__counter {
	color: #1e1e1e;
	text-shadow: none;
}
.pswp.aieo-lb-bg-light .pswp__top-bar .pswp__button--close,
.pswp.aieo-lb-bg-light .pswp__top-bar .pswp__button--fs,
.pswp.aieo-lb-bg-light .pswp__top-bar .pswp__button--zoom,
.pswp.aieo-lb-bg-light .pswp__top-bar .pswp__button--share {
	filter: invert(0.85); /* the default skin's icons are white sprites */
}
.pswp.aieo-lb-bg-light .aieo-lb-dot {
	background: rgba(0, 0, 0, 0.25) !important;
}
.pswp.aieo-lb-bg-light .aieo-lb-dot:hover {
	background: rgba(0, 0, 0, 0.5) !important;
}
.pswp.aieo-lb-bg-light .aieo-lb-strip {
	background: rgba(0, 0, 0, 0.06);
}

/* Frosted glass: the page stays visible, blurred, behind the viewer. Keep
 * the operator's backdrop opacity high — the translucency lives here. */
.pswp.aieo-lb-bg-glass .pswp__bg {
	background: rgba(24, 24, 28, 0.35);
	-webkit-backdrop-filter: blur(22px) saturate(140%);
	backdrop-filter: blur(22px) saturate(140%);
}
.pswp.aieo-lb-bg-glass .aieo-lb-strip {
	background: rgba(255, 255, 255, 0.08);
}

/* ── Bottom UI: pager dots above a full-width filmstrip ─────────────────── */
.pswp .aieo-lb-bottom {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1600;
	pointer-events: auto; /* .pswp__ui children re-enable events themselves */
}
.pswp .aieo-lb-dots {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
}
.pswp .aieo-lb-dot {
	width: 10px;
	height: 10px;
	padding: 0;
	border: 0;
	border-radius: 50% !important;
	background: rgba(255, 255, 255, 0.4) !important;
	cursor: pointer;
	flex: 0 0 auto;
	transition: background 0.15s ease;
}
.pswp .aieo-lb-dot:hover {
	background: rgba(255, 255, 255, 0.7) !important;
}
.pswp .aieo-lb-dot.is-active {
	background: var(--aieo-lb-accent, #fff) !important;
}
.pswp .aieo-lb-strip {
	display: flex;
	gap: 6px;
	padding: 8px;
	overflow-x: auto;
	overflow-y: hidden;
	background: rgba(0, 0, 0, 0.35);
	scrollbar-width: none;
	overscroll-behavior: contain;
}
.pswp .aieo-lb-strip::-webkit-scrollbar {
	display: none;
	height: 0;
}
/* Centre the thumbnails when they fit, the way lightGallery does, without
 * breaking the scroller when they do not. `justify-content: center` cannot be
 * used here: once the row overflows it pushes the leading thumbnails past
 * scrollLeft 0, where they are unreachable. Auto margins on the end items
 * centre the group the same way but collapse to 0 as soon as free space runs
 * out, so an overflowing strip still scrolls from its true start. */
.pswp .aieo-lb-strip > :first-child {
	margin-inline-start: auto;
}
.pswp .aieo-lb-strip > :last-child {
	margin-inline-end: auto;
}
.pswp .aieo-lb-thumb {
	flex: 0 0 auto;
	height: var(--aieo-lb-thumb, 96px);
	padding: 0;
	border: 2px solid var(--aieo-lb-thumb-border, transparent);
	border-radius: var(--aieo-lb-thumb-radius, 0) !important;
	background: none;
	cursor: pointer;
	opacity: 0.55;
	transition: opacity 0.15s ease, border-color 0.15s ease;
}
.pswp .aieo-lb-thumb img {
	height: 100%;
	width: auto;
	display: block;
	border-radius: inherit;
}

/* Equal-size variant: every thumbnail is a square of the configured height,
 * the image cropped to fill it — instead of each keeping its own aspect. */
.pswp.aieo-lb-thumbs-equal .aieo-lb-thumb {
	width: var(--aieo-lb-thumb, 96px);
}
.pswp.aieo-lb-thumbs-equal .aieo-lb-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.pswp .aieo-lb-thumb:hover {
	opacity: 0.85;
}
.pswp .aieo-lb-thumb.is-active {
	opacity: 1;
	border-color: var(--aieo-lb-accent, #fff);
}

/* Our bottom UI fades with the rest of the controls on idle/tap. */
.pswp .pswp__ui--hidden .aieo-lb-bottom {
	opacity: 0;
	transition: opacity 0.25s ease;
}

/* The caption sits at bottom:0 in the default skin — lift it clear of the
 * filmstrip when one is mounted. */
.pswp.aieo-lb-has-strip .pswp__caption {
	bottom: calc(var(--aieo-lb-thumb, 96px) + 44px);
	background: none;
}

@media (max-width: 767px) {
	.pswp button.pswp__button--arrow--left,
	.pswp button.pswp__button--arrow--right {
		width: 44px !important;
		height: 44px !important;
		margin-top: -22px;
	}
	/* Phones are all swipe — a fat filmstrip just covers the image. */
	.pswp .aieo-lb-thumb {
		height: calc(var(--aieo-lb-thumb, 96px) * 0.66);
	}
}