.zoom-instagram-widget .button-connect {
    /*height: auto;*/
    /*padding: 9px 12px;*/
    color: #fff;
    border: 1px solid #1c5380;
    border-radius: 3px;
    background-color: #6f97b6;
    background-image: -webkit-linear-gradient(top, #6f97b6, #3f729b);
    background-image: linear-gradient(to bottom, #6f97b6, #3f729b);
    background-position: 50% 50%;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), inset 1px 0 0 rgba(255, 255, 255, 0.05), inset -1px 0 0 rgba(255, 255, 255, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    text-shadow: 0 1px 1px #1c5380;
}

.zoom-instagram-widget .button-connect:focus,
.zoom-instagram-widget .button-connect:hover {
    border-color: #1c5380;
    color: #fff;
    background-image: -webkit-linear-gradient(top, #5D87A8, #3f729b);
    background-image: linear-gradient(to bottom, #5D87A8, #3f729b);
}

.zoom-instagram-widget {
    background: #fff;
    padding: 30px;
    border: 1px solid #DDD;
    border-radius: 3px;
    margin: 30px 10px 30px 0 !important;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
    max-width: 700px;
}

.zoom-themes-link {
    border: 1px solid #E2E9EC;
    /*background: #F7FAFA url('../images/wpzoom.png') no-repeat center bottom;*/
    padding: 30px 30px 260px 30px;
    border-radius: 3px;
    margin: 30px 0 30px 0 !important;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
    max-width: 700px;
    text-align: center;
}

.zoom-themes-link p {
    font-size: 15px;
    line-height: 1.6;
}

.cta-button {
    text-align: center;
    text-decoration: none;
    color: #fff;
    background: #3EBD3E;
    padding: 10px 15px;
    display: inline-block;
    border-radius: 3px;
    box-shadow: 0 -1px 1px rgba(0,0,0, 0.2) inset;
    border: 1px solid #259425;
    font-size: 16px;
    text-shadow: 1px 1px rgba(0, 0, 0, 0.3);
}
.cta-button:hover {
    background: #2A9B2A;
    color: #fff;
}

#wpzoom-instagram-widget-settings_transient-lifetime-value{
    max-width: 150px;
    float: left;
}

#wpzoom-instagram-widget-settings_transient-lifetime-type{
    float: left;
    max-width: 100px;
}

.zoom-instagram-widget .wpzoom-instagram-widget-with-access-token-group {
    background-color: #fff6f6;
}

.zoom-instagram-widget .wpzoom-instagram-widget-with-basic-access-token-group,
.zoom-instagram-widget .wpzoom-instagram-widget-without-access-token-group {
    background-color: #e0f0e3;
}

.zoom-instagram-widget .wpzoom-instagram-widget-with-basic-access-token-group th,
.zoom-instagram-widget .wpzoom-instagram-widget-without-access-token-group th {
    padding-left: 10px;
}

.zoom-instagram-widget .label-wrap input[type=radio]:checked + label[for='wpzoom-instagram-widget-settings_with-basic-access-token'],
.zoom-instagram-widget .label-wrap input[type=radio]:checked + label[for='wpzoom-instagram-widget-settings_without-access-token'] {
    background-color: #e0f0e3;
}

.zoom-instagram-widget .label-wrap input[type=radio]:checked + label[for='wpzoom-instagram-widget-settings_with-access-token'] {
    background-color: #fff6f6;
}

.zoom-instagram-widget .wpzoom-instagram-widget-settings-request-type-wrapper {
    display: flex;
    flex-direction: column;
}

.zoom-instagram-widget .wpzoom-instagram-widget-settings-request-type-wrapper .label-wrap {
    display: flex;
    align-items: center;
}

.zoom-instagram-widget .wpzoom-instagram-widget-settings-request-type-wrapper .label-wrap input[type=radio] {
    z-index: 2;
}

.zoom-instagram-widget .wpzoom-instagram-widget-settings-request-type-wrapper .label-wrap label {
    padding: 10px;
    width: 100%;
    margin-left: -30px;
    padding-left: 40px;
    z-index: 1;
}

.zoom-instagram-widget form h2 {
    border-top: 2px solid #eee;
    padding-top: 40px;
}


.zoom-instagram-widget .wpzoom-instagram-widget-with-token-group > td {
    padding-right: 0px;
}


.zoom-instagram-user-avatar-media-uploader .remove-avatar {
    margin: 6px 20px;
    color: #a00;
}

.zoom-instagram-user-avatar-media-uploader .file-wrapper{
    margin-top: 10px;
}
#wpzoom-instagram-widget-settings-user-info-biography{
    width: 100%;
    min-height: 100px;
}






/* New styles... */

// @import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
// @import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@600&display=swap');

.wpz-insta-admin {
	$primary-color: #3496ff;
	$secondary-color: #70b5fe;
	$light-color: #fff;
	$light-grey-color: #ddd;
	$lighter-grey-color: #eee;
	$very-light-grey-color: #fafafa;
	$blue-grey-color: #81909c;
	$darker-blue-grey-color: #9ca2a7;
	$green-color: #22bb66;
	$light-green-color: #3bdb82;
	$red-color: #ec2439;
	$light-red-color: #f05161;
	$orange-color: #f57c00;
	$dark-color: #000;
    $main-font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
    // $main-font-family: 'Inter', Tahoma, Verdana, sans-serif;
	$main-font-color: #242628;
	// $mono-font-family: 'Roboto Mono', monospace;
    $mono-font-family: monospace;

	&.post-php {
		#wpbody-content {
			padding-bottom: 0;

			> .wrap #poststuff #post-body #post-body-content .wpz-insta_tabs-content .wpz-insta_sidebar {
				.wpz-insta_sidebar-left .wpz-insta_sidebar-left-section,
				.wpz-insta_widget-preview .wpz-insta_widget-preview-view {
					// height: calc(100vh - 500px);
                    max-height: 60vh;
					min-height: 200px;
				}
			}
		}
	}

    #wpfooter {
        position: relative;
    }

	#wpbody-content {
		padding-bottom: 165px;

		.urgent {
			color: $red-color;
		}

		.featured-off {
			display: none !important;
		}

		.pro-only {
			position: absolute;
			top: 0;
			right: 0;
			line-height: 1.5;
			color: $light-color;
			background: $orange-color;
			padding: 0 4px;
			border-radius: 2px;
			transform: translate(50%, -50%);
		}

		.notice-warning {
			display: block;
			padding: 11px 15px;
			margin: 10px 0 0;
		}

		> .wrap {
			> h1.wp-heading-inline,
			> .page-title-action,
			> .wp-header-end,
			> .wpz-insta-wrap ~ #posts-filter > .search-box,
			> .wpz-insta-wrap ~ #posts-filter > .tablenav,
			> .wpz-insta-wrap ~ #posts-filter > .wp-list-table > tfoot,
			#titlediv {
				display: none !important;
			}

			.wpz-insta-notices .notice {
				display: block !important;
			}

			input, textarea, select {
				font-family: $main-font-family;
				font-weight: normal;
				color: $main-font-color;
				border: 1px solid $darker-blue-grey-color;
				border-radius: 2px;
				box-shadow: none;
				transition: all 0.3s ease;

				&:hover, &:focus {
					color: $main-font-color;
					border-color: $primary-color;
				}
			}

			input {
				// font-family: $mono-font-family;
				color: $main-font-color;

				&.wpz-insta_input {
					font-family: $main-font-family;
				}

				&.wpz-insta_input-nobg {
					background: transparent;
				}

				&[type='checkbox'] {
					display: inline-flex;
					align-items: center;
					justify-content: center;
					color: $light-color;
					background-color: $light-color;
					height: 1.25rem;
					width: 1.25rem;
					border: none;
					border-radius: 2px;
					box-shadow: inset 0 0 0 1px $blue-grey-color;
					transition: all 0.3s ease;

					&:hover {
						background-color: $light-grey-color !important;
						box-shadow: inset 0 0 0 1px $blue-grey-color !important;

						&:checked {
							background-color: $secondary-color !important;
							box-shadow: inset 0 0 0 1px transparent !important;
						}
					}

					&:focus {
						outline: none;
						box-shadow: inset 0 0 0 1px $blue-grey-color;

						&:checked {
							box-shadow: inset 0 0 0 1px transparent;
						}
					}

					&::before {
						transition: all 0.3s ease;
					}

					&:checked {
						background-color: $primary-color;
						box-shadow: inset 0 0 0 1px transparent;

						&::before {
							content: url('data:image/svg+xml;utf8,%3Csvg%20width%3D%2214%22%20height%3D%2212%22%20viewBox%3D%220%200%2014%2012%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12.779%201.00004L5.3618%2010.9753L1.06089%207.77735%22%20stroke%3D%22white%22%20stroke-width%3D%221.2%22%2F%3E%3C%2Fsvg%3E%0A');
							display: block;
							float: none;
							height: auto;
							width: auto;
							margin: 0;
						}
					}
				}
			}

			.disabled,
			.disable {
				pointer-events: none;
			}

			.disable {
				opacity: 0.5;
			}

			.help {
				display: inline-block;
				cursor: help;
				font-size: 20px;
				vertical-align: text-bottom;
				height: 16px;
				width: 16px;
				transition: all 0.2s ease;
                position: relative;

				// &::before {
				// 	content: '';
				// 	display: block;
				// 	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='16' height='16'%3E%3Cpath fill='%23000' fill-rule='evenodd' clip-rule='evenodd' d='M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm-1 16v-2h2v2h-2zm2-3v-1.141A3.991 3.991 0 0016 10a4 4 0 00-8 0h2c0-1.103.897-2 2-2s2 .897 2 2-.897 2-2 2a1 1 0 00-1 1v2h2z'%3E%3C/path%3E%3C/svg%3E");
				// 	height: 100%;
				// 	width: 100%;
				// 	transition: all 0.2s ease;
				// }

				// &:hover {
				// 	opacity: 1;
				// }
			}

			.wide-text-field {
				padding: 0;
				margin: 0 0 2em;

				label {
					> strong {
						font-size: 15px !important;
					}

					> em {
						color: rgba($main-font-color, 0.8);
					}
				}

				input[type='text'] {
					display: block;
					font-family: $main-font-family;
					font-size: 15px;
					font-weight: normal;
					line-height: 40px;
					color: $main-font-color;
					width: 100%;
					min-height: 40px;
					padding: 0 10px;
					box-sizing: border-box;
					margin: 0.7em 0;
				}
			}

			.submit-button {
				padding: 0;
				margin: 0;
			}

			.button.disabled {
				pointer-events: none !important;
			}

			.button:not(.wp-color-result),
			.button-primary,
			.button-secondary {
				display: inline-flex;
				align-items: center;
				justify-content: center;
				font-family: $main-font-family;
				font-size: 13px;
				font-weight: 600;
				line-height: 35px;
				min-height: 35px;
				padding: 0 12px;
				border: 0;
				border-radius: 2px;
				transition: all 0.2s ease;

				&.button-large {
					min-height: 48px;
					padding: 0 40px;
					margin: 0;
				}
			}

			.button.wp-color-result {
				font-family: $main-font-family;
				font-size: 13px;
			}

			.button-primary {
				color: $light-color;
				background: $primary-color;

				&:hover,
				&:active {
					color: $light-color;
					background: $secondary-color;
				}

				&.button-positive {
					color: $light-color;
					background: $green-color;

					&:hover,
					&:active {
						background: $light-green-color;
					}
				}

				&.button-negative {
					color: $light-color;
					background: $red-color;

					&:hover,
					&:active {
						background: $light-red-color;
					}
				}
			}

			.button-secondary {
				color: $blue-grey-color;
				background: $light-color;
				box-shadow: inset 0 0 0 1px $light-grey-color;

				&:hover,
				&:active {
					background: $light-grey-color;
				}

				&.button-positive {
					color: $green-color;
					background: $light-color;
					box-shadow: inset 0 0 0 1px $green-color;

					&:hover,
					&:active {
						color: $main-font-color;
						background: $light-color;
						box-shadow: inset 0 0 0 1px $main-font-color;
					}
				}

				&.button-negative {
					color: $red-color;
					background: $light-color;
					box-shadow: inset 0 0 0 1px $red-color;

					&:hover,
					&:active {
						color: $main-font-color;
						background: $light-color;
						box-shadow: inset 0 0 0 1px $main-font-color;
					}
				}
			}

			.button-link {
				color: $primary-color;
				transition: all 0.2s ease;

				&.wpz-insta_button-link {
					font-weight: normal;
					line-height: 1;
					min-height: 0;
					padding: 0;
					margin: 1.5em 0 0;

					&:hover,
					&:active,
					&:focus {
						color: $secondary-color;
						background: transparent;
					}
				}

				&:hover,
				&:active,
				&:focus {
					color: $secondary-color;
				}
			}

			.wpz-insta_suffixed-number-input {
				display: flex;
				gap: 12px;

				> * {
					margin: 0;

					&:first-child {
						flex-grow: 1;
					}
				}
			}

			.wpz-insta_profile-photo {
				display: block;
				height: 100px;
				width: 100px;
				border-radius: 50%;
			}

			a {
				text-decoration: none;
				color: $primary-color;
				transition: all 0.2s ease;

				&:hover,
				&:active,
				&:focus {
					text-decoration: none;
					color: $secondary-color;
				}

				&.linked {
					border-bottom: 1px solid rgba($primary-color, 0.3);

					&:hover,
					&:active,
					&:focus {
						border-bottom-color: rgba($secondary-color, 0.3);
					}
				}
			}

			.wpz-insta_back-button {
				display: inline-flex;
				align-items: center;
				font-family: $main-font-family;
				font-size: 14px;
				font-weight: 600;
				text-decoration: none;
				color: $main-font-color;
				margin: 10px 0 0;
				transition: all 0.2s ease;

				&:hover, &:active {
					color: $primary-color;

					svg {
						color: $primary-color;
						fill: $primary-color;
					}
				}

				svg {
					color: $main-font-color;
					fill: $main-font-color;
					margin: 0 6px 0 0;
					transition: all 0.2s ease;
				}
			}

			.wpzinsta-pointer {
				position: absolute;
				top: calc(100% + 3px);
				left: 50%;
				z-index: 1000;
				cursor: default;
				font-size: 14px;
				color: $light-color;
				background: $primary-color;
				width: max-content;
				padding: 4px 10px;
				border-radius: 3px;
				box-shadow: 1px 1px 2px rgba($dark-color, 0.3);
				transform: translateX(-50%);
				animation-name: bounceFade;
				animation-duration: 1s;
				animation-fill-mode: both;

				> i {
					position: absolute;
					top: -10px;
					left: 50%;
					pointer-events: none;
					height: 10px;
					width: 20px;
					transform: translateX(-50%);
					overflow: hidden;

					&::before {
						content: '';
						position: absolute;
						left: 50%;
						bottom: -4px;
						pointer-events: initial;
						background: $primary-color;
						height: 8px;
						width: 8px;
						box-shadow: 0 0 2px rgba($dark-color, 0.3);
						transform: translateX(-50%) rotateZ(45deg);
					}
				}
			}

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

			.wpz-insta_settings-add-new a,
			#wpz-insta_tabs-config-cnnct .wpz-insta_tabs-config-connect-add {
				position: relative;
			}

			.wp-picker-container {
				display: inline-flex;
				position: relative;

				&:not(:focus-within) {
					.wp-picker-holder {
						pointer-events: none;
						opacity: 0;
					}
				}

				.wp-color-result {
					position: absolute;
					top: 50%;
					left: 5px;
					pointer-events: none;
					height: 20px;
					min-height: 0;
					width: 20px;
					padding: 0;
					border-radius: 4px;
					margin: 0;
					transform: translateY(-50%);

					&:active {
						transform: translateY(-50%) !important;
					}

					.wp-color-result-text {
						display: none;
					}
				}

				.wp-picker-input-wrap {
					display: block;

					input {
						line-height: 2;
						width: auto;
						padding-left: 30px;
					}

					.wp-picker-clear,
					.wp-picker-default {
						display: none;
					}
				}

				.wp-picker-holder {
					display: block;
					position: fixed;
					top: 100%;
					left: 0;
					z-index: 999;
					transition: all 0.2s ease;

					.iris-picker {
						display: block !important;
					}
				}
			}

			.wpz-insta_two-columns {
				display: flex;
				align-items: center;
				list-style: none;
				padding: 0;
				margin: 1.5em 0 0;

				&.wpz-insta_two-columns-left-small {
					align-items: flex-start;
					gap: 30px;
					margin-top: 0;

					> * {
						text-align: left !important;

						&:first-child {
							flex-grow: 0;
							width: auto;
						}
					}
				}

				> * {
					flex-grow: 1;
					list-style: none;
					width: 100%;
					padding: 0;
					margin: 0;

					&:first-child {
						text-align: left;
					}

					&:last-child {
						// text-align: right;

                        select {
                            padding: 3px 55px 2px 10px;
                        }
					}
				}
			}

			.wpz-insta_image-select {
				display: flex;
				flex-wrap: wrap;
				gap: 10px;
				margin: 5px 0 0;

				&.hidden {
					display: none;
				}

				label {
					text-align: center;
					color: $blue-grey-color;
					transition: all .3s ease;

					&:hover {
						color: $darker-blue-grey-color;

						svg {
							color: $darker-blue-grey-color;
							fill: $darker-blue-grey-color;
						}
					}

					input {
						display: none;

						&:checked {
							& + span {
								color: $primary-color;
								fill: $primary-color;

								svg {
									color: $primary-color;
									fill: $primary-color;
								}
							}
						}
					}

					span {
						display: block;
					}

					svg {
						display: block;
						color: $blue-grey-color;
						fill: $blue-grey-color;
						transition: all .3s ease;
					}
				}
			}

			.wpz-insta_notice {
				display: flex;
				align-items: center;
				font-size: 12px;
				padding: 0;
				margin: 1.5em 0 0 !important;

				&::before {
					content: '';
					display: block;
					background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.3 3.5H7.7V4.9H6.3V3.5ZM6.3 6.3H7.7V10.5H6.3V6.3ZM7 0C3.136 0 0 3.136 0 7C0 10.864 3.136 14 7 14C10.864 14 14 10.864 14 7C14 3.136 10.864 0 7 0ZM7 12.6C3.913 12.6 1.4 10.087 1.4 7C1.4 3.913 3.913 1.4 7 1.4C10.087 1.4 12.6 3.913 12.6 7C12.6 10.087 10.087 12.6 7 12.6Z'/%3E%3C/svg%3E");
					height: 14px;
					width: 14px;
					margin: 0 0.8em 0 0;
				}

				p {
					padding: 0;
					margin: 0;
				}

				&.wpz-insta_notice-warning {
					background: #fff3cd;
					border: 1px solid #ffeaa7;
					border-radius: 4px;
					padding: 10px 12px;
					margin: 8px 0 !important;

					.wpz-insta_notice-icon {
						font-size: 14px;
						margin-right: 8px;
						flex-shrink: 0;
					}

					.wpz-insta_notice-text {
						color: #856404;
						font-size: 12px;
						line-height: 1.4;
					}

					&::before {
						display: none;
					}
				}
			}

			// Pagination notice specific styles
			.wpz-insta_pagination-notice {
				.wpz-insta_table-cell {
					width: 100% !important;
				}
			}

			// WooCommerce required notice (Product Links tab)
			.wpz-insta_woo-required-notice {
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				text-align: left;
				padding: 40px 30px;

				.wpz-insta_woo-required-notice-icon {
					margin-bottom: 16px;

					svg {
						display: block;
					}
				}

				.wpz-insta_woo-required-notice-title {
					font-size: 15px;
					font-weight: 600;
					color: #1d2327;
					margin: 0 0 12px;
				}

				.wpz-insta_woo-required-notice-desc {
					font-size: 13px;
					color: #646970;
					line-height: 1.6;
					margin: 0 0 8px;
					max-width: 400px;
				}

				.wpz-insta_woo-required-notice-btn {
					margin-top: 12px;
					background: #7f54b3;
					border-color: #7f54b3;
					color: #fff;
					text-decoration: none;

					&:hover,
					&:focus {
						background: #6b4399;
						border-color: #6b4399;
						color: #fff;
					}
				}
			}

			.wpz-insta_settings-header {
				font-family: $main-font-family;
				color: $main-font-color;
				background: $light-color;
				padding: 15px 30px 0;
				border: 1px solid $light-grey-color;
				border-radius: 3px;
				box-shadow: 1px 1px 2px rgba($dark-color, 0.1);
				margin: 3em 0;

                .notice {
                    display: none;
                }

				#major-publishing-actions {
					background: transparent;
					padding: 0 0 1em;
					border: 0;

					#publishing-action {
						display: flex;
						align-items: center;
						gap: 20px;
						float: none;

						.spinner {
							margin: 0;
						}
					}
				}

				&.wpz-insta-wrap-sides {
					display: flex;
					align-items: center;
					margin-top: 1em;

					.wpz-insta-wrap-left {
						flex-grow: 1;
					}
				}

				.wpz-insta_settings-main-title {
					font-size: 24px;
					font-weight: 600;
					line-height: 29px;
					padding: 0;
					margin: 0;

					small {
						font-size: 14px;
						font-weight: normal;
						line-height: 17px;
						color: $blue-grey-color;

						a {
							text-decoration: none;
							color: $blue-grey-color;
							transition: all 0.2s ease;

							&:hover,
							&:active {
								color: $primary-color;
							}
						}
					}

					.pro {
						color: $orange-color;
					}

					#title {
						position: relative;
						font-size: 24px;
						font-weight: 600;
						text-overflow: ellipsis;
						line-height: 29px;
						background: transparent url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 17.2505V21.0005H6.75L17.81 9.94055L14.06 6.19055L3 17.2505ZM20.71 7.04055C21.1 6.65055 21.1 6.02055 20.71 5.63055L18.37 3.29055C17.98 2.90055 17.35 2.90055 16.96 3.29055L15.13 5.12055L18.88 8.87055L20.71 7.04055Z' fill='%2381909C'/%3E%3C/svg%3E");
						background-repeat: no-repeat;
						background-position: center right;
						min-width: 100px;
						max-width: 82%;
						padding: 0 24px 0 0;
						border: 0;
						outline: none;
						margin: 0;
						overflow: hidden;
						box-shadow: 0 0 0 1px transparent;
						transition: all 0.2s ease;

						&:hover, &:focus {
							box-shadow: 0 0 0 1px $primary-color;
						}
					}
				}

				.wpz-insta_settings-sub-title {
					font-size: 18px;
					font-weight: normal;
					line-height: 22px;
					color: $main-font-color;
					margin: 16px 0;
				}

				.wpz-insta_settings-main-nav {
					font-size: 18px;
					font-weight: normal;
					line-height: 22px;
					padding: 0;
					margin: 0;

					ul {
						display: flex;
						list-style: none;
						gap: 40px;
						padding: 0;
						margin: 0;

						li {
							position: relative;
							list-style: none;
							padding: 0;
							margin: 0;
							transition: all 0.2s ease;

							&.active {
								a {
									cursor: default;
									pointer-events: none;

									&::after {
										transform: translateY(0);
									}
								}
							}

							a {
								display: block;
								position: relative;
								text-decoration: none;
								color: $main-font-color;
								outline: none;
								padding: 16px 0;
								box-shadow: none;
								overflow: hidden;
								transition: all 0.2s ease;

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

								&:hover {
									color: $primary-color;
								}

								&::after {
									content: '';
									position: absolute;
									left: 0;
									right: 0;
									bottom: 0;
									background: $primary-color;
									height: 6px;
									border-radius: 2px 2px 0 0;
									transform: translateY(calc(100% + 2px));
									transition: all 0.2s ease;
								}

								.wpz-insta-pro-badge {
									font-size: 13px;
									font-weight: 600;
									color: #fff;
									background: #f57c00;
									padding: 2px 5px;
									margin: 0 auto;
									border-radius: 2px;
									letter-spacing: 0.5px;
								}

								.wpz-insta-new-badge {
									font-size: 13px;
									font-weight: 600;
									color: #fff;
									background: #3496ff;
									padding: 2px 5px;
									margin: 0 auto;
									border-radius: 2px;
									letter-spacing: 0.5px;
								}
							}
						}
					}
				}
			}

			.wpz-insta-wrap.with-bg {
				font-family: $main-font-family;
				font-size: 14px;
				color: $main-font-color;
				background: $light-color;
				padding: 25px 30px;
				border: 1px solid $light-grey-color;
				border-radius: 3px;
				box-shadow: 1px 1px 2px rgba($dark-color, 0.1);

				*:not(h2):not(small) {
					font-size: 14px;
				}
			}

			.wpz-insta-wrap ~ #posts-filter {
				margin: 2em 0 0;

				.wp-list-table {
					font-family: $main-font-family;
					color: $main-font-color;
					background: $light-color;
					padding: 15px 30px;
					border: 1px solid $light-grey-color;
					border-radius: 3px;
					box-shadow: 1px 1px 2px rgba($dark-color, 0.1);

					thead {
						th,
						td {
							border-bottom: 1px solid $dark-color;

							&.column-wpz-insta_account-photo,
							&.column-wpz-insta_account-bio,
							&.column-wpz-insta_account-token {
								display: none;
							}
						}

						th {
							font-weight: 600;
							padding-left: 0;
							padding-right: 0;

							&.column-wpz-insta_actions {
								text-align: right;
							}

							a {
								color: $dark-color;
								padding: 14px 0;
								transition: all 0.2s ease;

								&:hover,
								&:active {
									color: $primary-color;
								}
							}
						}
					}

					tbody {
						tr {
							display: table-row !important;
							position: relative;
							background: transparent;
						}

						tr:first-child,
						tr.inline-edit-row {
							th,
							td {
								border-top: none;
							}
						}

						tr.inline-edit-row td {
							padding-top: 0;
						}

						th,
						td {
							vertical-align: middle;
							padding: 20px 0;
							border-top: 1px solid $light-grey-color;

							&.column-wpz-insta_account-photo,
							&.column-wpz-insta_account-bio,
							&.column-wpz-insta_account-token {
								display: none;
							}
						}

						th.check-column {
							padding: 0;
						}

						td {
							> * {
								margin: 0;
							}

							a:not(.button) {
								color: $primary-color;
								transition: all 0.2s ease;

								&:hover,
								&:active {
									color: $dark-color;
								}
							}

							.row-actions {
								display: none;
							}

							.wpz-insta_quick-edit {
								overflow: hidden;
								animation-name: slidedown;
								animation-duration: 1s;

								.wpz-insta_quick-edit-columns {
									display: flex;
									list-style: none;
									padding: 0;
									margin: 0;

									> li {
										flex-grow: 1;
										list-style: none;
										padding: 0;
										margin: 0;

										div {
											display: block;
											margin: 0 0 10px;

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

										strong:first-child,
										label > strong:first-child {
											display: inline-block;
											margin: 0 0 5px;
										}

										input:not(.widefat),
										textarea {
											font-family: $main-font-family;
											width: 60%;
										}
									}
								}
							}

							.inline-edit-save {
								position: absolute;
								top: -10px;
								right: 0;
								padding: 0;
								transform: translateY(-100%);

								.button {
									float: none;

									&.cancel {
										color: $primary-color;
										background: transparent;
										box-shadow: inset 0 0 0 1px $primary-color;
										margin: 0 1em 0 0;

										&:hover,
										&:active,
										&:focus {
											color: $dark-color;
											box-shadow: inset 0 0 0 1px $dark-color;
										}
									}
								}

								.spinner {
									float: left;
								}
							}
						}

						.column-title,
						.column-wpz-insta_account {
							width: 50%;
						}

						.column-wpz-insta_account {
							a {
								color: $main-font-color;

								&:hover,
								&:active {
									color: $primary-color;
								}
							}
						}

						.column-wpz-insta_actions {
							text-align: right;
							width: 5%;

							strong {
								position: relative;
								cursor: pointer;
								font-size: 20px;
								font-weight: 600;
								text-align: right;
								white-space: nowrap;
								transition: all 0.2s ease;

								&:hover,
								&:active {
									color: $primary-color;
								}
							}
						}

						.wpz-insta_actions-menu {
							display: inline-block;
							position: relative;
							text-align: right;

							&:hover {
								.wpz-insta_hidden {
									pointer-events: auto;
									opacity: 1;
								}

								strong {
									color: $primary-color;

									&::after {
										content: '';
										position: absolute;
										left: -50px;
										right: 0;
										bottom: -15px;
										height: 25px;
									}
								}
							}

							.wpz-insta_hidden {
								position: absolute;
								right: 0;
								bottom: -10px;
								z-index: 999;
								pointer-events: none;
								text-align: left;
								background: $light-color;
								min-width: 200px;
								opacity: 0;
								padding: 0;
								border-radius: 3px;
								margin: 0;
								box-shadow: 1px 4px 8px rgba($dark-color, 0.1);
								transform: translate(0%, 100%);
								transition: opacity 0.2s ease;

								li {
									white-space: nowrap;
									margin: 0;
									transition: all 0.2s ease;

									&:first-child a,
									&:first-child button {
										padding-top: 10px;
									}

									&:last-child a,
									&:last-child button {
										padding-bottom: 10px;
									}

									&.wpz-insta_actions-menu_divider {
										pointer-events: none;
										background: $light-grey-color;
										height: 1px;
										padding: 0;
										margin: 5px 20px;
									}

									&.wpz-insta_actions-menu_delete {
										a:hover {
											color: $red-color;
										}
									}

									a,
									button {
										display: block;
										white-space: nowrap;
										color: $main-font-color;
										width: 100%;
										padding: 7px 20px;
										margin: 0;
										box-sizing: border-box;
										transition: all 0.2s ease;

										&:hover {
											color: $primary-color;
										}
									}
								}
							}
						}

						.inline-edit-col-left,
						.inline-edit-col-right {
							display: none;
						}
					}
				}
			}

			#poststuff {
				padding: 0;
				margin: 0;

				#post-body {
					margin: 0;

					#post-body-content {
						float: none;
						margin: 0;
					}

					.postbox-container {
						display: none;
					}
				}
			}

			.wpz-insta_tabs-content {
				display: grid;

				* {
					pointer-events: inherit;
				}

				> * {
					grid-column: 1;
					grid-row: 1;
					align-self: start;
					// transition: all 0.3s ease;

					&:not(.active) {
						pointer-events: none;
						opacity: 0;

						* {
							pointer-events: none !important;
						}
					}
				}
			}

			.wpz-insta_sidebar {
				display: flex;
				gap: 20px;
				font-family: $main-font-family;
				color: $main-font-color;

				&.hide {
					pointer-events: none;
				}

				&:not(.show-pro) {
					.wpz-insta_pro-only:not(.wpz-insta_feed-layout),
					.wpz-insta_pro-only > .wpz-insta_feed-layout-pro {
						/*opacity: 0;
						max-height: 0;
						overflow: hidden;
						margin: 0 0 -20px;*/
						display: none;
					}
				}

				input, textarea, select {
					font-family: $main-font-family;
					font-size: 14px;
				}

				.wpz-insta_sidebar-left,
				.wpz-insta_sidebar-right {
					background: $light-color;
					border: 1px solid $light-grey-color;
					border-radius: 3px;
					box-shadow: 1px 1px 2px rgba($dark-color, 0.1);
				}

				.wpz-insta_sidebar-left {
					display: grid;
					grid-template-rows: auto 1fr;
					flex-basis: 28%;

					&.is-pro {
						.wpz-insta_sidebar-left-section {
							max-height: 70vh !important;
						}
					}

					&:not(.is-pro) {
						.wpz-insta_responsive-table-row {
							.wpz-insta_table-cell:first-child {
								input[type='checkbox'] {
									display: none;
								}
							}

							.wpz-insta_responsive-field {
								.wpz-insta_responsive-field-type {
									&:nth-child(n+2) {
										display: none;
									}

									.wpz-insta_responsive-field-name {
										display: none;
									}
								}
							}
						}
					}

					.wpz-insta_sidebar-left-section-head {
						display: flex;
						align-items: center;
						grid-column: 1;
						grid-row: 1;
						background: $very-light-grey-color;
						min-height: 30px;
						padding: 20px;
						border-bottom: 1px solid $light-grey-color;
					}

					.wpz-insta_sidebar-left-section {
						grid-column: 1;
						grid-row: 2;
						align-self: start;
						transition: opacity 0.3s ease, visibility 0.3s ease;
						overflow-x: hidden;
						overflow-y: auto;

						&:not(.active) {
							pointer-events: none;
							opacity: 0;
							visibility: hidden;
							position: absolute;
							z-index: -1;
						}

						&.active {
							visibility: visible;
							position: relative;
							z-index: 1;
						}
					}
				}

				.wpz-insta_sidebar-right {
					flex-grow: 1;
					position: relative;

					&.is-loading {
						transition: all 0.3s ease;

						&.hide-loading {
							&::before {
								opacity: 0;
							}
						}

						&::before {
							content: '';
							position: absolute;
							top: 300px;
							left: 50%;
							z-index: 1;
							background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 50 50' xml:space='preserve'%3E%3Cpath fill='%233496ff' d='M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z'%3E%3CanimateTransform attributeType='xml' attributeName='transform' type='rotate' from='0 25 25' to='360 25 25' dur='0.6s' repeatCount='indefinite'/%3E%3C/path%3E%3C/svg%3E");
							background-size: contain;
							height: 64px;
							width: 64px;
							opacity: 1;
							transform: translateX(-50%);
							transition: all 0.3s ease;
						}
					}
				}
			}

			.wpz-insta_sidebar-section-big-title {
				font-size: 18px;
				font-weight: 600;
				margin: 30px 20px;
			}

			.wpz-insta_sidebar-section {
				padding: 30px 0 0;
				border-top: 1px solid $light-grey-color;
				margin: 30px 20px 20px;

				&.hidden {
					display: none;
				}

				&:first-child,
				&.no-top-border {
					padding-top: 0;
					border-top: 0;
					margin-top: 20px;
				}

				.wpz-insta_sidebar-section-title {
					font-size: 18px;
					font-weight: 600;
					margin: 0 0 15px;

					&.smaller-title {
						font-size: 14px;
					}
				}

				.wpz-insta_sidebar-section-description {
					font-size: 14px;
					font-weight: normal;
					margin: 0 0 20px;

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

				p {
					font-size: 14px;
				}

				ul,
				ol {
					li {
						margin-bottom: 1em;
					}
				}

				.wpz-insta_text-btn-aligned {
					display: flex;
					align-items: stretch;
					gap: 15px;
					width: 100%;

					> input {
						flex-grow: 1;
						margin: 0;
					}
				}

				.wpz-insta_shortcode,
				.wpz-insta_shortcode-copy-btn {
					display: flex;
					align-items: center;
					font-size: 14px;
					line-height: 2;
				}

				.wpz-insta_shortcode {
					background: transparent;
					border: 1px solid $light-grey-color;
				}

				.wpz-insta_shortcode-copy-btn {
					display: grid;
					text-align: center;
					color: $primary-color;
					background: transparent;
					border: 1px solid $primary-color;
					box-shadow: none;
					transition: all 0.3s ease;

					&:hover {
						color: $light-color;
						background: $primary-color;
					}

					&.success {
						color: $light-color;
						background: $green-color;
						border-color: $green-color;

						.wpz-insta_shortcode-copy-btn-text-normal {
							opacity: 0;
						}

						.wpz-insta_shortcode-copy-btn-text-success {
							opacity: 1;
						}
					}

					.wpz-insta_shortcode-copy-btn-text-normal,
					.wpz-insta_shortcode-copy-btn-text-success {
						grid-column: 1;
						grid-row: 1;
						transition: all 0.3s ease;
					}

					.wpz-insta_shortcode-copy-btn-text-normal {
						opacity: 1;
					}

					.wpz-insta_shortcode-copy-btn-text-success {
						opacity: 0;
					}
				}

				.wpz-insta_feed-user-select {
					&.is-set {
						.wpz-insta_feed-user-select-input {
							.wpz-insta_feed-user-select-button-wrap {
								.wpz-insta_feed-user-select-button-highlight {
									display: none;
								}

								.wpz-insta_feed-user-select-button {
									pointer-events: none;
									opacity: 0;
								}
							}
						}

						.wpz-insta_feed-user-select-edit-link {
							display: inline-block;
						}
					}

					&:not(.is-set) {
						.wpz-insta_feed-user-select-input {
							.wpz-insta_feed-user-select-info {
								pointer-events: none;
								opacity: 0;
							}
						}
					}

					.wpz-insta_feed-user-select-input {
						display: grid;
						background: $lighter-grey-color;
						border: 1px solid $darker-blue-grey-color;
						border-radius: 4px;

						.wpz-insta_feed-user-select-info {
							display: flex;
							align-items: center;
							justify-content: space-between;
							grid-column: 1;
							grid-row: 1;
							margin: 15px;
							transition: all 0.3s ease;

							.wpz-insta_feed-user-select-info-left {
								.wpz-insta_feed-user-select-info-name {
									font-size: 14px;
									font-weight: 600;
									padding: 0;
									margin: 0;
								}

								.wpz-insta_feed-user-select-info-type {
									font-size: 12px;
									color: $blue-grey-color;
									padding: 0;
									margin: 0;
								}
							}

							.wpz-insta_feed-user-remove-button {
								font-size: 13px;
								font-weight: 600;
								color: $primary-color;
								background: transparent;
								border: 1px solid $primary-color;
								box-shadow: none;

								&:hover {
									color: $red-color;
									border-color: $red-color;
								}
							}
						}

						.wpz-insta_feed-user-select-button-wrap {
							position: relative;
							display: flex;
							align-items: stretch;
							justify-content: stretch;
							grid-column: 1;
							grid-row: 1;
							pointer-events: none;

							.wpz-insta_feed-user-select-button-highlight {
								display: block;
								position: absolute;
								top: -2px;
								left: -2px;
								right: -2px;
								bottom: -2px;
								z-index: 1;
								pointer-events: none;
								border: 0;
								border-radius: 6px;
								box-shadow: inset 0 0 1px 1px $primary-color, 0 0 1px 1px $primary-color;
								transition: all 0.3s ease;
								animation: highlighting 0.8s infinite;
							}

							.wpz-insta_feed-user-select-button {
								display: flex;
								flex-grow: 1;
								position: relative;
								z-index: 2;
								pointer-events: all;
								font-size: 14px;
								font-weight: 600;
								color: $main-font-color;
								background: $lighter-grey-color;
								opacity: 1;
								border: 0;
								border-radius: 4px;
								box-shadow: none;
								transition: all 0.3s ease;

								&:hover {
									color: $light-color;
									background: $primary-color;
								}
							}
						}
					}

					.wpz-insta_feed-user-select-edit-link {
						display: none;
						margin: 20px 0 0;
					}
				}

				.wpz-insta_feed-layout {
					display: flex;
					align-items: end;
					gap: 10px;
					max-height: 999em;
					margin: 0 0 20px;
					// transition: all 0.3s ease;

					.wpz-insta_feed-layout-pro {
						display: flex;
						gap: 15px;
						padding: 10px;
						border-radius: 4px;
						box-shadow: 0 0 0 2px $orange-color;
                        max-width: 76%;
                        box-sizing: border-box;

						legend {
							font-size: 13px;
							font-weight: 600;
							color: $light-color;
							background: $orange-color;
							padding: 0 5px;
							margin: 0 auto;
							border-radius: 2px;
							box-shadow: none;
						}

						.wpz-insta_feed-layout-option {
							pointer-events: none;
							opacity: 0.75;
						}
					}

					> .wpz-insta_feed-layout-option {
						margin-bottom: 10px !important;
                        max-width: 21%;
					}

					.wpz-insta_feed-layout-option {
						display: block;
						background: transparent;
						padding: 0;
						border: 0;
						box-shadow: none;
						outline: none;
						margin: 0;
						transition: all 0.3s ease;

						&.disabled {
							pointer-events: none;
							opacity: 0.4;
						}

						&:hover {
							svg {
								color: $darker-blue-grey-color;
								fill: $darker-blue-grey-color;
							}
						}

						input {
							display: none;
						}

						svg {
							display: block;
							color: $blue-grey-color;
							fill: $blue-grey-color;
                            max-width: 100%;
                            height: auto;
							transition: all 0.3s ease;
						}

						input:checked ~ svg {
							color: $primary-color;
							fill: $primary-color;
						}
					}
				}

				.wpz-insta_feed-layout-etc,
				.wpz-insta_feed-general,
				.wpz-insta_feed-profile-general,
				.wpz-insta_feed-load-more-general,
				.wpz-insta_product-links-general,
				.wpz-insta_product-links-design,
				.wpz-insta_product-links-icon-design {
					font-size: 14px;
				}

				.wpz-insta-product-links-display-type-row{
					display: block !important;
				}

				.wpz-insta_product-links-display-type {
					margin-top: 10px;
					display: flex;
					gap: 10px;
					align-items: flex-start;

					.wpz-insta_product-links-display-option {
						display: block;
						background: transparent;
						padding: 0;
						border: 0;
						box-shadow: none;
						outline: none;
						margin: 0;
						transition: all 0.3s ease;

						&.disabled {
							pointer-events: none;
							opacity: 0.4;
						}

						svg{
							border: 1px solid $darker-blue-grey-color;
							border-radius: 4px;
						}

						&:hover {
							svg {
								color: $darker-blue-grey-color;
								fill: $darker-blue-grey-color;
							}
						}

						input {
							display: none;
						}

						svg {
							display: block;
							color: $blue-grey-color;
							fill: $blue-grey-color;
                            max-width: 100%;
                            height: auto;
							transition: all 0.3s ease;
						}

						input:checked ~ svg {
							color: $primary-color;
							fill: $primary-color;
							border-color: $primary-color;
						}
					}
				}

				.wpz-insta_table {
					display: flex;
					flex-direction: column;
					gap: 20px;
					width: 100%;

					.wpz-insta_table-row {
						display: flex;
						align-items: center;
						width: 100%;

						&.hidden {
							display: none;
						}

						&.wpz-insta_disabled {
							> input[type="checkbox"] {
								opacity: 0.5;
								pointer-events: none;
							}

							// Gray out only the text, not the help icon
							> span {
								color: rgba(0, 0, 0, 0.4);
							}
						}

						&.wpz-insta_table-row-full {
							flex-direction: column;
							align-items: stretch;

							.wpz-insta_table-cell {
								width: 100%;
							}
						}

						&.wpz-insta_responsive-table-row {
							align-items: flex-start;

							&.wpz-insta_responsive-enabled {
								.wpz-insta_responsive-field {
									.wpz-insta_responsive-field-type {
										display: flex !important;

										.wpz-insta_responsive-field-name {
											display: flex !important;
										}
									}
								}
							}

							.wpz-insta_table-cell:first-child {
								display: flex;
								align-items: center;
								justify-content: space-between;
								gap: 10px;

								.wpz-insta_responsive-checkbox {
									background: none;
									padding: 0;
									border: 0;
									border-radius: 0;
									box-shadow: none;
									margin: 0 0.4em 0 0;

									&::before {
										content: '';
										mask: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 20 20'%3E%3Cpath d='M18 14v-10c0-0.55-0.45-1-1-1h-14c-0.55 0-1 0.45-1 1v10c0 0.55 0.45 1 1 1h14c0.55 0 1-0.45 1-1zM10 6c2.3 0 4.4 1.14 6 3-1.6 1.86-3.7 3-6 3s-4.4-1.14-6-3c1.6-1.86 3.7-3 6-3zM12 9c0-1.1-0.9-2-2-2s-2 0.9-2 2 0.9 2 2 2 2-0.9 2-2zM14 17h3v1h-14v-1h3v-1h8v1z' fill='currentColor'%3E%3C/path%3E%3C/svg%3E");
										background-color: rgba($dark-color, 0.4);
										height: 16px;
										width: 16px;
									}

									&:checked,
									&:hover {
										background: none !important;
										padding: 0;
										border: 0;
										border-radius: 0;
										box-shadow: none !important;

										&::before {
											background-color: $dark-color;
										}
									}
								}
							}

							.wpz-insta_responsive-field {
								display: flex;
								flex-direction: column;
								gap: 5px;

								.wpz-insta_responsive-field-type {
									display: flex;
									flex-direction: row;
									gap: 10px;

									&:not(:first-child) {
										display: none;
									}

									.wpz-insta_responsive-field-name {
										display: none;
										align-items: center;
										gap: 4px;

										.dashicons {
											font-size: 16px;
											height: 16px;
											width: 16px;
										}
									}
								}
							}
						}

						&.hidden {
							display: none;
						}

						.wpz-insta_table-cell {
							display: block;
							// white-space: nowrap;
							line-height: 30px;
							width: 50%;

							&.table-cell-special {
								display: flex;
								align-items: center;

								label {
									width: 50%;
								}
							}

							input {
								margin: 0;
							}
						}

						> input[type='checkbox'] {
							margin: 0 1em 0 0;
						}
					}

					.wpz-insta_sub-wrapper {
						display: flex;
						flex-direction: column;
						gap: 10px;
						position: relative;
						border-left: 1px solid $main-font-color;
						padding: 10px 0 0 15px;
						margin: -20px 0 0;

						input {
							margin-left: 0.5em;
							margin-right: 0.5em;
						}

						.wpz-insta_table-cell {
							&:first-child {
								width: calc(50% - 9px);
							}

							&:last-child {
								width: calc(50% + 9px);
							}
						}
					}
				}

				.wpz-insta_show-on-hover {
					display: table-row;

					> strong {
						display: block;
						margin: 0 0 20px;
					}
				}

				.wpz-insta_feed-only-pro {
					display: flex;
					flex-direction: column;
					gap: 20px;
					pointer-events: none;
					user-select: none;
					padding: 0;

					&.wpz-insta_pro-only-with-bottom {
						padding-bottom: 10px;
						border-bottom: 2px solid $orange-color;
					}

					&.hidden {
						display: none;
					}

					legend {
						display: flex;
						width: 100%;
						padding: 0;
						border-bottom: 2px solid $orange-color;
						margin: 0 0 10px;

						> strong {
							font-size: 13px;
							color: $light-color;
							background: $orange-color;
							padding: 0 5px;
							border-top-left-radius: 2px;
							border-top-right-radius: 2px;
							box-shadow: none;
						}
					}

					> label {
						opacity: 0.5;
					}
				}

				.pro-only-wrapper {
					opacity: 0.5;
				}

				&.wpz-insta_sidebar-section-multi-account-promo {
					max-height: 0;
					opacity: 0;
					overflow: hidden;
					padding-top: 0;
					margin-top: 0;
					margin-bottom: 0;
					transition: all 0.3s ease;

					&.active {
						max-height: 999em;
						opacity: 1;
						padding-top: 20px;
						margin-top: 20px;
						margin-bottom: 10px;
						overflow: visible;
					}

					.wpz-insta_add-another-account-wrap {
						text-align: center;
					}

					.wpz-insta_add-another-account-btn-placeholder {
						display: inline-flex;
						align-items: center;
						gap: 6px;
						padding: 10px 16px;
						font-size: 13px;
						font-weight: 500;
						color: #50575e;
						background: #f0f0f1;
						border: 1px dashed #c3c4c7;
						border-radius: 4px;
						cursor: not-allowed;
						opacity: 0.8;

						.dashicons {
							font-size: 16px;
							width: 16px;
							height: 16px;
						}

						.wpz-insta-pro-badge {
							background: $orange-color;
							color: #fff;
							font-size: 9px;
							font-weight: 600;
							text-transform: uppercase;
							padding: 2px 6px;
							border-radius: 3px;
							margin-left: 4px;
							letter-spacing: 0.5px;
						}

						.wpz-insta-new-badge {
							background: #3496ff;
							color: #fff;
							font-size: 9px;
							font-weight: 600;
							text-transform: uppercase;
							padding: 2px 6px;
							border-radius: 3px;
							margin-left: 4px;
							letter-spacing: 0.5px;
						}
					}

					.wpz-insta_add-another-account-description {
						margin: 10px 0 0 0;
						font-size: 12px;
						color: #757575;
						font-style: italic;
					}
				}

				&.wpz-insta_sidebar-section-token,
				&.wpz-insta_sidebar-section-check-new,
				&.wpz-insta_sidebar-section-request-timeout {
					max-height: 0;
					opacity: 0;
					overflow: hidden;
					padding-top: 0;
					margin-top: 0;
					margin-bottom: 0;
					transition: all 0.3s ease;

					&.active {
						max-height: 999em;
						opacity: 1;
						padding-top: 30px;
						margin-top: 30px;
						margin-bottom: 20px;
						overflow: visible;
					}
				}

				&.wpz-insta_sidebar-section-token {
					#wpz-insta_user-token {
						display: block;
						font-family: $main-font-family;
						font-size: 14px;
						font-weight: normal;
						text-overflow: ellipsis;
						color: $main-font-color;
						background: $light-color;
						width: 100%;
						padding: 4px 8px;
						border: 1px solid $light-grey-color;
						border-radius: 2px;
						box-shadow: none;
					}
				}

				&.wpz-insta_sidebar-section-request-timeout > label > strong {
					font-size: 14px;
				}

				&.wpz-insta_sidebar-section-load-more.wpz-insta_pro-only {
					pointer-events: none;
					user-select: none;
					padding-top: 0;
					padding-bottom: 20px;
					border-top: none;
					border-bottom: 2px solid $orange-color;
					margin-top: 0;

					.wpz-insta_sidebar-section-title,
					.wpz-insta_table > label {
						opacity: 0.5;
					}
				}
			}

			.wpz-insta_widget-preview {
				position: relative;
				z-index: 2;
				padding: 0;
				margin: 0;

				.wpz-insta_widget-preview-header {
					display: flex;
					align-items: center;
					padding: 0;
					border-bottom: 1px solid $light-grey-color;
					margin: 0;

					.wpz-insta_widget-preview-header-title {
						font-size: 14px;
						font-weight: 600;
						text-align: center;
						padding: 0;
						margin: 0;
					}

					.wpz-insta_widget-preview-header-links {
						display: flex;
						padding: 0;
						margin: 0;
						transition: all 0.3s ease;

						&.disabled {
							pointer-events: none;
							opacity: 0.3;

							.wpz-insta_widget-preview-header-link.active {
								background: $light-grey-color;

								svg {
									fill: $blue-grey-color;
								}
							}
						}

						.wpz-insta_widget-preview-header-link {
							display: flex;
							align-items: center;
							justify-content: center;
							cursor: pointer;
							background: $light-grey-color;
							min-width: 70px;
							min-height: 70px;
							padding: 0;
							margin: 0;
							transition: all 0.3s ease;

							&:hover {
								background: $lighter-grey-color;
							}

							&.active {
								cursor: default;
								color: $light-color;
								background: $primary-color;

								svg {
									fill: $light-color;
								}
							}

							svg {
								fill: $blue-grey-color;
								padding: 0;
								margin: 0;
								transition: all 0.3s ease;
							}
						}
					}
				}

				.wpz-insta_widget-preview-refresh {
					flex-shrink: 0;
					margin-left: 8px;
					padding: 6px 10px;
					height: auto;
					line-height: 1.4;
					font-size: 12px;

					&.disabled,
					&:disabled {
						pointer-events: none;
						opacity: 0.5;
					}
					svg{
						margin-right: 6px;
					}
				}

				.wpz-insta_widget-preview-view {
					display: flex;
					align-items: start;
					justify-content: center;
					padding: 0;
					margin: 0;
					overflow-x: hidden;
					overflow-y: auto;
					transition: all 0.3s ease;

					&.wpz-insta_widget-preview-size-desktop .wpz-insta_widget-preview-view-inner {
						// max-width: 500px;
					}

					&.wpz-insta_widget-preview-size-tablet .wpz-insta_widget-preview-view-inner {
						max-width: 768px;
					}

					&.wpz-insta_widget-preview-size-mobile .wpz-insta_widget-preview-view-inner {
						max-width: 380px;
					}

					&.layout-fullwidth {
						&.wpz-insta_widget-preview-size-desktop .wpz-insta_widget-preview-view-inner {
							max-width: 100%;
						}
					}

					.wpz-insta_widget-preview-view-inner {
						flex-grow: 1;
						padding: 0;
						transition: all 0.3s ease;

						iframe {
							display: block;
							height: 400px;
							width: 100%;
							visibility: visible;
							opacity: 1;
							overflow: hidden;
							transition: all 0.3s ease;

							&.wpz-insta_preview-hidden {
								pointer-events: none;
								visibility: hidden;
								opacity: 0;
							}
						}
					}
				}
			}

			.wpz-insta_tabs-config-connect {
				font-family: $main-font-family;
				color: $main-font-color;
				background: $light-color;
				padding: 25px 30px;
				border: 1px solid $light-grey-color;
				border-radius: 3px;
				box-shadow: 1px 1px 2px rgba($dark-color, 0.1);

				.wpz-insta_tabs-config-connect-title {
					font-size: 24px;
					font-weight: 600;
					padding: 0;
					margin: 0 0 10px;
				}

				.wpz-insta_tabs-config-connect-description {
					padding: 0;
					margin: 0 0 20px;
				}

				.wpz-insta_tabs-config-connect-accounts {
					display: grid;
					grid-template-columns: repeat(auto-fill, minmax(300px , 1fr));
					gap: 30px;
					padding: 0;
					margin: 0;

					li {
						cursor: pointer;
						background: $lighter-grey-color;
						padding: 15px;
						border: 1px solid $darker-blue-grey-color;
						border-radius: 4px;
						margin: 0;
						transition: all 0.3s ease;

						&:hover {
							color: $light-color;
							background: $primary-color;
							border-color: darken($primary-color, 20%);

							h3 {
								color: $light-color;
							}

							p {
								color: rgba($light-color, 0.6);
							}
						}

						h3 {
							font-size: 14px;
							font-weight: 600;
							padding: 0;
							margin: 0 0 5px;
							transition: all 0.3s ease;
						}

						p {
							font-size: 12px;
							color: $blue-grey-color;
							padding: 0;
							margin: 0;
							transition: all 0.3s ease;
						}
					}
				}

				hr {
					margin: 30px 0;
				}

				.wpz-insta_tabs-config-connect-subtitle {
					font-size: 14px;
					font-weight: normal;
					padding: 0;
					margin: 0 0 20px;
				}
			}

			.wpz-insta_settings-support,
			.wpz-insta_settings-license {
				font-family: $main-font-family;
				color: $main-font-color;

				.section-title {
					font-size: 20px;
					font-weight: 600;
					line-height: 24px;
					margin: 0 0 1em;

					svg {
						vertical-align: text-bottom;
						margin: 0 5px 0 0;
					}
				}

				.section-description {
					padding: 0;
					margin: 0 0 2em;
				}
			}

			.wpz-insta_settings-connect {
				font-family: $main-font-family;
				color: $main-font-color;
				background: $light-color;
				padding: 25px 30px;
				border: 1px solid $light-grey-color;
				border-radius: 3px;
				box-shadow: 1px 1px 2px rgba($dark-color, 0.1);

				.section-title {
					font-size: 24px;
					font-weight: 600;
					line-height: 29px;
					margin: 0 0 16px;
				}

				.section-description {
					font-size: 14px;
					white-space: pre-wrap;
					margin: 0 0 30px;
				}

				.account-options {
					gap: 30px;
					margin: 0 0 30px;

                    display: grid;
                    grid-template-columns: repeat(2, 1fr);
                    grid-template-rows: repeat(2, 1fr);
                    grid-column-gap: 40px;
                    grid-row-gap: 40px;

                    max-width: 1000px;

                    .account-option_business {
                        grid-area: 1 / 1 / 2 / 2;
                    }

                    .account-option_personal {
                        grid-area: 1 / 2 / 2 / 3;
                    }

                    .account-option_token {
                        grid-area: 2 / 1 / 3 / 3;
                        background: #f4f4f473;
                    }

                    .token_cols {
                        display: grid;
                        grid-template-columns: repeat(2, 1fr);
                        grid-template-rows: 1fr;
                        grid-column-gap: 40px;

                        .token_col {
                            border: 1px solid #ddd;
                            border-radius: 4px;
                            padding: 20px;
                        }
                    }

					.account-option {
						display: flex;
						flex-direction: column;
                        flex: 1;
						padding: 20px;
						border: 1px solid $light-grey-color;
						border-radius: 3px;

						.account-option-title {
							font-size: 16px;
							font-weight: 600;
							line-height: 19px;
							margin: 0 0 16px;

							.recommended-badge {
								display: inline-block;
								font-size: 10px;
								font-weight: 600;
								text-transform: uppercase;
								letter-spacing: 0.5px;
								background: #22BB66;
								color: #fff;
								padding: 3px 8px;
								border-radius: 3px;
								margin-left: 8px;
								vertical-align: middle;
							}
						}

						.account-option-checklist {
							font-size: 14px;
							padding: 0;
							margin: 0 0 20px;

							li {
								line-height: 18px;
								background: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 0C4.03759 0 0 4.03759 0 9C0 13.9624 4.03759 18 9 18C13.9624 18 18 13.9624 18 9C18 4.03759 13.9624 0 9 0ZM14.0301 6.63158L8.2782 12.3383C7.93985 12.6767 7.3985 12.6992 7.03759 12.3609L3.99248 9.58647C3.63158 9.24812 3.60902 8.68421 3.92481 8.32331C4.26316 7.96241 4.82707 7.93985 5.18797 8.2782L7.6015 10.4887L12.7444 5.34586C13.1053 4.98496 13.6692 4.98496 14.0301 5.34586C14.391 5.70677 14.391 6.27068 14.0301 6.63158Z' fill='%2322BB66'/%3E%3C/svg%3E");
								background-position: 0 5px;
								background-repeat: no-repeat;
								min-height: 18px;
								padding: 5px 0 5px 32px;
								margin: 0;
							}

                            li.no-feature {
                                background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 0C4.02891 0 0 4.02891 0 9C0 13.9711 4.02891 18 9 18C13.9711 18 18 13.9711 18 9C18 4.02891 13.9711 0 9 0ZM8.15625 5.34375C8.15625 4.87969 8.53594 4.5 9 4.5C9.46406 4.5 9.84375 4.87793 9.84375 5.34375V9.84375C9.84375 10.3096 9.46582 10.6875 9 10.6875C8.53418 10.6875 8.15625 10.3113 8.15625 9.84375V5.34375ZM9 14.0625C8.38969 14.0625 7.89469 13.5675 7.89469 12.9572C7.89469 12.3469 8.38934 11.8519 9 11.8519C9.61066 11.8519 10.1053 12.3469 10.1053 12.9572C10.1039 13.5668 9.61172 14.0625 9 14.0625Z' fill='%23cccccc'/%3E%3C/svg%3E%0A");
                            }

                            li.x-feature {
                                background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 9C0 4.02943 4.02943 0 9 0C13.9705 0 18 4.02943 18 9C18 13.9705 13.9705 18 9 18C4.02943 18 0 13.9705 0 9ZM12.1758 13.0243L9.00005 9.84857L5.82431 13.0243L4.97578 12.1758L8.15152 9.00005L4.97578 5.82431L5.82431 4.97578L9.00005 8.15152L12.1758 4.97578L13.0243 5.82431L9.84857 9.00005L13.0243 12.1758L12.1758 13.0243Z' fill='%23E54B4B'/%3E%3C/svg%3E%0A");
                            }


						}

						.account-option-token-input {
							font-family: $main-font-family;
							font-size: 14px;
							line-height: 17px;
							color: $main-font-color;
							padding: 10px;
							border: 1px solid $light-grey-color;
							box-shadow: none;
							transition: all 0.3s ease;
                            width: 100%;
                            margin: 0 0 10px;

							&:hover,
							&:focus {
								border-color: $primary-color;
								box-shadow: none;
							}
						}

						.account-option-button {
							display: flex;
							cursor: pointer;
							align-items: center;
							justify-content: center;
							font-weight: 600;
							line-height: 1;
							color: #fff;
							// background: #E4405F;
                            background: $primary-color;
							background-position: center left;
							background-repeat: no-repeat;
							width: 100%;
							padding: 15px 40px;
							border: 0;
							border-radius: 2px;
							margin: auto 0 0;
							box-shadow: none;
							transition: all 0.3s ease;

							&:hover,
							&:focus {
								// background-color: $secondary-color;
                                opacity: .8;
							}

							&.disabled {
								pointer-events: none;
								opacity: 0.5;
							}

                            &.facebook {
                                background: #1877F2;
                            }

							svg {
								margin: 0 16px 0 0;
							}
						}
					}
				}

				.section-notice {
					font-size: 13px;
					margin: 0;

					svg {
						margin: 0 7px 0 0;
                        display: inline-block;
                        vertical-align: middle;
					}
				}
			}
		}
	}

	.wpz-insta_settings-footer .wpz-insta_settings-footer-wrap {
		display: flex;
		align-items: center;
		font-family: $main-font-family;
		color: $main-font-color;
		background: $light-color;
		padding: 30px;
		border: 1px solid $light-grey-color;
		border-radius: 3px;
		box-shadow: 1px 1px 2px rgba($dark-color, 0.1);
		margin: 20px 0;

		.wpz-insta_settings-footer-logo {
			padding: 0;
			margin: 0 30px 0 0;

			a {
				display: block;
				text-indent: -999em;
				background-image: url('data:image/png;base64, ');
				background-size: contain;
				background-repeat: no-repeat;
				height: 16px;
				width: 95px;
				overflow: hidden;
				transition: all 0.3s ease;

				&:hover,
				&:active {
					opacity: 0.5;
				}
			}
		}

		.wpz-insta_settings-footer-links {
			display: flex;
			padding: 0;
			margin: 0;

			li {
				padding: 0;
				margin: 0 30px 0 0;

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

				a {
					text-decoration: none;
					color: $dark-color;
					transition: all 0.3s ease;

					&:hover,
					&:active {
						color: $primary-color;
					}
				}
			}
		}
	}

	#wpz-insta_modal-dialog, #wpz-insta_modal_graph-dialog, #wpz-insta_modal-dialog-connection-failed {
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 999999999999;
		background: rgba(0, 0, 0, 0.4);
		backdrop-filter: blur(5px);
		transition: all 0.3s ease;

		&:not(.open) {
			pointer-events: none;
			opacity: 0;
		}

		&.success {
			.wpz-insta_modal-dialog_wrap .wpz-insta_modal-dialog_header .wpz-insta_modal-dialog_header-title::before {
				background-color: $green-color;
				background-image: url( "data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.75204 15.8749L4.60249 11.7049L3.18945 13.1149L8.75204 18.7049L20.6932 6.70492L19.2901 5.29492L8.75204 15.8749Z' fill='white'/%3E%3C/svg%3E" );
			}
		}

		&.fail {
			.wpz-insta_modal-dialog_wrap .wpz-insta_modal-dialog_header .wpz-insta_modal-dialog_header-title::before {
				background-color: $red-color;
				background-image: url( "data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.9069 6.41L17.5038 5L11.9412 10.59L6.37867 5L4.97559 6.41L10.5381 12L4.97559 17.59L6.37867 19L11.9412 13.41L17.5038 19L18.9069 17.59L13.3443 12L18.9069 6.41Z' fill='white'/%3E%3C/svg%3E" );
			}
		}

		&.confirm {
			.wpz-insta_modal-dialog_wrap .wpz-insta_modal-dialog_header .wpz-insta_modal-dialog_header-title::before {
				content: '?';
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 24px;
				font-weight: 700;
				color: $light-color;
				background-color: $main-font-color;
				background-image: none;
			}
		}

		.wpz-insta_modal-dialog_wrap {
			font-family: $main-font-family;
			font-size: 14px;
			line-height: 20px;
			color: $main-font-color;
			background: $light-color;
			min-width: 850px;
			padding: 30px;
			border-radius: 3px;
			box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);

			.wpz-insta_modal-dialog_header {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 0 20px;
				border-bottom: 1px solid $light-grey-color;
				margin: 0 0 30px;

				.wpz-insta_modal-dialog_header-title {
					display: flex;
					align-items: center;
					font-size: 20px;
					font-weight: 600;
					padding: 0;
					margin: 0;

					&::before {
						content: '';
						display: block;
						background-color: $blue-grey-color;
						background-repeat: no-repeat;
						background-position: center;
						height: 28px;
						width: 28px;
						border-radius: 50%;
						margin: 0 15px 0 0;
					}
				}

				.wpz-insta_modal-dialog_header-button {
					cursor: pointer;
					text-indent: -999em;
					background-color: $darker-blue-grey-color;
					mask: url( "data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.9069 6.41L17.5038 5L11.9412 10.59L6.37867 5L4.97559 6.41L10.5381 12L4.97559 17.59L6.37867 19L11.9412 13.41L17.5038 19L18.9069 17.59L13.3443 12L18.9069 6.41Z'/%3E%3C/svg%3E" ) center no-repeat;
					height: 24px;
					width: 24px;
					padding: 0;
					margin: 0;
					overflow: hidden;
					transition: all 0.3s ease;

					&:hover {
						background-color: $primary-color;
					}
				}
			}

			.wpz-insta_modal-dialog_content {
				overflow: auto;

				.severe {
					color: $red-color;
				}
				.wpz-insta_connect-business-accounts {
					display: flex;

					.wpz-insta_business-accounts-link {
						display: flex;
						align-items: center;
						text-decoration: none;
						color: inherit;
						padding: 10px 20px;
						border: 1px solid #ddd;
						margin: 10px 20px;
						box-shadow: none !important;

						&.selected {
							border-color: #3496ff;
						}
					}
					
					.wpz-insta_business-accounts-link:first-child {
						margin-left: 0;
					}
	
					.wpz-insta_business-accounts-link img {
						width: 50px;
						height: 50px;
						border-radius: 50%;
						margin-right: 10px;
						border: 2px solid #ddd;
						object-fit: cover;
					}
	
					.wpz-insta_business-accounts-link h3 {
						font-size: 1em;
						margin: 0;
						font-weight: normal;
						color: #333;
					}
				}

			}

			.wpz-insta_modal-dialog_footer {
				display: flex;
				align-items: center;
				justify-content: end;
				gap: 10px;
				padding: 20px 0 0;
				border-top: 1px solid $light-grey-color;
				margin: 30px 0 0;

                .section-notice { margin-right: auto; }

				.wpz-insta_modal-dialog_footer-button {
					color: $light-color;
					background: $primary-color;
					padding-left: 30px;
					padding-right: 30px;
					transition: all 0.3s ease;
	
					&:hover,
					&:active {
						color: $light-color;
						background: $secondary-color;
					}

					&.button-secondary {
						color: $primary-color;
						background: transparent;
						border-color: $primary-color;

						&:hover,
						&:active {
							color: $light-color;
							background-color: $secondary-color;
						}
					}
				}
			}
		}
	}

    #wpz-insta_modal-dialog-connection-failed {
        .wpz-insta_modal-dialog_wrap {
            min-width: 200px;
            width: 80%;
        }

    }
}
.wpz-insta_sidebar-section {
	input{
		max-width: 100%;
	}
}
.wpz-insta_feed-only-pro {
	.wpz-insta_product-links-icon-design,
	.wpz-insta_product-links-design,
	.wpz-insta_product-links-general{
		opacity: 0.5;
	}
}

@keyframes slidedown {
	from {
		max-height: 0;
	}

	to {
		max-height: 100em;
	}
}

@keyframes highlighting {
	0% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.03, 1.2);
	}
	100% {
		transform: scale(1);
	}
}

@keyframes bounceFade {
	0% {
		opacity: 0;
	}
	0%, 20%, 50%, 80%, 100% {
		transform: translateX(-50%) translateY(0);
	}
	20% {
		opacity: 0;
	}
	40% {
		transform: translateX(-50%) translateY(-30px);
	}
	60% {
		transform: translateX(-50%) translateY(-15px);
	}
	100% {
		opacity: 1;
	}
}


/**
 * Tooltip Styles
 */

/* Add this attribute to the element that needs a tooltip */
[data-tooltip] {
  position: relative;
  z-index: 2;
  cursor: pointer;
}

/* Hide the tooltip content by default */
[data-tooltip]:before,
[data-tooltip]:after {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

/* Position tooltip above the element */
[data-tooltip]:before {
  position: absolute;
  bottom: 150%;
  left: 50%;
  margin-bottom: 5px;
  margin-left: -100px;
  padding: 7px;
  width: 200px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  background-color: #000;
  background-color: hsla(0, 0%, 20%, 0.9);
  color: #fff;
  content: attr(data-tooltip);
  text-align: center;
  font-size: 14px;
  line-height: 1.2;
}

/* Triangle hack to make tooltip look like a speech bubble */
[data-tooltip]:after {
  position: absolute;
  bottom: 150%;
  left: 50%;
  margin-left: -5px;
  width: 0;
  border-top: 5px solid #000;
  border-top: 5px solid hsla(0, 0%, 20%, 0.9);
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  content: " ";
  font-size: 0;
  line-height: 0;
}

/* Show tooltip content on hover */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
  visibility: visible;
  opacity: 1;
}


@media only screen and (max-width: 1100px) {

    .wpz-insta-admin #wpbody-content > .wrap .wpz-insta-wrap ~ #posts-filter .wp-list-table tbody td .wpz-insta_quick-edit .wpz-insta_quick-edit-columns {
        flex-direction: column;
    }
}



@media only screen and (max-width: 710px) {

    .wpz-insta-admin #wpbody-content > .wrap .wpz-insta_settings-connect .account-options .token_cols,
    .wpz-insta-admin #wpbody-content > .wrap .wpz-insta_settings-connect .account-options {
        display: flex;
        flex-direction: column;
    }

    .wpz-insta-admin #wpbody-content > .wrap .wpz-insta_settings-connect .account-options .token_cols .token_col {
        margin-bottom: 20px;
    }

}

.zoom-instagram-widget__item-inner-wrap {
    position: relative;

    &:hover .wpz-insta-link-product-btn {
        opacity: 1;
    }
}

// Product Link Modal
.wpz-insta-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;

    .wpz-insta-modal-content {
        background: #fff;
        border-radius: 4px;
        width: 90%;
        max-width: 600px;
        max-height: 80vh;
        display: flex;
        flex-direction: column;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    }

    .wpz-insta-modal-header {
        padding: 20px;
        border-bottom: 1px solid #ddd;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;

        .wpz-insta-back-to-products {
            background: none;
            border: none;
            cursor: pointer;
            color: #2271b1;
            padding: 4px;
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 4px;
            flex-shrink: 0;
            transition: background 0.15s, color 0.15s;

            .dashicons {
                font-size: 20px;
                width: 20px;
                height: 20px;
            }

            &:hover {
                background: #f0f0f0;
                color: #3496ff;
            }
        }

        h2, .wpz-insta-modal-title {
            margin: 0;
            font-size: 18px;
            flex: 1;
        }

        .wpz-insta-modal-close {
            background: none;
            border: none;
            font-size: 24px;
            cursor: pointer;
            color: #666;
            padding: 0;
            width: 30px;
            height: 30px;
            line-height: 30px;
            flex-shrink: 0;

            &:hover {
                color: #000;
            }
        }
    }

    .wpz-insta-modal-body {
        padding: 20px;
        overflow-y: auto;
        flex: 1;
    }

    .wpz-insta-product-link-hint {
        margin: 0 0 12px 0;
        font-size: 13px;
        color: #646970;
        line-height: 1.4;
    }

    .wpz-insta-product-search {
        margin-bottom: 20px;

        input {
            width: 100%;
            padding: 8px 12px;
            border: 1px solid #ddd;
            border-radius: 3px;
            font-size: 14px;
        }
    }

    .wpz-insta-product-list {
        // max-height: 400px;
        // overflow-y: auto;

        .wpz-insta-product-item {
            display: flex;
            align-items: center;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 3px;
            margin-bottom: 10px;
            cursor: pointer;
            transition: all 0.2s;

            &:hover {
                background: #f5f5f5;
                border-color: #2271b1;
            }

            &.selected {
                background: #e7f3ff;
                border-color: #2271b1;

                .wpz-insta-product-item-checkbox::after {
                    opacity: 1;
                }
            }

            .wpz-insta-product-item-checkbox {
                flex-shrink: 0;
                width: 20px;
                height: 20px;
                margin-right: 12px;
                border: 2px solid #8c8f94;
                border-radius: 3px;
                position: relative;
                transition: border-color 0.2s, background 0.2s;

                &::after {
                    content: '';
                    position: absolute;
                    left: 5px;
                    top: 2px;
                    width: 6px;
                    height: 11px;
                    border: solid #fff;
                    border-width: 0 2px 2px 0;
                    transform: rotate(45deg);
                    opacity: 0;
                }
            }

            &.selected .wpz-insta-product-item-checkbox {
                background: #2271b1;
                border-color: #2271b1;
            }

            img {
                width: 60px;
                height: 60px;
                object-fit: cover;
                border-radius: 3px;
                margin-right: 12px;
            }

            .wpz-insta-product-info {
                flex: 1;

                h4 {
                    margin: 0 0 5px 0;
                    font-size: 14px;
                    font-weight: 600;
                }

                .wpz-insta-product-price {
                    color: #2271b1;
                    font-weight: 600;
                    font-size: 14px;
                }
            }
        }

        .wpz-insta-loading,
        .wpz-insta-no-products,
        .wpz-insta-error {
            text-align: center;
            padding: 40px 20px;
            color: #666;
        }
    }

    .wpz-insta-product-pagination {
        margin-top: 20px;
        text-align: center;

        button {
            margin: 0 5px;
        }
    }

    .wpz-insta-modal-footer {
        padding: 20px;
        border-top: 1px solid #ddd;
        display: flex;
        justify-content: space-between;
        gap: 10px;

		.wpz-insta-modal-footer-left {
			display: flex;
			gap: 10px;
		}

		button {
			padding: 6px 12px;
		}

		.wpz-insta-remove-link {
			color: #b32d2e;
			border: 1px solid #e5b8b7;
			&:hover,
			&:focus {
				color: #9b191c;
				border-color: #e57373;
			}
		}
    }
}

// Product Links upsell modal (no license)
.wpz-insta-upsell-modal {
    .wpz-insta-upsell-content {
        max-width: 440px;
    }

    .wpz-insta-upsell-image {
        display: block;
        max-width: 100%;
        height: auto;
        margin: 0 0 16px 0;
        border-radius: 4px;
    }

    .wpz-insta-upsell-message {
        margin: 0 0 20px 0;
        font-size: 14px;
        line-height: 1.5;
        color: #1d2327;
    }

    .wpz-insta-upsell-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        align-items: center;
    }

    .wpz-insta-modal-footer {
        justify-content: flex-end;
    }
}

// "Tag in Image" button inside product items
.wpz-insta-product-item {
    position: relative;

    .wpz-insta-tag-in-image-btn {
        display: none; // Hidden by default
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        padding: 8px 12px;
        font-size: 12px;
        line-height: 1.4;
        white-space: nowrap;
        background-color: #1e1e1e;
        color: #fff;
        border: none;
        border-radius: 3px;
        cursor: pointer;
        z-index: 2;
		gap: 4px;
		font-weight: 600;

        &:hover {
            background-color: #333;
        	color: #fff;
		}
    }

    // Show "Tag in Image" button only when item is selected
    &.selected .wpz-insta-tag-in-image-btn {
        display: inline-flex;
        align-items: center;
    }

    // Tagged state - different style for "Edit Tag" button
    &.has-tag .wpz-insta-tag-in-image-btn,
    .wpz-insta-tag-in-image-btn.wpz-insta-tag-btn--tagged {
        background-color: #00a32a;

        &:hover {
            background-color: #008a20;
            color: #fff;
        }
		svg{
			transform: rotate(30deg);
		}
    }
}

// Album selector view
.wpz-insta-album-selector-view {
    .wpz-insta-album-hint {
        margin: 0 0 16px;
        font-size: 14px;
        color: #50575e;
    }
}

#wpz-insta-album-images {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 12px;
    max-height: 400px;
    overflow-y: auto;
    padding: 4px;

    .wpz-insta-album-image-item {
        position: relative;
        cursor: pointer;
        border: 2px solid transparent;
        border-radius: 4px;
        overflow: hidden;
        transition: border-color 0.2s, transform 0.2s;

        &:hover {
            border-color: #2271b1;
            transform: scale(1.02);
        }

        img {
            display: block;
            width: 100%;
            aspect-ratio: 1;
            object-fit: cover;
        }

        .wpz-insta-album-image-number {
            position: absolute;
            top: 6px;
            left: 6px;
            background: rgba(0, 0, 0, 0.7);
            color: #fff;
            font-size: 11px;
            font-weight: 600;
            padding: 2px 6px;
            border-radius: 3px;
        }
    }

    .wpz-insta-no-images {
        grid-column: 1 / -1;
        text-align: center;
        padding: 40px 20px;
        color: #666;
    }
}

// Tagging view
.wpz-insta-tagging-view {
    .wpz-insta-tagging-hint {
        margin: 0 0 12px;
        font-size: 14px;
        color: #50575e;
    }
}

// Tagging view: product preview in header
.wpz-insta-tagging-header-preview {
    flex: 0 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-left: 12px;

    .wpz-insta-tagging-product-preview {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 6px 12px 6px 6px;
        background: #f6f7f7;
        border-radius: 4px;
        border: 1px solid #ddd;
        max-width: 100%;

        img {
            width: 28px;
            height: 28px;
            object-fit: cover;
            border-radius: 3px;
            flex-shrink: 0;
        }

        span {
            font-size: 13px;
            font-weight: 500;
            color: #1d2327;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 180px;
        }
    }
}

// Tagging view footer (Remove tag position left, Save + Cancel right)
.wpz-insta-tagging-footer {
    padding: 20px;
    border-top: 1px solid #ddd;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;

    .wpz-insta-modal-footer-right {
        margin-right: auto;
    }

    .wpz-insta-modal-footer-left {
        display: flex;
        gap: 10px;
    }

    button {
        padding: 6px 12px !important;
    }

	.wpz-insta-remove-tag-position {
		color: #b32d2e;
		border: 1px solid #e5b8b7;
		&:hover,
		&:focus {
			color: #9b191c;
			border-color: #e57373;
		}
		&:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
	}
}

.wpz-insta-tagging-canvas-wrap {
    position: relative;
    display: inline-block;
    max-width: 100%;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
    background: #f0f0f0;

    #wpz-insta-tagging-image {
        display: block;
        max-width: 100%;
        max-height: 450px;
        object-fit: contain;
        cursor: crosshair;
    }
}

#wpz-insta-tagging-tags {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;

    .wpz-insta-tag {
        position: absolute;
        transform: translate(-50%, -50%);
        pointer-events: auto;
        cursor: grab;
        z-index: 10;

        &.dragging {
            cursor: grabbing;
        }

        .wpz-insta-tag-dot {
            display: block;
            width: 24px;
            height: 24px;
            background: #2271b1;
            border: 3px solid #fff;
            border-radius: 50%;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
            transition: transform 0.15s;

            &:hover {
                transform: scale(1.1);
            }
        }

        .wpz-insta-tag-label {
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translateX(-50%);
            margin-top: 6px;
            padding: 4px 10px;
            background: rgba(0, 0, 0, 0.85);
            color: #fff;
            font-size: 12px;
            font-weight: 500;
            white-space: nowrap;
            border-radius: 4px;
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.2s;

            &::before {
                content: '';
                position: absolute;
                bottom: 100%;
                left: 50%;
                transform: translateX(-50%);
                border: 5px solid transparent;
                border-bottom-color: rgba(0, 0, 0, 0.85);
            }
        }

        &:hover .wpz-insta-tag-label,
        &.dragging .wpz-insta-tag-label {
            opacity: 1;
        }
    }
}
