/**
 * Typeform Polling Styles
 * 
 * @package Panel_Vivir_Frontend
 * @since 1.0.0
 */

/* Hide link when in waiting state */
a.doo-typeform-disabled {
	display: none !important;
}

/* Status container - replaces the link */
.doo-typeform-status {
	display: inline-block;
	margin: 0;
	padding: 0;
	line-height: 1;
}

/* Spinner with tooltip (waiting state) */
.doo-typeform-spinner-wrapper {
	display: inline-block;
	position: relative;
	cursor: help;
}

.doo-typeform-spinner-wrapper .doo-spinner {
	display: inline-block;
	width: 20px;
	height: 20px;
	border: 3px solid rgba(255, 168, 0, 0.2);
	border-top-color: #ffa800;
	border-radius: 50%;
	animation: doo-spin 0.8s linear infinite;
	vertical-align: middle;
}

/* Tooltip on hover */
.doo-typeform-spinner-wrapper::after {
	content: attr(data-tooltip);
	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%) translateY(-8px);
	background: rgba(0, 0, 0, 0.85);
	color: #fff;
	padding: 8px 12px;
	border-radius: 4px;
	font-size: 13px;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s, transform 0.2s;
	z-index: 1000;
	line-height: 1.4;
	font-weight: normal;
}

/* Tooltip arrow */
.doo-typeform-spinner-wrapper::before {
	content: '';
	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%) translateY(-2px);
	border: 6px solid transparent;
	border-top-color: rgba(0, 0, 0, 0.85);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s, transform 0.2s;
	z-index: 1000;
}

/* Show tooltip on hover */
.doo-typeform-spinner-wrapper:hover::after,
.doo-typeform-spinner-wrapper:hover::before {
	opacity: 1;
	transform: translateX(-50%) translateY(-4px);
}

.doo-typeform-spinner-wrapper:hover::before {
	transform: translateX(-50%) translateY(2px);
}

/* Completed message (compact) */
.doo-typeform-message.doo-completed {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	background-color: #d4edda;
	color: #155724;
	border: 1px solid #c3e6cb;
	border-radius: 4px;
	font-size: 13px;
	font-weight: 500;
}

/* Timeout message (compact) */
.doo-typeform-message.doo-timeout {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	background-color: #fff3cd;
	color: #856404;
	border: 1px solid #ffeaa7;
	border-radius: 4px;
	font-size: 13px;
	font-weight: 500;
}

/* Error message (compact) */
.doo-typeform-message.doo-error {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	background-color: #f8d7da;
	color: #721c24;
	border: 1px solid #f5c6cb;
	border-radius: 4px;
	font-size: 13px;
	font-weight: 500;
}

/* Spinner animation */
@keyframes doo-spin {
	to {
		transform: rotate(360deg);
	}
}

/* Check icon for completed state */
.doo-check {
	display: inline-block;
	font-size: 16px;
	font-weight: bold;
	line-height: 1;
}

/* Alert icon for timeout/error */
.doo-alert {
	display: inline-block;
	font-size: 16px;
	font-weight: bold;
	line-height: 1;
}