* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    font-family: 'Montserrat', sans-serif;
    background-color: #FFFFFF;
    color: #333;
 
    
    position: relative;
    
    height: 100%;
   width:100%;
    display: grid;
    grid-template-rows: 1fr auto; 
        
  
}
h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', sans-serif; /* Písmo pro všechny nadpisy */
}

p {
    font-family: 'Montserrat', sans-serif; /* Písmo pro odstavce */
}

main {
max-width:90%;
  margin: 0 auto;     
    padding: 20px; 
 
}

header {
    background-color: #fff;
       
    position: relative;
}



.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 0px 10px 0px 10px;
    position: fixed;  /* Fixní pozice pro navbar */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999; /* Navbar bude pod modalem */
    border-bottom: 1px solid #F2F2F2;
    justify-content: flex-end; 
    height:60px;
    
}


.logo {
position: relative; /* Nebo static */
left:10px;

  font-family: 'Dancing Script', cursive; 
    font-size: 35px;
 text-decoration: none;
    text-align: left;
    flex: 1;
color: #333; 
   
}


.hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
    z-index: 2;
    transition: transform 0.3s ease;
    padding:5px;
}

.hamburger.active .line:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.hamburger.active .line:nth-child(2) {
    opacity: 0;
}

.hamburger.active .line:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

.hamburger .line {
    height: 3px;
    width: 25px;
    background-color: #888; 
    margin: 4px 0;
    transition: all 0.3s ease;
}

.nav-links {
    display: flex; /* Show as flex on desktop */
    list-style-type: none;
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
    position: relative; /* For desktop positioning */
    margin: 0; /* Reset default margins */

user-select: none; 
}

/* Fixed: ensure li is formatted correctly */
.nav-links li {
    width: auto; /* Let width adjust based on content */
    text-align: center; /* Center the text */
 list-style-type: none; /* Odstraní standardní odrážky */
}

.nav-links li a {
    text-decoration: none;
    color: #333;
    font-weight: 500;
    padding: 15px; /* Increased padding for better clickability */
    width: 100%; /* Ensure full width of link */
    box-sizing: border-box; /* So padding doesn't affect size */
    transition: color 0.3s; /* Add hover effects */
}

.nav-links li a:hover {
    color: #007BFF;
    
}
.nav-links a {
    text-decoration: none; /* Odstraní podtržení textu */
    color: #333; /* Barva textu */
    display: flex; /* Umožní flexbox pro zarovnání */
    align-items: center; /* Zarovná ikony a text na střed */
    padding: 10px; /* Přidá prostor kolem odkazu */
}

.nav-links i {
    margin-right: 8px; /* Odsazení mezi ikonou a textem */
}

.login-link {
    text-decoration: none;
    color: #333;
    font-weight: 500;
    padding: 15px;
    transition: color 0.3s;
 user-select: none; 
}

.login-link:hover {
    color: #007BFF;
    
}

.container {
    padding: 20px;
    background-color: #fff;
    margin: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
margin-top: 80px; /* Přidáno pro oddělení od navbaru (zvýšte nebo snižte podle potřeby) */
    z-index: 1;
    
       
    
}

.profiles h3 {
    font-size: 24px;
    margin-bottom: 20px;
}

/* Kontejner pro uživatelské profily */
.profile-grid {
    
    justify-content: center;
    padding: 20px;
    width: 100%;
    
}



/* Kontejner pro uživatelské karty */


#user-profiles1 {
    width: 100%;

    padding: 20px;
}

#user-profiles {
     display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); /* Nastaví minimální šířku 250px a maximální 1fr */
    gap: 20px;
    justify-content: start; /* Zarovnání boxů vlevo */

}

/* Každá karta uživatele */
.profile-link {
   width: 100%;
    max-width: 300px; /* Maximální šířka 300px pro kontrolu velikosti */
    aspect-ratio: 1 / 1; /* Čtvercový tvar boxu */
  
    text-decoration: none;
    color: inherit;
     
    box-sizing: border-box;
}
/* Vzhled karty */
.profile-card {
   
    width: 100%;
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.profile-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}



/* Obrazový kontejner */
.profile-image-container {
    position: relative;
    width: 100%;
    height: 300px;
    overflow: hidden;
    background-color: #f0f0f0;
}

.profile-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Překryvný pruh s informacemi */
.profile-info-overlay {
    position: absolute;
    bottom: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    padding: 10px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    font-weight: 500;
    transition: background 0.3s ease;
}

.profile-card:hover .profile-info-overlay {
    background: rgba(0, 0, 0, 0.8); /* Lehce tmavší pozadí při hover efektu */
}

/* Styl pro jméno a věk */
.profile-name-age {
    display: flex;
    flex-direction: column;
}

.profile-name {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

.profile-age {
    font-size: 14px;
    font-weight: 400;
    opacity: 0.8;
}

/* Styl pro vzdálenost */
.profile-distance {
    font-size: 14px;
    font-weight: 400;
    opacity: 0.8;
}



/* Pro tablety: dvě karty vedle sebe */
@media (max-width: 1024px) {
    #user-profiles {
        display: flex;
        flex-wrap: wrap; /* Umožní zalomení na nový řádek */
        gap: 10px;
        justify-content: center; /* Zarovnání boxů na střed */
        align-items: center; /* Zarovnání boxů na střed vertikálně */
    }

    .profile-link {
        max-width: 45%; /* Na tabletu 2 karty vedle sebe */
        aspect-ratio: 1 / 1; /* Čtverec */

}}

/* Pro mobilní zařízení: roztažení karty na 80 % obrazovky a zarovnání na střed */
@media (max-width: 768px) {
    #user-profiles {
        display: flex;
        flex-wrap: wrap; /* Umožní zalomení na nový řádek */
        gap: 10px;
        justify-content: center; /* Zarovnání boxů na střed */
        align-items: center; /* Zarovnání boxů na střed vertikálně */
    }

    /* Karta na mobilu bude mít 100% šířky s maximální šířkou 80% obrazovky */
    .profile-link {
        max-width: 100%; /* Na mobilu bude maximální šířka 80% obrazovky */
        aspect-ratio: 1 / 1; /* Poměr 1:1 pro čtverec */
max-height: 380px;
margin:20px;
    }

    /* Ujistíme se, že obrázky se přizpůsobí */
    .profile-image-container {
        aspect-ratio: 1 / 1; /* Nastavení čtverce pro obrázek */
height: 380px;
    }
}

/* Pro mobilní zařízení: roztažení karty na 80 % obrazovky a zarovnání na střed */
@media (max-width: 576px) {
   
   .profile-grid
   {
   padding:0px;
   
   }
   
   
#user-profiles1{
padding:0px;
}
    /* Ujistíme se, že obrázky se přizpůsobí */
    .profile-image-container {
        
height: auto;
    }
    
    #user-profiles{
            gap: 90px;
    }
}


@media (max-width: 530px) {
   
   
    
    #user-profiles{
            gap: 50px;
    }
}

@media (max-width: 500px) {
   
   
    
    #user-profiles{
            gap: 10px;
    }
}


/* Pro mobilní zařízení: roztažení karty na 80 % obrazovky a zarovnání na střed */
@media (max-width: 400px) {
   

 
.profile-name {
font-size:13px;

}
    
    
    .profile-age {
font-size:12px;

}

   .profile-distance {
font-size:11px;

}
}




    




/* Stylování pro profilovou fotku a dropdown */
.profile-menu {
    display: flex; /* Flexbox pro zarovnání prvků */
    align-items: center; /* Vertikální zarovnání */
    margin-left: auto; /* Posune profilovou oblast na konec navbaru */
    position: relative; /* Pro správné umístění dropdown menu */
 cursor: pointer;
 user-select: none; 
}

.profile-img {
   
    width: 35px;
    height: 35px;
    border-radius: 50%; /* Kulatý tvar */
    cursor: pointer;
    margin-right: 5px;
    object-fit: cover; /* Zachová poměr stran a vyplní kruh */
    object-position: center; /* Zaměření na střed */
}





.arrow {
    cursor: pointer; /* Změní kurzor na ruku při najetí myši */
    font-size: 16px; /* Velikost šipky */
    color: #333; /* Barva šipky */
}

/* Stylování pro dropdown menu */
.dropdown-menu {
    max-height: 0; /* Skryté ve výchozím stavu */
    opacity: 0; /* Skrytá opacita */
    visibility: hidden; /* Skryté, aby nebylo možné kliknout */
    position: absolute; /* Absolutní pozice pro správné umístění */
    top: 103%; /* Umístí dropdown pod profilovou oblast */
    right: 0; /* Zarovná dropdown na pravou stranu */
    background-color: white; /* Pozadí dropdownu */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Stín pro dropdown */
    z-index: 1000; /* Zajišťuje, že dropdown bude nad ostatními prvky */
    min-width: 150px; /* Minimální šířka dropdownu pro lepší vzhled */
    overflow: hidden; /* Skryje přetečení */
    transition: max-height 0.5s ease, opacity 0.5s ease, visibility 0.5s ease; /* Hladký přechod */
background-color: rgba(255, 255, 255, 0.8);

}

.dropdown-menu ul {
    list-style-type: none; /* Odstraní odrážky */
    padding: 10px; /* Odstraní výchozí padding */
    margin: 0; /* Odstraní výchozí margin */

}

.dropdown-menu li {
    padding: 5px 10px; /* Vnitřní odstupňování položek */
    white-space: nowrap; /* Zabraňuje zalamování textu */
}

.dropdown-menu li a {
    text-decoration: none; /* Odstraní podtržení */
    color: #333; /* Barva textu */
   display: block;
 transition: color 0.3s; /* Add hover effects */

}


.dropdown-menu li a:hover {
    color: #007BFF;
 

}

.dropdown-menu.show {

       max-height: 110px; /* Maximální výška pro zobrazení */
    opacity: 1; /* Nastavíme neprůhlednost na 1 */
    visibility: visible; /* Zviditelní dropdown menu */
background-color: rgba(255, 255, 255, 0.8);
}



footer {
     background: linear-gradient(135deg, #FDFDFD, #EFEFEF);
    padding: 20px 0;
}

.footer-container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;

}

.footer-info, .footer-links, .footer-social {
    flex: 1 1 200px;
    margin: 20px;
    list-style: none;
    font-size:15px;
}

li::marker {
  content: "";
}

.footer-info h3{
font-size:26px;
}


.footer-links ul, .footer-social ul {
    list-style-type: none;
    padding: 0;
}

.footer-links ul li, .footer-social ul li {
    margin: 5px 0;
}

.footer-links a, .footer-social a {
    text-decoration: none;
    color: #333;
    transition: color 0.3s;
}

.footer-links a:hover, .footer-social a:hover {
    color: #007BFF;
}

.footer-bottom {
    text-align: center;
    margin-top: 20px;
    font-size: 0.8em;
    color: #777;
}

.container {
    position: relative;
    padding: 20px;
}

.profiles {
    padding: 20px;
}

.filter-container {
    padding: 20px;
   
}

.filter-button {
    border: none;
background:none;
    padding: 10px 15px;
    cursor: pointer;
    font-size: 20px;
    display: flex;
     align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    user-select: none; 

}

.filter-icon {
            
            padding: 15px; /* Prostor okolo ikony */
            border-radius: 50%; /* Kulatý tvar */
            display: flex;
            justify-content: center;
            align-items: center;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); /* Stín */
            cursor: pointer; /* Změna kurzoru na ukazatel ruky */
            transition: transform 0.3s; /* Hladký přechod */
        }

.filter-icon:hover {
            transform: scale(1.1); /* Mírné zvětšení při hover */
        }

 

.filter-icon i {
            font-size: 16px; /* Velikost ikony */
        }
.input-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.input-row input {
      width: 48%; /* Šířka pro každý input, aby byly rovnoměrně rozdělené */
    padding: 5px; /* Padding uvnitř inputu */
    border: 1px solid #ccc; /* Výchozí šedý obrys */
    border-radius: 5px; /* Zaoblení rohů */
    transition: border-color 0.3s ease; /* Přechod pro barvu okraje */
}

/* Přidání přechodu při focusu */
.input-row input:focus {
    border-color: #1876E4;
    outline: none;
}

/* Styl pro select */
select {
    width: 50%; /* Šířka 100% pro select */
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    transition: border-color 0.3s ease;
background: linear-gradient(to bottom, #F9FBFD, #FFFFFF); /* Velmi jemný přechod mezi dvěma šedými tóny */

}

select:focus {
    border-color: #1876E4;
    outline: none;
}

/* Styl pro slider */
/* Styl pro slider */
.slider-container {
    display: flex;
    align-items: center;
    flex: 1 1 100%; /* Zajistí, že zabere celý řádek */
}

.slider-container input[type="range"] {
    margin-right: 5px;
    width: 100%; /* Můžete upravit šířku podle potřeby */
}

.slider-container input[type="text"] {
    width: 80px;
    padding: 10px;
    text-align: center; /* Čísla budou zarovnána na střed */
    
    border: none; /* Odstraní okraje */
    background: none; /* Odstraní pozadí */
    font-size: 20px; /* Nastaví velikost písma, aby to vypadalo jako běžný text */
    color: inherit; /* Zachová barvu textu podle zbytku stránky */
    outline: none; /* Odstraní zvýraznění při zaostření */
}

label {
    margin-right: 10px;
    font-weight: bold;
}

/* Styl pro základní posuvník */
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    height: 5px;
    background: #ddd;
    border-radius: 5px;
    outline: none;
    width: 100%;
}

/* Styly pro kuličku posuvníku - Chrome, Safari, Opera */
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px; /* Zvětšíme kuličku */
    height: 20px; /* Zvětšíme kuličku */
    background: #007bff;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.2s ease; /* Přidáme přechod na hover */
}

/* Styly pro kuličku posuvníku - Firefox */
input[type="range"]::-moz-range-thumb {
    width: 20px; /* Zvětšíme kuličku */
    height: 20px; /* Zvětšíme kuličku */
    background: #007bff;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.2s ease; /* Přidáme přechod na hover */
}

/* Pro všechny prohlížeče - kulička posuvníku při hoveru */
input[type="range"]::-webkit-slider-thumb:hover,
input[type="range"]::-moz-range-thumb:hover {
    background-color: #0056b3; /* Změna barvy kuličky při hoveru */
}

/* Responsivní úpravy pro mobilní zobrazení */
@media (max-width: 768px) {
    /* Zvýšení velikosti kuličky a výšky posuvníku na mobilu */
    input[type="range"] {
        height: 8px; /* Zvýšení výšky pro lepší ovládání prstem */
    }

    input[type="range"]::-webkit-slider-thumb {
        width: 30px; /* Zvětšíme kuličku pro mobilní zobrazení */
        height: 30px; /* Zvětšíme kuličku pro mobilní zobrazení */
    }

    input[type="range"]::-moz-range-thumb {
        width: 30px; /* Zvětšíme kuličku pro mobilní zobrazení */
        height: 30px; /* Zvětšíme kuličku pro mobilní zobrazení */
    }
}

/* Přizpůsobení pro ještě menší zařízení (např. mobily ve vertikálním režimu) */
@media (max-width: 480px) {
    input[type="range"] {
        height: 10px; /* Ještě větší posuvník pro velmi malé obrazovky */
    }

    input[type="range"]::-webkit-slider-thumb {
        width: 35px; /* Zvětšení kuličky pro velmi malé obrazovky */
        height: 35px; /* Zvětšení kuličky pro velmi malé obrazovky */
    }

    input[type="range"]::-moz-range-thumb {
        width: 35px; /* Zvětšení kuličky pro velmi malé obrazovky */
        height: 35px; /* Zvětšení kuličky pro velmi malé obrazovky */
    }
}

#distance {
    flex-grow: 1;
    margin-right: 10px;
}

#distance-value {
    font-weight: bold;
}

/* Další styl pro menu filtrů */
.filter-menu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
   background-color: #FCFCFC; /* Pozadí pro menu */
   
    border-radius: 5px; /* Zaoblení rohů */
}

.filter-menus {
 padding: 20px; /* Padding pro celé menu */
}
.filter-options {
    display: flex; /* Použití flexboxu pro dva sloupce */
    flex-wrap: wrap; /* Přizpůsobení obsahu */
    gap: 20px; /* Vzdálenost mezi sloupci */
}

.filter-option {
      display: flex; /* Flexbox pro horizontální uspořádání */
    align-items: center; /* Vertikální zarovnání */
    margin-bottom: 20px; /* Mezera mezi jednotlivými filtry */
        flex: 1 1 300px;

}

.filter-option label {
  
    margin: 10px; /* Vzdálenost mezi labelem a vstupem */
    font-weight: bold; /* Tlustý text pro labely */


}
.age-range, .height-range {
    display: flex;
    align-items: center;
}

.age-range input, .height-range input {
    width: 48%; /* Změna šířky na 48% pro konzistenci */
    margin: 10px;
    padding: 10px; /* Zmenšení paddingu pro lepší vzhled */
    border: 1px solid #ccc;
    border-radius: 5px;
    background: linear-gradient(to bottom, #F9FBFD, #FFFFFF); /* Velmi jemný přechod mezi dvěma šedými tóny */
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.age-range input:focus, .height-range input:focus {
    border-color: #1876E4; 
    box-shadow: 0px 1px 15px rgba(0, 0, 0, 0.1);
    outline: none; 
}

.smoker-options label {

    font-weight: bold; /* Volitelně - tučný text pro popis */
}







/* Responzivita pro tablety */
@media (max-width: 1024px) {
  
.filter-option {
      width:100%;
}
    
select{
      width:100%;
}

}

/* Mobilní zobrazení */
@media (max-width: 768px) {

main {
max-width:100%;
  margin: 0 auto;     
    padding: 0px; 
}


.nav-links {
    opacity: 0; /* Hidden initially */
    flex-direction: column; /* Allow vertical stacking */
    align-items: center; /* Center the content */
    position: absolute; /* Position below the header */
    background-color: rgba(255, 255, 255, 0.8); /* Background with transparency */
    width: 100%; /* Full width */
    top: 61px; /* Position below header */
    left: 0; /* Align to left */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); /* Add shadow */
    z-index: 1; /* Keep above other elements */
    transition: opacity 0.3s ease; /* Smooth transition for opacity */
    pointer-events: none; /* Disable interaction when hidden */
}

.nav-links.active {
    opacity: 1; /* Set opacity to 1 when active */
    background-color: rgba(255, 255, 255, 0.85);
    pointer-events: auto; /* Enable interaction when visible */
}


   


    .hamburger {
        display: flex; /* Zobrazit hamburger ikonu na mobilu */
margin-right:10px;
    }


.filter-options {
    display: block; /* Použití flexboxu pro dva sloupce */
    flex-wrap: wrap; /* Přizpůsobení obsahu */
    gap: 20px; /* Vzdálenost mezi sloupci */
}





 .filter-container {
        overflow: hidden; /* Zamezení přetékání */
        white-space: nowrap; /* Zamezení přetékání filtru */
        width: 100%; /* Šířka filtru na 100% */
    }

    .filter-container .filter {
        display: inline-block; /* Zobrazit filtry vedle sebe */
        margin: 0 5px; /* Mezery mezi filtry */
    }

 

    .age-range {
        flex-direction: row; /* Ponechání vedle sebe pro rozsah věku */
        margin-bottom: 10px; /* Mezera mezi prvky */
    }

    #distance {
        width: 80%; /* Šířka posuvníku na menších obrazovkách */
    }


    

  

select {
    width: 100%; /* Šířka 100% pro select */
    
}

.container{

margin:80px 5px 0px 5px;
}



}

/* Mobilní zobrazení */
@media (max-width: 400px) {


.filter-option {
    display: flex; /* Použití flexboxu pro dva sloupce */
    flex-wrap: wrap; /* Přizpůsobení obsahu */
    gap: 20px; /* Vzdálenost mezi sloupci */
}

.height-range input{ 
margin:1px;
}

.age-range input{
margin:1px;
}
}







/*  index */
.hero-section {
    position: relative;
    height: 115vh;
    display: flex;
    justify-content: flex-start; /* Text zarovnán vlevo */
    align-items: center;
    padding-left: 50px; /* Odstup textu od levého okraje */
    background: url('img/index.jpg') no-repeat center center/cover; /* Obrázek na pozadí */
    user-select: none;

}

.hero-text {
    position: relative;
    max-width: 600px; /* Zachováno max. šířka */

}


@media (max-width: 768px) {
    .hero-section {
        padding-left: 20px; /* Menší odsazení pro mobilní zařízení */
        padding-right: 10px; /* Přidání pravého paddingu pro odsazení */
    }

    .hero-text {
        max-width: calc(100% - 10px); /* Odsazení 10px z pravé strany */
        margin-right: 10px; /* Přidání marginu na pravé straně pro odsazení */
    }
}



.text-content {
    position: relative;
    z-index: 2;
    background: rgba(0, 0, 0, 0.6); /* Poloprůhledná černá vrstva jen pod textem */
    padding: 30px;
    border-radius: 10px; /* Jemně zaoblené rohy */
    color: #fff;
    pointer-events: auto; /* Zajistí, že hover efekt bude dostupný */
}

.hero-text h1 {
    font-size: 48px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0 0 20px;
}

.hero-text p {
    font-size: 18px;
    margin: 0 0 20px;
    font-weight: 300;
}

@media (max-width: 376px) {
   .text-content {
font-size: 0.6rem;
}
.hero-text h1 { 
 
font-size: 1.5rem;
}


.hero-text p{
font-size: 0.9rem;
}

}
.hero-text a {
    display: inline-block;
    padding: 10px 30px;
    background: linear-gradient(135deg, #E93342, #9F222D);
    color: #fff;
    text-transform: uppercase;
    font-weight: bold;
    border-radius: 5px;
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    will-change: transform, box-shadow;
}

.hero-text a:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

.fade-in {
    transform: translateY(20px);
    opacity: 0;
    animation: fadeInTransform 1s ease forwards;
}

.fade-in:nth-child(1) {
    animation-delay: 0.5s;
}

.fade-in:nth-child(2) {
    animation-delay: 1s;
}

.fade-in:nth-child(3) {
    animation-delay: 1.5s;
}

@keyframes fadeInTransform {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}


.how-it-works {
    background-left; /* Vycentrování textu */
}

.steps {
    display: flex;
    justify-content: space-between;
    align-items: stretch; /* Umožní prvkům rozprostřít se vertikálně */
    gap: 40px; /* Větší mezera mezi jednotlivými prvky */
    height: 100%; /* Zajištění plné výšky */
}

/* Styl pro jednotlivé kroky */
.step {
    flex: 1; /* Zajišťuje, že všechny prvky budou mít stejnou šířku */
    padding: 0 20px; /* Přidání odsazení na stranách textu */
    position: relative;
    min-height: 300px; /* Minimální výška kroků */
    display: flex;
    flex-direction: row; /* Umožní horizontální roztažení obsahu */
    align-items: center; /* Vycentruje obsah vertikálně */
    border-bottom: 1px solid transparent; /* Transparentní dolní rámeček, aby byl oddělený */
}

/* Čára mezi jednotlivými kroky (ne zobrazená na mobilu) */
.step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 1px;
    height: 100%;
    background-color: #ccc; /* Barva čáry */
}

/* Texty */
.step h3 {
    font-size: 24px;
    margin-bottom: 15px;
}

ÿte䮀ݐ{
    font-size: 16px;
}

/* Styl pro obrázky */
.image-container {
    margin-right: 20px; /* Odstup mezi obrázkem a textem */
}

.image-container img {
    width: 80px; /* Nastavení šířky obrázku */
    height: auto; /* Automatická výška pro zachování poměru */
    object-fit: cover; /* Zajištění, že obrázek bude v daném prostoru */
    border-radius: 10px; /* Jemně zaoblené okraje pro obrázek */
}

/* Responzivní design - na mobilech a tabletech zobrazit pod sebou */
@media (max-width: 926px) {
    .steps {
        flex-direction: column; /* Změna směru na sloupec */
        height: auto; /* Zrušení fixní výšky na mobilních zařízeních */
gap:10px;
    }

    .step {
margin-top:10px;
        margin-bottom: 20px; /* Mezery mezi jednotlivými kroky */
        align-items: flex-start; /* Zarovná obrázek a text na začátek */
        min-height: 110px; /* Minimální výška pro mobil */
        border-bottom: 1px solid #ccc; /* Přidání dolního rámečku pro všechny kroky */
    }

    .image-container {
        margin-right: 0; /* Zrušíme odsazení na mobilních zařízeních */
        margin-bottom: 15px; /* Přidání odsazení pod obrázkem */
    }

    .step:not(:last-child)::after {
        display: none; /* Skryj čáru na mobilních zařízeních */
    }
}

@media (max-width: 358px) {
    .step {
        min-height: 170px; /* Minimální výška pro velmi malá zařízení */
    }
}

/* Sekce Vlastnosti Seznamky */
.features {
    display: flex; /* Umožňuje umístění obrázku a obsahu vedle sebe */
    height: 50vh; /* Výška sekce na celou obrazovku */
    position: relative;
    background: #F6F6F6;
}


/* Sekce Vlastnosti Seznamky */
.features {
    display: flex; /* Umožňuje umístění obrázku a obsahu vedle sebe */
    height: 50vh; /* Výška sekce na celou obrazovku */
    position: relative;
    background: #F6F6F6;
}

/* Obrázek sekce */
.features-image {
    flex: 0 0 30%; /* Omezit šířku obrázku na 30% */
    overflow: hidden; /* Skryje přetékající část obrázku */
}

.features-image img {
    width: 100%; /* Zajistí, že obrázek bude pokrývat celou šířku */
    height: auto; /* Automatická výška pro zachování poměru */
    object-fit: cover; /* Umožňuje udržet poměr stran obrázku */
}

/* Obsah sekce */
/* Sekce Vlastnosti Seznamky */
.features {
    display: flex; /* Umožňuje umístění obrázku a obsahu vedle sebe */
    height: 50vh; /* Výška sekce na celou obrazovku */
    position: relative;
    background: #F6F6F6;
}

/* Obrázek sekce */
.features-image {
    flex: 0 0 30%; /* Omezit šířku obrázku na 30% */
    overflow: hidden; /* Skryje přetékající část obrázku */
}

.features-image img {
    width: 100%; /* Zajistí, že obrázek bude pokrývat celou šířku */
    height: auto; /* Automatická výška pro zachování poměru */
    object-fit: cover; /* Umožňuje udržet poměr stran obrázku */
}

.pribehy{
font-size:12px;
}

/* Sekce Vlastnosti Seznamky */
.features {
    display: flex; /* Umožňuje umístění obrázku a obsahu vedle sebe */
    height: 80vh; /* Výška sekce na celou obrazovku */
    position: relative;
    background: #F6F6F6;
}

@media (max-width: 1110px) {
.features {
    display: flex; /* Umožňuje umístění obrázku a obsahu vedle sebe */
    height: 100vh;
}
}
/* Obrázek sekce */
.features-image {
    flex: 0 0 30%; /* Omezit šířku obrázku na 30% */
    overflow: hidden; /* Skryje přetékající část obrázku */
}

.features-image img {
    width: 100%; /* Zajistí, že obrázek bude pokrývat celou šířku */
    height: 100%; /* Zajistí, že obrázek pokrývá celou výšku */
    object-fit: cover; /* Umožňuje udržet poměr stran obrázku */
}

/* Obsah sekce */
.features-content {
    flex: 1; /* Zajistí, že obsah zabere pravou část */
    padding: 20px; /* Odsazení obsahu od okrajů */
    display: flex;
    flex-direction: column; /* Odsazení textu pod sebou */
    justify-content: center; /* Vertikální zarovnání na střed */
}

/* Styl pro nadpis */
.features-content h2 {
    margin-bottom: 60px; /* Odsazení pod nadpisem */
    font-size: 32px; /* Zvětšení velikosti nadpisu */
    font-weight: bold; /* Tučné písmo */
}

/* Styl pro seznam vlastností */
.features-content ul {
    list-style: none; /* Odstranění výchozího seznamového stylu */
    padding: 0px; /* Odstranění vnitřního odsazení */
}

/* Styl pro odrážky */
.features-content li {
    margin-bottom: 40px; /* Odsazení mezi odrážkami */
    display: flex; /* Umožňuje zarovnat ikony a text vedle sebe */
    align-items: center; /* Zarovnat text a ikony na střed */
}

/* Text pod ikonou */
.feature-text {
    display: flex; /* Umožňuje zarovnat text */
    align-items: center; /* Zarovnat text na střed */
    justify-content: space-between; /* Umožní oddělit texty */
    flex: 1; /* Zabere zbytek prostoru */
}

/* Text title s pevnou šířkou */
.text-title {
    width: 250px; /* Nastavit šířku pro zarovnání */
}

/* Odsazení mezi strong a popisným textem */
.text-description {
    margin-left: 10px; /* Odsazení mezi strong a popisným textem */
    line-height: 1.5; /* Větší výška řádku pro lepší čitelnost */
    flex: 1; /* Zabere zbytek prostoru */
}

/* Ikona vlastnosti */
.feature-icon {
    width: 24px; /* Nastavení šířky ikony */
    height: auto; /* Automatická výška pro zachování poměru */
    margin-right: 10px; /* Odsazení mezi ikonou a textem */
}

/* Responzivní úpravy */
@media (max-width: 930px) {
    .features {
        flex-direction: column; /* Na mobilních zařízeních se obrázek a obsah seřadí pod sebe */
        height: auto; /* Automatická výška pro flexibilitu */
    }

    .features-image {
        flex: 1; /* Na mobilech se obrázek rozšíří na plnou šířku */
        max-height: 400px; /* Nastavit maximální výšku obrázku */
    }

    .features-image img {
        object-fit: cover; /* Udržení poměru stran */
    }

    .features-content {
        padding: 20px; /* Menší odsazení pro mobilní zařízení */
    }

    .features-content h2 {
        font-size: 20px; /* Zmenšit velikost nadpisu */
    }

    .text-description {
        margin-left: 5px; /* Menší odsazení pro mobilní zařízení */
    }
}



@media (max-width: 540px) {
 .text-description {
        margin-left: 5px; /* Menší odsazení pro mobilní zařízení */
    }
}

@media (max-width: 430px) {
    .features-content li  {

   }
   
   .text-title {
    width: 40%;
    }
}
/* Styl pro sekci Úspěšné Příběhy */
.success-stories {
    background-color: #FFFFFF; /* Bílé pozadí pro kontrast */
    padding: 40px 20px; /* Vnitřní odsazení pro estetiku */
    text-align: center; /* Vycentrování textu */
    user-select: none; 
}

.success-stories h2 {
    font-size: 32px; /* Velikost nadpisu */
    margin-bottom: 30px; /* Odsazení pod nadpisem */
    font-weight: bold; /* Tučný text */
    color: #333; /* Tmavší barva pro čitelnost */
}

/* Kontejner pro příběhy */
.stories-container {
    display: flex; /* Flexbox pro horizontální rozložení */
    flex-wrap: wrap; /* Umožňuje řádkování, když není dostatek místa */
    justify-content: space-between; /* Rovnoměrné rozložení */
    gap: 20px; /* Odsazení mezi příběhy */
    padding: 20px;
}

/* Styl pro jednotlivé příběhy */
.story {
    background: #FFFFFF; /* Bílý pozadí pro příběhy */
    border-radius: 10px; /* Zaoblené rohy */
    padding: 20px; /* Vnitřní odsazení */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Jemný stín pro hloubku */
    flex: 1 1 calc(25% - 20px); /* Flexibilní šířka pro 4 bloky v řadě */
    max-width: 250px; /* Maximální šířka bloku */
    transition: transform 0.3s, box-shadow 0.3s; /* Animace na hover */
}

/* Styl pro obrázky příběhů */
.story-image {
    width: 50%; /* Šířka obrázku na 100% */
    height: auto; /* Automatická výška pro zachování poměru */
    border-radius: 70px; /* Zaoblené rohy pro obrázky */
}

/* Efekt na hover */
.story:hover {
    transform: translateY(-5px); /* Mírné zdvihnutí */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* Silnější stín */
}

.story p {
    margin: 15px 0 0; /* Odsazení pod textem */
    font-size: 16px; /* Velikost textu */
    line-height: 1.6; /* Větší výška řádku pro lepší čitelnost */
    color: #555; /* Tmavě šedá pro příjemný kontrast */
}

/* Styl pro sekci blogu */
.blog {
    background-color: #F9F9F9; /* Světlé pozadí pro lepší čitelnost */
    padding: 40px 20px; /* Odsazení uvnitř sekce */
    user-select: none; 
}

/* Styl pro nadpis blogu */
.blog h2 {
    text-align: center;
    margin-bottom: 20px; /* Odsazení pod nadpisem */
}

/* Kontejner pro blogové příspěvky */
.blog-container {
    display: flex; /* Umožňuje flexbox layout */
    flex-wrap: wrap; /* Příspěvky se zabalí na další řádek, pokud se nevejdou */
    justify-content: center; /* Vycentrování příspěvků */
}

/* Styl pro jednotlivé blogové příspěvky */
.blog-post {
    background-color: #FFFFFF; /* Pozadí pro příspěvek */
    border-radius: 8px; /* Zaoblení rohů */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Stín pro 3D efekt */
    margin: 10px; /* Odsazení mezi příspěvky */
    flex: 1 0 300px; /* Flexibilní šířka příspěvků, minimální 300px */
    max-width: 300px; /* Maximální šířka příspěvku */
    overflow: hidden; /* Skrýt přetékající obsah */
    display: flex;
    flex-direction: column; /* Umožňuje vertikální uspořádání obsahu */
}

/* Styl pro obrázky v blogových příspěvcích */
.blog-image {
    width: 100%; /* Obrázky zabírají celou šířku příspěvku */
    height: auto; /* Zachovává poměr stran obrázku */
}

/* Styl pro nadpisy a text příspěvků */
.blog-post h3 {
    margin: 20px; /* Odsazení kolem nadpisu */
    text-align: center; /* Ustřednění nadpisu */
min-height:40px;
}

.blog-post p {
    padding: 20px; /* Odsazení textu od okrajů */
    flex-grow: 1; /* Text zabírá dostupný prostor */
    margin: 0; /* Odstranění defaultního marginu pro uniformitu */
}

/* Styl pro tlačítko Číst více */
.btn-read-more {
    display: block; /* Tlačítko na nový řádek */
    background-color: #007BFF; /* Modré pozadí pro tlačítko */
    color: white; /* Bílý text */
    text-align: center; /* Centrum textu */
    padding: 10px; /* Odsazení uvnitř tlačítka */
    margin: 10px auto; /* Odsazení nahoře a dole, automaticky vycentrováno */
    border-radius: 4px; /* Zaoblení rohů tlačítka */
    text-decoration: none; /* Odstranění podtržení */
transition: background-color 0.3s;
}

.btn-read-more:hover {
    background-color: #0056b3; /* Tmavší modrá na hover */
}

/* Responsivní úpravy */
@media (max-width: 768px) {
    .success-stories {
        padding: 20px 10px; /* Menší odsazení na mobilech */
    }

    .success-stories h2 {
        font-size: 28px; /* Menší nadpis na mobilech */
    }

    .story {
        flex: 1 1 calc(50% - 20px); /* Dva příběhy v řadě na mobilech */
        max-width: none; /* Odstranit maximální šířku na mobilech */
    }

    .blog-post {
        flex: 1 0 100%; /* Na mobilech se příspěvky roztáhnou na 100% šířky */
        max-width: 100%; /* Maximální šířka příspěvku je 100% */
    }
}

@media (max-width: 480px) {
    .story {
        flex: 1 1 100%; /* Na malých obrazovkách (např. mobil) zobrazit jeden příběh na řádek */
    }
}

/* CTA a Citát spojená Sekce */
.cta-quote {
    background-color: #FFFFFF;
    padding: 40px 20px;
    text-align: center;
    
  
}

/* Styl pro CTA část */
.cta {
    margin-bottom: 30px; /* Větší spodní odsazení pro oddělení od citátu */
}

.cta h3 {
    font-size: 24px;
    margin-bottom: 10px;
    
}

.cta p {
    font-size: 16px;
    margin-bottom: 20px;
    color: #555;
}

.btn-cta {
    padding: 10px 20px;
    background-color: #007BFF;
    color: white;
    border: none;
    border-radius: 4px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.3s;
}

.btn-cta:hover {
    background-color: #0C67C9;
}

/* Styl pro Citát část */
.quote blockquote {
    font-size: 20px;
    font-style: italic;
    margin: 0;
    padding: 0;
    color: #333;
    
    padding-left: 15px; /* Vnitřní odsazení citátu */
}

.quote p {
    margin-top: 10px;
    font-size: 16px;
    color: #555;
}




/* Klíčové snímky pro animaci "bounce" */
@keyframes bounce {
    0% {
        transform: translateY(0); /* Tlačítko na původní pozici */
    }
    30% {
        transform: translateY(-10px); /* Posun nahoru */
    }
    50% {
        transform: translateY(0); /* Vrať se zpět na původní pozici */
    }
    80% {
        transform: translateY(-10px); /* Jemné posunutí nahoru */
    }
    100% {
        transform: translateY(0); /* Vrať se zpět na původní pozici */
    }
}

/* Styl pro tlačítko */
.scroll-to-top {
    position: fixed;
    bottom: 80px;
    right: 20px;
    background-color: #6c757d; /* Šedá barva pozadí */
    color: white; /* Barva textu */
    border: 1px solid white;
    border-radius: 50%; /* Zaoblení do tvaru kruhu */
    width: 50px; /* Šířka tlačítka */
    height: 50px; /* Výška tlačítka */
    font-size: 24px; /* Velikost písma */
    z-index: 1000; /* Zajišťuje, že tlačítko bude nad ostatními prvky */
    opacity: 0; /* Výchozí průhlednost (neviditelné) */
    visibility: hidden; /* Skryté, nezabírá místo */
    transition: opacity 0.5s ease, visibility 0.5s ease; /* Přechod opacity a visibility */
    user-select: none;
}

/* Tlačítko je viditelné (při scrollu) */
.scroll-to-top.show {
    opacity: 0.8; /* Viditelné tlačítko */
    visibility: visible; /* Zobrazené v rozložení stránky */
    animation: bounce 3s infinite; /* Nekonečná animace skákání */
}

/* Tlačítko je skryté (při návratu nahoru) */
.scroll-to-top.hide {
    opacity: 0; /* Neviditelné tlačítko */
    visibility: hidden; /* Skryté z DOM */
}

.scroll-to-top:hover {
    background-color: #5a6268; /* Tmavší šedá při najetí myší */
}


/* Styl tlačítka podpory */
.support-btn {
    position: fixed;
    bottom: -60px; /* Umístíme mimo obrazovku na začátku */
    right: 20px;
    background-color: #007BFF; /* Modrá barva */
    color: white;
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    font-size: 24px;
    z-index: 1000;
    cursor: pointer;
    display: flex; /* Flex pro zarovnání ikony */
    justify-content: center; /* Horizontální zarovnání */
    align-items: center;
    transition: bottom 0.5s ease, transform 0.3s ease;
    user-select: none; 
}

.support-btn:hover {
    transform: scale(1.1); /* Efekt hoveru */
}

/* Animace tlačítka - výjezd zespod */
.show-support-btn {
    bottom: 20px; /* Zvednutí tlačítka zpět na obrazovku */
}

/* Styl chatového okna */
.support-chat {
    position: fixed;
    bottom: 5px; /* Posunuto do pravého dolního rohu */
    right: 20px;
    width: 50vw; /* Minimálně 40% šířky obrazovky */
    max-width: 500px; /* Maximální šířka */
  height: 60%; /* Nastavená výška pro scrollování */
    max-height:85%;
    background-color: #ffffff; /* Bílé pozadí */
    border: 1px solid #ccc;
    border-radius: 10px;
    display: none; /* Skryté na začátku */
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); /* Přidání stínu */
    overflow: hidden; /* Skrýt přetečení obsahu */
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease; /* Přidání přechodu opacity a transformace */
    transform: scale(0.9); /* Zmenšení při zavření */
    user-select: none; 
}


 .resolved-btn {
      background-color: #f44336; /* Červená */
      color: white;
      padding: 10px 20px;
      border: none;
      cursor: pointer;
      border-radius: 5px;
      font-size: 16px;
      position: relative;
     
  }

  .resolved-btn.resolved {
      background-color: #4CAF50; /* Zelená pro vyřešeno */
  }

  .resolved-btn:disabled {
   
      cursor: not-allowed;
  }
  
  .resolved-btn:hover::after {
    content: "Pokud kliknete na toto tlačítko, označíte tuto konverzaci jako vyřešenou. Jakmile bude konverzace označena za vyřešenou, již nebude možné na ni reagovat nebo ji znovu otevřít. Tímto označením uzavřete aktuální problém.";
    position: absolute;
    top: 40px; /* Pozice tooltipu nad tlačítkem */
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 8px;
    border-radius: 4px;
    font-size: 12px;
    z-index: 10000;
     white-space: normal; /* Zajišťuje zalamování textu */
    word-wrap: break-word; /* Umožňuje zalamování slov */
  max-width:350px;
   min-width:250px;
    
}
  
  
@media (max-width: 1024px) {
   .support-chat {
       width: 100%;
       margin-left: 20px;
       max-width: 70vw;
   }
}

@media (max-width: 768px) {
   .support-chat {
       width: 100%;
       margin-left: 20px;
       max-width: 88vw;
        bottom: 60px; 
         overflow: visible; 
   }
   
}

.support-chat.open {
    opacity: 1; /* Zobrazení při otevření */
    transform: scale(1); /* Zvětšení na plnou velikost */
}

.support-chat.close {
    opacity: 0; /* Skrytí při zavření */
    transform: scale(0.9); /* Zmenšení před zavřením */
}

/* Chatový záhlaví */
.chat-header {
    background-color: #007BFF; /* Modrá barva */
    color: white;
    padding: 10px;
    border-radius: 10px 10px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Chatové tělo */
.chat-body {
    padding: 10px;
    height: calc(100% - 80px); /* Odečtení výšky hlavičky a patičky */
    overflow-y: auto; /* Přidání scrollování */
    border-top: 1px solid #ddd; /* Horní ohraničení pro oddělení */
    display: flex;
    flex-direction: column; /* Uložení dětí vertikálně */
}
/* Kontejner zpráv */
#messagesContainer {
    margin-bottom: 10px; /* Prostor mezi zprávami a textarea */
    flex-grow: 1; /* Zprávy zabírají zbývající prostor */
    overflow-y: auto; /* Scrollování pro zprávy */
    border: 1px solid #ddd; /* Ohraničení pro zobrazení zpráv */
    border-radius: 5px; /* Zaoblení rohů pro vzhled */
    padding: 10px; /* Padding pro zprávy */
    font-size: 13px;
    white-space: pre-wrap; /* Zachování nových řádků a mezer */
    word-wrap: break-word; /* Zalamování dlouhých slov */
    display: flex; /* Používáme flexbox pro vertikální uspořádání */
    flex-direction: column; /* Zprávy budou zobrazeny vertikálně (po sobě) */
}

/* Styl zprávy uživatele */
.user-message {
    background-color: #007BFF; /* Barva zprávy uživatele */
    color: white;
    padding: 8px;
    border-radius: 5px;
    margin-bottom: 5px;
    align-self: flex-start; /* Zarovnání zprávy uživatele vlevo */
    max-width: 80%; /* Maximální šířka pro zprávu uživatele */
    word-wrap: break-word; /* Zlomení dlouhých slov */
    font-size: 14px;
    display: block; /* Zajištění, že každá zpráva bude na novém řádku */
    white-space: pre-wrap; /* Zachování nových řádků a mezer */
}

/* Styl zprávy operátora */
.operator-message {
    background-color: #f1f1f1; /* Barva zprávy technika */
    color: black;
    padding: 6px;
    border-radius: 5px;
    margin-bottom: 5px;
    margin-left: auto; /* Posunutí celé zprávy doprava */
    max-width: 80%;
    word-wrap: break-word;
    font-size: 14px;
    display: block; /* Zajištění, že každá zpráva bude na novém řádku */
    text-align: right; /* Zarovnání textu doprava */
}



/* Kontejner pro textové pole a tlačítko */
.input-container {
    display: flex; /* Flexbox pro zarovnání textarey a tlačítka */
    margin-top: auto; /* Zarovnání dolů */
}

 .input-container textarea {
    width: 100%; /* Šířka textového pole */
     min-height: 40px; /* 2 řádky výchozí výška */
      max-height: 120px;
       overflow-y: auto; /* Povolení svislého scrollu při překročení max-height */
      resize: none; /* Zákaz ruční změny velikosti */
    box-sizing: border-box;
    padding: 10px;
    margin-right: 10px; /* Prostor mezi textareou a tlačítkem */
    border-radius: 5px;
    border: 1px solid #ccc; /* Ohraničení pro textové pole */
    resize: none; /* Zabránění změně velikosti textového pole */
}

#sendMessage {
    padding: 10px 15px; /* Přidání paddingu pro lepší vzhled */
    background-color: #007BFF;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    max-height: 50px;
}

#sendMessage:hover {
    background-color: #0056b3; /* Tmavší modrá při hoveru */
}

/* Stavový text */
.status {
    font-size: 12px;
}

#operatorStatus {
    color: #008000;
    font-weight: bold;
}

/* Chatový zápatí */
.chat-footer {
    background-color: #f1f1f1;
    padding: 5px;
    border-radius: 0 0 10px 10px;
    text-align: center;
}

/* Umístění odkazu úplně dolů */
.privacy-policy {
    font-size: 12px;
    margin-top: auto;
    padding-bottom: 10px;
    text-align: center;
}

/* Tlačítko zavření */
.close-btn {
    cursor: pointer;
    font-size: 24px;
}

/* Animace při načtení tlačítka */
@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: translateY(15px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}



/* registrace/prihlaseni */

#error-message {
    color: red; /* Červená barva pro chyby */
    margin-bottom: 20px; /* Mezery dole */
    text-align: center; /* Centrovat text */
}

.error-message {
    color: red; /* Červená pro chyby */
    margin-bottom: 20px; /* Mezery dole */
    text-align: center; /* Centrovat text */
}

.container1 {
    max-width: 400px; /* Maximální šířka pro formulář */
    margin: 200px auto; /* Centrování */
    padding: 20px;
    border-radius: 8px; /* Zaoblení rohů */
    background-color: #f9f9f9; /* Světle šedé pozadí */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Stín pro hloubku */
user-select: none; 
text-align:center;
}

.container1 h1 {
    text-align: center;
    margin-bottom: 20px;
    font-family: 'Dancing Script', cursive;
    color: #333;
}

.input-row {
    margin-bottom: 15px; /* Mezery mezi inputy */
font-size:16px;
}

.input-row label{
   
font-size:12px;
}

.input-row input {
    width: 100%; /* Šířka pro každý input */
    padding: 10px; /* Padding uvnitř inputu */
    border: 1px solid #ccc; /* Výchozí šedý obrys */
    border-radius: 5px; /* Zaoblení rohů */
    transition: border-color 0.3s ease; /* Přechod pro barvu okraje */
}

.input-row [type="checkbox"] {
    width: 30px; 
}

/* Přidání přechodu při focusu */
.input-row input:focus {
    border-color: #007BFF; /* Barva okraje při focusu */
    outline: none; /* Odstranění defaultního obrysu */
}

.submit-button {
    width: 100%; /* Tlačítko bude mít 100% šířku */
    padding: 10px; /* Padding uvnitř tlačítka */
    border: none; /* Bez okraje */
    border-radius: 5px; /* Zaoblení rohů */
    background-color: #007BFF; /* Barva tlačítka */
    color: white; /* Barva textu */
    font-size: 16px; /* Velikost textu */
    cursor: pointer; /* Ukazatel ruky při hoveru */
    transition: background-color 0.3s ease; /* Hladký přechod barvy */
 text-decoration: none; 
}

/* Změna barvy tlačítka při hoveru */
.submit-button:hover {
    background-color: #0056b3; /* Tmavší modrá barva */
}

 

#toggle-link {
    text-align: center; /* Centrovat text */
    margin-top: 15px; /* Mezery nad textem */
}

#toggle-link a {
    color: #007BFF; /* Barva odkazu */
    text-decoration: none; /* Bez podtržení */
}

#toggle-link a:hover {
    text-decoration: underline; /* Podtržení při hoveru */
}

.forgota a {

    color: #007BFF; /* Barva odkazu */
    text-decoration: none; /* Bez podtržení */
}

.forgota {
margin-top:10px;
    color: #007BFF; /* Barva odkazu */
    text-decoration: none; /* Bez podtržení */
}



/* Obnova hesla - kontejner */
.reset-container {
   width: 400px; /* Stejná maximální šířka jako u přihlášení/registrace */
    margin: 200px auto; /* Centrovaný formulář */
    padding: 20px;
    border-radius: 8px; /* Zaoblené rohy */
    background-color: #f9f9f9; /* Světle šedé pozadí */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Stín */
user-select: none; 
}

/* Nadpis formuláře */
.reset-container h1 {
    text-align: center;
    margin-bottom: 20px;
    font-family: 'Dancing Script', cursive; /* Stejný font pro konzistenci */
    color: #333;
}

/* Řádek pro inputy */
.reset-input-row {
    margin-bottom: 15px; /* Stejné mezery jako u přihlášení/registrace */
    font-size: 16px;
}

/* Styl pro inputy */
.reset-input-row input {
    width: 100%; /* Stejná šířka inputu */
    padding: 10px; /* Padding uvnitř inputu */
    border: 1px solid #ccc; /* Výchozí šedý obrys */
    border-radius: 5px; /* Zaoblení rohů */
    transition: border-color 0.3s ease; /* Přechod pro barvu okraje */
}

/* Přidání přechodu při focusu */
.reset-input-row input:focus {
    border-color: #007BFF; /* Modrý okraj při focusu */
    outline: none; /* Odstranění defaultního obrysu */
}

/* Tlačítko pro odeslání */
.reset-submit-button {
    width: 100%; /* Tlačítko bude mít 100% šířku */
    padding: 10px; /* Padding uvnitř tlačítka */
    border: none; /* Bez okraje */
    border-radius: 5px; /* Zaoblení rohů */
    background-color: #007BFF; /* Barva tlačítka */
    color: white; /* Barva textu */
    font-size: 16px; /* Velikost textu */
    cursor: pointer; /* Ukazatel ruky při hoveru */
    transition: background-color 0.3s ease; /* Přechod barvy */
}

/* Změna barvy tlačítka při hoveru */
.reset-submit-button:hover {
    background-color: #0056b3; /* Tmavší modrá barva */
}

/* Styl odkazu zpět na přihlášení */
.reset-forgot-link {
    text-align: center; /* Centrovaný text */
    margin-top: 15px; /* Odstup nad textem */
}

.reset-forgot-link a {
    color: #007BFF; /* Modrý text */
    text-decoration: none; /* Bez podtržení */
}

.reset-forgot-link a:hover {
    text-decoration: underline; /* Podtržení při hoveru */
}


/* Reset hesla - kontejner */
.reset-password-container {
    max-width: 400px; /* Stejná maximální šířka jako u přihlášení/registrace */
    margin: 200px auto; /* Centrovaný formulář */
    padding: 20px;
    border-radius: 8px; /* Zaoblené rohy */
    background-color: #f9f9f9; /* Světle šedé pozadí */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Stín */
user-select: none; 
text-align:center;
}

/* Nadpis formuláře */
.reset-password-container h1 {
    text-align: center;
    margin-bottom: 20px;
    font-family: 'Dancing Script', cursive; /* Stejný font pro konzistenci */
    color: #333;
}

/* Řádek pro inputy */
.reset-password-input-row {
    margin-bottom: 15px; /* Stejné mezery jako u přihlášení/registrace */
    font-size: 16px;
}

/* Styl pro inputy */
.reset-password-input-row input {
    width: 100%; /* Stejná šířka inputu */
    padding: 10px; /* Padding uvnitř inputu */
    border: 1px solid #ccc; /* Výchozí šedý obrys */
    border-radius: 5px; /* Zaoblení rohů */
    transition: border-color 0.3s ease; /* Přechod pro barvu okraje */
}

/* Přidání přechodu při focusu */
.reset-password-input-row input:focus {
    border-color: #007BFF; /* Modrý okraj při focusu */
    outline: none; /* Odstranění defaultního obrysu */
}

/* Tlačítko pro odeslání */
.reset-password-submit-button {
    width: 100%; /* Tlačítko bude mít 100% šířku */
    padding: 10px; /* Padding uvnitř tlačítka */
    border: none; /* Bez okraje */
    border-radius: 5px; /* Zaoblení rohů */
    background-color: #007BFF; /* Barva tlačítka */
    color: white; /* Barva textu */
    font-size: 16px; /* Velikost textu */
    cursor: pointer; /* Ukazatel ruky při hoveru */
    transition: background-color 0.3s ease; /* Přechod barvy */
}

/* Změna barvy tlačítka při hoveru */
.reset-password-submit-button:hover {
    background-color: #0056b3; /* Tmavší modrá barva */
}




.success-message {
    color: #fff;
    background-color: #28a745; /* Zelená barva */
    padding: 15px;
    border-radius: 5px;
    text-align: center;
    margin: 10px;
    font-size: 16px;
}

.success-message a {
    color: #fff; /* Bílá barva odkazu */
    text-decoration: underline;
}


.mobileview{
display:none;
}

.mobileview2{
display:block;
}

.login-menu{

}


@media (max-width: 768px) {
   
.mobileview{
display:block;
}
.mobileview2{
display:none;
}

.reset-container {
   width: 100%; /* Stejná maximální šířka jako u přihlášení/registrace */

 }
   }


#pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px 0;
}

#pagination a,
#pagination span {
    margin: 0 5px;
    padding: 8px 12px;
    text-decoration: none;
    font-size: 14px;
    color: #007bff;
    border: 1px solid #007bff;
    border-radius: 5px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

#pagination a:hover {
    background-color: #007bff;
    color: white;
}

#pagination span {
    background-color: #f0f0f0;
    color: #666;
    cursor: default;
}

#pagination a:disabled {
    color: #ccc;
    border-color: #ccc;
    pointer-events: none;
}

#pagination a:first-child,
#pagination a:last-child {
    font-weight: bold;
}

/* Aktivní stránka */
#pagination span {
    background-color: #007bff;
    color: white;
}

#pagination a:focus,
#pagination a:hover {
    outline: none;
}




/* Základní resetování a fonty */



/* Hlavička profilu */
.profile-header1 {
    text-align: center;
    margin-bottom: 20px;
}

.profile-header1 h1 {
    font-size: 28px;
    font-weight: bold;
    display: inline-block;
    margin-right: 10px;
}

.online-status1 {
    font-size: 16px;
    font-weight: bold;
    color: green;
    animation: blink1 1.5s infinite;
}
@keyframes blink1 {
    0% { color: green; }
    50% { color: #ffcd00; }
    100% { color: green; }
}




.offline-status11 {
    font-size: 16px;
    font-weight: bold;
    color: #D65C5C;

}
.offline-status11a {
    font-size: 11px;
    font-weight: 400;
  

}



/* Hlavní sekce profilu */
profile-content1 {
    display: flex;
    justify-content: space-between; 
    align-items: flex-start; 
    gap: 20px;
    flex-wrap: wrap; /* Povolení wrap pro mobilní zařízení */
}

/* Sekce galerie fotek */
.photo-section1 {
    flex: 1 1 100%; /* Na malých obrazovkách bude mít celou šířku */
    text-align: center;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.main-photo1 {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 50%;
    
    overflow: hidden;
    border-radius: 10px;
    margin-bottom: 20px
    
}

/* Nastavení fotek */
.main-photo1 img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 10px;
    cursor: pointer;
    transition: transform 0.3s ease;
}


/* Miniatury fotek */
/* Miniatury fotek */
.photo-thumbnails1 {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap; /* Povolení wrap pro malé obrazovky */
    margin-top: 10px;
}

.photo-thumbnails1 img {
    width: 45px;
    height: 45px;
    object-fit: cover;
    border-radius: 5px;
    cursor: pointer;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.photo-thumbnails1 img:hover {
    transform: scale(1.1);
    opacity: 0.9;
}

/* Navigační šipky pro hlavní fotku i full-screen */
.nav-arrow1 {
    position: absolute;
    top: 50%;
    font-size: 2em;
    color: white;
    cursor: pointer;
    z-index: 10;
    transform: translateY(-50%);
    transition: transform 0.3s ease, background-color 0.3s ease, opacity 0.3s ease;  
    padding:10px;
     border-radius:10px;
}

.left1 {
    left: 10px;  /* Posune šipku doleva */
}

.right1 {
    right: 10px;  /* Posune šipku doprava */
}

/* Efekt při hoveru na šipky */
.nav-arrow1:hover {
    transform: translateY(-50%) scale(1.2);  /* Zvýšení šipky při hoveru */
    background-color: rgba(0, 0, 0, 0.5);  /* Poloprůhledné pozadí */
    opacity: 1;  /* Plná viditelnost */
    border-radius:10px;
   
}
/* Pro fullscreen modální okno */
/* Modální okno pro full screen */
#fullscreen-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    visibility: hidden;  /* Skryté, dokud nebude otevřeno */
    z-index: 10000; /* Ujistíme se, že modální okno je nad navbar */
}
#fullscreen-modal.show {
    visibility: visible;  /* Zobrazení modálního okna */
}

#fullscreen-photo {
    max-width: 90%;
    max-height: 90%;
    border-radius: 10px;
}



/* Styl pro zavírací křížek */
.close-button {
    position: absolute;
    top: 10px;
    right: 15px;
    color: white;
    font-size: 24px;
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 5px 10px;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.close-button:hover {
    background-color: rgba(0, 0, 0, 0.8);
}




/* Celkové nastavení pro match-stats1 */
.match-stats1 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 6px;
    padding: 6px;
    background-color: #f7f7f7;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 100%;
    margin: 0 auto;
    position: relative; /* Nastavení pro stacking context */
   
}

/* Nadpis pro sekci shody */
.match-stats1 h2 {
    font-size: 0.95em;
    margin-bottom: 6px;
    text-align: center;
    width: 100%;
    font-weight: bold;
}

/* Nastavení pro jednotlivé match-bar1 */
.match-bar1 {
    width: 48%;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    padding: 8px;
    position: relative; /* Zajišťuje pozici pro tooltip */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 0.85em;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    cursor: pointer;
   
}
.match-bar1:hover {
    
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* Změna stínu */
    background-color: #f4f4f4; /* Změna barvy pozadí */
}

.match-bar11 {
    width: 100%;
    background-color: #F7F7F7;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    padding: 8px;
    position: relative; /* Zajišťuje pozici pro tooltip */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 0.85em;
    z-index: 1; /* Zajišťuje správné vrstvení */
    cursor: pointer;
   
}





/* Názvy jednotlivých sekcí */
.match-label1 {
    font-size: 12px;
    font-weight: bold;
    color: #444;
    margin-bottom: 4px;
}

/* Progres bar */
.progress-container {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 3px;
}



.progress1 {
    position: relative;
    width: 70%;
    height: 5px;
    background-color: #e0e0e0;
    border-radius: 5px;
    overflow: hidden;
}

.progress-bar1 {
    height: 100%;
    width: 0%;
    background-color: hsl(0, 100%, 50%);
    border-radius: 10px;
    transition: background-color 0.5s ease-out;
}

.percentage {
    font-size: 0.8em;
    font-weight: bold;
    color: #333;
}

/* Tooltip (modální okno) */

.tooltip1 {
    display: none; /* Výchozí stav skrytý */
     position: absolute;
    top: 100%;
    left: 0;
    background-color: #333;
    color: #fff;
    padding: 8px;
    border-radius: 5px;
    max-width: 500px;
    font-size: 0.75em;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
      z-index: 10000; /* Tooltip bude mít vyšší z-index než .match-bar1 */
    white-space: normal;
    opacity: 0;
    
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}



/* Specifické nastavení pro tooltip při hoveru */
.match-bar1:hover .tooltip1 {
   opacity: 1;
 
}
/* Aktivace tooltipu při kliknutí */
.match-bar1.active-tooltip .tooltip1 {
    display: block;
    opacity: 1;
   
}


.info-icon {
    font-size: 1.0em; /* Velikost písma pro otazník */
    color: #A1A1A1; /* Barva otazníku, můžete upravit dle potřeby */
    cursor: pointer; /* Změní kurzor na "ručičku" */
    position: absolute; /* Umožňuje umístit otazník absolutně */
    right: 10px; /* Umístí otazník na pravý okraj rodičovského prvku */
    top: 10px; /* Umístí otazník vertikálně do středu */
    transform: translateY(-50%); /* Ujistí se, že otazník je přesně ve středu */
    font-weight: 400;
}




/* Specifické nastavení pro celkovou shodnost */
.match-bar1.total-match {
    width: 100%;
    border: 1px solid #D65C5C;
    padding: 12px;
    box-shadow: none;
}

/* Úprava názvu pro celkovou shodnost */
.match-label1.total-match {
    font-size: 14px;
    color: #D65C5C;
    font-weight: bold;
}

/* Tooltip pro celkovou shodnost */
.tooltip1.total-match {
    max-width: 300px;
    font-size: 0.85em;
}

.percentage.total-match {
    font-size: 1.2em;
    font-weight: bold;
    color: #333;
}

.progress1.total-match{
    position: relative;
    width: 100%;
    height: 8px;
    background-color: #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
}




/* Responzivita pro mobilní zařízení */
@media (max-width: 768px) {
 /* Ujistěte se, že z-index pro tooltip je vyšší než pro .match-bar1 */
    .tooltip1 {
        z-index: 99999;
        position:absolute;
        
    }
    .match-stats1 {
        padding: 8px;
        gap: 8px;
    }

    .match-bar1 {
        width: 100%;
        font-size: 0.8em;
        padding: 6px;
           z-index: 1;
           position:relative;
    }

    /* Aktivace tooltipu při kliknutí na mobilu */
    .match-bar1.active-tooltip .tooltip1 {
        display: block;
        position:absolute;
             z-index: 99999;
    }

    .match-bar1.active-tooltip {
        transform: scale(1.05);
        z-index: 2;
    }
}

@media (max-width: 480px) {
    .match-stats1 {
        padding: 6px;
    }

    .match-label1 {
        font-size: 11px;
    }

    .percentage {
        font-size: 0.75em;
    }

    .progress-container {
        flex-direction: column;
        align-items: flex-start;
    }

    .progress1 {
        width: 100%;
    }

    .progress-bar1 {
        width: 0%;
    }
}




  

/* Informace o uživateli */
.user-info1 {
    padding: 20px;
    margin-top: 20px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.user-info1 h2 {
    font-size: 20px;
    margin-bottom: 10px;
}

.user-info1 p {
    font-size: 16px;
    margin-bottom: 8px;
}



/* Tlačítko pro scroll to top */
.scroll-to-top1 {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #4caf50;
    color: white;
    font-size: 20px;
    border: none;
    border-radius: 50%;
    padding: 10px;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.scroll-to-top1:hover {
    transform: scale(1.1);
}

/* Responzivní design pro mobilní zařízení */
@media (max-width: 768px) {
    .profile-content1 {
        flex-direction: column;
        align-items: center;
    }

    .photo-section1 {
        flex: 1 1 100%;
        width: 100%;
    }

    .main-photo1 {
        max-width: 90%;
    }

    .photo-thumbnails1 {
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
        width: 100%;
    }

    .photo-thumbnails1 img {
        width: 50px;
        height: 50px;
    }
}




  .notification-icon {
           position: relative;
    width: 48px; /* Nastavte požadovanou šířku */
    height: 48px; /* Nastavte požadovanou výšku */
    padding: 5px;
    display: inline-block;
    vertical-align: middle;
    margin-right:5px;
        }
        


 .notification-icon1 {
         
             position: relative;
    display: inline-block;
    border-radius: 50%; /* Zaoblení kontejneru */
    width: 100%; /* Přizpůsobení velikosti rodiči */
    height: 100%;
    transition: border 0.3s ease, background-color 0.3s ease; /* Hladký přechod */
     border: 1px solid transparent; /* Nastavíme průhledný border jako výchozí */
    background-color: transparent; /* Výchozí pozadí */
    cursor: pointer;
     
        }

        .notification-icon1:hover {
           border: 1px solid #EDEDED; /* Světle šedý okraj */
           background-color: #F5F5F5; /* Lehce tmavší šedá při najetí */
        }
        
        .notification-icon1 img {
        top:2px;
    width: 32px; /* Velikost obrázku */
    height: 32px;
    display: block;
    margin: auto; /* Vycentrování obrázku uvnitř */
}

      .notification-count {
    position: absolute;
    top: -5px;
    right: 0px;
    background-color: red;
    color: white;
    border-radius: 50%;
    font-size: 10px;
    font-weight: bold;
    padding: 0.3em; /* Dynamické polstrování v em jednotkách */
    min-width: 1.5em; /* Zaručí minimální kruhový tvar */
    min-height: 1.5em; /* Zaručí minimální kruhový tvar */
    display: flex;
    align-items: center;
    justify-content: center;
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Jemný stín */
    line-height: 1; /* Zabrání roztažení textu */
}

@keyframes bounceIn {
    0% { transform: scale(0); opacity: 0; }
    60% { transform: scale(1.3); opacity: 1; }
    80% { transform: scale(0.8); }
    90% { transform: scale(1.1); }
    100% { transform: scale(1); }
}



@keyframes vibrate {
    0% { transform: translateX(0); }
    25% { transform: translateX(-3px); }
    50% { transform: translateX(3px); }
    75% { transform: translateX(-3px); }
    100% { transform: translateX(0); }
}

#notification-countq.vibrate {
    animation: vibrate 0.5s ease-in-out;
}

#notification-countq.bounceIn {
    animation: bounceIn 0.7s ease-in-out; /* Animace bounceIn, ale nebude se přidávat po vibraci */
}

.notifications-dropdown {
    display: none;
    position: absolute;
    top: 60px;
    right: 0;
   background-color: rgba(255, 255, 255, 0.9);
    border: 1px solid #ddd;
    width: 300px;
    height: auto;
    max-height: 77vh;
    overflow-y: auto;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 100;
    padding: 0px;
    border-radius: 8px; /* Zaoblené rohy */
    
}



/* Responzivní design pro mobilní zařízení */
@media (max-width: 768px) {
.notifications-dropdown {
 width:100%;
}

}

/* Styl moderní rolovací lišty */
.notifications-dropdown::-webkit-scrollbar {
    width: 8px; /* Šířka svislé lišty */
}

.notifications-dropdown::-webkit-scrollbar-track {
    background: rgba(240, 240, 240, 0.8); /* Barva pozadí dráhy */
    border-radius: 8px;
}

.notifications-dropdown::-webkit-scrollbar-thumb {
    background-color: #888; /* Barva posuvníku */
    border-radius: 8px;
    border: 2px solid rgba(255, 255, 255, 0.7); /* Oddělení posuvníku od okraje */
}

.notifications-dropdown::-webkit-scrollbar-thumb:hover {
    background-color: #555; /* Barva posuvníku při hoveru */
}



        .notifications-dropdown ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .notifications-dropdown li {
            padding: 15px;
            border-bottom: 1px solid #f0f0f0;
        }

        .notifications-dropdown li:last-child {
            border-bottom: none;
        }

      

       .read {
    cursor: pointer;
    transition: background-color 0.3s;  /* Plynulý přechod pro hover efekt */
} 

        .read:hover {
            background-color: #f1f1f1;
            cursor: pointer;
        }
        

.unread {
    background-color: #FFFBFB;  /* Světle fialové pozadí pro nepřečtené zprávy */
    font-weight: 500;  /* Písmo tučně pro nepřečtené zprávy */
    font-size:13px;
    border-left: 5px solid #FF0000;  /* Barevný levý okraj pro zvýraznění */
   
    transition: background-color 0.3s, box-shadow 0.3s;  /* Plynulý přechod pro hover efekt */
     cursor: pointer;
}

/* Styl pro nepřečtené zprávy při hover */
.unread:hover {
    background-color: #DEEEFF;  /* Tmavší fialová při hover */
    box-shadow: 0 4px 12px rgba(206, 220,255, 0.5);  /* Zvýšení stínu při hover */
     cursor: pointer;
}

.no-notifications{
text-align:center;
}



/* Kontejner pro hlavní odkaz */
.message-icon {
margin-left:-5px;
    position: relative;
    width: 48px; /* Nastavte požadovanou šířku */
    height: 48px; /* Nastavte požadovanou výšku */
    padding: 5px;
    display: inline-block;
    vertical-align: middle;
 
}

/* Kontejner pro ikonu */
.message-icon-container {
    position: relative;
    display: inline-block;
    border-radius: 50%; /* Zaoblení kontejneru */
    width: 100%; /* Přizpůsobení velikosti rodiči */
    height: 100%;
 transition: border 0.3s ease, background-color 0.3s ease; /* Hladký přechod */
     border: 1px solid transparent; /* Nastavíme průhledný border jako výchozí */
    background-color: transparent; /* Výchozí pozadí */
   
    cursor: pointer;
}

/* Hover efekt pro kontejner */
.message-icon-container:hover {
    border: 1px solid #EDEDED; /* Světle šedý okraj */
           background-color: #F5F5F5; /* Lehce tmavší šedá při najetí */
}



/* Styl pro samotný obrázek */
.message-icon img {
    width: 34px; /* Velikost obrázku */
    height: 34px;
    display: block;
    margin: auto; /* Vycentrování obrázku uvnitř */
}
/* Počet zpráv (notifikační odznak) */
.message-count {
    position: absolute;
    top: -5px;
    right: -5px;
    background-color: red;
    color: white;
    border-radius: 50%;
    font-size: 10px;
    font-weight: bold;
    padding: 0.3em;
    min-width: 1.5em;
    min-height: 1.5em;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1; /* Zabrání vertikálnímu roztahování textu */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Jemný stín */
}


/* Počet zpráv (notifikační odznak) */
.support-message-count {
    position: absolute;
    top: -5px;
    right: -5px;
    background-color: red;
    color: white;
    border-radius: 50%;
    font-size: 12px;
    font-weight: bold;
    padding: 0.3em;
    min-width: 2em;
    min-height: 2em;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1; /* Zabrání vertikálnímu roztahování textu */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Jemný stín */
}
/* Animace pro "bounce-in" efekt */
@keyframes bounceIn {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    60% {
        transform: scale(1.3);
        opacity: 1;
    }
    80% {
        transform: scale(0.8);
    }
    90% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

/* Animace pro "vibrace" efekt */
@keyframes vibrate {
    0% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(-3px);
    }
    50% {
        transform: translateX(3px);
    }
    75% {
        transform: translateX(-3px);
    }
    100% {
        transform: translateX(0);
    }
}

/* Třídy pro animace */
.message-count.vibrate {
    animation: vibrate 0.5s ease-in-out;
}

.message-count.bounceIn {
    animation: bounceIn 0.7s ease-in-out;
}


/* Třídy pro animace */
.support-message-count.vibrate {
    animation: vibrate 0.5s ease-in-out;
}

.support-message-count.bounceIn {
    animation: bounceIn 0.7s ease-in-out;
}
  
        
        #hearti{
          color:red;
          font-size:15px;
        }
        
        /* Vzory pro zarovnání do středu */
.notification-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
}

.notification-link .profile-imgnotif {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: 10px;
     object-fit: cover; /* Zajistí, že obrázek bude vyplňovat oblast bez deformace */
    object-position: center; /* Upraví zarovnání obrázku uvnitř oblasti */
    display: block; 
}

.notification-link .text-container {
    display: flex;
    flex-direction: column;
}

.text-container b {
    font-size: 14px;
    color: #333;
    margin-bottom: 2px;
}

.text-container .description {
    font-size: 14px;
    color: #666;
    display: flex;
    align-items: center;
}

.text-container .description i {
    color: red;
    margin-left: 4px;
}

.datea {
    font-size: 12px;
    color: #007BFF; /* Modré datum */
    margin-top: 6px; /* Mezera nad datem */
    font-weight:500;
}



@keyframes spinnotif {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.spinnernotif {

    border: 2px solid rgba(0, 0, 0, 0.1);
    border-left-color: #007BFF;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    animation: spinnotif 1s linear infinite;
    margin: 5px auto; /* Pro zarovnání na střed */
}

      
        
        
  /* Cookie Banner */
.cookie-banner {
    position: fixed;
    bottom: 10px;
    left: 10px;
    right: 10px;
    background-color: rgba(50, 50, 50, 0.95);
    color: #fff;
    padding: 15px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: space-between;
   font-size:13px;
   z-index:99999;
   max-width:80%;
   margin:auto;
   
     display: none; /* Banner bude na začátku skrytý */
    opacity: 0; /* Začíná s nulovou opacitou */
    transform: translateY(20px); /* Banner je na začátku mírně posunutý dolů */
    animation: showBanner 0.5s forwards; /* Definuje animaci */
    animation-delay: 2s; /* Zpoždění 2 sekundy, než začne animace */
}

/* Animace pro zobrazení banneru */
@keyframes showBanner {
    0% {
        opacity: 0; /* Na začátku je banner neviditelný */
        transform: translateY(20px); /* Na začátku je banner níže */
    }
    100% {
        opacity: 1; /* Banner se stává plně viditelným */
        transform: translateY(0); /* Banner se dostane na svou původní pozici */
    }
}

.cookie-banner p{
padding:10px;

}
.cookie-buttons {
    display: flex;
    gap: 10px;
     
}

.cookie-button {
    padding: 8px 18px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    border: 1px solid #FFFFFF;
}

.accept-all {
    background-color: #E13240;
    color: white;
    border: 1px solid #AE1E2A;
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.essential-only {
    background-color: #B0B0B0;
    color: white;
    border: 1px solid #747474;
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.customize {
    background-color: #007BFF;
    color: white;
     border: 1px solid #0060C8;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.cookie-button:hover {
    opacity: 0.9;
     box-shadow: 0 4px 10px rgba(0, 0, 0, 1);
}

/* Modal */
.cookie-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    align-items: center;
    justify-content: center;
    z-index:99999;
}

.cookie-modal-content {
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    max-width: 400px;
    width: 90%;
    text-align: center;
    font-size:14px;
    z-index:99999;
}

.cookie-options {
    text-align: left;
    margin-top: 10px;
}

.cookie-options label {
    display: block;
    margin: 10px 0;
    cursor: pointer;
}

.save {
    background-color: #007BFF;
    color: white;
    padding: 10px 20px;
    border-radius: 4px;
    margin-top: 20px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.save:hover {
    background-color: #0062CB;
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0);
}



/* Pro obrazovky menší než 768px */
@media (max-width: 768px) {
    .cookie-banner {
        flex-direction: column; /* Obsah banneru na menších obrazovkách ve sloupci */
        font-size: 12px; /* Zmenší velikost textu */
        max-width: 90%; /* Banner zabere více prostoru */
    }

    .cookie-buttons {
        gap: 5px; /* Zmenší mezeru mezi tlačítky */
    }

    .cookie-button {
        padding: 6px 8px; /* Zmenší padding tlačítek */
        font-size: 11px; /* Zmenší text tlačítek */
    }
}

/* Pro obrazovky menší než 480px */
@media (max-width: 480px) {
    .cookie-banner {
        font-size: 11px; /* Ještě menší text */
        padding: 10px; /* Menší padding */
    }

    .cookie-button {
        font-size: 10px; /* Ještě menší text tlačítek */
        padding: 5px 6px; /* Menší padding tlačítek */
    }
}




 .bottom-bar {
   display: none;
 }
@media (max-width: 768px) { 
    .bottom-bar {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 50px;
       background-color: rgba(255, 255, 255, 0.9); /* Pozadí lišty */
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0px 20px;
        z-index: 500; /* Ujistíme se, že lišta je nad obsahem */
        box-sizing: border-box;
    }

    /* Přidáme padding pro hlavní obsah, aby lišta nezakrývala obsah */
    body {
    display: block;
    grid-template-rows:auto;
        padding-bottom: 50px; /* Vytvoří prostor pod obsahem pro lištu */
    }
    
 
    .mesagesmobile,
    .profile-img,
    .message-icon,
    .message-icon-container{
    display: none;
    }
    
    .support-btn{
  bottom: 61px !important;
    }
    
    
    .scroll-to-top{
    bottom:120px;
    
    }
    }
    
    .profile-img1 {
   
    width: 35px;
    height: 35px;
    border-radius: 50%; /* Kulatý tvar */
    cursor: pointer;
    margin-right: 5px;
    object-fit: cover; /* Zachová poměr stran a vyplní kruh */
    object-position: center; /* Zaměření na střed */
}

    
/* Kontejner pro hlavní odkaz */
.message-icon1 {
margin-left:-5px;
    position: relative;
    width: 40px; /* Nastavte požadovanou šířku */
    height: 40px; /* Nastavte požadovanou výšku */
    padding: 5px;
   
    display: inline-block;
    vertical-align: middle;
 
}

/* Kontejner pro ikonu */
.message-icon-container1 {
    position: relative;
    display: inline-block;
    border-radius: 50%; /* Zaoblení kontejneru */
    width: 100%; /* Přizpůsobení velikosti rodiči */
    height: 100%;
 transition: border 0.3s ease, background-color 0.3s ease; /* Hladký přechod */
     border: 1px solid transparent; /* Nastavíme průhledný border jako výchozí */
    background-color: transparent; /* Výchozí pozadí */
   
    cursor: pointer;
}