body {
    display:flex;
    flex-direction: column;
    min-height: 100vh;
}
.background-grid-orange:nth-of-type(2)::before {
    background-image: url("../dist/images/uri_ifs___M_ROq-mCFRdVBDFeLGd4mzBbQw1QcN06TPec13zdz5lGY.webp");
}

.background-grid-orange:nth-of-type(3)::before {
    background-image: url("../dist/images/uri_ifs___M_jBhHQhBbYsR30fJXIolY7GsYFteXXNUi0gDz__jfbGc.webp");
}

.background-grid-violet:nth-of-type(2)::before {
    background-image: url("../dist/images/uri_ifs___M_ROq-mCFRdVBDFeLGd4mzBbQw1QcN06TPec13zdz5lGY.webp");
}

.background-grid-violet:nth-of-type(3)::before {
    background-image: url("../dist/images/uri_ifs___M_jBhHQhBbYsR30fJXIolY7GsYFteXXNUi0gDz__jfbGc.webp");
}

.standard-container {
    max-width:1140px;
}

.menu {
    position: fixed;
    width:100%;
    top: 0;
    z-index: 1000;
}

.sticky-menu {
    background-color: #444891;
}

.white-icon-rounded {
    background-color: white;
    padding:8px;
}

.mockup {
    -webkit-box-shadow: 0px 10px 13px -7px #000000, 5px 5px 15px 5px rgba(0,0,0,0);
    box-shadow: 0px 10px 13px -7px #000000, 5px 5px 15px 5px rgba(0,0,0,0);
}

.default-form-style2 {
    background-color: #e6eafd;  color: #444891; border-radius: 30px; margin: 15px 0;
}

.default-form-style {
    background-color: #e6eafd; padding: 20px 30px; color: #444891; border-radius: 30px; margin: 15px 0;
}

.default-form-style::placeholder {
    color: rgba(68, 72, 145, .5);
}

.checkbox-custom {
    display: none;
}

.checkbox-custom + label {
    cursor: pointer;
    position: relative;
    padding-left: 30px;
}

.checkbox-custom + label:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 20px;
    height: 20px;
    border: 2px solid #ddd;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.checkbox-custom:checked + label:before {
    background-color: #444891;
    border-color: #444891;
    box-shadow: 0 0 0 5px #e6eafd;
}

.checkbox-custom:checked + label:after {
    content: '\2714';
    position: absolute;
    top: -2px;
    left: 4px;
    color: white;
}

.radio-custom {
    /* Ukrywa element wizualnie, ale pozostawia go dostępnym
       dla przeglądarki (dla walidacji 'required') i czytników ekranu. */
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.radio-custom + label {
    cursor: pointer;
    position: relative;
    padding-left: 30px; /* Miejsce na nasz przycisk */
}

/* To jest nasze niestandardowe kółko */
.radio-custom + label:before {
    content: '';
    position: absolute;
    left: 0;
    /* Lekko podniesione, aby zgadzało się z linią tekstu */
    top: 2px;
    width: 20px;
    height: 20px;
    border: 2px solid #ddd;
    /* KLUCZOWA ZMIANA: Robi kółko zamiast kwadratu */
    border-radius: 50%;
    transition: all 0.3s ease;
    box-sizing: border-box; /* Lepsze zarządzanie rozmiarem */
}

/* Style kółka po zaznaczeniu */
.radio-custom:checked + label:before {
    background-color: #444891;
    border-color: #444891;
    box-shadow: 0 0 0 5px #e6eafd;
}

.radio-custom:checked + label:after {
    content: '';
    position: absolute;

    /* Rozmiar kropki (możesz dowolnie zmieniać, np. na 8px) */
    width: 6px;
    height: 6px;

    /* 1. Ustawiamy kropkę w geometrycznym środku kółka (:before) */
    /* top = (top kółka: 2px) + (połowa wysokości kółka: 20px / 2 = 10px) = 12px */
    top: 12px;
    /* left = (left kółka: 0px) + (połowa szerokości kółka: 20px / 2 = 10px) = 10px */
    left: 10px;

    /* 2. Przesuwamy kropkę o połowę jej własnej wielkości, aby ją wycentrować */
    transform: translate(-50%, -50%);

    background-color: white;
    border-radius: 50%;
}



.login-box {
    background-color:#444891;
    padding:40px;
    color:white;
}

.menu-logout-button {
    color:white;position:absolute;top:88px; padding:20px 40px; width:100%; display: none;
}

.menu-logout-button.sticky-button {
    background-color: #444891;
}

.form-account-wrapper .account-item {
    margin: 10px 0;
    display:flex;
    align-items: center;
    gap:20px;
    justify-content: center;
}

.form-account-wrapper .account-item input {
    flex-grow:1;
}

.form-account-wrapper .account-item p {
    color:#444891;
    font-weight: bold;
    font-size: 20px;
}

.form-account-wrapper .account-item .default-form-style {
    padding: 10px 30px;
}


/* --- GŁÓWNY STYL KONTENERA GRIDU --- */
.grid-container {
    display: grid; /* Uruchamia tryb siatki (grid) */
    grid-template-columns: repeat(4, 1fr); /* Tworzy 4 elastyczne kolumny o równej szerokości */
    gap: 15px; /* Określa odstęp między komórkami */
    max-width: 900px;
    margin: 40px auto;
    width:100%;
}

/* --- STYL POJEDYNCZEJ KOMÓRKI --- */
.grid-item {
    font-size: 1.2rem;
    /* Używamy flexboxa do idealnego wyśrodkowania zawartości w komórce */
    display: flex;
}

/* --- KLUCZOWY STYL DLA ŚRODKOWEGO RZĘDU --- */
.full-width-row {
    grid-column: 1 / -1; /* Komórka rozciąga się od 1. linii siatki do ostatniej (-1) */
    border-top:1px solid #444891;
}

.subscriptionBox {
    cursor:pointer;
}

.subscriptionBox.active {
    border:3px solid #df6d2e;
}


.main-nav {
    list-style-type: none;
    display: flex; /* Ustawia elementy w jednej linii */
}

.main-nav > li > a {
    display: flex; /* Linki wypełniają całą wysokość li */
    color: white;
    text-decoration: none;
    transition: background-color 0.3s ease;
    gap:4px;
}

/* --- KLUCZOWE ELEMENTY MENU ROZWIJANEGO --- */

/* 1. Kontener dla elementu rozwijanego */
.dropdown {
    position: relative; /* Niezbędne, aby szuflada pozycjonowała się względem tego elementu */
}

/* 2. Szuflada (domyślnie ukryta) */
.dropdown-drawer {
    /* Pozycjonowanie */
    position: absolute;
    top: 100%; /* Ustawia szufladę tuż pod elementem nadrzędnym */
    right: 0;

    /* Wygląd */
    border-radius: 0 0 5px 5px;
    min-width: 250px; /* Szerokość szuflady */
    list-style-type: none; /* Ukrycie kropek z listy */
    z-index: 1000; /* Upewnia się, że szuflada jest na wierzchu */

    /* Ukrywanie i animacja */
    visibility: hidden; /* Ukrywa element, ale zachowuje jego miejsce */
    opacity: 0;
    transform: translateY(-10px); /* Lekkie przesunięcie w górę dla animacji */
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
    padding-top:20px;
}

/* 3. Pokazanie szuflady po najechaniu na kontener .dropdown */
.dropdown:hover .dropdown-drawer {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

/* 4. Style dla opcji wewnątrz szuflady */
.dropdown-drawer li a {
    display: block;
    padding: 12px 20px;
    text-decoration: none;
    color: white;
    transition: background-color 0.2s ease;
    text-align: right;
}

.dropdown-drawer li a:hover {
    background-color: #444891;
}

.dropdown-drawer.sticky-drawer {
    background-color: #444891;
}

.dropdown-drawer.sticky-drawer li a:hover {
    background-color: #aab6e9;
}

.bg-document {
    width:160px;
    background-size: 160px 200px;
    background-repeat: no-repeat;
    height: 200px;
    background-image: url(../dist/images/bg-document.png);
    background-position: top;
}

.image-document {
    width: 110px;
    display: block;
    margin: 0 auto;
    padding-top: 30px;
}

.cursorPointer {
    cursor:pointer;
}


.news-section {
    width:100%;
    background-color: #fff;
}

.news-section h2.section-title {
    text-align: center;
    margin-bottom: 30px;
    font-size: 2em;
    color: #333;
}

/* --- Główny kontener flexbox (dwie kolumny) --- */
.news-container {
    display: flex;
    gap: 70px; /* Odstęp między kolumnami */
}

/* --- LEWA KOLUMNA: Wyróżniony artykuł --- */
.featured-article {
    flex: 1; /* Zajmuje 2/3 dostępnej przestrzeni */
    position: relative; /* Potrzebne do nałożenia tytułu */
    overflow: hidden; /* Ukrywa wystające elementy */
    height: 370px; /* Stała wysokość dla estetyki */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4); /* <-- DODAJ TĘ LINIĘ */
}

.featured-article img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Zdjęcie wypełnia kontener bez zniekształceń */
    transition: transform 0.3s ease;
}

.featured-article:hover img {
    transform: scale(1.05); /* Efekt lekkiego przybliżenia */
}

.featured-title-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 30px 20px 20px;
    color: white;
    background-color: rgb(223, 109, 46, .65);
    box-sizing: border-box; /* Padding wliczony w szerokość */

}

.featured-title-overlay h3 {
    margin: 0;
    margin-bottom: 10px;
    font-size: 1.4em;
    font-weight: bold;
}

.featured-title-overlay a {
    color: inherit; /* Dziedziczy biały kolor */
    text-decoration: none;
}

.featured-title-overlay a:hover {
    text-decoration: underline;
}

/* --- PRAWA KOLUMNA: Lista artykułów --- */
.article-list {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* <-- DODAJ TĘ LINIĘ */
    /* gap: 20px; <-- USUŃ LUB ZAKOMENTUJ TĘ LINIĘ */
}

/* --- Pojedynczy box z artykułem w prawej kolumnie --- */
.small-article-card {
    display: flex;
    gap: 15px; /* Odstęp między zdjęciem a tekstem */
    align-items: center; /* Wyrównuje elementy do środka w pionie */
    border-bottom: 1px solid #bcc8fa;
    padding-bottom:20px;
}

.small-article-card .img-container {
    flex-shrink: 0; /* Zapobiega kurczeniu się obrazka */
    width: 80px;
    height: 60px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4); /* <-- DODAJ TĘ LINIĘ */
}

.small-article-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.small-article-content h4 {
    margin: 0 0 5px 0;
    font-size: 1em;
}

.small-article-content h4 a {
    color: #444891;
    text-decoration: none;
    font-weight: bold;
}

.small-article-content h4 a:hover {
    color: #007BFF;
}

.small-article-content p {
    margin: 0;
    font-size: 0.8em;
    color: #444891;
    line-height: 1.4;
}

.thumbs-box .carousel {
    width: 90%;
    max-width: 800px;
    position: relative;
}

.thumbs-box .carousel-viewport {
    width: 100%;
    overflow: hidden;
    border-radius: 10px;
}

.thumbs-box .carousel-track {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.thumbs-box .carousel-slide {
    flex: 0 0 25%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 3rem;
    color: #333;
    box-sizing: border-box;
    border: 2px solid white;
    padding:10px;
}

.thumbs-box .carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: #444891;
    border: none;
    cursor: pointer;
    z-index: 10;
    border-radius: 50%;
    width: 25px;
    height: 25px;

    /* --- NOWE WŁAŚCIWOŚCI TŁA --- */
    background-repeat: no-repeat;  /* Zapobiega powtarzaniu obrazka */
    background-position: center;   /* Wyśrodkowuje obrazek w przycisku */
    background-size: 50%;          /* Skaluje obrazek do 50% rozmiaru przycisku */
}

/* Nowa reguła dla przycisku "poprzedni" */
.thumbs-box .carousel-btn.prev {
    background-image: url('../dist/images/left-arrow-carousel.png'); /* Upewnij się, że ścieżka jest poprawna */
    left: -5px;
}

/* Nowa reguła dla przycisku "następny" */
.thumbs-box .carousel-btn.next {
    background-image: url('../dist/images/right-arrow-carousel.png'); /* Upewnij się, że ścieżka jest poprawna */
    right: -5px;
}

.thumbs-box .carousel-slide img {
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.28);

}

/* --- Responsywność (dla ekranów poniżej 768px) --- */
@media (max-width: 768px) {
    .news-container {
        flex-direction: column; /* Zmienia układ na wierszowy */
        padding:40px;
    }
    .featured-article {
        height: 300px; /* Zmniejsza wysokość na mniejszych ekranach */
    }
    .article-list {
        gap:20px;
    }
    .small-article-card {
        flex-direction: column;
    }
}

.tooltip-host {
    position: relative; /* Kluczowe, aby tooltip pozycjonował się względem tego elementu */
    cursor: pointer;
}

.tooltip-host::after {
    content: attr(data-tooltip); /* Pobiera tekst z atrybutu data-tooltip */
    position: absolute;
    bottom: 110%; /* Pozycjonuje chmurkę nad elementem */
    left: 50%;
    transform: translateX(-50%); /* Wyśrodkowuje chmurkę idealnie */

    /* Wygląd */
    background-color: #444891;
    color: #fff;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 14px;
    white-space: nowrap; /* Zapobiega łamaniu tekstu */

    /* Ukrycie i animacja */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 10;
}

/* Pokazanie chmurki po najechaniu myszką */
.tooltip-host:hover::after {
    opacity: 1;
    visibility: visible;
}

.pagination {
    margin: 40px auto 0 auto;
}

.pagination ul {
    font-size: 14px;
    margin: 10px auto;
    text-align: center;
    display: flex;
    gap:10px;
}

.pagination ul li {
    margin: 10px 0;
}

.pagination ul li a {
    padding:5px 10px;
    border: 2px solid #444891;
    border-radius: 35px;
    font-weight: bold;
    color:#444891;
}
.pagination ul li.active span {
    padding:5px 10px;
    border: 2px solid #444891;
    border-radius: 35px;
    font-weight: bold;
    background-color: #df6d2e;
    color:white;
}

.pagination ul li.disabled {
    display: none;
}

select {
    -webkit-appearance: none; /* dla Chrome, Safari, nowszej Opery */
    -moz-appearance: none;    /* dla Firefox */
    appearance: none;         /* standardowa właściwość */

    background-image: url('../dist/images/down-arrow.png');
    background-repeat: no-repeat;
    background-position: right 0.7rem center;
    background-size: 1.2em;
}

select::-ms-expand {
    display: none;
}


.document-description p {
    margin-bottom:10px;
}

.bg-document-list {
    width: 171px;
    background-size: 159px 198px;
    background-repeat: no-repeat;
    height: 200px;
    background-image: url(../dist/images/bg-document.png);
    background-position: top;
}

.bg-document-list .image-document-list {
    width: 120px;
    display: block;
    margin: 0 auto;
    position: relative;
    top: 17px;
    left: -1px;
}

.alert.alert-error {
    color: red;
}

.background-static {
    z-index: 1;
    background-color: #444891;
    position: relative;
}

summary {
    list-style: none; /* Ukrywa domyślny marker (strzałkę) */
}
summary::-webkit-details-marker {
    display: none; /* Ukrywa marker w Chrome/Safari */
}

.document-description p {
    color: #444891!important;
}

.app-hidden-drawer {
    transform: translateX(-100%);
}

/* 1. Otwiera Szufladę Menu */
.app-drawer-open #app-mobile-drawer {
    transform: translateX(0)!important;
}

/* 2. Pokazuje Overlay */
.app-drawer-open #app-drawer-overlay {
    opacity: 75%;
    pointer-events: auto; /* Włącza interakcję (możliwość kliknięcia w tło, aby zamknąć) */
}

.expandIconWrapper, .collapseIconWrapper {
    position:relative;
    width:100%;
}

.expandIconWrapper::before, .collapseIconWrapper::before {
    content: ''; /* Wymagane, aby pseudoelement był widoczny */
    position: absolute;
    top: -10px   ; /* Ustawienie pozycji od góry (dostosuj wartość) */
    left: 0;
    right: 0;
    height: 2px; /* Grubość kreski */
    background-color: #444891; /* Kolor kreski (zmień na swój) */
    z-index: 10; /* Aby kreska była nad obrazem */
}

.alerts {
    opacity: 1; /* Początkowo w pełni widoczne */
    transition: opacity 2s ease-out; /* Przejście będzie trwało 2 sekundy */
}

/* Klasa, która spowoduje zniknięcie */
.alerts.fade-out {
    opacity: 0; /* Stan końcowy: niewidoczne */
    /*
     * Po osiągnięciu opacity: 0,
     * możesz ustawić 'display: none' po opóźnieniu,
     * aby element nie blokował kliknięć, ale to jest opcjonalne.
     */
}

.connector {
    position: relative;
    flex-grow: 1; /* Linia zajmuje dostępną przestrzeń */
    height: 3px; /* Grubość linii */
    background-color: #df6d2e; /* Zielony kolor dla ukończonych kroków */
    border-radius: 35px;
}

/* Okrąg z numerem kroku */
.step-circle {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: bold;
    transition: all 0.3s ease-in-out;
    z-index: 10; /* Nad linią */
    position: relative;
    flex-shrink: 0; /* Zapobiega skurczeniu okręgu na małych ekranach */
}

/* Styl dla aktywnego kroku (obecnie w nim jesteśmy) */
.step-active .step-circle {
    background-color: #df6d2e;
    color: white;
    border: 2px solid #df6d2e; /* Ciemniejsza ramka dla wyróżnienia */
}


/* Styl dla ukończonego kroku */
.step-complete .step-circle {
     /* Ciemniejsza zieleń */
    color: #df6d2e;
    border: 2px solid #df6d2e;
}

.step-incomplete .step-circle {
    /* Ciemniejsza zieleń */
    color: #df6d2e;
    border: 2px solid #df6d2e;
}

/* Ustawienia dla etykiet kroków - kluczowe dla responsywności! */
.step-label {
    margin-top: 8px;
    font-size: 0.875rem; /* small text */
    text-align: center;
    /* Ukrycie pełnej etykiety na najmniejszych ekranach, aby zapobiec przepełnieniu */
    display: none;
}

/* Pokazywanie etykiet na urządzeniach mobilnych (sm) */
@media (min-width: 640px) {
    .step-label {
        display: block; /* Pokaż etykietę od rozmiaru 'sm' w górę */
    }
}

.custom-answer p, .custom-answer h3 {
    margin: 10px 0;
}

.custom-answer-page ul {
    list-style-type: disc;
    padding-left:20px;
}

.custom-answer-page .blurred {
    filter: blur(4px);
    user-select: none;
    pointer-events: none;
}