/* E-Vote SHS — voter-facing styles. Responsive; fluid type with clamp(). */

.evote-box {
	box-sizing: border-box;
	width: 100%;
	max-width: 640px;
	margin: 1rem auto;
	padding: clamp(12px, 3vw, 18px);
	border: 1px solid #ddd;
	border-radius: 10px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: clamp(0.9rem, 2.6vw, 1rem);
	line-height: 1.45;
	color: #222;
}
.evote-box * { box-sizing: border-box; }
.evote-box--narrow { max-width: 380px; }
.evote-box--wide { max-width: 820px; }

.evote-box h1 { font-size: clamp(1.2rem, 4.2vw, 1.5rem); margin: 0 0 0.5em; line-height: 1.25; }
.evote-box h2 { font-size: clamp(1.1rem, 3.6vw, 1.3rem); margin: 0 0 0.5em; line-height: 1.3; }
.evote-box h3 { font-size: clamp(1rem, 3vw, 1.1rem);   margin: 0 0 0.4em; line-height: 1.3; }
.evote-box p  { margin: 0.5em 0; }

.evote-box label { display: block; }
.evote-box input[type="text"],
.evote-box input[type="password"] {
	width: 100%;
	padding: 10px;
	font-size: 1rem;
	border: 1px solid #bbb;
	border-radius: 6px;
}

.evote-box button,
.evote-box .evote-btn {
	display: inline-block;
	padding: 0.7em 1.1em;
	font-size: 1rem;
	font-family: inherit;
	border: 0;
	border-radius: 6px;
	background: #0b5ed7;
	color: #fff;
	cursor: pointer;
	min-height: 44px;
}
.evote-box button.evote-btn--secondary { background: #e9ecef; color: #222; }
.evote-btn--block { width: 100%; }
.evote-box button:focus-visible,
.evote-box input:focus-visible,
.evote-box summary:focus-visible {
	outline: 3px solid #0b5ed7;
	outline-offset: 2px;
}

.evote-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }

.evote-countdown {
	background: #0b5ed7;
	color: #fff;
	padding: 8px 12px;
	border-radius: 8px;
	font-weight: bold;
	text-align: center;
	margin: 10px 0;
	font-size: clamp(0.9rem, 3vw, 1rem);
}
.evote-countdown.is-closed { background: #595959; }

.evote-alert { background: #fdecea; color: #b32d2e; padding: 10px 12px; border-radius: 6px; margin: 8px 0; }
.evote-muted { color: #555; }

.evote-portfolio { border: 1px solid #ddd; border-radius: 8px; padding: clamp(10px, 2.5vw, 14px); margin: 14px 0; }
.evote-portfolio legend { font-weight: bold; padding: 0 6px; font-size: 1rem; }
.evote-hint { color: #666; margin: 0 0 8px; }

.evote-choice {
	display: flex;
	gap: 10px;
	align-items: center;
	padding: 10px;
	border: 1px solid #eee;
	border-radius: 6px;
	margin: 6px 0;
	cursor: pointer;
}
.evote-choice img { width: 48px; height: 48px; border-radius: 6px; object-fit: cover; flex: 0 0 auto; }
.evote-choice--abstain { color: #555; }

.evote-cards { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }
.evote-card { flex: 1 1 150px; min-width: 150px; border: 1px solid #ddd; border-radius: 10px; padding: 14px; background: #fff; }
.evote-card__label { color: #555; font-size: 0.85rem; }
.evote-card__value { font-size: clamp(1.3rem, 5vw, 1.75rem); font-weight: bold; margin-top: 4px; }

.evote-result { border: 1px solid #ddd; border-radius: 8px; padding: clamp(10px, 2.5vw, 14px); margin: 14px 0; }
.evote-table { width: 100%; border-collapse: collapse; }
.evote-table th, .evote-table td { padding: 6px 8px; text-align: left; }

details.evote-faq { border: 1px solid #ddd; border-radius: 8px; padding: 8px 12px; margin: 8px 0; }
details.evote-faq summary { cursor: pointer; font-weight: bold; }

@media (max-width: 480px) {
	.evote-box { margin: 0.5rem auto; }
	.evote-card { flex-basis: 100%; }
	.evote-actions button, .evote-actions .evote-btn { width: 100%; }
}