@import "variables/variables";
@import "mixins/mixins";
@import "components/button", "components/typography", "components/toggle";

// User Registration Global Settings CSS
* {
	box-sizing: border-box;
}

body {
	@media screen and (max-width: 782px) {
		min-width: 600px;
	}
}

// ToolTip CSSs
.tooltipster-sidetip {
	max-width: 240px !important;
	width: 100% !important;
	height: auto !important;

	.tooltipster-box {
		background-color: $grey-0 !important;
		// max-width: 220px;
		max-width: 100%;
		box-shadow: 0px 6px 24px 0px rgba(10, 10, 10, 0.1);
		padding: $spacing_16px $spacing_18px;

		.tooltipster-content {
			font-size: 14px;
			line-height: 20px;
			color: $grey-500;
			padding: 0;
			word-break: normal;

			a {
				color: $primary_color !important;

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

	&.tooltipster-base {
		.tooltipster-arrow {
			.tooltipster-arrow-uncropped {
				.tooltipster-arrow-border {
					border-top-color: $grey-0 !important;
					border-bottom-color: $grey-0 !important;
				}
			}
		}
	}
}

#wpcontent {
	padding-left: 0;

	@media screen and (max-width: 782px) {
		padding-left: 0 !important;
	}

	.wrap {
		&.user-registration {
			margin: -$spacing_24px 0 0;
		}

		.user-registration-header {
			margin: 0;
		}
	}
}

.user-registration-settings {
	display: flex;
	overflow-x: hidden;
	border-bottom: $border_width solid $border_color;
	border-radius: $border_radius_4;
	margin-bottom: $spacing_12px;

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

	&-wrapper {
		display: flex;
		flex: 1;

		@media screen and (max-width: 1180px) {
			border-bottom: $border_width solid $border_color;
		}

		.user-registration-header {
			width: 100%;
			max-width: 300px;
			padding: $spacing_24px 0 0;
			background: $grey-0;
			border-right: $border_width solid $border-color;
			// height: calc(100svh + 58px);
			min-height: 100%;
			max-height: 100%;
			height: calc(100dvh + 42px);

			&.collapsed {
				max-width: 60px;

				.user-registration-header--top {
					padding: 0 $spacing_12px;

					&-logo {
						img {
							width: 40px;
						}
					}

					.ur-search--top-settings {
						cursor: pointer;

						input {
							padding: 0;
							cursor: pointer;
							transition: all 0.3s ease-in-out;

							&::placeholder {
								font-size: 0;
							}
						}

						.user-registration-search-icon {
							svg {
								right: unset;
								left: 50%;
								transform: translate(-50%, -50%);
								transition: all 0.3s ease-in-out;
							}
						}

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

								~ .user-registration-search-icon svg {
									fill: $primary_color;
								}
							}
						}
					}

					.ur-search--top-toggle {
						justify-content: center;

						label {
							display: none;
						}
					}
				}

				.user-registration-header--nav {
					.ur-nav__link {
						justify-content: center;
						min-height: 50px;
						padding: 0;

						&-label {
							display: none;
						}
					}

					.ur-nav-icon {
						transform: rotate(180deg);
					}
				}
			}

			&--top {
				padding: 0 $spacing_20px;

				&-logo {
					text-align: center;
					margin-bottom: $spacing_28px;

					img {
						border: $border_width solid $border-color;
						width: 70px;
						border-radius: 50%;
					}
				}

				.ur-search--top-toggle {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding-left: $spacing_12px;
					padding-right: $spacing_12px;
					margin-bottom: $spacing_20px;

					label {
						font-weight: $semi_bold;
						font-size: 14px;
						line-height: 150%;
						color: $grey-400;
					}

					.user-registration-toggle-form {
						width: 32px;
						height: 16px;

						input {
							width: 32px;
							height: 16px;

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

						.slider {
							&::before {
								width: 12px;
								height: 12px;
								left: $spacing_2px;
								bottom: $spacing_2px;
							}
						}
					}
				}
			}

			.ur-nav-tab-wrapper {
				display: flex;
				flex-direction: column;
				margin: 0;
				overflow: unset;

				.ur-nav__tab-item {
					display: flex;
					flex-direction: column;

					&:has(.is-active) {
						.ur-scroll-ui {
							position: relative;
							overflow: unset;
							display: flex;
							gap: $spacing_20px;
							border-left: 4px solid $primary_color;

							.subsubsub {
								padding: $spacing_12px $spacing_14px $spacing_12px 52px;
								margin: 0;
								gap: $spacing_4px;
								background: #f4f4f4;
								position: relative;

								&::after {
									content: "";
									background: #f4f4f4;
									width: 8px;
									height: 100%;
									position: absolute;
									top: 0;
									right: -$spacing_4px;
									opacity: 1;
									transition: all 0.3s ease-in-out;
								}

								&.ur-scroll-ui__items {
									&::before {
										content: "";
										position: absolute;
										left: 26px;
										top: 30px;
										width: 1.5px;
										height: calc(100% - 16px - 42px);
										background: #e1e1e1;
									}

									li {
										&.current {
											&::before {
												background: $primary_color;
											}
										}

										&::before {
											left: -25px;
											background: #e1e1e1;
										}
									}
								}

								a {
									font-weight: $medium;

									&:hover {
										color: $primary_color;
									}

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

					&:last-child {
						.ur-nav__link {
							border-bottom: $border_width solid $border-color;
						}
					}
				}

				.ur-nav__link {
					font-weight: $regular;
					line-height: 150%;
					color: $grey-400;
					padding: $spacing_14px $spacing_20px;
					background: transparent;
					border: 0;
					border-top: $border_width solid $border-color;
					position: relative;
					display: flex;
					align-items: center;
					gap: 15px;
					cursor: pointer;

					&-label {
						> p {
							font-weight: $medium;
							font-size: 15px;
							margin: 0;
							line-height: 21px;
							color: #4e4e4e;
							transition: all 0.3s ease-in-out;
						}

						span.ur-nav__link-label {
							> :not(svg) {
								opacity: 0.5;
							}
						}
					}

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

					&:not(#ur-settings-collapse)::before {
						content: "";
						background: $primary_color;
						width: 4px;
						height: 100%;
						position: absolute;
						top: 0;
						left: 0;
						opacity: 0;
						transition: all 0.3s ease-in-out;
					}

					svg {
						width: 18px;
						height: 18px;
					}

					&.ur-nav-premium {
						cursor: not-allowed;

						&:hover {
							background: transparent;
							border-radius: 0;
							color: $grey-400;

							.ur-nav__link-label {
								p {
									color: $grey-400;
								}
							}
						}

						&::before,
						&::after {
							content: none !important;
						}

						span {
							&.ur-nav__link-icon {
								opacity: 0.5;
							}

							&.ur-nav__link-label {
								svg {
									path {
										stroke: none;
									}
								}

								> :not(svg) {
									opacity: 0.5;
								}
							}
						}

						.ur-tooltip {
							display: none;
							flex-direction: column;
							align-items: flex-end;
							gap: $spacing_10px;
							position: absolute;
							padding: $spacing_16px $spacing_18px;
							border-radius: $border_radius_4;
							box-shadow: 0px 6px 24px 0px rgba(10, 10, 10, 0.1);
							background: $grey-0;
							color: $grey-500;
							font-size: 14px;
							line-height: 20px;
							text-align: center;
							transition: 0.3s opacity;
							width: 200px;
							white-space: pre-line;
							text-align: left;
							top: 50%;
							right: -200px;
							z-index: 10;
							transform: translateY(-50%);
							border-color: #475bb2;

							&::after {
								content: "";
								position: absolute;
								border-right: 12px solid #e9e9e9;
								border-top: 12px solid transparent;
								border-bottom: 12px solid transparent;
								top: 50%;
								left: -$spacing_12px;
								transform: translateY(-50%);
							}

							a {
								text-decoration: none;
								border: $border_width solid $primary_color;
								padding: $spacing_6px $spacing_12px;
								background: $primary_color;
								border-radius: $border_radius_4;
								color: $grey-0;
								font-weight: $regular;
								letter-spacing: 0.3px;
								transition: all 0.3s ease-in-out;

								&:hover {
									background: $primary_color;
									border-color: $primary_color;
									color: $grey-0;
								}
							}
						}

						&:hover {
							.ur-tooltip {
								display: flex;
							}
						}
					}

					&-icon {
						display: flex;

						svg {
							height: 20px;
							width: 20px;
						}
					}

					&:hover,
					&.is-active {
						.ur-nav__link-icon {
							svg {
								path {
									fill: $primary_color;
								}
							}
						}

						.ur-nav__link-label {
							p {
								color: $primary_color;
							}

							svg {
								path {
									stroke: $primary_color;
								}
							}
						}
					}

					&-label {
						display: flex;
						justify-content: space-between;
						flex-direction: row;
						width: 100%;
						align-items: center;
						font-size: 15px;
						font-weight: $medium;
					}

					.ur-nav-icon {
						display: flex;

						img {
							width: 20px;
							height: 20px;
						}
					}

					&:hover {
						.ur-nav-icon {
							img {
								filter: invert(0%) sepia(0%) saturate(0%) hue-rotate(324deg) brightness(96%) contrast(104%);
							}
						}

						.ur-nav__link-label {
							color: #222;
						}
					}

					&:hover,
					&.is-active {
						// background: #f4f4f4;
						background: $white;
						border-radius: 0;
						color: $primary_color;

						&:not(#ur-settings-collapse)::before {
							opacity: 1;
						}
					}

					&.is-active {
						&:not(#ur-settings-collapse)::after {
							opacity: 1;
							background: #f4f4f4;
						}
					}
				}
			}
		}
	}

	&-sidebar-container {
		display: flex;
		gap: $spacing_32px;
		flex-direction: column;
		padding: $spacing_24px 0 $spacing_26px 0;
		transition: all 0.3s;
		width: 340px;
		max-width: 100%;
		border-left: $border_width solid $border_color;

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

		.user-registration-settings-sidebar {
			display: flex;
			flex-direction: column;
			gap: $spacing_20px;
			padding: 0 $spacing_24px;

			h2 {
				color: $grey-400;
				font-size: 18px;
				font-weight: $semi-bold;
				line-height: 140%;
				margin: 0;
				padding-bottom: $spacing-16px;
				margin-bottom: $spacing_20px;
				border-bottom: $border_width solid $border-color;
			}

			p {
				margin: 0;
				color: $grey-400;
				font-size: 15px;
				font-weight: $regular;
				line-height: 24px;
			}

			&__header {
				border-bottom: $border_width solid #e1e1e1;
				padding-bottom: $spacing_16px;

				h3 {
					color: $grey-500;
					font-size: 20px;
					font-weight: $semi-bold;
					line-height: 30px;
					margin: 0px;
				}
			}

			&__body {
				display: flex;
				flex-direction: column;
				gap: $spacing_20px;

				&--list {
					margin: 0;
					display: flex;
					flex-direction: column;
					gap: $spacing-16px;

					&.normal {
						.user-registration-settings-sidebar__body--list-item {
							gap: $spacing_8px;
						}
					}

					&-item {
						display: flex;
						color: $grey-400;
						font-size: 15px;
						font-weight: $regular;
						line-height: 24px;
						margin-bottom: 0;
						gap: $spacing_12px;

						&.card {
							padding: $spacing_12px $spacing-16px;
							border-radius: 6px;
							background: $white;
							border: none;
							margin-top: 0px;

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

						&.completed {
							text-decoration: line-through;
							color: #999999;
						}

						svg {
							position: relative;
							top: 2px;
							width: 20px;
							height: 20px;
						}

						> span {
							flex: 1;
						}

						.button {
							border-radius: 3px;
							border: $border_width solid $primary_color;
							background: $primary_color;
							padding: $spacing_5px $spacing_8px;
							display: block;
							color: $white;
							font-size: 14px;
							font-style: normal;
							font-weight: $medium;
							line-height: 24px;
							text-decoration: none;
							letter-spacing: 0.05px;
							width: max-content;
							margin: $spacing_20px 0;
							transition: all 0.3s;

							&:hover {
								background: #2e44a1;
								border-color: #2e44a1;
							}
						}

						a:not(.button) {
							text-decoration: none;

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

							svg {
								position: relative;
								top: $spacing_6px;
								margin-left: 2px;
							}
						}
					}
				}
			}

			&__footer {
				display: flex;
				flex-direction: column;
				gap: 32px;

				&--card {
					background-color: #6969de;
					padding: $spacing_40px;
					border-radius: 12px;
					display: flex;
					gap: $spacing_24px;
					flex-direction: column;
					align-items: center;

					@media screen and (max-width: 1180px) {
						max-width: 300px;
					}

					> p {
						font-size: 18px;
						line-height: 27px;
						font-weight: $semi-bold;
						text-align: center;
						color: $white;
						padding: 0px $spacing_20px;
						position: relative;

						&::after {
							content: "";
							background-image: url("../images/pro-banner-highlight.png");
							background-repeat: no-repeat;
							background-position: center;
							background-size: 100%;
							position: absolute;
							width: 36px;
							height: 10px;
							right: 70px;
							bottom: -$spacing_4px;
						}
					}

					a {
						min-height: 40px;
						height: 40px;
						text-decoration: none;
						padding: 0 $spacing_12px;
						background: $white;
						color: #3f4d8a;
						font-weight: $semi-bold;
						transition: all 0.3s;
						width: 100%;
						text-align: center;
						border-radius: $border_radius_5;
						font-size: 14px;
						align-content: center;
						line-height: 24px;

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

.user-registration-settings-container {
	flex: 1;
	display: flex;
	flex-direction: column;
	padding: $spacing_24px;
	padding-top: 0;
	background: #f4f4f4;
	margin-top: 0 !important;

	.user-registration-options-header {
		padding-top: $spacing_24px;

		&--top {
			display: flex;
			align-items: center;
			padding-bottom: $spacing_24px;
			border-bottom: $border_width solid $border_color;

			h3 {
				margin: 0;
				font-weight: $semi_bold;
				font-size: 26px;
				line-height: 120%;
				color: $grey-800;
			}

			p.submit {
				display: none;
				margin-top: 0;
			}
		}

		&--bottom {
			margin-top: $spacing_28px;

			ul {
				display: flex;
				align-items: center;
				gap: $spacing_12px;
				width: 100%;

				li {
					a {
						font-weight: $medium;
						font-size: 14px;
						line-height: 18px;
						color: $grey-400;
						padding: 0 $spacing_4px;
						position: relative;
						padding-bottom: $spacing_16px;
						transition: all 0.3s ease-in-out;

						&::after {
							content: "";
							background: $primary_color;
							position: absolute;
							width: 100%;
							height: 2px;
							border-radius: $border_radius_11;
							bottom: 0;
							left: 0;
							opacity: 0;
							transition: all 0.3s ease-in-out;
						}

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

						&:hover,
						&.current,
						&.active {
							color: $primary_color;
						}

						&.current,
						&.active {
							&::after {
								opacity: 1;
							}
						}
					}
				}
			}

			.ur-scroll-ui {
				&__scroll-nav {
					padding-bottom: $spacing_28px;
				}
			}
		}
	}

	.user-registration-options-container {
		display: flex;
		flex-direction: column;
		gap: $spacing_24px;

		p.ur-p-tag {
			margin-bottom: $spacing_24px;
			padding: $spacing_10px $spacing_12px $spacing_10px $spacing_16px;
			// background: rgba(71, 91, 178, 0.04);
			// border: $border_width solid $primary_color;
			font-weight: $regular;
			color: $grey-400;
			border-radius: $border_radius_4;
			font-size: 14px;
			line-height: 22px;
			font-style: normal;
			border-left: 4px solid $primary_color;
			background: #f1f2f9;

			strong {
				font-weight: $semi_bold;
			}

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

		.ur-searched-settings-focus {
			border: 2px solid $primary_color;
			border-radius: $border_radius_5;
			padding: $spacing_10px;
		}

		// Success Message CSS
		.notice {
			max-width: 680px;
			padding: $spacing_12px $spacing_12px $spacing_12px $spacing_16px;
			border: 0;
			border-left: 3px solid;
			margin: 0;
			margin-bottom: $spacing_24px;
			background: $greenLight;
			box-shadow: none;

			@media (min-width: 1440px) {
				max-width: 900px;
			}

			&.success {
				border-left-color: $green;
				background: $greenLight;
			}

			&.error {
				border-left-color: $red;
				background: $redLight;
			}

			p {
				margin: 0;
				padding: 0;
				color: $grey-300;

				strong {
					font-weight: $regular;
				}
			}
		}

		.user-registration-integrations {
			border-radius: $border_radius_3;
			background: #fafafa;
			border: $border_width solid #ced4da;
			padding: $spacing_10px $spacing_20px;
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			justify-content: space-between;
			margin-bottom: $spacing_10px;
		}

		.integration-header-info {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.integration-detail {
			display: flex;
			align-items: center;
			gap: $spacing_14px;

			.integration-status {
				position: relative;

				&::before {
					content: "";
					position: absolute;
					width: 8px;
					height: 8px;
					background: $border-color;
					border-radius: 1px;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
				}

				&::after {
					content: "";
					display: block;
					width: 16px;
					height: 16px;
					border: $border_width solid $border-color;
					border-radius: $border_radius_2;
				}

				&.ur-integration-account-connected {
					&::before {
						background: #4cc741;
					}

					&::after {
						border-color: #4cc741;
					}
				}
			}
		}

		.logo {
			width: 50px;
			height: 50px;
			flex: 0 0 50px;
			display: flex;
			overflow: hidden;
			margin: 0;
			border-radius: $border_radius_4;
			align-items: center;
			border: $border_width solid $border_color;

			img {
				width: 100%;
				display: block;
			}
		}

		.ur-captcha-settings-header {
			img {
				width: 75% !important;
				margin-left: 5px !important;
			}
		}

		.integration-info {
			margin-right: $spacing_20px;
		}

		.integration-action {
			background: $grey-0;
			border: $border_width solid $grey-50;
			border-radius: $border_radius_3;
			width: 28px;
			height: 28px;
			display: flex;
			align-items: center;
			justify-content: center;
			transition: all 0.3s ease-in-out;

			svg {
				stroke: $grey-300;
				width: 22px;
				height: 22px;
				transition: all 0.3s ease-in-out;
			}
		}

		// General Settings
		.user-registration-card {
			padding: $spacing_20px $spacing_24px $spacing_22px;
			background: $grey-0;
			border: $border_width solid $border-color !important;
			// border-radius: $border_radius_7;
			background: $white;
			margin-top: 0 !important;
			max-width: 100%;
			position: relative;

			border-radius: 7px;
			// padding: 28px 32px 32px;

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

			// p.ur-p-tag:last-of-type {
			// 	margin-bottom: 0;
			// }

			&:has(.ur-upgrade--link) {
				p.ur-p-tag {
					margin-bottom: 0;
				}
			}

			&.ur-captcha-settings,
			&.ur-integration-settings {
				&:has(.active) {
					border-color: $primary_color;
				}

				.user-registration-card__header {
					&:not(.active) {
						border-bottom: 0 !important;
					}
				}
			}

			&:has(.integration-header-info) {
				max-width: 100%;
				padding: 0 $spacing_20px 0 $spacing_20px;
				margin-bottom: 0 !important;

				&.active {
					@media (max-width: 767px) {
						padding-bottom: $spacing_20px;
					}
				}
			}

			.integration-header-info {
				&:not(.active) {
					border-bottom: 0 !important;
				}
			}

			&:has(.active) {
				@media (max-width: 767px) {
					padding-bottom: $spacing_20px;
				}
			}

			&.pro-options {
				opacity: 0.4;

				&::after {
					content: "+";
					background-repeat: no-repeat;
					background-size: 100%;
					background-position: center;
					position: absolute;
					width: 24px;
					height: 24px;
					top: $spacing_16px;
					right: $spacing_16px;
				}
			}

			&__title {
				font-size: 18px;
				line-height: 26px;
				font-weight: $semi-bold;
				color: #383838;
			}

			&__header {
				margin-bottom: $spacing_24px;
				padding: 0 0 $spacing_16px;
				position: relative;
				border-bottom: $border_width solid $border-color !important;

				&-wrapper {
					display: flex;
					justify-content: space-between;
				}

				.user_registration_smart_tags_used {
					display: inline-flex;
					align-items: center;
					gap: 6px;
					padding: 4px 10px;
					// min-width: 90px;
					border: 1px solid transparent;
					border-radius: 6px;
					font-size: 14px;
					line-height: 20px;
					text-decoration: none;
					transition: all 0.2s ease;
					color: #383838;

					span:first-child {
						text-decoration: none !important;
						font-weight: 500;
						opacity: 0.8;
						transition: color 0.2s ease,
						opacity 0.2s ease;
					}

					&:focus,
					&:hover {
						background-color: transparent;
						color: #222222;
						box-shadow: none;
						outline: none;

						span:first-child {
							text-decoration: underline !important;
							text-decoration-style: solid;
							text-underline-offset: 5px;
							text-decoration-color: #383838;
							text-decoration-thickness: 1px;
						}
					}

					.dashicons {
						width: 16px;
						height: 16px;

						&::before {
							content: none;
						}

						&::after {
							content: "";
							// background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ff8c39' viewBox='0 0 24 24'%3E%3Cpath d='M2 19V5a3 3 0 0 1 3-3h6a1 1 0 1 1 0 2H5a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-6a1 1 0 1 1 2 0v6a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3Z'/%3E%3Cpath d='M20.293 2.293a1 1 0 1 1 1.414 1.414l-9 9a1 1 0 1 1-1.414-1.414l9-9Z'/%3E%3Cpath d='M20 9V4h-5a1 1 0 1 1 0-2h6a1 1 0 0 1 1 1v6a1 1 0 1 1-2 0Z'/%3E%3C/svg%3E");
							background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23383838' viewBox='0 0 24 24'%3E%3Cpath d='M2 19V5a3 3 0 0 1 3-3h6a1 1 0 1 1 0 2H5a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-6a1 1 0 1 1 2 0v6a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3Z'/%3E%3Cpath d='M20.293 2.293a1 1 0 1 1 1.414 1.414l-9 9a1 1 0 1 1-1.414-1.414l9-9Z'/%3E%3Cpath d='M20 9V4h-5a1 1 0 1 1 0-2h6a1 1 0 0 1 1 1v6a1 1 0 1 1-2 0Z'/%3E%3C/svg%3E");
							background-repeat: no-repeat;
							background-size: 100%;
							background-position: center;
							display: block;
							width: 16px;
							height: 16px;
						}
					}
				}

				// Integration Settings
				&.integration-header-info {
					padding: $spacing_16px 0 !important;
					border: 0;
					margin-bottom: 0;
					cursor: pointer;

					&.active {
						border-bottom: $border_width solid $border_color;
						padding-bottom: $spacing_18px;

						.integration-action {
							border-color: $primary_color;

							svg {
								stroke: $primary_color;
								transform: rotate(-180deg);
							}
						}
					}
				}

				&-wrapper {
					display: flex;
					align-items: center;
					gap: 8px;

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

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

			// Integration Settings
			&.integration-header-info {
				padding: $spacing_16px 0 !important;
				border: 0;
				margin-bottom: 0;
				cursor: pointer;

				&.active {
					border-bottom: $border_width solid #dee0e9;
					padding-bottom: $spacing_18px;

					.integration-action {
						border-color: $primary_color;

						svg {
							stroke: $primary_color;
							transform: rotate(-180deg);
						}
					}
				}
			}

			&__body {
				padding-left: 0;
				padding-right: 0;

				.ur-toggle-section {
					.user-registration-toggle-form {
						width: 32px;
						height: 16px;

						input[type="checkbox"] {
							width: 32px;
							height: 16px;
						}

						.slider {
							&::before {
								width: 12px;
								height: 12px;
								bottom: 2px;
								left: 2px;
							}
						}

						&:has(input.urcr-advance-logic-toggle) {
							display: flex;
							align-items: center;
							gap: 8px;
						}
					}
				}

				// Integration Settings
				&.integration-body-info {
					padding: $spacing_20px 0 !important;

					.nav-tab-inside {
						> div {
							display: block;
						}
					}

					.postbox {
						padding: 0 !important;
						border: 0 !important;
						box-shadow: none;
						max-width: 100% !important;
						margin-bottom: $spacing_28px;
						border-radius: $border_radius_7 !important;

						.hndle {
							border-bottom: 0;
							padding: 0 !important;
							margin-bottom: $spacing_20px !important;
							font-size: 15px !important;
						}

						.inside {
							.ur-form-row {
								display: flex;
								align-items: center;
								justify-content: space-between;
								gap: $spacing_24px;

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

								.ur-form-group {
									width: 50%;

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

									.ur-label {
										line-height: 120%;
										color: $grey-400;
									}

									.ur-input {
										padding: $spacing_8px $spacing_10px;
										background: $grey-0;
										border: $border_width solid $border-color;
										border-radius: $border_radius_3;
										height: 38px;

										&::placeholder {
											color: $grey-100;
											font-size: 14px;
											line-height: 150%;
											font-weight: $regular;
										}
									}
								}
							}
						}

						li {
							display: flex;
							align-items: center;
							justify-content: space-between;
							padding: $spacing_20px;
							margin: 0;
							gap: $spacing_16px;

							&:nth-child(even) {
								background: $grey-0;
							}

							&:last-child {
								border-radius: 0 0 $border_radius_7 $border_radius_7;
							}

							@media (max-width: 767px) {
								flex-wrap: wrap;
							}
						}

						.ur-integration-connected-accounts {
							margin: 0;
							border: $border_width solid $border-color;
							border-radius: $border_radius_7;

							&--label {
								width: 300px;

								@media (max-width: 1199px) {
									width: 150px;
								}

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

							&--date {
								display: flex;
								align-items: center;
								gap: $spacing_6px;
								margin-left: -260px;

								@media (max-width: 1199px) {
									margin-left: -90px;
								}

								@media (max-width: 991px) {
									margin-left: 0;
								}

								&::before {
									content: "";
									display: block;
									min-width: 8px;
									width: 8px;
									height: 8px;
									background: #13bd6f;
									border-radius: 50%;
								}
							}

							&--disconnect {
								display: flex;

								.disconnect {
									padding: $spacing_10px $spacing_14px;
									background: #dc3545;
									border: $border_width solid #dc3545;
									border-radius: $border_radius_3;
									color: $grey-0;
									letter-spacing: 0.2px;
									transition: all 0.3s ease-in-out;

									&:hover {
										background: #b31b2a;
										border-color: #b31b2a;
									}
								}
							}
						}
					}

					#mailchimp_accounts {
						margin-left: 0;
					}
				}

				// Emails Settings
				table {
					&.form-table {
						.ur_emails_wrapper {
							padding: 0;
						}
					}

					&.ur_emails {
						// border-radius: $border_radius_5;
						// overflow: hidden;
						// border-color: $border-color;
						border: 0;

						thead {
							th {
								padding: $spacing_12px $spacing_16px !important;
								background: $primary_color;
								color: $grey-0;
								font-weight: $medium;
								font-size: 15px;
								line-height: 25px;
								letter-spacing: 0.03px;

								&:first-child {
									width: 60%;
								}

								&:nth-child(2),
								&:last-child {
									width: 20%;
									text-align: center;
								}

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

						tbody {
							tr {
								&:nth-child(even) {
									background: #f8f8fa;
								}

								.ur-email-settings-table {
									padding: $spacing_12px $spacing_16px;
									vertical-align: middle;

									&:nth-child(2),
									&:last-child {
										text-align: center;
									}

									&:nth-child(2) {
										padding-left: 0;
										padding-right: 0;

										label {
											font-size: 76%;
										}
									}

									a {
										font-weight: $regular;
										font-size: 14px;
										line-height: 22px;
										color: $primary_color;

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

										&.button {
											border: 0;
											background: transparent;
											box-shadow: none;
											color: $grey-300;
											display: flex;
											align-items: center;
											justify-content: center;
											padding: 0;
											width: 33px;
											margin: 0 auto;

											span {
												font-size: 18px;
											}

											&:hover {
												border: $border_width solid $primary_color;
												background: $blue-50;

												span {
													color: $primary_color;
												}
											}
										}
									}

									> label {
										padding: $spacing_4px $spacing_8px;
										border-radius: 100px;
										font-weight: $regular !important;
										font-size: 12px;
										line-height: 150%;
										color: $grey-0 !important;

										&:has(.ur-toggle-section) {
											padding: 0;
											background: transparent;
											border-radius: 0px;
										}

										&.ur-email-status {
											background: #4cc741;
										}

										&.ur-email-receiver {
											color: $grey-400 !important;
											font-weight: $semi-bold !important;
										}
									}

									.user-registration-help-tip {
										margin-left: $spacing_6px;
										color: $grey-100;

										&::after {
											content: "";
											background-image: url("../images/settings-icons/information.svg") !important;
										}
									}

									.ur-toggle-section {
										justify-content: center;
									}
								}
							}
						}
					}
				}

				.user-registration-global-settings {
					display: flex;
					gap: $spacing_20px;
					align-items: center;
					margin-bottom: $spacing_28px;

					&:has(.description),
					&:has(.error),
					&:has(textarea) {
						align-items: baseline;
					}

					&:has(.ur-radio-group-list),
					&:has(.wp-editor-wrap) {
						align-items: flex-start;
					}

					@media (max-width: 1199px) {
						flex-direction: column;
						gap: $spacing_10px;
						align-items: flex-start;
					}

					&.urcr_content_restriction_enable {
						display: block;

						.user-registration-global-settings--field {
							flex-direction: unset;
							gap: $spacing_4px;
							margin: $spacing_8px 0 $spacing_24px;
						}
					}

					textarea {
						border-color: $border-color;
						padding: $spacing_8px $spacing_10px;
					}

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

					label {
						position: relative;
						vertical-align: top;
						line-height: 24px;
						font-weight: $medium;
						color: $grey-400;
						font-size: 14px;
						max-width: 300px;
						width: 100%;
						margin-bottom: 0;

						span {
							// color: #bababa;

							&.user-registration-help-tip {
								font-size: 16px;
								top: 3px;
								left: 4px;

								&::after {
									content: "";
									background-image: url("../images/settings-icons/information.svg") !important;
									background-repeat: no-repeat !important;
									background-size: 100% !important;
									background-position: center;
									display: block;
									width: 8px;
									height: 8px;
									cursor: pointer;
									padding: $spacing_4px;
									background: transparent;
									border-radius: $border_radius_3;
								}

								&:hover {
									&::after {
										filter: brightness(0) saturate(100%) invert(33%) sepia(19%) saturate(2330%) hue-rotate(195deg) brightness(100%) contrast(87%);
									}
								}
							}
						}
					}

					&--field {
						display: flex;
						flex-direction: column;
						gap: $spacing_12px;
						line-height: 1.3;
						vertical-align: middle;
						flex: 1;

						@media (max-width: 1199px) {
							flex: auto;
							width: 100%;
						}

						textarea,
						select {
							min-width: 100% !important;
						}

						.user_registration_send_email_test {
							width: 10%;
						}

						.error {
							box-shadow: none;
							padding: 0 !important;
							color: #f34c4c;
							font-size: 13px;
							font-weight: $regular;
							line-height: 20px;
							display: flex;
							align-items: center;
							gap: 8px;
							margin: 0;
							border: 0;

							&::before {
								content: "";
								background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23F34C4C' viewBox='0 0 24 24'%3E%3Cpath d='M20.182 12a8.182 8.182 0 1 0-16.364 0 8.182 8.182 0 0 0 16.364 0ZM22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Z'/%3E%3Cpath d='M11.091 12V8.363a.91.91 0 1 1 1.818 0V12a.91.91 0 1 1-1.818 0Zm.917 2.727.092.005a.91.91 0 0 1 0 1.809l-.092.004H12a.91.91 0 1 1 0-1.818h.008Z'/%3E%3C/svg%3E");
								background-repeat: no-repeat;
								background-size: 100%;
								background-position: center;
								width: 18px;
								height: 18px;
								position: relative;
								top: 1px;
							}

							&.settings-page-notice {
								color: #475bb2 !important;

								&::before {
									content: "";
									background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23475bb2' viewBox='0 0 24 24'%3E%3Cpath d='M20.182 12a8.182 8.182 0 1 0-16.364 0 8.182 8.182 0 0 0 16.364 0ZM22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Z'/%3E%3Cpath d='M11.091 12V8.363a.91.91 0 1 1 1.818 0V12a.91.91 0 1 1-1.818 0Zm.917 2.727.092.005a.91.91 0 0 1 0 1.809l-.092.004H12a.91.91 0 1 1 0-1.818h.008Z'/%3E%3C/svg%3E");
									background-repeat: no-repeat;
									background-size: 100%;
									background-position: center;
									width: 18px;
									height: 18px;
									position: relative;
									top: 1px;
								}
							}

						}

						&:has(.error):not(:has(.error.settings-page-notice))  {
							.select2-container--focus {
								.select2-selection {
									border-color: #f34c4c !important;
								}
							}

							.select2-selection__rendered {
								border: 0 !important;
							}
						}
						&:has(.error.settings-page-notice) {
							.select2-container--focus {
								.select2-selection {
									border-color: #475bb2 !important;
								}
							}

							.select2-selection__rendered {
								border: 0 !important;
							}
						}

						&:has(.error.settings-page-notice) {
							.select2-container--focus {
								.select2-selection {
									border-color: #475bb2 !important;
								}
							}

							.select2-selection__rendered {
								border: 0 !important;
							}
						}

						.ur-toggle-section {
							.user-registration-toggle-form {
								input[type="checkbox"] {
									min-width: 100% !important;
								}
							}
						}

						.ur-radio-group-list {
							display: flex;
							flex-wrap: wrap;
							gap: $spacing_16px;
							margin: 0;

							&--item {
								max-width: 120px;
								height: auto;
								border: $border_width solid $border-color;
								border-radius: $border_radius_5;
								text-align: center;
								padding: $spacing_6px;
								align-items: center;
								display: flex;
								margin-bottom: 0;
								cursor: pointer;

								&.active {
									label {
										color: $primary_color;
										opacity: 1;
									}

									border-color: $primary_color;
								}

								label {
									font-size: 12px;
									font-weight: $semi-bold;
									color: $grey-400;
									opacity: 0.5;
									cursor: pointer;

									input {
										display: none;
									}
								}
							}
						}

						.button,
						.ur-button {
							width: fit-content;
							text-align: center;

							&.user_registration-deactivate-license-key {
								background: #f25656 !important;

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

						.user_registration_send_email_test {
							color: $primary_color;
							border-color: $primary_color;
						}

						#select-smart-tags {
							color: $primary_color;
							border-color: $primary_color;
							height: 30px;
							text-align: center;
							line-height: 18px;
							width: 30%;
						}

						.wp-editor-wrap {
							.wp-editor-container {
								iframe {
									height: 200px !important;
								}
							}
						}

						#wp-user_registration_content_restriction_message-wrap {
							#wp-user_registration_content_restriction_message-media-buttons {
								display: flex;
								align-items: center;

								#ur-smart-tags-selector {
									margin-left: auto;
								}
							}
						}

						#wp-user_registration_content_drip_global_message-media-buttons {
							display: flex;
							align-items: center;

							#ur-smart-tags-selector {
								margin-left: auto;
							}
						}
					}

					.ur-captcha-test-button {
						// flex: 0 0 38%;
						max-width: 300px;
						width: 100%;

						button {
							color: #475bb2;
							font-weight: 500;
						}

						.user_registration_captcha_setting_captcha_test {
							margin-bottom: 10px;

							.spinner {
								visibility: visible !important;
							}
						}
					}

					.ur-captcha-test {
						flex: 0 0 60%;

						.ur-captcha-test-container {
							min-width: 512px;
							display: block;

							.ur-captcha-notice {
								padding: 8px;
								margin: 2px;
								border-radius: 4px;
								border-width: 0px !important;

								&.success {
									background: rgba(0, 255, 0, 0.3);

									.ur-captcha-notice--icon {
										color: green;
									}
								}

								&.error {
									background: rgba(255, 0, 0, 0.3);

									.disconnect {
										color: red;
									}
								}
							}
						}
					}
				}

				&:has(> .ur_emails) {
					border: $border_width solid $border-color;
					border-radius: $border_radius_5;
					overflow: hidden;
				}
			}
		}

		// Import/Export Settings
		.ur-settings-section-header {
			margin: 0;

			a {
				color: $primary_color;
				border: $border_width solid $primary_color;
				font-weight: $medium;
				height: 38px;
				align-content: center;
			}
		}

		.ur-export-users-page {
			margin-top: 0;

			.nav-tab-inside {
				.postbox {
					width: 100%;
					padding: $spacing_20px $spacing_20px $spacing_22px;
					border: $border_width solid $border_color;
					border-radius: $border_radius_7;
					margin-bottom: $spacing_28px;
					background: #ffffff;
					box-shadow: none;

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

					.hndle {
						font-weight: $semi-bold;
						font-size: 16px;
						line-height: 150%;
						color: $grey-400;
						margin: 0;
						padding-bottom: $spacing_16px;
						margin-bottom: $spacing_16px;
						border-color: $border_color;
						cursor: unset;
					}

					.inside {
						margin: 0;
						padding: 0;
						text-align: left;

						p {
							margin: 0;
							margin-bottom: $spacing_20px;
							font-weight: $regular;
							font-size: 14px;
							line-height: 150%;
							color: $grey-400;
							text-align: left;

							.forms-list {
								height: 38px;
								padding-left: $spacing_12px;
								border: $border_width solid $border-color;
								border-radius: $border_radius_4;
							}
						}

						.button-primary {
							margin-top: $spacing_12px;
							box-shadow: none;
						}

						.ur-export-custom-fields {

							.ur-form-fields-container,
							.ur-form-additional-fields-container,
							select[name="export_format"] {
								margin-bottom: $spacing_16px;
							}

							select[name="export_format"] {
								border-color: #dee0e9;
								height: 38px;
							}

							input[name="date_range"] {
								width: 100%;
								padding: $spacing_4px $spacing_10px;
							}
						}
					}
				}
			}

			#selected-export-user-form {
				&::hover {
					background-color: #475bb2;
				}
			}
		}

		#urm-invite-codes-list-table {
			.select2.select2-container {
				width: 15% !important;
			}
		}

		#urm-popup-table,
		#urm-invite-codes-list-table {
			background-color: #ffffff;
			border: 1px solid #edf2f7;
			border-radius: $border_radius_7;
			padding: 20px 20px 22px;

			#user-registration-pro-search-input,
			#user-registration-invite-codes-search-input {
				width: 60%;
			}

			#popups-list {
				margin-top: 16px;

				.ur-list-table-wrapper {
					width: 100%;
					overflow-x: auto;

					.wp-list-table {
						width: 100%;
						border-collapse: collapse;

						thead {
							tr {
								th {
									&.column {

										&-shortcode,
										&-author,
										&-date {
											width: auto;
										}
									}
								}
							}
						}
					}
				}
			}
		}
	}

	p.submit {
		margin: $spacing_32px 0 0 0;
		padding: 0;

		.button-primary {
			transition: all 0.3s ease-in-out;
		}
	}
}

.user-registration-ui-autocomplete {
	font-size: 12px !important;

	.ui-menu-item {
		padding: 0px !important;

		.ui-menu-item-wrapper {
			padding: 10px;
			color: black;

			&.ui-state-active {
				color: white;
				background: #0073aa;
			}
		}
	}
}

.select2-results {
	.select2-results__option {
		&--highlighted[data-selected] {
			background: $primary_color;
		}

		.wrap {
			margin-top: 0;

			&::before {
				font-size: 16px;
				padding-right: $spacing_8px;
			}
		}
	}
}

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
	color: rgba(57, 57, 57, 0.35);
}

// Radio Image Setting
.user-registration-global-settings.radio-image {
	ul {
		display: flex;
		flex-direction: row;
	}

	li {
		display: flex;
		align-items: center;
		margin-bottom: 10px;
	}

	input[type="radio"] + img {
		cursor: pointer;
	}
}

.user-registration-inactive-addon {
	opacity: 0.7;
	pointer-events: pointer;
}

#popups-select {
	display: flex;
	gap: 10px;
	width: 15%;

	.button {
		color: #475bb2;
		font-weight: 500;
	}
}

#urm-invite-codes-list-table {
	.button {
		color: #475bb2;
		font-weight: 500;
		height: 38px;
		margin-left: 5px;
	}

	#codes-filter {
		margin-top: 16px;
	}
}

.install-urm-pro-title {
	font-size: 1.25rem !important;
}

.ur-install-urm-pro {
	display: flex;
	justify-content: center;
	border-bottom: 1px solid #ebebeb;
	margin-bottom: 20px;
}

.ur-install-urm-pro-p-tag {
	margin-bottom: 24px;
	padding: 10px 12px 10px 16px;
	background: rgba(71, 91, 178, 0.04);
	border: 1px solid #475bb2;
	font-weight: 400;
	color: #383838;
	border-radius: 4px;
	font-size: 14px;
	line-height: 22px;
	font-style: normal;
}

.user-registration-swal2-modal--install-urm-pro {
	.swal2-content {
		margin-bottom: 24px;
	}
}

.ur-nav__tab-item {
	display: flex;
	flex-direction: column;
}

.ur-scroll-ui__items {
	position: relative;
	overflow: visible;
	margin: 0 0 0 30px;
	/* left margin for timeline */
}

.ur-nav__link.is-active::after {
	opacity: 0 !important;
}

.ur-scroll-ui__items::before {
	content: "";
	position: absolute;
	left: 0;
	top: 16px;
	width: 2px;
	height: calc(100% - 16px - 16px);
	/* height clipped for last item and top shift and last item. */
	background-color: #f1f1f1;
}

.ur-scroll-ui__items li {
	position: relative;
}

.ur-scroll-ui__items li::before {
	content: "";
	position: absolute;
	top: calc(16px - 2px);
	left: -15px;
	/* - padding of ul + half of width of vertical line: 2px / 2 = 1px. */
	transform: translateX(-50%);
	/* move 50% of its width to the left i.e. 4px */
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: #f1f1f1;
	z-index: 10;
}

.ur-scroll-ui__items li.current::before {
	background-color: #475bb2;
}

.user-registration-header__close {
	cursor: pointer;
	position: absolute;
	top: 16px;
	right: calc(-24px - 16px);
	/* width of close btn + padding */
	z-index: 999;
	/* higher value is desired. */
	background-color: #f9f9f9;
	width: 24px;
	/* 16px: content, 8px: padding */
	height: 24px;
	box-sizing: border-box;
	padding: 4px;
	/* total: 24px */
	border-radius: 4px;
	display: inline-block;
}

.user-registration-header__close--hidden {
	display: none;
}

.user-registration-options-header__burger--hidden {
	display: none;
}

.user-registration-header--open {
	transform: translateX(0) !important;
	margin-top: 0 !important;
	box-shadow: 2px 0 12px rgba(0, 0, 0, 0.1);
	z-index: 999;
}

/* auto hides on bigger screen */
@media screen and (min-width: 1140px) {
	.user-registration-options-header__burger,
	.user-registration-header__close {
		display: none;
	}
}

@media screen and (max-width: 1140px) {
	.user-registration-header {
		position: fixed;
		// height: 100vh;
		height: 100%;
		transition: transform 0.4s ease-in-out;
		transform: translateX(-200%);
		z-index: 2;
		top: 92px;
		bottom: 0;

		&--nav {
			// max-height: calc(100vh - 194px);
			overflow-x: hidden;
			overflow-y: scroll;
			height: 80%;
		}
	}

	.user-registration-settings-container--dimmed {
		opacity: 0.4;
		pointer-events: none;
		filter: brightness(0.5);
		transition: filter 1s ease;
	}

	.user-registration-options-header__burger {
		display: inline-block;
	}
}

@media screen and (max-width: 782px) {
	.user-registration-header {
		top: 106px;
	}
}

.ur-connection-status--active {
	display: inline-block;
	white-space: nowrap;
	vertical-align: middle;

	padding: 4px 8px;

	font-size: 14px;
	font-weight: 400;
	text-transform: capitalize;

	color: #2f855a;
	/* green-600 */
	background-color: #f0fff4;
	/* green-50 */

	border-radius: 6px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.ur-connection-status--active::after {
	content: "Connected";
}

.user-registration-settings-parts.subsubsub {
	display: flex;
	gap: $spacing_8px;
	border-bottom: $border_width solid $border-color;
	padding-bottom: 0;
	margin: 0;

	li {
		padding: 0;

		a {
			padding: $spacing_12px $spacing_16px;
			font-size: 14px;
			line-height: 18px;
			font-weight: $medium;
			background: transparent;
			border: 0;
			color: #666666;
			cursor: pointer;
			transition: all .3s ease;
			margin: 0;
			box-shadow: none;
			position: relative;

			&::before {
				content: "";
				position: absolute;
				width: 100%;
				height: 2px;
				background: $primary_color;
				opacity: 0;
				bottom: 0;
				left: 0;
				transition: all .3s ease;
			}

			&:hover {
				color: #222222;
			}

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

			&.current {
				color: $primary_color;

				&::before {
					opacity: 1;
				}
			}
		}
	}
}

/* Color picker styling */
.user-registration-global-settings--field {
	.wp-picker-container {
		position: relative;
		display: inline-block;
		width: fit-content !important;

		.wp-color-result {
			border-radius: 4px;
			border-color: #e1e1e1;

			&:focus {
				border-color: #cacaca;
				box-shadow: 0 0 0 1px #cacaca;
			}

			&.button {
				margin: 0 !important;
			}
		}

		.wp-picker-holder {
			position: absolute;
			top: 100%;
			left: 0;
			z-index: 100;
			margin-top: 2px;
			display: none !important;
		}

		/* Hide iris-picker, iris-border, and input field by default */
		.iris-picker,
		.iris-border,
		.colorpick.wp-color-picker {
			display: none !important;
		}

		/* Show elements when container is active */
		&.wp-picker-active {
			.iris-picker,
			.iris-border,
			.colorpick.wp-color-picker,
			.wp-picker-holder {
				display: block !important;
			}
		}
	}

	/* Hide input field on page load/reload */
	input.colorpick,
	input.colorpick.wp-color-picker,
	.colorpick.wp-color-picker {
		display: none !important;
	}

	.wp-color-result {
		border-radius: 100px !important;
	}
}

/* Input width */
.wp-picker-input-wrap {
	.wp-color-picker {
		width: 195px !important;
	}
}

/* Color Group Styles */
.user-registration-global-settings {
	&.user-registration-color-group {
		.user-registration-color-group-field {
			display: flex;
			flex-wrap: nowrap;
			gap: 20px;
			align-items: flex-start;
			flex-direction: row !important;
		}

		.user-registration-color-group-item {
			display: flex;
			flex-direction: row !important;
			gap: 0;
			flex: 0 0 auto;
			position: relative;

			.ur-color-state-label {
				font-size: 12px;
				font-weight: 500;
				color: #666;
				margin-bottom: 0;
				text-transform: capitalize;
				position: absolute;
				left: -9999px;
				opacity: 0;
				visibility: hidden;
				width: 1px;
				height: 1px;
				overflow: hidden;
			}

			.wp-picker-container {
				width: fit-content !important;
			}
		}
	}

	.wp-picker-container {
		.iris-picker {
			border-color: #aaaaaa47;
			border-radius: 8px;
		}
	}
}

/* Color picker styling */
.user-registration-global-settings--field {
	.wp-picker-container {
		position: relative;
		display: inline-block;
		width: fit-content !important;

		.wp-color-result {
			border-radius: 4px;

			&.button {
				margin: 0 !important;
			}
		}

		.wp-picker-holder {
			position: absolute;
			top: 100%;
			left: 0;
			z-index: 100;
			margin-top: 2px;
			display: none !important;
		}

		/* Hide picker elements by default */
		.iris-picker,
		.iris-border,
		.colorpick.wp-color-picker {
			display: none !important;
		}

		/* Hide default button by default */
		.wp-picker-default {
			display: none !important;
			visibility: hidden !important;
			opacity: 0 !important;
			width: 0 !important;
			height: 0 !important;
			position: absolute !important;
			left: -9999px !important;
			pointer-events: none !important;
		}

		/* Active state */
		&.wp-picker-active {
			.iris-picker,
			.iris-border,
			.colorpick.wp-color-picker,
			.wp-picker-holder {
				display: block !important;
			}

			.wp-picker-default {
				display: inline-block !important;
				visibility: visible !important;
				opacity: 1 !important;
				width: auto !important;
				height: auto !important;
				padding: 0 8px !important;
				margin: 0 !important;
				border: 1px solid #ccc !important;
				position: relative !important;
				left: auto !important;
				pointer-events: auto !important;
			}
		}

		/* Show default button when color result has wp-picker-open class */
		.wp-color-result.wp-picker-open ~ .wp-picker-default,
		.wp-color-result.wp-picker-open + .wp-picker-default {
			display: inline-block !important;
			visibility: visible !important;
			opacity: 1 !important;
			width: auto !important;
			height: auto !important;
			padding: 0 8px !important;
			margin: 0 !important;
			border: 1px solid #ccc !important;
			position: relative !important;
			left: auto !important;
			pointer-events: auto !important;
		}
	}

	/* Hide input field on page load/reload */
	input.colorpick,
	input.colorpick.wp-color-picker,
	.colorpick.wp-color-picker {
		display: none !important;
	}

	.wp-color-result {
		border-radius: 100px !important;
	}
}

/* Input width */
.wp-picker-input-wrap {
	.wp-color-picker {
		width: 195px !important;
	}
}

.wp-color-result-text {
	display: none !important;
}

.wp-picker-input-wrap {
	display: flex !important;
}

/* Color Group Styles */
.user-registration-global-settings {
	&.user-registration-color-picker {
		.user-registration-global-settings--field {
			flex-direction: row !important;
		}
	}

	&.user-registration-color-group {
		.user-registration-color-group-field {
			display: flex;
			flex-wrap: nowrap;
			gap: 20px;
			align-items: flex-start;
			flex-direction: row;
		}

		.user-registration-color-group-item {
			display: flex;
			flex-direction: column;
			gap: 0;
			flex: 0 0 auto;
			position: relative;

			.ur-color-state-label {
				font-size: 12px;
				font-weight: 500;
				color: #666;
				margin-bottom: 0;
				text-transform: capitalize;
				position: absolute;
				left: -9999px;
				opacity: 0;
				visibility: hidden;
				width: 1px;
				height: 1px;
				overflow: hidden;
			}

			.wp-picker-container {
				width: fit-content !important;
			}
		}
	}

	/* Iris picker styling */
	.wp-picker-container {
		.iris-picker {
			border-color: #aaaaaa47;
			border-radius: 8px;
		}
	}
}

.user-registration-upsell {
	&__description-list {
		margin: 0 0 $spacing_12px;
		padding-left: $spacing_2px;

		&-item {
			display: flex;
			align-items: center;
			gap: $spacing_10px;
			font-size: 14px;
			line-height: 24px;
			color: #2c3338;
			margin-bottom: $spacing_6px;

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

			&::before {
				content: "";
				background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='%234cc741'%3E%3Cpath d='M20.1034 5.31543C20.5373 4.89486 21.2406 4.89486 21.6746 5.31543C22.1085 5.736 22.1085 6.41771 21.6746 6.83828L9.45224 18.6846C9.01832 19.1051 8.31496 19.1051 7.88104 18.6846L2.32544 13.2999C1.89152 12.8793 1.89152 12.1976 2.32544 11.777C2.75936 11.3565 3.46271 11.3565 3.89663 11.777L8.66664 16.4003L20.1034 5.31543Z'/%3E%3C/svg%3E");
				background-repeat: no-repeat;
				background-position: center;
				background-size: 100%;
				display: block;
				width: 20px;
				height: 20px;
			}
		}
	}

	&__feature-link {
		min-height: 34px;
		height: 34px;
		padding: 0 $spacing_16px;
		background: $primary_color;
		color: $white;
		text-decoration: none;
		align-content: center;
		border-radius: $border_radius_4;
		margin: $spacing_8px 0 $spacing_28px;
		font-size: 14px;
		line-height: 20px;
		display: inline-block;
		transition: all 0.3s ease-in-out;

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

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

		&:active {
			background: darken($primary_color, 8%);
			color: $white;
		}
	}
}

.user-registration-upsell__notice {
	font-size: 13px;
	color: #50575e;
	margin: 8px 0;
}

.user-registration-upsell__cta {
	font-size: 14px;
	font-weight: 500;
	margin: 0;
}

.user-registration-upsell__cta a {
	color: #2271b1;
	text-decoration: none;
}

.user-registration-upsell__cta a:hover {
	text-decoration: underline;
}

#free-mollie, #free-authorize-net {
	.integration-detail {
		position: relative;

		&.upgradable-type {
			.ur-pro-premium {
				width: 18px;
				height: 18px;
			}
		}

		//&::before {
		//	opacity: 1;
		//	content: "";
		//	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAJrSURBVHgB7ZhPTxNBGId/M0VL0t2KIRF7EPEPejAaq4lhSdQ2MR7VEx4MhkTviPELeDNGIk305gE+iRsPpkfOQGJPauBiK01K2e4w79IW6G5hll3CJPQ5tNuZ2XefeWemuzsMTcTn3ACc+hsw8VD+zOFYYIvg7hx7W1xol8CTGxuBy75DYAQ6wFACF3k2UyxtC85av7SRa+FJJrMJMTs2BcGmoB8DgFPjEHwauiJYjsvP29AXEtSbnmBUTpZgY/AynMxNxEmsghs3nmFz2EKcxCpI2atfe4Q4iU1w86IF1xiCOG3EOszqgncn9q2uj+5krpZ9sW9bjL+CKuqCd54Dk/Ip6EzGV+WaQ14GWziZWzKTKX+MpAlMfAWu3Ef8gqsrwLlReYEvPknnvH9Id2fUg855OQ9cyMrVtI74Bcu/t7/T8kKT88DVB+0qWr2d7M6o15bOSTc7troMVfqUW1b+7BzTUD39APz8hsaS7f3/dULDTIul79I9wOqYcyEyqC4YFHT8NdzrjwObM8YgnshOGGf9lWtLUEVdcG0lsPjU4DDMRgPVahWu63plnHOkUikkEongWLWjmIO1/12rSMQwDE+sddxVjqj8hSqHm4MBkJxpmt4xDW+UWHviIgwHBCaxA+XK6nJEOMGy+tB0pXKUgiGDBxKyk0x8sgQ0Rn2REPnpPXeQQ7H8A7ALys3DCdIdJJ1BJJJmqObav5NoPwd7r51R6QlGhQRt6IrAIpfr2IauMDHHwfsL0rQE3ZBO7F1xgbMZ+x8ckddKklzICc1d/nb5R7lfzRltCR/TrqucbkyuiUp/gb2XiZNsAa/Vql0vesTTAAAAAElFTkSuQmCC);
		//	background-repeat: no-repeat;
		//	background-position: center;
		//	background-size: 100%;
		//	display: block;
		//	border-radius: $border_radius_2;
		//	width: 18px;
		//	height: 18px;
		//	position: absolute;
		//	right: -16px;
		//}
	}

	.integration-body-info {
		position: relative;

		&::after {
			content: '';
			position: absolute;
			inset: 0;
			display: grid;
			place-items: center;
			background: rgba(255, 255, 255, .01);
			backdrop-filter: blur(1px);
			border-width: 0 !important;
			z-index: 999;
		}
	}
}

#free-mollie {

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

	.integration-action {
		display: none !important;
	}
}

.user-registration-settings-container .user-registration-options-container #free-mollie .user-registration-card__header {
	border: none !important;
}

.user-registration-settings-container .user-registration-options-container #free-authorize-net .user-registration-card__header {
	border: none !important;
}

#free-authorize-net {
	.active {

	}

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

	.integration-action {
		display: none !important;
	}
}