/* ============================================================
   POPULAR SERVICE BADGE & STYLES
   ============================================================ */

/* Service Card Popular Badge */
.service-popular-badge {
	position: absolute;
	top: -10px;
	right: 15px;
	background: linear-gradient(135deg, #ff6b6b 0%, #ff8e53 100%);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	padding: 0.35rem 0.75rem;
	border-radius: 20px;
	box-shadow: 0 4px 15px rgba(255, 107, 107, 0.4);
	display: flex;
	align-items: center;
	gap: 0.25rem;
	z-index: 2;
	animation: pulse-badge 2s infinite;
}

.badge-icon {
	font-size: 0.875rem;
}

/* Service Card with Popular State */
.service-card-mini {
	position: relative;
	text-align: center;
	padding: 1.5rem;
	transition: all 0.3s ease;
}

.service-card-mini.is-popular {
	border: 2px solid #ff6b6b;
	transform: translateY(-4px);
	box-shadow: 0 12px 30px rgba(255, 107, 107, 0.15);
}

.service-card-mini:hover {
	border-color: var(--med-primary);
	box-shadow: var(--med-shadow-hover);
}

.service-card-mini.is-popular:hover {
	border-color: #ff6b6b;
	transform: translateY(-6px);
	box-shadow: 0 16px 40px rgba(255, 107, 107, 0.25);
}

/* Service Duration */
.service-duration {
	display: inline-block;
	font-size: 0.75rem;
	color: var(--med-text-muted);
	font-weight: 400;
	margin-left: 0.5rem;
	padding-left: 0.5rem;
	border-left: 1px solid var(--med-border);
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
	.service-card-mini.is-popular {
		border-color: #ff8e53;
		box-shadow: 0 12px 30px rgba(255, 107, 107, 0.2);
	}
	
	.service-card-mini.is-popular:hover {
		box-shadow: 0 16px 40px rgba(255, 107, 107, 0.3);
	}
	
	.service-popular-badge {
		box-shadow: 0 4px 15px rgba(255, 107, 107, 0.5);
	}
}