/* Artikel Feedback – Frontend Styles */

/* Kopf-Zähler: Intro-Zeile + Tabellen-Layout (unsichtbare Ränder).
   Zeile 1: Daumen hoch links, Daumen runter rechts. Zeile 2: Balken über
   die volle Breite. Nutzt CSS-Variablen (inline vom Server gesetzt),
   damit Farben aus den Plugin-Einstellungen ohne zusätzliches CSS pro
   Website greifen. */
.afb-header-counter {
	margin: 0 0 1.4em 0;
	padding: 2px 0;
}

.afb-hc-intro {
	font-size: 1.2em;
	font-weight: 700;
	color: #1f2124;
	line-height: 1;
	margin-bottom: 0.7em;
}

.afb-hc-table {
	width: 100%;
	border-collapse: collapse;
	border: none;
}

.afb-hc-table td {
	border: none;
	padding: 0;
}

.afb-hc-cell {
	width: 50%;
	vertical-align: middle;
}

.afb-hc-cell-up {
	text-align: left;
}

.afb-hc-cell-down {
	text-align: right;
}

.afb-hc-cell-bar {
	padding-top: 0.7em;
}

.afb-hc-item {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	padding: 0.25em 0.15em;
	border-radius: 999px;
	color: #55585e;
	font-weight: 500;
	line-height: 1;
	font-size: 1.15em;
	transition: background-color 0.3s ease, color 0.3s ease;
}

/* Nur die führende Seite wird farbig hinterlegt und fett - die andere
   bleibt bewusst neutral, damit der Überhang sofort ins Auge fällt. */
.afb-hc-item.afb-hc-lead {
	font-weight: 700;
	padding: 0.25em 0.7em;
}

.afb-hc-item.afb-hc-up.afb-hc-lead {
	background: var( --afb-bg-positive, rgba(46,125,50,0.14) );
	color: var( --afb-color-positive, #2e7d32 );
}

.afb-hc-item.afb-hc-down.afb-hc-lead {
	background: var( --afb-bg-negative, rgba(198,40,40,0.14) );
	color: var( --afb-color-negative, #c62828 );
}

/* Icons wirklich mittig: eigene flex-Box, kein Baseline-Versatz. */
.afb-hc-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 1em;
	font-size: 1.3em;
	line-height: 1;
}

.afb-hc-count {
	display: inline-flex;
	align-items: center;
	line-height: 1;
}

.afb-hc-percent {
	display: inline-flex;
	align-items: center;
	line-height: 1;
	font-size: 0.9em;
	opacity: 0.85;
}

/* Balken: über die komplette Breite, doppelte Höhe (11px -> 22px),
   Enden bleiben durch Container-Rundung + overflow:hidden abgerundet. */
.afb-hc-bar {
	width: 100%;
	height: 22px;
	border-radius: 999px;
	overflow: hidden;
	background: #e7e8ea;
	display: flex;
}

.afb-hc-bar[hidden] {
	display: none;
}

.afb-hc-bar-positive {
	height: 100%;
	background: var( --afb-color-positive, #2e7d32 );
	transition: width 0.4s ease;
}

.afb-hc-bar-negative {
	height: 100%;
	background: var( --afb-color-negative, #c62828 );
	transition: width 0.4s ease;
}

/* Feedback-Box am Artikelende: zentriert, ruhiges Karten-Design */
.afb-feedback-box {
	margin: 2.8em auto 1.8em auto;
	padding: 1.8em 2em;
	border-radius: 16px;
	background: linear-gradient(160deg, #fbfcfd 0%, #eef1f4 100%);
	border: 1px solid #e3e5e8;
	box-shadow: 0 6px 20px rgba(20, 20, 30, 0.06);
	text-align: center;
	max-width: 460px;
}

.afb-feedback-question {
	font-size: 1.15em;
	font-weight: 700;
	letter-spacing: 0.01em;
	margin-bottom: 1.1em;
	color: #2a2d33;
}

.afb-feedback-buttons {
	display: flex;
	justify-content: center;
	gap: 1.1em;
}

.afb-btn {
	font-size: 1.9em;
	line-height: 1;
	width: 1.9em;
	height: 1.9em;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 1px solid #dcdde0;
	border-radius: 50%;
	background: #ffffff;
	cursor: pointer;
	box-shadow: 0 2px 6px rgba(20, 20, 30, 0.05);
	transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.afb-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 14px rgba(20, 20, 30, 0.1);
}

.afb-btn-up:hover {
	background: #eaf7ec;
	border-color: #a8dcb0;
}

.afb-btn-down:hover {
	background: #fbeceb;
	border-color: #eab3af;
}

.afb-btn:active {
	transform: translateY(0);
}

.afb-btn:disabled {
	opacity: 0.5;
	cursor: default;
	transform: none;
	box-shadow: none;
}

.afb-feedback-thanks {
	font-size: 1.08em;
	font-weight: 700;
	color: #2e7d32;
	opacity: 0;
	transform: translateY(4px);
	animation: afbFadeIn 0.4s ease forwards;
}

@keyframes afbFadeIn {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.afb-feedback-box.afb-voted .afb-feedback-question,
.afb-feedback-box.afb-voted .afb-feedback-buttons {
	display: none;
}

.afb-feedback-box.afb-voted .afb-feedback-thanks {
	display: block;
}

.afb-feedback-error {
	margin-top: 0.7em;
	color: #c62828;
	font-size: 0.9em;
}

/* Sidebar-Widget: Top 5 (7 Tage) */
.afb-widget-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.afb-widget-list li {
	padding: 0.5em 0;
	border-bottom: 1px solid #eee;
}

.afb-widget-list li:last-child {
	border-bottom: none;
}

.afb-widget-list a {
	font-weight: 600;
	text-decoration: none;
}

.afb-widget-meta {
	display: block;
	font-size: 0.85em;
	color: #666;
	margin-top: 0.2em;
}

/* Dashboard-Widget: Top 5 / Flop 5 des Monats */
.afb-dash-widget {
	font-size: 13px;
}

.afb-dash-section {
	margin-bottom: 1.2em;
}

.afb-dash-section-title {
	font-size: 1.05em;
	font-weight: 700;
	margin-bottom: 0.6em;
	padding-bottom: 0.3em;
	border-bottom: 2px solid #eceef0;
}

.afb-dash-title-top {
	color: #1f2124;
}

.afb-dash-title-flop {
	color: #1f2124;
}

.afb-dash-empty {
	color: #666;
	margin: 0.3em 0 0.8em 0;
}

.afb-dash-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.afb-dash-row {
	padding: 0.55em 0;
	border-bottom: 1px solid #f0f1f2;
}

.afb-dash-row:last-child {
	border-bottom: none;
}

.afb-dash-row-title {
	font-weight: 600;
	margin-bottom: 0.35em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.afb-dash-row-title a {
	text-decoration: none;
}

.afb-dash-bar-track {
	width: 100%;
	height: 8px;
	border-radius: 999px;
	background: #eceef0;
	overflow: hidden;
	margin-bottom: 0.3em;
}

.afb-dash-bar-fill {
	height: 100%;
	border-radius: 999px;
	transition: width 0.3s ease;
}

.afb-dash-row-meta {
	font-size: 0.9em;
	color: #666;
}

.afb-dash-row-percent {
	font-weight: 600;
	color: #333;
}

.afb-dash-footer {
	margin: 0.8em 0 0 0;
}

.afb-dash-footer a {
	text-decoration: none;
	font-weight: 600;
}