/*
 * Bewusst zurückhaltend: das Plugin läuft später in einem unbekannten
 * Kundentheme. Schriften, Farben und Radien werden geerbt, gesetzt wird
 * nur, was die Anzeige braucht.
 */

.insic-avs-widget {
	min-height: 320px;
}

.insic-avs-widget[data-loader]:not(.is-ready)::before {
	content: "";
	display: block;
	height: 2px;
	width: 100%;
	background: currentColor;
	opacity: 0.15;
	animation: insic-avs-pulse 1.2s ease-in-out infinite;
}

@keyframes insic-avs-pulse {
	0%, 100% { opacity: 0.08; }
	50% { opacity: 0.24; }
}

.insic-avs-status {
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: inherit;
	padding: 1rem 1.25rem;
	margin: 0 0 1.5rem;
}

.insic-avs-status__row {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

.insic-avs-status__dot {
	width: 0.6rem;
	height: 0.6rem;
	border-radius: 50%;
	flex: 0 0 auto;
	background: #9a9a9a;
}

.insic-avs-status[data-status="1"] .insic-avs-status__dot {
	background: #c98a00;
}

.insic-avs-status[data-status="2"] .insic-avs-status__dot {
	background: #2f7a3d;
}

.insic-avs-status__label {
	font-weight: 600;
}

.insic-avs-status__hint,
.insic-avs-status__service {
	margin: 0.4rem 0 0;
	font-size: 0.9em;
	opacity: 0.75;
}

.insic-avs-status__service:empty {
	display: none;
}

/* Kurzes Aufblitzen, wenn der Status wechselt — das ist der Moment,
   den die Demo zeigen soll. */
.insic-avs-status.is-changed {
	animation: insic-avs-flash 1.4s ease-out;
}

@keyframes insic-avs-flash {
	0% { box-shadow: 0 0 0 0 rgba(47, 122, 61, 0.45); }
	100% { box-shadow: 0 0 0 12px rgba(47, 122, 61, 0); }
}

.insic-avs-notice {
	border-left: 3px solid #a8501b;
	background: rgba(168, 80, 27, 0.06);
	padding: 0.75rem 1rem;
	margin: 0 0 1rem;
	font-size: 0.95em;
	line-height: 1.55;
}

@media (prefers-reduced-motion: reduce) {
	.insic-avs-widget[data-loader]:not(.is-ready)::before,
	.insic-avs-status.is-changed {
		animation: none;
	}
}