/**
 * Shared crop editor layout — keep imgAreaSelect overlay aligned with the photo.
 * DOM: .crop_container.mf-crop-editor-target > .mf-crop-source-wrap > .mf-crop-source-inner > img.mf-crop-source-img
 */

.crop_container {
    display: block;
    box-sizing: border-box;
    line-height: 0;
}

.mf-crop-editor-target {
    position: relative;
    overflow: hidden;
    display: block;
    padding: 0;
    line-height: 0;
}

.mf-crop-editor-target.mf-crop-upload-box {
    overflow: visible;
}

.mf-crop-source-wrap {
    position: relative;
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0 auto 10px;
    overflow: hidden;
    box-sizing: border-box;
    line-height: 0;
}

.crop_container .mf-crop-source-wrap {
    margin: 0;
}

.mf-crop-source-inner {
    position: relative;
    display: inline-block;
    width: auto;
    max-width: 100%;
    margin: 0;
    padding: 0;
    overflow: visible;
    line-height: 0;
    vertical-align: top;
}

.mf-crop-editor-target .mf-crop-source-wrap,
.mf-crop-editor-target .mf-crop-source-inner {
    max-width: 100%;
}

.mf-crop-source-img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    vertical-align: top;
}

.mf-crop-preview-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.mf-crop-photo-wrap {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
}

/* Biodata source editors: container clips to image; inner is imgAreaSelect parent. */
.mf-biodata-maid-crop.mf-crop-editor-target {
    width: 100%;
    max-width: 100%;
    margin: 0;
    overflow: hidden;
    aspect-ratio: unset;
    height: auto;
    background: #fff;
}

.mf-biodata-maid-crop .mf-crop-source-wrap {
    width: 100%;
    max-width: 100%;
    margin: 0;
    overflow: hidden;
    text-align: left;
}

.mf-biodata-maid-crop .mf-crop-source-inner {
    display: inline-block;
    width: auto;
    max-width: 100%;
    position: relative;
}

.mf-biodata-maid-crop .mf-crop-source-img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    margin: 0;
}

.mf-crop-controls {
    display: block;
    position: relative;
    clear: both;
    margin-top: 12px;
    padding-top: 4px;
    text-align: center;
    line-height: normal;
    z-index: 30;
}

.mf-crop-controls .btn,
.mf-crop-controls button {
    position: static;
    display: inline-block;
    margin: 4px 6px 0;
}

/* imgAreaSelect overlay divs live inside .mf-crop-source-inner beside the image. */
.mf-crop-source-inner > div,
.mf-crop-source-wrap > .imgareaselect-outer,
.mf-crop-source-wrap > div:not(.mf-crop-source-inner) {
    position: absolute !important;
}

.imgareaselect-selection {
    border: 2px solid #ff5a00 !important;
    cursor: move;
    z-index: 20 !important;
}

.imgareaselect-outer {
    background-color: rgba(0, 0, 0, 0.35) !important;
    z-index: 10 !important;
}

.imgareaselect-border1,
.imgareaselect-border2,
.imgareaselect-border3,
.imgareaselect-border4,
.imgareaselect-handle {
    z-index: 21 !important;
}