/*
 * Kreditkompass Intjäningskalkylator – frontend-stil (Fas 4, Del D).
 * Design låst enligt intjaningskalkylator-mockup.html. Alla regler skopade
 * under .kk-pk-intjaningskalkylator. Samma tokenmönster som Del A/B.
 */
.kk-pk-intjaningskalkylator {
	--kk-pk-marinbla: #185FA5;
	--kk-pk-gron: #1D9E75;
	--kk-pk-ljusbla: #E6F1FB;
	--kk-pk-antracit: #2C2C2A;
	--kk-pk-vit: #FFFFFF;

	font-family: 'DM Sans', sans-serif;
	color: var(--kk-pk-antracit);
	font-size: 17px;
	line-height: 1.6;
	max-width: 1140px;
	margin: 0 auto;
}
.kk-pk-intjaningskalkylator * { box-sizing: border-box; }
.kk-pk-intjaningskalkylator [hidden] { display: none !important; }

.kk-pk-intjaningskalkylator label {
	display: block; font-weight: 700; color: var(--kk-pk-marinbla);
	font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 8px;
}
.kk-pk-intjaningskalkylator select,
.kk-pk-intjaningskalkylator input[type="text"] {
	width: 100%; padding: 11px 13px; border-radius: 10px; border: 1px solid rgba(24,95,165,0.3);
	background: var(--kk-pk-vit); font-family: 'DM Sans', sans-serif; font-size: 0.95rem; color: var(--kk-pk-antracit);
}
.kk-pk-intjaningskalkylator select:disabled,
.kk-pk-intjaningskalkylator input:disabled { background: #F5F5F4; color: rgba(44,44,42,0.4); }

.kk-pk-intjaningskalkylator .kk-pk-int-settings-bar { display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 22px; }
.kk-pk-intjaningskalkylator .kk-pk-int-settings-field { width: 260px; max-width: 100%; }

.kk-pk-intjaningskalkylator .kk-pk-int-segment {
	background: var(--kk-pk-ljusbla); border-left: 4px solid var(--kk-pk-marinbla); border-radius: 14px;
	padding: 22px 22px 24px; margin-bottom: 18px;
}
.kk-pk-intjaningskalkylator .kk-pk-int-segment-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.kk-pk-intjaningskalkylator .kk-pk-int-segment-title { font-weight: 700; color: var(--kk-pk-marinbla); font-size: 0.95rem; }
.kk-pk-intjaningskalkylator .kk-pk-int-segment-actions { display: flex; align-items: center; gap: 10px; }
.kk-pk-intjaningskalkylator .kk-pk-int-type-toggle { display: flex; gap: 8px; }

.kk-pk-intjaningskalkylator .kk-pk-pill-toggle {
	border: 1.5px solid var(--kk-pk-marinbla); background: var(--kk-pk-vit); color: var(--kk-pk-marinbla); font-weight: 600;
	font-size: 0.85rem; padding: 7px 15px; border-radius: 999px; cursor: pointer;
}
.kk-pk-intjaningskalkylator .kk-pk-pill-toggle.active { background: var(--kk-pk-marinbla); color: var(--kk-pk-vit); }
.kk-pk-intjaningskalkylator .kk-pk-int-remove-btn {
	width: 28px; height: 28px; border-radius: 8px; border: none; background: transparent; color: rgba(44,44,42,0.5);
	font-size: 1.1rem; cursor: pointer; line-height: 1;
}
.kk-pk-intjaningskalkylator .kk-pk-int-remove-btn:hover { color: #B3261E; }

.kk-pk-intjaningskalkylator .kk-pk-int-field-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 620px) {
	.kk-pk-intjaningskalkylator .kk-pk-int-field-grid.kk-pk-int-g3 { grid-template-columns: 1fr 1fr 1fr; }
	.kk-pk-intjaningskalkylator .kk-pk-int-field-grid.kk-pk-int-g2 { grid-template-columns: 1fr 1fr; }
}

.kk-pk-intjaningskalkylator .kk-pk-int-kabin-toggle { display: flex; gap: 8px; }
.kk-pk-intjaningskalkylator .kk-pk-pill-toggle.kk-pk-kabin-economy.active { background: var(--kabin-economy, var(--kk-pk-marinbla)); border-color: var(--kabin-economy, var(--kk-pk-marinbla)); }
.kk-pk-intjaningskalkylator .kk-pk-pill-toggle.kk-pk-kabin-business.active { background: var(--kabin-business, var(--kk-pk-gron)); border-color: var(--kabin-business, var(--kk-pk-gron)); }

.kk-pk-intjaningskalkylator .kk-pk-int-segment-result {
	margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(24,95,165,0.15);
	display: flex; gap: 18px; flex-wrap: wrap; font-size: 0.9rem;
}
.kk-pk-intjaningskalkylator .kk-pk-int-segment-result strong { color: var(--kk-pk-marinbla); }
.kk-pk-intjaningskalkylator .kk-pk-int-segment-error { margin-top: 14px; font-size: 0.85rem; color: #B3261E; }

.kk-pk-intjaningskalkylator .kk-pk-int-add-segment-row { display: flex; justify-content: center; margin-bottom: 36px; }
.kk-pk-intjaningskalkylator .kk-pk-int-add-segment {
	display: flex; align-items: center; gap: 8px; padding: 11px 24px;
	background: var(--kk-pk-vit); color: var(--kk-pk-marinbla); border: 1.5px solid var(--kk-pk-marinbla); border-radius: 999px;
	font-weight: 700; font-size: 0.92rem; cursor: pointer;
}
.kk-pk-intjaningskalkylator .kk-pk-int-add-segment:hover { background: var(--kk-pk-ljusbla); }

.kk-pk-intjaningskalkylator .kk-pk-int-summary-panel {
	border: 1px solid rgba(24,95,165,0.18); border-radius: 16px; padding: 28px 32px;
	display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px;
}
.kk-pk-intjaningskalkylator .kk-pk-int-summary-main { display: flex; gap: 56px; flex-wrap: wrap; justify-content: center; }
.kk-pk-intjaningskalkylator .kk-pk-int-stat-value { font-family: 'DM Serif Display', serif; font-size: 2.6rem; line-height: 1.1; }
.kk-pk-intjaningskalkylator .kk-pk-int-stat-value.kk-pk-int-bonus { color: var(--kk-pk-marinbla); }
.kk-pk-intjaningskalkylator .kk-pk-int-stat-value.kk-pk-int-level { color: var(--kk-pk-gron); }
.kk-pk-intjaningskalkylator .kk-pk-int-stat-label { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: rgba(44,44,42,0.55); margin-top: 4px; }
.kk-pk-intjaningskalkylator .kk-pk-int-summary-secondary { font-size: 0.85rem; color: rgba(44,44,42,0.5); margin-top: 10px; }
.kk-pk-intjaningskalkylator .kk-pk-int-summary-secondary strong { color: rgba(44,44,42,0.65); font-weight: 600; }
.kk-pk-intjaningskalkylator .kk-pk-int-summary-note { font-size: 0.78rem; color: rgba(44,44,42,0.45); margin-top: 4px; max-width: 480px; }

@media (max-width: 420px) {
	.kk-pk-intjaningskalkylator .kk-pk-int-summary-panel { padding: 22px 18px; }
	.kk-pk-intjaningskalkylator .kk-pk-int-summary-main { gap: 28px; }
	.kk-pk-intjaningskalkylator .kk-pk-int-stat-value { font-size: 2.1rem; }
	.kk-pk-intjaningskalkylator .kk-pk-int-settings-field { width: 100%; }
}

.kk-pk-intjaningskalkylator .kk-pk-data-note { font-size: 0.82rem; color: rgba(44,44,42,0.65); margin-top: 20px; }
.kk-pk-intjaningskalkylator .kk-pk-loading { color: rgba(44,44,42,0.55); font-style: italic; }