/**
 * Amelia-TutorLMS Bridge - language switcher
 * ==========================================
 *
 * A small tab docked into the side of the screen. Tapping it opens a centred
 * popup with the languages in it.
 *
 * WHY THERE IS NO JAVASCRIPT IN THE OPENING
 * Earlier versions opened the popup from a tap handler and it kept failing on
 * real phones - a click that never arrives after a touch, a ghost click that
 * closes what it just opened, finger movement mistaken for a drag. All of that
 * machinery is gone. The popup is a hidden checkbox and a label, which every
 * browser has handled correctly for twenty years. There is nothing left to go
 * wrong at the moment of the tap.
 *
 * The only script left fills the popup with TranslatePress's own language
 * links, which always worked.
 */

:root {
	--atb-lang-bg: #19194d;
	--atb-lang-icon: #dae83d;
	--atb-lang-text: #ffffff;
	--atb-lang-w: 30px;
	--atb-lang-h: 46px;
	--atb-lang-bottom: 104px;
	--atb-lang-ease: cubic-bezier( 0.2, 0.9, 0.3, 1.15 );
}

/* The checkbox that holds the open/closed state. Off screen rather than
   display:none, so it can still take keyboard focus. */
.atb-lang-toggle {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	clip-path: inset( 50% );
	white-space: nowrap;
}

/* ------------------------------------------------------------------ *
 * The tab
 * ------------------------------------------------------------------ */

.atb-lang {
	position: fixed;
	inset-inline-end: 0;
	inset-block-end: var( --atb-lang-bottom );
	z-index: 9998; /* Below the bar, so it can never cover navigation. */
	display: flex;
	align-items: center;
	justify-content: flex-end;
	/* Looks small, but the area that answers a tap is a comfortable 44px. */
	min-width: 44px;
	min-height: 44px;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	/* So a drag on the tab moves the tab instead of scrolling the page. */
	touch-action: none;
	transition: opacity 220ms ease, transform 260ms var( --atb-lang-ease ),
		inset-block-end 300ms var( --atb-lang-ease );
}

/* While being dragged: no easing, so it tracks the finger exactly. It springs
   to the nearest step on release, when the transition comes back. */
.atb-lang.is-dragging {
	transition: none;
}

.atb-lang.is-dragging .atb-lang__tab {
	transform: scale( 1.14 );
	box-shadow: 0 8px 26px rgba( 25, 25, 77, 0.42 );
}

/* ------------------------------------------------------------------ *
 * "You can move this" hint
 *
 * Shown once per browser, a few seconds after the first visit, then never
 * again. A gesture nobody is told about is a gesture nobody uses.
 * ------------------------------------------------------------------ */

.atb-lang-hint {
	position: fixed;
	inset-inline-end: 52px;
	inset-block-end: var( --atb-lang-bottom );
	z-index: 9997;
	display: flex;
	gap: 7px;
	align-items: center;
	max-width: 190px;
	padding: 9px 12px;
	font-size: 11.5px;
	font-weight: 700;
	line-height: 1.35;
	color: var( --atb-lang-text );
	pointer-events: none;
	background: var( --atb-lang-bg );
	border-radius: 12px;
	box-shadow: 0 8px 22px rgba( 25, 25, 77, 0.3 );
	opacity: 0;
	transform: translateX( 10px );
	transition: opacity 300ms ease, transform 300ms var( --atb-lang-ease );
}

[dir="rtl"] .atb-lang-hint {
	transform: translateX( -10px );
}

.atb-lang-hint.is-on {
	opacity: 1;
	transform: translateX( 0 );
}

.atb-lang-hint svg {
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	color: var( --atb-lang-icon );
	fill: none;
	stroke: currentColor;
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.atb-lang__tab {
	display: flex;
	flex-direction: column;
	gap: 2px;
	align-items: center;
	justify-content: center;
	width: var( --atb-lang-w );
	height: var( --atb-lang-h );
	color: var( --atb-lang-text );
	background: var( --atb-lang-bg );
	/* Only the inner corners are rounded. Logical, so Arabic mirrors it. */
	border-start-start-radius: 14px;
	border-end-start-radius: 14px;
	box-shadow: 0 3px 14px rgba( 25, 25, 77, 0.3 );
	transition: transform 160ms var( --atb-lang-ease );
}

.atb-lang:active .atb-lang__tab {
	transform: scale( 0.92 );
}

.atb-lang__tab svg {
	width: 14px;
	height: 14px;
	color: var( --atb-lang-icon );
	fill: none;
	stroke: currentColor;
	stroke-width: 2.1;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.atb-lang__code {
	font-size: 8px;
	font-weight: 800;
	line-height: 1;
}

.atb-lang--xs { --atb-lang-w: 22px; --atb-lang-h: 40px; }
.atb-lang--sm { --atb-lang-w: 30px; --atb-lang-h: 46px; }
.atb-lang--md { --atb-lang-w: 38px; --atb-lang-h: 52px; }

.atb-lang--xs .atb-lang__code { display: none; }
.atb-lang--md .atb-lang__tab svg { width: 16px; height: 16px; }
.atb-lang--md .atb-lang__code { font-size: 9px; }

.atb-lang--right { direction: ltr; }
.atb-lang--left { direction: rtl; }

.atb-lang-toggle:focus-visible + .atb-lang .atb-lang__tab {
	outline: 3px solid var( --atb-lang-icon );
	outline-offset: 2px;
}

/* Hide the tab while the popup is open, so it is not sitting behind it. */
.atb-lang-toggle:checked + .atb-lang {
	opacity: 0;
	pointer-events: none;
}

/* ------------------------------------------------------------------ *
 * The popup
 *
 * Opened and closed with transitions rather than animations, so it plays
 * going out as well as coming in. An animation only runs when the element
 * appears; a transition runs in both directions, which is what makes the
 * close feel like part of the same gesture instead of the card blinking out.
 * ------------------------------------------------------------------ */

.atb-lang-backdrop {
	position: fixed;
	inset: 0;
	z-index: 100000;
	cursor: pointer;
	background: rgba( 25, 25, 77, 0.5 );
	-webkit-backdrop-filter: blur( 7px );
	backdrop-filter: blur( 7px );
	opacity: 0;
	visibility: hidden;
	transition: opacity 260ms ease, visibility 0s linear 260ms;
}

.atb-lang-modal {
	position: fixed;
	inset: 0;
	z-index: 100001;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 22px;
	pointer-events: none;
	visibility: hidden;
	transition: visibility 0s linear 340ms;
}

.atb-lang-toggle:checked ~ .atb-lang-backdrop {
	opacity: 1;
	visibility: visible;
	transition: opacity 260ms ease, visibility 0s;
}

.atb-lang-toggle:checked ~ .atb-lang-modal {
	visibility: visible;
	transition: visibility 0s;
}

.atb-lang-modal__card {
	position: relative;
	width: 100%;
	max-width: 272px;
	padding: 18px 16px 16px;
	pointer-events: auto;
	background: #ffffff;
	border-radius: 20px;
	box-shadow: 0 20px 56px rgba( 25, 25, 77, 0.34 );
	opacity: 0;
	transform: translateY( 20px ) scale( 0.9 );
	transition: opacity 220ms ease, transform 340ms var( --atb-lang-ease );
}

.atb-lang-toggle:checked ~ .atb-lang-modal .atb-lang-modal__card {
	opacity: 1;
	transform: translateY( 0 ) scale( 1 );
}

.atb-lang-modal__badge {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin: 0 auto 10px;
	color: var( --atb-lang-bg );
	background: var( --atb-lang-icon );
	border-radius: 50%;
	box-shadow: 0 5px 14px rgba( 218, 232, 61, 0.5 );
}

.atb-lang-modal__badge svg {
	width: 19px;
	height: 19px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.atb-lang-modal__title {
	margin: 0 0 12px;
	font-size: 15px;
	font-weight: 800;
	line-height: 1.3;
	color: var( --atb-lang-bg );
	text-align: center;
}

.atb-lang-modal__list {
	display: flex;
	flex-direction: column;
	gap: 7px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.atb-lang-modal__item {
	display: flex;
	gap: 10px;
	align-items: center;
	justify-content: center;
	padding: 12px 14px;
	font-size: 13.5px;
	font-weight: 800;
	color: var( --atb-lang-bg );
	text-decoration: none;
	background: #f4f5f9;
	border-radius: 13px;
	transition: background 160ms ease, transform 140ms var( --atb-lang-ease );
}

.atb-lang-modal__item:active {
	transform: scale( 0.96 );
}

.atb-lang-modal__item--current {
	color: var( --atb-lang-text );
	background: var( --atb-lang-bg );
}

.atb-lang-modal__dot {
	flex: 0 0 auto;
	width: 7px;
	height: 7px;
	background: #cfd3de;
	border-radius: 50%;
}

.atb-lang-modal__item--current .atb-lang-modal__dot {
	background: var( --atb-lang-icon );
}

/* A small cross in the corner rather than the word "Close" - it needs no
   translation and reads the same in both languages. It is a label, so it
   closes the popup with no script, and inset-inline-end puts it in the
   opposite corner in Arabic on its own. Tapping the dimmed area still works
   too. */
.atb-lang-modal__close {
	position: absolute;
	inset-block-start: 10px;
	inset-inline-end: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	/* Looks like a 28px button, answers taps over a 40px area. */
	width: 40px;
	height: 40px;
	margin: -6px;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.atb-lang-modal__close::before {
	position: absolute;
	width: 28px;
	height: 28px;
	content: "";
	background: #f1f2f7;
	border-radius: 50%;
	transition: background 160ms ease, transform 140ms var( --atb-lang-ease );
}

.atb-lang-modal__close svg {
	position: relative;
	width: 13px;
	height: 13px;
	fill: none;
	stroke: #7a7f95;
	stroke-width: 2.4;
	stroke-linecap: round;
}

.atb-lang-modal__close:active::before {
	background: #e4e6ee;
	transform: scale( 0.9 );
}

/* Each row arrives a beat after the one above it, which is what makes it read
   as a sheet opening rather than a box appearing. */
.atb-lang-toggle:checked ~ .atb-lang-modal .atb-lang-modal__item {
	animation: atb-lang-row 300ms var( --atb-lang-ease ) both;
}

.atb-lang-toggle:checked ~ .atb-lang-modal li:nth-child( 1 ) .atb-lang-modal__item { animation-delay: 90ms; }
.atb-lang-toggle:checked ~ .atb-lang-modal li:nth-child( 2 ) .atb-lang-modal__item { animation-delay: 140ms; }
.atb-lang-toggle:checked ~ .atb-lang-modal li:nth-child( 3 ) .atb-lang-modal__item { animation-delay: 190ms; }

@keyframes atb-lang-row {
	from { opacity: 0; transform: translateY( 10px ); }
	to   { opacity: 1; transform: translateY( 0 ); }
}

@media ( prefers-reduced-motion: reduce ) {
	.atb-lang-toggle:checked ~ .atb-lang-modal .atb-lang-modal__item {
		animation: none;
	}

	.atb-lang,
	.atb-lang__tab,
	.atb-lang-backdrop,
	.atb-lang-modal__card {
		transition-duration: 1ms;
	}
}

/* ==========================================================================
   Dashboard "Language" tab  (mode: settings_tab, 2.19.0)
   --------------------------------------------------------------------------
   Rendered inside Tutor's account-settings panel, so it inherits the
   dashboard's own typography and only needs its own list styling.
   ========================================================================== */

.atb-lang-tab__hint {
	margin: 0 0 14px;
	font-size: 14px;
	line-height: 1.6;
	opacity: .75;
}

.atb-lang-tab__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 10px;
	max-width: 460px;
}

.atb-lang-tab__item {
	margin: 0;
	border: 1px solid rgba( 25, 25, 77, .12 );
	border-radius: 12px;
	background: #fff;
	overflow: hidden;
}

.atb-lang-tab__item.is-current {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 16px;
	border-color: var( --atb-lang-bg, #19194D );
	background: rgba( 25, 25, 77, .04 );
}

.atb-lang-tab__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 16px;
	text-decoration: none;
	color: inherit;
	transition: background .15s ease;
}

.atb-lang-tab__link:hover,
.atb-lang-tab__link:focus {
	background: rgba( 25, 25, 77, .04 );
	text-decoration: none;
}

.atb-lang-tab__name {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
}

.atb-lang-tab__badge {
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	padding: 5px 10px;
	border-radius: 999px;
	background: var( --atb-lang-bg, #19194D );
	color: var( --atb-lang-text, #fff );
	white-space: nowrap;
}

/* The chevron points the way the page reads, so it flips in Arabic. */
.atb-lang-tab__chevron {
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	opacity: .45;
}

[dir="rtl"] .atb-lang-tab__chevron {
	transform: scaleX( -1 );
}

.atb-lang-tab__empty {
	margin: 0;
	font-size: 14px;
	opacity: .7;
}