/**
 * Theme Preview Manager - Preview Launch Styles
 *
 * Phase 5: the product-page "Preview This Theme" button and its
 * loading/error states. Enqueued only on a product whose preview
 * configuration is STATUS_READY — see
 * WooCommerce\Frontend\PreviewLaunchController::enqueue_assets().
 */

.tpm-preview-launch-button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 12px 0;
	padding: 10px 20px;
	background: #2271b1;
	color: #fff;
	border: none;
	border-radius: 4px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.15s ease-in-out;
}

.tpm-preview-launch-button:hover,
.tpm-preview-launch-button:focus {
	background: #135e96;
}

.tpm-preview-launch-button[disabled] {
	opacity: 0.7;
	cursor: default;
}

.tpm-preview-launch-button.is-loading::after {
	content: "";
	display: inline-block;
	width: 14px;
	height: 14px;
	border: 2px solid rgba( 255, 255, 255, 0.4 );
	border-top-color: #fff;
	border-radius: 50%;
	animation: tpm-preview-launch-spin 0.7s linear infinite;
}

@keyframes tpm-preview-launch-spin {
	to {
		transform: rotate( 360deg );
	}
}

.tpm-preview-launch-message {
	display: block;
	margin: 8px 0 0;
	font-size: 13px;
}

.tpm-preview-launch-message--error {
	color: #d63638;
}