/**
 * BUTTONS FIX CSS
 * Ensure buttons are visible and clickable
 *
 * @package Coursee
 * @since 1.0.0
 */

/* Ensure buttons are not hidden */
.coursee-enroll-btn,
.preview-lesson-btn,
.coursee-preview-btn,
.coursee-complete-lesson-btn,
.coursee-complete-lesson {
	position: relative !important;
	z-index: 10 !important;
	pointer-events: auto !important;
	cursor: pointer !important;
}

/* Loading state spinner */
.button-loading-spinner {
	display: inline-block !important;
	width: 14px !important;
	height: 14px !important;
	border: 2px solid rgba(255, 255, 255, 0.3) !important;
	border-top-color: #ffffff !important;
	border-radius: 50% !important;
	animation: spin 0.6s linear infinite !important;
	margin-right: 0.5rem !important;
	vertical-align: middle !important;
}

.button-secondary .button-loading-spinner,
.button-outline .button-loading-spinner {
	border-color: rgba(0, 0, 0, 0.3) !important;
	border-top-color: #000000 !important;
}

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

/* Ensure buttons are not covered by other elements */
.course-item .coursee-enroll-btn,
.course-single .coursee-enroll-btn,
.preview-lesson-btn {
	position: relative !important;
	z-index: 100 !important;
}

/* Fix for buttons inside links */
a .coursee-enroll-btn,
a .preview-lesson-btn {
	pointer-events: none !important;
}

a.coursee-enroll-btn,
a.preview-lesson-btn {
	display: inline-block !important;
	text-decoration: none !important;
}

/* Ensure buttons work on mobile */
@media (max-width: 768px) {
	.coursee-enroll-btn,
	.preview-lesson-btn,
	.coursee-preview-btn {
		min-height: 48px !important;
		padding: 0.875rem 1.5rem !important;
		font-size: 0.9375rem !important;
	}
}