/**
 * AI URL Importer Styles
 */

#rsl-ie-ai-url-importer {
	.rsl-ie-premium-badge {
		display: inline-block;
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		color: white;
		padding: 4px 12px;
		border-radius: 4px;
		font-size: 14px;
		font-weight: 600;
		margin-left: 10px;
		vertical-align: middle;
	}

	// Premium Notice Banner
	.rsl-ie-premium-notice {
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		border-radius: 8px;
		padding: 30px;
		margin: 20px 0 30px 0;
		display: flex;
		align-items: center;
		gap: 25px;
		box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
		color: #fff;

		.rsl-ie-premium-notice-icon {
			flex-shrink: 0;
			width: 70px;
			height: 70px;
			background: rgba(255, 255, 255, 0.2);
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			backdrop-filter: blur(10px);

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

		.rsl-ie-premium-notice-content {
			flex: 1;

			h3 {
				margin: 0 0 10px 0;
				font-size: 24px;
				font-weight: 600;
				color: #fff;
			}

			p {
				margin: 0 0 20px 0;
				font-size: 15px;
				line-height: 1.6;
				color: rgba(255, 255, 255, 0.95);
			}

			.button {
				background: #fff;
				color: #667eea;
				border: none;
				padding: 10px 25px;
				font-size: 15px;
				font-weight: 600;
				border-radius: 5px;
				box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
				transition: all 0.3s ease;
				margin: 0 5px;

				&:hover {
					background: #f8f9ff;
					color: #5568d3;
					transform: translateY(-2px);
					box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
				}

				.dashicons {
					color: #667eea;
					margin-top: 3px;
				}
			}
		}

		// API Key Notice variant
		&.rsl-ie-api-key-notice {
			background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
			box-shadow: 0 4px 15px rgba(17, 153, 142, 0.3);

			.rsl-ie-premium-notice-content .button {
				color: #11998e;
				display: inline-flex;
				align-items: center;

				&:hover {
					color: #0e8074;
				}

				.dashicons {
					color: #11998e;
					margin-right: 5px;
				}
			}
		}

		// Mobile responsive styles
		@media (max-width: 768px) {
			flex-direction: column;
			text-align: center;
			padding: 25px 20px;
			gap: 20px;

			.rsl-ie-premium-notice-icon {
				width: 60px;
				height: 60px;

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

			.rsl-ie-premium-notice-content {
				h3 {
					font-size: 20px;
				}

				p {
					font-size: 14px;
					margin: 0 0 15px 0;
				}

				.button {
					display: inline-flex;
					align-items: center;
					justify-content: center;
					gap: 8px;
					width: 100%;
					margin-bottom: 10px;
					padding: 12px 20px;
					font-size: 14px;

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

					.dashicons {
						margin-top: 0;
					}
				}
			}
		}

		// Extra small mobile
		@media (max-width: 480px) {
			padding: 20px 15px;

			.rsl-ie-premium-notice-icon {
				width: 50px;
				height: 50px;

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

			.rsl-ie-premium-notice-content {
				h3 {
					font-size: 18px;
				}

				p {
					font-size: 13px;
				}

				.button {
					padding: 10px 15px;
					font-size: 13px;
				}
			}
		}
	}

	.rsl-ie-ai-url-importer-container {
		margin-top: 30px;
		position: relative;
		background: #fff;
		border: 1px solid #c3c4c7;
		border-radius: 4px;
		padding: 30px;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);

		&.rsl-ie-disabled {
			pointer-events: none;
			opacity: 0.6;
			position: relative;

			&::after {
				content: "";
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background: rgba(255, 255, 255, 0.5);
				z-index: 10;
			}
		}
	}

	.rsl-ie-step {
		display: none !important; // Override general wizard styles
		visibility: hidden !important;
		opacity: 0 !important;
		height: 0 !important;
		overflow: hidden !important;

		&.rsl-ie-step-active {
			display: block !important; // Show only active step
			visibility: visible !important;
			opacity: 1 !important;
			height: auto !important;
			overflow: visible !important;
		}
	}

	.rsl-ie-step-header {
		background: #f6f7f7;
		border-bottom: 1px solid #ccd0d4;
		padding: 20px;

		h2 {
			margin: 0 0 10px;
			font-size: 18px;
		}

		.description {
			margin: 0;
			color: #646970;
		}
	}

	.rsl-ie-step-content {
		padding: 20px;
	}

	.rsl-ie-step-actions {
		margin-top: 30px;
		padding-top: 20px;
		border-top: 1px solid #dcdcde;
		text-align: right;

		.button + .button {
			margin-left: 10px;
		}
	}

	#rsl-ie-start-import-btn.rsl-ie-button-loading {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		pointer-events: none;

		.spinner {
			float: none;
			margin: 0;
			visibility: visible;
		}
	}

	// Step 1: URL Input
	.rsl-ie-url-input-methods {
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		gap: 30px;
		margin-bottom: 20px;

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

	.rsl-ie-input-method {
		h3 {
			font-size: 16px;
			margin: 0 0 15px;
		}

		textarea {
			width: 100%;
			font-family: monospace;
		}
	}

	.rsl-ie-input-method-divider {
		display: flex;
		align-items: center;
		justify-content: center;
		color: #8c8f94;
		font-weight: 600;

		@media (max-width: 768px) {
			display: none;
		}
	}

	.rsl-ie-file-upload-area {
		border: 2px dashed #c3c4c7;
		border-radius: 4px;
		padding: 40px 20px;
		text-align: center;
		transition: all 0.3s ease;
		cursor: pointer;
		background: #f6f7f7;

		&:hover,
		&.dragover {
			border-color: #2271b1;
			background: #f0f6fc;
		}

		.dashicons {
			font-size: 48px;
			width: 48px;
			height: 48px;
			color: #8c8f94;
			margin-bottom: 10px;
		}

		p {
			margin: 10px 0;
			color: #50575e;
		}
	}

	.rsl-ie-file-info {
		background: #f0f6fc;
		border: 1px solid #2271b1;
		border-radius: 4px;
		padding: 15px;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.file-name {
			font-weight: 600;
			color: #2271b1;
		}
	}

	.rsl-ie-url-count {
		background: #f0f6fc;
		border-left: 4px solid #2271b1;
		padding: 15px;
		margin-top: 20px;

		strong {
			margin-right: 10px;
		}

		.count {
			font-size: 18px;
			font-weight: 600;
			color: #2271b1;
		}
	}

	// Step 2: Settings
	.form-table {
		th {
			width: 200px;
		}
	}

	// ACF Field Browser
	#rsl-ie-acf-field-browser {
		#rsl-ie-acf-field-search {
			margin-bottom: 15px;
		}

		#rsl-ie-acf-field-tree {
			max-height: 400px;
			overflow-y: auto;
			border: 1px solid #dcdcde;
			border-radius: 4px;
			background: #f9f9f9;
			padding: 15px;
		}

		.rsl-ie-acf-field-list {
			list-style: none;
			margin: 0;
			padding: 0;
		}

		.rsl-ie-acf-field-item {
			margin: 0;
			padding: 0;
		}

		.rsl-ie-acf-field-header {
			display: flex;
			align-items: center;
			padding: 8px 10px;
			border-radius: 4px;
			margin-bottom: 4px;
			transition: background-color 0.2s;

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

			&.has-children {
				cursor: pointer;
			}
		}

		.rsl-ie-acf-toggle {
			flex-shrink: 0;
			width: 20px;
			height: 20px;
			font-size: 16px;
			cursor: pointer;
			color: #50575e;
			transition: transform 0.2s;

			&:hover {
				color: #2271b1;
			}
		}

		.rsl-ie-acf-spacer {
			flex-shrink: 0;
			width: 20px;
			height: 20px;
		}

		.rsl-ie-acf-field-label {
			display: flex;
			align-items: center;
			gap: 8px;
			flex: 1;
			cursor: pointer;

			&.disabled {
				cursor: default;
				opacity: 0.6;

				.field-name {
					color: #8c8f94;
				}
			}

			input[type="radio"] {
				margin: 0;
				cursor: pointer;
			}

			.field-name {
				font-weight: 500;
				color: #2c3338;
			}

			.field-type {
				color: #646970;
				font-size: 12px;
				font-style: italic;
			}
		}

		.rsl-ie-acf-field-children {
			list-style: none;
			margin: 0 0 0 30px;
			padding: 0;
		}
	}

	#rsl-ie-acf-field-browser {
		.rsl-ie-acf-field-group {
			margin-bottom: 15px;

			h4 {
				margin: 0 0 10px;
				font-size: 14px;
				color: #50575e;
			}
		}
	}

	// Step 3: Test & Preview
	.rsl-ie-test-connection-section,
	.rsl-ie-preview-section {
		margin-bottom: 30px;
		padding-bottom: 30px;
		border-bottom: 1px solid #dcdcde;

		&:last-child {
			border-bottom: none;
		}

		h3 {
			margin: 0 0 15px;
			font-size: 16px;
		}
	}

	.rsl-ie-test-result {
		margin-top: 15px;
		padding: 12px 15px;
		border-radius: 4px;
		display: flex;
		align-items: center;
		gap: 10px;

		&.success {
			background: #d7f0d7;
			border-left: 4px solid #46b450;
			color: #1e4620;
		}

		&.error {
			background: #f9dddc;
			border-left: 4px solid #d63638;
			color: #3c1518;
		}

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

	.rsl-ie-preview-url-display {
		background: #f6f7f7;
		padding: 12px 15px;
		border-radius: 4px;
		margin: 15px 0;
		word-break: break-all;

		strong {
			margin-right: 10px;
		}

		span {
			color: #2271b1;
			font-family: monospace;
		}
	}

	.rsl-ie-preview-result {
		margin-top: 20px;
		border: 1px solid #c3c4c7;
		border-radius: 4px;
		padding: 20px;

		> div {
			margin-bottom: 20px;

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

		h4 {
			margin: 0 0 10px;
			font-size: 14px;
			font-weight: 600;
			color: #50575e;
		}

		.preview-title-content h3 {
			margin: 0;
			font-size: 20px;
		}

		.preview-excerpt-content {
			color: #646970;
			font-style: italic;
		}

		.preview-content-html {
			background: #f6f7f7;
			padding: 15px;
			border-radius: 4px;
			max-height: 600px;
			overflow-y: auto;
			border-bottom: 3px solid #c3c4c7;

			// Scroll shadow hint so user knows content continues
			background-image: linear-gradient(
					to bottom,
					#f6f7f7 30%,
					transparent
				),
				linear-gradient(to top, #f6f7f7 30%, transparent);
			background-attachment: local, local;
		}

		.rsl-ie-preview-content-stats {
			margin-top: 6px;

			.rsl-ie-content-stats {
				font-size: 12px;
				color: #646970;
				margin: 4px 0 0;
			}

			.rsl-ie-truncation-warning {
				margin-top: 8px;
			}
		}

		.preview-images-list {
			display: grid;
			grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
			gap: 15px;
		}

		.preview-image-item {
			border: 1px solid #dcdcde;
			border-radius: 4px;
			padding: 10px;
			text-align: center;

			img {
				display: block;
				max-width: 100%;
				height: auto;
				margin-bottom: 10px;
				border-radius: 2px;
			}

			p {
				margin: 0;
				font-size: 11px;
				color: #646970;
				word-break: break-all;
			}
		}

		.preview-featured-image {
			img {
				max-width: 300px;
				height: auto;
				border: 1px solid #dcdcde;
				border-radius: 4px;
			}
		}
	}

	// Step 4: Progress
	.rsl-ie-import-progress {
		margin-bottom: 30px;
	}

	.rsl-ie-progress-bar {
		height: 30px;
		background: #f0f0f1;
		border-radius: 4px;
		overflow: hidden;
		margin-bottom: 10px;
	}

	.rsl-ie-progress-fill {
		height: 100%;
		background: linear-gradient(90deg, #2271b1 0%, #72aee6 100%);
		transition: width 0.3s ease;
		display: flex;
		align-items: center;
		justify-content: center;
		color: white;
		font-weight: 600;
	}

	.rsl-ie-progress-text {
		text-align: center;
		font-size: 16px;
		color: #50575e;
	}

	.rsl-ie-import-status {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
		gap: 20px;
		margin-bottom: 30px;

		.status-item {
			background: #f6f7f7;
			padding: 15px;
			border-radius: 4px;
			border-left: 4px solid #c3c4c7;

			strong {
				display: block;
				margin-bottom: 5px;
				color: #50575e;
			}

			span {
				font-size: 20px;
				font-weight: 600;
			}
		}

		.status-item:nth-child(1) {
			border-left-color: #46b450;
			.success-count {
				color: #46b450;
			}
		}

		.status-item:nth-child(2) {
			border-left-color: #d63638;
			.failed-count {
				color: #d63638;
			}
		}

		.status-item:nth-child(3) {
			border-left-color: #2271b1;
			.import-status-text {
				color: #2271b1;
				font-size: 13px;
				font-weight: 500;
			}
		}
	}

	.rsl-ie-import-log {
		h3 {
			margin: 0 0 15px;
			font-size: 16px;
		}
	}

	.rsl-ie-log-entries {
		background: #f6f7f7;
		border: 1px solid #c3c4c7;
		border-radius: 4px;
		padding: 15px;
		max-height: 260px;
		overflow-y: auto;
		font-family: monospace;
		font-size: 13px;
		scroll-behavior: smooth;

		.log-entry {
			padding: 5px 0;
			border-bottom: 1px solid #dcdcde;

			&:last-child {
				border-bottom: none;
			}

			.log-time {
				color: #646970;
				margin-right: 10px;
			}

			.log-url {
				color: #2271b1;
				margin-right: 10px;
			}

			&.success {
				color: #1e4620;

				.log-status {
					color: #46b450;
					font-weight: 600;
				}
			}

			&.error {
				color: #3c1518;

				.log-status {
					color: #d63638;
					font-weight: 600;
				}
			}
		}
	}

	// Inline Notice Styles (WordPress-like)
	.rsl-ie-inline-notice {
		margin: 15px 0 20px 0;

		p {
			margin: 0.5em 0;
			line-height: 1.6;

			&:first-child {
				margin-top: 0;
			}

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

		strong {
			font-weight: 600;
		}
	}

	// Test Connection Result
	.rsl-ie-test-result {
		padding: 12px 15px;
		border-radius: 4px;
		margin-top: 15px;
		display: none;

		&.success {
			background: #d7f7dc;
			border: 1px solid #46b450;
			color: #1e4620;

			.dashicons {
				color: #46b450;
			}
		}

		&.error {
			background: #fcf0f1;
			border: 1px solid #d63638;
			color: #3c1518;

			.dashicons {
				color: #d63638;
			}
		}

		.dashicons {
			vertical-align: middle;
			margin-right: 5px;
		}
	}
}
