/* Přidání fontu Archicoco */
@font-face {
    font-family: 'Archicoco';
    src: url('fonts/Archicoco.otf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* Reset základních stylů */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Základní styl pro HTML a tělo stránky */
body,
html {
    height: 100%;
    font-family: 'Montserrat', Arial, sans-serif;
    scroll-behavior: smooth;
    /* Plynulý posun */
}

/* Základní styl pro překryv */
.alert-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    /* Poloprůhledný tmavý překryv */
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: hidden;
    /* Skryté ve výchozím stavu */
    opacity: 0;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 1000;
    /* Vysoké z-index pro překrytí všech prvků */
}

/* Základní styl alertu */
.alert {
    position: fixed;
    top: -100px;
    /* Skrytý mimo obrazovku */
    left: 50%;
    transform: translateX(-50%);
    padding: 15px 30px;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    font-size: 1.2em;
    z-index: 1000;
    opacity: 0;
    transition: top 0.5s ease, opacity 0.5s ease;
}

#customAlert {
    position: fixed;
    top: -100px;
    /* Začíná mimo obrazovku nahoře */
    left: 50%;
    transform: translateX(-50%);
    width: 320px;
    padding: 15px 30px;
    background: #4caf50;
    /* Zelené pozadí pro úspěch */
    color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    text-align: center;
    z-index: 1000;
    opacity: 0;
    transition: top 0.5s ease, opacity 0.5s ease;
    /* Animace */
    display: flex;
    flex-direction: column;
    align-items: center;
}

#customAlert.show {
    top: 20px;
    /* Konečná pozice, viditelná */
    opacity: 1;
    /* Zviditelnění alertu */
}

#customAlert p {
    margin: 0;
    padding: 10px 0;
    font-size: 16px;
    line-height: 1.4;
}

#customAlert button {
    padding: 8px 16px;
    background-color: #007bff;
    color: #ffffff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    margin-top: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease;
}

#customAlert button:hover {
    background-color: #0056b3;
}

#customAlert button:active {
    transform: scale(0.95);
    /* Mírné zmenšení při kliknutí */
}


/* Animace slide-in */
.alert.show {
    top: 20px;
    /* Viditelná pozice */
    opacity: 1;
}

/* Různé typy alertů */
.alert.info {
    background-color: #2196f3;
    /* Modrá */
    color: white;
}

.alert.success {
    background-color: #4caf50;
    /* Zelená */
    color: white;
}

.alert.error {
    background-color: #f44336 !important;
    /* Červená barva pro chybu */
    color: white;
}



.server-info-box {
    position: fixed;
    top: 50%;
    right: 20px;
    /* Umístění napravo */
    transform: translateY(-50%);
    width: 200px;
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.2);
    color: white;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    z-index: 2000;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.server-info-box h3 {
    font-size: large;
    text-decoration: underline;
    margin-bottom: 10px;
    color: #ffffff;
}

.server {
    margin-bottom: 15px;
}

.server-name {
    font-weight: bold;
    font-size: 1.1em;
}

.server-players {
    display: block;
}

.server-status.online {
    color: #22d122;
    font-weight: bold;
}

.server-status.offline {
    color: red;
    font-weight: bold;
}

.server-players {
    font-size: 0.9em;
    color: #f0f8ff;
}

/* Styl pro sticky box s informacemi o uživateli */
.login-input {
    width: 80%;
    padding: 10px;
    margin: 10px 0;
    border: none;
    border-radius: 5px;
    text-align: center;
}

.notlogged button {
    padding: 10px 20px;
    background-color: #ffffff4a;
    color: white;
    font-size: 1em;
    text-transform: uppercase;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.notlogged button:hover {
    background-color: #e6b800;
}


.notlogged p {
    padding-bottom: 15px;
    font-size: 2em;
}

.user-info-box {
    position: fixed;
    top: 50%;
    left: 20px;
    transform: translateY(-50%);
    width: 200px;
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.2);
    color: white;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    z-index: 2000;
    opacity: 0;
    /* Na začátku neviditelný */
    transition: opacity 0.5s ease;
    /* Plynulý přechod pro zobrazení/skrytí */
}

.user-photo {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    /* Kulatá profilová fotka */
    margin-bottom: 10px;
}

.user-name {
    font-size: 1.2em;
    font-weight: bold;
    margin: 5px 0;
}

.user-status {
    font-size: 0.9em;
    color: #f0f8ff;
}

/* Stylizace tlačítka Dobít kredit */
.recharge-button {
    background: linear-gradient(135deg, #4CAF50, #66BB6A);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 10px 20px;
    font-size: 1em;
    cursor: pointer;
    transition: background 0.3s ease;
    margin-top: 5px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.recharge-button:hover {
    background: linear-gradient(135deg, #43A047, #4CAF50);
}

/* Payment slider */
.slider-overlay {
    display: none;
    /* Výchozí skrytí */
    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;
    z-index: 2000;
}

.slider-container {
    position: relative;
    width: 90%;
    max-width: 900px;
    background-color: #222;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.8);
}

.slider {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.slider-item {
    flex: 0 0 100%;
    text-align: center;
}

.slider-item img {
    width: 100%;
    height: 500px;
    object-fit: cover;
}

.slider-controls {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
}

.slider-control {
    width: 15px;
    height: 15px;
    background-color: rgb(255 209 65);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.slider-control.active {
    background-color: rgb(86 92 97);
}

.confirm-button {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #75bb24;
    color: white;
    border: none;
    padding: 12px 20px;
    font-size: 16px;
    border-radius: 5px;
    cursor: pointer;
    display: none;
}

.close-button {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: #ff4d4d;
    /* Červené tlačítko */
    color: white;
    border: none;
    border-radius: 50%;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 16px;
    /* Mírně větší text */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease, background-color 0.3s ease;
    z-index: 1;
}

.close-button:hover {
    background-color: #d32f2f;
    /* Tmavší červená při hoveru */
    transform: scale(1.1);
    /* Zvýraznění zvětšením */
}

.close-button:active {
    transform: scale(0.95);
    /* Mírné zmenšení při kliknutí */
}



/* Styl pro tlačítko odhlášení */
.user-info-box .logout-button {
    background-color: #ff4d4d;
    /* Červená barva pro zvýraznění */
    color: white;
    border: none;
    padding: 10px 15px;
    font-size: 14px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-top: 10px;
    /* Mezera nad tlačítkem */
    display: inline-block;
}

.user-info-box .logout-button:hover {
    background-color: #e60000;
    /* Tmavší červená při hoveru */
}


/* Navigační panel */
.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    background-color: rgba(0, 0, 0, 0.42);
    /* Poloprůhledné pozadí */
    color: white;
    z-index: 1000;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.brand {
    font-size: 1.5em;
    font-weight: bold;
    color: white;
    text-align: left;
    transition: transform 0.3s ease;
    /* Přechod pro zvětšení */
}

.brand:hover {
    transform: scale(1.1);
    /* Zvětšení při hoveru */
}

.brand a {
    color: white;
    text-decoration: none;
    /* Odstraní podtržení odkazu */
}


.nav-links {
    display: flex;
    list-style-type: none;
    gap: 20px;
    margin: 0;
    padding: 0;
    justify-content: center;
    flex-grow: 1;
}

.nav-links li {
    margin: 0;
}

.nav-links a {
    text-decoration: none;
    text-transform: uppercase;
    color: white;
    font-size: 1.2em;
    transition: color 0.3s ease;
}

.nav-links a:hover {
    color: #ffcc00;
    /* Změna barvy odkazu při najetí myší */
}


/* První sekce s odlišným pozadím */
.hero {
    background: url('imgs/background.jpg') no-repeat center center / cover;
    height: 100vh;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    /* Poloprůhledný překryv pro lepší čitelnost */
}

/* Středový obsah */
.content {
    position: relative;
    text-align: center;
    color: white;
}

/* Nadpisy */
h1 {
    font-size: 20px;
    font-weight: 300;
    letter-spacing: 7px;
    transition: transform 0.3s ease;
}

h2 {
    font-size: 7em;
    font-weight: bold;
    text-transform: uppercase;
    margin: 15px 0 50px;
    transition: transform 0.3s ease;
    letter-spacing: 8px;
    text-align: center;
}

/* Styly pro ikonu */
.icon {
    width: 150px;
    height: auto;
    vertical-align: middle;
    margin-right: 10px;
}

/* Styl tlačítka */
.button {
    background: linear-gradient(45deg, #FF0000, #0000FF);
    /* Gradientní efekt */
    color: transparent;
    /* Transparentní text */
    -webkit-background-clip: text;
    /* Ořízne pozadí textem */
    background-clip: text;
    padding: 15px 30px;
    text-decoration: none;
    font-size: 1.2em;
    border-radius: 5px;
    letter-spacing: 5px;
    transition: transform 0.3s ease, background-color 0.3s, color 0.3s;
}

.button:hover {
    transform: scale(1.1);
    /* Zvýraznění tlačítka při najetí myší */
    color: rgba(255, 255, 255, 1);
    /* Text se stane neprůhledným */
    background: #333;
    /* Změna barvy pozadí tlačítka */
}

/* Ostatní sekce se stejným pozadím, které se neposouvá */
.section {
    background: url('imgs/background2.jpg') no-repeat center center / cover;
    background-attachment: fixed;
    /* Udržení pozadí fixně */
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 50px;
    text-align: center;
    box-sizing: border-box;
    /* Zajišťuje, že padding se zahrne do výšky */
}

/* Sekce About Us */
#developers-text {
    font-size: 4em;
    font-weight: 200;
    margin: 15px 0 50px;
    transition: transform 0.3s ease;
    letter-spacing: 8px;
    text-align: center;
    margin-bottom: 10px;
    color: #f0f8ff;
}


/* Toxigen bublina */
#toxigen-icon {
    width: 180px;
    border-radius: 25%;
}

.toxigen-bubble {
    display: flex;
    /* Flexbox layout */
    align-items: center;
    /* Vertikální zarovnání na střed */
    background-color: #ffffff4a;
    padding: 20px;
    border-radius: 10px;
    max-width: 800px;
    /* Nastavit maximální šířku */
    margin: 20px auto;
}

#toxigen-icon {
    width: 150px;
    /* Velikost obrázku */
    border-radius: 10%;
    /* Kulaté rohy */
    margin-right: 20px;
    /* Mezera mezi obrázkem a textem */
}

.toxigen-text {
    text-align: left;
    /* Zarovnání textu doleva */
}

.toxigen-text h3 {
    margin: 0;
    font-size: 2em;
    font-weight: bold;
    color: #f0f8ff;
}

.toxigen-text p {
    margin-top: 10px;
    font-size: 1.2em;
    color: #f0f8ff;
}



/* Karty týmu */
.team-cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
}

.team-card {
    background-color: #ffffff4a;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    padding: 20px;
    width: 250px;
    text-align: center;
    transition: transform 0.3s, box-shadow 0.3s;
}

.team-card:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

/* Profilová fotka */
.profile-photo {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin-bottom: 15px;
}

.team-card h3 {
    font-size: 1.5em;
    margin-bottom: 10px;
    color: #333;
}

#popis {
    font-family: 'Russo One', Arial, sans-serif;
    font-size: small;
}

.team-card p {
    font-size: 1em;
    color: white;
}

/* Sekce Download */
#download-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Zarovná obsah k hornímu okraji */
    align-items: center;
    height: auto;
    /* Zajistí, že sekce bude mít plnou výšku okna */
    padding-top: 50px;
    /* Volitelné odsazení od horního okraje */
}

.howtodownload h3 {
    font-size: 4em;
    font-weight: 200;
    margin: 15px 0 50px;
    transition: transform 0.3s ease;
    letter-spacing: 8px;
    text-align: center;
    margin-bottom: 10px;
    color: #f0f8ff;
}

/* Styl pro tlačítko Download */
.download-button {
    display: inline-block;
    margin-top: 20px;
    /* Mezera nad tlačítkem */
    padding: 15px 30px;
    background-color: #ffffff4a;
    /* Barva tlačítka */
    color: white;
    /* Barva textu */
    font-size: 1.2em;
    font-weight: bold;
    text-decoration: none;
    text-transform: uppercase;
    border-radius: 5px;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.download-button:hover {
    background-color: #e6b800;
    /* Barva tlačítka při hoveru */
    transform: scale(1.05);
    /* Mírné zvětšení při najetí myší */
}

.download-video {
    margin-top: 20px;
    /* Odstup od tlačítka */
    display: flex;
    justify-content: center;
    /* Zarovnání videa na střed */
    max-width: 100%;
    height: auto;
    /* Udržení poměru stran */
}

.howtodownload h3 {
    text-align: center;
    margin-bottom: 10px;
    /* Odstup mezi textem a tlačítkem */
}

/* Celková sekce hlasování */
#voting-section {
    padding: 60px 20px;
    text-align: center;
    color: #fff;
    height: auto;
    padding-bottom: 50px;
}

/* Box s hlasováním */
.poll-box {
    background: #2a2a2a;
    border-radius: 12px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5);
    padding: 40px;
    max-width: 700px;
    margin: 0 auto;
}

/* Titulky a popisky */
.poll-box h2 {
    font-size: 32px;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.poll-box p {
    font-size: 18px;
    margin-bottom: 25px;
    line-height: 1.4;
}

/* Kontejner pro volby */
.poll-options {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    margin-bottom: 25px;
}

/* Jednotlivé volby */
.poll-option {
    background: #444;
    border-radius: 8px;
    padding: 15px 30px;
    cursor: pointer;
    transition: background 0.3s, transform 0.2s;
    display: flex;
    align-items: center;
    min-width: 140px;
}

.poll-option:hover {
    background: #555;
    transform: translateY(-2px);
}

.poll-option input {
    display: none;
}

.poll-option .option-text {
    font-size: 20px;
    font-weight: 500;
}

/* Vybraná volba – zvýraznění */
.poll-option.selected {
    background: #ffcc00;
    color: #222;
    border: 2px solid #ffcc00;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
    transform: scale(1.02);
}

.poll-option.selected .option-text {
    color: #222;
}

/* Vlastní stylování scrollbaru pro oblasti .results a .suggestions */

/* WebKit */
.results::-webkit-scrollbar,
.suggestions::-webkit-scrollbar {
    width: 8px;
}

.results::-webkit-scrollbar-track,
.suggestions::-webkit-scrollbar-track {
    background: #444;
    border-radius: 4px;
}

.results::-webkit-scrollbar-thumb,
.suggestions::-webkit-scrollbar-thumb {
    background: #6665ee;
    border-radius: 4px;
}

.results::-webkit-scrollbar-thumb:hover,
.suggestions::-webkit-scrollbar-thumb:hover {
    background: #5555cc;
}

/* Firefox */
.results,
.suggestions {
    scrollbar-width: thin;
    scrollbar-color: #6665ee #444;
}

/* Tlačítko hlasování */
.vote-button {
    display: inline-block;
    padding: 12px 30px;
    background: #ffcc00;
    border: none;
    border-radius: 8px;
    font-size: 20px;
    cursor: pointer;
    transition: background 0.3s, transform 0.2s;
    margin-top: 20px;
}

.vote-button:hover {
    background: #e6b800;
    transform: scale(1.02);
}

/* Výsledky hlasování */
.results {
    margin-top: 30px;
    text-align: left;
    background: #333;
    border-radius: 8px;
    padding: 20px;
    max-height: 250px;
    overflow-y: auto;
}

.results h4 {
    margin-bottom: 15px;
    font-size: 24px;
    border-bottom: 2px solid #444;
    padding-bottom: 5px;
}

.result-item {
    margin-bottom: 20px;
}

.result-label {
    font-size: 18px;
    margin-bottom: 8px;
    white-space: pre-wrap;
}

.progress-bar-container {
    background: #555;
    border-radius: 8px;
    overflow: hidden;
    height: 25px;
    margin-bottom: 8px;
}

.progress-bar {
    background: #6665ee;
    height: 100%;
    transition: width 0.3s ease;
}

.voters-list {
    font-size: 16px;
    color: #bbb;
}

/* Seznam návrhů */
.suggestions {
    margin-top: 30px;
    text-align: left;
    background: #333;
    border-radius: 8px;
    padding: 20px;
    max-height: 250px;
    overflow-y: auto;
}

/* Návrhová položka – každý návrh v samostatném boxu */
.suggestion-item {
    background: #333;
    border-radius: 8px;
    padding: 15px 20px;
    margin-bottom: 20px;
    text-align: left;
}

/* Text návrhu */
.suggestion-text {
    font-size: 18px;
    margin-bottom: 10px;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* Kontejner pro tlačítko hlasovat a statistiky u návrhů */
.suggestion-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

/* Tlačítko hlasování u návrhů */
.suggestion-vote {
    padding: 8px 16px;
    font-size: 16px;
    background: #6665ee;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.3s, transform 0.2s;
}

/* Styl pro oddělovací čáru mezi položkami (volitelně) */
.suggestion-divider {
    border: 0;
    height: 1px;
    background: #555;
    margin-bottom: 15px;
}

/* Modal overlay */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    /* Skryto, dokud se nezobrazí */
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

/* Modal content box */
.modal-content {
    background: #fff;
    padding: 20px 30px;
    border-radius: 8px;
    max-width: 500px;
    width: 90%;
    text-align: left;
    position: relative;
}

/* Tlačítko pro zavření modálu */
.modal-close {
    background: #ffcc00;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    margin-top: 20px;
    transition: background 0.3s;
}

.modal-content h2 {
    font-size: 2em;
    /* Zmenšené písmo místo obřího 7em */
    font-weight: bold;
    margin-bottom: 20px;
}

.modal-content ul {
    font-size: 1em;
    /* nebo 0.9em apod. */
}

.modal-close:hover {
    background: #e6b800;
}

/* Styl pro zobrazení textu v modal okně */
#modalVotersList {
    font-size: 16px;
    color: #333;
    white-space: pre-wrap;
    margin-bottom: 10px;
}

.suggestion-vote:hover {
    background: #5555cc;
    transform: scale(1.05);
}

/* Statistika hlasů u návrhů */
.vote-stats {
    font-size: 16px;
    color: #ddd;
}

/* Progress bar pro návrhy (použijeme stejné jako u výsledků) */
.progress-bar-container {
    background: #555;
    border-radius: 4px;
    overflow: hidden;
    height: 20px;
}

.progress-bar {
    background: #6665ee;
    height: 100%;
    transition: width 0.3s ease;
}

/* Formulář pro návrhy: využijeme <textarea> */
#suggestionForm textarea {
    padding: 12px;
    border-radius: 6px;
    border: none;
    width: 65%;
    font-size: 18px;
    margin-bottom: 10px;
    resize: vertical;
}

.suggest-button {
    padding: 12px 30px;
    font-size: 18px;
    background: #ffcc00;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.3s, transform 0.2s;
}

.suggest-button:hover {
    background: #e6b800;
    transform: scale(1.02);
}

.show-voters-btn {
    padding: 2px 2px;
    font-size: 11px;
    background: #6665ee;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    transition: background 0.3s, transform 0.2s;
    color: white;
}

.cancel-button {
    display: inline-block;
    padding: 12px 30px;
    background: #d9534f;
    /* Červená barva pro upozornění */
    border: none;
    border-radius: 8px;
    font-size: 20px;
    cursor: pointer;
    transition: background 0.3s, transform 0.2s;
    margin-top: 20px;
}

.cancel-button:hover {
    background: #c9302c;
    transform: scale(1.02);
}

/* Sekce obchodu */
/* Specifický styl pro bulk-only text */
.bulk-info {
    font-size: 0.9em;
    color: #ffd700;
    /* Zlatá barva textu */
    background: rgba(0, 0, 0, 0.2);
    /* Jemné poloprůhledné pozadí */
    padding: 8px;
    border-radius: 5px;
    margin-bottom: 10px;
    /* Odstup od tlačítka */
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    /* Jemný stín */
}

/* Styl pro tlačítko v bulk-only režimu */
.purchase-options button {
    padding: 10px 15px;
    background-color: #e6b800;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

/* Hover efekt pro tlačítko */
.purchase-options button:hover {
    background-color: #ffcc00;
}

#shop-section {
    text-align: center;
    padding: 50px 20px;
    position: relative;
}

/* Nadpis pro sekci obchodu */
#shop-section h3 {
    font-size: 1.5em;
    margin-bottom: 15px;
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding-bottom: 10px;
    text-transform: uppercase;
    padding-top: 15px;
    letter-spacing: 8px;
}

/* Kontejner pro slider */
.shop-slider {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 851px;
    margin: auto;
    position: relative;
}

/* Kontejner pro položky obchodu */
.shop-items-container {
    overflow: hidden;
    width: 100%;
}

/* Položky v obchodu - flexbox pro zajištění horizontálního posunu */
.shop-items {
    display: flex;
    transition: transform 0.5s ease;
}

/* Každá položka obchodu */
.shop-item {
    position: relative;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 20px;
    width: 220px;
    /* Upravená šířka */
    height: auto;
    /* Automatická výška */
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    margin: 0 15px;
    /* Zvýšená mezera mezi položkami */
    display: flex;
    flex-direction: column;
    /* Zarovnání obsahu do sloupce */
    justify-content: space-between;
}

/* Název položky */
.shop-item .item-name {
    font-size: 1.1em;
    color: white;
    margin-bottom: 10px;
    background-color: rgba(0, 0, 0, 0);
    /* Přidejte pozadí pro lepší čitelnost */
    padding: 5px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 46px;
    /* Výška stejná jako u prvního obrázku */
}

/* Obrázek položky */
.shop-item img.item-icon {
    width: 120px;
    /* Zvýšená šířka obrázků */
    height: auto;
    margin-bottom: 10px;
}

/* Cena položky */
.shop-item .item-price {
    font-size: 1em;
    /* Mírně větší písmo pro lepší viditelnost */
    color: #ffd700;
    margin-bottom: 10px;
}

.info-icon {
    position: absolute;
    top: 8px;
    /* vzdálenost od horního okraje karty */
    right: 8px;
    /* vzdálenost od pravého okraje karty */
    color: #ffd700;
    font-weight: bold;
    font-size: 1.1em;
    cursor: pointer;
    /* Odstranit margin-left, pokud ho nepotřebujete: margin-left: 0; */
}

.info-icon:hover {
    color: #ffcc00;
}

/* Styl pro kontejner s množstvím a tlačítkem koupit */
.purchase-options {
    display: flex;
    flex-direction: column;
    /* Změna směru z řádku na sloupec */
    align-items: center;
    /* Zarovnání obsahu na střed */
    gap: 10px;
    margin-top: 10px;
}

/* Množství položky (label) */
.purchase-options label {
    font-size: 0.9em;
    color: white;
}

/* Vstupní pole pro množství */
.purchase-options input[type="number"] {
    width: 60px;
    padding: 5px;
    font-size: 1em;
    border: none;
    border-radius: 5px;
    text-align: center;
    background-color: rgba(255, 255, 255, 0.2);
    color: white;
}

/* Skrytí šipek pro zvýšení/snížení u vstupního pole množství na některých prohlížečích */
.purchase-options input[type="number"]::-webkit-inner-spin-button,
.purchase-options input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Zvýraznění vstupního pole při zaměření */
.purchase-options input[type="number"]:focus {
    outline: none;
    background-color: rgba(255, 255, 255, 0.3);
}

/* Styl pro tlačítka slideru (šipky) */
.slider-button {
    background: none;
    border: none;
    color: white;
    font-size: 2em;
    cursor: pointer;
    padding: 0 15px;
    transition: color 0.3s;
}


/* Hover efekt pro šipky slideru */
.slider-button:hover {
    color: #ffcc00;
}


/* Upravený styl pro sekci statistik */
#stats-section {
    background-color: rgba(30, 30, 30, 0.8);
    /* Tmavší pozadí pro lepší kontrast */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    padding: 40px;
    color: #e0e0e0;
    text-align: center;
    justify-content: center;
}

#stats-section h2 {
    font-size: 1.5em;
    margin-bottom: 15px;
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding-bottom: 10px;
    padding-top: 10px;
}

/* Tabulky statistik */
.player-stats-table,
.clan-stats-table {
    max-height: 402px;
    /* Omezení výšky tabulky */
    overflow-y: auto;
    /* Vertikální posouvání */
    overflow-x: hidden;
    /* Zabrání horizontálnímu posouvání */
    border-radius: 8px;
    /* Zaoblené rohy */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    /* Jemný stín */
    margin-top: 20px;
    background-color: rgba(50, 50, 50, 0.9);
    /* Tmavší pozadí */
    padding: 0;
    /* Odstranění paddingu kolem tabulky */
    border: none;
    /* Zabrání okrajům kolem celé tabulky */
}

.player-stats-table table,
.clan-stats-table table {
    width: 100%;
    /* Tabulka zabírá celou šířku kontejneru */
    border-collapse: collapse;
    background-color: transparent;
    /* Transparentní pozadí v kontejneru */
}

.player-stats-table th,
.clan-stats-table th,
.player-stats-table td,
.clan-stats-table td {
    border: 1px solid #555;
    /* Oddělovací čára mezi buňkami */
    padding: 15px;
    color: #f0f8ff;
    text-align: center;
    font-size: 1em;
    /* O něco větší písmo pro lepší čitelnost */
}

.player-stats-table th,
.clan-stats-table th {
    background-color: #5c44ab;
    /* Jednolitá tmavě modrá barva */
    color: #ffffff;
    /* Barva textu */
    text-transform: uppercase;
    font-size: 1.1em;
    position: sticky;
    /* Fixace hlavičky */
    top: 0;
    /* Fixace k horní části při scrollování */
    z-index: 2;
    /* Zajištění zobrazení nad ostatními prvky */
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
    /* Jemný stín pro oddělení od obsahu */
    border: none;
    /* Odstranění tmavých okrajů */
}

.player-stats-table tr:nth-child(even),
.clan-stats-table tr:nth-child(even) {
    background-color: rgba(40, 40, 40, 0.8);
    /* Odlišení sudých řádků */
}

.player-stats-table tr:hover,
.clan-stats-table tr:hover {
    background-color: rgba(60, 60, 60, 0.6);
    /* Zvýraznění řádku při hoveru */
}

/* Styl pro řazení sloupců */
.sortable {
    cursor: pointer;
    position: relative;
}

.sort-indicator {
    display: inline-block;
    margin-left: 5px;
    width: 8px;
    height: 8px;
    border-width: 4px;
    border-style: solid;
    border-color: transparent transparent #ffffff transparent;
    /* Šipka směřující dolů */
    opacity: 0.6;
    transition: opacity 0.3s;
}

.sortable.active .sort-indicator {
    opacity: 1;
}

.sortable.asc .sort-indicator {
    border-color: #ffffff transparent transparent transparent;
    /* Šipka směřující nahoru */
}

.sortable.desc .sort-indicator {
    border-color: transparent transparent #ffffff transparent;
    /* Šipka směřující dolů */
}

/* Styl pro posuvníky */
.player-stats-table::-webkit-scrollbar,
.clan-stats-table::-webkit-scrollbar {
    width: 10px;
    /* Šířka posuvníku */
    height: 10px;
    /* Výška posuvníku pro horizontální scroll (pokud existuje) */
}

.player-stats-table::-webkit-scrollbar-track,
.clan-stats-table::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    /* Barva pozadí dráhy posuvníku */
    border-radius: 5px;
    /* Zaoblení dráhy posuvníku */
}

.player-stats-table::-webkit-scrollbar-thumb,
.clan-stats-table::-webkit-scrollbar-thumb {
    background: #5c44ab;
    /* Barva posuvníku */
    border-radius: 5px;
    /* Zaoblení posuvníku */
    border: 2px solid rgba(50, 50, 50, 0.9);
    /* Vytvoří efekt obrysu */
}

.player-stats-table::-webkit-scrollbar-thumb:hover,
.clan-stats-table::-webkit-scrollbar-thumb:hover {
    background: #7745d1;
    /* Barva posuvníku při najetí myší */
}

.player-stats-table,
.clan-stats-table {
    scrollbar-width: thin;
    /* Tenký posuvník */
    scrollbar-color: #5c44ab rgba(255, 255, 255, 0.1);
    /* Barva posuvníku a dráhy */
}

.members-row {
    background-color: rgba(50, 50, 50, 0.9);
    color: #ccc;
    font-size: 0.9em;
    text-align: center;
}

/* Styl pro ikonu */
.icon {
    font-size: 1.2em;
    color: #ffffff;
    cursor: pointer;
    transition: color 0.3s;
}

.icon:hover {
    color: #5c44ab;
    /* Barva při hoveru */
}

/* Tooltip kontejner */
.tooltip {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.tooltip .tooltip-text {
    visibility: hidden;
    max-width: 300px;
    background-color: #6b4ec0;
    color: #fff;
    text-align: left;
    border-radius: 10px;
    padding: 10px 12px;
    position: absolute;
    z-index: 1;
    white-space: normal;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    font-size: 14px;
    line-height: 1.5;
    opacity: 0;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

/* Tooltip nahoře */
.tooltip .tooltip-text.top {
    bottom: calc(100% + 10px);
    /* Nad ikonou s mezerou 10px */
    left: 50%;
    transform: translateX(-50%);
}

.tooltip .tooltip-text.top::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: #6b4ec0 transparent transparent transparent;
}

/* Tooltip dole */
.tooltip .tooltip-text.bottom {
    top: calc(100% + 10px);
    /* Pod ikonou s mezerou 10px */
    left: 50%;
    transform: translateX(-50%);
}

.tooltip .tooltip-text.bottom::after {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent #6b4ec0 transparent;
}

/* Zobrazit tooltip pouze při hoveru na ikonu */
.tooltip .icon:hover+.tooltip-text {
    visibility: visible;
    opacity: 1;
}

/* Styl pro seznam členů */
.tooltip .tooltip-text ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.tooltip .tooltip-text ul li {
    margin-bottom: 5px;
}

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


/* Styl pro slider */
/* Skrytí sekcí statistik s animací */
.stats-slide {
    display: none;
    /* Skrytí všech statistikových sekcí */
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.5s ease, transform 0.5s ease;
    position: absolute;
    width: 100%;
}

/* Aktivní sekce statistik */
.stats-slide.active {
    display: block;
    /* Zobrazení aktuální sekce */
    opacity: 1;
    transform: scale(1);
    position: static;
}

/* Skrytí předchozí sekce při přechodu */
.stats-slide.hidden {
    transform: translateX(-100%);
    opacity: 0;
    visibility: hidden;
}

/* Styl bublin */
.slider-bubbles {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    gap: 10px;
}

.bubble {
    width: 15px;
    height: 15px;
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.bubble.active {
    background-color: #5c44ab;
    /* Fialová pro aktivní bublinu */
}

.bubble:hover {
    background-color: rgba(255, 255, 255, 0.6);
    /* Šedá při hoveru */
}

.bubble.active:hover {
    background-color: #7745d1;
    /* Světlejší fialová při hoveru na aktivní bublině */
}



/* Pravidla */
/* Výchozí styl pro pravidla */
.rule-content {
    max-height: 0;
    /* Skryté ve výchozím stavu */
    overflow: hidden;
    /* Skryje přetékající obsah */
    transition: max-height 0.5s ease, padding 0.5s ease, opacity 0.5s ease, transform 0.5s ease;
    /* Přidání dalších animací */
    /* Plynulý přechod pro výšku a padding */
    background-color: #2a2a2a;
    border-radius: 5px;
    font-size: 0.95em;
    color: #ddd;
    line-height: 1.6;
    margin-top: 5px;
    padding: 0 15px;
    /* Žádný padding ve výchozím stavu */
    text-transform: uppercase;
    text-align: start;
}


/* Když je rozbaleno */
.rule-content.expanded {
    padding: 15px;
    /* Větší padding po otevření */
}

/* Header styling */
.rules-header {
    font-size: 1.5em;
    margin-bottom: 15px;
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding-bottom: 10px;
}

/* Rule category styling */
.rule-category {
    margin-bottom: 5px;
    width: 70%;
}

.rule-category h3 {
    font-size: 1.2em;
    margin: 0;
    padding: 15px;
    background-color: #1a1a1a;
    border-radius: 5px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
    transition: background-color 0.3s ease;
}

.rule-category h3::after {
    content: '\25BC';
    /* Down arrow */
    font-size: 0.8em;
    transition: transform 0.3s ease;
}

.rule-category h3.active::after {
    transform: rotate(180deg);
    /* Up arrow when active */
}



/* Sticky Footer */
.sticky-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.42);
    /* Poloprůhledné pozadí */
    padding: 10px 0;
    text-align: center;
    z-index: 1000;
}

.footer-icons {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.footer-icon img {
    width: 30px;
    height: 30px;
    transition: transform 0.3s ease;
    /* Přechod pro hover efekt */
}

.footer-icon img:hover {
    transform: scale(1.2);
    /* Zvětšení při hoveru */
}

.copyright-text {
    text-align: center;
    color: #ffffff;
    /* Barva textu */
    font-size: 14px;
    /* Velikost textu */
    margin-top: 10px;
    /* Odstup od ikon */
}