/* Copied from the active MonsterX Brand Creative Ads overlay editor. */
.monsterx-creative-editor .monsterx-creative-stage { position: relative; overflow: hidden; background: #000; width: 100%; }
.monsterx-creative-editor .monsterx-creative-stage > img,
.monsterx-creative-editor .monsterx-creative-stage > video { display: block; width: 100%; height: 100%; object-fit: cover; }
.monsterx-creative-editor .monsterx-creative-overlay { position: absolute; inset: 0; user-select: none; overflow: hidden; z-index: 2; }
.monsterx-creative-editor .crea-item { position: absolute; left: 0; top: 0; cursor: move; box-sizing: border-box; z-index: 1; }
.monsterx-creative-editor .crea-item.crea-selected { outline: 2px dashed #2e7d32; z-index: 9; }
.monsterx-creative-editor .crea-item img { display: block; width: 100%; height: auto; pointer-events: none; }
.monsterx-creative-editor .crea-item .crea-resize { position: absolute; right: -6px; bottom: -6px; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px solid #2e7d32; cursor: se-resize; display: none; box-shadow: 0 0 3px rgba(0,0,0,.25); }
.monsterx-creative-editor .crea-item.crea-selected .crea-resize { display: block; }
.monsterx-creative-editor .crea-item .crea-close,
.monsterx-creative-editor .crea-item .crea-edit { position: absolute; top: -12px; width: 26px; height: 26px; border-radius: 50%; display: none; align-items: center; justify-content: center; background: #fff; font-weight: bold; cursor: pointer; box-shadow: 0 0 3px rgba(0,0,0,.25); }
.monsterx-creative-editor .crea-item .crea-close { right: -12px; border: 2px solid #b00020; color: #b00020; font-size: 18px; line-height: 18px; }
.monsterx-creative-editor .crea-item .crea-edit { right: 20px; border: 2px solid #2e7d32; color: #2e7d32; font-size: 14px; line-height: 14px; }
.monsterx-creative-editor .crea-item.crea-selected .crea-close,
.monsterx-creative-editor .crea-item.crea-text.crea-selected .crea-edit { display: flex; }
.monsterx-creative-editor .crea-item.crea-text .crea-textbox { display: inline-block; padding: 6px 8px; background: transparent; color: #fff; font-size: 16px; line-height: 1.25; font-family: inherit; outline: none; word-break: break-word; white-space: pre-wrap; width: max-content; max-width: none; cursor: text; user-select: text !important; }
.monsterx-creative-editor .crea-item .crea-editpanel { position: absolute; left: 0; top: calc(100% + 8px); background: #111; color: #fff; border: 1px solid rgba(255,255,255,.2); border-radius: 8px; padding: 8px; display: none; gap: 8px; z-index: 10; box-shadow: 0 4px 12px rgba(0,0,0,.35); min-width: 210px; }
.monsterx-creative-editor .crea-item.crea-showpanel .crea-editpanel { display: flex; align-items: center; flex-wrap: wrap; }
.monsterx-creative-editor .crea-item .crea-editpanel select { font-size: 12px; padding: 4px 6px; border-radius: 6px; border: 1px solid #333; background: #1b1b1b; color: #fff; }
.monsterx-creative-editor .crea-shadow-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; background: transparent; cursor: pointer; transition: background .2s; }
.monsterx-creative-editor .crea-shadow-toggle.active { background: rgba(255,255,255,.5); }
.monsterx-creative-editor .crea-shadow-toggle input[type="color"] { width: 20px; height: 20px; padding: 0; border: none; background: none; cursor: pointer; }
@media (pointer: coarse) {
    .monsterx-creative-editor .crea-item .crea-close,
    .monsterx-creative-editor .crea-item .crea-edit { width: 32px; height: 32px; }
    .monsterx-creative-editor .crea-item .crea-resize { width: 18px; height: 18px; right: -9px; bottom: -9px; }
}