html {
  font-size: 14px;
}

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

.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;
}

.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;
}

/* wwwroot/css/site.css */

.navbar {
    background-image: url('/images/banknotes-209104.jpg'); /* Cesta k tvojmu obrázku */
    background-size: cover; /* Pokryje celú plochu elementu */
    background-position: center; /* Vycentruje obrázok */
    background-repeat: no-repeat; /* Zabezpečí, že sa obrázok nebude opakovať */
    min-height: 80px; /* Nastav minimálnu výšku lišty, aby bol obrázok viditeľný. Prispôsob podľa potreby */
    /* Voliteľné: Ak chceš, aby text a tlačidlá boli lepšie čitateľné na pozadí */
    /* background-color: rgba(255, 255, 255, 0.7); */ /* Polo-priehľadná biela farba */
    /* background-blend-mode: overlay; */ /* Alebo iný režim prelínania */
}

    /* Voliteľné: Ak máš text na navigačnej lište a potrebuješ ho zviditeľniť */
    .navbar .navbar-brand,
    .navbar .nav-link,
    .navbar .btn {
        color: #fff !important; /* Biely text pre lepšiu čitateľnosť */
        text-shadow: 1px 1px 2px rgba(0,0,0,0.5); /* Tieň pre text */
        /* Ak používaš btn-outline-primary, možno budeš chcieť zmeniť farbu textu a orámovania */
        border-color: #fff; /* Biele orámovanie pre tlačidlá */
    }

    /* Špeciálne pre .btn-outline-primary na pozadí */
    .navbar .btn-outline-primary {
        color: #fff; /* Biely text */
        border-color: #fff; /* Biele orámovanie */
    }

        .navbar .btn-outline-primary:hover {
            background-color: rgba(255,255,255,0.2); /* Jemný biely hover efekt */
            color: #fff;
            border-color: #fff;
        }

.video-background {
    position: fixed; /* Fixná pozícia je lepšia pre video na celom pozadí */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -1; /* Video bude pod ostatným obsahom */
}

    .video-background video {
        min-width: 100%;
        min-height: 100%;
        width: auto;
        height: auto;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        object-fit: cover;
    }

/* Štýly pre obsah nad videom (text, reklamy) */
.content-above-video {
    position: relative; /* Kľúčové pre umiestnenie nad videom */
    z-index: 1; /* Vyšší z-index ako video */
}

    /* Štýly pre reklamné bloky, aby mali vlastné farby */
    .content-above-video .col-md-4 .p-3 {
        /* Tu si môžeš upraviť štýly špecificky pre reklamy */
        /* Napríklad, ak chceš zmeniť farbu textu, ak je iná ako predvolená */
        color: #333; /* Tmavá farba pre text reklám, ak nechceš bielu */
    }

/* Responzívnosť - pre menšie obrazovky môžeš video skryť */
@media (max-width: 768px) {
    .video-background {
        display: none; /* Skryje video na menších zariadeniach */
    }
}
/* Štýly pre obsah nad videom */
.content-above-video {
    position: relative; /* Zabezpečí, že obsah bude nad videom */
    z-index: 1; /* Vyšší z-index ako video */
    color: white; /* Farba textu pre lepšiu čitateľnosť */
    text-align: center;
    padding: 50px; /* Nejaký padding pre obsah */
    /* Môžeš pridať aj pozadie s priehľadnosťou, aby bol text lepšie čitateľný */
    background-color: rgba(0, 0, 0, 0.4); /* Tmavý prekryv pre text */
    min-height: 100vh; /* Ak chceš, aby kontajner zaberal celú výšku viewportu */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Responzívnosť - pre menšie obrazovky môžeš video skryť alebo zmeniť */
@media (max-width: 768px) {
    .video-background {
        display: none; /* Skryje video na menších zariadeniach */
    }

    .content-above-video {
        background-color: #333; /* Pevné pozadie, ak nie je video */
    }
}

/* Vlastné štýly pre tlačidlo "Nahor" */
.btn-scroll-to-top {
    background-color: white; /* Biele pozadie tlačidla */
    border-color: black; /* Čierny okraj */
    color: black; /* Čierna farba textu/ikony */
}

    .btn-scroll-to-top:hover {
        background-color: #f0f0f0; /* Jemný šedý odtieň pri nabehnutí myšou */
        border-color: black;
        color: black;
    }

/* Pre plávajúci bočný panel */
.sticky-sidebar {
    position: sticky;
    top: 20px; /* Vzdialenosť od vrchu obrazovky, kde sa panel "zastaví" */
}