/* Gałąź AFF w NH: wygląd zbliżony do americanfilmfestival.pl - czarny stały pasek z logo, ikoną logowania i różowym hamburgerem,
   menu tylko w hamburgerze (czarne, wersaliki), czcionka Lato, kolor akcentu --red z AFF. Ładowany po stylach NH (AffBranch.getExtraScripts). */

body.aff {
  --red: #E40144;
  --red-darker: #a30131;
  --aff-red: var(--red);
  --aff-blue: #005dd3;
  --magenta: var(--red);
  --magentac: var(--red);
  --magentah: var(--red-darker);
  --kolor: var(--red);
  --kolorh: var(--red-darker);
  --error: var(--red);
  --przyciski-koszyka: #121212;
  --przyciski-koszyka-hover: #444;
  --aff-header-h: 3.68em;
  background-color: #f4f4f4; /* NH ma #eee; pola formularzy sa biale, wiec tlo musi zostac szare (lekko rozjasnione) */
}

/* --- czcionka: Lato w tekście zamiast Roboto i w pasku u góry (mniejsze); nagłówki h1-h6 i przyciski zostają w PFHandbookPro - Lato jest wyraźnie większe --- */
body.aff, body.aff td, body.aff table, body.aff input, body.aff select, body.aff textarea, body.aff button,
body.aff .roboto-napis, body.aff .roboto-light, body.aff .roboto-head, body.aff .roboto-napis-bigger, body.aff .roboto-text, body.aff .roboto-text-em,
body.aff .roboto-blabel, body.aff .roboto-small { font-family: 'Lato', sans-serif; }
body.aff .przycisk, body.aff div.przycisk input, body.aff div.przycisk button { font-family: PFHandbookProMedium; }

/* --- nagłówek: sam pasek .pasgor, zawsze przypięty u góry; element header to tylko dystans pod paskiem --- */
body.aff header { padding: 0; height: var(--aff-header-h); min-height: 0; overflow: visible; background-color: #000; font-family: 'Lato', sans-serif; font-size: 1em; }
body.aff header .limit { max-width: none; overflow: visible; }
body.aff header .tohideonscroll { display: none; }
body.aff header .pasgor, body.aff header.fixed .pasgor { position: fixed; top: 0; left: 0; width: 100%; height: var(--aff-header-h); min-width: 320px; background-color: #000; border: 0; transition: none; z-index: 991; }
body.aff header .pasgor .pasgor-cont, body.aff header .pasgor-cont.limit { padding: 0 0 0 1em; height: var(--aff-header-h); overflow: visible; }
body.aff header .pasgor.zalo { background: #000; }

/* logo */
body.aff header .pasgor .fixhedlogo, body.aff header.fixed .pasgor .fixhedlogo, body.aff header:not(.fixed) .fixhedlogo { display: inline-flex; padding: 0; height: var(--aff-header-h); align-items: center; max-width: none; }
body.aff .fixhedlogo .img { width: 11em; height: 1.8em; max-height: none; background-image: url(../nn/aff/../../nn/aff/img/logo_aff_tauron_w.svg); background-size: auto 1.8em; background-position: left center; background-repeat: no-repeat; opacity: 1; }
body.aff .fixhedlogo.is-active .img { opacity: 1; }

/* hamburger: różowy kwadrat po prawej, białe kreski */
body.aff header .hamburger { display: flex; align-items: center; justify-content: center; float: right; margin: 0; padding: 0; width: var(--aff-header-h); height: var(--aff-header-h); background-color: var(--red); transition: background-color 0.2s; }
body.aff header .hamburger:hover { background-color: var(--red-darker); }
body.aff header .hamburger .hamburger-box { width: 24px; height: 18px; }
body.aff header .hamburger .hamburger-inner, body.aff header .hamburger .hamburger-inner::before, body.aff header .hamburger .hamburger-inner::after { width: 24px; height: 3px; background-color: #fff; border-radius: 0; }
body.aff header .hamburger .hamburger-inner::before { top: -8px; }
body.aff header .hamburger .hamburger-inner::after { bottom: -8px; width: 16px; }
body.aff header .hamburger.is-active .hamburger-inner::after, body.aff header .hamburger .hamburger-box:hover .hamburger-inner::after { width: 24px; }
/* stan otwarty (X): reguly top/bottom wyzej maja wyzsza specyficznosc niz .hamburger--squeeze.is-active z hamburgers.css, wiec trzeba je tu zerowac */
body.aff header .hamburger.is-active .hamburger-inner::before { top: 0; }
body.aff header .hamburger.is-active .hamburger-inner::after { bottom: 0; }
body.aff header .hamburger .hamburger-inner { margin-top: -1.5px; }

/* ikona logowania (niezalogowany) */
body.aff header .affuser { float: right; display: block; width: var(--aff-header-h); height: var(--aff-header-h); background-image: url(../nn/aff/../../nn/aff/img/user.svg); background-size: auto 1.35em; background-position: center center; background-repeat: no-repeat; transition: background-position 0.2s; }
body.aff header .affuser:hover { background-position: center 1.1em; }

/* zalogowany: login, koszyk, punkty, wyloguj - białe na czarnym */
body.aff header .pasgor .zalogowany { float: right; height: calc(var(--aff-header-h) / 0.8); margin: 0; padding: 0 0.3em 0 0.5em; display: inline-flex; align-items: center; background: transparent; color: #fff; font-size: 0.8em; } /* wysokość paska w em liczy się przy font-size 0.8em, stąd /0.8 - inaczej blok jest niższy od paska i treść siedzi za wysoko */
/* wyrównanie w pionie: flex zamiast floatów i ujemnych marginesów z gora.css; tekst jest mniejszy (0.8em), ikony zostają w rozmiarze sprzed zmiany (1.4em przy 19px) */
body.aff header .pasgor .zalogowany > a { display: inline-flex; align-items: center; line-height: 1; vertical-align: middle; }
body.aff header .zalogowany .loggedus span.a, body.aff header .zalogowany .kosz svg { float: none; flex: none; margin-top: 0; }
body.aff header .zalogowany .loggedus span.a { width: 1.75em; height: 1.75em; margin-right: 0.6em; }
body.aff header .zalogowany .loggedus span.l { line-height: 1; }
body.aff header .zalogowany .punkty { background-position: left center; background-size: auto 1.2em; padding-left: 1.3em; margin-right: 1em; min-height: 1.2em; }
body.aff header .pasgor .zalogowany > a.wyl { display: none; } /* wylogowanie jest w profilu użytkownika (inc_logowanie.jsp); specyficzność wyższa niż reguła "> a" wyżej */
/* koszyk jak na americanfilmfestival.pl: rączka obraca się na hoverze */
body.aff header .zalogowany .kosz svg { width: 1.8em; height: 1.67em; margin: -0.15em 0.25em 0 0; overflow: visible; } /* lekko w górę: kosz (bez rączki) ma być na wysokości liczby, a całość nie wyżej niż awatar i karnet */
body.aff header .zalogowany .koszsvg.racz { transition: transform 0.2s; transform-box: view-box; transform-origin: 19.123px 22.149px; }
body.aff header .zalogowany .kosz:hover .koszsvg.racz { transform: rotate(-30deg); }
body.aff header .zalogowany .loggedus, body.aff header .zalogowany .kosz, body.aff header .zalogowany .punkty, body.aff header .zalogowany .wyl { color: #fff; }
body.aff header .zalogowany .loggedus:hover, body.aff header .zalogowany .kosz:hover, body.aff header .zalogowany .wyl:hover { color: var(--red); }
body.aff header .zalogowany .loggedus span.a { background-image: url(../nn/aff/../../nn/aff/img/logged.svg); } /* gdy użytkownik ma zdjęcie, nadpisuje to inline <style> w top.jsp (zdjęcie w kółku) */
body.aff header .zalogowany .koszsvg { stroke: #fff; }
body.aff header .zalogowany .kosz:hover .koszsvg { stroke: var(--red); }
body.aff header .zalogowany .punkty { background-image: url(../nn/aff/../../nn/img/kos/karnet_goraff.svg); }
body.aff header .zalogowany .punkty.onsite { display: inline-flex; } /* flex z "> a": liczba punktów wyśrodkowana przy ikonie, jak login i liczba w koszyku */
body.aff header .zalogowany .punkty.vod { display: none; }

/* panel kasjera w pasku */
body.aff header .kpaneg { color: #fff; }

/* przyciemnienie tła przy otwartym menu także na desktopie */
body.aff #przyciemnionetlo { z-index: 990; }
body.aff #przyciemnionetlo.is-active { visibility: visible; }

/* --- menu w hamburgerze: czarne, białe wersaliki jak na AFF --- */
body.aff nav.mobile { top: var(--aff-header-h); background: #000; color: #fff; font-family: 'Lato', sans-serif; font-size: 1em; padding: 1.5em 4em 1.5em 2.5em; min-width: 16em; z-index: 994; }
body.aff nav.mobile > a { color: #fff; padding: 0; margin: 0.8em 0; font-size: 1em; line-height: 1.6em; text-transform: uppercase; letter-spacing: 0.158em; font-weight: 900; transition: none; } /* jak nav.mobile>a na americanfilmfestival.pl: 1em (19 px), line-height 1.6em, margines 0.8em */
body.aff nav.mobile > a:not(.hover_und_anim):hover, body.aff nav.mobile > a:not(.hover_und_anim).selected { color: #fff; text-decoration: underline; text-underline-position: under; } /* link języka (.hover_und_anim) ma własne animowane podkreślenie ::after, bez tego miałby podwójne */
body.aff nav.mobile > a:not(.hover_und_anim):not(.nh-menuprz):not(.kd-menuprz):hover { transform: none; } /* gora.css przesuwa pozycje o 0.12em w prawo selektorem z trzema :not() - trzeba go przebić tą samą specyficznością */
body.aff nav.mobile > a.zewn { font-weight: 700; letter-spacing: 0.1em; text-transform: none; margin-top: 1.4em; }
body.aff nav.mobile a.ost, body.aff nav.mobile a.lang { color: #fff; font-weight: 700; text-transform: uppercase; letter-spacing: 0.158em; }
body.aff nav.mobile a.lang { margin-top: 0; }
body.aff nav.mobile .prz { border-top: 3px solid #fff; width: 20px; margin: 1.5em 0; }
body.aff nav.mobile .skroty { display: none; }
body.aff nav.mobile .hover_und_anim::after, body.aff nav.mobile .hover_und_anim::before { background-color: #fff; }

@media screen and (max-width: 840px) {
  body.aff header { font-size: 1em; padding: 0; }
  body.aff header .pasgor, body.aff header.fixed .pasgor { height: var(--aff-header-h); }
  body.aff header .hamburger { margin-top: 0; }
  body.aff nav.mobile { padding-right: 2.5em; }
}
@media screen and (max-width: 550px) {
  body.aff header { padding: 0; }
  body.aff header .pasgor.zalo, body.aff header:not(.rez) .pasgor.zalo { background: #000; }
  body.aff header .pasgor.zalo .fixhedlogo { display: inline-flex; }
  body.aff header .pasgor .zalogowany { float: right; width: auto; padding: 0 0 0 0.3em; }
  body.aff header .pasgor .zalogowany .wyl { display: none; }
  body.aff .fixhedlogo .img { width: 5em; background-size: auto 1.5em; }
}
@media screen and (max-width: 500px) {
  body.aff nav.mobile { width: 100%; max-width: none; }
}
@media screen and (max-width: 400px) {
  body.aff nav.mobile { font-size: 1.1em; } /* jak na americanfilmfestival.pl */
}

/* --- reszta jak dotąd --- */
body.aff .nav-log nav.desk { display: none; }
body.aff .soc a.nhvod, body.aff .soc a.dostepnosc { display: none; }

/* apla grupy pozycji na rozbiegówce /aff (grupa_apla.jsp?tlo=bg-aff-red): czerwony gradient z --aff-red, odpowiednik bg-gradient blue z NH (tlo_gradient_blue.png) */
.grupa-menu.bg-aff-red { background-image: linear-gradient(135deg, color-mix(in srgb, var(--aff-red) 45%, #fff) 0%, color-mix(in srgb, var(--aff-red) 18%, #f3f3f3) 50%, #eeeeee 100%); }

/* przyciski programu (pasek_tekst.jsp): kalendarz na aff-blue, indeks filmów na aff-red */
body.aff .przyciski-bar .przyciski a.dark:has(.i.kalendarz) { background-color: var(--aff-blue); }
body.aff .przyciski-bar .przyciski a.dark:has(.i.indeks) { background-color: var(--aff-red); }