@import 'utility/mixins';

#payment-detail-modal {
	h2 {
		font-size: 1.6em;
		font-weight: 700;
	}
}

.modal {
	display: none;
	flex-direction: column;
	position: fixed;
	z-index: 7001;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgba(0, 0, 0, 0.5);
	justify-content: center;
	align-items: center;
}

.modal-content {
	background-color: #fefefe;
	margin: 15px;
	padding: 20px;
	border: 1px solid #888;
	width: 80%;
	max-width: 600px;
	border-radius: 5px;
}

.close-button {
	color: #aaa;
	float: right;
	font-size: 28px;
	font-weight: bold;

	&:hover,
	&:focus {
		color: black;
		text-decoration: none;
		cursor: pointer;
	}
}

.modal-body {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}

.payment-detail-box {
	flex: 50%;
	display: flex;
	flex-direction: column;
	margin-bottom: 15px;
}

.payment-detail-label {
	font-weight: 600;
	font-size: 15px;
	margin-bottom: 5px;
}

.payment-status-btn {
	padding: 3px 5px;

	&.pending {
		border: 1px solid #f0a64f;
		border-radius: 3px;
		background: #fff4f4;
	}

	&.completed {
		border: 1px solid #a0e39a;
		border-radius: 3px;
		background: #f5fff4;
	}

	&.failed {
		border: 1px solid #fab9b9;
		border-radius: 3px;
		background: #fff4f4;
	}
}

.ur-membership-header {
	margin-left: -20px;
	background: white;
	position: sticky;
	top: 32px;
	z-index: 700;

	.membership-menu-left {
		gap: 20px;
		flex: 1;
	}

	.membership-menu-right {
		gap: 12px;

		img {
			all: unset;
			height: 25px;
			max-width: 100% !important;
			animation: bounceAnimation 2s ease-in-out infinite;
		}

		.urm-membership-tutorial {
			background: #269728;
			padding: 8px 16px;
			color: white !important;
			font-size: 14px !important;
			border-radius: 4px;
			transition: all .3s;

			&:hover {
				background: #128b15;
			}

			&:after {
				content: none;
			}


		}
	}

	a {
		text-decoration: none !important;;
	}
}

@keyframes bounceAnimation {
	0% {
		transform: translateX(-5px);
	  }
	  50% {
		transform: translateX(5px);
	  }
	  100% {
		transform: translateX(-5px);
	  }
}

.field-amount {
	position: relative;

	span {
		position: absolute;
		top: 6px;
		left: 10px;
		font-weight: 600;
	}

	input {
		padding-left: 20px !important;
	}
}

.user-registration-list-table-heading {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 20px 0;
}


// Membership Admin Side Design Fix
.user-registration {
	.ur-membership-header {
		margin-left: 0;
		padding-left: 24px !important;
		padding-right: 24px !important;
		border-bottom: 1px solid #e2e8f0;

		.membership-menu {
			&-left {
				width: 100%;
				padding: 0 !important;
				gap: 4px;

				img {
					max-width: 36px !important;
					padding: 18px 24px 18px 0;
					border-right: 1px solid #E2E8F0;
					margin-right: 28px;
				}

				a {
					font-size: 16px !important;
					line-height: 26px;
					color: #64748B;
					position: relative;
					padding: 23px 20px;

					&::after {
						content: "";
						background: #475bb2;
						width: 0px;
						height: 3px;
						position: absolute;
						bottom: 0;
						left: 0;
						transition: all .3s;
					}

					&.row-title {
						color: #475BB2;

						&:after {
							width: 100%;
						}
					}

					&:hover {
						&::after {
							width: 100%;
						}
					}

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

			&-right {
				padding: 0 !important;

				a {
					font-size: 16px;
					line-height: 26px;
					font-weight: 500;
					color: #64748B;
					transition: all .3s;

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

	#user-registration-list-table-page {
		margin: 60px auto;
		padding: 28px 32px;
		box-sizing: border-box;

		.user-registration-list-table-heading {
			margin-top: 0;
			margin-bottom: 24px;

			h1 {
				margin: 0;
				color: #222222;
				font-size: 22px;
				font-weight: 600;
				line-height: 32px;
			}

			.ur-button-primary {
				border-radius: 3px;
				border-color: #475BB2;
				background: #475BB2;
				color: #ffffff;
				padding: 8px 20px 8px 16px;
				color: #ffffff;
				font-size: 14px;
				font-weight: 400;
				line-height: 24px;
				transition: all .3s;

				&:hover {
					background: #38488e;
					border-color: #38488e;
				}
			}
		}

		#user-registration-list-filters-row {
			padding-bottom: 28px;

			form {
				height: 38px;
				gap: 16px;

				> div {
					position: relative;

					select {
						width: 200px;
						border-color: #BABABA;
						color: #383838;

						&:focus {
							box-shadow: none;
							outline: none;
							border-color: #475BB2;
						}
					}

					input[type="search"] {
						@include form-field-style;
						width: 100%;
						padding: 10px 40px 10px 14px;

						&::placeholder {
							color: #999;
							font-size: 14px;
							font-weight: 400;
							line-height: 24px;
						}

						&:focus {
							box-shadow: none;
							outline: none;
							border-color: #475BB2;
						}
					}

					#search-submit {
						top: 50% !important;
						transform: translateY(-50%);
						right: 14px !important;
					}
				}

				button[type="submit"] {
					padding: 8px 14px;
					font-size: 14px;
					line-height: 20px;
					color: #475BB2;
					border-color: #475BB2;
					background: #F6F7F7;
					font-weight: 500;
				}
			}
		}

		#user-registration-users-action-form {
			.tablenav {
				@include bulk-action;
			}

			.wp-list-table {
				thead {
					tr {
						td {
							width: 40px;
						}

						th {
							&#username {
								width: 210px;
							}

							&#membership {
								width: 150px;
							}

							#payment_status {
								width: 160px;
							}

							#user_registered {
								width: 200px;
							}

							#actions {
								width: 130px;
							}
						}
					}
				}

				tbody {
					tr {
						th {
							vertical-align: middle;
							padding-bottom: 12px;
						}

						td {
							vertical-align: middle;

							&.username {
								display: flex;
								align-items: center;
								gap: 10px;

								img {
									margin: 0;
								}
							}
						}
					}
				}
			}
		}

		#membership-list {
			.tablenav {
				@include bulk-action;

				&-pages {
					margin-top: 5px;
					margin-bottom: 0;
				}

				.actions {
					&.bulkactions {
						padding: 0;
						display: flex;
						align-items: center;
						gap: 10px;

						select {
							height: 38px;
							width: 220px;
							padding: 0 12px;
							border-radius: 4px;
							border: 1px solid #BABABA;
							margin-right: 0;

							&:focus {
								box-shadow: none;
								outline: none;
								border-color: #475BB2;
							}
						}

						input[type="submit"] {
							margin: 0;
							padding: 8px 14px;
							font-size: 14px;
							line-height: 20px;
							font-weight: 500;
							color: #475BB2;
							border-color: #475BB2;
							background: #F6F7F7;
						}
					}
				}
			}

			.wp-list-table.memberships {
				thead {
					tr {
						td {
							width: 40px;
						}

						th {
							&#title {
								width: 320px;
							}

							&#members {
								width: 120px;
							}

							&#status {
								width: 100px;
							}

							&#action {
								width: 160px;
							}
						}
					}
				}

				tbody {
					tr {
						&:nth-child(odd) {
							background: #F8F8FA;
						}

						td {
							font-size: 14px;
							line-height: 24px;
							color: #383838;

							strong {
								margin: 0;

								.ur-edit-title {
									a {
										line-height: 24px;
										font-weight: 400;
									}
								}
							}

							&.membership_type {
								.user-registration-badge {
									padding: 0;
									background: none;
									font-size: 14px;
									text-transform: capitalize;
									color: #383838;
									font-weight: 500;
								}
							}

							&.action {
								.row-actions {
									.user-registration-switch {
										@include form-toggle;
									}

									.edit {
										font-size: 14px;
										line-height: 24px;
									}
								}
							}
						}

						&.no-items {
							background: #ffffff;

							td {
								padding: 0;

								.empty-list-table-container {
									text-align: center;
									margin-top: 30px;
									margin-bottom: 30px;

									img {
										width: 300px;
									}

									h3 {
										margin-top: 16px;
										margin-bottom: 8px;
										color: #222222;
										font-size: 22px;
										font-weight: 600;
										line-height: 32px;
									}

									p {
										color: #6B6B6B;
										font-size: 14px;
										font-weight: 400;
										line-height: 24px;
									}
								}
							}
						}
					}
				}

				tfoot {
					tr {
						th {
							font-size: 14px;
							font-weight: 600;
							line-height: 24px;
							color: #383838;

							a {
								padding: 12px 8px;
								display: flex;
								align-items: center;
								gap: 8px;
							}
						}
					}
				}
			}
		}

		#user-registration-members-list-form {
			.wp-list-table.users {
				tbody {
					tr {
						&.no-items {
							background: #ffffff;

							td {
								padding: 0;

								.empty-list-table-container {
									text-align: center;
									margin-top: 30px;
									margin-bottom: 30px;

									img {
										width: 300px;
									}

									h3 {
										margin-top: 16px;
										margin-bottom: 8px;
										color: #222222;
										font-size: 22px;
										font-weight: 600;
										line-height: 32px;
									}

									p {
										color: #6B6B6B;
										font-size: 14px;
										font-weight: 400;
										line-height: 24px;
									}
								}
							}
						}
					}
				}
			}
		}
	}

	.ur-membership {
		.ur-membership-tab-contents-wrapper {
			background-color: unset;

			#ur-membership-create-form {
				max-width: 1280px;
				width: 100% !important;
				padding: 0 30px;
			}

			.user-registration-card {
				border: 0;
				padding: 28px;

				&__header {
					padding: 0;
					gap: 18px;
					padding-bottom: 20px;
					border-bottom: 1px solid #E9E9E9;
					margin-bottom: 28px;

					a {
						@include back-button;
					}

					h3 {
						margin: 0;
						color: #222222;
						font-size: 22px;
						font-weight: 600;
						line-height: 32px;
					}
				}

				&__body {
					padding: 0;

					#ur-membership-main-fields {
						display: flex;
						flex-direction: column;
						gap: 24px;
						margin-bottom: 32px;

						.ur-membership-input-container {
							padding: 0 !important;
							align-items: center;
							margin-top: 0 !important;

							&:has(.ur-field[data-field-key="textarea"]) {
								align-items: unset;
							}

							.ur-label {
								margin-bottom: 0;

								label {
									margin-bottom: 0;
									color: #383838;
									font-size: 15px;
									font-weight: 500;
									line-height: 21px;
								}
							}

							.ur-admin-template {
								.ur-field {
									input {
										height: 38px;
										padding: 8px 12px 8px 12px;
										font-size: 14px;
										line-height: 24px;
										color: #383838;
									}
								}
							}

							.user-registration-switch {
								@include form-toggle;
							}
						}
					}

					#ur-membership-plan-and-price-section {
						margin: 0 !important;
						padding: 0 !important;

						.user-registration-card {
							border-radius: 6px;
							border: 1px solid #EDEFF7;
							background: #F8F8FA;
							padding: 24px;

							&__body {
								.ur-membership-selection-container {
									padding: 0 !important;

									.ur-label {
										label {
											margin-bottom: 0 !important;
											font-size: 15px;
											line-height: 21px;
											color: #383838;
										}
									}

									.ur-input-type-select {
										.ur-field {
											gap: 16px;
											flex-wrap: wrap;

											.ur-membership-types {
												max-width: 230px;
												margin-bottom: 0;
												border-radius: 4px;
												border: 1px solid #E9E9E9;
												background: #FFF;
												padding: 12px 14px;
												cursor: pointer;

												.ur-membership-type {
													&-title {
														gap: 8px;
														margin-bottom: 12px;

														label {
															padding: 0 !important;
															font-size: 16px;
															line-height: 24px;
														}
													}

													&-description {
														p {
															color: #383838;
															font-size: 14px !important;
															font-weight: 400;
															line-height: 20px;
															margin: 0;
														}
													}
												}
											}
										}
									}
								}
							}
						}
					}

					#paid-plan-container {
						display: flex;
						flex-direction: column;
						gap: 24px;
						margin-top: 24px;

						.ur-membership-selection-container {
							align-items: center;
							margin-top: 0 !important;

							.ur-label {
								margin-bottom: 0;
							}

							.ur-field {
								span {
									top: 50%;
									transform: translateY(-50%);
									font-size: 16px;
								}

								input[type="number"] {
									height: 38px;
									font-size: 14px;
									line-height: 24px;
									padding-left: 24px !important;
								}
							}
						}

						.ur-membership-subscription-field-container {
							.ur-membership-selection-container {
								.ur-field {
									gap: 12px;

									input[type="number"] {
										width: 100px;
										padding-left: 12px !important;
										padding-right: 8px;
									}

									select {
										width: 100%;
										height: 38px;
										padding: 0 12px;
										margin: 0 !important;

										&:focus {
											box-shadow: none;
											outline: none;
											border-color: #475BB2;
										}
									}
								}
							}

							.ur-membership-input-container {
								margin-top: 24px !important;
								padding: 0 !important;

								.ur-label {
									margin-bottom: 0;

									label {
										margin-bottom: 0;
										font-size: 15px;
										line-height: 21px;
										color: #383838;
									}
								}

								.user-registration-switch {
									@include form-toggle;
								}
							}

							.trial-container {
								margin-top: 16px;

								&--wrapper {
									max-width: 650px;
									background: #ffffff;
									margin-left: 0 !important;
									padding: 20px !important;
									border-radius: 4px;

									.ur-label {
										margin-bottom: 0;
										width: 265px !important;

										label {
											margin-bottom: 0;
											font-size: 15px;
											line-height: 21px;
											color: #383838;
										}
									}

									.ur-field {
										flex: 1;
										gap: 12px;

										input[type="number"] {
											width: 100px;
										}

										select {
											flex: 1;

											&:focus {
												box-shadow: none;
												outline: none;
												border-color: #475BB2;
											}
										}
									}
								}
							}
						}
					}

					#payment-gateway-container {
						margin-top: 28px !important;

						.user-registration-card {
							background: #ffffff;

							&__header {
								h3 {
									font-size: 20px;
									line-height: 30px;
								}
							}

							&__body {
								> div {
									border-radius: 5px;
									padding: 16px 20px !important;
									transition: all .3s;
									cursor: pointer;

									&:hover {
										background: #f1f1f1 !important;
									}

									h2 {
										margin: 0;
										font-size: 15px;
										line-height: 25px;
										color: #383838;
									}

									.user-registration-switch {
										@include form-toggle;
									}

									.payment-option-body {
										border-top: 1px solid #E1E1E1;
										margin-top: 14px;
										display: flex;
										flex-direction: column;
										gap: 10px;

										.ur-membership-input-container {
											padding: 0 !important;
											align-items: center;

											.ur-label {
												margin-bottom: 0;

												label {
													margin-bottom: 0;
													font-size: 14px;
													line-height: 20px;
													color: #383838;
												}
											}
										}

										.ur-membership-selection-container {
											align-items: center;

											.ur-label {
												margin-bottom: 0;

												label {
													margin-bottom: 0;
													font-size: 14px;
													line-height: 20px;
													color: #383838;
												}
											}
										}
									}
								}

								.payment-option-body {
									margin-top: 20px;
								}
							}
						}
					}
				}

				hr {
					display: none;
				}

				.submit {
					@include form-footer-button;
				}
			}
		}
	}
}

.ur-membership-tab-contents-wrapper {
	max-width: 1280px;
	margin: 60px auto;
	display: block;
	padding: 0;
}

#ur-membership-create-form {
	.user-registration-card {
		border: 0;
		padding: 28px;

		#ur-membership-form-container {
			gap: 32px;
			padding-bottom: 32px;

			#ur-member-form {
				&-left {
					width: 70%;

					#left-title {
						padding-bottom: 20px;
						margin-bottom: 28px;
						border-bottom: 1px solid #E9E9E9;
						gap: 18px;

						a {
							@include back-button;
						}

						h3 {
							margin: 0;
						}
					}

					#left-body {
						display: flex;
						flex-direction: column;
						gap: 24px;

						.ur-membership-input-container {
							padding: 0 !important;
							align-items: center;

							.ur-label {
								margin-bottom: 0;

								label {
									color: #383838;
									font-size: 15px;
									font-weight: 500;
									line-height: 21px;
								}
							}

							.ur-admin-template {
								.ur-field {
									input {
										height: 38px;
										border-color: #E9E9E9;
									}

									select {
										height: 38px;
										border-radius: 4px;
										border: 1px solid #E9E9E9;
										max-width: 100%;
										width: 100%;
									}
								}
							}

							.user-registration-switch {
								@include form-toggle;
							}
						}
					}
				}

				&-right {
					width: 30%;
					border-radius: 5px;
					height: fit-content;
					background: #F8F8FA;
					border: 1px solid #EDEFF7;
					padding: 24px !important;

					.right-title {
						padding-bottom: 16px;
						margin-bottom: 24px;
						border-bottom: 1px solid #E1E1E1;

						h3 {
							margin: 0 !important;
							color: #222222;
							font-size: 20px;
							font-weight: 600;
							line-height: 30px;
						}
					}

					.right-body {
						gap: 24px;

						.form-row {
							margin-top: 0 !important;

							label {
								color: #383838;
								font-size: 15px;
								font-weight: 500;
								line-height: 21px;
							}

							.ur-membership-members-input {
								height: 38px;
								border-radius: 4px;
								border: 1px solid #E9E9E9;
								background: #fff;
							}
						}
					}
				}
			}
		}

		.submit {
			@include form-footer-button;
		}
	}
}


.user-registration-switch {
	gap: 10px;

	.ur-pg-arrow {
		width: 20px;
		transform: rotate(90deg);
		transition: transform 250ms ease-in-out 25ms;

		&.expand {
			transform: rotate(-90deg);
		}
	}
}

#ur-membership-plan-and-price-section .upgradable-type {
	position: relative;
	color: #bababa;

	.ur-membership-type-title,
	.ur-membership-type-description {
		opacity: 0.5;
	}

	&::before {
		opacity: 1;
		content: "";
		background-image: url("../../../images/icons/ur-pro-icon.png");
		background-repeat: no-repeat;
		background-position: center;
		background-size: 100%;
		position: absolute;
		border-radius: 2px;
		width: 16px;
		height: 16px;
		top: 8px;
		right: 8px;
	}
}

.urmg-loader {
	width: 100%;
	display: flex;
	justify-content: center;
}

.urmg-shortcode {
	display: flex;
	line-height: 1;
}

.user-registration-membership_page_user-registration-membership {
	table {
		&.membership_groups {
			th {
				&#title {
					width: 200px;
				}

				&#shortcode {
					width: 220px;
				}

				&#status {
					width: 100px;
				}

				&#action {
					width: 200px;
				}
			}
		}
	}

	.user-registration-help-tip {
		&::after {
			width: 8px;
			height: 15px;
		}
	}
}
.tooltipster-base.tooltipster-bottom {
	margin-top: -30px /* Adjust gap for bottom-positioned tooltips */
}