/**
 * Price Comparison Pro - Frontend Styles
 *
 * @package PriceComparisonPro
 * @since 1.0.0
 */

/* ========================================
   Tooltips
   ======================================== */

[data-tooltip] {
	position: relative;
	cursor: help;
}

.pcp-tooltip-wrapper {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

[data-tooltip]::before {
	content: attr(data-tooltip);
	position: absolute;
	bottom: 125%;
	left: 50%;
	transform: translateX(-50%);
	padding: var(--pcp-spacing-m) 0.75rem;
	background: var(--pcp-color-tooltip-bg);
	color: var(--pcp-color-tooltip-text);
	font-size: var(--pcp-font-size-xs);
	line-height: var(--pcp-line-height-s);
	white-space: nowrap;
	border-radius: var(--pcp-radius-s);
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--pcp-transition-fast), transform var(--pcp-transition-fast);
	z-index: var(--pcp-z-tooltip);
	box-shadow: var(--pcp-shadow-lg);
}

[data-tooltip]::after {
	content: '';
	position: absolute;
	bottom: 60%;
	left: 50%;
	transform: translateX(-50%);
	border: 5px solid transparent;
	border-top-color: var(--pcp-color-tooltip-bg);
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--pcp-transition-fast), transform var(--pcp-transition-fast);
	z-index: var(--pcp-z-tooltip);
}

.pcp-free-delivery[data-tooltip]::after {
	bottom: 72%;
}

.pcp-price-discount[data-tooltip]::before {
	width: 100%;
	max-width: 240px;
	text-align: center;
	white-space: initial;
}

.pcp-price-discount[data-tooltip]::after {
	bottom: 90%;
}

[data-tooltip]:hover::before,
[data-tooltip]:hover::after {
	opacity: 1;
	transform: translateX(-50%) translateY(-4px);
}

/* Tooltip für preis-discount (längerer Text) */
.preis-discount[data-tooltip]::before {
	white-space: normal;
	max-width: 250px;
	text-align: center;
}

/* ========================================
   Loading Animation
   ======================================== */

.pcp-loading-overlay {
	position: fixed;
	background: var(--pcp-color-overlay);
	backdrop-filter: var(--pcp-blur-overlay);
	z-index: var(--pcp-z-overlay);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--pcp-transition-fast), visibility var(--pcp-transition-fast);
	pointer-events: none;
}

.pcp-loading-overlay.active {
	opacity: 1;
	visibility: visible;
}

.pcp-loading-spinner {
	width: var(--pcp-spinner-size);
	height: var(--pcp-spinner-size);
	border: var(--pcp-spinner-border-width) solid var(--pcp-color-border);
	border-top-color: var(--pcp-color-primary);
	border-radius: var(--pcp-radius-full);
	animation: pcpSpin var(--pcp-transition-spin);
}

@keyframes pcpSpin {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

/* ========================================
   Responsive Breakpoints
   ======================================== */

@media (max-width: 1140px) {
	.pcp-details-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 767px) {
	.pcp-details-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.pcp-detail-item {
		background: var(--pcp-color-bg-alt);
	}
}

@media (max-width: 479px) {
	.pcp-details-grid {
		grid-template-columns: 1fr;
	}
}

/* ========================================
   Top Products Stack
   ======================================== */

.pcp-products-stack {
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	position: relative;
	height: var(--pcp-stack-image-size);
	min-width: var(--pcp-stack-image-size);
}

.pcp-stack-image,
.pcp-stack-badge {
	width: var(--pcp-stack-image-size);
	height: var(--pcp-stack-image-size);
	min-width: var(--pcp-stack-image-size);
	border-radius: var(--pcp-radius-full);
	border: var(--pcp-stack-border-width) solid var(--pcp-color-white);
	background: var(--pcp-color-white);
	position: relative;
	transition: transform var(--pcp-transition-fast);
	flex-shrink: 0;
	box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.08);
}

/* Only apply overflow:hidden to badge, not images (for tooltips) */
.pcp-stack-badge {
	overflow: hidden;
}

/* Z-index stacking for each image */
.pcp-stack-image:nth-child(1) {
	z-index: 5;
	transform: rotate(-5deg) scale(1.2);
	margin-top: 4px;
}

.pcp-stack-image:nth-child(2) {
	z-index: 4;
}

.pcp-stack-image:nth-child(3) {
	z-index: 3;
}

.pcp-stack-image:nth-child(4) {
	z-index: 2;
}

.pcp-stack-image:nth-child(5) {
	z-index: 1;
}

.pcp-stack-image:nth-child(6) {
	z-index: 0;
}

.pcp-stack-image:not(:first-child),
.pcp-stack-badge {
	margin-left: var(--pcp-stack-overlap);
}

.pcp-stack-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: var(--pcp-radius-full);
}

.pcp-stack-badge {
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	border-radius: 0;
	box-shadow: none;
	flex-shrink: 0;
	width: fit-content;
	height: auto;
	padding-left: 1.5rem;
}

.pcp-stack-badge span {
	color: var(--pcp-color-faded);
	font-weight: var(--pcp-font-weight-normal);
	font-size: var(--pcp-font-size-s);
	line-height: var(--pcp-line-height-s);
	padding-left: var(--pcp-spacing-s);
}

/* Hover effect - first image gets hover effect and shows title */
.pcp-stack-image:nth-child(1):hover {
	transform: rotate(-5deg) scale(1.18) translateY(-8px);
	z-index: var(--pcp-z-stack-hover) !important;
	box-shadow: var(--pcp-shadow-xl);
}

.pcp-stack-image:nth-child(2):hover {
	transform: translateY(-8px) scale(1.08) rotate(3deg);
	z-index: var(--pcp-z-stack-hover) !important;
	box-shadow: var(--pcp-shadow-xl);
}

.pcp-stack-image:nth-child(3):hover {
	transform: translateY(-8px) scale(1.08) rotate(-5deg);
	z-index: var(--pcp-z-stack-hover) !important;
	box-shadow: var(--pcp-shadow-xl);
}

.pcp-stack-image:nth-child(4):hover {
	transform: translateY(-8px) scale(1.08) rotate(4deg);
	z-index: var(--pcp-z-stack-hover) !important;
	box-shadow: var(--pcp-shadow-xl);
}

.pcp-stack-image:nth-child(5):hover {
	transform: translateY(-8px) scale(1.08) rotate(-3deg);
	z-index: var(--pcp-z-stack-hover) !important;
	box-shadow: var(--pcp-shadow-xl);
}

.pcp-stack-image:nth-child(6):hover {
	transform: translateY(-8px) scale(1.08) rotate(5deg);
	z-index: var(--pcp-z-stack-hover) !important;
	box-shadow: var(--pcp-shadow-xl);
}

/* Tooltip */
.pcp-stack-image[data-tooltip]::after {
	content: attr(data-tooltip);
	position: absolute;
	bottom: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%) translateY(10px);
	background: var(--pcp-color-tooltip-dark-bg);
	color: var(--pcp-color-white);
	padding: 2px 10px;
	border-radius: 6px;
	font-size: var(--pcp-font-size-xxs);
	font-weight: var(--pcp-font-weight-normal);
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--pcp-transition-fast), transform var(--pcp-transition-fast), visibility var(--pcp-transition-fast);
	z-index: var(--pcp-z-tooltip);
	box-shadow: var(--pcp-shadow-2xl);
}

/* Tooltip arrow */
.pcp-stack-image[data-tooltip]::before {
	content: '';
	position: absolute;
	bottom: calc(100% + 1px);
	left: 50%;
	transform: translateX(-50%) translateY(10px);
	width: 0;
	height: 0;
	padding: 0;
	background: none;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-top: 8px solid var(--pcp-color-tooltip-dark-bg);
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--pcp-transition-fast), transform var(--pcp-transition-fast), visibility var(--pcp-transition-fast);
	z-index: var(--pcp-z-tooltip);
}

/* First image tooltip - show price by default */
.pcp-stack-image--first::after {
	content: attr(data-tooltip-price) !important;
	opacity: 1 !important;
	visibility: visible !important;
	transform: translateX(-50%) translateY(0) !important;
}

.pcp-stack-image--first::before {
	opacity: 1 !important;
	visibility: visible !important;
	transform: translateX(-50%) translateY(0) !important;
}

/* Show tooltip on hover for specific image */
.pcp-stack-image:hover::after,
.pcp-stack-image:hover::before {
	opacity: 1 !important;
	visibility: visible !important;
	transform: translateX(-50%) translateY(0) !important;
}

/* First image on hover - show title instead of price */
.pcp-stack-image--first:hover::after {
	content: attr(data-tooltip) !important;
	opacity: 1 !important;
	visibility: visible !important;
}

.pcp-stack-image--first:hover::before {
	opacity: 1 !important;
	visibility: visible !important;
}

/* Hide first image tooltip when hovering over OTHER images (not the first one) */
.pcp-stack-image:not(.pcp-stack-image--first):hover~.pcp-stack-image--first::after,
.pcp-stack-image:not(.pcp-stack-image--first):hover~.pcp-stack-image--first::before {
	opacity: 0 !important;
	visibility: hidden !important;
}

/* Alternative: Hide when hovering over siblings that come after the first image */
.pcp-products-stack:has(.pcp-stack-image:not(.pcp-stack-image--first):hover) .pcp-stack-image--first::after,
.pcp-products-stack:has(.pcp-stack-image:not(.pcp-stack-image--first):hover) .pcp-stack-image--first::before {
	opacity: 0 !important;
	visibility: hidden !important;
}

/* Responsive adjustments */
@media (max-width: 600px) {
	.pcp-products-stack {
		height: var(--pcp-stack-image-size-mobile);
		min-width: var(--pcp-stack-image-size-mobile);
	}

	.pcp-stack-image,
	.pcp-stack-badge {
		width: var(--pcp-stack-image-size-mobile);
		height: var(--pcp-stack-image-size-mobile);
		min-width: var(--pcp-stack-image-size-mobile);
		border-width: var(--pcp-stack-border-width-mobile);
	}

	.pcp-stack-image:not(:first-child),
	.pcp-stack-badge {
		margin-left: var(--pcp-stack-overlap-mobile);
	}

	.pcp-stack-badge span {
		font-size: var(--pcp-font-size-xs);
	}
}