/* =========================================================================
   ==== RESPONSYWNA STYLIZACJA KREATORA STICKY VIDEO DLA EKRANU 1647PX ======
   ========================================================================= */

/* Główny kontener kotwicy wewnątrz treści artykułu */
.sw-video-anchor-container {
    max-width: 1200px !important; /* Idealna szerokość, dopasowana do Twojego baneru od Groka */
    width: 100% !important;
    margin: 20px auto !important;
    background: #000000 !important;
    border-radius: 8px !important;
    aspect-ratio: 16 / 9 !important; /* Zabezpieczenie przed skakaniem układu strony (Layout Shift) */
    position: relative !important;
}

/* Owińka odtwarzacza w trybie standardowym (Wewnątrz tekstu) */
.sw-main-video-wrapper {
    width: 100% !important;
    height: 100% !important;
    transition: all 0.4s ease-in-out !important; /* Płynna animacja wyjazdu do narożnika */
    z-index: 100 !important;
}

.sw-main-video-wrapper video {
    width: 100% !important;
    height: 100% !important;
    border-radius: 8px !important;
    background: #000000 !important;
    display: block !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

/* Ukrywamy guzik zamknięcia, gdy wideo leży normalnie w artykule */
.sw-video-close-sticky {
    display: none !important;
}

/* =========================================================================
   ==== 🚀 ASYNCHRONICZNY MYK Z ONETU: WYJAZD DO LEWEGO DOLNEGO ROGU ========
   ========================================================================= */
.sw-main-video-wrapper.sw-sticky-active {
    position: fixed !important;
    bottom: 25px !important; /* Bezpieczna odległość od dolnej krawędzi matrycy */
    left: 25px !important;   /* 🔥 LEWY NAROŻNIK: Idealna symetria z dużym Macem 27" */
    width: 380px !important; /* Kompaktowa, profesjonalna szerokość okienka mini-playera */
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    z-index: 999999 !important; /* Absolutny priorytet, lewituje nad sekcjami i tłami Betheme */
    animation: swSlideInFrame 0.4s cubic-bezier(0.25, 1, 0.5, 1) forwards !important;
}

.sw-main-video-wrapper.sw-sticky-active video {
    border: 2px solid #f35a01 !important; /* Pomarańczowa, sportowa ramka premium */
    border-radius: 6px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.6) !important;
}

/* Odsłaniamy krwistoczerwony krzyżyk zamknięcia w trybie miniatury */
.sw-main-video-wrapper.sw-sticky-active .sw-video-close-sticky {
    display: block !important;
    position: absolute !important;
    top: -12px !important;
    right: -12px !important;
    width: 26px !important;
    height: 26px !important;
    background: #dc3545 !important;
    color: #ffffff !important;
    border: 1px solid #ffffff !important;
    border-radius: 50% !important;
    font-size: 16px !important;
    font-weight: bold !important;
    line-height: 22px !important;
    text-align: center !important;
    cursor: pointer !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3) !important;
    z-index: 1000000 !important;
    padding: 0 !important;
}

.sw-main-video-wrapper.sw-sticky-active .sw-video-close-sticky:hover {
    background: #c82333 !important;
}

/* Płynna, kinowa animacja wejścia kafelka wideo */
@keyframes swSlideInFrame {
    0% { opacity: 0; transform: translateY(40px) scale(0.9); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* =========================================================================
   ==== 📱 REJESTRY MOBILNE: Na smartfonach wyłączamy tryb sticky! =========
   ========================================================================= */
@media (max-width: 767px) {
    /* Na telefonach ekran jest za mały na lewitujące okienka, wideo zostaje w tekście */
    .sw-main-video-wrapper.sw-sticky-active {
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        width: 100% !important;
        z-index: 10 !important;
        animation: none !important;
    }
    .sw-main-video-wrapper.sw-sticky-active video {
        border: none !important;
    }
    .sw-main-video-wrapper.sw-sticky-active .sw-video-close-sticky {
        display: none !important;
    }
}