.keydesign-popup-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:var(--color-overlay);z-index:9998;opacity:0;visibility:hidden;transition:var(--global-transition)}.keydesign-popup-overlay.active{opacity:1;visibility:visible}.keydesign-popup-modal{position:fixed;top:50%;left:50%;transform:translate(-50%, -50%) scale(0.8);border-radius:var(--global-border-radius);z-index:9999;max-width:90vw;max-height:90vh;width:600px;min-width:300px;opacity:0;visibility:hidden;transition:all 0.3s ease;overflow:hidden}.keydesign-popup-modal .keydesign-popup-content{display:flex;justify-content:center;align-items:center}.keydesign-popup-modal.active{opacity:1;visibility:visible;transform:translate(-50%, -50%) scale(1)}.keydesign-popup-close{position:absolute;top:15px;right:15px;width:26px;height:26px;background:var(--e-global-color-light);border:none;border-radius:50%;color:var(--e-global-color-text);font-size:14px;line-height:1;cursor:pointer;z-index:10;transition:all 0.2s ease;text-align:center}.keydesign-popup-close::before,.keydesign-popup-close::after{content:"";position:absolute;top:50%;left:50%;width:10px;height:2px;background:currentColor;transform:translate(-50%, -50%) rotate(45deg)}.keydesign-popup-close::after{transform:translate(-50%, -50%) rotate(-45deg)}.keydesign-popup-close:hover{color:var(--e-global-color-primary)}.keydesign-popup-content{max-height:calc(90vh - 40px);overflow-y:auto;position:relative;opacity:1;transition:var(--global-transition)}.keydesign-popup-offcanvas-right,.keydesign-popup-offcanvas-left{position:fixed;top:var(--admin-bar);width:var(--popup-width, 400px);min-width:250px;max-width:90vw;height:100vh;background:var(--color-white);z-index:9999;transition:var(--global-transition);overflow:hidden;visibility:hidden}.keydesign-popup-offcanvas-right .keydesign-popup-content,.keydesign-popup-offcanvas-left .keydesign-popup-content{height:100vh;overflow-y:auto;position:relative}.keydesign-popup-offcanvas-right.active,.keydesign-popup-offcanvas-left.active{visibility:visible}.keydesign-popup-offcanvas-right{right:calc(-1 * var(--popup-width, 400px))}.keydesign-popup-offcanvas-right.active{right:0}.keydesign-popup-offcanvas-left{left:calc(-1 * var(--popup-width, 400px))}.keydesign-popup-offcanvas-left.active{left:0}.keydesign-content-offcanvas{position:fixed;top:var(--admin-bar);left:0;width:100%;height:100%;z-index:9999;visibility:hidden;opacity:0;transition:all 0.3s ease}.keydesign-content-offcanvas.active{visibility:visible;opacity:1}.keydesign-content-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.5);cursor:pointer}.keydesign-content-panel{position:absolute;top:0;right:0;width:400px;max-width:90vw;height:100%;background-color:var(--color-white);box-shadow:-2px 0 10px rgba(0, 0, 0, 0.1);transform:translateX(100%);transition:transform 0.3s ease;overflow-y:auto}.keydesign-content-panel .keydesign-content-body{height:100%;overflow-y:auto}.keydesign-content-panel .keydesign-content-close{position:absolute;top:20px;right:20px;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:18px;font-weight:bold;color:var(--e-global-color-text);z-index:10;transition:all 0.2s ease}.keydesign-content-panel .keydesign-content-close:hover{color:var(--e-global-color-primary)}.keydesign-content-offcanvas.active .keydesign-content-panel{transform:translateX(0)}.keydesign-content-offcanvas-left .keydesign-content-panel{right:auto;left:0;transform:translateX(-100%)}.keydesign-content-offcanvas-left.active .keydesign-content-panel{transform:translateX(0)}body.keydesign-content-offcanvas-open{overflow:hidden}@media (max-width:766.98px){.keydesign-popup-modal{max-width:90vw;max-height:90vh}.keydesign-popup-close{top:10px;right:10px;width:25px;height:25px;font-size:16px}}