/* =====================================================================
   NEXT AKADÉMIA — TUTORLMS VIDEÓLEJÁTSZÓ
   assets/video/video.css

   Minden szabály a lejátszóra vagy a saját elemeinkre van szűkítve.
   Globális szelektor (`*`, `html`, `body`) itt nincs — a platformon
   korábban éppen egy ilyen vitte szét a mobil megjelenítést.
   ===================================================================== */


/* =====================================================================
   1. A LEJÁTSZÓ MÉRETE

   ⚠ A RÉGI KÓDBAN ITT VOLT EGY CSENDES HIBA:

       max-height: 700px !important      <- hiányzó pontosvessző
       margin: 0 auto !important;        <- ezért ez sosem futott le

   A CSS a hibás sor után a KÖVETKEZŐ pontosvesszőig mindent eldob, így
   a középre igazítás elveszett. A videó ezért állt balra.
   ===================================================================== */

.tutor-video-player {
	margin-left: auto !important;
	margin-right: auto !important;
	max-height: 700px !important;
	max-width: 1300px !important;
}

.tutor-video-player .plyr,
.tutor-video-player .plyr--video,
.tutor-video-player .plyr__video-wrapper,
.tutor-video-player .plyr__video-embed,
.tutor-video-player .plyr__poster,
.tutor-video-player iframe,
.tutor-video-player video {
	max-width: 100% !important;
	width: 100% !important;
}

/* Teljes képernyőn a korlátok nem érvényesek. */
.plyr--fullscreen-active .plyr__video-wrapper,
.plyr--fullscreen-active iframe,
.plyr--fullscreen-active video {
	height: 100% !important;
	max-height: none !important;
	max-width: 100% !important;
	width: 100% !important;
}

@media (max-width: 768px) {

	.tutor-video-player {
		max-height: none !important;
		max-width: 100% !important;
	}
}


/* =====================================================================
   2. HANG-GOMB

   A régi változat a képernyő jobb alsó sarkába volt kiszögezve
   (`position: fixed`), fehér dobozként, és a katalógus minden oldalán
   megjelent. Most a lejátszó BAL ALSÓ sarkában ül, sötét üveghatású
   felületen — ott, ahová a felhasználó szeme amúgy is néz, és nem
   takarja a lejátszó saját vezérlőit a jobb oldalon.
   ===================================================================== */

.na-video-doboz {
	position: relative;
}

.na-video-hang {
	align-items: center;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	background: rgba(11, 14, 23, 0.82);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 12px;
	bottom: 76px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
	color: #fff;
	cursor: pointer;
	display: flex;
	font-family: 'Poppins', 'Segoe UI', system-ui, sans-serif;
	gap: 10px;
	left: 16px;
	opacity: 0;
	padding: 11px 16px 11px 13px;
	position: absolute;
	text-align: left;
	transform: translateY(8px);
	transition: opacity 0.24s ease, transform 0.24s ease, background 0.16s ease;
	z-index: 30;
}

.na-video-hang--latszik {
	opacity: 1;
	transform: translateY(0);
}

.na-video-hang--tunik {
	opacity: 0;
	transform: translateY(8px);
}

.na-video-hang:hover {
	background: rgba(18, 22, 39, 0.92);
}

.na-video-hang:focus-visible {
	outline: 2px solid #5B8EF5;
	outline-offset: 2px;
}

.na-video-hang__ikon {
	align-items: center;
	background: #356DF0;
	border-radius: 8px;
	color: #fff;
	display: flex;
	flex: 0 0 auto;
	height: 32px;
	justify-content: center;
	width: 32px;
}

.na-video-hang__szoveg {
	display: block;
	line-height: 1.25;
}

.na-video-hang__szoveg strong {
	color: #fff;
	display: block;
	font-size: 14px;
	font-weight: 600;
}

.na-video-hang__szoveg small {
	color: rgba(255, 255, 255, 0.62);
	display: block;
	font-size: 11.5px;
	font-weight: 400;
	margin-top: 1px;
}

@media (max-width: 600px) {

	.na-video-hang {
		bottom: 60px;
		left: 10px;
		padding: 9px 13px 9px 10px;
	}

	.na-video-hang__szoveg small {
		display: none;
	}

	.na-video-hang__szoveg strong {
		font-size: 13px;
	}
}


/* =====================================================================
   3. A „KÉSZ" GOMB ZÁROLÁSA — BUBORÉKSÚGÓVAL

   Az első változat egy haladásjelző dobozt tett a gomb fölé. Élesben
   elvitte a helyet és a figyelmet, ráadásul kétszer jelent meg.

   Most a gomb a helyén marad, és a magyarázat csak egérrel fölé állva
   jelenik meg — ugyanúgy, ahogy a TutorLMS csinálja a „Kurzus
   befejezése" gombnál.

   ⚠ A súgó a BURKOLÓ elemre van kötve, nem a gombra: a tiltott gomb
   nem kap egéreseményt, tehát rajta a `:hover` sosem sülne el.
   ===================================================================== */

.na-video-tip {
	display: inline-block;
	position: relative;
}

.na-video-tip__bubi {
	background: #FFFFFF;
	border-radius: 10px;
	bottom: calc(100% + 10px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
	color: #1A1D26;
	font-family: 'Open Sans', 'Segoe UI', system-ui, sans-serif;
	font-size: 13px;
	font-weight: 400;
	left: 50%;
	line-height: 1.5;
	opacity: 0;
	padding: 10px 14px;
	pointer-events: none;
	position: absolute;
	text-align: center;
	transform: translate(-50%, 4px);
	transition: opacity 0.16s ease, transform 0.16s ease;
	white-space: normal;
	width: 260px;
	z-index: 60;
}

/* A buborék alatti kis csúcs. */
.na-video-tip__bubi::after {
	border: 6px solid transparent;
	border-top-color: #FFFFFF;
	content: '';
	left: 50%;
	position: absolute;
	top: 100%;
	transform: translateX(-50%);
}

.na-video-tip:hover .na-video-tip__bubi,
.na-video-tip:focus-within .na-video-tip__bubi {
	opacity: 1;
	transform: translate(-50%, 0);
}

/* Ha már teljesült, nincs mit magyarázni. */
.na-video-tip--kesz .na-video-tip__bubi {
	display: none;
}

/* A zárolt gomb látszik, de nem kattintható. A `pointer-events` azért
   kell, mert a TutorLMS gombja egy űrlapon belül van — enélkül az
   Enter billentyű elküldené. */
.na-video-gomb--zarva {
	cursor: not-allowed !important;
	filter: grayscale(1);
	opacity: 0.45 !important;
	pointer-events: none !important;
}

@media (max-width: 600px) {

	.na-video-tip__bubi {
		width: 210px;
	}
}


/* =====================================================================
   4. ÜZENET, HA A SZERVER ELUTASÍTOTTA A LEZÁRÁST

   Ez akkor jelenik meg, ha valaki megkerülte a felületi zárolást — vagy
   ha a haladása másik eszközön van. Fontos, hogy MAGYARÁZATOT kapjon,
   különben elromlott oldalnak hiszi.
   ===================================================================== */

.na-video-uzenet {
	background: #FFF6F0;
	border: 1px solid #F5D3C0;
	border-left: 3px solid #E07A3F;
	border-radius: 10px;
	color: #7A3F19;
	font-family: 'Open Sans', 'Segoe UI', system-ui, sans-serif;
	font-size: 14px;
	line-height: 1.6;
	margin: 0 0 18px;
	padding: 13px 16px;
}


.na-video-uzenet strong {
	display: block;
	margin-bottom: 2px;
}