/**
 * PersonalizeWP Product Collection Block - Editor Styles
 *
 * @package PersonalizeWP
 */

$pwp-primary: #874FB9;

@keyframes pwp-spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

.wp-block-personalizewp-pro-product-collection {
	margin: 1.5rem 0;
	text-align: center;

	// PersonalizeWP-specific title styling
	.pwp-collection-title {
		margin-bottom: 1.5rem;
		text-align: center;

		.pwp-collection-title__heading {
			margin: 0 0 1rem 0;
			font-size: 1.8rem;
			font-weight: 600;
			color: #1e1e1e;
			text-align: center;
			border: none;
			background: transparent;
			box-shadow: none;
			outline: none;
			padding: 0;

			&:focus {
				outline: 1px dotted #ccc;
				outline-offset: 2px;
			}
		}
			}

	// Loading spinner
	.pwp-loading-spinner {
		display: inline-block;
		width: 16px;
		height: 16px;
		border: 2px solid #ddd;
		border-top: 2px solid $pwp-primary;
		border-radius: 50%;
		animation: pwp-spin 1s linear infinite;
		margin-right: 8px;
		vertical-align: middle;
	}

	// Editor-specific preview wrapper
	.pwp-editor-preview {
		position: relative;

		// Disable interactions in editor
		a, button {
			pointer-events: none;
			cursor: default;
					}
	}

	// Placeholder states
	.pwp-placeholder {
		padding: 2rem;
		background: #f5f5f5;
		border: 2px dashed #ccc;
		border-radius: 4px;
		color: #666;
		text-align: center;

		&.pwp-placeholder--empty {
			background: #fef8e7;
			border-color: #f0b849;
			color: #9a6700;
					}
				}

	// Loading state
	&.is-loading {
		position: relative;

		&::after {
			content: '';
			position: absolute;
			top: 50%;
			left: 50%;
			width: 20px;
			height: 20px;
			margin: -10px 0 0 -10px;
			border: 2px solid #ccc;
			border-top-color: $pwp-primary;
			border-radius: 50%;
			animation: pwp-spin 1s linear infinite;
			z-index: 10;
		}

		.wc-block-product-template {
			opacity: 0.5;
		}
	}

	// Editor notices
	.components-notice {
		margin: 1rem 0;
	}

		// PersonalizeWP layout helpers - match frontend styles exactly
	&.pwp-layout-centered {
		.wc-block-product-template {
			margin: 0 auto;
			justify-content: center;
		}
	}

	&.pwp-layout-list {
		text-align: center;

		.wc-block-product-template {
			grid-template-columns: 1fr;
			gap: 2rem;
			max-width: 400px;
			margin: 0 auto;
			text-align: center;

			.wc-block-product.pwp-list-item {
				display: block;
				text-align: center;
				padding: 1.5rem;
				border: 1px solid #e0e0e0;
				border-radius: 8px;
				background: #fff;
				box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

				.wc-block-components-product-image {
					width: 100%;
					margin-bottom: 1rem;
					text-align: center;

					img {
						width: 100%;
						height: auto;
						max-height: 300px;
						object-fit: cover;
					}
				}

				.wp-block-post-title {
					margin-bottom: 0.75rem;
					font-size: 1.2rem;
					line-height: 1.4;
					text-align: center;
				}

				.wc-block-components-product-rating {
					margin: 0.5rem 0;
					text-align: center;
					display: flex;
					justify-content: center;
				}

				.wp-block-woocommerce-product-price {
					margin: 0.75rem 0;
					text-align: center;

					.wc-block-components-product-price {
						font-size: 1.2rem;
						font-weight: 600;
					}
				}

				.wp-block-button.wc-block-components-product-button {
					margin-top: 1rem;
					text-align: center;

					.wp-block-button__link {
						width: 100%;
						font-size: 1rem;
						padding: 0.8rem 1.5rem;
					}
				}

				// Disable interactions in editor
				a, button {
					pointer-events: none;
					cursor: default;
				}
			}
		}
	}

	// Grid layout styling to match frontend
	&.pwp-layout-grid {
		.wc-block-product-template {
			.wc-block-product {
				display: block;
				text-align: center;
				background: transparent;
				border: none;
				padding: 0;

				.wc-block-components-product-image {
					margin-bottom: 12px;
				}

				// Disable interactions in editor
				a, button {
					pointer-events: none;
					cursor: default;
				}
			}
		}
	}
}