/* J! User Component Forms / pages */
.lfa-juc {
  padding:0 15px;
  
  > .hero {
    h1 {
      margin:15px 0 15px 15px;
      height:52px;
      line-height:52px;
    }
  }
  > .inner {
    background:var(--lfa-bg-1);
    border-radius:18px;
  }
}

/* Forms */
form.lfa-juc__form {
	padding:10px 15px;
	
	.lead {
		margin:5px 0 10px 0;
	}
	
	#fieldsets {
		display:flex;
		flex-direction:column;
		
		> div {flex:1 1 auto;}
	}
	
	.control-group {
		max-width:275px;
		padding-bottom:10px;
		
		input {
			margin-left:3px !important;
		}
	}
	
	.controls {
		input[type="text"],
		input[type="password"],
		input[type="email"],
		input[type="tel"] {
			height:44px;
			line-height:44px;
			font-size:1.1rem;
			padding:5px 10px;
			border: var(--lfa-border);
			border-radius:5px;
			margin:0;
			outline:3px solid var(--lfa-border-color);
			vertical-align: top;
			width:calc(100% - 6px);
			background:var(--lfa-bg-1);
			color:var(--lfa-body);
			
			&:hover {
				outline:3px solid var(--lfa-gray-2);
			}
			&:active, &:focus {
				outline:3px solid var(--lfa-magenta-2);
			}

			&.invalid {
				outline:3px solid red;
			}
		}
		
		button[type="submit"] {
			display:block;
			margin: 20px 0 0 0;
			color:white;
			font-size:1.1rem;
			background: var(--lfa-magenta-2);
			height:44px;
			line-height:44px;
			border-radius:20px;
			width:275px;
			transition: all 320ms;
			
			&:hover {
				background: var(--lfa-magenta-3);
				
				&:active:focus {
					box-shadow:var(--lfa-shadow-3);
				}
			}
		}

		div.small.text-muted { display:none; }
	}
	.control-label {
		label {
			display:block;
			height:34px;
			line-height:34px;
			font-weight:500;
			margin:0 0 5px 0;

			> .star {
				color:var(--lfa-gray-2);
			}

			> .form-control-feedback {
				color:var(--lfa-gray-2);
				font-weight:400;
				padding-left: 5px;
			}

			&.invalid {
				> .form-control-feedback {
					color:var(--lfa-red-2);
				}
			}
		}
	}
	
	.password-group {
		position: relative;
		
		&.for-pass1 {
			padding-bottom:32px;
			margin-bottom: 10px;
			height:66px;
		}
		
		.input-password-toggle {
			width:44px;
			height:44px;
			border:0;
			padding:0;
			margin:0;
			vertical-align: top;
			background:transparent;
			position:absolute;
			top:0;
			right:0;
			
			&:hover {cursor:pointer;}
			
			.icon-eye,
			.icon-eye-slash {
				display:block;
				width:100%;
				height:100%;

				&::before {
					display:block;
					content:"";
					background-image: url(/images/0/icons/circle-solid-full.svg);
					background-position: 10px 10px;
					background-repeat:no-repeat;
					background-size: 22px 22px;
					width:34px;
					height:34px;
					text-align:center;
					filter: var(--lfa-f-gray-3);
				}
			}

			.icon-eye::before {
				background-image: url(/images/0/icons/eye-solid-full.svg);
			}

			.icon-eye-slash::before {
				background-image: url(/images/0/icons/eye-slash-solid-full.svg);
			}
		}
		meter {
			height: 16px;
			width: 275px;
			position:absolute;
			bottom:-20px;
			left:0;
		}
		#password-0 {
			position: absolute;
			bottom: -2px;
			background: transparent;
			text-align: left;
			left: 0;
			font-size: .85rem;
			color: var(--lfa-gray-2);
			text-transform:lowercase;
			
			&::before {
				content:"Password strength: ";
				width:275px;
				height:18px;
				font-size: .85rem;
				text-align: left;
				text-transform:initial;
				color: var(--lfa-gray-2);
			}
		}
		
		input {
			&[type="password"],
			&#jform_password1,
			&#jform_password2,
			&[name="password"] {
				padding-right: 49px;
			}
		}
	}
	
	.form-check {
		margin: 10px 0 0 0;

		input, label {
			vertical-align:top;
			height: 24px;
			display: inline-block;
			cursor:pointer;
		}

		input[type="checkbox"] {
			position: relative;
			margin: 0 0 0 2px !important;
			width: 24px;
			height: 24px;
			background:transparent;
			outline: none;
			appearance:none;
			
			&::before {
				display: block;
				content: "";
				position: absolute;
				top: .3rem;
				left: .3rem;
				width: 14px;
				height: 14px;
				border-radius: 50%;
				background-color:var(--lfa-gray-1);
			}
			
			&.checked::before {
				background-color:var(--lfa-magenta-2);
			}
			
			&::after {
				display: block;
				content: "";
				position: absolute;
				top: -1px;
				left: -2px;
				width: 20.5px;
				height: 19.5px;
				border: 3.5px solid var(--lfa-border-color);
				border-radius: 5px;
			}
			
			&:hover::after {
				border: 3.5px solid var(--lfa-gray-2);
			}
		}

		label {
			padding-left:10px;
		}
	}
}

@media only screen and (max-width: 480px) {
	form.lfa-juc__form {
		.control-group {max-width:100%;}
		.controls button[type="submit"] {
			max-width:100%;
			width:100%;
		}
		
		meter, #password-0 {
    	width: calc(100% - 40px);
    }
		meter::before {width:100%;}
	}
}

/* Register: ROOT/sign-up */
#jucForm1 > .lfa-juc__form {
	#fieldsets {
		#fieldset_fields_1 {order:1}
		#fieldset_default {order:2}
		#fieldset_terms {order:3}
		#fieldset_actions {order:4}
	}
	
	#fieldset_terms {
		padding:12px 0 0 0;
		display:flex;
		
		input, p {
			display:inline-block;
			vertical-align:top;
		}
		p {
			flex: 1 1 auto;
			margin: -2px 0 0 10px;
			font-size: .8rem;
			color: var(--lfa-gray-2);
			width: 100%;
			max-width: 250px;
			line-height: 16px;
		}
		
		a {
		  color:var(--lfa-body);
		  font-weight:500;
		  
		  &:hover {text-decoration:underline;}
		}

		input#jform_profile_tos {
			flex: 0 0 24px;
			position:relative;
			margin-left:1px;
			width: 24px;
			height: 24px;
			background: transparent;
			outline: 3.5px solid var(--lfa-border-color);
			border: 0;
			border-radius: 5px;
			overflow: hidden;
			cursor: pointer;
			appearance:none;

			&::after {
				display:block;
				position:absolute;
				content:"";
				top:4px;
				left:4px;
				width: 16px;
				height:16px;
				border-radius:50%;
				background-color:var(--lfa-gray-1);
			}

			&.valid {
				&::after {
					background-color:var(--lfa-magenta-2);
				}
			}
			&.invalid {
				outline:3.5px solid red;
			}
			
			&:hover {
				outline:3.5px solid var(--lfa-gray-2);
			}
		}
	}
	
	.control-group.field-spacer {
		display:none; visibility:hidden;
	}
	.controls button[type="submit"][disabled] {
		opacity:0.5;
		cursor:not-allowed;
	}
}
@media only screen and (max-width: 480px) {
	#jucForm1 {
		> form.lfa-juc__form {
    	.control-group {
				max-width:100%;
				
      	> .controls {
        	input[type="text"],
					input[type="password"], 
					input[type="email"] {
          	width:100%;
						max-width:100%;
					}
					button[type="submit"] {
						max-width:100%;
					}
				}
			}
		}
		.com-users-login__options {
			max-width: calc(100% + 40px);
    }
		
		.password-group meter {
			width:100%;
		}
  }
}

/* Edit Profile: ROOT/profile/edit */
#jucForm2 {
	#fieldsets {
		#fieldset_fields_2 {
			order:1;
			
			#row_uf68 { order: 1; }
  		#row_uf69 { order: 2; }
		}
		#fieldset_core {
			order:2;
			
			#row_email1 { order: 1; }  
			#row_pass1 { order: 2; }  
			#row_pass2 { order: 3; }  
		}
		#fieldset_core_autofill {
			order:3;display:none; visibility:hidden;
			
			#row_name { order: 1;}  
			#row_username { order: 2;}  
		}
		#fieldset_actions {
			order:4;
			
			.controls {
				display:flex;
				flex-direction:row;
				
				button[type="submit"] {
					vertical-align: top;
					margin: 15px 0 0 0;
					font-size: 1.1rem;
					max-width: 275px;
					height: 44px;
					line-height: 44px;
					border-radius: 20px;
					padding: 0 20px;


					&#editProfileSave,
					&#editProfileCancel {
						flex: 0 0 50%;
						width:unset;
					}

					&#editProfileSave {
						background: var(--lfa-magenta-2);
						color: white;

						&:hover {
							background: var(--lfa-magenta-3);
						}
					}
					&#editProfileCancel {
						color: var(--lfa-red-2);
						background:transparent;

						&:hover {
							color: var(--lfa-red-3);
						}
					}
				}
			}
		}
	}
	form.lfa-juc__form .password-group.for-pass1 {
		padding-bottom: 0;
		margin-bottom: 0;
		height: auto;
	}
	
	&[data-display-type="modal"] {
	  .control-group {
      max-width: 100%;
	  }
	  #editProfileSave {
	    flex:0 0 100% !important;
	    max-width:100% !important;
	    width:100% !important;
	  }
	  #editProfileCancel {
	    display:none !important;
	  }
	}
}
@media only screen and (max-width: 480px) {
	#jucForm2 {
		#fieldsets {
      #fieldset_actions {
				.controls {
					display:block;
					
					button[type="submit"] {
						&#editProfileSave, &#editProfileCancel {
							display: block;
							width:100%;
							max-width:100%;
						}
						&#editProfileCancel {
							margin-top: 5px;
							margin-bottom: -15px;
						}
					}
				}
			}
		}
	}
}

/* Sign In: ROOT/account/sign-in */
#jucForm3 {
  padding: 0 0 15px 0;
  
	form.lfa-juc__form {
		.controls button[type="submit"] {
			margin-top:10px;
			padding:0 10px;
		}
		#fieldset_actions .control-group {padding-bottom:0;}
		button[type="submit"] {
			width:275px;
		}
		#fieldset_extras {display:none;}
	}
}
.com-users-login__options {
	display:block;
	width:100%;
	max-width:calc(275px + 30px);
	padding:5px 15px 0 15px;
	text-align:center;

	> a {
		display:block;
		height:44px;
		line-height:38px;
		font-size:1.1rem;
		text-align:center;
		font-weight:500;
		padding:0 20px;
		border-radius:20px;
		text-transform:uppercase;
		border:3px solid var(--lfa-magenta-2);
		color:var(--lfa-magenta-2);
		margin:0 0 15px 0;
		transition: all 320ms;
		
		&.com-users-login__remind {
		  margin-bottom:0;
		}

		&:hover {
		  color:var(--lfa-magenta-3);
			border:3px solid var(--lfa-magenta-3);

			&:active:focus {
				background:var(--lfa-magenta-1);
			}
		}

	}
}
@media only screen and (max-width: 480px) {
	#jucForm3 form.lfa-juc__form {
		button[type="submit"] {
			width:100%;
		}
	}
	.com-users-login__options {
		width: 100%;
		max-width: 100%;
	}	
}

/* Reset */
#jucForm4 {
  form.lfa-juc__form {
		.controls button[type="submit"] {
			margin-bottom: -15px;
			margin-top: 15px;
		}
	}
}

/* Reset > Confirm[enter code f/email] */
#jucForm5 {
	form.lfa-juc__form {
		.com-users-reset-confirm__submit {
			padding-bottom:20px;
		}
		.controls #formResetConfirmSubmit {
			margin:15px 0 -5px 0;
		}
	}
}

/* Reset > Complete[choose new p/w] */
#jucForm6 {
	form.lfa-juc__form {
		.com-users-reset-complete__submit {
			padding-bottom:20px;
		}
		.controls #formResetCompleteSubmit {
			margin:15px 0 -5px 0;
		}
		.password-group {
			position: relative;
		}
	}
}

/* Remind: ROOT/forgot-username */
#jucForm7 {
	form.lfa-juc__form {
		.com-users-remind__submit {
			padding-bottom:0;
		}
		.controls #formRemindSubmit {
			margin:15px 0 -5px 0;
		}
	}
}