.av-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
}

.av-modal[hidden] {
	display: none;
}

/* Кроки модалки — flex-контейнери, а display переважив би атрибут hidden. */
.av-modal [hidden] {
	display: none;
}

body.av-modal-open {
	overflow: hidden;
}

.av-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.55);
}

.av-modal__dialog {
	position: relative;
	background: #fff;
	border-radius: 12px;
	padding: 32px 28px 28px;
	width: 100%;
	max-width: 440px;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
	font-family: 'Roboto', sans-serif;
	color: #1a1a1a;
}

/* Крок з бюлетенем: ширший діалог, який не перевищує висоту екрана —
   прокручується всередині себе список категорій, а не вся сторінка. */
.av-modal__dialog._wide {
	max-width: 720px;
	max-height: calc(100vh - 32px);
	display: flex;
	flex-direction: column;
	padding-bottom: 0;
}

.av-modal__close {
	position: absolute;
	top: 10px;
	right: 14px;
	border: 0;
	background: none;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
	color: #888;
}

.av-modal__close:hover {
	color: #333;
}

.av-modal__title {
	margin: 0 0 4px;
	font-size: 22px;
	font-family: 'Exo 2', sans-serif;
	font-weight: 700;
}

.av-modal__project {
	margin: 0 0 20px;
	color: #555;
	font-size: 15px;
}

.av-modal__label {
	display: block;
	margin-bottom: 6px;
	font-weight: 600;
	font-size: 14px;
}

.av-modal__email {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid #ccc;
	border-radius: 6px;
	font-size: 16px;
	margin-bottom: 14px;
}

.av-modal__consent {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	font-size: 13px;
	color: #444;
	margin-bottom: 16px;
	cursor: pointer;
}

.av-modal__consent-input {
	margin-top: 2px;
	flex-shrink: 0;
}

.av-modal__turnstile {
	margin-bottom: 14px;
	width: 100%;
}

/* Turnstile у режимі size:flexible віддає iframe на 100% контейнера. */
.av-modal__turnstile iframe {
	width: 100% !important;
}

.av-modal__turnstile:empty {
	margin-bottom: 0;
}

.av-modal__submit {
	width: 100%;
	padding: 12px;
	border: 0;
	border-radius: 6px;
	background: #2e7d32;
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
}

.av-modal__submit:hover {
	background: #27682b;
}

.av-modal__submit:disabled {
	opacity: 0.6;
	cursor: default;
}

.av-modal__message {
	margin: 12px 0 0;
	font-size: 14px;
	min-height: 1em;
}

.av-modal__message._success {
	color: #2e7d32;
	font-size: 16px;
}

.av-modal__message._error {
	color: #c62828;
}

.av-modal__message._warn {
	color: #1a1a1a;
	font-size: 15px;
	font-weight: 600;
}

/* -------- Крок 2: бюлетень -------- */

.av-step--ballot {
	display: flex;
	flex-direction: column;
	min-height: 0;
}

.av-modal__lead {
	margin: 0 0 16px;
	color: #555;
	font-size: 15px;
}

.av-ballot__who {
	display: flex;
	align-items: baseline;
	gap: 8px;
	flex-wrap: wrap;
	margin: 0 0 16px;
	padding-bottom: 14px;
	border-bottom: 1px solid #eaeaea;
	font-size: 14px;
	color: #444;
}

.av-ballot__email {
	font-weight: 600;
	word-break: break-all;
}

.av-ballot__change-email {
	border: 0;
	background: none;
	padding: 0;
	font: inherit;
	color: #2e7d32;
	text-decoration: underline;
	cursor: pointer;
}

.av-ballot__form {
	display: flex;
	flex-direction: column;
	min-height: 0;
}

.av-ballot {
	overflow-y: auto;
	min-height: 0;
	/* Місце під фокусні обведення, які інакше зрізає скрол-контейнер. */
	padding: 2px;
	margin: 0 -2px;
}

.av-ballot__cat {
	border: 0;
	padding: 0;
	margin: 0 0 24px;
	/* fieldset за замовчуванням не стискається вужче свого вмісту. */
	min-width: 0;
}

.av-ballot__cat-title {
	padding: 0;
	margin-bottom: 10px;
	font-family: 'Exo 2', sans-serif;
	font-weight: 700;
	font-size: 18px;
	color: #1a1a1a;
}

.av-ballot__note {
	margin: 0 0 10px;
	font-size: 13px;
	border-radius: 6px;
	padding: 8px 12px;
}

.av-ballot__note._locked {
	background: #eef6ee;
	color: #2e7d32;
}

.av-ballot__note._pending {
	background: #fff5e0;
	color: #8a5a00;
}

.av-ballot__options {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.av-ballot__option {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	border: 1px solid #dcdcdc;
	border-radius: 8px;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.av-ballot__option:hover {
	border-color: #2e7d32;
}

.av-ballot__option:has(input:checked) {
	border-color: #2e7d32;
	background: #eef6ee;
}

.av-ballot__option:has(input:focus-visible) {
	outline: 2px solid #2e7d32;
	outline-offset: 2px;
}

.av-ballot__option input[type="radio"] {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	accent-color: #2e7d32;
}

.av-ballot__thumb {
	flex-shrink: 0;
	width: 56px;
	height: 56px;
	object-fit: cover;
	border-radius: 6px;
}

.av-ballot__option-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.av-ballot__option-title {
	font-size: 15px;
	font-weight: 600;
	color: #1a1a1a;
}

.av-ballot__option-loc {
	font-size: 13px;
	color: #777;
}

/* Заблокована категорія лишається видимою (щоб було зрозуміло, за що вже
   віддано голос), але недоступною для вибору. */
.av-ballot__cat._locked .av-ballot__option {
	opacity: 0.55;
	cursor: default;
	border-color: #e5e5e5;
}

.av-ballot__cat._locked .av-ballot__option:hover {
	border-color: #e5e5e5;
}

.av-ballot__clear {
	margin-top: 8px;
	border: 0;
	background: none;
	padding: 0;
	font: inherit;
	font-size: 13px;
	color: #777;
	text-decoration: underline;
	cursor: pointer;
}

.av-ballot__clear:hover {
	color: #c62828;
}

/* Підсумок і кнопка завжди на видноті, поки список прокручується. */
.av-ballot__footer {
	flex-shrink: 0;
	padding: 16px 0 20px;
	background: #fff;
	border-top: 1px solid #eaeaea;
}

.av-ballot__summary {
	margin: 0 0 12px;
	font-size: 14px;
	color: #555;
}

/* -------- Екран подяки (проголосовано не в усіх категоріях) -------- */

.av-step--thanks {
	text-align: center;
}

.av-modal__thanks-title {
	font-family: 'Exo 2', sans-serif;
	font-weight: 700;
	font-size: 21px;
	margin: 0 0 12px;
}

.av-modal__thanks-text {
	font-size: 15px;
	line-height: 1.6;
	color: #444;
	margin: 0 0 22px;
}

.av-modal__thanks-later {
	display: block;
	width: 100%;
	margin-top: 10px;
	border: 0;
	background: none;
	padding: 8px;
	font: inherit;
	font-size: 14px;
	color: #777;
	cursor: pointer;
}

.av-modal__thanks-later:hover {
	color: #333;
	text-decoration: underline;
}

/* -------- «Перевірте пошту» екран -------- */

.av-modal__sent {
	text-align: center;
}

.av-modal__sent-icon {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 88px;
	height: 88px;
	margin: 4px auto 18px;
	border-radius: 50%;
	background: #eef6ee;
	color: #2e7d32;
}

.av-modal__sent-title {
	font-family: 'Exo 2', sans-serif;
	font-weight: 700;
	font-size: 21px;
	margin: 0 0 10px;
}

.av-modal__sent-lead {
	font-size: 15px;
	color: #444;
	margin: 0 0 6px;
}

.av-modal__sent-email {
	font-weight: 700;
	font-size: 16px;
	color: #1a1a1a;
	margin: 0 0 18px;
	word-break: break-all;
}

.av-modal__sent-steps {
	text-align: left;
	margin: 0 0 18px;
	padding-left: 22px;
	font-size: 15px;
	color: #333;
}

.av-modal__sent-steps li {
	margin-bottom: 6px;
}

.av-modal__sent-spam {
	font-size: 13px;
	color: #777;
	margin: 0 0 20px;
}

/* ._primary-btn від теми розрахований на <a>: без курсора-вказівника і з
   width: fit-content, яке перебивало наше 100% і притискало кнопку ліворуч.
   Селектор із .av-modal — щоб виграти в специфічності, а не через !important. */
.av-modal .av-modal__sent-ok,
.av-modal .av-modal__thanks-continue {
	width: fit-content;
	min-width: 200px;
	margin-left: auto;
	margin-right: auto;
	cursor: pointer;
}

/* Будь-яка кнопка теми всередині модалки має поводитись як кнопка. */
.av-modal button._primary-btn {
	cursor: pointer;
}

.av-toast {
	position: fixed;
	left: 50%;
	bottom: 24px;
	transform: translate(-50%, 16px);
	z-index: 10000;
	background: #1a1a1a;
	color: #fff;
	padding: 14px 22px;
	border-radius: 8px;
	font-family: 'Roboto', sans-serif;
	font-size: 15px;
	max-width: min(480px, calc(100vw - 32px));
	opacity: 0;
	transition: opacity 0.3s, transform 0.3s;
}

.av-toast._visible {
	opacity: 1;
	transform: translate(-50%, 0);
}

.av-toast._success {
	background: #2e7d32;
}

/* Скидання нативних стилів <button> для кнопки голосування,
   щоб клас теми _primary-btn виглядав як на <a> (курсор, без рамки/тіні). */
button.av-vote-open {
	appearance: none;
	-webkit-appearance: none;
	border: 0;
	margin: 0;
	cursor: pointer;
	font-family: inherit;
	box-shadow: none;
}

button.av-vote-open:focus-visible {
	outline: 2px solid #2e7d32;
	outline-offset: 2px;
}

/* -------- Voting hub page -------- */

.voting-page__notice {
	padding: 32px 0;
	font-size: 18px;
	color: #555;
}

/* Заклик до дії над списком категорій. */
.voting-page__cta-row {
	display: flex;
	align-items: center;
	gap: 24px;
	flex-wrap: wrap;
	margin: 0 0 32px;
}

/* Кнопка на 50% більша за звичайну ._primary-btn (50px → 75px) і з обернутими
   кольорами: зелена, чорна на ховері. */
.voting-page__cta._primary-btn {
	height: 75px;
	min-width: 237px;
	padding: 24px 45px;
	border-radius: 21px;
	font-size: 21px;
	background-color: #4BAD3B;
}

.voting-page__cta._primary-btn:hover {
	background-color: #000000;
}

/* flex: 1 — підпис займає всю решту ширини рядка й переноситься лише тоді,
   коли текст справді довший за неї. min-width: 0 дозволяє йому стискатись. */
.voting-page__cta-hint {
	flex: 1 1 320px;
	min-width: 0;
	font-size: 22px;
	line-height: 1.45;
	color: #555;
}

@media (max-width: 575px) {
	.voting-page__cta._primary-btn {
		height: 62px;
		min-width: 0;
		padding: 18px 32px;
		font-size: 18px;
	}

	.voting-page__cta-hint {
		font-size: 18px;
	}
}

.voting-page__category {
	margin-bottom: 48px;
}

/* Шапка категорії: назва ліворуч, сумарний лічильник голосів праворуч.
   Лічильник ніколи не переноситься — переноситься довга назва категорії. */
.voting-page__category-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: nowrap;
	margin: 0 0 20px;
	padding-bottom: 10px;
	border-bottom: 2px solid #2e7d32;
}

.voting-page__category-title {
	margin: 0;
	/* min-width: 0 дозволяє заголовку стискатись і переносити текст усередині себе,
	   замість того щоб виштовхувати лічильник на новий рядок. */
	flex: 1 1 auto;
	min-width: 0;
	font-size: 26px;
	font-family: 'Exo 2', sans-serif;
	font-weight: 700;
}

.av-category-total {
	flex: 0 0 auto;
	white-space: nowrap;
	font-size: 16px;
}

.voting-card__actions {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px;
	margin-top: 16px;
	flex-wrap: wrap;
}

.voting-card__more {
	font-weight: 600;
	text-decoration: underline;
}

.voting-card__vote {
	margin-left: auto;
}

/* -------- Voting hub grid: 3 вертикальні картки в ряд -------- */

.voting-page .archive-publications__cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	align-items: stretch;
}

/* Перевизначення горизонтальної картки архіву на вертикальну. */
.voting-page .voting-card {
	flex-direction: column;
	gap: 0;
	margin-bottom: 0;
	height: 100%;
}

.voting-page .voting-card .publication-card__thumbnail {
	width: 100%;
	aspect-ratio: 514 / 284;
}

.voting-page .voting-card .publication-card__body {
	flex: 1;
	margin-top: 16px;
	/* Колонка + margin-top:auto на діях = кнопка й поширення стоять на одній
	   лінії в усіх картках ряду, хоч би якої довжини були описи. */
	display: flex;
	flex-direction: column;
}

/* Вміст іде природним потоком з фіксованими відступами (без розтягування
   й притискання кнопки донизу). Лічильник і кнопка — одразу під описом. */
.voting-page .voting-card .voting-card__count {
	margin-top: 16px;
}

.voting-page .voting-card .voting-card__actions {
	margin-top: auto;
	padding-top: 16px;
}

/* Опис — максимум 4 рядки, далі трикрапка (без резерву висоти). */
.voting-page .voting-card .publication-card__excerpt {
	display: -webkit-box;
	-webkit-line-clamp: 4;
	line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

@media (max-width: 1024px) {
	.voting-page .archive-publications__cards {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 640px) {
	.voting-page .archive-publications__cards {
		grid-template-columns: 1fr;
	}
}

/* -------- Heart vote button on cards -------- */

.publication-card__thumbnail {
	position: relative;
}

.av-vote-heart {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
	color: #9aa0a6;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.av-vote-heart svg {
	width: 22px;
	height: 22px;
}

.av-vote-heart:hover {
	background: #fff;
	color: #e53935;
	transform: scale(1.08);
}

.av-vote-heart:focus-visible {
	outline: 2px solid #2e7d32;
	outline-offset: 2px;
}

/* Позначка «вже проголосовано» ставиться JS-ом після успішного голосу. */
.av-vote-heart._voted {
	color: #e53935;
	background: #fff;
}

/* -------- Winner badge -------- */

.voting-card__winner {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px 6px 8px;
	border-radius: 20px;
	background: #2e7d32;
	color: #fff;
	font-family: 'Exo 2', sans-serif;
	font-weight: 700;
	font-size: 13px;
}

.voting-card__winner svg {
	color: #fff;
}

/* -------- Vote counts / results -------- */

.av-total-votes {
	font-family: 'Roboto', sans-serif;
	font-size: 18px;
	margin: 0 0 28px;
	padding: 14px 20px;
	background: #eef6ee;
	border-radius: 10px;
	color: #1a1a1a;
}

.av-total-votes strong {
	color: #2e7d32;
}

.av-vote-count {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: 'Roboto', sans-serif;
	font-weight: 600;
	font-size: 15px;
	color: #2e7d32;
}

.av-vote-count svg {
	color: #2e7d32;
	flex-shrink: 0;
}


.single-vote {
	display: flex;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
	margin-top: 32px;
}


/* -------- Вступ і текстові зони сторінки голосування -------- */

/* Підзаголовок у зеленій рамці, під назвою сторінки. Вирівнювання успадковує
   від заголовка, щоб пара трималась разом за будь-якої ширини екрана. */
.voting-page .archive-header__subtitle {
	margin: 12px 0 0;
	font-family: 'Exo 2', sans-serif;
	font-weight: 700;
	font-size: 18px;
	line-height: 1.4;
	color: #333;
	text-align: center;
}

@media (max-width: 575px) {
	.voting-page .archive-header__subtitle {
		margin-top: 10px;
		font-size: 16px;
	}
}

/* Тема дає ВСІМ <section> margin-top: 140px (_common.scss) і скидає його лише
   для .archive-header. Наші секції під це правило потрапили — звідси й були
   величезні розриви. Задаємо власний відступ і робимо його єдиним джерелом
   вертикального ритму: у рамки відступ знизу прибираємо. */
.voting-page__intro,
.voting-page__zone {
	margin-top: 40px;
}

.voting-page .archive-header__inner {
	margin-bottom: 0;
}

.voting-page__intro {
	margin-bottom: 0;
}

/* Абзаци з редактора: тема їх не стилізує, тож відступи приходять з ядра
   WordPress і виходять завеликими. Задаємо свої. */
.voting-page__intro-text p,
.voting-page__zone-inner p {
	margin: 0 0 12px;
}

.voting-page__intro-text p:last-child,
.voting-page__zone-inner p:last-child {
	margin-bottom: 0;
}

/* Порожній абзац, лишений у редакторі, не має пробивати діру в макеті. */
.voting-page__intro-text p:empty,
.voting-page__zone-inner p:empty {
	display: none;
}

.voting-page__intro-text {
	font-size: 17px;
	line-height: 1.6;
	color: #333;
}

.voting-page__zone {
	margin-bottom: 28px;
}

.voting-page__zone-inner {
	font-size: 16px;
	line-height: 1.6;
	color: #333;
}

.voting-page__rules .voting-page__zone-inner {
	padding: 20px 24px;
	border-radius: 12px;
	background: #eef6ee;
}

.voting-page__stats-text {
	margin: 0;
	padding: 16px 20px;
	border-left: 3px solid #2e7d32;
	background: #f9f9f9;
	font-size: 16px;
	color: #333;
}

/* -------- Питання та відповіді -------- */

.voting-page__faq-title {
	margin: 0 0 20px;
	font-family: 'Exo 2', sans-serif;
	font-weight: 700;
	font-size: 26px;
}

.voting-page__faq-list {
}

.voting-faq-item {
	border-bottom: 1px solid #eaeaea;
}

.voting-faq-item__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 0;
	font-family: 'Exo 2', sans-serif;
	font-weight: 700;
	font-size: 17px;
	color: #1a1a1a;
	cursor: pointer;
	list-style: none;
}

/* Прибираємо нативний трикутник, малюємо власний плюс/мінус. */
.voting-faq-item__question::-webkit-details-marker {
	display: none;
}

.voting-faq-item__question::after {
	content: '+';
	flex-shrink: 0;
	font-size: 24px;
	line-height: 1;
	color: #2e7d32;
}

.voting-faq-item[open] .voting-faq-item__question::after {
	content: '−';
}

.voting-faq-item__answer {
	padding: 0 0 18px;
	font-size: 15px;
	line-height: 1.6;
	color: #555;
}

.voting-faq-item__answer p {
	margin: 0 0 10px;
}

/* -------- Шеринг у картці списку -------- */

/* Блок поширення стоїть праворуч від «Детальніше»: напис згори, іконки під ним. */
.card-share {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	margin-left: auto;
}

.card-share__label {
	font-size: 13px;
	color: #777;
	line-height: 1;
}

.card-share__links {
	display: flex;
	align-items: center;
	gap: 8px;
}

.card-share__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 1px solid #dcdcdc;
	border-radius: 50%;
	background: #fff;
	color: #555;
	cursor: pointer;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.card-share__link:hover {
	border-color: #2e7d32;
	color: #2e7d32;
}

.card-share__link:focus-visible {
	outline: 2px solid #2e7d32;
	outline-offset: 2px;
}

/* «Скопійовано» — спливає над іконкою, поки site.js тримає клас .copied. */
.card-share__copy,
.card-share__native {
	position: relative;
}

.card-share__copy ._copy-label,
.card-share__native ._copy-label {
	position: absolute;
	bottom: calc(100% + 6px);
	left: 50%;
	transform: translateX(-50%);
	padding: 4px 10px;
	border-radius: 6px;
	background: #1a1a1a;
	color: #fff;
	font-size: 12px;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease;
}

.card-share__copy.copied ._copy-label,
.card-share__native.copied ._copy-label {
	opacity: 1;
}

@media (max-width: 575px) {
	.card-share__label {
		display: none;
	}
}

/* -------- Дощ із квітів після підтвердження голосу -------- */

.av-flowers {
	position: fixed;
	inset: 0;
	overflow: hidden;
	/* Поверх модалки й тосту, але кліки крізь себе пропускає. */
	z-index: 10001;
	pointer-events: none;
}

.av-flower {
	position: absolute;
	top: -120px;
	height: auto;
	opacity: 0;
	will-change: transform, opacity;
	animation-name: av-flower-fall;
	animation-timing-function: linear;
	animation-fill-mode: forwards;
}

@keyframes av-flower-fall {
	0% {
		opacity: 0;
		transform: translate3d(0, 0, 0) rotate(0deg);
	}
	8% {
		opacity: 1;
	}
	85% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		transform: translate3d(var(--av-drift, 0), 110vh, 0) rotate(var(--av-spin, 180deg));
	}
}

/* Системне прохання зменшити рух поважаємо: JS такий шар навіть не створює,
   але правило лишаємо як другий рубіж. */
@media (prefers-reduced-motion: reduce) {
	.av-flowers {
		display: none;
	}
}