:root {

  --primary-color: #793228;

  --secondary-color: #c88439;

  --dark-color: #3d1c17;

  --light-bg: #fbf7f0;

  --white: #ffffff;

  --gray-light: #f4f4f4;

  --text-color: #2c2c2c;

  --font-main: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;

  --border: 1px solid var(--secondary-color);

  --border-radius: 8px;

}



* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}



body {

  font-family: var(--font-main);

  color: var(--text-color);

  background-color: var(--light-bg);

  line-height: 1.6;

}

/* Styly pro všechny seznamy na webu */

ul {

  padding-left: 25px; /* Dostatečný prostor pro tečky uvnitř kontejneru */

  list-style-type: disc;

  margin-bottom: 20px;

}



li {

  margin-bottom: 8px;

  line-height: 1.5;

}



/* Header & Nav */

header {

  background-color: var(--white);

  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

  position: sticky;

  top: 0;

  z-index: 1000;

}



.nav-container {

  max-width: 1100px;

  margin: 0 auto;

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 10px 20px;

}

@media (max-width: 768px) {

  .nav-container {

    position: relative;

    justify-content: flex-end; /* Hamburger menu zůstane vpravo */

    padding: 10px 15px;

    min-height: 70px; /* Zajistí dostatek místa */

  }



  /* Vycentrování loga na střed na mobilu */

  .logo {

    position: absolute;

    left: 50%;

    transform: translateX(-50%);

  }



  .logo img {

    height: 55px; /* Optimální velikost pro mobilní lištu */

  }



  .logo:hover img {

    transform: none; /* Na mobilu vypneme efekt zvětšení při tapnutí */

  }



  /* Vysouvací menu pod lištou */

  .nav-links {

    display: none;

    flex-direction: column;

    position: absolute;

    top: 100%;

    left: 0;

    width: 100%;

    background-color: var(--white);

    padding: 20px;

    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);

    text-align: center;

  }



  .nav-links.active {

    display: flex;

  }



  .hamburger {

    display: flex;

    z-index: 10;

  }

}



/* Stylování loga v hlavičce */

.logo {

  display: flex;

  align-items: center;

  text-decoration: none;

}



.logo img {

  height: 65px; /* Ideální výška pro hlavičku */

  width: auto; /* Zachová poměr stran */

  transition:

    transform 0.3s ease,

    filter 0.3s ease;

  display: block;

}



/* Jemný efekt zvětšení při najetí myší */

.logo:hover img {

  transform: scale(1.05); /* Zvětší logo o 5 % */

  filter: brightness(1.05); /* Mírně rozjasní barvy */

}



/* Úprava pro mobilní telefony */

@media (max-width: 768px) {

  .logo img {

    height: 50px; /* Na mobilu krapet zmenšíme, aby se menu netlačilo */

  }

}



.nav-links {

  display: flex;

  list-style: none;

  gap: 25px;

}



/* Stylování odkazů v menu */

.nav-links a {

  text-decoration: none;

  color: var(--dark-color);

  font-weight: 600;

  font-size: 1rem;

  position: relative;

  padding: 8px 0; /* Prostor pro spodní linku */

  transition: color 0.3s ease;

}



/* Podtržení jako skrytý prvek */

.nav-links a::after {

  content: "";

  position: absolute;

  bottom: 0;

  left: 0;

  width: 100%;

  height: 3px; /* Tloušťka linky */

  background-color: var(--secondary-color); /* Barva akcentu z loga */

  border-radius: 2px;

  transform: scaleX(0); /* Výchozí stav: linka je schovaná (šířka 0) */

  transition: transform 0.3s ease; /* Plynulá animace */

}



/* Změna barvy textu a roztáhnutí linky při najetí myší (hover) */

.nav-links a:hover {

  color: var(--secondary-color);

}



.nav-links a:hover::after {

  transform: scaleX(1); /* Roztažení linky na plnou šířku */

}



/* Trvale viditelná linka a barva pro právě vybranou stránku (select/active) */

.nav-links a.active {

  color: var(--primary-color); /* Tmavší cihlová z loga */

}



.nav-links a.active::after {

  background-color: var(--primary-color);

  transform: scaleX(1); /* Zůstává roztažená */

}



.hamburger {

  display: none;

  flex-direction: column;

  cursor: pointer;

  gap: 5px;

}



.hamburger span {

  width: 25px;

  height: 3px;

  background-color: var(--dark-color);

}



/* Common Layout */

.container {

  max-width: 1100px;

  margin: 40px auto;

  padding: 0 20px;

}



h1,

h2,

h3 {

  color: var(--primary-color);

  margin-top: 20px;

}



.btn {

  display: inline-block;

  background-color: var(--primary-color);

  color: var(--white);

  padding: 12px 25px;

  text-decoration: none;

  border-radius: var(--border-radius);

  font-weight: bold;

  border: none;

  cursor: pointer;

  transition: background 0.3s;

}



.btn:hover {

  background-color: var(--secondary-color);

}



/* Hero Section */

/* Hero Sekce */

.hero {

  background:

    linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)),

    url("../img/chalupa_pod_choustnikem_uvod.jpg") center/cover no-repeat;

  height: 75vh;

  min-height: 480px;

  display: flex;

  justify-content: center;

  align-items: center;

  text-align: center;

  padding: 0 20px;

}



/* Elegantní kompaktní box pro text */

/* Hero Sekce */

.hero {

  background:

    linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),

    url("../img/chalupa_pod_choustnikem_uvod.jpg") center/cover no-repeat;

  height: 80vh;

  min-height: 500px;

  display: flex;

  justify-content: center;

  align-items: center; /* Posune obsah dolů */

  text-align: center;

  padding: 0 20px 40px 20px; /* Spodní odsazení od okraje fotky */

}



/* Elegantní box dole na trávníku */

.hero-content {

  background: rgba(61, 28, 23, 0.7); /* Tmavší hnědá pro perfektní čitelnost */

  padding: 10px 20px;

  border-radius: var(--border-radius);

  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);

  max-width: 600px;

  width: 100%;

  border: 1px solid rgba(255, 255, 255, 0.2);

}



.hero h1 {

  color: var(--white);

  font-size: 2.2rem;

  margin-bottom: 8px;

  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);

}



.hero p {

  color: #f4f4f4;

  font-size: 1.1rem;

  margin-bottom: 15px;

}



/* Úprava pro mobilní zařízení */

@media (max-width: 768px) {

  .hero {

    height: 65vh;

    padding-bottom: 25px;

  }



  .hero h1 {

    font-size: 1.6rem;

  }



  .hero p {

    font-size: 0.95rem;

  }

}



/* Features Cards */

.features-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

  gap: 20px;

  margin-top: 30px;

}



/* Gallery Grid */

.gallery-grid {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));

  gap: 15px;

}



.gallery-item {

  width: 100%;

  height: 200px;

  object-fit: cover;

  border-radius: var(--border-radius);

  cursor: pointer;

  transition: transform 0.3s;

}



.gallery-item:hover {

  transform: scale(1.03);

}



/* Lightbox Modal */

.lightbox {

  display: none;

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: rgba(0, 0, 0, 0.85);

  justify-content: center;

  align-items: center;

  z-index: 2000;

}



.lightbox img {

  max-width: 90%;

  max-height: 85%;

  border-radius: var(--border-radius);

}



.lightbox-close {

  position: absolute;

  top: 20px;

  right: 30px;

  color: white;

  font-size: 40px;

  cursor: pointer;

}



/* Calendar & Form Flex Box */

.booking-section {

  display: flex;

  flex-wrap: wrap;

  gap: 30px;

  margin-top: 30px;

}



.calendar-box,

.form-box {

  flex: 1 1 450px;

  background: var(--white);

  padding: 20px;

  border-radius: var(--border-radius);

  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);

}



.form-group {

  margin-bottom: 15px;

}



.form-group label {

  display: block;

  margin-bottom: 5px;

  font-weight: bold;

}



.form-group input,

.form-group textarea {

  width: 100%;

  padding: 10px;

  border: 1px solid #ccc;

  border-radius: var(--border-radius);

}

/* Mapa */

.mapa {

  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

  border-radius: var(--border-radius);

}

/* Price Table */

.price-table {

  width: 100%;

  border-collapse: collapse;

  margin-bottom: 30px;

  background: var(--white);

  margin-top: 20px;

}



.price-table th,

.price-table td {

  padding: 12px 15px;

  border: 1px solid #ddd;

  text-align: left;

}



.price-table th {

  background-color: var(--primary-color);

  color: var(--white);

}



/* Footer */

footer {

  background-color: var(--dark-color);

  color: var(--white);

  text-align: center;

  padding: 20px;

  margin-top: 50px;

}



/* Responsive Menu */

@media (max-width: 768px) {

  .nav-links {

    display: none;

    flex-direction: column;

    position: absolute;

    top: 100%;

    left: 0;

    width: 100%;

    background-color: var(--white);

    padding: 20px;

    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

  }

  .nav-links.active {

    display: flex;

  }

  .hamburger {

    display: flex;

  }

  .hero h1 {

    font-size: 2rem;

  }

}

/* Slider pro výlety (3 fotky vedle sebe) */

.slider-container {

  position: relative;

  max-width: 100%;

  margin: 20px 0;

  overflow: hidden;

  padding: 10px 0;

}



.slider-track {

  display: flex;

  gap: 20px; /* Mezera mezi fotkami */

  transition: transform 0.4s ease-in-out;

}



.slide {

  /* Na PC přesně 3 fotky vedle sebe včetně mezer */

  flex: 0 0 calc((100% - 40px) / 3);

  height: 260px;

  position: relative;

  border-radius: var(--border-radius);

  overflow: hidden;

  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);

}



.slide img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: transform 0.3s ease;

}



.slide:hover img {

  transform: scale(1.04);

}



/* Tlačítka šipek */

.slider-btn {

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  background: rgba(121, 50, 40, 0.85);

  color: white;

  border: none;

  font-size: 20px;

  width: 40px;

  height: 40px;

  border-radius: 50%;

  cursor: pointer;

  transition:

    background 0.3s,

    transform 0.2s;

  z-index: 10;

  display: flex;

  align-items: center;

  justify-content: center;

  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);

}



.slider-btn:hover {

  background: var(--primary-color);

  transform: translateY(-50%) scale(1.1);

}



.prev-btn {

  left: 5px;

}

.next-btn {

  right: 5px;

}



/* Responsivita */

@media (max-width: 900px) {

  .slide {

    /* Na tabletech 2 fotky vedle sebe */

    flex: 0 0 calc((100% - 20px) / 2);

  }

}



@media (max-width: 600px) {

  .slide {

    /* Na mobilu 1 fotka */

    flex: 0 0 100%;

    height: 220px;

  }

}

/* Flexbox layout pro kartu, aby tlačítko drželo vždy dole */

.card {

  display: flex;

  flex-direction: column;

  background: var(--white);

  padding: 25px;

  border-radius: var(--border-radius);

  border: 1px solid var(--secondary-color);

  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);

}



.card-link {

  display: inline-block;

  margin-top: 15px;

  color: var(--primary-color);

  font-weight: 600;

  font-size: 0.9rem;

  text-decoration: none;

  transition:

    color 0.2s,

    transform 0.2s;

  align-self: flex-start;

}

.card-links {

  display: flex;



  justify-content: space-between;

  margin-top: 15px;

  flex-wrap: wrap; /* Na velmi malých displejích se odkaz bezpečně zalomí */

}

/* Volitelně: Mírné odlišení odkazu na článek (tlumenější barva) */



.article-link:hover {

  color: var(--primary-color);

}



.card-link:hover {

  color: var(--secondary-color);

  transform: translateX(4px); /* Plynulý posun šipky doprava při najetí */

}



/* SEO úvodní text */

.seo-intro {

  text-align: justify;

  max-width: 1100px;

  margin: 0 auto 40px auto;

  padding: 0 20px;

}



.seo-intro h2 {

  font-size: 2rem;

  color: var(--primary-color);

  margin-bottom: 15px;

}



.seo-intro p {

  font-size: 1.1rem;

  line-height: 1.7;

  color: var(--text-color);

}



/* Mřížka pro obrázkový rozcestník */

.nav-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));

  gap: 30px;

  margin-bottom: 50px;

}



/* Styl karty rozcestníku */

.nav-card {

  background: var(--white);

  border-radius: 12px;

  overflow: hidden;

  text-decoration: none;

  color: var(--text-color);

  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);

  transition:

    transform 0.3s ease,

    box-shadow 0.3s ease;

  display: flex;

  flex-direction: column;

  border: 1px solid rgba(0, 0, 0, 0.05);

}



.nav-card:hover {

  transform: translateY(-7px);

  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15);

}



/* Obrázek v kartě */

.nav-card-img {

  width: 100%;

  height: 230px;

  overflow: hidden;

  position: relative;

}



.nav-card-img img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: transform 0.5s ease;

}



.nav-card:hover .nav-card-img img {

  transform: scale(1.06);

}



/* Textový obsah karty */

.nav-card-body {

  padding: 25px;

  display: flex;

  flex-direction: column;

  flex-grow: 1;

}



.nav-card-body h3 {

  color: var(--primary-color);

  font-size: 1.35rem;

  margin-bottom: 12px;

  transition: color 0.3s ease;

}



.nav-card:hover .nav-card-body h3 {

  color: var(--secondary-color);

}



.nav-card-body p {

  font-size: 0.98rem;

  line-height: 1.5;

  color: #555;

  margin-bottom: 20px;

  flex-grow: 1;

}



/* Tlačítko/Odkaz v dolní části karty */

.card-btn {

  font-weight: bold;

  color: var(--primary-color);

  font-size: 0.95rem;

  display: inline-block;

  transition:

    transform 0.3s ease,

    color 0.3s ease;

}



.nav-card:hover .card-btn {

  color: var(--secondary-color);

  transform: translateX(5px);

}



/* Responsivita pro mobily */

@media (max-width: 600px) {

  .nav-grid {

    grid-template-columns: 1fr;

  }



  .nav-card-img {

    height: 200px;

  }

}

.hero-split {

  max-width: 1100px;

  margin: 30px auto;

  padding: 0 20px;

  display: flex;

  align-items: center;

  gap: 40px;

}



.hero-split-text {

  flex: 1;

}



.hero-split-text h1 {

  font-size: 2.8rem;

  color: var(--primary-color);

  margin-bottom: 15px;

  line-height: 1.2;

}



.hero-split-text p {

  font-size: 1.2rem;

  color: var(--text-color);

  margin-bottom: 25px;

  line-height: 1.6;

  text-align: justify;

}



.hero-split-img {

  flex: 1;

}



.hero-split-img img {

  width: 100%;

  height: 380px;

  object-fit: cover;

  border-radius: 16px;

  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);

}



/* Responsivita pro mobily */

@media (max-width: 850px) {

  .hero-split {

    flex-direction: column-reverse; /* Na mobilu bude nejdřív fotka, pak text */

    gap: 20px;

  }



  .hero-split-text {

    text-align: center;

  }



  .hero-split-text h1 {

    font-size: 2rem;

  }



  .hero-split-img img {

    height: 250px;

  }

}

.divider-wave {

  width: 100%;

  overflow: hidden;

  line-height: 0;

  margin: 20px 0 30px 0;

}



.divider-wave svg {

  position: relative;

  display: block;

  width: calc(100% + 1.3px);

  height: 40px;

}

/* Sekce rychlého přehledu vybavení */

.quick-amenities {

  margin: 30px auto;

  max-width: 1000px; /* Zmenšení celkové šířky pro kompaktnější vzhled */

  text-align: center;

}



.quick-amenities h2 {

  color: var(--primary-color);

  font-size: 2rem;

  margin-bottom: 35px;

}



.amenities-grid {

  display: grid;

  grid-template-columns: repeat(4, 1fr); /* Přesně 4 sloupce (dva řádky po 4 ikonkách) */

  gap: 15px 20px; /* Menší mezery */

  justify-content: center;

}

.amenity-item {

  display: flex;

  flex-direction: column;

  align-items: center;

  padding: 10px 5px;

  border-radius: 8px;

  transition: transform 0.2s ease, background-color 0.2s ease;

}



.amenity-item:hover {

  transform: translateY(-3px);

  background-color: rgba(255, 255, 255, 0.5);

}



.amenity-icon {

  font-size: 1.8rem; /* Mírně zmenšená ikona */

  margin-bottom: 6px;

  line-height: 1;

  filter: grayscale(100%) sepia(100%) hue-rotate(330deg) saturate(300%);

  opacity: 0.75;

  transition: filter 0.3s ease, opacity 0.3s ease, transform 0.3s ease;

}



.amenity-item:hover .amenity-icon {

  filter: grayscale(20%);

  opacity: 0.9;

  transform: scale(1.08);

}



.amenity-item h4 {

  color: var(--dark-color);

  font-size: 0.95rem;

  margin-bottom: 2px;

}



.amenity-item p {

  color: #777;

  font-size: 0.8rem;

  line-height: 1.2;

}



/* Responsivita pro mobily a tablety */

@media (max-width: 768px) {

  .amenities-grid {

    grid-template-columns: repeat(2, 1fr); /* Na mobilu/tabletu 2 sloupce (4 řádky po 2 ikonkách) */

    gap: 15px 10px;

  }

}



.amenity-item h4 {

  color: var(--dark-color);

  font-size: 1rem;

  margin-bottom: 4px;

}



.amenity-item p {

  color: #777;

  font-size: 0.82rem;

  line-height: 1.2;

}



/* Responsivita pro mobily */

@media (max-width: 600px) {

  .amenities-grid {

    grid-template-columns: repeat(2, 1fr); /* Na mobilu 2 ikony vedle sebe */

    gap: 15px;

  }

}

.game-card {

  background: var(--white);

  padding: 30px;

  border-radius: 12px;

  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);

  margin: 20px auto;

}



.morse-table {

  background: var(--light-bg);

  padding: 15px;

  border-radius: 8px;

  font-family: monospace;

  font-size: 1.1rem;

  letter-spacing: 2px;

  margin: 15px 0;

  word-wrap: break-word;

  border: 1px dashed var(--secondary-color);

}



.game-input-group {

  display: flex;

  gap: 10px;

  margin: 20px 0;

}



.game-input-group input {

  flex: 1;

  padding: 12px;

  border: 2px solid #ccc;

  border-radius: 6px;

  font-size: 1.1rem;

  text-transform: uppercase;

}



.hint-box {

  display: none;

  background: #e8f5e9;

  border: 2px solid #4caf50;

  padding: 20px;

  border-radius: 8px;

  margin-top: 20px;

}



.map-img {

  width: 100%;

  max-width: 250px;

  height: auto;

  border-radius: var(--border-radius);

  margin: 20px 0;

  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);

  display: block;

  margin: 0 auto; /* Vycentruje obrázek horizontálně uvnítř sloupce */

  align-self: center;

  margin-bottom: 20px;

}

.container2 {

  display: flex;

  gap: 20px;

  align-items: center;

  text-align: left;

  max-width: fit-content;

}

.morse-key {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));

  gap: 5px;

  background: #fff;

  padding: 10px;

  border-radius: 6px;

  font-size: 0.85rem;

  margin-top: 10px;

  border: 1px solid #ddd;

}



.article-container {

  max-width: 1100px;

  margin: 30px auto;

  background: var(--white);

  padding: 40px;

  border-radius: 12px;

  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);

}



.article-hero-img {

  width: 100%;

  height: 420px;

  object-fit: cover;

  border-radius: 10px;

  margin: 20px 0 30px 0;

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);

}



.article-grid-img {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 20px;

  margin: 30px 0;

}



.article-grid-img img {

  width: 100%;

  height: 250px;

  object-fit: cover;

  border-radius: 8px;

  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);

}



.info-box {

  background-color: var(--light-bg);

  border-left: 4px solid var(--primary-color);

  padding: 20px;

  margin: 30px 0;

  border-radius: 0 8px 8px 0;

}



.info-box ul {

  margin-bottom: 0;

  padding-left: 20px;

}



@media (max-width: 768px) {

  .article-container {

    padding: 20px;

  }

  .article-hero-img {

    height: 260px;

  }

  .article-grid-img {

    grid-template-columns: 1fr;

  }

}

/* Lightbox modal prvek */

.lightbox {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: rgba(0, 0, 0, 0.88);

  display: flex;

  justify-content: center;

  align-items: center;

  opacity: 0;

  pointer-events: none;

  transition: opacity 0.3s ease;

  z-index: 9999;

}



/* Aktivní stav lightboxu */

.lightbox.active {

  opacity: 1;

  pointer-events: auto;

}



/* Velký obrázek uvnitř lightboxu */

.lightbox img {

  max-width: 90%;

  max-height: 85vh;

  border-radius: 8px;

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);

  transform: scale(0.9);

  transition: transform 0.3s ease;

}



.lightbox.active img {

  transform: scale(1);

}



/* Tlačítko pro zavření (X) */

.lightbox-close {

  position: absolute;

  top: 20px;

  right: 30px;

  color: #fff;

  font-size: 35px;

  font-weight: bold;

  cursor: pointer;

  transition: color 0.2s ease;

}



.lightbox-close:hover {

  color: var(--secondary-color);

}

/* Responzivní obal pro Google Maps */

.mapa {

  width: 100%;

  height: 450px;

  border-radius: var(--border-radius);

  overflow: hidden;

  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

  margin-top: 20px;

}



.mapa iframe {

  width: 100% !important;

  height: 100% !important;

  border: 0;

}



/* Úprava výšky pro mobilní telefony */

@media (max-width: 600px) {

  .mapa {

    height: 320px;

  }

}

/* Cookie Banner */

.cookie-banner {

    position: fixed;

    bottom: 20px;

    left: 50%;

    transform: translateX(-50%);

    width: calc(100% - 40px);

    max-width: 800px;

    background-color: var(--white);

    color: var(--dark-color);

    padding: 20px;

    border-radius: 10px;

    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2);

    border: 1px solid var(--secondary-color);

    z-index: 9999;

    display: none; /* Skryté výchozí, JS ho zobrazí */

}



.cookie-content {

    display: flex;

    flex-direction: column;

    gap: 15px;

    align-items: center;

    text-align: center;

}



.cookie-content p {

    margin: 0;

    font-size: 0.9rem;

    line-height: 1.4;

    color: var(--text-color);

}



.cookie-buttons {

    display: flex;

    gap: 10px;

    width: 100%;

    justify-content: center;

}



.cookie-btn {

    padding: 10px 20px;

    border-radius: 6px;

    font-weight: 600;

    font-size: 0.9rem;

    cursor: pointer;

    border: none;

    transition: background-color 0.2s, transform 0.1s;

    flex: 1;

    max-width: 160px;

}



.cookie-btn-accept {

    background-color: var(--primary-color);

    color: var(--white);

}



.cookie-btn-accept:hover {

    background-color: #5f271f;

}



.cookie-btn-reject {

    background-color: var(--gray-light);

    color: var(--dark-color);

    border: 1px solid #ccc;

}



.cookie-btn-reject:hover {

    background-color: #e0e0e0;

}



@media (min-width: 600px) {

    .cookie-content {

        flex-direction: row;

        text-align: left;

    }

    

    .cookie-buttons {

        width: auto;

    }

}