/*
 * UKMB CENTRAL CROPPER — AUTHORITATIVE VISUAL CONTRACT
 *
 * This file is the single visual source for the shared image cropper used by:
 * Signup, Registration/Profile Edit, Complaint Cell and Messages.
 * Page/module CSS must not define a second cropper design.
 */

/* ==============================
   MODAL / CARD
============================== */
.crop-modal,
.ukmb-message-crop-modal,
.ukmb-complaint-crop-modal,
.appointment-crop-modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 999999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    background: rgba(0, 0, 0, .85) !important;
    backdrop-filter: blur(8px) !important;
}

.crop-modal[hidden],
.ukmb-message-crop-modal[hidden],
.ukmb-complaint-crop-modal[hidden],
.appointment-crop-modal[hidden] {
    display: none !important;
}

.crop-modal:not(.active) {
    display: none !important;
}

.crop-box,
.ukmb-message-crop-card,
.ukmb-complaint-crop-card,
.appointment-crop-modal .crop-box {
    width: 100% !important;
    max-width: 850px !important;
    max-height: 90vh !important;
    box-sizing: border-box !important;
    padding: 20px 24px 24px !important;
    border: 0 !important;
    border-radius: 18px !important;
    background: #fff !important;
    box-shadow: 0 25px 70px rgba(0, 0, 0, .40) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}

/* ==============================
   HEADER
============================== */
.crop-header,
.ukmb-message-crop-head,
.ukmb-complaint-crop-head {
    position: relative !important;
    display: block !important;
    flex: 0 0 auto !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
    border: 0 !important;
    background: #fff !important;
    color: #263238 !important;
    text-align: center !important;
}

.crop-header h3,
.ukmb-message-crop-head h3,
.ukmb-complaint-crop-head h3,
.ukmb-message-crop-head strong,
.ukmb-complaint-crop-head strong {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #263238 !important;
    background: transparent !important;
    font-family: inherit !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
}

.crop-header > div,
.ukmb-message-crop-head > div,
.ukmb-complaint-crop-head > div {
    display: block !important;
}

.crop-header span,
.ukmb-message-crop-head span,
.ukmb-complaint-crop-head span {
    display: none !important;
}

.ukmb-message-crop-head button,
.ukmb-complaint-crop-head button {
    position: absolute !important;
    right: 0 !important;
    top: -5px !important;
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: #52605d !important;
    font-size: 24px !important;
    line-height: 32px !important;
    cursor: pointer !important;
}

/* ==============================
   IMAGE / CROPPER STAGE
============================== */
.crop-image-wrapper,
.ukmb-message-crop-stage,
.ukmb-complaint-crop-stage {
    position: relative !important;
    width: 100% !important;
    height: min(56vh, 560px) !important;
    min-height: 320px !important;
    max-height: 560px !important;
    flex: 1 1 auto !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    background: #111 !important;
    border-radius: 12px !important;
}

.crop-image-wrapper > img,
.ukmb-message-crop-stage > img,
.ukmb-complaint-crop-stage > img {
    display: block !important;
    max-width: none !important;
    max-height: none !important;
    width: auto !important;
    height: auto !important;
    object-fit: initial !important;
}

.crop-image-wrapper > img.ukmb-cropper-source,
.ukmb-message-crop-stage > img.ukmb-cropper-source,
.ukmb-complaint-crop-stage > img.ukmb-cropper-source {
    visibility: hidden !important;
}

/* Cropper.js generated surface is fully controlled by this component. */
.crop-image-wrapper .cropper-container,
.ukmb-message-crop-stage .cropper-container,
.ukmb-complaint-crop-stage .cropper-container {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    direction: ltr !important;
    touch-action: none !important;
    user-select: none !important;
}

.crop-image-wrapper .cropper-wrap-box,
.crop-image-wrapper .cropper-drag-box,
.crop-image-wrapper .cropper-canvas,
.crop-image-wrapper .cropper-crop-box,
.ukmb-message-crop-stage .cropper-wrap-box,
.ukmb-message-crop-stage .cropper-drag-box,
.ukmb-message-crop-stage .cropper-canvas,
.ukmb-message-crop-stage .cropper-crop-box,
.ukmb-complaint-crop-stage .cropper-wrap-box,
.ukmb-complaint-crop-stage .cropper-drag-box,
.ukmb-complaint-crop-stage .cropper-canvas,
.ukmb-complaint-crop-stage .cropper-crop-box {
    position: absolute !important;
}

/* Thin, visible crop boundary — the approved Signup reference. */
.crop-image-wrapper .cropper-view-box,
.ukmb-message-crop-stage .cropper-view-box,
.ukmb-complaint-crop-stage .cropper-view-box {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    outline: 1px solid #ef4444 !important;
    outline-offset: -1px !important;
    border-radius: 0 !important;
    overflow: hidden !important;
}

.crop-image-wrapper .cropper-face,
.ukmb-message-crop-stage .cropper-face,
.ukmb-complaint-crop-stage .cropper-face {
    background: transparent !important;
    opacity: 0 !important;
    cursor: move !important;
    touch-action: none !important;
}

/* 1px frame lines + clearly visible resize handles. */
.crop-image-wrapper .cropper-line,
.ukmb-message-crop-stage .cropper-line,
.ukmb-complaint-crop-stage .cropper-line {
    background: #ef4444 !important;
    opacity: 1 !important;
}

.crop-image-wrapper .cropper-line.line-n,
.crop-image-wrapper .cropper-line.line-s,
.ukmb-message-crop-stage .cropper-line.line-n,
.ukmb-message-crop-stage .cropper-line.line-s,
.ukmb-complaint-crop-stage .cropper-line.line-n,
.ukmb-complaint-crop-stage .cropper-line.line-s {
    height: 1px !important;
}

.crop-image-wrapper .cropper-line.line-e,
.crop-image-wrapper .cropper-line.line-w,
.ukmb-message-crop-stage .cropper-line.line-e,
.ukmb-message-crop-stage .cropper-line.line-w,
.ukmb-complaint-crop-stage .cropper-line.line-e,
.ukmb-complaint-crop-stage .cropper-line.line-w {
    width: 1px !important;
}

.crop-image-wrapper .cropper-point,
.ukmb-message-crop-stage .cropper-point,
.ukmb-complaint-crop-stage .cropper-point {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: #ef4444 !important;
    opacity: 1 !important;
}

.crop-image-wrapper .cropper-modal,
.ukmb-message-crop-stage .cropper-modal,
.ukmb-complaint-crop-stage .cropper-modal {
    opacity: .45 !important;
}

/* ==============================
   CONTROLS
============================== */
.crop-controls,
.ukmb-message-crop-controls,
.ukmb-complaint-crop-controls {
    margin-top: 14px !important;
    padding: 14px 0 0 !important;
    border-top: 1px solid #e8e8e8 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    flex: 0 0 auto !important;
    background: transparent !important;
}

.crop-btn,
.ukmb-message-crop-controls button,
.ukmb-message-crop-controls .crop-btn,
.ukmb-complaint-crop-controls button,
.ukmb-complaint-crop-controls .crop-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    width: auto !important;
    min-width: 0 !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 14px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: #f0f0f0 !important;
    color: #333 !important;
    font-family: inherit !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    transition: background .15s ease, transform .15s ease !important;
}

.crop-btn:hover,
.ukmb-message-crop-controls button:hover,
.ukmb-complaint-crop-controls button:hover {
    background: #e0e0e0 !important;
    transform: translateY(-2px) !important;
}

.crop-btn:active,
.ukmb-message-crop-controls button:active,
.ukmb-complaint-crop-controls button:active {
    transform: translateY(1px) !important;
}

#cropCancel,
.crop-btn-secondary,
.ukmb-message-crop-controls .crop-btn-secondary,
.ukmb-complaint-crop-controls .crop-btn-secondary {
    background: #dc3545 !important;
    color: #fff !important;
}

#cropApply,
.crop-btn-apply,
.crop-btn-primary,
.ukmb-message-crop-controls .crop-btn-apply,
.ukmb-message-crop-controls .crop-btn-primary,
.ukmb-complaint-crop-controls .crop-btn-apply {
    background: #075454 !important;
    color: #fff !important;
}

.crop-btn i {
    font-size: 13px !important;
}

/* Message-only option; the actual crop controls remain identical. */
.ukmb-message-crop-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    padding: 10px 0 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: #31534c !important;
    font-size: 10px !important;
    font-weight: 700 !important;
}

.ukmb-message-crop-footer label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    color: #31534c !important;
    font-size: 10px !important;
    font-weight: 700 !important;
}

.ukmb-message-crop-footer input {
    accent-color: #075454 !important;
}

.ukmb-message-crop-footer > div {
    display: none !important;
}

/* ============================================================
   CENTRAL AUTO / FREE MODE BAR
   Shared by Signup, Payment Proof and other central cropper hosts.
============================================================ */
.signup-central-crop-modebar,
.ukmb-message-crop-modebar,
.ukmb-complaint-crop-modebar{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:0!important;
    margin:0 0 10px!important;
    padding:3px!important;
    border:1px solid #d9e6e1!important;
    border-radius:22px!important;
    background:#f6faf8!important;
    box-sizing:border-box!important;
    flex:0 0 auto!important;
}
.signup-central-crop-modebar button,
.ukmb-message-crop-modebar button,
.ukmb-complaint-crop-modebar button{
    flex:1 1 50%!important;
    min-width:0!important;
    width:50%!important;
    height:34px!important;
    min-height:34px!important;
    padding:0 12px!important;
    border:0!important;
    border-radius:18px!important;
    background:transparent!important;
    color:#35514b!important;
    font:800 11px/34px Arial,sans-serif!important;
    cursor:pointer!important;
    white-space:nowrap!important;
    box-sizing:border-box!important;
}
.signup-central-crop-modebar button:hover,
.signup-central-crop-modebar button.is-active,
.ukmb-message-crop-modebar button:hover,
.ukmb-message-crop-modebar button.is-active,
.ukmb-complaint-crop-modebar button:hover,
.ukmb-complaint-crop-modebar button.is-active{
    background:#07594e!important;
    color:#fff!important;
}

/* Signup and Payment use the same central Auto/Free crop contract. */
.signup-central-crop-modebar{
    display:flex!important;justify-content:center!important;align-items:center!important;gap:6px!important;
    margin:0 0 10px!important;padding:4px!important;border:1px solid #dce6e2!important;
    border-radius:999px!important;background:#f5f9f7!important;
}
.signup-central-crop-modebar button{
    min-width:112px!important;height:31px!important;padding:0 14px!important;border:0!important;border-radius:999px!important;
    background:transparent!important;color:#48635c!important;font:800 11px/31px Arial,sans-serif!important;cursor:pointer!important;
}
.signup-central-crop-modebar button:hover,.signup-central-crop-modebar button.is-active{background:#07594e!important;color:#fff!important;}

/* ==============================
   RESPONSIVE
============================== */
@media (max-width: 768px) {
    .crop-modal,
    .ukmb-message-crop-modal,
    .ukmb-complaint-crop-modal { padding: 12px !important; }

    .crop-box,
    .ukmb-message-crop-card,
    .ukmb-complaint-crop-card {
        padding: 14px 16px 16px !important;
        border-radius: 14px !important;
        max-height: 92vh !important;
    }

    .crop-header h3,
    .ukmb-message-crop-head h3,
    .ukmb-complaint-crop-head h3,
    .ukmb-message-crop-head strong,
    .ukmb-complaint-crop-head strong { font-size: 17px !important; }

    .crop-image-wrapper,
    .ukmb-message-crop-stage,
    .ukmb-complaint-crop-stage {
        height: 48vh !important;
        min-height: 200px !important;
        max-height: 48vh !important;
    }

    .signup-central-crop-modebar,
    .ukmb-message-crop-modebar,
    .ukmb-complaint-crop-modebar,
    .signup-central-crop-modebar,
    .ukmb-message-crop-modebar,
    .ukmb-complaint-crop-modebar,
    .crop-controls,
    .ukmb-message-crop-controls,
    .ukmb-complaint-crop-controls {
        gap: 6px !important;
        padding-top: 10px !important;
    }

    .crop-btn,
    .ukmb-message-crop-controls button,
    .ukmb-complaint-crop-controls button {
        height: 32px !important;
        min-height: 32px !important;
        padding: 0 10px !important;
        font-size: 11px !important;
    }
}

@media (max-width: 576px) {
    .crop-modal,
    .ukmb-message-crop-modal,
    .ukmb-complaint-crop-modal { padding: 8px !important; }

    .crop-box,
    .ukmb-message-crop-card,
    .ukmb-complaint-crop-card {
        padding: 10px 12px 14px !important;
        border-radius: 12px !important;
        max-height: 94vh !important;
    }

    .crop-header h3,
    .ukmb-message-crop-head h3,
    .ukmb-complaint-crop-head h3,
    .ukmb-message-crop-head strong,
    .ukmb-complaint-crop-head strong { font-size: 15px !important; }

    .crop-image-wrapper,
    .ukmb-message-crop-stage,
    .ukmb-complaint-crop-stage {
        height: 42vh !important;
        min-height: 150px !important;
        max-height: 42vh !important;
    }

    .crop-controls,
    .ukmb-message-crop-controls,
    .ukmb-complaint-crop-controls {
        gap: 4px !important;
        padding-top: 8px !important;
    }

    .crop-btn,
    .ukmb-message-crop-controls button,
    .ukmb-complaint-crop-controls button {
        height: 28px !important;
        min-height: 28px !important;
        padding: 0 8px !important;
        font-size: 10px !important;
        border-radius: 6px !important;
    }
}

/* UKMB CENTRAL MESSAGE MEDIA — reliable country-flag picker/display */
.ukmb-flag-emoji{display:inline-flex;align-items:center;vertical-align:-.16em;line-height:1;margin:0 .08em}
.ukmb-flag-emoji img{display:block;width:24px!important;height:18px!important;max-width:24px!important;object-fit:cover!important;border-radius:2px}
.ukmb-flag-sr{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.ukmb-flag-fallback{position:static!important;width:auto!important;height:auto!important;margin:0!important;overflow:visible!important;clip:auto!important;white-space:normal!important;font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif!important}
.ukmb-emoji-flag-button{font-size:0!important}
.ukmb-emoji-flag-button .ukmb-flag-emoji{margin:0}
.ukmb-emoji-grid .ukmb-flag-emoji img{width:24px!important;height:18px!important}
.ukmb-message-input-visual .ukmb-flag-emoji{vertical-align:-.18em}
.ukmb-message-input-visual .ukmb-flag-emoji img{width:24px!important;height:18px!important}

/* Preview before Send — separate from the cropper itself. */
.ukmb-complaint-chat .ukmb-attachment-preview,
.ukmb-message-compose .ukmb-attachment-preview {
    width: 140px !important;
    height: 140px !important;
    max-width: 140px !important;
    max-height: 140px !important;
    object-fit: contain !important;
    padding: 3px !important;
    border: 1px solid #d7e1de !important;
    border-radius: 10px !important;
    background: #111 !important;
    box-shadow: 0 10px 28px rgba(0,45,40,.28) !important;
}


/* PROFILE-FORM SHELL ALIAS — the legacy profile-form IDs are retained for
   backend/JS compatibility, but their visual contract is owned here. */
.crop-modal{position:fixed!important;inset:0!important;z-index:100000!important;display:none!important;align-items:center!important;justify-content:center!important;padding:24px!important;box-sizing:border-box!important;background:rgba(0,0,0,.72)!important;backdrop-filter:blur(5px)!important;}
.crop-modal.active{display:flex!important;}
.crop-modal[aria-hidden="true"]{display:none!important;}
.crop-modal .crop-box{width:min(760px,94vw)!important;max-height:min(760px,92vh)!important;overflow:hidden!important;border-radius:18px!important;background:#fff!important;box-shadow:0 28px 80px rgba(0,0,0,.35)!important;}
.crop-modal .crop-header{display:flex!important;align-items:center!important;justify-content:center!important;padding:16px 20px 10px!important;border:0!important;background:#fff!important;}
.crop-modal .crop-header h3{margin:0!important;color:#26383a!important;font-size:19px!important;font-weight:800!important;}
.crop-modal .signup-central-crop-modebar{display:flex!important;align-items:center!important;justify-content:center!important;gap:0!important;margin:0 22px 10px!important;padding:3px!important;border:1px solid #d9e6e1!important;border-radius:22px!important;background:#f6faf8!important;}
.crop-modal .signup-central-crop-modebar button{flex:1!important;border:0!important;border-radius:18px!important;padding:8px 14px!important;background:transparent!important;color:#35514b!important;font-weight:800!important;cursor:pointer!important;}
.crop-modal .signup-central-crop-modebar button.is-active{background:#075f56!important;color:#fff!important;}
.crop-modal .crop-image-wrapper{margin:0 22px!important;height:min(500px,62vh)!important;border-radius:12px!important;overflow:hidden!important;background:#111!important;}
.crop-modal .crop-controls{display:flex!important;justify-content:center!important;align-items:center!important;gap:8px!important;flex-wrap:wrap!important;padding:14px 20px 18px!important;border-top:1px solid #e6ece9!important;background:#fff!important;}
.crop-modal .crop-btn{min-height:34px!important;padding:8px 13px!important;border:0!important;border-radius:8px!important;background:#f0f2f1!important;color:#334844!important;font-weight:800!important;cursor:pointer!important;}
.crop-modal .crop-btn-secondary{background:#ef3f4b!important;color:#fff!important;}
.crop-modal #cropApply{background:#075f56!important;color:#fff!important;}
@media(max-width:640px){.crop-modal{padding:10px!important}.crop-modal .crop-box{width:100%!important}.crop-modal .crop-image-wrapper{margin:0 10px!important;height:56vh!important}.crop-modal .crop-controls{padding:10px!important;gap:5px!important}.crop-modal .crop-btn{font-size:11px!important;padding:7px 9px!important;}}

/* ============================================================
   UKMB 2026-10-02 — PROFILE CROP MODAL BALANCE PASS
   Keeps the shared cropper contract but removes the uneven side spacing
   and oversized control footprint seen on Admin Profile Edit.
============================================================ */
.crop-modal .crop-box{
    width:min(760px,94vw) !important;
    max-width:760px !important;
    max-height:92vh !important;
    padding:18px 22px 20px !important;
    box-sizing:border-box !important;
}
.crop-modal .crop-header{
    min-height:30px !important;
    margin:0 0 10px !important;
    padding:0 !important;
}
.crop-modal .crop-header h3{
    font-size:19px !important;
    line-height:1.2 !important;
}
.crop-modal .signup-central-crop-modebar{
    width:calc(100% - 2px) !important;
    margin:0 1px 10px !important;
    padding:3px !important;
    gap:0 !important;
    box-sizing:border-box !important;
}
.crop-modal .signup-central-crop-modebar button{
    flex:1 1 50% !important;
    min-width:0 !important;
    width:50% !important;
    height:34px !important;
    min-height:34px !important;
    padding:0 10px !important;
    font-size:11px !important;
    line-height:34px !important;
    box-sizing:border-box !important;
}
.crop-modal .crop-image-wrapper{
    width:100% !important;
    margin:0 !important;
    height:min(500px,58vh) !important;
    min-height:300px !important;
    max-height:500px !important;
    box-sizing:border-box !important;
}
.crop-modal .crop-controls{
    width:100% !important;
    margin:12px 0 0 !important;
    padding:12px 0 0 !important;
    gap:8px !important;
    justify-content:center !important;
    align-items:center !important;
    box-sizing:border-box !important;
}
.crop-modal .crop-btn{
    flex:0 0 auto !important;
    width:auto !important;
    min-width:0 !important;
    height:36px !important;
    min-height:36px !important;
    padding:0 12px !important;
    margin:0 !important;
    font-size:11px !important;
    line-height:1 !important;
    box-sizing:border-box !important;
}
.crop-modal .crop-btn i{
    font-size:12px !important;
}
@media(max-width:768px){
    .crop-modal{padding:10px !important;}
    .crop-modal .crop-box{
        width:100% !important;
        max-width:100% !important;
        max-height:94vh !important;
        padding:14px 14px 16px !important;
        border-radius:14px !important;
    }
    .crop-modal .crop-image-wrapper{
        height:48vh !important;
        min-height:220px !important;
        max-height:48vh !important;
    }
    .crop-modal .crop-controls{
        gap:6px !important;
    }
    .crop-modal .crop-btn{
        height:33px !important;
        min-height:33px !important;
        padding:0 9px !important;
        font-size:10px !important;
    }
}
@media(max-width:560px){
    .crop-modal .crop-controls{
        display:grid !important;
        grid-template-columns:repeat(3,minmax(0,1fr)) !important;
        gap:6px !important;
    }
    .crop-modal .crop-btn{
        width:100% !important;
        min-width:0 !important;
        padding:0 5px !important;
        font-size:10px !important;
    }
    .crop-modal #cropApply{
        grid-column:1 / -1 !important;
    }
}