@use "@automattic/jetpack-base-styles/style";

.jp-components__pricing-card {
	width: -moz-fit-content;
	width: fit-content;
	max-width: 384px;
	padding: 24px 24px 32px;
	background: var(--jp-white);
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
	border-radius: var(--jp-border-radius);

	@media screen and ( min-width: 600px ) {
		padding: 32px 32px 44px;
	}

	&__icon {

		img {
			height: 32px;
			width: 32px;
		}
	}

	&__title {
		margin: 16px 0 24px;
		color: #101517;
		font-size: 32px;
		line-height: 38px;
	}

	&__pricing {
		display: flex;
		flex-wrap: wrap;
	}

	&__price-before,
	&__price-after {
		display: inline-block;
		margin-bottom: 8px;
		padding: 0 2px;
		font-size: 54px;
		font-weight: 700;
		line-height: 40px;
	}

	&__price-before {
		position: relative;
		margin-right: 16px;
		color: var(--jp-gray-20);
	}

	&__price-strikethrough {
		position: absolute;
		width: 100%;
		height: 3px;
		left: 0;
		top: 20px;
		background: var(--jp-pink);
		border-radius: 1.5px;
	}

	&__price-after {
		color: var(--jp-black);
	}

	&__currency {
		vertical-align: super;
		font-size: var(--font-title-small);
		font-weight: 400;
		line-height: 20px;
	}

	&__price-details {
		align-self: flex-end;
		margin-bottom: 8px;
		font-size: 14px;
		font-weight: 400;
		line-height: 17px;
		color: var(--jp-gray-50);
		letter-spacing: -0.02em;
	}

	&__price-decimal {
		font-size: var(--font-label);
		line-height: 14px;
		vertical-align: top;
	}

	&__button {
		width: 100%;
		height: auto;
		font-size: 18px;
		background: var(--jp-black);
		color: var(--jp-white) !important;
		border-radius: var(--jp-border-radius);
		padding: 14px 24px;
		margin: 24px 0 32px;
		justify-content: center;
		align-items: center;
	}

	&__info,
	&__tos {
		font-size: var(--font-label);
		line-height: 20px;
		letter-spacing: -0.02em;
		color: var(--jp-gray-60);
	}

	&__tos {
		margin-top: 24px;
	}
}
