@use 'mixin' as *;

.rcf7-addons-tab {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 1rem;
}

.rcf7-addon-section {
	&__spacing {
		margin-bottom: 3rem;

		&:last-child {
			margin-bottom: 0;
		}
	}

	&__title {
		font-size: 2rem;
		margin-bottom: 1rem;
		font-weight: 700;
		color: var(--rcf7-text-main);
		letter-spacing: -0.01em;
		line-height: 1.2;
		position: relative;
	}

	&__subtitle {
		font-size: 1rem;
		margin-bottom: 1rem;
	}

	&__divider {
		margin: 2rem 0;
		height: 1px;
		background-color: var(--rcf7-border);
	}
}

// Featured addons
.rcf7-featured-addons-grid {
	@include responsive-grid(1, 1, 2);
	margin-bottom: 2rem;
}

.rcf7-featured {
	border-radius: 5px;
	background: white;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition:
		transform 0.2s ease,
		box-shadow 0.2s ease;

	&:hover {
		transform: translateY(-2px);
		box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
	}

	&__header {
		padding: 1.5rem;
		display: flex;
		align-items: flex-start;
		justify-content: space-between;

		&-meta {
			h3 {
				font-size: 1.375rem;
				font-weight: 700;
				margin: 0 0 0.5rem 0;
				color: var(--rcf7-text-main);
			}

			p {
				font-size: 0.9375rem;
				color: var(--rcf7-text-body);
				margin: 0;
			}
		}
	}

	&__body {
		padding: 0 1.5rem;
		flex-grow: 1;
	}

	&__description {
		font-size: 1rem;
		line-height: 1.5;
		color: var(--rcf7-text-body);
		margin: 0;
		margin-bottom: 1rem;
	}

	&__list {
		margin: 0;
		padding: 0;
		list-style: none;
		margin-bottom: 0.5rem;

		&-item {
			display: flex;
			align-items: center;
			gap: 0.75rem;
			padding: 0.5rem 0;
			margin: 0;

			&::before {
				content: "";
				min-width: 8px;
				height: 8px;
				border-radius: 50%;
				background-color: var(--rcf7-primary);
			}
		}
	}

	&__footer {
		display: flex;
		padding: 1.5rem;
		border-top: 1px solid var(--rcf7-border);
		font-size: 1rem;
	}
}

// All addons
.rcf7-addons {
	@include responsive-grid(1, 2, 2);
}

.rcf7-addon {
	padding: 1rem;
	display: flex;
	flex-direction: row;
	gap: 1rem;

	&__icon {
		margin-top: -3px;
	}

	&__container {
		display: flex;
		flex-direction: column;
		height: 100%;
		flex-grow: 1;
	}

	&__header {
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 1rem;
		gap: 0.5rem;
		justify-content: space-between;

		h3 {
			font-size: 1rem;
			line-height: 1.2;
			font-weight: 600;
			margin: 0;
			color: var(--rcf7-text-main);
		}
	}

	&__description {
		font-size: 0.9375rem;
		color: var(--rcf7-text-body);
		margin: 0;
		line-height: 1.5;
	}

	&__learn-more {
		margin-top: 5px;
	}
}

// Benefits
.rcf7-benefits-grid {
	@include responsive-grid(1, 2, 3);
}

.rcf7-benefit {
	padding: 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;

	&__title {
		font-size: 1.375rem;
		font-weight: 700;
		margin: 0;
		color: var(--rcf7-text-main);
	}

	&__description {
		font-size: 1rem;
		line-height: 1.6;
		color: var(--rcf7-text-body);
		margin: 0;
	}
}

.rcf7-cta {
	text-align: center;
	padding: 3rem 2rem;
	display: flex;
	flex-direction: column;
	align-items: center;

	a {
		font-size: 1rem;
	}

	&__title {
		font-size: 2rem;
		font-weight: 700;
		margin-bottom: 1.5rem;
		color: var(--rcf7-text-main);
		line-height: 1.5;
	}

	&__description {
		font-size: 1.125rem;
		line-height: 1.6;
		color: var(--rcf7-text-body);
		max-width: 760px;
		margin: 0 auto 2rem;
	}
}

@media (max-width: 768px) {
	.rcf7-addon-section-title {
		font-size: 1.5rem;
	}

	.rcf7-featured__header {
		flex-direction: column;
		align-items: flex-start;

		.rcf7-badge {
			align-self: flex-start;
			margin-top: 0.5rem;
		}
	}

	.rcf7-cta {
		padding: 2rem 1rem;

		&__title {
			font-size: 1.75rem;
		}

		&__description {
			font-size: 1rem;
		}
	}
}