/**
 * BABY PREMIUM HEADER v3.0 - MODULAR
 * Ultra Modern Glass-morphism Design with Advanced Animations
 * Built with Bootstrap 5 + Custom Variables + Performance Optimizations
 * 
 * Struktura modułowa:
 * - _variables.css - Zmienne CSS
 * - _core.css - Podstawowe style headera
 * - _logo.css - Style logo i brandingu
 * - _navigation.css - Nawigacja i mega menu
 * - _mega-menu-cta.css - CTA w mega menu
 * - _buttons.css - Przyciski akcji
 * - _mobile.css - Responsywność i mobile menu
 * - _mobile-pro.css - Zaawansowane mobile menu
 * - _search.css - Search overlay i utility komponenty
 * - _animations.css - Animacje i FAB buttons
 * - _outside-elements.css - Elementy poza headerem
 */

/* Importy komponentów */
@import url('components/_variables.css');
@import url('components/_core.css');
@import url('components/_logo.css');
@import url('components/_navigation.css');
@import url('components/_mega-menu-cta.css');
@import url('components/_buttons.css');
@import url('components/_mobile.css');
@import url('components/_mobile-pro.css');
@import url('components/_search.css');
@import url('components/_animations.css');
@import url('components/_outside-elements.css');
@import url('components/_scroll-reveal-integration.css');

/**
 * UWAGA: Usunięto redundantny CSS który był duplikowany z Bootstrap 5:
 * 
 * Usunięte style Bootstrap (już zawarte w frameworku):
 * - .container, .container-fluid
 * - .navbar, .navbar-expand-*
 * - .nav, .nav-link, .nav-item
 * - .dropdown, .dropdown-menu, .dropdown-item
 * - .btn, .btn-primary, .btn-outline-*
 * - .d-*, .flex-*, .align-*, .justify-*
 * - .position-*, .fixed-top, .sticky-top
 * - .text-*, .bg-*, .border-*
 * - .m-*, .p-*, .mb-*, .me-*, etc.
 * - Media query breakpoints (używamy Bootstrap)
 * - Grid system (.row, .col-*)
 * - Utility classes
 * 
 * Zachowane tylko:
 * - Customowe style specyficzne dla Baby
 * - Glass-morphism effects
 * - Zaawansowane animacje
 * - Niestandardowe komponenty (FAB, PRO mobile menu)
 * - Custom properties (CSS variables)
 * - Specjalne hover effects
 */

/* ========================================
   FIRMA SWIPER - CARDS EFFECT STYLING
   ======================================== */

/* Fix dla zaokrągleń w Swiper cards/creative effect */
.firma-swiper .swiper-slide {
    border-radius: 1rem !important; /* Bootstrap rounded-4 = 1rem */
    overflow: hidden !important;
    height: 100% !important; /* Wymusza pełną wysokość */
}

.firma-swiper .swiper-slide .firma-card {
    border-radius: 1rem !important;
    overflow: hidden !important;
    height: 100% !important;
}

/* Ensure proper stacking and shadows */
.firma-swiper.swiper-creative .swiper-slide {
    border-radius: 1rem !important;
    overflow: hidden !important;
    height: 100% !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

/* Swiper wrapper height */
.firma-swiper .swiper-wrapper {
    height: 100% !important;
}

/* Container height */
.firma-swiper {
    height: 100% !important;
    min-height: 500px;
}

/* Swiper container proper centering */
.firma-swiper .swiper-container {
    overflow: visible;
}

/* ========================================
   FIRMA SWIPER - ENHANCED STYLING
   ======================================== */

/* Smooth transitions for all slides */
.firma-swiper .swiper-slide img {
    transition: transform 0.3s ease;
}

/* Active slide enhancement */
.firma-swiper .swiper-slide-active {
    z-index: 2;
}

/* Enhanced shadow for active card */
.firma-swiper .swiper-slide-active > div {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15) !important;
}

/* ========================================
   BRAND OVERLAY FOR INACTIVE SLIDES - NATYWNE KLASY SWIPER
   ======================================== */

/* Brand overlay dla nieaktywnych slajdów - używa natywnych klas Swiper */
.firma-swiper .swiper-slide:not(.swiper-slide-active)::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(var(--bs-body-bg-rgb), 0.9); /* Overlay jak domyślnie */
    transition: opacity 0.3s ease;
    border-radius: 1rem;
    pointer-events: none;
    z-index: 1;
}

[data-bs-theme="dark"] .firma-swiper .swiper-slide:not(.swiper-slide-active)::after {
    background: rgba(var(--bs-brand-rgb, 200,200,180), 0.35); /* Overlay jaśniejszy w dark */
}

/* Aktywny slajd - brak overlay */
.firma-swiper .swiper-slide-active::after {
    opacity: 0;
}

/* Alternatywny gradient overlay dla ciekawszego efektu */
.firma-swiper .swiper-slide:not(.swiper-slide-active).gradient-overlay::after {
    background: linear-gradient(45deg, 
        rgba(134, 127, 94, 0.8) 0%, 
        rgba(134, 127, 94, 0.4) 50%, 
        rgba(134, 127, 94, 0.7) 100%);
}

/* Hover effect - zmniejsz overlay przy najechaniu na nieaktywnym slajdzie */
.firma-swiper .swiper-slide:not(.swiper-slide-active):hover::after {
    opacity: 0.3;
}

/* ========================================
   FIRMA SWIPER PAGINATION - CREATIVE DOTS
   ======================================== */

/* Show pagination (remove display: none) */

/* Custom pagination dots for firma swiper */
.firma-swiper .swiper-pagination-bullet {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(var(--bs-brand-rgb), 0.3), rgba(var(--bs-brand2-rgb), 0.3));
    border: 2px solid rgba(var(--bs-brand-rgb), 0.2);
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 1;
    margin: 0 4px;
    position: relative;
    overflow: hidden;
}

.firma-swiper .swiper-pagination-bullet::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: var(--bs-brand);
    border-radius: 50%;
    transition: all 0.4s ease;
    transform: translate(-50%, -50%);
}

.firma-swiper .swiper-pagination-bullet:hover {
    transform: scale(1.3);
    border-color: var(--bs-brand);
}

.firma-swiper .swiper-pagination-bullet:hover::before {
    width: 8px;
    height: 8px;
}

.firma-swiper .swiper-pagination-bullet-active {
    background: linear-gradient(135deg, var(--bs-brand), var(--bs-brand2));
    border-color: var(--bs-brand);
    transform: scale(1.4);
    box-shadow: 0 4px 20px rgba(var(--bs-brand-rgb), 0.4);
}

.firma-swiper .swiper-pagination-bullet-active::before {
    width: 6px;
    height: 6px;
    background: white;
}

/* Pulse animation for active pagination bullet */
@keyframes pulse-brand {
    0% {
        box-shadow: 0 0 0 0 rgba(var(--bs-brand-rgb), 0.4);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(var(--bs-brand-rgb), 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(var(--bs-brand-rgb), 0);
    }
}

.firma-swiper .swiper-pagination-bullet-active {
    animation: pulse-brand 2s infinite;
}

/* Loading state for pagination */
.firma-swiper .swiper-pagination-bullet.loading {
    background: linear-gradient(45deg, var(--bs-brand), var(--bs-brand2));
    animation: pulse-brand 1s infinite;
}

/* Responsive sizing for pagination dots */
@media (min-width: 769px) and (max-width: 1024px) {
    .firma-swiper .swiper-pagination-bullet {
        width: 14px;
        height: 14px;
    }
}

@media (min-width: 1200px) {
    .firma-swiper .swiper-pagination-bullet {
        width: 18px;
        height: 18px;
        margin: 0 6px;
    }
}

/* Mobile pagination dots */
@media (max-width: 768px) {
    .firma-swiper .swiper-pagination-bullet {
        width: 12px;
        height: 12px;
        margin: 0 3px;
    }
    
    .firma-swiper .swiper-pagination-bullet:hover::before {
        width: 6px;
        height: 6px;
    }
    
    .firma-swiper .swiper-pagination-bullet-active::before {
        width: 4px;
        height: 4px;
    }
    
    .firma-swiper .swiper-pagination {
        bottom: 15px;
    }
}

/* ========================================
   CTA SLIDE STYLING
   ======================================== */

/* Hover effect dla CTA buttona w pierwszym i ostatnim slajdzie */
.firma-swiper .swiper-slide:first-child .btn-primary:hover,
.firma-swiper .swiper-slide:last-child .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Dodatkowe style dla text w CTA slajdach */
.text-white-75 {
    color: rgba(255, 255, 255, 0.75) !important;
}

.text-white-50 {
    color: rgba(255, 255, 255, 0.5) !important;
}