@font-face {
    font-family: Poppins;
    src: url(../fonts/Poppins-Regular.ttf);
    font-weight: normal;
}

@font-face {
    font-family: Poppins;
    src: url(../fonts/Poppins-ExtraBold.ttf);
    font-weight: bold;
}

body {
    font: 14px "Poppins";
    background: #f9f9f9;
    color: #414042;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    margin: 0;
    padding: 100px 0px 0px 0px;
    min-height: 100vh;
    min-width: 960px;
}

body > header {
    height: 100px;
    width: 100%;
    background: #1e81b0;
    color: white;
    display: flex;
    justify-content: space-evenly;
    position: fixed;
    z-index: 1;
    clip-path: polygon(0% 0%, 600% 0, 0 100%, 0% 100%);
    top: 0;
}

#logo {
    height: 40px;
    margin: auto 0 auto 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-size: 40px 40px;
    color: white;
}

#logo > * {
    margin: 0 0 0 50px;
}

#logo h1 {
    font-weight: normal;
    font-size: 1.5em;
    line-height: 1.2em;
    color: white;
}

#logo h1 span {
    font-weight: bold;
    text-transform: uppercase;
}

#logo small {
    text-transform: uppercase;
    font-size: 0.85em;
    color: white;
}

nav ul {
    margin: 0;
    list-style-type: none;
    display: flex;
    align-items: center;
    height: 100%;
}

nav ul li {
    padding: 0 5px;
    margin: 0 5px;
    font-size: 1em;
    line-height: 4.3em;
}

nav ul a {
    color: white;
    padding: 8px 0;
    text-decoration: none;
    text-transform: uppercase;
}

nav ul a:hover,
.aktivni a {
    border-bottom: 2px solid #C9542A;
}

ul {
    padding-left: 20px;
    margin-top: 10px;
}

li {
    margin-bottom: 5px;
}

article {
    padding: 80px 50px;
    flex: 1;
}

/* Stylování pro úvodní článek */
.domu-article {
    gap: 20px; /* Přidán gap pro mezery mezi sloupci a řádky */
    align-items: start;
}

article h1,
article h2,
article h3,
article h4,
article h5,
article h6 {
    padding: 10px 0;
    color: #1e81b0;
    width: max-content;
}

article h1 {
    margin: 0;
    font-size: 2.3em;
    font-weight: bold;
    text-transform: uppercase;
    border-bottom: 4px solid #C9542A;
}

article h2 {
    font-size: 2em;
}

article header {
    height: 100px;
}

/* Stylování pro textové sekce */
article section p {
    margin-bottom: 1.5em;
    line-height: 1.8em;
    padding: 5px 0; /* Přidán padding pro zlepšení čitelnosti */
}

article section a {
    color: #C9542A;
}

/* Obrázek s vánočním motivem na úvodní stránce */
.domu-article img {
    border-radius: 25px;
    width: 100%;

    margin: 20px; /* Přidání mezery kolem obrázku pro lepší oddělení */
    align-self: center;
    justify-self: center;
}

footer {
    box-sizing: border-box;
    text-align: center;
    height: 90px;
    color: white;
    background: #414042;
    padding: 50px 0 0 0;
    clip-path: polygon(0 30px, 100% 0, 100% 100%, 0 100%);
}

footer a {
    color: white;
    text-decoration: none;
}

.centrovany {
    text-align: center;
}

#centrovac {
    margin: 0 auto;
    max-width: 960px;
}

.reference-tlacitko {
    background: #70B73A;
    color: white;
    font-size: 0.9em;
    text-decoration: none;
    text-transform: uppercase;
    padding: 12px 25px;
    border-radius: 25px;
}

.tlacitko {
    background: #C9542A;
    padding: 10px 20px;
    border-radius: 20px;
}

.tlacitko:hover,
.reference-tlacitko:hover,
.clanky-tlacitko:hover {
    color: white;
    filter: brightness(115%) contrast(85%);
    border: 0;
}

.vlevo {
    float: left;
}

.cistic {
    clear: both;
}

#dovednosti td {
    width: 33%;
    padding: 10px;
    vertical-align: top;
    border: 1px solid gray;
}

#dovednosti {
    border-collapse: collapse;
}

#reference img {
    border: 1px solid gray;
    padding: 6px;
    box-shadow: 3px 3px 6px #999999;
    margin-right: 6px;
}

/*
Bootstrap nastavuje barvu odkazu po najetí na modrou.
Tímto pravidlem toto chování přepisujeme, aby se při najetí vždy nastavila aktuální barva.
*/
a:hover {
    color: currentColor;
}

.clanky-tlacitko {
    background: #1e81b0;
    color: white;
    text-decoration: none;
    text-transform: uppercase;
    padding: 10px 20px;
    margin: 15px 0;
    border-radius: 20px;
    border: 0;
}

#clanky li h2 a {
    text-decoration: none;
    color: #1e81b0;
}

/*
Flash messages
*/
.flash-message {
    text-align: center;
    color: white;
    width: 960px;
    margin: 0 auto;
    margin-top: 14px;
}

.message-success {
    background: #70b73a;
}

.message-error {
    background: #d41400;
}

/*chat styling*/

/* Základní nastavení */
/*body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f9f9f9;
}*/

/* Kontejner pro chat */
.container {
    max-width: 800px;
    margin: 30px auto;
    padding: 20px;
    background-color: white;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    border-radius: 20px;
}

/* Vlákno zpráv */
.chat-thread {
    margin-bottom: 20px;
}

/* Styl zpráv */
.chat-message {
    margin: 10px 0;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #f1f1f1;
}

chat-username {
    padding: 3px 0;
    color: #1e81b0;
    width: max-content;
}

.chat-message .header {
    padding: 2px 0;
    font-weight: bold;
    color: #1e81b0;
    width: max-content;
}

.chat-message .date {
    font-size: 0.85em;
    color: gray;
}

/* Hierarchické odpovědi */
.replies {
    margin-left: 20px;
    border-left: 2px solid #ddd;
    padding-left: 10px;
}

/* Tlačítka */
.reply-button {
    margin-top: 10px;
    font-size: 0.9em;
    background-color: #007bff;
    color: grey;
    cursor: pointer;
}

/* Formulář */
form {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

input, textarea {
    flex: 1;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

button {
    padding: 8px 15px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

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

.chat-message {
      margin-bottom: 15px;
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 5px;
    }
    .header-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 5px;
    }
    .actions {
      display: flex;
      gap: 10px;
      margin-top: 5px;
    }

    .reply-button {
      background-color: #007bff;
      cursor: pointer;
      color: white;
      text-decoration: none;
      border-radius: 4px;
      margin-top: 10px;
      font-size: 0.9em;
    }
    .reply-button:hover {
        background-color: #0056b3;
    }

/* Upravené styly pro seznam přání */
.list-group-item {
    border-radius: 15px;  /* Přidání zaoblených rohů */
    margin-bottom: 15px;
    padding: 15px;
    border: 1px solid #ddd;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Stylování pro vnitřní položky seznamu přání */
.list-group-item {
    border-radius: 15px;
    margin-bottom: 15px;
    padding: 15px;
    border: 1px solid #ddd;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    display: flex; /* Použití Flexboxu pro lepší zarovnání prvků */
    flex-direction: column; /* Zarovná prvky do sloupce */
}

.list-group-item > ul {
    padding-left: 20px;
    margin-top: 10px;
}

.list-group-item h6 {
    display: flex; /* Použití Flexboxu na h6, aby se text a tlačítko daly zarovnat na jeden řádek */
    justify-content: space-between; /* Oddělení názvu přání a tlačítka "Rezervovat" */
    align-items: center; /* Zarovnání na střed vertikálně */
    margin: 0; /* Zrušení nadbytečného marginu, aby vše bylo kompaktní */
}

.list-group-item p {
    margin-bottom: 10px; /* Zmenšení mezery pod odstavcem popisu přání */
    line-height: 1.5em;
}

/* Upravené styly pro kontejner přání */
.wish-header {
    display: flex;
    justify-content: space-between; /* Zajišťuje, že název přání je vlevo a tlačítko vpravo */
    align-items: center; /* Vertikální zarovnání na střed */
}

/* Upravené styly pro tlačítko "Rezervovat" */
.clanky-tlacitko.rezervovat {
    background: #1e81b0;
    color: white;
    padding: 5px 15px;
    border-radius: 25px;
    border: none;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.3s;
    margin-left: 20px; /* Odsazení pro mezeru od názvu přání */
    align-self: flex-start; /* Ujistí se, že tlačítko neovlivňuje výšku řádku */
}

.clanky-tlacitko.rezervovat:hover {
    background: #16658c;  /* Tmavší modrá při najetí */
}

/* Tlačítko "Zobrazit kdo rezervoval" malé a šedé */
.clanky-tlacitko.zobrazit-rezervaci {
    background: #e0e0e0;
    color: #5a5a5a;
    font-size: 0.8em;
    padding: 3px 10px;
    margin-top: 5px;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    display: inline-block;  /* Ujistí se, že tlačítko nebude blokové */
    vertical-align: middle; /* Zarovnání k textu na střed vertikálně */
}

.clanky-tlacitko.zobrazit-rezervaci:hover {
    background: #cfcfcf;
    color: #4a4a4a;
}

/* Stylování pro výpis rezervací */
.reservation-info {
    margin-top: 10px;
}

.reservation-details {
    display: inline-block;  /* Zajištění, že text se bude zobrazovat vedle tlačítka */
    vertical-align: middle; /* Zarovnání k tlačítku na střed vertikálně */
    margin-left: 10px;      /* Přidání mezery mezi tlačítkem a textem */
}

.wish-header h5 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 500;
}