/**
 * Vazir Bricks Extras — Suggested Box: shared skeleton (loaded once,
 * regardless of which design is used). Design-specific rules live in
 * their own stylesheet and only override colors/layout via CSS
 * custom properties (--vbe-sb-*) set inline per instance.
 *
 * @package VazirBricksExtras
 */

.vbe-suggested-box,
.vbe-suggested-box *,
.vbe-suggested-box *::before,
.vbe-suggested-box *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

.vbe-suggested-box {
	display: block;
	width: 100%;
	max-width: 100%;
	text-decoration: none !important;
	color: inherit;
	position: relative;
	isolation: isolate;
}

/* Some themes/builders shrink flex/grid children to content width; force
   full width so the box never collapses to zero when a parent centers it. */
.vbe-suggested-box,
p > .vbe-suggested-box,
div > .vbe-suggested-box {
	width: 100%;
}

.vbe-suggested-box:focus-visible {
	outline: 2px solid var( --vbe-sb-accent, #2271b1 );
	outline-offset: 2px;
}

.vbe-suggested-box img {
	display: block;
	max-width: 100%;
	height: auto;
}

/* wpautop guard: pipelines that run autop AFTER shortcode expansion
   (builder text elements, widgets) may still inject a stray <br>; it
   must never become a phantom flex child. */
.vbe-suggested-box br {
	display: none;
}

/* Diagnostic strip — only ever rendered for logged-in editors (see
   Shortcode::editor_notice()), never shown to public visitors. */
.vbe-suggested-box__notice {
	box-sizing: border-box;
	width: 100%;
	margin-bottom: 8px;
	padding: 8px 12px;
	border: 1px dashed #d63638;
	border-radius: 6px;
	background: #fcf0f1;
	color: #8a2424;
	font-size: 12px;
	line-height: 1.6;
}

@media ( prefers-reduced-motion: reduce ) {
	.vbe-suggested-box,
	.vbe-suggested-box * {
		transition: none !important;
		animation: none !important;
	}
}