/* Paginile "Lecții video" (lectii.php, lectie.php) */

.lx{
	--lx-bleumarin: #052F41;
	--lx-albastru: #1B599B;
	--lx-text: #434B65;
	--lx-discret: #7A8294;
	--lx-bordura: #DCE0E5;
	--lx-separator: #ECEEF1;
	--lx-fundal-hover: #F6F8FA;

	box-sizing: border-box;
	width: 100%;
	max-width: 832px;
	margin: 0 auto 80px auto;
	padding: 0 16px;
	font-family: 'Rubik', sans-serif;
	color: var(--lx-bleumarin);
}

.lx *, .lx *::before, .lx *::after{
	box-sizing: border-box;
}

.lx [hidden]{
	display: none !important;
}

/* ---------- antet ---------- */

.lx-antet{
	margin-bottom: 32px;
}

.lx-titlu{
	margin: 0 0 12px 0;
	font-size: 36px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--lx-bleumarin);
}

.lx-subtitlu{
	margin: 0;
	font-size: 18px;
	line-height: 1.5;
	color: var(--lx-albastru);
}

/* ---------- căutare ---------- */

.lx-cautare{
	position: relative;
	margin-bottom: 28px;
}

.lx-cautare input{
	width: 100%;
	height: 56px;
	padding: 0 52px 0 52px;
	border: 1px solid var(--lx-bordura);
	border-radius: 5px;
	background: white;
	font-family: 'Rubik', sans-serif;
	font-size: 18px;
	color: var(--lx-bleumarin);
	outline: none;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color 0.15s, box-shadow 0.15s;
}

.lx-cautare input::placeholder{
	color: var(--lx-discret);
}

.lx-cautare input::-webkit-search-cancel-button{
	-webkit-appearance: none;
}

.lx-cautare input:focus{
	border-color: var(--lx-albastru);
	box-shadow: 0 0 0 3px rgba(27, 89, 155, 0.12);
}

.lx-cautare-icn{
	position: absolute;
	left: 18px;
	top: 50%;
	width: 20px;
	height: 20px;
	margin-top: -10px;
	fill: none;
	stroke: var(--lx-discret);
	stroke-width: 2;
	stroke-linecap: round;
	pointer-events: none;
}

.lx-cautare-sterge{
	position: absolute;
	right: 8px;
	top: 50%;
	width: 40px;
	height: 40px;
	margin-top: -20px;
	padding: 0;
	border: none;
	border-radius: 5px;
	background: transparent;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.lx-cautare-sterge svg{
	width: 18px;
	height: 18px;
	fill: none;
	stroke: var(--lx-discret);
	stroke-width: 2;
	stroke-linecap: round;
}

.lx-cautare-sterge:hover{
	background: var(--lx-fundal-hover);
}

/* ---------- filtre ---------- */

.lx-filtre{
	display: flex;
	flex-flow: column;
	gap: 14px;
	margin-bottom: 40px;
}

.lx-filtru{
	display: flex;
	align-items: center;
	gap: 16px;
	transition: opacity 0.15s;
}

.lx-filtru--inactiv{
	opacity: 0.45;
}

.lx-filtru-eticheta{
	flex: 0 0 104px;
	font-size: 16px;
	font-weight: 600;
	color: var(--lx-text);
}

.lx-optiuni{
	display: flex;
	flex: 1;
	gap: 8px;
}

.lx-optiune{
	flex: 1;
	min-width: 0;
	height: 46px;
	padding: 0 12px;
	border: 1px solid var(--lx-bordura);
	border-radius: 5px;
	background: white;
	font-family: 'Rubik', sans-serif;
	font-size: 16px;
	font-weight: 500;
	color: var(--lx-albastru);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	cursor: pointer;
	-webkit-appearance: none;
	transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.lx-optiune:hover{
	border-color: var(--lx-albastru);
}

.lx-optiune--activ,
.lx-optiune--activ:hover{
	background: var(--lx-albastru);
	border-color: var(--lx-albastru);
	color: white;
}

.lx-optiune:focus-visible,
.lx-lectie:focus-visible,
.lx-nav:focus-visible,
.lx-inapoi:focus-visible,
.lx-cautare-sterge:focus-visible{
	outline: 3px solid rgba(27, 89, 155, 0.35);
	outline-offset: 2px;
}

/* ---------- mesaje (alege clasa, fără rezultate) ---------- */

.lx-mesaj{
	padding: 48px 24px;
	border: 1px solid var(--lx-separator);
	border-radius: 5px;
	background: white;
	text-align: center;
}

.lx-mesaj-icn{
	display: block;
	width: 56px;
	height: 56px;
	margin: 0 auto 18px auto;
	background: url("../img/icn_lectii.png") center / contain no-repeat;
	opacity: 0.8;
}

.lx-mesaj-titlu{
	margin: 0 0 8px 0;
	font-size: 22px;
	font-weight: 700;
	color: var(--lx-bleumarin);
}

.lx-mesaj-text{
	margin: 0;
	font-size: 16px;
	line-height: 1.5;
	color: var(--lx-text);
}

/* ---------- lista de lecții ---------- */

.lx-lista-antet{
	display: flex;
	align-items: flex-end;
	gap: 24px;
	padding-bottom: 14px;
	margin-bottom: 4px;
	border-bottom: 2px solid var(--lx-bordura);
}

.lx-lista-carte{
	flex: 1;
	margin: 0;
	font-size: 16px;
	line-height: 1.45;
	color: var(--lx-text);
}

.lx-lista-numar{
	flex: 0 0 auto;
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	color: var(--lx-albastru);
}

.lx-lista{
	display: flex;
	flex-flow: column;
}

.lx-lectie{
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 14px 10px;
	border-bottom: 1px solid var(--lx-separator);
	border-radius: 5px;
	text-decoration: none;
	color: inherit;
	transition: background-color 0.15s;
}

.lx-lectie:hover{
	background: var(--lx-fundal-hover);
}

.lx-thumb{
	position: relative;
	flex: 0 0 160px;
	height: 90px;
	border-radius: 5px;
	overflow: hidden;
	background: #DCE3EA;
}

.lx-thumb img{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.lx-play{
	position: absolute;
	right: 6px;
	bottom: 6px;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: rgba(5, 47, 65, 0.78);
	transition: background-color 0.15s, transform 0.15s;
}

.lx-play::after{
	content: "";
	position: absolute;
	left: 10px;
	top: 8px;
	border-style: solid;
	border-width: 5px 0 5px 8px;
	border-color: transparent transparent transparent white;
}

.lx-lectie:hover .lx-play{
	background: var(--lx-albastru);
	transform: scale(1.08);
}

.lx-info{
	display: flex;
	flex-flow: column;
	gap: 4px;
	min-width: 0;
}

.lx-nr{
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--lx-albastru);
}

.lx-nume{
	font-size: 17px;
	line-height: 1.4;
	color: var(--lx-bleumarin);
}

.lx-detalii{
	font-size: 14px;
	color: var(--lx-discret);
}

/* ---------- pagina unei lecții ---------- */

.lx-bara{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 20px;
}

.lx-inapoi{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 2px;
	font-size: 16px;
	font-weight: 500;
	color: var(--lx-albastru);
	text-decoration: none;
	border-radius: 5px;
}

.lx-inapoi:hover{
	text-decoration: underline;
}

.lx-inapoi svg,
.lx-nav-eticheta svg{
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
	flex: 0 0 auto;
}

.lx-context{
	font-size: 14px;
	color: var(--lx-text);
	text-align: right;
}

.lx-player{
	position: relative;
	width: 100%;
	padding-top: 56.25%;
	border-radius: 5px;
	overflow: hidden;
	background: var(--lx-bleumarin);
	box-shadow: 0 6px 24px rgba(5, 47, 65, 0.12);
}

.lx-player iframe{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: none;
}

.lx-blocat{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	flex-flow: column;
	align-items: center;
	justify-content: center;
	padding: 16px;
	text-align: center;
	color: white;
	background: linear-gradient(135deg, var(--lx-bleumarin) 0%, var(--lx-albastru) 100%);
}

.lx-blocat-icn{
	width: 40px;
	height: 40px;
	margin-bottom: 14px;
	fill: none;
	stroke: white;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.lx-blocat-titlu{
	margin: 0 0 6px 0;
	font-size: 22px;
	font-weight: 500;
}

.lx-blocat-text{
	margin: 0 0 20px 0;
	font-size: 16px;
	line-height: 1.4;
	opacity: 0.85;
}

.lx-blocat-buton{
	display: inline-block;
	padding: 12px 32px;
	border-radius: 5px;
	background: white;
	color: var(--lx-albastru);
	font-size: 16px;
	font-weight: 500;
	text-decoration: none;
	transition: background-color 0.15s;
}

.lx-blocat-buton:hover{
	background: var(--lx-fundal-hover);
}

.lx-blocat-cont{
	margin: 16px 0 0 0;
	font-size: 15px;
	opacity: 0.9;
}

.lx-blocat-cont a{
	color: white;
	font-weight: 600;
}

.lx-lectie-antet{
	display: flex;
	flex-flow: column;
	gap: 8px;
	margin: 28px 0 36px 0;
}

.lx-lectie-titlu{
	margin: 0;
	font-size: 28px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--lx-bleumarin);
}

.lx-lectie-carte{
	margin: 4px 0 0 0;
	font-size: 15px;
	line-height: 1.45;
	color: var(--lx-discret);
}

.lx-navigare{
	display: flex;
	gap: 16px;
	padding-top: 28px;
	border-top: 2px solid var(--lx-bordura);
}

.lx-nav,
.lx-nav-gol{
	flex: 1 1 0;
	min-width: 0;
}

.lx-nav{
	display: flex;
	flex-flow: column;
	gap: 6px;
	padding: 16px 18px;
	border: 1px solid var(--lx-bordura);
	border-radius: 5px;
	background: white;
	text-decoration: none;
	transition: border-color 0.15s, background-color 0.15s;
}

.lx-nav:hover{
	border-color: var(--lx-albastru);
}

.lx-nav--inainte{
	text-align: right;
}

.lx-nav-eticheta{
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 14px;
	font-weight: 600;
	color: var(--lx-albastru);
}

.lx-nav--inainte .lx-nav-eticheta{
	justify-content: flex-end;
}

.lx-nav-titlu{
	font-size: 16px;
	line-height: 1.4;
	color: var(--lx-bleumarin);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ---------- ecrane mici ---------- */

@media screen and (max-width: 700px) {
	.lx-titlu{font-size: 30px;}
	.lx-subtitlu{font-size: 16px;}
	.lx-antet{margin-bottom: 24px;}
	.lx-cautare{margin-bottom: 22px;}
	.lx-cautare input{height: 52px; font-size: 17px;}

	.lx-filtre{gap: 16px; margin-bottom: 32px;}
	.lx-filtru{flex-flow: column; align-items: stretch; gap: 8px;}
	.lx-filtru-eticheta{flex: none; font-size: 15px;}
	.lx-optiuni{flex-wrap: wrap;}
	.lx-optiune{height: 44px; font-size: 15px; padding: 0 8px;}

	.lx-lista-antet{flex-flow: column; align-items: flex-start; gap: 6px;}
	.lx-lista-carte{font-size: 15px;}

	.lx-lectie{gap: 14px; padding: 12px 4px; align-items: flex-start;}
	.lx-thumb{flex-basis: 120px; height: 68px;}
	.lx-play{width: 22px; height: 22px; right: 4px; bottom: 4px;}
	.lx-play::after{left: 8px; top: 6px; border-width: 5px 0 5px 7px;}
	.lx-nume{font-size: 15px;}
	.lx-nr, .lx-detalii{font-size: 13px;}

	.lx-bara{flex-flow: column; align-items: flex-start; gap: 4px;}
	.lx-context{text-align: left;}
	.lx-lectie-titlu{font-size: 22px;}
	.lx-navigare{flex-flow: column; gap: 10px;}
	.lx-nav-gol{display: none;}
	.lx-nav--inainte{order: -1; text-align: left;}
	.lx-nav--inainte .lx-nav-eticheta{justify-content: flex-start;}

	.lx-player--blocat{padding-top: 0; min-height: 220px;}
	.lx-blocat{position: static; min-height: 220px;}
	.lx-blocat-icn{width: 32px; height: 32px; margin-bottom: 10px;}
	.lx-blocat-titlu{font-size: 18px;}
	.lx-blocat-text{font-size: 14px; margin-bottom: 16px;}
	.lx-blocat-cont{font-size: 14px; margin-top: 12px;}
	.lx-player--blocat, .lx-blocat{min-height: 250px;}
}

@media screen and (max-width: 420px) {
	.lx-optiuni-3 .lx-optiune{font-size: 14px; padding: 0 4px;}
	.lx-thumb{flex-basis: 104px; height: 59px;}
}