/* CBT Engine — the audio bar (Step 7, 0.5.7).
 *
 * Rebuilt from the audio bar of the production Listening code (Code IELTS
 * Listening Test for Divi 5 theme: .ielts-audio-bar / .audio-controls-wrapper
 * / .audio-ctrl-icon / .play-pause-btn / .ielts-slider / .vol-btn). The
 * VALUES were copied — sizes, gaps, paddings, the 768 px and 400 px steps —
 * the `!important`s and the theme selectors were not: the player owns its
 * elements and gives each of them an explicit style (two classes deep, so a
 * theme's `button:hover` cannot win).
 *
 * Colours are the core's variables (cbt-shared.css + Settings → Theme
 * colours). The few shades of the old bar that the core does not have are
 * named by ROLE below and mixed from core variables; no colour is typed.
 * Logical properties only (a right-to-left page flips the bar by itself;
 * the slider fill is flipped explicitly because gradients have no "inline"
 * direction). No !important.
 *
 * The exam room places the bar in its own header and may override the
 * variables of .cbt-player (height, paddings, gap, volume width).
 */

.cbt-player {
	/* Roles → core colours. */
	--cbt-player-bg: var(--cbt-bg);                                                    /* the bar (#f8fafc in the old code) */
	--cbt-player-edge: var(--cbt-border-soft);                                         /* its lower edge (#edf2f7) */
	--cbt-player-icon: color-mix(in srgb, var(--cbt-primary) 50%, var(--cbt-text-dark)); /* ±5 icons (#285e6a) */
	--cbt-player-icon-small: var(--cbt-text);                                          /* ±5 icons on a phone (#2c3e50) */
	--cbt-player-speaker: var(--cbt-primary-light);                                    /* the speaker (#37b7c3) */
	--cbt-player-play-bg: var(--cbt-primary-light);                                    /* play button (#37b7c3) */
	--cbt-player-play-hover: color-mix(in srgb, var(--cbt-primary) 80%, var(--cbt-primary-light)); /* (#2b9ca7) */
	--cbt-player-play-fg: var(--cbt-white);
	--cbt-player-play-shadow: color-mix(in srgb, var(--cbt-primary) 20%, transparent); /* phone play button */
	--cbt-player-fill: var(--cbt-primary-light);                                       /* slider: played / volume part */
	--cbt-player-track: var(--cbt-border);                                             /* slider: the rest */
	--cbt-player-thumb: var(--cbt-white);
	--cbt-player-thumb-edge: var(--cbt-border);
	--cbt-player-thumb-shadow: color-mix(in srgb, var(--cbt-text-dark) 20%, transparent);
	--cbt-player-focus: var(--cbt-primary-light);
	/* Measurements of the old bar (desktop). */
	--cbt-player-height: 56px;
	--cbt-player-pad-x: 40px;
	--cbt-player-gap: clamp(1px, 1.2vw, 18px);
	--cbt-player-icon-box: 50px;
	/* The old CSS asked for a 46 px arc (22 px speaker) inside a 50 px (30 px) button, but it
	 * never removed the browser's own 6 px side padding of a <button>: what people SAW was a
	 * 38 px arc and an 18 px speaker (measured side by side). Those seen sizes are used here,
	 * with no padding. */
	--cbt-player-skip-size: 38px;
	--cbt-player-speaker-size: 18px;
	--cbt-player-skip-stroke: 1;
	--cbt-player-jump-size: 16px;
	--cbt-player-jump-weight: 700;
	--cbt-player-play-size: 42px;
	--cbt-player-play-icon: 22px;
	--cbt-player-volume-width: 80px;

	display: flex;
	flex-direction: column;
	justify-content: center;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	min-height: var(--cbt-player-height);
	margin: 0;
	padding: 0 var(--cbt-player-pad-x);
	background-color: var(--cbt-player-bg);
	border: 0;
	border-block-end: 1px solid var(--cbt-player-edge);
	color: var(--cbt-text);
	font-family: var(--cbt-font);
	font-size: 14px;
	line-height: 1.4;
	text-align: start;
	-webkit-user-select: none;
	user-select: none;
}
.cbt-player *,
.cbt-player *::before,
.cbt-player *::after {
	box-sizing: border-box;
}
.cbt-player .cbt-player-audio {
	display: none;
}

/* In a page ([cbt_audio]): the same bar, closed on four sides. */
.cbt-player.is-boxed {
	border: 1px solid var(--cbt-player-edge);
	border-radius: var(--cbt-radius);
	margin: 0 0 1em;
}

/* The row (.audio-controls-wrapper). */
.cbt-player .cbt-player-bar {
	display: flex;
	align-items: center;
	width: 100%;
	max-width: none;
	min-width: 0;
	min-height: calc(var(--cbt-player-height) - 2px);
	gap: var(--cbt-player-gap);
}

/* ------------------------------------------------------------------ */
/* Buttons (.audio-ctrl-icon, .vol-btn, .play-pause-btn)               */
/* ------------------------------------------------------------------ */
.cbt-player .cbt-player-btn {
	-webkit-appearance: none;
	appearance: none;
	position: relative;
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: var(--cbt-player-icon-box);
	height: var(--cbt-player-icon-box);
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	box-shadow: none;
	color: var(--cbt-player-icon);
	font: inherit;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	text-decoration: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.cbt-player .cbt-player-btn:hover,
.cbt-player .cbt-player-btn:active,
.cbt-player .cbt-player-btn:focus {
	background: transparent;
	color: var(--cbt-player-icon);
	border: 0;
	box-shadow: none;
	outline: none;
}
.cbt-player .cbt-player-btn:focus-visible {
	outline: 2px solid var(--cbt-player-focus);
	outline-offset: 1px;
}
.cbt-player .cbt-player-btn:disabled {
	cursor: default;
	opacity: 0.4;
}
.cbt-player .cbt-player-svg {
	display: block;
	flex: 0 0 auto;
	margin: 0;
	pointer-events: none;
}

/* ±5 seconds: the arc with the number inside. */
.cbt-player .cbt-player-skip .cbt-player-svg {
	width: var(--cbt-player-skip-size);
	height: var(--cbt-player-skip-size);
	stroke-width: var(--cbt-player-skip-stroke);
}
.cbt-player .cbt-player-jump {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	transform: translateY(1px); /* the old bar sat it at 52 % */
	font-size: var(--cbt-player-jump-size);
	font-weight: var(--cbt-player-jump-weight);
	line-height: 1;
	pointer-events: none;
}

/* Play / pause. */
.cbt-player .cbt-player-play,
.cbt-player .cbt-player-play:hover,
.cbt-player .cbt-player-play:active,
.cbt-player .cbt-player-play:focus {
	width: var(--cbt-player-play-size);
	height: var(--cbt-player-play-size);
	background-color: var(--cbt-player-play-bg);
	color: var(--cbt-player-play-fg);
	transition: background-color 0.2s;
}
.cbt-player .cbt-player-play:hover,
.cbt-player .cbt-player-play:focus-visible {
	background-color: var(--cbt-player-play-hover);
}
.cbt-player .cbt-player-play .cbt-player-svg {
	width: var(--cbt-player-play-icon);
	height: var(--cbt-player-play-icon);
}
/* The icon follows the element's real state (class set by the play/pause events). */
.cbt-player .cbt-player-icon-pause,
.cbt-player.is-playing .cbt-player-icon-play {
	display: none;
}
.cbt-player.is-playing .cbt-player-icon-pause {
	display: block;
}

/* Loading a file (first play of a page player, or a slow disk): a ring in the button. */
.cbt-player.is-loading .cbt-player-play .cbt-player-svg {
	display: none;
}
.cbt-player.is-loading .cbt-player-play::after {
	content: "";
	display: block;
	width: 45%;
	height: 45%;
	border: 2px solid currentColor;
	border-block-start-color: transparent;
	border-radius: 50%;
	animation: cbt-player-spin 0.8s linear infinite;
}
@keyframes cbt-player-spin {
	to {
		transform: rotate(360deg);
	}
}
@media (prefers-reduced-motion: reduce) {
	.cbt-player.is-loading .cbt-player-play::after {
		animation-duration: 2.4s;
	}
}

/* Speaker: waves, or crossed out when the sound is really off. */
.cbt-player .cbt-player-mute,
.cbt-player .cbt-player-mute:hover,
.cbt-player .cbt-player-mute:active,
.cbt-player .cbt-player-mute:focus {
	color: var(--cbt-player-speaker);
}
.cbt-player .cbt-player-mute .cbt-player-svg {
	width: var(--cbt-player-speaker-size);
	height: var(--cbt-player-speaker-size);
}
.cbt-player .cbt-player-icon-muted,
.cbt-player.is-muted .cbt-player-icon-volume {
	display: none;
}
.cbt-player.is-muted .cbt-player-icon-muted {
	display: block;
}

/* ------------------------------------------------------------------ */
/* Time, progress, volume                                              */
/* ------------------------------------------------------------------ */
.cbt-player .cbt-player-time {
	flex: 0 0 auto;
	min-width: 45px;
	margin: 0;
	padding: 0;
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	color: var(--cbt-text);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}
.cbt-player .cbt-player-progress {
	display: flex;
	flex: 1;
	align-items: center;
	min-width: 0;
}
.cbt-player .cbt-player-volume {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	width: var(--cbt-player-volume-width);
	min-width: 0;
}

/* The two sliders (.ielts-slider): a 6 px track filled up to --val. */
.cbt-player .cbt-player-range {
	-webkit-appearance: none;
	appearance: none;
	display: block;
	width: 100%;
	height: 6px;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 3px;
	outline: none;
	box-shadow: none;
	background: linear-gradient(to right, var(--cbt-player-fill) var(--val, 0%), var(--cbt-player-track) var(--val, 0%));
	cursor: pointer;
	touch-action: none;
}
[dir="rtl"] .cbt-player .cbt-player-range {
	background: linear-gradient(to left, var(--cbt-player-fill) var(--val, 0%), var(--cbt-player-track) var(--val, 0%));
}
.cbt-player .cbt-player-range::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--cbt-player-thumb);
	border: 2px solid var(--cbt-player-thumb-edge);
	box-shadow: 0 1px 3px var(--cbt-player-thumb-shadow);
	transition: 0.1s;
}
.cbt-player .cbt-player-range::-moz-range-thumb {
	box-sizing: border-box;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--cbt-player-thumb);
	border: 2px solid var(--cbt-player-thumb-edge);
	box-shadow: 0 1px 3px var(--cbt-player-thumb-shadow);
}
.cbt-player .cbt-player-range::-moz-range-track {
	height: 6px;
	background: transparent;
	border: 0;
}
.cbt-player .cbt-player-range:focus-visible {
	outline: 2px solid var(--cbt-player-focus);
	outline-offset: 4px;
}
.cbt-player .cbt-player-range:disabled {
	cursor: default;
	opacity: 0.6;
}

/* iPhone / iPad ignore a page's volume: only the speaker (mute) stays. */
.cbt-player.no-volume-slider .cbt-player-volume {
	display: none;
}

/* ------------------------------------------------------------------ */
/* The line under the bar: a file that failed, a sound held back        */
/* ------------------------------------------------------------------ */
.cbt-player .cbt-player-status {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 12px;
	margin: 0;
	padding: 2px 0 10px;
	font-size: 14px;
	line-height: 1.4;
	color: var(--cbt-text-muted);
}
.cbt-player .cbt-player-status.is-error {
	color: var(--cbt-wrong);
	font-weight: 600;
}
.cbt-player .cbt-player-msg {
	flex: 1 1 16em;
	min-width: 0;
	overflow-wrap: anywhere;
}
.cbt-player .cbt-player-action,
.cbt-player .cbt-player-action:hover,
.cbt-player .cbt-player-action:active,
.cbt-player .cbt-player-action:focus {
	-webkit-appearance: none;
	appearance: none;
	flex: 0 0 auto;
	width: auto;
	min-width: 0;
	height: auto;
	min-height: 0;
	margin: 0;
	padding: 5px 16px;
	letter-spacing: normal;
	border: 1px solid var(--cbt-border);
	border-radius: var(--cbt-radius-pill);
	background: var(--cbt-white);
	box-shadow: none;
	color: var(--cbt-primary);
	font: inherit;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;
	text-transform: none;
	cursor: pointer;
	outline: none;
}
.cbt-player .cbt-player-action:hover,
.cbt-player .cbt-player-action:focus-visible {
	border-color: var(--cbt-primary-light);
}
.cbt-player .cbt-player-action:focus-visible {
	outline: 2px solid var(--cbt-player-focus);
	outline-offset: 1px;
}

/* ------------------------------------------------------------------ */
/* Desktop (769 px and wider): the speaker sits close to its slider.   */
/* ------------------------------------------------------------------ */
@media screen and (min-width: 769px) {
	.cbt-player .cbt-player-mute {
		width: 30px;
	}
	.cbt-player .cbt-player-volume {
		margin-inline-start: -10px;
	}
}

/* ------------------------------------------------------------------ */
/* Phone and tablet (768 px and narrower) — values of the old bar.      */
/* ------------------------------------------------------------------ */
@media screen and (max-width: 768px) {
	.cbt-player {
		--cbt-player-height: 46px;
		--cbt-player-pad-x: 15px;
		--cbt-player-gap: 2px;
		--cbt-player-icon-box: 42px;
		--cbt-player-skip-size: 30px;  /* 38 px asked, 42 − 2 × 6 px seen */
		--cbt-player-speaker-size: 20px;
		--cbt-player-skip-stroke: 0.8;
		--cbt-player-jump-size: 13px;
		--cbt-player-jump-weight: 400;
		--cbt-player-play-size: 32px;
		--cbt-player-play-icon: 20px;
	}
	.cbt-player .cbt-player-bar {
		justify-content: space-between;
	}
	.cbt-player .cbt-player-skip,
	.cbt-player .cbt-player-skip:hover,
	.cbt-player .cbt-player-skip:active,
	.cbt-player .cbt-player-skip:focus {
		color: var(--cbt-player-icon-small);
	}
	.cbt-player .cbt-player-play,
	.cbt-player .cbt-player-play:hover,
	.cbt-player .cbt-player-play:active,
	.cbt-player .cbt-player-play:focus {
		flex-shrink: 0;
		margin: 0 2px;
		background-color: var(--cbt-primary);
		box-shadow: 0 2px 6px var(--cbt-player-play-shadow);
	}
	.cbt-player .cbt-player-play .cbt-player-icon-play {
		/* 20 px + 2 px asked in a 32 px button; the browser's 6 px padding left 20 px: seen 18 px. */
		width: 18px;
		height: 18px;
		margin-inline-start: 2px;
	}
	.cbt-player .cbt-player-time {
		min-width: 0;
		margin: 0 2px;
		color: var(--cbt-text-dark);
	}
	.cbt-player .cbt-player-volume {
		flex: 1 1 auto;
		width: 100%;
		margin: 0 4px;
	}
	.cbt-player .cbt-player-mute,
	.cbt-player .cbt-player-mute:hover,
	.cbt-player .cbt-player-mute:active,
	.cbt-player .cbt-player-mute:focus {
		width: auto;
		height: auto;
		color: var(--cbt-primary);
	}
}

/* Very small phones (400 px and narrower): no progress slider (as before). */
@media screen and (max-width: 400px) {
	.cbt-player .cbt-player-progress {
		display: none;
	}
}

/* ------------------------------------------------------------------ */
/* [cbt_audio] host: reserve the bar's place before the script draws it */
/* ------------------------------------------------------------------ */
.cbt-audio-player {
	display: block;
	max-width: 100%;
	min-width: 0;
	margin: 0 0 1em;
}
.cbt-audio-player > .cbt-player.is-boxed {
	margin: 0;
}
.cbt-audio-player:not([data-cbt-ready]) {
	min-height: 56px;
	border: 1px solid var(--cbt-border-soft);
	border-radius: var(--cbt-radius);
	background-color: var(--cbt-bg);
}
@media screen and (max-width: 768px) {
	.cbt-audio-player:not([data-cbt-ready]) {
		min-height: 46px;
	}
}
.cbt-audio-player audio {
	display: block;
	width: 100%;
}
/* 0.5.8: the bar of a listening exercise block — the same player, above the questions. */
.cbt-exercise-audio {
	max-width: 100%;
	min-width: 0;
	margin: 0 0 1em;
}
.cbt-exercise-audio > .cbt-player.is-boxed {
	margin: 0;
}

/* A line only editors see (block unknown, not published, no audio file…). */
.cbt-audio-notice {
	margin: 1em 0;
	padding: 10px 14px;
	border: 1px dashed var(--cbt-wrong);
	border-radius: var(--cbt-radius);
	background: var(--cbt-wrong-bg);
	color: var(--cbt-wrong);
	font-size: 0.9em;
}

/* A hidden part (setHidden / opts.hide) is gone, whatever the rules above say —
   and so is a second bar for a file the page already shows (0.5.8, CBTPageAudio). */
.cbt-player [hidden],
.cbt-player[hidden],
.cbt-audio-player[hidden],
.cbt-exercise-audio[hidden] {
	display: none;
}