/* =========================================================
   NUJIZ MANUAL CROP
   ========================================================= */

body[data-tool-id="crop"] .nujiz-crop-toolbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
    margin:0 0 14px;
    padding:12px;
    border:1px solid #e5e1f2;
    border-radius:14px;
    background:#fbfaff;
}

body[data-tool-id="crop"] .nujiz-crop-ratios{
    display:flex;
    align-items:center;
    gap:7px;
    flex-wrap:wrap;
}

body[data-tool-id="crop"] .nujiz-crop-ratio{
    min-height:36px;
    padding:0 13px;
    border:1px solid #ded9ef;
    border-radius:10px;
    background:#fff;
    color:#25263b;
    font-family:inherit;
    font-size:11px;
    font-weight:800;
    cursor:pointer;
}

body[data-tool-id="crop"] .nujiz-crop-ratio.active{
    border-color:#7047f5;
    background:#7047f5;
    color:#fff;
}

body[data-tool-id="crop"] .nujiz-crop-reset{
    min-height:36px;
    padding:0 14px;
    border:1px solid #d9d5e7;
    border-radius:10px;
    background:#fff;
    color:#33364c;
    font-family:inherit;
    font-size:11px;
    font-weight:800;
    cursor:pointer;
}

body[data-tool-id="crop"] .nujiz-crop-stage{
    position:absolute;
    inset:0;
    z-index:30;
    pointer-events:none;
    overflow:hidden;
}

body[data-tool-id="crop"] .nujiz-crop-shade{
    position:absolute;
    inset:0;
    background:rgba(10,14,30,.50);
    pointer-events:none;
}

body[data-tool-id="crop"] .nujiz-crop-box{
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;

    border:2px solid #fff;

    box-shadow:
      0 0 0 1px rgba(112,71,245,.95),
      0 0 22px rgba(112,71,245,.35);

    pointer-events:auto;
    cursor:move;
    touch-action:none;
}

body[data-tool-id="crop"] .nujiz-crop-box::before,
body[data-tool-id="crop"] .nujiz-crop-box::after{
    content:"";
    position:absolute;
    pointer-events:none;
}

body[data-tool-id="crop"] .nujiz-crop-box::before{
    inset:33.333% 0 auto 0;
    height:1px;
    background:rgba(255,255,255,.50);
    box-shadow:0 calc(var(--crop-h, 100px) / 3) 0 rgba(255,255,255,.50);
}

body[data-tool-id="crop"] .nujiz-crop-box::after{
    top:0;
    bottom:0;
    left:33.333%;
    width:1px;
    background:rgba(255,255,255,.50);
    box-shadow:calc(var(--crop-w, 100px) / 3) 0 0 rgba(255,255,255,.50);
}

body[data-tool-id="crop"] .nujiz-crop-handle{
    position:absolute;
    width:16px;
    height:16px;
    border:2px solid #fff;
    border-radius:50%;
    background:#7047f5;
    box-shadow:0 3px 10px rgba(40,20,110,.30);
    pointer-events:auto;
    touch-action:none;
}

body[data-tool-id="crop"] .nujiz-crop-handle[data-handle="nw"]{
    left:-9px;
    top:-9px;
    cursor:nwse-resize;
}
body[data-tool-id="crop"] .nujiz-crop-handle[data-handle="ne"]{
    right:-9px;
    top:-9px;
    cursor:nesw-resize;
}
body[data-tool-id="crop"] .nujiz-crop-handle[data-handle="sw"]{
    left:-9px;
    bottom:-9px;
    cursor:nesw-resize;
}
body[data-tool-id="crop"] .nujiz-crop-handle[data-handle="se"]{
    right:-9px;
    bottom:-9px;
    cursor:nwse-resize;
}

body[data-tool-id="crop"] .nujiz-crop-handle[data-handle="n"],
body[data-tool-id="crop"] .nujiz-crop-handle[data-handle="s"]{
    left:50%;
    transform:translateX(-50%);
    cursor:ns-resize;
}
body[data-tool-id="crop"] .nujiz-crop-handle[data-handle="n"]{
    top:-9px;
}
body[data-tool-id="crop"] .nujiz-crop-handle[data-handle="s"]{
    bottom:-9px;
}

body[data-tool-id="crop"] .nujiz-crop-handle[data-handle="e"],
body[data-tool-id="crop"] .nujiz-crop-handle[data-handle="w"]{
    top:50%;
    transform:translateY(-50%);
    cursor:ew-resize;
}
body[data-tool-id="crop"] .nujiz-crop-handle[data-handle="e"]{
    right:-9px;
}
body[data-tool-id="crop"] .nujiz-crop-handle[data-handle="w"]{
    left:-9px;
}

body[data-tool-id="crop"] .nujiz-crop-info{
    position:absolute;
    left:10px;
    bottom:10px;
    z-index:40;
    padding:7px 10px;
    border-radius:9px;
    background:rgba(12,16,35,.84);
    color:#fff;
    font-size:10px;
    font-weight:800;
    pointer-events:none;
    backdrop-filter:blur(8px);
}

@media(max-width:700px){
    body[data-tool-id="crop"] .nujiz-crop-toolbar{
        align-items:stretch;
    }

    body[data-tool-id="crop"] .nujiz-crop-ratios{
        width:100%;
    }

    body[data-tool-id="crop"] .nujiz-crop-ratio{
        flex:1 1 auto;
    }
}

/* =========================================================
   MANUAL CROP POINTER FIX
   ========================================================= */

html body[data-tool-id="crop"] .nujiz-crop-stage{
    pointer-events:auto !important;
    z-index:999 !important;
    touch-action:none !important;
    user-select:none !important;
    -webkit-user-select:none !important;
}

html body[data-tool-id="crop"] .nujiz-crop-shade{
    pointer-events:none !important;
}

html body[data-tool-id="crop"] .nujiz-crop-box{
    pointer-events:auto !important;
    touch-action:none !important;
    user-select:none !important;
    -webkit-user-select:none !important;
    cursor:grab !important;
}

html body[data-tool-id="crop"] .nujiz-crop-box:active{
    cursor:grabbing !important;
}

html body[data-tool-id="crop"] .nujiz-crop-handle{
    pointer-events:auto !important;
    touch-action:none !important;
    z-index:1002 !important;
}