.youtube-block {
  position: relative;
  display: block;
  width: 100%;
  background: #000;
  border-radius: 6px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
}

.youtube-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.youtube-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--owb-section-child-background-color, #f3f4f6);
  color: var(--owb-section-child-text-color, #6b7280);
  font-size: 14px;
  border: 1px dashed var(--editor-border-color, #d1d5db);
  border-radius: 6px;
  padding: 16px;
  text-align: center;
}

/*
 * In editor mode, an overlay is rendered on top of the iframe so that
 * pointerdown is captured by the host (the YouTube iframe would otherwise
 * swallow clicks). The overlay is invisible and lets cursor look interactive.
 */
.youtube-editor-overlay {
  position: absolute;
  inset: 0;
  background: transparent;
  cursor: pointer;
  z-index: 1;
}

.youtube-block.is-settings-open .youtube-editor-overlay {
  outline: 2px solid var(--editor-accent-color, #2563eb);
  outline-offset: -2px;
}