/* hide elements on mobile (editor preview: only mark, do NOT hide) */
.editor-styles-wrapper .hide-mobile,
.edit-post-visual-editor__post-area .hide-mobile,
.wp-block .hide-mobile {
  opacity: 0.45;
  outline: 2px dashed currentcolor;
  outline-offset: 4px;
  position: relative;
}

.editor-styles-wrapper .hide-mobile::before,
.edit-post-visual-editor__post-area .hide-mobile::before,
.wp-block .hide-mobile::before {
  content: "Hidden on mobile";
  position: absolute;
  top: 6px;
  left: 6px;
  font-size: 11px;
  line-height: 1;
  padding: 4px 6px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  z-index: 2;
  pointer-events: none;
}

.editor-styles-wrapper .hide-desktop,
.edit-post-visual-editor__post-area .hide-desktop,
.wp-block .hide-desktop {
  opacity: 0.45;
  outline: 2px dashed #1e90ff;
  outline-offset: 4px;
  position: relative;
}

.editor-styles-wrapper .hide-desktop::before,
.edit-post-visual-editor__post-area .hide-desktop::before,
.wp-block .hide-desktop::before {
  content: "Hidden on desktop";
  position: absolute;
  top: 6px;
  right: 6px;
  font-size: 11px;
  line-height: 1;
  padding: 4px 6px;
  border-radius: 4px;
  background: rgba(30, 144, 255, 0.85);
  color: #fff;
  z-index: 2;
  pointer-events: none;
}

/* When both are active */
.editor-styles-wrapper .hide-mobile.hide-desktop,
.edit-post-visual-editor__post-area .hide-mobile.hide-desktop,
.wp-block .hide-mobile.hide-desktop {
  outline: 2px dashed #9370db;
}

.editor-styles-wrapper .hide-mobile.hide-desktop::before,
.edit-post-visual-editor__post-area .hide-mobile.hide-desktop::before,
.wp-block .hide-mobile.hide-desktop::before {
  content: "Hidden on mobile & desktop";
  background: rgba(147, 112, 219, 0.85);
  left: 50%;
  transform: translateX(-50%);
}

/* center on mobile (editor preview marker) */
.editor-styles-wrapper .center-mobile,
.edit-post-visual-editor__post-area .center-mobile,
.wp-block .center-mobile {
  opacity: 0.9;
  outline: 2px dashed #32cd32;
  outline-offset: 4px;
  position: relative;
}

.editor-styles-wrapper .center-mobile::before,
.edit-post-visual-editor__post-area .center-mobile::before,
.wp-block .center-mobile::before {
  content: "Centered on mobile";
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  line-height: 1;
  padding: 4px 6px;
  border-radius: 4px;
  background: rgba(50, 205, 50, 0.85);
  color: #fff;
  z-index: 2;
  pointer-events: none;
}