/* Lock scroll when open */
.chvm-no-scroll { overflow: hidden; }

/* Backdrop */
.chvm-backdrop {
  position: fixed; inset: 0;
  display: grid; place-items: center;
  background: rgba(0,0,0,.6);
  opacity: 0; pointer-events: none;
  transition: opacity .2s ease; z-index: 9999;
}
.chvm-backdrop.is-open { opacity: 1; pointer-events: auto; }

/* Dialog */
.chvm-dialog {
  position: relative;
  width: min(90vw, 960px);
  background: #000; border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0,0,0,.4); outline: none;
}

/* 16:9 area */
.chvm-frame-wrap {
  width: 100%; aspect-ratio: 16/9;
  background: #000; border-radius: 12px; overflow: hidden;
}
.chvm-frame-wrap video {
  width: 100%; height: 100%; display: block; object-fit: contain; background: #000;
}

/* Close button */
.chvm-close {
  position: absolute; top: 6px; right: 8px;
  width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.08); color: #fff;
  font-size: 22px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.chvm-close:hover { background: rgba(255,255,255,.18); }

/* Overlay only on our block (won't affect other .video-modal elements) */
.wp-block-cookehouse-video-modal.video-modal { position: relative; display: inline-block; cursor: pointer; }
.wp-block-cookehouse-video-modal.video-modal::after{
  content:"";
  position:absolute; z-index:2;
  top:50%; left:50%; width:64px; height:64px;
  transform:translate(-50%,-50%);
  background: var(--chvm-play-icon) no-repeat center / contain; /* ← this line changed */
  opacity:.9; transition:opacity .2s ease; pointer-events:none;
}

.wp-block-cookehouse-video-modal.video-modal:hover::after { opacity: 1; }
.wp-block-cookehouse-video-modal.video-modal:hover img { filter: brightness(.92); transition: filter .2s ease; }

@media (prefers-reduced-motion: reduce){ .chvm-backdrop{ transition:none; } }