/**
 * INNOVATIVE COURSE DESIGN - 1000% IMPROVEMENT
 * 
 * Ultra-modern design with cutting-edge visual effects
 * Glassmorphism, animations, micro-interactions, and innovative layouts
 *
 * @package Coursee
 * @since 1.0.0
 */

/* ============================================
   INNOVATIVE COURSE CARDS - REVOLUTIONARY DESIGN
   ============================================ */

/* Main Course Card - Ultra Innovative */
body .coursee-courses-grid .course-item.udemy-style,
body .course-item.udemy-style {
	background: #ffffff !important;
	border: none !important;
	border-radius: 16px !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;
	transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
	display: flex !important;
	flex-direction: column !important;
	overflow: hidden !important;
	visibility: visible !important;
	opacity: 1 !important;
	position: relative !important;
	width: 300px !important;
	min-width: 300px !important;
	max-width: 300px !important;
	flex: 0 0 300px !important;
	margin: 0 !important;
	padding: 0 !important;
	height: auto !important;
	cursor: pointer !important;
	background-image: linear-gradient(135deg, #ffffff 0%, #fafbfc 100%) !important;
	backdrop-filter: blur(20px) !important;
	-webkit-backdrop-filter: blur(20px) !important;
}

/* Innovative Hover Effect - 3D Transform */
body .coursee-courses-grid .course-item.udemy-style:hover,
body .course-item.udemy-style:hover {
	transform: translateY(-12px) scale(1.02) rotateX(2deg) !important;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15),
	            0 8px 24px rgba(0, 0, 0, 0.1),
	            inset 0 1px 0 rgba(255, 255, 255, 1) !important;
	border: 1px solid rgba(86, 36, 208, 0.2) !important;
}

/* Animated Gradient Border Effect */
body .course-item.udemy-style::before {
	content: '' !important;
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	border-radius: 16px !important;
	padding: 2px !important;
	background: linear-gradient(135deg, 
		rgba(86, 36, 208, 0.3) 0%,
		rgba(102, 126, 234, 0.3) 25%,
		rgba(139, 92, 246, 0.3) 50%,
		rgba(168, 85, 247, 0.3) 75%,
		rgba(86, 36, 208, 0.3) 100%) !important;
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
	-webkit-mask-composite: xor !important;
	mask-composite: exclude !important;
	opacity: 0 !important;
	transition: opacity 0.5s ease !important;
	z-index: -1 !important;
	background-size: 200% 200% !important;
	animation: gradient-shift 3s ease infinite !important;
}

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

body .course-item.udemy-style:hover::before {
	opacity: 1 !important;
}

/* Course Thumbnail - Innovative Design */
body .course-item.udemy-style .course-thumbnail,
body .course-item.udemy-style .course-thumbnail-placeholder {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	width: 100% !important;
	height: 180px !important;
	min-height: 180px !important;
	max-height: 180px !important;
	border-radius: 16px 16px 0 0 !important;
	overflow: hidden !important;
	background: linear-gradient(135deg, 
		#667eea 0%,
		#764ba2 25%,
		#f093fb 50%,
		#4facfe 75%,
		#00f2fe 100%) !important;
	background-size: 300% 300% !important;
	animation: gradient-flow 8s ease infinite !important;
	margin: 0 !important;
	padding: 0 !important;
	position: relative !important;
}

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

body .course-item.udemy-style .course-thumbnail::after {
	content: '' !important;
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	background: linear-gradient(to bottom, 
		transparent 0%,
		rgba(0, 0, 0, 0.1) 50%,
		rgba(0, 0, 0, 0.3) 100%) !important;
	z-index: 1 !important;
	pointer-events: none !important;
}

body .course-item.udemy-style .course-thumbnail img {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
	position: relative !important;
	z-index: 0 !important;
}

body .course-item.udemy-style:hover .course-thumbnail img {
	transform: scale(1.15) rotate(1deg) !important;
}

body .course-item.udemy-style .placeholder-icon {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	visibility: visible !important;
	opacity: 0.8 !important;
	font-size: 4.5rem !important;
	color: rgba(255, 255, 255, 0.95) !important;
	position: absolute !important;
	top: 50% !important;
	left: 50% !important;
	transform: translate(-50%, -50%) !important;
	z-index: 2 !important;
	text-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
	animation: icon-pulse 2s ease-in-out infinite !important;
}

@keyframes icon-pulse {
	0%, 100% { transform: translate(-50%, -50%) scale(1); }
	50% { transform: translate(-50%, -50%) scale(1.1); }
}

/* Course Badge - Innovative Glassmorphism */
body .course-item.udemy-style .course-badge {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	position: absolute !important;
	top: 1rem !important;
	left: 1rem !important;
	z-index: 3 !important;
	background: rgba(0, 0, 0, 0.75) !important;
	backdrop-filter: blur(20px) saturate(180%) !important;
	-webkit-backdrop-filter: blur(20px) saturate(180%) !important;
	color: #ffffff !important;
	padding: 0.5rem 1rem !important;
	font-size: 0.6875rem !important;
	font-weight: 800 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.15em !important;
	border-radius: 12px !important;
	line-height: 1.2 !important;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3),
	            0 2px 8px rgba(0, 0, 0, 0.2),
	            inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
	border: 1px solid rgba(255, 255, 255, 0.1) !important;
	transition: all 0.3s ease !important;
}

body .course-item.udemy-style .course-badge.premium {
	background: linear-gradient(135deg, 
		rgba(251, 191, 36, 0.9) 0%,
		rgba(245, 158, 11, 0.9) 100%) !important;
	box-shadow: 0 8px 24px rgba(251, 191, 36, 0.4),
	            0 2px 8px rgba(0, 0, 0, 0.2),
	            inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

body .course-item.udemy-style .course-badge.bestseller {
	background: linear-gradient(135deg, 
		rgba(16, 185, 129, 0.9) 0%,
		rgba(5, 150, 105, 0.9) 100%) !important;
	box-shadow: 0 8px 24px rgba(16, 185, 129, 0.4),
	            0 2px 8px rgba(0, 0, 0, 0.2),
	            inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

body .course-item.udemy-style:hover .course-badge {
	transform: scale(1.05) translateY(-2px) !important;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4),
	            0 4px 12px rgba(0, 0, 0, 0.3),
	            inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

/* Course Content - Innovative Spacing */
body .course-item.udemy-style .course-content {
	padding: 1.25rem !important;
	background: linear-gradient(to bottom, #ffffff 0%, #fafbfc 100%) !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 0.75rem !important;
	visibility: visible !important;
	opacity: 1 !important;
	width: 100% !important;
	height: auto !important;
	min-height: auto !important;
	position: relative !important;
	z-index: 1 !important;
	flex: 1 !important;
}

/* Course Title - Innovative Typography */
body .course-item.udemy-style .course-title,
body .course-item.udemy-style h3.course-title {
	color: #1a1a1a !important;
	font-size: 1rem !important;
	font-weight: 800 !important;
	line-height: 1.4 !important;
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	margin: 0 !important;
	padding: 0 !important;
	width: 100% !important;
	height: auto !important;
	min-height: 2.8em !important;
	max-height: 3.92em !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	-webkit-line-clamp: 2 !important;
	-webkit-box-orient: vertical !important;
	background: none !important;
	-webkit-background-clip: unset !important;
	-webkit-text-fill-color: #1a1a1a !important;
	letter-spacing: -0.015em !important;
	transition: color 0.3s ease !important;
}

body .course-item.udemy-style .course-title a {
	color: #1a1a1a !important;
	text-decoration: none !important;
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	transition: all 0.3s ease !important;
	background: linear-gradient(135deg, #1a1a1a 0%, #5624d0 100%) !important;
	-webkit-background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
	background-clip: text !important;
	background-size: 200% 200% !important;
	animation: text-gradient 3s ease infinite !important;
}

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

body .course-item.udemy-style:hover .course-title a {
	background: linear-gradient(135deg, #5624d0 0%, #667eea 100%) !important;
	-webkit-background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
	background-clip: text !important;
	animation: text-gradient-fast 1.5s ease infinite !important;
}

@keyframes text-gradient-fast {
	0%, 100% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
}

/* Course Instructor - Innovative Style */
body .course-item.udemy-style .course-instructor {
	color: #6b7280 !important;
	font-size: 0.8125rem !important;
	font-weight: 500 !important;
	margin: 0 !important;
	padding: 0 !important;
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	width: 100% !important;
	height: auto !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
	line-height: 1.5 !important;
	transition: color 0.3s ease !important;
}

body .course-item.udemy-style:hover .course-instructor {
	color: #5624d0 !important;
}

/* Course Rating - Innovative Display */
body .course-item.udemy-style .course-rating {
	display: flex !important;
	align-items: center !important;
	gap: 0.5rem !important;
	visibility: visible !important;
	opacity: 1 !important;
	margin: 0.375rem 0 0 0 !important;
	padding: 0 !important;
	width: 100% !important;
	height: auto !important;
	flex-wrap: wrap !important;
}

body .course-item.udemy-style .rating-stars {
	display: inline-flex !important;
	gap: 0.1875rem !important;
	visibility: visible !important;
	opacity: 1 !important;
	align-items: center !important;
}

body .course-item.udemy-style .rating-stars .star {
	color: #fbbf24 !important;
	font-size: 1rem !important;
	display: inline-block !important;
	visibility: visible !important;
	opacity: 1 !important;
	filter: drop-shadow(0 2px 4px rgba(251, 191, 36, 0.3)) !important;
	transition: transform 0.2s ease !important;
}

body .course-item.udemy-style .rating-stars .star.filled {
	color: #fbbf24 !important;
	animation: star-twinkle 2s ease-in-out infinite !important;
}

@keyframes star-twinkle {
	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: 0.8; transform: scale(0.95); }
}

body .course-item.udemy-style .rating-value,
body .course-item.udemy-style .rating-count {
	display: inline-block !important;
	visibility: visible !important;
	opacity: 1 !important;
	font-weight: 700 !important;
	line-height: 1 !important;
}

body .course-item.udemy-style .rating-value {
	color: #1a1a1a !important;
	font-size: 0.9375rem !important;
}

body .course-item.udemy-style .rating-count {
	color: #6b7280 !important;
	font-size: 0.8125rem !important;
	font-weight: 500 !important;
}

/* Course Price - Innovative Display */
body .course-item.udemy-style .course-price-section {
	display: flex !important;
	align-items: baseline !important;
	gap: 0.75rem !important;
	visibility: visible !important;
	opacity: 1 !important;
	margin: 0.75rem 0 0 0 !important;
	padding: 1rem 0 0 0 !important;
	width: 100% !important;
	height: auto !important;
	border-top: 1px solid rgba(229, 231, 235, 0.5) !important;
	position: relative !important;
}

body .course-item.udemy-style .course-price-section::before {
	content: '' !important;
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 0 !important;
	height: 1px !important;
	background: linear-gradient(90deg, #5624d0 0%, #667eea 100%) !important;
	transition: width 0.5s ease !important;
}

body .course-item.udemy-style:hover .course-price-section::before {
	width: 100% !important;
}

body .course-item.udemy-style .price-current,
body .course-item.udemy-style .price-free {
	color: #1a1a1a !important;
	font-size: 1.25rem !important;
	font-weight: 900 !important;
	display: inline-block !important;
	visibility: visible !important;
	opacity: 1 !important;
	letter-spacing: -0.025em !important;
	background: linear-gradient(135deg, #1a1a1a 0%, #5624d0 100%) !important;
	-webkit-background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
	background-clip: text !important;
	transition: all 0.3s ease !important;
}

body .course-item.udemy-style:hover .price-current,
body .course-item.udemy-style:hover .price-free {
	background: linear-gradient(135deg, #5624d0 0%, #667eea 100%) !important;
	-webkit-background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
	background-clip: text !important;
	transform: scale(1.05) !important;
}

body .course-item.udemy-style .price-original {
	color: #9ca3af !important;
	font-size: 0.9375rem !important;
	font-weight: 400 !important;
	text-decoration: line-through !important;
	display: inline-block !important;
	visibility: visible !important;
	opacity: 1 !important;
	position: relative !important;
}

body .course-item.udemy-style .price-original::after {
	content: '' !important;
	position: absolute !important;
	top: 50% !important;
	left: 0 !important;
	right: 0 !important;
	height: 2px !important;
	background: #9ca3af !important;
	transform: translateY(-50%) !important;
}

/* Course Link Wrapper */
body .course-item.udemy-style .course-link {
	display: flex !important;
	flex-direction: column !important;
	visibility: visible !important;
	opacity: 1 !important;
	width: 100% !important;
	height: 100% !important;
	text-decoration: none !important;
	color: inherit !important;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
	body .course-item.udemy-style {
		width: 280px !important;
		min-width: 280px !important;
		max-width: 280px !important;
		flex: 0 0 280px !important;
	}
	
	body .course-item.udemy-style .course-thumbnail,
	body .course-item.udemy-style .course-thumbnail-placeholder {
		height: 160px !important;
		min-height: 160px !important;
		max-height: 160px !important;
	}
}