.yls-wrapper{max-width:100%;position:relative;overflow:hidden}
.yls-wrapper:not([style*="height:"]){
  aspect-ratio: 16/9;
}
.yls-placeholder{position:absolute;inset:0;cursor:pointer;background:#000;color:#fff;overflow:hidden;display:flex;align-items:center;justify-content:center}
.yls-placeholder .yls-thumb{display:block;width:100%;height:100%;object-fit:cover}

/* Desktop / default overlay */
.yls-overlay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:18px 20px;background:rgba(0,0,0,0.75);color:#fff;font-size:15px;text-align:center;opacity:0;max-width:90%;border-radius:10px;z-index:6;transition:opacity .15s}
.yls-overlay-inner .yls-title{display:block;font-size:17px;margin-bottom:8px;color:#ffd54f}
.yls-overlay-inner .yls-desc{font-size:14px;margin-bottom:12px;opacity:0.95}
.yls-load-btn{background:#e62117;color:#fff;border:0;padding:10px 16px;border-radius:8px;cursor:pointer;font-weight:800}
.yls-placeholder.yls-confirm .yls-overlay{opacity:1}

/* loaded iframe defaults */
.yls-loaded-iframe{width:100%;height:100%;border:0;display:block}

/* Mobile adjustments */
@media (max-width: 600px){
  /* position overlay as a bottom sheet for better readability */
  .yls-overlay{
    left:0;right:0;top:auto;bottom:0;transform:none;padding:14px;background:rgba(0,0,0,0.85);border-radius:10px 10px 0 0;max-width:100%;text-align:left
  }
  .yls-overlay-inner .yls-desc{font-size:15px;margin-bottom:12px}
  .yls-load-btn{display:block;width:100%;padding:14px;font-size:16px;border-radius:8px}
  /* give space so overlay doesn't cover image content completely */
  .yls-placeholder{padding-bottom:56px}
}