/* =========================================================
   NUJIZ — ENHANCE IMAGE BEFORE / AFTER
   ========================================================= */

body[data-tool-id="enhance"] .nujiz-enhance-compare{
    width:min(100%,900px);
    margin:24px auto 8px;
    padding:18px;

    border:1px solid #e3def5;
    border-radius:20px;

    background:#fff;

    box-shadow:
        0 18px 45px rgba(30,25,70,.09);

    opacity:0;
    transform:translateY(10px);

    transition:
        opacity .3s ease,
        transform .3s ease;
}

body[data-tool-id="enhance"] .nujiz-enhance-compare.is-visible{
    opacity:1;
    transform:none;
}


/* Header */

body[data-tool-id="enhance"] .nujiz-enhance-compare-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;

    margin-bottom:14px;
}

body[data-tool-id="enhance"] .nujiz-enhance-compare-head > div{
    display:flex;
    flex-direction:column;
    gap:5px;
}

body[data-tool-id="enhance"] .nujiz-enhance-compare-head small{
    color:#6945f5;
    font-size:14px;
    font-weight:900;
}

body[data-tool-id="enhance"] .nujiz-enhance-compare-head strong{
    color:#62677a;
    font-size:11px;
    line-height:1.7;
    font-weight:600;
}

body[data-tool-id="enhance"] .nujiz-enhance-compare-value{
    flex:0 0 auto;

    padding:8px 12px;

    border-radius:999px;

    background:#f1edff;

    color:#6945f5;

    font-size:11px;
    font-weight:900;
}


/* Main compare stage */

body[data-tool-id="enhance"] .nujiz-enhance-compare-stage{
    --compare:50%;

    position:relative;

    width:100%;
    height:min(65vh,650px);
    min-height:420px;

    overflow:hidden;

    border:1px solid #dedbea;
    border-radius:16px;

    cursor:ew-resize;
    touch-action:none;
    user-select:none;

    background-color:#f6f6fa;

    background-image:
        linear-gradient(45deg,#e6e6ec 25%,transparent 25%),
        linear-gradient(-45deg,#e6e6ec 25%,transparent 25%),
        linear-gradient(45deg,transparent 75%,#e6e6ec 75%),
        linear-gradient(-45deg,transparent 75%,#e6e6ec 75%);

    background-size:20px 20px;

    background-position:
        0 0,
        0 10px,
        10px -10px,
        -10px 0;
}


/*
 * الصورتان بنفس المقاس والموقع تماما.
 */

body[data-tool-id="enhance"] .nujiz-enhance-compare-stage > img{
    position:absolute !important;
    inset:0 !important;

    width:100% !important;
    height:100% !important;

    max-width:none !important;
    max-height:none !important;

    object-fit:contain !important;

    margin:0 !important;
    padding:0 !important;

    display:block !important;

    pointer-events:none !important;
}


/* النتيجة تحت */

body[data-tool-id="enhance"] .nujiz-enhance-after{
    z-index:1;
}


/* الاصل فوق النتيجة مع القص */

body[data-tool-id="enhance"] .nujiz-enhance-before{
    z-index:2;

    clip-path:
        inset(
            0
            calc(100% - var(--compare))
            0
            0
        );
}


/* الخط */

body[data-tool-id="enhance"] .nujiz-enhance-divider{
    position:absolute;
    z-index:5;

    top:0;
    bottom:0;

    left:var(--compare);

    width:3px;

    transform:translateX(-50%);

    background:#fff;

    box-shadow:
        0 0 0 1px rgba(105,69,245,.55),
        0 0 18px rgba(105,69,245,.45);

    pointer-events:none;
}


/* Handle */

body[data-tool-id="enhance"] .nujiz-enhance-handle{
    position:absolute;
    z-index:6;

    left:var(--compare);
    top:50%;

    transform:translate(-50%,-50%);

    width:52px;
    height:52px;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:4px;

    border:3px solid #fff;
    border-radius:50%;

    background:
        linear-gradient(
            135deg,
            #6945f5,
            #855fff
        );

    color:#fff;

    box-shadow:
        0 8px 25px rgba(105,69,245,.35);

    pointer-events:none;
}

body[data-tool-id="enhance"] .nujiz-enhance-handle b{
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;

    font-size:18px;
    line-height:1;
}


/* Labels */

body[data-tool-id="enhance"] .nujiz-enhance-label{
    position:absolute;
    z-index:7;

    top:14px;

    padding:7px 12px;

    border-radius:999px;

    background:rgba(18,20,43,.82);

    backdrop-filter:blur(8px);

    color:#fff !important;
    -webkit-text-fill-color:#fff !important;

    font-size:11px;
    font-weight:900;

    pointer-events:none;
}

html[dir="rtl"]
body[data-tool-id="enhance"]
.nujiz-enhance-label-before{
    right:14px;
}

html[dir="rtl"]
body[data-tool-id="enhance"]
.nujiz-enhance-label-after{
    left:14px;
}

html[dir="ltr"]
body[data-tool-id="enhance"]
.nujiz-enhance-label-before{
    left:14px;
}

html[dir="ltr"]
body[data-tool-id="enhance"]
.nujiz-enhance-label-after{
    right:14px;
}


/* Mobile */

@media(max-width:700px){

    body[data-tool-id="enhance"] .nujiz-enhance-compare{
        padding:12px;
        margin-top:18px;
    }

    body[data-tool-id="enhance"] .nujiz-enhance-compare-head{
        align-items:flex-start;
    }

    body[data-tool-id="enhance"] .nujiz-enhance-compare-stage{
        height:460px;
        min-height:360px;
    }

    body[data-tool-id="enhance"] .nujiz-enhance-handle{
        width:46px;
        height:46px;
    }

}

/* ==========================================================
   BEFORE / AFTER AS MAIN PREVIEW
   ========================================================== */

body[data-tool-id="enhance"] .nujiz-ba-main-preview{
    width:100%;
    margin:0 !important;
    padding:14px;
    box-sizing:border-box;
    background:#fff;
    border:1px solid #e5e2f3;
    border-radius:20px;
}

body[data-tool-id="enhance"] .nujiz-ba-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin-bottom:12px;
    padding:2px 4px;
}

body[data-tool-id="enhance"] .nujiz-ba-heading{
    display:block;
    color:#11172d;
    font-size:16px;
    font-weight:900;
}

body[data-tool-id="enhance"] .nujiz-ba-description{
    margin:5px 0 0;
    color:#747b91;
    font-size:11px;
    line-height:1.7;
}

body[data-tool-id="enhance"] .nujiz-ba-percent{
    flex:0 0 auto;
    padding:7px 11px;
    border-radius:999px;
    background:#f1edff;
    color:#6544ee;
    font-size:10px;
    font-weight:900;
}

body[data-tool-id="enhance"] .nujiz-ba-stage{
    --split:50%;

    position:relative;
    width:100%;
    aspect-ratio:4 / 3;
    max-height:610px;
    overflow:hidden;

    border:1px solid #e4e0f1;
    border-radius:16px;

    background:
        linear-gradient(45deg,#edf0f5 25%,transparent 25%),
        linear-gradient(-45deg,#edf0f5 25%,transparent 25%),
        linear-gradient(45deg,transparent 75%,#edf0f5 75%),
        linear-gradient(-45deg,transparent 75%,#edf0f5 75%);

    background-size:20px 20px;
    background-position:
        0 0,
        0 10px,
        10px -10px,
        -10px 0;
}

body[data-tool-id="enhance"] .nujiz-ba-stage img{
    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    object-fit:contain;
    object-position:center;

    user-select:none;
    pointer-events:none;
}

body[data-tool-id="enhance"] .nujiz-ba-after{
    z-index:1;
}

body[data-tool-id="enhance"] .nujiz-ba-before-layer{
    position:absolute;
    z-index:2;

    inset:0 auto 0 0;

    width:var(--split);
    overflow:hidden;
}

body[data-tool-id="enhance"] .nujiz-ba-before-layer img{
    width:100vw;
    max-width:none;
}

/*
 * مهم:
 * نحافظ على عرض الصورة الاصلية بنفس عرض المسرح
 */
body[data-tool-id="enhance"] .nujiz-ba-before{
    position:absolute;
    top:0;
    left:0;
}

body[data-tool-id="enhance"] .nujiz-ba-divider{
    position:absolute;
    z-index:6;

    top:0;
    bottom:0;
    left:var(--split);

    width:2px;

    background:#fff;
    box-shadow:
        0 0 0 1px rgba(105,69,245,.45),
        0 0 18px rgba(105,69,245,.35);

    transform:translateX(-50%);
    pointer-events:none;
}

body[data-tool-id="enhance"] .nujiz-ba-handle{
    position:absolute;

    top:50%;
    left:50%;

    width:46px;
    height:46px;

    display:grid;
    place-items:center;

    padding:0;
    border:3px solid #fff;
    border-radius:50%;

    background:#7147f7;
    color:#fff !important;

    font-size:17px;
    font-weight:900;

    box-shadow:
        0 7px 24px rgba(67,44,160,.35);

    transform:translate(-50%,-50%);
    pointer-events:none;
}

body[data-tool-id="enhance"] .nujiz-ba-label{
    position:absolute;
    z-index:7;

    top:12px;

    padding:7px 11px;

    border-radius:9px;
    background:rgba(19,20,40,.82);
    color:#fff;

    font-size:10px;
    font-weight:900;

    backdrop-filter:blur(8px);
}

body[data-tool-id="enhance"] .nujiz-ba-label-before{
    left:12px;
}

body[data-tool-id="enhance"] .nujiz-ba-label-after{
    right:12px;
}

body[data-tool-id="enhance"] .nujiz-ba-range{
    position:absolute;
    z-index:10;

    inset:0;

    width:100%;
    height:100%;

    margin:0;

    opacity:0;
    cursor:ew-resize;
}

@media(max-width:700px){

    body[data-tool-id="enhance"] .nujiz-ba-main-preview{
        padding:9px;
        border-radius:15px;
    }

    body[data-tool-id="enhance"] .nujiz-ba-stage{
        aspect-ratio:3 / 4;
        max-height:70vh;
    }

    body[data-tool-id="enhance"] .nujiz-ba-head{
        align-items:flex-start;
    }

    body[data-tool-id="enhance"] .nujiz-ba-description{
        font-size:10px;
    }

    body[data-tool-id="enhance"] .nujiz-ba-handle{
        width:40px;
        height:40px;
    }
}



/* =========================================================
   NUJIZ ENHANCE FINAL BEFORE / AFTER
   replaces original preview after enhancement
   ========================================================= */

html body[data-tool-id="enhance"]
.nujiz-enhance-compare{

    width:100% !important;

    margin:0 !important;

    padding:14px !important;

    box-sizing:border-box !important;

    border:1px solid #e3dff1 !important;

    border-radius:20px !important;

    background:#fff !important;

    box-shadow:
      0 12px 35px
      rgba(28,24,66,.08) !important;

    opacity:0;

    transform:
      translateY(8px);

    transition:
      opacity .25s ease,
      transform .25s ease;
}


html body[data-tool-id="enhance"]
.nujiz-enhance-compare.is-visible{

    opacity:1;

    transform:none;
}


/* الرأس */

html body[data-tool-id="enhance"]
.nujiz-enhance-compare-head{

    display:flex !important;

    align-items:center !important;

    justify-content:
      space-between !important;

    gap:15px !important;

    margin-bottom:12px !important;

    text-align:start;
}


html body[data-tool-id="enhance"]
.nujiz-enhance-compare-head > div{

    display:flex;

    flex-direction:column;

    gap:5px;
}


html body[data-tool-id="enhance"]
.nujiz-enhance-compare-head strong{

    color:#12162b !important;

    font-size:16px !important;

    font-weight:900 !important;
}


html body[data-tool-id="enhance"]
.nujiz-enhance-compare-head small{

    color:#747a8e !important;

    font-size:10px !important;

    line-height:1.7 !important;
}


html body[data-tool-id="enhance"]
.nujiz-enhance-ratio{

    padding:7px 11px;

    border-radius:99px;

    background:#f1edff;

    color:#6945f5 !important;

    font-size:10px;

    font-weight:900;

    white-space:nowrap;
}


/* المسرح */

html body[data-tool-id="enhance"]
.nujiz-enhance-compare-stage{

    --compare:50%;

    position:relative !important;

    width:100% !important;

    height:min(66vh,650px) !important;

    min-height:440px !important;

    overflow:hidden !important;

    border:1px solid
      #e0ddec !important;

    border-radius:16px !important;

    background-color:#f6f7fa !important;

    background-image:
      linear-gradient(
        45deg,
        #e8eaf0 25%,
        transparent 25%
      ),
      linear-gradient(
        -45deg,
        #e8eaf0 25%,
        transparent 25%
      ),
      linear-gradient(
        45deg,
        transparent 75%,
        #e8eaf0 75%
      ),
      linear-gradient(
        -45deg,
        transparent 75%,
        #e8eaf0 75%
      ) !important;

    background-size:
      20px 20px !important;

    background-position:
      0 0,
      0 10px,
      10px -10px,
      -10px 0 !important;

    cursor:ew-resize !important;

    touch-action:none !important;
}


/* الصورتان */

html body[data-tool-id="enhance"]
.nujiz-enhance-result,

html body[data-tool-id="enhance"]
.nujiz-enhance-original{

    position:absolute !important;

    inset:0 !important;

    width:100% !important;

    height:100% !important;

    max-width:none !important;

    max-height:none !important;

    object-fit:contain !important;

    object-position:center !important;

    display:block !important;

    pointer-events:none !important;

    user-select:none !important;
}


/* بعد */

html body[data-tool-id="enhance"]
.nujiz-enhance-result{

    z-index:1 !important;
}


/* قناع قبل */

html body[data-tool-id="enhance"]
.nujiz-enhance-original-mask{

    position:absolute !important;

    z-index:2 !important;

    inset:0 auto 0 0 !important;

    width:var(--compare) !important;

    height:100% !important;

    overflow:hidden !important;
}


html body[data-tool-id="enhance"]
.nujiz-enhance-original-mask
.nujiz-enhance-original{

    width:
      calc(
        100vw
      ) !important;
}


/* خط المنتصف */

html body[data-tool-id="enhance"]
.nujiz-enhance-line{

    position:absolute !important;

    z-index:5 !important;

    top:0 !important;

    bottom:0 !important;

    left:var(--compare) !important;

    width:3px !important;

    transform:
      translateX(-50%) !important;

    background:#fff !important;

    box-shadow:
      0 0 0 1px
      rgba(105,69,245,.50),
      0 0 18px
      rgba(105,69,245,.40) !important;

    pointer-events:none;
}


/* زر السحب */

html body[data-tool-id="enhance"]
.nujiz-enhance-drag{

    position:absolute !important;

    z-index:6 !important;

    left:var(--compare) !important;

    top:50% !important;

    transform:
      translate(-50%,-50%) !important;

    width:48px !important;

    height:48px !important;

    display:grid !important;

    place-items:center !important;

    border:3px solid #fff !important;

    border-radius:50% !important;

    background:
      linear-gradient(
        135deg,
        #6945f5,
        #865fff
      ) !important;

    color:#fff !important;

    -webkit-text-fill-color:
      #fff !important;

    font-size:17px !important;

    font-weight:900 !important;

    box-shadow:
      0 8px 25px
      rgba(105,69,245,.35) !important;

    pointer-events:none;
}


/* قبل وبعد */

html body[data-tool-id="enhance"]
.nujiz-enhance-tag{

    position:absolute !important;

    z-index:7 !important;

    top:12px !important;

    padding:7px 11px !important;

    border-radius:9px !important;

    background:
      rgba(18,20,40,.82) !important;

    color:#fff !important;

    -webkit-text-fill-color:
      #fff !important;

    font-size:10px !important;

    font-weight:900 !important;

    backdrop-filter:
      blur(8px);

    pointer-events:none;
}


html[dir="rtl"]
body[data-tool-id="enhance"]
.nujiz-enhance-before-tag{

    right:12px !important;
}


html[dir="rtl"]
body[data-tool-id="enhance"]
.nujiz-enhance-after-tag{

    left:12px !important;
}


html[dir="ltr"]
body[data-tool-id="enhance"]
.nujiz-enhance-before-tag{

    left:12px !important;
}


html[dir="ltr"]
body[data-tool-id="enhance"]
.nujiz-enhance-after-tag{

    right:12px !important;
}


/* range شفاف فوق كامل الصورة */

html body[data-tool-id="enhance"]
.nujiz-enhance-slider{

    position:absolute !important;

    z-index:10 !important;

    inset:0 !important;

    width:100% !important;

    height:100% !important;

    margin:0 !important;

    opacity:0 !important;

    cursor:ew-resize !important;
}


@media(max-width:700px){

    html body[data-tool-id="enhance"]
    .nujiz-enhance-compare-stage{

        height:62vh !important;

        min-height:380px !important;
    }


    html body[data-tool-id="enhance"]
    .nujiz-enhance-drag{

        width:42px !important;

        height:42px !important;
    }

}