/**
 * Lumos Lesson Sidebar Styles
 *
 * @package LifterLMS_Lumos_Customization
 */

.llms-lumos-lesson-sidebar {
	--llms-lumos-primary: #4a5568;
	--llms-lumos-secondary: #cbd5e0;
	--llms-lumos-star-color: #fbbf24;
	--llms-lumos-star-inactive: #e2e8f0;
	--llms-lumos-btn-text: #ffffff;
	--llms-lumos-btn-hover: #2d3748;
	--llms-lumos-border: #e2e8f0;
	--llms-lumos-favorite-color: #f59e0b;
	--llms-lumos-complete-color: #10b981;

	background: #ffffff;
	border: 1px solid var(--llms-lumos-border);
	border-radius: 8px;
	padding: 1.5rem;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	max-width: 300px;
	margin: 0;
    margin-top: 0 !important;
	align-self: start;
    vertical-align: top;
}

/* Profile Section */
.llms-lumos-sidebar-profile {
	display: flex;
	justify-content: center;
	margin-bottom: 1.5rem;
	width: 100%;
}

.llms-lumos-profile-image {
	width: 100%;
	height: auto;
	max-width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: 12px;
	object-fit: cover;
	border: 2px solid var(--llms-lumos-border);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Rating Stars */
.llms-lumos-sidebar-rating {
	display: flex;
	justify-content: center;
	margin-bottom: 1.5rem;
}

.llms-lumos-stars {
	display: flex;
	gap: 0.25rem;
}

.llms-lumos-star {
	font-size: 2rem;
	color: var(--llms-lumos-star-inactive);
	cursor: pointer;
	transition: all 0.2s ease;
	user-select: none;
}

.llms-lumos-star.active {
	color: var(--llms-lumos-star-color);
}

.llms-lumos-star:hover,
.llms-lumos-star.hover {
	color: var(--llms-lumos-star-color);
	transform: scale(1.1);
}

/* Buttons */
.llms-lumos-btn {
	display: block;
	width: 100%;
	padding: 0.875rem 1.25rem;
	margin-bottom: 1rem;
	background: #9BC3A0;
	color: #46504e !important;
	border: 1px solid #9BC3A0;
	border-radius: 6px;
	font-size: 0.875rem;
	font-weight: 500;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: all 0.2s ease;
	position: relative;
	overflow: hidden;
}

.llms-lumos-btn:hover {
	background: var(--llms-lumos-btn-hover);
	border-color: var(--llms-lumos-btn-hover);
	transform: translateY(-1px);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* Complete Button Incomplete Hover */
.llms-lumos-btn-complete:not(.completed):hover {
	background: #e7c2db;
	border-color: #e7c2db;
	color: #46504e !important;
}

.llms-lumos-btn:active {
	transform: translateY(0);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.llms-lumos-btn:last-child {
	margin-bottom: 0;
}

/* Complete Button States */
.llms-lumos-btn-complete {
	text-transform: uppercase;
}

.llms-lumos-btn-complete.completed {
	background: #46504e;
	border-color: #46504e;
	color: #9bc3a0 !important;
}

.llms-lumos-btn-complete.completed:hover {
	background: #46504e;
	border-color: #46504e;
	color: #9bc3a0 !important;
}

.llms-lumos-btn-complete.completed::before {
	content: '✓ ';
	margin-right: 0.25rem;
}

/* Favorite Button States */
/* Favorite Button Unfavorited Hover */
.llms-lumos-btn-favorite {
	text-transform: uppercase;
}

.llms-lumos-btn-favorite:not(.favorited):hover {
	background: #e7c2db;
	border-color: #e7c2db;
	color: #46504e !important;
}

.llms-lumos-btn-favorite.favorited {
	background: #46504e;
	border-color: #46504e;
	color: #e7c2db !important;
}

.llms-lumos-btn-favorite.favorited:hover {
	background: #46504e;
	border-color: #46504e;
	color: #e7c2db !important;
}

.llms-lumos-btn-favorite::before {
	content: '♡ ';
	margin-right: 0.25rem;
}

.llms-lumos-btn-favorite.favorited::before {
	content: '♥ ';
}

/* Return to Course Button */
.llms-lumos-btn-return {
	background: transparent;
	color: var(--llms-lumos-primary) !important;
	border: 1px solid var(--llms-lumos-secondary);
}

.llms-lumos-btn-return:hover {
	background: #e7c2db;
	color: #46504e !important;
	border-color: #e7c2db;
}

/* Loading State */
.llms-lumos-btn.loading {
	pointer-events: none;
	opacity: 0.6;
}

.llms-lumos-btn.loading::after {
	content: '';
	position: absolute;
	width: 16px;
	height: 16px;
	top: 50%;
	left: 50%;
	margin-left: -8px;
	margin-top: -8px;
	border: 2px solid transparent;
	border-radius: 50%;
	border-top-color: currentColor;
	animation: llms-lumos-spin 0.6s linear infinite;
}

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

/* Responsive Design */
@media (max-width: 768px) {
	.llms-lumos-lesson-sidebar {
		max-width: 100%;
		padding: 1.25rem;
	}

	.llms-lumos-profile-image {
		width: 100%;
		height: auto;
	}

	.llms-lumos-star {
		font-size: 1.75rem;
	}

	.llms-lumos-btn {
		padding: 0.75rem 1rem;
		font-size: 0.8125rem;
	}
}

@media (max-width: 480px) {
	.llms-lumos-lesson-sidebar {
		padding: 1rem;
	}

	.llms-lumos-star {
		font-size: 1.5rem;
	}
}