@import "./variables/variables";
@import "./components/card";
@import "./mixins/mixins";
@import "./grids";

// loader
.lds-dual-ring {
	width: 100%;
	@include flexbox();
	justify-content: center;
	&::after {
		content: " ";
		display: block;
		width: 35px;
		height: 35px;
		margin: 8px;
		border-radius: 50%;
		border: 6px solid $gray_base;
		border-color: $gray_base transparent $gray_base transparent;
		animation: lds-dual-ring 1.2s linear infinite;
	}
}
@keyframes lds-dual-ring {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

.entry-content {
	font-size: inherit;
	font-family: inherit;

	&>*:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide):not(.wp-block-separator):not(.woocommerce):not(.user-registration) {
		max-width: none;
	}
}

// error msg design
.user-registration-frontend-listing-error {
	margin-bottom: 20px;
	border: 1px solid #e2e2e2;
	box-shadow: 0 0 30px 0 rgba(21, 42, 80, 0.04);
	border-radius: 10px;
	background: #f0f1f9;
}

.user-registration-frontend-listing-container {
	padding: 24px 48px;

	.ur-search-field {
		background: rgba($color_gray_five, 0.53);
		padding: 25px;
		@include flexbox();
		@media (max-width: 767px) {
			padding: 20px;
			flex-wrap: wrap;
		}
		input {
			border: 1px solid #f1f1f1;
			width: calc(100% - 150px);
			font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
			font-size: 16px;
			&:focus {
				outline: none;
			}
			@media (max-width: 767px) {
				width: 100%;
			}
		}
		.button {
			background: $primary_color;
			font-weight: 600;
			font-size: 14px;
			text-decoration: none;
			padding: 10px 40px;
			color: $white;
			width: 150px;
			&:focus {
				border: none;
				outline: none;
			}
			@media (max-width: 767px) {
				margin-top: 20px;
				width: 100%;
			}
		}
	}

	.frontend-listing-title-settings {
		.ur-advance-setting-title-wrap {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 32px;

			.ur-list-results {
				font-size: 18px;
				color: #212121;
				font-weight: 500;
			  }

			  .ur-filter-group {
				flex: 0 0 60%;
				display: inline-flex;
				-moz-column-gap: 16px;
				column-gap: 16px;
				justify-content: flex-end;

				select {
					border: none;
					height: 100%;
					outline: 1px solid #DEE0E9;
					border-radius: 4px;
					padding: 12px 16px;
					background-color: #ffffff;
					color: #2D3559;
					font-size: 16px;
					font-weight: 500;
					line-height: 1.8;
					white-space: no-wrap;
					flex: 0 0 33.33%
				}

				.ur-advance-filter {
					display: inline-flex;
					align-items: center;
					font-size: 16px;
					cursor: pointer;

					&:hover {
						span {
							color: #475BB2;
						}
					}
				  }

				span {
					display: inline-block;
					color: #4C5477;
					font-weight: 500;
				}

				.ur-svg {
					height: 24px;
					width: 24px;
					margin-right: 8px;
					fill: #4C5477;
				  }

				  .ur-frontend-amout-filter {
					flex: 0 0 18%;
				  }
			  }

			  @media only screen and (max-width: 962px){
				flex-direction: column-reverse;

				.ur-list-results {
					margin-top: 30px;
				}
			  }

			  @media only screen and (max-width: 662px){
				.ur-filter-group {
					flex-direction: column;
					gap: 16px;
				}
			  }
		}

		.ur-frontend-listing-filter-info-wrapper {
			display: flex;
			flex-wrap: wrap;
			gap: 16px;
			margin-top: 24px;

			button {
				background-color: #ebf2ff;
				color: #475BB2;
				border-radius: 50px;
				display: inline-flex;
				align-items: center;
				font-size: 12px;

				span {
					cursor: pointer;
				}
			}
		}

		.ur-advance-setting-container {
			padding: 30px;
			background-color: #ffffff;
			margin-top: 16px;
			border: 1px solid #F0F0FF;
			border-bottom: 2px solid #475BB2;

			.ur-advance-setting-lists {
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				-moz-column-gap: 30px;
					 column-gap: 30px;
				row-gap: 24px;

				label {
					display: block;
					font-size: 14px;
					font-weight: 500;
					color: #212121;
				  }

				input {
					width: 100%;
					border: 1px solid #E2E2E2;
					padding: 8px 16px;
					margin-top: 8px;
					border-radius: 2px;

					&:hover {
						border-color: #475BB2;
					}

					&:focus-visible {
						border: 1px solid #475BB2;
						outline: none;
					}
				}

				@media only screen and (max-width: 992px) {
					grid-template-columns: repeat(1, 1fr);
				}
			  }

			  .ur-advance-setting-button {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 32px;

				.ur-advance-setting-reset {
					font-size: 14px;
					color: #4C5477;

					a {
						font-weight: 500;
						text-decoration: underline;
						color: #2D3559;
						cursor: pointer;
					  }
				  }

				.ur-advance-setting-button-group {
					display: flex;
					justify-content: space-between;
					align-items: center;
					gap: 10px;
				}

				.btn-primary {
					border: none;
					background-color: #475BB2;
					border-radius: 2px;
				}

				.btn-secondary {
					background-color: transparent;
					color: #838383;
					cursor: pointer;
				}

				@media only screen and (max-width: 662px) {
					flex-direction: column;
					row-gap: 16px;
				}
			  }
		  }
	}

	.ur-frontend-user-listings {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
		gap: 30px;
		margin-top: 42px;

		.ur-frontend-user-list {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			border: 1px solid #DEE0E9;
			border-radius: 4px;
			padding: 24px;
			background-color: #ffffff;
			min-height: 550px;

			.ur-list-image {
				height: 80px;
				width: 80px;

				img {
					height: 100%;
					width: 100%;
					border-radius: 100%;
					-o-object-fit: cover;
					object-fit: cover;
				}
			}

			.ur-list-title {
				margin-top: 16px;
				font-size: 20px;
				font-weight: 500;
				line-height: 1.3;
				color: #212121;
			}

			.ur-list-nickname {
				margin-top: 2px;
				color: #969696;
				font-size: 14px;
				line-height: 1.8;
			}

			.ur-list-email {
				margin-top: 12px;
				color: #2D3559;
				line-height: 1.8;
			}

			.ur-list-website {
				margin-top: 4px;
				font-size: 14px;
				color: #475BB2;
				font-style: italic;
			}

			.ur-list-display-name {
				margin-top: 12px;
				color: #212121;
				line-height: 1.8;
				display: -webkit-box;
				-webkit-line-clamp: 3;
				-webkit-box-orient: vertical;
				overflow: hidden;
				text-align: center;
			}

		  .ur-list-file-upload {
				margin-top: 12px;
				font-size: 14px;
				color: #475BB2;

			}

			.btn-view-details {
				display: block;
				margin-top: 24px;
				background-color: #f5f5ff;
				width: 100%;
				padding: 12px 0;
				text-align: center;
				font-weight: 500;
				color: #475BB2;
				line-height: 1.8;

				&:hover {
					background-color: #475BB2;
					color: #ffffff;
					transition: all 0.3s ease-in-out;
				}
			}
		}
	}

	.ur-frontend-user-list-view {
		margin-top: 42px;
		display: grid;
		grid-template-columns: repeat(1, 1fr);
		row-gap: 16px;

		.ur-frontend-user-list-card {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 16px 24px;
			border: 1px solid #DEE0E9;
			border-radius: 4px;

			.user-info-wrap {
				display: flex;
				align-items: center;

				.ur-list-image {
					height: 80px;
					width: 80px;
					margin-right: 16px;

					img {
						height: 100%;
						width: 100%;
						border-radius: 100%;
						object-fit: cover;
					}
				}

				.user-description {
					.ur-list-nickname {
						color: #969696;
						font-size: 14px;
						line-height: 1.8;
					}
				}
			}

			.btn-view-details {
				background-color: #F2F2F7;
				color: #475BB2;

				&:hover {
					color: #fff;
					background-color: #475BB2;
				}
			}

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

				.btn-view-details {
					margin-top: 16px;
				}
			}
		}
	}

	.user-registration-frontend-listing-pagination-group {
		display: flex;
		padding-left: 15px;
		padding-bottom: 40px;
		margin-top: 48px;
		a {
			color: #000;
			text-decoration: none;
			border-radius: 50%;
			background: $white no-repeat center center;
			border: 1px solid #ccc;
			font-size: 12px;
			width: 25px;
			height: 25px;
			line-height: 23px;
			margin: 0 5px;
			text-align: center;
			cursor: pointer;
			text-decoration: none;
			&#user-registration-frontend-listing-next-page {
				span {
					font-size: 16px;
					line-height: 1.4;
					color: $primary_color;
					&:hover {
						color: $white;
					}
				}
			}
			&#user-registration-frontend-listing-previous-page {
				span {
					margin-right: 1px;
				}
			}
			&#user-registration-frontend-listing-next-page {
				span {
					margin-left: 1px;
				}
			}
			&:hover,
			&.active {
				background-color: $primary_color !important;
				color: $white;
			}
		}
		a:hover:not(.active) {
			background-color: #ddd;
		}
	}

	.ur-btn {
		padding: 8px 16px;
		font-weight: 500;
		line-height: 1.8;
		background-color: #475BB2;
		color: #ffffff;
		border-radius: 4px;
		cursor: pointer;
	}
}
