/* ==========================================
   ULTRAKIT STICKY VIDEO WINDOW — Premium
   Picture-in-Picture on Scroll × 4 Skins × 4 Corners
   ========================================== */

.ultrakit-svw-wrapper { --ultrakit-svw-accent: #6c5ce7; width: 100%; position: relative; }
.ultrakit-svw-no-video { text-align: center; color: #aaa; padding: 30px; border: 1.5px dashed #ddd; border-radius: 10px; }

.ultrakit-svw-anchor { position: relative; width: 100%; }
.ultrakit-svw-anchor.ratio-16-9 { padding-bottom: 56.25%; }
.ultrakit-svw-anchor.ratio-4-3  { padding-bottom: 75%; }
.ultrakit-svw-anchor.ratio-1-1  { padding-bottom: 100%; }

.ultrakit-svw-frame {
    position: relative;
    width: 100%; height: 100%;
    background: #000;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(0,0,0,0.15);
}
/* Non-sticky (inline) frame sits absolutely inside its aspect-ratio anchor */
.ultrakit-svw-wrapper:not(.is-always-mode) .ultrakit-svw-frame:not(.is-sticky) {
    position: absolute; top: 0; left: 0;
}
.ultrakit-svw-media { position: relative; width: 100%; height: 100%; }
.ultrakit-svw-media video, .ultrakit-svw-media iframe {
    position: absolute; inset: 0; width: 100%; height: 100%; border: none; display: block; object-fit: cover;
}

/* ---- Sticky / floating state ---- */
.ultrakit-svw-frame.is-sticky {
    position: fixed;
    width: 320px;
    aspect-ratio: 16 / 9;
    height: auto;
    z-index: 999997;
    border-radius: 12px;
    box-shadow: 0 16px 50px rgba(0,0,0,0.35);
    animation: ultrakit-svw-pop-in 0.35s cubic-bezier(0.34,1.56,0.64,1);
}
.ultrakit-svw-corner-bottom-right.is-sticky { bottom: 20px; right: 20px; }
.ultrakit-svw-corner-bottom-left.is-sticky  { bottom: 20px; left: 20px; }
.ultrakit-svw-corner-top-right.is-sticky    { top: 90px; right: 20px; }
.ultrakit-svw-corner-top-left.is-sticky     { top: 90px; left: 20px; }
@keyframes ultrakit-svw-pop-in { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: scale(1); } }

.ultrakit-svw-frame.is-sticky.is-hidden-collapsed .ultrakit-svw-media { display: none; }
.ultrakit-svw-frame.is-sticky.is-hidden-collapsed { width: 56px; height: 56px; aspect-ratio: auto; border-radius: 50%; }
.ultrakit-svw-frame.is-sticky.is-hidden-collapsed .ultrakit-svw-min,
.ultrakit-svw-frame.is-sticky.is-hidden-collapsed .ultrakit-svw-close { display: none; }
.ultrakit-svw-frame.is-sticky.is-hidden-collapsed .ultrakit-svw-reopen { display: flex !important; }

/* ---- Controls ---- */
.ultrakit-svw-min, .ultrakit-svw-close {
    position: absolute; top: 8px; z-index: 3;
    width: 26px; height: 26px; border-radius: 50%;
    background: rgba(0,0,0,0.55); color: #ffffff !important;
    border: none; cursor: pointer;
    padding: 0 !important;
    box-sizing: border-box;
    display: none;
    align-items: center; justify-content: center;
    font-size: 18px; line-height: 1;
    transition: background 0.2s ease;
}
.ultrakit-svw-frame.is-sticky .ultrakit-svw-min,
.ultrakit-svw-frame.is-sticky .ultrakit-svw-close { display: flex; }
.ultrakit-svw-min:hover, .ultrakit-svw-close:hover { background: var(--ultrakit-svw-accent); }
.ultrakit-svw-close { right: 8px; }
.ultrakit-svw-min { right: 40px; }

.ultrakit-svw-reopen {
    display: none;
    position: absolute; inset: 0; z-index: 2;
    width: 100%; height: 100%; border-radius: inherit;
    background: var(--ultrakit-svw-accent);
    color: #ffffff !important;
    border: none; cursor: pointer;
    padding: 0 !important;
    box-sizing: border-box;
    align-items: center; justify-content: center;
}

/* ---- Skins ---- */
.svw-skin-2 { background: #0d0d14; border: 3px solid #1a1a2e; }
.svw-skin-3 { border: 3px solid var(--ultrakit-svw-accent); }
.svw-skin-4 { border-radius: 0 !important; }
.svw-skin-4.is-sticky { border-radius: 0 !important; }

@media (max-width: 480px) {
    .ultrakit-svw-frame.is-sticky { width: 220px; }
}