/* Kviz. Vrednosti iz design/Pocetna.dc.html. */

.tg-quiz {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
	gap: clamp(32px, 5vw, 80px);
}

.tg-quiz__text {
	margin: 22px 0 0;
	max-width: 40ch;
	font-size: 17px;
	line-height: 1.55;
	opacity: 0.85;
}

.tg-quiz__prog {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 6px;
	max-width: 360px;
	margin-top: 32px;
}

.tg-quiz__prog span {
	height: 8px;
	background: var(--tg-dim);
	transition: background 0.3s;
}

.tg-quiz__prog span.is-done {
	background: var(--tg-orange);
}

.tg-quiz__label {
	margin: 10px 0 0;
	font-size: 13.5px;
	font-weight: 700;
	opacity: 0.8;
}

.tg-quiz__step {
	margin: 0;
	padding: 0;
	border: 0;
}

.tg-quiz__step[hidden],
.tg-quiz__result[hidden],
.tg-quiz__all[hidden] {
	display: none;
}

.tg-quiz__step legend {
	margin-bottom: 20px;
	padding: 0;
	font-size: clamp(22px, 2.2vw, 30px);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.15;
}

.tg-quiz__opts {
	display: flex;
	flex-direction: column;
	border-top: 2px solid currentColor;
}

.tg-quiz .tg-quiz__opt {
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr) auto;
	align-items: center;
	gap: 12px;
	padding: 18px 12px 18px 0;
	border: 0;
	border-bottom: 2px solid currentColor;
	background: transparent;
	color: inherit;
	font: 600 clamp(16px, 1.4vw, 18px) var(--tg-font);
	text-align: left;
	cursor: pointer;
}

.tg-quiz .tg-quiz__opt:hover {
	padding-left: 12px;
	background: var(--tg-orange);
	color: var(--tg-ink);
}

.tg-quiz__letter {
	font-size: 13px;
	font-weight: 800;
	opacity: 0.7;
}

.tg-quiz .tg-quiz__back {
	margin-top: 16px;
	padding: 8px 0;
	border: 0;
	background: transparent;
	color: inherit;
	font: 700 14px var(--tg-font);
	opacity: 0.8;
	cursor: pointer;
}

.tg-quiz__reskicker {
	margin: 0 0 6px;
	color: var(--tg-orange);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.tg-quiz__restitle {
	margin: 0 0 20px;
	font-size: clamp(24px, 2.4vw, 32px);
	font-weight: 800;
	letter-spacing: -0.02em;
}

.tg-quiz__recs {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 2px solid currentColor;
}

.tg-quiz__recs li {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr);
	gap: 12px;
	padding: 18px 0;
	border-bottom: 2px solid currentColor;
}

.tg-quiz__num {
	color: var(--tg-orange);
	font-size: 28px;
	font-weight: 900;
	line-height: 1;
}

.tg-quiz__recs a {
	color: inherit;
	font-size: 19px;
	font-weight: 800;
	text-decoration: none;
}

.tg-quiz__why {
	display: block;
	margin-top: 4px;
	font-size: 15px;
	line-height: 1.5;
	opacity: 0.8;
}

.tg-quiz__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 24px;
}

.tg-quiz .tg-quiz__cta {
	display: flex;
	align-items: center;
	gap: 24px;
	height: 56px;
	padding: 0 20px;
	background: var(--tg-orange);
	color: var(--tg-ink);
	font-size: 16px;
	font-weight: 800;
	text-decoration: none;
}

.tg-quiz .tg-quiz__cta:hover {
	background: var(--tg-bg);
	color: var(--tg-ink);
}

.tg-quiz .tg-quiz__restart {
	height: 56px;
	padding: 0 18px;
	border: 2px solid currentColor;
	background: transparent;
	color: inherit;
	font: 700 15px var(--tg-font);
	cursor: pointer;
}

/* Spisak svih preporuka ostaje u HTML-u zbog linkova, ali se ne vidi. */
.tg-quiz__all {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}