/*
 * JobPro Förderrechner – Frontend Styles
 * Alle Selektoren sind unter `.jp-fr` gescoped, um Konflikte mit dem
 * Impreza-Theme und WPBakery zu vermeiden.
 */

.jp-fr,
.jp-fr *,
.jp-fr *::before,
.jp-fr *::after {
	box-sizing: border-box;
}

.jp-fr {
	--jp-teal: #2ec4b6;
	--jp-teal-dark: #25a89c;
	--jp-navy: #0d2b47;
	--jp-text: #0d2b47;
	--jp-muted: #5b6b7d;
	--jp-border: #dfe7ec;
	--jp-card-bg: #ffffff;
	--jp-page-bg: #ffffff;
	--jp-track-bg: #e6ebef;
	--jp-disclaimer: #5b6b7d;
	--jp-radius-card: 16px;
	--jp-radius-input: 12px;
	--jp-radius-pill: 8px;
	--jp-shadow-card: 0 2px 16px rgba(13, 43, 71, 0.06);
	--jp-shadow-card-strong: 0 8px 32px rgba(13, 43, 71, 0.08);
	--jp-font: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

	font-family: var(--jp-font);
	color: var(--jp-text);
	line-height: 1.6;
	font-size: 16px;
}

/* ---------- Layout ---------- */

.jp-fr__container {
	max-width: 1200px;
	margin: 0 auto;
	background: linear-gradient(180deg, #ffffff 0%, #eaf7f5 100%);
	border-radius: var(--jp-radius-card);
	box-shadow: var(--jp-shadow-card-strong);
	overflow: hidden;
}

.jp-fr__calculator {
	display: flex;
	flex-direction: column;
}

.jp-fr__content {
	display: flex;
	flex-direction: column;
	flex: 1;
}

.jp-fr__main {
	display: flex;
	flex-direction: column;
	gap: 0;
}

@media (min-width: 900px) {
	.jp-fr__main {
		flex-direction: row;
	}
}

.jp-fr__input-section,
.jp-fr__results-section {
	padding: 2rem;
	flex: 1 1 0;
	min-width: 0;
}

@media (min-width: 900px) {
	.jp-fr__input-section {
		padding: 2.5rem;
	}

	.jp-fr__results-section {
		padding: 2.5rem;
		border-left: 1px solid rgba(13, 43, 71, 0.06);
	}
}

/* ---------- Headings ---------- */

.jp-fr__section-title {
	font-size: 1.6rem;
	line-height: 1.2;
	color: var(--jp-navy);
	font-weight: 700;
	margin: 0 0 1.5rem;
}

@media (min-width: 768px) {
	.jp-fr__section-title {
		font-size: 1.8rem;
	}
}

.jp-fr__breakdown-title {
	font-size: 1rem;
	font-weight: 600;
	color: var(--jp-navy);
	margin: 0 0 0.75rem;
}

/* ---------- Inputs ---------- */

.jp-fr__input-group {
	margin-bottom: 1.5rem;
}

.jp-fr__input-label {
	display: block;
	font-weight: 600;
	margin-bottom: 0.5rem;
	color: var(--jp-navy);
	font-size: 0.95rem;
}

.jp-fr__button-group {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.jp-fr__select-button {
	padding: 0.6rem 1rem;
	background-color: #ffffff;
	color: var(--jp-navy);
	border: 1px solid var(--jp-border);
	border-radius: var(--jp-radius-pill);
	cursor: pointer;
	transition: all 0.18s ease;
	font-weight: 600;
	font-family: inherit;
	font-size: 0.9rem;
	line-height: 1.2;
}

.jp-fr__select-button:hover {
	border-color: var(--jp-teal);
	color: var(--jp-teal-dark);
}

.jp-fr__select-button.is-active {
	background-color: var(--jp-teal);
	border-color: var(--jp-teal);
	color: #ffffff;
	box-shadow: 0 2px 8px rgba(46, 196, 182, 0.3);
}

.jp-fr__select-button.is-active:hover {
	background-color: var(--jp-teal-dark);
	border-color: var(--jp-teal-dark);
	color: #ffffff;
}

.jp-fr__checkbox-group {
	margin-top: 0.25rem;
}

.jp-fr__checkbox-label {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	cursor: pointer;
	color: var(--jp-navy);
	font-size: 0.95rem;
	font-weight: 500;
}

.jp-fr__checkbox-label input[type="checkbox"] {
	width: 1.05rem;
	height: 1.05rem;
	accent-color: var(--jp-teal);
	margin: 0;
}

.jp-fr__value-display {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: #ffffff;
	padding: 0.75rem 1rem;
	border-radius: var(--jp-radius-input);
	border: 1px solid var(--jp-border);
	margin-bottom: 0.5rem;
	font-weight: 700;
	color: var(--jp-navy);
}

.jp-fr__value-display--single {
	font-weight: 700;
	color: var(--jp-navy);
}

.jp-fr__value-display input[type="number"] {
	width: 100%;
	border: none;
	background: transparent;
	font-weight: 700;
	font-family: inherit;
	font-size: 1rem;
	color: var(--jp-navy);
	outline: none;
	text-align: right;
	padding: 0;
	-moz-appearance: textfield;
}

.jp-fr__value-display input[type="number"]::-webkit-outer-spin-button,
.jp-fr__value-display input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.jp-fr__value-suffix {
	margin-left: 0.5rem;
	color: var(--jp-muted);
	font-weight: 600;
}

/* ---------- Slider ---------- */

.jp-fr__slider-container {
	margin-top: 0.25rem;
}

.jp-fr__slider {
	width: 100%;
	height: 6px;
	background: var(--jp-track-bg);
	border-radius: 3px;
	-webkit-appearance: none;
	appearance: none;
	outline: none;
	margin: 0.5rem 0;
	cursor: pointer;
}

.jp-fr__slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 18px;
	height: 18px;
	background: var(--jp-teal);
	border-radius: 50%;
	border: 2px solid #ffffff;
	box-shadow: 0 1px 4px rgba(13, 43, 71, 0.2);
	cursor: pointer;
}

.jp-fr__slider::-moz-range-thumb {
	width: 16px;
	height: 16px;
	background: var(--jp-teal);
	border-radius: 50%;
	border: 2px solid #ffffff;
	box-shadow: 0 1px 4px rgba(13, 43, 71, 0.2);
	cursor: pointer;
}

.jp-fr__slider::-moz-range-track {
	height: 6px;
	background: var(--jp-track-bg);
	border-radius: 3px;
}

.jp-fr__slider-range {
	display: flex;
	justify-content: space-between;
	font-size: 0.78rem;
	color: var(--jp-muted);
}

/* ---------- Results ---------- */

.jp-fr__results-section {
	background: rgba(255, 255, 255, 0.6);
}

.jp-fr__results-content {
	text-align: center;
}

.jp-fr__results-header {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	margin-bottom: 0.75rem;
}

.jp-fr__results-icon {
	width: 130px;
	height: 130px;
	object-fit: contain;
}

.jp-fr__results-title {
	font-size: 1.4rem;
	font-weight: 700;
	color: var(--jp-navy);
	margin: 0;
}

@media (min-width: 768px) {
	.jp-fr__results-title {
		font-size: 1.6rem;
	}
}

.jp-fr__total-amount {
	font-size: 2.2rem;
	font-weight: 800;
	color: var(--jp-teal);
	margin: 0 0 1.25rem;
	letter-spacing: -0.5px;
}

@media (min-width: 768px) {
	.jp-fr__total-amount {
		font-size: 2.5rem;
	}
}

.jp-fr__breakdown {
	background-color: #ffffff;
	border-radius: var(--jp-radius-card);
	border: 1px solid var(--jp-border);
	padding: 1.25rem;
	text-align: left;
	color: var(--jp-text);
	box-shadow: var(--jp-shadow-card);
}

.jp-fr__row {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 0.5rem;
	font-size: 0.93rem;
}

.jp-fr__row > :first-child {
	color: var(--jp-muted);
	flex: 1 1 auto;
}

.jp-fr__row > :last-child {
	color: var(--jp-navy);
	font-weight: 600;
	white-space: nowrap;
}

.jp-fr__row--highlight > :last-child {
	color: var(--jp-teal-dark);
	font-weight: 700;
}

.jp-fr__row--total {
	border-top: 1px solid var(--jp-border);
	padding-top: 0.6rem;
	margin-top: 0.5rem;
	font-weight: 700;
}

.jp-fr__row--total > :first-child,
.jp-fr__row--total > :last-child {
	color: var(--jp-navy);
	font-weight: 700;
}

.jp-fr__row--spaced {
	margin-top: 1rem;
}

/* ---------- Disclaimer ---------- */

.jp-fr__disclaimer {
	font-size: 0.72rem;
	color: var(--jp-disclaimer);
	text-align: left;
	padding: 1.5rem 2rem 2rem;
	background: transparent;
	width: 100%;
}

.jp-fr__disclaimer p {
	margin: 0 0 0.4rem;
}

.jp-fr__disclaimer p:last-child {
	margin-bottom: 0;
}

/* ---------- Dark Theme (Original-Look) ---------- */

.jp-fr.jp-fr--theme-dark {
	--jp-teal: #c4d600;
	--jp-teal-dark: #a8b800;
	--jp-lime: #c4d600;
	--jp-lime-dark: #a8b800;
	--jp-navy: #ffffff;
	--jp-text: #ffffff;
	--jp-muted: #cccccc;
	--jp-border: #6f6f6e;
	--jp-card-bg: #838382;
	--jp-page-bg: #838382;
	--jp-track-bg: #666666;
	--jp-disclaimer: #cccccc;
	--jp-shadow-card: none;
	--jp-shadow-card-strong: none;
}

.jp-fr.jp-fr--theme-dark .jp-fr__container {
	background: #838382;
}

.jp-fr.jp-fr--theme-dark .jp-fr__results-section {
	background: #838382;
	border-left-color: rgba(255, 255, 255, 0.08);
}

.jp-fr.jp-fr--theme-dark .jp-fr__select-button {
	background-color: #ffffff;
	color: #333333;
	border-color: #ddd;
}

.jp-fr.jp-fr--theme-dark .jp-fr__select-button.is-active {
	background-color: #c4d600;
	border-color: #c4d600;
	color: #ffffff;
}

.jp-fr.jp-fr--theme-dark .jp-fr__value-display {
	background-color: #ffffff;
	color: #333333;
	border-color: #ffffff;
}

.jp-fr.jp-fr--theme-dark .jp-fr__value-display input[type="number"] {
	color: #333333;
}

.jp-fr.jp-fr--theme-dark .jp-fr__total-amount {
	color: #ffffff;
}

.jp-fr.jp-fr--theme-dark .jp-fr__section-title,
.jp-fr.jp-fr--theme-dark .jp-fr__results-title {
	color: #c4d600;
}

.jp-fr.jp-fr--theme-dark .jp-fr__breakdown {
	background: #ffffff;
	color: #333333;
	border-color: #ffffff;
}

.jp-fr.jp-fr--theme-dark .jp-fr__row > :first-child {
	color: #555555;
}

.jp-fr.jp-fr--theme-dark .jp-fr__row > :last-child {
	color: #333333;
}

.jp-fr.jp-fr--theme-dark .jp-fr__row--highlight > :last-child {
	color: #e30613;
}

.jp-fr.jp-fr--theme-dark .jp-fr__row--total > :first-child,
.jp-fr.jp-fr--theme-dark .jp-fr__row--total > :last-child {
	color: #a8b800;
}

.jp-fr.jp-fr--theme-dark .jp-fr__breakdown-title,
.jp-fr.jp-fr--theme-dark .jp-fr__input-label,
.jp-fr.jp-fr--theme-dark .jp-fr__checkbox-label,
.jp-fr.jp-fr--theme-dark .jp-fr__slider-range {
	color: #ffffff;
}