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

/* ========================================
   Counter & Header
   ======================================== */

.pcp-table-info {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--pcp-spacing-l);
	margin-bottom: var(--pcp-spacing-l);
	flex-wrap: wrap;
}

.preisvergleich-counter {
	font-size: var(--pcp-font-size-base) !important;
	font-weight: var(--pcp-font-weight-light);
	color: var(--pcp-color-faded);
	margin: 0;
}

.preisvergleich-counter span {
	font-weight: var(--pcp-font-weight-normal);
	color: var(--pcp-color-heading);
}

.preisvergleich-counter .pcp-counter-updated {
	font-size: var(--pcp-font-size-xs);
	font-weight: var(--pcp-font-weight-light);
	color: var(--pcp-color-faded);
}

/* Verified Badge */
.pcp-verified-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--pcp-spacing-s);
	padding: var(--pcp-spacing-s) var(--pcp-spacing-m);
	background: rgba(46, 209, 49, 0.1);
	border-radius: var(--pcp-radius-m);
	font-size: var(--pcp-font-size-s);
	font-weight: var(--pcp-font-weight-semibold);
	color: var(--pcp-color-primary);
	white-space: nowrap;
	display: none;
}

.pcp-verified-badge i {
	font-size: var(--pcp-font-size-base);
}

/* ========================================
   Controls Container (Filter, Toggle, Sort)
   ======================================== */

.pcp-controls-container {
	margin-bottom: var(--pcp-spacing-l);
}

.pcp-controls-wrapper {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	gap: var(--pcp-spacing-l);
	flex-wrap: wrap;
}

.pcp-controls-left {
	display: flex;
	gap: var(--pcp-spacing-l);
	flex-wrap: wrap;
}

/* ========================================
   Filter Group
   ======================================== */

.pcp-filter-group {
	display: flex;
	flex-direction: row;
	gap: var(--pcp-spacing-s);
	flex-wrap: wrap;
}

.pcp-filter-btn {
	cursor: pointer;
	transition: all var(--pcp-transition-normal);
	background: var(--pcp-color-bg);
	font-size: var(--pcp-font-size-xs);
	color: var(--pcp-color-gray) !important;
	border: 1px solid var(--pcp-color-border);
	border-radius: var(--pcp-radius-m);
	padding: var(--pcp-spacing-xs) var(--pcp-spacing-l);
}

.no-touch .pcp-filter-btn:hover {
	background: var(--pcp-color-bg);
	color: var(--pcp-alt-color-bg) !important;
	border: 1px solid var(--pcp-alt-color-bg);
}

.pcp-filter-btn.active {
	background: var(--pcp-color-bg);
	color: var(--pcp-alt-color-bg) !important;
	border: 1px solid var(--pcp-alt-color-bg);
}

/* ========================================
   Discount Toggle
   ======================================== */

.pcp-discount-toggle {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--pcp-spacing-m);
	position: relative;
	background: var(--pcp-color-bg);
	padding: var(--pcp-spacing-s) var(--pcp-spacing-l);
	border-radius: var(--pcp-radius-m);
	border: 1px solid var(--pcp-color-secondary);
}

/* Slider Animation - Move from ON to OFF (reverse) */
.pcp-toggle-slider.pcp-animate {
	animation: pcpSliderMove 1.2s ease-in-out;
}

.pcp-toggle-slider.pcp-animate::before {
	animation: pcpSliderBallMove 1.2s ease-in-out;
}

@keyframes pcpSliderMove {

	0%,
	100% {
		background-color: var(--pcp-color-secondary);
	}

	30%,
	70% {
		background-color: var(--pcp-alt-color-bg-alt);
	}
}

@keyframes pcpSliderBallMove {

	0%,
	100% {
		transform: translateX(var(--pcp-toggle-slider-travel));
	}

	30%,
	70% {
		transform: translateX(0);
	}
}

.pcp-discount-label {
	font-size: var(--pcp-font-size-xs);
	color: var(--pcp-color-faded);
	font-weight: var(--pcp-font-weight-normal);
	cursor: pointer;
}

.pcp-info-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.pcp-info-icon i {
	font-size: var(--pcp-font-size-s);
	color: var(--pcp-color-faded);
}

.pcp-toggle-switch {
	position: relative;
	display: inline-block;
	width: var(--pcp-toggle-width);
	height: var(--pcp-toggle-height);
	cursor: pointer;
}

.pcp-toggle-switch input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	margin: 0;
}

.pcp-toggle-slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: var(--pcp-alt-color-bg-alt);
	transition: var(--pcp-transition-normal);
	border-radius: var(--pcp-toggle-height);
}

.pcp-toggle-slider:before {
	position: absolute;
	content: "";
	height: var(--pcp-toggle-slider-size);
	width: var(--pcp-toggle-slider-size);
	left: var(--pcp-toggle-slider-offset);
	bottom: var(--pcp-toggle-slider-offset);
	background-color: var(--pcp-color-white);
	transition: var(--pcp-transition-normal);
	border-radius: var(--pcp-radius-full);
	box-shadow: var(--pcp-shadow-sm);
}

.pcp-toggle-input:checked+.pcp-toggle-slider {
	background-color: var(--pcp-color-secondary);
}

.pcp-toggle-input:focus+.pcp-toggle-slider {
	box-shadow: none;
}

.pcp-toggle-input:checked+.pcp-toggle-slider:before {
	transform: translateX(var(--pcp-toggle-slider-travel));
}

.pcp-toggle-input:hover+.pcp-toggle-slider {
	opacity: 1;
}

/* ========================================
   Sort Group
   ======================================== */

.pcp-sort-group {
	display: flex;
	flex-direction: row;
	gap: var(--pcp-spacing-s);
	align-items: center;
}

.pcp-sort-label {
	font-size: var(--pcp-font-size-xs);
	color: var(--pcp-color-faded);
	font-weight: var(--pcp-font-weight-normal);
}

.pcp-sort-btn {
	cursor: pointer;
	transition: all var(--pcp-transition-normal);
	background: var(--pcp-color-bg);
	font-size: var(--pcp-font-size-xs);
	color: var(--pcp-color-gray) !important;
	border: 1px solid var(--pcp-color-border);
	border-radius: var(--pcp-radius-m);
	padding: var(--pcp-spacing-s) var(--pcp-spacing-l);
}

.no-touch .pcp-sort-btn:hover {
	background: var(--pcp-color-bg);
	color: var(--pcp-alt-color-bg) !important;
	border: 1px solid var(--pcp-alt-color-bg);
}

.pcp-sort-btn.active {
	background: var(--pcp-color-bg);
	color: var(--pcp-alt-color-bg) !important;
	border: 1px solid var(--pcp-alt-color-bg);
}

/* ========================================
   Table Container
   ======================================== */

.pcp-table {
	position: relative;
	background: var(--pcp-color-bg-alt);
	border: 1px solid var(--pcp-color-border);
	border-radius: var(--pcp-radius-l);
	overflow: hidden;
}

/* ========================================
   Table Header Row
   ======================================== */

.pcp-table-header {
	display: flex;
	align-items: center;
	gap: var(--pcp-spacing-m);
	padding: var(--pcp-spacing-m);
	background: var(--pcp-color-bg);
	border-bottom: 1px solid var(--pcp-color-border);
}

.pcp-table-header>div {
	display: flex;
	align-items: start;
	line-height: var(--pcp-line-height-s);
	font-size: var(--pcp-font-size-xs);
	color: var(--pcp-color-faded)
}

.pcp-table-header .pcp-col-image {
	flex: var(--pcp-col-image);
	aspect-ratio: auto;
}

.pcp-table-header .pcp-col-name {
	flex: var(--pcp-col-name);
}

.pcp-table-header .pcp-col-price {
	flex: var(--pcp-col-price);
	flex-direction: row;
	gap: var(--pcp-spacing-s);
}

.pcp-table-header .pcp-col-price span {
	display: inline;
}

.pcp-table-header .pcp-col-payment {
	flex: var(--pcp-col-payment);
}

.pcp-table-header .pcp-col-delivery {
	flex: var(--pcp-col-delivery);
}

.pcp-table-header .pcp-col-shop {
	flex: var(--pcp-col-shop);
}

.pcp-table-header .pcp-col-link {
	flex: var(--pcp-col-link);
}

/* ========================================
   Product Row
   ======================================== */

.pcp-product-row {
	display: flex;
	align-items: center;
	gap: var(--pcp-spacing-m);
	padding: var(--pcp-spacing-l) var(--pcp-spacing-l);
	background: var(--pcp-color-bg);
	border-bottom: 1px solid var(--pcp-color-border);
}

/* Recommended row = manually selected paid placement (pinned first).
   Kept subtle on purpose: a light tint plus a thin left accent, no promo badge. */
.pcp-product-row--recommended {
	background: rgba(46, 209, 49, 0.06);
	box-shadow: inset 3px 0 0 var(--pcp-color-primary);
}

/* Small, unobtrusive "Anzeige" disclosure for the paid placement.
   Deliberately plain text (no pill/border) so it reads as a hint, not a badge. */
.pcp-sponsored-hint {
	font-size: var(--pcp-font-size-xxs);
	font-weight: var(--pcp-font-weight-light);
	color: var(--pcp-color-gray);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	line-height: var(--pcp-line-height-tight);
	width: fit-content;
	cursor: help;
}

/* ========================================
   Details Row (Accordion)
   ======================================== */

.pcp-details-row {
	display: flex !important;
	flex-direction: column;
	gap: var(--pcp-spacing-m);
	padding: 0 var(--pcp-spacing-l);
	background: var(--pcp-color-bg-alt);
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	transition: max-height 0.4s ease, padding 0.4s ease, opacity 0.3s ease;
}

.pcp-details-row.is-open {
	max-height: 2000px;
	padding: var(--pcp-spacing-l) var(--pcp-spacing-l);
	opacity: 1;
	border-bottom: 1px solid var(--pcp-color-border);
}

.pcp-details-grid {
	display: grid;
	gap: var(--pcp-spacing-s);
	grid-template-columns: repeat(6, 1fr);
}

.pcp-detail-item {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--pcp-spacing-m);
	padding: var(--pcp-spacing-m);
	background: var(--pcp-color-bg);
	border-radius: var(--pcp-radius-m);
	border: 1px solid var(--pcp-color-border);
}

.pcp-detail-icon {
	width: 20px;
	height: 20px;
	object-fit: contain;
	flex-shrink: 0;
	aspect-ratio: 1 / 1;
}

.pcp-detail-content {
	display: flex;
	flex-direction: column;
	gap: var(--pcp-spacing-xs);
	line-height: var(--pcp-line-height-s);
}

.pcp-detail-label {
	font-size: var(--pcp-font-size-xs);
	color: var(--pcp-color-faded);
	font-weight: var(--pcp-font-weight-light);
}

.pcp-detail-value {
	font-size: var(--pcp-font-size-s);
	font-weight: var(--pcp-font-weight-semibold);
}

/* ========================================
   Column: Product Image
   ======================================== */

.pcp-col-image {
	flex: var(--pcp-col-image);
	aspect-ratio: 1 / 1;
	width: 100%;
	position: relative;
	display: flex;
}

.pcp-product-link {
	display: flex;
	width: 100%;
	text-decoration: none;
}

.pcp-product-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: 1px solid var(--pcp-color-border);
	border-radius: var(--pcp-radius-m);
	background: var(--pcp-color-bg-alt);
	transform: scale(1);
	transition-property: transform;
	transition-duration: .2s;
}

.pcp-product-img:hover {
	transform: scale(1.03);
	transition-property: transform;
	transition-duration: .2s;
}

.pcp-discount-badge {
	position: absolute;
	top: -10px;
	left: -10px;
	width: 40px;
	height: 40px;
	line-height: 40px;
	text-align: center;
	transform: scale(0) rotate(308deg);
	background: var(--pcp-color-secondary);
	color: var(--pcp-color-white);
	font-size: var(--pcp-font-size-xs);
	font-weight: var(--pcp-font-weight-semibold);
	border-radius: var(--pcp-radius-full);
	z-index: var(--pcp-z-discount-badge);
	opacity: 0;
	transition: transform 0.85s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
}


.pcp-discount-badge.active {
	transform: scale(1) rotate(-15deg);
	opacity: 1;
}

.pcp-discount-badge span {
	display: block;
}

/* ========================================
   Column: Product Name
   ======================================== */

.pcp-col-name {
	flex: var(--pcp-col-name);
	display: flex;
	flex-direction: column;
	line-height: var(--pcp-line-height-s);
	gap: var(--pcp-spacing-m);
}

/* Badges Container */
.pcp-badges {
	display: flex;
	flex-direction: row;
	gap: var(--pcp-spacing-s);
	align-items: center;
}

/* Brand Badge */
.pcp-brand-badge {
	font-size: var(--pcp-font-size-xxs);
	font-weight: var(--pcp-font-weight-light);
	color: var(--pcp-color-gray);
	background: var(--pcp-color-bg-alt);
	padding: 0.1rem var(--pcp-spacing-s);
	border-radius: var(--pcp-radius-s);
	width: fit-content;
}

/* Type Badges (Seed/Oil) */
.pcp-type-badge {
	font-size: var(--pcp-font-size-xxs);
	font-weight: var(--pcp-font-weight-light);
	background: var(--pcp-color-bg-alt);
	padding: 0.1rem var(--pcp-spacing-s);
	border-radius: var(--pcp-radius-s);
	width: fit-content;
}

.pcp-seed-type {
	color: var(--pcp-color-gray);
}

.pcp-oil-type {
	color: var(--pcp-color-gray);
}

/* Product Info Container */
.pcp-product-info {
	display: flex;
	flex-direction: column;
	gap: var(--pcp-spacing-xs);
	width: 100%;
}

.pcp-product-title {
	font-size: var(--pcp-font-size-m);
	font-weight: var(--pcp-font-weight-semibold);
	color: var(--pcp-color-heading);
	text-decoration: none;
	margin: 0;
	line-height: var(--pcp-line-height-s);
}

.pcp-product-title:hover {
	color: var(--pcp-color-primary);
}

.pcp-product-content {
	font-size: var(--pcp-font-size-xs);
	color: var(--pcp-color-faded);
	font-weight: var(--pcp-font-weight-light);
}

/* ========================================
   Column: Price
   ======================================== */

.pcp-col-price {
	flex: var(--pcp-col-price);
	display: flex;
	flex-direction: column;
	gap: var(--pcp-spacing-s);
}

.pcp-price-main-wrapper {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--pcp-spacing-s);
	margin-bottom: var(--pcp-spacing-m);
}

.pcp-price-main {
	font-size: var(--pcp-font-size-l);
	font-weight: var(--pcp-font-weight-semibold);
	color: var(--pcp-color-heading);
	line-height: var(--pcp-line-height-tight);
}

.pcp-price-main.pcp-price-strikethrough,
.pcp-price-strikethrough {
	font-size: var(--pcp-font-size-s);
	color: var(--pcp-color-faded);
	text-decoration: line-through;
	font-weight: var(--pcp-font-weight-normal);
	line-height: var(--pcp-line-height-tight);
	padding-top: 3px;
}

.pcp-price-main-discounted {
	font-size: var(--pcp-font-size-l);
	font-weight: var(--pcp-font-weight-semibold);
	line-height: var(--pcp-line-height-tight);
}

.pcp-price-base {
	font-size: var(--pcp-font-size-xs);
	color: var(--pcp-color-gray);
	line-height: var(--pcp-line-height-tight);
	font-weight: var(--pcp-font-weight-light);
}

.pcp-price-total {
	color: var(--pcp-color-gray);
	font-size: var(--pcp-font-size-xs);
	line-height: var(--pcp-line-height-tight);
	font-weight: var(--pcp-font-weight-light);
}

.pcp-price-with-shipping {
	line-height: var(--pcp-line-height-tight);
	font-weight: var(--pcp-font-weight-light);
}

.pcp-price-discount {
	font-size: var(--pcp-font-size-xs);
	margin-top: var(--pcp-spacing-m);
	font-weight: var(--pcp-font-weight-light);
	color: var(--pcp-color-gray);
	cursor: help;
}

.pcp-price-discount i {
	margin-right: var(--pcp-spacing-xs);
	color: var(--pcp-color-secondary);
}

.pcp-price-discount span {
	text-decoration: underline;
}

/* ========================================
   Column: Payment Methods
   ======================================== */

.pcp-col-payment {
	flex: var(--pcp-col-payment);
	font-size: 0;
}

.pcp-payment-icons {
	width: 100%;
	gap: var(--pcp-spacing-xs);
	box-sizing: border-box;
	flex-wrap: wrap;
	align-items: center;
	flex-direction: row;
	display: flex;
}

.pcp-payment-icons img {
	display: flex;
	object-fit: cover;
	width: 26px;
	height: 16px;
	opacity: .65;
	transition-property: opacity;
	transition-duration: .2s;
}

.pcp-payment-icons img:hover {
	opacity: 1;
}

/* ========================================
   Column: Delivery
   ======================================== */

.pcp-col-delivery {
	flex: var(--pcp-col-delivery);
	font-size: var(--pcp-font-size-xs);
	color: var(--pcp-color-gray);
	font-weight: var(--pcp-font-weight-light);
}

.pcp-free-delivery {
	color: var(--pcp-color-heading);
	font-weight: var(--pcp-font-weight-light);
	cursor: help;
}

/* ========================================
   Column: Shop
   ======================================== */

.pcp-col-shop {
	flex: var(--pcp-col-shop);
	font-size: var(--pcp-font-size-xs);
	font-weight: var(--pcp-font-weight-light);
}

.pcp-col-shop a {
	color: var(--pcp-color-gray);
	text-decoration: none;
}

.pcp-col-shop a:hover {
	color: var(--pcp-color-primary);
}

/* ========================================
   Column: Product Link
   ======================================== */

.pcp-col-link {
	flex: var(--pcp-col-link);
	display: flex;
	flex-direction: column;
	gap: var(--pcp-spacing-s);
}

.pcp-product-btn {
	width: 100%;
	color: var(--pcp-alt-color-heading);
	font-size: var(--pcp-font-size-xs);
	font-weight: var(--pcp-font-weight-semibold);
	padding: var(--pcp-spacing-s) 0;
	background: var(--pcp-color-secondary);
	border-radius: var(--pcp-radius-m);
	text-decoration: none;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.pcp-product-btn:hover {
	background: var(--pcp-color-primary);
	color: var(--pcp-alt-color-heading) !important;
}

.pcp-details-btn {
	width: 100%;
	font-size: var(--pcp-font-size-xs);
	padding: 0;
	display: flex;
	align-items: center;
	gap: var(--pcp-spacing-xs);
	justify-content: center;
	color: var(--pcp-color-faded);
	font-weight: var(--pcp-font-weight-normal);
	cursor: pointer;
	transition: all var(--pcp-transition-normal);
	background: none;
	border: none;
}

.pcp-details-btn:hover {
	color: var(--pcp-color-primary) !important;
}

.pcp-details-btn i {
	font-size: 0.5rem;
	position: relative;
	top: 1px;
	margin-left: var(--pcp-spacing-s);
}

/* Icon style when accordion is open */
.pcp-details-btn .fa-chevron-up,
.pcp-details-btn .fa-chevron-down {
	font-size: 0.5rem;
	position: relative;
	top: 1px;
}

.pcp-details-btn * {
	pointer-events: none;
}

/* ========================================
   Last Updated Footer
   ======================================== */

.pcp-last-updated {
	font-size: var(--pcp-font-size-xs);
	color: var(--pcp-color-faded);
	margin-top: var(--pcp-spacing-m);
	text-align: right;
}

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

/* Tablet and below (768px) */
@media (max-width: 768px) {
	.pcp-controls-container {
		margin-bottom: var(--pcp-spacing-m);
	}

	.pcp-controls-wrapper {
		flex-direction: column;
		align-items: flex-start;
	}

	.pcp-sort-group {
		width: 100%;
		justify-content: flex-start;
		flex-wrap: wrap;
	}

	.pcp-table {
		gap: var(--pcp-spacing-m);
		display: flex;
		flex-direction: column;
		background: none;
		border: none;
		border-radius: 0 !important;
	}

	.pcp-table-header {
		display: none;
	}

	.pcp-product-row {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		gap: 0 !important;
		padding: 1rem;
		border: 1px solid var(--pcp-color-border);
		background: var(--pcp-color-bg);
		border-radius: var(--pcp-radius-l);
	}

	.pcp-product-row.details-open {
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
		border-bottom: none;
	}

	.pcp-details-row {
		background: var(--pcp-color-bg);
		border: 1px solid var(--pcp-color-border);
		border-top: 1px dashed var(--pcp-color-border);
		border-bottom-left-radius: var(--pcp-radius-l);
		border-bottom-right-radius: var(--pcp-radius-l);
		margin-top: -.5rem;
	}

	.pcp-col-image {
		flex: 0 0 100px;
		margin-bottom: var(--pcp-spacing-m);
	}

	.pcp-col-name {
		flex: 0 0 100%;
		border-bottom: 1px dashed var(--pcp-color-border);
		margin-bottom: var(--pcp-spacing-m);
		padding-bottom: var(--pcp-spacing-m);
	}

	.pcp-product-title {
		font-size: var(--pcp-font-size-l);
	}

	.pcp-col-price {
		flex: 0 0 100%;
		margin-bottom: var(--pcp-spacing-l);
	}

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

	.pcp-col-payment {
		flex: 0 0 100%;
		margin-bottom: var(--pcp-spacing-m);
	}

	.pcp-col-delivery {
		flex: 0 0 100%;
	}

	.pcp-col-delivery {
		flex: 0 0 100%;
	}

	.pcp-col-delivery:before {
		content: "Versandzeit:";
		font-weight: var(--pcp-font-weight-light);
		color: var(--pcp-color-gray);
		padding-right: var(--pcp-spacing-xs);
	}

	.pcp-col-shop {
		flex: 0 0 100%;
		margin-bottom: var(--pcp-spacing-l);
	}

	.pcp-col-shop:before {
		content: "Versandzeit:";
		font-weight: var(--pcp-font-weight-light);
		color: var(--pcp-color-gray);
		padding-right: var(--pcp-spacing-xs);
	}

	.pcp-col-link {
		flex: 0 0 100%;
	}

	.pcp-details-btn {
		margin-top: var(--pcp-spacing-m);
	}

	.pcp-last-updated {
		text-align: center;
	}

}

@media (max-width: 414px) {

	.pcp-controls-left,
	.pcp-discount-toggle {
		width: 100%;
	}

	.pcp-discount-toggle {
		padding: var(--pcp-spacing-m) var(--pcp-spacing-l);
	}

	.pcp-filter-group,
	.pcp-sort-group {
		white-space: nowrap;
		overflow-x: scroll;
		flex-wrap: nowrap;
	}

	/* Table Info on Mobile */
	.pcp-table-info {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--pcp-spacing-m);
	}

	.pcp-verified-badge {
		width: 100%;
		justify-content: center;
	}
}