/* ── Field — crop upload ─────────────────────────────────────────────────── */

.field--crop-upload {
    cursor:     pointer;
    text-align: center;
}

.field--crop-upload:not(.field--disabled):hover {
    border-color: var(--field-border-hover);
}

.field__crop-circle {
    position:        relative;
    width:           96px;
    height:          96px;
    margin:          0.5rem auto 0.25rem;
    border-radius:   50%;
    overflow:        hidden;
    background:      #f1f5f9;
    display:         flex;
    align-items:     center;
    justify-content: center;
}

.field__crop-icon {
    font-size: 2.2rem;
    color:     var(--field-placeholder);
}

.field__crop-circle img {
    position:   absolute;
    inset:      0;
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    none;
}

.field--filled .field__crop-circle img {
    display: block;
}

.field--filled .field__crop-icon {
    display: none;
}

.field__crop-hint {
    display:   block;
    color:     var(--field-placeholder);
    font-size: 0.8rem;
    padding:   0 0 0.4rem;
}