.responsive-video-container {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.responsive-video {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    transition: opacity 0.3s ease;
}

/* Style dla desktop */
@media (min-width: 1025px) {
    .responsive-video {
        height: var(--desktop-height, 600px);
    }
}

/* Style dla tablet */
@media (min-width: 769px) and (max-width: 1024px) {
    .responsive-video {
        height: var(--tablet-height, 400px);
    }
}

/* Style dla mobile */
@media (max-width: 768px) {
    .responsive-video {
        height: var(--mobile-height, 250px);
    }
}

/* Wskaźnik ładowania */
.responsive-video-container::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50px;
    height: 50px;
    margin: -25px 0 0 -25px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 10;
}

.responsive-video-container.loading::before {
    opacity: 1;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Zapewnienie że video jest fullwidth */
.responsive-video-container,
.responsive-video {
    width: 100vw !important;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

/* Dla przypadków kiedy video jest w kontenerze */
.responsive-video-container {
    max-width: none !important;
}