/* Adverties Package Plan — Floating Button widget. */

.adpp-fab,
.adpp-fab-placeholder {
	/* System Colors — Elementor Site Settings global colors win when present. */
	--adpp-sys-primary: var(--e-global-color-primary, #6B5568);
	--adpp-sys-secondary: var(--e-global-color-secondary, #8FA184);
	--adpp-sys-text: var(--e-global-color-text, #7A7A7A);
	--adpp-sys-accent: var(--e-global-color-accent, #8FA184);
}

.adpp-fab {
	--adpp-fab-x: 24px;
	--adpp-fab-y: 24px;
	--adpp-fab-size: 60px;
	--adpp-fab-icon-size: 22px;
	--adpp-fab-gap: 10px;
	--adpp-fab-transition: 300ms;
	--adpp-fab-effect: color-mix(in srgb, var(--adpp-sys-primary) 45%, transparent);
	--adpp-fab-effect-duration: 2s;
	--adpp-fab-icon-rotate: 0deg;
	--adpp-fab-tooltip-bg: var(--adpp-sys-primary);
	--adpp-fab-tooltip-color: #fff;
	--adpp-fab-tooltip-gap: 12px;
	--adpp-fab-badge-bg: var(--adpp-sys-accent);
	--adpp-fab-badge-color: #fff;
	--adpp-fab-badge-size: 22px;

	position: fixed;
	z-index: 999;
	display: block;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.35s ease, visibility 0.35s ease;
}

.adpp-fab.is-visible,
.adpp-fab.is-edit-mode {
	opacity: 1;
	visibility: visible;
}

.adpp-fab.is-visible .adpp-fab__inner,
.adpp-fab.is-edit-mode .adpp-fab__inner {
	pointer-events: auto;
}

/* Screen positions. */
.adpp-fab--bottom-right { right: var(--adpp-fab-x); bottom: var(--adpp-fab-y); }
.adpp-fab--bottom-left { left: var(--adpp-fab-x); bottom: var(--adpp-fab-y); }
.adpp-fab--bottom-center { left: 50%; bottom: var(--adpp-fab-y); transform: translateX(-50%); }
.adpp-fab--top-right { right: var(--adpp-fab-x); top: var(--adpp-fab-y); }
.adpp-fab--top-left { left: var(--adpp-fab-x); top: var(--adpp-fab-y); }
.adpp-fab--top-center { left: 50%; top: var(--adpp-fab-y); transform: translateX(-50%); }
.adpp-fab--middle-right { right: var(--adpp-fab-x); top: 50%; transform: translateY(-50%); }
.adpp-fab--middle-left { left: var(--adpp-fab-x); top: 50%; transform: translateY(-50%); }

/* Full width: stretch between the horizontal offsets, whatever the position. */
.adpp-fab.adpp-fab--width-full {
	left: var(--adpp-fab-x);
	right: var(--adpp-fab-x);
}

.adpp-fab.adpp-fab--width-full.adpp-fab--bottom-center,
.adpp-fab.adpp-fab--width-full.adpp-fab--top-center {
	transform: none;
}

.adpp-fab--width-full .adpp-fab__inner,
.adpp-fab--width-full .adpp-fab__spin {
	display: flex;
	width: 100%;
}

.adpp-fab.adpp-fab--width-full .adpp-fab__spin .adpp-fab__button {
	width: 100%;
}

body.admin-bar .adpp-fab--top-right,
body.admin-bar .adpp-fab--top-left,
body.admin-bar .adpp-fab--top-center {
	top: calc(var(--adpp-fab-y) + 32px);
}

@media (max-width: 782px) {
	body.admin-bar .adpp-fab--top-right,
	body.admin-bar .adpp-fab--top-left,
	body.admin-bar .adpp-fab--top-center {
		top: calc(var(--adpp-fab-y) + 46px);
	}
}

/* Entrance animations. */
.adpp-fab__inner {
	position: relative;
	display: inline-flex;
	pointer-events: none;
	transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1.2);
}

.adpp-fab--enter-zoom:not(.is-visible):not(.is-edit-mode) .adpp-fab__inner {
	transform: scale(0.3);
}

.adpp-fab--enter-slide:not(.is-visible):not(.is-edit-mode) .adpp-fab__inner {
	transform: translateY(40px);
}

.adpp-fab--enter-slide.adpp-fab--top-right:not(.is-visible):not(.is-edit-mode) .adpp-fab__inner,
.adpp-fab--enter-slide.adpp-fab--top-left:not(.is-visible):not(.is-edit-mode) .adpp-fab__inner,
.adpp-fab--enter-slide.adpp-fab--top-center:not(.is-visible):not(.is-edit-mode) .adpp-fab__inner {
	transform: translateY(-40px);
}

.adpp-fab--enter-slide.adpp-fab--middle-right:not(.is-visible):not(.is-edit-mode) .adpp-fab__inner {
	transform: translateX(40px);
}

.adpp-fab--enter-slide.adpp-fab--middle-left:not(.is-visible):not(.is-edit-mode) .adpp-fab__inner {
	transform: translateX(-40px);
}

.adpp-fab--enter-none,
.adpp-fab--enter-none .adpp-fab__inner {
	transition: none;
}

/* Button. Selectors are doubled so theme button styles do not override them. */
.adpp-fab .adpp-fab__button {
	position: relative;
	isolation: isolate;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--adpp-fab-gap);
	min-height: var(--adpp-fab-size);
	margin: 0;
	padding: 0 26px;
	border: 0;
	border-radius: 999px;
	background-color: var(--adpp-sys-primary);
	color: #fff;
	box-shadow: 0 12px 28px color-mix(in srgb, var(--adpp-sys-primary) 35%, transparent);
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: normal;
	text-decoration: none;
	text-transform: none;
	white-space: nowrap;
	cursor: pointer;
	transition-property: color, background-color, background-image, border-color, box-shadow, transform;
	transition-duration: var(--adpp-fab-transition);
	transition-timing-function: ease;
}

.adpp-fab .adpp-fab__button:hover,
.adpp-fab .adpp-fab__button:focus-visible {
	background-color: var(--adpp-sys-secondary);
	color: #fff;
	text-decoration: none;
	box-shadow: 0 16px 34px color-mix(in srgb, var(--adpp-sys-secondary) 40%, transparent);
}

.adpp-fab .adpp-fab__button:focus-visible {
	outline: 3px solid var(--adpp-fab-effect);
	outline-offset: 3px;
}

.adpp-fab .adpp-fab__button--icon {
	width: var(--adpp-fab-size);
	height: var(--adpp-fab-size);
	padding: 0;
}

.adpp-fab .adpp-fab__button--icon-after {
	flex-direction: row-reverse;
}

.adpp-fab__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--adpp-fab-icon-color, currentColor);
	font-size: var(--adpp-fab-icon-size);
	line-height: 1;
	transform: rotate(var(--adpp-fab-icon-base, 0deg));
	transition: color var(--adpp-fab-transition) ease, transform var(--adpp-fab-icon-transition, var(--adpp-fab-transition)) ease-in-out;
}

.adpp-fab__icon i,
.adpp-fab__icon svg {
	width: 1em;
	height: 1em;
	font-size: inherit;
	line-height: 1;
}

.adpp-fab__icon svg {
	fill: currentColor;
}

.adpp-fab__button:hover .adpp-fab__icon,
.adpp-fab__button:focus-visible .adpp-fab__icon {
	color: var(--adpp-fab-icon-hover-color, var(--adpp-fab-icon-color, currentColor));
	transform: rotate(calc(var(--adpp-fab-icon-base, 0deg) + var(--adpp-fab-icon-rotate, 0deg) + var(--adpp-fab-icon-turn, 0deg)));
}

/* Badge. */
.adpp-fab__badge {
	position: absolute;
	top: -4px;
	right: -4px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--adpp-fab-badge-size);
	height: var(--adpp-fab-badge-size);
	padding: 0 6px;
	border: 2px solid #fff;
	border-radius: 999px;
	background: var(--adpp-fab-badge-bg);
	color: var(--adpp-fab-badge-color);
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
}

.adpp-fab__badge.is-pulsing {
	animation: adpp-fab-badge 1.6s ease-in-out infinite;
}

/* Vertical side tab. Uses a vertical writing mode, not a transform, so the layout box is vertical too and
   the button sits exactly at the screen edge. `rotate` is used for flipping because it combines with transforms. */
.adpp-fab.adpp-fab--sideways {
	--adpp-fab-spin-base: 0deg !important;
}

.adpp-fab.adpp-fab--vertical-up .adpp-fab__button,
.adpp-fab.adpp-fab--vertical-down .adpp-fab__button {
	min-width: var(--adpp-fab-size);
	min-height: 0;
	padding: 26px 0;
	writing-mode: vertical-rl;
}

.adpp-fab.adpp-fab--vertical-up .adpp-fab__button {
	rotate: 180deg;
}

.adpp-fab--vertical-up .adpp-fab__icon,
.adpp-fab--vertical-down .adpp-fab__icon,
.adpp-fab--vertical-up .adpp-fab__badge,
.adpp-fab--vertical-down .adpp-fab__badge {
	writing-mode: horizontal-tb;
}

.adpp-fab--vertical-up .adpp-fab__icon {
	rotate: 180deg;
}

.adpp-fab--vertical-up .adpp-fab__badge {
	top: auto;
	right: auto;
	bottom: -4px;
	left: -4px;
	rotate: 180deg;
}

/* Tooltip. */
.adpp-fab__tooltip {
	position: absolute;
	z-index: 3;
	padding: 7px 12px;
	border-radius: 6px;
	background: var(--adpp-fab-tooltip-bg);
	color: var(--adpp-fab-tooltip-color);
	box-shadow: 0 6px 18px rgba(17, 24, 39, 0.18);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.3;
	white-space: nowrap;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
}

.adpp-fab__tooltip::after {
	content: "";
	position: absolute;
	border: 6px solid transparent;
}

.adpp-fab--tooltip-left .adpp-fab__tooltip {
	top: 50%;
	right: calc(100% + var(--adpp-fab-tooltip-gap));
	transform: translate(6px, -50%);
}

.adpp-fab--tooltip-left .adpp-fab__tooltip::after {
	top: 50%;
	left: 100%;
	border-left-color: var(--adpp-fab-tooltip-bg);
	transform: translateY(-50%);
}

.adpp-fab--tooltip-right .adpp-fab__tooltip {
	top: 50%;
	left: calc(100% + var(--adpp-fab-tooltip-gap));
	transform: translate(-6px, -50%);
}

.adpp-fab--tooltip-right .adpp-fab__tooltip::after {
	top: 50%;
	right: 100%;
	border-right-color: var(--adpp-fab-tooltip-bg);
	transform: translateY(-50%);
}

.adpp-fab--tooltip-top .adpp-fab__tooltip {
	bottom: calc(100% + var(--adpp-fab-tooltip-gap));
	left: 50%;
	transform: translate(-50%, 6px);
}

.adpp-fab--tooltip-top .adpp-fab__tooltip::after {
	top: 100%;
	left: 50%;
	border-top-color: var(--adpp-fab-tooltip-bg);
	transform: translateX(-50%);
}

.adpp-fab--tooltip-bottom .adpp-fab__tooltip {
	top: calc(100% + var(--adpp-fab-tooltip-gap));
	left: 50%;
	transform: translate(-50%, -6px);
}

.adpp-fab--tooltip-bottom .adpp-fab__tooltip::after {
	bottom: 100%;
	left: 50%;
	border-bottom-color: var(--adpp-fab-tooltip-bg);
	transform: translateX(-50%);
}

.adpp-fab__inner:hover .adpp-fab__tooltip,
.adpp-fab__inner:focus-within .adpp-fab__tooltip,
.adpp-fab--tooltip-always .adpp-fab__tooltip {
	opacity: 1;
	visibility: visible;
}

.adpp-fab--tooltip-left .adpp-fab__inner:hover .adpp-fab__tooltip,
.adpp-fab--tooltip-left .adpp-fab__inner:focus-within .adpp-fab__tooltip,
.adpp-fab--tooltip-left.adpp-fab--tooltip-always .adpp-fab__tooltip,
.adpp-fab--tooltip-right .adpp-fab__inner:hover .adpp-fab__tooltip,
.adpp-fab--tooltip-right .adpp-fab__inner:focus-within .adpp-fab__tooltip,
.adpp-fab--tooltip-right.adpp-fab--tooltip-always .adpp-fab__tooltip {
	transform: translate(0, -50%);
}

.adpp-fab--tooltip-top .adpp-fab__inner:hover .adpp-fab__tooltip,
.adpp-fab--tooltip-top .adpp-fab__inner:focus-within .adpp-fab__tooltip,
.adpp-fab--tooltip-top.adpp-fab--tooltip-always .adpp-fab__tooltip,
.adpp-fab--tooltip-bottom .adpp-fab__inner:hover .adpp-fab__tooltip,
.adpp-fab--tooltip-bottom .adpp-fab__inner:focus-within .adpp-fab__tooltip,
.adpp-fab--tooltip-bottom.adpp-fab--tooltip-always .adpp-fab__tooltip {
	transform: translate(-50%, 0);
}

/* Attention effects. */
.adpp-fab--effect-pulse .adpp-fab__button::before,
.adpp-fab--effect-ring .adpp-fab__button::before {
	content: "";
	position: absolute;
	z-index: -1;
	border-radius: inherit;
	pointer-events: none;
}

.adpp-fab--effect-pulse .adpp-fab__button::before {
	inset: 0;
	background: var(--adpp-fab-effect);
	animation: adpp-fab-pulse var(--adpp-fab-effect-duration) ease-out infinite;
}

.adpp-fab--effect-ring .adpp-fab__button::before {
	inset: -6px;
	border: 2px solid var(--adpp-fab-effect);
	animation: adpp-fab-ring var(--adpp-fab-effect-duration) ease-out infinite;
}

.adpp-fab--effect-bounce .adpp-fab__button {
	animation: adpp-fab-bounce var(--adpp-fab-effect-duration) ease infinite;
}

.adpp-fab--effect-shake .adpp-fab__button {
	animation: adpp-fab-shake var(--adpp-fab-effect-duration) ease infinite;
}

.adpp-fab--effect-heartbeat .adpp-fab__button {
	animation: adpp-fab-heartbeat var(--adpp-fab-effect-duration) ease-in-out infinite;
}

/* Hover animations need the transform, so motion effects stop on hover. */
.adpp-fab--effect-bounce .adpp-fab__button:hover,
.adpp-fab--effect-shake .adpp-fab__button:hover,
.adpp-fab--effect-heartbeat .adpp-fab__button:hover {
	animation: none;
}

.adpp-fab--pause-hover .adpp-fab__button:hover::before {
	animation: none;
	opacity: 0;
}

/* Rotation. Runs on its own wrapper so it combines with effects and hover animations. */
.adpp-fab__spin {
	position: relative;
	display: inline-flex;
	transform: rotate(var(--adpp-fab-spin-base, 0deg));
	transition: transform var(--adpp-fab-spin-hover-duration, 0.8s) ease-in-out;
}

.adpp-fab--spin-ccw {
	--adpp-fab-spin-dir: -1;
}

.adpp-fab--spin-fixed.adpp-fab--spin-button {
	--adpp-fab-spin-base: var(--adpp-fab-rotate, 0deg);
}

.adpp-fab--spin-fixed.adpp-fab--spin-icon {
	--adpp-fab-icon-base: var(--adpp-fab-rotate, 0deg);
}

.adpp-fab--spin-hover.adpp-fab--spin-button .adpp-fab__inner:hover .adpp-fab__spin {
	transform: rotate(calc(var(--adpp-fab-spin-hover-angle, 360deg) * var(--adpp-fab-spin-dir, 1)));
}

.adpp-fab--spin-hover.adpp-fab--spin-icon {
	--adpp-fab-icon-turn: calc(var(--adpp-fab-spin-hover-angle, 360deg) * var(--adpp-fab-spin-dir, 1));
	--adpp-fab-icon-transition: var(--adpp-fab-spin-hover-duration, 0.8s);
}

.adpp-fab--spin-continuous.adpp-fab--spin-button .adpp-fab__spin,
.adpp-fab--spin-continuous.adpp-fab--spin-icon .adpp-fab__icon {
	animation: adpp-fab-spin var(--adpp-fab-spin-duration, 4s) linear infinite;
}

.adpp-fab--spin-continuous.adpp-fab--spin-pause .adpp-fab__inner:hover .adpp-fab__spin,
.adpp-fab--spin-continuous.adpp-fab--spin-pause .adpp-fab__inner:hover .adpp-fab__icon {
	animation-play-state: paused;
}

@keyframes adpp-fab-spin {
	from { transform: rotate(0deg); }
	to { transform: rotate(calc(360deg * var(--adpp-fab-spin-dir, 1))); }
}

/* "Button Animations: Off" — nothing moves; a fixed rotation angle still applies. */
.adpp-fab--no-motion,
.adpp-fab--no-motion *,
.adpp-fab--no-motion *::before,
.adpp-fab--no-motion *::after {
	animation: none !important;
}

.adpp-fab--no-motion .adpp-fab__inner,
.adpp-fab--no-motion .adpp-fab__spin {
	transition: none !important;
}

.adpp-fab--no-motion .adpp-fab__button:hover .adpp-fab__icon {
	transform: rotate(var(--adpp-fab-icon-base, 0deg));
}

@keyframes adpp-fab-pulse {
	0% { opacity: 0.8; transform: scale(1); }
	100% { opacity: 0; transform: scale(1.6); }
}

@keyframes adpp-fab-ring {
	0% { opacity: 1; transform: scale(0.9); }
	100% { opacity: 0; transform: scale(1.3); }
}

@keyframes adpp-fab-bounce {
	0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
	40% { transform: translateY(-12px); }
	60% { transform: translateY(-6px); }
}

@keyframes adpp-fab-shake {
	0%, 50%, 100% { transform: rotate(0); }
	55%, 65%, 75% { transform: rotate(-10deg); }
	60%, 70%, 80% { transform: rotate(10deg); }
	85% { transform: rotate(0); }
}

@keyframes adpp-fab-heartbeat {
	0%, 40%, 100% { transform: scale(1); }
	10%, 30% { transform: scale(1.1); }
	20% { transform: scale(0.98); }
}

@keyframes adpp-fab-badge {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.18); }
}

/* Editor-only marker so the widget can be selected. */
.adpp-fab-placeholder {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 14px;
	border: 1px dashed color-mix(in srgb, var(--adpp-sys-primary) 45%, #fff);
	border-radius: 8px;
	background: color-mix(in srgb, var(--adpp-sys-primary) 8%, #fff);
	color: var(--adpp-sys-primary);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: 12px;
	line-height: 1.4;
	text-transform: capitalize;
}

@media (prefers-reduced-motion: reduce) {
	.adpp-fab,
	.adpp-fab *,
	.adpp-fab *::before {
		animation: none !important;
		transition-duration: 0.01ms !important;
	}
}