/* WPJobster Subscriptions page SASS file */

.subscriptions-page {
	h1 {
		font-size: 44px;

		@include tablet {
			font-size: 36px;
		}
	}
}

/* Subscription pc page */
.subscription-pc-wrapper {
	display: block;

	@include mobile {
		display: none;
	}
}

.subscription-eligible {
	color: $mainColor;
	font-style: italic;
}
.subscription-not-eligible {
	color: #9f3a38;
	font-style: italic;
}

.comparison-table {
	border: 0;
	width: 100%;
	border-spacing: 0;
	border-collapse: separate;

	thead {
		th {
			padding: 20px 10px;

			@include tablet() {
				font-size: 20px;
				padding: 15px 10px;
			}

			&:first-child {
				padding-left: 0;
				padding-right: 0;
				text-align: left;
				vertical-align: middle;
			}

			&:not(:first-child) {
				border-top: 1px solid $borderColor;
				border-left: 1px solid $borderColor;
				text-align: center;

				&:nth-child(odd) {
					background-color: $grayBackground;
				}
			}
			&:last-child {
				border-right: 1px solid $borderColor;
				border-top-right-radius: 6px;
			}

			&:nth-child(2) {
				border-top-left-radius: 6px;
			}
		}
	}

	tbody {
		tr {
			td {
				border: 0;
				border-left: 1px solid $borderColor;
				border-top: 1px solid $borderColor;
				padding: 13px 30px;
				font-size: 16px;
				font-weight: 600;
				color: $mainTextColor;
				text-align: center;

				i.checkmark.icon {
					font-size: 20px;
					color: $mainColor;
				}

				@include medium-desktop() {
					font-size: 13px;
					padding: 10px 20px;
				}

				&:last-child {
					border-right: 1px solid $borderColor;
				}

				&:not(:first-child) {
					&:nth-child(odd) {
						background-color: $grayBackground;
					}
				}

				&:first-child {
					background-color: $grayBackground3;
					text-align: left;
				}
			}
			&:first-child {
				td:first-child {
					border-top-left-radius: 6px;
				}
				td:last-child {
					border-top-right-radius: 6px;
				}
			}

			&:last-child {
				td {
					border-bottom: 1px solid $borderColor;

					&:first-child {
						border-bottom-left-radius: 6px;
					}

					&:last-child {
						border-bottom-right-radius: 6px;
					}
				}
			}
		}
	}
}

.comparison-table-header-main {
	font-size: 30px;
	color: $mainColor;
	font-weight: 600;

	@include medium-desktop {
		font-size: 24px;
	}
}

.subscription-table {
	.subscr-name {
		text-transform: uppercase;
		font-weight: 700;
		color: $headlinesColor;
		font-size: 26px;
		line-height: 130%;

		@include medium-desktop() {
			font-size: 20px;
		}
	}

	.subscr-price {
		color: $mainColor;
		font-size: 20px;
		font-weight: 700;
		line-height: 130%;

		@include medium-desktop() {
			font-size: 16px;
		}
	}

	tbody {
		tr {
			&:last-child {
				td {
					&:first-child {
						border-radius: 0;
					}

					&:last-child {
						border-radius: 0;
					}
				}
			}
		}
	}

	.billing-period-row {
		text-align: left;
		.ui.checkbox {
			label {
				color: $headlinesColor3;
			}
		}
	}
}

/* Subscription mobile page */
.subscription-mobile-wrapper {
	display: none;

	@include mobile {
		display: block;
	}
}

.mobile-subscription-packages {
	.ui.table td.text-center {
		text-align: center !important;
	}

	.ui.secondary.pointing.menu .active.item {
		border-bottom-width: 5px;
	}
	.ui.pointing.secondary.packages-tabs.menu {
		margin-bottom: 0;
	}

	.packages-mobile {
		overflow: auto;
		margin-top: 0;
	}
	.subscr-pck-include-title {
		font-weight: 700;
		font-size: 18px;
		margin-top: 15px;
	}
	.subscr-pck-include .ui.table tr td:first-child {
		background-color: #f9fafb;
	}

	span.pck-tab-title {
		font-weight: 700;
		color: $headlinesColor3;
		width: 100%;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: 16px;

		@include mobile {
			font-size: inherit;
		}
	}

	.subscr-billing-period {
		margin-top: 15px;
		padding: 10px;
		background-color: #f9fafb;

		.ui.checkbox {
			margin-bottom: 5px;
			width: 100%;

			.ui.right.tag.label {
				margin-top: -4px;
			}
		}
	}
}

.subscription-tabs .subscription-table {
	margin-top: 0;
}

/* Subscription info */
.two-column-table {
	.column {
		color: $mainTextColor;

		.checkmark.icon {
			color: $mainColor;
		}

		.column.subscr-features-list {
			padding-top: 5px;
			padding-bottom: 5px;
		}
	}

	.heading {
		font-weight: 600;
		color: $headlinesColor;
	}
}

.cancel-subscription-button,
.ui.button.cancel-subscription-button {
	@include mobile {
		display: block;
	}
}

/* Payment buttons */
.subscription-content {
	.payment-buttons-bar-wrapper {
		border-left: 1px solid $borderColor;
		border-right: 1px solid $borderColor;
		border-bottom: 1px solid $borderColor;
		border-bottom-right-radius: 6px;
		border-bottom-left-radius: 6px;
	}
}

/* Responsive */
@media only screen and (max-width:320px) {
	.mobile-subscription-packages span.pck-tab-title {
		font-size: 12px;
	}
}