/* FONTY: enqueue Outfit+Inter osobno (patrz handoff) */

/* ============== ML RESTYLE (nakladka na realny Tutor) ============== */
:root{ --ml-headerh:96px; --ml-lesson-maxh:820px; }

/* --- 0. Uproszczenia widoku lekcji --- */
.tutor-course-topic-single-footer{display:none!important} /* POD WIDEO: tylko Poprzedni/Dalej ukryte. NOTATKI (spotlight) PRZYWROCONE + ostylowane nizej (Stage tweak 2026-07-01) */
/* X (close) w glowicy -> prowadzi na martwa strone kursu -> ukryty. Lewy sidebar-toggler (<) ZOSTAJE (2026-07-01) */
.tutor-single-page-top-bar a.tutor-iconic-btn:has(.tutor-icon-times),
.tutor-single-page-top-bar a.tutor-iconic-btn.tutor-flex-shrink-0:not(.tutor-iconic-btn-secondary):not(.tutor-course-topics-sidebar-toggler){display:none!important}
/* Licznik „0 z X" w panelach tygodni -> ukryty; strzalka accordionu (.tutor-accordion-item-header::after) ZOSTAJE dla czystosci (2026-07-01) */
.tutor-course-topic-summary{display:none!important}

/* --- 1. LAYOUT (wspolne) --- */
html,body{height:auto!important}
body{margin:0!important;overflow:hidden!important;background:var(--ml-chrome)!important;font-family:"Inter",-apple-system,sans-serif!important}
header.elementor-location-header{position:relative!important;z-index:6!important;background:var(--ml-header)!important;box-shadow:none!important;border-bottom:1px solid var(--ml-hair)!important}
.tutor-course-single-content-wrapper{position:fixed!important;top:var(--ml-headerh)!important;left:0!important;right:0!important;bottom:0!important;overflow:hidden!important;z-index:1!important;max-width:none!important;width:auto!important;margin:0!important;padding:0!important;background:var(--ml-chrome)!important}
/* Kolumna tresci SCROLLUJE (wideo hero + notatki pod spodem); tlo JASNE jak panel (bylo ciemna scena) */
.tutor-quiz-single-entry-wrap,#tutor-single-entry-content{height:100%!important;display:flex!important;flex-direction:column!important;overflow-y:auto!important;overflow-x:hidden!important;background:#F1F0EB!important;margin:0!important;padding:0!important;min-width:0!important}
/* glowica przyklejona na gorze kolumny podczas scrolla */
.tutor-course-topic-single-header{flex:0 0 auto!important; position:sticky!important; top:0!important; z-index:5!important}
/* body = auto wysokosc (wideo naturalnie), padding wokol; JASNE tlo (koniec ciemnej sceny #16140f) */
.tutor-course-topic-single-body{flex:0 0 auto!important; height:auto!important; max-height:none!important; min-height:0!important; display:block!important; padding:12px!important; margin:0!important; overflow:visible!important; background:transparent!important}
/* DESKTOP (>=1200): sidebar obok tresci, scrolluje wewnetrznie */
@media (min-width:1200px){
  .tutor-course-single-content-wrapper{display:flex!important;align-items:stretch!important}
  .tutor-course-single-sidebar-wrapper,.tutor-lesson-sidebar{flex:0 0 318px!important;width:318px!important;max-width:318px!important;height:100%!important;overflow-y:auto!important;overflow-x:hidden!important;background:var(--ml-sidebar)!important;border-right:1px solid var(--ml-hair)!important;margin:0!important;padding:0 0 24px!important;transform:none!important;position:relative!important;left:auto!important;top:auto!important}
  .tutor-quiz-single-entry-wrap,#tutor-single-entry-content{flex:1 1 auto!important}
}
/* MOBILE (<1200): tresc full-width, sidebar = natywny offcanvas Tutora (restyle bg + scroll) */
@media (max-width:1199px){
  /* MOBILE: sidebar (lista lekcji) jako WLASNY offcanvas sterowany klasa body.
     Natywny offcanvas w tym motywie jest zlamany: sidebar position:absolute left:0
     lezy NIEWIDOCZNIE nad playerem z pointer-events:auto -> kradl klik na play
     (zgloszenie 2026-07-03). Rozwiazanie: fixed + translateX(-102%) = calkowicie za
     lewa krawedzia (nie przechwytuje), przycisk "Lekcje" (JS w lesson.prod.js) dodaje
     body.ml-lesson-sidebar-open -> translateX(0) + backdrop. Player zawsze klikalny. */
  .tutor-course-single-content-wrapper{display:block!important}
  .tutor-quiz-single-entry-wrap,#tutor-single-entry-content{width:100%!important}
  .tutor-course-single-sidebar-wrapper,.tutor-lesson-sidebar{
    position:fixed!important; top:0!important; left:0!important; bottom:0!important; right:auto!important;
    height:100%!important; width:88%!important; max-width:340px!important; z-index:1200!important;
    transform:translateX(-102%)!important; transition:transform .25s ease!important;
    background:var(--ml-sidebar)!important; box-shadow:8px 0 40px rgba(0,0,0,.25)!important;
    overflow-y:auto!important; -webkit-overflow-scrolling:touch!important; margin:0!important;
  }
  /* Otwarcie: przesun + ODBLOKUJ. Natywny Tutor trzyma na sidebarze opacity:0 +
     pointer-events:none (bo wg niego panel nie jest "open") - bez wymuszenia opacity:1 /
     pointer-events:auto / visibility panel jest PRZEZROCZYSTY i NIEKLIKALNY, a hit-test
     trafia elementy pod nim (regresja 2026-07-04). z-index:100000 podnosi sidebar. */
  body.ml-lesson-sidebar-open .tutor-course-single-sidebar-wrapper,
  body.ml-lesson-sidebar-open .tutor-lesson-sidebar{transform:translateX(0)!important; opacity:1!important; pointer-events:auto!important; visibility:visible!important; z-index:100000!important}
  /* Sidebar to dziecko content-wrappera (position:fixed z-index:1 = stacking context),
     wiec jego z-index dziala tylko wewnatrz, a header/iframe leza nad nim. Przy otwarciu
     PODNOSIMY content-wrapper (z-index:1300) nad header i obnizamy header (z-index:0), zeby
     sidebar (w content-wrapperze, z-index:100000) byl realnie nad wszystkim.
     NIE uzywac z-index:auto - wtedy content-wrapper przestaje przykrywac strone i wyskakuje
     stopka strony na wierzch (regresja 2026-07-04). Wysoki z-index zachowuje przykrycie. */
  body.ml-lesson-sidebar-open .tutor-course-single-content-wrapper{z-index:1300!important}
  body.ml-lesson-sidebar-open header.elementor-location-header{z-index:0!important}
  /* Backdrop w content-wrapperze, pointer-events:none - tylko wizualne przygaszenie,
     nie przechwytuje klik (klik przechodzi do sidebara/tresci). */
  body.ml-lesson-sidebar-open .tutor-course-single-content-wrapper::after{content:""!important; position:fixed!important; inset:0!important; background:rgba(0,0,0,.4)!important; z-index:1199!important; pointer-events:none!important}
  /* topbar mobile: flex + truncate tytulu, zeby picker sie zmiescil */
  .tutor-single-page-top-bar{display:flex!important; align-items:center!important; gap:10px!important; padding:0 14px!important}
  .tutor-course-topic-single-header-title{font-size:13px!important; white-space:nowrap!important; overflow:hidden!important; text-overflow:ellipsis!important; min-width:0!important; flex:1 1 auto!important}
  .tutor-single-page-top-bar .tutor-ml-auto{flex:0 0 auto!important; margin-left:auto!important}
  .tutor-single-page-top-bar a.tutor-d-flex.tutor-d-xl-none{display:none!important} /* redundantna strzalka wstecz */
  /* MOBILE LESSON-PICKER: hamburger Tutora widoczny mimo braku fontu ikon (rysowany CSS + label) */
  .tutor-single-page-top-bar [tutor-course-topics-sidebar-offcanvas-toggler]{display:inline-flex!important;align-items:center!important;justify-content:center!important;min-width:94px!important;width:auto!important;height:36px!important;overflow:visible!important;color:var(--ml-topbar-text)!important;border:1px solid rgba(249,247,234,.22)!important;border-radius:8px!important;padding:0 12px!important;background:transparent!important;text-decoration:none!important;font-family:"Inter",sans-serif!important;font-weight:700!important;font-size:13px!important;letter-spacing:.01em!important;white-space:nowrap!important;flex:0 0 auto!important}
  .tutor-single-page-top-bar [tutor-course-topics-sidebar-offcanvas-toggler] > *{display:none!important}
  .tutor-single-page-top-bar [tutor-course-topics-sidebar-offcanvas-toggler]::before{content:"\2630"!important;font-size:17px!important;line-height:1!important;margin-right:8px!important;color:var(--ml-topbar-text)!important;display:inline-block!important}
  .tutor-single-page-top-bar [tutor-course-topics-sidebar-offcanvas-toggler]::after{content:"Lekcje"!important;font-family:"Inter",sans-serif!important;font-size:13px!important;font-weight:700!important;color:var(--ml-topbar-text)!important;display:inline-block!important}
  /* MOBILE MARK-COMPLETE (zgloszenie klientki 07.07): Tutor natywnie chowa CALY prawy boks topbara
     (progress + "Oznacz jako ukonczone" + X) klasami tutor-d-none tutor-d-xl-flex ponizej 1200px -
     w spotlight mode telefon nie mial jak oznaczyc lekcji. Pokazujemy boks, w srodku chowamy licznik
     postepu (za dlugi na 412px) i pusty X (brak fontu ikon), zostaje sam przycisk. Tytul ma ellipsis,
     wiec sie zwija; zweryfikowane w Chromium 412px: tytul + przycisk + "Lekcje" mieszcza sie w 54px pasku. */
  .tutor-single-page-top-bar .tutor-ml-auto.tutor-d-none.tutor-d-xl-flex{display:flex!important; flex:0 0 auto!important; align-items:center!important}
  .tutor-single-page-top-bar .tutor-ml-auto.tutor-d-xl-flex .tutor-fs-7.tutor-mr-20{display:none!important}
  .tutor-single-page-top-bar .tutor-ml-auto.tutor-d-xl-flex > a.tutor-iconic-btn{display:none!important}
  .tutor-single-page-top-bar .tutor-topbar-mark-btn{font-size:12px!important; padding:6px 10px!important; white-space:nowrap!important; flex:0 0 auto!important}
}

/* --- 2. NASZA MAKIETA (iframe) na pelna szerokosc strefy, jak film --- */
.tutor-video-player-wrapper.ap1-platform-slot{
  flex:1 1 auto!important; min-height:0!important; width:100%!important; max-width:none!important; height:100%!important;
  margin:0!important; padding:var(--ml-letterbox)!important; background:var(--ml-stageframe)!important;
  display:block!important; position:relative!important; box-shadow:none!important; overflow:hidden!important;
}
/* lekcja WYPELNIA strefe (jak film) - bez capa, bez czarnych pasow. Wysokosc strefy liczona poprawnie (--ml-bodyh) -> suwak w kadrze. */
.ap1-platform-embed{position:static!important; flex:1 1 auto!important; width:100%!important; height:100%!important; max-height:100%!important; min-height:0!important; border:0!important; display:block!important; background:#fff!important; border-radius:var(--ml-embed-radius,0)!important; box-shadow:none!important}

/* --- 3. GORNY PASEK (zabic zolc) --- */
.tutor-single-page-top-bar,.tutor-course-topic-single-header{
  background:var(--ml-topbar)!important; border-bottom:1px solid var(--ml-hair)!important; box-shadow:none!important; padding:0 20px!important; min-height:54px!important;
}
.tutor-course-topic-single-header-title{color:var(--ml-topbar-text)!important; font-family:"Outfit",sans-serif!important; font-weight:600!important; letter-spacing:-.01em!important}
.tutor-single-page-top-bar .tutor-progress-content,.tutor-single-page-top-bar .tutor-fs-7,.tutor-color-primary-60{color:var(--ml-topbar-muted)!important}
.tutor-single-page-top-bar .tutor-fw-bold{color:var(--ml-topbar-text)!important}
.tutor-topbar-mark-btn,.tutor-topbar-mark-btn.tutor-btn-primary{
  background:transparent!important; border:1px solid var(--ml-topbar-text)!important; color:var(--ml-topbar-text)!important;
  box-shadow:none!important; border-radius:7px!important; font-family:"Inter",sans-serif!important; font-weight:700!important;
}
.tutor-topbar-mark-btn:hover{background:var(--ml-topbar-text)!important;color:var(--ml-topbar)!important}
.tutor-course-topics-sidebar-toggler,.tutor-single-page-top-bar .tutor-iconic-btn{color:var(--ml-topbar-text)!important; border:1px solid var(--ml-hair)!important; border-radius:7px!important; background:transparent!important}

/* --- 4. SIDEBAR (przestyl realnych pol Tutora) --- */
.tutor-course-single-sidebar-title{background:var(--ml-sidebar)!important; border-bottom:1px solid var(--ml-hair)!important; padding:16px 18px!important; margin:0!important; position:sticky!important; top:0!important; z-index:2!important}
.tutor-course-single-sidebar-title span{color:var(--ml-text)!important; font-family:"Outfit",sans-serif!important; font-weight:600!important; font-size:14px!important}
.tutor-course-topic{border:0!important; border-bottom:1px solid var(--ml-hair)!important; background:var(--ml-sidebar)!important; margin:0!important}
.tutor-accordion-item-header{background:var(--ml-sidebar)!important; padding:14px 18px!important}
.tutor-accordion-item-header.is-active{background:var(--ml-sidebar)!important}
.tutor-course-topic-title{color:var(--ml-text)!important; font-family:"Outfit",sans-serif!important; font-weight:600!important; font-size:14.5px!important; letter-spacing:-.01em!important; line-height:1.25!important}
.tutor-course-topic-title img.emoji{width:15px!important; height:15px!important; filter:grayscale(.35)!important; opacity:.9!important; vertical-align:-2px!important; margin-right:6px!important}
.tutor-course-topic-summary{color:var(--ml-faint)!important; font-family:"Inter",sans-serif!important; font-size:11px!important; font-weight:400!important; background:transparent!important; border:0!important; padding:2px 0 0!important}
.tutor-accordion-item-body{background:var(--ml-sidebar)!important; padding:0 0 8px!important}
.tutor-course-topic-item{background:transparent!important; border:0!important; margin:0!important}
.tutor-course-topic-item a{padding:9px 18px 9px 22px!important}
.tutor-course-topic-item-title{color:var(--ml-muted)!important; font-family:"Inter",sans-serif!important; font-weight:400!important; font-size:13px!important}
.tutor-course-topic-item-icon{color:var(--ml-faint)!important}
.tutor-course-topic-item-duration{color:var(--ml-faint)!important; font-family:"Inter",sans-serif!important; font-size:10.5px!important}
.tutor-form-check-circle,.tutor-form-check-input{border:1.5px solid var(--ml-faint)!important; background:transparent!important; box-shadow:none!important}
.tutor-form-check-input:checked{background:var(--ml-faint)!important; border-color:var(--ml-faint)!important}  /* zrobione = neutralny, nie czerwony */
/* AKTUALNY (Tutor: .is-active) = jedyny czerwony akcent sekcji */
.tutor-course-topic-item.is-active{background:var(--ml-active-bg)!important; box-shadow:inset 2px 0 0 var(--ml-accent)!important; border-radius:0 6px 6px 0!important}
.tutor-course-topic-item.is-active .tutor-course-topic-item-title{color:var(--ml-text)!important; font-weight:700!important}
.tutor-course-topic-item.is-active .tutor-course-topic-item-icon{color:var(--ml-accent)!important}

/* --- 5. HEADER MENU (gorne) - PELNE menu (HOME/KONTAKT zostaja), przestylowane slim + on-brand --- */
.elementor-nav-menu--main .elementor-item,header.elementor-location-header .elementor-item{
  color:var(--ml-muted)!important; font-family:"Inter",sans-serif!important; font-weight:400!important;
  font-size:14px!important; letter-spacing:.01em!important; text-transform:none!important;
}
.elementor-nav-menu--main .elementor-item:hover{color:var(--ml-text)!important}
.elementor-nav-menu--main .menu-item-19831 .elementor-item{color:var(--ml-faint)!important}            /* "Wyloguj sie" cichszy (akcja konta) */
.elementor-nav-menu--main .menu-item-19831 .elementor-item:hover{color:var(--ml-accent)!important}

/* --- 6. zabic resztki zolci Tutora --- */
.tutor-progress-bar span,.tutor-progress-value,.tutor-progress-filled{background:var(--ml-accent)!important}
.tutor-bg-primary,[class*="tutor-bg-primary"]{background:var(--ml-accent)!important}
:focus-visible{outline:2px solid var(--ml-accent)!important; outline-offset:2px!important}

/* --- 7. SIDEBAR + GLOWICA: dopieszczenie (pkt 1+2) --- */
/* mono-tag UK/US zamiast kolorowej flagi-emoji */
.tutor-course-topic-title .ml-origin{font-family:"Inter",sans-serif!important; font-size:9.5px!important; font-weight:500!important; letter-spacing:.04em!important; color:var(--ml-faint)!important; border:1px solid var(--ml-hair)!important; border-radius:4px!important; padding:1px 5px!important; margin-right:8px!important; vertical-align:1px!important; text-transform:none!important; display:inline-block!important; line-height:1.3!important}
/* schowaj placeholder "00:00" (szum) */
.tutor-course-topic-item-duration{display:none!important}
/* "0 z 11" - wyrazniejszy mono-chip postepu tygodnia */
.tutor-course-topic-summary{color:var(--ml-faint)!important; font-family:"Inter",sans-serif!important; font-size:11px!important; letter-spacing:.02em!important}
/* aktualna LEKCJA - mocniejszy stan (czytelny statycznie) */
.tutor-course-topic-item.is-active{background:var(--ml-active-bg)!important; box-shadow:inset 3px 0 0 var(--ml-accent)!important; border-radius:0 6px 6px 0!important; margin:2px 0!important}
.tutor-course-topic-item.is-active .tutor-course-topic-item-title{color:var(--ml-text)!important; font-weight:700!important}
.tutor-course-topic-item.is-active .tutor-course-topic-item-icon{color:var(--ml-accent)!important}
/* aktualny TYDZIEN (otwarty topic) - subtelny akcent naglowka */
.tutor-accordion-item-header.is-active .tutor-course-topic-title{color:var(--ml-text)!important}
/* GLOWICA: cienka czerwona linia postepu pod tekstem */
.ml-progress-track{height:3px; border-radius:3px; background:rgba(249,247,234,.16); margin-top:5px; overflow:hidden; width:150px; max-width:100%}
.ml-progress-track > i{display:block; height:100%; background:var(--ml-accent); border-radius:3px}
/* ===== SMAK: TASMA (gorny pasek = ciemna glowica; aktualna klatka przeswietlona) ===== */
:root{
  --ml-chrome:#F9F7EA; --ml-sidebar:#FDFCF7; --ml-topbar:#212121; --ml-header:#FDFCF7;
  --ml-text:#212121; --ml-muted:#515151; --ml-faint:#8c8784; --ml-hair:#E5E5E5;
  --ml-accent:#CA182A; --ml-stageframe:#16140f; --ml-letterbox:0px; --ml-embed-radius:0px;
  --ml-topbar-text:#FDFCF7; --ml-topbar-muted:#b9b4a8; --ml-active-bg:#ffffff;
}
/* glowica: ciemny gorny pasek (literal, wyzsza specyficznosc) + jasne elementy */
.tutor-single-page-top-bar.tutor-course-topic-single-header{background:#212121!important;border-bottom:1px solid rgba(249,247,234,.10)!important}
.tutor-single-page-top-bar .tutor-course-topic-single-header-title,.tutor-single-page-top-bar .tutor-fw-bold{color:#FDFCF7!important}
.tutor-single-page-top-bar .tutor-progress-content,.tutor-single-page-top-bar .tutor-fs-7,.tutor-single-page-top-bar .tutor-color-primary-60{color:#b9b4a8!important}
.tutor-single-page-top-bar .tutor-topbar-mark-btn{border-color:#FDFCF7!important;color:#FDFCF7!important}
.tutor-single-page-top-bar .tutor-topbar-mark-btn:hover{background:#FDFCF7!important;color:#212121!important}
.tutor-single-page-top-bar .tutor-iconic-btn,.tutor-single-page-top-bar .tutor-course-topics-sidebar-toggler{color:#FDFCF7!important;border-color:rgba(249,247,234,.22)!important}
/* aktualna klatka = miekki uniesiony bialy chip, zaokraglony ze wszystkich stron (krzywa jako akcent, koniec twardego paska) */
.tutor-course-topic-item.is-active{
  background:#ffffff!important; box-shadow:0 1px 2px rgba(33,33,33,.05),0 8px 20px rgba(33,33,33,.11)!important;
  border-radius:11px!important; margin:3px 10px!important;
}

/* ============ TASMA POLISH (lekcja 2026-06-30): zmiekczenie "ciosanego" lewego panelu + ciszej mark-btn ============ */
/* KRZYWA JAKO AKCENT: wszystkie itemy sidebaru = zaokraglone chipy z marginesem + miekki hover (rym z zaokraglonymi kartami POWIEDZ po prawej) */
.tutor-course-topic-item{margin:2px 10px!important; border-radius:11px!important; transition:background .14s,box-shadow .14s!important}
.tutor-course-topic-item a{border-radius:11px!important; background:transparent!important}  /* zabij oryginalny niebieskoszary active-link Tutora (#EFF1F6) przebijajacy przez chip */
.tutor-course-topic-item:not(.is-active):hover{background:rgba(127,127,127,.06)!important}
/* tygodnie (naglowki accordionu) tez miekkie: znika twardy pelnoszerokowy divider, wchodzi zaokraglony hover */
.tutor-course-topic{border-bottom:0!important}
.tutor-accordion-item-header{margin:1px 8px!important; border-radius:11px!important; transition:background .14s!important}
.tutor-accordion-item-header:hover{background:rgba(127,127,127,.05)!important}
/* mark-btn ciszej: ghost (cienki muted border, lzejszy weight, miekko zaokraglony) - przestaje konkurowac z tytulem */
.tutor-single-page-top-bar .tutor-topbar-mark-btn{
  border:1px solid rgba(249,247,234,.24)!important; color:rgba(249,247,234,.72)!important;
  font-weight:500!important; background:transparent!important; border-radius:9px!important;
}
.tutor-single-page-top-bar .tutor-topbar-mark-btn:hover{
  background:rgba(249,247,234,.08)!important; color:#FDFCF7!important; border-color:rgba(249,247,234,.42)!important;
}

/* ============ SIDEBAR DEWEIGHT (panel 2026-06-30): zlamanie wall-of-bold + de-frame + grupowanie ============ */
/* Cel: lewy slup przestaje byc ciezka, kolumnowa bryla. Lekkosc z REDUKCJI (waga/kolor/rozmiar + zdjete krawedzie), zero dekoracji. */
/* 1. Naglowek „Zawartosc" -> ciche mono system-chrome (de-plate: bez belki, opaque tlo gasi bleed pod sticky) */
.tutor-course-single-sidebar-title{border-bottom:0!important; background:#FDFCF7!important; padding:16px 18px 12px!important}
.tutor-course-single-sidebar-title span{
  font-family:"Inter",sans-serif!important; font-weight:600!important; font-size:10.5px!important;
  letter-spacing:.12em!important; text-transform:uppercase!important; color:#8c8784!important;
}
/* 2. Tytul tygodnia -> de-bold ale troche ciemniejszy niz muted (waga 500 utrzymana, kolor #3a3a3a > obecnosc bez wall-of-bold) */
.tutor-course-topic-title{font-weight:500!important; font-size:13.5px!important; color:#3a3a3a!important; line-height:1.35!important}
/* otwarta sekcja: rozwiniete itemy juz pokazuja ze jest otwarta -> naglowek rownamy z reszta (ink TYLKO na aktywnej lekcji) */
.tutor-accordion-item-header.is-active .tutor-course-topic-title{color:#3a3a3a!important; font-weight:500!important}
/* 3. Item nieaktywny -> posredni tier #6f6a67 (~5,3:1, najliczniejszy), hover przywraca czytelnosc */
.tutor-course-topic-item-title{font-weight:400!important; font-size:12.75px!important; color:#6f6a67!important; line-height:1.4!important}
.tutor-course-topic-item:not(.is-active):hover .tutor-course-topic-item-title{color:#515151!important}
/* 4. Item ukonczony -> najlzejszy tier faint (prod: realna klasa Tutora; w makiecie no-op bo nic nieukonczone) */
.tutor-course-topic-item.is-completed .tutor-course-topic-item-title,
.tutor-course-topic-item.tutor-is-completed .tutor-course-topic-item-title,
.tutor-course-topic-item.tutor-course-completed-lesson .tutor-course-topic-item-title{color:#8c8784!important}
/* 5. Aktywny -> JEDYNA ciemna kotwica (ratuje slup przed efektem „wszystko wyszarzone = disabled") */
.tutor-course-topic-item.is-active .tutor-course-topic-item-title{font-weight:600!important; color:#212121!important}
/* 6. Licznik -> jeszcze ciszej */
.tutor-course-topic-summary{font-size:10px!important; color:#8c8784!important; letter-spacing:.01em!important}
/* 7. Kontener -> zdjeta prawa sciana plyty (szew z luminancji ciemnej sceny, ostry; mobile ma juz wlasny box-shadow) */
.tutor-course-single-sidebar-wrapper,.tutor-lesson-sidebar{border-right:0!important; background:#FDFCF7!important}
/* 8. Grupowanie (modest): luzno MIEDZY tygodniami, zagniezdzenie WEWNATRZ (inset 12px > naglowek 8px) */
.tutor-course-topic{margin-bottom:8px!important}
.tutor-course-topic:first-of-type{margin-top:6px!important}
.tutor-course-topic:last-of-type{margin-bottom:0!important}
.tutor-course-topic-item{margin:1px 12px!important}
.tutor-course-topic-item.is-active{margin:3px 12px!important}
.tutor-course-topic-item a{padding:8px 18px 8px 22px!important}

/* ===== GLOWICA POLISH (PROPOZYCJA): scisniecie rozwleklego prawego klastra do gabarytu Outfitowego tytulu ===== */
/* Tytul (.tutor-course-topic-single-header-title) NIE ruszany - to wzorzec. */
/* 1. MARK-BTN: 16 -> 13px (sama kompresja skali). Waga 500 + ghost-border + radius 9 (zatwierdzone) ZOSTAJA. */
.tutor-single-page-top-bar .tutor-topbar-mark-btn{
  font-family:"Inter",sans-serif!important; font-size:13px!important; font-weight:500!important;
  letter-spacing:-0.12px!important; line-height:1!important; padding:7px 12px!important; min-height:30px!important; border-radius:9px!important;
}
/* 2. CHANEL CUT: wiodaca ikona w mark-btn -> czysty tekst jak tytul (scope do tej klasy = stan completed sie nie schowa) */
.tutor-single-page-top-bar .tutor-topbar-mark-btn .tutor-icon-circle-mark-line{display:none!important}
/* 3. POSTEP: caly blok 14 -> 13px, zabity luz */
.tutor-single-page-top-bar .tutor-fs-7.tutor-mr-20{font-size:13px!important; letter-spacing:-0.06px!important; line-height:1!important}
/* 4. NUMERY: JAWNE 13px (red-team: nie wisiec na font-size:unset z wp-custom-css) + tabular; waga 700 + #FDFCF7 = punkt ostrosci */
.tutor-single-page-top-bar .tutor-fw-bold{font-size:13px!important; font-variant-numeric:tabular-nums!important; font-feature-settings:"tnum" 1!important}
/* 5. GAP klastra: 20 -> 14px (scoped do topbara, globalny utility nie wycieka) */
.tutor-single-page-top-bar .tutor-mr-20{margin-right:14px!important}
/* 6. Czerwona linia postepu ZOSTAJE - tylko docisnieta, by nie poszerzala klastra */
.tutor-single-page-top-bar .ml-progress-track{width:120px!important; margin-top:4px!important}

/* ============== NOTATKI (spotlight) + JASNA SCENA (Stage tweak 2026-07-01) ============== */
/* Kolumna tresci scrolluje: wideo = uniesiony kadr na jasnym tle + Overview/Notatki jako jasne karty pod spodem (spojnie z dashboardem). */

/* WIDEO = najwiekszy kadr 16:9 mieszczacy sie I W SZEROKOSC, I W WYSOKOSC strefy (--ml-bodyh z JS).
   Dzieki temu przy zwinietym sidebarze (szersza strefa) wideo NIE przerasta wysokosci - kontrolki
   zostaja widoczne w podstawowym widoku; pelny ekran = osobno (fullscreen playera).
   width = min(100% strefy, wysokosc*16/9); aspect-ratio dopowiada wysokosc <= strefa. Zaokraglenie + lift zachowane. */
.tutor-course-topic-single-body .tutor-video-player-wrapper{
  width:min(100%, calc((var(--ml-bodyh, 620px) - 24px) * 16 / 9))!important;
  max-width:100%!important; aspect-ratio:16 / 9!important; height:auto!important; margin:0 auto!important;
  position:relative!important; border-radius:14px!important; overflow:hidden!important; background:#000!important;
  box-shadow:0 1px 2px rgba(33,33,33,.05),0 16px 36px -16px rgba(33,33,33,.20)!important;
}
/* player/Plyr wypelnia kadr wrappera */
.tutor-course-topic-single-body .tutor-video-player,
.tutor-course-topic-single-body .tutor-video-player .plyr{
  width:100%!important; height:100%!important; max-height:100%!important; margin:0!important;
}

/* SPOTLIGHT = jasna strefa pod wideo, wycentrowana */
.tutor-course-spotlight-wrapper{display:block!important; max-width:1080px!important; margin:20px auto 44px!important; padding:0 2px!important; background:transparent!important}
/* NAV zakladek (Overview / Notatki): Inter, aktywna = czerwone podkreslenie (jak dashboard) */
.tutor-course-spotlight-nav{display:flex!important; gap:0!important; border-bottom:1px solid #E9E8E4!important; margin:0 0 20px!important; padding:0!important; justify-content:flex-start!important; box-shadow:none!important}
.tutor-course-spotlight-nav .tutor-nav-link{
  font-family:"Inter",sans-serif!important; font-weight:500!important; font-size:14px!important; color:#515151!important;
  background:transparent!important; border:0!important; padding:10px 2px!important; margin-right:24px!important; box-shadow:none!important; border-radius:0!important;
}
.tutor-course-spotlight-nav .tutor-nav-link:hover{color:#212121!important}
.tutor-course-spotlight-nav .tutor-nav-link.is-active{color:#212121!important; font-weight:700!important; box-shadow:inset 0 -2px 0 #CA182A!important}

/* Overview: czytelny jasny tekst; naglowki Outfit */
.tutor-course-spotlight-tab{background:transparent!important}
.tutor-course-spotlight-overview,.tutor-course-spotlight-overview *{font-family:"Inter",sans-serif!important; color:#515151!important}
.tutor-course-spotlight-overview{line-height:1.6!important; font-size:14.5px!important}
.tutor-course-spotlight-overview h1,.tutor-course-spotlight-overview h2,.tutor-course-spotlight-overview h3,.tutor-course-spotlight-overview h4{font-family:"Outfit",sans-serif!important; color:#212121!important; letter-spacing:-.01em!important; font-weight:600!important}

/* NOTATKI: formularz + lista jako biale karty (jak karty kursow) */
.tutor-lesson-notes-form,.tutor-lesson-note-form-wrapper{
  background:#fff!important; border:1px solid #E9E8E4!important; border-radius:12px!important; padding:16px!important; margin:0 0 16px!important;
  box-shadow:0 1px 2px rgba(33,33,33,.04),0 10px 24px -14px rgba(33,33,33,.10)!important;
}
.tutor-lesson-note-form-title{font-family:"Outfit",sans-serif!important; color:#212121!important; font-weight:600!important; font-size:15px!important}
.tutor-lesson-notes-form textarea,.tutor-lesson-notes-form input[type="text"],.tutor-lesson-note-form-wrapper textarea{
  font-family:"Inter",sans-serif!important; font-size:14px!important; color:#212121!important;
  border:1px solid #E9E8E4!important; border-radius:8px!important; background:#FDFCF7!important;
}
.tutor-lesson-notes-form textarea:focus,.tutor-lesson-note-form-wrapper textarea:focus{border-color:#CA182A!important; outline:none!important; box-shadow:0 0 0 3px rgba(202,24,42,.12)!important}
/* przyciski notatek: primary=ink, subdued=ghost */
.tutor-lesson-notes-form-buttons .tutor-btn-primary,.tutor-lesson-notes-form .tutor-btn-primary,.tutor-save-note-button{
  background:#212121!important; border:1px solid #212121!important; color:#fff!important; border-radius:8px!important; font-family:"Inter",sans-serif!important; font-weight:700!important; box-shadow:none!important;
}
.tutor-lesson-notes-form-buttons .tutor-btn-primary:hover,.tutor-save-note-button:hover{background:#000!important; border-color:#000!important}
.tutor-cancel-note-button,.tutor-lesson-notes-form .tutor-color-subdued{color:#515151!important; background:transparent!important; font-family:"Inter",sans-serif!important}
/* lista notatek: karty */
.tutor-lesson-note-list-wrapper .tutor-lesson-note{
  background:#fff!important; border:1px solid #E9E8E4!important; border-radius:12px!important; padding:14px 16px!important; margin:0 0 12px!important;
  box-shadow:0 1px 2px rgba(33,33,33,.04)!important; font-family:"Inter",sans-serif!important; color:#515151!important;
}
.tutor-lesson-note-list-wrapper .tutor-lesson-note-time,.tutor-lesson-note-start-time{color:#CA182A!important; font-family:"Inter",sans-serif!important; font-weight:600!important; font-size:12px!important}

/* ============== H5P / AI content frames (Stage tweak 2026-07-01) ============== */
/* Tutor reuses .tutor-video-player-wrapper for real video, empty placeholders and
   shortcode/H5P content. JS adds semantic classes; CSS styles only those classes. */
body.ml-tasma-lesson .tutor-course-topic-single-body .tutor-video-player-wrapper:not(.ml-video-frame):not(.ml-h5p-video-frame){
  width:100%!important; max-width:1080px!important; aspect-ratio:auto!important; height:auto!important; min-height:0!important;
  margin:0 auto!important; padding:0!important; border-radius:0!important; overflow:visible!important; background:transparent!important; box-shadow:none!important;
}
body.ml-tasma-lesson .tutor-course-topic-single-body .ml-empty-video-wrapper{display:none!important}

body.ml-tasma-lesson .tutor-course-topic-single-body .ml-video-frame{
  width:min(100%, calc((var(--ml-bodyh, 620px) - 24px) * 16 / 9))!important;
  max-width:100%!important; aspect-ratio:16 / 9!important; height:auto!important; margin:0 auto!important; padding:0!important;
  position:relative!important; border-radius:14px!important; overflow:hidden!important; background:#000!important;
  box-shadow:0 1px 2px rgba(33,33,33,.05),0 16px 36px -16px rgba(33,33,33,.20)!important;
}
body.ml-tasma-lesson .tutor-course-topic-single-body .ml-video-frame iframe,
body.ml-tasma-lesson .tutor-course-topic-single-body .ml-video-frame video,
body.ml-tasma-lesson .tutor-course-topic-single-body .ml-video-frame object,
body.ml-tasma-lesson .tutor-course-topic-single-body .ml-video-frame embed,
body.ml-tasma-lesson .tutor-course-topic-single-body .ml-video-frame .plyr,
body.ml-tasma-lesson .tutor-course-topic-single-body .ml-video-frame .mejs-container{
  width:100%!important; height:100%!important; max-width:100%!important; max-height:100%!important; margin:0!important; border:0!important; border-radius:0!important;
}

/* H5P Interactive Video: BEZ sztywnego 16:9 i bez height:100% - pasek kontrolek
   H5P siedzi w iframe PONIZEJ obszaru wideo, a przyciecie do 16:9 z overflow:hidden
   obcinalo nawigacje (zgloszenie Patryka 2026-07-03, S2 vs S1). Wysokoscia iframe
   zarzadza resizer H5P - zostawiamy naturalna. */
body.ml-tasma-lesson .tutor-course-topic-single-body .ml-h5p-video-frame{
  width:min(100%,1080px)!important; max-width:100%!important; aspect-ratio:auto!important; height:auto!important;
  margin:0 auto!important; padding:0!important; position:relative!important;
  border-radius:14px!important; overflow:hidden!important; background:#000!important;
  box-shadow:0 1px 2px rgba(33,33,33,.05),0 16px 36px -16px rgba(33,33,33,.20)!important;
}
body.ml-tasma-lesson .tutor-course-topic-single-body .ml-h5p-video-frame iframe,
body.ml-tasma-lesson .tutor-course-topic-single-body .ml-h5p-video-frame video,
body.ml-tasma-lesson .tutor-course-topic-single-body .ml-h5p-video-frame object,
body.ml-tasma-lesson .tutor-course-topic-single-body .ml-h5p-video-frame embed,
body.ml-tasma-lesson .tutor-course-topic-single-body .ml-h5p-video-frame .h5p-iframe-wrapper,
body.ml-tasma-lesson .tutor-course-topic-single-body .ml-h5p-video-frame .h5p-content{
  width:100%!important; max-width:100%!important; margin:0!important; border:0!important; border-radius:0!important; display:block!important;
}

body.ml-tasma-lesson .tutor-course-topic-single-body .ml-h5p-cards-frame,
body.ml-tasma-lesson .tutor-course-topic-single-body .ml-h5p-generic-frame{
  width:min(100%,1080px)!important; max-width:1080px!important; margin:0 auto 20px!important; padding:18px!important;
  background:#fff!important; border:1px solid #E9E8E4!important; border-radius:14px!important; overflow:visible!important;
  box-shadow:0 1px 2px rgba(33,33,33,.04),0 14px 32px -18px rgba(33,33,33,.14)!important;
}
body.ml-tasma-lesson .tutor-course-topic-single-body .ml-h5p-cards-frame iframe,
body.ml-tasma-lesson .tutor-course-topic-single-body .ml-h5p-generic-frame iframe{
  width:100%!important; max-width:100%!important; min-height:min(680px, calc(var(--ml-bodyh, 720px) - 88px))!important; border:0!important; border-radius:10px!important; background:#fff!important;
}
body.ml-tasma-lesson .tutor-course-topic-single-body .ml-h5p-cards-frame .h5p-iframe-wrapper,
body.ml-tasma-lesson .tutor-course-topic-single-body .ml-h5p-generic-frame .h5p-iframe-wrapper,
body.ml-tasma-lesson .tutor-course-topic-single-body .ml-h5p-cards-frame .h5p-content,
body.ml-tasma-lesson .tutor-course-topic-single-body .ml-h5p-generic-frame .h5p-content{
  width:100%!important; max-width:100%!important; margin:0!important; background:#fff!important; border-radius:10px!important; overflow:hidden!important;
}
body.ml-tasma-lesson.ml-lesson-h5p-cards .tutor-course-topic-single-body,
body.ml-tasma-lesson.ml-lesson-has-ai .tutor-course-topic-single-body{padding:20px!important}

body.ml-tasma-lesson .tutor-course-topic-single-body .ml-ai-frame{
  width:min(100%,1080px)!important; max-width:1080px!important; margin:0 auto 20px!important;
  min-height:min(760px, calc(var(--ml-bodyh, 760px) - 28px))!important;
  padding:clamp(24px,5vh,48px) clamp(18px,4vw,44px)!important;
  background:#fff!important; border:1px solid #E9E8E4!important; border-radius:14px!important; overflow:hidden!important;
  box-shadow:0 1px 2px rgba(33,33,33,.04),0 14px 32px -18px rgba(33,33,33,.14)!important;
  display:flex!important; align-items:flex-start!important; justify-content:center!important;
}
body.ml-tasma-lesson .tutor-course-topic-single-body .ml-ai-frame iframe{
  width:100%!important; max-width:760px!important; min-height:min(680px, calc(var(--ml-bodyh, 760px) - 116px))!important;
  margin:0 auto!important; border:0!important; border-radius:10px!important; background:#fff!important;
}
body.ml-tasma-lesson .tutor-course-topic-single-body .ml-ai-frame > *:not(iframe){
  width:min(100%,760px)!important; max-width:760px!important; margin-left:auto!important; margin-right:auto!important;
}
body.ml-tasma-lesson .tutor-course-topic-single-body .tutor-row:has(.ml-ai-frame) > .tutor-col-xl-8{
  flex:0 0 100%!important; max-width:100%!important; width:100%!important;
}
body.ml-tasma-lesson .tutor-course-topic-single-body .tutor-lesson-wrapper:has(.ml-ai-frame){
  width:100%!important; max-width:100%!important;
}
body.ml-tasma-lesson .tutor-course-topic-single-body p.ml-ai-frame{
  box-sizing:border-box!important;
}

/* H5P Interactive Video nie jest czystym video 16:9: pasek postepu i kontrolki
   sa wewnatrz iframe, wiec potrzebuja dodatkowej wysokosci. Jednoczesnie w
   lekcjach, gdzie H5P siedzi w kolumnie opisu, rozszerzamy tylko ten wariant do
   szerokosci sceny. Fiszki/quizy zostaja jako jasne karty. */
body.ml-tasma-lesson .tutor-course-topic-single-body .tutor-row:has(.ml-h5p-video-frame) > .tutor-col-xl-8{
  flex:0 0 100%!important; max-width:100%!important; width:100%!important;
}
body.ml-tasma-lesson .tutor-course-topic-single-body .tutor-lesson-wrapper:has(.ml-h5p-video-frame){
  width:100%!important; max-width:100%!important;
}
body.ml-tasma-lesson .tutor-course-topic-single-body .ml-h5p-video-frame{
  width:min(100%, calc((var(--ml-bodyh, 620px) - 24px) * 16 / 10))!important;
  aspect-ratio:16 / 10!important;
}

/* Pasek Elementora (kontakt@ + social) - ukrywany togglem hide_top_strip
   przez klase body (odporne na optymalizator LiteSpeed, ktory wycina inline style) */
body.ml-tasma-hide-strip .elementor-element-0cf06d1 { display: none !important; }

/* MOBILE FIX (zgloszenie 2026-07-03): offcanvas listy lekcji zamkniety ma opacity:0
   (niewidoczny) ale pointer-events:auto i position:absolute NAD playerem -> przechwytywal
   klik "play" mimo ze niewidoczny. Gdy rodzic nie ma klasy -open (offcanvas zamkniety),
   wylaczamy hit-test. Otwarty (klasa -open) dziala normalnie. Nie rusza wygladu/animacji. */
@media (max-width:1199px){
  :not(.tutor-course-single-sidebar-open) > .tutor-course-single-sidebar-wrapper,
  :not(.tutor-course-single-sidebar-open) > .tutor-lesson-sidebar{
    pointer-events:none!important;
  }
  .tutor-course-single-sidebar-open > .tutor-course-single-sidebar-wrapper,
  .tutor-course-single-sidebar-open > .tutor-lesson-sidebar{
    pointer-events:auto!important;
  }
}