/* Kortregister för Bästa kreditkort. Färgerna hämtas från temat via variabler och har egna reservvärden. */
.bkn-lista,
.bkn-fakta,
.bkn-kalkyl {
	--k-blak: var(--bkn-blak, #1d2357);
	--k-text: var(--bkn-text, #1c2133);
	--k-dampad: var(--bkn-dampad, #596079);
	--k-linje: var(--bkn-linje, #dde2ec);
	--k-yta: var(--bkn-yta, #ffffff);
	--k-papper: var(--bkn-papper, #f4f6fa);
	--k-gron: var(--bkn-gron, #0b7a5c);
	--k-gron-mork: var(--bkn-gron-mork, #075e46);
	--k-gron-ljus: var(--bkn-gron-ljus, #e3f3ed);
	--k-chip: var(--bkn-chip, #c9a227);
	box-sizing: border-box;
}
.bkn-lista *,
.bkn-fakta *,
.bkn-kalkyl * {
	box-sizing: border-box;
}

/* Topplistan */
.entry-content ol.bkn-lista,
ol.bkn-lista {
	list-style: none;
	margin: 1.6em 0 2em;
	padding: 0;
	background: var(--k-yta);
	border: 1px solid var(--k-linje);
	border-radius: 14px;
	overflow: hidden;
}
.bkn-rad {
	display: grid;
	grid-template-columns: 172px minmax(0, 1fr) 214px;
	grid-template-areas:
		"kort info handling"
		"exempel exempel exempel";
	column-gap: 24px;
	row-gap: 10px;
	padding: 22px 24px 18px;
	margin: 0;
	border-top: 1px solid var(--k-linje);
	position: relative;
}
.bkn-rad:first-child {
	border-top: 0;
}
.bkn-rad--billigast {
	background: linear-gradient(90deg, var(--k-gron-ljus) 0, var(--k-gron-ljus) 6px, var(--k-yta) 6px);
}
.bkn-rad__kort {
	grid-area: kort;
	position: relative;
	align-self: start;
}
.bkn-rad__bild {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 7px;
	box-shadow: 0 1px 0 rgba(29, 35, 87, 0.08), 0 6px 14px -8px rgba(29, 35, 87, 0.45);
}
.bkn-rad__plats {
	position: absolute;
	top: -9px;
	left: -9px;
	z-index: 1;
	min-width: 28px;
	height: 28px;
	padding: 0 6px;
	border-radius: 14px;
	background: var(--k-blak);
	color: #fff;
	font-weight: 750;
	font-size: 14px;
	line-height: 28px;
	text-align: center;
	font-variant-numeric: tabular-nums;
	box-shadow: 0 0 0 3px var(--k-yta);
}
.bkn-rad--billigast .bkn-rad__plats {
	background: var(--k-gron);
}
.bkn-rad__info {
	grid-area: info;
	min-width: 0;
}
.bkn-rad__etikett {
	display: inline-block;
	margin: 0 0 6px;
	padding: 2px 10px;
	border-radius: 999px;
	background: var(--k-papper);
	color: var(--k-blak);
	font-size: 13px;
	font-weight: 650;
	line-height: 1.6;
}
.entry-content .bkn-rad__namn,
.bkn-rad__namn {
	margin: 0 0 4px;
	font-size: 1.22rem;
	line-height: 1.25;
	font-weight: 750;
}
.bkn-rad__namn a {
	color: var(--k-blak);
	text-decoration: none;
}
.bkn-rad__namn a:hover,
.bkn-rad__namn a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}
.entry-content .bkn-rad__passar,
.bkn-rad__passar {
	margin: 0 0 12px;
	color: var(--k-dampad);
	font-size: 15px;
	line-height: 1.45;
}
.bkn-rad__fakta {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 8px 14px;
	margin: 0;
}
.bkn-rad__fakta div {
	margin: 0;
	padding-top: 6px;
	border-top: 2px solid var(--k-papper);
}
.entry-content .bkn-rad__fakta dt,
.bkn-rad__fakta dt {
	margin: 0;
	color: var(--k-dampad);
	font-size: 12.5px;
	font-weight: 500;
	line-height: 1.3;
}
.entry-content .bkn-rad__fakta dd,
.bkn-rad__fakta dd {
	margin: 2px 0 0;
	color: var(--k-text);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
}
.bkn-rad__handling {
	grid-area: handling;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: center;
	gap: 8px;
	text-align: center;
}
.entry-content .bkn-rad__kostnad,
.bkn-rad__kostnad {
	margin: 0 0 4px;
	line-height: 1.15;
}
.bkn-rad__kr {
	display: block;
	color: var(--k-blak);
	font-size: 1.7rem;
	font-weight: 800;
	letter-spacing: -0.01em;
	font-variant-numeric: tabular-nums;
}
.bkn-rad__kr small {
	margin-left: 2px;
	font-size: 0.55em;
	font-weight: 700;
	letter-spacing: 0;
}
.bkn-rad--billigast .bkn-rad__kr {
	color: var(--k-gron-mork);
}
.bkn-rad__kr-text {
	display: block;
	color: var(--k-dampad);
	font-size: 12.5px;
}
.bkn-lista .bkn-rad__exempel {
	grid-area: exempel;
}
.entry-content .bkn-rad__exempel,
.bkn-rad__exempel {
	margin: 4px 0 0;
	color: var(--k-dampad);
	font-size: 12.5px;
	line-height: 1.5;
}
.bkn-rad__exempel strong {
	color: var(--k-text);
	font-weight: 650;
}

/* Knappar */
.entry-content a.bkn-knapp,
a.bkn-knapp {
	display: inline-block;
	padding: 12px 18px;
	border-radius: 8px;
	background: var(--k-gron);
	color: #fff;
	font-weight: 700;
	font-size: 16px;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.15s ease;
}
.entry-content a.bkn-knapp:hover,
a.bkn-knapp:hover,
a.bkn-knapp:focus-visible {
	background: var(--k-gron-mork);
	color: #fff;
}
a.bkn-knapp:focus-visible,
a.bkn-lank:focus-visible {
	outline: 3px solid var(--k-chip);
	outline-offset: 2px;
}
.entry-content a.bkn-lank,
a.bkn-lank {
	color: var(--k-blak);
	font-size: 14.5px;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Kalkylen */
.bkn-kalkyl {
	margin: 0;
	padding: 22px 22px 18px;
	background: var(--k-yta);
	color: var(--k-text);
	border-radius: 14px;
	box-shadow: 0 18px 40px -24px rgba(9, 12, 40, 0.6);
}
.bkn-kalkyl__rubrik {
	margin: 0 0 14px;
	color: var(--k-blak);
	font-size: 1.15rem;
	font-weight: 750;
}
.bkn-kalkyl__falt {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: baseline;
	gap: 4px 12px;
	margin-bottom: 16px;
}
.bkn-kalkyl__falt label {
	font-size: 15px;
	font-weight: 600;
}
.bkn-kalkyl__falt output {
	color: var(--k-blak);
	font-weight: 800;
	font-size: 17px;
	font-variant-numeric: tabular-nums;
}
.bkn-kalkyl__falt input[type="range"] {
	grid-column: 1 / -1;
	width: 100%;
	margin: 6px 0 0;
	accent-color: var(--k-blak);
	min-height: 28px;
}
.bkn-kalkyl__svar {
	margin: 4px 0 8px;
	padding: 12px 14px;
	border-radius: 10px;
	background: var(--k-gron-ljus);
	color: var(--k-gron-mork);
	font-size: 15.5px;
	line-height: 1.45;
}
.bkn-kalkyl__svar strong {
	color: var(--k-gron-mork);
}
.bkn-kalkyl__not {
	margin: 0;
	color: var(--k-dampad);
	font-size: 12.5px;
	line-height: 1.45;
}

/* Faktarutan på kortsidorna */
.bkn-fakta {
	margin: 0 0 2em;
	border: 1px solid var(--k-linje);
	border-radius: 14px;
	background: var(--k-yta);
	overflow: hidden;
}
.bkn-fakta__topp {
	display: grid;
	grid-template-columns: 220px minmax(0, 1fr);
	gap: 24px;
	align-items: center;
	padding: 24px;
	background: var(--k-papper);
}
.bkn-fakta__bild {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 9px;
	box-shadow: 0 10px 24px -14px rgba(29, 35, 87, 0.6);
}
.bkn-fakta__handling {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
}
.entry-content .bkn-fakta__etikett,
.bkn-fakta__etikett {
	margin: 0;
	color: var(--k-blak);
	font-weight: 700;
	font-size: 1.05rem;
}
.entry-content .bkn-fakta__datum,
.bkn-fakta__datum {
	margin: 0;
	color: var(--k-dampad);
	font-size: 13.5px;
}
.bkn-fakta__lista {
	margin: 0;
	padding: 6px 24px 8px;
}
.bkn-fakta__lista div {
	display: grid;
	grid-template-columns: 190px minmax(0, 1fr);
	align-items: baseline;
	gap: 16px;
	padding: 11px 0;
	border-bottom: 1px solid var(--k-linje);
}
.bkn-fakta__lista div:last-child {
	border-bottom: 0;
}
.entry-content .bkn-fakta__lista dt,
.bkn-fakta__lista dt {
	margin: 0;
	padding: 0;
	font-weight: 500;
	color: var(--k-dampad);
	font-size: 15px;
}
.entry-content .bkn-fakta__lista dd,
.bkn-fakta__lista dd {
	margin: 0;
	padding: 0;
	color: var(--k-text);
	font-weight: 650;
	font-size: 15.5px;
}
.entry-content .bkn-fakta__exempel,
.bkn-fakta__exempel {
	margin: 0;
	padding: 14px 24px 18px;
	border-top: 1px solid var(--k-linje);
	color: var(--k-dampad);
	font-size: 13.5px;
	line-height: 1.55;
}
.bkn-fakta__exempel strong {
	color: var(--k-text);
}

@media (max-width: 900px) {
	.bkn-lista .bkn-rad {
		grid-template-columns: 132px minmax(0, 1fr);
		grid-template-areas:
			"kort info"
			"handling handling"
			"exempel exempel";
		padding: 20px 18px 16px;
	}
	.bkn-lista .bkn-rad__fakta {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.bkn-lista .bkn-rad__handling {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: flex-start;
		text-align: left;
		padding-top: 6px;
	}
	.bkn-rad__kostnad {
		flex: 1 1 100%;
	}
	.bkn-rad__kr {
		display: inline;
		font-size: 1.45rem;
		margin-right: 8px;
	}
	.bkn-rad__kr-text {
		display: inline;
	}
	a.bkn-knapp {
		flex: 1 1 auto;
	}
}
@media (max-width: 560px) {
	.bkn-lista .bkn-rad {
		grid-template-columns: 96px minmax(0, 1fr);
		grid-template-areas: none;
		column-gap: 14px;
		row-gap: 8px;
		padding: 18px 16px 14px;
	}
	.bkn-lista .bkn-rad .bkn-rad__info {
		display: contents;
	}
	.bkn-lista .bkn-rad .bkn-rad__kort {
		grid-area: auto;
		grid-column: 1;
		grid-row: 1 / span 3;
	}
	.bkn-lista .bkn-rad .bkn-rad__etikett,
	.bkn-lista .bkn-rad .bkn-rad__namn,
	.bkn-lista .bkn-rad .bkn-rad__passar {
		grid-area: auto;
		grid-column: 2;
		justify-self: start;
		margin: 0;
	}
	.bkn-lista .bkn-rad .bkn-rad__fakta,
	.bkn-lista .bkn-rad .bkn-rad__handling,
	.bkn-lista .bkn-rad .bkn-rad__exempel {
		grid-area: auto;
		grid-column: 1 / -1;
	}
	.bkn-lista .bkn-rad .bkn-rad__fakta {
		margin-top: 6px;
	}
	.bkn-fakta .bkn-fakta__topp {
		grid-template-columns: 1fr;
		padding: 18px;
	}
	.bkn-fakta .bkn-fakta__bild {
		max-width: 260px;
	}
	.bkn-fakta .bkn-fakta__lista {
		padding: 4px 18px 6px;
	}
	.bkn-fakta .bkn-fakta__lista div {
		grid-template-columns: 1fr;
		gap: 2px;
	}
	.entry-content .bkn-fakta .bkn-fakta__exempel {
		padding: 12px 18px 16px;
	}
}
@media (prefers-reduced-motion: reduce) {
	a.bkn-knapp {
		transition: none;
	}
}

/* Cashbackkalkylen */
.bkn-cashback {
	margin: 1.6em 0 2em;
}
.bkn-cashback .bkn-kalkyl {
	border: 1px solid var(--bkn-linje, #dde2ec);
	margin-bottom: 1.2em;
}
.entry-content .bkn-cashback table.bkn-tabell {
	margin-top: 0;
}
.bkn-cashback__not {
	display: block;
	margin-top: 2px;
	color: var(--bkn-dampad, #596079);
	font-size: 13px;
	font-weight: 400;
	line-height: 1.4;
}
.bkn-cashback [data-bkn-netto] {
	font-weight: 700;
	white-space: nowrap;
}

/* Räntekalkylen */
.bkn-rantekalkyl {
	border: 1px solid var(--bkn-linje, #dde2ec);
	margin: 1.6em 0 2em;
}
.bkn-rantekalkyl select {
	grid-column: 1 / -1;
	width: 100%;
	min-height: 44px;
	padding: 8px 10px;
	border: 1px solid var(--k-linje);
	border-radius: 8px;
	background: var(--k-yta);
	color: var(--k-text);
	font: inherit;
	font-size: 15px;
}
.entry-content dl.bkn-rantekalkyl__res,
.bkn-rantekalkyl__res {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	margin: 6px 0 12px;
	padding: 0;
}
.bkn-rantekalkyl__res > div {
	padding: 10px 12px;
	border-radius: 10px;
	background: var(--k-papper);
}
.entry-content .bkn-rantekalkyl__res dt,
.bkn-rantekalkyl__res dt {
	margin: 0;
	color: var(--k-dampad);
	font-size: 13px;
	font-weight: 600;
}
.entry-content .bkn-rantekalkyl__res dd,
.bkn-rantekalkyl__res dd {
	margin: 2px 0 0;
	color: var(--k-blak);
	font-size: 18px;
	font-weight: 800;
}
@media (max-width: 560px) {
	.entry-content dl.bkn-rantekalkyl__res,
	.bkn-rantekalkyl__res {
		grid-template-columns: 1fr;
	}
	.bkn-rantekalkyl__res > div {
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		gap: 12px;
	}
}
.bkn-rantekalkyl .bkn-kalkyl__falt output {
	font-variant-numeric: normal;
}