.popup-modal {
  --nexo-modal-header-border-width: 0;
}

.modal-header .modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  color: var(--nexo-modal-close-color, var(--nexo-btn-close-color));
}

.modal-header .card-image {
  margin-inline: calc(-1 * var(--nexo-modal-header-padding-x));
  margin-block: calc(-1 * var(--nexo-modal-header-padding-y));
}

/* Hide controls until modal is active to prevent resize flickering */
.modal:has(.mejs-mediaelement) {
  .modal-close,
  .mejs-controls {
    transition: opacity 0.3s ease;
  }
  &:not(.active) {
    .modal-close,
    .mejs-controls {
      opacity: 0;
    }
  }
}