/* Baner zgody na cookies - styl WYIZOLOWANY dla trzech stron statycznych
   (dzieci.html, angielski-dla-przedszkolakow.html, dorosli.html).

   Reguły przepisane 1:1 z assets/css/main.css (sekcja COOKIE BANNER + toggle-switch
   + przyciski .btn), ale ZAKRESOWANE do `.cookie-banner`, żeby nie kolidowały ze
   stylami projektu w assets/nowe/styles.css. Sprawdzone 12.09.2026: styles.css,
   stopka.css i adults.css NIE zawierają klas .cookie-*, .toggle-switch ani .btn
   (mają własne .button / .primary / .outline) - kolizji nazw nie ma.

   Zmienne (tokeny) serwisu definiujemy lokalnie na .cookie-banner, bo strony
   statyczne nie ładują main.css. Wartości = te same co w :root w main.css. */

.cookie-banner {
  /* Tokeny z assets/css/main.css - tylko te, których używa baner */
  --ec-orange: #EF7C0E;
  --ec-orange-600: #D26A05;
  --ec-orange-btn: #B05800;
  --ec-orange-btn-hover: #964B00;
  --ec-red: #C12A1F;
  --ec-red-600: #A11A11;
  --ink: #1A1A2E;
  --ink-soft: #4B4B62;
  --line: #ECE7DD;
  --line-strong: #DDD5C5;
  --r-md: 12px;
  --r-lg: 16px;
  --shadow-sm: 0 4px 12px rgba(20,30,60,.06);
  --shadow-md: 0 8px 24px rgba(20,30,60,.08);
  --shadow-lg: 0 16px 40px rgba(20,30,60,.10);
  --fs-sm: 14px;
  --fs-base: 16px;
  --transition: .25s cubic-bezier(.4,0,.2,1);

  position: fixed; bottom: 16px; left: 16px; right: 16px;
  max-width: 540px;
  background: #fff;
  padding: 22px;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--line);
  z-index: 100;
  display: none;

  /* Baner cookies: nigdy wyżej niż 70% ekranu (reszta przewijana w środku) */
  max-height: 70vh; overflow-y: auto;

  color: var(--ink);
  font-size: var(--fs-base);
  line-height: 1.6;
}
.cookie-banner.is-visible { display: block; }
.cookie-banner strong { color: var(--ink); }
.cookie-banner p { margin: 8px 0 12px; line-height: 1.6; font-size: var(--fs-base); }
.cookie-banner a { color: var(--ec-orange-600); text-decoration: underline; }
.cookie-banner__actions { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.cookie-banner__actions .btn { flex: 1; min-width: 130px; }

/* Przyciski - kopia .btn z main.css, zakresowana do baneru */
.cookie-banner .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 26px;
  min-height: 44px; min-width: 44px;  /* WCAG 2.5.5 - touch targets */
  border-radius: var(--r-md);
  font-family: inherit;
  font-weight: 700; font-size: var(--fs-base);
  letter-spacing: -.01em;
  border: 0; cursor: pointer;
  transition: transform var(--transition), background var(--transition), box-shadow var(--transition), color var(--transition);
  text-align: center; white-space: nowrap;
}
.cookie-banner .btn--primary { background: var(--ec-orange-btn); color: #fff; box-shadow: var(--shadow-sm); }
.cookie-banner .btn--primary:hover { background: var(--ec-orange-btn-hover); color: #fff; transform: translateY(-2px); box-shadow: var(--shadow-md); }
.cookie-banner .btn--accent { background: var(--ec-red); color: #fff; box-shadow: var(--shadow-sm); }
.cookie-banner .btn--accent:hover { background: var(--ec-red-600); color: #fff; transform: translateY(-2px); box-shadow: var(--shadow-md); }
.cookie-banner .btn--ghost { background: transparent; color: var(--ink); border: 2px solid var(--line-strong); }
.cookie-banner .btn--ghost:hover { border-color: var(--ec-orange); color: var(--ec-orange-600); }
.cookie-banner .btn--sm { padding: 10px 16px; font-size: var(--fs-sm); min-height: 44px; }

/* Panel ustawień szczegółowych */
.cookie-banner .cookie-cat {
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.cookie-banner .cookie-cat:last-of-type { border-bottom: 0; }
.cookie-banner .cookie-cat__head {
  display: flex; justify-content: space-between; align-items: center;
  cursor: pointer;
  font-weight: 700; font-size: var(--fs-base);
  margin-bottom: 4px;
}
.cookie-banner .cookie-cat__title { color: var(--ink); }
.cookie-banner .cookie-cat__desc {
  margin: 4px 0 0;
  font-size: 13px; color: var(--ink-soft); line-height: 1.5;
}

/* Toggle switch */
.cookie-banner .toggle-switch {
  position: relative; display: inline-block;
  width: 44px; height: 24px;
  flex-shrink: 0;
}
.cookie-banner .toggle-switch input { opacity: 0; width: 0; height: 0; }
.cookie-banner .toggle-switch__slider {
  position: absolute; cursor: pointer;
  inset: 0;
  background: var(--line-strong);
  border-radius: 24px;
  transition: var(--transition);
}
.cookie-banner .toggle-switch__slider::before {
  content: ""; position: absolute;
  width: 18px; height: 18px;
  left: 3px; top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: var(--transition);
}
.cookie-banner .toggle-switch input:checked + .toggle-switch__slider {
  background: var(--ec-orange);
}
/* A11Y: fokus klawiatury na przełączniku (input ma opacity:0 - outline rysujemy na sliderze) */
.cookie-banner .toggle-switch input:focus-visible + .toggle-switch__slider {
  outline: 3px solid var(--ec-orange);
  outline-offset: 2px;
}
.cookie-banner .toggle-switch input:checked + .toggle-switch__slider::before {
  transform: translateX(20px);
}
.cookie-banner .toggle-switch--locked .toggle-switch__slider {
  background: var(--ec-orange);
  opacity: .7;
  cursor: not-allowed;
}
.cookie-banner .toggle-switch--locked .toggle-switch__slider::before {
  transform: translateX(20px);
}