/**
 * PowerFlow Wash — card, badge, and component-level styling.
 * Mirrors ServiceCard / PricingCard / StatCard / BeforeAfter from the
 * design system component library.
 */

.powerflow-card {
	background: var(--wp--preset--color--gray-0, #fff);
	border: 1px solid var(--wp--preset--color--gray-200, #d5dee8);
	border-radius: var(--wp--custom--radius--lg, 16px);
	padding: var(--wp--preset--spacing--50, 1.5rem);
	box-shadow: 0 1px 3px rgba(10, 35, 66, 0.08), 0 1px 2px rgba(10, 35, 66, 0.06);
	transition: transform var(--pf-dur-base) var(--pf-ease-flow), box-shadow var(--pf-dur-base) var(--pf-ease-flow);
}

.powerflow-card:hover {
	transform: translateY(var(--pf-hover-lift));
	box-shadow: 0 12px 28px rgba(10, 35, 66, 0.14), 0 4px 10px rgba(10, 35, 66, 0.07);
}

.powerflow-card--featured {
	border-color: var(--wp--preset--color--brand, #0b6be3);
	background: linear-gradient(120deg, #0a2a57 0%, #0b6be3 55%, #16c7dc 100%);
	color: #fff;
}

.powerflow-card--featured * {
	color: #fff;
}

.powerflow-icon-tile {
	width: 52px;
	height: 52px;
	border-radius: var(--wp--custom--radius--md, 12px);
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(100deg, #0b6be3 0%, #16c7dc 100%);
	margin-bottom: var(--wp--preset--spacing--40, 1rem);
}

.powerflow-icon-tile svg {
	width: 26px;
	height: 26px;
	stroke: #fff;
}

.powerflow-icon-tile--ghost {
	background: var(--wp--preset--color--brand-subtle, #eaf3ff);
}

.powerflow-icon-tile--ghost svg {
	stroke: var(--wp--preset--color--brand, #0b6be3);
}

.powerflow-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.3rem 0.85rem;
	border-radius: var(--wp--custom--radius--pill, 999px);
	font-size: var(--wp--preset--font-size--2xs, 0.6875rem);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	background: var(--wp--preset--color--brand-subtle, #eaf3ff);
	color: var(--wp--preset--color--brand, #0b6be3);
}

.powerflow-badge--accent {
	background: var(--wp--preset--color--accent, #16c7dc);
	color: #07182b;
}

.powerflow-price {
	font-family: var(--wp--preset--font-family--mono);
	font-weight: 700;
}

.powerflow-price--lg {
	font-size: var(--wp--preset--font-size--4xl, 3rem);
}

.powerflow-stat {
	font-family: var(--wp--preset--font-family--mono);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--3xl, 2.25rem);
	color: var(--wp--preset--color--brand, #0b6be3);
}

.powerflow-checklist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.powerflow-checklist li {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
}

.powerflow-checklist svg {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	stroke: var(--wp--preset--color--success, #1fa463);
	margin-top: 0.15rem;
}

/* Before / after reveal slider */
.powerflow-before-after {
	position: relative;
	border-radius: var(--wp--custom--radius--lg, 16px);
	overflow: hidden;
	aspect-ratio: 4 / 3;
}

.powerflow-before-after__tag {
	position: absolute;
	top: 1rem;
	padding: 0.3rem 0.85rem;
	border-radius: var(--wp--custom--radius--pill, 999px);
	background: rgba(7, 24, 43, 0.6);
	backdrop-filter: blur(8px);
	color: #fff;
	font-size: var(--wp--preset--font-size--xs, 0.75rem);
	font-weight: 600;
	z-index: 2;
}

.powerflow-before-after__tag--before {
	left: 1rem;
}

.powerflow-before-after__tag--after {
	right: 1rem;
}

/* Floating decorative droplets (purely decorative, aria-hidden in markup) */
.powerflow-floating-droplet {
	position: absolute;
	border-radius: 50%;
	background: var(--wp--preset--gradient--shine);
	opacity: 0.7;
	animation: powerflow-float 4.5s var(--pf-ease-flow) infinite alternate;
}

@keyframes powerflow-float {
	from {
		transform: translateY(0);
	}
	to {
		transform: translateY(var(--pf-float-amplitude));
	}
}

@media (prefers-reduced-motion: reduce) {
	.powerflow-floating-droplet {
		animation: none;
	}
}