/* colors only used here for now */
:root {
	--new-grey: #6c6b6a;
	--plan-item-hover: #f5f4fa;
	--renew-switch-grey: #d9d9d9;
}

/********** Layout ************/
a {
	text-decoration: none;
}
.upgrade-register-container {
	background-color: white;
	padding: 20px 0;
}
.upgrade-register-container,
.upgrade-register-plans,
.main-title {
	display: flex;
	gap: 20px;
	color: var(--new-grey);
}
.upgrade-register-container,
.main-title {
	flex-direction: column;
}

.upgrade-register-desc .top-plan-data {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.upgrade-register-plans {
	flex-wrap: wrap;
}

.bottom-plan-data {
	display: grid;
	grid-template-rows: repeat(17, minmax(39px, auto));
	padding-top: 14px;
}
.bottom-plan-data > * {
	padding: 0px 20px;
	align-items: center;
}
.plan-item-hover,
.bottom-plan-data > *:hover {
	background-color: var(--plan-item-hover);
}

@media screen and (min-width: 1280px) {
	.upgrade-register-container,
	.upgrade-register-plans,
	.main-title {
		flex-direction: row;
	}
	.upgrade-register-desc,
	.main-title > :first-child {
		width: 420px;
	}
	.upgrade-register-plans {
		min-width: 800;
	}
	.upgrade-register-plans {
		justify-content: space-between;
	}
	.top-plan-data {
		height: 357px;
	}
	.bottom-plan-data {
		grid-template-rows: repeat(17, 39px);
	}

	.upgrade-register-desc .top-plan-data {
		padding-bottom: 20px;
	}
	.upgrade-register-desc .bottom-plan-data {
		border-left: 1px solid var(--purple);
	}

	.upgrade-register-desc .bottom-plan-data > * {
		display: flex;
		justify-content: space-between;
	}
	.renew-tab {
		font-size: 13px;
	}
}

@media screen and (min-width: 1280px) and (max-width: 1366px) {
	.upgrade-register-container,
	.upgrade-register-plans,
	.main-title {
		gap: 10px;
	}

	.upgrade-register-desc,
	.main-title > :first-child {
		width: 380px;
	}
}

/********** Components ***********/

/* Titles */

.main-title h1 {
	font-family: var(--heading-family);
	font-size: 32px;
	font-weight: 600;
	line-height: 38px;
}

.main-title img {
	height: 35px;
	display: block;
}

@media screen and (min-width: 1280px) {
	.main-title {
		height: 93px;
		display: flex;
	}
}

/* Plans */
.plan {
	border: 1px solid var(--grey);
	border-radius: 8px;
	max-width: 400px;
}
.plan * {
	margin: 0;
}
.plan button {
	padding: 10px 20px;
	display: flex;
	gap: 10px;
	justify-content: center;
	width: 148px;
}
.plan button:hover {
	gap: 20px;
	padding: 10px;
}
.plan.neutral-text img {
	filter: grayscale(1);
}
.plan .faux-button {
	height: 38px;
	display: block;
}
.plan .top-plan-data {
	gap: 20px;
	padding: 20px 19px 0;
	display: flex;
	flex-direction: column;
}
.plan .bottom-plan-data > * {
	display: grid;
	grid-template-columns: 2fr 1fr;
}
.name {
	font-size: 20px;
	font-weight: 600;
	color: var(--new-grey);
}
.neutral-text .name,
.neutral-text .price h6 {
	color: var(--medium-grey);
}
.price {
	height: 50px;
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 10px;
}

.price h6 {
	font-size: 32px;
	color: var(--purple);
	font-weight: 400;
	line-height: 38px;
}
.price .vat {
	font-size: 10px;
	width: 100%;
	line-height: 12px;
}
.renew-switch {
	font-weight: 400;
	border-bottom: 3px solid var(--renew-switch-grey);
	cursor: pointer;
}
.renew-switch input {
	display: none;
}
.plan:not(.neutral-text) .renew-switch:has(input:checked) {
	color: var(--purple);
	border-color: var(--purple);
	font-weight: bold;
}
.renew-switch:first-of-type {
	margin-right: -5px;
	padding-right: 5px;
}
.plan-pill {
	border-radius: 8px;
	padding: 4px 10px;
	color: var(--purple);
	background-color: #f5f5fa;
	font-weight: 400;
	font-size: 10px;
	line-height: 135%;
	display: inline;
}
.cta-block {
	padding: 20px;
	display: grid;
	gap: 20px;
}
.cta-block hr {
	margin-bottom: 20px;
}

/* desktop specific styles - fixed heights are used to achieve design on desktop */
@media screen and (min-width: 1280px) {
	/*  */

	.price {
		height: 70px;
	}
	/* Plans */
	.plan {
		width: 200px;
	}
	.plan > * {
		min-width: 160px;
	}
	.plan .bottom-plan-data > * {
		grid-template-columns: 1fr;
	}
}