:root {
  --lightbox-bg: rgba(253, 226, 236, .59);   
  --lightbox-blur: blur(3px);
}

.modal,                    
#videolightbox,           
.lightbox-overlay[class] { 
  background: var(--lightbox-bg);
  -webkit-backdrop-filter: var(--lightbox-blur);
  backdrop-filter: var(--lightbox-blur);
}
#warning-modal {
  background: rgba(253, 226, 236, .97);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
dialog::backdrop,
.popovers [popover]::backdrop {
  background: var(--lightbox-bg);
  backdrop-filter: var(--lightbox-blur);
}
html.lightbox-open { overflow: hidden; }

.featurewatch .boximage { height: 100%; }
.featurewatch .videothumb {
  width: 100%; height: 100%; margin: 0;
  object-fit: cover; cursor: pointer;
}

#videolightbox { padding: 12px; }
#videolightbox .videoborder {
  position: relative;
  margin: auto;
  width: min(92vw, calc(86vh * 16 / 9), 900px);  
  height: auto;
}
#videolightbox .popupVideoThumb,
#videolightbox #videoHolderBig {
  width: 100%; height: auto; max-width: none;
  aspect-ratio: 16 / 9;
}
#videolightbox .popupVideoThumb { cursor: pointer; }
#videolightbox #videoHolderBig:empty { display: none; }
#videolightbox #videoHolderBig iframe,
#videolightbox #videoHolderBig video { display: block; width: 100%; height: 100%; border: 0; background: #000; }

#videolightbox .popupPlayIcon { transform: none; translate: -50% -50%; margin: 0; }
#videolightbox .popupVideoThumb:hover .popupPlayIcon { transform: none; opacity: 1; }

#videolightbox .lightbox-close {
  position: absolute; top: -14px; right: -14px; z-index: 10001;
  width: 34px; height: 34px; padding: 0;
  font: 22px/1 Verdana, sans-serif; color: #c48792;
  background: #fff; border: 2px solid #fcc9de; border-radius: 50%;
}
#videolightbox .lightbox-close:hover { background: #ffe6f2; }

@media (prefers-reduced-motion: reduce) {
  #videolightbox .popupPlayIcon { animation: none; }
}