:root, [data-bs-theme="light"] {
    /* 1.A) Globální pozadí a text */
    --bs-body-bg: #ffffff; /* Čistě bílé pozadí webu */
    --bs-body-color: #212529; /* Hlavní tmavý text */
    /* 1.B) Pozadí pro komponenty (Karty, Dropdowny, Modální okna) */
    --bs-surface-color: #f8f9fa;
    --bs-secondary-bg: #f8f9fa; /* Používá se na secondary prvky */
    --bs-tertiary-bg: #f1f3f5; /* Pozadí pro inputy, šedé lišty */
    --bs-border-color: #dee2e6; /* Barva jemných linek a ohraničení */
    /* 1.C) Hlavní brandová barva (Primary) a její odstíny */
    --bs-primary: #0d6efd; /* Bootstrap Primary barva */
    --bs-primary-rgb: 13, 110, 253; /* RGB formát (nutný pro průhledné prvky) */
    --bs-primary-bg-subtle: #e7f1ff; /* Jemné pozadí (např. aktivní položka v menu) */
    --bs-primary-text-emphasis: #0a58ca; /* Zvýrazněný text primární barvy */
    /* 1.D) Specifické přepsání Navbaru, aby ladil */
    --bs-navbar-bg: #f8f9fa; /* Pozadí navigační lišty */
    --bs-navbar-color: rgba(33, 37, 41, 0.65); /* Barva textu v menu */
    --bs-navbar-hover-color: #0d6efd; /* Barva textu při najetí myší */
}

/* ==========================================================================
   2. TMAVÝ REŽIM (DARK MODE) - Aktivuje se přes data-bs-theme="dark"
   ========================================================================== */
[data-bs-theme="dark"] {
    /* 2.A) Globální pozadí a text */
    --bs-body-bg: #0f111a; /* Hluboké tmavě modré/černé pozadí */
    --bs-body-color: #e2e8f0; /* Měkký bílo-šedý text (nebolí z něj oči) */
    /* 2.B) Pozadí pro komponenty v tmavém režimu */
    --bs-surface-color: #161925;
    --bs-secondary-bg: #161925; /* Pozadí karet a vyskakovacích menu */
    --bs-tertiary-bg: #1f2335; /* Pozadí formulářů a tlačítek */
    --bs-border-color: #2a2f45; /* Tmavé dělicí linky */
    /* 2.C) Hlavní brandová barva upravená pro tmavý režim */
    --bs-primary: #00D2FF; /* Moderní fialová jako nová Primary barva */
    --bs-primary-rgb: 121, 40, 202; /* RGB verze fialové */
    --bs-primary-bg-subtle: #2d124d; /* Jemné fialové pozadí pro aktivní prvky */
    --bs-primary-text-emphasis: #b779ff; /* Zvýrazněný text fialové */
    /* 2.D) Specifické přepsání Navbaru v tmavém režimu */
    --bs-navbar-bg: #161925; /* Tmavé pozadí navigační lišty */
    --bs-navbar-color: rgba(226, 232, 240, 0.7);
    --bs-navbar-hover-color: #7928ca;
}


/* ==========================================================================
   1. SVĚTLÝ REŽIM (LIGHT MODE) - Výchozí nastavení Bootstrapu
   ========================================================================== */

:root,
[data-bs-theme="light"] {
    --bs-body-bg: #fbfbf8;
    --bs-body-color: #172b2e;
    --bs-surface-color: #ffffff;
    --bs-secondary-bg: #f4f5f0;
    --bs-tertiary-bg: #e9ede7;
    --bs-border-color: #dce2dc;
    --bs-primary: #315e4d;
    --bs-primary-rgb: 49, 94, 77;
    --bs-primary-bg-subtle: #e5eee7;
    --bs-primary-text-emphasis: #315e4d;
    --bs-navbar-bg: #fbfbf8;
    --bs-navbar-color: rgba(23, 43, 46, .68);
    --bs-navbar-hover-color: #315e4d;
    --mp-bg: #fbfbf8;
    --mp-text: #172b2e;
    --mp-muted: #566a6a;
    --mp-accent: #315e4d;
    --mp-accent-soft: #8bb38d;
    --mp-card: rgba(255, 255, 255, .68);
    --mp-line: rgba(43, 75, 65, .15);
    --mp-section: #f3f5f0;
    --mp-header: rgba(251, 251, 248, .88);
    --mp-shadow: 0 12px 34px rgba(28, 54, 47, .06);
}

[data-bs-theme="dark"] {
    --bs-body-bg: #0f1b1e;
    --bs-body-color: #e6efeb;
    --bs-surface-color: #172629;
    --bs-secondary-bg: #172629;
    --bs-tertiary-bg: #233438;
    --bs-border-color: #304346;
    --bs-primary: #51bd91;
    --bs-primary-rgb: 145, 189, 145;
    --bs-primary-bg-subtle: #20382f;
    --bs-primary-text-emphasis: #b8d7b7;
    --bs-navbar-bg: #122124;
    --bs-navbar-color: rgba(230, 239, 235, .72);
    --bs-navbar-hover-color: #b8d7b7;
    --mp-bg: #0f1b1e;
    --mp-text: #e6efeb;
    --mp-muted: #a0b3b0;
    --mp-accent: #91bd91;
    --mp-accent-soft: #a5c9a0;
    --mp-card: rgba(22, 39, 42, .88);
    --mp-line: rgba(186, 213, 199, .15);
    --mp-section: #122124;
    --mp-header: rgba(15, 27, 30, .9);
    --mp-shadow: 0 12px 34px rgba(0, 0, 0, .14);
}

.color-darkred {
    color: darkred;
}

@media (max-width: 680px) {
    footer .no-mobile {
        display: none !important;
    }
}

.logout {
    height: 24px;
}

html {
    font-size: 14px;
}

footer a {
    color: var(--mp-accent);
    text-decoration: none;
}

main {
    margin-bottom: 0 !important;
    /*
    min-height: calc(50vh - 60px);
    */
}

.body-container {
    flex-grow: 1;
}

@media (max-width: 680) {

    .main-nav {
        order: 3;
        width: 100%;
        justify-content: center;
        gap: 24px;
        padding-bottom: 5px;
    }

        .main-nav a {
            font-size: 11px;
        }
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

@media (min-width: 575px) {
    .main-nav {
        order: 3;
        width: 100%;
        justify-content: center;
        gap: 24px;
        padding-bottom: 5px;
    }

        .main-nav a {
            font-size: 11px;
        }

    .site-nav {
        min-height: 66px;
        flex-wrap: wrap;
        padding-block: 12px;
    }
}

.dropdown-menu {
    min-width: 50px !important;
}
/*----------------------------*/
[data-bs-theme="light"] .theme-sun {
    background: var(--mp-accent-soft);
    color: #10211f;
}

[data-bs-theme="dark"] .theme-moon {
    background: var(--mp-accent);
    color: #10211f;
}

.site-nav {
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.language-select {
    appearance: none;
    border: 1px solid var(--mp-line);
    color: var(--mp-text);
    background: var(--mp-card);
    border-radius: 20px;
    padding: 7px 24px 7px 10px;
    font-size: 11px;
    cursor: pointer;
    background-position: calc(100% - 10px) 12px, calc(100% - 7px) 12px;
    background-size: 3px 3px, 3px 3px;
    background-repeat: no-repeat;
}

.logout-button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    border: 1px solid var(--mp-line);
    border-radius: 24px;
    color: var(--mp-text);
    background: var(--mp-card);
    cursor: pointer;
    font-size: 11px;
    transition: background .2s, border-color .2s;
}

    .logout-button:hover {
        background: var(--mp-section);
        border-color: var(--mp-accent);
    }

    .logout-button svg {
        width: 14px;
        height: 14px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.theme-toggle {
    padding: 3px;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid var(--mp-line);
    border-radius: 20px;
    color: var(--mp-text);
    background: var(--mp-card);
    cursor: pointer;
}

    .theme-toggle span {
        width: 25px;
        height: 25px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        font-size: 15px;
        line-height: 1;
    }

.main-nav {
    display: flex;
    align-items: center;
    gap: 29px;
    margin-left: 60px;
}

    .main-nav a, .footer-nav a {
        color: var(--mp-muted);
        font-size: 12px;
        transition: color .2s ease;
    }

        .main-nav a:hover, .footer-nav a:hover {
            color: var(--mp-accent);
        }

        .main-nav a.active {
            color: var(--mp-text);
            position: relative;
        }

            .main-nav a.active::after {
                content: "";
                position: absolute;
                left: 0;
                right: 0;
                bottom: -10px;
                height: 1px;
                background: var(--mp-accent);
            }

            .navbar-nav {
                justify-content: center;
                align-items: center;
            }

    /*----------------------------*/

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}


body {
    background: var(--mp-bg);
    color: var(--mp-text);
    font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    transition: background-color .25s ease, color .25s ease;
    display: flex;
    flex-direction: column;
    min-height: calc(100dvh - 60px);
}

/*
    Footer image
*/
.benefits-section {
    position: relative;
    min-height: calc(100vh - 95px);
    overflow: hidden;
    display: flex;
    align-items: center;
    background: var(--mp-bg);
    isolation: isolate;
    /*
    margin-inline: calc((100% - 100vw + 15px) / 2);
    */
}

.button-primary {
    background: #315e4d;
    color: #fff;
}

[data-bs-theme="dark"] .button-primary {
    background: #a3c99f;
    color: #10211f;
}

.benefits-section {
    border-bottom: 1px solid var(--mp-line);
    min-height: 0 !important;
}

    .benefits-section img {
        width: 100%;
        max-height: 50vh;
        object-fit: cover;
        object-position: top;
    }

.footer-image::after {
    content: "";
    position: absolute;
    inset: 45% 0 0;
    background: linear-gradient(0deg, var(--mp-bg), transparent);
}

.footer-image {
    width: 100%;
}
/**/
.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

.logo {
    height: 38px;
}

.lang {
    height: 32px;
}

[data-bs-theme="dark"] .logo {
    filter: invert(1);
}

@media (max-width: 680px) {
    .footer-image{
        display: none;
    }


    .hero-copy h1 br {
        display: none;
    }
}