/* =============================================================================
   GUVI Flowchart Block — frontend + editor
   ============================================================================= */

.wp-block-guvi-flowchart {
	display: flex;
	width: 100%;
	margin: 1.5rem 0;
}

.wp-block-guvi-flowchart .guvi-flowchart__inner {
	width: 100%;
}

/* Scalable, responsive SVG. */
.wp-block-guvi-flowchart .guvi-flowchart-svg {
	display: block;
	width: 100%;
	max-width: 100%;
}

@media (max-width: 767px) {
	.wp-block-guvi-flowchart .guvi-flowchart-svg {
		height: auto;
	}
}

/* Clickable shapes shouldn't get the theme's link underline/colour. */
.wp-block-guvi-flowchart a,
.wp-block-guvi-flowchart a:hover {
	text-decoration: none !important;
}


/* Editor placeholder / empty state. */
.guvi-flowchart--empty,
.guvi-flowchart--placeholder {
	border: 1px dashed #c5c9cf;
	border-radius: 8px;
	padding: 28px 20px;
	text-align: center;
	color: #6b7280;
	font-size: 14px;
	background: #fafafb;
	width: 100%;
	box-sizing: border-box;
}

/* Editor preview frame. */
.guvi-flowchart-editor__preview {
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	padding: 12px;
	background: #fff;
	overflow: hidden;
}

.guvi-flowchart-editor__preview svg {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
}

/* ── CTA Button node (inline SVG on frontend) ────────────────────────────── */
.wp-block-guvi-flowchart .guvi-fc-btn-node {
	filter: drop-shadow(0px 1px 3px rgba(46, 129, 88, 0.3));
	transition: filter 0.2s ease;
}

.wp-block-guvi-flowchart .guvi-fc-btn-node:hover {
	filter: drop-shadow(0px 2px 8px rgba(46, 129, 88, 0.45)) brightness(1.06);
	cursor: pointer;
}