/**
 * Business Status Core – Frontend-Styles.
 *
 * Alle Selektoren sind mit "bsc-" gekapselt. Farben kommen als
 * CSS-Custom-Properties aus den Plugin-Einstellungen und besitzen
 * Fallback-Werte. Unterstützt Dark Mode und reduzierte Bewegung.
 */

/* ---------- Statusbox: [business_status] ---------- */

.bsc-status {
	display: inline-block;
	padding: 0.9rem 1.4rem;
	border-radius: 0.75rem;
	border: 2px solid transparent;
	background: #f6f7f8;
	color: #1a1a1a;
	font-size: 1.05rem;
	line-height: 1.4;
	max-width: 100%;
}

.bsc-status .bsc-status-line {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	margin: 0;
	font-weight: 700;
}

.bsc-status .bsc-message {
	margin: 0.4rem 0 0;
	font-size: 0.92em;
	font-weight: 400;
	opacity: 0.85;
}

.bsc-status.bsc-open {
	border-color: var(--bsc-color-open, #1e8a3c);
	color: var(--bsc-color-open, #1e8a3c);
}

.bsc-status.bsc-closed {
	border-color: var(--bsc-color-closed, #c0392b);
	color: var(--bsc-color-closed, #c0392b);
}

/* ---------- Badge: [business_status_badge] ---------- */

.bsc-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.3rem 0.8rem;
	border-radius: 999px;
	font-size: 0.88rem;
	font-weight: 600;
	line-height: 1.2;
	color: #ffffff;
}

.bsc-badge .bsc-dot {
	width: 0.55em;
	height: 0.55em;
	border-radius: 50%;
	background: currentColor;
	flex: 0 0 auto;
}

.bsc-badge.bsc-open {
	background: var(--bsc-color-open, #1e8a3c);
}

.bsc-badge.bsc-closed {
	background: var(--bsc-color-closed, #c0392b);
}

/* ---------- Button: [business_status_button] ---------- */

.bsc-button {
	display: inline-block;
	padding: 0.75rem 1.6rem;
	border: 0;
	border-radius: 0.6rem;
	background: var(--bsc-color-button, #1d4ed8);
	color: #ffffff;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: filter 0.15s ease;
}

.bsc-button:hover {
	filter: brightness(1.1);
}

.bsc-button:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: 3px;
}

.bsc-button[disabled] {
	opacity: 0.6;
	cursor: wait;
}

/* ---------- Dark Mode ---------- */

@media (prefers-color-scheme: dark) {
	.bsc-status {
		background: #1f2226;
		color: #f2f2f2;
	}
}

/* ---------- Reduzierte Bewegung ---------- */

@media (prefers-reduced-motion: reduce) {
	.bsc-button {
		transition: none;
	}
}