/* Effect 1: Zoom in animation effect
 * Modal content starts scaled down (70%) and zooms in to full size when activated
 * Uses !important to ensure effect overrides base modal styles
 */
.spectra-modal-popup.spectra-effect-1 {

	.wp-block-spectra-modal-popup-content,
	.wp-block-spectra-modal-child-popup-close-icon {
		-webkit-transform: scale(0.7) !important; /* Override base modal styles */
		-ms-transform: scale(0.7) !important; /* IE/Edge support */
		transform: scale(0.7) !important; /* Ensure zoom effect is applied */
		opacity: 0 !important; /* Override any inherited opacity */
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
		-webkit-transition: all 0.3s !important; /* Override conflicting transitions */
		transition: all 0.3s !important; /* Ensure smooth animation */
	}

	&.active {

		.wp-block-spectra-modal-popup-content,
		.wp-block-spectra-modal-child-popup-close-icon {
			-webkit-transform: scale(1) !important; /* Complete zoom-in effect */
			-ms-transform: scale(1) !important; /* IE/Edge support */
			transform: scale(1) !important; /* Return to normal scale */
			opacity: 1 !important; /* Full visibility in active state */
			-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
			-webkit-transition: all 0.3s !important; /* Maintain smooth transition */
			transition: all 0.3s !important; /* For active state animation */
		}
	}
}

/* Effect 3: Slide animation effect
 * Default: Modal slides in from the right (starts at +20% X position)
 * Left off-canvas variant: Modal slides in from the left (starts at -20% X position)
 * Both variants slide to center (0) when activated
 */
.spectra-modal-popup.spectra-effect-3 {

	.wp-block-spectra-modal-popup-content,
	.wp-block-spectra-modal-child-popup-close-icon {
		-webkit-transform: translateX(20%);
		-ms-transform: translateX(20%);
		transform: translateX(20%);
		opacity: 0;
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
		-webkit-transition: all 0.3s;
		transition: all 0.3s;
	}

	/* Left sidebar variant - slide from left instead of right */
	&.spectra-modal-type-left-off-canvas {

		.wp-block-spectra-modal-popup-content,
		.wp-block-spectra-modal-child-popup-close-icon {
			-webkit-transform: translateX(-20%);
			-ms-transform: translateX(-20%);
			transform: translateX(-20%);
			opacity: 0;
			-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
			-webkit-transition: all 0.3s;
			transition: all 0.3s;
		}
	}

	/* Active state - content slides to center position */
	&.active {

		.wp-block-spectra-modal-popup-content,
		.wp-block-spectra-modal-child-popup-close-icon {
			-webkit-transform: translateX(0);
			-ms-transform: translateX(0);
			transform: translateX(0);
			opacity: 1;
			-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
			-webkit-transition: all 0.3s;
			transition: all 0.3s;
		}
	}
}

/* Default styling for modal close button
 * Sets a dark gray background color for the close button
 */
.spectra-modal-popup button.spectra-modal-popup-close
.spectra-modal-popup .spectra-modal-popup-close {
	background: #575656;
}

/* Pro Modal Styles
 * Contains positioning and layout styles for various modal types:
 * - Left/Right sidebars (off-canvas)
 * - Corner positions (top-left, top-right, bottom-left, bottom-right)
 * - Window-positioned close buttons
 */
.spectra-modal-popup {

	// Remove center alignment for off-canvas modal types when content is not auto-height.
	&:where(.active.spectra-modal-type-left-off-canvas):not(:has(.wp-block-spectra-modal-popup-content.spectra-height-auto)),
	&:where(.active.spectra-modal-type-right-off-canvas):not(:has(.wp-block-spectra-modal-popup-content.spectra-height-auto)) {
		align-items: normal;
	}

	/* Left Sidebar Modal
	 * Full height sidebar that slides in from the left edge
	 * Close button appears on the right side of the modal
	 */
	&.spectra-modal-type-left-off-canvas {

		/* Modal content - default to full height for off-canvas
		 * Override with auto height when contentHeight is set to auto
		 */
		.wp-block-spectra-modal-popup-content {
			height: 100% !important;

			&.spectra-height-auto {
				height: auto !important;
			}
		}

		&.active {
			justify-content: left;

			.spectra-modal-popup-close {
				top: 0 !important;

				&:not(.window-top-right) {
					left: 100%;
					right: unset !important;
					width: 40px;
					height: 40px;
					justify-content: center;
					text-align: center;
				}
			}
		}
	}

	/* Right Sidebar Modal
	 * Full height sidebar that slides in from the right edge
	 * Close button appears on the left side of the modal
	 */
	&.spectra-modal-type-right-off-canvas {

		/* Modal content - default to full height for off-canvas
		 * Override with auto height when contentHeight is set to auto
		 */
		.wp-block-spectra-modal-popup-content {
			height: 100% !important;

			&.spectra-height-auto {
				height: auto !important;
			}
		}

		&.active {
			justify-content: right;

			.spectra-modal-popup-close {
				top: 0 !important;

				&:not(.window-top-left) {
					right: 100%;
					left: unset !important;
					width: 40px;
					height: 40px;
					justify-content: center;
					text-align: center;
				}
			}
		}
	}

	/* Top Right Corner Modal
	 * Modal appears in the top-right corner of the viewport
	 * Close button positioned to the left of the modal
	 */
	&.spectra-modal-position-top-right {

		&.active {
			align-items: flex-start;
			justify-content: flex-end;

			.spectra-modal-popup-close {

				&:not(.window-top-right) {
					top: 0 !important;
					left: -25px;
					right: 100%;
				}
			}
		}
	}

	/* Top Left Corner Modal
	 * Modal appears in the top-left corner of the viewport
	 * Close button positioned to the right of the modal
	 */
	&.spectra-modal-position-top-left {

		&.active {
			align-items: flex-start;
			justify-content: flex-start;

			.spectra-modal-popup-close {

				&:not(.window-top-left) {
					top: 0 !important;
					right: -25px;
					left: 100%;
				}
			}
		}
	}

	/* Bottom Right Corner Modal
	 * Modal appears in the bottom-right corner of the viewport
	 * Close button positioned to the left of the modal
	 */
	&.spectra-modal-position-bottom-right {

		&.active {
			align-items: flex-end;
			justify-content: flex-end;

			.spectra-modal-popup-close {

				&:not(.window-top-left),
				&:not(.window-top-right) {
					left: -25px;
					right: 100%;
				}
			}
		}
	}

	/* Bottom Left Corner Modal
	 * Modal appears in the bottom-left corner of the viewport
	 * Close button positioned to the right of the modal
	 */
	&.spectra-modal-position-bottom-left {

		&.active {
			align-items: flex-end;
			justify-content: flex-start;

			.spectra-modal-popup-close {

				&:not(.window-top-left),
				&:not(.window-top-right) {
					right: -25px;
					left: 100%;
				}
			}
		}
	}

	/* Pro Close Button Positioning
	 * Window-positioned close buttons that appear inside the modal
	 * !important overrides any conflicting styles from the free version
	 */
	&.active {

		.spectra-modal-popup-close {

			&.window-top-right {
				top: 25px !important;
				right: 25px !important;
				left: unset !important;
			}

			&.window-top-left {
				top: 25px !important;
				left: 25px !important;
				right: unset !important;
			}
		}
	}
}
