.wppo-feature-card {
	background: var(--wppo-bg-card);
	border: 1px solid var(--wppo-border);
	border-radius: var(--wppo-radius);
	box-shadow: var(--wppo-shadow-sm);
	transition: box-shadow 0.2s ease, border-color 0.2s ease;
	overflow: hidden;
	height: 100%;
	display: flex;
	flex-direction: column;

	&:hover {
		box-shadow: var(--wppo-shadow);
		border-color: var(--wppo-border-hover);
	}

	&__header {
		padding: 20px 24px;
		border-bottom: 1px solid var(--wppo-border);
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: var(--wppo-bg-card-surface, #fafbfc);

		h3 {
			margin: 0;
			font-size: 14px;
			font-weight: 700;
			color: var(--wppo-text-main);
			display: flex;
			align-items: center;
			gap: 10px;
			letter-spacing: -0.01em;

			svg {
				color: var(--wppo-primary);
				font-size: 15px;
			}
		}
	}

	&__body {
		padding: 24px;
		flex-grow: 1;

		@include respond-to('sm') {
			padding: 20px;
		}
	}

	&__footer {
		padding: 16px 24px;
		background: var(--wppo-bg-card-surface, #fafbfc);
		border-top: 1px solid var(--wppo-border);
		display: flex;
		justify-content: flex-end;
		gap: 10px;
		flex-wrap: wrap;

		@include respond-to('sm') {
			flex-direction: column;

			.wppo-button {
				width: 100%;
				justify-content: center;
			}
		}
	}

	&__header-actions {
		display: flex;
		gap: 8px;
	}
}