/**
 * Referencje Swiper Styles
 * Minimal styling - using Bootstrap system, only pagination needed
 */

/* ==========================================================================
   SWIPER CONTAINER STYLES
   ========================================================================== */

.referencje-swiper {
    position: relative;
    overflow: visible;
    padding: 20px 15px 60px;
}

/* Desktop overflow effect */
@media (min-width: 768px) {
    .referencje-swiper {
        margin-right: -10vw;
        padding-right: 10vw;
    }
}

/* ==========================================================================
   NAVIGATION ARROWS - Bootstrap Enhanced
   ========================================================================== */

.referencje-swiper-button-prev,
.referencje-swiper-button-next {
    transition: all 0.3s ease;
    backdrop-filter: blur(15px);
    background: rgba(255, 255, 255, 0.95) !important;
    border: 2px solid var(--bs-brand) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.referencje-swiper-button-prev:hover,
.referencje-swiper-button-next:hover {
    background: var(--bs-brand) !important;
    color: white !important;
    transform: translateY(-50%) scale(1.1) !important;
    box-shadow: 0 6px 25px rgba(var(--bs-brand-rgb), 0.3);
    border-color: var(--bs-brand) !important;
}

.referencje-swiper-button-prev:focus,
.referencje-swiper-button-next:focus {
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-brand-rgb), 0.25);
}

/* Hide arrows on mobile */
@media (max-width: 768px) {
    .referencje-swiper-button-prev,
    .referencje-swiper-button-next {
        display: none !important;
    }
}

/* Disabled state for arrows */
.referencje-swiper-button-prev.swiper-button-disabled,
.referencje-swiper-button-next.swiper-button-disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

/* Responsive sizing */
@media (min-width: 769px) and (max-width: 1024px) {
    .referencje-swiper-button-prev,
    .referencje-swiper-button-next {
        width: 50px !important;
        height: 50px !important;
    }
    
    .referencje-swiper-button-prev {
        left: -25px !important;
    }
    
    .referencje-swiper-button-next {
        right: -25px !important;
    }
}

@media (min-width: 1200px) {
    .referencje-swiper-button-prev,
    .referencje-swiper-button-next {
        width: 70px !important;
        height: 70px !important;
    }
    
    .referencje-swiper-button-prev {
        left: -35px !important;
    }
    
    .referencje-swiper-button-next {
        right: -35px !important;
    }
}

/* ==========================================================================
   AUTOPLAY TOGGLE BUTTON
   ========================================================================== */

.referencje-autoplay-toggle {
    transition: all 0.3s ease;
    border: 1.5px solid var(--bs-brand2) !important;
    background: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(10px);
}

.referencje-autoplay-toggle:hover {
    background: var(--bs-brand2) !important;
    color: white !important;
    transform: scale(1.1);
    box-shadow: 0 4px 15px rgba(var(--bs-brand2-rgb), 0.3);
}

.referencje-autoplay-toggle:active {
    transform: scale(0.95);
}

.referencje-autoplay-toggle .autoplay-icon-pause,
.referencje-autoplay-toggle .autoplay-icon-play {
    transition: all 0.3s ease;
}

/* Disabled state for autoplay toggle */
.referencje-autoplay-toggle.swiper-button-disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

/* ==========================================================================
   BOX NAVIGATION BUTTONS
   ========================================================================== */

.referencje-swiper-button-prev-box,
.referencje-swiper-button-next-box {
    transition: all 0.3s ease;
    border: 1.5px solid var(--bs-brand) !important;
    background: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(10px);
}

.referencje-swiper-button-prev-box:hover,
.referencje-swiper-button-next-box:hover {
    background: var(--bs-brand) !important;
    color: white !important;
    transform: scale(1.1);
    box-shadow: 0 4px 15px rgba(var(--bs-brand-rgb), 0.3);
}

.referencje-swiper-button-prev-box:active,
.referencje-swiper-button-next-box:active {
    transform: scale(0.95);
}

/* Disabled state for box navigation buttons */
.referencje-swiper-button-prev-box.swiper-button-disabled,
.referencje-swiper-button-next-box.swiper-button-disabled,
.referencje-swiper-button-prev-box-mobile.swiper-button-disabled,
.referencje-swiper-button-next-box-mobile.swiper-button-disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

/* ==========================================================================
   CREATIVE PAGINATION SECTION
   ========================================================================== */

.pagination-wrapper {
    backdrop-filter: blur(20px);
    border: 1px solid rgba(var(--bs-brand-rgb), 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.pagination-wrapper:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}


/* Slide counter wrapper styling */
.slide-counter-wrapper {
    border: 1px solid rgba(var(--bs-brand-rgb), 0.15);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
        background: rgba(var(--bs-brand-rgb), 0.08) !important;
    border-color: rgba(var(--bs-brand-rgb), 0.25);
}


/* Custom pagination dots in creative section */
.pagination-dots-creative .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;
    position: relative;
    overflow: hidden;
}

.pagination-dots-creative .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%);
}

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

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

.pagination-dots-creative .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);
}

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

/* Slide counter styling */
#current-slide {
    color: var(--bs-brand);
    transition: all 0.3s ease;
}

#total-slides {
    color: var(--bs-brand2);
}

/* Counter animation */
.slide-counter-pulse {
    animation: counter-pulse 0.6s ease;
}

@keyframes counter-pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.15); }
    100% { transform: scale(1); }
}

/* ==========================================================================
   ORIGINAL PAGINATION (Hidden on Desktop)
   ========================================================================== */

.referencje-swiper-pagination {
    display: none !important; /* Hide original pagination */
}

/* ==========================================================================
   ENHANCED INTERACTIONS & ANIMATIONS
   ========================================================================== */

/* 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);
    }
}

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

/* Smooth bounce for navigation buttons */
@keyframes bounce-gentle {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(-50%) translateX(0);
    }
    40% {
        transform: translateY(-50%) translateX(-5px);
    }
    60% {
        transform: translateY(-50%) translateX(-3px);
    }
}

.referencje-swiper-button-prev:active {
    animation: bounce-gentle 0.5s ease;
}

.referencje-swiper-button-next:active {
    animation: bounce-gentle 0.5s ease;
    transform-origin: center;
}

.referencje-swiper-button-next:active {
    animation-direction: reverse;
}

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

/* ==========================================================================
   MODAL Z-INDEX FIXES FOR SWIPER CARDS EFFECT
   ========================================================================== */

/* Ensure modals appear above all swiper content */
.modal {
    z-index: 10050 !important;
}

.modal-backdrop {
    z-index: 10040 !important;
}

/* Prevent swiper cards from creating stacking context issues */
.swiper-cards .swiper-slide {
    z-index: 1;
}

/* Active slide in cards mode should not interfere with modals */
.swiper-cards .swiper-slide-active {
    z-index: 2;
}

/* Ensure modal content is properly positioned */
.modal-dialog {
    position: relative;
    z-index: 10051;
}

/* Mobile specific modal fixes for cards effect */
@media (max-width: 767px) {
    /* Prevent cards from creating transform contexts that affect modals */
    .swiper-cards {
        transform-style: flat;
    }
    
    /* Ensure modal backdrop covers entire viewport */
    .modal-backdrop.show {
        opacity: 0.5;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }
    
    /* Force modal to be positioned relative to viewport */
    .modal.show {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
    }
    
    /* Cards effect improvements */
    .swiper-cards .swiper-slide {
        border-radius: 1.5rem;
        overflow: hidden;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
        background-color: rgba(var(--bs-dark-rgb), 0.3) !important;
    }
    
    /* Better card stacking on mobile */
    .swiper-cards .swiper-slide:not(.swiper-slide-active) {
        pointer-events: none;
    }
    
    .swiper-cards .swiper-slide-active {
        pointer-events: auto;
    }
}

/* ==========================================================================
   MOBILE RESPONSIVENESS FOR CREATIVE PAGINATION
   ========================================================================== */

@media (max-width: 768px) {
    .pagination-wrapper {
        display: none !important; /* Hide desktop pagination on mobile */
    }
    
    /* Show mobile pagination */
    .pagination-wrapper-mobile {
        display: block !important;
    }
    
    /* Mobile read more styling */
    .liquid-sm .read-more-corner-btn {
        padding: 8px 12px !important;
        font-size: 0.8rem;
    }
}

@media (min-width: 769px) {
    .pagination-wrapper-mobile {
        display: none !important; /* Hide mobile pagination on desktop */
    }
}

@media (max-width: 576px) {
    /* Very small screens */
    .pagination-wrapper .d-flex {
        flex-direction: column;
        gap: 15px !important;
        text-align: center;
    }
    
    .pagination-dots-creative {
        order: 2;
        justify-content: center;
    }
    
    /* Smaller cards padding on very small screens */
    .referencje-swiper .swiper-slide .liquid-sm {
        padding: 16px !important;
    }
    
    /* Stack navigation elements vertically on small screens */
    .pagination-wrapper .d-flex.justify-content-between {
        flex-direction: column;
        align-items: center !important;
        gap: 20px !important;
    }
    
    /* Mobile typography adjustments */
    .liquid-sm .text-muted {
        font-size: 0.9rem;
    }
    
    .liquid-sm .fw-semibold.small {
        font-size: 0.85rem !important;
    }
}

/* Tablet adjustments */
@media (min-width: 769px) and (max-width: 1024px) {
    .pagination-wrapper {
        padding: 20px 30px !important;
    }
    
    .pagination-dots-creative .swiper-pagination-bullet {
        width: 14px;
        height: 14px;
    }
    
    /* Smaller box buttons on tablet */
    .referencje-swiper-button-prev-box,
    .referencje-swiper-button-next-box {
        width: 35px !important;
        height: 35px !important;
    }
}

/* Desktop enhancements */
@media (min-width: 1200px) {
    .pagination-wrapper {
        padding: 25px 40px !important;
    }
    
    .pagination-dots-creative .swiper-pagination-bullet {
        width: 18px;
        height: 18px;
    }
    
    .pagination-dots-creative {
        gap: 16px !important;
    }
    
    /* Larger box buttons on desktop */
    .referencje-swiper-button-prev-box,
    .referencje-swiper-button-next-box {
        width: 45px !important;
        height: 45px !important;
    }
}

/* ==========================================================================
   CARDS HEIGHT & READ MORE STYLING
   ========================================================================== */

/* Cards używają Bootstrap h-100 dla jednakowej wysokości */
.referencje-swiper .swiper-slide {
    height: auto;
}


/* Transition utilities */
.transition-all {
    transition: all 0.3s ease;
}

.transition-transform {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}


/* Star rating enhancement */
.liquid-sm .text-warning i {
    transition: color 0.3s ease;
    margin-right: 2px;
}

.liquid-sm:hover .text-warning .bi-star-fill {
    color: #ffc107 !important;
    text-shadow: 0 0 8px rgba(255, 193, 7, 0.4);
}

/* ==========================================================================
   READ MORE CORNER BUTTON STYLES
   ========================================================================== */

/* Corner read more button */
.read-more-corner-btn {
    backdrop-filter: blur(10px);
    border: 1px solid rgba(var(--bs-brand-rgb), 0.2);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0.9;
}

.liquid-animated-hover:hover .read-more-corner-btn {
    opacity: 1;
    background: rgba(var(--bs-brand-rgb), 0.15) !important;
    border-color: rgba(var(--bs-brand-rgb), 0.4);
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(var(--bs-brand-rgb), 0.2);
}

.liquid-animated-hover:hover .read-more-corner-btn .read-more-arrow {
    transform: translateX(3px);
}

/* Backdrop blur utility */
.backdrop-blur {
    backdrop-filter: blur(8px);
}

/* ==========================================================================
   MOBILE NAVIGATION STYLES
   ========================================================================== */

/* Mobile pagination wrapper */
.pagination-wrapper-mobile {
    backdrop-filter: blur(15px);
    border: 1px solid rgba(var(--bs-brand-rgb), 0.1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

.pagination-wrapper-mobile:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.12);
}

/* Mobile navigation buttons */
.referencje-swiper-button-prev-box-mobile,
.referencje-swiper-button-next-box-mobile {
    transition: all 0.3s ease;
    border: 1.5px solid var(--bs-brand) !important;
    background: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(10px);
}

.referencje-swiper-button-prev-box-mobile:hover,
.referencje-swiper-button-next-box-mobile:hover {
    background: var(--bs-brand) !important;
    color: white !important;
    transform: scale(1.1);
    box-shadow: 0 4px 15px rgba(var(--bs-brand-rgb), 0.3);
}

.referencje-swiper-button-prev-box-mobile:active,
.referencje-swiper-button-next-box-active {
    transform: scale(0.95);
}

/* Mobile pagination dots */
.pagination-dots-creative-mobile .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    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;
    position: relative;
    overflow: hidden;
}

.pagination-dots-creative-mobile .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%);
}

.pagination-dots-creative-mobile .swiper-pagination-bullet:hover {
    transform: scale(1.2);
    border-color: var(--bs-brand);
}

.pagination-dots-creative-mobile .swiper-pagination-bullet:hover::before {
    width: 6px;
    height: 6px;
}

.pagination-dots-creative-mobile .swiper-pagination-bullet-active {
    background: linear-gradient(135deg, var(--bs-brand), var(--bs-brand2));
    border-color: var(--bs-brand);
    transform: scale(1.3);
    box-shadow: 0 3px 15px rgba(var(--bs-brand-rgb), 0.4);
}

.pagination-dots-creative-mobile .swiper-pagination-bullet-active::before {
    width: 4px;
    height: 4px;
    background: white;
}

/* Mobile slide counter wrapper styling */
.slide-counter-wrapper-mobile {
    border: 1px solid rgba(var(--bs-brand-rgb), 0.15);
    backdrop-filter: blur(8px);
    transition: all 0.3s ease;
    font-size: 0.85rem;
}

.slide-counter-wrapper-mobile:hover {
    background: rgba(var(--bs-brand-rgb), 0.08) !important;
    border-color: rgba(var(--bs-brand-rgb), 0.25);
}

/* ==========================================================================
   REVEAL ANIMATIONS
   ========================================================================== */

/* Initial state for reveal animations */
.glass-animated-reveal {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Animate in class */
.glass-animated-reveal.animate-in {
    opacity: 1;
    transform: translateY(0) scale(1);
}