@import "variables/variables";
@import "components/button", "components/tags", "components/input";

#user-registration {
	&.vertical {
		display: flex;
		// flex-wrap: wrap;

		@media screen and (max-width: 992px) {
			flex-direction: column;
		}

		.user-registration-error,
		.user-registration-message {
			float: none;
			width: 100%;
			margin-top: 10px;
		}

		.user-registration-MyAccount-navigation {
			ul {
				flex-direction: column;
				flex-wrap: nowrap;

				.user-registration-MyAccount-navigation-link {
					&.is-active {
						a {
							border-color: var(
								--ur-primary-color,
								$primary_color
							);
						}
					}
				}
			}
		}

		.user-registration-MyAccount-content {
			flex: 1;
			width: 100% !important;

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

	&.horizontal,
	& {
		box-shadow: 0 2px 20px transparentize($gray-base, 0.9);

		.user-registration-message,
		.user-registration-error,
		.user-registration-info {
			margin-bottom: 0;
			margin-top: 10px;
		}

		.user-registration-MyAccount-navigation {
			// border-bottom: 1px solid $border_color;

			ul {
				justify-content: center;

				.user-registration-MyAccount-navigation-link {
					a {
						padding: 15px 20px;
						font-family: inherit;
						font-weight: 500;
					}

					&.is-active {
						a {
							// background-color: $color_gray_four;
						}
					}
				}
			}
		}

		.user-registration-MyAccount-content,
		.ur-edit-profile {
			text-align: center;

			.user-registration-profile-header {
				// .button-group {
				// 	.button.user_registration_profile_picture_upload {
				// 		background: #edeff7;
				// 		color: $primary_color;
				// 		border: $border_width solid #edeff7 !important;
				// 	}
				// }

				.user-registration-img-container {
					margin: 0 auto;
					margin-bottom: 15px;

					img {
						width: 100px;
						height: 100px;
						object-fit: cover;
						border-radius: 50%;
						margin: 0 auto;
					}
				}
			}

			.edit-profile,
			.edit-password {
				text-align: left;
			}

			.edit-profile {
				.user-registration-profile-header,
				h2 {
					text-align: center;
				}
			}

			.user-registration-profile-fields {
			}
		}
	}

	.user-registration-MyAccount-content {
		@media (max-width: 991px) {
			padding: 36px 30px;
		}

		> h2 {
			margin-bottom: $spacing_24px;
		}

		.user-registration-profile-header {
			margin-bottom: $spacing_20px;
			gap: $spacing_16px;

			header {
				h3 {
					margin-bottom: 0;
				}
			}
		}

		> p {
			margin-bottom: $spacing_8px;

			a {
				font-weight: 500;
				color: $primary_color;
			}
		}

		.ur-frontend-form {
			padding: $spacing_20px;

			&:has(.user-registration-PrivacyTab) {
				h2 {
					text-align: left;
				}
			}

			.user-registration-EditProfileForm {
				.user-registration-profile-fields {
					h2 {
						text-align: center;
					}
				}
			}

			.user-registration-EditAccountForm {
				.ur-form-grid {
					> p {
						float: right;
						margin-bottom: 0;
					}
				}
			}

			.user-registration-EditProfileForm {
				.user-registration-profile-fields {
					> p {
						float: right;
						margin-top: $spacing_24px;
						margin-bottom: 0;

						.user-registration-Button.button-primary {
							border-radius: $border_radius_4;
							box-shadow: none;
							// border: $border_width solid $primary_color;
						}
					}
				}
			}

			.user-registration-PrivacyTab {
				text-align: left;

				.ur-form-grid {
					padding-left: 0;
					padding-right: 0;
				}

				.ur-form-row {
					.user-registration-form-row {
						display: flex;
						flex-wrap: wrap;
						row-gap: $spacing_10px;
						margin-bottom: 30px;

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

						@media (max-width: 991px) {
							flex-direction: column;
							gap: 12px;
						}

						.ur-privacy-field-label {
							width: 40%;
							max-width: 100%;

							@media (max-width: 991px) {
								width: 100%;
							}

							label {
								font-size: 15px;
								line-height: 150%;
								font-weight: 500;
								color: #383838;
								margin: 0;

								.ur-portal-tooltip {
									&::after {
										color: #bababa;
									}
								}
							}
						}

						.ur-privacy-input {
							display: flex;
							align-items: center;
							gap: 12px;
							width: 60%;
							max-width: 100%;

							@media (max-width: 991px) {
								width: 100%;
							}

							&--radio-box {
								position: relative;
								display: block;

								label {
									display: block;
									border-radius: 3px;
									padding: $spacing_8px $spacing_12px
										$spacing_8px $spacing_34px;
									border: 1px solid #999999;
									cursor: pointer;
									font-size: 14px;
									font-weight: 500;
									line-height: 150%;
									color: #6b6b6b;
									margin: 0;

									&::before,
									&::after {
										content: "";
										position: absolute;
										left: 12px;
										top: 12px;
										width: 16px;
										height: 16px;
										border-radius: 50%;
										border: 1px solid #bdbdbd;
									}

									&::before {
										z-index: 2;
										overflow: hidden;
										background: transparent;
										width: 0;
										height: 0;
										border: none;
										transition:
											0.1s width
												cubic-bezier(
													0.075,
													0.82,
													0.165,
													1
												)
												0s,
											0.3s width
												cubic-bezier(
													0.075,
													0.82,
													0.165,
													2
												)
												0.1s;
									}
								}

								input[type="radio"] {
									display: none;
									position: absolute;
									width: 100%;
									-webkit-appearance: none;
									-moz-appearance: none;
									appearance: none;
									margin-right: 0;

									&:checked + label {
										color: #475bb2;
										background: #edeff7;
										border-color: #475bb2;

										&::after {
											background: #fff;
											border: 1px solid #475bb2;
										}

										&::before {
											width: 8px;
											height: 8px;
											background: #475bb2;
											top: 16px;
											left: 16px;
										}
									}
								}
							}
						}

						&.ur-about-your-data {
							margin-bottom: 40px;
						}

						.ur-about-your-data-input {
							width: 60%;
							max-width: 100%;

							@media (max-width: 991px) {
								width: 100%;
							}

							h3 {
								font-weight: 600;
								font-size: 18px;
								line-height: 24px;
								color: #6b6b6b;
								margin-bottom: 12px;
							}

							p {
								font-weight: 400;
								font-size: 15px;
								line-height: 23px;
								color: #6b6b6b;
								margin-bottom: 0;
							}

							.ur-privacy-action-btn {
								display: flex;
								flex-wrap: wrap;
								align-items: center;
								gap: 20px;
								margin-top: 20px;

								.ur-button {
									padding: 10px 16px;
									background: #0170b9;
									border: 1px solid #0170b9;
									border-radius: 3px;
									font-weight: 500;
									font-size: 14px;
									line-height: 150%;
									color: #ffffff;
									text-decoration: none;
									transition: all 0.3s ease-in-out;
									letter-spacing: 0.2px;

									&:hover {
										background: #004c7d;
										border-color: #004c7d;
									}
								}

								#ur-new-download-request {
									font-weight: 500;
									font-size: 14px;
									line-height: 150%;
									text-decoration-line: underline;
									color: #6b6b6b;
									letter-spacing: 0.1px;
									transition: all 0.3s ease-in-out;

									&:hover {
										color: #0170b9;
									}
								}

								#ur-new-erase-request {
									font-weight: 500;
									font-size: 14px;
									line-height: 150%;
									text-decoration-line: underline;
									color: #6b6b6b;
									letter-spacing: 0.1px;
									transition: all 0.3s ease-in-out;

									&:hover {
										color: #0170b9;
									}
								}
							}

							.ur-field {
								margin-bottom: 32px;

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

								label {
									font-weight: 400;
									font-size: 15px;
									color: #6b6b6b;
									line-height: 150%;
									margin-top: 0;
									margin-bottom: 16px;
								}

								.ur-field-area {
									margin-bottom: 16px;

									input[type="password"] {
										padding: 8px 14px;
										background: #ffffff;
										border: 1px solid #e1e1e1;
										border-radius: 4px;

										&::placeholder {
											color: #bababa;
										}
									}

									.ur-field-error {
										background: #fff4f4;
										padding: 8px 12px 8px 16px;
										color: #f25656;
										font-weight: 500;
										border-left: 3px solid #f25656;
										margin-top: 8px;
										font-size: 14px;
										display: flex;
										align-items: center;
										gap: 4px;

										&::before {
											content: "";
											background-image: url("../images/icons/alert-icon.svg");
											background-position: center;
											background-size: 100%;
											background-repeat: no-repeat;
											display: block;
											width: 18px;
											height: 18px;
										}
									}
								}

								.ur-request-button {
									font-weight: 500;
									font-size: 14px;
									line-height: 150%;
									color: #ffffff;
									padding: 10px 16px;
									background: #0170b9;
									border: 1px solid #0170b9;
									border-radius: 3px;
									letter-spacing: 0.2px;
									transition: all 0.3s ease-in-out;

									&:hover {
										background: #004c7d;
										border-color: #004c7d;
									}
								}
							}
						}

						&.ur-privacy-button {
							padding-top: 32px;
							border-top: 1px solid #e1e1e1;
							justify-content: flex-end;

							input[type="submit"] {
								min-height: 36px;
								font-weight: 500;
								font-size: 14px;
								line-height: 24px;
								color: $white;
								padding: 0 $spacing_12px;
								background: #0170b9;
								border: 1px solid #0170b9;
								border-radius: $border_radius_4;
								transition: all 0.3s ease-in-out;

								&:hover {
									background: #004c7d;
									border-color: #004c7d;
								}
							}
						}
					}
				}
			}
		}

		// Payment Invoice Table Design Fix
		.ur-payments-container {
			.ur-payment-invoices {
				padding-left: 20px;
				padding-right: 20px;
				overflow: hidden;
				overflow-x: auto;
				margin-top: 15px;

				table {
					border-collapse: collapse;
					border: $border_width solid #f1f1f1;

					tbody {
						tr {
							th {
								background: #f1f5f9;
								font-weight: $semi_bold;
							}

							td {
								&:last-child {
									color: #59b259;
									text-transform: capitalize;
								}

								a {
									background: $primary_color;
									color: $grey-0;
									padding: $spacing_8px $spacing_12px;
									border-radius: $border_radius_3;

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

							&:nth-child(odd) {
								td {
									background: #fafafa;
								}
							}
						}
					}
				}
			}
		}

		// TODO: Remove this CSS after testing
		.user-registration-membership-wrapper {
			padding: $spacing_32px;
			margin-bottom: $spacing_32px;
			border: 1px solid #383838;
		}

		.user-registration-membership-content {
			display: flex;
			flex-direction: column;
			gap: 20px;

			.membership-row {
				display: flex;

				.membership-label {
					min-width: 300px;
					text-align: left;
				}

				.membership-data {
					#ur-membership-status {
						font-size: 14px;
						line-height: 24px;
					}
				}
			}

			.membership-row-btn-container {
				display: flex;
				flex-direction: column;
				gap: $spacing_20px;
				text-align: left;

				.btn-div {
					display: flex;
					gap: $spacing_12px;
					align-items: center;

					.membership-tab-btn {
						min-height: 36px;
						padding: 0 $spacing_12px;
						border-radius: $border_radius_4;
						cursor: pointer;
						font-size: 14px;
						line-height: 24px;
						background: transparent;

						&.reactivate-membership-button {
							border: 1px solid #0067ab;
							color: #0067ab;
							display: flex;
							align-items: center;
						}

						&.cancel-membership-button {
							border: $border_width solid #f25656;
							color: #f25656;

							&:hover {
								color: $white;
								background: #f25656;
							}
						}

						&.renew-membership-button {
							border: 1px solid #00ab02;
							color: #00ab02;
							display: flex;
							align-items: center;
						}

						&.change-membership-button {
							border: $border_width solid $primary_color;
							color: $primary_color;

							&:hover {
								color: $white;
								background: $primary_color;
							}

							.ur-front-spinner {
								background-size: 16px 16px;
								opacity: 0.7;
								width: 16px;
								height: 16px;
								margin-left: 7px;
								float: right;
								color: $primary_color;
								display: none;
							}
						}

						&.cancel-membership-button:hover {
							background: red;
							color: white;
						}

						&.change-membership-button:hover {
							background: $primary_color;
							color: white;
						}

						&.renew-membership-button:hover {
							background: #00ab02;
							color: white;
						}

						&.reactivate-membership-button:hover {
							background: #0067ab;
							color: white;
						}

						&.cancel-membership-button:focus,
						&.change-membership-button:focus,
						&.renew-membership-button:focus,
						&.reactivate-membership-button:focus {
							outline-style: none;
						}
					}
				}

				#membership-error-div {
					width: 100%;
					text-align: left;
					padding: $spacing_8px $spacing_12px $spacing_8px
						$spacing_16px;
					font-size: 14px;
					font-weight: $medium;
					display: none;

					&.btn-error {
						background: #fff4f4;
						color: #f25656;
						border-left: 3px solid #f25656;
					}

					&.btn-success {
						display: flex;
						justify-content: space-between;
						background: #ededed;
						color: #11b84c;
						border-left: 3px solid #00ff5a;

						.cancel-notice {
							cursor: pointer;
							font-size: larger;
						}

						.cancel-notice:hover {
							color: #f25656;
						}
					}
				}

				#bank-notice {
					display: flex;
					font-size: $medium;
					justify-content: space-between;

					.notice-1 {
						width: auto;
						display: flex;
						gap: $spacing_12px;
						background: #f7fbff;
						border: $border_width solid $primary_color;
						font-style: italic;
						border-radius: $border_radius_5;
						padding: $spacing_12px $spacing_16px;
						align-items: center;
					}

					.view-bank-data {
						cursor: pointer;
						font-style: italic;
						text-decoration: underline;
					}
				}
			}
		}

		table.user-registration-email__entries {
			display: inline-block !important;
		}
	}
}

//User registration toggle.
.ur-toggle-section {
	.user-registration-toggle-form {
		position: relative;
		display: inline-block;
		width: 30px;
		height: 16px;

		input {
			position: relative;
			z-index: 99;
			opacity: 0;
			height: 16px;
			width: 30px;
			cursor: pointer;

			&:checked + .slider {
				background: $primary_color;
			}

			&:focus + .slider {
				box-shadow: 0 0 1px #2196f3;
			}

			&:checked + .slider::before {
				transform: translateX(14px);
			}
		}

		.slider {
			position: absolute;
			cursor: pointer;
			inset: 0;
			background: #dfe1ea;
			transition: 0.4s;

			&.round {
				border-radius: 30px;
			}

			&.round::before {
				border-radius: 50%;
			}

			&::before {
				position: absolute;
				content: "";
				height: 12px;
				width: 12px;
				left: 2px;
				bottom: 2px;
				background-color: #fff;
				transition: 0.4s;
				border-radius: 100%;
			}
		}
	}
}

// @media screen and (max-width: 980px) {
// 	#user-registration {
// 		&.vertical {
// 			.user-registration-MyAccount-navigation {
// 				width: 30%;
// 			}

// 			.user-registration-MyAccount-content {
// 				width: 70%;
// 			}
// 		}
// 	}
// }

@media screen and (max-width: 600px) {
	#user-registration {
		&.vertical {
			.user-registration-MyAccount-navigation {
				width: 100%;

				ul {
					.user-registration-MyAccount-navigation-link {
						a {
							padding: 15px 20px;
						}
					}
				}
			}

			.user-registration-MyAccount-content {
				width: 100%;
			}
		}

		.user-registration-MyAccount-content {
			padding: 15px;
		}
	}
}

// Tooltip for privacy tab
.tooltipster-base {
	position: absolute;
	top: 0px;

	.tooltipster-content {
		color: white;
		font-size: 14px;

		button {
			margin: 10px 0px 10px 0px;
		}
	}

	.tooltipster-box {
		background: $grey-400 !important;
		padding: $spacing_4px $spacing_8px;
		border-radius: $border_radius_4;
		border-color: $grey-400;
	}
}

// My Account Page Design Revamp CSS
#user-registration {
	&.vertical,
	&.horizontal {
		border-radius: $border_radius_16;
		background: $grey-0;
		box-shadow: 0px 6px 26px 0px rgba(10, 10, 10, 0.08);

		.user-registration-MyAccount {
			&-navigation {
				&-link {
					border: 0 !important;

					&:last-child {
						border: 0 !important;
					}

					> a {
						display: flex;
						gap: $spacing_8px;

						i {
							width: 20px;
							height: 20px;
							display: flex;
							align-items: center;
							justify-content: center;
							margin-right: 0 !important;
						}
					}
				}
			}

			&-content {
				&__header {
					display: flex;
					justify-content: space-between;
					border-bottom: $border_width solid #f4f4f4;
					padding-bottom: $spacing_16px;
					margin-bottom: $spacing_32px;

					@media screen and (max-width: 600px) {
						flex-direction: column;
						align-items: flex-start;
						gap: $spacing_12px;
					}

					&-content {
						display: flex;
						gap: $spacing_16px;

						.urm-back-button {
							padding: 0;
							margin: 0;
							border: 0;
							position: relative;
							display: flex;
							align-items: center;
							justify-content: center;
							color: #383838;

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

							&::before {
								content: "";
								background: #f4f4f4;
								position: absolute;
								width: 32px;
								height: 32px;
								top: 50%;
								left: 50%;
								border-radius: 4px;
								z-index: 0;
								transform: translate(-50%, -50%);
								opacity: 0;
								transition: all 0.3s ease-in-out;
							}

							&:hover {
								color: #475bb2;

								&::before {
									opacity: 1;
								}
							}

							svg {
								width: 22px;
								height: 22px;
								position: relative;
							}
						}

						h1 {
							margin: 0;
							text-align: left;
							color: #16181a;
							font-size: 20px;
							font-weight: 500;
							line-height: 30px;
						}
					}

					&-buttons {
						display: flex;
						flex-direction: row-reverse;
						align-items: center;
						justify-content: flex-start;
						gap: $spacing_12px;

						@media screen and (max-width: 600px) {
							justify-content: flex-end;
							flex-wrap: wrap;
						}

						.user-registration-Button {
							padding: 0 $spacing_16px;
							min-height: 34px;
							width: max-content;
							align-content: center;
							background: transparent;
							border: $border_width solid $border-color;
							font-size: 14px;
							line-height: 24px;
							color: #4e4e4e;
							background: $white;
							font-weight: $medium;
							box-shadow: none;
							text-decoration: none;
							transition: all 0.3s ease;

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

							&:hover {
								color: #383838;
								border-color: #919191;
							}

							&.urm-profile-action-toggle {
								color: var(
									--ur-button-text-normal-color,
									$white
								);
								background: var(
									--ur-button-background-normal-color,
									$primary_color
								);
								border-color: var(
									--ur-button-background-normal-color,
									$primary_color
								);

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

							&.urm-profile-change-password-btn {
							}
						}
					}
				}

				&__body {
					h2 {
						margin-bottom: $spacing_20px;
						color: $grey-400;
						font-size: 22px;
						line-height: 32px;
					}

					.user-registration-profile-fields {
						&[data-action="view"] {
							.user-registration-profile {
								&-fields__field-wrapper {
									.ur-form-grid {
										display: flex;
										flex-wrap: wrap;
										gap: $spacing_24px;
									}

									.ur-field-item {
										flex: 0 0 calc(50% - 16px);

										@media screen and (max-width: 768px) {
											flex: unset;
											width: 100%;
											margin-bottom: $spacing_8px;
										}

										.ur-label {
											margin: 0;
											margin-bottom: $spacing_8px;
										}

										input {
											margin-bottom: 0;

											&:disabled {
												border-color: #dcdcde;
												background: #f6f7f7;
												opacity: 0.6;
												pointer-events: none;
											}
										}
									}
								}
							}
						}

						&[data-action="edit"] {
							select {
								min-height: 38px;
								height: 38px;
								width: 100%;
								padding: 0 $spacing_12px;
								border-color: $border-color;
								border-radius: $border_radius_4;
								font-size: 14px;
								line-height: 24px;
								color: #383838;
								font-weight: 400;
								margin: 0;
								box-shadow: none;
								background: transparent;
								background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23737373' viewBox='0 0 24 24'%3E%3Cpath d='M19.561 7.403a1.468 1.468 0 0 1 2.02 0 1.339 1.339 0 0 1 0 1.944l-8.57 8.25a1.468 1.468 0 0 1-2.021 0l-8.572-8.25a1.339 1.339 0 0 1 0-1.944 1.468 1.468 0 0 1 2.02 0L12 14.68l7.561-7.278Z'/%3E%3C/svg%3E");
								background-repeat: no-repeat;
								background-position: right 12px center;
								background-size: 14px 14px;
								cursor: pointer;

								&:focus {
									outline: none;
									box-shadow: none;
									border-color: $primary_color;
								}
							}

							.user-registration-profile-header {
								.user-registration-img-container {
									.profile-preview {
										border: 4px solid #edeff7;
									}
								}

								.button-group {
									margin-bottom: 0;
									bottom: $spacing_20px;

									.button {
										svg {
											width: 18px;
											height: 18px;
											fill: $primary_color;
										}
									}
								}
							}
						}
					}

					.ur-form-grid {
						p {
							.user-registration-Button {
								min-height: 38px;
								padding: 0 $spacing_20px;
								font-size: 15px;
								line-height: 25px;
								border-radius: $border_radius_4;
								border: 0;
								background: var(
									--ur-button-background-normal-color,
									$primary_color
								);
								color: var(
									--ur-button-text-normal-color,
									$white
								);

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

					.user-registration-profile-header {
						display: flex;
						flex-wrap: wrap;
						align-items: center;
						flex-direction: column;
						margin-bottom: $spacing_20px;

						.user-registration-img-container {
							margin: auto;
						}
					}

					p {
						margin-bottom: $spacing_8px;

						a {
							font-weight: $medium;
							color: $primary_color;
						}
					}

					.ur-frontend-form {
						&.login {
							.ur-form-row {
								.ur-form-grid {
									fieldset {
										padding: 0;
										margin: 0;
										border: 0;

										.user-registration-form-row {
											margin-bottom: $spacing_20px;

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

											label {
												margin-top: 0;
												margin-bottom: $spacing_8px;
												color: $grey-500;
												font-size: 15px;
												font-weight: $medium;
												line-height: 21px;
											}

											.password-input-group {
												display: block;

												.input-text {
													height: 38px;
													padding: 0 $spacing_12px;
													border-radius: $border_radius_4;
													border: $border_width solid
														#e1e1e1;
													background: $grey-0;

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

									.user-registration-form-row {
										.ur-privacy-button {
											margin-bottom: 0;
										}
									}

									// Save Changes Button CSS
									> p {
										float: unset;
										margin-top: $spacing_32px;
										text-align: right;

										.user-registration-Button.button {
											background: var(
												--ur-button-background-normal-color,
												$primary_color
											);
											border: $border_width solid
												var(
													--ur-button-background-normal-color,
													$primary_color
												);
											border-radius: $border_radius_4;

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

					.user-registration-membership-content {
						.membership {
							&-label {
								width: 40%;
								text-align: left;
							}

							&-data {
								flex: 1;
								text-align: left;
							}

							&-row {
								gap: 0;

								&-btn-container {
									margin-top: $spacing_20px;
									justify-content: flex-start;
									flex-direction: unset;

									.btn-div {
										width: 100%;

										.cancel-membership-button {
											background: #f25656;
											padding: $spacing_8px $spacing_16px;
											display: flex;
											gap: 6px;
											align-items: center;

											&::before {
												content: "";
												background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 3.818a8.182 8.182 0 1 0 0 16.364 8.182 8.182 0 0 0 0-16.364ZM2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12Zm13.37-3.37a.91.91 0 0 1 0 1.286L13.286 12l2.084 2.084a.91.91 0 0 1-1.286 1.286L12 13.286 9.916 15.37a.91.91 0 0 1-1.286-1.286L10.714 12 8.63 9.916A.91.91 0 0 1 9.916 8.63L12 10.714l2.084-2.084a.91.91 0 0 1 1.286 0Z' clip-rule='evenodd'/%3E%3C/svg%3E");
												background-repeat: no-repeat;
												background-position: center;
												background-size: 100%;
												width: 18px;
												height: 18px;
												display: block;
											}
										}
									}
								}
							}
						}
					}

					.user-registration-pn-section {
						.user-registration-pn-container {
							.user-registration-pn-lists {
								border-radius: 8px 0 0 8px;
							}

							.user-registration-pn-display-detail-area {
								border-radius: 0px 8px 8px 0px;
								border: 1px solid #f1f1f1;
								background: $grey-0;
								border-left: 0;
							}
						}
					}

					// Payments Details New Design CSS
					.ur-payments-container {
						.ur-payments-details {
							margin-bottom: 40px;

							.ur-payments-table {
								margin-bottom: 0;

								tbody {
									tr {
										&.ur-payment-table-row {
											padding: 0;
											border-bottom: 0;

											th {
												padding: 0;
												width: 360px;
												padding: 12px 0;
											}

											td {
												padding: 12px 0;
											}
										}
									}
								}
							}
						}

						.ur-payment-invoices {
							margin-top: 0 !important;
							padding: 0 !important;

							table.ur-payment-invoice-table {
								border-radius: 6px !important;
								margin-bottom: 0;
								border: 0 !important;

								tbody {
									tr {
										&:has(th) {
											background: #edeff7 !important;
											border-radius: 6px !important;
										}

										th {
											padding: 16px 20px;
											color: $grey-500;
											font-size: 15px;
											font-weight: 500;
											line-height: 21px;
											border-radius: 0 !important;
											background: transparent !important;
											border: 0;

											&:first-child {
												width: 200px;
											}

											&:nth-child(2) {
												width: 230px !important;
											}
										}

										td {
											border: 0;
											padding: 16px 20px;
											color: $grey-400;
											font-size: 14px;
											font-weight: 400;
											line-height: 20px;

											a {
												&#ur_download_payment_invoice {
													padding: 0;
													background: none;
													color: $primary_color;
													border-radius: 0;
													position: relative;

													&::after {
														content: "";
														background: darken(
															$primary_color,
															5%
														);
														width: 0px;
														height: 1.5px;
														position: absolute;
														bottom: -2px;
														left: 0;
														transition: all 0.3s
															ease-in-out;
													}

													&:hover {
														background: transparent;
														color: darken(
															$primary_color,
															5%
														);

														&::after {
															width: 100%;
														}
													}
												}
											}
										}

										&:nth-child(odd) {
											td {
												background: #f8f8fa !important;
											}
										}
									}
								}
							}
						}
					}

					.ur-account-table-container {
						margin-top: 0;

						.ur-pagination {
							display: flex;
							gap: 8px;
							justify-content: flex-end;
							margin-top: 30px;
							padding-left: 0;

							ul.page-numbers {
								margin: 0;
								padding-left: 0;
							}

							li {
								.page-numbers {
									padding: 0;
									width: 34px;
									height: 34px;
									display: flex;
									align-items: center;
									justify-content: center;
									border: $border_width solid #ddd;
									border-radius: $border_radius_4;
									font-size: 14px;
									line-height: 24px;
									font-weight: $medium;
									color: #626262;
									text-decoration: none;
									transition: all 0.2s ease;

									&:hover,
									&.current {
										// background: #edeff7;
										// border-color: #edeff7;
										// color: $primary_color;
										background: $primary_color;
										border-color: $primary_color;
										color: $white;
									}
								}
							}

							.prev,
							.next {
								font-weight: 600;

								&:hover {
									background: #edeff7;
									border-color: #edeff7;
									color: $primary_color;
								}
							}

							.disabled {
								opacity: 0.4;
								cursor: not-allowed;

								&:hover {
									background: #fff;
									border-color: #ddd;
									color: #333;
								}
							}

							.page-numbers {
								display: flex;
								gap: 10px;
								list-style: none;

								li {
									&::marker {
										content: "";
									}
								}
							}
						}
					}

					.ur-account-table {
						margin-bottom: 0;
						min-width: 800px;
						width: 100%;
						// border-collapse: separate;
						border-collapse: collapse;
						border-spacing: 0;
						background: $white;
						// border-radius: 8px;
						border-radius: 0;
						overflow: hidden;
						border: 0;
						// box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);

						&-wrapper {
							border: $border_width solid #f4f4f4;
							border-radius: 7px;
							overflow-x: auto;
							-webkit-overflow-scrolling: touch;
							width: 100%;
							// padding: $spacing_4px;
						}

						&__header {
							border-radius: 7px;
							// background: #f7f7f7;
							background: #f8f8fa;

							&-cell {
								border: 0;
								color: #626262;
								font-size: 14px;
								line-height: 24px;
								font-weight: 500;
								text-align: left;
								padding: $spacing_16px $spacing_20px;
								border-bottom: $border_width solid #f4f4f4;

								&:first-child {
									border-radius: 7px 0 0 0;
								}

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

						&__body {
							.ur-account-table__row {
								// border-bottom: 1px solid #f0f2f5;
								border: 0;

								.ur-account-table__cell {
									padding: $spacing_14px $spacing_20px;
									font-size: 14px;
									color: #50565f;
									align-content: center;
									background: transparent;
									text-align: left;
									border: 0;
									border-bottom: $border_width solid #f4f4f4;

									&--transaction-id {
										// font-family: 'Courier New', monospace;
										word-break: break-all;
										color: #656565;
									}

									&--amount {
										font-weight: 600;
									}

									&--status {
										span {
											display: inline-block !important;
											padding: 6px 12px !important;
											border-radius: 4px !important;
											font-weight: 500;
											text-transform: capitalize;
											font-size: 14px;
											line-height: 20px;

											&.btn-active,
											&.btn-completed {
												color: #3aa530;
												background: #def8db;
											}
										}
									}

									&--action {
										.membership-row-btn-container {
											.btn-div {
												.action-menu {
													position: relative;

													.menu-trigger {
														padding: 0;
														border: $border_width
															solid transparent;
														border-radius: 3px;
														background: transparent;
														width: 24px;
														height: 28px;
														box-shadow: none;
														display: flex;
														align-items: center;
														justify-content: center;
														cursor: pointer;

														svg {
															width: 18px;
															height: 18px;
															fill: #4e4e4e;
															transition: all 0.3s
																ease;
														}

														&:hover {
															border-color: $border-color;

															svg {
																fill: $primary_color;
															}
														}
													}

													.dropdown {
														display: flex;
														flex-direction: column;
														z-index: 50;
														background: #fff;
														border: 1px solid
															#d1d5db;
														box-shadow: 0 4px 16px
															rgba(0, 0, 0, 0.12);
														opacity: 1;
														transition: all 0.15s
															ease;
														min-width: 210px;
														border-radius: 4px;
														padding: 8px;

														&.hidden {
															display: none;
														}

														a {
															color: #4b5563;
															text-decoration: none;
															transition: all
																0.15s ease;
															font-size: 14px;
															line-height: 20px;
															font-weight: 400;
															padding: 8px 12px;
															border: 0;
															display: flex;
															align-items: center;
															gap: 8px;
															justify-content: flex-start;

															&:hover {
																background: #f3f3f3;
															}

															svg {
																width: 14px;
																height: 14px;
																fill: #4e4e4e;
															}

															.urm-spinner {
																margin-left: auto;
															}
														}
													}
												}
											}
										}

										.ur-account-action-link {
											display: inline-flex;
											align-items: center;
											justify-content: center;
											text-decoration: none;
											gap: $spacing_6px;
											padding: 0 $spacing_16px 0
												$spacing_14px;
											background: $white;
											border: 1.5px solid #dee2e6;
											border-radius: $border_radius_4;
											color: #4e4e4e;
											font-size: 14px;
											line-height: 20px;
											font-weight: $medium;
											cursor: pointer;
											min-height: 34px;
											transition: all 0.3s;

											&:hover {
												background: #f8f9fa;
												border-color: #adb5bd;
												color: #1a1a1a;
											}

											// &:after {
											// 	content: none;
											// }

											svg {
												width: 14px;
												height: 14px;
												fill: #4e4e4e;
											}
										}
									}

									.user-registration-help-tip {
										&::after {
											content: none;
										}
									}
								}

								&:last-child {
									.ur-account-table__cell {
										border-bottom: 0;
									}
								}
							}
						}
					}

					.ur-account-status-badge {
						display: inline-block;
						padding: 4px 10px;
						border-radius: 20px;
						font-size: 12px;
						font-weight: 500;

						&.is-success,
						&.completed,
						&.active {
							background: #e4f7e8;
							color: #289b43;
						}

						&.is-warning,
						&.pending {
							background: #fff7d9;
							color: #d1a200;
						}

						&.is-error,
						&.failed {
							background: #ffe6e6;
							color: #d33;
						}
					}

					.team-row-btn-container {
						.ur-account-action-link {
							background: transparent !important;
							border: none !important;

							&.edit-team-btn {
								padding-left: 0 !important;
								padding-right: $spacing_8px !important;
							}

							&.delete-team-btn {
								padding-left: $spacing_8px !important;
								padding-right: 0 !important;
							}
						}
					}

					.ur-edit-team {
						.ur-form-row {
							text-align: left;

							.ur-add-member-wrapper {
								display: flex;
								align-items: center;

								input {
									margin-bottom: 0;
								}

								button {
									font-size: 20px;
									padding: 8px 16px;
									background-color: var(
										--ur-button-background-normal-color,
										$primary_color
									);
									color: white;

									&:disabled {
										opacity: 0.4;
										cursor: not-allowed;
									}
								}
							}

							.ur-member-list-wrapper {
								color: #222222;
								font-size: 15px;
								font-weight: 500;
								line-height: 21px;

								.ur-account-table {
									th {
										padding: 10px 20px;
									}

									.ur-account-table__cell {
										font-weight: 400;
										text-transform: none;
									}
								}
							}

							.ur-invited-email-wrapper {
								display: flex;
								align-items: center;
								gap: 10px;
								background: #f8f8fa;
								padding: 12px;
								margin-top: 8px;
								border-radius: 8px;

								.ur-invited-email-item {
									display: inline-flex;
									align-items: center;
									gap: 6px;
									padding: 8px;
									background: white;
									font-size: 14px;
									border-radius: 6px;
									color: #4a5568;

									.dashicons-no-alt {
										cursor: pointer;
										color: #999999;
									}
								}
							}

							.ur-max-seats-reached-error {
								color: $deny_color;
								font-size: 14px;
							}

							.ur-form-grid {
								padding: 0;
							}
						}

						.user-registration-message-container {
							margin-bottom: $spacing_20px;

							.user-registration-error {
								li {
									text-align: left;
								}
							}
						}

						&.ur-frontend-form {
							padding: 0;
						}
					}

					// .ur-account-action-link {
					// 	color: $primary_color;
					// 	font-weight: 500;
					// 	position: relative;
					// 	text-decoration: none;

					// 	&::after {
					// 		content: "";
					// 		width: 0;
					// 		height: 2px;
					// 		background: darken($primary_color, 10%);
					// 		position: absolute;
					// 		left: 0;
					// 		bottom: -2px;
					// 		transition: width .2s ease-in-out;
					// 	}

					// 	&:hover {
					// 		color: darken($primary_color, 10%);

					// 		&::after {
					// 			width: 100%;
					// 		}
					// 	}
					// }
				}
			}
		}
	}

	&.vertical {
		padding: $spacing_12px;
		border-radius: $border_radius_16;

		.user-registration-MyAccount {
			&-navigation {
				&--wrapper {
					border-radius: $border_radius_10;
					background: #f8f8fa;
					max-width: 260px;
					width: 100%;
					padding: $spacing_26px $spacing_20px $spacing_16px;
					border: 0;

					@media screen and (max-width: 1199px) {
						max-width: 24%;
					}

					@media screen and (max-width: 992px) {
						max-width: 100%;
					}

					.user-registration-profile-header-nav {
						display: flex;
						gap: $spacing_12px;
						align-items: center;
						margin-bottom: $spacing_24px;
						padding-bottom: $spacing_24px;
						border-bottom: $border_width solid #e2e8f0;

						.user-registration-img-container {
							width: 42px;
							height: 42px;
							border-radius: 50%;
							border: 2px solid white;
							overflow: hidden;

							img {
								width: 100%;
								height: 100%;
							}
						}

						header {
							> h3 {
								margin: 0;
								font-size: 16px;
								line-height: 24px;
								color: #383838;
							}
						}

						.user-registration-MyAccount-header {
							.user-registration-MyAccount-username {
								font-size: 20px;
								line-height: 28px;
								margin-bottom: 0;
								color: #383838;
							}
						}
					}

					ul {
						gap: 2px;

						.user-registration-MyAccount-navigation-link {
							transition: all 0.3s;

							a {
								padding: $spacing_12px $spacing_12px
									$spacing_12px $spacing_20px;
								border-radius: $border_radius_4;
								border-left: 3px solid transparent;
								color: #4e4e4e;
								font-size: 14px;
								font-weight: $medium;
								line-height: 22px;

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

							&:hover {
								a {
									background: #f0f0f0;
									color: var(
										--ur-primary-color,
										$primary_color
									);
								}
							}

							&.is-active {
								a {
									color: var(
										--ur-primary-color,
										$primary_color
									);
									background: var(
										--ur-primary-light,
										$blue-50
									);
								}
							}
						}
					}
				}
			}

			&-content {
				padding: $spacing_24px $spacing_24px 52px 36px;

				@media screen and (max-width: 600px) {
					padding: 28px 24px 20px;
				}

				// &__header {
				// 	display: flex;
				// 	justify-content: space-between;
				// 	align-items: center;
				// }
			}
		}
	}

	&.horizontal {
		.user-registration-MyAccount {
			&-navigation {
				border-bottom: 1px solid $border_color;

				&-link {
					a {
						border-left: 0 !important;
						padding: $spacing_16px $spacing_24px;
						font-size: 14px;
						font-weight: 500;
						line-height: 22px;
						color: #4e4e4e;
						border-bottom: 3px solid $grey-0;
						transition: all 0.3s;

						&:hover {
							color: $primary_color;
							background: $blue-50;
							border-bottom-color: $blue-50;
						}
					}

					&.is-active {
						a {
							border-bottom: 3px solid $primary_color;
							color: $primary_color;
							background: $blue-50;
						}
					}
				}
			}

			&-content {
				padding: $spacing_24px 36px 52px 36px;

				@media screen and (max-width: 600px) {
					padding: 28px 24px 20px;
				}
			}
		}
	}
}

.user-registration-logout-swal2-container {
	.swal2-modal {
		padding: 0px !important;

		&:has(.swal2-confirm),
		&:has(.swal2-deny) {
			width: 400px;
		}

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

			h2 {
				font-family: inherit;
				border-bottom: $border_width solid #d3d3d3;
				padding-bottom: $spacing_16px;
				width: 100%;
				text-align: left;
				margin-bottom: 0;
				color: #222222;
				font-size: 16px;
				font-weight: 500;
				line-height: 24px;
			}
		}

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

		.swal2-actions {
			display: flex;
			flex-direction: row-reverse;
			justify-content: center;
			padding: 18px $spacing_20px;
			gap: $spacing_16px;
			margin-top: $spacing_20px;
			border-radius: 0 0 5px 5px;
			background: #f4f4f4;

			button {
				font-family: inherit;
				width: 45%;
				color: $grey-400;
				font-size: 14px;
				font-weight: 400;
				line-height: 24px;
				margin: 0;
				padding: 6px 12px;

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

				&.swal2-confirm {
					color: $grey-0;
				}

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

// User Registration Toast Message design fixed
body {
	&.user-registration-page {
		.user-registration-membership-notice {
			&__blue {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-right: 12px;
				gap: 16px;
				padding: 10px 20px;

				.user-registration-membership__close_notice {
					padding-left: 0;
					color: #ff4859;
					font-size: 20px;
					line-height: 26px;
				}
			}

			&__message {
				font-size: 14px;
				line-height: 24px;
			}
		}
	}
}

.user-registration-MyAccount-content table.user-registration-email__entries td {
	text-align: left;
}

.rtl
	#user-registration.vertical
	.user-registration-MyAccount-content__header
	h1,
.rtl
	.ur-frontend-form.login
	.ur-form-row
	.ur-form-grid
	.user-registration-form-row
	label,
.rtl .ur-frontend-form .ur-form-row .ur-form-grid label.ur-label,
.rtl .ur-frontend-form .ur-form-row .ur-form-grid legend.ur-label,
.rtl .user-registration-logout-swal2-container .swal2-header .swal2-title,
.rtl
	.user-registration-logout-swal2-container
	.swal2-header
	.swal2-content
	.swal2-content,
.rtl
	.user-registration-MyAccount-content
	table.user-registration-email__entries
	td {
	text-align: right;
}

.rtl
	#user-registration
	.user-registration-MyAccount-content
	.user-registration-membership-content
	.membership-row
	.membership-label {
	min-width: 0px;
}

.user-registration-myaccount-notice-box {
	background: #f4f6ff;
	// border: 1px solid #d6e0ff;
	border-radius: 7px;
	padding: $spacing_20px;
	margin-bottom: $spacing_24px;
	// box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
	position: relative;
	border-left: 4px solid #6669f1;
	text-align: left;
	display: flex;
	flex-direction: column;
	gap: $spacing_12px;

	&--title {
		display: flex;
		align-items: center;
		gap: $spacing_12px;

		&-icon {
			display: flex;

			.notice-icon {
				width: 20px;
				height: 20px;
				color: #6366f1;
			}
		}

		&-text {
			h2 {
				margin: 0 !important;
				font-size: 16px !important;
				line-height: 26px !important;
				font-weight: 600 !important;
				color: #333 !important;
			}
		}
	}

	p {
		color: #444;
		font-size: 15px;
		line-height: 25px;
		margin: 0 !important;

		&.pro-tip,
		&.existing-users {
			display: flex;
			align-items: center;
			gap: $spacing_6px;

			strong {
				font-weight: 700 !important;
			}
		}

		&.pro-tip {
			&::before {
				content: "💡";
			}
		}

		&.existing-users {
			display: block;
			&::before {
				content: "👤";
			}
		}
	}

	strong,
	b {
		font-weight: 600 !important;
	}

	.addon-link {
		color: #475bb2 !important;
		font-weight: 600 !important;
		text-decoration: none !important;

		&:hover {
			text-decoration: underline !important;
		}
	}

	.highlight {
		font-weight: bold;
	}
}

.user-registration-profile-fields {
	.user-registration-profile-header {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;

		.user-registration-img-container {
			position: relative;
			width: 120px !important;
			height: 120px;
			display: flex;
			align-items: center;
			justify-content: center;

			.profile-preview {
				width: 100% !important;
				height: 100% !important;
				max-width: none !important;
				max-height: none !important;
				border-radius: 50%;
				object-fit: cover;
				display: block;
			}

			.user-registration-tips {
				display: none !important;
			}
		}

		header {
			position: relative;
			inset: 0;
			pointer-events: none;

			.button-group {
				position: absolute;
				left: 30px;
				bottom: 6px;
				pointer-events: auto;

				.user_registration_profile_picture_upload {
					position: relative;
					width: 32px;
					height: 32px;
					padding: 0 !important;
					margin: 0;
					border-radius: 50%;
					border: $border_width solid #edeff7;
					background: #edeff7;
					// box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
					box-shadow: none;
					cursor: pointer;
					font-size: 0;
					line-height: 0;
					color: transparent;

					&:hover {
						transform: translateY(-1px);
					}
				}
			}
		}
	}
}

// .user-registration-profile-fields__field-wrapper {
// 	.ur-form-grid {
// 		// width: 100% !important;
// 		// display: flex;
// 		// flex-wrap: wrap;
// 		// gap: 16px;
// 		gap: $spacing_24px;

// 		.ur-field-item {
// 			// flex: 0 0 calc(50% - 8px);
// 			flex: 0 0 calc(50% - 16px);
// 			min-width: 0;

// 			.ur-label {
// 				margin: 0;
// 				margin-bottom: 8px;
// 			}

// 			input {
// 				min-height: 38px;
// 				padding: 0 12px;
// 				margin-bottom: 0;
// 				border-color: #e1e1e1;
// 				background: #fff;
// 				color: #383838;

// 				&:disabled {
// 					border-color: #dcdcde;
// 					background: #f6f7f7;
// 					opacity: .6;
// 					pointer-events: none;
// 				}
// 			}
// 		}

// 		.ur-field-item:empty {
// 			display: none;
// 		}

// 		@media (max-width: 768px) {
// 			.ur-field-item {
// 				flex-basis: 100%;
// 			}
// 		}

// 		.field-user_pass {
// 			display: none;
// 		}
// 	}
// }

.user-registration-MyAccount-content__header {
	h1 {
		margin: 0;
		text-align: left;
		color: #16181a;
		font-size: 20px;
		font-weight: 500;
		line-height: 30px;
	}

	&-buttons {
		display: flex;
		gap: 10px;
		flex: 0 0 40%;
	}
}

.membership-row-btn-container {
	.dropdown {
		position: absolute;
		right: 0;
		top: 28px;
		background: #fff;
		border: 1px solid #ccc;
		border-radius: 6px;
		display: flex;
		flex-direction: column;
		min-width: 140px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
		z-index: 50;

		&.hidden {
			display: none;
		}

		a {
			padding: 10px;
			text-decoration: none;
			color: #333;
			display: flex;
			align-items: center;
			gap: 6px;

			&:hover {
				background: #f3f3f3;
			}
		}
	}
}

.user-registration-MyAccount {
	.hidden {
		display: none !important;
	}
}