/* Video Ad Gadgets - frontend styles
 * Responsive bottom-banner mode:
 * desktop = full browser width × 90px
 * mobile  = up to 400px × 90px
 */
.vadg-unit{position:relative;display:none;width:100%;box-sizing:border-box;margin:0;z-index:999990}
.vadg-unit.vadg-is-visible{display:block}
.vadg-unit.vadg-pos-top,.vadg-unit.vadg-pos-above-header{position:relative;padding:0;width:100%;max-width:none}
/* Top ad sits above the page content but must stay below the WP admin
 * toolbar (#wpadminbar, z-index:99999) so its flyout menus aren't hidden
 * behind the ad when a logged-in admin views the front end. */
.vadg-unit.vadg-pos-top{z-index:9999}
.vadg-unit.vadg-top-responsive .vadg-inner{width:100%;max-width:none;border-radius:0;box-shadow:none}
.vadg-unit.vadg-pos-bottom{position:fixed;left:0;right:0;bottom:0;width:100%;padding:0;padding-bottom:env(safe-area-inset-bottom,0px)}
.vadg-unit.vadg-pos-top{transition:opacity .25s ease,visibility .25s ease}
.vadg-unit.vadg-pos-top.vadg-scroll-hidden{opacity:0;visibility:hidden;pointer-events:none}

.vadg-inner{position:relative;width:100%;max-width:var(--vadg-max-width,100%);background-color:var(--vadg-frame-bg,#000);border-radius:6px;overflow:hidden;box-shadow:0 4px 18px rgba(0,0,0,.28);margin:0 auto}
.vadg-pos-bottom .vadg-inner{max-width:none;width:100%;border-radius:0;box-shadow:0 -2px 12px rgba(0,0,0,.20)}
.vadg-frame{position:relative;width:100%;aspect-ratio:var(--vadg-ratio,16/9);background-color:var(--vadg-frame-bg,#000);overflow:hidden}
.vadg-frame video{position:absolute;top:0;left:0;width:100%;height:100%;display:block;object-fit:cover;background-color:#000;margin:0}
.vadg-frame video::-webkit-media-controls,.vadg-frame video::-webkit-media-controls-panel,.vadg-frame video::-webkit-media-controls-start-playback-button,.vadg-frame video::-webkit-media-controls-overlay-play-button{display:none!important;-webkit-appearance:none}
.vadg-frame .vadg-image{position:absolute;top:0;left:0;width:100%;height:100%;max-width:100%;display:block;object-fit:cover;background-color:transparent;margin:0;border:0}
.vadg-frame .vadg-image.vadg-fit-contain{object-fit:contain}
.vadg-frame .vadg-svg-wrap{display:flex;align-items:center;justify-content:center}
.vadg-frame .vadg-svg-wrap svg{max-width:100%;max-height:100%}
.vadg-frame .vadg-yt{position:absolute;top:calc(-1 * var(--vadg-yt-crop,72px));left:0;width:100%;height:calc(100% + 2 * var(--vadg-yt-crop,72px));display:block;border:0;background-color:#000;transition:opacity .35s ease}
.vadg-frame .vadg-yt.vadg-pending{opacity:0}

.vadg-link{position:absolute;top:0;left:0;right:0;bottom:0;display:block;z-index:2}
.vadg-btn{position:absolute;z-index:3;display:flex;align-items:center;justify-content:center;width:28px;height:28px;background-color:rgba(0,0,0,.55);color:#fff;border:0;border-radius:50%;cursor:pointer;padding:0;line-height:1;transition:background-color .2s}
.vadg-btn:hover{background-color:rgba(0,0,0,.85)}
.vadg-btn svg{width:15px;height:15px;fill:currentColor;display:block}
.vadg-close{top:6px;right:6px}
.vadg-sound{top:6px;right:40px}
.vadg-sound .vadg-icon-muted{display:block}
.vadg-sound .vadg-icon-unmuted{display:none}
.vadg-unit.vadg-sound-on .vadg-sound .vadg-icon-muted{display:none}
.vadg-unit.vadg-sound-on .vadg-sound .vadg-icon-unmuted{display:block}
.vadg-label{position:absolute;left:6px;bottom:6px;z-index:3;background-color:rgba(0,0,0,.55);color:#fff;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;line-height:1;padding:3px 6px;border-radius:2px}



/* Responsive top/above-header image banners. With aspectRatio=auto, the
 * image keeps its native dimensions at every viewport width. A mobile
 * creative supplied through <picture> can therefore be 400x250 while the
 * desktop creative can be 1440x250, without cropping or stretching. */
.vadg-image-auto-ratio .vadg-frame{aspect-ratio:auto;height:auto}
.vadg-image-auto-ratio .vadg-frame .vadg-picture{display:block;width:100%;line-height:0}
.vadg-image-auto-ratio .vadg-frame .vadg-picture .vadg-image{position:relative;top:auto;left:auto;width:100%;height:auto;max-width:100%;object-fit:initial}
.vadg-image-auto-ratio .vadg-frame > .vadg-image{position:relative;top:auto;left:auto;width:100%;height:auto;max-width:100%;object-fit:initial}
.vadg-image-auto-ratio .vadg-frame .vadg-fit-contain{object-fit:contain}

/* Bottom banner is deliberately a shallow ad strip like common anchor ads. */
.vadg-pos-bottom .vadg-frame{height:90px;aspect-ratio:auto}
.vadg-pos-bottom .vadg-frame .vadg-image{object-fit:cover}
.vadg-pos-bottom .vadg-frame .vadg-svg-wrap{height:90px}
.vadg-pos-bottom .vadg-frame .vadg-yt{top:0;height:100%}
.vadg-pos-bottom .vadg-label{display:none}

@media screen and (max-width:767px){
  .vadg-unit.vadg-pos-top .vadg-inner,.vadg-unit.vadg-pos-above-header .vadg-inner{width:min(400px,100vw);max-width:400px;margin:0 auto;border-radius:0;box-shadow:none}
  .vadg-inner{max-width:100%}
  .vadg-pos-bottom .vadg-inner{width:min(400px,100vw);margin:0 auto}
  .vadg-unit.vadg-pos-bottom{padding-left:0;padding-right:0}
  .vadg-btn{width:26px;height:26px}
  .vadg-sound{right:38px}
}


/* Top/above-header VIDEO creatives are banners, not 16:9 desktop boxes.
 * Desktop: full viewport width x 250px.
 * Mobile: up to 400px x 250px.
 * The video is cropped with object-fit:cover so a bad/old 16:9 setting
 * cannot create the unwanted 380x215 black box seen on desktop. */
.vadg-top-responsive .vadg-frame{aspect-ratio:auto;height:250px}
.vadg-top-responsive .vadg-frame video{height:250px;object-fit:cover}
.vadg-top-responsive .vadg-frame .vadg-yt{top:0;height:250px}

@media screen and (max-width:767px){
  .vadg-top-responsive .vadg-frame{height:250px}
  .vadg-top-responsive .vadg-frame video{height:250px}
  .vadg-top-responsive .vadg-frame .vadg-yt{height:250px}
}

/* Admin screen */
.vadg-admin-wrap .vadg-ad-box{background:#fff;border:1px solid #ccd0d4;box-shadow:0 1px 1px rgba(0,0,0,.04);margin:0 0 16px;padding:16px 20px}
.vadg-admin-wrap .vadg-ad-box h2{margin-top:0}
.vadg-admin-wrap .vadg-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0 24px}
.vadg-admin-wrap .vadg-field{margin:0 0 12px}
.vadg-admin-wrap .vadg-field label{display:block;font-weight:600;margin:0 0 4px}
.vadg-admin-wrap .vadg-field input[type=text],.vadg-admin-wrap .vadg-field input[type=number],.vadg-admin-wrap .vadg-field input[type=url],.vadg-admin-wrap .vadg-field select,.vadg-admin-wrap .vadg-field textarea{width:100%}
.vadg-admin-wrap .vadg-field textarea{font-family:Consolas,Monaco,monospace;font-size:12px}
.vadg-admin-wrap .vadg-media-row{display:flex;gap:8px}
.vadg-admin-wrap .vadg-media-row input{flex:1 1 auto}
.vadg-admin-wrap .vadg-media-row .button{flex:0 0 auto;white-space:nowrap}
.vadg-admin-wrap .vadg-field .description{font-weight:400;color:#666}
.vadg-admin-wrap .vadg-field-full{grid-column:1 / -1}
.vadg-admin-wrap .vadg-remove-ad{color:#a00}
.vadg-admin-wrap .vadg-toolbar{margin:16px 0}