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

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

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

[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);
}

/* ========================================
   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;
	}
}

/* ========================================
   Comparison Images ([preisvergleich_bilder])
   ======================================== */

.pcp-images {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.pcp-card__hero {
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-content-bg-alt) !important;
	border-radius: .7rem;
	overflow: hidden;
}

.pcp-card__hero img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pcp-card__thumbs {
	display: flex;
	gap: var(--pcp-spacing-s);
	padding: var(--pcp-spacing-m);
}

.pcp-card__thumb {
	flex: 1 1 0;
	max-width: 52px;
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: var(--pcp-color-bg);
	border: 1px solid var(--pcp-color-border);
	border-radius: .7rem;
	font-size: var(--pcp-font-size-xs);
}

.pcp-card__thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.pcp-card__thumb--more {
	font-weight: var(--pcp-font-weight-semibold);
	color: var(--pcp-color-heading);
}