/* Trigger — stays exactly where the widget was placed; only the panel
   itself (below) gets portaled to <body>, see content-panel.js.

   These trigger rules are mirrored at :where() (zero) specificity by the
   one-time critical <style> Content_Panel::render() prints, so the button
   never flashes UA/theme chrome on a first load where this file isn't
   render-blocking. Keep the two in sync; the values here carry real
   specificity so they still beat a theme's bare `button` reset. */
.pavo-content-panel-trigger {
	display: inline-flex;
}

.pavo-content-panel-trigger__button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0.6em 1em;
	background: none;
	border: 0;
	cursor: pointer;
	color: inherit;
	font: inherit;
	line-height: 1;
	transition: color 0.2s ease, background-color 0.2s ease;
}

/* Fixed 1em square box (= the icon's own font-size) with the glyph
   centered, so the default and close icons — often from two different
   icon fonts with different glyph advance widths (e.g. Font Awesome
   `fa-equals` vs a theme icon font's `close`) — occupy exactly the same
   space and the button never changes width when they swap on open/close. */
.pavo-content-panel-trigger__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 1em;
	height: 1em;
	font-size: 1.1em;
	line-height: 1;
}

/* Trigger Close Icon (optional): both icons render in the DOM at the same
   spot — swapped purely via the trigger's own `aria-expanded` attribute
   (already kept correct by content-panel.js for accessibility regardless
   of whether this feature is used), no extra JS state needed. The whole
   swap is gated on `--has-close-icon`, a class Content_Panel.php only adds
   when a Trigger Close Icon is actually set: without that gate, hiding
   `--default` on the open state would leave the button icon-less whenever
   no close icon was chosen. The plain single-icon case never matches any
   rule here.

   Qualified with the parent .pavo-content-panel-trigger__button (not a
   bare .pavo-content-panel-trigger__icon--close) on purpose — confirmed
   live that a theme's own icon-font stylesheet can carry a same-
   specificity attribute selector for its own icon classes (e.g.
   `[class*="some-icon-"] { display: inline-block; ... }`, a common
   generic icon-font reset) that loads after this file and would
   otherwise win the tie and keep the close icon visible even when
   closed. Two classes here outweighs that regardless of load order. */
.pavo-content-panel-trigger__button--has-close-icon .pavo-content-panel-trigger__icon--close {
	display: none;
}

.pavo-content-panel-trigger__button--has-close-icon[aria-expanded="true"] .pavo-content-panel-trigger__icon--default {
	display: none;
}

.pavo-content-panel-trigger__button--has-close-icon[aria-expanded="true"] .pavo-content-panel-trigger__icon--close {
	display: inline-flex;
}

/* Panel root — deliberately NOT position:fixed itself (see the dialog and
   overlay below, which each get their own): a plain, unstyled container
   is all it needs to be once portaled to <body>, one level below <body>
   itself, so there's no ancestor of *this* that could ever reintroduce a
   stacking-context/overflow problem the way the original widget location
   could have. */
.pavo-content-panel {
	--pavo-cp-offset-x: 24px;
	--pavo-cp-offset-y: 24px;
	--pavo-cp-duration: 300ms;
	--pavo-cp-z-index: 9999;
}

.pavo-content-panel__overlay {
	position: fixed;
	inset: 0;
	/* z-index lives here and on the dialog below, each reading the same
	   --pavo-cp-z-index custom property back out — not a plain `z-index`
	   on .pavo-content-panel itself, which is deliberately position:static
	   (see above) and would silently do nothing there. */
	z-index: var(--pavo-cp-z-index);
	background: rgba(17, 17, 17, 0.5);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--pavo-cp-duration) ease, visibility var(--pavo-cp-duration);
}

.pavo-content-panel.is-open .pavo-content-panel__overlay {
	opacity: 1;
	visibility: visible;
}

.pavo-content-panel__dialog {
	position: fixed;
	/* +1 over the overlay so the dialog always sits above it regardless of
	   the configured Z-Index value. */
	z-index: calc(var(--pavo-cp-z-index) + 1);
	display: flex;
	flex-direction: column;
	width: 450px;
	max-width: calc(100vw - 30px);
	max-height: calc(100vh - 30px);
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--pavo-cp-duration) ease, visibility var(--pavo-cp-duration), transform var(--pavo-cp-duration) ease;
}

.pavo-content-panel.is-open .pavo-content-panel__dialog {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.pavo-content-panel__content {
	overflow: auto;
}

/* Position: unlike a plain floating panel, this one anchors to the
   trigger's own on-page location (popover-style — "Bottom Right" opens
   below the trigger, right-aligned to it, etc.), which can only be known
   at runtime, not authored as static CSS. content-panel.js measures
   trigger.getBoundingClientRect() and sets top/left directly as inline
   styles on .pavo-content-panel__dialog right before opening it — see
   positionDialog() there, including the viewport-edge clamp that keeps
   the dialog on-screen even when the trigger itself sits near an edge.
   --pavo-cp-offset-x/-y (declared above) are read back out by that same
   function as the gap between the dialog and the trigger, so Elementor's
   own responsive breakpoints on those two controls still apply — the
   values just get consumed by JS instead of a CSS var() lookup. */

/* Animation variants — only the *closed*-state initial transform differs
   per variant; the open state (.is-open, above) universally resolves to
   `transform: none` regardless of which of these matched, since "open"
   always means "at its final, untransformed position" no matter which
   direction it entered from. Fade and None both simply never set an
   initial transform at all (no movement, opacity/visibility only) — None
   additionally disables the transition itself for an instant toggle. */
.pavo-content-panel--anim-slide-up .pavo-content-panel__dialog {
	transform: translateY(24px);
}

.pavo-content-panel--anim-slide-down .pavo-content-panel__dialog {
	transform: translateY(-24px);
}

.pavo-content-panel--anim-slide-left .pavo-content-panel__dialog {
	transform: translateX(24px);
}

.pavo-content-panel--anim-slide-right .pavo-content-panel__dialog {
	transform: translateX(-24px);
}

.pavo-content-panel--anim-none .pavo-content-panel__dialog,
.pavo-content-panel--anim-none .pavo-content-panel__overlay {
	transition: none;
}

/* Close button. */
.pavo-content-panel__close {
	position: absolute;
	top: 12px;
	/* Matches the "End" default of the Close Button → Position control
	   (Content_Panel.php) — logical so it stays correctly on the
	   trailing edge before Elementor's own higher-specificity
	   #pavo-content-panel-{{ID}} selector even applies. */
	inset-inline-end: 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	margin: 0;
	background: none;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	color: #1a1a1a;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.pavo-content-panel__close-icon {
	display: inline-flex;
	font-size: 1em;
	line-height: 1;
}

.pavo-content-panel__close-icon--default {
	position: relative;
	width: 0.7em;
	height: 0.7em;
}

.pavo-content-panel__close-icon--default::before,
.pavo-content-panel__close-icon--default::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 2px;
	background: currentColor;
}

.pavo-content-panel__close-icon--default::before {
	transform: rotate(45deg);
}

.pavo-content-panel__close-icon--default::after {
	transform: rotate(-45deg);
}

.pavo-content-panel__placeholder {
	padding: 24px;
	color: #6b7280;
	font-size: 0.9em;
	text-align: center;
}

/* Body scroll lock — a class toggle only, never a direct `body.style.*`
   write, so removing the class fully restores the page's original state
   with nothing left to manually undo (see content-panel.js). Its own
   class, not shared with Off-Canvas's/Menu's equivalents — this widget
   stays fully independent of either. */
html.pavo-content-panel-scroll-lock {
	overflow: hidden;
}
