@import "../../variables/variables";

$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;

@import "../../variables/colors";
@import "../../variables/structure";
@import "../../variables/variables";
@import "../../variables/grids";

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(280px, 1fr));
			display: flex;
			gap: 30px;
			margin: 0;
			justify-items: center;
			// align-items: center;

			.membership-block {
				display: flex;
				flex-direction: column;
				padding: 32px;
				gap: 12px;
				// width: 100%;
				width: 33.3333%;
				background: #f9f9f9;
				border-radius: 8px;
				text-align: center;
				box-sizing: border-box;
				transition: all 0.3s ease-in-out;

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

				.membership {
					&-title {
						padding: 0;

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

					&-body {
						padding: 0;

						.membership-description {
							p {
								margin: 0;
							}
						}
					}

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

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

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

						.membership-signup-button {
							min-height: 40px;
							padding: 0 12px;
							border-radius: 4px;
							border: 1px solid var(
									--ur-button-background-normal-color,
									$color_1
							);
							background: var(
									--ur-button-background-normal-color,
									$color_1
							);
							color: var(--ur-button-text-normal-color, $color_2);
							font-size: 14px;
							font-weight: 500;
							line-height: 24px;
							cursor: pointer;
							width: 100%;
							transition: all 0.3s ease-in-out;

							&:hover {
								color: var(
										--ur-button-text-hover-color,
										$color_2
								);
								background: var(
										--ur-button-background-hover-color,
										#38488e
								);
								border-color: var(
										--ur-button-background-hover-color,
										#38488e
								);
							}
						}
					}
				}
			}

			.ur_membership_frontend_input_container.radio {
				.membership-block {
					width: 100%;
				}
			}
		}

		//for block
		[data-layout="block"] {
			display: flex;
			flex-wrap: wrap;
		}

		//for the row
		[data-layout="row"] {
			display: flex;
			flex-direction: column;

			.membership-block {
				display: flex;
				flex-direction: row;
				width: 100%;
			}
		}
	}

	// Registration Form CSS
	.ur_membership_registration_container,
	.membership-upgrade-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: $spacing_16px 0 $spacing_24px;
			background: $border-color;
			border: 0;
			height: 1px;
		}

		.ur_membership_frontend_input_container,
		.upgrade-plan-container {
			display: flex;
			flex-direction: column;

			.description {
				margin-bottom: 10px;
			}

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

			.stripe-container {
				button {
					display: none;
				}
			}

			.ur_membership_input_label,
			.upgrade-membership-label {
				display: flex;
				// align-items: center;
				align-items: flex-start;
				margin-top: 0;
				//margin-bottom: $spacing_16px;
				border-radius: $border_radius_4;
				border: $border_width solid $border-color;
				padding: $spacing_14px;
				gap: $spacing_8px;
				margin-bottom: $spacing_12px;
				color: #222222;
				font-size: 15px;
				font-weight: 500;
				line-height: 19px;

				&:first-child {
					padding: 0;
					border-radius: 0px;
					border: 0;
					margin-bottom: $spacing_8px;
				}

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

				input[type="radio"] {
					margin: 0;
					margin-top: $spacing_2px;
					width: 14px;
					height: 14px;
					min-height: unset;
					accent-color: var(--ur-primary-color, $primary_color);

					&:checked {
						border-color: var(--ur-primary-color, $primary_color);
						background: var(--ur-primary-color, $primary_color);
					}
				}

				&:has(input[type="radio"]:checked) {
					border-color: var(--ur-primary-color, $primary_color);
				}

				.ur-membership-duration {
					margin: 0;
					color: #1f1f1f;
					font-family: inherit;
					font-size: 14px;
					font-weight: 500;
					line-height: 18px;
					// text-transform: capitalize;
					flex: 1;

					&:last-child {
						color: #1f1f1f;
						font-size: 15px;
						font-weight: 600;
						line-height: 18px;
						//margin-left: auto;
						flex: unset;
						margin-left: 8px;
					}
				}
			}

			.ur_membership_input_class {
				&:not(.ur_membership_radio_input, .pg-list) {
					height: 38px;
					padding: 0 $spacing_14px;
					border-radius: $border_radius_4;
					border: $border_width solid $border-color;
					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;
				}
			}

			.urm-team-pricing-container {
				margin: 0 0 $spacing_20px;

				.urm-team-pricing-card {
					border: 1px solid $border-color;
					padding: $spacing_16px;
					border-radius: 4px;

					.ur-label {
						padding: 14px;
						margin-bottom: 0 !important;
						border: 1px solid $border-color;
						border-radius: 4px;

						.ur-membership-duration {
							margin: 0;
							color: $grey-600;
							font-family: inherit;
							font-size: 14px;
							font-weight: 500 !important;
							line-height: 18px;
							text-transform: capitalize;
							flex: 1 !important;
						}
					}
				}

				.urm-team-pricing-details {
					margin-top: 16px;

					.ur-membership-duration {
						display: block;
						text-align: center;
						margin: 0;
						margin-bottom: $spacing_20px;

						&.ur-membership-price {
							padding: 18px 20px;
							border: 1px solid $border-color;
							border-radius: 4px;
							cursor: pointer;
							transition: all 0.2s ease;

							&:hover {
								border-color: var(--ur-primary-color, $primary_color);
							}

							&-selected {
								border-color: var(--ur-primary-color, $primary_color);
								background-color: #f9f9f9;
							}
						}
					}

					.urm-team-pricing-btn {
						.urm-or-separator {
							font-size: 14px;
							line-height: 24px;
							font-weight: 500;
							color: #7a7a7a;
							display: flex;
							align-items: center;
							gap: 16px;
							width: 100%;

							&::before,
							&::after {
								content: "";
								background: $border-color;
								width: 100%;
								height: 1px;
								display: block;
							}
						}

						.urm-team-pricing-tiers {
							.urm-team-pricing-tier {
								padding: 18px 20px;
								border: 1px solid $border-color;
								border-radius: 4px;
								cursor: pointer;
								transition: all 0.2s ease;
								margin-top: $spacing_16px;

								.urm-team-pricing-tier-details {
									display: flex;
									justify-content: space-between;
									align-items: center;

									p {
										margin-top: 0;
										margin-bottom: 4px;
										color: $grey-600;
										font-size: 16px;
									}

									.ur-team-seats {
										display: flex;
										align-items: center;
										gap: 4px;
										color: #9e9e9e;
										font-size: 13px;
										font-weight: 400;

										.dashicons {
											font-size: 18px;
										}
									}
								}

								&:hover {
									border-color: var(--ur-primary-color, $primary_color);
								}

								&.selected {
									border-color: var(--ur-primary-color, $primary_color);
									background-color: #f9f9f9;
								}

								hr {
									margin: 16px 0;
									color: $border-color;
								}

								.ur-team-tier-seats-input-wrapper {
									display: inline-flex;
									align-items: center;
									gap: 10px;

									.ur-team-tier-seats-input {
										margin-bottom: 0;
										width: auto;
									}
								}

								.ur-team-tier-seats-tier {
									margin-top: 16px;

									p {
										font-size: 14px;
										color: #9e9e9e;
										margin: 0;
									}
								}
							}
						}
					}
				}
			}
		}

		#urm-total_container {
			position: relative;
			margin-top: $spacing_32px;
			padding: $spacing_14px;
			border-radius: $border_radius_4;
			border: $border_width dashed $primary_color;
			background: #f8f8fa;
			gap: $spacing_20px;

			&::before {
				content: "";
				position: absolute;
				background: $border-color;
				width: 100%;
				height: 1px;
				top: -$spacing_24px;
				left: 0;
			}

			.urm-membership-total-value,
			.urm-membership-sub-total-value,
			.urm-membership-tax-value,
			.urm-membership-coupons-value {
				display: flex;
				align-items: center;
				justify-content: space-between;
				// gap: $spacing_20px;
				// padding: $spacing_14px;
				// border-radius: $border_radius_4;
				// border: $border_width dashed $primary_color;
				// background: #f8f8fa;
			}

			.ur_membership_input_label {
				margin-bottom: 0;
				color: #383838;
				font-size: 16px;
				font-weight: 600;
				line-height: 24px;

				.user-registration-badge {
					background: #def8db;
					text-transform: capitalize;
					font-size: 13px;
					font-weight: 500;
					line-height: 18px;
					border-radius: 30px;
					padding: 4px 12px;
					color: #3aa530;
				}
			}

			.ur_membership_input_class {
				padding: 0;
				border: 0;
				border-radius: 0;
				background: transparent;
				text-align: right;
				color: #383838;
				font-size: 18px;
				font-weight: 700;
				line-height: 24px;
				min-height: unset;
				height: unset;
			}
		}

		.ur_payment_gateway_container {
			.ur_membership_divider {
				margin: $spacing_24px 0 $spacing_16px;
			}

			.ur_membership_input_label {
				padding: 0;
				border: 0;
				border-radius: 0;
			}

			#payment-gateway-body {
				.ur-membership-payment-gateway-lists {
					display: flex;
					align-items: center;
					gap: $spacing_20px;

					@media screen and (max-width: 600px) {
						flex-direction: column;
						gap: 0;

						.ur_membership_input_label {
							width: 100%;
						}
					}
				}

				.ur_membership_input_label {
					border-radius: $border_radius_4;
					border: $border_width solid $border-color;
					padding: $spacing_14px !important;
					height: 48px;
					margin-bottom: $spacing_20px !important;
					justify-content: center;
					flex: 1;
					align-items: center;
					transition: all 0.3s ease;

					&:hover {
						border-color: var(--ur-primary-color, $primary_color);
					}

					&[for="ur-membership-stripe"] {
						.ur-membership-duration {
							color: #635bff;
						}
					}

					input[type="radio"] {
						display: none;
					}

					&:has(input[type="radio"]:checked) {
						background: lighten($primary_color, 50%);
						border-color: var(--ur-primary-color, $primary_color);
					}

					.ur-membership-duration {
						margin-left: unset;

						img {
							width: auto;
							height: 24px;
							margin-top: 4px;
						}
					}
				}

				#payment-gateway-notice {
					&:empty {
						display: none;
					}
				}
			}
		}

		// Frontend Registration CSS
		.ur_membership_input_label {
			display: flex;
			align-items: center;

			input[type="radio"] {
				margin-right: $spacing_8px;
			}

			.ur-membership-duration {
				margin-top: 0;
				margin-right: $spacing_6px;

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

	.membership-body {
		padding: 20px;
	}

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

		.membership-signup-button {
			width: 200px;
			cursor: pointer;
			font-size: 14px;
			background: var(
					--ur-button-background-normal-color,
					$primary_color
			);
			color: var(--ur-button-text-normal-color, $white);
			padding: 10px 0;
			border-radius: 5px;
			border: none;
			font-family: inherit;

			&:hover {
				background: var(--ur-button-background-hover-color, #38488e);
				color: var(--ur-button-text-hover-color, $white);
			}
		}
	}

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

	.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 0.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-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 {
				padding-bottom: 20px;
				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: 10px;
				border-radius: 0 0 5px 5px;

				button {
					width: 30%;
					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 {
		.StripeElement {
			padding: 0px 12px;
			border: 1px solid #e1e1e1;
			border-radius: 4px;

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

				iframe {
					position: absolute;
					top: $spacing_12px;
				}
			}
		}

		.authorize-net-container {
			width: 90%;

			label {
				margin-top: 0px;
				margin-bottom: 16px;
				color: rgb(34, 34, 34);
				font-size: 15px;
				font-weight: 500;
				line-height: 19px;
			}

			.ur-error {
				color: #d63638;
				font-size: 15px;
			}

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

			abbr.required {
				color: red;
			}

			abbr[title] {
				text-decoration: none;
			}

			.ur-field-row input,
			.ur-field-row select {
				width: 100%;
				min-height: 36px;
				margin-bottom: 10px;
				line-height: 1.5;
				padding: 4px 8px;
				border-radius: 0px;
			}
		}
	}

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

.user-registration {
	.membership-upgrade-container {
		> span {
			display: block;
			margin-bottom: 20px;
			font-size: 16px;
			color: $grey-300;
		}
	}

	.ur-upgrade-label {
		display: block;
		margin-bottom: 10px;
		font-weight: 600;
		font-size: 17px;
		color: $grey-600;
	}

	.notice_red,
	#upgrade-membership-notice {
		margin-top: 10px;
		font-size: 14px;
		color: #ef4444;
	}
}

.ur-membership-container {
	&.layout-list {
		.membership-block {
			display: flex;
			margin-bottom: 20px;
			border-width: 1px;
			border-style: solid;
			border-color: rgb(225, 225, 225);
			border-image: initial;
			border-radius: 4px;
			padding: 16px;

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

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

			.ur-frontend-field {
				accent-color: var(--ur-primary-color, $primary_color);

				&:focus {
					outline: none;
					box-shadow: none;
					vertical-align: center;
				}
			}

			&:has(.ur-frontend-field:checked) {
				border-color: var(--ur-primary-color, $primary_color);
			}

			.ur-membership-title-wrapper {
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 100%;

				.ur-membership-title {
					color: #1f1f1f;
					font-weight: 600;
					display: inline-block;
					vertical-align: middle;
					font-size: 16px;
					text-align: left;
				}

				.ur-membership-amount-wrapper {
					display: flex;
					align-items: center;
					justify-content: center;
					gap: 4px;

					.membership-amount {
						font-weight: 700;
						font-size: 16px;
						color: #1f1f1f;
					}
				}
			}
		}

		.ur-membership-duration {
			color: #6b6b6b;
			font-size: 13px;
			font-weight: 400;
		}
	}
}

.membership-footer {
	padding: 0px;

	.membership-signup-button {
		width: 200px;
		cursor: pointer;
		font-size: 16px;
		line-height: 24px;
		font-weight: 600;
		background: var(
				--ur-button-background-normal-color,
				$color_1
		);
		color: var(--ur-button-text-normal-color, $color_2);
		padding: 14px 0;
		border-radius: 5px;
		border: none;
		font-family: inherit;
	}
}

.ur-membership-list-container {
	.ur-membership-container {
		&.layout-block {
			display: grid;

			&.column-4 {
				grid-template-columns: repeat(4, 1fr);
			}

			&.column-3 {
				grid-template-columns: repeat(3, 1fr);
			}

			&.column-2 {
				grid-template-columns: repeat(2, 1fr);
			}

			.membership-block {
				flex-direction: column;
				padding: 32px;
				gap: 12px;
				width: 100%;
				background: none;
				border-radius: 8px;
				text-align: left;
				box-sizing: border-box;
				transition: all 0.3s ease-in-out;
				margin-bottom: 0;
				border: 1px solid var(--Grey-grey-50, #e9e9e9);

				.ur-membership-amount-wrapper {
					display: flex;
					align-items: center;
					gap: 4px;

					.membership-amount {
						color: #1f1f1f;
						font-weight: 700;
						font-size: 32px;
						text-align: left;
					}

					.ur-membership-duration {
						color: #6b6b6b;
						font-size: 15px;
						font-weight: 400;
						margin-top: 8px;
					}
				}

				.membership-title {
					color: #1f1f1f;
					font-size: 22px;
					font-weight: 800;
					padding-top: 0;
					text-align: left;
				}

				.membership-body .membership-signup-button {
					width: 100%;
					cursor: pointer;
					font-size: 16px;
					font-weight: 600;
					margin-top: 16px;
					line-height: 24px;
					background: #475bb2;
					color: white;
					padding: 12px 0;
					border-radius: 5px;
					border: none;
					font-family: inherit;
				}

				.membership-footer {
					display: flex;
					flex-direction: column;

					.membership-description {
						padding-top: 10px;
						margin-top: 20px;
						border-top: 1px solid #e9e9e9;
						text-align: left;
						color: #383838;

						&:not(:has(*:not(:empty))) {
							display: none;
						}

						ul,
						ol {
							padding-left: 20px;
						}
					}
				}
			}
		}
	}
}

.user-registration-page {
	.ur-membership-list-container {
		.ur-membership-container {
			&.layout-row {
				align-items: center;

				.membership-block {
					flex-direction: row;
					padding: 0;
					gap: 12px;
					width: 60%;
					background: none;
					border-radius: 8px;
					text-align: left;
					box-sizing: border-box;
					transition: all 0.3s ease-in-out;
					margin-bottom: 0;
					border: 1px solid var(--Grey-grey-50, #e9e9e9);
					align-items: center;

					.ur-membership-amount-wrapper {
						display: flex;
						justify-content: center;
						align-items: center;
						gap: 4px;

						.membership-amount {
							color: #1f1f1f;
							font-size: 28px;
							font-weight: 700;
						}

						.ur-membership-duration {
							color: #6b6b6b;
							font-size: 15px;
							font-weight: 400;
							margin-top: 8px;
						}
					}

					.membership-signup-button {
						width: 100%;
						cursor: pointer;
						font-size: 16px;
						font-weight: 600;
						line-height: 24px;
						background: var(
								--ur-button-background-normal-color,
								$primary_color
						);
						color: var(--ur-button-text-normal-color, $white);
						padding: 12px 0;
						margin-top: 20px;
						border-radius: 5px;
						border: none;
						font-family: inherit;

						&:hover {
							background: var(
									--ur-button-background-hover-color,
									$primary_color
							);
							color: var(--ur-button-text-hover-color, $white);
						}
					}

					.left-container {
						flex: 1;
						padding: 32px;
						justify-content: center;
						border-right: 1px solid #e9e9e9;
						height: stretch;
						align-content: center;

						.membership-title {
							color: #1f1f1f;
							font-size: 22px;
							font-weight: 700;
							line-height: 36px;
							padding-top: 0;
							text-align: left;
						}

						.membership-description {
							text-align: left;
							color: #383838;

							ul,
							ol {
								padding-left: 20px;
							}
						}
					}

					.right-container {
						max-width: 250px;
						width: 100%;
						padding: 32px;
						align-items: center;
						text-align: center;
						justify-content: center;
					}
				}
			}
		}
	}
}

.user-registration-page
.ur-membership-list-container
.ur-membership-container
.membership-block:hover,
.ur-multi-device-form-preview
.ur-membership-list-container
.ur-membership-container
.membership-block:hover,
#pg-container
.ur-membership-list-container
.ur-membership-container
.membership-block:hover {
	background: none;
	box-shadow: none;
}

// Thankyou Page CSS
.ur-thank-you-page {
	max-width: 800px !important;
	width: 100%;
	margin: 24px auto;
	box-sizing: border-box;

	.thank-you-page-container {
		display: flex;
		flex-direction: column;
		// align-items: center;
		// text-align: center;
		background-color: #ffffff;
		padding: 48px;
		border-radius: 7px;
		border: 1px solid #f1f5f9;
		box-shadow: 0 6px 26px 0 rgba(10, 10, 10, 0.06);

		@media screen and (max-width: 600px) {
			padding: $spacing_40px;
		}

		@media screen and (max-width: 420px) {
			padding: $spacing_30px;
		}

		.ur-success-icon {
			display: flex;
			justify-content: center;
			align-items: center;
			animation: scaleIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
		}

		.ur-thank-you-headline-wrapper{
			display: flex;
			justify-content: start;
			align-items: center;
			padding-bottom: 24px;
		}

		.ur-headline {
			// margin-bottom: $spacing_16px;

			h1 {
				font-size: 28px;
				font-weight: 700;
				color: #1f1f1f;
				margin: 0;
				line-height: 36px;
				letter-spacing: -0.5px;
				text-transform: capitalize;
				text-wrap: unset;
				text-align: center;

				@media screen and (max-width: 420px) {
					font-size: 22px;
					line-height: 30px;
				}
			}
		}

		.ur-message {
			margin-bottom: $spacing_32px;

			@media screen and (max-width: 420px) {
				margin-bottom: $spacing_28px;
			}

			p {
				font-size: 16px;
				line-height: 24px;
				margin: 0;
				color: #000000;
				font-weight: 400;
				// text-align: center;
				letter-spacing: 0.15px;
				text-wrap: unset;

				@media screen and (max-width: 420px) {
					font-size: 15px;
					line-height: 25px;
				}
			}

			ul {
				text-align: left;
				font-size: 16px;
			}
		}

		.ur-button-wrapper {
			margin-bottom: 0px;

			.ur-redirect-btn {
				display: inline-flex;
				align-items: center;
				justify-content: center;
				gap: 8px;
				padding: $spacing_14px $spacing_32px;
				background: var(--ur-button-background-normal-color, #475bb2);
				color: var(--ur-button-text-normal-color, #ffffff);
				font-size: 16px;
				font-weight: 500;
				border: none;
				border-radius: 4px;
				text-decoration: none;
				cursor: pointer;

				@media screen and (max-width: 420px) {
					font-size: 15px;
					line-height: 25px;
					padding: $spacing_12px $spacing_24px;
				}

				&:hover {
					background: var(
							--ur-button-background-hover-color,
							#38488e
					);
					color: var(--ur-button-text-hover-color, #ffffff);
				}

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

				svg {
					width: 16px;
					height: 16px;
					stroke: #ffffff;
					fill: none;
					transition: transform 0.3s ease;

					@media screen and (max-width: 420px) {
						display: none;
					}
				}
			}
		}

		.ur-bank-details {
			width: auto;
			margin: 30px 0;
			padding: 20px;
			align-items: center;
			background-color: #f8f8fa;
			border: 1px solid #edf2f7;
			border-radius: 6px;
			text-align: left;
			font-size: 16px;
			font-weight: 400;
			color: #383838;
			line-height: 30px;
			gap: 12px;

			.ur-bank-details-title {
				font-size: 16px;
				font-weight: 500;
				margin: 0;
				color: #1f1f1f;
				border-bottom: 1px solid #e1e1e1;
				padding-bottom: 10px;
			}
		}

		h3,
		h4 {
			margin: 0 0 12px 0;
			color: #1a1a1a;
			font-size: 16px;
			font-weight: 600;
		}

		p {
			margin: 6px 0;
			color: #495057;
			font-size: 14px;
			line-height: 1.5;
		}

		table {
			width: 100%;
			margin-top: 12px;
			border-collapse: collapse;

			th,
			td {
				padding: 8px;
				text-align: left;
				border-bottom: 1px solid #e9ecef;
				font-size: 14px;
			}

			th {
				font-weight: 600;
				color: #1a1a1a;
			}

			td {
				color: #495057;
			}
		}
	}
}

// Transaction Info
.ur-transaction-info {
	margin-bottom: 24px;
	padding: 14px 18px;
	background-color: #e7f3ff;
	border-left: 4px solid #2680c2;
	border-radius: 4px;
	text-align: left;

	p {
		margin: 0;
		font-size: 14px;
		color: #495057;
		line-height: 1.5;
	}

	strong {
		color: #2680c2;
		font-weight: 600;
	}
}

.ur-footer {
	p {
		font-size: 14px;
		color: #868e96;
		line-height: 1.6;
		margin: 0;
	}
}

@keyframes scaleIn {
	from {
		transform: scale(0);
		opacity: 0;
	}

	to {
		transform: scale(1);
		opacity: 1;
	}
}

//@media (max-width: 768px) {
//	.thank-you-page-container {
//		padding: 50px 32px;
//
//		.ur-headline h1 {
//			font-size: 28px;
//		}
//
//		.ur-message p {
//			font-size: 15px;
//		}
//
//		.ur-button-wrapper .ur-redirect-btn {
//			padding: 13px 28px;
//			font-size: 15px;
//		}
//	}
//}
//
//@media (max-width: 640px) {
//	.ur-thank-you-page {
//		padding: 20px 16px;
//	}
//
//	.thank-you-page-container {
//		padding: 40px 24px;
//		border-radius: 6px;
//
//		.ur-success-icon {
//			width: 70px;
//			height: 70px;
//			margin-bottom: 28px;
//
//			svg {
//				width: 40px;
//				height: 40px;
//			}
//		}
//
//		.ur-headline {
//			margin-bottom: 16px;
//
//			h1 {
//				font-size: 24px;
//			}
//		}
//
//		.ur-message {
//			margin-bottom: 28px;
//
//			p {
//				font-size: 15px;
//			}
//		}
//
//		.ur-button-wrapper {
//			margin-bottom: 24px;
//
//			.ur-redirect-btn {
//				padding: 12px 24px;
//				font-size: 15px;
//			}
//		}
//
//		.ur-bank-details {
//			padding: 16px;
//			margin-bottom: 20px;
//		}
//
//		.ur-transaction-info {
//			padding: 12px 16px;
//			margin-bottom: 20px;
//		}
//
//		.ur-footer p {
//			font-size: 13px;
//		}
//	}
//}
//
//@media (max-width: 480px) {
//	.thank-you-page-container {
//		padding: 32px 20px;
//
//		.ur-headline h1 {
//			font-size: 22px;
//		}
//
//		.ur-message p {
//			font-size: 14px;
//		}
//	}
//}

@media print {
	.ur-thank-you-page {
		background-color: #ffffff;
		min-height: auto;
		padding: 0;
	}

	.thank-you-page-container {
		box-shadow: none;
		padding: 20px;

		.ur-button-wrapper {
			display: none;
		}

		// .ur-success-icon {
		// 	box-shadow: none;
		// }
	}
}

.ur-show-bank-details-toggle {
	margin-bottom: 5px !important;
}

.user-registration-email__entries {
	width: 100%;
	border-collapse: collapse;
	margin: 12px 0;
	font-size: 14px;

	&-tr {
		&:empty {
			display: none;
		}
	}

	td {
		padding: 10px 12px;
		border: 1px solid #edf2f7;
		vertical-align: top;
	}

	&-label {
		width: 35%;
		font-weight: 600;
		color: #0000;
		background-color: #f8f8fa;
		white-space: nowrap;
	}

	&-data {
		color: #0000;
		word-break: break-word;
		background-color: #f8f8fa;
	}

	&-tr:nth-child(even) {
		background-color: #fcfcfd;
	}

	@media (max-width: 600px) {
		td {
			display: block;
			width: 100%;
			border-bottom: none;
		}

		&-label {
			border-bottom: 0;
			padding-bottom: 4px;
		}

		&-data {
			padding-top: 0;
		}
	}
}

// Payment Processing Overlay
@keyframes urm-pulse {
	0%,
	100% {
		opacity: 1;
	}
	50% {
		opacity: 0.5;
	}
}

@keyframes urm-progress {
	0% {
		width: 0%;
	}
	50% {
		width: 70%;
	}
	100% {
		width: 100%;
	}
}

.urm-payment-processing-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.7);
	backdrop-filter: blur(4px);
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease,
	visibility 0.3s ease;

	&.active {
		opacity: 1;
		visibility: visible;
	}

	.urm-payment-processing-content {
		background: $grey-0;
		border-radius: 12px;
		padding: 40px 50px;
		text-align: center;
		box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
		max-width: 400px;
		width: 90%;
		transform: translateY(20px);
		transition: transform 0.3s ease;

		.urm-payment-processing-overlay.active & {
			transform: translateY(0);
		}

		.urm-payment-spinner {
			width: 60px;
			height: 60px;
			border: 4px solid #e9e9e9;
			border-top-color: $color_1;
			border-radius: 50%;
			animation: spin 1s linear infinite;
			margin: 0 auto 24px;
		}

		.urm-payment-title {
			color: $grey-400;
			font-size: 20px;
			font-weight: 600;
			line-height: 28px;
			margin: 0 0 8px;
		}

		.urm-payment-message {
			color: #6b6b6b;
			font-size: 14px;
			font-weight: 400;
			line-height: 22px;
			margin: 0 0 24px;
		}

		.urm-payment-progress {
			background: #e9e9e9;
			border-radius: 4px;
			height: 4px;
			overflow: hidden;
			margin-top: 16px;

			.urm-payment-progress-bar {
				height: 100%;
				background: linear-gradient(90deg, $color_1, #38488e);
				border-radius: 4px;
				animation: urm-progress 2s ease-in-out infinite;
			}
		}

		.urm-payment-icon {
			width: 60px;
			height: 60px;
			margin: 0 auto 24px;
			background: linear-gradient(135deg, $color_1 0%, #38488e 100%);
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			animation: urm-pulse 2s ease-in-out infinite;

			svg {
				width: 30px;
				height: 30px;
				fill: $grey-0;
			}
		}
	}
}