/**
 * Headwall WP Tutorials Click-to-Copy : WPTCTC
 *
 * https://wp-tutorials.tech/refine-wordpress/reusable-javascript-click-to-copy/
 *
 * --- BEAUTIFIED VERSION (TEXT ONLY) ---
 */

.click-to-copy {
	cursor: pointer;
	position: relative;
}

/**
 * Keyframe animation for the new tooltip.
 * It will fade in and slide up smoothly.
 */
@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translate(-50%, 10px);
	}
	to {
		opacity: 1;
		transform: translate(-50%, 0);
	}
}

/**
 * Beautiful, animated tool-tip style.
 */
.click-to-copy .ctc-tip {
	cursor: default;
	pointer-events: none;
	position: absolute;

	background-color: #28a745; /* A pleasant success green */
	color: #fff;
	font-size: 14px; /* Slightly larger for clarity */
	font-weight: bold;
	border-radius: 50px; /* Pill shape */
	width: auto;

	left: 50%;
	bottom: 115%; /* Position it above the element */
	transform: translateX(-50%);

	padding: 8px 16px;
	line-height: 1em;
	text-align: center;
	box-shadow: 0 4px 12px rgba(0,0,0,0.15);
	white-space: nowrap;
	z-index: 100;

	/* Trigger the animation */
	animation: fadeInUp 0.3s ease-out forwards;
}

/*
 * The ::before rule that added the icon has been removed.
 */


/**
 * The container for our "fancy" click-to-copy box.
 */
.fancy-click-to-copy {
	background-color: white;
	border-radius: 10px;
	overflow: hidden;
	border: 1px solid lightgrey;
	text-align: center;
	padding: 0 1em 0 3.5em; /* Increased padding for the icon area */
	line-height: 2.5em;
	white-space: nowrap;
	transition: border-color 0.3s ease, box-shadow 0.3s ease; /* Added smooth transition */
}

.fancy-click-to-copy:hover {
	border-color: #3b0081;
}

/**
 * Fancy box icon styling.
 */
.fancy-click-to-copy::before {
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	content: '\f0c5'; /* Default: fa-copy */
	display: flex; /* Use flex for perfect centering */
	align-items: center;
	justify-content: center;
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 3.5em; /* Give the icon a fixed width */
	transition: 0.3s all ease;
	border-right: 1px dotted darkgrey;
	background-color: #f5f5f5;
	color: #666;
	z-index: 1;
}

.fancy-click-to-copy:hover::before {
	color: #3b0081;
	background-color: #eee;
}

/**
 * --- Style for after copying ---
 * This adds a green glow and changes the icon to a checkmark!
 */
.fancy-click-to-copy.copied-success {
	border-color: #28a745;
	box-shadow: 0 0 8px rgba(40, 167, 69, 0.5);
}

.fancy-click-to-copy.copied-success::before {
	content: '\f00c'; /* fa-check */
	background-color: #28a745;
	color: white;
	border-right-color: #28a745;
}

/**
 * Useful when adding fancy-click-to-copy to a "code" block.
 */
.wp-block-code.fancy-click-to-copy code {
	display: unset;
	font-family: 'monospace';
	overflow-wrap: unset;
	white-space: unset;
}