/* FlyStocks 2.2.1 — Lager-Widget (Card + Chips + Countdown + FOMO-Toast) */

.flystocks {
	--fs-ok: #1f9d55;
	--fs-ok-bg: #e7f6ee;
	--fs-low: #d97706;
	--fs-low-bg: #fef3e2;
	--fs-crit: #dc2626;
	--fs-crit-bg: #fdeaea;
	--fs-track: #eceff3;
	--fs-ink: #1f2937;
	--fs-mute: #6b7280;
	--fs-line: #e6eaf0;
	margin: 14px 0;
	padding: 13px 15px 14px;
	background: #fff;
	border: 1px solid var(--fs-line);
	border-radius: 12px;
	box-shadow: 0 1px 3px rgba(15, 32, 54, 0.05);
	font-size: 14px;
	line-height: 1.45;
	color: var(--fs-ink);
}

/* Kopfzeile: Status-Dot + Bestand */
.flystocks__head {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 700;
	font-size: 14.5px;
}

.flystocks__dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--fs-ok);
	flex: 0 0 auto;
	box-shadow: 0 0 0 3px var(--fs-ok-bg);
}

.flystocks__qty { font-variant-numeric: tabular-nums; }

/* Balken */
.flystocks__bar {
	height: 8px;
	border-radius: 6px;
	background: var(--fs-track);
	margin: 9px 0 10px;
	overflow: hidden;
}

.flystocks__fill {
	display: block;
	height: 100%;
	border-radius: 6px;
	background: linear-gradient(90deg, var(--fs-ok), #34c273);
	transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1), background 0.3s ease;
}

/* Level: low */
.flystocks[data-level="low"] .flystocks__dot { background: var(--fs-low); box-shadow: 0 0 0 3px var(--fs-low-bg); }
.flystocks[data-level="low"] .flystocks__fill { background: linear-gradient(90deg, #f59e0b, var(--fs-low)); }
.flystocks[data-level="low"] .flystocks__stocktext strong { color: var(--fs-low); }

/* Level: critical */
.flystocks[data-level="critical"] .flystocks__dot { background: var(--fs-crit); box-shadow: 0 0 0 3px var(--fs-crit-bg); animation: flystocks-blink 1.4s ease-in-out infinite; }
.flystocks[data-level="critical"] .flystocks__fill { background: linear-gradient(90deg, #ef4444, var(--fs-crit)); }
.flystocks[data-level="critical"] .flystocks__stocktext strong { color: var(--fs-crit); }

/* Dringlichkeits-Mikrotext bei kritischem Bestand — immer im DOM, sichtbar nur bei data-level="critical" */
.flystocks__crittext {
	display: none;
	margin: -3px 0 9px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--fs-crit);
}

.flystocks[data-level="critical"] .flystocks__crittext {
	display: block;
}

/* Meta-Chips (verkauft / Warenkorb / zuletzt gekauft) */
.flystocks__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.flystocks__chip {
	display: inline-block;
	padding: 4px 11px;
	background: #f5f7fa;
	border: 1px solid var(--fs-line);
	border-radius: 999px;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--fs-mute);
	white-space: nowrap;
}

.flystocks__chip strong {
	color: var(--fs-ink);
	font-variant-numeric: tabular-nums;
}

.flystocks__check { color: var(--fs-ok); font-weight: 700; }

/* Zahl-Puls bei Änderung (JS setzt .is-changed) */
.flystocks__qty.is-changed,
.flystocks__sold strong.is-changed {
	animation: flystocks-pop 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Versand-Countdown */
.flystocks__countdown {
	margin-top: 10px;
	padding: 8px 12px;
	border-radius: 9px;
	background: #eef6ff;
	border: 1px solid #d5e7fb;
	font-size: 13px;
	color: #1e3a5f;
	display: flex;
	align-items: center;
	gap: 8px;
}

.flystocks__cd-icon { flex: 0 0 auto; }
.flystocks__cd-time { font-variant-numeric: tabular-nums; color: #0b62d6; }

/* FOMO-Toast unten links */
.flystocks-toast {
	position: fixed;
	left: 16px;
	bottom: 16px;
	z-index: 99999;
	display: flex;
	align-items: center;
	gap: 11px;
	max-width: min(340px, calc(100vw - 32px));
	padding: 12px 16px 12px 13px;
	background: #fff;
	border: 2px solid #111827;
	border-radius: 12px;
	box-shadow: 0 8px 30px -6px rgba(15, 32, 54, 0.35);
	font-size: 13.5px;
	line-height: 1.4;
	color: #1f2937;
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
	pointer-events: none;
}

.flystocks-toast.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.flystocks-toast__icon {
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f0f7ff;
	border-radius: 10px;
	font-size: 19px;
}

.flystocks-toast__body { display: flex; flex-direction: column; gap: 2px; }
.flystocks-toast__msg { font-weight: 600; }
.flystocks-toast__time { font-size: 12px; color: #6b7280; }
.flystocks-toast__verified { color: #16a34a; font-weight: 700; }

@keyframes flystocks-pop {
	0% { transform: scale(1); }
	35% { transform: scale(1.35); color: var(--fs-crit); }
	100% { transform: scale(1); }
}

@keyframes flystocks-blink {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.35; }
}

/* Responsive: kompakter auf schmalen Displays; Toast als Vollbreite-Banner
   auf Smartphones (Tablet/Desktop bleibt unten links). */
@media (max-width: 480px) {
	.flystocks { padding: 12px 13px 13px; }
	.flystocks__head { font-size: 13.5px; }
	.flystocks__chip { font-size: 11.5px; padding: 3.5px 9px; }
	.flystocks__countdown { font-size: 12px; padding: 7px 10px; gap: 6px; }
	.flystocks__crittext { font-size: 11.5px; }
}

@media (max-width: 767px) {
	.flystocks-toast {
		left: 10px;
		right: 10px;
		bottom: 10px;
		max-width: none;
		width: auto;
		justify-content: flex-start;
		font-size: 12.5px;
		padding: 10px 13px 10px 11px;
	}
	.flystocks-toast__icon { width: 32px; height: 32px; font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
	.flystocks__fill { transition: none; }
	.flystocks__qty.is-changed,
	.flystocks__sold strong.is-changed,
	.flystocks[data-level="critical"] .flystocks__dot { animation: none; }
	.flystocks-toast { transition: opacity 0.2s ease; transform: none; }
}