/**
 * Chiptuning Konfigurator widget -- ported from the standalone
 * Flask app (static/css/style.css), scoped under .aw-configurator so
 * it never leaks into (or is affected by) the rest of the theme's
 * styles. Colors are pulled from the theme's own custom properties
 * (--acc, --bg2, --line, --ink, --ink3) so the widget visually
 * matches the rest of the site.
 */
.awc-configurator-section {
	background: var(--ink, #202124);
	overflow: hidden;
	padding: clamp(68px, 8vw, 112px) var(--px, 24px);
	position: relative;
}

.awc-configurator-section::before {
	background:
		radial-gradient(circle at 20% 20%, rgba(214, 40, 40, .28), transparent 34%),
		linear-gradient(135deg, rgba(255, 255, 255, .06), transparent 45%);
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
}

.awc-configurator-section > .w {
	margin: 0 auto;
	max-width: var(--mw, 1240px);
	position: relative;
	width: 100%;
}

.configurator-head {
	margin: 0 auto 40px;
	max-width: 680px;
	position: relative;
	text-align: center;
	z-index: 1;
}

.configurator-head .h2 {
	color: #fff;
}

.configurator-head .lead {
	color: rgba(255, 255, 255, .72);
	margin: 14px auto 0;
}

.configurator-badge {
	align-items: center;
	background: rgba(255, 255, 255, .09);
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 999px;
	color: rgba(255, 255, 255, .82);
	display: inline-flex;
	font-family: var(--fd, "Archivo", sans-serif);
	font-size: 12px;
	font-weight: 800;
	gap: 10px;
	letter-spacing: 1.2px;
	margin-top: 22px;
	padding: 10px 14px;
	text-transform: uppercase;
}

.configurator-badge span {
	background: #34d058;
	border-radius: 50%;
	box-shadow: 0 0 12px rgba(52, 208, 88, .9);
	height: 8px;
	width: 8px;
}

.configurator-widget {
	background: #fff;
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 18px;
	box-shadow: 0 26px 70px rgba(0, 0, 0, .34);
	overflow: hidden;
	padding: clamp(18px, 3vw, 32px);
	position: relative;
	z-index: 1;
}

.aw-configurator {
	--k-panel: #fff;
	--k-panel-alt: var( --bg2, #f2f2f2 );
	--k-border: var( --line, #e0e0e0 );
	--k-text: var( --ink, #2b2b2b );
	--k-muted: var( --ink3, #777777 );
	--k-accent: var( --acc, #cc1f2c );
	--k-accent-2: var( --acc-d, #a83c1a );
	--k-link: #a8551d;
	--k-good: #1c8a44;
	font-family: var( --fb, "Segoe UI", Roboto, Arial, sans-serif );
	color: var( --k-text );
}

.aw-configurator .konf-title {
	margin: 0 0 18px;
	font-size: 20px;
	font-weight: 800;
	letter-spacing: .5px;
	text-transform: uppercase;
	color: var( --k-text );
	padding-bottom: 16px;
	border-bottom: 2px solid var( --k-accent );
	transition: opacity .2s ease;
}
.aw-configurator .konf-title.updating { opacity: 0; }

.aw-configurator .konf-back {
	display: none;
	align-items: center;
	gap: 6px;
	background: var( --k-panel-alt );
	color: var( --k-text );
	border: 1px solid var( --k-border );
	border-radius: 999px;
	font-family: var( --fb, "Segoe UI", Roboto, Arial, sans-serif );
	font-size: 13px;
	font-weight: 700;
	padding: 7px 14px;
	margin: 0 0 12px;
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
}
.aw-configurator .konf-back.is-visible { display: inline-flex; }
.aw-configurator .konf-back:hover,
.aw-configurator .konf-back:focus-visible {
	background: var( --k-accent );
	color: #fff;
}

.aw-configurator .konf-chain {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: flex-start;
	gap: 0;
	overflow-x: auto;
	padding-bottom: 8px;
	position: relative;
	scroll-behavior: smooth;
}

.aw-configurator .option-panel {
	background: var( --k-panel );
	border: 1px solid var( --k-border );
	border-left: none;
	border-radius: 0;
	width: 300px;
	flex: 0 0 300px;
	overflow: hidden;
	animation: konfSlideFadeIn .28s ease both;
}
.aw-configurator .option-panel:first-child { border-left: 1px solid var( --k-border ); }

.aw-configurator .option-panel h3 {
	margin: 0;
	background: var( --k-panel-alt );
	color: var( --k-text );
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .5px;
	text-transform: uppercase;
	padding: 12px 16px;
	transition: background .25s ease, color .25s ease;
}
.aw-configurator .option-panel h3.active {
	background: var( --k-accent );
	color: #fff;
}

.aw-configurator .option-grid {
	display: block;
	max-height: 420px;
	overflow-y: auto;
}

.aw-configurator .option-btn {
	display: block;
	width: 100%;
	background: var( --k-panel );
	color: var( --k-link );
	border: none;
	border-bottom: 1px solid var( --k-border );
	border-radius: 0;
	padding: 9px 16px;
	font-size: 13.5px;
	font-weight: 500;
	text-align: left;
	cursor: pointer;
	transition: background .15s ease, color .15s ease, padding-left .15s ease;
}
.aw-configurator .option-btn:nth-child(even) { background: var( --k-panel-alt ); }
.aw-configurator .option-btn:hover { background: #fdecec; color: var( --k-accent ); padding-left: 22px; }
.aw-configurator .option-btn.active { background: #fdecec; color: var( --k-accent ); font-weight: 700; }

.aw-configurator .konf-loading {
	color: var( --k-muted );
	font-size: 14px;
	padding: 4px 2px;
	animation: konfPulse 1.1s ease-in-out infinite;
}
.aw-configurator .konf-error {
	color: var( --k-accent );
	font-size: 14px;
	padding: 4px 2px;
	animation: konfSlideFadeIn .25s ease both;
}

@keyframes konfSlideFadeIn {
	from { opacity: 0; transform: translateX(-10px); }
	to { opacity: 1; transform: translateX(0); }
}
@keyframes konfFadeUp {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: translateY(0); }
}
@keyframes konfPulse {
	0%, 100% { opacity: .5; }
	50% { opacity: 1; }
}

.aw-configurator .konf-result { margin-top: 24px; }

.aw-configurator .stage-card {
	background: var( --k-panel );
	border: 1px solid var( --k-border );
	border-radius: 12px;
	padding: 20px;
	margin-bottom: 16px;
	animation: konfFadeUp .3s ease both;
}
.aw-configurator .stage-card h2 {
	margin: 0 0 14px;
	font-size: 17px;
	color: var( --k-accent-2 );
}
.aw-configurator .stage-card:nth-of-type(2) { animation-delay: .06s; }
.aw-configurator .stage-card:nth-of-type(3) { animation-delay: .12s; }
.aw-configurator .stage-card:nth-of-type(4) { animation-delay: .18s; }

.aw-configurator table.tuning {
	width: 100%;
	border-collapse: collapse;
	font-size: 13.5px;
}
.aw-configurator table.tuning th,
.aw-configurator table.tuning td {
	text-align: left;
	padding: 8px 10px;
	border-bottom: 1px solid var( --k-border );
}
.aw-configurator table.tuning th { color: var( --k-muted ); font-weight: 600; }
.aw-configurator table.tuning td.diff { color: var( --k-good ); font-weight: 600; }
.aw-configurator .konf-price-link {
	color: var( --k-accent-2, #d92929 );
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.aw-configurator .konf-price-link:hover,
.aw-configurator .konf-price-link:focus {
	color: var( --k-accent-1, #a81e1e );
}

.aw-configurator .desc-box {
	background: var( --k-panel );
	border: 1px solid var( --k-border );
	border-radius: 12px;
	padding: 20px;
	margin-bottom: 16px;
	animation: konfFadeUp .3s ease both;
}
.aw-configurator .desc-box h3 { margin: 0 0 10px; font-size: 14px; color: var( --k-muted ); }
.aw-configurator .desc-box ul { margin: 0; padding-left: 20px; }
.aw-configurator .desc-box p { margin: 0; }

@media (max-width: 620px) {
	.configurator-badge {
		font-size: 11px;
	}
	.configurator-widget {
		padding: 16px;
	}
	.aw-configurator .option-panel { width: 260px; flex: 0 0 260px; }
}

@media (max-width: 480px) {
	.aw-configurator table.tuning {
		font-size: 12px;
	}
	.aw-configurator table.tuning th,
	.aw-configurator table.tuning td {
		padding: 6px 6px;
	}
}