/* Stable editor interactions and screen-pixel chrome. */
.editor .free-layout>.canvas-component>.vc-input,
.editor .free-layout>.canvas-component>.vc-video{pointer-events:none}

.region-is-resizing .canvas-section,
.region-is-resizing .unified-block,
.region-is-resizing .section-inner,
.region-is-resizing .unified-child-blocks{transition:none!important}

.component-screen-overlay{position:fixed;inset:0;z-index:1405;overflow:hidden;pointer-events:none}
.screen-component-box{position:absolute;box-sizing:border-box;border:1px dashed #777d89;border-radius:2px;pointer-events:none}
.screen-component-box.primary{border-style:solid;border-color:#6c5ce7;box-shadow:0 0 0 1px rgba(108,92,231,.14)}
.screen-component-box.hovered{border-color:#777d89;opacity:.62}
.screen-component-tools{position:absolute;display:flex;transform:translateX(-100%);height:29px;border:1px solid rgba(108,92,231,.24);border-radius:7px;background:#fff;box-shadow:0 5px 16px rgba(25,24,45,.14);pointer-events:auto;overflow:hidden}
.screen-component-tools button{width:29px;height:28px;padding:0;border:0;background:transparent;color:#686d7a;display:grid;place-items:center}
.screen-component-tools button:hover{background:#f0edff;color:#604de4}
.screen-component-tools .icon{width:13px;height:13px}
.screen-component-resize{position:absolute;width:12px;height:12px;border:2px solid #fff;border-radius:3px;background:#6c5ce7;box-shadow:0 0 0 1px #6c5ce7;cursor:nwse-resize;pointer-events:auto;touch-action:none}
.screen-block-resize{position:absolute;display:block;background:transparent;pointer-events:auto;touch-action:none}
.screen-block-resize.edge-top,.screen-block-resize.edge-bottom{left:calc(var(--screen-left) + 10px);width:calc(var(--screen-right) - var(--screen-left) - 20px);height:8px;cursor:ns-resize}
.screen-block-resize.edge-top{top:calc(var(--screen-top) - 4px)}.screen-block-resize.edge-bottom{top:calc(var(--screen-bottom) - 4px)}
.screen-block-resize.edge-left,.screen-block-resize.edge-right{top:calc(var(--screen-top) + 10px);height:calc(var(--screen-bottom) - var(--screen-top) - 20px);width:8px;cursor:ew-resize}
.screen-block-resize.edge-left{left:calc(var(--screen-left) - 4px)}.screen-block-resize.edge-right{left:calc(var(--screen-right) - 4px)}
.screen-block-resize.edge-top-left,.screen-block-resize.edge-top-right,.screen-block-resize.edge-bottom-right,.screen-block-resize.edge-bottom-left{width:10px;height:10px;border:1px solid #6c5ce7;border-radius:2px;background:#fff}
.screen-block-resize.edge-top-left{left:calc(var(--screen-left) - 5px);top:calc(var(--screen-top) - 5px);cursor:nwse-resize}
.screen-block-resize.edge-top-right{left:calc(var(--screen-right) - 5px);top:calc(var(--screen-top) - 5px);cursor:nesw-resize}
.screen-block-resize.edge-bottom-right{left:calc(var(--screen-right) - 5px);top:calc(var(--screen-bottom) - 5px);cursor:nwse-resize}
.screen-block-resize.edge-bottom-left{left:calc(var(--screen-left) - 5px);top:calc(var(--screen-bottom) - 5px);cursor:nesw-resize}
.screen-editor-chrome .canvas-frame .canvas-component{outline:none!important}
.screen-editor-chrome .canvas-frame .component-actions,
.screen-editor-chrome .canvas-frame .resize-handle,
.screen-editor-chrome .canvas-frame .block-resize-handle{display:none!important}

/* Device layouts are editable canvases. Legacy mobile flow rules must not
   override a component's device-specific absolute frame while editing. */
.editor .canvas-frame.tablet .section-inner.free-layout,
.editor .canvas-frame.mobile .section-inner.free-layout{display:block!important;position:relative!important;flex-direction:initial!important}
.editor .canvas-frame.tablet .section-inner.free-layout>.canvas-component,
.editor .canvas-frame.mobile .section-inner.free-layout>.canvas-component{position:absolute!important;flex:0 0 auto!important}
.editor .free-layout>.canvas-component>.vc-button{white-space:nowrap!important;overflow:hidden;text-overflow:ellipsis}
.previewing .component-screen-overlay,.editor-modal-open~.component-screen-overlay{display:none!important}

.vc-select>b{width:18px;height:18px;flex:0 0 18px;display:grid;place-items:center;font-size:0;color:inherit}
.vc-select>b::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg)}
.right-panel select,.zoom-control select,.modal select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,#777d89 50%),linear-gradient(135deg,#777d89 50%,transparent 50%);background-position:calc(100% - 12px) 50%,calc(100% - 8px) 50%;background-size:4px 4px,4px 4px;background-repeat:no-repeat;padding-right:24px!important}
body.dark .right-panel select,body.dark .zoom-control select,body.dark .modal select{background-image:linear-gradient(45deg,transparent 50%,#afb3c0 50%),linear-gradient(135deg,#afb3c0 50%,transparent 50%)}

.card-body-field{margin-top:10px!important}
.compact-content-field>label{display:block;margin:0 0 6px;color:var(--muted);font-size:9px}