/*
Theme Name: Hello Elementor Child - ONEnglish
Template: hello-elementor
Description: Child theme for onenglish.ma, protects custom TutorLMS template overrides and styling from being lost on theme updates.
Version: 1.0.0
Author: ONEnglish.ma
*/

/* ============================================
   TutorLMS course sidebar box, brand restyle
   Targets classes from single/course/course-entry-box.php
   No PHP logic touched, styling only
   ============================================ */

/* Card container */
.tutor-sidebar-card {
	border: 1px solid #E5DCF5 !important;
	border-radius: 12px !important;
	box-shadow: 0 4px 20px rgba(45, 10, 82, 0.08) !important;
}

/* Primary buttons: Enroll Now, Start Learning, Continue Learning */
.tutor-sidebar-card .tutor-btn-primary {
	background-color: #2D0A52 !important;
	border-color: #2D0A52 !important;
	color: #ffffff !important;
	border-radius: 8px !important;
	font-weight: 600 !important;
	transition: background-color 0.2s ease !important;
}
.tutor-sidebar-card .tutor-btn-primary:hover {
	background-color: #4A1A7A !important;
	border-color: #4A1A7A !important;
}

/* Outline buttons: Retake This Course, Complete Course */
.tutor-sidebar-card .tutor-btn-outline-primary {
	border-color: #2D0A52 !important;
	color: #2D0A52 !important;
	border-radius: 8px !important;
	font-weight: 600 !important;
}
.tutor-sidebar-card .tutor-btn-outline-primary:hover {
	background-color: #F3EEFA !important;
}

/* Progress bar fill, uses gold instead of default plugin color */
.tutor-sidebar-card .tutor-progress-bar {
	background-color: #F3EEFA !important;
	border-radius: 6px !important;
	height: 8px !important;
}
.tutor-sidebar-card .tutor-progress-bar .tutor-progress-value {
	background-color: #F7C325 !important;
	border-radius: 6px !important;
}
.tutor-sidebar-card .progress-percentage {
	color: #2D0A52 !important;
	font-weight: 600 !important;
}

/* Price display ("Free" or paid amount) */
.tutor-sidebar-card .tutor-course-single-pricing span {
	color: #2D0A52 !important;
}

/* Section heading, "Course Progress" */
.tutor-sidebar-card h3 {
	color: #2D0A52 !important;
	font-family: 'DM Serif Display', serif !important;
}

/* Meta icons (Level, Duration, Last Updated, Total Enrolled) */
.tutor-sidebar-card .tutor-card-footer [class*="tutor-icon-"] {
	color: #F7C325 !important;
}
.tutor-sidebar-card .tutor-card-footer .tutor-color-secondary {
	color: #4A4A4A !important;
}

/* Enrolled confirmation date line, keep it readable but on-brand */
.tutor-sidebar-card .tutor-enrolled-info-date {
	color: #2D0A52 !important;
}

/* ============================================
   Course details header, brand restyle
   Targets classes from single/course/lead-info.php
   ============================================ */

/* Main course title, was plain black default heading */
.tutor-course-details-title {
	color: #2D0A52 !important;
	font-family: 'DM Serif Display', serif !important;
	font-size: 2.4rem !important;
	line-height: 1.25 !important;
}

/* Hide star rating and wishlist/share buttons */
.tutor-course-details-ratings,
.tutor-course-details-actions {
	display: none !important;
}

/* Write a Review button restyle (best-effort selector, common Tutor class) */
.tutor-add-review-btn,
.tutor-btn-write-review,
[class*="write-review"] .tutor-btn {
	background-color: #2D0A52 !important;
	border-color: #2D0A52 !important;
	color: #ffffff !important;
	border-radius: 8px !important;
	font-weight: 600 !important;
}
[class*="write-review"] .tutor-btn:hover {
	background-color: #4A1A7A !important;
}


/* "By [Author]" and Categories links in the meta line */
.tutor-course-details-info a {
	color: #4A1A7A !important;
	font-weight: 600 !important;
	background-color: #F3EEFA !important;
	padding: 3px 12px !important;
	border-radius: 999px !important;
	display: inline-block !important;
}
.tutor-course-details-info a:hover {
	color: #2D0A52 !important;
	background-color: #E5DCF5 !important;
}

/* Wishlist button */
.tutor-course-wishlist-btn.tutor-btn-ghost {
	border: 1px solid #E5DCF5 !important;
	color: #2D0A52 !important;
	border-radius: 8px !important;
}
.tutor-course-wishlist-btn.tutor-btn-ghost:hover {
	background-color: #F3EEFA !important;
}
.tutor-course-wishlist-btn i {
	color: #F7C325 !important;
}

/* Active tab content underline accent (tab strip itself may need its own file) */
.tutor-course-details-tab {
	border-top: 3px solid #F7C325 !important;
	padding-top: 20px !important;
}

/* ============================================
   Module / Topics accordion, brand restyle
   Targets classes from single/course/course-topics.php
   ============================================ */

/* "Course Content" heading */
.tutor-course-content-title {
	color: #2D0A52 !important;
	font-family: 'DM Serif Display', serif !important;
	font-size: 1.5rem !important;
	border-bottom: 3px solid #F7C325 !important;
	padding-bottom: 8px !important;
	display: inline-block !important;
}

/* Gold underline on the description heading too */
.tutor-tab-item h3 {
	border-bottom: 3px solid #F7C325 !important;
	padding-bottom: 8px !important;
	display: inline-block !important;
}



/* Each module becomes its own card, with spacing between modules */
.tutor-accordion-item {
	border: 1px solid #E5DCF5 !important;
	border-radius: 10px !important;
	margin-bottom: 12px !important;
	overflow: hidden !important;
}

/* Module header (the clickable topic title bar) */
.tutor-accordion-item-header {
	background-color: #FAF8FD !important;
	color: #2D0A52 !important;
	font-weight: 600 !important;
	padding: 14px 18px !important;
	position: relative !important;
	cursor: pointer !important;
}
.tutor-accordion-item-header.is-active {
	background-color: #F3EEFA !important;
	border-bottom: 1px solid #E5DCF5 !important;
}

/* Custom chevron indicator, rotates when a module is open */
.tutor-accordion-item-header::after {
	content: "";
	position: absolute;
	right: 18px;
	top: 50%;
	width: 8px;
	height: 8px;
	border-right: 2px solid #4A1A7A;
	border-bottom: 2px solid #4A1A7A;
	transform: translateY(-70%) rotate(45deg);
	transition: transform 0.2s ease;
}
.tutor-accordion-item-header.is-active::after {
	transform: translateY(-30%) rotate(-135deg);
}

/* Lesson list inside each open module */
.tutor-course-content-list-item {
	padding: 10px 18px !important;
	border-top: 1px solid #F0EBF8 !important;
	transition: background-color 0.15s ease !important;
}
.tutor-course-content-list-item:first-child {
	border-top: none !important;
}
.tutor-course-content-list-item:hover {
	background-color: #FAF8FD !important;
}

/* Lesson type icon (video, text, quiz, etc.) */
.tutor-course-content-list-item-icon {
	color: #F7C325 !important;
}

/* Lesson title link */
.tutor-course-content-list-item-title a {
	color: #2D0A52 !important;
	font-weight: 500 !important;
}
.tutor-course-content-list-item-title a:hover {
	color: #4A1A7A !important;
	text-decoration: underline !important;
}

/* Lock / preview eye icon */
.tutor-course-content-list-item-status {
	color: #B9A9D6 !important;
}

/* ============================================
   Broad pass: typography, backgrounds, hover polish
   Targets the whole course details content area generically,
   catches headings/text not covered by earlier specific rules
   ============================================ */

/* Full-page subtle gradient wash, fixed so it covers the whole scroll height */
body.single-courses,
.tutor-course-details-page {
	background: linear-gradient(180deg, #FBF8FE 0%, #F6F0FB 35%, #FEFCFF 70%, #FFFFFF 100%) fixed !important;
}

/* All headings inside the tab content area (About Course, etc.) */
.tutor-tab-item h1,
.tutor-tab-item h2,
.tutor-tab-item h3,
.tutor-tab-item h4 {
	color: #2D0A52 !important;
	font-family: 'DM Serif Display', serif !important;
}
.tutor-tab-item h2 { font-size: 1.7rem !important; }
.tutor-tab-item h3 { font-size: 1.4rem !important; }
.tutor-tab-item h4 { font-size: 1.15rem !important; }

/* Body text inside tab content, warmer than pure black, better line-height */
.tutor-tab-item p {
	color: #3A3350 !important;
	line-height: 1.7 !important;
	font-size: 1rem !important;
}

/* Tab strip: active tab indicator and hover state */
.tutor-course-details-tab-nav .is-active,
.tutor-course-details-tab-nav a.is-active {
	color: #2D0A52 !important;
	border-bottom: 3px solid #F7C325 !important;
	font-weight: 700 !important;
}
.tutor-course-details-tab-nav a:hover {
	color: #4A1A7A !important;
}

/* Reduce the hero title from feeling oversized, tighten hierarchy */
.tutor-course-details-title {
	font-size: 2rem !important;
}

/* Accordion hover lift, modern card feel */
.tutor-accordion-item {
	transition: box-shadow 0.2s ease, transform 0.15s ease !important;
}
.tutor-accordion-item:hover {
	box-shadow: 0 6px 18px rgba(45, 10, 82, 0.10) !important;
}

/* Module header hover state, distinct from active state */
.tutor-accordion-item-header:hover {
	background-color: #F3EEFA !important;
}

/* Sidebar card hover lift on the whole box */
.tutor-sidebar-card {
	transition: box-shadow 0.2s ease !important;
}
.tutor-sidebar-card:hover {
	box-shadow: 0 8px 28px rgba(45, 10, 82, 0.12) !important;
}

/* Mobile settings tabs: Tutor LMS's own core CSS (not this theme file)
   strips the card border/background and flattens icons to plain gray
   boxes at 768px and below, making the settings page look generic
   compared to desktop. Restore the card look and brand-purple icons. */
@media (max-width: 768px) {
	.tutor-profile-settings-section .tutor-account-container .tutor-profile-settings-tab {
		background-color: #FAF8FD !important;
		border: 1px solid #E5DCF5 !important;
		border-radius: 12px !important;
		padding: 20px !important;
	}
	.tutor-profile-settings-section .tutor-account-container .tutor-icon {
		background: transparent !important;
		border: none !important;
		color: #4A1A7A !important;
	}
}

/* ============================================
   Account settings page
   Targets structure from dashboard/account/settings.php
   Nav buttons targeted via role/aria attributes since their
   class names are assigned dynamically by JS
   ============================================ */

.tutor-profile-settings-tab {
	background-color: #FAF8FD !important;
	border-radius: 12px !important;
}

.tutor-profile-settings-tab button[role="tab"][aria-selected="true"] {
	border-radius: 10px !important;
	color: #ffffff !important;
	transition: background-color 0.15s ease !important;
}
.tutor-profile-settings-tab button[role="tab"][aria-selected="true"] * {
	color: #ffffff !important;
}
.tutor-profile-settings-tab button[role="tab"] {
	border-radius: 10px !important;
	transition: background-color 0.15s ease !important;
}
.tutor-profile-settings-tab button[role="tab"]:hover {
	background-color: #4A1A7A !important;
}
.tutor-profile-settings-tab button[role="tab"][aria-selected="true"] {
	background-color: #2D0A52 !important;
}

.tutor-tab-panel button[type="submit"],
.tutor-tab-panel .tutor-btn-primary {
	background-color: #2D0A52 !important;
	border-color: #2D0A52 !important;
	color: #ffffff !important;
	border-radius: 8px !important;
	font-weight: 600 !important;
}
.tutor-tab-panel button[type="submit"]:hover,
.tutor-tab-panel .tutor-btn-primary:hover {
	background-color: #4A1A7A !important;
}

.tutor-tab-panel input[type="text"],
.tutor-tab-panel input[type="email"],
.tutor-tab-panel input[type="tel"],
.tutor-tab-panel select {
	border-radius: 8px !important;
	border-color: #E5DCF5 !important;
}
.tutor-tab-panel input[type="text"]:focus,
.tutor-tab-panel input[type="email"]:focus {
	border-color: #4A1A7A !important;
	box-shadow: 0 0 0 3px rgba(74, 26, 122, 0.12) !important;
}

/* Sticky sidebar on desktop, stays visible while scrolling through modules */
@media (min-width: 1200px) {
	.tutor-single-course-sidebar {
		position: sticky !important;
		top: 20px !important;
		align-self: flex-start !important;
	}
}

/* Certificate Included badge, appears near the enroll button */
.tutor-course-single-btn-group::after {
	content: "🎓 Certificate Included";
	display: block;
	text-align: center;
	margin-top: 12px;
	background-color: #FEF6DD;
	border: 1px solid #F7C325;
	color: #2D0A52;
	font-weight: 600;
	font-size: 0.85rem;
	padding: 6px 12px;
	border-radius: 999px;
}

/* Merge Course Progress and Total Enrolled into one continuous card, fixes uneven split */
.tutor-sidebar-card .tutor-card-footer {
	border-top: none !important;
	margin-top: -8px !important;
}

/* Circular progress ring, replaces the flat bar */
.tutor-course-progress-wrapper .list-item-progress {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: 10px !important;
}
.tutor-course-progress-wrapper .list-item-progress > div:first-child {
	order: 2 !important;
}
.tutor-course-progress-wrapper .tutor-progress-bar {
	order: 1 !important;
	width: 90px !important;
	height: 90px !important;
	border-radius: 50% !important;
	background: conic-gradient(#F7C325 calc(var(--tutor-progress-value, 0) * 1%), #EDE6F7 0) !important;
	position: relative !important;
}
.tutor-course-progress-wrapper .tutor-progress-bar::before {
	content: "";
	position: absolute;
	inset: 8px;
	background: #ffffff;
	border-radius: 50%;
}
.tutor-course-progress-wrapper .tutor-progress-value {
	display: none !important;
}

/* Instructor / requirements / tags block headings in the lower sidebar */
.tutor-single-course-sidebar-more h3,
.tutor-single-course-sidebar-more h4 {
	color: #2D0A52 !important;
	font-family: 'DM Serif Display', serif !important;
}

/* General link color inside course content, catches anything missed above */
.tutor-tab-item a:not(.tutor-btn) {
	color: #4A1A7A !important;
}
.tutor-tab-item a:not(.tutor-btn):hover {
	color: #2D0A52 !important;
}

/* ============================================
   Dashboard top header avatar button
   Targets .tutor-dashboard-header-user-avatar
   Strips the square background, leaves just the circular avatar
   ============================================ */
.tutor-dashboard-header-user-avatar {
	background: transparent !important;
	border: none !important;
	border-radius: 50% !important;
	padding: 0 !important;
	box-shadow: none !important;
}
.tutor-dashboard-header-user-avatar.active,
.tutor-dashboard-header-user-avatar:hover {
	background: transparent !important;
	box-shadow: 0 0 0 3px #F3EEFA !important;
}

/* Settings page Close/Cancel button, strip the square background */
.tutor-profile-header-close .tutor-btn,
.tutor-profile-header-close button {
	background-color: transparent !important;
	border: none !important;
	box-shadow: none !important;
	padding: 6px !important;
	border-radius: 50% !important;
}
.tutor-profile-header-close .tutor-btn:hover,
.tutor-profile-header-close button:hover {
	background-color: #F3EEFA !important;
}
.tutor-profile-header-close svg,
.tutor-profile-header-close [class*="tutor-icon"] {
	color: #4A1A7A !important;
}

/* ============================================
   Dashboard stat cards (Enrolled Courses, Active, Completed, Time Spent)
   Targets dashboard/instructor/student/stat-card.php
   ============================================ */

.tutor-stat-card {
	border: 1px solid #E5DCF5 !important;
	border-radius: 12px !important;
	padding: 14px 16px !important;
	box-shadow: none !important;
	transition: box-shadow 0.2s ease, transform 0.15s ease !important;
}
.tutor-stat-card:hover {
	box-shadow: 0 6px 18px rgba(45, 10, 82, 0.10) !important;
	transform: translateY(-2px) !important;
}

.tutor-stat-card-title {
	color: #6B6B6B !important;
	font-size: 0.8rem !important;
	font-weight: 600 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.03em !important;
}

.tutor-stat-card-icon {
	background-color: #F3EEFA !important;
	color: #4A1A7A !important;
	border-radius: 50% !important;
	width: 48px !important;
	height: 48px !important;
	align-items: center !important;
	justify-content: center !important;
}
.tutor-stat-card-icon svg {
	width: 22px !important;
	height: 22px !important;
}

.tutor-stat-card-value {
	color: #2D0A52 !important;
	font-family: 'DM Serif Display', serif !important;
	font-size: 1.6rem !important;
	font-weight: 700 !important;
}

/* Alternate gold accent on every other card for variety */
.tutor-stat-card:nth-child(even) .tutor-stat-card-icon {
	background-color: #FEF6DD !important;
	color: #B8860B !important;
}

/* Specific per-card colors matching the reference design */
.tutor-stat-card {
	position: relative !important;
	overflow: hidden !important;
	padding-bottom: 52px !important;
}
.tutor-stat-card:nth-child(1) .tutor-stat-card-icon {
	background-color: #EDE4FA !important;
	color: #6B3FA0 !important;
}
.tutor-stat-card:nth-child(2) .tutor-stat-card-icon {
	background-color: #E1F5EA !important;
	color: #2E9E5B !important;
}
.tutor-stat-card:nth-child(3) .tutor-stat-card-icon {
	background-color: #EDE4FA !important;
	color: #6B3FA0 !important;
}
.tutor-stat-card:nth-child(4) .tutor-stat-card-icon {
	background-color: #FEF1CE !important;
	color: #C9971F !important;
}

/* Decorative wavy bottom edge, colored to match each card */
.tutor-stat-card::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 38px;
	background-size: 100% 100% !important;
	background-repeat: no-repeat !important;
}
.tutor-stat-card:nth-child(1)::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cpath d='M0,20 C50,2 50,38 100,20 C150,2 150,38 200,20 L200,40 L0,40 Z' fill='%23EDE4FA'/%3E%3C/svg%3E") !important;
}
.tutor-stat-card:nth-child(2)::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cpath d='M0,20 C50,2 50,38 100,20 C150,2 150,38 200,20 L200,40 L0,40 Z' fill='%23E1F5EA'/%3E%3C/svg%3E") !important;
}
.tutor-stat-card:nth-child(3)::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cpath d='M0,20 C50,2 50,38 100,20 C150,2 150,38 200,20 L200,40 L0,40 Z' fill='%23EDE4FA'/%3E%3C/svg%3E") !important;
}
.tutor-stat-card:nth-child(4)::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cpath d='M0,20 C50,2 50,38 100,20 C150,2 150,38 200,20 L200,40 L0,40 Z' fill='%23FEF1CE'/%3E%3C/svg%3E") !important;
}

/* Motivational captions under each stat value, matching reference design */
.tutor-stat-card:nth-child(1) .tutor-stat-card-value::after {
	content: "Keep it up!";
	display: block;
	font-size: 0.78rem;
	font-weight: 400;
	font-family: 'DM Sans', sans-serif;
	color: #6B6B6B;
	margin-top: 4px;
}
.tutor-stat-card:nth-child(2) .tutor-stat-card-value::after {
	content: "Keep learning";
	display: block;
	font-size: 0.78rem;
	font-weight: 400;
	font-family: 'DM Sans', sans-serif;
	color: #6B6B6B;
	margin-top: 4px;
}
.tutor-stat-card:nth-child(3) .tutor-stat-card-value::after {
	content: "You've got this!";
	display: block;
	font-size: 0.78rem;
	font-weight: 400;
	font-family: 'DM Sans', sans-serif;
	color: #6B6B6B;
	margin-top: 4px;
}
.tutor-stat-card:nth-child(4) .tutor-stat-card-value::after {
	content: "Keep going!";
	display: block;
	font-size: 0.78rem;
	font-weight: 400;
	font-family: 'DM Sans', sans-serif;
	color: #6B6B6B;
	margin-top: 4px;
}

/* ============================================
   New dashboard blocks, added via hook + JS injection
   ============================================ */

.onenglish-progress-banner {
	display: flex !important;
	align-items: center !important;
	gap: 18px !important;
	background: linear-gradient(90deg, #F3EEFA 0%, #FBF8FE 100%) !important;
	border-radius: 16px !important;
	padding: 20px 24px !important;
	margin-top: 24px !important;
}
.onenglish-progress-banner-icon {
	font-size: 2.4rem !important;
	background-color: #ffffff !important;
	border-radius: 50% !important;
	width: 64px !important;
	height: 64px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex-shrink: 0 !important;
}
.onenglish-progress-banner-text {
	flex: 1 !important;
}
.onenglish-progress-banner-text h4 {
	color: #2D0A52 !important;
	font-family: 'DM Serif Display', serif !important;
	font-size: 1.2rem !important;
	margin: 0 0 4px !important;
}
.onenglish-progress-banner-text p {
	color: #4A4A4A !important;
	margin: 0 !important;
	font-size: 0.9rem !important;
}
.onenglish-progress-banner-btn {
	background-color: #4A1A7A !important;
	border-color: #4A1A7A !important;
	color: #ffffff !important;
	border-radius: 8px !important;
	font-weight: 600 !important;
	white-space: nowrap !important;
}
.onenglish-progress-banner-btn:hover {
	background-color: #2D0A52 !important;
}

.onenglish-dashboard-quote {
	text-align: center !important;
	margin-top: 32px !important;
	color: #6B6B6B !important;
	font-style: italic !important;
}
.onenglish-dashboard-quote p {
	display: inline !important;
	font-size: 0.95rem !important;
}
.onenglish-quote-author {
	display: block !important;
	margin-top: 4px !important;
	font-style: normal !important;
	font-weight: 600 !important;
	color: #4A1A7A !important;
}
.onenglish-quote-leaf {
	display: none !important;
}

/* ============================================
   Lesson player, left sidebar course content list
   Targets confirmed classes from single/lesson/lesson_sidebar.php
   ============================================ */

.tutor-course-single-sidebar-title {
	padding: 16px 18px !important;
	font-weight: 700 !important;
	color: #2D0A52 !important;
	text-transform: uppercase !important;
	font-size: 0.8rem !important;
	letter-spacing: 0.03em !important;
}

.tutor-course-topic {
	border-bottom: 1px solid #F0EBF8 !important;
}

/* "Course Progress" card, Tutor's own native element, restyled */
.tutor-learning-progress {
	padding: 18px !important;
	border-bottom: 1px solid #F0EBF8 !important;
}
.tutor-learning-progress-text {
	color: #2D0A52 !important;
	font-family: 'DM Serif Display', serif !important;
	font-size: 1.05rem !important;
	font-weight: 700 !important;
	margin-bottom: 10px !important;
}
.tutor-learning-progress .tutor-progress-bar {
	background-color: #F3EEFA !important;
	border-radius: 999px !important;
	height: 8px !important;
	overflow: hidden !important;
}
.tutor-learning-progress .tutor-progress-bar-fill {
	background: linear-gradient(90deg, #2D0A52, #F7C325) !important;
	border-radius: 999px !important;
	height: 100% !important;
}

.tutor-course-topic .tutor-accordion-item-header {
	background-color: transparent !important;
	border-left: 3px solid transparent !important;
}
.tutor-course-topic .tutor-accordion-item-header.is-active {
	background-color: #F3EEFA !important;
	border-left: 3px solid #4A1A7A !important;
}
.tutor-course-topic-title {
	color: #2D0A52 !important;
	font-weight: 600 !important;
}
.tutor-course-topic-summary {
	background-color: #F3EEFA !important;
	color: #4A1A7A !important;
	border-radius: 999px !important;
	padding: 2px 10px !important;
	font-size: 0.75rem !important;
	font-weight: 600 !important;
}

.tutor-course-topic-item {
	border-left: 3px solid transparent !important;
}
.tutor-course-topic-item a {
	padding: 10px 18px !important;
}
.tutor-course-topic-item.is-active {
	background-color: #FAF8FD !important;
	border-left: 3px solid #F7C325 !important;
}
.tutor-course-topic-item.is-active .tutor-course-topic-item-title {
	color: #2D0A52 !important;
	font-weight: 700 !important;
}
.tutor-course-topic-item-icon {
	color: #4A1A7A !important;
}

/* Completed lesson checkbox styled as a green checkmark circle */
.tutor-form-check-input.tutor-form-check-circle:checked {
	background-color: #2E9E5B !important;
	border-color: #2E9E5B !important;
}

/* ============================================
   Lesson navigation buttons (Previous / Next)
   Targets confirmed classes from single/common/footer.php
   ============================================ */
.tutor-course-topic-single-footer .tutor-btn-secondary {
	border-radius: 999px !important;
	border-color: #E5DCF5 !important;
	color: #2D0A52 !important;
	font-weight: 600 !important;
}
.tutor-course-topic-single-footer .tutor-btn-secondary:hover {
	background-color: #F3EEFA !important;
}

/* "Complete The Course" / Mark Complete button, real confirmed classes.
   Excludes .tutor-btn-icon (the circular back-arrow button), since the
   20px horizontal padding meant for this text button was also matching
   the icon-only arrow, inflating it from Tutor's intended ~34-40px square
   to 60px wide. On mobile that overflowed its fixed-width wrapper and
   overlapped the lesson title next to it. */
.tutor-learning-header-content .tutor-btn:not(.tutor-btn-icon) {
	border-radius: 999px !important;
	background-color: #2D0A52 !important;
	border-color: #2D0A52 !important;
	color: #ffffff !important;
	font-weight: 600 !important;
	padding: 8px 20px !important;
}
.tutor-learning-header-content .tutor-btn:not(.tutor-btn-icon):hover {
	background-color: #4A1A7A !important;
}

/* Reset the back-arrow button to Tutor's intended compact square size,
   overriding only the padding the rule above used to force on it */
.tutor-learning-header-content .tutor-btn-icon {
	padding: 0 !important;
}

/* Course title in the lesson header, real confirmed class */
.tutor-learning-header-title {
	color: #2D0A52 !important;
	font-family: 'DM Serif Display', serif !important;
	font-weight: 700 !important;
}

/* Sidebar "Keep growing" widget, injected via JS */
.onenglish-keep-growing-widget {
	margin: 20px 16px !important;
	padding: 20px !important;
	background-color: #FAF8FD !important;
	border: 1px solid #E5DCF5 !important;
	border-radius: 14px !important;
	text-align: center !important;
}
.onenglish-keep-growing-icon {
	font-size: 2rem !important;
	margin-bottom: 8px !important;
}
.onenglish-keep-growing-widget h5 {
	color: #2D0A52 !important;
	font-family: 'DM Serif Display', serif !important;
	margin: 0 0 6px !important;
}
.onenglish-keep-growing-widget p {
	color: #6B6B6B !important;
	font-size: 0.82rem !important;
	margin: 0 0 14px !important;
}
.onenglish-keep-growing-widget .tutor-btn {
	background-color: #4A1A7A !important;
	border-color: #4A1A7A !important;
	color: #ffffff !important;
	border-radius: 8px !important;
	width: 100% !important;
	font-weight: 600 !important;
}
.onenglish-keep-growing-widget .tutor-btn:hover {
	background-color: #2D0A52 !important;
}

/* Fix the actual grid column widths, this is a CSS Grid layout,
   not a flex layout, so width had to be fixed at the grid level.
   Scoped to desktop only (min-width: 769px): below that, Tutor's own
   stylesheet correctly collapses this grid to a single full-width
   column on mobile, and this rule was overriding that with !important
   at every screen size, starving .tutor-dashboard-main (and everything
   inside it, including the stat cards) down to ~164px wide. */
@media (min-width: 769px) {
	.tutor-dashboard-layout {
		grid-template-columns: 260px 1fr !important;
	}
}
.tutor-dashboard-nav-mobile {
	display: none !important;
}
.tutor-dashboard-main {
	width: 100% !important;
	min-width: 0 !important;
}
.tutor-dashboard-body {
	padding: 0 32px !important;
	width: 100% !important;
	max-width: none !important;
	box-sizing: border-box !important;
}
.tutor-student-dashboard-courses,
.onenglish-progress-banner,
.onenglish-dashboard-quote {
	margin-left: 4px !important;
	margin-right: 4px !important;
}

/* Mobile responsiveness for the new dashboard blocks */
@media (max-width: 767px) {
	.tutor-stat-card {
		flex: 1 1 calc(50% - 10px) !important;
		min-width: calc(50% - 10px) !important;
	}
	.onenglish-progress-banner {
		flex-direction: column !important;
		text-align: center !important;
		padding: 20px !important;
	}
	.onenglish-progress-banner-btn {
		width: 100% !important;
	}
	.tutor-student-dashboard-courses .tutor-progress-card-inner {
		flex-direction: column !important;
	}
	.tutor-student-dashboard-courses .tutor-progress-card-actions {
		width: 100% !important;
		margin-top: 12px !important;
	}
	.tutor-student-dashboard-courses .tutor-progress-card-actions .tutor-btn {
		width: 100% !important;
	}
	.onenglish-dashboard-quote p {
		display: block !important;
		padding: 0 16px !important;
	}
}

/* ============================================
   Student dashboard, Enrolled courses card
   Targets classes from dashboard/courses/course-card*.php
   ============================================ */

.tutor-progress-card {
	border: 1px solid #E5DCF5 !important;
	border-radius: 14px !important;
	overflow: hidden !important;
	transition: box-shadow 0.2s ease, transform 0.15s ease !important;
	cursor: pointer !important;
}
.tutor-progress-card:hover {
	box-shadow: 0 10px 28px rgba(45, 10, 82, 0.14) !important;
	transform: translateY(-2px) !important;
}

.tutor-progress-card-thumbnail img {
	border-radius: 14px 14px 0 0 !important;
}

.tutor-progress-card-content {
	padding: 16px 18px !important;
}

.tutor-progress-card-category {
	display: inline-block !important;
	background-color: #F3EEFA !important;
	color: #4A1A7A !important;
	font-weight: 600 !important;
	font-size: 0.78rem !important;
	padding: 3px 12px !important;
	border-radius: 999px !important;
	margin-bottom: 8px !important;
}

.tutor-progress-card-title {
	color: #2D0A52 !important;
	font-family: 'DM Serif Display', serif !important;
	font-size: 1.1rem !important;
}

.tutor-progress-card-details {
	color: #6B6B6B !important;
	font-size: 0.85rem !important;
	margin-bottom: 8px !important;
}
.tutor-progress-card-separator {
	color: #F7C325 !important;
	font-weight: 700 !important;
}

.tutor-progress-card-bar,
.tutor-progress-card-bar .tutor-progress-bar {
	background-color: #F3EEFA !important;
	border-radius: 999px !important;
	height: 8px !important;
}
.tutor-progress-card-bar .tutor-progress-value {
	background-color: #F7C325 !important;
	border-radius: 999px !important;
}

.tutor-progress-card-actions .tutor-btn {
	background-color: #2D0A52 !important;
	border-color: #2D0A52 !important;
	color: #fff !important;
	border-radius: 8px !important;
	font-weight: 600 !important;
}
.tutor-progress-card-actions .tutor-btn:hover {
	background-color: #4A1A7A !important;
}

/* ============================================
   Visual identity pass, matching the marketing page
   Featured image size, description panel, pill badges, accreditation logo
   ============================================ */

/* Featured course image, constrained height, rounded, matches hero image treatment */
.tutor-course-thumbnail img,
main.tutor-col-xl-8 > img {
	max-height: 380px !important;
	width: 100% !important;
	object-fit: cover !important;
	border-radius: 16px !important;
	box-shadow: 0 8px 24px rgba(45, 10, 82, 0.15) !important;
}

/* "About Course" description, soft translucent lavender glass panel */
#tutor-course-details-tab-info {
	background: rgba(243, 238, 250, 0.55) !important;
	backdrop-filter: blur(6px) !important;
	border: 1px solid rgba(229, 220, 245, 0.8) !important;
	border-radius: 16px !important;
	padding: 24px 28px !important;
}

/* Accreditation logos removed for now, will be placed in a separate block on the right later */


/* Meta info (Level, Duration, Enrolled, Last Updated) as rounded pill badges, side by side */
.tutor-sidebar-card .tutor-card-footer .tutor-ul {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 8px !important;
	list-style: none !important;
	padding: 0 !important;
}
.tutor-sidebar-card .tutor-card-footer .tutor-ul li {
	background-color: #F3EEFA !important;
	border-radius: 999px !important;
	padding: 6px 14px !important;
	margin: 0 !important;
	width: auto !important;
}

/* Price display as a bold gold-accented pill */
.tutor-course-single-pricing {
	display: inline-block !important;
	background-color: #FEF6DD !important;
	border: 1px solid #F7C325 !important;
	border-radius: 999px !important;
	padding: 6px 18px !important;
}

/* ============================================
   Sidebar simplification pass
   Hides Free price, "Free access this course" caption,
   enrollment date confirmation, instructor block,
   and the Level / Last Updated pills.
   Keeps only Total Enrolled, restyled as a bold gradient bar.
   ============================================ */

/* Hide the "Free" price pill entirely */
.tutor-course-single-pricing {
	display: none !important;
}

/* Hide the "Free access this course" caption, the div right after the enroll button group */
.tutor-course-single-btn-group + div {
	display: none !important;
}

/* Hide the "You enrolled in this course on [date]" confirmation line */
.tutor-enrolled-info-text,
.tutor-icon-purchase-mark {
	display: none !important;
}
.tutor-sidebar-card div:has(> .tutor-icon-purchase-mark) {
	display: none !important;
}

/* Hide the "A course by [instructor]" block, first section in the lower sidebar */
.tutor-single-course-sidebar-more > div:first-of-type {
	display: none !important;
}

/* Hide Level (difficulty) and Last Updated pills specifically */
.tutor-card-footer li:has(.tutor-icon-level),
.tutor-card-footer li:has(.tutor-icon-refresh-o) {
	display: none !important;
}

/* Restyle Total Enrolled: text on top, decorative gradient bar below */
.tutor-card-footer li:has(.tutor-icon-mortarboard) {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	justify-content: center !important;
	background-color: #FAF8FD !important;
	width: 100% !important;
	padding: 14px 16px !important;
	border-radius: 14px !important;
	gap: 8px !important;
}
.tutor-card-footer li:has(.tutor-icon-mortarboard) span,
.tutor-card-footer li:has(.tutor-icon-mortarboard) [class*="tutor-icon-"] {
	color: #2D0A52 !important;
	font-weight: 700 !important;
	font-size: 0.95rem !important;
}
.tutor-card-footer li:has(.tutor-icon-mortarboard)::after {
	content: "";
	flex-basis: 100%;
	height: 8px;
	margin-top: 6px;
	border-radius: 999px;
	background: linear-gradient(90deg, #2D0A52 0%, #4A1A7A 50%, #F7C325 100%);
	box-shadow: 0 2px 8px rgba(45, 10, 82, 0.25);
}

/* Mobile adjustment, keeps the bar legible and well-proportioned on small screens */
@media (max-width: 480px) {
	.tutor-card-footer li:has(.tutor-icon-mortarboard) {
		padding: 12px 14px !important;
	}
	.tutor-card-footer li:has(.tutor-icon-mortarboard) span {
		font-size: 0.88rem !important;
	}
	.tutor-course-details-title {
		font-size: 1.6rem !important;
	}
	.tutor-course-thumbnail img,
	main.tutor-col-xl-8 > img {
		max-height: 220px !important;
	}
}

/* ============================================================
   ============================================================
   DARK MODE
   Tutor exposes html[data-tutor-theme="dark"] when dark mode
   is active. Every custom component above gets its dark
   counterpart here, same section order as above for easy
   cross-reference. Structural properties (padding, radius,
   layout) are inherited automatically, only colors are
   overridden below.
   ============================================================
   ============================================================ */

html[data-tutor-theme="dark"] {
	--dark-surface: #241934;
	--dark-surface-alt: #2E2145;
	--dark-surface-subtle: #2A1F3D;
	--dark-border: #4A3D63;
	--dark-text-heading: #F0E6FA;
	--dark-text-body: #D4C9E8;
	--dark-text-muted: #A99BC2;
	--dark-purple-accent: #9B72D4;
}

/* --- Course sidebar card --- */
html[data-tutor-theme="dark"] .tutor-sidebar-card {
	background-color: var(--dark-surface) !important;
	border-color: var(--dark-border) !important;
}
html[data-tutor-theme="dark"] .tutor-sidebar-card .tutor-btn-outline-primary {
	border-color: var(--dark-purple-accent) !important;
	color: var(--dark-purple-accent) !important;
}
html[data-tutor-theme="dark"] .tutor-sidebar-card .tutor-btn-outline-primary:hover {
	background-color: var(--dark-surface-alt) !important;
}
html[data-tutor-theme="dark"] .tutor-sidebar-card .tutor-progress-bar {
	background-color: var(--dark-surface-alt) !important;
}
html[data-tutor-theme="dark"] .tutor-sidebar-card .progress-percentage,
html[data-tutor-theme="dark"] .tutor-sidebar-card .tutor-course-single-pricing span,
html[data-tutor-theme="dark"] .tutor-sidebar-card h3,
html[data-tutor-theme="dark"] .tutor-sidebar-card .tutor-enrolled-info-date {
	color: var(--dark-text-heading) !important;
}
html[data-tutor-theme="dark"] .tutor-sidebar-card .tutor-card-footer .tutor-color-secondary {
	color: var(--dark-text-muted) !important;
}

/* --- Course details header --- */
html[data-tutor-theme="dark"] .tutor-course-details-title {
	color: var(--dark-text-heading) !important;
}
html[data-tutor-theme="dark"] .tutor-course-details-info a {
	background-color: var(--dark-surface-alt) !important;
	color: var(--dark-purple-accent) !important;
}
html[data-tutor-theme="dark"] .tutor-course-details-info a:hover {
	background-color: var(--dark-border) !important;
	color: var(--dark-text-heading) !important;
}
html[data-tutor-theme="dark"] .tutor-course-wishlist-btn.tutor-btn-ghost {
	border-color: var(--dark-border) !important;
	color: var(--dark-text-heading) !important;
}
html[data-tutor-theme="dark"] .tutor-course-wishlist-btn.tutor-btn-ghost:hover {
	background-color: var(--dark-surface-alt) !important;
}

/* --- Module / Topics accordion --- */
html[data-tutor-theme="dark"] .tutor-course-content-title {
	color: var(--dark-text-heading) !important;
}
html[data-tutor-theme="dark"] .tutor-accordion-item {
	border-color: var(--dark-border) !important;
}
html[data-tutor-theme="dark"] .tutor-accordion-item-header {
	background-color: var(--dark-surface) !important;
	color: var(--dark-text-heading) !important;
}
html[data-tutor-theme="dark"] .tutor-accordion-item-header.is-active,
html[data-tutor-theme="dark"] .tutor-accordion-item-header:hover {
	background-color: var(--dark-surface-alt) !important;
	border-color: var(--dark-border) !important;
}
html[data-tutor-theme="dark"] .tutor-accordion-item-header::after {
	border-color: var(--dark-purple-accent) !important;
}
html[data-tutor-theme="dark"] .tutor-course-content-list-item {
	border-color: var(--dark-border) !important;
}
html[data-tutor-theme="dark"] .tutor-course-content-list-item:hover {
	background-color: var(--dark-surface-alt) !important;
}
html[data-tutor-theme="dark"] .tutor-course-content-list-item-title a {
	color: var(--dark-text-heading) !important;
}
html[data-tutor-theme="dark"] .tutor-course-content-list-item-title a:hover {
	color: var(--dark-purple-accent) !important;
}
html[data-tutor-theme="dark"] .tutor-course-content-list-item-status {
	color: var(--dark-text-muted) !important;
}

/* --- Broad typography pass --- */
html[data-tutor-theme="dark"] body.single-courses,
html[data-tutor-theme="dark"] .tutor-course-details-page {
	background: linear-gradient(180deg, #1A1226 0%, #201830 35%, #1D1628 70%, #191323 100%) fixed !important;
}
html[data-tutor-theme="dark"] .tutor-tab-item h1,
html[data-tutor-theme="dark"] .tutor-tab-item h2,
html[data-tutor-theme="dark"] .tutor-tab-item h3,
html[data-tutor-theme="dark"] .tutor-tab-item h4 {
	color: var(--dark-text-heading) !important;
}
html[data-tutor-theme="dark"] .tutor-tab-item p {
	color: var(--dark-text-body) !important;
}
html[data-tutor-theme="dark"] .tutor-course-details-tab-nav .is-active,
html[data-tutor-theme="dark"] .tutor-course-details-tab-nav a.is-active {
	color: var(--dark-text-heading) !important;
}
html[data-tutor-theme="dark"] .tutor-course-details-tab-nav a:hover {
	color: var(--dark-purple-accent) !important;
}
html[data-tutor-theme="dark"] .tutor-single-course-sidebar-more h3,
html[data-tutor-theme="dark"] .tutor-single-course-sidebar-more h4 {
	color: var(--dark-text-heading) !important;
}
html[data-tutor-theme="dark"] .tutor-tab-item a:not(.tutor-btn) {
	color: var(--dark-purple-accent) !important;
}
html[data-tutor-theme="dark"] .tutor-tab-item a:not(.tutor-btn):hover {
	color: var(--dark-text-heading) !important;
}

/* --- Account settings page --- */
html[data-tutor-theme="dark"] .tutor-profile-settings-tab {
	background-color: var(--dark-surface) !important;
}
html[data-tutor-theme="dark"] .tutor-profile-settings-tab button[role="tab"]:hover {
	background-color: var(--dark-surface-alt) !important;
}
html[data-tutor-theme="dark"] .tutor-tab-panel input[type="text"],
html[data-tutor-theme="dark"] .tutor-tab-panel input[type="email"],
html[data-tutor-theme="dark"] .tutor-tab-panel input[type="tel"],
html[data-tutor-theme="dark"] .tutor-tab-panel select {
	background-color: var(--dark-surface) !important;
	border-color: var(--dark-border) !important;
	color: var(--dark-text-heading) !important;
}
html[data-tutor-theme="dark"] .tutor-tab-panel h1,
html[data-tutor-theme="dark"] .tutor-tab-panel h2,
html[data-tutor-theme="dark"] .tutor-tab-panel h3,
html[data-tutor-theme="dark"] .tutor-tab-panel h4,
html[data-tutor-theme="dark"] .tutor-tab-panel h5,
html[data-tutor-theme="dark"] .tutor-tab-panel label {
	color: var(--dark-text-heading) !important;
}
html[data-tutor-theme="dark"] .tutor-profile-header-close .tutor-btn:hover,
html[data-tutor-theme="dark"] .tutor-profile-header-close button:hover {
	background-color: var(--dark-surface-alt) !important;
}
html[data-tutor-theme="dark"] .tutor-profile-header-close svg,
html[data-tutor-theme="dark"] .tutor-profile-header-close [class*="tutor-icon"] {
	color: var(--dark-purple-accent) !important;
}

/* --- Dashboard header avatar --- */
html[data-tutor-theme="dark"] .tutor-dashboard-header-user-avatar.active,
html[data-tutor-theme="dark"] .tutor-dashboard-header-user-avatar:hover {
	box-shadow: 0 0 0 3px var(--dark-surface-alt) !important;
}

/* --- Dashboard stat cards --- */
html[data-tutor-theme="dark"] .tutor-stat-card {
	background-color: var(--dark-surface) !important;
	border-color: var(--dark-border) !important;
}
html[data-tutor-theme="dark"] .tutor-stat-card-title {
	color: var(--dark-text-muted) !important;
}
html[data-tutor-theme="dark"] .tutor-stat-card-value {
	color: var(--dark-text-heading) !important;
}
html[data-tutor-theme="dark"] .tutor-stat-card-value::after {
	color: var(--dark-text-muted) !important;
}
html[data-tutor-theme="dark"] .tutor-stat-card:nth-child(1) .tutor-stat-card-icon,
html[data-tutor-theme="dark"] .tutor-stat-card:nth-child(3) .tutor-stat-card-icon {
	background-color: var(--dark-surface-alt) !important;
	color: #C9A9F0 !important;
}
html[data-tutor-theme="dark"] .tutor-stat-card:nth-child(2) .tutor-stat-card-icon {
	background-color: #1F3A2A !important;
	color: #6FDB9C !important;
}
html[data-tutor-theme="dark"] .tutor-stat-card:nth-child(4) .tutor-stat-card-icon {
	background-color: #3D3320 !important;
	color: #F7C325 !important;
}
html[data-tutor-theme="dark"] .tutor-stat-card:nth-child(1)::after,
html[data-tutor-theme="dark"] .tutor-stat-card:nth-child(3)::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cpath d='M0,20 C50,2 50,38 100,20 C150,2 150,38 200,20 L200,40 L0,40 Z' fill='%232E2145'/%3E%3C/svg%3E") !important;
}
html[data-tutor-theme="dark"] .tutor-stat-card:nth-child(2)::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cpath d='M0,20 C50,2 50,38 100,20 C150,2 150,38 200,20 L200,40 L0,40 Z' fill='%231F3A2A'/%3E%3C/svg%3E") !important;
}
html[data-tutor-theme="dark"] .tutor-stat-card:nth-child(4)::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cpath d='M0,20 C50,2 50,38 100,20 C150,2 150,38 200,20 L200,40 L0,40 Z' fill='%233D3320'/%3E%3C/svg%3E") !important;
}

/* --- New dashboard blocks: banner, quote, keep-growing widget --- */
html[data-tutor-theme="dark"] .onenglish-progress-banner {
	background: linear-gradient(90deg, var(--dark-surface) 0%, var(--dark-surface-subtle) 100%) !important;
}
html[data-tutor-theme="dark"] .onenglish-progress-banner-icon {
	background-color: var(--dark-surface-alt) !important;
}
html[data-tutor-theme="dark"] .onenglish-progress-banner-text h4 {
	color: var(--dark-text-heading) !important;
}
html[data-tutor-theme="dark"] .onenglish-progress-banner-text p {
	color: var(--dark-text-body) !important;
}
html[data-tutor-theme="dark"] .onenglish-dashboard-quote {
	color: var(--dark-text-muted) !important;
}
html[data-tutor-theme="dark"] .onenglish-quote-author {
	color: var(--dark-purple-accent) !important;
}
html[data-tutor-theme="dark"] .onenglish-keep-growing-widget {
	background-color: var(--dark-surface) !important;
	border-color: var(--dark-border) !important;
}
html[data-tutor-theme="dark"] .onenglish-keep-growing-widget h5 {
	color: var(--dark-text-heading) !important;
}
html[data-tutor-theme="dark"] .onenglish-keep-growing-widget p {
	color: var(--dark-text-muted) !important;
}

/* --- Enrolled courses card --- */
html[data-tutor-theme="dark"] .tutor-progress-card {
	background-color: var(--dark-surface) !important;
	border-color: var(--dark-border) !important;
}
html[data-tutor-theme="dark"] .tutor-progress-card-category {
	background-color: var(--dark-surface-alt) !important;
	color: var(--dark-purple-accent) !important;
}
html[data-tutor-theme="dark"] .tutor-progress-card-title {
	color: var(--dark-text-heading) !important;
}
html[data-tutor-theme="dark"] .tutor-progress-card-details {
	color: var(--dark-text-muted) !important;
}
html[data-tutor-theme="dark"] .tutor-progress-card-bar,
html[data-tutor-theme="dark"] .tutor-progress-card-bar .tutor-progress-bar {
	background-color: var(--dark-surface-alt) !important;
}

/* --- Visual identity pass, description panel and pills --- */
html[data-tutor-theme="dark"] #tutor-course-details-tab-info {
	background: rgba(46, 33, 69, 0.55) !important;
	border-color: rgba(74, 61, 99, 0.8) !important;
}
html[data-tutor-theme="dark"] .tutor-sidebar-card .tutor-card-footer .tutor-ul li {
	background-color: var(--dark-surface-alt) !important;
	color: var(--dark-text-heading) !important;
}

/* --- Sidebar simplification pass, Total Enrolled bar --- */
html[data-tutor-theme="dark"] .tutor-card-footer li:has(.tutor-icon-mortarboard) {
	background-color: var(--dark-surface) !important;
}
html[data-tutor-theme="dark"] .tutor-card-footer li:has(.tutor-icon-mortarboard) span,
html[data-tutor-theme="dark"] .tutor-card-footer li:has(.tutor-icon-mortarboard) [class*="tutor-icon-"] {
	color: var(--dark-text-heading) !important;
}

/* --- Lesson player, left sidebar course content list --- */
html[data-tutor-theme="dark"] .tutor-course-single-sidebar-title {
	color: var(--dark-text-heading) !important;
}
html[data-tutor-theme="dark"] .tutor-course-topic {
	border-color: var(--dark-border) !important;
}
html[data-tutor-theme="dark"] .tutor-learning-progress {
	border-color: var(--dark-border) !important;
}
html[data-tutor-theme="dark"] .tutor-learning-progress-text {
	color: var(--dark-text-heading) !important;
}
html[data-tutor-theme="dark"] .tutor-learning-progress .tutor-progress-bar {
	background-color: var(--dark-surface-alt) !important;
}
html[data-tutor-theme="dark"] .tutor-course-topic .tutor-accordion-item-header.is-active {
	background-color: var(--dark-surface-alt) !important;
	border-left-color: var(--dark-purple-accent) !important;
}
html[data-tutor-theme="dark"] .tutor-course-topic-title {
	color: var(--dark-text-heading) !important;
}
html[data-tutor-theme="dark"] .tutor-course-topic-summary {
	background-color: var(--dark-surface-alt) !important;
	color: var(--dark-purple-accent) !important;
}
html[data-tutor-theme="dark"] .tutor-course-topic-item.is-active {
	background-color: var(--dark-surface-subtle) !important;
}
html[data-tutor-theme="dark"] .tutor-course-topic-item.is-active .tutor-course-topic-item-title {
	color: var(--dark-text-heading) !important;
}
html[data-tutor-theme="dark"] .tutor-course-topic-item-icon {
	color: var(--dark-purple-accent) !important;
}

/* --- Lesson navigation buttons --- */
html[data-tutor-theme="dark"] .tutor-course-topic-single-footer .tutor-btn-secondary {
	border-color: var(--dark-border) !important;
	color: var(--dark-text-heading) !important;
}
html[data-tutor-theme="dark"] .tutor-course-topic-single-footer .tutor-btn-secondary:hover {
	background-color: var(--dark-surface-alt) !important;
}

/* --- Lesson header title and back button --- */
html[data-tutor-theme="dark"] .tutor-learning-header-title {
	color: var(--dark-text-heading) !important;
}
html[data-tutor-theme="dark"] .tutor-learning-header-back,
html[data-tutor-theme="dark"] .tutor-learning-header-back button,
html[data-tutor-theme="dark"] .tutor-learning-header-back a {
	background-color: var(--dark-surface-alt) !important;
	color: var(--dark-purple-accent) !important;
}
html[data-tutor-theme="dark"] .tutor-learning-header-back:hover,
html[data-tutor-theme="dark"] .tutor-learning-header-back button:hover,
html[data-tutor-theme="dark"] .tutor-learning-header-back a:hover {
	background-color: var(--dark-border) !important;
}

/* --- Hardcoded near-black text (rgb(22,22,22)) that Tutor uses as its
   default heading/text color, invisible against dark backgrounds.
   Confirmed spots: Account Settings page heading, course filter
   dropdown items, live quiz intro title, and quiz summary/details
   headings ("Module 2 Quiz", "Quiz Questions", "Review Your Answers").
   These share generic Tutor utility/component classes, so one rule
   covers all four and any other page reusing the same components. --- */
html[data-tutor-theme="dark"] .tutor-profile-header-title,
html[data-tutor-theme="dark"] .tutor-nav-dropdown-item,
html[data-tutor-theme="dark"] .tutor-quiz-intro-title,
html[data-tutor-theme="dark"] .tutor-quiz-summary-page h1,
html[data-tutor-theme="dark"] .tutor-quiz-summary-page h2,
html[data-tutor-theme="dark"] .tutor-quiz-summary-page h3,
html[data-tutor-theme="dark"] .tutor-quiz-summary-page h4,
html[data-tutor-theme="dark"] .tutor-h2,
html[data-tutor-theme="dark"] .tutor-h3 {
	color: var(--dark-text-heading) !important;
}
html[data-tutor-theme="dark"] .tutor-nav-dropdown-item:hover {
	background-color: var(--dark-surface-alt) !important;
}

/* Raw pasted iframe embeds (e.g. <iframe width="800" height="450">)
   have hardcoded width/height attributes that override plain
   max-width/height CSS. aspect-ratio forces the correct proportions
   once height is freed, working even against inline HTML attributes. */
.tutor-lesson-wrapper iframe {
	max-width: 100% !important;
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 16 / 9 !important;
}

/* ============================================
   Lesson content media overflow fix
   Videos (iframe/video embeds) and images inside the lesson content
   area were rendering at native width, overflowing past the mobile
   viewport edge. Force them to scale down to the container width.
   ============================================ */
.tutor-course-single-content-wrapper img,
.tutor-course-single-content-wrapper video,
.tutor-course-single-content-wrapper iframe,
.tutor-course-single-content-wrapper embed,
.tutor-course-single-content-wrapper object {
	max-width: 100% !important;
	height: auto !important;
}

/* Video embeds specifically (YouTube/Vimeo iframes etc.) often come
   with fixed width/height attributes set inline by the embed code
   itself, which the rule above can't override since inline HTML
   attributes beat external stylesheets. Wrap them in a responsive
   16:9 box instead so the iframe's own width/height attributes don't
   matter. Tutor typically wraps embeds in one of these containers: */
.tutor-course-single-content-wrapper .wp-block-embed__wrapper,
.tutor-course-single-content-wrapper .tutor-video-player,
.tutor-course-single-content-wrapper .video-embed-wrapper {
	position: relative !important;
	width: 100% !important;
	padding-bottom: 56.25% !important;
	height: 0 !important;
	overflow: hidden !important;
}
.tutor-course-single-content-wrapper .wp-block-embed__wrapper iframe,
.tutor-course-single-content-wrapper .tutor-video-player iframe,
.tutor-course-single-content-wrapper .video-embed-wrapper iframe {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
}

/* Belt-and-suspenders: prevent the whole content wrapper itself from
   ever causing horizontal scroll, in case something inside it still
   doesn't respect max-width */
.tutor-course-single-content-wrapper {
	overflow-x: hidden !important;
}

/* ============================================
   Exercise file attachment cards: file-type icons
   Tutor renders the same generic document SVG icon for every
   attachment regardless of type. This hides that SVG and shows a
   file-type-specific icon instead, based on the download link's
   file extension, so a PDF looks different from a Word doc, image,
   or zip at a glance. Quick visual win; a true content thumbnail
   (rendering the actual first page/image) would need a separate,
   heavier build (server-side PDF thumbnailing or PDF.js), worth
   doing later if this isn't enough.
   ============================================ */
.tutor-attachment-card-icon svg {
	display: none !important;
}
.tutor-attachment-card-icon::before {
	content: "📄";
	font-size: 1.8rem;
	line-height: 1;
}
.tutor-attachment-card:has(a[href$=".pdf" i]) .tutor-attachment-card-icon::before {
	content: "📕";
}
.tutor-attachment-card:has(a[href$=".doc" i]) .tutor-attachment-card-icon::before,
.tutor-attachment-card:has(a[href$=".docx" i]) .tutor-attachment-card-icon::before {
	content: "📘";
}
.tutor-attachment-card:has(a[href$=".xls" i]) .tutor-attachment-card-icon::before,
.tutor-attachment-card:has(a[href$=".xlsx" i]) .tutor-attachment-card-icon::before,
.tutor-attachment-card:has(a[href$=".csv" i]) .tutor-attachment-card-icon::before {
	content: "📗";
}
.tutor-attachment-card:has(a[href$=".ppt" i]) .tutor-attachment-card-icon::before,
.tutor-attachment-card:has(a[href$=".pptx" i]) .tutor-attachment-card-icon::before {
	content: "📙";
}
.tutor-attachment-card:has(a[href$=".zip" i]) .tutor-attachment-card-icon::before,
.tutor-attachment-card:has(a[href$=".rar" i]) .tutor-attachment-card-icon::before {
	content: "🗜️";
}
.tutor-attachment-card:has(a[href$=".jpg" i]) .tutor-attachment-card-icon::before,
.tutor-attachment-card:has(a[href$=".jpeg" i]) .tutor-attachment-card-icon::before,
.tutor-attachment-card:has(a[href$=".png" i]) .tutor-attachment-card-icon::before,
.tutor-attachment-card:has(a[href$=".gif" i]) .tutor-attachment-card-icon::before,
.tutor-attachment-card:has(a[href$=".webp" i]) .tutor-attachment-card-icon::before {
	content: "🖼️";
}
.tutor-attachment-card:has(a[href$=".mp4" i]) .tutor-attachment-card-icon::before,
.tutor-attachment-card:has(a[href$=".mov" i]) .tutor-attachment-card-icon::before {
	content: "🎬";
}
.tutor-attachment-card:has(a[href$=".mp3" i]) .tutor-attachment-card-icon::before,
.tutor-attachment-card:has(a[href$=".wav" i]) .tutor-attachment-card-icon::before {
	content: "🎵";
}
.tutor-attachment-card:has(a[href$=".txt" i]) .tutor-attachment-card-icon::before {
	content: "📃";
}

/* ============================================
   Course info page cleanup
   ============================================ */

/* Hide "by Hatim" author byline under the course title */
.tutor-course-intro .tutor-medium.tutor-sm-text-small.tutor-text-secondary.tutor-mt-4.tutor-mb-6 {
	display: none !important;
}

/* Info table: hide Instructors (row 1) and Level (row 4), keeping
   Categories, Total Enrolled, Student Ratings, Resources in place.
   Tutor renders this table in a fixed row order, so position-based
   hiding is reliable without touching the template. */
.tutor-course-info-table tr:nth-child(1),
.tutor-course-info-table tr:nth-child(4) {
	display: none !important;
}

/* Student Ratings row: no override, real computed average is shown
   as-is (currently 0.0 until actual course reviews exist). */
   Root cause: Elementor's Global Kit (elementor-kit-3068) has rules
   targeting bare button/input[type=button|submit]/.elementor-button
   AND bare <a> tags site-wide, not just its own widgets. This beats
   Tutor's own button-variant classes on specificity, so every native
   Tutor button/link was getting Elementor's forced background/color
   regardless of whether Tutor intended it solid (primary) or
   transparent (ghost/outline/link/icon).

   Two different fixes are needed depending on the button's intended
   style, forcing one blanket color onto everything broke the ghost/
   icon buttons (e.g. the lesson-page back arrow went invisible: white
   icon color forced onto what should be a transparent background).

   Block A: primary-style buttons (Continue Lesson, Details, etc.)
   should be solid purple with white text, set explicitly here so it
   no longer depends on whatever Elementor's kit happens to resolve.

   Block B: ghost/outline/link/icon buttons (back arrow, discussion
   filters, etc.) should stay transparent per Tutor's own design,
   unset removes Elementor's forced background/border/color entirely
   and lets Tutor's own CSS variables paint them correctly.
   ============================================ */

/* Block A: primary buttons, solid purple + white text */
.tutor-frontend .tutor-btn-primary,
.tutor-dashboard .tutor-btn-primary,
.tutor-modal .tutor-btn-primary,
.tutor-quiz-wrapper .tutor-btn-primary,
.tutor-course-single-content-wrapper .tutor-btn-primary {
	background-color: #2D0A52 !important;
	border-color: #2D0A52 !important;
	color: #ffffff !important;
}

/* Sitewide belt-and-suspenders: Block A above is scoped to specific
   container classes, which can miss instances elsewhere (confirmed:
   a quiz summary modal outside those containers still showed black
   text). This unscoped version guarantees .tutor-btn-primary text is
   always white regardless of which container it's rendered inside,
   closing the gap for good rather than patching container by
   container as new instances turn up. */
a.tutor-btn-primary,
button.tutor-btn-primary,
.tutor-btn-primary {
	color: #ffffff !important;
}

/* Block B: ghost / outline / link / icon buttons, stay transparent */
.tutor-frontend .tutor-btn-ghost,
.tutor-frontend .tutor-btn-outline,
.tutor-frontend .tutor-btn-link,
.tutor-frontend .tutor-btn-icon,
.tutor-dashboard .tutor-btn-ghost,
.tutor-dashboard .tutor-btn-outline,
.tutor-dashboard .tutor-btn-link,
.tutor-dashboard .tutor-btn-icon,
.tutor-modal .tutor-btn-ghost,
.tutor-modal .tutor-btn-outline,
.tutor-modal .tutor-btn-link,
.tutor-modal .tutor-btn-icon,
.tutor-quiz-wrapper .tutor-btn-ghost,
.tutor-quiz-wrapper .tutor-btn-outline,
.tutor-quiz-wrapper .tutor-btn-link,
.tutor-quiz-wrapper .tutor-btn-icon,
.tutor-course-single-content-wrapper .tutor-btn-ghost,
.tutor-course-single-content-wrapper .tutor-btn-outline,
.tutor-course-single-content-wrapper .tutor-btn-link,
.tutor-course-single-content-wrapper .tutor-btn-icon {
	background-color: unset !important;
	color: unset !important;
	border-color: unset !important;
	border-style: unset !important;
	border-width: unset !important;
}

/* Overview / Exercise Files tab buttons: same Elementor global-kit
   override, but these don't carry .tutor-btn-* classes so they
   weren't caught by Block A/B above. Unset lets Tutor's own tab
   styling (active underline, colors) take back over. */
.tutor-frontend .tutor-tabs-tab,
.tutor-frontend .tutor-tabs-tab-active,
.tutor-dashboard .tutor-tabs-tab,
.tutor-dashboard .tutor-tabs-tab-active {
	background-color: unset !important;
	border-color: unset !important;
	border-style: unset !important;
	border-width: unset !important;
	border-radius: unset !important;
	color: unset !important;
}

/* ============================================
   Quiz results page, "Continue Lesson" button
   Real confirmed class from inspecting live element:
   .tutor-learning-area-footer a.tutor-btn.tutor-btn-primary
   Not covered by earlier button rules since this button
   lives outside .tutor-sidebar-card / .tutor-tab-panel / etc.
   ============================================ */
.tutor-learning-area-footer .tutor-btn-primary,
.tutor-learning-area-footer .tutor-btn-primary * {
	color: #ffffff !important;
}

/* ============================================
   Dashboard stat cards, real mobile fix
   Confirmed via inspection: the stats wrapper is a CSS Grid
   (.tutor-grid.tutor-sm-grid-cols-2.tutor-grid-cols-4), not flex.
   tutor-grid-cols-4 wins by default below Tutor's own "sm" breakpoint,
   which is wider than typical phone screens, squeezing 4 cards into
   a narrow width and clipping the card titles.
   Force 2 columns explicitly on phone-width screens.
   ============================================ */
@media (max-width: 767px) {
	.tutor-student-dashboard-stats .tutor-grid-cols-4 {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}