/**
 * ULTIMATE SINGLE PAGES DESIGN
 * Ultra-professional design for single course and group pages
 *
 * @package Coursee
 * @since 1.0.0
 */

/* ============================================
   SINGLE COURSE PAGE - ULTIMATE ENHANCEMENTS
   ============================================ */

/* Enhance existing course-single-innovative.css */
.course-single-page {
	background: linear-gradient(to bottom, #f9fafb 0%, #ffffff 30%, #f9fafb 100%) !important;
	min-height: 100vh !important;
	padding: 0 !important;
	position: relative !important;
}

.course-single-page::before {
	content: '' !important;
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	background: 
		radial-gradient(circle at 20% 30%, rgba(86, 36, 208, 0.03) 0%, transparent 50%),
		radial-gradient(circle at 80% 70%, rgba(102, 126, 234, 0.03) 0%, transparent 50%) !important;
	pointer-events: none !important;
	z-index: 0 !important;
}

.course-single.udemy-style {
	max-width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	position: relative !important;
	z-index: 1 !important;
}

/* Enhanced Course Hero */
.course-hero {
	position: relative !important;
	overflow: hidden !important;
}

.course-hero-container {
	position: relative !important;
	z-index: 2 !important;
}

/* Enhanced Course Sections */
.course-section {
	position: relative !important;
}

.course-section::after {
	content: '' !important;
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	background: linear-gradient(135deg, 
		transparent 0%,
		rgba(86, 36, 208, 0.01) 50%,
		transparent 100%) !important;
	pointer-events: none !important;
	opacity: 0 !important;
	transition: opacity 0.3s ease !important;
}

.course-section:hover::after {
	opacity: 1 !important;
}

/* Enhanced Sidebar */
.course-sidebar-card {
	position: relative !important;
}

.course-sidebar-card::before {
	content: '' !important;
	position: absolute !important;
	top: -2px !important;
	left: -2px !important;
	right: -2px !important;
	bottom: -2px !important;
	border-radius: 20px !important;
	background: linear-gradient(135deg, 
		rgba(86, 36, 208, 0.2) 0%,
		rgba(102, 126, 234, 0.2) 50%,
		rgba(139, 92, 246, 0.2) 100%) !important;
	z-index: -1 !important;
	opacity: 0 !important;
	transition: opacity 0.3s ease !important;
}

.course-sidebar-card:hover::before {
	opacity: 1 !important;
}

/* Enhanced Buttons */
.button-large,
.button-primary {
	position: relative !important;
	overflow: hidden !important;
}

.button-large::after,
.button-primary::after {
	content: '' !important;
	position: absolute !important;
	top: 50% !important;
	left: 50% !important;
	width: 0 !important;
	height: 0 !important;
	border-radius: 50% !important;
	background: rgba(255, 255, 255, 0.3) !important;
	transform: translate(-50%, -50%) !important;
	transition: width 0.6s ease, height 0.6s ease !important;
}

.button-large:active::after,
.button-primary:active::after {
	width: 300px !important;
	height: 300px !important;
}

/* Enhanced Progress Bar */
.progress-bar {
	position: relative !important;
	overflow: hidden !important;
}

.progress-fill {
	position: relative !important;
	overflow: hidden !important;
}

.progress-fill::after {
	content: '' !important;
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	background: linear-gradient(90deg, 
		transparent 0%,
		rgba(255, 255, 255, 0.3) 50%,
		transparent 100%) !important;
	animation: progress-shimmer 2s infinite !important;
}

@keyframes progress-shimmer {
	0% { transform: translateX(-100%); }
	100% { transform: translateX(100%); }
}

/* Enhanced Curriculum Items */
.curriculum-item {
	transition: all 0.2s ease !important;
	position: relative !important;
}

.curriculum-item::before {
	content: '' !important;
	position: absolute !important;
	left: 0 !important;
	top: 0 !important;
	bottom: 0 !important;
	width: 0 !important;
	background: linear-gradient(90deg, rgba(86, 36, 208, 0.1) 0%, transparent 100%) !important;
	transition: width 0.3s ease !important;
}

.curriculum-item:hover::before {
	width: 4px !important;
}

.curriculum-item:hover {
	background: rgba(86, 36, 208, 0.02) !important;
	transform: translateX(4px) !important;
}

/* Enhanced Reviews Section */
.course-reviews-section {
	background: rgba(255, 255, 255, 0.9) !important;
	backdrop-filter: blur(20px) saturate(180%) !important;
	-webkit-backdrop-filter: blur(20px) saturate(180%) !important;
}

.review-item {
	border-left: 3px solid transparent !important;
	transition: all 0.3s ease !important;
	padding-left: 1.5rem !important;
}

.review-item:hover {
	border-left-color: #5624d0 !important;
	background: rgba(86, 36, 208, 0.02) !important;
	padding-left: 2rem !important;
}

/* Enhanced Instructor Card */
.instructor-card {
	position: relative !important;
}

.instructor-card::before {
	content: '' !important;
	position: absolute !important;
	top: -2px !important;
	left: -2px !important;
	right: -2px !important;
	bottom: -2px !important;
	border-radius: 20px !important;
	background: linear-gradient(135deg, 
		rgba(86, 36, 208, 0.1) 0%,
		rgba(102, 126, 234, 0.1) 50%,
		rgba(139, 92, 246, 0.1) 100%) !important;
	z-index: -1 !important;
	opacity: 0 !important;
	transition: opacity 0.3s ease !important;
}

.instructor-card:hover::before {
	opacity: 1 !important;
}

/* ============================================
   SINGLE GROUP PAGE - ULTIMATE DESIGN
   ============================================ */

.group-single-page {
	background: linear-gradient(to bottom, #f9fafb 0%, #ffffff 30%, #f9fafb 100%) !important;
	min-height: 100vh !important;
	padding: 0 !important;
	position: relative !important;
}

.group-single-page::before {
	content: '' !important;
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	background: 
		radial-gradient(circle at 20% 30%, rgba(102, 126, 234, 0.03) 0%, transparent 50%),
		radial-gradient(circle at 80% 70%, rgba(118, 75, 162, 0.03) 0%, transparent 50%) !important;
	pointer-events: none !important;
	z-index: 0 !important;
}

.group-single-header {
	background: linear-gradient(135deg, 
		#667eea 0%,
		#764ba2 25%,
		#667eea 50%,
		#764ba2 75%,
		#667eea 100%) !important;
	background-size: 400% 400% !important;
	animation: group-header-gradient 15s ease infinite !important;
	color: #ffffff !important;
	padding: 5rem 2rem 4rem 2rem !important;
	position: relative !important;
	overflow: hidden !important;
}

@keyframes group-header-gradient {
	0%, 100% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
}

.group-single-header::before {
	content: '' !important;
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	background: 
		radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
		radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.1) 0%, transparent 50%) !important;
	pointer-events: none !important;
	z-index: 0 !important;
}

.group-single-title {
	font-size: 3.5rem !important;
	font-weight: 900 !important;
	color: #ffffff !important;
	margin: 0 0 1rem 0 !important;
	letter-spacing: -0.03em !important;
	text-shadow: 0 4px 16px rgba(0, 0, 0, 0.2) !important;
	position: relative !important;
	z-index: 1 !important;
	background: linear-gradient(135deg, #ffffff 0%, rgba(255, 255, 255, 0.9) 100%) !important;
	-webkit-background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
	background-clip: text !important;
}

.group-single-description {
	font-size: 1.375rem !important;
	color: rgba(255, 255, 255, 0.95) !important;
	margin: 0 0 2rem 0 !important;
	position: relative !important;
	z-index: 1 !important;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

.group-single-meta {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 1.5rem !important;
	position: relative !important;
	z-index: 1 !important;
}

.group-meta-badge {
	padding: 0.75rem 1.5rem !important;
	background: rgba(255, 255, 255, 0.15) !important;
	backdrop-filter: blur(20px) saturate(180%) !important;
	-webkit-backdrop-filter: blur(20px) saturate(180%) !important;
	border-radius: 12px !important;
	border: 1px solid rgba(255, 255, 255, 0.2) !important;
	font-size: 0.9375rem !important;
	font-weight: 600 !important;
	color: #ffffff !important;
	transition: all 0.3s ease !important;
}

.group-meta-badge:hover {
	background: rgba(255, 255, 255, 0.25) !important;
	transform: translateY(-2px) !important;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2) !important;
}

.group-single-content {
	max-width: 1200px !important;
	margin: 0 auto !important;
	padding: 4rem 2rem !important;
	position: relative !important;
	z-index: 1 !important;
}

.group-single-section {
	background: rgba(255, 255, 255, 0.95) !important;
	backdrop-filter: blur(20px) saturate(180%) !important;
	-webkit-backdrop-filter: blur(20px) saturate(180%) !important;
	border-radius: 20px !important;
	padding: 3rem !important;
	margin-bottom: 2rem !important;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08),
	            0 2px 8px rgba(0, 0, 0, 0.04),
	            inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
	border: 1px solid rgba(229, 231, 235, 0.5) !important;
	transition: all 0.3s ease !important;
}

.group-single-section:hover {
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1),
	            0 4px 12px rgba(0, 0, 0, 0.06),
	            inset 0 1px 0 rgba(255, 255, 255, 1) !important;
	transform: translateY(-2px) !important;
}

.group-section-title {
	font-size: 2rem !important;
	font-weight: 900 !important;
	color: #1a1a1a !important;
	margin: 0 0 1.5rem 0 !important;
	letter-spacing: -0.02em !important;
	border-bottom: 3px solid transparent !important;
	border-image: linear-gradient(90deg, #667eea 0%, #764ba2 100%) 1 !important;
	padding-bottom: 1rem !important;
	background: linear-gradient(135deg, #1a1a1a 0%, #667eea 100%) !important;
	-webkit-background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
	background-clip: text !important;
}

/* Group Members Grid */
.group-members-grid {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
	gap: 1.5rem !important;
}

.group-member-card {
	background: linear-gradient(to bottom, #ffffff 0%, #fafbfc 100%) !important;
	border-radius: 16px !important;
	padding: 1.5rem !important;
	text-align: center !important;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
	border: 1px solid rgba(229, 231, 235, 0.5) !important;
	transition: all 0.3s ease !important;
}

.group-member-card:hover {
	transform: translateY(-4px) scale(1.02) !important;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12) !important;
	border-color: rgba(102, 126, 234, 0.3) !important;
}

.group-member-avatar {
	width: 80px !important;
	height: 80px !important;
	border-radius: 50% !important;
	margin: 0 auto 1rem auto !important;
	border: 3px solid #ffffff !important;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
	transition: transform 0.3s ease !important;
}

.group-member-card:hover .group-member-avatar {
	transform: scale(1.1) rotate(5deg) !important;
}

.group-member-name {
	font-size: 1.0625rem !important;
	font-weight: 700 !important;
	color: #1a1a1a !important;
	margin: 0 0 0.5rem 0 !important;
}

.group-member-role {
	font-size: 0.875rem !important;
	color: #6b7280 !important;
	margin: 0 !important;
}

/* Responsive */
@media (max-width: 1024px) {
	.course-main-wrapper {
		grid-template-columns: 1fr !important;
	}
	
	.group-single-content {
		padding: 3rem 1.5rem !important;
	}
}

@media (max-width: 768px) {
	.group-single-header {
		padding: 3rem 1.5rem 2rem 1.5rem !important;
	}
	
	.group-single-title {
		font-size: 2.25rem !important;
	}
	
	.group-single-description {
		font-size: 1.125rem !important;
	}
	
	.group-single-section {
		padding: 2rem 1.5rem !important;
	}
	
	.group-section-title {
		font-size: 1.625rem !important;
	}
	
	.group-members-grid {
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
	}
}