/* css/cropper.css — أداة اقتصاص الصور لمنصة عبقر */

/* مساحة العمل للاقتصاص */
.cropper-workspace {
    position: relative;
    width: 300px;
    height: 300px;
    overflow: hidden;
    border-radius: 1.25rem;
    background-color: #0f172a;
    /* خلفية المربعات الشفافة */
    background-image: 
        linear-gradient(45deg, #1e293b 25%, transparent 25%), 
        linear-gradient(-45deg, #1e293b 25%, transparent 25%), 
        linear-gradient(45deg, transparent 75%, #1e293b 75%), 
        linear-gradient(-45deg, transparent 75%, #1e293b 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.6);
}

/* الصورة المراد اقتصاصها */
.cropper-image {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) translate(0, 0) scale(1);
    transform-origin: center center;
    cursor: move;
    user-select: none;
    -webkit-user-drag: none;
    max-width: none;
    max-height: none;
    transition: none;
}

/* القناع الدائري والتظليل المحيط */
.cropper-mask {
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    /* قناع دائري بقطر 180 بكسل */
    background: radial-gradient(circle 90px at center, transparent 99%, rgba(15, 23, 42, 0.75) 100%);
    z-index: 10;
}

/* محدد القص الدائري (الخط المتقطع) */
.cropper-indicator {
    position: absolute;
    width: 180px;
    height: 180px;
    border: 2px dashed rgba(255, 255, 255, 0.65);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.1);
    z-index: 11;
    pointer-events: none;
    animation: cropper-pulse 3s infinite ease-in-out;
}

@keyframes cropper-pulse {
    0%, 100% { border-color: rgba(255, 255, 255, 0.5); }
    50% { border-color: rgba(245, 158, 11, 0.8); } /* يتوهج بلون الكهرمان */
}