/*
 Theme Name: TNT Driving School GeneratePress Child
 Theme URI: https://lms.tntdriveschool.com/
 Description: GeneratePress child theme for the TNT Driving School LMS.
 Author: TNT Driving School
 Template: generatepress
 Version: 1.8.7
 Text Domain: tnt-generatepress-child
*/

:root {
	--tnt-red: #b00e23;
	--tnt-red-hover: #880b1b;
	--tnt-ink: #1d1d1f;
	--tnt-muted: #626a73;
	--tnt-border: #dfe3e8;
	--tnt-surface: #ffffff;
	--tnt-page: #f5f6f7;
	--tnt-radius: 8px;
	--tnt-shadow: 0 8px 28px rgba(17, 24, 39, 0.09);
}

body {
	background: var(--tnt-page);
	color: var(--tnt-ink);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/*
 * Reading lessons become eligible for completion after the required view time
 * and complete when the student leaves. Hide only Tutor's unfinished action;
 * its native green completed state remains.
 */
body.single-lesson .tutor-mark-as-complete-button:not(.completed) {
	display: none !important;
}

body.single-lesson .tutor-mark-as-complete-button.completed {
	display: inline-flex !important;
}

/* Tutor's auxiliary sidebar footer adds an empty "More" card and a second
 * collapse control below the curriculum. The player header already provides
 * the responsive course-menu control, so these duplicates are unnecessary. */
body.single-lesson .tutor-learning-sidebar-pages,
body.single-tutor_quiz .tutor-learning-sidebar-pages,
body.single-lesson .tutor-expand-btn,
body.single-tutor_quiz .tutor-expand-btn {
	display: none !important;
}

/* --------------------------------------------------------------------------
 * Student-safe failed quiz results
 * ----------------------------------------------------------------------- */

body.single-tutor_quiz .tutor-quiz-item-result .tutor-badge {
	display: inline-flex !important;
	opacity: 1 !important;
	visibility: visible !important;
}

body.single-tutor_quiz .tutor-quiz-details-btn,
body.single-tutor_quiz .tutor-quiz-item-result-more,
body.single-tutor_quiz .tutor-quiz-item-buttons,
body.single-tutor_quiz .tutor-student-attempt-detail {
	display: none !important;
}

body.single-tutor_quiz a.tutor-quiz-item-info-title[href*="action=view_details"],
body.single-tutor_quiz .tnt-quiz-review-disabled {
	pointer-events: none !important;
	cursor: default !important;
	color: inherit !important;
	text-decoration: none !important;
}

body.single-tutor_quiz .tutor-learning-area-footer.tnt-failed-quiz-actions {
	display: block !important;
	padding-top: 18px;
}

body.single-tutor_quiz .tnt-failed-quiz-actions .tnt-quiz-retry-secondary {
	display: none !important;
}

body.single-tutor_quiz .tnt-failed-quiz-actions .tnt-quiz-retry-primary {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 100% !important;
	min-height: 54px;
	border: 1px solid var(--tnt-red) !important;
	border-radius: 9px !important;
	background: var(--tnt-red) !important;
	box-shadow: 0 8px 20px rgba(176, 14, 35, 0.18);
	color: #fff !important;
	font-size: 17px;
	font-weight: 750;
	transition: background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

body.single-tutor_quiz .tnt-failed-quiz-actions .tnt-quiz-retry-primary:hover,
body.single-tutor_quiz .tnt-failed-quiz-actions .tnt-quiz-retry-primary:focus {
	background: var(--tnt-red-hover) !important;
	box-shadow: 0 10px 24px rgba(136, 11, 27, 0.24);
	transform: translateY(-1px);
}

/* Tutor renders the submitted action dynamically, so the safety script adds
 * this class as soon as the modal appears. Keep the action unmistakably
 * legible and consistent with the rest of the TNT interface. */
body.single-tutor_quiz .tnt-quiz-view-results,
body.single-tutor_quiz .tnt-quiz-view-results:visited,
body.single-tutor_quiz .tnt-quiz-view-results * {
	color: #fff !important;
}

body.single-tutor_quiz .tnt-quiz-view-results {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 54px;
	border: 1px solid var(--tnt-red) !important;
	border-radius: 10px !important;
	background: linear-gradient(135deg, var(--tnt-red) 0%, #ca1d35 100%) !important;
	box-shadow: 0 10px 24px rgba(176, 14, 35, 0.22);
	font-weight: 750;
	text-decoration: none !important;
	transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

body.single-tutor_quiz .tnt-quiz-view-results:hover,
body.single-tutor_quiz .tnt-quiz-view-results:focus {
	background: var(--tnt-red-hover) !important;
	box-shadow: 0 12px 28px rgba(136, 11, 27, 0.28);
	color: #fff !important;
	transform: translateY(-1px);
}

/* --------------------------------------------------------------------------
 * Modern quiz overview
 * ----------------------------------------------------------------------- */

body.single-tutor_quiz .tutor-quiz-intro {
	padding: clamp(16px, 2vw, 28px);
	border: 1px solid #e1e5e9;
	border-top: 5px solid var(--tnt-red);
	border-radius: 18px;
	background: rgba(255, 255, 255, 0.98);
	box-shadow: 0 20px 55px rgba(17, 24, 39, 0.09);
}

body.single-tutor_quiz .tutor-quiz-intro-overview {
	display: grid;
	grid-template-columns: minmax(150px, 220px) minmax(0, 1fr);
	align-items: center;
	gap: clamp(20px, 3vw, 42px);
	min-height: 190px;
	padding: clamp(20px, 2.4vw, 34px);
	border: 1px solid #ece1e3;
	border-radius: 15px;
	background:
		radial-gradient(circle at 16% 20%, rgba(176, 14, 35, 0.10), transparent 15rem),
		linear-gradient(135deg, #fff8f9 0%, #fff 72%);
}

body.single-tutor_quiz .tutor-quiz-intro-icon {
	width: 100%;
	height: 150px;
	min-height: 0;
	border-radius: 13px;
	background-color: rgba(176, 14, 35, 0.035);
}

body.single-tutor_quiz .tutor-quiz-intro-title {
	margin: 0;
	color: #171c26;
	font-size: clamp(30px, 2.5vw, 42px);
	font-weight: 800;
	letter-spacing: -0.035em;
	line-height: 1.08;
}

body.single-tutor_quiz .tutor-quiz-intro-title::before {
	display: block;
	margin-bottom: 12px;
	color: var(--tnt-red);
	content: "Quiz overview";
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.13em;
	line-height: 1;
	text-transform: uppercase;
}

body.single-tutor_quiz .tutor-quiz-intro-params {
	display: none !important;
}

body.single-tutor_quiz .tutor-quiz-attempts {
	margin-top: 22px;
	border-color: #e1e5e9 !important;
	border-radius: 14px !important;
	background: #fff;
	box-shadow: 0 12px 30px rgba(17, 24, 39, 0.065);
	overflow: hidden;
}

body.single-tutor_quiz .tutor-quiz-attempts-header {
	background: linear-gradient(180deg, #fafbfc 0%, #f5f6f8 100%);
}

body.single-tutor_quiz .tutor-quiz-attempts-header-item {
	color: #596273;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

body.single-tutor_quiz .tutor-quiz-attempts-item-wrapper {
	transition: background-color 150ms ease;
}

body.single-tutor_quiz .tutor-quiz-attempts-item-wrapper:hover {
	background: #fffafb;
}

body.single-tutor_quiz .tutor-quiz-item-info-title {
	color: #1d2430;
	font-weight: 750;
}

body.single-tutor_quiz .tutor-learning-area-footer {
	margin-top: 20px;
}

/* --------------------------------------------------------------------------
 * Modern active quiz experience
 * ----------------------------------------------------------------------- */

body.single-tutor_quiz .tutor-quiz-submission {
	min-height: 100dvh;
	background:
		radial-gradient(circle at 15% 18%, rgba(176, 14, 35, 0.055), transparent 24rem),
		radial-gradient(circle at 88% 72%, rgba(176, 14, 35, 0.035), transparent 28rem),
		linear-gradient(180deg, #fafbfc 0%, #f5f7f9 100%);
}

body.single-tutor_quiz .tutor-quiz-header {
	border-bottom: 1px solid #e6e9ed;
	background: rgba(255, 255, 255, 0.96);
	box-shadow: 0 8px 30px rgba(17, 24, 39, 0.065);
	backdrop-filter: blur(14px);
}

body.single-tutor_quiz .tutor-quiz-progress,
body.single-tutor_quiz .tutor-quiz-questions,
body.single-tutor_quiz .tutor-quiz-question-meta,
body.single-tutor_quiz .tutor-quiz-footer-inner {
	max-width: 1120px !important;
}

body.single-tutor_quiz .tutor-quiz-progress {
	gap: 14px;
	padding: 16px 24px 18px;
}

body.single-tutor_quiz .tutor-quiz-progress-title {
	color: #171c26;
	font-size: clamp(20px, 1.4vw, 24px);
	font-weight: 800;
	letter-spacing: -0.025em;
}

body.single-tutor_quiz .tutor-quiz-progress-header > .tutor-btn {
	min-height: 42px;
	padding: 9px 18px;
	border: 1px solid #dfe3e8;
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 5px 14px rgba(17, 24, 39, 0.055);
	color: #303743;
	font-weight: 700;
	transition: border-color 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

body.single-tutor_quiz .tutor-quiz-progress-header > .tutor-btn:hover,
body.single-tutor_quiz .tutor-quiz-progress-header > .tutor-btn:focus {
	border-color: rgba(176, 14, 35, 0.38);
	box-shadow: 0 7px 18px rgba(176, 14, 35, 0.10);
	color: var(--tnt-red);
	transform: translateY(-1px);
}

body.single-tutor_quiz .tutor-quiz-progress-bar-wrapper .tutor-progress-bar {
	height: 8px;
	border-radius: 999px;
	background: #e1e5e9;
}

body.single-tutor_quiz .tutor-quiz-progress-bar-wrapper .tutor-progress-bar-fill {
	border-radius: 999px;
	background: linear-gradient(90deg, var(--tnt-red) 0%, #db3850 100%) !important;
	box-shadow: 0 3px 10px rgba(176, 14, 35, 0.22);
}

body.single-tutor_quiz .tutor-quiz-question {
	position: relative;
	gap: 26px;
	padding: clamp(28px, 2.5vw, 40px);
	border: 1px solid #e0e4e8;
	border-radius: 18px;
	background: rgba(255, 255, 255, 0.98);
	box-shadow: 0 22px 58px rgba(17, 24, 39, 0.10);
	overflow: hidden;
}

body.single-tutor_quiz .tutor-quiz-question::before {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: 5px;
	background: linear-gradient(90deg, var(--tnt-red) 0%, #dc4056 60%, #f1b8c0 100%);
	content: "";
}

body.single-tutor_quiz .tutor-quiz-question-title {
	color: #181d27;
	font-size: clamp(20px, 1.45vw, 24px);
	font-weight: 780;
	letter-spacing: -0.02em;
	line-height: 1.35;
}

body.single-tutor_quiz .tutor-quiz-question-options {
	gap: 14px;
}

body.single-tutor_quiz .tutor-quiz-question-option {
	min-height: 58px;
	border: 1px solid #dfe3e8;
	border-radius: 12px;
	background: #fafbfc;
	box-shadow: 0 3px 10px rgba(17, 24, 39, 0.025);
	color: #303743;
	font-size: 16px;
	font-weight: 550;
	line-height: 1.45;
	transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease, color 160ms ease, transform 160ms ease;
}

body.single-tutor_quiz .tutor-quiz-question-option:hover:not(:has(:checked)):not(:has(:disabled)):not([data-readonly="true"]):not([data-option="correct"]):not([data-option="incorrect"]):not([data-option="draggable"]),
body.single-tutor_quiz .tutor-quiz-question-option:focus:not(:has(:checked)):not(:has(:disabled)):not([data-readonly="true"]):not([data-option="correct"]):not([data-option="incorrect"]):not([data-option="draggable"]) {
	border-color: rgba(176, 14, 35, 0.42);
	background: #fff7f8;
	box-shadow: 0 8px 20px rgba(176, 14, 35, 0.08);
	transform: translateY(-1px);
}

body.single-tutor_quiz .tutor-quiz-question-option:has(:checked) {
	border-color: var(--tnt-red);
	background: #fff0f2;
	box-shadow: 0 0 0 1px var(--tnt-red), 0 9px 22px rgba(176, 14, 35, 0.11);
	color: var(--tnt-red);
	font-weight: 700;
}

body.single-tutor_quiz .tutor-quiz-question-option:has(:checked) .tutor-label,
body.single-tutor_quiz .tutor-quiz-question-option:has(:checked) label {
	color: var(--tnt-red);
}

body.single-tutor_quiz .tutor-quiz-footer {
	border-top: 1px solid #e1e5e9;
	background: rgba(255, 255, 255, 0.95);
	box-shadow: 0 -12px 32px rgba(17, 24, 39, 0.075);
	backdrop-filter: blur(14px);
}

body.single-tutor_quiz .tutor-quiz-footer-inner {
	padding-right: 22px;
	padding-left: 22px;
}

body.single-tutor_quiz .tutor-quiz-footer .tutor-btn {
	min-height: 48px;
	border-radius: 10px;
	font-size: 16px;
	font-weight: 750;
	transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, color 160ms ease, transform 160ms ease;
}

body.single-tutor_quiz .tutor-quiz-answer-next-btn:not(:disabled),
body.single-tutor_quiz .tutor-quiz-submit-btn:not(:disabled) {
	border-color: var(--tnt-red) !important;
	background: linear-gradient(135deg, var(--tnt-red) 0%, #ca1d35 100%) !important;
	box-shadow: 0 8px 20px rgba(176, 14, 35, 0.20);
	color: #fff !important;
}

body.single-tutor_quiz .tutor-quiz-answer-next-btn:not(:disabled):hover,
body.single-tutor_quiz .tutor-quiz-answer-next-btn:not(:disabled):focus,
body.single-tutor_quiz .tutor-quiz-submit-btn:not(:disabled):hover,
body.single-tutor_quiz .tutor-quiz-submit-btn:not(:disabled):focus {
	background: var(--tnt-red-hover) !important;
	box-shadow: 0 10px 24px rgba(136, 11, 27, 0.26);
	transform: translateY(-1px);
}

body.single-tutor_quiz .tutor-quiz-previous-btn {
	border: 1px solid #dfe3e8;
	background: #fff;
	color: #303743;
}

body.single-tutor_quiz .tutor-quiz-previous-btn:hover,
body.single-tutor_quiz .tutor-quiz-previous-btn:focus {
	border-color: rgba(176, 14, 35, 0.38);
	color: var(--tnt-red);
	box-shadow: 0 7px 18px rgba(176, 14, 35, 0.09);
}

a {
	color: var(--tnt-red);
}

a:hover,
a:focus {
	color: var(--tnt-red-hover);
}

.site-header,
.main-navigation,
.site-footer {
	background: var(--tnt-surface);
}

.site-header {
	border-bottom: 1px solid var(--tnt-border);
}

.site-header .inside-header {
	padding: 18px 30px;
}

.site-logo img,
.site-header .header-image {
	width: auto;
	max-width: 230px;
	height: auto;
}

/* GeneratePress may still render the tagline even when its Customizer toggle is set. */
.site-description {
	display: none !important;
}

.main-navigation {
	border-bottom: 1px solid var(--tnt-border);
}

.main-navigation .main-nav ul li a,
.menu-toggle {
	color: var(--tnt-ink);
	font-weight: 650;
}

.main-navigation .main-nav ul li:hover > a,
.main-navigation .main-nav ul li:focus-within > a,
.main-navigation .main-nav ul li[class*="current-menu-"] > a {
	background: transparent;
	color: var(--tnt-red);
}

.tnt-status-band {
	padding: 0 20px 1px;
	background: var(--tnt-surface);
	border-bottom: 1px solid var(--tnt-border);
}

.tnt-status-band > * {
	margin-left: auto !important;
	margin-right: auto !important;
}

.site-content {
	padding: 36px 24px;
}

.content-area,
.site-main {
	min-width: 0;
}

.inside-article {
	border-radius: var(--tnt-radius);
	box-shadow: var(--tnt-shadow);
}

.home .site-content {
	padding-top: 32px;
}

.home .entry-header {
	display: none;
}

.home .entry-content {
	margin-top: 0;
}

.home .inside-article {
	max-width: 720px;
	margin: 0 auto;
}

.home h2 {
	margin-top: 0;
	text-align: center;
}

.login-form-wrap {
	max-width: 520px !important;
	margin: 0 auto;
	padding: 40px 32px 32px;
	background: var(--tnt-surface);
	border: 1px solid var(--tnt-border);
	border-radius: var(--tnt-radius);
	box-shadow: var(--tnt-shadow);
}

.login-form-wraper {
	padding: 0;
}

h2.form-title {
	margin: 0 0 30px;
	font-size: 1.25rem;
}

.tml-login form .tml-log-wrap label,
.tml-login form .tml-pwd-wrap label {
	display: none;
}

.tml-login form .tml-log-wrap input,
.tml-login form .tml-pwd-wrap input {
	display: block;
	width: 100%;
	height: auto;
	padding: 11px 14px;
	border: 1px solid var(--tnt-border) !important;
	border-radius: 6px;
	background: var(--tnt-surface);
	box-shadow: none;
	box-sizing: border-box;
	color: var(--tnt-ink);
	font-size: 16px;
	line-height: 1.4;
}

.tml-login form input:focus {
	border-color: var(--tnt-red) !important;
	box-shadow: 0 0 0 3px rgba(176, 14, 35, 0.14);
	outline: 0;
}

.tml-login button.tml-button,
.tutor-btn-primary,
button.tutor-btn-primary,
input.tutor-btn-primary {
	width: 100%;
	min-height: 42px;
	padding: 9px 16px;
	border: 0;
	border-radius: 6px;
	background: var(--tnt-red);
	color: #fff;
	font-size: 16px;
	font-weight: 650;
	cursor: pointer;
}

.tml-login button.tml-button:hover,
.tml-login button.tml-button:focus,
.tutor-btn-primary:hover,
.tutor-btn-primary:focus {
	background: var(--tnt-red-hover);
	color: #fff;
}

.tml-field-wrap.tml-rememberme-wrap {
	display: flex;
	align-items: center;
	gap: 10px;
}

.tml-field-wrap.tml-rememberme-wrap label {
	font-weight: 500;
}

.tml-field-wrap.tml-rememberme-wrap input {
	width: 22px;
	height: 22px;
	margin: 0;
}

ul.tml-links,
.tutor-fs-5 {
	display: none;
}

.single-courses .tutor-course-details-top {
	display: none;
}

.single-courses .site-content,
.tutor-wrap .site-content {
	padding-left: 20px;
	padding-right: 20px;
}

.tutor-wrap,
.tutor-course-details-page,
.tutor-dashboard {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
}

.tutor-single-course-sidebar-more .tutor-course-details-instructors a {
	pointer-events: none;
	text-decoration: none;
}

table.tutor-table thead tr th:last-child,
table.tutor-table tbody tr td:last-child {
	display: none;
}

.gform-theme {
	--gf-ctrl-btn-bg-color-primary: var(--tnt-red) !important;
	--gf-ctrl-btn-color-primary: #fff !important;
	--gf-ctrl-btn-bg-color-hover-primary: var(--tnt-red-hover) !important;
	--gf-ctrl-choice-check-color: var(--tnt-red) !important;
	--gf-ctrl-choice-bg-color-checked: var(--tnt-red) !important;
}

.site-info {
	background: #202428;
	color: #fff;
	text-align: center;
}

.site-info a {
	color: #fff;
}

@media (max-width: 768px) {
	.site-header .inside-header {
		padding: 14px 18px;
	}

	.site-logo img,
	.site-header .header-image {
		max-width: 190px;
	}

	.site-content {
		padding: 22px 14px;
	}

	.inside-article,
	.login-form-wrap {
		padding: 24px 18px;
	}

	.tnt-status-band {
		padding-left: 10px;
		padding-right: 10px;
	}

	.tutor-dashboard .tutor-dashboard-left-menu,
	.tutor-dashboard .tutor-dashboard-content {
		min-width: 0;
	}
}

/*
 * Homepage login layout.
 * This intentionally comes after the shared theme rules so the login page can
 * use a wider, single-card layout without changing Tutor LMS course screens.
 */
.site-header {
	border-bottom: 0;
}

.site-header .inside-header {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 30px 24px 18px;
	text-align: center;
}

.site-logo {
	margin: 0 auto;
}

.site-logo img,
.site-header .header-image {
	width: auto;
	max-width: 300px;
	height: auto;
}

.main-navigation {
	border-bottom: 0;
}

.main-navigation .inside-navigation {
	display: flex;
	justify-content: center;
}

.main-navigation .main-nav {
	margin: 0 auto;
}

.main-navigation .main-nav > ul {
	display: flex;
	justify-content: center;
}

.main-navigation .main-nav ul li a {
	padding-right: 22px;
	padding-left: 22px;
	font-size: 18px;
}

/* The homepage is the login screen, so course status never appears here. */
.home .tnt-status-band {
	display: none;
}

/* TNT does not use a public site footer. */
.site-footer {
	display: none !important;
}

body.home,
body.tnt-password-page {
	background: #fff;
}

.home .site-content,
.tnt-password-page .site-content {
	max-width: 920px;
	margin-right: auto;
	margin-left: auto;
	padding: 48px 24px 58px;
}

.home .site-main,
.tnt-password-page .site-main {
	margin: 0;
}

.home .inside-article,
.tnt-password-page .inside-article {
	max-width: 760px;
	margin: 0 auto;
	padding: 44px 42px 56px;
	border-radius: 10px;
	box-shadow: var(--tnt-shadow);
}

.home .entry-content,
.tnt-password-page .entry-content {
	width: 100%;
	max-width: none;
}

.tnt-password-page .entry-content {
	margin-top: 0;
}

.tnt-password-page .entry-header {
	margin-bottom: 36px;
}

.tnt-password-page .entry-title {
	margin: 0;
	font-size: 30px;
	font-weight: 500;
	line-height: 1.2;
}

.home .login-form-wrap {
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}

.home h2.form-title {
	margin: 0 0 36px;
	font-size: 30px;
	font-weight: 500;
	line-height: 1.2;
	text-align: left;
}

.home .tml-field-wrap,
.tnt-password-page .tml-field-wrap {
	margin-bottom: 18px;
}

.home .tml-login form .tml-log-wrap input,
.home .tml-login form .tml-pwd-wrap input {
	min-height: 54px;
	padding: 12px 17px;
	border-color: #cfd3d8 !important;
	border-radius: 7px;
	font-size: 18px;
}

.home .tml-field-wrap.tml-rememberme-wrap {
	gap: 12px;
	margin: 14px 0 32px;
}

.home .tml-field-wrap.tml-rememberme-wrap input {
	width: 26px;
	height: 26px;
}

.home .tml-field-wrap.tml-rememberme-wrap label {
	font-size: 18px;
}

.home .tml-login button.tml-button {
	min-height: 54px;
	border-radius: 7px;
	font-size: 18px;
	font-weight: 500;
}

/* Account recovery shares the homepage's single card, not a nested form card. */
.tml-lostpassword,
.tml-resetpass {
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

.tml-lostpassword label,
.tml-resetpass label {
	display: block;
	margin-bottom: 8px;
	font-weight: 650;
}

.tml-lostpassword input[type="text"],
.tml-lostpassword input[type="email"],
.tml-resetpass input[type="password"] {
	box-sizing: border-box;
	width: 100%;
	min-height: 54px;
	padding: 12px 17px;
	border: 1px solid #cfd3d8;
	border-radius: 7px;
	background: #fff;
	font-size: 18px;
}

.tml-lostpassword input:focus,
.tml-resetpass input:focus {
	border-color: var(--tnt-red);
	box-shadow: 0 0 0 3px rgba(176, 14, 35, .13);
	outline: 0;
}

.tnt-password-page .tml .tml-message {
	margin: 0 0 24px;
	padding: 14px 16px;
	border: 1px solid #f0ccd3;
	border-left: 4px solid var(--tnt-red);
	border-radius: 7px;
	background: #fff4f6;
	box-shadow: none;
	color: var(--tnt-red-hover);
	line-height: 1.6;
}

.tnt-password-page .tml-submit-wrap {
	margin-bottom: 0;
}

.tml-lostpassword .tml-button,
.tml-resetpass .tml-button {
	width: 100%;
	min-height: 54px;
	border: 0;
	border-radius: 7px;
	background: var(--tnt-red);
	color: #fff;
	font-size: 18px;
	font-weight: 500;
}

.tml-lostpassword .tml-button:hover,
.tml-resetpass .tml-button:hover {
	background: var(--tnt-red-hover);
	color: #fff;
}

.tml-lostpassword .tml-button:focus-visible,
.tml-resetpass .tml-button:focus-visible {
	outline: 3px solid var(--tnt-red);
	outline-offset: 3px;
}

@media (max-width: 768px) {
	.site-header .inside-header {
		padding: 22px 16px 14px;
	}

	.site-logo img,
	.site-header .header-image {
		max-width: 240px;
	}

	.main-navigation .inside-navigation {
		display: block;
	}

	.home .site-content,
	.tnt-password-page .site-content {
		padding: 30px 12px 40px;
	}

	.home .inside-article,
	.tnt-password-page .inside-article {
		padding: 30px 18px 42px;
	}

	.home h2.form-title {
		margin-bottom: 28px;
		font-size: 26px;
	}

	.tnt-password-page .entry-header {
		margin-bottom: 28px;
	}

	.tnt-password-page .entry-title {
		font-size: 26px;
	}

	.home .tml-login form .tml-log-wrap input,
	.home .tml-login form .tml-pwd-wrap input {
		min-height: 52px;
		font-size: 17px;
	}

	.home .tml-field-wrap.tml-rememberme-wrap label {
		font-size: 18px;
	}

	.home .tml-login button.tml-button {
		min-height: 52px;
		font-size: 18px;
	}

	.tml-lostpassword input[type="text"],
	.tml-lostpassword input[type="email"],
	.tml-resetpass input[type="password"] {
		min-height: 52px;
		font-size: 17px;
	}
}

/* --------------------------------------------------------------------------
 * Modern Tutor LMS course page
 * ----------------------------------------------------------------------- */

body.single-courses,
.single-courses #page,
.single-courses .site-content,
.single-courses .tutor-page-wrap,
.single-courses .tutor-wrap,
.single-courses .tutor-course-details-page,
.single-courses .tutor-full-width-course-top {
	background: #fff;
}

.single-courses .site-content {
	max-width: none;
	padding: 48px 24px 88px;
}

.single-courses .tutor-course-details-page {
	max-width: 1120px;
}

/* Modern, full-width status card used throughout the LMS. */
.tnt-status-band.tnt-status-band {
	padding: 24px;
	background: #fff;
	border-bottom: 1px solid #e9edf1;
}

.tnt-status-band.tnt-status-band > div {
	--tnt-status-accent: #009fe3;
	--tnt-status-border: #b9e3f2;
	--tnt-status-soft: #eff9ff;
	--tnt-status-soft-end: #fbfdff;
	--tnt-status-text: #075f83;

	display: flex !important;
	align-items: flex-start;
	justify-content: center;
	flex-direction: column;
	gap: 10px;
	width: 100% !important;
	max-width: 720px !important;
	min-height: 0;
	padding: 18px 22px !important;
	border: 1px solid var(--tnt-status-border) !important;
	border-left: 5px solid var(--tnt-status-accent) !important;
	border-radius: 14px !important;
	background: linear-gradient(135deg, var(--tnt-status-soft) 0%, var(--tnt-status-soft-end) 100%) !important;
	box-shadow: 0 8px 24px rgba(16, 24, 40, 0.06) !important;
	box-sizing: border-box;
	color: var(--tnt-status-text) !important;
}

/* Preserve the verification state encoded by the existing PHP snippet. */
.tnt-status-band.tnt-status-band > div[style*="#4caf50" i] {
	--tnt-status-accent: #2ca55c;
	--tnt-status-border: #cce8d5;
	--tnt-status-soft: #f2fbf5;
	--tnt-status-soft-end: #fbfefc;
	--tnt-status-text: #176b3a;
}

.tnt-status-band.tnt-status-band > div[style*="#ff6f61" i] {
	--tnt-status-accent: #ef5b51;
	--tnt-status-border: #ffc9c4;
	--tnt-status-soft: #fff3f2;
	--tnt-status-soft-end: #fffafa;
	--tnt-status-text: #9f2e28;
}

.tnt-status-band.tnt-status-band > div[style*="#ffb900" i],
.tnt-status-band.tnt-status-band > div[style*="#ffbf00" i] {
	--tnt-status-accent: #e39b00;
	--tnt-status-border: #f2d68d;
	--tnt-status-soft: #fff8e6;
	--tnt-status-soft-end: #fffdf8;
	--tnt-status-text: #865600;
}

.tnt-status-band.tnt-status-band > div[style*="#009fe3" i] {
	--tnt-status-accent: #009fe3;
	--tnt-status-border: #b9e3f2;
	--tnt-status-soft: #eff9ff;
	--tnt-status-soft-end: #fbfdff;
	--tnt-status-text: #075f83;
}

.tnt-status-band.tnt-status-band > div > div:first-child {
	width: auto !important;
	height: auto !important;
	padding: 0 !important;
	background: transparent !important;
}

.tnt-status-band.tnt-status-band h5 {
	display: block !important;
	margin: 0 !important;
	color: var(--tnt-status-text) !important;
	font-size: 14px !important;
	font-weight: 750 !important;
	letter-spacing: 0.08em;
	line-height: 1.3 !important;
	text-transform: uppercase;
}

.tnt-status-band.tnt-status-band > div > div:last-child {
	display: flex !important;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
	width: auto !important;
	height: auto !important;
	padding: 0 !important;
	background: transparent !important;
	color: var(--tnt-status-text) !important;
	font-size: 16px !important;
	font-weight: 550;
	line-height: 1.4 !important;
}

.tnt-status-band.tnt-status-band > div > div:last-child span:first-child {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	flex: 0 0 32px;
	width: 32px !important;
	height: 32px !important;
	border-radius: 50%;
	background: var(--tnt-status-accent) !important;
	color: #fff !important;
	font-size: 20px !important;
	font-weight: 800;
	line-height: 1 !important;
}

.tnt-status-band.tnt-status-band strong {
	color: var(--tnt-status-text) !important;
	font-size: 17px;
	font-weight: 750;
}

/* Course title and hero. */
.single-courses .tutor-course-details-header {
	margin-bottom: 30px !important;
}

.single-courses .tutor-course-details-title {
	color: #171a1f !important;
	font-size: clamp(28px, 3vw, 38px) !important;
	font-weight: 750 !important;
	letter-spacing: -0.025em;
	line-height: 1.2 !important;
}

.single-courses .tutor-course-thumbnail {
	overflow: hidden;
	border: 1px solid #e7ebef;
	border-radius: 16px;
	background: #f8fafb;
	box-shadow: 0 12px 32px rgba(16, 24, 40, 0.08);
}

.single-courses .tutor-course-thumbnail img {
	display: block;
	width: 100%;
	border-radius: 0;
}

/* Restore the useful Tutor headings that the old layout suppressed. */
.single-courses .tutor-fs-5 {
	display: block;
}

.single-courses .tutor-course-details-tab {
	margin-top: 28px !important;
}

.single-courses .tutor-course-details-content {
	padding: 22px 24px;
	border: 1px solid #e5eaf0;
	border-left: 4px solid var(--tnt-red);
	border-radius: 12px;
	background: #f8fafc;
}

.single-courses .tutor-course-details-content > h2 {
	margin: 0 0 10px !important;
	color: #171a1f !important;
	font-size: 20px !important;
	font-weight: 700 !important;
}

.single-courses .tutor-course-details-content p {
	margin: 0;
	color: #4b5563;
	line-height: 1.7;
}

.single-courses .tutor-course-details-content a {
	display: inline-flex;
	align-items: center;
	margin-top: 12px;
	padding: 8px 12px;
	border: 1px solid #e2b8bf;
	border-radius: 8px;
	background: #fff;
	color: var(--tnt-red);
	font-weight: 650;
	text-decoration: none;
}

.single-courses .tutor-course-details-content a::before {
	margin-right: 8px;
	padding: 2px 5px;
	border-radius: 4px;
	background: var(--tnt-red);
	color: #fff;
	content: "PDF";
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.04em;
}

.single-courses .tutor-course-content-title {
	margin: 0 0 18px !important;
	color: #171a1f !important;
	font-size: 24px !important;
	font-weight: 750 !important;
	letter-spacing: -0.015em;
}

/* Chapter accordion and lesson rows. */
.single-courses .tutor-accordion {
	margin-top: 0 !important;
}

.single-courses .tutor-accordion-item {
	overflow: hidden;
	margin-bottom: 12px;
	border: 1px solid #e2e7ec !important;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 4px 14px rgba(16, 24, 40, 0.035);
}

.single-courses .tutor-accordion-item-header {
	min-height: 58px;
	padding: 17px 20px !important;
	border: 0 !important;
	background: #f8fafb !important;
	color: #23272f !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	letter-spacing: 0.015em;
	line-height: 1.45 !important;
	transition: background-color 160ms ease, color 160ms ease;
}

.single-courses .tutor-accordion-item-header:hover {
	background: #f2f5f7 !important;
	color: var(--tnt-red) !important;
}

.single-courses .tutor-accordion-item-header.is-active {
	padding-left: 16px !important;
	border-left: 4px solid var(--tnt-red) !important;
	background: #fff5f6 !important;
	color: #8f0b1c !important;
}

.single-courses .tutor-accordion-item-body {
	border-top: 1px solid #edf0f3;
	background: #fff;
}

.single-courses .tutor-course-content-list-item {
	min-height: 52px;
	padding: 13px 18px !important;
	border-top: 1px solid #eff2f4 !important;
	background: #fff;
	transition: background-color 150ms ease;
}

.single-courses .tutor-course-content-list-item:first-child {
	border-top: 0 !important;
}

.single-courses .tutor-course-content-list-item:hover {
	background: #fafbfc;
}

.single-courses .tutor-course-content-list-item-title a {
	color: #29313d !important;
	font-size: 15px;
	font-weight: 550;
	text-decoration: none;
}

.single-courses .tutor-course-content-list-item-title a:hover {
	color: var(--tnt-red) !important;
}

.single-courses .tutor-course-content-list-item-icon {
	color: #7b8491 !important;
}

/* Modern progress sidebar. */
.single-courses .tutor-sidebar-card,
.single-courses .tutor-course-details-instructors {
	overflow: hidden;
	border: 1px solid #e1e7ec !important;
	border-radius: 16px !important;
	background: #fff !important;
	box-shadow: 0 12px 32px rgba(16, 24, 40, 0.08);
}

.single-courses .tutor-card-body {
	padding: 28px !important;
}

.single-courses .tutor-card-footer {
	padding: 22px 28px !important;
	border-top: 1px solid #e8edf1 !important;
	background: #f8fafb !important;
}

.single-courses .tutor-course-progress-wrapper h3 {
	margin: 0 0 16px !important;
	color: #171a1f !important;
	font-size: 19px !important;
	font-weight: 750 !important;
}

.single-courses .tutor-progress-bar {
	height: 8px !important;
	border-radius: 99px;
	background: #e9edf1 !important;
}

.single-courses .tutor-progress-value {
	height: 8px !important;
	border-radius: 99px;
	background: var(--tnt-red) !important;
}

.single-courses .tutor-sidebar-card .tutor-btn-primary {
	min-height: 48px;
	border-radius: 10px;
	box-shadow: 0 6px 16px rgba(176, 14, 35, 0.18);
	font-size: 16px;
	font-weight: 700;
}

.single-courses .tutor-alert.tutor-warning {
	border: 1px solid #f0d797 !important;
	border-radius: 10px;
	background: #fffbeb !important;
	color: #76520a !important;
}

.single-courses .tutor-course-details-instructors {
	padding: 24px 28px;
}

.single-courses .tutor-course-details-instructors h3 {
	margin: 0 0 16px !important;
	color: #667085 !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.single-courses .tutor-avatar {
	background: #fff1f3 !important;
	color: var(--tnt-red) !important;
}

@media (max-width: 768px) {
	.single-courses .site-content {
		padding: 32px 14px 56px;
	}

	.tnt-status-band.tnt-status-band {
		padding: 16px 14px;
	}

	.tnt-status-band.tnt-status-band > div {
		align-items: flex-start;
		flex-direction: column;
		gap: 10px;
		padding: 16px 18px !important;
	}

	.tnt-status-band.tnt-status-band > div > div:last-child {
		justify-content: flex-start;
		font-size: 15px !important;
	}

	.tnt-status-band.tnt-status-band strong {
		font-size: 16px;
	}

	.single-courses .tutor-course-details-title {
		font-size: 28px !important;
	}

	.single-courses .tutor-course-thumbnail {
		border-radius: 12px;
	}

	.single-courses .tutor-course-details-content {
		padding: 18px;
	}

	.single-courses .tutor-accordion-item-header {
		padding: 15px 16px !important;
		font-size: 14px !important;
	}

	.single-courses .tutor-course-content-list-item {
		padding: 12px 14px !important;
	}

	.single-courses .tutor-card-body,
	.single-courses .tutor-card-footer,
	.single-courses .tutor-course-details-instructors {
		padding: 22px !important;
	}
}

/* --------------------------------------------------------------------------
 * Compact, modern primary navigation
 * Keep this last so it wins over shared and homepage header rules above.
 * ----------------------------------------------------------------------- */

.site-header .inside-header {
	min-height: 0 !important;
	padding: 24px 24px 6px !important;
}

.main-navigation {
	position: relative;
	z-index: 10;
	margin-top: -6px;
}

.main-navigation .inside-navigation,
.main-navigation .main-nav,
.main-navigation .main-nav > ul {
	min-height: 0 !important;
	height: auto !important;
}

.main-navigation .main-nav > ul {
	align-items: center;
	gap: 8px;
	padding: 7px 12px 11px;
}

.main-navigation .main-nav ul li a {
	display: flex;
	align-items: center;
	min-height: 42px;
	margin: 0;
	padding: 10px 17px !important;
	border: 1px solid transparent;
	border-radius: 10px;
	line-height: 1.25 !important;
	text-decoration: none;
	transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.main-navigation .main-nav ul li:hover > a,
.main-navigation .main-nav ul li:focus-within > a {
	border-color: rgba(176, 14, 35, 0.14) !important;
	background: #fff4f6 !important;
	box-shadow: 0 5px 14px rgba(176, 14, 35, 0.08);
	color: var(--tnt-red) !important;
	transform: translateY(-1px);
}

.main-navigation .main-nav ul li[class*="current-menu-"] > a {
	border-color: rgba(176, 14, 35, 0.12) !important;
	background: rgba(176, 14, 35, 0.07) !important;
	color: var(--tnt-red) !important;
}

@media (max-width: 1024px) {
	.site-header,
	.site-header .inside-header,
	.main-navigation,
	.main-navigation .inside-navigation {
		min-height: 0 !important;
		height: auto !important;
	}

	.site-header .inside-header {
		padding: 10px 16px 5px !important;
	}

	.site-logo img,
	.site-header .header-image {
		max-width: 230px;
	}

	.main-navigation {
		margin-top: 0;
	}

	/* The navigation is intentionally always visible, so GeneratePress's
	 * otherwise-empty mobile toggle must not reserve a 60px row above it. */
	.main-navigation .menu-toggle {
		display: none !important;
		height: 0 !important;
		min-height: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	.main-navigation .inside-navigation {
		padding: 0 10px 6px !important;
	}

	.main-navigation .main-nav > ul {
		gap: 4px;
		padding: 3px 0 5px;
	}

	.main-navigation .main-nav ul li a {
		min-height: 38px;
		padding: 8px 11px !important;
		border-radius: 8px;
		font-size: 16px;
	}
}

@media (max-width: 768px) {
	.tnt-status-band.tnt-status-band > div {
		gap: 8px;
		margin: 0 auto !important;
		padding: 14px 16px !important;
	}

	/* The legacy status shortcode leaves the final phrase as a text node.
	 * Block flow keeps the entire message together instead of making two
	 * competing flex columns on narrow screens. */
	.tnt-status-band.tnt-status-band > div > div:last-child {
		display: block !important;
		position: relative;
		width: 100% !important;
		min-height: 32px;
		padding-left: 40px !important;
		font-size: 14px !important;
		line-height: 1.45 !important;
	}

	.tnt-status-band.tnt-status-band > div > div:last-child span:first-child {
		position: absolute;
		top: 50%;
		left: 0;
		margin: 0;
		transform: translateY(-50%);
	}

	.tnt-status-band.tnt-status-band strong {
		display: inline !important;
		font-size: 15px !important;
	}
}

@media (max-width: 480px) {
	.main-navigation .main-nav ul li a {
		padding: 7px 8px !important;
		font-size: clamp(13px, 3.5vw, 14px);
		white-space: nowrap;
	}
}

/* --------------------------------------------------------------------------
 * Modern, wide desktop reading experience
 *
 * Tutor limits its learning card to 760px at every desktop size. Preserve a
 * readable text measure, but let the application shell, lesson card, sidebar,
 * and navigation make intentional use of larger screens.
 * ----------------------------------------------------------------------- */

@media (min-width: 1200px) {
	body.single-lesson {
		--tnt-learning-sidebar-width: 350px;
		--tnt-learning-gutter: clamp(24px, 2.4vw, 48px);
	}

	body.single-lesson .tutor-learning-area-body {
		padding-left: var(--tnt-learning-sidebar-width);
		background:
			radial-gradient(circle at 88% 4%, rgba(176, 14, 35, 0.045), transparent 28rem),
			linear-gradient(180deg, #fafbfc 0%, #f5f7f9 100%);
	}

	body.single-lesson .tutor-learning-sidebar {
		width: var(--tnt-learning-sidebar-width);
		padding: 14px;
		border-right: 1px solid #e5e8ec;
		background: #f6f7f9;
		box-shadow: 10px 0 30px rgba(17, 24, 39, 0.035);
	}

	body.single-lesson .tutor-learning-sidebar-curriculum {
		width: 100%;
		border: 1px solid #e2e6ea;
		border-radius: 15px;
		background: #fff;
		box-shadow: 0 12px 30px rgba(17, 24, 39, 0.065);
	}

	body.single-lesson .tutor-learning-progress {
		padding: 20px 22px;
		border-bottom: 1px solid #eceef1;
		background: linear-gradient(145deg, #fff 0%, #fafbfc 100%);
	}

	body.single-lesson .tutor-learning-progress-text {
		color: #202632;
		font-size: 16px;
		font-weight: 750;
		letter-spacing: -0.01em;
	}

	body.single-lesson .tutor-learning-progress .tutor-progress-bar {
		height: 7px;
		border-radius: 999px;
		background: #e7eaee;
	}

	body.single-lesson .tutor-learning-progress .tutor-progress-bar-fill {
		border-radius: 999px;
		background: linear-gradient(90deg, #a90d21 0%, #d83a50 100%) !important;
		box-shadow: 0 2px 8px rgba(176, 14, 35, 0.22);
	}

	body.single-lesson .tutor-learning-nav {
		padding: 8px;
	}

	body.single-lesson .tutor-learning-nav-header {
		margin: 3px 0;
		border-radius: 10px;
		transition: background-color 160ms ease, color 160ms ease;
	}

	body.single-lesson .tutor-learning-nav-header:hover {
		background: #f5f6f8;
		color: var(--tnt-red);
	}

	body.single-lesson .tutor-learning-nav-item {
		margin: 3px 5px;
		border: 1px solid transparent;
		border-radius: 10px;
		transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
	}

	body.single-lesson .tutor-learning-nav-item:hover {
		border-color: #e7e9ed;
		background: #f7f8fa;
		transform: translateX(2px);
	}

	body.single-lesson .tutor-learning-nav-item.active {
		border-color: rgba(176, 14, 35, 0.16);
		background: linear-gradient(135deg, #fff2f4 0%, #fffafb 100%);
		box-shadow: 0 7px 18px rgba(176, 14, 35, 0.075);
	}

	body.single-lesson .tutor-learning-area-content {
		padding-top: 76px;
	}

	body.single-lesson .tutor-learning-area-container {
		width: calc(100% - (var(--tnt-learning-gutter) * 2));
		max-width: 1500px;
		margin-right: auto;
		margin-left: auto;
		padding-bottom: 28px;
		box-sizing: border-box;
	}

	body.single-lesson .tutor-lesson-content-tab {
		border: 1px solid #e1e5e9;
		border-radius: 18px;
		background: rgba(255, 255, 255, 0.98);
		box-shadow: 0 20px 55px rgba(17, 24, 39, 0.09);
	}

	body.single-lesson .tutor-lesson-content-tab::before {
		display: block;
		height: 5px;
		background: linear-gradient(90deg, var(--tnt-red) 0%, #dc4056 58%, #f0b4bd 100%);
		content: "";
	}

	body.single-lesson .tutor-tab-panel {
		padding: clamp(38px, 3.8vw, 64px) !important;
	}

	body.single-lesson .tutor-lesson-wrapper {
		max-width: 960px;
		margin-right: auto;
		margin-left: auto;
	}

	body.single-lesson .tutor-lesson-wrapper h1 {
		margin: 0 0 26px;
		color: #151923;
		font-size: clamp(38px, 2.65vw, 54px);
		font-weight: 800;
		letter-spacing: -0.035em;
		line-height: 1.08;
	}

	body.single-lesson .tutor-lesson-wrapper h1::before {
		display: table;
		margin-bottom: 15px;
		padding: 7px 11px;
		border-radius: 999px;
		background: #fff0f2;
		color: var(--tnt-red);
		content: "Reading lesson";
		font-size: 12px;
		font-weight: 800;
		letter-spacing: 0.13em;
		line-height: 1;
		text-transform: uppercase;
	}

	/* Some imported readings store the lesson title as the first H2 instead of
	 * Tutor's usual H1. Give both title structures the same modern treatment. */
	body.single-lesson .tutor-lesson-wrapper > h2:first-child {
		margin: 0 0 24px;
		padding: 0;
		border: 0;
		color: #151923;
		font-size: clamp(34px, 5vw, 46px);
		font-weight: 800;
		letter-spacing: -0.035em;
		line-height: 1.1;
	}

	body.single-lesson .tutor-lesson-wrapper > h2:first-child::before {
		display: table;
		margin-bottom: 14px;
		padding: 7px 11px;
		border-radius: 999px;
		background: #fff0f2;
		color: var(--tnt-red);
		content: "Reading lesson";
		font-size: 12px;
		font-weight: 800;
		letter-spacing: 0.13em;
		line-height: 1;
		text-transform: uppercase;
	}

	body.single-lesson .tutor-lesson-wrapper h2 {
		margin-top: 48px;
		margin-bottom: 15px;
		padding-left: 16px;
		border-left: 4px solid var(--tnt-red);
		color: #171c26;
		font-size: clamp(27px, 1.75vw, 34px);
		font-weight: 780;
		letter-spacing: -0.025em;
		line-height: 1.18;
	}

	body.single-lesson .tutor-lesson-wrapper h3 {
		margin-top: 35px;
		margin-bottom: 12px;
		color: #232936;
		font-size: clamp(21px, 1.35vw, 26px);
		font-weight: 750;
		letter-spacing: -0.018em;
		line-height: 1.25;
	}

	body.single-lesson .tutor-lesson-wrapper p,
	body.single-lesson .tutor-lesson-wrapper li {
		color: #3e4653;
		font-size: clamp(17px, 1.02vw, 18px);
		line-height: 1.72;
	}

	body.single-lesson .tutor-lesson-wrapper p {
		margin-bottom: 20px;
	}

	body.single-lesson .tutor-lesson-wrapper ul,
	body.single-lesson .tutor-lesson-wrapper ol {
		margin-top: 16px;
		margin-bottom: 26px;
		padding-left: 1.35em;
	}

	body.single-lesson .tutor-lesson-wrapper li {
		margin-bottom: 7px;
		padding-left: 5px;
	}

	body.single-lesson .tutor-lesson-wrapper strong {
		color: #232936;
		font-weight: 750;
	}

	body.single-lesson .tutor-learning-area-footer {
		margin-top: 18px;
		padding: 13px 16px;
		border: 1px solid #e1e5e9;
		border-radius: 14px;
		background: rgba(255, 255, 255, 0.94);
		box-shadow: 0 10px 30px rgba(17, 24, 39, 0.075);
		backdrop-filter: blur(12px);
	}

	body.single-lesson .tutor-learning-area-footer > a.tutor-btn-ghost {
		min-width: 118px;
		min-height: 44px;
		padding: 10px 16px;
		border: 1px solid #dde1e6;
		border-radius: 10px;
		background: #fff;
		color: #252b36;
		font-size: 15px;
		font-weight: 700;
		transition: border-color 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
	}

	body.single-lesson .tutor-learning-area-footer > a.tutor-btn-ghost:hover,
	body.single-lesson .tutor-learning-area-footer > a.tutor-btn-ghost:focus {
		border-color: rgba(176, 14, 35, 0.38);
		color: var(--tnt-red);
		box-shadow: 0 7px 16px rgba(176, 14, 35, 0.1);
		transform: translateY(-1px);
	}
}

/* --------------------------------------------------------------------------
 * Responsive reading experience
 *
 * Tutor switches to its compact player below 1200px. Carry the same card,
 * type, spacing, and navigation language into that layout instead of falling
 * back to the flat legacy lesson treatment.
 * ----------------------------------------------------------------------- */

@media (max-width: 1199px) {
	body.single-lesson .tutor-learning-area-body {
		background:
			radial-gradient(circle at 88% 4%, rgba(176, 14, 35, 0.04), transparent 24rem),
			linear-gradient(180deg, #fafbfc 0%, #f5f7f9 100%);
	}

	body.single-lesson .tutor-learning-area-content {
		padding-top: clamp(14px, 2.5vw, 28px) !important;
	}

	body.single-lesson .tutor-learning-area-container {
		width: calc(100% - 32px);
		max-width: 980px;
		margin-right: auto;
		margin-left: auto;
		padding-bottom: 20px;
		box-sizing: border-box;
	}

	body.single-lesson .tutor-lesson-content-tab {
		position: relative;
		overflow: hidden !important;
		border: 1px solid #e1e5e9 !important;
		border-radius: 17px !important;
		background: rgba(255, 255, 255, 0.98) !important;
		box-shadow: 0 18px 45px rgba(17, 24, 39, 0.085) !important;
	}

	body.single-lesson .tutor-lesson-content-tab::before {
		display: block !important;
		position: absolute;
		z-index: 2;
		top: 0;
		right: 0;
		left: 0;
		height: 5px !important;
		background: linear-gradient(90deg, var(--tnt-red) 0%, #dc4056 58%, #f0b4bd 100%);
		content: "";
	}

	body.single-lesson .tutor-tab-panel {
		padding: clamp(30px, 5vw, 48px) !important;
	}

	body.single-lesson .tutor-lesson-wrapper {
		max-width: 820px;
		margin-right: auto;
		margin-left: auto;
	}

	body.single-lesson .tutor-lesson-wrapper h1 {
		margin: 0 0 24px;
		padding: 0;
		border: 0;
		color: #151923;
		font-size: clamp(34px, 5vw, 46px);
		font-weight: 800;
		letter-spacing: -0.035em;
		line-height: 1.1;
	}

	body.single-lesson .tutor-lesson-wrapper h1::before {
		display: table;
		margin-bottom: 14px;
		padding: 7px 11px;
		border-radius: 999px;
		background: #fff0f2;
		color: var(--tnt-red);
		content: "Reading lesson";
		font-size: 12px;
		font-weight: 800;
		letter-spacing: 0.13em;
		line-height: 1;
		text-transform: uppercase;
	}

	body.single-lesson .tutor-lesson-wrapper h2 {
		margin-top: 42px;
		margin-bottom: 14px;
		padding-left: 14px;
		border-left: 4px solid var(--tnt-red);
		color: #171c26;
		font-size: clamp(26px, 3.6vw, 32px);
		font-weight: 780;
		letter-spacing: -0.025em;
		line-height: 1.2;
	}

	body.single-lesson .tutor-lesson-wrapper > h2:first-child {
		margin: 0 0 24px;
		padding: 0;
		border: 0;
		color: #151923;
		font-size: clamp(34px, 5vw, 46px);
		font-weight: 800;
		letter-spacing: -0.035em;
		line-height: 1.1;
	}

	body.single-lesson .tutor-lesson-wrapper > h2:first-child::before {
		display: table;
		margin-bottom: 14px;
		padding: 7px 11px;
		border-radius: 999px;
		background: #fff0f2;
		color: var(--tnt-red);
		content: "Reading lesson";
		font-size: 12px;
		font-weight: 800;
		letter-spacing: 0.13em;
		line-height: 1;
		text-transform: uppercase;
	}

	body.single-lesson .tutor-lesson-wrapper h3 {
		margin-top: 32px;
		margin-bottom: 11px;
		color: #232936;
		font-size: clamp(21px, 2.8vw, 25px);
		font-weight: 750;
		letter-spacing: -0.018em;
		line-height: 1.25;
	}

	body.single-lesson .tutor-lesson-wrapper p,
	body.single-lesson .tutor-lesson-wrapper li {
		color: #3e4653;
		font-size: clamp(17px, 2vw, 18px);
		line-height: 1.72;
	}

	body.single-lesson .tutor-lesson-wrapper p {
		margin-bottom: 20px;
	}

	body.single-lesson .tutor-lesson-wrapper ul,
	body.single-lesson .tutor-lesson-wrapper ol {
		margin-top: 15px;
		margin-bottom: 24px;
		padding-left: 1.35em;
	}

	body.single-lesson .tutor-lesson-wrapper li {
		margin-bottom: 7px;
		padding-left: 4px;
	}

	body.single-lesson .tutor-lesson-wrapper strong {
		color: #232936;
		font-weight: 750;
	}

	body.single-lesson .tutor-learning-area-footer {
		margin-top: 14px;
		padding: 12px 14px;
		border: 1px solid #e1e5e9;
		border-radius: 14px;
		background: rgba(255, 255, 255, 0.96);
		box-shadow: 0 10px 28px rgba(17, 24, 39, 0.075);
		backdrop-filter: blur(12px);
	}

	body.single-lesson .tutor-learning-area-footer > a.tutor-btn-ghost {
		min-width: 112px;
		min-height: 44px;
		padding: 10px 15px;
		border: 1px solid #dde1e6;
		border-radius: 10px;
		background: #fff;
		color: #252b36;
		font-size: 15px;
		font-weight: 700;
		transition: border-color 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
	}

	body.single-lesson .tutor-learning-area-footer > a.tutor-btn-ghost:hover,
	body.single-lesson .tutor-learning-area-footer > a.tutor-btn-ghost:focus {
		border-color: rgba(176, 14, 35, 0.38);
		color: var(--tnt-red);
		box-shadow: 0 7px 16px rgba(176, 14, 35, 0.1);
		transform: translateY(-1px);
	}
}

/* Tutor changes the player shell between tablet and desktop widths. Reassert
 * the inset card at that exact breakpoint so its border, corners, and accent
 * cannot be flattened by the LMS responsive stylesheet. */
@media (min-width: 769px) and (max-width: 1199px) {
	body.single-lesson .tutor-learning-area-content {
		/* Tutor makes the learning header fixed at this breakpoint. Preserve its
		 * native 64px clearance, then add the visual gutter for the lesson card. */
		padding: calc(64px + clamp(20px, 2.6vw, 30px)) 18px 20px !important;
		scroll-padding-top: calc(64px + clamp(20px, 2.6vw, 30px));
	}

	body.single-lesson .tutor-learning-area-container {
		width: 100% !important;
		max-width: 980px !important;
		margin-right: auto !important;
		margin-left: auto !important;
		padding-bottom: 20px !important;
	}

	body.single-lesson .tutor-learning-area .tutor-lesson-content-tab.tutor-tabs-horizontal {
		position: relative !important;
		overflow: hidden !important;
		border: 1px solid #e1e5e9 !important;
		border-radius: 17px !important;
		background: #fff !important;
		box-shadow: 0 18px 45px rgba(17, 24, 39, 0.085) !important;
	}

	body.single-lesson .tutor-learning-area .tutor-lesson-content-tab.tutor-tabs-horizontal::before {
		display: block !important;
		position: relative !important;
		z-index: 3;
		top: auto !important;
		right: auto !important;
		left: auto !important;
		height: 5px !important;
		background: linear-gradient(90deg, var(--tnt-red) 0%, #dc4056 58%, #f0b4bd 100%) !important;
		content: "" !important;
	}

	body.single-lesson .tutor-learning-area .tutor-lesson-content-tab .tutor-tabs-content,
	body.single-lesson .tutor-learning-area .tutor-lesson-content-tab .tutor-tab-panel {
		border: 0 !important;
		border-radius: 0 !important;
		background: transparent !important;
		box-shadow: none !important;
	}
}

@media (max-width: 600px) {
	body.single-lesson .tutor-learning-area-content {
		padding-top: 10px;
	}

	body.single-lesson .tutor-learning-area-container {
		width: calc(100% - 18px);
		padding-bottom: 12px;
	}

	body.single-lesson .tutor-lesson-content-tab {
		border-radius: 14px;
		box-shadow: 0 12px 30px rgba(17, 24, 39, 0.075);
	}

	body.single-lesson .tutor-lesson-content-tab::before {
		height: 4px;
	}

	body.single-lesson .tutor-tab-panel {
		padding: 26px 20px 30px !important;
	}

	body.single-lesson .tutor-lesson-wrapper h1 {
		margin-bottom: 20px;
		font-size: clamp(29px, 8.5vw, 38px);
		letter-spacing: -0.03em;
		line-height: 1.12;
	}

	body.single-lesson .tutor-lesson-wrapper h1::before {
		margin-bottom: 12px;
		padding: 6px 9px;
		font-size: 10px;
	}

	body.single-lesson .tutor-lesson-wrapper h2 {
		margin-top: 34px;
		margin-bottom: 12px;
		padding-left: 12px;
		border-left-width: 3px;
		font-size: clamp(23px, 6.5vw, 28px);
	}

	body.single-lesson .tutor-lesson-wrapper h3 {
		margin-top: 28px;
		font-size: clamp(19px, 5.2vw, 23px);
	}

	body.single-lesson .tutor-lesson-wrapper p,
	body.single-lesson .tutor-lesson-wrapper li {
		font-size: 16.5px;
		line-height: 1.65;
	}

	body.single-lesson .tutor-learning-area-footer {
		gap: 8px;
		margin-top: 10px;
		padding: 9px;
		border-radius: 12px;
	}

	body.single-lesson .tutor-learning-area-footer > a.tutor-btn-ghost {
		min-width: 0;
		min-height: 42px;
		padding: 9px 11px;
		border-radius: 9px;
		font-size: 14px;
	}
}

@media (min-width: 1200px) {
	body.single-tutor_quiz {
		--tnt-learning-sidebar-width: 350px;
		--tnt-learning-gutter: clamp(24px, 2.4vw, 48px);
	}

	body.single-tutor_quiz .tutor-learning-area-body {
		padding-left: var(--tnt-learning-sidebar-width);
		background:
			radial-gradient(circle at 88% 4%, rgba(176, 14, 35, 0.045), transparent 28rem),
			linear-gradient(180deg, #fafbfc 0%, #f5f7f9 100%);
	}

	body.single-tutor_quiz .tutor-learning-sidebar {
		width: var(--tnt-learning-sidebar-width);
		padding: 14px;
		border-right: 1px solid #e5e8ec;
		background: #f6f7f9;
		box-shadow: 10px 0 30px rgba(17, 24, 39, 0.035);
	}

	body.single-tutor_quiz .tutor-learning-sidebar-curriculum {
		width: 100%;
		border: 1px solid #e2e6ea;
		border-radius: 15px;
		background: #fff;
		box-shadow: 0 12px 30px rgba(17, 24, 39, 0.065);
	}

	body.single-tutor_quiz .tutor-learning-area-content {
		padding-top: 76px;
	}

	body.single-tutor_quiz .tutor-learning-area-container {
		width: calc(100% - (var(--tnt-learning-gutter) * 2));
		max-width: 1500px;
		margin-right: auto;
		margin-left: auto;
		padding-bottom: 28px;
		box-sizing: border-box;
	}

	body.single-tutor_quiz .tutor-quiz {
		width: 100%;
	}
}

@media (max-width: 767px) {
	body.single-tutor_quiz .tutor-quiz-intro {
		padding: 12px;
		border-radius: 14px;
	}

	body.single-tutor_quiz .tutor-quiz-intro-overview {
		display: block;
		min-height: 0;
		padding: 18px;
	}

	body.single-tutor_quiz .tutor-quiz-intro-icon {
		height: 132px;
		margin-bottom: 18px;
	}

	body.single-tutor_quiz .tutor-quiz-intro-title {
		font-size: 28px;
		text-align: center;
	}

	body.single-tutor_quiz .tutor-quiz-intro-title::before {
		margin-bottom: 9px;
	}

	body.single-tutor_quiz .tutor-quiz-progress {
		gap: 10px;
		padding: 12px 16px 14px;
	}

	body.single-tutor_quiz .tutor-quiz-progress-title {
		font-size: 18px;
	}

	body.single-tutor_quiz .tutor-quiz-question {
		gap: 18px;
		padding: 22px 18px;
		border-radius: 14px;
	}

	body.single-tutor_quiz .tutor-quiz-question-title {
		font-size: 18px;
	}

	body.single-tutor_quiz .tutor-quiz-question-options {
		gap: 10px;
	}

	body.single-tutor_quiz .tutor-quiz-question-option {
		min-height: 52px;
		border-radius: 10px;
		font-size: 15px;
	}

	body.single-tutor_quiz .tutor-quiz-footer-inner {
		padding-right: 16px;
		padding-left: 16px;
	}

	body.single-tutor_quiz .tutor-quiz-footer .tutor-btn {
		min-height: 44px;
		font-size: 15px;
	}
}

@media (min-width: 1680px) {
	body.single-lesson {
		--tnt-learning-sidebar-width: 370px;
	}

	body.single-tutor_quiz {
		--tnt-learning-sidebar-width: 370px;
	}
}