@use "../../../../assets/scss/variable/structure";

.masteriyo-group-courses-modal {
	.masteriyo-overlay {
		align-items: center;
	}
}

.masteriyo-group-course-popup {
	border-radius: 8px;
	background: #fff;
	box-shadow: 0 0 25px 0 rgb(10 10 10 / 10%);
	display: flex;
	width: 520px;
	padding: 28px 28px 30px;
	flex-direction: column;
	gap: 32px;
}

.masteriyo-group-course {
	&__wrapper {
		position: relative;
	}

	&__heading {
		color: #222;
		font-size: 24px;
		font-weight: 700;
		line-height: 32px;
		padding-bottom: 16px;
		border-bottom: 1px solid #e5e5e5;
		margin-bottom: 18px;
	}

	&__exit-popup {
		position: absolute;
		top: 0;
		right: 0;
		border-radius: 60px;
		background: #eef1f7;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 7px;
		cursor: pointer;

		svg {
			width: 14px;
			height: 14px;
		}
	}

	&__title {
		color: #646464;
		font-size: 16px;
		font-weight: 400;
		line-height: 26px;
	}

	&__empty-state {
		display: none;

		&--image {
			text-align: center;
			margin-bottom: 32px;

			img {
				width: 260px;
				height: auto;
				object-fit: cover;
			}
		}

		&--content {
			text-align: center;

			&-title {
				color: #383838;
				font-size: 22px;
				font-weight: 700;
				line-height: 29px;
				margin-bottom: 8px;
			}

			&-desc {
				color: #4e4e4e;
				font-size: 14px;
				font-weight: 400;
				line-height: 16px;

				.masteriyo-group-course--link {
					color: var(--masteriyo-color-primary);
					font-style: italic;
					text-decoration: underline;
				}
			}
		}
	}

	&__lists {
		&--label {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 12px;
		}

		&--heading {
			color: #646464;
			font-size: 14px;
			font-weight: 600;
			line-height: 24px;
		}

		&--sync-button {
			color: #7a7a7a;
			font-size: 12px;
			font-weight: 500;
			line-height: 26px;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 6px;
			text-decoration: none;
			margin-top: 14px;
			transition: all 0.3s ease-in-out;

			&:hover {
				text-decoration: underline;
			}

			svg {
				width: 16px;
				height: 16px;
			}
		}

		&--list {
			margin-left: 0;
			margin-bottom: 24px;

			&-item {
				list-style: none;
				display: flex;
				align-items: center;
				position: relative;
				margin-bottom: 10px;

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

				input[type='checkbox'] {
					position: absolute;
					z-index: 1;
					left: 12px;
					width: 18px;
					height: 18px;
				}

				&_label {
					width: 100%;
					border-radius: 4px;
					background: #f0f0f0;
					padding: 12px;
					padding-left: 40px;
					display: flex;
					align-items: center;
					gap: 8px;
					cursor: pointer;
					color: #646464;
					font-size: 14px;
					font-weight: 500;
					line-height: 22px;

					&_disabled {
						color: #a7a7a7;
					}
				}

				&_members {
					position: absolute;
					right: 12px;
					top: 50%;
					transform: translateY(-50%);
					display: flex;
					align-items: center;
					gap: 4px;
					color: #7a7a7a;
					font-size: 14px;
					font-weight: 500;
					line-height: 22px;

					svg {
						width: 20px;
						height: 20px;
					}
				}

				&_disabled {
					cursor: none;
					pointer-events: none;
				}

				input[type='checkbox']:checked
					~ .masteriyo-group-course__lists--list-item_label {
					background: #f3f7fd;
				}
			}
		}

		.masteriyo-error-message {
			color: #ff343e;
			background-color: #fdd;
			padding: 10px;
			border: 1px solid #ff343e;
			border-radius: 4px;
			margin-bottom: 25px;
			font-size: 14px;
		}

		&--footer {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			gap: 14px;

			&_link {
				color: #646464;
				font-size: 14px;
				font-weight: 400;
				line-height: 22px;
				text-decoration-line: underline;
				transition: all 0.3s ease-in-out;

				&:hover {
					color: #222;
				}
			}

			&_checkout-button {
				display: flex;
				padding: 10px 16px 10px 12px;
				justify-content: center;
				align-items: center;
				gap: 8px;
				border-radius: 4px;
				background: var(--masteriyo-color-primary);
				color: #fff;
				font-size: 14px;
				font-weight: 400;
				line-height: 22px;
				text-decoration: none;
				transition: all 0.3s ease-in-out;

				&:hover {
					color: #fff;
					background: #1b4aab;
				}

				&:focus {
					color: #fff;
				}

				svg {
					width: 20px;
					height: 20px;

					path {
						stroke: #fff;
					}
				}

				&--disabled {
					background: #e2e2e2;
					color: #a7a7a7;
					pointer-events: none;
					cursor: not-allowed;

					svg {
						path {
							stroke: #a7a7a7;
						}
					}
				}
			}
		}
	}

	&__group {
		&-button {
			width: 100%;
			border-radius: 4px;
			display: flex;
			flex-direction: column;
			gap: 10px;
			align-items: center;

			// Remove bottom margin from last child element
			> *:last-child {
				margin-bottom: 0;
			}

			.masteriyo-group-course__buy-now-button {
				gap: 6px;
			}
		}

		&-title {
			color: #4e4e4e;
			font-size: 16px;
			font-weight: 500;
			line-height: 34px;
			margin-top: 0;
			margin-bottom: 8px;
			display: flex;
			align-items: center;
			gap: 8px;
			flex-direction: column;
			border-bottom: 1px solid #e1e1e1;

			.title-line {
				flex: 1 0 0;

				&::after {
					content: '';
					width: 100%;
					height: 1px;
					background: #ddd;
					display: block;
				}
			}
		}

		&-desc {
			color: #646464;
			font-size: 14px;
			font-style: italic;
			font-weight: 400;
			line-height: 24px;
			margin-top: 0;
			margin-bottom: 16px;

			&:empty {
				display: none;
			}
		}
	}

	&__seperator {
		font-size: 14px;
		line-height: 24px;
		font-weight: 500;
		color: #7a7a7a;
		display: flex;
		align-items: center;
		gap: 16px;
		width: 100%;
		margin-bottom: 6px;

		&::before,
		&::after {
			content: '';
			background: var(--masteriyo-color-border);
			width: 100%;
			height: 1px;
			display: block;
		}
	}

	&__helper-text {
		color: #51585f;

		// font-size: 0.9375em;
		font-size: 15px;
		font-weight: 400;
		line-height: 25px;
		margin-top: 0;
		margin-bottom: 0;
		text-align: center;
	}

	&__checkout {
		&-title {
			color: #07092f;
			font-size: 26px;
			line-height: 34px;
			font-weight: 500;
			margin-top: 0;
			margin-bottom: 28px;
		}

		&-table {
			border-radius: 5px;
			background: #f9f9f9;
			padding: 20px;

			table {
				width: 100%;
				border-collapse: collapse;
				border: 0;
				margin-bottom: 0;

				tr {
					th {
						color: #383838;
						font-size: 14px;
						font-weight: 600;
						line-height: 18px;
						padding: 0 6px 16px;
						border: 0;
						border-bottom: 1px solid #e1e1e1;
						width: 90%;
						text-align: left;
					}

					td {
						color: #4e4e4e;
						font-size: 14px;
						font-weight: 500;
						line-height: 18px;
						padding: 16px 6px 0;
						border: 0;
					}
				}
			}
		}
	}
}

.masteriyo-checkout {
	&-summary {
		// The badge is a qualifier of the course name, not a second label: it
		// sits on its own line under the name at the row's type scale, so the
		// name stays the row's primary element.
		&-order-details {
			li {
				.masteriyo-badge {
					display: table;
					margin: structure.$spacing_4px 0 0;
					padding: 2px 8px;
					font-size: 12px;
					font-weight: 500;
					line-height: 1.4;
					letter-spacing: 0;
					white-space: nowrap;
					border-radius: 4px;
					color: var(--masteriyo-color-white);
					background-color: #26c164;
				}
			}
		}
	}
}

.masteriyo-single-body__aside--price {
	.masteriyo-group-course__group-button {
		margin-top: 0;
	}
}

// Multi-Tier Group Pricing Styles
.masteriyo-group-pricing-tiers {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 20px;

	.masteriyo-group-pricing-tier {
		// border: 2px solid #E0E2EB;
		border: 1px solid var(--masteriyo-color-border);
		border-radius: 6px;
		padding: 18px 20px;
		cursor: pointer;
		transition: all 0.2s ease;
		position: relative;

		&:hover {
			border-color: #cbd5e0;
		}

		&.selected {
			border-color: var(--masteriyo-color-primary);
			background: #f9f9f9;
		}

		.masteriyo-group-tier {
			&-radio {
				display: none;
				position: absolute;
				top: 23px;
				left: 20px;
				width: 18px;
				height: 18px;
				border: 2px solid #cbd5e0;
				border-radius: 50%;
				background-color: white;
				flex-shrink: 0;
				transition: all 0.2s ease;

				.masteriyo-group-pricing-tier.selected & {
					border-color: var(--masteriyo-color-primary);
					background: var(--masteriyo-color-primary);

					&::after {
						content: '';
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%);
						width: 6px;
						height: 6px;
						background: #fff;
						border-radius: 50%;
					}
				}
			}

			&-header {
				display: flex;
				align-items: flex-start;
				gap: 4px;
			}

			&-info {
				flex: 1;
			}

			&-name {
				font-size: 16px;
				font-weight: 600;
				color: #2d3748;
			}

			&-price {
				display: flex;
				align-items: flex-end;
				flex-direction: column;

				&-regular {
					.amount {
						font-size: 14px;
						line-height: 22px;
						color: #979797;

						// text-decoration: line-through;
						font-weight: 500;
						padding: 0 6px;
						position: relative;

						&::after {
							content: '';
							position: absolute;
							background: #e50044;
							width: 100%;
							height: 1px;
							top: 40%;
							left: 50%;
							transform: rotate(-5deg) translate(-50%, -50%);
						}
					}
				}

				&-current {
					display: flex;
					align-items: baseline;
					gap: 2px;

					.amount {
						font-size: 18px;
						line-height: 26px;
						font-weight: 600;
						color: #383838;
					}

					.billing_interval {
						font-size: 13px;
						line-height: 20px;
						font-weight: 400;
						font-style: italic;
						color: #545454;
					}
				}
			}

			&-seats-info {
				padding-left: 0;
				display: flex;
				align-items: flex-start;
				gap: 6px;
				font-size: 13px;
				color: #9e9e9e;

				svg {
					width: 18px;
					height: 18px;
					fill: #9e9e9e;
					margin-top: 5px;
				}

				span {
					flex: 1;
				}
			}

			&-seat-selector {
				margin-top: 16px;
				padding-top: 16px;
				border-top: 1px solid var(--masteriyo-color-border);

				.masteriyo-group-tier-seats-input-wrapper {
					display: flex;
					align-items: center;
					gap: 12px;
					margin-bottom: 8px;
				}
			}

			&-seats-label {
				display: block;
				font-size: 14px;
				font-weight: 500;
				color: #383838;
				margin-bottom: 0;
			}

			&-seats-input {
				min-height: 38px;
				border-color: #e1e1e1;
				color: #383838;
				padding: 0 12px;
				width: 100%;
				flex: 1;
				border-radius: 4px;
				font-size: 14px;
				line-height: 24px;
				transition: all 0.2s ease;

				&::placeholder {
					color: #737373;
				}

				&:focus {
					outline: none;
					box-shadow: none;
					border-color: var(--masteriyo-color-primary);
				}
			}

			&-seats-hint {
				margin-top: 12px;

				.tier-breakdown {
					font-size: 14px;
					line-height: 20px;
					color: #9e9e9e;
					margin-bottom: 4px;
				}

				.tier-total {
					display: flex;
					align-items: center;
					gap: 4px;
					font-weight: 600;
					color: #2d3748;
					font-size: 15px;
					line-height: 25px;
					margin-top: 16px;
					padding-top: 12px;
					border-top: 1px solid var(--masteriyo-color-border);

					&-label {
						// color: #383838;
						font-size: 14px;
						line-height: 20px;
						font-weight: 400;
						color: #9e9e9e;
					}
				}
			}
		}
	}
}

.masteriyo-group-tier-price-interval {
	font-size: 13px;
	font-weight: 400;
	color: #718096;
}

.masteriyo-group-tier-description {
	font-size: 14px;
	color: #718096;
	line-height: 1.5;
	margin-bottom: 6px;
}

// .masteriyo-group-tier-buy-button {
// 	width: 100%;
// 	padding: 14px 24px;
// 	background-color: #4584ff;
// 	color: white;
// 	border: none;
// 	border-radius: 6px;
// 	font-size: 15px;
// 	font-weight: 600;
// 	cursor: pointer;
// 	transition: all 0.2s ease;
// 	margin-top: 16px;

// 	&:hover:not(:disabled) {
// 		background-color: #3b75e6;
// 	}

// 	&:disabled {
// 		opacity: 0.5;
// 		cursor: not-allowed;
// 	}
// }