/*
 * RTM Motion — Demo Copy toolbar.
 *
 * Loaded only on pages that render a section with "Allow Copy from Demo" on.
 *
 * The toolbar lives INSIDE the section, so it scrolls with it (including under
 * the page-smooth takeover, which translates the content wrapper) — but that also
 * puts it in reach of rules aimed at a section's children: Elementor's flex/grid
 * child sizing, and RTM Motion's own layout effects, which force a panel width
 * onto every direct child. Hence the !important on the box properties below;
 * each one is there to undo a specific rule of that kind, not for show.
 */

.rtm-copy-host {
	position: relative;
}

/* Doubled class on purpose. RTM's horizontal layout rule
   `[data-rtm-layout-effect="horizontal"] > *:not(.e-con-inner)` is (0,2,0) and
   !important, so a single-class selector would TIE with it and win or lose on
   stylesheet order alone — and this file prints in the footer when it is
   enqueued from render, but in the head when the cache fallback enqueues it. */
.rtm-copy-bar.rtm-copy-bar,
[data-rtm-layout-effect] > .rtm-copy-bar.rtm-copy-bar,
[data-rtm-layout-effect] > .e-con-inner > .rtm-copy-bar.rtm-copy-bar {
	position: absolute !important;
	top: 16px;
	right: 16px;
	z-index: 60;
	display: flex !important;
	flex-direction: column;
	flex: none !important;
	width: auto !important;
	min-width: 0 !important;
	max-width: none !important;
	height: auto !important;
	margin: 0 !important;
	padding: 4px;
	gap: 0;
	/* Layout effects write transforms onto children; the toolbar must not ride them. */
	transform: none !important;
	background: #2b2d31;
	border-radius: 10px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
	opacity: 0.94;
	transition: opacity 0.2s ease;
}

/* ---------- Toolbar Position (top is the base block above) ----------
   Keyed off the SECTION's own data-rtm-copy-pos, never a script-set class, so it
   holds in element-cached HTML too. Doubled attribute + doubled class is (0,4,0):
   above the base block and its layout-effect variants (0,3,0) whatever order the
   stylesheets load in. */

[data-rtm-copy][data-rtm-copy-pos="center"] > .rtm-copy-bar.rtm-copy-bar {
	top: 50%;
	bottom: auto;
	/* The base block pins transform:none !important so a layout effect's inline
	   transforms can't drag the bar. Centring needs its own transform — still
	   !important, for the same reason. */
	transform: translateY(-50%) !important;
}

[data-rtm-copy][data-rtm-copy-pos="bottom"] > .rtm-copy-bar.rtm-copy-bar {
	top: auto;
	bottom: 16px;
}

.rtm-copy-bar:hover,
.rtm-copy-bar:focus-within {
	opacity: 1;
}

/* Themes style bare <button>s hard (backgrounds, padding, uppercase, borders);
   the doubled class outranks the common `button` / `.elementor button` rules. */
.rtm-copy-bar .rtm-copy-bar__btn {
	-webkit-appearance: none;
	appearance: none;
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 7px;
	background: transparent;
	color: #e5e7eb;
	box-shadow: none;
	font-size: 0;
	line-height: 0;
	text-transform: none;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

/* The hairline between the two buttons in the reference design. */
.rtm-copy-bar .rtm-copy-bar__btn + .rtm-copy-bar__btn::before {
	content: "";
	position: absolute;
	top: 0;
	left: 7px;
	right: 7px;
	height: 1px;
	background: rgba(255, 255, 255, 0.14);
}

.rtm-copy-bar .rtm-copy-bar__btn:hover {
	background: rgba(255, 255, 255, 0.1);
	color: #ffffff;
}

.rtm-copy-bar .rtm-copy-bar__btn:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 1px;
}

.rtm-copy-bar .rtm-copy-bar__btn[aria-busy="true"] {
	cursor: progress;
	opacity: 0.6;
}

.rtm-copy-bar .rtm-copy-bar__btn.is-done {
	color: #4ade80;
}

.rtm-copy-bar__icon {
	display: inline-flex;
	pointer-events: none;
}

.rtm-copy-bar__icon svg {
	display: block;
	width: 18px;
	height: 18px;
}

/* ---------- toast ---------- */

.rtm-copy-toast {
	position: fixed;
	left: 50%;
	bottom: 24px;
	z-index: 100000;
	max-width: min(92vw, 520px);
	padding: 12px 16px;
	border-radius: 10px;
	background: #1f2125;
	color: #f9fafb;
	font: 500 14px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	text-align: left;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
	opacity: 0;
	transform: translate(-50%, 8px);
	transition: opacity 0.2s ease, transform 0.2s ease;
	pointer-events: none;
}

.rtm-copy-toast--on {
	opacity: 1;
	transform: translate(-50%, 0);
}

.rtm-copy-toast--error {
	background: #7f1d1d;
}

@media (prefers-reduced-motion: reduce) {
	.rtm-copy-bar,
	.rtm-copy-bar .rtm-copy-bar__btn,
	.rtm-copy-toast {
		transition: none;
	}
}

@media print {
	.rtm-copy-bar,
	.rtm-copy-toast {
		display: none !important;
	}
}