/* Zeform Votes — module styling.
   Inherits the global `--zf-*` tokens from forms.css and adds module-specific
   tokens prefixed `--zf-vote-*` / `--zf-topic-*`. Override any of these in
   your theme's stylesheet, the Customizer's "CSS additionnel", or directly
   on the wrapper to restyle the whole list without writing structural CSS. */

.zf-votes-wrapper {
	--zf-vote-list-gap:      8px;
	--zf-vote-button-min-w:  56px;
	--zf-vote-button-pad:    8px 12px;
	--zf-vote-icon-size:     18px;
	--zf-vote-count-size:    14px;
	--zf-vote-count-weight:  600;
	--zf-topic-gap:          12px;
	--zf-topic-padding:      12px;
	--zf-topic-title-size:   1em;
	--zf-topic-title-weight: 600;
	--zf-topic-desc-size:    14px;
	--zf-topic-desc-weight:  400;

	display: flex;
	flex-direction: column;
	gap: 24px;
}

.zf-topics-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--zf-vote-list-gap);
}

.zf-topic {
	display: flex;
	gap: var(--zf-topic-gap);
	align-items: stretch;
	background: var(--zf-color-bg-input);
	border: 1px solid var(--zf-color-border);
	border-radius: var(--zf-radius-input);
	padding: var(--zf-topic-padding);
}

/* `:not(.zf-reaction)` — le bouton de vote des SUJETS est une colonne (flèche
   au-dessus du compteur). Le bouton de vote des CONTRIBUTIONS porte le même
   nom de classe mais est une pastille horizontale : sans cette exclusion,
   charger le module Votes sur une page suffisait à retourner les boutons du
   fil et des cartes. */
.zf-upvote:not(.zf-reaction) {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-width: var(--zf-vote-button-min-w);
	padding: var(--zf-vote-button-pad);
	border: 1px solid var(--zf-color-border);
	border-radius: var(--zf-radius-input);
	background: var(--zf-color-bg);
	color: var(--zf-color-label);
	cursor: pointer;
	font: inherit;
	transition: all .15s ease;
}
.zf-upvote:not(.zf-reaction):hover { background: var(--zf-color-bg-disabled); border-color: var(--zf-color-primary); color: var(--zf-color-primary); }
.zf-upvote--voted:not(.zf-reaction), .zf-upvote[disabled]:not(.zf-reaction) {
	background: var(--zf-color-primary);
	color: var(--zf-color-primary-text);
	border-color: var(--zf-color-primary);
	cursor: not-allowed;
}
.zf-upvote__icon { font-size: var(--zf-vote-icon-size); line-height: 1; }
.zf-vote-count   { font-weight: var(--zf-vote-count-weight); font-size: var(--zf-vote-count-size); margin-top: 2px; }

.zf-topic__body  { flex: 1; }
.zf-topic__title { margin: 0 0 4px; font-size: var(--zf-topic-title-size); font-weight: var(--zf-topic-title-weight); }
.zf-topic__desc  { color: var(--zf-color-text); font-size: var(--zf-topic-desc-size); font-weight: var(--zf-topic-desc-weight); }

.zf-topics-empty {
	color: var(--zf-color-placeholder);
	text-align: center;
	padding: 24px;
}

.zf-submit-topic-form {
	background: var(--zf-color-bg-input);
	border: 1px solid var(--zf-color-border);
	border-radius: var(--zf-radius-input);
	padding: 16px;
	display: grid;
	gap: var(--zf-gap-field);
}
.zf-submit-topic-form__title { margin: 0 0 4px; font-size: 1em; }
.zf-submit-topic-form__feedback {
	font-size: 14px;
	padding: 10px 12px;
	border-radius: var(--zf-radius-input);
}
.zf-submit-topic-form__feedback--success {
	background: rgba(16, 185, 129, .1);
	color: var(--zf-color-success);
}
.zf-submit-topic-form__feedback--error {
	background: rgba(239, 68, 68, .1);
	color: var(--zf-color-error);
}