/* KCR Hitta ratt effektbox - extracted from inline CSS */
/* ============================================
	   KCR Hitta Ratt Effektbox - Modern Design
	   ============================================ */
	
	:root {
		--brand-bg-from: #3a4a60;
		--brand-bg-to: #4a6a8a;
		--brand-accent: #0ea5e9;
		--brand-accent-hover: #0284c7;
		--brand-soft: rgba(14,165,233,.12);
		--card-bg: #ffffff;
		--card-border: rgba(0,0,0,.06);
		--text-primary: #111827;
		--text-secondary: #4b5563;
		--text-muted: #6b7280;
		--section-gap: clamp(1.5rem, 4vw, 2.5rem);
		--card-radius: 16px;
		--card-shadow: 0 4px 24px rgba(0,0,0,.08);
		--card-shadow-hover: 0 8px 32px rgba(0,0,0,.12);
		--transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
	}
	
	/* Tema-farger */
	.theme-diesel { --brand-bg-from:#1a2744; --brand-bg-to:#2d4a6f; --brand-accent:#0ea5e9; --brand-accent-hover:#0284c7; --brand-soft:rgba(14,165,233,.15); }
	.theme-bensin { --brand-bg-from:#3d1f2e; --brand-bg-to:#6b2f42; --brand-accent:#f43f5e; --brand-accent-hover:#e11d48; --brand-soft:rgba(244,63,94,.15); }
	.theme-hybrid { --brand-bg-from:#143329; --brand-bg-to:#1e5941; --brand-accent:#10b981; --brand-accent-hover:#059669; --brand-soft:rgba(16,185,129,.15); }
	.theme-elbil { --brand-bg-from:#172554; --brand-bg-to:#1e3a8a; --brand-accent:#3b82f6; --brand-accent-hover:#2563eb; --brand-soft:rgba(59,130,246,.15); }

	/* ============ HERO ============ */
	.kcr-hero {
		background: linear-gradient(145deg, var(--brand-bg-from) 0%, var(--brand-bg-to) 100%);
		border-radius: var(--card-radius);
		box-shadow: 0 20px 50px rgba(0,0,0,.2);
		color: #fff;
		padding: clamp(1.5rem, 5vw, 2.5rem);
		position: relative;
		overflow: hidden;
	}
	.kcr-hero::before {
		content: '';
		position: absolute;
		top: -50%;
		right: -20%;
		width: 60%;
		height: 200%;
		background: radial-gradient(ellipse, var(--brand-soft) 0%, transparent 70%);
		pointer-events: none;
	}
	.kcr-hero h1 {
		font-size: clamp(1.5rem, 4vw, 2.5rem);
		margin: 0 0 0.75rem;
		font-weight: 800;
		line-height: 1.2;
		letter-spacing: -0.02em;
	}
	.kcr-hero p.lead {
		font-size: clamp(1rem, 2vw, 1.15rem);
		margin: 0 0 1rem;
		color: rgba(255,255,255,.88);
		line-height: 1.5;
	}

	/* USP highlight (ingen chiptrim) */
	.kcr-usp-highlight {
		display: flex;
		align-items: center;
		gap: 0.5rem;
		background: rgba(255,255,255,.15);
		border: 1px solid rgba(255,255,255,.25);
		border-radius: 50px;
		width: fit-content;
		padding: 0.5rem 1rem;
		margin: 0 auto 1rem;
		font-size: 0.95rem;
		font-weight: 500;
		backdrop-filter: blur(4px);
		justify-content: center;
		text-align: center;
	}
	.kcr-usp-highlight .bi {
		font-size: 1.1rem;
		color: var(--brand-accent);
	}
	@media (min-width: 992px) {
		.kcr-usp-highlight {
			margin: 0 0 1rem;
			justify-content: flex-start;
			text-align: left;
		}
	}

	/* Hero stats (3 ikoner) */
	.kcr-hero-stats {
		display: flex;
		gap: 1.5rem;
		margin-bottom: 1.25rem;
		flex-wrap: wrap;
	}
	.kcr-hero-stats .stat-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		min-width: 80px;
	}
	.kcr-hero-stats .stat-item .bi {
		font-size: 1.75rem;
		color: var(--brand-accent);
		margin-bottom: 0.25rem;
	}
	.kcr-hero-stats .stat-item .stat-number {
		font-weight: 800;
		font-size: 1.1rem;
		line-height: 1.2;
	}
	.kcr-hero-stats .stat-item .stat-label {
		font-size: 0.85rem;
		opacity: 0.85;
	}

	.kcr-secondary-link {
		margin-top: 0.75rem;
	}
	.kcr-secondary-link a {
		color: rgba(255,255,255,.6);
		font-size: 0.85rem;
		text-decoration: none;
		transition: var(--transition);
	}
	.kcr-secondary-link a:hover {
		color: rgba(255,255,255,.9);
	}
	.kcr-secondary-link .bi {
		font-size: 0.75rem;
		margin-left: 4px;
	}

	.kcr-hero-stats.secondary {
		display: none;
	}
	@media (min-width: 992px) {
		.kcr-hero-stats.secondary {
			display: flex;
		}
	}

	/* USP-lista i hero */
	.kcr-trustlist {
		list-style: none;
		padding: 0;
		margin: 0 0 1.25rem;
		display: flex;
		flex-wrap: wrap;
		gap: 0.5rem 1.5rem;
	}
	.kcr-trustlist li {
		display: flex;
		align-items: center;
		gap: 0.5rem;
		font-weight: 500;
		font-size: 0.95rem;
	}
	.kcr-trustlist .bi {
		font-size: 1.1rem;
		color: var(--brand-accent);
		flex-shrink: 0;
	}

	/* ============ MOBILE INTRO ============ */
	.kcr-mobile-intro {
		text-align: center;
		margin-bottom: 1rem;
		color: #fff;
	}
	.kcr-mobile-intro h1 {
		font-size: 1.35rem;
		font-weight: 800;
		margin: 0 0 0.5rem;
		line-height: 1.3;
	}
	.kcr-mobile-intro p {
		font-size: 0.9rem;
		margin: 0;
		opacity: 0.9;
	}

	/* ============ FINDER (fordonvaljare) - DOMINANT ============ */
	.kcr-finder {
		background: var(--card-bg);
		border-radius: var(--card-radius);
		padding: clamp(1.5rem, 4vw, 2rem);
		box-shadow: 0 8px 32px rgba(0,0,0,.15);
		color: var(--text-primary);
		border: 3px solid var(--brand-accent);
		position: relative;
	}
	.kcr-finder::before {
		content: 'Kolla din effekt h\00E4r';
		position: absolute;
		top: -12px;
		left: 20px;
		background: var(--brand-accent);
		color: #fff;
		font-size: 0.75rem;
		font-weight: 700;
		padding: 4px 12px;
		border-radius: 20px;
		text-transform: uppercase;
		letter-spacing: 0.5px;
	}
	.kcr-finder h3 {
		margin: 0 0 0.25rem;
		font-weight: 800;
		font-size: clamp(1.25rem, 2.5vw, 1.5rem);
	}
	.kcr-finder > small {
		color: var(--text-secondary);
		display: block;
		margin-bottom: 1rem;
	}
	
	/* Tabs i finder */
	.kcr-finder .nav-tabs {
		border: none;
		background: #f3f4f6;
		border-radius: 10px;
		padding: 4px;
		gap: 4px;
	}
	.kcr-finder .nav-tabs .nav-item { flex: 1; }
	.kcr-finder .nav-tabs .nav-link {
		border: none;
		border-radius: 8px;
		padding: 0.6rem 0.5rem;
		color: var(--text-secondary);
		font-weight: 600;
		font-size: 0.9rem;
		text-align: center;
		transition: var(--transition);
		background: transparent;
	}
	.kcr-finder .nav-tabs .nav-link:hover {
		color: var(--text-primary);
		background: rgba(255,255,255,.6);
	}
	.kcr-finder .nav-tabs .nav-link.active {
		background: #fff;
		color: var(--brand-accent);
		box-shadow: 0 2px 8px rgba(0,0,0,.08);
	}
	
	/* Select i finder */
	.kcr-finder .form-label {
		font-weight: 600;
		font-size: 0.9rem;
		margin-bottom: 0.5rem;
		color: var(--text-primary);
	}
	.kcr-finder .form-control {
		border-radius: 10px;
		border: 2px solid #e5e7eb;
		padding: 0.75rem 1rem;
		font-size: 1rem;
		transition: var(--transition);
	}
	.kcr-finder .form-control:focus {
		border-color: var(--brand-accent);
		box-shadow: 0 0 0 4px var(--brand-soft);
	}
	.kcr-finder .mt-2 small {
		color: var(--text-muted);
		font-size: 0.85rem;
	}
	
	.kcr-exit-safety {
		margin-top: 1rem;
		padding-top: 1rem;
		border-top: 1px solid var(--card-border);
		text-align: center;
	}
	.kcr-exit-safety a {
		color: var(--text-muted);
		font-size: 0.85rem;
		text-decoration: none;
		transition: var(--transition);
	}
	.kcr-exit-safety a:hover {
		color: var(--brand-accent);
	}
	.kcr-exit-safety .bi {
		margin-right: 6px;
	}

	/* ============ SECTION TITLES ============ */
	.kcr-section-title {
		font-weight: 800;
		font-size: clamp(1.25rem, 3vw, 1.5rem);
		margin: 0 0 0.5rem;
		letter-spacing: -0.01em;
	}
	.kcr-muted { color: var(--text-muted); }

	/* ============ PATH CARDS (Valj din vag) ============ */
	.kcr-path-card {
		background: var(--card-bg);
		border: 1px solid var(--card-border);
		border-radius: var(--card-radius);
		padding: clamp(1rem, 3vw, 1.5rem);
		box-shadow: var(--card-shadow);
		text-decoration: none;
		color: var(--text-primary);
		display: flex;
		flex-direction: column;
		height: 100%;
		transition: var(--transition);
		position: relative;
		overflow: hidden;
	}
	.kcr-path-card::after {
		content: '\2192';
		position: absolute;
		top: 1rem;
		right: 1rem;
		font-size: 1.25rem;
		color: var(--brand-accent);
		opacity: 0;
		transform: translateX(-8px);
		transition: var(--transition);
	}
	.kcr-path-card:hover {
		border-color: var(--brand-accent);
		box-shadow: var(--card-shadow-hover);
		transform: translateY(-2px);
		color: var(--text-primary);
		text-decoration: none;
	}
	.kcr-path-card:hover::after {
		opacity: 1;
		transform: translateX(0);
	}
	.kcr-path-card .title {
		font-weight: 700;
		font-size: 1.1rem;
		margin: 0 0 0.35rem;
	}
	.kcr-path-card .desc {
		margin: 0;
		color: var(--text-secondary);
		font-size: 0.9rem;
		line-height: 1.45;
	}

	/* ============ TRUST BAR ============ */
	.kcr-trust {
		background: var(--card-bg);
		border-radius: var(--card-radius);
		box-shadow: var(--card-shadow);
		padding: clamp(1rem, 3vw, 1.5rem);
		border: 1px solid var(--card-border);
	}
	.kcr-trust .trust-item {
		text-align: center;
		padding: 0.5rem;
	}
	.kcr-trust .trust-item .bi {
		font-size: 1.5rem;
		color: var(--brand-accent);
		display: block;
		margin-bottom: 0.35rem;
	}
	.kcr-trust .trust-item .fw-bold {
		font-size: 0.95rem;
		display: block;
		margin-bottom: 0.15rem;
	}
	.kcr-trust .trust-item small {
		color: var(--text-muted);
		font-size: 0.8rem;
	}

	/* ============ STEPS (3 steg) ============ */
	.kcr-step-card {
		background: var(--card-bg);
		border-radius: 12px;
		box-shadow: var(--card-shadow);
		padding: 1.25rem;
		height: 100%;
		border: 1px solid var(--card-border);
		transition: var(--transition);
	}
	.kcr-step-card:hover {
		box-shadow: var(--card-shadow-hover);
	}
	.kcr-step-card .step-number {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 2rem;
		height: 2rem;
		background: var(--brand-accent);
		color: #fff;
		border-radius: 50%;
		font-weight: 700;
		font-size: 0.95rem;
		margin-bottom: 0.5rem;
	}
	.kcr-step-card .step-title {
		font-weight: 700;
		font-size: 1rem;
		margin-bottom: 0.25rem;
	}
	.kcr-step-card .step-desc {
		color: var(--text-muted);
		font-size: 0.85rem;
		margin: 0;
	}

	/* ============ WHITE CARDS (Trygghetslofte, Snabbvagar) ============ */
	.kcr-white-card {
		background: var(--card-bg);
		border-radius: var(--card-radius);
		box-shadow: var(--card-shadow);
		padding: clamp(1.25rem, 4vw, 1.75rem);
		border: 1px solid var(--card-border);
		height: 100%;
	}
	.kcr-white-card h3,
	.kcr-white-card h4 {
		font-weight: 700;
		margin: 0 0 1rem;
	}
	.kcr-white-card ul {
		padding-left: 1.25rem;
		margin: 0;
	}
	.kcr-white-card ul li {
		margin-bottom: 0.5rem;
		line-height: 1.5;
	}
	.kcr-white-card ul li:last-child { margin-bottom: 0; }

	/* ============ FAQ ACCORDION ============ */
	.kcr-faq .accordion-item {
		border: 1px solid var(--card-border);
		border-radius: 12px !important;
		margin-bottom: 0.75rem;
		overflow: hidden;
		background: var(--card-bg);
	}
	.kcr-faq .accordion-button {
		font-weight: 600;
		font-size: 1rem;
		padding: 1rem 1.25rem;
		background: transparent;
		color: var(--text-primary);
	}
	.kcr-faq .accordion-button:not(.collapsed) {
		background: #f9fafb;
		color: var(--brand-accent);
		box-shadow: none;
	}
	.kcr-faq .accordion-button:focus {
		box-shadow: none;
		border-color: transparent;
	}
	.kcr-faq .accordion-body {
		padding: 0 1.25rem 1.25rem;
		color: var(--text-secondary);
		line-height: 1.6;
	}

	/* ============ BUTTONS ============ */
	.btn-kcr-primary {
		background: var(--brand-accent);
		color: #fff;
		border: none;
		border-radius: 10px;
		padding: 0.8rem 1.5rem;
		font-weight: 600;
		font-size: 1rem;
		transition: var(--transition);
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
	}
	.btn-kcr-primary:hover {
		background: var(--brand-accent-hover);
		color: #fff;
		transform: translateY(-1px);
		box-shadow: 0 4px 12px rgba(0,0,0,.15);
	}
	.btn-kcr-outline {
		background: transparent;
		color: var(--brand-accent);
		border: 2px solid var(--brand-accent);
		border-radius: 10px;
		padding: 0.7rem 1.25rem;
		font-weight: 600;
		font-size: 0.95rem;
		transition: var(--transition);
	}
	.btn-kcr-outline:hover {
		background: var(--brand-accent);
		color: #fff;
	}
	.btn-kcr-primary.btn-sm,
	.btn-kcr-outline.btn-sm {
		padding: 0.5rem 0.9rem;
		font-size: 0.85rem;
	}

	/* ============ QUICK LINKS (Snabbvagar) ============ */
	.kcr-quick-links {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0.75rem;
	}
	.kcr-quick-link {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 0.5rem;
		padding: 1rem 0.75rem;
		background: #f8fafc;
		border: 1px solid var(--card-border);
		border-radius: 12px;
		text-decoration: none;
		color: var(--text-primary);
		font-weight: 600;
		font-size: 0.9rem;
		transition: var(--transition);
	}
	.kcr-quick-link:hover {
		background: var(--brand-soft);
		border-color: var(--brand-accent);
		color: var(--brand-accent);
		transform: translateY(-2px);
		box-shadow: 0 4px 12px rgba(0,0,0,.08);
	}
	.kcr-quick-link .bi {
		font-size: 1.5rem;
		color: var(--brand-accent);
	}

	/* ============ LAYOUT SPACING ============ */
	.kcr-section { margin-top: var(--section-gap); }
	.kcr-section-lg { margin-top: calc(var(--section-gap) * 1.5); }

	/* ============ RESPONSIVE ============ */
	@media (max-width: 991px) {
		.kcr-hero { padding: clamp(1.25rem, 4vw, 2rem); }
		.kcr-trustlist { gap: 0.5rem 1rem; }
	}

	@media (max-width: 767px) {
		.kcr-hero-stats {
			justify-content: space-between;
			gap: 1rem;
		}
		.kcr-hero-stats .stat-item {
			min-width: 70px;
		}
		.kcr-hero-stats .stat-item .bi {
			font-size: 1.5rem;
		}
		.kcr-hero-stats .stat-item .stat-number {
			font-size: 1rem;
		}
		.kcr-trustlist {
			flex-direction: column;
			gap: 0.4rem;
		}
		.kcr-trust .row { gap: 0.75rem 0; }
		.kcr-path-card::after { display: none; }
	}

	@media (max-width: 576px) {
		.kcr-hero { 
			border-radius: 12px;
			padding: 1.25rem;
		}
		.kcr-finder .nav-tabs .nav-link {
			padding: 0.5rem 0.25rem;
			font-size: 0.8rem;
		}
		.kcr-step-card { padding: 1rem; }
	}