.crop-container {
    position: relative;
    margin-top: 20px;
    display: none;
}

#previewImage {
    display: block;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05), 0 10px 20px rgba(0,0,0,0.08);
}

    .crop-container img {
        max-width: 600px;
        display: block;
    }

#cropBox {
    position: absolute;
    top: 50px;
    left: 50px;
    width: 200px;
    height: 200px;
    border: 2px dashed #ffcc00;
    background: rgba(255, 204, 0, 0.25);
    cursor: move;
    box-sizing: border-box;
}


.handle {
    position: absolute;
    width: 12px;
    height: 12px;
    background: #ffcc00;
    border-radius: 50%;
}

    .handle.nw {
        top: -6px;
        left: -6px;
        cursor: nwse-resize;
    }

    .handle.ne {
        top: -6px;
        right: -6px;
        cursor: nesw-resize;
    }

    .handle.sw {
        bottom: -6px;
        left: -6px;
        cursor: nesw-resize;
    }

    .handle.se {
        bottom: -6px;
        right: -6px;
        cursor: nwse-resize;
    }

    .handle.n {
        top: -6px;
        left: 50%;
        transform: translateX(-50%);
        cursor: ns-resize;
    }

    .handle.s {
        bottom: -6px;
        left: 50%;
        transform: translateX(-50%);
        cursor: ns-resize;
    }

    .handle.e {
        right: -6px;
        top: 50%;
        transform: translateY(-50%);
        cursor: ew-resize;
    }

    .handle.w {
        left: -6px;
        top: 50%;
        transform: translateY(-50%);
        cursor: ew-resize;
    }


.crop-container {
    margin-top: 20px;
    display: none;
    position: relative;
}