/* Add your own styles here */

/* UI KIT ZIKOM - CUSTOM STYLES */

@layer components {
    /* Przyciski */
    .btn-zikom-primary {
        @apply bg-[#82bc00] text-white font-bold py-3 px-8 rounded-full transition-all duration-300 hover:bg-[#6e9e00] hover:shadow-lg inline-block text-center uppercase tracking-wide;
    }

    .btn-zikom-outline {
        @apply border-2 border-[#005696] text-[#005696] font-bold py-3 px-8 rounded-full transition-all duration-300 hover:bg-[#005696] hover:text-white inline-block text-center uppercase tracking-wide;
    }

    /* Karty Inwestycyjne (np. pakiety) */
    .zikom-card {
        @apply bg-white border border-gray-200 rounded-2xl p-6 shadow-sm hover:shadow-xl transition-shadow duration-300;
    }

    .zikom-card-header {
        @apply text-[#005696] text-2xl font-black mb-4;
    }

    /* Sekcje i tła */
    .bg-zikom-gradient {
        background: linear-gradient(135deg, #005696 0%, #003d6b 100%);
    }

    .section-title {
        font-size: 2.25rem !important;
        font-weight: 900 !important;
        color: #005696 !important;
        margin-bottom: 1.5rem !important;
        position: relative;
        line-height: 1.15 !important;
        letter-spacing: -0.01em !important;
    }
    
    @media (min-width: 768px) {
        .section-title {
            font-size: 2.75rem !important;
            margin-bottom: 2rem !important;
        }
    }
    
    @media (min-width: 1024px) {
        .section-title {
            font-size: 3.25rem !important;
        }
    }
    
    .section-title::after {
        content: '';
        display: block;
        width: 4rem;
        height: 0.25rem;
        background: linear-gradient(to right, #82bc00, #005696);
        border-radius: 9999px;
        margin-top: 0.75rem;
    }
    
    @media (min-width: 768px) {
        .section-title::after {
            width: 5rem;
            height: 0.3rem;
            margin-top: 1rem;
        }
    }

    /* Odznaki / Badge (np. "% zysku") */
    .zikom-badge {
        @apply bg-[#ffcc00] text-[#1d1d1b] font-bold px-4 py-1 rounded-full text-sm uppercase;
    }
}