/* YT Video Schema — Frontend Styles v1.8.0 */

/* ===== Base wrapper (responsive 16:9) ===== */
.ytvs-video-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    margin: 2em 0;
}
.ytvs-video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* ===== 1. modern-shadow ===== */
body.ytvs-style-modern-shadow .ytvs-video-wrapper {
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(0,0,0,.12);
    transition: all .3s ease;
}
body.ytvs-style-modern-shadow .ytvs-video-wrapper:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0,0,0,.16);
}
body.ytvs-style-modern-shadow .ytvs-video-wrapper iframe {
    border-radius: 16px;
}

/* ===== 2. neon-glow ===== */
body.ytvs-style-neon-glow .ytvs-video-wrapper {
    border-radius: 8px;
    padding: 4px;
    background: linear-gradient(45deg, #00d4ff, #0099ff, #00d4ff);
    background-size: 200% 200%;
    animation: ytvs-neon-glow 3s ease infinite;
    box-shadow: 0 0 20px rgba(0,212,255,.5);
}
@keyframes ytvs-neon-glow {
    0%,100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}
body.ytvs-style-neon-glow .ytvs-video-wrapper iframe {
    top: 4px; left: 4px;
    width: calc(100% - 8px);
    height: calc(100% - 8px);
    border-radius: 6px;
}

/* ===== 3. gradient-border ===== */
body.ytvs-style-gradient-border .ytvs-video-wrapper {
    border-radius: 12px;
    padding: 6px;
    background: linear-gradient(45deg, #ff0080, #ff8c00, #40e0d0, #ff0080);
    background-size: 300% 300%;
    animation: ytvs-gradient-shift 4s ease infinite;
}
@keyframes ytvs-gradient-shift {
    0%,100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}
body.ytvs-style-gradient-border .ytvs-video-wrapper iframe {
    top: 6px; left: 6px;
    width: calc(100% - 12px);
    height: calc(100% - 12px);
    border-radius: 8px;
}

/* ===== 4. elevated-3d ===== */
body.ytvs-style-elevated-3d .ytvs-video-wrapper {
    border-radius: 12px;
    box-shadow: 0 10px 25px -5px rgba(0,0,0,.1),
                0 20px 40px -10px rgba(0,0,0,.15);
    transition: all .4s cubic-bezier(.175,.885,.32,1.275);
    transform-style: preserve-3d;
}
body.ytvs-style-elevated-3d .ytvs-video-wrapper:hover {
    transform: scale(1.02) rotateX(2deg);
    box-shadow: 0 15px 35px -5px rgba(0,0,0,.15),
                0 30px 60px -15px rgba(0,0,0,.2);
}
body.ytvs-style-elevated-3d .ytvs-video-wrapper iframe {
    border-radius: 12px;
}

/* ===== 5. minimal-line ===== */
body.ytvs-style-minimal-line .ytvs-video-wrapper {
    border: 1px solid #e0e0e0;
    margin: 3em 0;
    transition: border-color .3s ease;
}
body.ytvs-style-minimal-line .ytvs-video-wrapper:hover {
    border-color: #2271b1;
}

/* ===== 6. cinematic ===== */
body.ytvs-style-cinematic .ytvs-video-wrapper {
    background: #000;
    padding: 30px 0;
}
body.ytvs-style-cinematic .ytvs-video-wrapper::before,
body.ytvs-style-cinematic .ytvs-video-wrapper::after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    height: 30px;
    background: #000;
    z-index: 1;
}
body.ytvs-style-cinematic .ytvs-video-wrapper::before { top: 0; }
body.ytvs-style-cinematic .ytvs-video-wrapper::after  { bottom: 0; }
body.ytvs-style-cinematic .ytvs-video-wrapper iframe {
    top: 30px;
    height: calc(100% - 60px);
}

/* ===== 7. retro-tv ===== */
body.ytvs-style-retro-tv .ytvs-video-wrapper {
    border-radius: 24px;
    border: 8px solid #4a4a4a;
    background: #2a2a2a;
    box-shadow: inset 0 0 20px rgba(0,0,0,.5),
                0 4px 0 #1a1a1a,
                0 8px 15px rgba(0,0,0,.4);
    padding: 12px;
}
body.ytvs-style-retro-tv .ytvs-video-wrapper iframe {
    top: 12px; left: 12px;
    width: calc(100% - 24px);
    height: calc(100% - 24px);
    border-radius: 16px;
}