@font-face {
  font-family: "Inter", sans-serif;
  src:url("../font/Inter/static/Inter_18pt-Light.ttf");
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: "vollkorn-black", sans-serif;
  src:url("../font/Vollkorn/static/Vollkorn-Regular.ttf");
  font-weight: 300;
  font-style: normal;
}


:root {
  --color-primary-hover: rgba(244, 208, 191, 0.66);
  --color-primary: #c8a97e;
  --button-color: #c87e4f;
  --transition: 0.4s;
  --pozadi: rgb(71, 70, 70);
  --barva-loga-sv: #ebe1bd;
  --barva-loga-tm: #412c27;
  --icon-color: #000000;
  --nav-background: rgb(41, 18, 6);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Inter", sans-serif;
}

p{
  line-height: 1.5;
  margin: 20px 0;
  text-align: justify;
  text-justify: inter-word;
  margin-top: 10px;
  text-wrap: pretty;
  hyphens: none;
  overflow-wrap: break-word;
}

.citat{
  background: #ebe1bd;
  padding: 20px;
  border-radius: 15px;
  margin: 20px 0;
  color: rgb(132, 63, 30);
  font-style: italic;
  line-height: 1.5;
}

.container {
  width: 90%;
  max-width: 1300px;
  margin: 0 auto;
}

.container-svetla{
  padding: 80px 0;
  background: rgba(235, 225, 189, 0.76);
}

.container-tmava{
  padding: 80px 0;
  background: #e8dbae;
}

.strikanec {
  background-image: url("../images/pozadi1.png");
  background-repeat: repeat-x;
  background-position: top right;
}

.strikanec-bottom {
  background-image: url("../images/pozadi-dolu.png");
  background-repeat: repeat-x;
  background-position: bottom center;
}

.container-footer{
  padding: 80px 0;
  background-color: rgba(25, 27, 36, 1);
  color: #fff;
  line-height: 1.5;
  font-size: 14px;
}

.bez-paddinku{
  padding-top: 0 !important;
}

.foto-margin-left{
  margin-left: 30px;
}
/* Mobilní zobrazení (vše pod sebou) */
@media (max-width: 600px) {
  .foto-margin-left {
    margin:0;
  }
}

.foto-cover{
  width: 100%;
  max-height: 220px; /* nebo pevná výška, pokud chcete */
  border-radius: 10px;
  object-fit: cover;
  cursor: pointer;
  margin: 10px 0;
}


.foto-cover:hover{
  filter: grayscale(100%);
}

.foto-flex{
    height: 100%;
    max-height: calc(100vh - 60px); /* Volitelné: aby fotka nepřesáhla obrazovku */
    width: auto;           /* Zachová poměr stran bez ořezu */
    object-fit: contain;   /* Zamezí oříznutí a deformaci */
     margin-right: auto;
}
.badge{
  background-color: #843f1e;
  color: #fff;
  padding: 5px 10px;
  border-radius: 15px;
  font-size: 12px;
  margin-right: 5px;
  display: inline-block;
}

.note{
  background-color: rgba(240, 240, 240, 0.2);
  color: #333;
  padding: 15px;
  border-radius: 8px;
  margin-top: 10px;
  border: 1px solid rgba(132, 63, 30, 0.45);
}

h1  {
  font-size: clamp(1.4rem, 2.5vw, 1.8rem);
  line-height: 1.2;
  word-break: break-word;
  margin:0;
  text-wrap: balance;
  color: #843f1e;
  font-family: "vollkorn-black", sans-serif;
  font-weight: 800;
}

h2  {
  font-size: clamp(1.2rem, 2.5vw, 1.6rem);
  line-height: 1.2;
  word-break: break-word;
  margin:0;
  text-wrap: balance;
  color: rgba(132, 63, 30, 0.8);
  font-family: "vollkorn-black", sans-serif;
  font-weight: 600;
}

h3  {
  font-size: clamp(1.0rem, 2.5vw, 1.3rem);
  line-height: 1.2;
  word-break: break-word;
  margin:0;
  text-wrap: balance;
  color: rgb(143, 48, 2);
  font-family: "vollkorn-black", sans-serif;
  font-weight: 600;
}

.odsazeni{
  margin: 20px 0;
}

h3.slabsi{
  color: rgba(248, 245, 245, 0.9);
  font-size: 1.4em;
  font-weight: 200;
  margin-bottom: 10px;
}

.datum-aktualita {
  font-size: 12px;
  color: rgb(132, 63, 30);
}

.button-aktualita {
  background: #843f1e;
  font-size: 14px;
  color: white;
  padding: 0 18px;
  border-radius: 8px;
}

.aktualita {
  box-sizing: border-box;
  position: relative;
  background-color: #ebe1bd;
  border-radius: 15px 50px;
  border: 1px solid #412c27;
  padding: 20px; /* Added top padding to make room for the label */
  margin: 0;
  box-shadow: 1px 1px 9px rgb(43, 43, 43);
  line-height: 1.5;
  width: 100%;
  text-align: left;
}

.aktualita::before {
  content: "Aktuality";
  position: absolute;
  top: -10px;
  right: 20px; /* Pinned to the right instead of a fixed 280px */
  background: #843f1e;
  color: white;
  padding: 2px 18px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: bold;
}

.card-container {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 10px;
  justify-content: center;
}

.product-card {
  flex: 1 0 390px;
  width: 100%;
  overflow: hidden;
  position: relative;
  background: rgba(235, 225, 189, 0.68);
  border-radius: 15px;
  margin: 20px 0;
  color: rgb(132, 63, 30);
  line-height: 1.5;
  text-align: center;
  border: 1px solid #986e59;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
  background-image: url("../images/pozadi-dolu.png");
  background-repeat: repeat;
  background-position: bottom center;
  cursor: pointer;
}

.product-card:hover{
  background: rgba(0, 0, 0, 0.17);
}

.card-image {
  width: 100%;
  height: 300px;
  overflow: hidden;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}

.card-image img {
  height: 300px;
  object-fit: cover;
  object-position: center center;
  transform: scale(1.1);
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.4s ease;
  will-change: transform;
}

.card-image img:hover{
  transform: scale(1);
  opacity: 0.9;
}

.card-content {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: 12px;
}


.card-title {
  font-size: 0.95rem;
  font-weight: 600;
  margin: 0 0 8px 0;
  color: #333333;
  line-height: 1.3;
}

.card-price {
  font-size: 1.1rem;
  font-weight: 700;
  color: #843f1e;
  margin: 0 0 12px 0;
}

.card-form {
  margin-top: auto;
}
.cena {
  position: absolute;
  top: 0%;
  left: 0%;
  padding: 10px;
  border-radius: 15px 15px 15px 0;
  color: #c8a97e;
  background-color: rgba(0, 0, 0, 0.84);
  z-index: 10;
}


.cena::before {
  content: "Cena: ";
  font-weight: bold;
  color: #c8a97e;
}

.skladem {
  position: absolute;
  top: 12%;
  left: 0%;
  padding: 10px;
  border-radius: 15px 15px 15px 0;
  color: #fff;
  background-color: rgb(89, 186, 138);
  z-index: 10;
}

.skladem::before {
  content: "Skladem";
  font-weight: bold;
  color: #fff;
}

.hr-1{
  border: 1px solid rgba(152, 110, 89, 0.41);
  margin: 10px 0;
}

  .centruj{
  text-align: center;
}

  .zelena{
    color: #046837;
  }

  .foto{
    border-radius: 15px;
    width: 100%;
    margin: 10px 0;
  }

  .foto:hover{
    opacity: 0.8;
  }

.nadpis-s-ikonou {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 20px;
}

.logo{
  width: 120px;
  margin-bottom: 15px;
}

.zluta{
  color: #ebe1bd;
}

.zluta:hover{
  color: rgb(229, 104, 45);
}

.vlajka{
  width: 26px;
  height: 100%;
}

.vlajka:hover{
  opacity: 0.8;
  transform: scale(1.2);
}

.svisla-cara {
  border-left: 1px solid rgba(235, 225, 189, 0.42);
  height: 40%;
  padding: 15px;
}

.kontakt-wrapper{
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  width: 100%;
}

.kontakt-ramecek{
  flex: 0 0 calc(50% - 0.5rem);
  background: linear-gradient(
          to right,
          rgba(192, 161, 107, 0.17) 40%,   /* Tvoje původní barva do 70% výšky */
          rgba(192, 161, 107, 0.0)  100%     /* Jiná, tmavší/jiná barva na konci */
  );
  padding: 25px;
  margin-bottom: 10px;
  border-radius: 8px;
  line-height: 1.5;
}

/* Mobilní zobrazení (vše pod sebou) */
@media (max-width: 600px) {
  .kontakt-ramecek {
    flex: 0 0 100%;
  }
}

.odkazhref  {
  color: #1f7369;
  text-decoration: none;
  padding-bottom: 0.1em;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: 100%;
  background-image: linear-gradient(
          transparent calc(100% - 1px),
          #2a9d8f 1px
  );

  transition: background-size .4s ease-in-out;

  &:hover {
    background-size: 0 100%;
    color: rgb(132, 63, 30);
  }
}

.provozni-doba {
  margin: 20px 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem; /* Mezera mezi řádky */
}

.radek {
  display: flex;
  justify-content: flex-start; /* Zarovnání na začátek */
}

.den {
  padding: 10px 20px;
  width: 100px;
  font-weight: bold;
  background-color: rgba(132, 63, 30, 0.10);
  white-space: nowrap;
}

.den-delsi {
  padding: 10px 20px;
  width: 70%;
  font-weight: bold;
  background-color: rgba(132, 63, 30, 0.10);
  white-space: wrap;
}

.cas {
  padding: 10px 20px;
  flex: 1;
  background: linear-gradient(
          to right,
          rgba(192, 161, 107, 0.17) 40%,   /* Tvoje původní barva do 70% výšky */
          rgba(192, 161, 107, 0.0)  100%     /* Jiná, tmavší/jiná barva na konci */
  );
}

.dokumenty{
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
  align-items: stretch;
}

.dokumenty_item{
  max-width: 180px;
  object-fit: cover;
  margin: 10px;
  color: #2b2b2b;
  text-align: center;
  background-color: rgba(132, 63, 30, 0.11);
  padding: 10px;
  border-radius: 8px;
}

.popis{
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.5;
}

@media (min-width: 800px) {
  .rowe {
    display: flex;
  }

  .cols{
    width: 100%;
  }

  .cols + .cols{
    margin-left: 2em;
  }
  .rowitem {
    display: flex;
    gap: 1rem;
  }

  .col-1 {
    flex: 1;
  }

  .col-2 {
    flex: 2;
  }
  .col-1 +  .col-2{
    margin-left: 2em;
  }
}


  .skryt{
    display: none;
  }

@media screen and (max-width: 1023px) {
  .skryt-na-mobilu {
    display: none !important; /* Úplně vymaže desktopový odkaz na mobilu */
  }
}

@media screen and (min-width: 1024px) {
  .skryt-na-desktopu {
    display: none !important; /* Úplně vymaže mobilní odkaz na desktopu */
  }
}

.main {
  height: 60vh;
  width: 100%;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}

.wrapper,
.slide {
  position: relative;
  width: 100%;
  height: 100%;
}
.slide {
  overflow: hidden;
}
.slide::before {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 10;
}

/* 1. Výchozí stav obrázku */
.swiper-slide .image {
  height: 100%;
  width: 100%;
  object-fit: cover;
  transform: scale(1);
}

/* 2. Spuštění zvětšení, jakmile se slajd stane aktivním */
.swiper-slide-active .image {
  transform: scale(1.4) !important;
  /* Zvětšování trvá 4 sekundy (po dobu zobrazení) a pak se plynule zastaví */
  transition: transform 4000ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* 3. HLAVNÍ OPRAVA: Plynulý odchod slajdu */
/* Když slajd ztrácí aktivitu, necháme ho mírně dojíždět, aby při fade-outu necuknul */
.swiper-slide:not(.swiper-slide-active) .image {
  transform: scale(1.15) !important; /* Pokračuje mírně ve zvětšení během mizení */
  transition: transform 1800ms ease-out !important; /* Čas 1800ms přesně odpovídá vašemu 'speed' ve JS */
}

.slide .image-data {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 100%;
  z-index: 20;
}
.image-data span.text {
  font-size: 14px;
  font-weight: 400;
  color: #fff;
}

a.button {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 25px;
  color: #c87e4f;
  background: #fff;
  text-decoration: none;
  margin: 5px 5px;
  transition: all 0.3s ease;
  border: 1px solid #c87e4f;
}

.buttonactive {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 25px;
  color: #f8f5f5;
  background: #843f1e;
  text-decoration: none;
  margin: 5px 5px;
  transition: all 0.3s ease;
  border: 1px solid #c87e4f;
}

.butony-center{
  margin: 20px auto;
}

a.button:hover {
  color: #fff;
  background-color: #c87e4f;
}

.slide-text{
  margin: 20px auto;
  display: block;
  text-align: center;
  max-width: 500px;
  color: #fff;
  font-size: 15px;
  line-height: 1.5em;
}

.slide-title{
  font-size: 45px;
  font-weight: 600;
  color: #fff;
}


/* Minimalistické šipky bez pozadí */
.nav-btn {
  background: none !important; /* Odstraní bílé kolečko */
  box-shadow: none !important; /* Odstraní stín */
  width: auto !important;      /* Šířka se přizpůsobí jen šipce */
  transition: opacity 0.3s ease;
  opacity: 0.6;                /* Jsou jemně průhledné, aby nerušily */
}

/* Úprava samotných ikon šipek */
.nav-btn::after {
  font-size: 26px !important;  /* Trochu větší, když nemají kolečko */
  color: #fff !important;      /* Bílá barva (dobře vidět na fotkách) */
  text-shadow: 0 1px 4px rgba(0,0,0,0.5); /* Jemný stín textu pro čitelnost na světlých fotkách */
}

/* Hover efekt - šipka se zvýrazní */
.nav-btn:hover {
  opacity: 1;
  transform: scale(1.1);
}

/* Pozice dál od krajů */
.swiper-button-prev {
  left: 30px !important;
}

.swiper-button-next {
  right: 30px !important;
}

/* Skrytí šipek na malých mobilech (volitelné, pro čistší vzhled) */
@media (max-width: 576px) {
  .nav-btn {
    display: none !important;
  }
}

/* Úprava teček (paginace) */
.swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background: #fff;
  opacity: 0.5;
  transition: all 0.3s ease;
}

.swiper-pagination-bullet-active {
  opacity: 1;
  background: #c8a97e; /* Zlatá/kávová barva pro aktivní tečku */
  width: 30px; /* Prodloužená aktivní tečka */
  border-radius: 5px;
}

@media screen and (max-width: 768px) {
  .nav-btn {
    visibility: hidden;
  }
  .swiper-pagination-bullet {
    visibility: visible;
  }
}

.logo_slider{
  width: 200px;
  height: auto;
}

ul.seznam {
  margin: 1.2em 2.0em;
  padding-left: 0;
  list-style: none;
}

ul.seznam li {
  position: relative; /* Potřebné pro pozicování pseudoelementu */
  padding-left: 2.5rem; /* Prostor pro ikonu */
  font-size: clamp(0.9rem, 1vw, 1.1rem);
  margin-bottom: 12px;
  line-height: 1.2em;
}

ul.seznam li:last-child {
  margin-bottom: 0;
}

/* Shield ikona */
ul.info li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  background-image: url("/images/info-square.svg");
  background-size: contain;
  background-repeat: no-repeat;
  filter: var(--icon-filter);
}

ul.info li strong{
  color: #2a9d8f;
}

/* Souhlas ikona */
ul.souhlas li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  background-image: url("/images/check2-circle.svg");
  background-size: contain;
  background-repeat: no-repeat;
  filter: var(--icon-filter);
}

ul.souhlas li strong{
  color: #046837;
}

ul.exclamation li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  background-image: url("/images/exclamation-circle.svg");
  background-size: contain;
  background-repeat: no-repeat;
  filter: var(--icon-filter);
}

ul.exclamation li strong{
  color: #aa0719;
}

ul.souborpdf li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  background-image: url("/images/filetype-pdf.svg");
  background-size: contain;
  background-repeat: no-repeat;
  filter: var(--icon-filter);
  cursor: pointer;
}

ul.souborpdf li strong{
  color: #046837;
}

ul.seznam-bez-svg {
  list-style: none;
  padding-left: 0;
}

.vpravo{
  float: right;
}

.datum{
  font-size: 12px;
  color: #843f1e;
}

.clearfix{
  clear: both;
}

.table {
  margin: 20px 0;
  border-collapse: collapse;
  width: 100%;
  margin-bottom: 15px;
}

.table td, .table th {
  border: 1px solid rgb(132, 63, 30);
  padding: 8px;
}

.table tr:nth-child(even){background-color: rgba(242, 242, 242, 0.63);}

.table tr:hover {background-color: rgba(187, 199, 241, 0.5);}

.table th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: rgba(163, 103, 74, 0.97);
  color: white;
}


 .frame {
   animation: morphFrame 3s infinite alternate ease-in-out;
 }
.cross-v {
  animation: morphCrossV 3s infinite alternate ease-in-out;
}
.cross-h {
  animation: morphCrossH 3s infinite alternate ease-in-out;
}
.handle {
  animation: fadeInHandle 3s infinite alternate ease-in-out;
}

@keyframes morphFrame {
  from { height: 18px; y: 6px; } /* Okno */
  to { height: 26px; y: 2px; }   /* Dveře */
}
@keyframes morphCrossV {
  from { y2: 24px; x1: 20px; x2: 20px; } /* Kříž okna */
  to { y2: 28px; x1: 11px; x2: 11px; }   /* Hrana dveří */
}
@keyframes morphCrossH {
  from { opacity: 1; } /* Vodorovná příčka okna */
  to { opacity: 0; }   /* Zmizí u dveří */
}
@keyframes fadeInHandle {
  from { opacity: 0; } /* Žádná klika */
  to { opacity: 1; }   /* Klika dveří */
}
/* Globální reset pro výpočty šířek */
.table-with-image-container *,
.table-with-image-container *::before,
.table-with-image-container *::after {
  box-sizing: border-box;
}

/* Hlavní layout: Obrázek + Tabulka vedle sebe */
.table-with-image-container {
  display: flex;
  gap: 20px;
  width: 100%;
  align-items: flex-start;
}

/* Obal obrázku */
.image-wrapper {
  flex-shrink: 0;
  width: 250px;
}

.image-wrapper img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
}


.table-responsive {
  flex-grow: 1;
  width: 100%;
  background-color: rgba(229, 104, 45, 0.15);
}

/* Styl klasické tabulky */
.classic-table {
  width: 100%;
  border-collapse: collapse; /* Spojí okraje buněk do jednoho */
  border: 1px solid #843f1e;
}

.classic-table th,
.classic-table td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #843f1e;
}

/* Zebra striping pro klasickou tabulku */
.classic-table tbody tr:nth-child(odd) {
  background-color: rgba(0, 0, 0, 0.02);
}

.classic-table tbody tr:nth-child(even) {
  background-color: rgba(246, 205, 186, 0.11);
}

.classic-table tbody tr:hover {
  background-color: rgba(241, 127, 73, 0.2);
}

/* --- RESPONZIVITA PRO MOBILY (pod 768px) --- */
@media (max-width: 768px) {
  .table-with-image-container {
    flex-direction: column; /* Obrázek skočí nad tabulku */
  }

  .image-wrapper {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
  }

  /* Přestavba klasické tabulky na mobilní řádky */
  .classic-table,
  .classic-table thead,
  .classic-table tbody,
  .classic-table th,
  .classic-table td,
  .classic-table tr {
    display: block;
    width: 100%;
  }

  .classic-table thead {
    display: none; /* Skryje klasické záhlaví */
  }

  .classic-table tr {
    margin-bottom: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
  }

  .classic-table td {
    border-bottom: 1px solid #eee;
    position: relative;
    padding-left: 50%; /* Vytvoří místo pro popisek vlevo */
    text-align: right; /* Text dat zarovná doprava */
    word-break: break-word;
  }

  .classic-table td:last-child {
    border-bottom: none;
  }

  /* Vložení popisku z data-label atributu */
  .classic-table td::before {
    content: attr(data-label);
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-weight: bold;
    color: #843f1e;
    font-size: 0.8rem;
    text-align: left;
    width: 45%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* Stylování vyskakovacího okna */
.modal-box {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0; /* Vynulování výchozích okrajů prohlížeče */

  border: none;
  border-radius: 8px;
  padding: 0;
  width: 90%;
  max-width: 880px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  box-sizing: border-box;
}


.modal-box[open] {
  animation: popIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) normal;
}

@keyframes popIn {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.7); /* Začíná menší */
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1); /* Končí na 100% */
  }
}

/* Tmavé pozadí za oknem */
.modal-box::backdrop {
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(3px); /* Jemné rozmazání pozadí */
}

/* Vnitřní struktura okna */
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  background-color: #f8f9fa;
  border-bottom: 1px solid #eee;
}

.modal-header h3 {
  margin: 0;
  font-size: 1.2rem;
}

.modal-body {
  padding: 20px;
}

/* Tlačítka */
.btn-primary {
  padding: 10px 20px;
  background-color: #8e44ad;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
}

.btn-close {
  background: none;
  border: none;
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
  color: #aaa;
}

.btn-close:hover {
  color: #333;
}

/* Animace klíčových snímků */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}

.foto_dvere_vzory{
  float: left;
  margin: 10px;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  width: 180px;
  height: 100%;
  object-fit: cover;
  text-align: center;
}


.karta-box {
  display: block;
  overflow: hidden;
  position: relative;
  width: 100%;
  border-radius: 14px;
  margin: 10px;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
}

.karta_title{
  position: absolute;
  bottom: -130px;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  padding: 10px;
  font-size: 1.2em;
  text-align: center;
}

.karta-box .karta-foto {
  width: 100%;
  height: auto;
  display: block;
  transform: scale(1.1);
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.karta-box:hover .karta-foto {
  transform: scale(1);
}

.barevnice {width: 130px; height: 190px; float:left; border:1px solid #222222;
  text-align:center; margin:0 2px 4px 2px; padding:8px 4px 8px 4px;  font-size: 0.75em; line-height: 120%; color:black;
}

.custom-counter {
  margin: 10px;
  padding: 15px;
  list-style-type: none;
  list-style-position: inside;
}
.custom-counter li {
  counter-increment: step-counter;
  margin-bottom: 15px;
  line-height: 1.5;
}
.custom-counter li::before {
  content: counter(step-counter);
  margin-right: 20px;
  font-size: 80%;
  background-color: rgb(180, 180, 180);
  color: white;
  font-weight: bold;
  padding: 3px 8px;
  border-radius: 11px;
}

#cookie-bar, .cookie-container {
  display: none;
  position: fixed !important;
  bottom: 20px !important;
  right: 20px !important;
  z-index: 9999999 !important;
  width: calc(100% - 40px);
  max-width: 400px;
  background: var(--barva-loga-tm) !important;
  color: var(--barva-loga-sv) !important;
  padding: 20px !important;
  border: 1px solid var(--barva-loga-sv) !important;
  border-radius: 15px !important;
  box-shadow: 0 10px 40px rgba(0,0,0,0.8);
  flex-direction: column;
  gap: 15px;
  box-sizing: border-box;
}

.cookie-text {
  font-size: 14px;
  line-height: 1.5;
}

.cookie-text a {
  color: var(--barva-loga-sv);
  text-decoration: underline;
}

.cookie-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: background-color 0.3s ease;
}

#cookie-accept-all {
  background: var(--barva-loga-sv);
  color:  var(--barva-loga-tm);
  border: none;
  padding: 12px;
  cursor: pointer;
  font-weight: bold;
  border-radius: 8px;
  transition: background 0.2s;
}

#cookie-accept-all:hover {
  background: rgb(176 243 210 / 0.97);
}

#cookie-reject {
  background: transparent;
  color: var(--barva-loga-sv);
  border: 1px solid var(--barva-loga-sv);
  padding: 10px;
  cursor: pointer;
  border-radius: 8px;
  font-size: 13px;
  transition: all 0.2s;
}

#cookie-reject:hover {
  background: #edae8f;
  color: #fff;
}

.cookie-settings-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9998;
  background: var(--barva-loga-tm);
  color: #fff;
  border: 1px solid var(--barva-loga-sv);
  border-radius: 50%;
  width: 45px;
  height: 45px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}
.cookie-settings-btn:hover {
  transform: scale(1.05);
  background-color: rgb(4 104 55 / 0.53);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.cookie-settings-btn:active {
  transform: scale(0.98);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.cookie-settings-btn i {
  font-size: 24px;
}

.cookie-close {
  text-align: center;
  font-size: 0.6em;
}

/* MEDIA QUERY PRO MOBILY (užší než 480px) */
@media screen and (max-width: 480px) {
  #cookie-bar, .cookie-container {
    right: 10px !important;
    bottom: 10px !important;
    width: calc(100% - 20px); /* Menší okraje na malých displejích */
    max-width: none; /* Zrušíme limit 300px */
  }

  .cookie-settings-btn {
    bottom: 10px;
    right: 10px;
  }
}