:root {
  --bg: #FAF9F7;
  --container-bg: #FFF;
  --text: #3C3C3C;
  --accent: #8B7E6A;
  --light: #F5F0E8;
  --border: #E8E3DC;
  --radius: 12px;
  --font: 'Inter', system-ui, -apple-system, sans-serif;
  --shadow: 0 4px 20px rgba(0,0,0,.05);
}
[data-theme=dark] {
  --bg: #1A1A1A;
  --container-bg: #222;
  --text: #E0E0E0;
  --accent: #BFAF8F;
  --light: #2A2A2A;
  --border: #333;
  --shadow: 0 4px 20px rgba(0,0,0,.3);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box }
body { font-family:var(--font); background:var(--bg); color:var(--text); line-height:1.7; padding:1rem; min-height:100vh; transition:background .3s }
.container { max-width:900px; margin:2rem auto; background:var(--container-bg); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; position:relative }

header { padding:2rem 2rem 1.5rem; text-align:center; border-bottom:1px solid var(--border); background:var(--light); position:relative }
.theme-toggle { position:absolute; top:1rem; right:1rem; background:none; border:none; font-size:1.5rem; cursor:pointer; width:40px; height:40px; display:flex; align-items:center; justify-content:center; border-radius:50%; transition:background .2s }
.theme-toggle:hover { background:rgba(139,126,106,.15) }
[data-theme=dark] .theme-toggle:hover { background:rgba(191,175,143,.2) }
h1 { font-size:1.8rem; font-weight:500; color:var(--accent); margin-bottom:.5rem }

.flag { width:36px; height:24px; cursor:pointer; border-radius:6px; object-fit:cover; border:1px solid var(--border); transition:transform .2s,border .2s }
.flag:hover { transform:scale(1.1) }
.flag.active { border:2px solid var(--accent) }

.search-bar { padding:1.5rem; border-bottom:1px solid var(--border); background:var(--container-bg) }
.search-input { width:100%; padding:.75rem 1rem; font-size:1rem; border:1px solid var(--border); border-radius:8px; background:var(--light); color:var(--text); outline:none; transition:border .2s,background .3s }
.search-input::placeholder { color:#888; opacity:1 }
.search-input:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(139,126,106,.15) }
[data-theme=dark] .search-input:focus { box-shadow:0 0 0 3px rgba(191,175,143,.2) }

.panel { border-bottom:1px solid var(--border); display:none }
.panel.visible { display:block }
.panel:last-child { border-bottom:none }
.panel-title { padding:1.5rem; cursor:pointer; display:flex; justify-content:space-between; align-items:center; font-weight:500; font-size:1.1rem; transition:background .2s }
.panel-title:hover { background:var(--light) }
.panel-title::after { content:"+"; font-size:1.5rem; color:var(--accent) }
.panel.active .panel-title::after { content:"−" }
.panel-content { padding:0 1.5rem; max-height:0; overflow:hidden; transition:max-height .4s ease,padding .4s ease; background:var(--container-bg) }
.panel.active .panel-content { padding:1.5rem; max-height:2000px }
.panel-text { margin-bottom:1rem; font-size:.95rem }

/* ===== IMAGE GRID ===== */
.image-grid {
  display: flex;
  gap: 0.75rem;
  margin-top: 1rem;
  flex-wrap: wrap;
  justify-content: center;
}

.image-grid img.thumb {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 8px;
  cursor: zoom-in;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  transition: transform 0.2s;
}

.image-grid img.thumb:hover {
  transform: scale(1.05);
}

/* LIGHTBOX — PURE ICONS, MINIMAL */
.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.97);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.lightbox.active { display: flex; }

.lightbox-img {
  max-width: 100%;
  max-height: 92vh;
  border-radius: 14px;
  object-fit: contain;
  box-shadow: 0 12px 50px rgba(0,0,0,0.7);
}

/* Przyciski — tylko ikony, okrągłe, przezroczyste */
.lightbox-prev,
.lightbox-next,
.lightbox-close {
  position: absolute;
  background: rgba(255,255,255,0.12);
  border: none;
  color: white;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(12px);
  transition: all 0.22s ease;
  z-index: 10;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}

.lightbox-prev:hover,
.lightbox-next:hover,
.lightbox-close:hover {
  background: rgba(255,255,255,0.25);
  transform: scale(1.12);
  box-shadow: 0 6px 20px rgba(0,0,0,0.4);
}

/* Pozycje */
.lightbox-prev  { left: 1rem;  top: 50%; transform: translateY(-50%); }
.lightbox-next  { right: 1rem; top: 50%; transform: translateY(-50%); }
.lightbox-close { top: 1rem; right: 1rem; }

/* Licznik — mały, elegancki */
.lightbox-counter {
  position: absolute;
  bottom: 1.2rem;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.55);
  color: #fff;
  font: 500 0.82rem/1.4 system-ui;
  padding: 0.45rem 1rem;
  border-radius: 30px;
  backdrop-filter: blur(10px);
  letter-spacing: 0.5px;
}

/* Mobile — przyciski bliżej krawędzi */
@media (max-width: 480px) {
  .lightbox-prev  { left: 0.7rem; width: 42px; height: 42px; }
  .lightbox-next  { right: 0.7rem; width: 42px; height: 42px; }
  .lightbox-close { top: 0.7rem; right: 0.7rem; width: 40px; height: 40px; }
  .lightbox-counter { font-size: 0.78rem; padding: 0.4rem 0.9rem; }
}

.no-results { padding:2rem; text-align:center; color:#888; font-style:italic; display:none }

.contact-section { padding:2.5rem 1.5rem; background:var(--light); border-top:3px solid var(--accent); text-align:center; font-size:1rem; line-height:1.8; margin-top:1rem }
.contact-section h3 { font-size:1.6rem; font-weight:600; color:var(--accent); margin-bottom:1.25rem; display:flex; align-items:center; justify-content:center; gap:.5rem }
.contact-section h3 i { font-size:1.8rem }
.contact-item { margin:1rem 0; display:flex; align-items:center; justify-content:center; gap:.75rem; flex-wrap:wrap }
.contact-item i { font-size:1.4rem; color:var(--accent) }
.contact-item a { color:var(--accent); text-decoration:none; font-weight:500; border-bottom:1px dashed var(--accent); transition:all .2s }
.contact-item a:hover { color:var(--text); border-bottom:1px solid var(--accent) }
[data-theme=dark] .contact-section { background:rgba(42,42,42,.8) }

#update-banner { display:none; background:#8B7E6A; color:#fff; padding:1rem; text-align:center; font-size:.9rem; position:sticky; bottom:0; z-index:100; box-shadow:0 -2px 10px rgba(0,0,0,.1) }
#update-banner button { background:#fff; color:#8B7E6A; border:none; padding:.5rem 1rem; margin-left:.5rem; border-radius:4px; cursor:pointer; font-weight:500 }

@media(max-width:600px) {
  .container { margin:1rem }
  h1 { font-size:1.5rem }
  .panel-title { font-size:1rem; padding:1.2rem }
  .search-bar { padding:1rem }
  .theme-toggle { top:.75rem; right:.75rem }
  .contact-section h3 { font-size:1.4rem }
  .contact-section { padding:2rem 1rem }
}

/* ===== LISTY W PANELU — Z ODSTĘPEM PO PARAGRAFIE ===== */
.panel-text p {
  margin-bottom: 1rem; /* Domyślny odstęp pod akapitem */
}

.panel-text ol,
.panel-text ul {
  margin: 1.5rem 0 1rem 0;     /* GÓRNY ODSTĘP: 1.5rem = pusty wiersz */
  padding-left: 1.8rem;
  list-style-position: outside;
}

/* === MOBILE: mniejszy odstęp, ale nadal czytelny === */
@media (max-width: 480px) {
  .panel-text p {
    margin-bottom: 0.8rem;
  }
  .panel-text ol,
  .panel-text ul {
    margin: 1.2rem 0 0.8rem 0;
    padding-left: 1.4rem;
  }
}

/* === TABLET & DESKTOP === */
@media (min-width: 481px) {
  .panel-text ol,
  .panel-text ul {
    margin: 1.6rem 0 1rem 0;
  }
}

.panel-text li {
  margin-bottom: 0.6rem;
  line-height: 1.6;
  padding-left: 0.3rem;
}

/* ===== RESPONSIVE LANGUAGE SWITCHER ===== */
.lang-switcher {
  display: flex;
  gap: 0.75rem;
  padding: 0.5rem 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; /* Płynne przewijanie na iOS */
  scrollbar-width: none; /* Ukryj scrollbar (Firefox) */
  margin: 0 -1rem; /* Kompensuj padding */
}

.lang-switcher::-webkit-scrollbar {
  display: none; /* Ukryj scrollbar (Chrome, Safari) */
}

.lang-switcher .flag {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  cursor: pointer;
  transition: all 0.2s ease;
  scroll-snap-align: center;
  box-shadow: 0 2px 6px RGBA(0,0,0,0.15);
}

.lang-switcher .flag.active {
  transform: scale(1.15);
  box-shadow: 0 0 0 3px #8B7E6A, 0 4px 12px RGBA(0,0,0,0.2);
  z-index: 1;
}

/* === MOBILE: mniejsze flagi, płynne przewijanie === */
@media (max-width: 480px) {
  .lang-switcher {
    padding: 0.5rem 0.75rem;
    gap: 0.6rem;
  }
  .lang-switcher .flag {
    width: 32px;
    height: 32px;
  }
}