/* === Kullaloo Meterware Selector === */

/* Hide the standard WooCommerce variation dropdown when our UI is active */
.kullaloo-meter-active .variations {
	display: none !important;
}

/* Also hide the default quantity field when meter slider is shown */
.kullaloo-meter-active.kullaloo-meter-variation-active .quantity {
	display: none !important;
}

/* ── Radio Cards ── */

.kullaloo-variation-cards {
	display: flex;
	gap: 12px;
	margin-bottom: 20px;
}

.kullaloo-variation-card {
	flex: 1;
	border: 2px solid #dcd6d0;
	border-radius: 8px;
	padding: 16px 16px 42px;
	cursor: pointer;
	transition: border-color 0.2s, box-shadow 0.2s;
	text-align: center;
	background: #fff;
	position: relative;
	line-height: 1.4em;
}

.kullaloo-variation-card:hover {
	border-color: #b1aaa2;
}

.kullaloo-variation-card.active {
	border-color: #de2a85;
	box-shadow: 0 0 0 1px #de2a85;
	background: #fdf5f9;
}

.kullaloo-variation-card__label {
	font-weight: 700;
	font-size: 15px;
	margin-bottom: 4px;
	color: #333;
}

.kullaloo-variation-card__info {
	font-size: 13px;
	color: #867e7c;
	margin-bottom: 0;
}

.kullaloo-variation-card__price {
	font-size: 16px;
	font-weight: 700;
	color: #de2a85;
	margin-top: 6px;
}

/* ── Stock Badge ── */

.kullaloo-variation-card__badge {
	position: absolute;
	bottom: 10px;
	left: 50%;
	transform: translateX(-50%);
	white-space: nowrap;
	font-size: 12px;
	font-weight: 600;
	padding: 4px 14px;
	border-radius: 10px;
	line-height: normal;
}

.kullaloo-variation-card__badge.in-stock {
	background: #e8f5e9;
	color: #558b2f;
}

.kullaloo-variation-card__badge.out-of-stock {
	background: #fce4ec;
	color: #c62828;
}

/* Hide default WooCommerce stock display (variation-level, inside form) */
.kullaloo-meter-active .woocommerce-variation-availability {
	display: none !important;
}

.kullaloo-variation-card__radio {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 2px solid #dcd6d0;
	background: #fff;
	transition: border-color 0.2s;
}

.kullaloo-variation-card.active .kullaloo-variation-card__radio {
	border-color: #de2a85;
	background: #de2a85;
	box-shadow: inset 0 0 0 3px #fff;
}

/* ── Meter Slider Container ── */

.kullaloo-meter-slider-wrap {
	background: #f8f6f4;
	border-radius: 8px;
	padding: 20px;
	margin-bottom: 16px;
}

.kullaloo-meter-slider-wrap__title {
	font-weight: 700;
	font-size: 14px;
	color: #333;
	margin-bottom: 14px;
}

/* ── Range Slider ── */

.kullaloo-meter-range-row {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 6px;
}

.kullaloo-meter-range-row__min,
.kullaloo-meter-range-row__max {
	font-size: 12px;
	color: #867e7c;
	white-space: nowrap;
	min-width: 30px;
}

.kullaloo-meter-range-row__max {
	text-align: right;
}

.kullaloo-meter-range {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 6px;
	border-radius: 20px;
	background: #dcd6d0;
	outline: none;
}

.kullaloo-meter-range::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #de2a85;
	cursor: pointer;
	border: 3px solid #fff;
	box-shadow: 0 1px 4px rgba(0,0,0,0.2);
	transition: transform 0.15s;
}

.kullaloo-meter-range::-webkit-slider-thumb:hover {
	transform: scale(1.15);
}

.kullaloo-meter-range::-moz-range-thumb {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #de2a85;
	cursor: pointer;
	border: 3px solid #fff;
	box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}

/* ── Input Row (+/- Buttons + Input) ── */

.kullaloo-meter-input-row {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 20px !important;
	margin-top: 14px;
}

.kullaloo-meter-input-controls,
.kullaloo-meter-price {
	flex: 0 0 auto !important;
	margin: 0 !important;
}

.kullaloo-meter-input-controls {
	display: flex;
	align-items: center;
	gap: 10px;
}

.kullaloo-meter-btn {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 2px solid #dcd6d0;
	background: #fff;
	font-size: 22px;
	font-weight: 300;
	font-family: Arial, Helvetica, sans-serif;
	line-height: 38px;
	color: #333;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: border-color 0.2s, background 0.2s, color 0.2s;
	padding: 0;
	-webkit-user-select: none;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
}

.kullaloo-meter-btn:focus-visible:not(:active) {
	border-color: #de2a85;
	background: #fff;
	color: #333;
}

.kullaloo-meter-btn:hover:not([disabled]) {
	border-color: #de2a85;
	background: #fdf5f9;
}

.kullaloo-meter-btn:active:not([disabled]) {
	background: #de2a85;
	color: #fff;
	border-color: #de2a85;
}

.kullaloo-meter-btn[disabled] {
	display: none;
}

.kullaloo-meter-input-group {
	display: flex;
	align-items: center;
	gap: 6px;
}

.kullaloo-meter-input {
	width: 60px;
	height: 38px;
	text-align: center;
	font-size: 16px;
	font-weight: 700;
	border: 2px solid #dcd6d0;
	border-radius: 6px;
	outline: none;
	color: #333;
}

.kullaloo-meter-input:focus {
	border-color: #de2a85;
}

.kullaloo-meter-unit-label {
	font-size: 16px;
	font-weight: 700;
	color: #333;
}

/* ── Price Display ── */

.kullaloo-meter-price {
	font-size: 20px;
	font-weight: 700;
	color: #de2a85;
	white-space: nowrap;
	line-height: 1.2;
}

.kullaloo-meter-price__per-unit {
	display: block;
	font-size: 12px;
	font-weight: 400;
	color: #867e7c;
	margin-top: 2px;
}

/* ── Button fix when quantity is hidden ── */

.kullaloo-meter-active.kullaloo-meter-variation-active .woocommerce-variation-add-to-cart .button {
	width: 100% !important;
	border-top-left-radius: 6px !important;
	border-bottom-left-radius: 6px !important;
}

/* ── Responsive ── */

@media (max-width: 480px) {
	.kullaloo-variation-cards {
		flex-direction: column;
		margin-top: 16px;
	}

	.kullaloo-meter-slider-wrap {
		padding: 16px;
	}
}


/* ── Grundpreis (€/m²) ── */

/* Grundpreis in jeder Variationskarte */
.kullaloo-variation-card__grundpreis {
	font-size: 11px;
	color: #a09895;
	margin-top: 2px;
	line-height: 1.4;
}

/* Grundpreis auf Archiv-/Kategorieseiten (small-Tag direkt im .price-Element) */
.kullaloo-grundpreis--loop {
	display: block;
	font-size: 11px;
	color: #a09895;
	font-weight: normal;
	line-height: 1.4;
}