:root {
    --primary-red: #c81e1e;
    --dark-red: #a11818;
    --text-dark: #212121;
    --text-light: #f5f5f5;
    --bs-light-rgb: 247, 249, 252;
    --border-color: #e0e0e0;
    --shadow: 0 10px 30px rgba(0, 0, 0, 0.07);
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;

}

/* Základní reset a kontejner */
.breadcrumbs {
    font-family: Arial, sans-serif;
    padding: 10px 0;
}

/* 1. Styly pro seznam (ul) */
.breadcrumbs .items {
    list-style: none;
    /* Odstranit standardní tečky/čísla */
    display: flex;
    /* Zajistí, že prvky jsou v řadě */
    flex-wrap: wrap;
    /* Pro případ, že se na malé obrazovce nevlezou */
    padding: 0;
    margin: 0;
}

/* 2. Styly pro jednotlivé položky (li) */
.breadcrumbs .item {
    display: flex;
    /* Důležité pro zarovnání a oddělovač */
    align-items: center;
    /* Vertikální zarovnání obsahu */
    font-size: 15px;
    line-height: 1.4;
}

/* 3. Styly pro oddělovač */
/* Oddělovač se aplikuje před každou položkou, kromě první */
.breadcrumbs .item:not(:first-child):before {
    content: "/";
    /* Zde definujte symbol (můžete použít '>', '»', nebo '/') */
    padding: 0 8px;
    /* Mezera okolo oddělovače */
    color: #888;
    /* Barva oddělovače */
}

/* 4. Styly pro odkaz (a) a text (span) */
.breadcrumbs .interest {
    text-decoration: none;
    color: #007bff;
    /* Modrá barva odkazu */
    transition: color 0.2s ease;
}

.breadcrumbs .interest:hover {
    color: #0056b3;
    /* Tmavší při najetí myší */
}

/* Odstranění podtržení, pokud je definováno třídou wunderline */
.breadcrumbs .wunderline {
    text-decoration: none;
}

/* 5. Speciální styl pro AKTUALNÍ STRÁNKU (Poslední prvek) */
.breadcrumbs .item:last-child .interest {
    color: #333;
    /* Tmavá barva pro aktuální stránku */
    font-weight: bold;
    /* Zvýraznění */
    cursor: default;
    /* Změní kurzor, protože to není aktivní odkaz */
    pointer-events: none;
    /* Zabrání kliknutí na poslední prvek */
}

.status.error {
    background: coral;
    color: red;
    border: 1px solid red;
    padding: 0.2em 0.4em;
}

.hidden {
    display: none !important;
}