/* Icon Popup Menu — front-end styles
   All visual values come from CSS custom properties injected per-instance
   in an inline <style> block (see class-ipm-render.php). The `:host` reset
   that guarantees two-way CSS isolation lives in class-ipm-render.php
   (isolation_reset()) and is inlined before this file inside every
   shadow root, so it always loads first. */

.ipm-widget {
	position: relative;
	display: inline-block;
	max-width: 100%;
	vertical-align: middle;
}

.ipm-trigger {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--ipm-t-gap);
	width: var(--ipm-t-width, auto);
	height: var(--ipm-t-height);
	padding: var(--ipm-t-padding);
	border-width: var(--ipm-t-border-w);
	border-style: var(--ipm-t-border-s);
	border-color: var(--ipm-t-border-c);
	border-radius: var(--ipm-t-radius);
	background: var(--ipm-t-bg);
	color: var(--ipm-t-color);
	font-family: var(--ipm-t-font);
	font-size: var(--ipm-t-font-size);
	font-weight: var(--ipm-t-font-weight);
	font-style: var(--ipm-t-font-style);
	text-transform: var(--ipm-t-transform, none);
	line-height: var(--ipm-t-line-height, 1.3);
	box-shadow: var(--ipm-t-shadow);
	cursor: pointer;
	box-sizing: border-box;
	max-width: 100%;
	/* Auto by default: never clips the label, grows to fit icon + text. */
	flex: 0 0 auto;
	white-space: nowrap;
	margin: 0;
	appearance: none;
	-webkit-appearance: none;
	transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.ipm-trigger:hover,
.ipm-trigger:focus-visible {
	background: var(--ipm-t-hover-bg);
	color: var(--ipm-t-hover-color);
	border-color: var(--ipm-t-hover-border);
}
.ipm-trigger .ipm-icon {
	width: var(--ipm-t-icon-size);
	height: var(--ipm-t-icon-size);
	color: var(--ipm-t-icon-color);
	stroke-width: var(--ipm-t-stroke);
	flex-shrink: 0;
}

.ipm-content--icon-only,
.ipm-content--label-only,
.ipm-content--both {
	display: inline-flex;
	align-items: center;
	gap: inherit;
	max-width: 100%;
	min-width: 0;
}
.ipm-order-right { flex-direction: row-reverse; }
.ipm-order-top { flex-direction: column; text-align: center; }
/* The label is never force-collapsed by default (width defaults to "auto",
   so the trigger/CTA simply grows to fit icon + text). If the user picks a
   fixed width that's too small for the label, it ellipsizes gracefully
   instead of disappearing. */
.ipm-label {
	display: inline-block;
	flex-shrink: 1;
	min-width: 0;
	max-width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Popup / Popover shell */
.ipm-popup {
	position: absolute;
	z-index: 100000;
	visibility: hidden;
	pointer-events: none;
	transition: visibility 0s linear calc(var(--ipm-p-anim-duration, 0.25) * 1s);
}
.ipm-popup[data-open="true"] {
	visibility: visible;
	pointer-events: auto;
	transition-delay: 0s;
}
.ipm-popup--modal {
	position: fixed;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	box-sizing: border-box;
}
.ipm-overlay {
	position: absolute;
	inset: 0;
	background: var(--ipm-p-overlay);
	backdrop-filter: blur(var(--ipm-p-blur));
	-webkit-backdrop-filter: blur(var(--ipm-p-blur));
	opacity: 0;
	transition: opacity calc(var(--ipm-p-anim-duration, 0.25) * 1s) ease;
}
.ipm-popup[data-open="true"] .ipm-overlay {
	opacity: 1;
}

.ipm-popup-panel {
	position: relative;
	width: var(--ipm-p-width);
	max-width: var(--ipm-p-max-width);
	max-height: var(--ipm-p-max-height);
	background: var(--ipm-p-bg);
	border-width: var(--ipm-p-border-w);
	border-style: var(--ipm-p-border-s);
	border-color: var(--ipm-p-border-c);
	border-radius: var(--ipm-p-radius);
	box-shadow: var(--ipm-p-shadow);
	padding: var(--ipm-p-padding);
	box-sizing: border-box;
	overflow: auto;
	display: flex;
	flex-direction: column;
	will-change: opacity, transform, filter;
	transition:
		opacity calc(var(--ipm-p-anim-duration, 0.25) * 1s) var(--ipm-p-anim-easing, ease-out),
		transform calc(var(--ipm-p-anim-duration, 0.25) * 1s) var(--ipm-p-anim-easing, ease-out),
		filter calc(var(--ipm-p-anim-duration, 0.25) * 1s) var(--ipm-p-anim-easing, ease-out);
}

/* ===================================================================
   Popup open/close animations — pure CSS transitions (no JS engine).
   Each type just defines the *closed* (pre-open) transform/opacity/
   filter; the open state simply resets everything to 1/none, and since
   these are transitions (not one-shot keyframes) they reverse smoothly
   and instantly on close too. Selected via the `data-anim` attribute
   rendered on the .ipm-popup wrapper. 15 selectable effects + "none".
   =================================================================== */
.ipm-popup-panel { opacity: 0; }
.ipm-popup[data-open="true"] .ipm-popup-panel { opacity: 1; transform: none; filter: none; }

.ipm-popup[data-anim="fade"] .ipm-popup-panel { opacity: 0; }

.ipm-popup[data-anim="fade-scale"] .ipm-popup-panel { transform: scale(.92); }

.ipm-popup[data-anim="zoom-in"] .ipm-popup-panel { transform: scale(.7); }

.ipm-popup[data-anim="zoom-out"] .ipm-popup-panel { transform: scale(1.15); }

.ipm-popup[data-anim="slide-up"] .ipm-popup-panel { transform: translateY(24px); }

.ipm-popup[data-anim="slide-down"] .ipm-popup-panel { transform: translateY(-24px); }

.ipm-popup[data-anim="slide-left"] .ipm-popup-panel { transform: translateX(24px); }

.ipm-popup[data-anim="slide-right"] .ipm-popup-panel { transform: translateX(-24px); }

.ipm-popup[data-anim="flip-x"] .ipm-popup-panel { transform: perspective(600px) rotateX(60deg); }
.ipm-popup[data-anim="flip-x"][data-open="true"] .ipm-popup-panel { transform: perspective(600px) rotateX(0deg); }

.ipm-popup[data-anim="flip-y"] .ipm-popup-panel { transform: perspective(600px) rotateY(60deg); }
.ipm-popup[data-anim="flip-y"][data-open="true"] .ipm-popup-panel { transform: perspective(600px) rotateY(0deg); }

.ipm-popup[data-anim="rotate"] .ipm-popup-panel { transform: rotate(-8deg) scale(.9); }

.ipm-popup[data-anim="skew"] .ipm-popup-panel { transform: skewY(-6deg) scale(.96); }

.ipm-popup[data-anim="blur"] .ipm-popup-panel { filter: blur(8px); }

.ipm-popup[data-anim="drop"] .ipm-popup-panel { transform: translateY(-40px) scale(.98); }

.ipm-popup[data-anim="bounce"] .ipm-popup-panel {
	transform: scale(.85);
	transition-timing-function: cubic-bezier(.34, 1.56, .64, 1);
}

.ipm-popup[data-anim="none"] .ipm-popup-panel { transition: none; opacity: 1; transform: none; }

.ipm-popup-inner {
	width: 100%;
	max-width: var(--ipm-p-inner-max-width, 100%);
	margin: 0;
	display: flex;
	flex-direction: column;
}
.ipm-popup--full .ipm-popup-inner { --ipm-p-inner-max-width: var(--ipm-p-width); }
.ipm-popup--full .ipm-align-center { margin-left: auto; margin-right: auto; }
.ipm-popup--full .ipm-align-right { margin-left: auto; margin-right: 0; }
.ipm-popup--full .ipm-align-left { margin-left: 0; margin-right: auto; }

/* Full-width "mega-menu" style popover, e.g. a bar that slides down the full
   width of the viewport below the trigger (auto height, matches common
   mega-menu patterns like navigation flyouts). */
.ipm-popup--full {
	position: fixed;
	left: 0;
	right: 0;
	width: 100%;
}
.ipm-popup--full .ipm-popup-panel {
	width: 100%;
	max-width: 100%;
	border-left: none;
	border-right: none;
	box-sizing: border-box;
}

.ipm-close {
	position: absolute;
	top: 6px;
	right: 8px;
	background: none;
	border: none;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	color: inherit;
	opacity: .6;
	padding: 4px;
	transition: opacity .15s ease, transform .15s ease;
}
.ipm-close:hover { opacity: 1; transform: scale(1.1); }

.ipm-items {
	list-style: none;
	margin: 0;
	padding: var(--ipm-ic-padding);
	display: flex;
	flex-direction: column;
	gap: var(--ipm-ic-gap);
	background: var(--ipm-ic-bg);
	border-radius: var(--ipm-ic-radius);
	max-height: var(--ipm-ic-max-height);
	overflow-y: auto;
	box-sizing: border-box;
}
.ipm-item-wrap { list-style: none; }

/* Item entrance stagger — driven entirely by CSS using the per-item
   `--ipm-i` index custom property (set inline by the renderer) and the
   configurable `--ipm-ic-stagger-delay` (seconds, unitless number). Only
   active when the container is flagged `data-stagger="1"`. */
.ipm-items[data-stagger="1"] .ipm-item-wrap {
	opacity: 0;
	transform: translateY(10px);
	transition: opacity .3s ease, transform .3s ease;
	transition-delay: calc(var(--ipm-i, 0) * var(--ipm-ic-stagger-delay, 0.05) * 1s);
}
.ipm-popup[data-open="true"] .ipm-items[data-stagger="1"] .ipm-item-wrap {
	opacity: 1;
	transform: translateY(0);
}

.ipm-item {
	display: flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	color: var(--ipm-item-color);
	background: var(--ipm-item-bg, transparent);
	padding: var(--ipm-item-padding);
	border-radius: var(--ipm-item-radius);
	border-width: var(--ipm-item-border-w, 0px);
	border-style: var(--ipm-item-border-s, solid);
	border-color: var(--ipm-item-border-c, transparent);
	font-family: var(--ipm-item-font);
	font-size: var(--ipm-item-font-size);
	font-weight: var(--ipm-item-font-weight);
	text-transform: var(--ipm-item-transform, none);
	line-height: var(--ipm-item-line-height, 1.4);
	box-sizing: border-box;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.ipm-item:hover,
.ipm-item:focus-visible {
	background: var(--ipm-item-hover-bg);
	color: var(--ipm-item-hover-color);
	border-color: var(--ipm-item-hover-border, var(--ipm-item-border-c));
}
.ipm-item .ipm-icon {
	width: var(--ipm-item-icon-size);
	height: var(--ipm-item-icon-size);
	color: var(--ipm-item-icon-color);
	flex-shrink: 0;
	transition: color .15s ease;
}
.ipm-item:hover .ipm-icon,
.ipm-item:focus-visible .ipm-icon {
	color: var(--ipm-item-icon-hover-color, var(--ipm-item-icon-color));
}

.ipm-cta-wrap { margin-top: var(--ipm-c-margin-top); flex-shrink: 0; }
.ipm-cta {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: var(--ipm-c-width);
	height: var(--ipm-c-height);
	padding: var(--ipm-c-padding);
	border-width: var(--ipm-c-border-w);
	border-style: var(--ipm-c-border-s);
	border-color: var(--ipm-c-border-c);
	border-radius: var(--ipm-c-radius);
	background: var(--ipm-c-bg);
	color: var(--ipm-c-color);
	font-family: var(--ipm-c-font);
	font-size: var(--ipm-c-font-size);
	font-weight: var(--ipm-c-font-weight);
	text-transform: var(--ipm-c-transform, none);
	line-height: var(--ipm-c-line-height, 1.3);
	text-decoration: none;
	box-sizing: border-box;
	transition: background .15s ease, color .15s ease, transform .15s ease;
}
.ipm-cta:hover,
.ipm-cta:focus-visible {
	background: var(--ipm-c-hover-bg);
	color: var(--ipm-c-hover-color);
}
.ipm-cta .ipm-icon { width: var(--ipm-c-icon-size); height: var(--ipm-c-icon-size); flex-shrink: 0; }

.ipm-icon-svg { display: inline-block; vertical-align: middle; }

/* ===================================================================
   Hover "attention" animations for the Trigger button and CTA button.
   Pure CSS :hover-triggered keyframe animations — no JS listeners
   needed at all. Selected via the `data-hover-anim` attribute. 15
   selectable effects + "none". Duration/easing stay fully
   customizable through their existing CSS custom properties.
   =================================================================== */
.ipm-trigger[data-hover-anim="scale"]:hover     { animation: ipm-anim-scale     calc(var(--ipm-t-anim-duration, 0.2) * 1s) var(--ipm-t-anim-easing, ease-out); }
.ipm-trigger[data-hover-anim="pulse"]:hover     { animation: ipm-anim-pulse     calc(var(--ipm-t-anim-duration, 0.2) * 1s) var(--ipm-t-anim-easing, ease-out); }
.ipm-trigger[data-hover-anim="bounce"]:hover    { animation: ipm-anim-bounce    calc(var(--ipm-t-anim-duration, 0.2) * 1s) var(--ipm-t-anim-easing, ease-out); }
.ipm-trigger[data-hover-anim="shake"]:hover     { animation: ipm-anim-shake     calc(var(--ipm-t-anim-duration, 0.2) * 1s) var(--ipm-t-anim-easing, ease-out); }
.ipm-trigger[data-hover-anim="wobble"]:hover    { animation: ipm-anim-wobble    calc(var(--ipm-t-anim-duration, 0.2) * 1s) var(--ipm-t-anim-easing, ease-out); }
.ipm-trigger[data-hover-anim="tada"]:hover      { animation: ipm-anim-tada      calc(var(--ipm-t-anim-duration, 0.2) * 1s) var(--ipm-t-anim-easing, ease-out); }
.ipm-trigger[data-hover-anim="jelly"]:hover     { animation: ipm-anim-jelly     calc(var(--ipm-t-anim-duration, 0.2) * 1s) var(--ipm-t-anim-easing, ease-out); }
.ipm-trigger[data-hover-anim="swing"]:hover     { animation: ipm-anim-swing     calc(var(--ipm-t-anim-duration, 0.2) * 1s) var(--ipm-t-anim-easing, ease-out); transform-origin: top center; }
.ipm-trigger[data-hover-anim="rubber"]:hover    { animation: ipm-anim-rubber    calc(var(--ipm-t-anim-duration, 0.2) * 1s) var(--ipm-t-anim-easing, ease-out); }
.ipm-trigger[data-hover-anim="flash"]:hover     { animation: ipm-anim-flash     calc(var(--ipm-t-anim-duration, 0.2) * 1s) var(--ipm-t-anim-easing, ease-out); }
.ipm-trigger[data-hover-anim="heartbeat"]:hover { animation: ipm-anim-heartbeat calc(var(--ipm-t-anim-duration, 0.2) * 1s) var(--ipm-t-anim-easing, ease-out); }
.ipm-trigger[data-hover-anim="ring"]:hover      { animation: ipm-anim-ring      calc(var(--ipm-t-anim-duration, 0.2) * 1s) var(--ipm-t-anim-easing, ease-out); }
.ipm-trigger[data-hover-anim="glow"]:hover      { animation: ipm-anim-glow      calc(var(--ipm-t-anim-duration, 0.2) * 1s) var(--ipm-t-anim-easing, ease-out); }
.ipm-trigger[data-hover-anim="float"]:hover     { animation: ipm-anim-float     calc(var(--ipm-t-anim-duration, 0.2) * 1s) var(--ipm-t-anim-easing, ease-out); }
.ipm-trigger[data-hover-anim="none"]:hover      { animation: none; }

.ipm-cta[data-hover-anim="scale"]:hover     { animation: ipm-anim-scale     calc(var(--ipm-c-anim-duration, 0.15) * 1s) var(--ipm-c-anim-easing, ease-out); }
.ipm-cta[data-hover-anim="pulse"]:hover     { animation: ipm-anim-pulse     calc(var(--ipm-c-anim-duration, 0.15) * 1s) var(--ipm-c-anim-easing, ease-out); }
.ipm-cta[data-hover-anim="bounce"]:hover    { animation: ipm-anim-bounce    calc(var(--ipm-c-anim-duration, 0.15) * 1s) var(--ipm-c-anim-easing, ease-out); }
.ipm-cta[data-hover-anim="shake"]:hover     { animation: ipm-anim-shake     calc(var(--ipm-c-anim-duration, 0.15) * 1s) var(--ipm-c-anim-easing, ease-out); }
.ipm-cta[data-hover-anim="wobble"]:hover    { animation: ipm-anim-wobble    calc(var(--ipm-c-anim-duration, 0.15) * 1s) var(--ipm-c-anim-easing, ease-out); }
.ipm-cta[data-hover-anim="tada"]:hover      { animation: ipm-anim-tada      calc(var(--ipm-c-anim-duration, 0.15) * 1s) var(--ipm-c-anim-easing, ease-out); }
.ipm-cta[data-hover-anim="jelly"]:hover     { animation: ipm-anim-jelly     calc(var(--ipm-c-anim-duration, 0.15) * 1s) var(--ipm-c-anim-easing, ease-out); }
.ipm-cta[data-hover-anim="swing"]:hover     { animation: ipm-anim-swing     calc(var(--ipm-c-anim-duration, 0.15) * 1s) var(--ipm-c-anim-easing, ease-out); transform-origin: top center; }
.ipm-cta[data-hover-anim="rubber"]:hover    { animation: ipm-anim-rubber    calc(var(--ipm-c-anim-duration, 0.15) * 1s) var(--ipm-c-anim-easing, ease-out); }
.ipm-cta[data-hover-anim="flash"]:hover     { animation: ipm-anim-flash     calc(var(--ipm-c-anim-duration, 0.15) * 1s) var(--ipm-c-anim-easing, ease-out); }
.ipm-cta[data-hover-anim="heartbeat"]:hover { animation: ipm-anim-heartbeat calc(var(--ipm-c-anim-duration, 0.15) * 1s) var(--ipm-c-anim-easing, ease-out); }
.ipm-cta[data-hover-anim="ring"]:hover      { animation: ipm-anim-ring      calc(var(--ipm-c-anim-duration, 0.15) * 1s) var(--ipm-c-anim-easing, ease-out); }
.ipm-cta[data-hover-anim="glow"]:hover      { animation: ipm-anim-glow      calc(var(--ipm-c-anim-duration, 0.15) * 1s) var(--ipm-c-anim-easing, ease-out); }
.ipm-cta[data-hover-anim="float"]:hover     { animation: ipm-anim-float     calc(var(--ipm-c-anim-duration, 0.15) * 1s) var(--ipm-c-anim-easing, ease-out); }
.ipm-cta[data-hover-anim="none"]:hover      { animation: none; }

.ipm-item[data-hover-anim="scale"]:hover     { animation: ipm-anim-scale     calc(var(--ipm-item-anim-duration, 0.15) * 1s) var(--ipm-item-anim-easing, ease-out); }
.ipm-item[data-hover-anim="pulse"]:hover     { animation: ipm-anim-pulse     calc(var(--ipm-item-anim-duration, 0.15) * 1s) var(--ipm-item-anim-easing, ease-out); }
.ipm-item[data-hover-anim="bounce"]:hover    { animation: ipm-anim-bounce    calc(var(--ipm-item-anim-duration, 0.15) * 1s) var(--ipm-item-anim-easing, ease-out); }
.ipm-item[data-hover-anim="shake"]:hover     { animation: ipm-anim-shake     calc(var(--ipm-item-anim-duration, 0.15) * 1s) var(--ipm-item-anim-easing, ease-out); }
.ipm-item[data-hover-anim="wobble"]:hover    { animation: ipm-anim-wobble    calc(var(--ipm-item-anim-duration, 0.15) * 1s) var(--ipm-item-anim-easing, ease-out); }
.ipm-item[data-hover-anim="tada"]:hover      { animation: ipm-anim-tada      calc(var(--ipm-item-anim-duration, 0.15) * 1s) var(--ipm-item-anim-easing, ease-out); }
.ipm-item[data-hover-anim="jelly"]:hover     { animation: ipm-anim-jelly     calc(var(--ipm-item-anim-duration, 0.15) * 1s) var(--ipm-item-anim-easing, ease-out); }
.ipm-item[data-hover-anim="swing"]:hover     { animation: ipm-anim-swing     calc(var(--ipm-item-anim-duration, 0.15) * 1s) var(--ipm-item-anim-easing, ease-out); transform-origin: top center; }
.ipm-item[data-hover-anim="rubber"]:hover    { animation: ipm-anim-rubber    calc(var(--ipm-item-anim-duration, 0.15) * 1s) var(--ipm-item-anim-easing, ease-out); }
.ipm-item[data-hover-anim="flash"]:hover     { animation: ipm-anim-flash     calc(var(--ipm-item-anim-duration, 0.15) * 1s) var(--ipm-item-anim-easing, ease-out); }
.ipm-item[data-hover-anim="heartbeat"]:hover { animation: ipm-anim-heartbeat calc(var(--ipm-item-anim-duration, 0.15) * 1s) var(--ipm-item-anim-easing, ease-out); }
.ipm-item[data-hover-anim="ring"]:hover      { animation: ipm-anim-ring      calc(var(--ipm-item-anim-duration, 0.15) * 1s) var(--ipm-item-anim-easing, ease-out); }
.ipm-item[data-hover-anim="glow"]:hover      { animation: ipm-anim-glow      calc(var(--ipm-item-anim-duration, 0.15) * 1s) var(--ipm-item-anim-easing, ease-out); }
.ipm-item[data-hover-anim="float"]:hover     { animation: ipm-anim-float     calc(var(--ipm-item-anim-duration, 0.15) * 1s) var(--ipm-item-anim-easing, ease-out); }
.ipm-item[data-hover-anim="none"]:hover      { animation: none; }

@keyframes ipm-anim-scale     { from { transform: scale(1); } to { transform: scale(1.06); } }
@keyframes ipm-anim-pulse     { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes ipm-anim-bounce    { 0%, 100% { transform: translateY(0); } 30% { transform: translateY(-7px); } 50% { transform: translateY(0); } 70% { transform: translateY(-3px); } }
@keyframes ipm-anim-shake     { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-4px); } 40% { transform: translateX(4px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }
@keyframes ipm-anim-wobble    { 0%, 100% { transform: translateX(0) rotate(0); } 25% { transform: translateX(-5px) rotate(-4deg); } 75% { transform: translateX(5px) rotate(4deg); } }
@keyframes ipm-anim-tada      { 0%, 100% { transform: scale(1) rotate(0); } 10%, 20% { transform: scale(.94) rotate(-3deg); } 30%, 50%, 70%, 90% { transform: scale(1.08) rotate(3deg); } 40%, 60%, 80% { transform: scale(1.08) rotate(-3deg); } }
@keyframes ipm-anim-jelly     { 0%, 100% { transform: scale(1, 1); } 30% { transform: scale(1.15, .85); } 50% { transform: scale(.9, 1.1); } 70% { transform: scale(1.05, .95); } }
@keyframes ipm-anim-swing     { 20% { transform: rotate(12deg); } 40% { transform: rotate(-9deg); } 60% { transform: rotate(6deg); } 80% { transform: rotate(-3deg); } 100% { transform: rotate(0); } }
@keyframes ipm-anim-rubber    { 0%, 100% { transform: scale(1, 1); } 30% { transform: scale(1.2, .8); } 50% { transform: scale(.85, 1.15); } 70% { transform: scale(1.1, .92); } }
@keyframes ipm-anim-flash     { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: .35; } }
@keyframes ipm-anim-heartbeat { 0%, 100% { transform: scale(1); } 25% { transform: scale(1.12); } 40% { transform: scale(1); } 60% { transform: scale(1.1); } }
@keyframes ipm-anim-ring      { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(14deg); } 30% { transform: rotate(-12deg); } 45% { transform: rotate(9deg); } 60% { transform: rotate(-6deg); } 75% { transform: rotate(3deg); } }
@keyframes ipm-anim-glow      { 0%, 100% { box-shadow: 0 0 0 rgba(0,0,0,0); } 50% { box-shadow: 0 0 14px 2px currentColor; } }
@keyframes ipm-anim-float     { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

/* Responsive: collapse popovers into a centered sheet on small screens so
   anchored positioning math never pushes the panel off-screen. */
@media (max-width: 600px) {
	.ipm-popup--popover.ipm-force-center {
		position: fixed !important;
		inset: 0;
		display: flex;
		align-items: flex-end;
		justify-content: center;
		padding: 0;
	}
	.ipm-popup--popover.ipm-force-center .ipm-popup-panel {
		width: 100%;
		max-width: 100%;
		border-radius: var(--ipm-p-radius) var(--ipm-p-radius) 0 0;
	}
}

/* Respect users who've asked the OS/browser to reduce motion. */
@media (prefers-reduced-motion: reduce) {
	.ipm-popup-panel,
	.ipm-overlay,
	.ipm-trigger,
	.ipm-cta,
	.ipm-item-wrap {
		transition-duration: .001s !important;
		animation-duration: .001s !important;
	}
}