/**
 * Frontend and editor styles for 3D Scan & Show Plugin
 * Matching the plugin's green theme
 */

:root {
	--stw-primary: #10b981;
	--stw-primary-dark: #059669;
	--stw-dark: #1f2937;
	--stw-gray: #6b7280;
	--stw-light-gray: #f3f4f6;
	--stw-border: #e5e7eb;
	--stw-radius: 8px;
	--stw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1),
		0 1px 2px -1px rgba(0, 0, 0, 0.1);
}

.wp-block-create-block-stw-wordpress {
	position: relative;
	overflow: hidden;
	border-radius: var(--stw-radius);
	box-shadow: var(--stw-shadow);
	transition: all 0.3s ease;

	&:hover {
		box-shadow:
			0 10px 15px -3px rgba(0, 0, 0, 0.1),
			0 4px 6px -4px rgba(0, 0, 0, 0.1);
	}

	iframe {
		display: block;
		width: 100%;
		height: 100%;
		border: none;
		border-radius: var(--stw-radius);
	}
}

/* Loading state */
.wp-block-create-block-stw-wordpress.is-loading {
	background: var(--stw-light-gray);
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 400px;

	&::after {
		content: "Loading 3D Model...";
		color: var(--stw-gray);
		font-size: 14px;
		font-weight: 500;
	}
}