@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet"');

:root {
   --base-clr: #f4efe9;
   --border-clr: #e1cc94;
   --header-clr: #444;
   --text-clr: #444;
   --text-light-clr: #505050;
   --icon-clr: #888;
   --accent-clr: #b00909;
   --action-clr: #c79f3b;
   --action-hover-clr: #d2b262;
   --hover-clr: #f0e7d0;

   /* Czcionki */
   font-size: 62.5%;

   /* Nagłówki */
  --h1: clamp(3.5rem, 8vw, 6rem);
  --h2: clamp(2.8rem, 4.5vw, 4rem);
  --h3: clamp(2.6rem, 4vw, 3rem);
  --h4: clamp(2.5rem, 3.5vw, 2.8rem);
  --h5: clamp(1.6rem, 3.5vw, 2.2rem);
  
  /* Akapity i linki */
  --p: clamp(1.55rem, 4vw, 1.6rem); 
  --a: clamp(1.45rem, 4vw, 1.6rem);

  /* ikony */
  --icon-size: 24px;
}
* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: system-ui, sans-serif;
}

html {
   height: 100%;
   margin: 0;
   padding: 0;
   overflow-x: hidden;
}

html, body {
   min-height: 100%;
}

body {
   /* position: relative; */
   margin: 0 auto;
   width: 100%;
   max-width: 1600px;
   height: 100%;
   background-color: var(--base-clr);
   color: var(--text-clr);
   display: grid;
   grid-template-columns: auto 1fr;
}

.main-content-wrapper {
   height: 100%;
   display: flex;
   flex-direction: column;
}
main {
   flex-grow: 1;
   position: relative;
   min-height: max-content;
   padding: 0px min(15px, 7%);
   /* margin-bottom: 60px; */
   border: 1px solid var(--border-clr);
   border-bottom: none;
}



svg {
   height: var(--icon-size);
   fill: var(--action-hover-clr);
}
/* Style dla nagłówków */
h1 { font-size: var(--h1); }
h2 { font-size: var(--h2); }
h3 { font-size: var(--h3); }
h4 { font-size: var(--h4); }
h5 { font-size: var(--h5); }
h2, h3, h4, h5 {
   margin: 1.5rem 0 0.5rem;
   font-weight: 700;
   line-height: 1.2;
   color: var(--header-clr);
}
h4.title {
   color: var(--border-clr);
   /* font-size: 3rem; */
   text-align: left;
}
h5.h5-hero {
   display: inline-block;
   margin: 0;
   padding: 1.2rem 2rem;
   max-width: fit-content;
   color: white;
   background-color: black;
   border-radius: 2px;
   opacity: 0.85;
}

/* Styl dla akapitów */
p { font-size: var(--p); }

/* Styl dla linków */
a {
  font-size: var(--a);
  text-decoration: none;
}
p, a {
   margin-bottom: 1rem;
   font-weight: 400;
   line-height: 1.6;
   color: var(--text-clr);
}
p span { color: var(--accent-clr); }
ul li {list-style: none;}

#sidebar ul li.active {
   background-color: var(--hover-clr); 
}

/* Przyciski / Buttons */
.btn {
  padding: 10px 20px;
  border: 2px solid var(--action-clr);
  border-radius: 4px;
  background-color: transparent;
  color: var(--text-clr);
  transition: all 0.2s ease;
  cursor: pointer;
}
.btn:hover {
   border: 1px solid var(--action-clr);
   background-color: var(--hover-clr);
}
.btn.btn-active {
  background-color: var(--action-clr);
  color: var(--base-clr);
}
.btn.btn-active:hover {
   background-color: var(--action-clr);
}
a.btn.btn-active {
   position: relative;
   display: inline-block;
   margin-top: 2rem;
   z-index: 1;
}
.btn.btn-hero {
   position: relative;
   display: inline-block;
   margin-top: 3rem;
   font-weight: 600;
   color: white;
   background-color: var(--action-clr);
   border: 2px solid var(--action-clr);
   z-index: 10;
}
.btn.btn-hero:hover {
   background-color: var(--action-hover-clr);
   border: 2px solid var(--action-hover-clr);
}


/* kopiowanie po kliknięciu */
.copy-wrapper {
   cursor: pointer;
   position: relative;
   padding: 2px 5px;
   border-radius: 4px;
   transition: background 0.3s;
   display: inline-flex;
   align-items: center;
   gap: 5px;
}

.copy-wrapper:hover {
   background-color: rgba(0, 0, 0, 0.05);
   /* Delikatne podświetlenie */
}

.copy-icon {
   font-size: 16px !important;
   opacity: 0;
   transition: opacity 0.2s;
   color: #ce1212;
   /* Możesz zmienić na kolor marki kontrahenta */
}

.copy-wrapper:hover .copy-icon {
   opacity: 1;
}

/* Dymek "Skopiowano" */
.tooltip {
   visibility: hidden;
   background-color: #333;
   color: #fff;
   text-align: center;
   padding: 4px 8px;
   border-radius: 4px;
   position: absolute;
   z-index: 1;
   bottom: 125%;
   left: 50%;
   transform: translateX(-50%);
   font-size: 11px;
   opacity: 0;
   transition: opacity 0.3s;
}

.copy-wrapper.active .tooltip {
   visibility: visible;
   opacity: 1;
}
/* kopiowanie po kliknięciu end */


/* akordeon / accordion */
.accordion-wrapper {
   width: 100%;
}

.accordion-button {
   display: flex;
   gap: 12px;
   padding: 10px;
   width: 100%;
   height: fit-content;
   align-items: center;
   border: none;
   background-color: var(--base-clr);
   cursor: pointer;
}
.accordion-button h5 {
   margin: 0; 
   text-align: left;
   line-height: normal;
}
.accordion .accordion-button svg {
   margin-right: 20px;
   height: 30px;
   /* fill: #a4d414; */
}
.accordion-button.active {
    background-color: var(--hover-clr);
}
.accordion-content {
   /* padding-left: 2rem; */
   max-height: 0;
   overflow: hidden;
   transition: max-height 0.3s ease-out;
}
.accordion-content .description.col-3 {
   display: flex;
   justify-content: space-between;
   gap: 2rem;
}
.accordion-content .description.col-3 > div {
   flex: 1;
}
.accordion-content.active {
   display: block;
   max-height: min-content;
}

/* OKNO GŁÓWNE */
header * {
   margin: 0;
   padding: 0;
}
header {
   position: relative;
   max-width: 100%;
   height: auto;
}

.quick-nav {
   position: relative;
   height: auto;
}
.qmenu-wrapper {
   position: relative;
   display: flex;
   justify-content: space-between;
   align-items: center;
   width: 100%;
   padding: 10px 0;
}
.qmenu-wrapper a {
   padding: 6px 10px;
   text-transform: uppercase;
}
.qmenu-wrapper svg {
   display: flex;
   width: 18px;
}
.qmenu-wrapper .logo {
   position: relative;
   width: 160px;
   height: auto;
}
.qmenu-wrapper .logo a {
   padding: 0;
   margin: 0;
}
.qmenu-wrapper .logo img {
   max-width: 160px;
   height: 100%;
}
.qmenu-wrapper ul li {
   display: inline-flex;
}
.quick-menu, .quick-contact, .icons {
   display: flex;
   /* border: 1px dashed blue; */
}
.icons {
   padding-left: 10px;
}
.icons a {
   padding: 0 5px;
}
.quick-menu {
   flex-grow: 1;
}
.quick-menu ul, .quick-contact ul, .icons ul {
   display: flex;
   margin: 0;
}
.quick-menu li, .quick-contact li, .icons li {
   display: flex;
   align-items: center;
}
.quick-menu li:hover a,
.quick-contact li:hover a {
   background-color: var(--hover-clr);
}
.quick-contact {
   padding-right: 10px;
   border-right: 1px dashed grey;
}


/* HERO */
.hero {
   position: relative;
   padding: 40px;
   width: 100%;
   height: auto;
   background-image: url('img/hero.jpg');
   background-repeat: no-repeat;
   background-position: top;
   background-size: cover;
   display: flex;
   flex-direction: column;
}
.hero img.blood-bg {
   position: absolute;
   bottom: -8%;
   right: 0;
   max-height: 80%;
   z-index: 0;
}
.hero .text-wrapper {
   width: 100%;
   display: flex;
   flex-direction: column;
}
.hero h1 {
   margin-bottom: 1rem;
   line-height: normal;
   font-weight: 900;
   color: var(--accent-clr);
}
/* HERO end */


nav.breadcrumb {
   margin: 0;
   padding: 0;
   display: flex;
   align-items: center;
}
nav.breadcrumb a {
   margin: 0;
   padding: 0;
   font-size: calc(var(--a) * 0.9);
}
nav.breadcrumb .top-nav {
   display: flex;
   align-items: center;
   align-content: center;
}
nav.breadcrumb .top-nav li {
   display: inline-flex;
}
nav.breadcrumb .top-nav li:first-child a {
   display: flex;
   align-items: center;
   align-content: center;
}
nav.breadcrumb .top-nav li a {
   /* padding: 2px 0 2px; */
   color: var(--secondary-text-clr);
}
nav.breadcrumb .top-nav svg {
   /* fill: var(--acc-clr); */
   width: 20px;
}
nav.breadcrumb .top-nav li.path svg {
   transform: rotate(90deg);
   stroke-width: 1px;
}



/* Style dla przycisków */
.topic-buttons {
   display: flex;
   flex-wrap: wrap;
   margin: 2rem 1rem;
   max-width: 100%;
   text-align: left;
   gap: 10px;
}

.container {
   position: relative;
   display: block;
   height: auto;
   /* width: fit-content; */
   max-width: 100%;
   margin-bottom: 20px;
   padding: min(20px, 15%);
   background-color: white;
   border-radius: 4px;
   border: 3px solid var(--hover-clr);
   box-shadow: 0 2px 10px rgba(0,0,0,0.1);
   overflow: auto;
   transition: all 0.35s ease-in-out;
}
.container:hover {
   border: 3px solid var(--action-hover-clr);
}
.title-wrapper {
   margin-bottom: 10px;
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
}
.title-wrapper h5,
.title-wrapper a {
   margin: 0;
   padding: 0;
}
.title-wrapper a {
   display: flex;
   align-items: center;
   gap: 8px;
   font-size: small;
   text-transform: uppercase;
}

.container.hidden {
    display: none;
}
.content-wrapper {
   display: flex;
   gap: 20px;
}
.container .thumbnail {
   /* min-width: fit-content; */
   flex-basis: 250px;
   flex-shrink: 0;
   width: 250px;
   height: 200px;
   overflow: hidden;
}
.container .thumbnail img {
   width: 100%;
   height: 100%;
   /* max-height: max-content; */
   object-fit: cover;
   object-position: top;
}
.accordion-content .description {
   padding: 15px;
   font-size: var(--p);
   background-color: white;
}
.container .description p {margin-top: 0;}
.container .description a {
   color: var(--action-clr);
   text-decoration: underline;
}
.container .link-wrapper,
.container .date {
   display: inline-flex;
   align-items: center;
   align-content: center;
}

.link-wrapper a,
.link-wrapper h2,
.link-wrapper svg {
  display: inline-block;
}
.link-wrapper svg {
   margin: 0 8px;
   width: 18px;
   height: 18px;
   /* fill: var(--acc-clr); */
}
.link-wrapper ul {
   list-style-type: none;
}
.link-wrapper ul li {
   display: flex;
   align-items: center;
   margin-bottom: 10px;
}
.link-wrapper svg {
   margin: 0 8px;
   width: 18px;
   height: 18px;
   /* fill: var(--acc-clr); */
}
.link-wrapper a {
   line-height: 1;
   margin: 0;
   text-decoration: none;
   color: var(--secondary-text-clr);
}
.link-wrapper a:hover {
   background-color: var(--hover-clr);
   border-bottom: 2px solid var(--hover-clr);
}
.link-wrapper a span {
   font-style: italic;
}
.container .date {
   position: relative;
   margin-top: -.6rem;
   margin-bottom: 1rem;
   /* fill: var(--border-clr); */
}
.container .date svg {
   margin-right: 5px;
   width: 16px;
   height: 16px;
   /* fill: var(--icon-clr); */
}
.container .date a {
   margin: 0;
   color: var(--icon-clr);
}

/* --- Style dla rozwijanego kontenera --- */
.js-collapsible-content {
   overflow: hidden;
   transition: max-height 0.5s ease-in-out;
   max-height: none;
}

.js-collapsible-content.truncated {
   max-height: 200px;
}

.js-collapsible-content.expanded {
   max-height: 1500px; /* Duża wartość, aby zapewnić pełne rozwinięcie */
}

.js-toggle-trigger {
   padding: 10px 0;
   width: 100%;
   color: white;
   border: none;
   border-top: 1px dashed #888;
   cursor: pointer;
   margin-top: 10px;
   color: var(--text-clr);
   background-color: rgb(255, 255, 255);
   text-transform: uppercase;
   transition: background-color 0.3s ease;
   display: none;
}

.js-toggle-trigger:hover {
   background-color: rgba(0, 0, 0, 0.05);
}

.accordion-item {
   background-color: #fff;
   margin-bottom: 20px;
   overflow: hidden;
}

footer {
   padding: 20px 10px;
   justify-content: center;
   position: relative;
   width: 100%;
   height: min-content;
   font-size: 12px;
   background-color: var(--base-clr);
   border-top: 1px solid var(--border-clr);
   border-left: 1px solid var(--border-clr);
   border-right: 1px solid var(--border-clr);
}
footer p {
   margin: 0;
   font-size: calc(var(--p) * 0.8);
}







/* KONKURS */
/* Zewnętrzna ramka z tłem i marginesami */
.statue-localization {
    width: 100%;
    margin: 0 auto 20px auto;
    background-color: #f9f9f9;
    box-sizing: border-box;
}

/* Wewnętrzny kontener mapy - tutaj ustawiamy wysokość */
.statue-localization .map-wrapper {
    position: relative;
    width: 100%;
    height: 500px;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

/* Stylizacja samego iframe, aby wypełnił map-wrapper */
.statue-localization .map-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Kontener obrazków - rozciąga się na 100% szerokości */
.localization-image-wrapper {
   position: relative;
    display: flex;
    width: 100%;
    gap: 10px;
}

.localization-image-wrapper .image-box {
   position: relative;
    flex: 1;
    height: 300px;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.localization-image-wrapper .image-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Styl paska z opisem */
.image-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.7); /* Czarny z 70% kryciem */
    color: white;
    padding: 10px;
    font-size: 14px;
    text-align: center;
    box-sizing: border-box; /* Ważne, żeby padding nie rozpychał paska */
    transition: background 0.3s ease;
}

/* Opcjonalnie: efekt po najechaniu myszką */
.image-box:hover .image-caption {
    background: rgba(0, 0, 0, 0.8); /* Zmiana na Twoją czerwień przy hoverze */
}

/* Styl nakładki */
.image-overlay {
    display: none; /* Ukryty na start */
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.9);
    align-items: center;
    justify-content: center;
}

/* Obrazek w nakładce */
.image-overlay img {
    max-width: 90%;
    max-height: 80%;
    border: 3px solid white;
    border-radius: 4px;
}

/* Przycisk X (Zamykanie) */
.close-overlay {
    position: absolute;
    top: 20px;
    right: 40px;
    color: white;
    font-size: 60px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
}

.close-overlay:hover {
    color: rgba(255, 255, 255, 0.6); /* Twoja czerwień na hoverze */
}

@media (max-width: 600px) {
    .localization-image-wrapper {
        flex-direction: column;
    }
    .localization-image-wrapper .image-box {
        height: 250px;
    }
}
/* KONKURS end */








/* KOMITET */
.manage-wrapper,
.account-wrapper,
.contact-wrapper {
   display: flex;
   justify-content: space-between;
}
.account-card,
.manage-card,
.contact-card {
   padding: 1rem;
}

.manage-wrapper ul,
.account-wrapper ul,
.contact-wrapper ul,
.container#doc ul {
   list-style: none;
}
/* KOMITET end */


/* GALERIA */
.gallery-wrapper {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
}
.gallery-wrapper.dragging {
   cursor: grabbing;
   scroll-behavior: auto;
}
.gallery-wrapper::-webkit-scrollbar {
   display: none;
}
.gallery-wrapper .card {
   position: relative;
   margin: 0;
   display: flex;
   flex: 0 0 auto;
   height: 200px;
   object-fit: cover;
   border-radius: 8px;
   scroll-snap-align: start;
   transition: transform 0.2s ease-in-out;
   overflow: hidden;
   align-items: center;
   justify-content: center;
}
.gallery-wrapper .card a {
   position: relative;
   display: block;
   margin: 0;
   width: 100%;
   height: 100%;
   text-decoration: none;
   cursor: pointer;
}

.gallery-wrapper .card img {
   position: relative;
   display: block;
   width: 100%;
   max-height: 200px;
   object-fit: cover;
   border-radius: 6px;
   transition: transform 0.3s ease;
}
.gallery-wrapper .card img:hover {
   transform: scale(1.05);
}
.gallery-wrapper .card video {
   position: relative;
   display: block;
   /* width: 100%; */
   max-width: 100%;
   height: 200px;
   max-height: 200px;
   object-fit: cover;
   border-radius: 6px;
}
.play-icon-overlay {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.4);
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--acc-clr);
   cursor: pointer;
   opacity: 1;
   transition: opacity 0.3s ease;
   border-radius: 8px;
}
.play-icon-overlay svg {
   width: 35px;
   height: 35px;
}
.gallery-wrapper .card a:hover .play-icon-overlay {
   opacity: 0.8;
}
.gallery-navigation {
   position: absolute;
   bottom: 90px;
   left: 0;
   width: 100%;
   display: flex;
   justify-content: space-between;
   pointer-events: none;
   z-index: 10;
}
.nav-button {
   background-color: rgba(0, 0, 0, 0.7);
   color: white;
   border: none;
   cursor: pointer;
   border-radius: 50%;
   font-size: 20px;
   line-height: 1;
   z-index: 10;
   pointer-events: auto;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 40px;
   height: 40px;
   transition: background-color 0.3s ease;
}
.nav-button:hover {
   background-color: rgba(0, 0, 0, 0.6);
}
.nav-button svg {
   width: 30px;
   height: 30px;
}
.nav-button.right {
   margin-right: 0;
}
.lightbox-overlay {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.9);
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 1000;
   opacity: 0;
   visibility: hidden;
   transition: opacity 0.3s ease, visibility 0.3s ease;
}
.lightbox-overlay.show {
   opacity: 1;
   visibility: visible;
}
.lightbox-content {
   position: relative;
   max-width: 90vw;
   max-height: 90vh;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
}

.lightbox-content img,
.lightbox-content video {
   max-width: 100%;
   max-height: 85vh;
   height: auto;
   object-fit: contain;
   display: block;
}

.lightbox-caption {
   color: white;
   font-size: 18px;
   margin-top: 10px;
   text-align: center;
   max-width: 100%;
   padding: 0 20px;
}

.lightbox-close {
   position: absolute;
   top: 20px;
   right: 20px;
   background-color: rgba(255, 255, 255, 0.8);
   color: var(--acc-clr);
   border: none;
   border-radius: 50%;
   width: 50px;
   height: 50px;
   font-size: 40px;
   line-height: 0.25;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 1001;
   transition: background-color 0.3s ease;
}
.lightbox-close:hover {
   background-color: rgba(255, 255, 255, 0.794);
}
.lightbox-close svg {fill: #393939;}
.lightbox-nav-wrapper {
   position: absolute;
   bottom: 50%;
   width: 100%;
   height: auto;
   display: flex;
   justify-content: space-between;
   transform: translateY(50%);
}
.lightbox-nav-button {
   position: relative;
   background-color: rgba(0, 0, 0, 0.745);
   color: var(--acc-clr);
   border: 1px solid rgb(135, 135, 135);
   cursor: pointer;
   border-radius: 50%;
   font-size: 40px;
   line-height: 1;
   z-index: 1001;
   transition: background-color 0.3s ease;
   width: 50px;
   height: 50px;
   display: flex;
   align-items: center;
   justify-content: center;
}
.lightbox-nav-button svg {
   width: 40px;
   height: 40px;
}
.lightbox-nav-button:hover {
   background-color: rgba(0, 0, 0, 0.4);
}

.lightbox-nav-button.prev {
   left: 20px;
}

.lightbox-nav-button.next {
   right: 20px;
}

/* Style dla ukrytych przycisków nawigacyjnych galerii */
.nav-button.hidden {
   opacity: 0;
   visibility: hidden;
   pointer-events: none;
}
/* GALERIA end */



@media(max-width: 1024px) {
   body {
         display: block;
      }
   
      .main-content-wrapper {
         padding-bottom: 70px;
      }
   
      /* Zresetuj grid-column dla sidebara, skoro body nie jest już gridem */
      #sidebar {
         grid-column: unset;
         /* ... reszta twojego kodu sidebara ... */
      }
   
   nav.breadcrumb {
      margin: 1rem;
   }
   h4.title {margin-left: 1rem;}
   .container#account .account-wrapper,
   .container#management .manage-wrapper,
   .container#contact .contact-wrapper {
      display: flex;
      flex-wrap: wrap;
   }
   .description {
      padding: 15px 0;
   }
   footer {
      grid-column: 1 / 3;
   }
}

@media(max-width: 768px) {
   main {
         padding: 0px min(10px, 7%);
   }
   header {
      justify-content: left;
   }
   .hero {
      padding: 30px 15px;
   }
   .hero img.blood-bg {
      right: 0%;
   }
   .container .description,
   .accordion-content .description {
      padding: 10px;
      flex-direction: column;
   }
   .main-content-wrapper header .quick-menu {display: none;}
}

@media(max-width: 576px) {
   .container .content-wrapper {
      flex-direction: column;
   }
   .container .thumbnail {
      width: 100%;
   }
   .container .thumbnail img {
      max-height: 250px;
      width: 100%;
   }
   .hero {
      padding: 20px 10px;
   }
   .quick-nav .wrapper {
      /* flex-direction: column; */
      gap: 0;
   }
   .quick-contact a {
      text-wrap: nowrap;
   }
   header .quick-contact li:not(.phone) {
      display: none;
   }
   header .quick-contact li.phone {
      padding-left: 0;
      border-left: none;
   }
   .hero .text-wrapper{
      /* word-break: break-all; */
      text-wrap: balance;
   }
}


/* =========================================== */
/* A. STYL DOMYŚLNY (MOBILE FIRST: max 1024px) */
/* =========================================== */
@media(max-width: 1024px) {
   #sidebar {
      /* Właściwości mobilne - Poziomy, na dole */
      position: fixed; 
      bottom: 0;
      left: 0;
      top: unset; 
      grid-column: 1 / 3;
      height: auto;
      width: 100%;
      min-width: 100%;
      max-width: 100vw;
      max-height: fit-content;
      border-right: none;
      /* border-top: 1px solid var(--border-clr); */
      padding: 0;
      text-align: center;
      align-items: center;
      background-color: var(--base-clr);
      z-index: 1000;
      transition: 200ms ease-in-out;
      overflow: hidden;
      border-top: 1px solid var(--border-clr);
   }

   /* W mobile elementy są w rzędzie (poziomo) */
   #sidebar > ul {
      display: flex;
      flex-direction: row; 
      align-items: center;
      justify-content: space-evenly;
      overflow-x: scroll;
      list-style: none;
      text-wrap: nowrap;
   }
   #sidebar ul li { 
      position: relative; 
      align-items: center; 
   }

   #sidebar a { 
      display: flex;
      flex-direction: column; 
      align-items: center;
      text-align: center;
      margin: 0;
      gap: 0.1em;
      padding: 10px;
      text-decoration: none;
      color: var(--text-clr);
   }
   #sidebar .logo, #sidebar #toggle-btn {
      display: none;
   }
}

@media (min-width: 1025px) {
   #sidebar {
      position: sticky; 
      top: 0;
      bottom: unset; 
      min-width: unset;
      width: 200px;
      border-top: none; 
      grid-column: 1 / 2;
      transition: 200ms ease-in-out;
      display: flex;
      flex-direction: column;
   }
   #sidebar .main-menu {
      display: flex;
      flex-direction: column;
      align-items: left;
      padding: 20px 0;
   }
   #sidebar ul {
      display: flex;
      flex-direction: column; 
      overflow: hidden;
      gap: 1px;
   }
   #sidebar ul li {
      width: 100%;
      height: auto;
   }
   #sidebar li:hover a {
      background-color: var(--hover-clr);
   }
   #sidebar ul li a {
      position: relative;
      display: flex;
      width: 100%;
      margin-bottom: 0;
      padding: 11px;
      flex-direction: row; 
      align-items: center;
      text-align: left;
      text-wrap: nowrap;
      gap: 1em;
   }
   #sidebar svg {
      width: 26px;
   }
   
   #sidebar.close {
      max-width: 48px;
   }
   #sidebar.close .main-menu {
      padding: 0;
   }
   #sidebar.close .logo  {
      display: none;
   }
   #sidebar svg {
      flex-shrink: 0;
   }
   #sidebar ul > li {
      width: 100%;
   }
   #sidebar .logo img {
      display: flex;
      justify-self: center;
      max-width: 180px;
   }
   #toggle-btn {
      margin-left: auto;
      padding: 12px 9px;
      border: 2px solid transparent;
      background: none;
      cursor: pointer;
      transition: all 0.2s ease-in-out;
      text-align: right;
   }
   #toggle-btn:hover {
      background-color: var(--hover-clr);
   }
   #toggle-btn.rotate svg {
      transform: rotate(180deg);
   }
}
#sidebar .sub-menu {
   display: grid;
   grid-template-rows: 0fr;
   transition: 300ms ease-in-out;
   position: relative; 
   width: 100%;
   bottom: unset;
}

.main-content-wrapper { 
   margin-left: unset !important;
   width: unset;
}
main {
   margin-bottom: 0;
}


/* 3. Pozwolenie Opisowi na zajęcie reszty miejsca */
.description {
   flex-grow: 1;
   /* Tekst zajmuje całą pozostałą szerokość */
}


/* cookies */
/* Ukryj baner i modal domyślnie */
#cookie-banner.cookie-hidden,
#cookie-modal.cookie-hidden {
    display: none;
}

/* Styl banera */
#cookie-banner * {
   border: none;
}
#cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #333;
    color: white;
    padding: 15px 20px;
    z-index: 1000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.2);
}
#cookie-banner p {
    margin: 0;
    flex-grow: 1;
    color: whitesmoke;
}
#cookie-banner a {
   color: wheat;
}
.cookie-actions button {
    margin-left: 10px;
    padding: 10px 15px;
    cursor: pointer;
    border: none;
    border-radius: 5px;
}
.cookie-actions button:hover {
   color: black;
}
/* .btn-primary {
    background-color: #007bff;
    color: white;
} */
.btn-secondary {
    background-color: #6c757d;
    color: white;
}


/* Styl Modala (Ustawienia) */
#cookie-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 1001;
    display: flex;
    justify-content: center;
    align-items: center;
}
.cookie-modal-content {
    background-color: #fff;
    color: #333;
    padding: 30px;
    border-radius: 8px;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}
.cookie-category {
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}

/* Podstawowy styl przełącznika (switch) dla estetyki */
/* Możesz go dopasować do swoich potrzeb */
.switch { 
   position: relative; 
   display: inline-block; 
   width: 60px; 
   height: 34px; 
   float: right;
}
.switch input { 
   opacity: 0; 
   width: 0; 
   height: 0; 
}
.slider { 
   position: absolute; 
   cursor: pointer; 
   top: 0; 
   left: 0; 
   right: 0; 
   bottom: 0; 
   background-color: #ccc; 
   transition: .4s; 
}
.slider:before { 
   position: absolute; 
   content: ""; 
   height: 26px; 
   width: 26px; 
   left: 4px; 
   bottom: 4px; 
   background-color: white; 
   transition: .4s; 
}
input:checked + .slider { 
   background-color: var(--action-clr); 
}
input:focus + .slider { 
   box-shadow: 0 0 1px var(--action-clr);
}
input:checked + .slider:before { 
   transform: translateX(26px); 
}
.slider.round { 
   border-radius: 34px; 
}
.slider.round:before { 
   border-radius: 50%; 
}
/* cookies end */


@media(max-width: 768px) {
   .main-content-wrapper header .quick-menu {
      display: none;
   }
}


/* wybranie nr telefonu po kliknięciu na smartfonie */
.phone-link {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   text-decoration: none;
   /* Usuwamy podkreślenie */
   color: inherit;
   /* Przyjmuje kolor tekstu otaczającego */
   padding: 5px 10px;
   border-radius: 2px;
   transition: all 0.15s ease;
   /* background-color: rgba(0, 0, 0, 0.03); */
}

.phone-link .material-symbols-outlined {
   font-size: 20px;
}

/* Specjalny efekt dla urządzeń mobilnych */
@media (max-width: 768px) {
   .phone-link {
      width: 100%;
      /* Na telefonie może być szerszy, by łatwiej było trafić kciukiem */
      justify-content: center;
      padding: 12px;
      margin-top: 5px;
      white-space: nowrap;
      flex-wrap: nowrap;
   }
}

/* wybranie nr telefonu po kliknięciu na smartfonie end */