/**
 * BEAUTIFUL COURSE CARDS WITH PROPER MARGINS
 * Enhanced spacing, margins, and missing elements
 *
 * @package Coursee
 * @since 1.0.0
 */

/* ============================================
   COURSE GRID - PROPER MARGINS AND SPACING
   ============================================ */

.coursee-courses-grid-wrapper {
	padding: 2rem 0 !important;
	margin: 0 !important;
	width: 100% !important;
}

.coursee-courses-grid {
	gap: 1.5rem !important;
	padding: 1rem 0.5rem !important;
	margin: 0 !important;
}

/* Course Item - Beautiful Margins and Spacing */
body .coursee-courses-grid .course-item.udemy-style,
body .course-item.udemy-style {
	margin: 0.5rem !important;
	margin-bottom: 1.5rem !important;
	padding: 0 !important;
	background: #ffffff !important;
	border: 1px solid rgba(229, 231, 235, 0.8) !important;
	border-radius: 16px !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06),
	            0 1px 3px rgba(0, 0, 0, 0.04),
	            inset 0 1px 0 rgba(255, 255, 255, 1) !important;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
	overflow: hidden !important;
	position: relative !important;
}

body .course-item.udemy-style:hover {
	transform: translateY(-8px) !important;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12),
	            0 4px 12px rgba(0, 0, 0, 0.08),
	            inset 0 1px 0 rgba(255, 255, 255, 1) !important;
	border-color: rgba(86, 36, 208, 0.3) !important;
	margin-bottom: 1.5rem !important;
}

/* Course Thumbnail - Enhanced */
body .course-item.udemy-style .course-thumbnail,
body .course-item.udemy-style .course-thumbnail-placeholder {
	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, #f3f4f6 0%, #e5e7eb 100%) !important;
	position: relative !important;
	margin: 0 !important;
	padding: 0 !important;
}

body .course-item.udemy-style .course-thumbnail img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	transition: transform 0.5s ease !important;
}

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

/* Course Content - Better Padding */
body .course-item.udemy-style .course-content {
	padding: 1.25rem 1.5rem 1.5rem 1.5rem !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 0.75rem !important;
	background: #ffffff !important;
	flex: 1 !important;
}

/* Course Title - Enhanced */
body .course-item.udemy-style .course-title,
body .course-item.udemy-style h3.course-title {
	margin: 0 0 0.5rem 0 !important;
	padding: 0 !important;
	min-height: 3em !important;
	max-height: 3em !important;
}

body .course-item.udemy-style .course-title a {
	color: #1a1a1a !important;
	font-size: 1rem !important;
	font-weight: 700 !important;
	line-height: 1.5 !important;
	display: -webkit-box !important;
	-webkit-line-clamp: 2 !important;
	-webkit-box-orient: vertical !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	transition: color 0.2s ease !important;
}

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

/* Course Instructor - Better Spacing */
body .course-item.udemy-style .course-instructor {
	margin: 0 0 0.5rem 0 !important;
	padding: 0 !important;
	font-size: 0.8125rem !important;
	color: #6b7280 !important;
	font-weight: 400 !important;
}

/* Course Meta Info - NEW SECTION */
body .course-item.udemy-style .course-meta-info {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 0.75rem !important;
	margin: 0.5rem 0 !important;
	padding: 0 !important;
	font-size: 0.75rem !important;
	color: #9ca3af !important;
}

body .course-item.udemy-style .course-meta-item {
	display: flex !important;
	align-items: center !important;
	gap: 0.375rem !important;
}

body .course-item.udemy-style .course-meta-item-icon {
	font-size: 0.875rem !important;
	opacity: 0.7 !important;
}

/* Course Rating - Enhanced */
body .course-item.udemy-style .course-rating {
	margin: 0.5rem 0 !important;
	padding: 0 !important;
	gap: 0.5rem !important;
}

body .course-item.udemy-style .rating-stars {
	gap: 0.125rem !important;
}

body .course-item.udemy-style .rating-stars .star {
	font-size: 0.875rem !important;
	color: #fbbf24 !important;
}

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

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

/* Course Price Section - Enhanced */
body .course-item.udemy-style .course-price-section {
	margin: 1rem 0 0 0 !important;
	padding: 1rem 0 0 0 !important;
	border-top: 1px solid rgba(229, 231, 235, 0.6) !important;
	display: flex !important;
	align-items: baseline !important;
	gap: 0.5rem !important;
	flex-wrap: wrap !important;
}

body .course-item.udemy-style .price-current,
body .course-item.udemy-style .price-free {
	font-size: 1.25rem !important;
	font-weight: 800 !important;
	color: #1a1a1a !important;
	letter-spacing: -0.02em !important;
}

body .course-item.udemy-style:hover .price-current,
body .course-item.udemy-style:hover .price-free {
	color: #5624d0 !important;
}

body .course-item.udemy-style .price-original {
	font-size: 0.875rem !important;
	color: #9ca3af !important;
	text-decoration: line-through !important;
}

/* Course Badge - Enhanced Position */
body .course-item.udemy-style .course-badge {
	top: 0.75rem !important;
	left: 0.75rem !important;
	padding: 0.375rem 0.75rem !important;
	font-size: 0.625rem !important;
	font-weight: 700 !important;
	border-radius: 6px !important;
	z-index: 5 !important;
}

/* Course Progress Indicator - For My Courses */
body .course-item.udemy-style .course-progress-indicator {
	margin: 0.75rem 0 0 0 !important;
	padding: 0 !important;
}

body .course-item.udemy-style .progress-bar {
	width: 100% !important;
	height: 6px !important;
	background: #e5e7eb !important;
	border-radius: 3px !important;
	overflow: hidden !important;
}

body .course-item.udemy-style .progress-fill {
	height: 100% !important;
	background: linear-gradient(90deg, #5624d0 0%, #667eea 100%) !important;
	border-radius: 3px !important;
	transition: width 0.3s ease !important;
}

/* Course Duration Badge - NEW */
body .course-item.udemy-style .course-duration {
	position: absolute !important;
	bottom: 0.75rem !important;
	right: 0.75rem !important;
	background: rgba(0, 0, 0, 0.7) !important;
	backdrop-filter: blur(10px) !important;
	-webkit-backdrop-filter: blur(10px) !important;
	color: #ffffff !important;
	padding: 0.375rem 0.625rem !important;
	font-size: 0.6875rem !important;
	font-weight: 600 !important;
	border-radius: 6px !important;
	z-index: 4 !important;
	display: flex !important;
	align-items: center !important;
	gap: 0.25rem !important;
}

/* Course Level Badge - NEW */
body .course-item.udemy-style .course-level-badge {
	display: inline-block !important;
	padding: 0.25rem 0.5rem !important;
	font-size: 0.6875rem !important;
	font-weight: 600 !important;
	border-radius: 4px !important;
	background: rgba(86, 36, 208, 0.1) !important;
	color: #5624d0 !important;
	margin-right: 0.5rem !important;
}

/* Student Count - NEW */
body .course-item.udemy-style .course-student-count {
	display: flex !important;
	align-items: center !important;
	gap: 0.25rem !important;
	font-size: 0.75rem !important;
	color: #6b7280 !important;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
	.coursee-courses-grid {
		gap: 1rem !important;
		padding: 0.5rem 0.25rem !important;
	}
	
	body .course-item.udemy-style {
		margin: 0.25rem !important;
		margin-bottom: 1rem !important;
	}
	
	body .course-item.udemy-style .course-content {
		padding: 1rem 1.25rem 1.25rem 1.25rem !important;
	}
}

/* Ensure proper spacing in grid wrapper */
.coursee-courses-grid-wrapper .coursee-courses-grid {
	padding-left: 1rem !important;
	padding-right: 1rem !important;
	margin-left: -1rem !important;
	margin-right: -1rem !important;
}