/*!
 * ==========================================
 * UZDUB Player
 * Style v1.0
 * https://uzdub.net
 * ==========================================
 */

:root{

    --uz-bg:#000;
    --uz-panel:rgba(0,0,0,.65);
    --uz-white:#fff;
    --uz-primary:#f5c518;
    --uz-radius:12px;
    --uz-transition:.25s ease;

}

.uzdub-player{

    position:relative;
    width:100%;
    aspect-ratio:16/9;

    background:#000;

    overflow:hidden;

    border-radius:14px;

    user-select:none;

    -webkit-user-select:none;

    -webkit-tap-highlight-color:transparent;

    touch-action:manipulation;

}

.uzdub-video{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:contain;

    background:#000;

}

.uzdub-loading{

    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(0,0,0,.35);
    opacity:0;
    visibility:hidden;
    transition:var(--uz-transition);
    z-index:20;

}

.uzdub-loading.active{

    opacity:1;
    visibility:visible;

}

.uzdub-spinner{

    width:48px;
    height:48px;
    border:4px solid rgba(255,255,255,.25);
    border-top-color:#fff;
    border-radius:50%;
    animation:uzdub-spin .8s linear infinite;

}

@keyframes uzdub-spin{

    to{

        transform:rotate(360deg);

    }

}

.uzdub-center-play{

    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    width:72px;
    height:72px;
    border:none;
    border-radius:50%;
    background:rgba(0,0,0,.6);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    z-index:30;
    transition:var(--uz-transition);

}

.uzdub-center-play:hover{

    transform:translate(-50%,-50%) scale(1.08);

}

.uzdub-center-play .material-symbols-rounded{

    font-size:42px;

}

.uzdub-controls{

    position:absolute;
    left:0;
    right:0;
    bottom:0;
    padding:8px 14px;
    background:linear-gradient(
        to top,
        rgba(0,0,0,.90),
        rgba(0,0,0,.45),
        transparent
    );
    transition:.25s;
    z-index:50;
}

.uzdub-progress-wrapper{

    width:100%;
    height:2px;
    display:flex;
    align-items:center;
    cursor:pointer;
    margin-bottom:12px;

}

.uzdub-progress{

    position:relative;
    width:100%;
    height:4px;
    border-radius:999px;
    overflow:visible;
    transition:.2s ease;

}

.uzdub-controls:hover .uzdub-progress{

    height:6px;

}

.uzdub-progress-track{

    position:absolute;
    inset:0;
    background:rgba(255,255,255,.25);
    border-radius:999px;

}

.uzdub-progress-buffer{

    position:absolute;
    left:0;
    top:0;
    width:0%;
    height:100%;
    background:rgba(255,255,255,.45);
    border-radius:999px;

}

.uzdub-progress-played{

    position:absolute;
    left:0;
    top:0;
    width:0%;
    height:100%;
    background:#f5c518;
    border-radius:999px;

}

.uzdub-progress-thumb{

    position:absolute;
    top:50%;
    left:0%;
    width:14px;
    height:14px;
    background:#f5c518;
    border-radius:50%;
    transform:translate(-50%,-50%) scale(0);
    transition:.2s ease;

}

.uzdub-controls:hover .uzdub-progress-thumb{

    transform:translate(-50%,-50%) scale(1);

}

@media (hover:none){

    .uzdub-progress{

        height:6px;

    }

    .uzdub-progress-thumb{

        transform:translate(-50%,-50%) scale(1);

    }

}

.uzdub-bottom{

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-top:10px;

}

.uzdub-left{

    display:flex;
    align-items:center;
    gap:8px;
    flex:1;
    min-width:0;

}

.uzdub-right{

    display:flex;
    align-items:center;
    gap:8px;

}

.uzdub-play,
.uzdub-volume-button,
.uzdub-fullscreen{

    width:40px;
    height:40px;
    border:none;
    background:none;
    color:#fff;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:.2s;

}

.uzdub-play:hover,
.uzdub-volume-button:hover,
.uzdub-fullscreen:hover{

    background:rgba(255,255,255,.15);

}

.uzdub-play:hover,
.uzdub-volume-button:hover,
.uzdub-fullscreen:hover{

    background:rgba(255,255,255,.15);

}

.material-symbols-rounded{

    font-size:28px;

}

.uzdub-volume{

    width:90px;

}

.uzdub-time{

    color:#fff;
    font-size:14px;
    font-weight:500;
    white-space:nowrap;

}

@media (max-width:768px){

    .uzdub-controls{

        padding:8px;

    }

    .uzdub-volume{

        display:none;

    }

    .uzdub-play,
    .uzdub-volume-button,
    .uzdub-fullscreen{

        width:36px;

        height:36px;

    }

    .uzdub-time{

        font-size:12px;

    }

}

@media(max-width:480px){

    .uzdub-bottom{

        gap:6px;

    }

    .uzdub-play,
    .uzdub-volume-button,
    .uzdub-fullscreen{

        width:36px;
        height:36px;

    }

    .uzdub-time{

        font-size:12px;

    }

}

.uzdub-controls{

    opacity:1;
    transition:opacity .25s ease;

}

.uzdub-controls.hide{

    opacity:0;
    pointer-events:none;

}

.uzdub-center-play{

    opacity:1;
    transition:opacity .25s ease;

}

.uzdub-center-play.hide{

    opacity:0;
    pointer-events:none;

}

/* ==========================================
   UZDUB Player V2
   ========================================== */

.uzdub-volume-wrapper{

    position:relative;

    display:flex;

    align-items:center;

}

.uzdub-volume-popup{

    position:absolute;

    left:50%;

    bottom:46px;

    transform:translateX(-50%);

    width:36px;

    height:92px;

    padding:8px 0;

    background:rgba(30,30,40,.96);

    backdrop-filter:blur(15px);

    border-radius:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    opacity:0;

    visibility:hidden;

    transition:.2s;

    z-index:120;

}

.uzdub-volume-popup.show{

    opacity:1;

    visibility:visible;

}

.uzdub-volume{

    width:90px;

    transform:rotate(-90deg);

}

.uzdub-menu{

    position:absolute;

    right:10px;

    bottom:58px;

    width:200px;

    background:rgba(30,30,40,.96);

    border-radius:14px;

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transform:translateY(10px);

    transition:.25s;

    z-index:200;

}

.uzdub-menu.show{

    opacity:1;

    visibility:visible;

    pointer-events:auto;

    transform:translateY(0);

}

.uzdub-menu-item{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:14px 16px;

    color:#fff;

    font-size:14px;

    cursor:pointer;

    transition:.2s;

}

.uzdub-menu-item:hover{

    background:rgba(255,255,255,.08);

}

.uzdub-menu-button{

    width:40px;

    height:40px;

    border:none;

    background:none;

    color:#fff;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    transition:.2s;

}

.uzdub-menu-button:hover{

    background:rgba(255,255,255,.15);

}

.uzdub-center-play{

    width:74px;

    height:74px;

    background:rgba(0,0,0,.45);

    backdrop-filter:blur(12px);

    border:4px solid #7367f0;

}

.uzdub-center-play .material-symbols-rounded{

    font-size:42px;

}

.uzdub-progress-played{

    background:#7367F0;

}

.uzdub-progress-thumb{

    background:#7367F0;

}

.uzdub-play,
.uzdub-volume-button,
.uzdub-fullscreen,
.uzdub-menu-button{

    color:#fff;

}

.uzdub-play:hover,
.uzdub-volume-button:hover,
.uzdub-fullscreen:hover,
.uzdub-menu-button:hover{

    background:rgba(115,103,240,.18);

}

@media(max-width:768px){

    .uzdub-volume-popup{

        width:38px;

        height:110px;

    }

    .uzdub-menu{

        right:8px;

        bottom:54px;

        width:170px;

    }

    .uzdub-menu-item{

        padding:12px;

        font-size:13px;

    }

    .uzdub-menu-button{

        width:36px;

        height:36px;

    }
	
	.uzdub-volume-wrapper{

        display:none;

    }

}

.uzdub-watermark{

    position:absolute;

    top:16px;

    right:16px;

    display:flex;

    flex-direction:column;

    align-items:flex-end;

    pointer-events:none;

    user-select:none;

    z-index:60;

    opacity:.18;

    transition:.25s;

}

.uzdub-watermark span{

    font-size:18px;

    font-weight:800;

    letter-spacing:1px;

    color:#fff;

}

.uzdub-watermark small{

    font-size:10px;

    font-weight:600;

    letter-spacing:2px;

    color:#7367F0;

}

.uzdub-player:hover .uzdub-watermark{

    opacity:.28;

}

@media(max-width:768px){

    .uzdub-watermark{

        top:15px;

        right:15px;

    }

    .uzdub-watermark span{

        font-size:14px;

    }

    .uzdub-watermark small{

        font-size:8px;

    }

}