/* ==========================================================================
   Vital Breath – zosúladenie MemberPress / MemberPress Courses s dizajnom webu
   Iba CSS vrstva nad pluginom. Neupravuje sa žiadny súbor pluginu.

   Hlavičku už nekreslí MemberPress, ale téma (Blocksy) – pozri šablóny
   memberpress/readylaunch/layout/*.php a memberpress/classroom/courses_header.php.
   ========================================================================== */

:root,
.mpcs-classroom,
.mp_wrapper,
.mepr-account-container {
	--vb-blue: #006bcc;
	--vb-blue-dark: #0a4b89;
	--vb-blue-soft: rgba(0, 105, 204, .12);
	--vb-text: rgba(10, 76, 138, .78);
	--vb-heading: #0a4b89;
	--vb-line: rgba(10, 76, 138, .14);
	--vb-bg: #f5f8fc;
	--vb-radius: 10px;
	--vb-radius-sm: 6px;
	--vb-shadow: 0 4px 18px rgba(10, 76, 138, .07);
	--vb-font: "Rethink Sans", system-ui, -apple-system, sans-serif;

	/* Bočné panely (účet aj učebňa) – jedna jemná sivá pre obidva. */
	--vb-panel: #f3f5f7;
	--vb-panel-line: rgba(10, 76, 138, .10);
	--vb-panel-item: 15px;

	/* Dve šírky obsahu: úzka (profil, kurzy) a široká (tabuľky). */
	--vb-narrow: 760px;
	--vb-wide: 1180px;
}

/* ---------- 1. TYPOGRAFIA – najväčší dôvod, prečo to pôsobilo cudzo ---------- */
.mpcs-classroom,
.mpcs-classroom button,
.mpcs-classroom input,
.mpcs-classroom select,
.mpcs-classroom textarea,
.mp_wrapper,
.mepr-account-container,
.mepr_checkout,
.mp-form-row,
.mepr-checkout-container {
	font-family: var(--vb-font) !important;
	color: var(--vb-text);
}

.mpcs-classroom h1, .mpcs-classroom h2, .mpcs-classroom h3,
.mpcs-classroom h4, .mpcs-classroom h5,
.mepr-account-container h1, .mepr-account-container h2,
.mepr-account-container h3, .mepr-account-container h4 {
	font-family: var(--vb-font) !important;
	color: var(--vb-heading);
	font-weight: 500;
	letter-spacing: -.01em;
}
.mpcs-classroom h1 { font-size: clamp(26px, 3vw, 38px); line-height: 1.2; }
.mpcs-classroom h2 { font-size: clamp(22px, 2.4vw, 30px); line-height: 1.25; }

/* ---------- 2. HLAVIČKA WEBU V ŠABLÓNACH MEMBERPRESSU ----------
   Hlavičku vykresľuje téma, takže dizajnovo netreba robiť nič. Ošetrujeme
   len to, že učebňa načítava vlastný CSS rámec (normalize + Spectre), ktorý
   hlavičke prepisuje základy.                                              */
.mpcs-classroom #header,
.vb-mepr-layout #header {
	font-family: var(--vb-font);
	font-size: initial;
}
.mpcs-classroom #header ul,
.mpcs-classroom .ct-drawer-canvas ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.mpcs-classroom #header li,
.mpcs-classroom .ct-drawer-canvas li { margin: 0; }
/* Spectre dáva .btn / .menu vlastný vzhľad – v hlavičke témy nemajú čo robiť. */
.mpcs-classroom #header .btn,
.mpcs-classroom .ct-drawer-canvas .btn {
	background: none;
	border: 0;
	height: auto;
	line-height: inherit;
}
/* Výšku loga si riadi téma cez --logo-max-height; keď sme mu tu dali
   height:auto, SVG s max-width:100 % v nulovo širokom obale skolabovalo
   na 0×0 a logo z hlavičky zmizlo. Nechávame ho preto na téme.          */

/* Stará tmavá lišta MemberPressu sa už nevykresľuje; keby ju niekde vrátil
   plugin (napr. po aktualizácii), nech aspoň nie je tmavomodrá. */
.vb-mepr-layout .site-header {
	background: #fff !important;
	border-bottom: 1px solid var(--vb-line);
}

/* ---------- 3. LIŠTA KURZU (pod hlavičkou webu) ----------
   Obsahuje len ovládanie učebne: späť, predošlá/ďalšia lekcia, osnova na
   mobile. Zámerne je tichšia než hlavička – nemá s ňou súperiť.            */
#mpcs-navbar.vb-course-bar {
	display: flex;
	align-items: center;
	gap: 12px;
	height: auto !important;
	min-height: 56px;
	padding: 8px 24px;
	background: #fff !important;
	border-bottom: 1px solid var(--vb-line);
	font-size: 15px !important;
	position: static;
	z-index: 8;
}
#mpcs-navbar.vb-course-bar .navbar-section {
	display: flex;
	align-items: center;
	gap: 10px;
	width: auto !important;
	flex: 0 0 auto;
}
#mpcs-navbar.vb-course-bar .vb-course-bar__start { margin-right: auto; }
#mpcs-navbar.vb-course-bar #mpcs-lesson-navigation,
#mpcs-navbar.vb-course-bar .vb-course-bar__end { margin-left: auto; }

/* Späť na kurz – textový odkaz, nie plné tlačidlo. */
#mpcs-navbar.vb-course-bar .btn.nav-back {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
	color: var(--vb-text) !important;
	font-size: 15px !important;
	font-weight: 500;
	padding: 6px 10px 6px 0 !important;
	height: auto !important;
	text-decoration: none;
}
#mpcs-navbar.vb-course-bar .btn.nav-back:hover { color: var(--vb-blue) !important; }
#mpcs-navbar.vb-course-bar .btn.nav-back i { font-size: 18px; line-height: 1; }
/* Popis je „Späť na kurz: <názov kurzu>“ – pri dlhom názve by roztlačil lištu. */
#mpcs-navbar.vb-course-bar .vb-course-bar__back-label {
	max-width: 38ch;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Predošlá lekcia – obrysové tlačidlo, ďalšia/dokončiť – plné. */
#mpcs-navbar.vb-course-bar button {
	width: auto !important;
	height: auto !important;
	flex: 0 0 auto;
	border: 0 !important;
	box-shadow: none !important;
	border-radius: 999px !important;
	font-family: var(--vb-font) !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	padding: 10px 20px !important;
	white-space: nowrap;
	cursor: pointer;
}
#mpcs-navbar.vb-course-bar button#mpcs-classroom-previous-lesson-link {
	background: #fff !important;
	color: var(--vb-blue) !important;
	box-shadow: inset 0 0 0 1px var(--vb-blue) !important;
}
#mpcs-navbar.vb-course-bar button:not(#mpcs-classroom-previous-lesson-link) {
	background: var(--vb-blue) !important;
	color: #fff !important;
}
#mpcs-navbar.vb-course-bar button:hover { filter: brightness(1.06); }

/* Ikona osnovy (mobil) a rozbaľovačka „Zobraziť ako“. */
#mpcs-navbar.vb-course-bar .btn.sidebar-open {
	background: none !important;
	border: 0 !important;
	color: var(--vb-heading) !important;
	font-size: 20px !important;
	padding: 6px !important;
	height: auto !important;
	width: auto !important;
}
#mpcs-navbar.vb-course-bar .dropdown .btn {
	background: none !important;
	border: 0 !important;
	color: var(--vb-text) !important;
	font-size: 14px !important;
	height: auto !important;
	width: auto !important;
	padding: 6px 8px !important;
}

/* Lišta nad osnovou na mobile bola tmavosivá. */
.mpcs-classroom #mpcs-sidebar-navbar {
	background: var(--vb-panel) !important;
	height: auto !important;
	min-height: 48px;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding: 0 10px;
}
.mpcs-classroom #mpcs-sidebar-navbar .btn {
	background: none !important;
	color: var(--vb-heading) !important;
	font-size: 18px !important;
}

/* ---------- 4. BOČNÉ PANELY – účet aj učebňa rovnako ----------
   Šírky sa líšia (250 px v účte, stĺpec v učebni), vzhľad je zhodný:
   jemná sivá plocha, položky s odsadením od kraja, bez ľavého prúžku.      */

/* --- 4a. spoločná plocha panela --- */
.mepr-account-container #mepr-account-nav,
.mpcs-classroom #mpcs-sidebar,
.mpcs-classroom #mpcs-sidebar .mpcs-sidebar-wrapper {
	background: var(--vb-panel) !important;
}
.mepr-account-container #mepr-account-nav {
	border: 1px solid var(--vb-panel-line);
	border-radius: 14px;
	padding: 10px;
	align-self: start;
	overflow: hidden;
}
.mpcs-classroom #mpcs-sidebar .mpcs-sidebar-wrapper {
	border-right: 1px solid var(--vb-panel-line) !important;
}
/* Panel učebne mal position:fixed s top:auto, čo fungovalo len preto, že
   nad ním bola presne 50 px vysoká lišta. Odkedy je nad ním hlavička webu,
   ktorá sa navyše pri rolovaní zmenšuje, musí ísť o sticky stĺpec, ktorý sa
   zastaví tesne pod hlavičkou (--vb-header-h dopĺňa vb-memberpress.js).     */
@media (min-width: 601px) {
	/* Šírku určuje mriežka (.col-3 / .col-md-4), tú nechávame na pokoji. */
	/* Panel drží celú výšku obrazovky, nie len výšku osnovy. Pri krátkej
	   osnove inak sivá plocha skončila v polovici a pod ňou ostala biela diera.
	   Vnútro (.mpcs-sidebar-content) je flex s overflow-y:auto, takže dlhá
	   osnova sa v paneli roluje a nič sa neoreže. */
	.mpcs-classroom #mpcs-sidebar {
		position: sticky !important;
		top: var(--vb-header-h, 0px);
		height: calc(100vh - var(--vb-header-h, 0px)) !important;
		max-height: calc(100vh - var(--vb-header-h, 0px));
		align-self: flex-start;
		overflow: hidden;
		z-index: 1;
	}
	.mpcs-classroom #mpcs-sidebar .mpcs-sidebar-wrapper {
		display: flex;
		flex-direction: column;
		height: 100% !important;
		max-height: calc(100vh - var(--vb-header-h, 0px));
	}
	.mpcs-classroom #mpcs-sidebar .mpcs-sidebar-content {
		height: auto !important;
		flex: 1 1 auto;
		overflow-y: auto;
	}
}

/* Obal položiek potrebuje vzduch – v pluginu boli nalepené na kraj. */
.mpcs-classroom .mpcs-sidebar-content {
	padding: 10px 14px 28px;
	font-size: var(--vb-panel-item);
}
.mpcs-classroom #mpcs-sidebar { font-size: var(--vb-panel-item); }
.mpcs-classroom #mpcs-sidebar .course-progress { padding: 16px 14px 12px; }

/* --- 4b. spoločný vzhľad položiek menu --- */
.mepr-account-container #mepr-account-nav .mepr-nav-item a,
.mpcs-classroom #mpcs-sidebar .mpcs-sidebar-menu a,
.mpcs-classroom #mpcs-sidebar .mpcs-sidebar-resources a.tile {
	display: flex !important;
	align-items: center;
	justify-content: flex-start !important;
	gap: 10px;
	padding: 11px 13px !important;
	margin-bottom: 2px;
	border: 0 !important;
	border-left: 0 !important;
	border-radius: 9px;
	background: transparent !important;
	box-shadow: none !important;
	color: var(--vb-text) !important;
	font-family: var(--vb-font) !important;
	font-size: var(--vb-panel-item);
	font-weight: 500;
	line-height: 1.35;
	text-decoration: none;
	transition: background .15s ease, color .15s ease;
}
.mepr-account-container #mepr-account-nav .mepr-nav-item a:hover,
.mpcs-classroom #mpcs-sidebar .mpcs-sidebar-menu a:hover,
.mpcs-classroom #mpcs-sidebar .mpcs-sidebar-resources a.tile:hover {
	background: rgba(0, 105, 204, .08) !important;
	color: var(--vb-blue) !important;
}
.mepr-account-container #mepr-account-nav .mepr-nav-item.mepr-active-nav-tab a,
.mepr-account-container #mepr-account-nav .mepr-nav-item.--active a,
.mepr-account-container #mepr-account-nav .mepr-nav-item.active a,
.mpcs-classroom #mpcs-sidebar .mpcs-sidebar-menu a.is-active,
.mpcs-classroom #mpcs-sidebar .mpcs-sidebar-menu .tile.is-active {
	background: #fff !important;
	color: var(--vb-blue) !important;
	font-weight: 600;
	border-left: 0 !important;
	box-shadow: 0 1px 3px rgba(10, 76, 138, .10) !important;
}

/* --- 4c. ikony v paneli – rovnaká veľkosť a farba v účte aj v učebni --- */
.mepr-account-container #mepr-account-nav .mepr-nav-item a::before,
.mpcs-classroom #mpcs-sidebar .tile-icon i {
	font-size: 17px !important;
	line-height: 1;
	width: 22px;
	margin: 0 !important;
	text-align: center;
	color: currentColor;
	flex: 0 0 22px;
}
.mpcs-classroom #mpcs-sidebar .tile-icon {
	display: flex;
	align-items: center;
	margin: 0 !important;
	padding: 0 !important;
	flex: 0 0 22px;
}
.mpcs-classroom #mpcs-sidebar .tile-content { padding: 0 !important; min-width: 0; }
.mpcs-classroom #mpcs-sidebar .tile-title { font-size: var(--vb-panel-item); line-height: 1.35; }

/* Nadpisy a osnova vnútri panela učebne */
.mpcs-classroom .mpcs-sidebar-content h2,
.mpcs-classroom .mpcs-sidebar-content h3 { font-size: 17px; line-height: 1.3; }
.mpcs-classroom #mpcs-sidebar .mpcs-section-title-text { font-size: 14px; }
.mpcs-classroom #mpcs-sidebar .mpcs-section { background: transparent; border: 0; box-shadow: none; margin: 0 0 6px; }
/* Plugin dáva nadpisu sekcie sivý pruh (#e8e8e8) – v paneli tak vznikali
   dva rôzne štýly hlavičiek vedľa seba.                                   */
.mpcs-classroom #mpcs-sidebar .mpcs-section-header,
.mpcs-classroom #mpcs-sidebar .mpcs-section-title {
	background: transparent !important;
	padding: 0 !important;
}
.mpcs-classroom #mpcs-sidebar .mpcs-section-header {
	padding: 12px 13px 6px !important;
	border-bottom: 0 !important;
}
.mpcs-classroom #mpcs-sidebar .mpcs-section-title-text {
	color: rgba(10, 76, 138, .55);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .04em;
}
.mpcs-classroom #mpcs-sidebar .mpcs-lessons { background: transparent; }
.mpcs-classroom #mpcs-sidebar .mpcs-lesson,
.mpcs-classroom #mpcs-sidebar .mpcs-lessons li { background: transparent !important; border: 0; padding: 0; }
.mpcs-classroom #mpcs-sidebar .mpcs-lesson-row-link {
	padding: 9px 13px !important;
	border-radius: 9px;
	gap: 10px;
}
.mpcs-classroom #mpcs-sidebar .mpcs-lesson:hover .mpcs-lesson-row-link { background: rgba(0, 105, 204, .08); }
.mpcs-classroom #mpcs-sidebar .mpcs-lesson.current .mpcs-lesson-row-link {
	background: #fff;
	box-shadow: 0 1px 3px rgba(10, 76, 138, .10);
}

/* ---------- 5. PROGRES ----------
   Štruktúra pluginu: .progress-bar = koľajnica, .user-progress = výplň      */
.mpcs-classroom .progress-bar {
	background: rgba(10, 76, 138, .12) !important;
	border-radius: 999px !important;
	height: 8px;
	overflow: hidden;
}
.mpcs-classroom .progress-bar .user-progress {
	background: var(--vb-blue) !important;
	border-radius: 999px !important;
	height: 100%;
	display: block;
}
.mpcs-classroom .progress-text { color: var(--vb-text) !important; font-weight: 500; }
.mpcs-classroom .progress-text span { color: var(--vb-blue) !important; font-weight: 700; }

/* ---------- 6. SEKCIE OSNOVY – zo sivých pruhov na karty ---------- */
.mpcs-classroom #mpcs-main .mpcs-section {
	background: #fff;
	border: 1px solid var(--vb-line);
	border-radius: var(--vb-radius);
	box-shadow: var(--vb-shadow);
	overflow: hidden;
}
/* V režime s rozbaľovaním má plugin margin-bottom:0, takže sekcie
   („Úvodné videá“, „Program“, „Bonusy“) na seba doliehali bez medzery.     */
.mpcs-classroom #mpcs-main .mpcs-section,
.mpcs-course-with-accordion #mpcs-main .mpcs-section {
	margin: 0 0 14px !important;
}
/* Odsadenie patrí hlavičke; keď ho má aj nadpis vnútri, sčíta sa a z jedného
   riadku textu je 90 px vysoký pruh.                                       */
.mpcs-classroom #mpcs-main .mpcs-section-header {
	background: #fff !important;
	padding: 16px 44px 16px 20px;
}
.mpcs-classroom #mpcs-main .mpcs-section-title {
	background: #fff !important;
	padding: 0 !important;
}
/* Čiara oddeľuje nadpis sekcie od jej lekcií – v zabalenej sekcii teda
   nemá čo oddeľovať a visela pod nadpisom naprázdno.                    */
.mpcs-classroom #mpcs-main .mpcs-section-header.active { border-bottom: 1px solid var(--vb-line) !important; }
.mpcs-classroom #mpcs-main .mpcs-section-title-text,
.mpcs-classroom #mpcs-main .mpcs-section-title h3 {
	color: var(--vb-heading) !important;
	font-weight: 600;
	font-size: 17px;
}
/* Šípka rozbaľovania – plugin ju kreslí na pevnej pozícii zhora. */
.mpcs-course-with-accordion #mpcs-main .mpcs-section-header:after {
	top: 50% !important;
	margin-top: -3px;
	border-top-color: var(--vb-heading) !important;
}
.mpcs-course-with-accordion #mpcs-main .mpcs-section-header.active:after {
	margin-top: -3px;
	border-bottom-color: var(--vb-heading) !important;
}

/* ---------- 7. LEKCIE ---------- */
.mpcs-classroom #mpcs-main .mpcs-lessons { background: #fff; padding: 0; }
.mpcs-classroom #mpcs-main .mpcs-lesson,
.mpcs-classroom #mpcs-main .mpcs-lessons li {
	background: #fff !important;
	border-bottom: 1px solid rgba(10, 76, 138, .08);
	transition: background .15s ease;
	padding: 0;
}
.mpcs-classroom #mpcs-main .mpcs-lessons li:last-child,
.mpcs-classroom #mpcs-main .mpcs-lesson:last-child { border-bottom: 0; }
.mpcs-classroom #mpcs-main .mpcs-lesson:hover { background: rgba(0, 105, 204, .05) !important; }
/* Pozor: .mpcs-lesson-current nie je riadok, ale drobná ikonka stavu –
   zvýrazniť treba .mpcs-lesson.current, inak vznikne modrý štvorček
   za ikonkou.                                                          */
.mpcs-classroom #mpcs-main .mpcs-lesson.current { background: var(--vb-blue-soft) !important; }
.mpcs-classroom #mpcs-main .mpcs-lesson.current .mpcs-lesson-link { font-weight: 600; }
.mpcs-classroom #mpcs-main .mpcs-lesson-row-link { padding: 12px 20px !important; }
.mpcs-classroom .mpcs-lesson-link,
.mpcs-classroom .mpcs-lesson-row-link { color: var(--vb-heading) !important; font-weight: 500; }
.mpcs-classroom .mpcs-lesson-icon,
.mpcs-classroom .mpcs-lesson-progress i { color: var(--vb-blue) !important; }

/* ---------- 8. TLAČIDLÁ – jednotne so stránkou ---------- */
.mpcs-classroom .mpcs-button,
.mpcs-classroom .mpcs-main-content .btn,
.mpcs-classroom .mpcs-lessons .btn,
.mpcs-classroom .mpcs-lesson-button a,
.mp_wrapper .mepr-submit,
.mepr-account-container .mepr-submit,
input[type="submit"].mepr-submit,
.mepr_checkout .mepr-submit {
	background: var(--vb-blue) !important;
	border: 0 !important;
	color: #fff !important;
	border-radius: var(--vb-radius-sm) !important;
	font-family: var(--vb-font) !important;
	font-weight: 500 !important;
	font-size: 15px !important;
	padding: 11px 22px !important;
	box-shadow: none !important;
	transition: filter .15s ease, transform .15s ease;
}
.mpcs-classroom .mpcs-button:hover,
.mpcs-classroom .mpcs-main-content .btn:hover,
.mpcs-classroom .mpcs-lessons .btn:hover,
.mp_wrapper .mepr-submit:hover,
.mepr-account-container .mepr-submit:hover { filter: brightness(1.08); }

/* „Začať ďalšiu lekciu“ – plugin používa .btn-green, text bol modrý na modrom */
.mpcs-classroom #bookmark .btn,
.mpcs-classroom .btn-green,
.mpcs-classroom a.btn-green {
	background: var(--vb-blue) !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 999px !important;
	font-weight: 600 !important;
}
.mpcs-classroom #bookmark .btn span,
.mpcs-classroom #bookmark .btn i,
.mpcs-classroom .btn-green span,
.mpcs-classroom .btn-green i { color: #fff !important; }
.mpcs-classroom #bookmark {
	background: var(--vb-blue-soft) !important;
	border: 1px solid rgba(0, 105, 204, .22);
	border-radius: 999px;
	display: flex; align-items: center; gap: 14px;
	overflow: hidden;
}
.mpcs-classroom #bookmark .mpcs-bookmark-link-title { color: var(--vb-heading) !important; font-weight: 500; }

/* sekundárne / obrysové tlačidlo */
.mpcs-classroom .btn-secondary,
.mpcs-classroom .mpcs-button-secondary {
	background: #fff !important;
	color: var(--vb-blue) !important;
	border: 1px solid var(--vb-blue) !important;
}

/* „Začať ďalšiu lekciu“ – pruh nad osnovou */
.mpcs-classroom .mpcs-bookmark,
.mpcs-classroom .mpcs-bookmark-link,
.mpcs-classroom .mpcs-course-bookmark {
	background: var(--vb-blue-soft) !important;
	border: 1px solid rgba(0, 105, 204, .25);
	border-radius: var(--vb-radius);
	overflow: hidden;
}
.mpcs-classroom .mpcs-bookmark a,
.mpcs-classroom .mpcs-bookmark-link-title { color: var(--vb-heading) !important; font-weight: 500; }

/* Tlačidlá v osnove („Začať“) mali z pluginu pevnú výšku, takže text
   nesedel na stred a riadky boli nerovnaké.                          */
.mpcs-classroom .mpcs-lessons .btn,
.mpcs-classroom .mpcs-lesson-button a {
	height: auto !important;
	line-height: 1.2 !important;
	padding: 9px 18px !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
/* .mpcs-button je len obal okolo .btn – s vlastným paddingom sa výška
   tlačidla zdvojila (54 px namiesto 36 px).                            */
.mpcs-classroom .mpcs-lesson-button .mpcs-button { padding: 0 !important; }

/* Plná modrá na každom riadku prehlušila celý zoznam. Necháme ju len
   na lekcii, kde členka práve je; ostatné sú obrysové.                */
.mpcs-classroom .mpcs-lesson .mpcs-button,
.mpcs-classroom .mpcs-lesson .mpcs-button .btn {
	background: #fff !important;
	color: var(--vb-blue) !important;
	box-shadow: inset 0 0 0 1px var(--vb-blue) !important;
	border-radius: var(--vb-radius-sm) !important;
}
.mpcs-classroom .mpcs-lesson:hover .mpcs-button,
.mpcs-classroom .mpcs-lesson:hover .mpcs-button .btn,
.mpcs-classroom .mpcs-lesson.current .mpcs-button,
.mpcs-classroom .mpcs-lesson.current .mpcs-button .btn {
	background: var(--vb-blue) !important;
	color: #fff !important;
	box-shadow: none !important;
}

/* ---------- 9. ÚČET – dve šírky obsahu ----------
   Úzka a vycentrovaná pre profil / kurzy, široká pre tabuľky (platby,
   predplatné). Rozlišujeme podľa triedy na <body>, ktorú dopĺňa šablóna.   */
/* Účet drží tú istú šírku obsahu ako zvyšok webu (Blocksy container),
   aby bočný panel nezačínal nalepený na okraji obrazovky.                 */
.mepr-account-container {
	min-height: 0;
	overflow: visible;
	width: var(--theme-container-width, min(100%, 90vw));
	max-width: var(--theme-normal-container-max-width, 1240px);
	margin-left: auto;
	margin-right: auto;
}
.vb-account #mepr-account-content {
	max-width: var(--vb-narrow);
	margin-left: auto;
	margin-right: auto;
	padding: 40px 0 72px !important;
	width: 100%;
}
/* Tabuľky si pýtajú celú šírku stĺpca. */
.vb-account-payments #mepr-account-content,
.vb-account-subscriptions #mepr-account-content {
	max-width: none;
}
.mepr-account-container .mepr_page_header,
.mepr-account-container h1.mepr_page_header {
	color: var(--vb-heading);
	font-weight: 500;
	margin: 0 0 24px;
}

/* Vodorovné karty tabov (ak sa niekde použijú namiesto bočného menu) */
.mepr-account-container .mepr-nav-tabs,
.mepr-account-container ul.mepr-nav {
	border-bottom: 1px solid var(--vb-line);
	gap: 4px;
}
.mepr-account-container .mepr-nav-tabs a {
	color: var(--vb-text) !important;
	font-weight: 500;
	border: 0 !important;
	border-radius: var(--vb-radius-sm) var(--vb-radius-sm) 0 0;
	padding: 12px 18px;
}
.mepr-account-container .mepr-nav-tabs .active a {
	color: var(--vb-blue) !important;
	background: var(--vb-blue-soft) !important;
	box-shadow: inset 0 -2px 0 var(--vb-blue);
}

/* Tabuľky necháme v normálnom toku – zalomia sa samy, bez posuvníkov.
   Na mobile si MemberPress skladá riadky pod seba vlastným CSS, nezasahujeme. */
.mepr-account-container .mepr-table-wrapper { overflow: visible; }
.mepr-account-container table { table-layout: auto; max-width: 100%; }
/* nadpisy stĺpcov sa nesmú lámať uprostred slova; dlhé ID transakcie áno */
.mepr-account-container th { white-space: nowrap; }
@media (min-width: 783px) {
	/* prvý stĺpec nesie dlhé ID transakcie – nech nie je stlačený a neláme slová */
	.mepr-account-container td:first-child,
	.mepr-account-container th:first-child { min-width: 230px; }
	.mepr-account-container td:first-child { overflow-wrap: break-word; }
}
.mepr-account-container table,
.mp_wrapper table {
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid var(--vb-line);
	border-radius: var(--vb-radius);
	width: 100%;
}
.mepr-account-container th,
.mp_wrapper th {
	background: var(--vb-bg);
	color: var(--vb-heading);
	font-weight: 600;
	text-align: left;
	padding: 12px 14px;
}
.mepr-account-container td,
.mp_wrapper td { padding: 12px 14px; border-top: 1px solid rgba(10, 76, 138, .08); }

/* ---------- 9b. ÚČET → MOJE KURZY ----------
   Plugin sem dáva plávajúcu mriežku (Simple Grid) s pevnými percentami
   a progres, ktorému skript nastavuje šírku v %. Preložíme to na karty.    */
.mepr-account-container .mpcs-course-list .grid,
.mp_wrapper.mpcs-course-list .grid {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	width: 100%;
	min-width: 0 !important;
	max-width: none !important;
	margin: 0 0 12px !important;
	padding: 16px 20px !important;
	background: #fff;
	border: 1px solid var(--vb-line);
	border-bottom: 1px solid var(--vb-line);
	border-radius: 12px;
	box-shadow: var(--vb-shadow);
	overflow: visible;
	transition: box-shadow .15s ease, transform .15s ease;
}
.mepr-account-container .mpcs-course-list .grid:hover {
	box-shadow: 0 8px 24px rgba(10, 76, 138, .12);
}
.mepr-account-container .mpcs-course-list .grid [class*="col-"] {
	float: none !important;
	width: auto !important;
	min-height: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
}
.mepr-account-container .mpcs-course-list .grid > div:first-child { flex: 1 1 auto; min-width: 0; }
.mepr-account-container .mpcs-course-list .grid > div:last-child { flex: 0 0 auto; }
.mepr-account-container .mpcs-course-list .grid a {
	color: var(--vb-heading) !important;
	font-weight: 600;
	font-size: 17px;
	line-height: 1.35;
	text-decoration: none;
}
.mepr-account-container .mpcs-course-list .grid a:hover { color: var(--vb-blue) !important; }

/* Progres: .course-progress je koľajnica, .user-progress výplň, ktorej
   skript pluginu nastavuje šírku aj text („42 %“). min-width drží popisku
   čitateľnú aj pri nule.                                                  */
.mepr-account-container .mpcs-course-list .course-progress {
	position: relative;
	width: 170px;
	height: 24px;
	padding: 0 !important;
	background: rgba(10, 76, 138, .10) !important;
	border-radius: 999px;
	overflow: hidden;
}
.mepr-account-container .mpcs-course-list .course-progress .user-progress {
	height: 100% !important;
	min-width: 46px;
	background: var(--vb-blue) !important;
	border-radius: 999px;
	color: #fff !important;
	font-size: 12px;
	font-weight: 700;
	line-height: 24px;
	text-align: center;
	white-space: nowrap;
}
/* Pri nulovom progrese pridáva plugin .center-block (margin:0 auto), takže
   popiska „0 %“ visela v strede koľajnice. Držíme ju pri ľavom kraji.      */
.mepr-account-container .mpcs-course-list .course-progress .user-progress.center-block {
	margin: 0 !important;
}
.mepr-account-container .mpcs-course-list .flex-navigation { margin-top: 24px; }
.mepr-account-container .mpcs-course-list .flex-navigation a { color: var(--vb-blue); }

/* obal v účte musí ostať v normálnom toku */
.mp_wrapper.mpcs-course-list { display: block !important; }

/* ---------- 10. FORMULÁRE (pokladňa, účet, prihlásenie) ---------- */
.mp_wrapper input[type="text"],
.mp_wrapper input[type="email"],
.mp_wrapper input[type="password"],
.mp_wrapper input[type="tel"],
.mp_wrapper select,
.mp_wrapper textarea,
.mepr-form input[type="text"],
.mepr-form input[type="email"],
.mepr-form input[type="password"],
.mepr-form select {
	font-family: var(--vb-font) !important;
	font-size: 15px;
	color: var(--vb-heading);
	border: 1px solid var(--vb-line) !important;
	border-radius: var(--vb-radius-sm) !important;
	padding: 12px 14px !important;
	background: #fff;
	box-shadow: none !important;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.mp_wrapper input:focus,
.mp_wrapper select:focus,
.mp_wrapper textarea:focus,
.mepr-form input:focus {
	border-color: var(--vb-blue) !important;
	box-shadow: 0 0 0 3px var(--vb-blue-soft) !important;
	outline: 0;
}
.mp_wrapper label,
.mepr-form label { color: var(--vb-heading); font-weight: 500; }

/* Karty v profile (fakturačné údaje, prihlasovacie údaje) */
.mepr-profile-wrapper > div {
	border: 1px solid var(--vb-line) !important;
	border-radius: 12px !important;
	padding: 20px 22px !important;
	background: #fff;
}
.mepr-profile-wrapper__footer { border-top-color: var(--vb-line) !important; }

/* pokladňa – zhrnutie objednávky */
.mepr-price-string,
.mepr_price_cell,
.mepr-checkout-container .mepr-total { color: var(--vb-heading); font-weight: 600; }

/* ---------- 10b. POKLADŇA – rozloženie a zhrnutie objednávky ---------- */
.mepr-checkout-container,
.mepr-signup-form,
.mp_wrapper > form {
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
}
.mepr-checkout-container { padding: 8px 20px 48px; }

/* Platená pokladňa je dvojstĺpcová (zhrnutie | formulár). V 720 px boli
   stĺpce po 340 px – karta aj adresa sa lámali. Dáme jej celú šírku obalu. */
.mepr-signup-form:has(.form-wrapper),
.mepr-checkout-container:has(.form-wrapper) { max-width: 1000px; }

/* deliaca čiara medzi stĺpcami v našej palete, nie #ccc */
.mepr-checkout-container .form-wrapper { border-left-color: var(--vb-line) !important; }

/* Formulár je dlhý, zhrnutie krátke – nech cena ostane na očiach.
   align-self musí byť flex-start, inak sa stĺpec roztiahne na plnú výšku
   a sticky nemá kam „chytiť“.                                           */
@media (min-width: 783px) {
	.mepr-checkout-container .invoice-wrapper {
		position: sticky;
		top: 24px;
		align-self: flex-start;
	}
}

/* Zástupný obrázok produktu z pluginu (šedý štvorec) pôsobí ako rozbitý
   obrázok. Prázdna bunka by aj tak držala šírku a na mobile stlačila názov
   programu do troch riadkov, preto ju zúžime na nulu. Nezhasíname ju úplne –
   tfoot má o stĺpec viac a rozpadli by sa stĺpce.                          */
.mepr-checkout-container .mp_invoice td:has(> img[src*="/images/checkout/product.png"]) {
	width: 0;
	padding: 0 !important;
}
.mepr-checkout-container .mp_invoice img[src*="/images/checkout/product.png"] { display: none; }

/* sumy patria k pravému okraju, nech sedia pod sebou */
.mepr-checkout-container .mp-currency-cell { text-align: right; }

/* select bol nižší než jeho obsah → text sa orezával */
.mp_wrapper select,
.mepr-form select,
.mepr-checkout-container select {
	height: auto !important;
	min-height: 48px;
	line-height: 1.4 !important;
	appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, var(--vb-blue) 50%),
	                  linear-gradient(135deg, var(--vb-blue) 50%, transparent 50%);
	background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
	padding-right: 40px !important;
}
.mp_wrapper input[type="text"],
.mp_wrapper input[type="email"],
.mp_wrapper input[type="password"],
.mp_wrapper input[type="tel"] { min-height: 48px; }

/* zhrnutie objednávky ako karta (bez rámiku okolo samotnej ceny) */
.mepr-checkout-container .mepr-order-summary,
.mepr-checkout-container table.mepr-order-bump-table {
	background: #fff;
	border: 1px solid var(--vb-line);
	border-radius: var(--vb-radius);
	overflow: hidden;
}
.mepr-checkout-container h2,
.mepr-checkout-container h3 { color: var(--vb-heading); font-weight: 500; }

/* nadpis s cenou */
.mepr-checkout-container .mepr-price,
.mepr-checkout-container .mepr-product-price { color: var(--vb-heading) !important; font-weight: 600; }

/* súhlas s podmienkami / drobný text */
.mp_wrapper .mepr_terms_container,
.mp_wrapper .mepr-terms-checkbox { color: var(--vb-text); font-size: 14px; }
.mp_wrapper .mepr_terms_container a { color: var(--vb-blue); }

/* ---------- 10c. ĎAKOVACIA STRÁNKA + ARCHÍV KURZOV ---------- */
.mepr-thank-you,
.mepr-thankyou-container {
	max-width: 680px; margin: 0 auto; text-align: center;
	background: #fff; border: 1px solid var(--vb-line);
	border-radius: var(--vb-radius); padding: 40px 28px; box-shadow: var(--vb-shadow);
}
/* iba skutočné zoznamy kariet (nie obal v účte, ktorý má rovnakú triedu) */
ul.mpcs-courses-list,
ul.mpcs-course-list,
ul.mpcs-courses { list-style: none; padding: 0; display: grid; gap: 18px; }
@media (min-width: 700px) { ul.mpcs-courses-list, ul.mpcs-course-list, ul.mpcs-courses { grid-template-columns: repeat(2, 1fr); } }

ul.mpcs-courses-list li,
ul.mpcs-course-list li,
.mpcs-course-card {
	background: #fff; border: 1px solid var(--vb-line);
	border-radius: var(--vb-radius); box-shadow: var(--vb-shadow);
	overflow: hidden; transition: box-shadow .15s ease, transform .15s ease;
}
ul.mpcs-courses-list li:hover,
ul.mpcs-course-list li:hover { box-shadow: 0 8px 26px rgba(10, 76, 138, .12); }
.mpcs-course-filter,
.mpcs-courses-filter { font-family: var(--vb-font); color: var(--vb-text); }
/* Filter archívu: rozbaľovačky vľavo, hľadanie vpravo, s medzerami. */
.mpcs-classroom .mpcs-course-filter { align-items: center; row-gap: 12px; }
/* Rozbaľovačky sú inline-block, takže ich zdedené zarovnanie na stred
   posúvalo jednu pod druhú a od kraja. Skladáme ich flexom zľava.      */
.mpcs-classroom .mpcs-course-filter > .column {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	text-align: left;
}
.mpcs-classroom .mpcs-course-filter .dropdown { margin: 0 !important; }
.mpcs-classroom .mpcs-course-filter form { width: 100%; }
.mpcs-classroom .mpcs-course-filter .input-group { display: flex; align-items: stretch; gap: 0; }
.mpcs-classroom .mpcs-course-filter .input-group .form-input {
	flex: 1 1 auto;
	min-width: 0;
	border: 1px solid var(--vb-line) !important;
	border-right: 0 !important;
	border-radius: var(--vb-radius-sm) 0 0 var(--vb-radius-sm);
	padding: 10px 14px;
	height: auto;
}
.mpcs-classroom .mpcs-course-filter .input-group .input-group-btn {
	flex: 0 0 auto;
	width: auto !important;
	height: auto;
	padding: 10px 16px !important;
	border: 1px solid var(--vb-line) !important;
	border-radius: 0 var(--vb-radius-sm) var(--vb-radius-sm) 0;
	background: #fff !important;
}

/* ---------- 11. LEKTORKA KURZU ---------- */
.mpcs-classroom .mpcs-instructor {
	display: flex;
	align-items: flex-start;
	gap: 28px;
	background: #fff;
	border: 1px solid var(--vb-line);
	border-radius: var(--vb-radius);
	box-shadow: var(--vb-shadow);
	padding: 28px;
}
.mpcs-classroom .mpcs-instructor .tile-icon { flex: 0 0 auto; max-width: 220px; }
.mpcs-classroom .mpcs-instructor .tile-icon img {
	width: 100%;
	height: auto;
	border-radius: 12px;
	display: block;
}
.mpcs-classroom .mpcs-instructor .tile-title {
	color: var(--vb-heading);
	font-size: 22px;
	font-weight: 600;
	line-height: 1.25;
}
.mpcs-classroom .mpcs-instructor .tile-subtitle {
	color: var(--vb-blue) !important;
	font-weight: 500;
	margin-bottom: 14px;
}
.mpcs-classroom .mpcs-instructor .tile-description p { margin: 0 0 12px; line-height: 1.6; }
.mpcs-classroom .mpcs-instructor .tile-meta a { color: var(--vb-blue); }
.mpcs-classroom .mpcs-instructor .tile-socials {
	list-style: none;
	display: flex;
	gap: 10px;
	margin: 12px 0 0;
	padding: 0;
}
.mpcs-classroom .mpcs-instructor .tile-socials a { color: var(--vb-blue); font-size: 20px; }
@media (max-width: 782px) {
	.mpcs-classroom .mpcs-instructor { flex-direction: column; gap: 18px; padding: 20px; }
	.mpcs-classroom .mpcs-instructor .tile-icon { max-width: 160px; }
}

/* ---------- 12. MOBIL ---------- */
@media (max-width: 782px) {
	#mpcs-navbar.vb-course-bar {
		flex-wrap: wrap;
		row-gap: 8px;
		padding: 8px 14px;
		min-height: 52px;
	}
	#mpcs-navbar.vb-course-bar .vb-course-bar__back-label { display: none; }
	/* Lišta s tlačidlami lekcie potrebuje vlastný riadok. */
	#mpcs-navbar.vb-course-bar #mpcs-lesson-navigation {
		order: 3;
		width: 100%;
		margin-left: 0;
		gap: 10px;
	}
	#mpcs-navbar.vb-course-bar #mpcs-lesson-navigation button {
		flex: 1 1 auto;
		min-width: 0;
		justify-content: center;
		padding: 10px 16px !important;
	}
	#mpcs-navbar.vb-course-bar .btn.sidebar-open { flex: 0 0 auto; }

	.mpcs-classroom #mpcs-main { padding: 16px 14px !important; }
	.mpcs-classroom .mpcs-sidebar-wrapper,
	.mpcs-classroom #mpcs-sidebar { border-right: 0; }

	.mpcs-classroom h1 { font-size: 24px; }
	.mpcs-classroom h2 { font-size: 20px; }

	/* osnova: nech sa názov lekcie needituje do tlačidla */
	.mpcs-classroom #mpcs-main .mpcs-lesson-row-link {
		display: flex; align-items: center; gap: 10px;
		flex-wrap: wrap; padding: 12px 14px !important;
	}
	.mpcs-classroom .mpcs-lesson-button,
	.mpcs-classroom .mpcs-lesson-button a { width: 100%; }
	.mpcs-classroom .mpcs-lesson-button a { display: block; text-align: center; }

	.mpcs-classroom #mpcs-main .mpcs-section-header { padding: 14px 40px 14px 16px; }

	/* účet: úzky aj široký režim majú na mobile rovnaké odsadenie */
	.vb-account #mepr-account-content { padding: 24px 0 56px !important; }
	.mepr-account-container .mpcs-course-list .grid {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}
	.mepr-account-container .mpcs-course-list .course-progress { width: 100%; }

	/* pokladňa: polia na plnú šírku */
	.mp_wrapper .mp-form-row,
	.mp_wrapper input,
	.mp_wrapper select { width: 100% !important; }

	/* 48 px odsadenia stĺpcov je na 375 px displeji zbytočná strata miesta */
	.mepr-checkout-container { padding-left: 16px; padding-right: 16px; }
	.mepr-checkout-container .form-wrapper,
	.mepr-checkout-container .invoice-wrapper {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	.mepr-checkout-container .form-wrapper { padding-top: 28px !important; }

	/* Na plnú šírku patria len akčné tlačidlá – nie ikonky filtra a hľadania
	   (tie by inak roztlačili vyhľadávacie pole na 3 px).                   */
	.mpcs-classroom .mpcs-lesson-button .btn,
	.mpcs-classroom .mpcs-lesson-button .mpcs-button,
	.mpcs-classroom #bookmark .btn,
	.mp_wrapper .mepr-submit { width: 100%; text-align: center; }

	/* Pruh „Začať ďalšiu lekciu“ – názov lekcie je na mobile skrytý,
	   takže z obalu ostával len modrý prúžok vedľa tlačidla.          */
	.mpcs-classroom #bookmark {
		display: block;
		background: none !important;
		border: 0 !important;
	}
	.mpcs-classroom #bookmark .btn { width: 100%; }
}

/* Bočné menu účtu plugin na mobile skrýva a otvára ho tlačidlom v starej
   hlavičke, ktorú už nemáme. Na mobile ho preto vykreslíme natrvalo nad
   obsahom ako vodorovný pás.                                              */
@media (max-width: 839px) {
	.mepr-account-container #mepr-account-nav {
		display: flex !important;
		flex-wrap: wrap;
		gap: 4px;
		margin: 16px 0 0;
		padding: 8px;
	}
	.mepr-account-container #mepr-account-nav .mepr-nav-item { display: block; }
	.mepr-account-container #mepr-account-nav .mepr-nav-item a {
		margin-bottom: 0;
		padding: 9px 12px !important;
		font-size: 14px;
	}
}

/* ---------- 13. ÚVODNÝ TEXT KURZU ----------
   Sedí nad osnovou („Obsah kurzu“), preto musí byť krátky a vzdušný –
   tlačidlo prvej lekcie nesmie skončiť mimo obrazovky.               */
.mpcs-classroom .vb-course-intro {
	background: var(--vb-bg);
	border: 1px solid var(--vb-line);
	border-radius: var(--vb-radius);
	padding: 26px 28px 22px;
	margin: 0 0 28px;
}
/* classroom si nadpisom nuluje okraje, preto !important */
.mpcs-classroom .vb-course-intro__title {
	margin: 0 0 16px !important;
	font-size: clamp(20px, 2vw, 25px);
	line-height: 1.25;
	color: var(--vb-heading);
	font-weight: 500;
}
.mpcs-classroom .vb-course-intro__benefits {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 9px;
}
.mpcs-classroom .vb-course-intro__benefits li {
	position: relative;
	padding-left: 30px;
	color: var(--vb-text);
	line-height: 1.5;
}
/* odrážka je zaškrtnutie nakreslené cez border – žiadny ďalší request */
.mpcs-classroom .vb-course-intro__benefits li::before {
	content: "";
	position: absolute;
	left: 4px;
	top: .45em;
	width: 11px;
	height: 6px;
	border-left: 2px solid var(--vb-blue);
	border-bottom: 2px solid var(--vb-blue);
	transform: rotate(-45deg);
}
.mpcs-classroom .vb-course-intro__claim {
	margin: 20px 0 0;
	padding-top: 16px;
	border-top: 1px solid var(--vb-line);
	color: var(--vb-heading);
	font-weight: 600;
	font-size: 17px;
}

/* Krátka verzia (kurzy s jedným-dvoma videami): bez zoznamu benefitov.
   Záverečná veta je tam potom jediný text, takže nepotrebuje oddeľovač
   ani tučné písmo – číta sa ako podnadpis.                             */
.mpcs-classroom .vb-course-intro:not(:has(.vb-course-intro__benefits)) {
	padding: 22px 28px;
}
.mpcs-classroom .vb-course-intro:not(:has(.vb-course-intro__benefits)) .vb-course-intro__title {
	margin-bottom: 8px !important;
}
.mpcs-classroom .vb-course-intro:not(:has(.vb-course-intro__benefits)) .vb-course-intro__claim {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
	font-weight: 400;
	font-size: 16px;
	color: var(--vb-text);
}

@media (max-width: 782px) {
	.mpcs-classroom .vb-course-intro { padding: 20px 18px 18px; margin-bottom: 20px; }
	.mpcs-classroom .vb-course-intro:not(:has(.vb-course-intro__benefits)) { padding: 18px; }
	.mpcs-classroom .vb-course-intro__claim { font-size: 16px; }
}

/* ---------- 14. „ČO TI TO DÁ" NAD VIDEOM V LEKCII ----------
   Zámerne bez karty – hrdinom stránky je video, tento zoznam ho má
   len uviesť, nie s ním súperiť.                                    */
.mpcs-classroom .vb-lesson-intro {
	list-style: none;
	margin: 0 0 22px;
	padding: 0;
	display: grid;
	gap: 7px;
	max-width: 640px;
}
.mpcs-classroom .vb-lesson-intro li {
	position: relative;
	padding-left: 28px;
	color: var(--vb-text);
	line-height: 1.5;
}
.mpcs-classroom .vb-lesson-intro li::before {
	content: "";
	position: absolute;
	left: 3px;
	top: .45em;
	width: 10px;
	height: 5px;
	border-left: 2px solid var(--vb-blue);
	border-bottom: 2px solid var(--vb-blue);
	transform: rotate(-45deg);
}

/* ---------- 15. VIDEO V LEKCII ---------- */
.mpcs-classroom .mpcs-main-content video,
.mpcs-classroom .wp-block-video video {
	width: 100%; height: auto; display: block;
	border-radius: var(--vb-radius);
	background: #000;
	box-shadow: var(--vb-shadow);
}
.mpcs-classroom .mpcs-main-content figure { margin: 0 0 22px; }

/* Zvýraznená veta na bežnej stránke – rovnaký rukopis ako záverečná
   veta v úvode kurzu.                                                 */
.entry-content .vb-page-claim {
	color: var(--vb-heading, #0a4b89);
	font-weight: 600;
	font-size: 18px;
	line-height: 1.5;
}

/* To isté aj pre videá na bežných stránkach (napr. „Čo je hypopresívne
   dýchanie“), nech nevyzerajú inak než v členskej zóne.               */
body:not(.mpcs-classroom) .entry-content .wp-block-video video {
	width: 100%;
	height: auto;
	display: block;
	border-radius: var(--vb-radius);
	background: #000;
	box-shadow: var(--vb-shadow);
}

/* ---------- 16. DROBNOSTI ---------- */

/* Prázdny widget priestor pod obsahom kreslil pod stránkou útržok rámika.
   :empty nestačí – obsahuje biele znaky, preto :not(:has(*)).           */
.mepr-rl-footer-widgets:not(:has(*)) { display: none; }

/* Profil: prázdna fakturačná adresa je len 5× <br> → 120 px diera.
   JS jej pridá .vb-empty a doplní nenápadný text.                    */
.mepr-profile-details__content.vb-empty { color: rgba(10, 76, 138, .45); font-style: italic; }
.mepr-profile-details__content.vb-empty br { display: none; }

/* =======================================================================
 * Formuláre – oko pri hesle a vlastné zaškrtávacie políčka (9. 9. 2026)
 * ==================================================================== */

/* -----------------------------------------------------------------------
 * Oko na zobrazenie hesla
 *
 * WordPress mu dáva triedu .button, takže dostávalo modré pozadie tlačidla.
 * Je to len prepínač vnútri poľa – žiadne pozadie, len zmena farby.
 * -------------------------------------------------------------------- */
div.mp-hide-pw {
	position: relative;
	display: block;
}

div.mp-hide-pw input[type="password"],
div.mp-hide-pw input[type="text"] {
	width: 100%;
	padding-right: 46px;
}

button.mp-hide-pw,
div.mp-hide-pw button.button {
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	min-height: 0;
	padding: 0;
	border: 0 !important;
	border-radius: 6px;
	background: none !important;
	background-color: transparent !important;
	box-shadow: none !important;
	color: var(--vb-muted, #6b8bb0);
	cursor: pointer;
	transition: color .15s ease;
}

button.mp-hide-pw:hover,
button.mp-hide-pw:focus-visible,
div.mp-hide-pw button.button:hover,
div.mp-hide-pw button.button:focus-visible {
	background: none !important;
	background-color: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	color: var(--theme-palette-color-1, #006bcc);
	transform: translateY(-50%);
}

button.mp-hide-pw:focus-visible {
	outline: 2px solid var(--theme-palette-color-1, #006bcc);
	outline-offset: 2px;
}

button.mp-hide-pw .dashicons {
	width: 20px;
	height: 20px;
	font-size: 20px;
	line-height: 1;
}

/* -----------------------------------------------------------------------
 * Vlastné zaškrtávacie políčka
 *
 * Predvolené políčko prehliadača vyzeralo cudzo. Toto je jemný štvorček
 * so zaoblením ako ostatné polia a bielou fajkou. Téma Blocksy štýluje
 * polia formulárov dosť razantne, preto tu !important.
 * -------------------------------------------------------------------- */
body .mp_wrapper input[type="checkbox"],
body .mepr-form input[type="checkbox"],
body .mepr-account-container input[type="checkbox"],
body .mepr-checkbox-field input[type="checkbox"],
body .vb-odstupenie input[type="checkbox"],
body .mepr-signup-form input[type="checkbox"] {
	appearance: none !important;
	-webkit-appearance: none !important;
	flex: 0 0 auto !important;
	box-sizing: border-box !important;
	width: 20px !important;
	height: 20px !important;
	min-width: 20px !important;
	min-height: 20px !important;
	margin: 1px 9px 0 0 !important;
	padding: 0 !important;
	border: 1.5px solid #c3d3e6 !important;
	border-radius: 5px !important;
	background-color: #fff !important;
	background-image: none !important;
	box-shadow: none !important;
	cursor: pointer;
	position: relative;
	transition: background-color .15s ease, border-color .15s ease;
}

body .mp_wrapper input[type="checkbox"]:hover,
body .mepr-form input[type="checkbox"]:hover,
body .mepr-account-container input[type="checkbox"]:hover,
body .mepr-checkbox-field input[type="checkbox"]:hover,
body .vb-odstupenie input[type="checkbox"]:hover,
body .mepr-signup-form input[type="checkbox"]:hover {
	border-color: var(--theme-palette-color-1, #006bcc) !important;
}

body .mp_wrapper input[type="checkbox"]:checked,
body .mepr-form input[type="checkbox"]:checked,
body .mepr-account-container input[type="checkbox"]:checked,
body .mepr-checkbox-field input[type="checkbox"]:checked,
body .vb-odstupenie input[type="checkbox"]:checked,
body .mepr-signup-form input[type="checkbox"]:checked {
	background-color: var(--theme-palette-color-1, #006bcc) !important;
	border-color: var(--theme-palette-color-1, #006bcc) !important;
}

body .mp_wrapper input[type="checkbox"]::after,
body .mepr-form input[type="checkbox"]::after,
body .mepr-account-container input[type="checkbox"]::after,
body .mepr-checkbox-field input[type="checkbox"]::after,
body .vb-odstupenie input[type="checkbox"]::after,
body .mepr-signup-form input[type="checkbox"]::after {
	content: "";
	position: absolute;
	left: 5.5px;
	top: 1.5px;
	width: 5px;
	height: 10px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg) scale(.6);
	opacity: 0;
	transition: opacity .12s ease, transform .12s ease;
}

body .mp_wrapper input[type="checkbox"]:checked::after,
body .mepr-form input[type="checkbox"]:checked::after,
body .mepr-account-container input[type="checkbox"]:checked::after,
body .mepr-checkbox-field input[type="checkbox"]:checked::after,
body .vb-odstupenie input[type="checkbox"]:checked::after,
body .mepr-signup-form input[type="checkbox"]:checked::after {
	opacity: 1;
	transform: rotate(45deg) scale(1);
}

body .mp_wrapper input[type="checkbox"]:focus-visible,
body .mepr-form input[type="checkbox"]:focus-visible,
body .mepr-account-container input[type="checkbox"]:focus-visible,
body .mepr-checkbox-field input[type="checkbox"]:focus-visible,
body .vb-odstupenie input[type="checkbox"]:focus-visible,
body .mepr-signup-form input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--theme-palette-color-4, #0a4b89) !important;
	outline-offset: 2px;
}

/* políčko so štítkom nech je pekne zarovnané */
.mepr-checkbox-field,
.mp_wrapper label:has(> input[type="checkbox"]),
.mepr-form label:has(> input[type="checkbox"]),
.vb-odstupenie label:has(> input[type="checkbox"]) {
	display: flex;
	align-items: flex-start;
	line-height: 1.5;
	cursor: pointer;
}

/* -----------------------------------------------------------------------
 * Pri obnove hesla nezobrazovať nadpis „Prihlásenie“
 *
 * Stránka je tá istá (/login/), líši sa len formulárom vnútri – preto to
 * rozlišujeme podľa prítomnosti formulára na obnovu hesla.
 * -------------------------------------------------------------------- */
body:has(#mepr_forgot_password_form) .vb-login-nadpis {
	display: none;
}

/* nadpis nad formulárom na obnovu hesla nech vyzerá ako „Prihlásenie“ */
body:has(#mepr_forgot_password_form) .mp_wrapper > h3 {
	margin: 0 0 .6em;
	color: var(--theme-headings-color, var(--theme-palette-color-4, #0a4b89));
	font-size: clamp(1.8rem, 4vw, 2.4rem);
	font-weight: 600;
	line-height: 1.15;
}