/* ============================================================
   VIDEO MAPPER — Static CSS
   Extracted from video-mapper.js.tpl to allow browser caching.
   Only included in layout.tpl when settings.video_mapping_json is set.
   ============================================================ */

.js-video-mapping-item {
    z-index: 9999;
    border-radius: 50%;
    overflow: hidden;
    background: #000;
    animation: vmFadeIn 0.8s ease-out;
    width: 100px;
    height: 100px;
    border: 2px solid white;
    margin-bottom: 5px;
}
.js-video-mapping-item.fixed { position: fixed; }

.vm-stack-br { position: fixed; bottom: 20px; right: 20px; display: flex; flex-direction: column-reverse; z-index: 99990; }
.vm-stack-bl { position: fixed; bottom: 20px; left: 20px; display: flex; flex-direction: column-reverse; z-index: 99990; }
.vm-stack-tr { position: fixed; top: 20px; right: 20px; display: flex; flex-direction: column; z-index: 99990; }
.vm-stack-tl { position: fixed; top: 20px; left: 20px; display: flex; flex-direction: column; z-index: 99990; }
.fixed { position: fixed; }

/* Carousel for Anchor */
.vm-anchor-container {
    margin: 20px 0; width: 100%; display: flex; gap: 10px; overflow-x: auto;
    padding: 10px 0; scrollbar-width: none; -ms-overflow-style: none;
}
.vm-anchor-container::-webkit-scrollbar { display: none; }
.vm-anchor-item { flex: 0 0 100px; position: relative; }

/* Main Image Hijack container */
.vm-main-image-container { position: relative; width: 100%; padding-bottom: 100%; background: #000; overflow: hidden; }
.vm-main-image-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; border-radius: 0; pointer-events: none; }

/* Bubbles */
.js-video-mapping-item iframe {
    width: 100%; height: 100%; border: none;
    border-radius: 50%;
    transform: scale(2.0);
    transform-origin: center;
    pointer-events: none;
    opacity: 0; transition: opacity 0.5s ease-in;
}
.js-video-mapping-item.is-loaded iframe { opacity: 1; }

/* Thumbnail Placeholder */
.vm-thumbnail {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    z-index: 1;
    border-radius: 50%;
}

/* Play Button */
.vm-play-button {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 30px; height: 30px; background: rgba(227, 28, 121, 0.9);
    border-radius: 50%; z-index: 5; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 10px rgba(0,0,0,0.3); border: 2px solid white; transition: transform 0.2s;
}
.vm-play-button::after {
    content: ''; border-top: 6px solid transparent; border-bottom: 6px solid transparent;
    border-left: 10px solid white; margin-left: 3px;
}
.js-video-mapping-item:hover .vm-play-button { transform: translate(-50%, -50%) scale(1.1); }

@keyframes vmBlurExit {
    from { filter: blur(15px); opacity: 1; }
    to { filter: blur(0); opacity: 0; visibility: hidden; }
}

/* Close button */
.vm-close {
    position: absolute; top: 5px; right: 5px; width: 20px; height: 20px;
    background: rgba(255,255,255,0.9); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; z-index: 10; color: #000; font-size: 14px; font-weight: bold;
}
.vm-anchor-item .vm-close { display: none; }

/* Navigation Arrows */
.vm-nav-btn {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 35px; height: 35px;
    background: #FFFFFF;
    color: #e31c79;
    display: flex; align-items: center; justify-content: center;
    border-radius: 10px; cursor: pointer; z-index: 25;
    font-size: 24px; user-select: none; transition: transform 0.2s, opacity 0.2s;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    font-weight: bold;
}
.vm-nav-btn:hover { transform: translateY(-50%) scale(1.1); }
.vm-nav-btn:active { transform: translateY(-50%) scale(0.95); }
.vm-nav-prev { left: 15px; }
.vm-nav-next { right: 15px; }

/* Placeholder skeleton */
.vm-placeholder {
    width: 100px; height: 100px; border-radius: 50%; background: #f1f5f9;
    animation: vmPulse 1.5s infinite; border: 2px solid white;
}

@keyframes vmPulse { 0% { opacity: 0.5; } 50% { opacity: 1; } 100% { opacity: 0.5; } }
@keyframes vmFadeIn { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } }

/* Click shield */
.vm-click-shield { position: absolute; inset: 0; }

@media (max-width: 768px) {
    .js-video-mapping-item { width: 100px; height: 100px; }
    .vm-anchor-item { flex: 0 0 100px; }
    .vm-stack-br, .vm-stack-bl { bottom: 100px; }
}