/* ==========================================================
   PetrolPress
   07 – Badges
   Badges, Labels und Status-Markierungen für Deals,
   Produkttests, Empfehlungen und redaktionelle Hinweise
========================================================== */


/* ==========================================================
   BASE BADGE
========================================================== */

.badge,
.label,
.pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-1);
	width: fit-content;
	max-width: 100%;
	padding: var(--badge-padding);
	font-family: var(--font-family-body);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-bold);
	line-height: 1;
	letter-spacing: 0.05em;
	text-align: center;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--color-primary-deep);
	background: var(--color-primary-soft);
	border: 1px solid transparent;
	border-radius: var(--badge-radius);
	box-shadow: var(--shadow-xs);
}

.badge svg,
.label svg,
.pill svg {
	width: 1em;
	height: 1em;
	flex: 0 0 auto;
	stroke-width: 2;
}


/* ==========================================================
   COLOR VARIANTS
========================================================== */

.badge-primary {
	color: var(--color-white);
	background: var(--color-primary);
	border-color: var(--color-primary);
}

.badge-primary-soft {
	color: var(--color-primary-deep);
	background: var(--color-primary-soft);
	border-color: rgba(11, 122, 120, 0.14);
}

.badge-secondary {
	color: var(--color-primary-deep);
	background: var(--color-secondary);
	border-color: var(--color-secondary-dark);
}

.badge-accent,
.badge-gold {
	color: var(--color-primary-deep);
	background: var(--color-accent-light);
	border-color: rgba(216, 178, 95, 0.4);
	box-shadow: var(--shadow-gold);
}

.badge-dark {
	color: var(--color-white);
	background: var(--color-primary-deep);
	border-color: var(--color-primary-deep);
}

.badge-light {
	color: var(--color-heading);
	background: var(--color-white);
	border-color: var(--color-border);
}

.badge-outline {
	color: var(--color-primary);
	background: transparent;
	border-color: var(--color-primary);
	box-shadow: none;
}

.badge-glass {
	color: var(--color-primary-deep);
	background: var(--glass-background-medium);
	border-color: var(--glass-border);
	box-shadow:
		var(--shadow-xs),
		var(--shadow-inner-light);
	backdrop-filter: var(--glass-blur-small);
	-webkit-backdrop-filter: var(--glass-blur-small);
}


/* ==========================================================
   STATUS BADGES
========================================================== */

.badge-success {
	color: #1f6b4d;
	background: var(--color-success-soft);
	border-color: rgba(47, 143, 107, 0.22);
}

.badge-warning {
	color: #8b5c17;
	background: var(--color-warning-soft);
	border-color: rgba(215, 153, 50, 0.24);
}

.badge-error {
	color: #973f3f;
	background: var(--color-error-soft);
	border-color: rgba(201, 93, 93, 0.22);
}

.badge-info {
	color: #356b8b;
	background: var(--color-info-soft);
	border-color: rgba(79, 143, 183, 0.22);
}


/* ==========================================================
   CONTENT-SPECIFIC BADGES
========================================================== */

.badge-deal,
.badge-top-deal {
	color: var(--color-primary-deep);
	background: var(--gradient-gold);
	border-color: var(--color-accent);
	box-shadow: var(--shadow-gold);
}

.badge-tested {
	color: var(--color-white);
	background: var(--gradient-primary);
	border-color: var(--color-primary);
}

.badge-new {
	color: var(--color-primary-deep);
	background: var(--color-secondary-light);
	border-color: rgba(74, 167, 164, 0.22);
}

.badge-recommended {
	color: var(--color-primary-deep);
	background: var(--color-sage-light);
	border-color: rgba(138, 169, 154, 0.32);
}

.badge-affiliate {
	color: var(--color-text-muted);
	background: var(--color-background-soft);
	border-color: var(--color-border);
	font-weight: var(--font-weight-semibold);
	letter-spacing: 0.04em;
}

.badge-sponsored {
	color: var(--color-text-muted);
	background: var(--color-beige-light);
	border-color: rgba(216, 178, 95, 0.2);
}

.badge-expiring {
	color: #8b5c17;
	background: var(--color-warning-soft);
	border-color: rgba(215, 153, 50, 0.28);
}


/* ==========================================================
   PERCENT & VALUE BADGES
========================================================== */

.badge-percent {
	min-width: 3.1rem;
	min-height: 3.1rem;
	padding: var(--space-2);
	font-family: var(--font-family-heading);
	font-size: var(--font-size-md);
	letter-spacing: 0;
	text-transform: none;
	color: var(--color-white);
	background: var(--gradient-primary);
	border: 2px solid rgba(255, 255, 255, 0.82);
	border-radius: var(--radius-circle);
	box-shadow: var(--shadow-md);
}

.badge-percent-lg {
	min-width: 4.6rem;
	min-height: 4.6rem;
	font-size: var(--font-size-xl);
}

.badge-value {
	font-family: var(--font-family-heading);
	font-size: var(--font-size-sm);
	letter-spacing: 0;
	text-transform: none;
}


/* ==========================================================
   ICON BADGES
========================================================== */

.badge-icon {
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border-radius: var(--radius-circle);
}

.badge-icon-sm {
	width: 2rem;
	height: 2rem;
}

.badge-icon-lg {
	width: 3.25rem;
	height: 3.25rem;
}

.badge-dot::before {
	content: "";
	width: 0.48rem;
	height: 0.48rem;
	flex: 0 0 auto;
	background: currentColor;
	border-radius: var(--radius-circle);
}


/* ==========================================================
   BADGE SIZES
========================================================== */

.badge-sm {
	padding: 0.34rem 0.6rem;
	font-size: 0.68rem;
}

.badge-lg {
	padding: 0.58rem 1rem;
	font-size: var(--font-size-sm);
}


/* ==========================================================
   BADGE GROUPS
========================================================== */

.badge-group {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
}

.badge-group-vertical {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-2);
}


/* ==========================================================
   POSITIONED BADGES
========================================================== */

.badge-floating {
	position: absolute;
	z-index: var(--z-content);
}

.badge-top-left {
	top: var(--space-4);
	left: var(--space-4);
}

.badge-top-right {
	top: var(--space-4);
	right: var(--space-4);
}

.badge-bottom-left {
	bottom: var(--space-4);
	left: var(--space-4);
}

.badge-bottom-right {
	right: var(--space-4);
	bottom: var(--space-4);
}


/* ==========================================================
   RIBBON BADGE
========================================================== */

.badge-ribbon {
	position: absolute;
	top: var(--space-5);
	left: -0.55rem;
	z-index: var(--z-content);
	padding:
		0.55rem
		1rem
		0.55rem
		1.15rem;
	color: var(--color-white);
	background: var(--color-primary);
	border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
	box-shadow: var(--shadow-sm);
}

.badge-ribbon::before {
	content: "";
	position: absolute;
	bottom: -0.5rem;
	left: 0;
	width: 0;
	height: 0;
	border-top: 0.5rem solid var(--color-primary-dark);
	border-left: 0.55rem solid transparent;
}


/* ==========================================================
   WATERCOLOUR BADGE
========================================================== */

.badge-watercolor {
	position: relative;
	overflow: visible;
	color: var(--color-primary-deep);
	background: transparent;
	border: 0;
	box-shadow: none;
	isolation: isolate;
}

.badge-watercolor::before {
	content: "";
	position: absolute;
	inset: -0.45rem -0.7rem;
	z-index: var(--z-background);
	background: var(--watercolor-teal);
	border-radius: 48% 52% 56% 44% / 42% 48% 52% 58%;
	transform: rotate(-2deg);
	opacity: var(--watercolor-opacity-medium);
}


/* ==========================================================
   INTERACTIVE BADGES
========================================================== */

a.badge,
button.badge {
	cursor: pointer;
	transition:
		transform var(--transition-base),
		box-shadow var(--transition-base),
		background-color var(--transition-base),
		border-color var(--transition-base),
		color var(--transition-base);
}

a.badge:hover,
button.badge:hover {
	text-decoration: none;
	transform: translateY(-2px);
	box-shadow: var(--shadow-sm);
}

a.badge:focus-visible,
button.badge:focus-visible {
	outline: none;
	box-shadow:
		var(--shadow-sm),
		var(--focus-ring);
}

.badge[aria-pressed="true"],
.badge.is-active {
	color: var(--color-white);
	background: var(--color-primary);
	border-color: var(--color-primary);
}


/* ==========================================================
   DARK SECTION SUPPORT
========================================================== */

.section-dark .badge-light,
.section-dark .badge-glass,
.section-dark .badge-affiliate {
	color: var(--color-white);
	background: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.16);
}

.section-dark .badge-outline {
	color: var(--color-white);
	border-color: rgba(255, 255, 255, 0.48);
}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 480px) {

	.badge,
	.label,
	.pill {
		font-size: 0.69rem;
	}

	.badge-lg {
		padding: 0.5rem 0.85rem;
		font-size: var(--font-size-xs);
	}

	.badge-percent-lg {
		min-width: 4rem;
		min-height: 4rem;
		font-size: var(--font-size-lg);
	}
}


/* ==========================================================
   REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion: reduce) {

	a.badge,
	button.badge {
		transition: none;
	}

	a.badge:hover,
	button.badge:hover {
		transform: none;
	}
}