@import 'variables/variables';

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

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

		.user-registration-MyAccount-navigation {
			background: $color_gray_five;
			width: 25%;

			ul {
				flex-direction: column;
				flex-wrap: nowrap;

				.user-registration-MyAccount-navigation-link {
					&.is-active {
						a {
							background: $color_gray_four;
							border-color: $primary_color;
						}
					}
				}
			}
		}

		.user-registration-MyAccount-content {
			width: 75%;

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

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

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

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

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

			ul {
				justify-content: center;

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

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

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

			.user-registration-profile-header {
				.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;
				}
			}
		}
	}

	// Privacy Tab Design Fixes

	&.horizontal {
		.user-registration-MyAccount-content {
			// text-align: left;
		}
	}

	.user-registration-MyAccount-content {
		// text-align: left;
		padding: 40px 40px 40px 48px;

		@media (max-width: 991px) {
			padding: 36px 30px;
		}

		.ur-frontend-form {
			padding: 0 !important;

			&: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-top: $spacing_24px;
						margin-bottom: 0;
					}
				}
			}


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

			.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;
						// justify-content: flex-end;
						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 .3s ease-in-out;
									letter-spacing: .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: .1px;
									transition: all .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: .1px;
									transition: all .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;
										// border-top: 2px solid #F25656;
										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 .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"] {
								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 .3s ease-in-out;

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

//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-color: #475BB2;
			}

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

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

		.slider {
			position: absolute;
			cursor: pointer;
			inset: 0;
			background-color: #DFE1EA;
			transition: .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: .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 {
	.tooltipster-box {
		background: $grey-400 !important;
		padding: $spacing_4px $spacing_8px;
		border-radius: $border_radius_4;
		border-color: $grey-400;
	}
}