/* ==========================================================================
   Baner cookies (wtyczka CookieYes, wersja darmowa) w brandingu gabinetu.
   08.10.2026, D191.

   Dlaczego plik w motywie: wtyczka nie drukuje wlasnego CSS z ustawien
   (PAMIEC:cookieyes-lite-pulapki), a jej wlasny arkusz wchodzi do strony
   skryptem, juz po naszym. Dlatego kazda deklaracja ma !important, a plik
   jest ladowany na wp_enqueue_scripts z priorytetem 999.

   Wartosci tylko z tokens.css. Kolory w ustawieniach wtyczki (baza) sa tym
   samym zestawem hexow, wiec nawet bez tego pliku baner nie jest niebieski.
   ========================================================================== */

/* --- baza: krój i kolor tekstu ------------------------------------------- */
.cky-consent-container,
.cky-modal,
.cky-btn-revisit-wrapper {
  font-family: var(--font-text) !important;
  color: var(--text-on-light) !important;
}
.cky-consent-container *,
.cky-modal * {
  font-family: var(--font-text) !important;
}

/* --- okno powiadomienia -------------------------------------------------- */
.cky-consent-container {
  inline-size: min(440px, calc(100vw - 2 * var(--space-5))) !important;
  border-radius: var(--radius-md) !important;
}
.cky-consent-container.cky-box-bottom-right {
  inset-block-end: var(--space-5) !important;
  inset-inline-end: var(--space-5) !important;
}
.cky-consent-container .cky-consent-bar {
  padding: var(--space-6) !important;
  background: var(--surface-cream-hi) !important;
  border: var(--border-width, 1px) solid var(--surface-sand-deep) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: 0 16px 48px color-mix(in srgb, var(--surface-dark) 18%, transparent) !important;
}
.cky-notice .cky-title {
  margin: 0 0 var(--space-3) !important;
  font-family: var(--font-display) !important;
  font-size: 28px !important;
  font-weight: 400 !important;
  line-height: 1.15 !important;
  color: var(--text-on-light) !important;
}
.cky-notice-des,
.cky-notice-des *,
.cky-notice-group {
  font-size: 15px !important;
  line-height: 1.6 !important;
  color: var(--text-on-light) !important;
}

/* --- przyciski: ten sam jezyk co .btn na stronie ------------------------- */
.cky-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 0 !important;
  block-size: var(--btn-h-md) !important;
  margin: 0 !important;
  padding: 0 var(--space-4) !important;
  font-size: var(--btn-fs-md) !important;
  font-weight: var(--fw-medium, 500) !important;
  letter-spacing: var(--btn-ls) !important;
  line-height: 1 !important;
  border-radius: var(--radius-sm) !important;
  border: var(--border-width, 1px) solid transparent !important;
  opacity: 1 !important;
  transition:
    background-color var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    color var(--dur) var(--ease) !important;
}

/* glowny: ciemne wypelnienie, hover oddaje samą ramkę (D12) */
.cky-btn-accept {
  background: var(--surface-dark) !important;
  color: var(--text-on-dark) !important;
  border-color: var(--surface-dark) !important;
}
.cky-btn-accept:hover {
  background: transparent !important;
  color: var(--surface-dark) !important;
}
.cky-btn-accept:active {
  background: color-mix(in srgb, var(--surface-dark) 22%, transparent) !important;
}

/* poboczny: sama ramka w kolorze akcentu, hover wypelnia */
.cky-btn-reject,
.cky-btn-preferences {
  background: transparent !important;
  color: var(--accent-deep) !important;
  border-color: var(--accent-deep) !important;
}
.cky-btn-reject:hover,
.cky-btn-preferences:hover {
  background: var(--accent-deep) !important;
  color: var(--text-on-dark) !important;
}
.cky-btn-reject:active,
.cky-btn-preferences:active {
  background: var(--accent-deep-hover) !important;
  border-color: var(--accent-deep-hover) !important;
  color: var(--text-on-dark) !important;
}

/* trzeci: tekstowy, podkreslony */
.cky-btn-customize {
  block-size: auto !important;
  padding: var(--space-2) var(--space-2) !important;
  background: transparent !important;
  color: var(--accent-deep) !important;
  border-color: transparent !important;
  text-decoration: underline !important;
  text-underline-offset: 4px !important;
}
.cky-btn-customize:hover {
  color: var(--accent-deep-hover) !important;
}

/* uklad w oknie powiadomienia: Akceptuje i Odrzucam rowne, Ustawienia pod spodem */
.cky-notice-btn-wrapper {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: var(--space-3) !important;
  margin-block-start: var(--space-5) !important;
  padding: 0 !important;
}
.cky-notice-btn-wrapper .cky-btn-accept { order: 1 !important; }
.cky-notice-btn-wrapper .cky-btn-reject { order: 2 !important; }
.cky-notice-btn-wrapper .cky-btn-customize {
  order: 3 !important;
  grid-column: 1 / -1 !important;
  justify-self: center !important;
  width: auto !important;
}

/* fokus: jeden pierscien jak na stronie, kolor na jasnym tle */
.cky-btn:focus-visible,
.cky-accordion-btn:focus-visible,
.cky-btn-close:focus-visible,
.cky-banner-btn-close:focus-visible,
.cky-show-desc-btn:focus-visible,
.cky-btn-revisit:focus-visible,
.cky-switch input[type="checkbox"]:focus-visible {
  outline: var(--focus-width) solid var(--focus-on-light) !important;
  outline-offset: var(--focus-offset) !important;
}

/* --- centrum ustawien ---------------------------------------------------- */
.cky-overlay {
  background: color-mix(in srgb, var(--surface-dark) 55%, transparent) !important;
  opacity: 1 !important;
}
.cky-modal {
  inline-size: min(640px, calc(100vw - 2 * var(--space-3))) !important;
  max-inline-size: none !important;
  background: var(--surface-cream-hi) !important;
  color: var(--text-on-light) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: 0 24px 64px color-mix(in srgb, var(--surface-dark) 28%, transparent) !important;
}
.cky-preference-center {
  inline-size: 100% !important;
  max-block-size: 86vh !important;
  background: var(--surface-cream-hi) !important;
  color: var(--text-on-light) !important;
  border-radius: var(--radius-md) !important;
}
.cky-preference-header {
  padding: var(--space-5) var(--space-6) !important;
  border-bottom: var(--border-width, 1px) solid var(--surface-sand-deep) !important;
}
.cky-preference-header .cky-preference-title {
  font-family: var(--font-display) !important;
  font-size: 28px !important;
  font-weight: 400 !important;
  line-height: 1.15 !important;
  color: var(--text-on-light) !important;
}
.cky-preference-body-wrapper { padding: 0 var(--space-6) !important; }
.cky-preference-content-wrapper,
.cky-preference-content-wrapper * {
  font-size: 15px !important;
  line-height: 1.6 !important;
  color: var(--text-on-light) !important;
}
.cky-preference-content-wrapper {
  border-bottom: var(--border-width, 1px) solid var(--surface-sand-deep) !important;
}
.cky-accordion { border-bottom: var(--border-width, 1px) solid var(--surface-sand-deep) !important; }
.cky-accordion-header .cky-accordion-btn {
  font-size: 17px !important;
  font-weight: 600 !important;
  color: var(--text-on-light) !important;
}
.cky-accordion-header .cky-always-active {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--accent-deep) !important;
}
.cky-accordion-header-des,
.cky-accordion-header-des * {
  font-size: 15px !important;
  color: var(--text-on-light-muted) !important;
}
.cky-audit-table {
  background: var(--surface-sand) !important;
  border-radius: var(--radius-sm) !important;
}
.cky-audit-table,
.cky-audit-table * {
  color: var(--text-on-light) !important;
}
.cky-footer-wrapper { background: var(--surface-cream-hi) !important; border-radius: 0 0 var(--radius-md) var(--radius-md) !important; }
.cky-footer-shadow {
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-cream-hi) 0%, transparent), var(--surface-cream-hi)) !important;
}
.cky-prefrence-btn-wrapper {
  gap: var(--space-3) !important;
  padding: var(--space-5) var(--space-6) !important;
  border-top: var(--border-width, 1px) solid var(--surface-sand-deep) !important;
}
.cky-prefrence-btn-wrapper .cky-btn { flex: 1 1 0 !important; }
.cky-prefrence-btn-wrapper .cky-btn-accept { order: 3 !important; }
.cky-prefrence-btn-wrapper .cky-btn-preferences { order: 2 !important; }
.cky-prefrence-btn-wrapper .cky-btn-reject { order: 1 !important; }
.cky-preference-content-wrapper .cky-show-desc-btn { color: var(--accent-deep) !important; }

/* przelaczniki: wylaczony szary z tokenu pisma, wlaczony ciemny braz */
.cky-switch input[type="checkbox"] {
  background: color-mix(in srgb, var(--text-on-light) 42%, var(--surface-cream-hi)) !important;
}
.cky-switch input[type="checkbox"]:checked {
  background: var(--accent-deep) !important;
}
.cky-switch input[type="checkbox"]:disabled { opacity: 0.6 !important; }

/* --- przycisk ponownego otwarcia ustawien -------------------------------- */
.cky-btn-revisit-wrapper {
  inline-size: 48px !important;
  block-size: 48px !important;
  background: var(--surface-dark) !important;
  border: var(--border-width, 1px) solid var(--accent) !important;
  box-shadow: 0 6px 20px color-mix(in srgb, var(--surface-dark) 28%, transparent) !important;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease) !important;
}
.cky-btn-revisit-wrapper.cky-revisit-bottom-right {
  inset-block-end: var(--space-4) !important;
  inset-inline-end: var(--space-4) !important;
}
.cky-btn-revisit-wrapper:hover {
  background: var(--accent-deep) !important;
  border-color: var(--accent-hover) !important;
}
.cky-btn-revisit-wrapper .cky-btn-revisit img {
  inline-size: 26px !important;
  block-size: 26px !important;
}
.cky-revisit-bottom-right:hover::before {
  background: var(--surface-dark) !important;
  font-family: var(--font-text) !important;
  font-size: 13px !important;
  border-radius: var(--radius-sm) !important;
}
.cky-revisit-bottom-right:hover::after { border-left-color: var(--surface-dark) !important; }

/* --- telefon ------------------------------------------------------------- */
@media (max-width: 576px) {
  .cky-consent-container,
  .cky-consent-container.cky-box-bottom-right {
    inline-size: calc(100% - 2 * var(--space-3)) !important;
    max-inline-size: none !important;
    inset-block-end: var(--space-3) !important;
    inset-inline-end: var(--space-3) !important;
  }
  .cky-consent-container .cky-consent-bar { padding: var(--space-5) !important; }
  .cky-notice .cky-title,
  .cky-notice-des,
  .cky-notice-btn-wrapper { padding: 0 !important; }
  .cky-notice .cky-title { font-size: 24px !important; }
  .cky-notice-des { max-height: none !important; overflow: visible !important; }
  .cky-notice-btn-wrapper { flex-direction: row !important; margin-block-start: var(--space-4) !important; }
  .cky-notice-btn-wrapper .cky-btn { width: auto !important; margin: 0 !important; }
  .cky-notice-btn-wrapper .cky-btn-accept { margin-block-start: 0 !important; }
  .cky-modal {
    inline-size: calc(100% - 2 * var(--space-3)) !important;
  }
  .cky-preference-center { max-block-size: 88vh !important; }
  .cky-preference-header { padding: var(--space-4) var(--space-5) !important; }
  .cky-preference-body-wrapper { padding: 0 var(--space-5) !important; }
  .cky-prefrence-btn-wrapper { flex-direction: column !important; padding: var(--space-4) var(--space-5) !important; }
  .cky-prefrence-btn-wrapper .cky-btn { width: 100% !important; flex: none !important; margin: 0 !important; }
  .cky-prefrence-btn-wrapper .cky-btn-accept { order: 1 !important; }
  .cky-prefrence-btn-wrapper .cky-btn-preferences { order: 2 !important; }
  .cky-prefrence-btn-wrapper .cky-btn-reject { order: 3 !important; }
  /* Przycisk ustawien na telefonie: zakladka przy prawej krawedzi, 40 px.
     Przyciski CTA w hero maja 40 px marginesu z kazdej strony, wiec zakladka ich
     nie przykrywa (zmierzone na 375: CTA x 40-320, zakladka x 335-375). */
  .cky-btn-revisit-wrapper,
  .cky-btn-revisit-wrapper.cky-revisit-bottom-right {
    inline-size: 40px !important;
    block-size: 40px !important;
    inset-inline-end: 0 !important;
    inset-block-end: var(--space-3) !important;
    border-inline-end: 0 !important;
    border-radius: var(--radius-md) 0 0 var(--radius-md) !important;
  }
  .cky-btn-revisit-wrapper .cky-btn-revisit img {
    inline-size: 24px !important;
    block-size: 24px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cky-consent-container,
  .cky-modal,
  .cky-btn,
  .cky-btn-revisit-wrapper,
  .cky-switch input[type="checkbox"],
  .cky-switch input[type="checkbox"]::before {
    transition: none !important;
    animation: none !important;
  }
}