/**
 * WP Button URL Tooltip Styles
 */

/* Tooltip container */
.wbut-tooltip {
	position: absolute;
	z-index: 2147483647;
	padding: 12px 16px;
	background: #1e1e1e;
	color: #fff;
	font-size: 13px;
	line-height: 1.4;
	border-radius: 8px;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3);
	max-width: 400px;
	min-width: 140px;
	word-wrap: break-word;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition:
		opacity 0.25s ease,
		transform 0.25s ease,
		visibility 0.25s;
	pointer-events: none;
	border: 1px solid rgba(255, 255, 255, 0.1);
}

.wbut-tooltip.wbut-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* Loading state */
.wbut-tooltip-loading {
	display: flex;
	align-items: center;
	gap: 10px;
}

/* Spinner animation */
.wbut-spinner {
	width: 16px;
	height: 16px;
	border: 2px solid rgba(255, 255, 255, 0.3);
	border-top-color: #fff;
	border-radius: 50%;
	animation: wbut-spin 0.8s linear infinite;
	flex-shrink: 0;
}

@keyframes wbut-spin {
	to {
		transform: rotate(360deg);
	}
}

/* Dots loading animation alternative */
.wbut-dots {
	display: inline-flex;
	gap: 4px;
}

.wbut-dots span {
	width: 6px;
	height: 6px;
	background: #fff;
	border-radius: 50%;
	animation: wbut-bounce 1.4s ease-in-out infinite both;
}

.wbut-dots span:nth-child(1) {
	animation-delay: -0.32s;
}

.wbut-dots span:nth-child(2) {
	animation-delay: -0.16s;
}

@keyframes wbut-bounce {
	0%,
	80%,
	100% {
		transform: scale(0);
		opacity: 0.5;
	}
	40% {
		transform: scale(1);
		opacity: 1;
	}
}

/* Title content */
.wbut-tooltip-title {
	font-weight: 500;
	display: flex;
	align-items: center;
	word-break: break-all;
}

/* Filesize display */
.wbut-tooltip-filesize {
	font-size: 12px;
	color: rgba(255, 255, 255, 0.7);
	margin-top: 4px;
	display: block;
}

/* URL display */
.wbut-tooltip-url {
	font-size: 11px;
	color: rgba(255, 255, 255, 0.6);
	margin-top: 4px;
	display: block;
	word-break: break-all;
}

/* Error state */
.wbut-tooltip-error {
	color: #ff6b6b;
}

/* Success icon */
.wbut-tooltip-success .wbut-tooltip-title::before {
	content: "";
	display: inline-block;
	width: 14px;
	height: 14px;
	margin-right: 8px;
	flex-shrink: 0;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2344cf6c' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/%3E%3Cpolyline points='22 4 12 14.01 9 11.01'/%3E%3C/svg%3E")
		no-repeat center;
	background-size: contain;
}

/* Light mode support */
@media (prefers-color-scheme: light) {
	.wbut-tooltip.wbut-light-mode {
		background: #fff;
		color: #1e1e1e;
		box-shadow: 0 6px 24px rgba(0, 0, 0, 0.2);
		border: 1px solid rgba(0, 0, 0, 0.1);
	}

	.wbut-tooltip.wbut-light-mode .wbut-spinner {
		border-color: rgba(0, 0, 0, 0.2);
		border-top-color: #1e1e1e;
	}

	.wbut-tooltip.wbut-light-mode .wbut-dots span {
		background: #1e1e1e;
	}

	.wbut-tooltip.wbut-light-mode .wbut-tooltip-url {
		color: rgba(0, 0, 0, 0.5);
	}
}

/* Ensure buttons have relative positioning for tooltip placement */
.wp-block-button__link,
.wp-element-button,
a.button,
a.btn,
.elementor-button,
.button,
input[type="submit"],
button[type="submit"] {
	position: relative;
}