/**
 * Potražnja: gradijenti po tier_key (nova | rise | popular | hot).
 * Zalihe: critical | warning | moderate | ok — boje i količine u PHP (ochale_demand_stock_display).
 */

.oo-demand-stock {
	display: flex;
	flex-direction: column;
	/* razmak između popularity reda i kutije zaliha: dodatno ~30% manji */
	gap: clamp(6px, 1vw, 8px);
	/* razmak od naslova/cijena do „Potražnja…“ (još +20% od prethodnog clamp-a) */
	margin-top: clamp(22px, 4.5vw, 36px);
	/* PDP label stack koristi align-items: flex-start — inače blok ostane uzak kao sadržaj */
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	align-self: stretch;
	background: transparent;
	border: 1px solid rgba(15, 23, 42, 0.1);
	border-radius: 14px;
	padding: clamp(14px, 2vw, 18px);
}

/* --- Potražnja --- */
.oo-demand {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-rows: auto auto;
	column-gap: 12px;
	/* razmak „Potražnja ove sezone“ → progress bar (50% od 8px) */
	row-gap: 4px;
	align-items: center;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	min-width: 0;
}

.oo-demand__caption {
	grid-column: 1 / -1;
	font-size: 0.85rem;
	font-weight: 500;
	color: #64748b;
	letter-spacing: 0.02em;
}

.oo-demand__track {
	grid-column: 1 / 2;
	grid-row: 2;
	height: 9px;
	border-radius: 999px;
	background: linear-gradient(180deg, #f1f5f9 0%, #e2e8f0 100%);
	box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.06);
	overflow: hidden;
	min-width: 0;
}

.oo-demand__fill {
	display: block;
	height: 100%;
	border-radius: 999px;
	box-shadow: 0 0 12px rgba(0, 0, 0, 0.08);
	transition: width 0.35s ease;
	/* default kad nema modifikatora (npr. stari cache) */
	background: linear-gradient(90deg, #fcd34d 0%, #f59e0b 50%, #ea580c 100%);
}

/* Nova sezona (S≤0): svjež “launch” — cijan / tirkiz, ne siva */
.oo-demand--nova-sezona .oo-demand__fill {
	background: linear-gradient(90deg, #5eead4 0%, #2dd4bf 42%, #0d9488 100%);
}

.oo-demand--nova-sezona .oo-demand__badge {
	color: #0f766e;
}

/* Potražnja raste: zlatni warmup */
.oo-demand--tier-rise .oo-demand__fill {
	background: linear-gradient(90deg, #fcd34d 0%, #f59e0b 50%, #ea580c 100%);
}

.oo-demand--tier-rise .oo-demand__badge {
	color: #c2410c;
}

/* Popularno: bakar / duboki jantar */
.oo-demand--tier-popular .oo-demand__fill {
	background: linear-gradient(90deg, #fdba74 0%, #f97316 45%, #dc2626 100%);
}

.oo-demand--tier-popular .oo-demand__badge {
	color: #b91c1c;
}

/* Velika potražnja: vruće, premium rubin */
.oo-demand--tier-hot .oo-demand__fill {
	background: linear-gradient(90deg, #fb7185 0%, #e11d48 40%, #9f1239 100%);
}

.oo-demand--tier-hot .oo-demand__badge {
	color: #881337;
}

.oo-demand__badge {
	grid-column: 2 / 3;
	grid-row: 2;
	font-size: 0.9rem;
	font-weight: 700;
	white-space: nowrap;
	color: #c2410c;
}

/* Sakrij do prvog JS updatea (da ne bljeska zbroj svih SKU) */
.oo-stock-alert--pending {
	visibility: hidden;
}

/* --- Zalihe (SKU zbroj): jasnija semantika, “skuplji” ton --- */
.oo-stock-alert {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 12px 14px;
	border-radius: 10px;
	border: 1px solid transparent;
	border-left-width: 4px;
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

.oo-stock-alert__icon {
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.85rem;
	font-weight: 800;
	line-height: 1;
}

.oo-stock-alert__text {
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.35;
	flex: 1 1 auto;
	min-width: 0;
}

.oo-stock-alert__title {
	font-weight: 700;
}

.oo-stock-alert__sub {
	font-weight: 400;
}

/* < 5 — kritično */
.oo-stock-alert--critical {
	background: linear-gradient(135deg, #fff1f2 0%, #ffe4e6 100%);
	border-color: rgba(225, 29, 72, 0.22);
	border-left-color: #e11d48;
}

.oo-stock-alert--critical .oo-stock-alert__icon {
	background: #fda4af;
	color: #9f1239;
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.65) inset;
}

.oo-stock-alert--critical .oo-stock-alert__title {
	color: #9f1239;
}

.oo-stock-alert--critical .oo-stock-alert__text {
	color: #57534e;
}

/* 5–20 — upozorenje (amber) */
.oo-stock-alert--warning {
	background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
	border-color: rgba(245, 158, 11, 0.35);
	border-left-color: #f59e0b;
}

.oo-stock-alert--warning .oo-stock-alert__icon {
	background: #fde68a;
	color: #b45309;
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.6) inset;
}

.oo-stock-alert--warning .oo-stock-alert__title {
	color: #92400e;
}

.oo-stock-alert--warning .oo-stock-alert__text {
	color: #57534e;
}

/* 21–50 — stabilno / mirno (plava informacija, ne još jedna naranča) */
.oo-stock-alert--moderate {
	background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
	border-color: rgba(59, 130, 246, 0.28);
	border-left-color: #2563eb;
}

.oo-stock-alert--moderate .oo-stock-alert__icon {
	background: #93c5fd;
	color: #1e3a8a;
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.65) inset;
}

.oo-stock-alert--moderate .oo-stock-alert__title {
	color: #1e40af;
}

.oo-stock-alert--moderate .oo-stock-alert__text {
	color: #475569;
}

/* > 50 — odlična zaliha */
.oo-stock-alert--ok {
	background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
	border-color: rgba(16, 185, 129, 0.32);
	border-left-color: #059669;
}

.oo-stock-alert--ok .oo-stock-alert__icon {
	background: #6ee7b7;
	color: #065f46;
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.65) inset;
}

.oo-stock-alert--ok .oo-stock-alert__title {
	color: #047857;
}

.oo-stock-alert--ok .oo-stock-alert__text {
	color: #475569;
}

/* 4K: veći demand tekst i veći SKU alert sa sadržajem */
@media (min-width: 3840px) {
	/* 4K: duplo veći odmak indikatora od naslova/cijene */
	.oo-demand-stock {
		margin-top: clamp(44px, 9vw, 72px);
	}

	.oo-demand__caption {
		font-size: 1.45rem;
	}

	.oo-demand__badge {
		font-size: 1.55rem;
	}

	.oo-demand__track {
		height: 14px;
	}

	.oo-stock-alert {
		gap: 16px;
		padding: 19px 22px;
		border-radius: 14px;
		border-left-width: 5px;
	}

	.oo-stock-alert__icon {
		width: 34px;
		height: 34px;
		font-size: 1.25rem;
	}

	.oo-stock-alert__text {
		font-size: 1.55rem;
		line-height: 1.5;
	}
}

/* FULL HD i manji desktop: SKU alert ~20% niži i kompaktniji */
@media (min-width: 901px) and (max-width: 1999px) {
	.oo-stock-alert {
		gap: 9px;
		padding: 11px 13px;
		border-radius: 9px;
		border-left-width: 4px;
	}

	.oo-stock-alert__icon {
		width: 21px;
		height: 21px;
		font-size: 0.81rem;
	}

	.oo-stock-alert__text {
		font-size: 0.855rem;
		line-height: 1.28;
	}
}

@media (max-width: 480px) {
	.oo-demand {
		grid-template-columns: 1fr;
	}

	.oo-demand__badge {
		grid-column: 1;
		grid-row: 3;
		justify-self: start;
	}
}