/*
FlipEm
Copyright (c) 2026 Andrei Petcu
Author: Andrei Petcu <hello@andreipetcu.com>
License: GNU General Public License v2.0 (GPLv2)
❤︎: FFF
*/

.flipem-card {
	position: relative;
	display: block;
	width: 320px;
	height: 220px;
	max-width: 100%;
	perspective: 1200px;
	box-sizing: border-box;
}

.flipem-inner {
	position: relative;
	width: 100%;
	height: 100%;
	transition: transform 0.65s ease;
	transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
}

.flipem-face {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	box-sizing: border-box;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
}

.flipem-front {
	z-index: 2;
	transform: translateZ(1px);
}

.flipem-dir-right .flipem-back {
	transform: rotateY(180deg) translateZ(1px);
}

.flipem-dir-left .flipem-back {
	transform: rotateY(-180deg) translateZ(1px);
}

.flipem-dir-top .flipem-back {
	transform: rotateX(180deg) translateZ(1px);
}

.flipem-dir-bottom .flipem-back {
	transform: rotateX(-180deg) translateZ(1px);
}

.flipem-dir-right .flipem-inner.flipem-is-flipped {
	transform: rotateY(180deg);
}

.flipem-dir-left .flipem-inner.flipem-is-flipped {
	transform: rotateY(-180deg);
}

.flipem-dir-top .flipem-inner.flipem-is-flipped {
	transform: rotateX(-180deg);
}

.flipem-dir-bottom .flipem-inner.flipem-is-flipped {
	transform: rotateX(180deg);
}

.flipem-type-over {
	cursor: default;
}

.flipem-type-click {
	cursor: pointer;
}

.flipem-type-button .flipem-flip-button {
	cursor: pointer;
}

.flipem-type-button .flippedwp-flip-button {
	cursor: pointer;
}

.flipem-face img {
	max-width: 100%;
	height: auto;
}

@media (max-width: 767px) {
	.flipem-card {
		max-width: 100%;
	}
}