/* Zoomable Images CSS */

.zoomable-image {
	position: relative;
	cursor: zoom-in;
	overflow: hidden;
	width: 100%;
}

.zoomable-image img {
	transition: transform 0.3s ease;
	display: block;
	width: 100%;
	height: auto;
}

.zoomable-image.zoomed {
	cursor: zoom-out;
}

.zoomable-image.zoomed img {
	transform: scale(1.5); /* Default zoom level */
}

/* Custom zoom levels */
.zoomable-image.zoom-level-1\.5.zoomed img {
	transform: scale(1.5);
}

.zoomable-image.zoom-level-2.zoomed img {
	transform: scale(2);
}

.zoomable-image.zoom-level-2\.5.zoomed img {
	transform: scale(2.5);
}

.zoomable-image.zoom-level-3.zoomed img {
	transform: scale(3);
}

.zoomable-image.zoom-level-3\.5.zoomed img {
	transform: scale(3.5);
}

.zoomable-image.zoom-level-4.zoomed img {
	transform: scale(4);
}

.zoom-icon {
	position: absolute;
	bottom: 10px;
	right: 10px;
	border-radius: 50%;
	width: 60px;
	height: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0.8;
	transition: opacity 0.3s ease;
	pointer-events: none;
	z-index: 10;
	/* Gradient background for icon shape */
	background: var(--wp--preset--gradient--primary-gradient);
	/* Ensure icon content (SVG) uses gradient as fill */
}
.zoom-icon svg {
	width: 23.25px;
	height: 23.25px;
	display: block;
	fill: url(#zoom-gradient), var(--wp--preset--color--primary-red, #e60023);
}

.zoomable-image:hover .zoom-icon {
	opacity: 1;
}

.zoomable-image.zoomed .zoom-icon {
	opacity: 0;
}

.zoom-icon svg {
	width: 23.25px;
	height: 23.25px;
	display: block;
}

/* Mobile touch support */
@media (max-width: 768px) {
	.zoomable-image {
		cursor: pointer;
	}
	
	.zoomable-image.zoomed {
		cursor: pointer;
	}
}

/* Editor styles */
.block-editor-block-list__block .zoomable-image {
	cursor: zoom-in;
}

.block-editor-block-list__block .zoomable-image.zoomed {
	cursor: zoom-out;
}