#oferta {
    background-image: linear-gradient(
            rgba(224, 224, 224, 0.5), rgba(224, 224, 224, 0.5));
    background-size: cover;
    background-position: center center;
}

#strona-glowna {
    height: 60vh !important;
}

.kategorie-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 16px;
    justify-items: stretch;
    text-align: justify;
    align-items: stretch;
    margin-top: 32px;
}

.kategorie-element {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100px;
    transition: all 0.3s;

    background: rgb(255, 255, 255);
    border: 1px solid #57A773;

    border-radius: 17px;
    text-align: center;
    cursor: pointer;
    transition: all 0.5s;
    user-select: none;
}

.kategorie-element:hover {
    transform: scale(1.075);
}

.kategorie-element:active {
    transform: scale(1.05) rotateZ(1.7deg);
}

.kategorie-element .nazwa {
    font-size: 28px;
    margin-left: 10px;
    font-weight: bold;
    color: #57A773;
}

.kategorie-element.active {
    background-color: #57A773;
    transform: scale(1.075);
}

.kategorie-element.active .nazwa {
    color: white;
}

.oferty-lista {
    margin-top: 32px;
    display: none;
}

.oferta-element {
    background: #fff;
    border: 1px solid #ddd;
    padding: 15px;
    margin-bottom: 10px;
    border-radius: 8px;
    text-align: left;
}

.oferta-element.animate {
    opacity: 0;
    animation: fadeInUp .4s ease forwards;
}

.oferta-element .nazwa {
    font-size: 20px;
    color: #333;
}

.opis-kategorii {
    margin-top: 20px;
    font-size: 26px;
    color: #555;
    line-height: 1.5;
    position: relative;
}

/* Animacje */
.fade-in {
    opacity: 0;
    animation: fadeIn .35s ease forwards;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Stagger dla elementów ofert */
.oferta-element.animate:nth-child(1){ animation-delay: .05s; }
.oferta-element.animate:nth-child(2){ animation-delay: .1s; }
.oferta-element.animate:nth-child(3){ animation-delay: .15s; }
.oferta-element.animate:nth-child(4){ animation-delay: .2s; }
.oferta-element.animate:nth-child(5){ animation-delay: .25s; }

/* Skeleton loader */
.skeleton-line {
    height: 18px;
    width: 100%;
    margin: 8px 0;
    border-radius: 6px;
    background: linear-gradient(90deg,#e3e3e3 25%,#f2f2f2 37%,#e3e3e3 63%);
    background-size: 400% 100%;
    animation: skeleton 1.15s ease-in-out infinite;
}
.skeleton-line.wide { width: 90%; }
.skeleton-line.mid { width: 60%; }
.skeleton-line.small { width: 35%; }

@keyframes skeleton {
    from { background-position: 0% 50%; }
    to { background-position: 100% 50%; }
}

.loader-box {
    margin-top: 18px;
}

.loader-box.compact .skeleton-line { height: 14px; }

/* Styl komunikatów */
.loading, .error, .empty {
    font-size: 18px;
    color: #444;
    margin: 14px 0;
}
.error { color: #b22; }
.empty { color: #777; }

/* Pojemnik ofert z miękkim wejściem */
.oferty-lista.fade-container, #opis-kategorii.fade-container {
    transition: opacity .25s ease, transform .25s ease;
    will-change: opacity, transform;
}
.fade-container.hidden-phase { opacity:0; transform: translateY(6px); }
.fade-container.visible-phase { opacity:1; transform: translateY(0); }