/**
 * KN Product Variation Frontend Styles
 * Radio Picklist Style
 *
 * @package  KN Product Variation
 * @category Frontend
 * @author   IP Austria
 */

/* Variations Wrapper */
.kn-product-variations-wrapper {
	margin: 30px 0;
	padding: 0;
	border: none;
	background: transparent;
}

.kn-variations-title {
	margin: 0 0 20px 0;
	font-size: 1.5em;
	font-weight: 600;
	color: #333;
	padding: 0;
	height: auto;
	width: auto;
	overflow: visible;
}

/* Picklist Fieldset */
.picklist {
	padding: 0;
	border: none;
	display: grid;
	align-items: flex-start;
	gap: 1px;
	max-inline-size: 100%;
}

.picklist > legend {
	margin-block-end: 0;
	font-size: var(--font-size-4, 1.5rem);
	font-weight: var(--font-weight-7, 700);
	color: var(--text-1, #212529);
	height: 0;
	width: 0;
	overflow: hidden;
	padding: 0;
	display: none;
}

/* Variation Label (Radio Option) */
.picklist > label.kn-variation-label {
	--space: var(--size-3, 1rem);
	display: grid;
	align-items: center;
	gap: var(--space);
	grid-auto-flow: column;
	grid-template-columns: auto 1fr;
	background: white;
	padding: var(--space);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	accent-color: var(--link, #2271b1);
	transition: all 0.2s ease;
	border: 1px solid transparent;
}

.picklist > label.kn-variation-label:hover {
	background: #f8f9fa;
}

.picklist > label.kn-variation-label:focus-within {
	outline: 2px solid var(--link, #2271b1);
	outline-offset: 2px;
}

.picklist > label.kn-variation-label:first-of-type {
	border-start-start-radius: var(--radius-3, 1rem);
	border-start-end-radius: var(--radius-3, 1rem);
}

.picklist > label.kn-variation-label:last-of-type {
	border-end-start-radius: var(--radius-3, 1rem);
	border-end-end-radius: var(--radius-3, 1rem);
}

.picklist > label.kn-variation-label:is(:focus-within, :hover) .rich-label--title {
	color: var(--link, #2271b1);
}

/* Selected State */
.picklist > label.kn-variation-label:has(input:checked),
.picklist > label.kn-variation-label.selected {
	background: #f0f7ff;
	border-color: var(--link, #2271b1);
}

.picklist > label.kn-variation-label:has(input:checked) .rich-label--title,
.picklist > label.kn-variation-label.selected .rich-label--title {
	color: var(--link, #2271b1);
	font-weight: var(--font-weight-7, 700);
}

/* Radio Input */
.picklist > label.kn-variation-label > input[type="radio"] {
	margin-inline: calc(var(--space, 1rem) * 1.5);
	inline-size: 1.25rem;
	block-size: 1.25rem;
	cursor: pointer;
	accent-color: var(--link, #2271b1);
}

/* Rich Label Container */
.picklist > label.kn-variation-label > .rich-label {
	display: grid;
	padding-inline-end: calc(var(--space, 1rem) * 2);
	gap: 0.25rem;
}

/* Title with Name and Price */
.picklist > label.kn-variation-label > .rich-label > .rich-label--title {
	font-weight: var(--font-weight-6, 600);
	font-size: var(--font-size-2, 1.1rem);
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-wrap: wrap;
}

/* Variation Name (comes first after radio) */
.kn-variation-name-inline {
	font-weight: var(--font-weight-6, 600);
	color: inherit;
}

/* Price displayed after title */
.kn-variation-price-inline {
	font-weight: var(--font-weight-7, 700);
	color: var(--link, #2271b1);
	white-space: nowrap;
}

.kn-variation-price-inline del {
	color: #999;
	font-weight: normal;
	margin-right: 0.5rem;
	text-decoration: line-through;
}

.kn-variation-price-inline ins {
	text-decoration: none;
	color: #d63638;
	font-weight: var(--font-weight-7, 700);
}

/* Description */
.picklist > label.kn-variation-label > .rich-label > .rich-label--desc {
	color: var(--text-2, #495057);
	font-size: var(--font-size-1, 1rem);
	line-height: var(--font-lineheight-3, 1.5);
	margin-top: 0.25rem;
}

/* Dark Theme Support */
.dark .picklist > label.kn-variation-label,
[data-theme="dark"] .picklist > label.kn-variation-label {
	background: var(--surface-2, #343a40);
	color: var(--text-1, #f8f9fa);
}

.dark .picklist > label.kn-variation-label:hover,
[data-theme="dark"] .picklist > label.kn-variation-label:hover {
	background: var(--surface-3, #495057);
}

.dark .picklist > label.kn-variation-label:has(input:checked),
[data-theme="dark"] .picklist > label.kn-variation-label:has(input:checked),
.dark .picklist > label.kn-variation-label.selected,
[data-theme="dark"] .picklist > label.kn-variation-label.selected {
	background: rgba(34, 113, 177, 0.2);
	border-color: var(--link, #4dabf7);
}

/* Selected Variation Info */
.kn-selected-variation-info {
	margin-top: 20px;
	padding: 15px;
	background: #f0f7ff;
	border: 1px solid #2271b1;
	border-radius: var(--radius-3, 1rem);
}

.kn-selected-variation-name {
	font-weight: 600;
	font-size: 1.1em;
	margin-bottom: 5px;
	color: #333;
}

.kn-selected-variation-price {
	font-size: 1.2em;
	color: #2271b1;
	font-weight: 600;
}

/* Responsive */
@media screen and (max-width: 768px) {
	.picklist > label.kn-variation-label {
		padding: var(--size-2, 0.5rem);
	}
	
	.picklist > label.kn-variation-label > .rich-label > .rich-label--title {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.5rem;
	}
	
	.kn-variation-price-inline {
		font-size: 1.1em;
	}
}

/* Cart / Checkout: variation title under product name (use these in Elementor) */
.kn-cart-variation-title,
.kn-cart-item-variation,
[data-kn="cart-variation"] {
	display: block;
	margin-top: 0.35em;
	font-size: 0.95em;
	color: var(--text-2, #495057);
}
.kn-cart-variation-title .kn-cart-variation-label,
.kn-cart-item-variation .kn-cart-variation-label {
	font-weight: 600;
	color: var(--text-1, #212529);
}
.kn-cart-variation-title .kn-cart-variation-name,
.kn-cart-item-variation .kn-cart-variation-name {
	font-weight: 500;
}

/* Order details / emails: variation name under product (single class) */
.kn-order-variation-name {
	display: block;
	margin-top: 0.35em;
	font-size: 0.95em;
	color: var(--text-2, #495057);
	font-weight: 500;
}

/* Fallback for browsers without :has() support */
@supports not selector(:has(*)) {
	.picklist > label.kn-variation-label.selected {
		background: #f0f7ff;
		border-color: var(--link, #2271b1);
	}
	
	.picklist > label.kn-variation-label.selected .rich-label--title {
		color: var(--link, #2271b1);
		font-weight: var(--font-weight-7, 700);
	}
}