/* KSKWN Aktionstool – vote button, dialog, counts, confirmation banner. Minimal; inherits font/colours from the theme. */
.kskwn-at-vote-btn,
.kskwn-at-vote-dialog,
.kskwn-at-banner {
	--kskwn-at-accent: #e00;
	--kskwn-at-accent-hover: #b00;
	--kskwn-at-on-accent: #fff;
	--kskwn-at-surface: #fff;
	/* Page background of the theme: its CF7 inputs are white without a visible border. */
	--kskwn-at-dialog-bg: #f0f0f0;
	--kskwn-at-radius: 8px;
}

/* ---------------------------------------------------------------- button */
.kskwn-at-vote-btn {
	display: inline-block;
	margin: .25em .5em .25em 0;
	padding: .5em 1.2em .4em;
	border: 2px solid var(--kskwn-at-accent);
	border-radius: 2em;
	background: var(--kskwn-at-accent);
	color: var(--kskwn-at-on-accent);
	font: inherit;
	line-height: 1.3;
	cursor: pointer;
	transition: background-color .2s, color .2s, border-color .2s;
}

.kskwn-at-vote-btn:hover {
	border-color: var(--kskwn-at-accent-hover);
	background: var(--kskwn-at-accent-hover);
}

.kskwn-at-vote-btn:focus-visible,
.kskwn-at-vote-dialog__close:focus-visible,
.kskwn-at-banner button:focus-visible,
.kskwn-at-banner a:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: 2px;
}

/* Browser marker: still clickable (another address may vote), but visually "done". */
.kskwn-at-vote-btn.is-voted {
	background: transparent;
	color: inherit;
	border-color: currentColor;
}

.kskwn-at-vote-btn.is-voted::before {
	content: "\2713\00a0";
}

/* per_item: the voted item itself – greyed out, but still clickable. */
.kskwn-at-vote-btn.is-voted--item {
	border-color: #d6d6d6;
	background: #d6d6d6;
	color: #666;
}

.kskwn-at-vote-btn.is-voted--item:hover {
	border-color: #c4c4c4;
	background: #c4c4c4;
}

.kskwn-at-vote-closed {
	display: block;
	margin: .25em 0;
	font-size: .9em;
	opacity: .85;
}

.kskwn-at-count {
	display: inline-block;
	margin: .25em 0;
	font-size: 1.6em;
	line-height: 1.2;
	white-space: nowrap;
}

/* Heart for the counter texts: <span class="kskwn-at-heart"></span> (scales with the font size).
   .big/.strong: the theme only knows p[data-text=big], so the counter brings its own. */
.kskwn-at-heart {
	display: inline-block;
	width: 1em;
	height: 1em;
	margin-right: .2em;
	vertical-align: -.15em;
	background: #EE0000;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Button + count of one item, grouped by vote.js; the Aktion's "Position des Zählers" and
   "Ausrichtung" pick the modifiers (--count-*, --align-*). */
.kskwn-at-vote {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: .8em;
	margin: .25em 0;
}

.kskwn-at-vote--count-top,
.kskwn-at-vote--count-bottom {
	flex-direction: column;
	align-items: flex-start;
}

.kskwn-at-vote--align-center { justify-content: center; }
.kskwn-at-vote--align-right { justify-content: flex-end; }
.kskwn-at-vote--count-top.kskwn-at-vote--align-center,
.kskwn-at-vote--count-bottom.kskwn-at-vote--align-center { align-items: center; }
.kskwn-at-vote--count-top.kskwn-at-vote--align-right,
.kskwn-at-vote--count-bottom.kskwn-at-vote--align-right { align-items: flex-end; }

.kskwn-at-vote--count-top > .kskwn-at-count,
.kskwn-at-vote--count-left > .kskwn-at-count {
	order: -1;
}

.kskwn-at-vote > .kskwn-at-vote-btn,
.kskwn-at-vote > .kskwn-at-count,
.kskwn-at-vote > .kskwn-at-vote-closed {
	margin: 0;
}

/* The count itself is 1.6em; .big (heart counter text) adds nothing on top of that. */
.kskwn-at-count .big { font-size: 1em; }
.kskwn-at-count .strong { font-weight: 700; }

.kskwn-at-vote-btn[hidden],
.kskwn-at-count[hidden] {
	display: none;
}

/* ---------------------------------------------------------------- dialog */
html:has(.kskwn-at-vote-dialog[open]) {
	overflow: hidden;
}

.kskwn-at-vote-dialog {
	box-sizing: border-box;
	width: calc(100% - 2rem);
	max-width: 40rem;
	max-height: calc(100% - 2rem);
	margin: auto;
	padding: 0;
	border: 0;
	border-radius: var(--kskwn-at-radius);
	background: var(--kskwn-at-dialog-bg);
	color: inherit;
	font: inherit;
	overflow: auto;
	overscroll-behavior: contain;
	box-shadow: 0 10px 40px rgba(0, 0, 0, .35);
}

.kskwn-at-vote-dialog::backdrop {
	background: rgba(0, 0, 0, .55);
}

.kskwn-at-vote-dialog__inner {
	padding: 1.25rem 1.5rem 1.5rem;
}

.kskwn-at-vote-dialog__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1rem;
}

.kskwn-at-vote-dialog .kskwn-at-vote-dialog__title {
	margin: 0;
	padding: 0;
	font-size: 1.35em;
	line-height: 1.3;
	overflow-wrap: anywhere;
}

.kskwn-at-vote-dialog__close {
	flex: none;
	margin: 0;
	padding: .35em .8em;
	border: 1px solid currentColor;
	border-radius: 2em;
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: .875em;
	line-height: 1.3;
	cursor: pointer;
}

.kskwn-at-vote-dialog__close:hover {
	background: rgba(0, 0, 0, .06);
}

.kskwn-at-vote-dialog .wpcf7 input:not([type=submit]):not([type=checkbox]):not([type=radio]):not(.kskwn-at-captcha__box),
.kskwn-at-vote-dialog .wpcf7 select,
.kskwn-at-vote-dialog .wpcf7 textarea {
	box-sizing: border-box;
	max-width: 100%;
}

/* Theme: label.checkbox pins the checkbox absolutely at top:0 and pads the text, so the text sits
   below the box's centre. In the dialog: checkbox + text as a flex row, vertically centred. */
.kskwn-at-vote-dialog .wpcf7 label.checkbox {
	padding: 0; /* spacing comes from the theme's margin-top */
}

.kskwn-at-vote-dialog .wpcf7 label.checkbox .wpcf7-list-item > label {
	display: flex;
	align-items: center;
	gap: 1em;
}

.kskwn-at-vote-dialog .wpcf7 label.checkbox input[type=checkbox] {
	position: static;
	flex: none;
}

/* After a successful submit: only CF7's response (the "please confirm" notice) stays. */
.kskwn-at-vote-dialog.is-sent .wpcf7-form > :not(.wpcf7-response-output) {
	display: none;
}

.kskwn-at-vote-dialog.is-sent .wpcf7-response-output {
	margin: 0;
}

@media (max-width: 480px) {
	.kskwn-at-vote-dialog {
		width: calc(100% - 1rem);
		max-height: calc(100% - 1rem);
	}

	.kskwn-at-vote-dialog__inner {
		padding: 1rem;
	}

	.kskwn-at-vote-dialog .kskwn-at-vote-dialog__title {
		font-size: 1.15em;
	}
}

/* ---------------------------------------------------------------- banner */
.kskwn-at-banner {
	position: fixed;
	z-index: 100000;
	left: 50%;
	bottom: 1rem;
	box-sizing: border-box;
	width: calc(100% - 2rem);
	max-width: 34rem;
	max-height: calc(100% - 2rem);
	overflow: auto;
	padding: 1.25rem 1.5rem;
	border-top: 4px solid var(--kskwn-at-accent);
	border-radius: var(--kskwn-at-radius);
	background: var(--kskwn-at-surface);
	color: inherit;
	box-shadow: 0 10px 40px rgba(0, 0, 0, .3);
	transform: translateX(-50%);
}

.kskwn-at-banner--confirmed {
	border-top-color: #1f7a3a;
}

.kskwn-at-banner__title {
	margin: 0 0 .5rem;
	font-size: 1.25em;
	line-height: 1.3;
}

.kskwn-at-banner__text p {
	margin: 0 0 .5em;
}

.kskwn-at-banner__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: .5rem 1rem;
	align-items: center;
	margin-top: .75rem;
}

.kskwn-at-banner__ok {
	margin: 0;
	padding: .45em 1.4em .35em;
	border: 0;
	border-radius: 2em;
	background: var(--kskwn-at-accent);
	color: var(--kskwn-at-on-accent);
	font: inherit;
	cursor: pointer;
}

.kskwn-at-banner__ok:hover {
	background: var(--kskwn-at-accent-hover);
}

.kskwn-at-banner__back {
	color: inherit;
}

@media (prefers-reduced-motion: no-preference) {
	.kskwn-at-banner {
		animation: kskwn-at-banner-in .25s ease-out;
	}

	@keyframes kskwn-at-banner-in {
		from {
			opacity: 0;
			transform: translate(-50%, 1rem);
		}
	}
}