/**
 * KELL CI-Farben (siehe Spec Abschnitt 8):
 *   Blau #005B8E, Grün #1E7D1E, Rot #C8001A, Brand-Grün #83be3d.
 *
 * Kontraste gegen Weiß geprüft (WCAG 2.1 AA):
 *   - Blau, Grün, Rot bestehen als Text-/Interaktionsfarbe auf Weiß (>= 4.5:1).
 *   - Brand-Grün (#83be3d) besteht NICHT (~2.2:1) – wird daher nur dekorativ
 *     (Rahmen/Akzent), nie für Text oder Fokus-Indikatoren verwendet.
 *
 * Die meisten Werte hier sind zugleich die Elementor-Style-Control-Defaults
 * (siehe class-elementor-widget.php) – diese Datei ist also die "unveränderte"
 * Optik; Elementor überschreibt pro Widget-Instanz mit höherer Spezifität
 * (WRAPPER-Klasse), sobald jemand im Editor etwas anpasst.
 */
.kell-bt-search-widget {
	font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	color: #1d2327;
	background-color: #ffffff;
	border-left: 4px solid #83be3d;
	padding: 1em 1.25em;
}

.kell-bt-search-form {
	display: flex;
	flex-wrap: wrap;
	gap: 1em;
	align-items: flex-end;
}

.kell-bt-field {
	display: flex;
	flex-direction: column;
	position: relative;
	min-width: 12em;
}

.kell-bt-field label {
	font-weight: 600;
	margin-bottom: 0.35em;
}

.kell-bt-input {
	padding: 0.5em 0.6em;
	border: 1px solid #6b7280;
	border-radius: 3px;
	font-size: 1em;
	font-family: inherit;
	background-color: #ffffff;
}

.kell-bt-input:focus-visible,
.kell-bt-search-button:focus-visible {
	outline: 3px solid #005B8E;
	outline-offset: 2px;
}

.kell-bt-search-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6em;
	background: #005B8E;
	color: #fff;
	border: none;
	border-radius: 3px;
	padding: 0.6em 1.4em;
	font-size: 1em;
	font-weight: 600;
	cursor: pointer;
}

.kell-bt-search-button:hover {
	background: #00456b;
}

.kell-bt-search-button:disabled {
	cursor: not-allowed;
	opacity: 0.75;
}

/* Ladezustand: reiner CSS-Spinner, standardmäßig ausgeblendet. */
.kell-bt-spinner {
	display: none;
	width: 1em;
	height: 1em;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: kell-bt-spin 0.7s linear infinite;
}

.is-loading .kell-bt-spinner {
	display: inline-block;
}

@keyframes kell-bt-spin {
	to {
		transform: rotate( 360deg );
	}
}

.kell-bt-autocomplete-list {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 20;
	margin: 2px 0 0;
	padding: 0;
	list-style: none;
	background: #fff;
	border: 1px solid #6b7280;
	border-radius: 3px;
	max-height: 14em;
	overflow-y: auto;
	box-shadow: 0 2px 6px rgba( 0, 0, 0, 0.15 );
}

.kell-bt-autocomplete-list[hidden] {
	display: none;
}

.kell-bt-autocomplete-list [role="option"] {
	padding: 0.5em 0.6em;
	cursor: pointer;
}

.kell-bt-autocomplete-list [role="option"].is-active,
.kell-bt-autocomplete-list [role="option"]:hover {
	background: #005B8E;
	color: #fff;
}

.kell-bt-search-status {
	margin: 1em 0;
	font-weight: 600;
	color: #1d2327;
}

/* Getrennte Farben für "keine Treffer" vs. echte Fehlermeldung (Elementor-
   Style-Controls überschreiben diese Defaults pro Widget-Instanz). */
.kell-bt-search-status.kell-bt-status--empty {
	color: #1d2327;
}

.kell-bt-search-status.kell-bt-status--error {
	color: #C8001A;
}

.kell-bt-table-scroll {
	overflow-x: auto;
	margin: 12px 0;
	position: relative;

	/* Scroll-Schatten (rein CSS, kein JS): zwei "Masken"-Verläufe scrollen mit
	   dem Inhalt (background-attachment: local) und decken die zwei fest
	   positionierten Schlagschatten-Verläufe (background-attachment: scroll)
	   ab, sobald man bis an den jeweiligen Rand gescrollt hat. Dadurch
	   erscheint der Schatten nur, solange in die jeweilige Richtung noch mehr
	   Inhalt zu sehen ist. Über die Elementor-Style-Control "Scroll-Schatten
	   anzeigen" wird nur die Variable --kell-bt-scroll-shadow-color gesetzt
	   (an/aus), nicht die ganze Technik.
	   Hinweis: Die Maskenfarbe ist auf Weiß fixiert (passend zum Standard-
	   Containerhintergrund) – bei einem stark abweichenden, individuell
	   gewählten Containerhintergrund kann der Übergang an den Rändern leicht
	   sichtbar sein. */
	background-repeat: no-repeat;
	background-color: #fff;
	background-image:
		linear-gradient( to right, #fff 30%, rgba( 255, 255, 255, 0 ) ),
		linear-gradient( to left, #fff 30%, rgba( 255, 255, 255, 0 ) ),
		radial-gradient( farthest-side at 0 50%, var( --kell-bt-scroll-shadow-color, rgba( 0, 0, 0, 0.18 ) ), rgba( 0, 0, 0, 0 ) ),
		radial-gradient( farthest-side at 100% 50%, var( --kell-bt-scroll-shadow-color, rgba( 0, 0, 0, 0.18 ) ), rgba( 0, 0, 0, 0 ) );
	background-position: 0 0, 100% 0, 0 0, 100% 0;
	background-size: 24px 100%, 24px 100%, 10px 100%, 10px 100%;
	background-attachment: local, local, scroll, scroll;
}

.kell-bt-results-table {
	border-collapse: collapse;
	width: 100%;
	min-width: 60em;
}

.kell-bt-results-table[hidden] {
	display: none;
}

.kell-bt-results-table th,
.kell-bt-results-table td {
	border: 1px solid #d1d5db;
	padding: 0.5em 0.75em;
	text-align: left;
	white-space: nowrap;
}

.kell-bt-results-table thead th {
	background: #005B8E;
	color: #fff;
	/* position/top werden bei aktiviertem Sticky-Header per Elementor-Control
	   gesetzt (Default: position: static, siehe class-elementor-widget.php). */
}

.kell-bt-results-table tbody tr:nth-child( odd ) {
	background: #ffffff;
}

.kell-bt-results-table tbody tr:nth-child( even ) {
	background: #f3f4f6;
}

.kell-bt-results-table tbody tr:hover {
	background: #eef6fb;
}

.kell-bt-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1em;
	margin: 1em 0;
}

.kell-bt-pagination[hidden] {
	display: none;
}

.kell-bt-pagination-prev,
.kell-bt-pagination-next {
	background: #ffffff;
	color: #005B8E;
	border: 1px solid #005B8E;
	border-radius: 3px;
	padding: 0.5em 1em;
	font-size: 1em;
	font-family: inherit;
	cursor: pointer;
}

.kell-bt-pagination-prev:hover:not( :disabled ),
.kell-bt-pagination-next:hover:not( :disabled ) {
	background: #eef6fb;
}

.kell-bt-pagination-prev:disabled,
.kell-bt-pagination-next:disabled {
	cursor: not-allowed;
	opacity: 0.5;
}

.kell-bt-pagination-prev:focus-visible,
.kell-bt-pagination-next:focus-visible {
	outline: 3px solid #005B8E;
	outline-offset: 2px;
}

.kell-bt-pagination-status {
	font-weight: 600;
}

@media ( prefers-reduced-motion: reduce ) {
	.kell-bt-search-widget * {
		transition: none !important;
		animation: none !important;
		scroll-behavior: auto !important;
	}

	.kell-bt-spinner {
		/* Rotation entfällt, das Element bleibt als statischer Ring sichtbar. */
		animation: none;
		border-right-color: currentColor;
		opacity: 0.6;
	}
}