/* ==========================================================================
   DDK — Dječji Doplatak Kalkulator
   Čisti CSS, bez frameworka. Sve klase imaju .ddk- prefiks da ne kolidiraju
   s temom. Mobile-first; custom properties za lako preskinavanje u temi.
   ========================================================================== */

:root {
	--ddk-navy: #14375f;
	--ddk-navy-light: #1d4c82;
	--ddk-amber: #e8a020;
	--ddk-amber-pale: #fdf4e3;
	--ddk-mint: #177a54;
	--ddk-mint-pale: #e7f5ee;
	--ddk-rose: #b02e2e;
	--ddk-rose-pale: #fdeeee;
	--ddk-slate-900: #1e293b;
	--ddk-slate-600: #475569;
	--ddk-slate-400: #94a3b8;
	--ddk-slate-200: #e2e8f0;
	--ddk-slate-50: #f8fafc;
	--ddk-radius: 14px;
	--ddk-radius-sm: 10px;
}

/* ---------- Kartica kalkulatora ---------- */
.ddk-card {
	background: #fff;
	border: 1px solid var(--ddk-slate-200);
	border-radius: var(--ddk-radius);
	box-shadow: 0 10px 30px rgba(20, 55, 95, 0.08);
	padding: 20px;
	max-width: 720px;
	margin: 0 auto;
	color: var(--ddk-slate-900);
	font-size: 16px;
	line-height: 1.5;
}
@media (min-width: 640px) {
	.ddk-card { padding: 28px; }
}

.ddk-card__title {
	margin: 0 0 4px;
	font-size: 1.3em;
	font-weight: 800;
	color: var(--ddk-navy);
}
.ddk-card__subtitle {
	margin: 0 0 20px;
	font-size: 0.875em;
	color: var(--ddk-slate-600);
}

/* ---------- Forma ---------- */
.ddk-form { display: grid; gap: 16px; }
.ddk-form__row--2col { display: grid; gap: 16px; }
@media (min-width: 640px) {
	.ddk-form__row--2col { grid-template-columns: 1fr 1fr; }
}

.ddk-field { display: block; }
.ddk-field__label {
	display: block;
	font-size: 0.875em;
	font-weight: 600;
	margin-bottom: 4px;
}
.ddk-field__hint {
	display: block;
	font-size: 0.75em;
	color: var(--ddk-slate-400);
	margin-top: 4px;
}

.ddk-input {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid #cbd5e1;
	border-radius: var(--ddk-radius-sm);
	padding: 12px 16px;
	font-size: 1.1em;
	background: #fff;
	color: var(--ddk-slate-900);
}
.ddk-input:focus {
	outline: 2px solid var(--ddk-navy-light);
	outline-offset: 0;
	border-color: var(--ddk-navy-light);
}

.ddk-input-wrap { position: relative; display: block; }
.ddk-input-wrap .ddk-input { padding-right: 40px; }
.ddk-input-wrap__suffix {
	position: absolute;
	right: 16px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--ddk-slate-400);
	font-weight: 600;
}

.ddk-check {
	display: flex;
	align-items: center;
	gap: 12px;
	background: var(--ddk-slate-50);
	border-radius: var(--ddk-radius-sm);
	padding: 12px 16px;
	cursor: pointer;
	font-size: 0.9em;
	user-select: none;
}
.ddk-check input {
	width: 20px;
	height: 20px;
	accent-color: var(--ddk-navy);
	flex-shrink: 0;
}
.ddk-check em { color: var(--ddk-slate-400); font-style: normal; }

.ddk-btn {
	width: 100%;
	border: 0;
	cursor: pointer;
	background: var(--ddk-navy);
	color: #fff;
	font-weight: 700;
	font-size: 1.1em;
	border-radius: var(--ddk-radius-sm);
	padding: 14px;
	transition: background 0.15s ease, transform 0.1s ease;
}
.ddk-btn:hover { background: var(--ddk-navy-light); }
.ddk-btn:active { transform: scale(0.99); }
.ddk-btn:focus-visible { outline: 3px solid var(--ddk-amber); outline-offset: 2px; }

/* ---------- Rezultat ---------- */
.ddk-result {
	margin-top: 24px;
	border: 1px solid var(--ddk-slate-200);
	border-radius: var(--ddk-radius);
	padding: 20px;
	background: var(--ddk-slate-50);
}
.ddk-result--positive { background: var(--ddk-mint-pale); border-color: rgba(23, 122, 84, 0.3); }
.ddk-result--negative { background: var(--ddk-rose-pale); border-color: rgba(176, 46, 46, 0.25); }

.ddk-result__status { margin: 0 0 4px; font-weight: 700; font-size: 1.1em; }
.ddk-result--positive .ddk-result__status { color: var(--ddk-mint); }
.ddk-result--negative .ddk-result__status { color: var(--ddk-rose); }
.ddk-result__details { margin: 0 0 16px; font-size: 0.9em; color: var(--ddk-slate-600); }

.ddk-result__amounts {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin-bottom: 20px;
}
.ddk-amount {
	background: rgba(255, 255, 255, 0.75);
	border-radius: var(--ddk-radius-sm);
	padding: 12px;
	text-align: center;
}
.ddk-amount__label {
	display: block;
	font-size: 0.7em;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--ddk-slate-600);
	margin-bottom: 2px;
}
.ddk-amount__value {
	display: block;
	font-size: 1.5em;
	font-weight: 800;
	color: var(--ddk-navy);
}

/* ---------- Cenzusna skala ---------- */
.ddk-scale__label {
	margin: 0 0 8px;
	font-size: 0.75em;
	font-weight: 600;
	color: var(--ddk-slate-600);
}
.ddk-scale__track {
	position: relative;
	height: 12px;
	border-radius: 999px;
	background: linear-gradient(
		90deg,
		#177a54 0%, #177a54 14.3%,
		#3e8e5f 14.3%, #3e8e5f 28.6%,
		#7fa23f 28.6%, #7fa23f 42.9%,
		#c79a2a 42.9%, #c79a2a 71.4%,
		#e8a020 71.4%, #e8a020 100%
	);
}
.ddk-scale__marker {
	position: absolute;
	top: -6px;
	left: 0;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: #fff;
	border: 4px solid var(--ddk-navy);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
	transition: left 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (prefers-reduced-motion: reduce) {
	.ddk-scale__marker, .ddk-btn { transition: none; }
}
.ddk-scale__legend {
	display: flex;
	justify-content: space-between;
	font-size: 0.65em;
	font-weight: 600;
	color: var(--ddk-slate-400);
	margin-top: 6px;
}

.ddk-result__extra {
	margin: 16px 0 0;
	font-size: 0.9em;
	background: var(--ddk-amber-pale);
	border-radius: var(--ddk-radius-sm);
	padding: 12px 16px;
}

.ddk-disclaimer {
	margin: 20px 0 0;
	font-size: 0.75em;
	color: var(--ddk-slate-400);
	line-height: 1.6;
}

/* ---------- Tablice ---------- */
.ddk-table-wrap {
	overflow-x: auto;
	border: 1px solid var(--ddk-slate-200);
	border-radius: var(--ddk-radius-sm);
	background: #fff;
	margin: 1em 0;
}
.ddk-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9em;
	margin: 0;
}
.ddk-th {
	background: var(--ddk-navy);
	color: #fff;
	text-align: left;
	font-weight: 600;
	padding: 12px 16px;
	border: 0;
}
.ddk-th--right { text-align: right; }
.ddk-td {
	padding: 12px 16px;
	border: 0;
	border-top: 1px solid #f1f5f9;
	color: var(--ddk-slate-600);
}
.ddk-td--grupa { font-weight: 700; color: var(--ddk-navy); white-space: nowrap; }
.ddk-td--iznos { font-weight: 700; color: var(--ddk-navy); text-align: right; white-space: nowrap; }

/* ---------- Rok box ---------- */
.ddk-rok-box {
	background: var(--ddk-amber-pale);
	border: 1px solid rgba(232, 160, 32, 0.3);
	border-radius: var(--ddk-radius-sm);
	padding: 16px;
	font-size: 0.9em;
	line-height: 1.6;
	margin: 1em 0;
}

/* ---------- FAQ accordion ---------- */
.ddk-faq { display: grid; gap: 12px; margin: 1em 0; }
.ddk-faq__item {
	background: #fff;
	border: 1px solid var(--ddk-slate-200);
	border-radius: var(--ddk-radius-sm);
}
.ddk-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 20px;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
	color: var(--ddk-slate-900);
}
.ddk-faq__q::-webkit-details-marker { display: none; }
.ddk-faq__chevron {
	color: var(--ddk-slate-400);
	transition: transform 0.2s ease;
	flex-shrink: 0;
}
.ddk-faq__item[open] .ddk-faq__chevron { transform: rotate(180deg); }
.ddk-faq__a {
	padding: 0 20px 16px;
	font-size: 0.9em;
	color: var(--ddk-slate-600);
	line-height: 1.65;
}
.ddk-faq__a p { margin: 0 0 0.75em; }
.ddk-faq__a p:last-child { margin-bottom: 0; }

/* ---------- Hero sekcija [ddk_hero] ---------- */
.ddk-hero {
	background: var(--ddk-navy);
	color: #fff;
	border-radius: var(--ddk-radius);
	padding: 40px 20px 48px;
	text-align: center;
	margin: 0 0 -28px; /* kalkulator "izviruje" preko ruba kao u prototipu */
	position: relative;
	z-index: 0;
}
.ddk-hero + .ddk-card { position: relative; z-index: 1; }
@media (min-width: 640px) {
	.ddk-hero { padding: 48px 32px 56px; }
}
.ddk-hero__inner { max-width: 640px; margin: 0 auto; }
.ddk-hero__badge {
	display: inline-block;
	background: rgba(255, 255, 255, 0.1);
	color: var(--ddk-amber);
	font-size: 0.7em;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	border-radius: 999px;
	padding: 5px 14px;
	margin: 0 0 16px;
}
.ddk-hero__title {
	color: #fff;
	font-size: 1.9em;
	font-weight: 800;
	line-height: 1.2;
	margin: 0 0 12px;
}
@media (min-width: 640px) {
	.ddk-hero__title { font-size: 2.3em; }
}
.ddk-hero__subtitle {
	color: #cbd5e1;
	font-size: 1em;
	line-height: 1.6;
	margin: 0 0 24px;
}
.ddk-hero__cta {
	display: inline-block;
	background: var(--ddk-amber);
	color: var(--ddk-navy) !important;
	font-weight: 700;
	font-size: 1.1em;
	border-radius: var(--ddk-radius-sm);
	padding: 14px 32px;
	text-decoration: none !important;
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
	transition: filter 0.15s ease, transform 0.1s ease;
}
.ddk-hero__cta:hover { filter: brightness(1.05); color: var(--ddk-navy); }
.ddk-hero__cta:active { transform: scale(0.98); }
.ddk-hero__note {
	color: var(--ddk-slate-400);
	font-size: 0.75em;
	margin: 16px 0 0;
}

/* ---------- Tipografija: ne ovisi o fontu teme ---------- */
.ddk-hero, .ddk-card, .ddk-table, .ddk-faq, .ddk-rok-box {
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}