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

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 {
	.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;
			&:last-child {
				margin-bottom: 0;
			}

			.ur_membership_input_label {
				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;
		width: 770px;
		margin: 60px 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: 12px;

		.message-section {
			display: block;
			p {
				margin-bottom: 0;
				margin-top: 0;
				&:first-child {
					font-size: 42px;
					line-height: 56px;
					font-weight: 700;
					text-align: center;
					margin-bottom: 12px;
				}
			}
		}

		> p {
			margin-bottom: 0;
		}

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

			&.warning {
				background-color: #efc7a5;
				border-left: 4px solid #b77f02;
			}
		}
	}
}





.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;
}

.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: 20px;
	right: -700px;
	z-index: 1000;
	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;
}