/* DigiAcademy Extensions - lesson transcript (frontend).
   Uses the theme's CSS variables (--maincolor, --brradius, --mainfontnum) with fallbacks. */

.dae-item-actions {
	display: inline;
}

/* Sits inside the theme's .course_item h4, next to the .free_play badge. */
.course_item .dae-tr-btn {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	width: auto;
	height: auto;
	min-height: 0;
	margin: 0 8px 0 0;
	padding: 0 10px;
	font: inherit;
	font-size: 10px;
	font-weight: 400;
	line-height: 16px;
	text-transform: none;
	vertical-align: middle;
	color: var(--maincolor);
	background: transparent;
	border: 1px solid var(--maincolor);
	border-radius: 22px;
	box-shadow: none;
	cursor: pointer;
	transition: background-color 0.2s linear, color 0.2s linear;
}

.course_item .dae-tr-btn i {
	font-size: 11px;
}

.course_item .dae-tr-btn:hover,
.course_item .dae-tr-btn:focus-visible,
.course_item .dae-tr-btn[aria-expanded="true"] {
	color: #fff;
	background: var(--maincolor);
}

.course_item .dae-tr-btn.is-locked {
	color: #999;
	border-color: #d5d5d5;
}

.course_item .dae-tr-btn.is-locked:hover,
.course_item .dae-tr-btn.is-locked[aria-expanded="true"] {
	color: #777;
	background: #FFF;
}

.dae-tr-panel {
	margin: -4px 0 10px;
	padding: 12px 15px;
	max-height: 420px;
	overflow-y: auto;
	font-size: 12px;
	line-height: 2;
	border: 1px solid #eaeaea;
	border-radius: var(--brradius, 6px);
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
}

.dae-tr-text,
.dae-tr-seg-text {
	white-space: pre-line;
	overflow-wrap: anywhere;
}

.dae-tr-msg {
	margin: 0;
	color: #888;
}

.dae-tr-msg.is-error {
	color: color-mix(in srgb, var(--secondcolor) 45%, #000);
}

.dae-tr-segments {
	margin: 0;
	padding: 0;
	list-style: none;
}

.dae-tr-segments li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	padding: 5px 0;
	border-bottom: 1px dashed #FFF;
}

.dae-tr-segments li:last-child {
	border-bottom: 0;
}

.dae-tr-time {
	flex: 0 0 auto;
	min-width: 52px;
	padding: 0 8px !important;
	font-family: var(--mainfontnum, inherit);
	font-size: 11px !important;
	line-height: 22px !important;
	text-align: center;
	direction: ltr;
	color: #fff;
	background: #f9f9f9;
	border: 0;
	border-radius: 22px;
	box-shadow: none;
}

button.dae-tr-time {
	cursor: pointer;
	transition: background-color 0.2s linear, color 0.2s linear;
}

button.dae-tr-time:hover,
button.dae-tr-time:focus-visible {
	color: #fff;
	background: var(--maincolor);
}

.dae-tr-seg-text {
	flex: 1 1 auto;
	min-width: 0;
}

@media (max-width: 767px) {
	.course_item .dae-tr-btn {
		margin-right: 4px;
		padding: 0 8px;
	}

	.dae-tr-panel {
		max-height: 60vh;
		padding: 10px 12px;
	}

	.dae-tr-segments li {
		gap: 8px;
	}
}