.products-carousel {
  position: absolute !important;
  bottom: 60px !important;
}


/* Zjednodušené CSS */
.rating-group {
    display: flex;
    font-size: 24px; 
    cursor: pointer;
    /* Důležité: Smažte direction: rtl; a justify-content: flex-end; */
}

.rating-option {
    color: #ccc; /* Původní barva */
    padding: 0 2px;
}

/* Po kliknutí se změní jen třída .selected, zbytek zajistí JS */
.rating-option.selected {
    color: gold !important;
}

/* Interakce pro najetí (hover) */
/* Při najetí zbarvíme všechny hvězdičky DO TÉTO HVĚZDIČKY, zleva doprava */
.rating-group:hover .rating-option {
    color: #ccc; /* Reset */
}

.rating-group .rating-option:hover,
.rating-group .rating-option:hover ~ .rating-option {
    /* Selektor ~ (sourozenecký) funguje pouze na následující prvky.
       Proto musíme barvit pouze tu hvězdičku, na kterou najedeme, ale ne ty předchozí */
    color: orange; /* Zbarví jen tu, na kterou jsme najeli */
}
/* Abychom obarvili i ty PŘEDCHOZÍ (což je intuitivní), potřebovali bychom složitější JS nebo pokročilé CSS. 
   Pro jednoduchost: JS bude reagovat jen na kliknutí. */



.nav-tabs .nav-link:hover {
  color: #777 !important;
}

/* Přidejte toto pravidlo do vašeho CSS souboru */
#keyboardStep4 {
    display: none; 
}
.gallery-container img {
  width: 230px;
  padding: 20px;
  margin: 35px;
}
#keyboardStep4 {
  margin-bottom: -40px;
}
/* Toto je pro zajištění, že se klávesnice zobrazí, když se jí přidá třída .active */
#keyboardStep4.active {
    display: block;
}

/* Ponechte stávající CSS pro klávesnici (.keyboard-container, .keyboard, .key atd.) beze změny */


.btn-primary {
  background: #359945 !important;
  color: white !important;
  border-color: #359945 !important;
}
.rating-option.selected {
  background-color: #359945 !important;
  color: white;
  border-color: #359945 !important;
}

/* NOVÉ CSS PRO VIRTUÁLNÍ KLÁVESNICI (100% ŠÍŘKA A ROZLOŽENÍ) */
.keyboard-container {
    background: #e0e0e0;
    padding: 8px; /* Mírně menší padding */
    border-radius: 10px;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
    max-width: 100%; 
    overflow-x: hidden; /* Zabrání horizontálnímu scrollu, pokud se klávesy vejdou */
}
.keyboard {
    width: 100%;
    /* Zajišťuje stejnou šířku pro všechny buňky */
    table-layout: fixed; 
    border-collapse: separate;
    border-spacing: 5px; 
    user-select: none;
}
.keyboard tr {
    height: 55px; /* Vyšší klávesy pro lepší dotyk */
}
.keyboard td {
    padding: 0;
    /* Důležité: Třída 'half-space' v HTML zabírá jen malou mezeru na začátku 2. řádku */
    width: auto; 
}
.keyboard .key {
    width: 100%;
    height: 50px;
    font-size: 1.1em;
    font-weight: bold;
    border: none;
    border-radius: 6px;
    background: #ffffff;
    box-shadow: 0 3px 0 #999;
    cursor: pointer;
    transition: background-color 0.1s, box-shadow 0.1s;
    padding: 0;
}
.keyboard .key:active {
    background: #d0d0d0;
    box-shadow: 0 1px 0 #999;
    transform: translateY(2px);
}
.keyboard .special {
    background: #c0c0c0;
    color: #333;
    font-size: 0.9em;
    box-shadow: 0 3px 0 #888;
}
.keyboard .special:active {
    background: #a0a0a0;
}
.keyboard .space {
    /* Roztažení klávesy mezerníku */
    font-size: 1.2em;
    letter-spacing: 15px; 
}
.keyboard .active-shift {
    background: #4CAF50; 
    color: white;
}

/* Přizpůsobení velikosti kláves pro menší obrazovky */
@media (max-width: 768px) {
    .keyboard tr {
        height: 50px;
    }
    .keyboard .key {
        font-size: 1em;
    }
}


.container.mt-5 {
  margin-top: -10px !important;
}
  .tech-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75em 2em;
    max-width: 800px;
    padding: 0;
    margin: 0;
    list-style: none;
    margin-bottom: 30px;
  }

  .tech-list li {
    margin: 0;
    padding-left: 1em;
    position: relative;
    margin-bottom: -10px;
  }

  .tech-list li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: #555;
  }
#obecne p, #parametry p {
  font-size: 17px;
}
.modal-body h2 {
  margin-bottom: 20px;
}
 
    .badge-circle {
      width: 150px;
      height: 150px;
      background-color: #359945; /* zelená */
      border-radius: 8%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-family: Calibri;
      text-align: center;
      transform: rotate(-45deg); /* natočení celého badge */
      box-shadow: 0 4px 8px rgba(0,0,0,0.2);
      text-transform: uppercase;
      position: absolute;
      bottom: 10px;
      right: 50px;
    }

    .badge-text {
      transform: rotate(45deg); /* protirotace textu pro lepší čitelnost */
      font-size: 23px;
      font-weight: bold;
      line-height: 1.2;
    }

  
  
#rm900TabsContent {
  background-color: rgba(255, 255, 255, 0.9) !important;
  padding: 20px;
  margin-top: 0px !important;
}
.modal-content {
  background-image: url('../images/pozadirm900.jpg') !important;
  background-size: cover !important;
}
.nav-item {
  font-weight: bold;
}
.nav-tabs .nav-link {
  color: #359945;
}
button.modal-close-btn {
    z-index: 99 !important;
}
/* Styly pro pop-up modal */
.modal-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s, opacity 0.3s;
    z-index: 1000;
}

.modal-container.is-visible {
    visibility: visible;
    opacity: 1;
}

.modal-content {
    background-color: white;
    padding: 2rem;
    border-radius: 10px;
    position: relative;
    max-width: 900px; /* Šířka modal okna */
    width: 90%;
    max-height: 90vh; /* Maximální výška */
    overflow-y: auto;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transform: scale(0.95);
    transition: transform 0.3s ease-out;
}

.modal-container.is-visible .modal-content {
    transform: scale(1);
    background: white;
    border-radius: 11px;
    width: 90%;
    min-height: 660px;
    max-width: 1280px;
    overflow: hidden;
}

.modal-close-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    font-size: 2rem;
    cursor: pointer;
    color: #888;
    transition: color 0.2s;
}

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

.modal-body {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.modal-body .left-content {
    flex: 1;
    min-width: 720px;
}

.modal-body .right-content {
    flex: 2;
    min-width: 250px;
}

/* Responzivní design pro rozvržení obsahu v modalu */
@media (min-width: 768px) {
    .modal-body {
        flex-direction: row;
    }
}

.fa-microchip {
  background-image: url('../images/ruka.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 20px;  /* Upravte podle velikosti obrázku */
  height: 20px; /* Upravte podle velikosti obrázku */
}

.container.text-center.pt-5.pb-4.animated-header img {
  width: 167px;
}


.overlay-image {
  width: 50px;
  height: 70px;
  margin-bottom: 0px;
  margin-right: -15px;
}		
.animate-slide-down {
  opacity: 0;
  transform: translateY(-20px);
  animation: slideDown 0.5s ease-out forwards;
}
.container-fluid.d-flex.justify-content-center.align-items-center {
    margin-top: -20px;
}
.nav-link {
    margin: 0 -10px;
    font-size: 18px !important;
}
@keyframes slideDown {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

body, html {
    height: 100%;
    margin: 0;
    font-family: 'Roboto', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Moderní, čisté písmo */
    overflow-x: hidden; /* Zabrání horizontálnímu scrollbaru */
}
.container.text-center.text-muted.py-3.animated-footer.animate-fade-in.animate-delay-4s {
  bottom: 0px;
  position: absolute;
  margin: 0 auto;
  display: inline flow-root list-item;
  width: 100%;
  color: #666 !important;
  min-width: 100%;
}
.row {
  width: 80%;
}
.video-background-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* Umístí video za všechen ostatní obsah */
    overflow: hidden;
}


#bgvid {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Zajistí, že video pokryje celou plochu bez deformace */
    filter: brightness(0.4) contrast(1.1); /* Mírné ztmavení a zvýšení kontrastu pro lepší čitelnost textu */
}


.page-content {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: rgba(0, 0, 0, 0.3); /* Jemné ztmavení přes video pro lepší kontrast textu */
}


/* Header */
.animated-header h1, .animated-header h2 {
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
}
.icon-color-red { color: #359945; /* Červená */}
.icon-color-blue { color: #1e88e5; /* Střední modrá */}


/* Produktová Mřížka - Fotorealistický vzhled */
.product-showcase-link {
    display: block;
    text-decoration: none;
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease;
    position: relative; /* Pro overlay */
    background-color: #111; /* Tmavé pozadí pro případ, že obrázek ještě není načten */
}


.product-showcase-link:hover,
.product-showcase-link:focus {
    transform: scale(1.07); /* Výraznější zvětšení */
    box-shadow: 0 10px 30px rgba(var(--highlight-color, 0,0,0), 0.5); /* Stín v barvě akcentu */
}
a.nav-link {
    color: #aaa;
}

.image-wrapper {
    position: relative;
    width: 100%;
    padding-top: 100%; /* Poměr stran 4:3, můžete upravit na 100% pro čtverec */
    border-radius: 12px;
    overflow: hidden;
    min-width: 120px;
}


.product-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Klíčové pro fotorealistický dojem - obrázek vyplní bez deformace */
    transition: transform 0.6s ease, opacity 0.4s ease;
}


.product-showcase-link:hover .product-image,
.product-showcase-link:focus .product-image {
    transform: scale(1.1); /* Jemný zoom obrázku uvnitř */
    opacity: 0.85;
}


/* Overlay přes obrázek */
.overlay-content {
    position: absolute;
    bottom: 0px;
    left: 0;
    width: 100%;
    padding: 15px 20px;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.6) 60%, rgba(0,0,0,0) 100%);
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: opacity 0.4s ease, transform 0.4s ease;
    opacity: 1; /* Skryté defaultně, objeví se při hoveru */
    /*! transform: translateY(20px); */
}


.product-showcase-link:hover .overlay-content,
.product-showcase-link:focus .overlay-content {
    opacity: 1;
    transform: translateY(0);
}


.product-title {
    font-size: 1.3rem; /* Větší pro dotyk */
    font-weight: 600;
    margin: 0;
    text-shadow: 1px 1px 4px rgba(0,0,0,0.8);
}


.overlay-icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    color: white;
    font-size: 1.2rem;
    transition: transform 0.3s ease;
}


.product-showcase-link:hover .overlay-icon {
  /*  transform: rotate(360deg) scale(1.1);*/
}


/* Barevné akcenty - použijte pro overlay-icon nebo jiné prvky */
.bg-dark-green { background-color: #00695c; --highlight-color: 0,105,92; } /* Tmavší zelená */
.bg-red { /*! background-color: #359945; */ --highlight-color: 211,47,47; } /* Červená */
.bg-medium-blue { background-color: #1976d2; --highlight-color: 25,118,210; } /* Střední modrá */
.bg-dark-accent {background-color: #359945;--highlight-color: 51,51,51;}


/* Footer */
.animated-footer {
    color: rgba(255, 255, 255, 0.7);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}


/* Jednoduché CSS Animace */
@keyframes slideDown {
    from { transform: translateY(-50px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
.animate-slide-down { animation: slideDown 0.8s ease-out forwards; }


@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.animate-fade-in { animation: fadeIn 1s ease-in-out forwards; }


@keyframes popIn {
    0% { transform: scale(0.5); opacity: 0; }
    70% { transform: scale(1.05); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}
.animate-pop-in {
    opacity: 0; /* Start hidden */
    animation: popIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
h2#subheadlineStatic {
    padding-bottom: 10px;
}

h1 span {
	color:#359945;
}

/* Delay třídy pro postupné načítání */
.animate-delay-1s { animation-delay: 1s; }
.animate-delay-2s { animation-delay: 1.2s; } /* Zkráceno pro plynulejší nástup */
.animate-delay-2-5s { animation-delay: 1.4s; }
.animate-delay-3s { animation-delay: 1.6s; }
.animate-delay-3-5s { animation-delay: 1.8s; }
.animate-delay-4s { animation-delay: 2s; }




/* Responzivita pro menší obrazovky (pro veletrh možná méně relevantní, ale dobrá praxe) */
@media (max-width: 991.98px) { /* pod lg breakpointem */
    .product-title { font-size: 1rem; }
    .overlay-icon { width: 30px; height: 30px; font-size: 1rem; }
    .image-wrapper { padding-top: 100%; } /* Čtvercové na menších */
    .row > div[class^="col-"] {
        padding: 10px; /* Menší mezery na mobilu */
    }
     .display-4 { font-size: 2.5rem; }
    .lead { font-size: 1rem; }
}
@media (max-width: 575.98px) { /* pod sm breakpointem */
     .display-4 { font-size: 2rem; }
    .product-title { font-size: 0.9rem; }
    .overlay-content { padding: 10px; }
}

div#mobile-menu {
    /* display: none; */
}
.hamburger-container {
    display: none;
}
/* Zobrazení menu při aktivaci */
#mobile-menu.active {
  display: block;
}


/* Zobraz jen na mobilu */
@media (max-width: 768px) {
  .hamburger-container {
    position: fixed;
    top: 15px;
    left: 15px;
    display: block;
    z-index: 10000;
  }
  
  div#mobile-menu .nav {
    display: grid
;
}
  
    .container-fluid ul.nav.animated-menu {
        display: none;
    }

  .hamburger-btn {
    background: none;
    border: none;
    font-size: 2rem;
    color: white;
    cursor: pointer;
  }
.container.text-center.text-muted.py-3.animated-footer.animate-fade-in.animate-delay-4s {
  bottom: -110px !important;

}
  .mobile-menu {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.85); /* průhledné pozadí */
    padding-top: 70px;
    padding-bottom: 30px;
    z-index: 9999;
    text-align: center;
  }
button#lang-btn {
    margin-left: -300px;
}
.btn.btn-sm.btn-danger.position-fixed.top-0.end-0.m-3 {
  right: 15px !important;
}


ul#lang-dropdown {
    margin-left: -200px;
}
  .mobile-menu .nav-link {
    color: white;
    display: block;
    font-size: 1.2rem;
    padding: 1rem 0;
    text-decoration: none;
  }
  .col-3.col-sm-6.col-md-3 {
  width: 100%;
}

  .mobile-menu .nav-link:hover {
    text-decoration: underline;
  }

  .mobile-menu.show {
    display: block;
    animation: fadeIn 0.3s ease-in-out;
  }

  @keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
}