/*
 * Woo Quantity Upsell — Review-image lightbox restyle.
 *
 * Modernises the photo pop-up from "Customer Reviews for WooCommerce" (CusRev).
 * On desktop it becomes a clean, rounded, shadowed card; on phones the photo and
 * the review text stack (photo on top, contained — never squashed or stretched).
 *
 * CusRev ships high-specificity selectors prefixed with either
 * "#reviews.cr-reviews-ajax-reviews" (product page) or ".cr-all-reviews-shortcode"
 * (all-reviews page), so every rule below is written for both prefixes and uses
 * !important on the layout properties to win over slick's inline styles.
 */

:root {
	--wqu-rev-accent: #0d1e47;
	--wqu-rev-radius: 14px;
}

/* --- Comment-image lightbox container (built by review-lightbox.js) -------- */
/* Our own pop-up for inline review photos. Positioned here so it works even if
   CusRev's customer-images feature (and its modal CSS) is not enabled. */
.wqu-cimg-cont {
	position: fixed !important;
	inset: 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	z-index: 100000 !important;
}

/* The comment-image pop-up has no comment beside the photo, so let the photo use
   the full card width. Cap the height so the thumbnail row still fits; a lone
   photo (no thumbnails) may go taller. */
@media all and (min-width: 701px) {
	#reviews.cr-reviews-ajax-reviews .cr-ajax-reviews-cus-images-modal.wqu-cimg .cr-ajax-reviews-slide-main-flex > img,
	.cr-all-reviews-shortcode .cr-ajax-reviews-cus-images-modal.wqu-cimg .cr-ajax-reviews-slide-main-flex > img {
		max-width: 100% !important;
		max-height: 62vh !important;
	}

	#reviews.cr-reviews-ajax-reviews .cr-ajax-reviews-cus-images-modal.wqu-cimg-single .cr-ajax-reviews-slide-main-flex > img,
	.cr-all-reviews-shortcode .cr-ajax-reviews-cus-images-modal.wqu-cimg-single .cr-ajax-reviews-slide-main-flex > img {
		max-height: 82vh !important;
	}
}

/* The comment-image pop-up is not a slick slider, so lay its thumbnail strip out
   as a simple centered, wrapping row of square tiles. */
#reviews.cr-reviews-ajax-reviews .cr-ajax-reviews-cus-images-modal.wqu-cimg .cr-ajax-reviews-cus-images-slider-nav,
.cr-all-reviews-shortcode .cr-ajax-reviews-cus-images-modal.wqu-cimg .cr-ajax-reviews-cus-images-slider-nav {
	display: flex !important;
	flex-wrap: wrap !important;
	justify-content: center !important;
	gap: 8px !important;
}

#reviews.cr-reviews-ajax-reviews .cr-ajax-reviews-cus-images-modal.wqu-cimg .cr-ajax-reviews-cus-images-slider-nav .slick-slide,
.cr-all-reviews-shortcode .cr-ajax-reviews-cus-images-modal.wqu-cimg .cr-ajax-reviews-cus-images-slider-nav .slick-slide {
	width: 64px !important;
	flex: 0 0 auto !important;
	cursor: pointer;
}

/* --- Backdrop ------------------------------------------------------------- */
#reviews.cr-reviews-ajax-reviews .cr-ajax-reviews-cus-images-modal-cont.cr-mask-active,
.cr-all-reviews-shortcode .cr-ajax-reviews-cus-images-modal-cont.cr-mask-active {
	background: rgba(15, 18, 28, 0.72) !important;
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	padding: 16px !important;
	box-sizing: border-box !important;
}

/* --- Modal card ---------------------------------------------------------- */
#reviews.cr-reviews-ajax-reviews .cr-ajax-reviews-cus-images-modal,
.cr-all-reviews-shortcode .cr-ajax-reviews-cus-images-modal {
	width: min(760px, 96vw) !important;
	max-width: 96vw !important;
	max-height: 92vh !important;
	display: flex !important;
	flex-direction: column !important;
	position: relative !important;
	background: #ffffff !important;
	border-radius: var(--wqu-rev-radius) !important;
	box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45) !important;
	overflow: hidden !important;
}

/* --- Header + close ------------------------------------------------------ */
#reviews.cr-reviews-ajax-reviews .cr-ajax-reviews-cus-images-modal div.cr-ajax-reviews-cus-images-hdr,
.cr-all-reviews-shortcode .cr-ajax-reviews-cus-images-modal div.cr-ajax-reviews-cus-images-hdr {
	height: 48px !important;
	flex: 0 0 auto !important;
}

#reviews.cr-reviews-ajax-reviews .cr-ajax-reviews-cus-images-modal button.cr-ajax-reviews-cus-images-close,
.cr-all-reviews-shortcode .cr-ajax-reviews-cus-images-modal button.cr-ajax-reviews-cus-images-close {
	top: 10px !important;
	right: 10px !important;
	margin: 0 !important;
	width: 32px !important;
	height: 32px !important;
	padding: 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	border-radius: 50% !important;
	background: #f1f2f5 !important;
	color: #333 !important;
	line-height: 1 !important;
	transition: background 0.15s ease, color 0.15s ease;
}

#reviews.cr-reviews-ajax-reviews .cr-ajax-reviews-cus-images-modal button.cr-ajax-reviews-cus-images-close:hover,
.cr-all-reviews-shortcode .cr-ajax-reviews-cus-images-modal button.cr-ajax-reviews-cus-images-close:hover {
	background: var(--wqu-rev-accent) !important;
	color: #ffffff !important;
}

/* --- Scrollable body (holds both sliders) -------------------------------- */
#reviews.cr-reviews-ajax-reviews .cr-ajax-reviews-cus-images-modal .cr-ajax-reviews-cus-images-slider-main,
.cr-all-reviews-shortcode .cr-ajax-reviews-cus-images-modal .cr-ajax-reviews-cus-images-slider-main {
	padding: 0 18px !important;
}

/* --- Main slide: image + comment ----------------------------------------- */
#reviews.cr-reviews-ajax-reviews .cr-ajax-reviews-cus-images-modal .cr-ajax-reviews-slide-main-flex,
.cr-all-reviews-shortcode .cr-ajax-reviews-cus-images-modal .cr-ajax-reviews-slide-main-flex {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 22px !important;
	padding: 6px 4px 10px !important;
	box-sizing: border-box !important;
}

/* The review photo (direct child img; avatar lives inside the comment block). */
#reviews.cr-reviews-ajax-reviews .cr-ajax-reviews-cus-images-modal .cr-ajax-reviews-slide-main-flex > img,
.cr-all-reviews-shortcode .cr-ajax-reviews-cus-images-modal .cr-ajax-reviews-slide-main-flex > img {
	flex: 0 1 auto !important;
	width: auto !important;
	height: auto !important;
	max-width: 60% !important;
	max-height: 60vh !important;
	object-fit: contain !important;
	border-radius: 10px !important;
}

#reviews.cr-reviews-ajax-reviews .cr-ajax-reviews-cus-images-modal .cr-ajax-reviews-slide-main-comment,
.cr-all-reviews-shortcode .cr-ajax-reviews-cus-images-modal .cr-ajax-reviews-slide-main-comment {
	width: 40% !important;
	max-width: 320px !important;
	flex: 1 1 auto !important;
	padding: 0 !important;
	box-sizing: border-box !important;
	text-align: left !important;
}

#reviews.cr-reviews-ajax-reviews .cr-ajax-reviews-cus-images-modal .cr-ajax-reviews-slide-main-comment-body,
.cr-all-reviews-shortcode .cr-ajax-reviews-cus-images-modal .cr-ajax-reviews-slide-main-comment-body {
	max-height: 46vh !important;
	overflow-y: auto !important;
	line-height: 1.5;
	color: #2b2f38;
	scrollbar-width: thin;
}

/* --- Thumbnail nav strip -------------------------------------------------- */
#reviews.cr-reviews-ajax-reviews .cr-ajax-reviews-cus-images-modal .cr-ajax-reviews-cus-images-slider-nav,
.cr-all-reviews-shortcode .cr-ajax-reviews-cus-images-modal .cr-ajax-reviews-cus-images-slider-nav {
	width: 100% !important;
	max-width: 460px !important;
	margin: 4px auto 20px !important;
	padding: 0 10px !important;
	box-sizing: border-box !important;
}

#reviews.cr-reviews-ajax-reviews .cr-ajax-reviews-cus-images-modal .cr-ajax-reviews-cus-images-slider-nav .cr-ajax-reviews-slide-nav,
.cr-all-reviews-shortcode .cr-ajax-reviews-cus-images-modal .cr-ajax-reviews-cus-images-slider-nav .cr-ajax-reviews-slide-nav {
	padding: 5px !important;
	box-sizing: border-box !important;
	opacity: 0.55;
	transition: opacity 0.15s ease;
}

#reviews.cr-reviews-ajax-reviews .cr-ajax-reviews-cus-images-modal .cr-ajax-reviews-cus-images-slider-nav .cr-ajax-reviews-slide-nav:hover,
.cr-all-reviews-shortcode .cr-ajax-reviews-cus-images-modal .cr-ajax-reviews-cus-images-slider-nav .cr-ajax-reviews-slide-nav:hover,
#reviews.cr-reviews-ajax-reviews .cr-ajax-reviews-cus-images-modal .cr-ajax-reviews-cus-images-slider-nav .slick-current .cr-ajax-reviews-slide-nav,
.cr-all-reviews-shortcode .cr-ajax-reviews-cus-images-modal .cr-ajax-reviews-cus-images-slider-nav .slick-current .cr-ajax-reviews-slide-nav {
	opacity: 1;
}

#reviews.cr-reviews-ajax-reviews .cr-ajax-reviews-cus-images-modal .cr-ajax-reviews-cus-images-slider-nav .cr-ajax-reviews-slide-nav img,
.cr-all-reviews-shortcode .cr-ajax-reviews-cus-images-modal .cr-ajax-reviews-cus-images-slider-nav .cr-ajax-reviews-slide-nav img {
	display: block !important;
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 1 / 1 !important;
	object-fit: cover !important;
	border-radius: calc(var(--wqu-rev-radius) - 4px) !important;
	border: 2px solid transparent !important;
	box-sizing: border-box !important;
}

/* --- Hide slick dots (thumbnails are the navigation) --------------------- */
#reviews.cr-reviews-ajax-reviews .cr-ajax-reviews-cus-images-modal .slick-dots,
.cr-all-reviews-shortcode .cr-ajax-reviews-cus-images-modal .slick-dots {
	display: none !important;
}

#reviews.cr-reviews-ajax-reviews .cr-ajax-reviews-cus-images-modal .cr-ajax-reviews-cus-images-slider-nav .slick-current .cr-ajax-reviews-slide-nav img,
.cr-all-reviews-shortcode .cr-ajax-reviews-cus-images-modal .cr-ajax-reviews-cus-images-slider-nav .slick-current .cr-ajax-reviews-slide-nav img {
	border-color: var(--wqu-rev-accent) !important;
}

/* --- Slick arrows --------------------------------------------------------- */
#reviews.cr-reviews-ajax-reviews .cr-ajax-reviews-cus-images-modal .slick-prev,
#reviews.cr-reviews-ajax-reviews .cr-ajax-reviews-cus-images-modal .slick-next,
.cr-all-reviews-shortcode .cr-ajax-reviews-cus-images-modal .slick-prev,
.cr-all-reviews-shortcode .cr-ajax-reviews-cus-images-modal .slick-next {
	z-index: 2;
}

/* --- Mirrored review-text box (populated by review-lightbox.js on mobile) -- */
/* Hidden by default; only shown inside the mobile block below. */
#reviews.cr-reviews-ajax-reviews .cr-ajax-reviews-cus-images-modal .wqu-rev-textbox,
.cr-all-reviews-shortcode .cr-ajax-reviews-cus-images-modal .wqu-rev-textbox {
	display: none;
}

/* --- Mobile: photo -> thumbnails -> review text -------------------------- */
@media all and (max-width: 700px) {
	/* 20px breathing room around the floating card. */
	#reviews.cr-reviews-ajax-reviews .cr-ajax-reviews-cus-images-modal-cont.cr-mask-active,
	.cr-all-reviews-shortcode .cr-ajax-reviews-cus-images-modal-cont.cr-mask-active {
		align-items: center !important;
		justify-content: center !important;
		padding: 20px !important;
	}

	/* Floating card: fully rounded on all corners, 20px gap on every side. */
	#reviews.cr-reviews-ajax-reviews .cr-ajax-reviews-cus-images-modal,
	.cr-all-reviews-shortcode .cr-ajax-reviews-cus-images-modal {
		width: 100% !important;
		max-width: 100% !important;
		max-height: calc(100vh - 40px) !important;
		margin: 0 !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		border-radius: var(--wqu-rev-radius) !important;
	}

	/* Collapse the header so the photo starts at the very top of the sheet. */
	#reviews.cr-reviews-ajax-reviews .cr-ajax-reviews-cus-images-modal div.cr-ajax-reviews-cus-images-hdr,
	.cr-all-reviews-shortcode .cr-ajax-reviews-cus-images-modal div.cr-ajax-reviews-cus-images-hdr {
		height: 0 !important;
	}

	/* Close button floats over the photo, readable on any image. */
	#reviews.cr-reviews-ajax-reviews .cr-ajax-reviews-cus-images-modal button.cr-ajax-reviews-cus-images-close,
	.cr-all-reviews-shortcode .cr-ajax-reviews-cus-images-modal button.cr-ajax-reviews-cus-images-close {
		top: 8px !important;
		right: 8px !important;
		z-index: 5 !important;
		background: rgba(0, 0, 0, 0.55) !important;
		color: #ffffff !important;
	}

	/* Edge-to-edge main photo: zero every inner gap between the card side and the
	   photo — the slider, slick's list/track/slide wrappers and the slide itself. */
	#reviews.cr-reviews-ajax-reviews .cr-ajax-reviews-cus-images-modal .cr-ajax-reviews-cus-images-slider-main,
	.cr-all-reviews-shortcode .cr-ajax-reviews-cus-images-modal .cr-ajax-reviews-cus-images-slider-main,
	#reviews.cr-reviews-ajax-reviews .cr-ajax-reviews-cus-images-modal .cr-ajax-reviews-cus-images-slider-main .slick-list,
	.cr-all-reviews-shortcode .cr-ajax-reviews-cus-images-modal .cr-ajax-reviews-cus-images-slider-main .slick-list,
	#reviews.cr-reviews-ajax-reviews .cr-ajax-reviews-cus-images-modal .cr-ajax-reviews-cus-images-slider-main .slick-track,
	.cr-all-reviews-shortcode .cr-ajax-reviews-cus-images-modal .cr-ajax-reviews-cus-images-slider-main .slick-track,
	#reviews.cr-reviews-ajax-reviews .cr-ajax-reviews-cus-images-modal .cr-ajax-reviews-cus-images-slider-main .slick-slide,
	.cr-all-reviews-shortcode .cr-ajax-reviews-cus-images-modal .cr-ajax-reviews-cus-images-slider-main .slick-slide,
	#reviews.cr-reviews-ajax-reviews .cr-ajax-reviews-cus-images-modal .cr-ajax-reviews-slide-main,
	.cr-all-reviews-shortcode .cr-ajax-reviews-cus-images-modal .cr-ajax-reviews-slide-main {
		padding-left: 0 !important;
		padding-right: 0 !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	/* When the script has taken over (.wqu-rev-mobile): drop the in-slide text
	   so the main slider is just the photo and the thumbnails sit right under it. */
	#reviews.cr-reviews-ajax-reviews .cr-ajax-reviews-cus-images-modal.wqu-rev-mobile .cr-ajax-reviews-slide-main-flex > .cr-ajax-reviews-slide-main-comment,
	.cr-all-reviews-shortcode .cr-ajax-reviews-cus-images-modal.wqu-rev-mobile .cr-ajax-reviews-slide-main-flex > .cr-ajax-reviews-slide-main-comment {
		display: none !important;
	}

	/* Pull the thumbnail strip up close to the photo. */
	#reviews.cr-reviews-ajax-reviews .cr-ajax-reviews-cus-images-modal.wqu-rev-mobile .cr-ajax-reviews-cus-images-slider-nav,
	.cr-all-reviews-shortcode .cr-ajax-reviews-cus-images-modal.wqu-rev-mobile .cr-ajax-reviews-cus-images-slider-nav {
		margin: 10px auto 12px !important;
	}

	/* The mirrored review text, now below the thumbnails and scrollable. */
	#reviews.cr-reviews-ajax-reviews .cr-ajax-reviews-cus-images-modal.wqu-rev-mobile .wqu-rev-textbox,
	.cr-all-reviews-shortcode .cr-ajax-reviews-cus-images-modal.wqu-rev-mobile .wqu-rev-textbox {
		display: block;
		padding: 12px 16px 6px !important;
		max-height: 26vh;
		overflow-y: auto;
		text-align: left;
		line-height: 1.5;
		color: #2b2f38;
		-webkit-overflow-scrolling: touch;
	}

	#reviews.cr-reviews-ajax-reviews .cr-ajax-reviews-cus-images-modal.wqu-rev-mobile .wqu-rev-textbox img,
	.cr-all-reviews-shortcode .cr-ajax-reviews-cus-images-modal.wqu-rev-mobile .wqu-rev-textbox img {
		max-width: 44px;
		height: auto;
	}

	#reviews.cr-reviews-ajax-reviews .cr-ajax-reviews-cus-images-modal .cr-ajax-reviews-slide-main-flex,
	.cr-all-reviews-shortcode .cr-ajax-reviews-cus-images-modal .cr-ajax-reviews-slide-main-flex {
		flex-direction: column !important;
		gap: 12px !important;
		padding: 0 0 8px !important;
	}

	/* Default: full-bleed fitted photo (fills width edge-to-edge, cropped). */
	#reviews.cr-reviews-ajax-reviews .cr-ajax-reviews-cus-images-modal .cr-ajax-reviews-slide-main-flex > img,
	.cr-all-reviews-shortcode .cr-ajax-reviews-cus-images-modal .cr-ajax-reviews-slide-main-flex > img {
		width: 100% !important;
		height: 40vh !important;
		max-width: 100% !important;
		max-height: none !important;
		object-fit: cover !important;
		border-radius: 0 !important;
		cursor: zoom-in;
	}

	/* Tapped: expand to show the whole photo (contained, taller). */
	#reviews.cr-reviews-ajax-reviews .cr-ajax-reviews-cus-images-modal.wqu-rev-imgbig .cr-ajax-reviews-slide-main-flex > img,
	.cr-all-reviews-shortcode .cr-ajax-reviews-cus-images-modal.wqu-rev-imgbig .cr-ajax-reviews-slide-main-flex > img {
		height: auto !important;
		max-height: 62vh !important;
		object-fit: contain !important;
		cursor: zoom-out;
	}

	#reviews.cr-reviews-ajax-reviews .cr-ajax-reviews-cus-images-modal .cr-ajax-reviews-slide-main-comment,
	.cr-all-reviews-shortcode .cr-ajax-reviews-cus-images-modal .cr-ajax-reviews-slide-main-comment {
		width: 100% !important;
		max-width: 100% !important;
		padding: 12px 4px 2px !important;
	}

	#reviews.cr-reviews-ajax-reviews .cr-ajax-reviews-cus-images-modal .cr-ajax-reviews-slide-main-comment-body,
	.cr-all-reviews-shortcode .cr-ajax-reviews-cus-images-modal .cr-ajax-reviews-slide-main-comment-body {
		max-height: 22vh !important;
	}

	#reviews.cr-reviews-ajax-reviews .cr-ajax-reviews-cus-images-modal .cr-ajax-reviews-cus-images-slider-nav .cr-ajax-reviews-slide-nav img,
	.cr-all-reviews-shortcode .cr-ajax-reviews-cus-images-modal .cr-ajax-reviews-cus-images-slider-nav .cr-ajax-reviews-slide-nav img {
		max-height: 52px !important;
		height: 52px !important;
	}

	/* --- Comment-image lightbox: mobile photo viewer ---------------------- */
	/* This pop-up has no side comment, so on phones it is a plain photo viewer.
	   The customer-images modal above forces the photo to a fixed 40vh cover crop
	   (needed there because review text sits below it); for the comment lightbox
	   that leaves a tall empty card under a small crop. Override so the photo is
	   shown whole (contained) and the card shrinks to wrap it — no empty space. */
	#reviews.cr-reviews-ajax-reviews .cr-ajax-reviews-cus-images-modal.wqu-cimg,
	.cr-all-reviews-shortcode .cr-ajax-reviews-cus-images-modal.wqu-cimg {
		height: auto !important;
		max-height: calc(100vh - 40px) !important;
	}

	#reviews.cr-reviews-ajax-reviews .cr-ajax-reviews-cus-images-modal.wqu-cimg .cr-ajax-reviews-cus-images-slider-main,
	.cr-all-reviews-shortcode .cr-ajax-reviews-cus-images-modal.wqu-cimg .cr-ajax-reviews-cus-images-slider-main {
		flex: 0 0 auto !important;
	}

	#reviews.cr-reviews-ajax-reviews .cr-ajax-reviews-cus-images-modal.wqu-cimg .cr-ajax-reviews-slide-main-flex,
	.cr-all-reviews-shortcode .cr-ajax-reviews-cus-images-modal.wqu-cimg .cr-ajax-reviews-slide-main-flex {
		gap: 0 !important;
		padding: 0 !important;
	}

	/* Whole photo, not a fixed-height crop — card height follows the image. */
	#reviews.cr-reviews-ajax-reviews .cr-ajax-reviews-cus-images-modal.wqu-cimg .cr-ajax-reviews-slide-main-flex > img,
	.cr-all-reviews-shortcode .cr-ajax-reviews-cus-images-modal.wqu-cimg .cr-ajax-reviews-slide-main-flex > img {
		width: 100% !important;
		height: auto !important;
		max-width: 100% !important;
		max-height: 70vh !important;
		object-fit: contain !important;
		border-radius: 0 !important;
		cursor: zoom-in;
	}

	/* Tap to expand a little taller. */
	#reviews.cr-reviews-ajax-reviews .cr-ajax-reviews-cus-images-modal.wqu-cimg.wqu-rev-imgbig .cr-ajax-reviews-slide-main-flex > img,
	.cr-all-reviews-shortcode .cr-ajax-reviews-cus-images-modal.wqu-cimg.wqu-rev-imgbig .cr-ajax-reviews-slide-main-flex > img {
		max-height: 85vh !important;
		cursor: zoom-out;
	}

	/* Thumbnail row (multi-photo reviews) sits snug under the photo. */
	#reviews.cr-reviews-ajax-reviews .cr-ajax-reviews-cus-images-modal.wqu-cimg .cr-ajax-reviews-cus-images-slider-nav,
	.cr-all-reviews-shortcode .cr-ajax-reviews-cus-images-modal.wqu-cimg .cr-ajax-reviews-cus-images-slider-nav {
		margin: 10px auto 12px !important;
	}
}