/*
 * Poliglot forma
 * Sve je pod .pgf da se ne sudara sa temom.
 * Boje su preuzete iz Poliglot prezentacije: tamnoplava, narandžasti akcenat,
 * svetlo siva kartica. Fontovi su sistemski — bez Google Fonts, jer eksterno
 * učitavanje fontova u EU traži saglasnost posetioca.
 */

.pgf {
	--pgf-navy: #1f2d4e;
	--pgf-ink: #16223c;
	--pgf-akcent: #e4622e;
	--pgf-akcent-tamni: #c44f20;
	--pgf-kartica: #f1f3f7;
	--pgf-linija: #dde3ec;
	--pgf-tiho: #6b7a90;
	--pgf-bela: #ffffff;
	--pgf-greska: #c02626;
	--pgf-uspeh: #14764f;

	--pgf-r: 10px;
	--pgf-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
	--pgf-sans: inherit;

	max-width: 720px;
	margin: 0 auto;
	color: var(--pgf-ink);
	font-family: var(--pgf-sans);
	line-height: 1.55;
	text-align: left;
}

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

/* ---------- Zaglavlje ---------- */

.pgf__header {
	margin-bottom: 2rem;
}

.pgf__eyebrow {
	margin: 0 0 0.5rem;
	color: var(--pgf-akcent);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.pgf__title {
	margin: 0 0 0.6rem;
	color: var(--pgf-navy);
	font-family: var(--pgf-serif);
	font-size: clamp(1.6rem, 4vw, 2.35rem);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.01em;
}

.pgf__lede {
	margin: 0;
	max-width: 46ch;
	color: var(--pgf-tiho);
	font-size: 1rem;
}

/* ---------- Polja ---------- */

.pgf__body {
	display: grid;
	gap: 1.5rem;
}

.pgf__field {
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0; /* fieldset u flex/grid kontekstu */
}

.pgf__label {
	display: block;
	margin: 0 0 0.4rem;
	padding: 0;
	color: var(--pgf-navy);
	font-size: 1rem;
	font-weight: 600;
}

.pgf__opt {
	margin-left: 0.4rem;
	color: var(--pgf-tiho);
	font-size: 0.8rem;
	font-weight: 400;
}

.pgf__help {
	margin: 0 0 0.5rem;
	color: var(--pgf-tiho);
	font-size: 0.85rem;
}

.pgf__input {
	display: block;
	width: 100%;
	padding: 0.75rem 0.9rem;
	border: 1px solid var(--pgf-linija);
	border-radius: var(--pgf-r);
	background: var(--pgf-bela);
	color: var(--pgf-ink);
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.4;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.pgf__input::placeholder {
	color: #9aa7b8;
}

.pgf__input:focus {
	outline: none;
	border-color: var(--pgf-navy);
	box-shadow: 0 0 0 3px rgba(31, 45, 78, 0.12);
}

.pgf__textarea {
	resize: vertical;
	min-height: 6.5rem;
}

/* ---------- Ponuđeni odgovori ---------- */

.pgf__choices {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 0.6rem;
}

.pgf__choice {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.6rem 0.95rem;
	border: 1px solid var(--pgf-linija);
	border-radius: var(--pgf-r);
	background: var(--pgf-kartica);
	color: var(--pgf-ink);
	font-size: 0.94rem;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.pgf__choice:hover {
	border-color: #c3cddd;
	background: #e8ecf3;
}

.pgf__radio {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

/* Redni broj odgovora. Isti prikaz na svim pitanjima. */
.pgf__step {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.4rem;
	height: 1.4rem;
	border-radius: 50%;
	background: var(--pgf-bela);
	border: 1px solid var(--pgf-linija);
	color: var(--pgf-tiho);
	font-size: 0.72rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.pgf__choice:has(.pgf__radio:checked) {
	border-color: var(--pgf-navy);
	background: var(--pgf-navy);
	color: var(--pgf-bela);
}

.pgf__choice:has(.pgf__radio:checked) .pgf__step {
	background: var(--pgf-akcent);
	border-color: var(--pgf-akcent);
	color: var(--pgf-bela);
}

.pgf__choice:has(.pgf__radio:focus-visible) {
	outline: 2px solid var(--pgf-akcent);
	outline-offset: 2px;
}

/* Rezerva za starije pregledače bez :has() — klasu dodaje JS. */
.pgf__choice.is-checked {
	border-color: var(--pgf-navy);
	background: var(--pgf-navy);
	color: var(--pgf-bela);
}

.pgf__choice.is-checked .pgf__step {
	background: var(--pgf-akcent);
	border-color: var(--pgf-akcent);
	color: var(--pgf-bela);
}

/* Svi odgovori idu jedan ispod drugog i imaju istu širinu. */
.pgf__field--choice .pgf__choices {
	flex-direction: column;
	align-items: stretch;
	gap: 0.4rem;
}

.pgf__field--choice .pgf__choice {
	justify-content: flex-start;
}

/* ---------- Saglasnost ---------- */

.pgf__consent {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	cursor: pointer;
}

.pgf__checkbox {
	flex: 0 0 auto;
	width: 1.1rem;
	height: 1.1rem;
	margin: 0.2rem 0 0;
	accent-color: var(--pgf-navy);
}

.pgf__consent-text {
	color: var(--pgf-tiho);
	font-size: 0.88rem;
}

.pgf__consent-text a {
	color: var(--pgf-navy);
	text-decoration: underline;
}

/* ---------- Greške ---------- */

.pgf__error {
	margin: 0.4rem 0 0;
	color: var(--pgf-greska);
	font-size: 0.85rem;
	min-height: 0;
}

.pgf__error:empty {
	display: none;
}

.pgf__field.has-error .pgf__input {
	border-color: var(--pgf-greska);
	box-shadow: 0 0 0 3px rgba(192, 38, 38, 0.1);
}

.pgf__field.has-error .pgf__label {
	color: var(--pgf-greska);
}

/* ---------- Podnožje i dugme ---------- */

.pgf__footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1rem;
	margin-top: 2rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--pgf-linija);
}

.pgf__submit {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.85rem 1.6rem;
	border: 0;
	border-radius: var(--pgf-r);
	background: var(--pgf-akcent);
	color: var(--pgf-bela);
	font-family: inherit;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s ease;
}

.pgf__submit:hover:not(:disabled) {
	background: var(--pgf-akcent-tamni);
}

.pgf__submit:focus-visible {
	outline: 2px solid var(--pgf-navy);
	outline-offset: 3px;
}

.pgf__submit:disabled {
	opacity: 0.65;
	cursor: default;
}

.pgf__spinner {
	display: none;
	width: 1rem;
	height: 1rem;
	border: 2px solid rgba(255, 255, 255, 0.4);
	border-top-color: var(--pgf-bela);
	border-radius: 50%;
	animation: pgf-spin 0.7s linear infinite;
}

.pgf.is-sending .pgf__spinner {
	display: block;
}

@keyframes pgf-spin {
	to { transform: rotate(360deg); }
}

.pgf__note {
	margin: 0;
	color: var(--pgf-tiho);
	font-size: 0.82rem;
}

/* ---------- Poruka posle slanja ---------- */

.pgf__status {
	margin-top: 1.25rem;
}

.pgf__status:empty {
	display: none;
}

.pgf__poruka {
	padding: 1.1rem 1.25rem;
	border-radius: var(--pgf-r);
	border-left: 4px solid var(--pgf-uspeh);
	background: #eef7f2;
	color: #10502f;
	font-size: 1rem;
}

.pgf__poruka--greska {
	border-left-color: var(--pgf-greska);
	background: #fdf0f0;
	color: #8c1c1c;
}

/* Kada je prijava prošla, ostaje samo poruka. */
.pgf.is-done .pgf__body,
.pgf.is-done .pgf__footer,
.pgf.is-done .pgf__header {
	display: none;
}

.pgf.is-done .pgf__poruka {
	font-family: var(--pgf-serif);
	font-size: clamp(1.15rem, 2.5vw, 1.45rem);
	padding: 2rem;
	line-height: 1.35;
}

/* ---------- Mamac za botove ---------- */

.pgf__hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---------- Mobilni ---------- */

@media (max-width: 600px) {
	.pgf__submit {
		width: 100%;
		justify-content: center;
	}

	.pgf__footer {
		flex-direction: column;
		align-items: stretch;
		text-align: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pgf *,
	.pgf *::before,
	.pgf *::after {
		transition: none !important;
		animation: none !important;
	}
}

/* Kratak trenutak između uspešne prijave i prelaska na thank you stranicu. */
.pgf.is-redirecting .pgf__poruka::after {
	content: "";
	display: inline-block;
	width: 0.9rem;
	height: 0.9rem;
	margin-left: 0.6rem;
	vertical-align: -0.1rem;
	border: 2px solid rgba(20, 118, 79, 0.3);
	border-top-color: var(--pgf-uspeh);
	border-radius: 50%;
	animation: pgf-spin 0.7s linear infinite;
}


/* ---------- Telefon sa pozivnim brojem države ---------- */

.pgf__tel {
	display: flex;
	gap: 0.5rem;
	align-items: stretch;
}

.pgf__tel-drzava {
	flex: 0 1 15rem;
	min-width: 0;
}

.pgf__tel-broj {
	flex: 1 1 auto;
	min-width: 0;
}

.pgf__select {
	width: 100%;
	height: 100%;
	padding-right: 2rem;
	background-color: #f6fcff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%236b7a90' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.75rem center;
	background-size: 0.7rem;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	cursor: pointer;
}

/* Dok država nije izabrana, polje je vidno istaknuto. */
.pgf__select:invalid,
.pgf__select option[value=""] {
	color: #6b7a90;
}

.pgf__napomena {
	margin: 0.5rem 0 0;
	padding: 0.6rem 0.75rem;
	border-left: 3px solid var(--pgf-akcent);
	background: #fdf1eb;
	color: #8a3c14;
	font-size: 0.85rem;
}

.pgf__napomena p {
	margin: 0;
}

.pgf__napomena p + p {
	margin-top: 0.35rem;
}

/* Vidljivo samo čitačima ekrana. */
.pgf__sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ---------- Čekboksovi u grupi ---------- */

.pgf__cb {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.pgf__kvadrat {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 1.15rem;
	height: 1.15rem;
	border: 1px solid var(--pgf-linija);
	border-radius: 4px;
	background: var(--pgf-bela);
	transition: background 0.15s ease, border-color 0.15s ease;
}

.pgf__kvadrat::after {
	content: "";
	width: 0.55rem;
	height: 0.3rem;
	border-left: 2px solid var(--pgf-bela);
	border-bottom: 2px solid var(--pgf-bela);
	transform: rotate(-45deg) translateY(-1px);
	opacity: 0;
	transition: opacity 0.12s ease;
}

.pgf__choice:has(.pgf__cb:checked) {
	border-color: var(--pgf-navy);
	background: var(--pgf-navy);
	color: var(--pgf-bela);
}

.pgf__choice:has(.pgf__cb:checked) .pgf__kvadrat {
	background: var(--pgf-akcent);
	border-color: var(--pgf-akcent);
}

.pgf__choice:has(.pgf__cb:checked) .pgf__kvadrat::after {
	opacity: 1;
}

.pgf__choice.is-checked .pgf__kvadrat {
	background: var(--pgf-akcent);
	border-color: var(--pgf-akcent);
}

.pgf__choice.is-checked .pgf__kvadrat::after {
	opacity: 1;
}

.pgf__choice:has(.pgf__cb:focus-visible) {
	outline: 2px solid var(--pgf-akcent);
	outline-offset: 2px;
}

@media (max-width: 600px) {
	.pgf__tel {
		flex-direction: column;
	}

	.pgf__tel-drzava {
		flex: 1 1 auto;
	}
}
