@import url("/assets/vendor/cropper/cropper.min.css?v=20261009-central-vendor");

/*
 * 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: clamp(8px, 2vh, 18px) clamp(8px, 2vw, 18px) !important;
    box-sizing: border-box !important;
    overflow: auto !important;
    overscroll-behavior: contain !important;
    background: rgba(15, 35, 31, .76) !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: min(850px, calc(100vw - 24px)) !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: calc(100dvh - 24px) !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
    padding: clamp(10px, 1.8vh, 18px) clamp(12px, 2vw, 22px) !important;
    border: 1px solid #d4c6a0 !important;
    border-radius: 16px !important;
    background: linear-gradient(145deg, #fffef9 0%, #f0f2e9 100%) !important;
    box-shadow: 0 18px 42px rgba(0, 0, 0, .48), 0 0 0 1px rgba(255,255,255,.72) inset !important;
    overflow: auto !important;
    overscroll-behavior: contain !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: auto !important;
    min-height: 0 !important;
    max-height: none !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 {
        width: calc(100vw - 16px) !important;
        max-width: 100% !important;
        max-height: calc(100dvh - 16px) !important;
        padding: 10px 12px 12px !important;
        border-radius: 13px !important;
        gap: 0 !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: clamp(150px, 42dvh, 440px) !important;
        min-height: 0 !important;
        max-height: calc(100dvh - 210px) !important;
        flex: 1 1 auto !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 {
        width: calc(100vw - 12px) !important;
        max-height: calc(100dvh - 12px) !important;
        padding: 8px 9px 10px !important;
        border-radius: 11px !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: clamp(130px, 38dvh, 360px) !important;
        min-height: 0 !important;
        max-height: calc(100dvh - 195px) !important;
        flex: 1 1 auto !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;
    }
}


/* =========================================================
   SECTION-20261008-CROPPER-POLISH-V2
   Auto/Free mode controls are intentionally compact. They are mode
   selectors, not full-width primary actions. This applies to Signup and
   Payment Proof while leaving the crop stage and action controls unchanged.
========================================================= */
.signup-central-crop-modebar,
.ukmb-message-crop-modebar,
.ukmb-complaint-crop-modebar{
    width:300px !important;
    max-width:calc(100% - 20px) !important;
    margin:0 auto 10px !important;
    padding:3px !important;
    gap:4px !important;
    box-sizing:border-box !important;
}
.signup-central-crop-modebar button,
.ukmb-message-crop-modebar button,
.ukmb-complaint-crop-modebar button{
    flex:0 0 50% !important;
    width:50% !important;
    min-width:0 !important;
    height:32px !important;
    min-height:32px !important;
    padding:0 8px !important;
    border-radius:999px !important;
    font-size:11px !important;
    line-height:32px !important;
    box-sizing:border-box !important;
}
.crop-modal .signup-central-crop-modebar{
    width:300px !important;
    max-width:calc(100% - 20px) !important;
    margin:0 auto 10px !important;
    padding:3px !important;
    gap:4px !important;
}
.crop-modal .signup-central-crop-modebar button{
    flex:0 0 50% !important;
    width:50% !important;
    min-width:0 !important;
    height:32px !important;
    min-height:32px !important;
    padding:0 8px !important;
    line-height:32px !important;
}
@media(max-width:640px){
    .signup-central-crop-modebar,
    .ukmb-message-crop-modebar,
    .ukmb-complaint-crop-modebar,
    .crop-modal .signup-central-crop-modebar{
        width:280px !important;
        max-width:calc(100% - 12px) !important;
    }
}

/* =========================================================
   SECTION-20261008-CROPPER-MANUAL-MOVE-V3
   The red crop frame must be a real interactive manual crop box.
   Keep the existing resize handles while making the full frame hit area
   reliably clickable on Signup and Payment Proof.
========================================================= */
.crop-image-wrapper .cropper-crop-box,
.ukmb-message-crop-stage .cropper-crop-box,
.ukmb-complaint-crop-stage .cropper-crop-box{
    pointer-events:auto !important;
    z-index:10 !important;
}
.crop-image-wrapper .cropper-face,
.ukmb-message-crop-stage .cropper-face,
.ukmb-complaint-crop-stage .cropper-face{
    pointer-events:auto !important;
    z-index:11 !important;
    cursor:move !important;
}
.crop-image-wrapper .cropper-view-box,
.ukmb-message-crop-stage .cropper-view-box,
.ukmb-complaint-crop-stage .cropper-view-box{
    pointer-events:none !important;
}
.crop-image-wrapper .cropper-line,
.crop-image-wrapper .cropper-point,
.ukmb-message-crop-stage .cropper-line,
.ukmb-message-crop-stage .cropper-point,
.ukmb-complaint-crop-stage .cropper-line,
.ukmb-complaint-crop-stage .cropper-point{
    z-index:12 !important;
}
.crop-image-wrapper .cropper-crop-box,
.ukmb-message-crop-stage .cropper-crop-box,
.ukmb-complaint-crop-stage .cropper-crop-box{
    border:1px solid #ef4444 !important;
    box-sizing:border-box !important;
}

/* 13 OCT 2026 — consultation appointment cropper must fit the visible viewport. */
.appointment-crop-modal{padding:clamp(6px,1.5vh,16px)!important;overflow:auto!important;align-items:center!important;}
.appointment-crop-modal .crop-box{width:min(850px,100%)!important;max-width:850px!important;max-height:calc(100dvh - 20px)!important;min-height:0!important;padding:clamp(10px,1.6vh,18px) clamp(10px,1.8vw,22px)!important;overflow:auto!important;overscroll-behavior:contain!important;}
.appointment-crop-modal .crop-header{margin-bottom:8px!important;}
.appointment-crop-modal .signup-central-crop-modebar{margin-bottom:8px!important;}
.appointment-crop-modal .crop-image-wrapper.appointment-crop-stage,
.appointment-crop-modal .ukmb-message-crop-stage{height:clamp(150px,42dvh,460px)!important;min-height:0!important;max-height:42dvh!important;flex:1 1 auto!important;}
.appointment-crop-modal .ukmb-message-crop-footer{padding-top:6px!important;font-size:10px!important;}
.appointment-crop-modal .ukmb-message-crop-controls{gap:6px!important;margin-top:8px!important;padding-top:8px!important;}
.appointment-crop-modal .ukmb-message-crop-controls button{height:32px!important;min-height:32px!important;padding:0 10px!important;font-size:11px!important;}
@media(max-height:700px){.appointment-crop-modal .crop-box{padding:8px 12px!important}.appointment-crop-modal .crop-image-wrapper,.appointment-crop-modal .ukmb-message-crop-stage{height:34dvh!important;max-height:34dvh!important;min-height:120px!important}.appointment-crop-modal .ukmb-message-crop-controls{gap:5px!important;margin-top:5px!important;padding-top:6px!important}.appointment-crop-modal .ukmb-message-crop-controls button{height:29px!important;min-height:29px!important;padding:0 8px!important;font-size:10px!important}}
@media(max-width:640px){.appointment-crop-modal{padding:6px!important}.appointment-crop-modal .crop-box{max-height:calc(100dvh - 12px)!important;padding:10px!important}.appointment-crop-modal .crop-image-wrapper,.appointment-crop-modal .ukmb-message-crop-stage{height:36dvh!important;max-height:36dvh!important;min-height:130px!important}.appointment-crop-modal .ukmb-message-crop-controls{display:flex!important;flex-wrap:wrap!important}.appointment-crop-modal .ukmb-message-crop-controls button{flex:1 1 calc(50% - 6px)!important;max-width:calc(50% - 3px)!important;white-space:normal!important}}


/* 13 OCT 2026 — final viewport-fit lock for the consultation payment-proof cropper.
   Scoped only to this modal; shared Signup/Profile/Message cropper behavior is unchanged. */
#appointmentCropModal.appointment-crop-modal{position:fixed!important;inset:0!important;padding:8px!important;overflow:hidden!important;align-items:center!important;justify-content:center!important;box-sizing:border-box!important;}
#appointmentCropModal.appointment-crop-modal .crop-box{display:flex!important;flex-direction:column!important;width:min(850px,100%)!important;max-width:850px!important;height:auto!important;max-height:calc(100vh - 16px)!important;max-height:calc(100dvh - 16px)!important;min-height:0!important;padding:clamp(8px,1.5vh,14px) clamp(10px,1.6vw,20px)!important;overflow:hidden!important;box-sizing:border-box!important;}
#appointmentCropModal .crop-header{flex:0 0 auto!important;margin:0 0 6px!important;}
#appointmentCropModal .signup-central-crop-modebar{flex:0 0 auto!important;margin:0 auto 6px!important;}
#appointmentCropModal .ukmb-message-crop-stage{flex:1 1 auto!important;width:auto!important;height:clamp(120px,calc(100dvh - 390px),420px)!important;min-height:0!important;max-height:calc(100dvh - 390px)!important;margin:0!important;box-sizing:border-box!important;}
#appointmentCropModal .ukmb-message-crop-footer{flex:0 0 auto!important;padding-top:5px!important;font-size:10px!important;line-height:1.25!important;}
#appointmentCropModal .ukmb-message-crop-controls{flex:0 0 auto!important;display:flex!important;flex-wrap:wrap!important;gap:5px!important;margin-top:6px!important;padding:6px 0 0!important;}
#appointmentCropModal .ukmb-message-crop-controls button{flex:0 1 auto!important;max-width:100%!important;height:30px!important;min-height:30px!important;padding:0 9px!important;font-size:10px!important;white-space:nowrap!important;}
@media(max-height:700px){#appointmentCropModal.appointment-crop-modal .crop-box{padding:6px 10px!important}#appointmentCropModal .ukmb-message-crop-stage{height:calc(100dvh - 330px)!important;max-height:calc(100dvh - 330px)!important;min-height:90px!important}#appointmentCropModal .ukmb-message-crop-controls{gap:4px!important;margin-top:4px!important;padding-top:4px!important}#appointmentCropModal .ukmb-message-crop-controls button{height:27px!important;min-height:27px!important;padding:0 7px!important;font-size:9px!important}}
@media(max-width:640px){#appointmentCropModal.appointment-crop-modal{padding:5px!important}#appointmentCropModal.appointment-crop-modal .crop-box{max-height:calc(100dvh - 10px)!important;padding:8px!important}#appointmentCropModal .ukmb-message-crop-stage{height:calc(100dvh - 365px)!important;max-height:calc(100dvh - 365px)!important;min-height:100px!important}#appointmentCropModal .ukmb-message-crop-controls button{flex:1 1 calc(50% - 5px)!important;max-width:calc(50% - 3px)!important;white-space:normal!important}}


/* ============================================================
   UKMB FINAL VIEWPORT FIT — appointment/payment proof cropper
   The modal is mounted under <body>; this keeps it centered in
   the actual viewport and prevents the footer controls being clipped.
============================================================ */
.crop-modal,
.ukmb-message-crop-modal,
.ukmb-complaint-crop-modal,
.appointment-crop-modal {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    padding: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
}
.crop-modal[hidden],
.ukmb-message-crop-modal[hidden],
.ukmb-complaint-crop-modal[hidden],
.appointment-crop-modal[hidden] {
    display: none !important;
}
.crop-box,
.ukmb-message-crop-card,
.ukmb-complaint-crop-card,
.appointment-crop-modal .crop-box {
    width: min(850px, calc(100vw - 32px)) !important;
    max-width: min(850px, calc(100vw - 32px)) !important;
    max-height: calc(100dvh - 32px) !important;
    min-height: 0 !important;
    flex: 0 0 auto !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}
.crop-image-wrapper,
.ukmb-message-crop-stage,
.ukmb-complaint-crop-stage {
    flex: 0 1 auto !important;
    min-height: 180px !important;
    height: min(42vh, 380px) !important;
    max-height: min(42vh, 380px) !important;
}
@media (max-height: 760px) {
    .crop-modal,
    .ukmb-message-crop-modal,
    .ukmb-complaint-crop-modal,
    .appointment-crop-modal {
        padding: 10px !important;
    }
    .crop-box,
    .ukmb-message-crop-card,
    .ukmb-complaint-crop-card,
    .appointment-crop-modal .crop-box {
        width: min(850px, calc(100vw - 20px)) !important;
        max-width: min(850px, calc(100vw - 20px)) !important;
        max-height: calc(100dvh - 20px) !important;
        padding: 14px 16px 16px !important;
    }
    .crop-image-wrapper,
    .ukmb-message-crop-stage,
    .ukmb-complaint-crop-stage {
        height: min(34vh, 260px) !important;
        max-height: min(34vh, 260px) !important;
        min-height: 150px !important;
    }
    .crop-controls,
    .ukmb-message-crop-controls,
    .ukmb-complaint-crop-controls {
        margin-top: 8px !important;
        padding-top: 8px !important;
        gap: 6px !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: 560px) {
    .crop-modal,
    .ukmb-message-crop-modal,
    .ukmb-complaint-crop-modal,
    .appointment-crop-modal {
        padding: 8px !important;
    }
    .crop-box,
    .ukmb-message-crop-card,
    .ukmb-complaint-crop-card,
    .appointment-crop-modal .crop-box {
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
        max-height: calc(100dvh - 16px) !important;
        padding: 12px !important;
        border-radius: 14px !important;
    }
    .crop-image-wrapper,
    .ukmb-message-crop-stage,
    .ukmb-complaint-crop-stage {
        height: min(32vh, 230px) !important;
        max-height: min(32vh, 230px) !important;
        min-height: 140px !important;
    }
}


/* UKMB 22-OCT-2026 — viewport-fit crop modal, including short desktop windows. */
.crop-modal.active, .ukmb-message-crop-modal:not([hidden]), .ukmb-complaint-crop-modal:not([hidden]), .appointment-crop-modal:not([hidden]) {
    align-items: center !important; justify-content: center !important;
}
.crop-modal.active .crop-box, .appointment-crop-modal .crop-box {
    max-height: calc(100dvh - 24px) !important;
}
.crop-modal.active .crop-image-wrapper {
    height: clamp(160px, 52dvh, 560px) !important;
    min-height: 0 !important; max-height: calc(100dvh - 190px) !important;
}
@media (max-height: 650px) {
    .crop-modal, .ukmb-message-crop-modal, .ukmb-complaint-crop-modal, .appointment-crop-modal { padding: 6px !important; }
    .crop-modal.active .crop-box, .appointment-crop-modal .crop-box, .ukmb-message-crop-card, .ukmb-complaint-crop-card { max-height: calc(100dvh - 12px) !important; padding: 8px 12px !important; }
    .crop-header, .ukmb-message-crop-head, .ukmb-complaint-crop-head { margin-bottom: 6px !important; }
    .crop-modal.active .crop-image-wrapper, .ukmb-message-crop-stage, .ukmb-complaint-crop-stage { height: clamp(110px, 38dvh, 340px) !important; max-height: calc(100dvh - 160px) !important; }
    .crop-controls, .ukmb-message-crop-controls, .ukmb-complaint-crop-controls { margin-top: 6px !important; padding-top: 6px !important; gap: 5px !important; }
}

/* UKMB 22-OCT-2026 — registration/profile cropper must fit the visible viewport.
   Scoped to .crop-modal so appointment, complaint and message cropper contracts stay intact. */
.crop-modal.active {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    padding: 8px !important;
    box-sizing: border-box !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: auto !important;
    overscroll-behavior: contain !important;
}
.crop-modal.active .crop-box {
    width: min(820px, calc(100vw - 16px)) !important;
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100dvh - 16px) !important;
    height: auto !important;
    min-height: 0 !important;
    margin: auto !important;
    padding: clamp(8px, 1.5vh, 14px) clamp(10px, 1.5vw, 18px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}
.crop-modal.active .crop-header { margin-bottom: 7px !important; }
.crop-modal.active .crop-header h3 { font-size: clamp(16px, 2.4vh, 20px) !important; }
.crop-modal.active .crop-image-wrapper {
    flex: 0 1 auto !important;
    width: 100% !important;
    height: min(44dvh, 430px) !important;
    min-height: 120px !important;
    max-height: calc(100dvh - 210px) !important;
}
.crop-modal.active .crop-controls { flex: 0 0 auto !important; gap: 6px !important; margin-top: 8px !important; padding-top: 8px !important; }
.crop-modal.active .crop-btn { min-height: 34px !important; height: auto !important; padding: 7px 10px !important; border-radius: 999px !important; }
@media (max-width: 600px) {
    .crop-modal.active .crop-box { width: calc(100vw - 16px) !important; max-width: calc(100vw - 16px) !important; }
    .crop-modal.active .crop-image-wrapper { height: min(36dvh, 270px) !important; max-height: calc(100dvh - 190px) !important; min-height: 100px !important; }
    .crop-modal.active .crop-controls { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; }
    .crop-modal.active .crop-btn { flex: 1 1 calc(33.333% - 8px) !important; min-width: 84px !important; font-size: 11px !important; }
}


/* UKMB-CROPPER-403 — true viewport-fit layout; image frame scales to source and viewport. */
.crop-modal.active{padding:clamp(8px,2vw,20px)!important;overflow:auto!important;}
.crop-modal.active .crop-box{width:min(920px,calc(100vw - 24px))!important;max-width:calc(100vw - 24px)!important;max-height:calc(100dvh - 24px)!important;height:auto!important;overflow:auto!important;margin:auto!important;}
.crop-modal.active .crop-image-wrapper{height:min(56dvh,560px)!important;max-height:calc(100dvh - 230px)!important;min-height:120px!important;}
.crop-modal.active .crop-controls{display:flex!important;flex-wrap:wrap!important;align-items:center!important;justify-content:center!important;gap:8px!important;padding:10px 12px 14px!important;}
.crop-modal.active .crop-controls .crop-btn{flex:0 1 auto!important;white-space:nowrap!important;font-weight:400!important;}
@media(max-width:640px){.crop-modal.active .crop-box{width:calc(100vw - 16px)!important;max-width:calc(100vw - 16px)!important;max-height:calc(100dvh - 16px)!important;border-radius:12px!important}.crop-modal.active .crop-header{padding:10px 12px 8px!important}.crop-modal.active .crop-header h3{font-size:16px!important;font-weight:400!important}.crop-modal.active .signup-central-crop-modebar{margin:0 10px 8px!important}.crop-modal.active .crop-image-wrapper{margin:0 10px!important;height:min(46dvh,360px)!important;max-height:calc(100dvh - 230px)!important;min-height:100px!important}.crop-modal.active .crop-controls{gap:6px!important;padding:8px!important}.crop-modal.active .crop-controls .crop-btn{font-size:11px!important;padding:7px 9px!important}}