// Import/Export Results
.rsl-ie-import-results,
.rsl-ie-export-results {
	margin: 30px 0;

	// Success card with modern design
	.rsl-ie-export-complete-card,
	.rsl-ie-import-complete-card {
		background: #fff;
		border: 2px solid var(--rsl-ie-complete-color, #00a32a);
		border-radius: 12px;
		padding: 40px;
		text-align: center;
		box-shadow: 0 4px 20px
			var(--rsl-ie-complete-shadow, rgba(0, 163, 42, 0.1));
		animation: slideInUp 0.5s ease-out;

		.rsl-ie-complete-icon {
			margin: 0 auto 20px;
			width: 80px;
			height: 80px;
			background: linear-gradient(
				135deg,
				var(--rsl-ie-complete-color, #00a32a),
				var(--rsl-ie-complete-color-dark, #008a20)
			);
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			box-shadow: 0 4px 16px
				var(--rsl-ie-complete-icon-shadow, rgba(0, 163, 42, 0.3));

			.dashicons {
				font-size: 48px;
				width: 48px;
				height: 48px;
				color: #fff;
			}
		}

		.rsl-ie-complete-title {
			margin: 0 0 10px;
			font-size: 28px;
			font-weight: 600;
			color: var(--rsl-ie-complete-color, #00a32a);
		}

		.rsl-ie-complete-subtitle {
			margin: 0 0 30px;
			font-size: 16px;
			color: #646970;
		}

		.rsl-ie-results-grid {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 20px;
			margin: 30px 0;
			padding: 20px 0;
			border-top: 1px solid #dcdcde;
			border-bottom: 1px solid #dcdcde;

			// Responsive breakpoints
			@media (max-width: 1024px) {
				grid-template-columns: repeat(2, 1fr);
			}

			@media (max-width: 640px) {
				grid-template-columns: 1fr;
				gap: 15px;
			}

			.rsl-ie-result-item {
				display: flex;
				align-items: center;
				gap: 15px;
				padding: 15px;
				background: #f6f7f7;
				border-radius: 8px;
				transition: all 0.3s ease;

				&:hover {
					background: #eff1f2;
					transform: translateY(-2px);
					box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
				}

				.rsl-ie-result-icon {
					flex-shrink: 0;
					width: 40px;
					height: 40px;
					background: linear-gradient(
						135deg,
						var(--rsl-ie-result-default-color, #2271b1),
						var(--rsl-ie-result-default-color-dark, #135e96)
					);
					border-radius: 8px;
					display: flex;
					align-items: center;
					justify-content: center;

					.dashicons {
						font-size: 24px;
						width: 24px;
						height: 24px;
						color: #fff;
					}

					// Success icon (green)
					&.rsl-ie-icon-success {
						background: linear-gradient(
							135deg,
							var(--rsl-ie-result-success-color, #00a32a),
							var(--rsl-ie-result-success-color-dark, #008a20)
						);
					}

					// Updated icon (blue)
					&.rsl-ie-icon-updated {
						background: linear-gradient(
							135deg,
							var(--rsl-ie-result-updated-color, #2271b1),
							var(--rsl-ie-result-updated-color-dark, #135e96)
						);
					}

					// Created icon (purple)
					&.rsl-ie-icon-created {
						background: linear-gradient(
							135deg,
							var(--rsl-ie-result-created-color, #826eb4),
							var(--rsl-ie-result-created-color-dark, #6b5a9e)
						);
					}

					// Skipped icon (orange)
					&.rsl-ie-icon-skipped {
						background: linear-gradient(
							135deg,
							var(--rsl-ie-result-skipped-color, #f0b849),
							var(--rsl-ie-result-skipped-color-dark, #d99a1a)
						);
					}

					// Failed icon (red)
					&.rsl-ie-icon-failed {
						background: linear-gradient(
							135deg,
							var(--rsl-ie-result-failed-color, #d63638),
							var(--rsl-ie-result-failed-color-dark, #b32d2e)
						);
					}
				}

				.rsl-ie-result-details {
					flex: 1;
					text-align: left;

					.rsl-ie-result-label {
						display: block;
						font-size: 12px;
						color: #646970;
						margin-bottom: 4px;
					}

					.rsl-ie-result-value {
						display: block;
						font-size: 20px;
						font-weight: 600;
						color: #1d2327;
					}
				}
			}
		}
	}

	// Legacy notice styles (for backward compatibility)
	.notice {
		padding: 20px;

		h3 {
			margin: 0 0 15px;
		}

		.rsl-ie-results-list {
			margin: 0;
			list-style: none;

			li {
				margin: 10px 0;
				font-size: 14px;

				strong {
					color: #2271b1;
				}
			}
		}

		.button {
			margin-top: 15px;
		}
	}

	// Enhanced download button
	.rsl-ie-download-options {
		align-items: center;
		display: flex;
		flex-direction: column;
		margin: 26px auto 0;
		max-width: 460px;
		text-align: center;

		.rsl-ie-download-zip-option {
			align-items: center;
			background: #fff;
			border: 1px solid #dcdcde;
			border-radius: 999px;
			box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
			color: #1d2327;
			cursor: pointer;
			display: flex;
			font-weight: 600;
			gap: 10px;
			justify-content: center;
			margin: 0;
			min-height: 42px;
			padding: 10px 18px;
			transition: all 0.2s ease;

			input[type="checkbox"] {
				accent-color: #2271b1;
				cursor: pointer;
				height: 18px;
				margin: 0;
				width: 18px;
			}

			&:hover {
				border-color: #2271b1;
				box-shadow: 0 4px 12px rgba(34, 113, 177, 0.12);
			}

			&.is-disabled {
				background: #f6f7f7;
				color: #8c8f94;
				cursor: not-allowed;

				input[type="checkbox"] {
					cursor: not-allowed;
				}

				&:hover {
					border-color: #dcdcde;
					box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
				}
			}
		}

		.description {
			color: #646970;
			font-size: 13px;
			line-height: 1.45;
			margin: 10px auto 0;
			max-width: 380px;
		}
	}

	.rsl-ie-download-action {
		margin-top: 30px;
		text-align: center;

		.rsl-ie-download-file {
			background: linear-gradient(
				135deg,
				var(--rsl-ie-download-color, #2271b1),
				var(--rsl-ie-download-color-dark, #135e96)
			);
			border: none;
			color: #fff;
			font-size: 16px;
			font-weight: 600;
			padding: 15px 40px;
			border-radius: 6px;
			box-shadow: 0 4px 12px
				var(--rsl-ie-download-shadow, rgba(34, 113, 177, 0.3));
			transition: all 0.3s ease;
			cursor: pointer;

			&:hover {
				background: linear-gradient(
					135deg,
					var(--rsl-ie-download-color-dark, #135e96),
					var(--rsl-ie-download-color-darker, #0d4066)
				);
				box-shadow: 0 6px 16px
					var(--rsl-ie-download-hover-shadow, rgba(34, 113, 177, 0.4));
				transform: translateY(-2px);
			}

			&.is-downloading,
			&.is-downloading:hover,
			&:disabled {
				opacity: 0.86;
				cursor: wait;
				transform: none;
				box-shadow: 0 3px 10px
					var(
						--rsl-ie-download-disabled-shadow,
						rgba(34, 113, 177, 0.26)
					);
			}

			&:active {
				transform: translateY(0);
				box-shadow: 0 2px 8px
					var(--rsl-ie-download-shadow, rgba(34, 113, 177, 0.3));
			}

			.dashicons {
				font-size: 24px;
				width: 24px;
				height: 24px;
				margin-right: 8px;
				vertical-align: middle;
			}

			.rsl-ie-download-spinner {
				animation: rsl-ie-download-spin 0.85s linear infinite;
			}
		}
	}
}

@keyframes rsl-ie-download-spin {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}

// Animation
@keyframes slideInUp {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
