/* ==========================================================================
   Cookie Consent - overlay, modal, preferencje, toggle, tabele cookies

   Struktura klas `cc-*` przeniesiona ze wzorca folkowa-art-pl
   (themes/folkowa/css/19-cookie-consent.css). Wartosci sa napisane od nowa
   na zmiennych surveylab z base.css, wiec light i dark ida za motywem -
   z folkowej nie przeszedl ani jeden kolor, bo tamten motyw ma wlasna
   palete (--color-*) i nie ma trybu ciemnego.
   ========================================================================== */

/* --- Overlay --- */
.cc-overlay{
  position:fixed;
  inset:0;
  z-index:9998;
  background:rgba(0,0,0,.45);
  backdrop-filter:blur(2px);
}
.cc-overlay[hidden],.cc-modal[hidden]{display:none}

/* --- Modal (wspolne) --- */
.cc-modal{
  position:fixed;
  z-index:9999;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:min(94vw,38rem);
  max-height:90vh;
  overflow-y:auto;
  background:var(--card);
  color:var(--ink);
  border:1px solid var(--rule);
  border-radius:var(--radius);
  box-shadow:var(--shadow-lift);
  font-family:var(--body);
}
.cc-modal--prefs{width:min(94vw,52rem)}
.cc-modal__body{padding:24px 24px 20px}

.cc-modal__header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  margin-bottom:12px;
}
.cc-modal__close{
  background:none;
  border:0;
  font-size:1.75rem;
  line-height:1;
  color:var(--ink-3);
  cursor:pointer;
  padding:0 4px;
  flex-shrink:0;
}
.cc-modal__close:hover{color:var(--ink)}
.cc-modal__close:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}

.cc-modal__title{
  font-family:var(--display);
  font-size:1.125rem;
  font-weight:600;
  color:var(--ink);
  margin:0 0 12px;
  line-height:1.3;
}
.cc-modal__header .cc-modal__title{margin-bottom:0}

.cc-modal__text{
  font-size:.875rem;
  line-height:1.55;
  color:var(--ink-2);
  margin:0 0 12px;
}
.cc-modal__text a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.cc-modal__text a:hover{color:var(--accent-hover)}

/* --- Pasek przyciskow --- */
.cc-modal__actions{
  display:flex;
  gap:12px;
  margin-top:20px;
}

/* --- Przyciski ---
   Wszystkie trzy maja ten sam rozmiar celu dotykowego i ta sama wage
   typograficzna. "Rezygnuje" nie jest szarym drobnym drukiem ani linkiem -
   to wymog prawny, nie kwestia gustu. Rozni je wylacznie wypelnienie. */
.cc-btn{
  font-family:var(--display);
  font-size:.875rem;
  font-weight:500;
  line-height:1;
  padding:12px 20px;
  min-height:44px;
  border-radius:var(--radius-sm);
  border:1px solid transparent;
  cursor:pointer;
  white-space:nowrap;
  transition:background-color .2s,color .2s,border-color .2s;
  flex:1;
  text-align:center;
}
.cc-btn--primary{background:var(--accent-fill);color:#fff;border-color:var(--accent-fill)}
.cc-btn--primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.cc-btn--outline{background:transparent;color:var(--ink);border-color:var(--rule)}
.cc-btn--outline:hover{border-color:var(--ink-3);background:var(--paper-2)}
.cc-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* --- Kategorie --- */
.cc-categories{
  margin-top:16px;
  border-top:1px solid var(--rule-soft);
}
.cc-category{border-bottom:1px solid var(--rule-soft)}
.cc-category__header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:14px 0;
  cursor:pointer;
  list-style:none;
  user-select:none;
}
.cc-category__header::-webkit-details-marker{display:none}
.cc-category__header::before{
  content:"\203A";
  font-size:1.25rem;
  color:var(--ink-3);
  margin-right:8px;
  transition:transform .2s;
  display:inline-block;
  flex-shrink:0;
}
details[open] > .cc-category__header::before{transform:rotate(90deg)}
.cc-category__header:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}

.cc-category__name{
  font-family:var(--display);
  font-size:1rem;
  font-weight:600;
  color:var(--ink);
  flex:1;
  cursor:pointer;
}
.cc-category__badge{
  font-size:.8125rem;
  font-weight:500;
  color:var(--survey);
  flex-shrink:0;
}
.cc-category__desc{
  font-size:.875rem;
  line-height:1.55;
  color:var(--ink-2);
  margin:0 0 16px;
  padding-left:20px;
}

/* --- Przelacznik --- */
.cc-toggle{
  position:relative;
  display:inline-block;
  width:3rem;
  height:1.625rem;
  flex-shrink:0;
  cursor:pointer;
}
.cc-toggle input{
  opacity:0;
  width:0;
  height:0;
  position:absolute;
}
/* etykieta tylko dla czytnika ekranu - przelacznik bez tekstu jest niemy */
.cc-toggle__label{
  position:absolute;
  width:1px;height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
}
.cc-toggle__slider{
  position:absolute;
  inset:0;
  background:var(--rule);
  border-radius:1rem;
  transition:background-color .25s;
}
.cc-toggle__slider::before{
  content:"";
  position:absolute;
  width:1.25rem;
  height:1.25rem;
  left:.1875rem;
  bottom:.1875rem;
  background:#fff;
  border-radius:50%;
  transition:transform .25s;
  box-shadow:0 1px 3px rgba(0,0,0,.25);
}
.cc-toggle input:checked + .cc-toggle__slider{background:var(--accent-fill)}
.cc-toggle input:checked + .cc-toggle__slider::before{transform:translateX(1.375rem)}
.cc-toggle input:focus-visible + .cc-toggle__slider{outline:2px solid var(--accent);outline-offset:2px}

/* --- Tabele ciasteczek --- */
.cc-cookies{
  padding:0 0 16px 20px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.cc-cookies__table{
  width:100%;
  border:1px solid var(--rule-soft);
  border-radius:var(--radius-sm);
  border-collapse:separate;
  border-spacing:0;
  overflow:hidden;
  font-size:.8125rem;
}
.cc-cookies__table tr{border-bottom:1px solid var(--rule-soft)}
.cc-cookies__table tr:last-child{border-bottom:none}
.cc-cookies__table th,.cc-cookies__table td{
  padding:8px 12px;
  text-align:left;
  vertical-align:top;
  line-height:1.5;
}
.cc-cookies__table th{
  width:8rem;
  font-weight:600;
  color:var(--ink);
  background:var(--paper-2);
  white-space:nowrap;
}
.cc-cookies__table td{color:var(--ink-2);word-break:break-word}

/* Link "Ustawienia cookies" w stopce - wyglada jak reszta linkow stopki. */
.consent-reopen{
  font:inherit;
  background:none;
  border:0;
  padding:0;
  color:inherit;
  cursor:pointer;
  text-decoration:underline;
}
.consent-reopen:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* --- Waskie ekrany --- */
@media (max-width:640px){
  .cc-modal__body{padding:16px}
  .cc-modal__actions{flex-direction:column}
  .cc-btn{flex:none;width:100%}
  .cc-cookies{padding-left:0}
  .cc-cookies__table th{width:6.5rem}
}