/* TVS Video Power v2.2.0 — player.css */

/* ── Outer container ── */
[data-tvsvp]{display:block!important;min-height:100px;}
[data-tvsvp]:hover .tvsvp-ctrl{opacity:1!important;}
.tvsvp-ctrl.show,.tvsvp-ctrl.played{opacity:1!important;}
.tvsvp-ctrl button svg{display:inline-block;vertical-align:middle;}

/* ── Big play button ── */
.tvsvp-bp{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:20;cursor:pointer;background:none;border:none;padding:0;transition:transform 0.2s;display:none;}
.tvsvp-bp.visible{display:block;}
.tvsvp-bp:hover{transform:translate(-50%,-50%) scale(1.1);}
.tvsvp-bp.gone{display:none!important;}

/* ── Persistent Mute/Unmute Toggle ── */
.tvsvp-mute-toggle{
    position:absolute;
    top:12px;
    right:12px;
    z-index:60;
    display:none; /* shown by JS */
    align-items:center;
    gap:5px;
    background:rgba(0,0,0,0.72);
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
    color:#fff;
    border:none;
    border-radius:20px;
    padding:6px 12px 6px 10px;
    font-size:12px;
    font-family:system-ui,-apple-system,sans-serif;
    font-weight:500;
    cursor:pointer;
    transition:background 0.2s,transform 0.1s;
    white-space:nowrap;
    letter-spacing:0.01em;
    line-height:1;
    pointer-events:auto;
}
.tvsvp-mute-toggle:hover{background:rgba(0,0,0,0.9);transform:scale(1.04);}
.tvsvp-mute-toggle:active{transform:scale(0.97);}
.tvsvp-mute-toggle svg{flex-shrink:0;vertical-align:middle;}
.tvsvp-mt-label{vertical-align:middle;}
/* Unmuted state — change label color subtly */
.tvsvp-mute-toggle:not(.tvsvp-muted){background:rgba(20,20,20,0.75);}
/* Pulse animation on first load to attract attention */
@keyframes tvsvpPulse{0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,0.25)}50%{box-shadow:0 0 0 6px rgba(255,255,255,0)}}
.tvsvp-mute-toggle.tvsvp-muted{animation:tvsvpPulse 2.5s ease 1s 3;}

/* ── CTA Overlay ── */
.tvsvp-ov{transition:opacity 0.25s ease;}
.tvsvp-ov.active{display:flex!important;pointer-events:auto!important;animation:tvsvpFade 0.3s ease;overflow-y:auto;-webkit-overflow-scrolling:touch;}
.tvsvp-ov.closing{opacity:0;transition:opacity 0.2s ease;}
@keyframes tvsvpFade{from{opacity:0}to{opacity:1}}

/* ── CTA Box ── */
.tvsvp-box{border-radius:14px;padding:28px;max-width:400px;width:88%;text-align:center;position:relative;animation:tvsvpPop 0.3s ease;}
@keyframes tvsvpPop{from{opacity:0;transform:scale(0.92)}to{opacity:1;transform:scale(1)}}
.tvsvp-box.has-bg{background:#fff;box-shadow:0 10px 40px rgba(0,0,0,0.4);}
.tvsvp-box.no-bg{background:transparent!important;box-shadow:none!important;}
.tvsvp-x{position:absolute;top:8px;right:14px;background:none;border:none;font-size:24px;cursor:pointer;line-height:1;z-index:5;}
.tvsvp-x:hover{opacity:0.7;}
.tvsvp-x.white{color:#fff!important;text-shadow:0 1px 4px rgba(0,0,0,0.5);}
.tvsvp-h{font-size:20px;font-weight:700;margin:0 0 10px;}
.tvsvp-p{font-size:14px;margin:0 0 18px;line-height:1.5;}
.tvsvp-btn{display:inline-block;padding:13px 30px;border-radius:6px;color:#fff!important;font-weight:600;text-decoration:none!important;font-size:15px;cursor:pointer;border:none;transition:opacity 0.2s;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;box-sizing:border-box;}
.tvsvp-btn:hover{opacity:0.85;}
.tvsvp-img{max-width:100%;border-radius:8px;margin-bottom:14px;}
.tvsvp-lf input{display:block;width:100%;padding:11px 14px;margin:8px 0;border:1px solid #ddd;border-radius:6px;font-size:14px;box-sizing:border-box;}
.tvsvp-lf input:focus{border-color:#f1c349;outline:none;box-shadow:0 0 0 2px rgba(241,195,73,0.2);}
.tvsvp-lf .tvsvp-btn{width:100%;margin-top:10px;display:block;text-align:center;white-space:normal;}
.tvsvp-ov.banner{align-items:flex-end!important;background:transparent!important;}
.tvsvp-ov.banner .tvsvp-box{max-width:100%;width:100%;border-radius:0;padding:14px 20px;display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left;animation:none;}
.tvsvp-ov.banner .tvsvp-h{margin:0;font-size:15px;flex:1;min-width:0;}
.tvsvp-ov.banner .tvsvp-btn{flex-shrink:0;}
.tvsvp-ov.endscr .tvsvp-box{background:transparent!important;box-shadow:none!important;}
.tvsvp-ov.endscr .tvsvp-h{color:#fff!important;}
.tvsvp-ov.endscr .tvsvp-p{color:rgba(255,255,255,0.8)!important;}
.tvsvp-replay{background:none;border:2px solid #fff;color:#fff;padding:10px 24px;border-radius:6px;cursor:pointer;font-size:14px;margin-top:14px;}
.tvsvp-replay:hover{background:rgba(255,255,255,0.15);}
.tvsvp-static-item{pointer-events:auto;animation:tvsvpFade 0.5s ease;}
.tvsvp-static-item .tvsvp-btn{font-size:13px;padding:8px 18px;box-shadow:0 2px 12px rgba(0,0,0,0.3);}

/* ── Image Above Player ── */
.tvsvp-above-img{box-sizing:border-box;}
.tvsvp-above-img img,.tvsvp-above-img picture img{display:block;}
.tvsvp-img-caption{font-family:system-ui,-apple-system,sans-serif;line-height:1.4;}
/* Animations */
@keyframes tvsvpImgFade{from{opacity:0}to{opacity:1}}
@keyframes tvsvpImgSlide{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
.tvsvp-anim-fade{animation:tvsvpImgFade 0.7s ease both;}
.tvsvp-anim-slide-up{animation:tvsvpImgSlide 0.6s ease both;}
/* Visibility helpers */
@media(min-width:769px){.tvsvp-mobile-only{display:none!important;}}
@media(max-width:768px){.tvsvp-desktop-only{display:none!important;}}

/* ── Small mobile ── */
@media(max-width:480px){
    .tvsvp-box{padding:16px;max-width:95%;width:95%;border-radius:10px;}
    .tvsvp-h{font-size:16px;}.tvsvp-p{font-size:13px;margin:0 0 14px;}
    .tvsvp-btn{padding:10px 18px;font-size:13px;}
    .tvsvp-bp svg{width:48px;height:48px;}
    .tvsvp-ctrl{padding:6px 8px!important;gap:4px!important;}
    .tvsvp-ov{background:rgba(0,0,0,0.65)!important;}
    .tvsvp-ov.banner .tvsvp-box{flex-direction:column;gap:8px;text-align:center;padding:12px 16px;}
    .tvsvp-static-item .tvsvp-btn{font-size:12px;padding:6px 14px;}
    .tvsvp-mute-toggle{font-size:11px;padding:5px 10px 5px 8px;}
}
/* ── Mobile ── */
@media(max-width:768px){
    .tvsvp-box{padding:20px;max-width:92%;width:92%;}
    .tvsvp-h{font-size:17px;}
    .tvsvp-btn{padding:11px 22px;font-size:14px;}
    .tvsvp-ctrl{padding:8px 10px!important;gap:5px!important;}
    .tvsvp-bp svg{width:56px;height:56px;}
}
/* ── Tablet ── */
@media(max-width:1024px) and (min-width:769px){
    .tvsvp-box{max-width:380px;}
}