.wbp-editor{--purple:#6A1B9A;--pink:#E91E63;--yellow:#FFC107;--text:#221B2F;--muted:#62566E;--border:rgba(82,36,112,.13);--shadow:0 24px 70px rgba(74,16,111,.13);font-family:Raleway,system-ui,sans-serif;color:var(--text);margin-bottom:70px}.wbp-editor *{box-sizing:border-box}.wbp-editor-shell{position:relative;display:grid;grid-template-columns:1.02fr .98fr;gap:24px;align-items:start;border-radius:34px;padding:24px;background:#fff;border:1px solid rgba(233,30,99,.14);box-shadow:var(--shadow)}.wbp-popup-title{grid-column:1/-1;text-align:center;max-width:760px;margin:0 auto 18px}.wbp-popup-title span{display:inline-flex;padding:8px 13px;border-radius:999px;background:rgba(106,27,154,.08);color:var(--purple);font-weight:900;font-size:.86rem;margin-bottom:10px}.wbp-popup-title h2{margin:0;font-size:clamp(1.8rem,4vw,3rem);line-height:1.05;letter-spacing:-.045em}.wbp-popup-title p{margin:8px auto 0;max-width:590px;color:var(--muted)}.wbp-stage-panel,.wbp-form-panel{background:linear-gradient(180deg,#fff,#fbf7ff);border:1px solid var(--border);border-radius:26px;padding:18px;box-shadow:0 12px 32px rgba(34,27,47,.08)}.wbp-stage-label{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.wbp-preview-toggle{border:1px solid rgba(233,30,99,.35);background:#fff;color:var(--pink);border-radius:999px;padding:8px 12px;font-weight:900;cursor:pointer}.wbp-preview-layout{display:grid;grid-template-columns:72px 72px minmax(0,1fr);gap:14px;align-items:stretch}.wbp-template-strip,.wbp-audio-strip{display:flex;flex-direction:column;gap:9px;max-height:435px;overflow:auto;padding:4px 4px 8px;border-radius:18px}.wbp-template-strip{background:rgba(248,242,255,.8);border:1px solid rgba(106,27,154,.09)}.wbp-audio-strip{background:rgba(255,243,248,.86);border:1px solid rgba(233,30,99,.12)}.wbp-template-card,.wbp-music-card{border:2px solid transparent;background:#fff;border-radius:16px;padding:5px;cursor:pointer;box-shadow:0 8px 20px rgba(34,27,47,.07);display:block;text-align:center}.wbp-template-card.is-active,.wbp-music-card.is-active{border-color:var(--pink)}.wbp-template-thumb,.wbp-music-icon{width:100%;aspect-ratio:1/1;border-radius:12px;overflow:hidden;background:linear-gradient(135deg,var(--purple),var(--pink));display:grid;place-items:center;color:#fff;font-weight:950}.wbp-template-thumb video,.wbp-template-thumb img{width:100%;height:100%;object-fit:cover;display:block}.wbp-template-card span,.wbp-music-card b{display:block;margin-top:5px;font-size:.68rem;line-height:1.05;font-weight:900;text-align:center}.wbp-video-container{position:relative;width:100%;aspect-ratio:var(--preview-aspect,16/9);border-radius:22px;overflow:hidden;background:#111;box-shadow:0 18px 44px rgba(0,0,0,.18);user-select:none;touch-action:none}.wbp-video-container video,.wbp-preview-image{width:100%;height:100%;object-fit:cover;display:block}.wbp-overlay{position:absolute;inset:0;z-index:2}.wbp-draggable{position:absolute;transform:translate(-50%,-50%) rotate(var(--rot,0deg)) scale(var(--scale,1));transform-origin:center;cursor:grab;user-select:none;touch-action:none;max-width:92%;padding:3px}.wbp-draggable.selected{outline:1.5px dashed rgba(255,255,255,.88);outline-offset:5px}.wbp-draggable.selected:before{content:"";position:absolute;inset:-8px;border:1px solid rgba(233,30,99,.58);border-radius:12px;pointer-events:none}.wbp-move-pad{position:absolute;inset:-14px;z-index:-1}.wbp-element-content{display:inline-block;min-width:1ch;outline:none;border-radius:9px;pointer-events:auto;cursor:text}.wbp-element-content:focus{background:rgba(255,255,255,.10);box-shadow:0 0 0 3px rgba(255,255,255,.52)}.wbp-handle{position:absolute;width:22px;height:22px;border-radius:50%;background:#fff;border:2px solid var(--pink);box-shadow:0 5px 14px rgba(0,0,0,.22);display:none;z-index:20}.wbp-draggable.selected .wbp-handle{display:block}.wbp-resize-handle{right:-28px;bottom:-28px;cursor:nwse-resize}.wbp-resize-handle:before{content:"";position:absolute;right:5px;bottom:5px;width:8px;height:8px;border-right:2px solid var(--pink);border-bottom:2px solid var(--pink)}.wbp-rotate-handle{left:50%;top:-44px;transform:translateX(-50%);cursor:grab;border-color:var(--purple)}.wbp-rotate-handle:before{content:"";position:absolute;left:5px;top:5px;width:8px;height:8px;border:2px solid var(--purple);border-left-color:transparent;border-radius:50%;transform:rotate(-35deg)}.wbp-nombre{font-family:"Luckiest Guy",cursive;color:yellow;text-shadow:2px 2px 0 #000,-2px -2px 0 #000,2px -2px 0 #000,-2px 2px 0 #000,0 0 15px rgba(255,255,0,.9);font-size:clamp(28px,6vw,68px);line-height:1.05;left:50%;top:55%;text-align:center;width:max-content;max-width:95%;overflow-wrap:anywhere}.wbp-edad{font-weight:900;color:#ff4081;text-shadow:3px 3px 8px rgba(0,0,0,.35),1px 1px 0 #fff;font-size:clamp(40px,7.5vw,90px);line-height:1;left:50%;top:30%;text-align:center}.wbp-mensaje{left:50%;top:82%;width:68%;max-width:68%;min-width:160px;padding:10px 16px;border-radius:15px;background:rgba(255,255,255,.78);color:#111;font-size:clamp(14px,2.1vw,22px);font-weight:900;line-height:1.25;text-align:center;box-shadow:0 10px 24px rgba(0,0,0,.16)}.wbp-mensaje .wbp-element-content{display:block;width:100%;white-space:normal;overflow-wrap:anywhere}.wbp-form-panel h3{margin:0 0 8px}.wbp-form-grid{display:grid;gap:12px}.wbp-field{display:grid;gap:7px}.wbp-field-row{display:grid;grid-template-columns:1fr auto;align-items:center}.wbp-field label{font-weight:900;font-size:.86rem}.wbp-field input,.wbp-field textarea{width:100%;min-height:47px;border-radius:15px;border:1px solid rgba(34,27,47,.14);padding:10px 12px;outline:none;background:#fff}.wbp-field textarea{min-height:86px;resize:vertical}.wbp-switch{position:relative;display:inline-flex;width:54px;height:30px;cursor:pointer}.wbp-switch input{position:absolute;opacity:0}.wbp-switch span{width:54px;height:30px;border-radius:999px;background:#fff;border:2px solid #cfc2dc;position:relative}.wbp-switch span:before{content:"";position:absolute;width:22px;height:22px;border-radius:50%;left:2px;top:2px;background:#9b8aaa;transition:.18s}.wbp-switch input:checked+span{background:linear-gradient(135deg,var(--pink),var(--purple));border-color:#fff}.wbp-switch input:checked+span:before{transform:translateX(24px);background:#fff}.wbp-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}.wbp-btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;border-radius:14px;border:1px solid transparent;padding:0 14px;font-weight:900;cursor:pointer}.wbp-btn-primary{color:#fff;background:linear-gradient(135deg,var(--pink),#f90062);box-shadow:0 15px 34px rgba(233,30,99,.25)}.wbp-btn-outline{color:var(--pink);background:#fff;border-color:rgba(233,30,99,.35)}.wbp-status{display:none;margin-top:10px;padding:10px 12px;border-radius:14px;background:rgba(106,27,154,.07);color:var(--purple);font-size:.84rem;font-weight:800}.wbp-status.is-visible,.wbp-metadata-box.is-visible{display:block}.wbp-metadata-box{display:none;margin-top:10px;padding:11px 12px;border-radius:14px;background:#151021;color:#f8f2ff;font-family:monospace;font-size:.76rem;white-space:pre-wrap;max-height:180px;overflow:auto}.wbp-render-canvas{position:fixed;left:-99999px;top:-99999px;opacity:0}.wbp-popup-close,.wbp-mobile-hint{display:none}@media(max-width:1024px){.wbp-mobile-hint{display:block;margin-top:12px;padding:10px 12px;border-radius:16px;background:rgba(106,27,154,.07);color:var(--purple);font-weight:900;text-align:center}body.wbp-popup-open{overflow:hidden;overscroll-behavior:none;touch-action:none}.wbp-editor-shell{grid-template-columns:1fr;padding:12px;border-radius:24px;cursor:pointer}.wbp-editor-shell.is-popup{position:fixed;inset:0;z-index:999999;width:100vw;height:100dvh;padding:0;border:0;border-radius:0;background:#fff;display:grid;grid-template-rows:auto 50dvh 50dvh;gap:0;overflow:hidden;cursor:default}.wbp-editor-shell.is-popup .wbp-popup-close{display:grid;place-items:center;position:absolute;top:8px;right:8px;z-index:1002;width:34px;height:34px;border-radius:50%;border:1px solid rgba(106,27,154,.12);background:#fff;font-size:1.35rem;font-weight:900;cursor:pointer}.wbp-editor-shell.is-popup .wbp-popup-title{height:auto;margin:0;padding:8px 44px 6px 10px;text-align:left;border-bottom:1px solid rgba(82,36,112,.08)}.wbp-editor-shell.is-popup .wbp-popup-title span{display:none}.wbp-editor-shell.is-popup .wbp-popup-title h2{font-size:1rem}.wbp-editor-shell.is-popup .wbp-popup-title p{font-size:.72rem;margin:3px 0 0}.wbp-editor-shell.is-popup .wbp-stage-panel{height:calc(50dvh - 24px);padding:6px 8px 7px 4px;border:0;border-radius:0;box-shadow:none;overflow:hidden}.wbp-editor-shell.is-popup .wbp-stage-label{display:none}.wbp-editor-shell.is-popup .wbp-preview-layout{height:100%;grid-template-columns:58px 58px minmax(0,1fr);gap:6px}.wbp-editor-shell.is-popup .wbp-template-strip,.wbp-editor-shell.is-popup .wbp-audio-strip{height:100%;max-height:none;overflow-y:auto;padding:4px;border-radius:16px}.wbp-editor-shell.is-popup .wbp-video-container{height:100%;width:auto;max-width:100%;margin:auto;border-radius:16px}.wbp-editor-shell.is-popup .wbp-form-panel{height:calc(50dvh - 24px);overflow:hidden;padding:10px 12px calc(24px + env(safe-area-inset-bottom,0px));border-radius:18px 18px 0 0;display:flex;flex-direction:column}.wbp-editor-shell.is-popup .wbp-form-grid{gap:7px;flex:1;display:grid;grid-template-rows:auto auto minmax(48px,1fr)}.wbp-editor-shell.is-popup .wbp-field input,.wbp-editor-shell.is-popup .wbp-field textarea{min-height:38px;padding:7px 10px}.wbp-editor-shell.is-popup .wbp-field textarea{resize:none;height:100%}.wbp-editor-shell.is-popup .wbp-actions{margin-bottom:calc(8px + env(safe-area-inset-bottom,0px))}.wbp-editor-shell.is-popup .wbp-btn{min-height:38px;font-size:.82rem}}@media(max-width:1024px) and (orientation:landscape){.wbp-editor-shell.is-popup{grid-template-rows:auto 1fr;grid-template-columns:50vw 50vw}.wbp-editor-shell.is-popup .wbp-popup-title{grid-column:1/-1}.wbp-editor-shell.is-popup .wbp-stage-panel,.wbp-editor-shell.is-popup .wbp-form-panel{width:50vw;height:calc(100dvh - 48px)}} /* v1.4: music selector back in options panel */ .wbp-preview-layout{ grid-template-columns:72px minmax(0,1fr)!important; } /* 0.9.517 final override: render journey acts like a focused result screen. */ #generatorShell.is-video-generating .wbp-form-panel, #generatorShell.is-video-ready .wbp-form-panel, .wbp-editor #generatorShell.is-video-generating .wbp-form-panel, .wbp-editor #generatorShell.is-video-ready .wbp-form-panel{ display:none!important; } @media(max-width:640px){ #generatorShell.is-popup.is-video-generating, #generatorShell.is-popup.is-video-ready{ grid-template-rows:56px minmax(0,1fr)!important; } #generatorShell.is-popup.is-video-generating .wbp-editor-topbar, #generatorShell.is-popup.is-video-ready .wbp-editor-topbar{ display:grid!important; } #generatorShell.is-popup.is-video-generating .wbp-mode-switch, #generatorShell.is-popup.is-video-ready .wbp-mode-switch{ display:none!important; } #generatorShell.is-popup.is-video-generating .wbp-stage-panel, #generatorShell.is-popup.is-video-ready .wbp-stage-panel{ height:auto!important; min-height:0!important; align-content:start!important; padding:12px 14px calc(18px + env(safe-area-inset-bottom,0px))!important; } #generatorShell.is-popup.is-video-generating .wbp-compact-controls, #generatorShell.is-popup.is-video-ready .wbp-compact-controls{ width:100%!important; max-width:420px!important; margin:0 auto!important; } #generatorShell.is-popup.is-video-generating .wbp-render-snapshot-frame img, #generatorShell.is-popup.is-video-ready .wbp-render-snapshot-frame img{ width:min(54dvw,190px)!important; max-height:42dvh!important; } } /* 0.9.521 final cascade: render/result is a single clean state across every editor mode. */ .wbp-editor #generatorShell:is(.is-video-generating,.is-video-ready,.is-video-error,.is-video-protected), #generatorShell:is(.is-video-generating,.is-video-ready,.is-video-error,.is-video-protected){ display:grid!important; grid-template-columns:1fr!important; grid-template-rows:auto auto!important; gap:16px!important; height:auto!important; min-height:0!important; max-height:none!important; overflow:visible!important; align-items:stretch!important; cursor:default!important; } .wbp-editor #generatorShell:is(.is-video-generating,.is-video-ready,.is-video-error,.is-video-protected) .wbp-editor-topbar, #generatorShell:is(.is-video-generating,.is-video-ready,.is-video-error,.is-video-protected) .wbp-editor-topbar{ display:grid!important; grid-column:1/-1!important; } .wbp-editor #generatorShell:is(.is-video-generating,.is-video-ready,.is-video-error,.is-video-protected) .wbp-mode-switch, .wbp-editor #generatorShell:is(.is-video-generating,.is-video-ready,.is-video-error,.is-video-protected) .wbp-form-panel, .wbp-editor #generatorShell:is(.is-video-generating,.is-video-ready,.is-video-error,.is-video-protected) .wbp-stage-label, .wbp-editor #generatorShell:is(.is-video-generating,.is-video-ready,.is-video-error,.is-video-protected) .wbp-preview-layout, .wbp-editor #generatorShell:is(.is-video-generating,.is-video-ready,.is-video-error,.is-video-protected) .wbp-video-container, .wbp-editor #generatorShell:is(.is-video-generating,.is-video-ready,.is-video-error,.is-video-protected) .wbp-preview-tools, .wbp-editor #generatorShell:is(.is-video-generating,.is-video-ready,.is-video-error,.is-video-protected) .wbp-compact-secondary, #generatorShell:is(.is-video-generating,.is-video-ready,.is-video-error,.is-video-protected) .wbp-mode-switch, #generatorShell:is(.is-video-generating,.is-video-ready,.is-video-error,.is-video-protected) .wbp-form-panel, #generatorShell:is(.is-video-generating,.is-video-ready,.is-video-error,.is-video-protected) .wbp-stage-label, #generatorShell:is(.is-video-generating,.is-video-ready,.is-video-error,.is-video-protected) .wbp-preview-layout, #generatorShell:is(.is-video-generating,.is-video-ready,.is-video-error,.is-video-protected) .wbp-video-container, #generatorShell:is(.is-video-generating,.is-video-ready,.is-video-error,.is-video-protected) .wbp-preview-tools, #generatorShell:is(.is-video-generating,.is-video-ready,.is-video-error,.is-video-protected) .wbp-compact-secondary{ display:none!important; } .wbp-editor #generatorShell:is(.is-video-generating,.is-video-ready,.is-video-error,.is-video-protected) .wbp-stage-panel, #generatorShell:is(.is-video-generating,.is-video-ready,.is-video-error,.is-video-protected) .wbp-stage-panel{ grid-column:1/-1!important; position:static!important; inset:auto!important; display:flex!important; flex-direction:column!important; align-items:center!important; justify-content:center!important; gap:12px!important; width:100%!important; height:auto!important; min-height:0!important; max-height:none!important; overflow:visible!important; padding:20px!important; } .wbp-editor #generatorShell:is(.is-video-generating,.is-video-ready,.is-video-error,.is-video-protected) .wbp-render-snapshot-frame, #generatorShell:is(.is-video-generating,.is-video-ready,.is-video-error,.is-video-protected) .wbp-render-snapshot-frame{ display:block!important; order:1!important; width:min(100%,280px)!important; margin:0 auto!important; text-align:center!important; } .wbp-editor #generatorShell:is(.is-video-generating,.is-video-ready,.is-video-error,.is-video-protected) .wbp-render-snapshot-frame[hidden], #generatorShell:is(.is-video-generating,.is-video-ready,.is-video-error,.is-video-protected) .wbp-render-snapshot-frame[hidden]{ display:none!important; } .wbp-editor #generatorShell:is(.is-video-generating,.is-video-ready,.is-video-error,.is-video-protected) .wbp-render-snapshot-frame img, #generatorShell:is(.is-video-generating,.is-video-ready,.is-video-error,.is-video-protected) .wbp-render-snapshot-frame img{ display:block!important; width:min(100%,220px)!important; max-width:220px!important; max-height:42vh!important; aspect-ratio:9/16!important; height:auto!important; object-fit:cover!important; margin:0 auto!important; } .wbp-editor #generatorShell:is(.is-video-generating,.is-video-ready,.is-video-error,.is-video-protected) .wbp-compact-controls, #generatorShell:is(.is-video-generating,.is-video-ready,.is-video-error,.is-video-protected) .wbp-compact-controls{ order:2!important; position:static!important; inset:auto!important; display:flex!important; flex-direction:column!important; align-items:center!important; gap:10px!important; width:min(100%,560px)!important; max-width:560px!important; height:auto!important; min-height:0!important; max-height:none!important; margin:0 auto!important; padding:0!important; transform:none!important; overflow:visible!important; background:transparent!important; border:0!important; border-radius:0!important; box-shadow:none!important; } .wbp-editor #generatorShell:is(.is-video-generating,.is-video-ready,.is-video-error,.is-video-protected) .wbp-actions, #generatorShell:is(.is-video-generating,.is-video-ready,.is-video-error,.is-video-protected) .wbp-actions{ position:static!important; inset:auto!important; display:flex!important; justify-content:center!important; width:100%!important; max-width:100%!important; margin:0!important; padding:0!important; transform:none!important; background:transparent!important; border:0!important; border-radius:0!important; box-shadow:none!important; } .wbp-editor #generatorShell.is-video-generating .wbp-progress, .wbp-editor #generatorShell:is(.is-video-ready,.is-video-error,.is-video-protected) .wbp-status, #generatorShell.is-video-generating .wbp-progress, #generatorShell:is(.is-video-ready,.is-video-error,.is-video-protected) .wbp-status{ width:100%!important; max-width:520px!important; margin:0 auto!important; } .wbp-editor #generatorShell.is-video-ready #downloadVideo, .wbp-editor #generatorShell.is-video-error #retryRender, #generatorShell.is-video-ready #downloadVideo, #generatorShell.is-video-error #retryRender{ width:min(100%,300px)!important; min-height:56px!important; justify-content:center!important; } .wbp-editor #generatorShell.is-video-ready .wbp-render-recovery-note, #generatorShell.is-video-ready .wbp-render-recovery-note{ width:min(100%,520px)!important; margin:0 auto!important; padding:0 4px!important; } @media(max-width:760px){ .wbp-editor #generatorShell:is(.is-video-generating,.is-video-ready,.is-video-error,.is-video-protected), #generatorShell:is(.is-video-generating,.is-video-ready,.is-video-error,.is-video-protected){ gap:10px!important; padding:12px!important; } .wbp-editor #generatorShell.is-popup:is(.is-video-generating,.is-video-ready,.is-video-error,.is-video-protected), #generatorShell.is-popup:is(.is-video-generating,.is-video-ready,.is-video-error,.is-video-protected){ width:100vw!important; height:100dvh!important; max-height:100dvh!important; overflow:auto!important; grid-template-rows:auto minmax(0,1fr)!important; } .wbp-editor #generatorShell:is(.is-video-generating,.is-video-ready,.is-video-error,.is-video-protected) .wbp-stage-panel, #generatorShell:is(.is-video-generating,.is-video-ready,.is-video-error,.is-video-protected) .wbp-stage-panel{ padding:14px 12px calc(16px + env(safe-area-inset-bottom,0px))!important; justify-content:flex-start!important; } .wbp-editor #generatorShell:is(.is-video-generating,.is-video-ready,.is-video-error,.is-video-protected) .wbp-render-snapshot-frame img, #generatorShell:is(.is-video-generating,.is-video-ready,.is-video-error,.is-video-protected) .wbp-render-snapshot-frame img{ width:min(58vw,200px)!important; max-width:200px!important; max-height:34dvh!important; } } @media(max-width:380px), (max-height:700px){ .wbp-editor #generatorShell:is(.is-video-generating,.is-video-ready,.is-video-error,.is-video-protected) .wbp-render-snapshot-frame img, #generatorShell:is(.is-video-generating,.is-video-ready,.is-video-error,.is-video-protected) .wbp-render-snapshot-frame img{ width:min(50vw,166px)!important; max-width:166px!important; max-height:30dvh!important; } } /* 0.9.529 EOF authority: mobile simple editor preview/actions geometry. */ @media(max-width:640px){ #generatorShell.is-popup:not(.is-advanced):not(.is-video-generating):not(.is-video-ready):not(.is-video-error):not(.is-video-protected){ grid-template-rows:56px auto auto!important; overflow-y:auto!important; align-content:start!important; } #generatorShell.is-popup:not(.is-advanced):not(.is-video-generating):not(.is-video-ready):not(.is-video-error):not(.is-video-protected) .wbp-stage-panel{ display:grid!important; grid-template-rows:auto auto!important; gap:10px!important; } #generatorShell.is-popup:not(.is-advanced):not(.is-video-generating):not(.is-video-ready):not(.is-video-error):not(.is-video-protected) .wbp-preview-layout{ grid-row:1!important; display:grid!important; grid-template-columns:1fr!important; grid-template-rows:auto 48px!important; gap:8px!important; place-items:center!important; height:auto!important; min-height:0!important; } #generatorShell.is-popup:not(.is-advanced):not(.is-video-generating):not(.is-video-ready):not(.is-video-error):not(.is-video-protected) #previewArea{ grid-row:1!important; width:auto!important; height:clamp(255px,38dvh,320px)!important; min-height:255px!important; max-height:none!important; max-width:calc(100vw - 44px)!important; margin:0 auto!important; transform:none!important; } #generatorShell.is-popup:not(.is-advanced):not(.is-video-generating):not(.is-video-ready):not(.is-video-error):not(.is-video-protected) .wbp-preview-tools.wbp-simple-tools{ position:static!important; inset:auto!important; transform:none!important; grid-row:2!important; display:grid!important; grid-template-columns:repeat(4,44px)!important; gap:8px!important; justify-content:center!important; width:auto!important; height:48px!important; margin:0 auto!important; padding:0!important; } #generatorShell.is-popup:not(.is-advanced) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card{ position:static!important; inset:auto!important; width:44px!important; height:44px!important; min-height:44px!important; border-radius:14px!important; transform:none!important; } #generatorShell.is-popup:not(.is-advanced) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card__icon, #generatorShell.is-popup:not(.is-advanced) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card__media{ width:26px!important; height:26px!important; max-width:26px!important; max-height:26px!important; } #generatorShell.is-popup:not(.is-advanced) .wbp-compact-secondary{ display:none!important; } #generatorShell.is-popup:not(.is-advanced) .wbp-compact-controls{ position:static!important; inset:auto!important; grid-row:2!important; display:grid!important; width:100%!important; max-width:370px!important; height:auto!important; min-height:0!important; margin:58px auto 0!important; padding:0!important; transform:none!important; background:transparent!important; border:0!important; box-shadow:none!important; } #generatorShell.is-popup:not(.is-advanced) .wbp-actions{ position:static!important; inset:auto!important; display:grid!important; grid-template-columns:minmax(0,.96fr) minmax(0,1.04fr)!important; gap:9px!important; width:100%!important; margin:0!important; padding:7px!important; transform:none!important; border-radius:17px!important; background:rgba(255,255,255,.96)!important; box-shadow:0 10px 28px rgba(45,20,78,.12)!important; } #generatorShell.is-popup:not(.is-advanced) .wbp-actions .wbp-btn{ min-width:0!important; min-height:42px!important; padding:0 8px!important; gap:6px!important; border-radius:14px!important; font-size:12px!important; line-height:1.05!important; white-space:nowrap!important; } } @media(max-width:360px){ #generatorShell.is-popup:not(.is-advanced) #previewArea{ height:232px!important; min-height:232px!important; } #generatorShell.is-popup:not(.is-advanced) .wbp-preview-tools.wbp-simple-tools{ grid-template-columns:repeat(4,40px)!important; gap:7px!important; height:44px!important; } #generatorShell.is-popup:not(.is-advanced) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card{ width:40px!important; height:40px!important; min-height:40px!important; } } /* 0.9.528 final cascade authority: readable mobile preview, horizontal tools, stable action row. */ @media(max-width:640px){ .wbp-editor #generatorShell.is-popup:not(.is-advanced):not(.is-video-generating):not(.is-video-ready):not(.is-video-error):not(.is-video-protected), #generatorShell.is-popup:not(.is-advanced):not(.is-video-generating):not(.is-video-ready):not(.is-video-error):not(.is-video-protected){ display:grid!important; grid-template-rows:56px auto auto!important; align-content:start!important; gap:8px!important; height:100dvh!important; max-height:100dvh!important; overflow-x:hidden!important; overflow-y:auto!important; padding:8px 10px calc(12px + env(safe-area-inset-bottom,0px))!important; } .wbp-editor #generatorShell.is-popup:not(.is-advanced):not(.is-video-generating):not(.is-video-ready):not(.is-video-error):not(.is-video-protected) .wbp-stage-panel, #generatorShell.is-popup:not(.is-advanced):not(.is-video-generating):not(.is-video-ready):not(.is-video-error):not(.is-video-protected) .wbp-stage-panel{ grid-row:2!important; display:grid!important; grid-template-rows:auto auto!important; gap:10px!important; width:100%!important; min-height:0!important; padding:0 0 4px!important; overflow:visible!important; } .wbp-editor #generatorShell.is-popup:not(.is-advanced):not(.is-video-generating):not(.is-video-ready):not(.is-video-error):not(.is-video-protected) .wbp-preview-layout, #generatorShell.is-popup:not(.is-advanced):not(.is-video-generating):not(.is-video-ready):not(.is-video-error):not(.is-video-protected) .wbp-preview-layout{ grid-row:1!important; display:grid!important; grid-template-columns:1fr!important; grid-template-rows:auto 48px!important; place-items:center!important; gap:8px!important; width:100%!important; height:auto!important; min-height:0!important; padding:0!important; } .wbp-editor #generatorShell.is-popup:not(.is-advanced):not(.is-video-generating):not(.is-video-ready):not(.is-video-error):not(.is-video-protected) #previewArea, #generatorShell.is-popup:not(.is-advanced):not(.is-video-generating):not(.is-video-ready):not(.is-video-error):not(.is-video-protected) #previewArea{ grid-column:1!important; grid-row:1!important; justify-self:center!important; align-self:center!important; width:auto!important; height:clamp(255px,38dvh,320px)!important; max-width:calc(100vw - 44px)!important; max-height:none!important; margin:0 auto!important; border-width:5px!important; border-radius:20px!important; transform:none!important; } .wbp-editor #generatorShell.is-popup:not(.is-advanced):not(.is-video-generating):not(.is-video-ready):not(.is-video-error):not(.is-video-protected) .wbp-preview-tools.wbp-simple-tools, #generatorShell.is-popup:not(.is-advanced):not(.is-video-generating):not(.is-video-ready):not(.is-video-error):not(.is-video-protected) .wbp-preview-tools.wbp-simple-tools{ grid-column:1!important; grid-row:2!important; display:grid!important; grid-template-columns:repeat(4,44px)!important; justify-content:center!important; justify-self:center!important; align-items:center!important; gap:8px!important; width:auto!important; max-width:100%!important; height:48px!important; margin:0 auto!important; padding:0!important; overflow:visible!important; } .wbp-editor #generatorShell.is-popup:not(.is-advanced) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card, #generatorShell.is-popup:not(.is-advanced) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card{ width:44px!important; height:44px!important; min-height:44px!important; border-radius:14px!important; } .wbp-editor #generatorShell.is-popup:not(.is-advanced) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card__icon, .wbp-editor #generatorShell.is-popup:not(.is-advanced) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card__media, #generatorShell.is-popup:not(.is-advanced) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card__icon, #generatorShell.is-popup:not(.is-advanced) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card__media{ width:26px!important; height:26px!important; max-width:26px!important; max-height:26px!important; } .wbp-editor #generatorShell.is-popup:not(.is-advanced) .wbp-compact-secondary, #generatorShell.is-popup:not(.is-advanced) .wbp-compact-secondary{ display:none!important; } .wbp-editor #generatorShell.is-popup:not(.is-advanced) .wbp-compact-controls, #generatorShell.is-popup:not(.is-advanced) .wbp-compact-controls{ grid-row:2!important; position:static!important; inset:auto!important; display:grid!important; gap:7px!important; width:100%!important; max-width:370px!important; height:auto!important; min-height:0!important; margin:0 auto!important; padding:0!important; transform:none!important; background:transparent!important; border:0!important; box-shadow:none!important; } .wbp-editor #generatorShell.is-popup:not(.is-advanced) .wbp-actions, #generatorShell.is-popup:not(.is-advanced) .wbp-actions{ position:static!important; inset:auto!important; display:grid!important; grid-template-columns:minmax(0,.96fr) minmax(0,1.04fr)!important; gap:9px!important; width:100%!important; margin:0!important; padding:7px!important; transform:none!important; border-radius:17px!important; background:rgba(255,255,255,.96)!important; box-shadow:0 10px 28px rgba(45,20,78,.12)!important; } .wbp-editor #generatorShell.is-popup:not(.is-advanced) .wbp-actions .wbp-btn, #generatorShell.is-popup:not(.is-advanced) .wbp-actions .wbp-btn{ min-width:0!important; min-height:42px!important; padding:0 8px!important; gap:6px!important; border-radius:14px!important; font-size:12px!important; line-height:1.05!important; white-space:nowrap!important; } .wbp-editor #generatorShell.is-popup:not(.is-advanced) .wbp-actions .wbp-btn__asset, #generatorShell.is-popup:not(.is-advanced) .wbp-actions .wbp-btn__asset{ width:20px!important; height:20px!important; flex:0 0 20px!important; } } @media(max-width:360px){ .wbp-editor #generatorShell.is-popup:not(.is-advanced) #previewArea, #generatorShell.is-popup:not(.is-advanced) #previewArea{ height:clamp(232px,36dvh,292px)!important; } .wbp-editor #generatorShell.is-popup:not(.is-advanced) .wbp-preview-tools.wbp-simple-tools, #generatorShell.is-popup:not(.is-advanced) .wbp-preview-tools.wbp-simple-tools{ grid-template-columns:repeat(4,40px)!important; gap:7px!important; height:44px!important; } .wbp-editor #generatorShell.is-popup:not(.is-advanced) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card, #generatorShell.is-popup:not(.is-advanced) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card{ width:40px!important; height:40px!important; min-height:40px!important; } .wbp-editor #generatorShell.is-popup:not(.is-advanced) .wbp-actions .wbp-btn, #generatorShell.is-popup:not(.is-advanced) .wbp-actions .wbp-btn{ min-height:40px!important; padding:0 7px!important; font-size:11px!important; } } /* 0.9.528 mobile simple editor: make the preview readable and keep tools/actions calm. */ @media(max-width:640px){ .wbp-editor #generatorShell.is-popup:not(.is-advanced):not(.is-video-generating):not(.is-video-ready):not(.is-video-error):not(.is-video-protected), #generatorShell.is-popup:not(.is-advanced):not(.is-video-generating):not(.is-video-ready):not(.is-video-error):not(.is-video-protected){ grid-template-rows:56px auto auto!important; align-content:start!important; gap:8px!important; height:100dvh!important; max-height:100dvh!important; overflow-x:hidden!important; overflow-y:auto!important; padding:8px 10px calc(12px + env(safe-area-inset-bottom,0px))!important; } .wbp-editor #generatorShell.is-popup:not(.is-advanced):not(.is-video-generating):not(.is-video-ready):not(.is-video-error):not(.is-video-protected) .wbp-stage-panel, #generatorShell.is-popup:not(.is-advanced):not(.is-video-generating):not(.is-video-ready):not(.is-video-error):not(.is-video-protected) .wbp-stage-panel{ display:grid!important; grid-template-rows:auto auto!important; gap:10px!important; width:100%!important; min-height:0!important; padding:0 0 4px!important; overflow:visible!important; } .wbp-editor #generatorShell.is-popup:not(.is-advanced):not(.is-video-generating):not(.is-video-ready):not(.is-video-error):not(.is-video-protected) .wbp-preview-layout, #generatorShell.is-popup:not(.is-advanced):not(.is-video-generating):not(.is-video-ready):not(.is-video-error):not(.is-video-protected) .wbp-preview-layout{ display:grid!important; grid-template-columns:1fr!important; grid-template-rows:auto 48px!important; place-items:center!important; gap:8px!important; width:100%!important; height:auto!important; min-height:0!important; padding:0!important; } .wbp-editor #generatorShell.is-popup:not(.is-advanced):not(.is-video-generating):not(.is-video-ready):not(.is-video-error):not(.is-video-protected) #previewArea, #generatorShell.is-popup:not(.is-advanced):not(.is-video-generating):not(.is-video-ready):not(.is-video-error):not(.is-video-protected) #previewArea{ grid-column:1!important; grid-row:1!important; justify-self:center!important; align-self:center!important; width:auto!important; height:clamp(245px,38dvh,320px)!important; max-width:calc(100vw - 44px)!important; max-height:none!important; margin:0 auto!important; border-width:5px!important; border-radius:20px!important; transform:none!important; } .wbp-editor #generatorShell.is-popup:not(.is-advanced):not(.is-video-generating):not(.is-video-ready):not(.is-video-error):not(.is-video-protected) .wbp-preview-tools.wbp-simple-tools, #generatorShell.is-popup:not(.is-advanced):not(.is-video-generating):not(.is-video-ready):not(.is-video-error):not(.is-video-protected) .wbp-preview-tools.wbp-simple-tools{ grid-column:1!important; grid-row:2!important; display:grid!important; grid-template-columns:repeat(4,44px)!important; justify-content:center!important; justify-self:center!important; align-items:center!important; gap:8px!important; width:auto!important; max-width:100%!important; height:48px!important; margin:0 auto!important; padding:0!important; overflow:visible!important; } .wbp-editor #generatorShell.is-popup:not(.is-advanced) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card, #generatorShell.is-popup:not(.is-advanced) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card{ width:44px!important; height:44px!important; min-height:44px!important; border-radius:14px!important; } .wbp-editor #generatorShell.is-popup:not(.is-advanced) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card__icon, .wbp-editor #generatorShell.is-popup:not(.is-advanced) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card__media, #generatorShell.is-popup:not(.is-advanced) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card__icon, #generatorShell.is-popup:not(.is-advanced) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card__media{ width:26px!important; height:26px!important; max-width:26px!important; max-height:26px!important; } .wbp-editor #generatorShell.is-popup:not(.is-advanced) .wbp-compact-secondary, #generatorShell.is-popup:not(.is-advanced) .wbp-compact-secondary{ display:none!important; } .wbp-editor #generatorShell.is-popup:not(.is-advanced) .wbp-compact-controls, #generatorShell.is-popup:not(.is-advanced) .wbp-compact-controls{ display:grid!important; gap:7px!important; width:100%!important; max-width:370px!important; margin:0 auto!important; padding:0!important; } .wbp-editor #generatorShell.is-popup:not(.is-advanced) .wbp-actions, #generatorShell.is-popup:not(.is-advanced) .wbp-actions{ position:static!important; display:grid!important; grid-template-columns:minmax(0,.96fr) minmax(0,1.04fr)!important; gap:9px!important; width:100%!important; margin:0!important; padding:7px!important; border-radius:17px!important; background:rgba(255,255,255,.96)!important; box-shadow:0 10px 28px rgba(45,20,78,.12)!important; } .wbp-editor #generatorShell.is-popup:not(.is-advanced) .wbp-actions .wbp-btn, #generatorShell.is-popup:not(.is-advanced) .wbp-actions .wbp-btn{ min-width:0!important; min-height:42px!important; padding:0 8px!important; gap:6px!important; border-radius:14px!important; font-size:12px!important; line-height:1.05!important; white-space:nowrap!important; } .wbp-editor #generatorShell.is-popup:not(.is-advanced) .wbp-actions .wbp-btn__asset, #generatorShell.is-popup:not(.is-advanced) .wbp-actions .wbp-btn__asset{ width:20px!important; height:20px!important; flex:0 0 20px!important; } .wbp-editor #generatorShell.is-popup:not(.is-advanced) .wbp-editor-brand, #generatorShell.is-popup:not(.is-advanced) .wbp-editor-brand{ min-height:0!important; margin:0!important; } .wbp-editor #generatorShell.is-popup:not(.is-advanced) .wbp-editor-brand img, #generatorShell.is-popup:not(.is-advanced) .wbp-editor-brand img{ width:108px!important; max-width:34vw!important; } .wbp-editor #generatorShell.is-popup:not(.is-advanced) .wbp-ai-disclosure, .wbp-editor #generatorShell.is-popup:not(.is-advanced) .wbp-ai-credit, #generatorShell.is-popup:not(.is-advanced) .wbp-ai-disclosure, #generatorShell.is-popup:not(.is-advanced) .wbp-ai-credit{ margin-top:2px!important; font-size:11px!important; } .wbp-editor #generatorShell.is-popup:not(.is-advanced) .wbp-form-panel, #generatorShell.is-popup:not(.is-advanced) .wbp-form-panel{ padding:0 2px 4px!important; } .wbp-editor #generatorShell.is-popup:not(.is-advanced) .wbp-simple-text-editor, #generatorShell.is-popup:not(.is-advanced) .wbp-simple-text-editor{ margin:4px 0 0!important; } } @media(max-width:360px){ .wbp-editor #generatorShell.is-popup:not(.is-advanced) #previewArea, #generatorShell.is-popup:not(.is-advanced) #previewArea{ height:clamp(230px,36dvh,292px)!important; } .wbp-editor #generatorShell.is-popup:not(.is-advanced) .wbp-preview-tools.wbp-simple-tools, #generatorShell.is-popup:not(.is-advanced) .wbp-preview-tools.wbp-simple-tools{ grid-template-columns:repeat(4,40px)!important; gap:7px!important; height:44px!important; } .wbp-editor #generatorShell.is-popup:not(.is-advanced) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card, #generatorShell.is-popup:not(.is-advanced) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card{ width:40px!important; height:40px!important; min-height:40px!important; } .wbp-editor #generatorShell.is-popup:not(.is-advanced) .wbp-actions .wbp-btn, #generatorShell.is-popup:not(.is-advanced) .wbp-actions .wbp-btn{ min-height:40px!important; padding:0 7px!important; font-size:11px!important; } } /* 0.9.521: render/result state owns the whole editor surface. */ .wbp-editor #generatorShell.is-video-generating, .wbp-editor #generatorShell.is-video-ready, .wbp-editor #generatorShell.is-video-error, .wbp-editor #generatorShell.is-video-protected, #generatorShell.is-video-generating, #generatorShell.is-video-ready, #generatorShell.is-video-error, #generatorShell.is-video-protected{ display:grid!important; grid-template-columns:1fr!important; grid-template-rows:auto auto!important; gap:16px!important; height:auto!important; min-height:0!important; max-height:none!important; overflow:visible!important; align-items:stretch!important; cursor:default!important; } .wbp-editor #generatorShell.is-video-generating .wbp-editor-topbar, .wbp-editor #generatorShell.is-video-ready .wbp-editor-topbar, .wbp-editor #generatorShell.is-video-error .wbp-editor-topbar, .wbp-editor #generatorShell.is-video-protected .wbp-editor-topbar, #generatorShell.is-video-generating .wbp-editor-topbar, #generatorShell.is-video-ready .wbp-editor-topbar, #generatorShell.is-video-error .wbp-editor-topbar, #generatorShell.is-video-protected .wbp-editor-topbar{ display:grid!important; grid-column:1/-1!important; } .wbp-editor #generatorShell.is-video-generating .wbp-mode-switch, .wbp-editor #generatorShell.is-video-ready .wbp-mode-switch, .wbp-editor #generatorShell.is-video-error .wbp-mode-switch, .wbp-editor #generatorShell.is-video-protected .wbp-mode-switch, #generatorShell.is-video-generating .wbp-mode-switch, #generatorShell.is-video-ready .wbp-mode-switch, #generatorShell.is-video-error .wbp-mode-switch, #generatorShell.is-video-protected .wbp-mode-switch{ display:none!important; } .wbp-editor #generatorShell.is-video-generating .wbp-form-panel, .wbp-editor #generatorShell.is-video-ready .wbp-form-panel, .wbp-editor #generatorShell.is-video-error .wbp-form-panel, .wbp-editor #generatorShell.is-video-protected .wbp-form-panel, #generatorShell.is-video-generating .wbp-form-panel, #generatorShell.is-video-ready .wbp-form-panel, #generatorShell.is-video-error .wbp-form-panel, #generatorShell.is-video-protected .wbp-form-panel{ display:none!important; } .wbp-editor #generatorShell.is-video-generating .wbp-stage-panel, .wbp-editor #generatorShell.is-video-ready .wbp-stage-panel, .wbp-editor #generatorShell.is-video-error .wbp-stage-panel, .wbp-editor #generatorShell.is-video-protected .wbp-stage-panel, #generatorShell.is-video-generating .wbp-stage-panel, #generatorShell.is-video-ready .wbp-stage-panel, #generatorShell.is-video-error .wbp-stage-panel, #generatorShell.is-video-protected .wbp-stage-panel{ grid-column:1/-1!important; position:static!important; inset:auto!important; display:flex!important; flex-direction:column!important; align-items:center!important; justify-content:center!important; gap:12px!important; width:100%!important; height:auto!important; min-height:0!important; max-height:none!important; overflow:visible!important; padding:20px!important; } .wbp-editor #generatorShell.is-video-generating .wbp-stage-label, .wbp-editor #generatorShell.is-video-ready .wbp-stage-label, .wbp-editor #generatorShell.is-video-error .wbp-stage-label, .wbp-editor #generatorShell.is-video-protected .wbp-stage-label, .wbp-editor #generatorShell.is-video-generating .wbp-preview-layout, .wbp-editor #generatorShell.is-video-ready .wbp-preview-layout, .wbp-editor #generatorShell.is-video-error .wbp-preview-layout, .wbp-editor #generatorShell.is-video-protected .wbp-preview-layout, .wbp-editor #generatorShell.is-video-generating .wbp-video-container, .wbp-editor #generatorShell.is-video-ready .wbp-video-container, .wbp-editor #generatorShell.is-video-error .wbp-video-container, .wbp-editor #generatorShell.is-video-protected .wbp-video-container, .wbp-editor #generatorShell.is-video-generating .wbp-preview-tools, .wbp-editor #generatorShell.is-video-ready .wbp-preview-tools, .wbp-editor #generatorShell.is-video-error .wbp-preview-tools, .wbp-editor #generatorShell.is-video-protected .wbp-preview-tools, .wbp-editor #generatorShell.is-video-generating .wbp-compact-secondary, .wbp-editor #generatorShell.is-video-ready .wbp-compact-secondary, .wbp-editor #generatorShell.is-video-error .wbp-compact-secondary, .wbp-editor #generatorShell.is-video-protected .wbp-compact-secondary, #generatorShell.is-video-generating .wbp-stage-label, #generatorShell.is-video-ready .wbp-stage-label, #generatorShell.is-video-error .wbp-stage-label, #generatorShell.is-video-protected .wbp-stage-label, #generatorShell.is-video-generating .wbp-preview-layout, #generatorShell.is-video-ready .wbp-preview-layout, #generatorShell.is-video-error .wbp-preview-layout, #generatorShell.is-video-protected .wbp-preview-layout, #generatorShell.is-video-generating .wbp-video-container, #generatorShell.is-video-ready .wbp-video-container, #generatorShell.is-video-error .wbp-video-container, #generatorShell.is-video-protected .wbp-video-container, #generatorShell.is-video-generating .wbp-preview-tools, #generatorShell.is-video-ready .wbp-preview-tools, #generatorShell.is-video-error .wbp-preview-tools, #generatorShell.is-video-protected .wbp-preview-tools, #generatorShell.is-video-generating .wbp-compact-secondary, #generatorShell.is-video-ready .wbp-compact-secondary, #generatorShell.is-video-error .wbp-compact-secondary, #generatorShell.is-video-protected .wbp-compact-secondary{ display:none!important; } .wbp-editor #generatorShell.is-video-generating .wbp-render-snapshot-frame, .wbp-editor #generatorShell.is-video-ready .wbp-render-snapshot-frame, .wbp-editor #generatorShell.is-video-error .wbp-render-snapshot-frame, .wbp-editor #generatorShell.is-video-protected .wbp-render-snapshot-frame, #generatorShell.is-video-generating .wbp-render-snapshot-frame, #generatorShell.is-video-ready .wbp-render-snapshot-frame, #generatorShell.is-video-error .wbp-render-snapshot-frame, #generatorShell.is-video-protected .wbp-render-snapshot-frame{ display:block!important; order:1!important; width:min(100%,280px)!important; margin:0 auto!important; text-align:center!important; } .wbp-editor #generatorShell.is-video-generating .wbp-render-snapshot-frame[hidden], .wbp-editor #generatorShell.is-video-ready .wbp-render-snapshot-frame[hidden], .wbp-editor #generatorShell.is-video-error .wbp-render-snapshot-frame[hidden], .wbp-editor #generatorShell.is-video-protected .wbp-render-snapshot-frame[hidden], #generatorShell.is-video-generating .wbp-render-snapshot-frame[hidden], #generatorShell.is-video-ready .wbp-render-snapshot-frame[hidden], #generatorShell.is-video-error .wbp-render-snapshot-frame[hidden], #generatorShell.is-video-protected .wbp-render-snapshot-frame[hidden]{ display:none!important; } .wbp-editor #generatorShell.is-video-generating .wbp-render-snapshot-frame img, .wbp-editor #generatorShell.is-video-ready .wbp-render-snapshot-frame img, .wbp-editor #generatorShell.is-video-error .wbp-render-snapshot-frame img, .wbp-editor #generatorShell.is-video-protected .wbp-render-snapshot-frame img, #generatorShell.is-video-generating .wbp-render-snapshot-frame img, #generatorShell.is-video-ready .wbp-render-snapshot-frame img, #generatorShell.is-video-error .wbp-render-snapshot-frame img, #generatorShell.is-video-protected .wbp-render-snapshot-frame img{ display:block!important; width:min(100%,220px)!important; max-width:220px!important; max-height:42vh!important; aspect-ratio:9/16!important; height:auto!important; object-fit:cover!important; margin:0 auto!important; } .wbp-editor #generatorShell.is-video-generating .wbp-compact-controls, .wbp-editor #generatorShell.is-video-ready .wbp-compact-controls, .wbp-editor #generatorShell.is-video-error .wbp-compact-controls, .wbp-editor #generatorShell.is-video-protected .wbp-compact-controls, #generatorShell.is-video-generating .wbp-compact-controls, #generatorShell.is-video-ready .wbp-compact-controls, #generatorShell.is-video-error .wbp-compact-controls, #generatorShell.is-video-protected .wbp-compact-controls{ order:2!important; position:static!important; inset:auto!important; display:flex!important; flex-direction:column!important; align-items:center!important; gap:10px!important; width:min(100%,560px)!important; max-width:560px!important; height:auto!important; min-height:0!important; max-height:none!important; margin:0 auto!important; padding:0!important; transform:none!important; overflow:visible!important; background:transparent!important; border:0!important; border-radius:0!important; box-shadow:none!important; } .wbp-editor #generatorShell.is-video-generating .wbp-actions, .wbp-editor #generatorShell.is-video-ready .wbp-actions, .wbp-editor #generatorShell.is-video-error .wbp-actions, .wbp-editor #generatorShell.is-video-protected .wbp-actions, #generatorShell.is-video-generating .wbp-actions, #generatorShell.is-video-ready .wbp-actions, #generatorShell.is-video-error .wbp-actions, #generatorShell.is-video-protected .wbp-actions{ position:static!important; inset:auto!important; display:flex!important; justify-content:center!important; width:100%!important; max-width:100%!important; margin:0!important; padding:0!important; transform:none!important; background:transparent!important; border:0!important; border-radius:0!important; box-shadow:none!important; } .wbp-editor #generatorShell.is-video-generating .wbp-progress, .wbp-editor #generatorShell.is-video-ready .wbp-status, .wbp-editor #generatorShell.is-video-error .wbp-status, .wbp-editor #generatorShell.is-video-protected .wbp-status, #generatorShell.is-video-generating .wbp-progress, #generatorShell.is-video-ready .wbp-status, #generatorShell.is-video-error .wbp-status, #generatorShell.is-video-protected .wbp-status{ width:100%!important; max-width:520px!important; margin:0 auto!important; } .wbp-editor #generatorShell.is-video-ready #downloadVideo, .wbp-editor #generatorShell.is-video-error #retryRender, #generatorShell.is-video-ready #downloadVideo, #generatorShell.is-video-error #retryRender{ width:min(100%,300px)!important; min-height:56px!important; justify-content:center!important; } .wbp-editor #generatorShell.is-video-ready .wbp-render-recovery-note, #generatorShell.is-video-ready .wbp-render-recovery-note{ width:min(100%,520px)!important; margin:0 auto!important; padding:0 4px!important; } @media(max-width:1024px){ .wbp-editor #generatorShell.is-video-generating:not(.is-popup), .wbp-editor #generatorShell.is-video-ready:not(.is-popup), .wbp-editor #generatorShell.is-video-error:not(.is-popup), .wbp-editor #generatorShell.is-video-protected:not(.is-popup), #generatorShell.is-video-generating:not(.is-popup), #generatorShell.is-video-ready:not(.is-popup), #generatorShell.is-video-error:not(.is-popup), #generatorShell.is-video-protected:not(.is-popup){ height:auto!important; min-height:0!important; max-height:none!important; } } @media(max-width:760px){ .wbp-editor #generatorShell.is-video-generating, .wbp-editor #generatorShell.is-video-ready, .wbp-editor #generatorShell.is-video-error, .wbp-editor #generatorShell.is-video-protected, #generatorShell.is-video-generating, #generatorShell.is-video-ready, #generatorShell.is-video-error, #generatorShell.is-video-protected{ gap:10px!important; padding:12px!important; } .wbp-editor #generatorShell.is-popup.is-video-generating, .wbp-editor #generatorShell.is-popup.is-video-ready, .wbp-editor #generatorShell.is-popup.is-video-error, .wbp-editor #generatorShell.is-popup.is-video-protected, #generatorShell.is-popup.is-video-generating, #generatorShell.is-popup.is-video-ready, #generatorShell.is-popup.is-video-error, #generatorShell.is-popup.is-video-protected{ width:100vw!important; height:100dvh!important; max-height:100dvh!important; overflow:auto!important; grid-template-rows:auto minmax(0,1fr)!important; } .wbp-editor #generatorShell.is-video-generating .wbp-stage-panel, .wbp-editor #generatorShell.is-video-ready .wbp-stage-panel, .wbp-editor #generatorShell.is-video-error .wbp-stage-panel, .wbp-editor #generatorShell.is-video-protected .wbp-stage-panel, #generatorShell.is-video-generating .wbp-stage-panel, #generatorShell.is-video-ready .wbp-stage-panel, #generatorShell.is-video-error .wbp-stage-panel, #generatorShell.is-video-protected .wbp-stage-panel{ padding:14px 12px calc(16px + env(safe-area-inset-bottom,0px))!important; justify-content:flex-start!important; } .wbp-editor #generatorShell.is-video-generating .wbp-render-snapshot-frame img, .wbp-editor #generatorShell.is-video-ready .wbp-render-snapshot-frame img, .wbp-editor #generatorShell.is-video-error .wbp-render-snapshot-frame img, .wbp-editor #generatorShell.is-video-protected .wbp-render-snapshot-frame img, #generatorShell.is-video-generating .wbp-render-snapshot-frame img, #generatorShell.is-video-ready .wbp-render-snapshot-frame img, #generatorShell.is-video-error .wbp-render-snapshot-frame img, #generatorShell.is-video-protected .wbp-render-snapshot-frame img{ width:min(58vw,200px)!important; max-width:200px!important; max-height:34dvh!important; } } @media(max-width:380px), (max-height:700px){ .wbp-editor #generatorShell.is-video-generating .wbp-render-snapshot-frame img, .wbp-editor #generatorShell.is-video-ready .wbp-render-snapshot-frame img, .wbp-editor #generatorShell.is-video-error .wbp-render-snapshot-frame img, .wbp-editor #generatorShell.is-video-protected .wbp-render-snapshot-frame img, #generatorShell.is-video-generating .wbp-render-snapshot-frame img, #generatorShell.is-video-ready .wbp-render-snapshot-frame img, #generatorShell.is-video-error .wbp-render-snapshot-frame img, #generatorShell.is-video-protected .wbp-render-snapshot-frame img{ width:min(50vw,166px)!important; max-width:166px!important; max-height:30dvh!important; } } /* 0.9.517 specificity lock: defeat the mobile text-panel visibility override. */ @media(max-width:760px){ #generatorShell.is-popup.is-video-generating:not(.is-advanced) .wbp-form-panel, #generatorShell.is-popup.is-video-ready:not(.is-advanced) .wbp-form-panel, .wbp-editor #generatorShell.is-popup.is-video-generating:not(.is-advanced) .wbp-form-panel, .wbp-editor #generatorShell.is-popup.is-video-ready:not(.is-advanced) .wbp-form-panel{ display:none!important; visibility:hidden!important; opacity:0!important; height:0!important; max-height:0!important; overflow:hidden!important; padding:0!important; } } /* 0.9.517 post-0.9.516 override: render journey acts like a focused result screen. */ #generatorShell.is-video-generating .wbp-form-panel, #generatorShell.is-video-ready .wbp-form-panel, .wbp-editor #generatorShell.is-video-generating .wbp-form-panel, .wbp-editor #generatorShell.is-video-ready .wbp-form-panel{ display:none!important; } @media(max-width:640px){ #generatorShell.is-popup.is-video-generating, #generatorShell.is-popup.is-video-ready{ grid-template-rows:56px minmax(0,1fr)!important; } #generatorShell.is-popup.is-video-generating .wbp-editor-topbar, #generatorShell.is-popup.is-video-ready .wbp-editor-topbar{ display:grid!important; } #generatorShell.is-popup.is-video-generating .wbp-mode-switch, #generatorShell.is-popup.is-video-ready .wbp-mode-switch{ display:none!important; } #generatorShell.is-popup.is-video-generating .wbp-stage-panel, #generatorShell.is-popup.is-video-ready .wbp-stage-panel{ height:auto!important; min-height:0!important; align-content:start!important; padding:12px 14px calc(18px + env(safe-area-inset-bottom,0px))!important; } #generatorShell.is-popup.is-video-generating .wbp-compact-controls, #generatorShell.is-popup.is-video-ready .wbp-compact-controls{ width:100%!important; max-width:420px!important; margin:0 auto!important; } #generatorShell.is-popup.is-video-generating .wbp-render-snapshot-frame img, #generatorShell.is-popup.is-video-ready .wbp-render-snapshot-frame img{ width:min(54dvw,190px)!important; max-height:42dvh!important; } } /* v3.1 Tomas UX cleanup: compact is clean, advanced lives only in fullscreen, icons are bounded assets. */ .wbp-editor .wbp-edit-hint{ display:none!important; } .wbp-editor .wbp-preview-tools.wbp-simple-tools .wbp-tool-card, .wbp-editor .wbp-preview-tools.wbp-simple-tools .wbp-tool-card *{ box-sizing:border-box!important; } .wbp-editor .wbp-preview-tools.wbp-simple-tools .wbp-tool-card{ position:relative!important; display:grid!important; place-items:center!important; gap:0!important; overflow:hidden!important; padding:0!important; min-width:0!important; min-height:0!important; } .wbp-editor .wbp-preview-tools.wbp-simple-tools .wbp-tool-card::before, .wbp-editor .wbp-preview-tools.wbp-simple-tools .wbp-tool-card::after, .wbp-editor .wbp-preview-tools.wbp-simple-tools .wbp-tool-card__icon::before, .wbp-editor .wbp-preview-tools.wbp-simple-tools .wbp-tool-card__icon::after, .wbp-editor .wbp-preview-tools.wbp-simple-tools .wbp-tool-card__media::before, .wbp-editor .wbp-preview-tools.wbp-simple-tools .wbp-tool-card__media::after{ content:none!important; display:none!important; } .wbp-editor .wbp-preview-tools.wbp-simple-tools .wbp-tool-card b{ position:absolute!important; width:1px!important; height:1px!important; margin:-1px!important; padding:0!important; border:0!important; clip:rect(0 0 0 0)!important; clip-path:inset(50%)!important; overflow:hidden!important; white-space:nowrap!important; } .wbp-editor .wbp-preview-tools.wbp-simple-tools .wbp-tool-card__media, .wbp-editor .wbp-preview-tools.wbp-simple-tools .wbp-tool-card__icon{ display:grid!important; place-items:center!important; width:34px!important; height:34px!important; max-width:68%!important; max-height:68%!important; margin:0!important; padding:0!important; border:0!important; border-radius:0!important; background:none!important; box-shadow:none!important; transform:none!important; overflow:visible!important; } .wbp-editor .wbp-preview-tools.wbp-simple-tools .wbp-tool-card__media img, .wbp-editor .wbp-preview-tools.wbp-simple-tools .wbp-tool-card__icon img{ display:block!important; width:100%!important; height:100%!important; max-width:100%!important; max-height:100%!important; object-fit:contain!important; margin:0!important; padding:0!important; transform:none!important; opacity:1!important; filter:drop-shadow(0 4px 7px rgba(77,35,105,.13))!important; } .wbp-editor .wbp-editor-shell:not(.is-popup) .wbp-compact-advanced{ display:none!important; } .wbp-editor .wbp-editor-shell:not(.is-popup) .wbp-compact-secondary{ display:flex!important; justify-content:flex-end!important; align-items:center!important; gap:0!important; width:100%!important; margin:0!important; } .wbp-editor .wbp-editor-shell:not(.is-popup) .wbp-compact-fullscreen{ width:44px!important; min-width:44px!important; height:44px!important; min-height:44px!important; padding:0!important; border-radius:15px!important; } .wbp-editor .wbp-editor-shell:not(.is-popup) .wbp-compact-fullscreen img{ width:24px!important; height:24px!important; object-fit:contain!important; } .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-compact-advanced{ display:inline-flex!important; align-items:center!important; justify-content:center!important; min-height:44px!important; max-width:210px!important; } .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-compact-advanced img{ width:24px!important; height:24px!important; object-fit:contain!important; flex:0 0 auto!important; } .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-compact-advanced span{ min-width:0!important; white-space:nowrap!important; overflow:hidden!important; text-overflow:ellipsis!important; } .wbp-editor .wbp-editor-shell:not(.is-popup) .wbp-preview-tools.wbp-simple-tools{ width:54px!important; gap:8px!important; } .wbp-editor .wbp-editor-shell:not(.is-popup) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card{ width:54px!important; height:54px!important; min-height:54px!important; border-radius:17px!important; } .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-preview-tools.wbp-simple-tools{ width:72px!important; gap:10px!important; } .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card{ width:72px!important; height:72px!important; min-height:72px!important; border-radius:20px!important; } .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card__media, .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card__icon{ width:38px!important; height:38px!important; max-width:62%!important; max-height:62%!important; } @media(max-width:380px){ .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-preview-tools.wbp-simple-tools{ width:62px!important; gap:8px!important; } .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card{ width:62px!important; height:62px!important; min-height:62px!important; border-radius:18px!important; } .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card__media, .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card__icon{ width:32px!important; height:32px!important; } } /* v3.1.1 final polish: no redundant advanced title, no advanced CTA while already advanced. */ .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-editor-topbar::before{ content:none!important; display:none!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-compact-advanced{ display:none!important; } .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-compact-advanced{ width:auto!important; min-width:148px!important; padding:0 16px!important; } /* v3.2 absolute final interaction architecture: simple tools right, advanced selectors left, contextual controls below. */ .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-preview-layout{ grid-template-columns:minmax(0,auto) 72px!important; gap:12px!important; } .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-video-container{ grid-column:1!important; justify-self:end!important; } .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-preview-tools.wbp-simple-tools{ grid-column:2!important; justify-self:start!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-grid > *{ display:none!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced[data-advanced-panel="text"] .wbp-advanced-grid > .wbp-control-text, .wbp-editor .wbp-editor-shell.is-popup.is-advanced[data-advanced-panel="text"] .wbp-advanced-grid > .wbp-control-box, .wbp-editor .wbp-editor-shell.is-popup.is-advanced[data-advanced-panel="text"] .wbp-advanced-grid > .wbp-control-transform, .wbp-editor .wbp-editor-shell.is-popup.is-advanced[data-advanced-panel="effects"] .wbp-advanced-grid > .wbp-control-transform, .wbp-editor .wbp-editor-shell.is-popup.is-advanced[data-advanced-panel="background"] .wbp-advanced-grid > .wbp-control-background, .wbp-editor .wbp-editor-shell.is-popup.is-advanced[data-advanced-panel="music"] .wbp-advanced-grid > .wbp-control-music{ display:grid!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced[data-advanced-panel="text"][data-advanced-target="mensaje"] .wbp-advanced-grid > .wbp-control-message{ display:grid!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced[data-advanced-panel="text"]:not([data-advanced-target="mensaje"]) .wbp-advanced-grid > .wbp-control-message{ display:none!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-control-target{ display:none!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-tabs{ display:none!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-grid{ align-content:start!important; margin:0!important; border-radius:22px!important; padding:14px 16px 58px!important; } @media(max-width:560px){ .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-preview-layout{ grid-template-columns:minmax(0,auto) 62px!important; gap:8px!important; } .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-preview-tools.wbp-simple-tools{ width:62px!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced{ grid-template-columns:72px minmax(0,1fr)!important; grid-template-rows:52px minmax(0,40dvh) minmax(0,1fr)!important; gap:8px!important; padding:8px!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-editor-topbar{ grid-column:1 / -1!important; grid-row:1!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-stage-panel{ grid-column:2!important; grid-row:2!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-toolbar{ grid-column:1!important; grid-row:2!important; grid-template-columns:1fr!important; grid-template-rows:repeat(6,minmax(0,1fr))!important; height:100%!important; overflow:hidden!important; gap:6px!important; padding:0!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-tool{ min-width:0!important; min-height:0!important; display:flex!important; flex-direction:column!important; align-items:center!important; justify-content:center!important; gap:2px!important; padding:4px!important; text-align:center!important; border-radius:14px!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-tool > span{ width:28px!important; height:28px!important; margin:0!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-tool b{ font-size:10px!important; line-height:1!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-grid{ grid-column:1 / -1!important; grid-row:3!important; grid-template-columns:1fr 1fr!important; gap:8px!important; padding:10px 9px 54px!important; overflow:auto!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-grid > .wbp-advanced-section-title, .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-grid > .wbp-advanced-message-field{ grid-column:1 / -1!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-actions{ grid-column:1 / -1!important; grid-row:3!important; align-self:end!important; justify-self:stretch!important; display:grid!important; grid-template-columns:1fr 1fr!important; gap:7px!important; margin:0!important; padding:8px!important; background:linear-gradient(180deg,rgba(255,255,255,0),#fff 34%)!important; } } /* 0.9.516: free pilot UX fixes. Keep text editing obvious on phones before render. */ @media(max-width:760px){ #generatorShell.is-popup:not(.is-advanced) .wbp-stage-panel{ order:1!important; } #generatorShell.is-popup:not(.is-advanced) .wbp-form-panel{ display:block!important; order:2!important; padding:0 12px 12px!important; } #generatorShell.is-popup:not(.is-advanced) .wbp-controls-scroll{ display:block!important; max-height:none!important; overflow:visible!important; } #generatorShell.is-popup:not(.is-advanced) .wbp-simple-text-editor{ display:block!important; margin:10px 0 12px!important; padding:12px!important; border:1px solid rgba(106,27,154,.15)!important; border-radius:14px!important; background:#fff!important; box-shadow:0 8px 24px rgba(45,20,78,.08)!important; } #generatorShell.is-popup:not(.is-advanced) .wbp-simple-text-editor h3{ margin:0 0 10px!important; font-size:16px!important; line-height:1.2!important; color:#2f173d!important; } #generatorShell.is-popup:not(.is-advanced) .wbp-simple-text-editor .wbp-form-grid{ display:grid!important; grid-template-columns:1fr!important; gap:10px!important; } #generatorShell.is-popup:not(.is-advanced) .wbp-simple-text-editor input[type="text"], #generatorShell.is-popup:not(.is-advanced) .wbp-simple-text-editor textarea{ min-height:44px!important; font-size:16px!important; } #generatorShell.is-popup:not(.is-advanced) .wbp-simple-text-editor textarea{ min-height:88px!important; } #generatorShell.is-popup:not(.is-advanced) .wbp-actions{ position:sticky!important; bottom:max(8px,env(safe-area-inset-bottom,0px))!important; z-index:12!important; padding:8px!important; border-radius:18px!important; background:rgba(255,255,255,.94)!important; box-shadow:0 10px 30px rgba(45,20,78,.14)!important; backdrop-filter:blur(10px)!important; } #generatorShell.is-popup.is-video-ready .wbp-actions{ position:static!important; box-shadow:none!important; background:transparent!important; backdrop-filter:none!important; } } /* v3.2.1 contextual controls authority: override legacy :has(#id) rules. */ #generatorShell.is-popup.is-advanced .wbp-advanced-grid > *{ display:none!important; } #generatorShell.is-popup.is-advanced[data-advanced-panel="text"] .wbp-advanced-grid > .wbp-control-text, #generatorShell.is-popup.is-advanced[data-advanced-panel="text"] .wbp-advanced-grid > .wbp-control-box, #generatorShell.is-popup.is-advanced[data-advanced-panel="text"] .wbp-advanced-grid > .wbp-control-transform{ display:grid!important; } #generatorShell.is-popup.is-advanced[data-advanced-panel="text"][data-advanced-target="mensaje"] .wbp-advanced-grid > .wbp-control-message{ display:grid!important; } #generatorShell.is-popup.is-advanced[data-advanced-panel="text"]:not([data-advanced-target="mensaje"]) .wbp-advanced-grid > .wbp-control-message, #generatorShell.is-popup.is-advanced[data-advanced-panel="text"] .wbp-advanced-grid > .wbp-control-background, #generatorShell.is-popup.is-advanced[data-advanced-panel="text"] .wbp-advanced-grid > .wbp-control-music, #generatorShell.is-popup.is-advanced[data-advanced-panel="text"] .wbp-advanced-grid label:has(#advancedBackgroundCategory), #generatorShell.is-popup.is-advanced[data-advanced-panel="text"] .wbp-advanced-grid label:has(#advancedBackgroundSelect), #generatorShell.is-popup.is-advanced[data-advanced-panel="text"] .wbp-advanced-grid label:has(#advancedMusicCategory), #generatorShell.is-popup.is-advanced[data-advanced-panel="text"] .wbp-advanced-grid label:has(#advancedMusicSelect){ display:none!important; } #generatorShell.is-popup.is-advanced[data-advanced-panel="background"] .wbp-advanced-grid > .wbp-control-background, #generatorShell.is-popup.is-advanced[data-advanced-panel="background"] .wbp-advanced-grid label:has(#advancedBackgroundCategory), #generatorShell.is-popup.is-advanced[data-advanced-panel="background"] .wbp-advanced-grid label:has(#advancedBackgroundSelect){ display:grid!important; } #generatorShell.is-popup.is-advanced[data-advanced-panel="background"] .wbp-advanced-grid > :not(.wbp-control-background){ display:none!important; } #generatorShell.is-popup.is-advanced[data-advanced-panel="music"] .wbp-advanced-grid > .wbp-control-music, #generatorShell.is-popup.is-advanced[data-advanced-panel="music"] .wbp-advanced-grid label:has(#advancedMusicCategory), #generatorShell.is-popup.is-advanced[data-advanced-panel="music"] .wbp-advanced-grid label:has(#advancedMusicSelect){ display:grid!important; } #generatorShell.is-popup.is-advanced[data-advanced-panel="music"] .wbp-advanced-grid > :not(.wbp-control-music){ display:none!important; } #generatorShell.is-popup.is-advanced[data-advanced-panel="effects"] .wbp-advanced-grid > .wbp-control-transform{ display:grid!important; } #generatorShell.is-popup.is-advanced[data-advanced-panel="effects"] .wbp-advanced-grid > :not(.wbp-control-transform){ display:none!important; } /* v3.2 interaction architecture: simple tools right, advanced selectors left, contextual controls below. */ .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-preview-layout{ grid-template-columns:minmax(0,auto) 72px!important; gap:12px!important; } .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-video-container{ grid-column:1!important; justify-self:end!important; } .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-preview-tools.wbp-simple-tools{ grid-column:2!important; justify-self:start!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-grid > *{ display:none!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced[data-advanced-panel="text"] .wbp-advanced-grid > .wbp-control-text, .wbp-editor .wbp-editor-shell.is-popup.is-advanced[data-advanced-panel="text"] .wbp-advanced-grid > .wbp-control-box, .wbp-editor .wbp-editor-shell.is-popup.is-advanced[data-advanced-panel="text"] .wbp-advanced-grid > .wbp-control-transform, .wbp-editor .wbp-editor-shell.is-popup.is-advanced[data-advanced-panel="effects"] .wbp-advanced-grid > .wbp-control-transform, .wbp-editor .wbp-editor-shell.is-popup.is-advanced[data-advanced-panel="background"] .wbp-advanced-grid > .wbp-control-background, .wbp-editor .wbp-editor-shell.is-popup.is-advanced[data-advanced-panel="music"] .wbp-advanced-grid > .wbp-control-music{ display:grid!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced[data-advanced-panel="text"][data-advanced-target="mensaje"] .wbp-advanced-grid > .wbp-control-message{ display:grid!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced[data-advanced-panel="text"]:not([data-advanced-target="mensaje"]) .wbp-advanced-grid > .wbp-control-message{ display:none!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-control-target{ display:none!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-grid{ align-content:start!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-control-transform{ min-width:0!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-tabs{ display:none!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-grid{ margin:0!important; border-radius:22px!important; padding:14px 16px 58px!important; } @media(max-width:560px){ .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-preview-layout{ grid-template-columns:minmax(0,auto) 62px!important; gap:8px!important; } .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-preview-tools.wbp-simple-tools{ width:62px!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced{ grid-template-columns:72px minmax(0,1fr)!important; grid-template-rows:52px minmax(0,40dvh) minmax(0,1fr)!important; gap:8px!important; padding:8px!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-editor-topbar{ grid-column:1 / -1!important; grid-row:1!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-stage-panel{ grid-column:2!important; grid-row:2!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-toolbar{ grid-column:1!important; grid-row:2!important; grid-template-columns:1fr!important; grid-template-rows:repeat(6,minmax(0,1fr))!important; height:100%!important; overflow:hidden!important; gap:6px!important; padding:0!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-tool{ min-width:0!important; min-height:0!important; display:flex!important; flex-direction:column!important; align-items:center!important; justify-content:center!important; gap:2px!important; padding:4px!important; text-align:center!important; border-radius:14px!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-tool > span{ width:28px!important; height:28px!important; margin:0!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-tool b{ font-size:10px!important; line-height:1!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-grid{ grid-column:1 / -1!important; grid-row:3!important; grid-template-columns:1fr 1fr!important; gap:8px!important; padding:10px 9px 54px!important; overflow:auto!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-grid > .wbp-advanced-section-title, .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-grid > .wbp-advanced-message-field{ grid-column:1 / -1!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-actions{ grid-column:1 / -1!important; grid-row:3!important; align-self:end!important; justify-self:stretch!important; display:grid!important; grid-template-columns:1fr 1fr!important; gap:7px!important; margin:0!important; padding:8px!important; background:linear-gradient(180deg,rgba(255,255,255,0),#fff 34%)!important; } } /* v2.0 plugin editor redesign: compact/simple/advanced states */ .wbp-editor{ --wbp-ink:#22183b; --wbp-muted:#716586; --wbp-purple:#7b2bd6; --wbp-deep:#32145f; --wbp-pink:#df2f86; --wbp-orange:#ff961f; --wbp-line:#eadcf7; --wbp-soft:#fbf7ff; --wbp-shell-shadow:0 22px 70px rgba(68,31,113,.13); color:var(--wbp-ink); } .wbp-editor-shell{ position:relative!important; overflow:hidden; background: radial-gradient(circle at 4% 96%, rgba(123,43,214,.13), transparent 24%), radial-gradient(circle at 94% 12%, rgba(223,47,134,.10), transparent 24%), linear-gradient(180deg,#fffaf7,#fff 50%,#fbf7ff)!important; border:1px solid var(--wbp-line)!important; box-shadow:var(--wbp-shell-shadow)!important; } .wbp-wishi-decor{ position:absolute; z-index:6; width:64px; height:auto; right:18px; top:14px; pointer-events:none; filter:drop-shadow(0 12px 20px rgba(123,43,214,.18)); } .wbp-spark{ position:absolute; z-index:1; width:6px; height:6px; border-radius:50%; background:var(--wbp-orange); box-shadow:0 0 12px rgba(255,150,31,.75); pointer-events:none; } .wbp-spark--one{left:8%;top:14%} .wbp-spark--two{right:7%;top:28%} .wbp-spark--three{left:18%;bottom:14%} .wbp-editor-topbar{ display:none; align-items:center; justify-content:space-between; gap:12px; min-height:58px; } .wbp-nav-btn{ display:grid!important; place-items:center; width:54px!important; height:54px!important; border:1px solid var(--wbp-line)!important; border-radius:18px!important; background:#fff!important; color:var(--wbp-deep)!important; box-shadow:0 8px 24px rgba(50,20,95,.08)!important; padding:0!important; } .wbp-nav-btn svg{width:28px;height:28px} .wbp-mode-pill{ display:inline-flex; align-items:center; gap:8px; min-height:48px; padding:0 22px; border:1px solid var(--wbp-line); border-radius:999px; background:rgba(255,255,255,.9); font-size:18px; color:#4b3b6b; box-shadow:0 10px 30px rgba(50,20,95,.06); } .wbp-mode-pill b{color:var(--wbp-purple);letter-spacing:.04em} .wbp-stage-panel,.wbp-form-panel{ position:relative; z-index:2; background:rgba(255,255,255,.82)!important; border:1px solid rgba(234,220,247,.95)!important; box-shadow:0 18px 50px rgba(50,20,95,.08)!important; } .wbp-video-container{ border-radius:30px!important; border:7px solid #fff!important; box-shadow:0 20px 60px rgba(50,20,95,.16)!important; } .wbp-edit-hint{ position:absolute; left:50%; bottom:18px; z-index:8; transform:translateX(-50%); display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border-radius:999px; background:rgba(57,48,58,.54); color:#fff; font-weight:900; line-height:1; backdrop-filter:blur(8px); pointer-events:none; } .wbp-edit-hint:before{content:"☝";font-size:.95em} .wbp-tool-card, .wbp-advanced-tool{ border:1px solid var(--wbp-line)!important; border-radius:22px!important; background:rgba(255,255,255,.88)!important; color:var(--wbp-ink)!important; box-shadow:0 12px 30px rgba(50,20,95,.08)!important; } .wbp-tool-card b, .wbp-advanced-tool b{ display:block; margin-top:10px; color:#100b2d; font-size:17px; font-weight:950; } .wbp-tool-card > span:not(.wbp-tool-card__media):not(.wbp-tool-card__icon), .wbp-advanced-tool small{ display:block; margin-top:4px; color:var(--wbp-muted); font-size:14px; font-weight:700; } .wbp-tool-card__media, .wbp-tool-card__icon, .wbp-advanced-tool > span{ display:grid!important; place-items:center; width:64px!important; height:64px!important; margin:0 auto!important; border-radius:18px!important; background:linear-gradient(135deg,rgba(123,43,214,.14),rgba(223,47,134,.13))!important; color:var(--wbp-purple)!important; overflow:hidden; } .wbp-tool-card:nth-child(3n) .wbp-tool-card__icon, .wbp-advanced-tool:nth-child(3n) > span{ background:linear-gradient(135deg,rgba(255,150,31,.16),rgba(223,47,134,.12))!important; color:var(--wbp-orange)!important; } .wbp-tool-card svg{width:36px;height:36px} .wbp-tool-card__media img, .wbp-tool-card__media video{ width:100%; height:100%; object-fit:cover; } .wbp-actions{ display:grid!important; grid-template-columns:1fr 1.18fr!important; gap:14px!important; } .wbp-btn{ min-height:74px!important; border-radius:24px!important; font-size:22px!important; gap:12px!important; } .wbp-btn svg{width:28px;height:28px;flex:0 0 auto} .wbp-btn-outline{ background:#fff!important; border:1px solid var(--wbp-line)!important; color:var(--wbp-purple)!important; } .wbp-btn-primary{ border:0!important; color:#fff!important; background:linear-gradient(100deg,#f33651 0%,#df2f86 48%,#982cdb 100%)!important; box-shadow:0 20px 45px rgba(223,47,134,.25)!important; } .wbp-btn__crown{width:22px!important;height:22px!important;object-fit:contain} .wbp-compact-advanced{ min-height:60px; display:inline-flex; align-items:center; justify-content:center; gap:10px; border:1px solid #d6aaf4!important; border-radius:22px!important; background:rgba(255,255,255,.82)!important; color:var(--wbp-purple)!important; font-weight:950!important; } .wbp-compact-advanced svg{width:24px;height:24px} .wbp-compact-fullscreen{ display:grid; place-items:center; width:60px; min-height:60px; border:1px solid #d6aaf4!important; border-radius:22px!important; background:#fff!important; color:var(--wbp-purple)!important; } .wbp-compact-fullscreen svg{width:28px;height:28px} /* Compact inline: editor stays in upper half and page content can scroll below. */ .wbp-editor-shell:not(.is-popup){ display:grid!important; grid-template-columns:minmax(150px,.72fr) minmax(0,1fr)!important; grid-template-rows:minmax(0,1fr) auto!important; gap:12px!important; max-height:50vh!important; min-height:390px!important; padding:12px!important; border-radius:28px!important; } .wbp-editor-shell:not(.is-popup) .wbp-popup-title, .wbp-editor-shell:not(.is-popup) .wbp-stage-label, .wbp-editor-shell:not(.is-popup) .wbp-form-panel, .wbp-editor-shell:not(.is-popup) .wbp-editor-topbar, .wbp-editor-shell:not(.is-popup) .wbp-compact-advanced{ display:none!important; } .wbp-editor-shell:not(.is-popup) .wbp-stage-panel{ display:contents!important; } .wbp-editor-shell:not(.is-popup) .wbp-preview-layout{ display:grid!important; grid-template-columns:minmax(0,1fr) minmax(168px,.8fr)!important; grid-column:1 / -1!important; grid-row:1!important; gap:12px!important; min-height:0!important; } .wbp-editor-shell:not(.is-popup) .wbp-video-container{ height:calc(50vh - 96px)!important; min-height:280px!important; width:auto!important; max-width:100%!important; justify-self:center!important; border-radius:24px!important; border-width:5px!important; } .wbp-editor-shell:not(.is-popup) .wbp-simple-tools{ display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:10px!important; align-content:start!important; margin:36px 0 0!important; } .wbp-editor-shell:not(.is-popup) .wbp-tool-card{ min-height:78px!important; padding:12px!important; } .wbp-editor-shell:not(.is-popup) .wbp-tool-card b, .wbp-editor-shell:not(.is-popup) .wbp-tool-card > span:not(.wbp-tool-card__media):not(.wbp-tool-card__icon){ display:none!important; } .wbp-editor-shell:not(.is-popup) .wbp-tool-card__media, .wbp-editor-shell:not(.is-popup) .wbp-tool-card__icon{ width:52px!important; height:52px!important; } .wbp-editor-shell:not(.is-popup) .wbp-compact-controls{ grid-column:1 / -1!important; grid-row:2!important; } .wbp-editor-shell:not(.is-popup) .wbp-compact-secondary{ display:flex!important; justify-content:flex-end!important; margin:0 0 8px!important; } .wbp-editor-shell:not(.is-popup) .wbp-actions{grid-template-columns:1fr 1fr!important;gap:10px!important} .wbp-editor-shell:not(.is-popup) .wbp-btn{ min-height:48px!important; border-radius:16px!important; font-size:15px!important; } .wbp-editor-shell:not(.is-popup) .wbp-btn svg{width:20px;height:20px} .wbp-editor-shell:not(.is-popup) .wbp-wishi-decor{width:50px;right:14px;top:10px} /* Fullscreen simple. */ .wbp-editor-shell.is-popup{ position:fixed!important; inset:0!important; z-index:999999!important; width:100vw!important; height:100dvh!important; padding:24px 26px!important; border:0!important; border-radius:0!important; display:grid!important; grid-template-rows:auto minmax(0,1fr) auto!important; gap:18px!important; overflow:hidden!important; } body.wbp-popup-open{overflow:hidden!important} .wbp-editor-shell.is-popup .wbp-editor-topbar{ display:flex!important; grid-row:1!important; } .wbp-editor-shell.is-popup .wbp-popup-title, .wbp-editor-shell.is-popup .wbp-stage-label{ display:none!important; } .wbp-editor-shell.is-popup .wbp-stage-panel{ grid-row:2!important; height:auto!important; min-height:0!important; padding:0!important; border:0!important; box-shadow:none!important; background:transparent!important; overflow:visible!important; } .wbp-editor-shell.is-popup .wbp-preview-layout{ height:100%!important; display:grid!important; grid-template-columns:minmax(0,1fr) 210px!important; gap:24px!important; align-items:center!important; } .wbp-editor-shell.is-popup .wbp-video-container{ height:min(calc(100dvh - 250px), calc((100vw - 300px) * 1.777))!important; width:auto!important; max-width:100%!important; justify-self:center!important; } .wbp-editor-shell.is-popup .wbp-simple-tools{ display:grid!important; grid-template-columns:1fr!important; gap:18px!important; align-content:center!important; margin:0!important; } .wbp-editor-shell.is-popup .wbp-tool-card{ min-height:132px!important; padding:22px 14px!important; text-align:center!important; } .wbp-editor-shell.is-popup .wbp-form-panel{ display:none!important; } .wbp-editor-shell.is-popup .wbp-compact-controls{ grid-row:3!important; padding:20px 28px!important; border-radius:30px!important; background:rgba(255,255,255,.82)!important; border:1px solid rgba(234,220,247,.9)!important; box-shadow:0 20px 60px rgba(50,20,95,.09)!important; } .wbp-editor-shell.is-popup .wbp-compact-secondary{ display:grid!important; grid-template-columns:1fr!important; gap:12px!important; margin-top:14px!important; } .wbp-editor-shell.is-popup .wbp-compact-fullscreen{ display:none!important; } .wbp-editor-shell.is-popup .wbp-wishi-decor{ width:76px; right:86px; top:78px; } /* Fullscreen advanced: tools left, 9:16 preview right, detailed controls below. */ .wbp-editor-shell.is-popup.is-advanced{ grid-template-columns:320px minmax(0,1fr)!important; grid-template-rows:auto minmax(360px,1fr) minmax(250px,38dvh)!important; gap:20px 24px!important; } .wbp-editor-shell.is-popup.is-advanced .wbp-editor-topbar{grid-column:1 / -1!important} .wbp-editor-shell.is-popup.is-advanced .wbp-stage-panel{ grid-column:2!important; grid-row:2!important; } .wbp-editor-shell.is-popup.is-advanced .wbp-preview-layout{ display:block!important; height:100%!important; } .wbp-editor-shell.is-popup.is-advanced .wbp-video-container{ height:min(calc(100dvh - 430px), calc((100vw - 420px) * 1.777))!important; width:auto!important; margin:auto!important; } .wbp-editor-shell.is-popup.is-advanced .wbp-simple-tools, .wbp-editor-shell.is-popup.is-advanced .wbp-compact-controls{ display:none!important; } .wbp-editor-shell.is-popup.is-advanced .wbp-form-panel{ display:contents!important; } .wbp-editor-shell.is-popup.is-advanced .wbp-controls-scroll{ display:contents!important; } .wbp-editor-shell.is-popup.is-advanced .wbp-simple-text-editor, .wbp-editor-shell.is-popup.is-advanced .wbp-music-options, .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-toggle{ display:none!important; } .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-panel{ display:contents!important; } .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-toolbar{ grid-column:1!important; grid-row:2!important; display:grid!important; gap:12px!important; align-content:start!important; min-height:0!important; } .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-tool{ min-height:96px!important; padding:16px 18px!important; display:grid!important; grid-template-columns:70px 1fr auto!important; align-items:center!important; text-align:left!important; } .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-tool > span{ width:58px!important; height:58px!important; margin:0!important; } .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-tool.is-active{ border-color:#c15af1!important; box-shadow:0 0 0 2px rgba(193,90,241,.25),0 12px 30px rgba(50,20,95,.08)!important; } .wbp-editor-shell.is-popup.is-advanced .wbp-current-target{ display:none!important; } .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-tabs, .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-grid, .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-actions{ grid-column:1 / -1!important; grid-row:3!important; } .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-tabs{ align-self:start!important; display:grid!important; grid-template-columns:repeat(3,1fr)!important; margin:0 18px!important; border:1px solid var(--wbp-line)!important; border-radius:22px!important; overflow:hidden!important; background:#fff!important; z-index:2; } .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-tabs button{ min-height:58px!important; border:0!important; border-right:1px solid var(--wbp-line)!important; background:#fff!important; color:#655778!important; font-weight:950!important; } .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-tabs button:last-child{border-right:0!important} .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-tabs button.is-active{ color:var(--wbp-purple)!important; background:#fbf5ff!important; } .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-grid{ align-self:stretch!important; overflow:auto!important; margin:66px 0 0!important; padding:18px!important; border:1px solid var(--wbp-line)!important; border-radius:28px!important; background:rgba(255,255,255,.88)!important; box-shadow:0 18px 50px rgba(50,20,95,.08)!important; display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr))!important; gap:14px 18px!important; } .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-section-title{ grid-column:1 / -1!important; margin:6px 0 0!important; color:var(--wbp-purple)!important; font-size:.9rem!important; font-weight:950!important; } .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-grid label{ display:grid!important; gap:8px!important; margin:0!important; color:#473b5f!important; font-weight:850!important; } .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-grid input, .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-grid select{ min-height:44px!important; width:100%!important; border:1px solid #d8cce8!important; border-radius:14px!important; background:#fff!important; } .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-actions{ align-self:end!important; justify-self:end!important; display:flex!important; gap:10px!important; margin:0 18px 18px 0!important; z-index:3!important; } .wbp-editor-shell.is-popup.is-advanced .wbp-mini-btn{ min-height:42px!important; border:1px solid #d8cce8!important; border-radius:14px!important; background:#fff!important; color:var(--wbp-purple)!important; font-weight:900!important; } .wbp-editor-shell.is-popup.is-advanced #wbpModeLabel:before{content:""} @media(max-width:720px){ .wbp-editor-shell:not(.is-popup){ min-height:360px!important; padding:8px!important; } .wbp-editor-shell:not(.is-popup) .wbp-preview-layout{ grid-template-columns:minmax(0,1fr) 92px!important; gap:8px!important; } .wbp-editor-shell:not(.is-popup) .wbp-video-container{ height:calc(50vh - 84px)!important; min-height:270px!important; } .wbp-editor-shell:not(.is-popup) .wbp-simple-tools{ grid-template-columns:1fr!important; gap:8px!important; margin-top:26px!important; } .wbp-editor-shell:not(.is-popup) .wbp-tool-card{ min-height:58px!important; padding:8px!important; } .wbp-editor-shell:not(.is-popup) .wbp-tool-card__media, .wbp-editor-shell:not(.is-popup) .wbp-tool-card__icon{ width:42px!important; height:42px!important; border-radius:14px!important; } .wbp-editor-shell:not(.is-popup) .wbp-actions{grid-template-columns:1fr 1fr!important} .wbp-editor-shell:not(.is-popup) .wbp-btn{ min-height:42px!important; font-size:13px!important; } .wbp-editor-shell.is-popup{ padding:14px!important; gap:14px!important; } .wbp-editor-shell.is-popup .wbp-editor-topbar{min-height:52px} .wbp-nav-btn{width:46px!important;height:46px!important;border-radius:16px!important} .wbp-mode-pill{min-height:44px;font-size:16px;padding:0 18px} .wbp-editor-shell.is-popup .wbp-preview-layout{ grid-template-columns:minmax(0,1fr) 118px!important; gap:14px!important; } .wbp-editor-shell.is-popup .wbp-video-container{ height:min(calc(100dvh - 250px), calc((100vw - 160px) * 1.777))!important; } .wbp-editor-shell.is-popup .wbp-tool-card{ min-height:108px!important; padding:12px 8px!important; border-radius:20px!important; } .wbp-editor-shell.is-popup .wbp-tool-card__media, .wbp-editor-shell.is-popup .wbp-tool-card__icon{ width:54px!important; height:54px!important; } .wbp-editor-shell.is-popup .wbp-tool-card b{font-size:15px!important} .wbp-editor-shell.is-popup .wbp-tool-card > span:not(.wbp-tool-card__media):not(.wbp-tool-card__icon){display:none!important} .wbp-editor-shell.is-popup .wbp-compact-controls{ padding:18px 14px!important; border-radius:26px!important; } .wbp-editor-shell.is-popup .wbp-btn{ min-height:64px!important; border-radius:20px!important; font-size:19px!important; } .wbp-editor-shell.is-popup .wbp-wishi-decor{ width:58px; right:74px; top:70px; } .wbp-editor-shell.is-popup.is-advanced{ grid-template-columns:112px minmax(0,1fr)!important; grid-template-rows:auto minmax(320px,1fr) minmax(260px,42dvh)!important; gap:14px!important; } .wbp-editor-shell.is-popup.is-advanced .wbp-video-container{ height:min(calc(100dvh - 430px), calc((100vw - 150px) * 1.777))!important; } .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-toolbar{gap:10px!important} .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-tool{ display:block!important; min-height:80px!important; padding:10px!important; text-align:center!important; border-radius:20px!important; } .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-tool > span{ width:48px!important; height:48px!important; margin:0 auto 6px!important; } .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-tool b{font-size:13px!important} .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-tool small{display:none!important} .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-tabs{margin:0!important} .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-tabs button{ min-height:48px!important; font-size:14px!important; } .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-grid{ margin-top:56px!important; padding:12px!important; border-radius:24px!important; grid-template-columns:1fr 1fr!important; gap:12px!important; } } /* v3.0 practical UI rebuild: one action, one icon, clear ownership of space. */ .wbp-editor{ --wbp-v3-bg:#fffafd; --wbp-v3-panel:#ffffff; --wbp-v3-line:#eadcf7; --wbp-v3-ink:#24113f; --wbp-v3-muted:#6f5b83; --wbp-v3-purple:#7b24cf; --wbp-v3-pink:#ec2678; --wbp-v3-shadow:0 18px 42px rgba(48,20,80,.12); } .wbp-editor .wbp-spark, .wbp-editor .wbp-spark::before, .wbp-editor .wbp-spark::after, .wbp-editor .wbp-tool-card::before, .wbp-editor .wbp-tool-card::after, .wbp-editor .wbp-tool-card__icon::before, .wbp-editor .wbp-tool-card__icon::after{ content:none!important; display:none!important; } .wbp-editor .wbp-wishi-decor{ display:none!important; } .wbp-editor .wbp-tool-card, .wbp-editor .wbp-nav-btn, .wbp-editor .wbp-compact-fullscreen, .wbp-editor .wbp-compact-advanced, .wbp-editor .wbp-btn, .wbp-editor .wbp-advanced-tool{ -webkit-tap-highlight-color:transparent!important; } .wbp-editor .wbp-tool-card__media, .wbp-editor .wbp-tool-card__icon, .wbp-editor .wbp-tool-card__media img, .wbp-editor .wbp-tool-card__icon img, .wbp-editor .wbp-nav-btn img, .wbp-editor .wbp-compact-fullscreen img, .wbp-editor .wbp-compact-advanced img, .wbp-editor .wbp-btn__asset, .wbp-editor .wbp-advanced-tool > span img{ display:block!important; object-fit:contain!important; background:transparent!important; border:0!important; box-shadow:none!important; pointer-events:none!important; } .wbp-editor .wbp-preview-tools.wbp-simple-tools .wbp-tool-card{ display:grid!important; place-items:center!important; padding:0!important; border-radius:18px!important; background:linear-gradient(180deg,#fff,#fff8fd)!important; border:1px solid var(--wbp-v3-line)!important; box-shadow:0 10px 24px rgba(74,30,112,.09)!important; overflow:hidden!important; } .wbp-editor .wbp-preview-tools.wbp-simple-tools .wbp-tool-card b{ position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; } .wbp-editor .wbp-preview-tools.wbp-simple-tools .wbp-tool-card__media, .wbp-editor .wbp-preview-tools.wbp-simple-tools .wbp-tool-card__icon{ width:clamp(34px,7.5vw,52px)!important; height:clamp(34px,7.5vw,52px)!important; margin:0!important; overflow:visible!important; } .wbp-editor .wbp-preview-tools.wbp-simple-tools .wbp-tool-card__media img, .wbp-editor .wbp-preview-tools.wbp-simple-tools .wbp-tool-card__icon img{ width:100%!important; height:100%!important; filter:drop-shadow(0 7px 10px rgba(74,30,112,.13))!important; } .wbp-editor .wbp-actions .wbp-btn{ gap:8px!important; } .wbp-editor .wbp-btn__asset{ width:30px!important; height:30px!important; flex:0 0 30px!important; margin:0!important; } .wbp-editor .wbp-btn__crown{ display:none!important; } .wbp-editor .wbp-compact-advanced img, .wbp-editor .wbp-compact-fullscreen img, .wbp-editor .wbp-nav-btn img{ width:30px!important; height:30px!important; } .wbp-editor .wbp-editor-shell:not(.is-popup){ height:clamp(380px,54dvh,540px)!important; min-height:380px!important; max-height:540px!important; padding:12px!important; border-radius:24px!important; background: radial-gradient(circle at 96% 12%,rgba(255,205,83,.30),transparent 17%), radial-gradient(circle at 0 90%,rgba(236,38,120,.09),transparent 24%), var(--wbp-v3-bg)!important; } .wbp-editor .wbp-editor-shell:not(.is-popup) .wbp-preview-layout{ grid-template-columns:minmax(0,auto) clamp(58px,10vw,76px)!important; gap:10px!important; } .wbp-editor .wbp-editor-shell:not(.is-popup) .wbp-preview-tools.wbp-simple-tools{ width:clamp(58px,10vw,76px)!important; gap:8px!important; } .wbp-editor .wbp-editor-shell:not(.is-popup) .wbp-video-container{ border-width:4px!important; border-radius:24px!important; } .wbp-editor .wbp-editor-shell:not(.is-popup) .wbp-compact-controls{ width:min(560px,100%)!important; } .wbp-editor .wbp-editor-shell:not(.is-popup) .wbp-actions .wbp-btn{ min-height:44px!important; border-radius:16px!important; } .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced){ grid-template-rows:56px minmax(0,1fr) auto!important; padding:12px!important; gap:12px!important; } .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-preview-layout{ grid-template-columns:74px minmax(0,auto)!important; gap:10px!important; justify-content:center!important; } .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-preview-tools.wbp-simple-tools{ grid-column:1!important; grid-row:1!important; width:74px!important; gap:8px!important; } .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-video-container{ grid-column:2!important; grid-row:1!important; justify-self:center!important; border-width:5px!important; border-radius:24px!important; } .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-compact-controls{ padding:10px!important; border-radius:22px!important; } .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-actions .wbp-btn{ min-height:52px!important; border-radius:17px!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-toolbar{ gap:8px!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-tool{ background:#fff!important; border:1px solid var(--wbp-v3-line)!important; box-shadow:0 9px 20px rgba(74,30,112,.08)!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-tool > span{ background:transparent!important; border:0!important; box-shadow:none!important; overflow:visible!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-tool > span img{ width:100%!important; height:100%!important; filter:drop-shadow(0 6px 9px rgba(74,30,112,.12))!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-tool.is-active{ border-color:#d079ff!important; box-shadow:0 0 0 2px rgba(208,121,255,.22),0 10px 24px rgba(74,30,112,.10)!important; } @media(max-width:560px){ .wbp-editor .wbp-editor-shell.is-popup.is-advanced{ grid-template-rows:52px minmax(0,38dvh) 74px minmax(0,1fr)!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-toolbar{ height:74px!important; gap:6px!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-tool{ min-width:62px!important; padding:6px 4px!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-tool > span{ width:28px!important; height:28px!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-tool b{ font-size:10px!important; } } @media(max-width:380px){ .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-preview-layout{ grid-template-columns:62px minmax(0,auto)!important; gap:8px!important; } .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-preview-tools.wbp-simple-tools{ width:62px!important; } .wbp-editor .wbp-preview-tools.wbp-simple-tools .wbp-tool-card__media, .wbp-editor .wbp-preview-tools.wbp-simple-tools .wbp-tool-card__icon{ width:30px!important; height:30px!important; } } /* v3.0.1 short landscape: keep the control desk usable instead of cramming every field. */ @media(max-height:520px) and (orientation:landscape){ .wbp-editor .wbp-editor-shell.is-popup.is-advanced{ grid-template-rows:46px minmax(0,1fr) 142px!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-grid label:has(#advancedMusicSelect), .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-grid label:has(#advancedFont), .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-grid label:has(#advancedTextColor), .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-grid label:has(#advancedFontSize){ display:none!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-grid{ grid-template-columns:2fr 1fr 1fr!important; padding:8px 10px 46px!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-message-field{ grid-column:1!important; grid-row:1 / 3!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-grid label:has(#advancedBackgroundSelect){ grid-column:2!important; grid-row:1!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-grid label:has(#advancedPhraseSelect){ grid-column:3!important; grid-row:1!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-actions{ justify-self:end!important; align-self:end!important; margin:0 10px 8px 0!important; background:#fff!important; border-radius:12px!important; } } .wbp-music-gallery{ display:block!important; margin-top:14px; padding:12px; border-radius:18px; background:rgba(255,243,248,.86); border:1px solid rgba(233,30,99,.12); } .wbp-music-gallery-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:10px; margin-bottom:9px; } .wbp-music-gallery-head label{ font-weight:900; font-size:.86rem; color:var(--text); } .wbp-music-gallery-head span{ color:var(--muted); font-size:.75rem; font-weight:800; } .wbp-music-options{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; } .wbp-music-options .wbp-music-card{ border:2px solid transparent; background:#fff; border-radius:16px; padding:6px; cursor:pointer; box-shadow:0 8px 20px rgba(34,27,47,.07); display:block; text-align:center; min-height:auto; } .wbp-music-options .wbp-music-card.is-active{ border-color:var(--pink); } .wbp-music-options .wbp-music-card.is-playing{ border-color:var(--purple); box-shadow:0 8px 22px rgba(106,27,154,.14); } .wbp-music-options .wbp-music-icon{ width:100%; aspect-ratio:1/1; max-height:42px; border-radius:12px; display:grid; place-items:center; color:#fff; font-weight:950; font-size:1rem; margin:0; } .wbp-music-options .wbp-music-card b{ display:block; margin-top:5px; color:var(--text); font-size:.66rem; line-height:1; font-weight:900; } .wbp-music-options .wbp-music-card small{ display:none; } @media(max-width:1024px){ .wbp-editor-shell.is-popup .wbp-preview-layout{ grid-template-columns:58px minmax(0,1fr)!important; } .wbp-editor-shell.is-popup .wbp-music-gallery{ margin-top:8px; padding:9px; border-radius:14px; } .wbp-editor-shell.is-popup .wbp-music-gallery-head{ margin-bottom:6px; } .wbp-editor-shell.is-popup .wbp-music-gallery-head span{ display:none; } .wbp-editor-shell.is-popup .wbp-music-options{ grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px; } .wbp-editor-shell.is-popup .wbp-music-options .wbp-music-card{ border-radius:12px; padding:4px; } .wbp-editor-shell.is-popup .wbp-music-options .wbp-music-icon{ max-height:30px; border-radius:9px; font-size:.8rem; } .wbp-editor-shell.is-popup .wbp-music-options .wbp-music-card b{ font-size:.54rem; } } @media(max-width:1024px) and (orientation:landscape){ .wbp-editor-shell.is-popup .wbp-preview-layout{ grid-template-columns:64px minmax(0,1fr)!important; } } /* v1.8 responsive/progress/resize fixes */ .wbp-progress{ display:none; margin-top:12px; padding:12px; border-radius:16px; background:rgba(106,27,154,.07); border:1px solid rgba(106,27,154,.10); } .wbp-progress.is-visible{display:block} .wbp-progress-top{ display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:.82rem; font-weight:900; color:var(--purple); margin-bottom:8px; } .wbp-progress-track{ height:10px; border-radius:999px; background:rgba(106,27,154,.12); overflow:hidden; } .wbp-progress-track span{ display:block; width:0%; height:100%; border-radius:999px; background:linear-gradient(135deg,var(--pink),var(--purple)); transition:width .35s ease; } /* Non-uniform scaling support */ .wbp-draggable{ transform:translate(-50%,-50%) rotate(var(--rot,0deg)) scale(var(--scale-x, var(--scale, 1)), var(--scale-y, var(--scale, 1))) !important; } .wbp-resize-x-handle{ right:-30px; top:50%; transform:translateY(-50%); cursor:ew-resize; border-color:#2196F3; } .wbp-resize-x-handle::before{ content:""; position:absolute; left:5px; right:5px; top:50%; height:2px; background:#2196F3; transform:translateY(-50%); } .wbp-resize-x-handle::after{ content:""; position:absolute; right:4px; top:6px; width:7px; height:7px; border-right:2px solid #2196F3; border-top:2px solid #2196F3; transform:rotate(45deg); } .wbp-resize-y-handle{ left:50%; bottom:-31px; transform:translateX(-50%); cursor:ns-resize; border-color:#FF9800; } .wbp-resize-y-handle::before{ content:""; position:absolute; top:5px; bottom:5px; left:50%; width:2px; background:#FF9800; transform:translateX(-50%); } .wbp-resize-y-handle::after{ content:""; position:absolute; left:6px; bottom:4px; width:7px; height:7px; border-right:2px solid #FF9800; border-bottom:2px solid #FF9800; transform:rotate(45deg); } /* Name stability: make scaling predictable, avoid width jumping */ .wbp-nombre{ width:max-content; max-width:92%; transform-origin:center center; } .wbp-nombre .wbp-element-content{ white-space:nowrap; line-height:1; } /* Better mobile popup fit */ @media(max-width:1024px){ .wbp-editor-shell.is-popup{ width:100vw; max-width:100vw; height:100dvh; max-height:100dvh; padding:0; overflow:hidden; } .wbp-editor-shell.is-popup .wbp-popup-title{ padding:8px 48px 7px 12px; } .wbp-editor-shell.is-popup .wbp-stage-panel{ padding:6px 8px 8px 4px; overflow:hidden; } .wbp-editor-shell.is-popup .wbp-form-panel{ overflow:hidden; padding:10px 12px calc(70px + env(safe-area-inset-bottom,0px)); display:flex; flex-direction:column; } .wbp-editor-shell.is-popup .wbp-form-grid{ flex:1 1 auto; min-height:0; } .wbp-editor-shell.is-popup .wbp-music-gallery{ flex:0 0 auto; margin-top:8px; } .wbp-editor-shell.is-popup .wbp-actions{ flex:0 0 auto; margin-top:8px; margin-bottom:8px; } .wbp-editor-shell.is-popup .wbp-status{ max-height:74px; overflow:auto; margin-bottom:12px; } .wbp-editor-shell.is-popup .wbp-progress{ flex:0 0 auto; margin-top:8px; padding:8px; } .wbp-editor-shell.is-popup .wbp-progress-top{ font-size:.72rem; margin-bottom:5px; } .wbp-editor-shell.is-popup .wbp-progress-track{ height:8px; } } @media(max-width:540px){ .wbp-editor-shell.is-popup{ grid-template-rows:auto 44dvh 56dvh; } .wbp-editor-shell.is-popup .wbp-stage-panel{ height:44dvh; } .wbp-editor-shell.is-popup .wbp-form-panel{ height:56dvh; } .wbp-editor-shell.is-popup .wbp-preview-layout{ grid-template-columns:56px minmax(0,1fr); gap:6px; } .wbp-editor-shell.is-popup .wbp-template-card{ padding:3px; } .wbp-editor-shell.is-popup .wbp-template-card span{ font-size:.52rem; } .wbp-editor-shell.is-popup .wbp-form-panel h3{ font-size:.98rem; margin-bottom:6px; } .wbp-editor-shell.is-popup .wbp-field input, .wbp-editor-shell.is-popup .wbp-field textarea{ min-height:36px; padding:6px 9px; font-size:.86rem; } .wbp-editor-shell.is-popup .wbp-field textarea{ min-height:42px; } } @media(max-width:1024px) and (orientation:landscape){ .wbp-editor-shell.is-popup{ grid-template-rows:auto 1fr; grid-template-columns:50vw 50vw; } .wbp-editor-shell.is-popup .wbp-stage-panel, .wbp-editor-shell.is-popup .wbp-form-panel{ height:calc(100dvh - 48px); } .wbp-editor-shell.is-popup .wbp-form-panel{ padding-bottom:calc(46px + env(safe-area-inset-bottom,0px)); } } /* v1.9: single box resize handle + no text deformation */ .wbp-resize-x-handle, .wbp-resize-y-handle{ display:none!important; } .wbp-draggable{ transform:translate(-50%,-50%) rotate(var(--rot,0deg)) scale(var(--scale,1)) !important; } .wbp-draggable{ width:var(--box-w, auto); min-width:44px; } .wbp-nombre{ width:var(--box-w, 72%); max-width:92%; text-align:center; } .wbp-edad{ width:var(--box-w, auto); min-width:64px; text-align:center; } .wbp-mensaje{ width:var(--box-w, 68%); max-width:88%; min-width:150px; white-space:normal; } .wbp-nombre .wbp-element-content, .wbp-edad .wbp-element-content, .wbp-mensaje .wbp-element-content{ display:block; width:100%; max-width:100%; white-space:normal!important; overflow-wrap:normal!important; word-break:normal!important; hyphens:none!important; line-height:1.06; } .wbp-mensaje .wbp-element-content{ line-height:1.22; } .wbp-resize-handle{ right:-28px; bottom:-28px; cursor:nwse-resize; } /* Empty safe zone at the bottom of the fullscreen popup */ @media(max-width:1024px){ .wbp-editor-shell.is-popup{ padding-bottom:0!important; } .wbp-editor-shell.is-popup .wbp-form-panel{ position:relative; padding-bottom:calc(92px + env(safe-area-inset-bottom,0px))!important; } .wbp-editor-shell.is-popup .wbp-form-panel::after{ content:""; display:block; flex:0 0 calc(72px + env(safe-area-inset-bottom,0px)); width:100%; pointer-events:none; } .wbp-editor-shell.is-popup .wbp-status{ margin-bottom:10px!important; } } @media(max-width:540px){ .wbp-editor-shell.is-popup .wbp-form-panel{ padding-bottom:calc(104px + env(safe-area-inset-bottom,0px))!important; } .wbp-editor-shell.is-popup .wbp-form-panel::after{ flex-basis:calc(82px + env(safe-area-inset-bottom,0px)); } } /* v2.1 layout authority: compact, fullscreen simple and fullscreen advanced */ .wbp-mode-switch{ cursor:pointer; font-family:inherit; } .wbp-mode-switch[aria-pressed="true"]{ color:#fff!important; border-color:rgba(255,255,255,.6)!important; background:linear-gradient(110deg,#f33651 0%,#df2f86 52%,#7b2bd6 100%)!important; } .wbp-mode-switch[aria-pressed="true"] b{color:#fff!important} .wbp-tool-card, .wbp-advanced-tool, .wbp-compact-fullscreen, .wbp-compact-advanced, .wbp-nav-btn{ transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease; } .wbp-tool-card:hover, .wbp-advanced-tool:hover, .wbp-compact-fullscreen:hover, .wbp-compact-advanced:hover, .wbp-nav-btn:hover{ transform:translateY(-2px); box-shadow:0 18px 38px rgba(50,20,95,.14)!important; } .wbp-tool-card:nth-child(1){background:linear-gradient(180deg,#fff,#fff7ec)!important} .wbp-tool-card:nth-child(2){background:linear-gradient(180deg,#fff,#fff2f8)!important} .wbp-tool-card:nth-child(3){background:linear-gradient(180deg,#fff,#f4fbff)!important} .wbp-tool-card:nth-child(4){background:linear-gradient(180deg,#fff,#f7f3ff)!important} .wbp-editor-shell:not(.is-popup){ grid-template-columns:minmax(0,1fr)!important; grid-template-rows:minmax(0,1fr) auto!important; max-height:50vh!important; min-height:360px!important; gap:10px!important; padding:10px!important; } .wbp-editor-shell:not(.is-popup) .wbp-preview-layout{ grid-template-columns:minmax(0,1fr) 82px!important; align-items:center!important; gap:10px!important; } .wbp-editor-shell:not(.is-popup) .wbp-video-container{ grid-column:1!important; height:calc(50vh - 86px)!important; max-height:430px!important; min-height:260px!important; justify-self:center!important; } .wbp-editor-shell:not(.is-popup) .wbp-simple-tools{ grid-column:2!important; display:grid!important; grid-template-columns:1fr!important; gap:8px!important; margin:0!important; align-content:center!important; } .wbp-editor-shell:not(.is-popup) .wbp-tool-card{ width:72px!important; min-height:64px!important; padding:7px!important; border-radius:18px!important; } .wbp-editor-shell:not(.is-popup) .wbp-tool-card__media, .wbp-editor-shell:not(.is-popup) .wbp-tool-card__icon{ width:46px!important; height:46px!important; border-radius:15px!important; } .wbp-editor-shell:not(.is-popup) .wbp-compact-secondary{ justify-content:flex-end!important; margin:0 0 7px!important; } .wbp-editor-shell:not(.is-popup) .wbp-compact-fullscreen{ width:48px!important; min-height:48px!important; border-radius:16px!important; } .wbp-editor-shell:not(.is-popup) .wbp-actions{ grid-template-columns:1fr 1.12fr!important; margin-top:0!important; } .wbp-editor-shell:not(.is-popup) .wbp-wishi-decor{ width:58px!important; right:104px!important; top:12px!important; } .wbp-editor-shell.is-popup{ grid-template-rows:auto minmax(0,1fr) auto!important; } .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-preview-layout{ grid-template-columns:minmax(0,1fr) 176px!important; height:100%!important; align-items:center!important; } .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-video-container{ grid-column:1!important; height:min(calc(100dvh - 245px), calc((100vw - 270px) * 1.777))!important; } .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-simple-tools{ grid-column:2!important; display:grid!important; grid-template-columns:1fr!important; gap:14px!important; align-content:center!important; } .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-tool-card{ min-height:112px!important; padding:16px 10px!important; } .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-compact-secondary{ grid-template-columns:1fr!important; margin:10px 0 0!important; } .wbp-editor-shell.is-popup.is-advanced .wbp-preview-layout{ display:block!important; } @media(max-width:720px){ .wbp-editor-shell:not(.is-popup){ min-height:340px!important; } .wbp-editor-shell:not(.is-popup) .wbp-preview-layout{ grid-template-columns:minmax(0,1fr) 66px!important; } .wbp-editor-shell:not(.is-popup) .wbp-video-container{ height:calc(50vh - 78px)!important; min-height:242px!important; border-radius:20px!important; border-width:4px!important; } .wbp-editor-shell:not(.is-popup) .wbp-tool-card{ width:60px!important; min-height:54px!important; padding:6px!important; border-radius:15px!important; } .wbp-editor-shell:not(.is-popup) .wbp-tool-card__media, .wbp-editor-shell:not(.is-popup) .wbp-tool-card__icon{ width:38px!important; height:38px!important; border-radius:12px!important; } .wbp-editor-shell:not(.is-popup) .wbp-btn{ min-height:40px!important; font-size:12px!important; border-radius:14px!important; } .wbp-editor-shell:not(.is-popup) .wbp-btn__crown{display:none!important} .wbp-editor-shell.is-popup{ padding:10px!important; gap:10px!important; } .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-preview-layout{ grid-template-columns:82px minmax(0,1fr)!important; gap:10px!important; } .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-simple-tools{ grid-column:1!important; grid-row:1!important; gap:8px!important; } .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-video-container{ grid-column:2!important; grid-row:1!important; width:100%!important; height:auto!important; max-height:calc(100dvh - 225px)!important; max-width:100%!important; } .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-tool-card{ min-height:72px!important; padding:8px 6px!important; border-radius:17px!important; } .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-tool-card__media, .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-tool-card__icon{ width:42px!important; height:42px!important; border-radius:13px!important; } .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-tool-card b, .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-tool-card > span:not(.wbp-tool-card__media):not(.wbp-tool-card__icon){ display:none!important; } .wbp-editor-shell.is-popup .wbp-compact-controls{ padding:12px!important; border-radius:22px!important; } .wbp-editor-shell.is-popup .wbp-actions{ gap:8px!important; } .wbp-editor-shell.is-popup .wbp-btn{ min-height:52px!important; font-size:15px!important; border-radius:17px!important; } .wbp-editor-shell.is-popup .wbp-wishi-decor{ width:54px!important; right:66px!important; top:64px!important; } .wbp-editor-shell.is-popup.is-advanced{ grid-template-columns:84px minmax(0,1fr)!important; grid-template-rows:auto minmax(0,1fr) minmax(245px,40dvh)!important; gap:10px!important; } .wbp-editor-shell.is-popup.is-advanced .wbp-video-container{ width:min(100%, calc((100dvh - 382px) * .5625))!important; height:auto!important; max-height:calc(100dvh - 382px)!important; border-radius:20px!important; } .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-toolbar{ grid-column:1!important; grid-row:2!important; gap:8px!important; } .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-tool{ min-height:66px!important; padding:7px!important; border-radius:17px!important; } .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-tool > span{ width:38px!important; height:38px!important; margin:0 auto 4px!important; } .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-grid{ grid-template-columns:1fr!important; } } /* v1.10 default layout + birthday text styling */ .wbp-debug-hidden{ display:none!important; } .wbp-simple-tools{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:8px 0 12px; } .wbp-secondary-actions{ display:flex; justify-content:center; margin-top:8px; } .wbp-editor-shell:not(.is-advanced) .wbp-template-strip, .wbp-editor-shell:not(.is-advanced) .wbp-music-gallery{ display:none!important; } .wbp-editor-shell:not(.is-advanced) .wbp-preview-layout{ grid-template-columns:minmax(0,1fr)!important; } .wbp-editor-shell.is-advanced .wbp-template-strip{ display:flex!important; } /* Default positions are set in markup/JS. These styles match the requested visual look. */ .wbp-nombre, .wbp-edad{ font-family:"Luckiest Guy", cursive; color:#fff!important; -webkit-text-stroke:0; text-shadow: 2px 2px 0 #000, -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 0 6px 14px rgba(0,0,0,.28); letter-spacing:.01em; } .wbp-nombre{ font-size:clamp(30px,5.4vw,62px); line-height:.98; } .wbp-edad{ font-size:clamp(42px,7.2vw,86px); line-height:.96; } .wbp-nombre .wbp-element-content, .wbp-edad .wbp-element-content{ font-family:"Luckiest Guy", cursive; color:#fff!important; } /* Dedication: softer translucent blended container, no hard border */ .wbp-mensaje{ font-family:"Baloo 2", Raleway, Arial, sans-serif; background:transparent!important; box-shadow:none!important; padding:16px 22px; border:0!important; color:#17111f; font-size:clamp(18px,2.4vw,28px); line-height:1.16; font-weight:800; position:absolute; } .wbp-mensaje::after{ content:""; position:absolute; inset:-10px -14px; z-index:-1; border-radius:28px; background: radial-gradient(ellipse at center, rgba(255,255,255,.32) 0%, rgba(255,255,255,.28) 48%, rgba(255,255,255,.16) 68%, rgba(255,255,255,0) 100%); filter:blur(.2px); pointer-events:none; } .wbp-mensaje .wbp-element-content{ font-family:"Baloo 2", Raleway, Arial, sans-serif; color:#17111f; font-weight:800; line-height:1.16; } /* Keep controls above blended background */ .wbp-draggable.selected::before{ z-index:5; } .wbp-handle{ z-index:9; } /* Make the single corner handle feel like box-width control */ .wbp-resize-handle::before{ content:""; position:absolute; left:5px; right:5px; top:50%; height:2px; background:var(--pink); transform:translateY(-50%); } .wbp-resize-handle::after{ content:""; position:absolute; right:5px; top:6px; width:8px; height:8px; border-top:2px solid var(--pink); border-right:2px solid var(--pink); transform:rotate(45deg); } @media(max-width:540px){ .wbp-nombre{ font-size:clamp(24px,8vw,44px); } .wbp-edad{ font-size:clamp(34px,10vw,58px); } .wbp-mensaje{ font-size:clamp(15px,4.6vw,21px); padding:12px 16px; } } /* v1.11 dedication style + mobile popup spacing/responsive fix */ .wbp-mensaje::after{ inset:-16px -22px!important; border-radius:34px!important; background: radial-gradient(ellipse at center, rgba(255,255,255,.50) 0%, rgba(255,255,255,.42) 38%, rgba(255,255,255,.22) 62%, rgba(255,255,255,.08) 78%, rgba(255,255,255,0) 100%)!important; } .wbp-mensaje .wbp-element-content{ color:#17111f!important; text-shadow: 1px 1px 0 rgba(255,255,255,.88), -1px -1px 0 rgba(255,255,255,.88), 1px -1px 0 rgba(255,255,255,.88), -1px 1px 0 rgba(255,255,255,.88), 0 2px 6px rgba(0,0,0,.12)!important; } /* Reduce empty bottom margin to about one third of previous version */ @media(max-width:1024px){ .wbp-editor-shell.is-popup .wbp-form-panel{ padding-bottom:calc(34px + env(safe-area-inset-bottom,0px))!important; overflow:auto!important; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; } .wbp-editor-shell.is-popup .wbp-form-panel::after{ flex:0 0 calc(24px + env(safe-area-inset-bottom,0px))!important; } } /* More robust mobile layout to avoid overlapping */ @media(max-width:540px){ .wbp-editor-shell.is-popup{ grid-template-rows:auto 42dvh 58dvh!important; } .wbp-editor-shell.is-popup .wbp-stage-panel{ height:42dvh!important; min-height:0!important; } .wbp-editor-shell.is-popup .wbp-form-panel{ height:58dvh!important; min-height:0!important; padding:8px 10px calc(38px + env(safe-area-inset-bottom,0px))!important; overflow:auto!important; } .wbp-editor-shell.is-popup .wbp-popup-title{ padding:7px 46px 6px 10px!important; } .wbp-editor-shell.is-popup .wbp-popup-title h2{ font-size:.92rem!important; line-height:1.05!important; } .wbp-editor-shell.is-popup .wbp-popup-title p{ font-size:.68rem!important; line-height:1.1!important; margin-top:2px!important; } .wbp-editor-shell.is-popup .wbp-form-panel h3{ font-size:.9rem!important; margin:0 0 5px!important; flex:0 0 auto!important; } .wbp-editor-shell.is-popup .wbp-form-grid{ gap:5px!important; min-height:0!important; flex:0 0 auto!important; grid-template-rows:auto auto minmax(58px, auto)!important; } .wbp-editor-shell.is-popup .wbp-field{ gap:2px!important; min-height:0!important; } .wbp-editor-shell.is-popup .wbp-field-row{ min-height:22px!important; } .wbp-editor-shell.is-popup .wbp-field label{ font-size:.7rem!important; } .wbp-editor-shell.is-popup .wbp-field input, .wbp-editor-shell.is-popup .wbp-field textarea{ min-height:31px!important; padding:5px 8px!important; border-radius:10px!important; font-size:.8rem!important; } .wbp-editor-shell.is-popup .wbp-field textarea{ min-height:38px!important; height:100%!important; } .wbp-editor-shell.is-popup .wbp-music-gallery{ margin-top:6px!important; padding:7px!important; flex:0 0 auto!important; } .wbp-editor-shell.is-popup .wbp-music-gallery-head{ margin-bottom:5px!important; } .wbp-editor-shell.is-popup .wbp-music-gallery-head label{ font-size:.72rem!important; } .wbp-editor-shell.is-popup .wbp-music-gallery-head span{ display:none!important; } .wbp-editor-shell.is-popup .wbp-music-options{ max-height:68px!important; overflow:auto!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:5px!important; } .wbp-editor-shell.is-popup .wbp-music-card{ min-height:32px!important; padding:5px!important; border-radius:10px!important; } .wbp-editor-shell.is-popup .wbp-music-icon{ width:22px!important; height:22px!important; border-radius:8px!important; font-size:.78rem!important; } .wbp-editor-shell.is-popup .wbp-music-card b{ font-size:.68rem!important; } .wbp-editor-shell.is-popup .wbp-actions{ margin-top:6px!important; gap:6px!important; flex:0 0 auto!important; } .wbp-editor-shell.is-popup .wbp-btn{ min-height:34px!important; font-size:.76rem!important; border-radius:10px!important; padding:0 7px!important; } .wbp-editor-shell.is-popup .wbp-progress{ margin-top:6px!important; padding:7px!important; flex:0 0 auto!important; } .wbp-editor-shell.is-popup .wbp-status{ max-height:58px!important; font-size:.72rem!important; padding:7px 8px!important; margin-top:6px!important; margin-bottom:2px!important; flex:0 0 auto!important; } .wbp-editor-shell.is-popup .wbp-form-panel::after{ flex-basis:calc(26px + env(safe-area-inset-bottom,0px))!important; } } @media(max-width:1024px) and (orientation:landscape){ .wbp-editor-shell.is-popup .wbp-form-panel{ padding-bottom:calc(26px + env(safe-area-inset-bottom,0px))!important; } .wbp-editor-shell.is-popup .wbp-form-panel::after{ flex-basis:calc(16px + env(safe-area-inset-bottom,0px))!important; } } /* v1.12 definitive preview controls + viewport fitting */ /* Keep selected element controls clean and consistent */ .wbp-draggable.selected::before, .wbp-draggable.is-editing.selected::before{ content:""; position:absolute; inset:-9px; border:1.5px solid rgba(233,30,99,.72); border-radius:14px; pointer-events:none; background:transparent; z-index:4; } .wbp-handle{ width:28px!important; height:28px!important; border-radius:50%!important; background:#fff!important; border:2px solid #fff!important; box-shadow:0 6px 18px rgba(0,0,0,.28), 0 0 0 2px rgba(233,30,99,.86)!important; display:none; z-index:30!important; opacity:1!important; place-items:center; } .wbp-draggable.selected .wbp-handle, .wbp-draggable.is-editing.selected .wbp-handle{ display:grid!important; } /* Scale/box-size handle: bottom-right, clean diagonal arrows */ .wbp-resize-handle{ right:-34px!important; bottom:-34px!important; top:auto!important; left:auto!important; transform:none!important; cursor:nwse-resize!important; border-color:#fff!important; } .wbp-resize-handle::before, .wbp-resize-handle::after{ content:""!important; position:absolute!important; background:none!important; border:0!important; display:block!important; pointer-events:none!important; } .wbp-resize-handle::before{ width:13px!important; height:13px!important; right:6px!important; bottom:6px!important; border-right:3px solid var(--pink)!important; border-bottom:3px solid var(--pink)!important; border-radius:1px!important; } .wbp-resize-handle::after{ width:8px!important; height:8px!important; left:6px!important; top:6px!important; border-left:3px solid var(--pink)!important; border-top:3px solid var(--pink)!important; border-radius:1px!important; } /* Rotate handle: top-center, clear circular arrow */ .wbp-rotate-handle{ left:50%!important; top:-48px!important; right:auto!important; bottom:auto!important; transform:translateX(-50%)!important; cursor:grab!important; box-shadow:0 6px 18px rgba(0,0,0,.28), 0 0 0 2px rgba(106,27,154,.9)!important; } .wbp-rotate-handle::before, .wbp-rotate-handle::after{ content:""!important; position:absolute!important; pointer-events:none!important; display:block!important; } .wbp-rotate-handle::before{ width:14px!important; height:14px!important; left:5px!important; top:5px!important; border:3px solid var(--purple)!important; border-left-color:transparent!important; border-radius:50%!important; transform:rotate(-35deg)!important; background:transparent!important; } .wbp-rotate-handle::after{ width:0!important; height:0!important; left:17px!important; top:4px!important; border-left:5px solid var(--purple)!important; border-top:4px solid transparent!important; border-bottom:4px solid transparent!important; background:transparent!important; transform:rotate(18deg)!important; } /* Remove any previous extra scale handles completely */ .wbp-resize-x-handle, .wbp-resize-y-handle{ display:none!important; } /* Desktop: fit generator into viewport better, avoid page scroll cutting it */ @media(min-width:1025px){ .wbp-editor{ width:min(1180px, calc(100vw - 32px)); margin-left:auto; margin-right:auto; margin-bottom:32px!important; } .wbp-editor-shell{ max-height:calc(100vh - 36px); min-height:0; overflow:hidden; grid-template-columns:minmax(0,1.02fr) minmax(360px,.98fr); gap:16px; padding:16px; border-radius:26px; } .wbp-popup-title{ margin-bottom:6px!important; } .wbp-popup-title span{ padding:6px 11px!important; font-size:.78rem!important; margin-bottom:6px!important; } .wbp-popup-title h2{ font-size:clamp(1.35rem,2.4vw,2.35rem)!important; } .wbp-popup-title p{ font-size:.88rem!important; margin-top:5px!important; } .wbp-stage-panel, .wbp-form-panel{ min-height:0; padding:12px; border-radius:20px; } .wbp-stage-panel{ display:flex; flex-direction:column; overflow:hidden; } .wbp-stage-label{ flex:0 0 auto; margin-bottom:8px!important; } .wbp-preview-layout{ flex:1 1 auto; min-height:0; grid-template-columns:62px minmax(0,1fr)!important; gap:10px!important; align-items:center; } .wbp-template-strip{ height:100%; max-height:calc(100vh - 190px)!important; min-height:0; } .wbp-video-container{ max-height:calc(100vh - 190px); width:auto; max-width:100%; margin:auto; } .wbp-form-panel{ display:flex; flex-direction:column; overflow:hidden; } .wbp-form-panel h3{ flex:0 0 auto; margin:0 0 8px!important; font-size:1.15rem!important; } .wbp-form-grid{ flex:1 1 auto; min-height:0; gap:8px!important; grid-template-rows:auto auto minmax(56px,1fr); } .wbp-field{ min-height:0; } .wbp-field input, .wbp-field textarea{ min-height:38px!important; padding:7px 10px!important; } .wbp-field textarea{ min-height:58px!important; height:100%; } .wbp-music-gallery{ flex:0 0 auto; margin-top:8px!important; padding:9px!important; } .wbp-music-options{ max-height:112px!important; overflow:auto!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; } .wbp-actions{ flex:0 0 auto; margin-top:10px!important; } .wbp-btn{ min-height:40px!important; } .wbp-progress, .wbp-status{ flex:0 0 auto; } .wbp-status{ max-height:78px; overflow:auto; } } /* v0.9.365 - Mobile Advanced shares the approved Simple action-card geometry. */ @media(max-width:767px){ #generatorShell.is-popup.is-advanced .wbp-stage-panel .wbp-compact-controls, .wbp-editor #generatorShell.is-popup.is-advanced .wbp-stage-panel .wbp-compact-controls{ position:fixed!important; left:8px!important; right:8px!important; bottom:8px!important; top:auto!important; display:block!important; width:auto!important; max-width:none!important; height:132px!important; min-height:132px!important; margin:0!important; padding:10px 8px 8px!important; border:1px solid rgba(123,43,214,.16)!important; border-radius:22px!important; background:rgba(255,255,255,.98)!important; box-shadow:0 -8px 26px rgba(50,20,95,.10)!important; transform:none!important; } #generatorShell.is-popup.is-advanced .wbp-stage-panel .wbp-compact-controls .wbp-actions{ position:static!important; display:grid!important; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)!important; gap:10px!important; width:100%!important; height:52px!important; margin:0!important; } #generatorShell.is-popup.is-advanced .wbp-stage-panel .wbp-compact-controls .wbp-btn{ height:52px!important; min-height:52px!important; } #generatorShell.is-popup.is-advanced .wbp-stage-panel .wbp-editor-brand{ position:absolute!important; left:50%!important; right:auto!important; bottom:9px!important; display:flex!important; align-items:center!important; justify-content:center!important; width:150px!important; height:42px!important; min-height:42px!important; margin:0!important; transform:translateX(-50%)!important; opacity:1!important; visibility:visible!important; pointer-events:none!important; } #generatorShell.is-popup.is-advanced .wbp-stage-panel .wbp-editor-brand img{ display:block!important; width:auto!important; max-width:145px!important; max-height:38px!important; } #generatorShell.is-popup.is-advanced .wbp-form-panel{ padding-bottom:148px!important; } /* Scroll the complete Advanced control stack, including its final action. */ #generatorShell.is-popup.is-advanced .wbp-controls-scroll, #generatorShell.is-popup.is-advanced #advancedOptionsPanel{ min-height:0!important; height:100%!important; overflow:hidden!important; } #generatorShell.is-popup.is-advanced .wbp-advanced-panel{ min-height:0!important; height:100%!important; padding-bottom:156px!important; overflow-x:hidden!important; overflow-y:auto!important; overscroll-behavior:contain!important; -webkit-overflow-scrolling:touch!important; scroll-padding-bottom:156px!important; } #generatorShell.is-popup.is-advanced .wbp-advanced-grid{ flex:0 0 auto!important; height:auto!important; min-height:0!important; max-height:none!important; overflow:visible!important; } #generatorShell.is-popup.is-advanced .wbp-advanced-actions{ position:static!important; display:block!important; width:100%!important; margin:8px 0 0!important; padding:8px 12px 12px!important; } #generatorShell.is-popup.is-advanced .wbp-advanced-actions .wbp-mini-btn{ display:inline-flex!important; width:100%!important; min-height:44px!important; align-items:center!important; justify-content:center!important; } } /* Tablet/mobile fullscreen: tighter but with empty safe space */ @media(max-width:1024px){ .wbp-editor{ width:100%; max-width:100vw; margin-bottom:24px!important; } .wbp-editor-shell{ max-width:100%; overflow:hidden; } .wbp-editor-shell.is-popup{ width:100vw!important; height:100dvh!important; max-width:100vw!important; max-height:100dvh!important; grid-template-rows:auto minmax(0,43dvh) minmax(0,57dvh)!important; overflow:hidden!important; } .wbp-editor-shell.is-popup .wbp-stage-panel, .wbp-editor-shell.is-popup .wbp-form-panel{ min-height:0!important; overflow:hidden!important; } .wbp-editor-shell.is-popup .wbp-stage-panel{ height:auto!important; } .wbp-editor-shell.is-popup .wbp-form-panel{ height:auto!important; padding-bottom:calc(42px + env(safe-area-inset-bottom,0px))!important; } .wbp-editor-shell.is-popup .wbp-form-panel::after{ content:""; display:block; flex:0 0 calc(22px + env(safe-area-inset-bottom,0px))!important; width:100%; pointer-events:none; } .wbp-editor-shell.is-popup .wbp-preview-layout{ height:100%; min-height:0; grid-template-columns:54px minmax(0,1fr)!important; gap:6px!important; align-items:center; } .wbp-editor-shell.is-popup .wbp-template-strip{ height:100%; max-height:none!important; min-height:0; } .wbp-editor-shell.is-popup .wbp-video-container{ max-height:100%; height:auto; width:auto; max-width:100%; margin:auto; } .wbp-editor-shell.is-popup .wbp-form-grid{ min-height:0!important; flex:1 1 auto!important; } } /* Phones: no overlap, compact controls */ @media(max-width:540px){ .wbp-editor-shell.is-popup{ grid-template-rows:auto minmax(0,41dvh) minmax(0,59dvh)!important; } .wbp-editor-shell.is-popup .wbp-popup-title{ padding:6px 44px 5px 9px!important; } .wbp-editor-shell.is-popup .wbp-stage-panel{ padding:5px 7px 6px 3px!important; } .wbp-editor-shell.is-popup .wbp-form-panel{ padding:7px 9px calc(38px + env(safe-area-inset-bottom,0px))!important; } .wbp-editor-shell.is-popup .wbp-form-panel::after{ flex-basis:calc(20px + env(safe-area-inset-bottom,0px))!important; } .wbp-editor-shell.is-popup .wbp-music-options{ max-height:62px!important; } .wbp-editor-shell.is-popup .wbp-status{ max-height:52px!important; } } @media(max-width:1024px) and (orientation:landscape){ .wbp-editor-shell.is-popup{ grid-template-columns:minmax(0,50vw) minmax(0,50vw)!important; grid-template-rows:auto minmax(0,1fr)!important; } .wbp-editor-shell.is-popup .wbp-stage-panel, .wbp-editor-shell.is-popup .wbp-form-panel{ height:auto!important; min-height:0!important; } .wbp-editor-shell.is-popup .wbp-form-panel{ padding-bottom:calc(24px + env(safe-area-inset-bottom,0px))!important; } .wbp-editor-shell.is-popup .wbp-form-panel::after{ flex-basis:calc(12px + env(safe-area-inset-bottom,0px))!important; } } /* v1.13 music carousel + advanced customization */ .wbp-music-gallery{ overflow:hidden; } .wbp-music-options{ display:flex!important; grid-template-columns:none!important; flex-wrap:nowrap!important; gap:8px!important; overflow-x:auto!important; overflow-y:hidden!important; max-height:none!important; padding:2px 2px 8px!important; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; } .wbp-music-options::-webkit-scrollbar{ height:7px; } .wbp-music-options::-webkit-scrollbar-thumb{ background:rgba(233,30,99,.35); border-radius:999px; } .wbp-music-card{ flex:0 0 112px!important; min-width:112px!important; min-height:54px!important; display:flex!important; align-items:center!important; gap:8px!important; text-align:left!important; scroll-snap-align:start; } .wbp-music-card .wbp-music-icon{ width:32px!important; height:32px!important; min-width:32px!important; border-radius:10px!important; aspect-ratio:auto!important; } .wbp-music-card b{ margin-top:0!important; font-size:.76rem!important; line-height:1.05!important; text-align:left!important; } .wbp-music-card small{ display:block!important; font-size:.62rem!important; color:var(--muted); line-height:1.05; } /* advanced controls */ .wbp-advanced-toggle{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:10px; padding:10px 12px; border-radius:16px; background:rgba(106,27,154,.06); border:1px solid rgba(106,27,154,.10); } .wbp-advanced-toggle strong{ display:block; font-size:.86rem; color:var(--text); } .wbp-advanced-toggle small{ display:block; font-size:.72rem; color:var(--muted); margin-top:1px; } .wbp-advanced-panel{ margin-top:8px; padding:11px; border-radius:16px; background:#fff; border:1px solid rgba(233,30,99,.14); box-shadow:0 8px 22px rgba(34,27,47,.06); } .wbp-advanced-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; } .wbp-advanced-grid label{ display:grid; gap:4px; font-size:.75rem; font-weight:900; color:var(--text); } .wbp-advanced-grid input, .wbp-advanced-grid select{ width:100%; min-height:34px; border-radius:10px; border:1px solid rgba(34,27,47,.14); padding:4px 8px; background:#fff; } .wbp-advanced-actions{ display:flex; gap:8px; margin-top:10px; } .wbp-mini-btn{ appearance:none; border:1px solid rgba(233,30,99,.28); background:#fff; color:var(--pink); border-radius:10px; padding:7px 9px; font-size:.76rem; font-weight:900; cursor:pointer; } /* CSS variables for live preview */ .wbp-draggable{ --custom-font:; --text-color:; --stroke-color:; --stroke-width:2px; --dedication-bg-opacity:.50; } .wbp-draggable .wbp-element-content{ font-family:var(--custom-font, inherit)!important; } .wbp-nombre, .wbp-edad{ color:var(--text-color,#fff)!important; text-shadow: var(--stroke-width,2px) var(--stroke-width,2px) 0 var(--stroke-color,#000), calc(var(--stroke-width,2px) * -1) calc(var(--stroke-width,2px) * -1) 0 var(--stroke-color,#000), var(--stroke-width,2px) calc(var(--stroke-width,2px) * -1) 0 var(--stroke-color,#000), calc(var(--stroke-width,2px) * -1) var(--stroke-width,2px) 0 var(--stroke-color,#000), 0 6px 14px rgba(0,0,0,.28)!important; } .wbp-nombre .wbp-element-content, .wbp-edad .wbp-element-content{ color:var(--text-color,#fff)!important; } .wbp-mensaje .wbp-element-content{ color:var(--text-color,#17111f)!important; text-shadow: 1px 1px 0 var(--stroke-color,rgba(255,255,255,.88)), -1px -1px 0 var(--stroke-color,rgba(255,255,255,.88)), 1px -1px 0 var(--stroke-color,rgba(255,255,255,.88)), -1px 1px 0 var(--stroke-color,rgba(255,255,255,.88)), 0 2px 6px rgba(0,0,0,.12)!important; } .wbp-mensaje::after{ background: radial-gradient(ellipse at center, rgba(255,255,255,var(--dedication-bg-opacity,.50)) 0%, rgba(255,255,255,calc(var(--dedication-bg-opacity,.50) * .84)) 38%, rgba(255,255,255,calc(var(--dedication-bg-opacity,.50) * .44)) 62%, rgba(255,255,255,calc(var(--dedication-bg-opacity,.50) * .16)) 78%, rgba(255,255,255,0) 100%)!important; } @media(min-width:1025px){ .wbp-music-card{ flex-basis:118px!important; min-width:118px!important; } .wbp-advanced-panel{ max-height:190px; overflow:auto; } } @media(max-width:540px){ .wbp-music-options{ max-height:none!important; } .wbp-music-card{ flex-basis:104px!important; min-width:104px!important; min-height:42px!important; padding:5px!important; } .wbp-music-card .wbp-music-icon{ width:26px!important; height:26px!important; min-width:26px!important; } .wbp-music-card b{ font-size:.68rem!important; } .wbp-music-card small{ display:none!important; } .wbp-advanced-toggle{ padding:7px 9px; margin-top:6px; } .wbp-advanced-toggle strong{ font-size:.74rem; } .wbp-advanced-toggle small{ display:none; } .wbp-advanced-panel{ padding:8px; max-height:118px; overflow:auto; } .wbp-advanced-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; } .wbp-advanced-grid label{ font-size:.64rem; } .wbp-advanced-grid input, .wbp-advanced-grid select{ min-height:29px; border-radius:8px; font-size:.75rem; } .wbp-mini-btn{ padding:6px 7px; font-size:.68rem; } } /* v1.14 advanced options sync + clean panel */ .wbp-advanced-panel{ display:block; background:linear-gradient(180deg,#fff,#fff9fd); border:1px solid rgba(106,27,154,.13); border-radius:16px; padding:12px; margin-top:8px; box-shadow:0 10px 24px rgba(34,27,47,.06); } .wbp-advanced-panel[hidden]{ display:none!important; } .wbp-current-target{ display:flex; align-items:center; gap:6px; min-height:28px; margin-bottom:9px; padding:7px 9px; border-radius:11px; background:rgba(106,27,154,.07); color:var(--purple); font-size:.76rem; font-weight:900; } .wbp-advanced-grid{ display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .wbp-advanced-grid label{ display:grid!important; gap:5px; min-width:0; color:var(--text); font-size:.72rem; font-weight:900; } .wbp-advanced-grid label span{ display:flex; justify-content:space-between; align-items:center; gap:8px; } .wbp-advanced-grid label span b{ color:var(--pink); font-size:.7rem; } .wbp-advanced-grid input, .wbp-advanced-grid select{ width:100%; min-width:0; min-height:34px; border-radius:10px; border:1px solid rgba(34,27,47,.14); background:#fff; color:var(--text); padding:4px 8px; font-size:.82rem; } .wbp-advanced-grid input[type="color"]{ padding:3px; } .wbp-advanced-grid input[type="range"]{ padding:0; min-height:28px; accent-color:var(--pink); } .wbp-advanced-actions{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; } .wbp-mini-btn{ border:1px solid rgba(233,30,99,.25); background:#fff; color:var(--pink); border-radius:10px; padding:7px 9px; font-size:.74rem; font-weight:900; cursor:pointer; } /* Advanced live style variables - one source of truth */ .wbp-draggable{ --wbp-font: inherit; --wbp-font-size: inherit; --wbp-dedication-bg-opacity: .50; } .wbp-nombre, .wbp-edad{ --wbp-text-color:#fff; --wbp-stroke-color:#000; --wbp-stroke-width:.08em; } .wbp-mensaje{ --wbp-text-color:#17111f; --wbp-stroke-color:#fff; --wbp-stroke-width:.045em; } .wbp-draggable .wbp-element-content{ font-family:var(--wbp-font, inherit)!important; font-size:var(--wbp-font-size, inherit); } .wbp-nombre, .wbp-edad{ color:var(--wbp-text-color,#fff)!important; -webkit-text-stroke:var(--wbp-stroke-width,.08em) var(--wbp-stroke-color,#000); paint-order:stroke fill; text-shadow:0 6px 14px rgba(0,0,0,.22)!important; } .wbp-nombre .wbp-element-content, .wbp-edad .wbp-element-content{ color:var(--wbp-text-color,#fff)!important; } .wbp-mensaje .wbp-element-content{ color:var(--wbp-text-color,#17111f)!important; -webkit-text-stroke:var(--wbp-stroke-width,.045em) var(--wbp-stroke-color,rgba(255,255,255,.88)); paint-order:stroke fill; text-shadow:0 2px 6px rgba(0,0,0,.12)!important; } .wbp-mensaje::after{ background: radial-gradient(ellipse at center, rgba(255,255,255,var(--wbp-dedication-bg-opacity,.50)) 0%, rgba(255,255,255,calc(var(--wbp-dedication-bg-opacity,.50) * .84)) 38%, rgba(255,255,255,calc(var(--wbp-dedication-bg-opacity,.50) * .44)) 62%, rgba(255,255,255,calc(var(--wbp-dedication-bg-opacity,.50) * .16)) 78%, rgba(255,255,255,0) 100%)!important; } @media(min-width:1025px){ .wbp-advanced-panel{ max-height:220px; overflow:auto; } } @media(max-width:540px){ .wbp-advanced-panel{ padding:8px; max-height:142px!important; overflow:auto; } .wbp-current-target{ min-height:24px; font-size:.66rem; margin-bottom:6px; padding:5px 7px; } .wbp-advanced-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; } .wbp-advanced-grid label{ font-size:.62rem; gap:3px; } .wbp-advanced-grid input, .wbp-advanced-grid select{ min-height:28px; font-size:.72rem; border-radius:8px; } .wbp-advanced-actions{ gap:6px; margin-top:7px; } .wbp-mini-btn{ padding:6px 7px; font-size:.66rem; } } /* v1.16 layout repair + default music loop behavior UI */ .wbp-preview-toggle{ white-space:nowrap; min-width:132px; } #previewArea>.wbp-preview-toggle{ align-items:center; display:inline-flex!important; gap:6px; left:10px; margin:0; max-width:calc(100% - 56px); min-height:34px; padding:7px 10px; position:absolute; top:10px; z-index:40; } #previewArea>.wbp-preview-toggle b{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* Music selector: compact horizontal carousel, never vertical-overflowing the form */ .wbp-music-gallery{ flex:0 0 auto!important; min-height:0!important; } .wbp-music-options{ display:flex!important; flex-wrap:nowrap!important; overflow-x:auto!important; overflow-y:hidden!important; max-height:none!important; gap:8px!important; padding:2px 2px 8px!important; } .wbp-music-card{ flex:0 0 116px!important; min-width:116px!important; min-height:50px!important; max-height:56px!important; display:flex!important; align-items:center!important; gap:8px!important; padding:7px!important; } .wbp-music-card .wbp-music-icon{ width:30px!important; height:30px!important; min-width:30px!important; } .wbp-music-card small{ display:none!important; } /* Desktop fit: stable two-panel layout inside viewport */ @media(min-width:1025px){ .wbp-editor{ width:min(1180px,calc(100vw - 28px))!important; margin:0 auto 28px!important; } .wbp-editor-shell{ height:min(820px,calc(100vh - 28px))!important; max-height:calc(100vh - 28px)!important; display:grid!important; grid-template-columns:minmax(0,1.03fr) minmax(350px,.97fr)!important; grid-template-rows:auto minmax(0,1fr)!important; gap:14px!important; padding:14px!important; overflow:hidden!important; } .wbp-popup-title{ grid-column:1/-1!important; margin:0!important; max-width:none!important; } .wbp-popup-title span{ display:none!important; } .wbp-popup-title h2{ font-size:clamp(1.25rem,2vw,2rem)!important; line-height:1.02!important; } .wbp-popup-title p{ font-size:.84rem!important; margin-top:4px!important; } .wbp-stage-panel, .wbp-form-panel{ height:100%!important; min-height:0!important; overflow:hidden!important; padding:12px!important; border-radius:20px!important; } .wbp-stage-panel{ display:flex!important; flex-direction:column!important; } .wbp-stage-label{ flex:0 0 auto!important; margin-bottom:8px!important; } .wbp-preview-layout{ flex:1 1 auto!important; min-height:0!important; height:100%!important; grid-template-columns:60px minmax(0,1fr)!important; gap:10px!important; align-items:center!important; } .wbp-template-strip{ height:100%!important; max-height:none!important; min-height:0!important; } .wbp-video-container{ max-height:100%!important; height:auto!important; width:auto!important; max-width:100%!important; margin:auto!important; } .wbp-form-panel{ display:flex!important; flex-direction:column!important; } .wbp-form-panel h3{ flex:0 0 auto!important; margin:0 0 7px!important; font-size:1.05rem!important; } .wbp-form-grid{ flex:1 1 auto!important; min-height:0!important; gap:7px!important; grid-template-rows:auto auto minmax(48px,.75fr)!important; } .wbp-field{ min-height:0!important; } .wbp-field-row{ min-height:22px!important; } .wbp-field input{ min-height:34px!important; padding:6px 9px!important; } .wbp-field textarea{ min-height:46px!important; height:100%!important; padding:6px 9px!important; } .wbp-music-gallery{ margin-top:7px!important; padding:8px!important; } .wbp-advanced-toggle{ margin-top:7px!important; padding:8px 10px!important; } .wbp-advanced-panel{ flex:0 0 auto!important; max-height:150px!important; overflow:auto!important; padding:9px!important; } .wbp-advanced-grid{ gap:7px!important; } .wbp-advanced-grid input, .wbp-advanced-grid select{ min-height:30px!important; } .wbp-actions{ margin-top:8px!important; flex:0 0 auto!important; } .wbp-btn{ min-height:38px!important; } .wbp-progress{ margin-top:7px!important; padding:8px!important; flex:0 0 auto!important; } .wbp-status{ flex:0 0 auto!important; max-height:58px!important; overflow:auto!important; margin-top:7px!important; } } /* Tablet/phone popup: no overlap; preview + controls use the available screen */ @media(max-width:1024px){ .wbp-editor-shell.is-popup{ display:grid!important; grid-template-columns:1fr!important; grid-template-rows:auto minmax(0,42dvh) minmax(0,58dvh)!important; width:100vw!important; height:100dvh!important; overflow:hidden!important; } .wbp-editor-shell.is-popup .wbp-popup-title{ min-height:0!important; } .wbp-editor-shell.is-popup .wbp-stage-panel, .wbp-editor-shell.is-popup .wbp-form-panel{ min-height:0!important; height:auto!important; overflow:hidden!important; } .wbp-editor-shell.is-popup .wbp-stage-panel{ display:flex!important; flex-direction:column!important; } .wbp-editor-shell.is-popup .wbp-stage-label{ flex:0 0 auto!important; margin-bottom:5px!important; } .wbp-editor-shell.is-popup .wbp-preview-layout{ flex:1 1 auto!important; min-height:0!important; height:100%!important; grid-template-columns:54px minmax(0,1fr)!important; gap:6px!important; } .wbp-editor-shell.is-popup .wbp-form-panel{ display:flex!important; flex-direction:column!important; padding-bottom:calc(34px + env(safe-area-inset-bottom,0px))!important; } .wbp-editor-shell.is-popup .wbp-form-panel::after{ flex:0 0 calc(18px + env(safe-area-inset-bottom,0px))!important; } .wbp-editor-shell.is-popup .wbp-form-grid{ flex:1 1 auto!important; min-height:0!important; gap:5px!important; grid-template-rows:auto auto minmax(36px,.8fr)!important; } .wbp-editor-shell.is-popup .wbp-music-card{ flex-basis:98px!important; min-width:98px!important; min-height:38px!important; } .wbp-editor-shell.is-popup .wbp-advanced-panel{ flex:0 0 auto!important; max-height:118px!important; overflow:auto!important; } .wbp-editor-shell.is-popup .wbp-actions{ flex:0 0 auto!important; margin-top:6px!important; } } @media(max-width:540px){ .wbp-editor-shell.is-popup{ grid-template-rows:auto minmax(0,40dvh) minmax(0,60dvh)!important; } .wbp-editor-shell.is-popup .wbp-popup-title h2{ font-size:.9rem!important; } .wbp-editor-shell.is-popup .wbp-popup-title p{ display:none!important; } .wbp-editor-shell.is-popup .wbp-stage-panel{ padding:5px 6px!important; } .wbp-editor-shell.is-popup .wbp-form-panel{ padding:7px 8px calc(32px + env(safe-area-inset-bottom,0px))!important; } .wbp-editor-shell.is-popup .wbp-form-panel h3{ font-size:.88rem!important; margin-bottom:4px!important; } .wbp-editor-shell.is-popup .wbp-field input, .wbp-editor-shell.is-popup .wbp-field textarea{ min-height:30px!important; font-size:.78rem!important; padding:5px 7px!important; } .wbp-editor-shell.is-popup .wbp-field textarea{ min-height:36px!important; } .wbp-editor-shell.is-popup .wbp-music-gallery{ margin-top:5px!important; padding:6px!important; } .wbp-editor-shell.is-popup .wbp-advanced-toggle{ margin-top:5px!important; padding:6px 8px!important; } .wbp-editor-shell.is-popup .wbp-advanced-panel{ max-height:104px!important; padding:7px!important; } .wbp-editor-shell.is-popup .wbp-actions{ gap:6px!important; } .wbp-editor-shell.is-popup .wbp-btn{ min-height:32px!important; font-size:.72rem!important; } .wbp-editor-shell.is-popup .wbp-status{ max-height:45px!important; font-size:.68rem!important; } } @media(max-width:1024px) and (orientation:landscape){ .wbp-editor-shell.is-popup{ grid-template-columns:minmax(0,50vw) minmax(0,50vw)!important; grid-template-rows:auto minmax(0,1fr)!important; } .wbp-editor-shell.is-popup .wbp-popup-title{ grid-column:1/-1!important; } .wbp-editor-shell.is-popup .wbp-stage-panel, .wbp-editor-shell.is-popup .wbp-form-panel{ min-height:0!important; height:auto!important; } .wbp-editor-shell.is-popup .wbp-form-panel{ padding-bottom:calc(22px + env(safe-area-inset-bottom,0px))!important; } } /* v1.17 final responsive repair + preview volume note */ /* The preview audio is controlled in JS at 50%; render/export keeps full audio via VPS. */ .wbp-editor-shell, .wbp-stage-panel, .wbp-form-panel{ box-sizing:border-box!important; } .wbp-form-panel{ min-width:0!important; } .wbp-music-options{ overscroll-behavior-x:contain; } @media(min-width:1025px){ .wbp-editor{ width:min(1160px, calc(100vw - 24px))!important; max-width:1160px!important; margin:0 auto 24px!important; } .wbp-editor-shell{ height:auto!important; max-height:none!important; min-height:0!important; overflow:visible!important; display:grid!important; grid-template-columns:minmax(0, 1fr) minmax(340px, 430px)!important; grid-template-rows:auto auto!important; gap:14px!important; padding:14px!important; } .wbp-popup-title{ grid-column:1 / -1!important; } .wbp-stage-panel, .wbp-form-panel{ height:auto!important; max-height:none!important; overflow:visible!important; } .wbp-stage-panel{ align-self:start!important; } .wbp-preview-layout{ display:grid!important; grid-template-columns:60px minmax(0, 1fr)!important; height:auto!important; min-height:0!important; } .wbp-template-strip{ max-height:min(620px, calc(100vh - 190px))!important; height:auto!important; align-self:stretch!important; } .wbp-video-container{ width:100%!important; max-width:460px!important; max-height:calc(100vh - 180px)!important; margin:auto!important; } .wbp-form-panel{ align-self:start!important; max-height:calc(100vh - 120px)!important; overflow-y:auto!important; scrollbar-width:thin; padding-right:10px!important; } .wbp-form-grid{ grid-template-rows:auto auto auto!important; flex:0 0 auto!important; } .wbp-field textarea{ height:70px!important; min-height:70px!important; } .wbp-advanced-panel{ max-height:240px!important; overflow-y:auto!important; } } /* Tablet and phone: popup always fits, form scrolls internally instead of overlapping */ @media(max-width:1024px){ body.wbp-popup-open{ overflow:hidden!important; } .wbp-editor-shell.is-popup{ position:fixed!important; inset:0!important; width:100dvw!important; height:100dvh!important; max-width:100dvw!important; max-height:100dvh!important; border-radius:0!important; display:grid!important; grid-template-columns:1fr!important; grid-template-rows:auto minmax(0, 42dvh) minmax(0, 1fr)!important; gap:0!important; padding:0!important; overflow:hidden!important; } .wbp-editor-shell.is-popup .wbp-popup-title{ grid-row:1!important; min-height:0!important; padding:7px 48px 7px 10px!important; border-radius:0!important; } .wbp-editor-shell.is-popup .wbp-popup-title h2{ font-size:clamp(.92rem, 3.2vw, 1.1rem)!important; line-height:1.08!important; } .wbp-editor-shell.is-popup .wbp-popup-title p{ font-size:clamp(.68rem, 2.5vw, .78rem)!important; line-height:1.12!important; margin-top:2px!important; } .wbp-editor-shell.is-popup .wbp-stage-panel{ grid-row:2!important; height:auto!important; min-height:0!important; display:flex!important; flex-direction:column!important; overflow:hidden!important; padding:6px 7px!important; border-radius:0!important; } .wbp-editor-shell.is-popup .wbp-stage-label{ flex:0 0 auto!important; margin:0 0 5px!important; min-height:32px!important; } .wbp-editor-shell.is-popup .wbp-stage-label b{ font-size:.82rem!important; } .wbp-editor-shell.is-popup .wbp-preview-toggle{ min-width:112px!important; min-height:30px!important; padding:5px 8px!important; font-size:.72rem!important; } .wbp-editor-shell.is-popup .wbp-preview-layout{ flex:1 1 auto!important; min-height:0!important; height:auto!important; display:grid!important; grid-template-columns:52px minmax(0, 1fr)!important; gap:6px!important; align-items:center!important; overflow:hidden!important; } .wbp-editor-shell.is-popup .wbp-template-strip{ height:100%!important; max-height:none!important; min-height:0!important; overflow-y:auto!important; padding:3px!important; } .wbp-editor-shell.is-popup .wbp-template-card{ padding:3px!important; border-radius:12px!important; } .wbp-editor-shell.is-popup .wbp-template-card span{ font-size:.5rem!important; } .wbp-editor-shell.is-popup .wbp-video-container{ width:auto!important; height:auto!important; max-width:100%!important; max-height:100%!important; margin:auto!important; border-radius:14px!important; } .wbp-editor-shell.is-popup .wbp-form-panel{ grid-row:3!important; min-height:0!important; height:auto!important; display:block!important; overflow-y:auto!important; overflow-x:hidden!important; -webkit-overflow-scrolling:touch; padding:8px 10px calc(30px + env(safe-area-inset-bottom, 0px))!important; border-radius:16px 16px 0 0!important; } .wbp-editor-shell.is-popup .wbp-form-panel::after{ content:""!important; display:block!important; height:calc(18px + env(safe-area-inset-bottom, 0px))!important; flex:none!important; } .wbp-editor-shell.is-popup .wbp-form-panel h3{ font-size:.95rem!important; margin:0 0 6px!important; } .wbp-editor-shell.is-popup .wbp-form-grid{ display:grid!important; grid-template-rows:auto auto auto!important; gap:6px!important; min-height:0!important; } .wbp-editor-shell.is-popup .wbp-field{ gap:3px!important; } .wbp-editor-shell.is-popup .wbp-field-row{ min-height:22px!important; } .wbp-editor-shell.is-popup .wbp-field label{ font-size:.7rem!important; } .wbp-editor-shell.is-popup .wbp-field input, .wbp-editor-shell.is-popup .wbp-field textarea{ min-height:32px!important; padding:5px 8px!important; font-size:.82rem!important; border-radius:10px!important; } .wbp-editor-shell.is-popup .wbp-field textarea{ height:44px!important; min-height:44px!important; resize:none!important; } .wbp-editor-shell.is-popup .wbp-music-gallery{ margin-top:6px!important; padding:7px!important; } .wbp-editor-shell.is-popup .wbp-music-gallery-head{ margin-bottom:5px!important; } .wbp-editor-shell.is-popup .wbp-music-gallery-head span{ display:none!important; } .wbp-editor-shell.is-popup .wbp-music-options{ display:flex!important; flex-wrap:nowrap!important; overflow-x:auto!important; overflow-y:hidden!important; max-height:none!important; gap:6px!important; padding-bottom:6px!important; } .wbp-editor-shell.is-popup .wbp-music-card{ flex:0 0 96px!important; min-width:96px!important; min-height:36px!important; max-height:38px!important; padding:5px!important; gap:5px!important; } .wbp-editor-shell.is-popup .wbp-music-icon{ width:22px!important; height:22px!important; min-width:22px!important; border-radius:7px!important; font-size:.76rem!important; } .wbp-editor-shell.is-popup .wbp-music-card b{ font-size:.66rem!important; } .wbp-editor-shell.is-popup .wbp-music-card small{ display:none!important; } .wbp-editor-shell.is-popup .wbp-advanced-toggle{ margin-top:6px!important; padding:7px 9px!important; border-radius:12px!important; } .wbp-editor-shell.is-popup .wbp-advanced-toggle strong{ font-size:.74rem!important; } .wbp-editor-shell.is-popup .wbp-advanced-toggle small{ display:none!important; } .wbp-editor-shell.is-popup .wbp-advanced-panel{ margin-top:6px!important; max-height:none!important; overflow:visible!important; padding:8px!important; } .wbp-editor-shell.is-popup .wbp-advanced-grid{ grid-template-columns:repeat(2, minmax(0, 1fr))!important; gap:6px!important; } .wbp-editor-shell.is-popup .wbp-advanced-grid label{ font-size:.64rem!important; } .wbp-editor-shell.is-popup .wbp-advanced-grid input, .wbp-editor-shell.is-popup .wbp-advanced-grid select{ min-height:28px!important; font-size:.72rem!important; } .wbp-editor-shell.is-popup .wbp-actions{ margin-top:7px!important; gap:6px!important; } .wbp-editor-shell.is-popup .wbp-btn{ min-height:34px!important; font-size:.74rem!important; border-radius:10px!important; padding:0 8px!important; } .wbp-editor-shell.is-popup .wbp-progress{ margin-top:7px!important; padding:7px!important; } .wbp-editor-shell.is-popup .wbp-status{ max-height:none!important; font-size:.72rem!important; padding:8px!important; margin-top:7px!important; } } @media(max-width:540px){ .wbp-editor-shell.is-popup{ grid-template-rows:auto minmax(0, 38dvh) minmax(0, 1fr)!important; } .wbp-editor-shell.is-popup .wbp-popup-title p{ display:none!important; } .wbp-editor-shell.is-popup .wbp-stage-label{ min-height:28px!important; } .wbp-editor-shell.is-popup .wbp-preview-layout{ grid-template-columns:48px minmax(0, 1fr)!important; } .wbp-editor-shell.is-popup .wbp-form-panel{ padding:7px 8px calc(28px + env(safe-area-inset-bottom, 0px))!important; } } @media(max-width:1024px) and (orientation:landscape){ .wbp-editor-shell.is-popup{ grid-template-columns:minmax(0, 50dvw) minmax(0, 50dvw)!important; grid-template-rows:auto minmax(0, 1fr)!important; } .wbp-editor-shell.is-popup .wbp-popup-title{ grid-column:1 / -1!important; } .wbp-editor-shell.is-popup .wbp-stage-panel{ grid-row:2!important; grid-column:1!important; } .wbp-editor-shell.is-popup .wbp-form-panel{ grid-row:2!important; grid-column:2!important; border-radius:0!important; } } /* Cumpleaños.net integration pass */ .wbp-editor{ --purple:#7b2ba7; --pink:#d82654; --yellow:#ffc247; --text:#261b32; --muted:#65576f; --border:rgba(123,43,167,.14); --shadow:0 18px 46px rgba(64,24,92,.10); margin:0 auto 54px!important; max-width:1180px; } .wbp-editor-shell{ border-color:rgba(216,38,84,.13)!important; border-radius:18px!important; gap:18px!important; padding:18px!important; } .wbp-popup-title{ margin-bottom:10px!important; max-width:680px!important; } .wbp-popup-title span{ background:#fff0f5!important; color:#b82049!important; } .wbp-popup-title h2{ color:#25172f!important; font-size:clamp(1.55rem,3vw,2.35rem)!important; letter-spacing:0!important; } .wbp-stage-panel, .wbp-form-panel{ border-radius:16px!important; box-shadow:0 10px 26px rgba(64,24,92,.07)!important; } .wbp-video-container{ border-radius:16px!important; } .wbp-template-thumb--video{ position:relative; } .wbp-template-thumb--video::before{ border-bottom:8px solid transparent; border-left:12px solid #fff; border-top:8px solid transparent; content:""; display:block; height:0; margin-left:4px; width:0; } .wbp-template-card, .wbp-music-card{ transition:border-color .16s ease, box-shadow .16s ease, transform .16s ease; } .wbp-template-card:hover, .wbp-music-card:hover{ box-shadow:0 10px 22px rgba(64,24,92,.11)!important; transform:translateY(-1px); } .wbp-template-card.is-active, .wbp-music-card.is-active{ border-color:#d82654!important; box-shadow:0 10px 26px rgba(216,38,84,.14)!important; } .wbp-btn{ border-radius:12px!important; letter-spacing:0!important; } .wbp-btn-primary{ background:linear-gradient(135deg,#d82654,#7b2ba7)!important; } .wbp-mobile-hint{ display:none!important; } .wbp-download-link{ color:#b82049; font-weight:900; } /* v0.8.45: editor popup fit and focus-close refinements */ @media(max-width:1024px){ .wbp-editor-shell.is-popup{ background:rgba(255,255,255,.98)!important; grid-template-rows:auto minmax(0, 54dvh) minmax(0, 1fr)!important; } .wbp-editor-shell.is-popup .wbp-stage-panel{ min-height:0!important; } .wbp-editor-shell.is-popup .wbp-preview-layout{ align-items:stretch!important; min-height:0!important; } .wbp-editor-shell.is-popup .wbp-video-container{ aspect-ratio:var(--preview-aspect, 9 / 16)!important; height:100%!important; max-height:100%!important; max-width:100%!important; width:auto!important; justify-self:center!important; align-self:center!important; } .wbp-editor-shell.is-popup .wbp-video-container video, .wbp-editor-shell.is-popup .wbp-preview-image{ height:100%!important; object-fit:contain!important; width:100%!important; } .wbp-editor-shell.is-popup .wbp-form-panel{ min-height:0!important; } } @media(max-width:540px) and (orientation:portrait){ .wbp-editor-shell.is-popup{ grid-template-rows:auto minmax(0, 58dvh) minmax(0, 1fr)!important; } .wbp-editor-shell.is-popup .wbp-popup-title h2{ font-size:.92rem!important; } .wbp-editor-shell.is-popup .wbp-stage-panel{ padding:5px 6px!important; } .wbp-editor-shell.is-popup .wbp-preview-layout{ grid-template-columns:42px minmax(0, 1fr)!important; gap:5px!important; } .wbp-editor-shell.is-popup .wbp-template-card span{ display:none!important; } } @media(max-width:1024px) and (orientation:landscape){ .wbp-editor-shell.is-popup{ grid-template-columns:minmax(0, 58dvw) minmax(0, 42dvw)!important; } .wbp-editor-shell.is-popup .wbp-video-container{ height:calc(100dvh - 58px)!important; } } /* v0.8.46: direct preview resizing controls */ .wbp-draggable{ height:var(--box-h, auto)!important; width:var(--box-w, auto)!important; } .wbp-nombre, .wbp-edad, .wbp-mensaje{ overflow:visible!important; } .wbp-nombre .wbp-element-content, .wbp-edad .wbp-element-content, .wbp-mensaje .wbp-element-content{ max-height:100%!important; overflow:visible!important; overflow-wrap:normal!important; word-break:normal!important; hyphens:none!important; } .wbp-mensaje{ align-items:center!important; display:flex!important; justify-content:center!important; } .wbp-mensaje .wbp-element-content{ margin:auto!important; } .wbp-draggable.selected .wbp-resize-x-handle, .wbp-draggable.selected .wbp-resize-y-handle{ display:grid!important; } .wbp-handle{ align-items:center!important; background:#fff!important; border:1px solid rgba(38,27,50,.22)!important; box-shadow:0 8px 20px rgba(38,27,50,.22)!important; color:#7b2ba7!important; justify-content:center!important; } .wbp-resize-x-handle, .wbp-resize-y-handle, .wbp-resize-handle{ height:24px!important; width:24px!important; } .wbp-resize-x-handle{ right:-34px!important; } .wbp-resize-y-handle{ bottom:-34px!important; } .wbp-resize-x-handle::before, .wbp-resize-y-handle::before, .wbp-resize-x-handle::after, .wbp-resize-y-handle::after, .wbp-resize-handle::before, .wbp-resize-handle::after{ content:none!important; } .wbp-resize-x-handle::after{ color:#1f6fbd!important; content:"↔"!important; font-size:14px!important; font-weight:900!important; line-height:1!important; } .wbp-resize-y-handle::after{ color:#c05b00!important; content:"↕"!important; font-size:14px!important; font-weight:900!important; line-height:1!important; } .wbp-resize-handle::after{ color:#d82654!important; content:"⤡"!important; font-size:14px!important; font-weight:900!important; line-height:1!important; } .wbp-rotate-handle{ background:#fff!important; border-color:rgba(123,43,167,.35)!important; } .wbp-rotate-handle::before, .wbp-rotate-handle::after{ content:none!important; } .wbp-rotate-handle::after{ color:#7b2ba7!important; content:"↻"!important; font-size:15px!important; font-weight:900!important; line-height:1!important; } @media(max-width:1024px){ .wbp-editor-shell.is-popup .wbp-popup-title{ background:linear-gradient(135deg,#fff7fb,#f7efff)!important; } .wbp-editor-shell.is-popup .wbp-popup-title h2{ font-weight:900!important; } .wbp-editor-shell.is-popup .wbp-preview-layout{ grid-template-columns:40px minmax(0, 1fr)!important; } .wbp-editor-shell.is-popup .wbp-template-strip{ border-radius:12px!important; } .wbp-editor-shell.is-popup .wbp-template-thumb{ border-radius:9px!important; } .wbp-editor-shell.is-popup .wbp-video-container{ background:#181020!important; box-shadow:0 10px 28px rgba(38,27,50,.18)!important; } } @media(max-width:430px) and (orientation:portrait){ .wbp-editor-shell.is-popup{ grid-template-rows:auto minmax(0, 62dvh) minmax(0, 1fr)!important; } .wbp-editor-shell.is-popup .wbp-form-panel{ padding-top:6px!important; } .wbp-editor-shell.is-popup .wbp-field input, .wbp-editor-shell.is-popup .wbp-field textarea{ min-height:30px!important; } } /* v1.14 stable responsive editor layout: inline mobile flow, no fragile popup */ .wbp-editor{ width:min(1180px, 100%); margin-inline:auto; } .wbp-popup-close, .wbp-mobile-hint{ display:none!important; } .wbp-editor-shell{ grid-template-columns:minmax(300px, .96fr) minmax(320px, 1.04fr)!important; gap:18px!important; align-items:stretch!important; border-radius:22px!important; padding:18px!important; } .wbp-popup-title{ margin-bottom:2px!important; } .wbp-stage-panel, .wbp-form-panel{ min-width:0!important; border-radius:18px!important; padding:14px!important; } .wbp-stage-panel{ display:flex!important; flex-direction:column!important; } .wbp-preview-layout{ flex:1 1 auto!important; min-height:0!important; } .wbp-video-container{ max-height:calc(100vh - 230px)!important; min-height:320px!important; } .wbp-form-panel{ display:grid!important; grid-template-rows:auto auto auto auto auto auto auto auto 1fr!important; align-content:start!important; gap:10px!important; max-height:calc(100vh - 156px)!important; overflow:auto!important; overscroll-behavior:contain; } .wbp-form-panel h3, .wbp-simple-tools, .wbp-form-grid, .wbp-music-gallery, .wbp-advanced-toggle, .wbp-advanced-panel, .wbp-actions, .wbp-secondary-actions, .wbp-status{ margin-block:0!important; } .wbp-simple-tools{ grid-template-columns:repeat(3, minmax(0, 1fr))!important; } .wbp-form-grid{ grid-template-columns:repeat(2, minmax(0, 1fr))!important; gap:10px!important; } .wbp-form-grid .wbp-field:nth-child(3){ grid-column:1 / -1!important; } .wbp-field input, .wbp-field textarea{ min-height:42px!important; border-radius:12px!important; } .wbp-field textarea{ min-height:82px!important; } .wbp-actions{ position:sticky!important; bottom:-14px!important; z-index:8!important; margin-inline:-4px!important; padding:10px 4px 4px!important; background:linear-gradient(180deg, rgba(255,255,255,0), #fff 32%)!important; } .wbp-btn{ border-radius:12px!important; min-height:44px!important; } .wbp-btn-primary{ position:relative; } .wbp-btn-primary::after{ content:"Premium"; display:inline-flex; align-items:center; margin-left:8px; padding:3px 7px; border-radius:999px; background:rgba(255,255,255,.2); font-size:.68rem; line-height:1; } .wbp-advanced-panel{ max-height:none!important; overflow:visible!important; } .wbp-advanced-grid{ grid-template-columns:repeat(3, minmax(0, 1fr))!important; } .wbp-editor-shell:not(.is-advanced) .wbp-advanced-panel, .wbp-editor-shell:not(.is-advanced) .wbp-music-gallery{ display:none!important; } @media(max-width:900px){ .wbp-editor-shell, .wbp-editor-shell.is-popup{ position:relative!important; inset:auto!important; display:grid!important; grid-template-columns:1fr!important; grid-template-rows:auto auto auto!important; width:100%!important; height:auto!important; max-height:none!important; overflow:visible!important; padding:12px!important; border-radius:18px!important; cursor:default!important; } body.wbp-popup-open{ overflow:auto!important; position:static!important; touch-action:auto!important; } .wbp-popup-title{ text-align:left!important; padding:0!important; border:0!important; } .wbp-popup-title h2{ font-size:1.25rem!important; } .wbp-popup-title p{ font-size:.82rem!important; line-height:1.3!important; } .wbp-stage-panel, .wbp-form-panel, .wbp-editor-shell.is-popup .wbp-stage-panel, .wbp-editor-shell.is-popup .wbp-form-panel{ width:100%!important; height:auto!important; max-height:none!important; overflow:visible!important; padding:12px!important; border-radius:16px!important; } .wbp-video-container, .wbp-editor-shell.is-popup .wbp-video-container{ width:100%!important; height:auto!important; min-height:0!important; max-height:58vh!important; } .wbp-form-panel{ display:grid!important; gap:9px!important; } .wbp-form-grid{ grid-template-columns:1fr 1fr!important; gap:8px!important; } .wbp-field textarea{ min-height:70px!important; } .wbp-simple-tools{ grid-template-columns:1fr 1fr 1fr!important; gap:6px!important; } .wbp-mini-btn{ min-height:38px!important; padding:7px 8px!important; } .wbp-advanced-grid{ grid-template-columns:1fr 1fr!important; } } @media(max-width:520px){ .wbp-editor-shell, .wbp-editor-shell.is-popup{ margin-inline:-4px!important; padding:8px!important; } .wbp-stage-panel, .wbp-form-panel{ padding:10px!important; } .wbp-form-grid, .wbp-simple-tools, .wbp-actions, .wbp-advanced-grid{ grid-template-columns:1fr!important; } .wbp-form-grid .wbp-field:nth-child(3){ grid-column:auto!important; } .wbp-field input, .wbp-field textarea{ min-height:38px!important; font-size:.9rem!important; } .wbp-field textarea{ min-height:68px!important; } .wbp-stage-label{ align-items:flex-start!important; gap:8px!important; } .wbp-preview-toggle{ padding:7px 9px!important; font-size:.76rem!important; } .wbp-actions{ bottom:0!important; margin-inline:0!important; padding:8px 0 0!important; } } /* v1.13 mobile editor: no visible handles, no fullscreen popup, sticky preview */ .wbp-handle, .wbp-rotate-handle, .wbp-resize-handle, .wbp-resize-x-handle, .wbp-resize-y-handle, .wbp-popup-close, .wbp-mobile-hint{ display:none!important; } .wbp-draggable.selected::before, .wbp-draggable.is-editing.selected::before{ inset:-4px!important; border:1.5px solid rgba(233,30,99,.82)!important; border-radius:10px!important; box-shadow:none!important; background:transparent!important; } .wbp-draggable.selected, .wbp-draggable.is-editing.selected{ outline:0!important; outline-offset:0!important; } @media(max-width:767px){ body.wbp-popup-open{ overflow:auto!important; overscroll-behavior:auto!important; touch-action:auto!important; } .wbp-editor{ width:100%!important; max-width:100vw!important; margin:0 0 24px!important; } .wbp-editor-shell, .wbp-editor-shell.is-popup{ position:relative!important; inset:auto!important; z-index:auto!important; display:block!important; width:100%!important; max-width:100%!important; height:auto!important; max-height:none!important; overflow:visible!important; padding:10px!important; border-radius:20px!important; cursor:default!important; } .wbp-popup-title{ padding:0!important; margin:0 0 10px!important; text-align:left!important; } .wbp-popup-title span{ display:none!important; } .wbp-popup-title h2{ font-size:1.18rem!important; line-height:1.12!important; } .wbp-popup-title p{ font-size:.82rem!important; line-height:1.35!important; margin-top:4px!important; } .wbp-stage-panel, .wbp-editor-shell.is-popup .wbp-stage-panel{ position:sticky!important; top:0!important; z-index:50!important; height:auto!important; max-height:none!important; overflow:visible!important; padding:8px!important; margin:0 0 10px!important; border-radius:16px!important; box-shadow:0 14px 34px rgba(34,27,47,.16)!important; } .admin-bar .wbp-stage-panel, .admin-bar .wbp-editor-shell.is-popup .wbp-stage-panel{ top:46px!important; } .wbp-stage-label, .wbp-editor-shell.is-popup .wbp-stage-label{ display:flex!important; margin-bottom:7px!important; } .wbp-preview-layout, .wbp-editor-shell.is-popup .wbp-preview-layout{ display:grid!important; grid-template-columns:minmax(0,1fr)!important; gap:0!important; height:auto!important; } .wbp-template-strip{ display:none!important; } .wbp-video-container, .wbp-editor-shell.is-popup .wbp-video-container{ width:min(100%, 430px)!important; height:auto!important; max-height:42vh!important; margin:0 auto!important; border-radius:15px!important; } .wbp-form-panel, .wbp-editor-shell.is-popup .wbp-form-panel{ height:auto!important; max-height:none!important; overflow:visible!important; padding:12px!important; border-radius:16px!important; } .wbp-form-panel::after, .wbp-editor-shell.is-popup .wbp-form-panel::after{ display:none!important; } .wbp-form-grid, .wbp-editor-shell.is-popup .wbp-form-grid{ display:grid!important; grid-template-rows:none!important; gap:10px!important; } .wbp-simple-tools, .wbp-actions{ grid-template-columns:1fr!important; } .wbp-music-options{ grid-template-columns:repeat(2,minmax(0,1fr))!important; max-height:none!important; } .wbp-advanced-grid{ grid-template-columns:1fr!important; } } /* v1.14 mobile preview fit + tighter editable hitboxes */ .wbp-nombre, .wbp-edad{ width:auto!important; min-width:0!important; max-width:92%!important; padding:0!important; pointer-events:none!important; } .wbp-nombre .wbp-element-content, .wbp-edad .wbp-element-content{ display:inline-block!important; width:auto!important; min-width:1ch!important; max-width:var(--box-w,88%)!important; padding:2px 3px!important; pointer-events:auto!important; white-space:normal!important; overflow-wrap:normal!important; word-break:normal!important; hyphens:none!important; } .wbp-mensaje{ width:var(--box-w,86%)!important; max-width:88%!important; min-width:0!important; min-height:var(--box-h,20%)!important; padding:8px 12px!important; pointer-events:auto!important; } .wbp-mensaje .wbp-element-content{ width:100%!important; min-height:calc(var(--box-h,20%) * .55)!important; overflow-wrap:normal!important; word-break:normal!important; hyphens:none!important; } .wbp-draggable.selected::before, .wbp-draggable.is-editing.selected::before{ inset:-3px!important; border:1.5px solid rgba(233,30,99,.86)!important; border-radius:8px!important; } @media(max-width:767px){ .wbp-video-container, .wbp-editor-shell.is-popup .wbp-video-container{ max-height:none!important; min-height:0!important; flex:none!important; } } /* v1.15 editor UX reset: text elements are not boxes; only dedication has a box */ html, body{ max-width:100%!important; overflow-x:hidden!important; } .wbp-editor, .wbp-editor-shell, .wbp-stage-panel, .wbp-form-panel, .wbp-preview-layout{ min-width:0!important; max-width:100%!important; } .wbp-draggable{ width:auto!important; height:auto!important; min-width:0!important; min-height:0!important; padding:0!important; box-sizing:border-box!important; } .wbp-nombre, .wbp-edad{ display:inline-flex!important; align-items:center!important; justify-content:center!important; width:auto!important; height:auto!important; min-width:0!important; min-height:0!important; max-width:92%!important; line-height:1!important; background:transparent!important; box-shadow:none!important; } .wbp-nombre .wbp-element-content, .wbp-edad .wbp-element-content{ display:inline-block!important; width:auto!important; height:auto!important; min-width:0!important; min-height:0!important; max-width:90vw!important; padding:1px 2px!important; line-height:1!important; white-space:nowrap!important; overflow-wrap:normal!important; word-break:normal!important; border-radius:4px!important; } .wbp-nombre.selected::before, .wbp-edad.selected::before, .wbp-nombre.is-editing.selected::before, .wbp-edad.is-editing.selected::before{ content:none!important; display:none!important; } .wbp-nombre.selected .wbp-element-content, .wbp-edad.selected .wbp-element-content{ outline:1.5px solid rgba(233,30,99,.88)!important; outline-offset:2px!important; } .wbp-mensaje{ display:block!important; width:var(--box-w,86%)!important; height:auto!important; min-height:var(--box-h,20%)!important; max-width:88%!important; padding:8px 12px!important; } .wbp-mensaje .wbp-element-content{ display:block!important; min-height:0!important; line-height:1.18!important; overflow-wrap:normal!important; word-break:normal!important; hyphens:none!important; } @media(max-width:767px){ body{ width:100%!important; } .cnr-page, .cnr-main, .cnr-section, .cnr-container, .entry-content, .wp-site-blocks{ max-width:100%!important; overflow-x:hidden!important; } .wbp-editor{ width:100%!important; max-width:100%!important; padding-left:10px!important; padding-right:0!important; margin-inline:0!important; } .wbp-editor-shell, .wbp-editor-shell.is-popup{ display:grid!important; grid-template-columns:minmax(0,1fr)!important; gap:10px!important; margin:0!important; padding:8px!important; overflow:visible!important; } .wbp-popup-title, .wbp-popup-title h2, .wbp-popup-title p{ max-width:100%!important; } .wbp-stage-panel, .wbp-editor-shell.is-popup .wbp-stage-panel{ position:relative!important; top:auto!important; z-index:1!important; box-shadow:0 8px 24px rgba(34,27,47,.12)!important; } .wbp-preview-layout, .wbp-editor-shell.is-popup .wbp-preview-layout{ width:100%!important; max-width:100%!important; } .wbp-video-container, .wbp-editor-shell.is-popup .wbp-video-container{ width:100%!important; max-width:100%!important; margin-inline:auto!important; aspect-ratio:var(--preview-aspect, 9/16)!important; } .wbp-form-panel, .wbp-editor-shell.is-popup .wbp-form-panel{ width:100%!important; max-width:100%!important; } .wbp-simple-tools, .wbp-form-grid, .wbp-actions, .wbp-secondary-actions, .wbp-advanced-grid{ grid-template-columns:minmax(0,1fr)!important; } } /* v0.8.75 quick action cards + clearer advanced panel + fixed exports. */ .wbp-form-panel h3{ display:none!important; } .wbp-music-gallery{ display:none!important; } .wbp-controls-scroll{ display:contents; } .wbp-hidden-music-options{ display:none!important; } .wbp-simple-tools{ display:grid!important; grid-template-columns:repeat(4,minmax(0,1fr))!important; gap:9px!important; margin:0 0 12px!important; } .wbp-tool-card{ appearance:none; border:1px solid rgba(106,27,154,.14); border-radius:14px; background:linear-gradient(180deg,#fff,#fff8fc); min-width:0; min-height:86px; padding:8px; display:grid; grid-template-rows:minmax(38px,1fr) auto; gap:6px; align-items:center; justify-items:center; color:#261b32; font:900 .72rem/1.08 Raleway,system-ui,sans-serif; text-align:center; cursor:pointer; box-shadow:0 8px 20px rgba(38,27,50,.07); } .wbp-tool-card:active{ transform:translateY(1px); } .wbp-tool-card__media, .wbp-tool-card__icon{ width:46px; height:38px; border-radius:11px; display:grid; place-items:center; overflow:hidden; background:linear-gradient(135deg,#d82654,#7b2ba7); color:#fff; font-weight:950; box-shadow:0 7px 16px rgba(123,43,167,.16); } .wbp-tool-card__media img{ width:100%; height:100%; object-fit:cover; display:block; } .wbp-tool-card__icon--letters{ font-family:"Pacifico","Baloo 2",cursive; font-size:1.25rem; background:linear-gradient(135deg,#7b2ba7,#e91e63 52%,#ffc107); } .wbp-tool-card__icon--music{ font-size:1.35rem; background:linear-gradient(135deg,#00bfa5,#42a5f5,#e91e63); } .wbp-tool-card__icon--reset{ font-size:1.55rem; background:linear-gradient(135deg,#fff,#fff6fb); color:#7b2ba7; border:1px solid rgba(123,43,167,.2); } .wbp-advanced-panel{ padding:12px!important; } .wbp-advanced-section-title{ grid-column:1/-1; margin:5px 0 0; padding:7px 9px; border-radius:11px; background:rgba(216,38,84,.07); color:#7b2ba7; font-size:.75rem; font-weight:950; } .wbp-current-target{ margin-bottom:8px!important; } .wbp-advanced-actions{ display:grid!important; grid-template-columns:1fr 1fr; } .wbp-actions{ z-index:910; } @media(min-width:768px){ .wbp-actions{ position:sticky; bottom:10px; background:linear-gradient(180deg,rgba(255,255,255,0),#fff 28%); padding-top:10px; } } @media(max-width:767px){ .wbp-editor{ padding-bottom:calc(86px + env(safe-area-inset-bottom,0px))!important; } .wbp-simple-tools{ grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:8px!important; } .wbp-tool-card{ min-height:72px; grid-template-columns:44px minmax(0,1fr); grid-template-rows:1fr; justify-items:start; text-align:left; font-size:.74rem; } .wbp-tool-card__media, .wbp-tool-card__icon{ width:40px; height:40px; } .wbp-advanced-panel{ max-height:none!important; overflow:visible!important; } .wbp-advanced-grid{ grid-template-columns:minmax(0,1fr)!important; } .wbp-advanced-section-title{ font-size:.72rem; } .wbp-actions{ position:fixed!important; left:10px!important; right:10px!important; bottom:calc(8px + env(safe-area-inset-bottom,0px))!important; z-index:950!important; display:grid!important; grid-template-columns:1fr 1fr!important; gap:8px!important; margin:0!important; padding:9px!important; border-radius:18px!important; background:rgba(255,255,255,.94)!important; border:1px solid rgba(123,43,167,.12)!important; box-shadow:0 16px 44px rgba(38,27,50,.22)!important; backdrop-filter:blur(12px); } .wbp-actions .wbp-btn{ min-height:42px!important; border-radius:13px!important; font-size:.78rem!important; } } @media(max-width:360px){ .wbp-tool-card{ font-size:.68rem; padding:7px; } } /* v0.8.80 final mobile UX/performance layer. */ .wbp-sr-only{ position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; } .wbp-tool-card{ min-height:74px!important; grid-template-rows:1fr!important; padding:9px!important; } .wbp-tool-card__media, .wbp-tool-card__icon{ width:56px!important; height:56px!important; border-radius:16px!important; position:relative; isolation:isolate; } .wbp-tool-card__media::after, .wbp-tool-card__icon::after{ content:""; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(145deg,rgba(255,255,255,.42),rgba(255,255,255,0) 45%,rgba(0,0,0,.12)); pointer-events:none; z-index:1; } .wbp-tool-card__media img, .wbp-tool-card__icon svg{ position:relative; z-index:2; } .wbp-tool-card__icon svg{ width:34px; height:34px; display:block; filter:drop-shadow(0 4px 7px rgba(38,27,50,.24)); } .wbp-tool-card__icon--letters{ color:#fff8d7!important; background: radial-gradient(circle at 25% 22%,rgba(255,255,255,.85),rgba(255,255,255,0) 24%), linear-gradient(135deg,#6638d8,#e91e63 53%,#ffc107)!important; } .wbp-tool-card__icon--music{ color:#fff!important; background: radial-gradient(circle at 70% 18%,rgba(255,255,255,.75),rgba(255,255,255,0) 24%), linear-gradient(135deg,#00bfa5,#42a5f5 48%,#e91e63)!important; } .wbp-tool-card__icon--reset{ color:#7b2ba7!important; background: radial-gradient(circle at 28% 20%,#fff,#fff0f8 32%,rgba(255,255,255,0) 33%), linear-gradient(135deg,#fff,#ffe7f2 45%,#f6eeff)!important; border:1px solid rgba(123,43,167,.2)!important; } .cnr-managed-page .entry-content.alignfull, .cnr-managed-page .wp-block-group.alignfull{ max-width:100vw!important; overflow-x:clip!important; } @media(max-width:767px){ .wbp-video-container, .wbp-editor-shell.is-popup .wbp-video-container, .wbp-overlay{ touch-action:pan-y!important; } .wbp-draggable, .wbp-draggable .wbp-element-content, .wbp-draggable .wbp-move-pad, .wbp-handle{ touch-action:none!important; } .wbp-simple-tools{ grid-template-columns:repeat(4,minmax(0,1fr))!important; gap:8px!important; } .wbp-tool-card{ min-height:66px!important; grid-template-columns:1fr!important; justify-items:center!important; text-align:center!important; padding:6px!important; border-radius:16px!important; } .wbp-tool-card__media, .wbp-tool-card__icon{ width:50px!important; height:50px!important; border-radius:15px!important; } .wbp-tool-card__icon svg{ width:31px; height:31px; } .wbp-editor{ padding-bottom:calc(150px + env(safe-area-inset-bottom,0px))!important; } .wbp-actions{ bottom:calc(var(--wbp-action-bottom,8px) + env(safe-area-inset-bottom,0px))!important; } } /* v0.9.5: normal mobile preview. No scroll effect. */ @media(max-width:767px){ .wbp-editor-shell, .wbp-editor-shell.is-popup{ display:block!important; min-height:0!important; overflow:visible!important; padding-top:0!important; } .wbp-editor-shell .wbp-stage-panel, .wbp-editor-shell.is-popup .wbp-stage-panel{ position:relative!important; top:auto!important; left:auto!important; right:auto!important; z-index:1!important; width:100%!important; height:auto!important; min-height:0!important; max-height:none!important; margin:0!important; padding:8px!important; border-radius:16px!important; overflow:visible!important; transform:none!important; transition:none!important; animation:none!important; box-shadow:0 8px 24px rgba(34,27,47,.12)!important; } .wbp-editor-shell .wbp-stage-label{ display:flex!important; } .wbp-editor-shell .wbp-preview-layout{ display:grid!important; grid-template-columns:minmax(0,1fr)!important; gap:0!important; height:auto!important; min-height:0!important; overflow:visible!important; } .wbp-editor-shell .wbp-video-container{ width:min(100%,430px)!important; height:auto!important; max-width:100%!important; max-height:none!important; margin:0 auto!important; transform:none!important; animation:none!important; } .wbp-editor-shell .wbp-video-container video, .wbp-editor-shell .wbp-preview-image{ object-fit:cover; } .wbp-editor-shell .wbp-form-panel{ margin-top:0!important; padding-top:12px!important; overflow:visible!important; } } /* v0.9.6: native mobile fields and simple landscape layout. */ body.cnr-managed-page:has(.wbp-editor) .cnr-floating-menu, body.page-id-41 .cnr-floating-menu{ display:none!important; } @media(max-width:767px){ .wbp-editor-shell.is-field-editing .wbp-actions{ position:static!important; left:auto!important; right:auto!important; bottom:auto!important; margin-top:12px!important; box-shadow:none!important; backdrop-filter:none!important; } .wbp-editor-shell.is-field-editing .wbp-form-panel{ padding-bottom:12px!important; } } @media(max-height:520px) and (orientation:landscape){ .wbp-editor{ padding-bottom:24px!important; } .wbp-editor-shell, .wbp-editor-shell.is-popup{ display:grid!important; grid-template-columns:minmax(240px,.82fr) minmax(320px,1.18fr)!important; grid-template-rows:auto 1fr!important; gap:10px!important; align-items:start!important; } .wbp-popup-title{ grid-column:1 / -1!important; margin-bottom:0!important; } .wbp-stage-panel, .wbp-editor-shell.is-popup .wbp-stage-panel{ position:relative!important; top:auto!important; width:100%!important; margin:0!important; } .wbp-preview-layout, .wbp-editor-shell.is-popup .wbp-preview-layout{ display:flex!important; justify-content:center!important; } .wbp-video-container, .wbp-editor-shell.is-popup .wbp-video-container{ width:auto!important; height:calc(100dvh - 132px)!important; max-height:300px!important; min-height:220px!important; aspect-ratio:var(--preview-aspect,9/16)!important; } .wbp-form-panel, .wbp-editor-shell.is-popup .wbp-form-panel{ max-height:none!important; overflow:visible!important; } .wbp-form-grid{ grid-template-columns:1fr 1fr!important; } .wbp-form-grid .wbp-field:nth-child(3){ grid-column:1 / -1!important; } .wbp-actions{ position:sticky!important; bottom:8px!important; left:auto!important; right:auto!important; grid-template-columns:1fr 1fr!important; } .wbp-editor-shell.is-field-editing .wbp-actions{ position:static!important; bottom:auto!important; } } /* v2.9.2 final rail cleanup: exact asset icons only on narrow simple rails. */ @media(max-width:720px){ .wbp-editor .wbp-editor-shell:not(.is-popup) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card b, .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card b{ display:none!important; } .wbp-editor .wbp-editor-shell:not(.is-popup) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card__icon, .wbp-editor .wbp-editor-shell:not(.is-popup) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card__icon img, .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card__icon, .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card__icon img{ width:32px!important; height:32px!important; } } /* v3.0.2 final authority: short landscape controls show only what fits. */ @media(max-height:520px) and (orientation:landscape){ .wbp-editor .wbp-editor-shell.is-popup.is-advanced{ grid-template-rows:46px minmax(0,1fr) 142px!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-grid label:has(#advancedMusicSelect), .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-grid label:has(#advancedFont), .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-grid label:has(#advancedTextColor), .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-grid label:has(#advancedFontSize){ display:none!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-grid{ grid-template-columns:2fr 1fr 1fr!important; padding:8px 10px 46px!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-message-field{ grid-column:1!important; grid-row:1 / 3!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-grid label:has(#advancedBackgroundSelect){ grid-column:2!important; grid-row:1!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-grid label:has(#advancedPhraseSelect){ grid-column:3!important; grid-row:1!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-actions{ justify-self:end!important; align-self:end!important; margin:0 10px 8px 0!important; padding:0!important; background:#fff!important; border-radius:12px!important; } } /* v3.0.2 final authority: short landscape controls show only what fits. */ @media(max-height:520px) and (orientation:landscape){ .wbp-editor .wbp-editor-shell.is-popup.is-advanced{ grid-template-rows:46px minmax(0,1fr) 142px!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-grid label:has(#advancedMusicSelect), .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-grid label:has(#advancedFont), .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-grid label:has(#advancedTextColor), .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-grid label:has(#advancedFontSize){ display:none!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-grid{ grid-template-columns:2fr 1fr 1fr!important; padding:8px 10px 46px!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-message-field{ grid-column:1!important; grid-row:1 / 3!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-grid label:has(#advancedBackgroundSelect){ grid-column:2!important; grid-row:1!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-grid label:has(#advancedPhraseSelect){ grid-column:3!important; grid-row:1!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-actions{ justify-self:end!important; align-self:end!important; margin:0 10px 8px 0!important; padding:0!important; background:#fff!important; border-radius:12px!important; } } /* v2.9: exact Candela/Wishi asset pack integration. */ .wbp-editor .wbp-nav-btn img, .wbp-editor .wbp-compact-fullscreen img, .wbp-editor .wbp-compact-advanced img, .wbp-editor .wbp-btn__asset, .wbp-editor .wbp-btn__crown, .wbp-editor .wbp-tool-card__icon img, .wbp-editor .wbp-advanced-tool > span img{ display:block!important; width:100%!important; height:100%!important; object-fit:contain!important; pointer-events:none!important; user-select:none!important; } .wbp-editor .wbp-nav-btn{ color:inherit!important; overflow:hidden!important; } .wbp-editor .wbp-nav-btn img{ width:34px!important; height:34px!important; } .wbp-editor .wbp-preview-tools.wbp-simple-tools .wbp-tool-card__icon{ background:transparent!important; box-shadow:none!important; color:inherit!important; overflow:visible!important; } .wbp-editor .wbp-preview-tools.wbp-simple-tools .wbp-tool-card__icon::before, .wbp-editor .wbp-preview-tools.wbp-simple-tools .wbp-tool-card__icon::after{ content:none!important; display:none!important; } .wbp-editor .wbp-preview-tools.wbp-simple-tools .wbp-tool-card__icon img{ filter:drop-shadow(0 10px 16px rgba(73,24,119,.13))!important; transform:scale(1.14)!important; } .wbp-editor .wbp-preview-tools.wbp-simple-tools #quickMusicVisual{ background:transparent!important; } .wbp-editor .wbp-advanced-tool > span{ background:transparent!important; box-shadow:none!important; border:0!important; overflow:visible!important; } .wbp-editor .wbp-advanced-tool > span img{ filter:drop-shadow(0 9px 13px rgba(74,24,116,.13))!important; } .wbp-editor .wbp-compact-advanced img{ width:30px!important; height:30px!important; flex:0 0 30px!important; } .wbp-editor .wbp-compact-fullscreen img{ width:30px!important; height:30px!important; } .wbp-editor .wbp-btn__asset{ width:34px!important; height:34px!important; flex:0 0 34px!important; margin-right:2px!important; filter:drop-shadow(0 5px 8px rgba(38,16,67,.14))!important; } .wbp-editor .wbp-btn__crown{ width:30px!important; height:22px!important; flex:0 0 30px!important; margin-left:0!important; filter:drop-shadow(0 4px 7px rgba(38,16,67,.13))!important; } .wbp-editor .wbp-wishi-decor{ object-fit:contain!important; filter:drop-shadow(0 18px 22px rgba(73,24,119,.14))!important; } @media(max-width:720px){ .wbp-editor .wbp-nav-btn img{ width:30px!important; height:30px!important; } .wbp-editor .wbp-compact-advanced img, .wbp-editor .wbp-compact-fullscreen img{ width:26px!important; height:26px!important; } .wbp-editor .wbp-btn__asset{ width:29px!important; height:29px!important; flex-basis:29px!important; } .wbp-editor .wbp-btn__crown{ width:25px!important; height:18px!important; flex-basis:25px!important; } } @media(max-width:380px){ .wbp-editor .wbp-compact-advanced img, .wbp-editor .wbp-compact-fullscreen img{ width:24px!important; height:24px!important; } .wbp-editor .wbp-btn__asset{ width:26px!important; height:26px!important; flex-basis:26px!important; } } /* v2.9.1: keep exact icon assets from covering the button labels on narrow rails. */ .wbp-editor .wbp-preview-tools.wbp-simple-tools .wbp-tool-card{ align-items:center!important; justify-content:center!important; } .wbp-editor .wbp-preview-tools.wbp-simple-tools .wbp-tool-card__icon img{ transform:none!important; } .wbp-editor .wbp-preview-tools.wbp-simple-tools .wbp-tool-card b{ position:relative!important; z-index:2!important; margin-top:2px!important; } @media(max-width:720px){ .wbp-editor .wbp-editor-shell:not(.is-popup) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card__icon, .wbp-editor .wbp-editor-shell:not(.is-popup) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card__icon img, .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card__icon, .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card__icon img{ width:24px!important; height:24px!important; } .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card{ gap:6px!important; } .wbp-editor .wbp-editor-shell:not(.is-popup) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card b, .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card b{ display:none!important; } } @media(max-width:380px){ .wbp-editor .wbp-editor-shell:not(.is-popup) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card__icon, .wbp-editor .wbp-editor-shell:not(.is-popup) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card__icon img, .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card__icon, .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card__icon img{ width:22px!important; height:22px!important; } } /* v0.9.19: measured action bar release in mobile portrait. */ @media(max-width:767px) and (orientation:portrait){ .wbp-editor{ padding-bottom:24px!important; } .wbp-actions{ position:static!important; left:auto!important; right:auto!important; bottom:auto!important; grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important; max-width:100%!important; opacity:0!important; visibility:hidden!important; pointer-events:none!important; transform:translateY(12px)!important; transition:opacity .4s ease, transform .4s ease, visibility .4s step-end!important; } .wbp-actions .wbp-btn{ min-width:0!important; width:100%!important; padding:8px 10px!important; line-height:1.12!important; text-align:center!important; white-space:normal!important; overflow-wrap:anywhere!important; } .wbp-editor-shell.is-action-docked{ padding-bottom:calc(94px + env(safe-area-inset-bottom,0px))!important; } .wbp-editor-shell.is-action-docked .wbp-actions{ position:fixed!important; left:var(--wbp-action-left,10px)!important; right:auto!important; width:var(--wbp-action-width,calc(100vw - 20px))!important; max-width:var(--wbp-action-width,calc(100vw - 20px))!important; bottom:calc(8px + env(safe-area-inset-bottom,0px))!important; z-index:950!important; opacity:1!important; visibility:visible!important; pointer-events:auto!important; transform:none!important; transition:opacity .4s ease, transform .4s ease!important; } .wbp-editor-shell.is-action-released{ padding-bottom:8px!important; } .wbp-editor-shell.is-action-released .wbp-actions{ position:static!important; left:auto!important; right:auto!important; bottom:auto!important; width:var(--wbp-action-width,100%)!important; max-width:var(--wbp-action-width,100%)!important; margin-left:var(--wbp-action-release-shift,0)!important; margin-right:0!important; opacity:1!important; visibility:visible!important; pointer-events:auto!important; transform:none!important; transition:opacity .4s ease, transform .4s ease!important; } .wbp-editor-shell.is-field-editing.is-action-docked .wbp-actions, .wbp-editor-shell.is-field-editing.is-action-released .wbp-actions{ opacity:1!important; visibility:visible!important; pointer-events:auto!important; } .wbp-editor-shell.is-action-measuring .wbp-actions{ visibility:hidden!important; pointer-events:none!important; transition:none!important; } .wbp-editor-shell.is-action-positioning .wbp-actions{ transition:none!important; } } /* v0.9.10: preview area never shows side selectors again. */ .wbp-editor-shell .wbp-preview-layout, .wbp-editor-shell.is-advanced .wbp-preview-layout, .wbp-editor-shell.is-popup .wbp-preview-layout{ grid-template-columns:minmax(0,1fr)!important; } .wbp-editor-shell .wbp-template-strip, .wbp-editor-shell.is-advanced .wbp-template-strip, .wbp-editor-shell.is-popup .wbp-template-strip, .wbp-editor-shell .wbp-audio-strip, .wbp-editor-shell.is-advanced .wbp-audio-strip, .wbp-editor-shell.is-popup .wbp-audio-strip{ display:none!important; visibility:hidden!important; pointer-events:none!important; } @media(max-width:767px) and (orientation:portrait){ .wbp-actions{ transform:translateY(16px)!important; } .wbp-editor-shell.is-action-docked .wbp-actions, .wbp-editor-shell.is-action-released .wbp-actions{ transform:none!important; } } /* v0.9.12: simple mode edits preview text directly; movement stays advanced-only. */ .wbp-editor-shell:not(.is-advanced) .wbp-draggable{ cursor:text!important; } .wbp-editor-shell:not(.is-advanced) .wbp-draggable .wbp-element-content{ cursor:text!important; pointer-events:auto!important; } .wbp-editor-shell:not(.is-advanced) .wbp-draggable.selected::before, .wbp-editor-shell:not(.is-advanced) .wbp-draggable.selected .wbp-handle{ display:none!important; } /* v0.9.26: proportional mobile preview, editor-width actions and stable text focus. */ @media(max-width:767px) and (orientation:portrait){ .wbp-editor-shell .wbp-stage-label{ display:none!important; } .wbp-stage-placeholder{ display:none!important; } .wbp-editor-shell.is-preview-fixed .wbp-stage-placeholder, .wbp-editor-shell.is-preview-end .wbp-stage-placeholder{ display:block!important; height:var(--wbp-stage-height,0px)!important; } .wbp-editor-shell.is-preview-fixed .wbp-stage-panel{ position:fixed!important; top:0!important; left:var(--wbp-stage-fixed-left,10px)!important; width:var(--wbp-stage-fixed-width,calc(100vw - 20px))!important; height:var(--wbp-stage-height,33dvh)!important; padding:7px!important; overflow:hidden!important; box-shadow:0 14px 28px rgba(34,27,47,.14)!important; z-index:920!important; } .wbp-editor-shell.is-preview-end .wbp-stage-panel{ display:none!important; } .wbp-editor-shell.is-preview-fixed .wbp-stage-label, .wbp-editor-shell.is-preview-end .wbp-stage-label{ display:none!important; } .wbp-editor-shell.is-preview-fixed .wbp-preview-layout, .wbp-editor-shell.is-preview-end .wbp-preview-layout{ height:100%!important; } .wbp-editor-shell.is-preview-fixed .wbp-video-container, .wbp-editor-shell.is-preview-end .wbp-video-container{ height:100%!important; width:auto!important; max-width:100%!important; margin:0 auto!important; border-radius:16px!important; } .wbp-editor-shell.is-preview-fixed .wbp-form-panel{ padding-top:var(--wbp-preview-content-offset,calc(33dvh + 100px))!important; } .wbp-editor-shell.is-preview-shrinking .wbp-form-panel{ padding-top:calc(var(--wbp-preview-content-offset,calc(33dvh + 100px)) + 90px)!important; } .wbp-editor-shell.is-preview-compact .wbp-form-panel{ padding-top:var(--wbp-preview-content-offset,calc(33dvh + 18px))!important; } .wbp-video-container .wbp-draggable{ padding:calc(3px * var(--wbp-preview-scale,1))!important; } .wbp-video-container .wbp-element-content{ border-radius:calc(9px * var(--wbp-preview-scale,1))!important; } .wbp-video-container .wbp-element-content:focus{ box-shadow:0 0 0 calc(3px * var(--wbp-preview-scale,1)) rgba(255,255,255,.52)!important; } .wbp-video-container .wbp-mensaje{ padding:calc(10px * var(--wbp-preview-scale,1)) calc(16px * var(--wbp-preview-scale,1))!important; border-radius:calc(15px * var(--wbp-preview-scale,1))!important; } } /* v0.9.31: mobile landscape keeps the full preview visible and gives the rest to controls. */ @media(max-width:900px) and (orientation:landscape){ .wbp-editor-shell{ display:grid!important; grid-template-columns:minmax(190px,.72fr) minmax(0,1.28fr)!important; gap:10px!important; padding:8px!important; align-items:stretch!important; min-height:calc(100dvh - 16px)!important; max-height:calc(100dvh - 16px)!important; overflow:hidden!important; } .wbp-editor-shell .wbp-popup-title{ display:none!important; } .wbp-editor-shell .wbp-stage-panel{ grid-column:1!important; grid-row:1!important; padding:8px!important; position:relative!important; height:calc(100dvh - 32px)!important; min-height:0!important; overflow:hidden!important; } .wbp-editor-shell .wbp-form-panel{ grid-column:2!important; grid-row:1!important; padding:8px!important; height:calc(100dvh - 32px)!important; min-height:0!important; overflow:auto!important; -webkit-overflow-scrolling:touch!important; } .wbp-editor-shell .wbp-stage-label{ display:none!important; } .wbp-editor-shell .wbp-preview-layout{ height:100%!important; min-height:0!important; } .wbp-editor-shell .wbp-video-container{ height:100%!important; width:auto!important; max-width:100%!important; max-height:100%!important; margin:0 auto!important; } .wbp-editor-shell .wbp-form-grid{ gap:8px!important; } .wbp-editor-shell .wbp-actions{ position:static!important; width:100%!important; margin:10px 0 0!important; opacity:1!important; visibility:visible!important; pointer-events:auto!important; } } /* v0.9.52: smooth native scrolling. No JS-fixed preview on touch layouts. */ @media(max-width:1024px){ body.wbp-popup-open{ overflow:auto!important; touch-action:auto!important; overscroll-behavior:auto!important; } .wbp-editor, .wbp-editor-shell, .wbp-editor-shell.is-popup{ height:auto!important; max-height:none!important; min-height:0!important; overflow:visible!important; } .wbp-editor-shell{ display:block!important; position:relative!important; } .wbp-editor-shell .wbp-stage-placeholder, .wbp-editor-shell.is-preview-fixed .wbp-stage-placeholder, .wbp-editor-shell.is-preview-end .wbp-stage-placeholder{ display:none!important; height:0!important; } .wbp-editor-shell .wbp-stage-panel, .wbp-editor-shell.is-preview-fixed .wbp-stage-panel, .wbp-editor-shell.is-preview-end .wbp-stage-panel{ position:sticky!important; top:0!important; bottom:auto!important; left:auto!important; right:auto!important; width:100%!important; height:auto!important; min-height:0!important; max-height:none!important; z-index:30!important; overflow:visible!important; transform:none!important; } .wbp-editor-shell .wbp-form-panel, .wbp-editor-shell .wbp-controls-scroll{ height:auto!important; max-height:none!important; min-height:0!important; overflow:visible!important; overscroll-behavior:auto!important; } .wbp-editor-shell.is-preview-fixed .wbp-form-panel, .wbp-editor-shell.is-preview-shrinking .wbp-form-panel, .wbp-editor-shell.is-preview-compact .wbp-form-panel{ padding-top:14px!important; } } @media(max-width:767px) and (orientation:portrait){ .wbp-editor-shell .wbp-popup-title{ display:none!important; } .wbp-editor-shell .wbp-stage-panel, .wbp-editor-shell.is-preview-fixed .wbp-stage-panel, .wbp-editor-shell.is-preview-end .wbp-stage-panel{ padding:8px 10px!important; border:0!important; border-radius:0!important; box-shadow:0 8px 22px rgba(34,27,47,.13)!important; background:linear-gradient(180deg,#fff,#fbf7ff)!important; } .wbp-editor-shell .wbp-stage-label{ display:none!important; } .wbp-editor-shell .wbp-preview-layout, .wbp-editor-shell.is-preview-fixed .wbp-preview-layout, .wbp-editor-shell.is-preview-end .wbp-preview-layout{ display:flex!important; align-items:center!important; justify-content:center!important; width:100%!important; height:33dvh!important; min-height:320px!important; max-height:440px!important; overflow:hidden!important; } .wbp-editor-shell .wbp-video-container, .wbp-editor-shell.is-preview-fixed .wbp-video-container, .wbp-editor-shell.is-preview-end .wbp-video-container{ width:auto!important; height:100%!important; max-width:100%!important; max-height:100%!important; margin:0 auto!important; border-radius:14px!important; aspect-ratio:var(--preview-aspect,9/16)!important; touch-action:pan-y!important; } .wbp-editor-shell:not(.is-advanced) .wbp-draggable, .wbp-editor-shell:not(.is-advanced) .wbp-element-content{ touch-action:pan-y!important; } .wbp-editor-shell.is-advanced .wbp-video-container, .wbp-editor-shell.is-advanced .wbp-draggable{ touch-action:none!important; } .wbp-editor-shell .wbp-form-panel{ display:block!important; padding:14px 12px 0!important; border:0!important; border-radius:0!important; box-shadow:none!important; background:#fff!important; } .wbp-editor-shell .wbp-actions, .wbp-editor-shell.is-action-docked .wbp-actions, .wbp-editor-shell.is-action-released .wbp-actions, .wbp-editor-shell.is-field-editing .wbp-actions{ position:sticky!important; bottom:0!important; z-index:35!important; width:calc(100% + 24px)!important; max-width:none!important; margin:0 -12px!important; padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px))!important; background:rgba(255,255,255,.97)!important; border-top:1px solid rgba(123,43,167,.10)!important; box-shadow:0 -12px 26px rgba(34,27,47,.10)!important; opacity:1!important; visibility:visible!important; pointer-events:auto!important; transform:none!important; } } @media(max-width:340px) and (orientation:portrait){ .wbp-editor-shell .wbp-preview-layout, .wbp-editor-shell.is-preview-fixed .wbp-preview-layout, .wbp-editor-shell.is-preview-end .wbp-preview-layout{ height:33dvh!important; min-height:290px!important; } } /* v0.9.51: compact pinned preview keeps the full card visible while editing. */ @media(max-width:1024px){ .wbp-editor-shell.is-preview-fixed .wbp-stage-panel, .wbp-editor-shell.is-preview-end .wbp-stage-panel{ height:var(--wbp-stage-height,auto)!important; overflow:hidden!important; } .wbp-editor-shell.is-preview-fixed .wbp-preview-layout, .wbp-editor-shell.is-preview-end .wbp-preview-layout{ height:calc(var(--wbp-stage-height,280px) - 16px)!important; min-height:0!important; max-height:none!important; } .wbp-editor-shell.is-preview-fixed .wbp-video-container, .wbp-editor-shell.is-preview-end .wbp-video-container{ width:auto!important; height:100%!important; max-width:100%!important; max-height:100%!important; object-fit:contain!important; } } @media(max-width:767px) and (orientation:portrait){ .wbp-editor-shell:not(.is-preview-fixed):not(.is-preview-end) .wbp-preview-layout{ height:clamp(360px,60dvh,520px)!important; min-height:360px!important; } .wbp-editor-shell.is-preview-fixed .wbp-stage-panel, .wbp-editor-shell.is-preview-end .wbp-stage-panel{ padding:6px 10px!important; } .wbp-editor-shell.is-preview-fixed .wbp-preview-layout, .wbp-editor-shell.is-preview-end .wbp-preview-layout{ height:calc(var(--wbp-stage-height,210px) - 12px)!important; } } /* v0.9.50 JS-pinned preview state. */ @media(max-width:1024px){ .wbp-editor-shell.is-preview-fixed .wbp-stage-placeholder, .wbp-editor-shell.is-preview-end .wbp-stage-placeholder{ display:block!important; } .wbp-editor-shell.is-preview-fixed .wbp-stage-panel{ position:fixed!important; top:0!important; left:var(--wbp-stage-fixed-left,0)!important; width:var(--wbp-stage-fixed-width,100vw)!important; height:var(--wbp-stage-height,auto)!important; z-index:40!important; } .wbp-editor-shell.is-preview-end .wbp-stage-panel{ position:absolute!important; top:auto!important; bottom:0!important; left:0!important; width:100%!important; height:var(--wbp-stage-height,auto)!important; z-index:20!important; } } /* v0.9.50 high-specificity guard against older mobile layers below. */ @media(max-width:767px) and (orientation:portrait){ .wbp-editor .wbp-editor-shell, .wbp-editor .wbp-editor-shell.is-popup{ display:block!important; height:auto!important; max-height:none!important; overflow:visible!important; } .wbp-editor .wbp-editor-shell .wbp-stage-panel{ position:relative!important; height:auto!important; min-height:0!important; max-height:none!important; } .wbp-editor .wbp-editor-shell.is-preview-fixed .wbp-stage-panel{ position:fixed!important; top:0!important; left:var(--wbp-stage-fixed-left,0)!important; width:var(--wbp-stage-fixed-width,100vw)!important; height:var(--wbp-stage-height,auto)!important; } .wbp-editor .wbp-editor-shell.is-preview-end .wbp-stage-panel{ position:absolute!important; top:auto!important; bottom:0!important; left:0!important; width:100%!important; height:var(--wbp-stage-height,auto)!important; } .wbp-editor .wbp-editor-shell .wbp-form-panel, .wbp-editor .wbp-editor-shell .wbp-controls-scroll{ height:auto!important; max-height:none!important; overflow:visible!important; } } /* v0.9.50: final overrides placed after legacy mobile layers. */ @media(max-width:767px) and (orientation:portrait){ body.wbp-popup-open{ overflow:auto!important; touch-action:auto!important; overscroll-behavior:auto!important; } .wbp-editor{ width:100%!important; max-width:100%!important; margin:0 auto 28px!important; padding:0!important; overflow:visible!important; } .wbp-editor-shell, .wbp-editor-shell.is-popup{ display:block!important; width:100%!important; min-height:0!important; height:auto!important; max-height:none!important; padding:0!important; overflow:visible!important; border:0!important; border-radius:0!important; box-shadow:none!important; background:#fff!important; cursor:default!important; } .wbp-editor-shell .wbp-popup-title, .wbp-editor-shell .wbp-stage-placeholder{ display:none!important; } .wbp-editor-shell .wbp-stage-panel, .wbp-editor-shell.is-preview-fixed .wbp-stage-panel, .wbp-editor-shell.is-preview-end .wbp-stage-panel{ position:sticky!important; top:0!important; left:auto!important; right:auto!important; z-index:20!important; display:block!important; width:100%!important; height:auto!important; min-height:0!important; max-height:none!important; padding:8px 10px!important; overflow:visible!important; border:0!important; border-radius:0!important; box-shadow:0 8px 22px rgba(34,27,47,.13)!important; background:linear-gradient(180deg,#fff,#fbf7ff)!important; } .wbp-editor-shell .wbp-stage-label{ display:none!important; } .wbp-editor-shell .wbp-preview-layout, .wbp-editor-shell.is-popup .wbp-preview-layout{ display:flex!important; align-items:center!important; justify-content:center!important; width:100%!important; height:clamp(260px,42dvh,390px)!important; min-height:260px!important; overflow:hidden!important; } .wbp-editor-shell .wbp-video-container, .wbp-editor-shell.is-popup .wbp-video-container{ width:auto!important; height:100%!important; max-width:100%!important; max-height:100%!important; margin:0 auto!important; border-radius:14px!important; aspect-ratio:var(--preview-aspect,9/16)!important; touch-action:pan-y!important; } .wbp-editor-shell:not(.is-advanced) .wbp-draggable, .wbp-editor-shell:not(.is-advanced) .wbp-element-content{ touch-action:pan-y!important; } .wbp-editor-shell.is-advanced .wbp-video-container, .wbp-editor-shell.is-advanced .wbp-draggable{ touch-action:none!important; } .wbp-editor-shell .wbp-form-panel{ display:block!important; height:auto!important; min-height:0!important; max-height:none!important; overflow:visible!important; padding:14px 12px 0!important; border:0!important; border-radius:0!important; box-shadow:none!important; background:#fff!important; } .wbp-editor-shell .wbp-form-panel::after{ display:none!important; } .wbp-editor-shell .wbp-controls-scroll{ display:block!important; height:auto!important; max-height:none!important; min-height:0!important; overflow:visible!important; padding:0 0 12px!important; } .wbp-editor-shell .wbp-simple-tools{ position:static!important; width:100%!important; max-width:100%!important; margin:0 0 12px!important; grid-template-columns:repeat(4,minmax(0,1fr))!important; gap:8px!important; } .wbp-editor-shell .wbp-tool-card{ width:100%!important; min-width:0!important; aspect-ratio:1/1!important; } .wbp-editor-shell .wbp-form-grid{ gap:11px!important; } .wbp-editor-shell .wbp-field input, .wbp-editor-shell .wbp-field textarea, .wbp-editor-shell .wbp-age-control, .wbp-editor-shell .wbp-advanced-panel, .wbp-editor-shell .wbp-status, .wbp-editor-shell .wbp-progress{ max-width:100%!important; } .wbp-editor-shell .wbp-field textarea{ min-height:92px!important; } .wbp-editor-shell .wbp-actions, .wbp-editor-shell.is-action-docked .wbp-actions, .wbp-editor-shell.is-action-released .wbp-actions, .wbp-editor-shell.is-field-editing .wbp-actions{ position:sticky!important; left:auto!important; right:auto!important; bottom:0!important; z-index:30!important; display:grid!important; grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important; gap:8px!important; width:calc(100% + 24px)!important; max-width:none!important; margin:0 -12px!important; padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px))!important; background:rgba(255,255,255,.97)!important; border-top:1px solid rgba(123,43,167,.10)!important; box-shadow:0 -12px 26px rgba(34,27,47,.10)!important; opacity:1!important; visibility:visible!important; pointer-events:auto!important; transform:none!important; transition:none!important; } .wbp-editor-shell .wbp-actions .wbp-btn{ min-width:0!important; width:100%!important; min-height:46px!important; padding:8px 9px!important; white-space:normal!important; overflow-wrap:anywhere!important; line-height:1.12!important; font-size:.88rem!important; } .wbp-editor-shell.is-field-editing .wbp-actions{ position:static!important; margin-top:8px!important; box-shadow:none!important; } .wbp-editor-shell.is-preview-fixed .wbp-form-panel, .wbp-editor-shell.is-preview-shrinking .wbp-form-panel, .wbp-editor-shell.is-preview-compact .wbp-form-panel{ padding-top:14px!important; } } /* v0.9.49: professional mobile flow. Native document scroll drives the editor; preview stays useful without JS-driven shrinking. */ @media(max-width:767px) and (orientation:portrait){ body.wbp-popup-open{ overflow:auto!important; touch-action:auto!important; overscroll-behavior:auto!important; } .wbp-editor{ width:100%!important; max-width:100%!important; margin:0 auto 28px!important; padding:0!important; } .wbp-editor-shell, .wbp-editor-shell.is-popup{ display:block!important; width:100%!important; min-height:0!important; height:auto!important; max-height:none!important; padding:0!important; overflow:visible!important; border:0!important; border-radius:0!important; box-shadow:none!important; background:#fff!important; cursor:default!important; } .wbp-editor-shell .wbp-popup-title, .wbp-editor-shell .wbp-stage-placeholder{ display:none!important; } .wbp-editor-shell .wbp-stage-panel{ position:sticky!important; top:0!important; left:auto!important; right:auto!important; z-index:20!important; width:100%!important; height:auto!important; min-height:0!important; max-height:none!important; padding:8px 10px!important; overflow:visible!important; border:0!important; border-radius:0!important; box-shadow:0 8px 22px rgba(34,27,47,.13)!important; background:linear-gradient(180deg,#fff,#fbf7ff)!important; } .wbp-editor-shell .wbp-stage-label{ display:none!important; } .wbp-editor-shell .wbp-preview-layout, .wbp-editor-shell.is-popup .wbp-preview-layout{ display:flex!important; align-items:center!important; justify-content:center!important; width:100%!important; height:clamp(260px,42dvh,390px)!important; min-height:260px!important; overflow:hidden!important; } .wbp-editor-shell .wbp-video-container, .wbp-editor-shell.is-popup .wbp-video-container{ width:auto!important; height:100%!important; max-width:100%!important; max-height:100%!important; margin:0 auto!important; border-radius:14px!important; aspect-ratio:var(--preview-aspect,9/16)!important; touch-action:pan-y!important; } .wbp-editor-shell.is-advanced .wbp-video-container{ touch-action:none!important; } .wbp-editor-shell:not(.is-advanced) .wbp-draggable, .wbp-editor-shell:not(.is-advanced) .wbp-element-content{ touch-action:pan-y!important; } .wbp-editor-shell.is-advanced .wbp-draggable{ touch-action:none!important; } .wbp-editor-shell .wbp-form-panel{ display:block!important; height:auto!important; min-height:0!important; max-height:none!important; overflow:visible!important; padding:14px 12px 0!important; border:0!important; border-radius:0!important; box-shadow:none!important; background:#fff!important; } .wbp-editor-shell .wbp-form-panel::after{ display:none!important; } .wbp-editor-shell .wbp-controls-scroll{ display:block!important; height:auto!important; max-height:none!important; min-height:0!important; overflow:visible!important; padding:0 0 12px!important; } .wbp-editor-shell .wbp-simple-tools{ position:static!important; width:100%!important; max-width:100%!important; margin:0 0 12px!important; grid-template-columns:repeat(4,minmax(0,1fr))!important; gap:8px!important; } .wbp-editor-shell .wbp-tool-card{ width:100%!important; min-width:0!important; aspect-ratio:1/1!important; } .wbp-editor-shell .wbp-form-grid{ gap:11px!important; } .wbp-editor-shell .wbp-field input, .wbp-editor-shell .wbp-field textarea, .wbp-editor-shell .wbp-age-control, .wbp-editor-shell .wbp-advanced-panel, .wbp-editor-shell .wbp-status, .wbp-editor-shell .wbp-progress{ max-width:100%!important; } .wbp-editor-shell .wbp-field textarea{ min-height:92px!important; } .wbp-editor-shell .wbp-actions, .wbp-editor-shell.is-action-docked .wbp-actions, .wbp-editor-shell.is-action-released .wbp-actions, .wbp-editor-shell.is-field-editing .wbp-actions{ position:sticky!important; left:auto!important; right:auto!important; bottom:0!important; z-index:30!important; display:grid!important; grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important; gap:8px!important; width:calc(100% + 24px)!important; max-width:none!important; margin:0 -12px!important; padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px))!important; background:rgba(255,255,255,.97)!important; border-top:1px solid rgba(123,43,167,.10)!important; box-shadow:0 -12px 26px rgba(34,27,47,.10)!important; opacity:1!important; visibility:visible!important; pointer-events:auto!important; transform:none!important; transition:none!important; } .wbp-editor-shell .wbp-actions .wbp-btn{ min-width:0!important; width:100%!important; min-height:46px!important; padding:8px 9px!important; white-space:normal!important; overflow-wrap:anywhere!important; line-height:1.12!important; font-size:.88rem!important; } .wbp-editor-shell.is-field-editing .wbp-actions{ position:static!important; margin-top:8px!important; box-shadow:none!important; } .wbp-editor-shell.is-preview-fixed .wbp-stage-panel, .wbp-editor-shell.is-preview-end .wbp-stage-panel{ position:sticky!important; top:0!important; width:100%!important; height:auto!important; } .wbp-editor-shell.is-preview-fixed .wbp-form-panel, .wbp-editor-shell.is-preview-shrinking .wbp-form-panel, .wbp-editor-shell.is-preview-compact .wbp-form-panel{ padding-top:14px!important; } } @media(max-width:380px) and (orientation:portrait){ .wbp-editor-shell .wbp-preview-layout, .wbp-editor-shell.is-popup .wbp-preview-layout{ height:clamp(236px,39dvh,340px)!important; min-height:236px!important; } .wbp-editor-shell .wbp-actions .wbp-btn{ font-size:.8rem!important; padding-inline:7px!important; } } @media(min-width:768px) and (max-width:1024px){ .wbp-editor-shell{ grid-template-columns:minmax(0,1fr)!important; gap:16px!important; overflow:visible!important; } .wbp-editor-shell .wbp-stage-panel{ position:sticky!important; top:0!important; z-index:12!important; } .wbp-editor-shell .wbp-preview-layout{ height:min(52dvh,520px)!important; display:flex!important; align-items:center!important; justify-content:center!important; overflow:hidden!important; } .wbp-editor-shell .wbp-video-container{ width:auto!important; height:100%!important; max-width:100%!important; } .wbp-editor-shell .wbp-form-panel{ overflow:visible!important; } .wbp-editor-shell .wbp-actions{ position:sticky!important; bottom:0!important; z-index:14!important; background:rgba(255,255,255,.97)!important; padding:10px 0 calc(10px + env(safe-area-inset-bottom,0px))!important; } } /* v0.9.33: final responsive guardrails for desktop, tablet and mobile. */ @media(min-width:901px){ .wbp-editor-shell{ grid-template-columns:minmax(360px,.92fr) minmax(420px,1.08fr)!important; grid-template-rows:auto auto!important; align-items:start!important; } .wbp-editor-shell .wbp-popup-title{ grid-column:1 / -1!important; grid-row:1!important; } .wbp-editor-shell .wbp-form-panel{ grid-column:1!important; grid-row:2!important; align-self:start!important; } .wbp-editor-shell .wbp-stage-panel{ grid-column:2!important; grid-row:2!important; align-self:start!important; } .wbp-editor-shell .wbp-preview-layout{ display:flex!important; justify-content:center!important; } .wbp-editor-shell .wbp-video-container{ width:auto!important; height:min(70dvh,670px)!important; max-width:100%!important; margin:0 auto!important; aspect-ratio:var(--preview-aspect,9/16)!important; } } @media(min-width:768px) and (max-width:900px) and (orientation:portrait){ .wbp-editor-shell{ grid-template-columns:1fr!important; align-items:start!important; } .wbp-editor-shell .wbp-popup-title, .wbp-editor-shell .wbp-stage-panel, .wbp-editor-shell .wbp-form-panel{ grid-column:1!important; width:100%!important; } .wbp-editor-shell .wbp-stage-label{ display:none!important; } .wbp-editor-shell .wbp-preview-layout{ display:flex!important; justify-content:center!important; height:auto!important; } .wbp-editor-shell .wbp-video-container{ width:auto!important; height:min(62dvh,640px)!important; max-width:100%!important; margin:0 auto!important; aspect-ratio:var(--preview-aspect,9/16)!important; } .wbp-editor-shell .wbp-form-panel{ overflow:visible!important; max-height:none!important; } .wbp-editor-shell .wbp-actions{ position:static!important; width:100%!important; margin:12px 0 0!important; opacity:1!important; visibility:visible!important; pointer-events:auto!important; } } @media(min-width:768px) and (max-width:900px) and (orientation:landscape){ .wbp-editor-shell{ grid-template-columns:minmax(190px,.72fr) minmax(0,1.28fr)!important; grid-template-rows:1fr!important; } .wbp-editor-shell .wbp-stage-panel{ grid-column:1!important; grid-row:1!important; } .wbp-editor-shell .wbp-form-panel{ grid-column:2!important; grid-row:1!important; } } /* v0.9.45: mobile portrait returns to a bounded editor viewport. The document no longer drives preview shrinking; controls scroll inside the editor. */ @media(max-width:767px) and (orientation:portrait){ .wbp-editor{ width:100%!important; max-width:100%!important; margin:0 auto 32px!important; padding:0!important; } .wbp-editor-shell{ display:grid!important; grid-template-columns:1fr!important; grid-template-rows:33dvh minmax(0,67dvh)!important; height:100dvh!important; min-height:100dvh!important; max-height:100dvh!important; gap:0!important; padding:0!important; overflow:hidden!important; border:0!important; border-radius:0!important; box-shadow:none!important; background:#fff!important; cursor:default!important; } .wbp-editor-shell .wbp-popup-title, .wbp-editor-shell .wbp-stage-placeholder{ display:none!important; } .wbp-editor-shell .wbp-stage-panel{ grid-column:1!important; grid-row:1!important; position:relative!important; inset:auto!important; width:100%!important; height:33dvh!important; min-height:33dvh!important; max-height:33dvh!important; padding:8px!important; overflow:hidden!important; border:0!important; border-radius:0!important; box-shadow:0 8px 22px rgba(34,27,47,.12)!important; z-index:2!important; } .wbp-editor-shell .wbp-stage-label{ display:none!important; } .wbp-editor-shell .wbp-preview-layout{ display:flex!important; align-items:center!important; justify-content:center!important; width:100%!important; height:100%!important; min-height:0!important; overflow:hidden!important; } .wbp-editor-shell .wbp-video-container{ width:auto!important; height:100%!important; max-width:100%!important; max-height:100%!important; margin:0 auto!important; border-radius:14px!important; aspect-ratio:var(--preview-aspect,9/16)!important; } .wbp-editor-shell .wbp-form-panel{ grid-column:1!important; grid-row:2!important; height:67dvh!important; min-height:0!important; max-height:67dvh!important; display:grid!important; grid-template-rows:minmax(0,1fr) auto!important; overflow:hidden!important; overflow-x:hidden!important; -webkit-overflow-scrolling:touch!important; overscroll-behavior:contain!important; padding:0!important; border:0!important; border-radius:0!important; box-shadow:none!important; } .wbp-editor-shell .wbp-form-panel::after{ display:none!important; } .wbp-editor-shell .wbp-controls-scroll{ display:block!important; min-height:0!important; overflow-y:auto!important; overflow-x:hidden!important; -webkit-overflow-scrolling:touch!important; padding:12px 12px 14px!important; } .wbp-editor-shell .wbp-simple-tools{ position:static!important; width:100%!important; max-width:100%!important; margin:0 0 12px!important; grid-template-columns:repeat(4,minmax(0,1fr))!important; gap:8px!important; } .wbp-editor-shell .wbp-tool-card{ min-width:0!important; width:100%!important; aspect-ratio:1/1!important; } .wbp-editor-shell .wbp-form-grid{ gap:10px!important; } .wbp-editor-shell .wbp-field input, .wbp-editor-shell .wbp-field textarea{ max-width:100%!important; } .wbp-editor-shell .wbp-actions, .wbp-editor-shell.is-action-docked .wbp-actions, .wbp-editor-shell.is-action-released .wbp-actions, .wbp-editor-shell.is-field-editing .wbp-actions{ position:static!important; left:auto!important; right:auto!important; bottom:auto!important; width:100%!important; max-width:100%!important; margin:0!important; padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px))!important; grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important; gap:8px!important; background:#fff!important; border-top:1px solid rgba(123,43,167,.10)!important; box-shadow:0 -10px 20px rgba(255,255,255,.88)!important; z-index:5!important; opacity:1!important; visibility:visible!important; pointer-events:auto!important; transform:none!important; transition:none!important; } .wbp-editor-shell .wbp-actions .wbp-btn{ min-width:0!important; width:100%!important; padding:8px 10px!important; white-space:normal!important; overflow-wrap:anywhere!important; line-height:1.12!important; } .wbp-editor-shell.is-preview-fixed .wbp-stage-panel, .wbp-editor-shell.is-preview-end .wbp-stage-panel{ position:relative!important; display:block!important; top:auto!important; left:auto!important; width:100%!important; height:33dvh!important; } .wbp-editor-shell.is-preview-fixed .wbp-form-panel, .wbp-editor-shell.is-preview-shrinking .wbp-form-panel, .wbp-editor-shell.is-preview-compact .wbp-form-panel{ padding-top:12px!important; } } @media(max-width:900px) and (orientation:landscape){ .wbp-editor-shell .wbp-form-panel{ display:grid!important; grid-template-rows:minmax(0,1fr) auto!important; overflow:hidden!important; padding:0!important; } .wbp-editor-shell .wbp-controls-scroll{ display:block!important; min-height:0!important; overflow-y:auto!important; overflow-x:hidden!important; -webkit-overflow-scrolling:touch!important; padding:9px!important; } .wbp-editor-shell .wbp-actions{ position:static!important; bottom:auto!important; width:100%!important; max-width:100%!important; margin:0!important; padding:8px 9px!important; background:#fff!important; border-top:1px solid rgba(123,43,167,.10)!important; box-shadow:0 -10px 20px rgba(255,255,255,.88)!important; z-index:5!important; opacity:1!important; visibility:visible!important; pointer-events:auto!important; } } /* v0.9.50 true final mobile/tablet flow override. */ @media(max-width:767px) and (orientation:portrait){ body.wbp-popup-open{overflow:auto!important;touch-action:auto!important;overscroll-behavior:auto!important} .wbp-editor{width:100%!important;max-width:100%!important;margin:0 auto 28px!important;padding:0!important;overflow:visible!important} .wbp-editor-shell,.wbp-editor-shell.is-popup{display:block!important;width:100%!important;min-height:0!important;height:auto!important;max-height:none!important;padding:0!important;overflow:visible!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:#fff!important;cursor:default!important} .wbp-editor-shell .wbp-popup-title,.wbp-editor-shell .wbp-stage-placeholder{display:none!important} .wbp-editor-shell .wbp-stage-panel,.wbp-editor-shell.is-preview-fixed .wbp-stage-panel,.wbp-editor-shell.is-preview-end .wbp-stage-panel{position:sticky!important;top:0!important;left:auto!important;right:auto!important;z-index:20!important;display:block!important;width:100%!important;height:auto!important;min-height:0!important;max-height:none!important;padding:8px 10px!important;overflow:visible!important;border:0!important;border-radius:0!important;box-shadow:0 8px 22px rgba(34,27,47,.13)!important;background:linear-gradient(180deg,#fff,#fbf7ff)!important} .wbp-editor-shell .wbp-stage-label{display:none!important} .wbp-editor-shell .wbp-preview-layout,.wbp-editor-shell.is-popup .wbp-preview-layout{display:flex!important;align-items:center!important;justify-content:center!important;width:100%!important;height:clamp(260px,42dvh,390px)!important;min-height:260px!important;overflow:hidden!important} .wbp-editor-shell .wbp-video-container,.wbp-editor-shell.is-popup .wbp-video-container{width:auto!important;height:100%!important;max-width:100%!important;max-height:100%!important;margin:0 auto!important;border-radius:14px!important;aspect-ratio:var(--preview-aspect,9/16)!important;touch-action:pan-y!important} .wbp-editor-shell:not(.is-advanced) .wbp-draggable,.wbp-editor-shell:not(.is-advanced) .wbp-element-content{touch-action:pan-y!important} .wbp-editor-shell.is-advanced .wbp-video-container,.wbp-editor-shell.is-advanced .wbp-draggable{touch-action:none!important} .wbp-editor-shell .wbp-form-panel{display:block!important;height:auto!important;min-height:0!important;max-height:none!important;overflow:visible!important;padding:14px 12px 0!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:#fff!important} .wbp-editor-shell .wbp-form-panel::after{display:none!important} .wbp-editor-shell .wbp-controls-scroll{display:block!important;height:auto!important;max-height:none!important;min-height:0!important;overflow:visible!important;padding:0 0 12px!important} .wbp-editor-shell .wbp-simple-tools{position:static!important;width:100%!important;max-width:100%!important;margin:0 0 12px!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:8px!important} .wbp-editor-shell .wbp-tool-card{width:100%!important;min-width:0!important;aspect-ratio:1/1!important} .wbp-editor-shell .wbp-form-grid{gap:11px!important} .wbp-editor-shell .wbp-field input,.wbp-editor-shell .wbp-field textarea,.wbp-editor-shell .wbp-age-control,.wbp-editor-shell .wbp-advanced-panel,.wbp-editor-shell .wbp-status,.wbp-editor-shell .wbp-progress{max-width:100%!important} .wbp-editor-shell .wbp-field textarea{min-height:92px!important} .wbp-editor-shell .wbp-actions,.wbp-editor-shell.is-action-docked .wbp-actions,.wbp-editor-shell.is-action-released .wbp-actions,.wbp-editor-shell.is-field-editing .wbp-actions{position:sticky!important;left:auto!important;right:auto!important;bottom:0!important;z-index:30!important;display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:8px!important;width:calc(100% + 24px)!important;max-width:none!important;margin:0 -12px!important;padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px))!important;background:rgba(255,255,255,.97)!important;border-top:1px solid rgba(123,43,167,.10)!important;box-shadow:0 -12px 26px rgba(34,27,47,.10)!important;opacity:1!important;visibility:visible!important;pointer-events:auto!important;transform:none!important;transition:none!important} .wbp-editor-shell .wbp-actions .wbp-btn{min-width:0!important;width:100%!important;min-height:46px!important;padding:8px 9px!important;white-space:normal!important;overflow-wrap:anywhere!important;line-height:1.12!important;font-size:.88rem!important} .wbp-editor-shell.is-field-editing .wbp-actions{position:static!important;margin-top:8px!important;box-shadow:none!important} .wbp-editor-shell.is-preview-fixed .wbp-form-panel,.wbp-editor-shell.is-preview-shrinking .wbp-form-panel,.wbp-editor-shell.is-preview-compact .wbp-form-panel{padding-top:14px!important} } @media(max-width:380px) and (orientation:portrait){ .wbp-editor-shell .wbp-preview-layout,.wbp-editor-shell.is-popup .wbp-preview-layout{height:clamp(236px,39dvh,340px)!important;min-height:236px!important} .wbp-editor-shell .wbp-actions .wbp-btn{font-size:.8rem!important;padding-inline:7px!important} } @media(min-width:768px) and (max-width:1024px){ .wbp-editor-shell{grid-template-columns:minmax(0,1fr)!important;gap:16px!important;overflow:visible!important} .wbp-editor-shell .wbp-stage-panel{position:sticky!important;top:0!important;z-index:12!important} .wbp-editor-shell .wbp-preview-layout{height:min(52dvh,520px)!important;display:flex!important;align-items:center!important;justify-content:center!important;overflow:hidden!important} .wbp-editor-shell .wbp-video-container{width:auto!important;height:100%!important;max-width:100%!important} .wbp-editor-shell .wbp-form-panel{overflow:visible!important} .wbp-editor-shell .wbp-actions{position:sticky!important;bottom:0!important;z-index:14!important;background:rgba(255,255,255,.97)!important;padding:10px 0 calc(10px + env(safe-area-inset-bottom,0px))!important} } /* v0.9.52 final scroll layer: stable CSS-only touch layout. */ @media(max-width:1024px){ body.wbp-popup-open{overflow:auto!important;touch-action:auto!important;overscroll-behavior:auto!important} .wbp-editor,.wbp-editor-shell,.wbp-editor-shell.is-popup{height:auto!important;max-height:none!important;min-height:0!important;overflow:visible!important} .wbp-editor-shell{display:block!important;position:relative!important} .wbp-editor-shell .wbp-stage-placeholder,.wbp-editor-shell.is-preview-fixed .wbp-stage-placeholder,.wbp-editor-shell.is-preview-end .wbp-stage-placeholder{display:none!important;height:0!important} .wbp-editor-shell .wbp-stage-panel,.wbp-editor-shell.is-preview-fixed .wbp-stage-panel,.wbp-editor-shell.is-preview-end .wbp-stage-panel{position:sticky!important;top:0!important;bottom:auto!important;left:auto!important;right:auto!important;width:100%!important;height:auto!important;min-height:0!important;max-height:none!important;z-index:30!important;overflow:visible!important;transform:none!important} .wbp-editor-shell .wbp-form-panel,.wbp-editor-shell .wbp-controls-scroll{height:auto!important;max-height:none!important;min-height:0!important;overflow:visible!important;overscroll-behavior:auto!important} } @media(max-width:767px) and (orientation:portrait){ .wbp-editor-shell .wbp-popup-title{display:none!important} .wbp-editor-shell .wbp-stage-panel,.wbp-editor-shell.is-preview-fixed .wbp-stage-panel,.wbp-editor-shell.is-preview-end .wbp-stage-panel{padding:8px 10px!important;border:0!important;border-radius:0!important;box-shadow:0 8px 22px rgba(34,27,47,.13)!important;background:linear-gradient(180deg,#fff,#fbf7ff)!important} .wbp-editor-shell .wbp-stage-label{display:none!important} .wbp-editor-shell .wbp-preview-layout,.wbp-editor-shell.is-preview-fixed .wbp-preview-layout,.wbp-editor-shell.is-preview-end .wbp-preview-layout{display:flex!important;align-items:center!important;justify-content:center!important;width:100%!important;height:33dvh!important;min-height:320px!important;max-height:440px!important;overflow:hidden!important} .wbp-editor-shell .wbp-video-container,.wbp-editor-shell.is-preview-fixed .wbp-video-container,.wbp-editor-shell.is-preview-end .wbp-video-container{width:auto!important;height:100%!important;max-width:100%!important;max-height:100%!important;margin:0 auto!important;border-radius:14px!important;aspect-ratio:var(--preview-aspect,9/16)!important;touch-action:pan-y!important} .wbp-editor-shell:not(.is-advanced) .wbp-draggable,.wbp-editor-shell:not(.is-advanced) .wbp-element-content{touch-action:pan-y!important} .wbp-editor-shell.is-advanced .wbp-video-container,.wbp-editor-shell.is-advanced .wbp-draggable{touch-action:none!important} .wbp-editor-shell .wbp-form-panel{display:block!important;padding:14px 12px 0!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:#fff!important} .wbp-editor-shell .wbp-actions,.wbp-editor-shell.is-action-docked .wbp-actions,.wbp-editor-shell.is-action-released .wbp-actions,.wbp-editor-shell.is-field-editing .wbp-actions{position:sticky!important;bottom:0!important;z-index:35!important;width:calc(100% + 24px)!important;max-width:none!important;margin:0 -12px!important;padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px))!important;background:rgba(255,255,255,.97)!important;border-top:1px solid rgba(123,43,167,.10)!important;box-shadow:0 -12px 26px rgba(34,27,47,.10)!important;opacity:1!important;visibility:visible!important;pointer-events:auto!important;transform:none!important} } @media(max-width:340px) and (orientation:portrait){ .wbp-editor-shell .wbp-preview-layout,.wbp-editor-shell.is-preview-fixed .wbp-preview-layout,.wbp-editor-shell.is-preview-end .wbp-preview-layout{height:33dvh!important;min-height:290px!important} } /*END_V0952*/ /* v0.9.52 specificity guard: override legacy relative mobile stage. */ @media(max-width:767px) and (orientation:portrait){ .wbp-editor .wbp-editor-shell .wbp-stage-panel, .wbp-editor .wbp-editor-shell.is-preview-fixed .wbp-stage-panel, .wbp-editor .wbp-editor-shell.is-preview-end .wbp-stage-panel{ position:sticky!important; top:0!important; bottom:auto!important; left:auto!important; right:auto!important; width:100%!important; height:auto!important; min-height:0!important; max-height:none!important; z-index:35!important; overflow:visible!important; } } /*END_V0952_SPECIFICITY*/ /* v0.9.53: lightweight fixed mobile preview, without continuous height recalculation. */ @media(max-width:1024px){ .wbp-editor-shell.is-preview-fixed .wbp-stage-placeholder{ display:block!important; height:var(--wbp-native-preview-space, 33dvh)!important; } .wbp-editor-shell.is-preview-fixed .wbp-stage-panel{ position:fixed!important; top:0!important; left:0!important; right:0!important; width:100%!important; z-index:60!important; overflow:hidden!important; transform:none!important; } .wbp-editor-shell.is-preview-end .wbp-stage-panel{ position:relative!important; } } @media(max-width:767px) and (orientation:portrait){ .wbp-editor-shell{--wbp-native-preview-space:33dvh} .wbp-editor-shell.is-preview-fixed .wbp-stage-panel{ height:var(--wbp-native-preview-space)!important; min-height:0!important; max-height:none!important; padding:8px 10px!important; background:linear-gradient(180deg,#fff,#fbf7ff)!important; box-shadow:0 8px 22px rgba(34,27,47,.13)!important; } .wbp-editor-shell.is-preview-fixed .wbp-preview-layout{ height:calc(var(--wbp-native-preview-space) - 16px)!important; min-height:0!important; max-height:none!important; } .wbp-editor-shell.is-preview-fixed .wbp-video-container{ width:auto!important; height:100%!important; max-width:100%!important; max-height:100%!important; margin:0 auto!important; } } @media(max-width:340px) and (orientation:portrait){ .wbp-editor-shell{--wbp-native-preview-space:33dvh} } /* v0.9.53 guard: fixed preview must win over legacy sticky mobile rules. */ @media(max-width:1024px){ .wbp-editor-shell{ --wbp-native-preview-space:33dvh; } .wbp-editor .wbp-editor-shell.is-preview-fixed .wbp-stage-panel{ position:fixed!important; top:0!important; left:0!important; right:0!important; bottom:auto!important; width:100%!important; z-index:60!important; overflow:hidden!important; transform:none!important; height:var(--wbp-native-preview-space, 33dvh)!important; min-height:0!important; max-height:none!important; } .wbp-editor .wbp-editor-shell.is-preview-fixed .wbp-stage-placeholder{ display:block!important; height:var(--wbp-native-preview-space, 33dvh)!important; } .wbp-editor .wbp-editor-shell.is-preview-fixed .wbp-preview-layout{ height:calc(var(--wbp-native-preview-space, 33dvh) - 16px)!important; min-height:0!important; max-height:none!important; } .wbp-editor .wbp-editor-shell.is-preview-fixed .wbp-video-container{ width:auto!important; height:100%!important; max-width:100%!important; max-height:100%!important; margin:0 auto!important; } } @media(max-width:767px) and (orientation:portrait){ .wbp-editor-shell{ --wbp-native-preview-space:33dvh; } .wbp-editor .wbp-editor-shell.is-preview-fixed .wbp-stage-panel{ height:var(--wbp-native-preview-space)!important; } .wbp-editor .wbp-editor-shell.is-preview-fixed .wbp-stage-placeholder{ height:var(--wbp-native-preview-space)!important; } .wbp-editor .wbp-editor-shell.is-preview-fixed .wbp-preview-layout{ height:calc(var(--wbp-native-preview-space) - 16px)!important; } } .wbp-premium-modal[hidden]{display:none!important} .wbp-premium-open{overflow:hidden} body.wbp-premium-open .cnr-back-to-top{display:none!important} .wbp-premium-modal{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:20px} .wbp-premium-modal__backdrop{position:absolute;inset:0;border:0;background:rgba(18,13,28,.62);cursor:pointer} .wbp-premium-modal__dialog{position:relative;width:min(540px,100%);max-height:calc(100dvh - 40px);overflow:auto;border-radius:8px;background:#fff;padding:26px;box-shadow:0 24px 80px rgba(18,13,28,.32);color:#21182f} .wbp-premium-modal__close{position:absolute;top:12px;right:12px;width:36px;height:36px;border:0;border-radius:50%;background:#f5eef8;color:#21182f;font-size:26px;line-height:1;cursor:pointer} .wbp-premium-modal__eyebrow{display:inline-flex;margin-bottom:10px;border-radius:999px;background:#fff3c7;color:#5a3b00;padding:5px 10px;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.04em} .wbp-premium-modal h2{margin:0 38px 10px 0;font-size:26px;line-height:1.1;color:#21182f} .wbp-premium-modal p{margin:0 0 16px;color:#4b4259;line-height:1.5} .wbp-premium-modal__list{display:grid;gap:8px;margin:0 0 18px;padding-left:20px;color:#34283f} .wbp-premium-modal__legal{display:grid;gap:8px;margin:0 0 18px;padding:12px;border:1px solid #eadff0;border-radius:8px;background:#fbf8fc;color:#6a6072;font-size:13px} .wbp-premium-modal__legal label{display:flex;gap:8px;align-items:flex-start} .wbp-premium-modal__legal a{color:#6f2c8f;font-weight:800} .wbp-premium-modal__version{margin:2px 0 0!important;font-size:12px!important;color:#766a7d!important} .wbp-premium-modal__actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end} .wbp-premium-modal__actions .wbp-btn[disabled]{opacity:.58;cursor:not-allowed} @media(max-width:560px){ .wbp-premium-modal{padding:12px} .wbp-premium-modal__dialog{padding:22px 18px} .wbp-premium-modal h2{font-size:22px} .wbp-premium-modal__actions{display:grid} } /* v0.9.152: final action bar stays visible at the viewport bottom. */ .wbp-editor{padding-bottom:104px!important} .wbp-editor .wbp-actions, .wbp-editor .wbp-editor-shell .wbp-actions, .wbp-editor .wbp-editor-shell.is-action-docked .wbp-actions, .wbp-editor .wbp-editor-shell.is-action-released .wbp-actions, .wbp-editor .wbp-editor-shell.is-field-editing .wbp-actions{ position:fixed!important; left:50%!important; right:auto!important; bottom:max(12px, env(safe-area-inset-bottom,0px))!important; z-index:100!important; display:grid!important; grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important; gap:10px!important; width:min(620px, calc(100vw - 24px))!important; max-width:calc(100vw - 24px)!important; margin:0!important; padding:10px!important; transform:translateX(-50%)!important; background:rgba(255,255,255,.97)!important; border:1px solid rgba(123,43,167,.12)!important; border-radius:18px!important; box-shadow:0 14px 42px rgba(34,27,47,.18)!important; opacity:1!important; visibility:visible!important; pointer-events:auto!important; } .wbp-editor .wbp-actions .wbp-btn{ min-width:0!important; width:100%!important; min-height:48px!important; gap:8px!important; white-space:normal!important; } .wbp-btn__crown{ display:inline-block; flex:0 0 auto; width:22px; height:22px; object-fit:contain; } .wbp-editor .wbp-btn-primary::after{ content:none!important; display:none!important; } @media(max-width:420px){ .wbp-editor{padding-bottom:100px!important} .wbp-editor .wbp-actions, .wbp-editor .wbp-editor-shell .wbp-actions, .wbp-editor .wbp-editor-shell.is-action-docked .wbp-actions, .wbp-editor .wbp-editor-shell.is-action-released .wbp-actions, .wbp-editor .wbp-editor-shell.is-field-editing .wbp-actions{ gap:8px!important; padding:8px!important; width:calc(100vw - 20px)!important; } .wbp-editor .wbp-actions .wbp-btn{ min-height:46px!important; padding-inline:8px!important; font-size:.84rem!important; line-height:1.1!important; } .wbp-btn__crown{ width:20px; height:20px; } } /* v0.9.153: quick tools live beside the vertical preview. */ .wbp-editor .wbp-stage-panel .wbp-preview-layout, .wbp-editor .wbp-editor-shell .wbp-stage-panel .wbp-preview-layout, .wbp-editor .wbp-editor-shell.is-preview-fixed .wbp-stage-panel .wbp-preview-layout, .wbp-editor .wbp-editor-shell.is-preview-end .wbp-stage-panel .wbp-preview-layout{ display:grid!important; grid-template-columns:minmax(0, auto) clamp(58px, 8vw, 86px)!important; align-items:stretch!important; justify-content:center!important; gap:clamp(8px, 1.6vw, 14px)!important; width:100%!important; height:clamp(360px, 58vh, 640px)!important; max-height:calc(100vh - 220px)!important; min-height:320px!important; overflow:visible!important; } .wbp-editor .wbp-stage-panel .wbp-video-container, .wbp-editor .wbp-editor-shell .wbp-stage-panel .wbp-video-container, .wbp-editor .wbp-editor-shell.is-preview-fixed .wbp-stage-panel .wbp-video-container, .wbp-editor .wbp-editor-shell.is-preview-end .wbp-stage-panel .wbp-video-container{ width:auto!important; height:100%!important; max-width:100%!important; max-height:100%!important; margin:0!important; aspect-ratio:var(--preview-aspect, 9/16)!important; } .wbp-editor .wbp-preview-tools, .wbp-editor .wbp-editor-shell .wbp-preview-tools{ position:static!important; display:grid!important; grid-template-columns:1fr!important; grid-template-rows:repeat(4, minmax(0, 1fr))!important; gap:clamp(8px, 1.4vw, 12px)!important; align-self:stretch!important; width:100%!important; max-width:none!important; height:100%!important; margin:0!important; padding:0!important; } .wbp-editor .wbp-preview-tools .wbp-tool-card, .wbp-editor .wbp-editor-shell .wbp-preview-tools .wbp-tool-card{ width:100%!important; height:100%!important; min-width:0!important; min-height:0!important; aspect-ratio:auto!important; border-radius:16px!important; padding:8px!important; } .wbp-editor .wbp-preview-tools .wbp-tool-card__media, .wbp-editor .wbp-preview-tools .wbp-tool-card__icon{ width:min(100%, 54px)!important; height:min(100%, 54px)!important; } @media(min-width:1025px){ .wbp-editor .wbp-stage-panel{ padding:18px clamp(18px, 2.6vw, 28px)!important; } } @media(max-width:767px){ .wbp-editor .wbp-stage-panel .wbp-preview-layout, .wbp-editor .wbp-editor-shell .wbp-stage-panel .wbp-preview-layout, .wbp-editor .wbp-editor-shell.is-preview-fixed .wbp-stage-panel .wbp-preview-layout, .wbp-editor .wbp-editor-shell.is-preview-end .wbp-stage-panel .wbp-preview-layout{ grid-template-columns:minmax(0, auto) clamp(52px, 16vw, 64px)!important; height:clamp(320px, 50vh, 470px)!important; min-height:300px!important; max-height:calc(100vh - 280px)!important; gap:8px!important; } .wbp-editor .wbp-preview-tools .wbp-tool-card{ border-radius:14px!important; padding:6px!important; } .wbp-editor .wbp-preview-tools .wbp-tool-card__media, .wbp-editor .wbp-preview-tools .wbp-tool-card__icon{ width:min(100%, 42px)!important; height:min(100%, 42px)!important; } } @media(max-width:360px){ .wbp-editor .wbp-stage-panel .wbp-preview-layout, .wbp-editor .wbp-editor-shell .wbp-stage-panel .wbp-preview-layout{ grid-template-columns:minmax(0, auto) 50px!important; height:300px!important; min-height:300px!important; } } /* v0.9.154: fixed preview keeps side tools inside the pinned first-third height. */ @media(max-width:1024px){ .wbp-editor .wbp-editor-shell.is-preview-fixed .wbp-stage-panel{ height:var(--wbp-native-preview-space, 33dvh)!important; min-height:0!important; max-height:none!important; overflow:hidden!important; } .wbp-editor .wbp-editor-shell.is-preview-fixed .wbp-stage-panel .wbp-preview-layout{ grid-template-columns:minmax(0, auto) clamp(50px, 14vw, 64px)!important; height:calc(var(--wbp-native-preview-space, 33dvh) - 16px)!important; min-height:0!important; max-height:none!important; align-items:stretch!important; } .wbp-editor .wbp-editor-shell.is-preview-fixed .wbp-stage-panel .wbp-video-container{ height:100%!important; width:auto!important; max-height:100%!important; } .wbp-editor .wbp-editor-shell.is-preview-fixed .wbp-preview-tools{ height:100%!important; min-height:0!important; } .wbp-editor .wbp-editor-shell.is-preview-fixed .wbp-preview-tools .wbp-tool-card{ min-height:0!important; padding:5px!important; } .wbp-editor .wbp-editor-shell.is-preview-fixed .wbp-preview-tools .wbp-tool-card__media, .wbp-editor .wbp-editor-shell.is-preview-fixed .wbp-preview-tools .wbp-tool-card__icon{ width:min(100%, 38px)!important; height:min(100%, 38px)!important; } } /* v0.9.190: compact editor interface with fullscreen advanced controls. */ .wbp-compact-controls{ display:grid; position:relative; z-index:5; gap:10px; width:min(620px, 100%); margin:14px auto 0; } .wbp-compact-secondary{ display:grid; grid-template-columns:minmax(0,1fr) 42px; gap:8px; align-items:center; } .wbp-compact-advanced, .wbp-compact-fullscreen{ min-height:38px; border-radius:999px; border:1px solid rgba(106,27,154,.16); background:rgba(255,255,255,.82); color:var(--purple); font-weight:900; cursor:pointer; box-shadow:0 8px 18px rgba(34,27,47,.07); } .wbp-compact-advanced{ font-size:.82rem; letter-spacing:.01em; } .wbp-compact-fullscreen{ display:grid; place-items:center; padding:0; } .wbp-compact-fullscreen svg{ width:18px; height:18px; } @media(max-width:1024px){ body.wbp-popup-open{ overflow:hidden!important; touch-action:none!important; overscroll-behavior:none!important; } .wbp-editor{ padding-bottom:0!important; } .wbp-editor-shell:not(.is-popup) .wbp-form-panel{ display:none!important; } .wbp-editor .wbp-editor-shell .wbp-stage-panel, .wbp-editor .wbp-editor-shell.is-preview-fixed .wbp-stage-panel, .wbp-editor .wbp-editor-shell.is-preview-end .wbp-stage-panel{ overflow:hidden!important; height:auto!important; max-height:none!important; } .wbp-editor .wbp-editor-shell:not(.is-popup) .wbp-stage-panel{ position:sticky!important; top:0!important; z-index:70!important; } .wbp-editor .wbp-editor-shell.is-preview-fixed:not(.is-popup) .wbp-stage-panel{ position:fixed!important; top:0!important; left:0!important; right:0!important; width:100%!important; z-index:80!important; padding:8px 10px!important; background:linear-gradient(180deg,#fff,#fbf7ff)!important; box-shadow:0 8px 22px rgba(34,27,47,.13)!important; } .wbp-editor .wbp-editor-shell:not(.is-popup) .wbp-preview-layout, .wbp-editor .wbp-editor-shell.is-preview-fixed:not(.is-popup) .wbp-preview-layout, .wbp-editor .wbp-editor-shell.is-preview-end:not(.is-popup) .wbp-preview-layout{ display:grid!important; grid-template-columns:minmax(0, auto) clamp(52px, 15vw, 66px)!important; align-items:stretch!important; justify-content:center!important; gap:8px!important; height:clamp(250px, 33dvh, 390px)!important; min-height:0!important; max-height:none!important; overflow:hidden!important; } .wbp-editor .wbp-editor-shell:not(.is-popup) .wbp-video-container, .wbp-editor .wbp-editor-shell.is-preview-fixed:not(.is-popup) .wbp-video-container{ height:100%!important; width:auto!important; max-width:100%!important; margin:0 auto!important; } .wbp-editor .wbp-editor-shell:not(.is-popup) .wbp-preview-tools, .wbp-editor .wbp-editor-shell.is-preview-fixed:not(.is-popup) .wbp-preview-tools{ display:grid!important; grid-template-columns:1fr!important; grid-template-rows:repeat(4,minmax(0,1fr))!important; gap:8px!important; height:100%!important; margin:0!important; padding:0!important; } .wbp-editor .wbp-editor-shell:not(.is-popup) .wbp-preview-tools .wbp-tool-card, .wbp-editor .wbp-editor-shell.is-preview-fixed:not(.is-popup) .wbp-preview-tools .wbp-tool-card{ min-height:0!important; width:100%!important; height:100%!important; padding:5px!important; } .wbp-editor .wbp-editor-shell:not(.is-popup) .wbp-preview-tools .wbp-tool-card__media, .wbp-editor .wbp-editor-shell:not(.is-popup) .wbp-preview-tools .wbp-tool-card__icon, .wbp-editor .wbp-editor-shell.is-preview-fixed:not(.is-popup) .wbp-preview-tools .wbp-tool-card__media, .wbp-editor .wbp-editor-shell.is-preview-fixed:not(.is-popup) .wbp-preview-tools .wbp-tool-card__icon{ width:min(100%, 38px)!important; height:min(100%, 38px)!important; } .wbp-editor .wbp-stage-panel .wbp-actions, .wbp-editor .wbp-editor-shell .wbp-stage-panel .wbp-actions, .wbp-editor .wbp-editor-shell.is-action-docked .wbp-stage-panel .wbp-actions, .wbp-editor .wbp-editor-shell.is-action-released .wbp-stage-panel .wbp-actions{ position:static!important; left:auto!important; right:auto!important; bottom:auto!important; transform:none!important; width:100%!important; max-width:100%!important; margin:0!important; padding:0!important; background:transparent!important; border:0!important; border-radius:0!important; box-shadow:none!important; } .wbp-compact-controls{ gap:8px; margin-top:10px; } .wbp-compact-secondary{ grid-template-columns:minmax(0,1fr) 38px; } .wbp-compact-advanced, .wbp-compact-fullscreen{ min-height:34px; } .wbp-editor .wbp-stage-panel .wbp-actions .wbp-btn{ min-height:44px!important; border-radius:13px!important; font-size:.86rem!important; } .wbp-compact-controls .wbp-progress, .wbp-compact-controls .wbp-status{ margin-top:0!important; } .wbp-editor-shell.is-popup{ position:fixed!important; inset:0!important; z-index:999999!important; display:block!important; width:100vw!important; height:100dvh!important; max-height:100dvh!important; overflow:auto!important; -webkit-overflow-scrolling:touch!important; padding:0!important; border:0!important; border-radius:0!important; background:#fff!important; box-shadow:none!important; } .wbp-editor-shell.is-popup .wbp-popup-close{ display:grid!important; place-items:center!important; position:fixed!important; top:8px!important; right:8px!important; z-index:1000000!important; width:38px!important; height:38px!important; } .wbp-editor-shell.is-popup .wbp-stage-panel{ position:sticky!important; top:0!important; z-index:30!important; padding:8px 10px 10px!important; } .wbp-editor-shell.is-popup .wbp-preview-layout{ display:grid!important; grid-template-columns:minmax(0, auto) clamp(54px, 14vw, 70px)!important; height:clamp(280px, 42dvh, 520px)!important; align-items:stretch!important; justify-content:center!important; overflow:visible!important; } .wbp-editor-shell.is-popup .wbp-form-panel{ display:block!important; height:auto!important; min-height:0!important; overflow:visible!important; padding:14px 12px calc(18px + env(safe-area-inset-bottom,0px))!important; border:0!important; border-radius:0!important; box-shadow:none!important; background:#fff!important; } .wbp-editor-shell.is-popup .wbp-form-panel h3, .wbp-editor-shell.is-popup .wbp-form-grid, .wbp-editor-shell.is-popup .wbp-music-gallery, .wbp-editor-shell.is-popup .wbp-advanced-toggle{ display:none!important; } .wbp-editor-shell.is-popup .wbp-controls-scroll{ display:block!important; height:auto!important; max-height:none!important; overflow:visible!important; padding:0!important; } .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-form-panel{ display:none!important; } .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-panel{ display:block; margin-top:0!important; } } @media(max-width:380px){ .wbp-editor .wbp-editor-shell:not(.is-popup) .wbp-preview-layout, .wbp-editor .wbp-editor-shell.is-preview-fixed:not(.is-popup) .wbp-preview-layout{ height:clamp(230px, 31dvh, 330px)!important; grid-template-columns:minmax(0, auto) 48px!important; gap:6px!important; } .wbp-editor .wbp-stage-panel .wbp-actions .wbp-btn{ min-height:42px!important; font-size:.8rem!important; padding-inline:7px!important; } } /* v2.0 final override: must stay at file end */ .wbp-editor-shell.is-popup{ position:fixed!important; inset:0!important; z-index:999999!important; width:100vw!important; height:100dvh!important; max-height:100dvh!important; display:grid!important; grid-template-rows:auto minmax(0,1fr) auto!important; grid-template-columns:1fr!important; gap:18px!important; padding:24px 26px!important; overflow:hidden!important; } .wbp-editor-shell.is-popup .wbp-editor-topbar{display:flex!important;grid-row:1!important;grid-column:1!important} .wbp-editor-shell.is-popup .wbp-popup-title, .wbp-editor-shell.is-popup .wbp-stage-label{display:none!important} .wbp-editor-shell.is-popup .wbp-stage-panel{ display:block!important; grid-row:2!important; grid-column:1!important; width:auto!important; height:auto!important; max-height:none!important; min-height:0!important; padding:0!important; border:0!important; border-radius:0!important; box-shadow:none!important; background:transparent!important; overflow:visible!important; } .wbp-editor-shell.is-popup .wbp-preview-layout{ display:grid!important; grid-template-columns:minmax(0,1fr) 210px!important; height:100%!important; gap:24px!important; align-items:center!important; } .wbp-editor-shell.is-popup .wbp-video-container{ height:min(calc(100dvh - 250px), calc((100vw - 300px) * 1.777))!important; width:auto!important; max-width:100%!important; margin:auto!important; } .wbp-editor-shell.is-popup .wbp-simple-tools{ display:grid!important; grid-template-columns:1fr!important; gap:18px!important; align-content:center!important; margin:0!important; } .wbp-editor-shell.is-popup .wbp-tool-card{ min-height:132px!important; padding:22px 14px!important; text-align:center!important; } .wbp-editor-shell.is-popup .wbp-form-panel{display:none!important} .wbp-editor-shell.is-popup .wbp-compact-controls{ display:block!important; grid-row:3!important; grid-column:1!important; padding:20px 28px!important; border-radius:30px!important; background:rgba(255,255,255,.82)!important; border:1px solid rgba(234,220,247,.9)!important; box-shadow:0 20px 60px rgba(50,20,95,.09)!important; } .wbp-editor-shell.is-popup .wbp-compact-secondary{ display:grid!important; grid-template-columns:1fr!important; gap:12px!important; margin-top:14px!important; } .wbp-editor-shell.is-popup .wbp-compact-fullscreen{display:none!important} .wbp-editor-shell.is-popup.is-advanced{ display:grid!important; grid-template-columns:320px minmax(0,1fr)!important; grid-template-rows:auto minmax(360px,1fr) minmax(250px,38dvh)!important; gap:20px 24px!important; } .wbp-editor-shell.is-popup.is-advanced .wbp-editor-topbar{grid-column:1 / -1!important;grid-row:1!important} .wbp-editor-shell.is-popup.is-advanced .wbp-stage-panel{ grid-column:2!important; grid-row:2!important; } .wbp-editor-shell.is-popup.is-advanced .wbp-preview-layout{ display:block!important; height:100%!important; } .wbp-editor-shell.is-popup.is-advanced .wbp-video-container{ height:min(calc(100dvh - 430px), calc((100vw - 420px) * 1.777))!important; width:auto!important; margin:auto!important; } .wbp-editor-shell.is-popup.is-advanced .wbp-simple-tools, .wbp-editor-shell.is-popup.is-advanced .wbp-compact-controls{display:none!important} .wbp-editor-shell.is-popup.is-advanced .wbp-form-panel{ display:contents!important; width:auto!important; height:auto!important; max-height:none!important; min-height:0!important; padding:0!important; overflow:visible!important; } .wbp-editor-shell.is-popup.is-advanced .wbp-controls-scroll, .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-panel{display:contents!important} .wbp-editor-shell.is-popup.is-advanced .wbp-simple-text-editor, .wbp-editor-shell.is-popup.is-advanced .wbp-music-options, .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-toggle, .wbp-editor-shell.is-popup.is-advanced .wbp-current-target{display:none!important} .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-toolbar{ grid-column:1!important; grid-row:2!important; display:grid!important; gap:12px!important; align-content:start!important; overflow:visible!important; } .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-tool{ min-height:96px!important; padding:16px 18px!important; display:grid!important; grid-template-columns:70px 1fr auto!important; align-items:center!important; text-align:left!important; border-radius:22px!important; } .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-tool > span{ width:58px!important; height:58px!important; margin:0!important; } .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-tabs{ grid-column:1 / -1!important; grid-row:3!important; align-self:start!important; display:grid!important; grid-template-columns:repeat(3,1fr)!important; margin:0 18px!important; border:1px solid var(--wbp-line)!important; border-radius:22px!important; overflow:hidden!important; background:#fff!important; z-index:2!important; } .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-tabs button{ min-height:58px!important; border:0!important; border-right:1px solid var(--wbp-line)!important; background:#fff!important; color:#655778!important; font-weight:950!important; } .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-tabs button:last-child{border-right:0!important} .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-tabs button.is-active{ color:var(--wbp-purple)!important; background:#fbf5ff!important; } .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-grid{ grid-column:1 / -1!important; grid-row:3!important; align-self:stretch!important; overflow:auto!important; margin:66px 0 0!important; padding:18px!important; border:1px solid var(--wbp-line)!important; border-radius:28px!important; background:rgba(255,255,255,.88)!important; box-shadow:0 18px 50px rgba(50,20,95,.08)!important; display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr))!important; gap:14px 18px!important; } .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-section-title{ grid-column:1 / -1!important; margin:6px 0 0!important; color:var(--wbp-purple)!important; font-size:.9rem!important; font-weight:950!important; } .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-grid label{ display:grid!important; gap:8px!important; margin:0!important; padding:0!important; color:#473b5f!important; font-weight:850!important; background:transparent!important; border:0!important; } .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-grid input, .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-grid select{ min-height:44px!important; height:auto!important; width:100%!important; border:1px solid #d8cce8!important; border-radius:14px!important; background:#fff!important; padding:8px 10px!important; font-size:.9rem!important; } .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-actions{ grid-column:1 / -1!important; grid-row:3!important; align-self:end!important; justify-self:end!important; position:static!important; display:flex!important; grid-template-columns:none!important; gap:10px!important; margin:0 18px 18px 0!important; padding:0!important; background:transparent!important; border:0!important; z-index:3!important; } /* v2.0 fullscreen simple final override: preview + tools + actions must fit without overlap */ .wbp-editor-shell.is-popup:not(.is-advanced){ height:100dvh!important; min-height:100dvh!important; display:grid!important; grid-template-rows:auto minmax(0,1fr)!important; gap:18px!important; overflow:hidden!important; padding:26px!important; } .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-editor-topbar{ grid-row:1!important; } .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-popup-title, .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-stage-label, .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-form-panel{ display:none!important; } .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-stage-panel{ grid-row:2!important; display:grid!important; grid-template-rows:minmax(0,1fr) auto!important; gap:16px!important; min-height:0!important; height:auto!important; max-height:none!important; overflow:hidden!important; padding:0!important; background:transparent!important; border:0!important; box-shadow:none!important; } .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-preview-layout{ min-height:0!important; height:100%!important; display:grid!important; grid-template-columns:minmax(0,1fr) 118px!important; gap:16px!important; align-items:center!important; justify-content:center!important; } .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-video-container{ width:auto!important; height:min(100%, calc(100dvh - 250px), calc((100vw - 220px) * 1.7777778))!important; max-height:100%!important; margin:auto!important; } .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-preview-tools{ display:grid!important; grid-template-columns:1fr!important; gap:14px!important; align-content:center!important; width:118px!important; max-height:100%!important; overflow:hidden!important; } .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-tool-card{ min-height:0!important; height:calc((100dvh - 360px) / 4)!important; max-height:142px!important; padding:10px 8px!important; border-radius:18px!important; } .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-tool-card b{ font-size:18px!important; line-height:1!important; } .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-tool-card > span:last-child{ font-size:13px!important; line-height:1.05!important; overflow-wrap:anywhere!important; } .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-tool-card__media, .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-tool-card__icon{ width:54px!important; height:54px!important; } .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-wishi-decor{ top:92px!important; right:150px!important; width:58px!important; } .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-compact-controls{ position:static!important; inset:auto!important; transform:none!important; width:min(760px,100%)!important; justify-self:center!important; display:grid!important; gap:10px!important; padding:14px 28px!important; border-radius:26px!important; background:rgba(255,255,255,.9)!important; box-shadow:0 18px 56px rgba(100,52,146,.12)!important; z-index:4!important; } .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-compact-secondary, .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-actions{ position:static!important; display:grid!important; grid-template-columns:1fr 1fr!important; gap:10px!important; margin:0!important; padding:0!important; width:100%!important; background:transparent!important; border:0!important; } .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-compact-secondary{ grid-template-columns:1fr!important; } .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-compact-fullscreen{ display:none!important; } .wbp-editor-shell.is-popup.is-advanced .wbp-mini-btn{ min-height:42px!important; border:1px solid #d8cce8!important; border-radius:14px!important; background:#fff!important; color:var(--wbp-purple)!important; font-weight:900!important; font-size:.85rem!important; } @media(max-width:720px){ .wbp-editor-shell.is-popup{ padding:14px!important; gap:14px!important; } .wbp-editor-shell.is-popup .wbp-preview-layout{ grid-template-columns:minmax(0,1fr) 118px!important; gap:14px!important; } .wbp-editor-shell.is-popup .wbp-video-container{ height:min(calc(100dvh - 250px), calc((100vw - 160px) * 1.777))!important; } .wbp-editor-shell.is-popup .wbp-tool-card{ min-height:108px!important; padding:12px 8px!important; } .wbp-editor-shell.is-popup.is-advanced{ grid-template-columns:112px minmax(0,1fr)!important; grid-template-rows:auto minmax(320px,1fr) minmax(260px,42dvh)!important; gap:14px!important; } .wbp-editor-shell.is-popup.is-advanced .wbp-video-container{ height:min(calc(100dvh - 430px), calc((100vw - 150px) * 1.777))!important; } .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-toolbar{gap:10px!important} .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-tool{ display:block!important; min-height:80px!important; padding:10px!important; text-align:center!important; } .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-tool > span{ width:48px!important; height:48px!important; margin:0 auto 6px!important; } .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-tool b{font-size:13px!important} .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-tool small{display:none!important} .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-tabs{margin:0!important} .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-tabs button{min-height:48px!important;font-size:14px!important} .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-grid{ margin-top:56px!important; padding:12px!important; grid-template-columns:1fr 1fr!important; gap:12px!important; } } /* v0.9.191: keep compact editor visible at page end and make advanced fullscreen usable. */ @media(max-width:1024px){ .wbp-editor .wbp-editor-shell.is-preview-fixed:not(.is-popup) .wbp-stage-panel{ position:fixed!important; top:0!important; left:0!important; right:0!important; width:100%!important; z-index:90!important; } .wbp-editor .wbp-editor-shell.is-preview-end:not(.is-popup) .wbp-stage-panel{ position:fixed!important; top:0!important; left:0!important; right:0!important; width:100%!important; z-index:90!important; } .wbp-editor .wbp-editor-shell.is-preview-fixed:not(.is-popup) .wbp-stage-placeholder, .wbp-editor .wbp-editor-shell.is-preview-end:not(.is-popup) .wbp-stage-placeholder{ display:block!important; height:var(--wbp-stage-height, 380px)!important; } .wbp-editor-shell.is-popup.is-advanced{ display:grid!important; grid-template-rows:minmax(0, 2fr) minmax(0, 1fr)!important; height:100dvh!important; max-height:100dvh!important; overflow:hidden!important; } .wbp-editor-shell.is-popup.is-advanced .wbp-popup-title{ display:none!important; } .wbp-editor-shell.is-popup.is-advanced .wbp-stage-panel{ position:relative!important; top:auto!important; z-index:2!important; min-height:0!important; height:auto!important; overflow:hidden!important; padding:8px 10px!important; } .wbp-editor-shell.is-popup.is-advanced .wbp-preview-layout{ height:calc(100% - 96px)!important; min-height:0!important; max-height:none!important; grid-template-columns:minmax(0, auto) clamp(46px, 12vw, 62px)!important; gap:7px!important; } .wbp-editor-shell.is-popup.is-advanced .wbp-video-container{ height:100%!important; max-height:100%!important; width:auto!important; margin:0 auto!important; } .wbp-editor-shell.is-popup.is-advanced .wbp-preview-tools{ gap:6px!important; } .wbp-editor-shell.is-popup.is-advanced .wbp-preview-tools .wbp-tool-card{ padding:4px!important; } .wbp-editor-shell.is-popup.is-advanced .wbp-compact-controls{ width:100%!important; max-width:620px!important; margin:8px auto 0!important; gap:6px!important; } .wbp-editor-shell.is-popup.is-advanced .wbp-compact-secondary{ display:none!important; } .wbp-editor-shell.is-popup.is-advanced .wbp-stage-panel .wbp-actions{ grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important; gap:8px!important; } .wbp-editor-shell.is-popup.is-advanced .wbp-stage-panel .wbp-actions .wbp-btn{ min-height:38px!important; font-size:.8rem!important; border-radius:12px!important; } .wbp-editor-shell.is-popup.is-advanced .wbp-form-panel{ display:block!important; min-height:0!important; height:auto!important; overflow:hidden!important; padding:8px 10px calc(10px + env(safe-area-inset-bottom,0px))!important; border-top:1px solid rgba(123,43,167,.12)!important; box-shadow:0 -10px 24px rgba(34,27,47,.08)!important; } .wbp-editor-shell.is-popup.is-advanced .wbp-controls-scroll{ height:100%!important; max-height:100%!important; overflow-y:auto!important; overscroll-behavior:contain!important; -webkit-overflow-scrolling:touch!important; padding:0 2px 8px!important; } .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-panel{ display:block!important; margin:0!important; padding:8px!important; border-radius:14px!important; } .wbp-editor-shell.is-popup.is-advanced .wbp-current-target{ margin-bottom:6px!important; padding:6px 8px!important; font-size:.72rem!important; } .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-grid{ display:grid!important; grid-template-columns:repeat(2, minmax(0, 1fr))!important; gap:7px!important; } .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-section-title{ grid-column:1/-1!important; margin:2px 0 -2px!important; font-size:.68rem!important; } .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-grid label{ gap:3px!important; padding:7px!important; border-radius:12px!important; } .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-grid label span{ font-size:.68rem!important; line-height:1.05!important; } .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-grid input, .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-grid select{ min-height:32px!important; height:32px!important; padding:4px 7px!important; font-size:.76rem!important; border-radius:10px!important; } .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-grid input[type="color"]{ padding:2px!important; } .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-actions{ position:sticky!important; bottom:0!important; display:grid!important; grid-template-columns:1fr 1fr!important; gap:7px!important; margin:8px -8px -8px!important; padding:8px!important; background:#fff!important; border-top:1px solid rgba(123,43,167,.10)!important; } .wbp-editor-shell.is-popup.is-advanced .wbp-mini-btn{ min-height:34px!important; font-size:.74rem!important; border-radius:11px!important; } } @media(max-width:380px){ .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-grid{ grid-template-columns:1fr!important; } .wbp-editor-shell.is-popup.is-advanced .wbp-preview-layout{ height:calc(100% - 88px)!important; } } /* v0.9.192: reconstructed fullscreen advanced layout. The full-screen shell owns the viewport; only the controls pane scrolls. */ .wbp-editor-shell.is-popup.is-advanced{ position:fixed!important; inset:0!important; display:flex!important; flex-direction:column!important; width:100vw!important; height:100dvh!important; max-height:100dvh!important; overflow:hidden!important; padding:0!important; background:#fff!important; } .wbp-editor-shell.is-popup.is-advanced .wbp-popup-title, .wbp-editor-shell.is-popup.is-advanced .wbp-stage-placeholder, .wbp-editor-shell.is-popup.is-advanced .wbp-form-panel h3, .wbp-editor-shell.is-popup.is-advanced .wbp-form-grid, .wbp-editor-shell.is-popup.is-advanced .wbp-music-gallery, .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-toggle, .wbp-editor-shell.is-popup.is-advanced .wbp-compact-secondary{ display:none!important; } .wbp-editor-shell.is-popup.is-advanced .wbp-stage-panel{ flex:0 0 66dvh!important; display:flex!important; flex-direction:column!important; min-height:0!important; height:66dvh!important; max-height:66dvh!important; overflow:hidden!important; position:relative!important; top:auto!important; left:auto!important; right:auto!important; z-index:2!important; padding:8px 10px!important; border:0!important; border-radius:0!important; box-shadow:0 8px 22px rgba(34,27,47,.12)!important; background:linear-gradient(180deg,#fff,#fbf7ff)!important; } .wbp-editor-shell.is-popup.is-advanced .wbp-preview-layout{ flex:1 1 auto!important; display:grid!important; grid-template-columns:minmax(0, auto) clamp(46px, 12vw, 62px)!important; align-items:stretch!important; justify-content:center!important; gap:7px!important; width:100%!important; height:auto!important; min-height:0!important; max-height:none!important; overflow:hidden!important; } .wbp-editor-shell.is-popup.is-advanced .wbp-video-container{ height:100%!important; max-height:100%!important; width:auto!important; max-width:100%!important; margin:0 auto!important; border-radius:14px!important; } .wbp-editor-shell.is-popup.is-advanced .wbp-preview-tools{ display:grid!important; grid-template-rows:repeat(4,minmax(0,1fr))!important; gap:6px!important; height:100%!important; min-height:0!important; margin:0!important; padding:0!important; } .wbp-editor-shell.is-popup.is-advanced .wbp-preview-tools .wbp-tool-card{ min-height:0!important; height:100%!important; padding:4px!important; } .wbp-editor-shell.is-popup.is-advanced .wbp-compact-controls{ flex:0 0 auto!important; width:100%!important; max-width:620px!important; margin:8px auto 0!important; gap:6px!important; } .wbp-editor-shell.is-popup.is-advanced .wbp-stage-panel .wbp-actions{ position:static!important; display:grid!important; grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important; gap:8px!important; width:100%!important; margin:0!important; padding:0!important; background:transparent!important; box-shadow:none!important; border:0!important; } .wbp-editor-shell.is-popup.is-advanced .wbp-stage-panel .wbp-actions .wbp-btn{ min-height:38px!important; border-radius:12px!important; font-size:.8rem!important; } .wbp-editor-shell.is-popup.is-advanced .wbp-form-panel{ flex:1 1 34dvh!important; display:block!important; min-height:0!important; height:34dvh!important; max-height:34dvh!important; overflow:hidden!important; padding:8px 10px calc(10px + env(safe-area-inset-bottom,0px))!important; border:0!important; border-radius:0!important; border-top:1px solid rgba(123,43,167,.12)!important; box-shadow:none!important; background:#fff!important; } .wbp-editor-shell.is-popup.is-advanced .wbp-controls-scroll{ display:block!important; height:100%!important; max-height:100%!important; min-height:0!important; overflow-y:auto!important; overflow-x:hidden!important; overscroll-behavior:contain!important; -webkit-overflow-scrolling:touch!important; padding:0 2px 8px!important; } .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-panel{ display:block!important; width:100%!important; min-height:0!important; margin:0!important; padding:8px!important; border-radius:14px!important; } .wbp-editor-shell.is-popup.is-advanced .wbp-current-target{ margin-bottom:6px!important; padding:6px 8px!important; font-size:.72rem!important; } .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-grid{ display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:7px!important; } .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-section-title{ grid-column:1/-1!important; margin:2px 0 -2px!important; font-size:.68rem!important; line-height:1.05!important; } .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-grid label{ min-width:0!important; gap:3px!important; padding:7px!important; border-radius:12px!important; } .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-grid label span{ font-size:.68rem!important; line-height:1.05!important; } .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-grid input, .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-grid select{ min-height:32px!important; height:32px!important; padding:4px 7px!important; font-size:.76rem!important; border-radius:10px!important; } .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-grid input[type="color"]{ padding:2px!important; } .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-actions{ position:sticky!important; bottom:0!important; z-index:3!important; display:grid!important; grid-template-columns:1fr 1fr!important; gap:7px!important; margin:8px -8px -8px!important; padding:8px!important; background:#fff!important; border-top:1px solid rgba(123,43,167,.10)!important; } .wbp-editor-shell.is-popup.is-advanced .wbp-mini-btn{ min-height:34px!important; border-radius:11px!important; font-size:.74rem!important; } @media(max-width:380px){ .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-grid{ grid-template-columns:1fr!important; } .wbp-editor-shell.is-popup.is-advanced .wbp-stage-panel{ flex-basis:64dvh!important; height:64dvh!important; max-height:64dvh!important; } .wbp-editor-shell.is-popup.is-advanced .wbp-form-panel{ flex-basis:36dvh!important; height:36dvh!important; max-height:36dvh!important; } } /* v2.0 absolute final override: keep after all legacy popup rules */ .wbp-editor-shell.is-popup.is-advanced{ display:grid!important; grid-template-columns:320px minmax(0,1fr)!important; grid-template-rows:auto minmax(360px,1fr) minmax(250px,38dvh)!important; gap:20px 24px!important; overflow:hidden!important; } .wbp-editor-shell.is-popup.is-advanced .wbp-editor-topbar{ grid-column:1 / -1!important; grid-row:1!important; } .wbp-editor-shell.is-popup.is-advanced .wbp-stage-panel{ grid-column:2!important; grid-row:2!important; display:block!important; width:auto!important; height:auto!important; max-height:none!important; min-height:0!important; flex:initial!important; flex-basis:auto!important; padding:0!important; overflow:visible!important; background:transparent!important; border:0!important; box-shadow:none!important; } .wbp-editor-shell.is-popup.is-advanced .wbp-preview-layout{ display:block!important; height:100%!important; grid-template-columns:none!important; } .wbp-editor-shell.is-popup.is-advanced .wbp-video-container{ height:min(calc(100dvh - 430px), calc((100vw - 420px) * 1.777))!important; width:auto!important; max-width:100%!important; margin:auto!important; } .wbp-editor-shell.is-popup.is-advanced .wbp-simple-tools, .wbp-editor-shell.is-popup.is-advanced .wbp-compact-controls{ display:none!important; } .wbp-editor-shell.is-popup.is-advanced .wbp-form-panel{ display:contents!important; grid-column:auto!important; grid-row:auto!important; width:auto!important; height:auto!important; max-height:none!important; flex:initial!important; flex-basis:auto!important; padding:0!important; overflow:visible!important; background:transparent!important; border:0!important; box-shadow:none!important; } .wbp-editor-shell.is-popup.is-advanced .wbp-controls-scroll, .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-panel{ display:contents!important; } .wbp-editor-shell.is-popup.is-advanced .wbp-simple-text-editor, .wbp-editor-shell.is-popup.is-advanced .wbp-music-options, .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-toggle, .wbp-editor-shell.is-popup.is-advanced .wbp-current-target{ display:none!important; } .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-toolbar{ grid-column:1!important; grid-row:2!important; display:grid!important; gap:12px!important; align-content:start!important; overflow:visible!important; } .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-tool{ min-height:96px!important; padding:16px 18px!important; display:grid!important; grid-template-columns:70px 1fr auto!important; align-items:center!important; text-align:left!important; border-radius:22px!important; } .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-tool > span{ width:58px!important; height:58px!important; margin:0!important; } .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-tabs{ grid-column:1 / -1!important; grid-row:3!important; align-self:start!important; display:grid!important; grid-template-columns:repeat(3,1fr)!important; margin:0 18px!important; border:1px solid var(--wbp-line)!important; border-radius:22px!important; overflow:hidden!important; background:#fff!important; z-index:2!important; } .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-grid{ grid-column:1 / -1!important; grid-row:3!important; align-self:stretch!important; overflow:auto!important; margin:66px 0 0!important; padding:18px!important; border:1px solid var(--wbp-line)!important; border-radius:28px!important; background:rgba(255,255,255,.88)!important; box-shadow:0 18px 50px rgba(50,20,95,.08)!important; display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr))!important; gap:14px 18px!important; } .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-actions{ grid-column:1 / -1!important; grid-row:3!important; align-self:end!important; justify-self:end!important; position:static!important; display:flex!important; gap:10px!important; margin:0 18px 18px 0!important; padding:0!important; background:transparent!important; border:0!important; z-index:3!important; } /* v2.2 last layout pass: Tomas notes 2026-07-11 */ .wbp-editor-shell:not(.is-popup){ display:grid!important; grid-template-columns:minmax(0,1fr)!important; grid-template-rows:minmax(0,1fr) auto!important; max-height:50vh!important; min-height:360px!important; gap:10px!important; padding:10px!important; } .wbp-editor-shell:not(.is-popup) .wbp-preview-layout{ display:grid!important; grid-template-columns:minmax(0,1fr) 82px!important; align-items:center!important; justify-content:center!important; width:100%!important; height:auto!important; min-height:0!important; gap:10px!important; } .wbp-editor-shell:not(.is-popup) .wbp-video-container{ grid-column:1!important; width:auto!important; height:calc(50vh - 86px)!important; min-height:260px!important; max-height:430px!important; justify-self:center!important; margin:0 auto!important; } .wbp-editor-shell:not(.is-popup) .wbp-simple-tools{ grid-column:2!important; display:grid!important; grid-template-columns:1fr!important; gap:8px!important; margin:0!important; align-content:center!important; } .wbp-editor-shell:not(.is-popup) .wbp-tool-card{ width:72px!important; min-height:64px!important; aspect-ratio:auto!important; padding:7px!important; border-radius:18px!important; } .wbp-editor-shell.is-popup:not(.is-advanced){ display:grid!important; grid-template-rows:auto minmax(0,1fr) auto!important; grid-template-columns:1fr!important; } .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-preview-layout{ display:grid!important; grid-template-columns:minmax(0,1fr) 176px!important; height:100%!important; min-height:0!important; gap:18px!important; align-items:center!important; } .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-video-container{ grid-column:1!important; width:auto!important; height:min(calc(100dvh - 245px), calc((100vw - 270px) * 1.777))!important; max-width:100%!important; max-height:none!important; } .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-simple-tools{ grid-column:2!important; display:grid!important; grid-template-columns:1fr!important; gap:14px!important; margin:0!important; align-content:center!important; } .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-tool-card{ width:100%!important; min-height:112px!important; aspect-ratio:auto!important; } .wbp-editor-shell.is-popup.is-advanced .wbp-video-container{ width:auto!important; height:min(calc(100dvh - 430px), calc((100vw - 420px) * 1.777))!important; max-width:100%!important; max-height:none!important; } @media(max-width:720px){ .wbp-editor-shell:not(.is-popup) .wbp-preview-layout{ grid-template-columns:minmax(0,1fr) 66px!important; } .wbp-editor-shell:not(.is-popup) .wbp-video-container{ height:calc(50vh - 78px)!important; min-height:242px!important; } .wbp-editor-shell:not(.is-popup) .wbp-tool-card{ width:60px!important; min-height:54px!important; } .wbp-editor-shell.is-popup:not(.is-advanced){ padding:10px!important; gap:10px!important; } .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-preview-layout{ grid-template-columns:82px minmax(0,1fr)!important; gap:10px!important; } .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-simple-tools{ grid-column:1!important; grid-row:1!important; gap:8px!important; } .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-video-container{ grid-column:2!important; grid-row:1!important; width:100%!important; height:auto!important; max-height:calc(100dvh - 225px)!important; } .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-tool-card{ min-height:72px!important; padding:8px 6px!important; } .wbp-editor-shell.is-popup.is-advanced{ grid-template-columns:84px minmax(0,1fr)!important; grid-template-rows:auto minmax(0,1fr) minmax(245px,40dvh)!important; gap:10px!important; padding:10px!important; } .wbp-editor-shell.is-popup.is-advanced .wbp-video-container{ width:min(100%, calc((100dvh - 382px) * .5625))!important; height:auto!important; max-height:calc(100dvh - 382px)!important; } .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-toolbar{ grid-column:1!important; grid-row:2!important; gap:8px!important; } .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-tool{ display:block!important; min-height:66px!important; padding:7px!important; text-align:center!important; border-radius:17px!important; } .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-tool > span{ width:38px!important; height:38px!important; margin:0 auto 4px!important; } } /* v2.3 specificity close: preview tools are icon buttons, not equal-height cards */ .wbp-editor .wbp-editor-shell:not(.is-popup) .wbp-preview-tools.wbp-simple-tools{ grid-column:2!important; display:grid!important; grid-template-columns:1fr!important; gap:8px!important; align-content:center!important; margin:0!important; } .wbp-editor .wbp-editor-shell:not(.is-popup) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card{ width:72px!important; height:auto!important; min-width:0!important; min-height:64px!important; aspect-ratio:auto!important; padding:7px!important; } .wbp-editor .wbp-editor-shell:not(.is-popup) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card__media, .wbp-editor .wbp-editor-shell:not(.is-popup) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card__icon{ width:46px!important; height:46px!important; } .wbp-editor .wbp-editor-shell:not(.is-popup) .wbp-preview-layout{ grid-template-columns:minmax(0,1fr) 82px!important; height:auto!important; } @media(min-width:721px){ .wbp-editor .wbp-editor-shell:not(.is-popup){ max-height:50vh!important; height:410px!important; min-height:360px!important; } .wbp-editor .wbp-editor-shell:not(.is-popup) .wbp-preview-layout{ grid-template-columns:minmax(0, 260px) 82px!important; justify-content:center!important; align-items:center!important; height:300px!important; align-self:start!important; } .wbp-editor .wbp-editor-shell:not(.is-popup) .wbp-video-container{ width:169px!important; height:300px!important; min-height:0!important; max-height:300px!important; } .wbp-editor .wbp-editor-shell:not(.is-popup) .wbp-preview-tools.wbp-simple-tools{ width:72px!important; align-self:center!important; } .wbp-editor .wbp-editor-shell:not(.is-popup) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card{ width:72px!important; height:56px!important; min-height:56px!important; padding:6px!important; } .wbp-editor .wbp-editor-shell:not(.is-popup) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card__media, .wbp-editor .wbp-editor-shell:not(.is-popup) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card__icon{ width:40px!important; height:40px!important; } } @media(max-width:720px){ .wbp-editor .wbp-editor-shell:not(.is-popup) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card{ width:60px!important; min-height:54px!important; padding:6px!important; } .wbp-editor .wbp-editor-shell:not(.is-popup) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card__media, .wbp-editor .wbp-editor-shell:not(.is-popup) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card__icon{ width:38px!important; height:38px!important; } .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-preview-tools.wbp-simple-tools{ grid-column:1!important; grid-row:1!important; display:grid!important; grid-template-columns:1fr!important; gap:8px!important; align-content:center!important; } .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card{ width:72px!important; height:auto!important; min-height:72px!important; aspect-ratio:auto!important; padding:8px 6px!important; } } /* v2.4 inline Wishi asset for staging-safe plugin editor updates */ .wbp-editor .wbp-wishi-decor{ content:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxODAgMjIwIiByb2xlPSJpbWciIGFyaWEtbGFiZWw9IiI+CiAgPGRlZnM+CiAgICA8bGluZWFyR3JhZGllbnQgaWQ9Indpc2hpQm9keSIgeDE9IjMzIiB5MT0iMTc0IiB4Mj0iMTQyIiB5Mj0iMzAiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iIzYxRENGRiIvPgogICAgICA8c3RvcCBvZmZzZXQ9Ii4yNiIgc3RvcC1jb2xvcj0iI0ZGNzJDNyIvPgogICAgICA8c3RvcCBvZmZzZXQ9Ii41NiIgc3RvcC1jb2xvcj0iI0ZGRTM4MCIvPgogICAgICA8c3RvcCBvZmZzZXQ9Ii43OCIgc3RvcC1jb2xvcj0iI0I5NjlGRiIvPgogICAgICA8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiM0N0RGRkYiLz4KICAgIDwvbGluZWFyR3JhZGllbnQ+CiAgICA8cmFkaWFsR3JhZGllbnQgaWQ9Indpc2hpR2xvdyIgY3g9IjUwJSIgY3k9IjQ2JSIgcj0iNTglIj4KICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iI2ZmZiIgc3RvcC1vcGFjaXR5PSIuOTIiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIuNDUiIHN0b3AtY29sb3I9IiNmZmVmZjgiIHN0b3Atb3BhY2l0eT0iLjM0Ii8+CiAgICAgIDxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iI2ZmZiIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8L3JhZGlhbEdyYWRpZW50PgogICAgPGZpbHRlciBpZD0ic29mdFNoYWRvdyIgeD0iLTMwJSIgeT0iLTI0JSIgd2lkdGg9IjE2MCUiIGhlaWdodD0iMTYwJSI+CiAgICAgIDxmZURyb3BTaGFkb3cgZHg9IjAiIGR5PSIxMiIgc3RkRGV2aWF0aW9uPSI5IiBmbG9vZC1jb2xvcj0iIzZkMmZlMCIgZmxvb2Qtb3BhY2l0eT0iLjIyIi8+CiAgICA8L2ZpbHRlcj4KICA8L2RlZnM+CiAgPGcgZmlsdGVyPSJ1cmwoI3NvZnRTaGFkb3cpIj4KICAgIDxwYXRoIGQ9Ik04NiAyMDBjLTM1IDAtNjQtMjMtNjQtNTcgMC0yOCAyMS00OCA0NC01NyA1LTIzIDI5LTQ4IDY1LTcwLTEyIDIyLTUgMzkgMTQgNTAgMTcgMTAgMjYgMjkgMjEgNDktNCAxNy0xNyAyOC0zNSAzNC01IDMxLTIwIDUxLTQ1IDUxWiIgZmlsbD0idXJsKCN3aXNoaUJvZHkpIi8+CiAgICA8cGF0aCBkPSJNOTUgNjljMTUtMjAgMjItMzkgMjAtNTcgMjYgMzEgMTAgNTctMTIgNzgtMTAgMTAtMTcgMTgtMTUgMzEtMTUtMTgtOS0zNyA3LTUyWiIgZmlsbD0iI0ZGQzg0RiIgb3BhY2l0eT0iLjgiLz4KICAgIDxwYXRoIGQ9Ik04MyA4MWMxOC0xNCAyNy0zNCAzMC01OSAxMCA0MC02IDU4LTMwIDc1LTE1IDExLTIwIDI0LTE1IDM5LTE3LTI1LTktNDMgMTUtNTVaIiBmaWxsPSIjRkY3RkM4IiBvcGFjaXR5PSIuNzIiLz4KICAgIDxwYXRoIGQ9Ik0xMTAgOTBjMTctMTEgMjgtMjkgMjktNTEgMTcgMzUgNCA1OC0yNiA3Ni0xMyA4LTE4IDE5LTE0IDMxLTE3LTIxLTEyLTQwIDExLTU2WiIgZmlsbD0iIzY1RDdGRiIgb3BhY2l0eT0iLjcyIi8+CiAgICA8cGF0aCBkPSJNNDIgMTQ4Yy0xNCAxMC0yNyA4LTM1LTMgMTMgMCAyMi04IDI5LTIxbDEzIDhjLTIgNi00IDExLTcgMTZaIiBmaWxsPSIjRkY4QkNBIi8+CiAgICA8cGF0aCBkPSJNMTM4IDE0OGMxNCAxMCAyNyA4IDM1LTMtMTMgMC0yMi04LTI5LTIxbC0xMyA4YzIgNiA0IDExIDcgMTZaIiBmaWxsPSIjNzBEOUZGIi8+CiAgICA8ZWxsaXBzZSBjeD0iOTAiIGN5PSIxMjciIHJ4PSI1NCIgcnk9IjUyIiBmaWxsPSJ1cmwoI3dpc2hpR2xvdykiLz4KICAgIDxlbGxpcHNlIGN4PSI2OCIgY3k9IjEzNSIgcng9IjEzIiByeT0iMTciIGZpbGw9IiMyQTE3NDYiLz4KICAgIDxlbGxpcHNlIGN4PSIxMTIiIGN5PSIxMzUiIHJ4PSIxMyIgcnk9IjE3IiBmaWxsPSIjMkExNzQ2Ii8+CiAgICA8Y2lyY2xlIGN4PSI2MyIgY3k9IjEyOCIgcj0iNSIgZmlsbD0iI2ZmZiIvPgogICAgPGNpcmNsZSBjeD0iMTA3IiBjeT0iMTI4IiByPSI1IiBmaWxsPSIjZmZmIi8+CiAgICA8Y2lyY2xlIGN4PSI3MyIgY3k9IjE0MyIgcj0iMyIgZmlsbD0iIzlCRTdGRiIgb3BhY2l0eT0iLjgiLz4KICAgIDxjaXJjbGUgY3g9IjExNyIgY3k9IjE0MyIgcj0iMyIgZmlsbD0iIzlCRTdGRiIgb3BhY2l0eT0iLjgiLz4KICAgIDxwYXRoIGQ9Ik03OCAxNTdjNyAxMSAxOCAxMSAyNSAwIiBmaWxsPSJub25lIiBzdHJva2U9IiM2QTFCNTIiIHN0cm9rZS13aWR0aD0iNiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+CiAgICA8Y2lyY2xlIGN4PSI0OCIgY3k9IjE1MCIgcj0iOCIgZmlsbD0iI0ZGOENCNSIgb3BhY2l0eT0iLjU1Ii8+CiAgICA8Y2lyY2xlIGN4PSIxMzIiIGN5PSIxNTAiIHI9IjgiIGZpbGw9IiNGRjhDQjUiIG9wYWNpdHk9Ii41NSIvPgogICAgPHBhdGggZD0iTTg4IDk4bDUgMTAgMTEgMi04IDggMiAxMS0xMC01LTEwIDUgMi0xMS04LTggMTEtMiA1LTEwWiIgZmlsbD0iI2ZmZiIgb3BhY2l0eT0iLjc4Ii8+CiAgPC9nPgogIDxnIGZpbGw9IiNmZmY3YTYiIG9wYWNpdHk9Ii45MiI+CiAgICA8cGF0aCBkPSJNMjQgNzJsNCA4IDggNC04IDQtNCA4LTQtOC04LTQgOC00IDQtOFoiLz4KICAgIDxwYXRoIGQ9Ik0xNTEgOTBsMyA2IDYgMy02IDMtMyA2LTMtNi02LTMgNi0zIDMtNloiLz4KICAgIDxwYXRoIGQ9Ik00NiAzMmwzIDYgNiAzLTYgMy0zIDYtMy02LTYtMyA2LTMgMy02WiIvPgogICAgPHBhdGggZD0iTTE0MyAxOWw0IDggOCA0LTggNC00IDgtNC04LTgtNCA4LTQgNC04WiIvPgogIDwvZz4KPC9zdmc+Cg==")!important; } /* v2.5 exact Wishi + reference tool buttons */ .wbp-editor .wbp-wishi-decor{ content:url("data:image/webp;base64,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")!important; width:64px!important; height:auto!important; object-fit:contain!important; background:transparent!important; border:0!important; box-shadow:none!important; filter:drop-shadow(0 12px 22px rgba(127,46,230,.18))!important; } .wbp-editor .wbp-tool-card{ position:relative!important; overflow:hidden!important; border:1px solid #eadcf7!important; border-radius:24px!important; background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,250,244,.92))!important; box-shadow:0 14px 34px rgba(54,24,92,.08)!important; color:#1d1233!important; font-weight:900!important; text-align:center!important; } .wbp-editor .wbp-tool-card::before{ content:""!important; position:absolute!important; inset:0!important; background:radial-gradient(circle at 82% 15%,rgba(255,148,31,.14),transparent 34%)!important; pointer-events:none!important; } .wbp-editor .wbp-tool-card__media, .wbp-editor .wbp-tool-card__icon{ position:relative!important; z-index:1!important; display:grid!important; place-items:center!important; width:56px!important; height:56px!important; margin:0 auto 8px!important; border-radius:18px!important; background:linear-gradient(135deg,#f33651 0%,#df2f86 52%,#982cdb 100%)!important; color:#fff!important; box-shadow:0 14px 28px rgba(127,46,230,.18)!important; } .wbp-editor .wbp-tool-card__media img, .wbp-editor .wbp-tool-card__media video{ width:100%!important; height:100%!important; object-fit:cover!important; border-radius:18px!important; opacity:.92!important; } .wbp-editor .wbp-tool-card__icon svg{ width:30px!important; height:30px!important; color:#fff!important; stroke:currentColor!important; } .wbp-editor .wbp-tool-card b{ position:relative!important; z-index:1!important; display:block!important; margin:0!important; color:#1d1233!important; font-size:16px!important; line-height:1.05!important; font-weight:950!important; } .wbp-editor .wbp-tool-card > span:not(.wbp-tool-card__media):not(.wbp-tool-card__icon){ position:relative!important; z-index:1!important; display:block!important; margin-top:5px!important; color:#716586!important; font-size:13px!important; line-height:1.05!important; font-weight:850!important; } .wbp-editor .wbp-tool-card:hover{ transform:translateY(-2px)!important; box-shadow:0 18px 38px rgba(54,24,92,.14)!important; } .wbp-editor .wbp-editor-shell:not(.is-popup) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card{ width:72px!important; height:74px!important; min-height:74px!important; padding:8px 4px!important; border-radius:18px!important; } .wbp-editor .wbp-editor-shell:not(.is-popup) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card__media, .wbp-editor .wbp-editor-shell:not(.is-popup) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card__icon{ width:42px!important; height:42px!important; margin:0 auto 4px!important; border-radius:14px!important; } .wbp-editor .wbp-editor-shell:not(.is-popup) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card__icon svg{ width:23px!important; height:23px!important; } .wbp-editor .wbp-editor-shell:not(.is-popup) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card b{ display:block!important; font-size:12px!important; } .wbp-editor .wbp-editor-shell:not(.is-popup) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card > span:not(.wbp-tool-card__media):not(.wbp-tool-card__icon){ display:none!important; } .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-preview-tools.wbp-simple-tools{ width:118px!important; } .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card{ width:118px!important; min-height:116px!important; height:auto!important; padding:16px 8px!important; border-radius:22px!important; } .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card b{ font-size:16px!important; } .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card > span:not(.wbp-tool-card__media):not(.wbp-tool-card__icon){ display:block!important; font-size:13px!important; } @media(max-width:720px){ .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-preview-layout{ grid-template-columns:118px minmax(0,1fr)!important; gap:10px!important; } .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-video-container{ grid-column:2!important; width:100%!important; height:auto!important; } .wbp-editor .wbp-editor-shell:not(.is-popup) .wbp-preview-tools.wbp-simple-tools{ width:72px!important; } } /* v2.6 reference-locked magic UI: Wishi, glossy tools, right rail and warm CTA */ .wbp-editor{ --wbp-ink:#20133c; --wbp-muted:#5f5271; --wbp-purple:#6b22c8; --wbp-purple-dark:#32115f; --wbp-magenta:#dd2d8d; --wbp-pink:#f23467; --wbp-orange:#ff9825; --wbp-gold:#ffc24a; --wbp-line:#eadcf7; } .wbp-editor .wbp-editor-shell{ background: radial-gradient(circle at 82% 13%, rgba(255,236,165,.42), transparent 10%), radial-gradient(circle at 86% 88%, rgba(209,151,255,.18), transparent 18%), radial-gradient(circle at 7% 92%, rgba(255,194,74,.16), transparent 16%), linear-gradient(180deg,#fff,#fff9ff 56%,#fff)!important; } .wbp-editor .wbp-editor-shell::before, .wbp-editor .wbp-editor-shell::after{ content:""!important; position:absolute!important; z-index:1!important; pointer-events:none!important; } .wbp-editor .wbp-editor-shell::before{ width:190px!important; height:72px!important; right:36px!important; top:72px!important; background: radial-gradient(circle at 9% 48%, rgba(255,194,74,.72) 0 2px, transparent 3px), radial-gradient(circle at 25% 12%, rgba(131,45,218,.58) 0 2px, transparent 3px), radial-gradient(circle at 54% 62%, rgba(255,93,173,.50) 0 2px, transparent 3px), linear-gradient(110deg, transparent 0 8%, rgba(223,47,134,.10) 28%, rgba(255,152,37,.18) 48%, transparent 73%); filter:blur(.1px); transform:rotate(-10deg); opacity:.82; } .wbp-editor .wbp-editor-shell::after{ left:28px!important; bottom:124px!important; width:112px!important; height:28px!important; border-radius:999px!important; background:linear-gradient(90deg,transparent,rgba(255,194,74,.30),rgba(210,106,255,.22),transparent)!important; filter:blur(8px)!important; } .wbp-editor .wbp-spark{ width:0!important; height:0!important; border-radius:0!important; background:transparent!important; box-shadow:none!important; } .wbp-editor .wbp-spark::before{ content:"✦"!important; display:block!important; color:var(--wbp-gold)!important; font-size:22px!important; line-height:1!important; text-shadow:0 0 12px rgba(255,194,74,.75)!important; } .wbp-editor .wbp-spark--two::before{color:#8a35db!important;font-size:16px!important} .wbp-editor .wbp-spark--three::before{color:#f54aa0!important;font-size:14px!important} .wbp-editor .wbp-wishi-decor{ z-index:7!important; width:82px!important; filter:drop-shadow(0 14px 24px rgba(127,46,230,.17)) drop-shadow(0 0 16px rgba(255,184,87,.22))!important; } .wbp-editor .wbp-nav-btn, .wbp-editor .wbp-mode-pill{ background:rgba(255,255,255,.86)!important; border:1px solid rgba(229,211,246,.96)!important; box-shadow:0 8px 26px rgba(50,20,95,.07)!important; backdrop-filter:blur(8px)!important; } .wbp-editor .wbp-nav-btn{ color:var(--wbp-purple-dark)!important; } .wbp-editor .wbp-mode-pill{ color:#5f5271!important; font-weight:650!important; } .wbp-editor .wbp-mode-pill b{ color:var(--wbp-purple)!important; font-weight:950!important; } .wbp-editor .wbp-video-container{ border:6px solid #fff!important; border-radius:28px!important; box-shadow: 0 20px 42px rgba(50,20,95,.14), 0 0 0 1px rgba(211,166,245,.70), 0 0 34px rgba(255,194,74,.16)!important; } .wbp-editor .wbp-video-container::after{ content:""!important; position:absolute!important; inset:-7px!important; z-index:1!important; border-radius:32px!important; pointer-events:none!important; background: radial-gradient(circle at 8% 7%, rgba(255,255,255,.55), transparent 12%), radial-gradient(circle at 96% 12%, rgba(255,194,74,.30), transparent 13%), linear-gradient(135deg, rgba(123,43,214,.14), transparent 32%, rgba(255,152,37,.16)); opacity:.68!important; } .wbp-editor .wbp-preview-tools.wbp-simple-tools{ position:relative!important; z-index:4!important; } .wbp-editor .wbp-preview-tools.wbp-simple-tools .wbp-tool-card{ position:relative!important; display:grid!important; place-items:center!important; overflow:visible!important; border:1px solid rgba(234,220,247,.98)!important; background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(255,252,255,.94))!important; box-shadow:0 14px 34px rgba(50,20,95,.09)!important; } .wbp-editor .wbp-preview-tools.wbp-simple-tools .wbp-tool-card::before{ content:"✦"!important; position:absolute!important; top:12px!important; right:11px!important; z-index:3!important; width:auto!important; height:auto!important; color:var(--wbp-gold)!important; font-size:19px!important; line-height:1!important; background:transparent!important; text-shadow:0 0 10px rgba(255,194,74,.85)!important; } .wbp-editor .wbp-preview-tools.wbp-simple-tools .wbp-tool-card::after{ content:""!important; position:absolute!important; inset:auto 12px 10px 12px!important; height:18px!important; border-radius:999px!important; background:linear-gradient(90deg,transparent,rgba(223,47,134,.08),rgba(255,152,37,.12),transparent)!important; filter:blur(8px)!important; pointer-events:none!important; } .wbp-editor .wbp-preview-tools.wbp-simple-tools .wbp-tool-card__media, .wbp-editor .wbp-preview-tools.wbp-simple-tools .wbp-tool-card__icon{ position:relative!important; z-index:2!important; display:grid!important; place-items:center!important; margin:0 auto 9px!important; background:transparent!important; box-shadow:none!important; color:var(--wbp-purple)!important; overflow:visible!important; } .wbp-editor .wbp-preview-tools.wbp-simple-tools .wbp-tool-card__media > *, .wbp-editor .wbp-preview-tools.wbp-simple-tools .wbp-tool-card__icon--letters svg{ display:none!important; } .wbp-editor .wbp-preview-tools.wbp-simple-tools .wbp-tool-card__media::before, .wbp-editor .wbp-preview-tools.wbp-simple-tools .wbp-tool-card__icon::before{ content:""!important; display:block!important; width:64px!important; height:64px!important; background-repeat:no-repeat!important; background-position:center!important; background-size:contain!important; filter:drop-shadow(0 9px 14px rgba(96,31,170,.15))!important; } .wbp-editor .wbp-preview-tools.wbp-simple-tools .wbp-tool-card:nth-child(1) .wbp-tool-card__media::before{ border-radius:18px!important; background: radial-gradient(circle at 74% 26%, #fff 0 5px, transparent 6px), linear-gradient(135deg,#8427de 0%,#b531dc 45%,#ff7b30 100%)!important; clip-path:path("M11 9 H53 A7 7 0 0 1 60 16 V52 A7 7 0 0 1 53 59 H11 A7 7 0 0 1 4 52 V16 A7 7 0 0 1 11 9 Z"); } .wbp-editor .wbp-preview-tools.wbp-simple-tools .wbp-tool-card:nth-child(1) .wbp-tool-card__media::after{ content:""!important; position:absolute!important; left:13px!important; bottom:15px!important; width:39px!important; height:24px!important; background:linear-gradient(135deg,#4a148e,#7f23d1 58%,#d94aa7)!important; clip-path:polygon(0 100%,25% 42%,43% 72%,62% 28%,100% 100%)!important; border-radius:3px!important; } .wbp-editor .wbp-preview-tools.wbp-simple-tools .wbp-tool-card:nth-child(2) .wbp-tool-card__icon::before{ content:"T"!important; width:auto!important; height:auto!important; font-family:Georgia,serif!important; font-size:62px!important; line-height:.85!important; font-weight:900!important; background:linear-gradient(180deg,#ff625d,#c029d6 76%,#53169b)!important; -webkit-background-clip:text!important; background-clip:text!important; color:transparent!important; filter:drop-shadow(0 3px 0 #fff) drop-shadow(0 8px 12px rgba(96,31,170,.18))!important; } .wbp-editor .wbp-preview-tools.wbp-simple-tools .wbp-tool-card:nth-child(3) .wbp-tool-card__icon svg{ display:block!important; width:58px!important; height:58px!important; color:transparent!important; stroke:url(#wbp-music-gradient)!important; filter:drop-shadow(0 9px 12px rgba(223,47,134,.16))!important; } .wbp-editor .wbp-preview-tools.wbp-simple-tools .wbp-tool-card:nth-child(3) .wbp-tool-card__icon{ color:#f05!important; } .wbp-editor .wbp-preview-tools.wbp-simple-tools .wbp-tool-card:nth-child(3) .wbp-tool-card__icon svg path{ stroke:#f36a5a!important; } .wbp-editor .wbp-preview-tools.wbp-simple-tools .wbp-tool-card:nth-child(3) .wbp-tool-card__icon svg circle:first-of-type{ fill:#6f22c8!important; } .wbp-editor .wbp-preview-tools.wbp-simple-tools .wbp-tool-card:nth-child(3) .wbp-tool-card__icon svg circle:last-of-type{ fill:#f05f59!important; } .wbp-editor .wbp-preview-tools.wbp-simple-tools .wbp-tool-card:nth-child(4) .wbp-tool-card__icon{ color:var(--wbp-purple)!important; } .wbp-editor .wbp-preview-tools.wbp-simple-tools .wbp-tool-card:nth-child(4) .wbp-tool-card__icon svg{ display:block!important; width:58px!important; height:58px!important; color:var(--wbp-purple)!important; stroke:currentColor!important; filter:drop-shadow(0 8px 12px rgba(96,31,170,.15))!important; } .wbp-editor .wbp-preview-tools.wbp-simple-tools .wbp-tool-card b{ position:relative!important; z-index:2!important; margin:0!important; color:#251446!important; font-weight:900!important; letter-spacing:0!important; } .wbp-editor .wbp-preview-tools.wbp-simple-tools .wbp-tool-card > span:not(.wbp-tool-card__media):not(.wbp-tool-card__icon){ display:none!important; } .wbp-editor .wbp-actions .wbp-btn{ border-radius:22px!important; min-height:70px!important; font-size:21px!important; font-weight:950!important; letter-spacing:0!important; } .wbp-editor .wbp-actions .wbp-btn-outline{ border:1px solid rgba(218,198,239,.96)!important; color:var(--wbp-purple)!important; background:rgba(255,255,255,.95)!important; box-shadow:0 10px 28px rgba(50,20,95,.06)!important; } .wbp-editor .wbp-actions .wbp-btn-primary{ background:linear-gradient(100deg,#f23467 0%,#df2d8d 46%,#ff9825 100%)!important; box-shadow:0 18px 38px rgba(223,47,134,.22),0 0 24px rgba(255,152,37,.20)!important; } .wbp-editor .wbp-btn__crown{ width:24px!important; height:24px!important; filter:drop-shadow(0 3px 4px rgba(135,72,0,.24))!important; } .wbp-editor .wbp-compact-advanced{ border-color:rgba(198,91,239,.50)!important; border-radius:21px!important; background:rgba(255,255,255,.86)!important; color:var(--wbp-purple)!important; box-shadow:inset 0 0 0 1px rgba(255,255,255,.65)!important; } .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced){ padding:14px 20px 18px!important; gap:12px!important; } .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-editor-topbar{ min-height:54px!important; display:grid!important; grid-template-columns:56px 1fr 56px!important; align-items:center!important; gap:10px!important; } .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-mode-pill{ justify-self:center!important; min-height:48px!important; padding:0 22px!important; font-size:16px!important; } .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-popup-close{ justify-self:end!important; } .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-nav-btn{ width:48px!important; height:48px!important; border-radius:15px!important; } .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-stage-panel{ grid-template-rows:minmax(0,1fr) auto!important; gap:14px!important; } .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-preview-layout{ grid-template-columns:minmax(0,1fr) clamp(112px,30vw,132px)!important; gap:18px!important; align-items:center!important; } .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-video-container{ grid-column:1!important; grid-row:1!important; height:min(calc(100dvh - 236px), calc((100vw - 190px) * 1.7777778))!important; justify-self:end!important; } .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-preview-tools.wbp-simple-tools{ grid-column:2!important; grid-row:1!important; width:clamp(112px,30vw,132px)!important; gap:16px!important; align-content:center!important; justify-self:start!important; } .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card{ width:100%!important; height:clamp(104px,16.2dvh,130px)!important; min-height:0!important; padding:13px 8px 11px!important; border-radius:21px!important; } .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card__media, .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card__icon{ width:62px!important; height:62px!important; margin-bottom:7px!important; } .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card b{ display:block!important; font-size:15px!important; line-height:1.05!important; } .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-wishi-decor{ top:66px!important; right:74px!important; width:76px!important; } .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-compact-controls{ width:min(660px,100%)!important; padding:14px 12px!important; border-radius:25px!important; gap:10px!important; } .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-actions{ grid-template-columns:minmax(0,.86fr) minmax(0,1.2fr)!important; gap:12px!important; } .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-actions .wbp-btn{ min-height:64px!important; border-radius:20px!important; font-size:20px!important; } .wbp-editor .wbp-editor-shell:not(.is-popup) .wbp-preview-layout{ grid-template-columns:minmax(0,1fr) clamp(78px,18vw,96px)!important; gap:12px!important; } .wbp-editor .wbp-editor-shell:not(.is-popup) .wbp-preview-tools.wbp-simple-tools{ width:clamp(78px,18vw,96px)!important; grid-template-columns:1fr!important; margin:26px 0 0!important; gap:8px!important; } .wbp-editor .wbp-editor-shell:not(.is-popup) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card{ width:100%!important; height:64px!important; min-height:64px!important; border-radius:17px!important; padding:7px 4px!important; } .wbp-editor .wbp-editor-shell:not(.is-popup) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card__media, .wbp-editor .wbp-editor-shell:not(.is-popup) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card__icon{ width:38px!important; height:38px!important; margin:0 auto 2px!important; } .wbp-editor .wbp-editor-shell:not(.is-popup) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card__media::before, .wbp-editor .wbp-editor-shell:not(.is-popup) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card__icon::before{ width:38px!important; height:38px!important; } .wbp-editor .wbp-editor-shell:not(.is-popup) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card:nth-child(2) .wbp-tool-card__icon::before{ font-size:38px!important; } .wbp-editor .wbp-editor-shell:not(.is-popup) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card svg{ width:36px!important; height:36px!important; } .wbp-editor .wbp-editor-shell:not(.is-popup) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card b{ display:block!important; font-size:10.5px!important; } .wbp-editor .wbp-editor-shell:not(.is-popup) .wbp-actions .wbp-btn{ min-height:50px!important; border-radius:17px!important; font-size:15px!important; } @media(max-width:380px){ .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced){ padding:12px 10px 14px!important; } .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-preview-layout{ grid-template-columns:minmax(0,1fr) 104px!important; gap:10px!important; } .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-video-container{ height:min(calc(100dvh - 228px), calc((100vw - 126px) * 1.7777778))!important; } .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-preview-tools.wbp-simple-tools{ width:104px!important; gap:10px!important; } .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card{ height:clamp(94px,15.2dvh,116px)!important; border-radius:18px!important; } .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card__media, .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card__icon{ width:52px!important; height:52px!important; } .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card__media::before, .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card__icon::before{ width:52px!important; height:52px!important; } .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card:nth-child(2) .wbp-tool-card__icon::before{ font-size:52px!important; } .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-actions .wbp-btn{ min-height:58px!important; font-size:17px!important; } .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-wishi-decor{ right:60px!important; width:66px!important; } } /* v2.6.1: keep reference cards structured, no overlapping labels */ .wbp-editor .wbp-preview-tools.wbp-simple-tools .wbp-tool-card{ display:flex!important; flex-direction:column!important; align-items:center!important; justify-content:center!important; gap:6px!important; } .wbp-editor .wbp-preview-tools.wbp-simple-tools .wbp-tool-card > span:not(.wbp-tool-card__media):not(.wbp-tool-card__icon){ display:none!important; } .wbp-editor .wbp-preview-tools.wbp-simple-tools .wbp-tool-card__media, .wbp-editor .wbp-preview-tools.wbp-simple-tools .wbp-tool-card__icon{ flex:0 0 auto!important; margin:0!important; } .wbp-editor .wbp-preview-tools.wbp-simple-tools .wbp-tool-card__media{ font-size:0!important; line-height:0!important; } .wbp-editor .wbp-preview-tools.wbp-simple-tools .wbp-tool-card b{ flex:0 0 auto!important; margin:0!important; } .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card{ height:clamp(98px,15.2dvh,122px)!important; padding:12px 6px 10px!important; } .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card__media, .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card__icon{ width:54px!important; height:54px!important; } .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card__media::before, .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card__icon::before{ width:54px!important; height:54px!important; } .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card:nth-child(2) .wbp-tool-card__icon::before{ font-size:54px!important; } .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card:nth-child(3) .wbp-tool-card__icon svg, .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card:nth-child(4) .wbp-tool-card__icon svg{ width:50px!important; height:50px!important; } .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card b{ font-size:15px!important; } .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-actions .wbp-btn{ min-height:58px!important; font-size:17px!important; line-height:1.05!important; white-space:normal!important; } .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-actions .wbp-btn-outline{ gap:7px!important; font-size:14px!important; white-space:nowrap!important; overflow-wrap:normal!important; } .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-actions{ grid-template-columns:minmax(0,.92fr) minmax(0,1.24fr)!important; } @media(max-width:380px){ .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card{ height:clamp(88px,14.8dvh,108px)!important; gap:3px!important; } .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card b{ font-size:14px!important; } .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-actions .wbp-btn, .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-actions .wbp-btn-outline{ font-size:16px!important; } } /* v2.6.2: override older high-specificity rules that re-showed tool subtitles */ .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card > span:not(.wbp-tool-card__media):not(.wbp-tool-card__icon), .wbp-editor .wbp-editor-shell:not(.is-popup) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card > span:not(.wbp-tool-card__media):not(.wbp-tool-card__icon){ display:none!important; } .wbp-editor .wbp-editor-shell .wbp-preview-tools.wbp-simple-tools #quickBackgroundVisual{ color:transparent!important; font-size:0!important; line-height:0!important; text-indent:-9999px!important; } .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) #downloadImage{ gap:6px!important; padding:0 8px!important; } .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) #downloadImage span{ display:inline!important; white-space:nowrap!important; font-size:13px!important; line-height:1!important; } .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-stage-panel .wbp-actions #downloadImage span{ display:inline!important; white-space:nowrap!important; overflow-wrap:normal!important; word-break:normal!important; font-size:13px!important; } .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) #downloadImage svg{ width:20px!important; height:20px!important; } /* v2.7 advanced reference layout: left cards, right preview, lower control desk */ .wbp-editor .wbp-editor-shell.is-popup.is-advanced{ display:grid!important; grid-template-columns:210px minmax(0,1fr)!important; grid-template-rows:64px minmax(0,52dvh) minmax(0,1fr)!important; gap:16px 22px!important; padding:16px 20px 18px!important; background: radial-gradient(circle at 86% 10%, rgba(255,194,74,.25), transparent 11%), radial-gradient(circle at 4% 58%, rgba(191,105,255,.13), transparent 18%), linear-gradient(180deg,#fff,#fffaff 58%,#fff)!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-editor-topbar{ grid-column:1 / -1!important; grid-row:1!important; display:grid!important; grid-template-columns:54px minmax(0,1fr) auto 54px!important; gap:10px!important; align-items:center!important; min-height:64px!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-editor-topbar::before{ content:"Editor avanzado\A Personaliza tu felicitación"!important; grid-column:2!important; white-space:pre!important; color:#24143f!important; font-weight:950!important; font-size:20px!important; line-height:1.08!important; } /* v2.7.1: advanced internals leave form panel so toolbar can sit left of preview */ .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-form-panel, .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-controls-scroll, .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-panel{ display:contents!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-toolbar{ grid-column:1!important; grid-row:2!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-tabs{ grid-column:1 / -1!important; grid-row:3!important; align-self:start!important; margin:0 0 0!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-grid{ grid-column:1 / -1!important; grid-row:3!important; align-self:stretch!important; margin-top:62px!important; min-height:0!important; overflow-y:auto!important; padding:14px 18px 18px!important; border-radius:0 0 22px 22px!important; border:1px solid rgba(234,220,247,.98)!important; border-top:0!important; background:rgba(255,255,255,.88)!important; box-shadow:0 16px 44px rgba(50,20,95,.08)!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-actions{ grid-column:1 / -1!important; grid-row:3!important; align-self:end!important; justify-self:end!important; position:relative!important; z-index:6!important; display:flex!important; gap:10px!important; margin:0 18px 14px 0!important; padding:0!important; background:transparent!important; border:0!important; } @media(max-width:760px){ .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-grid{ margin-top:58px!important; padding:12px 10px 54px!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-actions{ margin:0 10px 10px 0!important; } } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-editor-topbar::after{ content:"✦"!important; position:absolute!important; left:246px!important; top:17px!important; color:var(--wbp-gold)!important; font-size:20px!important; text-shadow:0 0 12px rgba(255,194,74,.8)!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-editor-back{ grid-column:1!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-mode-pill{ grid-column:3!important; justify-self:end!important; min-height:46px!important; padding:0 20px!important; font-size:15px!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-popup-close{ grid-column:4!important; justify-self:end!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-nav-btn{ width:48px!important; height:48px!important; border-radius:16px!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-stage-panel{ grid-column:2!important; grid-row:2!important; display:block!important; min-height:0!important; height:100%!important; max-height:none!important; padding:0!important; overflow:visible!important; background:transparent!important; border:0!important; box-shadow:none!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-preview-layout{ display:block!important; width:100%!important; height:100%!important; min-height:0!important; overflow:visible!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-video-container{ height:100%!important; width:auto!important; max-width:100%!important; margin:0 auto!important; border-radius:26px!important; border-width:6px!important; box-shadow: 0 20px 50px rgba(50,20,95,.14), 0 0 0 1px rgba(211,166,245,.78), 0 0 32px rgba(255,194,74,.14)!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-wishi-decor{ top:72px!important; right:46px!important; width:78px!important; z-index:8!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-preview-tools.wbp-simple-tools{ grid-column:1!important; grid-row:2!important; display:grid!important; grid-template-columns:1fr!important; grid-template-rows:repeat(6,minmax(0,1fr))!important; gap:10px!important; width:100%!important; height:100%!important; margin:0!important; padding:0!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-preview-tools.wbp-simple-tools .wbp-tool-card, .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-toolbar .wbp-advanced-tool{ min-height:0!important; width:100%!important; height:100%!important; padding:10px 12px!important; border-radius:14px!important; background:rgba(255,255,255,.92)!important; border:1px solid rgba(234,220,247,.98)!important; box-shadow:0 12px 28px rgba(50,20,95,.07)!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-toolbar{ grid-column:1!important; grid-row:2!important; display:grid!important; grid-template-columns:1fr!important; grid-template-rows:repeat(6,minmax(0,1fr))!important; gap:10px!important; width:100%!important; height:100%!important; margin:0!important; padding:0!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-tool{ display:grid!important; grid-template-columns:56px minmax(0,1fr)!important; grid-template-rows:auto auto!important; align-items:center!important; column-gap:10px!important; text-align:left!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-tool > span{ grid-row:1 / 3!important; grid-column:1!important; width:44px!important; height:44px!important; margin:0!important; border-radius:14px!important; background:linear-gradient(135deg,rgba(123,43,214,.14),rgba(223,47,134,.10))!important; color:var(--wbp-purple)!important; font-size:22px!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-tool b{ grid-column:2!important; margin:0!important; color:#24143f!important; font-size:15px!important; line-height:1.05!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-tool small{ grid-column:2!important; display:block!important; margin:3px 0 0!important; color:#776a86!important; font-size:12px!important; line-height:1.05!important; font-weight:700!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-tool.is-active{ border-color:#c44df0!important; box-shadow:0 0 0 2px rgba(196,77,240,.15),0 12px 28px rgba(50,20,95,.08)!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-compact-controls{ display:none!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-form-panel{ grid-column:1 / -1!important; grid-row:3!important; display:block!important; min-height:0!important; height:100%!important; max-height:none!important; padding:12px 18px 16px!important; overflow:hidden!important; border-radius:24px!important; border:1px solid rgba(234,220,247,.98)!important; background:rgba(255,255,255,.88)!important; box-shadow:0 16px 44px rgba(50,20,95,.08)!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-controls-scroll{ height:100%!important; overflow-y:auto!important; padding:0 4px 8px!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-panel{ display:block!important; padding:0!important; margin:0!important; background:transparent!important; border:0!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-current-target{ display:none!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-tabs{ position:sticky!important; top:0!important; z-index:5!important; display:grid!important; grid-template-columns:repeat(3,1fr)!important; margin:0 0 14px!important; border:1px solid rgba(218,198,239,.96)!important; border-radius:18px!important; overflow:hidden!important; background:#fff!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-tabs button{ min-height:48px!important; border:0!important; background:#fff!important; color:#62566e!important; font-weight:900!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-tabs button.is-active, .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-tabs button:first-child{ background:rgba(123,43,214,.06)!important; color:var(--wbp-purple)!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-grid{ display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr))!important; gap:12px 18px!important; padding:0!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-section-title{ grid-column:1 / -1!important; margin:4px 0 -2px!important; padding:8px 12px!important; border-radius:12px!important; background:linear-gradient(90deg,rgba(223,47,134,.08),rgba(255,152,37,.05))!important; color:var(--wbp-purple)!important; font-size:13px!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-grid label{ padding:0!important; gap:7px!important; background:transparent!important; border:0!important; color:#4d3c66!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-grid input, .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-grid select{ min-height:42px!important; height:42px!important; border-radius:12px!important; border:1px solid #d8cce8!important; background:#fff!important; } @media(max-width:760px){ .wbp-editor .wbp-editor-shell.is-popup.is-advanced{ grid-template-columns:86px minmax(0,1fr)!important; grid-template-rows:58px minmax(0,54dvh) minmax(0,1fr)!important; gap:10px!important; padding:10px!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-editor-topbar{ grid-template-columns:46px minmax(0,1fr) auto 46px!important; min-height:58px!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-editor-topbar::before{ font-size:15px!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-mode-pill{ min-height:42px!important; padding:0 14px!important; font-size:13px!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-nav-btn{ width:42px!important; height:42px!important; border-radius:14px!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-toolbar{ gap:8px!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-tool{ display:flex!important; flex-direction:column!important; justify-content:center!important; gap:4px!important; padding:6px!important; text-align:center!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-tool > span{ width:34px!important; height:34px!important; font-size:17px!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-tool b{ font-size:11px!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-tool small{ display:none!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-video-container{ border-radius:18px!important; border-width:5px!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-wishi-decor{ top:62px!important; right:26px!important; width:56px!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-form-panel{ padding:10px!important; border-radius:20px!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-grid{ grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:10px!important; } } /* v2.7.2 final advanced placement after all responsive rules */ .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-form-panel, .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-controls-scroll, .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-panel{ display:contents!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-toolbar{ grid-column:1!important; grid-row:2!important; display:grid!important; grid-template-columns:1fr!important; grid-template-rows:repeat(6,minmax(0,1fr))!important; gap:10px!important; width:100%!important; height:100%!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-tabs{ grid-column:1 / -1!important; grid-row:3!important; align-self:start!important; margin:0!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-grid{ grid-column:1 / -1!important; grid-row:3!important; align-self:stretch!important; margin-top:62px!important; min-height:0!important; overflow-y:auto!important; padding:14px 18px 58px!important; border-radius:0 0 22px 22px!important; border:1px solid rgba(234,220,247,.98)!important; border-top:0!important; background:rgba(255,255,255,.88)!important; box-shadow:0 16px 44px rgba(50,20,95,.08)!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-actions{ grid-column:1 / -1!important; grid-row:3!important; align-self:end!important; justify-self:end!important; position:relative!important; z-index:6!important; display:flex!important; gap:10px!important; margin:0 18px 14px 0!important; padding:0!important; background:transparent!important; border:0!important; } @media(max-width:760px){ .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-toolbar{ gap:8px!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-grid{ margin-top:58px!important; padding:12px 10px 58px!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; } } /* v2.7.3 final reference sizing for 720px advanced mockup */ .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-preview-tools.wbp-simple-tools{ display:none!important; } @media(max-width:760px){ .wbp-editor .wbp-editor-shell.is-popup.is-advanced{ grid-template-columns:190px minmax(0,1fr)!important; grid-template-rows:58px minmax(0,54dvh) minmax(0,1fr)!important; gap:10px!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-tool{ display:grid!important; grid-template-columns:50px minmax(0,1fr)!important; grid-template-rows:auto auto!important; text-align:left!important; column-gap:10px!important; padding:8px 10px!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-tool > span{ grid-row:1 / 3!important; width:38px!important; height:38px!important; font-size:18px!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-tool b{ font-size:13px!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-tool small{ display:block!important; font-size:11px!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-stage-panel{ grid-column:2!important; } } /* v2.7.4 advanced panel locked to the reference: message first, key controls only */ .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-grid{ grid-template-columns:2fr repeat(3,minmax(150px,1fr))!important; align-content:start!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-section-title{ display:none!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-message-field{ grid-column:1 / 3!important; grid-row:1 / 4!important; display:grid!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-message-field textarea{ min-height:128px!important; height:100%!important; resize:none!important; padding:18px!important; border-radius:14px!important; border:1px solid #d8cce8!important; background:#fff!important; color:#28183d!important; font:800 18px/1.5 inherit!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.9)!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-grid label:has(#advancedTarget), .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-grid label:has(#advancedBackgroundCategory), .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-grid label:has(#advancedPhraseCategory), .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-grid label:has(#advancedMusicCategory), .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-grid label:has(#advancedStrokeColor), .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-grid label:has(#advancedStrokeWidth), .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-grid label:has(#advancedBgOpacity), .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-grid label:has(#advancedBoxWidth), .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-grid label:has(#advancedBoxHeight){ display:none!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-grid label:has(#advancedBackgroundSelect), .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-grid label:has(#advancedPhraseSelect), .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-grid label:has(#advancedMusicSelect), .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-grid label:has(#advancedFont), .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-grid label:has(#advancedTextColor), .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-grid label:has(#advancedFontSize){ display:grid!important; padding:0!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-grid label:has(#advancedTextColor) input{ width:100%!important; padding:4px!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-grid label:has(#advancedFontSize){ grid-column:3 / 5!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-grid input[type="range"]{ accent-color:#8a22d8!important; } @media(max-width:760px){ .wbp-editor .wbp-editor-shell.is-popup.is-advanced{ grid-template-rows:58px minmax(0,51dvh) minmax(0,1fr)!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-grid{ grid-template-columns:repeat(4,minmax(0,1fr))!important; gap:9px!important; padding:12px 12px 50px!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-message-field{ grid-column:1 / 3!important; grid-row:1 / 4!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-message-field textarea{ min-height:112px!important; padding:14px!important; font-size:16px!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-grid label:has(#advancedFontSize){ grid-column:3 / 5!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-grid label span{ font-size:11px!important; line-height:1.1!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-grid input, .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-grid select{ min-height:38px!important; height:38px!important; font-size:12px!important; } } /* v2.8 aesthetic + responsive authority layer: compact, fullscreen simple and advanced */ .wbp-editor{ --wbp-ui-radius:24px; --wbp-ui-line:rgba(222,199,244,.95); --wbp-ui-card:rgba(255,255,255,.92); --wbp-ui-shadow:0 20px 54px rgba(45,18,77,.12); isolation:isolate; } .wbp-editor .wbp-editor-shell{ border-radius:var(--wbp-ui-radius)!important; border:1px solid var(--wbp-ui-line)!important; background: radial-gradient(circle at 86% 8%,rgba(255,210,87,.34),transparent 14%), radial-gradient(circle at 6% 92%,rgba(226,45,141,.11),transparent 18%), linear-gradient(180deg,#fff,#fffafe 54%,#fff)!important; box-shadow:var(--wbp-ui-shadow)!important; } .wbp-editor .wbp-video-container{ border:6px solid #fff!important; border-radius:28px!important; background:#120b1d!important; box-shadow:0 22px 50px rgba(41,18,70,.16),0 0 0 1px rgba(211,166,245,.55)!important; } .wbp-editor .wbp-edit-hint{ bottom:12px!important; padding:8px 13px!important; font-size:.78rem!important; background:rgba(25,15,40,.52)!important; } .wbp-editor .wbp-preview-tools.wbp-simple-tools .wbp-tool-card{ border-radius:22px!important; background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(255,251,255,.94))!important; border:1px solid rgba(234,220,247,.98)!important; box-shadow:0 14px 34px rgba(45,18,77,.09)!important; } .wbp-editor .wbp-preview-tools.wbp-simple-tools .wbp-tool-card b{ color:#21113d!important; line-height:1.05!important; } .wbp-editor .wbp-actions .wbp-btn{ min-width:0!important; white-space:normal!important; overflow-wrap:anywhere!important; } .wbp-editor .wbp-preview-tools.wbp-simple-tools .wbp-tool-card:nth-child(3) .wbp-tool-card__icon svg, .wbp-editor .wbp-preview-tools.wbp-simple-tools .wbp-tool-card:nth-child(4) .wbp-tool-card__icon svg{ display:none!important; } .wbp-editor .wbp-preview-tools.wbp-simple-tools .wbp-tool-card:nth-child(3) .wbp-tool-card__icon::before, .wbp-editor .wbp-preview-tools.wbp-simple-tools .wbp-tool-card:nth-child(4) .wbp-tool-card__icon::before{ width:auto!important; height:auto!important; background:none!important; color:transparent!important; -webkit-background-clip:text!important; background-clip:text!important; line-height:.9!important; filter:drop-shadow(0 8px 12px rgba(96,31,170,.16))!important; } .wbp-editor .wbp-preview-tools.wbp-simple-tools .wbp-tool-card:nth-child(3) .wbp-tool-card__icon::before{ content:"♪"!important; font-size:clamp(35px,5.4vw,52px)!important; background-image:linear-gradient(180deg,#ff6b5b,#6f22c8)!important; } .wbp-editor .wbp-preview-tools.wbp-simple-tools .wbp-tool-card:nth-child(4) .wbp-tool-card__icon::before{ content:"↻"!important; font-size:clamp(34px,5.3vw,50px)!important; background-image:linear-gradient(180deg,#8a35db,#5b1daf)!important; } /* Compact inline editor: one contract for every viewport below desktop. Desktop receives its own complete workspace from editor-layout-v5.css. */ .wbp-editor .wbp-editor-shell:not(.is-popup){ display:grid!important; grid-template-columns:1fr!important; grid-template-rows:minmax(0,1fr) auto!important; height:clamp(340px,52dvh,470px)!important; min-height:340px!important; max-height:470px!important; gap:12px!important; padding:8px!important; overflow:hidden!important; } .wbp-editor .wbp-editor-shell:not(.is-popup) .wbp-popup-title, .wbp-editor .wbp-editor-shell:not(.is-popup) .wbp-form-panel, .wbp-editor .wbp-editor-shell:not(.is-popup) .wbp-stage-label, .wbp-editor .wbp-editor-shell:not(.is-popup) .wbp-editor-topbar{ display:none!important; } .wbp-editor .wbp-editor-shell:not(.is-popup) .wbp-stage-panel{ display:flex!important; flex-direction:column!important; min-height:0!important; padding:0!important; border:0!important; box-shadow:none!important; background:transparent!important; overflow:hidden!important; } .wbp-editor .wbp-editor-shell:not(.is-popup) .wbp-preview-layout{ flex:1 1 auto!important; display:grid!important; grid-template-columns:minmax(0,auto) 62px!important; justify-content:center!important; align-items:stretch!important; gap:8px!important; width:100%!important; height:100%!important; min-height:0!important; overflow:hidden!important; } .wbp-editor .wbp-editor-shell:not(.is-popup) .wbp-video-container{ width:auto!important; height:100%!important; min-height:0!important; max-height:100%!important; max-width:100%!important; margin:0 auto!important; aspect-ratio:var(--preview-aspect,9/16)!important; } .wbp-editor .wbp-editor-shell:not(.is-popup) .wbp-preview-tools.wbp-simple-tools{ display:grid!important; grid-template-columns:1fr!important; grid-template-rows:repeat(4,minmax(0,1fr))!important; width:62px!important; height:100%!important; gap:6px!important; margin:0!important; align-content:stretch!important; } .wbp-editor .wbp-editor-shell:not(.is-popup) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card{ width:100%!important; height:100%!important; min-height:0!important; padding:4px!important; border-radius:15px!important; gap:4px!important; } .wbp-editor .wbp-editor-shell:not(.is-popup) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card__media, .wbp-editor .wbp-editor-shell:not(.is-popup) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card__icon, .wbp-editor .wbp-editor-shell:not(.is-popup) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card__media::before, .wbp-editor .wbp-editor-shell:not(.is-popup) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card__icon::before{ width:clamp(34px,5.2vw,46px)!important; height:clamp(34px,5.2vw,46px)!important; } .wbp-editor .wbp-editor-shell:not(.is-popup) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card:nth-child(2) .wbp-tool-card__icon::before{ font-size:clamp(34px,5.2vw,46px)!important; } .wbp-editor .wbp-editor-shell:not(.is-popup) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card:nth-child(3) .wbp-tool-card__icon svg, .wbp-editor .wbp-editor-shell:not(.is-popup) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card:nth-child(4) .wbp-tool-card__icon svg{ width:clamp(32px,5vw,44px)!important; height:clamp(32px,5vw,44px)!important; } .wbp-editor .wbp-editor-shell:not(.is-popup) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card b{ display:block!important; font-size:9.5px!important; } .wbp-editor .wbp-editor-shell:not(.is-popup) .wbp-compact-controls{ width:min(620px,100%)!important; margin:0 auto!important; gap:8px!important; } .wbp-editor .wbp-editor-shell:not(.is-popup) .wbp-compact-secondary{ grid-template-columns:minmax(0,1fr) 40px!important; gap:8px!important; margin:0!important; } .wbp-editor .wbp-editor-shell:not(.is-popup) .wbp-compact-advanced{ display:inline-flex!important; align-items:center!important; justify-content:center!important; min-width:0!important; min-height:40px!important; padding:0 9px!important; font-size:12px!important; white-space:nowrap!important; } .wbp-editor .wbp-editor-shell:not(.is-popup) .wbp-actions{ position:static!important; display:grid!important; grid-template-columns:minmax(0,.92fr) minmax(0,1.2fr)!important; gap:10px!important; width:100%!important; max-width:100%!important; margin:0!important; padding:0!important; background:transparent!important; border:0!important; box-shadow:none!important; transform:none!important; } .wbp-editor .wbp-editor-shell:not(.is-popup) .wbp-actions .wbp-btn{ min-height:42px!important; border-radius:17px!important; font-size:12px!important; padding:6px 7px!important; } /* Fullscreen simple: preview and rail own the viewport; bottom actions never overlap. */ .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced){ display:grid!important; grid-template-columns:1fr!important; grid-template-rows:56px minmax(0,1fr) auto!important; height:100dvh!important; min-height:100dvh!important; max-height:100dvh!important; gap:14px!important; padding:14px clamp(14px,2.7vw,26px) 16px!important; overflow:hidden!important; } .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-editor-topbar{ display:grid!important; grid-template-columns:52px minmax(0,1fr) 52px!important; min-height:56px!important; gap:10px!important; align-items:center!important; } .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-stage-panel{ display:grid!important; grid-template-rows:minmax(0,1fr) auto!important; min-height:0!important; gap:12px!important; padding:0!important; overflow:hidden!important; border:0!important; background:transparent!important; box-shadow:none!important; } .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-preview-layout{ display:grid!important; grid-template-columns:minmax(0,auto) clamp(104px,18vw,136px)!important; justify-content:center!important; align-items:stretch!important; gap:clamp(10px,2vw,20px)!important; min-height:0!important; height:100%!important; overflow:hidden!important; } .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-video-container{ width:auto!important; height:100%!important; min-height:0!important; max-height:100%!important; max-width:100%!important; justify-self:end!important; margin:0!important; } .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-preview-tools.wbp-simple-tools{ display:grid!important; grid-template-columns:1fr!important; grid-template-rows:repeat(4,minmax(0,1fr))!important; width:clamp(104px,18vw,136px)!important; height:100%!important; min-height:0!important; gap:clamp(8px,1.6vh,14px)!important; margin:0!important; } .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card{ width:100%!important; height:100%!important; min-height:0!important; padding:clamp(7px,1.25vh,13px) 7px!important; } .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-compact-controls{ width:min(680px,100%)!important; margin:0 auto!important; padding:12px!important; border-radius:24px!important; background:rgba(255,255,255,.90)!important; border:1px solid rgba(234,220,247,.96)!important; box-shadow:0 16px 44px rgba(45,18,77,.11)!important; } .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-actions{ position:static!important; grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr)!important; gap:10px!important; transform:none!important; width:100%!important; margin:0!important; padding:0!important; } .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-actions .wbp-btn{ min-height:56px!important; border-radius:20px!important; font-size:clamp(15px,2.5vw,18px)!important; } /* Fullscreen advanced: desktop/tablet reference layout. */ .wbp-editor .wbp-editor-shell.is-popup.is-advanced{ display:grid!important; grid-template-columns:clamp(184px,22vw,228px) minmax(0,1fr)!important; grid-template-rows:60px minmax(0,52dvh) minmax(0,1fr)!important; gap:14px clamp(12px,2vw,22px)!important; height:100dvh!important; min-height:100dvh!important; max-height:100dvh!important; padding:14px clamp(12px,2.4vw,22px) 16px!important; overflow:hidden!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-editor-topbar{ grid-column:1 / -1!important; grid-row:1!important; min-height:60px!important; display:grid!important; grid-template-columns:52px minmax(0,1fr) auto 52px!important; gap:10px!important; align-items:center!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-stage-panel{ grid-column:2!important; grid-row:2!important; min-height:0!important; padding:0!important; overflow:hidden!important; border:0!important; background:transparent!important; box-shadow:none!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-preview-layout{ display:flex!important; align-items:center!important; justify-content:center!important; height:100%!important; min-height:0!important; overflow:hidden!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-video-container{ width:auto!important; height:100%!important; max-width:100%!important; max-height:100%!important; margin:0 auto!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-form-panel, .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-controls-scroll, .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-panel{ display:contents!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-toolbar{ grid-column:1!important; grid-row:2!important; display:grid!important; grid-template-columns:1fr!important; grid-template-rows:repeat(6,minmax(0,1fr))!important; height:100%!important; gap:9px!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-tool{ min-height:0!important; border-radius:20px!important; padding:10px!important; display:grid!important; grid-template-columns:48px minmax(0,1fr)!important; grid-template-rows:auto auto!important; gap:2px 10px!important; align-items:center!important; text-align:left!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-tool > span{ grid-row:1 / 3!important; width:42px!important; height:42px!important; margin:0!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-tool b{ font-size:clamp(12px,1.45vw,15px)!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-tool small{ display:block!important; min-width:0!important; overflow:hidden!important; text-overflow:ellipsis!important; white-space:nowrap!important; font-size:clamp(10px,1.2vw,12px)!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-tabs{ grid-column:1 / -1!important; grid-row:3!important; align-self:start!important; display:grid!important; grid-template-columns:repeat(3,1fr)!important; height:52px!important; margin:0!important; border-radius:20px 20px 0 0!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-grid{ grid-column:1 / -1!important; grid-row:3!important; align-self:stretch!important; min-height:0!important; overflow:auto!important; margin:52px 0 0!important; padding:14px 16px 58px!important; border-radius:0 0 22px 22px!important; grid-template-columns:2fr repeat(3,minmax(128px,1fr))!important; gap:12px!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-actions{ grid-column:1 / -1!important; grid-row:3!important; align-self:end!important; justify-self:end!important; display:flex!important; gap:10px!important; margin:0 16px 14px 0!important; z-index:7!important; } @media(max-width:720px){ .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced){ grid-template-rows:52px minmax(0,1fr) auto!important; padding:10px!important; gap:10px!important; } .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-preview-layout{ grid-template-columns:78px minmax(0,auto)!important; gap:8px!important; } .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-preview-tools.wbp-simple-tools{ grid-column:1!important; grid-row:1!important; width:78px!important; gap:7px!important; } .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-video-container{ grid-column:2!important; grid-row:1!important; justify-self:center!important; } .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card b{ font-size:12px!important; } .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card{ gap:3px!important; padding:6px 4px!important; } .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card__media, .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card__icon, .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card__media::before, .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card__icon::before{ width:42px!important; height:42px!important; } .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card:nth-child(2) .wbp-tool-card__icon::before{ font-size:42px!important; } .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card:nth-child(3) .wbp-tool-card__icon svg, .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card:nth-child(4) .wbp-tool-card__icon svg{ width:34px!important; height:34px!important; } .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-actions .wbp-btn{ min-height:50px!important; font-size:14px!important; border-radius:16px!important; } .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) #downloadImage span{ font-size:12px!important; } } /* Phone advanced: one-column viewport, horizontal tool tray, scrollable controls. */ @media(max-width:560px){ .wbp-editor .wbp-editor-shell.is-popup.is-advanced{ grid-template-columns:1fr!important; grid-template-rows:52px minmax(0,38dvh) 88px minmax(0,1fr)!important; gap:8px!important; padding:8px!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-editor-topbar{ grid-column:1!important; grid-row:1!important; min-height:52px!important; grid-template-columns:44px minmax(0,1fr) 44px!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-editor-topbar::before{ content:"Editor avanzado"!important; grid-column:2!important; font-size:15px!important; white-space:nowrap!important; overflow:hidden!important; text-overflow:ellipsis!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-mode-pill{ display:none!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-stage-panel{ grid-column:1!important; grid-row:2!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-toolbar{ grid-column:1!important; grid-row:3!important; display:grid!important; grid-template-columns:repeat(6,minmax(0,1fr))!important; grid-template-rows:1fr!important; gap:6px!important; height:88px!important; overflow-x:auto!important; overflow-y:hidden!important; padding:0 1px 4px!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-tool{ min-width:72px!important; display:flex!important; flex-direction:column!important; justify-content:center!important; gap:4px!important; padding:7px 5px!important; text-align:center!important; border-radius:16px!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-tool > span{ width:34px!important; height:34px!important; margin:0 auto!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-tool b{ font-size:11px!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-tool small{ display:none!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-tabs{ grid-column:1!important; grid-row:4!important; height:42px!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-tabs button{ min-height:42px!important; font-size:12px!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-grid{ grid-column:1!important; grid-row:4!important; margin-top:42px!important; grid-template-columns:1fr 1fr!important; padding:10px 9px 52px!important; gap:8px!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-message-field{ grid-column:1 / -1!important; grid-row:auto!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-message-field textarea{ min-height:76px!important; padding:10px!important; font-size:14px!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-grid label:has(#advancedFontSize){ grid-column:1 / -1!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-grid input, .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-grid select{ min-height:34px!important; height:34px!important; font-size:12px!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-actions{ grid-column:1!important; grid-row:4!important; align-self:end!important; justify-self:stretch!important; display:grid!important; grid-template-columns:1fr 1fr!important; gap:7px!important; margin:0!important; padding:8px!important; background:linear-gradient(180deg,rgba(255,255,255,0),#fff 34%)!important; } } @media(max-width:380px){ .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-preview-layout{ grid-template-columns:68px minmax(0,auto)!important; gap:7px!important; } .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-preview-tools.wbp-simple-tools{ width:68px!important; } .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-actions .wbp-btn{ min-height:46px!important; font-size:13px!important; } .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) #downloadImage span{ font-size:11px!important; } } /* Short landscape advanced: no overlapping title, compact toolbar, bounded control desk. */ @media(max-height:520px) and (orientation:landscape){ .wbp-editor .wbp-editor-shell.is-popup.is-advanced{ grid-template-columns:170px minmax(0,1fr)!important; grid-template-rows:46px minmax(0,1fr) 124px!important; gap:8px 10px!important; padding:8px!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-editor-topbar{ min-height:46px!important; grid-template-columns:44px minmax(0,1fr) 44px!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-editor-topbar::before{ content:""!important; display:none!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-mode-pill{ grid-column:2!important; justify-self:center!important; min-height:40px!important; padding:0 18px!important; font-size:14px!important; max-width:220px!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-editor-back{ grid-column:1!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-popup-close{ grid-column:3!important; justify-self:end!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-nav-btn{ width:42px!important; height:42px!important; border-radius:14px!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-wishi-decor{ width:50px!important; top:54px!important; right:44px!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-stage-panel{ grid-column:2!important; grid-row:2!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-video-container{ height:100%!important; width:auto!important; max-height:100%!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-toolbar{ grid-column:1!important; grid-row:2!important; grid-template-columns:1fr 1fr!important; grid-template-rows:repeat(3,minmax(0,1fr))!important; gap:6px!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-tool{ display:flex!important; flex-direction:column!important; justify-content:center!important; text-align:center!important; gap:2px!important; padding:5px!important; border-radius:14px!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-tool > span{ width:28px!important; height:28px!important; margin:0 auto!important; font-size:15px!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-tool b{ font-size:10px!important; line-height:1!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-tool small{ display:none!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-tabs{ grid-column:1 / -1!important; grid-row:3!important; height:36px!important; border-radius:16px 16px 0 0!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-tabs button{ min-height:36px!important; font-size:12px!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-grid{ grid-column:1 / -1!important; grid-row:3!important; margin-top:36px!important; grid-template-columns:2fr repeat(3,minmax(0,1fr))!important; gap:7px!important; padding:8px 10px 42px!important; border-radius:0 0 16px 16px!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-message-field{ grid-column:1 / 3!important; grid-row:1 / 3!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-message-field textarea{ min-height:54px!important; padding:8px!important; font-size:12px!important; line-height:1.25!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-grid label span{ font-size:10px!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-grid input, .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-grid select{ min-height:28px!important; height:28px!important; font-size:11px!important; border-radius:9px!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-actions{ grid-column:1 / -1!important; grid-row:3!important; align-self:end!important; justify-self:end!important; display:flex!important; gap:7px!important; margin:0 10px 7px 0!important; padding:0!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-mini-btn{ min-height:30px!important; font-size:11px!important; border-radius:10px!important; } } /* v2.9.2 final rail cleanup: exact asset icons only on narrow simple rails. */ @media(max-width:720px){ .wbp-editor .wbp-editor-shell:not(.is-popup) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card b, .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card b{ display:none!important; } .wbp-editor .wbp-editor-shell:not(.is-popup) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card__icon, .wbp-editor .wbp-editor-shell:not(.is-popup) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card__icon img, .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card__icon, .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card__icon img{ width:32px!important; height:32px!important; } } /* v3.0.3 absolute final landscape authority. */ @media(max-height:520px) and (orientation:landscape){ .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-grid label:has(#advancedMusicSelect), .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-grid label:has(#advancedFont), .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-grid label:has(#advancedTextColor), .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-grid label:has(#advancedFontSize){ display:none!important; } } /* v3.1 absolute final UX cleanup: compact is clean, advanced lives only in fullscreen, icons are bounded assets. */ .wbp-editor .wbp-edit-hint{ display:none!important; } .wbp-editor .wbp-preview-tools.wbp-simple-tools .wbp-tool-card, .wbp-editor .wbp-preview-tools.wbp-simple-tools .wbp-tool-card *{ box-sizing:border-box!important; } .wbp-editor .wbp-preview-tools.wbp-simple-tools .wbp-tool-card{ position:relative!important; display:grid!important; place-items:center!important; gap:0!important; overflow:hidden!important; padding:0!important; min-width:0!important; min-height:0!important; } .wbp-editor .wbp-preview-tools.wbp-simple-tools .wbp-tool-card::before, .wbp-editor .wbp-preview-tools.wbp-simple-tools .wbp-tool-card::after, .wbp-editor .wbp-preview-tools.wbp-simple-tools .wbp-tool-card__icon::before, .wbp-editor .wbp-preview-tools.wbp-simple-tools .wbp-tool-card__icon::after, .wbp-editor .wbp-preview-tools.wbp-simple-tools .wbp-tool-card__media::before, .wbp-editor .wbp-preview-tools.wbp-simple-tools .wbp-tool-card__media::after{ content:none!important; display:none!important; } .wbp-editor .wbp-preview-tools.wbp-simple-tools .wbp-tool-card b{ position:absolute!important; width:1px!important; height:1px!important; margin:-1px!important; padding:0!important; border:0!important; clip:rect(0 0 0 0)!important; clip-path:inset(50%)!important; overflow:hidden!important; white-space:nowrap!important; } .wbp-editor .wbp-preview-tools.wbp-simple-tools .wbp-tool-card__media, .wbp-editor .wbp-preview-tools.wbp-simple-tools .wbp-tool-card__icon{ display:grid!important; place-items:center!important; width:34px!important; height:34px!important; max-width:68%!important; max-height:68%!important; margin:0!important; padding:0!important; border:0!important; border-radius:0!important; background:none!important; box-shadow:none!important; transform:none!important; overflow:visible!important; } .wbp-editor .wbp-preview-tools.wbp-simple-tools .wbp-tool-card__media img, .wbp-editor .wbp-preview-tools.wbp-simple-tools .wbp-tool-card__icon img{ display:block!important; width:100%!important; height:100%!important; max-width:100%!important; max-height:100%!important; object-fit:contain!important; margin:0!important; padding:0!important; transform:none!important; opacity:1!important; filter:drop-shadow(0 4px 7px rgba(77,35,105,.13))!important; } .wbp-editor .wbp-editor-shell:not(.is-popup) .wbp-compact-advanced{ display:none!important; } .wbp-editor .wbp-editor-shell:not(.is-popup) .wbp-compact-secondary{ display:flex!important; justify-content:flex-end!important; align-items:center!important; gap:0!important; width:100%!important; margin:0!important; } .wbp-editor .wbp-editor-shell:not(.is-popup) .wbp-compact-fullscreen{ width:44px!important; min-width:44px!important; height:44px!important; min-height:44px!important; padding:0!important; border-radius:15px!important; } .wbp-editor .wbp-editor-shell:not(.is-popup) .wbp-compact-fullscreen img{ width:24px!important; height:24px!important; object-fit:contain!important; } .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-compact-advanced{ display:inline-flex!important; align-items:center!important; justify-content:center!important; min-height:44px!important; max-width:210px!important; } .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-compact-advanced img{ width:24px!important; height:24px!important; object-fit:contain!important; flex:0 0 auto!important; } .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-compact-advanced span{ min-width:0!important; white-space:nowrap!important; overflow:hidden!important; text-overflow:ellipsis!important; } .wbp-editor .wbp-editor-shell:not(.is-popup) .wbp-preview-tools.wbp-simple-tools{ width:54px!important; gap:8px!important; } .wbp-editor .wbp-editor-shell:not(.is-popup) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card{ width:54px!important; height:54px!important; min-height:54px!important; border-radius:17px!important; } .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-preview-tools.wbp-simple-tools{ width:72px!important; gap:10px!important; } .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card{ width:72px!important; height:72px!important; min-height:72px!important; border-radius:20px!important; } .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card__media, .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card__icon{ width:38px!important; height:38px!important; max-width:62%!important; max-height:62%!important; } @media(max-width:380px){ .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-preview-tools.wbp-simple-tools{ width:62px!important; gap:8px!important; } .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card{ width:62px!important; height:62px!important; min-height:62px!important; border-radius:18px!important; } .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card__media, .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card__icon{ width:32px!important; height:32px!important; } } /* v3.1.1 final polish: no redundant advanced title, no advanced CTA while already advanced. */ .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-editor-topbar::before{ content:none!important; display:none!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-compact-advanced{ display:none!important; } .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-compact-advanced{ width:auto!important; min-width:148px!important; padding:0 16px!important; } /* v3.2 EOF authority: simple tools right, advanced selectors left, contextual controls below. */ .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-preview-layout{ grid-template-columns:minmax(0,auto) 72px!important; gap:12px!important; } .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-video-container{ grid-column:1!important; justify-self:end!important; } .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-preview-tools.wbp-simple-tools{ grid-column:2!important; justify-self:start!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-grid > *{ display:none!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced[data-advanced-panel="text"] .wbp-advanced-grid > .wbp-control-text, .wbp-editor .wbp-editor-shell.is-popup.is-advanced[data-advanced-panel="text"] .wbp-advanced-grid > .wbp-control-box, .wbp-editor .wbp-editor-shell.is-popup.is-advanced[data-advanced-panel="text"] .wbp-advanced-grid > .wbp-control-transform, .wbp-editor .wbp-editor-shell.is-popup.is-advanced[data-advanced-panel="effects"] .wbp-advanced-grid > .wbp-control-transform, .wbp-editor .wbp-editor-shell.is-popup.is-advanced[data-advanced-panel="background"] .wbp-advanced-grid > .wbp-control-background, .wbp-editor .wbp-editor-shell.is-popup.is-advanced[data-advanced-panel="music"] .wbp-advanced-grid > .wbp-control-music{ display:grid!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced[data-advanced-panel="text"][data-advanced-target="mensaje"] .wbp-advanced-grid > .wbp-control-message{ display:grid!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced[data-advanced-panel="text"]:not([data-advanced-target="mensaje"]) .wbp-advanced-grid > .wbp-control-message{ display:none!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-control-target, .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-tabs{ display:none!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-grid{ align-content:start!important; margin:0!important; border-radius:22px!important; padding:14px 16px 58px!important; } @media(max-width:560px){ .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-preview-layout{ grid-template-columns:minmax(0,auto) 62px!important; gap:8px!important; } .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-preview-tools.wbp-simple-tools{ width:62px!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced{ grid-template-columns:72px minmax(0,1fr)!important; grid-template-rows:52px minmax(0,40dvh) minmax(0,1fr)!important; gap:8px!important; padding:8px!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-editor-topbar{ grid-column:1 / -1!important; grid-row:1!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-stage-panel{ grid-column:2!important; grid-row:2!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-toolbar{ grid-column:1!important; grid-row:2!important; grid-template-columns:1fr!important; grid-template-rows:repeat(6,minmax(0,1fr))!important; height:100%!important; overflow:hidden!important; gap:6px!important; padding:0!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-tool{ min-width:0!important; min-height:0!important; display:flex!important; flex-direction:column!important; align-items:center!important; justify-content:center!important; gap:2px!important; padding:4px!important; text-align:center!important; border-radius:14px!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-tool > span{ width:28px!important; height:28px!important; margin:0!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-tool b{ font-size:10px!important; line-height:1!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-grid{ grid-column:1 / -1!important; grid-row:3!important; grid-template-columns:1fr 1fr!important; gap:8px!important; padding:10px 9px 54px!important; overflow:auto!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-grid > .wbp-advanced-section-title, .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-grid > .wbp-advanced-message-field{ grid-column:1 / -1!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-actions{ grid-column:1 / -1!important; grid-row:3!important; align-self:end!important; justify-self:stretch!important; display:grid!important; grid-template-columns:1fr 1fr!important; gap:7px!important; margin:0!important; padding:8px!important; background:linear-gradient(180deg,rgba(255,255,255,0),#fff 34%)!important; } } /* v3.2.1 EOF contextual controls authority: override legacy :has(#id) rules. */ #generatorShell.is-popup.is-advanced .wbp-advanced-grid > *{display:none!important} #generatorShell.is-popup.is-advanced[data-advanced-panel="text"] .wbp-advanced-grid > .wbp-control-text, #generatorShell.is-popup.is-advanced[data-advanced-panel="text"] .wbp-advanced-grid > .wbp-control-box, #generatorShell.is-popup.is-advanced[data-advanced-panel="text"] .wbp-advanced-grid > .wbp-control-transform{display:grid!important} #generatorShell.is-popup.is-advanced[data-advanced-panel="text"][data-advanced-target="mensaje"] .wbp-advanced-grid > .wbp-control-message{display:grid!important} #generatorShell.is-popup.is-advanced[data-advanced-panel="text"]:not([data-advanced-target="mensaje"]) .wbp-advanced-grid > .wbp-control-message, #generatorShell.is-popup.is-advanced[data-advanced-panel="text"] .wbp-advanced-grid > .wbp-control-background, #generatorShell.is-popup.is-advanced[data-advanced-panel="text"] .wbp-advanced-grid > .wbp-control-music, #generatorShell.is-popup.is-advanced[data-advanced-panel="text"] .wbp-advanced-grid label:has(#advancedBackgroundCategory), #generatorShell.is-popup.is-advanced[data-advanced-panel="text"] .wbp-advanced-grid label:has(#advancedBackgroundSelect), #generatorShell.is-popup.is-advanced[data-advanced-panel="text"] .wbp-advanced-grid label:has(#advancedMusicCategory), #generatorShell.is-popup.is-advanced[data-advanced-panel="text"] .wbp-advanced-grid label:has(#advancedMusicSelect){display:none!important} #generatorShell.is-popup.is-advanced[data-advanced-panel="background"] .wbp-advanced-grid > .wbp-control-background, #generatorShell.is-popup.is-advanced[data-advanced-panel="background"] .wbp-advanced-grid label:has(#advancedBackgroundCategory), #generatorShell.is-popup.is-advanced[data-advanced-panel="background"] .wbp-advanced-grid label:has(#advancedBackgroundSelect){display:grid!important} #generatorShell.is-popup.is-advanced[data-advanced-panel="background"] .wbp-advanced-grid > :not(.wbp-control-background){display:none!important} #generatorShell.is-popup.is-advanced[data-advanced-panel="music"] .wbp-advanced-grid > .wbp-control-music, #generatorShell.is-popup.is-advanced[data-advanced-panel="music"] .wbp-advanced-grid label:has(#advancedMusicCategory), #generatorShell.is-popup.is-advanced[data-advanced-panel="music"] .wbp-advanced-grid label:has(#advancedMusicSelect){display:grid!important} #generatorShell.is-popup.is-advanced[data-advanced-panel="music"] .wbp-advanced-grid > :not(.wbp-control-music){display:none!important} #generatorShell.is-popup.is-advanced[data-advanced-panel="effects"] .wbp-advanced-grid > .wbp-control-transform{display:grid!important} #generatorShell.is-popup.is-advanced[data-advanced-panel="effects"] .wbp-advanced-grid > :not(.wbp-control-transform){display:none!important} /* v3.2.2 EOF panel isolation: background/music/effects never leak text controls. */ #generatorShell.is-popup.is-advanced[data-advanced-panel="background"] .wbp-advanced-grid label:has(#advancedPhraseCategory), #generatorShell.is-popup.is-advanced[data-advanced-panel="background"] .wbp-advanced-grid label:has(#advancedPhraseSelect), #generatorShell.is-popup.is-advanced[data-advanced-panel="background"] .wbp-advanced-grid label:has(#advancedMusicCategory), #generatorShell.is-popup.is-advanced[data-advanced-panel="background"] .wbp-advanced-grid label:has(#advancedMusicSelect), #generatorShell.is-popup.is-advanced[data-advanced-panel="background"] .wbp-advanced-grid label:has(#advancedFont), #generatorShell.is-popup.is-advanced[data-advanced-panel="background"] .wbp-advanced-grid label:has(#advancedTextColor), #generatorShell.is-popup.is-advanced[data-advanced-panel="background"] .wbp-advanced-grid label:has(#advancedFontSize), #generatorShell.is-popup.is-advanced[data-advanced-panel="background"] .wbp-advanced-grid label:has(#advancedStrokeColor), #generatorShell.is-popup.is-advanced[data-advanced-panel="background"] .wbp-advanced-grid label:has(#advancedStrokeWidth), #generatorShell.is-popup.is-advanced[data-advanced-panel="background"] .wbp-advanced-grid label:has(#advancedBgOpacity), #generatorShell.is-popup.is-advanced[data-advanced-panel="background"] .wbp-advanced-grid label:has(#advancedBoxWidth), #generatorShell.is-popup.is-advanced[data-advanced-panel="background"] .wbp-advanced-grid label:has(#advancedBoxHeight), #generatorShell.is-popup.is-advanced[data-advanced-panel="background"] .wbp-advanced-grid label:has(#advancedScale), #generatorShell.is-popup.is-advanced[data-advanced-panel="background"] .wbp-advanced-grid label:has(#advancedRotation), #generatorShell.is-popup.is-advanced[data-advanced-panel="music"] .wbp-advanced-grid label:has(#advancedBackgroundCategory), #generatorShell.is-popup.is-advanced[data-advanced-panel="music"] .wbp-advanced-grid label:has(#advancedBackgroundSelect), #generatorShell.is-popup.is-advanced[data-advanced-panel="music"] .wbp-advanced-grid label:has(#advancedPhraseCategory), #generatorShell.is-popup.is-advanced[data-advanced-panel="music"] .wbp-advanced-grid label:has(#advancedPhraseSelect), #generatorShell.is-popup.is-advanced[data-advanced-panel="music"] .wbp-advanced-grid label:has(#advancedFont), #generatorShell.is-popup.is-advanced[data-advanced-panel="music"] .wbp-advanced-grid label:has(#advancedTextColor), #generatorShell.is-popup.is-advanced[data-advanced-panel="music"] .wbp-advanced-grid label:has(#advancedFontSize), #generatorShell.is-popup.is-advanced[data-advanced-panel="music"] .wbp-advanced-grid label:has(#advancedStrokeColor), #generatorShell.is-popup.is-advanced[data-advanced-panel="music"] .wbp-advanced-grid label:has(#advancedStrokeWidth), #generatorShell.is-popup.is-advanced[data-advanced-panel="music"] .wbp-advanced-grid label:has(#advancedBgOpacity), #generatorShell.is-popup.is-advanced[data-advanced-panel="music"] .wbp-advanced-grid label:has(#advancedBoxWidth), #generatorShell.is-popup.is-advanced[data-advanced-panel="music"] .wbp-advanced-grid label:has(#advancedBoxHeight), #generatorShell.is-popup.is-advanced[data-advanced-panel="music"] .wbp-advanced-grid label:has(#advancedScale), #generatorShell.is-popup.is-advanced[data-advanced-panel="music"] .wbp-advanced-grid label:has(#advancedRotation), #generatorShell.is-popup.is-advanced[data-advanced-panel="effects"] .wbp-advanced-grid label:has(#advancedBackgroundCategory), #generatorShell.is-popup.is-advanced[data-advanced-panel="effects"] .wbp-advanced-grid label:has(#advancedBackgroundSelect), #generatorShell.is-popup.is-advanced[data-advanced-panel="effects"] .wbp-advanced-grid label:has(#advancedPhraseCategory), #generatorShell.is-popup.is-advanced[data-advanced-panel="effects"] .wbp-advanced-grid label:has(#advancedPhraseSelect), #generatorShell.is-popup.is-advanced[data-advanced-panel="effects"] .wbp-advanced-grid label:has(#advancedMusicCategory), #generatorShell.is-popup.is-advanced[data-advanced-panel="effects"] .wbp-advanced-grid label:has(#advancedMusicSelect), #generatorShell.is-popup.is-advanced[data-advanced-panel="effects"] .wbp-advanced-grid label:has(#advancedFont), #generatorShell.is-popup.is-advanced[data-advanced-panel="effects"] .wbp-advanced-grid label:has(#advancedTextColor), #generatorShell.is-popup.is-advanced[data-advanced-panel="effects"] .wbp-advanced-grid label:has(#advancedFontSize), #generatorShell.is-popup.is-advanced[data-advanced-panel="effects"] .wbp-advanced-grid label:has(#advancedStrokeColor), #generatorShell.is-popup.is-advanced[data-advanced-panel="effects"] .wbp-advanced-grid label:has(#advancedStrokeWidth), #generatorShell.is-popup.is-advanced[data-advanced-panel="effects"] .wbp-advanced-grid label:has(#advancedBgOpacity), #generatorShell.is-popup.is-advanced[data-advanced-panel="effects"] .wbp-advanced-grid label:has(#advancedBoxWidth), #generatorShell.is-popup.is-advanced[data-advanced-panel="effects"] .wbp-advanced-grid label:has(#advancedBoxHeight){display:none!important} #generatorShell.is-popup.is-advanced[data-advanced-panel="background"] .wbp-advanced-grid label:has(#advancedBackgroundCategory), #generatorShell.is-popup.is-advanced[data-advanced-panel="background"] .wbp-advanced-grid label:has(#advancedBackgroundSelect), #generatorShell.is-popup.is-advanced[data-advanced-panel="music"] .wbp-advanced-grid label:has(#advancedMusicCategory), #generatorShell.is-popup.is-advanced[data-advanced-panel="music"] .wbp-advanced-grid label:has(#advancedMusicSelect), #generatorShell.is-popup.is-advanced[data-advanced-panel="effects"] .wbp-advanced-grid label:has(#advancedScale), #generatorShell.is-popup.is-advanced[data-advanced-panel="effects"] .wbp-advanced-grid label:has(#advancedRotation){display:grid!important} /* v3.3 UX retry: stable mobile layouts, contextual advanced controls, text focus modal. */ .wbp-editor .wbp-editor-heading{ min-width:0!important; display:flex!important; flex-direction:column!important; align-items:center!important; justify-content:center!important; gap:2px!important; text-align:center!important; } .wbp-editor .wbp-editor-heading strong{ font-size:clamp(16px,2.7vw,24px)!important; line-height:1.05!important; color:#24152f!important; font-weight:950!important; } .wbp-editor .wbp-editor-heading span{ font-size:12px!important; line-height:1!important; color:#74637f!important; font-weight:850!important; text-transform:uppercase!important; } .wbp-editor .wbp-video-container .wbp-wishi-decor{ position:absolute!important; z-index:5!important; right:8px!important; bottom:8px!important; width:clamp(50px,15%,92px)!important; height:auto!important; pointer-events:none!important; filter:drop-shadow(0 8px 14px rgba(38,18,55,.25))!important; transform:rotate(3deg)!important; } .wbp-editor .wbp-editor-shell:not(.is-popup) .wbp-preview-layout{ grid-template-columns:minmax(0,1fr) 62px!important; align-items:center!important; justify-content:center!important; } .wbp-editor .wbp-editor-shell:not(.is-popup) .wbp-video-container{ justify-self:center!important; align-self:start!important; } .wbp-editor .wbp-editor-shell:not(.is-popup) .wbp-preview-tools.wbp-simple-tools{ justify-self:start!important; } .wbp-editor .wbp-editor-shell:not(.is-popup) .wbp-compact-secondary{ justify-content:center!important; } .wbp-editor .wbp-editor-shell:not(.is-popup) .wbp-compact-fullscreen{ width:auto!important; min-width:150px!important; padding:0 14px!important; gap:8px!important; border:1px solid rgba(106,27,154,.18)!important; background:#fff!important; color:#4d2561!important; font-weight:950!important; } .wbp-editor .wbp-editor-shell:not(.is-popup) .wbp-compact-fullscreen span{ display:inline!important; font-size:13px!important; white-space:nowrap!important; } .wbp-editor .wbp-editor-brand{ display:none!important; } .wbp-editor .wbp-editor-brand img{ display:block!important; width:128px!important; max-width:40vw!important; height:auto!important; margin:auto!important; opacity:.94!important; } body.wbp-text-focus-open{ overflow:hidden!important; } .wbp-text-focus-modal{ position:fixed!important; left:0!important; right:0!important; top:var(--wbp-visual-top,0px)!important; height:var(--wbp-visual-height,100dvh)!important; z-index:1000002!important; display:none!important; align-items:center!important; justify-content:center!important; padding:max(12px,env(safe-area-inset-top,0px)) 14px max(12px,env(safe-area-inset-bottom,0px))!important; background:rgba(28,15,38,.38)!important; pointer-events:auto!important; } body > .wbp-text-focus-modal{ z-index:2147483000!important; } #generatorShell > .wbp-text-focus-modal{ z-index:2147483000!important; } body.wbp-text-focus-open .wbp-overlay{ pointer-events:none!important; } .wbp-text-focus-modal.is-open{ display:flex!important; } .wbp-text-focus-panel{ position:relative!important; z-index:1!important; pointer-events:auto!important; width:min(560px,100%)!important; max-height:min(72dvh,calc(100% - 24px))!important; display:grid!important; gap:10px!important; padding:14px!important; border-radius:18px!important; background:#fff!important; box-shadow:0 22px 70px rgba(19,8,29,.28)!important; border:1px solid rgba(106,27,154,.16)!important; } .wbp-text-focus-modal[data-text-kind="name"] .wbp-text-focus-panel{ width:min(340px,100%)!important; gap:8px!important; padding:12px!important; } .wbp-text-focus-modal[data-text-kind="age"] .wbp-text-focus-panel{ width:min(220px,100%)!important; gap:8px!important; padding:12px!important; } .wbp-text-focus-modal[data-text-kind="message"] .wbp-text-focus-panel{ width:min(560px,100%)!important; } .wbp-text-focus-head{ display:flex!important; align-items:center!important; justify-content:space-between!important; gap:10px!important; } .wbp-text-focus-head strong{ font-size:15px!important; font-weight:950!important; color:#23142f!important; letter-spacing:0!important; word-spacing:.16em!important; white-space:normal!important; text-transform:none!important; } .wbp-text-focus-head button{ width:34px!important; height:34px!important; border-radius:999px!important; border:1px solid rgba(106,27,154,.16)!important; background:#fff!important; color:#41204f!important; font-size:23px!important; line-height:1!important; } .wbp-text-focus-panel textarea{ width:100%!important; min-height:120px!important; max-height:30dvh!important; resize:none!important; border:1px solid rgba(34,27,47,.16)!important; border-radius:16px!important; padding:13px 14px!important; font:800 18px/1.32 Raleway,system-ui,sans-serif!important; color:#201429!important; background:#fff!important; outline:none!important; } .wbp-text-focus-modal[data-text-kind="name"] .wbp-text-focus-panel textarea, .wbp-text-focus-modal[data-text-kind="age"] .wbp-text-focus-panel textarea{ min-height:50px!important; max-height:50px!important; overflow:hidden!important; line-height:1.15!important; } .wbp-text-focus-modal[data-text-kind="name"] .wbp-text-focus-done, .wbp-text-focus-modal[data-text-kind="age"] .wbp-text-focus-done{ min-height:40px!important; } .wbp-text-focus-modal[data-text-kind="age"] .wbp-text-focus-panel textarea{ text-align:center!important; font-size:24px!important; } .wbp-text-focus-modal[data-text-kind="message"] .wbp-text-focus-panel textarea{ min-height:128px!important; } .wbp-text-focus-panel textarea:focus{ border-color:#E91E63!important; box-shadow:0 0 0 4px rgba(233,30,99,.13)!important; } @supports (-webkit-touch-callout:none){ .wbp-text-focus-panel textarea, .wbp-editor-shell.is-popup input, .wbp-editor-shell.is-popup textarea, .wbp-editor-shell.is-popup select{ font-size:16px!important; } } .wbp-text-focus-done{ min-height:44px!important; border:0!important; border-radius:14px!important; background:linear-gradient(135deg,#E91E63,#6A1B9A)!important; color:#fff!important; font-weight:950!important; } @media(max-width:1024px){ .wbp-editor .wbp-editor-shell.is-popup{ grid-template-rows:58px minmax(0,1fr) auto!important; gap:8px!important; padding:8px 10px calc(8px + env(safe-area-inset-bottom,0px))!important; background:linear-gradient(180deg,#fff 0%,#fff8fb 100%)!important; } .wbp-editor .wbp-editor-shell.is-popup .wbp-popup-title, .wbp-editor .wbp-editor-shell.is-popup .wbp-stage-label, .wbp-editor .wbp-editor-shell.is-popup .wbp-advanced-toggle, .wbp-editor .wbp-editor-shell.is-popup .wbp-simple-text-editor, .wbp-editor .wbp-editor-shell.is-popup .wbp-music-options{ display:none!important; } .wbp-editor .wbp-editor-shell.is-popup .wbp-editor-topbar{ grid-row:1!important; display:grid!important; grid-template-columns:42px minmax(0,1fr) auto 42px!important; align-items:center!important; gap:8px!important; padding:0!important; min-height:50px!important; } .wbp-editor .wbp-editor-shell.is-popup .wbp-mode-switch{ grid-column:3!important; min-height:36px!important; padding:0 10px!important; border-radius:999px!important; font-size:11px!important; } .wbp-editor .wbp-editor-shell.is-popup .wbp-popup-close{ position:static!important; grid-column:4!important; display:grid!important; width:40px!important; height:40px!important; } .wbp-editor .wbp-editor-shell.is-popup .wbp-stage-panel{ grid-row:2!important; height:auto!important; min-height:0!important; padding:0!important; border:0!important; box-shadow:none!important; background:transparent!important; overflow:visible!important; } .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-preview-layout{ height:100%!important; grid-template-columns:minmax(0,1fr) 76px!important; gap:12px!important; align-items:center!important; justify-content:center!important; } .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-video-container{ width:auto!important; height:min(100%,calc(100dvh - 236px))!important; max-height:calc(100dvh - 236px)!important; justify-self:center!important; border-radius:22px!important; } .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-preview-tools.wbp-simple-tools{ width:76px!important; gap:10px!important; padding-right:4px!important; justify-self:end!important; } .wbp-editor .wbp-editor-shell.is-popup .wbp-form-panel{ grid-row:3!important; height:auto!important; min-height:0!important; overflow:visible!important; display:block!important; padding:0!important; border:0!important; background:transparent!important; box-shadow:none!important; } .wbp-editor .wbp-editor-shell.is-popup .wbp-controls-scroll{ overflow:visible!important; } .wbp-editor .wbp-editor-shell.is-popup .wbp-compact-controls{ display:grid!important; gap:8px!important; padding-bottom:8px!important; } .wbp-editor .wbp-editor-shell.is-popup .wbp-compact-secondary{ display:flex!important; justify-content:center!important; padding:0!important; } .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-compact-advanced{ display:inline-flex!important; min-height:42px!important; border-radius:16px!important; padding:0 18px!important; background:#fff!important; border:1px solid rgba(106,27,154,.16)!important; box-shadow:0 10px 24px rgba(36,18,52,.08)!important; } .wbp-editor .wbp-editor-shell.is-popup .wbp-actions{ display:grid!important; grid-template-columns:1fr 1fr!important; gap:10px!important; margin:0 0 6px!important; } .wbp-editor .wbp-editor-shell.is-popup .wbp-btn{ min-height:44px!important; border-radius:15px!important; } .wbp-editor .wbp-editor-shell.is-popup .wbp-editor-brand{ display:block!important; min-height:22px!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced{ grid-template-columns:86px minmax(0,1fr)!important; grid-template-rows:58px minmax(0,40dvh) minmax(0,1fr) auto!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-editor-topbar{ grid-column:1 / -1!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-stage-panel{ grid-column:2!important; grid-row:2!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-preview-layout{ height:100%!important; display:block!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-video-container{ width:auto!important; height:100%!important; max-height:40dvh!important; margin:0 auto!important; border-radius:20px!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-toolbar{ grid-column:1!important; grid-row:2!important; display:grid!important; grid-template-columns:1fr!important; grid-template-rows:repeat(5,minmax(0,1fr))!important; gap:7px!important; height:100%!important; padding:0 2px 0 0!important; overflow:hidden!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-tool{ min-height:0!important; padding:4px!important; display:flex!important; flex-direction:column!important; align-items:center!important; justify-content:center!important; gap:3px!important; border-radius:15px!important; text-align:center!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-tool > span{ width:28px!important; height:28px!important; margin:0!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-tool b{ font-size:10px!important; line-height:1.05!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-tool small{ display:none!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-form-panel{ grid-column:1 / -1!important; grid-row:3!important; min-height:0!important; overflow:hidden!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-panel{ grid-column:1 / -1!important; grid-row:3!important; display:grid!important; grid-template-rows:minmax(0,1fr) auto!important; height:100%!important; min-height:0!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-current-target{ display:none!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-grid{ grid-row:1!important; grid-template-columns:1fr 1fr!important; gap:8px!important; padding:10px!important; margin:0!important; overflow:auto!important; border-radius:18px!important; background:#fff!important; border:1px solid rgba(106,27,154,.12)!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-advanced-actions{ display:none!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-mini-btn{ min-height:38px!important; padding:0 14px!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced .wbp-compact-controls{ grid-column:1 / -1!important; grid-row:4!important; } } @media(max-width:1024px){ #generatorShell.is-popup.is-advanced{ display:grid!important; grid-template-columns:86px minmax(0,1fr)!important; grid-template-rows:58px minmax(0,40dvh) minmax(0,1fr) auto!important; } #generatorShell.is-popup.is-advanced .wbp-editor-topbar{ grid-column:1 / -1!important; grid-row:1!important; } #generatorShell.is-popup.is-advanced .wbp-stage-panel{ grid-column:2!important; grid-row:2!important; } #generatorShell.is-popup.is-advanced .wbp-advanced-toolbar{ grid-column:1!important; grid-row:2!important; } #generatorShell.is-popup.is-advanced .wbp-advanced-panel{ grid-column:1 / -1!important; grid-row:3!important; } #generatorShell.is-popup.is-advanced .wbp-compact-controls{ grid-column:1 / -1!important; grid-row:4!important; } } #generatorShell.is-popup.is-advanced[data-advanced-panel="media"] .wbp-advanced-grid > .wbp-control-background, #generatorShell.is-popup.is-advanced[data-advanced-panel="media"] .wbp-advanced-grid > .wbp-control-music, #generatorShell.is-popup.is-advanced[data-advanced-panel="media"] .wbp-advanced-grid label:has(#advancedBackgroundCategory), #generatorShell.is-popup.is-advanced[data-advanced-panel="media"] .wbp-advanced-grid label:has(#advancedBackgroundSelect), #generatorShell.is-popup.is-advanced[data-advanced-panel="media"] .wbp-advanced-grid label:has(#advancedMusicCategory), #generatorShell.is-popup.is-advanced[data-advanced-panel="media"] .wbp-advanced-grid label:has(#advancedMusicSelect){ display:grid!important; } #generatorShell.is-popup.is-advanced[data-advanced-panel="media"] .wbp-advanced-grid > :not(.wbp-control-background):not(.wbp-control-music){ display:none!important; } #generatorShell.is-popup.is-advanced[data-advanced-panel="text"] .wbp-advanced-grid label:has(#advancedScale){ display:none!important; } @media(max-width:390px){ .wbp-editor .wbp-editor-shell.is-popup{ padding-inline:7px!important; } .wbp-editor .wbp-editor-shell.is-popup .wbp-editor-topbar{ grid-template-columns:38px minmax(0,1fr) auto 38px!important; gap:5px!important; } .wbp-editor .wbp-editor-heading strong{ font-size:15px!important; } .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-preview-layout{ grid-template-columns:minmax(0,1fr) 64px!important; gap:7px!important; } .wbp-editor .wbp-editor-shell.is-popup:not(.is-advanced) .wbp-preview-tools.wbp-simple-tools{ width:64px!important; } .wbp-editor .wbp-editor-shell.is-popup.is-advanced{ grid-template-columns:74px minmax(0,1fr)!important; } } @media(max-width:1024px){ #generatorShell.is-popup.is-advanced .wbp-advanced-toolbar{ position:absolute!important; left:9px!important; top:64px!important; width:74px!important; height:250px!important; grid-template-rows:repeat(5,1fr)!important; gap:4px!important; z-index:8!important; } #generatorShell.is-popup.is-advanced .wbp-advanced-tool{ min-height:0!important; padding:2px!important; gap:1px!important; } #generatorShell.is-popup.is-advanced .wbp-advanced-tool > span{ width:23px!important; height:23px!important; } #generatorShell.is-popup.is-advanced .wbp-advanced-tool b{ font-size:9px!important; } #generatorShell.is-popup.is-advanced .wbp-stage-panel{ margin-left:86px!important; width:calc(100% - 86px)!important; } #generatorShell.is-popup.is-advanced .wbp-advanced-panel{ position:static!important; } #generatorShell.is-popup.is-advanced .wbp-advanced-grid{ width:100%!important; } #generatorShell.is-popup.is-advanced .wbp-advanced-panel{ padding-bottom:118px!important; } #generatorShell.is-popup.is-advanced .wbp-advanced-grid{ padding-bottom:118px!important; } #generatorShell.is-popup.is-advanced .wbp-compact-controls{ display:block!important; position:static!important; width:auto!important; height:auto!important; min-height:0!important; } #generatorShell.is-popup.is-advanced .wbp-actions, #generatorShell.is-popup.is-advanced .wbp-stage-panel .wbp-actions{ position:fixed!important; left:10px!important; right:10px!important; bottom:48px!important; z-index:25!important; display:grid!important; grid-template-columns:1fr 1fr!important; gap:10px!important; width:auto!important; margin:0!important; padding:0!important; background:transparent!important; border:0!important; box-shadow:none!important; opacity:1!important; visibility:visible!important; pointer-events:auto!important; } #generatorShell.is-popup.is-advanced .wbp-actions .wbp-btn, #generatorShell.is-popup.is-advanced .wbp-stage-panel .wbp-actions .wbp-btn{ min-height:44px!important; border-radius:15px!important; box-shadow:0 12px 24px rgba(38,18,55,.14)!important; } #generatorShell.is-popup.is-advanced .wbp-editor-brand{ position:fixed!important; left:0!important; right:0!important; bottom:7px!important; z-index:24!important; display:block!important; min-height:22px!important; pointer-events:none!important; } } .wbp-editor .wbp-overlay{ pointer-events:none!important; } .wbp-editor .wbp-overlay .wbp-draggable, .wbp-editor .wbp-overlay .wbp-element-content, .wbp-editor .wbp-overlay .wbp-handle{ pointer-events:auto!important; } /* v3.4 text interaction: simple mode must allow scroll; advanced keeps drag control. */ #generatorShell:not(.is-advanced) .wbp-video-container, #generatorShell:not(.is-advanced) .wbp-draggable, #generatorShell:not(.is-advanced) .wbp-element-content{ touch-action:pan-y!important; } #generatorShell.is-advanced .wbp-video-container, #generatorShell.is-advanced .wbp-draggable, #generatorShell.is-advanced .wbp-element-content{ touch-action:none!important; } #previewArea .wbp-preview-fullscreen-btn{ z-index:2147483001!important; pointer-events:auto!important; } /* v3.3 desktop workspace correction: stable preview, controls beside it. */ @media(min-width:1025px){ #generatorShell.is-popup.is-advanced{ display:grid!important; grid-template-columns:minmax(560px,1fr) minmax(360px,420px)!important; grid-template-rows:64px minmax(0,1fr)!important; gap:18px!important; padding:22px!important; overflow:hidden!important; } #generatorShell.is-popup.is-advanced .wbp-editor-topbar{ grid-column:1 / -1!important; grid-row:1!important; min-height:64px!important; } #generatorShell.is-popup.is-advanced .wbp-stage-panel{ grid-column:1!important; grid-row:2!important; align-self:stretch!important; justify-self:stretch!important; display:grid!important; place-items:center!important; min-width:0!important; min-height:0!important; padding:0!important; margin:0!important; overflow:hidden!important; } #generatorShell.is-popup.is-advanced .wbp-preview-layout{ display:grid!important; place-items:center!important; width:100%!important; height:100%!important; min-width:0!important; min-height:0!important; } #generatorShell.is-popup.is-advanced .wbp-video-container{ width:auto!important; height:min(calc(100dvh - 132px), calc((100vw - 786px) * 1.777777))!important; min-height:500px!important; max-height:calc(100dvh - 132px)!important; max-width:100%!important; margin:0 auto!important; justify-self:center!important; align-self:center!important; border-radius:26px!important; } #generatorShell.is-popup.is-advanced .wbp-advanced-toolbar{ grid-column:auto!important; grid-row:auto!important; align-self:start!important; display:grid!important; grid-template-columns:1fr!important; grid-auto-rows:minmax(82px,auto)!important; gap:10px!important; min-width:0!important; min-height:0!important; overflow:auto!important; padding:0 2px 2px 0!important; } #generatorShell.is-popup.is-advanced .wbp-advanced-tool{ min-height:82px!important; padding:12px 14px!important; grid-template-columns:58px minmax(0,1fr)!important; gap:12px!important; align-items:center!important; } #generatorShell.is-popup.is-advanced .wbp-advanced-tool > span{ width:48px!important; height:48px!important; } #generatorShell.is-popup.is-advanced .wbp-advanced-tool b{ margin:0!important; font-size:16px!important; line-height:1.1!important; } #generatorShell.is-popup.is-advanced .wbp-advanced-tool small{ margin:3px 0 0!important; font-size:12px!important; } #generatorShell.is-popup.is-advanced .wbp-form-panel{ grid-column:2!important; grid-row:2!important; display:flex!important; flex-direction:column!important; min-width:0!important; min-height:0!important; height:100%!important; padding:0!important; overflow:hidden!important; border-radius:24px!important; background:rgba(255,255,255,.88)!important; border:1px solid rgba(106,27,154,.12)!important; box-shadow:0 18px 54px rgba(50,20,95,.10)!important; } #generatorShell.is-popup.is-advanced .wbp-controls-scroll{ display:flex!important; flex-direction:column!important; min-height:0!important; height:100%!important; overflow:hidden!important; } #generatorShell.is-popup.is-advanced .wbp-advanced-panel{ display:flex!important; flex-direction:column!important; min-height:0!important; height:100%!important; padding:0!important; } #generatorShell.is-popup.is-advanced .wbp-advanced-tabs, #generatorShell.is-popup.is-advanced .wbp-current-target{ display:none!important; } #generatorShell.is-popup.is-advanced .wbp-advanced-grid{ grid-column:auto!important; grid-row:auto!important; flex:1 1 auto!important; display:grid!important; grid-template-columns:1fr!important; align-content:start!important; gap:12px!important; width:100%!important; min-height:0!important; margin:0!important; padding:16px!important; overflow:auto!important; border:0!important; border-radius:0!important; background:transparent!important; box-shadow:none!important; } #generatorShell.is-popup.is-advanced .wbp-advanced-grid > label, #generatorShell.is-popup.is-advanced .wbp-advanced-grid > .wbp-advanced-message-field{ min-width:0!important; display:grid; gap:7px!important; } #generatorShell.is-popup.is-advanced .wbp-advanced-grid select, #generatorShell.is-popup.is-advanced .wbp-advanced-grid input, #generatorShell.is-popup.is-advanced .wbp-advanced-grid textarea{ max-width:100%!important; } #generatorShell.is-popup.is-advanced .wbp-advanced-actions{ position:static!important; grid-column:auto!important; grid-row:auto!important; flex:0 0 auto!important; display:block!important; margin:0!important; padding:12px 16px 16px!important; background:linear-gradient(180deg,rgba(255,255,255,0),#fff 36%)!important; } #generatorShell.is-popup.is-advanced .wbp-mini-btn{ width:100%!important; min-height:44px!important; border-radius:15px!important; } } /* v3.5 editor entry + unified media/effects flow. */ .wbp-editor .wbp-status:not(.is-visible){ display:none!important; } .wbp-editor .wbp-editor-shell:not(.is-popup) .wbp-compact-controls{ position:static!important; inset:auto!important; transform:none!important; display:grid!important; grid-template-columns:1fr!important; gap:10px!important; } .wbp-editor .wbp-editor-shell:not(.is-popup) .wbp-compact-secondary{ order:2!important; display:block!important; width:100%!important; margin:0!important; } .wbp-editor .wbp-editor-shell:not(.is-popup) .wbp-actions{ order:1!important; } .wbp-editor .wbp-editor-shell:not(.is-popup) .wbp-compact-fullscreen{ width:100%!important; min-width:0!important; min-height:46px!important; height:46px!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; gap:10px!important; padding:0 16px!important; border-radius:16px!important; font-weight:950!important; font-size:15px!important; } .wbp-editor .wbp-editor-shell:not(.is-popup) .wbp-compact-fullscreen img{ width:20px!important; height:20px!important; } .wbp-editor .wbp-editor-shell.is-popup .wbp-compact-advanced{ display:none!important; } #generatorShell.is-popup .wbp-compact-advanced, #generatorShell.is-popup:not(.is-advanced) .wbp-compact-advanced, #generatorShell.is-popup.is-advanced .wbp-compact-advanced{ display:none!important; } .wbp-editor .wbp-editor-shell.is-popup .wbp-mode-switch{ position:relative!important; display:inline-grid!important; grid-template-columns:1fr 1fr!important; align-items:center!important; width:154px!important; min-width:154px!important; min-height:42px!important; padding:4px!important; gap:0!important; border-radius:999px!important; background:#fff!important; border:1px solid rgba(106,27,154,.18)!important; box-shadow:0 10px 28px rgba(50,20,95,.08)!important; color:#6a5978!important; overflow:hidden!important; } .wbp-editor .wbp-editor-shell.is-popup .wbp-mode-switch::before{ content:""!important; position:absolute!important; top:4px!important; bottom:4px!important; left:4px!important; width:calc(50% - 4px)!important; border-radius:999px!important; background:linear-gradient(135deg,#E91E63,#6A1B9A)!important; box-shadow:0 8px 18px rgba(106,27,154,.20)!important; transition:transform .18s ease!important; } .wbp-editor .wbp-editor-shell.is-popup .wbp-mode-switch[aria-pressed="true"]::before{ transform:translateX(100%)!important; } .wbp-editor .wbp-editor-shell.is-popup .wbp-mode-switch span, .wbp-editor .wbp-editor-shell.is-popup .wbp-mode-switch b{ position:relative!important; z-index:1!important; display:flex!important; align-items:center!important; justify-content:center!important; min-width:0!important; height:34px!important; margin:0!important; padding:0 6px!important; font-size:11px!important; font-weight:950!important; line-height:1!important; letter-spacing:0!important; text-transform:none!important; color:#6c5d78!important; } .wbp-editor .wbp-editor-shell.is-popup .wbp-mode-switch:not([aria-pressed="true"]) span, .wbp-editor .wbp-editor-shell.is-popup .wbp-mode-switch[aria-pressed="true"] b{ color:#fff!important; } @media(min-width:1025px){ .wbp-editor .wbp-editor-shell.is-popup .wbp-mode-switch{ margin-right:56px!important; } } #generatorShell.is-popup.is-advanced[data-advanced-panel="media"] .wbp-advanced-grid > .wbp-control-transform{ display:grid!important; } #generatorShell.is-popup.is-advanced[data-advanced-panel="media"] .wbp-advanced-grid label:has(#advancedScale), #generatorShell.is-popup.is-advanced[data-advanced-panel="media"] .wbp-advanced-grid label:has(#advancedRotation){ display:grid!important; } #generatorShell.is-popup.is-advanced[data-advanced-panel="media"] .wbp-advanced-grid > :not(.wbp-control-background):not(.wbp-control-music):not(.wbp-control-transform){ display:none!important; } #generatorShell.is-popup.is-advanced[data-advanced-panel="effects"] .wbp-advanced-grid > .wbp-control-background, #generatorShell.is-popup.is-advanced[data-advanced-panel="effects"] .wbp-advanced-grid > .wbp-control-music, #generatorShell.is-popup.is-advanced[data-advanced-panel="effects"] .wbp-advanced-grid > .wbp-control-transform{ display:grid!important; } /* v0.9.257 - Premium checkout modal must sit above the fullscreen editor. */ #generatorShell > .wbp-premium-modal, body.wbp-premium-open .wbp-premium-modal{ position:fixed!important; inset:0!important; z-index:2147483001!important; display:grid!important; place-items:center!important; padding:20px!important; pointer-events:auto!important; } #generatorShell > .wbp-premium-modal[hidden], body.wbp-premium-open .wbp-premium-modal[hidden]{ display:none!important; } #generatorShell > .wbp-premium-modal .wbp-premium-modal__backdrop, body.wbp-premium-open .wbp-premium-modal .wbp-premium-modal__backdrop{ z-index:1!important; } #generatorShell > .wbp-premium-modal .wbp-premium-modal__dialog, body.wbp-premium-open .wbp-premium-modal .wbp-premium-modal__dialog{ position:relative!important; z-index:2!important; } /* v0.9.258 - Keep the Simple/Advanced switch visible in fullscreen. */ #generatorShell.is-popup .wbp-editor-topbar{ position:relative!important; grid-template-columns:44px minmax(0,1fr) 44px!important; } #generatorShell.is-popup .wbp-mode-switch, #generatorShell.is-popup.is-advanced .wbp-mode-switch, .wbp-editor #generatorShell.is-popup .wbp-mode-switch, .wbp-editor #generatorShell.is-popup.is-advanced .wbp-mode-switch{ position:absolute!important; left:50%!important; top:50%!important; transform:translate(-50%,-50%)!important; grid-column:auto!important; display:inline-grid!important; width:156px!important; min-width:132px!important; max-width:calc(100vw - 132px)!important; min-height:42px!important; margin:0!important; padding:4px!important; z-index:1006!important; } #generatorShell.is-popup .wbp-popup-close{ grid-column:3!important; justify-self:end!important; display:grid!important; z-index:1007!important; } @media(max-width:430px){ #generatorShell.is-popup .wbp-mode-switch, #generatorShell.is-popup.is-advanced .wbp-mode-switch, .wbp-editor #generatorShell.is-popup .wbp-mode-switch, .wbp-editor #generatorShell.is-popup.is-advanced .wbp-mode-switch{ width:138px!important; max-width:calc(100vw - 124px)!important; } #generatorShell.is-popup .wbp-mode-switch span, #generatorShell.is-popup .wbp-mode-switch b{ font-size:10px!important; padding:0 4px!important; } } /* v0.9.259 - Cleaner fullscreen header, stronger mode switch, responsive controls. */ .wbp-editor .wbp-editor-heading span{ display:none!important; } #generatorShell.is-popup .wbp-editor-heading{ opacity:0!important; visibility:hidden!important; pointer-events:none!important; } #generatorShell.is-popup .wbp-editor-topbar{ min-height:60px!important; grid-template-columns:44px minmax(0,1fr) 44px!important; padding:0 4px!important; } #generatorShell.is-popup .wbp-mode-switch, #generatorShell.is-popup.is-advanced .wbp-mode-switch, .wbp-editor #generatorShell.is-popup .wbp-mode-switch, .wbp-editor #generatorShell.is-popup.is-advanced .wbp-mode-switch{ width:clamp(156px,28vw,198px)!important; min-width:156px!important; max-width:calc(100vw - 132px)!important; min-height:48px!important; border-radius:999px!important; box-shadow:0 14px 34px rgba(50,20,95,.16)!important; } #generatorShell.is-popup .wbp-mode-switch span, #generatorShell.is-popup .wbp-mode-switch b, .wbp-editor #generatorShell.is-popup .wbp-mode-switch span, .wbp-editor #generatorShell.is-popup .wbp-mode-switch b{ height:40px!important; font-size:12px!important; } #generatorShell.is-popup.is-advanced .wbp-advanced-tool b{ overflow-wrap:anywhere!important; hyphens:auto!important; } #generatorShell.is-popup.is-advanced .wbp-actions, #generatorShell.is-popup.is-advanced .wbp-stage-panel .wbp-actions{ bottom:calc(48px + env(safe-area-inset-bottom,0px))!important; } #generatorShell.is-popup.is-advanced .wbp-editor-brand{ bottom:calc(7px + env(safe-area-inset-bottom,0px))!important; } @media(min-width:1025px){ #generatorShell.is-popup .wbp-editor-topbar{ min-height:68px!important; } #generatorShell.is-popup .wbp-mode-switch, #generatorShell.is-popup.is-advanced .wbp-mode-switch, .wbp-editor #generatorShell.is-popup .wbp-mode-switch, .wbp-editor #generatorShell.is-popup.is-advanced .wbp-mode-switch{ width:198px!important; min-height:50px!important; } #generatorShell.is-popup .wbp-mode-switch span, #generatorShell.is-popup .wbp-mode-switch b, .wbp-editor #generatorShell.is-popup .wbp-mode-switch span, .wbp-editor #generatorShell.is-popup .wbp-mode-switch b{ height:42px!important; font-size:13px!important; } } @media(max-width:390px){ #generatorShell.is-popup .wbp-editor-topbar{ grid-template-columns:40px minmax(0,1fr) 40px!important; min-height:56px!important; padding:0!important; } #generatorShell.is-popup .wbp-mode-switch, #generatorShell.is-popup.is-advanced .wbp-mode-switch, .wbp-editor #generatorShell.is-popup .wbp-mode-switch, .wbp-editor #generatorShell.is-popup.is-advanced .wbp-mode-switch{ width:144px!important; min-width:144px!important; max-width:calc(100vw - 116px)!important; min-height:44px!important; } #generatorShell.is-popup .wbp-mode-switch span, #generatorShell.is-popup .wbp-mode-switch b, .wbp-editor #generatorShell.is-popup .wbp-mode-switch span, .wbp-editor #generatorShell.is-popup .wbp-mode-switch b{ height:36px!important; font-size:10px!important; padding:0 3px!important; } } /* v0.9.260 - Remove unused menu affordance and keep the fullscreen header balanced. */ .wbp-editor .wbp-editor-back{ display:none!important; } #generatorShell.is-popup .wbp-editor-topbar{ grid-template-columns:minmax(0,1fr) 44px!important; } #generatorShell.is-popup .wbp-popup-close{ grid-column:2!important; } @media(max-width:390px){ #generatorShell.is-popup .wbp-editor-topbar{ grid-template-columns:minmax(0,1fr) 40px!important; } } /* v0.9.261 - Advanced rail reset button and non-obstructive render feedback. */ #generatorShell.is-popup.is-advanced .wbp-advanced-reset-design{ border-color:rgba(233,30,99,.22)!important; } #generatorShell.is-popup.is-advanced .wbp-advanced-reset-design > span{ background:linear-gradient(135deg,#fff3f8,#f2e9ff)!important; } #generatorShell.is-popup.is-rendering-video .wbp-status:not(:has(.wbp-download-link)){ display:none!important; } #generatorShell.is-popup .wbp-progress{ max-height:54px!important; margin:6px 0 0!important; padding:8px 10px!important; border-radius:14px!important; background:rgba(255,255,255,.96)!important; box-shadow:0 10px 26px rgba(38,18,55,.10)!important; } #generatorShell.is-popup .wbp-progress-top{ margin-bottom:5px!important; font-size:11px!important; line-height:1.15!important; } #generatorShell.is-popup .wbp-progress-track{ height:7px!important; } #generatorShell.is-popup .wbp-status{ max-height:48px!important; overflow:auto!important; font-size:11px!important; line-height:1.2!important; } @media(max-width:1024px){ #generatorShell.is-popup.is-advanced{ grid-template-columns:96px minmax(0,1fr)!important; } #generatorShell.is-popup.is-advanced .wbp-advanced-toolbar{ left:8px!important; top:70px!important; width:86px!important; height:calc(40dvh - 4px)!important; min-height:250px!important; max-height:310px!important; grid-template-rows:repeat(5,minmax(0,1fr))!important; gap:7px!important; padding:0!important; } #generatorShell.is-popup.is-advanced .wbp-advanced-tool{ min-height:0!important; padding:5px 3px!important; gap:3px!important; border-radius:16px!important; } #generatorShell.is-popup.is-advanced .wbp-advanced-tool > span{ width:29px!important; height:29px!important; } #generatorShell.is-popup.is-advanced .wbp-advanced-tool b{ font-size:10px!important; line-height:1!important; } #generatorShell.is-popup.is-advanced .wbp-stage-panel{ margin-left:98px!important; width:calc(100% - 98px)!important; } #generatorShell.is-popup.is-advanced .wbp-progress{ position:fixed!important; left:10px!important; right:10px!important; bottom:calc(104px + env(safe-area-inset-bottom,0px))!important; z-index:23!important; pointer-events:none!important; } } @media(max-width:360px){ #generatorShell.is-popup.is-advanced{ grid-template-columns:86px minmax(0,1fr)!important; } #generatorShell.is-popup.is-advanced .wbp-advanced-toolbar{ width:76px!important; min-height:238px!important; gap:5px!important; } #generatorShell.is-popup.is-advanced .wbp-advanced-tool > span{ width:26px!important; height:26px!important; } #generatorShell.is-popup.is-advanced .wbp-advanced-tool b{ font-size:9px!important; } #generatorShell.is-popup.is-advanced .wbp-stage-panel{ margin-left:88px!important; width:calc(100% - 88px)!important; } } /* v0.9.262 - Keep the advanced rail inside the preview band on small screens. */ @media(max-width:1024px){ #generatorShell.is-popup.is-advanced .wbp-advanced-toolbar{ top:8px!important; height:calc(40dvh - 10px)!important; min-height:236px!important; max-height:282px!important; align-content:stretch!important; } #generatorShell.is-popup.is-advanced .wbp-advanced-tool{ min-height:0!important; max-height:52px!important; padding:4px 3px!important; } #generatorShell.is-popup.is-advanced .wbp-advanced-tool > span{ width:28px!important; height:28px!important; } } /* v0.9.263 - Clear video generation journey states. */ #generatorShell.is-video-generating #downloadImage, #generatorShell.is-video-generating #prepareRender, #generatorShell.is-video-ready #downloadImage, #generatorShell.is-video-ready #prepareRender, #generatorShell.is-video-error #downloadImage, #generatorShell.is-video-error #prepareRender, #generatorShell.is-video-protected #downloadImage, #generatorShell.is-video-protected #prepareRender{ display:none!important; } #generatorShell:not(.is-video-ready) #downloadVideo, #downloadVideo[hidden], #generatorShell:not(.is-video-error) #retryRender, #generatorShell.is-video-protected #retryRender, #retryRender[hidden]{ display:none!important; } #generatorShell.is-video-ready #downloadVideo{ display:inline-flex!important; } #generatorShell.is-video-error #retryRender{ display:inline-flex!important; } #generatorShell.is-video-generating .wbp-progress{ display:block!important; } #generatorShell.is-video-ready .wbp-status{ max-height:none!important; overflow:visible!important; } .wbp-video-complete-message{ display:grid; gap:4px; text-align:center; } .wbp-video-complete-message strong{ display:block; color:var(--purple); font-size:15px; line-height:1.15; } .wbp-video-complete-message span{ display:block; color:var(--muted); font-size:12px; line-height:1.25; } .wbp-render-snapshot-frame{ display:none; margin:0 auto; width:min(100%,260px); text-align:center; } .wbp-render-snapshot-frame[hidden]{ display:none!important; } .wbp-render-snapshot-frame img{ display:block; width:min(100%,210px); aspect-ratio:9/16; height:auto; margin:0 auto; object-fit:cover; border:6px solid #fff; border-radius:14px; box-shadow:0 20px 48px rgba(45,18,66,.20); } .wbp-render-snapshot-frame figcaption{ margin-top:8px; color:var(--muted); font-size:12px; font-weight:900; } #generatorShell.is-video-generating .wbp-stage-panel, #generatorShell.is-video-ready .wbp-stage-panel{ display:grid!important; place-items:center!important; } #generatorShell.is-video-generating .wbp-preview-layout, #generatorShell.is-video-ready .wbp-preview-layout{ display:none!important; } #generatorShell.is-video-generating .wbp-render-snapshot-frame, #generatorShell.is-video-ready .wbp-render-snapshot-frame{ display:block!important; } @media(max-width:640px){ #generatorShell.is-popup.is-video-ready .wbp-actions, #generatorShell.is-popup.is-video-error .wbp-actions{ grid-template-columns:1fr!important; } #generatorShell.is-popup.is-video-ready #downloadVideo, #generatorShell.is-popup.is-video-error #retryRender{ width:100%!important; min-height:56px!important; justify-content:center!important; font-size:15px!important; } #generatorShell.is-popup.is-video-generating, #generatorShell.is-popup.is-video-ready{ grid-template-rows:48dvh minmax(0,1fr)!important; } #generatorShell.is-popup.is-video-generating .wbp-editor-topbar, #generatorShell.is-popup.is-video-ready .wbp-editor-topbar{ display:none!important; } #generatorShell.is-popup.is-video-generating .wbp-stage-panel, #generatorShell.is-popup.is-video-ready .wbp-stage-panel{ min-height:0!important; height:auto!important; padding:16px 12px 8px!important; background:linear-gradient(180deg,#fff7fb,#f8f2ff)!important; } #generatorShell.is-popup.is-video-generating .wbp-form-panel, #generatorShell.is-popup.is-video-ready .wbp-form-panel{ height:auto!important; min-height:0!important; padding:10px 14px calc(16px + env(safe-area-inset-bottom,0px))!important; border-radius:22px 22px 0 0!important; } #generatorShell.is-popup.is-video-generating .wbp-render-snapshot-frame img, #generatorShell.is-popup.is-video-ready .wbp-render-snapshot-frame img{ width:min(42dvw,152px)!important; max-height:34dvh!important; } } @media(max-width:360px){ #generatorShell.is-popup.is-advanced .wbp-advanced-toolbar{ top:8px!important; height:calc(40dvh - 10px)!important; min-height:224px!important; max-height:260px!important; } #generatorShell.is-popup.is-advanced .wbp-advanced-tool{ max-height:48px!important; } #generatorShell.is-popup.is-advanced .wbp-advanced-tool > span{ width:25px!important; height:25px!important; } } /* Preview-only internal fullscreen for the advanced editor, kept separate from editor popup mode. */ .wbp-preview-fullscreen-btn{ position:absolute; right:10px; top:10px; z-index:28; display:none; width:42px; height:42px; border:1px solid rgba(255,255,255,.55); border-radius:14px; background:rgba(255,255,255,.92); box-shadow:0 12px 28px rgba(20,10,35,.18); cursor:pointer; place-items:center; } .wbp-preview-fullscreen-btn img{ width:22px; height:22px; display:block; } #generatorShell.is-popup.is-advanced .wbp-preview-fullscreen-btn{ display:grid; } #generatorShell.is-preview-fullscreening #previewArea{ position:fixed!important; inset:0!important; z-index:2147483002!important; width:100vw!important; height:100dvh!important; max-width:100vw!important; max-height:100dvh!important; border-radius:0!important; background:#08050d!important; box-shadow:none!important; } #generatorShell.is-preview-fullscreening #previewArea .wbp-preview-fullscreen-btn{ display:grid!important; right:16px!important; top:16px!important; background:rgba(255,255,255,.96)!important; } #generatorShell.is-preview-fullscreening .wbp-editor-topbar, #generatorShell.is-preview-fullscreening .wbp-popup-title, #generatorShell.is-preview-fullscreening .wbp-stage-label, #generatorShell.is-preview-fullscreening .wbp-template-strip, #generatorShell.is-preview-fullscreening .wbp-preview-tools, #generatorShell.is-preview-fullscreening .wbp-form-panel, #generatorShell.is-preview-fullscreening .wbp-compact-controls{ display:none!important; visibility:hidden!important; pointer-events:none!important; } #generatorShell.is-preview-fullscreening .wbp-stage-panel, #generatorShell.is-preview-fullscreening .wbp-preview-layout{ display:block!important; padding:0!important; margin:0!important; border:0!important; box-shadow:none!important; background:transparent!important; } /* v0.9.392 — isolated cosmetic polish; layout and preview geometry unchanged. */ #generatorShell .wbp-tool-card, #generatorShell .wbp-advanced-tool, #generatorShell .wbp-btn, #generatorShell .wbp-nav-btn, #generatorShell .wbp-mode-pill{ box-sizing:border-box!important; background-clip:padding-box!important; isolation:isolate; } #generatorShell .wbp-tool-card, #generatorShell .wbp-advanced-tool{ position:relative; z-index:1; } #generatorShell .wbp-tool-card:focus-visible, #generatorShell .wbp-tool-card:active, #generatorShell .wbp-advanced-tool.is-active, #generatorShell .wbp-advanced-tool:focus-visible{ z-index:2; } @media(max-height:420px) and (orientation:landscape){ #generatorShell.is-popup:not(.is-advanced) .wbp-editor-brand{ visibility:hidden!important; } } /* v0.9.368 - Mobile Advanced: the whole control panel owns vertical scroll. */ @media(max-width:767px){ .wbp-editor #generatorShell.is-popup.is-advanced .wbp-form-panel{ overflow-x:hidden!important; overflow-y:auto!important; overscroll-behavior:contain!important; -webkit-overflow-scrolling:touch!important; scroll-padding-bottom:160px!important; } .wbp-editor #generatorShell.is-popup.is-advanced .wbp-controls-scroll, .wbp-editor #generatorShell.is-popup.is-advanced #advancedOptionsPanel, .wbp-editor #generatorShell.is-popup.is-advanced .wbp-advanced-panel, .wbp-editor #generatorShell.is-popup.is-advanced .wbp-advanced-grid{ flex:0 0 auto!important; width:100%!important; height:auto!important; min-height:0!important; max-height:none!important; overflow:visible!important; } .wbp-editor #generatorShell.is-popup.is-advanced .wbp-advanced-actions{ position:static!important; display:block!important; width:100%!important; margin:8px 0 0!important; padding:8px 12px 168px!important; } .wbp-editor #generatorShell.is-popup.is-advanced .wbp-advanced-actions .wbp-mini-btn{ display:inline-flex!important; width:100%!important; min-height:44px!important; align-items:center!important; justify-content:center!important; } } /* v0.9.367 - Final mobile Advanced scroll owner: include every bottom control. */ @media(max-width:767px){ #generatorShell.is-popup.is-advanced .wbp-form-panel{ overflow-x:hidden!important; overflow-y:auto!important; overscroll-behavior:contain!important; -webkit-overflow-scrolling:touch!important; scroll-padding-bottom:156px!important; } #generatorShell.is-popup.is-advanced .wbp-controls-scroll, #generatorShell.is-popup.is-advanced #advancedOptionsPanel, #generatorShell.is-popup.is-advanced .wbp-advanced-panel{ flex:0 0 auto!important; width:100%!important; height:auto!important; min-height:0!important; max-height:none!important; overflow:visible!important; } #generatorShell.is-popup.is-advanced .wbp-advanced-grid{ flex:0 0 auto!important; height:auto!important; min-height:0!important; max-height:none!important; overflow:visible!important; } #generatorShell.is-popup.is-advanced .wbp-advanced-actions{ position:static!important; display:block!important; width:100%!important; margin:8px 0 0!important; padding:8px 12px 168px!important; } #generatorShell.is-popup.is-advanced .wbp-advanced-actions .wbp-mini-btn{ display:inline-flex!important; width:100%!important; min-height:44px!important; align-items:center!important; justify-content:center!important; } } /* v0.9.364 - Desktop inline mode switch and restored mobile Simple geometry. */ @media(min-width:1025px){ #generatorShell.is-desktop-workspace .wbp-mode-switch{ position:relative!important; display:inline-grid!important; grid-template-columns:1fr 1fr!important; align-items:center!important; width:198px!important; min-width:198px!important; min-height:50px!important; padding:4px!important; overflow:hidden!important; border-radius:999px!important; background:#fff!important; border:1px solid rgba(106,27,154,.18)!important; box-shadow:0 14px 34px rgba(50,20,95,.16)!important; } #generatorShell.is-desktop-workspace .wbp-mode-switch::before{ content:""!important; position:absolute!important; top:4px!important; bottom:4px!important; left:4px!important; width:calc(50% - 4px)!important; border-radius:999px!important; background:linear-gradient(135deg,#E91E63,#6A1B9A)!important; transition:transform .18s ease!important; } #generatorShell.is-desktop-workspace .wbp-mode-switch[aria-pressed="true"]::before{ transform:translateX(100%)!important; } #generatorShell.is-desktop-workspace .wbp-mode-switch span, #generatorShell.is-desktop-workspace .wbp-mode-switch b{ position:relative!important; z-index:1!important; display:flex!important; align-items:center!important; justify-content:center!important; height:42px!important; margin:0!important; color:#6c5d78!important; } #generatorShell.is-desktop-workspace .wbp-mode-switch:not([aria-pressed="true"]) span, #generatorShell.is-desktop-workspace .wbp-mode-switch[aria-pressed="true"] b{ color:#fff!important; } } /* v0.9.272 - preview-only fullscreen is a hard modal state across desktop overrides. */ .wbp-editor #generatorShell.is-popup.is-advanced.is-preview-fullscreening .wbp-compact-controls, .wbp-editor #generatorShell.is-popup.is-advanced.is-preview-fullscreening .wbp-actions, .wbp-editor #generatorShell.is-popup.is-advanced.is-preview-fullscreening .wbp-editor-brand, .wbp-editor #generatorShell.is-popup.is-advanced.is-preview-fullscreening .wbp-form-panel, .wbp-editor #generatorShell.is-popup.is-advanced.is-preview-fullscreening .wbp-template-strip, .wbp-editor #generatorShell.is-popup.is-advanced.is-preview-fullscreening .wbp-audio-strip, #generatorShell.is-popup.is-advanced.is-preview-fullscreening .wbp-compact-controls, #generatorShell.is-popup.is-advanced.is-preview-fullscreening .wbp-actions, #generatorShell.is-popup.is-advanced.is-preview-fullscreening .wbp-editor-brand, #generatorShell.is-popup.is-advanced.is-preview-fullscreening .wbp-form-panel, #generatorShell.is-popup.is-advanced.is-preview-fullscreening .wbp-template-strip, #generatorShell.is-popup.is-advanced.is-preview-fullscreening .wbp-audio-strip{ display:none!important; visibility:hidden!important; opacity:0!important; pointer-events:none!important; width:0!important; height:0!important; max-width:0!important; max-height:0!important; margin:0!important; padding:0!important; overflow:hidden!important; } /* v0.9.265-scroll-lock-minimal - preserve advanced UI, only lock background scroll. */ html:has(body.wbp-popup-open), body.wbp-popup-open{ overflow:hidden!important; overscroll-behavior:none!important; height:100%!important; } body.wbp-popup-open{ position:fixed!important; inset:0!important; width:100%!important; } .wbp-editor:has(#generatorShell.is-popup){ position:relative!important; z-index:2147482000!important; } body.wbp-popup-open .cnr-site-header{ pointer-events:none!important; } #generatorShell.is-popup{ z-index:2147483000!important; max-height:100dvh!important; overflow:hidden!important; overscroll-behavior:none!important; } /* v0.9.269 - Desktop advanced fullscreen must keep primary actions visible. */ @media(min-width:1025px){ #generatorShell.is-popup.is-advanced .wbp-compact-controls, .wbp-editor #generatorShell.is-popup.is-advanced .wbp-compact-controls{ display:block!important; visibility:visible!important; opacity:1!important; position:fixed!important; left:50%!important; right:auto!important; bottom:18px!important; z-index:2147483001!important; width:min(560px, calc(100vw - 32px))!important; max-width:min(560px, calc(100vw - 32px))!important; transform:translateX(-50%)!important; pointer-events:none!important; } #generatorShell.is-popup.is-advanced .wbp-compact-secondary, #generatorShell.is-popup.is-advanced .wbp-editor-brand, #generatorShell.is-popup.is-advanced .wbp-progress, #generatorShell.is-popup.is-advanced .wbp-status{ display:none!important; } #generatorShell.is-popup.is-advanced .wbp-actions, .wbp-editor #generatorShell.is-popup.is-advanced .wbp-actions{ display:grid!important; grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important; gap:12px!important; position:static!important; left:auto!important; right:auto!important; bottom:auto!important; width:100%!important; max-width:none!important; margin:0!important; padding:0!important; background:transparent!important; border:0!important; box-shadow:none!important; opacity:1!important; visibility:visible!important; transform:none!important; pointer-events:auto!important; } #generatorShell.is-popup.is-advanced .wbp-actions .wbp-btn, .wbp-editor #generatorShell.is-popup.is-advanced .wbp-actions .wbp-btn{ min-height:48px!important; border-radius:16px!important; pointer-events:auto!important; } } /* v0.9.271 - Preview-only fullscreen is only the preview, never editor tools. */ #generatorShell.is-preview-fullscreening .wbp-editor-topbar, #generatorShell.is-preview-fullscreening .wbp-popup-title, #generatorShell.is-preview-fullscreening .wbp-stage-label, #generatorShell.is-preview-fullscreening .wbp-template-strip, #generatorShell.is-preview-fullscreening .wbp-preview-tools, #generatorShell.is-preview-fullscreening .wbp-form-panel, #generatorShell.is-preview-fullscreening .wbp-compact-controls, #generatorShell.is-preview-fullscreening .wbp-actions, #generatorShell.is-preview-fullscreening .wbp-editor-brand, .wbp-editor #generatorShell.is-preview-fullscreening .wbp-compact-controls, .wbp-editor #generatorShell.is-preview-fullscreening .wbp-actions{ display:none!important; visibility:hidden!important; pointer-events:none!important; } #generatorShell.is-preview-fullscreening .wbp-stage-panel, #generatorShell.is-preview-fullscreening .wbp-preview-layout{ display:block!important; padding:0!important; margin:0!important; border:0!important; box-shadow:none!important; background:transparent!important; } /* v4 structural candidate: explicit responsive states, independent from legacy cascade. */ @media (max-width:1024px){ #generatorShell.is-popup.is-advanced #advancedOptionsPanel .wbp-advanced-toolbar{ position:static!important; inset:auto!important; width:100%!important; height:58px!important; min-height:58px!important; display:grid!important; grid-template-columns:repeat(5,minmax(0,1fr))!important; grid-template-rows:58px!important; gap:6px!important; margin:0 0 8px!important; padding:0!important; transform:none!important; } #generatorShell.is-popup.is-advanced #advancedOptionsPanel .wbp-advanced-tool{ position:static!important; inset:auto!important; width:auto!important; height:58px!important; min-width:0!important; min-height:0!important; margin:0!important; padding:5px!important; display:flex!important; flex-direction:column!important; align-items:center!important; justify-content:center!important; overflow:hidden!important; } #generatorShell.is-popup.is-advanced #advancedOptionsPanel .wbp-advanced-grid{ position:static!important; inset:auto!important; margin:0!important; transform:none!important; } #generatorShell.is-popup.is-advanced .wbp-compact-controls .wbp-actions{ position:static!important; inset:auto!important; width:100%!important; height:auto!important; margin:0!important; } #generatorShell.is-popup.is-advanced{ position:fixed!important; inset:0!important; width:100vw!important; height:100dvh!important; min-height:0!important; display:grid!important; grid-template-columns:1fr!important; grid-template-rows:64px minmax(260px,48dvh) minmax(0,1fr)!important; gap:0!important; padding:0 8px!important; overflow:hidden!important; } #generatorShell.is-popup.is-advanced .wbp-editor-topbar{ position:relative!important; inset:auto!important; grid-row:1!important; width:100%!important; min-height:64px!important; z-index:30!important; } #generatorShell.is-popup.is-advanced .wbp-stage-panel{ position:relative!important; inset:auto!important; grid-column:1!important; grid-row:2!important; width:100%!important; height:100%!important; min-height:0!important; padding:8px!important; overflow:hidden!important; display:grid!important; place-items:center!important; } #generatorShell.is-popup.is-advanced .wbp-preview-layout{ position:relative!important; inset:auto!important; width:100%!important; height:100%!important; min-height:0!important; display:grid!important; place-items:center!important; grid-template-columns:1fr!important; padding:0!important; } #generatorShell.is-popup.is-advanced .wbp-video-container{ position:relative!important; inset:auto!important; width:auto!important; height:100%!important; max-width:100%!important; max-height:100%!important; aspect-ratio:9/16!important; margin:auto!important; transform:none!important; } #generatorShell.is-popup.is-advanced .wbp-form-panel{ position:relative!important; inset:auto!important; grid-column:1!important; grid-row:3!important; width:100%!important; height:100%!important; min-height:0!important; padding:8px 10px 70px!important; overflow:auto!important; border-radius:18px 18px 0 0!important; } #generatorShell.is-popup.is-advanced .wbp-controls-scroll{ position:static!important; width:100%!important; height:auto!important; min-height:0!important; overflow:visible!important; display:block!important; } #generatorShell.is-popup.is-advanced .wbp-advanced-panel{ position:static!important; width:100%!important; height:auto!important; min-height:0!important; display:block!important; } #generatorShell.is-popup.is-advanced .wbp-advanced-toolbar{ position:static!important; width:100%!important; height:auto!important; display:grid!important; grid-template-columns:repeat(5,minmax(0,1fr))!important; gap:6px!important; margin:0 0 8px!important; transform:none!important; } #generatorShell.is-popup.is-advanced .wbp-advanced-tool{ position:static!important; width:auto!important; min-width:0!important; height:58px!important; padding:5px!important; display:flex!important; flex-direction:column!important; align-items:center!important; justify-content:center!important; overflow:hidden!important; } #generatorShell.is-popup.is-advanced .wbp-advanced-tool > span{ width:30px!important; height:30px!important; } #generatorShell.is-popup.is-advanced .wbp-advanced-tool b{display:block!important;width:100%!important;font-size:.68rem!important;line-height:1!important;text-align:center!important;white-space:nowrap!important} #generatorShell.is-popup.is-advanced .wbp-advanced-tool small{display:none!important} #generatorShell.is-popup.is-advanced .wbp-current-target{margin:0 0 8px!important} #generatorShell.is-popup.is-advanced .wbp-advanced-tabs{ position:static!important; width:100%!important; margin:0 0 8px!important; } #generatorShell.is-popup.is-advanced .wbp-advanced-grid{ position:static!important; width:100%!important; height:auto!important; min-height:0!important; overflow:visible!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; align-items:start!important; inset:auto!important; margin:0!important; padding:8px!important; transform:none!important; } #generatorShell.is-popup.is-advanced .wbp-compact-controls{ position:fixed!important; left:8px!important; right:8px!important; bottom:8px!important; width:auto!important; z-index:50!important; display:block!important; visibility:visible!important; opacity:1!important; height:58px!important; min-height:58px!important; padding:6px!important; background:rgba(255,255,255,.98)!important; border:1px solid rgba(123,43,214,.18)!important; border-radius:16px!important; box-shadow:0 -8px 24px rgba(50,20,95,.12)!important; } #generatorShell.is-popup.is-advanced .wbp-current-target, #generatorShell.is-popup.is-advanced .wbp-advanced-tabs{ display:none!important; } #generatorShell.is-popup.is-advanced .wbp-actions{ position:static!important; inset:auto!important; width:100%!important; margin:0!important; display:grid!important; grid-template-columns:1fr 1fr!important; } #generatorShell.is-popup.is-advanced .wbp-template-strip, #generatorShell.is-popup.is-advanced .wbp-audio-strip, #generatorShell.is-popup.is-advanced .wbp-hidden-template-strip, #generatorShell.is-popup.is-advanced .wbp-hidden-music-options{ display:none!important; } } @media (max-width:560px){ #generatorShell.is-popup.is-advanced{ grid-template-rows:58px minmax(220px,43dvh) minmax(0,1fr)!important; padding:0 6px!important; } #generatorShell.is-popup.is-advanced .wbp-editor-topbar{min-height:58px!important} #generatorShell.is-popup.is-advanced .wbp-stage-panel{padding:6px!important} #generatorShell.is-popup.is-advanced .wbp-form-panel{padding:6px 6px 66px!important} #generatorShell.is-popup.is-advanced .wbp-advanced-toolbar{gap:4px!important} #generatorShell.is-popup.is-advanced .wbp-advanced-tool{height:50px!important} #generatorShell.is-popup.is-advanced .wbp-advanced-tool > span{width:25px!important;height:25px!important} #generatorShell.is-popup.is-advanced .wbp-advanced-grid{grid-template-columns:1fr!important} #generatorShell.is-popup.is-advanced .wbp-compact-controls{left:6px!important;right:6px!important;bottom:6px!important} } @media (min-width:1025px){ #generatorShell.is-popup.is-advanced .wbp-actions{ left:22px!important; right:460px!important; width:auto!important; } } /* v5 iteration 2: use the complete control column without visual dead zones. */ @media (min-width:568px) and (orientation:landscape), (min-width:1025px){ #generatorShell.is-popup.is-advanced #advancedOptionsPanel{ width:100%!important; height:100%!important; min-height:100%!important; display:flex!important; flex-direction:column!important; align-items:stretch!important; justify-content:flex-start!important; gap:8px!important; padding:8px!important; overflow:auto!important; background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(252,248,255,.96))!important; border:1px solid rgba(123,43,214,.14)!important; border-radius:18px!important; box-shadow:0 12px 30px rgba(50,20,95,.08)!important; box-sizing:border-box!important; } #generatorShell.is-popup.is-advanced #advancedOptionsPanel .wbp-advanced-grid{ flex:1 0 auto!important; align-content:start!important; } } /* v5 iteration 4: keyboard clarity, touch targets and motion preferences. */ @media (min-width:568px) and (orientation:landscape), (min-width:1025px){ #generatorShell :is(button,a,input,textarea,select):focus-visible{ outline:3px solid #ffb000!important; outline-offset:3px!important; box-shadow:0 0 0 5px rgba(255,176,0,.2)!important; } #generatorShell .wbp-advanced-tool, #generatorShell .wbp-btn, #generatorShell .wbp-nav-btn, #generatorShell .wbp-mode-pill{ min-height:44px; } #generatorShell .wbp-advanced-tool[aria-pressed="true"], #generatorShell .wbp-advanced-tool.is-active{ border-color:#7b2bd6!important; box-shadow:0 0 0 2px rgba(123,43,214,.16)!important; } } @media (prefers-reduced-motion:reduce){ #generatorShell *, #generatorShell *::before, #generatorShell *::after{ scroll-behavior:auto!important; transition-duration:.01ms!important; animation-duration:.01ms!important; animation-iteration-count:1!important; } } /* v5 iteration 3: clear primary/secondary action hierarchy. */ @media (min-width:568px) and (orientation:landscape), (min-width:1025px){ #generatorShell.is-popup.is-advanced .wbp-stage-panel .wbp-compact-controls .wbp-actions{ grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)!important; gap:12px!important; } #generatorShell.is-popup.is-advanced .wbp-stage-panel .wbp-compact-controls .wbp-btn{ font-size:.94rem!important; letter-spacing:-.01em!important; } #generatorShell.is-popup.is-advanced .wbp-stage-panel .wbp-compact-controls .wbp-btn-primary{ box-shadow:0 10px 24px rgba(233,30,99,.24)!important; } } /* v5 iteration 1: make preview and control panel read as one workspace. */ @media (min-width:568px) and (orientation:landscape){ #generatorShell.is-popup.is-advanced .wbp-stage-panel .wbp-preview-layout{ place-items:center end!important; padding-right:12px!important; } #generatorShell.is-popup.is-advanced .wbp-stage-panel #previewArea{ position:absolute!important; left:auto!important; right:18px!important; top:50%!important; margin:0!important; transform:translateY(-50%)!important; } } @media (min-width:1025px){ #generatorShell.is-popup.is-advanced .wbp-stage-panel .wbp-preview-layout{ place-items:center end!important; padding-right:18px!important; } #generatorShell.is-popup.is-advanced .wbp-stage-panel #previewArea{ margin-left:auto!important; margin-right:0!important; } } /* v4.1 landscape workspace: preview and controls are one side-by-side interface. */ @media (max-width:1024px) and (orientation:landscape){ #generatorShell.is-popup.is-advanced{ grid-template-columns:minmax(360px,1.15fr) minmax(300px,.85fr)!important; grid-template-rows:58px minmax(0,1fr) 64px!important; gap:8px!important; padding:0 8px 8px!important; } #generatorShell.is-popup.is-advanced .wbp-editor-topbar{ grid-column:1/-1!important; grid-row:1!important; min-height:58px!important; } #generatorShell.is-popup.is-advanced .wbp-stage-panel{ grid-column:1!important; grid-row:2!important; width:100%!important; height:100%!important; min-height:0!important; margin:0!important; padding:8px!important; transform:none!important; border-radius:20px!important; } #generatorShell.is-popup.is-advanced .wbp-preview-layout{ width:100%!important; height:100%!important; min-height:0!important; margin:0!important; transform:none!important; display:grid!important; place-items:center!important; } #generatorShell.is-popup.is-advanced .wbp-video-container{ width:auto!important; height:100%!important; max-width:100%!important; max-height:100%!important; margin:auto!important; } #generatorShell.is-popup.is-advanced .wbp-form-panel{ grid-column:2!important; grid-row:2!important; width:100%!important; height:100%!important; min-width:0!important; min-height:0!important; margin:0!important; padding:8px!important; overflow:auto!important; border-radius:20px!important; } #generatorShell.is-popup.is-advanced .wbp-controls-scroll, #generatorShell.is-popup.is-advanced #advancedOptionsPanel{ width:100%!important; height:auto!important; min-height:0!important; margin:0!important; padding:0!important; overflow:visible!important; } #generatorShell.is-popup.is-advanced #advancedOptionsPanel .wbp-advanced-toolbar{ height:50px!important; min-height:50px!important; grid-template-rows:50px!important; gap:4px!important; } #generatorShell.is-popup.is-advanced #advancedOptionsPanel .wbp-advanced-tool{ height:50px!important; padding:4px!important; } #generatorShell.is-popup.is-advanced #advancedOptionsPanel .wbp-advanced-tool > span{ width:24px!important; height:24px!important; } #generatorShell.is-popup.is-advanced #advancedOptionsPanel .wbp-advanced-tool b{ font-size:.62rem!important; } #generatorShell.is-popup.is-advanced #advancedOptionsPanel .wbp-advanced-grid{ grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:8px!important; padding:6px!important; } #generatorShell.is-popup.is-advanced .wbp-compact-controls{ position:static!important; inset:auto!important; grid-column:1/-1!important; grid-row:3!important; width:100%!important; height:56px!important; min-height:56px!important; margin:0!important; padding:5px!important; } #generatorShell.is-popup.is-advanced .wbp-compact-controls .wbp-actions{ position:static!important; inset:auto!important; width:100%!important; height:46px!important; margin:0!important; } #generatorShell.is-popup.is-advanced .wbp-stage-panel .wbp-compact-controls{ position:fixed!important; left:8px!important; right:8px!important; bottom:8px!important; top:auto!important; width:auto!important; height:56px!important; min-height:56px!important; margin:0!important; padding:5px!important; z-index:80!important; background:rgba(255,255,255,.98)!important; border:1px solid rgba(123,43,214,.18)!important; border-radius:16px!important; box-shadow:0 -8px 24px rgba(50,20,95,.12)!important; box-sizing:border-box!important; transform:none!important; } #generatorShell.is-popup.is-advanced .wbp-stage-panel .wbp-compact-controls .wbp-actions{ position:static!important; inset:auto!important; width:100%!important; max-width:none!important; height:46px!important; margin:0!important; transform:none!important; } } /* v4.2 layout audit: one clear workspace and one unobstructed action bar. */ @media (max-width:1024px) and (orientation:landscape){ #generatorShell.is-popup.is-advanced .wbp-editor-brand, #generatorShell.is-popup.is-advanced .wbp-compact-secondary{ display:none!important; } #generatorShell.is-popup.is-advanced .wbp-stage-panel .wbp-compact-controls{ left:8px!important; right:8px!important; bottom:6px!important; width:auto!important; max-width:none!important; height:58px!important; min-height:58px!important; padding:5px!important; } #generatorShell.is-popup.is-advanced .wbp-stage-panel .wbp-compact-controls .wbp-actions{ display:grid!important; grid-template-columns:1fr 1fr!important; gap:10px!important; width:100%!important; max-width:none!important; height:46px!important; margin:0!important; } #generatorShell.is-popup.is-advanced .wbp-stage-panel .wbp-compact-controls .wbp-btn{ width:100%!important; max-width:none!important; min-width:0!important; height:46px!important; min-height:46px!important; margin:0!important; } } @media (min-width:1025px){ #generatorShell.is-popup.is-advanced{ grid-template-rows:82px minmax(0,1fr) 70px!important; padding-bottom:8px!important; } #generatorShell.is-popup.is-advanced .wbp-stage-panel, #generatorShell.is-popup.is-advanced .wbp-form-panel{ height:100%!important; max-height:100%!important; min-height:0!important; overflow:auto!important; } #generatorShell.is-popup.is-advanced .wbp-preview-layout, #generatorShell.is-popup.is-advanced .wbp-video-container{ max-height:100%!important; } #generatorShell.is-popup.is-advanced .wbp-stage-panel .wbp-preview-layout{ width:100%!important; height:100%!important; min-height:0!important; overflow:hidden!important; display:grid!important; place-items:center!important; } #generatorShell.is-popup.is-advanced .wbp-stage-panel #previewArea{ width:auto!important; height:100%!important; max-width:100%!important; max-height:100%!important; margin:auto!important; } #generatorShell.is-popup.is-advanced .wbp-editor-brand, #generatorShell.is-popup.is-advanced .wbp-compact-secondary{ display:none!important; } #generatorShell.is-popup.is-advanced .wbp-stage-panel .wbp-compact-controls{ position:fixed!important; left:22px!important; right:22px!important; bottom:8px!important; top:auto!important; width:auto!important; max-width:none!important; height:58px!important; min-height:58px!important; margin:0!important; padding:5px!important; z-index:80!important; background:rgba(255,255,255,.98)!important; border:1px solid rgba(123,43,214,.18)!important; border-radius:16px!important; box-shadow:0 -8px 24px rgba(50,20,95,.12)!important; box-sizing:border-box!important; transform:none!important; } #generatorShell.is-popup.is-advanced .wbp-stage-panel .wbp-compact-controls .wbp-actions{ position:static!important; inset:auto!important; display:grid!important; grid-template-columns:1fr 1fr!important; gap:12px!important; width:100%!important; max-width:none!important; height:46px!important; margin:0!important; transform:none!important; } #generatorShell.is-popup.is-advanced .wbp-stage-panel .wbp-compact-controls .wbp-btn{ width:100%!important; max-width:none!important; height:46px!important; min-height:46px!important; margin:0!important; } } /* v0.9.272 - preview-only fullscreen is a hard modal state across desktop overrides. */ .wbp-editor #generatorShell.is-popup.is-advanced.is-preview-fullscreening .wbp-compact-controls, .wbp-editor #generatorShell.is-popup.is-advanced.is-preview-fullscreening .wbp-actions, .wbp-editor #generatorShell.is-popup.is-advanced.is-preview-fullscreening .wbp-editor-brand, .wbp-editor #generatorShell.is-popup.is-advanced.is-preview-fullscreening .wbp-form-panel, .wbp-editor #generatorShell.is-popup.is-advanced.is-preview-fullscreening .wbp-template-strip, .wbp-editor #generatorShell.is-popup.is-advanced.is-preview-fullscreening .wbp-audio-strip, #generatorShell.is-popup.is-advanced.is-preview-fullscreening .wbp-compact-controls, #generatorShell.is-popup.is-advanced.is-preview-fullscreening .wbp-actions, #generatorShell.is-popup.is-advanced.is-preview-fullscreening .wbp-editor-brand, #generatorShell.is-popup.is-advanced.is-preview-fullscreening .wbp-form-panel, #generatorShell.is-popup.is-advanced.is-preview-fullscreening .wbp-template-strip, #generatorShell.is-popup.is-advanced.is-preview-fullscreening .wbp-audio-strip{ display:none!important; visibility:hidden!important; opacity:0!important; pointer-events:none!important; width:0!important; height:0!important; max-width:0!important; max-height:0!important; margin:0!important; padding:0!important; overflow:hidden!important; } /* v0.9.265-scroll-lock-minimal - preserve advanced UI, only lock background scroll. */ html:has(body.wbp-popup-open), body.wbp-popup-open{ overflow:hidden!important; overscroll-behavior:none!important; height:100%!important; } body.wbp-popup-open{ position:fixed!important; inset:0!important; width:100%!important; } .wbp-editor:has(#generatorShell.is-popup){ position:relative!important; z-index:2147482000!important; } body.wbp-popup-open .cnr-site-header{ pointer-events:none!important; } #generatorShell.is-popup{ z-index:2147483000!important; max-height:100dvh!important; overflow:hidden!important; overscroll-behavior:none!important; } /* v0.9.269 - Desktop advanced fullscreen must keep primary actions visible. */ @media(min-width:1025px){ #generatorShell.is-popup.is-advanced .wbp-compact-controls, .wbp-editor #generatorShell.is-popup.is-advanced .wbp-compact-controls{ display:block!important; visibility:visible!important; opacity:1!important; position:fixed!important; left:50%!important; right:auto!important; bottom:18px!important; z-index:2147483001!important; width:min(560px, calc(100vw - 32px))!important; max-width:min(560px, calc(100vw - 32px))!important; transform:translateX(-50%)!important; pointer-events:none!important; } #generatorShell.is-popup.is-advanced .wbp-compact-secondary, #generatorShell.is-popup.is-advanced .wbp-editor-brand, #generatorShell.is-popup.is-advanced .wbp-progress, #generatorShell.is-popup.is-advanced .wbp-status{ display:none!important; } #generatorShell.is-popup.is-advanced .wbp-actions, .wbp-editor #generatorShell.is-popup.is-advanced .wbp-actions{ display:grid!important; grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important; gap:12px!important; position:static!important; left:auto!important; right:auto!important; bottom:auto!important; width:100%!important; max-width:none!important; margin:0!important; padding:0!important; background:transparent!important; border:0!important; box-shadow:none!important; opacity:1!important; visibility:visible!important; transform:none!important; pointer-events:auto!important; } #generatorShell.is-popup.is-advanced .wbp-actions .wbp-btn, .wbp-editor #generatorShell.is-popup.is-advanced .wbp-actions .wbp-btn{ min-height:48px!important; border-radius:16px!important; pointer-events:auto!important; } } /* v0.9.271 - Preview-only fullscreen is only the preview, never editor tools. */ #generatorShell.is-preview-fullscreening .wbp-editor-topbar, #generatorShell.is-preview-fullscreening .wbp-popup-title, #generatorShell.is-preview-fullscreening .wbp-stage-label, #generatorShell.is-preview-fullscreening .wbp-template-strip, #generatorShell.is-preview-fullscreening .wbp-preview-tools, #generatorShell.is-preview-fullscreening .wbp-form-panel, #generatorShell.is-preview-fullscreening .wbp-compact-controls, #generatorShell.is-preview-fullscreening .wbp-actions, #generatorShell.is-preview-fullscreening .wbp-editor-brand, .wbp-editor #generatorShell.is-preview-fullscreening .wbp-compact-controls, .wbp-editor #generatorShell.is-preview-fullscreening .wbp-actions{ display:none!important; visibility:hidden!important; pointer-events:none!important; } #generatorShell.is-preview-fullscreening .wbp-stage-panel, #generatorShell.is-preview-fullscreening .wbp-preview-layout{ display:block!important; padding:0!important; margin:0!important; border:0!important; box-shadow:none!important; background:transparent!important; } /* Final cascade for the isolated v0.9.392 cosmetic adjustments. */ #generatorShell .wbp-tool-card, #generatorShell .wbp-advanced-tool, #generatorShell .wbp-btn, #generatorShell .wbp-nav-btn, #generatorShell .wbp-mode-pill{ box-sizing:border-box!important; background-clip:padding-box!important; isolation:isolate; } #generatorShell .wbp-tool-card, #generatorShell .wbp-advanced-tool{position:relative;z-index:1} #generatorShell .wbp-tool-card:focus-visible, #generatorShell .wbp-tool-card:active, #generatorShell .wbp-advanced-tool.is-active, #generatorShell .wbp-advanced-tool:focus-visible{z-index:2} @media(max-height:420px) and (orientation:landscape){ #generatorShell.is-popup:not(.is-advanced) .wbp-editor-brand{visibility:hidden!important} } /* v0.9.393 — approved overlap corrections, scoped by affected viewport. */ @media(max-width:340px) and (orientation:portrait){ #generatorShell.is-popup:not(.is-advanced) .wbp-actions{ display:grid!important; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)!important; gap:6px!important; } #generatorShell.is-popup:not(.is-advanced) .wbp-actions .wbp-btn{ width:100%!important; min-width:0!important; margin:0!important; padding-inline:6px!important; font-size:.76rem!important; } #generatorShell.is-popup:not(.is-advanced) .wbp-actions .wbp-btn__asset{ width:22px!important; height:22px!important; flex:0 0 22px!important; } } @media(max-width:560px) and (orientation:portrait){ .wbp-editor #generatorShell.is-popup.is-advanced .wbp-stage-panel .wbp-compact-secondary, .wbp-editor #generatorShell.is-popup.is-advanced .wbp-stage-panel .wbp-editor-brand, .wbp-editor #generatorShell.is-popup.is-advanced .wbp-stage-panel .wbp-progress, .wbp-editor #generatorShell.is-popup.is-advanced .wbp-stage-panel .wbp-status{ display:none!important; } .wbp-editor #generatorShell.is-popup.is-advanced .wbp-stage-panel .wbp-compact-controls{ z-index:90!important; height:58px!important; min-height:58px!important; padding:5px!important; background:#fff!important; } #generatorShell.is-popup.is-advanced .wbp-advanced-grid{ padding-bottom:70px!important; } } @media(max-width:720px) and (max-height:420px) and (orientation:landscape){ #generatorShell.is-popup:not(.is-advanced) .wbp-preview-tools.wbp-simple-tools{ width:104px!important; height:96px!important; display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; grid-template-rows:repeat(2,minmax(0,1fr))!important; gap:4px!important; align-content:stretch!important; } #generatorShell.is-popup:not(.is-advanced) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card{ position:relative!important; inset:auto!important; width:50px!important; min-width:0!important; height:46px!important; min-height:44px!important; margin:0!important; padding:3px!important; transform:none!important; } #generatorShell.is-popup:not(.is-advanced) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card b{ display:none!important; } #generatorShell.is-popup:not(.is-advanced) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card__icon{ width:34px!important; height:34px!important; } } @media(min-width:721px) and (max-width:1024px) and (max-height:420px) and (orientation:landscape){ #generatorShell.is-popup:not(.is-advanced) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card{ height:40px!important; min-height:40px!important; padding:2px!important; } #generatorShell.is-popup:not(.is-advanced) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card b{ display:none!important; } #generatorShell.is-popup:not(.is-advanced) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card__icon{ width:30px!important; height:30px!important; } } @media(max-width:720px) and (max-height:420px) and (orientation:landscape){ #generatorShell.is-popup.is-advanced{box-sizing:border-box!important} #generatorShell.is-popup.is-advanced .wbp-compact-secondary, #generatorShell.is-popup.is-advanced .wbp-editor-brand, #generatorShell.is-popup.is-advanced .wbp-progress, #generatorShell.is-popup.is-advanced .wbp-status{ display:none!important; } #generatorShell.is-popup.is-advanced .wbp-compact-controls, #generatorShell.is-popup.is-advanced .wbp-stage-panel .wbp-compact-controls{ height:58px!important; min-height:58px!important; padding:5px!important; } #generatorShell.is-popup.is-advanced .wbp-controls-scroll, #generatorShell.is-popup.is-advanced #advancedOptionsPanel{ overflow:auto!important; padding-bottom:70px!important; } #generatorShell.is-popup.is-advanced .wbp-controls-scroll{ width:calc(100% - 10px)!important; max-width:calc(100% - 10px)!important; } #generatorShell.is-popup.is-advanced .wbp-advanced-toolbar{gap:2px!important} #generatorShell.is-popup.is-advanced .wbp-advanced-tool{ min-width:0!important; padding-inline:2px!important; } #generatorShell.is-popup.is-advanced .wbp-advanced-tool b{font-size:.58rem!important} } @media(min-width:568px) and (max-width:1024px) and (orientation:portrait){ #generatorShell.is-popup.is-advanced .wbp-compact-secondary, #generatorShell.is-popup.is-advanced .wbp-editor-brand, #generatorShell.is-popup.is-advanced .wbp-progress, #generatorShell.is-popup.is-advanced .wbp-status{ display:none!important; } #generatorShell.is-popup.is-advanced .wbp-compact-controls, #generatorShell.is-popup.is-advanced .wbp-stage-panel .wbp-compact-controls{ position:fixed!important; left:8px!important; right:8px!important; top:auto!important; bottom:8px!important; width:auto!important; max-width:none!important; height:58px!important; min-height:58px!important; padding:5px!important; transform:none!important; } #generatorShell.is-popup.is-advanced .wbp-form-panel, #generatorShell.is-popup.is-advanced .wbp-controls-scroll, #generatorShell.is-popup.is-advanced #advancedOptionsPanel{ padding-bottom:80px!important; } } /* Compact inline contract: one complete mobile interface through 1024px. */ @media(max-width:1024px){ #generatorShell:not(.is-popup){ grid-template-columns:1fr!important; grid-template-rows:minmax(0,1fr) auto!important; height:clamp(340px,52dvh,470px)!important; min-height:340px!important; max-height:470px!important; } #generatorShell:not(.is-popup):not(.is-preview-fixed):not(.is-preview-end) .wbp-stage-panel{ grid-column:1!important; grid-row:1!important; display:grid!important; grid-template-rows:minmax(0,1fr) auto!important; gap:10px!important; width:100%!important; height:100%!important; min-height:0!important; max-height:100%!important; overflow:hidden!important; } #generatorShell:not(.is-popup):not(.is-preview-fixed):not(.is-preview-end) .wbp-preview-layout{ grid-row:1!important; min-height:0!important; height:auto!important; } #generatorShell:not(.is-popup):not(.is-preview-fixed):not(.is-preview-end) .wbp-video-container{ align-self:stretch!important; justify-self:center!important; width:auto!important; min-width:0!important; min-height:0!important; height:100%!important; max-height:100%!important; } #generatorShell:not(.is-popup):not(.is-preview-fixed):not(.is-preview-end) .wbp-preview-tools.wbp-simple-tools{ min-height:0!important; height:100%!important; max-height:100%!important; } #generatorShell:not(.is-popup):not(.is-preview-fixed):not(.is-preview-end) .wbp-compact-controls{ grid-row:2!important; position:static!important; inset:auto!important; transform:none!important; } #generatorShell.is-preview-fixed:not(.is-popup) .wbp-stage-panel{ display:grid!important; grid-template-rows:minmax(0,1fr) auto!important; gap:8px!important; height:var(--wbp-native-preview-space,50dvh)!important; min-height:0!important; max-height:var(--wbp-native-preview-space,50dvh)!important; overflow:hidden!important; } #generatorShell.is-preview-fixed:not(.is-popup) .wbp-preview-layout{ grid-row:1!important; width:100%!important; height:auto!important; min-height:0!important; max-height:100%!important; overflow:hidden!important; } #generatorShell.is-preview-fixed:not(.is-popup) .wbp-video-container, #generatorShell.is-preview-fixed:not(.is-popup) .wbp-preview-tools.wbp-simple-tools{ height:100%!important; min-height:0!important; max-height:100%!important; } #generatorShell.is-preview-fixed:not(.is-popup) .wbp-preview-tools.wbp-simple-tools{ gap:4px!important; } #generatorShell.is-preview-fixed:not(.is-popup) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card{ box-sizing:border-box!important; height:auto!important; min-height:0!important; padding:2px!important; overflow:hidden!important; } #generatorShell.is-preview-fixed:not(.is-popup) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card b{ display:none!important; } #generatorShell.is-preview-fixed:not(.is-popup) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card__media, #generatorShell.is-preview-fixed:not(.is-popup) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card__icon, #generatorShell.is-preview-fixed:not(.is-popup) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card__media::before, #generatorShell.is-preview-fixed:not(.is-popup) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card__icon::before{ width:30px!important; height:30px!important; font-size:30px!important; } #generatorShell.is-preview-fixed:not(.is-popup) .wbp-compact-controls{ grid-row:2!important; position:static!important; inset:auto!important; transform:none!important; } } @media(max-width:340px) and (orientation:portrait){ #generatorShell:not(.is-popup):not(.is-preview-fixed):not(.is-preview-end) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card{ min-height:0!important; height:auto!important; } } /* v0.9.404 mobile viewport contract: a single viewport and safe scroll/action owners. */ @media(max-width:1024px){ #generatorShell:not(.is-popup){ --wbp-native-preview-space:50dvh!important; } #generatorShell.is-popup{ width:100%!important; height:100dvh!important; min-height:0!important; max-height:100dvh!important; overflow:hidden!important; padding-bottom:max(8px,env(safe-area-inset-bottom,0px))!important; } #generatorShell.is-popup:not(.is-advanced){ grid-template-rows:58px minmax(0,1fr) auto!important; } #generatorShell.is-popup:not(.is-advanced) .wbp-stage-panel{ height:auto!important; min-height:0!important; max-height:100%!important; overflow:hidden!important; } #generatorShell.is-popup:not(.is-advanced) .wbp-preview-layout, #generatorShell.is-popup:not(.is-advanced) .wbp-video-container, #generatorShell.is-popup:not(.is-advanced) .wbp-preview-tools{ min-height:0!important; max-height:100%!important; } #generatorShell.is-popup .wbp-form-panel{ min-height:0!important; max-height:100%!important; overflow-y:auto!important; overscroll-behavior:contain!important; -webkit-overflow-scrolling:touch!important; } #generatorShell.is-popup .wbp-actions{ position:sticky!important; left:0!important; right:0!important; bottom:0!important; z-index:110!important; margin:8px 0 0!important; padding:8px 0 max(8px,env(safe-area-inset-bottom,0px))!important; background:linear-gradient(180deg,rgba(255,255,255,0),#fff 28%)!important; } #generatorShell.is-popup.is-advanced .wbp-advanced-grid, #generatorShell.is-popup.is-advanced .wbp-controls-scroll, #generatorShell.is-popup.is-advanced #advancedOptionsPanel{ padding-bottom:calc(88px + env(safe-area-inset-bottom,0px))!important; -webkit-overflow-scrolling:touch!important; overscroll-behavior:contain!important; } #generatorShell.is-popup.is-advanced .wbp-advanced-actions{ bottom:max(8px,env(safe-area-inset-bottom,0px))!important; padding-bottom:max(8px,env(safe-area-inset-bottom,0px))!important; } .wbp-premium-modal{ padding:max(12px,env(safe-area-inset-top,0px)) 12px max(12px,env(safe-area-inset-bottom,0px))!important; } .wbp-premium-modal__dialog{ max-height:calc(100dvh - max(24px,env(safe-area-inset-top,0px)) - max(24px,env(safe-area-inset-bottom,0px)))!important; -webkit-overflow-scrolling:touch!important; } } /* v0.9.406 — mobile action bar: allocate space by label length, not equal halves. */ @media(max-width:560px){ .wbp-editor #generatorShell.is-popup .wbp-actions, .wbp-editor #generatorShell.is-popup.is-advanced .wbp-actions, .wbp-editor #generatorShell.is-popup.is-advanced .wbp-stage-panel .wbp-actions, #generatorShell.is-popup .wbp-actions, #generatorShell.is-popup.is-advanced .wbp-actions, #generatorShell.is-popup.is-advanced .wbp-stage-panel .wbp-actions{ grid-template-columns:minmax(0,58fr) minmax(0,42fr)!important; gap:8px!important; } #generatorShell.is-popup .wbp-actions .wbp-btn, #generatorShell.is-popup.is-advanced .wbp-actions .wbp-btn, #generatorShell.is-popup.is-advanced .wbp-stage-panel .wbp-actions .wbp-btn{ min-width:0!important; width:100%!important; gap:5px!important; padding-inline:8px!important; font-size:clamp(.78rem,3.55vw,.9rem)!important; line-height:1.1!important; white-space:nowrap!important; overflow:hidden!important; } #generatorShell.is-popup .wbp-actions .wbp-btn > span{ min-width:0!important; max-width:100%!important; overflow:hidden!important; text-overflow:clip!important; } #generatorShell.is-popup .wbp-actions .wbp-btn__asset{ width:22px!important; height:22px!important; flex:0 0 22px!important; } } @media(max-width:340px){ .wbp-editor #generatorShell.is-popup .wbp-actions, .wbp-editor #generatorShell.is-popup.is-advanced .wbp-actions, .wbp-editor #generatorShell.is-popup.is-advanced .wbp-stage-panel .wbp-actions, #generatorShell.is-popup .wbp-actions, #generatorShell.is-popup.is-advanced .wbp-actions, #generatorShell.is-popup.is-advanced .wbp-stage-panel .wbp-actions{ grid-template-columns:minmax(0,60fr) minmax(0,40fr)!important; gap:6px!important; } #generatorShell.is-popup .wbp-actions .wbp-btn, #generatorShell.is-popup.is-advanced .wbp-actions .wbp-btn, #generatorShell.is-popup.is-advanced .wbp-stage-panel .wbp-actions .wbp-btn{ gap:4px!important; padding-inline:6px!important; font-size:.76rem!important; } #generatorShell.is-popup .wbp-actions .wbp-btn__asset{ width:20px!important; height:20px!important; flex-basis:20px!important; } } /* 0.9.408: compact, stateful music control. */ #previewArea > .wbp-preview-toggle{ width:44px!important; height:44px!important; min-width:44px!important; min-height:44px!important; max-width:44px!important; padding:0!important; gap:0!important; justify-content:center!important; border-radius:50%!important; } #previewArea > .wbp-preview-toggle .wbp-preview-toggle__icon{ display:grid!important; width:24px!important; height:24px!important; place-items:center!important; } #previewArea > .wbp-preview-toggle svg{ width:24px!important; height:24px!important; fill:none!important; stroke:currentColor!important; stroke-width:1.9!important; stroke-linecap:round!important; stroke-linejoin:round!important; } #previewArea > .wbp-preview-toggle .wbp-preview-toggle__audible, #previewArea > .wbp-preview-toggle[aria-pressed="true"] .wbp-preview-toggle__muted{ display:none!important; } #previewArea > .wbp-preview-toggle[aria-pressed="true"] .wbp-preview-toggle__audible{ display:block!important; } /* 0.9.493 — discreet AI transparency notice. */ .wbp-ai-disclosure{ color:#7d7187!important; font-size:12px!important; font-weight:700!important; line-height:1.35!important; margin:8px 0 0!important; text-align:center!important; } #generatorShell.is-popup .wbp-ai-disclosure{ font-size:11px!important; margin-top:6px!important; } /* 0.9.501: visible notice if a paid render takes longer than expected. */ .wbp-render-long-wait{ margin:10px 0 0; padding:10px 12px; border:1px solid rgba(233,30,99,.22); border-left:4px solid var(--pink); border-radius:14px; background:#fff7fb; color:#3a2431; font-size:.84rem; font-weight:800; line-height:1.45; } .wbp-render-long-wait[hidden]{ display:none!important; } /* 0.9.506: paid render polish from staging feedback. */ #generatorShell.is-video-generating .wbp-progress{ order:2!important; margin:8px 0 0!important; } #generatorShell.is-video-ready .wbp-status{ order:1!important; width:min(100%,430px)!important; margin:0 auto 8px!important; } #generatorShell.is-video-ready .wbp-actions{ order:2!important; } #generatorShell.is-video-ready .wbp-render-recovery-note{ order:3!important; } #generatorShell .wbp-editor-brand{ order:4!important; } #generatorShell .wbp-ai-disclosure{ order:5!important; } #generatorShell .wbp-status{ order:6!important; } #generatorShell.is-video-ready .wbp-actions{ display:flex!important; justify-content:center!important; } #generatorShell.is-video-ready #downloadVideo{ width:min(100%,280px)!important; min-height:54px!important; justify-content:center!important; } .wbp-render-recovery-note{ display:block; width:min(100%,440px); margin:8px auto 4px!important; color:#7d7187; font-size:12px; font-weight:700; line-height:1.35; text-align:center; } .wbp-render-recovery-note[hidden], #generatorShell:not(.is-video-ready) .wbp-render-recovery-note{ display:none!important; } .wbp-render-recovery-note a{ color:var(--purple); text-decoration:underline; text-underline-offset:2px; } .wbp-premium-modal__actions{ display:grid!important; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)!important; gap:12px!important; align-items:center!important; margin-top:12px!important; } #premiumVideoModal .wbp-premium-modal__actions .wbp-btn{ width:100%!important; min-height:56px!important; border-radius:16px!important; font-size:16px!important; line-height:1.1!important; } #premiumVideoModal .wbp-premium-modal__actions .wbp-btn-primary{ min-height:60px!important; } @media(max-width:560px){ .wbp-premium-modal{ align-items:center!important; padding-top:max(8px,env(safe-area-inset-top,0px))!important; padding-bottom:max(28px,env(safe-area-inset-bottom,0px))!important; } .wbp-premium-modal__dialog{ transform:translateY(-10px)!important; padding-bottom:18px!important; } .wbp-premium-modal__actions{ grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)!important; gap:10px!important; margin-top:10px!important; } #premiumVideoModal .wbp-premium-modal__actions .wbp-btn{ min-height:58px!important; padding-inline:10px!important; font-size:15px!important; } #premiumVideoModal .wbp-premium-modal__actions .wbp-btn-primary{ min-height:62px!important; } } /* 0.9.516 final override: keep simple text controls visible in mobile popup. */ @media(max-width:760px){ #generatorShell.is-popup:not(.is-advanced) .wbp-form-panel, .wbp-editor #generatorShell.is-popup:not(.is-advanced) .wbp-form-panel{ display:block!important; order:2!important; height:auto!important; min-height:0!important; max-height:none!important; opacity:1!important; visibility:visible!important; overflow:visible!important; padding:0 12px 12px!important; } #generatorShell.is-popup:not(.is-advanced) .wbp-controls-scroll, .wbp-editor #generatorShell.is-popup:not(.is-advanced) .wbp-controls-scroll{ display:block!important; height:auto!important; max-height:none!important; overflow:visible!important; } #generatorShell.is-popup:not(.is-advanced) .wbp-simple-text-editor, .wbp-editor #generatorShell.is-popup:not(.is-advanced) .wbp-simple-text-editor{ display:block!important; margin:10px 0 12px!important; padding:12px!important; border:1px solid rgba(106,27,154,.15)!important; border-radius:14px!important; background:#fff!important; box-shadow:0 8px 24px rgba(45,20,78,.08)!important; } #generatorShell.is-popup:not(.is-advanced) .wbp-simple-text-editor .wbp-form-grid, .wbp-editor #generatorShell.is-popup:not(.is-advanced) .wbp-simple-text-editor .wbp-form-grid{ display:grid!important; grid-template-columns:1fr!important; gap:10px!important; } #generatorShell.is-popup:not(.is-advanced) .wbp-actions, .wbp-editor #generatorShell.is-popup:not(.is-advanced) .wbp-actions{ position:sticky!important; bottom:max(8px,env(safe-area-inset-bottom,0px))!important; z-index:12!important; padding:8px!important; border-radius:18px!important; background:rgba(255,255,255,.94)!important; box-shadow:0 10px 30px rgba(45,20,78,.14)!important; backdrop-filter:blur(10px)!important; } } /* 0.9.517 final cascade: while rendering or ready, show result screen only. */ #generatorShell.is-video-generating .wbp-form-panel, #generatorShell.is-video-ready .wbp-form-panel, .wbp-editor #generatorShell.is-video-generating .wbp-form-panel, .wbp-editor #generatorShell.is-video-ready .wbp-form-panel{ display:none!important; } @media(max-width:640px){ #generatorShell.is-popup.is-video-generating, #generatorShell.is-popup.is-video-ready{ grid-template-rows:56px minmax(0,1fr)!important; } #generatorShell.is-popup.is-video-generating .wbp-editor-topbar, #generatorShell.is-popup.is-video-ready .wbp-editor-topbar{ display:grid!important; } #generatorShell.is-popup.is-video-generating .wbp-mode-switch, #generatorShell.is-popup.is-video-ready .wbp-mode-switch{ display:none!important; } #generatorShell.is-popup.is-video-generating .wbp-stage-panel, #generatorShell.is-popup.is-video-ready .wbp-stage-panel{ height:auto!important; min-height:0!important; align-content:start!important; padding:12px 14px calc(18px + env(safe-area-inset-bottom,0px))!important; } #generatorShell.is-popup.is-video-generating .wbp-compact-controls, #generatorShell.is-popup.is-video-ready .wbp-compact-controls{ width:100%!important; max-width:420px!important; margin:0 auto!important; } #generatorShell.is-popup.is-video-generating .wbp-render-snapshot-frame img, #generatorShell.is-popup.is-video-ready .wbp-render-snapshot-frame img{ width:min(54dvw,190px)!important; max-height:42dvh!important; } } /* 0.9.521 eof render/result lock. */ .wbp-editor #generatorShell:is(.is-video-generating,.is-video-ready,.is-video-error,.is-video-protected), #generatorShell:is(.is-video-generating,.is-video-ready,.is-video-error,.is-video-protected){ display:grid!important; grid-template-columns:1fr!important; grid-template-rows:auto auto!important; gap:16px!important; height:auto!important; min-height:0!important; max-height:none!important; overflow:visible!important; align-items:stretch!important; cursor:default!important; } .wbp-editor #generatorShell:is(.is-video-generating,.is-video-ready,.is-video-error,.is-video-protected) .wbp-editor-topbar, #generatorShell:is(.is-video-generating,.is-video-ready,.is-video-error,.is-video-protected) .wbp-editor-topbar{ display:grid!important; grid-column:1/-1!important; } .wbp-editor #generatorShell:is(.is-video-generating,.is-video-ready,.is-video-error,.is-video-protected) .wbp-mode-switch, .wbp-editor #generatorShell:is(.is-video-generating,.is-video-ready,.is-video-error,.is-video-protected) .wbp-form-panel, .wbp-editor #generatorShell:is(.is-video-generating,.is-video-ready,.is-video-error,.is-video-protected) .wbp-stage-label, .wbp-editor #generatorShell:is(.is-video-generating,.is-video-ready,.is-video-error,.is-video-protected) .wbp-preview-layout, .wbp-editor #generatorShell:is(.is-video-generating,.is-video-ready,.is-video-error,.is-video-protected) .wbp-video-container, .wbp-editor #generatorShell:is(.is-video-generating,.is-video-ready,.is-video-error,.is-video-protected) .wbp-preview-tools, .wbp-editor #generatorShell:is(.is-video-generating,.is-video-ready,.is-video-error,.is-video-protected) .wbp-compact-secondary, #generatorShell:is(.is-video-generating,.is-video-ready,.is-video-error,.is-video-protected) .wbp-mode-switch, #generatorShell:is(.is-video-generating,.is-video-ready,.is-video-error,.is-video-protected) .wbp-form-panel, #generatorShell:is(.is-video-generating,.is-video-ready,.is-video-error,.is-video-protected) .wbp-stage-label, #generatorShell:is(.is-video-generating,.is-video-ready,.is-video-error,.is-video-protected) .wbp-preview-layout, #generatorShell:is(.is-video-generating,.is-video-ready,.is-video-error,.is-video-protected) .wbp-video-container, #generatorShell:is(.is-video-generating,.is-video-ready,.is-video-error,.is-video-protected) .wbp-preview-tools, #generatorShell:is(.is-video-generating,.is-video-ready,.is-video-error,.is-video-protected) .wbp-compact-secondary{ display:none!important; } .wbp-editor #generatorShell:is(.is-video-generating,.is-video-ready,.is-video-error,.is-video-protected) .wbp-stage-panel, #generatorShell:is(.is-video-generating,.is-video-ready,.is-video-error,.is-video-protected) .wbp-stage-panel{ grid-column:1/-1!important; position:static!important; inset:auto!important; display:flex!important; flex-direction:column!important; align-items:center!important; justify-content:center!important; gap:12px!important; width:100%!important; height:auto!important; min-height:0!important; max-height:none!important; overflow:visible!important; padding:20px!important; } .wbp-editor #generatorShell:is(.is-video-generating,.is-video-ready,.is-video-error,.is-video-protected) .wbp-render-snapshot-frame, #generatorShell:is(.is-video-generating,.is-video-ready,.is-video-error,.is-video-protected) .wbp-render-snapshot-frame{ display:block!important; order:1!important; width:min(100%,280px)!important; margin:0 auto!important; text-align:center!important; } .wbp-editor #generatorShell:is(.is-video-generating,.is-video-ready,.is-video-error,.is-video-protected) .wbp-render-snapshot-frame[hidden], #generatorShell:is(.is-video-generating,.is-video-ready,.is-video-error,.is-video-protected) .wbp-render-snapshot-frame[hidden]{ display:none!important; } .wbp-editor #generatorShell:is(.is-video-generating,.is-video-ready,.is-video-error,.is-video-protected) .wbp-render-snapshot-frame img, #generatorShell:is(.is-video-generating,.is-video-ready,.is-video-error,.is-video-protected) .wbp-render-snapshot-frame img{ display:block!important; width:min(100%,220px)!important; max-width:220px!important; max-height:42vh!important; aspect-ratio:9/16!important; height:auto!important; object-fit:cover!important; margin:0 auto!important; } .wbp-editor #generatorShell:is(.is-video-generating,.is-video-ready,.is-video-error,.is-video-protected) .wbp-compact-controls, #generatorShell:is(.is-video-generating,.is-video-ready,.is-video-error,.is-video-protected) .wbp-compact-controls{ order:2!important; position:static!important; inset:auto!important; display:flex!important; flex-direction:column!important; align-items:center!important; gap:10px!important; width:min(100%,560px)!important; max-width:560px!important; height:auto!important; min-height:0!important; max-height:none!important; margin:0 auto!important; padding:0!important; transform:none!important; overflow:visible!important; background:transparent!important; border:0!important; border-radius:0!important; box-shadow:none!important; } .wbp-editor #generatorShell:is(.is-video-generating,.is-video-ready,.is-video-error,.is-video-protected) .wbp-actions, #generatorShell:is(.is-video-generating,.is-video-ready,.is-video-error,.is-video-protected) .wbp-actions{ position:static!important; inset:auto!important; display:flex!important; justify-content:center!important; width:100%!important; max-width:100%!important; margin:0!important; padding:0!important; transform:none!important; background:transparent!important; border:0!important; border-radius:0!important; box-shadow:none!important; } .wbp-editor #generatorShell.is-video-generating .wbp-progress, .wbp-editor #generatorShell:is(.is-video-ready,.is-video-error,.is-video-protected) .wbp-status, #generatorShell.is-video-generating .wbp-progress, #generatorShell:is(.is-video-ready,.is-video-error,.is-video-protected) .wbp-status{ width:100%!important; max-width:520px!important; margin:0 auto!important; } .wbp-editor #generatorShell.is-video-ready #downloadVideo, .wbp-editor #generatorShell.is-video-error #retryRender, #generatorShell.is-video-ready #downloadVideo, #generatorShell.is-video-error #retryRender{ width:min(100%,300px)!important; min-height:56px!important; justify-content:center!important; } .wbp-editor #generatorShell.is-video-ready .wbp-render-recovery-note, #generatorShell.is-video-ready .wbp-render-recovery-note{ width:min(100%,520px)!important; margin:0 auto!important; padding:0 4px!important; } @media(max-width:760px){ .wbp-editor #generatorShell:is(.is-video-generating,.is-video-ready,.is-video-error,.is-video-protected), #generatorShell:is(.is-video-generating,.is-video-ready,.is-video-error,.is-video-protected){ gap:10px!important; padding:12px!important; } .wbp-editor #generatorShell.is-popup:is(.is-video-generating,.is-video-ready,.is-video-error,.is-video-protected), #generatorShell.is-popup:is(.is-video-generating,.is-video-ready,.is-video-error,.is-video-protected){ width:100vw!important; height:100dvh!important; max-height:100dvh!important; overflow:auto!important; grid-template-rows:auto minmax(0,1fr)!important; } .wbp-editor #generatorShell:is(.is-video-generating,.is-video-ready,.is-video-error,.is-video-protected) .wbp-stage-panel, #generatorShell:is(.is-video-generating,.is-video-ready,.is-video-error,.is-video-protected) .wbp-stage-panel{ padding:14px 12px calc(16px + env(safe-area-inset-bottom,0px))!important; justify-content:flex-start!important; } .wbp-editor #generatorShell:is(.is-video-generating,.is-video-ready,.is-video-error,.is-video-protected) .wbp-render-snapshot-frame img, #generatorShell:is(.is-video-generating,.is-video-ready,.is-video-error,.is-video-protected) .wbp-render-snapshot-frame img{ width:min(58vw,200px)!important; max-width:200px!important; max-height:34dvh!important; } } @media(max-width:380px), (max-height:700px){ .wbp-editor #generatorShell:is(.is-video-generating,.is-video-ready,.is-video-error,.is-video-protected) .wbp-render-snapshot-frame img, #generatorShell:is(.is-video-generating,.is-video-ready,.is-video-error,.is-video-protected) .wbp-render-snapshot-frame img{ width:min(50vw,166px)!important; max-width:166px!important; max-height:30dvh!important; } } /* 0.9.529 true EOF authority: mobile simple editor preview/actions geometry. */ @media(max-width:640px){ #generatorShell.is-popup:not(.is-advanced):not(.is-video-generating):not(.is-video-ready):not(.is-video-error):not(.is-video-protected){grid-template-rows:56px auto auto!important;overflow-y:auto!important;align-content:start!important} #generatorShell.is-popup:not(.is-advanced):not(.is-video-generating):not(.is-video-ready):not(.is-video-error):not(.is-video-protected) .wbp-stage-panel{display:grid!important;grid-template-rows:auto auto!important;gap:10px!important} #generatorShell.is-popup:not(.is-advanced):not(.is-video-generating):not(.is-video-ready):not(.is-video-error):not(.is-video-protected) .wbp-preview-layout{grid-row:1!important;display:grid!important;grid-template-columns:1fr!important;grid-template-rows:auto 48px!important;gap:8px!important;place-items:center!important;height:auto!important;min-height:0!important} #generatorShell.is-popup:not(.is-advanced):not(.is-video-generating):not(.is-video-ready):not(.is-video-error):not(.is-video-protected) #previewArea{grid-row:1!important;width:auto!important;height:clamp(255px,38dvh,320px)!important;min-height:255px!important;max-height:none!important;max-width:calc(100vw - 44px)!important;margin:0 auto!important;transform:none!important} #generatorShell.is-popup:not(.is-advanced):not(.is-video-generating):not(.is-video-ready):not(.is-video-error):not(.is-video-protected) .wbp-preview-tools.wbp-simple-tools{position:static!important;inset:auto!important;transform:none!important;grid-row:2!important;display:grid!important;grid-template-columns:repeat(4,44px)!important;gap:8px!important;justify-content:center!important;width:auto!important;height:48px!important;margin:0 auto!important;padding:0!important} #generatorShell.is-popup:not(.is-advanced) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card{position:static!important;inset:auto!important;width:44px!important;height:44px!important;min-height:44px!important;border-radius:14px!important;transform:none!important} #generatorShell.is-popup:not(.is-advanced) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card__icon,#generatorShell.is-popup:not(.is-advanced) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card__media{width:26px!important;height:26px!important;max-width:26px!important;max-height:26px!important} #generatorShell.is-popup:not(.is-advanced) .wbp-compact-secondary{display:none!important} #generatorShell.is-popup:not(.is-advanced) .wbp-compact-controls{position:static!important;inset:auto!important;grid-row:2!important;display:grid!important;width:100%!important;max-width:370px!important;height:auto!important;min-height:0!important;margin:58px auto 0!important;padding:0!important;transform:none!important;background:transparent!important;border:0!important;box-shadow:none!important} #generatorShell.is-popup:not(.is-advanced) .wbp-actions{position:static!important;inset:auto!important;display:grid!important;grid-template-columns:minmax(0,.96fr) minmax(0,1.04fr)!important;gap:9px!important;width:100%!important;margin:0!important;padding:7px!important;transform:none!important;border-radius:17px!important;background:rgba(255,255,255,.96)!important;box-shadow:0 10px 28px rgba(45,20,78,.12)!important} #generatorShell.is-popup:not(.is-advanced) .wbp-actions .wbp-btn{min-width:0!important;min-height:42px!important;padding:0 8px!important;gap:6px!important;border-radius:14px!important;font-size:12px!important;line-height:1.05!important;white-space:nowrap!important} } @media(max-width:360px){ #generatorShell.is-popup:not(.is-advanced) #previewArea{height:232px!important;min-height:232px!important} #generatorShell.is-popup:not(.is-advanced) .wbp-preview-tools.wbp-simple-tools{grid-template-columns:repeat(4,40px)!important;gap:7px!important;height:44px!important} #generatorShell.is-popup:not(.is-advanced) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card{width:40px!important;height:40px!important;min-height:40px!important} } /* 0.9.535: recover the mobile Simple editor. Keep the whole interface inside the viewport. */ @media(max-width:640px){ #generatorShell.is-popup:not(.is-advanced):not(.is-video-generating):not(.is-video-ready):not(.is-video-error):not(.is-video-protected){ display:grid!important; grid-template-rows:56px auto minmax(0,1fr)!important; gap:8px!important; height:100dvh!important; min-height:0!important; max-height:100dvh!important; overflow:hidden!important; padding:8px 10px max(8px,env(safe-area-inset-bottom,0px))!important; } #generatorShell.is-popup:not(.is-advanced):not(.is-video-generating):not(.is-video-ready):not(.is-video-error):not(.is-video-protected) .wbp-stage-panel{ grid-row:2!important; display:grid!important; grid-template-rows:auto auto!important; gap:8px!important; width:100%!important; min-height:0!important; max-height:none!important; overflow:visible!important; padding:0!important; } #generatorShell.is-popup:not(.is-advanced):not(.is-video-generating):not(.is-video-ready):not(.is-video-error):not(.is-video-protected) .wbp-preview-layout{ display:grid!important; grid-template-columns:1fr!important; grid-template-rows:auto 46px!important; gap:7px!important; width:100%!important; min-height:0!important; height:auto!important; place-items:center!important; overflow:visible!important; } #generatorShell.is-popup:not(.is-advanced):not(.is-video-generating):not(.is-video-ready):not(.is-video-error):not(.is-video-protected) #previewArea{ width:auto!important; height:clamp(230px,35dvh,300px)!important; min-height:230px!important; max-height:300px!important; max-width:calc(100vw - 44px)!important; margin:0 auto!important; transform:none!important; } #generatorShell.is-popup:not(.is-advanced) .wbp-preview-tools.wbp-simple-tools{ position:static!important; inset:auto!important; grid-column:1!important; grid-row:2!important; display:grid!important; grid-template-columns:repeat(4,42px)!important; gap:7px!important; justify-content:center!important; width:auto!important; height:46px!important; margin:0 auto!important; padding:0!important; transform:none!important; } #generatorShell.is-popup:not(.is-advanced) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card{ width:42px!important; height:42px!important; min-height:42px!important; padding:4px!important; border-radius:14px!important; } #generatorShell.is-popup:not(.is-advanced) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card__icon, #generatorShell.is-popup:not(.is-advanced) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card__media{ width:25px!important; height:25px!important; max-width:25px!important; max-height:25px!important; } #generatorShell.is-popup:not(.is-advanced) .wbp-compact-controls{ grid-row:2!important; position:static!important; display:grid!important; gap:6px!important; width:100%!important; max-width:370px!important; height:auto!important; min-height:0!important; margin:0 auto!important; padding:0!important; background:transparent!important; border:0!important; box-shadow:none!important; transform:none!important; } #generatorShell.is-popup:not(.is-advanced) .wbp-actions{ position:static!important; inset:auto!important; display:grid!important; grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important; gap:8px!important; width:100%!important; margin:0!important; padding:7px!important; border-radius:16px!important; background:rgba(255,255,255,.97)!important; box-shadow:0 10px 26px rgba(45,20,78,.12)!important; transform:none!important; } #generatorShell.is-popup:not(.is-advanced) .wbp-actions .wbp-btn{ min-width:0!important; min-height:40px!important; padding:0 7px!important; gap:5px!important; border-radius:13px!important; font-size:12px!important; line-height:1.05!important; white-space:nowrap!important; } #generatorShell.is-popup:not(.is-advanced) .wbp-actions .wbp-btn__asset{ width:19px!important; height:19px!important; flex:0 0 19px!important; } #generatorShell.is-popup:not(.is-advanced) .wbp-editor-brand, #generatorShell.is-popup:not(.is-advanced) .wbp-ai-disclosure, #generatorShell.is-popup:not(.is-advanced) .wbp-ai-credit{ display:none!important; } #generatorShell.is-popup:not(.is-advanced) .wbp-form-panel{ grid-row:3!important; display:block!important; min-height:0!important; height:100%!important; max-height:100%!important; overflow-y:auto!important; overflow-x:hidden!important; padding:0 1px 6px!important; -webkit-overflow-scrolling:touch!important; overscroll-behavior:contain!important; } #generatorShell.is-popup:not(.is-advanced) .wbp-controls-scroll{ height:auto!important; min-height:0!important; max-height:none!important; overflow:visible!important; padding:0!important; } #generatorShell.is-popup:not(.is-advanced) .wbp-simple-text-editor{ margin:0!important; } } @media(max-width:360px){ #generatorShell.is-popup:not(.is-advanced):not(.is-video-generating):not(.is-video-ready):not(.is-video-error):not(.is-video-protected) #previewArea{ height:clamp(210px,32dvh,240px)!important; min-height:210px!important; max-height:240px!important; } #generatorShell.is-popup:not(.is-advanced) .wbp-preview-tools.wbp-simple-tools{ grid-template-columns:repeat(4,40px)!important; height:42px!important; gap:6px!important; } #generatorShell.is-popup:not(.is-advanced) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card{ width:40px!important; height:40px!important; min-height:40px!important; } } @media(min-width:641px) and (max-width:900px){ #generatorShell.is-popup:not(.is-advanced):not(.is-video-generating):not(.is-video-ready):not(.is-video-error):not(.is-video-protected){ display:grid!important; grid-template-rows:58px auto minmax(0,1fr)!important; gap:10px!important; height:100dvh!important; min-height:0!important; max-height:100dvh!important; overflow:hidden!important; padding:12px 20px max(12px,env(safe-area-inset-bottom,0px))!important; } #generatorShell.is-popup:not(.is-advanced):not(.is-video-generating):not(.is-video-ready):not(.is-video-error):not(.is-video-protected) .wbp-stage-panel{ grid-row:2!important; display:grid!important; grid-template-rows:auto auto!important; gap:10px!important; min-height:0!important; overflow:visible!important; padding:0!important; } #generatorShell.is-popup:not(.is-advanced):not(.is-video-generating):not(.is-video-ready):not(.is-video-error):not(.is-video-protected) .wbp-preview-layout{ display:grid!important; grid-template-columns:1fr!important; grid-template-rows:auto 50px!important; gap:8px!important; place-items:center!important; height:auto!important; min-height:0!important; overflow:visible!important; } #generatorShell.is-popup:not(.is-advanced) .wbp-preview-tools.wbp-simple-tools{ position:static!important; inset:auto!important; display:grid!important; grid-template-columns:repeat(4,46px)!important; gap:8px!important; justify-content:center!important; width:auto!important; height:50px!important; margin:0 auto!important; padding:0!important; transform:none!important; } #generatorShell.is-popup:not(.is-advanced) .wbp-preview-tools.wbp-simple-tools .wbp-tool-card{ width:46px!important; height:46px!important; min-height:46px!important; } #generatorShell.is-popup:not(.is-advanced) .wbp-compact-secondary{ display:none!important; } #generatorShell.is-popup:not(.is-advanced) .wbp-compact-controls{ grid-row:2!important; position:static!important; width:min(520px,100%)!important; max-width:520px!important; margin:0 auto!important; padding:0!important; background:transparent!important; border:0!important; box-shadow:none!important; } #generatorShell.is-popup:not(.is-advanced) .wbp-editor-brand, #generatorShell.is-popup:not(.is-advanced) .wbp-ai-disclosure, #generatorShell.is-popup:not(.is-advanced) .wbp-ai-credit{ display:none!important; } #generatorShell.is-popup:not(.is-advanced) .wbp-form-panel{ grid-row:3!important; display:block!important; height:100%!important; min-height:0!important; max-height:100%!important; overflow-y:auto!important; overflow-x:hidden!important; padding:0 2px 8px!important; -webkit-overflow-scrolling:touch!important; } #generatorShell.is-popup:not(.is-advanced) .wbp-controls-scroll{ height:auto!important; min-height:0!important; max-height:none!important; overflow:visible!important; padding:0!important; } }