/**
 * Content Type Selection & Filter
 */

.import-export-by-rockstarlab {
	// Content Type Filter
	.rsl-ie-content-type-filter {
		position: relative;
		margin-bottom: 25px;
		max-width: 400px;

		input[type="text"] {
			width: 100%;
			padding: 8px 40px 8px 12px;
			font-size: 14px;
			border: 1px solid #8c8f94;
			border-radius: 4px;
			transition: border-color 0.2s;

			&:focus {
				border-color: #2271b1;
				box-shadow: 0 0 0 1px #2271b1;
				outline: none;
			}
		}

		.dashicons-search {
			position: absolute;
			right: 12px;
			top: 50%;
			transform: translateY(-50%);
			color: #646970;
			pointer-events: none;
		}

		.rsl-ie-filter-count {
			position: absolute;
			right: 40px;
			top: 50%;
			transform: translateY(-50%);
			font-size: 12px;
			color: #646970;
			background: #f0f0f1;
			padding: 2px 8px;
			border-radius: 10px;
			pointer-events: none;

			.rsl-ie-filter-count-value {
				font-weight: 600;
				color: #2271b1;
			}
		}
	}

	// No Results Message
	.rsl-ie-no-results {
		text-align: center;
		padding: 60px 20px;
		background: #f9f9f9;
		border: 2px dashed #dcdcde;
		border-radius: 8px;
		margin-bottom: 20px;

		.dashicons {
			font-size: 64px;
			width: 64px;
			height: 64px;
			color: #c3c4c7;
			margin-bottom: 15px;
		}

		h3 {
			margin: 0 0 10px;
			font-size: 18px;
			color: #646970;
		}

		p {
			margin: 0;
			font-size: 14px;
			color: #8c8f94;
		}
	}

	// Content Type Selection
	.rsl-ie-content-types {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
		gap: 20px;
		margin-bottom: 20px;
	}

	.rsl-ie-content-type {
		cursor: pointer;
		transition:
			opacity 0.3s ease,
			transform 0.2s ease;

		&:not([style*="display: none"]) {
			animation: fadeIn 0.3s ease;
		}

		input[type="radio"] {
			display: none;
		}

		.rsl-ie-content-type-card {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			min-height: 160px;
			border: 2px solid #dcdcde;
			border-radius: 4px;
			padding: 20px 20px;
			text-align: center;
			transition: all 0.2s;

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

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

			p {
				margin: 0;
				font-size: 13px;
				color: #646970;
			}

			&:hover {
				border-color: #2271b1;
				box-shadow: 0 2px 8px rgba(34, 113, 177, 0.1);
			}

			&.rsl-ie-disabled {
				opacity: 0.5;
				cursor: not-allowed;
				pointer-events: none;
			}
		}

		input:checked + .rsl-ie-content-type-card {
			border-color: #2271b1;
			background: #f0f6fc;

			.dashicons {
				color: #2271b1;
			}
		}

		// Premium Badge
		.rsl-ie-premium-badge {
			display: inline-flex;
			align-items: center;
			gap: 4px;
			background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
			color: #fff;
			font-size: 11px;
			font-weight: 600;
			padding: 3px 8px;
			border-radius: 10px;
			margin-top: 8px;
			text-transform: uppercase;
			letter-spacing: 0.5px;
			box-shadow: 0 2px 4px rgba(245, 158, 11, 0.3);

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

		&.rsl-ie-pro-addon-card {
			cursor: default;
			grid-column: 1 / -1;

			.rsl-ie-content-type-card {
				min-height: 0;
				align-items: stretch;
				text-align: left;
				justify-content: flex-start;
				border-style: solid;
				border-width: 2px;
				border-color: transparent;
				border-radius: 8px;
				padding: 22px 22px;
				background:
					linear-gradient(#ffffff, #ffffff) padding-box,
					linear-gradient(135deg, #2271b1 0%, #f97316 100%) border-box;
				box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);

				&:hover {
					border-color: transparent;
					box-shadow: 0 10px 26px rgba(0, 0, 0, 0.1);
					transform: translateY(-1px);
				}
			}

			.rsl-ie-pro-addon-header {
				display: flex;
				align-items: flex-start;
				gap: 14px;
				margin-bottom: 14px;
			}

			.rsl-ie-pro-addon-icon {
				width: 42px;
				height: 42px;
				border-radius: 10px;
				background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
				box-shadow: 0 6px 16px rgba(245, 158, 11, 0.25);
				display: flex;
				align-items: center;
				justify-content: center;

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

			.rsl-ie-pro-addon-copy {
				flex: 1;

				h3 {
					margin: 0 0 6px;
					font-size: 18px;
				}

				p {
					margin: 0;
					color: #50575e;
					font-size: 13px;
					line-height: 1.5;
				}
			}

			.rsl-ie-pro-addon-features {
				margin: 0;
				padding: 0;
				list-style: none;
				display: grid;
				grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
				gap: 10px 18px;
			}

			.rsl-ie-pro-addon-features li {
				display: flex;
				gap: 10px;
				align-items: flex-start;
				padding: 10px 10px;
				border: 1px solid #eef0f3;
				border-radius: 8px;
				background: #fafbfc;

				.dashicons {
					color: #00a32a;
					margin-top: 2px;
				}
			}

			.rsl-ie-pro-addon-feature-text {
				display: flex;
				flex-direction: column;
				gap: 2px;

				strong {
					font-size: 13px;
					color: #1d2327;
				}

				span {
					font-size: 12px;
					color: #50575e;
					line-height: 1.4;
				}
			}

			.rsl-ie-pro-addon-cta {
				margin-top: 12px;
				align-self: flex-start;
			}

			.rsl-ie-pro-addon-dismiss {
				margin-top: 10px;
				color: #646970;
				font-size: 12px;

				.button-link {
					padding: 0;
					font-size: 12px;
					line-height: 1.2;
					text-decoration: none;
				}
			}

			.rsl-ie-pro-addon-dismiss-sep {
				margin: 0 6px;
				color: #c3c4c7;
			}

			.rsl-ie-pro-license-cta {
				grid-column: 1 / -1;
				display: flex;
				justify-content: flex-start;
				margin-top: -6px;
				margin-bottom: 6px;
			}
		}
	}
}

@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(-10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
