/*
 * wh_cookieconsent: style banera i preferencji (front).
 *
 * Tokeny --wh-cc-* sa nadpisywalne z motywu, wiec sklep dopasowuje wyglad bez
 * ruszania tego pliku (nadpisz je w custom.css na :root).
 *
 * Kazde przejscie ma 150 ms. Baner ma sie pojawic natychmiast, a nie wjezdzac.
 */

:root {
  --wh-cc-bg: #ffffff;
  --wh-cc-text: #23272f;
  --wh-cc-text-muted: #5b6270;
  --wh-cc-border: #e2e5ea;
  /* Kolor akcentu bierzemy z motywu (theme-tokens.css sklepu); #0049ff to
     kolor WH, uzywany dopiero gdy motyw nie definiuje wlasnego. */
  --wh-cc-primary: var(--wh-color-accent, var(--wh-color-primary, #0049ff));
  --wh-cc-primary-text: var(--wh-color-text-inverse, #ffffff);
  --wh-cc-primary-dark: #003acc;
  --wh-cc-primary-dark: color-mix(in srgb, var(--wh-cc-primary) 85%, #000);
  --wh-cc-radius: 8px;
  --wh-cc-shadow: 0 8px 30px rgba(16, 24, 40, .18);
  --wh-cc-z: 2147483000;
  --wh-cc-font: inherit;
}

.wh-cc-locked { overflow: hidden; }

/* ==== Tlo ==== */
.wh-cc-overlay {
  position: fixed; inset: 0; z-index: calc(var(--wh-cc-z) - 1);
  background: rgba(16, 24, 40, .55);
}

/* ==== Baner ==== */
.wh-cc-banner {
  position: fixed; z-index: var(--wh-cc-z);
  box-sizing: border-box;
  background: var(--wh-cc-bg); color: var(--wh-cc-text);
  font-family: var(--wh-cc-font); font-size: 14px; line-height: 1.55;
  box-shadow: var(--wh-cc-shadow);
  opacity: 0; transition: opacity .15s ease, transform .15s ease;
}
.wh-cc-banner.wh-cc-visible { opacity: 1; transform: none; }

.wh-cc-banner__inner { position: relative; padding: 20px 24px; }
.wh-cc-banner__title { margin: 0 0 6px; font-size: 17px; font-weight: 700; line-height: 1.3; }
.wh-cc-banner__desc { margin: 0 0 10px; color: var(--wh-cc-text-muted); }
.wh-cc-banner__desc p { margin: 0 0 6px; }

.wh-cc-link {
  display: inline-block; margin-bottom: 14px;
  color: var(--wh-cc-primary); text-decoration: underline; font-size: 13px;
}

/* Pasek dolny */
.wh-cc-banner--bar_bottom {
  left: 0; right: 0; bottom: 0; width: 100%;
  border-top: 1px solid var(--wh-cc-border);
  transform: translateY(12px);
}
.wh-cc-banner--bar_bottom .wh-cc-banner__inner {
  max-width: 1180px; margin: 0 auto;
  display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
}
.wh-cc-banner--bar_bottom .wh-cc-banner__desc { flex: 1 1 420px; margin-bottom: 0; }
.wh-cc-banner--bar_bottom .wh-cc-banner__title { flex: 1 0 100%; }
.wh-cc-banner--bar_bottom .wh-cc-link { flex: 1 0 100%; margin-bottom: 0; }

/* Box w rogu */
.wh-cc-banner--box_bottom_left,
.wh-cc-banner--box_bottom_right {
  bottom: 20px; width: min(420px, calc(100vw - 32px));
  border: 1px solid var(--wh-cc-border); border-radius: var(--wh-cc-radius);
  transform: translateY(12px);
}
.wh-cc-banner--box_bottom_left { left: 16px; }
.wh-cc-banner--box_bottom_right { right: 16px; }

/* Modal na srodku */
.wh-cc-banner--modal_center {
  top: 50%; left: 50%; width: min(560px, calc(100vw - 32px));
  border-radius: var(--wh-cc-radius);
  transform: translate(-50%, -48%);
}
.wh-cc-banner--modal_center.wh-cc-visible { transform: translate(-50%, -50%); }

/* ==== Przyciski ==== */
/* Trzy przyciski maja ten sam rozmiar, padding i wage czcionki, roznia sie
   wylacznie kolorem tla. Odrzucenie nie moze byc wizualnie slabsze od zgody,
   tak mowia wytyczne EROD. */
.wh-cc-banner__actions {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
}
.wh-cc-banner--bar_bottom .wh-cc-banner__actions { flex: 0 0 auto; }

.wh-cc-btn {
  flex: 1 1 auto; min-width: 150px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 11px 18px; border: 1px solid var(--wh-cc-border);
  border-radius: 6px; background: var(--wh-cc-bg); color: var(--wh-cc-text);
  font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1.2;
  text-align: center; cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.wh-cc-banner--bar_bottom .wh-cc-btn { flex: 0 0 auto; }
.wh-cc-btn:hover { background: #f4f6f9; }
.wh-cc-btn:focus-visible { outline: 3px solid var(--wh-cc-primary); outline-offset: 2px; }

.wh-cc-btn--primary {
  background: var(--wh-cc-primary); border-color: var(--wh-cc-primary); color: var(--wh-cc-primary-text);
}
.wh-cc-btn--primary:hover { background: var(--wh-cc-primary-dark); border-color: var(--wh-cc-primary-dark); }
.wh-cc-btn--secondary { background: var(--wh-cc-bg); border-color: var(--wh-cc-text); color: var(--wh-cc-text); }
.wh-cc-btn--secondary:hover { background: #f4f6f9; }
.wh-cc-btn--ghost { background: var(--wh-cc-bg); }

.wh-cc-close {
  position: absolute; top: 10px; right: 12px;
  width: 32px; height: 32px; padding: 0;
  border: 0; border-radius: 50%; background: transparent;
  color: var(--wh-cc-text-muted); font-size: 24px; line-height: 1; cursor: pointer;
}
.wh-cc-close:hover { background: #f0f2f5; color: var(--wh-cc-text); }
.wh-cc-close:focus-visible { outline: 3px solid var(--wh-cc-primary); outline-offset: 2px; }

/* ==== Preferencje ==== */
.wh-cc-modal {
  position: fixed; inset: 0; z-index: calc(var(--wh-cc-z) + 1);
  display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgba(16, 24, 40, .55);
  opacity: 0; transition: opacity .15s ease;
}
.wh-cc-modal.wh-cc-visible { opacity: 1; }

.wh-cc-modal__panel {
  display: flex; flex-direction: column;
  width: min(720px, 100%); max-height: min(86vh, 900px);
  background: var(--wh-cc-bg); color: var(--wh-cc-text);
  border-radius: var(--wh-cc-radius); box-shadow: var(--wh-cc-shadow);
  font-family: var(--wh-cc-font); font-size: 14px; line-height: 1.55;
}

.wh-cc-modal__head {
  position: relative; flex: 0 0 auto;
  padding: 20px 24px 14px; border-bottom: 1px solid var(--wh-cc-border);
}
.wh-cc-modal__title { margin: 0; font-size: 18px; font-weight: 700; }
.wh-cc-modal__body { flex: 1 1 auto; overflow-y: auto; padding: 18px 24px; }
.wh-cc-modal__desc { margin-bottom: 18px; color: var(--wh-cc-text-muted); }
.wh-cc-modal__foot {
  flex: 0 0 auto; display: flex; gap: 10px; flex-wrap: wrap;
  padding: 16px 24px; border-top: 1px solid var(--wh-cc-border);
}

/* ==== Kategoria ==== */
.wh-cc-cat { padding: 16px 0; border-bottom: 1px solid var(--wh-cc-border); }
.wh-cc-cat:last-of-type { border-bottom: 0; }
.wh-cc-cat__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.wh-cc-cat__label { font-size: 15px; font-weight: 700; cursor: pointer; }
.wh-cc-cat__side { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.wh-cc-cat__desc { margin-top: 6px; color: var(--wh-cc-text-muted); }
.wh-cc-required { font-size: 12px; font-weight: 600; color: var(--wh-cc-text-muted); white-space: nowrap; }

/* Przelacznik: natywny checkbox + narysowany tor.
   Checkbox zostaje w DOM (nie display:none), zeby czytniki ekranu i klawiatura
   dzialaly bez zadnych protez ARIA. */
.wh-cc-toggle { position: relative; display: inline-block; width: 46px; height: 26px; flex-shrink: 0; }
.wh-cc-toggle input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: pointer; z-index: 2;
}
.wh-cc-toggle__track {
  position: absolute; inset: 0; border-radius: 999px;
  background: #c8ccd4; transition: background .15s ease;
}
.wh-cc-toggle__track::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
  transition: transform .15s ease;
}
.wh-cc-toggle input:checked ~ .wh-cc-toggle__track { background: var(--wh-cc-primary); }
.wh-cc-toggle input:checked ~ .wh-cc-toggle__track::after { transform: translateX(20px); }
.wh-cc-toggle input:focus-visible ~ .wh-cc-toggle__track { outline: 3px solid var(--wh-cc-primary); outline-offset: 2px; }
.wh-cc-toggle--locked input { cursor: not-allowed; }
.wh-cc-toggle--locked .wh-cc-toggle__track { background: #9aa3b2; opacity: .75; }

/* ==== Tabela ciasteczek ==== */
.wh-cc-cat__details { margin-top: 10px; }
.wh-cc-cat__details summary {
  cursor: pointer; font-size: 13px; font-weight: 600; color: var(--wh-cc-primary);
}
.wh-cc-table { width: 100%; margin-top: 10px; border-collapse: collapse; font-size: 12.5px; }
.wh-cc-table th, .wh-cc-table td {
  padding: 7px 8px; border: 1px solid var(--wh-cc-border);
  text-align: left; vertical-align: top; word-break: break-word;
}
.wh-cc-table th { background: #f6f7f9; font-weight: 600; }
.wh-cc-table code { font-size: 12px; }

/* ==== Zaslonka zablokowanej ramki ==== */
.wh-cc-placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; min-height: 180px; padding: 24px;
  border: 1px dashed var(--wh-cc-border); border-radius: var(--wh-cc-radius);
  background: #f6f7f9; color: var(--wh-cc-text-muted);
  font-family: var(--wh-cc-font); font-size: 14px; text-align: center;
}
.wh-cc-placeholder p { margin: 0; }
.wh-cc-placeholder .wh-cc-btn { flex: 0 0 auto; }

/* ==== Przycisk powrotu do ustawien ==== */
.wh-cc-float {
  position: fixed; bottom: 18px; z-index: calc(var(--wh-cc-z) - 2);
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--wh-cc-border); border-radius: 50%;
  background: var(--wh-cc-bg); color: var(--wh-cc-text-muted);
  box-shadow: 0 2px 10px rgba(16, 24, 40, .16); cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}
.wh-cc-float:hover { color: var(--wh-cc-primary); border-color: var(--wh-cc-primary); }
.wh-cc-float:focus-visible { outline: 3px solid var(--wh-cc-primary); outline-offset: 2px; }
.wh-cc-float--left { left: 18px; }
.wh-cc-float--right { right: 18px; }

/* ==== Telefony ==== */
@media (max-width: 767px) {
  .wh-cc-banner--box_bottom_left,
  .wh-cc-banner--box_bottom_right,
  .wh-cc-banner--modal_center {
    left: 0; right: 0; bottom: 0; top: auto;
    width: 100%; max-width: none;
    border-radius: var(--wh-cc-radius) var(--wh-cc-radius) 0 0;
    transform: translateY(12px);
  }
  .wh-cc-banner--modal_center.wh-cc-visible { transform: none; }

  .wh-cc-banner__inner { padding: 18px 16px; }
  .wh-cc-banner__actions { flex-direction: column; align-items: stretch; }
  .wh-cc-btn { width: 100%; min-width: 0; }
  .wh-cc-modal__foot { flex-direction: column; }

  /* Tabela ciasteczek na waskim ekranie: wiersze jako karty z etykietami
     z data-label, zamiast poziomego scrolla. */
  .wh-cc-table thead { display: none; }
  .wh-cc-table, .wh-cc-table tbody, .wh-cc-table tr, .wh-cc-table td { display: block; width: 100%; }
  .wh-cc-table tr { margin-bottom: 10px; border: 1px solid var(--wh-cc-border); }
  .wh-cc-table td { border: 0; border-bottom: 1px solid var(--wh-cc-border); padding-left: 40%; position: relative; }
  .wh-cc-table td:last-child { border-bottom: 0; }
  .wh-cc-table td::before {
    content: attr(data-label); position: absolute; left: 8px; top: 7px;
    width: 35%; font-weight: 600; color: var(--wh-cc-text-muted);
  }
}

/* Ustawienie systemowe "mniej ruchu": nie animujemy niczego. */
@media (prefers-reduced-motion: reduce) {
  .wh-cc-banner, .wh-cc-modal, .wh-cc-btn, .wh-cc-toggle__track, .wh-cc-toggle__track::after {
    transition: none !important;
  }
  .wh-cc-banner { transform: none !important; }
}