/* ==========================================================================
   Zgody na cookies (CMP) — Stadnina Koni w Nowej Wsi Kosowskiej
   Modal na środku ekranu przy pierwszej wizycie + panel „Dostosuj”
   + stały przycisk do zmiany ustawień po decyzji.
   Cała warstwa jest budowana przez js/cookies.js — tutaj tylko wygląd.
   Motyw zgodny ze stroną: krem/biel, akcent złoty #b8944e, ciemny #2D2D2D.
   ========================================================================== */

/* Tokeny na :root — korzysta z nich także zasłona treści zewnętrznych (.cc-veil),
   która żyje w zwykłym HTML strony, poza kontenerem .cc-root budowanym przez JS. */
:root{
  --cc-gold:#b8944e;
  --cc-gold-dk:#AB8441;
  --cc-beige:#F2ECD1;
  --cc-ink:#26241d;
  --cc-ink-soft:#2b2620;
  --cc-muted:#7c766a;
  --cc-line:#e6e1d2;
}
.cc-root{
  font-family:'Inter',system-ui,sans-serif;
  color:var(--cc-ink);
}

/* ---------- Zasłona ---------- */
.cc-overlay{
  position:fixed;inset:0;z-index:9998;
  background:rgba(26,22,18,.55);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;
  padding:24px;
  opacity:0;transition:opacity .28s ease;
}
.cc-overlay.is-open{opacity:1}
/* UWAGA: bez tych dwóch reguł zasłona po zamknięciu ZOSTAJE na wierzchu i przechwytuje
   kliknięcia (autorski display:flex bije display:none z atrybutu hidden), a strona
   wygląda na „zawieszoną”. pointer-events zdejmuje blokadę już w trakcie zanikania. */
.cc-overlay[hidden]{display:none}
.cc-overlay:not(.is-open){pointer-events:none}

/* ---------- Karta ---------- */
.cc-box{
  width:100%;max-width:820px;
  /* Dwie deklaracje po sobie, nie pomyłka: na telefonie `100vh` liczy się
     RAZEM z paskiem adresu, więc karta wychodzi wyższa niż widoczny ekran
     i dolna część — z przyciskami — zostaje pod krawędzią. `100dvh` mierzy
     to, co widać naprawdę; starsze przeglądarki zignorują drugą linię
     i zostaną przy pierwszej. */
  max-height:calc(100vh - 48px);
  max-height:calc(100dvh - 48px);
  background:#fff;border-radius:24px;
  box-shadow:0 30px 80px rgba(20,16,10,.35);
  display:flex;flex-direction:column;overflow:hidden;
  transform:translateY(14px) scale(.98);transition:transform .3s cubic-bezier(.2,.8,.3,1);
}
.cc-overlay.is-open .cc-box{transform:none}

/* Krzyżyk — tylko przy ponownym otwarciu ustawień (gdy zgoda już zapisana) */
.cc-x{
  position:absolute;top:18px;right:18px;z-index:2;
  width:38px;height:38px;border-radius:50%;border:1px solid var(--cc-line);
  background:#fff;color:var(--cc-ink-soft);cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-size:20px;
  transition:background .25s ease,color .25s ease;
}
.cc-x .fi{display:inline-flex;line-height:0}
.cc-x:hover{background:#2D2D2D;color:#fff}

.cc-box{position:relative}
/* `flex:1` + `min-height:0` są tu OBOWIĄZKOWE. Bez nich element flex nie
   skurczy się poniżej wysokości swojej treści — panel z czterema kategoriami
   rozpycha kartę, a `overflow:hidden` na .cc-box ucina to, co nie mieści się
   na ekranie, czyli akurat przyciski. Samo `overflow-y:auto` tego nie załatwia,
   bo nie ma czego przewijać, dopóki element może rosnąć. */
.cc-body{padding:26px 32px 6px;overflow-y:auto;flex:1 1 auto;min-height:0;overscroll-behavior:contain}
/* Pasek akcji i stopka mają STAĆ, przewija się tylko środek. */
.cc-actions,.cc-foot{flex-shrink:0}

/* Nagłówek kompaktowy: ikona obok tytułu, nie nad nim */
.cc-head{display:flex;align-items:center;gap:16px;margin-bottom:14px}
.cc-icon{
  width:46px;height:46px;flex:0 0 auto;border-radius:50%;
  background:var(--cc-beige);color:var(--cc-gold-dk);
  display:flex;align-items:center;justify-content:center;font-size:21px;
}
.cc-icon .fi{display:inline-flex;line-height:0}
.cc-title{font-size:23px;font-weight:600;line-height:1.2}
.cc-text{font-size:14.5px;line-height:1.55;color:var(--cc-muted)}
.cc-text strong{color:var(--cc-ink);font-weight:600}
.cc-text code,.cc-cat-desc code{
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px;
  background:#f4f1e6;border-radius:5px;padding:1px 5px;color:var(--cc-ink-soft);
}
.cc-text + .cc-text{margin-top:8px}

/* Pigułki ze skrótem kategorii (pierwsza warstwa) */
.cc-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.cc-chip{
  font-size:12.5px;line-height:1;padding:8px 13px;border-radius:20px;
  background:#f4f1e6;color:var(--cc-muted);border:1px solid var(--cc-line);
}
.cc-chip.is-on{background:var(--cc-beige);color:var(--cc-gold-dk);border-color:#E3D6B4}

/* Drobny druk z informacją z art. 13 RODO */
.cc-fine{
  margin-top:16px;padding-top:14px;border-top:1px solid var(--cc-line);
  font-size:12.5px;line-height:1.5;color:#8d877b;
}
.cc-fine a{color:var(--cc-gold-dk);text-decoration:underline;text-underline-offset:2px}
.cc-fine a:hover{color:var(--cc-ink)}
.cc-text a{color:var(--cc-gold-dk);text-decoration:underline;text-underline-offset:2px}
.cc-text a:hover{color:var(--cc-ink)}

/* ---------- Przyciski ---------- */
/* Trzy równorzędne przyciski w jednym rzędzie — zgoda i odmowa identyczne. */
.cc-actions{
  padding:18px 32px 24px;
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;
}
.cc-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  flex:1 1 0;min-width:180px;
  padding:15px 20px;border-radius:40px;border:1px solid transparent;
  font-family:inherit;font-size:14.5px;font-weight:500;line-height:1;
  cursor:pointer;transition:background .25s ease,color .25s ease,border-color .25s ease;
}
.cc-btn .fi{display:inline-flex;font-size:14px;line-height:0}
.cc-btn--dark{background:#2D2D2D;color:#fff}
.cc-btn--dark:hover{background:var(--cc-gold-dk)}
.cc-btn--beige{background:var(--cc-beige);color:var(--cc-ink-soft);border-color:#E3D6B4}
.cc-btn--beige:hover{background:var(--cc-gold-dk);color:#fff;border-color:var(--cc-gold-dk)}
.cc-btn--ghost{background:#fff;color:var(--cc-ink-soft);border-color:var(--cc-line)}
.cc-btn--ghost:hover{background:#f6f4ea;border-color:#d8d2c0}
.cc-btn--wide{flex-basis:100%}

/* Stopka karty z linkiem do polityki */
.cc-foot{
  padding:0 32px 22px;font-size:12.5px;color:var(--cc-muted);
  display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;
}
.cc-foot a{color:var(--cc-muted);text-decoration:underline;text-underline-offset:2px}
.cc-foot a:hover{color:var(--cc-ink)}

/* ---------- Panel „Dostosuj” ---------- */
.cc-cats{margin-top:16px;border-top:1px solid var(--cc-line)}
.cc-cat{border-bottom:1px solid var(--cc-line);padding:14px 0}
.cc-cat-head{display:flex;align-items:center;gap:14px}
.cc-cat-name{font-size:15.5px;font-weight:600;flex:1}
.cc-cat-desc{font-size:13.5px;line-height:1.55;color:var(--cc-muted);margin-top:6px}
.cc-cat-lock{font-size:12.5px;color:var(--cc-gold-dk);font-weight:500;white-space:nowrap}
.cc-cat-empty{font-size:13px;line-height:1.55;color:var(--cc-muted);margin-top:8px}

/* Druga warstwa: spis konkretnych plików */
.cc-more{margin-top:8px}
.cc-more summary{
  display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  font-size:12.5px;font-weight:500;color:var(--cc-gold-dk);
  list-style:none;padding:2px 0;
}
.cc-more summary::-webkit-details-marker{display:none}
.cc-more summary::before{content:"▸";font-size:11px;transition:transform .2s ease}
.cc-more[open] summary::before{content:"▾"}
.cc-more summary:hover{color:var(--cc-ink)}
.cc-tablewrap{overflow-x:auto;margin-top:8px;border:1px solid var(--cc-line);border-radius:12px}
.cc-table{width:100%;border-collapse:collapse;font-size:12.5px;min-width:520px}
.cc-table th,.cc-table td{padding:8px 11px;text-align:left;vertical-align:top;line-height:1.45}
.cc-table thead th{background:#f4f1e6;color:var(--cc-ink-soft);font-weight:600;white-space:nowrap}
.cc-table tbody td{color:var(--cc-muted);border-top:1px solid var(--cc-line)}
.cc-table code{
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;
  color:var(--cc-ink-soft);background:#f4f1e6;border-radius:5px;padding:1px 5px;
}

/* Przełącznik */
.cc-sw{position:relative;flex:0 0 auto;width:50px;height:28px}
.cc-sw input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.cc-sw i{
  position:absolute;inset:0;border-radius:20px;background:#dcd7c8;
  transition:background .22s ease;pointer-events:none;
}
.cc-sw i::after{
  content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;
  border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);
  transition:transform .22s ease;
}
.cc-sw input:checked + i{background:var(--cc-gold)}
.cc-sw input:checked + i::after{transform:translateX(22px)}
.cc-sw input:focus-visible + i{outline:2px solid var(--cc-ink);outline-offset:3px}

/* ---------- Stały przycisk „Ustawienia cookies” ---------- */
.cc-fab{
  position:fixed;left:20px;bottom:20px;z-index:990;
  width:52px;height:52px;border-radius:50%;border:1px solid var(--cc-line);
  background:#fff;color:var(--cc-gold-dk);
  display:flex;align-items:center;justify-content:center;font-size:22px;
  box-shadow:0 10px 26px rgba(20,16,10,.18);cursor:pointer;
  transition:background .25s ease,color .25s ease,transform .25s ease;
}
.cc-fab .fi{display:inline-flex;line-height:0}
.cc-fab:hover{background:#2D2D2D;color:#fff;transform:translateY(-2px)}
.cc-fab[hidden]{display:none}

/* Link w stopce strony (dokładany przez JS do .foot-legal) */
.cc-foot-link{cursor:pointer}

/* ---------- Zablokowana treść zewnętrzna (np. mapa Google) ---------- */
.cc-guard{position:relative;font-family:'Inter',system-ui,sans-serif}
.cc-guard.is-blocked > iframe{visibility:hidden}
.cc-veil{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:14px;text-align:center;
  padding:28px;background:#eae6d6;color:var(--cc-ink);
}
.cc-guard:not(.is-blocked) .cc-veil{display:none}
.cc-veil .cc-veil-ico{font-size:30px;color:var(--cc-gold-dk);line-height:0}
.cc-veil p{font-size:15px;line-height:1.6;color:var(--cc-muted);max-width:460px}
.cc-veil .cc-btn{flex:0 0 auto}
.cc-veil-links{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.cc-veil-links button,.cc-veil-links a{
  background:none;border:none;padding:0;cursor:pointer;
  font-family:inherit;font-size:13px;color:var(--cc-muted);
  text-decoration:underline;text-underline-offset:2px;
}
.cc-veil-links button:hover,.cc-veil-links a:hover{color:var(--cc-ink)}

/* ---------- Blokada przewijania tła ---------- */
body.cc-locked{overflow:hidden}

/* ---------- Mobile ---------- */
/* Tablet: przyciski w dwóch rzędach, żeby nie robiły się paskami */
@media(max-width:760px){
  .cc-btn{min-width:150px}
}

@media(max-width:600px){
  .cc-overlay{padding:12px;align-items:flex-end}
  .cc-box{max-height:calc(100vh - 24px);border-radius:22px}
  .cc-box{max-height:calc(100dvh - 24px)}
  .cc-body{padding:22px 18px 4px}
  .cc-actions{padding:14px 18px 18px;gap:8px}
  .cc-foot{padding:0 18px 16px}
  .cc-btn{flex-basis:100%;padding:14px 18px}
  .cc-title{font-size:20px}
  .cc-head{gap:12px;margin-bottom:12px}
  .cc-icon{width:40px;height:40px;font-size:18px}
  .cc-text{font-size:14px}
  .cc-fab{left:14px;bottom:14px;width:46px;height:46px;font-size:19px}
}

@media(prefers-reduced-motion:reduce){
  .cc-overlay,.cc-box,.cc-btn,.cc-fab,.cc-sw i,.cc-sw i::after{transition:none}
}