/**
 * Button Flyout — shared styles (frontend + editor base).
 * bbk/button-flyout
 */

.bbk-flyout {
	position: relative;
}

.bbk-flyout--align-left   { text-align: left; }
.bbk-flyout--align-center { text-align: center; }
.bbk-flyout--align-right  { text-align: right; }

.bbk-flyout-trigger-wrap { display: inline-block; }

/* Full-width mode: the wrapper stretches so the button fills its container
 * (e.g. a Kadence column on mobile). The button itself gets width:100% inline. */
.bbk-flyout--w-full .bbk-flyout-trigger-wrap { display: block; }
.bbk-flyout--w-full { text-align: stretch; }

.bbk-flyout-trigger {
	font-family: inherit;
}

.bbk-flyout-caret {
	font-size: 0.8em;
	line-height: 1;
	transition: transform 0.18s ease;
}

.bbk-flyout-trigger[aria-expanded="true"] .bbk-flyout-caret {
	transform: rotate(180deg);
}

/*
 * Panel is HIDDEN by default. It only becomes visible when opened — either
 * the native popover is open or (fallback) view.js adds the .bbk-open class.
 * This must stay display:none so the panel never peeks out before opening.
 */
.bbk-flyout-panel {
	display: none;
	box-shadow: 0 8px 24px rgba(0,0,0,0.18);
	text-align: left;
}

.bbk-flyout-panel.bbk-open {
	display: flex;
	flex-direction: column;
}

/*
 * When opened as a popover the browser puts it in the top layer — above ALL
 * theme stacking contexts (Kadence rows, sticky headers, transforms). view.js
 * sets fixed coordinates under the trigger.
 */
.bbk-flyout-panel[popover] {
	position: fixed;
	inset: auto;
	margin: 0;
	border: 0;
	max-height: min(70vh, 520px);
	overflow-y: auto;
}

/* Make inner core/buttons fill the panel width nicely when stacked. */
.bbk-flyout-panel .wp-block-buttons { width: 100%; }
.bbk-flyout-panel .wp-block-button { width: 100%; }
.bbk-flyout-panel .wp-block-button .wp-block-button__link {
	width: 100%;
	text-align: center;
}