/*!
 * tw-consent: style banera zgod.
 * Branding per klient przez zmienne --twc-* (PHP nadpisuje w :root).
 * Kazda wlasciwosc ma fallback, wiec dziala nawet bez nadpisan.
 */

:root {
  --twc-bg: #0A3932;
  --twc-text: #F4F1EC;
  --twc-muted: #C7BDB6;
  --twc-accent: #F4F1EC;
  --twc-accent-text: #0A3932;
  --twc-radius: 12px;
  --twc-z: 99999;
  --twc-max: 720px;
}

/* Ukrywanie: musi wygrac z display:flex/grid ponizej. */
.twc-banner[hidden],
.twc-panel-overlay[hidden] { display: none !important; }

/* ---- Baner (1. warstwa) --------------------------------------------------- */

.twc-banner {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  width: calc(100% - 40px);
  max-width: var(--twc-max, 720px);
  box-sizing: border-box;
  z-index: var(--twc-z, 99999);
  background: var(--twc-bg, #0A3932);
  color: var(--twc-text, #F4F1EC);
  border-radius: var(--twc-radius, 12px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .35);
  padding: 20px 22px;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.5;
  animation: twc-in .3s ease;
}

.twc-banner-inner {
  display: flex;
  gap: 18px;
  align-items: center;
  flex-wrap: wrap;
}

.twc-banner-text { flex: 1 1 300px; min-width: 0; }

.twc-heading {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 700;
  color: var(--twc-text, #F4F1EC);
}

.twc-body {
  margin: 0;
  color: var(--twc-text, #F4F1EC);
}

.twc-banner-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  flex: 0 0 auto;
}

/* ---- Przyciski ------------------------------------------------------------ */

.twc-btn {
  font: inherit;
  font-weight: 600;
  padding: 11px 20px;
  border-radius: var(--twc-radius, 12px);
  border: 1px solid transparent;
  cursor: pointer;
  line-height: 1.2;
  text-align: center;
  transition: filter .15s ease, background .15s ease, color .15s ease;
}

/* Zgoda: wypelniony akcent. */
.twc-accept {
  background: var(--twc-accent, #F4F1EC);
  color: var(--twc-accent-text, #0A3932);
  border-color: var(--twc-accent, #F4F1EC);
}
.twc-accept:hover { filter: brightness(.94); }

/* Odmowa: ghost z ramka, TEN SAM rozmiar/padding co zgoda (rowna widocznosc). */
.twc-reject,
.twc-ghost {
  background: transparent;
  color: var(--twc-text, #F4F1EC);
  border-color: var(--twc-text, #F4F1EC);
}
.twc-reject:hover,
.twc-ghost:hover { background: rgba(244, 241, 236, .12); }

/* Zapisz wybor: rownowazny wizualnie z "Akceptuje wszystkie" (bez dark pattern). */
.twc-save {
  background: var(--twc-accent, #F4F1EC);
  color: var(--twc-accent-text, #0A3932);
  border-color: var(--twc-accent, #F4F1EC);
}
.twc-save:hover { filter: brightness(.94); }

.twc-settings-link,
.twc-policy-link {
  color: var(--twc-text, #F4F1EC);
  text-decoration: underline;
  cursor: pointer;
}
.twc-settings-link { font-weight: 600; }
.twc-policy-link { color: var(--twc-muted, #C7BDB6); }

/* Wyrazny focus: pierscien w kolorze tekstu, widoczny na ciemnym tle. */
.twc-btn:focus-visible,
.twc-settings-link:focus-visible,
.twc-policy-link:focus-visible,
.twc-switch input:focus-visible + .twc-slider {
  outline: 3px solid var(--twc-text, #F4F1EC);
  outline-offset: 2px;
}

/* ---- Panel (2. warstwa) + overlay ---------------------------------------- */

.twc-panel-overlay {
  position: fixed;
  inset: 0;
  z-index: calc(var(--twc-z, 99999) + 1);
  background: rgba(0, 0, 0, .5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
}

.twc-panel {
  width: 100%;
  max-width: 560px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;                 /* scroll wewnetrzny na niskich ekranach */
  box-sizing: border-box;
  background: var(--twc-bg, #0A3932);
  color: var(--twc-text, #F4F1EC);
  border-radius: var(--twc-radius, 12px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .45);
  padding: 26px;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.5;
  animation: twc-in .3s ease;
}

.twc-panel-heading {
  margin: 0 0 8px;
  font-size: 19px;
  font-weight: 700;
}

.twc-panel-body {
  margin: 0 0 18px;
  color: var(--twc-muted, #C7BDB6);
}

.twc-cats { display: flex; flex-direction: column; gap: 16px; }

.twc-cat {
  padding: 14px 0;
  border-top: 1px solid rgba(244, 241, 236, .14);
}

.twc-cat-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
}

.twc-cat-label { font-weight: 600; }

.twc-cat-desc {
  margin: 0;
  color: var(--twc-muted, #C7BDB6);
  font-size: 14px;
}

.twc-panel .twc-policy-link { display: inline-block; margin: 16px 0 20px; }

.twc-panel-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.twc-panel-actions .twc-btn { flex: 1 1 auto; }

/* ---- Przelacznik (czysty CSS, bez obrazkow) ------------------------------ */

.twc-switch {
  position: relative;
  display: inline-block;
  width: 46px;
  height: 26px;
  flex: none;
}
.twc-switch input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.twc-slider {
  position: absolute;
  inset: 0;
  background: var(--twc-muted, #C7BDB6);
  border-radius: 999px;
  transition: background .2s ease;
  pointer-events: none;
}
.twc-slider::before {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  left: 3px;
  top: 3px;
  border-radius: 50%;
  background: var(--twc-accent-text, #0A3932);
  transition: transform .2s ease;
}
.twc-switch input:checked + .twc-slider { background: var(--twc-accent, #F4F1EC); }
.twc-switch input:checked + .twc-slider::before { transform: translateX(20px); }
.twc-switch input:disabled { cursor: not-allowed; }
.twc-switch input:disabled + .twc-slider { opacity: .55; }

/* ---- Fasada click-to-load ------------------------------------------------- */

.twc-facade-title { display: block; margin: 0 0 14px; }

.twc-facade {
  border: 1px solid rgba(0, 0, 0, .15);
  border-radius: var(--twc-radius, 12px);
  padding: 22px;
  text-align: center;
  background: rgba(0, 0, 0, .03);
}
.twc-facade-btn {
  font: inherit;
  font-weight: 600;
  padding: 11px 20px;
  border-radius: var(--twc-radius, 12px);
  /* Fasada renderuje sie w tresci strony (zwykle jasnej), nie na ciemnym banerze:
     dlatego kolory odwrotne niz .twc-accept (D4 z review). */
  border: 1px solid var(--twc-bg, #0A3932);
  background: var(--twc-bg, #0A3932);
  color: var(--twc-text, #F4F1EC);
  cursor: pointer;
}
.twc-facade-btn:hover { filter: brightness(.94); }
.twc-facade-btn:focus-visible {
  outline: 3px solid var(--twc-bg, #0A3932);
  outline-offset: 2px;
}
.twc-facade-note {
  /* <small> jest elementem inline: bez display:block tekst oblewa przycisk
     "Pokaz tresc" i wchodzi na niego przy waskich kontenerach (KK Maison, stopka).
     max-width trzyma notke w czytelnej dlugosci wiersza. */
  display: block;
  margin: 12px auto 0;
  max-width: 46ch;
  font-size: 13px;
  line-height: 1.5;
  opacity: .75;
}

/* ---- Wejscie + reduced motion -------------------------------------------- */

@keyframes twc-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Baner jest wycentrowany translateX, nie nadpisujmy go animacja translateY. */
.twc-banner { animation-name: twc-slide; }
@keyframes twc-slide {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .twc-banner,
  .twc-panel { animation: none; }
}

/* ---- Mobile (≤600px) ------------------------------------------------------ */

@media (max-width: 600px) {
  .twc-banner {
    left: 0;
    right: 0;
    bottom: 0;
    transform: none;
    width: 100%;
    max-width: none;
    border-radius: var(--twc-radius, 12px) var(--twc-radius, 12px) 0 0;
    padding: 18px 16px;
  }
  .twc-banner-actions {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }
  .twc-banner-actions .twc-btn { width: 100%; }
  .twc-settings-link { text-align: center; padding: 4px 0; }
  .twc-panel-actions { flex-direction: column; }
  .twc-panel-actions .twc-btn { width: 100%; }
}

/* ---- Hardening: odpornosc na globalne style motywow (kit buttons, resety) ----
   Motywy (np. Elementor kit ".elementor-kit-14 button", resety "[type=button]") potrafia
   nadpisac klasy banera globalnymi regulami o wyzszej specyficznosci. Ponizsze reguly
   celowo podbijaja specyficznosc (#id / podwojny kontekst) i ustawiaja JAWNIE wszystko,
   co motywy lubia stylowac globalnie. (Lekcja z pilotazu KK Maison, v0.1.1.) */

#twc-banner .twc-btn,
.twc-panel .twc-btn,
.twc-facade .twc-facade-btn {
  border-radius: var(--twc-radius, 12px); /* kit potrafi wymusic radius 0 na button (KK: .elementor-kit-14) */
  text-transform: none;
  letter-spacing: normal;
  box-shadow: none;
  text-decoration: none;
  margin: 0;
  width: auto;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.2;
  cursor: pointer;
}
#twc-banner .twc-accept,
.twc-panel .twc-accept,
.twc-panel .twc-save {
  background: var(--twc-accent, #F4F1EC);
  color: var(--twc-accent-text, #0A3932);
  border: 1px solid var(--twc-accent, #F4F1EC);
}
#twc-banner .twc-reject,
#twc-banner .twc-ghost,
.twc-panel .twc-reject,
.twc-panel .twc-ghost {
  background: transparent;
  color: var(--twc-text, #F4F1EC);
  border: 1px solid var(--twc-text, #F4F1EC);
}
.twc-facade .twc-facade-btn {
  background: var(--twc-bg, #0A3932);
  color: var(--twc-text, #F4F1EC);
  border: 1px solid var(--twc-bg, #0A3932);
}
#twc-banner .twc-heading,
.twc-panel .twc-panel-heading {
  color: var(--twc-text, #F4F1EC);
  font-family: inherit;
  font-weight: 600;
  font-size: 17px;
  line-height: 1.35;
  margin: 0 0 8px;
  text-transform: none;
}
.twc-panel .twc-panel-heading { font-size: 19px; }
#twc-banner .twc-body,
.twc-panel .twc-panel-body,
.twc-panel .twc-cat-label {
  color: var(--twc-text, #F4F1EC);
  font-family: inherit;
}
.twc-panel .twc-cat-desc { color: var(--twc-muted, #C7BDB6); }
#twc-banner a.twc-policy-link,
.twc-panel a.twc-policy-link {
  color: var(--twc-muted, #C7BDB6);
  text-decoration: underline;
  text-underline-offset: 2px;
}
#twc-banner a.twc-settings-link {
  color: var(--twc-text, #F4F1EC);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---- Link "Ustawienia cookies" w stopce klienta --------------------------
   Integrator wstawia <a class="twc-open"> w SWOJEJ stopce, ktora bywa ciemna.
   Bez tej reguly link dziedziczy domyslny kolor linku motywu i znika na ciemnym tle.
   SPECYFICZNOSC: motywy stosuja regule typu ".elementor-kit-14 a {color:...}" (0,1,1)
   ladowana PO banner.css, wiec samo "a.twc-open" (0,1,1) przegrywa kolejnoscia.
   Dublujemy klase -> (0,2,0), co wygrywa bez uzycia !important.
   (Lekcja z KK Maison, 0.1.3 -> 0.1.4.) */
.twc-open.twc-open {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.twc-open.twc-open:hover { opacity: .8; }
.twc-open.twc-open:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}