/**
 * FAQ Block - Editor Styles
 */

.faq-block-editor {
	padding: 2rem;
	border: 2px dashed #ccc;
	border-radius: 8px;
	background: #f9f9f9;

	.faq-block-preview {
		text-align: center;

		h3 {
			margin: 0 0 0.5rem;
			font-size: 1.25rem;
			font-weight: 600;
		}

		> p {
			margin: 0 0 1.5rem;
			color: #666;
		}

		.faq-sections-preview {
			margin-top: 1.5rem;
			text-align: left;
			background: white;
			padding: 1rem;
			border-radius: 4px;

			strong {
				display: block;
				margin-bottom: 0.5rem;
			}

			ol {
				margin: 0;
				padding-left: 1.5rem;

				li {
					margin: 0.25rem 0;
					padding: 0.25rem 0;
				}
			}
		}
	}
}

// Inspector Controls
.faq-section-list {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin-top: 0.5rem;
}

.faq-section-item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0.75rem;
	background: white;
	border: 1px solid #ddd;
	border-radius: 4px;
	transition: background 150ms ease;

	&:hover {
		background: #f9f9f9;
	}
}

.faq-section-controls {
	display: flex;
	gap: 0.25rem;
	flex-shrink: 0;
}

.faq-section-button {
	min-width: 30px !important;
	padding: 4px !important;
	height: 30px !important;

	&:disabled {
		opacity: 0.3;
		cursor: not-allowed;
	}
}

.faq-section-name {
	flex: 1;
	font-weight: 500;
	padding-left: 0.5rem;
}

// Notice adjustments
.components-panel__body .components-notice {
	margin: 1rem 0;
}