/* Trigger — the positioned anchor the panel below is placed against
   (position: relative), and stays exactly where the widget was placed.

   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 {
	position: relative;
	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 — a plain, unstyled container nested inside the trigger
   (see Content_Panel::render()); its only job is carrying the id, the
   animation/position modifier classes, and the shared custom properties
   the dialog below reads back out. */
.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__dialog {
	/* --pavo-cp-c{x,y}: the *resting* translate a centered Position variant
	   needs just to be centered (e.g. -50%) — constant between open and
	   closed, set by the Position rules below, 0 for the edge-aligned
	   variants that don't need one.
	   --pavo-cp-t{x,y}: the *extra* closed-state offset an Animation
	   variant slides in from — set by the Animation rules further below,
	   added on top of the resting translate only while closed, dropped
	   entirely on open. Composed this way (instead of each writing a
	   plain `transform:`) so a centering Position and a sliding Animation
	   never fight over the single `transform` property. */
	--pavo-cp-cx: 0%;
	--pavo-cp-cy: 0%;
	--pavo-cp-tx: 0px;
	--pavo-cp-ty: 0px;
	position: absolute;
	z-index: var(--pavo-cp-z-index);
	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;
	transform: translate(calc(var(--pavo-cp-cx) + var(--pavo-cp-tx)), calc(var(--pavo-cp-cy) + var(--pavo-cp-ty)));
	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: translate(var(--pavo-cp-cx), var(--pavo-cp-cy));
}

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

/* Position — anchored to the trigger (the nearest `position: relative`
   ancestor, see .pavo-content-panel-trigger above), like a dropdown menu.
   Logical properties (inset-inline-start/-end) resolve to the correct
   physical side on their own for RTL, no JS/runtime direction check
   needed. "Center" is the one option that isn't trigger-relative at all —
   it fixes to the viewport instead, so it's the only variant using
   `position: fixed`.

   --pavo-cp-offset-x/-y (Horizontal/Vertical Offset in the editor) both
   read as a plain inset from whichever edge the chosen Position aligns
   to: -y is the gap from the trigger's top/bottom edge on every variant
   except Center; -x is the gap from the trigger's start/end edge on the
   *-start/*-end variants (including the horizontal Center-Start/
   Center-End flyouts) — the three *-center variants intentionally ignore
   -x, since they're already centered on the trigger's own horizontal
   midpoint and an inset from an edge doesn't apply there.

   Unlike a true popup, there's no runtime viewport-overflow check here —
   pick a Position/Offset (and a narrower Width, and/or a Center variant
   on small breakpoints) that actually fits instead. */
.pavo-content-panel--pos-top-start .pavo-content-panel__dialog {
	bottom: calc(100% + var(--pavo-cp-offset-y));
	inset-inline-start: var(--pavo-cp-offset-x);
}

.pavo-content-panel--pos-top-center .pavo-content-panel__dialog {
	bottom: calc(100% + var(--pavo-cp-offset-y));
	inset-inline-start: 50%;
	--pavo-cp-cx: -50%;
}

.pavo-content-panel--pos-top-end .pavo-content-panel__dialog {
	bottom: calc(100% + var(--pavo-cp-offset-y));
	inset-inline-end: var(--pavo-cp-offset-x);
}

.pavo-content-panel--pos-center-start .pavo-content-panel__dialog {
	top: 50%;
	inset-inline-end: calc(100% + var(--pavo-cp-offset-x));
	--pavo-cp-cy: -50%;
}

.pavo-content-panel--pos-center .pavo-content-panel__dialog {
	position: fixed;
	top: 50%;
	left: 50%;
	--pavo-cp-cx: -50%;
	--pavo-cp-cy: -50%;
}

.pavo-content-panel--pos-center-end .pavo-content-panel__dialog {
	top: 50%;
	inset-inline-start: calc(100% + var(--pavo-cp-offset-x));
	--pavo-cp-cy: -50%;
}

.pavo-content-panel--pos-bottom-start .pavo-content-panel__dialog {
	top: calc(100% + var(--pavo-cp-offset-y));
	inset-inline-start: var(--pavo-cp-offset-x);
}

.pavo-content-panel--pos-bottom-center .pavo-content-panel__dialog {
	top: calc(100% + var(--pavo-cp-offset-y));
	inset-inline-start: 50%;
	--pavo-cp-cx: -50%;
}

.pavo-content-panel--pos-bottom-end .pavo-content-panel__dialog {
	top: calc(100% + var(--pavo-cp-offset-y));
	inset-inline-end: var(--pavo-cp-offset-x);
}

/* Animation variants — only the *closed*-state offset (--pavo-cp-tx/-ty,
   see .pavo-content-panel__dialog above) differs per variant; opening
   always drops it to 0, sliding in from that direction to whatever
   resting spot the Position variant put the dialog at (a plain `none` on
   open wouldn't work here — a centered Position needs its own
   --pavo-cp-cx/-cy to stay in effect even while open, see above). Fade
   and None both simply never set an offset 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 {
	--pavo-cp-ty: 24px;
}

.pavo-content-panel--anim-slide-down .pavo-content-panel__dialog {
	--pavo-cp-ty: -24px;
}

.pavo-content-panel--anim-slide-left .pavo-content-panel__dialog {
	--pavo-cp-tx: 24px;
}

.pavo-content-panel--anim-slide-right .pavo-content-panel__dialog {
	--pavo-cp-tx: -24px;
}

.pavo-content-panel--anim-none .pavo-content-panel__dialog {
	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;
	/* Without this, a positioned element inside the selected template can
	   still cover this button, even though it comes first in the DOM —
	   confirmed live with an Elementor flex Container, which sets its own
	   `z-index: 1` by default. A tie on z-index resolves by DOM order, so
	   `z-index: 1` here wasn't enough once the template's own content
	   happened to use that exact value too. This only has to clear
	   whatever the template's own content plausibly sets on itself for
	   unrelated reasons (stacking within its own flex/grid layout, a
	   hover effect, ...) — not compete with --pavo-cp-z-index, which
	   places the whole dialog relative to the rest of the *page*, a
	   separate concern already handled by .pavo-content-panel__dialog. */
	z-index: 999;
	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;
}