/**
 * MV Polls — frontend CSS.
 *
 * Migracija iz: snippet_mv_polls.md (PHP inline) + snippet_mv_polls_css.md (Code Snippets).
 * Objedinjeno + brand --mv-* varijable umjesto hardkodiranih hex vrijednosti.
 */

/* ─────────────────────────────────────────────────────────
 * Wrapper
 * ───────────────────────────────────────────────────────── */
.mv-poll {
	border:        1px solid var(--mv-gray-light, #e9e9e9);
	padding:       18px;
	border-radius: 12px;
	background:    #fff;
	max-width:     760px;
}

.mv-poll__q {
	font-size:   26px;
	font-weight: 800;
	margin:      0 0 14px;
	line-height: 1.15;
}

.mv-poll__list {
	display:        flex;
	flex-direction: column;
	gap:            10px;
}

/* ─────────────────────────────────────────────────────────
 * Vote option (klik za glasanje)
 * ───────────────────────────────────────────────────────── */
.mv-poll__option {
	width:         100%;
	text-align:    left;
	padding:       14px 16px;
	border:        0;
	border-radius: 0;
	background:    #efefef;
	font-size:     18px;
	line-height:   1.25;
	cursor:        pointer;
}

.mv-poll__option:hover {
	filter: brightness(0.98);
}

/* ─────────────────────────────────────────────────────────
 * CTA button (white until hover, full width, centered)
 * ───────────────────────────────────────────────────────── */
.mv-poll .mv-poll__cta {
	display:        block;
	width:          100%;
	padding:        14px 16px;
	border:         1px solid #dedede;
	background:     #fff;
	color:          var(--mv-text, #111);
	font-weight:    700;
	letter-spacing: .02em;
	cursor:         pointer;
	text-align:     center;
	border-radius:  8px;
}

.mv-poll .mv-poll__cta:hover {
	background:   var(--mv-yellow, #F4B107);
	border-color: var(--mv-yellow, #F4B107);
	color:        var(--mv-text, #111);
}

/* ─────────────────────────────────────────────────────────
 * Result row (s progress fill bar)
 * ───────────────────────────────────────────────────────── */
.mv-poll__result {
	position:      relative;
	width:         100%;
	background:    #efefef;
	padding:       14px 16px;
	overflow:      hidden;
	border-radius: 8px;
}

.mv-poll__fill {
	position:   absolute;
	left:       0;
	top:        0;
	bottom:     0;
	width:      0%;
	background: var(--mv-gray, #999998);
	transition: width 650ms ease;
}

.mv-poll__result--clickable {
	cursor: pointer;
}

.mv-poll__result--clickable:hover {
	filter: brightness(0.985);
}

.mv-poll__resultInner {
	position:        relative;
	display:         flex;
	justify-content: space-between;
	gap:             12px;
	font-size:       18px;
	line-height:     1.25;
}

.mv-poll__pct {
	font-weight: 700;
}

.mv-poll__meta,
.mv-poll__note {
	margin-top: 10px;
	color:      var(--mv-gray-dark, #777);
	font-size:  14px;
}

/* ─────────────────────────────────────────────────────────
 * Mobile (≤ 600px)
 * ───────────────────────────────────────────────────────── */
@media (max-width: 600px) {
	.mv-poll__q {
		font-size: 20px;
	}
	.mv-poll__resultInner {
		font-size: 13px;
	}
	.mv-poll__result {
		padding: 10px 12px;
	}
	.mv-poll__cta {
		padding:   12px 14px;
		font-size: 14px;
	}
	.mv-poll__meta,
	.mv-poll__note {
		font-size: 12px;
	}
}