/**
 * COURSE SINGLE PAGE - UDEMY STYLE
 * Ultra-professional course page design
 *
 * @package Coursee
 * @since 1.0.0
 */

/* ============================================
   COURSE SINGLE LAYOUT
   ============================================ */

.course-single-udemy {
	max-width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	background-color: var(--color-bg-primary) !important;
}

/* ============================================
   HERO SECTION - IMPROVED DESIGN
   ============================================ */

.course-hero {
	background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important;
	color: var(--color-white) !important;
	padding: 4rem 0 3rem 0 !important;
	position: relative !important;
	overflow: hidden !important;
}

.course-hero::before {
	content: '' !important;
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	background: radial-gradient(circle at 20% 50%, rgba(99, 102, 241, 0.1) 0%, transparent 50%),
	            radial-gradient(circle at 80% 80%, rgba(236, 72, 153, 0.1) 0%, transparent 50%) !important;
	pointer-events: none !important;
}

.course-hero-container {
	max-width: 1340px !important;
	margin: 0 auto !important;
	padding: 0 2rem !important;
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 3rem !important;
	align-items: start !important;
	position: relative !important;
	z-index: 1 !important;
}

.course-hero-content {
	display: flex !important;
	flex-direction: column !important;
	gap: 1.5rem !important;
}

.course-breadcrumb {
	margin-bottom: 0.5rem !important;
	display: flex !important;
	align-items: center !important;
	gap: 0.5rem !important;
}

.course-breadcrumb a {
	color: rgba(255, 255, 255, 0.7) !important;
	text-decoration: none !important;
	font-size: 0.875rem !important;
	font-weight: 500 !important;
	transition: all 0.2s ease !important;
	padding: 0.25rem 0.5rem !important;
	border-radius: 0.25rem !important;
}

.course-breadcrumb a:hover {
	color: var(--color-white) !important;
	background-color: rgba(255, 255, 255, 0.1) !important;
}

.course-hero-title {
	font-size: 2.75rem !important;
	font-weight: 800 !important;
	color: var(--color-white) !important;
	line-height: 1.2 !important;
	margin: 0 !important;
	letter-spacing: -0.02em !important;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

.course-hero-subtitle {
	font-size: 1.25rem !important;
	color: rgba(255, 255, 255, 0.85) !important;
	margin: 0 !important;
	line-height: 1.6 !important;
	font-weight: 400 !important;
	max-width: 90% !important;
}

.course-hero-meta {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 1rem !important;
	align-items: center !important;
	margin-top: 0.5rem !important;
	padding-top: 1rem !important;
	border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.course-rating-badge {
	display: flex !important;
	align-items: center !important;
	gap: 0.5rem !important;
	background-color: rgba(255, 255, 255, 0.1) !important;
	padding: 0.5rem 0.75rem !important;
	border-radius: 0.5rem !important;
	backdrop-filter: blur(10px) !important;
}

.course-rating-badge .rating-value {
	font-size: 1.125rem !important;
	font-weight: 700 !important;
	color: #fbbf24 !important;
}

.course-rating-badge .rating-stars {
	display: flex !important;
	gap: 0.125rem !important;
	color: #fbbf24 !important;
	font-size: 1rem !important;
	line-height: 1 !important;
}

.course-rating-badge .rating-count {
	font-size: 0.875rem !important;
	color: rgba(255, 255, 255, 0.7) !important;
	text-decoration: none !important;
	cursor: pointer !important;
	transition: color 0.2s ease !important;
}

.course-rating-badge .rating-count:hover {
	color: var(--color-white) !important;
}

.course-students-badge,
.course-level-badge,
.course-duration-badge {
	font-size: 0.875rem !important;
	color: rgba(255, 255, 255, 0.8) !important;
	background-color: rgba(255, 255, 255, 0.08) !important;
	padding: 0.5rem 0.75rem !important;
	border-radius: 0.5rem !important;
	font-weight: 500 !important;
	backdrop-filter: blur(10px) !important;
	transition: all 0.2s ease !important;
}

.course-students-badge:hover,
.course-level-badge:hover,
.course-duration-badge:hover {
	background-color: rgba(255, 255, 255, 0.12) !important;
	color: var(--color-white) !important;
}

.course-instructor-hero {
	margin-top: 1rem !important;
	display: flex !important;
	align-items: center !important;
	gap: 0.5rem !important;
	padding: 0.75rem 0 !important;
}

.course-instructor-hero .instructor-label {
	color: rgba(255, 255, 255, 0.6) !important;
	font-size: 0.875rem !important;
	font-weight: 500 !important;
}

.course-instructor-hero .instructor-name {
	color: var(--color-white) !important;
	text-decoration: none !important;
	font-size: 1rem !important;
	font-weight: 600 !important;
	transition: all 0.2s ease !important;
	padding: 0.25rem 0.5rem !important;
	border-radius: 0.25rem !important;
}

.course-instructor-hero .instructor-name:hover {
	background-color: rgba(255, 255, 255, 0.1) !important;
	text-decoration: underline !important;
}

.course-last-updated {
	font-size: 0.875rem !important;
	color: rgba(255, 255, 255, 0.6) !important;
	margin-top: 0.5rem !important;
	display: flex !important;
	align-items: center !important;
	gap: 0.5rem !important;
}

/* Video Preview */
.course-video-preview {
	position: relative !important;
	border-radius: 0.75rem !important;
	overflow: hidden !important;
	background-color: rgba(0, 0, 0, 0.3) !important;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4) !important;
	transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.course-video-preview:hover {
	transform: translateY(-4px) !important;
	box-shadow: 0 25px 70px rgba(0, 0, 0, 0.5) !important;
}

.video-preview-container {
	position: relative !important;
	width: 100% !important;
	padding-bottom: 56.25% !important; /* 16:9 */
	height: 0 !important;
	overflow: hidden !important;
}

.video-preview-container iframe {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
}

.video-preview-placeholder {
	position: relative !important;
	width: 100% !important;
	padding-bottom: 56.25% !important;
	overflow: hidden !important;
}

.video-preview-placeholder img {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
}

.play-preview-btn {
	position: absolute !important;
	top: 50% !important;
	left: 50% !important;
	transform: translate(-50%, -50%) !important;
	width: 80px !important;
	height: 80px !important;
	border-radius: 50% !important;
	background-color: rgba(255, 255, 255, 0.95) !important;
	border: 3px solid rgba(255, 255, 255, 0.3) !important;
	cursor: pointer !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important;
	backdrop-filter: blur(10px) !important;
}

.play-preview-btn:hover {
	background-color: var(--color-white) !important;
	transform: translate(-50%, -50%) scale(1.15) !important;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4) !important;
	border-color: rgba(255, 255, 255, 0.5) !important;
}

.play-preview-btn:active {
	transform: translate(-50%, -50%) scale(1.05) !important;
}

.play-preview-btn .play-icon {
	font-size: 1.75rem !important;
	color: #6366f1 !important;
	margin-left: 4px !important;
	font-weight: bold !important;
}

/* ============================================
   MAIN CONTENT WRAPPER
   ============================================ */

.course-main-wrapper {
	max-width: 1340px !important;
	margin: 0 auto !important;
	padding: var(--spacing-2xl) var(--spacing-xl) !important;
	display: grid !important;
	grid-template-columns: 1fr 400px !important;
	gap: var(--spacing-2xl) !important;
	align-items: start !important;
}

.course-main-content {
	display: flex !important;
	flex-direction: column !important;
	gap: var(--spacing-2xl) !important;
}

/* ============================================
   COURSE SECTIONS
   ============================================ */

.course-section {
	padding-bottom: var(--spacing-xl) !important;
	border-bottom: 1px solid var(--color-border-light) !important;
}

.course-section:last-child {
	border-bottom: none !important;
}

.course-section-title {
	font-size: var(--font-size-2xl) !important;
	font-weight: var(--font-weight-bold) !important;
	color: var(--color-text-primary) !important;
	margin: 0 0 var(--spacing-lg) 0 !important;
}

/* What You'll Learn */
.learn-list {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
	display: grid !important;
	grid-template-columns: repeat(2, 1fr) !important;
	gap: var(--spacing-md) !important;
}

.learn-list li {
	display: flex !important;
	align-items: start !important;
	gap: var(--spacing-sm) !important;
	font-size: var(--font-size-base) !important;
	color: var(--color-text-secondary) !important;
}

.learn-list .check-icon {
	color: var(--color-success) !important;
	font-weight: var(--font-weight-bold) !important;
	flex-shrink: 0 !important;
}

/* Curriculum Summary */
.curriculum-summary {
	display: flex !important;
	gap: var(--spacing-sm) !important;
	margin-bottom: var(--spacing-lg) !important;
	font-size: var(--font-size-base) !important;
	color: var(--color-text-secondary) !important;
}

/* Requirements & Target Audience */
.requirements-list,
.audience-list {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

.requirements-list li,
.audience-list li {
	padding: var(--spacing-sm) 0 !important;
	font-size: var(--font-size-base) !important;
	color: var(--color-text-secondary) !important;
	position: relative !important;
	padding-left: var(--spacing-lg) !important;
}

.requirements-list li::before,
.audience-list li::before {
	content: '•' !important;
	position: absolute !important;
	left: 0 !important;
	color: var(--color-text-tertiary) !important;
	font-size: var(--font-size-xl) !important;
	line-height: 1 !important;
}

/* Description */
.course-description-content {
	font-size: var(--font-size-base) !important;
	line-height: var(--line-height-relaxed) !important;
	color: var(--color-text-secondary) !important;
}

.course-description-content p {
	margin-bottom: var(--spacing-md) !important;
}

/* Instructor Section */
.instructor-card {
	display: flex !important;
	gap: var(--spacing-lg) !important;
	padding: var(--spacing-lg) !important;
	background-color: var(--color-gray-50) !important;
	border-radius: var(--radius-md) !important;
}

.instructor-avatar img {
	border-radius: 50% !important;
	width: 128px !important;
	height: 128px !important;
	object-fit: cover !important;
}

.instructor-info {
	flex: 1 !important;
}

.instructor-info .instructor-name {
	font-size: var(--font-size-xl) !important;
	font-weight: var(--font-weight-bold) !important;
	margin-bottom: var(--spacing-sm) !important;
}

.instructor-info .instructor-name a {
	color: var(--color-text-primary) !important;
	text-decoration: none !important;
}

.instructor-bio {
	font-size: var(--font-size-base) !important;
	color: var(--color-text-secondary) !important;
	margin-bottom: var(--spacing-md) !important;
	line-height: var(--line-height-relaxed) !important;
}

.instructor-stats {
	display: flex !important;
	gap: var(--spacing-sm) !important;
	font-size: var(--font-size-sm) !important;
	color: var(--color-text-tertiary) !important;
}

/* ============================================
   STICKY SIDEBAR
   ============================================ */

.course-sidebar {
	position: sticky !important;
	top: var(--spacing-xl) !important;
	align-self: start !important;
}

.sidebar-card {
	background-color: var(--color-white) !important;
	border: 1px solid var(--color-border-light) !important;
	border-radius: var(--radius-md) !important;
	padding: var(--spacing-lg) !important;
	box-shadow: var(--shadow-md) !important;
}

.sidebar-video-preview {
	margin-bottom: var(--spacing-lg) !important;
	border-radius: var(--radius-sm) !important;
	overflow: hidden !important;
}

.video-preview-small,
.video-preview-placeholder-small {
	position: relative !important;
	width: 100% !important;
	padding-bottom: 56.25% !important;
	overflow: hidden !important;
}

.video-preview-small iframe {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
}

.video-preview-placeholder-small img {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
}

.play-preview-btn-small {
	position: absolute !important;
	top: 50% !important;
	left: 50% !important;
	transform: translate(-50%, -50%) !important;
	width: 60px !important;
	height: 60px !important;
	border-radius: 50% !important;
	background-color: rgba(255, 255, 255, 0.9) !important;
	border: none !important;
	cursor: pointer !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

.sidebar-price {
	margin-bottom: var(--spacing-lg) !important;
}

.price-original {
	font-size: var(--font-size-base) !important;
	color: var(--color-text-tertiary) !important;
	text-decoration: line-through !important;
	margin-bottom: var(--spacing-xs) !important;
}

.price-current {
	font-size: var(--font-size-3xl) !important;
	font-weight: var(--font-weight-bold) !important;
	color: var(--color-text-primary) !important;
}

.price-discount {
	font-size: var(--font-size-sm) !important;
	color: var(--color-success) !important;
	font-weight: var(--font-weight-semibold) !important;
	margin-top: var(--spacing-xs) !important;
}

.price-free {
	font-size: var(--font-size-3xl) !important;
	font-weight: var(--font-weight-bold) !important;
	color: var(--color-success) !important;
}

.btn-block {
	width: 100% !important;
	justify-content: center !important;
}

.sidebar-guarantee {
	display: flex !important;
	align-items: center !important;
	gap: var(--spacing-sm) !important;
	margin-top: var(--spacing-lg) !important;
	padding-top: var(--spacing-lg) !important;
	border-top: 1px solid var(--color-border-light) !important;
	font-size: var(--font-size-sm) !important;
	color: var(--color-text-secondary) !important;
}

.guarantee-icon {
	color: var(--color-success) !important;
	font-weight: var(--font-weight-bold) !important;
}

.sidebar-includes {
	margin-top: var(--spacing-lg) !important;
	padding-top: var(--spacing-lg) !important;
	border-top: 1px solid var(--color-border-light) !important;
}

.sidebar-includes h4 {
	font-size: var(--font-size-base) !important;
	font-weight: var(--font-weight-bold) !important;
	margin-bottom: var(--spacing-md) !important;
}

.sidebar-includes ul {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

.sidebar-includes li {
	padding: var(--spacing-xs) 0 !important;
	font-size: var(--font-size-sm) !important;
	color: var(--color-text-secondary) !important;
}

.sidebar-share {
	margin-top: var(--spacing-lg) !important;
	padding-top: var(--spacing-lg) !important;
	border-top: 1px solid var(--color-border-light) !important;
}

.sidebar-share h4 {
	font-size: var(--font-size-base) !important;
	font-weight: var(--font-weight-bold) !important;
	margin-bottom: var(--spacing-md) !important;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 1024px) {
	.course-hero-container {
		grid-template-columns: 1fr !important;
		gap: 2rem !important;
	}
	
	.course-hero {
		padding: 3rem 0 2rem 0 !important;
	}
	
	.course-hero-title {
		font-size: 2.25rem !important;
	}
	
	.course-hero-subtitle {
		font-size: 1.125rem !important;
		max-width: 100% !important;
	}
	
	.course-main-wrapper {
		grid-template-columns: 1fr !important;
	}
	
	.course-sidebar {
		position: relative !important;
		top: 0 !important;
	}
	
	.learn-list {
		grid-template-columns: 1fr !important;
	}
}

@media (max-width: 768px) {
	.course-hero {
		padding: 2rem 0 1.5rem 0 !important;
	}
	
	.course-hero-container {
		padding: 0 1rem !important;
		gap: 1.5rem !important;
	}
	
	.course-hero-title {
		font-size: 1.875rem !important;
		line-height: 1.3 !important;
	}
	
	.course-hero-subtitle {
		font-size: 1rem !important;
	}
	
	.course-hero-meta {
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 0.75rem !important;
	}
	
	.course-rating-badge,
	.course-students-badge,
	.course-level-badge,
	.course-duration-badge {
		width: 100% !important;
		justify-content: flex-start !important;
	}
	
	.course-main-wrapper {
		padding: 1.5rem 1rem !important;
	}
}