/* Základní nastavení pro celé tělo stránky */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f7f7f7;
}

/* Kontejner pro obsah stránky */
.container {
    max-width: 1200px; /* Maximální šířka kontejneru */
    margin: 0 auto; /* Centrovat kontejner */
    padding: 20px; /* Větší padding pro lepší vzhled */
    background: white;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px; /* Zaoblené rohy */
}

/* Odsazení pro texty a hlavičky */
h2, p {
    margin: 10px 0; /* Odsazení kolem nadpisů a textů */
    padding: 0 10px; /* Vnitřní odsazení pro lepší vzhled */
}

/* Formuláře a pole */
label {
    font-weight: bold;
    margin-top: 10px;
}

textarea, input, button {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    border-radius: 4px;
    border: 1px solid #ccc;
}

/* Styl pro tlačítka */
button {
    background-color: #007bff;
    color: white;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
    padding: 12px; /* Větší padding pro tlačítka */
}

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

/* Styl pro zobrazování hlášek */
.message {
    background-color: #e1f7e7;
    padding: 10px;
    border: 1px solid #d4edda;
    color: #155724;
    margin-bottom: 20px;
}

/* Styl pro hamburger menu */
.hamburger-menu {
    background-color: #4CAF50; /* Zelená barva pro menu */
    padding: 10px;
    display: flex;
    justify-content: space-between; /* Přidáme rozložení mezi ikonou a nápisem */
    align-items: center; /* Zarovnání nápisu a ikony na střed vertikálně */
}

.menu-icon {
    font-size: 30px;
    color: white;
    cursor: pointer;
}

.menu-title {
    font-size: 24px;
    color: white;
    font-weight: bold;
    text-align: center;
    flex-grow: 1; /* Tohle zajistí, že nápis Pendler bude vycentrovaný */
}

/* Mobilní menu */
.mobile-menu {
    display: none;
    background-color: #4CAF50; /* Zelená barva pro mobilní menu */
    max-width: 300px; /* Nastavení maximální šířky pro mobilní menu */
    width: 100%;
    margin: 0 auto; /* Centrovat mobilní menu */
}

.mobile-menu ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.mobile-menu ul li {
    padding: 15px;
    border-bottom: 1px solid white;
}

.mobile-menu ul li a {
    color: white;
    text-decoration: none;
    font-size: 18px;
    display: block;
}

.mobile-menu ul li a:hover {
    background-color: #388E3C; /* Tmavší zelená při hover */
}

/* Zajištění, že mobilní menu se rozbalí pod sebe */
@media (max-width: 768px) {
    .mobile-menu {
        display: none; /* Výchozí stav: menu je sbalené */
        text-align: left;
    }

    .mobile-menu.active {
        display: block; /* Menu se zobrazí po kliknutí */
    }

    .mobile-menu ul {
        display: block;
    }

    .mobile-menu ul li {
        display: block;
        width: 100%;
    }

    .mobile-menu ul li a {
        padding: 10px;
        width: 100%;
        display: block;
    }
}

/* Základní styl pro formulářové skupiny */
.form-group {
    margin-bottom: 20px;
}

select {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 4px;
    border: 1px solid #ccc;
}

/* Styl pro formuláře */
label {
    font-weight: bold;
    display: block;
    margin-bottom: 10px;
}

/* Styl pro mobilní zobrazení, aby formulář zabral celou šířku */
@media (max-width: 768px) {
    .form-group {
        width: 100%;
    }

    label, select, button {
        width: 100%;
    }
}

nav {
    margin: 0;
    padding: 0;
}

p {
    font-size: 16px;
    line-height: 1.6;
    color: #333;
    margin-bottom: 15px;
    text-align: justify; /* Zarovnání textu do bloku */
}

/* Speciální styl pro text v případě, že žádné nabídky nejsou dostupné */
.no-jobs p {
    font-size: 18px;
    color: #d9534f; /* Červená barva pro zvýraznění */
    font-weight: bold;
    text-align: center;
    margin-top: 20px;
}

/* Styl pro profilové detaily */
.profile-details ul {
    list-style-type: none; /* Odstranění odrážek u seznamu */
    padding: 0;
}

.profile-details li {
    font-size: 18px;
    margin-bottom: 10px;
    color: #333;
    border-bottom: 1px solid #ccc; /* Oddělení každé položky */
    padding-bottom: 10px;
}

/* Styl pro tlačítko */
.btn {
    background-color: #007bff;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    display: inline-block;
    margin-top: 20px;
    text-decoration: none;
}

.btn:hover {
    background-color: #0056b3;
}

/* Každá položka pracovních pozic */
.job-item {
    padding: 15px;
    background-color: #ffffff;
    margin-bottom: 20px; /* Větší prostor mezi jednotlivými položkami */
    border-radius: 5px;
    border: 1px solid #ddd;
}

/* Nadpis pracovní pozice a zaměstnavatele */
.job-header {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 5px;
}

.job-title {
    color: #333;
}

.job-employer {
    color: #555;
}

/* Umístění pracovní pozice */
.job-location {
    margin-bottom: 10px;
    color: #666;
}

/* Akční tlačítko */
.details-button {
    background-color: #007bff;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

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

/* Styl pro výpis prázdné nabídky */
.no-jobs {
    text-align: center;
    padding: 20px;
    background-color: #ffefef;
    border: 1px solid #ffcccc;
    border-radius: 5px;
    color: #c00;
    margin: 20px 0;
}

.login-description {
    margin-bottom: 15px;
    font-size: 16px;
    color: #333;
}

.login-description p {
    margin: 0;
}

/* Styl pro hlavičku */
.header-image {
    display: none; /* Výchozí stav: skryto */
}

/* Zobrazení hlavičky pouze na desktopových zařízeních */
@media (min-width: 769px) {
    .header-image {
        display: block; /* Zobrazit hlavičku */
        text-align: center; /* Centrovat obrázek */
        margin: 20px 0; /* Přidat okraje kolem obrázku */
    }

    .header-img {
        max-width: 100%; /* Zajistit, že se obrázek nezobrazí přes celou šířku */
        height: auto; /* Udržet poměr stran */
    }
}

/* Skrýt hamburger menu na desktopových zařízeních */
@media (min-width: 769px) {
    .hamburger-menu {
        display: none; /* Skryje hamburger menu na desktopu */
    }
}

/* Styl pro desktopové menu */
.desktop-menu {
    display: flex; /* Zobrazit jako flexbox */
    justify-content: center; /* Centrovat menu */
    align-items: center; /* Zarovnat položky na střed */
    margin: 20px 0; /* Přidání okrajů kolem menu */
    background-color: #4CAF50; /* Zelená barva pro menu */
    border-radius: 8px; /* Zaoblené rohy */
    padding: 10px 0; /* Padding pro menu */
}

/* Zajištění, že položky menu jsou správně zobrazeny */
.desktop-menu ul {
    list-style-type: none; /* Odstranit odrážky */
    padding: 0;
    margin: 0;
    display: flex; /* Horizontální zobrazení položek */
}

.desktop-menu ul li {
    margin: 0 10px; /* Okraje mezi položkami */
}

.desktop-menu ul li a {
    color: white; /* Barva textu */
    text-decoration: none; /* Odstranit podtržení */
    padding: 10px 15px; /* Vnitřní padding pro tlačítka */
    border-radius: 5px; /* Zaoblené rohy pro tlačítka */
    transition: background-color 0.3s; /* Přechod pro hover efekt */
}

.desktop-menu ul li a:hover {
    background-color: #388E3C; /* Tmavší zelená při hover */
}

/* Skrytí desktopového menu na mobilech */
@media (max-width: 768px) {
    .desktop-menu {
        display: none; /* Skryje desktopové menu na mobilech */
    }
}
.job-listing-container {
    padding: 20px 20px; /* Odsazení uvnitř kontejneru: nahoře a dole 20px, zleva a zprava 20px */
    margin: 20px auto; /* Centrovat kontejner s vnějším odsazením */
    background-color: #ffffff; /* Bílé pozadí pro lepší čitelnost */
    border-radius: 8px; /* Zaoblené rohy pro lepší vzhled */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Jemný stín kolem kontejneru */
    max-width: 800px; /* Maximální šířka pro lepší vzhled */
    text-align: left; /* Zajistěte zarovnání textu doleva */
}

/* Přidání odsazení pro nadpisy a texty */
h2 {
    margin: 20px 0 10px 0; /* Odsazení nahoře a dole pro nadpisy */
    padding-left: 15px; /* Větší odsazení zleva pro zarovnání textu od kraje */
}

p {
    margin: 10px 0; /* Odsazení mezi odstavci */
    padding: 0 15px; /* Větší odsazení zleva a zprava pro lepší čitelnost */
}

/* Úprava pro jednotlivé pracovní pozice */
.job-item {
    padding: 15px; /* Odsazení uvnitř každé nabídky */
    background-color: #f9f9f9; /* Světle šedé pozadí pro jednotlivé nabídky */
    margin-bottom: 15px; /* Větší mezera mezi jednotlivými položkami */
    border-radius: 5px; /* Zaoblené rohy kolem nabídek */
    border: 1px solid #ddd; /* Jemný okraj pro zvýraznění */
}

/* Odsazení pro nadpisy pracovních pozic a zaměstnavatelů */
.job-header {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 5px;
    padding-left: 15px; /* Přidání odsazení zleva */
}

.job-title {
    color: #333;
}

.job-employer {
    color: #555;
}

/* Umístění pracovní pozice */
.job-location {
    margin-bottom: 10px;
    color: #666;
    padding-left: 15px; /* Přidání odsazení zleva */
}
.job-description {
    padding: 20px 25px; /* Větší odsazení zleva a zprava pro text */
    background-color: #f5f5f5; /* Světle šedé pozadí pro zlepšení čitelnosti */
    border-radius: 5px; /* Zaoblené rohy pro vizuální vylepšení */
    margin-bottom: 20px; /* Prostor mezi textem a dalšími prvky */
    border: 1px solid #ddd; /* Jemný okraj kolem textu */
    line-height: 1.6; /* Zvýšení mezery mezi řádky pro lepší čitelnost */
}

/* Styl pro emailovou ikonu */
.email-icon {
    font-size: 20px;
    color: #FFD700; /* Zlatá barva pro emailovou ikonu */
    cursor: pointer;
    margin-left: 10px;
    display: none; /* Ve výchozím stavu skryté */
}

.email-icon.blinking {
    animation: blink 1s step-start infinite; /* Blikající efekt */
}

@keyframes blink {
    50% {
        opacity: 0;
    }
}

.button-group {
    display: flex;
    gap: 10px; /* Mezera mezi tlačítky */
    margin-top: 10px;
}

.close-button {
    background-color: red;
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.close-button:hover {
    background-color: darkred;
}

.delete-button {
    background-color: darkred;
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.delete-button:hover {
    background-color: maroon;
}

.video-banner {
    padding: 10px; /* Menší vnitřní odsazení */
    margin: 20px auto; /* Centrovat kontejner */
    background-color: #ffffff; /* Bílé pozadí */
    border-radius: 8px; /* Zaoblené rohy */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Jemný stín */
    max-width: 800px; /* Maximální šířka kontejneru */
    max-height: 100px; /* Maximální výška */
    overflow: hidden; /* Oříznout přesahující obsah */
    text-align: center; /* Zarovnání obsahu na střed */
}

.video-banner video {
    width: 100%; /* Video vyplní celý kontejner */
    height: 100px; /* Fixní výška pro lepší ovládání velikosti */
    object-fit: cover; /* Zajistí správné zobrazení obsahu videa */
}

.image-banner {
    padding: 20px; /* Odsazení kolem obrázku */
    margin: 20px auto; /* Centrovat kontejner */
    background-color: #ffffff; /* Bílé pozadí */
    border-radius: 8px; /* Zaoblené rohy */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Jemný stín */
    max-width: 800px; /* Maximální šířka */
    text-align: center; /* Zarovnání obsahu na střed */
}

.image-banner img {
    width: 100%; /* Obrázek se přizpůsobí šířce kontejneru */
    height: auto; /* Zachování poměru stran */
    border-radius: 8px; /* Zaoblené rohy obrázku */
}