$color_1: #475bb2;
$color_2: white;
$color_3: red;
$color_4: #545050;
$background-color_1: #e8e8e8;
$border-top-color_1: #ffffff;
$infoColor: #17A2B8;
$grey-400: #383838;
$grey-0: #ffffff;

html {
	scroll-behavior: smooth;
}

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

// Membership Addon Frontend CSS
.user-registration-page, .ur-multi-device-form-preview, #pg-container {
	.ur-membership-list-container {
		max-width: 100% !important;
		display: flex;
		flex-direction: column;
		gap: 40px;

		.membership-list-notice-div {
			.membership-title {
				padding-top: 0;
				margin-bottom: 16px;
				color: #222222;
			}

			.subscription-message {
				padding: 14px 24px;
				border-left: 3px solid $infoColor;
				background: #f4fcfd;

				p {
					margin: 0;
					color: $infoColor;
					font-size: 15px;
					font-weight: 400;
					line-height: 25px;
				}
			}
		}

		.ur-membership-container {
			display: grid;
			grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
			gap: 20px;
			margin: 0;
			justify-items: center !important; /* horizontally center items */
			align-items: center !important;

			.membership-block {
				display: flex;
				flex-direction: column;
				padding: 24px 20px;
				gap: 12px;
				background: #F9F9F9;
				border-radius: 8px;
				text-align: center;
				transition: all .3s;

				&:hover {
					background: $color_2;
					box-shadow: 0px 6px 18px 0px rgba(10, 10, 10, 0.06);
				}

				.membership {
					&-title {
						color: #383838;
						font-size: 24px;
						font-weight: 600;
						line-height: 36px;
						padding-top: 0;
					}

					&-body {
						padding: 0;
					}

					&-description {
						color: #6B6B6B;
						text-align: center;
						font-size: 15px;
						font-weight: 400;
						line-height: 25px;
					}

					&-footer {
						padding: 0;
						gap: 12px;

						.membership-amount {
							line-height: 34px;
						}

						.membership-signup-button {
							padding: 10px 12px;
							border-radius: 4px;
							border: 1px solid $color_1;
							background: $color_1;
							color: $color_2;
							font-size: 15px;
							font-weight: 500;
							line-height: 25px;
							cursor: pointer;
							transition: all .3s;

							&:hover {
								background: #38488e;
							}
						}
					}
				}
			}
		}
	}

	// Registration Form CSS
	.ur_membership_registration_container {
		margin: 0 auto;
		border-radius: 10px;

		.ur_membership_title {
			color: #222222;
			font-size: 22px;
			font-weight: 700;
			line-height: 32px;
			margin: 0;
		}

		.ur_membership_divider {
			margin: 16px 0 24px;
			background-color: #E1E1E1;
			border: 0;
			height: 1px;
		}

		.ur_membership_frontend_input_container {
			display: flex;
			flex-direction: column;
			margin-bottom: 12px;
			gap: 5px;

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

			.ur_membership_input_label {
				display: flex;
				align-items: center;
				color: #383838;
				font-size: 14px;
				font-weight: 700;
				line-height: 25px;
				margin-bottom: 0;
				margin-top: 0;
			}

			.ur_membership_input_class {
				&:not(.ur_membership_radio_input, .pg-list) {
					height: 38px;
					padding: 0 14px;
					border-radius: 4px;
					border: 1px solid #E9E9E9;
					background: $color_2;
					color: #383838;
					margin-bottom: 0;

					&::placeholder {
						color: #b5b5b5;
					}

					&:focus {
						border-color: $color_1;
					}
				}
			}

			.notice {
				&_red,
				&_blue {
					&:empty {
						padding: 0;
					}

					padding: 10px 12px;
					font-size: 14px;
					line-height: 22px;
				}

				&_red {
					background: #fdd9d9;
					border-left: 3px solid #dc3545;
					word-wrap: break-word;
				}

				&_blue {
					border-left: 3px solid #007bff;
					background: #e2e2fd;
					word-wrap: break-word;
				}
			}
		}
	}

	// Thankyou Page CSS
	.thank-you-page-container {
		display: flex;
		flex-direction: column;
		margin: 32px auto;
		padding: 40px;
		border-radius: 12px;
		background: var(--Grey-grey-0, #FFF);
		box-shadow: 0px 6px 25px 0px rgba(10, 10, 10, 0.08);
		gap: 20px;

		.message-section {
			display: block;
			p {
				margin-bottom: 0;
				margin-top: 0;
			}

			.header-section {
				text-align: center;
				font-weight: 600;
				font-size: 20px;
				margin-bottom: 30px;
				padding-right: 40px;
				padding-left: 40px;
				line-height: 30px;
			}
		}

		> p {
			margin-bottom: 0;
		}

		.thank-you-notice {
			padding: 1em;
			font-size: small;
			font-style: italic;

			&.info {
				background-color: #f7fbff;
				border: 1px solid #475bb2;
				padding: 12px 16px;
				border-radius: 4px;
				font-size: 14px;
				line-height: 150%;
				display: flex;
				flex-direction: row;
				gap: 12px;
				align-items: start;

				svg {
					flex: 0 0 5%;
				}
			}
		}

		.footer-section {
			margin-bottom: 20px;
		}
	}
}


.membership-body {
	padding: 20px;
	max-height: 130px;
}

.membership-footer {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 20px;
}

.membership-amount {
	color: $color_1;
	font-weight: bold;
	font-size: x-large;
}

.membership-signup-button {
	width: 200px;
	cursor: pointer;
	font-size: 14px;
	background: #475bb2;
	color: $color_2;
	padding: 10px 0;
	border-radius: 5px;
	border: none;
}

.membership-title {
	font-weight: bold;
	font-size: x-large;
	padding: 20px 0 0 0;
}

.ur-membership-duration {
	font-weight: normal;
	color: $color_4;
	display: inline-block;
	vertical-align: middle;
	margin-top: 2px;
}

.membership-primary-btn {
	position: relative;
	width: max-content;
	cursor: pointer;
	font-size: 14px;
	background: $color_1;
	color: $color_2;
	padding: 10px 0;
	border-radius: 4px;
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 8px 16px;
	font-size: 15px;
	font-weight: 500;
	line-height: 25px;
	transition: all .3s;

	&:hover {
		color: $color_2;
		background: #38488e;
	}

	&:disabled {
		background: #818286;
		color: $color_2;
		cursor: not-allowed;
	}
}

.urm-spinner {
	display: inline-block;
	width: 10px;
	height: 10px;
	border: 3px solid rgba(0, 0, 0, 0.14);
	border-radius: 50%;
	border-top-color: $border-top-color_1;
	animation: spin 1s cubic-bezier(0.65, 0.05, 0.36, 1) infinite;
}

.user-registration-membership-content {
	.urm-spinner {
		width: 15px;
		height: 15px;
		border-radius: 50%;
		margin-left: 5px;
	}

	span.urm-help-tip::before {
		content: "";
		background-image: url(../../../images/settings-icons/information.svg) !important;
		background-repeat: no-repeat !important;
		background-size: 100% !important;
		display: block;
		width: 12px;
		height: 12px;
		cursor: pointer;
		padding: 4px;
		background: 0 0;
		border-radius: 3px;
		transform: rotate(26deg);
	}
}

.notice-container {
	.notice {
		&_red,
		&_blue {
			&:empty {
				padding: 0;
			}

			padding: 10px 12px;
			font-size: 14px;
			line-height: 22px;
		}

		&_red {
			background: #fdd9d9;
			border-left: 3px solid #dc3545;
			word-wrap: break-word;
		}

		&_red::before {
			content: "\f534";
		}

		&_blue {
			border-left: 3px solid #007bff;
			background: #e2e2fd;
			word-wrap: break-word;
		}
	}


	position: fixed;
	top: 50px;
	right: -700px;
	z-index: 9999;;
	transition: right 0.5s ease;
}

.close_notice {
	color: $color_3;
	cursor: pointer;
	font-weight: bold;
}

.notice-container.active {
	right: 20px;
}

.urm-d-none {
	display: none !important;
}

#ur-payment-gateway-body {
	display: flex;
	flex-direction: column;

	input {
		cursor: pointer;
	}
}

label {
	cursor: pointer;
}

.message-section {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

.coupon-input-area {
	display: flex;
	justify-content: space-between;
	gap: 20px;

	.input_with_clear_btn {
		display: flex;
		position: relative;
		justify-content: center;
		align-items: center;
		width: 100%;

		input {
			width: 100%;
			padding: 10px 30px 10px 10px
		}
	}

	button {
		width: 50%;
	}

	span {
		position: absolute;
		right: 10px;
		cursor: pointer;
		font-weight: 600;
	}
}

#total-input-notice {
	font-style: italic;
	font-size: x-small;
}

.stripe-input-container {
	border: 1px solid #e9e9e9;
}

.stripe-card-indicator {
	background: #475bb2;
	color: #fff;
	border-radius: 4px 4px 0 0;
	border: none;
	padding: 8px 16px;
	font-size: 15px;
	font-weight: 500;
}

.user-registration-upgrade-membership-swal2-container {

	&.swal2-modal {
		padding: 0px !important;
		font-size: large;

		.swal2-header {
			padding: 20px;
			align-items: baseline;

			h2 {
				border-bottom: 1px solid #D3D3D3;
				padding-bottom: 16px;
				width: 100%;
				text-align: left;
				margin-bottom: 0;
				color: #3d3d3d;
				font-size: 20px;
				font-weight: 600;
				line-height: 24px;
				font-family: inherit;
			}
		}

		.swal2-content {
			text-align: left;
			color: $grey-400;
			font-size: 14px;
			font-weight: 400;
			line-height: 24px;

			.ur_membership_registration_container {
				margin: 0;
			}
		}

		.swal2-actions {
			display: flex;
			flex-direction: row-reverse;
			justify-content: end;
			padding: 18px 20px;
			gap: 10px;
			margin-top: 20px;
			border-radius: 0 0 5px 5px;

			button {
				width: 40%;
				color: $grey-400;
				font-size: 14px;
				font-weight: 400;
				line-height: 24px;
				margin: 0;
				padding: 6px 12px;
				box-shadow: 0 1px 2px 0 #00000029;

				&:focus {
					border: 0;
					outline: none;
					box-shadow: none;
				}

				&.swal2-confirm {
					color: $grey-0;
					display: flex !important;
					align-items: center;
					gap: 5px;
					justify-content: center;
				}

				&.swal2-cancel {
					color: $grey-400;
					background: $grey-0 !important;
				}
			}
		}

		.swal2-actions.swal2-loading {
			display: flex;
			justify-content: center;
			margin-top: 0;
		}
	}
}

#pg-container {
	display: none;
}

.membership-upgrade-container {
	display: flex;
	gap: 20px;
	flex-direction: column;

	.ur-upgrade-label {
		font-weight: 700;
	}

	.StripeElement {
		padding: 4px 8px;
		border: 1px solid #e1e1e1;

		.__PrivateStripeElement {
			width: 100%;
			padding: 4px 8px;
			border-radius: 0;
			min-height: 36px;
			margin-bottom: 10px;
			line-height: 1.5;

			iframe {
				position: absolute;
				top: 50%;
			}
		}
	}

	.authorize-net-container {
		width: 90%;
		.ur-error {
		color: #d63638;
		}
		.user-registration-one-half {
			float: left;
			width: 49%;
			margin-right: 2%;
		}

		.user-registration-one-half:nth-child(2) {
			margin-right: 0;
		}
		.user-registration-membership_page_user-registration-frontend-list .shortcode .widefat {
			width: calc(100% - 40px);
		}
		.clearfix::before,
		.clearfix::after {
			content: ' ';
			display: table;
		}
		.clearfix::after {
			clear: both;
		}
		.user-registration-sub-label {
			font-size: 10px;
			font-weight: 400;
			margin-bottom: 0;
			color: #494d50;
			margin-top: -10px;
		}
		abbr.required {
			color: red;
		}
		abbr[title] {
			text-decoration: none;
		}
		.ur-field-row input, .ur-field-row select {
			width: 100%;
			padding: 4px 8px;
			line-height: 1.5;
		}
	}
}

.upgrade-plan-container {

	#upgradable-plans {
		display: flex;
		flex-direction: column;
		gap: 5px;
		text-align: left;

		.upgrade-membership-label {
			display: flex;
			gap: 5px;
			align-items: center;
		}
	}
}
