/**
 * WP Image Popup - Front-End Stylesheet
 *
 * Lightweight, accessible, CSS3-powered transitions with zero dependencies.
 * All classes strictly prefixed with 'ipopup-'.
 */

/* ==========================================================================
   1. Root Container & Backdrop Overlay
   ========================================================================== */
.ipopup-root {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: 2147483000;
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s ease;
}

.ipopup-root.ipopup-open {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
}

.ipopup-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--ipopup-overlay-color, #000000);
	opacity: var(--ipopup-overlay-opacity, 0.5);
	cursor: pointer;
	z-index: 1;
	transition: opacity 0.3s ease;
}

/* ==========================================================================
   2. Dialog Container & Responsiveness
   ========================================================================== */
.ipopup-dialog {
	position: fixed;
	z-index: 2;
	width: var(--ipopup-d-width, auto);
	height: var(--ipopup-d-height, auto);
	max-width: min(var(--ipopup-max-width, 600px), calc(100vw - 32px));
	max-height: calc(100vh - 32px);
	outline: none;
	box-sizing: border-box;
	transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.ipopup-content {
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
	line-height: 0;
}

.ipopup-link {
	display: block;
	text-decoration: none;
	line-height: 0;
}

.ipopup-img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	max-height: calc(100vh - 32px);
	border-radius: 4px;
	box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3), 0 8px 10px -6px rgba(0, 0, 0, 0.2);
}

/* Image Fitting Modes */
.ipopup-fit-contain .ipopup-img {
	object-fit: contain;
	height: 100%;
}

.ipopup-fit-cover .ipopup-img {
	object-fit: cover;
	height: 100%;
}

/* ==========================================================================
   3. Positions (CSS Viewport Placement)
   ========================================================================== */
/* Centre */
.ipopup-pos-center .ipopup-dialog {
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

/* Top Left */
.ipopup-pos-top_left .ipopup-dialog {
	top: var(--ipopup-offset-y, 0px);
	left: var(--ipopup-offset-x, 0px);
}

/* Top Centre */
.ipopup-pos-top_center .ipopup-dialog {
	top: var(--ipopup-offset-y, 0px);
	left: 50%;
	transform: translateX(-50%);
}

/* Top Right */
.ipopup-pos-top_right .ipopup-dialog {
	top: var(--ipopup-offset-y, 0px);
	right: var(--ipopup-offset-x, 0px);
}

/* Middle Left */
.ipopup-pos-middle_left .ipopup-dialog {
	top: 50%;
	left: var(--ipopup-offset-x, 0px);
	transform: translateY(-50%);
}

/* Middle Right */
.ipopup-pos-middle_right .ipopup-dialog {
	top: 50%;
	right: var(--ipopup-offset-x, 0px);
	transform: translateY(-50%);
}

/* Bottom Left */
.ipopup-pos-bottom_left .ipopup-dialog {
	bottom: var(--ipopup-offset-y, 0px);
	left: var(--ipopup-offset-x, 0px);
}

/* Bottom Centre */
.ipopup-pos-bottom_center .ipopup-dialog {
	bottom: var(--ipopup-offset-y, 0px);
	left: 50%;
	transform: translateX(-50%);
}

/* Bottom Right */
.ipopup-pos-bottom_right .ipopup-dialog {
	bottom: var(--ipopup-offset-y, 0px);
	right: var(--ipopup-offset-x, 0px);
}

/* ==========================================================================
   4. Animations
   ========================================================================== */
/* Fade */
.ipopup-anim-fade .ipopup-dialog {
	opacity: 0;
}
.ipopup-open.ipopup-anim-fade .ipopup-dialog {
	opacity: 1;
}

/* Fade + Scale */
.ipopup-anim-fade_scale .ipopup-dialog {
	opacity: 0;
	transform: scale(0.92);
}
.ipopup-pos-center.ipopup-anim-fade_scale .ipopup-dialog {
	transform: translate(-50%, -50%) scale(0.92);
}
.ipopup-pos-top_center.ipopup-anim-fade_scale .ipopup-dialog {
	transform: translateX(-50%) scale(0.92);
}
.ipopup-pos-bottom_center.ipopup-anim-fade_scale .ipopup-dialog {
	transform: translateX(-50%) scale(0.92);
}
.ipopup-pos-middle_left.ipopup-anim-fade_scale .ipopup-dialog {
	transform: translateY(-50%) scale(0.92);
}
.ipopup-pos-middle_right.ipopup-anim-fade_scale .ipopup-dialog {
	transform: translateY(-50%) scale(0.92);
}

.ipopup-open.ipopup-anim-fade_scale .ipopup-dialog {
	opacity: 1;
	transform: scale(1);
}
.ipopup-open.ipopup-pos-center.ipopup-anim-fade_scale .ipopup-dialog {
	transform: translate(-50%, -50%) scale(1);
}
.ipopup-open.ipopup-pos-top_center.ipopup-anim-fade_scale .ipopup-dialog {
	transform: translateX(-50%) scale(1);
}
.ipopup-open.ipopup-pos-bottom_center.ipopup-anim-fade_scale .ipopup-dialog {
	transform: translateX(-50%) scale(1);
}
.ipopup-open.ipopup-pos-middle_left.ipopup-anim-fade_scale .ipopup-dialog {
	transform: translateY(-50%) scale(1);
}
.ipopup-open.ipopup-pos-middle_right.ipopup-anim-fade_scale .ipopup-dialog {
	transform: translateY(-50%) scale(1);
}

/* Slide Down */
.ipopup-anim-slide_down .ipopup-dialog {
	opacity: 0;
	transform: translateY(-30px);
}
.ipopup-pos-center.ipopup-anim-slide_down .ipopup-dialog {
	transform: translate(-50%, calc(-50% - 30px));
}
.ipopup-pos-top_center.ipopup-anim-slide_down .ipopup-dialog,
.ipopup-pos-bottom_center.ipopup-anim-slide_down .ipopup-dialog {
	transform: translate(-50%, -30px);
}
.ipopup-open.ipopup-anim-slide_down .ipopup-dialog {
	opacity: 1;
	transform: translateY(0);
}
.ipopup-open.ipopup-pos-center.ipopup-anim-slide_down .ipopup-dialog {
	transform: translate(-50%, -50%);
}
.ipopup-open.ipopup-pos-top_center.ipopup-anim-slide_down .ipopup-dialog,
.ipopup-open.ipopup-pos-bottom_center.ipopup-anim-slide_down .ipopup-dialog {
	transform: translate(-50%, 0);
}

/* Slide Up */
.ipopup-anim-slide_up .ipopup-dialog {
	opacity: 0;
	transform: translateY(30px);
}
.ipopup-pos-center.ipopup-anim-slide_up .ipopup-dialog {
	transform: translate(-50%, calc(-50% + 30px));
}
.ipopup-pos-top_center.ipopup-anim-slide_up .ipopup-dialog,
.ipopup-pos-bottom_center.ipopup-anim-slide_up .ipopup-dialog {
	transform: translate(-50%, 30px);
}
.ipopup-open.ipopup-anim-slide_up .ipopup-dialog {
	opacity: 1;
	transform: translateY(0);
}
.ipopup-open.ipopup-pos-center.ipopup-anim-slide_up .ipopup-dialog {
	transform: translate(-50%, -50%);
}
.ipopup-open.ipopup-pos-top_center.ipopup-anim-slide_up .ipopup-dialog,
.ipopup-open.ipopup-pos-bottom_center.ipopup-anim-slide_up .ipopup-dialog {
	transform: translate(-50%, 0);
}

/* Slide Left */
.ipopup-anim-slide_left .ipopup-dialog {
	opacity: 0;
	transform: translateX(30px);
}
.ipopup-pos-center.ipopup-anim-slide_left .ipopup-dialog {
	transform: translate(calc(-50% + 30px), -50%);
}
.ipopup-open.ipopup-anim-slide_left .ipopup-dialog {
	opacity: 1;
	transform: translateX(0);
}
.ipopup-open.ipopup-pos-center.ipopup-anim-slide_left .ipopup-dialog {
	transform: translate(-50%, -50%);
}

/* Slide Right */
.ipopup-anim-slide_right .ipopup-dialog {
	opacity: 0;
	transform: translateX(-30px);
}
.ipopup-pos-center.ipopup-anim-slide_right .ipopup-dialog {
	transform: translate(calc(-50% - 30px), -50%);
}
.ipopup-open.ipopup-anim-slide_right .ipopup-dialog {
	opacity: 1;
	transform: translateX(0);
}
.ipopup-open.ipopup-pos-center.ipopup-anim-slide_right .ipopup-dialog {
	transform: translate(-50%, -50%);
}

/* None (Instant) */
.ipopup-anim-none .ipopup-dialog,
.ipopup-anim-none.ipopup-root {
	transition: none !important;
}

/* ==========================================================================
   5. Close Button
   ========================================================================== */
.ipopup-close-btn {
	position: absolute;
	z-index: 10;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	color: var(--ipopup-close-color, #ffffff);
	background-color: var(--ipopup-close-bg, #000000);
	opacity: var(--ipopup-close-opacity, 0.8);
	transition: opacity 0.2s ease, transform 0.15s ease;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
}

.ipopup-close-btn:hover {
	opacity: 1;
	transform: scale(1.08);
}

.ipopup-close-btn:focus-visible {
	outline: 2px solid #38bdf8;
	outline-offset: 2px;
	opacity: 1;
}

.ipopup-close-icon {
	font-family: Arial, sans-serif;
	font-style: normal;
	line-height: 1;
}

/* Button Sizes */
.ipopup-close-size-small .ipopup-close-btn {
	width: 26px;
	height: 26px;
	font-size: 16px;
}

.ipopup-close-size-medium .ipopup-close-btn {
	width: 34px;
	height: 34px;
	font-size: 20px;
}

.ipopup-close-size-large .ipopup-close-btn {
	width: 42px;
	height: 42px;
	font-size: 24px;
}

/* Button Positions */
.ipopup-close-pos-top_right .ipopup-close-btn {
	top: 10px;
	right: 10px;
}

.ipopup-close-pos-top_left .ipopup-close-btn {
	top: 10px;
	left: 10px;
}

.ipopup-close-pos-outside_top_right .ipopup-close-btn {
	top: -14px;
	right: -14px;
}

.ipopup-close-pos-outside_top_left .ipopup-close-btn {
	top: -14px;
	left: -14px;
}

/* ==========================================================================
   6. Accessibility & Reduced Motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.ipopup-root,
	.ipopup-dialog,
	.ipopup-overlay,
	.ipopup-close-btn {
		transition: none !important;
		animation: none !important;
		transform: none !important;
	}

	.ipopup-pos-center .ipopup-dialog,
	.ipopup-open.ipopup-pos-center .ipopup-dialog {
		top: 50% !important;
		left: 50% !important;
		transform: translate(-50%, -50%) !important;
	}

	.ipopup-pos-top_center .ipopup-dialog,
	.ipopup-open.ipopup-pos-top_center .ipopup-dialog,
	.ipopup-pos-bottom_center .ipopup-dialog,
	.ipopup-open.ipopup-pos-bottom_center .ipopup-dialog {
		left: 50% !important;
		transform: translateX(-50%) !important;
	}

	.ipopup-pos-middle_left .ipopup-dialog,
	.ipopup-open.ipopup-pos-middle_left .ipopup-dialog,
	.ipopup-pos-middle_right .ipopup-dialog,
	.ipopup-open.ipopup-pos-middle_right .ipopup-dialog {
		top: 50% !important;
		transform: translateY(-50%) !important;
	}
}

/* ==========================================================================
   7. Device Targeting & Mobile Rules
   ========================================================================== */
@media (min-width: 769px) {
	.ipopup-hide-desktop {
		display: none !important;
	}
}

@media (max-width: 768px) {
	.ipopup-hide-mobile {
		display: none !important;
	}

	.ipopup-dialog {
		width: var(--ipopup-m-width, 90%) !important;
		height: var(--ipopup-m-height, auto) !important;
		max-width: calc(100vw - 24px) !important;
		max-height: calc(100vh - 24px) !important;
	}

	/* Mobile Position Overrides */
	.ipopup-m-pos-center .ipopup-dialog {
		top: 50% !important;
		left: 50% !important;
		right: auto !important;
		bottom: auto !important;
		transform: translate(-50%, -50%) !important;
	}

	.ipopup-m-pos-top_center .ipopup-dialog {
		top: var(--ipopup-m-offset-y, 10px) !important;
		left: 50% !important;
		right: auto !important;
		bottom: auto !important;
		transform: translateX(-50%) !important;
	}

	.ipopup-m-pos-bottom_center .ipopup-dialog {
		bottom: var(--ipopup-m-offset-y, 10px) !important;
		left: 50% !important;
		right: auto !important;
		top: auto !important;
		transform: translateX(-50%) !important;
	}
}

/* Body Scroll Lock */
body.ipopup-scroll-locked {
	overflow: hidden !important;
}