/**
 * Import
 **/
// 1. Configuration and helpers
@import "abstracts/variables";

@import "mixins/buttons";

@import "mixins/cma";

// 2. Components
@import "components/components";

/**
 * Tooltip
 **/

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	&.toplevel_page_tgwc-customize-my-account {
		font-family: $font-primary;

		#wpwrap {
			background: #fafafc;
		}
	}
}

.ui-tooltip,
.arrow:after {
	background: $color__gray-900;
	border: 2px solid $color__white;
}

.ui-tooltip {
	padding: 10px 20px;
	color: $color__white;
	border-radius: 20px;
	text-transform: uppercase;
	box-shadow: 0 0 7px $color__gray-900;
}

.arrow {
	width: 70px;
	height: 16px;
	overflow: hidden;
	position: absolute;
	left: 50%;
	margin-left: -35px;
	bottom: -16px;

	&.top {
		top: -16px;
		bottom: auto;

		&::after {
			bottom: -20px;
			top: auto;
		}
	}

	&.left {
		left: 20%;
	}

	&::after {
		content: "";
		position: absolute;
		left: 20px;
		top: -20px;
		width: 25px;
		height: 25px;
		box-shadow: 6px 5px 9px -9px $color__gray-900;
		transform: rotate(45deg);
	}
}

/**
 * Endpoints Setting
 **/
.tgwc-endpoints-header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;

	h3 {
		flex: 1;
	}

	.actions {
		margin-left: auto;
	}
}

.tgwc-card {
	background: $color__white;
	padding: 16px;
	border-radius: 4px;
	border: 1px solid $border-color;
	box-shadow: 0 2px 8px transparentize($color__gray-900, 0.85);
}

.tgwc-icon {
	width: 1em;
	height: 1em;
	vertical-align: -0.125em;
	display: inline-block;
	font-size: inherit;
}

.tgwc-toggle-form {
	width: 28px;
	height: 16px;
	float: left;
	// margin-top: 3px;
	// margin-right: 4px;
	position: relative;

	input[type="checkbox"] {
		position: absolute;
		top: 0;
		bottom: 0;
		width: 100%;
		min-width: auto !important;
		opacity: 0;
		z-index: 1;

		&:checked {
			+ .slider {
				background-color: $color__primary;

				&::before {
					transform: translateX(100%);
				}
			}
		}
	}

	.slider {
		cursor: pointer;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		transition: 0.4s;
		background-color: #cdd0d2;

		&::before {
			content: "";
			width: 12px;
			height: 12px;
			position: absolute;
			left: 2px;
			bottom: 2px;
			transition: 0.4s;
			background-color: $color__white;
		}

		&.round {
			border-radius: 16px;

			&::before {
				border-radius: 50%;
			}
		}
	}
}
#tgwc-customization {
	margin-left: -20px;
	margin-top: 0px;
	margin-right: 0px;
	background: #fafafc;

	.notice,
	.error {
		margin-left: 24px;
		margin-right: 24px;
		border: 1px solid #dddddd;
		box-shadow: none;
	}

	.notice {
		width: inherit;
		&-dismiss {
			position: absolute !important;
		}

		&-warning {
			border-left-width: 4px;
			border-left-color: $color__yellow;
		}

		&-success {
			border-left-width: 4px;
			border-left-color: $color__green;
		}
	}

	.error {
		border-left-width: 4px;
		border-left-color: $color__red;
	}

	a {
		text-decoration: none;

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

	.button {
		transition: all 0.3s ease-in-out;
	}

	.default-border-8 {
		border-radius: 8px;
		border: 1px solid #edf2f7;
	}

	.background-white {
		background: #fff;
	}

	.tgwc-header {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		padding: 0 24px;
		align-items: center;
		border-bottom: 1px solid #edf2f7;
		background: #fff;

		@media screen and (max-width: 1340px) {
			gap: 24px;
			padding-bottom: 24px;
		}
		@media screen and (max-width: 575px) {
			flex-wrap: nowrap;
		}

		.nav-tab-wrapper {
			border: none;
			display: flex;
			align-items: center;
			gap: 36px;
			padding: 0;

			@media screen and (max-width: 575px) {
				gap: 0;
			}

			.tgwc-brand {
				display: flex;

				@media screen and (max-width: 782px) {
					display: none;
				}

				img {
					width: 160px;
				}
			}

			.nav-tabs {
				display: flex;
				gap: 12px;

				.tab {
					display: flex;
					justify-content: center;
					align-items: center;
					gap: 6px;
					position: relative;
					padding: 24px 12px;

					&:hover {
						p {
							color: $color__primary;
						}

						svg {
							path {
								stroke: $color__primary;
							}
						}
					}

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

					p {
						color: $color__gray-850;
						font-size: 14px;
						font-style: normal;
						font-weight: 500;
						line-height: 24px;
						transition: all 0.3s ease-in-out;
					}
					svg {
						width: 14px;
						height: 14px;

						path {
							transition: all 0.3s ease-in-out;
						}
					}

					&-active {
						&::after {
							content: "";
							position: absolute;
							background: $color__primary;
							width: 100%;
							height: 2px;
							bottom: 0;
						}

						p {
							color: $color__primary;
						}
					}
				}

				p {
					margin: 0;
				}
			}
		}

		.tgwc-endpoint-actions {
			display: flex;
			align-items: center;
			gap: 12px;

			#tgwc_view_my_account {
				width: 30px;
				height: 30px;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 0;
				border-radius: 4px;
				background: #f4f4f4;
				transition: all 0.3s ease-in-out;

				&:hover {
					background: $color__primary;

					svg {
						fill: $color__white;
					}
				}

				svg {
					width: 18px;
					height: 18px;
					fill: #929292;
					transition: all 0.3s ease-in-out;
				}
			}

			.button {
				display: flex;
				justify-content: center;
				align-items: center;
				gap: 6px;
				border-radius: 4px;
				border: 1px solid $color__primary;
				color: $color__primary;
				background: none;
				font-size: 14px;
				font-weight: 500;
				line-height: 24px;
				padding: 4px 12px 4px 10px;

				@media screen and (max-width: 575px) {
					padding: 0 6px 0 5px;
					font-size: 12px;
					display: flex;
				}

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

				svg {
					width: 16px;
					height: 16px;
					fill: $color__primary;
					transition: all 0.3s ease-in-out;
				}

				.btn-text {
					color: $color__primary;
					font-size: 14px;
					font-weight: 500;
					line-height: 24px;
					margin: 0;
					text-transform: capitalize;
					transition: all 0.3s ease-in-out;
				}

				&:hover {
					background: $color__primary;
					color: $color__white;
					border-color: $color__primary;

					svg {
						fill: $color__white;
					}

					.btn-text {
						color: $color__white;
					}
				}
			}

			.tgwc-add-tab {
				width: max-content;

				@media screen and (max-width: 960px) {
					display: block !important;
				}

				.tgwc-add-tab-btn {
					all: unset;
					display: flex;
					align-items: center;
					gap: 6px;
					color: $color__gray-850;
					cursor: pointer;
					transition: all 0.3s ease-in-out;

					svg {
						width: 22px;
						height: 22px;
						fill: $color__primary;
					}

					.label {
						font-size: 14px;
						font-weight: 500;
						line-height: 24px;
					}

					&:hover {
						color: $color__primary;
					}
				}
			}
		}
	}

	#tgwc-customization-form {
		padding: 8px 24px 24px 24px;
		gap: 24px;

		@media screen and (max-width: 782px) {
			padding-left: 32px;
		}

		.tgwc-tabs-with-sidenav {
			display: flex;
			gap: 20px;

			@media screen and (max-width: 960px) {
				position: relative;

				&.tgwc-sidecontent-over-shadow::before {
					content: "";
					position: absolute;
					top: -26px;
					left: 24px;
					width: 100%;
					height: calc(100% + 26px);
					background: #212529;
					opacity: 0.6;
					z-index: 3;
				}

				.tgwc-sidenav {
					position: absolute;
					top: -26px;
					left: -26px;
					height: calc(100% + 26px);
					z-index: 4;
					transition: left 0.3s ease-in-out;
					border-radius: 0px !important;

					&:not(.tgwc-sidenav--collapsed) {
						transform: translateX(0);
					}

					&.tgwc-sidenav--collapsed {
						transform: translateX(-99%);
					}

					.tgwc-sidenav-toggle {
						display: block !important;
						position: absolute;
						width: 27px;
						height: 48px;
						top: 25vh;
						left: calc(100% + 1px);
						transform: translateY(-50%);
						border: 0;
						background: #2563eb;
						fill: #ffff;

						&:not(.tgwc-sidenav-toggle--collapsed) {
							right: 0;
							border-right: 0px;
							border-left: 1px;
							border-top-left-radius: 4px;
							border-bottom-left-radius: 4px;
							border-top-right-radius: 0px;
							border-bottom-right-radius: 0px;
							transform: rotate(180deg);
							background: #fff;
							fill: #9b9b9b;
						}
					}
				}
			}

			.tgwc-sidenav {
				display: flex;
				flex-direction: column;
				padding: 24px;
				gap: 30px;
				max-width: 420px;
				width: 100%;

				.tgwc-add-tab {
					width: max-content;

					.tgwc-add-tab-btn {
						all: unset;
						display: flex;
						align-items: center;
						gap: 6px;
						color: $color__gray-850;
						cursor: pointer;
						transition: all 0.3s ease-in-out;

						svg {
							width: 22px;
							height: 22px;
							fill: $color__primary;
						}

						.label {
							font-size: 14px;
							font-weight: 500;
							line-height: 24px;
						}

						&:hover {
							color: $color__primary;
						}
					}
				}
			}

			&:hover {
				border: none;
			}

			.tgwc-sidecontent {
				flex: 1;
				padding: 24px 24px 32px 24px;

				@media screen and (max-width: 960px) {
					margin-left: 7px;
				}
				.tgwc-tabs-panel {
					&-header {
						padding-bottom: 20px;
						border-bottom: 1px solid $color__gray-350;
						margin-bottom: 24px;

						.header {
							display: flex;
							justify-content: space-between;
							align-items: center;

							.header-left {
								display: flex;
								align-items: center;
								gap: 12px;

								svg {
									width: 16px;
									height: 16px;
									aspect-ratio: 1/1;
								}

								h2 {
									color: $color__gray-850;
									font-size: 18px;
									font-weight: 500;
									line-height: 28px;
									margin: 0;
								}

								.type {
									display: flex;
									padding: 4px 6px;
									justify-content: center;
									align-items: center;
									gap: 10px;
									border-radius: 4px;
									background: transparent;
									border: 1px solid transparent;
									width: 32px;
									height: 32px;

									&-endpoint {
										border-color: $color__green-300;
										background: $color__green-100;

										svg {
											fill: $endpoint_color;
										}
									}

									&-group {
										border-color: $color__yellow-300;
										background: $color__yellow-100;

										svg {
											fill: $group_color;
										}
									}

									&-link {
										border-color: $color__blue-300;
										background: $color__blue-100;

										svg {
											fill: $link-color;
										}
									}
									&-primary {
										border-color: $color__primary;
										background: $color__primary;

										svg {
											fill: $color__primary;
										}
									}
								}
							}

							button {
								display: flex;
								padding: 6px 10px;
								align-items: center;
								gap: 6px;
								border-radius: 4px;
								background: #f34c4c;

								p {
									color: #fff;
									font-size: 13px;
									font-style: normal;
									font-weight: 500;
									line-height: 17px;
									margin: 0;
								}
							}
						}
					}
				}
			}
		}

		.form-btn-wrapper {
			display: flex;
			gap: 16px;
			margin-top: 24px;

			@media screen and (max-width: 960px) {
				margin-left: 15px;
			}

			.button {
				@include button;
			}

			#tgwc-submit {
				@include primary_button;
			}

			#tgwc-reset {
				@include secondary_button;
			}
		}

		.settings-content-wrapper,
		.debug-content-wrapper {
			display: flex;
			padding: 24px 24px 32px 24px;
			flex-direction: column;
			align-items: flex-start;
			gap: 30px;
			border-radius: 8px;
			border: 1px solid #edf2f7;
			background: #fff;

			.content-wrap {
				.tgwc-radio-image-group {
					display: flex;
					gap: 15px;
					margin: 15px 0;

					.tgwc-radio-image {
						position: relative;
						cursor: pointer;
						transition: all 0.3s ease;
						overflow: hidden;

						&:hover {
							border-color: #aaa;
							transform: translateY(-2px);
						}

						input[type="radio"] {
							border-radius: 4px;
							border: 2px;
							position: absolute;
							width: 1px;
							height: 1px;
							padding: 0;
							margin: -1px;
							overflow: hidden;
							clip: rect(0, 0, 0, 0);
							white-space: nowrap;
							border: 0;

							& + img {
								border-color: $color__gray-350;
							}

							&:checked + img {
								border-color: $color__primary;
							}

							&:focus-visible + img {
								outline: 2px solid #2196f3;
								outline-offset: 2px;
							}
						}

						img {
							display: block;
							width: 100px;
							height: auto;
							padding: 8px;
							border: 2px solid transparent;
							border-radius: 2px;
							background: #f8f9fa;
							object-fit: contain;
						}
					}
				}
			}
		}

		.settings-content-wrapper {
			.content-wrap {
				width: 100%;
			}
		}

		.tgwc-settings-developer-section {
			border-top: 1px solid #e1e1e1;
			padding-top: 30px;

			.tgwc-section-header {
				font-size: 16px;
				font-weight: 600;
				color: #23282d;
			}
		}

		.settings-table {
			width: 100%;

			&-wrapper,
			.tgwc-settings-developer-section {
				display: flex;
				flex-direction: column;
				gap: 30px;

				@media screen and (max-width: 1199px) {
					gap: 24px;
				}

				.row {
					display: flex;
					align-items: center;
					gap: 16px;

					@media screen and (max-width: 1199px) {
						flex-direction: column;
						align-items: flex-start;
						gap: 8px;
					}

					&:has(.tgwc-radio-image-group),
					&:has(.error),
					&:has(#wp-tgwc_endpoints_dashboard_content-wrap) {
						align-items: flex-start;

						.col-label {
							margin-top: 2px;
						}
					}

					&.tgwc-settings-row {
						display: grid;
						grid-template-columns: 0.5fr 1fr;
						gap: 40px;
						align-items: start;

						@media screen and (max-width: 782px) {
							grid-template-columns: 1fr;
							gap: 24px;
						}
					}

					.col {
						&-label {
							display: flex;
							align-items: center;
							gap: 4px;
							max-width: 240px;
							width: 100%;

							@media screen and (max-width: 1199px) {
								max-width: 180px;
							}

							@media screen and (max-width: 992px) {
								max-width: 100%;
							}

							p {
								color: $color__gray-850;
								font-size: 14px;
								font-weight: 500;
								line-height: 24px;
								margin: 0;
							}

							span[data-toggle="tgwc-tooltip"] {
								display: flex;
								svg {
									fill: #737373;
								}
							}

							&:has(.tgwc-frontend-libraries) {
								max-width: 100%;
							}

							.tgwc-frontend-libraries {
								h2 {
									color: $color__gray-850;
									font-size: 18px;
									font-weight: 500;
									line-height: 28px;
									margin: 0 0 8px;
								}

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

							&.tgwc-settings-col-label {
								flex-direction: column;
								align-items: start;
								max-width: 460px;

								.setting-label {
									font-size: 14px;
									font-weight: 600;
									color: $color__gray-850;
									margin-bottom: 6px;
								}

								.setting-help {
									font-size: 13px;
									color: #424242;
									line-height: 1.5;
									margin: 0;
								}
							}
						}

						&-input {
							max-width: 700px;
							width: 100%;
							color: #424242;
							font-size: 14px;
							font-weight: 400;
							line-height: 24px;
							display: flex;
							align-items: center;
							gap: 8px;

							&.tgwc-settings-developer-col-input {
								flex-direction: column;
								align-items: flex-start;
							}

							@media screen and (max-width: 1199px) {
								width: 100%;
							}

							.tgwc-toggle-section {
								input[type="checkbox"]:checked + .slider {
									background: #5c8cf5;
								}
							}

							span.description {
								font-size: 14px;
								line-height: 24px;
								color: #424242;
							}

							.enable {
								font-size: 14px;
								line-height: 24px;
								color: #424242;
							}

							input:not([type="checkbox"]),
							select {
								padding: 8px 10px 8px 14px;
								border-radius: 4px;
								border: 1px solid #e1e1e1;
								width: 100%;
								max-width: 100%;
								max-height: 38px;
								color: #424242;
								font-size: 14px;
								font-weight: 400;
								line-height: 24px;

								&::placeholder {
									color: #737373;
								}

								&:focus {
									border-color: $color__primary;
									box-shadow: none;
									outline: none;
								}

								@media screen and (max-width: 1199px) {
									width: 100%;
								}
							}

							// select {
							// 	-webkit-appearance: none;
							// 	-moz-appearance: none;
							// 	appearance: none;
							// 	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23737373' viewBox='0 0 24 24'%3E%3Cpath d='M19.561 7.403a1.468 1.468 0 0 1 2.02 0 1.339 1.339 0 0 1 0 1.944l-8.57 8.25a1.468 1.468 0 0 1-2.021 0l-8.572-8.25a1.339 1.339 0 0 1 0-1.944 1.468 1.468 0 0 1 2.02 0L12 14.68l7.561-7.278Z'/%3E%3C/svg%3E");
							// 	background-repeat: no-repeat;
							// 	background-position: right 8px center;
							// 	background-size: 14px;
							// }

							// input[type="checkbox"] {
							// 	appearance: none;
							// 	-webkit-appearance: none;
							// 	width: 18px;
							// 	height: 18px;
							// 	border: 1px solid #ccc;
							// 	border-radius: 4px;
							// 	outline: none;
							// 	cursor: pointer;
							// 	position: relative;

							// 	&:focus {
							// 		border-color: none;
							// 		outline: none;
							// 		box-shadow: none;
							// 	}

							// 	&:checked {
							// 		// border-color: $color__primary;
							// 		border-color: #5c8cf5;

							// 		&::before {
							// 			content: "";
							// 			// background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%232563EB' viewBox='0 0 24 24'%3E%3Cpath d='M18.586 5.586a2 2 0 1 1 2.828 2.828l-11 11a2 2 0 0 1-2.828 0l-5-5a2 2 0 0 1 2.677-2.966l.15.138L9 15.172l9.586-9.586Z'/%3E%3C/svg%3E");
							// 			background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%235c8cf5' viewBox='0 0 24 24'%3E%3Cpath d='M18.586 5.586a2 2 0 1 1 2.828 2.828l-11 11a2 2 0 0 1-2.828 0l-5-5a2 2 0 0 1 2.677-2.966l.15.138L9 15.172l9.586-9.586Z'/%3E%3C/svg%3E");
							// 			background-repeat: no-repeat;
							// 			background-size: 100%;
							// 			background-position: center;
							// 			width: 14px;
							// 			height: 14px;
							// 			position: absolute;
							// 			top: 4px;
							// 			left: 5px;
							// 		}
							// 	}
							// }

							.wp-editor-wrap {
								.wp-editor-tools {
									.button {
										color: $color__primary;
										border-color: $color__primary;
									}
								}

								&.html-active,
								&.tmce-active {
									.wp-editor-container {
										.quicktags-toolbar {
											display: flex;
											flex-wrap: wrap;

											.button {
												width: max-content;
											}
										}
									}
								}
							}

							.tgwc-radio-image-group {
								display: flex;
								align-items: center;
								margin: 0;
								gap: 20px;

								.tgwc-radio-image {
									cursor: pointer;

									input[type="radio"] {
										display: none;
										width: auto !important;

										&:checked ~ img {
											border-color: $color__primary;
										}
									}

									img {
										width: 150px;
										height: auto;
										border: 1.5px solid #e1e1e1;
										border-radius: 4px;
									}
								}
							}

							// Multiple dropdown select2 CSS
							.select2 {
								&-selection {
									min-height: 38px;
									border-color: #e1e1e1;
									cursor: pointer;

									&__rendered {
										padding: 0px 32px 0px 14px;
										border-color: #e1e1e1;
										line-height: 38px;
										display: block;

										.select2-search {
											margin-bottom: 0;

											&__field {
												padding: 0;
												border: 0;
												margin: 0;
												cursor: pointer;

												&::placeholder {
													color: #737373;
												}

												@media screen and (max-width: 1199px) {
													width: 100% !important;
												}
											}
										}

										.select2-selection__placeholder {
											color: #737373;
										}
									}

									&__arrow {
										top: 50%;
										right: 6px;
										transform: translateY(-50%);
										height: unset;
										position: absolute;
										width: 20px;

										b {
											all: unset;
											background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23737373' viewBox='0 0 24 24'%3E%3Cpath d='M19.561 7.403a1.468 1.468 0 0 1 2.02 0 1.339 1.339 0 0 1 0 1.944l-8.57 8.25a1.468 1.468 0 0 1-2.021 0l-8.572-8.25a1.339 1.339 0 0 1 0-1.944 1.468 1.468 0 0 1 2.02 0L12 14.68l7.561-7.278Z'/%3E%3C/svg%3E");
											background-repeat: no-repeat;
											background-position: center;
											background-size: 100%;
											width: 14px;
											height: 14px;
											display: block;
										}
									}

									&__clear {
										margin: 0;
										line-height: 36px;
										top: 50%;
										right: 24px;
										transform: translateY(-50%);
										height: unset;
										position: absolute;
										width: 20px;
									}

									&__choice {
										display: flex;
										align-items: center;
										gap: 4px;
										padding: 0 8px !important;
										margin: 4px 4px 4px 0 !important;
										max-height: 30px;
										background: #f4f4f4 !important;
										border-color: #e1e1e1 !important;

										&:nth-child(2) {
											margin-left: -10px !important;
										}

										&__remove {
											line-height: 16px;
										}
									}
								}

								&-container {
									width: 100% !important;

									@media screen and (max-width: 1199px) {
										width: 100% !important;
									}

									&--open {
										.select2-selection {
											border-color: $color__primary;
										}

										.select2-search {
											padding: 0 !important;
										}
									}
								}
							}

							.tgwc-toggle-section {
								.tgwc-toggle-form {
									margin: 0;
								}
							}

							&:has(.error) {
								flex-direction: column;
								align-items: flex-start;

								.error {
									// color: #f34c4c;
									color: $color__red;
									font-size: 13px;
									font-weight: 500;
									line-height: 20px;
									display: flex;
									align-items: center;
									gap: 8px;
									margin: 0;
									border: 0;

									&::before {
										content: "";
										background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23F34C4C' viewBox='0 0 24 24'%3E%3Cpath d='M20.182 12a8.182 8.182 0 1 0-16.364 0 8.182 8.182 0 0 0 16.364 0ZM22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Z'/%3E%3Cpath d='M11.091 12V8.363a.91.91 0 1 1 1.818 0V12a.91.91 0 1 1-1.818 0Zm.917 2.727.092.005a.91.91 0 0 1 0 1.809l-.092.004H12a.91.91 0 1 1 0-1.818h.008Z'/%3E%3C/svg%3E");
										background-repeat: no-repeat;
										background-size: 100%;
										background-position: center;
										width: 18px;
										height: 18px;
									}
								}
							}

							.tgwc_choose_icon_type_outer_wrapper {
								display: flex;
								flex-wrap: wrap;
								gap: 16px;

								.tgwc_choose_icon_type_inner_wrapper {
									padding: 8px 20px 8px 16px;
									border-radius: 4px;
									border: 1px solid #e1e1e1;
									background: #ffffff;
									cursor: pointer;
									display: flex;
									align-items: center;
									gap: 8px;
									transition: all 0.3s ease-in-out;

									input[type="radio"] {
										width: 16px;
										height: 16px;
										min-width: 16px;
										margin: 0;
										border: 1px solid #c3c4c7;
										border-radius: 50%;
										background: #fff;
										box-shadow: none;
										position: relative;
										cursor: pointer;
										appearance: none;
										-webkit-appearance: none;

										&:checked {
											border-color: $color__primary;

											&::before {
												content: "";
												position: absolute;
												inset: 3px;
												border-radius: 50%;
												background: $color__primary;
											}
										}
									}

									&:hover,
									&.active {
										border-color: $color__primary;
									}
								}
							}

							&.tgwc_custom_icon_uploader_inner_uploader_wrapper {
								flex-direction: column;
								align-items: start !important;

								.tgwc_custom_icon_uploader_box {
									padding: 20px;
									border-radius: 4px;
									border: 1px dashed #e1e1e1;
									width: 100%;
									cursor: pointer;
									position: relative;

									.tgwc-loader {
										position: absolute;
										width: 48px;
										height: 48px;
										border: 5px solid rgb(10, 10, 10);
										border-bottom-color: transparent;
										border-radius: 50%;
										display: inline-block;
										box-sizing: border-box;
										animation: rotation 1s linear infinite;
										z-index: 9999;
										top: 50%;
										left: 50%;
									}

									@keyframes rotation {
										0% {
											transform: rotate(0deg);
										}
										100% {
											transform: rotate(360deg);
										}
									}
									.tgwc_custom_icon_uploader_inner_content_wrapper {
										display: flex;
										flex-direction: column;
										align-items: center;
										gap: 10px;

										&.has_icon {
											display: none;
										}
									}

									.tgwc-custom-icon-preview {
										text-align: center;
										background-color: #fafafa;
										padding: 30px;
										position: relative;
										border-radius: 4px;

										img {
											max-width: 280px;
											max-height: 280px;
										}

										.tgwc_uploader_action_container {
											display: flex;
											position: absolute;
											gap: 6px;
											top: 10px;
											right: 10px;

											@media screen and (max-width: 575px) {
												top: 5px;
												right: 5px;
												gap: 4px;

												svg {
													width: 16px;
													height: 16px;
												}
											}

											svg {
												fill: #929292;
												width: 20px;
												height: 20px;
												margin-top: 3px;
											}
											.tgwc_uploader_edit_action,
											.tgwc_uploader_delete_action {
												padding: 3px 6px 0px;
												border-radius: 4px;
												&:hover {
													svg {
														fill: #383838 !important;
													}
													background: #eaeaea !important;
												}
											}
										}
									}
									.tgwc_inner_text {
										gap: 8px;
										display: flex;
										flex-direction: column;
										align-items: center;

										p {
											color: #383838;
											font-size: 13px;
											font-weight: 500;
											line-height: 23px;
											margin: 0 !important;
										}

										.tgwc_browse_files {
											color: #2563eb;
											font-size: 13px;
											font-weight: 500;
											line-height: 23px;
										}
										img {
											width: 20px;
											height: 20px;
										}
									}
								}

								.tgwc_custom_icon_uploader_inner_text {
									color: #737373;
									font-size: 14px;
									font-weight: 400;
									line-height: 150%;
								}
							}
						}
					}
				}
			}
		}
	}
}

// Multiple Dropdown select CSS
.select2 {
	&-container {
		&--open {
			.select2-search {
				padding: 8px;

				&__field {
					padding: 0 12px;
					min-height: 38px;
					border-color: #e1e1e1;

					&:focus {
						border-color: $color__primary;
						outline: none;
						box-shadow: none;
					}
				}
			}

			.select2-results {
				&__option {
					padding: 8px 12px;
					margin-bottom: 2px;

					&--highlighted[aria-selected] {
						background: $color__primary !important;
						color: $color__white !important;
					}
				}
			}

			.select2-dropdown {
				border-color: #e1e1e1;
			}
		}
	}
}

// Modal Popup Design Fix CSS
.toplevel_page_tgwc-customize-my-account {
	.ui-widget.ui-widget-content {
		&.ui-dialog {
			// width: 560px !important;
			width: 410px !important;
			padding: 20px;
			font-family: "Inter", sans-serif !important;

			@media screen and (max-width: 575px) {
				max-width: 300px !important;
			}

			&:has(.tgwc-tab-list) {
				width: 508px !important;
			}

			.ui-dialog-titlebar {
				padding: 0 0 16px;
				margin-bottom: 20px;
				border-bottom-color: #e1e1e1;

				.ui-dialog-title {
					display: flex;
					align-items: center;
					gap: 12px;
					color: $color__gray-850;
					font-size: 18px;
					font-weight: 500;
					line-height: 20px;
					margin: 0;

					.tgwc-poup-icon-wrap {
						display: flex;
						padding: 4px 6px;
						justify-content: center;
						align-items: center;
						gap: 10px;
						border-radius: 4px;
						background: transparent;
						border: 1px solid transparent;
						width: 32px;
						height: 32px;
						background: #fef1f1;

						svg {
							width: 16px;
							height: 16px;
							aspect-ratio: 1 / 1;
							fill: $color__red;
						}

						&.endpoint {
							@include endpoint_bg;

							svg {
								fill: $endpoint_color;
							}
						}

						&.group {
							@include group_bg;

							svg {
								fill: $group_color;
							}
						}

						&.link {
							@include link_bg;

							svg {
								fill: $link_color;
							}
						}
					}
				}

				.ui-dialog-titlebar-close {
					&:hover {
						border-color: #eaeaea;
						background: #eaeaea !important;
						::after {
							background-color: #383838 !important;
						}

						::before {
							background-color: #383838 !important;
						}
					}
				}
			}

			.ui-dialog-content {
				padding: 0;
				width: 100% !important;
				overflow: unset;

				form {
					label {
						color: $color__gray-850;
						font-size: 15px;
						font-weight: 500;
						line-height: 20px;
						margin-bottom: 8px;
					}

					input[type="text"] {
						font-family: "Inter", sans-serif;
						min-height: 38px;
						border-radius: 4px;
						border: 1px solid #e1e1e1;
						margin: 0;
						padding: 4px 12px;
						box-sizing: border-box;
						font-size: 14px;
						line-height: 24px;

						&:focus {
							outline: none;
							box-shadow: none;
							border-color: $color__primary;
						}
					}
				}

				.tgwc-dialog-content {
					gap: 16px;

					&:has(form) {
						flex-direction: column;

						form {
							> div {
								display: flex;
								align-items: center;
								gap: 8px;
								margin-bottom: 4px;
								cursor: pointer;

								&:last-child {
									margin-bottom: 0;
								}

								input[type="checkbox"] {
									margin-right: 0;
								}

								label {
									font-size: 14px;
									font-weight: 400;
									line-height: 24px;
									margin-bottom: 0;
									cursor: pointer;
								}
							}
						}
					}

					span {
						margin-right: 0;
					}

					p {
						color: #383838;
						font-size: 14px;
						font-weight: 400;
						line-height: 24px;
						margin-bottom: 0;
					}

					.tgwc-tab-list {
						width: 100%;

						.tgwc-endpoint-actions {
							display: flex;
							align-items: center;
							gap: 16px;

							@media screen and (max-width: 575px) {
								flex-direction: column;
								gap: 8px;
							}

							.button {
								display: flex;
								justify-content: left;
								align-items: center;
								gap: 12px;
								border-radius: 4px;
								border: 1px solid $color__primary;
								color: $color__primary;
								background: none;
								font-size: 16px;
								font-weight: 500;
								line-height: 26px;
								padding: 10px 12px 10px 10px;
								max-width: 155px;

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

								svg {
									width: 20px;
									height: 20px;
									fill: $color__primary;
									transition: all 0.3s ease-in-out;
								}

								.btn-text {
									color: $color__primary;
									font-size: 14px;
									font-weight: 500;
									line-height: 24px;
									margin: 0;
									text-transform: capitalize;
									transition: all 0.3s ease-in-out;
								}

								&:hover {
									background: $color__primary;
									color: $color__white;
									border-color: $color__primary;

									svg {
										fill: $color__white;
									}

									.btn-text {
										color: $color__white;
									}
								}
							}
						}
					}
				}

				.tgwc-dialog-notice {
					.notice {
						border-color: #ddd;
						box-shadow: none;

						&-warning {
							border-left-color: $color__yellow;
						}
					}
				}
			}

			.ui-dialog-buttonpane {
				border: 0;
				padding: 0;
				margin-top: 20px;

				.ui-dialog-buttonset {
					display: flex;
					align-items: center;
					justify-content: flex-end;
					float: unset;
					gap: 12px;

					.tgwc-button {
						font-family: "Inter", sans-serif;
						margin: 0;
						border-radius: 3px;
						border: 1px solid #e9e9e9;
						background: transparent;
						padding: 6px 14px;
						color: $color__gray-850;
						font-size: 14px;
						font-weight: 500;
						line-height: 21px;
						text-transform: capitalize;
						transition: all 0.3s ease-in-out;

						&:hover {
							background: #eaeaea;
							border-color: #eaeaea;
						}

						&--primary {
							color: $color__white;
							border: 1px solid $color__primary;
							background: $color__primary;

							&:hover {
								background: #1054e9;
								border-color: #1054e9;
							}
						}

						&--danger {
							background: $color__red;
							border: 1px solid $color__red;
							color: $color__white;

							&:hover {
								background: #e73131;
								border-color: #e73131;
							}
						}
					}
				}
			}
		}
	}
}

.dd-placeholder {
	background: #f0f4fd;
	border-radius: 4px;
	border-color: $color__primary;
}

.tgwc-sidenav-tab-anchor-wrap {
	display: flex;
	gap: 12px;
	align-items: center;
	width: 100%;
	transition: all 0.3s ease-in-out;

	&:has(.child-menu-wrap) {
		align-items: baseline;
	}

	.tgwc_dd_custom_handle {
		svg {
			width: 18px;
			height: 18px;
			margin-top: 3px;
		}
	}

	svg {
		width: 18px;
		height: 18px;
		aspect-ratio: 1/1;
		fill: #929292;

		&.dd-custom-handle {
			cursor: move;
		}
	}

	.endpoint,
	.group,
	.link {
		display: flex;
		align-items: center;
		gap: 12px;

		.label {
			color: $color__gray-850;
			font-size: 14px;
			font-weight: 400;
			line-height: 24px;
			flex: 1;
		}
	}

	.endpoint {
		> svg {
			fill: $endpoint_color;
		}
	}

	.group {
		> svg {
			fill: $group_color;
		}
	}

	.link {
		> svg {
			fill: $link-color;
		}
	}

	.type-wrap {
		// .label {
		// 	color: $color__gray-850;
		// 	font-size: 14px;
		// 	font-weight: 400;
		// 	line-height: 24px;
		// 	flex: 1;
		// }

		.type {
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 3px;
			border: 1px solid transparent;
			width: 22px;
			height: 22px;
			font-size: 12px;
			line-height: 14px;

			&-indicator {
				display: flex;
				align-items: center;
				flex-direction: row-reverse;
				gap: 8px;

				svg {
					display: none;
					width: 14px;
					height: 14px;
					cursor: pointer;
					margin-top: 0;
				}
			}

			&-endpoint {
				color: $color__green-600;
				border-color: $color__green-300;
				background: $color__green-100;
			}

			&-group {
				color: $color__yellow-600;
				border-color: $color__yellow-300;
				background: $color__yellow-100;
			}

			&-link {
				color: $color__blue-800;
				border-color: $color__blue-300;
				background: $color__blue-100;
			}
		}
	}
}

.wp-core-ui .notice.is-dismissible {
	margin-left: 24px;
	margin-right: 24px;
}

.tgwc_hidden {
	display: none !important;
}
.dd-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;

	.tgwc-sidenav-tab-action-wrap {
		border-radius: 4px;
		border-left: 3px solid #e0e0e0;
		padding: 12px 16px;
		background: rgba(224, 224, 224, 0.15);
		flex: 1;
		display: grid;
		grid-template-columns: 74% 20%;
		gap: 18px;
		cursor: pointer;
		transition: all 0.3s ease-in-out;

		&:hover,
		&.active {
			background: rgba(37, 99, 235, 0.07);
			border-left-color: $color__primary;
		}

		&:has(.dd-list):has(.tgwc-sidenav-tab-action-wrap) {
			&.active {
				background: rgba(37, 99, 235, 0.07);
				border-left-color: $color__primary;

				.dd-list {
					&.child-menu-wrap {
						&::before {
							content: none;
						}
					}

					.dd-item {
						.tgwc-sidenav-tab-action-wrap {
							&.active {
								.tgwc-sidenav-tab-anchor {
									.type-wrap {
										.label {
											color: $color__primary;
										}
									}
								}
							}
						}
					}
				}
			}
		}

		.actions-wrap {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			gap: 12px;

			.tgwc-toggle-section {
				input[type="checkbox"] {
					min-width: auto !important;

					&:checked + .slider {
						background: #5c8cf5;
					}
				}
			}

			.tgwc-button {
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 0;

				svg {
					fill: #929292;
					transition: all 0.3s ease-in-out;
				}

				&:hover {
					svg {
						fill: $color__red;
					}
				}
			}

			span[data-toggle="tgwc-tooltip"] {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 18px;
				height: 18px;
				cursor: not-allowed;

				svg {
					fill: #cecece;
				}
			}
		}

		> {
			.tgwc-sidenav-tab-anchor {
				grid-column: 1;
			}

			.actions-wrap {
				grid-column: 2;
			}

			.child-menu-wrap {
				grid-column: 1 / -1;
				width: 100%;
			}
		}

		.tgwc-sidenav-tab-anchor {
			padding-left: 0;
		}

		.dd-list {
			padding-left: 18px;

			&.child-menu-wrap {
				padding-left: 0 !important;
			}
		}
	}

	&.dd-dragel {
		.dd-item {
			.tgwc-sidenav-tab-anchor-wrap {
				.tgwc-sidenav-tab-action-wrap {
					border: 1px solid #e0e0e0;
					border-left-width: 3px;
					border-left-color: $color__primary;
				}
			}
		}
	}
}

#tgwc-smart-tags-selector {
	display: flex;
	gap: 4px;
	align-items: center;
	color: $color__primary;
	font-weight: 500;
	font-size: 13px;
	line-height: 20px;
	text-decoration: underline;
	cursor: pointer;
	margin-left: 4px;
	margin-right: 8px;

	svg {
		fill: $color__primary;
		width: 15px;
		height: 15px;
	}

	& ~ .select2-container {
		visibility: hidden;
		position: absolute;
		right: 0;
		width: 120px !important;
	}
}

.select2-container {
	&--open {
		&:not(.tgwc-hide-select2) {
			.tgwc-select2-dropdown {
				@media screen and (max-width: 575px) {
					&.select2-dropdown--above,
					&.select2-dropdown--below {
						left: -40px !important;
					}
				}

				&.select2-dropdown--above,
				&.select2-dropdown--below {
					width: 200px !important;
					left: 40px;
					border-top: 1px solid #e1e1e1;
					border-bottom: 1px solid #e1e1e1;

					.select2-search--dropdown {
						position: relative;
					}

					.tgwc-select2-title {
						display: block;
						padding: 4px;
						border-radius: 4px;
						color: #383838;

						p {
							padding: 6px 8px;
							background-color: #f4f4f4;
							font-size: 13px;
							font-weight: 600;
							margin: 0px;
						}
					}

					ul {
						&.select2-results__options {
							max-height: 250px !important;
							overflow-y: auto;
							border-top: 1px solid #ccc;

							&::-webkit-scrollbar {
								width: 4px;
							}

							&::-webkit-scrollbar-thumb {
								background-color: #aaa;
								border-radius: 10px !important;
							}

							li {
								&.select2-results__option--highlighted,
								&[data-selected="true"] {
									background: #f8f8fa;
									color: #475bb2;
									border: none;
								}
							}
						}
					}

					.select2-search {
						display: flex;
						align-items: center;
						color: #999999;
						margin: 4px 6px 8px;
						padding: 0;

						.select2-search__field {
							font-size: 13px;
							padding-left: 34px;
							border-color: #e1e1e1;

							&:focus {
								border-color: $color__primary;
							}
						}

						.search-icon {
							position: absolute;
							top: 50%;
							transform: translateY(-50%);
							left: 12px;
							color: #999;
							display: flex;

							svg {
								width: 18px;
								height: 18px;
							}
						}
					}
				}
			}
		}
	}
}

.settings-table-wrapper {
	.wp-editor-tools {
		.wp-media-buttons {
			display: flex;
			align-items: center;
		}
	}
}

// Editor media buttons (Add Media, Add Form, Add Smart Tags, …) — match the pro
// plugin: aligned icon + text, and hidden until JS removes the dead foreign
// "Add Smart Tags" duplicate so it doesn't flash on reload.
body.toplevel_page_tgwc-customize-my-account {
	.wp-media-buttons {
		visibility: hidden;
	}

	&.tgwc-media-buttons-ready .wp-media-buttons {
		visibility: visible;
	}

	.wp-media-buttons .button {
		display: inline-flex;
		align-items: center;
		gap: 4px;
		line-height: 18px;
		font-weight: 500;
		font-size: 13px;

		svg,
		img,
		.wp-media-buttons-icon {
			margin: 0;
			vertical-align: middle;
		}
	}
}

// Select and Input type checkbox custom design
select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23737373' viewBox='0 0 24 24'%3E%3Cpath d='M19.561 7.403a1.468 1.468 0 0 1 2.02 0 1.339 1.339 0 0 1 0 1.944l-8.57 8.25a1.468 1.468 0 0 1-2.021 0l-8.572-8.25a1.339 1.339 0 0 1 0-1.944 1.468 1.468 0 0 1 2.02 0L12 14.68l7.561-7.278Z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 8px center;
	background-size: 14px;
}

input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	width: 18px;
	height: 18px;
	border: 1px solid #ccc;
	border-radius: 4px;
	outline: none;
	cursor: pointer;
	margin: 0;
	position: relative;

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

	&:checked {
		border-color: #5c8cf5;

		&::before {
			content: "";
			background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%235c8cf5' viewBox='0 0 24 24'%3E%3Cpath d='M18.586 5.586a2 2 0 1 1 2.828 2.828l-11 11a2 2 0 0 1-2.828 0l-5-5a2 2 0 0 1 2.677-2.966l.15.138L9 15.172l9.586-9.586Z'/%3E%3C/svg%3E");
			background-repeat: no-repeat;
			background-size: 100%;
			background-position: center;
			width: 14px;
			height: 14px;
			position: absolute;
			top: 4px;
			left: 5px;
		}
	}
}

div[role="tooltip"] {
	box-shadow: 0 4px 20px 0 rgba(32, 32, 32, 0.08) !important;

	.ui-tooltip-content {
		background: $color__white;
		border-radius: 4px;
		color: #383838;
		text-align: center;
		font-family: Inter;
		font-size: 13px;
		font-weight: 400;
		line-height: 18px;
		padding: 10px !important;

		&::after {
			background: $color__white !important;
		}
	}
}

.tgwc-sidenav-toggle {
	right: 0;
	border: 1px solid #edeff7;
	border-left: 0px;
	width: 26px;
	padding: 0px 8px;
	border-top-right-radius: 4px;
	border-bottom-right-radius: 4px;
	border-top-left-radius: 0px;
	border-bottom-left-radius: 0px;
	z-index: 1;
	cursor: pointer;
	box-sizing: border-box;
}

.mce-tinymce.mce-container.mce-panel.mce-fullscreen {
	width: 88% !important;
	top: 40px;
	left: 10%;
}

/* ==========================================================================
   Premium feature upsell — crown badge, upgrade popup & locked states
   ========================================================================== */
.toplevel_page_tgwc-customize-my-account .tgwc-pro {
	position: relative;
	display: inline-flex;
	align-items: center;
	vertical-align: middle;
}
.toplevel_page_tgwc-customize-my-account .tgwc-pro__crown {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border-radius: 4px;
	background-color: #ff8c39;
	color: #fff;
	cursor: pointer;
	flex: 0 0 auto;
}
.toplevel_page_tgwc-customize-my-account .tgwc-pro__crown svg {
	width: 12px;
	height: 12px;
	stroke: #fff;
	fill: none;
}
.toplevel_page_tgwc-customize-my-account .tgwc-pro__popup {
	position: absolute;
	top: calc(100% + 12px);
	left: 50%;
	transform: translateX(-50%) translateY(6px);
	z-index: 9999;
	width: 240px;
	padding: 20px;
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.15s ease, transform 0.15s ease;
	text-align: left;
	white-space: normal;
}
.toplevel_page_tgwc-customize-my-account .tgwc-pro__popup::before {
	content: "";
	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%);
	border: 7px solid transparent;
	border-bottom-color: #fff;
}
.toplevel_page_tgwc-customize-my-account .tgwc-pro:hover .tgwc-pro__popup,
.toplevel_page_tgwc-customize-my-account .tgwc-pro__crown:focus + .tgwc-pro__popup {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateX(-50%) translateY(0);
}
.toplevel_page_tgwc-customize-my-account .tgwc-pro__popup-text {
	display: block;
	margin-bottom: 12px;
	font-size: 13px;
	line-height: 1.5;
	color: #23282d;
	font-weight: 400;
}
.toplevel_page_tgwc-customize-my-account .tgwc-pro__popup-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	background: #ff8c39;
	color: #fff !important;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	border-radius: 4px;
	box-shadow: none;
}
.toplevel_page_tgwc-customize-my-account .tgwc-pro__popup-btn:hover {
	background: #f57c1f;
	color: #fff !important;
}
.toplevel_page_tgwc-customize-my-account .tgwc-pro__popup-btn-icon {
	display: inline-flex;
}
.toplevel_page_tgwc-customize-my-account .tgwc-pro__popup-btn-icon svg {
	width: 14px;
	height: 14px;
	stroke: #fff;
	fill: none;
}

/* Locked "Customizer" tab */
.toplevel_page_tgwc-customize-my-account .tgwc-tab--locked {
	position: relative;
	display: flex;
	align-items: center;
	gap: 6px;
	cursor: default;
}
.toplevel_page_tgwc-customize-my-account .tgwc-tab--locked::after {
	content: "";
	position: absolute;
	bottom: -14px;
	left: 0;
	right: 0;
	height: 14px;
}
.toplevel_page_tgwc-customize-my-account .tgwc-tab--locked p {
	color: #868e96;
}

/* Locked action-bar buttons (Add endpoint / Add group) */
.toplevel_page_tgwc-customize-my-account .tgwc-locked-action {
	position: relative;
	display: inline-flex;
	align-items: center;
}
.toplevel_page_tgwc-customize-my-account .tgwc-locked-action::after {
	content: "";
	position: absolute;
	bottom: -14px;
	left: 0;
	right: 0;
	height: 14px;
}
.toplevel_page_tgwc-customize-my-account .tgwc-button--locked,
.toplevel_page_tgwc-customize-my-account .tgwc-button--locked:hover {
	cursor: not-allowed;
	pointer-events: none;
}
.toplevel_page_tgwc-customize-my-account .tgwc-button--locked > svg,
.toplevel_page_tgwc-customize-my-account .tgwc-button--locked .btn-text {
	opacity: 0.5;
}
.toplevel_page_tgwc-customize-my-account .tgwc-locked-action .tgwc-pro {
	position: static;
	display: contents;
}

/* Locked settings rows (Default Endpoint / AJAX Navigation) */
.toplevel_page_tgwc-customize-my-account .tgwc-settings-row--locked .setting-label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.toplevel_page_tgwc-customize-my-account .tgwc-settings-row--locked .tgwc-label-text,
.toplevel_page_tgwc-customize-my-account .tgwc-settings-row--locked .setting-help {
	opacity: 0.5;
}
.toplevel_page_tgwc-customize-my-account .tgwc-settings-row--locked .tgwc-locked-control {
	opacity: 0.5;
	pointer-events: none;
}
.toplevel_page_tgwc-customize-my-account .tgwc-pro__crown svg path,
.toplevel_page_tgwc-customize-my-account .tab:hover .tgwc-pro__crown svg path {
	stroke: #fff !important;
	fill: none !important;
}

/* Upsell refinements: hover triggers + disabled customizer color */
.toplevel_page_tgwc-customize-my-account .tgwc-tab--locked:hover .tgwc-pro__popup,
.toplevel_page_tgwc-customize-my-account .tgwc-locked-action:hover .tgwc-pro__popup {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateX(-50%) translateY(0);
}
.toplevel_page_tgwc-customize-my-account .tgwc-tab--locked,
.toplevel_page_tgwc-customize-my-account .tgwc-tab--locked:hover {
	cursor: not-allowed;
}
.toplevel_page_tgwc-customize-my-account .tgwc-tab--locked p,
.toplevel_page_tgwc-customize-my-account .tgwc-tab--locked:hover p {
	color: #a7aaad !important;
}

/* Keep popup button crown white even inside a hovered .tab */
.toplevel_page_tgwc-customize-my-account .tgwc-pro__popup-btn-icon svg,
.toplevel_page_tgwc-customize-my-account .tgwc-pro__popup-btn-icon svg path,
.toplevel_page_tgwc-customize-my-account .tab:hover .tgwc-pro__popup-btn-icon svg path {
	stroke: #fff !important;
	fill: none !important;
}

/* Inline crown inside locked action buttons (no absolute positioning) */
.toplevel_page_tgwc-customize-my-account .tgwc-locked-action__crown {
	margin-left: 6px;
	vertical-align: middle;
	flex: 0 0 auto;
}

/* Feature list popup (customizer tab) */
.toplevel_page_tgwc-customize-my-account .tgwc-pro--has-features .tgwc-pro__popup {
	width: 550px;
	padding: 24px;
}
.toplevel_page_tgwc-customize-my-account .tgwc-pro__popup-title {
	display: block;
	margin-bottom: 16px;
	font-size: 15px;
	font-weight: 700;
	color: #1d2327;
	line-height: 1.4;
}
.toplevel_page_tgwc-customize-my-account .tgwc-pro__features {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px 20px;
	list-style: none;
	margin: 0 0 18px;
	padding: 0;
}
.toplevel_page_tgwc-customize-my-account .tgwc-pro__feature-item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 0;
}
.toplevel_page_tgwc-customize-my-account .tgwc-pro__feature-icon {
	flex: 0 0 34px;
	width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f0ebff;
	border-radius: 8px;
	color: #7c3aed;
}
.toplevel_page_tgwc-customize-my-account .tgwc-pro__feature-icon svg {
	width: 16px;
	height: 16px;
	stroke: currentColor;
	fill: none;
}
.toplevel_page_tgwc-customize-my-account .tgwc-pro__feature-content {
	display: flex;
	flex-direction: column;
	gap: 3px;
}
.toplevel_page_tgwc-customize-my-account .tgwc-pro__feature-title {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: #1d2327;
	line-height: 1.3;
}
.toplevel_page_tgwc-customize-my-account .tgwc-pro__feature-desc {
	display: block;
	font-size: 12px;
	color: #6b7280;
	line-height: 1.45;
}

// Locked (Pro) endpoint banner fields.
.toplevel_page_tgwc-customize-my-account {
	.tgwc-locked-label {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		margin: 0;
	}

	.col-input.tgwc-locked-field .tgwc-select--locked {
		width: 100%;
		opacity: 0.6;
		cursor: not-allowed;
		pointer-events: none;
		background: #f4f4f4;
	}
}