/* Available Courses - Layout 4 (Masonry / Two-Column), per the
   2026-09-22 dashboard redesign request. Every class name below
   already existed before this redesign (reused, not invented) except
   .acx-course-thumbnail (and its own color variants), plus
   .acx-course-status-enrolled and .acx-course-progress-bar-wrap,
   which are new - the course list previously had no thumbnail area
   and no visual progress bar at all, only a plain text percentage. */
.acx-courses-list {
	display: grid;
	grid-template-columns: repeat( 2, 1fr );
	gap: 28px;
}

.acx-course-card {
	display: flex;
	gap: 16px;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	padding: 18px;
	box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.05 );
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.acx-course-card:hover {
	box-shadow: 0 4px 10px rgba( 0, 0, 0, 0.08 );
	transform: translateY( -2px );
}

/* Every course in this plugin has no thumbnail/featured-image field
   at all (confirmed directly against the courses table's own schema
   before writing this CSS) - this fallback area, not a real photo, is
   what every single card actually shows. */
.acx-course-thumbnail {
	flex: 0 0 72px;
	width: 72px;
	height: 72px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
}

.acx-course-thumbnail svg {
	width: 30px;
	height: 30px;
}

/* A real, uploaded course image - added alongside .acx-course-thumbnail
itself, which already provides this element's own size, rounded
corners, and flex centering; this only adds what's specific to holding
a real <img> rather than an icon. object-fit: cover crops the image to
fill this fixed-size box without distorting it, regardless of the
uploaded image's own original dimensions/aspect ratio. */
.acx-course-thumbnail-image {
	overflow: hidden;
	padding: 0;
}

.acx-course-thumbnail-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* The wider, banner-style variant used on the single-course view page
(Frontend\CourseViewShortcode's own [appointment_cognitionx_course]
page) - a small, card-sized square would look out of place as the very
first thing on a full course detail page, so this variant spans the
full available width instead. */
.acx-course-thumbnail-large {
	width: 100%;
	height: 220px;
	border-radius: 12px;
	margin-bottom: 16px;
}

.acx-course-thumbnail-large svg {
	width: 64px;
	height: 64px;
}

.acx-course-thumb-blue   { background: linear-gradient( 135deg, #5b8def, #2b52d6 ); }
.acx-course-thumb-purple { background: linear-gradient( 135deg, #b17ff2, #7b2ff7 ); }
.acx-course-thumb-orange { background: linear-gradient( 135deg, #ffb648, #ff7a1a ); }
.acx-course-thumb-teal   { background: linear-gradient( 135deg, #34d4c4, #0d9488 ); }
.acx-course-thumb-pink   { background: linear-gradient( 135deg, #f472b6, #db2777 ); }
.acx-course-thumb-indigo { background: linear-gradient( 135deg, #7c7ff5, #4338ca ); }

.acx-course-card-body {
	flex: 1;
	min-width: 0;
}

.acx-course-card-body h4 {
	margin: 0 0 4px;
	font-size: 16px;
	font-weight: 600;
	color: #1d2327;
	line-height: 1.3;
	overflow-wrap: break-word;
}

.acx-course-instructor {
	color: #6b7280;
	font-size: 13px;
	margin: 0 0 6px;
}

.acx-course-price {
	font-size: 15px;
	font-weight: 700;
	color: #1d2327;
	margin: 0 0 12px;
}

/* Holds the course link (Enrolled/View Course) alongside the
certificate indicator, when either applies - a shared flex container
gives consistent spacing regardless of whether one or two elements end
up inside it, the same reasoning already applied to the Reviews admin
page's own action buttons. */
.acx-course-card-actions {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

/* Scoped narrowly to this card's own actions row, not
.acx-submit-button's own shared, global definition in frontend.css,
which many other, unrelated parts of this plugin also depend on
unchanged. */
.acx-course-card-actions .acx-submit-button {
	padding: 8px 16px;
	font-size: 13px;
	border-radius: 6px;
}

/* A distinct, "status badge" look once actually enrolled, rather than
the same blue as the not-yet-enrolled "View Course" state - still the
exact same link, same href, same click target, only its color changes. */
.acx-course-card-actions .acx-submit-button.acx-course-status-enrolled {
	background: #15803d;
}

.acx-course-card-actions .acx-submit-button.acx-course-status-enrolled:hover {
	background: #116430;
}

/* Fixes a real, reported bug: the View Certificate button (which uses
.acx-neutral-button, frontend.css) sat visibly shorter than the
Enrolled button next to it (.acx-submit-button) - both classes were
never designed to match each other's height, since .acx-neutral-button
was built as a smaller, secondary button for a different context (the
Instructor Directory cards), with its own, deliberately smaller
padding (6px 14px vs. 10px 20px) and font-size (13px vs. 14px). Scoped
specifically to this actions container, rather than changing
.acx-neutral-button's own global definition, since My Bookings' own
Reschedule/Leave a Review buttons also depend on that unchanged.
Verified by actually rendering both the original mismatch and this fix
side by side and inspecting the result, not assuming the values would
line up correctly. */
.acx-course-card-actions .acx-neutral-button {
	display: inline-flex;
	align-items: center;
	padding: 8px 16px;
	font-size: 13px;
	line-height: normal;
	border-radius: 6px;
}

.acx-course-progress-label {
	font-size: 13px;
	font-weight: 600;
	color: #4b5563;
}

/* The new visual progress bar - reuses .acx-progress-bar/
.acx-progress-bar-fill exactly as already defined and already used
elsewhere in this same file's own single-course view (see
.acx-course-progress below), rather than a second, separate progress-
bar style. Only this wrapper and the thinner bar height inside it are
new, to fit this card's own more compact layout. */
.acx-course-progress-bar-wrap {
	margin-top: 12px;
}

.acx-course-progress-bar-wrap .acx-course-progress-label {
	display: block;
	margin-bottom: 6px;
}

.acx-course-progress-bar-wrap .acx-progress-bar {
	height: 6px;
}

.acx-available-courses-subtitle {
	color: #6b7280;
	font-size: 14px;
	margin: -8px 0 20px;
}

/* The dashboard's own sidebar (frontend/assets/css/dashboard.css)
stacks above the content at 782px, freeing the full page width back
to this grid. Just above that point, though, while the sidebar is
still side-by-side (220px + 24px gap still competing for space), 2
columns would genuinely be too tight for a comfortable card - "tablet:
2 columns if sufficient width exists" from the original request,
applied literally: below this specific, narrow range there isn't
sufficient width, so it drops to 1 column here, then goes back to 2
once the sidebar itself stacks and the full width returns. */
@media ( min-width: 783px ) and ( max-width: 900px ) {
	.acx-courses-list {
		grid-template-columns: 1fr;
	}
}

@media ( max-width: 600px ) {
	.acx-courses-list {
		grid-template-columns: 1fr;
	}

	.acx-course-card {
		padding: 14px;
	}

	.acx-course-thumbnail {
		flex: 0 0 56px;
		width: 56px;
		height: 56px;
	}

	.acx-course-thumbnail svg {
		width: 24px;
		height: 24px;
	}
}

/* ==========================================================================
   Available Courses - "catalog" view (Frontend\CoursesShortcode's own
   public-safe default - no per-student Enrolled/progress/certificate
   data at all, see that class's own render() and
   Api\CoursesController::format_course_summary()'s own $include_status
   parameter). Scoped entirely to [data-view="catalog"]/
   .acx-course-card-catalog so none of this touches the personalized
   "dashboard" view's own styling above at all - both share the same
   underlying .acx-course-card/.acx-course-thumbnail/.acx-course-price/
   .acx-submit-button base classes, only overriding what genuinely
   needs to differ for this view.
   ========================================================================== */

.acx-courses-list[data-view="catalog"] {
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: 24px;
}

/* Image-on-top, content-below - overrides the dashboard view's own
side-by-side flex row (thumbnail + body) entirely for this view. */
.acx-course-card-catalog {
	flex-direction: column;
	gap: 0;
	padding: 0;
	overflow: hidden;
}

.acx-course-card-catalog .acx-course-thumbnail {
	flex: 0 0 auto;
	width: 100%;
	height: 180px;
	border-radius: 0;
}

.acx-course-card-catalog .acx-course-thumbnail-image img {
	border-radius: 0;
}

.acx-course-card-catalog .acx-course-thumbnail svg {
	width: 48px;
	height: 48px;
}

/* flex: 1 + flex-direction: column is what lets
.acx-course-catalog-spacer (below) grow to fill any leftover vertical
space, keeping the price/button at a consistent position near the
bottom of every card in a row - even when one card's own description
is shorter than its neighbors'. */
.acx-course-card-catalog .acx-course-card-body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 16px 18px 18px;
}

.acx-course-card-catalog .acx-course-card-body h4 {
	margin-bottom: 6px;
}

.acx-course-card-catalog .acx-course-instructor {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 10px;
}

/* A fixed-height description area so every card in a row lines up
regardless of how long any individual course's own description is -
3 lines is a reasonable default for a ~3-column card at this width;
adjust the line count here if a future width/theme needs a different
value. The description text itself is never altered or shortened in
the database - only its own display is visually clamped, in CSS. */
.acx-course-catalog-description {
	margin: 0 0 12px;
	font-size: 13px;
	line-height: 1.5;
	color: #6b7280;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}

.acx-course-catalog-spacer {
	flex: 1;
}

.acx-course-card-catalog .acx-course-price {
	margin: 0 0 12px;
}

.acx-course-catalog-button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
	box-sizing: border-box;
	text-align: center;
}

@media ( max-width: 1024px ) {
	.acx-courses-list[data-view="catalog"] {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

@media ( max-width: 767px ) {
	.acx-courses-list[data-view="catalog"] {
		grid-template-columns: 1fr;
	}
}

.acx-course-action {
	margin: 16px 0;
}

.acx-lessons-list {
	margin-left: 20px;
}

.acx-lessons-list li {
	margin-bottom: 16px;
}

.acx-lesson-content {
	margin-top: 6px;
}

.acx-course-progress {
	margin: 12px 0 20px;
}

.acx-progress-bar {
	background: #e9ecef;
	border-radius: 6px;
	height: 10px;
	overflow: hidden;
}

.acx-progress-bar-fill {
	background: #2271b1;
	height: 100%;
	transition: width 0.2s ease;
}

.acx-progress-label {
	font-size: 13px;
	color: #646970;
	margin: 6px 0 0;
}

.acx-lesson-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}

.acx-lesson-completed > .acx-lesson-header strong {
	color: #00a32a;
}

.acx-certificate-banner {
	background: #fcf9e8;
	border: 1px solid #e0d28a;
	border-radius: 4px;
	padding: 14px 16px;
	margin: 0 0 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

/* Fixes a real, reported bug: this label's text previously embedded a
literal "\u2713" (meant to be a checkmark) directly in the translatable
string, but a single-quoted PHP string never interprets \u2713 as an
escape sequence at all - it's output as that literal text, exactly
what the bug report's own screenshot showed. Fixed by removing the
symbol from the string entirely (a decorative icon shouldn't be baked
into translatable text anyway) and drawing a checkmark purely in CSS
here instead - the same proven approach already used for the
calendar's own navigation arrows on this same site, and for the same
reason: it can't fail to render regardless of what font the page
happens to inherit. Verified by actually rendering this exact markup
to an image and inspecting it before applying it, not just trusting
the shape by eye. */
.acx-quiz-passed-label {
	color: #00a32a;
	font-weight: 600;
	font-size: 13px;
	display: inline-flex;
	align-items: center;
}

.acx-quiz-passed-label::before {
	content: '';
	display: inline-block;
	width: 6px;
	height: 10px;
	border-bottom: 2px solid #00a32a;
	border-right: 2px solid #00a32a;
	transform: rotate( 45deg );
	margin-right: 8px;
	margin-bottom: 2px;
}

.acx-quiz-container {
	margin-top: 14px;
	padding: 16px;
	background: #f6f7f7;
	border: 1px solid #dcdcde;
	border-radius: 4px;
}

.acx-quiz-question {
	margin-bottom: 16px;
}

.acx-quiz-question-text {
	font-weight: 600;
	margin: 0 0 8px;
}

.acx-quiz-option {
	display: block;
	margin: 4px 0;
	font-weight: 400;
}

.acx-quiz-essay-answer {
	display: block;
	width: 100%;
	max-width: 500px;
	margin: 4px 0;
	box-sizing: border-box;
	font-family: inherit;
}

.acx-quiz-fill-blank-answer {
	display: block;
	width: 100%;
	max-width: 400px;
	margin: 4px 0;
	padding: 6px 8px;
	box-sizing: border-box;
	font-family: inherit;
}

.acx-quiz-matching-row {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 6px 0;
}

.acx-quiz-matching-left-label {
	min-width: 160px;
	font-weight: 600;
}

.acx-quiz-matching-dropzone {
	padding: 6px 14px;
	border: 1px dashed #8c8f94;
	border-radius: 4px;
	background: #fff;
	color: #50575e;
	cursor: pointer;
	min-width: 140px;
	text-align: left;
}

.acx-quiz-matching-dropzone.acx-quiz-matching-filled {
	border-style: solid;
	border-color: #2271b1;
	color: #1d2327;
	font-weight: 600;
}

.acx-quiz-matching-hint {
	font-size: 13px;
	color: #50575e;
	margin: 10px 0 6px;
}

.acx-quiz-matching-right-pool {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.acx-quiz-matching-right-item {
	padding: 6px 14px;
	border: 1px solid #2271b1;
	border-radius: 4px;
	background: #fff;
	color: #2271b1;
	cursor: pointer;
}

.acx-quiz-matching-right-item:hover {
	background: #f0f6fc;
}

.acx-quiz-matching-selected {
	background: #2271b1;
	color: #fff;
}

.acx-quiz-ordering-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 10px;
	margin: 4px 0;
	border: 1px solid #dcdcde;
	border-radius: 4px;
	background: #fff;
}

.acx-quiz-ordering-item span {
	flex: 1;
}

.acx-quiz-ordering-move-up,
.acx-quiz-ordering-move-down {
	padding: 2px 10px;
	border: 1px solid #8c8f94;
	border-radius: 4px;
	background: #fff;
	cursor: pointer;
}

.acx-quiz-ordering-move-up:disabled,
.acx-quiz-ordering-move-down:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}

.acx-quiz-result {
	font-weight: 600;
	margin: 12px 0;
}

.acx-quiz-result-pass {
	color: #00a32a;
}

.acx-quiz-result-fail {
	color: #d63638;
}

.acx-quiz-result-pending {
	color: #996800;
}

.acx-quiz-attempts-remaining {
	display: block;
	margin: 8px 0 0;
	font-size: 13px;
	color: #50575e;
}

.acx-quiz-review-button {
	background: #fff;
	color: #2271b1;
	border: 1px solid #2271b1;
	margin-left: 8px;
}

.acx-quiz-review-button:hover:not(:disabled) {
	background: #f0f6fc;
}

.acx-quiz-review-list {
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
	border: 1px solid #dcdcde;
	border-radius: 4px;
}

.acx-quiz-review-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 14px;
	border-bottom: 1px solid #dcdcde;
}

.acx-quiz-review-item:last-child {
	border-bottom: none;
}

.acx-quiz-review-result {
	font-weight: 600;
}

.acx-quiz-review-item-correct .acx-quiz-review-result {
	color: #00a32a;
}

.acx-quiz-review-item-incorrect .acx-quiz-review-result {
	color: #d63638;
}

.acx-quiz-review-item-not-attempted .acx-quiz-review-result {
	color: #996800;
}

.acx-quiz-prev-button {
	background: #fff;
	color: #2271b1;
	border: 1px solid #2271b1;
	margin-right: 8px;
}

.acx-quiz-prev-button:hover:not(:disabled) {
	background: #f0f6fc;
}

.acx-quiz-nav-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 14px;
	padding-bottom: 10px;
	border-bottom: 1px solid #dcdcde;
}

.acx-quiz-progress-label {
	font-weight: 600;
	color: #1d2327;
}

.acx-quiz-timer-label {
	font-weight: 600;
	color: #2271b1;
	padding: 4px 10px;
	border: 1px solid #2271b1;
	border-radius: 4px;
}

.acx-book-page {
	max-width: 700px;
}

.acx-book-page-step {
	margin-bottom: 20px;
}

.acx-book-page-step label {
	display: block;
	font-weight: 600;
	margin-bottom: 6px;
}

.acx-book-page-step select {
	width: 100%;
	max-width: 400px;
	padding: 8px;
}

.acx-book-page-message {
	color: #646970;
	font-style: italic;
}

.acx-book-page-message.is-loading::before {
	content: '';
}

.acx-book-page-message-error {
	color: #d63638;
	font-style: normal;
	font-weight: 600;
}

.acx-book-page-message-success {
	color: #0a5c1f;
	font-style: normal;
	font-weight: 600;
}

.acx-book-page-enroll {
	margin-top: 12px;
}

.acx-book-page-enroll-error {
	color: #d63638;
	margin-top: 8px;
}

/* Collapsed lesson list / accordion (course page) */

.acx-lesson-accordion-item {
	border: 1px solid #dcdcde;
	border-radius: 4px;
	margin-bottom: 10px;
	overflow: hidden;
}

.acx-lesson-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	padding: 10px 14px;
	background: #f6f7f7;
	transition: background-color 0.15s ease;
}

/* Hovering anywhere in the row (not only the title text itself) now
gives this light-tint feedback - deliberately light enough to never
risk clashing with either of .acx-lesson-title-toggle's own two text
colors below (the default dark gray, or completed's own green). */
.acx-lesson-row:hover {
	background: #dcdcde;
}

.acx-lesson-title-toggle,
.acx-lesson-title-toggle:hover,
.acx-lesson-title-toggle:focus,
.acx-lesson-title-toggle:active {
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	text-align: left;
	cursor: pointer;
	color: #1d2327;
	flex: 1;
}

.acx-lesson-accordion-item.acx-lesson-completed .acx-lesson-title-toggle {
	color: #116430;
}

.acx-lesson-locked-note {
	font-size: 12px;
	font-style: italic;
	color: #646970;
}

.acx-lesson-bullet-panel {
	padding: 14px;
	border-top: 1px solid #dcdcde;
}

.acx-lesson-bullet-list {
	margin: 0 0 14px 20px;
	list-style: disc;
}

.acx-lesson-bullet-list li {
	margin-bottom: 6px;
	color: #3c434a;
}

.acx-start-lesson-button {
	display: inline-block;
}

/* Dedicated single-lesson page */

.acx-lesson-page-view {
	max-width: 800px;
}

.acx-lesson-back-link {
	display: inline-block;
	margin-bottom: 14px;
	color: #2271b1;
	text-decoration: none;
}

.acx-lesson-back-link:hover {
	text-decoration: underline;
}

.acx-lesson-page-title {
	margin: 0 0 8px;
}

.acx-lesson-progress {
	margin-bottom: 16px;
}

.acx-lesson-completed-label {
	color: #00a32a;
	font-weight: 600;
	font-size: 13px;
}

.acx-lesson-page-content {
	margin-bottom: 24px;
	line-height: 1.6;
}

.acx-lesson-tabs-nav {
	display: flex;
	gap: 4px;
	border-bottom: 2px solid #dcdcde;
	flex-wrap: wrap;
}

.acx-lesson-tab-btn,
.acx-lesson-tab-btn:hover,
.acx-lesson-tab-btn:focus,
.acx-lesson-tab-btn.acx-lesson-tab-active {
	background: none;
	border-radius: 0;
}

.acx-lesson-tab-btn {
	border: 0;
	border-bottom: 2px solid transparent;
	margin-bottom: -2px;
	padding: 10px 16px;
	font-size: 14px;
	font-weight: 600;
	color: #646970;
	cursor: pointer;
}

.acx-lesson-tab-btn:hover {
	color: #1d2327;
	background: #f8f9fa;
}

.acx-lesson-tab-btn.acx-lesson-tab-active {
	color: #2271b1;
	border-bottom-color: #2271b1;
	background: #f8f9fa;
}

.acx-lesson-tab-panel {
	padding: 20px 0;
}

.acx-lesson-slide-deck-embed {
	width: 100%;
	height: 600px;
	border: 1px solid #dcdcde;
	margin-bottom: 14px;
}

.acx-lesson-download-link {
	display: inline-block;
}

.acx-lesson-attachments-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.acx-lesson-attachments-list li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 14px;
	border: 1px solid #dcdcde;
	border-radius: 4px;
	margin-bottom: 8px;
}

.acx-lesson-attachment-name {
	font-weight: 600;
}

.acx-lesson-attachment-size {
	color: #646970;
	font-size: 13px;
}

.acx-lesson-attachment-download {
	color: #2271b1;
	text-decoration: none;
	font-weight: 600;
}

.acx-lesson-attachment-download:hover {
	text-decoration: underline;
}

/* Lecture recordings table (dedicated lesson page, Recording tab) */

.acx-lesson-videos-table {
	width: 100%;
	border-collapse: collapse;
}

.acx-lesson-videos-table th,
.acx-lesson-videos-table td {
	text-align: left;
	padding: 10px 12px;
	border-bottom: 1px solid #dcdcde;
	vertical-align: middle;
}

.acx-lesson-videos-table th {
	font-size: 12px;
	font-weight: 600;
	color: #646970;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.acx-video-thumb-cell {
	width: 120px;
}

.acx-video-thumb-button {
	position: relative;
	display: block;
	width: 120px;
	height: 68px;
	padding: 0;
	border: 1px solid #dcdcde;
	border-radius: 4px;
	background: #1d2327;
	cursor: pointer;
	overflow: hidden;
}

.acx-video-thumb-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	pointer-events: none;
}

.acx-video-thumb-play-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate( -50%, -50% );
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 8px 0 8px 14px;
	border-color: transparent transparent transparent #ffffff;
	filter: drop-shadow( 0 1px 2px rgba( 0, 0, 0, 0.6 ) );
}

.acx-video-play-button {
	white-space: nowrap;
}

.acx-video-player-row td {
	padding: 14px 12px;
	border-bottom: 1px solid #dcdcde;
}

.acx-video-player {
	width: 100%;
	max-height: 480px;
	display: block;
	background: #000;
}

.acx-mux-not-ready,
.acx-mux-needs-custom-player,
.acx-bunny-not-ready,
.acx-bunny-needs-custom-player {
	height: 200px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	text-align: center;
	padding: 20px;
	box-sizing: border-box;
}

iframe.acx-video-player {
	height: 480px;
}

.acx-player-rounded.acx-video-player,
.acx-player-rounded.acx-video-player.video-js {
	border-radius: 8px;
	overflow: hidden;
}

/* Shades the seek bar up to the furthest point actually watched -
   separate from Video.js's own built-in fill, which only ever shows
   the current playback position, not how far a student has gotten in
   total (relevant once they've rewound to review something earlier). */
.acx-watched-progress {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: 0;
	background: rgba(255, 255, 255, 0.3);
	pointer-events: none;
	z-index: 1;
}

/* The logged-in student's own identity, overlaid on the video -
   pointer-events:none so it never blocks clicking/dragging the player
   underneath it; opacity is set inline per lesson, from the admin's
   own saved setting. */
.acx-player-watermark {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
	pointer-events: none;
	z-index: 2;
	white-space: nowrap;
}

/* Shown when the concurrent-session guard pauses playback because
   this same video started playing in another tab/device. */
.acx-concurrent-session-notice {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 40px;
	margin: 0 12px;
	padding: 10px 14px;
	background: rgba(0, 0, 0, 0.85);
	color: #fff;
	font-size: 13px;
	text-align: center;
	border-radius: 4px;
	z-index: 3;
}

/* show_continue_prompt - centered over the (deliberately paused)
   video, asking the student to actually choose whether to resume or
   restart, rather than the existing resume system silently deciding
   for them. Highest z-index of any player overlay, since this is the
   one thing that needs to be seen and responded to before anything
   else happens. */
.acx-continue-prompt {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	background: rgba(0, 0, 0, 0.75);
	z-index: 4;
	text-align: center;
	padding: 16px;
}
.acx-continue-prompt p {
	color: #fff;
	font-size: 16px;
	margin: 0;
}
.acx-continue-prompt-buttons {
	display: flex;
	gap: 12px;
}
.acx-continue-prompt-buttons button {
	padding: 8px 20px;
	border-radius: 4px;
	border: none;
	font-size: 14px;
	cursor: pointer;
}
.acx-continue-prompt-resume {
	background: var(--acx-player-theme-color, #2271b1);
	color: #fff;
}
.acx-continue-prompt-restart {
	background: rgba(255, 255, 255, 0.15);
	color: #fff;
}

/* theme_color - read by the player's own most visually prominent
   "accent" elements: the seek bar's own played-progress fill, the
   volume slider's own fill, and the big play button's own background.
   Falls back to Video.js's own stock blue when unset. */
.acx-video-player.video-js {
	--acx-player-theme-color: #2b333f;
}
.acx-video-player.video-js .vjs-play-progress,
.acx-video-player.video-js .vjs-volume-level {
	background-color: var(--acx-player-theme-color);
}
.acx-video-player.video-js .vjs-big-play-button {
	background-color: var(--acx-player-theme-color);
	border-color: var(--acx-player-theme-color);
}

/* custom_spinner_url - hides Video.js's own default animated ring
   (drawn via :before/:after) and shows the admin's own uploaded image
   instead. */
.acx-video-player.video-js.acx-custom-spinner .vjs-loading-spinner {
	border: none;
	background-image: var(--acx-player-spinner-image);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}
.acx-video-player.video-js.acx-custom-spinner .vjs-loading-spinner:before,
.acx-video-player.video-js.acx-custom-spinner .vjs-loading-spinner:after {
	display: none;
}

/* show_title_overlay - the video's own name/title, top-left,
   non-interactive so it never blocks clicking/dragging the player
   underneath it - mirrors the watermark overlay's own pattern. */
.acx-player-title-overlay {
	position: absolute;
	top: 12px;
	left: 12px;
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
	pointer-events: none;
	z-index: 2;
	max-width: 80%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* big_play_button_style - "minimal" (smaller, no background circle)
   and "custom-icon" (a rounded-square shape instead of Video.js's own
   stock circle) variants; "default" needs no override at all. */
.acx-big-play-minimal .vjs-big-play-button {
	background-color: transparent;
	border: none;
	width: 1.5em;
	height: 1.5em;
	line-height: 1.5em;
	font-size: 3em;
}
.acx-big-play-custom-icon .vjs-big-play-button {
	border-radius: 12px;
	width: 2em;
	height: 1.4em;
	line-height: 1.4em;
}

/* The custom download button's own icon (Video.js has no built-in
   download button of its own). An inline SVG background-image, not a
   Unicode character glyph - the previous version used one, and it
   rendered tiny and barely visible, since which font a browser falls
   back to for an arbitrary Unicode symbol (rather than an actual icon
   font) varies by OS and isn't something CSS can reliably control. An
   SVG paints identically everywhere regardless of installed fonts.
   Painted on the outer button itself, not only its own inner
   placeholder - Video.js's own core CSS reliably sizes that outer
   button the same as every other control-bar button (already proven
   correct, since those all render fine), which isn't something this
   plugin can be as fully certain of for the inner placeholder alone
   without Video.js's own source in hand. The inner placeholder is
   also explicitly given its own guaranteed, non-zero size below, as a
   second, defensive layer, so this doesn't rely on only one of the
   two elements actually having real space to paint into. */
.acx-video-player.video-js .vjs-download-button {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpolygon points='6,10 18,10 12,17'/%3E%3Crect x='11' y='3' width='2' height='10'/%3E%3Crect x='4' y='19' width='16' height='2'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 18px 18px;
}
.acx-video-player.video-js .vjs-download-button .vjs-icon-placeholder {
	display: inline-block;
	width: 1em;
	height: 1em;
}
.acx-video-player.video-js .vjs-download-button .vjs-icon-placeholder:before {
	content: none;
}

/* Responsive: stack the table on narrow screens (tablet/mobile) -
   each row becomes its own small card rather than a cramped,
   horizontally-scrolling table. */
@media ( max-width: 600px ) {
	.acx-lesson-videos-table thead {
		display: none;
	}

	.acx-lesson-videos-table,
	.acx-lesson-videos-table tbody,
	.acx-lesson-videos-table tr,
	.acx-lesson-videos-table td {
		display: block;
		width: 100%;
	}

	.acx-lesson-videos-table tr {
		border: 1px solid #dcdcde;
		border-radius: 4px;
		margin-bottom: 10px;
	}

	.acx-lesson-videos-table tr.acx-video-player-row {
		border: 0;
		margin-bottom: 14px;
	}

	.acx-lesson-videos-table td {
		border-bottom: 0;
		padding: 8px 12px;
	}

	.acx-video-thumb-cell {
		width: auto;
	}

	.acx-video-thumb-button {
		width: 100%;
		height: 160px;
	}
}

/* ==========================================================================
   Video Bookmarks & Timestamped Notes
   ========================================================================== */

.acx-video-bookmarks {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid #e2e4e7;
}

/* A dedicated secondary/outline button style, matching
   .acx-submit-button's own radius/padding/font-size but as a lighter,
   less prominent variant - .acx-dashboard-action-button (this
   plugin's own existing secondary-button class) lives in
   dashboard.css, which is never loaded on the lesson page this file's
   own UI actually renders on, so reusing it directly would leave
   these buttons completely unstyled there. */
.acx-bookmark-secondary-btn {
	display: inline-flex;
	align-items: center;
	padding: 8px 14px;
	margin-right: 6px;
	margin-top: 6px;
	background: #f0f0f1;
	color: #2c3338;
	border: 1px solid #c3c4c7;
	border-radius: 4px;
	cursor: pointer;
	font-size: 13px;
	transition: background-color 0.15s ease;
}

.acx-bookmark-secondary-btn:hover:not(:disabled) {
	background: #e2e4e7;
}

.acx-bookmark-secondary-btn:disabled {
	opacity: 0.6;
	cursor: default;
}

.acx-bookmark-delete-btn {
	color: #b32d2e;
	border-color: #e0b4b4;
}

.acx-bookmark-delete-btn:hover:not(:disabled) {
	background: #fbeaea;
}

/* ---- Add Bookmark form ---- */

.acx-bookmark-form {
	margin-top: 10px;
	padding: 12px 14px;
	background: #f6f7f7;
	border: 1px solid #dcdcde;
	border-radius: 4px;
	/* Never a fixed width - this plugin's own responsive requirement
	   (no horizontal overflow on any screen size) depends on every
	   child here staying fluid within whatever width the lesson page
	   itself already provides. */
	max-width: 100%;
	box-sizing: border-box;
}

.acx-bookmark-form p {
	margin: 0 0 8px;
}

.acx-bookmark-form-note {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	padding: 8px 10px;
	border: 1px solid #c3c4c7;
	border-radius: 4px;
	font-family: inherit;
	font-size: 13px;
	resize: vertical;
}

.acx-bookmark-form-message {
	color: #b32d2e;
	font-size: 13px;
}

/* ---- Timeline markers ---- */

/* Sits directly on top of Video.js's own seek bar element (the
   custom player) or this file's own separate fallback strip (the
   default player) - see lesson-bookmarks.js's own top docblock for
   why the two differ. pointer-events: none on the host itself is
   what keeps this overlay from ever intercepting a click meant for
   the seek bar underneath it - only an actual marker (which
   explicitly re-enables pointer-events below) is ever clickable,
   exactly this feature's own requirement 4 ("use an overlay without
   breaking the controls"). */
.acx-bookmark-markers {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 2;
}

.acx-bookmark-markers-fallback {
	position: relative;
	height: 6px;
	margin-top: 8px;
	background: #dcdcde;
	border-radius: 3px;
}

.acx-bookmark-marker {
	position: absolute;
	top: 50%;
	width: 10px;
	height: 10px;
	margin-left: -5px;
	transform: translateY(-50%);
	background: #ffb900;
	border: 2px solid #fff;
	border-radius: 50%;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3);
	padding: 0;
	cursor: pointer;
	pointer-events: all;
	z-index: 2;
}

.acx-bookmark-markers-fallback .acx-bookmark-marker {
	top: 50%;
}

/* ---- My Bookmarks list ---- */

.acx-bookmark-list {
	margin-top: 14px;
}

.acx-bookmark-list ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.acx-bookmark-list li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	padding: 8px 0;
	border-bottom: 1px solid #f0f0f1;
}

.acx-bookmark-list-time {
	flex: 0 0 auto;
	font-weight: 600;
	color: #2271b1;
	min-width: 48px;
}

.acx-bookmark-list-note {
	flex: 1 1 200px;
	min-width: 0;
	overflow-wrap: break-word;
	color: #2c3338;
}

.acx-bookmark-list-empty {
	margin-top: 8px;
}

/* Every element above this point is already fluid (flex-wrap on list
   rows, 100%-width form fields, no fixed pixel widths anywhere) so no
   width-specific overrides are actually needed at any breakpoint -
   this rule only tightens spacing slightly on a narrow screen,
   matching the existing breakpoint immediately above this whole
   section. */
@media (max-width: 600px) {
	.acx-bookmark-list li {
		gap: 6px;
	}

	.acx-bookmark-secondary-btn {
		padding: 8px 10px;
		font-size: 12px;
	}
}

/* =====================================================================
   Video protection (CognitionX > Video Protection) - see
   assets/js/video-protection.js
   ===================================================================== */

.acx-protect-noselect,
.acx-protect-noselect * {
	-webkit-user-select: none;
	user-select: none;
	-webkit-user-drag: none;
}

/* Hide a protected player entirely when the page is printed / saved as PDF. */
@media print {
	.acx-protect-noprint {
		display: none !important;
	}
}

/* Blackout: shown on PrintScreen, window focus loss, or DevTools being open. */
.acx-protect-blackout {
	background: #000 !important;
}

.acx-protect-blackout video,
.acx-protect-blackout iframe,
.acx-protect-blackout .vjs-tech,
.acx-protect-blackout .vjs-poster {
	visibility: hidden !important;
}

.acx-protect-notice {
	display: none;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 2147483001;
	max-width: 80%;
	padding: 12px 18px;
	border-radius: 8px;
	background: rgba(0, 0, 0, 0.85);
	color: #fff;
	font: 600 14px/1.4 sans-serif;
	text-align: center;
	pointer-events: none;
}

/* Bunny Enterprise-DRM embed wrapper. */
.acx-bunny-embed-wrap {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #000;
}

.acx-bunny-embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.acx-bunny-fs-button {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 2147483001;
	width: 34px;
	height: 34px;
	border: 0;
	border-radius: 6px;
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
}

.acx-bunny-fs-button:hover {
	background: rgba(0, 0, 0, 0.8);
}

.acx-bunny-pseudo-fs {
	position: fixed !important;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	aspect-ratio: auto;
	z-index: 2147483600;
}

.acx-drm-unsupported {
	padding: 14px;
	border-radius: 6px;
	background: #fff4e5;
	color: #7a4a00;
}

/* =====================================================================
   Course reviews - assets/js/course-reviews.js
   ===================================================================== */

.acx-course-reviews { margin: 32px 0; padding-top: 24px; border-top: 1px solid #e2e4e7; }
.acx-cr-heading { margin: 0 0 14px; font-size: 22px; }
.acx-cr-summary-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.acx-cr-average { font-size: 34px; font-weight: 700; line-height: 1; }
.acx-cr-stars { color: #f5a623; font-size: 18px; letter-spacing: 1px; white-space: nowrap; }
.acx-cr-count, .acx-cr-date { color: #646970; font-size: 13px; }
.acx-cr-bars { max-width: 380px; margin-bottom: 18px; }
.acx-cr-bar-row { display: flex; align-items: center; gap: 8px; font-size: 13px; margin: 3px 0; }
.acx-cr-bar-label { width: 34px; color: #50575e; }
.acx-cr-bar-track { flex: 1; height: 8px; background: #e8eaed; border-radius: 4px; overflow: hidden; }
.acx-cr-bar-fill { display: block; height: 100%; background: #f5a623; }
.acx-cr-bar-count { width: 28px; text-align: right; color: #50575e; }
.acx-cr-note, .acx-cr-none, .acx-cr-loading, .acx-cr-error { color: #50575e; }
.acx-cr-error { color: #b32d2e; }

.acx-cr-form { margin: 16px 0 24px; padding: 16px 18px; background: #f8f9fb; border: 1px solid #e2e4e7; border-radius: 10px; }
.acx-cr-form-title { margin: 0 0 8px; font-size: 16px; }
.acx-cr-status { margin: 0 0 10px; padding: 6px 10px; border-radius: 6px; font-size: 13px; }
.acx-cr-status-pending { background: #fffbeb; color: #8a5a00; }
.acx-cr-status-approved { background: #ecfdf5; color: #065f46; }
.acx-cr-status-rejected { background: #fef2f2; color: #991b1b; }
.acx-cr-star-input { display: flex; gap: 2px; margin-bottom: 10px; }
.acx-cr-star-btn { border: 0; background: transparent; padding: 0 2px; font-size: 30px; line-height: 1; color: #c3c4c7; cursor: pointer; }
.acx-cr-star-btn.is-on { color: #f5a623; }
.acx-cr-star-btn:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; border-radius: 4px; }
.acx-cr-textarea { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid #c3c4c7; border-radius: 8px; font: inherit; resize: vertical; }
.acx-cr-message { min-height: 1.2em; margin: 8px 0; font-size: 14px; }
.acx-cr-message.is-ok { color: #065f46; }
.acx-cr-message.is-error { color: #b32d2e; }
.acx-cr-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.acx-cr-submit, .acx-cr-more { padding: 10px 22px; border: 0; border-radius: 8px; background: #2563eb; color: #fff; font-weight: 600; cursor: pointer; }
.acx-cr-submit:hover, .acx-cr-more:hover { background: #1d4ed8; }
.acx-cr-submit:disabled, .acx-cr-more:disabled { opacity: .6; cursor: default; }
.acx-cr-delete { padding: 10px 16px; border: 1px solid #d63638; border-radius: 8px; background: #fff; color: #d63638; cursor: pointer; }

.acx-cr-item { padding: 14px 0; border-bottom: 1px solid #eceef1; }
.acx-cr-item-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.acx-cr-comment { margin: 6px 0 0; white-space: pre-wrap; word-break: break-word; }
/* Instructor replies to reviews */
.acx-cr-reply { margin: 10px 0 0 16px; padding: 8px 12px; border-left: 3px solid #2563eb; background: #f6f7f7; border-radius: 0 6px 6px 0; }
.acx-cr-reply-head { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.acx-cr-reply .acx-cr-comment { margin-top: 4px; }
.acx-cr-reply-controls { margin: 6px 0 0 16px; display: flex; gap: 14px; }
.acx-cr-link-btn { background: none; border: 0; padding: 0; color: #2563eb; cursor: pointer; text-decoration: underline; font: inherit; font-size: 13px; }
.acx-cr-link-btn:hover { color: #1d4ed8; }
.acx-cr-reply-form { margin: 10px 0 0 16px; }
.acx-cr-reply-form .acx-cr-actions { display: flex; gap: 12px; align-items: center; }
.acx-cr-more { margin-top: 14px; }

/* =====================================================================
   Course catalog search + filters, and card metadata - assets/js/lms.js
   ===================================================================== */

.acx-catalog-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin: 0 0 14px; padding: 14px 16px; background: #f8f9fb; border: 1px solid #e2e4e7; border-radius: 10px; }
.acx-cf-field { display: flex; flex-direction: column; gap: 4px; min-width: 140px; }
.acx-cf-search { flex: 1 1 240px; }
.acx-cf-label { font-size: 12px; font-weight: 600; color: #50575e; }
.acx-cf-input, .acx-cf-select { height: 40px; padding: 0 12px; border: 1px solid #c3c4c7; border-radius: 8px; background: #fff; font: inherit; box-sizing: border-box; width: 100%; }
.acx-cf-clear { height: 40px; padding: 0 16px; border: 1px solid #c3c4c7; border-radius: 8px; background: #fff; color: #2563eb; font-weight: 600; cursor: pointer; }
.acx-cf-clear:hover { background: #eef2ff; }
.acx-cf-status { margin: 0 0 12px; font-size: 14px; color: #50575e; min-height: 1.2em; }
.acx-cf-empty { grid-column: 1 / -1; color: #50575e; }
.acx-courses-list.is-loading { opacity: .55; transition: opacity .15s; }
.acx-course-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 6px; }
.acx-course-chip { padding: 2px 9px; border-radius: 999px; background: #eef2ff; color: #3730a3; font-size: 12px; font-weight: 600; }
.acx-course-chip-level { background: #ecfdf5; color: #065f46; }
.acx-course-rating { margin: 0 0 6px; font-size: 13px; color: #50575e; }
.acx-course-rating-stars { color: #f5a623; }
.acx-course-rating-link { color: inherit; text-decoration: none; }
.acx-course-rating-link:hover, .acx-course-rating-link:focus { text-decoration: underline; }

/* =====================================================================
   Lesson assignments - assets/js/lesson-assignment.js
   ===================================================================== */

.acx-lesson-assignment { margin: 32px 0; padding: 22px 24px; background: #fff; border: 1px solid #e2e4e7; border-radius: 12px; }
.acx-lesson-assignment[hidden] { display: none; }
.acx-asg-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.acx-asg-title { margin: 0; font-size: 22px; }
.acx-asg-points { padding: 3px 12px; border-radius: 999px; background: #eef2ff; color: #3730a3; font-size: 13px; font-weight: 600; }
.acx-asg-instructions { white-space: pre-wrap; word-break: break-word; line-height: 1.6; margin-bottom: 12px; }
.acx-asg-rubric { margin: 0 0 14px; padding: 8px 12px; background: #f8f9fb; border: 1px solid #e2e4e7; border-radius: 8px; }
.acx-asg-rubric summary { cursor: pointer; font-weight: 600; }
.acx-asg-rubric-body { white-space: pre-wrap; margin-top: 8px; font-size: 14px; }
.acx-asg-flash { padding: 8px 12px; border-radius: 8px; background: #ecfdf5; color: #065f46; font-weight: 600; }
.acx-asg-note { color: #50575e; font-style: italic; }
.acx-asg-due { margin: 8px 0; font-weight: 600; }
.acx-asg-due.is-overdue, .acx-asg-closed { color: #b32d2e; }
.acx-asg-closed { font-style: normal; font-weight: 600; }
.acx-asg-late { display: inline-block; margin-right: 8px; padding: 1px 8px; border-radius: 999px; background: #fcf0f1; color: #b32d2e; font-size: 12px; font-weight: 600; }
.acx-asg-status { margin: 14px 0; padding: 12px 16px; border-radius: 10px; border: 1px solid #e2e4e7; background: #f8f9fb; }
.acx-asg-status-graded { background: #ecfdf5; border-color: #6ee7b7; }
.acx-asg-status-resubmit { background: #fffbeb; border-color: #fcd34d; }
.acx-asg-grade { font-size: 18px; margin-right: 10px; }
.acx-asg-when { color: #50575e; font-size: 13px; }
.acx-asg-feedback { margin-top: 10px; padding-top: 10px; border-top: 1px dashed #c3c4c7; }
.acx-asg-feedback-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #50575e; margin-bottom: 4px; }
.acx-asg-feedback-body, .acx-asg-text { white-space: pre-wrap; word-break: break-word; }
.acx-asg-mine { margin: 14px 0; }
.acx-asg-mine h4, .acx-asg-form h4 { margin: 0 0 8px; font-size: 16px; }
.acx-asg-text { padding: 10px 12px; border: 1px solid #e2e4e7; border-radius: 8px; background: #fff; }
.acx-asg-row { margin: 6px 0; word-break: break-word; }
.acx-asg-form { margin-top: 18px; padding-top: 16px; border-top: 1px solid #e2e4e7; }
.acx-asg-field { display: block; margin-bottom: 14px; }
.acx-asg-label { display: block; font-weight: 600; margin-bottom: 4px; }
.acx-asg-textarea, .acx-asg-input { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid #c3c4c7; border-radius: 8px; font: inherit; }
.acx-asg-textarea { resize: vertical; }
.acx-asg-hint { display: block; margin-top: 4px; font-size: 12px; color: #646970; }
.acx-asg-message { min-height: 1.2em; margin: 6px 0; font-size: 14px; }
.acx-asg-message.is-error { color: #b32d2e; }
.acx-asg-submit { padding: 10px 24px; border: 0; border-radius: 8px; background: #2563eb; color: #fff; font-weight: 600; cursor: pointer; }
.acx-asg-submit:hover { background: #1d4ed8; }
.acx-asg-submit:disabled { opacity: .6; cursor: default; }

/* =====================================================================
   Lesson live class - assets/js/lesson-live-session.js
   ===================================================================== */

.acx-lesson-live-session { margin: 32px 0; padding: 22px 24px; background: #fff; border: 1px solid #e2e4e7; border-left: 4px solid #2563eb; border-radius: 12px; }
.acx-lesson-live-session[hidden] { display: none; }
.acx-live-title { margin: 0 0 6px; font-size: 22px; }
.acx-live-lesson { margin: 0 0 6px; font-weight: 600; }
.acx-live-when { margin: 0; font-size: 18px; font-weight: 600; }
.acx-live-local, .acx-live-meta, .acx-live-note { margin: 4px 0 0; color: #50575e; font-size: 14px; }
.acx-live-status { margin: 14px 0 8px; font-weight: 600; min-height: 1.2em; }
.acx-live-status.is-live { color: #065f46; }
.acx-live-action { margin-bottom: 4px; }
.acx-live-button { display: inline-block; padding: 12px 28px; border-radius: 8px; font-weight: 700; text-decoration: none; }
.acx-live-button.is-open { background: #2563eb; color: #fff; }
.acx-live-button.is-open:hover { background: #1d4ed8; }
.acx-live-button.is-disabled { background: #e8eaed; color: #8c8f94; cursor: not-allowed; }
.acx-live-joined { margin: 10px 0 0; color: #065f46; font-weight: 600; }