/**
 * Frontend Widget-Styles für Remote Data Display
 * 
 * @package RemoteDataDisplay
 * @since 1.0.0
 */

/* ========== WIDGET WRAPPER ========== */
.rdd-widget-wrapper {
	display: block;
	position: relative;
}

.rdd-widget-content {
	display: inline-block;
}

/* ========== WERTE ========== */
.rdd-version,
.rdd-days {
	display: inline-block;
}

.rdd-prefix,
.rdd-value,
.rdd-suffix,
.rdd-separator {
	display: inline;
}

.rdd-value {
	font-weight: inherit;
}

/* ========== FEHLER-ANZEIGE ========== */
.rdd-error {
	color: #d63638;
	font-style: italic;
}

/* ========== AJAX LOADING ========== */
.rdd-ajax-mode .rdd-loading-placeholder {
	opacity: 0.6;
	font-style: italic;
}

.rdd-ajax-mode.rdd-loaded .rdd-loading-placeholder {
	display: none;
}

.rdd-widget-content.rdd-loaded {
	opacity: 1;
	animation: rdd-fade-in 0.3s ease-in;
}

@keyframes rdd-fade-in {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

/* ========== SKELETON LOADING (optional) ========== */
.rdd-skeleton {
	display: inline-block;
	height: 1em;
	width: 100px;
	background: linear-gradient(90deg, #f0f0f1 25%, #e0e0e1 50%, #f0f0f1 75%);
	background-size: 200% 100%;
	animation: rdd-skeleton-loading 1.5s ease-in-out infinite;
	border-radius: 4px;
}

@keyframes rdd-skeleton-loading {
	0% {
		background-position: 200% 0;
	}
	100% {
		background-position: -200% 0;
	}
}

/* ========== RESPONSIVE ========== */
@media (max-width: 768px) {
	.rdd-widget-wrapper {
		width: 100%;
		text-align: center;
	}
}

/* ========== ACCESSIBILITY ========== */
.rdd-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}