/**
 * Synced Pattern Popups Modal Styles
 * No build process - plain CSS
 */

/* Screen reader only utility class */
.sppopups-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}

.sppopups-modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	box-sizing: border-box;
	/* Support for mobile browser chrome (safe area) */
	padding-top: max(20px, env(safe-area-inset-top));
	padding-bottom: max(20px, env(safe-area-inset-bottom));
	padding-left: max(20px, env(safe-area-inset-left));
	padding-right: max(20px, env(safe-area-inset-right));
}

.sppopups-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--sppopups-overlay-color, rgba(0, 0, 0, 0.1));
	backdrop-filter: blur(var(--sppopups-backdrop-blur, 8px));
	-webkit-backdrop-filter: blur(var(--sppopups-backdrop-blur, 8px));
}

.sppopups-container {
	position: relative;
	width: 100%;
	max-width: var(--sppopups-max-width, 600px);
	/* 
	 * Height behavior: 
	 * - No explicit height allows container to shrink to content naturally (small content = small modal)
	 * - max-height constraint ensures it doesn't exceed viewport when content is tall
	 * - display: flex with flex-direction: column enables proper height constraint propagation
	 * - When content is small: container shrinks, card shrinks, no scrollbar
	 * - When content is tall: container hits max-height, card is constrained via flex, content scrolls
	 * 
	 * IMPORTANT: Flex container here allows card (flex child) to respect the max-height constraint
	 * while still allowing natural shrinking when content is small.
	 */
	display: flex;
	flex-direction: column;
	max-height: var(--sppopups-max-height-vh, 90vh);
	z-index: 1;
	/* Border radius from CSS variable */
	border-radius: var(--sppopups-border-radius, 6px);
	/* Ensure inline max-width from JavaScript is respected */
	box-sizing: border-box;
	/* Create stacking context for gradient border */
	isolation: isolate;
	/* Smooth transitions for size changes */
	transition: max-width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Gradient border effect */
.sppopups-container::before {
	content: '';
	position: absolute;
	top: -3px;
	left: -3px;
	right: -3px;
	bottom: -3px;
	border-radius: calc(var(--sppopups-border-radius, 6px) + 3px);
	background: conic-gradient(
		from 0deg,
		rgba(255, 105, 180, 0.8),
		rgba(138, 43, 226, 0.8),
		rgba(75, 0, 130, 0.8),
		rgba(0, 191, 255, 0.8),
		rgba(255, 105, 180, 0.8)
	);
	z-index: -1;
	pointer-events: none;
	/* Mask to show only the border area */
	mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	mask-composite: exclude;
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: destination-out;
	padding: 3px;
}

.sppopups-content::-webkit-scrollbar {
	width: 8px;
}

.sppopups-content::-webkit-scrollbar-track {
	background: transparent;
}

.sppopups-content::-webkit-scrollbar-thumb {
	background: rgba(0, 0, 0, 0.2);
	border-radius: 4px;
}

.sppopups-content::-webkit-scrollbar-thumb:hover {
	background: rgba(0, 0, 0, 0.3);
}

.sppopups-footer {
	position: sticky;
	bottom: 0;
	background: #ffffff;
	padding: 16px 32px;
	border-top: 1px solid rgba(0, 0, 0, 0.1);
	display: flex;
	justify-content: flex-end;
	z-index: 2;
	flex-shrink: 0;
}

.sppopups-close-footer {
	background: none;
	border: none;
	color: #666;
	font-size: 16px;
	cursor: pointer;
	padding: 8px 16px;
	transition: color 0.2s ease;
	text-decoration: none;
	font-family: inherit;
	line-height: 1.5;
	box-shadow: none;
	border-radius: 4px;
}

.sppopups-close-footer:hover {
	background: #f0f0f0;
	box-shadow: none;
}

/* Hide footer close button if setting is disabled */
.sppopups-modal:not([data-show-footer-close="true"]) .sppopups-close-footer {
	display: none;
}

.sppopups-close-footer:hover {
	color: #000;
}

.sppopups-close-footer:focus {
	outline: 2px solid #5E53C0;
	outline-offset: 2px;
	border-radius: 2px;
}

.sppopups-card {
	background: #ffffff;
	border-radius: calc(var(--sppopups-border-radius, 6px) + 2px);
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
	position: relative;
	padding: 0;
	animation: sppopups-fade-in 0.3s ease-out;
	/* Ensure content doesn't overflow the card boundaries */
	overflow: hidden;
	border: none;
	/* 
	 * Flexbox column layout enables:
	 * - Content area to flex and scroll when constrained
	 * - Footer to stick to bottom (flex-shrink: 0)
	 * - Natural height growth for small content
	 */
	display: flex;
	flex-direction: column;
	/* 
	 * Height behavior as flex child of container:
	 * - flex: 1 1 auto allows card to grow/shrink naturally
	 * - min-height: 0 is CRITICAL - allows card to shrink below content size when constrained
	 * - When container is small: card shrinks to content, no scroll needed
	 * - When container hits max-height: card is constrained, content area scrolls
	 * 
	 * IMPORTANT: min-height: 0 is required for flex items to shrink below their content size.
	 * Without it, the card won't respect the container's max-height constraint.
	 */
	flex: 1 1 auto;
	min-height: 0;
	z-index: 1;
}

/* Make images and media responsive within the modal */
.sppopups-content img,
.sppopups-content video,
.sppopups-content iframe,
.sppopups-content embed,
.sppopups-content object {
	max-width: 100%;
	height: auto;
}

.sppopups-content iframe,
.sppopups-content embed,
.sppopups-content object {
	width: 100%;
}

/*
 * Defensive layout: theme alignment classes (alignfull, alignwide) are designed for
 * full viewport width on the page. Inside the modal they must stay within the
 * modal width. Override viewport-based width/margins so content remains responsive.
 */
.sppopups-content .alignfull,
.sppopups-content .alignwide {
	width: 100% !important;
	max-width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	box-sizing: border-box;
}

/* Theme-specific: Kadence and others target .entry-content .alignfull */
.sppopups-content .wp-block-group.alignfull,
.sppopups-content .wp-block-group.alignwide,
.sppopups-content [class*="alignfull"],
.sppopups-content [class*="alignwide"] {
	width: 100% !important;
	max-width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	box-sizing: border-box;
}

/* Ensure all direct and nested block content in the modal respects container width */
.sppopups-content .wp-block-group,
.sppopups-content .wp-block-cover,
.sppopups-content .wp-block-columns {
	max-width: 100%;
	box-sizing: border-box;
}

@keyframes sppopups-fade-in {
	from {
		opacity: 0;
		transform: scale(0.95) translateY(-20px);
	}
	to {
		opacity: 1;
		transform: scale(1) translateY(0);
	}
}

.sppopups-close {
	position: absolute;
	top: 16px;
	right: 16px;
	background: rgba(255, 255, 255, 0.9);
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 50%;
	cursor: pointer;
	padding: 8px;
	color: #666;
	transition: all 0.2s ease;
	z-index: 10;
	line-height: 1;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	/* Larger touch target for mobile */
	min-width: 44px;
	min-height: 44px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Hide icon close button if setting is disabled */
.sppopups-modal:not([data-show-icon-close="true"]) .sppopups-close {
	display: none;
}

.sppopups-close:hover {
	color: #000;
	background: rgba(255, 255, 255, 1);
	transform: scale(1.1);
}

.sppopups-close:active {
	transform: scale(0.95);
}

.sppopups-close:focus {
	outline: 2px solid #5E53C0;
	outline-offset: 2px;
}

.sppopups-close svg {
	width: 20px;
	height: 20px;
}

.sppopups-content {
	width: 100%;
	position: relative;
	z-index: 1;
	/* 
	 * Overflow behavior: auto enables scrollbar only when content exceeds available space.
	 * This works because:
	 * - Small content: card/container grow naturally, no scrollbar needed
	 * - Tall content: container hits max-height, card constrained, content scrolls
	 */
	overflow-y: auto;
	overflow-x: hidden;
	/* 
	 * Flex: 1 allows content to fill available space in flex column.
	 * min-height: 0 is CRITICAL - without it, flex items won't shrink below content size,
	 * preventing scrolling. This is a flexbox quirk that must be set.
	 */
	flex: 1 1 auto;
	min-height: 0;

	/* Smooth scrolling on iOS */
	-webkit-overflow-scrolling: touch;
	/* Better scrollbar appearance */
	scrollbar-width: thin;
	scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}

.sppopups-content > *:first-child {
	padding: 5%;
}

/* Remove padding for gallery image wrapper */
.sppopups-content > .sppopups-gallery-image-wrapper {
	padding: 0;
}

.sppopups-loading {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 60px 20px;
	text-align: center;
}

.sppopups-loading p {
	margin-top: 20px;
	color: #666;
	font-size: 16px;
	margin-bottom: 0;
}

.sppopups-spinner {
	width: 50px;
	height: 50px;
	border: 4px solid #f3f3f3;
	border-top: 4px solid #5E53C0;
	border-radius: 50%;
	animation: sppopups-spin 1s linear infinite;
}

@keyframes sppopups-spin {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

.sppopups-modal.active {
	display: flex;
}

body.sppopups-open {
	overflow: hidden;
	/* Prevent body scroll on mobile */
	position: fixed;
	width: 100%;
	height: 100%;
}

/* Responsive breakpoints */

/* Small devices (phones, 480px and down) */
@media screen and (max-width: 480px) {
	.sppopups-modal {
		padding: 10px;
		padding-top: max(10px, env(safe-area-inset-top));
		padding-bottom: max(10px, env(safe-area-inset-bottom));
		padding-left: max(10px, env(safe-area-inset-left));
		padding-right: max(10px, env(safe-area-inset-right));
	}

	.sppopups-container {
		max-width: 100%;
		/* Use CSS variable if set (percentage converted to vh), otherwise calculate from viewport */
		max-height: var(--sppopups-max-height-vh, calc(100vh - max(20px, env(safe-area-inset-top)) - max(20px, env(safe-area-inset-bottom))));
		border-radius: var(--sppopups-border-radius, 6px);
	}

	.sppopups-container::before {
		border-radius: calc(var(--sppopups-border-radius, 6px) + 3px);
	}

	.sppopups-card {
		box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
	}

	.sppopups-content {
		padding: 20px 16px;
	}

	.sppopups-footer {
		padding: 12px 16px;
	}

	.sppopups-close {
		top: 12px;
		right: 12px;
		width: 44px;
		height: 44px;
		padding: 10px;
		background: rgba(255, 255, 255, 0.95);
	}

	.sppopups-close svg {
		width: 24px;
		height: 24px;
	}

	.sppopups-loading {
		padding: 40px 16px;
	}

	.sppopups-loading p {
		font-size: 14px;
	}
}

/* Medium devices (tablets, 481px to 768px) */
@media screen and (min-width: 481px) and (max-width: 768px) {
	.sppopups-modal {
		padding: 15px;
	}

	.sppopups-container {
		max-width: 90%;
		/* Use CSS variable if set (percentage converted to vh), otherwise use 85vh */
		max-height: var(--sppopups-max-height-vh, 85vh);
	}

	.sppopups-content {
		padding: 24px;
	}

	.sppopups-footer {
		padding: 14px 24px;
	}
}

/* Large devices (desktops, 769px and up) */
@media screen and (min-width: 769px) {
	.sppopups-container {
		max-width: var(--sppopups-max-width, 600px);
	}
}

/* Extra large devices (large desktops, 1200px and up) */
@media screen and (min-width: 1200px) {
	.sppopups-container {
		max-width: 700px;
	}
}

/* Landscape orientation on mobile */
@media screen and (max-height: 500px) and (orientation: landscape) {
	.sppopups-modal {
		padding: 10px;
		align-items: flex-start;
		padding-top: max(10px, env(safe-area-inset-top));
	}

	.sppopups-container {
		/* Use CSS variable if set (percentage converted to vh), otherwise calculate from viewport */
		max-height: var(--sppopups-max-height-vh, calc(100vh - max(20px, env(safe-area-inset-top)) - max(20px, env(safe-area-inset-bottom))));
		margin-top: 10px;
		border-radius: var(--sppopups-border-radius, 6px);
	}

	.sppopups-container::before {
		border-radius: calc(var(--sppopups-border-radius, 6px) + 3px);
	}

	.sppopups-content {
		padding: 16px;
	}

	.sppopups-footer {
		padding: 12px 16px;
	}
}

/* High DPI displays */
@media screen and (-webkit-min-device-pixel-ratio: 2),
	screen and (min-resolution: 192dpi) {
	.sppopups-card {
		box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
	}
}

/* Prevent Kadence editor hover styles from appearing on frontend */
/* These styles only apply when our modal CSS is loaded (frontend only) */
/* Target frontend only by excluding block editor contexts */
body:not(.block-editor-page):not(.wp-admin) .wp-block-kadence-column.is-selected,
body:not(.block-editor-page):not(.wp-admin) .wp-block-kadence-column.has-child-selected,
body:not(.block-editor-page):not(.wp-admin) .wp-block-kadence-column:hover,
body:not(.block-editor-page):not(.wp-admin) .wp-block-kadence-rowlayout.is-selected,
body:not(.block-editor-page):not(.wp-admin) .wp-block-kadence-rowlayout.has-child-selected,
body:not(.block-editor-page):not(.wp-admin) .wp-block-kadence-rowlayout:hover,
body:not(.block-editor-page):not(.wp-admin) [class*="wp-block-kadence"].is-selected,
body:not(.block-editor-page):not(.wp-admin) [class*="wp-block-kadence"].has-child-selected,
body:not(.block-editor-page):not(.wp-admin) [class*="wp-block-kadence"]:hover,
body:not(.block-editor-page):not(.wp-admin) .kt-inside-inner-col.is-selected,
body:not(.block-editor-page):not(.wp-admin) .kt-inside-inner-col.has-child-selected,
body:not(.block-editor-page):not(.wp-admin) .kt-inside-inner-col:hover {
	outline: none !important;
	outline-offset: 0 !important;
	box-shadow: none !important;
}

/* Disable editor hover states for all blocks on frontend */
body:not(.block-editor-page):not(.wp-admin) .wp-block.is-selected,
body:not(.block-editor-page):not(.wp-admin) .wp-block.has-child-selected,
body:not(.block-editor-page):not(.wp-admin) .wp-block:hover,
body:not(.block-editor-page):not(.wp-admin) [class*="wp-block"].is-selected,
body:not(.block-editor-page):not(.wp-admin) [class*="wp-block"].has-child-selected,
body:not(.block-editor-page):not(.wp-admin) [class*="wp-block"]:hover {
	outline: none !important;
	box-shadow: none !important;
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
	.sppopups-card {
		animation: none;
	}

	.sppopups-close {
		transition: none;
	}

	.sppopups-close:hover {
		transform: none;
	}
}

/* Gallery Modal Styles */

/* Gallery image container - holds crossfade layers */
.sppopups-gallery-image-container {
	position: relative;
	width: 100%;
	min-height: 200px;
	height: auto; /* Allow height to be set by JS */
	transition: height 0.5s cubic-bezier(0.4, 0, 0.2, 1), min-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
	/* Remove flexbox centering - image will fill container exactly */
}

/* Gallery image wrapper - each layer in crossfade */
.sppopups-gallery-image-wrapper {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	/* Remove flexbox centering - image will fill container exactly */
	padding: 0;
	box-sizing: border-box;
	opacity: 0;
	transition: opacity var(--sppopups-gallery-transition-duration, 500ms) cubic-bezier(0.4, 0, 0.2, 1);
	pointer-events: none;
	z-index: 1;
}

/* Disable crossfade transition if setting is disabled */
.sppopups-modal:not([data-gallery-crossfade="true"]) .sppopups-gallery-image-wrapper {
	transition: opacity 0ms;
}

/* Active/visible layer */
.sppopups-gallery-image-wrapper.active {
	opacity: 1;
	pointer-events: auto;
	z-index: 1;
}

/* Layer fading in (on top during transition) */
.sppopups-gallery-image-wrapper.fading-in {
	opacity: 0;
	z-index: 2;
	pointer-events: none;
}

.sppopups-gallery-image-wrapper.fading-in.active {
	opacity: 1;
	pointer-events: auto; /* Enable interactions when active */
}

/* Layer fading out (below during transition) */
.sppopups-gallery-image-wrapper.fading-out {
	opacity: 0;
	z-index: 1;
	pointer-events: none;
}

.sppopups-gallery-image {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	margin: 0;
	padding: 0;
}

/* Ensure gallery image container has no padding and fills content area */
.sppopups-modal:has(.sppopups-gallery-image-container) .sppopups-content {
	padding: 0;
	overflow: hidden; /* Prevent scrollbars during transitions */
}

.sppopups-modal:has(.sppopups-gallery-image-container) .sppopups-content > .sppopups-gallery-image-container {
	padding: 0;
	margin: 0;
}

/* Gallery navigation buttons (overlay) - hidden by default, show on hover/touch */
.sppopups-gallery-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: rgba(255, 255, 255, 0.9);
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 50%;
	cursor: pointer;
	padding: 12px;
	color: #666;
	transition: all 0.2s ease;
	z-index: 10;
	line-height: 1;
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	opacity: 0;
	pointer-events: auto; /* Buttons should always be clickable when visible */
}

/* Show navigation buttons on hover or touch */
.sppopups-gallery-image-wrapper:hover .sppopups-gallery-nav,
.sppopups-gallery-nav:hover {
	opacity: 1;
	pointer-events: auto;
}

/* Show on touch devices */
@media (hover: none) and (pointer: coarse) {
	.sppopups-gallery-nav {
		opacity: 1;
		pointer-events: auto;
	}
}

/* Always show navigation buttons if hover setting is disabled */
.sppopups-modal:not([data-gallery-nav-hover="true"]) .sppopups-gallery-nav {
	opacity: 1;
	pointer-events: auto;
}

.sppopups-gallery-nav:hover {
	color: #000;
	background: rgba(255, 255, 255, 1);
	transform: translateY(-50%) scale(1.1);
}

.sppopups-gallery-nav:active {
	transform: translateY(-50%) scale(0.95);
}

.sppopups-gallery-nav:focus {
	outline: 2px solid #5E53C0;
	outline-offset: 2px;
}

.sppopups-gallery-nav svg {
	width: 24px;
	height: 24px;
}

.sppopups-gallery-nav--prev {
	left: 20px;
}

.sppopups-gallery-nav--next {
	right: 20px;
}

/* Gallery footer - smart flex layout */
.sppopups-gallery-footer {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 16px;
	width: 100%;
}

/* Adjust grid when navigation group is empty (hidden) */
.sppopups-gallery-footer:has(.sppopups-gallery-nav-group:empty) {
	grid-template-columns: 1fr auto;
}

/* Adjust grid when close button is hidden */
.sppopups-gallery-footer:not(:has(.sppopups-close-footer)) {
	grid-template-columns: auto 1fr;
}

/* Adjust grid when both navigation and close button are hidden */
.sppopups-gallery-footer:has(.sppopups-gallery-nav-group:empty):not(:has(.sppopups-close-footer)) {
	grid-template-columns: 1fr;
}

/* Fallback for browsers without :has() support */
.sppopups-gallery-footer .sppopups-gallery-nav-group:empty {
	display: none;
}

/* Navigation button group (left) */
.sppopups-gallery-nav-group {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}

/* Caption (center, flexible) */
.sppopups-gallery-caption {
	min-width: 0;
	color: #666;
	font-size: 14px;
	line-height: 1.5;
	text-align: center;
	padding: 0 16px;
	overflow: hidden;
	text-overflow: ellipsis;
	/* Allow multi-line for HTML content, but limit height */
	max-height: 3em;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	white-space: normal;
	word-wrap: break-word;
}

/* Hide captions if setting is disabled */
.sppopups-modal:not([data-gallery-show-captions="true"]) .sppopups-gallery-caption {
	display: none;
}

/* If caption contains HTML, allow it to display properly */
.sppopups-gallery-caption p {
	margin: 0;
	padding: 0;
}

.sppopups-gallery-caption p:first-child {
	margin-top: 0;
}

.sppopups-gallery-caption p:last-child {
	margin-bottom: 0;
}

/* If caption is empty, still take up space */
.sppopups-gallery-caption:empty {
	display: block;
}

/* Close button (right) */
.sppopups-gallery-footer .sppopups-close-footer {
	flex-shrink: 0;
	margin-left: auto;
}

/* Responsive: stack on small screens */
@media screen and (max-width: 480px) {
	.sppopups-gallery-footer {
		grid-template-columns: 1fr;
		grid-template-rows: auto auto auto;
		gap: 12px;
	}

	.sppopups-gallery-nav-group {
		justify-content: flex-start;
	}

	.sppopups-gallery-caption {
		text-align: left;
		padding: 0;
	}

	.sppopups-gallery-footer .sppopups-close-footer {
		margin-left: 0;
		width: 100%;
	}
}

/* Gallery footer navigation buttons - smaller, left-aligned */
.sppopups-gallery-nav-footer {
	background: none;
	border: 1px solid rgba(0, 0, 0, 0.2);
	border-radius: 4px;
	color: #666;
	font-size: 12px;
	cursor: pointer;
	padding: 6px 12px;
	transition: all 0.2s ease;
	text-decoration: none;
	font-family: inherit;
	line-height: 1.4;
	white-space: nowrap;
}

.sppopups-gallery-nav-footer:hover:not(:disabled) {
	color: #000;
	border-color: rgba(0, 0, 0, 0.4);
	background: rgba(0, 0, 0, 0.05);
}

.sppopups-gallery-nav-footer:focus {
	outline: 2px solid #5E53C0;
	outline-offset: 2px;
}

.sppopups-gallery-nav-footer:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* Gallery modal container - size is set dynamically via JavaScript based on sppopupModalSize setting */
/* No fixed max-width here - JavaScript will set it */

/* Gallery responsive styles */
@media screen and (max-width: 480px) {
	.sppopups-gallery-nav {
		width: 44px;
		height: 44px;
		padding: 10px;
	}

	.sppopups-gallery-nav--prev {
		left: 10px;
	}

	.sppopups-gallery-nav--next {
		right: 10px;
	}

	.sppopups-gallery-footer {
		flex-direction: column;
		gap: 12px;
	}

	.sppopups-gallery-nav-footer {
		width: 100%;
		justify-content: center;
	}

	.sppopups-gallery-caption {
		order: -1;
		width: 100%;
		padding: 0;
		font-size: 13px;
	}
}

@media screen and (min-width: 481px) and (max-width: 768px) {
	.sppopups-gallery-nav--prev {
		left: 15px;
	}

	.sppopups-gallery-nav--next {
		right: 15px;
	}
}

/* Gallery in landscape mode */
@media screen and (max-height: 500px) and (orientation: landscape) {
	.sppopups-gallery-image {
		max-height: 60vh;
	}

	.sppopups-gallery-nav {
		width: 40px;
		height: 40px;
		padding: 8px;
	}

	.sppopups-gallery-nav svg {
		width: 20px;
		height: 20px;
	}
}

/* Reduced motion for gallery */
@media (prefers-reduced-motion: reduce) {
	.sppopups-gallery-nav {
		transition: none;
	}

	.sppopups-gallery-nav:hover {
		transform: translateY(-50%);
	}

	.sppopups-gallery-nav-footer {
		transition: none;
	}

	.sppopups-gallery-image-wrapper {
		transition: none !important;
	}

	.sppopups-gallery-image {
		transition: none !important;
	}
}

/* Frontend gallery images - pointer cursor on hover */
/* Target gallery links with our data attribute */
figure[data-sppopup-gallery=true] figure {
	cursor: pointer;
}