/* ========================================================================= */
/* 0. ŠTÝLY PRE BANNER */
/* ========================================================================= */

/* Hlavný kontajner pre banner */
.banner-wrapper {
    /* Nastaví kontajner tak, aby sa obrázok nepretiahol */
    width: 100%;
    /* Obmedzí výšku kontajnera */
    max-height: 1200px; /* PRÍKLAD: Výška, ktorú chcete dosiahnuť */
    overflow: hidden; /* Dôležité: Skryje presahujúce časti obrázka, ak je potrebné */
    margin-top: -20px;
    margin-bottom: 20px; /* Voliteľné: priestor pod bannerom */
    border-radius: 5px; /* Voliteľné: zaoblené rohy */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Voliteľné: jemný tieň */
}

/* Štýly pre samotný obrázok bannera */
.custom-banner-height {
    height: 1200px; /* MUSÍ BYŤ ROVNAKÁ AKO max-height v .banner-wrapper pre konzistentnosť */
    
    /* Zabezpečí, že obrázok vyplní priestor bez deformácie (dôležité pre rôzne rozmery) */
    object-fit: cover; 
    
    /* Zabezpečí centráciu, ak obrázok musí byť orezaný */
    object-position: center center; 
}

/* Voliteľné: Zmenšenie výšky pre menšie obrazovky */
@media (max-width: 768px) {
    .banner-wrapper {
        max-height: 450px; /* Nižší banner na mobiloch */
    }
    .custom-banner-height {
        height: 450px;
    }
}

/* ========================================================================= */
/* 1. ŠTÝL ZÁLOŽIEK (NAVIGÁCIA) - Prispôsobené pre Bootstrap 5 .nav-tabs */
/* ========================================================================= */

.needs-validation .nav-tabs { 
    /* Základný kontajner pre záložky */
    list-style: none !important; 
    padding: 0 !important;
    margin: 0 0 -2px 0 !important; 
    display: flex; 
    border-bottom: 2px solid #ddd; 
    flex-wrap: wrap; 
}

.needs-validation .nav-item { 
    margin: 0 5px 0 0 !important;
    padding: 0 !important;
}

.needs-validation .nav-link { 
    /* Neaktívne záložky */
    display: block !important;
    padding: 10px 15px !important;
    text-decoration: none !important;
    color: #555 !important;
    background-color: #f7f7f7 !important;
    border: 1px solid #ddd !important;
    border-bottom: none !important;
    border-radius: 5px 5px 0 0;
    transition: all 0.2s ease-in-out;
}

/* ------------------------------------------------------------------------- */
/* 2. ŠTÝL AKTÍVNEJ ZÁLOŽKY (.nav-link.active) */
/* ------------------------------------------------------------------------- */

.needs-validation .nav-link.active { 
    background-color: #ffffff !important; 
    color: #333 !important;
    border-color: #ddd !important;
    /* !!! KLÚČOVÉ: Spodný okraj aktívnej záložky je biely, aby prekryl spodnú čiaru */
    border-bottom-color: #ffffff !important; 
    font-weight: 700 !important;
    transform: translateY(1px) !important; 
    box-shadow: none !important;
}

/* ------------------------------------------------------------------------- */
/* 3. ŠTÝL ZÁLOŽKY PRI HOVERI (.nav-link:hover) */
/* ------------------------------------------------------------------------- */

.needs-validation .nav-link:hover {
    color: #111 !important;
    background-color: #f0f0f0 !important;
    border-color: #ccc !important;
    border-bottom: none !important;
}

/* ========================================================================= */
/* 4. VŠEOBECNÉ ŠTÝLY PRE FORMULÁROVÉ PRVKY */
/* ========================================================================= */

.needs-validation .form-control, 
.needs-validation select.form-select,
.needs-validation textarea { 
    width: 100% !important; 
    padding: 10px !important;
    border: 1px solid #dcd4da !important; 
    border-radius: 4px !important; 
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    box-sizing: border-box !important; 
    margin-top: 5px !important; 
}

/* Štýl pri fokuse (kliknutí na pole) */
.needs-validation .form-control:focus { 
    border-color: #80bdff !important; 
    outline: 0 !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25) !important;
}

.needs-validation .form-group {
    margin-bottom: 15px !important; 
}

/* ========================================================================= */
/* 5. ŠTÝLOVANIE NEVALIDNÝCH/POVINNÝCH POLÍ (.is-invalid) */
/* ========================================================================= */

/* !!! NOVÉ: Zrušenie zelenej "OK" ikonky pre validné polia !!! */
/* Cieľuje všetky prvky, ktoré by mohli zobraziť zelenú ikonu. */
.needs-validation .form-control:valid,
.needs-validation .form-control.is-valid,
.needs-validation select.form-select:valid,
.needs-validation select.form-select.is-valid,
.needs-validation textarea:valid,
.needs-validation textarea.is-valid {
    background-image: none !important; /* Odstráni Bootstrap ikonu */
    padding-right: 10px !important; /* Zabezpečí normálny padding, ktorý ikona mení */
}

/* Zvýraznenie input/select/textarea poľa červeným okrajom */
.needs-validation input.form-control.is-invalid, 
.needs-validation textarea.form-control.is-invalid,
.needs-validation select.form-select.is-invalid {
    /* Zabezpečuje, že červený okraj ostane viditeľný */
    border-color: #dc3545 !important; 
}

/* Zobrazenie chybovej správy (Bootstrap invalid-feedback) */
.needs-validation .invalid-feedback {
    display: none; 
    width: 100%;
    margin-top: 0.25rem;
    font-size: 0.875em;
    color: #dc3545; 
}

/* Manuálne vynútenie zobrazenia chybovej správy (pre JS) */
.needs-validation .is-invalid ~ .invalid-feedback {
    display: block !important;
}

/* Špeciálne štýly pre chybový súhrn nad záložkou */
.needs-validation .tab-validation-error-summary {
    display: none;
    margin-bottom: 15px;
    padding: 10px;
    border: 1px solid #dc3545;
    background-color: #f8d7da;
    color: #721c24;
    border-radius: 5px;
}

/* ========================================================================= */
/* 6. VŠEOBECNÉ ŠTÝLY PRE FORMULÁR A SEKCIE */
/* ========================================================================= */

.needs-validation .person-form-section {
    padding: 15px; 
    border: 1px solid #ddd;
    border-radius: 0 5px 5px 5px; 
    background-color: #ffffff;
}

.needs-validation h3 {
    font-size: 20px !important;
    font-weight: 600 !important;
    color: #333 !important;
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
    margin-top: 0 !important;
}

/* Štýl tlačidla 'Pokračovať' */
.needs-validation .btn-next-tab {
    background-color: #007bff !important; 
    color: #fff !important;
    border: none !important;
    padding: 10px 20px !important;
    border-radius: 5px !important;
    transition: background-color 0.2s;
    font-weight: 600;
}

.needs-validation .btn-next-tab:hover {
    background-color: #0056b3 !important; 
}

/* ========================================================================= */
/* 7. ŠTÝLY PRE LOADING (pre AJAX kontrolu RČ) */
/* ========================================================================= */

.form-control.is-loading {
    /* Mierne zošednutie, aby bolo vidieť, že sa niečo deje */
    opacity: 0.6; 
    cursor: wait;
}

/* Prípadné vizuálne upozornenie, že sa prebieha DB kontrola */
.form-control.is-loading::after {
    content: '...kontrola DB';
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #007bff; /* Modrá farba pre indikáciu spracovania */
    font-size: 0.9em;
    /* Zabezpečenie, že sa zmestí vedľa inputu v rámci jeho kontajnera (ak je position: relative) */
}

/* Ak je input v .form-group, pridajte .form-group {position: relative;} */
.form-group {
    position: relative;
}