/**
 * SecretUndies – Preis-Wärmeanzeige (Kategorie-Ø)
 * Storefront: minimales Inline-Widget direkt unter der Preisaufschlüsselung.
 * Vendor-Dashboard: kompakte Karte im Produktformular.
 */

/* ─── Basis (beide Kontexte) ─────────────────────────────────────── */
.su-dph {
	box-sizing: border-box;
	max-width: 100%;
}

/* ─── Storefront: kein eigener Rahmen, nahtlos ins Layout ────────── */
.su-dph--storefront {
	margin: 10px 0 0;
	padding: 0;
	background: none;
	border: none;
	box-shadow: none;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* Meta-Zeile: Ø-Preis links, Verdict-Pill rechts */
.su-dph-meta-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 7px;
}

.su-dph--storefront .su-dph-track {
	order: 1;
}

.su-dph--storefront .su-dph-meta-row {
	order: 2;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-areas:
		"avg"
		"verdict";
	row-gap: 6px;
	align-items: start;
	margin: 0;
}

.su-dph--storefront .su-dph-avg {
	grid-area: avg;
	font-size: 12px;
	color: #9ca3af;
	margin: 0;
	line-height: 1.4;
}

.su-dph--storefront .su-dph-avg strong {
	color: #6b7280;
	font-weight: 600;
}

/* Verdict-Pill */
.su-dph-verdict {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	padding: 3px 9px;
	border-radius: 20px;
	letter-spacing: 0.03em;
	white-space: nowrap;
	flex-shrink: 0;
}

.su-dph--storefront .su-dph-verdict {
	grid-area: verdict;
	justify-self: start;
}

/* Unter dem Balken links (grün) */
.su-dph--storefront .su-dph-verdict--cheap,
.su-dph--storefront .su-dph-verdict--good {
	justify-self: start;
}

/* Unter dem Balken mittig */
.su-dph--storefront .su-dph-verdict--mid,
.su-dph--storefront .su-dph-verdict--empty {
	justify-self: center;
}

/* Unter dem Balken rechts (rot) */
.su-dph--storefront .su-dph-verdict--high,
.su-dph--storefront .su-dph-verdict--expensive {
	justify-self: end;
}

.su-dph-verdict--cheap     { background: #dcfce7; color: #166534; }
.su-dph-verdict--good      { background: #d1fae5; color: #065f46; }
.su-dph-verdict--mid       { background: #fef9c3; color: #92400e; }
.su-dph-verdict--high      { background: #ffedd5; color: #9a3412; }
.su-dph-verdict--expensive { background: #fee2e2; color: #991b1b; }
.su-dph-verdict--empty     { background: #f3f4f6; color: #9ca3af; }

/* ─── Balken ─────────────────────────────────────────────────────── */
.su-dph-track {
	position: relative;
	overflow: visible;
}

.su-dph--storefront .su-dph-track {
	height: 10px;
	border-radius: 5px;
	margin: 0;
	box-shadow: none;
}

.su-dph-bar {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(
		90deg,
		#059669 0%,
		#34d399 22%,
		#facc15 48%,
		#fb923c 72%,
		#dc2626 100%
	);
}

/* Storefront-Marker: senkrechter Strich statt Dreieck */
.su-dph--storefront .su-dph-marker {
	position: absolute;
	top: 50%;
	width: 3px;
	height: 18px;
	background: #fff;
	border: 2px solid #1f2937;
	border-radius: 2px;
	margin-left: -1.5px;
	transform: translateY(-50%);
	transition: left 0.35s cubic-bezier(0.4, 0, 0.2, 1);
	z-index: 2;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

/* ─── Low-sample-Hinweis ─────────────────────────────────────────── */
.su-dph-low-note {
	font-size: 11px;
	color: #92400e;
	margin: 6px 0 0;
	padding: 4px 8px;
	background: #fffbeb;
	border-radius: 6px;
	border: 1px solid #fde68a;
}

.su-dph--storefront .su-dph-low-note {
	order: 3;
	margin-top: 0;
}

/* ─── Vendor-Dashboard-Karte (kein Storefront) ───────────────────── */
.su-dph:not(.su-dph--storefront) {
	margin: 18px 0 8px;
	padding: 14px 16px 12px;
	border-radius: 12px;
	background: linear-gradient(145deg, #fafafa 0%, #f3f4f6 100%);
	border: 1px solid #e5e7eb;
}

.su-dph-title {
	font-size: 13px;
	font-weight: 700;
	color: #111827;
	margin: 0 0 8px;
	letter-spacing: 0.01em;
}

.su-dph:not(.su-dph--storefront) .su-dph-avg {
	margin: 0 0 10px;
	font-size: 13px;
	color: #4b5563;
	line-height: 1.45;
}

.su-dph:not(.su-dph--storefront) .su-dph-avg strong {
	color: #111827;
}

.su-dph:not(.su-dph--storefront) .su-dph-track {
	height: 20px;
	border-radius: 10px;
	margin: 6px 0 4px;
	box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Vendor-Marker: Dreieck wie gehabt */
.su-dph:not(.su-dph--storefront) .su-dph-marker {
	position: absolute;
	top: 50%;
	width: 0;
	height: 0;
	margin-left: -7px;
	border-left: 7px solid transparent;
	border-right: 7px solid transparent;
	border-bottom: 11px solid #111827;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
	transform: translateY(-115%);
	transition: left 0.35s cubic-bezier(0.4, 0, 0.2, 1);
	z-index: 2;
}

.su-dph-scale {
	display: flex;
	justify-content: space-between;
	font-size: 10px;
	color: #9ca3af;
	margin: 2px 0 8px;
	line-height: 1.3;
}

.su-dph-scale__c {
	text-align: center;
	flex: 1;
	padding: 0 4px;
}

.su-dph-hint {
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	color: #374151;
	min-height: 1.3em;
}

.su-dph--empty .su-dph-hint {
	font-weight: 500;
	color: #6b7280;
}