/*==================================================
=            01. RESET
==================================================*/

*,
*::before,
*::after{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    font-size:16px;
}

html,
body{
    width:100%;
    height:100%;
    background:#000;
    color:#fff;
    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}
p {
  margin: 16px 0;
}
img{
    display:block;
    max-width:100%;
}

button{
    border:0;
    outline:0;
    background:none;
    font:inherit;
    cursor:pointer;
}

video{
    display:block;
}

.hidden{
    display:none !important;
}
/*==================================================
=            02. VARIABLES
==================================================*/

:root{

    --ib3-color-primary:#ffffff;
    --ib3-color-accent:#c50084;

    --ib3-bg:#000000;
    --ib3-bg-soft:rgba(0,0,0,.35);
    --ib3-bg-strong:rgba(0,0,0,.70);

    --ib3-radius:10px;

    --ib3-transition:.20s ease;

    --ib3-header-height:90px;

    --ib3-footer-height:140px;

    --ib3-control-size:48px;

    --ib3-big-play:88px;

    --ib3-z-ui:20;
    --ib3-z-fallback:30;
}
/*==================================================
=            03. PLAYER
==================================================*/

#playContainer{
  width: auto;
  max-width: 100%;
  height: 80vh;
  padding: 40px;
}

#ib3-player{
  position: relative;
  height: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: #000;
  margin: 0 auto;
  max-width: 100%;
}
#ib3-player .video-js{
    position:absolute;
    inset:0;
    z-index:1;
}

#ib3-player .vjs-poster{
    background-size:cover;
    background-position:center;
}
#ib3-player.ad-playing #ib3-ui{

    display:none;

}
/*==================================================
=            04. VIDEO
==================================================*/

#myVideo{

    width:100%;

    height:100%;
}

.video-js{
    position:absolute;
    inset:0;
    width:100% !important;

    height:100% !important;

    background:#000;
    overflow:hidden;
}

.video-js video{

    object-fit:contain;
}
.video-js,
.video-js .vjs-tech,
.video-js video{
    width:100% !important;
    height:100% !important;
}
.ima-ad-container{
    position:absolute !important;
    inset:0 !important;
}
.ima-video{
    width:100% !important;
    height:100% !important;
}
.vjs-loading-spinner{
    display:none!important;
}
/*==================================================
=            05. UI LAYER
==================================================*/

#ib3-ui{

    position:absolute;

    inset:0;

    z-index:var(--ib3-z-ui);

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    pointer-events:none;
}

#ib3-ui *{

    pointer-events:auto;
}
/*==================================================
=            06. TOP
==================================================*/

.ib3-top{

    position:relative;

    display:flex;

    align-items:flex-start;

    justify-content:space-between;

    width:100%;

    padding:32px 40px;

    background:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.70),
            rgba(0,0,0,0)
        );

    user-select:none;
}

.video-info{

    display:flex;

    flex-direction:column;

    gap:8px;

    max-width:70%;
}

.video-title{

    font-size:2rem;

    font-weight:700;

    line-height:1.2;

    color:#fff;

    text-shadow:
        0 2px 10px rgba(0,0,0,.6);
}

.video-subtitle{

    font-size:1rem;

    color:#ddd;

    line-height:1.4;

    text-shadow:
        0 2px 8px rgba(0,0,0,.5);
}
/*==================================================
=            07. CENTER
==================================================*/

.ib3-center{

    flex:1;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:40px;
}
.play-big{

    width:88px;

    height:88px;

    border-radius:50%;

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

    color:#fff;

    font-size:34px;

    backdrop-filter:blur(10px);

    transition:all .25s ease;

    display:flex;

    justify-content:center;

    align-items:center;
}

.play-big:hover{

    transform:scale(1.08);

    background:rgba(255,255,255,.28);
}

.play-big:active{

    transform:scale(.96);
}
.ib3-btn-center{

    width:64px;

    height:64px;

    border-radius:50%;

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

    color:#fff;

    font-size:20px;

    transition:.2s;

    display:flex;

    justify-content:center;

    align-items:center;
}

.ib3-btn-center:hover{

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

    transform:scale(1.05);
}
/*==================================================
=            08. BOTTOM
==================================================*/

.ib3-bottom{

    width:100%;

    padding:0 40px 28px;

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.75),
            rgba(0,0,0,0)
        );

    display:flex;

    flex-direction:column;

    gap:14px;
}
.time-row{

    display:flex;

    align-items:center;

    gap:8px;

    font-size:.9rem;

    color:#ddd;

    user-select:none;
}

.separator{

    opacity:.6;
}
/*==================================================
=            09. TIMELINE
==================================================*/
.progress-row{
    display:flex;
    align-items:center;
    gap:12px;
}

.progress-row #current-time,
.progress-row #duration{

    flex:0 0 auto;

    font-size:13px;

    color:#fff;

    min-width:44px;

}

.progress-row .timeline{

    flex:1;

}
.time{
    font-size:13px;
    color:#fff;
    font-variant-numeric:tabular-nums;
    user-select:none;
}
.timeline{

    position:relative;

    width:100%;

    height:22px;

    cursor:pointer;

    display:flex;

    align-items:center;
}
.timeline-bar{

    position:relative;

    width:100%;

    height:8px;

    border-radius:999px;

    background:#555;

    overflow:hidden;
}
.buffer{

    position:absolute;

    left:0;
    top:0;

    width:0;

    height:100%;

    background:#777;

}
.progress{

    position:absolute;

    left:0;
    top:0;

    width:0;

    height:100%;

    background:var(--ib3-color-accent);

}
.thumb{

    position:absolute;

    left:0;

    top:50%;

    width:14px;

    height:14px;

    border-radius:50%;

    background:#fff;

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

    opacity:0;

    transition:.18s;
}

.timeline:hover .thumb{

    opacity:1;
}
.preview{

    position:absolute;

    left:0;

    bottom:28px;

    transform:translateX(-50%);

    display:none;

    pointer-events:none;
}

.timeline:hover .preview{

    display:block;
}
.preview img{

    width:170px;

    aspect-ratio:16/9;

    object-fit:cover;

    border-radius:8px;

    border:2px solid rgba(255,255,255,.2);

    background:#111;
}
.preview-time{

    display:block;

    margin-top:6px;

    text-align:center;

    font-size:.75rem;

    color:#fff;
}
/*==================================================
=            10. CONTROLS
==================================================*/

.controls{

    display:flex;

    justify-content:space-between;

    align-items:center;

    width:100%;
}

.controls-left,
.controls-right{

    display:flex;

    align-items:center;

    gap:18px;
}
/*==================================================
=            11. BUTTONS
==================================================*/

.ib3-btn{

    display:flex;

    justify-content:center;

    align-items:center;

    width:42px;

    height:42px;

    color:#fff;

    background:transparent;

    border:none;

    cursor:pointer;

    transition:all .20s ease;

    opacity:.90;
}
.ib3-btn:hover{

    transform:scale(1.12);

    opacity:1;
}
.ib3-btn:active{

    transform:scale(.95);
}
.play-big svg{
    width:40px;
    height:40px;
    display:block;
    stroke:currentColor;
}
.ib3-btn svg{
    width:34px;
    height:34px;
}
.controls-right>*{

    flex-shrink:0;
}
.ib3-btn.active{

    color:var(--ib3-color-accent);
}
.ib3-btn.active{

    color:var(--ib3-color-accent);
}
.ib3-btn:focus-visible{

    outline:2px solid white;

    outline-offset:4px;
}
:fullscreen #ib3-player{

    background:#000;
}

:fullscreen .video-title{

    font-size:2.3rem;
}
:fullscreen .ib3-bottom{

    padding-left:60px;

    padding-right:60px;

    padding-bottom:40px;
}
#ib3-player.hide-ui{

    cursor:none;
}
#ib3-player.hide-ui #ib3-ui{

    opacity:0;

    transition:opacity .25s ease;
}
#ib3-ui{

    opacity:1;

    transition:opacity .25s ease;
}
.volume-group{

    position:relative;

    display:flex;

    align-items:center;

}
.volume-group:hover .volume{

    opacity:1;
    visibility:visible;

}
.volume{

    position:absolute;

    left:48px;
    top:50%;

    transform:translateY(-50%);

    width:106px;

    opacity:0;
    visibility:hidden;

    transition:.2s;

}
.volume::after{

    content:"";

    position:absolute;

    left:0;
    right:0;

    left:-14px;

    width:14px;

}
.volume-track{

    position:relative;
    width:100%;
    height:4px;
    border-radius:999px;
    background:#555;
    margin: 20px;
    cursor: pointer;
}

.volume-level{
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    height:100%;
    background: #c50084;
    border-radius:999px;
}

.volume-thumb{
    position:absolute;
    left:50%;
    bottom:33%;
    transform:translate(-50%,50%);
    width:14px;
    height:14px;
    border-radius:50%;
    background:white;
}

.volume:hover .volume-thumb{

    opacity:1;

}
.ib3-popover-anchor{

    position:relative;

    display:flex;

    align-items:center;

}
.ib3-popover{

    position:absolute;
    background: #090909a3;
    border-radius: 10px;
    bottom:calc(100% + 8px);

    left:50%;

    transform:translateX(-50%);

    display:none;

    z-index:1000;

}
.ib3-popover-item{

    width:100%;

    padding:10px 12px;

    border:0;

    background:none;

    color:#fff;

    text-align:left;
    white-space: nowrap;
    cursor:pointer;
}

.ib3-popover-item:hover{

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

.ib3-popover-item.active{
    color: #c50084;
    font-weight:600;
}

/*==================================================
=            12. LOADING
==================================================*/

#ib3-loading{
    position:absolute;
    inset:0;
    display:none;
    justify-content:center;
    align-items:center;
    background:rgba(0,0,0,.35);
    backdrop-filter:blur(4px);
    z-index:50;
}

#ib3-loading.visible{
    display:flex;
}

.spinner{

    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 4px solid rgba(225, 196, 212, 0.15);
    border-top-color: rgba(225, 196, 212, 0.15);
    border-top-color: #cb1ea0;
    animation: ib3spin .9s linear infinite;
}
@keyframes ib3spin{
    to{
        transform:rotate(360deg);
    }
}
/*==================================================
=            14. FALLBACK
==================================================*/

#fallback{

    position:absolute;

    inset:0;

    display:none;

    justify-content:center;

    align-items:center;

    background:#000;

    z-index:100;
}
#fallback.visible{

    display:flex;
}
#fallback img{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    opacity:.20;

    filter:blur(4px);
}
#fallback-text{

    position:relative;

    text-align:center;

    max-width:420px;

    padding:30px;
}
#fallback-text h2{

    font-size:2rem;

    margin-bottom:15px;
}
#fallback-text p{

    color:#ddd;

    line-height:1.5;
}
.disabled{
    pointer-events:none;
    opacity:.6;
}
@media (hover: none) and (pointer: coarse) {
    .volume-track {
        display:none;
    }
}
/* Móviles */
@media (max-width: 767px) {
    #playContainer {
        width: 100%;
        max-width: 100%;
        height: auto;
        padding: 20px;
    }
    .ib3-top {
        display:none;
    }
    .play-big {
        width: 50px;
        height: 50px;
    }
    .ib3-bottom {
        padding: 0 10px 5px;
        gap: 5px;
    }
    .ib3-btn {
        width: 28px;
        height: 28px;
    }
}

/* Tablets (iPad y similares) */
@media (min-width: 768px) and (max-width: 1024px) {
    #playContainer {
        width: 100%;
        max-width: 100%;
        height: auto;
        padding: 10px;
    }
}