.kc-cropped-image {
    max-width: 720px;
}

.kc-cropped-image-preview {
    align-items: center;
    background: #f6f7f7;
    border: 1px solid #c3c4c7;
    border-radius: 4px;
    box-sizing: border-box;
    color: #646970;
    display: flex;
    justify-content: center;
    margin: 0 0 10px;
    min-height: 120px;
    overflow: hidden;
    padding: 12px;
    width: 100%;
}

.kc-cropped-image-preview.has-image {
    background: #fff;
    padding: 0;
}

.kc-cropped-image-preview img {
    display: block;
    height: auto;
    max-height: 280px;
    max-width: 100%;
    width: auto;
}

.kc-cropped-image-file-label {
    cursor: pointer;
    display: inline-block;
    overflow: hidden;
    position: relative;
}

.kc-cropped-image-file {
    height: 1px;
    left: -9999px;
    opacity: 0;
    position: absolute;
    top: -9999px;
    width: 1px;
}

.kc-cropped-image-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

/*
 * Secondary image actions must never flash or show when the field has no active image.
 * The HTML hidden attribute and JS state are still used, but these CSS guards make
 * the initial no-image state reliable even before JavaScript runs.
 */
.kc-cropped-image:not(.has-active-image) .kc-cropped-image-replace,
.kc-cropped-image:not(.has-active-image) .kc-cropped-image-reset-crop,
.kc-cropped-image:not(.has-active-image) .kc-cropped-image-clear,
.kc-cropped-image:not(.has-active-image) .kc-cropped-image-alt-wrap {
    display: none !important;
}

.kc-cropped-image.has-active-image .kc-cropped-image-replace,
.kc-cropped-image.has-active-image .kc-cropped-image-reset-crop,
.kc-cropped-image.has-active-image .kc-cropped-image-clear {
    display: inline-block;
}

.kc-cropped-image.has-active-image .kc-cropped-image-alt-wrap {
    display: block;
}

.kc-cropped-image .kc-cropped-image-replace[hidden],
.kc-cropped-image .kc-cropped-image-reset-crop[hidden],
.kc-cropped-image .kc-cropped-image-clear[hidden],
.kc-cropped-image .kc-cropped-image-alt-wrap[hidden] {
    display: none !important;
}

.kc-cropped-image-alt-wrap {
    margin: 0 0 12px;
}

.kc-cropped-image-alt-wrap label {
    display: grid;
    gap: 4px;
    max-width: 520px;
}

.kc-cropped-image-alt-wrap input {
    width: 100%;
}

.kc-crop-panel {
    border: 1px solid #c3c4c7;
    border-radius: 4px;
    padding: 12px;
}

.kc-crop-stage-wrap {
    background-image: linear-gradient(45deg, #ddd 25%, transparent 25%), linear-gradient(-45deg, #ddd 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ddd 75%), linear-gradient(-45deg, transparent 75%, #ddd 75%);
    background-position: 0 0, 0 10px, 10px -10px, -10px 0;
    background-size: 20px 20px;
    border: 1px solid #8c8f94;
    cursor: grab;
    overflow: hidden;
    width: 100%;
}

.kc-crop-stage-wrap.is-dragging {
    cursor: grabbing;
}

.kc-crop-stage {
    aspect-ratio: var(--kc-crop-ratio, 1.7777778);
    display: block;
    height: auto;
    max-width: 100%;
    width: 100%;
}

.kc-crop-toolbar {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: space-between;
    margin-top: 12px;
}

.kc-crop-toolbar label {
    align-items: center;
    display: flex;
    flex: 1 1 260px;
    gap: 10px;
}

.kc-crop-zoom {
    width: min(320px, 100%);
}

.kc-crop-help,
.kc-crop-size,
.kc-crop-minimum {
    margin-bottom: 0;
}

.kc-crop-mode {
    align-items: flex-start;
    display: grid;
    gap: 6px;
    margin: 0 0 12px;
}

.kc-crop-mode strong {
    display: block;
}

.kc-crop-mode label {
    align-items: center;
    display: flex;
    gap: 6px;
    margin: 0;
}

.kc-crop-stage-wrap.is-contain-mode {
    cursor: default;
}

.kc-crop-zoom:disabled {
    opacity: 0.55;
}

/* Hide the auto-generated Kadence compatibility single_image field in the editor.
   The field remains registered with Meta Box so Kadence Dynamic Image can discover it. */
.rwmb-field.kc-cropped-image-kadence-compat-field,
.rwmb-field.rwmb-kc-cropped-image-kadence-compat-field,
.kc-cropped-image-kadence-compat-field {
    display: none !important;
}