/**
 * MM AI Post Generator Block Styles
 *
 * @package MM_AI_Post_Generator
 */

.mapg-blog-generator-block {
	padding: 20px;
	border: 1px solid #ddd;
	border-radius: 4px;
	background: #fff;
	margin: 20px 0;

	.mapg-block-header {
		margin-bottom: 20px;

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

		.mapg-block-description {
			color: #666;
			margin: 0;
		}
	}

	.mapg-generating {
		text-align: center;
		padding: 40px 20px;

		.components-spinner {
			margin: 0 auto 15px;
		}

		p {
			color: #666;
		}
	}

	.mapg-generated-content {
		margin-top: 20px;

		.mapg-preview-controls {
			margin-bottom: 20px;
		}

		.mapg-content-details {
			.mapg-title-section,
			.mapg-meta-section,
			.mapg-faq-section {
				margin-bottom: 25px;
				padding: 15px;
				background: #f9f9f9;
				border-radius: 4px;

				h4 {
					margin: 0 0 10px 0;
					font-size: 14px;
					text-transform: uppercase;
					color: #666;
				}

				p {
					margin: 0 0 5px 0;
				}

				small {
					color: #999;
					font-size: 12px;
				}
			}

			.mapg-title {
				font-size: 20px;
				font-weight: bold;
				color: #333;
			}

			.mapg-meta {
				color: #555;
				line-height: 1.6;
			}

			.mapg-faq-list {
				list-style: none;
				padding: 0;
				margin: 0;

				li {
					margin-bottom: 15px;
					padding-bottom: 15px;
					border-bottom: 1px solid #eee;

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

					strong {
						display: block;
						margin-bottom: 8px;
						color: #333;
					}

					p {
						margin: 0;
						color: #666;
						line-height: 1.6;
					}
				}
			}
		}

		.mapg-content-preview {
			padding: 20px;
			background: #f9f9f9;
			border-radius: 4px;
			max-height: 500px;
			overflow-y: auto;

			h1, h2, h3, h4, h5, h6 {
				margin-top: 20px;
				margin-bottom: 10px;
			}

			p {
				margin-bottom: 15px;
				line-height: 1.6;
			}

			ul, ol {
				margin-bottom: 15px;
				padding-left: 30px;
			}
		}

		.mapg-actions {
			margin-top: 20px;
			display: flex;
			gap: 10px;

			button {
				flex: 1;
			}
		}
	}

	.mapg-empty-state {
		text-align: center;
		padding: 40px 20px;
		color: #999;

		p {
			margin: 0;
		}
	}
}