@import "@automattic/typography/styles/woo-commerce";
@import "@wordpress/base-styles/breakpoints";

body.is-section-plans.is-expired-ecommerce-trial-plan {
	&.color-scheme {
		--color-surface-backdrop: var(--color-surface);
	}

	.layout__content {
		padding-left: 0 !important;
	}

	.main.is-wide-layout {
		@media (max-width: $break-medium) {
			padding-left: 1.25rem;
			padding-right: 1.25rem;
		}
	}

	.ecommerce-trial-expired__content {
		text-align: center;

		@media (max-width: $break-medium) {
			padding-top: 2.5rem;
		}

		.ecommerce-trial-expired__title {
			font-size: $woo-font-title-medium;

			@media (min-width: $break-medium) {
				font-size: $woo-font-title-large;
			}
		}

		.ecommerce-trial-expired__subtitle {
			margin: 16px auto 0;

			@media (min-width: $break-medium) {
				max-width: 580px;
			}
		}

		.ecommerce-trial-expired__manage-purchases {
			font-size: $woo-font-body-extra-small;
			margin-top: 16px;
		}
	}

	.ecommerce-trial-expired__spinner {
		width: 100%;
		height: 64px;
		margin: 64px auto;
	}

	.ecommerce-trial-expired__footer {
		border-top: 1px solid var(--color-border-subtle);
		display: flex;
		flex-direction: column;
		gap: 2em;
		justify-content: center;
		margin: auto;
		max-width: 800px;
		padding: 1.5em;

		@media (min-width: $break-small) {
			flex-direction: row;
		}
	}
}
