@import "variables/variables";
@import "mixins/mixins";
@import "variables/colors";

div.reset-btn {
	width: 100%;
	text-align: right;
	padding-top: 10px;
	margin-right: 15px;

	a.ur-reset-button {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		text-decoration: none;
		font-weight: 600;
		color: grey;
	}

	span.dashicons.dashicons-image-rotate {
		margin-right: 3px;
	}
}
.ur-button-container {
	flex-wrap: wrap;
}
#ur-geolocation-map {
	height: 400px;
	/* The height is 400 pixels */
	width: 100%;
	/* The width is the width of the web page */
}
.ur-pro-input-icon-padding {
	padding-left: 35px !important;
}

 /**
  * Help Tip
  */
.user-registration-help-tip,
.ur-portal-tooltip {
	color: $color_gray_two;
	display: inline-block;
	font-size: 22px;
	font-style: normal;
	height: 16px;
	line-height: 16px;
	position: relative;
	vertical-align: baseline;
	width: 16px;

	&::after {
		@include icon_dashicons("\f223");
		cursor: help;
	}
}

.tooltipster-base {
	.tooltipster-box {
		background: $grey-400;
		padding: $spacing_4px $spacing_8px;
		border-radius: $border_radius_4;
		border-color: $grey-400;
		text-align: center;
		font-size: 13px;
    	line-height: 1.4em;

		.tooltipster-content {
			padding: 2px 0;
		}
	}

	.tooltipster-arrow {
		.tooltipster-arrow-uncropped {
			.tooltipster-arrow-border {
				border-bottom-color: $grey-400;
				border-top-color: $grey-400;
			}

			.tooltipster-arrow-background {
				border-bottom-color: $grey-400;
			}
		}
	}
 }
// User Registration Detail

.ur-user-details-container {
	min-width: 760px;

	.ur-detail-wrapper {
		background-color: #ffffff;
		border-radius: 4px;
		border: 1px solid #E2E2E2;
		padding: 32px 0;

		.ur-detail-image {
			margin-left: 60px;
			height: 150px;
			width: 150px;

			img {
				height: 100%;
				width: 100%;
				-o-object-fit: cover;
				   object-fit: cover;
				border-radius: 100%;
				border: 2px solid #8990AD;
			  }
		  }
  	}

	.ur-info-wrap {
		margin-top: 32px;
		display: flex;
		flex-direction: column;

		h3 {
			font-size: 24px;
			font-weight: 500;
			color: #2D3559;
			margin-left: 60px;
			margin-bottom: 16px;
			margin-top: 0;
			}

		table{
			border: none;
			margin-top: 16px;

			tr {
				display: block;
				padding: 0 60px;

				&:nth-child(even) {
					background-color: rgba(0, 0, 0, 0.02);
					}

				th {
					text-align: left;
					vertical-align: middle;
					width: 200px;
					color: #4C5477;
					font-weight: 600;
					line-height: 1.3;
					border: none;
				}

				td {
					padding: 16px 0;
					color: #585858;
					line-height: 1.3;
					border: none;

					@media only screen and (max-width: 662px) {
						display: block;
						width: 100%;
						padding-left: 0.5em;
					}
				}
			}
		}
	}
}

// Passwordless Login Link placement in Login Form
#user-registration {
	.ur-frontend-form {
		.user-registration-form-login {
			.ur-form-row {
				.ur-form-grid {
					> div:not(#ur-recaptcha-node) {
						float: right;
						display: flex;
						align-items: center;
						gap: 20px;

						.user-registration-passwordless-login {
							margin-bottom: 0;
						}

						.user-registration-Button {
							float: none;
						}
					}

					.user-registration-form__label {
						display: inline-flex;
						align-items: center;
						cursor: pointer;

						.user-registration-form__input-checkbox {
							cursor: pointer;
							margin-right: 8px;
						}
					}
				}
			}
		}
	}
}

.inline {
	display: inline;
}

.ur-captcha-math{
	display: flex;
    align-items: center;
	flex-wrap: wrap;

	input {
		flex: 1;
    	margin-bottom: 0 !important;
	}
}


// Radio, Checkbox and Multiple Choice Image Choice Field CSS
.user-registration {
	.ur-form-row {
		.ur-form-grid {
			.ur-field-item {
				&.field-radio,
				&.field-checkbox,
				&.field-multiple_choice {
					ul.user-registration-image-options {
						display: grid;
						grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
						gap: $spacing_16px;
						margin: 0;
						padding: 0;

						li {
							margin-bottom: 0;

							input {
								&[type="radio"],
								&[type="checkbox"] {
									display: none;
								}
							}

							label {
								display: block;
								border: $border_width solid #cecece;
								padding: $spacing_6px;
								border-radius: $border_radius_4;
								cursor: pointer;
								margin: 0;

								span {
									display: block;
									margin-bottom: $spacing_12px;
									height: 100px;
									overflow: hidden;
									position: relative;
									border-radius: $border_radius_2;

									img {
										width: 100%;
										height: 100%;
										object-fit: cover;
										border-radius: $border_radius_2;
										transition: all .3s ease-in-out;
									}
								}

								&:hover {
									color: var(--wp--preset--color--vivid-cyan-blue);
									border-color: var(--wp--preset--color--vivid-cyan-blue);

									span {
										&::before {
											content: "";
											position: absolute;
											width: 100%;
											height: 100%;
											background: $grey-500;
											opacity: .45;
											z-index: 1;
										}

										img {
											transform: scale(1.1);
										}
									}
								}
							}

							input[type="radio"],
							input[type="checkbox"] {
								&:checked ~ label {
									color: var(--wp--preset--color--vivid-cyan-blue);
									border-color: var(--wp--preset--color--vivid-cyan-blue);

									span {
										&::before {
											content: "";
											position: absolute;
											width: 100%;
											height: 100%;
											background: $grey-500;
											opacity: .45;
											z-index: 1;
										}

										&::after {
											content: "";
											position: absolute;
											background: #00be34;
											border-radius: 1px;
											width: 12px;
											height: 12px;
											top: $spacing_8px;
											right: $spacing_8px;
											z-index: 2;
										}
									}
								}
							}
						}
					}
				}
				#coupon-error {
					display: none;
				}
				.coupon-label {
					display: flex;
					position: relative;
					input {
						padding: 4px 19px 4px 8px;
					}
					span {
						position: absolute;
						cursor: pointer;
						right: 10px;
						top: 5px;
						font-weight: 600;
					}
				}

				&.field-captcha {
					.ur-captcha-image {
						.ur-icon {
							&-group {
								display: flex;
								align-items: center;
								gap: $spacing-16px;
							}

							&-wrap {
								> span {
									padding: $spacing-24px;
									background: $white;
									border: $border_width solid #ececec;
									display: flex;
									align-items: center;
									justify-content: center;
									border-radius: $border_radius_4;
									cursor: pointer;
									transition: all .3s;

									&::before {
										font-size: 26px;
									}
								}

								input[type="radio"] {
									display: none;

									&:checked ~ span {
										background: var(--wp--preset--color--vivid-cyan-blue);
										border-color: var(--wp--preset--color--vivid-cyan-blue);

										&::before {
											color: $white;
										}
									}
								}
							}
						}
					}
				}

				.user_registration_signature_canvas-wrap {
					position: relative;

					canvas.user-registration-signature-canvas{
						width: 100%;
						height: auto;
						font-size: 14px;
						outline: none;
						box-shadow: none;
						margin-bottom: 10px;
						padding: 6px 12px;
						color: $color_gray-base;
						border: 1px solid $color_gray-light;
						margin-left: 0;
						margin-right: 0;
					}

					.user-registration-signature-reset {
						top: 10px;
						right: 10px;
						line-height: 1;
						position: absolute;

						.dashicons {
							&:hover {
								color: $red;
							}
						}
					}
				}

				.user-registration-signature-container {
					width: 40%;
					height: auto;
					border: 1px solid#e1e1e1;
				}

				&.field-authorize_net_gateway {

					.ur-field-row{
						.user-registration-one-half {
							width: 48%;
							float: left;
							margin-left: 4%;

							&:first-child {
								margin-left: 0;

								label {

								}
							}

							&:last-child {
								.user-registration-field-sub-label {
									margin-bottom: 0;
								}
							}
						}
					}
					.user-registration-sub-label {
						font-size: 12px;
						font-weight: 400;
						margin-bottom: 0;
						color: #494d50;
						margin-top: -10px;
					}
					.user-registration-ssl-warning {
						color: red;
					}
				}
			}
		}
	}
}
