/**
 * Plugin EAD - Public Styles
 *
 * @package    Plugin_EAD
 * @subpackage Plugin_EAD/public/css
 * @since      1.0.0
 */

/* ==========================================================================
   Variables & Reset
   ========================================================================== */

:root {
	--plugin-ead-primary: #0073aa;
	--plugin-ead-primary-hover: #005a87;
	--plugin-ead-secondary: #23282d;
	--plugin-ead-secondary-hover: #32373c;
	--plugin-ead-success: #46b450;
	--plugin-ead-danger: #dc3232;
	--plugin-ead-warning: #ffb900;
	--plugin-ead-text: #32373c;
	--plugin-ead-text-light: #7e8993;
	--plugin-ead-border: #dcdcde;
	--plugin-ead-bg-light: #f6f7f7;
	--plugin-ead-bg-white: #ffffff;
	--plugin-ead-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	--plugin-ead-shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.15);
	--plugin-ead-radius: 8px;
	--plugin-ead-radius-small: 4px;
	--plugin-ead-transition: all 0.3s ease;
}

/* ==========================================================================
   Common Styles
   ========================================================================== */

/* Buttons */
.plugin-ead-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 24px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.5;
	text-align: center;
	text-decoration: none;
	color: #fff;
	background-color: var(--plugin-ead-primary);
	border: none;
	border-radius: var(--plugin-ead-radius-small);
	cursor: pointer;
	transition: var(--plugin-ead-transition);
}

.plugin-ead-btn:hover {
	background-color: var(--plugin-ead-primary-hover);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: var(--plugin-ead-shadow-hover);
}

.plugin-ead-btn:focus {
	outline: 2px solid var(--plugin-ead-primary);
	outline-offset: 2px;
}

.plugin-ead-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	transform: none;
}

.plugin-ead-btn-primary {
	background-color: var(--plugin-ead-primary);
}

.plugin-ead-btn-primary:hover {
	background-color: var(--plugin-ead-primary-hover);
}

.plugin-ead-btn-secondary {
	background-color: var(--plugin-ead-secondary);
}

.plugin-ead-btn-secondary:hover {
	background-color: var(--plugin-ead-secondary-hover);
}

.plugin-ead-btn-large {
	padding: 16px 32px;
	font-size: 18px;
}

li.outline-lesson.is-current .lesson-name {
    color: #fff;
}

.plugin-ead-btn-block {
	display: flex;
	width: 100%;
	justify-content: center;
}

/* Progress Bars */
.plugin-ead-progress-bar {
	position: relative;
	width: 100%;
	height: 8px;
	background-color: var(--plugin-ead-bg-light);
	border-radius: 4px;
	overflow: hidden;
}

.plugin-ead-progress-bar-fill {
	height: 100%;
	background-color: var(--plugin-ead-primary);
	border-radius: 4px;
	transition: width 0.6s ease;
}

/* Cards */
.sidebar-card {
	background: var(--plugin-ead-bg-white);
	border: 1px solid var(--plugin-ead-border);
	border-radius: var(--plugin-ead-radius);
	padding: 24px;
	margin-bottom: 24px;
	box-shadow: var(--plugin-ead-shadow);
}

.sidebar-card .card-title {
	margin: 0 0 16px 0;
	font-size: 18px;
	font-weight: 600;
	color: var(--plugin-ead-text);
}

/* Messages */
.plugin-ead-error,
.plugin-ead-message {
	padding: 12px 16px;
	margin: 16px 0;
	border-radius: var(--plugin-ead-radius-small);
}

.plugin-ead-error {
	background-color: #fee;
	border-left: 4px solid var(--plugin-ead-danger);
	color: var(--plugin-ead-danger);
}

.plugin-ead-message {
	background-color: #e7f5ff;
	border-left: 4px solid var(--plugin-ead-primary);
	color: var(--plugin-ead-text);
}

/* ==========================================================================
   Video Player
   ========================================================================== */

.plugin-ead-video-player {
	margin-bottom: 24px;
}

.video-container {
	position: relative;
	width: 100%;
	padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
	height: 0;
	overflow: hidden;
	background-color: #000;
	border-radius: var(--plugin-ead-radius);
}

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

/* ==========================================================================
   Single Course Template
   ========================================================================== */

.plugin-ead-single-course {
	max-width: 1400px;
	margin: 0 auto;
	padding: 40px 20px;
}

.course-container {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

/* Course Header */
.course-header {
	background: var(--plugin-ead-bg-white);
	border-radius: var(--plugin-ead-radius);
	padding: 40px;
	box-shadow: var(--plugin-ead-shadow);
}

.course-header-content {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
}

.course-thumbnail img {
	width: 100%;
	height: auto;
	border-radius: var(--plugin-ead-radius);
}

.course-title {
	margin: 0 0 16px 0;
	font-size: 32px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--plugin-ead-text);
}

.course-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-bottom: 24px;
	font-size: 14px;
	color: var(--plugin-ead-text-light);
}

.course-meta > span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.meta-pro-badge {
	padding: 4px 12px;
	background-color: var(--plugin-ead-warning);
	color: #fff;
	border-radius: 12px;
	font-weight: 600;
}

.course-description {
	margin-bottom: 24px;
	font-size: 16px;
	line-height: 1.6;
	color: var(--plugin-ead-text);
}

/* Progress Section */
.course-progress-section {
	padding: 20px;
	background: var(--plugin-ead-bg-light);
	border-radius: var(--plugin-ead-radius);
	margin-bottom: 24px;
}

.progress-info {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 12px;
	font-size: 14px;
}

.progress-label {
	font-weight: 600;
	color: var(--plugin-ead-text);
}

.progress-percentage {
	font-size: 18px;
	font-weight: 700;
	color: var(--plugin-ead-primary);
}

/* Course Actions */
.course-actions {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
}

.course-completed-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 16px 32px;
	font-size: 18px;
	font-weight: 600;
	color: var(--plugin-ead-success);
	background-color: #f0f8f0;
	border-radius: var(--plugin-ead-radius-small);
}

/* Course Main Content */
.course-main-content {
	display: grid;
	grid-template-columns: 1fr 350px;
	gap: 40px;
	align-items: start;
}

/* Course Curriculum */
.course-curriculum-section {
	position: relative;
}

.section-title {
	margin: 0 0 24px 0;
	font-size: 24px;
	font-weight: 700;
	color: var(--plugin-ead-text);
}

/* Module Accordion */
.course-modules-accordion {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.module-accordion-item {
	background: var(--plugin-ead-bg-white);
	border: 1px solid var(--plugin-ead-border);
	border-radius: var(--plugin-ead-radius);
	overflow: hidden;
}

.module-accordion-header {
	position: relative;
}

.module-toggle {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 20px;
	font-size: 16px;
	text-align: left;
	background: none;
	border: none;
	cursor: pointer;
	transition: var(--plugin-ead-transition);
}

.module-toggle:hover {
	background-color: var(--plugin-ead-bg-light);
}

.module-number {
	padding: 4px 12px;
	background-color: var(--plugin-ead-primary);
	color: #fff;
	border-radius: 4px;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
}

.module-title {
	flex: 1;
	margin: 0;
	font-size: 18px;
	font-weight: 600;
	color: var(--plugin-ead-text);
}

.module-stats {
	font-size: 14px;
	color: var(--plugin-ead-text-light);
}

.module-toggle-icon {
	transition: transform 0.3s ease;
}

.module-toggle[aria-expanded="true"] .module-toggle-icon {
	transform: rotate(180deg);
}

.module-progress-mini {
	padding: 0 20px 12px;
}

.module-accordion-content {
	padding: 0 20px 20px;
}

.module-description {
	padding: 0 0 16px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--plugin-ead-text-light);
}

/* Module Lessons List */
.module-lessons-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.lesson-list-item {
	border-top: 1px solid var(--plugin-ead-border);
}

.lesson-link {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px;
	text-decoration: none;
	color: var(--plugin-ead-text);
	transition: var(--plugin-ead-transition);
}

.lesson-link:hover {
	background-color: var(--plugin-ead-bg-light);
}

.lesson-status-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	background-color: var(--plugin-ead-bg-light);
	border-radius: 50%;
	transition: all 0.3s ease;
}

.lesson-completed .lesson-status-icon {
	background-color: var(--plugin-ead-success);
	color: #fff;
}

.lesson-locked .lesson-status-icon {
	background-color: var(--plugin-ead-bg-light);
	color: var(--plugin-ead-text-light);
}

.lesson-info {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.lesson-number {
	font-size: 12px;
	font-weight: 600;
	color: var(--plugin-ead-text-light);
	text-transform: uppercase;
}

.lesson-title {
	font-size: 15px;
	font-weight: 500;
}

.lesson-preview-badge,
.lesson-locked-badge {
	display: inline-block;
	padding: 2px 8px;
	font-size: 11px;
	font-weight: 600;
	border-radius: 4px;
	text-transform: uppercase;
}

.lesson-preview-badge {
	background-color: var(--plugin-ead-success);
	color: #fff;
}

.lesson-locked-badge {
	background-color: var(--plugin-ead-bg-light);
	color: var(--plugin-ead-text-light);
}

.lesson-duration {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 14px;
	color: var(--plugin-ead-text-light);
}

.lesson-locked-wrapper {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px;
	opacity: 0.6;
}

/* Course Paywall */
.course-paywall-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(8px);
	border-radius: var(--plugin-ead-radius);
	z-index: 10;
}

.paywall-content {
	text-align: center;
	max-width: 400px;
	padding: 40px;
}

.paywall-icon {
	margin-bottom: 16px;
	font-size: 48px;
	color: var(--plugin-ead-warning);
}

.paywall-content h3 {
	margin: 0 0 16px 0;
	font-size: 24px;
	color: var(--plugin-ead-text);
}

.paywall-content p {
	margin-bottom: 24px;
	color: var(--plugin-ead-text-light);
}

/* Sidebar */
.course-sidebar {
	position: sticky;
	top: 20px;
}

.course-info-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.course-info-list li {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 0;
	border-bottom: 1px solid var(--plugin-ead-border);
}

.course-info-list li:last-child {
	border-bottom: none;
}

.info-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	background-color: var(--plugin-ead-bg-light);
	border-radius: 50%;
	color: var(--plugin-ead-primary);
}

.info-label {
	flex: 1;
	font-size: 14px;
	color: var(--plugin-ead-text-light);
}

.info-value {
	font-weight: 600;
	color: var(--plugin-ead-text);
}

/* Progress Circle */
.progress-circle-wrapper {
	display: flex;
	justify-content: center;
	margin: 20px 0;
}

.progress-circle-fill {
	transition: stroke-dashoffset 0.6s ease;
}

.progress-text {
	text-align: center;
	margin: 12px 0 0 0;
	font-size: 14px;
	color: var(--plugin-ead-text-light);
}

/* Related Courses */
.related-courses-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.related-course-item {
	border-bottom: 1px solid var(--plugin-ead-border);
}

.related-course-item:last-child {
	border-bottom: none;
}

.related-course-item a {
	display: flex;
	gap: 12px;
	padding: 12px 0;
	text-decoration: none;
	color: var(--plugin-ead-text);
	transition: var(--plugin-ead-transition);
}

.related-course-item a:hover {
	color: var(--plugin-ead-primary);
}

.related-course-thumb {
	flex-shrink: 0;
	width: 60px;
	height: 60px;
	border-radius: 4px;
	overflow: hidden;
}

.related-course-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.related-course-title {
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
}

/* ==========================================================================
   Single Lesson Template
   ========================================================================== */

.plugin-ead-single-lesson {
	max-width: 1400px;
	margin: 0 auto;
	padding: 20px;
}

.lesson-container {
	display: grid;
	grid-template-columns: 1fr 350px;
	gap: 40px;
	align-items: start;
}

/* Lesson Player Section */
.lesson-player-section {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

/* Breadcrumb */
.lesson-breadcrumb {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 0;
	font-size: 14px;
	color: var(--plugin-ead-text-light);
}

.lesson-breadcrumb a {
	color: var(--plugin-ead-primary);
	text-decoration: none;
}

.lesson-breadcrumb a:hover {
	text-decoration: underline;
}

.lesson-breadcrumb .separator {
	color: var(--plugin-ead-border);
}

.lesson-breadcrumb .current {
	color: var(--plugin-ead-text);
	font-weight: 600;
}

/* Player Controls */
.lesson-player-controls {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: 16px;
	align-items: center;
	padding: 20px;
	background: var(--plugin-ead-bg-white);
	border-radius: var(--plugin-ead-radius);
	box-shadow: var(--plugin-ead-shadow);
}

.controls-left {
	display: flex;
	justify-content: flex-start;
}

.controls-center {
	display: flex;
	justify-content: center;
}

.controls-right {
	display: flex;
	justify-content: flex-end;
}

.plugin-ead-btn-complete {
	position: relative;
}

.plugin-ead-btn-complete.is-completed {
	background-color: var(--plugin-ead-success);
}

/* Lesson Header */
.lesson-header {
	padding: 24px;
	background: var(--plugin-ead-bg-white);
	border-radius: var(--plugin-ead-radius);
	box-shadow: var(--plugin-ead-shadow);
}

.lesson-title {
	margin: 0 0 12px 0;
	font-size: 28px;
	font-weight: 700;
	color: var(--plugin-ead-text);
}

.lesson-meta {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
	font-size: 14px;
	color: var(--plugin-ead-text-light);
}

.lesson-meta > span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.meta-completed {
	color: var(--plugin-ead-success);
	font-weight: 600;
}

/* Lesson Content */
.lesson-content {
	padding: 24px;
	background: var(--plugin-ead-bg-white);
	border-radius: var(--plugin-ead-radius);
	box-shadow: var(--plugin-ead-shadow);
	font-size: 16px;
	line-height: 1.7;
	color: var(--plugin-ead-text);
}

/* Lesson Materials */
.lesson-materials {
	padding: 24px;
	background: var(--plugin-ead-bg-light);
	border-radius: var(--plugin-ead-radius);
}

.materials-title {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 16px 0;
	font-size: 18px;
	font-weight: 600;
	color: var(--plugin-ead-text);
}

.materials-content {
	font-size: 14px;
	line-height: 1.6;
}

/* Lesson Navigation */
.lesson-navigation {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.nav-link {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 20px;
	background: var(--plugin-ead-bg-white);
	border: 1px solid var(--plugin-ead-border);
	border-radius: var(--plugin-ead-radius);
	text-decoration: none;
	color: var(--plugin-ead-text);
	transition: var(--plugin-ead-transition);
}

.nav-link:hover {
	border-color: var(--plugin-ead-primary);
	box-shadow: var(--plugin-ead-shadow);
}

.nav-direction {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	font-weight: 600;
	color: var(--plugin-ead-primary);
	text-transform: uppercase;
}

.nav-lesson-title {
	font-size: 15px;
	font-weight: 600;
}

.nav-prev {
	text-align: left;
}

.nav-next {
	text-align: right;
}

/* Lesson Access Denied */
.lesson-access-denied {
	grid-column: 1 / -1;
}

.plugin-ead-access-denied {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 400px;
	padding: 60px 40px;
	background: var(--plugin-ead-bg-white);
	border-radius: var(--plugin-ead-radius);
	box-shadow: var(--plugin-ead-shadow);
}

.access-denied-content {
	text-align: center;
	max-width: 500px;
}

.access-denied-icon {
	font-size: 64px;
	margin-bottom: 24px;
}

.access-denied-content h3 {
	margin: 0 0 16px 0;
	font-size: 28px;
	color: var(--plugin-ead-text);
}

.access-denied-content p {
	margin-bottom: 24px;
	font-size: 16px;
	color: var(--plugin-ead-text-light);
}

/* Lesson Sidebar */
.lesson-sidebar {
	position: sticky;
	top: 20px;
}

/* Course Outline */
.course-outline-accordion {
	margin-top: 16px;
}

.outline-module {
	border-bottom: 1px solid var(--plugin-ead-border);
}

.outline-module:last-child {
	border-bottom: none;
}

.outline-module-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 12px 0;
	font-size: 14px;
	font-weight: 600;
	text-align: left;
	background: none;
	border: none;
	cursor: pointer;
	color: var(--plugin-ead-text);
	transition: var(--plugin-ead-transition);
}

.outline-module-toggle:hover {
	color: var(--plugin-ead-primary);
}

.toggle-icon {
	transition: transform 0.3s ease;
}

.outline-module-toggle[aria-expanded="true"] .toggle-icon {
	transform: rotate(180deg);
}

.outline-lessons {
	list-style: none;
	margin: 0;
	padding: 0 0 12px 12px;
}

.outline-lesson {
	position: relative;
	margin-bottom: 4px;
}

.outline-lesson a,
.outline-lesson .lesson-locked {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px;
	font-size: 13px;
	text-decoration: none;
	color: var(--plugin-ead-text);
	border-radius: 4px;
	transition: all 0.3s ease;
}

.outline-lesson a:hover {
	background-color: var(--plugin-ead-bg-light);
	color: var(--plugin-ead-primary);
}

.outline-lesson.is-current a {
	background-color: var(--plugin-ead-primary);
	color: #fff;
	font-weight: 600;
}

/* Ícone destacado para aulas concluídas */
.outline-lesson.is-completed .lesson-status-icon {
	background-color: var(--plugin-ead-success);
	color: #fff;
	border-radius: 50%;
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
}

/* Efeito de escala ao passar o mouse em aulas concluídas */
.outline-lesson.is-completed:hover .lesson-status-icon {
	transform: scale(1.1);
}

/* Estado combinado: aula atual E concluída */
.outline-lesson.is-current.is-completed a {
	position: relative;
}

/* Badge de conclusão para aula atual concluída */
.outline-lesson.is-current.is-completed .lesson-status-icon {
	background-color: var(--plugin-ead-success);
	color: #fff;
	border: 2px solid #fff;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

/* Adiciona um pequeno indicador extra de conclusão quando é a aula atual */
.outline-lesson.is-current.is-completed::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 3px;
	background: linear-gradient(to bottom, var(--plugin-ead-primary) 0%, var(--plugin-ead-success) 100%);
	border-radius: 0 4px 4px 0;
}

.outline-lesson.is-locked .lesson-locked {
	opacity: 0.5;
	cursor: not-allowed;
}

.lesson-name {
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ==========================================================================
   Course Archive / List
   ========================================================================== */

.plugin-ead-course-archive {
	max-width: 1400px;
	margin: 0 auto;
	padding: 40px 20px;
}

.archive-container {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

/* Archive Header */
.archive-header {
	text-align: center;
	padding: 40px 0;
}

.archive-title {
	margin: 0 0 16px 0;
	font-size: 36px;
	font-weight: 700;
	color: var(--plugin-ead-text);
}

.archive-description {
	max-width: 800px;
	margin: 0 auto;
	font-size: 16px;
	line-height: 1.6;
	color: var(--plugin-ead-text-light);
}

/* Archive Filters */
.archive-filters {
	display: flex;
	align-items: center;
	gap: 24px;
	flex-wrap: wrap;
	padding: 20px;
	background: var(--plugin-ead-bg-white);
	border-radius: var(--plugin-ead-radius);
	box-shadow: var(--plugin-ead-shadow);
}

.filter-group {
	display: flex;
	align-items: center;
	gap: 8px;
}

.filter-group label {
	font-size: 14px;
	font-weight: 600;
	color: var(--plugin-ead-text);
}

.filter-select {
	padding: 8px 12px;
	font-size: 14px;
	border: 1px solid var(--plugin-ead-border);
	border-radius: 4px;
	background-color: var(--plugin-ead-bg-white);
	cursor: pointer;
}

.filter-results-count {
	margin-left: auto;
	font-size: 14px;
	color: var(--plugin-ead-text-light);
}

/* Course Grid */
.course-archive-grid {
	display: grid;
	gap: 32px;
}

.course-archive-grid.layout-grid {
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

.course-archive-grid.layout-list {
	grid-template-columns: 1fr;
}

/* Course Card */
.course-archive-card {
	background: var(--plugin-ead-bg-white);
	border-radius: var(--plugin-ead-radius);
	overflow: hidden;
	box-shadow: var(--plugin-ead-shadow);
	transition: var(--plugin-ead-transition);
}

.course-archive-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--plugin-ead-shadow-hover);
}

.layout-list .course-archive-card .course-card-inner {
	display: grid;
	grid-template-columns: 300px 1fr;
	gap: 24px;
}

/* Course Card Thumbnail */
.course-card-thumbnail {
	position: relative;
	overflow: hidden;
}

.layout-grid .course-card-thumbnail {
	aspect-ratio: 16 / 9;
}

.thumbnail-link {
	display: block;
	width: 100%;
	height: 100%;
}

.course-card-thumbnail img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.course-archive-card:hover .course-card-thumbnail img {
	transform: scale(1.05);
}

.course-badge {
	position: absolute;
	top: 12px;
	right: 12px;
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 6px 12px;
	font-size: 12px;
	font-weight: 700;
	border-radius: 4px;
	text-transform: uppercase;
}

.course-badge-pro {
	background-color: var(--plugin-ead-warning);
	color: #fff;
}

.course-badge-free {
	background-color: var(--plugin-ead-success);
	color: #fff;
}

/* Course Card Content */
.course-card-content {
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.course-card-meta-top {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 4px;
}

.meta-badge {
	padding: 4px 10px;
	font-size: 11px;
	font-weight: 600;
	border-radius: 4px;
	text-transform: uppercase;
}

.meta-level {
	background-color: var(--plugin-ead-bg-light);
	color: var(--plugin-ead-text);
}

.meta-instructor {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 13px;
	color: var(--plugin-ead-text-light);
}

.course-card-title {
	margin: 0;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
}

.course-card-title a {
	color: var(--plugin-ead-text);
	text-decoration: none;
	transition: color 0.2s ease;
}

.course-card-title a:hover {
	color: var(--plugin-ead-primary);
}

.course-card-excerpt {
	font-size: 14px;
	line-height: 1.6;
	color: var(--plugin-ead-text-light);
}

.course-card-stats {
	display: flex;
	gap: 16px;
	margin-top: 4px;
	font-size: 13px;
	color: var(--plugin-ead-text-light);
}

.stat-item {
	display: flex;
	align-items: center;
	gap: 4px;
}

.course-card-progress {
	margin-top: 8px;
}

.course-card-progress .progress-label {
	display: flex;
	justify-content: space-between;
	margin-bottom: 8px;
	font-size: 13px;
	font-weight: 600;
}

.course-card-actions {
	margin-top: auto;
	padding-top: 12px;
}

/* No Results */
.no-courses-found {
	text-align: center;
	padding: 80px 40px;
	background: var(--plugin-ead-bg-white);
	border-radius: var(--plugin-ead-radius);
	box-shadow: var(--plugin-ead-shadow);
}

.no-results-icon {
	font-size: 64px;
	color: var(--plugin-ead-text-light);
	margin-bottom: 24px;
}

.no-courses-found h2 {
	margin: 0 0 16px 0;
	font-size: 28px;
	color: var(--plugin-ead-text);
}

.no-courses-found p {
	margin-bottom: 24px;
	color: var(--plugin-ead-text-light);
}

/* Archive Pagination */
.archive-pagination {
	display: flex;
	justify-content: center;
	margin-top: 40px;
}

.archive-pagination .page-numbers {
	list-style: none;
	display: flex;
	gap: 8px;
	margin: 0;
	padding: 0;
}

.archive-pagination .page-numbers li {
	display: inline-block;
}

.archive-pagination .page-numbers a,
.archive-pagination .page-numbers span {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 10px 16px;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	color: var(--plugin-ead-text);
	background-color: var(--plugin-ead-bg-white);
	border: 1px solid var(--plugin-ead-border);
	border-radius: 4px;
	transition: var(--plugin-ead-transition);
}

.archive-pagination .page-numbers a:hover {
	background-color: var(--plugin-ead-primary);
	color: #fff;
	border-color: var(--plugin-ead-primary);
}

.archive-pagination .page-numbers .current {
	background-color: var(--plugin-ead-primary);
	color: #fff;
	border-color: var(--plugin-ead-primary);
}

/* ==========================================================================
   Shortcodes
   ========================================================================== */

/* Next Lesson */
.plugin-ead-next-lesson {
	padding: 24px;
	background: var(--plugin-ead-bg-white);
	border-radius: var(--plugin-ead-radius);
	box-shadow: var(--plugin-ead-shadow);
}

.plugin-ead-next-lesson h3 {
	margin: 0 0 16px 0;
	font-size: 20px;
	font-weight: 700;
	color: var(--plugin-ead-text);
}

.next-lesson-card {
	padding: 20px;
	background: var(--plugin-ead-bg-light);
	border-radius: var(--plugin-ead-radius-small);
}

.next-lesson-card .lesson-title {
	margin: 0 0 12px 0;
	font-size: 18px;
	font-weight: 600;
	color: var(--plugin-ead-text);
}

/* Course Progress Widget */
.plugin-ead-course-progress {
	padding: 24px;
	background: var(--plugin-ead-bg-white);
	border-radius: var(--plugin-ead-radius);
	box-shadow: var(--plugin-ead-shadow);
}

.plugin-ead-course-progress h4 {
	margin: 0 0 16px 0;
	font-size: 18px;
	font-weight: 700;
	color: var(--plugin-ead-text);
}

/* ==========================================================================
   Loading States & Animations
   ========================================================================== */

@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.plugin-ead-loading {
	animation: fadeIn 0.3s ease;
}

/* ==========================================================================
   Responsive Design
   ========================================================================== */

/* Tablets and below (max-width: 1024px) */
@media screen and (max-width: 1024px) {
	.course-main-content,
	.lesson-container {
		grid-template-columns: 1fr;
	}

	.course-sidebar,
	.lesson-sidebar {
		position: static;
	}

	.lesson-player-controls {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.controls-left,
	.controls-center,
	.controls-right {
		justify-content: stretch;
	}

	.controls-left .plugin-ead-btn,
	.controls-center .plugin-ead-btn,
	.controls-right .plugin-ead-btn {
		width: 100%;
		justify-content: center;
	}

	.lesson-navigation {
		grid-template-columns: 1fr;
	}

	.layout-list .course-archive-card .course-card-inner {
		grid-template-columns: 1fr;
	}
}

/* Mobile devices (max-width: 768px) */
@media screen and (max-width: 768px) {
	.plugin-ead-single-course,
	.plugin-ead-single-lesson,
	.plugin-ead-course-archive {
		padding: 20px 16px;
	}

	.course-header {
		padding: 24px 20px;
	}

	.course-title {
		font-size: 24px;
	}

	.lesson-title {
		font-size: 22px;
	}

	.archive-title {
		font-size: 28px;
	}

	.course-header-content {
		gap: 20px;
	}

	.course-actions {
		flex-direction: column;
	}

	.course-actions .plugin-ead-btn {
		width: 100%;
		justify-content: center;
	}

	.sidebar-card {
		padding: 20px;
	}

	.module-toggle {
		padding: 16px;
	}

	.lesson-link,
	.lesson-locked-wrapper {
		padding: 12px;
	}

	.course-archive-grid.layout-grid {
		grid-template-columns: 1fr;
	}

	.archive-filters {
		flex-direction: column;
		align-items: stretch;
	}

	.filter-group {
		flex-direction: column;
		align-items: stretch;
	}

	.filter-select {
		width: 100%;
	}

	.filter-results-count {
		margin-left: 0;
		text-align: center;
	}
}

/* Small mobile devices (max-width: 480px) */
@media screen and (max-width: 480px) {
	.course-meta,
	.lesson-meta {
		flex-direction: column;
		gap: 8px;
	}

	.plugin-ead-btn {
		padding: 10px 20px;
		font-size: 14px;
	}

	.plugin-ead-btn-large {
		padding: 14px 24px;
		font-size: 16px;
	}
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

/* Focus states */
a:focus,
button:focus,
select:focus,
input:focus {
	outline: 2px solid var(--plugin-ead-primary);
	outline-offset: 2px;
}

/* Skip link for screen readers */
.screen-reader-text {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* High contrast mode */
@media (prefers-contrast: high) {
	.plugin-ead-btn {
		border: 2px solid currentColor;
	}

	.lesson-link,
	.outline-lesson a {
		border: 1px solid var(--plugin-ead-border);
	}
}

/* ==========================================================================
   Enrollment & AJAX Modals
   ========================================================================== */

/* Modal Overlay */
.ead-modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.75);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 99999;
	animation: fadeIn 0.2s ease;
	backdrop-filter: blur(4px);
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

/* Modal Content */
.ead-modal {
	background: var(--plugin-ead-bg-white);
	border-radius: 16px;
	padding: 40px;
	max-width: 480px;
	width: 90%;
	text-align: center;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
	animation: slideUp 0.3s ease;
}

@keyframes slideUp {
	from {
		transform: translateY(30px);
		opacity: 0;
	}
	to {
		transform: translateY(0);
		opacity: 1;
	}
}

.ead-modal-icon {
	font-size: 64px;
	margin-bottom: 16px;
	line-height: 1;
}

.ead-modal h3 {
	margin: 0 0 16px;
	font-size: 28px;
	color: var(--plugin-ead-text);
	font-weight: 700;
}

.ead-modal p {
	margin: 0 0 24px;
	color: var(--plugin-ead-text-light);
	font-size: 16px;
	line-height: 1.6;
}

.ead-upgrade-benefits {
	text-align: left;
	background: var(--plugin-ead-bg-light);
	padding: 20px;
	border-radius: var(--plugin-ead-radius);
	margin-bottom: 24px !important;
	font-size: 14px !important;
	line-height: 1.8 !important;
}

.ead-upgrade-benefits strong {
	display: block;
	margin-bottom: 12px;
	color: var(--plugin-ead-text);
	font-size: 16px;
}

.ead-modal-actions {
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap;
}

.ead-modal-actions .plugin-ead-btn {
	min-width: 160px;
}

/* Next Lesson Prompt */
.ead-next-lesson-prompt {
	position: fixed;
	bottom: 24px;
	right: 24px;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	border-radius: 16px;
	padding: 24px;
	max-width: 420px;
	z-index: 9999;
	box-shadow: 0 8px 32px rgba(102, 126, 234, 0.4);
	animation: slideInUp 0.4s ease;
}

@keyframes slideInUp {
	from {
		transform: translateY(100px);
		opacity: 0;
	}
	to {
		transform: translateY(0);
		opacity: 1;
	}
}

.ead-prompt-content {
	display: flex;
	align-items: center;
	gap: 20px;
	color: #fff;
}

.ead-prompt-icon {
	font-size: 48px;
	flex-shrink: 0;
	line-height: 1;
}

.ead-prompt-icon .dashicons {
	width: 48px;
	height: 48px;
	font-size: 48px;
	color: #fff;
}

.ead-prompt-text {
	flex: 1;
}

.ead-prompt-text h3 {
	margin: 0 0 8px;
	font-size: 20px;
	color: #fff;
	font-weight: 700;
}

.ead-prompt-text p {
	margin: 0;
	opacity: 0.95;
	font-size: 15px;
}

.ead-prompt-actions {
	display: flex;
	gap: 12px;
	flex-shrink: 0;
}

.ead-countdown {
	font-weight: 700;
	opacity: 0.9;
}

/* Loading State for Buttons */
.plugin-ead-btn.loading {
	position: relative;
	color: transparent !important;
	pointer-events: none;
	cursor: wait;
}

.plugin-ead-btn.loading .dashicons {
	display: none;
}

.plugin-ead-btn.loading::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 20px;
	height: 20px;
	margin: -10px 0 0 -10px;
	border: 3px solid rgba(255, 255, 255, 0.3);
	border-top-color: #fff;
	border-radius: 50%;
	animation: spin 0.6s linear infinite;
}

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

/* Success/Error Messages */
.ead-success-message {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 20px;
	background: #e7f5e7;
	border: 2px solid var(--plugin-ead-success);
	border-radius: var(--plugin-ead-radius);
	color: var(--plugin-ead-success);
	font-weight: 600;
	margin-bottom: 20px;
}

.ead-success-message .dashicons {
	font-size: 24px;
	width: 24px;
	height: 24px;
}

.ead-error-message {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 20px;
	background: #fef5f5;
	border: 2px solid var(--plugin-ead-danger);
	border-radius: var(--plugin-ead-radius);
	color: var(--plugin-ead-danger);
	font-weight: 600;
	margin-bottom: 20px;
}

.ead-error-message .dashicons {
	font-size: 24px;
	width: 24px;
	height: 24px;
}

/* Pro Badge */
.ead-pro-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: #fff;
	border-radius: 24px;
	font-weight: 600;
	font-size: 14px;
	margin-bottom: 16px;
}

.ead-pro-badge .dashicons {
	width: 18px;
	height: 18px;
	font-size: 18px;
}

/* ==========================================================================
   Responsive Adjustments for Modals
   ========================================================================== */

@media screen and (max-width: 768px) {
	.ead-modal {
		padding: 32px 24px;
		max-width: 90%;
	}

	.ead-modal h3 {
		font-size: 24px;
	}

	.ead-modal-actions {
		flex-direction: column;
		width: 100%;
	}

	.ead-modal-actions .plugin-ead-btn {
		width: 100%;
	}

	.ead-next-lesson-prompt {
		bottom: 16px;
		right: 16px;
		left: 16px;
		max-width: none;
	}

	.ead-prompt-content {
		flex-direction: column;
		text-align: center;
	}

	.ead-prompt-actions {
		flex-direction: column;
		width: 100%;
	}

	.ead-prompt-actions .plugin-ead-btn {
		width: 100%;
	}
}

:root {
    --laranja-sopro: #FF8A00;
    --creme-luminoso: #FFF5E6;
    --areia-dourada: #EAC8A6;
    --terracota-espiritual: #C7652B;
    --dourado-suave: #FFD99D;
    --cinza-terra: #4C4A47;
}

/* Layout para a página de aula (single-lesson) */
.lesson-layout-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 0;
}
.lesson-container {
    flex: 3;
    min-width: 0;
    order: 1;
}
.lesson-sidebar {
    flex: 1;
    min-width: 300px;
    order: 2;
    border-radius: 8px;
}
@media (max-width: 992px) {
    .lesson-layout-wrapper {
        flex-direction: column;
    }
    .lesson-container,
    .lesson-sidebar {
        flex: 1 1 100%;
    }
    .lesson-sidebar {
        order: 0;
    }
}
.sidebar-card {
    margin-bottom: 20px;
}
.sidebar-card .card-title {
    font-size: 1.2em;
    margin-top: 0;
    margin-bottom: 15px;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}
.outline-module-toggle {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 10px 0;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.outline-module-toggle .toggle-icon {
    transition: transform 0.2s;
}
.outline-module-toggle[aria-expanded="true"] .toggle-icon {
    transform: rotate(180deg);
}
.outline-lessons {
    list-style: none;
    margin: 0;
    padding: 0;
    margin-top: 10px;
}
.outline-lessons li {
    padding: 8px 0;
    border-bottom: 1px dotted #eee;
}
.outline-lessons li:last-child {
    border-bottom: none;
}
.outline-lessons li a,
.outline-lessons li .lesson-locked {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #333;
}
.outline-lessons li.is-current a {
    font-weight: bold;
    color: #0073aa;
}
.outline-lessons li.is-completed .lesson-status-icon .dashicons-yes-alt {
    color: green;
}
.outline-lessons li.is-locked .lesson-status-icon .dashicons-lock {
    color: #aaa;
}
.lesson-status-icon {
    margin-right: 8px;
    font-size: 1.2em;
}

/*
 * ===============================================
 * CSS para o Grid de Aulas da "Vitrine"
 * (COM A "DICA" DE SCROLL)
 * ===============================================
 */

/* Título do Módulo (ex: "Da mente ao milagre") */
.modulo-titulo-vitrine {
    font-size: 1.8rem;
    margin-bottom: 20px;
    color: #FF8A00; /* Laranja Sopro (Primária) */
}


/*
 * ==================================
 * INÍCIO DAS MUDANÇAS (FLEX + SCROLL)
 * ==================================
 */

/* O container do grid agora é flex e scrollável */
.aulas-grid-vitrine {
    display: flex;
    flex-wrap: nowrap; /* Impede a quebra de linha */
    overflow-x: scroll; /* Adiciona scroll horizontal SEMPRE */
    overflow-y: hidden;
    gap: 25px; /* O espaçamento entre os cards */
    /* O padding-bottom foi movido para o .custom-scroll-wrapper */

    /* ESCONDE O SCROLLBAR NATIVO */
    scrollbar-width: none; /* Para Firefox */
    -ms-overflow-style: none;  /* Para IE e Edge */
}

/* Para Chrome/Safari: ESCONDE O SCROLLBAR NATIVO */
.aulas-grid-vitrine::-webkit-scrollbar {
    display: none;
}

/*
 * ==================================
 * CSS PARA O SCROLLBAR CUSTOMIZADO
 * ==================================
 */

/* Wrapper para posicionar o scrollbar em relação ao conteúdo */
.custom-scroll-wrapper {
    position: relative;
    padding-bottom: 25px; /* Espaço para o scrollbar customizado não sobrepor o conteúdo */
    margin-bottom: 40px;
}

/* O card da aula - REGRA RESTAURADA E AJUSTADA */
.aula-card-vitrine {
    flex-shrink: 0;
    /* Largura para mostrar ~4.3 itens e forçar o scroll */
    flex-basis: 23%;
    background-color: transparent;
    transition: transform 0.2s ease-in-out;
}

.aula-card-vitrine:hover {
    transform: translateY(-5px);
}

.aula-card-vitrine a {
    text-decoration: none;
    display: block;
}

/* A trilha do scrollbar customizado */
.scrollbar-custom {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 8px;
    background-color: #f0f0f0;
    border-radius: 4px;
    display: none; /* O JS vai mostrar se for necessário */
}

/* O polegar (handle) do scrollbar customizado */
.scrollbar-custom-bar {
    position: relative;
    width: 100%;
    height: 100%;
}

.scrollbar-custom-bar > div {
    position: absolute;
    width: 50px; /* Largura inicial, o JS vai ajustar */
    height: 100%;
    background-color: #C7652B; /* Cor Terracota sólida */
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.scrollbar-custom-bar > div:hover {
    background-color: #a65424; /* Cor mais escura no hover */
}


/*
 * ==================================
 * ESTILO DA IMAGEM "EM PÉ"
 * ==================================
 */

/* 1. O container da imagem "em pé" */
.aulas-grid-vitrine .aula-thumbnail {
    width: 100%;
    height: 360px; /* Proporção: 3 de largura para 4 de altura */
    overflow: hidden; 
    margin-bottom: 10px;
    background-color: #EAC8A6; 
}

/* 2. A imagem preenche o container */
.aulas-grid-vitrine .aula-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    display: block;
}

/* O título da aula */
.aulas-grid-vitrine .aula-titulo {
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.4;
    padding: 0px 5px 5px;
    margin: 0;
    color: #4C4A47; /* Cinza Terra (Tipografia) */
    transition: color 0.2s ease-in-out;
}

/* Efeito Hover no título */
.aulas-grid-vitrine a:hover .aula-titulo {
    color: #C7652B; /* Terracota (Hover/Contraste) */
}

/*
 * ===============================================
 * ESTILOS GLOBAIS - IDENTIDADE VISUAL SOPRO
 * ===============================================
 */

/* 1. Estilos de Base (Corpo, Textos) */
body {
    background-color: var(--creme-luminoso);
    color: var(--cinza-terra);
}

/* 2. Estilos de Títulos */
h1, h2, h3, h4, h5, h6 {
    color: var(--terracota-espiritual);
}

/* 3. Estilos de Links */
a {
    color: var(--terracota-espiritual);
    text-decoration: none; /* Removemos o sublinhado por padrão para um look mais limpo */
    transition: color 0.2s ease;
}

a:hover {
    color: var(--laranja-sopro);
    text-decoration: underline;
}

/* 4. Estilos de Botões Globais */
button, 
input[type="submit"],
input[type="button"],
.button,
.wp-block-button__link {
    background-color: var(--laranja-sopro) !important;
    color: #FFFFFF !important; /* Texto branco para contraste */
    border: none !important;
    border-radius: 8px !important;
    padding: 12px 24px !important;
    font-weight: bold !important;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

button:hover, 
input[type="submit"]:hover,
input[type="button"]:hover,
.button:hover,
.wp-block-button__link:hover {
    background-color: var(--terracota-espiritual) !important;
    transform: translateY(-2px);
}

/*
 * ===============================================
 * ESTILOS PARA CABEÇALHO E RODAPÉ
 * ===============================================
 */

/* 5. Estilos do Rodapé */

/* Alvo no grupo de blocos do rodapé que tem a cor de fundo escura */
.wp-block-group.has-dark-background-color {
    background-color: var(--terracota-espiritual) !important;
}

/* Ajusta a cor do texto e dos links dentro do rodapé */
.wp-block-group.has-dark-background-color,
.wp-block-group.has-dark-background-color h1,
.wp-block-group.has-dark-background-color h2,
.wp-block-group.has-dark-background-color h3,
.wp-block-group.has-dark-background-color h4,
.wp-block-group.has-dark-background-color p,
.wp-block-group.has-dark-background-color a {
    color: var(--creme-luminoso) !important;
}

.wp-block-group.has-dark-background-color a:hover {
    color: var(--dourado-suave) !important;
}

/* Ajusta a cor do separador no rodapé */
.wp-block-group.has-dark-background-color .wp-block-separator {
    background-color: var(--areia-dourada) !important;
    opacity: 0.5;
}

/* 6. Estilos da Navegação (Cabeçalho) */

/* Garante que os links da navegação principal usem as cores corretas */
.wp-block-navigation a {
    color: var(--cinza-terra);
    font-weight: 500;
}

.wp-block-navigation a:hover {
    color: var(--laranja-sopro);
}

/* Estilo para o item de menu ativo ou na página atual */
.wp-block-navigation .current-menu-item > a {
    font-weight: bold;
    color: var(--laranja-sopro);
}

/*
 * ===============================================
 * CORREÇÕES E REFINAMENTOS
 * ===============================================
 */

/* 1. Remover Outline de Foco Azul */
.related-lessons-list a:focus,
.lesson-complete-toggle:focus,
.wp-block-navigation a:focus,
button:focus,
input[type="submit"]:focus,
input[type="button"]:focus,
.button:focus,
.wp-block-button__link:focus {
    outline: none !important;
    box-shadow: 0 0 0 2px var(--laranja-sopro) !important; /* Adiciona um box-shadow sutil no lugar */
}

/* 2. Estilizar a Caixa Principal do Reprodutor */


/* 3. Remover box-shadow do card da sidebar do plugin */
.sidebar-card {
    box-shadow: none !important;
}

/*
 * ===============================================
 * AJUSTES DE LAYOUT
 * ===============================================
 */

/* 4. Posição da barra lateral da aula */
.lesson-sidebar {
    position: -webkit-sticky; /* Para compatibilidade com Safari */
    position: sticky;
    top: 200px;
}

/* 5. Estilo do cabeçalho da aula */
.lesson-header {
    /* Removido background, box-shadow, border, border-radius */
    /* Mantemos o padding padrão ou ajustamos se necessário */
}

/* 6. Estilo do Título da Aula (Pill-shaped) */
h1.lesson-title {
    display: inline-block;
    padding: 8px 16px;
    border: 1px solid var(--areia-dourada);
    border-radius: 20px;
    background-color: var(--creme-luminoso); /* Opcional: para dar um fundo à pílula */
    color: var(--cinza-terra); /* Garante que a cor do texto seja a da paleta */
    font-size: 1.8em; /* Mantém o tamanho do título */
    line-height: 1;
    margin-bottom: 15px; /* Adiciona um espaço abaixo do título */
}



/*
 * ===============================================
 * ESTILOS PARA O WIDGET DE AULAS RELACIONADAS
 * ===============================================
 */

.sidebar-card.related-lessons-card {
    background-color: var(--areia-dourada);
    border: 1px solid var(--areia-dourada);
    border-radius: 8px;
    padding: 20px;
}

.related-lessons-card .card-title {
    color: var(--terracota-espiritual);
    border-bottom-color: var(--areia-dourada);
}

.related-lessons-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.related-lesson-item {
    display: flex;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--areia-dourada);
}

.related-lesson-item:last-child {
    border-bottom: none;
}

.lesson-complete-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
    display: flex;
    align-items: center;
    margin-right: 10px;
}

.lesson-complete-toggle .checkmark {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--terracota-espiritual);
    position: relative;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.lesson-complete-toggle .checkmark::after {
    content: '';
    position: absolute;
    display: none;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
}

.lesson-complete-toggle.is-completed .checkmark {
    background-color: var(--laranja-sopro);
    border-color: var(--laranja-sopro);
}

.lesson-complete-toggle.is-completed .checkmark::after {
    display: block;
}

.related-lesson-item .lesson-link {
    text-decoration: none;
    color: var(--cinza-terra);
    font-weight: 500;
    transition: color 0.2s ease;
}

.related-lesson-item:hover .lesson-link {
    color: var(--laranja-sopro);
}

.related-lesson-item.is-current .lesson-link {
    font-weight: bold;
    color: var(--laranja-sopro);
}
.home-video-hero-section {
        margin-top: -24px; /* Anula a margem padrão do tema */
        position: relative;
        width: 100%;
        height: 600px; /* Altura fixa para a seção do hero */
        overflow: hidden;
        z-index: 0;
    }

    .home-video-hero-section .video-background {
        position: absolute;
        top: 70%;
        left: 50%;
        width: 177.7vh; /* 100vh * 16/9 -> Garante que a largura seja suficiente para a altura */
        height: 100vw;    /* 100vw * 9/16 -> Garante que a altura seja suficiente para a largura */
        min-width: 100%;
        min-height: 100%;
        transform: translateX(-50%) translateY(-50%);
        z-index: -1;
        pointer-events: none;
    }

    .content-gradient-divider {
        height: 250px; /* Altura da área de degradê */
        margin-top: -250px; /* Puxa o degradê para cima para sobrepor o vídeo */
        background: linear-gradient(to bottom, transparent 0%, #FFF5E6 100%); /* Degradê de transparente para a cor de fundo do conteúdo */
        position: relative;
        z-index: 1; /* Garante que o degradê fique acima do vídeo */
        pointer-events: none;
    }

    .course-list-container {
        padding: 40px 20px;
        background-color: #FFF5E6; /* Cor de fundo para o degradê se misturar */
        position: relative;
        z-index: 2; /* Garante que o conteúdo fique acima do degradê */
    }