/* Radical Forms */
.rf-form-wrap {
	form.rf-form {
		.rf-form__row {
			padding: 0 0 10px 0;
			position:relative;
			
			.row-label {
				label {
					display: inline-block;
					height: 34px;
					line-height: 34px;
					font-weight: 500;
					margin: 0 0 5px 0;
					
					&.required::after {
						content:"*";
					}
				}
			}
			.row-field {
				position:relative;
				max-width:275px;
				
				&.row-field--textarea {
					max-width:500px;
					
					.invalid + .error {
						left:auto;
						right:0;
						
						&::before {
							margin-left:0;
							margin-right:0;
							line-height:38px;
							vertical-align: top;
						}
					}
				}
				
				input, textarea {
					padding: 5px 10px;
					font-size:1.1rem;
					border: var(--lwa-border);
					border-radius: 5px;
					margin: 0;
					outline: 3px solid var(--lwa-border-color);
					vertical-align: top;
					width: 100%;
					background: var(--lwa-bg-color-4);
					color: var(--lwa-body-color);
					
					&:active, &:focus {
          	outline: 3px solid var(--lwa-blue-2);
          }
					&.invalid {
						outline: 3px solid var(--lwa-red-2);
					}
				}
				
				input {
					height: 44px;
					line-height: 44px;
				}
				textarea {
					height:150px;
					max-width:500px;
					font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
					padding:5px 20px 5px 10px;
				}
				
				.error {
					display:none;
				}
				
				.invalid + .error {
					display:inline-block;
					font-weight:400;
					color: var(--lwa-red-2);
					position:absolute;
					top:0;
					left:275px;
					height:44px;
					line-height:44px;
					white-space: nowrap;
					font-size:1.1rem;
					
					&::before {
						width:30px;
						text-align:center;
						height:44px;
						line-height:44px;
						display:inline-block;
						content:"❗";
						margin-left:-30px;
						margin-right:15px;
					}
				}
			}
			
			.row-submit {
				button.rf-button-send {
					display: inline-block;
					vertical-align: top;
					margin: 15px 0 0 0;
					color: white;
					font-size: 1.1rem;
					background: var(--lwa-blue-2);
					max-width: 275px;
					height: 44px;
					line-height: 44px;
					border-radius: 20px;
					padding:0 20px;
					
					&:hover {
						background: var(--lwa-blue-3);
					}
				}
				
				.error {
					display:inline-block !important;
					vertical-align: top;
					opacity:0;
					visibility:hidden;
					font-size: 1.1rem;
					color: var(--lwa-red-2);
					padding: 0;
					margin:15px 0 0 0;
					height: 0px;
					line-height: 44px;
					overflow: hidden;
					transition: all 320ms;
					
					&.visible {
						opacity:1;
						visibility:visible;
						height:auto;
						transition: all 320ms;
					}
				}
			}
		}
	}
}
.rf-form--1 {
	padding:10px 20px;
}
@media only screen and (max-width: 480px) {
	.rf-form-wrap {
		form.rf-form {
			padding: 10px 20px 0 20px;
			
			.rf-form__row {
				
				&:last-of-type {padding-bottom:0;}
				.row-field {
					max-width: 100%;
					
					input, textarea {
						max-width: 100%;
					}
					
					.invalid + .error {
						font-size: 0;
    				margin-right: 0;
						left: auto;
    				right: -15px;
						
						&::before {font-size: initial;}
					}
				}
				
				.row-submit {
        	button.rf-button-send {
						width: 100%;
						max-width: 100%;
					}
					
					.error {
						width: 100%;
						text-align: center;
						margin: 0;
					}
					.error.visible {
						margin: 10px 0 5px 0;
						height:auto;
					}
				}
			}
		}
	}
}

/* J! User Component Forms */
form.lwa-form {
	padding:10px 20px;
	
	.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(--lwa-border);
			border-radius:5px;
			margin:0;
			outline:3px solid var(--lwa-border-color);
			vertical-align: top;
			width:100%;
			background:var(--lwa-bg-color-4);
			color:var(--lwa-body-color);
			
			&:hover {
				outline:3px solid var(--lwa-gray-2);
			}
			&:active, &:focus {
				outline:3px solid var(--lwa-blue-2);
			}

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

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

			&.invalid {
				> .form-control-feedback {
					color:var(--lwa-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/lci/lci-circle-solid.svg);
					background-position: 10px 10px;
					background-repeat:no-repeat;
					background-size: 22px 22px;
					width:34px;
					height:34px;
					text-align:center;
					filter: var(--lwa-f-gray-3);
				}
			}

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

			.icon-eye-slash::before {
				background-image: url(/images/0/lci/lci-eye-slash-solid.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(--lwa-gray-2);
			text-transform:lowercase;
			
			&::before {
				content:"Password strength: ";
				width:275px;
				height:18px;
				font-size: .85rem;
				text-align: left;
				text-transform:initial;
				color: var(--lwa-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: 5px;
				left: 5px;
				width: 14px;
				height: 14px;
				border-radius: 50%;
				background-color:var(--lwa-gray-1);
			}
			
			&.checked::before {
				background-color:var(--lwa-blue-2);
			}
			
			&::after {
				display: block;
				content: "";
				position: absolute;
				top: -1px;
				left: -2px;
				width: 20.5px;
				height: 19.5px;
				border: 3.5px solid var(--lwa-border-color);
				border-radius: 5px;
			}
			
			&:hover::after {
				border: 3.5px solid var(--lwa-gray-2);
			}
		}

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

@media only screen and (max-width: 480px) {
	form.lwa-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/account/register */
#jucForm1 > .lwa-form {
	#fieldsets {
		#fieldset_fields_2 {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(--lwa-gray-2);
			width: 100%;
			max-width: 250px;
			line-height: 16px;
		}

		input#jform_profile_tos {
			flex: 0 0 24px;
			position:relative;
			margin-left:1px;
			width: 24px;
			height: 24px;
			background: transparent;
			outline: 3.5px solid var(--lwa-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(--lwa-gray-1);
			}

			&.valid {
				&::after {
					background-color:var(--lwa-blue-2);
				}
			}
			&.invalid {
				outline:3.5px solid var(--lwa-red-2);
			}
			
			&:hover {
				outline:3.5px solid var(--lwa-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.lwa-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/account/profile/edit */
#jucForm2 {
	#fieldsets {
		#fieldset_fields_2 {
			order:1;
			
			#row_uf3 { order: 1; }
  		#row_uf4 { 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(--lwa-blue-2);
						color: white;

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

						&:hover {
							color: var(--lwa-red-3);
						}
					}
				}
			}
		}
	}
	form.lwa-form .password-group.for-pass1 {
		padding-bottom: 0;
		margin-bottom: 0;
		height: auto;
	}
}
@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 {
	form.lwa-form {
		.controls button[type="submit"] {
			margin-top:10px;
			padding:0 10px;
		}
		#fieldset_actions .control-group {padding-bottom:0;}
		button[type="submit"] {
			width:275px;
		}
	}
}
.com-users-login__options {
	display:block;
	width:100%;
	max-width:calc(275px + 40px);
	padding:10px 20px 0 20px;
	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(--lwa-blue-2);
		margin:0 0 20px 0;
		transition: all 320ms;

		&:hover {
			border:3px solid var(--lwa-blue-3);

			&:active:focus {
				background:var(--lwa-blue-1);
			}
		}

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

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

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

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

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

/* Article > Feedback[form] */
.lwa-form-2 {
	width:120px;
	margin:10px 0;
	
	> label {
		display:flex;
		flex-wrap:nowrap;
		width:100%;
		padding: 0 10px;
		margin:0 0 12px 0;
		cursor:pointer;
		
		&:last-of-type {
			margin: 0 0 0 0;
		}
		
		> .wrap {
			display:block;
			margin:0;
			width:26px;
			height:26px;
			flex: 0 0 26px;
			outline: 3px solid var(--lwa-border-color);
			border-radius:5px;
			padding:2px;
			overflow: hidden;
			
			&.active {
				outline: 3px solid var(--lwa-blue-2);
			}
		}
		
		input {
			display:block;
			margin:0;
			width:22px;
			height:22px;
			border-radius:2px;
			padding:2px;
			cursor:pointer;
			outline:0;
			appearance: none;
			
			&::before {
				display:block;
				content:"";
				width:100%;
				height:100%;
				background:transparent;
				border-radius:2px;
			}
			
			&[value="blue"]::before {
				background:var(--lwa-highlight-blue);
			}
			&[value="yellow"]::before {
				background:var(--lwa-highlight-yellow);
			}
			&[value="gray"]::before {
				background:var(--lwa-highlight-gray);
			}
			&[value="none"]::before {
				background:var(--lwa-highlight-none);
			}
		}
		
		> .anchor {
			flex: 0 0 70px;
			padding: 0 0 0 15px;
			height:26px;
			line-height:26px;
		}
	}
	> label:hover {
		> .wrap {
			outline: 3px solid var(--lwa-gray-2);
			
			&.active {
				outline: 3px solid var(--lwa-blue-2);
			}
		}
	}
}