/* WBNT Lagerstatus – lagerstatusbadge */

/*
 * Statusfärgerna är semantiska (grönt = i lager, rött = slut) och måste bära
 * färg för att förmedla status. Men de är avsiktligt PALETTVARIABLER, inte
 * hårdkodade i reglerna: en köpares tema kan skriva om hela paletten på ett
 * ställe genom att sätta samma variabler under sin egen :root. Defaultvärdena
 * nedan är WBNT-standard och rör inget tema som inte överskriver dem.
 */
:root {
	--wbnt-ls-ok-text: #12733c;
	--wbnt-ls-ok-bg: #e8f8ee;
	--wbnt-ls-ok-icon: #1ea85a;

	--wbnt-ls-low-text: #9a5a00;
	--wbnt-ls-low-bg: #fff5e6;
	--wbnt-ls-low-icon: #ff9800;

	--wbnt-ls-back-text: #0057b8;
	--wbnt-ls-back-bg: #eef6ff;
	--wbnt-ls-back-icon: #2196f3;

	--wbnt-ls-out-text: #b71c1c;
	--wbnt-ls-out-bg: #fdecec;
	--wbnt-ls-out-icon: #e53935;

	--wbnt-ls-ikon-glyf: #ffffff;
}

.wbnt-stock {
	--wbnt-color: var(--wbnt-ls-ok-text);
	--wbnt-bg: var(--wbnt-ls-ok-bg);

	display: flex;
	align-items: center;
	gap: 8px;
	margin: 12px 0;
	padding: 10px 16px;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	background: var(--wbnt-bg);
	color: var(--wbnt-color);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.04);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.wbnt-stock:hover {
	transform: translateY(-1px);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06), 0 3px 8px rgba(0, 0, 0, 0.08);
}

.wbnt-stock::before {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: currentColor;
	font-size: 12px;
	line-height: 1;
}

.wbnt-stock,
.wbnt-stock > span {
	word-break: break-word;
}

/* I lager */
.wbnt-ok {
	--wbnt-color: var(--wbnt-ls-ok-text);
	--wbnt-bg: var(--wbnt-ls-ok-bg);
}
.wbnt-ok::before {
	content: "\2713";
	color: var(--wbnt-ls-ikon-glyf);
	background: var(--wbnt-ls-ok-icon);
}

/* Lågt lager */
.wbnt-low {
	--wbnt-color: var(--wbnt-ls-low-text);
	--wbnt-bg: var(--wbnt-ls-low-bg);
	animation: wbnt-pulse 2.4s ease-in-out infinite;
}
.wbnt-low::before {
	content: "!";
	color: var(--wbnt-ls-ikon-glyf);
	background: var(--wbnt-ls-low-icon);
}

/* Restorder */
.wbnt-back {
	--wbnt-color: var(--wbnt-ls-back-text);
	--wbnt-bg: var(--wbnt-ls-back-bg);
}
.wbnt-back::before {
	content: "\25B6";
	color: var(--wbnt-ls-ikon-glyf);
	background: var(--wbnt-ls-back-icon);
	font-size: 10px;
}

/* Slut i lager */
.wbnt-out {
	--wbnt-color: var(--wbnt-ls-out-text);
	--wbnt-bg: var(--wbnt-ls-out-bg);
}
.wbnt-out::before {
	content: "\2715";
	color: var(--wbnt-ls-ikon-glyf);
	background: var(--wbnt-ls-out-icon);
}

@keyframes wbnt-pulse {
	0%, 100% {
		box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.04);
	}
	50% {
		box-shadow: inset 0 0 0 1px rgba(255, 152, 0, 0.25), 0 0 0 4px rgba(255, 152, 0, 0.08);
	}
}

/* Restorder-tillägg i "lagt i varukorgen"-notisen: bärnstensfärgad, tydligt skild
   från den vanliga (gröna) bekräftelsen. Temat kan dessutom färga hela notisrutan. */
.wbnt-ls-restnotis {
	display: block;
	margin-top: 4px;
	font-weight: 600;
	color: var(--wbnt-ls-low-text);
}

@media (max-width: 480px) {
	.wbnt-stock {
		font-size: 13px;
		padding: 8px 12px;
	}
}