/**
 * Nachbrand Google Reviews - Frontend CSS
 * Hauptsächlich kleine Tweaks für Swiper Pagination und Hover-Motion,
 * da der Großteil von Tailwind (utility classes) via Inline-Style und CDN kommt.
 */

.nachbrand-review-wrapper {
	perspective: 1200px;
	overflow: hidden; /* Verhindert horizontalen Coverflow-Overflow ohne !important */
}

/* Swiper auf overflow:visible setzen, damit box-shadow der Karten nicht abgeschnitten wird */
.nachbrand-review-wrapper .swiper {
	overflow: visible;
	/* Platz für Pagination-Dots unterhalb der Karten */
	padding-bottom: 48px;
}

.nachbrand-review-wrapper .swiper-slide {
	/* Hover Neigung (Tilt-Effekt Basis) -> Fluid Motion */
	will-change: transform;
	transition: filter 0.3s ease-in-out;
}

.nachbrand-review-wrapper .swiper-slide:hover {
	/* Mach die Karte leicht heller bei Hover */
	filter: brightness(1.05);
}

/* Pagination Styling passend zum Design */
.nachbrand-review-wrapper .swiper-pagination-bullet {
	background-color: var(--nr-bg-end);
	opacity: 0.5;
	transition: all 0.3s ease;
}

.nachbrand-review-wrapper .swiper-pagination-bullet-active {
	background-color: var(--nr-bg-start);
	opacity: 1;
	transform: scale(1.2);
}

/* Error Message */
.nachbrand-error {
	padding: 20px;
	background: #fff3cd;
	color: #856404;
	border-radius: 8px;
	border: 1px solid #ffeeba;
	text-align: center;
}

/* === 3D Card Deck === */

.nachbrand-deck-wrapper {
	display: flex;
	justify-content: center;
	/* Override: overflow:hidden vom Wrapper abschalten, damit Fly-Out und Stack-Peek sichtbar bleiben */
	overflow: visible !important;
}

.nachbrand-card-deck {
	/* Grid: alle Karten übereinander in derselben Zelle → Container hat automatisch die Höhe der größten Karte */
	display: grid;
	grid-template-columns: auto;
}

.nachbrand-deck-card {
	/* Alle Karten in dieselbe Grid-Zelle legen */
	grid-row: 1;
	grid-column: 1;
	transform-origin: center center;
	transition: transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94),
	            opacity 0.4s ease;
	will-change: transform, opacity;
	pointer-events: none; /* JS setzt die oberste Karte auf auto */
	user-select: none;
}

/* Die oberste Karte zeigt Klick-Cursor (wird per JS per inline-style gesetzt) */

/* Fly-Out Animationen */
.nachbrand-deck-card.nr-fly-left {
	transform: translateX(-160%) rotate(-28deg) !important;
	opacity: 0 !important;
}
.nachbrand-deck-card.nr-fly-right {
	transform: translateX(160%) rotate(28deg) !important;
	opacity: 0 !important;
}
.nachbrand-deck-card.nr-fly-up {
	transform: translateY(-160%) rotate(-12deg) !important;
	opacity: 0 !important;
}
.nachbrand-deck-card.nr-fly-down {
	transform: translateY(160%) rotate(12deg) !important;
	opacity: 0 !important;
}