/* Front UI with Quick Access control + custom fullscreen */
.moad-player{
    position:relative;
}
.moad-video-wrap{ 
    position: relative;
    overflow: hidden;
    border-radius: 25px;
    margin-bottom: 15px;
}
.moad-quick{ 
    position: absolute;
    top: 8px;
    right: 48px;
    display: inline-block;
    opacity: 0;
    transform: translateY(-4px);
    transition: .2s;
}
.moad-video-wrap:hover .moad-quick{ opacity:1; transform:none; }
.moad-quick-btn{ 
    font-size: 12px;
    padding: 6px 10px;
    border-radius: 10px 10px 0px 10px !important;
    border: 1px solid #004b5b91;
    background: #0b0b0bcc;
    color: #fff;
    cursor: pointer;
    backdrop-filter: blur(20px);
    box-shadow: 0px 0px 10px 3px #0b0b0b80;
}
.moad-quick-menu{ 
    position: absolute;
    right: 0;
    width: 250px;
    max-height: 70vh;
    overflow: auto;
    background: #0b0b0e67;
    color: #fff;
    border-radius: 10px 0px 10px 10px;
    padding: 10px;
    opacity: 0;
    transform: translateY(6px);
    pointer-events: none;
    transition: .18s;
    backdrop-filter: blur(20px);
    font-size: 13px;
    border: 1px solid #00485794;
    box-shadow: 0px 0px 10px 3px #0000007a;
}
.moad-quick:hover .moad-quick-menu, .moad-quick.is-open .moad-quick-menu{ opacity:1; transform:none; pointer-events:auto; }
.moad-sections-list{ list-style:none; margin:0; padding:0; }
.moad-sections-list li{
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 8px;
    border-radius: 8px;
    cursor: pointer;
    margin: 0px !important;
    padding: 6px 13px !important;
}
.moad-sections-list li:hover{ background:#ffffff22; }
.moad-fs-btn{ 
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 15px;
    padding: 5px 10px 1px 10px;
    border-radius: 10px;
    border: 1px solid #00667566;
    background: #0b0b0b96;
    color: #fff;
    cursor: pointer;
    backdrop-filter: blur(20px);
    opacity: 0;
    transform: translateY(-4px);
    transition: .2s;
    box-shadow: 0px 0px 10px 3px #00000099;
    border-radius: 10px !important;
}
.moad-video-wrap:hover .moad-fs-btn{ opacity:1; transform:none; }
.moad-video-wrap:fullscreen .moad-quick, .moad-video-wrap:fullscreen .moad-fs-btn{ opacity:1; transform:none; }
.moad-video-wrap:-webkit-full-screen .moad-quick, .moad-video-wrap:-webkit-full-screen .moad-fs-btn{ opacity:1; transform:none; }
.moad-video-grid{
    display:grid; gap:16px;
}
.moad-video-grid.cols-2{
    grid-template-columns:repeat(2,1fr);
}
.moad-video-grid.cols-3{
    grid-template-columns:repeat(3,1fr);
}
.moad-video-grid.cols-4{
    grid-template-columns:repeat(4,1fr);
}
.moad-video-card{border:1px solid #e5e7eb; border-radius:12px; overflow:hidden; padding:10px;}
.moad-video-card .thumb img{width:100%; height:auto; display:block; border-radius:8px;}
.moad-video-card .title{font-size:16px; margin:8px 0;}
.moad-video-playlist{
    border-radius: 25px !important;
}

/* Cover styles */
.moad-video-wrap { position: relative; }
.moad-cover {
  display:block; width:100%; aspect-ratio:16/9; background-size:cover; background-position:center;
  border:0; cursor:pointer; position:relative;
}
.moad-cover .moad-play-icon{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:72px; height:72px; border-radius:50%; background:rgba(0,0,0,.45);
}
.moad-cover .moad-play-icon::after{
  content:""; position:absolute; left:50%; top:50%; transform:translate(-35%,-50%);
  border-style:solid; border-width:12px 0 12px 20px; border-color:transparent transparent transparent #fff;
}